/* ================================================================
   GridPulseHR — Design System v2.0
   Author: Ruel B. Torrente | ITBridge Consulting
   Optimized for high concurrency: minimal repaints, CSS containment,
   GPU-accelerated animations, no layout thrash
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;600&display=swap');

/* ── CSS Variables ─────────────────────────────────────────── */
:root {
  --p:          #1E3A5F;  --pl: #2A5080;  --pd: #152B47;
  --s:          #2563EB;  --sl: #3B82F6;  --sd: #1D4ED8;
  --a:          #F59E0B;  --al: #FBBF24;
  --ok:         #10B981;  --warn: #F59E0B; --err: #EF4444;
  --sur:        #FFFFFF;  --sur2: #F8FAFC; --sur3: #F1F5F9;
  --bg:         #F0F4F8;
  --txt:        #0F172A;  --txt2: #334155; --txt3: #64748B; --txt4: #94A3B8;
  --brd:        #E2E8F0;  --brd2: #CBD5E1;
  --sh:         0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shm:        0 4px 16px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.04);
  --shl:        0 20px 50px rgba(0,0,0,.12);
  --rad:        10px;  --rad2: 14px;
  --tr:         all .18s cubic-bezier(.4,0,.2,1);
  --fm:         'JetBrains Mono', monospace;
  --ff:         'Plus Jakarta Sans', system-ui, sans-serif;
  --sb-w:       240px;
  --sb-w-col:   64px;
  --hdr-h:      56px;
}

/* ── Reset & Base ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 14px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--ff);
  background: var(--bg);
  color: var(--txt);
  min-height: 100vh;
  overflow-x: hidden;
  contain: layout;
}
img { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font-family: inherit; }
a { color: var(--s); text-decoration: none; }

/* ── Layout Shell ──────────────────────────────────────────── */
.app-shell { display: flex; min-height: 100vh; }

/* ── Sidebar ───────────────────────────────────────────────── */
.sb {
  width: var(--sb-w);
  min-height: 100vh;
  background: var(--p);
  display: flex;
  flex-direction: column;
  position: fixed;
  left: 0; top: 0; bottom: 0;
  z-index: 200;
  transition: width .22s cubic-bezier(.4,0,.2,1), transform .22s cubic-bezier(.4,0,.2,1);
  contain: layout style;
  will-change: width;
  overflow: hidden;
}
.sb.collapsed { width: var(--sb-w-col); }
.sb.collapsed .nl, .sb.collapsed .nsl, .sb.collapsed .sb-logo-text, .sb.collapsed .sb-foot-info { display: none !important; }
.sb.collapsed .ni { justify-content: center; padding: 0 0 0 18px; }
.sb.collapsed .nic { margin: 0; }

/* Sidebar header */
.sb-head {
  padding: 16px 16px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--hdr-h);
}
.sb-logo {
  width: 32px; height: 32px;
  background: var(--a);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 13px; color: #fff;
  flex-shrink: 0;
  letter-spacing: -0.5px;
}
.sb-logo-text {
  flex: 1;
  overflow: hidden;
}
.sb-logo-text strong { display: block; color: #fff; font-size: 13px; font-weight: 700; white-space: nowrap; }
.sb-logo-text span { display: block; color: rgba(255,255,255,.45); font-size: 10.5px; white-space: nowrap; }
.sb-toggle {
  width: 28px; height: 28px;
  background: rgba(255,255,255,.08);
  border: none; border-radius: 6px; cursor: pointer;
  color: rgba(255,255,255,.7);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: var(--tr);
}
.sb-toggle:hover { background: rgba(255,255,255,.15); color: #fff; }

/* Nav scroll area */
.sb-nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.15) transparent;
}
.sb-nav::-webkit-scrollbar { width: 4px; }
.sb-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 4px; }

/* Nav section label */
.nsl {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255,255,255,.35);
  padding: 14px 10px 5px;
  white-space: nowrap;
  overflow: hidden;
}

/* Nav item */
.ni {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 8px;
  color: rgba(255,255,255,.65);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background .14s, color .14s;
  white-space: nowrap;
  overflow: hidden;
  text-decoration: none;
  contain: layout;
  position: relative;
}
.ni:hover { background: rgba(255,255,255,.08); color: #fff; }
.ni.act {
  background: rgba(255,255,255,.14);
  color: #fff;
  font-weight: 700;
}
.ni.act::before {
  content: '';
  position: absolute;
  left: 0; top: 20%; bottom: 20%;
  width: 3px;
  background: var(--a);
  border-radius: 0 3px 3px 0;
}
.nic { width: 16px; height: 16px; flex-shrink: 0; }
.nl { flex: 1; }

/* Nav badge (notification count) */
.nb {
  background: var(--a);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 20px;
  min-width: 16px;
  text-align: center;
}

/* Sidebar footer */
.sb-foot {
  padding: 10px 8px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.sb-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: var(--tr);
  color: rgba(255,255,255,.75);
  font-size: 12px;
  position: relative;
}
.sb-user:hover { background: rgba(255,255,255,.08); color: #fff; }
.ua {
  width: 30px; height: 30px;
  background: rgba(255,255,255,.18);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; color: #fff;
  flex-shrink: 0;
}
.sb-foot-info { flex: 1; overflow: hidden; }
.un { font-weight: 600; color: #fff; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ur { color: rgba(255,255,255,.45); font-size: 10.5px; white-space: nowrap; }

/* User dropdown */
.user-drop {
  position: absolute;
  bottom: 100%;
  left: 0; right: 0;
  background: var(--sur);
  border: 1px solid var(--brd);
  border-radius: var(--rad);
  box-shadow: var(--shm);
  padding: 6px;
  display: none;
  z-index: 300;
}
.user-drop.open { display: block; }
.ud-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 7px;
  font-size: 12.5px;
  color: var(--txt2);
  cursor: pointer;
  transition: var(--tr);
}
.ud-item:hover { background: var(--sur3); color: var(--p); }
.ud-item.danger:hover { background: #FEE2E2; color: var(--err); }

/* ── Main Content Area ─────────────────────────────────────── */
.main {
  flex: 1;
  margin-left: var(--sb-w);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: margin-left .22s cubic-bezier(.4,0,.2,1);
}
.main.sb-collapsed { margin-left: var(--sb-w-col); }

/* ── Top Header Bar ────────────────────────────────────────── */
.hdr {
  height: var(--hdr-h);
  background: var(--sur);
  border-bottom: 1px solid var(--brd);
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 12px;
  position: sticky;
  top: 0;
  z-index: 100;
  contain: layout style;
}
.hdr-breadcrumb {
  flex: 1;
  font-size: 12.5px;
  color: var(--txt3);
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.hdr-breadcrumb strong { color: var(--txt); font-weight: 600; white-space: nowrap; }
.hdr-actions { display: flex; align-items: center; gap: 8px; }
.hdr-btn {
  width: 32px; height: 32px;
  border-radius: 8px;
  border: 1px solid var(--brd);
  background: var(--sur);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--txt3);
  transition: var(--tr);
  position: relative;
}
.hdr-btn:hover { background: var(--sur2); color: var(--txt); }
.hdr-notif-dot {
  position: absolute;
  top: 6px; right: 6px;
  width: 6px; height: 6px;
  background: var(--err);
  border-radius: 50%;
  border: 1.5px solid var(--sur);
}

/* Search bar */
.hdr-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--sur2);
  border: 1px solid var(--brd);
  border-radius: 8px;
  padding: 0 10px;
  height: 32px;
  min-width: 200px;
  transition: var(--tr);
}
.hdr-search:focus-within {
  background: var(--sur);
  border-color: var(--s);
  box-shadow: 0 0 0 3px rgba(37,99,235,.1);
}
.hdr-search svg { color: var(--txt4); flex-shrink: 0; }
.hdr-search input {
  border: none;
  background: transparent;
  font-size: 12.5px;
  color: var(--txt);
  outline: none;
  width: 100%;
}
.hdr-search input::placeholder { color: var(--txt4); }

/* Company switcher */
.co-switcher {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--sur2);
  border: 1px solid var(--brd);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--p);
  cursor: pointer;
  transition: var(--tr);
  white-space: nowrap;
  max-width: 180px;
  overflow: hidden;
}
.co-switcher:hover { background: var(--sur3); }
.co-switcher-name { overflow: hidden; text-overflow: ellipsis; }

/* ── Page Content ─────────────────────────────────────────── */
.content { flex: 1; padding: 20px; max-width: 1600px; width: 100%; margin: 0 auto; }

/* ── Page Header ──────────────────────────────────────────── */
.ph {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.ptitle { font-size: 20px; font-weight: 800; color: var(--p); line-height: 1.2; }
.psub { font-size: 12.5px; color: var(--txt3); margin-top: 3px; }
.pa { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ── Cards ────────────────────────────────────────────────── */
.card {
  background: var(--sur);
  border: 1px solid var(--brd);
  border-radius: var(--rad2);
  box-shadow: var(--sh);
  overflow: hidden;
  contain: layout;
}
.card.mb4 { margin-bottom: 14px; }
.ch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--brd);
  gap: 10px;
}
.ct { font-weight: 700; font-size: 13.5px; color: var(--p); }
.cb { padding: 16px 18px; }

/* ── Stat Grid ────────────────────────────────────────────── */
.sg {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.sc {
  background: var(--sur);
  border: 1px solid var(--brd);
  border-radius: var(--rad2);
  padding: 14px 16px;
  box-shadow: var(--sh);
  transition: transform .15s, box-shadow .15s;
  cursor: default;
  contain: layout;
}
.sc:hover { transform: translateY(-2px); box-shadow: var(--shm); }
.sc.bl { border-top: 3px solid var(--s); }
.sc.gr { border-top: 3px solid var(--ok); }
.sc.re { border-top: 3px solid var(--err); }
.sc.am { border-top: 3px solid var(--a); }
.sc.nv { border-top: 3px solid var(--p); }
.sc.pu { border-top: 3px solid #8B5CF6; }
.sc.te { border-top: 3px solid #14B8A6; }
.sl { font-size: 11px; font-weight: 600; color: var(--txt3); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px; }
.sv { font-family: var(--fm); font-size: 26px; font-weight: 800; color: var(--p); line-height: 1; }
.ss { font-size: 11px; color: var(--txt4); margin-top: 5px; }

/* ── Buttons ──────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  transition: var(--tr);
  white-space: nowrap;
  text-decoration: none;
  contain: layout;
}
.btn:disabled { opacity: .5; cursor: not-allowed; }
.bp  { background: var(--s);   color: #fff;           border-color: var(--sd); }
.bp:hover:not(:disabled)  { background: var(--sd); }
.bo  { background: transparent; color: var(--s);      border-color: var(--s); }
.bo:hover:not(:disabled)  { background: var(--s); color: #fff; }
.bg  { background: var(--sur2); color: var(--txt2);   border-color: var(--brd); }
.bg:hover:not(:disabled)  { background: var(--sur3); border-color: var(--brd2); }
.ba  { background: var(--a);    color: #fff;           border-color: var(--a); }
.ba:hover:not(:disabled)  { background: #D97706; }
.bd  { background: #FEE2E2;     color: var(--err);     border-color: #FECACA; }
.bd:hover:not(:disabled)  { background: var(--err); color: #fff; }
.bsm { padding: 5px 11px; font-size: 11.5px; }
.bxs { padding: 3px 8px;  font-size: 11px; border-radius: 6px; }
.bpn { background: var(--p); color: #fff; border-color: var(--p); }
.bpn:hover { background: var(--pl); }

/* ── Forms ────────────────────────────────────────────────── */
.fg { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fgp { display: flex; flex-direction: column; gap: 4px; }
.fgp.s2 { grid-column: span 2; }
.fgp.s3 { grid-column: span 3; }
label { font-size: 12px; font-weight: 600; color: var(--txt2); }
.req { color: var(--err); }
.fc {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--brd);
  border-radius: 8px;
  font-size: 13px;
  color: var(--txt);
  background: var(--sur);
  transition: border-color .14s, box-shadow .14s;
  outline: none;
}
.fc:focus { border-color: var(--s); box-shadow: 0 0 0 3px rgba(37,99,235,.1); }
.fc:read-only { background: var(--sur2); color: var(--txt3); cursor: default; }
.fc::placeholder { color: var(--txt4); }
textarea.fc { resize: vertical; min-height: 72px; }
.fhint { font-size: 11px; color: var(--txt4); }
.fs { margin-bottom: 20px; }
.fst {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--p);
  padding: 8px 0;
  border-bottom: 2px solid var(--brd);
  margin-bottom: 12px;
}

/* ── Tables ───────────────────────────────────────────────── */
.tw { overflow-x: auto; }
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
th {
  padding: 9px 12px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--txt3);
  background: var(--sur2);
  border-bottom: 1px solid var(--brd);
  white-space: nowrap;
}
th:first-child { border-radius: 0; }
td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--brd);
  vertical-align: middle;
  color: var(--txt2);
}
tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--sur2); }
.tn { font-weight: 600; color: var(--txt); }
.tm { color: var(--txt3); font-size: 12px; }
.tc { font-family: var(--fm); font-size: 11.5px; }
.ta { text-align: right; font-family: var(--fm); }

/* ── Tabs ─────────────────────────────────────────────────── */
.tabs {
  display: flex;
  border-bottom: 2px solid var(--brd);
  margin-bottom: 16px;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  padding: 9px 16px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--txt3);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color .14s, border-color .14s;
  white-space: nowrap;
}
.tab:hover { color: var(--s); }
.tab.act { color: var(--s); border-bottom-color: var(--s); }
.tpn { display: none; }
.tpn.act { display: block; }

/* ── Badges ───────────────────────────────────────────────── */
.bdg {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
}
.bgr { background: #DBEAFE; color: #1D4ED8; }
.bge { background: #DCFCE7; color: #15803D; }
.bre { background: #FEE2E2; color: #B91C1C; }
.bam { background: #FEF3C7; color: #B45309; }
.bgr2{ background: #E0E7FF; color: #4338CA; }
.bgy { background: var(--sur2); color: var(--txt3); border: 1px solid var(--brd); }
.bnv { background: var(--p); color: #fff; }

/* ── Modals ───────────────────────────────────────────────── */
.mo {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 500;
  align-items: center;
  justify-content: center;
  padding: 16px;
  backdrop-filter: blur(2px);
  animation: fadeIn .15s ease;
}
.mo.open { display: flex; }
.mdl {
  background: var(--sur);
  border-radius: var(--rad2);
  width: 100%;
  max-width: 540px;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shl);
  animation: slideUp .2s cubic-bezier(.4,0,.2,1);
  contain: layout;
}
.mdl.xl { max-width: 860px; }
.mdl.xxl { max-width: 1100px; }
.mh {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--brd);
  flex-shrink: 0;
}
.mt2 { font-weight: 700; font-size: 14px; color: var(--p); }
.mc {
  width: 28px; height: 28px;
  border: none; background: var(--sur2);
  border-radius: 6px; cursor: pointer;
  font-size: 14px; color: var(--txt3);
  display: flex; align-items: center; justify-content: center;
  transition: var(--tr);
}
.mc:hover { background: var(--sur3); color: var(--txt); }
.mb { padding: 20px; overflow-y: auto; flex: 1; }
.mf {
  padding: 14px 20px;
  border-top: 1px solid var(--brd);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-shrink: 0;
  background: var(--sur2);
  border-radius: 0 0 var(--rad2) var(--rad2);
}

/* ── Grid Utilities ───────────────────────────────────────── */
.g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.g3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.g4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 14px; }
.g5 { display: grid; grid-template-columns: repeat(5,1fr); gap: 14px; }

/* ── Filter Bar ───────────────────────────────────────────── */
.fb { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.sb2 {
  display: flex; align-items: center; gap: 7px;
  background: var(--sur);
  border: 1px solid var(--brd);
  border-radius: 8px;
  padding: 0 10px;
  height: 34px;
  flex: 1;
  min-width: 200px;
  transition: var(--tr);
}
.sb2:focus-within { border-color: var(--s); box-shadow: 0 0 0 3px rgba(37,99,235,.1); }
.sb2 svg { color: var(--txt4); flex-shrink: 0; }
.sb2 input { border: none; background: none; outline: none; font-size: 13px; width: 100%; color: var(--txt); }
.sb2 input::placeholder { color: var(--txt4); }

/* ── Pagination ────────────────────────────────────────────── */
.pgn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-top: 1px solid var(--brd);
  background: var(--sur2);
  font-size: 12px;
  gap: 10px;
  flex-wrap: wrap;
}
.pgi { color: var(--txt3); }

/* ── Employee Header ──────────────────────────────────────── */
.eph {
  background: linear-gradient(135deg, var(--p) 0%, var(--pl) 60%, var(--s) 100%);
  border-radius: var(--rad2);
  padding: 20px 22px;
  display: flex;
  align-items: center;
  gap: 16px;
  color: #fff;
  margin-bottom: 18px;
  box-shadow: var(--shm);
}
.ephoto {
  width: 70px; height: 70px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 800; color: #fff;
  border: 3px solid rgba(255,255,255,.3);
  flex-shrink: 0;
  overflow: hidden;
}
.epname { font-size: 18px; font-weight: 800; line-height: 1.2; }
.epmeta { font-size: 12.5px; opacity: .8; margin-top: 3px; }
.epcode {
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 6px;
  padding: 3px 9px;
  font-family: var(--fm);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .5px;
}

/* ── Device Status ────────────────────────────────────────── */
.dc { display: flex; align-items: center; gap: 9px; padding: 8px 0; border-bottom: 1px solid var(--brd); }
.dst { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dst.on { background: var(--ok); box-shadow: 0 0 6px rgba(16,185,129,.5); }
.dst.warn { background: var(--a); }
.dst.off { background: var(--err); }
.dn2 { font-size: 12.5px; font-weight: 600; color: var(--txt); }
.dm { font-size: 11px; color: var(--txt3); }

/* ── Flash Messages ───────────────────────────────────────── */
.flash {
  padding: 10px 14px;
  border-radius: 9px;
  margin-bottom: 14px;
  font-size: 12.5px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}
.flash.ok  { background: #DCFCE7; color: #15803D; border: 1px solid #86EFAC; }
.flash.err { background: #FEE2E2; color: #B91C1C; border: 1px solid #FCA5A5; }
.flash.wrn { background: #FEF3C7; color: #B45309; border: 1px solid #FDE68A; }
.flash.inf { background: #DBEAFE; color: #1D4ED8; border: 1px solid #93C5FD; }

/* ── Toast Notifications ──────────────────────────────────── */
.toast-wrap {
  position: fixed;
  top: 70px; right: 16px;
  z-index: 900;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.toast {
  background: var(--p);
  color: #fff;
  padding: 10px 16px;
  border-radius: 9px;
  font-size: 12.5px;
  font-weight: 600;
  box-shadow: var(--shm);
  pointer-events: all;
  animation: slideRight .2s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 240px;
  max-width: 340px;
}
.toast.ok { background: var(--ok); }
.toast.err { background: var(--err); }
.toast.wrn { background: var(--a); }

/* ── Section fieldset ─────────────────────────────────────── */
.cfs { background: var(--sur); border: 1px solid var(--brd); border-radius: var(--rad2); overflow: hidden; margin-bottom: 14px; }
.cfsh { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--brd); font-weight: 700; font-size: 13px; color: var(--p); }
.cfst { font-weight: 700; font-size: 13.5px; color: var(--p); }
.cfsb { padding: 16px 18px; }
.cpr { display: flex; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--brd); gap: 8px; }
.cpr:last-child { border-bottom: none; }

/* ── Animations ───────────────────────────────────────────── */
@keyframes fadeIn   { from { opacity: 0 } to { opacity: 1 } }
@keyframes slideUp  { from { transform: translateY(16px); opacity: 0 } to { transform: translateY(0); opacity: 1 } }
@keyframes slideRight { from { transform: translateX(20px); opacity: 0 } to { transform: none; opacity: 1 } }
@keyframes pulse    { 0%,100%{opacity:1} 50%{opacity:.4} }
@keyframes spin     { to { transform: rotate(360deg) } }
@keyframes countUp  { from{transform:translateY(8px);opacity:0} to{transform:none;opacity:1} }
@keyframes blink    { 50%{opacity:0} }

/* ── Dashboard Specific ───────────────────────────────────── */
.dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.wcard {
  background: var(--sur);
  border: 1px solid var(--brd);
  border-radius: var(--rad2);
  padding: 16px;
  box-shadow: var(--sh);
  cursor: grab;
  transition: box-shadow .2s, transform .2s;
  position: relative;
  overflow: hidden;
  contain: layout;
  animation: countUp .4s ease forwards;
}
.wcard:hover { box-shadow: var(--shm); }
.wcard.dragging { opacity: .5; cursor: grabbing; }
.wcard-resize {
  position: absolute;
  bottom: 3px; right: 3px;
  width: 12px; height: 12px;
  cursor: se-resize;
  opacity: .3;
  color: var(--txt3);
}
.wcard-resize:hover { opacity: 1; }
.wcard.span2 { grid-column: span 2; }
.wcard.span3 { grid-column: span 3; }
.wv { font-family: var(--fm); font-size: 28px; font-weight: 800; color: var(--p); line-height: 1; }
.wl { font-size: 11.5px; color: var(--txt3); margin-top: 5px; }
.wi { font-size: 22px; margin-bottom: 6px; }
/* Color borders */
.c-blue   { border-top: 3px solid #2563EB; }
.c-green  { border-top: 3px solid #10B981; }
.c-red    { border-top: 3px solid #EF4444; }
.c-amber  { border-top: 3px solid #F59E0B; }
.c-teal   { border-top: 3px solid #14B8A6; }
.c-purple { border-top: 3px solid #8B5CF6; }
.c-pink   { border-top: 3px solid #EC4899; }
.c-navy   { border-top: 3px solid #1E3A5F; }
.c-orange { border-top: 3px solid #F97316; }
.c-gray   { border-top: 3px solid #94A3B8; }

/* Bio feed */
.bio-feed {
  max-height: 260px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--brd2) transparent;
}
.bio-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--brd);
  animation: slideRight .3s ease;
}
.bio-avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.bio-in  { background: #DCFCE7; color: #15803D; }
.bio-out { background: #FEE2E2; color: #B91C1C; }
.bio-late{ background: #FEF3C7; color: #B45309; }

/* Weather widget */
.weather-card {
  background: linear-gradient(135deg, #0EA5E9, #2563EB);
  color: #fff;
  border-radius: var(--rad2);
  padding: 16px;
  border: none;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1200px) {
  .g4 { grid-template-columns: 1fr 1fr; }
  .g5 { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 900px) {
  .g3, .g4 { grid-template-columns: 1fr 1fr; }
  .fg { grid-template-columns: 1fr 1fr; }
  .dash-grid { grid-template-columns: repeat(2, 1fr); }
  .wcard.span2, .wcard.span3 { grid-column: span 1; }
}
@media (max-width: 680px) {
  :root { --sb-w: 100vw; --hdr-h: 52px; }
  .sb { transform: translateX(-100%); }
  .sb.mobile-open { transform: none; }
  .main { margin-left: 0 !important; }
  .g2, .g3, .fg { grid-template-columns: 1fr; }
  .fgp.s2, .fgp.s3 { grid-column: span 1; }
  .g4, .g5 { grid-template-columns: 1fr 1fr; }
  .content { padding: 12px; }
  .dash-grid { grid-template-columns: 1fr 1fr; }
  .ph { gap: 8px; }
  .ptitle { font-size: 16px; }
  .hdr-search { display: none; }
  .eph { flex-wrap: wrap; }
  .tabs { flex-wrap: nowrap; }
  .mdl.xl, .mdl.xxl { max-width: 100%; margin: 0; border-radius: var(--rad2) var(--rad2) 0 0; }
}
@media (max-width: 400px) {
  .g4, .g5, .dash-grid { grid-template-columns: 1fr; }
}