/* ————— HRintel: digital ledger aesthetic ————— */
:root {
  --paper: #f7f2e7;
  --paper-2: #efe7d5;
  --card: #fffdf7;
  --ink: #16281f;
  --ink-2: #46584d;
  --ink-3: #7d8b80;
  --green: #12352b;
  --green-2: #1d5c48;
  --green-soft: #dcead9;
  --amber: #d98a1f;
  --amber-soft: #f6e3c2;
  --red: #b03a2e;
  --red-soft: #f3d7d1;
  --blue: #2b5f8a;
  --blue-soft: #d7e5ef;
  --line: #d9cfb8;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(22, 40, 31, .08), 0 8px 24px -12px rgba(22, 40, 31, .25);
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Instrument Sans", -apple-system, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  background:
    radial-gradient(1200px 400px at 50% -100px, rgba(29, 92, 72, .10), transparent 70%),
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(22, 40, 31, .035) 31px 32px),
    var(--paper);
  color: var(--ink);
  min-height: 100dvh;
}
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: 16px; }
a { color: inherit; }

.app { max-width: 560px; margin: 0 auto; min-height: 100dvh; display: flex; flex-direction: column; }

/* topbar */
.topbar {
  position: sticky; top: 0; z-index: 40;
  background: linear-gradient(160deg, var(--green) 0%, #0d281f 100%);
  color: #f3ecd9;
  border-bottom: 3px solid var(--amber);
  box-shadow: 0 6px 20px -8px rgba(13, 40, 31, .5);
}
.topbar-inner { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark {
  width: 42px; height: 42px; display: grid; place-items: center;
  background: #666EB8; border-radius: 12px;
}
.brand-mark svg { width: 24px; height: 24px; display: block; }
.brand-name { font-family: var(--font-display); font-size: 20px; font-weight: 600; display: block; line-height: 1.1; }
.brand-sub { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; opacity: .65; }

/* "Manager" role badge — shown when the active business is managed (not owned) by the logged-in user */
.role-badge {
  display: inline-block; background: var(--amber); color: #3c2a08;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  padding: 2px 7px; border-radius: 999px; vertical-align: middle; margin-top: 2px;
}
.role-badge.sm { font-size: 9.5px; padding: 1px 6px; }
.icon-btn {
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); color: #f3ecd9;
  width: 38px; height: 38px; border-radius: 10px; font-size: 17px;
  transition: background .15s;
}
.icon-btn:hover { background: rgba(255,255,255,.2); }

/* view */
.view { flex: 1; padding: 18px 16px calc(84px + env(safe-area-inset-bottom)); animation: rise .28s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.page-title { font-family: var(--font-display); font-size: 26px; font-weight: 600; margin-bottom: 2px; }
.page-sub { color: var(--ink-3); font-size: 13.5px; margin-bottom: 16px; }

/* cards */
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 16px; margin-bottom: 14px;
}
.card h3 { font-family: var(--font-display); font-size: 17px; font-weight: 600; margin-bottom: 10px; }

/* dashboard hero */
.hero {
  background: linear-gradient(150deg, var(--green-2), var(--green));
  color: #f3ecd9; border: none; position: relative; overflow: hidden;
}
.hero::after {
  content: "₹"; position: absolute; right: -14px; bottom: -38px;
  font-family: var(--font-display); font-size: 150px; opacity: .07; font-weight: 700;
}
.hero .lbl { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.hero .big { font-family: var(--font-display); font-size: 34px; font-weight: 600; margin: 2px 0 10px; font-variant-numeric: tabular-nums; }
.hero-row { display: flex; gap: 18px; }
.hero-row .cell .lbl { font-size: 10px; }
.hero-row .cell .val { font-weight: 700; font-size: 16px; font-variant-numeric: tabular-nums; }

/* summary chips */
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  border: 1px solid var(--line); background: var(--card);
}
.chip b { font-variant-numeric: tabular-nums; }
.chip.p { background: var(--green-soft); border-color: #b9d3b4; color: #1d4a33; }
.chip.a { background: var(--red-soft); border-color: #ddb3aa; color: #7c281f; }
.chip.h { background: var(--amber-soft); border-color: #e3c691; color: #7c5410; }
.chip.l { background: var(--blue-soft); border-color: #b3cbdd; color: #234c6e; }
.chip.u { color: var(--ink-3); }
.chip.incentive { background: #ece1f5; border-color: #d3bce8; color: #5b3a8a; }
.chip.reimbursement { background: #d3f0ea; border-color: #a6ded1; color: #0d6b5c; }

/* staff rows */
.rowlist { display: flex; flex-direction: column; gap: 10px; }
.staff-row {
  display: flex; align-items: center; gap: 12px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 14px; box-shadow: var(--shadow);
}
.staff-row.inactive { opacity: .55; }
.avatar {
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-weight: 700; font-size: 16px;
  background: var(--green-soft); color: var(--green-2); border: 1.5px solid #b9d3b4;
}
.staff-main { flex: 1; min-width: 0; }
.staff-name { font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.staff-meta { font-size: 12px; color: var(--ink-3); }
.staff-right { text-align: right; font-variant-numeric: tabular-nums; }
.staff-right .amt { font-weight: 700; font-size: 14.5px; }
.staff-right .sub { font-size: 11px; color: var(--ink-3); }

/* attendance mark buttons */
.markbar { display: flex; gap: 5px; flex: none; flex-wrap: wrap; justify-content: flex-end; max-width: 110px; }
.mark {
  width: 32px; height: 32px; border-radius: 8px; border: 1.5px solid var(--line);
  background: var(--card); font-weight: 700; font-size: 11.5px; color: var(--ink-3);
  transition: transform .12s, background .12s;
}
.mark:active { transform: scale(.9); }
.mark.on-present { background: var(--green-2); border-color: var(--green-2); color: #fff; }
.mark.on-absent { background: var(--red); border-color: var(--red); color: #fff; }
.mark.on-half { background: var(--amber); border-color: var(--amber); color: #fff; }
.mark.on-paidleave { background: var(--blue); border-color: var(--blue); color: #fff; }
.mark.on-weekoff { background: #64748b; border-color: #64748b; color: #fff; }
.mark.on-holiday { background: #0f766e; border-color: #0f766e; color: #fff; }

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--green-2); color: #fff; border: none; border-radius: 11px;
  padding: 12px 18px; font-size: 15px; font-weight: 600;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.18), var(--shadow);
  transition: filter .15s, transform .1s;
}
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(1px); }
.btn.amber { background: var(--amber); color: #3c2a08; }
.btn.ghost { background: var(--card); color: var(--green-2); border: 1.5px solid var(--green-2); box-shadow: none; }
.btn.danger { background: var(--red); }
.btn.sm { padding: 8px 12px; font-size: 13px; border-radius: 9px; }
.btn.block { width: 100%; }

.filing-dl-row { display: flex; flex-wrap: wrap; gap: 10px; }
.filing-dl-row .btn { flex: 1 1 160px; }

.fab {
  position: fixed; right: max(16px, calc(50% - 264px)); bottom: calc(92px + env(safe-area-inset-bottom));
  z-index: 30; width: 56px; height: 56px; border-radius: 18px; border: none;
  background: var(--amber); color: #3c2a08; font-size: 28px; font-weight: 700;
  box-shadow: 0 10px 24px -6px rgba(217, 138, 31, .55), inset 0 -3px 0 rgba(0,0,0,.15);
}

/* bottom nav */
.bottomnav {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 560px; z-index: 40;
  display: grid; grid-template-columns: repeat(8, 1fr);
  background: rgba(255, 253, 247, .96); backdrop-filter: blur(8px);
  border-top: 1px solid var(--line);
  padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
}
.bottomnav a {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  text-decoration: none; font-size: 10.5px; font-weight: 600; letter-spacing: .02em;
  color: var(--ink-3); padding: 5px 2px; border-radius: 10px; transition: color .15s;
}
.bottomnav a .nav-ico { font-size: 17px; line-height: 1; }
.bottomnav a.active { color: var(--green-2); background: var(--green-soft); }

/* forms */
.field { margin-bottom: 13px; }
.field label { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-2); margin-bottom: 5px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 11px 12px; border: 1.5px solid var(--line); border-radius: 10px;
  background: #fff; color: var(--ink); outline: none; transition: border-color .15s;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--green-2); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.seg { display: flex; border: 1.5px solid var(--line); border-radius: 10px; overflow: hidden; }
.seg button {
  flex: 1; padding: 10px; background: #fff; border: none; font-weight: 600; font-size: 14px; color: var(--ink-3);
}
.seg button.on { background: var(--green-2); color: #fff; }

/* modal */
.modal-back {
  position: fixed; inset: 0; z-index: 60; background: rgba(18, 30, 24, .55);
  display: flex; align-items: flex-end; justify-content: center; animation: fadein .18s ease;
}
@keyframes fadein { from { opacity: 0; } }
.modal {
  width: 100%; max-width: 560px; max-height: 88dvh; overflow-y: auto;
  background: var(--paper); border-radius: 20px 20px 0 0; padding: 20px 18px calc(20px + env(safe-area-inset-bottom));
  animation: slideup .25s cubic-bezier(.2, .9, .3, 1) both;
}
@keyframes slideup { from { transform: translateY(40px); opacity: .5; } }
.modal h2 { font-family: var(--font-display); font-size: 21px; font-weight: 600; margin-bottom: 14px; }
.modal-actions { display: flex; gap: 10px; margin-top: 16px; }
.modal-actions .btn { flex: 1; }

/* toast */
#toast-root { position: fixed; bottom: calc(96px + env(safe-area-inset-bottom)); left: 0; right: 0; z-index: 80; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.toast {
  background: var(--ink); color: var(--paper); padding: 10px 18px; border-radius: 999px;
  font-size: 13.5px; font-weight: 600; box-shadow: var(--shadow); animation: rise .2s ease both;
}
.toast.err { background: var(--red); }

/* calendar */
.cal { border-collapse: collapse; width: 100%; table-layout: fixed; }
.cal th { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); padding: 6px 0; }
.cal td { text-align: center; padding: 3px 2px; }
.cal .day {
  width: 100%; aspect-ratio: 1; border-radius: 9px; border: 1px solid transparent;
  background: transparent; font-size: 13px; font-weight: 600; color: var(--ink-2);
  display: grid; place-items: center; font-variant-numeric: tabular-nums;
}
.cal .day.today { border-color: var(--green-2); }
.cal .day.st-present { background: var(--green-2); color: #fff; }
.cal .day.st-absent { background: var(--red); color: #fff; }
.cal .day.st-half { background: var(--amber); color: #fff; }
.cal .day.st-paidleave { background: var(--blue); color: #fff; }
.cal .day.st-weekoff { background: #64748b; color: #fff; }
.cal .day.st-holiday { background: #0f766e; color: #fff; }
.cal .day.off { color: #c9c0aa; }

/* month nav */
.monthnav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.monthnav .mn-title { font-family: var(--font-display); font-weight: 600; font-size: 17px; }
.monthnav button {
  width: 36px; height: 36px; border-radius: 10px; border: 1.5px solid var(--line);
  background: var(--card); font-size: 16px; font-weight: 700; color: var(--green-2);
}

/* payslip / ledger table */
.ledger { width: 100%; font-size: 13.5px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ledger tr { border-bottom: 1px dashed var(--line); }
.ledger tr:last-child { border-bottom: none; }
.ledger td { padding: 8px 2px; }
.ledger td:last-child { text-align: right; font-weight: 600; }
.ledger tr.total td { font-weight: 700; font-size: 15px; border-top: 2px solid var(--ink); }
.ledger .pos { color: var(--green-2); }
.ledger .neg { color: var(--red); }

/* payments list */
.pay-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.pay-row:last-child { border-bottom: none; }
.pay-tag {
  flex: none; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  padding: 4px 8px; border-radius: 6px;
}
.pay-tag.advance { background: var(--amber-soft); color: #7c5410; }
.pay-tag.bonus { background: var(--green-soft); color: #1d4a33; }
.pay-tag.deduction { background: var(--red-soft); color: #7c281f; }
.pay-tag.payment { background: var(--blue-soft); color: #234c6e; }
.pay-tag.incentive { background: #ece1f5; color: #5b3a8a; }
.pay-tag.labour { background: var(--amber-soft); color: #7c5410; }
.pay-tag.batta { background: var(--blue-soft); color: #234c6e; }
.pay-tag.reimbursement { background: #d3f0ea; color: #0d6b5c; }
.pay-main { flex: 1; min-width: 0; }
.pay-name { font-weight: 600; font-size: 14px; }
.pay-note { font-size: 12px; color: var(--ink-3); }
.pay-amt { font-weight: 700; font-variant-numeric: tabular-nums; }
.pay-del, .item-del { border: none; background: none; color: var(--ink-3); font-size: 15px; padding: 4px; }

/* report table */
.report-wrap { overflow-x: auto; margin: 0 -16px; padding: 0 16px; }
.report { border-collapse: collapse; width: 100%; min-width: 640px; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.report th {
  text-align: right; font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink-3); padding: 8px 8px; border-bottom: 2px solid var(--ink);
}
.report th:first-child, .report td:first-child { text-align: left; position: sticky; left: 0; background: var(--card); }
.report td { text-align: right; padding: 9px 8px; border-bottom: 1px dashed var(--line); }
.report td.name { font-weight: 600; }
.report tr.grand td { font-weight: 700; border-top: 2px solid var(--ink); border-bottom: none; }

.empty { text-align: center; padding: 44px 20px; color: var(--ink-3); }
.empty .glyph { font-size: 42px; display: block; margin-bottom: 10px; opacity: .5; }
.empty p { font-size: 14px; margin-bottom: 16px; }

.section-head { display: flex; align-items: center; justify-content: space-between; margin: 18px 0 10px; }
.section-head h3 { font-family: var(--font-display); font-size: 17px; font-weight: 600; }

.searchbar { margin-bottom: 12px; }
.searchbar input {
  width: 100%; padding: 11px 14px; border-radius: 999px; border: 1.5px solid var(--line);
  background: var(--card); outline: none;
}
.searchbar input:focus { border-color: var(--green-2); }

.legend { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 10px; font-size: 11.5px; color: var(--ink-2); }
.legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; }
.legend .lp::before { background: var(--green-2); }
.legend .la::before { background: var(--red); }
.legend .lh::before { background: var(--amber); }
.legend .ll::before { background: var(--blue); }
.legend .lw::before { background: #64748b; }
.legend .lho::before { background: #0f766e; }

@media (min-width: 561px) {
  .app { border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
}

/* ————— v2: auth, business switcher, selfie/geo, UPI ————— */
button.brand { background: none; border: none; color: inherit; text-align: left; }
.brand-caret { font-size: 11px; opacity: .6; margin-left: 2px; }

.login-wrap { min-height: 70dvh; display: flex; flex-direction: column; justify-content: center; }
.login-hero {
  text-align: center; margin-bottom: 26px;
}
.login-hero .mark {
  width: 74px; height: 74px; margin: 0 auto 14px; display: grid; place-items: center;
  background: var(--amber); color: var(--green); border-radius: 22px;
  font-family: var(--font-display); font-weight: 700; font-size: 40px;
  box-shadow: inset 0 -5px 0 rgba(0,0,0,.18), var(--shadow);
}
.login-hero h1 { font-family: var(--font-display); font-size: 30px; font-weight: 600; }
.login-hero p { color: var(--ink-3); font-size: 14px; margin-top: 4px; }
.otp-note {
  background: var(--amber-soft); border: 1px dashed var(--amber); border-radius: 10px;
  padding: 10px 12px; font-size: 13px; color: #7c5410; margin-bottom: 13px;
}
.otp-note b { font-size: 17px; letter-spacing: .2em; }

.badge-row { display: flex; gap: 5px; margin-top: 3px; }
.att-badge {
  font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 6px;
  background: var(--blue-soft); color: #234c6e; border: none; cursor: pointer;
}
.att-badge.cam { background: var(--green-soft); color: #1d4a33; }
.att-badge.late { background: var(--red-soft); color: #7c281f; cursor: default; }

.selfie-btn {
  width: 34px; height: 34px; border-radius: 9px; border: 1.5px dashed var(--line);
  background: var(--card); font-size: 15px; flex: none;
}
.selfie-view img { width: 100%; border-radius: 14px; border: 1px solid var(--line); }

.qr-box { display: grid; place-items: center; padding: 14px; background: #fff; border: 1px solid var(--line); border-radius: 14px; margin: 0 auto 14px; width: fit-content; }
.upi-link { display: block; text-align: center; font-size: 13px; color: var(--blue); word-break: break-all; margin-bottom: 12px; }

.biz-row { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px dashed var(--line); }
.biz-row:last-child { border-bottom: none; }
.biz-row .biz-name { flex: 1; font-weight: 600; }
.biz-row.current .biz-name::after { content: " ✓"; color: var(--green-2); }
.sms-body { font-size: 12.5px; color: var(--ink-2); white-space: pre-wrap; background: var(--paper-2); border-radius: 8px; padding: 8px 10px; }

/* ————— v3: offline banner, wage seg wrap ————— */
.seg-wrap { flex-wrap: wrap; }
.seg-wrap button { flex: 1 1 32%; }
body.is-offline .topbar { border-bottom-color: var(--red); }
body.is-offline .topbar::after {
  content: "📴 Offline — marks will sync when back online";
  display: block; text-align: center; font-size: 11px; font-weight: 700;
  background: var(--red); color: #fff; padding: 3px 8px;
}
button.chip { cursor: pointer; font-family: inherit; }

/* ————— dev quick-login pills ————— */
#login-pills { margin-top: 18px; }
.pill-head { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); text-align: center; margin-bottom: 10px; }
.pill-lbl { font-size: 11.5px; color: var(--ink-3); margin: 10px 0 6px; }
.pill-row { display: flex; flex-wrap: wrap; gap: 7px; }
.login-pill {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  padding: 7px 12px; border-radius: 11px; border: 1.5px solid var(--line);
  background: var(--card); text-align: left; transition: transform .1s, border-color .15s;
}
.login-pill:active { transform: scale(.96); }
.login-pill.owner { border-color: var(--green-2); background: var(--green-soft); }
.login-pill.staff { border-color: var(--blue); background: var(--blue-soft); }
.pill-name { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.pill-phone { font-size: 10.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* ————— staff mode: no business switcher, portal-only shell ————— */
body.staff-mode .brand-caret { display: none; }
body.staff-mode button.brand { cursor: default; }
body.staff-mode .view { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }

/* ————— v4: AI assistant + insights, holidays/weekoff, incentives, late fines ————— */
.ai-card { border-color: #d3bce8; background: linear-gradient(160deg, #faf6ff, var(--card) 55%); }
.ai-toggle { cursor: pointer; user-select: none; }
.ai-chevron { color: var(--ink-3); font-size: 13px; transition: transform .15s; }
.ai-narrative { font-size: 13px; color: var(--ink-2); background: #f3e9fb; border-radius: 10px; padding: 9px 11px; margin-bottom: 10px; }
.ai-clear { font-size: 13px; color: var(--ink-3); padding: 4px 0; }
.ai-insight { display: flex; gap: 9px; padding: 8px 0; border-bottom: 1px dashed var(--line); }
.ai-insight:last-child { border-bottom: none; }
.ai-insight .ai-sev { flex: none; font-size: 13px; line-height: 1.4; }
.ai-insight .ai-title { font-weight: 600; font-size: 13px; }
.ai-insight .ai-detail { font-size: 12px; color: var(--ink-3); }
.ai-insight.alert .ai-title { color: var(--red); }
.ai-insight.warn .ai-title { color: #a15b0a; }
.ai-insight.info .ai-title { color: var(--blue); }

.fab.ai-fab {
  background: linear-gradient(135deg, #7c3aed, #a855f7); color: #fff; font-size: 24px;
  box-shadow: 0 10px 24px -6px rgba(124, 58, 237, .55), inset 0 -3px 0 rgba(0,0,0,.15);
}

.ai-chat-log { display: flex; flex-direction: column; gap: 8px; max-height: 46dvh; overflow-y: auto; margin-bottom: 12px; }
.ai-msg { max-width: 86%; padding: 9px 12px; border-radius: 12px; font-size: 13.5px; line-height: 1.4; white-space: pre-wrap; }
.ai-msg.user { align-self: flex-end; background: var(--green-2); color: #fff; border-bottom-right-radius: 3px; }
.ai-msg.bot { align-self: flex-start; background: var(--paper-2); color: var(--ink); border-bottom-left-radius: 3px; }
.ai-msg.bot.thinking { color: var(--ink-3); font-style: italic; }
.ai-msg.bot.err { background: var(--red-soft); color: #7c281f; }

/* ————— v5: audit history, leave management, data export, AI ID-scan ————— */
.hist-toggle { cursor: pointer; user-select: none; }
.hist-chevron { color: var(--ink-3); font-size: 13px; transition: transform .15s; }
.audit-list { display: flex; flex-direction: column; gap: 2px; max-height: 46dvh; overflow-y: auto; }
.audit-row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  padding: 9px 0; border-bottom: 1px dashed var(--line);
}
.audit-row:last-child { border-bottom: none; }
.audit-action { font-weight: 600; font-size: 13px; }
.audit-role { font-size: 10.5px; color: var(--ink-3); font-weight: 500; margin-left: 4px; }
.audit-change { font-size: 12px; color: var(--ink-2); margin-top: 1px; }
.audit-at { flex: none; font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

.pay-tag.leave-casual { background: var(--blue-soft); color: #234c6e; }
.pay-tag.leave-sick { background: var(--red-soft); color: #7c281f; }
.pay-tag.leave-unpaid { background: var(--amber-soft); color: #7c5410; }
.leave-status { flex: none; font-size: 11.5px; font-weight: 700; padding: 4px 9px; border-radius: 999px; }
.leave-status.pending { background: var(--amber-soft); color: #7c5410; }
.leave-status.approved { background: var(--green-soft); color: #1d4a33; }
.leave-status.rejected { background: var(--red-soft); color: #7c281f; }

.csv-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.csv-grid .btn { flex: 1 1 28%; }
.export-note { font-size: 12px; color: var(--ink-3); margin-bottom: 10px; }

.scan-row { display: flex; gap: 8px; align-items: center; }
.scan-row select { flex: none; width: auto; padding: 11px 8px; border: 1.5px solid var(--line); border-radius: 10px; background: #fff; }
.scan-note { font-size: 11.5px; color: var(--ink-3); margin-top: 6px; }
.scan-note.ok { color: var(--green-2); font-weight: 600; }

/* ————— v6: per-vehicle incentive-slab engine — rules editor, sales, transparent statement ————— */
.tier-row {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
}
.tier-row input {
  flex: 1; min-width: 0; padding: 10px 11px; border: 1.5px solid var(--line); border-radius: 10px;
  background: #fff; color: var(--ink); outline: none;
}
.tier-row input:focus { border-color: var(--green-2); }
.tier-arrow { flex: none; font-size: 12.5px; color: var(--ink-3); font-weight: 600; }
.tier-row .pay-del { flex: none; font-size: 17px; }

.inc-breakdown { margin-top: 4px; }
.inc-table { width: 100%; border-collapse: collapse; font-size: 12px; margin: 8px 0; font-variant-numeric: tabular-nums; }
.inc-table th {
  text-align: right; font-size: 10px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink-3); padding: 4px 4px; border-bottom: 1px solid var(--line);
}
.inc-table th:first-child, .inc-table td:first-child,
.inc-table th:nth-child(2), .inc-table td:nth-child(2) { text-align: left; }
.inc-table td { padding: 6px 4px; border-bottom: 1px dashed var(--line); text-align: right; }
.inc-table tr:last-child td { border-bottom: none; }
.inc-sum-row { display: flex; justify-content: space-between; font-size: 12.5px; padding: 3px 0; color: var(--ink-2); }
.inc-sum-row b { font-variant-numeric: tabular-nums; color: var(--ink); }
.inc-sum-row.total {
  font-weight: 700; border-top: 1.5px solid var(--ink); margin-top: 6px; padding-top: 8px; font-size: 13.5px;
  color: var(--ink);
}
.inc-sum-row.total b { color: var(--green-2); }

/* ————— v11: dealership cashbook (petty-cash ledger) + business logo branding ————— */
.cashbook-shortcut {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  text-decoration: none; color: inherit; margin-bottom: 16px;
}
.cashbook-shortcut-title { font-weight: 700; font-size: 14.5px; }
.cashbook-shortcut-sub { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.cashbook-shortcut-arrow { font-size: 22px; color: var(--ink-3); flex: none; }

.pay-tag.in { background: var(--green-soft); color: #1d4a33; }
.pay-tag.out { background: var(--red-soft); color: #7c281f; }
.pay-amt.pos { color: var(--green-2); }
.pay-amt.neg { color: var(--red); }

/* branded payslip / payroll-report header (§5.5 premium hook) — no-logo businesses render nothing */
.payslip-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.payslip-head h3, .payslip-head .page-title, .payslip-head .page-sub { margin-bottom: 0; }
.payslip-logo { max-height: 40px; max-width: 120px; object-fit: contain; border-radius: 6px; flex: none; }

.logo-preview {
  flex: none; width: 64px; height: 64px; border-radius: 12px; border: 1.5px solid var(--line);
  background: var(--card); display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.logo-preview img { width: 100%; height: 100%; object-fit: contain; }

/* ————— v13: gateway integrations UI (SMS/WhatsApp/payout provider status) ————— */
.integ-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 0; border-bottom: 1px dashed var(--line); font-size: 13.5px;
}
.integ-row:last-child { border-bottom: none; }
.integ-badge {
  flex: none; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
  white-space: nowrap;
}
.integ-badge.on { background: var(--green-soft); color: #1d4a33; border: 1px solid #b9d3b4; }
.integ-badge.off { background: #ece7d8; color: var(--ink-3); border: 1px solid var(--line); }
.logo-preview .logo-ph { font-size: 26px; opacity: .5; }

/* ═══════════════════════════════════════════════════════════════════
   NARROW-PHONE REPAIR (measured at 320 / 360px)
   ═══════════════════════════════════════════════════════════════════ */

/* The bottom nav is an 8-column grid with no min-width:0, so the English labels refused to
   shrink and the track demanded 383px. At 360px — a very common Android width in India —
   "Compliance" rendered as "Complia"; at 320px, 63px was simply off-screen and unreachable
   because .bottomnav is position:fixed with visible overflow. Let the cells shrink and the
   labels ellipsise, so every destination stays tappable. */
.bottomnav a { min-width: 0; }
.bottomnav a > :not(.nav-ico) {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 380px) {
  .bottomnav { padding-left: 2px; padding-right: 2px; }
  .bottomnav a { font-size: 9.5px; padding: 5px 1px; letter-spacing: 0; }
  .bottomnav a .nav-ico { font-size: 16px; }
}

/* At 320px the ‹ | date | › | Today row was a non-wrapping flex row that pushed the document
   to 341px, and staff names collapsed to "Me…" / "Pri…" — unidentifiable. */
@media (max-width: 360px) {
  .staff-row { gap: 8px; }
  .markbar { max-width: 96px; gap: 4px; }
  .mark { width: 30px; height: 30px; }
  .avatar { width: 36px; height: 36px; font-size: 14px; }
  .staff-name { font-size: 14px; }
}
@media (max-width: 340px) {
  /* let the date controls wrap instead of overflowing the document */
  .att-datebar, .card > .row, .rowline { flex-wrap: wrap; }
  .markbar { max-width: 100%; justify-content: flex-start; }
  .staff-row { flex-wrap: wrap; }
  .staff-main { flex: 1 1 100%; }
}

/* The AI FAB sat exactly over the right-hand mark buttons, permanently occluding two of the
   six status controls for whichever row was at that height. Move it clear of the markbar. */
.fab { right: 12px; }
@media (max-width: 420px) {
  .fab { bottom: calc(150px + env(safe-area-inset-bottom)); }
}

/* was an inline flex row, so no stylesheet rule could make it wrap — it pushed the document
   to 341px at a 320px viewport */
.att-actions { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.att-actions > * { min-width: 0; }
@media (max-width: 360px) { .att-actions > .btn { flex: 1 1 100%; } }

/* #toast-root measured 341px inside a 320px viewport and dragged the fixed bottom nav out
   with it. Pin the overlay roots to the viewport and contain the shell. This is a containment
   backstop for very narrow phones (320px); 360px and up are clean without it. */
#toast-root, #modal-root { width: 100%; max-width: 100%; }
html, body { overflow-x: hidden; }
.app { max-width: 100%; }
.bottomnav { max-width: min(560px, 100vw); }