/* =============================================================================
   HT THEME — shared design tokens for Hang Tuah internal web apps
   Source of truth: Workflow Central App (NSO) production stylesheet.
   Version 1.0 — 23 Jul 2026

   HOW TO USE (Apps Script HtmlService app):
   1. Paste this whole block inside a <style> tag in your HTML, OR serve it as a
      separate .css and include it. Keep ONE copy per app; do not fork tokens.
   2. Add the theme boot script in <head> BEFORE this stylesheet loads so the
      theme is set before first paint (prevents a flash):

        <script>(function(){try{var t=localStorage.getItem('ht_theme');
        t=(t==='dark')?'dark':'light';
        document.documentElement.setAttribute('data-theme',t);}
        catch(e){document.documentElement.setAttribute('data-theme','light');}})();</script>

   3. To switch theme at runtime:
        document.documentElement.setAttribute('data-theme','dark');
        try{localStorage.setItem('ht_theme','dark');}catch(e){}

   NAMING CONTRACT (do not break this):
   --brand   = rust identity #8e3021. LOGO TILE + PROJECT/IDENTITY PILL ONLY.
               Same in both themes. Never use for generic buttons or links.
   --accent  = interactive color: buttons, links, focus, progress, active nav.
               Rust in light, indigo (#6a5cff) in dark. Use this for controls.
   Status:   --done (success), --prog (in progress), --hold (blocked/on hold),
             --idle (inactive/empty). Always pair with a label or icon, never
             color alone (see accessibility note at bottom).
   ============================================================================= */

:root{
  /* Fonts — Inter for titles (matches live app), system stack for body/data.
     Body stays on the native stack: no web-font download, faster first paint. */
  --font:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',system-ui,sans-serif;
  --font-t:Inter,var(--font);

  /* Brand identity — constant across themes. Logo + identity pill only. */
  --brand:#8e3021;
  --accent:#8e3021;

  /* 8px spacing scale — pick from these, never random values. */
  --sp-1:4px; --sp-2:8px; --sp-3:16px; --sp-4:24px; --sp-5:32px; --sp-6:48px;

  /* Shape — one radius family. */
  --r-sm:8px;   /* chips, small controls */
  --r-md:10px;  /* buttons, nav items, inputs */
  --r-lg:12px;  /* cards, modals, popovers */
}

/* ---------- LIGHT (default identity: warm rust on cream) ---------- */
:root[data-theme="light"]{
  --page:radial-gradient(1100px 540px at 84% -12%,rgba(142,48,33,.11),transparent 62%),radial-gradient(900px 520px at -12% 112%,rgba(142,48,33,.066),transparent 58%),linear-gradient(178deg,#fbf7f0,#f3ecdf);
  --header-bg:rgba(255,252,246,.72); --sidebar-bg:rgba(255,253,248,.66);
  --border:rgba(88,52,38,.11); --text:#251f1b; --text-2:#7a7166; --text-muted:#a79d8f;
  --card:#fffefb; --card-text:#251f1b; --card-text-2:#7a7166; --card-border:rgba(88,52,38,.09);
  --chip-card:#f3ede2; --chip:rgba(142,48,33,.06);
  --kpi:rgba(255,255,255,.72); --input:rgba(255,255,255,.85); --hover:rgba(142,48,33,.06); --modal:#fffdf8;
  --search-bg:rgba(255,253,248,.82);
  --accent-text:#8e3021; --done:#2f8f4e; --prog:#b9821f; --hold:#c04e3a; --idle:#c8bfb2;
  --accent-soft:rgba(142,48,33,.12); --nav-active:rgba(142,48,33,.13);
  --card-shadow:0 1px 2px rgba(70,40,22,.05),0 12px 28px -16px rgba(70,40,22,.18);
  --card-shadow-h:0 2px 5px rgba(70,40,22,.07),0 20px 38px -16px rgba(70,40,22,.26);
  --hero:linear-gradient(116deg,#fffefb 46%,#f7ece4);
  --toggle-track:#d8cfc0;
  --ov-bg:rgba(12,8,6,.55);
  --accent-glow:rgba(142,48,33,.6); --sel:rgba(142,48,33,.3); --ms-glow:rgba(142,48,33,.12);
}

/* ---------- DARK (functional indigo accent on near-black) ---------- */
:root[data-theme="dark"]{
  --page:radial-gradient(1000px 500px at 86% -14%,rgba(106,92,255,.15),transparent 60%),linear-gradient(180deg,#141417,#0d0d0f);
  --header-bg:rgba(20,20,24,.66); --sidebar-bg:rgba(24,24,29,.6);
  --border:rgba(255,255,255,.09); --text:#f1f0ee; --text-2:#a4a2a0; --text-muted:#6d6c6b;
  --card:#1c1c20; --card-text:#eceae8; --card-text-2:#9a9896; --card-border:rgba(255,255,255,.08);
  --chip-card:rgba(255,255,255,.07); --chip:rgba(255,255,255,.07);
  --kpi:rgba(255,255,255,.05); --input:rgba(255,255,255,.06); --hover:rgba(255,255,255,.05); --modal:#202025;
  --search-bg:rgba(26,26,30,.78);
  --accent:#6a5cff; --accent-text:#b3aaff; --done:#4fbe77; --prog:#d9a13b; --hold:#e0685a; --idle:#565559;
  --accent-soft:rgba(106,92,255,.16); --nav-active:rgba(106,92,255,.20);
  --card-shadow:0 1px 2px rgba(0,0,0,.35),0 16px 34px -18px rgba(0,0,0,.6);
  --card-shadow-h:0 2px 5px rgba(0,0,0,.4),0 24px 44px -18px rgba(0,0,0,.7);
  --hero:linear-gradient(116deg,#1c1c20 46%,#23233a);
  --toggle-track:#6a5cff;
  --ov-bg:rgba(10,10,14,.62);
  --accent-glow:rgba(106,92,255,.55); --sel:rgba(106,92,255,.32); --ms-glow:rgba(106,92,255,.14);
}

/* ============================ base ============================ */
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:var(--font);
  background:var(--page); background-attachment:fixed;
  color:var(--text); min-height:100vh;
  -webkit-font-smoothing:antialiased;
  font-size:13px;              /* dense desktop dashboard baseline (see note) */
  color-scheme:dark;
}
:root[data-theme="light"] body{color-scheme:light}
h1,h2,h3,.tt{font-family:var(--font-t)}
a{color:var(--accent-text);text-decoration:none}
a:hover{text-decoration:underline}
::selection{background:var(--sel)}
input::placeholder,textarea::placeholder{color:var(--text-muted)}
button{font-family:inherit}

/* thin, theme-agnostic scrollbars for any scroll container: add [data-scroll] */
[data-scroll]{scrollbar-width:thin;scrollbar-color:rgba(128,122,116,.4) transparent}
[data-scroll]::-webkit-scrollbar{width:7px;height:7px}
[data-scroll]::-webkit-scrollbar-thumb{background:rgba(128,122,116,.4);border-radius:4px}
[data-scroll]::-webkit-scrollbar-track{background:transparent}

@keyframes ht-fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes ht-pop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}

/* ============================ components ============================
   Generalized, prefixed .ht-* classes distilled from the live app so any
   new app renders the same. Use these instead of inventing new component CSS. */

/* --- surfaces --- */
.ht-card{
  background:var(--card); color:var(--card-text);
  border:1px solid var(--card-border); border-radius:var(--r-lg);
  box-shadow:var(--card-shadow); padding:var(--sp-3);
  transition:box-shadow .15s,transform .15s;
}
.ht-card--hover:hover{box-shadow:var(--card-shadow-h);transform:translateY(-1px)}
.ht-modal{background:var(--modal);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:0 18px 44px rgba(0,0,0,.3)}
.ht-overlay{position:fixed;inset:0;background:var(--ov-bg);z-index:60}

/* --- buttons ---
   .ht-btn base + one modifier. Min height 36px here for dense desktop; bump to
   44px for staff-facing / mobile screens (see mobile note). */
.ht-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  border:1px solid transparent;border-radius:var(--r-md);
  padding:8px 14px;min-height:36px;
  font-size:12.5px;font-weight:700;line-height:1;cursor:pointer;
  transition:filter .15s,background .15s,transform .1s,box-shadow .15s;
}
.ht-btn:active{transform:scale(.98)}
.ht-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ht-btn--primary{background:var(--accent);color:#fff;box-shadow:0 10px 22px -12px var(--accent-glow)}
.ht-btn--primary:hover{filter:brightness(1.06)}
.ht-btn--ghost{background:transparent;color:var(--text-2);border-color:var(--border)}
.ht-btn--ghost:hover{background:var(--hover);color:var(--text)}
.ht-btn--sheet{background:#188038;color:#fff;box-shadow:0 12px 22px -12px #188038} /* Google Sheet action */
.ht-btn--sheet:hover{background:#1e9143}
.ht-btn[disabled]{opacity:.55;cursor:not-allowed;filter:none;transform:none}

/* --- chips / pills --- */
.ht-chip{display:inline-flex;align-items:center;gap:4px;background:var(--chip-card);color:var(--card-text-2);border-radius:var(--r-sm);font-size:11px;font-weight:600;padding:4px 10px;white-space:nowrap}
.ht-pill--brand{display:inline-flex;align-items:center;gap:6px;background:var(--accent-soft);color:var(--brand);border-radius:var(--r-sm);font-size:11px;font-weight:700;padding:4px 10px} /* identity/project pill */

/* --- status dot + label (never color alone) --- */
.ht-status{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700}
.ht-status .dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.ht-status--done .dot{background:var(--done)} .ht-status--done{color:var(--done)}
.ht-status--prog .dot{background:var(--prog)} .ht-status--prog{color:var(--prog)}
.ht-status--hold .dot{background:var(--hold)} .ht-status--hold{color:var(--hold)}
.ht-status--idle .dot{background:var(--idle)} .ht-status--idle{color:var(--text-muted)}

/* --- inputs --- */
.ht-input{
  width:100%;background:var(--input);color:var(--text);
  border:1px solid var(--border);border-radius:var(--r-md);
  padding:9px 12px;font-size:13px;font-family:inherit;
}
.ht-input::placeholder{color:var(--text-muted)}
.ht-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}

/* --- nav item --- */
.ht-nav-i{cursor:pointer;padding:10px 12px;border-radius:var(--r-md);font-size:12.5px;font-weight:600;display:flex;align-items:center;gap:11px;color:var(--text-2);transition:background .15s,color .15s}
.ht-nav-i:hover{background:var(--hover)}
.ht-nav-i.on{background:var(--nav-active);color:var(--accent-text)}

/* --- KPI tile --- */
.ht-kpi{background:var(--kpi);border:1px solid var(--border);border-radius:var(--r-md);padding:10px 14px}
.ht-kpi .l{font-size:8.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-2);line-height:1.1}
.ht-kpi .v{font-family:var(--font-t);font-weight:800;font-size:20px;color:var(--text)}

/* --- brand logo tile --- */
.ht-logo{width:30px;height:30px;border-radius:9px;background:var(--brand);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:13px;flex-shrink:0;box-shadow:0 8px 16px -8px var(--brand);overflow:hidden}
.ht-logo img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}

/* --- state blocks --- */
.ht-skeleton{background:linear-gradient(90deg,var(--chip-card) 25%,var(--hover) 37%,var(--chip-card) 63%);background-size:400% 100%;animation:ht-shimmer 1.4s ease infinite;border-radius:var(--r-sm);min-height:14px}
@keyframes ht-shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}
.ht-empty,.ht-error{text-align:center;color:var(--text-2);padding:var(--sp-5) var(--sp-3);font-size:13px}
.ht-error{color:var(--hold)}

@media(prefers-reduced-motion:reduce){
  .ht-skeleton{animation:none}
  *{animation-duration:.001ms!important}
}

/* =============================================================================
   NOTES / KNOWN TENSIONS (read before applying to a staff-facing app)

   - BASE FONT 13px: the live Workflow app is a dense DESKTOP dashboard, so its
     body baseline is 13px. The shared UI rule for STAFF-FACING mobile apps is
     16px minimum (smaller triggers iOS auto-zoom on inputs). For Cek Paket and
     other phone-first apps, override to 16px body / >=44px tap targets rather
     than copying 13px. Tokens (color/shape/shadow) carry over unchanged; only
     the type scale and control sizes get bumped up.

   - CONTRAST: put text on the light --card islands, never burgundy text on a
     dark shell. --text-muted on --page is intentionally low-emphasis — do not
     use it for anything the user must read.

   - --brand vs --accent: keep the contract. Rust identity is brand furniture;
     indigo (dark) / rust (light) is the interactive accent. Mixing them is the
     most common way these apps start to look inconsistent.
   ============================================================================= */
