/* Theme tokens shared by the admin, employee and client portals.
   <html data-theme="dark|light"> is set before first paint by the inline script in each page's <head>. */
:root,html[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0d0d0d;--side:#1a1a1a;--panel:#1e1e1e;--panel2:#252525;--hover:#2d2d2d;--input:#161616;
  --line:#2a2a2a;--line2:#3a3a3a;--text:#e5e5e5;--strong:#ffffff;--sub:#aaaaaa;--muted:#888888;--dim:#666666;
  --accentSoft:#2d2150;--col:#171717;--card:#1e1e1e;--shadow:none;--overlay:rgba(0,0,0,.65);--chip:#262626;
}
html[data-theme="light"]{
  color-scheme:light;
  --bg:#f8f9fa;--side:#ffffff;--panel:#ffffff;--panel2:#f3f4f6;--hover:#eef0f3;--input:#f9fafb;
  --line:#e5e7eb;--line2:#d1d5db;--text:#111827;--strong:#111827;--sub:#4b5563;--muted:#6b7280;--dim:#9ca3af;
  --accentSoft:#ede9fe;--col:#f3f4f6;--card:#ffffff;--shadow:0 1px 3px rgba(0,0,0,.1);--overlay:rgba(17,24,39,.45);--chip:#f3f4f6;
}
/* smooth switch */
*{transition:background-color .2s ease,color .2s ease,border-color .2s ease}
/* the toggle button (top bar, far right) */
.theme-btn{background:var(--panel);border:1px solid var(--line2);color:var(--strong);width:38px;height:38px;border-radius:10px;font-size:18px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex:none;padding:0;margin-left:12px}
.theme-btn:hover{background:var(--panel2)}
.logo{color:#fff !important}   /* the MB mark is white on its purple tile in both themes */