/* ============================================================
   KutkiTech Pvt. Ltd. — Attendance Management System
   Design tokens: circuit-blue + growth-green (from the KutkiTech
   mark), Sora (display) / Inter (UI) / JetBrains Mono (data)
   ============================================================ */

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

:root{
  --canvas: #EEF2FA;
  --canvas-2: #E3E9F6;
  --surface: #FFFFFF;
  --surface-soft: #F6F8FD;
  
  --navy-900: #0C1633;
  --navy-800: #12204A;
  --navy-700: #182C5E;
  --navy-600: #22397A;
  --navy-500: #2E4A93;

  /* Heading/emphasis text color
  --heading: var(--navy-900);

  /* Green accent — from the K/T lettering in the mark */
  --brass: #5FA82E;
  --brass-light: #8CC63F;
  --brass-soft: #DCF0C4;
  --brass-tint: #EFF9E4;

  --ink: #101526;
  --ink-soft: #29304A;
  --muted: #666F8C;
  --muted-2: #99A1BC;
  --line: #DCE2F0;
  --line-soft: #E9EDF7;

  --success: #2F8F5B;
  --success-tint: #E4F4EB;
  --danger: #C0463A;
  --danger-tint: #FBEAE8;
  --danger-tint-hover: #F5D9D5;
  --danger-strong: #9A372D;
  --danger-border: #F2C7C0;
  --late: #C2841F;
  --late-tint: #FBF1DF;
  --info: #2C6FA8;
  --info-tint: #E6F0F8;
  --violet: #6B4FA0;
  --violet-tint: #EEE7F8;

  --scrollbar-thumb: #C3CBE2;
  --scrollbar-thumb-hover: #A9B3D1;

  --display: 'Sora', 'Inter', sans-serif;
  --body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: 'JetBrains Mono', monospace;

  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --shadow-sm: 0 1px 2px rgba(12,22,51,.06), 0 1px 1px rgba(12,22,51,.04);
  --shadow: 0 8px 24px -8px rgba(12,22,51,.16), 0 2px 6px rgba(12,22,51,.06);
  --shadow-lg: 0 24px 60px -20px rgba(12,22,51,.35);
}

/* ============================================================
   DARK THEME
   ============================================================ */
[data-theme="dark"]{
  color-scheme: dark;
  --canvas: #0A1120;
  --canvas-2: #0F1830;
  --surface: #141D33;
  --surface-soft: #1A2440;

  --heading: #F3F5FB;
  --ink: #E7EBF6;
  --ink-soft: #C7CEE3;
  --muted: #8A93B3;
  --muted-2: #6C7599;
  --line: #2B3555;
  --line-soft: #212B48;

  --success: #4ADE94;
  --success-tint: rgba(74,222,148,.14);
  --danger: #FF7A6E;
  --danger-tint: rgba(255,122,110,.14);
  --danger-tint-hover: rgba(255,122,110,.24);
  --danger-strong: #FFB3AB;
  --danger-border: rgba(255,122,110,.35);
  --late: #F2BB4E;
  --late-tint: rgba(242,187,78,.14);
  --info: #6DB2F0;
  --info-tint: rgba(109,178,240,.14);
  --violet: #B79CE8;
  --violet-tint: rgba(183,156,232,.16);
  --brass-soft: rgba(140,198,63,.22);
  --brass-tint: rgba(140,198,63,.14);

  --scrollbar-thumb: #35406A;
  --scrollbar-thumb-hover: #47548A;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.35), 0 1px 1px rgba(0,0,0,.25);
  --shadow: 0 8px 24px -8px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.3);
  --shadow-lg: 0 24px 60px -20px rgba(0,0,0,.7);
}
/* Cards read as flat panels once shadows go this subtle against a dark
   canvas — a hairline border keeps their edges legible the way the
   shadow alone did in light mode. */
[data-theme="dark"] .card{ border-color: var(--line); }

*,*::before,*::after{ box-sizing: border-box; }
html,body{ height:100%; overflow-x:hidden; }
body{
  margin:0;
  font-family: var(--body);
  background: var(--canvas);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01" 1;
  transition: background-color .2s ease, color .2s ease;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }
::selection{ background: var(--brass-soft); color: var(--heading); }

:focus-visible{
  outline: 2px solid var(--brass);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

h1,h2,h3,h4{ font-family: var(--display); margin:0; color: var(--heading); letter-spacing: -.01em; font-weight:700; }
.mono{ font-family: var(--mono); }

.hidden{ display:none !important; }

/* ---------------- Scrollbar ---------------- */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background: transparent; }
::-webkit-scrollbar-thumb{ background: var(--scrollbar-thumb); border-radius: 10px; border:2px solid var(--canvas); }
::-webkit-scrollbar-thumb:hover{ background: var(--scrollbar-thumb-hover); }

/* ============================================================
   AUTH / LOGIN SCREEN
   ============================================================ */
.auth-shell{
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background: var(--navy-900);
  padding:24px;
}
.auth-screen{
  width:100%;
  max-width:1040px;
  min-height:560px;
  display:grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  background: var(--navy-900);
  border-radius:20px;
  overflow:hidden;
  box-shadow: 0 30px 80px rgba(4,8,24,.55);
}
.app-footer.app-footer-auth{
  max-width:420px; width:100%; margin:16px auto 0; padding:12px 4px;
  border-top:none; background:transparent; justify-content:center; gap:18px;
  color: rgba(255,255,255,.55); text-align:center; font-size:13px;
}
.app-footer.app-footer-auth .powered-by strong{ color: rgba(255,255,255,.85); }
@media (max-width: 920px){
  .auth-shell{ padding:0; min-height:auto; }
  html, body{ overflow-x:hidden; }
  .auth-screen{ grid-template-columns: minmax(0, 1fr); border-radius:0; box-shadow:none; overflow:visible; min-height:100vh; min-height:100svh; }
  .auth-main{ padding:32px 20px 40px; }
  .auth-aside{ display:none !important; }
  .app-footer.app-footer-auth{ max-width:none; margin-top:0; padding:14px 16px 20px; font-size:11.5px; gap:12px; }
}

.auth-aside{
  position:relative;
  background:
    radial-gradient(900px 500px at 15% -10%, rgba(140,198,63,.16), transparent 60%),
    radial-gradient(700px 500px at 100% 110%, rgba(46,74,147,.55), transparent 60%),
    linear-gradient(165deg, var(--navy-900) 0%, var(--navy-800) 55%, var(--navy-700) 100%);
  color:#fff;
  padding: 36px 44px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  overflow:hidden;
}
.auth-aside::after{
  content:"";
  position:absolute; inset:0;
  background-image: repeating-linear-gradient(115deg, rgba(255,255,255,.025) 0px, rgba(255,255,255,.025) 1px, transparent 1px, transparent 64px);
  pointer-events:none;
}
.seal{
  width:52px; height:52px; border-radius:15px;
  background: #fff;
  display:flex; align-items:center; justify-content:center;
  position:relative;
  flex-shrink:0;
  padding:7px;
  box-shadow: var(--shadow-sm);
}
.seal img{ width:100%; height:100%; object-fit:contain; }
.brand-row{ display:flex; align-items:center; gap:16px; position:relative; z-index:1;}
.brand-name{ font-family: var(--display); font-size:18px; font-weight:700; letter-spacing:.01em; }
.brand-sub{ font-size:12px; color: var(--brass-light); text-transform:uppercase; letter-spacing:.14em; margin-top:2px; }

.aside-hero{ position:relative; z-index:1; max-width:480px; }
.aside-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; text-transform:uppercase; letter-spacing:.16em;
  color: var(--brass-light); margin-bottom:16px;
}
.aside-eyebrow::before{ content:""; width:22px; height:1px; background: var(--brass-light); }
.aside-hero h1{
  color:#fff; font-size: clamp(22px,2.1vw,28px); line-height:1.18; font-weight:700; margin-bottom:14px;
}
.aside-hero p{ color: rgba(255,255,255,.62); font-size:14px; line-height:1.55; }

.aside-stats{ display:flex; gap:32px; position:relative; z-index:1; margin-top:24px; }
.aside-stat .num{ font-family: var(--display); font-size:28px; color:#fff; font-weight:700; }
.aside-stat .lbl{ font-size:11.5px; color: rgba(255,255,255,.5); text-transform:uppercase; letter-spacing:.1em; margin-top:4px; }

.auth-main{
  background: var(--canvas);
  display:flex; align-items:center; justify-content:center;
  padding: 36px 36px;
}
.auth-card{ width:100%; max-width:400px; }
.auth-card-mobile-brand{ display:none; }
@media (max-width:920px){
  .auth-card-mobile-brand{ display:flex; align-items:center; gap:12px; margin-bottom:34px; }
  .auth-card-mobile-brand .seal{ width:46px; height:46px; flex-shrink:0; }
  .auth-card-mobile-brand > div:not(.seal){ min-width:0; flex:1 1 auto; }
  .auth-card-mobile-brand .brand-name{ color: var(--heading); white-space:normal; overflow:visible; text-overflow:clip; line-height:1.2; word-break:break-word; }
  .auth-card-mobile-brand .brand-sub{ color: var(--brass); white-space:normal; overflow:visible; text-overflow:clip; word-break:break-word; }
  .auth-card-mobile-brand .btn,
  .auth-card-mobile-brand .icon-btn-soft{ flex-shrink:0; }
}
@media (max-width:480px){
  .auth-card-mobile-brand .js-install-app-btn{ padding-left:9px; padding-right:9px; }
  .auth-card-mobile-brand .js-install-app-btn .btn-label{ display:none; }
  .auth-card-mobile-brand .js-install-app-btn svg{ margin-right:0 !important; }
  .auth-card-mobile-brand .brand-name{ font-size:15.5px; }
  .auth-card-mobile-brand .brand-sub{ font-size:10px; letter-spacing:.09em; }
}
@media (max-width:360px){
  .auth-main{ padding-left:14px; padding-right:14px; }
  .auth-card-panel{ padding-left:24px; padding-right:24px; }
  .field-icon > svg{ left:12px; }
  .field-icon input{ padding-left:38px !important; }
  .field-icon input[type="password"], .field-icon input[type="text"].pw-field{ padding-right:36px !important; }
  .field-icon .pw-toggle{ right:6px; }
}

.role-toggle{
  display:flex; background: var(--surface); border:1px solid var(--line);
  border-radius: 999px; padding:4px; margin-bottom:30px; gap:4px;
}
.role-toggle button{
  flex:1; border:none; background:transparent; padding:10px 14px;
  font-size:13.5px; font-weight:600; color: var(--muted); border-radius:999px; cursor:pointer;
  transition: all .18s ease;
}
.role-toggle button.active{ background: var(--navy-900); color:#fff; }

.auth-card h2{ font-size:24px; margin-bottom:6px; }
.auth-card .sub{ color: var(--muted); font-size:13.5px; margin-bottom:26px; }
.auth-card-panel{
  background: var(--surface);
  border-radius: 22px;
  padding: 34px 34px;
  border: 1px solid var(--line-soft);
  box-shadow:
    0 1px 2px rgba(20,30,60,.05),
    0 10px 20px -8px rgba(20,30,60,.10),
    0 30px 60px -24px rgba(20,30,60,.20),
    inset 0 1px 0 rgba(255,255,255,.55);
  position: relative;
  transform: perspective(1200px) rotateX(0deg) translateZ(0);
  transition: transform .35s cubic-bezier(.2,.8,.3,1), box-shadow .35s ease;
}
[data-theme="dark"] .auth-card-panel{
  box-shadow:
    0 1px 2px rgba(0,0,0,.2),
    0 10px 20px -8px rgba(0,0,0,.35),
    0 30px 60px -24px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.08);
}
.auth-card-panel:hover{
  transform: perspective(1200px) rotateX(1.5deg) translateY(-3px) translateZ(0);
  box-shadow:
    0 2px 4px rgba(20,30,60,.06),
    0 18px 32px -10px rgba(20,30,60,.14),
    0 45px 90px -30px rgba(20,30,60,.26),
    inset 0 1px 0 rgba(255,255,255,.55);
}
[data-theme="dark"] .auth-card-panel:hover{
  box-shadow:
    0 2px 4px rgba(0,0,0,.25),
    0 18px 32px -10px rgba(0,0,0,.4),
    0 45px 90px -30px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.08);
}
@media (prefers-reduced-motion: reduce){ .auth-card-panel, .auth-card-panel:hover{ transform:none; } }
.auth-icon-badge{
  width:52px; height:52px; border-radius:16px; display:flex; align-items:center; justify-content:center;
  background: linear-gradient(145deg, var(--navy-800), var(--navy-900));
  box-shadow: 0 8px 16px -6px rgba(20,30,80,.35), inset 0 1px 0 rgba(255,255,255,.15);
  margin-bottom:18px;
}
.auth-icon-badge.gold{ background: linear-gradient(145deg, #C79A4B, var(--brass)); box-shadow: 0 8px 16px -6px rgba(150,110,30,.35), inset 0 1px 0 rgba(255,255,255,.25); }
.auth-icon-badge svg{ width:26px; height:26px; stroke:#fff; }
.field-icon{ position:relative; }

.field{ margin-bottom:18px; min-width:0; }
.filter-row{ display:flex; flex-wrap:wrap; align-items:flex-end; }
.filter-row .field{ margin-bottom:0; }
.field label{ display:block; font-size:12.5px; font-weight:600; color: var(--ink-soft); margin-bottom:7px; letter-spacing:.01em; min-height:16px; }
.field input, .field select, .input, select.input{
  width:100%; padding:12.5px 14px; border-radius: var(--radius-sm);
  border:1.5px solid var(--line); background: var(--surface);
  font-size:14.5px; color: var(--ink); font-family:inherit; cursor:auto;
  transition: border-color .15s, box-shadow .15s; box-sizing:border-box;
  text-overflow: ellipsis;
}
.field-compact{ max-width:220px; }
@media (max-width:640px){ .field-compact{ max-width:none; } }
@media (max-width:640px){ .field-narrow{ max-width:none !important; } }
/* A date input enhanced with the AD+BS widget (see nepaliDatePicker.js) needs
   ~380-420px for its two flex-shrink:0 input groups. Several .field
   containers around the app cap width via an inline max-width sized for a
   plain <input type="date"> (e.g. "Recalculate past records", the pending
   biometric-punch review modal) — once enhanced, that fixed cap makes the
   widget overflow the box and visually overlap whatever sits next to it.
   Lift the cap unconditionally wherever the widget actually landed, the same
   way the mobile breakpoint above already does for .field-narrow. */
.field:has(.bs-date-wrap){ max-width:none !important; }

.field select, select.input{ cursor:pointer; }
.field input:focus, .field select:focus, .input:focus{ outline:none; border-color: var(--navy-600); box-shadow: 0 0 0 4px rgba(46,74,147,.1); }

.field-icon > svg{
  position:absolute; left:15px; top:50%; transform:translateY(-50%);
  width:17px; height:17px; stroke: var(--muted-2); pointer-events:none; z-index:1;
}
.field-icon input{ padding-left:46px !important; }
.field-icon .pw-toggle{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  width:30px; height:30px; display:flex; align-items:center; justify-content:center;
  border:none; background:transparent; cursor:pointer; border-radius:8px; color: var(--muted-2);
  transition: background .15s, color .15s;
}
.field-icon .pw-toggle:hover{ background: var(--surface-soft); color: var(--ink); }
.field-icon .pw-toggle svg{ width:17px; height:17px; }
.field-icon input[type="password"], .field-icon input[type="text"].pw-field{ padding-right:42px !important; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:none; border-radius: var(--radius-sm); cursor:pointer;
  font-weight:700; font-size:14px; padding:12.5px 20px;
  transition: transform .12s ease, box-shadow .15s ease, background .15s ease, opacity .15s;
}
.btn:active{ transform: translateY(1px); }
.btn-primary{ background: var(--navy-900); color:#fff; }
.btn-primary:hover{ background: var(--navy-700); }
.btn-block{ width:100%; }
.btn-gold{ background: linear-gradient(135deg, var(--brass-light), var(--brass)); color:#fff; }
.btn-gold:hover{ background: var(--brass); }
.btn-ghost{ background: transparent; color: var(--ink-soft); border:1.5px solid var(--line); }
.btn-ghost:hover{ background: var(--surface-soft); }
.btn-ghost-invert{ background: rgba(255,255,255,.1); color:#fff; border:1.5px solid rgba(255,255,255,.28); }
.btn-ghost-invert:hover{ background: rgba(255,255,255,.18); }
.btn-danger-ghost{ background: var(--danger-tint); color: var(--danger); }
.btn-danger-ghost:hover{ background: var(--danger-tint-hover); }
.btn-sm{ padding:8px 14px; font-size:12.5px; border-radius:8px; }
.btn:disabled{ opacity:.55; cursor:not-allowed; }
.btn-spinner{
  display:inline-block; width:12px; height:12px; margin-right:7px; vertical-align:-1.5px;
  border:2px solid currentColor; border-right-color:transparent; border-radius:50%;
  animation: btn-spin .6s linear infinite; opacity:.85;
}
@keyframes btn-spin{ to{ transform:rotate(360deg); } }
.btn-icon{ padding:8px 10px; display:inline-flex; align-items:center; justify-content:center; line-height:1; flex-shrink:0; }
.btn-icon svg{ width:15px; height:15px; }
.btn-icon.spinning svg{ animation: btn-spin 0.7s linear infinite; }

.auth-error{
  background: var(--danger-tint); color: var(--danger-strong); border:1px solid var(--danger-border);
  padding:11px 14px; border-radius:10px; font-size:13px; margin-bottom:18px; display:none;
}
.auth-error.show{ display:block; animation: auth-error-in .18s ease; }
@keyframes auth-error-in{
  from{ opacity:0; transform:translateY(-4px); }
  to{ opacity:1; transform:translateY(0); }
}

.auth-foot{ margin-top:24px; font-size:12.5px; color: var(--muted-2); text-align:center; }
.demo-box{
  margin-top:26px; padding:14px 16px; border-radius:12px; background: var(--surface);
  border:1px dashed var(--line); font-size:12px; color: var(--muted); line-height:1.7;
}
.demo-box b{ color: var(--ink-soft); }

/* ============================================================
   APP SHELL (Dashboards)
   ============================================================ */
.app-shell{ display:grid; grid-template-columns: 260px minmax(0, 1fr); min-height:100vh; }
@media (max-width: 980px){
  .app-shell{ grid-template-columns: minmax(0, 1fr); }
  .sidebar{ position:fixed; z-index:50; left:0; top:0; bottom:0; transform: translateX(-100%); transition: transform .25s ease; }
  .sidebar.open{ transform: translateX(0); }
  .sidebar-scrim{ position:fixed; inset:0; background:rgba(12,22,51,.5); z-index:49; display:none; }
  .sidebar-scrim.show{ display:block; }
  html.sidebar-collapsed .app-shell{ grid-template-columns: minmax(0, 1fr); }
}

/* ---- Desktop sidebar: pinned to the viewport*/
@media (min-width: 981px){
  .sidebar{ position:sticky; top:0; height:100vh; align-self:start; }
}

/* ---- Collapsible desktop rail ---- */
@media (min-width: 981px){
  html.sidebar-collapsed .app-shell{ grid-template-columns: 76px minmax(0, 1fr); }
  html.sidebar-collapsed .sidebar{ padding-left:14px; padding-right:14px; }
  html.sidebar-collapsed .sidebar-brand{ flex-direction:column; gap:10px; padding:6px 0 20px; }
  html.sidebar-collapsed .sidebar-brand .brand-text{ display:none; }
  html.sidebar-collapsed .sidebar-collapse-btn{ margin-left:0; }
  html.sidebar-collapsed .nav-section-label{ display:none; }
  html.sidebar-collapsed .nav-item{ justify-content:center; padding:11px 0; }
  html.sidebar-collapsed .nav-item .nav-label{ display:none; }
  html.sidebar-collapsed .nav-badge{
    position:absolute; top:6px; right:10px; width:8px; height:8px; min-width:0;
    padding:0; border-radius:50%; font-size:0; line-height:0; overflow:hidden;
  }
  html.sidebar-collapsed .sidebar-footer-top{ justify-content:center; }
  html.sidebar-collapsed .sidebar-footer-top .who{ display:none; }
  html.sidebar-collapsed .sidebar-footer-actions{ flex-direction:column; justify-content:center; }
}

.sidebar{
  background: linear-gradient(190deg, var(--navy-900), var(--navy-800) 70%);
  color:#fff; padding: 26px 18px; display:flex; flex-direction:column; gap:6px;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
.sidebar-brand{ display:flex; align-items:center; gap:12px; padding: 6px 8px 26px; }
.sidebar-brand .seal{ width:42px; height:42px; border-radius:11px; padding:6px; flex-shrink:0; }
.sidebar-brand .brand-text{ min-width:0; overflow:hidden; }
.sidebar-brand .brand-name{ font-size:15px; }
.sidebar-brand .brand-sub{ font-size:9.5px; }
.sidebar-collapse-btn{
  margin-left:auto; flex-shrink:0; width:26px; height:26px; border-radius:8px;
  background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.7);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition: background .15s, color .15s, transform .2s ease;
}
.sidebar-collapse-btn:hover{ background: rgba(255,255,255,.14); color:#fff; }
.sidebar-collapse-btn svg{ width:13px; height:13px; display:block; }
html.sidebar-collapsed .sidebar-collapse-btn{ transform: rotate(180deg); }
@media (max-width:980px){ .sidebar-collapse-btn{ display:none; } }

.nav-section-label{ font-size:10.5px; text-transform:uppercase; letter-spacing:.13em; color: rgba(255,255,255,.35); padding:14px 12px 8px; white-space:nowrap; }
.nav-item{
  position:relative;
  display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:10px;
  color: rgba(255,255,255,.68); font-size:13.8px; font-weight:500; cursor:pointer;
  transition: background .15s, color .15s;
}
.nav-item svg{ width:18px; height:18px; opacity:.85; flex-shrink:0; }
.nav-item .nav-label{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nav-item:hover{ background: rgba(255,255,255,.06); color:#fff; }
.nav-item.active{ background: rgba(140,198,63,.16); color: var(--brass-light); }
.nav-item.active svg{ opacity:1; }
.nav-badge{
  margin-left:auto; background: var(--brass); color:#fff; font-size:10.5px; font-weight:700;
  padding:1.5px 7px; border-radius:999px; flex-shrink:0;
}

.sidebar-footer{
  margin-top:auto; padding-top:16px; border-top:1px solid rgba(255,255,255,.09);
  display:flex; flex-direction:column; gap:14px;
}
.sidebar-footer-top{ display:flex; align-items:flex-start; gap:11px; }
.avatar{
  width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family: var(--display); font-weight:700; font-size:14px; color:#fff; flex-shrink:0;
}
.sidebar-footer .who{ flex:1; min-width:0; padding-top:1px; }
.sidebar-footer .who .name{ font-size:13px; font-weight:600; color:#fff; line-height:1.35; overflow-wrap:break-word; }
.sidebar-footer .who .role{ font-size:11px; color: rgba(255,255,255,.45); line-height:1.4; margin-top:2px; overflow-wrap:break-word; }
.sidebar-footer-actions{ display:flex; align-items:center; justify-content:flex-end; gap:12px; }
.icon-btn{
  width:34px; height:34px; border-radius:9px; border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04); color: rgba(255,255,255,.7); display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition: background .15s, color .15s; flex-shrink:0;
}
.icon-btn:hover{ background: rgba(255,255,255,.1); color:#fff; }
.icon-btn svg{ width:16px; height:16px; }

/* Theme-adaptive counterpart to .icon-btn, for use on light/canvas-colored
   surfaces */
.icon-btn-soft{
  width:34px; height:34px; border-radius:9px; border:1.5px solid var(--line);
  background: var(--surface); color: var(--ink-soft); display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition: background .15s, color .15s, border-color .15s; flex-shrink:0;
}
.icon-btn-soft:hover{ background: var(--surface-soft); color: var(--heading); }
.icon-btn-soft svg{ width:16px; height:16px; }
.js-theme-toggle-btn .theme-ic-dark{ display:block; }
.js-theme-toggle-btn .theme-ic-light{ display:none; }
[data-theme="dark"] .js-theme-toggle-btn .theme-ic-dark{ display:none; }
[data-theme="dark"] .js-theme-toggle-btn .theme-ic-light{ display:block; }

.main{ min-width:0; display:flex; flex-direction:column; }
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding: 20px 32px; background: var(--surface); border-bottom:1px solid var(--line-soft);
  position:sticky; top:0; z-index:20;
}
.topbar h1{ font-size:21px; }
.topbar .meta{ font-size:12.5px; color: var(--muted); margin-top:3px; }
.topbar-actions{ flex-wrap:wrap; }
.menu-btn{ display:none; }
@media (max-width:980px){ .menu-btn{ display:flex; } }

.content{ padding: 28px 32px 60px; flex:1; }

.app-footer{
  padding: 16px 32px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.app-footer .powered-by{ opacity: 0.85; }
.status-pill{
  display:inline-flex; align-items:center; gap:6px;
  padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 600;
  background: var(--surface-soft); color: var(--muted); border: 1px solid var(--line);
}
.status-pill .dot{ width:7px; height:7px; border-radius:50%; background: var(--muted); flex-shrink:0; }
.status-pill.ok{ background: var(--success-tint); color: var(--success); border-color: transparent; }
.status-pill.ok .dot{ background: var(--success); }
.status-pill.warn{ background: var(--late-tint); color: var(--late); border-color: transparent; }
.status-pill.warn .dot{ background: var(--late); }
.chip-banner{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:9px 14px; border-radius: var(--radius-sm);
  background: var(--brass-tint); border:1px solid var(--brass-soft);
  font-size:12.5px; color: var(--ink-soft);
}
.chip-banner strong{ color: var(--ink); font-weight:700; }
.chip-banner.hidden{ display:none; }
/* Signed-in devices list (My Account / My Profile) — one row per active
   session, icon + label/meta + a "Log out" button*/
.session-row{
  display:flex; align-items:center; gap:12px; padding:12px 4px;
  border-bottom:1px solid var(--line-soft);
}
.session-row:last-child{ border-bottom:none; }
.session-icon{
  width:38px; height:38px; border-radius:10px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background: var(--surface-soft); color: var(--muted);
}
.session-info{ flex:1; min-width:0; }
.session-label{ font-weight:600; font-size:13.5px; color: var(--ink); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.session-meta{ font-size:12px; color: var(--muted); margin-top:2px; }
.status-pill.err{ background: var(--danger-tint); color: var(--danger); border-color: transparent; }
.status-pill.err .dot{ background: var(--danger); }
@media (max-width:640px){
  .content{ padding: 20px 16px 50px; } .topbar{ padding:14px 16px; }
  .search-input{ min-width:0; width:100%; }
  .topbar-actions{ width:100%; justify-content:stretch; gap:10px; }
  .topbar-actions .status-pill{ flex:1 1 auto; justify-content:center; order:2; }
  .topbar-actions .btn{ flex:1 1 auto; order:1; }
  .status-pill{ font-size:12.5px; padding:9px 12px; }
  .status-pill #device-status-pill-text{
    max-width: 200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:inline-block; vertical-align:middle;
  }
  .topbar h1{ font-size:18px; }
  .topbar .meta{ font-size:11.5px; }
  .card-pad{ padding:18px; }
  .section-head{ margin-bottom:14px; }
  .section-head h3{ font-size:15px; }
  .btn-sm{ font-size:12.5px; padding:9px 14px; }
  .badge{ font-size:11px; padding:4px 9px; }
  th.sortable{ font-size:10px; }

  .app-footer{ padding:14px 16px 20px; font-size:11.5px; flex-direction:column; align-items:center; text-align:center; gap:6px; }
}

/* ---------------- Cards / grids ---------------- */
.card{ background: var(--surface); border:1px solid var(--line-soft); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.card-pad{ padding:24px; }
.grid{ display:grid; gap:20px; }
.grid-stats{ grid-template-columns: repeat(5, 1fr); }
.grid-2{ grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.grid-3{ grid-template-columns: repeat(3,1fr); }
@media (max-width:1180px){
  .grid-stats{ grid-template-columns: repeat(3,1fr);}
  .grid-2{ grid-template-columns:1fr; }
  .grid-3{ grid-template-columns:repeat(2,1fr);}
  .grid-2 > *{ min-width:0; }
  .dial-card{ min-width:0; order:2; }
}
@media (max-width:480px){
  .dial{ width:150px; height:150px; }
  .dial-inner{ width:120px; height:120px; }
  .dial-inner .time{ font-size:21px; }
  .dial-card{ padding:20px; }
}
@media (max-width:560px){ .grid-stats{ grid-template-columns: 1fr; } .grid-3{ grid-template-columns:1fr; } }

.stat-card{ padding:22px; position:relative; overflow:hidden; }
.stat-card .ic{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.stat-card .num{ font-family: var(--display); font-size:30px; font-weight:700; color: var(--heading); line-height:1; }
.stat-card .lbl{ font-size:12.5px; color: var(--muted); margin-top:7px; }
.stat-card .delta{ font-size:11.5px; font-weight:600; margin-top:10px; display:inline-flex; align-items:center; gap:4px; }

@media (max-height:820px){
  .content{ padding-top:18px; padding-bottom:24px; }
  .grid{ gap:14px; }
  .stat-card{ padding:15px; }
  .stat-card .ic{ width:32px; height:32px; margin-bottom:10px; }
  .stat-card .num{ font-size:23px; }
  .stat-card .lbl{ margin-top:4px; }
  .dial-card{ padding:20px; }
  .dial-wrap{ gap:10px; padding:10px 0 2px; }
  .dial{ width:150px; height:150px; }
  .dial-inner{ width:120px; height:120px; }
  .dial-inner .time{ font-size:21px; }
  .card-pad{ padding:18px; }
}

.section-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; gap:12px; flex-wrap:wrap; }
.section-head h3{ font-size:16.5px; }
.section-head .sub{ font-size:12.5px; color: var(--muted); margin-top:3px; }

/* ---------------- Collapsible cards ---------------- */
.card.collapsible > .section-head{ cursor:pointer; user-select:none; margin-bottom:0; padding-bottom:18px; }
.card.collapsible > .card-body{ margin-top:18px; }
.card.collapsible.collapsed > .section-head{ padding-bottom:0; }
.card.collapsible.collapsed > .card-body{ display:none; }
.card-collapse-toggle{
  display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; flex-shrink:0;
  border-radius:8px; color: var(--muted); transition: transform .15s ease, background .15s ease;
}
.card.collapsible:not(.collapsed) .card-collapse-toggle{ transform: rotate(180deg); }
.card.collapsible > .section-head:hover .card-collapse-toggle{ background: var(--surface-soft); color: var(--heading); }

th.sortable{ cursor:pointer; user-select:none; white-space:nowrap; }
th.sortable:hover{ color: var(--ink); }
th.sortable .sort-ind{ font-size:9px; margin-left:4px; opacity:.7; }

/* ---------------- Badges ---------------- */
.badge{ display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:999px; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.badge::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.badge-present{ background: var(--success-tint); color: var(--success); }
.badge-late{ background: var(--late-tint); color: var(--late); }
.badge-absent{ background: var(--danger-tint); color: var(--danger); }
.badge-pending{ background: var(--info-tint); color: var(--info); }
.badge-approved{ background: var(--success-tint); color: var(--success); }
.badge-rejected{ background: var(--danger-tint); color: var(--danger); }
.badge-onleave{ background: var(--violet-tint); color: var(--violet); }
.badge-office{ background: var(--info-tint); color: var(--info); }
.badge-remote{ background: var(--brass-tint); color: var(--brass); }
.badge-neutral{ background: var(--surface-soft); color: var(--muted); }
.badge-neutral:has(input[type="radio"])::before,
.badge-neutral:has(input[type="checkbox"])::before{ display:none; }
.badge-neutral:has(input[type="radio"]:checked),
.badge-neutral:has(input[type="checkbox"]:checked){ background: var(--brass-tint); color: var(--brass); }
.badge-biometric{ background: var(--success-tint); color: var(--success); }

/* ---------------- Tables ---------------- */
.table-wrap{ overflow-x:auto; }
table{ width:100%; border-collapse: collapse; font-size:13.5px; }
thead th{
  text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.08em; color: var(--muted-2);
  padding:0 16px 14px; font-weight:700; white-space:nowrap;
}
tbody tr{ border-top:1px solid var(--line-soft); }
tbody td{ padding:15px 16px; vertical-align:middle; white-space:nowrap; }
tbody tr:hover{ background: var(--surface-soft); }
.row-person{ display:flex; align-items:center; gap:11px; }
.row-person .avatar{ width:32px; height:32px; font-size:11.5px; }
.row-person .nm{ font-weight:600; font-size:13.5px; color: var(--ink); }
.row-person .sub{ font-size:11.5px; color: var(--muted); }

/* ---------------- Pagination ---------------- */
.pagination{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;
  padding:16px 16px 4px; border-top:1px solid var(--line-soft); margin-top:4px;
}
.pagination-summary{ font-size:12.5px; color: var(--muted); white-space:nowrap; }
.pagination-controls{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.pagination-controls .btn{ min-width:34px; padding:7px 12px; }
.pagination-controls .btn:disabled{ opacity:.4; cursor:not-allowed; }
.pagination-ellipsis{ color: var(--muted-2); padding:0 4px; font-size:13px; user-select:none; }
@media (max-width:640px){
  .pagination{ flex-direction:column; align-items:flex-start; }
}

/* ---------------- Buttons / chips for filters ---------------- */
.chip-row{ display:flex; gap:8px; flex-wrap:wrap; }
.chip{
  padding:8px 14px; border-radius:999px; font-size:12.5px; font-weight:600; cursor:pointer;
  border:1.5px solid var(--line); background: var(--surface); color: var(--ink-soft); transition: all .15s;
}
.chip.active{ background: var(--navy-900); border-color: var(--navy-900); color:#fff; }
.select, select{
  border:1.5px solid var(--line); border-radius:9px; padding:9px 12px; font-size:13px; background: var(--surface);
  color: var(--ink-soft); font-family:inherit; cursor:pointer;
}
.search-input{
  border:1.5px solid var(--line); border-radius:9px; padding:9px 14px 9px 38px; font-size:13px;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%23666F8C' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") no-repeat 13px center;
  min-width:220px; color: var(--ink); font-family:inherit;
}
[data-theme="dark"] .search-input{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%238A93B3' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
}

/* ---------------- Shift pill ---------------- */
.shift-pill{
  display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:999px;
  font-size:11.5px; font-weight:600; background: var(--info-tint); color: var(--info); white-space:nowrap;
}

/* ---------------- IP / location meta (admin views) ---------------- */
.meta-stack{ display:flex; flex-direction:column; gap:2px; }
.meta-stack .ip{ font-family: var(--mono); font-size:11.5px; color: var(--ink-soft); }
.meta-stack .loc{ font-size:11px; color: var(--muted); }
.meta-stack .loc a{ color: var(--info); text-decoration:underline; text-underline-offset:2px; }

/* ============================================================
   SIGNATURE ELEMENT — Attendance Dial
   ============================================================ */
.dial-card{
  background: radial-gradient(420px 240px at 20% -10%, rgba(140,198,63,.18), transparent 60%), linear-gradient(175deg, var(--navy-900), var(--navy-800));
  border-radius: var(--radius-lg); padding:30px; color:#fff; position:relative; overflow:hidden;
  min-width: 270px;
}
.dial-card::after{
  content:""; position:absolute; inset:0;
  background-image: repeating-linear-gradient(115deg, rgba(255,255,255,.02) 0px, rgba(255,255,255,.02) 1px, transparent 1px, transparent 56px);
}
.dial-top{ display:flex; justify-content:space-between; align-items:flex-start; position:relative; z-index:1; }
.dial-clock{ font-family: var(--mono); font-size:13px; color: rgba(255,255,255,.55); }
.dial-date{ font-size:12.5px; color: rgba(255,255,255,.4); margin-top:2px; }

.dial-wrap{ display:flex; flex-direction:column; align-items:center; gap:18px; padding: 18px 0 6px; position:relative; z-index:1; }
.dial{
  width:188px; height:188px; border-radius:50%;
  border: 1.5px solid rgba(140,198,63,.4);
  display:flex; align-items:center; justify-content:center; position:relative;
}
.dial::before{
  content:""; position:absolute; inset:10px; border-radius:50%; border:1px dashed rgba(140,198,63,.25);
}
.dial-inner{
  width:150px; height:150px; border-radius:50%; background: rgba(255,255,255,.03);
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:4px;
  border:1px solid rgba(255,255,255,.06);
}
.dial-inner .time{ font-family: var(--mono); font-size:26px; font-weight:600; letter-spacing:.02em; }
.dial-inner .status-lbl{ font-size:10.5px; text-transform:uppercase; letter-spacing:.12em; color: var(--brass-light); }
.dial-actions{ display:flex; gap:12px; width:100%; max-width:280px; position:relative; z-index:1; }
.dial-actions .btn{ flex:1; }
.dial-foot{ font-size:12px; color: rgba(255,255,255,.45); text-align:center; position:relative; z-index:1; }
.dial-geo{ font-size:10.5px; color: rgba(255,255,255,.35); text-align:center; position:relative; z-index:1; display:flex; align-items:center; gap:5px; justify-content:center; }
.dial-geo svg{ width:11px; height:11px; opacity:.7; }

/* ---------------- Progress ring (used in report cards) ---------------- */
.ring-wrap{ position:relative; width:104px; height:104px; flex-shrink:0; }
.ring-wrap svg{ transform: rotate(-90deg); }
.ring-label{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.ring-label .pct{ font-family: var(--display); font-weight:700; font-size:20px; color: var(--heading); }
.ring-label .tag{ font-size:9.5px; color: var(--muted); text-transform:uppercase; letter-spacing:.06em; }

/* ---------------- Modal ---------------- */
.modal-backdrop{
  position:fixed; inset:0; background: rgba(12,22,51,.55); backdrop-filter: blur(2px);
  display:flex; align-items:center; justify-content:center; z-index:100; padding:20px;
}
.modal{
  background: var(--surface); border-radius: var(--radius-lg); width:100%; max-width:440px;
  padding:28px; box-shadow: var(--shadow-lg); animation: modalIn .18s ease;
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
}
.modal-wide{ max-width: 620px; }
/* Adjust-attendance modal: fixed-column rows so every label sits on one line, every control
   starts at the same height, and dropdown text is never cut off. */
.adj-grid{ display:grid; gap:12px; margin-bottom:14px; align-items:start; }
.adj-grid-2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.adj-grid-3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.adj-grid .field{ margin-bottom:0; min-width:0; }
.adj-grid .field label{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.adj-grid .field select, .adj-grid .field input{ width:100%; min-width:0; height:46px; padding:0 12px; font-size:14px; text-overflow:clip; }
.adj-grid .field select{ text-overflow:ellipsis; }
@media (max-width:560px){ .adj-grid-2, .adj-grid-3{ grid-template-columns: 1fr; } }
.salary-line-row{ margin-bottom:8px; }
@keyframes modalIn{ from{ opacity:0; transform: translateY(10px) scale(.98);} to{ opacity:1; transform:none; } }
.modal h3{ font-size:19px; margin-bottom:6px; }
.modal .sub{ font-size:13px; color: var(--muted); margin-bottom:20px; }
textarea{
  width:100%; border:1.5px solid var(--line); border-radius:10px; padding:12px 14px; font-size:14px;
  font-family:inherit; resize:vertical; min-height:90px; color:var(--ink);
}
textarea:focus{ outline:none; border-color: var(--navy-600); box-shadow: 0 0 0 4px rgba(46,74,147,.08); }
.modal-actions{ display:flex; gap:10px; margin-top:20px; }
.modal-actions .btn{ flex:1; }
.field-row{ display:flex; gap:12px; flex-wrap:wrap; }
.field-row .field{ flex:1 1 130px; }
.field-row .field:has(input[type="date"]){ flex-basis:100%; }
@media (max-width:480px){ .field-row .field{ flex-basis:100%; } }
/* Any narrow flex field holding a BS-enhanced date input needs the full
   row: the AD box + BS box pair it renders as needs ~330px, which never
   fits in a modal's multi-column layout meant for short inputs. This is
   a hard floor inside modals — it overrides any narrower inline/authored
   flex-basis — so a cramped/overlapping BS date field can't recur there
   just because a new field forgot to size around it by hand. Left
   unscoped outside modals, since wider layouts (e.g. the Filter records
   panel) already have enough room to show AD/BS date fields side by side
   and forcing them full-width there would just waste space. */
.modal .field:has(input[type="date"]){ flex-basis:100% !important; min-width:280px; }

/* ---------------- Toast ---------------- */
#toast-host{ position:fixed; bottom:24px; right:24px; z-index:200; display:flex; flex-direction:column; gap:10px; align-items:flex-end; }
.toast{
  background: var(--navy-900); color:#fff; padding:13px 18px; border-radius:11px; font-size:13.5px;
  box-shadow: var(--shadow-lg); display:flex; align-items:center; gap:10px; animation: toastIn .2s ease; max-width:320px;
}
.toast.success{ background: #1F4A35; }
.toast.error{ background: #5A2620; }
@keyframes toastIn{ from{ opacity:0; transform: translateY(10px);} to{ opacity:1; transform:none;} }

/* ---------------- Misc utility ---------------- */
.flex{ display:flex; }
.between{ justify-content:space-between; }
.center{ align-items:center; }
.gap-8{ gap:8px; } .gap-10{ gap:10px; } .gap-12{ gap:12px; } .gap-14{ gap:14px; } .gap-16{ gap:16px; }

/* A simple on/off toggle switch — used for the automatic-sync setting.
   The real checkbox is visually hidden but still keyboard/screen-reader
   accessible; the track+thumb are purely decorative and driven by :checked. */
.toggle-switch{ position:relative; display:inline-block; width:42px; height:24px; flex-shrink:0; }
.toggle-switch input{ position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; z-index:1; }
.toggle-track{ position:absolute; inset:0; background: var(--line); border-radius:999px; transition: background .2s ease; }
.toggle-thumb{ position:absolute; top:3px; left:3px; width:18px; height:18px; background:#fff; border-radius:50%; box-shadow:0 1px 3px rgba(0,0,0,.25); transition: transform .2s ease; }
.toggle-switch input:checked ~ .toggle-track{ background: var(--brass); }
.toggle-switch input:checked ~ .toggle-track .toggle-thumb{ transform: translateX(18px); }
.toggle-switch input:focus-visible ~ .toggle-track{ box-shadow: 0 0 0 3px rgba(95,168,46,.3); }
.muted{ color: var(--muted); }
.empty-state{ text-align:center; padding:50px 20px; color: var(--muted); }
.empty-state .ic{ width:46px; height:46px; margin:0 auto 14px; opacity:.4; }
.skeleton{ background: linear-gradient(90deg, var(--line-soft) 25%, var(--canvas-2) 37%, var(--line-soft) 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; border-radius:8px; }
@keyframes shimmer{ 0%{background-position:100% 50%;} 100%{background-position:0 50%;} }

.tab-row{ display:flex; gap:4px; background: var(--surface-soft); padding:4px; border-radius:11px; width:fit-content; margin-bottom:22px; }
.tab-row .tab{ padding:9px 16px; border-radius:8px; font-size:13px; font-weight:600; color: var(--muted); cursor:pointer; }
.tab-row .tab.active{ background: var(--surface); color: var(--heading); box-shadow: var(--shadow-sm); }

.info-list{ display:flex; flex-direction:column; gap:0; }
.info-row{ display:flex; justify-content:space-between; padding:13px 0; border-bottom:1px solid var(--line-soft); font-size:13.5px; }
.info-row:last-child{ border-bottom:none; }
.info-row .k{ color: var(--muted); }
.info-row .v{ font-weight:600; color: var(--ink); }
.bs-date-wrap { display:inline-flex; align-items:center; gap:12px; row-gap:10px; max-width:100%; flex-wrap:wrap; margin:2px 0; }
.bs-field-block { display:inline-flex; flex-direction:column; gap:6px; align-items:flex-start; }
.bs-field-label { font-size:11px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--muted); padding-left:2px; }
.flex.gap-8:has(.bs-date-wrap) { gap:14px; row-gap:14px; }
.bs-input-group { display:inline-flex; align-items:stretch; flex-shrink:0; height:40px; border:1.5px solid var(--line); border-radius:9px; background:var(--surface-soft); overflow:hidden; transition:border-color .15s ease; }
.bs-input-group:focus-within { border-color:var(--brass); }
.bs-input-group:has(.bs-text-input.invalid) { border-color:var(--danger); }
.bs-input-tag { display:flex; align-items:center; padding:0 8px; font-size:10.5px; font-weight:800; letter-spacing:.03em; color:var(--muted); background:var(--surface); border-right:1px solid var(--line-soft); flex-shrink:0; }
.ad-input-group input[type="date"] {
  border:none !important; outline:none !important; background:transparent !important; box-shadow:none !important;
  -webkit-appearance:none; appearance:none;
  padding:0 10px; width:148px; min-width:0; height:100%; color:var(--ink); font-size:13px; font-family:inherit; line-height:1;
}
.ad-input-group input[type="date"]:focus { border:none !important; outline:none !important; box-shadow:none !important; }
.bs-text-input { width:140px !important; min-width:0; border:none !important; outline:none !important; background:transparent !important; box-shadow:none !important; color:var(--ink); font-size:13px; padding:0 10px !important; font-family:inherit; line-height:1; }
.bs-text-input::placeholder { color:var(--muted); }
.bs-text-input:focus { border:none !important; outline:none !important; box-shadow:none !important; }
.bs-text-input.has-value { color:var(--brass); font-weight:600; }
.bs-text-input.invalid { color:var(--danger); }
.bs-text-input.loading { opacity:.6; }
.bs-date-btn { display:flex; align-items:center; justify-content:center; flex-shrink:0; width:36px; border:none; border-left:1px solid var(--line-soft); background:transparent; color:var(--muted); cursor:pointer; transition:background .15s ease, color .15s ease; }
.bs-date-btn:hover { background:var(--line-soft); color:var(--brass); }
@media (max-width:480px) {
  .ad-input-group input[type="date"] { width:126px !important; }
  .bs-text-input { width:170px !important; }
  .bs-date-wrap { gap:10px; row-gap:12px; }
}

.bs-datepicker-popup { position:absolute; z-index:300; width:272px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-lg); padding:14px; font-size:13px; }
.bs-dp-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.bs-dp-title { font-weight:700; color:var(--ink); font-size:14px; }
.bs-dp-nav { width:28px; height:28px; border-radius:8px; border:none; background:var(--surface-soft); color:var(--ink-soft); font-size:16px; line-height:1; cursor:pointer; transition:background .15s ease; }
.bs-dp-nav:hover { background:var(--line-soft); }
.bs-dp-weekdays { display:grid; grid-template-columns:repeat(7,1fr); text-align:center; font-size:10.5px; font-weight:700; color:var(--muted); margin-bottom:4px; }
.bs-dp-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.bs-dp-grid .bs-dp-pad { height:30px; }
.bs-dp-day { height:30px; border:none; border-radius:8px; background:transparent; color:var(--ink); font-size:12.5px; cursor:pointer; transition:background .15s ease, color .15s ease; }
.bs-dp-day:hover { background:var(--surface-soft); }
.bs-dp-day.today { font-weight:700; color:var(--brass); }
.bs-dp-day.selected { background:var(--brass); color:#fff; }
.bs-dp-day.loading { opacity:.5; pointer-events:none; }
.bs-dp-error { grid-column:1/-1; text-align:center; color:var(--muted); font-size:12px; padding:16px 4px; }
.bs-dp-foot { display:flex; justify-content:space-between; margin-top:10px; padding-top:10px; border-top:1px solid var(--line-soft); }
.bs-dp-foot button { background:none; border:none; color:var(--brass); font-size:12.5px; font-weight:600; cursor:pointer; padding:4px 6px; }
.bs-dp-foot button:hover { text-decoration:underline; }
@media (max-width:480px) {
  .bs-date-wrap { flex-wrap:wrap; }
  .bs-datepicker-popup { width:calc(100vw - 32px); max-width:272px; }
}

/* ---- Company settings: grouped sections ---- */
.settings-nav{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:26px; }
.settings-nav button{
  border:1.5px solid var(--line); background: var(--surface); color: var(--ink);
  padding:8px 16px; border-radius:999px; font-size:13px; font-weight:600; cursor:pointer; font-family:inherit;
  transition: border-color .15s, background .15s;
}
.settings-nav button:hover{ border-color: var(--navy-600); }
.settings-group{ margin-bottom:40px; scroll-margin-top:16px; }
.settings-group-head{ margin-bottom:14px; padding-bottom:10px; border-bottom:1px solid var(--line); }
.settings-group-title{ font-size:17px; font-weight:700; color: var(--ink); }
.settings-group-desc{ font-size:12.5px; color: var(--muted); margin-top:3px; }
.settings-group > .card + .card{ margin-top:20px; }
.settings-sub{ font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color: var(--muted); margin:0 0 12px; }
.settings-divider{ border:none; border-top:1px solid var(--line); margin:24px 0; }

/* ---- Monthly report: day-by-day chart beside the attendance mix ---- */
.report-split{ display:grid; grid-template-columns: 2fr 1fr; gap:20px; }
@media (max-width: 860px){ .report-split{ grid-template-columns: 1fr; } }

/* ---------- Email (SMTP) settings card + temporary-password hand-over ---------- */
.email-grid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:0 16px; max-width:680px; }
.email-grid .field{ min-width:0; }
@media (max-width:640px){ .email-grid{ grid-template-columns: 1fr; } }
.temp-pw-box{ background: var(--surface-soft); border:1.5px dashed var(--line); border-radius:10px; padding:14px 16px; font-size:18px; font-weight:700; letter-spacing:.04em; color: var(--heading); text-align:center; overflow-wrap:anywhere; user-select:all; }

/* ---------- Support page (admin) ---------- */
.support-pane{ margin-bottom:24px; }
.support-doc{ overflow:hidden; padding:0; }
.support-doc-head{ display:flex; align-items:flex-start; gap:18px; padding:24px 26px 22px; flex-wrap:wrap; }
.support-doc-ic{ width:54px; height:54px; border-radius:14px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.support-doc-ic svg{ width:26px; height:26px; }
.support-doc-ic.is-guide{ background: var(--info-tint); color: var(--info); }
.support-doc-ic.is-licence{ background: var(--brass-tint); color: var(--brass); }
.support-doc-text{ flex:1 1 300px; min-width:0; }
.support-doc-text h3{ font-size:18px; }
.support-doc-text .sub{ font-size:13.5px; color: var(--ink-soft); margin-top:5px; line-height:1.5; }
.support-doc-pub{ font-size:12.5px; color: var(--muted); margin-top:6px; }
.support-doc-actions{ display:flex; gap:8px; flex-wrap:wrap; margin-left:auto; }
.support-doc-actions .btn{ background: var(--surface-soft); color: var(--heading); border-color: transparent; text-decoration:none; white-space:nowrap; }
.support-doc-actions .btn:hover{ background: var(--line-soft); }
.support-stats{ display:grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); background: var(--surface-soft); border-top:1px solid var(--line-soft); }
.support-stats > div{ padding:15px 26px; border-left:1px solid var(--line-soft); min-width:0; }
.support-stats > div:first-child{ border-left:none; }
.support-stats .k{ display:block; font-size:12.5px; color: var(--muted); }
.support-stats .v{ display:block; font-size:15.5px; font-weight:700; color: var(--heading); margin-top:3px; overflow-wrap:anywhere; }
.support-viewer{ background:#323639; height: clamp(440px, 78vh, 920px); position:relative; }
.support-viewer iframe{ width:100%; height:100%; border:0; display:block; background:#323639; }
.support-viewer:fullscreen{ height:100vh; }
.support-viewer-note{ padding:11px 26px; font-size:12.5px; color: var(--muted); border-top:1px solid var(--line-soft); }
.support-viewer-note a{ font-weight:600; }
.support-empty{ text-align:center; padding:56px 24px 60px; border-top:1px solid var(--line-soft); }
.support-empty .ic{ width:54px; height:54px; border-radius:50%; background: var(--surface-soft); color: var(--muted); display:inline-flex; align-items:center; justify-content:center; margin-bottom:14px; }
.support-empty .ic svg{ width:24px; height:24px; }
.support-empty b{ display:block; font-size:15.5px; color: var(--heading); margin-bottom:5px; }
.support-empty p{ margin:0 auto; max-width:420px; font-size:13.5px; color: var(--muted); line-height:1.55; }
.support-empty code{ font-size:12px; background: var(--surface-soft); padding:2px 6px; border-radius:6px; color: var(--ink-soft); }

.support-report{ display:grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap:24px; align-items:start; }
.support-dev-head{ display:flex; align-items:center; gap:16px; margin-bottom:12px; }
.support-dev-avatar{ width:70px; height:70px; border-radius:18px; font-size:24px; }
.support-dev-name{ font-family: var(--display); font-weight:700; font-size:20px; color: var(--heading); overflow-wrap:anywhere; }
.support-dev .info-row{ gap:18px; align-items:center; }
.support-dev .info-row .v{ text-align:right; min-width:0; overflow-wrap:anywhere; }
.support-dev .info-row .v a{ color: var(--navy-600); text-decoration:none; }
.support-dev .info-row .v a:hover{ text-decoration:underline; }
.support-email{ display:inline-flex; align-items:center; gap:10px; justify-content:flex-end; }
.support-email .icon-btn-soft{ width:30px; height:30px; }
.support-form textarea{ background: var(--surface); min-height:140px; }
.support-check{ display:flex; gap:12px; align-items:flex-start; font-size:13px; color: var(--ink-soft); line-height:1.5; margin:2px 0 18px; cursor:pointer; }
.support-check input{ width:18px; height:18px; margin-top:2px; accent-color: var(--brass); flex-shrink:0; }
.support-form-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.support-hint{ font-size:12.5px; color: var(--muted); margin-top:14px; line-height:1.55; }
.support-hint b{ color: var(--ink-soft); }

@media (max-width:900px){
  .support-report{ grid-template-columns: 1fr; }
}
@media (max-width:640px){
  .support-doc-head{ padding:18px 18px 16px; gap:14px; }
  .support-doc-actions{ width:100%; margin-left:0; }
  .support-doc-actions .btn{ flex:1; justify-content:center; text-align:center; }
  .support-stats{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .support-stats > div{ padding:13px 18px; }
  .support-stats > div:nth-child(odd){ border-left:none; }
  .support-stats > div:nth-child(n+3){ border-top:1px solid var(--line-soft); }
  .support-viewer{ height: 70vh; }
  .support-viewer-note{ padding:11px 18px; }
  .support-form-actions .btn{ flex:1; justify-content:center; }
  .support-pane .tab-row{ width:100%; }
}

/* =====================================================================================
   Consistent control sizing — keep this block LAST so it wins over the older rules above.
   One scale everywhere (admin + staff, desktop + phone):
     .btn 40px · .btn-sm 34px · .btn-xs 28px · inputs keep their own height.
   Button labels never wrap; form text is clipped, never shown as "…".
   ===================================================================================== */
.btn{ min-height:40px; padding:0 20px; font-size:14px; line-height:1.2; white-space:nowrap; }
.btn-sm{ min-height:34px; padding:0 14px; font-size:13px; border-radius:8px; }
.btn-xs{ min-height:28px; padding:0 10px; font-size:12px; border-radius:7px; }
.btn-icon{ min-height:34px; min-width:34px; padding:0 10px; }
.btn svg{ flex-shrink:0; }
.status-pill{ min-height:34px; }

/* Modal buttons: equal share of the row, never narrower than their own label, and they wrap
   onto a second row on a phone instead of squeezing ("Clear record for this day" no longer
   breaks over five lines). */
.modal-actions{ flex-wrap:wrap; }
.modal-actions .btn{ flex:1 1 0; min-width:max-content; padding:0 14px; }

/* Form controls: no "…" — text is clipped, and fields get enough room before they wrap. */
.field input, .field select, .field textarea, .input, select.input, .select, select, textarea, .search-input{ text-overflow:clip; }
.adj-grid .field select{ text-overflow:clip; }
.field-row .field{ flex:1 1 170px; }
.reason-box{ min-height:64px; background: var(--surface); }
@media (max-width:640px){
  .field input, .field select, .input, select.input{ font-size:14px; padding-left:12px; padding-right:12px; }
}

/* Tab rows fit the screen — no horizontal scrollbar. */
.tab-row{ max-width:100%; }
@media (max-width:640px){
  .tab-row{ width:100%; flex-wrap:wrap; }
  .tab-row .tab{ flex:1 1 auto; text-align:center; padding:9px 8px; font-size:12.5px; white-space:nowrap; }
  #support-tabs{ overflow:visible; flex-wrap:nowrap; gap:2px; }
  #support-tabs .tab{ flex:1 1 auto; padding:9px 6px; }
}
@media (max-width:370px){
  #support-tabs{ flex-wrap:wrap; }
}