/* ============================================================================
   ZoneChek Theme  —  sitewide design system
   Loaded once from /bs5/i_head.asp (every page includes it).
   Pure CSS + Bootstrap 5.3 custom properties: no page markup or JavaScript
   changes required, and DataTables behaviour is untouched.
   Fonts/icons are self-hosted: Roboto (from /fonts/) and FontAwesome 7 Pro
   (from /fontawesome-pro/) — no external font CDNs.
   ==========================================================================*/

/* --- Self-hosted Roboto (already shipped with the site in /fonts/) -------- */
@font-face { font-family: Roboto; font-style: normal; font-weight: 100; font-display: swap; src: url(/fonts/Thin/Roboto-Thin.woff2) format("woff2"); }
@font-face { font-family: Roboto; font-style: normal; font-weight: 300; font-display: swap; src: url(/fonts/Light/Roboto-Light.woff2) format("woff2"); }
@font-face { font-family: Roboto; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/Regular/Roboto-Regular.woff2) format("woff2"); }
@font-face { font-family: Roboto; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/Medium/Roboto-Medium.woff2) format("woff2"); }
@font-face { font-family: Roboto; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/Bold/Roboto-Bold.woff2) format("woff2"); }
@font-face { font-family: Roboto; font-style: normal; font-weight: 900; font-display: swap; src: url(/fonts/Black/Roboto-Black.woff2) format("woff2"); }
@font-face { font-family: Roboto; font-style: italic; font-weight: 400; font-display: swap; src: url(/fonts/Italic/Roboto-Italic.woff2) format("woff2"); }
@font-face { font-family: Roboto; font-style: italic; font-weight: 700; font-display: swap; src: url(/fonts/BoldItalic/Roboto-BoldItalic.woff2) format("woff2"); }

:root {
    /* --- Brand tokens ---------------------------------------------------- */
    --zc-brand:        #006d8d;   /* sampled from the ZoneChek logo        */
    --zc-brand-rgb:    0, 109, 141;
    --zc-brand-dark:   #00576f;
    --zc-brand-darker: #00455a;
    --zc-brand-light:  #4aa8c5;
    --zc-brand-tint:   #e8f3f7;
    --zc-accent:       #4bb7f5;   /* light blue already used in spinners   */
    --zc-ink:          #17242e;
    --zc-ink-soft:     #5b6b78;
    --zc-navy-1:       #0b2230;
    --zc-navy-2:       #123546;
    --zc-page-bg:      #f4f7f9;
    --zc-surface:      #ffffff;
    --zc-border:       #dfe6ec;

    --zc-radius:    0.75rem;
    --zc-radius-sm: 0.5rem;
    --zc-shadow-sm: 0 1px 2px rgba(16, 42, 67, 0.06), 0 1px 3px rgba(16, 42, 67, 0.08);
    --zc-shadow:    0 4px 14px rgba(16, 42, 67, 0.08), 0 1px 3px rgba(16, 42, 67, 0.06);
    --zc-shadow-lg: 0 12px 32px rgba(16, 42, 67, 0.14);
    --zc-ring:      0 0 0 0.22rem rgba(var(--zc-brand-rgb), 0.2);

    /* --- Feed them into Bootstrap ------------------------------------------ */
    --bs-body-font-family: Roboto, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --bs-body-color: var(--zc-ink);
    --bs-body-bg: var(--zc-page-bg);
    --bs-border-color: var(--zc-border);
    --bs-primary: var(--zc-brand);
    --bs-primary-rgb: var(--zc-brand-rgb);
    --bs-link-color: var(--zc-brand);
    --bs-link-color-rgb: var(--zc-brand-rgb);
    --bs-link-hover-color: var(--zc-brand-darker);
    --bs-link-hover-color-rgb: 0, 69, 90;
    --bs-border-radius: var(--zc-radius-sm);
    --bs-border-radius-lg: var(--zc-radius);
}

html { scroll-behavior: smooth; }

body {
    background:
        radial-gradient(1200px 500px at 85% -10%, rgba(var(--zc-brand-rgb), 0.07), transparent 60%),
        var(--zc-page-bg);
    color: var(--zc-ink);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Content pages live in .container.content (often inside iframes) */
.container.content, .container-fluid.content { padding: 1.25rem 0.75rem 3rem; }

h1, h2, h3, h4, h5, h6 { letter-spacing: -0.015em; font-weight: 650; color: var(--zc-ink); }

a { text-decoration: none; }
a:hover { text-decoration: underline; }

/* Duotone helpers: brand two-tone for FontAwesome Pro duotone icons,
   matching the house style already used in RunStatusReport/index/taskEventsFilter
   (their inline --fa-primary-color/--fa-secondary-color still wins per-page).
   Usage: <i class="fad fa-calendar-exclamation zc-duo"></i> or <i class="fa-duotone fa-heart zc-duo"></i> */
.zc-duo { --fa-primary-color: var(--zc-brand); --fa-secondary-color: rgba(var(--zc-brand-rgb), 0.35); }
.zc-duo-warn { --fa-primary-color: #842029; --fa-secondary-color: #e6a8ad; }
.zc-duo-info { --fa-primary-color: var(--zc-ink); --fa-secondary-color: var(--zc-brand-light); }

/* Modern, unobtrusive scrollbars (Chromium/Edge) */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb {
    background: #c3d0da; border-radius: 8px; border: 3px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background-color: #a5b6c4; }
::-webkit-scrollbar-track { background: transparent; }

/* ============================================================================
   FORMS  —  sitewide modernization (login, filters, editors, bootbox, 2FA…)
   ==========================================================================*/

.form-control, .form-select {
    border: 1px solid var(--bs-border-color);
    background-color: #fff;
    border-radius: var(--zc-radius-sm);
    padding: 0.55rem 0.85rem;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.form-control:hover:not(:focus), .form-select:hover:not(:focus) { border-color: #c6d3dd; }
.form-control:focus, .form-select:focus {
    border-color: var(--zc-brand-light);
    box-shadow: var(--zc-ring);
    background-color: #fff;
}
.form-control::placeholder { color: #9aabb8; }
.form-control[readonly], .form-control:disabled { background-color: #f2f5f8; }

.input-group-text {
    background: linear-gradient(180deg, #f7fafb, #eef4f7);
    border-color: var(--bs-border-color);
    color: var(--zc-ink-soft);
    font-weight: 500;
}
.input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
    border-top-left-radius: var(--zc-radius-sm);
    border-bottom-left-radius: var(--zc-radius-sm);
}
.input-group>.input-group-prepend:first-child>.input-group-text {
    border-top-right-radius: 0; border-bottom-right-radius: 0;
}

.form-label, label.form-label, .form-group>label {
    font-size: 0.8375rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--zc-ink-soft);
    margin-bottom: 0.3rem;
}
.form-group { margin-bottom: 1rem; }

.form-check-input { border-color: #b8c6d1; }
.form-check-input:checked { background-color: var(--zc-brand); border-color: var(--zc-brand); }
.form-check-input:focus { border-color: var(--zc-brand-light); box-shadow: var(--zc-ring); }

.form-switch .form-check-input { width: 2.5em; height: 1.25em; }

/* Bare checkboxes/radios that pages don't wrap in Bootstrap classes */
input[type="checkbox"]:not(.form-check-input):not([hidden]) {
    width: 1.05em; height: 1.05em; margin: 0 0.35em 0 0;
    accent-color: var(--zc-brand);
    cursor: pointer;
    vertical-align: -0.125em;
}
input[type="radio"]:not([hidden]) { accent-color: var(--zc-brand); cursor: pointer; }
input[type="number"], input[type="text"], input[type="email"], input[type="password"],
input[type="date"], input[type="search"], input[type="tel"], input[type="time"] {
    font-family: inherit;
}
/* Inputs placed outside .form-control markup (older pages, 2FA code, …) */
form:not([class]) input[type="number"]:not([type="hidden"]),
.form-group input[type="number"] {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--zc-radius-sm);
    padding: 0.45rem 0.7rem;
}

textarea.form-control { border-radius: var(--zc-radius-sm); }

/* Validation feedback in brand colors */
.form-control.is-invalid, .was-validated .form-control:invalid {
    border-color: #b02a37;
    box-shadow: 0 0 0 0.22rem rgba(176, 42, 55, 0.15);
}

/* ============================================================================
   BUTTONS
   ==========================================================================*/

.btn {
    --bs-btn-border-radius: var(--zc-radius-sm);
    font-weight: 600;
    padding: 0.5rem 1.1rem;
    transition: all .15s ease;
}
.btn:focus-visible, .btn.focus { box-shadow: var(--zc-ring); outline: 0; }

.btn-primary {
    --bs-btn-bg: var(--zc-brand);
    --bs-btn-border-color: var(--zc-brand);
    --bs-btn-hover-bg: var(--zc-brand-dark);
    --bs-btn-hover-border-color: var(--zc-brand-dark);
    --bs-btn-active-bg: var(--zc-brand-darker);
    --bs-btn-active-border-color: var(--zc-brand-darker);
    --bs-btn-disabled-bg: #7fb0be;
    --bs-btn-disabled-border-color: #7fb0be;
    box-shadow: 0 1px 2px rgba(var(--zc-brand-rgb), 0.35);
}
.btn-primary:hover { box-shadow: 0 4px 12px rgba(var(--zc-brand-rgb), 0.35); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }

.btn-outline-primary {
    --bs-btn-color: var(--zc-brand);
    --bs-btn-border-color: var(--zc-brand);
    --bs-btn-hover-bg: var(--zc-brand);
    --bs-btn-hover-border-color: var(--zc-brand);
    --bs-btn-active-bg: var(--zc-brand-dark);
    --bs-btn-active-border-color: var(--zc-brand-dark);
}

.btn-secondary { --bs-btn-bg: #5b6b78; --bs-btn-border-color: #5b6b78; --bs-btn-hover-bg: #4c5a66; --bs-btn-hover-border-color: #4c5a66; }
.btn-success    { --bs-btn-bg: #157347; --bs-btn-border-color: #157347; --bs-btn-hover-bg: #115f3b; --bs-btn-hover-border-color: #115f3b; }
.btn-danger     { --bs-btn-bg: #b02a37; --bs-btn-border-color: #b02a37; --bs-btn-hover-bg: #8f222d; --bs-btn-hover-border-color: #8f222d; }
.btn-warning    { --bs-btn-color: #4c3a00; --bs-btn-hover-color: #4c3a00; --bs-btn-active-color: #4c3a00; }

/* Small inline buttons used all over the list/grid pages */
.smallbutton {
    display: inline-block;
    width: auto;
    padding: 0.25rem 0.6rem;
    font-size: 0.775rem;
    font-weight: 600;
    line-height: 1.2;
    color: #fff;
    background: linear-gradient(180deg, var(--zc-brand-light), var(--zc-brand));
    border: 1px solid var(--zc-brand-dark);
    border-radius: 0.45rem;
    cursor: pointer;
    box-shadow: var(--zc-shadow-sm);
    transition: all .12s ease;
    white-space: nowrap;
}
.smallbutton:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 3px 8px rgba(var(--zc-brand-rgb), 0.3); }
.smallbutton:active { transform: translateY(0); }

/* ============================================================================
   CARDS / ALERTS / BADGES / MODALS / DROPDOWNS
   ==========================================================================*/

.card {
    border: 1px solid var(--zc-border);
    border-radius: var(--zc-radius);
    box-shadow: var(--zc-shadow-sm);
}
.card-header {
    background: linear-gradient(180deg, #fff, #f4f8fa);
    border-bottom: 1px solid var(--zc-border);
    font-weight: 650;
    border-radius: var(--zc-radius) var(--zc-radius) 0 0 !important;
}

.alert { border: 1px solid; border-radius: var(--zc-radius-sm); box-shadow: var(--zc-shadow-sm); }
.alert-primary { background: var(--zc-brand-tint); border-color: #b9dbe6; color: #044a5f; }
.badge { border-radius: 2rem; padding: 0.35em 0.75em; font-weight: 600; }

.dropdown-menu {
    border: 1px solid var(--zc-border);
    border-radius: var(--zc-radius-sm);
    box-shadow: var(--zc-shadow-lg);
    padding: 0.35rem;
}
.dropdown-item { border-radius: 0.4rem; padding: 0.4rem 0.7rem; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--zc-brand-tint); }
.dropdown-item.active, .dropdown-item:active { background: var(--zc-brand); }

.modal-content { border: 0; border-radius: var(--zc-radius); box-shadow: var(--zc-shadow-lg); }
.modal-header { border-bottom: 1px solid var(--zc-border); }
.modal-footer { border-top: 1px solid var(--zc-border); }

/* ============================================================================
   NAVBAR / SHELL (index.asp)  —  refined beyond the generic gradient
   ==========================================================================*/

.navbar {
    background: linear-gradient(180deg, var(--zc-navy-2), var(--zc-navy-1)) !important;
    box-shadow: 0 2px 12px rgba(11, 34, 48, 0.35);
    padding-top: 0.35rem; padding-bottom: 0.35rem;
}
@supports (backdrop-filter: blur(6px)) {
    .navbar.sticky-top { background: rgba(11, 34, 48, 0.92) !important; backdrop-filter: blur(8px); }
}
.navbar .nav-link { border-radius: 0.45rem; transition: background .12s ease; color: rgba(255, 255, 255, 0.85); }
.navbar .nav-link:hover, .navbar .nav-link:focus { background: rgba(255, 255, 255, 0.08); color: #fff; }
.navbar .nav-link.active, .navbar .show > .nav-link { background: rgba(var(--zc-brand-rgb), 0.45); color: #fff; }
.navbar .navbar-toggler { border-color: rgba(255, 255, 255, 0.25); }
.navbar img { height: 26px; width: auto; margin: 0 0.5rem 0 0.25rem; transition: transform .15s ease; }
.navbar a:hover img { transform: scale(1.05); }

/* Links inside the dark shell stay white WITHOUT the blunt `a{color:white}`
   rule — anything that lives on light ground (dropdowns, popovers) is exempt */
.navbar > .container-fluid a, .navbar a.nav-link { color: #fff; }
.navbar .dropdown-menu a, .navbar .dropdown-item { color: var(--zc-ink); }

/* Phone number in the corner: pill it */
.navbar a[href^="tel:"] {
    display: inline-flex; align-items: center; gap: 0.4rem;
    border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 2rem;
    padding: 0.25rem 0.85rem; font-size: 0.85rem; font-weight: 600;
    transition: all .12s ease;
}
.navbar a[href^="tel:"]:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.5); text-decoration: none; }

/* Profile pill around userName */
.zc-user-chip {
    display: inline-flex; align-items: center; gap: 0.5rem;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 2rem; padding: 0.15rem 0.75rem 0.15rem 0.15rem;
}
.zc-user-chip:hover { background: rgba(255, 255, 255, 0.18); text-decoration: none; }
.zc-avatar {
    width: 1.7rem; height: 1.7rem; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--zc-brand-light), var(--zc-brand));
    color: #fff; font-size: 0.8rem; font-weight: 700; flex: 0 0 auto;
}

/* Shell spinner (replaces the 2018 hourlass GIF; toggled with d-none by index.asp) */
.zc-spin {
    display: inline-block; width: 1.4rem; height: 1.4rem; margin-left: 0.75rem;
    border-radius: 50%;
    border: 0.2em solid rgba(255, 255, 255, 0.25);
    border-right-color: var(--zc-accent);
    animation: zc-spin 0.8s linear infinite;
    vertical-align: middle;
}
.zc-spin.d-none { display: none !important; }   /* d-none wins over inline-block above */
@keyframes zc-spin { to { transform: rotate(360deg); } }

/* Dropdown polish: headers, submenu carets, icons aligned with labels */
.navbar .dropdown-menu .dropdown-header {
    font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--zc-ink-soft); padding: 0.4rem 0.7rem 0.2rem;
}
.navbar .dropdown-item { display: flex; align-items: center; gap: 0.55rem; }
.navbar .dropdown-item > i:first-child { width: 1.15em; text-align: center; color: var(--zc-brand); flex: 0 0 auto; }
.navbar .dropdown-item:hover > i:first-child { color: var(--zc-brand-dark); }
.navbar .dropdown-submenu > .dropdown-toggle::after {
    transform: rotate(-90deg); font-size: 0.7em; opacity: 0.7;
}

/* Unread-message counter (talkIcon text is written by comm.asp; markup unchanged) */
.zc-talk-badge {
    display: inline-flex; min-width: 1.35rem; height: 1.35rem; padding: 0 0.35rem;
    margin-left: 0.25rem; vertical-align: middle;
    align-items: center; justify-content: center;
    border-radius: 999px; background: #dc3545; color: #fff;
    font-size: 0.72rem; font-weight: 700; line-height: 1;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.15);
}
.zc-talk-badge:has(> span:empty) { display: none; }

/* Quick-menu accordion (shown after login / logo click) */
.tabdiv#menu, #menu {
    background: linear-gradient(180deg, #fff, var(--zc-page-bg));
    border-bottom: 1px solid var(--zc-border);
    padding: 0.75rem 0.5rem;
}
#menu .accordion-button { box-shadow: none; font-weight: 650; color: var(--zc-brand-dark); }
/* Center the section name in the collapse bar; pin the chevron back to the right edge */
#menu .accordion-button { justify-content: center; }
#menu .accordion-button::after { position: absolute; right: 1.25rem; left: auto; margin-left: 0; }
#menu .accordion-button:not(.collapsed) { background: var(--zc-brand-tint); color: var(--zc-brand-darker); }
#menu .accordion-button:focus { box-shadow: var(--zc-ring); }
#menu .accordion-button::after { filter: hue-rotate(175deg) saturate(2); }
#menu .btn-primary { font-weight: 500; }
#menu .btn-primary > i { margin-right: 0.45em; opacity: 0.9; }

/* The content/talk/wo iframes live on the page gradient; give the seam a hairline */
.tabdiv#content { border-top: 1px solid rgba(16, 42, 67, 0.06); }

/* ============================================================================
   PLAIN BOOTSTRAP TABLES (non-DataTables pages)

/* ============================================================================
   PLAIN BOOTSTRAP TABLES (non-DataTables pages)
   ==========================================================================*/

.table { --bs-table-hover-bg: var(--zc-brand-tint); border-radius: var(--zc-radius-sm); }
.table>thead th, .table>thead>tr>th {
    font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--zc-ink-soft); background: #f2f6f8; border-bottom: 2px solid var(--zc-border);
}
.table>tbody>tr>td { vertical-align: middle; }
.table-bordered { border: 1px solid var(--zc-border); }
.table-striped>tbody>tr:nth-of-type(odd)>* { --bs-table-striped-bg: #f7fafb; }

/* ============================================================================
   DATATABLES  —  full sitewide theme, CSS only (DataTables 1.10.x +
   dataTables.bootstrap5). Works with every existing DOM/buttons config.
   ==========================================================================*/

.dataTables_wrapper { color: var(--zc-ink); }

/* The table itself */
table.dataTable { border-collapse: collapse !important; margin-top: 0 !important; margin-bottom: 0 !important; }
table.dataTable > thead > tr > th,
table.dataTable > thead > tr > td {
    border-bottom: 2px solid rgba(var(--zc-brand-rgb), 0.35) !important;
    background: linear-gradient(180deg, #f7fafc, #eaf1f5);
    color: var(--zc-ink);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.7rem 0.85rem !important;
    vertical-align: middle;
}
table.dataTable > tbody > tr > td {
    padding: 0.55rem 0.85rem;
    border-bottom: 1px solid #edf1f4;
    vertical-align: middle;
}
table.dataTable > tbody > tr:nth-child(odd) > td,
table.dataTable > tbody > tr:nth-child(odd) > th { background-color: #fbfdfe; }
table.dataTable > tbody > tr:hover > td,
table.dataTable.hover tbody tr:hover > td,
table.dataTable.display tbody tr:hover > td { background-color: var(--zc-brand-tint) !important; }
table.dataTable > tbody > tr.selected > td,
table.dataTable tbody tr.selected > td { background-color: #cfe9f1 !important; }
table.dataTable.table-bordered { border: 1px solid var(--zc-border); border-radius: var(--zc-radius-sm); }
table.dataTable.table-bordered th, table.dataTable.table-bordered td { border-color: #e4ebf0; }

/* Sort icons in brand color, visible affordance on hover */
table.dataTable thead th.sorting, table.dataTable thead th.sorting_asc, table.dataTable thead th.sorting_desc { cursor: pointer; }
table.dataTable thead .sorting:before, table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_desc:before, table.dataTable thead .sorting_asc_disabled:before,
table.dataTable thead .sorting_desc_disabled:before { color: #b7c6d1; opacity: 1; }
table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after, table.dataTable thead .sorting_asc_disabled:after,
table.dataTable thead .sorting_desc_disabled:after { color: var(--zc-brand); opacity: 1; }
table.dataTable thead th.sorting_asc:after { color: var(--zc-brand); }
table.dataTable thead th:hover.sorting:after { color: var(--zc-brand-dark); }

/* Wrapper chrome: toolbar, search, length */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate { color: var(--zc-ink-soft); font-size: 0.875rem; }

div.dataTables_wrapper div.dataTables_length select,
div.dataTables_wrapper div.dataTables_filter input {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--zc-radius-sm);
    padding: 0.4rem 0.75rem;
    margin-left: 0.4rem;
    transition: border-color .15s ease, box-shadow .15s ease;
    background-color: #fff;
}
div.dataTables_wrapper div.dataTables_filter input:focus,
div.dataTables_wrapper div.dataTables_length select:focus {
    outline: 0; border-color: var(--zc-brand-light); box-shadow: var(--zc-ring);
}
/* Some pages set search: "_INPUT_" so there is no label — make the field roomy */
div.dataTables_wrapper div.dataTables_filter input { min-width: 190px; }

/* Toolbar row (buttons + search): give it breathing room and align it */
div.dataTables_wrapper div.dataTables_filter,
div.dataTables_wrapper div.dataTables_length { padding: 0.65rem 0.25rem 0.2rem; }
.dataTables_wrapper .toolbar { padding-top: 0.65rem; }
div.dataTables_wrapper .dt-buttons { margin: 0.65rem 0 0.2rem; float: none !important; }

.dt-button, div.dataTables_wrapper .dt-buttons a.dt-button, div.dataTables_wrapper a.buttons-copy,
div.dataTables_wrapper a.buttons-csv, div.dataTables_wrapper a.buttons-excel,
div.dataTables_wrapper a.buttons-pdf, div.dataTables_wrapper a.buttons-print,
div.dataTables_wrapper a.buttons-collection, div.dataTables_wrapper a.buttons-columnVisibility {
    display: inline-flex !important;
    align-items: center;
    background: linear-gradient(180deg, #ffffff, #eef3f6) !important;
    color: var(--zc-ink) !important;
    border: 1px solid #cfdbe3 !important;
    border-radius: var(--zc-radius-sm) !important;
    padding: 0.4rem 0.9rem !important;
    margin: 0 0.35rem 0.35rem 0 !important;
    font-size: 0.83rem !important;
    font-weight: 600 !important;
    line-height: 1.3;
    text-shadow: none !important;
    box-shadow: var(--zc-shadow-sm);
    cursor: pointer;
    transition: all .12s ease;
    float: none !important;
    height: auto !important;
    width: auto !important;
}
.dt-button:hover, div.dataTables_wrapper .dt-buttons a.dt-button:hover,
div.dataTables_wrapper a.buttons-columnVisibility:hover {
    background: linear-gradient(180deg, var(--zc-brand-tint), #d7ecf3) !important;
    border-color: var(--zc-brand-light) !important;
    color: var(--zc-brand-darker) !important;
    transform: translateY(-1px);
}
.dt-button:active { transform: translateY(0); box-shadow: none; }

/* Toggle-able columns: ON = brand filled, OFF = muted (clearer than red) */
a.buttons-columnVisibility.active, a.buttons-columnVisibility { position: relative; }
table.dataTable thead th.buttons-columnVisibility.active { background: var(--zc-brand) !important; color: #fff !important; }

/* Pagination — Bootstrap pills with brand accents */
.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: 0.45rem !important;
    border: 1px solid var(--zc-border) !important;
    background: #fff !important;
    color: var(--zc-ink-soft) !important;
    margin: 0 0.12rem;
    padding: 0.3rem 0.7rem;
    box-shadow: var(--zc-shadow-sm);
    transition: all .12s ease;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--zc-brand-tint) !important;
    border-color: var(--zc-brand-light) !important;
    color: var(--zc-brand-darker) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--zc-brand) !important;
    border-color: var(--zc-brand) !important;
    color: #fff !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    background: #f6f8fa !important; color: #c0ccd5 !important; border-color: #e6ebef !important;
    box-shadow: none; cursor: default;
}
div.dataTables_wrapper div.dataTables_paginate { padding-bottom: 0.5rem; }
div.dataTables_wrapper div.dataTables_info { color: var(--zc-ink-soft); padding: 0.75rem 0 0.4rem; font-size: 0.85rem; }

/* Info line: "Showing x to y of z entries" */
.dataTables_wrapper .dataTables_info:empty { display: none; }

/* Processing / empty state */
table.dataTable.dataTable.no-footer { border-bottom: 1px solid var(--zc-border); }
.dataTables_wrapper .dataTables_processing {
    background: linear-gradient(90deg, transparent, rgba(var(--zc-brand-rgb), 0.08), transparent) !important;
    color: var(--zc-brand); font-weight: 600; letter-spacing: 0.02em;
    border-radius: var(--zc-radius-sm);
    border: 1px solid var(--zc-border) !important;
}
.dataTables_empty { padding: 2.25rem !important; color: var(--zc-ink-soft) !important; }
/* Friendly magnifier for zero-result states (FA7 Pro, self-hosted) */
table.dataTable td.dataTables_empty::before {
    content: "\f002";
    font-family: "Font Awesome 6 Pro", "Font Awesome 7 Pro"; font-weight: 300;
    display: inline-block; margin-right: 0.6rem;
    color: var(--zc-brand-light); opacity: 0.85;
}

/* FixedHeader */
table.dataTable.fixedHeader-floating, table.dataTable.fixedHeader-locked {
    background-color: #f7fafc !important;
    border-radius: 0;
    box-shadow: 0 3px 10px rgba(16, 42, 67, 0.12);
    margin: 0 !important;
}

/* RowGroup */
table.dataTable tbody tr.dtrg-group td {
    background: linear-gradient(180deg, #f7fafc, #eef4f7);
    font-weight: 700; letter-spacing: 0.03em; color: var(--zc-ink);
    border-top: 1px solid var(--zc-border); border-bottom: 1px solid var(--zc-border);
}

/* Responsive child rows */
table.dataTable ul.dtr-details { width: 100%; }
table.dataTable td.dtr-control { color: var(--zc-brand); cursor: pointer; }
table.dataTable ul.dtr-details .dtr-title { color: var(--zc-ink-soft); font-weight: 600; }

/* Column-visibility + export dropdowns rendered by dataTables buttons */
div.dt-button-collection {
    border: 1px solid var(--zc-border);
    border-radius: var(--zc-radius-sm);
    box-shadow: var(--zc-shadow-lg);
    padding: 0.75rem;
    background: #fff;
}
div.dt-button-collection .dt-button { margin: 0.2rem 0 0 0; width: 100%; }
div.dt-button-background { background: rgba(11, 34, 48, 0.45) !important; }

/* ============================================================================
   PARAMETER / FILTER PAGES
   Card-style control panels (login look) + Bootstrap 4 leftovers that were
   silently broken after the BS5 migration: .btn-block, .form-inline,
   .btn-default, .btn-caution, .caret, .pull-left.
   ==========================================================================*/

/* The shared panel: white card on the page gradient, centered, login-style */
.zc-params {
    background: var(--zc-surface);
    border: 1px solid var(--zc-border);
    border-radius: var(--zc-radius);
    box-shadow: var(--zc-shadow);
    padding: 1.75rem clamp(1.25rem, 4vw, 2.5rem);
    width: min(96%, 1800px);   /* take most of the screen; cap keeps line-length sane on ultrawide */
    max-width: none;
    margin: 0.75rem auto 1.5rem;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.zc-params .row { margin: 0; }
/* row/toolbar-style forms inside the card keep their horizontal flow */
.zc-params.row, .zc-params.form-inline, .zc-params.d-flex { flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 0.85rem 1rem; }
.zc-params.d-grid { display: grid !important; }
.zc-params > hr { margin: 0.25rem 0; border: 0; border-top: 1px solid var(--zc-border); opacity: 1; }
/* Submit actions at the bottom of the panel get a little air */
.zc-params > .btn, .zc-params > button.btn { margin-top: 0.35rem; }
/* grouped sub-rows inside the panel: soft fieldset look instead of BS3 gray blocks */
.zc-params .bg-light { background-color: #f8fbfc !important; }
.zc-params .border, .zc-params .row.border { border: 1px solid var(--zc-border) !important; border-radius: var(--zc-radius-sm); }
.zc-params .col-form-label { font-size: 0.8375rem; font-weight: 600; color: var(--zc-ink-soft); padding-bottom: 0.25rem; }

/* Any page still holding an inline "border: 1px solid blue" box gets card
   chrome even where we didn't edit the markup (!important beats inline style,
   but only the border shorthand — width/height/flex inline props survive) */
[style*="solid blue"] {
    border: 1px solid var(--zc-border) !important;
    border-radius: var(--zc-radius);
    box-shadow: var(--zc-shadow-sm);
    background: var(--zc-surface);
}

/* Bootstrap 4 holdovers — polyfilled so 180+ existing tags behave again */
.btn-block { display: block; width: 100%; }
.btn-block + .btn-block { margin-top: 0.5rem; }
/* buttons that have btn-block but never got .btn — give them the full base */
button.btn-block:not(.btn), a.btn-block:not(.btn) {
    font-family: inherit; font-size: 1rem; font-weight: 600; line-height: 1.5;
    padding: 0.5rem 1.1rem; border: 1px solid transparent; border-radius: var(--zc-radius-sm);
    color: var(--bs-btn-color, var(--zc-ink)); background: var(--bs-btn-bg, #eef3f6);
    cursor: pointer; transition: all .15s ease;
}
.btn-default { --bs-btn-bg: #6c757d; --bs-btn-border-color: #6c757d; --bs-btn-color: #fff; --bs-btn-hover-bg: #5b636a; --bs-btn-hover-border-color: #5b636a; --bs-btn-hover-color: #fff; }
.btn-caution { --bs-btn-bg: #d97706; --bs-btn-border-color: #d97706; --bs-btn-color: #fff; --bs-btn-hover-bg: #b45f05; --bs-btn-hover-border-color: #b45f05; --bs-btn-hover-color: #fff; }

/* .form-inline was removed in BS5 — restore it as a wrapping toolbar */
.form.form-inline, form.form-inline {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: 0.65rem 0.9rem; text-align: left;
}
form.form-inline .form-group { display: flex; align-items: center; gap: 0.5rem; margin: 0; flex-wrap: wrap; }
form.form-inline .form-control, form.form-inline .form-select { width: auto; min-width: 8rem; }

/* BS4 .caret gone in BS5 (daterangepicker triggers use it) */
.caret { display: inline-block; width: 0; height: 0; margin-left: 0.35em; vertical-align: middle;
    border-top: 0.3em solid; border-right: 0.3em transparent; border-left: 0.3em transparent; }
.pull-left { float: left; }

/* daterangepicker trigger boxes still wearing inline "1px solid #ccc" */
div[style*="border: 1px solid #ccc"] {
    border: 1px solid var(--bs-border-color) !important;
    border-radius: var(--zc-radius-sm) !important;
    padding: 0.45rem 0.75rem !important;
    min-width: 11rem; transition: border-color .15s ease, box-shadow .15s ease;
}
div[style*="border: 1px solid #ccc"]:hover { border-color: #c6d3dd !important; }
div[style*="border: 1px solid #ccc"].active, div[style*="border: 1px solid #ccc"]:focus-within { border-color: var(--zc-brand-light) !important; box-shadow: var(--zc-ring); }

/* Form controls that live INSIDE headline tags (taskfilter.asp et al) inherited
   huge font sizes — snap them back to normal form scale */
h1 :is(input, select, textarea, button, .form-control, .form-select, .btn),
h2 :is(input, select, textarea, button, .form-control, .form-select, .btn) { font-size: 1rem; font-weight: 400; }
h1 .btn, h2 .btn, h1 button, h2 button { font-weight: 600; }
h1 .btn-link, h2 .btn-link { font-size: 0.9rem; vertical-align: middle; }

/* taskEventsFilter table-as-layout header cells */
th.filterhead {
    background: linear-gradient(180deg, #f7fafc, #eaf1f5) !important;
    font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--zc-ink-soft); vertical-align: middle; padding: 0.65rem 0.75rem !important;
}

/* bootstrap5-toggle plugin (i_toggle_jquery.asp): match the theme's inputs */
.toggle { border-radius: var(--zc-radius-sm) !important; box-shadow: var(--zc-shadow-sm); }
.toggle .btn { font-weight: 600; font-size: 0.83rem; }
.toggle-on.btn-success { --bs-btn-bg: #157347; --bs-btn-border-color: #157347; }
.toggle-off.btn-danger { --bs-btn-bg: #b02a37; --bs-btn-border-color: #b02a37; }

/* ============================================================================
   MISC legacy-compat polish (helps pages we didn't visually audit)
   ==========================================================================*/

td.label { font-weight: 600; color: var(--zc-ink-soft); }
.button {
    display: inline-block; width: auto; padding: 0.3rem 0.9rem;
    font-weight: 600; color: #fff; cursor: pointer;
    background: linear-gradient(180deg, var(--zc-brand-light), var(--zc-brand));
    border: 1px solid var(--zc-brand-dark); border-radius: 0.45rem;
}
.button:hover { filter: brightness(1.06); }
.head { background: linear-gradient(180deg, var(--zc-navy-2), var(--zc-navy-1)); color: #fff; }
.red { background-color: #dc3545; }
.hand { cursor: pointer; }
option:disabled { background: #fff3cd; }
a.disabled { opacity: 0.55; pointer-events: none; }
img { position: static; }   /* neutralize any stray absolute-img rules */
strong { background: transparent; }

/* Bootbox/bootbox6 dialogs */
.bootbox .modal-body { text-align: left; }

/* Print: drop shadows/gradients that waste ink */
@media print {
    body { background: #fff; }
    .dt-button, .dataTables_wrapper .dataTables_paginate, .smallbutton { display: none !important; }
    .smallbutton { display: inline-block !important; background: none !important; color: #000 !important; border: 1px solid #999 !important; box-shadow: none !important; }
}