:root {
  --navy-950:#07111e; --navy-900:#0b1726; --navy-850:#102033; --navy-800:#162a40;
  --ink:#071724; --ink-soft:#243a4d; --muted:#40566a; --line:#aebdc7;
  --canvas:#e4eaee; --surface:#fff; --surface-soft:#eaf0f3;
  --brand:#087d68; --brand-strong:#034f43; --brand-soft:#c8eadf;
  --blue:#174f83; --blue-soft:#d4e7f7; --amber:#754400; --amber-soft:#ffe2a6;
  --danger:#922934; --danger-soft:#f5cbd0; --purple:#4f3596; --purple-soft:#dfd4fa;
  --shadow-sm:0 7px 22px rgba(8,25,42,.12);
  --shadow:0 20px 50px rgba(8,25,42,.17);
  --radius:18px; --radius-sm:12px;
  color:var(--ink); background:var(--canvas);
  font-family:Vazirmatn,IRANSansX,"Segoe UI",Tahoma,Arial,sans-serif;
  font-synthesis:none; text-rendering:optimizeLegibility;
}
* { box-sizing:border-box; }
html { min-width:320px; min-height:100%; overflow-x:hidden; scroll-behavior:smooth; }
body { min-width:320px; min-height:100vh; overflow-x:hidden; margin:0; background:var(--canvas); font-size:14px; }
button,input,select,textarea { font:inherit; }
button { cursor:pointer; }
button:disabled { cursor:not-allowed; opacity:.55; }
a { color:inherit; }
.hidden { display:none!important; }
.subtle { color:var(--muted); }
.full { width:100%; }

/* Authentication */
.auth-page { display:grid; min-height:100dvh; grid-template-columns:minmax(0,1.08fr) minmax(420px,.92fr); background:var(--surface); }
.auth-brand { position:relative; display:flex; min-height:100%; flex-direction:column; justify-content:space-between; overflow:hidden; padding:clamp(30px,5vw,72px); background:
  radial-gradient(circle at 12% 90%,rgba(29,178,143,.19),transparent 34%),
  radial-gradient(circle at 88% 8%,rgba(64,112,166,.18),transparent 30%),var(--navy-900); color:#fff; isolation:isolate; }
.auth-brand::before { position:absolute; inset:0; z-index:-1; background-image:
  linear-gradient(rgba(255,255,255,.026) 1px,transparent 1px),
  linear-gradient(90deg,rgba(255,255,255,.026) 1px,transparent 1px); background-size:42px 42px; content:""; mask-image:linear-gradient(to bottom,#000,transparent 90%); }
.auth-brand::after { position:absolute; left:-130px; bottom:-160px; z-index:-1; width:460px; height:460px; border:1px solid rgba(53,199,154,.2); border-radius:50%; box-shadow:0 0 0 70px rgba(53,199,154,.025),0 0 0 140px rgba(53,199,154,.02); content:""; }
.brand-lockup { display:flex; align-items:center; gap:14px; letter-spacing:.18em; }
.brand-lockup img { filter:drop-shadow(0 10px 26px rgba(0,0,0,.25)); }
.brand-lockup div { display:grid; gap:3px; direction:ltr; text-align:left; }
.brand-lockup span { color:#fff; font-size:15px; font-weight:800; }
.brand-lockup strong { color:#65d8b7; font-size:9px; font-weight:700; letter-spacing:.3em; }
.auth-copy { max-width:720px; padding:10vh 0; }
.eyebrow { display:inline-flex; align-items:center; gap:8px; border:1px solid rgba(101,216,183,.24); border-radius:999px; background:rgba(101,216,183,.09); padding:8px 13px; color:#8ce4cb; font-size:12px; font-weight:700; }
.eyebrow::before { width:6px; height:6px; border-radius:50%; background:#5be2b9; box-shadow:0 0 0 5px rgba(91,226,185,.12); content:""; }
.auth-copy h1 { max-width:680px; margin:24px 0 16px; font-size:clamp(40px,5.2vw,72px); font-weight:850; line-height:1.35; letter-spacing:-.025em; }
.auth-copy p { max-width:650px; margin:0; color:#afbdca; font-size:clamp(15px,1.5vw,19px); line-height:2; }
.auth-trust { display:flex; flex-wrap:wrap; gap:12px 28px; color:#93a5b6; font-size:12px; }
.auth-trust span { display:flex; align-items:center; gap:8px; }
.auth-trust i { width:6px; height:6px; border-radius:50%; background:var(--brand); }
.auth-form-side { display:flex; min-height:100%; align-items:center; justify-content:center; padding:40px clamp(24px,6vw,90px); position:relative; }
.auth-form-side::before { position:absolute; top:0; right:0; left:0; height:4px; background:linear-gradient(90deg,var(--brand),#40c8ac); content:""; }
.auth-card { width:min(100%,440px); }
.auth-card-head { display:flex; align-items:center; gap:14px; }
.mini-logo { display:none; width:46px; height:46px; }
.mini-logo img { width:100%; height:100%; }
.auth-card-head small { color:var(--brand); font-size:11px; font-weight:800; }
.auth-card h2 { margin:3px 0 0; color:var(--navy-900); font-size:30px; letter-spacing:-.02em; }
.auth-card>.subtle { margin:11px 0 30px; font-size:13px; line-height:1.8; }
label { display:grid; gap:8px; margin-top:17px; color:#405064; font-size:12px; font-weight:750; }
input,select,textarea { width:100%; min-height:44px; border:1px solid var(--line); border-radius:11px; outline:none; background:var(--surface); padding:10px 12px; color:var(--ink); transition:border-color .18s,box-shadow .18s,background .18s; }
textarea { min-height:88px; resize:vertical; line-height:1.8; }
input::placeholder,textarea::placeholder { color:#a3aeb8; }
input:focus,select:focus,textarea:focus { border-color:#42a996; box-shadow:0 0 0 4px rgba(19,151,126,.1); }
.input-wrap { position:relative; display:block; }
.input-wrap input { height:51px; padding-inline:48px 60px; background:#fbfcfd; }
.field-icon { position:absolute; top:50%; right:15px; z-index:1; transform:translateY(-50%); color:#8b98a5; font-size:10px; font-weight:850; direction:ltr; }
.text-button { position:absolute; top:50%; left:12px; z-index:1; border:0; transform:translateY(-50%); background:none; color:var(--brand-strong); font-size:11px; font-weight:800; }
.button { display:inline-flex; min-height:40px; align-items:center; justify-content:center; gap:8px; border:0; border-radius:10px; padding:9px 15px; font-weight:750; white-space:nowrap; transition:transform .16s,box-shadow .16s,background .16s,border-color .16s; }
.button:hover { transform:translateY(-1px); }
.button:active { transform:translateY(0); }
.button.xl { min-height:52px; padding:12px 18px; }
.button.primary { background:var(--navy-900); color:#fff; box-shadow:0 9px 22px rgba(11,23,38,.16); }
.button.primary:hover { background:var(--navy-800); box-shadow:0 12px 28px rgba(11,23,38,.2); }
.button.brand { background:var(--brand); color:#fff; }
.button.brand:hover { background:var(--brand-strong); }
.button.ghost { border:1px solid #9eafb9; background:var(--surface); color:#2c4356; box-shadow:none; }
.button.quiet { border:1px solid #b2c0c8; background:#e6edf1; color:#243a4d; box-shadow:none; }
.button.danger { background:var(--danger); color:#fff; }
.button.soft-danger { background:var(--danger-soft); color:var(--danger); }
.button.soft-brand { background:var(--brand-soft); color:var(--brand-strong); }
.button.small { min-height:36px; padding:7px 11px; font-size:12px; }
.form-message { min-height:20px; margin:12px 0 0; color:var(--danger); font-size:12px; line-height:1.7; text-align:center; }
.forgot-password { display:block; border:0; background:none; margin:12px auto 0; padding:4px 8px; color:var(--brand-strong); font-size:12px; font-weight:800; }
.forgot-password:hover { text-decoration:underline; }
.install-entry { border:1px solid #83a9a1; margin-top:12px; background:#e5f5f0; color:var(--brand-strong); box-shadow:none; }
.install-entry:hover { background:#d7eee7; }
.security-line { display:flex; align-items:center; justify-content:center; gap:8px; border-top:1px solid var(--line); margin-top:22px; padding-top:18px; color:#8c98a4; font-size:10px; }
.status-dot { width:7px; height:7px; border-radius:50%; background:var(--brand); box-shadow:0 0 0 4px var(--brand-soft); }
.auth-footer { position:absolute; bottom:22px; margin:0; color:#a2adb6; font-size:10px; }

/* Application frame */
.app-layout { display:grid; min-height:100dvh; grid-template-columns:258px minmax(0,1fr); background:var(--canvas); }
.sidebar { position:sticky; top:0; z-index:20; display:flex; min-width:0; height:100dvh; overflow:hidden; flex-direction:column; direction:rtl; background:var(--navy-900); color:#fff; }
.sidebar-brand { display:flex; width:100%; min-width:0; flex:0 0 auto; align-items:center; gap:11px; min-height:88px; border-bottom:1px solid rgba(255,255,255,.07); padding:18px 25px; }
.sidebar-brand img { width:42px; height:42px; flex:0 0 42px; }
.sidebar-brand div { display:grid; }
.sidebar-brand strong { font-size:16px; }
.sidebar-brand span { margin-top:2px; color:#b4c2ce; font-size:10px; }
.side-nav { display:grid; width:100%; min-width:0; gap:4px; overflow-x:hidden; overflow-y:auto; padding:24px 13px; scrollbar-width:thin; }
.nav-item { display:flex; width:100%; min-width:0; min-height:45px; overflow:hidden; align-items:center; gap:12px; border:0; border-radius:11px; background:transparent; padding:8px 12px; color:#bdcad4; font-size:12px; font-weight:750; text-align:right; transition:.18s; }
.nav-item:hover { background:rgba(255,255,255,.045); color:#d9e2e9; }
.nav-item.active { background:linear-gradient(90deg,rgba(35,175,144,.18),rgba(35,175,144,.07)); color:#fff; box-shadow:inset -3px 0 #35c79a; }
.nav-icon { display:grid; width:27px; height:27px; flex:0 0 27px; place-items:center; border:1px solid rgba(255,255,255,.18); border-radius:8px; color:#b9cad7; font-size:15px; }
.nav-item>span:last-child { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nav-item.active .nav-icon { border-color:rgba(53,199,154,.25); background:rgba(53,199,154,.12); color:#64d8b7; }
.sidebar-foot { display:flex; align-items:center; justify-content:space-between; gap:10px; border-top:1px solid rgba(255,255,255,.07); margin-top:auto; padding:16px; }
.side-user { display:flex; min-width:0; align-items:center; gap:9px; }
.avatar { display:grid; width:36px; height:36px; flex:0 0 auto; place-items:center; border-radius:11px; background:linear-gradient(145deg,#2c5368,#1a384c); color:#9fe7d3; font-size:12px; font-weight:850; }
.side-user div { display:grid; min-width:0; }
.side-user strong { overflow:hidden; color:#e7edf1; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.side-user small { margin-top:3px; color:#a8bac8; font-size:9px; }
.icon-button { display:grid; width:35px; height:35px; flex:0 0 auto; place-items:center; border:1px solid rgba(255,255,255,.18); border-radius:9px; background:rgba(255,255,255,.04); color:#c7d3dc; }
.app-main { min-width:0; }
.topbar { position:sticky; top:0; z-index:15; display:flex; min-height:74px; align-items:center; justify-content:space-between; gap:20px; border-bottom:1px solid rgba(210,220,226,.8); background:rgba(255,255,255,.88); padding:12px clamp(18px,3vw,42px); backdrop-filter:blur(18px); }
.top-title { display:flex; align-items:center; gap:12px; }
.top-title span { color:var(--brand-strong); font-size:9px; font-weight:800; }
.top-title h1 { margin:3px 0 0; color:var(--navy-900); font-size:19px; letter-spacing:-.01em; }
.top-actions { display:flex; align-items:center; gap:9px; }
.connection { display:flex; align-items:center; gap:7px; border:1px solid var(--line); border-radius:999px; background:#fff; padding:7px 11px; color:#344c60; font-size:10px; font-weight:700; }
.connection span { width:7px; height:7px; border-radius:50%; background:var(--brand); box-shadow:0 0 0 4px var(--brand-soft); }
.connection.offline span { background:var(--danger); box-shadow:0 0 0 4px var(--danger-soft); }
.mobile-menu { display:none; border:0; background:transparent; color:var(--navy-900); font-size:22px; }
.workspace { max-width:1600px; min-height:calc(100dvh - 74px); margin:auto; padding:clamp(18px,3vw,40px); outline:none; }
.page-loading { display:grid; min-height:55vh; place-items:center; align-content:center; gap:13px; color:var(--muted); font-size:12px; }
.loader { width:30px; height:30px; border:3px solid #dce6e7; border-top-color:var(--brand); border-radius:50%; animation:spin .75s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* Common content */
.page-head { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:22px; }
.page-head h2 { margin:0; color:var(--navy-900); font-size:clamp(24px,3vw,32px); letter-spacing:-.02em; }
.page-head p { max-width:680px; margin:7px 0 0; color:var(--muted); font-size:13px; line-height:1.8; }
.head-actions,.toolbar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.panel { border:1px solid #aab9c3; border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow-sm); }
.panel-head { display:flex; align-items:center; justify-content:space-between; gap:16px; border-bottom:1px solid #becbd3; padding:18px 20px; }
.panel-head h3 { margin:0; color:var(--navy-900); font-size:15px; }
.panel-head p { margin:5px 0 0; color:var(--muted); font-size:12px; }
.panel-body { padding:20px; }
.stat-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:13px; margin-bottom:18px; }
.metric-card { position:relative; min-width:0; min-height:126px; overflow:hidden; border:1px solid var(--metric-border,var(--line)); border-radius:16px; background:var(--metric-bg,var(--surface)); padding:19px; box-shadow:var(--shadow-sm); }
.metric-card::after { position:absolute; left:-25px; bottom:-35px; z-index:0; width:95px; height:95px; border-radius:50%; background:var(--tone,var(--brand-soft)); opacity:.9; pointer-events:none; content:""; }
.metric-card>* { position:relative; z-index:1; }
.metric-card .metric-top { display:flex; align-items:center; justify-content:space-between; gap:12px; color:#243a4d; font-size:12px; font-weight:850; }
.metric-icon { display:grid; width:34px; height:34px; place-items:center; border-radius:10px; background:var(--tone,var(--brand-soft)); color:var(--accent,var(--brand-strong)); font-size:15px; }
.metric-card strong { display:block; margin-top:17px; overflow-wrap:anywhere; color:var(--navy-900); font-size:25px; line-height:1.2; }
.metric-card small { display:block; margin-top:9px; color:#3f5365; font-size:11px; font-weight:650; }
.tone-blue { --tone:var(--blue-soft); --accent:var(--blue); --metric-bg:#f1f7fc; --metric-border:#9dbed9; }
.tone-amber { --tone:var(--amber-soft); --accent:var(--amber); --metric-bg:#fff8e8; --metric-border:#dfbf78; }
.tone-red { --tone:var(--danger-soft); --accent:var(--danger); --metric-bg:#fff3f4; --metric-border:#dda1a8; }
.tone-purple { --tone:var(--purple-soft); --accent:var(--purple); --metric-bg:#f7f3ff; --metric-border:#baaadd; }
.two-column { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(290px,.8fr); gap:16px; }
.three-column { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.hero-panel { position:relative; overflow:hidden; border:0; background:
  radial-gradient(circle at 2% 100%,rgba(53,199,154,.19),transparent 35%),var(--navy-900); color:#fff; }
.hero-panel::after { position:absolute; left:5%; top:-85px; width:240px; height:240px; border:1px solid rgba(255,255,255,.08); border-radius:50%; box-shadow:0 0 0 42px rgba(255,255,255,.018),0 0 0 84px rgba(255,255,255,.012); content:""; }
.hero-panel .panel-body { position:relative; z-index:1; padding:27px; }
.hero-panel small { color:#7fe0c4; font-weight:750; }
.hero-panel h3 { max-width:560px; margin:9px 0 7px; font-size:25px; line-height:1.5; }
.hero-panel p { max-width:640px; margin:0; color:#d0dbe3; font-size:12px; line-height:1.9; }
.hero-actions { display:flex; gap:8px; margin-top:21px; }
.hero-actions .button.primary { background:#fff; color:var(--navy-900); }
.hero-actions .button.ghost { border-color:rgba(255,255,255,.15); background:rgba(255,255,255,.06); color:#dbe5eb; }
.banner { display:flex; align-items:center; justify-content:space-between; gap:15px; border:1px solid #f0dcaa; border-right:4px solid var(--amber); border-radius:14px; background:var(--amber-soft); margin-bottom:16px; padding:14px 16px; color:#74501c; }
.banner.danger { border-color:#f3cbd0; border-right-color:var(--danger); background:var(--danger-soft); color:#843b42; }
.banner.brand { border-color:#bfe7da; border-right-color:var(--brand); background:var(--brand-soft); color:#176456; }
.banner strong { display:block; font-size:12px; }
.banner p { margin:4px 0 0; font-size:10px; line-height:1.7; }
.manager-alert-center { margin-bottom:18px; }
.manager-alert-center .banner:last-child { margin-bottom:0; }
.action-banner>div { width:100%; }
.alert-records { display:grid; gap:7px; margin-top:11px; }
.alert-record { display:flex; width:100%; min-height:48px; align-items:center; justify-content:space-between; gap:12px; border:1px solid #d9969f; border-radius:11px; background:#fff; padding:9px 11px; color:#6f2831; text-align:right; cursor:pointer; }
.alert-record:hover,.alert-record:focus-visible { border-color:var(--danger); background:#fff8f8; outline:2px solid rgba(158,45,58,.18); }
.alert-record span,.alert-record strong,.alert-record small { display:block; }
.alert-record strong { color:#681f28; font-size:11px; }
.alert-record small { margin-top:3px; color:#7c3a43; font-size:9px; }
.alert-record b { color:var(--danger); font-size:10px; white-space:nowrap; }
.empty-state { display:grid; min-height:220px; place-items:center; align-content:center; gap:7px; padding:30px; color:var(--muted); text-align:center; }
.empty-symbol { display:grid; width:54px; height:54px; place-items:center; border-radius:16px; background:#edf3f5; color:#6f8291; font-size:22px; }
.empty-state strong { color:#415365; font-size:13px; }
.empty-state p { max-width:380px; margin:0; font-size:10px; line-height:1.8; }
.search { position:relative; min-width:220px; }
.search input { min-height:39px; padding-right:35px; background:var(--surface-soft); font-size:11px; }
.search::before { position:absolute; right:13px; top:50%; z-index:1; transform:translateY(-50%); color:#8c9aa7; content:"⌕"; }
.date-nav { display:flex; align-items:center; border:1px solid var(--line); border-radius:11px; background:#fff; overflow:hidden; }
.date-nav button { width:38px; align-self:stretch; border:0; background:#fff; color:#637386; }
.date-nav button:hover { background:#f4f7f8; }
.date-nav strong { min-width:150px; border-inline:1px solid var(--line); padding:9px 13px; color:#34475a; font-size:11px; text-align:center; cursor:pointer; }
.month-nav strong { min-width:112px; }
.chips { display:flex; gap:6px; flex-wrap:wrap; }
.chip,.status-pill { display:inline-flex; width:max-content; align-items:center; gap:5px; border:1px solid rgba(36,58,77,.28); border-radius:999px; background:#dbe4e9; padding:5px 9px; color:#263d50; font-size:11px; font-weight:850; }
.chip.brand,.status-pill.present { background:var(--brand-soft); color:var(--brand-strong); }
.chip.blue,.status-pill.left { background:var(--blue-soft); color:var(--blue); }
.chip.red,.status-pill.absent { background:var(--danger-soft); color:var(--danger); }
.chip.amber,.status-pill.undetermined { background:var(--amber-soft); color:var(--amber); }
.chip.purple,.status-pill.full_day_leave,.status-pill.mission { background:var(--purple-soft); color:var(--purple); }

/* Lists, attendance and tables */
.attendance-list { display:grid; }
.attendance-row { display:grid; grid-template-columns:minmax(200px,1.3fr) minmax(110px,.6fr) minmax(180px,.85fr) minmax(280px,1.25fr); align-items:center; gap:14px; border-bottom:1px solid #cbd5db; padding:15px 20px; }
.attendance-row:last-child { border-bottom:0; }
.attendance-row-focus { position:relative; z-index:1; background:#fff3f4; outline:3px solid #bd5c68; outline-offset:-3px; scroll-margin-block:110px; animation:attendance-focus 1.1s ease-in-out 2; }
@keyframes attendance-focus { 50% { background:#ffdfe3; } }
.person-cell { display:flex; min-width:0; align-items:center; gap:11px; }
.person-cell .avatar { background:#edf3f5; color:#27465b; }
.person-cell div { min-width:0; }
.person-cell strong { display:block; overflow:hidden; color:var(--navy-900); font-size:13px; text-overflow:ellipsis; white-space:nowrap; }
.person-cell small { display:block; margin-top:4px; color:var(--muted); font-size:10px; }
.time-grid { display:flex; gap:13px; }
.time-cell { display:grid; gap:3px; }
.time-cell span { color:#3c5366; font-size:10px; font-weight:700; }
.time-cell strong { direction:ltr; color:#33495b; font-size:13px; }
.row-actions { display:flex; justify-content:flex-end; gap:6px; flex-wrap:wrap; }
.record-meta { display:flex; align-items:center; gap:7px; margin-top:6px; color:#40566a; font-size:10px; }
.pending-record { width:max-content; border:1px solid #d4ad55; border-radius:999px; background:var(--amber-soft); padding:4px 8px; color:var(--amber); font-weight:800; }
.monthly-picker { border:1px solid var(--line); border-radius:14px; margin-top:16px; background:#f4f7f8; padding:12px; }
.monthly-days { display:grid; grid-template-columns:repeat(7,minmax(74px,1fr)); gap:7px; max-height:280px; overflow:auto; }
.monthly-days label { display:grid; min-height:68px; grid-template-columns:auto 1fr; align-items:center; gap:4px 7px; border:1px solid #bdcbd3; border-radius:10px; margin:0; background:#fff; padding:8px; cursor:pointer; }
.monthly-days input { width:18px; min-height:18px; grid-row:1/3; accent-color:var(--brand); }
.monthly-days span { color:var(--navy-900); font-size:15px; font-weight:850; }
.monthly-days small { color:var(--muted); font-size:9px; white-space:nowrap; }
.approval-list { display:grid; gap:9px; }
.approval-select-all { width:max-content; margin:0 0 4px; }
.approval-card { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:12px; border:1px solid #aebdc7; border-radius:13px; background:#fff; padding:12px; }
.approval-card.conflict { border-color:#c56c77; background:#fff5f6; }
.approval-card>input { width:19px; min-height:19px; accent-color:var(--brand); }
.approval-card strong { color:var(--navy-900); font-size:13px; }
.approval-card p { margin:5px 0; color:#2f485c; font-size:11px; }
.approval-card small { display:block; margin-bottom:6px; color:var(--muted); font-size:10px; }
.approval-actions { display:flex; gap:6px; }
.data-table-wrap { width:100%; overflow:auto; }
.data-table { width:100%; border-collapse:collapse; min-width:760px; }
.data-table th { border-bottom:1px solid #aebdc7; background:#dfe8ed; padding:12px 14px; color:#20384c; font-size:11px; font-weight:900; text-align:right; white-space:nowrap; }
.data-table td { border-bottom:1px solid #c8d3da; padding:13px 14px; color:#20384c; font-size:12px; vertical-align:middle; }
.data-table tbody tr:last-child td { border-bottom:0; }
.data-table tbody tr:hover { background:#fbfdfd; }
.data-table td strong { color:var(--navy-900); font-size:11px; }
.recovery-methods { display:grid; gap:6px; min-width:190px; }
.recovery-methods .button { justify-content:flex-start; width:100%; }
.money { direction:ltr; text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.money.positive { color:var(--brand-strong); }
.money.negative { color:var(--danger); }
.people-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.person-card { position:relative; overflow:hidden; border:1px solid var(--line); border-radius:15px; background:#fff; padding:16px; }
.person-card.inactive { opacity:.68; }
.person-card-head { display:flex; align-items:center; gap:11px; }
.person-card-head .avatar { width:43px; height:43px; background:var(--brand-soft); color:var(--brand-strong); }
.person-card-head strong { display:block; font-size:12px; }
.person-card-head small { color:var(--muted); font-size:9px; }
.person-card-data { display:grid; grid-template-columns:1fr 1fr; gap:9px; border-block:1px solid #edf1f3; margin-block:14px; padding-block:12px; }
.person-card-data span { display:grid; gap:3px; color:#536577; font-size:9px; }
.person-card-data b { color:#2f4356; font-size:11px; }
.person-card-foot { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.progress { width:100%; height:6px; border-radius:99px; background:#edf1f3; overflow:hidden; }
.progress span { display:block; height:100%; border-radius:inherit; background:var(--brand); }
.summary-list { display:grid; }
.summary-item { display:flex; align-items:center; justify-content:space-between; gap:12px; border-bottom:1px solid #edf1f3; padding:12px 0; }
.summary-item:last-child { border:0; }
.summary-item span { color:#667687; font-size:10px; }
.summary-item strong { color:var(--navy-900); font-size:12px; }
.timeline { display:grid; }
.timeline-item { position:relative; display:grid; grid-template-columns:13px 1fr auto; gap:10px; padding:10px 0; }
.timeline-item::after { position:absolute; right:5px; top:25px; bottom:-10px; width:1px; background:#e1e7eb; content:""; }
.timeline-item:last-child::after { display:none; }
.timeline-dot { width:11px; height:11px; margin-top:3px; border:3px solid var(--brand-soft); border-radius:50%; background:var(--brand); box-sizing:content-box; }
.timeline-item p { margin:0; color:#30465a; font-size:11px; line-height:1.7; }
.timeline-item small { color:#5d6f80; font-size:9px; white-space:nowrap; }

/* Forms and modal */
.modal { width:min(94vw,720px); max-height:92dvh; border:0; border-radius:20px; padding:0; background:#fff; box-shadow:0 35px 100px rgba(4,18,31,.3); }
.modal.wide { width:min(96vw,980px); }
.reason-dialog { width:min(92vw,520px); }
.modal::backdrop,.confirm-dialog::backdrop { background:rgba(3,13,24,.57); backdrop-filter:blur(5px); }
.modal-content { max-height:92dvh; overflow:auto; padding:23px; }
.modal-head { position:sticky; top:-23px; z-index:3; display:flex; align-items:flex-start; justify-content:space-between; gap:18px; border-bottom:1px solid #edf1f3; background:rgba(255,255,255,.96); margin:-23px -23px 18px; padding:20px 23px 16px; backdrop-filter:blur(12px); }
.modal-head small { color:var(--brand-strong); font-size:9px; font-weight:800; }
.modal-head h2 { margin:3px 0 0; color:var(--navy-900); font-size:20px; }
.modal-close { display:grid; width:34px; height:34px; place-items:center; border:1px solid var(--line); border-radius:9px; background:#fff; color:#71808f; font-size:20px; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 13px; }
.form-grid.three { grid-template-columns:repeat(3,1fr); }
.form-grid .wide { grid-column:1/-1; }
.jalali-input-wrap { position:relative; display:block; }
.jalali-input-wrap input { padding-left:76px; direction:ltr; text-align:right; }
.jalali-picker-button { position:absolute; top:5px; bottom:5px; left:5px; border:0; border-radius:8px; background:var(--brand-soft); padding:0 11px; color:var(--brand-strong); font-size:10px; font-weight:850; }
.date-dialog { width:min(94vw,440px); }
.calendar-nav { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px; }
.calendar-nav button { display:grid; width:42px; height:42px; place-items:center; border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--navy-900); font-size:24px; }
.calendar-nav strong { color:var(--navy-900); font-size:15px; }
.calendar-weekdays,.calendar-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:5px; }
.calendar-weekdays { margin-bottom:7px; color:#40566a; font-size:11px; font-weight:850; text-align:center; }
.calendar-weekdays span { padding:6px 0; }
.calendar-day,.calendar-empty { aspect-ratio:1; min-width:0; }
.calendar-day { border:1px solid #c5d0d6; border-radius:10px; background:#fff; color:#263f52; font-size:12px; font-weight:750; }
.calendar-day.today { border-color:var(--brand); box-shadow:inset 0 0 0 1px var(--brand); }
.calendar-day.selected { border-color:var(--navy-900); background:var(--navy-900); color:#fff; }
.bulk-launch { display:flex; align-items:center; justify-content:space-between; gap:18px; border:1px solid #75aa9d; border-radius:16px; margin-bottom:14px; padding:16px 18px; background:linear-gradient(135deg,#e2f4ee,#f7fbfa); }
.bulk-launch strong { display:block; color:var(--navy-900); font-size:14px; }
.bulk-launch p { margin:5px 0 0; color:#365366; font-size:11px; line-height:1.7; }
.bulk-select-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:18px 0 10px; }
.bulk-select-head .check-field { margin:0; }
.bulk-select-head>strong { color:var(--brand-strong); font-size:11px; white-space:nowrap; }
.bulk-employee-list { display:grid; max-height:42vh; gap:7px; overflow:auto; border:1px solid var(--line); border-radius:14px; background:#eef3f5; padding:8px; }
.bulk-employee { display:grid; grid-template-columns:auto 38px minmax(0,1fr) auto; align-items:center; gap:10px; border:1px solid #cbd6dc; border-radius:11px; margin:0; background:#fff; padding:10px; }
.bulk-employee>input { width:19px; min-height:19px; accent-color:var(--brand); }
.bulk-employee .avatar { width:36px; height:36px; }
.bulk-employee span strong { display:block; color:var(--navy-900); font-size:12px; }
.bulk-employee span small { display:block; margin-top:3px; color:var(--muted); font-size:9px; }
.sheet-help { margin:0 0 12px; line-height:1.9; }
.attendance-sheet { max-height:58vh; overflow:auto; border:1px solid var(--line); border-radius:14px; background:#eef3f5; }
.sheet-row { display:grid; grid-template-columns:minmax(190px,1.25fr) 105px 105px 82px minmax(150px,1fr); align-items:center; gap:9px; border-bottom:1px solid #cbd6dc; background:#fff; padding:10px; }
.sheet-row:last-child { border-bottom:0; }
.sheet-row.locked { background:#eef2f4; opacity:.78; }
.sheet-row>label { margin:0; }
.sheet-row>label>span { display:none; }
.sheet-row input,.sheet-row textarea { min-height:40px; padding:7px 8px; }
.sheet-row textarea { height:40px; resize:vertical; }
.sheet-header { position:sticky; top:0; z-index:2; background:#dce7ec; color:#183247; font-size:10px; font-weight:900; }
.sheet-person { min-width:0; }
.sheet-person strong,.sheet-person small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sheet-person strong { color:var(--navy-900); font-size:12px; }
.sheet-person small { margin:3px 0 5px; color:var(--muted); font-size:9px; }
.sheet-person .status-pill { display:inline-flex; }
.sheet-absent { display:flex!important; min-height:40px; align-items:center; justify-content:center; gap:5px; border:1px solid var(--line); border-radius:10px; padding:7px; }
.sheet-absent input { width:18px; min-height:18px; accent-color:var(--danger); }
.sheet-absent span { display:inline!important; color:var(--danger); font-size:10px; font-weight:850; }
#attendance-sheet-form .modal-actions { position:sticky; bottom:0; flex-wrap:wrap; border-top:1px solid var(--line); background:#fff; padding-top:14px; }
#sheet-change-count { margin-left:auto; font-size:10px; }
.form-section { border-top:1px solid #edf1f3; margin-top:20px; padding-top:17px; }
.section-gap { margin-top:16px; }
.record-note { margin:7px 0 0; color:#405b70; font-size:9px; line-height:1.8; }
.rate-change-toggle { width:fit-content; margin:10px 0 6px; }
.form-section h3 { margin:0 0 5px; color:var(--navy-900); font-size:13px; }
.form-section>p { margin:0 0 12px; color:var(--muted); font-size:9px; line-height:1.7; }
.modal-actions { display:flex; align-items:center; justify-content:flex-end; gap:8px; margin-top:22px; }
.check-field { display:flex; min-height:44px; align-items:center; gap:9px; border:1px solid var(--line); border-radius:11px; margin-top:17px; padding:9px 11px; color:#526376; font-size:10px; }
.check-field input { width:17px; min-height:17px; accent-color:var(--brand); }
.schedule-list { display:grid; gap:7px; overflow-x:auto; padding-bottom:4px; }
.schedule-row { display:grid; min-width:980px; grid-template-columns:85px 95px repeat(8,minmax(85px,1fr)); align-items:end; gap:7px; border:1px solid var(--line); border-radius:12px; padding:10px; background:#f1f5f7; }
.schedule-row label { margin:0; font-size:8px; }
.schedule-row input,.schedule-row select { min-height:37px; padding:7px; font-size:10px; }
.confirm-dialog { width:min(90vw,410px); border:0; border-radius:19px; padding:0; }
.confirm-card { padding:27px; text-align:center; }
.confirm-symbol { display:grid; width:48px; height:48px; margin:auto; place-items:center; border-radius:15px; background:var(--danger-soft); color:var(--danger); font-size:22px; font-weight:850; }
.confirm-card h2 { margin:15px 0 8px; color:var(--navy-900); font-size:18px; }
.confirm-card p { margin:0; color:var(--muted); font-size:10px; line-height:1.9; }
.confirm-card .modal-actions { justify-content:center; }
.toast-stack { position:fixed; left:22px; bottom:22px; z-index:100; display:grid; gap:8px; width:min(90vw,350px); pointer-events:none; }
.toast { display:flex; align-items:flex-start; gap:10px; border:1px solid rgba(255,255,255,.08); border-radius:13px; background:var(--navy-900); padding:12px 14px; color:#fff; box-shadow:var(--shadow); animation:toast-in .28s ease both; font-size:10px; line-height:1.7; }
.toast.success::before { color:#5be0bc; content:"✓"; }
.toast.error::before { color:#ff8c93; content:"!"; }
@keyframes toast-in { from { opacity:0; transform:translateY(12px); } }

/* Recovery and report */
.recovery-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.recovery-card { position:relative; overflow:hidden; border:1px solid var(--line); border-radius:17px; background:#fff; padding:21px; }
.recovery-card::after { position:absolute; left:-30px; top:-30px; width:100px; height:100px; border-radius:50%; background:var(--brand-soft); content:""; opacity:.7; }
.recovery-card>* { position:relative; z-index:1; }
.recovery-card .recovery-icon { display:grid; width:42px; height:42px; place-items:center; border-radius:12px; background:var(--navy-900); color:#65d9b8; font-size:18px; }
.recovery-card h3 { margin:15px 0 7px; color:var(--navy-900); font-size:14px; }
.recovery-card p { min-height:42px; margin:0; color:var(--muted); font-size:9px; line-height:1.8; }
.recovery-meta { display:grid; gap:5px; border-top:1px solid #edf1f3; margin-top:16px; padding-top:13px; color:#6f7f8f; font-size:9px; }
.report-sheet { background:#fff; }
.report-title { display:none; }
.print-only { display:none; }
.payroll-calculator { display:flex; align-items:center; gap:15px; border:1px solid #71a99a; border-radius:17px; margin-bottom:16px; background:linear-gradient(135deg,#e4f5ef,#f9fcfb); padding:17px 19px; box-shadow:var(--shadow-sm); }
.payroll-cutoff { display:inline-flex; align-items:center; gap:8px; border:1px solid #71a99a; border-radius:999px; margin-top:10px; background:#e4f5ef; padding:7px 11px; color:var(--brand-strong); }
.payroll-cutoff span { font-size:10px; font-weight:800; }
.payroll-cutoff strong { color:var(--navy-900); font-size:12px; }
.payroll-calculator-icon { display:grid; width:48px; height:48px; flex:0 0 auto; place-items:center; border-radius:14px; background:var(--navy-900); color:#72dfc1; font-size:24px; font-weight:900; }
.payroll-calculator div { flex:1; }
.payroll-calculator strong { display:block; color:var(--navy-900); font-size:14px; }
.payroll-calculator p { margin:5px 0 0; color:var(--muted); font-size:10px; line-height:1.7; }
.payroll-calculator .button { flex:0 0 auto; }
.workday-cell strong,.workday-cell small { display:block; }
.workday-cell strong { color:var(--navy-900); }
.workday-cell small { margin-top:4px; color:var(--muted); white-space:nowrap; }
.report-summary { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:1px; border-bottom:1px solid var(--line); background:var(--line); }
.report-summary span { display:grid; gap:6px; background:#f8fafb; padding:12px 14px; color:var(--muted); font-size:9px; }
.report-summary strong { color:var(--navy-900); font-size:13px; }
.payroll-print-details { margin-top:16px; }
.payroll-print-person { break-inside:avoid; border:1px solid #8395a1; border-radius:10px; margin-bottom:10px; padding:11px; }
.payroll-print-person h2 { margin:0 0 6px; font-size:13px; }
.payroll-print-person h2 small { color:#425667; font-size:8px; font-weight:600; }
.payroll-print-person p { margin:4px 0; font-size:8px; line-height:1.7; }
.print-facts { display:grid; grid-template-columns:repeat(6,1fr); gap:4px; margin:7px 0; }
.print-facts span { border:1px solid #ccd5da; border-radius:5px; padding:5px; font-size:7px; }
.print-facts b { display:block; margin-top:2px; font-size:8px; }
.print-total { border-top:1px solid #9daab2; padding-top:5px; font-weight:800; }
.print-warning { color:#842b35; font-weight:800; }
.kpi-strip { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; border-radius:14px; background:var(--line); overflow:hidden; }
.kpi-strip div { background:#fff; padding:15px; }
.kpi-strip span { display:block; color:var(--muted); font-size:9px; }
.kpi-strip strong { display:block; margin-top:6px; color:var(--navy-900); font-size:16px; }
.mobile-nav,.sidebar-scrim { display:none; }

@media (max-width:1180px) {
  .stat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .people-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .attendance-row { grid-template-columns:minmax(190px,1fr) minmax(160px,.8fr) minmax(250px,1fr); }
  .attendance-row>.department-cell { display:none; }
  .schedule-row { grid-template-columns:75px 90px repeat(8,minmax(82px,1fr)); }
}
@media (max-width:900px) {
  .auth-page { grid-template-columns:1fr; background:var(--canvas); }
  .auth-brand { min-height:auto; padding:26px 24px 75px; }
  .auth-copy { padding:65px 0 5px; }
  .auth-copy h1 { max-width:600px; font-size:38px; }
  .auth-copy p { font-size:13px; }
  .auth-trust { display:none; }
  .auth-form-side { min-height:auto; margin-top:-48px; padding:0 18px 55px; }
  .auth-card { border:1px solid var(--line); border-radius:20px; background:#fff; padding:23px; box-shadow:var(--shadow); }
  .mini-logo { display:block; }
  .auth-footer { bottom:18px; }
  .app-layout { display:block; padding-bottom:70px; }
  .sidebar { position:fixed; top:0; right:0; bottom:0; left:auto; z-index:60; width:min(86vw,320px); max-width:100vw; transform:translate3d(105%,0,0); transition:transform .25s ease; box-shadow:-20px 0 60px rgba(2,15,27,.25); contain:layout paint; }
  .app-layout.menu-open .sidebar { transform:translate3d(0,0,0); }
  .sidebar-scrim { position:fixed; inset:0; z-index:55; display:block; background:rgba(4,14,25,.5); opacity:0; pointer-events:none; transition:opacity .25s; }
  .app-layout.menu-open .sidebar-scrim { opacity:1; pointer-events:auto; }
  .mobile-menu { display:block; }
  .mobile-nav { position:fixed; right:0; bottom:0; left:0; z-index:40; display:flex; min-height:65px; align-items:center; justify-content:space-around; border-top:1px solid #dce4e8; background:rgba(255,255,255,.95); padding-bottom:env(safe-area-inset-bottom); box-shadow:0 -8px 28px rgba(8,25,42,.08); backdrop-filter:blur(16px); }
  .mobile-nav button { display:grid; min-width:54px; place-items:center; gap:2px; border:0; background:transparent; color:#536577; font-weight:750; }
  .mobile-nav button span { font-size:19px; }
  .mobile-nav button small { font-size:9px; }
  .mobile-nav button.active { color:var(--brand-strong); }
  .topbar { min-height:68px; }
  .workspace { min-height:calc(100dvh - 133px); }
  .two-column { grid-template-columns:1fr; }
  .three-column { grid-template-columns:1fr 1fr; }
  .schedule-row { grid-template-columns:70px 90px repeat(8,minmax(82px,1fr)); }
}
@media (max-width:680px) {
  :root { --muted:#2b4356; --line:#91a4b0; --canvas:#dce4e9; --surface-soft:#e4ebef; }
  body { font-size:15px; }
  .topbar { padding:10px 14px; }
  .top-title span { font-size:10px; }
  .top-title h1 { font-size:17px; }
  .connection b { display:none; }
  #install-button { min-height:38px; padding:7px 10px; font-size:11px; }
  .connection { width:32px; height:32px; justify-content:center; padding:0; }
  .workspace { padding:17px 12px 24px; }
  .page-head { align-items:flex-start; flex-direction:column; margin-bottom:16px; }
  .page-head h2 { font-size:24px; }
  .page-head p { color:#263f52; font-size:14px; line-height:1.9; }
  .head-actions,.toolbar { width:100%; }
  .head-actions>.button,.toolbar>.button { flex:1; }
  .page-head>.head-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:stretch; }
  .page-head>.head-actions>.date-nav { grid-column:1/-1; grid-row:1; width:100%; }
  .page-head>.head-actions>.button { width:100%; min-width:0; white-space:normal; }
  .date-nav { flex:1; min-width:0; }
  .date-nav button { flex:0 0 48px; width:48px; }
  .date-nav strong { flex:1; min-width:0; white-space:nowrap; }
  .stat-grid { gap:8px; }
  .metric-card { min-height:122px; border-width:1.5px; padding:14px; }
  .metric-card .metric-top { font-size:13px; line-height:1.5; }
  .metric-card strong { font-size:23px; }
  .metric-card small { color:#2d4659; font-size:12px; font-weight:700; line-height:1.55; }
  .metric-icon { width:30px; height:30px; }
  .panel { border-color:#91a4b0; border-radius:15px; }
  .panel-head { align-items:flex-start; padding:15px; }
  .panel-head h3 { font-size:16px; }
  .panel-head p { color:#2d4659; font-size:13px; line-height:1.7; }
  .panel-body { padding:15px; }
  .attendance-row { grid-template-columns:1fr auto; gap:10px; padding:14px; }
  .attendance-row>.department-cell { display:none; }
  .attendance-row>.attendance-state-cell { grid-column:1/2; }
  .attendance-row>.row-actions { grid-column:1/-1; justify-content:stretch; }
  .row-actions .button { flex:1; }
  .button { min-height:44px; font-size:13px; font-weight:800; }
  .button.small { min-height:40px; font-size:12px; }
  label { color:#263f52; font-size:13px; }
  input,select,textarea { min-height:48px; border-color:#91a4b0; font-size:14px; }
  .jalali-picker-button { font-size:12px; }
  .calendar-day { font-size:14px; }
  .bulk-launch { align-items:stretch; flex-direction:column; padding:15px; }
  .bulk-launch .button { width:100%; }
  .bulk-select-head { align-items:stretch; flex-direction:column; }
  .bulk-select-head>strong { padding-inline:4px; }
  .bulk-employee { grid-template-columns:auto 38px minmax(0,1fr); }
  .bulk-employee>.status-pill { grid-column:2/4; justify-self:start; }
  .monthly-days { grid-template-columns:repeat(3,minmax(0,1fr)); max-height:46vh; }
  .monthly-days label { min-height:72px; }
  .approval-card { grid-template-columns:auto minmax(0,1fr); align-items:start; }
  .approval-actions { grid-column:1/-1; width:100%; }
  .approval-actions .button { flex:1; }
  .sheet-header { display:none; }
  .attendance-sheet { max-height:57vh; border:0; background:transparent; }
  .sheet-row { grid-template-columns:1fr 1fr; gap:9px; border:1px solid #91a4b0; border-radius:13px; margin-bottom:10px; padding:12px; }
  .sheet-person { grid-column:1/-1; }
  .sheet-row>label>span { display:block; }
  .sheet-row>label { gap:5px; }
  .sheet-absent { align-self:end; }
  .sheet-row>label:last-child { grid-column:1/-1; }
  #attendance-sheet-form .modal-actions { align-items:stretch; }
  #sheet-change-count { width:100%; margin:0; text-align:center; }
  #attendance-sheet-form .modal-actions .button { flex:1; }
  input::placeholder,textarea::placeholder { color:#657887; }
  .chip,.status-pill { border-color:rgba(25,52,72,.34); font-size:12px; }
  .person-cell strong { font-size:14px; }
  .person-cell small { color:#2e4659; font-size:11px; }
  .time-cell span { color:#2c4558; font-size:11px; }
  .time-cell strong { font-size:14px; }
  .record-meta { color:#314a5d; font-size:11px; }
  .data-table th { background:#d5e0e6; color:#142e43; font-size:12px; }
  .data-table td,.data-table td strong { color:#172f43; font-size:13px; }
  .person-card,.recovery-card { border-color:#91a4b0; }
  .person-card-head strong { font-size:13px; }
  .person-card-head small { color:#2e4659; font-size:11px; }
  .person-card-data span { color:#304a5d; font-size:11px; }
  .person-card-data b { color:#183247; font-size:13px; }
  .summary-item span { color:#2d4659; font-size:12px; }
  .summary-item strong { font-size:14px; }
  .timeline-item p { color:#1f394e; font-size:13px; }
  .timeline-item small { color:#30495c; font-size:11px; }
  .banner strong { font-size:13px; }
  .banner p { font-size:12px; }
  .alert-record { align-items:flex-start; flex-direction:column; }
  .alert-record strong { font-size:14px; }
  .alert-record small,.alert-record b { font-size:12px; }
  .empty-state { color:#2c4558; }
  .empty-state strong { color:#1c374c; font-size:14px; }
  .empty-state p { font-size:12px; }
  .hero-panel p { color:#e0e8ed; font-size:13px; }
  .form-section>p,.confirm-card p,.recovery-card p { color:#2d4659; font-size:12px; }
  .check-field { color:#2b4458; font-size:12px; }
  .schedule-row label { font-size:10px; }
  .recovery-meta,.kpi-strip span { color:#30495c; font-size:11px; }
  .mobile-nav { border-top-color:#9eafb9; background:rgba(255,255,255,.98); }
  .mobile-nav button { color:#263f52; }
  .mobile-nav button span { font-size:21px; }
  .mobile-nav button small { font-size:11px; }
  .people-grid,.three-column,.recovery-grid { grid-template-columns:1fr; }
  .person-card-data { grid-template-columns:1fr 1fr; }
  .form-grid,.form-grid.three { grid-template-columns:1fr; }
  .form-grid .wide { grid-column:auto; }
  .modal-content { padding:18px; }
  .modal-head { top:-18px; margin:-18px -18px 14px; padding:17px 18px 14px; }
  .schedule-list { overflow:auto; }
  .schedule-row { min-width:940px; }
  .banner { align-items:flex-start; flex-direction:column; }
  .hero-panel .panel-body { padding:21px; }
  .hero-panel h3 { font-size:20px; }
  .payroll-calculator { align-items:stretch; flex-wrap:wrap; }
  .payroll-calculator div { min-width:calc(100% - 70px); }
  .payroll-calculator .button { width:100%; }
  .report-summary { grid-template-columns:1fr 1fr; }
  .report-summary span:last-child { grid-column:1/-1; }
  .workday-cell { min-width:190px; }

  /* High-readability profile for workshop phones */
  :root { --muted:#17344a; --line:#718b9c; --canvas:#d9e2e8; --surface-soft:#dfe8ed; }
  body { font-size:16px; }
  .subtle { color:#19374d; }
  .topbar { min-height:76px; padding:11px 14px; }
  .top-title span { color:#075f51; font-size:12px; }
  .top-title h1 { font-size:20px; }
  .mobile-menu { font-size:27px; }
  .page-head h2 { font-size:26px; line-height:1.55; }
  .page-head p { color:#15344a; font-size:15px; font-weight:650; line-height:2; }
  .payroll-cutoff { display:flex; width:100%; box-sizing:border-box; justify-content:space-between; border-width:2px; border-radius:13px; padding:10px 12px; }
  .payroll-cutoff span,.payroll-cutoff strong { font-size:14px; }
  .date-nav strong { font-size:13px; }
  .metric-card { min-height:144px; border-width:2px; padding:16px; }
  .metric-card:not(.tone-blue):not(.tone-amber):not(.tone-red):not(.tone-purple) { --metric-bg:#e6f4ef; --metric-border:#72a493; }
  .metric-card.tone-blue { --metric-bg:#e5f2fc; --metric-border:#6f9fc3; }
  .metric-card.tone-amber { --metric-bg:#fff3d5; --metric-border:#c99e43; }
  .metric-card.tone-red { --metric-bg:#fde7e9; --metric-border:#c97881; }
  .metric-card.tone-purple { --metric-bg:#efe9ff; --metric-border:#927bc0; }
  .metric-card .metric-top { color:#102c42; font-size:15px; line-height:1.65; }
  .metric-card strong { margin-top:15px; font-size:28px; }
  .metric-card small { color:#17384f; font-size:13px; font-weight:750; line-height:1.65; }
  .metric-icon { width:36px; height:36px; font-size:17px; }
  .panel { border-color:#718b9c; border-width:1.5px; }
  .panel-head h3 { font-size:18px; }
  .panel-head p { color:#17384f; font-size:14px; font-weight:650; line-height:1.8; }
  .button { min-height:48px; font-size:15px; font-weight:850; }
  .button.small { min-height:42px; font-size:13px; }
  label { color:#17364c; font-size:14px; }
  input,select,textarea { min-height:50px; border-color:#718b9c; font-size:16px; }
  input::placeholder,textarea::placeholder { color:#516b7c; }
  .chip,.status-pill { border-color:rgba(18,48,69,.42); font-size:13px; }
  .person-cell strong { font-size:15px; }
  .person-cell small,.time-cell span,.record-meta { color:#17384f; font-size:12px; }
  .time-cell strong { font-size:15px; }
  .data-table th { background:#cad9e1; color:#0d2940; font-size:13px; }
  .data-table td,.data-table td strong { color:#102c42; font-size:14px; }
  .person-card,.recovery-card { border-color:#718b9c; border-width:1.5px; }
  .person-card-head strong { font-size:15px; }
  .person-card-head small,.person-card-data span { color:#17384f; font-size:12px; }
  .person-card-data b { color:#102c42; font-size:14px; }
  .summary-item span { color:#17384f; font-size:13px; }
  .summary-item strong { font-size:15px; }
  .timeline-item p { color:#102f45; font-size:14px; }
  .timeline-item small { color:#17384f; font-size:12px; }
  .banner strong { font-size:15px; }
  .banner p,.empty-state p { font-size:13px; }
  .hero-panel small { font-size:13px; }
  .hero-panel h3 { font-size:23px; }
  .hero-panel p { color:#edf3f6; font-size:14px; }
  .form-section>p,.confirm-card p,.recovery-card p { color:#17384f; font-size:13px; }
  .check-field { color:#17384f; font-size:13px; }
  .schedule-row label { font-size:11px; }
  .recovery-meta,.kpi-strip span { color:#17384f; font-size:12px; }
  .mobile-nav { min-height:73px; border-top:2px solid #718b9c; background:#fff; }
  .mobile-nav button { color:#17364c; }
  .mobile-nav button span { font-size:24px; }
  .mobile-nav button small { font-size:12px; font-weight:850; }
}
@media (max-width:420px) {
  .auth-brand { padding:22px 18px 70px; }
  .auth-copy { padding-top:48px; }
  .auth-copy h1 { font-size:31px; }
  .auth-form-side { padding-inline:12px; }
  .auth-card { padding:20px 17px; }
  .stat-grid { grid-template-columns:1fr 1fr; }
  .metric-card { min-height:174px; padding:14px; }
  .metric-card .metric-top { align-items:flex-start; gap:8px; font-size:14px; }
  .metric-card strong { margin-top:12px; font-size:22px; line-height:1.3; }
  .metric-card small { display:block; margin-top:8px; font-size:12px; line-height:1.55; }
  .top-actions .button.primary { padding-inline:11px; font-size:13px; }
  .mobile-nav button { min-width:48px; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
}
@media print {
  @page { size:A4 landscape; margin:12mm; }
  body { background:#fff; }
  .sidebar,.topbar,.mobile-nav,.page-head,.no-print,.toast-stack { display:none!important; }
  .app-layout,.app-main { display:block!important; }
  .workspace { max-width:none; min-height:0; padding:0; }
  .workspace>*:not(.printable) { display:none!important; }
  .printable { display:block!important; border:0!important; box-shadow:none!important; }
  .report-title { display:flex; align-items:center; justify-content:space-between; border-bottom:2px solid #173247; margin-bottom:12px; padding-bottom:9px; }
  .report-title h1 { margin:0; font-size:17px; }
  .report-title p { margin:0; font-size:9px; }
  .print-only { display:block!important; }
  .report-summary { grid-template-columns:repeat(5,1fr); border:1px solid #aab7bf; margin-bottom:8px; }
  .report-summary span { padding:6px; font-size:7px; }
  .report-summary strong { font-size:9px; }
  .data-table { min-width:0; }
  .data-table th,.data-table td { padding:6px 7px; font-size:7.5px; }
  .workday-cell { min-width:0; }
  .workday-cell small { white-space:normal; }
}