/* ============================================================================
   White Sand OS — Shell: topbar, sidebar, login, command palette
   ========================================================================== */

/* ---- Topbar ----------------------------------------------------------- */
.topbar{display:flex;align-items:center;gap:var(--sp-4);height:var(--topbar-h);
  padding-inline:var(--sp-4);background:color-mix(in srgb,var(--surface-1) 86%,transparent);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line);position:relative;z-index:40}
.topbar .menu-btn{display:none}
@media(max-width:920px){.topbar .menu-btn{display:grid}}
.topbar-search{flex:1;max-width:520px}
.topbar-spacer{flex:1}
.icon-btn{width:38px;height:38px;border-radius:var(--r-sm);display:grid;place-items:center;color:var(--text-2);
  font-size:17px;transition:all var(--t-fast);position:relative}
.icon-btn:hover{background:var(--surface-2);color:var(--text)}
.icon-btn .ndot{position:absolute;top:7px;inset-inline-end:7px;width:7px;height:7px;border-radius:50%;background:var(--brand);border:2px solid var(--surface-1)}
/* live unread count on the bell (notifyCenter.js) — hidden attr = zero unread */
.icon-btn .nbadge{position:absolute;top:2px;inset-inline-end:2px;min-width:16px;height:16px;padding:0 4px;
  border-radius:var(--r-pill);background:var(--danger);color:#fff;font-size:10px;font-weight:700;
  display:grid;place-items:center;line-height:1;border:2px solid var(--surface-1);pointer-events:none}
.kbd{font-family:var(--mono);font-size:10px;padding:2px 6px;border-radius:5px;background:var(--surface-3);border:1px solid var(--line-strong);color:var(--text-3)}

/* user menu trigger */
.user-trigger{display:flex;align-items:center;gap:var(--sp-2);padding:4px 6px 4px 10px;border-radius:var(--r-pill);
  border:1px solid var(--line);background:var(--surface-1);transition:all var(--t-fast)}
[dir="rtl"] .user-trigger{padding:4px 10px 4px 6px}
.user-trigger:hover{border-color:var(--line-strong);background:var(--surface-2)}
.user-meta{display:flex;flex-direction:column;line-height:1.25;text-align:start}
.user-meta b{font-size:var(--fs-sm)} .user-meta span{font-size:var(--fs-xs);color:var(--text-3)}
@media(max-width:560px){.user-meta{display:none}}

/* popover */
.popover{position:absolute;inset-block-start:calc(var(--topbar-h) - 6px);inset-inline-end:var(--sp-4);
  width:240px;background:var(--surface-1);border:1px solid var(--line-strong);border-radius:var(--r-md);
  box-shadow:var(--sh-pop);z-index:80;padding:var(--sp-2);animation:pop var(--t-fast) var(--ease-out)}
.pop-item{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3);border-radius:var(--r-sm);font-size:var(--fs-sm);font-weight:600;width:100%;text-align:start;color:var(--text);transition:background var(--t-fast)}
.pop-item:hover{background:var(--surface-2)}
.pop-item.danger{color:var(--danger)}
.pop-sep{height:1px;background:var(--line);margin:var(--sp-1) 0}

/* notification center popover (notifyCenter.js) */
.ntc-pop{width:min(360px,calc(100vw - 2*var(--sp-4)));padding:0;overflow:hidden}
.ntc-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);
  padding:var(--sp-3) var(--sp-3) var(--sp-2);border-bottom:1px solid var(--line)}
.ntc-list{max-height:min(420px,60vh);overflow-y:auto;padding:var(--sp-1)}
.ntc-item{align-items:flex-start}
.ntc-item.unread{background:color-mix(in srgb,var(--brand) 7%,transparent)}
.ntc-item.unread:hover{background:color-mix(in srgb,var(--brand) 12%,transparent)}
.ntc-ic{flex:none;font-size:16px;margin-top:1px}
.ntc-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;font-weight:500}
.ntc-txt b{font-size:var(--fs-sm);font-weight:700}
.ntc-txt span{font-size:var(--fs-xs);color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ntc-time{flex:none;font-size:var(--fs-xs);color:var(--text-3)}
.ntc-empty{padding:var(--sp-6);text-align:center;color:var(--text-3);font-size:var(--fs-sm)}
.ntc-foot{padding:var(--sp-2) var(--sp-3);border-top:1px solid var(--line)}
.ntc-foot:empty{display:none}
.pop-head{padding:var(--sp-2) var(--sp-3);font-size:var(--fs-sm);font-weight:700;color:var(--text-2)}
.theme-swatch{width:22px;height:22px;border-radius:7px;border:1px solid var(--line-strong);flex-shrink:0}

/* topbar search keyboard hint */
.searchbox .kbd{position:absolute;inset-inline-end:10px;top:50%;transform:translateY(-50%);pointer-events:none}
@media(max-width:560px){.searchbox .kbd{display:none}}

/* ---- Sidebar ---------------------------------------------------------- */
.sidebar{height:100vh;display:flex;flex-direction:column;background:var(--sidebar-bg);border-inline-end:1px solid var(--sidebar-line);color:var(--sidebar-text)}
.sidebar .sb-brand-txt b{color:var(--sidebar-text-strong)}
.sidebar .sb-brand .brand-mark{color:var(--sidebar-text-strong)}

/* sidebar nav filter */
.sb-navsearch{position:relative;display:flex;align-items:center;padding:var(--sp-3) var(--sp-3) 0;flex-shrink:0}
.sb-navsearch .ic{position:absolute;inset-inline-start:calc(var(--sp-3) + 10px);color:var(--text-3);pointer-events:none;display:flex}
.sb-navsearch input{width:100%;height:34px;padding-inline:34px var(--sp-3);background:color-mix(in srgb,var(--sidebar-text) 8%,transparent);
  border:1px solid var(--sidebar-line);border-radius:var(--r-sm);color:var(--sidebar-text-strong);font-size:var(--fs-sm)}
.sb-navsearch input:focus{border-color:var(--color-focus-ring)}
.app-frame.collapsed .sb-navsearch{display:none}
.sb-noresults{padding:var(--sp-6) var(--sp-3);text-align:center;color:var(--text-3);font-size:var(--fs-sm)}

/* favorites / recents quick-access */
.sb-quick{margin-bottom:var(--sp-2);padding-bottom:var(--sp-2);border-bottom:1px solid var(--line-soft)}
.sb-sec-static{cursor:default}
.app-frame.collapsed .sb-quick{border-bottom:none}

/* favorite star inside a nav link (appears on hover / when active) */
.ni-fav{display:grid;place-items:center;width:24px;height:24px;border-radius:6px;color:var(--text-3);
  opacity:0;transition:opacity var(--t-fast),color var(--t-fast),background var(--t-fast);flex-shrink:0}
.ni:hover .ni-fav,.ni-fav.on{opacity:1}
.ni-fav:hover{background:var(--surface-3);color:var(--text)}
.ni-fav.on{color:var(--warn)}
.ni-fav.on .icn{fill:var(--warn)}
.app-frame.collapsed .ni-fav{display:none}
.sb-brand{display:flex;align-items:center;gap:var(--sp-3);height:var(--topbar-h);padding-inline:var(--sp-4);border-bottom:1px solid var(--sidebar-line);flex-shrink:0}
.sb-brand .brand-mark{width:32px;height:32px}
.sb-logo{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;flex-shrink:0;
  background:linear-gradient(135deg,var(--brand),var(--brand-strong));color:#fff;font-weight:800;font-size:18px;box-shadow:0 4px 14px var(--brand-glow)}
.sb-brand-txt{display:flex;flex-direction:column;line-height:1.2;overflow:hidden}
.sb-brand-txt b{font-size:var(--fs-md);font-weight:800;white-space:nowrap}
.sb-brand-txt span{font-size:10px;color:var(--text-3);font-family:var(--mono);letter-spacing:.12em;white-space:nowrap}
.app-frame.collapsed .sb-brand-txt,.app-frame.collapsed .sb-sec-label,.app-frame.collapsed .ni-label,.app-frame.collapsed .ni-badge{display:none}
.app-frame.collapsed .sb-brand{justify-content:center;padding-inline:0}
.app-frame.collapsed .ni{justify-content:center;padding-inline:0}

.sb-scroll{flex:1;overflow-y:auto;padding:var(--sp-3) var(--sp-2)}
.sb-group{margin-bottom:var(--sp-1)}
.sb-sec{display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--sp-3) var(--sp-3) var(--sp-1);cursor:pointer;text-align:start;color:var(--sidebar-text);opacity:.72;transition:opacity var(--t-fast)}
.sb-sec:hover{opacity:1;color:var(--sidebar-text-strong)}
.sb-sec-label{font-size:10px;font-weight:700;color:inherit;text-transform:uppercase;letter-spacing:.08em}
.sb-sec-caret{display:flex;line-height:1;transition:transform var(--t-fast);opacity:.7}
.sb-items{overflow:hidden;transition:max-height var(--t) var(--ease),opacity var(--t-fast);max-height:1400px;opacity:1}
.sb-group.collapsed .sb-items{max-height:0;opacity:0;pointer-events:none}
.sb-group.collapsed .sb-sec-caret{transform:rotate(-90deg)}
.app-frame.collapsed .sb-sec-caret{display:none}
.app-frame.collapsed .sb-sec{pointer-events:none;justify-content:center}
.app-frame.collapsed .sb-group.collapsed .sb-items{max-height:1400px;opacity:1;pointer-events:auto}
.ni{display:flex;align-items:center;gap:var(--sp-3);min-height:40px;padding-inline:var(--sp-3);border-radius:var(--r-sm);
  color:var(--sidebar-text);font-size:var(--fs-sm);font-weight:600;cursor:pointer;transition:background var(--t-fast),color var(--t-fast);position:relative;margin-bottom:1px}
.ni:hover{background:color-mix(in srgb,var(--sidebar-text) 9%,transparent);color:var(--sidebar-text-strong)}
.ni-ic{display:grid;place-items:center;width:22px;flex-shrink:0;color:var(--sidebar-text);opacity:.8}
.ni:hover .ni-ic,.ni.active .ni-ic{color:inherit;opacity:1}
.app-frame.collapsed .ni-ic{opacity:1}
.ni-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ni-badge{font-size:10px;font-weight:700;padding:1px 7px;border-radius:99px;background:color-mix(in srgb,var(--sidebar-text) 14%,transparent);color:var(--sidebar-text-strong);font-family:var(--font-num)}
.ni.active{background:var(--sidebar-active-bg);color:var(--sidebar-active-text)}
.ni.active::before{content:"";position:absolute;inset-inline-start:0;inset-block:8px;width:3px;border-radius:99px;background:var(--sidebar-active-text)}
.ni.active .ni-badge{background:var(--sidebar-active-text);color:#fff}
.sb-foot{padding:var(--sp-3);border-top:1px solid var(--sidebar-line);flex-shrink:0;display:flex;flex-direction:column;gap:var(--sp-2)}
.collapse-btn{display:flex;align-items:center;justify-content:center;gap:var(--sp-2);width:100%;height:34px;border-radius:var(--r-sm);color:var(--text-3);font-size:var(--fs-xs);font-weight:600;transition:all var(--t-fast)}
.collapse-btn:hover{background:var(--surface-2);color:var(--text)}
/* Role-view switch (manager ⇄ rep) */
.sb-roleswitch{display:flex;gap:2px;padding:3px;background:var(--surface-2);border-radius:var(--r-sm)}
.rs-btn{flex:1;height:28px;border-radius:calc(var(--r-sm) - 3px);font-size:var(--fs-xs);font-weight:600;color:var(--text-3);transition:all var(--t-fast)}
.rs-btn:hover{color:var(--text)}
.rs-btn.on{background:var(--surface-1);color:var(--text);box-shadow:var(--sh-sm)}
.app-frame.collapsed .sb-roleswitch{display:none}
/* Language toggle pill in the topbar */
.lang-btn{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.02em}

/* ---- Command palette -------------------------------------------------- */
.cmdk-overlay{position:fixed;inset:0;background:rgba(6,8,14,.6);backdrop-filter:blur(6px);z-index:180;
  display:flex;align-items:flex-start;justify-content:center;padding-top:12vh;animation:fade-in var(--t-fast)}
.cmdk{width:min(620px,94vw);background:var(--surface-1);border:1px solid var(--line-strong);border-radius:var(--r-lg);
  box-shadow:var(--sh-lg);overflow:hidden;animation:pop var(--t) var(--ease-out)}
.cmdk-input{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--line)}
.cmdk-input .ic{font-size:19px;color:var(--text-3)}
.cmdk-input input{flex:1;background:none;border:none;font-size:var(--fs-lg);color:var(--text)}
.cmdk-list{max-height:54vh;overflow:auto;padding:var(--sp-2)}
.cmdk-item{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-3);border-radius:var(--r-sm);cursor:pointer;font-size:var(--fs-sm);font-weight:600}
.cmdk-item .ic{font-size:17px;width:24px;text-align:center;color:var(--text-2)}
.cmdk-item .sec{margin-inline-start:auto;font-size:var(--fs-xs);color:var(--text-3)}
.cmdk-item.sel,.cmdk-item:hover{background:var(--brand-tint);color:var(--brand)}
.cmdk-item.sel .ic{color:var(--brand)}
.cmdk-item .cmdk-fav{color:var(--warn);display:flex}
.cmdk-item .cmdk-fav .icn{fill:var(--warn)}
.cmdk-empty{padding:var(--sp-8);text-align:center;color:var(--text-3);font-size:var(--fs-sm)}
/* omni-bar (Phase 2): group headers, help rows, normalized-match highlight */
.cmdk-group-h{padding:var(--sp-2) var(--sp-3) var(--sp-1);font-size:var(--fs-xs);font-weight:700;color:var(--text-3)}
.cmdk-help{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-3);color:var(--text-2);font-size:var(--fs-sm)}
.cmdk-item mark,#os-res mark{background:var(--brand-tint);color:var(--brand);border-radius:3px;padding:0 1px}
.cmdk-foot{display:flex;align-items:center;gap:6px;padding:var(--sp-2) var(--sp-4);border-top:1px solid var(--line);
  color:var(--text-3);font-size:var(--fs-xs);flex-wrap:wrap}
.cmdk-foot .kbd{margin-inline-start:4px}

/* ---- Login ------------------------------------------------------------ */
.login-screen{height:100vh;display:grid;grid-template-columns:1.05fr .95fr}
@media(max-width:880px){.login-screen{grid-template-columns:1fr}.login-aside{display:none}}
.login-aside{position:relative;overflow:hidden;background:linear-gradient(150deg,#0b0e16,#13101a 55%,#1a0f12);display:flex;flex-direction:column;justify-content:space-between;padding:var(--sp-12)}
.login-aside::before{content:"";position:absolute;inset:0;background:
  radial-gradient(680px 380px at 78% 12%,var(--brand-glow),transparent 60%),
  radial-gradient(520px 360px at 10% 90%,color-mix(in srgb,var(--info) 30%,transparent),transparent 60%)}
.login-aside .grid-bg{position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(var(--line-soft) 1px,transparent 1px),linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);
  background-size:46px 46px;mask-image:radial-gradient(circle at 60% 40%,#000,transparent 75%)}
.login-aside>*{position:relative;z-index:1}
/* Brand stage: the full White Sand wordmark, centered. The wordmark inherits
   this light color (currentColor) so it reads white on the dark aside; the mark,
   the "D" swoosh and the separator line stay White Sand red. */
.brand-stage{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:var(--sp-4);color:#fff}
.brand-full{width:min(460px,74%)}
.brand-full svg{width:100%;height:auto;filter:drop-shadow(0 8px 30px rgba(0,0,0,.35))}
.brand-tag{font-family:var(--mono);font-size:var(--fs-lg);font-weight:700;font-style:italic;letter-spacing:.02em;color:color-mix(in srgb,#fff 82%,transparent)}
.brand-tag b{color:var(--brand-soft);font-style:italic}
.brand-sub{font-family:var(--mono);font-size:var(--fs-sm);letter-spacing:.42em;color:color-mix(in srgb,#fff 55%,transparent);padding-inline-start:.42em}
/* Four-square mark used in the login card + sidebar (recolors per theme). */
.brand-mark{display:inline-grid;place-items:center;flex-shrink:0;color:var(--text)}
.brand-mark svg{width:100%;height:100%;display:block}
.login-main{display:grid;place-items:center;padding:var(--sp-6);background:var(--surface-0)}
.login-card{width:min(400px,94vw)}
.login-card .brand-mark{width:46px;height:46px;margin-bottom:var(--sp-5)}
.login-card h2{font-size:var(--fs-2xl);font-weight:800;margin-bottom:4px}
.login-card .sub{color:var(--text-2);font-size:var(--fs-sm);margin-bottom:var(--sp-6)}
.login-err{display:none;align-items:center;gap:var(--sp-2);padding:var(--sp-3);border-radius:var(--r-sm);background:var(--danger-tint);color:var(--danger);font-size:var(--fs-sm);font-weight:600;margin-bottom:var(--sp-4)}
.login-err.show{display:flex;animation:pop var(--t-fast)}
.conn-pill{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-xs);font-weight:600;color:var(--text-3)}
.conn-pill .dot{width:7px;height:7px;border-radius:50%;background:var(--text-3)}
.conn-pill.ok .dot{background:var(--ok);box-shadow:0 0 8px var(--ok)}
.conn-pill.bad .dot{background:var(--danger)}