/* Goda Branding app shell: left sidebar (drawer + bottom nav on phones) and topbar, shared by /, /tracking, /am, /admin and /sidak.
   Pages keep their own content; this file only adds the frame and the shared light/dark tokens. */
:root{
  --gb-bg:#FFFFFF; --gb-card:#FFFFFF; --gb-ink:#0A0A0A; --gb-muted:#525252; --gb-line:#E5E5E5; --gb-sunk:#F4F4F5;
  --gb-or:#F97316; --gb-or-h:#EA580C; --gb-or-ink:#C2410C; --gb-or-soft:#FFF7ED;
  --gb-side:248px; --gb-top:60px; --gb-font:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --gb-sh:0 1px 2px rgba(15,23,42,.04),0 1px 3px rgba(15,23,42,.06);
}
:root[data-theme="dark"]{
  --gb-bg:#000000; --gb-card:#0F0F0F; --gb-ink:#FFFFFF; --gb-muted:#A3A3A3; --gb-line:#262626; --gb-sunk:#1A1A1A;
  --gb-or:#FB923C; --gb-or-h:#F97316; --gb-or-ink:#FDBA74; --gb-or-soft:#2A1A0E; --gb-sh:0 1px 2px rgba(0,0,0,.4);
}
body.gbs{margin:0;padding-left:var(--gb-side)}
.gbs-side{position:fixed;z-index:50;top:0;bottom:0;left:0;width:var(--gb-side);background:var(--gb-card);border-right:1px solid var(--gb-line);display:flex;flex-direction:column;font-family:var(--gb-font);padding:calc(18px + env(safe-area-inset-top,0px)) 14px calc(16px + env(safe-area-inset-bottom,0px));overflow-y:auto;-webkit-font-smoothing:antialiased}
.gbs-logo{display:flex;align-items:center;gap:10px;padding:0 8px 18px;text-decoration:none;color:var(--gb-ink)}
.gbs-logo img{width:38px;height:34px;object-fit:contain;display:block}
.gbs-logo b{display:block;font-size:16px;font-weight:800;letter-spacing:.02em;line-height:1.1}
.gbs-logo span{display:block;font-size:10px;font-weight:600;letter-spacing:.22em;color:var(--gb-muted)}
.gbs-grp{margin:14px 0 4px;padding:0 10px;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--gb-muted)}
.gbs-nav{display:flex;flex-direction:column;gap:2px}
.gbs-nav a{position:relative;display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:8px;text-decoration:none;color:var(--gb-ink);font-size:14px;font-weight:500;line-height:1.25}
.gbs-nav a svg{flex:none;width:18px;height:18px;color:var(--gb-muted)}
.gbs-nav a:hover{background:var(--gb-sunk)}
.gbs-nav a[aria-current="page"]{background:var(--gb-or-soft);color:var(--gb-or-ink);font-weight:600}
.gbs-nav a[aria-current="page"] svg{color:var(--gb-or)}
.gbs-nav a[aria-current="page"]::before{content:"";position:absolute;left:-14px;top:6px;bottom:6px;width:3px;border-radius:0 3px 3px 0;background:var(--gb-or)}
.gbs-nav a.sub{padding:6px 10px 6px 39px;font-size:13px;color:var(--gb-muted)}
.gbs-nav a.sub[aria-current="page"]{background:none;color:var(--gb-or-ink)}
.gbs-nav a.sub[aria-current="page"]::before{left:26px;top:50%;bottom:auto;width:5px;height:5px;margin-top:-2.5px;border-radius:50%}
.gbs-foot{margin-top:auto;padding:14px 10px 0;font-size:11.5px;color:var(--gb-muted);line-height:1.4}
.gbs-top{position:sticky;top:0;z-index:45;height:calc(var(--gb-top) + env(safe-area-inset-top,0px));padding:env(safe-area-inset-top,0px) 24px 0;display:flex;align-items:center;gap:14px;background:color-mix(in srgb,var(--gb-card) 88%,transparent);-webkit-backdrop-filter:saturate(180%) blur(12px);backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--gb-line);font-family:var(--gb-font);color:var(--gb-ink);-webkit-font-smoothing:antialiased}
.gbs-top .gbs-burger{display:none}
.gbs-crumb{display:flex;align-items:center;gap:6px;min-width:0;font-size:13px;color:var(--gb-muted);white-space:nowrap;overflow:hidden}
.gbs-crumb b{font-weight:500;color:var(--gb-ink);overflow:hidden;text-overflow:ellipsis}
.gbs-crumb i{font-style:normal}
.gbs-acts{margin-left:auto;display:flex;align-items:center;gap:8px}
.gbs-ib{appearance:none;display:inline-grid;place-items:center;width:36px;height:36px;border-radius:8px;border:1px solid var(--gb-line);background:var(--gb-card);color:var(--gb-muted);cursor:pointer;padding:0}
.gbs-ib:hover{color:var(--gb-ink);border-color:color-mix(in srgb,var(--gb-muted) 40%,var(--gb-line))}
.gbs-ib svg{width:18px;height:18px}
.gbs-me{display:flex;align-items:center;gap:10px;padding-left:6px}
.gbs-av{position:relative;overflow:hidden;flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--gb-sunk);color:var(--gb-ink);font-size:12.5px;font-weight:700;letter-spacing:.02em}
.gbs-me div{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.gbs-me b{font-size:13px;font-weight:600;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gbs-me span{font-size:11.5px;color:var(--gb-muted)}
.gbs-scrim{display:none}
.gbs-bnav{display:none}
.gbs :focus-visible{outline:2px solid var(--gb-or);outline-offset:2px}
@media (max-width:1023px){
  body.gbs{padding-left:0;padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}
  .gbs-side{transform:translateX(-100%);transition:transform .25s ease;box-shadow:0 20px 60px rgba(15,23,42,.25);width:min(290px,86vw)}
  .gbs-side .gbs-nav a[aria-current="page"]::before{left:-14px}
  body.gbs-open .gbs-side{transform:none}
  body.gbs-open .gbs-scrim{display:block;position:fixed;inset:0;z-index:49;background:rgba(15,23,42,.4)}
  .gbs-top{padding:env(safe-area-inset-top,0px) max(12px,env(safe-area-inset-right,0px)) 0 max(12px,env(safe-area-inset-left,0px));gap:10px}
  .gbs-top .gbs-burger{display:inline-grid}
  .gbs-me div{display:none}
  .gbs-crumb .gbs-c0,.gbs-crumb .gbs-c0+i{display:none}
  .gbs-bnav{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;position:fixed;z-index:46;left:0;right:0;bottom:0;padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px));background:color-mix(in srgb,var(--gb-card) 94%,transparent);-webkit-backdrop-filter:saturate(180%) blur(12px);backdrop-filter:saturate(180%) blur(12px);border-top:1px solid var(--gb-line);font-family:var(--gb-font)}
  .gbs-bnav a,.gbs-bnav button{appearance:none;border:0;background:none;display:flex;flex-direction:column;align-items:center;gap:3px;padding:4px 2px;border-radius:8px;text-decoration:none;color:var(--gb-muted);font:inherit;font-size:10.5px;font-weight:600;cursor:pointer;min-width:0;white-space:nowrap}
  .gbs-bnav svg{width:21px;height:21px}
  .gbs-bnav [aria-current="page"]{color:var(--gb-or-ink)}
  .gbs-bnav [aria-current="page"] svg{color:var(--gb-or)}
}
@media (max-width:420px){.gbs-ib.gbs-th{display:none}}
@media print{.gbs-side,.gbs-top,.gbs-bnav{display:none!important}body.gbs{padding:0}}
@media (prefers-reduced-motion:reduce){.gbs-side{transition:none}}
/* Install as app: dashboard banner and the how-to sheet */
.gbs-banner{display:flex;align-items:center;gap:14px;background:var(--gb-card);border:1px solid color-mix(in srgb,var(--gb-or) 35%,var(--gb-line));border-radius:12px;padding:14px 16px;box-shadow:var(--gb-sh);font-family:var(--gb-font);color:var(--gb-ink)}
.gbs-bi{flex:none;width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:var(--gb-or-soft);color:var(--gb-or)}
.gbs-bi svg{width:20px;height:20px}
.gbs-banner b{font-size:14.5px;font-weight:600}
.gbs-banner p{margin:2px 0 0;font-size:13px;color:var(--gb-muted)}
.gbs-bact{margin-left:auto;display:flex;align-items:center;gap:6px;flex:none}
.gbs-bbtn{appearance:none;border:0;border-radius:8px;padding:9px 16px;font:inherit;font-size:14px;font-weight:600;color:#fff;background:#C2410C;cursor:pointer}
.gbs-bbtn:hover{background:#9A3412}
.gbs-blink{appearance:none;border:0;background:none;font:inherit;font-size:13.5px;font-weight:500;color:var(--gb-muted);padding:8px;cursor:pointer}
.gbs-sheet{position:fixed;inset:0;z-index:90;background:rgba(15,23,42,.45);display:flex;align-items:flex-end;justify-content:center;padding:16px;padding-bottom:calc(16px + env(safe-area-inset-bottom,0px));font-family:var(--gb-font)}
.gbs-sbox{width:min(420px,100%);background:var(--gb-card);color:var(--gb-ink);border-radius:16px;padding:20px;display:flex;flex-direction:column;gap:14px;box-shadow:0 24px 60px rgba(15,23,42,.3)}
.gbs-sh{display:flex;align-items:center;gap:12px}
.gbs-sh img{width:44px;height:44px;border-radius:11px}
.gbs-sh b{display:block;font-size:16px;font-weight:600}
.gbs-sh span{font-size:12.5px;color:var(--gb-muted)}
.gbs-sbox ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.gbs-sbox li{display:flex;gap:12px;align-items:flex-start;font-size:14px;line-height:1.45}
.gbs-sbox li i{flex:none;width:32px;height:32px;border-radius:8px;display:grid;place-items:center;background:var(--gb-sunk);color:var(--gb-ink)}
.gbs-sbox li i svg{width:18px;height:18px}
.gbs-sbox li span{padding-top:5px}
.gbs-snote{margin:0;font-size:12.5px;color:var(--gb-muted);background:var(--gb-sunk);border-radius:8px;padding:10px 12px}
@media (min-width:640px){.gbs-sheet{align-items:center}}
@media (max-width:560px){.gbs-banner{flex-wrap:wrap}.gbs-bact{margin-left:0;width:100%}}

/* Tugas Sidak badge and dashboard reminder */
.gbs-nav a .gbs-bdg,.gbs-bnav .gbs-bdg{font-style:normal;margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--gb-or-soft);color:var(--gb-or-ink);font-size:11px;font-weight:700;display:inline-grid;place-items:center;line-height:1}
.gbs-nav a .gbs-bdg.late,.gbs-bnav .gbs-bdg.late{background:#C81E1E;color:#fff}
.gbs-bnav a{position:relative}
.gbs-bnav .gbs-bdg{position:absolute;top:0;left:calc(50% + 6px);margin:0;min-width:17px;height:17px;font-size:10px;padding:0 4px;background:#C2410C;color:#fff}
.gbs-task{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--gb-ink);background:var(--gb-card);border:1px solid color-mix(in srgb,var(--gb-or) 45%,var(--gb-line));border-radius:14px;padding:14px 16px;box-shadow:var(--gb-sh);font-family:var(--gb-font)}
.gbs-task b{font-size:15px;font-weight:700}
.gbs-task p{margin:2px 0 0;font-size:12.5px;color:var(--gb-muted)}
.gbs-late{color:#C81E1E;font-weight:600}
:root[data-theme="dark"] .gbs-late{color:#F87171}
.gbs-task .gbs-go{margin-left:auto;font-size:20px;color:var(--gb-muted)}

/* Task reminder: count tile + headline */
.gbs-task{position:relative;overflow:hidden;gap:14px;padding:14px 16px;border-color:color-mix(in srgb,var(--gb-or) 40%,var(--gb-line))}
.gbs-task::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:var(--gb-or)}
.gbs-task.late::before{background:#C81E1E}
.gbs-cnt{flex:none;width:48px;height:48px;border-radius:14px;display:grid;place-items:center;font-size:22px;font-weight:800;color:#fff;background:#C2410C;box-shadow:0 8px 18px -8px rgba(194,65,12,.7)}
.gbs-task.late .gbs-cnt{background:#C81E1E;box-shadow:0 8px 18px -8px rgba(200,30,30,.7)}
.gbs-task small{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gb-or-ink)}
.gbs-task small svg{width:13px;height:13px}
.gbs-task b{display:block;font-size:14.5px;line-height:1.35;margin-top:2px}
.gbs-task p{margin:3px 0 0}
/* Motion (interaksi A): sliding pill behind the pressed button of a .gseg group */
.gseg{position:relative;isolation:isolate}
.gseg>.gseg-pill{position:absolute;z-index:-1;left:0;top:0;width:0;height:0;border-radius:8px;background:var(--card,#fff);box-shadow:0 1px 3px rgba(0,0,0,.1);pointer-events:none;transition:left .38s cubic-bezier(.3,.9,.3,1),top .38s cubic-bezier(.3,.9,.3,1),width .38s cubic-bezier(.3,.9,.3,1),height .38s,opacity .2s}
.gseg>[aria-pressed="true"]{background:transparent!important;box-shadow:none!important;border-color:transparent!important}
.gseg.ink>.gseg-pill{background:var(--ink,#0A0A0A);box-shadow:none;border-radius:999px}
.gseg.line>.gseg-pill{background:var(--orange,#F97316);box-shadow:none;border-radius:2px}
.gseg.line>[aria-pressed="true"]{border-bottom-color:transparent!important}
@media (prefers-reduced-motion:reduce){.gseg>.gseg-pill{transition:none}}
.gbs-av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* Palet 13 · Ivory & Onyx (tema terang) */
:root:not([data-theme="dark"]){--gb-bg:#F6F5F3;--gb-card:#FFFFFF;--gb-ink:#1A1A1A;--gb-muted:#64615C;--gb-line:#E6E4E0;--gb-sunk:#EFEEEB;--gb-or:#E2702F;--gb-or-h:#C85E22;--gb-or-ink:#A84E1C;--gb-or-soft:#F8EBDF;--gb-sh:0 1px 2px rgba(60,45,25,.05),0 2px 8px rgba(60,45,25,.05)}
:root:not([data-theme="dark"]) .gbs-top,:root:not([data-theme="dark"]) .gbs-bnav{background:rgba(246,245,243,.72);-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%)}

/* Palet 13 · mockup: task card = big number + onyx "Buka" pill; phone bottom bar floats as a glass pill with an onyx active item */
.gbs-task .gbs-go{flex:none;font-size:13px;font-weight:700;padding:8px 16px;border-radius:999px;background:var(--gb-ink);color:var(--gb-bg)}
:root:not([data-theme="dark"]) .gbs-task{background:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.95);box-shadow:inset 0 1px 0 #fff,0 10px 26px -10px rgba(60,45,25,.16);-webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);border-radius:20px;padding:14px 16px}
:root:not([data-theme="dark"]) .gbs-task::before{display:none}
:root:not([data-theme="dark"]) .gbs-cnt,:root:not([data-theme="dark"]) .gbs-task.late .gbs-cnt{width:auto;height:auto;background:none;box-shadow:none;color:var(--gb-ink);font-size:34px;font-weight:800;letter-spacing:-.03em;line-height:1}
:root:not([data-theme="dark"]) .gbs-task b{font-size:15px;margin:0}
:root:not([data-theme="dark"]) .gbs-task p{font-size:12.5px;margin-top:1px}
/* Retail Specialist: one card, two queues (Form Link to check, sidak to review), each its own button */
.gbs-task.rs .gbs-acts{margin-left:auto;display:flex;flex-direction:column;gap:6px;flex:none}
.gbs-task.rs .gbs-acts a{text-align:center}
.gbs-task.rs .gbs-acts a{flex:none;font-size:13px;font-weight:700;padding:8px 14px;border-radius:999px;background:var(--gb-ink);color:var(--gb-bg);text-decoration:none;white-space:nowrap}
.gbs-task.rs .gbs-acts a.off{background:transparent;color:var(--gb-muted);border:1px solid var(--gb-line)}
@media (max-width:1023px){
  :root:not([data-theme="dark"]) body.gbs{padding-bottom:calc(86px + env(safe-area-inset-bottom,0px))}
  :root:not([data-theme="dark"]) .gbs-bnav{left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom,0px));padding:6px;border-radius:26px;border:1px solid rgba(255,255,255,.95);background:rgba(255,255,255,.62);box-shadow:inset 0 1px 0 #fff,0 12px 30px -10px rgba(60,45,25,.28)}
  :root:not([data-theme="dark"]) .gbs-bnav a,:root:not([data-theme="dark"]) .gbs-bnav button{padding:9px 2px;border-radius:20px;color:var(--gb-ink);font-size:10px}
  :root:not([data-theme="dark"]) .gbs-bnav [aria-current="page"]{background:var(--gb-ink);color:var(--gb-bg)}
  :root:not([data-theme="dark"]) .gbs-bnav [aria-current="page"] svg{color:var(--gb-bg)}
  :root:not([data-theme="dark"]) .gbs-bnav span{display:none}
  :root:not([data-theme="dark"]) .gbs-bnav .gbs-bdg{top:2px;background:#B83A2E}
}
/* Bigger floating bottom bar (user: "lebih besarkan"): taller pill, larger icons and touch targets */
@media (max-width:1023px){
  :root:not([data-theme="dark"]) body.gbs{padding-bottom:calc(92px + env(safe-area-inset-bottom,0px))}
  :root:not([data-theme="dark"]) .gbs-bnav{left:14px;right:14px;bottom:calc(12px + env(safe-area-inset-bottom,0px));padding:6px;border-radius:28px;gap:4px}
  :root:not([data-theme="dark"]) .gbs-bnav a,:root:not([data-theme="dark"]) .gbs-bnav button{padding:9px 2px;border-radius:22px}
  :root:not([data-theme="dark"]) .gbs-bnav svg{width:26px;height:26px}
  :root:not([data-theme="dark"]) .gbs-bnav .gbs-bdg{top:6px;left:calc(50% + 8px);min-width:19px;height:19px;font-size:11px}
  .gbs-bnav svg{width:24px;height:24px}
}

/* ---- Phone type scale: one set of sizes for every page (dashboard, Tracking, Form Pengajuan Branding, Sidak) ----
   20 page title · 16 section · 15 card title · 14 body, questions, options · 16 form fields (iOS zooms the page into anything smaller)
   13 secondary, labels · 12 badges, chips · 11.5 the smallest caption. The :not(#_) prefix carries id weight, so it outranks each page's own and theme rules. */
@media (max-width:640px){
  :root:not(#_) body.gbs .htxt h1,:root:not(#_) body.gbs .wrap h1,:root:not(#_) body.gbs main h1{font-size:20px;line-height:1.25;letter-spacing:-.01em}
  :root:not(#_) body.gbs .sec-head h2,:root:not(#_) body.gbs .sec>h2,:root:not(#_) body.gbs .tk-h h2{font-size:16px;line-height:1.3}
  :root:not(#_) body.gbs .sec-head p{font-size:13px;line-height:1.45}
  :root:not(#_) body.gbs .pick button b,:root:not(#_) body.gbs .tkr .l1 b,:root:not(#_) body.gbs .jd-i b{font-size:15px}
  :root:not(#_) body.gbs .pick .s,:root:not(#_) body.gbs .tkr .l2,:root:not(#_) body.gbs .jd-i span,:root:not(#_) body.gbs .hint,:root:not(#_) body.gbs p.hint,:root:not(#_) body.gbs .submit-row .hint{font-size:13px;line-height:1.45}
  :root:not(#_) body.gbs .q .ql{font-size:14px}
  :root:not(#_) body.gbs .opts label,:root:not(#_) body.gbs .seg label,:root:not(#_) body.gbs .check .seg label{font-size:14px}
  :root:not(#_) body.gbs .check .desc{font-size:13px}
  :root:not(#_) body.gbs .label,:root:not(#_) body.gbs label.label,:root:not(#_) body.gbs span.label{font-size:13px}
  :root:not(#_) body.gbs input:not([type=checkbox]):not([type=radio]),:root:not(#_) body.gbs select,:root:not(#_) body.gbs textarea{font-size:16px}
  :root:not(#_) body.gbs .tkr .l0,:root:not(#_) body.gbs .tkr .st,:root:not(#_) body.gbs .pill,:root:not(#_) body.gbs .count,:root:not(#_) body.gbs .aprm-t{font-size:12px}
  :root:not(#_) body.gbs .story small,:root:not(#_) body.gbs .aprm-s em,:root:not(#_) body.gbs a.kt .ls{font-size:11.5px}
  :root:not(#_) body.gbs .gbs-cnt,:root:not(#_) body.gbs .lyk-n{font-size:30px}
}