/* ============================================================
       RESET
    ============================================================ */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    /* ============================================================
       FLUID SCALE SYSTEM
       ─────────────────────────────────────────────────────────────
       Instead of fixed breakpoint jumps, we use CSS clamp() to
       create smoothly interpolating values between a MIN and MAX.

       Formula:  clamp(MIN, PREFERRED_VW, MAX)
         • MIN  = smallest value (mobile, ~320px)
         • VW   = grows linearly with viewport width
         • MAX  = caps at giant displays (400"+ screens)

       This means EVERY property scales continuously —
       no sudden layout jumps at specific pixel widths.

       Base reference: 1vw on a 1920px screen ≈ 19.2px
       ────────────────────────────────────────────────────────── */

    /* ============================================================
       CSS CUSTOM PROPERTIES — BLACK (default)
    ============================================================ */
    :root,
    [data-theme="black"] {
      /* ── Backgrounds ── */
      --bg-page:             #0a0a0a;
      --bg-surface:          #141414;
      --bg-surface-2:        #1c1c1c;
      --bg-surface-3:        #242424;
      --bg-header:           #0d0d0d;

      /* ── Accent ── */
      --accent:              #00e676;
      --accent-dark:         #00c85a;
      --accent-glow:         rgba(0,230,118,0.12);
      --accent-text:         #0a0a0a;

      /* ── Borders ── */
      --border:              #2a2a2a;
      --border-strong:       #383838;

      /* ── Text ── */
      --text-primary:        #f0f0f0;
      --text-secondary:      #a0a0a0;
      --text-muted:          #555555;
      --text-on-header:      #f0f0f0;

      /* ── Status ── */
      --status-high:         #00e676;
      --status-high-bg:      rgba(0,230,118,0.10);
      --status-mid:          #ffb300;
      --status-mid-bg:       rgba(255,179,0,0.10);
      --status-low:          #ff5252;
      --status-low-bg:       rgba(255,82,82,0.10);

      /* ── Shadows ── */
      --shadow-sm:           0 1px 4px rgba(0,0,0,0.5);
      --shadow-md:           0 4px 20px rgba(0,0,0,0.6);
      --shadow-glow:         0 4px 24px rgba(0,230,118,0.15);

      /* ── Stock Banner ── */
      --stock-banner-bg:     linear-gradient(135deg,#004d22,#003018);
      --stock-banner-border: rgba(0,230,118,0.2);
      --stock-num-color:     #00e676;
      --stock-num-shadow:    0 0 20px rgba(0,230,118,0.4);

      /* ── Components ── */
      --stat-bar:            #00e676;
      --badge-bg:            rgba(0,230,118,0.08);
      --badge-border:        rgba(0,230,118,0.2);
      --badge-text:          #00e676;
      --badge-label:         rgba(0,230,118,0.5);
      --panel-hd-bg:         #0a0a0a;
      --panel-hd-border:     #00e676;
      --img-bg:              linear-gradient(145deg,#1e1e1e,#141414);
      --img-bg-card:         linear-gradient(135deg,#1a1a1a,#111);

      /* ── Fluid Border Radius (scales with screen) ── */
      --radius:    clamp(8px,  0.73vw, 20px);
      --radius-sm: clamp(5px,  0.42vw, 12px);
      --radius-xs: clamp(3px,  0.26vw, 8px);

      /* ── Fluid Spacing (padding/gap) ── */
      --space-xs:  clamp(4px,  0.42vw, 12px);
      --space-sm:  clamp(8px,  0.63vw, 18px);
      --space-md:  clamp(12px, 1.04vw, 32px);
      --space-lg:  clamp(16px, 1.67vw, 48px);
      --space-xl:  clamp(20px, 2.08vw, 64px);
      --space-2xl: clamp(24px, 3.13vw, 96px);

      /* ── Fluid Border Width ── */
      --border-w:  clamp(1px, 0.05vw, 2px);
      --accent-border-w: clamp(2px, 0.16vw, 5px);
    }

    /* ============================================================
       CSS CUSTOM PROPERTIES — WHITE + YELLOW (#ffcc00)
    ============================================================ */
    [data-theme="light"] {
      --bg-page:             #f5f5f0;
      --bg-surface:          #ffffff;
      --bg-surface-2:        #fafaf7;
      --bg-surface-3:        #f0f0e8;
      --bg-header:           #111111;
      --accent:              #ffcc00;
      --accent-dark:         #e6b800;
      --accent-glow:         rgba(255,204,0,0.12);
      --accent-text:         #111111;
      --border:              #e4e4d8;
      --border-strong:       #d0d0c0;
      --text-primary:        #111111;
      --text-secondary:      #555550;
      --text-muted:          #999990;
      --text-on-header:      #ffffff;
      --status-high:         #16a34a;
      --status-high-bg:      #f0fdf4;
      --status-mid:          #d97706;
      --status-mid-bg:       #fffbeb;
      --status-low:          #dc2626;
      --status-low-bg:       #fef2f2;
      --shadow-sm:           0 1px 4px rgba(0,0,0,0.06);
      --shadow-md:           0 4px 20px rgba(0,0,0,0.08);
      --shadow-glow:         0 4px 24px rgba(255,204,0,0.28);
      --stock-banner-bg:     linear-gradient(135deg,#16a34a,#15803d);
      --stock-banner-border: transparent;
      --stock-num-color:     #ffffff;
      --stock-num-shadow:    none;
      --stat-bar:            #ffcc00;
      --badge-bg:            #ffcc00;
      --badge-border:        #ffcc00;
      --badge-text:          #111111;
      --badge-label:         rgba(17,17,17,0.6);
      --panel-hd-bg:         #111111;
      --panel-hd-border:     #ffcc00;
      --img-bg:              linear-gradient(145deg,#f0ede5,#e8e4d8);
      --img-bg-card:         linear-gradient(135deg,#eceae4,#dedad0);
    }

    /* ============================================================
       SMOOTH THEME TRANSITION
    ============================================================ */
    *, *::before, *::after {
      transition:
        background-color 0.35s ease,
        border-color 0.35s ease,
        color 0.35s ease,
        box-shadow 0.35s ease;
    }
    .stat-card, .item-card, .panel-row, .tab {
      transition:
        background-color 0.35s ease,
        border-color 0.35s ease,
        color 0.35s ease,
        box-shadow 0.2s ease,
        transform 0.15s ease;
    }

    /* ============================================================
       BODY
    ============================================================ */
    body {
      font-family: 'DM Sans', sans-serif;
      background: var(--bg-page);
      color: var(--text-primary);
      min-height: 100vh;
      overflow-x: hidden;
      /* Fluid base font size — scales entire page proportionally */
      font-size: clamp(12px, 1.04vw, 22px);
    }

    /* ============================================================
       TOP BAR
       ─ Fluid padding, fluid font sizes, always sticky
       ─ flex-wrap ensures it never overflows on tiny screens
    ============================================================ */
    .topbar {
      background: var(--bg-header);
      border-bottom: var(--accent-border-w) solid var(--accent);
      padding: clamp(8px,0.83vw,22px) clamp(12px,3.33vw,96px);
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: sticky;
      top: 0;
      z-index: 300;
      gap: clamp(8px,0.83vw,20px);
      flex-wrap: wrap;           /* Wraps on very small screens */
      min-height: clamp(44px,4.17vw,90px);
    }

    /* Title text — fluid size between 13px (mobile) and 28px (400") */
    .topbar-title h1 {
      font-size: clamp(13px, 1.15vw, 28px);
      font-weight: 700;
      color: var(--text-on-header);
      letter-spacing: -0.02em;
      line-height: 1.2;
    }

    /* Subtitle below title */
    .topbar-title p {
      font-size: clamp(9px, 0.63vw, 15px);
      color: #888;
      margin-top: clamp(1px,0.1vw,3px);
    }

    .topbar-actions {
      display: flex;
      align-items: center;
      gap: clamp(6px,0.63vw,16px);
      flex-shrink: 0;
    }

    /* ── Live Badge ── */
    .live-badge {
      display: flex;
      align-items: center;
      gap: clamp(4px,0.36vw,8px);
      background: var(--accent-glow);
      border: 1px solid var(--accent);
      color: var(--accent);
      padding: clamp(3px,0.31vw,8px) clamp(8px,0.83vw,20px);
      border-radius: 999px;
      font-size: clamp(10px,0.73vw,17px);
      font-weight: 600;
      white-space: nowrap;
    }
    .live-dot {
      width: clamp(6px,0.47vw,12px);
      height: clamp(6px,0.47vw,12px);
      background: var(--accent);
      border-radius: 50%;
      flex-shrink: 0;
      animation: pulseDot 1.6s ease-in-out infinite;
    }
    @keyframes pulseDot {
      0%,100%{opacity:1;transform:scale(1)}
      50%{opacity:0.35;transform:scale(1.5)}
    }

    

    /* ============================================================
       TABS BAR
       ─ Horizontal scroll with mouse drag + touch + keyboard
       ─ Fluid tab sizes
    ============================================================ */
   /* BASE */


   .tabs-bar {
  overflow-x: auto;
  cursor: grab;
}

.tabs-bar.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
}

/* ⚠️ IMPORTANT: text select band */
.tabs-bar, .tab {
  user-select: none;
}

.tabs-bar {
  background: var(--bg-surface);
  border-bottom: var(--border-w) solid var(--border);
  padding: 0 clamp(12px,2.08vw,64px);
  display: flex;
  gap: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;

  scrollbar-width: thin;
  scrollbar-color: transparent transparent; /* hidden by default */
}

.tabs-bar::-webkit-scrollbar {
  height: 3px; /* 🔥 FIXED */
}

.tabs-bar::-webkit-scrollbar-thumb {
  background: #e4e4d8;
  border-radius: 10px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.tabs-bar::-webkit-scrollbar-track {
  background: transparent;
}

.tabs-bar:hover::-webkit-scrollbar-thumb {
  opacity: 1;
}

.tabs-bar {
  scrollbar-color: transparent transparent;
}

.tabs-bar:hover {
  scrollbar-color: #e4e4d8 transparent;
}
    .tabs-bar.is-dragging {
      cursor: grabbing;
      scroll-behavior: auto;
    }
    /*.tabs-bar.is-dragging .tab { pointer-events: none; }*/

    .tab {
      display: flex;
      align-items: center;
      gap: clamp(5px,0.42vw,10px);
      padding: clamp(9px,0.83vw,20px) clamp(12px,1.25vw,32px);
      cursor: pointer;
      border: none;
      background: none;
      color: var(--text-muted);
      font-family: 'DM Sans', sans-serif;
      font-size: clamp(11px,0.83vw,18px);
      font-weight: 500;
      white-space: nowrap;
      border-bottom: var(--accent-border-w) solid transparent;
      flex-shrink: 0;
    }
    .tab:hover { color: var(--text-primary); background: var(--accent-glow); }
    .tab.active {
      color: var(--accent);
      font-weight: 700;
      border-bottom-color: var(--accent);
      background: var(--accent-glow);
    }
    [data-theme="light"] .tab.active { color: var(--text-primary); }

    .tab-dot {
      width: clamp(6px,0.47vw,12px);
      height: clamp(6px,0.47vw,12px);
      border-radius: 50%;
      flex-shrink: 0;
    }

  
    .tab-count {
      background: var(--bg-surface-3);
      color: var(--text-secondary);
      border: 1px solid var(--border);
      border-radius: 999px;
      padding: clamp(0px,0.05vw,2px) clamp(5px,0.47vw,12px);
      font-size: clamp(9px,0.57vw,13px);
      font-weight: 600;
    }
    .tab.active .tab-count {
      background: var(--accent);
      color: var(--accent-text);
      border-color: var(--accent);
    }






    /* ============================================================
       MAIN GRID
     
    ============================================================ */
    .main-grid {
      display: grid;
      /* Auto-fit: panel appears beside content when width allows */
      grid-template-columns: 1fr;
      gap: clamp(12px,1.25vw,32px);
      padding: clamp(12px,1.67vw,48px) clamp(12px,3.33vw,96px);
      max-width: 100%;
    }

    /* ============================================================
       LEFT COLUMN — stacked sections
    ============================================================ */
    .left-col {
      display: flex;
      flex-direction: column;
      gap: clamp(12px,1.25vw,32px);
      min-width: 0; /* Prevent overflow in grid */
    }


    .right-col {
      order: -1; /* Mobile: panel comes first */
      min-width: 0;
    }

    /* ============================================================
       SECTION LABELS — fluid size
    ============================================================ */
    .section-eyebrow {
      font-size: clamp(9px,0.57vw,14px);
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--accent);
      font-weight: 600;
    }
    [data-theme="light"] .section-eyebrow { color: var(--text-muted); }

    .section-heading {
      font-size: clamp(14px,1.15vw,26px);
      font-weight: 700;
      color: var(--text-primary);
      margin-top: clamp(1px,0.1vw,4px);
      line-height: 1.25;
    }

    /* ============================================================
       SPOTLIGHT CARD
       ─ Mobile: stacked vertically
       ─ 640px+: side by side (image | content)
       ─ Image grows proportionally with clamp
    ============================================================ */
    .spotlight-card {
      background: var(--bg-surface);
      border: var(--border-w) solid var(--border);
      border-radius: var(--radius);
      overflow: hidden;
      box-shadow: var(--shadow-md);
      display: flex;
      flex-direction: column;
    }
    .spotlight-card:hover {
      box-shadow: var(--shadow-glow);
      border-color: var(--accent);
    }

    /* Image area — fluid min-height */
    .spotlight-img {
      background: var(--img-bg);
      display: flex;
      align-items: center;
      justify-content: center;
      border-bottom: var(--border-w) solid var(--border);
      min-height: clamp(100px,10.42vw,280px);
      position: relative;
      padding: clamp(16px,1.67vw,44px);
      flex-shrink: 0;
      min-height: 200px;
      background: #fff;
    }
    .spotlight-img img{ width: 100%; height: 100%; object-fit: cover;}

    /* Wooden slat illustration — fluid sizing */
    .slat-visual { display: flex; flex-direction: column; gap: clamp(3px,0.31vw,8px); }
    .slat {
      width: clamp(44px,4.17vw,110px);
      height: clamp(7px,0.63vw,16px);
      border-radius: clamp(2px,0.21vw,5px);
      background: linear-gradient(90deg,#7a5020,#c0902a,#7a5020);
    }

    .img-label {
      position: absolute;
      bottom: clamp(6px,0.52vw,14px);
      left: clamp(25px,0.63vw,18px);
      font-size: clamp(8px,0.52vw,15px);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--text-muted);
      font-weight: 600;
    }

    /* Content area inside spotlight card */
    .spotlight-content {
      padding: clamp(14px,1.46vw,40px) clamp(16px,1.67vw,48px);
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .spotlight-content h2 {
      font-size: clamp(14px,1.15vw,26px);
      font-weight: 700;
      color: var(--text-primary);
      margin-bottom: clamp(2px,0.21vw,5px);
      line-height: 1.3;
    }
    .spotlight-subtitle {
      font-size: clamp(11px,0.73vw,17px);
      color: #2563eb;
      font-weight: 500;
      margin-bottom: clamp(10px,1.04vw,26px);
    }
    [data-theme="black"] .spotlight-subtitle { color: var(--accent); }

    /* Meta key/value grid */
    .meta-table {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: clamp(3px,0.26vw,8px) clamp(10px,1.04vw,26px);
      margin-bottom: clamp(12px,1.25vw,30px);
    }
    .meta-key {
      font-size: clamp(10px,0.63vw,15px);
      color: var(--text-muted);
      font-weight: 500;
    }
    .meta-val {
      font-size: clamp(10px,0.63vw,15px);
      color: var(--text-secondary);
      font-family: 'DM Mono',monospace;
      font-weight: 600;
    }

    /* OnHand stock banner — green box */
.stock-box {
    background: var(--stock-banner-bg);
    border: 1px solid var(--stock-banner-border);
    border-radius: var(--radius-sm);
    padding: clamp(12px,1.25vw,32px) clamp(14px,1.46vw,38px);
    display: flex;
    align-items: flex-end;
    gap: clamp(6px,0.63vw,16px);
    width: 100%;
    max-width: 290px;
}
    .stock-label-sm {
      display: block;
      font-size: clamp(8px,0.52vw,12px);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: rgba(255,255,255,0.55);
      margin-bottom: clamp(2px,0.21vw,6px);
    }
    [data-theme="black"] .stock-label-sm { color: rgba(0,230,118,0.5); }

    /* The big stock number — fluid 28px → 80px */
    .stock-number {
      font-size: clamp(28px,3.13vw,80px);
      font-weight: 700;
      font-family: 'DM Mono',monospace;
      letter-spacing:3px;
      line-height: 1;
      color: var(--stock-num-color);
      text-shadow: var(--stock-num-shadow);
    }
    .stock-uom {
      font-size: clamp(11px,0.83vw,20px);
      font-weight: 600;
      margin-bottom: clamp(3px,0.26vw,8px);
      color: rgba(255,255,255,0.6);
    }
    [data-theme="black"] .stock-uom { color: rgba(0,230,118,0.55); }

    /* ============================================================
       STAT ROW
       ─ Uses auto-fill so columns appear automatically
       ─ min 140px card → fills row, grows to max 1fr
       ─ Works from 1 card wide (tiny) to 4+ on huge screens
    ============================================================ */
.stat-card-link {
    text-decoration: none;
    color: inherit;
    display: inline-block;
}

    .stat-card-link:hover {
        cursor: pointer;
        transform: scale(1.03);
    }

    .stat-row {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(clamp(130px,12vw,280px), 1fr));
      gap: clamp(8px,0.83vw,22px);
    }

    .stat-card {
      background: var(--bg-surface);
      border: var(--border-w) solid var(--border);
      border-radius: var(--radius-sm);
      padding: clamp(12px,1.25vw,32px) clamp(12px,1.25vw,32px);
      box-shadow: var(--shadow-sm);
      position: relative;
      overflow: hidden;
    }
    .stat-card:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-glow);
      border-color: var(--accent);
    }
    /* Fluid left accent bar */
    .stat-card::before {
      content: '';
      position: absolute; left: 0; top: 0; bottom: 0;
      width: clamp(3px,0.21vw,6px);
      background: var(--stat-bar);
    }
    [data-theme="black"] .stat-card::before { box-shadow: 0 0 8px var(--accent); }

    .stat-card-label {
      font-size: clamp(8px,0.52vw,13px);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--text-muted);
      font-weight: 600;
      margin-bottom: clamp(4px,0.42vw,10px);
    }
    /* The stat value — fluid 18px → 52px */
    .stat-card-value {
      font-size: clamp(18px,2.06vw,52px);
      font-weight: 700;
      font-family: 'DM Mono',monospace;
      line-height: 1;
      margin-bottom: clamp(2px,0.21vw,6px);
    }
    .stat-card-sub {
      font-size: clamp(9px,0.57vw,14px);
      color: var(--text-muted);
    }

    /* ============================================================
       ITEM CARDS GRID SECTION
    ============================================================ */
    .items-grid-section {
      background: var(--bg-surface);
      border: var(--border-w) solid var(--border);
      border-radius: var(--radius);
      padding: clamp(14px,1.46vw,40px) clamp(12px,1.25vw,34px);
      box-shadow: var(--shadow-sm);
    }

    .items-grid-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: clamp(10px,1.04vw,28px);
      gap: clamp(8px,0.63vw,16px);
    }
    .items-grid-header h3 {
      font-size: clamp(12px,0.83vw,20px);
      font-weight: 700;
      color: var(--text-primary);
    }
    .view-all-btn {
      font-size: clamp(10px,0.63vw,15px);
      color: var(--accent);
      background: none;
      border: var(--border-w) solid var(--border);
      padding: clamp(3px,0.31vw,8px) clamp(8px,0.73vw,20px);
      border-radius: var(--radius-xs);
      cursor: pointer;
      font-family: 'DM Sans',sans-serif;
      white-space: nowrap;
    }
    .view-all-btn:hover { background: var(--accent-glow); border-color: var(--accent); }


.items-grid-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Search box div */
.items-grid-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Search box */
.search-box {
    display: flex;
    align-items: center;
    background: #f1f5f9;
    border-radius: 8px;
    padding: 2px 6px;
}

    /* Input */
    .search-box input {
        border: none;
        outline: none;
        background: transparent;
        padding: 6px;
        width: 200px;
    }

/* Icon button */
.search-btn {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 16px;
    padding: 4px;
}

    /* Hover effect */
    .search-btn:hover {
        transform: scale(1.1);
    }







    /* ── Item Cards Grid — auto-fill with fluid min card size ──
       Cards are minimum 160px wide, max 1fr.
       On 320px → 1-2 cards. On 1920px → 4-5. On 4K → 6+.
       On a 400" screen → fills correctly with many columns.
    ── */
    .items-cards-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(clamp(150px,11.46vw,300px), 1fr));
      gap: clamp(8px,0.83vw,22px);
    }

    /* Single item card */
    .item-card {
      background: var(--bg-surface-2);
      border: var(--border-w) solid var(--border);
      border-radius: var(--radius-sm);
      overflow: hidden;
      cursor: pointer;
      display: flex;
      flex-direction: column;
    }
    .item-card:hover {
      transform: translateY(-3px);
      box-shadow: var(--shadow-glow);
      border-color: var(--accent);
    }

    /* Card image strip — fluid height */
    .item-card-img {
      background: var(--img-bg-card);
      height: clamp(55px,5.21vw,140px);
      display: flex;
      align-items: center;
      justify-content: center;
      border-bottom: var(--border-w) solid var(--border);
      flex-shrink: 0;
    }
    .item-card-img{ min-height: 80px;}
     .item-card-img img{ width: 100%; height: 100%; object-fit: cover;}

    .item-card-body {
      padding: clamp(7px,0.63vw,16px) clamp(8px,0.73vw,18px);
      flex: 1;
    }
    .item-card-name {
      font-size: clamp(13px,0.63vw,16px);
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: clamp(1px,0.1vw,3px);
    }
    .item-card-group {
      font-size: clamp(9px,0.52vw,13px);
      color: var(--text-muted);
      margin-bottom: clamp(1px,0.1vw,3px);
    }
    .item-card-code {
      font-size: clamp(8.5px,0.47vw,12px);
      font-family: 'DM Mono',monospace;
      color: var(--text-muted);
    }

    /* Stock badge at bottom of card */
    .item-card-stock {
      margin: 0 clamp(8px,0.73vw,18px) clamp(8px,0.73vw,18px);
      background: var(--badge-bg);
      border: 1px solid var(--badge-border);
      border-radius: var(--radius-xs);
      padding: clamp(4px,0.42vw,10px) clamp(6px,0.63vw,16px);
      display: flex;
      align-items: baseline;
      gap: clamp(3px,0.31vw,8px);
    }
    .item-card-stock-label {
      font-size: clamp(7.5px,0.47vw,11px);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--badge-label);
    }
    .item-card-stock-value {
      font-size: clamp(13px,1.04vw,26px);
      font-weight: 700;
      font-family: 'DM Mono',monospace;
      color: var(--badge-text);
    }
    .item-card-stock-uom {
      font-size: clamp(8px,0.52vw,13px);
      font-weight: 600;
      color: var(--badge-label);
    }

    /* ============================================================
       RIGHT PANEL — Project Items List
       ─ Mobile: horizontal scroll cards (order: -1 = top)
       ─ 768px+: vertical sticky sidebar (order: 0)
    ============================================================ */
    .items-panel {
      background: var(--bg-surface);
      border: var(--border-w) solid var(--border);
      border-radius: var(--radius);
      overflow: hidden;
      box-shadow: var(--shadow-md);
    }

    .panel-header {
      padding: clamp(10px,1.04vw,26px) clamp(12px,1.25vw,32px);
      background: var(--panel-hd-bg);
      border-bottom: var(--accent-border-w) solid var(--panel-hd-border);
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .panel-header h3 {
      font-size: clamp(12px,0.83vw,20px);
      font-weight: 700;
      color: #fff;
    }
    .panel-header p {
      font-size: clamp(9px,0.52vw,13px);
      color: #666;
    }

    /* Mobile: horizontal scroll */
    .panel-list {
      display: flex;
      overflow-x: auto;
      overflow-y: hidden;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
    }
    .panel-list::-webkit-scrollbar { display: none; }

    /* Panel row — horizontal card on mobile, full row on desktop */
    .panel-row {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      padding: clamp(8px,0.83vw,20px) clamp(12px,1.04vw,26px);
      border-right: var(--border-w) solid var(--border);
      cursor: pointer;
      flex-shrink: 0;
      min-width: clamp(120px,10.42vw,260px);
      gap: clamp(4px,0.42vw,10px);
    }
    .panel-row:last-child { border-right: none; }
    .panel-row:hover { background: var(--accent-glow); }
    .panel-row.active {
      background: var(--accent-glow);
      border-bottom: var(--accent-border-w) solid var(--accent);
    }

    .panel-row-info { width: 100%; }
    .panel-row-code {
      font-size: clamp(13px,0.73vw,17px);
      font-weight: 700;
      font-family: 'DM Mono',monospace;
      color: var(--text-primary);
    }
    .panel-row-name {
        font-size: clamp(11.5px,0.52vw,13px);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-weight: 600;
        max-width: clamp(100px,14.38vw,240px) !important;
    }

    /* Stock badge in panel */
    .panel-stock {
      font-size: clamp(10px,0.73vw,17px);
      font-weight: 700;
      font-family: 'DM Mono',monospace;
      padding: clamp(2px,0.21vw,5px) clamp(6px,0.52vw,14px);
      border-radius: var(--radius-xs);
      white-space: nowrap;
    }
    .stock-hi  { background: var(--status-high-bg); color: var(--status-high); }
    .stock-mid { background: var(--status-mid-bg);  color: var(--status-mid);  }
    .stock-lo  { background: var(--status-low-bg);  color: var(--status-low);  }

    /* ============================================================
       BREAKPOINTS — Only structural layout changes (not sizing,
       sizing is handled by clamp() above)
    ============================================================ */

    /* ── 640px: Spotlight goes side-by-side ── */
    @media (min-width: 640px) {
      .spotlight-card { flex-direction: row; }
      .spotlight-img {
        min-width: clamp(140px,13.54vw,380px);
        border-bottom: none;
        border-right: var(--border-w) solid var(--border);
      }
    }

    /* ── 768px: Panel becomes vertical sticky sidebar ── */
    @media (min-width: 768px) {
      .right-col { order: 0; }

      .panel-list {
        display: block;
        overflow-x: hidden;
        overflow-y: auto;
        max-height: clamp(280px,40vh,900px);
        scrollbar-width: thin;
        scrollbar-color: var(--border) transparent;
      }

      .panel-row {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        min-width: auto;
        border-right: none;
        border-bottom: var(--border-w) solid var(--border);
      }
      .panel-row:last-child { border-bottom: none; }
      .panel-row.active {
        border-bottom: var(--border-w) solid var(--border);
        border-left: var(--accent-border-w) solid var(--accent);
      }
      .panel-row-name { max-width: none; }
    }

    /* ── 1024px: Two-column layout + sticky panel ── */
    @media (min-width: 1024px) {
      .main-grid {
        /* Content takes remaining space, panel is fluid width */
        grid-template-columns: 1fr clamp(260px,20.83vw,520px);
        max-width: 100%;
      }
      .right-col { order: 0; }

      .items-panel {
        position: sticky;
        top: clamp(50px,4.17vw,100px);
      }
      .panel-list {
        max-height: calc(100vh - clamp(140px,11.46vw,290px));
      }
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

/*.spinner {
    width: 48px;
    height: 48px;
    border: 5px solid #e5e7eb;
    border-top-color: #facc15;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}*/
#pageLoader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: #ffffffd9; /* halka blur effect */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

/* Spinner */
.loader {
    width: 50px;
    height: 50px;
    border: 5px solid #e5e7eb;
    border-top-color: #ffcc00;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}


.empty-state {
    text-align: center;
    padding: 40px;
    color: #888;
}

.item-card {
    cursor: pointer;
    transition: transform 0.2s ease;
}

    .item-card:hover {
        transform: translateY(-5px);
    }
    .stat-card-active {
    border: 2px solid #60a5fa;
    background-color: rgba(96, 165, 250, 0.1);
    box-shadow: 0 0 8px rgba(96, 165, 250, 0.4);
}