/* ══════════════════════════════════════════════════════════════
   °CRYO Mongolia — admin dashboard
   Uses the Deep Freeze tokens from shared.css
   ══════════════════════════════════════════════════════════════ */

body{background:var(--void);min-height:100vh}

/* ── setup / login gate ── */
.gate{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;
  background:radial-gradient(80% 60% at 50% 0%,rgba(26,127,196,.18),transparent 62%),var(--void)}
.gate-card{width:100%;max-width:420px;padding:44px 40px;border-radius:var(--r-2xl);
  background:linear-gradient(165deg,rgba(20,38,62,.8),rgba(8,16,28,.94));
  border:1px solid var(--border-mid);box-shadow:var(--lift-3), var(--hairline)}
.gate-logo{margin-bottom:10px}
.admin-brand{display:inline-flex;align-items:center;gap:10px;color:var(--ice-50);text-decoration:none}
.admin-brand img{width:31px;height:31px;object-fit:contain;flex:0 0 auto;filter:drop-shadow(0 0 11px rgba(0,105,234,.4))}
.admin-brand>span{display:grid;gap:3px;line-height:1}
.admin-brand b{font-family:var(--ff-display);font-size:13.5px;font-weight:800;letter-spacing:.012em;white-space:nowrap}
.admin-brand b em{font-style:normal;color:var(--ice-400)}
.admin-brand small{font-size:6px;font-weight:700;letter-spacing:.16em;color:var(--ice-300);white-space:nowrap}
.gate-sub{font-size:12.5px;color:var(--text-muted);margin-bottom:28px}
.gate-card .field{margin-bottom:16px}
.gate-tabs{display:flex;gap:6px;margin-bottom:22px}
.gate-tabs button{flex:1;padding:9px;border-radius:99px;border:1px solid var(--border);
  background:var(--glass);color:var(--text-secondary);font-family:var(--ff-body);
  font-size:12.5px;font-weight:700;cursor:pointer;transition:all var(--ease)}
.gate-tabs button.on{color:#03131f;border-color:transparent;
  background:linear-gradient(135deg,var(--ice-100),var(--ice-400))}
.password-control{position:relative}
.password-control .ctl{width:100%;padding-right:76px}
.password-toggle{position:absolute;right:8px;top:50%;transform:translateY(-50%);min-width:58px;padding:7px 9px;
  border:1px solid var(--border);border-radius:9px;background:rgba(8,16,28,.9);color:var(--ice-200);
  font:700 11.5px/1 var(--ff-body);cursor:pointer;transition:color var(--ease),border-color var(--ease),background var(--ease)}
.password-toggle:hover,.password-toggle:focus-visible{color:var(--ice-50);border-color:var(--border-strong);background:var(--glass-2);outline:none}

/* ── shell ── */
.shell{display:grid;grid-template-columns:250px 1fr;min-height:100vh}
.side{position:sticky;top:0;height:100vh;padding:26px 18px;display:flex;flex-direction:column;gap:4px;
  background:linear-gradient(180deg,rgba(10,18,32,.95),rgba(3,6,12,.98));
  border-right:1px solid var(--border)}
.side-logo{padding:0 12px 22px}
.side-logo.admin-brand{display:inline-flex}
.side a.nav-item,.side button.nav-item{
  display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:12px;
  font-family:var(--ff-body);font-size:13.5px;font-weight:600;color:var(--text-secondary);
  background:none;border:1px solid transparent;cursor:pointer;text-align:left;
  text-decoration:none;transition:all var(--ease);width:100%}
.nav-item:hover{color:var(--ice-100);background:var(--glass)}
.nav-item.on{color:var(--ice-50);background:rgba(88,198,255,.12);border-color:rgba(88,198,255,.26)}
.nav-item .ic{font-size:15px;width:20px;text-align:center;flex-shrink:0}
.side-foot{margin-top:auto;padding-top:18px;border-top:1px solid var(--border)}
.side-user{padding:0 12px 12px}
.side-user .u-mail{font-size:12px;color:var(--ice-100);font-weight:700;word-break:break-all}
.side-role{display:inline-block;margin-top:6px;padding:3px 10px;border-radius:99px;
  font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.role-owner{background:linear-gradient(135deg,var(--ice-100),var(--ice-400));color:#03131f}
.role-admin{background:rgba(88,198,255,.16);color:var(--ice-200);border:1px solid rgba(88,198,255,.32)}
.role-staff{background:var(--glass);color:var(--text-muted);border:1px solid var(--border)}

.main{padding:34px 40px 60px;min-width:0}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
  flex-wrap:wrap;margin-bottom:28px}
.head-actions{display:flex;align-items:flex-end;justify-content:flex-end;gap:9px;flex-wrap:wrap}
.inline-field{flex-direction:row;align-items:center;gap:8px}
.inline-field label{margin:0;white-space:nowrap}
.inline-field select{width:auto;min-width:128px}
.page-title{font-size:27px;font-weight:800;letter-spacing:-.04em;color:var(--ice-50)}
.page-sub{font-size:13px;color:var(--text-muted);margin-top:5px}
.view{display:none}
.view.on{display:block;animation:vin .4s cubic-bezier(.22,1,.36,1)}
@keyframes vin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ── KPI tiles ── */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:28px}
.kpi{position:relative;padding:24px;border-radius:var(--r-xl);overflow:hidden;
  background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.014));
  border:1px solid var(--border);box-shadow:var(--hairline)}
.kpi::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 60% at 50% 0%,rgba(88,198,255,.13),transparent 70%)}
.kpi-label{position:relative;font-size:9.5px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-muted);margin-bottom:12px}
.kpi-val{position:relative;font-size:30px;font-weight:800;line-height:1;letter-spacing:-.05em;
  background:linear-gradient(150deg,var(--ice-50),var(--ice-400));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.kpi-val small{font-size:.5em;color:var(--ice-500);-webkit-text-fill-color:var(--ice-500);margin-right:4px}
.kpi-note{position:relative;font-size:11.5px;color:var(--text-muted);margin-top:9px}

/* ── panels ── */
.panel{padding:26px 28px;border-radius:var(--r-xl);margin-bottom:22px;
  background:linear-gradient(165deg,rgba(20,38,62,.5),rgba(8,16,28,.8));
  border:1px solid var(--border);box-shadow:var(--hairline)}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin-bottom:20px}
.panel-title{font-size:15px;font-weight:800;letter-spacing:-.02em;color:var(--ice-100)}

/* ── chart ── */
.chart{width:100%;height:210px;display:block;overflow:visible}
.chart .bar{transition:opacity .2s}
.chart .bar:hover{opacity:.75}
.chart text{font-family:var(--ff-body);font-size:10px;fill:var(--text-muted)}
.chart .grid{stroke:rgba(150,205,255,.10);stroke-width:1}

/* ── tables ── */
.tbl-wrap{overflow-x:auto;border-radius:var(--r-lg);border:1px solid var(--border)}
table.tbl{width:100%;border-collapse:collapse;font-size:13px;min-width:720px}
table.tbl th{background:rgba(88,198,255,.09);padding:12px 16px;text-align:left;font-size:9.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ice-300);font-weight:800;white-space:nowrap}
table.tbl td{padding:13px 16px;border-bottom:1px solid var(--border);color:var(--text-secondary);
  vertical-align:middle}
table.tbl tr:last-child td{border-bottom:none}
table.tbl tbody tr:hover td{background:rgba(88,198,255,.04)}
.t-strong{color:var(--ice-100);font-weight:700}
.t-mono{font-variant-numeric:tabular-nums}
.empty{padding:44px 20px;text-align:center;color:var(--text-muted);font-size:13.5px}

/* ── status pills ── */
.pill{display:inline-block;padding:4px 12px;border-radius:99px;font-size:9.5px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.st-pending  {background:rgba(255,180,80,.14);color:#ffcf95;border:1px solid rgba(255,180,80,.3)}
.st-confirmed{background:rgba(88,198,255,.14);color:var(--ice-200);border:1px solid rgba(88,198,255,.32)}
.st-done     {background:rgba(80,220,160,.14);color:#8ceec2;border:1px solid rgba(80,220,160,.3)}
.st-cancelled{background:rgba(255,110,110,.12);color:#ffa3a3;border:1px solid rgba(255,110,110,.28)}
.st-transferred{background:rgba(160,120,255,.14);color:#d6c7ff;border:1px solid rgba(160,120,255,.32)}
.today-attendance{min-width:1120px!important}
.attendance-date-panel{padding:14px 18px}
.attendance-date-nav{display:flex;align-items:flex-end;justify-content:center;gap:10px;flex-wrap:wrap}
.attendance-date-field{min-width:190px}
.attendance-kpis{margin-bottom:18px}
.attendance-clock-panel{border-color:rgba(88,198,255,.28);background:linear-gradient(135deg,rgba(88,198,255,.08),rgba(8,18,31,.72));padding:22px}
.attendance-clock-copy{display:flex;flex-direction:column;gap:7px;width:100%}
.attendance-name-picker{display:flex;flex-direction:column;gap:14px;margin-top:12px}
.attendance-name-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:9px}
.attendance-name-option{display:flex;align-items:center;min-height:48px;padding:0 14px;border:1px solid var(--border);border-radius:12px;background:rgba(3,6,12,.52);color:var(--text-secondary);font-size:13px;font-weight:800;cursor:pointer;transition:all var(--ease)}
.attendance-name-option span:first-of-type{flex:1;min-width:0}
.attendance-name-status{margin-left:auto;padding:3px 7px;border-radius:999px;background:rgba(255,255,255,.05);color:var(--text-muted);font-size:9px;font-weight:900;letter-spacing:.04em;white-space:nowrap}
.attendance-name-status.is-in{background:rgba(80,220,160,.12);color:#8ceec2}
.attendance-name-status.is-out{background:rgba(88,198,255,.12);color:var(--ice-200)}
.attendance-name-option:hover{border-color:rgba(88,198,255,.45);color:var(--ice-100)}
.attendance-name-option:has(input:checked){border-color:rgba(88,198,255,.7);background:rgba(88,198,255,.14);color:var(--ice-100);box-shadow:0 0 22px rgba(40,150,255,.1)}
.attendance-name-option input{width:17px;height:17px;margin:0 10px 0 0;accent-color:#58c6ff}
.attendance-confirm-selection,.attendance-session-action{min-height:44px;border:1px solid rgba(88,198,255,.48);border-radius:12px;background:linear-gradient(135deg,rgba(88,198,255,.24),rgba(35,130,255,.18));color:var(--ice-100);font:inherit;font-size:12px;font-weight:900;letter-spacing:.04em;cursor:pointer;transition:all var(--ease)}
.attendance-confirm-selection:hover:not(:disabled),.attendance-session-action:hover:not(:disabled){transform:translateY(-1px);border-color:var(--ice-300);box-shadow:0 8px 24px rgba(35,150,255,.15)}
.attendance-confirm-selection:disabled,.attendance-session-action:disabled{cursor:default;opacity:.65}
.attendance-work-session{display:flex;flex-direction:column;align-items:center;gap:11px;margin-top:14px;padding:22px;border:1px solid rgba(88,198,255,.28);border-radius:16px;background:rgba(2,8,16,.46);text-align:center}
.attendance-name-picker .attendance-work-session{width:100%}
.attendance-session-date{font-size:11px;font-weight:800;letter-spacing:.11em;color:var(--text-muted)}
.attendance-session-names{font-size:14px;font-weight:900;color:var(--ice-100)}
.attendance-session-timer{font-size:clamp(34px,5vw,58px);font-weight:900;line-height:1;letter-spacing:.07em;color:var(--ice-200);font-variant-numeric:tabular-nums;text-shadow:0 0 30px rgba(88,198,255,.2)}
.attendance-session-caption{font-size:12px;color:var(--text-muted)}
.attendance-session-action{width:min(360px,100%);margin-top:5px}
.attendance-session-action.is-finish{border-color:rgba(255,120,120,.46);background:rgba(255,100,100,.12);color:#ffc2c2}
.attendance-session-action.is-done{border-color:rgba(80,220,160,.3);background:rgba(80,220,160,.08);color:#8ceec2}
.attendance-summary{margin-top:4px}
.attendance-clock-times{display:flex;gap:18px;flex-wrap:wrap;color:var(--ice-100);font-size:13px;font-weight:800;font-variant-numeric:tabular-nums}
.attendance-clock-actions{display:flex;gap:10px;flex-wrap:wrap}
.staff-check-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.staff-check{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:rgba(3,6,12,.42);color:var(--text-secondary);cursor:pointer;transition:all var(--ease)}
.package-customer-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(245px,1fr));gap:10px;margin-top:14px;max-height:370px;overflow:auto}
.package-customer-card{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:70px;padding:13px 15px;border:1px solid var(--border);border-radius:14px;background:rgba(3,6,12,.46);color:var(--text-secondary);text-align:left;cursor:pointer;transition:all var(--ease)}
.package-customer-card:hover,.package-customer-card.on{border-color:rgba(88,198,255,.58);background:rgba(88,198,255,.1);transform:translateY(-1px)}
.package-customer-card span{display:flex;flex-direction:column;gap:4px;min-width:0}
.package-customer-card b{overflow:hidden;color:var(--ice-100);font-size:13px;text-overflow:ellipsis;white-space:nowrap}
.package-customer-card small{overflow:hidden;color:var(--text-muted);font-size:11px;text-overflow:ellipsis;white-space:nowrap}
.package-customer-card strong{flex:0 0 auto;color:var(--ice-200);font-size:11px;white-space:nowrap}
.staff-check:hover{border-color:var(--border-strong);color:var(--ice-100)}
.staff-check:has(input:checked){border-color:rgba(88,198,255,.5);background:rgba(88,198,255,.1);color:var(--ice-100)}
.staff-check input{width:17px;height:17px;accent-color:#58c6ff;flex:0 0 auto}
.staff-check span{font-size:13px;font-weight:700}
.staff-check:has(input:disabled){cursor:default;opacity:.62;background:rgba(80,220,160,.07);border-color:rgba(80,220,160,.2)}
.clickable-row{cursor:pointer}
.clickable-row:focus-visible{outline:2px solid var(--ice-400);outline-offset:-2px}
.detail-overlay{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:24px;background:rgba(1,5,12,.82);backdrop-filter:blur(12px)}
.detail-modal{width:min(980px,100%);max-height:min(820px,calc(100vh - 48px));overflow:auto;padding:24px;border:1px solid var(--border-strong);border-radius:var(--r-lg);background:#081321;box-shadow:0 30px 90px rgba(0,0,0,.55)}
.package-detail-kpis{margin:18px 0}
.package-history{min-width:720px!important}

/* ── controls ── */
.field{display:flex;flex-direction:column;gap:7px}
#sportsTeamsPanel [hidden]{display:none!important}
.field label{font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted)}
input.ctl,select.ctl,textarea.ctl{
  background:rgba(3,6,12,.6);border:1px solid var(--border);color:var(--text-primary);
  font-family:var(--ff-body);font-size:13.5px;padding:11px 13px;border-radius:var(--r-md);
  outline:none;transition:border-color var(--ease),box-shadow var(--ease);width:100%}
input.ctl:focus,select.ctl:focus,textarea.ctl:focus{
  border-color:rgba(88,198,255,.5);box-shadow:0 0 0 4px rgba(88,198,255,.09)}
select.ctl option{background:#0a1220}
input.ctl.sm,select.ctl.sm{padding:7px 10px;font-size:12.5px;border-radius:9px}
input.ctl.num{max-width:130px;text-align:right;font-variant-numeric:tabular-nums}
.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.chip-btn{padding:8px 16px;border-radius:99px;border:1px solid var(--border);background:var(--glass);
  color:var(--text-secondary);font-family:var(--ff-body);font-size:12px;font-weight:700;cursor:pointer;
  transition:all var(--ease)}
.chip-btn:hover{color:var(--ice-200);border-color:var(--border-mid)}
.chip-btn.on{color:#03131f;border-color:transparent;
  background:linear-gradient(135deg,var(--ice-100),var(--ice-400))}
.btn-sm{padding:8px 16px;font-size:12px;border-radius:99px;border:none;cursor:pointer;
  font-family:var(--ff-body);font-weight:700;transition:all var(--ease)}
.btn-sm.primary{color:#03131f;background:linear-gradient(135deg,var(--ice-100),var(--ice-400))}
.btn-sm.primary:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(88,198,255,.35)}
.btn-sm.ghost{background:var(--glass);border:1px solid var(--border-mid);color:var(--text-secondary)}
.btn-sm.ghost:hover{color:var(--ice-200);border-color:var(--border-strong)}
.btn-sm.danger{background:rgba(255,110,110,.1);border:1px solid rgba(255,110,110,.3);color:#ffa3a3}
.btn-sm.danger:hover{background:rgba(255,110,110,.18);border-color:rgba(255,110,110,.52)}
.btn-sm:disabled{opacity:.45;cursor:not-allowed;transform:none}
.form-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:18px}
.row-actions{display:flex;align-items:center;gap:7px;white-space:nowrap}
.status-ok{color:#8ceec2!important;font-weight:700}
.status-low{color:#ffcf95!important;font-weight:800}

/* ── notices ── */
.notice{padding:14px 18px;border-radius:var(--r-md);font-size:13px;line-height:1.65;margin-bottom:18px}
.notice.warn{background:rgba(255,180,80,.09);border:1px solid rgba(255,180,80,.28);color:#ffcf95}
.notice.err {background:rgba(255,110,110,.1);border:1px solid rgba(255,110,110,.3);color:#ffa3a3}
.notice.ok  {background:rgba(80,220,160,.1);border:1px solid rgba(80,220,160,.28);color:#8ceec2}
.notice code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;
  background:rgba(0,0,0,.35);padding:2px 6px;border-radius:5px}

.saving{opacity:.5;pointer-events:none}

@media(max-width:1000px){
  .shell{grid-template-columns:1fr}
  .side{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;
    border-right:none;border-bottom:1px solid var(--border);padding:14px}
  .side-logo{padding:0 10px 0 4px}
  .side a.nav-item,.side button.nav-item{width:auto;padding:9px 12px}
  .side-foot{margin-top:0;padding-top:0;border-top:none;margin-left:auto}
  .side-user{padding:0 8px}
  .side-user .u-mail{display:none}
  .main{padding:24px 20px 50px}
  .kpis{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .kpis{grid-template-columns:1fr}
  .page-title{font-size:22px}
  .head-actions{width:100%;justify-content:flex-start}
}

/* Compact ERP layout for phones and tablets. */
@media(max-width:1000px){
  .side{position:sticky;top:0;z-index:80;overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch}
  .side::-webkit-scrollbar{display:none}
  .side-logo,.side-foot{flex:0 0 auto}
  .side a.nav-item,.side button.nav-item{flex:0 0 auto;white-space:nowrap}
  .page-head{align-items:flex-start;gap:14px;flex-wrap:wrap}
  .filters{overflow-x:auto;-webkit-overflow-scrolling:touch}
}
@media(max-width:640px){
  .gate{padding:16px}
  .gate-card{padding:30px 20px;border-radius:22px}
  .side{padding:10px 12px;gap:6px}
  .side-logo{min-width:max-content}
  .side-user{display:none}
  .main{padding:20px 14px 42px}
  .page-title{font-size:21px;line-height:1.2}
  .page-sub{font-size:12px}
  .head-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .head-actions .btn-sm{width:100%;justify-content:center}
  .panel{padding:18px 14px;border-radius:18px}
  .kpi{padding:20px}
  .kpi-val{font-size:28px}
  .form-grid,.form-grid.dev{grid-template-columns:1fr}
  .form-grid .field[style*="grid-column"]{grid-column:auto!important}
  .filters>*{flex:0 0 auto}
  .form-actions{align-items:stretch}
  .form-actions .btn,.form-actions .btn-sm{width:100%;justify-content:center}
  .staff-check-grid{grid-template-columns:1fr}
  table.tbl{font-size:12px}
  .tbl-wrap{margin-inline:-14px;border-radius:0;border-inline:0}
  .modal,.dialog{max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);overflow:auto}
  input,select,textarea{font-size:16px}
}


/* ══════════ PRINT (report view) ══════════ */
@media print{
  body{background:#fff}
  .side,.gate,.page-head .btn-sm,.filters,#refreshBtn{display:none !important}
  .shell{display:block}
  .main{padding:0}
  .view{display:none !important}
  .view.on{display:block !important}
  .panel,.kpi{background:#fff !important;border:1px solid #ccc !important;box-shadow:none !important;
    break-inside:avoid;page-break-inside:avoid}
  .page-title,.panel-title,.kpi-val,.t-strong,.rate-amt{color:#000 !important;
    -webkit-text-fill-color:#000 !important;background:none !important}
  .kpi-label,.kpi-note,.page-sub,table.tbl td{color:#333 !important}
  table.tbl th{background:#eee !important;color:#000 !important}
  .chart .bar{fill:#1a7fc4 !important}
  .chart text{fill:#333 !important}
}


/* ══════════ LEDGER FORMS ══════════ */
.form-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px 16px}
.form-grid.dev{grid-template-columns:repeat(8,minmax(0,1fr))}
.form-sub{font-size:9.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ice-400);margin:22px 0 12px;padding-top:16px;border-top:1px solid var(--border)}
.dev-chips{display:flex;gap:5px;flex-wrap:wrap}
.dev-chip{padding:3px 9px;border-radius:99px;font-size:10px;font-weight:700;
  background:rgba(88,198,255,.12);color:var(--ice-200);border:1px solid rgba(88,198,255,.24);white-space:nowrap}
.pay-chips{display:flex;gap:5px;flex-wrap:wrap}
.pay-chip{padding:3px 9px;border-radius:99px;font-size:10px;font-weight:700;white-space:nowrap;
  background:var(--glass);color:var(--text-secondary);border:1px solid var(--border)}
.pay-chip.golomt{background:rgba(88,198,255,.12);color:var(--ice-200);border-color:rgba(88,198,255,.24)}
.pay-chip.khan{background:rgba(80,220,160,.12);color:#8ceec2;border-color:rgba(80,220,160,.24)}
.pay-chip.cash{background:rgba(255,180,80,.12);color:#ffcf95;border-color:rgba(255,180,80,.24)}
.pay-chip.barter{background:rgba(160,120,255,.12);color:#c9b2ff;border-color:rgba(160,120,255,.24)}
.pay-chip.refund{background:rgba(255,110,110,.12);color:#ffa3a3;border-color:rgba(255,110,110,.26)}
tr.review td{background:rgba(255,180,80,.05)}
@media(max-width:1100px){
  .form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .form-grid.dev{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:560px){
  .form-grid,.form-grid.dev{grid-template-columns:1fr 1fr}
}


/* ══════════ FILE IMPORT ══════════ */
.dropzone{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  padding:38px 20px;border-radius:var(--r-xl);cursor:pointer;text-align:center;
  border:1.5px dashed var(--border-mid);background:rgba(3,6,12,.35);
  transition:border-color var(--ease),background var(--ease),transform var(--ease);
}
.dropzone:hover,.dropzone.over{border-color:rgba(88,198,255,.55);background:rgba(88,198,255,.06)}
.dropzone.over{transform:scale(1.01)}
.dz-ic{font-size:30px;color:var(--ice-400);line-height:1}
.dz-title{font-size:14.5px;font-weight:700;color:var(--ice-100)}
.dz-sub{font-size:11.5px;color:var(--text-muted)}

.map-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 16px}
.map-row{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:12px;
  border:1px solid var(--border);background:rgba(3,6,12,.3)}
.map-row.matched{border-color:rgba(88,198,255,.28);background:rgba(88,198,255,.05)}
.map-row label{flex:0 0 108px;font-size:11.5px;font-weight:700;color:var(--text-secondary)}
.map-row select{flex:1;min-width:0}
#impPreview{min-width:640px}
@media(max-width:1100px){.map-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.map-grid{grid-template-columns:1fr}.map-row label{flex:0 0 90px}}
@media(max-width:640px){
  .attendance-date-nav{display:grid;grid-template-columns:1fr 1fr}
  .attendance-date-field{grid-column:1/-1;grid-row:1;min-width:0}
  .attendance-date-nav .btn-sm{width:100%;justify-content:center}
  .attendance-clock-panel{padding:16px}
  .attendance-name-grid{grid-template-columns:1fr 1fr}
  .attendance-work-session{padding:18px 12px}
  .detail-overlay{padding:10px}
  .detail-modal{padding:16px;max-height:calc(100vh - 20px)}
}
/* Device schedule: readable on both the shared staff phone and desktop. */
.booking-device-tabs { display:flex; flex-wrap:wrap; gap:8px; margin:16px 0; }
.booking-slot-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:8px; }
.booking-slot { border:1px solid var(--border); border-radius:10px; padding:12px; background:transparent; color:inherit; text-align:left; cursor:pointer; }
.booking-slot strong,.booking-slot small { display:block; }
.booking-slot small { margin-top:5px; overflow-wrap:anywhere; }
.booking-slot:disabled { cursor:default; opacity:.65; background:rgba(128,128,128,.12); }
.booking-slot:not(:disabled):hover { border-color:currentColor; }

.record-note{white-space:pre-wrap!important;overflow-wrap:anywhere;min-width:180px;max-width:360px;line-height:1.5}

/* Staff daily sales is a read-only report. */
.staff-readonly-reports [data-panel="reports"] button { display:none !important; }

.booking-slot.selected { border:2px solid var(--accent, #169f90); background:#d9f5ee; color:#123d36; }

/* In-page handbook; native dialog contains keyboard focus and supports Escape. */
.guide-launcher { position:fixed; right:20px; bottom:calc(20px + env(safe-area-inset-bottom, 0px)); z-index:90; border:1px solid #c9dedb; border-radius:28px; padding:13px 20px; background:#143e37; color:white; font-family:inherit; font-size:14px; font-weight:600; cursor:pointer; box-shadow:0 4px 18px #0002; }
.guide-launcher:focus-visible { outline:3px solid #54b9a7; outline-offset:3px; }
.admin-guide { width:min(640px,calc(100vw - 32px)); max-height:calc(100dvh - 48px); padding:0; border:1px solid #d5e3df; border-radius:18px; background:#fff; color:#203b35; box-shadow:0 20px 80px #0003; }
.admin-guide::backdrop { background:rgb(12 27 24 / .45); }
.guide-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding:24px 24px 12px; }
.guide-head h2 { font-size:21px; margin:0 0 6px; }
.guide-head p { margin:0; font-size:13px; color:#62756e; }
.guide-head button { flex-shrink:0; }
.guide-search { padding:8px 24px 18px; }
.guide-search label { display:block; font-size:13px; margin-bottom:6px; }
.guide-content { padding:0 24px 24px; }
.guide-content details { border-top:1px solid #e1eae6; }
.guide-content details[hidden] { display:none; }
.guide-content summary { cursor:pointer; padding:16px 2px; font-size:15px; font-weight:600; line-height:1.5; }
.guide-content p { margin:0 0 18px; font-size:14px; line-height:1.85; color:#41574e; }
.guide-empty { padding:0 24px 24px; font-size:14px; }
@media(max-width:600px) { .guide-launcher { right:12px; bottom:calc(12px + env(safe-area-inset-bottom, 0px)); padding:11px 15px; } .guide-head { padding:18px 16px 10px; } .guide-head h2 { font-size:18px; } .guide-search,.guide-content { padding-left:16px; padding-right:16px; } }