/* ============================================================
       DESIGN TOKENS
    ============================================================ */
    :root {
      /* ── Brand (extracted from flip-dash-dev.masangrouptech.com) ── */
      --color-primary:          #3D78B8;   /* oklch(50.49% 0.0921 246.153) steel blue */
      --color-primary-dark:     #2A5A8F;   /* darker steel blue — Submit, heavy CTA */
      --color-primary-light:    #EBEBEB;   /* oklch(92.19% 0 0) — active/accent bg */
      --color-primary-border:   #A8C4DC;   /* oklch(81.3% 0.0332 242.447) — secondary */

      /* ── Semantic ── */
      --color-success:          #16A34A;
      --color-success-bg:       #DCFCE7;
      --color-success-light:    #F0FDF4;
      --color-emerald:          #10B981;
      --color-sky:              #0EA5E9;
      --color-sky-bg:           #E0F2FE;
      --color-sky-light:        #F0F9FF;
      --color-sky-border:       #BAE6FD;
      --color-sky-text:         #0369A1;   /* dark sky — info text in sky sections */
      --color-warning:          #D97706;
      --color-warning-bg:       #FFFBEB;   /* Amber-50 */
      --color-warning-border:   #FCD34D;   /* Amber-300 */
      --color-error:            #E05340;   /* oklch(63.78% 0.2373 25.4359) — --destructive */
      --color-error-bg:         #FEF2F2;
      --color-error-border:     #FECACA;
      --color-info:             #3D78B8;   /* same as primary */
      --color-info-bg:          #EEF3F9;   /* light info background */
      --color-purple:           #7C3AED;   /* extended — purple accent */

      /* ── Neutral ── */
      --color-text-primary:     #444444;   /* oklch(26.86% 0 0) — --foreground */
      --color-text-secondary:   #7A8FA0;   /* oklch(55.1% 0.0234 264.364) — --muted-foreground */
      --color-text-tertiary:    #9CA3AF;
      --color-text-disabled:    #D1D5DB;
      --color-border:           #E8EAED;   /* oklch(92.76% 0.0058 264.531) */
      --color-border-strong:    #D1D5DB;
      --color-bg-surface:       #FFFFFF;
      --color-bg-subtle:        #FAFAFA;   /* oklch(98.5% 0 0) */
      --color-bg-muted:         #F7F7F7;   /* oklch(97% 0 0) — sidebar/body bg */
      --color-bg-accent:        #F4F5F7;   /* oklch(96.83% 0.0069 247.896) — muted */
      --color-surface:          #FFFFFF;
      --color-surface-alt:      #FAFAFA;
      --color-shadow:           #CAD5E2;   /* --shadow-color */
      --color-link:             #3D78B8;
      --color-link-hover:       #2A5A8F;

      /* ── Typography ── */
      --font-family: 'Open Sans Variable', 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      --text-xs:    0.75rem;    /* 12px */
      --text-sm:    0.875rem;   /* 14px */
      --text-base:  1rem;       /* 16px */
      --text-lg:    1.125rem;   /* 18px */
      --text-xl:    1.25rem;    /* 20px */
      --text-2xl:   1.5rem;     /* 24px */
      --text-3xl:   1.875rem;   /* 30px */
      --text-4xl:   2.25rem;    /* 36px */
      --leading-none:    1;
      --leading-tight:   1.25;
      --leading-normal:  1.5;
      --leading-relaxed: 1.625;
      --font-regular:  400;
      --font-medium:   500;
      --font-semibold: 600;
      --font-bold:     700;

      /* ── Spacing (4px base grid) ── */
      --space-1:  0.25rem;   /* 4px */
      --space-2:  0.5rem;    /* 8px */
      --space-3:  0.75rem;   /* 12px */
      --space-4:  1rem;      /* 16px */
      --space-5:  1.25rem;   /* 20px */
      --space-6:  1.5rem;    /* 24px */
      --space-8:  2rem;      /* 32px */
      --space-10: 2.5rem;    /* 40px */
      --space-12: 3rem;      /* 48px */

      /* ── Shorthand aliases ── */
      --text-primary:   var(--color-text-primary);
      --text-secondary: var(--color-text-secondary);
      --border:         var(--color-border);

      /* ── Layout ── */
      --sidebar-width:   220px;
      --header-height:   64px;
      --sidebar-bg:      #F7F7F7;
      --sidebar-active:  #EBEBEB;

      /* ── Radius ── */
      --radius-sm:   4px;
      --radius-base: 10px;   /* calc(0.625rem * 1) = 10px */
      --radius-md:   10px;
      --radius-lg:   12px;
      --radius-xl:   16px;
      --radius-full: 9999px;

      /* ── Shadows (shadow-color: #CAD5E2) ── */
      --shadow-sm:    0px 1px 2px 0px rgba(202,213,226,0.10);
      --shadow-base:  0px 4px 20px 1px rgba(202,213,226,0.10), 0px 1px 2px 0px rgba(202,213,226,0.10);
      --shadow-md:    0px 4px 20px 1px rgba(202,213,226,0.15), 0px 2px 4px 0px rgba(202,213,226,0.12);
      --shadow-lg:    0 10px 15px rgba(202,213,226,0.20), 0 4px 6px rgba(202,213,226,0.15);
      --shadow-focus: 0 0 0 3px rgba(61,120,184,0.30);
    }

    /* ── Dark mode ──────────────────────────────────────────────── */
    [data-theme="dark"] {
      --color-primary:          #5B9BD5;
      --color-primary-dark:     #4A8AC4;
      --color-primary-light:    #1E3A5F;
      --color-primary-border:   #2E5A8E;
      --color-text-primary:     #E2E8F0;
      --color-text-secondary:   #94A3B8;
      --color-text-tertiary:    #64748B;
      --color-text-disabled:    #475569;
      --color-border:           #2D3748;
      --color-border-strong:    #374151;
      --color-bg-surface:       #1E2130;
      --color-bg-subtle:        #252836;
      --color-bg-muted:         #111827;
      --color-surface:          #1E2130;
      --color-surface-alt:      #252836;
      --sidebar-bg:             #1A1D2E;
      --sidebar-active:         #2D3748;
    }

    /* ============================================================
       RESET & BASE
    ============================================================ */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html, body { height: 100%; }
    body {
      font-family: var(--font-family);
      font-size: var(--text-sm);
      color: var(--color-text-primary);
      background: var(--color-bg-muted);
      line-height: 1.5;
    }
    a { color: var(--color-primary-dark); text-decoration: none; }
    button { font-family: var(--font-family); cursor: pointer; }
    input, select, textarea { font-family: var(--font-family); }

    /* ============================================================
       VIEWS — show/hide
    ============================================================ */
    .view { display: none; }
    .view.active { display: flex; }

    /* ============================================================
       TOAST
    ============================================================ */
    #toast-container {
      position: fixed; bottom: 24px; right: 24px;
      display: flex; flex-direction: column; gap: 8px;
      z-index: 9999; pointer-events: none;
    }
    .toast {
      display: flex; align-items: center; gap: 10px;
      padding: 12px 16px; border-radius: var(--radius-md);
      background: #1F2937; color: #fff;
      font-size: var(--text-sm); font-weight: var(--font-medium);
      box-shadow: var(--shadow-lg);
      pointer-events: auto;
      animation: slideIn .25s ease;
      min-width: 280px; max-width: 380px;
    }
    .toast.success { background: #14532D; }
    .toast.error   { background: #7F1D1D; }
    .toast.warning { background: #78350F; }
    @keyframes slideIn {
      from { transform: translateX(40px); opacity: 0; }
      to   { transform: translateX(0);    opacity: 1; }
    }
    @keyframes slideOut {
      from { transform: translateX(0);    opacity: 1; }
      to   { transform: translateX(40px); opacity: 0; }
    }

    /* ============================================================
       MODAL OVERLAY
    ============================================================ */
    .modal-overlay {
      display: none;
      position: fixed; inset: 0; z-index: 1000;
      background: rgba(0,0,0,0.45);
      align-items: center; justify-content: center;
    }
    .modal-overlay.open { display: flex; }
    .modal {
      background: #fff; border-radius: var(--radius-lg);
      box-shadow: var(--shadow-lg);
      width: 100%; max-width: 480px;
      padding: var(--space-6);
      animation: modalIn .2s ease;
    }
    .modal-lg { max-width: 640px; }
    @keyframes modalIn {
      from { transform: scale(.95); opacity: 0; }
      to   { transform: scale(1);   opacity: 1; }
    }
    .modal-header {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: var(--space-4);
    }
    .modal-title { font-size: var(--text-base); font-weight: var(--font-semibold); }
    .modal-close {
      width: 28px; height: 28px; border-radius: var(--radius-base);
      border: none; background: none; color: var(--color-text-tertiary);
      font-size: 18px; display: flex; align-items: center; justify-content: center;
      cursor: pointer;
    }
    .modal-close:hover { background: var(--color-bg-muted); color: var(--color-text-primary); }
    .modal-footer {
      display: flex; justify-content: flex-end; gap: var(--space-2);
      margin-top: var(--space-6); padding-top: var(--space-4);
      border-top: 1px solid var(--color-border);
    }

    /* ============================================================
       BUTTONS
    ============================================================ */
    .btn {
      display: inline-flex; align-items: center; gap: var(--space-2);
      font-size: var(--text-sm); font-weight: var(--font-medium);
      padding: 7px 14px; border-radius: var(--radius-base);
      border: 1px solid transparent; cursor: pointer;
      transition: background .15s, border-color .15s, box-shadow .15s;
      white-space: nowrap; line-height: 1.4;
    }
    .btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
    .btn-primary       { background: var(--color-primary); color:#fff; border-color: var(--color-primary); }
    .btn-primary:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); }
    .btn-primary-dark       { background: var(--color-primary-dark); color:#fff; border-color: var(--color-primary-dark); }
    .btn-primary-dark:hover { background: #1E4A7A; border-color: #1E4A7A; }
    .btn-secondary       { background:#fff; color: var(--color-text-primary); border-color: var(--color-border-strong); }
    .btn-secondary:hover { background: var(--color-bg-subtle); }
    .btn-ghost       { background:transparent; color: var(--color-primary-dark); border-color:transparent; }
    .btn-ghost:hover { background: var(--color-primary-light); }
    .btn-danger       { background: var(--color-error); color:#fff; border-color: var(--color-error); }
    .btn-danger:hover { background: #C4402F; }
    .btn-success       { background: var(--color-success); color:#fff; border-color: var(--color-success); }
    .btn-success:hover { background: #15803D; }
    .btn-sm { font-size: var(--text-xs); padding: 5px 10px; }
    .btn-lg { font-size: var(--text-base); padding: 10px 20px; }
    .btn:disabled { opacity: .5; cursor: not-allowed; }

    /* ============================================================
       BADGES
    ============================================================ */
    .badge {
      display: inline-flex; align-items: center; gap: 4px;
      font-size: 11px; font-weight: var(--font-semibold);
      padding: 2px 8px; border-radius: var(--radius-full);
      line-height: 1.5; white-space: nowrap;
    }
    .badge-blue   { background: #DBEAFE; color: #1D4ED8; }
    .badge-green  { background: #DCFCE7; color: #15803D; }
    .badge-amber  { background: #FEF3C7; color: #B45309; }
    .badge-red    { background: #FEE2E2; color: #B91C1C; }
    .badge-gray   { background: #F3F4F6; color: #4B5563; }
    .badge-purple { background: #EDE9FE; color: #6D28D9; }
    .badge-orange { background: #FFF7ED; color: #C2410C; }
    .badge-sky    { background: #E0F2FE; color: #0369A1; }
    .badge-teal   { background: #CCFBF1; color: #0F766E; }
    .badge-indigo { background: #E0E7FF; color: #4338CA; }
    /* Solid (inverted) badge variants */
    .badge-solid-red    { background: var(--color-error);   color: #fff; }
    .badge-solid-orange { background: #F97316;              color: #fff; }
    .badge-solid-blue   { background: var(--color-primary); color: #fff; }

    /* ============================================================
       FORM ELEMENTS
    ============================================================ */
    .form-group { margin-bottom: var(--space-4); }
    .form-label {
      display: block; font-size: var(--text-xs); font-weight: var(--font-medium);
      color: var(--color-text-secondary); margin-bottom: 6px;
    }
    .form-label .req { color: var(--color-error); margin-left: 2px; }
    .form-input {
      width: 100%; padding: 7px 10px;
      font-size: var(--text-sm); color: var(--color-text-primary);
      background: #fff; border: 1px solid var(--color-border-strong);
      border-radius: var(--radius-base); line-height: 1.5;
      transition: border-color .15s, box-shadow .15s;
    }
    .form-input::placeholder { color: var(--color-text-tertiary); }
    .form-input:focus { outline: none; border-color: var(--color-primary); box-shadow: var(--shadow-focus); }
    .form-input.is-error { border-color: var(--color-error); }
    .form-input.is-error:focus { box-shadow: 0 0 0 3px rgba(224,83,64,.2); }
    .form-input.is-warning { border-color: var(--color-warning); }
    select.form-input {
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236B7280'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z'/%3E%3C/svg%3E");
      background-repeat: no-repeat; background-position: right 10px center; background-size: 16px;
      padding-right: 32px;
    }
    .form-hint  { font-size: var(--text-xs); color: var(--color-text-tertiary); margin-top: 3px; }
    .form-error { font-size: var(--text-xs); color: var(--color-error); margin-top: 3px; display:flex; align-items:center; gap:4px; }
    .form-warning { font-size: var(--text-xs); color: var(--color-warning); margin-top: 3px; display:flex; align-items:center; gap:4px; }
    .form-label-row { display: flex; justify-content: space-between; }

    /* ============================================================
       LAYOUT SHELL
    ============================================================ */
    #shell {
      display: none;
      height: 100vh; width: 100%;
      flex-direction: row;
    }
    #shell.active { display: flex; }

    /* --- SIDEBAR --- */
    .sidebar {
      width: var(--sidebar-width); flex-shrink: 0;
      background: var(--sidebar-bg, #F7F7F7);
      border-right: 1px solid var(--color-border);
      display: flex; flex-direction: column; height: 100vh;
      position: sticky; top: 0; overflow-y: auto;
    }
    .sidebar-brand {
      flex-shrink: 0;
      display: flex; flex-direction: column;
      border-bottom: 1px solid var(--color-border);
      overflow: hidden;
    }
    /* Expanded brand (full logo + entity row) */
    .sidebar-brand-expanded { display: flex; flex-direction: column; }
    .sidebar-brand-collapsed { display: none; align-items: center; justify-content: center; padding: 16px 0; }

    /* Row 1: Masan logo */
    .sidebar-brand-logo-row {
      display: flex; align-items: center; justify-content: flex-start;
      padding: 14px 16px 10px;
    }
    .sidebar-masan-logo {
      height: 36px; width: auto; object-fit: contain;
    }
    /* Collapsed icon-only */
    .sidebar-logo-icon-only {
      width: 32px; height: 32px; object-fit: contain;
    }

    /* Row 2: Entity selector */
    .entity-selector {
      display: flex; align-items: center; gap: 8px;
      padding: 8px 16px 12px; cursor: pointer;
      transition: background .1s;
    }
    .entity-selector:hover { background: rgba(0,0,0,.04); }
    .entity-text { flex: 1; min-width: 0; }
    .entity-name {
      font-size: 13px; font-weight: 700; color: var(--color-primary);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      line-height: 1.3;
    }
    .entity-sub {
      font-size: 11px; color: var(--color-text-secondary);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      line-height: 1.3;
    }
    .entity-chevron { color: var(--color-text-tertiary); flex-shrink: 0; }

    .sidebar-nav { flex: 1; padding: 6px 0; overflow-y: auto; }
    .sidebar-section {
      font-size: 10px; font-weight: var(--font-semibold);
      color: var(--color-text-tertiary); letter-spacing: .06em;
      text-transform: uppercase; padding: 10px 14px 4px;
    }

    /* ── Base nav item ── */
    .nav-item {
      display: flex; align-items: center; gap: 8px;
      padding: 6px 10px; margin: 1px 6px;
      font-size: var(--text-sm); font-weight: var(--font-medium);
      color: var(--color-text-secondary); cursor: pointer;
      border-radius: var(--radius-base);
      transition: background .1s, color .1s;
    }
    .nav-item:hover { background: rgba(0,0,0,.05); color: var(--color-text-primary); }
    .nav-item.active {
      background: var(--sidebar-active, #EBEBEB);
      color: var(--color-text-primary);
      font-weight: var(--font-semibold);
    }
    .nav-item .nav-icon {
      width: 18px; height: 18px; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
    }
    .nav-item .nav-icon svg { width: 15px; height: 15px; }
    .nav-item .nav-badge {
      margin-left: auto; background: var(--color-error);
      color: #fff; font-size: 10px; font-weight: var(--font-bold);
      padding: 1px 6px; border-radius: var(--radius-full); min-width: 18px; text-align: center;
    }
    .nav-item.child {
      padding-left: 36px; font-size: var(--text-xs); margin: 1px 6px;
    }

    /* ── Level 2 sub-group ── */
    .nav-subgroup-header {
      display: flex; align-items: center; gap: 6px;
      padding: 5px 10px 5px 34px; margin: 1px 6px;
      font-size: 11px; font-weight: var(--font-medium);
      color: var(--color-text-secondary); cursor: pointer;
      border-radius: var(--radius-base);
      transition: background .1s, color .1s; user-select: none;
    }
    .nav-subgroup-header:hover { background: rgba(0,0,0,.05); color: var(--color-text-primary); }
    .nav-subgroup-chevron {
      margin-left: auto; font-size: 10px; color: var(--color-text-tertiary);
      transition: transform .2s; display: inline-block; line-height: 1;
    }
    .nav-subgroup.open .nav-subgroup-chevron { transform: rotate(90deg); }
    .nav-subgroup-body { overflow: hidden; transition: max-height 0.2s ease; max-height: 0; }
    .nav-subgroup-header.subgroup-active {
      color: var(--color-primary); font-weight: var(--font-semibold);
    }

    /* ── Level 3 grandchild items ── */
    .nav-item.grandchild {
      padding-left: 48px; font-size: 11px; margin: 1px 6px;
    }

    /* ── Collapsible nav groups ── */
    .nav-item-l1 {
      display: flex; align-items: center; gap: 8px;
      padding: 6px 10px; margin: 1px 6px;
      font-size: var(--text-sm); font-weight: var(--font-medium);
      color: var(--color-text-secondary); cursor: pointer;
      border-radius: var(--radius-base);
      transition: background .1s, color .1s; user-select: none;
    }
    .nav-item-l1:hover { background: rgba(0,0,0,.05); color: var(--color-text-primary); }
    .nav-item-l1.active {
      background: var(--sidebar-active, #EBEBEB);
      color: var(--color-text-primary); font-weight: var(--font-semibold);
    }
    .nav-item-l1 .nav-icon {
      width: 18px; height: 18px; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
    }
    .nav-item-l1 .nav-icon svg { width: 15px; height: 15px; }

    .nav-group-header {
      display: flex; align-items: center; gap: 8px;
      padding: 6px 10px; margin: 1px 6px;
      font-size: var(--text-sm); font-weight: var(--font-medium);
      color: var(--color-text-secondary); cursor: pointer;
      border-radius: var(--radius-base);
      transition: background .1s, color .1s; user-select: none;
    }
    .nav-group-header:hover { background: rgba(0,0,0,.05); color: var(--color-text-primary); }
    .nav-group-header .nav-icon {
      width: 18px; height: 18px; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
    }
    .nav-group-header .nav-icon svg { width: 15px; height: 15px; }
    .nav-group-chevron {
      margin-left: auto; font-size: 12px; color: var(--color-text-tertiary);
      transition: transform .2s; display: inline-block; line-height: 1;
    }
    .nav-group.open .nav-group-chevron { transform: rotate(90deg); }
    .nav-group-body { overflow: hidden; transition: max-height 0.25s ease; max-height: 0; }
    .nav-group-header.group-active {
      color: var(--color-primary); font-weight: var(--font-semibold);
    }
    .sidebar-footer {
      border-top: 1px solid var(--color-border); padding: 10px 12px;
      display: flex; align-items: center; gap: 8px;
    }
    .avatar {
      width: 32px; height: 32px; border-radius: 50%;
      background: var(--color-primary); color: #fff;
      display: flex; align-items: center; justify-content: center;
      font-size: 12px; font-weight: var(--font-bold); flex-shrink: 0;
    }
    .avatar-info { flex: 1; min-width: 0; }
    .avatar-name  { font-size: var(--text-xs); font-weight: var(--font-semibold); color: var(--color-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .avatar-email { font-size: 10px; color: var(--color-text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    /* Sidebar footer acts as a dropdown trigger */
    .sidebar-footer.topbar-dropdown-wrap { cursor: pointer; }
    .sidebar-footer.topbar-dropdown-wrap:hover { background: rgba(0,0,0,.04); }
    /* Sidebar user dropdown opens upward */
    .sidebar-user-dropdown {
      bottom: calc(100% + 6px) !important; top: auto !important;
      left: 0 !important; right: auto !important;
    }

    /* ── Collapsed sidebar ── */
    .sidebar { transition: width 0.25s ease; }
    .sidebar.collapsed { width: 52px; }

    .sidebar.collapsed .sidebar-brand-expanded { display: none; }
    .sidebar.collapsed .sidebar-brand-collapsed { display: flex; }

    /* collapsed: hide full nav, show icon-only nav */
    .sidebar.collapsed .sidebar-nav { display: none; }
    .sidebar-nav-icons { display: none; flex-direction: column; padding: 6px 0; gap: 2px; }
    .sidebar.collapsed .sidebar-nav-icons { display: flex; }
    .nav-icon-btn {
      width: 36px; height: 36px; margin: 0 auto;
      display: flex; align-items: center; justify-content: center;
      border-radius: var(--radius-md); cursor: pointer;
      color: var(--color-text-secondary); position: relative;
      transition: background .1s;
    }
    .nav-icon-btn:hover { background: rgba(0,0,0,.07); }
    .nav-icon-btn.active { background: var(--sidebar-active, #EBEBEB); color: var(--color-text-primary); }
    .nav-icon-btn[data-tooltip]:hover::after {
      content: attr(data-tooltip);
      position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%);
      background: #1e293b; color: #fff; font-size: 12px; font-weight: 500;
      white-space: nowrap; padding: 5px 10px; border-radius: var(--radius-base);
      pointer-events: none; z-index: 9999;
    }

    /* collapsed: footer */
    .sidebar.collapsed .sidebar-footer { justify-content: center; padding: 8px 0; gap: 0; }
    .sidebar.collapsed .avatar-info { display: none; }
    .sidebar.collapsed .entity-chevron { display: none; }

    /* --- MAIN --- */
    .main-area {
      flex: 1; display: flex; flex-direction: column;
      height: 100vh; overflow: hidden; min-width: 0;
    }
    .top-bar {
      height: var(--header-height); flex-shrink: 0;
      background: #fff; border-bottom: 1px solid var(--color-border);
      display: flex; align-items: center; padding: 0 16px; gap: 8px;
    }
    /* Panel collapse button (replaces hamburger) */
    .panel-toggle-btn {
      width: 30px; height: 30px; border-radius: var(--radius-base);
      border: 1px solid var(--color-border); background: var(--color-bg-surface); flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      color: var(--color-text-secondary); cursor: pointer;
      transition: background .1s, border-color .1s;
    }
    .panel-toggle-btn:hover { background: var(--color-bg-subtle); border-color: var(--color-border-strong); color: var(--color-text-primary); }
    /* Topbar vertical divider */
    .topbar-divider {
      width: 1px; height: 20px; background: var(--color-border); flex-shrink: 0; margin: 0 4px;
    }
    .top-bar-spacer { flex: 1; }
    .top-bar-title { font-size: var(--text-base); font-weight: var(--font-semibold); flex: 1; }
    .top-bar-breadcrumb {
      display: flex; align-items: center; gap: 6px;
      font-size: var(--text-sm); color: var(--color-text-secondary); flex: 1;
    }
    .top-bar-breadcrumb .crumb { cursor: pointer; }
    .top-bar-breadcrumb .crumb:hover { color: var(--color-primary); text-decoration: underline; }
    .top-bar-breadcrumb .sep { color: var(--color-text-tertiary); font-size: var(--text-xs); }
    .top-bar-breadcrumb .current { color: var(--color-text-primary); font-weight: var(--font-medium); }
    .top-bar-actions { display: flex; align-items: center; gap: 4px; }
    .icon-btn {
      width: 32px; height: 32px; border-radius: var(--radius-base);
      border: none; background: none;
      display: flex; align-items: center; justify-content: center;
      color: var(--color-text-secondary); cursor: pointer;
      transition: background .1s;
    }
    .icon-btn:hover { background: var(--color-bg-muted); color: var(--color-text-primary); }
    .notif-dot { position: relative; }
    .notif-dot::after {
      content:''; position:absolute; top:5px; right:5px;
      width:7px; height:7px; border-radius:50%; background: var(--color-error);
      border: 1.5px solid #fff;
    }

    /* ── Topbar: language indicator ── */
    .topbar-lang-text {
      font-size: 11px; font-weight: 600; color: var(--color-text-secondary);
      padding: 0 2px; pointer-events: none;
    }

    /* ── Topbar: user avatar badge ── */
    .topbar-user-btn {
      width: 30px; height: 30px; border-radius: 50%;
      background: var(--color-primary); color: #fff;
      font-size: 11px; font-weight: 700;
      border: none; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: opacity .15s; flex-shrink: 0;
    }
    .topbar-user-btn:hover { opacity: .85; }

    /* ── Topbar dropdown (shared for lang + user) ── */
    .topbar-dropdown-wrap {
      position: relative;
    }
    .topbar-dropdown {
      display: none; position: absolute; right: 0; top: calc(100% + 6px);
      background: #fff; border: 1px solid var(--color-border);
      border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
      min-width: 160px; z-index: 500; overflow: hidden;
      animation: slideDown .15s ease;
    }
    .topbar-dropdown.open { display: block; }
    .topbar-dropdown-item {
      padding: 8px 14px; font-size: var(--text-sm); cursor: pointer;
      color: var(--color-text-primary); transition: background .1s;
      display: flex; align-items: center; gap: 8px;
    }
    .topbar-dropdown-item:hover { background: var(--color-bg-subtle); }
    .topbar-dropdown-item.danger { color: var(--color-error); }
    .topbar-dropdown-item.danger:hover { background: #FEF2F2; }
    .topbar-dropdown-sep {
      height: 1px; background: var(--color-border); margin: 4px 0;
    }
    .topbar-user-detail {
      padding: 10px 14px 8px; border-bottom: 1px solid var(--color-border);
    }
    .topbar-user-detail-name { font-size: var(--text-sm); font-weight: 600; color: var(--color-text-primary); }
    .topbar-user-detail-role { font-size: 11px; color: var(--color-text-secondary); margin-top: 1px; }
    .page-content {
      flex: 1; overflow-y: auto; overflow-x: hidden; padding: 20px;
      background: var(--color-bg-muted);
    }
    .page-footer {
      height: 52px; flex-shrink: 0;
      background: #fff; border-top: 1px solid var(--color-border);
      display: flex; align-items: center; justify-content: space-between;
      padding: 0 20px;
    }
    .page-footer.hidden { display: none; }

    /* ============================================================
       PAGE VIEWS (inside shell)
    ============================================================ */
    .page { display: none; flex-direction: column; height: 100%; }
    .page.active { display: flex; }

    /* ============================================================
       KPI CARDS
    ============================================================ */
    .kpi-grid { display: grid; gap: 12px; }
    .kpi-grid-4 { grid-template-columns: repeat(4, 1fr); }
    .kpi-grid-5 { grid-template-columns: repeat(5, 1fr); }
    .kpi-card {
      background: #fff; border: 1px solid var(--color-border);
      border-radius: var(--radius-md); padding: 16px;
      box-shadow: var(--shadow-sm);
    }
    .kpi-label  { font-size: var(--text-xs); color: var(--color-text-secondary); margin-bottom: 6px; }
    .kpi-value  { font-size: var(--text-2xl); font-weight: var(--font-bold); color: var(--color-text-primary); }
    .kpi-value.green  { color: var(--color-success); }
    .kpi-value.amber  { color: var(--color-warning); }
    .kpi-value.red    { color: var(--color-error); }
    .kpi-sub    { font-size: var(--text-xs); color: var(--color-text-tertiary); margin-top: 4px; }

    /* KPI icon box — replace inline width:38px height:38px div */
    .kpi-icon {
      width: 38px; height: 38px; border-radius: 8px; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
    }
    .kpi-icon.blue   { background: #EFF6FF; color: #1D4ED8; }
    .kpi-icon.green  { background: #DCFCE7; color: var(--color-success); }
    .kpi-icon.amber  { background: #FEF3C7; color: var(--color-warning); }
    .kpi-icon.red    { background: #FEF2F2; color: var(--color-error); }
    .kpi-icon.orange { background: #FFF7ED; color: #C2410C; }
    .kpi-icon.gray   { background: #F1F5F9; color: #475569; }
    .kpi-icon.purple { background: #EDE9FE; color: #6D28D9; }
    .kpi-icon.sky    { background: #E0F2FE; color: #0369A1; }

    /* ============================================================
       TABLE
    ============================================================ */
    .table-wrap {
      background: #fff; border: 1px solid var(--color-border);
      border-radius: var(--radius-md); overflow: hidden;
    }
    .table-toolbar {
      display: flex; align-items: center; gap: 10px;
      padding: 12px 16px; border-bottom: 1px solid var(--color-border);
      flex-wrap: wrap;
    }
    .table-toolbar-title { font-size: var(--text-sm); font-weight: var(--font-semibold); flex:1; }
    .search-wrap { position: relative; }
    .search-wrap .search-icon {
      position: absolute; left: 9px; top: 50%; transform: translateY(-50%);
      color: var(--color-text-tertiary); font-size: 13px; pointer-events: none;
    }
    .search-wrap .form-input { padding-left: 30px; width: 220px; }
    table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
    thead tr { background: var(--color-bg-subtle); }
    th {
      padding: 10px 14px; text-align: left; font-size: var(--text-xs);
      font-weight: var(--font-semibold); color: var(--color-text-secondary);
      border-bottom: 1px solid var(--color-border); white-space: nowrap;
      cursor: pointer; user-select: none;
    }
    th:hover { color: var(--color-text-primary); }
    td {
      padding: 11px 14px; border-bottom: 1px solid var(--color-border);
      color: var(--color-text-primary); vertical-align: middle;
    }
    tr:last-child td { border-bottom: none; }
    tbody tr:hover { background: var(--color-bg-subtle); }
    tbody tr.selected { background: var(--color-primary-light); }
    tbody tr.clickable { cursor: pointer; }
    .table-empty {
      padding: 48px 0; text-align: center;
      color: var(--color-text-tertiary); font-size: var(--text-sm);
    }
    .table-pagination {
      display: flex; align-items: center; justify-content: space-between;
      padding: 10px 16px; border-top: 1px solid var(--color-border);
      font-size: var(--text-xs); color: var(--color-text-secondary);
    }
    .pagination-btns { display: flex; gap: 4px; }
    .pg-btn {
      width: 28px; height: 28px; border-radius: var(--radius-base);
      border: 1px solid var(--color-border); background: #fff;
      font-size: var(--text-xs); cursor: pointer;
      display: flex; align-items: center; justify-content: center;
    }
    .pg-btn:hover { background: var(--color-bg-subtle); }
    .pg-btn.active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }

    /* ============================================================
       ALERT / BANNER
    ============================================================ */
    .alert {
      display: flex; align-items: flex-start; gap: 10px;
      padding: 10px 14px; border-radius: var(--radius-base);
      border-left: 4px solid transparent; font-size: var(--text-sm);
      margin-bottom: 12px;
    }
    .alert-error   { background: var(--color-error-bg);   border-color: var(--color-error);   color: #991B1B; }
    .alert-warning { background: var(--color-warning-bg); border-color: var(--color-warning); color: #92400E; }
    .alert-success { background: var(--color-success-bg); border-color: var(--color-success); color: #14532D; }
    .alert-info    { background: var(--color-info-bg); border-color: var(--color-primary); color: #2A5A8F; }
    .alert-icon { flex-shrink: 0; font-size: 15px; }
    .alert-body { flex: 1; }
    .alert-title { font-weight: var(--font-semibold); margin-bottom: 2px; }

    /* ============================================================
       STEPPER
    ============================================================ */
    .stepper {
      display: flex; align-items: flex-start;
      padding: 16px 0; margin-bottom: 20px;
    }
    .step-item { display: flex; flex-direction: column; align-items: center; flex: 1; position: relative; }
    .step-item:not(:last-child)::after {
      content:''; position:absolute; top:15px; left:calc(50% + 18px);
      width:calc(100% - 36px); height:2px; background: var(--color-border);
    }
    .step-item.done::after, .step-item.active::after { background: var(--color-primary); }
    .step-circle {
      width: 30px; height: 30px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 12px; font-weight: var(--font-bold); z-index: 1;
      border: 2px solid var(--color-border); background: #fff;
      color: var(--color-text-tertiary);
    }
    .step-item.active .step-circle {
      background: var(--color-primary); border-color: var(--color-primary); color: #fff;
    }
    .step-item.done .step-circle {
      background: var(--color-success); border-color: var(--color-success); color: #fff;
    }
    .step-label {
      font-size: 10px; color: var(--color-text-tertiary);
      margin-top: 6px; text-align: center; line-height: 1.3;
      max-width: 80px;
    }
    .step-item.active .step-label { color: var(--color-primary); font-weight: var(--font-semibold); }
    .step-item.done  .step-label  { color: var(--color-success); }

    /* ============================================================
       SECTION CARD
    ============================================================ */
    .section-card {
      background: #fff; border: 1px solid var(--color-border);
      border-radius: var(--radius-md); margin-bottom: 16px;
      box-shadow: var(--shadow-sm);
    }
    .section-card-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 14px 16px; border-bottom: 1px solid var(--color-border);
    }
    .section-card-title {
      font-size: var(--text-sm); font-weight: var(--font-semibold);
      display: flex; align-items: center; gap: 8px;
    }
    .section-card-body { padding: 16px; }

    /* ============================================================
       CARD (generic surface)
    ============================================================ */
    .card {
      background: #fff;
      border: 1px solid var(--color-border);
      border-radius: var(--radius-md);
      box-shadow: var(--shadow-sm);
    }

    /* ============================================================
       DATA TABLE (attr-list, brand-list, other wide tables)
    ============================================================ */
    .data-table {
      width: 100%;
      border-collapse: collapse;
      font-size: var(--text-sm);
    }
    .data-table thead tr {
      background: var(--color-bg-subtle);
    }
    .data-table th {
      padding: 10px 12px;
      text-align: left;
      font-weight: var(--font-semibold);
      color: var(--color-text-secondary);
      font-size: var(--text-xs);
      text-transform: uppercase;
      letter-spacing: 0.05em;
      border-bottom: 1px solid var(--color-border);
      white-space: nowrap;
    }
    .data-table td {
      padding: 10px 12px;
      border-bottom: 1px solid var(--color-border);
      color: var(--color-text-primary);
      vertical-align: middle;
    }
    .data-table tbody tr:hover {
      background: var(--color-bg-subtle);
    }

    /* ============================================================
       PAGE HEADER (inside page-content)
    ============================================================ */
    .page-header {
      display: flex; align-items: flex-start; justify-content: space-between;
      margin-bottom: 20px;
    }
    .page-header-left h1 {
      font-size: var(--text-xl); font-weight: var(--font-bold);
      color: var(--color-text-primary);
    }
    .page-header-left p {
      font-size: var(--text-sm); color: var(--color-text-secondary); margin-top: 2px;
    }
    .page-header-right { display: flex; gap: 8px; flex-shrink: 0; }
    .page-title {
      font-size: var(--text-xl);
      font-weight: var(--font-bold);
      color: var(--color-text-primary);
      line-height: 1.3;
    }
    .page-sub {
      font-size: var(--text-sm);
      color: var(--color-text-secondary);
      margin-top: 2px;
    }

    /* ============================================================
       FILE UPLOAD
    ============================================================ */
    .upload-zone {
      border: 2px dashed var(--color-border-strong);
      border-radius: var(--radius-md); padding: 24px 16px;
      text-align: center; cursor: pointer; transition: border-color .2s, background .2s;
      background: var(--color-bg-subtle);
    }
    .upload-zone:hover, .upload-zone.dragover {
      border-color: var(--color-primary); background: var(--color-primary-light);
    }
    .upload-icon { font-size: 28px; margin-bottom: 8px; color: var(--color-text-tertiary); }
    .upload-title { font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--color-text-primary); }
    .upload-sub   { font-size: var(--text-xs); color: var(--color-text-tertiary); margin-top: 4px; }
    .upload-link  { color: var(--color-primary); cursor: pointer; }
    .file-list { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
    .file-item {
      display: flex; align-items: center; gap: 10px;
      padding: 8px 12px; background: #fff;
      border: 1px solid var(--color-border); border-radius: var(--radius-base);
    }
    .file-icon { font-size: 18px; flex-shrink: 0; }
    .file-name  { flex: 1; font-size: var(--text-sm); font-weight: var(--font-medium); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .file-size  { font-size: var(--text-xs); color: var(--color-text-tertiary); flex-shrink:0; }
    .file-remove {
      color: var(--color-text-tertiary); cursor: pointer; font-size: 14px;
      padding: 2px 4px; border-radius: var(--radius-sm);
    }
    .file-remove:hover { background: var(--color-error-bg); color: var(--color-error); }

    /* ============================================================
       TABS
    ============================================================ */
    .tabs { display: flex; gap: 0; border-bottom: 2px solid var(--color-border); margin-bottom: 16px; }
    .tab-item {
      padding: 9px 16px; font-size: var(--text-sm); font-weight: var(--font-medium);
      color: var(--color-text-secondary); cursor: pointer;
      border-bottom: 2px solid transparent; margin-bottom: -2px;
      transition: color .15s;
    }
    .tab-item:hover { color: var(--color-text-primary); }
    .tab-item.active { color: var(--color-primary); border-bottom-color: var(--color-primary); }
    .tab-pane { display: none; }
    .tab-pane.active { display: block; }

    /* ============================================================
       TIMELINE / AUDIT
    ============================================================ */
    .timeline { display: flex; flex-direction: column; gap: 0; padding-left: 8px; }
    .timeline-item { display: flex; gap: 14px; padding-bottom: 20px; position: relative; }
    .timeline-item:not(:last-child)::before {
      content:''; position:absolute; left:7px; top:22px;
      width:2px; bottom: 0; background: var(--color-border);
    }
    .timeline-dot {
      width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0;
      margin-top: 2px; border: 2px solid #fff; box-shadow: 0 0 0 2px var(--color-border);
    }
    .timeline-dot.blue   { background: var(--color-primary); box-shadow: 0 0 0 2px var(--color-primary-border); }
    .timeline-dot.green  { background: var(--color-success); box-shadow: 0 0 0 2px #BBF7D0; }
    .timeline-dot.red    { background: var(--color-error);   box-shadow: 0 0 0 2px #FECACA; }
    .timeline-dot.amber  { background: var(--color-warning); box-shadow: 0 0 0 2px var(--color-warning-border); }
    .timeline-dot.gray   { background: var(--color-text-tertiary); }
    .timeline-content { flex: 1; }
    .timeline-title { font-size: var(--text-sm); font-weight: var(--font-medium); }
    .timeline-meta  { font-size: var(--text-xs); color: var(--color-text-tertiary); margin-top: 2px; }
    .timeline-note  { font-size: var(--text-sm); color: var(--color-text-secondary); margin-top: 6px; padding: 8px 10px; background: var(--color-bg-subtle); border-radius: var(--radius-base); }

    /* ============================================================
       FORM GRID
    ============================================================ */
    .form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
    .form-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px 16px; }
    .form-grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px 16px; }
    .col-span-2 { grid-column: span 2; }
    .col-span-3 { grid-column: span 3; }

    /* ============================================================
       FILTER PILLS
    ============================================================ */
    .filter-pills { display: flex; gap: 6px; flex-wrap: wrap; }
    .pill {
      padding: 4px 12px; border-radius: var(--radius-full);
      font-size: var(--text-xs); font-weight: var(--font-medium);
      cursor: pointer; border: 1px solid var(--color-border);
      background: #fff; color: var(--color-text-secondary);
      transition: background .1s, border-color .1s, color .1s;
    }
    .pill:hover { border-color: var(--color-primary); color: var(--color-primary); }
    .pill.active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }

    /* ============================================================
       PROGRESS BAR
    ============================================================ */
    .progress-bar { height: 6px; background: var(--color-bg-muted); border-radius: var(--radius-full); overflow: hidden; }
    .progress-fill { height: 100%; border-radius: var(--radius-full); background: var(--color-primary); transition: width .3s; }
    .progress-fill.green  { background: var(--color-success); }
    .progress-fill.amber  { background: var(--color-warning); }
    .progress-fill.red    { background: var(--color-error); }

    /* ============================================================
       INLINE COMMENT BOX
    ============================================================ */
    .comment-box {
      border: 1px solid var(--color-border); border-radius: var(--radius-md);
      overflow: hidden;
    }
    .comment-textarea {
      width: 100%; padding: 10px 12px; font-size: var(--text-sm);
      border: none; resize: none; outline: none; min-height: 80px;
      color: var(--color-text-primary); font-family: var(--font-family);
    }
    .comment-actions {
      display: flex; justify-content: flex-end; padding: 8px 10px;
      border-top: 1px solid var(--color-border); background: var(--color-bg-subtle);
      gap: 6px;
    }

    /* ============================================================
       EMPTY STATE
    ============================================================ */
    .empty-state {
      display: flex; flex-direction: column; align-items: center;
      padding: 60px 20px; color: var(--color-text-tertiary);
    }
    .empty-icon { font-size: 40px; margin-bottom: 12px; }
    .empty-title { font-size: var(--text-base); font-weight: var(--font-medium); color: var(--color-text-secondary); margin-bottom: 6px; }
    .empty-sub   { font-size: var(--text-sm); text-align: center; max-width: 320px; }

    .coming-soon-page {
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      min-height: calc(100vh - 120px); padding: 40px 20px; text-align: center;
    }
    .coming-soon-page .cs-rocket { margin-bottom: 28px; }
    .coming-soon-page .cs-title {
      font-size: 20px; font-weight: 700; color: var(--color-text-primary); margin-bottom: 8px;
    }
    .coming-soon-page .cs-sub {
      font-size: 14px; color: var(--color-text-secondary); max-width: 300px; line-height: 1.5;
    }

    /* ============================================================
       STATUS CHIP (table cell)
    ============================================================ */
    .status-chip {
      display: inline-flex; align-items: center; gap: 5px;
      font-size: 11px; font-weight: var(--font-semibold);
      padding: 3px 8px; border-radius: var(--radius-full);
      white-space: nowrap;
    }
    .status-chip::before { content:''; width:6px; height:6px; border-radius:50%; flex-shrink:0; }
    .status-draft     { background:#F3F4F6; color:#4B5563; }
    .status-draft::before     { background:#9CA3AF; }
    .status-submitted { background:#DBEAFE; color:#1D4ED8; }
    .status-submitted::before { background:#3B82F6; }
    .status-reviewing { background:#FEF3C7; color:#B45309; }
    .status-reviewing::before { background:#F59E0B; }
    .status-approved  { background:#DCFCE7; color:#15803D; }
    .status-approved::before  { background:#22C55E; }
    .status-rejected  { background:#FEE2E2; color:#B91C1C; }
    .status-rejected::before  { background:#EF4444; }
    .status-pending   { background:#EDE9FE; color:#6D28D9; }
    .status-pending::before   { background:#8B5CF6; }

    /* ============================================================
       DETAIL FIELD (key-value)
    ============================================================ */
    .detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; }
    .detail-field label { font-size: var(--text-xs); color: var(--color-text-tertiary); display:block; margin-bottom:3px; }
    .detail-field span  { font-size: var(--text-sm); color: var(--color-text-primary); font-weight: var(--font-medium); }
    /* detail-row pattern (key-value list) */
    .detail-row   { display:flex; justify-content:space-between; align-items:flex-start; padding:8px 0; border-bottom:1px solid var(--color-border); gap:16px; }
    .detail-row:last-child { border-bottom:none; }
    .detail-label { font-size:13px; color:var(--color-text-secondary); flex-shrink:0; min-width:140px; }
    .detail-value { font-size:13px; color:var(--color-text-primary); font-weight:500; text-align:right; }

    /* ============================================================
       ATTR TOOLTIP
    ============================================================ */
    .attr-tip { position:relative; cursor:help; }
    .attr-tip-box {
      display:none; position:absolute; z-index:9999;
      bottom:calc(100% + 8px); left:0;
      background:#1E293B; color:#F1F5F9;
      border-radius:8px; padding:10px 13px;
      min-width:240px; max-width:340px;
      font-size:11px; line-height:1.6; white-space:normal;
      box-shadow:0 6px 20px rgba(0,0,0,.3);
      pointer-events:none;
    }
    .attr-tip:hover .attr-tip-box { display:block; }
    /* default: tooltip above, arrow points down */
    .attr-tip-box::after {
      content:''; position:absolute; top:100%; left:14px;
      border:5px solid transparent; border-top-color:#1E293B;
    }
    /* .attr-tip-below: tooltip below element, arrow points up */
    .attr-tip-below .attr-tip-box {
      bottom:auto; top:calc(100% + 8px);
    }
    .attr-tip-below .attr-tip-box::after {
      top:-10px; border-top-color:transparent; border-bottom-color:#1E293B;
    }
    .attr-tip-label {
      font-size:9px; font-weight:700; color:#64748B;
      text-transform:uppercase; letter-spacing:.07em;
      margin-bottom:2px;
    }

    /* ============================================================
       CHART PLACEHOLDER
    ============================================================ */
    .chart-placeholder {
      background: var(--color-bg-subtle); border-radius: var(--radius-base);
      display: flex; align-items: center; justify-content: center;
      color: var(--color-text-tertiary); font-size: var(--text-xs);
      font-weight: var(--font-medium);
    }

    /* ============================================================
       SCROLLBAR
    ============================================================ */
    ::-webkit-scrollbar { width: 6px; height: 6px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: var(--color-border-strong); border-radius: 3px; }
    ::-webkit-scrollbar-thumb:hover { background: var(--color-text-tertiary); }

    /* ============================================================
       DIVIDER
    ============================================================ */
    .divider { border: none; border-top: 1px solid var(--color-border); margin: 16px 0; }

    /* ============================================================
       ROLE SELECT BADGE
    ============================================================ */
    .role-indicator {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 3px 10px; border-radius: var(--radius-full);
      font-size: var(--text-xs); font-weight: var(--font-semibold);
    }
    .role-admin { background: #FEE2E2; color: #991B1B; }
    .role-cmc   { background: #FEF9EE; color: #92400E; }
    .role-md    { background: #DCFCE7; color: #15803D; }

    /* ============================================================
       SCREEN 1/2 — LOGIN / REGISTER (Masan Group design)
    ============================================================ */
    #view-login, #view-register {
      min-height: 100vh; width: 100%;
      flex-direction: row;
    }

    /* LEFT PANEL */
    .login-left {
      width: 50%; flex-shrink: 0;
      background: #fff;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      padding: 48px 56px;
      position: relative;
    }
    .login-left-inner { width: 100%; max-width: 380px; }

    /* Language selector */
    .masan-lang-sel {
      position: absolute; top: 20px; left: 20px;
      font-size: 13px; color: #374151;
      border: 1px solid #E2E8F0; border-radius: 6px;
      padding: 6px 10px; background: #fff;
      cursor: pointer; outline: none;
      transition: border-color .2s;
    }
    .masan-lang-sel:hover { border-color: #94A3B8; }
    .login-left { position: relative; }

    /* Masan Group logo */
    .masan-logo-img {
      height: 44px; width: auto;
      margin-bottom: 40px; display: block;
    }

    /* Form title / sub */
    .login-form-title {
      font-size: 24px; font-weight: 700;
      color: #0D1F3C; margin-bottom: 6px;
    }
    .login-form-sub {
      font-size: 14px; color: #64748B;
      margin-bottom: 28px; line-height: 1.5;
    }

    /* Bottom-border-only inputs */
    .masan-input {
      border: none !important;
      border-bottom: 1.5px solid #CBD5E1 !important;
      border-radius: 0 !important;
      padding-left: 0 !important; padding-right: 0 !important;
      background: transparent !important;
      color: #0D1F3C;
    }
    .masan-input:focus {
      border-bottom-color: #0057A8 !important;
      box-shadow: none !important; outline: none !important;
    }
    .masan-input::placeholder { color: #94A3B8; }

    /* Primary CTA */
    .masan-btn-primary {
      width: 100%; padding: 13px 20px;
      background: #0D1F3C; color: #fff;
      border: none; border-radius: 6px;
      font-size: 14px; font-weight: 600;
      cursor: pointer; margin-top: 4px;
      transition: background .2s;
      display: flex; align-items: center; justify-content: center;
      letter-spacing: .01em;
    }
    .masan-btn-primary:hover { background: #1B3358; }

    /* SSO divider */
    .masan-sso-divider {
      display: flex; align-items: center; gap: 12px;
      margin: 22px 0 16px;
    }
    .masan-sso-line { flex: 1; height: 1px; background: #E2E8F0; }
    .masan-sso-label {
      font-size: 10px; font-weight: 700; letter-spacing: .12em;
      color: #94A3B8; white-space: nowrap;
    }

    /* Microsoft SSO button */
    .masan-btn-ms {
      width: 100%; padding: 11px 20px;
      background: #fff; color: #0D1F3C;
      border: 1.5px solid #CBD5E1; border-radius: 6px;
      font-size: 14px; font-weight: 500;
      cursor: pointer; display: flex; align-items: center;
      justify-content: center; gap: 10px;
      transition: border-color .2s, background .2s;
    }
    .masan-btn-ms:hover { border-color: #94A3B8; background: #F8FAFC; }

    /* Auth switch */
    .masan-auth-switch {
      text-align: center; margin-top: 22px;
      font-size: 13px; color: #64748B;
    }
    .masan-auth-switch span {
      color: #0057A8; cursor: pointer; font-weight: 600;
    }
    .masan-auth-switch span:hover { text-decoration: underline; }

    /* Footer note */
    .login-footer-note {
      margin-top: 32px; font-size: 11px; color: #94A3B8;
      text-align: center; line-height: 1.6;
    }

    /* RIGHT PANEL — Masan building photo */
    .login-right {
      flex: 1;
      background: url('/assets/login-bg.webp') center center / cover no-repeat;
      min-height: 100vh;
    }

/* =============================================================
   HOME PAGE
============================================================= */
/* Announcement banner */
.home-ann-banner {
  display:flex; align-items:center; gap:10px;
  padding: 10px 16px; border-radius: 10px;
  font-size: 13px; line-height: 1.5;
  animation: slideDown .25s ease;
  transition: opacity .25s, transform .25s;
}
.home-ann-warning { background:#FFFBEB; border:1px solid #FDE68A; border-left:3px solid #F59E0B; color:#92400E; }
.home-ann-info    { background:#EFF6FF; border:1px solid #BFDBFE; border-left:3px solid #3B82F6; color:#1E3A5F; }
.home-ann-text    { flex:1; }
.home-ann-close   { background:none; border:none; cursor:pointer; font-size:13px; color:inherit; opacity:.55; padding:0 2px; flex-shrink:0; }
.home-ann-close:hover { opacity:1; }

/* Greeting */
.home-greeting-title { font-size: 1.25rem; font-weight: 700; color:var(--color-text-primary); margin-bottom:6px; }
.home-greeting-sub   { font-size: 13px; color:var(--color-text-secondary); line-height:1.5; }

/* Weather Widget */
.home-weather {
  display:flex; flex-direction:column; gap:10px;
  background:linear-gradient(135deg,#EFF6FF 0%,#F0FDF4 100%);
  border:1px solid #DBEAFE; border-radius:12px;
  padding:12px 16px; min-width:340px; flex-shrink:0;
}
.home-weather-main {
  display:flex; align-items:center; gap:14px;
}
.home-weather-temp {
  font-size:2.4rem; font-weight:700; color:#1E40AF; line-height:1; flex-shrink:0;
}
.home-weather-unit { font-size:1.1rem; font-weight:500; vertical-align:super; }
.home-weather-info { display:flex; flex-direction:column; gap:2px; }
.home-weather-desc { font-size:13px; font-weight:600; color:#1E3A5F; }
.home-weather-meta { font-size:11px; color:#475569; line-height:1.5; }
.home-weather-forecast {
  display:flex; gap:0; border-top:1px solid #BFDBFE; padding-top:8px;
}
.home-weather-day {
  flex:1; text-align:center; padding:0 4px;
  border-right:1px solid #DBEAFE;
}
.home-weather-day:last-child { border-right:none; }
.home-weather-day-label { font-size:10px; font-weight:700; color:#64748B; text-transform:uppercase; letter-spacing:.06em; margin-bottom:2px; }
.home-weather-day-desc  { font-size:10px; font-weight:500; line-height:1.3; margin-bottom:2px; }
.home-weather-day-temp  { font-size:12px; font-weight:600; color:#1E40AF; }
.home-qa-label { white-space:nowrap; }

/* KPI Row */
.home-kpi-row {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 12px;
}
.home-kpi-card {
  background:var(--color-surface); border:1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: 16px 18px;
  display:flex; align-items:center; gap:14px;
  transition: box-shadow .15s;
}
.home-kpi-card:hover { box-shadow: var(--shadow-sm); }
.home-kpi-icon {
  width:42px; height:42px; border-radius:10px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:1.25rem;
}
.home-kpi-value { font-size:1.6rem; font-weight:700; line-height:1; }
.home-kpi-label { font-size:11.5px; color:var(--color-text-primary); font-weight:500; margin-top:4px; }
.home-kpi-card:hover { box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,.1)); transform: translateY(-1px); transition: box-shadow .15s, transform .15s; }

/* Main grid */
.home-main-grid {
  display: grid; grid-template-columns: 1fr 360px; gap: 12px; align-items: start;
}

/* Section header */
.home-section-hd {
  display:flex; align-items:center; gap:8px; margin-bottom:16px;
}
.home-section-title { font-size:14px; font-weight:600; color:var(--color-text-primary); flex:1; }
.home-section-link  { font-size:12px; color:var(--color-primary); cursor:pointer; white-space:nowrap; }
.home-section-link:hover { text-decoration:underline; }
.home-badge-count {
  font-size:11px; font-weight:600; background:var(--color-primary); color:#fff;
  padding:1px 7px; border-radius:99px;
}

/* My Tasks */
.home-task-group { margin-bottom:12px; }
.home-task-group:last-child { margin-bottom:0; }
.home-task-group-label {
  font-size:11.5px; font-weight:600; color:var(--color-text-secondary);
  text-transform:uppercase; letter-spacing:.04em; margin-bottom:8px;
}
.home-task-item {
  display:flex; align-items:center; gap:10px;
  padding:8px 10px; border-radius:8px; cursor:pointer;
  transition: background .15s;
}
.home-task-item:hover { background:var(--color-surface-hover, #F8F9FA); }
.home-task-id   { font-size:12px; font-weight:600; color:var(--color-primary); white-space:nowrap; }
.home-task-name { font-size:13px; color:var(--color-text-primary); flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.home-task-chip {
  font-size:10px; font-weight:600; padding:2px 8px; border-radius:99px; white-space:nowrap; flex-shrink:0;
}
.home-task-chip.draft    { background:#EFF6FF; color:#1D4ED8; }
.home-task-chip.revision { background:#FEF3C7; color:#92400E; }
.home-task-chip.pending  { background:#FEF9C3; color:#713F12; }
.home-task-more {
  font-size:12px; color:var(--color-primary); cursor:pointer; padding:4px 10px;
  text-align:right;
}
.home-task-more:hover { text-decoration:underline; }
.home-empty-tasks { text-align:center; padding:20px 0; }
.home-sla-warning {
  font-size:12px; font-weight:500; color:#92400E;
  background:#FEF9C3; border:1px solid #FDE047;
  padding:6px 10px; border-radius:6px; margin-bottom:6px;
}

/* Recent Activity */
.home-activity-row {
  display:flex; align-items:center; gap:10px;
  padding:8px 6px; border-radius:8px; cursor:pointer;
  transition: background .15s; flex-wrap:nowrap;
}
.home-activity-row:hover { background:var(--color-surface-hover, #F8F9FA); }
.home-activity-time   { font-size:11px; color:var(--color-text-secondary); white-space:nowrap; min-width:90px; }
.home-activity-actor  { font-size:12px; font-weight:500; color:var(--color-text-primary); white-space:nowrap; min-width:80px; }
.home-activity-detail { font-size:12px; flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Notifications */
.home-notif-item {
  display:flex; align-items:flex-start; gap:8px;
  padding:8px 6px; border-radius:8px;
  transition: background .15s, opacity .2s;
}
.home-notif-item.unread { background:#FAFAFA; }
.home-notif-item:hover  { background:var(--color-surface-hover, #F5F5F5); }
.home-notif-dot {
  width:7px; height:7px; border-radius:50%; flex-shrink:0; margin-top:5px;
  background:var(--color-primary);
}
.home-notif-dot.read { background:transparent; }
.home-notif-icon    { font-size:.9rem; flex-shrink:0; margin-top:1px; }
.home-notif-text    { font-size:12.5px; color:var(--color-text-primary); line-height:1.45; }
.home-notif-time    { font-size:11px; color:var(--color-text-secondary); margin-top:2px; }
.home-notif-dismiss {
  background:none; border:none; cursor:pointer; font-size:11px;
  color:var(--color-text-secondary); padding:0 2px; flex-shrink:0; opacity:0;
  transition: opacity .15s;
}
.home-notif-item:hover .home-notif-dismiss { opacity:.6; }
.home-notif-item:hover .home-notif-dismiss:hover { opacity:1; }

/* SKU Missing Data */
.home-sku-missing-header {
  display:flex; align-items:center; gap:10px;
  padding:5px 8px; font-size:11px; font-weight:600;
  color:var(--color-text-secondary); text-transform:uppercase; letter-spacing:.04em;
  border-bottom:1px solid var(--color-border); margin-bottom:4px;
}
.home-sku-missing-row {
  display:flex; align-items:center; gap:10px;
  padding:7px 8px; border-radius:8px; transition: background .15s;
}
.home-sku-missing-row:hover { background:var(--color-bg-subtle, #F8F9FA); }
.home-sku-missing-id {
  flex:0 0 90px; font-size:12px; font-weight:600; color:var(--color-primary);
  cursor:pointer; white-space:nowrap;
}
.home-sku-missing-id:hover { text-decoration:underline; }
.home-sku-missing-name {
  flex:1; font-size:12.5px; color:var(--color-text-primary);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.home-sku-missing-fields { flex:0 0 160px; display:flex; gap:4px; flex-wrap:wrap; }
.home-missing-chip {
  font-size:10px; font-weight:500; padding:1px 6px; border-radius:99px;
  background:#FEF3C7; color:#92400E; white-space:nowrap;
}
.home-missing-chip.more { background:#F1F5F9; color:#64748B; }
.home-sku-missing-btn {
  flex:0 0 60px; font-size:11px; font-weight:500;
  padding:3px 8px; border-radius:6px; cursor:pointer; font-family:inherit;
  background:none; border:1px solid var(--color-border); color:var(--color-text-secondary);
  transition: all .15s; white-space:nowrap;
}
.home-sku-missing-btn:hover {
  background:var(--color-primary); border-color:var(--color-primary); color:#fff;
}

/* Release Notes */
.home-release-block { padding-bottom:16px; border-bottom:1px solid var(--color-border); }
.home-release-block:last-child { border-bottom:none; padding-bottom:0; }
.home-release-header { display:flex; align-items:center; gap:7px; }
.home-release-version { font-size:13px; font-weight:700; color:var(--color-text-primary); }
.home-release-new {
  font-size:10px; font-weight:600; padding:1px 7px; border-radius:99px;
  background:var(--color-primary); color:#fff;
}
.home-release-date { font-size:11px; color:var(--color-text-secondary); margin-left:auto; }
.home-release-item { display:flex; align-items:flex-start; gap:7px; }
.home-release-chip {
  font-size:9.5px; font-weight:600; padding:2px 7px; border-radius:99px;
  white-space:nowrap; flex-shrink:0; margin-top:1px;
}
.home-release-chip.feature { background:#EFF6FF; color:#1D4ED8; }
.home-release-chip.fix     { background:#FEF2F2; color:#DC2626; }
.home-release-chip.patch   { background:#F0FDF4; color:#16A34A; }
.home-release-text { font-size:12px; color:var(--color-text-secondary); line-height:1.5; }
.home-release-show-more {
  font-size:12px; font-weight:500; color:var(--color-primary);
  background:none; border:1px solid var(--color-border); border-radius:99px;
  padding:5px 16px; cursor:pointer; font-family:inherit;
  transition: background .15s, border-color .15s, color .15s;
}
.home-release-show-more:hover {
  background:var(--color-primary); border-color:var(--color-primary); color:#fff;
}

/* Feedback */
.home-fb-type-btn {
  font-size:12px; font-weight:500; padding:5px 10px;
  border:1px solid var(--color-border); border-radius:99px;
  background:var(--color-surface); cursor:pointer; font-family:inherit;
  color:var(--color-text-secondary); transition: all .15s;
}
.home-fb-type-btn.active,
.home-fb-type-btn:hover {
  background:var(--color-primary); border-color:var(--color-primary); color:#fff;
}

@keyframes slideDown {
  from { opacity:0; transform:translateY(-6px); }
  to   { opacity:1; transform:translateY(0); }
}

/* Responsive */
@media (max-width: 900px) {
  .home-kpi-row       { grid-template-columns: repeat(2,1fr); }
  .home-main-grid     { grid-template-columns: 1fr; }
  .home-quick-actions { display:none; }
}

/* ============================================================
   SEARCH MODAL  (⌘K)
============================================================ */
.search-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(0,0,0,.4);
  align-items: flex-start; justify-content: center;
  padding-top: 14vh;
}
.search-overlay.open { display: flex; }
.search-box {
  background: var(--color-surface, #fff);
  border-radius: var(--radius-lg);
  width: 100%; max-width: 540px;
  box-shadow: 0 24px 80px rgba(0,0,0,.22);
  overflow: hidden;
  animation: modalIn .18s ease;
}
.search-input-row {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-bottom: 1px solid var(--color-border);
}
.search-input-row svg { flex-shrink: 0; color: var(--color-text-tertiary); }
.search-input-main {
  flex: 1; border: none; outline: none; background: transparent;
  font-size: 15px; font-family: inherit; color: var(--color-text-primary);
}
.search-input-main::placeholder { color: var(--color-text-tertiary); }
.search-esc-kbd {
  font-size: 10px; font-weight: 500; padding: 2px 6px;
  border: 1px solid var(--color-border); border-radius: 4px;
  color: var(--color-text-tertiary); background: var(--color-bg-subtle);
  flex-shrink: 0;
}
.search-results { max-height: 340px; overflow-y: auto; }
.search-result-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 16px; cursor: pointer;
  transition: background .1s; border-radius: 0;
}
.search-result-item:hover,
.search-result-item.highlighted { background: var(--color-bg-subtle); }
.search-result-icon {
  width: 30px; height: 30px; border-radius: var(--radius-base);
  background: var(--color-bg-muted);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; color: var(--color-text-secondary);
}
.search-result-text { flex: 1; min-width: 0; }
.search-result-title { font-size: 13px; font-weight: 500; color: var(--color-text-primary); }
.search-result-group { font-size: 11px; color: var(--color-text-tertiary); }
.search-empty { padding: 28px 0; text-align: center; color: var(--color-text-tertiary); font-size: 13px; }
.search-footer {
  padding: 8px 16px; font-size: 11px; color: var(--color-text-tertiary);
  border-top: 1px solid var(--color-border);
  display: flex; gap: 14px; align-items: center;
}
.search-footer kbd {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-family: inherit; font-weight: 500;
  padding: 1px 5px; border: 1px solid var(--color-border);
  border-radius: 3px; background: var(--color-bg-subtle);
  color: var(--color-text-secondary); margin-right: 3px;
}

/* ============================================================
   COMPONENT CLASSES  (migrated from inline styles)
============================================================ */

/* SKU ID chip — monospace blue link/badge in table cells */
.sku-id-chip {
  font-family: monospace; font-size: 11px; font-weight: 700;
  color: var(--color-primary); background: var(--color-primary-light);
  border: 1px solid var(--color-primary-border);
  border-radius: var(--radius-sm); padding: 1px 6px;
  text-decoration: none; white-space: nowrap; display: inline-block;
}
.sku-id-chip:hover { background: var(--color-primary-border); }

/* Tree row items (location tree, category tree) */
.tree-item-row {
  display: flex; align-items: center;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-subtle);
  transition: background .1s; cursor: pointer;
}
.tree-item-row:hover { background: var(--color-primary-light); }
.tree-item-empty {
  font-size: 12px; color: var(--color-text-tertiary);
  background: var(--color-bg-subtle);
  border-bottom: 1px solid var(--color-border);
}

/* Batch mode selection cards */
.batch-mode-card {
  border: 2px solid var(--color-border); border-radius: 10px; padding: 20px;
  cursor: pointer; background: var(--color-bg-surface);
  transition: border-color .15s, background .15s;
  user-select: none; display: flex; flex-direction: column; gap: 10px;
}
.batch-mode-card:hover { border-color: var(--color-primary); background: var(--color-primary-light); }
.batch-mode-card.disabled {
  border-color: var(--color-border-strong); background: var(--color-bg-subtle);
  cursor: default; opacity: .7;
}
.batch-mode-card.disabled:hover { border-color: var(--color-border-strong); background: var(--color-bg-subtle); }

/* Selected table row */
.row-selected { background: var(--color-warning-bg) !important; }
/* Active/focused tree/table row */
.row-active   { background: var(--color-primary-light) !important; }
/* Sky-blue info row (LOV suggestion, inline lookup) */
.row-info     { background: var(--color-sky-bg); border-bottom: 1px solid var(--color-sky-border); }

/* Info banner — sky blue hint box */
.info-banner {
  background: var(--color-sky-light); border: 1px solid var(--color-sky-border);
  border-radius: 6px; padding: 5px 10px;
  display: flex; align-items: center; gap: 8px; margin-bottom: 2px;
}

/* Editable section card highlight */
.section-card-editable { border: 2px solid var(--color-primary) !important; background: var(--color-primary-light) !important; }

/* 4px vertical accent bars */
.accent-bar-sky   { width: 4px; height: 16px; background: var(--color-sky);     border-radius: 2px; display: inline-block; flex-shrink: 0; }
.accent-bar-green { width: 4px; height: 16px; background: var(--color-emerald); border-radius: 2px; display: inline-block; flex-shrink: 0; }

/* Purple indicator dot (6px) */
.dot-purple { width: 6px; height: 6px; border-radius: 50%; background: #6c47d9; flex-shrink: 0; }

/* Empty upload drop zone */
.drop-zone-empty {
  border: 2px dashed var(--color-border-strong); border-radius: 8px;
  padding: 20px; text-align: center; background: var(--color-bg-subtle);
}

/* Code chip — inline monospace token */
.code-chip {
  font-family: monospace; font-size: 11px;
  background: var(--color-bg-subtle); border-radius: 3px; padding: 1px 6px;
}
.code-chip.purple { background: #F3E8FF; color: #7C3AED; font-weight: 700; border-radius: 4px; padding: 2px 7px; }
.code-chip.blue   { background: #EFF6FF; color: var(--color-primary); font-weight: 700; border-radius: 4px; padding: 2px 7px; }
.code-chip.green  { background: #DCFCE7; color: #16A34A; font-weight: 700; border-radius: 4px; padding: 2px 7px; }
.code-chip.sky    { background: #E0F2FE; color: #0369A1; font-weight: 600; }
.code-chip.amber  { background: #FEF3C7; color: #B45309; font-weight: 600; }

/* Alert variants — purple & cyan */
.alert-purple {
  background: #F3E8FF; border: 1px solid #DDD6FE;
  color: #5B21B6; border-radius: 8px; padding: 10px 14px;
  display: flex; align-items: flex-start; gap: 8px;
}
.alert-cyan {
  background: #ECFEFF; border: 1px solid #A5F3FC;
  color: #164E63; border-radius: 8px; padding: 10px 14px;
  display: flex; align-items: flex-start; gap: 8px;
}

/* Progress bar track */
.progress-track {
  width: 100%; height: 6px; background: var(--color-border);
  border-radius: 999px; overflow: hidden;
}

/* Status indicator dot */
.dot-red   { width: 8px; height: 8px; border-radius: 50%; background: #D42B2B; flex-shrink: 0; }
.dot-green { width: 8px; height: 8px; border-radius: 50%; background: #16A34A; flex-shrink: 0; }
.dot-amber { width: 8px; height: 8px; border-radius: 50%; background: #D97706; flex-shrink: 0; }

/* Table header subtle */
.table-head-subtle { background: var(--color-bg-subtle); }

/* ============================================================
   STATUS DOT — inline status indicator (design doc §3)
============================================================ */
.status-dot {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-sm);
}
.status-dot::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.status-dot.active::before   { background: var(--color-primary); }
.status-dot.success::before  { background: var(--color-success); }
.status-dot.warning::before  { background: var(--color-warning); }
.status-dot.error::before    { background: var(--color-error); }
.status-dot.gray::before     { background: var(--color-text-tertiary); }

/* ============================================================
   APPROVAL WORKFLOW — horizontal step chain (design doc §7)
============================================================ */
.workflow {
  display: flex; align-items: center; justify-content: center;
  gap: 0; padding: var(--space-4) 0;
}
.wf-step { display: flex; flex-direction: column; align-items: center; flex: 1; position: relative; }
.wf-step:not(:last-child)::after {
  content: ''; position: absolute; top: 20px; left: calc(50% + 24px);
  width: calc(100% - 48px); height: 1px; background: var(--color-border);
}
.wf-icon {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; z-index: 1;
}
.wf-icon.done     { background: var(--color-primary); color: #fff; }
.wf-icon.pending  { background: #FEF3C7; color: var(--color-warning); border: 2px solid var(--color-warning); }
.wf-icon.approved { background: var(--color-success-bg); color: var(--color-success); border: 2px solid var(--color-success); }
.wf-label { font-size: var(--text-xs); color: var(--color-text-secondary); margin-top: var(--space-2); text-align: center; }

/* ============================================================
   FILTER BAR — toolbar filter chips (design doc §11)
============================================================ */
.filter-bar {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  background: var(--color-bg-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-base);
}
.filter-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--text-xs); color: var(--color-text-secondary);
  padding: 3px var(--space-2); border-radius: var(--radius-sm);
  border: 1px solid var(--color-border); background: var(--color-bg-surface); cursor: pointer;
}
.filter-chip:hover { background: var(--color-bg-subtle); color: var(--color-primary); border-color: var(--color-primary); }
.filter-chip.active { background: var(--color-primary-light); color: var(--color-primary); border-color: var(--color-primary-border); }
.filter-count { margin-left: auto; font-size: var(--text-xs); color: var(--color-text-tertiary); }

/* ============================================================
   BADGE OUTLINE — (design doc §3)
============================================================ */
.badge-outline {
  background: transparent; border: 1px solid var(--color-border-strong);
  color: var(--color-text-secondary);
}

/* ============================================================
   KPI CARD extras — align with design doc §5
============================================================ */
.kpi-header { display: flex; align-items: flex-start; justify-content: space-between; }
.kpi-value.positive { color: var(--color-success); }
.kpi-value.negative { color: var(--color-error); }

/* ============================================================
   MISC UTILITIES — divider, text-link (design doc §14)
============================================================ */
.text-link { color: var(--color-link); font-weight: var(--font-medium); cursor: pointer; }
.text-link:hover { text-decoration: underline; color: var(--color-link-hover); }

/* ============================================================
   DARK MODE  — surface/card overrides
============================================================ */
[data-theme="dark"] .top-bar        { background: var(--color-surface); }
[data-theme="dark"] .sidebar        { background: var(--sidebar-bg); }
[data-theme="dark"] .kpi-card       { background: var(--color-surface); }
[data-theme="dark"] .table-wrap     { background: var(--color-surface); }
[data-theme="dark"] .modal          { background: var(--color-surface); }
[data-theme="dark"] .search-box     { background: var(--color-surface); }
[data-theme="dark"] .topbar-dropdown { background: var(--color-surface); }
[data-theme="dark"] .form-input     { background: var(--color-bg-surface); border-color: var(--color-border); color: var(--color-text-primary); }
[data-theme="dark"] thead tr        { background: var(--color-bg-subtle); }
[data-theme="dark"] .page-content   { background: var(--color-bg-muted); }
[data-theme="dark"] .page-footer    { background: var(--color-surface); }
[data-theme="dark"] .btn-secondary  { background: var(--color-bg-subtle); border-color: var(--color-border); }
[data-theme="dark"] #theme-icon-moon { display: none; }
[data-theme="dark"] #theme-icon-sun  { display: flex !important; }

/* ============================================================
   THEME SETTINGS MODAL — cards
============================================================ */
.ts-card {
  border: 2px solid var(--color-border);
  border-radius: 8px;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.15s;
  position: relative;
}
.ts-card:hover { border-color: var(--color-primary-border); }
.ts-card-active {
  border-color: var(--color-primary);
}
.ts-card-active::after {
  content: '';
  position: absolute;
  top: 6px; right: 6px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--color-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
.ts-card-preview {
  height: 60px;
  background: var(--color-bg-subtle);
  position: relative;
  overflow: hidden;
}
.ts-card-label {
  padding: 6px 8px;
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text-secondary);
  text-align: center;
}
.ts-card-active .ts-card-label { color: var(--color-primary); font-weight: 600; }

/* Preview thumbnails — Theme */
.ts-preview-system {
  background: linear-gradient(135deg, #f3f4f6 50%, #1a1d2e 50%);
}
.ts-preview-light { background: #f3f4f6; }
.ts-preview-dark  { background: #1a1d2e; }

/* Preview thumbnails — Sidebar mode */
.ts-preview-inset::before,
.ts-preview-floating::before,
.ts-preview-sidebar-mode::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: #94a3b8;
  border-radius: 3px 0 0 0;
}
.ts-preview-inset::before       { width: 22%; margin: 4px 0 4px 4px; border-radius: 3px; }
.ts-preview-floating::before    { width: 22%; opacity: .7; top: 0; bottom: 0; margin: 0; border-radius: 0; }
.ts-preview-sidebar-mode::before { width: 28%; margin: 0; border-radius: 0; }

.ts-preview-inset::after,
.ts-preview-floating::after,
.ts-preview-sidebar-mode::after {
  content: '';
  position: absolute;
  right: 4px; top: 4px; bottom: 4px; left: 30%;
  background: #cbd5e1;
  border-radius: 3px;
}
.ts-preview-floating::after { left: 24%; opacity: .85; }
.ts-preview-sidebar-mode::after { left: 34%; }

/* Preview thumbnails — Layout */
.ts-preview-layout-default::before,
.ts-preview-layout-compact::before,
.ts-preview-layout-full::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 22%;
  background: #94a3b8;
  border-radius: 3px 0 0 0;
  margin: 4px 0 4px 4px;
  border-radius: 3px;
}
.ts-preview-layout-default::after {
  content: '';
  position: absolute;
  right: 8px; top: 8px; left: 34%;
  height: 8px; background: #cbd5e1; border-radius: 2px;
  box-shadow: 0 12px 0 #cbd5e1, 0 24px 0 #cbd5e1;
}
.ts-preview-layout-compact::after {
  content: '';
  position: absolute;
  right: 6px; top: 6px; left: 32%;
  height: 6px; background: #cbd5e1; border-radius: 2px;
  box-shadow: 0 8px 0 #cbd5e1, 0 16px 0 #cbd5e1, 0 24px 0 #cbd5e1;
}
.ts-preview-layout-full::after {
  content: '';
  position: absolute;
  right: 4px; top: 8px; left: 30%;
  height: 8px; background: #cbd5e1; border-radius: 2px;
  box-shadow: 0 14px 0 #cbd5e1, 0 28px 0 #cbd5e1;
}

/* ============================================================
   SIDEBAR MODES
============================================================ */
body[data-sidebar="floating"] .sidebar {
  position: fixed;
  z-index: 300;
  box-shadow: var(--shadow-lg);
  border-right: 1px solid var(--color-border);
}
body[data-sidebar="floating"] .main-area {
  margin-left: 0 !important;
}
body[data-sidebar="floating"] .sidebar.collapsed {
  transform: translateX(calc(-1 * var(--sidebar-width) + 52px));
}

body[data-sidebar="sidebar"] .panel-toggle-btn {
  display: none;
}
body[data-sidebar="sidebar"] .sidebar.collapsed {
  width: var(--sidebar-width);
}
body[data-sidebar="sidebar"] .sidebar.collapsed .sidebar-brand-expanded { display: flex; }
body[data-sidebar="sidebar"] .sidebar.collapsed .sidebar-brand-collapsed { display: none; }
body[data-sidebar="sidebar"] .sidebar.collapsed .sidebar-nav { display: block; }
body[data-sidebar="sidebar"] .sidebar.collapsed .sidebar-nav-icons { display: none; }
body[data-sidebar="sidebar"] .sidebar.collapsed .sidebar-footer { justify-content: flex-start; padding: 12px 16px; gap: 10px; }
body[data-sidebar="sidebar"] .sidebar.collapsed .avatar-info { display: flex; }
body[data-sidebar="sidebar"] .sidebar.collapsed .entity-chevron { display: flex; }

/* ============================================================
   LAYOUT MODES
============================================================ */
body[data-layout="compact"] .page-content {
  padding: 12px !important;
  gap: 8px !important;
}
body[data-layout="compact"] .section-card { padding: 12px !important; }
body[data-layout="compact"] .page-header  { margin-bottom: 12px !important; }

body[data-layout="full"] .page-content {
  padding: 20px 32px !important;
}