/* =====================================================================
   DrClaim Services – UI v2 theme layer
   Loaded AFTER bootstrap.css / gijgo / dataTables. Pure CSS: no markup is
   reordered. Light is the default; dark is opt-in via <html data-theme="dark">.
   ===================================================================== */

:root {
  color-scheme: light;
  --bg: #f4f6fa;
  --surface: #ffffff;
  --surface-alt: #f8f9fb;
  --text: #212529;
  --text-muted: #6c757d;
  --heading: #1a2561;
  --border: #dde3ec;
  --border-strong: #c9d1de;
  --brand: #1a2561;
  --brand-contrast: #ffffff;
  --link: #0062cc;
  --link-hover: #004a9f;
  --primary: #0d6efd;
  --primary-hover: #0b5ed7;
  --focus: rgba(13, 110, 253, .25);
  --input-bg: #ffffff;
  --input-border: #c9d1de;
  --input-text: #212529;
  --input-disabled: #eef1f5;
  --placeholder: #8a94a6;
  --thead-bg: #eef1f6;
  --table-stripe: rgba(16, 24, 40, .025);
  --table-hover: rgba(13, 110, 253, .06);
  --overlay: rgba(255, 255, 255, .85);
  --shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .08);
  --radius: 8px;
  --radius-sm: 6px;
  --success: #198754; --success-bg: #d1e7dd; --success-text: #0f5132;
  --danger: #dc3545;  --danger-bg: #f8d7da;  --danger-text: #842029;
  --warning: #ffc107; --warning-bg: #fff3cd; --warning-text: #664d03;
  --info: #0dcaf0;    --info-bg: #cff4fc;    --info-text: #055160;
  --stats-bg: #e8f4f8; --stats-border: #0275d8;
  --section-bg: #f9f9f9; --section-border: #e0e0e0;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f1420;
  --surface: #171d2d;
  --surface-alt: #1d2437;
  --text: #e6e9f0;
  --text-muted: #9aa3b5;
  --heading: #c7d2ff;
  --border: #2b3449;
  --border-strong: #3a4460;
  --brand: #1a2561;
  --brand-contrast: #ffffff;
  --link: #7fb3ff;
  --link-hover: #a9ccff;
  --primary: #3b82f6;
  --primary-hover: #2f6fdc;
  --focus: rgba(99, 155, 255, .35);
  --input-bg: #121827;
  --input-border: #3a4460;
  --input-text: #e6e9f0;
  --input-disabled: #1a2133;
  --placeholder: #7b8599;
  --thead-bg: #202841;
  --table-stripe: rgba(255, 255, 255, .03);
  --table-hover: rgba(127, 179, 255, .10);
  --overlay: rgba(15, 20, 32, .85);
  --shadow: 0 1px 2px rgba(0, 0, 0, .4);
  --success: #3ddc84; --success-bg: #14301f; --success-text: #9fe3b4;
  --danger: #ff6b6b;  --danger-bg: #3a1a1e;  --danger-text: #f5a3ab;
  --warning: #ffd454; --warning-bg: #3a2f10; --warning-text: #ffd77a;
  --info: #5ad3ea;    --info-bg: #10303a;    --info-text: #8fd7ea;
  --stats-bg: #12283a; --stats-border: #5aa9ff;
  --section-bg: #1a2133; --section-border: #2b3449;
}

/* ---------- base ---------- */
html { -webkit-text-size-adjust: 100%; }
body, html[data-theme] body {        /* beats css/signin.css which loads after this file */
  background-color: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--link); }
a:hover { color: var(--link-hover); }
hr { border-top-color: var(--border); }
h1, h2, h3, h4, h5, h6, .card .card-title, h5.card-title { color: var(--heading); font-weight: 600; letter-spacing: -.01em; }
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
.text-primary { color: var(--heading) !important; }
.text-muted { color: var(--text-muted) !important; }
.text-success { color: var(--success) !important; }
.text-danger { color: var(--danger) !important; }
.text-warning { color: var(--warning-text) !important; }
.lead { color: var(--text); }
strong, b { font-weight: 600; }
::selection { background: var(--focus); }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ---------- navbar (position unchanged, contrast fixed) ---------- */
.navbar.navbar-dark {
  background-color: var(--brand) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06), var(--shadow);
  padding-top: .5rem; padding-bottom: .5rem;
}
.navbar-dark .navbar-nav .nav-link,
.navbar-dark .nav-link { color: rgba(255, 255, 255, .92); }
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus,
.navbar-dark .nav-link:hover,
.navbar-dark .nav-link:focus { color: #fff; }
.navbar-dark .navbar-nav .nav-link { border-radius: var(--radius-sm); padding-left: .75rem; padding-right: .75rem; }
.navbar-dark .navbar-nav .nav-link:hover { background: rgba(255, 255, 255, .08); }
.navbar .form-inline .form-control {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .25);
  color: #fff;
}
.navbar .form-inline .form-control::placeholder { color: rgba(255, 255, 255, .65); }
.navbar .form-inline .form-control:focus {
  background: rgba(255, 255, 255, .18);
  border-color: rgba(255, 255, 255, .6);
  box-shadow: 0 0 0 .2rem rgba(255, 255, 255, .15);
  color: #fff;
}
.navbar .btn-outline-primary {
  color: #fff; border-color: rgba(255, 255, 255, .55);
}
.navbar .btn-outline-primary:hover,
.navbar .btn-outline-primary:focus { background: rgba(255, 255, 255, .14); border-color: #fff; color: #fff; }
.navbar-dark .navbar-toggler { border-color: rgba(255, 255, 255, .35); }

/* ---------- theme toggle (new element, appended after LogOut) ---------- */
.theme-toggle {
  appearance: none; -webkit-appearance: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; margin-left: .5rem;
  border-radius: 999px; border: 1px solid rgba(255, 255, 255, .45);
  background: transparent; color: #fff; cursor: pointer; line-height: 1;
}
.theme-toggle:hover { background: rgba(255, 255, 255, .14); }
.theme-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.theme-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
/* toggle outside the navbar (login footer) */
.theme-toggle.theme-toggle-inline {
  border-color: var(--border-strong); color: var(--text); margin-left: 0;
}
.theme-toggle.theme-toggle-inline:hover { background: var(--surface-alt); }

/* ---------- cards ---------- */
.card {
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  color: var(--text);
}
.card.bg-light { background-color: var(--surface) !important; }
.card-header {
  background-color: var(--surface-alt);
  border-bottom: 1px solid var(--border);
  border-top-left-radius: var(--radius) !important;
  border-top-right-radius: var(--radius) !important;
}
.card-header h1, .card-header h2, .card-header h3 { margin-bottom: 0; }
.card-footer { background-color: var(--surface-alt); border-top-color: var(--border); }
.bg-light { background-color: var(--surface-alt) !important; }
.bg-white { background-color: var(--surface) !important; }
.border { border-color: var(--border) !important; }
.jumbotron { background-color: var(--surface-alt); }
.list-group-item { background-color: var(--surface); border-color: var(--border); color: var(--text); }

/* ---------- forms ---------- */
.form-control, .custom-select {
  background-color: var(--input-bg);
  border-color: var(--input-border);
  color: var(--input-text);
  border-radius: var(--radius-sm);
}
.form-control:focus, .custom-select:focus {
  background-color: var(--input-bg);
  border-color: var(--primary);
  color: var(--input-text);
  box-shadow: 0 0 0 .2rem var(--focus);
}
.form-control::placeholder { color: var(--placeholder); opacity: 1; }
.form-control:disabled, .form-control[readonly] { background-color: var(--input-disabled); color: var(--text-muted); }
select.form-control option { background-color: var(--input-bg); color: var(--input-text); }
.input-group-text { background-color: var(--surface-alt); border-color: var(--input-border); color: var(--text-muted); }
label { font-weight: 500; margin-bottom: .3rem; }
.form-text { color: var(--text-muted) !important; }
.custom-control-label::before { background-color: var(--input-bg); border-color: var(--input-border); }
input[type="date"], input[type="time"] { color-scheme: inherit; }
.form-control-plaintext { color: var(--text); }   /* read-only labels in report.php search rows */

/* ---------- buttons ---------- */
.btn { border-radius: var(--radius-sm); font-weight: 500; }
.btn:focus, .btn.focus { box-shadow: 0 0 0 .2rem var(--focus); }
.btn-primary { background-color: var(--primary); border-color: var(--primary); }
.btn-primary:hover, .btn-primary:focus { background-color: var(--primary-hover); border-color: var(--primary-hover); }
.btn-outline-primary { color: var(--primary); border-color: var(--primary); }
.btn-outline-primary:hover { background-color: var(--primary); border-color: var(--primary); color: #fff; }
:root[data-theme="dark"] .btn-light,
:root[data-theme="dark"] .btn-secondary,
:root[data-theme="dark"] .btn-outline-secondary {
  background-color: var(--surface-alt); border-color: var(--border-strong); color: var(--text);
}
:root[data-theme="dark"] .btn-light:hover,
:root[data-theme="dark"] .btn-secondary:hover,
:root[data-theme="dark"] .btn-outline-secondary:hover { background-color: var(--border); color: #fff; }
:root[data-theme="dark"] .btn-outline-dark { color: var(--text); border-color: var(--border-strong); }
:root[data-theme="dark"] .btn-link { color: var(--link); }

/* ---------- tables ---------- */
.table { color: var(--text); }
.table th, .table td { border-top-color: var(--border); vertical-align: middle; }
.table thead th { border-bottom: 2px solid var(--border-strong); background-color: var(--thead-bg); color: var(--heading); font-weight: 600; }
@media (min-width: 768px) { .table thead th { white-space: nowrap; } }
.table-bordered, .table-bordered th, .table-bordered td { border-color: var(--border); }
.table-striped tbody tr:nth-of-type(odd) { background-color: var(--table-stripe); }
.table-hover tbody tr:hover { background-color: var(--table-hover); color: var(--text); }
.thead-light th { background-color: var(--thead-bg) !important; color: var(--heading) !important; border-color: var(--border) !important; }
:root[data-theme="dark"] .table-light,
:root[data-theme="dark"] .table-light > th,
:root[data-theme="dark"] .table-light > td { background-color: var(--surface-alt); }
:root[data-theme="dark"] .table-success, :root[data-theme="dark"] .table-success > td { background-color: var(--success-bg); }
:root[data-theme="dark"] .table-danger, :root[data-theme="dark"] .table-danger > td { background-color: var(--danger-bg); }
:root[data-theme="dark"] .table-warning, :root[data-theme="dark"] .table-warning > td { background-color: var(--warning-bg); }
:root[data-theme="dark"] .table-info, :root[data-theme="dark"] .table-info > td { background-color: var(--info-bg); }
.table-responsive { -webkit-overflow-scrolling: touch; border-radius: var(--radius-sm); }
.text-compact { font-size: .75rem; }          /* replaces inline font-size:9pt */
.spacer-10 { height: 10px; } .spacer-20 { height: 20px; } .spacer-25 { height: 25px; } .spacer-30 { height: 30px; }

/* ---------- DataTables 1.10 ---------- */
.dataTables_wrapper { color: var(--text); }
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter { color: var(--text-muted); }
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  background: var(--input-bg); color: var(--input-text); border: 1px solid var(--input-border); border-radius: var(--radius-sm); padding: .25rem .5rem;
}
.dataTables_wrapper .dataTables_paginate .paginate_button { color: var(--link) !important; border-radius: var(--radius-sm); }
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--primary); border-color: var(--primary); color: #fff !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: var(--surface-alt); border-color: var(--border); color: var(--text) !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled { color: var(--text-muted) !important; }
/* theme-aware sort indicators instead of the PNG sprites */
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc { background-image: none !important; position: relative; padding-right: 1.4rem; }
table.dataTable thead .sorting::after,
table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::after {
  position: absolute; right: .5rem; top: 50%; transform: translateY(-50%);
  font-size: .75rem; opacity: .45; content: "\2195";
}
table.dataTable thead .sorting_asc::after { content: "\2191"; opacity: 1; }
table.dataTable thead .sorting_desc::after { content: "\2193"; opacity: 1; }
table.dataTable.no-footer { border-bottom-color: var(--border); }
/* DataTables ships its own light stripes (#f9f9f9/#f1f1f1 on .odd/.sorting_1); re-map them to tokens */
table.dataTable tbody tr,
table.dataTable.stripe tbody tr.even, table.dataTable.display tbody tr.even { background-color: transparent !important; }
table.dataTable.stripe tbody tr.odd, table.dataTable.display tbody tr.odd,
table.dataTable tbody tr.odd { background-color: var(--table-stripe) !important; }
table.dataTable tbody tr > .sorting_1, table.dataTable tbody tr > .sorting_2, table.dataTable tbody tr > .sorting_3 { background-color: transparent !important; }
table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover,
table.dataTable.hover tbody tr:hover > .sorting_1, table.dataTable.display tbody tr:hover > .sorting_1 { background-color: var(--table-hover) !important; }
.fixedHeader-floating, .fixedHeader-locked { background-color: var(--thead-bg) !important; }
.fixedHeader-floating th { background-color: var(--thead-bg) !important; }

/* ---------- pagination (server-side) ---------- */
.page-link { background-color: var(--surface); border-color: var(--border); color: var(--link); }
.page-link:hover { background-color: var(--surface-alt); border-color: var(--border); color: var(--link-hover); }
.page-item.active .page-link { background-color: var(--primary); border-color: var(--primary); color: #fff; }
.page-item.disabled .page-link { background-color: var(--surface); border-color: var(--border); color: var(--text-muted); }

/* ---------- alerts ---------- */
.alert { border-radius: var(--radius-sm); border-width: 1px; }
.alert-success { background-color: var(--success-bg); border-color: var(--success-bg); color: var(--success-text); }
.alert-danger  { background-color: var(--danger-bg);  border-color: var(--danger-bg);  color: var(--danger-text); }
.alert-warning { background-color: var(--warning-bg); border-color: var(--warning-bg); color: var(--warning-text); }
.alert-info    { background-color: var(--info-bg);    border-color: var(--info-bg);    color: var(--info-text); }
:root[data-theme="dark"] .alert-primary { background-color: #16294a; border-color: #16294a; color: #b9d2ff; }
:root[data-theme="dark"] .alert-secondary,
:root[data-theme="dark"] .alert-light { background-color: var(--surface-alt); border-color: var(--border); color: var(--text); }
.alert .close, .close { color: inherit; text-shadow: none; opacity: .6; }
.alert .close:hover, .close:hover { color: inherit; opacity: 1; }
.badge-light { background-color: var(--surface-alt); color: var(--text); }
:root[data-theme="dark"] .badge-secondary { background-color: var(--border-strong); }

/* ---------- dropdowns / modals / popovers ---------- */
.dropdown-menu { background-color: var(--surface); border-color: var(--border); box-shadow: 0 8px 24px rgba(16, 24, 40, .14); border-radius: var(--radius-sm); }
.dropdown-item { color: var(--text); }
.dropdown-item:hover, .dropdown-item:focus { background-color: var(--surface-alt); color: var(--text); }
.dropdown-divider { border-top-color: var(--border); }
.modal-content { background-color: var(--surface); border-color: var(--border); color: var(--text); border-radius: var(--radius); }
.modal-header, .modal-footer { border-color: var(--border); }
.modal-backdrop.show { opacity: .6; }
.popover, .tooltip-inner { background-color: var(--surface); color: var(--text); border-color: var(--border); }
.nav-tabs { border-bottom-color: var(--border); }
.nav-tabs .nav-link.active { background-color: var(--surface); border-color: var(--border) var(--border) var(--surface); color: var(--text); }

/* ---------- gijgo datepicker (bootstrap 4 skin) ---------- */
.gj-picker.gj-picker-bootstrap { background-color: var(--surface); border-color: var(--border); color: var(--text); box-shadow: 0 8px 24px rgba(16, 24, 40, .18); }
.gj-picker-bootstrap [role="header"] { background-color: var(--brand); color: #fff; }
.gj-picker-bootstrap [role="header"] i, .gj-picker-bootstrap [role="header"] div { color: #fff; }
.gj-picker-bootstrap table tr th div, .gj-picker-bootstrap table tr td div { color: var(--text); }
.gj-picker-bootstrap table tr td.gj-cursor-pointer div:hover { background-color: var(--surface-alt); }
.gj-picker-bootstrap table tr td.other-month div, .gj-picker-bootstrap table tr td.disabled div { color: var(--text-muted); }
.gj-picker-bootstrap table tr td.today div { color: var(--primary); font-weight: 600; }
.gj-picker-bootstrap table tr td.selected.gj-cursor-pointer div { background-color: var(--primary); color: #fff; }
.gj-picker-bootstrap [role="footer"] button.btn { color: var(--link); }
.gj-datepicker-bootstrap .input-group-append .btn,
.gj-datepicker-bootstrap .input-group-append .input-group-text { background-color: var(--surface-alt); border-color: var(--input-border); color: var(--text-muted); }
.gj-datepicker-bootstrap .input-group-append .gj-icon { color: var(--text-muted); }

/* ---------- page-specific tokens (replace inline <style> colors) ---------- */
.search-section { background-color: var(--section-bg); border-color: var(--section-border); }
.search-title { color: var(--text); }
.search-description { color: var(--text-muted); }
.report-stats { background-color: var(--stats-bg); border-left-color: var(--stats-border); color: var(--text); }
.overdue-row { color: var(--danger); }
.pending-row { color: var(--warning-text); }
#loadingOverlay { background: var(--overlay) !important; }
#loadingOverlay p { color: var(--text) !important; }
#loadingOverlay .text-muted { color: var(--text-muted) !important; }
/* black icon PNGs become visible on dark surfaces */
:root[data-theme="dark"] img[src*="iconmonstr"] { filter: invert(1) hue-rotate(180deg); }

/* ---------- login ---------- */
.form-signin h2 { color: var(--heading); }
.form-signin .form-control { font-size: 1rem; }
.form-signin .btn-block { margin-top: .5rem; }
.login-meta { display: flex; flex-direction: column; align-items: center; gap: .5rem; }

/* ---------- v2 preview banner (removed at promotion) ---------- */
.v2-banner { background: #fff3cd; color: #664d03; font-size: .8rem; text-align: center; padding: .3rem 1rem; }
.v2-banner a { color: inherit; text-decoration: underline; }
:root[data-theme="dark"] .v2-banner { background: #3a2f10; color: #ffd77a; }

/* ---------- responsive (no reordering, only stacking/sizing) ---------- */
.container { padding-left: 16px; padding-right: 16px; }
@media (max-width: 991.98px) {
  .navbar .navbar-collapse { padding: .5rem 0; }
  .navbar .form-inline { width: 100%; margin: .5rem 0; flex-wrap: nowrap; }
  .navbar .form-inline .form-control { flex: 1 1 auto; margin-right: .5rem !important; }
  .navbar-collapse > .nav-link { padding: .75rem .75rem; }
  .theme-toggle { margin: .25rem 0 .25rem .75rem; }
}
@media (max-width: 767.98px) {
  h1 { font-size: 1.6rem; }
  h2 { font-size: 1.3rem; }
  .card-body { padding: 1rem; }
  .card-header { padding: .75rem 1rem; }
  .form-row > .col, .form-row > [class*="col-"] { padding-right: 8px; padding-left: 8px; }
  .dataTables_wrapper .dataTables_paginate .paginate_button { padding: .35em .7em; }
}
@media (max-width: 575.98px) {
  .form-control, .custom-select, .btn { min-height: 44px; }
  .btn-sm, .form-control-sm { min-height: 36px; }
  .btn-block-xs { display: block; width: 100%; }
  .table { font-size: .875rem; }
  .table-responsive table { min-width: 0; }
  .table-sm th, .table-sm td { padding: .25rem; }
  .container.table-responsive { padding-left: 0; padding-right: 0; }
  .form-signin { padding: 15px 0; }
}
@media (pointer: coarse) {
  .nav-link, .dropdown-item { padding-top: .6rem; padding-bottom: .6rem; }
}

/* ---------- print: always light, hide chrome ---------- */
@media print {
  :root, :root[data-theme="dark"] {
    --bg: #fff; --surface: #fff; --surface-alt: #fff; --text: #000; --text-muted: #444;
    --border: #999; --thead-bg: #eee; --heading: #000;
  }
  body { background: #fff !important; color: #000 !important; }
  .navbar, .theme-toggle, .v2-banner, .dataTables_paginate, .dataTables_info { display: none !important; }
  .card { box-shadow: none; border-color: #999; }
}

/* rows highlighted in brand blue (was inline color:#0062CC) */
.row-highlight, .row-highlight td { color: var(--link); }