/**
 * style.css
 * ---------------------------------------------------------------
 * Semua styling dashboard Tricom Digital dalam satu file.
 *
 * Struktur (cari pakai section comment di bawah ini):
 *   1. Design tokens (:root)      -> variabel warna/spacing, mode terang
 *   2. Dark mode ([data-theme])   -> override variabel yang sama utk gelap
 *   3. Layout dasar               -> sidebar, topbar, konten, grid
 *   4. Komponen umum              -> kpi, panel, tabel, badge, pill, form
 *   5. Fitur spesifik             -> login, client selector, report
 *      Instagram/GSC, dashboard AE, dst (masing-masing ada section
 *      comment sendiri, contoh: "AE PROSPECTING DASHBOARD (scoped)")
 *   6. Responsive (@media)        -> di bagian paling bawah file
 *
 * Catatan penamaan class:
 *   - Beberapa nama class kelihatan spesifik ke satu fitur padahal
 *     sebenarnya dipakai bareng di banyak tempat (technical debt dari
 *     iterasi awal pengembangan), contoh:
 *       .job-form   -> dipakai buat SEMUA form kecil (job/project/
 *                      channel/AE), bukan cuma "job"
 *       .job-empty  -> dipakai sebagai teks "belum ada data" generik
 *                      di HAMPIR SEMUA tabel di seluruh dashboard
 *       .job-del    -> tombol hapus (x) generik, dipakai di project/
 *                      user/AE juga
 *     Nama-nama ini SENGAJA tidak diganti saat perapian struktur ini
 *     karena resikonya tinggi (dipakai di puluhan tempat) dan tidak
 *     mempengaruhi fungsi -- cuma soal penamaan.
 */

:root{
    --ink:#0D0D0E;
    --paper:#F7F5F0;
    --card:#FFFFFF;
    --side:#FFFFFF;
    --line:#E7E3DA;
    --text:#14151A;
    --muted:#787C84;
    --muted-2:#9CA0A6;

    --blue:#3AA0C9;
    --blue-soft:#DEF1F8;
    --gold:#C99A05;
    --gold-soft:#FBF0CB;
    --coral:#FF6B4A;
    --coral-soft:#FFE4DA;
    --teal:#1FAE7A;
    --teal-soft:#D9F3E9;

    --embed-a:#F1EEE6;
    --embed-b:#F7F5F0;
    --embed-border:#C9C4B6;

    --good-bg:#DFF4E7; --good-fg:#1F9D5A;
    --warn-bg:#FFF1D6; --warn-fg:#B5790C;
    --bad-bg:#FDE1DD;  --bad-fg:#E14A3C;

    --btn-bg:var(--ink); --btn-fg:#FFFFFF;
    --logo-chip:transparent;

    --radius:14px;

    /* spacing scale */
    --sp-1:8px; --sp-2:12px; --sp-3:16px; --sp-4:20px;
    --sp-5:24px; --sp-6:32px; --sp-7:40px; --sp-8:48px;
  }

  [data-theme="dark"]{
    --paper:#121214;
    --card:#1B1C20;
    --side:#17181C;
    --line:#2C2D33;
    --text:#F2F1ED;
    --muted:#9A9CA3;
    --muted-2:#6E7078;

    --embed-a:#1F2025;
    --embed-b:#17181C;
    --embed-border:#33343C;

    --good-bg:rgba(47,190,122,0.16); --good-fg:#4ADE80;
    --warn-bg:rgba(201,154,5,0.18);  --warn-fg:#F2C14E;
    --bad-bg:rgba(255,107,74,0.16);  --bad-fg:#FF8B72;

    --btn-bg:#F2F1ED; --btn-fg:#14151A;
    --logo-chip:#FFFFFF;
  }

  [data-theme="dark"] .hero{ border:1px solid var(--line); }

  *{box-sizing:border-box; margin:0; padding:0;}
  html{-webkit-font-smoothing:antialiased;}
  body{
    background:var(--paper);
    color:var(--text);
    font-family:'Inter',sans-serif;
    display:flex;
    min-height:100vh;
  }
  @media (prefers-reduced-motion: reduce){
    *{animation:none !important; transition:none !important;}
  }
  :focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }

  h1,h2,h3,.display{ font-family:'Space Grotesk',sans-serif; letter-spacing:-0.01em; }
  .mono{font-family:'JetBrains Mono',monospace;}

  /* ---------- SIDEBAR ---------- */
  .sidebar{
    width:252px;
    flex-shrink:0;
    background:var(--side);
    border-right:1px solid var(--line);
    display:flex;
    flex-direction:column;
    padding:var(--sp-6) var(--sp-4) var(--sp-5);
    position:sticky;
    top:0;
    height:100vh;
  }
  .brand{ margin-bottom:var(--sp-7); padding:0 var(--sp-1); }
  .brand-chip{
    display:inline-flex; align-items:center;
    padding:6px 10px; border-radius:10px;
    background:var(--logo-chip);
    transition:background .15s ease;
  }
  .brand img{ height:34px; width:auto; display:block; }

  nav{display:flex; flex-direction:column; gap:3px;}
  .nav-label{
    font-size:10.5px; color:var(--muted-2); text-transform:uppercase;
    letter-spacing:0.1em; margin:0 var(--sp-2) var(--sp-2);
  }
  .nav-btn{
    display:flex; align-items:center; gap:10px;
    padding:11px var(--sp-2); border-radius:10px; border:none;
    background:transparent; color:#4B4E57;
    font-family:'Inter',sans-serif; font-size:13.5px; font-weight:500;
    text-align:left; cursor:pointer; width:100%;
    transition:background .15s ease, color .15s ease;
  }
  .nav-btn:hover{background:var(--paper); color:var(--text);}
  .nav-btn.active{background:var(--paper); color:var(--text); font-weight:600;}
  .nav-dot{ width:8px; height:8px; border-radius:50%; background:#D6D2C6; flex-shrink:0; }
  .nav-btn[data-div="overview"].active .nav-dot{background:var(--ink);}
  .nav-btn[data-div="inventory"].active .nav-dot{background:var(--gold);}
  .nav-btn[data-div="ecommerce"].active .nav-dot{background:var(--coral);}
  .nav-btn[data-div="digital"].active .nav-dot{background:var(--blue);}
  .nav-btn[data-div="it"].active .nav-dot{background:var(--teal);}
  .nav-btn[data-div="ae"].active .nav-dot{background:var(--gold);}

  .sidebar-footer{
    margin-top:auto; padding-top:var(--sp-4);
    border-top:1px solid var(--line);
    font-size:11px; color:var(--muted-2);
  }
  .sidebar-footer strong{color:var(--muted); display:block; margin-bottom:2px; font-weight:600;}

  /* ---------- MAIN ---------- */
  main{flex:1; min-width:0;}
  .topbar{
    display:flex; align-items:center; justify-content:space-between;
    padding:var(--sp-6) var(--sp-7) var(--sp-5);
    border-bottom:1px solid var(--line);
    flex-wrap:wrap; gap:var(--sp-3);
  }
  .topbar h1{font-size:24px; font-weight:700;}
  .topbar .eyebrow{
    font-size:11px; color:var(--muted); text-transform:uppercase;
    letter-spacing:0.08em; margin-bottom:4px;
  }
  .topbar-right{display:flex; align-items:center; gap:var(--sp-2);}
  .pill{
    font-size:12px; padding:7px 13px; border-radius:999px;
    background:var(--card); border:1px solid var(--line);
    color:var(--muted); font-weight:500;
  }
  .pill.status{display:flex; align-items:center; gap:6px;}
  .pill.status .dot{width:6px; height:6px; border-radius:50%; background:#2FBE7A;}

  .theme-toggle{
    width:32px; height:32px; border-radius:999px;
    border:1px solid var(--line); background:var(--card);
    color:var(--text); display:flex; align-items:center; justify-content:center;
    cursor:pointer; flex-shrink:0;
    transition:background .15s ease, border-color .15s ease;
  }
  .theme-toggle:hover{background:var(--paper);}
  .theme-toggle .icon-sun{display:none;}
  [data-theme="dark"] .theme-toggle .icon-sun{display:block;}
  [data-theme="dark"] .theme-toggle .icon-moon{display:none;}

  .content{padding:var(--sp-6) var(--sp-7) var(--sp-8);}
  .view{display:none;}
  .view.active{display:block; animation:fade .25s ease;}
  @keyframes fade{from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:translateY(0);}}

  /* ---------- OVERVIEW HERO ---------- */
  .hero{
    position:relative;
    background:var(--ink);
    border-radius:20px;
    padding:var(--sp-7);
    color:#fff;
    overflow:hidden;
    margin-bottom:var(--sp-5);
  }
  .hero-mark{
    position:absolute; right:var(--sp-6); top:50%; transform:translateY(-50%);
    opacity:0.16; height:180px; width:auto;
  }
  .hero h2{font-size:26px; font-weight:700; max-width:480px; margin-bottom:var(--sp-2);}
  .hero p{color:#B7B9BF; font-size:13.5px; max-width:420px; margin-bottom:var(--sp-6); line-height:1.6;}
  .hero-stats{display:flex; gap:var(--sp-7); flex-wrap:wrap; position:relative;}
  .hero-stat .num{font-family:'JetBrains Mono',monospace; font-size:26px; font-weight:600;}
  .hero-stat .lbl{font-size:11.5px; color:#9A9CA3; margin-top:4px;}

  .div-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:var(--sp-4);
    margin-bottom:var(--sp-2);
  }
  .div-card{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:var(--sp-5);
    cursor:pointer;
    transition:transform .15s ease, box-shadow .15s ease;
    border-top:3px solid var(--accent);
  }
  .div-card:hover{transform:translateY(-3px); box-shadow:0 14px 26px -16px rgba(20,21,26,0.28);}
  .div-card .tag{
    font-size:10.5px; text-transform:uppercase; letter-spacing:0.08em;
    color:var(--accent); font-weight:700; margin-bottom:var(--sp-2);
  }
  .div-card h3{font-size:16px; margin-bottom:var(--sp-4); line-height:1.3; font-weight:500;}
  .div-card .metric-row{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px;}
  .div-card .metric-row .v{font-family:'JetBrains Mono',monospace; font-weight:600; font-size:13.5px;}
  .div-card .metric-row .k{font-size:12px; color:var(--muted);}
  .div-card .delta{font-size:11.5px; font-weight:600; margin-top:var(--sp-3); display:inline-block;}
  .delta.up{color:#1F9D5A;}
  .delta.down{color:#E14A3C;}
  .div-card .ov-count{font-family:'JetBrains Mono',monospace; font-size:26px; font-weight:600; line-height:1;}
  .div-card .ov-count-label{font-size:11.5px; color:var(--muted); margin-top:4px;}

  /* ---------- KPI ROW ---------- */
  .kpi-row{
    display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
    gap:var(--sp-3); margin-bottom:var(--sp-4);
  }
  .kpi{
    background:var(--card); border:1px solid var(--line);
    border-radius:var(--radius); padding:var(--sp-4) var(--sp-4);
  }
  .kpi .k{font-size:12px; color:var(--muted); margin-bottom:var(--sp-2);}
  .kpi .v{font-family:'JetBrains Mono',monospace; font-size:23px; font-weight:600;}
  .kpi .d{font-size:11.5px; margin-top:var(--sp-2); font-weight:600;}

  /* ---------- PANEL LAYOUT ---------- */
  .panel-grid{
    display:grid; grid-template-columns:2fr 1fr;
    gap:var(--sp-4); margin-bottom:var(--sp-4);
  }
  .panel{
    background:var(--card); border:1px solid var(--line);
    border-radius:var(--radius); padding:var(--sp-5);
  }
  .panel-head{
    display:flex; justify-content:space-between; align-items:center;
    margin-bottom:var(--sp-4);
  }
  .panel-head h3{font-size:14.5px; font-weight:600;}
  .panel-head .mini-pill{font-size:10.5px; color:var(--muted); border:1px solid var(--line); padding:3px 10px; border-radius:999px;}

  .embed-slot{
    border:1.5px dashed var(--embed-border); border-radius:12px;
    min-height:260px; display:flex; flex-direction:column;
    align-items:center; justify-content:center; text-align:center;
    padding:var(--sp-5); color:var(--muted); gap:var(--sp-2);
    background:repeating-linear-gradient(135deg, var(--embed-a) 0px, var(--embed-a) 10px, var(--embed-b) 10px, var(--embed-b) 20px);
  }
  .embed-slot .icon{
    width:38px; height:38px; border-radius:10px;
    background:var(--card); border:1px solid var(--line);
    display:flex; align-items:center; justify-content:center;
  }
  .embed-slot .title{font-size:12.5px; font-weight:600; color:var(--text);}
  .embed-slot .sub{font-size:11.5px; max-width:220px; line-height:1.5;}

  /* ---------- TABLE ---------- */
  table{width:100%; border-collapse:collapse;}
  thead th{
    text-align:left; font-size:10.5px; text-transform:uppercase;
    letter-spacing:0.06em; color:var(--muted);
    padding:0 var(--sp-1) var(--sp-2);
    border-bottom:1px solid var(--line); font-weight:600;
  }
  tbody td{ padding:13px var(--sp-1); font-size:13px; border-bottom:1px solid #F0EEE7; }
  tbody td.mono{font-family:'JetBrains Mono',monospace; font-size:12.5px;}
  tbody tr:last-child td{border-bottom:none;}
  .badge{ font-size:10.5px; font-weight:600; padding:3px 10px; border-radius:999px; }
  .badge.good{background:var(--good-bg); color:var(--good-fg);}
  .badge.warn{background:var(--warn-bg); color:var(--warn-fg);}
  .badge.bad{background:var(--bad-bg); color:var(--bad-fg);}

  body:not(.authed) .sidebar,
  body:not(.authed) main{
    display:none;
  }
  body.authed #loginOverlay{
    display:none;
  }

  /* ---------- LOGIN OVERLAY ---------- */
  #loginOverlay{
    position:fixed; inset:0; z-index:100;
    background:var(--paper);
    display:flex; align-items:center; justify-content:center;
    padding:var(--sp-4);
  }
  .login-card{
    width:100%; max-width:360px;
    background:var(--card); border:1px solid var(--line);
    border-radius:20px; padding:var(--sp-7) var(--sp-6);
  }
  .login-card .brand-chip{ padding:0; margin-bottom:var(--sp-6); }
  .login-card img{ height:32px; width:auto; }
  .login-card h2{ font-size:20px; font-weight:700; margin-bottom:var(--sp-1); }
  .login-card p.sub{ font-size:12.5px; color:var(--muted); margin-bottom:var(--sp-5); }
  .login-field{ margin-bottom:var(--sp-3); }
  .login-field label{
    display:block; font-size:11.5px; font-weight:600; color:var(--muted);
    margin-bottom:6px; text-transform:uppercase; letter-spacing:0.04em;
  }
  .login-field input{
    width:100%; font-family:'Inter',sans-serif; font-size:14px;
    padding:11px 13px; border:1px solid var(--line); border-radius:10px;
    background:var(--paper); color:var(--text);
  }
  .login-error{
    display:none;
    font-size:12.5px; color:var(--bad-fg); background:var(--bad-bg);
    padding:9px 12px; border-radius:9px; margin-bottom:var(--sp-3);
  }
  .login-error.show{ display:block; }
  .login-submit{
    width:100%; font-family:'Inter',sans-serif; font-size:14px; font-weight:600;
    padding:12px; border:none; border-radius:10px; margin-top:var(--sp-2);
    background:var(--btn-bg); color:var(--btn-fg); cursor:pointer;
  }
  .login-submit:hover{ opacity:0.9; }
  .login-submit:disabled{ opacity:0.6; cursor:default; }

  /* ---------- USER BADGE / LOGOUT ---------- */
  .user-badge{
    display:flex; align-items:center; justify-content:space-between;
    gap:var(--sp-2); margin-bottom:var(--sp-3); padding-bottom:var(--sp-3);
    border-bottom:1px solid var(--line);
  }
  .user-badge .who{ min-width:0; }
  .user-badge .name{ font-size:13px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .user-badge .role{ font-size:11px; color:var(--muted-2); text-transform:capitalize; }
  .logout-btn{
    flex-shrink:0; border:1px solid var(--line); background:var(--card);
    color:var(--muted); font-size:11px; font-weight:600;
    padding:6px 10px; border-radius:8px; cursor:pointer;
  }
  .logout-btn:hover{ background:var(--paper); color:var(--text); }

  .nav-btn.admin-only{ display:none; }
  body.is-admin .nav-btn.admin-only{ display:flex; }
  .admin-only{ display:none; }
  body.is-admin .admin-only{ display:inline-flex; }
  .sync-all-row{ display:flex; justify-content:flex-end; margin:-6px 0 var(--sp-3); }

  /* ---------- USER MANAGEMENT PANEL ---------- */
  .user-form{
    display:flex; flex-wrap:wrap; gap:var(--sp-2);
    margin-bottom:var(--sp-4); padding-bottom:var(--sp-4);
    border-bottom:1px solid var(--line);
  }
  .user-form input, .user-form select{
    font-family:'Inter',sans-serif; font-size:13px;
    padding:9px 12px; border:1px solid var(--line); border-radius:9px;
    background:var(--paper); color:var(--text);
  }
  .user-form input[name="name"]{flex:1 1 160px;}
  .user-form input[name="username"]{flex:1 1 140px;}
  .user-form input[name="password"]{flex:1 1 140px;}
  .user-form select{flex:0 1 150px;}
  .user-form button{
    flex:0 0 auto; font-family:'Inter',sans-serif; font-size:13px; font-weight:600;
    padding:9px 18px; border:none; border-radius:9px;
    background:var(--btn-bg); color:var(--btn-fg); cursor:pointer;
  }
  .user-form-error{
    display:none; width:100%; font-size:12px; color:var(--bad-fg);
    background:var(--bad-bg); padding:8px 11px; border-radius:8px; margin-top:4px;
  }
  .user-form-error.show{ display:block; }

  .chart-wrap{height:220px;}

  /* ---------- PROJECT ROW INLINE EDIT ---------- */
  .proj-input{
    width:100%; font-family:'Inter',sans-serif; font-size:12.5px;
    padding:6px 8px; border:1px solid var(--line); border-radius:7px;
    background:var(--paper); color:var(--text);
    position:relative; z-index:1; pointer-events:auto;
  }
  input[type="datetime-local"].proj-input{
    color-scheme: dark light; /* biar ikon kalender native-nya kelihatan & bisa diklik di dark mode */
  }
  .proj-input-narrow{ width:60px; }
  .proj-save-btn, .proj-cancel-btn{
    font-family:'Inter',sans-serif; font-size:11.5px; font-weight:600;
    padding:6px 10px; border-radius:7px; border:none; cursor:pointer;
  }
  .proj-save-btn{ background:var(--btn-bg); color:var(--btn-fg); margin-right:4px; }
  .proj-cancel-btn{ background:transparent; color:var(--muted-2); border:1px solid var(--line); }
  .proj-edit-trigger:hover{ opacity:0.75; }

  /* ---------- CLIENT BRAND SELECTOR ---------- */
  .client-selector{
    display:flex; align-items:center; gap:8px; flex-wrap:wrap;
    margin-bottom:var(--sp-4);
  }
  .client-chip{
    font-family:'Inter',sans-serif; font-size:12.5px; font-weight:600;
    padding:8px 16px; border-radius:999px; border:1px solid var(--line);
    background:var(--card); color:var(--muted); cursor:pointer;
    display:flex; align-items:center; gap:8px;
    transition:background .15s ease, color .15s ease, border-color .15s ease;
  }
  .client-chip:hover{ background:var(--paper); color:var(--text); }
  .client-chip.active{
    background:var(--ink); border-color:var(--ink); color:#fff;
  }
  [data-theme="dark"] .client-chip.active{ background:var(--btn-bg); border-color:var(--btn-bg); color:var(--btn-fg); }
  .client-chip .chip-del{
    font-size:13px; line-height:1; opacity:0.6;
  }
  .client-chip .chip-del:hover{ opacity:1; }
  .client-chip .chip-edit{
    font-size:11.5px; line-height:1; opacity:0.6;
  }
  .client-chip .chip-edit:hover{ opacity:1; }
  .client-chip[draggable="true"]{ cursor:grab; }
  .client-chip.dragging{ opacity:0.4; cursor:grabbing; }
  .client-add-btn{
    font-family:'Inter',sans-serif; font-size:12.5px; font-weight:600;
    padding:8px 14px; border-radius:999px; border:1.5px dashed var(--embed-border);
    background:transparent; color:var(--muted); cursor:pointer;
  }
  .client-add-btn:hover{ color:var(--text); border-color:var(--muted-2); }

  /* ---------- DIGITAL SUB-TABS ---------- */
  .subtab-row{
    display:flex; gap:4px; margin-bottom:var(--sp-4);
    border-bottom:1px solid var(--line);
  }
  .subtab-btn{
    font-family:'Inter',sans-serif; font-size:13px; font-weight:600;
    padding:10px 16px; border:none; background:transparent; color:var(--muted);
    cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px;
  }
  .subtab-btn:hover{ color:var(--text); }
  .subtab-btn.active{ color:var(--text); border-bottom-color:var(--blue); }
  .digital-subview{ display:none; }
  .digital-subview.active{ display:block; }
  .it-subview{ display:none; }
  .it-subview.active{ display:block; }
  .ecommerce-subview{ display:none; }
  .ecommerce-subview.active{ display:block; }
  .inventory-note{color:var(--muted); font-size:12px; margin:-4px 0 var(--sp-4);}

  /* ---- Data Inventory: search, scan, import, All Brand ---- */
  .client-chip-all{ font-weight:700; }
  .sample-search-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
  .sample-search-row .ae-search{ margin-bottom:0; flex:1 1 260px; }
  .sample-scan-box{ position:relative; }
  .sample-scan-box .proj-input{ padding-left:36px; font-family:'JetBrains Mono',monospace; font-size:13.5px; height:42px; }
  .sample-scan-box .proj-input:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(58,160,201,0.22); }
  .sample-scan-icon{ position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--muted); font-size:15px; pointer-events:none; }
  .sample-scan-status{ font-size:12px; color:var(--muted); margin-top:6px; min-height:16px; }
  .sample-scan-status.ok{ color:var(--good-fg); font-weight:600; }
  .sample-scan-status.warn{ color:var(--warn-fg); font-weight:600; }
  .sample-scan-status.err{ color:var(--bad-fg); font-weight:600; }
  .sample-flash{ background:var(--good-bg); color:var(--good-fg); border-radius:9px; padding:10px 12px; font-size:12.5px; font-weight:600; margin-bottom:14px; }
  .sample-import-result{ margin-top:14px; border:1px solid var(--good-fg); background:var(--good-bg); border-radius:12px; padding:14px 16px; }
  .sample-import-result-head{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
  .sample-import-result .k{ font-size:11.5px; color:var(--muted); }
  .sample-import-result .v{ font-size:19px; font-weight:700; color:var(--text); margin-top:2px; }
  .sample-import-result-meta{ display:flex; flex-wrap:wrap; gap:6px 16px; font-size:12px; color:var(--text); margin-top:10px; }
  .sample-ba-btn{ margin-top:10px; background:transparent !important; color:var(--blue) !important; border:1px solid var(--line) !important; }
  .sample-kpi-sub{ font-size:13px; color:var(--muted); font-weight:500; }
  .sample-summary-row{ cursor:pointer; }
  .sample-summary-row:hover td{ background:var(--paper); }
  .sample-summary-table tfoot td{ font-weight:700; border-top:2px solid var(--line); padding-top:10px; }
  .sample-share{ display:flex; align-items:center; gap:8px; min-width:150px; }
  .sample-share-bar{ flex:1; height:6px; border-radius:99px; background:var(--line); overflow:hidden; }
  .sample-share-bar span{ display:block; height:100%; background:var(--gold); border-radius:99px; }

  /* ---- Data Inventory: daftar multi-SKU (Keluar/Transfer/Terjual) ---- */
  .sample-add-row{ display:flex; gap:8px; margin:10px 0 14px; }
  .sample-add-row select{ flex:1; min-width:0; }
  .sample-add-row .proj-save-btn{ white-space:nowrap; }
  .sample-cart-empty{ border:1px dashed var(--line); border-radius:10px; padding:16px; text-align:center; font-size:12.5px; color:var(--muted); }
  .sample-cart-table td{ vertical-align:middle; }
  .sample-cart-table .sample-cart-qty{ width:84px; text-align:right; margin-left:auto; display:block; }
  .sample-cart-over .sample-cart-qty{ border-color:var(--bad-fg); }
  .sample-cart-warn{ font-size:10.5px; color:var(--bad-fg); margin-top:3px; }
  .sample-cart-summary{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; font-size:12.5px; margin-top:8px; }
  .sample-cart-clear{ margin-left:auto; background:none; border:none; color:var(--bad-fg); font-size:12px; cursor:pointer; padding:0; }

  /* ---- Data Inventory: kartu Top Stock (All Brand) ---- */

  /* ---- Data Inventory: import Excel di Keluar/Transfer/Terjual ---- */
  .sample-batch-import{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
  .sample-batch-import-label{ font-size:11.5px; color:var(--muted); }
  .sample-batch-import-btn{ font-family:'Inter',sans-serif; font-size:11.5px; font-weight:600; padding:6px 11px; border-radius:8px; border:1px solid var(--line); background:transparent; color:var(--blue); cursor:pointer; display:inline-flex; align-items:center; gap:6px; }
  .sample-batch-import-btn:hover{ background:var(--paper); }

  /* ---- Data Inventory: blok data Sales Order (tab Terjual) ---- */
  .sample-so-fields{ border:1px solid var(--line); border-radius:12px; background:var(--paper); padding:13px 14px 14px; margin-bottom:12px; }
  .sample-so-head{ font-size:12.5px; font-weight:700; color:var(--text); margin-bottom:10px; }
  .sample-so-head span{ font-weight:500; font-size:11px; color:var(--muted); margin-left:6px; }

  /* ---- All Brand: kartu stok (saldo awal -> mutasi -> saldo akhir) ---- */
  .sample-card-periode{ font-size:11.5px; color:var(--muted); margin:0 0 10px; }
  .sample-card-table th{ white-space:nowrap; }
  .sample-card-table td.sample-card-in{ color:var(--good-fg); }
  .sample-card-table td.sample-card-out{ color:var(--coral); }
  .sample-card-table td.sample-card-muted{ color:var(--muted); }
  .sample-card-table tfoot td{ font-weight:700; }

  /* ---- Data Inventory: Riwayat per dokumen (accordion) ---- */
  .sample-hist-doc{ border:1px solid var(--line); border-radius:12px; background:var(--card); margin-bottom:10px; overflow:hidden; }
  .sample-hist-doc.open{ border-color:var(--muted-2); }
  .sample-hist-head{ all:unset; box-sizing:border-box; display:flex; align-items:center; gap:12px; width:100%; padding:13px 16px; cursor:pointer; }
  .sample-hist-head:hover{ background:var(--paper); }
  .sample-hist-title{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
  .sample-hist-number{ font-weight:700; font-size:14px; color:var(--text); overflow-wrap:anywhere; }
  .sample-hist-sub{ font-size:11.5px; color:var(--muted); }
  .sample-hist-chevron{ color:var(--muted); font-size:11px; }
  .sample-hist-body{ padding:4px 16px 16px; border-top:1px solid var(--line); }
  .sample-hist-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:10px 16px; font-size:12.5px; padding-top:12px; }
  .sample-hist-label{ display:block; font-size:11px; color:var(--muted); margin-bottom:2px; }
  .sample-hist-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:4px; }
  .sample-hist-actions .sample-ba-btn{ margin-top:10px; }
  .sample-hist-link{ margin-top:10px; font-size:12px; color:var(--blue); }
  .sample-hist-photo{ display:block; max-width:220px; border-radius:8px; margin-top:12px; }
  .sample-hist-products-toggle{ all:unset; box-sizing:border-box; display:flex; justify-content:space-between; align-items:center; gap:10px; width:100%; margin-top:14px; padding:10px 12px; border:1px dashed var(--line); border-radius:9px; cursor:pointer; font-size:13px; font-weight:600; color:var(--text); }
  .sample-hist-products-toggle:hover{ background:var(--paper); }
  .sample-hist-products{ margin-top:10px; }

  /* ---- Data Inventory: kolom qty tanpa panah naik-turun ---- */
  #sample-inventory-root input[type="number"]{ -moz-appearance:textfield; appearance:textfield; }
  #sample-inventory-root input[type="number"]::-webkit-outer-spin-button,
  #sample-inventory-root input[type="number"]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

  /* ---- Data Inventory: filter tanggal Riwayat ---- */
  .sample-date-filter{ display:flex; justify-content:space-between; align-items:center; gap:10px 16px; flex-wrap:wrap; padding:12px 0 14px; margin-bottom:14px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
  .sample-date-presets{ display:flex; gap:6px; flex-wrap:wrap; }
  .sample-date-chip{ font-family:'Inter',sans-serif; font-size:12px; font-weight:600; padding:6px 11px; border-radius:999px; border:1px solid var(--line); background:transparent; color:var(--muted); cursor:pointer; }
  .sample-date-chip:hover{ color:var(--text); }
  .sample-date-chip.active{ background:var(--text); color:var(--paper); border-color:var(--text); }
  .sample-date-range{ display:flex; gap:10px; flex-wrap:wrap; }
  .sample-date-range label{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); }
  .sample-date-range .proj-input{ width:auto; color-scheme:light dark; }
  .sample-history-summary{ display:flex; gap:8px 16px; flex-wrap:wrap; font-size:12px; margin-bottom:12px; }
  .ae-subview{ display:none; }
  .ae-subview.active{ display:block; }

  /* ---------- GSC WEBSITE PERFORMANCE REPORT ---------- */
  .gsc-hero{
    background:linear-gradient(120deg, #0F766E, #1FAE7A 55%, #3AA0C9);
    border-radius:20px; padding:var(--sp-6); color:#fff;
    display:flex; justify-content:space-between; align-items:flex-start;
    gap:var(--sp-4); flex-wrap:wrap; margin-bottom:var(--sp-4);
  }
  .gsc-hero h2{ font-size:20px; font-weight:700; margin-bottom:2px; }
  .gsc-hero .gsc-site{ font-size:13px; opacity:0.85; }
  .gsc-hero .gsc-meta{ font-size:11.5px; opacity:0.75; margin-top:10px; line-height:1.6; }

  .trend-tooltip{
    position:absolute; pointer-events:none; z-index:5;
    background:var(--card); color:var(--text); border:1px solid var(--line);
    font-size:11.5px; line-height:1.5; min-width:150px;
    padding:10px 13px; border-radius:10px; white-space:nowrap;
    box-shadow:0 12px 28px -10px rgba(20,21,26,0.25);
    opacity:0; transition:opacity .1s ease;
  }
  .trend-tooltip.show{ opacity:1; }

  /* ---------- INSTAGRAM AUDIT REPORT ---------- */
  .ig-hero{
    background:linear-gradient(120deg, #4C3BCF, #7C5CFC 55%, #3AA0C9);
    border-radius:20px; padding:var(--sp-6); color:#fff;
    display:flex; justify-content:space-between; align-items:flex-start;
    gap:var(--sp-4); flex-wrap:wrap; margin-bottom:var(--sp-4);
  }
  .ig-hero h2{ font-size:20px; font-weight:700; margin-bottom:2px; }
  .ig-hero .ig-handle{ font-size:13px; opacity:0.85; }
  .ig-hero .ig-meta{ font-size:11.5px; opacity:0.75; margin-top:10px; line-height:1.6; }
  .sync-btn{
    font-family:'Inter',sans-serif; font-size:12.5px; font-weight:600;
    padding:9px 20px; border-radius:999px;
    border:1px solid rgba(255,255,255,0.4);
    background:linear-gradient(135deg, rgba(99,102,241,0.35), rgba(56,189,248,0.22));
    backdrop-filter:blur(16px) saturate(180%);
    -webkit-backdrop-filter:blur(16px) saturate(180%);
    color:var(--text); cursor:pointer;
    box-shadow:0 4px 18px -6px rgba(76,92,246,0.35), inset 0 1px 0 rgba(255,255,255,0.5);
    transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  }
  .sync-btn:hover{
    transform:translateY(-1px);
    background:linear-gradient(135deg, rgba(99,102,241,0.48), rgba(56,189,248,0.32));
    box-shadow:0 8px 22px -6px rgba(76,92,246,0.45), inset 0 1px 0 rgba(255,255,255,0.6);
  }
  .sync-btn:active{ transform:translateY(0) scale(0.98); }
  .sync-btn:disabled{ opacity:0.5; cursor:default; transform:none; box-shadow:none; }
  [data-theme="dark"] .sync-btn{ color:#fff; }

  .ig-hero-right{
    background:rgba(255,255,255,0.12); border-radius:12px; padding:12px 16px;
    font-size:11.5px; text-align:right; backdrop-filter:blur(4px);
  }
  .ig-hero-right .sync-btn{
    margin-top:8px; font-size:11.5px; font-weight:600; padding:7px 16px;
    border-radius:999px; border:1px solid rgba(255,255,255,0.5);
    background:rgba(255,255,255,0.18); backdrop-filter:blur(10px) saturate(180%);
    -webkit-backdrop-filter:blur(10px) saturate(180%);
    color:#fff; cursor:pointer;
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.4);
  }
  .ig-hero-right .sync-btn:hover{ background:rgba(255,255,255,0.28); transform:translateY(-1px); }

  .ig-kpi-row{
    display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
    gap:var(--sp-3); margin-bottom:var(--sp-4);
  }
  .ig-kpi{
    background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
    padding:var(--sp-4);
  }
  .ig-kpi .k{ font-size:11.5px; color:var(--muted); margin-bottom:8px; }
  .ig-kpi .v{ font-family:'JetBrains Mono',monospace; font-size:21px; font-weight:600; }
  .ig-kpi .d{ font-size:11px; margin-top:6px; font-weight:600; }

  .ig-compare-grid{ display:grid; grid-template-columns:2fr 1fr; gap:var(--sp-4); margin-bottom:var(--sp-4); }
  .ig-compare-table{ width:100%; border-collapse:collapse; }
  .ig-compare-table th{ text-align:left; font-size:10.5px; text-transform:uppercase; color:var(--muted); padding:0 4px 8px; }
  .ig-compare-table td{ padding:10px 4px; font-size:13px; border-top:1px solid var(--line); }
  .ig-note{ background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:var(--sp-4); font-size:12px; color:var(--muted); line-height:1.6; }

  .ig-content-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:var(--sp-3); margin-bottom:var(--sp-4); }
  .ig-content-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:var(--sp-4); border-top:3px solid var(--blue); }
  .ig-content-card .type{ font-size:11px; font-weight:700; text-transform:uppercase; color:var(--blue); margin-bottom:6px; }
  .ig-content-card .count{ font-size:11.5px; color:var(--muted); margin-bottom:10px; }
  .ig-content-card .stat-row{ display:flex; justify-content:space-between; font-size:12px; margin-bottom:4px; }

  .insight-panel{
    background:linear-gradient(145deg, rgba(76,92,246,0.06), rgba(255,107,90,0.04));
    border:1px solid var(--line); border-radius:var(--radius); padding:var(--sp-5); margin-bottom:var(--sp-4);
  }
  .insight-panel-head{ display:flex; align-items:center; gap:10px; margin-bottom:16px; }
  .insight-panel-head .icon{ font-size:22px; }
  .insight-panel-head h3{ font-size:15px; margin:0; }
  .insight-panel-head .sub{ font-size:11px; color:var(--muted); margin-top:3px; line-height:1.4; }
  .insight-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:14px; }
  .insight-card{
    background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px 18px;
  }
  .insight-card .ihead{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; gap:8px; }
  .insight-card .ititle{ font-size:12px; font-weight:700; color:var(--text); white-space:nowrap; }
  .insight-card .imetric{ font-family:'JetBrains Mono',monospace; font-size:24px; font-weight:700; margin-bottom:8px; line-height:1; }
  .insight-card .itext{ font-size:12px; color:var(--muted); line-height:1.5; }
  .insight-card .itext b{ color:var(--text); font-weight:600; }
  .insight-spotlight{
    margin-top:16px; padding:14px 16px; border-radius:10px; background:var(--embed-a);
    font-size:12px; color:var(--muted); line-height:1.6;
  }
  .insight-spotlight b{ color:var(--text); }
  .insight-spotlight + .insight-spotlight{ margin-top:10px; }

  .ig-demo-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4); }
  .ig-bar-row{ margin-bottom:10px; }
  .ig-bar-row .lbl{ display:flex; justify-content:space-between; font-size:12px; margin-bottom:4px; }
  .ig-bar-track{ height:8px; border-radius:999px; background:var(--paper); overflow:hidden; }
  .ig-bar-fill{ height:100%; background:var(--blue); border-radius:999px; }

  .ig-empty{
    text-align:center; padding:var(--sp-8) var(--sp-4); color:var(--muted);
  }
  .ig-empty .icon{ font-size:28px; margin-bottom:12px; }

  /* ---------- AE PROSPECTING DASHBOARD (scoped) ---------- */
  .ae-dash{
    --ae-tan: var(--gold-soft);
    --ae-accent: var(--gold);
    --ae-accent2: var(--blue);
    font-size:14px;
  }
  .ae-dash .kpi-row{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-bottom:var(--sp-5); }
  .ae-dash .akpi{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; position:relative; overflow:hidden; }
  .ae-dash .akpi::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:var(--ae-accent2); }
  .ae-dash .akpi.warn::before{ background:var(--gold); } .ae-dash .akpi.danger::before{ background:var(--coral); } .ae-dash .akpi.good::before{ background:var(--teal); }
  .ae-dash .akpi .anum{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:28px; line-height:1; }
  .ae-dash .alabel{ font-size:12px; color:var(--muted); margin-top:6px; }

  .ae-dash .ae-toggle-row{ display:flex; gap:8px; margin-bottom:var(--sp-4); }
  .ae-dash .ghost-btn{ border:1px solid var(--line); background:var(--card); padding:6px 13px; border-radius:20px; font-size:12px; font-weight:600; color:var(--muted); cursor:pointer; font-family:'Inter',sans-serif; }
  .ae-dash .ghost-btn:hover{ border-color:var(--muted-2); color:var(--text); }

  .ae-dash section.ae-sec{ margin-bottom:var(--sp-6); }
  .ae-dash .sec-head{ display:flex; align-items:center; gap:10px; margin-bottom:12px; flex-wrap:wrap; }
  .ae-dash .sec-head h3{ font-size:15.5px; display:flex; align-items:center; gap:8px; margin:0; }
  .ae-dash .sec-dot{ width:8px; height:8px; border-radius:50%; background:var(--ae-accent2); flex:0 0 auto; }
  .ae-dash .sec-head .tag{ font-size:10.5px; background:var(--ae-accent2); color:#fff; padding:3px 9px; border-radius:20px; font-weight:600; }
  .ae-dash .sec-note{ font-size:12px; color:var(--muted); margin:-4px 0 12px; line-height:1.5; }
  .ae-dash .sec-toggle{
    background:none; border:none; cursor:pointer; font-size:11.5px; color:var(--muted);
    display:flex; align-items:center; gap:5px; margin-left:auto; padding:5px 10px; border-radius:20px;
    font-family:'Inter',sans-serif; font-weight:600;
  }
  .ae-dash .sec-toggle:hover{ background:var(--paper); color:var(--text); }
  .ae-dash .sec-toggle .chev{ display:inline-block; transition:transform .15s ease; font-size:9px; }
  .ae-dash .sec-toggle.collapsed .chev{ transform:rotate(-90deg); }
  .ae-dash .sec-body.collapsed{ display:none; }

  .ae-dash .pill{ display:inline-block; padding:3px 10px; border-radius:20px; font-size:11px; font-weight:600; white-space:nowrap; }
  .ae-dash .pill.overdue{ background:var(--bad-bg); color:var(--bad-fg); }
  .ae-dash .pill.due{ background:var(--warn-bg); color:var(--warn-fg); }
  .ae-dash .pill.soon{ background:var(--blue-soft); color:var(--blue); }
  .ae-dash .score-bar{ width:70px; height:7px; background:var(--paper); border-radius:6px; overflow:hidden; display:inline-block; vertical-align:middle; margin-right:8px; }
  .ae-dash .score-fill{ height:100%; background:var(--ae-accent2); }
  .ae-dash .tagchips span{ display:inline-block; font-size:10.5px; font-weight:700; padding:3px 8px; border-radius:5px; margin:1px 3px 1px 0; }
  .ae-dash .t-web{ background:var(--blue-soft); color:var(--blue); } .ae-dash .t-soc{ background:var(--coral-soft); color:var(--coral); }
  .ae-dash .t-com{ background:var(--gold-soft); color:var(--gold); } .ae-dash .t-vid{ background:var(--teal-soft); color:var(--teal); }
  .ae-dash .badge-done{ color:var(--teal); font-weight:700; font-size:12px; } .ae-dash .badge-todo{ color:var(--muted); font-size:12px; }

  .ae-dash .agrid2{ display:grid; grid-template-columns:1.3fr 1fr; gap:16px; }
  .ae-dash .agrid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
  .ae-dash .abars .row{ display:grid; grid-template-columns:150px 1fr 30px; align-items:center; gap:8px; margin:7px 0; font-size:12.5px; }
  .ae-dash .abars .track{ background:var(--paper); border-radius:5px; height:12px; overflow:hidden; }
  .ae-dash .abars .fill{ height:100%; background:var(--ae-accent2); }
  .ae-dash .abars .fill.b-green{ background:var(--teal); } .ae-dash .abars .fill.b-yellow{ background:var(--gold); } .ae-dash .abars .fill.b-grey{ background:var(--muted-2); }

  .abars .row{ display:grid; grid-template-columns:100px 1fr 30px; align-items:center; gap:8px; margin:7px 0; font-size:12.5px; }
  .abars .track{ background:var(--paper); border-radius:5px; height:10px; overflow:hidden; }
  .abars .fill{ height:100%; background:var(--blue); }

  .ae-dash .funnel{ display:flex; align-items:center; gap:0; }
  .ae-dash .fstep{ flex:1; background:var(--card); border:2px solid var(--ae-accent2); border-radius:12px; padding:14px 8px; text-align:center; min-width:0; }
  .ae-dash .fstep .n{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:22px; color:var(--ae-accent2); }
  .ae-dash .fstep .l{ font-size:10.5px; color:var(--muted); margin-top:2px; }
  .ae-dash .farrow{ flex:0 0 auto; padding:0 6px; color:var(--muted); font-size:16px; }

  .ae-dash .ae-search{ width:100%; max-width:340px; padding:9px 12px; border:1px solid var(--line); border-radius:9px; font-size:13px; font-family:'Inter',sans-serif; margin-bottom:12px; background:var(--paper); color:var(--text); }
  .ae-search{ width:100%; max-width:340px; padding:9px 12px; border:1px solid var(--line); border-radius:9px; font-size:13px; font-family:'Inter',sans-serif; margin-bottom:14px; background:var(--paper); color:var(--text); display:block; }
  .ae-dash .filter-row{ display:flex; gap:8px; margin-bottom:12px; flex-wrap:wrap; }
  .ae-dash .filter-row button{ border:1px solid var(--line); background:var(--card); padding:6px 12px; border-radius:20px; font-size:11.5px; cursor:pointer; font-family:'Inter',sans-serif; font-weight:600; color:var(--muted); }
  .ae-dash .filter-row button.active{ background:var(--ae-accent2); color:#fff; border-color:var(--ae-accent2); }
  .ae-dash .foot-note{ font-size:11px; color:var(--muted); margin-top:6px; }
  .ae-dash .ae-scroll{ max-height:460px; overflow:auto; }
  .ae-dash .empty-state{ padding:20px; text-align:center; color:var(--muted); font-size:13px; }

  .ae-dash .cta-btn{
    display:inline-block; background:var(--ae-accent2); color:#fff; border:none; padding:7px 13px;
    border-radius:20px; font-size:11.5px; font-weight:700; cursor:pointer; font-family:'Inter',sans-serif;
    white-space:nowrap; text-decoration:none;
  }
  .ae-dash .cta-btn:hover{ opacity:0.88; }
  .ae-dash .cta-note{ font-size:10px; color:var(--muted); display:block; margin-top:4px; }
  .ae-dash .legend-table td, .ae-dash .legend-table th{ font-size:12px; }
  .ae-dash table{ font-size:13px; }

  /* ---------- PERIOD + COMPARE CONTROLS ---------- */
  .report-controls{
    display:flex; align-items:center; justify-content:space-between;
    flex-wrap:wrap; gap:var(--sp-3); margin-bottom:var(--sp-4);
  }
  .period-group{ display:flex; gap:4px; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:3px; }
  .period-btn{
    font-family:'Inter',sans-serif; font-size:12px; font-weight:600;
    padding:7px 13px; border:none; border-radius:7px; background:transparent;
    color:var(--muted); cursor:pointer;
  }
  .period-btn.active{ background:var(--ink); color:#fff; }
  [data-theme="dark"] .period-btn.active{ background:var(--btn-bg); color:var(--btn-fg); }
  .compare-toggle{
    display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--muted); cursor:pointer; user-select:none;
  }
  .compare-toggle input{ width:16px; height:16px; accent-color:var(--blue); cursor:pointer; }
  .compare-toggle span{ color:var(--text); font-weight:500; }
  .compare-panel{ margin-bottom:var(--sp-4); }

  .custom-date-row{
    display:flex; align-items:center; gap:8px; margin:-4px 0 var(--sp-4);
    font-size:12.5px; color:var(--muted); flex-wrap:wrap;
  }
  .custom-date-row input[type="date"]{
    font-family:'Inter',sans-serif; font-size:12.5px; padding:7px 10px;
    border:1px solid var(--line); border-radius:8px; background:var(--card); color:var(--text);
  }
  [data-theme="dark"] .custom-date-row input[type="date"]::-webkit-calendar-picker-indicator{
    filter: invert(1) brightness(1.4);
  }
  .ig-connect-form{ display:flex; gap:8px; justify-content:center; margin-top:16px; flex-wrap:wrap; }
  .ig-connect-form input{
    font-family:'Inter',sans-serif; font-size:13px; padding:9px 12px;
    border:1px solid var(--line); border-radius:9px; background:var(--paper); color:var(--text);
    min-width:220px;
  }
  .ig-connect-form button{
    font-family:'Inter',sans-serif; font-size:13px; font-weight:600;
    padding:9px 16px; border:none; border-radius:9px; background:var(--btn-bg); color:var(--btn-fg); cursor:pointer;
  }

  /* ---------- JOB INPUT ---------- */
  .job-form{
    display:flex; flex-wrap:wrap; gap:var(--sp-2);
    margin-bottom:var(--sp-4);
    padding-bottom:var(--sp-4);
    border-bottom:1px solid var(--line);
  }
  .job-form input, .job-form select{
    font-family:'Inter',sans-serif; font-size:13px;
    padding:9px 12px; border:1px solid var(--line); border-radius:9px;
    background:var(--paper); color:var(--text);
  }
  .job-form input[name="staff"]{flex:1 1 160px;}
  .job-form input[name="job"]{flex:2 1 220px;}
  .job-form input[name="deadline"]{flex:0 1 150px;}
  .job-form select{flex:0 1 130px;}
  .job-form button{
    flex:0 0 auto;
    font-family:'Inter',sans-serif; font-size:13px; font-weight:600;
    padding:9px 18px; border:none; border-radius:9px;
    background:var(--btn-bg); color:var(--btn-fg); cursor:pointer;
  }
  .job-form button:hover{opacity:0.88;}
  .job-table .job-empty{ text-align:center; color:var(--muted-2); font-size:12.5px; padding:var(--sp-4) 0; }
  .job-del{
    border:none; background:transparent; color:var(--muted-2);
    font-size:16px; line-height:1; cursor:pointer; padding:2px 6px; border-radius:6px;
  }
  .job-del:hover{color:#E14A3C; background:var(--coral-soft);}

  @media (max-width: 1080px){
    .div-grid, .kpi-row{grid-template-columns:1fr 1fr;}
  }
  @media (max-width: 900px){
    body{flex-direction:column;}
    .sidebar{position:relative; height:auto; width:100%; flex-direction:row; align-items:center; overflow-x:auto; padding:var(--sp-3) var(--sp-4);}
    .brand{margin-bottom:0; margin-right:var(--sp-4);}
    nav{flex-direction:row;}
    .nav-label{display:none;}
    .sidebar-footer{display:none;}
    .panel-grid{grid-template-columns:1fr;}
    .content, .topbar{padding-left:var(--sp-4); padding-right:var(--sp-4);}
  }
  @media (max-width: 560px){
    .div-grid, .kpi-row, .ig-kpi-row, .akpi-row, .ig-content-grid, .ig-compare-grid, .agrid2, .agrid3, .insight-grid{grid-template-columns:1fr;}

    /* skala spacing lebih rapat di HP -- otomatis ngerapetin semua padding/gap yang pakai var ini */
    :root{
      --sp-1:6px; --sp-2:8px; --sp-3:10px; --sp-4:12px;
      --sp-5:14px; --sp-6:18px; --sp-7:22px; --sp-8:28px;
    }

    body{font-size:13px;}
    .content{padding-top:var(--sp-4); padding-bottom:var(--sp-6);}
    .topbar{padding-top:var(--sp-4); padding-bottom:var(--sp-3);}
    .topbar h1{font-size:18px;}
    .topbar .eyebrow{font-size:10px;}
    .pill{font-size:10.5px; padding:5px 10px;}
    .nav-btn{font-size:12px; padding:8px 10px;}
    .brand img{height:26px;}

    .hero, .ig-hero, .gsc-hero{padding:var(--sp-4);}
    .hero h2, .ig-hero h2, .gsc-hero h2{font-size:17px;}
    .hero p, .ig-meta, .gsc-meta{font-size:11.5px;}
    .hero-stat .num{font-size:20px;}

    .kpi, .ig-kpi, .akpi{padding:var(--sp-3);}
    .kpi .v, .ig-kpi .v{font-size:18px;}
    .akpi .anum{font-size:20px;}
    .kpi .k, .ig-kpi .k, .alabel{font-size:10.5px;}

    .div-card{padding:var(--sp-3);}
    .div-card h3{font-size:14px;}

    .panel, .ig-note{padding:var(--sp-3);}
    .panel-head h3, .sec-head h3{font-size:13px;}
    .mini-pill{font-size:9.5px; padding:3px 8px;}

    table{font-size:11.5px;}
    th{font-size:9.5px; padding:0 3px 6px;}
    td{padding:8px 3px;}

    .job-form input, .job-form select, .proj-input, .ae-search{font-size:12px; padding:7px 9px;}
    .job-form button, .proj-save-btn, .proj-cancel-btn, .cta-btn{font-size:11px; padding:7px 12px;}

    .client-chip{font-size:11px; padding:6px 12px;}
    .subtab-btn{font-size:12px; padding:8px 12px;}

    .ig-content-card, .akpi{padding:var(--sp-3);}
    .fstep{padding:10px 5px;}
    .fstep .n{font-size:18px;}
    .fstep .l{font-size:9.5px;}

    .login-card{padding:var(--sp-6) var(--sp-4);}
    .login-card h2{font-size:17px;}

    .report-controls{gap:var(--sp-2);}
    .period-btn{font-size:11px; padding:6px 10px;}
    .compare-toggle{font-size:11px;}
    .ae-search, .ig-connect-form input{max-width:100%; font-size:12px;}
    .ig-hero-right, .gsc-hero .ig-hero-right{padding:10px 12px; font-size:10.5px;}
    .sync-btn{font-size:10.5px; padding:6px 10px;}
    .user-badge .name{font-size:12px;}
    .user-badge .role{font-size:10px;}
  }