/*
 * =====================================================
 *  HOMESKET — THEME.CSS
 *  LIGHT MODE  = :root {}
 *  DARK MODE   = [data-theme="dark"] {}
 *
 *  HOW TO CHANGE COLOURS:
 *  Find the variable you want, change the value, save,
 *  push to GitHub — updates all pages instantly.
 * =====================================================
 */

/* ══════════════════════════════════════════
   LIGHT MODE (default)
   ══════════════════════════════════════════ */
:root {

  /* PAGE BACKGROUND
     The main page background colour for all pages */
  --bg-page:           #E2D9CC;

  /* PRIMARY BRAND — TERRACOTTA
     Used on: buttons, active states, links, icons, highlights */
  --terra:             #C8784A;
  /* Darker terracotta — used on button hover */
  --terra-dark:        #A85F35;
  /* Very faint terracotta tint — used on icon backgrounds, hover fills */
  --terra-pale:        rgba(200,120,74,0.10);

  /* MAIN TEXT COLOURS */
  /* Primary text — headings, room names, product names, modal titles */
  --brown:             #f79b69;
  /* Secondary text — descriptions, labels, subtitles */
  --brown-mid:         #f3a86e;
  /* Muted text — placeholders, step tags, timestamps */
  --muted:             #B89880;

  /* SURFACE COLOURS */
  /* Card backgrounds — room cards, product panels, modals */
  --cream:             #FBF7F2;
  /* Section backgrounds — panel headers/footers, dividers */
  --sand:              #F0E8DC;
  /* Card and input borders */
  --border:            rgba(200,120,74,0.18);

  /* CARD STYLES */
  /* Card background — room cards, category cards, panels */
  --card-bg:           #FFFFFF;
  /* Card shadow — resting state */
  --card-shadow:       0 2px 8px rgba(61,32,16,0.06);
  /* Card shadow — on hover */
  --card-shadow-hover: 0 10px 30px rgba(61,32,16,0.14);
  /* Card border radius */
  --card-radius:       14px;

  /* NAVIGATION BAR */
  /* Navbar background — semi-transparent frosted */
  --nav-bg:            #FFFFFF;
  /* Navbar bottom border */
  --nav-border:        rgba(200,120,74,0.25);

  /* INPUTS & FORMS */
  /* Input field background */
  --input-bg:          #FFFFFF;
  /* Input field border */
  --input-border:      rgba(200,120,74,0.25);
  /* Input field text */
  --input-text:        #3D2010;

  /* ACCENT COLOURS — category cards cycle through these */
  /* Navy blue — used on every 2nd category card icon */
  --navy:              #2C4A7C;
  --navy-pale:         rgba(44,74,124,0.08);
  /* Amber — used on product panel header stripe and item count badge */
  --amber:             #D4820A;
  --amber-pale:        rgba(212,130,10,0.08);
  /* Sage green — used on every 3rd category card icon */
  --sage:              #5A8A5E;
  --sage-pale:         rgba(90,138,94,0.08);

  /* BEST PRICE HIGHLIGHT
     Used on: best price badge, cheapest price text */
  --green:             #5E7A3C;
  --green-pale:        rgba(94,122,60,0.10);

  /* DELETE / DANGER — RED
     Used on: delete room button, delete category button,
     delete product button, delete build modal confirm button */
  --red:               #D94F4F;
  /* Faint red background for delete icon buttons */
  --red-pale:          rgba(217,79,79,0.10);
  /* Deeper red for modal button hover */
  --red-solid:         #C13030;

  /* ADD / CONFIRM — ORANGE (terracotta)
     Used on: Add category, Add product, Continue, Next,
     Save, Confirm buttons across all pages */
  --add-bg:            #C8784A;
  --add-hover:         #A85F35;
  --add-text:          #FFFFFF;

  /* MODAL
     Modal background overlay (behind the modal box) */
  --modal-overlay:     rgba(61,32,16,0.45);
  /* Modal box background */
  --modal-bg:          #FFFFFF;

  /* TEXT ALIASES — used in dark mode overrides */
  --text-primary:      #3D2010;
  --text-secondary:    #7A5233;
  --text-muted:        #B89880;

  /* THEME TOGGLE BUTTON */
  --toggle-bg:         rgba(200,120,74,0.12);
  --toggle-border:     rgba(200,120,74,0.25);
  --toggle-icon:       #C8784A;

  /* LOGO & WORDMARK
     "Home" part of the Homesket logo */
  --logo-home:         #3D2010;
  /* "sket" part of the Homesket logo */
  --logo-sket:         #C8784A;
  /* Tagline text below the logo */
  --logo-tagline:      #B89880;
}

/* ══════════════════════════════════════════
   DARK MODE
   Activated when <html data-theme="dark">
   ══════════════════════════════════════════ */
[data-theme="dark"] {

  /* PAGE BACKGROUND — deep blue-grey (matches UniFi/Did It Send) */
  --bg-page:           #000000;

  /* PRIMARY BRAND — lighter terracotta so it pops on dark */
  --terra:             #E8956A;
  --terra-dark:        #C8784A;
  --terra-pale:        rgb(255, 240, 240);

  /* MAIN TEXT — bright warm white for readability on dark */
  --brown:             #F2EDE8;
  --brown-mid:         #D4C4B4;
  --muted:             #f8f3ed;

  /* SURFACE COLOURS — layered darks, each step lighter */
  /* Card inner surfaces, input areas */
  --cream:             #22252F;
  /* Panel headers, footer backgrounds */
  --sand:              #ffffff;
  /* Subtle white borders — barely visible on dark */
  --border:            rgba(255,255,255,0.09);

  /* CARD — clearly lighter than page background */
  --card-bg:           #343949;
  --card-shadow:       0 2px 12px rgba(0, 0, 0, 0.288);
  --card-shadow-hover: 0 12px 40px rgba(0,0,0,0.6);
  --card-radius:       14px;

  /* NAVIGATION BAR — slightly lighter than page */
  --nav-bg:            rgba(0, 0, 0, 0.97);
  --nav-border:        rgba(216, 111, 12, 0.274);

  /* INPUTS — visible against card background */
  --input-bg:          #2E3140;
  --input-border:      rgba(255,255,255,0.13);
  --input-text:        #F2EDE8;

  /* ACCENT COLOURS — brightened for dark background */
  --navy:              #6B9AE0;
  --navy-pale:         rgba(107,154,224,0.14);
  --amber:             #F0A830;
  --amber-pale:        rgba(240,168,48,0.14);
  --sage:              #30ac39;
  --sage-pale:         rgba(166, 194, 168, 0.14);

  /* BEST PRICE — bright green, visible on dark */
  --green:             #30ac39;
  --green-pale:        rgba(110,201,122,0.15);

  /* DELETE — vivid red, very visible on dark */
  --red:               #FF5C5C;
  --red-pale:          rgba(255,92,92,0.14);
  --red-solid:         #E03030;

  /* ADD / CONFIRM — bright orange on dark */
  --add-bg:            #E8956A;
  --add-hover:         #C8784A;
  --add-text:          #FFFFFF;

  /* MODAL */
  --modal-overlay:     rgba(0,0,0,0.7);
  --modal-bg:          rgba(255,255,255,0.09);

  /* TEXT */
  --text-primary:      #F2EDE8;
  --text-secondary:    #D4C4B4;
  --text-muted:        #8A7A6A;

  /* THEME TOGGLE */
  --toggle-bg:         rgba(255,255,255,0.07);
  --toggle-border:     rgba(255,255,255,0.14);
  --toggle-icon:       #E8956A;

  /* LOGO — bright in dark mode so it's visible */
  --logo-home:         #F2EDE8;
  --logo-sket:         #E8956A;
  --logo-tagline:      #8A7A6A;
}

/* ══════════════════════════════════════════
   BASE STYLES — applied to all pages
   ══════════════════════════════════════════ */

body {
  background-color: var(--bg-page);
  color: var(--text-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* No grid lines — plain background */
body::after { display: none !important; }

*, *::before, *::after {
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

/* ── LOGO COLOURS ── */
.logo-wordmark .home, .nav-wordmark .home { color: var(--logo-home) !important; }
.logo-wordmark .sket, .nav-wordmark span  { color: var(--logo-sket) !important; }
.logo-tagline { color: var(--logo-tagline) !important; }

/* ── TOTAL FONT — matches product prices ── */
.panel-footer-total, #panelTotal, .nav-total, #navTotal {
  font-family: 'DM Sans', system-ui, sans-serif !important;
  font-size: 15px !important; font-weight: 600 !important;
  color: var(--text-primary) !important;
}

/* ── DELETE — always red ── */
.btn-delete, .cat-btn-del, .prod-btn-del { background: var(--red-pale) !important; color: var(--red) !important; }
.btn-delete:hover, .cat-btn-del:hover, .prod-btn-del:hover { background: var(--red) !important; color: #fff !important; }
.modal-btn-danger { background: var(--red) !important; color: #fff !important; }
.modal-btn-danger:hover { background: var(--red-solid) !important; }

/* ── ADD / CONFIRM — always orange ── */
.add-category-btn, .add-product-btn, .btn-confirm,
.modal-btn-primary, .continue-btn, .build-btn, .form-btn, .search-btn {
  background: var(--add-bg) !important; color: var(--add-text) !important;
}
.add-category-btn:hover, .add-product-btn:hover, .btn-confirm:hover,
.modal-btn-primary:hover, .continue-btn:hover, .build-btn:hover,
.form-btn:hover, .search-btn:hover { background: var(--add-hover) !important; }

/* ── DARK MODE OVERRIDES ── */
[data-theme="dark"] .room-card, [data-theme="dark"] .cat-card,
[data-theme="dark"] .how-card, [data-theme="dark"] .products-panel,
[data-theme="dark"] .compare-section, [data-theme="dark"] .resume-card,
[data-theme="dark"] .add-room-input-card { background: var(--card-bg) !important; border-color: var(--border) !important; }

[data-theme="dark"] .room-card-name, [data-theme="dark"] .room-name,
[data-theme="dark"] .cat-name, [data-theme="dark"] .page-title,
[data-theme="dark"] .section-title, [data-theme="dark"] .how-title,
[data-theme="dark"] .modal-title, [data-theme="dark"] .product-name-cell,
[data-theme="dark"] .product-price, [data-theme="dark"] .compare-price { color: var(--text-primary) !important; }

[data-theme="dark"] .room-card-meta, [data-theme="dark"] .cat-count,
[data-theme="dark"] .page-sub, [data-theme="dark"] .how-desc,
[data-theme="dark"] .modal-desc, [data-theme="dark"] .room-meta { color: var(--text-secondary) !important; }

[data-theme="dark"] input, [data-theme="dark"] select,
[data-theme="dark"] .modal-input, [data-theme="dark"] .modal-select,
[data-theme="dark"] .build-row, [data-theme="dark"] .form-row,
[data-theme="dark"] .add-room-input-card input {
  background: var(--input-bg) !important; border-color: var(--input-border) !important; color: var(--input-text) !important;
}

[data-theme="dark"] .nav, [data-theme="dark"] .builds-tab-bar { background: var(--nav-bg) !important; border-color: var(--nav-border) !important; }
[data-theme="dark"] .nav-wordmark { color: var(--text-primary) !important; }
[data-theme="dark"] .nav-back { background: var(--card-bg) !important; border-color: var(--border) !important; color: var(--text-secondary) !important; }
[data-theme="dark"] .build-tab { color: var(--text-muted) !important; }
[data-theme="dark"] .build-tab.active { background: var(--card-bg) !important; color: var(--terra) !important; border-color: var(--border) !important; }
[data-theme="dark"] .modal { background: var(--modal-bg) !important; }
[data-theme="dark"] .modal-overlay { background: var(--modal-overlay) !important; }
[data-theme="dark"] .modal-btn-secondary { background: var(--sand) !important; color: var(--text-secondary) !important; }
[data-theme="dark"] .product-table th { background: rgba(255,255,255,0.03) !important; color: var(--text-muted) !important; border-color: var(--border) !important; }
[data-theme="dark"] .product-table td { border-color: rgba(255,255,255,0.06) !important; }
[data-theme="dark"] .product-table tbody tr:hover { background: rgba(255,255,255,0.04) !important; }
[data-theme="dark"] .products-panel-header, [data-theme="dark"] .panel-footer { background: rgba(255,255,255,0.03) !important; border-color: var(--border) !important; }
[data-theme="dark"] .products-panel-header h3 { color: var(--text-primary) !important; }
[data-theme="dark"] .feat, [data-theme="dark"] .pill,
[data-theme="dark"] .retailer-logo-pill, [data-theme="dark"] .preset-chip,
[data-theme="dark"] .resume-card { background: var(--card-bg) !important; border-color: var(--border) !important; color: var(--text-secondary) !important; }
[data-theme="dark"] .add-room-card { border-color: rgba(232,149,106,0.3) !important; }
[data-theme="dark"] .add-room-card:hover { background: rgba(232,149,106,0.08) !important; }
[data-theme="dark"] .add-room-label { color: var(--terra) !important; }
[data-theme="dark"] .add-room-sub { color: var(--text-muted) !important; }
[data-theme="dark"] .cat-card-add { border-color: rgba(232,149,106,0.25) !important; }
[data-theme="dark"] .cat-card-add:hover { background: rgba(232,149,106,0.08) !important; }
[data-theme="dark"] #tabContextMenu { background: var(--card-bg) !important; border-color: var(--border) !important; }
[data-theme="dark"] .ctx-item { color: var(--text-primary) !important; }
[data-theme="dark"] .resume-dropdown { background: var(--card-bg) !important; border-color: var(--border) !important; }
[data-theme="dark"] .resume-build-name, [data-theme="dark"] .resume-dropdown-name { color: var(--text-primary) !important; }
[data-theme="dark"] .resume-dropdown-rooms { color: var(--text-muted) !important; }
[data-theme="dark"] .page-tag, [data-theme="dark"] .section-tag { color: var(--terra) !important; }
[data-theme="dark"] .nav-total { background: rgba(255,255,255,0.06) !important; border-color: var(--border) !important; color: var(--text-primary) !important; }
[data-theme="dark"] .nav-build-badge { background: var(--terra-pale) !important; border-color: rgba(232,149,106,0.25) !important; color: var(--terra) !important; }
[data-theme="dark"] .three-dot-btn { background: var(--card-bg) !important; border-color: var(--border) !important; color: var(--text-secondary) !important; }
[data-theme="dark"] .hero-sub, [data-theme="dark"] p { color: var(--text-secondary); }
[data-theme="dark"] .build-label { color: var(--text-primary) !important; }
[data-theme="dark"] .build-sub { color: var(--text-muted) !important; }
[data-theme="dark"] .build-row { background: var(--input-bg) !important; }
[data-theme="dark"] .build-row input { color: var(--input-text) !important; }

/* ── THEME TOGGLE (navbar pages) ── */
.theme-toggle { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--toggle-border); background: var(--toggle-bg); color: var(--toggle-icon); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
.theme-toggle:hover { background: var(--terra-pale); border-color: var(--terra); transform: scale(1.05); }
.theme-toggle svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .icon-sun  { display: none; }
.theme-toggle .icon-moon { display: block; }
[data-theme="dark"] .theme-toggle .icon-sun  { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* ── FLOATING TOGGLE (homepage) ── */
.theme-toggle-float { position: fixed; top: 20px; right: 20px; z-index: 999; width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--toggle-border); background: var(--toggle-bg); color: var(--toggle-icon); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 16px rgba(0,0,0,0.12); transition: background 0.2s, border-color 0.2s, transform 0.15s; }
.theme-toggle-float:hover { background: var(--terra-pale); border-color: var(--terra); transform: scale(1.08); }
.theme-toggle-float svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle-float .icon-sun  { display: none; }
.theme-toggle-float .icon-moon { display: block; }
[data-theme="dark"] .theme-toggle-float .icon-sun  { display: block; }
[data-theme="dark"] .theme-toggle-float .icon-moon { display: none; }