/* Keep the whole UI (and native dropdown popups) in light mode so option
   text never renders white-on-white on a dark-mode computer. */
:root { color-scheme: light; }
html, body { color-scheme: light; }
select, option, input, .form-select, .form-control { color-scheme: light; }
/* Belt-and-braces: force readable colours on native <option>s for browsers
   that do honour option styling (Firefox), and a clear hover highlight. */
select option { background-color: #fff; color: #212529; }
select option:checked,
select option:hover { background-color: #0d6efd; color: #fff; }

/* =====================================================================
   JAI PRAKASH — design system (v2.13+)
   A calm, premium look built around the brand terracotta. Additive: it
   refines Bootstrap defaults without changing component markup.
   ===================================================================== */
:root {
  --brand: #cc785c;          /* terracotta */
  --brand-dark: #b3624a;
  --brand-tint: #f6ece8;
  --ink: #1f2328;
  --muted: #6b7280;
  --line: #e7e9ee;
  --bg: #f4f5f7;
  --radius: 12px;
  --shadow-sm: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.05);
  --shadow: 0 4px 16px rgba(16,24,40,.08);
}
body { font-size: 14px; color: var(--ink); background: var(--bg) !important;
  -webkit-font-smoothing: antialiased; }
h1,h2,h3,h4,h5 { letter-spacing: -0.01em; }

/* ---- nav ---- */
.navbar.bg-dark { background: #1c1d21 !important; box-shadow: var(--shadow-sm); }
.navbar-brand.fw-bold { letter-spacing: .02em; }
.navbar-brand.fw-bold::before {
  content: ""; display: inline-block; width: 10px; height: 10px;
  background: var(--brand); border-radius: 3px; margin-right: 8px;
  transform: translateY(-1px); }
.navbar-dark .nav-link { color: rgba(255,255,255,.82); border-radius: 7px;
  padding: 6px 12px !important; transition: background .12s, color .12s; }
.navbar-dark .nav-link:hover { color: #fff; background: rgba(255,255,255,.08); }

/* ---- cards & surfaces ---- */
.card { border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); }
.page-head h4 { font-weight: 700; }

/* ---- buttons ---- */
.btn { border-radius: 9px; font-weight: 500; }
.btn-dark { background: var(--brand); border-color: var(--brand); }
.btn-dark:hover, .btn-dark:focus { background: var(--brand-dark); border-color: var(--brand-dark); }
.btn-outline-primary { color: var(--brand); border-color: var(--brand); }
.btn-outline-primary:hover { background: var(--brand); border-color: var(--brand); }
.link-dark:hover { color: var(--brand) !important; }
a { color: var(--brand-dark); }

/* ---- tables ---- */
.table-wrap { overflow: auto; max-height: calc(100vh - 290px); border-radius: var(--radius); }
.table thead th { background: #fbfbfc; border-bottom: 1px solid var(--line);
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); font-weight: 700; white-space: nowrap; }
.table-wrap thead th { position: sticky; top: 0; z-index: 2; }
.invoices-table td { border-color: #f0f1f4; }
.invoices-table tbody tr:hover { background: var(--brand-tint); }
.invoices-table tbody tr.row-selected { background: #eaf1ff; }
.sort-link { color: inherit; text-decoration: none; display: inline-flex; gap: 4px; }
.sort-link:hover { color: var(--brand-dark); }
.sort-caret { color: var(--brand); font-size: 10px; }

/* ---- subsection code chip ---- */
.code-chip { display: inline-block; font: 600 11px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--brand-tint); color: var(--brand-dark); border: 1px solid #ecd9d1;
  padding: 1px 7px; border-radius: 999px; letter-spacing: .02em; }

/* ---- bulk action bar ---- */
.bulk-bar { display: flex; background: #1c1d21; color: #fff; border-radius: 10px;
  padding: 8px 14px; box-shadow: var(--shadow); }
.bulk-bar .btn-outline-secondary { color: #fff; border-color: rgba(255,255,255,.4); }
.filter-bar { box-shadow: var(--shadow-sm); }
.mini-card { background: #f8f9fb; border: 1px solid var(--line); border-radius: 9px; padding: 10px; }
.empty-state { font-size: 14px; }

/* ---- forms ---- */
.form-control:focus, .form-select:focus {
  border-color: var(--brand); box-shadow: 0 0 0 .2rem rgba(204,120,92,.18); }
.badge.rounded-pill { font-weight: 600; padding: .35em .7em; }

/* ---- searchable select (searchable.js) ---- */
.ss-wrap { position: relative; }
.ss-menu { position: absolute; z-index: 1080; left: 0; right: 0; top: 100%;
  margin-top: 2px; background: #fff; border: 1px solid var(--line, #e7e9ee);
  border-radius: 9px; box-shadow: var(--shadow, 0 4px 16px rgba(16,24,40,.08));
  max-height: 280px; overflow-y: auto; }
.ss-item { padding: 7px 11px; font-size: 13px; cursor: pointer; }
.ss-item:hover, .ss-item.active { background: var(--brand-tint, #f6ece8);
  color: var(--brand-dark, #b3624a); }
.ss-empty { color: #9aa0a6; cursor: default; }
.ss-empty:hover { background: transparent; }

body { font-size: 14px; }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-head { text-align: center; font-size: 11px; font-weight: 600; color: #666; }
.cal-blank { height: 26px; }
.cal-day {
  height: 26px; display: flex; align-items: center; justify-content: center;
  font-size: 12px; border: 1px solid #dee2e6; border-radius: 4px;
  cursor: pointer; user-select: none; background: #fff;
}
.cal-day:hover { background: #eef; }
.cal-day.off { background: #f8d7da; color: #842029; text-decoration: line-through; border-color: #f5c2c7; }
.cal-day.holiday { background: #e2e3e5; color: #6c757d; border-color: #ced4da; cursor: not-allowed; }
.cal-day.ov { background: #cfe2ff; color: #084298; border-color: #9ec5fe; font-weight: 600; }
.cal-day.ov sup { font-size: 8px; }
.day-pop {
  position: absolute; z-index: 1080; width: 190px; padding: 10px;
  background: #fff; border: 1px solid #ced4da; border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
}
.np-card.disabled, .mg-card.disabled { opacity: .55; background: #f8f9fa; }
.np-card.active, .mg-card.active { border-color: #0d6efd; border-width: 2px; }
.np-card, .mg-card { transition: opacity .15s, border-color .15s; }

/* ---- per-office bill cards ---- */
.office-bill { border: 1px solid #dee2e6; border-radius: 10px; overflow: hidden; }
.office-bill > .card-header { border-bottom: 1px solid #eee; }
.office-bill .office-total { color: #0d6efd; }

/* ---- compact product rows ---- */
.prod-row { padding: 8px 4px; border-bottom: 1px dashed #eaecef; }
.prod-row:last-of-type { border-bottom: 0; }
.pr-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pr-name { font-weight: 600; }
.pr-dot { width: 9px; height: 9px; border-radius: 50%; background: #0d6efd; flex: 0 0 auto; }
.pr-dot.mg { background: #6f42c1; }
.pr-rate { white-space: nowrap; }
.pr-cal { max-width: 340px; }
.pr-edit.active { background: #0d6efd; color: #fff; }
.add-prod .input-group-text { background: #fff; font-weight: 600; }

/* ---- modern shared holiday calendar (holcal) ---- */
.holcal { max-width: 360px; }
.hc-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.hc-label { flex: 1; text-align: center; font-weight: 600; font-size: 15px; }
.hc-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.hc-head { text-align: center; font-size: 10.5px; font-weight: 700; color: #9aa0a6;
  text-transform: uppercase; letter-spacing: .04em; padding-bottom: 2px; }
.hc-blank { height: 38px; }
.hc-day { height: 38px; display: flex; align-items: center; justify-content: center;
  border-radius: 9px; font-size: 13px; cursor: pointer; background: #f5f6f8;
  border: 1px solid transparent; transition: background .12s, transform .06s; user-select: none; }
.hc-day:hover { background: #e9ecef; }
.hc-day:active { transform: scale(.94); }
.hc-day.we { color: #b02a37; }
.hc-day.on { background: #dc3545; color: #fff; font-weight: 600; border-color: #dc3545; }
.hc-day.on.we { color: #fff; }
.hc-day.locked { background: #e7e8ea; color: #8a9098; cursor: not-allowed;
  border: 1px dashed #c4c8cd; }
.hc-legend { display: flex; gap: 16px; font-size: 12px; color: #6c757d;
  margin-top: 12px; flex-wrap: wrap; }
.hc-legend i { display: inline-block; width: 13px; height: 13px; border-radius: 4px;
  margin-right: 5px; vertical-align: -2px; }
.hc-sw-on { background: #dc3545; }
.hc-sw-lock { background: #e7e8ea; border: 1px dashed #c4c8cd; }

/* ============================================================
   v2.23 — full visual redesign (loaded last, so it wins)
   A calm, modern, "premium SaaS" look on top of Bootstrap.
   ============================================================ */
:root{
  --brand:#c2613f; --brand-2:#e0875f; --brand-dark:#a44e30; --brand-tint:#f7ece7;
  --ink:#1b1d22; --ink-soft:#3a3f47; --muted:#727a85; --faint:#9aa1ac;
  --line:#e8e9ee; --line-soft:#f0f1f4; --bg:#f3f1ee; --surface:#ffffff;
  --radius:14px; --radius-sm:10px;
  --shadow-xs:0 1px 2px rgba(20,22,28,.05);
  --shadow:0 6px 22px -8px rgba(20,22,28,.16);
  --shadow-lg:0 20px 48px -16px rgba(20,22,28,.30);
}
html,body{ background:var(--bg) !important; }
body{
  font-family:'Inter',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif !important;
  color:var(--ink); font-size:14px; letter-spacing:-0.006em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5,h6,.navbar-brand{ font-family:'Sora','Inter',sans-serif; letter-spacing:-0.02em; color:var(--ink); }
h4{ font-weight:700; } h5,h6{ font-weight:600; }
a{ color:var(--brand-dark); text-decoration:none; }
a:hover{ color:var(--brand); }
.text-muted{ color:var(--muted) !important; }
hr{ border-color:var(--line); opacity:1; }

/* ---- top navigation ---- */
.navbar.bg-dark{
  background:#16171b !important; box-shadow:0 1px 0 rgba(255,255,255,.04), var(--shadow-xs);
  padding-top:.55rem; padding-bottom:.55rem;
}
.navbar-brand.fw-bold{ font-weight:800; font-size:1.12rem; color:#fff !important; display:flex; align-items:center; }
.navbar-brand.fw-bold::before{
  content:""; width:22px; height:22px; margin-right:9px; border-radius:7px;
  background:linear-gradient(135deg,var(--brand) 0%,var(--brand-2) 100%);
  box-shadow:0 2px 8px rgba(194,97,63,.5); transform:none;
}
.navbar-dark .navbar-nav .nav-link{
  color:rgba(255,255,255,.74) !important; font-weight:500; font-size:.9rem;
  border-radius:8px; padding:6px 12px !important; margin:0 1px; transition:.15s;
}
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .show>.nav-link{ color:#fff !important; background:rgba(255,255,255,.09); }
.navbar .dropdown-menu{
  border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow);
  padding:6px; margin-top:8px; font-size:.9rem;
}
.dropdown-item{ border-radius:8px; padding:7px 12px; font-weight:500; color:var(--ink-soft); }
.dropdown-item:hover{ background:var(--brand-tint); color:var(--brand-dark); }
.dropdown-item.active,.dropdown-item:active{ background:var(--brand); color:#fff; }
.navbar .btn-outline-light{ border-color:rgba(255,255,255,.25); border-radius:8px; font-weight:500; }

/* ---- containers / page header ---- */
.container-fluid.px-4{ max-width:1320px; margin:0 auto; padding-top:6px; }
.page-head{ margin-bottom:18px; }
.page-head h4{ font-size:1.45rem; }
.page-head .text-muted{ font-size:.85rem; }

/* ---- cards / surfaces ---- */
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-xs);
}
.card .card-header{
  background:transparent; border-bottom:1px solid var(--line-soft);
  font-family:'Sora',sans-serif; font-weight:600; font-size:.95rem; padding:14px 18px;
}
.card-body{ padding:18px; }
.shadow-sm{ box-shadow:var(--shadow-xs) !important; }
.shadow{ box-shadow:var(--shadow) !important; }

/* ---- buttons ---- */
.btn{ border-radius:10px; font-weight:600; font-size:.875rem; padding:.5rem .95rem;
  letter-spacing:-.01em; transition:transform .04s ease, background .15s, box-shadow .15s; }
.btn:active{ transform:translateY(1px); }
.btn-sm{ border-radius:8px; padding:.3rem .6rem; font-size:.8rem; }
.btn-lg{ border-radius:12px; }
.btn-dark{ background:var(--brand); border-color:var(--brand); box-shadow:0 2px 10px -2px rgba(194,97,63,.5); }
.btn-dark:hover,.btn-dark:focus{ background:var(--brand-dark); border-color:var(--brand-dark); }
.btn-outline-primary{ color:var(--brand-dark); border-color:#e3c4b8; background:#fff; }
.btn-outline-primary:hover{ background:var(--brand); border-color:var(--brand); color:#fff; }
.btn-outline-secondary{ color:var(--ink-soft); border-color:var(--line); background:#fff; }
.btn-outline-secondary:hover{ background:#f3f4f6; color:var(--ink); border-color:#d8dade; }
.btn-outline-danger{ border-color:#f0c8c4; }
.btn-primary{ background:var(--brand); border-color:var(--brand); }
.btn-primary:hover{ background:var(--brand-dark); border-color:var(--brand-dark); }
.link-dark:hover{ color:var(--brand-dark) !important; }

/* ---- forms ---- */
.form-label{ font-weight:600; font-size:.82rem; color:var(--ink-soft); margin-bottom:.25rem; }
.form-control,.form-select{ border-radius:9px; border-color:var(--line); color:var(--ink);
  font-size:.875rem; background-color:#fff; }
.form-control::placeholder{ color:var(--faint); }
.form-control:focus,.form-select:focus{ border-color:var(--brand-2);
  box-shadow:0 0 0 .2rem rgba(194,97,63,.16); }
.input-group-text{ background:#f6f4f2; border-color:var(--line); color:var(--muted); border-radius:9px; }
.form-text{ color:var(--faint); font-size:.78rem; }

/* ---- tables ---- */
.table{ color:var(--ink); }
.table thead th{ background:#faf9f8; border-bottom:1px solid var(--line) !important;
  color:var(--muted); font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; white-space:nowrap; padding:10px 12px; }
.table tbody td{ border-color:var(--line-soft); padding:10px 12px; vertical-align:middle; }
.table-hover tbody tr:hover{ background:var(--brand-tint); }
.table-wrap{ border-radius:var(--radius); overflow:auto; }
.table-wrap .table{ margin-bottom:0; }
.list-group-item{ border-color:var(--line-soft); }
.list-group-flush .list-group-item{ padding:11px 16px; }

/* ---- badges / chips ---- */
.badge{ font-weight:600; letter-spacing:.01em; }
.badge.rounded-pill{ padding:.38em .72em; }
.bg-success{ background:#e7f4ec !important; color:#1c7a44 !important; }
.bg-warning{ background:#fdf0d8 !important; color:#8a5a06 !important; }
.bg-secondary{ background:#eceef1 !important; color:#525a64 !important; }
.code-chip{ background:var(--brand-tint); color:var(--brand-dark); border:1px solid #ecd5cb;
  font:600 11px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace; padding:1px 7px; border-radius:999px; }

/* ---- alerts ---- */
.alert{ border:1px solid var(--line); border-radius:12px; font-size:.88rem; box-shadow:var(--shadow-xs); }
.alert-success{ background:#edf7f0; border-color:#cfe9d9; color:#1c7a44; }
.alert-danger{ background:#fcefee; border-color:#f3d2cf; color:#9a342c; }
.alert-warning{ background:#fdf4e3; border-color:#f0dfbc; color:#875a09; }
.alert-info{ background:#eef4fb; border-color:#d4e3f4; color:#2c5b8a; }

/* ---- modal ---- */
.modal-content{ border:0; border-radius:16px; box-shadow:var(--shadow-lg); }
.modal-header{ border-bottom:1px solid var(--line-soft); }
.modal-footer{ border-top:1px solid var(--line-soft); }
.mini-card{ background:#f8f7f5; border:1px solid var(--line); border-radius:10px; padding:11px; }

/* ---- pagination ---- */
.pagination .page-link{ color:var(--ink-soft); border-color:var(--line); border-radius:8px !important;
  margin:0 2px; font-size:.82rem; }
.pagination .page-item.active .page-link{ background:var(--brand); border-color:var(--brand); }

/* ---- footer ---- */
footer.text-muted{ color:var(--faint) !important; font-size:.78rem; padding:26px 0; }

/* ---- bulk bar / filter bar (bills) ---- */
.bulk-bar{ background:#16171b; color:#fff; border-radius:12px; box-shadow:var(--shadow); }
.filter-bar{ border-radius:var(--radius); }
.sort-link{ color:inherit; } .sort-link:hover{ color:var(--brand-dark); }
.sort-caret{ color:var(--brand); }

/* ---- dashboard stat tiles ---- */
.stat-tile{ position:relative; overflow:hidden; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; box-shadow:var(--shadow-xs); }
.stat-tile .stat-label{ font-size:.78rem; font-weight:600; color:var(--muted);
  text-transform:uppercase; letter-spacing:.05em; }
.stat-tile .stat-value{ font-family:'Sora',sans-serif; font-weight:700; font-size:1.7rem;
  line-height:1.2; margin-top:4px; color:var(--ink); }
.stat-tile .stat-ic{ position:absolute; right:14px; top:14px; width:38px; height:38px;
  border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:18px; }
.stat-tile.t-brand .stat-ic{ background:var(--brand-tint); }
.stat-tile.t-green .stat-ic{ background:#e7f4ec; }
.stat-tile.t-amber .stat-ic{ background:#fdf0d8; }
.stat-tile.t-blue  .stat-ic{ background:#eaf1fb; }
.stat-tile .stat-value.money{ font-size:1.45rem; }

/* ---- login ---- */
.login-shell{ min-height:calc(100vh - 30px); display:flex; align-items:center; justify-content:center; }
.login-card{ width:100%; max-width:400px; border:1px solid var(--line); border-radius:18px;
  box-shadow:var(--shadow-lg); overflow:hidden; background:#fff; }
.login-hero{ background:linear-gradient(135deg,var(--brand) 0%,var(--brand-2) 100%); color:#fff;
  padding:30px 30px 26px; text-align:center; }
.login-hero .mark{ width:54px;height:54px;border-radius:15px;background:rgba(255,255,255,.16);
  display:inline-flex;align-items:center;justify-content:center;margin-bottom:12px;
  border:1px solid rgba(255,255,255,.25); }
.login-hero h4{ color:#fff; font-weight:800; margin:0; letter-spacing:.01em; }
.login-hero p{ color:rgba(255,255,255,.85); margin:2px 0 0; font-size:.85rem; }
.login-body{ padding:26px 30px 28px; }