/* SBEOS app-shell modernization (Phases 1-4): design tokens, collapsible/resizable
   sidebar, breadcrumb + page header, command palette, toasts, empty states, density.
   Progressive enhancement over the base theme — server-rendered, tiny vanilla JS. */

:root {
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;
  --r-sm: 6px;  --r-md: 8px;  --r-lg: 12px; --r-xl: 16px; --r-full: 999px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.14);
  --shadow-md: 0 4px 10px rgba(0,0,0,.18);
  --shadow-lg: 0 12px 30px rgba(0,0,0,.28);
  --side-w: 236px;
}

/* ---- collapsible / resizable sidebar ---- */
.side { width: var(--side-w); transition: width .16s ease; position: relative; }
.side .side-head { display:flex; align-items:center; gap:8px; padding:14px 14px 6px; }
.side .side-head .logo { width:26px; height:26px; border-radius:7px; object-fit:cover;
                         background:var(--surface-hover); flex-shrink:0; }
.side .side-head .brand { font-weight:700; font-size:17px; letter-spacing:-.01em;
                          overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.side .collapse-btn { margin-left:auto; background:transparent; border:0; color:var(--muted);
                      cursor:pointer; padding:4px; border-radius:6px; line-height:0; }
.side .collapse-btn:hover { background:var(--surface-hover); color:var(--foreground); }
.side .cmdk-trigger { display:flex; align-items:center; gap:8px; margin:6px 12px 2px;
   padding:7px 10px; border:1px solid var(--border); border-radius:8px; background:var(--surface);
   color:var(--muted); font-size:13px; cursor:pointer; width:calc(100% - 24px); }
.side .cmdk-trigger:hover { border-color:var(--primary); color:var(--foreground); }
.side .cmdk-trigger kbd { margin-left:auto; font:inherit; font-size:11px; border:1px solid var(--border);
   border-radius:4px; padding:0 5px; background:var(--card); }
.side .side-resize { position:absolute; top:0; right:-3px; width:6px; height:100%; cursor:col-resize; z-index:5; }
.side .side-resize:hover { background:color-mix(in srgb, var(--primary) 40%, transparent); }

html.nav-collapsed { --side-w: 66px; }
html.nav-collapsed .side .brand,
html.nav-collapsed .side .navitem .grow,
html.nav-collapsed .side .navgroup-h,
html.nav-collapsed .side .cmdk-trigger span,
html.nav-collapsed .side .cmdk-trigger kbd { display:none; }
html.nav-collapsed .side .navitem { justify-content:center; }
html.nav-collapsed .side .cmdk-trigger { justify-content:center; width:auto; margin:6px 12px; }
html.nav-collapsed .side .side-head { justify-content:center; }

/* ---- page header + breadcrumb + toolbar ---- */
.pagehead { display:flex; align-items:center; gap:var(--sp-4); flex-wrap:wrap;
            margin:0 0 var(--sp-4); }
.crumbs { font-size:12px; color:var(--muted); display:flex; gap:6px; align-items:center; }
.crumbs a { color:var(--muted); text-decoration:none; }
.crumbs a:hover { color:var(--primary); }
.crumbs .sep { opacity:.5; }
.pagehead .toolbar { margin-left:auto; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
main > h1:first-child, .pagehead + h1 { margin-top:0; }

/* ---- command palette ---- */
.cmdk-overlay { position:fixed; inset:0; background:rgba(0,0,0,.5); display:none;
                z-index:400; backdrop-filter:blur(2px); }
.cmdk-overlay.open { display:block; }
.cmdk { width:min(560px,92vw); margin:12vh auto 0; background:var(--card);
        border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-lg);
        overflow:hidden; }
.cmdk > input { width:100%; border:0; border-bottom:1px solid var(--border);
   background:transparent; color:var(--foreground); padding:14px 16px; font-size:15px; outline:none; }
.cmdk-list { max-height:52vh; overflow:auto; padding:6px; }
.cmdk-item { display:flex; align-items:center; gap:11px; padding:9px 11px; border-radius:8px;
   color:var(--foreground); text-decoration:none; font-size:14px; cursor:pointer; }
.cmdk-item svg { width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:1.7; opacity:.85; }
.cmdk-item .grp { margin-left:auto; font-size:11px; color:var(--muted); }
.cmdk-item.sel, .cmdk-item:hover { background:color-mix(in srgb, var(--primary) 15%, transparent);
   color:var(--primary); }
.cmdk-empty { padding:18px; color:var(--muted); font-size:13px; text-align:center; }

/* ---- toasts ---- */
.toasts { position:fixed; top:16px; right:16px; z-index:500; display:flex;
          flex-direction:column; gap:10px; max-width:min(380px,90vw); }
.toast { background:var(--card); border:1px solid var(--border); border-left:4px solid var(--ok);
   border-radius:var(--r-md); box-shadow:var(--shadow-md); padding:11px 14px; font-size:14px;
   color:var(--foreground); display:flex; gap:10px; align-items:flex-start;
   animation:toast-in .22s ease; }
.toast.error { border-left-color:var(--bad); }
.toast .x { margin-left:auto; cursor:pointer; color:var(--muted); border:0; background:none; font-size:16px; line-height:1; }
@keyframes toast-in { from { opacity:0; transform:translateX(20px); } to { opacity:1; transform:none; } }

/* ---- empty states ---- */
.empty { text-align:center; padding:44px 24px; color:var(--muted); border:1px dashed var(--border);
         border-radius:var(--r-lg); background:var(--card); }
.empty .ico { width:40px; height:40px; margin:0 auto 10px; opacity:.5; stroke:currentColor;
              fill:none; stroke-width:1.5; }
.empty h3 { margin:0 0 6px; color:var(--foreground); font-size:16px; }

/* ---- setup progress ring ---- */
.ring-wrap { display:flex; align-items:center; gap:14px; }
.ring { --pct:0; width:56px; height:56px; border-radius:50%; flex-shrink:0;
   background: conic-gradient(var(--primary) calc(var(--pct)*1%), var(--surface-hover) 0);
   display:grid; place-items:center; }
.ring::before { content:""; width:42px; height:42px; border-radius:50%; background:var(--card); grid-area:1/1; }
.ring b { grid-area:1/1; font-size:13px; font-weight:700; z-index:1; }

/* next-best-action banner */
.nba { display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:var(--r-lg);
   border:1px solid color-mix(in srgb, var(--primary) 35%, var(--border));
   background:color-mix(in srgb, var(--primary) 9%, var(--card)); margin-bottom:18px; }
.nba .grow { flex:1; }
.nba a.primary { white-space:nowrap; padding:7px 14px; border-radius:8px; }

/* ---- density ---- */
[data-density="compact"] main { padding-top:16px; }
[data-density="compact"] .card { padding:9px 12px; }
[data-density="compact"] th, [data-density="compact"] td { padding:5px 9px; }
[data-density="compact"] .navitem { padding:6px 10px; }
[data-density="compact"] h1 { margin:2px 0 10px; }

/* ---- reduce motion ---- */
[data-animations="false"] * { transition:none !important; animation:none !important; }