/* ═══════════════════════════════════════════════════════
   HSG's Tech Hub — shared.css
   Palette: Oceanic & Lazuli — Dual-Mode
   ═══════════════════════════════════════════════════════ */
*{box-sizing:border-box;margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Inter",sans-serif}

/* ── LIGHT MODE (Oceanic & Lazuli) ── */
:root{
  --bg:#F0F5FA;
  --surface:#FFFFFF;
  --surface2:#E8EFF7;
  --border:#D1DCEA;
  --text:#0D1E36;
  --muted:#475C78;
  --hint:rgba(71,92,120,.28);
  --topmark:#00C48C;

  --accent:#0284C7;
  --accent2:#0369A1;
  --accent-glow:rgba(2,132,199,.18);

  --danger:#DC2626;
  --danger-soft:rgba(220,38,38,.10);
  --success:#059669;
  --success-soft:rgba(5,150,105,.10);
  --warn:#D97706;
  --warn-soft:rgba(217,119,6,.10);

  --shadow-sm:0 1px 4px rgba(13,30,54,.07);
  --shadow-md:0 4px 16px rgba(13,30,54,.10);
  --shadow-lg:0 12px 40px rgba(13,30,54,.14);

  --sidebar:172px;--row-h:34px;
  --col-no:7%;--col-wo:16%;--col-addr:28%;--col-ac:6%;--col-time:14%;--col-notes:19%;--col-by:10%;
  --radius-sm:6px;--radius-md:10px;--radius-lg:16px;
}

/* ── DARK MODE (Oceanic & Lazuli) ── */
.dark{
  --bg:#030712;
  --surface:#0E1726;
  --surface2:#142031;
  --border:#1E293B;
  --text:#E2EAF4;
  --muted:#7A93B4;
  --hint:rgba(122,147,180,.25);
  --topmark:#00E5A0;

  --accent:#38BDF8;
  --accent2:#7DD3FC;
  --accent-glow:rgba(56,189,248,.18);

  --danger:#F87171;
  --danger-soft:rgba(248,113,113,.12);
  --success:#34D399;
  --success-soft:rgba(52,211,153,.12);
  --warn:#FBBF24;
  --warn-soft:rgba(251,191,36,.12);

  --shadow-sm:0 1px 4px rgba(0,0,0,.3);
  --shadow-md:0 4px 20px rgba(0,0,0,.4);
  --shadow-lg:0 16px 50px rgba(0,0,0,.55);
}

/* ── THEMES (UNDER BOM / OUT BOM) ── */

/* Under BOM — Oceanic Teal (cooler, professional, default feel) */
.theme-underbom {
  --bg:#EFF6FF;
  --surface:#FFFFFF;
  --surface2:#DBEAFE;
  --border:#BFDBFE;
  --text:#1E3A5F;
  --muted:#4A6FA5;
  --accent:#2563EB;
  --accent2:#1D4ED8;
  --accent-glow:rgba(37,99,235,.15);
}
.dark .theme-underbom {
  --bg:#020B18;
  --surface:#0A1628;
  --surface2:#0D1F36;
  --border:#1A3151;
  --text:#C8DDF5;
  --muted:#6A90BB;
  --accent:#60A5FA;
  --accent2:#93C5FD;
  --accent-glow:rgba(96,165,250,.15);
}

/* Out BOM — Warm Amber-Copper (clearly different, signals billing/approval) */
.theme-outbom {
  --bg:#FFFBEB;
  --surface:#FFFFFF;
  --surface2:#FEF3C7;
  --border:#FDE68A;
  --text:#3B2307;
  --muted:#92600A;
  --accent:#B45309;
  --accent2:#92400E;
  --accent-glow:rgba(180,83,9,.15);
}
.dark .theme-outbom {
  --bg:#160C00;
  --surface:#211500;
  --surface2:#2D1C00;
  --border:#4A3000;
  --text:#FDE68A;
  --muted:#CA8A04;
  --accent:#FBBF24;
  --accent2:#FCD34D;
  --accent-glow:rgba(251,191,36,.15);
}

.theme-underbom, .theme-outbom {
  background: var(--bg);
  transition: background-color 0.35s ease, color 0.35s ease;
}

/* ── ETA URGENCY ANIMATIONS ── */
@keyframes eta-flash { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.55;transform:scale(.97)} }
@keyframes eta-pulse { 0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(185,28,28,.5)} 60%{transform:scale(1.05);box-shadow:0 0 0 6px rgba(185,28,28,0)} }
.eta-soon  { animation: eta-flash 1.6s ease-in-out infinite; }
.eta-critical { animation: eta-pulse 0.85s ease-in-out infinite; }
.bo-row-soon td { background: rgba(245,158,11,.08) !important; border-left:3px solid #f59e0b; }
.bo-row-critical td { background: rgba(239,68,68,.10) !important; border-left:3px solid #ef4444; }
.bo-row-overdue td { background: rgba(127,29,29,.14) !important; border-left:3px solid #991b1b; }
.dark .bo-row-soon td { background: rgba(245,158,11,.12) !important; }
.dark .bo-row-critical td { background: rgba(239,68,68,.15) !important; }
.dark .bo-row-overdue td { background: rgba(127,29,29,.22) !important; }

html,body{height:100%;overflow:hidden}
body{background:var(--bg);color:var(--text);display:flex;flex-direction:column;font-size:12px;line-height:1.5;-webkit-font-smoothing:antialiased}

/* ── APP SHELL ── */
#app{display:none;flex-direction:column;height:100dvh !important;padding-top:env(safe-area-inset-top)}
@supports not (height: 100dvh) { #app { height: 100% !important; } }
.topbar{height:70px;background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 16px;gap:10px;flex-shrink:0;z-index:200;box-shadow:var(--shadow-sm)}
.brand{display:flex;align-items:center;gap:9px;margin-right:6px;min-width:17%}
.brand-icon{width:90px;background:linear-gradient(135deg,var(--accent),var(--accent2));border-radius:9px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:16px;box-shadow:0 2px 10px var(--accent-glow,rgba(2,132,199,.25));flex-shrink:0}
.brand-name{font-size:20px;font-weight:800;letter-spacing:-.4px;background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.pulse{width:7px;height:7px;background:var(--success);border-radius:50%;animation:pulse 2s infinite;margin-left:1px;flex-shrink:0}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.75)}}
.nav-tabs{display:flex;gap:3px;background:var(--surface2);padding:3px;border-radius:9px;border:1px solid var(--border);height:80%;min-width:50%;max-width:60%;}
.ntab{padding:4px 12px;border-radius:7px;font-size:15px;font-weight:700;cursor:pointer;color:var(--muted);border:none;background:transparent;display:flex;align-items:center;gap:4px;transition:all .15s ease;white-space:nowrap;text-wrap:auto;letter-spacing:-.1px}
.ntab:hover{color:var(--text);background:rgba(2,132,199,.08)}
.ntab.active{background:var(--surface);color:var(--accent);border:1px solid var(--border);box-shadow:var(--shadow-sm);font-weight:800}
.spacer{flex:1}
.icon-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:8px;cursor:pointer;background:var(--surface);color:var(--muted);font-size:15px;position:relative;transition:all .15s ease;flex-shrink:0}
.icon-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-glow,rgba(2,132,199,.08))}
.ibadge{position:absolute;top:-5px;right:-5px;background:var(--danger);color:#fff;font-size:8.5px;font-weight:800;min-width:16px;height:16px;border-radius:8px;display:none;align-items:center;justify-content:center;padding:0 2px;border:2px solid var(--surface)}
.avbtn{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2));display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:700;cursor:pointer;border:none;box-shadow:0 2px 10px var(--accent-glow,rgba(2,132,199,.3));transition:.15s; position: sticky; right: 0; z-index: 10; flex-shrink: 0;}
.avbtn:hover{transform:scale(1.08);box-shadow:0 4px 16px var(--accent-glow,rgba(2,132,199,.4))}

.topbar { overflow-x: auto; overflow-y: hidden; }

.brand, .nav-tabs, .icon-btn, .appreq-btn, .followup-btn, #sync-lbl { flex-shrink: 0 !important; }
@media (max-width: 1000px) {
  .nav-tabs { max-width: none !important; min-width: auto !important; }
}
.view{flex:1;overflow:hidden;display:none}
.view.active{display:flex}

/* ── HISTORY PANEL ── */
#hist-panel{position:fixed;top:0;right:-480px;width:480px;height:100vh;background:var(--surface);border-left:1px solid var(--border);z-index:400;display:flex;flex-direction:column;transition:right .27s cubic-bezier(.4,0,.2,1);box-shadow:var(--shadow-lg)}
#hist-panel.open{right:0}
.hp-hdr{padding:14px 17px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;flex-shrink:0;background:linear-gradient(135deg,var(--accent-glow,rgba(2,132,199,.06)),transparent)}
.hp-title{font-size:14px;font-weight:800;flex:1;display:flex;align-items:center;gap:6px}
.hp-close{width:27px;height:27px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:6px;cursor:pointer;background:var(--bg);font-size:13px;color:var(--muted);transition:.15s}
.hp-close:hover{border-color:var(--danger);color:var(--danger);background:var(--danger-soft)}
.hp-search{padding:9px 13px;border-bottom:1px solid var(--border);flex-shrink:0}
.hp-search input{width:100%;padding:7px 10px;border:1px solid var(--border);border-radius:7px;background:var(--bg);color:var(--text);font-size:12px;outline:none;transition:.15s}
.hp-search input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
.hp-filters{padding:7px 13px;display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--border);flex-shrink:0}
.hfchip{padding:3px 9px;border-radius:20px;font-size:11px;font-weight:600;cursor:pointer;border:1px solid var(--border);background:var(--bg);color:var(--muted);transition:.15s}
.hfchip:hover{border-color:var(--accent);color:var(--accent)}
.hfchip.active{background:var(--accent-glow);color:var(--accent);border-color:var(--accent)}
.hp-list{flex:1;overflow-y:auto;padding:10px 13px}

/* ── History Card — grouped layout ── */
.hi{padding:0;border-radius:10px;border:1px solid var(--border);margin-bottom:8px;background:var(--surface2);overflow:hidden;transition:.15s}
.hi:hover{border-color:var(--accent);box-shadow:0 2px 12px var(--accent-glow,rgba(2,132,199,.08))}

/* Row header bar: Tech · Date · Slot · Tag · Nav button */
.hi-row-hdr{display:flex;align-items:center;gap:5px;padding:7px 10px;background:var(--bg);border-bottom:1px solid var(--border);flex-wrap:wrap}
.hi-tech-chip,.hi-date-chip,.hi-slot-chip,.hi-tag-chip{font-size:10px;font-weight:700;padding:2px 7px;border-radius:20px}
.hi-date-chip{background:var(--accent-glow);color:var(--accent);border:1px solid var(--accent)}
.hi-slot-chip{background:var(--surface);border:1px solid var(--border);color:var(--muted)}
.hi-tag-chip{font-size:9.5px;color:var(--muted);margin-left:auto}

/* Go-to-Row nav button */
.hi-nav-btn{margin-left:4px;padding:2px 7px;font-size:11px;border:1px solid var(--border);border-radius:6px;background:var(--surface);cursor:pointer;color:var(--accent);transition:.15s;flex-shrink:0}
.hi-nav-btn:hover{background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:0 2px 8px var(--accent-glow)}

/* Editor block */
.hi-editor-block{padding:9px 11px;border-bottom:1px dashed var(--border)}
.hi-editor-block:last-child{border-bottom:none}
.hi-editor-primary{background:transparent}
.hi-editor-hdr{display:flex;align-items:center;gap:6px;margin-bottom:6px;flex-wrap:wrap}
.hi-uav{width:21px;height:21px;border-radius:5px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:9.5px;font-weight:800;flex-shrink:0}
.hi-editor-name{font-size:12px;font-weight:700}
.hi-role-badge{font-size:9.5px;font-weight:700;padding:1px 6px;border-radius:20px;flex-shrink:0}
.hi-time{font-size:10px;color:var(--muted)}
.hi-abs-time{font-size:10px;color:var(--muted);opacity:.7}

/* Field change rows inside each editor block */
.hi-fields{display:flex;flex-direction:column;gap:3px}
.hi-field-row{display:flex;align-items:flex-start;gap:4px;font-size:11px;flex-wrap:wrap;line-height:1.4}
.hi-field-label{font-weight:700;color:var(--text);flex-shrink:0}
.hi-field-arrow{color:var(--accent);font-weight:700;flex-shrink:0}
.hi-old-inline{color:var(--muted);text-decoration:line-through;max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-shrink:0}
.hi-new{color:var(--success);font-weight:700;word-break:break-word}

/* Multi-editor toggle */
.hi-multi-toggle{display:block;width:100%;text-align:left;padding:6px 11px;font-size:11px;font-weight:700;color:var(--accent);background:var(--accent-glow,rgba(2,132,199,.04));border:none;border-top:1px solid var(--border);cursor:pointer;transition:.15s}
.hi-multi-toggle:hover{background:var(--accent-glow)}
.hi-multi-list{border-top:1px dashed var(--border)}

.hp-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:200px;color:var(--muted);gap:9px}
.hp-footer{padding:9px 13px;border-top:1px solid var(--border);font-size:11px;color:var(--muted);text-align:center;flex-shrink:0}


/* ── MODAL ── */
#modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;z-index:9000}
#modal-overlay.open{display:flex}
.modal{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);width:555px;padding:24px;max-height:92vh;overflow-y:auto;box-shadow:var(--shadow-lg)}
.modal-t{font-size:16px;font-weight:800;margin-bottom:16px;display:flex;align-items:center;gap:7px;letter-spacing:-.3px;color:var(--text)}
.fg{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ff{grid-column:1/-1}
.fl{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;margin-bottom:4px;display:block}
.fi{padding:9px 11px;border:1.5px solid var(--border);border-radius:var(--radius-sm);background:var(--bg);color:var(--text);font-size:13px;font-family:inherit;outline:none;width:100%;transition:.15s}
.fi:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow,rgba(2,132,199,.12))}
.fi-ta{resize:vertical;min-height:55px}
.frow{margin-bottom:10px}
.fa{display:flex;gap:7px;justify-content:flex-end;margin-top:18px;padding-top:13px;border-top:1px solid var(--border)}
.cpr{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.csw{width:25px;height:25px;border-radius:7px;cursor:pointer;border:2px solid transparent;transition:.1s}
.csw:hover{transform:scale(1.1)}
.csw.sel{border-color:var(--text);box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--text)}
.divider-line{height:1px;background:var(--border);margin:14px 0}

/* ── COMMON COMPONENTS ── */
.btn-o{padding:7px 13px;border:1.5px solid var(--border);border-radius:var(--radius-sm);font-size:12px;font-weight:600;cursor:pointer;background:var(--surface);color:var(--text);transition:.15s;letter-spacing:-.1px}
.btn-o:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-glow,rgba(2,132,199,.06))}
.btn-d{padding:7px 13px;border:1.5px solid var(--danger-soft,rgba(220,38,38,.2));border-radius:var(--radius-sm);font-size:12px;font-weight:600;cursor:pointer;background:var(--surface);color:var(--danger);transition:.15s}
.btn-d:hover{background:var(--danger);color:#fff;border-color:var(--danger);box-shadow:0 2px 8px var(--danger-soft)}
.btn-add{display:inline-flex;align-items:center;gap:5px;padding:8px 16px;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;border:none;border-radius:var(--radius-sm);font-size:12px;font-weight:700;cursor:pointer;box-shadow:0 2px 10px var(--accent-glow,rgba(2,132,199,.28));transition:.15s;letter-spacing:-.1px}
.btn-add:hover{transform:translateY(-1px);box-shadow:0 4px 18px var(--accent-glow,rgba(2,132,199,.4))}
.btn-add:active{transform:translateY(0)}

/* ── BADGES ── */
.badge{padding:3px 9px;border-radius:20px;font-size:11px;font-weight:700;display:inline-flex;align-items:center;gap:3px}
.badge-blue  {background:rgba(2,132,199,.12);color:#0284C7;border:1px solid rgba(2,132,199,.2)}
.badge-green {background:rgba(5,150,105,.10);color:#059669;border:1px solid rgba(5,150,105,.2)}
.badge-orange{background:rgba(217,119,6,.10);color:#D97706;border:1px solid rgba(217,119,6,.2)}
.badge-red   {background:rgba(220,38,38,.10);color:#DC2626;border:1px solid rgba(220,38,38,.2)}
.badge-purple{background:rgba(124,58,237,.10);color:#7C3AED;border:1px solid rgba(124,58,237,.2)}
.dark .badge-blue  {background:rgba(56,189,248,.12);color:#38BDF8;border-color:rgba(56,189,248,.2)}
.dark .badge-green {background:rgba(52,211,153,.12);color:#34D399;border-color:rgba(52,211,153,.2)}
.dark .badge-orange{background:rgba(251,191,36,.12);color:#FBBF24;border-color:rgba(251,191,36,.2)}
.dark .badge-red   {background:rgba(248,113,113,.12);color:#F87171;border-color:rgba(248,113,113,.2)}
.dark .badge-purple{background:rgba(167,139,250,.12);color:#A78BFA;border-color:rgba(167,139,250,.2)}

/* ── STATUS CALENDAR ── */
.status-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:9px}
.status-cal-day{text-align:center;padding:5px 2px;border-radius:6px;cursor:pointer;font-size:11px;border:1px solid transparent;transition:.15s}
.status-cal-day:hover{background:var(--accent-glow);border-color:var(--accent)}
.status-cal-day.has-status{background:var(--danger-soft);border-color:rgba(220,38,38,.3);color:var(--danger);font-weight:700}
.status-cal-day.is-ph{background:rgba(220,38,38,.15);border-color:rgba(220,38,38,.35);color:var(--danger);font-weight:700}
.status-cal-day.is-oh{background:var(--warn-soft);border-color:rgba(217,119,6,.35);color:var(--warn);font-weight:700}
.status-cal-day.selected{background:var(--accent)!important;color:#fff!important;border-color:var(--accent)!important;font-weight:700}
.status-cal-day.today-mark{font-weight:800;outline:2px solid var(--accent);outline-offset:-2px}
.status-cal-hdr{text-align:center;font-size:9px;font-weight:800;color:var(--muted);padding:3px 0;text-transform:uppercase;letter-spacing:.05em}
.status-entry{background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:8px 10px;margin-bottom:5px;display:flex;align-items:center;gap:8px}
.status-entry-del{width:22px;height:22px;border-radius:5px;border:1px solid var(--danger-soft,rgba(220,38,38,.2));background:transparent;color:var(--danger);cursor:pointer;font-size:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:.15s}
.status-entry-del:hover{background:var(--danger);color:#fff}

::-webkit-scrollbar{width:14px;height:14px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:10px;border:1px solid var(--surface)}
::-webkit-scrollbar-thumb:hover{background:var(--muted)}

/* ── CUSTOM MESSAGE BOX ── */
#msgbox-overlay{position:fixed;inset:0;background:rgba(0,0,0,.58);backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;z-index:99999}
#msgbox-overlay.open{display:flex}
.msgbox{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);width:420px;max-width:92vw;padding:28px 28px 22px;box-shadow:var(--shadow-lg);text-align:center;position:relative}
.msgbox-icon{font-size:44px;margin-bottom:12px;display:block}
.msgbox-title{font-size:17px;font-weight:800;margin-bottom:8px;letter-spacing:-.3px;color:var(--text)}
.msgbox-body{font-size:13px;color:var(--muted);margin-bottom:20px;line-height:1.65}
.msgbox-btns{display:flex;gap:9px;justify-content:center;flex-wrap:wrap}
.msgbox-btn-ok{padding:10px 28px;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;border:none;border-radius:9px;font-size:13px;font-weight:700;cursor:pointer;box-shadow:0 2px 10px var(--accent-glow);transition:.15s}
.msgbox-btn-ok:hover{transform:translateY(-1px);box-shadow:0 5px 18px var(--accent-glow)}
.msgbox-btn-cancel{padding:10px 22px;background:var(--surface2);color:var(--text);border:1.5px solid var(--border);border-radius:9px;font-size:13px;font-weight:600;cursor:pointer;transition:.15s}
.msgbox-btn-cancel:hover{border-color:var(--danger);color:var(--danger);background:var(--danger-soft)}
.msgbox.type-danger .msgbox-btn-ok{background:linear-gradient(135deg,var(--danger),#b91c1c);box-shadow:0 2px 10px var(--danger-soft)}
.msgbox.type-success .msgbox-btn-ok{background:linear-gradient(135deg,var(--success),#047857);box-shadow:0 2px 10px var(--success-soft)}
.msgbox.type-warn .msgbox-btn-ok{background:linear-gradient(135deg,var(--warn),#b45309);box-shadow:0 2px 10px var(--warn-soft)}

/* ── GUIDE PANEL ── */
#guide-panel{position:fixed;top:0;right:-420px;width:420px;height:100vh;background:var(--surface);border-left:1px solid var(--border);z-index:450;display:flex;flex-direction:column;transition:right .27s cubic-bezier(.4,0,.2,1);box-shadow:var(--shadow-lg)}
#guide-panel.open{right:0}
.gp-hdr{padding:14px 17px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;flex-shrink:0;background:linear-gradient(135deg,var(--accent-glow,rgba(2,132,199,.07)),transparent)}
.gp-title{font-size:14px;font-weight:800;flex:1;display:flex;align-items:center;gap:7px}
.gp-close{width:27px;height:27px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:6px;cursor:pointer;background:var(--bg);font-size:13px;color:var(--muted);transition:.15s}
.gp-close:hover{border-color:var(--danger);color:var(--danger);background:var(--danger-soft)}
.gp-body{flex:1;overflow-y:auto;padding:16px}
.guide-item{background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:12px 14px;margin-bottom:9px}
.guide-item-num{display:inline-flex;width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;font-size:10px;font-weight:800;align-items:center;justify-content:center;margin-right:8px;flex-shrink:0;vertical-align:middle}
.guide-item-text{font-size:12.5px;line-height:1.6;color:var(--text);display:inline}

/* ── GUIDE EDITOR (admin) ── */
.guide-editor-ta{width:100%;min-height:120px;padding:10px 12px;border:1px solid var(--border);border-radius:9px;background:var(--bg);color:var(--text);font-size:12.5px;font-family:inherit;resize:vertical;outline:none;line-height:1.6}
.guide-editor-ta:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(59,130,246,.1)}

/* ── BRAND LOGO ── */
.brand-logo{width:90px;border-radius:8px;object-fit:contain;flex-shrink:0}
.brand-logo-login{width:100px;height:100px;object-fit:contain;margin:0 auto 16px;display:block;filter:drop-shadow(0 4px 16px rgba(59,130,246,.3))}

/* ── HOLIDAY NAME BADGE on schedule ── */
.hol-day-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 7px;border-radius:20px;font-size:20px;font-weight:700;background:rgba(239,68,68,.1);color:#ffffff;border:1px solid rgba(239,68,68,.18);white-space:nowrap}
.hol-day-badge.office{background:rgba(245,158,11,.12);color:#d97706;border-color:rgba(245,158,11,.25)}
.hol-day-badge.sub{background:rgba(99,102,241,.1);color:#6366f1;border-color:rgba(99,102,241,.25)}

/* ── DASHBOARD CHARTS ── */
.dash-chart-wrap{position:relative;width:100%;height:160px}
.dash-bar{display:flex;align-items:flex-end;gap:6px;height:120px;padding:0 4px}
.dash-bar-col{display:flex;flex-direction:column;align-items:center;gap:3px;flex:1}
.dash-bar-fill{border-radius:5px 5px 0 0;width:100%;min-height:4px;transition:.4s}
.dash-bar-lbl{font-size:9px;color:var(--muted);font-weight:700;text-align:center}
.dash-bar-val{font-size:10px;font-weight:800;color:var(--text)}
.dash-pie{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.pie-legend{display:flex;flex-direction:column;gap:5px}
.pie-leg-item{display:flex;align-items:center;gap:6px;font-size:11px}
.pie-leg-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}

/* ── PAGE ACCESS CONTROL ── */
/* handled in app_init.js */

/* ── DESKTOP NATIVE TABLES ── */
.table-common, .mt, .wt, .bt, .sd-table, .at {
  display: table; width: 100%; border-collapse: collapse; background: var(--surface);
  border: 1px solid var(--border); border-radius: 8px; overflow: hidden; font-size: 13px;
}
.table-common thead, .mt thead, .wt thead, .bt thead, .sd-table thead, .at thead {
  background: var(--surface2); border-bottom: 2px solid var(--border);
}
.table-common th, .mt th, .wt th, .bt th, .sd-table th, .at th {
  padding: 10px 14px; text-align: left; color: var(--muted); font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.05em; font-size: 11px;
}
.table-common td, .mt td, .wt td, .bt td, .sd-table td, .at td {
  padding: 11px 14px; border-bottom: 1px solid var(--border); color: var(--text);
}
.table-common tr:last-child td, .mt tr:last-child td, .wt tr:last-child td, .bt tr:last-child td, .sd-table tr:last-child td, .at tr:last-child td {
  border-bottom: none;
}
.table-common tr:hover td, .mt tr:hover td, .wt tr:hover td, .bt tr:hover td, .sd-table tr:hover td, .at tr:hover td {
  background: rgba(59,130,246,0.03);
}
.table-common td:not([data-label]):last-child > div, .mt td:not([data-label]):last-child > div, .wt td:not([data-label]):last-child > div, .bt td:not([data-label]):last-child > div, .sd-table td:not([data-label]):last-child > div, .at td:not([data-label]):last-child > div {
  display: flex; gap: 6px; justify-content: flex-end;
}
.table-common td:not([data-label]):last-child button, .mt td:not([data-label]):last-child button, .wt td:not([data-label]):last-child button, .bt td:not([data-label]):last-child button, .sd-table td:not([data-label]):last-child button, .at td:not([data-label]):last-child button {
  padding: 6px 12px; font-size: 11px; border-radius: 6px;
}

/* ── OFFLINE BANNER ──────────────────────────────────────────── */
/* Shown by app_init.js when Firebase is unreachable */
#offline-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #d97706;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  padding: 8px 16px;
  z-index: 9998;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  animation: slideDown .25s ease;
}
#offline-banner.show { display: flex; }
@keyframes slideDown { from { transform: translateY(-100%); } to { transform: none; } }