/* ============================================================
   Payroll — blue & white theme
   A thin layer over Bootstrap 5. Everything here is colour,
   spacing and type; no layout is reinvented.
   ============================================================ */

:root {
  /* blues */
  --blue-50:  #eff6ff;
  --blue-100: #dbeafe;
  --blue-200: #bfdbfe;
  --blue-300: #93c5fd;
  --blue-500: #3b82f6;
  --blue-600: #2563eb;
  --blue-700: #1d4ed8;
  --blue-900: #1e3a8a;

  /* neutrals */
  --ink:      #0f172a;
  --ink-2:    #334155;
  --muted:    #64748b;
  --faint:    #94a3b8;
  --line:     #e2e8f0;
  --line-2:   #f1f5f9;
  --bg:       #f6f9fc;
  --white:    #ffffff;

  /* semantic, kept muted so the blue stays dominant */
  --green:    #059669;
  --green-bg: #ecfdf5;
  --amber:    #d97706;
  --amber-bg: #fffbeb;
  --red:      #dc2626;
  --red-bg:   #fef2f2;

  --radius:   12px;
  --radius-sm: 8px;
  --shadow:   0 1px 2px rgba(15, 23, 42, .04), 0 1px 3px rgba(15, 23, 42, .06);
  --shadow-lg: 0 4px 16px rgba(15, 23, 42, .08);

  /* Bootstrap overrides */
  --bs-primary: var(--blue-600);
  --bs-link-color: var(--blue-600);
  --bs-link-hover-color: var(--blue-700);
  --bs-border-color: var(--line);
  --bs-body-color: var(--ink-2);
}

/* ---------------- base ---------------- */
body {
  background: var(--bg);
  color: var(--ink-2);
  font-size: .9rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
               Arial, "Noto Sans", sans-serif;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--blue-200); color: var(--ink); }

h1, h2, h3, h4, h5, h6 { color: var(--ink); letter-spacing: -.011em; font-weight: 600; }
h1.h4 { font-size: 1.3rem; }
a { text-decoration: none; }
a:hover { text-decoration: underline; }
code { color: var(--blue-700); background: var(--blue-50); padding: .08rem .3rem;
       border-radius: 4px; font-size: .82em; }
.text-muted { color: var(--muted) !important; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
main.container-fluid { max-width: 1600px; }

/* ---------------- top bar ---------------- */
/*
 * The bars below are sticky, and Bootstrap gives .sticky-top z-index 1020
 * while a dropdown menu only gets 1000 — so without this the company and
 * branch bars paint straight over the open account menu. Lifting the whole
 * top bar above them takes its dropdown along with it.
 */
.topbar {
  background: var(--white);
  border-bottom: 1px solid var(--line);
  padding: .1rem 0;
  position: relative;
  z-index: 1040;
}
.topbar .navbar-brand {
  color: var(--ink); font-weight: 650; font-size: 1.02rem; letter-spacing: -.02em;
  display: flex; align-items: center; gap: .55rem;
}
.topbar .navbar-brand:hover { text-decoration: none; color: var(--blue-700); }
.brand-mark {
  width: 28px; height: 28px; border-radius: 8px; flex: 0 0 auto;
  background: linear-gradient(135deg, var(--blue-500), var(--blue-700));
  color: #fff; font-size: .75rem; font-weight: 700;
  display: grid; place-items: center; letter-spacing: -.02em;
}
.topbar .nav-link {
  color: var(--muted); font-weight: 500; font-size: .88rem;
  padding: .5rem .8rem; border-radius: var(--radius-sm); margin: .15rem .1rem;
}
.topbar .nav-link:hover { color: var(--blue-700); background: var(--blue-50); text-decoration: none; }
.topbar .nav-link.active { color: var(--blue-700); background: var(--blue-50); font-weight: 600; }
.topbar .navbar-toggler { border-color: var(--line); padding: .25rem .5rem; }
.topbar .navbar-toggler:focus { box-shadow: 0 0 0 .2rem var(--blue-100); }

/* Payroll | Cashbook — the two books over the same branches */
.modswitch {
  display: inline-flex; gap: 2px; padding: 3px; margin-left: .9rem;
  background: var(--line-2); border: 1px solid var(--line); border-radius: 999px;
}
.modswitch .mod {
  color: var(--muted); background: transparent;
  font-size: .8rem; font-weight: 600; letter-spacing: -.01em;
  padding: .3rem .85rem; border-radius: 999px; white-space: nowrap;
  text-decoration: none; transition: background .12s, color .12s;
}
.modswitch .mod:hover { color: var(--blue-700); text-decoration: none; }
.modswitch .mod.active {
  background: var(--white); color: var(--blue-700);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .08);
}
.modswitch.d-lg-none { display: flex; margin-left: 0; width: 100%; }
.modswitch.d-lg-none .mod { flex: 1 1 0; text-align: center; }

.user-chip {
  display: flex; align-items: center; gap: .5rem;
  color: var(--ink-2); font-weight: 500; font-size: .86rem;
  padding: .35rem .6rem; border-radius: 999px; border: 1px solid var(--line);
}
.user-chip:hover { background: var(--blue-50); border-color: var(--blue-200); text-decoration: none; }
.user-chip::after { display: none; }
.avatar {
  width: 24px; height: 24px; border-radius: 50%; flex: 0 0 auto;
  background: var(--blue-100); color: var(--blue-700);
  display: grid; place-items: center; font-size: .7rem; font-weight: 700;
}
.dropdown-menu {
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: .35rem; font-size: .87rem;
}
.dropdown-item { border-radius: var(--radius-sm); padding: .45rem .7rem; color: var(--ink-2); }
.dropdown-item:hover { background: var(--blue-50); color: var(--blue-700); }

/* ---------------- company bar ---------------- */
.companybar { background: var(--blue-900); position: relative; z-index: 1010; }
.companybar .tabscroll { padding: .3rem 0; align-items: center; }
.cb-label {
  flex: 0 0 auto; color: var(--blue-300); font-size: .68rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em; margin-right: .6rem; white-space: nowrap;
}
.ctab {
  flex: 0 0 auto; padding: .3rem .85rem; border-radius: 6px;
  font-size: .82rem; font-weight: 500; white-space: nowrap;
  color: var(--blue-200); background: transparent; text-decoration: none;
  transition: background .12s, color .12s;
}
.ctab:hover { background: rgba(255, 255, 255, .12); color: #fff; text-decoration: none; }
.ctab.active { background: #fff; color: var(--blue-900); font-weight: 600; }
.ctab.active:hover { background: #fff; color: var(--blue-900); }
.ctab-add { font-weight: 700; padding: .3rem .7rem; }

/* ---------------- outlet tabs ---------------- */
.tabbar { background: var(--white); border-bottom: 1px solid var(--line); }
.tabscroll {
  display: flex; gap: .3rem; overflow-x: auto; padding: .55rem 0;
  scrollbar-width: none;
}
.tabscroll::-webkit-scrollbar { display: none; }
.tab {
  flex: 0 0 auto; padding: .38rem 1rem; border-radius: 999px;
  font-size: .84rem; font-weight: 500; white-space: nowrap;
  color: var(--muted); background: transparent; border: 1px solid transparent;
  transition: background .12s, color .12s;
}
.tab:hover { background: var(--blue-50); color: var(--blue-700); text-decoration: none; }
.tab.active {
  background: var(--blue-600); color: #fff; font-weight: 600;
  box-shadow: 0 1px 2px rgba(37, 99, 235, .25);
}
.tab.active:hover { background: var(--blue-700); color: #fff; }

/* ---------------- cards ---------------- */
.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.card-header {
  background: var(--white);
  border-bottom: 1px solid var(--line-2);
  padding: .7rem 1rem;
  font-weight: 600; color: var(--ink);
  border-radius: var(--radius) var(--radius) 0 0 !important;
}
.card-header strong { font-weight: 600; }
.card-body { padding: 1rem; }

/* ---------------- KPI tiles ---------------- */
.kpi { border: 1px solid var(--line); border-left: 3px solid var(--blue-600); }
.kpi .card-body { padding: .85rem 1rem; }
.kpi .label {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--faint); font-weight: 600; margin-bottom: .15rem;
}
.kpi .value { font-size: 1.5rem; font-weight: 650; color: var(--ink); line-height: 1.15;
              letter-spacing: -.02em; }
.kpi .value small { font-weight: 500; color: var(--faint); }

/* ---------------- buttons ---------------- */
.btn { border-radius: var(--radius-sm); font-weight: 500; font-size: .86rem; }
.btn:focus, .btn:focus-visible { box-shadow: 0 0 0 3px var(--blue-100); }
.btn-sm { font-size: .8rem; padding: .3rem .7rem; }

.btn-primary {
  background: var(--blue-600); border-color: var(--blue-600); color: #fff;
  box-shadow: 0 1px 2px rgba(37, 99, 235, .2);
}
.btn-primary:hover, .btn-primary:active { background: var(--blue-700) !important;
  border-color: var(--blue-700) !important; }

.btn-success { background: var(--blue-600); border-color: var(--blue-600); }
.btn-success:hover, .btn-success:active { background: var(--blue-700) !important;
  border-color: var(--blue-700) !important; }

.btn-outline-primary { color: var(--blue-600); border-color: var(--blue-200); background: var(--white); }
.btn-outline-primary:hover { background: var(--blue-50); color: var(--blue-700); border-color: var(--blue-300); }

.btn-outline-secondary { color: var(--ink-2); border-color: var(--line); background: var(--white); }
.btn-outline-secondary:hover { background: var(--line-2); color: var(--ink); border-color: var(--line); }

.btn-outline-danger { color: var(--red); border-color: #fecaca; background: var(--white); }
.btn-outline-danger:hover { background: var(--red-bg); color: var(--red); border-color: #fca5a5; }

/* ---------------- forms ---------------- */
.form-label { color: var(--ink-2); font-weight: 500; font-size: .8rem; margin-bottom: .25rem; }
.form-control, .form-select {
  border-color: var(--line); border-radius: var(--radius-sm);
  color: var(--ink); font-size: .86rem;
}
.form-control:focus, .form-select:focus {
  border-color: var(--blue-400, var(--blue-300));
  box-shadow: 0 0 0 3px var(--blue-100);
}
.form-control::placeholder { color: var(--faint); }

/* Dropdown items are drawn by the OS and don't inherit reliably — state both
   colours so a transparent select can never render white on white. */
option, optgroup { background-color: #fff; color: var(--ink); }
.form-control[readonly] { background: var(--line-2); color: var(--muted); }
.form-text { color: var(--faint); }
.form-check-input { border-color: var(--line); }
.form-check-input:checked { background-color: var(--blue-600); border-color: var(--blue-600); }
.form-check-input:focus { border-color: var(--blue-300); box-shadow: 0 0 0 3px var(--blue-100); }

/* ---------------- tables ---------------- */
.table { --bs-table-color: var(--ink-2); margin-bottom: 0; }
.table > :not(caption) > * > * { border-bottom-color: var(--line-2); }
.table thead th, .table-light th {
  background: var(--blue-50) !important;
  color: var(--blue-900) !important;
  font-weight: 600; font-size: .74rem;
  text-transform: uppercase; letter-spacing: .04em;
  border-bottom: 1px solid var(--line) !important;
  white-space: nowrap;
}
.table-hover > tbody > tr:hover > * { background: var(--blue-50); }
.table-sm td, .table-sm th { padding: .45rem .6rem; }
.table tfoot td { background: var(--line-2); color: var(--ink); border-top: 1px solid var(--line); }
.card > .table-responsive:last-child .table tr:last-child td { border-bottom: 0; }

/* ---------------- badges & alerts ---------------- */
.badge { font-weight: 600; font-size: .68rem; padding: .28em .55em; border-radius: 5px;
         letter-spacing: .01em; }
.badge.bg-secondary { background: var(--line-2) !important; color: var(--muted) !important; }
.badge.bg-success   { background: var(--green-bg) !important; color: var(--green) !important; }
.badge.bg-warning   { background: var(--amber-bg) !important; color: var(--amber) !important; }
.badge.bg-danger    { background: var(--red-bg) !important; color: var(--red) !important; }
.badge.bg-info      { background: var(--blue-50) !important; color: var(--blue-700) !important; }

.alert { border-radius: var(--radius); border: 1px solid; font-size: .86rem; padding: .7rem 1rem; }
.alert-info    { background: var(--blue-50); border-color: var(--blue-100); color: var(--blue-900); }
.alert-success { background: var(--green-bg); border-color: #a7f3d0; color: #065f46; }
.alert-warning { background: var(--amber-bg); border-color: #fde68a; color: #92400e; }
.alert-danger  { background: var(--red-bg); border-color: #fecaca; color: #991b1b; }
.alert-light   { background: var(--white); border-color: var(--line); color: var(--ink-2); }

/* ---------------- daily attendance ---------------- */
.row-emp {
  border-bottom: 1px solid var(--line-2); padding: .6rem .9rem;
  display: flex; align-items: center; gap: 1rem; background: var(--white);
  transition: background .1s;
}
.row-emp:first-child { border-radius: var(--radius) var(--radius) 0 0; }
.row-emp:last-child { border-bottom: 0; border-radius: 0 0 var(--radius) var(--radius); }
.row-emp:hover { background: var(--blue-50); }
.row-emp .who { flex: 1 1 auto; min-width: 0; }
.row-emp .who .nm { font-weight: 600; color: var(--ink); font-size: .89rem; }
.row-emp .who .sub { font-size: .73rem; color: var(--faint); }
.row-emp.part { background: var(--amber-bg); }
.row-emp.away { background: var(--red-bg); }

/* No overflow:hidden here — it would clip the hover labels. */
.pickgroup {
  display: flex; flex: 0 0 auto; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--white);
}
.pickgroup input { position: absolute; opacity: 0; pointer-events: none; }
.pickgroup label {
  padding: .32rem .72rem; font-size: .78rem; font-weight: 500; cursor: pointer;
  color: var(--muted); background: var(--white);
  border-right: 1px solid var(--line); margin: 0; user-select: none; white-space: nowrap;
  transition: background .1s, color .1s;
}
.pickgroup label:first-of-type { border-radius: 7px 0 0 7px; }
.pickgroup label:last-of-type { border-right: 0; border-radius: 0 7px 7px 0; }
.pickgroup label:hover { background: var(--blue-50); color: var(--blue-700); }

/* The default checked style must carry its own background — anything that sets
   white text without one ends up invisible. */
.pickgroup input:checked + label { background: var(--blue-600); color: #fff; font-weight: 600; }
.pickgroup input[value="TQ"]:checked + label { background: var(--blue-500); }
.pickgroup input[value="HD"]:checked + label { background: #60a5fa; }
.pickgroup input[value="QD"]:checked + label { background: var(--amber); }
.pickgroup input[value="A"]:checked  + label { background: var(--red); }
.pickgroup input:checked + label:hover { color: #fff; }

.ot-group { display: flex; flex: 0 0 auto; }
.ot-group .ot-mode {
  width: 64px; border-top-right-radius: 0; border-bottom-right-radius: 0;
  background-position: right .35rem center; padding-right: 1.3rem;
  color: var(--muted); font-size: .8rem;
}
.ot-box { width: 80px; border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -1px; }

.counts { display: flex; gap: 1.1rem; font-size: .82rem; }
.counts b { color: var(--ink); font-weight: 650; }
.counts .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: .35rem; }
.counts .dot.p { background: var(--blue-600); }
.counts .dot.x { background: var(--amber); }
.counts .dot.a { background: var(--red); }

/* ---------------- month grid ---------------- */
.gridwrap {
  overflow: auto; max-height: 70vh; background: var(--white);
  border: 1px solid var(--line); border-radius: var(--radius);
}
.grid { border-collapse: separate; border-spacing: 0; font-size: .78rem; margin: 0; }
.grid th, .grid td { border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); padding: 0; }
.grid thead th {
  position: sticky; top: 0; z-index: 3; background: var(--blue-50);
  color: var(--blue-900); text-align: center; padding: .3rem .2rem;
  font-weight: 600; font-size: .72rem;
}
.grid .nameCol {
  position: sticky; left: 0; z-index: 2; background: var(--white);
  min-width: 180px; padding: .35rem .6rem; border-right: 1px solid var(--line);
}
.grid thead .nameCol { z-index: 4; background: var(--blue-50); }
.grid td.day { width: 34px; text-align: center; }
.grid td.day select {
  width: 100%; border: 0; background: transparent; font-size: .72rem; color: var(--ink-2);
  text-align: center; padding: .3rem 0; -webkit-appearance: none; appearance: none; cursor: pointer;
}
.grid td.day select:focus { outline: 2px solid var(--blue-600); outline-offset: -2px; }
.grid td.day[data-s="P"]  { background: var(--blue-50); }
.grid td.day[data-s="TQ"] { background: var(--blue-100); }
.grid td.day[data-s="HD"] { background: var(--blue-200); }
.grid td.day[data-s="QD"] { background: var(--amber-bg); }
.grid td.day[data-s="A"]  { background: var(--red-bg); }
.grid td.tot { text-align: center; font-weight: 650; color: var(--ink);
               padding: .35rem .5rem; background: var(--line-2); }

/* ---------------- payroll sheet ---------------- */
.sheet { font-size: .8rem; }
.sheet thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--blue-50); color: var(--blue-900);
  font-size: .68rem; text-transform: uppercase; letter-spacing: .04em;
}
.sheet td { vertical-align: middle; }
.sheet td.ro { text-align: right; white-space: nowrap; color: var(--ink-2); }
.sheet input.amt {
  width: 84px; text-align: right; border: 1px solid var(--line);
  border-radius: 6px; padding: .18rem .4rem; font-size: .78rem;
  font-variant-numeric: tabular-nums; color: var(--ink); background: var(--white);
}
.sheet input.amt:focus { border-color: var(--blue-300); box-shadow: 0 0 0 3px var(--blue-100); outline: none; }
.sheet input.amt[readonly] { background: var(--line-2); color: var(--muted); }
.sheet .bg-light { background: var(--blue-50) !important; }

.pill {
  display: inline-block; padding: .1rem .45rem; border-radius: 999px;
  font-size: .68rem; font-weight: 650;
  background: var(--blue-100); color: var(--blue-700);
}
.pill.zero { background: var(--line-2); color: var(--faint); }

.sheet .calc { font-size: .64rem; color: var(--faint); margin-top: 2px; white-space: nowrap; }
.sheet td.over { background: var(--amber-bg); }
.sheet td.over .calc { color: var(--amber); font-weight: 600; }
.sheet td.over input.amt { border-color: #fbbf24; }
.sheet .reset { border: 0; background: transparent; color: var(--blue-600); cursor: pointer;
                padding: 0 2px; font-size: .82rem; line-height: 1; }
.sheet .reset:hover { color: var(--blue-700); }
.sheet .warn {
  display: inline-block; width: 13px; height: 13px; border-radius: 50%;
  background: var(--red); color: #fff; font-size: .58rem; font-weight: 700;
  text-align: center; line-height: 13px; cursor: help;
}

/* advance / loan columns, banded so the three read as one group */
.sheet .grp-adv { background: #fff7ed; }
.sheet thead th.grp-adv { background: #ffedd5; color: #7c2d12; }
.sheet tfoot td.grp-adv { background: #ffedd5; color: #7c2d12; }

/* import preview */
.row-error td { background: var(--red-bg); }
.row-skip td { color: var(--faint); }
.row-skip td.fw-semibold { color: var(--muted) !important; }

/* contribution statement */
.contrib .grp-pf  { background: var(--blue-50); }
.contrib .grp-esi { background: #f0f9ff; }
.contrib thead th { position: static; }
.contrib thead tr:first-child th { font-size: .7rem; }
.contrib tfoot td { background: var(--blue-100); color: var(--blue-900); font-weight: 650; }

/* small info strip used above the sheet */
.strip {
  display: flex; flex-wrap: wrap; gap: .85rem; align-items: center;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: .55rem .9rem;
  font-size: .8rem; color: var(--ink-2);
}
.strip strong { color: var(--ink); }
.strip .chip {
  background: var(--blue-50); color: var(--blue-700);
  padding: .12rem .5rem; border-radius: 999px; font-weight: 600; font-size: .74rem;
}

/* ---------------- login ---------------- */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem;
              background: linear-gradient(160deg, var(--blue-50) 0%, var(--bg) 45%); }
.login-card { width: 100%; max-width: 380px; border: 1px solid var(--line);
              border-radius: 16px; box-shadow: var(--shadow-lg); background: var(--white); }
.login-mark {
  width: 44px; height: 44px; border-radius: 12px; margin-bottom: 1rem;
  background: linear-gradient(135deg, var(--blue-500), var(--blue-700));
  color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 1rem;
}

/* ---------------- empty states ---------------- */
.empty { text-align: center; padding: 2.5rem 1rem; color: var(--faint); }
.empty .big { font-size: 1rem; color: var(--muted); margin-bottom: .35rem; }

/* ---------------- payslip (print) ---------------- */
.slip {
  width: 190mm; margin: 0 auto 10mm; padding: 9mm; background: var(--white);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); font-size: 12px; page-break-after: always; color: #111;
}
.slip h2 { font-size: 16px; margin: 0; color: #111; }
.slip table { width: 100%; border-collapse: collapse; }
.slip table td, .slip table th { border: 1px solid #cbd5e1; padding: 4px 7px; }
.slip table th { background: var(--blue-50); color: var(--blue-900); font-weight: 600; }
.slip .plain td { border: 0; padding: 1px 0; }

@media print {
  body { background: #fff; }
  .no-print, nav, footer, .tabbar, .topbar { display: none !important; }
  .slip { border: 0; margin: 0; padding: 0; box-shadow: none; border-radius: 0; }
}

/* ---------------- hover labels ---------------- */
.tip { position: relative; }
.tip::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 7px); left: 50%; transform: translateX(-50%);
  background: var(--ink); color: #fff;
  font-size: .72rem; font-weight: 500; letter-spacing: .01em;
  padding: .28rem .55rem; border-radius: 6px; white-space: nowrap;
  opacity: 0; visibility: hidden; pointer-events: none; z-index: 40;
  transition: opacity .12s ease, visibility .12s;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .18);
}
.tip::before {
  content: ""; position: absolute; bottom: calc(100% + 2px); left: 50%;
  transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--ink);
  opacity: 0; visibility: hidden; pointer-events: none; z-index: 40;
  transition: opacity .12s ease, visibility .12s;
}
.tip:hover::after, .tip:hover::before,
.tip:focus-visible::after, .tip:focus-visible::before { opacity: 1; visibility: visible; }

/* points downward — for anything sitting at the top of a scrolling area */
.tip.down::after { bottom: auto; top: calc(100% + 7px); }
.tip.down::before {
  bottom: auto; top: calc(100% + 2px);
  border-top-color: transparent; border-bottom-color: var(--ink);
}
.pickgroup input:focus-visible + .tip::after,
.pickgroup input:focus-visible + .tip::before { opacity: 1; visibility: visible; }

/* legend — the same information for touch screens, where nothing hovers */
.legend { display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-size: .76rem; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; }
.legend b {
  display: inline-grid; place-items: center; min-width: 24px; height: 20px; padding: 0 .3rem;
  border-radius: 5px; font-size: .68rem; font-weight: 650;
  background: var(--blue-600); color: #fff;
}
.legend .k-P  { background: var(--blue-600); }
.legend .k-TQ { background: var(--blue-500); }
.legend .k-HD { background: #60a5fa; }
.legend .k-QD { background: var(--amber); }
.legend .k-A  { background: var(--red); }

/* ---------------- sticky action bar (phones) ---------------- */
.actionbar { display: none; }

/* ---------------- responsive ---------------- */
@media (max-width: 991px) {
  .topbar .navbar-collapse { padding: .5rem 0 .35rem; border-top: 1px solid var(--line-2); margin-top: .4rem; }
  .topbar .nav-link { padding: .6rem .8rem; }
  .user-chip { border: 0; padding: .5rem .3rem; }
}

@media (max-width: 768px) {
  body { font-size: .92rem; }
  main.container-fluid { padding-left: .8rem; padding-right: .8rem; }
  h1.h4 { font-size: 1.15rem; }

  /* iOS zooms in on any input under 16px — keep them at 16 */
  .form-control, .form-select, input.amt, .ot-box { font-size: 16px !important; }
  .form-control, .form-select { padding: .5rem .7rem; }

  /* comfortable tap targets */
  .btn { padding: .55rem 1rem; }
  .btn-sm { padding: .45rem .8rem; font-size: .85rem; }
  .dropdown-item { padding: .6rem .7rem; }

  .card { border-radius: 10px; }
  .card-body { padding: .85rem; }
  .card-header { padding: .65rem .85rem; }

  .kpi .value { font-size: 1.35rem; }
  .kpi .card-body { padding: .7rem .8rem; }

  .tabscroll { padding: .5rem 0; }
  .tab { padding: .45rem 1rem; font-size: .85rem; }

  /* ---- daily attendance: the screen that matters on a phone ---- */
  .row-emp { flex-wrap: wrap; gap: .55rem; padding: .75rem .85rem; }
  .row-emp .who { flex: 1 1 100%; }
  .row-emp .who .nm { font-size: .95rem; }
  .pickgroup { flex: 1 1 100%; }
  .pickgroup label {
    flex: 1 1 0; text-align: center; padding: .6rem .2rem; font-size: .85rem;
  }
  .ot-group { flex: 1 1 100%; }
  .ot-group .ot-mode { width: 40%; }
  .ot-box { width: 60%; }

  .strip { padding: .7rem .8rem; gap: .6rem; }
  .counts { gap: .8rem; flex-wrap: wrap; font-size: .85rem; }

  /* the top Save button is redundant once the bar appears */
  .strip .btn-primary { display: none; }

  .actionbar {
    display: flex; gap: .6rem; position: sticky; bottom: 0; z-index: 20;
    padding: .7rem .8rem calc(.7rem + env(safe-area-inset-bottom));
    margin: 1rem -.8rem 0;
    background: rgba(255, 255, 255, .95);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--line);
  }
  .actionbar .btn { flex: 1 1 auto; padding: .7rem 1rem; font-size: .95rem; }
  .actionbar .btn-outline-secondary { flex: 0 0 auto; }

  /* wide tables scroll sideways rather than squashing */
  .table-responsive { -webkit-overflow-scrolling: touch; }
  .table-sm td, .table-sm th { padding: .55rem .5rem; }
  .scroll-hint { display: block; }

  /* month grid gets shorter so the page still scrolls */
  .gridwrap { max-height: 60vh; }
  .grid .nameCol { min-width: 130px; }

  /* payslip fits the screen */
  .slip { width: auto; max-width: 100%; padding: 5mm; font-size: 11px; }
  .slip table td, .slip table th { padding: 3px 4px; }
}

@media (max-width: 480px) {
  .pickgroup label { padding: .6rem .1rem; font-size: .8rem; }
  .kpi .value { font-size: 1.2rem; }
  .kpi .label { font-size: .64rem; }
  .brand-mark { width: 26px; height: 26px; }
  .topbar .navbar-brand span:last-child {
    max-width: 44vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
}

.scroll-hint { display: none; font-size: .74rem; color: var(--faint); margin-top: .4rem; }

/* Share-of-spend bar in the cashbook report */
.bar {
  height: 6px; border-radius: 999px; background: var(--line-2);
  overflow: hidden; min-width: 60px;
}
.bar span { display: block; height: 100%; background: var(--blue-500); border-radius: 999px; }

/* ---------------- branch comparison ---------------- */
/*
 * A grouped bar chart with no charting library: one block per category,
 * one row per branch. Each bar states its own background, so the contrast
 * guard in test/css.test.js has something to check.
 */
.chartlegend { display: flex; flex-wrap: wrap; gap: .35rem .9rem; }
.chartlegend .lg {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .72rem; color: var(--muted);
}
.chartlegend .sw { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }

.sw0 { background: var(--blue-600); }
.sw1 { background: var(--blue-300); }
.sw2 { background: var(--blue-900); }
.sw3 { background: #60a5fa; }
.sw4 { background: #1e40af; }
.sw5 { background: #7dd3fc; }

.grp { margin-bottom: 1rem; }
.grp:last-child { margin-bottom: 0; }
.grp-head {
  display: flex; justify-content: space-between; align-items: baseline;
  border-bottom: 1px solid var(--line-2); padding-bottom: .2rem; margin-bottom: .35rem;
}
.grp-name { font-size: .82rem; font-weight: 600; color: var(--ink); }
.grp-total { font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.grp-row { display: flex; align-items: center; gap: .5rem; margin-bottom: .18rem; }
.grp-label {
  flex: 0 0 108px; font-size: .72rem; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.grp-track { flex: 1 1 auto; height: 13px; background: var(--line-2); border-radius: 3px; }
.grp-bar { display: block; height: 100%; border-radius: 3px; min-width: 2px; }
.grp-val {
  flex: 0 0 84px; text-align: right; font-size: .74rem;
  color: var(--muted); font-variant-numeric: tabular-nums;
}
.grp-val.top { color: var(--blue-700); font-weight: 600; }

@media (max-width: 575.98px) {
  .grp-label { flex-basis: 78px; font-size: .68rem; }
  .grp-val { flex-basis: 70px; font-size: .7rem; }
}

/* ============================================================
   Phone layer
   Everything below here is about the screen a branch manager
   actually holds. Desktop is untouched.
   ============================================================ */

/* ---- tables become cards ----------------------------------
 * Below 700px every table row turns into its own labelled card,
 * so nothing has to be swiped sideways to be read. The labels come
 * from the column headings, copied onto each cell by the script in
 * partials/foot.ejs — no duplicated markup in the templates.
 *
 * Opt a table out with class="keep-table" (the attendance month
 * grid, which is a calendar and only makes sense as a grid).
 */
@media (max-width: 700px) {
  .table-responsive:not(.keep-table) > .table:not(.keep-table) {
    display: block; width: 100%;
  }
  .table:not(.keep-table).ascards { display: block; width: 100%; }

  .ascards thead { display: none; }
  .ascards tbody, .ascards tfoot { display: block; }

  .ascards tbody > tr,
  .ascards tfoot > tr {
    display: block;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 10px;
    margin: 0 0 .55rem;
    padding: .1rem .2rem .2rem;
    box-shadow: var(--shadow);
  }
  .ascards tbody > tr:last-child { margin-bottom: 0; }
  .ascards tfoot > tr { background: var(--blue-50); border-color: var(--blue-100); }

  .ascards td {
    display: flex; align-items: baseline; justify-content: space-between; gap: .8rem;
    width: auto !important; min-width: 0 !important;
    padding: .3rem .6rem !important;
    border: 0 !important;
    text-align: left !important;
    white-space: normal;
  }
  /* the label side, taken from the column heading */
  .ascards td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    font-size: .7rem; font-weight: 600; letter-spacing: .04em;
    text-transform: uppercase; color: var(--faint);
  }
  /* a cell whose heading was blank (action columns) spans the card */
  .ascards td[data-label=""] { justify-content: flex-end; padding-top: .45rem !important; }
  .ascards td[data-label=""]::before { content: none; }

  /* the first cell reads as the card's title */
  .ascards tbody > tr > td:first-child {
    display: block;
    font-size: .95rem; font-weight: 600; color: var(--ink);
    padding: .55rem .6rem .35rem !important;
    border-bottom: 1px solid var(--line-2) !important;
    margin-bottom: .2rem;
  }
  .ascards tbody > tr > td:first-child::before {
    display: block; margin-bottom: .1rem;
  }
  .ascards td.num { font-variant-numeric: tabular-nums; }

  /* an empty-state row must not be dressed up as a card */
  .ascards tbody > tr.no-card {
    background: transparent; border: 0; box-shadow: none; padding: 0;
  }
  .ascards tbody > tr.no-card > td,
  .ascards tbody > tr.no-card > td:first-child {
    display: block; padding: 0 !important; border: 0 !important; margin: 0;
  }
  .ascards tbody > tr.no-card > td::before { content: none; }

  /* rows that were colour-coded keep their meaning as cards */
  .ascards tbody > tr.row-error { border-color: #fca5a5; background: var(--red-bg); }
  .ascards tbody > tr.row-skip { opacity: .75; }

  .scroll-hint { display: none !important; }
}

/* ---- bottom tab bar ---------------------------------------
 * The four or five screens used most, within thumb reach. Everything
 * else stays in the account menu. Hidden from 992px up.
 */
.tabdock { display: none; }

@media (max-width: 991.98px) {
  .tabdock {
    display: flex;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1050;
    background: rgba(255, 255, 255, .97);
    backdrop-filter: saturate(180%) blur(10px);
    border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .tabdock a {
    flex: 1 1 0; min-width: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; padding: .45rem .2rem .4rem;
    color: var(--muted); text-decoration: none;
    font-size: .66rem; font-weight: 600; letter-spacing: .01em;
    min-height: 52px;
  }
  .tabdock a:hover { text-decoration: none; color: var(--blue-700); }
  .tabdock a.active { color: var(--blue-700); }
  .tabdock .ic {
    width: 22px; height: 22px; display: block;
    stroke: currentColor; fill: none; stroke-width: 1.9;
    stroke-linecap: round; stroke-linejoin: round;
  }
  .tabdock a.active .ic { stroke-width: 2.3; }
  .tabdock .lbl {
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  /* room for the dock, plus the home indicator on a notched phone */
  body { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
  .actionbar { bottom: calc(56px + env(safe-area-inset-bottom)); }
  footer { margin-bottom: .5rem; }
}

/* ---- refinements ------------------------------------------ */
@media (max-width: 768px) {
  /* a tap target below 44px is a mis-tap waiting to happen */
  .btn, .form-control, .form-select { min-height: 44px; }
  .btn-sm.py-0 { min-height: 34px; }
  .form-check-input { width: 1.15em; height: 1.15em; }

  /* headings and cards breathe a little less */
  .card { margin-bottom: 0; }
  .row.g-3 { --bs-gutter-y: .75rem; }

  /* KPI tiles two-up rather than cramped */
  .kpi .label { letter-spacing: .04em; }

  /* the date and month pickers sit on their own line */
  .card-body > form.d-flex { flex-wrap: wrap; }

  /* safe areas on a notched phone, in landscape too */
  main.container-fluid {
    padding-left: max(.8rem, env(safe-area-inset-left));
    padding-right: max(.8rem, env(safe-area-inset-right));
  }
}

/* ---- installed as an app ----------------------------------
 * No browser chrome, so the top bar is the only thing between the
 * status bar and the page.
 */
@media (display-mode: standalone) {
  .topbar { padding-top: env(safe-area-inset-top); }
  footer { display: none; }
}