/* Davomat · visual refresh. Loaded after the existing component styles. */
:root {
  --bg:#f5f7fa;
  --bg-soft:#eef3f5;
  --surface:#fff;
  --surface-2:#f7f9fb;
  --surface-3:#eff3f6;
  --card:var(--surface);
  --panel-2:var(--surface-2);
  --border:#e6ebf0;
  --border-strong:#ccd7df;
  --teal:#079b85;
  --teal-strong:#087a69;
  --teal-dim:#e8f7f2;
  --teal-soft:rgba(7,155,133,.08);
  --red:#dc4c64;
  --red-dim:#fff0f2;
  --amber:#bb740d;
  --amber-dim:#fff6e7;
  --text:#1b2a3d;
  --muted:#68788c;
  --muted-2:#8795a6;
  --radius:14px;
  --radius-md:12px;
  --radius-sm:9px;
  --sidebar-w:224px;
  --shadow-xs:0 2px 5px rgba(25,42,62,.025);
  --shadow-sm:0 5px 16px rgba(25,42,62,.045);
  --shadow-md:0 18px 56px rgba(25,42,62,.13);
}
body.theme-dark {
  --bg:#101923;
  --bg-soft:#14212c;
  --surface:#182430;
  --surface-2:#1d2c39;
  --surface-3:#233440;
  --border:#2b3c49;
  --border-strong:#405768;
  --teal:#35c6aa;
  --teal-strong:#6ddcc3;
  --teal-dim:#193e39;
  --teal-soft:rgba(53,198,170,.1);
  --red:#ff8ca1;
  --red-dim:#422b36;
  --amber:#f0bd6e;
  --amber-dim:#403829;
  --text:#e3edf5;
  --muted:#a5b6c5;
  --muted-2:#7e94a7;
  --shadow-xs:none;
  --shadow-sm:none;
  --shadow-md:0 18px 56px rgba(0,0,0,.3);
}
html { scroll-padding-top:98px; }
body,body.theme-dark {
  background:var(--bg);
  font-family:Inter,"Segoe UI",-apple-system,BlinkMacSystemFont,Arial,sans-serif;
  font-size:13px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
button,input,select,textarea { font-family:inherit; }
button { -webkit-tap-highlight-color:transparent; }
svg { vertical-align:middle; }
.disp,.page-title,.section-title,.stat-value,.person-name,.profile-avatar,.profile-header-avatar,.modal h3 {
  font-family:inherit;
}
:focus-visible { outline:2px solid var(--teal); outline-offset:3px; box-shadow:none; }
::selection { background:var(--teal-dim); color:var(--teal-strong); }
::-webkit-scrollbar { width:7px; height:7px; }
::-webkit-scrollbar-thumb { background:var(--border-strong); border:2px solid transparent; background-clip:padding-box; }

/* Application shell */
.sidebar,body.theme-dark .sidebar {
  padding:14px 12px;
  background:var(--surface);
  border-right:1px solid var(--border);
  box-shadow:none;
  backdrop-filter:none;
  height:100dvh;
}
.brand { min-height:86px; padding:9px 26px 18px 12px; margin-bottom:12px; }
.brand-logo-full { max-width:142px; max-height:66px; object-fit:contain; }
.brand-actions { top:5px!important; right:0!important; }
.nav { gap:3px; overflow-y:auto; min-height:0; padding:0 1px 5px; }
.nav-section-label { font-size:9px; letter-spacing:.13em; margin:19px 12px 8px; color:var(--muted-2); }
.nav-section-label:first-child { margin-top:3px; }
.nav-item {
  width:100%;
  min-height:39px;
  padding:9px 12px;
  border:0;
  border-radius:9px;
  font-family:inherit;
  font-size:12.5px;
  font-weight:500;
  color:var(--muted);
  background:transparent;
  text-align:left;
  gap:11px;
  cursor:pointer;
}
.nav-item svg { width:17px; height:17px; stroke-width:1.8; }
.nav-item:hover { color:var(--text); background:var(--surface-2); transform:none; }
.nav-item.active { background:var(--teal-dim); color:var(--teal-strong); font-weight:650; box-shadow:none; }
.nav-item.active::before { display:none; }
.nav-badge { background:var(--teal-dim); color:var(--teal-strong); font-size:10px; min-width:20px; height:20px; }
.sidebar-foot { border-top:1px solid var(--border); padding-top:13px; margin-top:auto; gap:8px; }
.status-pill { font-size:10.5px; background:var(--surface-2); border-color:var(--border); border-radius:8px; padding:8px 10px; }
.dot { width:6px; height:6px; box-shadow:none; }
.dot.off { box-shadow:none; }
.sidebar-foot .btn { min-height:32px; font-size:11px; }
main { padding:18px 24px 32px; }
.topbar,body.theme-dark .topbar {
  padding:7px 0 17px;
  top:0;
  min-height:72px;
  margin-bottom:18px;
  border:0;
  border-bottom:1px solid var(--border);
  border-radius:0;
  background:var(--bg);
  backdrop-filter:none;
  box-shadow:none;
  max-width:1680px;
  flex-wrap:nowrap;
}
.topbar>div:first-child { flex:1; min-width:0; gap:9px!important; }
.page-title { font-size:25px; font-weight:720; letter-spacing:-.7px; line-height:1.2; }
.page-sub { font-size:11.5px; margin-top:4px; color:var(--muted); }
.clock-box,body.theme-dark .clock-box { min-width:160px; padding:0 18px 0 0; border:0; border-right:1px solid var(--border); border-radius:0; background:none; }
.clock { font-size:18px; color:var(--text); letter-spacing:.4px; font-variant-numeric:tabular-nums; }
.date-line { font-size:10px; margin-top:3px; }
.topbar-actions { gap:9px; margin-left:0; }
.icon-btn,body.theme-dark .icon-btn { width:35px; height:35px; border-radius:9px; border:1px solid var(--border); color:var(--muted); background:var(--surface); box-shadow:none; }
.icon-btn svg { width:17px; height:17px; }
.icon-btn:hover { transform:none; color:var(--teal-strong); border-color:var(--teal); }
.profile-avatar { font-size:13px; border-radius:8px; }
.bell-badge { min-width:15px; height:15px; font-size:9px; border:2px solid var(--bg); box-sizing:content-box; top:-5px; right:-5px; }
.bell-dropdown,body.theme-dark .bell-dropdown { background:var(--surface); border-radius:13px; box-shadow:var(--shadow-md); }
#viewRoot { max-width:1680px; }
.view-root,.grid>* { min-width:0; }
body.sidebar-collapsed { --sidebar-w:72px; }
body.sidebar-collapsed .sidebar { width:var(--sidebar-w); padding-inline:9px; }
body.sidebar-collapsed main { max-width:calc(100vw - var(--sidebar-w)); }
body.sidebar-collapsed .brand { min-height:86px; padding:8px 0; }
body.sidebar-collapsed .nav-item { justify-content:center; padding:10px 5px; }

/* Shared components */
.card,body.theme-dark .card { background:var(--surface); border-color:var(--border); border-radius:var(--radius); box-shadow:var(--shadow-xs); padding:16px; }
.grid { gap:16px; }
.card .card { box-shadow:none; }
#viewRoot .card::before { display:none; }
.section-title { font-size:13px; font-weight:650; margin-bottom:14px; line-height:1.5; }
.section-heading { display:inline-flex; align-items:center; gap:8px; min-width:0; }
.section-heading>svg { color:var(--teal); width:16px; height:16px; }
.tag { font-size:10px; padding:3px 8px; font-weight:500; border-color:var(--border); background:var(--surface-2); white-space:nowrap; }
.btn,body.theme-dark .btn { font-family:inherit; background:var(--surface); color:var(--text); min-height:36px; font-size:12px; font-weight:600; padding:8px 12px; border-radius:8px; border-color:var(--border-strong); box-shadow:none; transition:background .15s,border-color .15s; }
.btn:hover { transform:none; box-shadow:none; background:var(--surface-2); border-color:var(--teal); }
.btn-primary,body.theme-dark .btn-primary { background:#079b85; color:#fff; border-color:#079b85; box-shadow:0 2px 3px rgba(7,155,133,.09); }
.btn-primary:hover,body.theme-dark .btn-primary:hover { background:#087f6e; border-color:#087f6e; color:#fff; }
.btn-ghost,body.theme-dark .btn-ghost { background:transparent; border-color:var(--border); box-shadow:none; }
.btn-danger { background:var(--red-dim); color:var(--red); border-color:var(--red); }
.input,select,textarea,body.theme-dark .input,body.theme-dark select,body.theme-dark textarea { background:var(--surface); border-color:var(--border-strong); font-family:inherit; font-size:12px; min-height:36px; border-radius:8px; color:var(--text); }
.input::placeholder,textarea::placeholder { color:var(--muted-2); }
.input:focus,select:focus,textarea:focus { background:var(--surface); border-color:var(--teal); box-shadow:0 0 0 3px var(--teal-soft); }
.toolbar,#viewRoot[data-view] .toolbar,body.theme-dark #viewRoot[data-view] .toolbar { background:var(--surface); padding:12px 14px; border:1px solid var(--border); border-radius:12px; margin-bottom:16px; gap:10px; }
.table-wrap,body.theme-dark .table-wrap { background:var(--surface); border-color:var(--border); border-radius:10px; overscroll-behavior-x:contain; }
table { font-size:12px; }
th,body.theme-dark th { color:var(--muted); font-size:10.5px; text-transform:none; letter-spacing:0; font-weight:600; background:var(--surface-2); padding:11px 12px; }
td { padding:12px; border-bottom-color:var(--border); }
tr:hover td,body.theme-dark tr:hover td { background:var(--teal-soft); }
.avatar { border-radius:50%; font-size:11px; width:34px; height:34px; }
.badge { font-size:10px; padding:3px 8px; border-radius:6px; font-weight:600; gap:4px; }
.page-tabs,.segmented { background:var(--surface-3); border-color:var(--border); border-radius:9px; padding:3px; }
.page-tab,.segmented-opt { font-size:12px; font-weight:600; border-radius:6px; min-height:32px; }
.page-tab.active,.segmented-opt.active { background:var(--surface); color:var(--teal-strong); box-shadow:var(--shadow-xs); }
.pagination-footer { padding-top:12px; margin-top:12px; font-size:11px; }
.request-summary-strip>div,.mini-summary-card { border-color:var(--border); background:var(--surface); border-radius:12px; box-shadow:var(--shadow-xs); }
.request-summary-strip span { font-size:24px; }
.device-config-box,.ip-camera-card,.notif-panel,.notif-rules-panel,.notif-rule-row,.notif-kpi { background:var(--surface); border-color:var(--border); }
.device-name { font-size:13px; }
.device-row { padding:12px 0; }
.switch { width:36px; height:21px; background:var(--surface-3); }
.switch-knob { width:15px; height:15px; }
.switch.on { background:#079b85; border-color:#079b85; }
.switch.on .switch-knob { left:18px; background:#fff; }
.switch-label { font-size:12.5px; }
.modal,body.theme-dark .modal { background:var(--surface); border-radius:16px; box-shadow:var(--shadow-md); padding:24px; }
.modal h3 { font-size:19px; font-weight:650; letter-spacing:-.3px; }
.overlay { backdrop-filter:none; background:rgba(17,30,46,.45); padding:20px; }
.toast,body.theme-dark .toast { background:var(--surface); border-radius:10px; box-shadow:var(--shadow-md); font-size:12px; }
.feed-evidence-btn { border:1px solid var(--border); border-radius:5px; background:var(--surface-2); color:var(--teal-strong); padding:2px 6px; font-size:10px; cursor:pointer; }

/* Dashboard */
.dashboard-layout { gap:16px; }
.dashboard-layout .stats-grid { margin:0; gap:12px; }
.dashboard-layout .stats-grid-6 { grid-template-columns:repeat(6,minmax(0,1fr)); }
.stat-card {
  display:grid;
  grid-template-columns:1fr auto;
  grid-template-rows:auto auto;
  gap:10px 8px;
  align-items:center;
  justify-items:start;
  justify-content:normal;
  min-height:101px;
  text-align:left;
  color:var(--text);
  padding:14px!important;
}
button.stat-card { cursor:pointer; width:100%; font:inherit; }
.stat-card:hover { transform:none; box-shadow:var(--shadow-sm); border-color:var(--border-strong); }
.stat-card .stat-label { grid-column:1; grid-row:1; font-size:10.5px; color:var(--muted); font-weight:500; line-height:1.3; }
.stat-card .stat-icon { grid-column:2; grid-row:1/3; height:34px; width:34px; border-radius:10px; box-shadow:none; }
.stat-card .stat-value { grid-column:1; grid-row:2; font-size:27px; font-weight:700; letter-spacing:-.7px; font-variant-numeric:tabular-nums; }
.stat-card .stat-icon svg { width:17px; height:17px; }
.quick-actions-bar { display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:0; background:none; border:0; box-shadow:none; margin:0; }
.quick-action { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:34px; padding:7px 12px; background:var(--surface); color:var(--muted); border:1px solid var(--border); border-radius:7px; box-shadow:none; font-family:inherit; font-size:11px; font-weight:600; }
.quick-action svg { width:14px; height:14px; }
.quick-action:hover { background:var(--teal-dim); color:var(--teal-strong); border-color:var(--teal); transform:none; box-shadow:none; }
.quick-action[data-quick="employee"] { background:#079b85; border-color:#079b85; color:#fff; }
.dashboard-charts,.dashboard-presence { grid-template-columns:repeat(2,minmax(0,1fr)); }
.dashboard-bottom { grid-template-columns:repeat(2,minmax(0,1fr)); align-items:stretch; }
.chart-card { padding-bottom:13px!important; }
.attendance-chart {
  display:flex;
  align-items:flex-end;
  gap:10px;
  height:143px;
  padding:3px 4px 0;
  background:repeating-linear-gradient(to top,transparent,transparent 30px,var(--border) 31px,transparent 32px);
  background-size:100% calc(100% - 23px);
  background-repeat:no-repeat;
}
.chart-column { display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:5px; flex:1; min-width:0; height:100%; }
.chart-bar { width:100%; max-width:27px; border-radius:4px 4px 1px 1px; background:linear-gradient(0deg,#0ba48c,#52c5ae); flex-shrink:0; }
.weekly-chart .chart-bar { max-width:36px; background:linear-gradient(0deg,#0ba48c,#8cdac9); }
.chart-label { height:17px; color:var(--muted); font-size:10px; white-space:nowrap; }
.chart-column>div:first-child { font-size:10px!important; font-variant-numeric:tabular-nums; }
.presence-panel { padding-bottom:12px!important; }
.presence-dot { width:7px; height:7px; border-radius:50%; background:var(--teal); box-shadow:0 0 0 4px var(--teal-dim); margin:0 3px; flex-shrink:0; }
.presence-dot.absent { background:var(--red); box-shadow:0 0 0 4px var(--red-dim); }
.presence-viewport { --presence-visible:6; overflow:hidden; width:100%; min-height:101px; contain:layout paint; direction:ltr; touch-action:pan-y; }
.presence-track { display:flex; align-items:flex-start; width:max-content; }
.presence-sequence { display:flex; align-items:flex-start; flex:0 0 auto; gap:8px; padding-right:8px; }
.presence-track .presence-person { width:var(--presence-item-width,112px); flex:0 0 var(--presence-item-width,112px); }
.presence-repeat { display:none; }
.presence-marquee[data-scrolling="1"][data-reduced-motion="0"] .presence-repeat { display:flex; }
.presence-marquee[data-scrolling="1"][data-reduced-motion="0"] .presence-track { will-change:transform; }
.presence-marquee[data-reduced-motion="1"] .presence-viewport { overflow-x:auto; scrollbar-width:thin; touch-action:auto; }
.presence-marquee[data-reduced-motion="1"] .presence-track { transform:none!important; }
.presence-person { display:flex; flex-direction:column; align-items:center; min-width:0; text-align:center; gap:3px; padding:2px 0; }
.presence-avatar-wrap { position:relative; margin:1px 0 5px; border:1.5px solid var(--teal); padding:3px; border-radius:50%; }
.presence-avatar-wrap.is-absent { border-color:var(--red); }
.presence-person .avatar { width:43px; height:43px; border:0; box-shadow:none; font-size:14px; }
.presence-indicator { position:absolute; right:0; bottom:1px; width:10px; height:10px; border-radius:50%; background:var(--teal); border:2px solid var(--surface); }
.is-absent .presence-indicator { background:var(--red); }
.presence-person .person-name { width:100%; font-size:10.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.4; }
.presence-person .person-dept { width:100%; font-size:9px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.4; }
.presence-excuse { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:9px; padding:1px 5px; }
.presence-controls { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:33px; border-top:1px solid var(--border); padding-top:8px; margin-top:8px; color:var(--muted); font-size:10px; }
.presence-controls[hidden],.presence-toggle[hidden] { display:none!important; }
.presence-toggle { border:1px solid var(--border); border-radius:5px; min-height:25px; padding:3px 9px; background:var(--surface); color:var(--muted); font-family:inherit; font-size:10px; cursor:pointer; }
.presence-toggle:hover,.presence-toggle[aria-pressed="true"] { background:var(--teal-dim); color:var(--teal-strong); border-color:var(--teal); }
.presence-empty { min-height:101px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:var(--muted); font-size:11px; }
.presence-empty svg { width:24px; height:24px; color:var(--muted-2); }
.live-label { display:inline-flex; align-items:center; gap:5px; color:var(--teal-strong); background:var(--teal-dim); border:0; }
.live-label i { width:5px; height:5px; background:var(--teal); border-radius:50%; }
.feed-row { gap:10px; padding:10px 0; }
.feed-row .avatar { width:31px; height:31px; }
.feed-name { font-size:11.5px; font-weight:600; }
.feed-meta { font-size:10px; }
.feed-meta .badge { padding:1px 5px; font-size:9px; }
.feed-time { font-size:11px; font-variant-numeric:tabular-nums; }
.feed-time>div { font-size:9px!important; }
.events-pagination { display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--border); margin-top:8px; padding-top:10px; }
.events-pagination .btn { min-height:29px; padding:4px 8px!important; font-size:10px!important; }
.events-pagination>span { font-size:10px!important; }
.attention-list { gap:8px; }
.attention-row { padding:10px; border-radius:9px; background:var(--surface); gap:9px; }
.attention-row:hover { transform:none; background:var(--surface-2); }
.attention-icon { width:31px; height:31px; border-radius:9px; font-size:15px; }
.attention-copy b { font-size:11px; font-weight:600; line-height:1.45; }
.attention-copy small { font-size:10px; }
.attention-count { min-width:24px; height:24px; border-radius:7px; font-size:10px; }
.attention-empty { padding:18px 0; }
.mobile-nav { display:none; }

/* Login */
#loginScreen { display:grid; grid-template-columns:minmax(0,510px) minmax(0,390px); justify-content:center; align-content:center; align-items:center; gap:clamp(40px,8vw,140px); padding:48px; min-height:100dvh; }
.login-intro { padding:24px 0; }
.login-kicker { display:flex; align-items:center; gap:8px; font-size:10px; font-weight:700; color:var(--teal-strong); letter-spacing:2px; }
.login-kicker>span { width:7px; height:7px; border-radius:50%; background:var(--teal); box-shadow:0 0 0 5px var(--teal-dim); margin-right:5px; }
.login-intro h1 { font-size:clamp(35px,4vw,57px); line-height:1.12; letter-spacing:-2px; font-weight:700; margin:28px 0 20px; }
.login-intro>p { max-width:395px; font-size:14px; line-height:1.8; color:var(--muted); }
.login-feature-list { display:flex; flex-direction:column; gap:17px; margin-top:34px; }
.login-feature-list>div { display:flex; align-items:center; gap:13px; font-size:12px; }
.login-feature-list span { color:var(--teal-strong); background:var(--teal-dim); font-size:10px; padding:4px 7px; border-radius:5px; }
.login-feature-list b { font-weight:500; }
.login-intro-foot { color:var(--muted-2); font-size:10px; margin-top:45px; letter-spacing:.5px; }
.login-card,body.theme-dark .login-card { width:100%; padding:36px; border:1px solid var(--border); border-radius:20px; box-shadow:var(--shadow-sm); background:var(--surface); backdrop-filter:none; }
.login-card::before { display:none; }
.login-brand { justify-content:flex-start; margin-bottom:28px; }
.login-logo-full { width:145px; max-height:90px; object-fit:contain; }
.login-heading { font-size:24px; letter-spacing:-.6px; font-weight:650; margin-bottom:5px; }
.login-description { font-size:12px; color:var(--muted); margin-bottom:26px; }
.login-card .input { min-height:43px; background:var(--surface); font-size:13px; }
.login-card .form-row { margin-bottom:17px; }
.login-card .form-row label { font-size:11.5px; font-weight:600; }
.login-card .btn { min-height:43px; font-size:13px; }
.login-help { margin-top:24px; padding-top:18px; border-top:1px solid var(--border); text-align:center; font-size:10px; color:var(--muted-2); }

/* Responsive sizing. Tables retain horizontal scrolling inside their cards. */
@media(min-width:1600px) {
  main { padding-inline:32px; }
  .dashboard-layout { gap:18px; }
  .stat-card { min-height:108px; }
  .attendance-chart { height:158px; }
  .presence-person .avatar { width:48px; height:48px; }
  .presence-person .person-name { font-size:11px; }
}
@media(min-width:901px) and (max-width:1250px) {
  main { padding-inline:18px; }
  .dashboard-layout .stats-grid-6 { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .stat-card { min-height:80px; }
  .presence-viewport { --presence-visible:3; }
  .clock-box { min-width:130px; }
}
@media(max-width:900px) {
  body.sidebar-collapsed { --sidebar-w:224px; }
  .sidebar { width:min(280px,85vw); padding:14px; }
  .brand { min-height:85px; }
  .nav-item { min-height:42px; font-size:13px; }
  main { max-width:none; padding:0 16px calc(90px + env(safe-area-inset-bottom)); }
  .topbar { padding:16px 0 14px; min-height:76px; gap:10px; margin-bottom:14px; }
  .page-title { font-size:23px; }
  .page-sub { font-size:11px; }
  .clock-box { min-width:145px; }
  .dashboard-layout .stats-grid-6 { grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
  .stat-card { min-height:89px; }
  .dashboard-charts,.dashboard-presence,.dashboard-bottom { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .presence-viewport { --presence-visible:3; }
  .mobile-nav { position:fixed; bottom:0; left:0; right:0; z-index:30; display:flex; justify-content:space-around; padding:7px 10px calc(7px + env(safe-area-inset-bottom)); background:var(--surface); border-top:1px solid var(--border); }
  .mobile-nav-item { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; flex:1; border:0; border-radius:8px; padding:5px 6px; background:none; font-family:inherit; color:var(--muted); font-size:10px; font-weight:500; min-height:47px; }
  .mobile-nav-item svg { width:20px; height:20px; stroke-width:1.8; }
  .mobile-nav-item.active { color:var(--teal-strong); background:var(--teal-dim); }
  .sidebar-backdrop { z-index:40; }
  .toast { bottom:85px; }
  .login-intro { display:none; }
  #loginScreen { display:flex; min-height:100dvh; padding:28px; align-items:center; }
  .login-card { max-width:410px; }
}
@media(max-width:640px) {
  main { padding-inline:12px; }
  .topbar { align-items:center; flex-wrap:nowrap; padding:13px 0; min-height:76px; gap:4px; }
  .topbar>div:first-child { width:auto; flex:1; gap:5px!important; }
  .page-title { font-size:21px; letter-spacing:-.5px; }
  .page-sub { font-size:10px; max-width:47vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .clock-box { display:none; }
  .topbar-actions { width:auto; margin-left:auto; gap:5px; }
  .icon-btn,body.theme-dark .icon-btn { width:32px; height:32px; }
  .icon-btn svg { width:16px; height:16px; }
  .menu-btn { width:29px!important; height:32px!important; }
  .bell-dropdown { position:fixed; top:68px; right:12px; width:min(330px,calc(100vw - 24px)); max-height:65dvh; }
  .dashboard-layout { gap:12px; }
  .dashboard-layout .stats-grid-6 { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
  .stat-card { min-height:87px; padding:12px!important; gap:7px; }
  .stat-card .stat-value { font-size:26px; }
  .stat-card .stat-label { font-size:10.5px; }
  .stat-card .stat-icon { width:32px; height:32px; }
  .quick-actions-bar { display:flex; flex-wrap:nowrap; overflow-x:auto; gap:6px; padding-bottom:3px; scrollbar-width:thin; }
  .quick-action { flex-shrink:0; font-size:10.5px; min-height:34px; padding:7px 10px; }
  .dashboard-charts,.dashboard-presence,.dashboard-bottom { grid-template-columns:1fr; gap:12px; }
  .card { padding:14px; border-radius:12px; }
  .section-title { font-size:12px; margin-bottom:12px; }
  .attendance-chart { height:139px; gap:7px; }
  .chart-label { font-size:9px; }
  .presence-viewport { --presence-visible:3; }
  .presence-person .avatar { width:48px; height:48px; }
  .presence-person .person-name { font-size:11px; }
  .presence-person .person-dept { font-size:10px; }
  .presence-controls { font-size:11px; }
  .presence-toggle { min-height:31px; padding:5px 10px; font-size:11px; }
  .feed-row { padding:10px 0; }
  .feed-name { font-size:12px; }
  .feed-meta { font-size:10px; }
  .attention-copy b { font-size:11.5px; }
  .toolbar,#viewRoot[data-view] .toolbar { padding:11px; gap:9px; border-radius:10px; }
  .toolbar>div { min-width:0; }
  .input,select,textarea { min-height:40px; }
  /* Prevent automatic input zoom on iOS. */
  input.input,select,textarea { font-size:16px; }
  .btn { min-height:38px; }
  .device-row { flex-wrap:wrap; }
  .device-actions { margin-left:20px; justify-content:flex-start; max-width:100%; }
  .settings-grid,.ip-camera-grid,.calendar-add-row,.notif-rule-grid { grid-template-columns:1fr; }
  .device-summary-grid,.request-summary-strip { gap:7px; }
  .request-summary-strip>div,.mini-summary-card { padding:10px 8px; gap:5px; }
  .request-summary-strip span,.mini-summary-card b { font-size:20px; }
  .request-summary-strip small { font-size:9px; }
  .page-tabs { display:flex; overflow-x:auto; max-width:100%; }
  .page-tab { white-space:nowrap; padding-inline:9px; font-size:11px; }
  .modal { padding:20px 16px; max-height:calc(100dvh - 28px); border-radius:14px; }
  .overlay { padding:14px; }
  .modal-actions { flex-direction:row; }
  .modal-actions .btn { width:auto; flex:1; }
  .toast { left:12px; right:12px; max-width:none; bottom:calc(80px + env(safe-area-inset-bottom)); }
  #loginScreen { padding:20px; }
  .login-card,body.theme-dark .login-card { padding:28px 24px; }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; }
  .presence-viewport { overflow-x:auto; touch-action:auto; scrollbar-width:thin; }
  .presence-repeat { display:none!important; }
  .presence-track { transform:none!important; will-change:auto!important; }
}