/* =========================
     THEME VARIABLES (improved contrast)
   ========================= */
:root {
  /* Dark theme */
  --bg: #102f3a;           /* deeper teal-navy for better contrast */
  --card: #15465a;         /* slightly darker than before */
  --ink: #f2f9ff;          /* brighter body text on dark */
  --muted: #c7e0ec;        /* lighter muted text for readability */
  --muted-2: #a8c7d7;      /* axis/labels – keep readable on card */
  --accent: #57cfff;       /* cyan (good pop on dark) */
  --accent-2: #35d49c;     /* teal-green */
  --accent-3: #ffd166;     /* warm amber for emphasis */
  --danger: #ff6b6b;       /* clearer red on dark */
  --border: #2a6c83;       /* stronger delineation */
  --chip: #123948;         /* chip surface (distinct from card) */
  --input: #0f3442;        /* inputs a touch darker than chips */
  --table-stripe: #123e4e; /* zebra rows with clear separation */
}

/* =========================
   LIGHT THEME (matches dark hues)
   ========================= */
[data-theme="light"] {
  --bg: #f2f8fb;           /* airy tint of teal-navy */
  --card: #ffffff;         /* pure white surface */
  --ink: #0f1b2a;          /* strong body text */
  --muted: #486672;        /* cool bluish-grey (secondary text) */
  --muted-2: #3d5c6c;      /* axes/labels, a bit stronger */
  --accent: #02b1d2;       /* cyan (brand-ish), replaces purple */
  --accent-2: #10b981;     /* teal-green */
  --accent-3: #f59e0b;     /* warm amber */
  --danger: #dc2626;       /* standard error */
  --border: #b9d7e4;       /* teal-tinted separator */
  --chip: #e8f6fb;         /* soft cyan chip surface */
  --input: #ffffff;        /* native field white */
  --table-stripe: #e9f6fb; /* subtle cyan zebra row */
}



input.form-control {
  background-color: var(--input) !important;
  color: var(--ink) !important;
  border: 1px solid var(--border);
  padding: 6px 8px;
}

input.form-control::placeholder {
  color: var(--muted);
}

input.form-control:focus {
  background-color: var(--input);
  color: var(--ink);
  border-color: var(--accent);
  box-shadow: none;
}

/* =========================
     LAYOUT
   ========================= */
   
   /* Target Flatpickr's altInput */
input.form-control.input[readonly] {
  background-color: var(--input);
  color: var(--ink);
  border: 1px solid var(--border);
  padding: 4px 8px;
  border-radius: 4px;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

/* Placeholder color */
input.form-control.input::placeholder {
  color: var(--muted);
}

   #fMonthFrom {
  background-color: var(--input-bg);
  color: var(--input-text);
  border: 1px solid var(--border);
  padding: 4px 8px;
  border-radius: 4px;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}
 #fMonthTo {
  background-color: var(--input-bg);
  color: var(--input-text);
  border: 1px solid var(--border);
  padding: 4px 8px;
  border-radius: 4px;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}
body {
  margin: 0;
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
}
.tablepaysum {
  border-collapse: collapse;
  width: 100%;
}

.tablepaysum th,
.tablepaysum td {
  border: 1px solid #2a5b66; /* grid lines */
  padding: 6px 10px;
  text-align: left;
}

.tablepaysum thead {
  display: table;
  width: 100%;
  table-layout: fixed;
  background: #0f3a45; /* header background */
  color: #fff;
}

.tablepaysum tbody {
  display: table;   
  width: 100%;
}

.tablepaysum tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

#reportGroupBar {
  /*position: sticky; */
  top: 0; /* stick to top of scroll container */
  z-index: 20; /* stay above table rows */
  padding: 6px 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--border, #ccc);
}

/* Enhanced Loading Spinner */
body.loading {
  position: relative;
  pointer-events: none; /* Disable interactions while loading */
  opacity: 0.7; /* Dim the page slightly */
}

/* Spinner overlay */
body.loading::after {
  content: '';
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  border: 6px solid rgba(0, 0, 0, 0.1); /* Light background ring */
  border-top: 6px solid #3498db; /* Primary color */
  border-radius: 50%;
  animation: spin 1s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite; /* Smooth, spring-like rotation */
  box-shadow: 0 0 15px rgba(52, 152, 219, 0.5); /* Glow effect */
  z-index: 9999;
}

/* Optional subtle pulsating effect */
body.loading::before {
  content: '';
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(52, 152, 219, 0.1);
  animation: pulse 1.5s ease-in-out infinite;
  z-index: 9998;
}

@keyframes spin {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
  50% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.2; }
}


/* Optional: Ensure charts and content are hidden or dimmed during loading */
body.loading .charts,
body.loading .kpiTotal,
body.loading .kpiNetPayout,
body.loading .kpiBankPayout,
body.loading .kpiPromotionRate,
body.loading .kpiWorkforceProductivity,
body.loading .kpiHeadcountProductivity {
  opacity: 0.3; /* Dim charts and KPIs while loading */
}

/* =========================
   SELECT2 THEME-INTEGRATION
   ========================= */
.select2-container--default .select2-selection--single {
  background-color: var(--input);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: 8px;
  height: 38px;
  transition: border-color 0.2s ease;
}

.select2-container--default .select2-selection--single:hover {
  border-color: var(--accent);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--ink);
  line-height: 36px;
  padding-left: 10px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: var(--muted) transparent transparent transparent;
}

/* Dropdown panel */
.select2-dropdown {
  background-color: var(--card);
  border: 1px solid var(--border);
  color: var(--ink);
  border-radius: 8px;
}

/* Highlighted item when navigating or hovering */
.select2-results__option--highlighted {
  background-color: var(--accent) !important;
  color: var(--bg) !important;
}

/* Normal option styling */
.select2-results__option {
  color: var(--ink);
}

/* Placeholder (when nothing is selected) */
.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--muted);
}

/* Search input in dropdown */
.select2-search--dropdown .select2-search__field {
  background-color: var(--input);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: 6px;
}

/* Scrollbar (for long lists) */
.select2-results__options::-webkit-scrollbar {
  width: 8px;
}
.select2-results__options::-webkit-scrollbar-thumb {
  background-color: var(--border);
  border-radius: 4px;
}
.select2-results__options::-webkit-scrollbar-thumb:hover {
  background-color: var(--accent);
}

.flex {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.btn {
  border: 1px solid var(--border);
  background: var(--chip);
  color: var(--ink);
  padding: 8px 12px;
  border-radius: 10px;
  cursor: pointer;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  background: var(--card);
  border-bottom: 1px solid var(--border);
}

.logo {
  font-weight: bold;
  font-size: 20px;
  color: var(--accent);
}

.tabs {
  display: flex;
  gap: 12px;
}

.tab {
  padding: 8px 14px;
  border-radius: 20px;
  background: var(--chip);
  color: var(--muted);
  cursor: pointer;
  border: 1px solid var(--border);
}

.tab.active {
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--accent);
}

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 20px;
  background: var(--card);
  border-bottom: 1px solid var(--border);
}

.chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--chip);
  border: 1px solid var(--border);
  border-radius: 8px;
}

select, input[type="date"] {
  background: var(--input);
  border: 1px solid var(--border);
  color: var(--ink);
  border-radius: 6px;
  padding: 6px 8px;
}

.pill {
  font-size: 12px;
  color: var(--muted);
}

.btn {
  border: 1px solid var(--border);
  background: var(--chip);
  color: var(--ink);
  border-radius: 20px;
  padding: 6px 10px;
  cursor: pointer;
}

/* KPI Cards */
.cards {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
  padding: 20px;
}
@media (max-width: 1000px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .cards { grid-template-columns: 1fr; }
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
}
.card h3 {
  margin: 0 0 8px;
  font-size: 14px;
  color: var(--muted-2);
}
.card .big {
  font-size: 24px;
  font-weight: bold;
  color: var(--ink);
}

/* Analytics panels */
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: 20px;
}
@media (max-width: 1000px) {
  .grid { grid-template-columns: 1fr; }
}

.panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
}
.panel h2 {
  margin: 0 0 10px;
  font-size: 15px;
  color: var(--muted);
}
.chart {
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted-2);
}

/* Footer */
footer {
  padding: 12px;
  text-align: center;
  font-size: 12px;
  color: var(--muted);
  border-top: 1px solid var(--border);
  margin-top: 20px;
}

/* ============ Drawer (right slide panel) ============ */
#drawerOverlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(1px);
  z-index: 9998;
}
#drawer {
  position: fixed; top: 0; right: 0; height: 100vh; width: 420px;
  background: var(--card); border-left: 1px solid var(--border);
  transform: translateX(110%); transition: transform .25s ease;
  z-index: 9999; display: grid; grid-template-rows: auto 1fr;
}
#drawer.open { transform: translateX(0); }
.drawer-header { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px; border-bottom:1px solid var(--border); }
.drawer-body { padding: 12px; overflow:auto; }
.kv { display:grid; grid-template-columns: 120px 1fr; gap:6px 10px; margin: 10px 0; }
.kv .k { color: var(--muted-2); }
.kv .v { color: var(--ink); }

/* Group header button */
.group-header { background: var(--chip); border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; margin: 8px 0; }
.group-body { margin-bottom: 10px; }

/* Status tags */
.pill.status-Active   { border-color:#22c55e; color:#22c55e; }
.pill.status-Assigned { border-color:#60a5fa; color:#60a5fa; }
.pill.status-Repair   { border-color:#f59e0b; color:#f59e0b; }
.pill.status-Lost     { border-color:#ef4444; color:#ef4444; }
.pill.status-Retired  { border-color:#64748b; color:#64748b; }

/* Column visibility (Assets) */
#page-assets.hide-col-id .col-id,
#page-assets.hide-col-name .col-name,
#page-assets.hide-col-category .col-category,
#page-assets.hide-col-status .col-status,
#page-assets.hide-col-dept .col-dept,
#page-assets.hide-col-assignee .col-assignee,
#page-assets.hide-col-location .col-location,
#page-assets.hide-col-serial .col-serial,
#page-assets.hide-col-last .col-last,
#page-assets.hide-col-next .col-next,
#page-assets.hide-col-issues .col-issues { display:none; }

/* Clickable rows */
.table tbody tr { cursor: pointer; }
.table tbody tr:hover { background: rgba(255,255,255,.04); }
/* --- DataTables-like group toggles --- */
.grouped-table .grp-toggle {
  width: 36px;
  text-align: center;
  user-select: none;
  cursor: pointer;
  font-weight: 700;
  color: var(--muted-2);
}
.grouped-table .grp-toggle:hover { color: var(--ink); }

.grouped-table .group-row {
  background: var(--table-stripe);
  font-weight: 700;
}
.grouped-table .group-title {
  color: var(--ink);
}

.child-row.hidden { display: none; }

/* keep column hide/show working on the grouped table as well */
#page-visitors.hide-col-id .col-id,
#page-visitors.hide-col-name .col-name,
#page-visitors.hide-col-type .col-type,
#page-visitors.hide-col-status .col-status,
#page-visitors.hide-col-dept .col-dept,
#page-visitors.hide-col-host .col-host,
#page-visitors.hide-col-date .col-date,
#page-visitors.hide-col-in .col-in,
#page-visitors.hide-col-out .col-out,
#page-visitors.hide-col-approved .col-approved { display: none; }

/* =========================
   BEAUTIFUL TABLES
   ========================= */

/* container (keeps radius + shadow and scroll on overflow) */
#visitorsTableWrap,
#assetsTableWrap {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card);
  overflow: auto;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}

/* table skeleton */
.table {
  width: 100%;
  min-width: 980px;         /* prevents squish on small screens */
  border-collapse: separate;/* enables border-radius + cell gaps */
  border-spacing: 0;        /* clean grid lines */
  table-layout: auto;
  font-size: 14px;
}

/* header */
.table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0.04)),
    var(--card);
  color: var(--muted);
  font-weight: 700;
  text-align: left;
  padding: 12px 14px;
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
  user-select: none;
}
.table thead th:first-child { border-top-left-radius: 14px; }
.table thead th:last-child  { border-top-right-radius: 14px; }

/* rows & cells */
.table tbody td {
  padding: 12px 14px;
  color: var(--ink);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.table tbody td:last-child { border-right: 0; }

/* zebra + hover */
.table tbody tr:nth-child(even) { background: var(--table-stripe); }
.table tbody tr:hover { background: rgba(255,255,255,.06); }

/* rounded bottom corners */
.table tbody tr:last-child td:first-child  { border-bottom-left-radius: 14px; }
.table tbody tr:last-child td:last-child   { border-bottom-right-radius: 14px; }

/* clickable rows */
.table tbody tr { cursor: pointer; }
.table tbody tr.empty { cursor: default; }
.table tr.empty td { background: transparent !important; }

/* sorting affordance (neutral) */
.table thead th[data-sort] { cursor: pointer; }
.table thead th[data-sort]::after {
  content: "⇅";
  font-size: 12px;
  margin-left: 6px;
  color: var(--muted-2);
}

/* column widths & alignment (tweak as you like) */
.table .col-id       { width: 92px;  font-variant-numeric: tabular-nums; }
.table .col-name     { min-width: 160px; }
.table .col-type     { width: 130px; }
.table .col-status   { width: 140px; }
.table .col-dept     { width: 160px; }
.table .col-host     { width: 160px; }
.table .col-date,
.table .col-in,
.table .col-out      {
  width: 120px;
  white-space: nowrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", monospace;
  font-variant-numeric: tabular-nums;
}
.table .col-approved { width: 110px; text-align: center; }

/* pills/tags (for status/approved, works anywhere) */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 12px;
  line-height: 1.2;
  background: var(--chip);
  color: var(--muted);
}

/* semantic tags */
.tag { composes: pill; }          /* if you prefer .tag */
.tag, .pill[data-variant] { font-weight: 600; }

.pill.success,
.pill[data-variant="success"]   { color: #16a34a; border-color: rgba(22,163,74,.35); background: rgba(22,163,74,.12); }

.pill.info,
.pill[data-variant="info"]      { color: var(--accent); border-color: rgba(56,189,248,.35); background: rgba(56,189,248,.12); }

.pill.warning,
.pill[data-variant="warning"]   { color: var(--accent-3); border-color: rgba(234,179,8,.35); background: rgba(234,179,8,.14); }

.pill.danger,
.pill[data-variant="danger"]    { color: var(--danger); border-color: rgba(248,113,113,.35); background: rgba(248,113,113,.12); }

.pill.neutral,
.pill[data-variant="neutral"]   { color: var(--muted-2); border-color: var(--border); background: var(--chip); }

/* quick helpers for numeric/alignment */
.t-right { text-align: right; }
.t-center { text-align: center; }

/* keep the hide/show checkboxes working */
#page-visitors.hide-col-id .col-id,
#page-visitors.hide-col-name .col-name,
#page-visitors.hide-col-type .col-type,
#page-visitors.hide-col-status .col-status,
#page-visitors.hide-col-dept .col-dept,
#page-visitors.hide-col-host .col-host,
#page-visitors.hide-col-date .col-date,
#page-visitors.hide-col-in .col-in,
#page-visitors.hide-col-out .col-out,
#page-visitors.hide-col-approved .col-approved { display: none; }

/* light theme polish (slightly stronger borders) */
[data-theme="light"] .table tbody td { border-color: rgba(60,81,98,.18); }
[data-theme="light"] .table thead th { border-bottom-color: rgba(60,81,98,.28); }

/* =========================
   VISITORS – controls polish
   ========================= */

/* Layout for the top controls row */
#page-visitors .show-controls {
  display: grid;
  grid-template-columns: 1fr auto; /* search grows, buttons/chip sit to the right */
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}
@media (max-width: 980px) {
  #page-visitors .show-controls {
    grid-template-columns: 1fr; /* stack nicely on small screens */
  }
}

/* Search group */
#page-visitors .searchbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.06)), var(--chip);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 8px 6px 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,.08) inset, 0 1px 0 rgba(255,255,255,.03);
}
#page-visitors .searchbox .pill {
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--muted-2);
  font-weight: 700;
}
#visitorSearch {
  min-width: 260px;
  width: 100%;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--ink);
  padding: 6px 10px;
  border-radius: 999px;
}
#visitorSearch::placeholder { color: color-mix(in oklab, var(--muted) 80%, transparent); }
#visitorSearch:focus-visible {
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 55%, transparent);
}

/* Buttons */
#page-visitors .btn {
  border-radius: 12px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.12)),
    var(--card);
  color: var(--ink);
  transition: transform .06s ease, box-shadow .15s ease, border-color .2s;
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
}
#page-visitors .btn:hover {
  border-color: color-mix(in oklab, var(--accent) 40%, var(--border));
  box-shadow: 0 6px 18px rgba(0,0,0,.20);
}
#page-visitors .btn:active { transform: translateY(1px); }
#btnExportVisitorsCSV {
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.18)),
    color-mix(in oklab, var(--accent) 16%, var(--card));
  border-color: color-mix(in oklab, var(--accent) 35%, var(--border));
}

/* “Columns” chip becomes a segmented multi-select */
#page-visitors .chip:has(.colToggle) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  padding: 10px;
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.08)),
    var(--chip);
  border: 1px solid var(--border);
  box-shadow: 0 4px 18px rgba(0,0,0,.10) inset;
}

/* Label “Columns” itself */
#page-visitors .chip:has(.colToggle) > .pill {
  margin-right: 2px;
  font-weight: 700;
  color: var(--muted-2);
  background: color-mix(in oklab, var(--chip) 70%, var(--card));
}

/* Make each checkbox label a toggle pill */
#page-visitors .chip:has(.colToggle) label {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--input);
  color: var(--ink);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
  user-select: none;
  font-size: 14px;
}
#page-visitors .chip:has(.colToggle) label:hover {
  border-color: color-mix(in oklab, var(--accent) 30%, var(--border));
}

/* Hide the native checkbox without breaking accessibility */
#page-visitors .chip .colToggle {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Checked style using :has() */
#page-visitors .chip label:has(input.colToggle:checked) {
  /* background: color-mix(in oklab, var(--accent) 20%, var(--input)); */
  border-color: color-mix(in oklab, var(--accent) 50%, var(--border));
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--accent) 35%, transparent);
}

/* Focus ring when tabbing to a checkbox */
#page-visitors .chip label:has(input.colToggle:focus-visible) {
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 55%, transparent);
}

/* Space between rows of controls */
#page-visitors .panel .show-controls + .show-controls {
  margin-top: 6px;
}

/* Light theme tweaks */
[data-theme="light"] #page-visitors .searchbox {
  box-shadow: 0 1px 0 rgba(0,0,0,.03), 0 0 0 1px rgba(60,81,98,.12) inset;
}
[data-theme="light"] #page-visitors .chip:has(.colToggle) {
  background: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.05)), var(--chip);
}

/* Visitors filter bar in one row */
#page-visitors .filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-bottom: 14px;
}

#page-visitors .filter-row .chip {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  /* background: var(--chip); */
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px 10px;
}

#page-visitors .filter-row select {
  background: var(--input);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 10px;
  min-width: 130px;
  font-size: 14px;
  color: var(--ink);
}

#page-visitors .filter-row .pill {
  border: 0;
  background: transparent;
  color: var(--muted-2);
  font-weight: 600;
  padding: 0;
}
/* =========================
   Pagination controls
   ========================= */
.pagination {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  margin: 12px 4px 4px;
  font-size: 14px;
}

.pagination button {
  background: var(--chip);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
  color: var(--ink);
  cursor: pointer;
  transition: background .2s, border-color .2s;
}
.pagination button:hover {
  border-color: var(--accent);
}
.pagination button.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.pagination button:disabled {
  opacity: .4;
  cursor: not-allowed;
}
/* Asset Registry filter bar (reuse visitor styles) */
#page-assets .filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-bottom: 14px;
  margin-top: 10px;
}

#page-assets .filter-row .chip {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  /* background: var(--chip); */
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px 10px;
}

#page-assets .filter-row select,
#page-assets .filter-row input[type="text"] {
  background: var(--input);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 10px;
  min-width: 140px;
  font-size: 14px;
  color: var(--ink);
}

#page-assets .filter-row input::placeholder { color: var(--muted); }

#page-assets .filter-row .pill {
  border: 0;
  background: transparent;
  color: var(--muted-2);
  font-weight: 600;
  padding: 0;
}

/* Export button */
#btnExportAssetsCSV {
  margin-left: auto; /* push to right end */
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.12)), var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px 14px;
  color: var(--ink);
  transition: background .15s, border-color .2s, box-shadow .2s;
}
#btnExportAssetsCSV:hover {
  border-color: var(--accent);
  box-shadow: 0 4px 14px rgba(0,0,0,.2);
}
/* =========================
   Asset Filters & Columns
   ========================= */

#page-assets .filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-bottom: 14px;
}

#page-assets .filter-row .chip {
  display: flex;
  align-items: center;
  gap: 6px;
  /* background: var(--chip); */
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px 10px;
}

#page-assets .filter-row input[type="text"],
#page-assets .filter-row select {
  background: var(--input);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 10px;
  min-width: 140px;
  font-size: 14px;
  color: var(--ink);
}
#page-assets .filter-row input::placeholder { color: var(--muted); }

#page-assets .filter-row .pill {
  border: 0;
  background: transparent;
  color: var(--muted-2);
  font-weight: 600;
  padding: 0;
}

/* Columns chip (checkboxes as toggle pills) */
#page-assets .columns-chip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px;
  border-radius: 14px;
  background: var(--chip);
  border: 1px solid var(--border);
  box-shadow: 0 4px 18px rgba(0,0,0,.10) inset;
}

#page-assets .columns-chip label {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--input);
  color: var(--ink);
  cursor: pointer;
  transition: background .15s, border-color .15s, box-shadow .15s;
}

#page-assets .columns-chip label:hover {
  border-color: color-mix(in oklab, var(--accent) 30%, var(--border));
}

/* hide native checkbox but keep accessible */
#page-assets .columns-chip input.assetColToggle {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* checked state styling */
#page-assets .columns-chip label:has(input:checked) {
  /* background: color-mix(in oklab, var(--accent) 20%, var(--input)); */
  border-color: color-mix(in oklab, var(--accent) 50%, var(--border));
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--accent) 35%, transparent);
  font-weight: 400;
}

/* focus ring */
#page-assets .columns-chip label:has(input:focus-visible) {
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 55%, transparent);
}

/* =========================
   Reports filter toolbar
   ========================= */
#page-reports .filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-bottom: 14px;
}

#page-reports .filter-row .chip {
  display: flex;
  align-items: center;
  gap: 6px;
  /* background: var(--chip); */
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px 10px;
}

#page-reports .filter-row input[type="text"],
#page-reports .filter-row select {
  background: var(--input);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 10px;
  min-width: 140px;
  font-size: 14px;
  color: var(--ink);
}
#page-reports .filter-row input::placeholder { color: var(--muted); }

#page-reports .filter-row .pill {
  border: 0;
  background: transparent;
  color: var(--muted-2);
  font-weight: 600;
  padding: 0;
}

/* Export button aligned right */
#btnExportReportsCSV {
  margin-left: auto;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.12)), var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px 14px;
  color: var(--ink);
  transition: background .15s, border-color .2s, box-shadow .2s;
}
#btnExportReportsCSV:hover {
  border-color: var(--accent);
  box-shadow: 0 4px 14px rgba(0,0,0,.2);
}

/* Columns chip (toggle pills) */
#page-reports .columns-chip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px;
  border-radius: 14px;
  background: var(--chip);
  border: 1px solid var(--border);
  box-shadow: 0 4px 18px rgba(0,0,0,.10) inset;
}

#page-reports .columns-chip label {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--input);
  color: var(--ink);
  cursor: pointer;
  transition: background .15s, border-color .15s, box-shadow .15s;
}

#page-reports .columns-chip label:hover {
  border-color: color-mix(in oklab, var(--accent) 30%, var(--border));
}

/* hide native checkbox */
#page-reports .columns-chip input.reportColToggle {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* checked styling */
#page-reports .columns-chip label:has(input:checked) {
  /* background: color-mix(in oklab, var(--accent) 20%, var(--input)); */
  border-color: color-mix(in oklab, var(--accent) 50%, var(--border));
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--accent) 35%, transparent);
  font-weight: 400;
}

/* focus ring */
#page-reports .columns-chip label:has(input:focus-visible) {
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 55%, transparent);
}
/* Add padding only inside table wrappers */
#visitorsTableWrap,
#assetsTableWrap,
#reportsTableWrap {
  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--card);
  overflow: auto; /* keep scroll if needed */
  margin-top: 10px;
}

/* Ensure table itself doesn’t overflow edge */
#visitorsTable,
#assetsTable,
#reportsTable {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--card);
  border-radius: 10px;
}


/* Responsive table wrapper */
.table-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* smooth scrolling on iOS */
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--card);
  padding: 8px;
  margin-top: 12px;
}

/* Keep tables tidy inside */
.table-wrapper table {
  min-width: 720px; /* force horizontal scroll on small screens */
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}

.header>div{
  flex: 1;
}


/* Responsive typography */
@media (max-width: 1000px) {
     #revenueTable thead {
    display: none;
  }
  
  #revenueTable tbody tr {
    display: block;
    margin-bottom: 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px;
    background: var(--card);
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
  }
  
  #revenueTable tbody td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border: none !important;
  }
  
  #revenueTable tbody td:first-child {
    font-weight: 600;
    color: var(--ink);
    padding-bottom: 6px;
  }
  
  #revenueTable tbody td:last-child {
    padding-top: 6px;
  }
  
  #revenueTable tbody td::before {
    content: attr(data-label) ": ";
    color: var(--muted-2);
    font-weight: 600;
  }
  
  #revenueTable input.form-control {
    border-radius: 8px;
    text-align: right;
  }
  .table th,
  .table td {
    padding: 8px 6px;
    font-size: 13px;
  }
}

@media (max-width: 720px) {
  .table th,
  .table td {
    padding: 6px 4px;
    font-size: 12px;
    white-space: nowrap; /* prevent text wrap inside cells */
  }
  /* Hide less important columns automatically (optional) */
  .table .col-remarks,
  .table .col-issues,
  .table .col-serial,
  .table .col-loc {
    display: none;
  }
  
}

/* Filters bar responsive */
.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}
.filter-row .chip {
  flex: 1 1 auto; /* chips shrink on small screens */
  min-width: 140px;
}
@media (max-width: 600px) {
    
    #revenueTable thead {
    display: none;
  }
  
  #revenueTable tbody tr {
    display: block;
    margin-bottom: 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px;
    background: var(--card);
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
  }
  
  #revenueTable tbody td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border: none !important;
  }
  
  #revenueTable tbody td:first-child {
    font-weight: 600;
    color: var(--ink);
    padding-bottom: 6px;
  }
  
  #revenueTable tbody td:last-child {
    padding-top: 6px;
  }
  
  #revenueTable tbody td::before {
    content: attr(data-label) ": ";
    color: var(--muted-2);
    font-weight: 600;
  }
  
  #revenueTable input.form-control {
    border-radius: 8px;
    text-align: right;
  }
  .filter-row {
    flex-direction: column;
    align-items: stretch;
  }
  .filter-row .chip {
    width: 100%;
  }
  .filter-row input,
  .filter-row select {
    width: 100%;
  }
  .tablepaysum {
    display: block;
    overflow-x: auto;
  }
  .tablepaysum thead {
    display: none; /* Hide headers on mobile if stacking */
  }
  .tablepaysum tbody tr {
    display: block;
    margin-bottom: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
  }
  .tablepaysum td {
    display: block;
    padding: 8px;
    text-align: right;
  }
  .tablepaysum td:before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
    text-transform: uppercase;
  }
  .tablepaysum td[data-label] {
    text-align: left;
  }
  .tablepaysum td:nth-of-type(1):before { content: "Period"; }
  .tablepaysum td:nth-of-type(2):before { content: "Employee ID"; }
  .tablepaysum td:nth-of-type(3):before { content: "Earning"; }
  .tablepaysum td:nth-of-type(4):before { content: "Deduction"; }
  .tablepaysum td:nth-of-type(5):before { content: "Statutory"; }


}
#page-reports .columns-chip label:has(input:checked){
  font-size: 14px;
}

th.sortable { cursor: pointer; user-select: none; }
th.sortable .sort { margin-left: .25rem; opacity: .45; }
th.sortable[data-dir="asc"]  .sort::after { content: "▲"; opacity: .9; }
th.sortable[data-dir="desc"] .sort::after { content: "▼"; opacity: .9; }

/* Custom Report drop area */
.drop-wrap {
  border: 2px dashed var(--border);
  border-radius: 12px;
  padding: 8px;
  background: color-mix(in srgb, var(--card) 94%, var(--bg) 6%);
  transition: .15s ease;
}
.drop-wrap.dragover {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 2px var(--accent);
}
.dnd-hint {
  color: var(--muted);
  padding: 10px 8px;
  font-size: .92rem;
}
.myreport-remove {
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.myreport-remove:hover { background: var(--chip); }

#myReportPanel{
  margin-top: 10px;
}
#myReportDrop{
  overflow: auto;
}

#page-reports{
  padding: 10px;
}
/*  */

@media (max-width: 600px) {
.header{
  display: block;
}
.tab{
  padding: 4px 8px;
  font-size: 14px;
}
.logo{
  text-align: center;
  margin: 5px 0;
}
.tabs{
  justify-content: center;
  gap: 5px;
}
.filter-bar .chip{
  width: 100%;
}
.filter-bar .chip select{
  width: calc(100% - 100px);
}
.date-chip{
  display: block;
}
.date-chip input{
  margin: 5px;
}
#themeToggle {
      position: absolute;
    top: 10px;
    right: 10px;
}
#visitorSearch{
  min-width: auto;
}
#page-visitors{
  padding: 10px;
}
#page-visitors .filter-row select{
  min-width: auto;
}
.filter-row .chip{
  min-width: auto;
  max-width: calc(100% - 20px);
}
.filter-row .pill{
  width: 100%;
  max-width: 70px;
}

#myReportPanel{
  margin-top: 10px;
}

.pagination{
  justify-content: flex-start;
}
.tablepaysum {
    display: block;
    overflow-x: auto;
  }
  .tablepaysum thead {
    display: none; /* Hide headers on mobile if stacking */
  }
  .tablepaysum tbody tr {
    display: block;
    margin-bottom: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
  }
  .tablepaysum td {
    display: block;
    padding: 8px;
    text-align: right;
  }
  .tablepaysum td:before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
    text-transform: uppercase;
  }
  .tablepaysum td[data-label] {
    text-align: left;
  }
  .tablepaysum td:nth-of-type(1):before { content: "Period"; }
  .tablepaysum td:nth-of-type(2):before { content: "Employee ID"; }
  .tablepaysum td:nth-of-type(3):before { content: "Earning"; }
  .tablepaysum td:nth-of-type(4):before { content: "Deduction"; }
  .tablepaysum td:nth-of-type(5):before { content: "Statutory"; }

}



/* grouping helpers */
tr[data-hidden="true"]{ display:none; }
th .th-group{
  margin-left:.35rem;
  border:1px solid var(--border-color,#2a2f3a);
  background:transparent; border-radius:.35rem;
  padding:.1rem .3rem; cursor:pointer; opacity:.7;
}
/* don’t block TH’s own click handler for sorting */
th { position: relative; }
th .th-group { position: relative; pointer-events: auto; }
.groupbar{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;margin:.5rem 0 1rem;border:1px solid var(--border-color,#2a2f3a);border-radius:.5rem;background:var(--card-bg,rgba(255,255,255,.02))}
.groupbar .chips{display:flex;gap:.5rem;flex-wrap:wrap}
.groupbar .chip{display:inline-flex;align-items:center;gap:.4rem;padding:.25rem .6rem;border-radius:999px;border:1px dashed var(--border-color,#2a2f3a)}
.groupbar .chip .remove{border:0;background:transparent;cursor:pointer}
th > :not(.th-group) { pointer-events: none; }
th .th-group { pointer-events: auto; } /* keep group button clickable */

#reportsTable thead th :not(.th-group) { pointer-events: none; }
#reportsTable thead th .th-group { pointer-events: auto; } /* keep ⧉ clickable */