/* ==========================================================================
   BURAQ Smart Attendance — design system
   Single stylesheet. Class names match the existing markup, so every page
   picks up the new look without route changes.
   ========================================================================== */

/* --- 1. Tokens ---------------------------------------------------------- */

:root {
  color-scheme: light;

  /* surface */
  --canvas: #f6f7f5;
  --surface: #ffffff;
  --surface-2: #f2f4f2;
  --surface-3: #eaeeeb;

  /* text */
  --ink: #12211c;
  --ink-2: #3a4a44;
  --muted: #5f6f69;
  --faint: #8a9994;

  /* line */
  --rule: #e2e7e4;
  --rule-strong: #ccd5d1;

  /* identity + action */
  --brand: #0b3b2e;
  --brand-ink: #d9e8e1;
  --brand-hover: #10513e;
  --action: #12211c;
  --action-hover: #23362f;
  --action-ink: #ffffff;
  --focus: #1c7c54;

  /* attendance states — the only place colour carries meaning */
  --present: #1c7c54;
  --present-bg: #e6f2ec;
  --late: #b4690e;
  --late-bg: #fbf0dd;
  --absent: #b42318;
  --absent-bg: #fbeae8;
  --leave: #3d6db5;
  --leave-bg: #e8effa;
  --overtime: #6e5aae;
  --overtime-bg: #eeeafa;

  /* geometry */
  --r-sm: 6px;
  --r: 10px;
  --r-lg: 14px;
  --sh-1: 0 1px 2px rgba(18, 33, 28, .05);
  --sh-2: 0 6px 20px rgba(18, 33, 28, .09);
  --topbar-h: 60px;

  /* type */
  --f-display: "Bricolage Grotesque", "Geist", Inter, system-ui, sans-serif;
  --f-sans: "Geist", Inter, "Hind Siliguri", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* legacy aliases — older inline styles still reference these */
  --bg: var(--canvas);
  --panel: var(--surface);
  --panel2: var(--surface-2);
  --line: var(--rule);
  --brand2: var(--brand-hover);
  --ok: var(--present);
  --warn: var(--late);
  --bad: var(--absent);
  --shadow: var(--sh-1);
}

[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #0e1512;
  --surface: #151d1a;
  --surface-2: #1b2521;
  --surface-3: #22302a;
  --ink: #e8f0ec;
  --ink-2: #c4d2cc;
  --muted: #93a39d;
  --faint: #74847e;
  --rule: #26332e;
  --rule-strong: #35453e;
  --brand: #0a2b22;
  --brand-ink: #cfe3da;
  --action: #e8f0ec;
  --action-hover: #ffffff;
  --action-ink: #0e1512;
  --present-bg: #10312400;
  --present-bg: #14312455;
  --late-bg: #3a2a0e55;
  --absent-bg: #3a161255;
  --leave-bg: #16274255;
  --overtime-bg: #24193f55;
  --sh-1: 0 1px 2px rgba(0, 0, 0, .3);
  --sh-2: 0 6px 20px rgba(0, 0, 0, .35);
}

/* --- 2. Base ------------------------------------------------------------ */

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--f-sans);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 600;
  letter-spacing: -.015em;
  margin: 0 0 10px;
  line-height: 1.2;
}

h1 { font-size: 26px; }
h2 { font-size: 20px; }
h3 { font-size: 16px; }

b, strong { font-weight: 600; }

.sub {
  color: var(--muted);
  font-size: 13px;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: .09em;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  font-family: var(--f-sans);
}

.title {
  font-family: var(--f-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.01em;
}

.metric,
.payroll-amount,
.donut-value b,
table td,
.count-chip,
.bar-value {
  font-variant-numeric: tabular-nums;
}

:where(a, button, input, select, textarea, summary, .employee-pick):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* icons */
.ic {
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -.14em;
}

/* --- 3. Shell ----------------------------------------------------------- */

.scrim { display: none; }

.shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
}

[data-nav="rail"] .shell { grid-template-columns: 64px minmax(0, 1fr); }

.sidebar {
  background: var(--brand);
  color: var(--brand-ink);
  padding: 18px 14px 16px;
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.logo {
  font-family: var(--f-display);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 4px 8px;
}

.logo .mark {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: #1c7c54;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.logo .mark .ic { width: 14px; height: 14px; color: #fff; stroke-width: 2.2; }

.brand-sub {
  font-size: 11px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #7fa898;
  padding: 0 8px;
  margin: 2px 0 18px;
}

.nav-group { margin-bottom: 16px; }

.nav-group > .nav-label {
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #6f9788;
  padding: 0 8px;
  margin-bottom: 6px;
  font-weight: 500;
}

.side-nav { display: grid; gap: 2px; }

.side-nav a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px;
  border-radius: var(--r-sm);
  text-decoration: none;
  color: #b6ccc3;
  font-size: 13.5px;
  font-weight: 450;
  min-height: 36px;
  transition: background .14s ease, color .14s ease;
}

.side-nav a .ic { font-size: 17px; opacity: .85; }
.side-nav a:hover { background: rgba(255, 255, 255, .07); color: #fff; }

.side-nav a.active {
  background: rgba(255, 255, 255, .11);
  color: #fff;
  font-weight: 500;
}

.side-nav a.active .ic { opacity: 1; color: #64d0a6; }

.side-foot { margin-top: auto; padding-top: 12px; }

.side-account {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 8px;
  border-radius: var(--r-sm);
  text-decoration: none;
  color: inherit;
  background: rgba(255, 255, 255, .06);
}

.side-account:hover { background: rgba(255, 255, 255, .1); }

.side-account .who {
  min-width: 0;
  overflow: hidden;
}

.side-account b {
  display: block;
  color: #fff;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.side-sub {
  font-size: 11px;
  color: #7fa898;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.side-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #1c7c54;
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 600;
  flex: 0 0 auto;
}

.side-logout {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  padding: 8px;
  border-radius: var(--r-sm);
  color: #a3bdb3;
  text-decoration: none;
  font-size: 13px;
}

.side-logout:hover { background: rgba(255, 255, 255, .07); color: #fff; }

/* rail (collapsed) mode */
[data-nav="rail"] .sidebar { padding: 18px 10px 16px; align-items: stretch; }
[data-nav="rail"] .brand-sub,
[data-nav="rail"] .nav-group > .nav-label,
[data-nav="rail"] .side-nav a span,
[data-nav="rail"] .side-account .who,
[data-nav="rail"] .side-logout span,
[data-nav="rail"] .logo span { display: none; }
[data-nav="rail"] .side-nav a,
[data-nav="rail"] .side-logout,
[data-nav="rail"] .side-account { justify-content: center; padding: 9px 0; }
[data-nav="rail"] .logo { justify-content: center; padding: 4px 0; }

/* --- 4. Topbar + page --------------------------------------------------- */

.main { min-width: 0; }

.topbar {
  height: var(--topbar-h);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 0 22px;
  position: sticky;
  top: 0;
  z-index: 30;
}

.topbar-left { display: flex; align-items: center; gap: 12px; min-width: 0; }

.icon-btn {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--rule);
  background: var(--surface);
  color: var(--ink-2);
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: 17px;
  padding: 0;
}

.icon-btn:hover { border-color: var(--rule-strong); color: var(--ink); }

.today-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  color: var(--muted);
  padding-right: 4px;
}

.today-strip .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--present);
}

.page {
  padding: 24px 22px 56px;
  max-width: 1420px;
  margin: 0 auto;
}

.section-gap { height: 18px; }

/* --- 5. Surfaces -------------------------------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: 18px;
  box-shadow: var(--sh-1);
}

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.card-head h3 { margin: 0; }

a.card,
.control-card {
  text-decoration: none;
  transition: border-color .14s ease, transform .14s ease;
}

a.card:hover,
.control-card:hover {
  border-color: var(--rule-strong);
  transform: translateY(-1px);
}

.hero {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  margin-bottom: 16px;
}

.hero h2 { font-size: 22px; margin-bottom: 4px; }
.hero .sub { max-width: 680px; }

.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

.notice {
  padding: 12px 14px;
  border-radius: var(--r);
  background: var(--leave-bg);
  border: 1px solid color-mix(in srgb, var(--leave) 26%, transparent);
  color: var(--ink);
  margin-bottom: 16px;
  font-size: 13.5px;
}

.empty, .empty-state {
  padding: 34px 20px;
  text-align: center;
  color: var(--muted);
  font-size: 13.5px;
}

.code {
  font-family: var(--f-mono);
  font-size: 12.5px;
  background: var(--surface-3);
  color: var(--ink);
  border: 1px solid var(--rule);
  padding: 12px;
  border-radius: var(--r);
  overflow: auto;
}

.masked {
  font-family: var(--f-mono);
  font-size: 12.5px;
  background: var(--surface-2);
  padding: 10px 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--rule);
  word-break: break-all;
}

.confidential {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--late);
}

/* --- 6. Controls -------------------------------------------------------- */

.btn {
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  padding: 0 13px;
  min-height: 36px;
  background: var(--action);
  color: var(--action-ink);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  transition: background .14s ease, border-color .14s ease;
  white-space: nowrap;
}

.btn:hover { background: var(--action-hover); }

.btn.secondary {
  background: var(--surface);
  border-color: var(--rule-strong);
  color: var(--ink);
}

.btn.secondary:hover { background: var(--surface-2); }

.btn.danger {
  background: var(--absent-bg);
  border-color: color-mix(in srgb, var(--absent) 28%, transparent);
  color: var(--absent);
}

.btn.danger:hover { background: color-mix(in srgb, var(--absent) 16%, var(--surface)); }

.btn[disabled], .btn.disabled { opacity: .5; pointer-events: none; }

.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.table-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.table-actions .btn { min-height: 30px; padding: 0 10px; font-size: 12.5px; }

label {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-2);
  display: block;
}

input, select, textarea {
  width: 100%;
  min-height: 38px;
  padding: 8px 11px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-sm);
  margin: 5px 0 14px;
  background: var(--surface);
  color: var(--ink);
  font-family: inherit;
  font-size: 13.5px;
  transition: border-color .14s ease, box-shadow .14s ease;
}

input:hover, select:hover, textarea:hover { border-color: var(--faint); }

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 16%, transparent);
}

input[type="checkbox"], input[type="radio"] {
  width: auto;
  min-height: 0;
  margin: 0 6px 0 0;
  accent-color: var(--present);
}

.checkbox { display: inline-flex; align-items: center; gap: 7px; }

textarea { min-height: 92px; resize: vertical; }

.searchbar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  align-items: end;
  margin-bottom: 14px;
}

.searchbar input, .searchbar select { margin-bottom: 0; }

.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 16px 0; }

.tab {
  padding: 7px 12px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  text-decoration: none;
  background: var(--surface);
  font-size: 13px;
  color: var(--muted);
}

.tab:hover { border-color: var(--rule-strong); color: var(--ink); }
.tab.active { background: var(--action); border-color: var(--action); color: var(--action-ink); }

/* --- 7. Status vocabulary ----------------------------------------------- */

.status, .status-badge, .pill, .tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.6;
  white-space: nowrap;
  background: var(--surface-2);
  color: var(--muted);
  border: 1px solid var(--rule);
}

.status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}

.status.ok, .status-present { background: var(--present-bg); color: var(--present); border-color: color-mix(in srgb, var(--present) 22%, transparent); }
.status.warn, .status-late { background: var(--late-bg); color: var(--late); border-color: color-mix(in srgb, var(--late) 22%, transparent); }
.status.bad, .status-absent { background: var(--absent-bg); color: var(--absent); border-color: color-mix(in srgb, var(--absent) 22%, transparent); }
.status-leave { background: var(--leave-bg); color: var(--leave); border-color: color-mix(in srgb, var(--leave) 22%, transparent); }
.status-overtime { background: var(--overtime-bg); color: var(--overtime); border-color: color-mix(in srgb, var(--overtime) 22%, transparent); }

.count-chip {
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 500;
  display: inline-grid;
  place-items: center;
}

.avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--surface-3);
  color: var(--ink-2);
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 600;
  flex: 0 0 auto;
}

/* --- 8. Tables ---------------------------------------------------------- */

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

th, td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--rule);
  vertical-align: middle;
}

thead th {
  background: var(--surface);
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .07em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--rule-strong);
}

.sticky-head thead th {
  position: sticky;
  top: var(--topbar-h);
  z-index: 2;
}

tbody tr:hover { background: var(--surface-2); }
tbody tr:last-child td { border-bottom: 0; }

/* --- 9. Metrics + dashboard --------------------------------------------- */

.metric { font-size: 26px; font-weight: 600; letter-spacing: -.02em; margin-top: 2px; font-family: var(--f-display); }
.metric-label { font-size: 12.5px; color: var(--muted); }
.metric-foot { font-size: 12px; color: var(--faint); min-height: 17px; margin-top: 10px; }

.dashboard-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}

.dashboard-head h1 { font-size: 27px; margin: 0 0 6px; }
.dashboard-date { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 7px; }
.dashboard-tools { display: flex; gap: 8px; align-items: center; }
.dashboard-search { width: 260px; margin: 0; }

.dashboard-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.dashboard-kpi { padding: 16px; }
.dashboard-kpi-link { color: inherit; text-decoration: none; transition: transform .16s ease, border-color .16s ease; }
.dashboard-kpi-link:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--brand) 28%, var(--rule)); }
.face-security-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 16px; }

.selfie-review-grid { display: grid; gap: 14px; }
.selfie-review-card { padding: 18px; }
.review-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.review-card-head h3 { margin: 3px 0; }
.review-card-grid { display: grid; grid-template-columns: minmax(190px, 280px) minmax(0, 1fr); gap: 18px; align-items: start; }
.review-photo { aspect-ratio: 4 / 5; overflow: hidden; border: 1px solid var(--rule); border-radius: var(--r-md); background: var(--surface-2); }
.review-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.review-photo-fallback { width: 100%; height: 100%; display: grid; place-content: center; gap: 8px; text-align: center; color: var(--muted); font-size: 30px; font-weight: 600; }
.review-photo-fallback span { font-size: 12px; font-weight: 400; }
.review-details { display: grid; gap: 14px; }
.review-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
.review-facts > div { display: grid; gap: 4px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.review-facts span { color: var(--muted); font-size: 12px; }
.review-facts b { font-size: 13.5px; }
.review-actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.review-actions form { margin: 0; }

.kpi-row { display: flex; gap: 11px; align-items: center; }

.kpi-symbol {
  width: 34px;
  height: 34px;
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
  font-size: 17px;
  flex: 0 0 auto;
}

.kpi-green { background: var(--present-bg); color: var(--present); }
.kpi-orange { background: var(--late-bg); color: var(--late); }
.kpi-red { background: var(--absent-bg); color: var(--absent); }
.kpi-purple { background: var(--overtime-bg); color: var(--overtime); }
.kpi-blue { background: var(--leave-bg); color: var(--leave); }

.mini-line {
  height: 3px;
  border-radius: 999px;
  background: var(--surface-3);
  overflow: hidden;
  margin-top: 8px;
}

.mini-line span { display: block; height: 100%; border-radius: 999px; background: var(--present); }

.dashboard-main-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.dashboard-panel { min-height: 260px; }

/* 7-day bar chart */
.chart {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  height: 190px;
  padding-top: 12px;
}

.bar-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 7px; }

.bar {
  width: 100%;
  max-width: 42px;
  background: var(--present);
  border-radius: 4px 4px 2px 2px;
  position: relative;
  display: flex;
  justify-content: center;
  opacity: .85;
  transition: opacity .14s ease;
}

.bar:hover { opacity: 1; }

.bar-value {
  position: absolute;
  top: -19px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--muted);
}

.bar-label { font-size: 11.5px; color: var(--faint); }

/* readiness donut */
.readiness-wrap { display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: center; }

.donut {
  position: relative;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(var(--present) calc(var(--pct, 0) * 1%), var(--surface-3) 0);
}

.donut::before {
  content: "";
  position: absolute;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--surface);
}

.donut-value { position: relative; text-align: center; line-height: 1.25; }
.donut-value b { font-size: 22px; font-family: var(--f-display); }
.donut-value .sub { font-size: 11px; }

.legend-list { display: grid; gap: 9px; }
.legend-row { display: flex; align-items: center; gap: 9px; font-size: 13px; }
.legend-row b { margin-left: auto; font-variant-numeric: tabular-nums; }
.legend-dot { width: 9px; height: 9px; border-radius: 3px; flex: 0 0 auto; }

/* pending work list */
.pending-list { display: grid; gap: 2px; }

.pending-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 8px;
  border-radius: var(--r-sm);
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid var(--rule);
}

.pending-item:last-child { border-bottom: 0; }
.pending-item:hover { background: var(--surface-2); }

.pending-icon {
  width: 30px;
  height: 30px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--muted);
  display: grid;
  place-items: center;
  font-size: 15px;
  flex: 0 0 auto;
}

.pending-item > span:nth-child(2) { flex: 1; min-width: 0; }
.pending-item b { font-size: 13.5px; font-weight: 500; }

/* quick actions */
.dashboard-quick { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }

.dashboard-quick a {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  transition: border-color .14s ease, transform .14s ease;
}

.dashboard-quick a:hover { border-color: var(--rule-strong); transform: translateY(-1px); }

.qicon {
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  background: var(--present-bg);
  color: var(--present);
  display: grid;
  place-items: center;
  font-size: 16px;
}

/* --- 10. Signature: attendance ribbon ------------------------------------ */

.ribbon {
  display: inline-flex;
  gap: 2px;
  align-items: center;
}

.ribbon i {
  width: 6px;
  height: 18px;
  border-radius: 2px;
  background: var(--surface-3);
  display: block;
}

.ribbon i[data-s="present"] { background: var(--present); }
.ribbon i[data-s="late"] { background: var(--late); }
.ribbon i[data-s="absent"] { background: var(--absent); }
.ribbon i[data-s="leave"] { background: var(--leave); }

/* --- 11. Employee, duty, payroll ----------------------------------------- */

.profile-hero { display: grid; grid-template-columns: 96px 1fr auto; gap: 20px; align-items: center; }

.profile-photo {
  width: 92px;
  height: 92px;
  border-radius: var(--r-lg);
  object-fit: cover;
  background: var(--surface-2);
  border: 1px solid var(--rule);
  display: grid;
  place-items: center;
  font-size: 30px;
  font-weight: 600;
  color: var(--muted);
  font-family: var(--f-display);
}

.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }

.fact {
  padding: 11px 12px;
  background: var(--surface-2);
  border-radius: var(--r-sm);
  font-size: 13px;
}

.summary-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }

.rating { font-size: 20px; font-weight: 600; font-family: var(--f-display); }
.stars { color: var(--late); letter-spacing: 2px; }

.timeline { display: grid; gap: 0; }

.timeline-item {
  display: flex;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 13.5px;
}

.timeline-item:last-child { border-bottom: 0; }

.calendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }

.cal-day {
  min-height: 62px;
  padding: 7px;
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  font-size: 11.5px;
  background: var(--surface);
}

.cal-day.present { background: var(--present-bg); border-color: color-mix(in srgb, var(--present) 22%, transparent); }
.cal-day.late { background: var(--late-bg); border-color: color-mix(in srgb, var(--late) 22%, transparent); }
.cal-day.absent { background: var(--absent-bg); border-color: color-mix(in srgb, var(--absent) 22%, transparent); }
.cal-day.leave { background: var(--leave-bg); border-color: color-mix(in srgb, var(--leave) 22%, transparent); }
.cal-day.friday { background: var(--surface-2); color: var(--faint); }

.schedule-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.schedule-card { padding: 14px; border: 1px solid var(--rule); border-radius: var(--r); background: var(--surface); }
.schedule-days { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 8px; }
.schedule-days span { font-size: 11px; padding: 2px 7px; border-radius: 999px; background: var(--surface-2); color: var(--muted); }

.duty-section { margin-bottom: 14px; }
.duty-actionbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.duty-shortcuts { display: flex; gap: 6px; flex-wrap: wrap; }
.duty-search { max-width: 320px; margin: 0; }

.employee-pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }

.employee-pick {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px;
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: 13px;
  background: var(--surface);
}

.employee-pick:hover { border-color: var(--rule-strong); background: var(--surface-2); }
.employee-pick:has(input:checked) { border-color: var(--present); background: var(--present-bg); }

.payroll-panel {
  background: var(--brand);
  color: #fff;
  border: 0;
}

.payroll-panel .sub, .payroll-panel .eyebrow { color: #8fbcab; }
.payroll-amount { font-size: 30px; font-weight: 600; letter-spacing: -.02em; font-family: var(--f-display); }

.money-card { position: relative; overflow: hidden; }
.salary-breakdown { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.salary-part { padding: 12px; background: var(--surface-2); border-radius: var(--r-sm); font-size: 13px; }

.control-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }

.control-card {
  display: block;
  min-height: 138px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: 18px;
}

.control-icon {
  font-size: 22px;
  color: var(--present);
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
  background: var(--present-bg);
  display: grid;
  place-items: center;
  margin-bottom: 14px;
}

.control-card h3 { font-size: 16px; }

.health-list { display: grid; }

.health-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 13.5px;
}

.health-row:last-child { border-bottom: 0; }

/* --- 12. Login ----------------------------------------------------------- */

.login { max-width: 400px; margin: 8vh auto; padding: 16px; }
.login .card { padding: 28px; }
.login .logo { color: var(--ink); padding: 0; margin-bottom: 4px; }
.login .logo .mark { background: var(--brand); }

/* --- 13. Mobile ---------------------------------------------------------- */

.mobile-menu, .mobile-panel, .tabbar, .menu-btn { display: none; }

@media (max-width: 1240px) {
  .dashboard-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dashboard-quick { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
  .shell, [data-nav="rail"] .shell { grid-template-columns: minmax(0, 1fr); }

  .sidebar {
    position: fixed;
    z-index: 60;
    left: 0;
    top: 0;
    width: 258px;
    transform: translateX(-100%);
    transition: transform .2s ease;
    box-shadow: var(--sh-2);
  }

  [data-drawer="open"] .sidebar { transform: none; }

  [data-drawer="open"] .scrim {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(10, 20, 16, .45);
    z-index: 50;
  }

  [data-nav="rail"] .brand-sub,
  [data-nav="rail"] .nav-group > .nav-label,
  [data-nav="rail"] .side-nav a span,
  [data-nav="rail"] .side-account .who,
  [data-nav="rail"] .side-logout span,
  [data-nav="rail"] .logo span { display: revert; }

  [data-nav="rail"] .side-nav a,
  [data-nav="rail"] .side-logout,
  [data-nav="rail"] .side-account,
  [data-nav="rail"] .logo { justify-content: flex-start; padding: 8px; }

  .menu-btn { display: grid; }
  .page { padding: 18px 14px 92px; }
  .topbar { padding: 0 14px; }
  .dashboard-main-grid, .two, .readiness-wrap { grid-template-columns: minmax(0, 1fr); }
  .readiness-wrap { justify-items: center; }
  .profile-hero { grid-template-columns: minmax(0, 1fr); }
  .facts, .salary-breakdown, .control-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .summary-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .searchbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-search { width: 100%; }
  .today-strip { display: none; }
  .sticky-head thead th { top: 0; }

  .tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    background: color-mix(in srgb, var(--surface) 96%, transparent);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--rule);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  }

  .tabbar a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 5px 2px;
    font-size: 10.5px;
    text-decoration: none;
    color: var(--muted);
    border-radius: var(--r-sm);
  }

  .tabbar a .ic { font-size: 19px; }
  .tabbar a.active { color: var(--present); }
}

@media (max-width: 820px) {
  .face-security-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .review-card-grid { grid-template-columns: minmax(150px, 220px) minmax(0, 1fr); }
}

@media (max-width: 620px) {
  .dashboard-kpis, .dashboard-quick, .grid, .facts, .salary-breakdown,
  .control-grid, .summary-strip, .searchbar { grid-template-columns: minmax(0, 1fr); }
  .dashboard-head h1 { font-size: 23px; }
  .card { padding: 15px; }
  .actions > .btn { flex: 1; }
  .calendar { gap: 3px; }
  .cal-day { min-height: 50px; padding: 4px; }
  .review-card-grid, .review-facts { grid-template-columns: minmax(0, 1fr); }
  .review-photo { max-height: 420px; }
  .review-actions { align-items: stretch; }
  .review-actions form, .review-actions .btn { width: 100%; }
}

/* --- 14. Motion + print --------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

@media print {
  .sidebar, .topbar, .tabbar, .actions, .btn, .scrim { display: none !important; }
  .shell { grid-template-columns: 1fr; }
  .page { padding: 0; max-width: none; }
  .card, .hero { border: 1px solid #ccc; box-shadow: none; break-inside: avoid; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .sticky-head thead th { position: static; }
}
/* ==========================================================================
   BURAQ Smart Attendance — Dashboard v10.0 stylesheet patch
   Append this to the END of static/css/app.css. It only adds or overrides
   dashboard rules, so every other page is untouched.
   ========================================================================== */

/* --- 0. Missing token -----------------------------------------------------
   `.review-photo` and a few other rules reference var(--r-md), which was
   never defined, so those corners silently rendered square. Define it. */
:root { --r-md: 10px; }


/* --- 1. Header ----------------------------------------------------------- */

.dashboard-greet h1 { font-size: 26px; margin: 0 0 8px; letter-spacing: -.015em; }

.dashboard-date {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--muted);
}

.dashboard-date .status { margin: 0; }

.live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--present);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--present) 55%, transparent);
  animation: dash-pulse 2.4s ease-out infinite;
}

@keyframes dash-pulse {
  70%  { box-shadow: 0 0 0 7px color-mix(in srgb, var(--present) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--present) 0%, transparent); }
}

.dashboard-search-form { display: flex; gap: 8px; align-items: center; margin: 0; }
.dashboard-search { width: 280px; margin: 0; }


/* --- 2. KPI tiles --------------------------------------------------------
   Old grid was a hard `repeat(3, 1fr)`, so 5 or 7 tiles left a ragged,
   half-empty last row. auto-fit keeps every row full at any tile count. */

.dashboard-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(228px, 1fr));
  gap: 12px;
}

.dashboard-kpi {
  padding: 16px;
  display: flex;
  flex-direction: column;
  position: relative;
}

.dashboard-kpi .metric-foot { margin-top: auto; padding-top: 10px; }
.kpi-text { min-width: 0; }
.dashboard-kpi .metric { font-variant-numeric: tabular-nums; line-height: 1.15; }

.dashboard-kpi-link { color: inherit; text-decoration: none; }
.dashboard-kpi-link:hover { border-color: color-mix(in srgb, var(--brand) 28%, var(--rule)); }

.kpi-go {
  position: absolute;
  top: 16px;
  right: 14px;
  width: 7px;
  height: 7px;
  border-top: 1.6px solid var(--faint);
  border-right: 1.6px solid var(--faint);
  transform: rotate(45deg);
}

.dashboard-kpi-link:hover .kpi-go { border-color: var(--brand); }

/* Semantic tones. The old markup reused the same glyph for Present and
   Absent and the same one for Late and Overtime, so four tiles carried two
   icons between them. These names map tone to meaning instead of colour. */
.kpi-present  { background: var(--present-bg);  color: var(--present); }
.kpi-late     { background: var(--late-bg);     color: var(--late); }
.kpi-absent   { background: var(--absent-bg);   color: var(--absent); }
.kpi-leave    { background: var(--leave-bg);    color: var(--leave); }
.kpi-overtime { background: var(--overtime-bg); color: var(--overtime); }

/* Bars used hard-coded hex values (#10b981, #f97316, #ef476f, #8b5cf6) that
   ignored the palette and did not adapt in dark mode. Tokens now. */
.mini-line { transition: none; }
.mini-line span { transition: width .5s cubic-bezier(.4, 0, .2, 1); }
.mini-line.is-empty { opacity: 0; }
.mini-present  { background: var(--present); }
.mini-late     { background: var(--late); }
.mini-absent   { background: var(--absent); }
.mini-leave    { background: var(--leave); }
.mini-overtime { background: var(--overtime); }


/* --- 3. Card heads ------------------------------------------------------- */

.card-head { align-items: flex-start; }
.card-head h3 { margin: 0 0 3px; }
.card-head .sub { font-size: 12px; }
.section-head { display: flex; align-items: center; justify-content: space-between; margin: 2px 0 14px; }
.section-head h3 { margin: 0; }


/* --- 4. 7-day chart ------------------------------------------------------
   Bar heights were computed in Python as raw pixels against a 145px guess,
   so they drifted out of the 190px box on small screens. Percentages let
   the browser do the scaling and the bars always fit. */

.chart {
  height: 200px;
  align-items: stretch;
  padding: 24px 0 0;
}

.bar-wrap { height: 100%; justify-content: flex-end; gap: 0; }

.bar {
  flex: 0 0 auto;
  min-height: 6px;
  max-height: calc(100% - 22px);
  opacity: .78;
  transition: opacity .14s ease;
}

.bar:hover { opacity: 1; }
.bar.is-today { opacity: 1; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--brand) 60%, transparent); }
.bar-label { height: 22px; display: flex; align-items: center; }
.bar.is-today + .bar-label { color: var(--ink); font-weight: 500; }


/* --- 5. Workforce donut --------------------------------------------------
   The old donut plotted attendance-rate twice: once as the ring and once in
   the legend, while the legend listed four values that did not sum to the
   ring. This version is a true three-segment breakdown of the same total. */

.donut-stack {
  background: conic-gradient(
    var(--present) 0            calc(var(--stop1, 0) * 1%),
    var(--leave)   calc(var(--stop1, 0) * 1%) calc(var(--stop2, 0) * 1%),
    var(--absent)  calc(var(--stop2, 0) * 1%) 100%
  );
}

.legend-row { gap: 9px; }
.legend-row b { margin-left: auto; }
.legend-pct { font-size: 11.5px; color: var(--faint); min-width: 44px; text-align: right; font-variant-numeric: tabular-nums; }
.legend-present { background: var(--present); }
.legend-leave   { background: var(--leave); }
.legend-absent  { background: var(--absent); }


/* --- 6. Live attendance table -------------------------------------------- */

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.dashboard-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.late-tag { background: var(--late-bg); color: var(--late); margin-left: 6px; }

.empty-cell {
  padding: 22px 4px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}


/* --- 7. Pending work ----------------------------------------------------- */

.pending-item.is-clear { opacity: .62; }
.pending-item.is-clear:hover { opacity: 1; }
.chip-zero { background: var(--surface-3); color: var(--faint); }

.pending-go {
  width: 7px;
  height: 7px;
  border-top: 1.6px solid var(--faint);
  border-right: 1.6px solid var(--faint);
  transform: rotate(45deg);
  flex: 0 0 auto;
}


/* --- 8. Quick actions ---------------------------------------------------- */

.dashboard-quick { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }


/* --- 9. Accessibility + responsive --------------------------------------- */

.dashboard-kpi-link:focus-visible,
.pending-item:focus-visible,
.dashboard-quick a:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

@media (max-width: 620px) {
  .dashboard-kpis { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .dashboard-search-form { width: 100%; }
  .dashboard-search { width: 100%; }
  .chart { height: 168px; }
  .legend-pct { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .live-dot { animation: none; }
  .mini-line span { transition: none; }
}
/* ==========================================================================
   BURAQ Smart Attendance — Payroll v10.0 stylesheet patch
   Append after the dashboard patch at the END of static/css/app.css.
   ========================================================================== */

/* --- Notices -------------------------------------------------------------
   The old page wrote error colours inline (#fee2e2 / #991b1b), which
   ignored the palette and stayed light-pink in dark mode. */

.notice-ok  { background: var(--present-bg); color: var(--present); border: 1px solid color-mix(in srgb, var(--present) 22%, transparent); }
.notice-bad { background: var(--absent-bg);  color: var(--absent);  border: 1px solid color-mix(in srgb, var(--absent) 22%, transparent); }


/* --- Month picker in the header ------------------------------------------ */

.month-picker { display: flex; gap: 8px; align-items: center; margin: 0; }
.month-picker input { margin: 0; width: 170px; }


/* --- Preparation progress ------------------------------------------------ */

.payroll-progress { padding: 16px 18px; }

.stage-bar {
  display: flex;
  height: 9px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--surface-3);
  margin: 4px 0 12px;
}

.stage-bar span { display: block; transition: width .4s cubic-bezier(.4, 0, .2, 1); }
.seg-paid  { background: var(--present); }
.seg-final { background: var(--leave); }
.seg-draft { background: var(--late); }
.seg-none  { background: var(--surface-3); }

.stage-key {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  font-size: 12.5px;
  color: var(--muted);
}

.stage-key span { display: inline-flex; align-items: center; gap: 7px; }
.stage-key b { color: var(--ink); font-variant-numeric: tabular-nums; }

.seg-dot { width: 9px; height: 9px; border-radius: 3px; flex: 0 0 auto; }
.stage-none  { background: var(--surface-3);  color: var(--muted); }
.stage-draft { background: var(--late-bg);    color: var(--late); }
.stage-final { background: var(--leave-bg);   color: var(--leave); }
.stage-paid  { background: var(--present-bg); color: var(--present); }
.seg-dot.stage-none  { background: var(--rule-strong); }
.seg-dot.stage-draft { background: var(--late); }
.seg-dot.stage-final { background: var(--leave); }
.seg-dot.stage-paid  { background: var(--present); }


/* --- Money summary ------------------------------------------------------- */

.payroll-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.payroll-summary .metric { font-variant-numeric: tabular-nums; }


/* --- Form + live breakdown side by side ---------------------------------- */

.payroll-work { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }

.field-group {
  border: 1px solid var(--rule);
  border-radius: var(--r);
  padding: 12px 14px 14px;
  margin: 16px 0;
  background: var(--surface-2);
}

.field-group-title {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}

.field-group > label:first-of-type { margin-top: 0; }
.hint { font-size: 12px; color: var(--faint); margin: 5px 0 2px; line-height: 1.45; }
input[aria-invalid="true"] { border-color: var(--absent); }


/* --- The calculation sheet — the point of the whole page ------------------ */

#payroll-breakdown { position: sticky; top: calc(var(--topbar-h) + 14px); }

.calc-sheet { font-variant-numeric: tabular-nums; }

.calc-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px dashed var(--rule);
  font-size: 13.5px;
}

.calc-row:last-child { border-bottom: 0; }
.calc-row span { min-width: 0; }
.calc-row i { display: block; font-style: normal; font-size: 11.5px; color: var(--faint); margin-top: 2px; }
.calc-row b { white-space: nowrap; font-weight: 500; }

.calc-row.muted { color: var(--muted); }
.calc-row.plus b  { color: var(--present); }
.calc-row.minus b { color: var(--absent); }

.calc-row.subtotal {
  border-bottom: 1px solid var(--rule-strong);
  border-top: 1px solid var(--rule-strong);
  font-weight: 500;
  margin-top: 4px;
}

.calc-row.total {
  margin-top: 8px;
  padding: 14px 0 4px;
  border-top: 2px solid var(--ink);
  border-bottom: 0;
  font-size: 15px;
}

.calc-row.total b { font-family: var(--f-display); font-size: 21px; font-weight: 600; }

.calc-warn {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  background: var(--late-bg);
  color: var(--late);
  font-size: 12.5px;
  line-height: 1.5;
}


/* --- Salary sheet table -------------------------------------------------- */

.payroll-table td { vertical-align: top; }
.payroll-table .mini-line { margin-top: 6px; max-width: 84px; margin-left: auto; }
.payroll-table .row-not_prepared { opacity: .62; }
.payroll-table .row-not_prepared:hover { opacity: 1; }

.cell-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; }
.btn.small { padding: 5px 10px; font-size: 12px; }

/* Method / reference were bare 90px-wide inputs jammed into a table cell.
   They now live behind a disclosure, so the row stays readable. */
.pay-details { position: relative; }
.pay-details > summary { list-style: none; cursor: pointer; display: inline-flex; }
.pay-details > summary::-webkit-details-marker { display: none; }

.pay-form {
  position: absolute;
  z-index: 20;
  right: 0;
  top: calc(100% + 6px);
  width: 250px;
  padding: 14px;
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r);
  box-shadow: var(--sh-2);
}

.pay-form label { font-size: 12px; margin-top: 8px; }
.pay-form label:first-child { margin-top: 0; }
.pay-form input { margin: 4px 0 0; width: 100%; }
.pay-form .btn { margin-top: 12px; width: 100%; }


/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 1100px) {
  .payroll-work { grid-template-columns: minmax(0, 1fr); }
  #payroll-breakdown { position: static; }
}

@media (max-width: 620px) {
  .month-picker { width: 100%; }
  .month-picker input { flex: 1; width: auto; }
  .pay-form { right: auto; left: 0; width: 220px; }
}


/* ==========================================================================
   Discard + missing-duty additions
   ========================================================================== */

.warn-card {
  border-color: color-mix(in srgb, var(--late) 35%, var(--rule));
  background: var(--late-bg);
  padding: 14px 16px;
}

.warn-card b { color: var(--late); }
.warn-card .sub { margin-top: 5px; line-height: 1.55; }

.btn.danger { background: var(--absent); border-color: var(--absent); color: #fff; }
.btn.danger:hover { background: color-mix(in srgb, var(--absent) 85%, #000); }

.pay-form .hint { margin: 0 0 10px; }

.missing-picker { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin: 0; }
.missing-picker > div { flex: 1; min-width: 180px; }
.missing-picker label { margin-top: 0; }
.missing-picker select, .missing-picker input { margin: 4px 0 0; width: 100%; }

.fill-form { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 0; }
.fill-form input, .fill-form select { margin: 0; width: auto; min-width: 108px; }

.fill-all { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--rule); }
.fill-all .hint { margin-top: 8px; max-width: 60ch; }

@media (max-width: 620px) {
  .fill-form { flex-direction: column; align-items: stretch; }
  .fill-form input, .fill-form select, .fill-form .btn { width: 100%; }
}
/* ==========================================================================
   BURAQ Smart Attendance — premium refinement layer
   Append LAST in static/css/app.css. Pure CSS: no markup or route changes.

   The palette and layout are already sound. What reads as "template" is
   craft-level: every surface has the same weight, colour is used for
   decoration rather than meaning, and money is typeset like body text.
   This layer fixes those three things and nothing else.
   ========================================================================== */

:root {
  /* Layered elevation instead of one flat drop shadow. Three very light
     layers read as depth; one dark layer reads as a box. */
  --sh-1:
    0 1px 1px rgba(18, 33, 28, .04),
    0 2px 6px -1px rgba(18, 33, 28, .05);
  --sh-2:
    0 1px 1px rgba(18, 33, 28, .04),
    0 8px 18px -4px rgba(18, 33, 28, .09),
    0 20px 40px -12px rgba(18, 33, 28, .10);
  --sh-lift:
    0 1px 1px rgba(18, 33, 28, .04),
    0 6px 14px -3px rgba(18, 33, 28, .10),
    0 14px 28px -10px rgba(18, 33, 28, .09);

  --hairline: color-mix(in srgb, var(--rule) 70%, transparent);
}

[data-theme="dark"] {
  --sh-1: 0 1px 1px rgba(0, 0, 0, .28), 0 2px 6px -1px rgba(0, 0, 0, .34);
  --sh-2: 0 1px 1px rgba(0, 0, 0, .30), 0 10px 24px -6px rgba(0, 0, 0, .48);
  --sh-lift: 0 1px 1px rgba(0, 0, 0, .30), 0 8px 18px -4px rgba(0, 0, 0, .44);
  --hairline: color-mix(in srgb, var(--rule) 82%, transparent);
}


/* --- 1. Surfaces ---------------------------------------------------------
   A hard 1px border on every card flattens the page. A hairline plus a
   layered shadow separates cards from the canvas without drawing boxes. */

.card {
  border-color: var(--hairline);
  box-shadow: var(--sh-1);
  transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}

a.card:hover,
.control-card:hover,
.dashboard-kpi-link:hover {
  box-shadow: var(--sh-lift);
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--brand) 20%, var(--rule));
}

/* Section headers sit on the canvas, not inside a box. */
.card-head { padding-bottom: 13px; border-bottom: 1px solid var(--hairline); }
.card-head + .chart,
.card-head + .readiness-wrap { margin-top: 4px; }


/* --- 2. Money and numbers ------------------------------------------------
   ৳96,065.43 currently sets the currency mark at the same size and weight
   as the digits, so the eye reads the symbol first. In financial UI the
   mark is always optically reduced and the figures carry the weight. */

.metric,
.calc-row b,
.donut-value b {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "ss01" 1;
  letter-spacing: -.025em;
}

.metric { font-size: 30px; line-height: 1.08; }

/* Optical sizing for the Taka mark wherever it precedes a figure. */
.payroll-summary .metric,
.calc-row.total b {
  font-feature-settings: "tnum" 1;
}

.payroll-summary .metric { font-size: 32px; }
.metric-label { letter-spacing: .01em; font-weight: 500; }

.metric-foot,
.legend-pct,
.bar-value,
.bar-label { font-variant-numeric: tabular-nums; }


/* --- 3. Colour discipline ------------------------------------------------
   Five saturated icon chips across one KPI row is decoration. The chip
   becomes quiet; the state bar underneath carries the colour. That way
   colour still means something when you see it. */

.kpi-symbol {
  background: var(--surface-2);
  color: var(--muted);
  border: 1px solid var(--hairline);
  transition: color .18s ease, background .18s ease;
}

.kpi-symbol .ic { opacity: .9; }

.dashboard-kpi:hover .kpi-present,
.dashboard-kpi-link:hover .kpi-present { background: var(--present-bg); color: var(--present); }
.dashboard-kpi:hover .kpi-late,
.dashboard-kpi-link:hover .kpi-late { background: var(--late-bg); color: var(--late); }
.dashboard-kpi:hover .kpi-absent,
.dashboard-kpi-link:hover .kpi-absent { background: var(--absent-bg); color: var(--absent); }
.dashboard-kpi:hover .kpi-leave,
.dashboard-kpi-link:hover .kpi-leave { background: var(--leave-bg); color: var(--leave); }
.dashboard-kpi:hover .kpi-overtime,
.dashboard-kpi-link:hover .kpi-overtime { background: var(--overtime-bg); color: var(--overtime); }

/* The state bar is now the only always-on colour in a KPI tile. */
.mini-line { height: 4px; }


/* --- 4. Buttons ----------------------------------------------------------
   A primary button with no depth reads as a coloured rectangle. A single
   inner highlight gives it a surface without turning it into a 2010 gradient. */

.btn {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .09),
    0 1px 2px rgba(18, 33, 28, .12);
  transition: background .16s ease, box-shadow .16s ease, transform .06s ease;
}

.btn:active { transform: translateY(1px); }

.btn.secondary {
  box-shadow: var(--sh-1);
  border-color: var(--hairline);
}

.btn.secondary:hover { border-color: var(--rule-strong); }

.btn:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}


/* --- 5. Inputs ----------------------------------------------------------- */

input, select, textarea {
  border-color: var(--hairline);
  transition: border-color .16s ease, box-shadow .16s ease;
}

input:focus, select:focus, textarea:focus {
  border-color: color-mix(in srgb, var(--focus) 55%, var(--rule));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 14%, transparent);
  outline: none;
}


/* --- 6. Sidebar ----------------------------------------------------------
   The active item is currently a wash of white at 11%. An accent rail on
   the leading edge is how the eye actually tracks "where am I". */

.side-nav a {
  position: relative;
  transition: background .16s ease, color .16s ease;
}

.side-nav a.active::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 20px;
  border-radius: 0 3px 3px 0;
  background: #64d0a6;
}

[data-nav="rail"] .side-nav a.active::before { left: -10px; }

.logo .mark { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18); }

/* Nav count badges are set inline in base.html at #1c7c54, which is darker
   than the sidebar's own accent and disappears against it. */
.side-nav a > span[style] {
  background: #64d0a6 !important;
  color: #06281d !important;
  font-weight: 600 !important;
}


/* --- 7. Tables ----------------------------------------------------------- */

.dashboard-table thead th {
  font-size: 11px;
  letter-spacing: .07em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--faint);
  border-bottom: 1px solid var(--hairline);
}

.dashboard-table tbody tr { transition: background .14s ease; }
.dashboard-table tbody tr:hover { background: var(--surface-2); }
.dashboard-table td { border-bottom: 1px solid var(--hairline); }
.dashboard-table tbody tr:last-child td { border-bottom: 0; }


/* --- 8. Status pills -----------------------------------------------------
   Filled pills at full saturation shout. A tinted ground with a matching
   hairline and a small dot is quieter and still unambiguous. */

.status-badge, .status, .pill, .tag {
  border: 1px solid transparent;
  font-weight: 500;
  letter-spacing: .01em;
}

.status-present, .stage-paid { border-color: color-mix(in srgb, var(--present) 24%, transparent); }
.status-absent, .stage-none  { border-color: color-mix(in srgb, var(--absent) 20%, transparent); }
.status-leave,  .stage-final { border-color: color-mix(in srgb, var(--leave) 24%, transparent); }
.stage-draft, .late-tag      { border-color: color-mix(in srgb, var(--late) 26%, transparent); }


/* --- 9. Chart ------------------------------------------------------------ */

.bar { border-radius: 5px 5px 2px 2px; }
.bar:not(.is-today) { background: color-mix(in srgb, var(--present) 42%, var(--surface-3)); opacity: 1; }
.bar.is-today { background: var(--present); box-shadow: none; }
.bar-value { font-weight: 500; }


/* --- 10. Page rhythm ----------------------------------------------------- */

.dashboard-greet h1 {
  font-family: var(--f-display);
  letter-spacing: -.028em;
  font-weight: 600;
}

.section-gap { height: 22px; }
.card-head h3 { letter-spacing: -.012em; }


/* --- 11. Motion ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .card, .btn, .side-nav a, .dashboard-table tbody tr,
  input, select, textarea { transition: none; }
  a.card:hover, .control-card:hover, .dashboard-kpi-link:hover { transform: none; }
}