/* ─────────────────────────────────────────────────────────────
   shared.css  –  RS·Callcenter
   Tokens, reset, topnav, theme-toggle, spinner.
   Imported by every page; page-specific styles live in their
   own <style> blocks or separate CSS files.
   ───────────────────────────────────────────────────────────── */

/* ── Reset ── */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;font-family:'Inter',system-ui,-apple-system,sans-serif;font-size:14px;-webkit-font-smoothing:antialiased}

/* ── Geometry tokens (color tokens live in [data-theme] below) ── */
:root{
  --font-sans:'Inter',system-ui,sans-serif;
  --radius-md:8px;
  --radius-lg:12px;
}

/* ── Light theme ── */
.app[data-theme="light"]{
  --bg0:#faf8f2;--bg1:#f0ece0;--bg2:#e4dfd0;--bg3:#d6d0c0;
  --border0:rgba(100,85,50,0.12);--border1:rgba(100,85,50,0.22);
  --t0:#2a2418;--t1:#5a5040;--t2:#8a8070;--t3:#b0a898;
  --acc:#8a7a20;--acc-bg:#f5f0d8;--acc-t:#5a5010;
  --green:#3B6D11;--green-bg:#EAF3DE;--green-t:#27500A;
  --amber:#854F0B;--amber-bg:#FAEEDA;--amber-t:#633806;
  --red:#A32D2D;--red-bg:#FCEBEB;--red-t:#791F1F;
}

/* ── Dark theme ── */
.app[data-theme="dark"]{
  --bg0:#1e1c18;--bg1:#252318;--bg2:#2c2a20;--bg3:#333028;
  --border0:rgba(255,240,180,0.07);--border1:rgba(255,240,180,0.14);
  --t0:#ede8d8;--t1:#a09880;--t2:#686050;--t3:#484038;
  --acc:#c8b048;--acc-bg:#2a2610;--acc-t:#e8d878;
  --green:#3B6D11;--green-bg:#162410;--green-t:#a8d878;
  --amber:#854F0B;--amber-bg:#2a1e08;--amber-t:#f0b860;
  --red:#A32D2D;--red-bg:#2a1010;--red-t:#f09090;
}

/* ── App shell ── */
.app{
  background:var(--bg3);
  min-height:100vh;
  display:flex;
  flex-direction:column;
  color:var(--t0);
  transition:background .22s,color .22s;
}

/* ── Topnav ── */
.topnav{
  background:var(--bg0);
  border-bottom:0.5px solid var(--border0);
  border-top:3px solid var(--acc);
  padding:0 20px;
  display:flex;
  align-items:center;
  height:56px;
  flex-shrink:0;
  gap:8px;
  transition:background .22s;
}
.nav-logo{display:flex;align-items:baseline;gap:8px}
.nav-logo-brs{font-size:22px;font-weight:500;color:var(--acc);letter-spacing:.04em;font-style:italic}
.nav-logo-sub{font-size:12px;color:var(--t1);letter-spacing:.01em;font-style:italic}
.nav-spacer{flex:1}

/* ── Theme toggle (used in topnav on login; in user-dropdown on app) ── */
.theme-toggle-nav{display:flex;gap:4px}
.theme-opt-nav,.theme-opt{
  font-size:11px;color:var(--t2);cursor:pointer;
  padding:4px 8px;border-radius:var(--radius-md);
  border:0.5px solid var(--border1);background:transparent;
  font-family:var(--font-sans);
  transition:background .15s,color .15s;user-select:none;
}
.theme-opt-nav.active,.theme-opt.active{
  background:var(--acc-bg);color:var(--acc-t);
  border-color:var(--acc);font-weight:500;
}
.theme-opt-nav:not(.active):hover,.theme-opt:not(.active):hover{background:var(--bg1)}

/* ── Spinner ── */
.spinner{
  display:inline-block;
  width:13px;height:13px;
  border:1.5px solid rgba(255,255,255,0.3);
  border-top-color:rgba(255,255,255,0.9);
  border-radius:50%;
  animation:spin .65s linear infinite;
  vertical-align:middle;margin-right:6px;
}
.app[data-theme="dark"] .spinner{
  border-color:rgba(0,0,0,0.2);
  border-top-color:rgba(0,0,0,0.8);
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── Icon button (shared between pages) ── */
.icon-btn{
  width:32px;height:32px;border-radius:var(--radius-md);
  border:0.5px solid var(--border1);background:transparent;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  color:var(--t1);transition:background .15s,border-color .15s,color .15s;flex-shrink:0;
}
.icon-btn:hover{background:var(--bg2);color:var(--t0)}
.icon-btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}