/* Shipo shared UI (app.css) — design tokens, base element rules, the app shell
 * (sidebar + header) and dialog primitives used by board/pricing/suppliers.
 * login.html links it too, for the tokens (and the lang-toggle in i18n.js).
 * Page-specific styling stays in each page's own <style>. No build step —
 * served as-is from backend/src/public/. */

:root { --bg:#17181b; --panel:#1e1f23; --card:#28292e; --line:rgba(255,255,255,.10); --txt:#f2f3f5; --muted:#aeb2b7; --accent:#3398a9; --accent-hover:#4bb3c6; --green:#37c172; --amber:#f1b324; --red:#ec6742; }
* { box-sizing:border-box; }
html { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; }
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(255,255,255,.14); border-radius:8px; border:2px solid transparent; background-clip:padding-box; }
::-webkit-scrollbar-thumb:hover { background:rgba(51,152,169,.6); border:2px solid transparent; background-clip:padding-box; }
::-webkit-scrollbar-corner { background:transparent; }
body { margin:0; font:14px/1.5 'Space Grotesk',-apple-system,Segoe UI,Roboto,sans-serif; background:var(--bg); color:var(--txt); }
a { color:var(--accent); }
/* Shared input reset — the board's card-background variant is canonical (the
   old pricing/suppliers --bg variant was copy-paste drift); font-family:inherit
   keeps inputs/textareas off the UA default font (suppliers already did this). */
input, select, button, textarea { background:var(--card); color:var(--txt); border:1px solid var(--line); border-radius:7px; padding:7px 10px; font-size:13px; font-family:inherit; }
select, button { cursor:pointer; }
button:hover, select:hover { border-color:var(--accent); }
.muted { color:var(--muted); }

/* ── App shell: sidebar + header (identical on board/pricing/suppliers) ── */
.layout { display:flex; min-height:100vh; }
.sidebar { width:250px; flex:0 0 auto; background:var(--panel); border-right:1px solid var(--line); padding:14px 12px; position:sticky; top:0; height:100vh; transition:width .18s ease; }
.sidebar.collapsed { width:62px; padding:14px 8px; }
.side-head { display:flex; align-items:flex-end; justify-content:space-between; gap:6px; margin-bottom:14px; }
.sidebar.collapsed .side-head { justify-content:center; }
.sidebar .brand { display:flex; align-items:flex-end; gap:7px; min-width:0; flex:0 1 auto; }
.sidebar.collapsed .brand { display:none; }
.sidebar .brand img { height:30px; width:auto; display:block; position:relative; top:-3px; flex:0 0 auto; }
.sidebar .brand .wm { font-size:22px; font-weight:700; letter-spacing:2px; line-height:1; color:#fff; margin-bottom:6px; white-space:nowrap; overflow:hidden; min-width:0; }
.collapse-btn { flex:0 0 auto; width:24px; height:24px; border-radius:6px; background:var(--card); color:var(--muted); border:1px solid var(--line); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:15px; line-height:1; padding:0; position:relative; top:-6px; }
.collapse-btn:hover { color:var(--txt); border-color:var(--accent); }
.sidebar.collapsed .collapse-btn { top:0; }
.nav-item { display:flex; align-items:center; gap:11px; padding:9px 11px; border-radius:8px; color:var(--muted); text-decoration:none; font-weight:500; margin-bottom:3px; white-space:nowrap; overflow:hidden; }
.nav-item:hover { background:var(--card); color:var(--txt); }
.nav-item.active { background:var(--accent); color:#fff; }
.nav-item .ico { flex:0 0 auto; width:20px; height:20px; display:flex; align-items:center; justify-content:center; }
.nav-item .ico svg { width:19px; height:19px; display:block; }
.sidebar.collapsed .nav-item { justify-content:center; padding:9px 0; }
.sidebar.collapsed .nav-item .label { display:none; }
.main { flex:1; min-width:0; }
header { display:flex; align-items:center; gap:16px; padding:12px 18px; background:var(--panel); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:5; }
header h1 { font-size:16px; margin:0; font-weight:600; }

/* ── Role-aware chrome (WP-U1) ──
   Anything marked data-perm="resource:action" starts hidden and is revealed by
   ui.js only when /api/me says this session holds that permission; otherwise
   the element is removed outright. Hidden-by-default is the safe direction: a
   page that never gets an answer shows less, not more. Server-side gating is
   the real control (middleware/require-role.ts) — this only stops us offering
   panels whose data endpoints would answer 403.
   .role-chip names the signed-in role in the header. */
[data-perm] { display:none !important; }
.role-chip { display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:999px; border:1px solid var(--line); background:var(--card); color:var(--muted); font-size:12px; white-space:nowrap; }
.role-chip.privileged { border-color:var(--accent); color:var(--accent); }

/* ── Dialog primitives ──
   .dlg-overlay: full-screen dimmer (display:flex to open; per-dialog z-index /
   alignment overridden by id rules where needed).
   .dlg-box: the small centered dialog shell (UI.confirm).
   .dlg-field: themed form field inside dialogs — replaces the old repeated
   inline "background:var(--bg);color:var(--txt);border:1px solid var(--line);
   border-radius:7px;padding:8px 10px" string. color-scheme:dark keeps native
   widgets (date pickers, number spinners) dark without per-field hacks. */
.dlg-overlay { position:fixed; inset:0; background:rgba(0,0,0,.55); display:none; align-items:flex-start; justify-content:center; padding:5vh 16px; z-index:25; overflow-y:auto; }
.dlg-box { background:var(--panel); border:1px solid var(--line); border-radius:12px; width:420px; max-width:100%; padding:18px; box-shadow:0 14px 34px rgba(0,0,0,.45); }
.dlg-field { background:var(--bg); color:var(--txt); border:1px solid var(--line); border-radius:7px; padding:8px 10px; color-scheme:dark; }

/* UI.confirm (ui.js) — centered, above every other overlay. */
#ui-confirm-overlay { align-items:center; padding:16px; z-index:40; }
#ui-confirm-overlay h3 { margin:0 0 8px; font-size:15px; }
#ui-confirm-msg { font-size:13px; margin-bottom:16px; white-space:pre-line; }

/* UI.toast (ui.js): persistent themed error toast (audit U2). Lives OUTSIDE
   any polled container so an innerHTML rebuild can never wipe it; dismissed by
   a click on the toast itself or the ~6s auto-timer — never by random clicks. */
#ui-toast { display:none; position:fixed; right:18px; bottom:18px; z-index:400; max-width:440px;
  background:var(--panel); border:1px solid var(--red); color:var(--red); border-radius:9px;
  padding:10px 14px; font-size:13px; box-shadow:0 8px 28px rgba(0,0,0,.5); overflow-wrap:anywhere; cursor:pointer; }