/* =====================================================================
   BCC Volunteer CRM theme — Byron Community Centre branding
   Palette from byroncentre.com.au. Built on Tabler (https://tabler.io).
   To re-skin the CRM, change the variables in the first block.
   ===================================================================== */
:root {
  /* Brand palette */
  --bcc-navy: #0d3e59;
  --bcc-navy-dark: #083147;
  --bcc-navy-light: #155578;
  --bcc-green: #54be90;
  --bcc-green-button: #3f9f76;      /* slightly deeper than brand green so white button text stays readable */
  --bcc-green-button-hover: #2f8a63;
  --bcc-green-text: #276f4f;
  --bcc-teal: #00768c;
  --bcc-teal-text: #005a6b;
  --bcc-pink: #d65887;
  --bcc-orange: #f8991f;
  --bcc-orange-text: #8f5104;
  --bcc-red: #df4d48;
  --bcc-red-text: #b3322e;
  --bcc-sand: #f7f0e9;
  --bcc-cream: #fbf7f4;
  --bcc-ink: #292c32;

  /* Roles */
  --bcc-primary: var(--bcc-green);
  --bcc-primary-rgb: 84, 190, 144;
  --bcc-sidebar-bg: var(--bcc-navy);
  --bcc-sidebar-active: rgba(255, 255, 255, 0.10);
  --bcc-page-bg: var(--bcc-cream);
  --bcc-radius: 8px;
  --bcc-font: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bcc-chart-primary: var(--bcc-teal);

  /* Activity status colours: brand-matched but still clearly distinct */
  --bcc-status-green: var(--bcc-green);
  --bcc-status-amber: var(--bcc-orange);
  --bcc-status-blue: var(--bcc-teal);
  --bcc-status-red: var(--bcc-red);
  --bcc-status-grey: #9aa4ae;

  /* Chart series colours for category breakdowns (departments, roles) */
  --bcc-chart-1: #00768c;
  --bcc-chart-2: #54be90;
  --bcc-chart-3: #f8991f;
  --bcc-chart-4: #d65887;
  --bcc-chart-5: #155578;
  --bcc-chart-6: #df4d48;
  --bcc-chart-7: #85cfcd;
  --bcc-chart-8: #9aa4ae;

  /* Map onto Tabler */
  --tblr-primary: var(--bcc-primary);
  --tblr-primary-rgb: var(--bcc-primary-rgb);
  --tblr-primary-fg: #fff;
  --tblr-success: var(--bcc-green);
  --tblr-success-rgb: 84, 190, 144;
  --tblr-warning: var(--bcc-orange);
  --tblr-warning-rgb: 248, 153, 31;
  --tblr-danger: var(--bcc-red);
  --tblr-danger-rgb: 223, 77, 72;
  --tblr-green: var(--bcc-green);
  --tblr-green-rgb: 84, 190, 144;
  --tblr-orange: var(--bcc-orange);
  --tblr-orange-rgb: 248, 153, 31;
  --tblr-blue: var(--bcc-teal);
  --tblr-blue-rgb: 0, 118, 140;
  --tblr-red: var(--bcc-red);
  --tblr-red-rgb: 223, 77, 72;
  --tblr-link-color: var(--bcc-teal);
  --tblr-link-color-rgb: 0, 118, 140;
  --tblr-link-hover-color: var(--bcc-navy-light);
  --tblr-link-hover-color-rgb: 21, 85, 120;
  --tblr-body-bg: var(--bcc-page-bg);
  --tblr-body-color: var(--bcc-ink);
  --tblr-border-radius: var(--bcc-radius);
  --tblr-font-sans-serif: var(--bcc-font);
  --tblr-body-font-family: var(--bcc-font);
}

body { font-family: var(--bcc-font); }

h1, h2, h3, .h1, .h2, .h3, .page-title, .card-title, .empty-title { color: var(--bcc-navy); }

/* ---------- buttons ---------- */
.btn-primary {
  --tblr-btn-color: #fff;
  --tblr-btn-bg: var(--bcc-green-button);
  --tblr-btn-border-color: transparent;
  --tblr-btn-hover-color: #fff;
  --tblr-btn-hover-bg: var(--bcc-green-button-hover);
  --tblr-btn-hover-border-color: transparent;
  --tblr-btn-active-color: #fff;
  --tblr-btn-active-bg: var(--bcc-green-button-hover);
  --tblr-btn-active-border-color: transparent;
  --tblr-btn-disabled-color: #fff;
  --tblr-btn-disabled-bg: var(--bcc-green-button);
  font-weight: 600;
}
.btn-danger {
  --tblr-btn-bg: var(--bcc-red-text);
  --tblr-btn-hover-bg: #962a26;
  --tblr-btn-active-bg: #962a26;
  --tblr-btn-disabled-bg: var(--bcc-red-text);
  font-weight: 600;
}
.btn-outline-success {
  --tblr-btn-color: var(--bcc-green-text);
  --tblr-btn-border-color: var(--bcc-green-button);
  --tblr-btn-hover-bg: var(--bcc-green-button);
  --tblr-btn-hover-border-color: var(--bcc-green-button);
  --tblr-btn-active-bg: var(--bcc-green-button);
  --tblr-btn-active-border-color: var(--bcc-green-button);
}
.btn-outline-danger {
  --tblr-btn-color: var(--bcc-red-text);
  --tblr-btn-border-color: var(--bcc-red);
  --tblr-btn-hover-bg: var(--bcc-red-text);
  --tblr-btn-hover-border-color: var(--bcc-red-text);
  --tblr-btn-active-bg: var(--bcc-red-text);
  --tblr-btn-active-border-color: var(--bcc-red-text);
}
.btn-outline-primary {
  --tblr-btn-color: var(--bcc-green-text);
  --tblr-btn-border-color: var(--bcc-green-button);
  --tblr-btn-hover-color: #fff;
  --tblr-btn-hover-bg: var(--bcc-green-button);
  --tblr-btn-hover-border-color: var(--bcc-green-button);
}

/* ---------- colour utilities (brand shades, readable text) ---------- */
.bg-primary, .bg-green, .bg-success { background-color: var(--bcc-green) !important; }
.bg-orange, .bg-warning { background-color: var(--bcc-orange) !important; }
.bg-blue { background-color: var(--bcc-teal) !important; }
.bg-red, .bg-danger { background-color: var(--bcc-red) !important; }
.text-green-fg, .text-red-fg, .text-orange-fg, .text-blue-fg, .text-primary-fg { color: #fff !important; }

.bg-primary-lt, .bg-green-lt { background-color: #e5f5ee !important; color: var(--bcc-green-text) !important; }
.bg-orange-lt { background-color: #fef0dd !important; color: var(--bcc-orange-text) !important; }
.bg-blue-lt { background-color: #d9eaee !important; color: var(--bcc-teal-text) !important; }
.bg-red-lt { background-color: #fae4e4 !important; color: var(--bcc-red-text) !important; }
.bg-purple-lt { background-color: #f8e3eb !important; color: #9e2f5a !important; }   /* brand pink */
.bg-teal-lt { background-color: #e2eef3 !important; color: var(--bcc-navy-light) !important; }
.bg-yellow-lt { background-color: #fdf1d2 !important; color: #7a5a00 !important; }

.text-green { color: var(--bcc-green-text) !important; }
.text-red { color: var(--bcc-red-text) !important; }
.text-orange { color: var(--bcc-orange-text) !important; }
.text-blue { color: var(--bcc-teal-text) !important; }

/* ---------- brand ---------- */
/* Logos: img/bcc-logo-light.png (white lettering, for the navy sidebar) and
   img/bcc-logo-dark.png (teal/navy lettering, for light pages). */
.brand { display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; text-decoration: none; color: inherit; }
.brand:hover { text-decoration: none; }
.brand-logo { display: block; height: 3rem; width: auto; }
.brand-sub {
  font-size: .66rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255, 255, 255, .6); padding-left: .15rem;
}
@media (max-width: 991.98px) {
  .brand { flex-direction: row; align-items: center; gap: .6rem; }
  .brand-logo { height: 2.25rem; }
}
.auth-logo { display: block; margin: 0 auto; width: 16rem; max-width: 80%; height: auto; }
.auth-logo-sm { width: 11rem; }
.kiosk-subtitle { color: var(--bcc-navy); font-weight: 600; font-size: 1.05rem; }

/* ---------- sidebar ---------- */
.navbar-vertical[data-bs-theme="dark"] {
  --tblr-navbar-bg: var(--bcc-sidebar-bg);
  background: var(--bcc-sidebar-bg) !important;
}
.navbar-vertical .navbar-nav { padding-left: .5rem; padding-right: .5rem; }
.navbar-vertical .nav-link:hover { background: var(--bcc-sidebar-active); border-radius: 6px; }
.navbar-vertical .nav-item.active > .nav-link {
  background: var(--bcc-sidebar-active);
  border-radius: 6px;
  box-shadow: inset 3px 0 0 var(--bcc-green);
}
.navbar-vertical .nav-item.active > .nav-link .nav-link-icon { color: var(--bcc-green); }
.nav-heading {
  list-style: none; padding: 1.1rem .75rem .35rem;
  font-size: .68rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
}

/* Heart-colour accent line under the top bar */
.page-wrapper > header.navbar { border-bottom: 0; box-shadow: none; position: relative; }
.page-wrapper > header.navbar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, var(--bcc-pink), var(--bcc-orange), var(--bcc-red), var(--bcc-green));
}

.topbar-search { width: 100%; max-width: 28rem; }

/* ---------- small components ---------- */
.card { border-color: #ece5dd; }
.subheader { color: var(--bcc-teal); font-weight: 600; }
.badge-dot { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; vertical-align: middle; }
.kpi-progress { height: .5rem; gap: 2px; background: transparent; }
.kpi-progress .progress-bar { border-radius: 2px; }
.chart-lg { min-height: 280px; }
.empty-icon-glyph { font-size: 2.5rem; }
.pre-line { white-space: pre-line; }
.cell-email { max-width: 220px; }
.w-33 { width: 33%; }

.sort-link { color: inherit; text-decoration: none; display: inline-flex; align-items: center; }
.sort-link:hover, .sort-link.active { color: var(--bcc-teal); text-decoration: none; }

tr.row-link { cursor: pointer; }

.card-active { border-color: var(--bcc-green); box-shadow: 0 0 0 1px var(--bcc-green) inset; }

.role-chip { display: inline-flex; align-items: center; gap: .25rem; font-weight: 500; }
.role-chip-x { border: 0; background: none; padding: 0 0 0 .15rem; line-height: 1; color: inherit; opacity: .55; cursor: pointer; }
.role-chip-x:hover { opacity: 1; color: var(--bcc-red-text); }

.nav-tabs .nav-link.active { color: var(--bcc-navy); border-bottom-color: var(--bcc-green); }

/* ---------- volunteer activity timeline ---------- */
.crm-timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.crm-timeline::before {
  content: ""; position: absolute; left: 1rem; top: .5rem; bottom: .5rem;
  width: 2px; background: var(--tblr-border-color);
}
.crm-timeline > li { position: relative; display: flex; gap: .9rem; padding-bottom: 1.1rem; }
.crm-timeline-icon {
  position: relative; z-index: 1; flex: 0 0 2rem; width: 2rem; height: 2rem;
  border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 4px var(--tblr-bg-surface, #fff);
}
.crm-timeline-body { flex: 1; min-width: 0; padding-top: .25rem; }

/* ---------- kiosk & sign-in pages ---------- */
.kiosk-page, .auth-page {
  background:
    radial-gradient(60rem 30rem at 0% 0%, rgba(214, 88, 135, .10), transparent 60%),
    radial-gradient(50rem 30rem at 100% 0%, rgba(248, 153, 31, .12), transparent 60%),
    var(--bcc-cream);
}
/* Volunteer check-in shortcut under the staff sign-in form */
.checkin-callout {
  display: block; text-decoration: none; color: inherit;
  border: 1px solid rgba(248, 153, 31, .45); border-left: 5px solid var(--bcc-orange);
  background: linear-gradient(90deg, rgba(248, 153, 31, .12), rgba(214, 88, 135, .06)), var(--tblr-bg-surface, #fff);
  transition: transform .15s ease, box-shadow .15s ease;
}
.checkin-callout:hover, .checkin-callout:focus-visible {
  text-decoration: none; color: inherit; transform: translateY(-1px);
  box-shadow: 0 .5rem 1.25rem rgba(248, 153, 31, .22);
}
.checkin-callout:focus-visible { outline: 2px solid var(--bcc-orange); outline-offset: 2px; }
.checkin-callout-icon { background: rgba(248, 153, 31, .18); color: var(--bcc-orange-text); font-size: 1.6rem; }
.checkin-callout-title { font-weight: 700; font-size: 1.05rem; color: var(--bcc-navy); }
.checkin-callout-btn { white-space: nowrap; }
:root[data-bs-theme="dark"] .checkin-callout-icon { color: #fbbd6b; }
:root[data-bs-theme="dark"] .checkin-callout-title { color: var(--bcc-heading); }

.kiosk-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.kiosk-toggle .btn { padding-top: 1rem; padding-bottom: 1rem; font-size: 1.1rem; font-weight: 600; }
.kiosk-result-icon { font-size: 5rem; line-height: 1; }

/* ---------- QR sheet ---------- */
.qr-code { width: 220px; max-width: 100%; }
.qr-code svg { width: 100%; height: auto; display: block; }

/* ---------- clickable status badge ---------- */
.status-picker-toggle {
  display: inline-flex; align-items: center; gap: .2rem;
  padding: .1rem .2rem; margin: -.1rem -.2rem;
  border: 0; border-radius: 6px; background: transparent; color: inherit; cursor: pointer;
}
.status-picker-toggle:hover, .status-picker-toggle[aria-expanded="true"] { background: rgba(var(--bcc-primary-rgb), .12); }
.status-picker-toggle:focus-visible { outline: 2px solid var(--bcc-green); outline-offset: 1px; }
.status-picker-caret { font-size: .8rem; opacity: .45; }
.status-picker-toggle:hover .status-picker-caret { opacity: .9; }
.status-picker-pin { font-size: .8rem; color: var(--tblr-secondary); }
.status-picker .dropdown-item { display: flex; align-items: center; min-width: 12rem; }
.status-picker .dropdown-item.active { background: rgba(var(--bcc-primary-rgb), .14); color: inherit; font-weight: 600; }

/* ---------- page header actions ---------- */
.page-actions:empty { display: none; }

/* Phones: buttons get their own row under the title, full width, main action first */
@media (max-width: 767.98px) {
  .page-actions .btn-list { display: grid; grid-template-columns: 1fr; gap: .5rem; margin: 0; }
  .page-actions .btn-list > * { width: 100%; margin: 0; }
  .page-actions .btn-list > .btn-primary { order: -1; }
  .page-actions .btn-list > .dropdown { width: auto; justify-self: end; }
  .page-actions .btn-list form,
  .page-actions .btn-list form .form-control { width: 100%; }
  .page-actions > .btn { width: 100%; }
}

/* ---------- two-factor authentication ---------- */
.tfa-steps { padding-left: 1.2rem; margin-bottom: 1.25rem; }
.tfa-steps li { margin-bottom: .9rem; }
.tfa-qr { width: 200px; max-width: 100%; padding: 10px; background: #fff; border-radius: 10px; border: 1px solid #e6e9ee; }
.tfa-qr svg { display: block; width: 100%; height: auto; }
.tfa-secret { display: inline-block; margin-top: .35rem; padding: .35rem .6rem; font-size: .95rem; letter-spacing: .06em; word-break: break-all; }
.tfa-code { font-size: 1.6rem; letter-spacing: .3em; font-variant-numeric: tabular-nums; }
.tfa-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.tfa-codes code { display: block; text-align: center; padding: .5rem; font-size: 1rem; letter-spacing: .05em; }

/* ---------- light / dark toggle ---------- */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer;
}
.theme-toggle:hover { background: rgba(var(--bcc-primary-rgb), .14); }
.theme-toggle:focus-visible { outline: 2px solid var(--bcc-green); outline-offset: 2px; }
.theme-toggle .ti { font-size: 1.3rem; }
.theme-icon-sun { display: none; }
:root[data-bs-theme="dark"] .theme-icon-moon { display: none; }
:root[data-bs-theme="dark"] .theme-icon-sun { display: inline-block; }

/* Logos on light pages: show the white-lettered version in dark mode */
.logo-for-dark { display: none !important; }
:root[data-bs-theme="dark"] .logo-for-dark { display: block !important; }
:root[data-bs-theme="dark"] .logo-for-light { display: none !important; }

/* =====================================================================
   Dark theme — deep navy surfaces from the brand palette
   ===================================================================== */
:root[data-bs-theme="dark"] {
  --bcc-page-bg: #0a1f2b;
  --bcc-surface: #0f2c3b;
  --bcc-surface-2: #0c2533;
  --bcc-border: #1d4254;
  --bcc-text: #dbe7ec;
  --bcc-text-muted: #93aab4;
  --bcc-heading: #eef5f7;
  --bcc-aqua: #85cfcd;
  --bcc-sidebar-bg: #061a24;
  --bcc-chart-primary: #85cfcd;
  --bcc-status-blue: #2fa3b8;

  --bcc-chart-1: #2fa3b8;
  --bcc-chart-2: #6fd3a6;
  --bcc-chart-3: #ffad4a;
  --bcc-chart-4: #e97ba6;
  --bcc-chart-5: #5e9ec9;
  --bcc-chart-6: #ef726d;
  --bcc-chart-7: #a8e0de;
  --bcc-chart-8: #aab6c0;

  --tblr-body-bg: var(--bcc-page-bg);
  --tblr-body-color: var(--bcc-text);
  --tblr-emphasis-color: var(--bcc-heading);
  --tblr-bg-surface: var(--bcc-surface);
  --tblr-bg-surface-secondary: var(--bcc-surface-2);
  --tblr-bg-surface-tertiary: var(--bcc-surface-2);
  --tblr-bg-forms: var(--bcc-surface-2);
  --tblr-border-color: var(--bcc-border);
  --tblr-border-color-translucent: rgba(255, 255, 255, .08);
  --tblr-link-color: var(--bcc-aqua);
  --tblr-link-color-rgb: 133, 207, 205;
  --tblr-link-hover-color: #b5e3e1;
  --tblr-link-hover-color-rgb: 181, 227, 225;
}

:root[data-bs-theme="dark"] h1, :root[data-bs-theme="dark"] h2, :root[data-bs-theme="dark"] h3,
:root[data-bs-theme="dark"] .h1, :root[data-bs-theme="dark"] .h2, :root[data-bs-theme="dark"] .h3,
:root[data-bs-theme="dark"] .page-title, :root[data-bs-theme="dark"] .card-title,
:root[data-bs-theme="dark"] .empty-title, :root[data-bs-theme="dark"] .kiosk-subtitle,
:root[data-bs-theme="dark"] .nav-tabs .nav-link.active { color: var(--bcc-heading); }

:root[data-bs-theme="dark"] .card { border-color: var(--bcc-border); }
:root[data-bs-theme="dark"] .subheader,
:root[data-bs-theme="dark"] .sort-link:hover,
:root[data-bs-theme="dark"] .sort-link.active { color: var(--bcc-aqua); }

:root[data-bs-theme="dark"] .bg-primary-lt,
:root[data-bs-theme="dark"] .bg-green-lt { background-color: rgba(84, 190, 144, .16) !important; color: #7fd6b0 !important; }
:root[data-bs-theme="dark"] .bg-orange-lt { background-color: rgba(248, 153, 31, .16) !important; color: #fbbd6b !important; }
:root[data-bs-theme="dark"] .bg-blue-lt { background-color: rgba(47, 163, 184, .18) !important; color: #8fd4e0 !important; }
:root[data-bs-theme="dark"] .bg-red-lt { background-color: rgba(223, 77, 72, .18) !important; color: #f29a96 !important; }
:root[data-bs-theme="dark"] .bg-purple-lt { background-color: rgba(214, 88, 135, .18) !important; color: #eba2bd !important; }
:root[data-bs-theme="dark"] .bg-teal-lt { background-color: rgba(21, 85, 120, .45) !important; color: #a9cfe3 !important; }
:root[data-bs-theme="dark"] .bg-yellow-lt { background-color: rgba(222, 174, 18, .16) !important; color: #f0cf6a !important; }
:root[data-bs-theme="dark"] .bg-secondary-lt { background-color: rgba(255, 255, 255, .08) !important; color: #b9cad2 !important; }
:root[data-bs-theme="dark"] .bg-blue { background-color: var(--bcc-status-blue) !important; }

:root[data-bs-theme="dark"] .text-green { color: #7fd6b0 !important; }
:root[data-bs-theme="dark"] .text-red { color: #f29a96 !important; }
:root[data-bs-theme="dark"] .text-orange { color: #fbbd6b !important; }
:root[data-bs-theme="dark"] .text-blue { color: #8fd4e0 !important; }

:root[data-bs-theme="dark"] .btn-outline-success,
:root[data-bs-theme="dark"] .btn-outline-primary { --tblr-btn-color: #7fd6b0; }
:root[data-bs-theme="dark"] .btn-outline-danger { --tblr-btn-color: #f29a96; }

:root[data-bs-theme="dark"] .kiosk-page,
:root[data-bs-theme="dark"] .auth-page {
  background:
    radial-gradient(60rem 30rem at 0% 0%, rgba(214, 88, 135, .12), transparent 60%),
    radial-gradient(50rem 30rem at 100% 0%, rgba(248, 153, 31, .10), transparent 60%),
    var(--bcc-page-bg);
}

/* Tom Select (searchable dropdowns) */
:root[data-bs-theme="dark"] .ts-control,
:root[data-bs-theme="dark"] .ts-wrapper.single.input-active .ts-control,
:root[data-bs-theme="dark"] .ts-dropdown {
  background: var(--bcc-surface-2); color: var(--bcc-text); border-color: var(--bcc-border);
}
:root[data-bs-theme="dark"] .ts-control input { color: var(--bcc-text); }
:root[data-bs-theme="dark"] .ts-control input::placeholder { color: var(--bcc-text-muted); }
:root[data-bs-theme="dark"] .ts-dropdown .option { color: var(--bcc-text); }
:root[data-bs-theme="dark"] .ts-dropdown .active { background: rgba(133, 207, 205, .16); color: #fff; }
:root[data-bs-theme="dark"] .ts-wrapper.multi .ts-control > div {
  background: rgba(84, 190, 144, .18); color: #7fd6b0; border-color: transparent;
}

/* ---------- print ---------- */
@media print {
  .page-wrapper { margin-left: 0 !important; }
  .page-wrapper > header.navbar::after { display: none; }
  .page-body { margin: 0; }
  .card { box-shadow: none; border-color: #ccc; }
  .qr-item { page-break-inside: avoid; }
  a { text-decoration: none !important; color: inherit !important; }
}

/* ---------- customise dashboard ---------- */
.customise-row { transition: background-color .4s ease; }
.customise-row.customise-moved { background-color: rgba(var(--bcc-primary-rgb), .14); }
.customise-row .form-check-single { padding-left: 2.5rem; }

/* ---------- idle sign-out warning ---------- */
.idle-modal-icon { font-size: 3rem; line-height: 1; }

/* ---------------------------------------------------------------- movable / resizable table columns */
.columns-table th.col-head {
  position: relative;
  cursor: grab;
  user-select: none;
}
.columns-table th.col-head:active { cursor: grabbing; }
.columns-table th.col-head .sort-link { cursor: pointer; }
.columns-table th.col-dragging { opacity: .45; }
.columns-table th.col-target { box-shadow: inset 3px 0 0 0 var(--bcc-green); }
.columns-table .col-grip {
  position: absolute;
  top: 0;
  right: 0;
  width: 10px;
  height: 100%;
  cursor: col-resize;
  touch-action: none;          /* let a finger drag the grip instead of scrolling the table */
}
.columns-table .col-grip::after {
  content: "";
  position: absolute;
  top: 25%;
  right: 4px;
  height: 50%;
  border-right: 2px solid transparent;
}
.columns-table th:hover .col-grip::after { border-right-color: var(--tblr-border-color, #dfe3e8); }
.columns-table.col-resizing { user-select: none; cursor: col-resize; }
.columns-table td { overflow: hidden; text-overflow: ellipsis; }
.columns-menu { min-width: 16rem; }

/* Keep the first column (normally the name) in place while the rest scrolls sideways. */
.columns-table th:first-child,
.columns-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--tblr-bg-surface, #fff);
}
.columns-table thead th:first-child { z-index: 3; }
.table-responsive.has-more-left .columns-table th:first-child,
.table-responsive.has-more-left .columns-table td:first-child {
  box-shadow: 6px 0 6px -6px rgba(0, 0, 0, .25);
}
.table-hover tbody tr:hover td:first-child { background: var(--tblr-bg-surface-tertiary, #f6f7f9); }

/* A horizontal scrollbar you can actually see, and a hint that there's more to the right. */
.table-responsive {
  scrollbar-width: auto;
  scrollbar-color: var(--bcc-navy-light, #155578) transparent;
  position: relative;
}
.table-responsive::-webkit-scrollbar { height: 12px; }
.table-responsive::-webkit-scrollbar-track { background: var(--tblr-bg-surface-secondary, #f1f3f5); border-radius: 6px; }
.table-responsive::-webkit-scrollbar-thumb {
  background: var(--bcc-navy-light, #155578);
  border-radius: 6px;
  border: 3px solid transparent;
  background-clip: content-box;
}
.table-responsive::-webkit-scrollbar-thumb:hover { background: var(--bcc-navy, #0d3e59); background-clip: content-box; }
.table-responsive.has-more-right::after {
  content: "";
  position: sticky;
  top: 0;
  right: 0;
  float: right;
  width: 28px;
  height: 100%;
  margin-left: -28px;
  pointer-events: none;
  background: linear-gradient(to right, transparent, rgba(0, 0, 0, .08));
}

/* Compact: tighter rows, and the second line in a cell (skills, email) is dropped. */
.columns-compact td,
.columns-compact th { padding-top: .25rem; padding-bottom: .25rem; }
.columns-compact { font-size: .8125rem; }
.columns-compact .cell-sub { display: none; }
.columns-compact .avatar { --tblr-avatar-size: 1.5rem; }
.columns-compact .badge { font-size: .6875rem; }

.column-list .list-group-item { background: transparent; }

.show-password .form-check-label { font-size: .8125rem; color: var(--tblr-secondary, #6c7a91); }