/**
 * Kalahari Theme - Natural Desert Colors
 *
 * Earthy, warm tones inspired by the Kalahari desert:
 * - Sandy beige, terracotta, warm browns
 * - Sage greens, dusty earth tones
 * - Muted, natural palette
 */

:root {
    /* Kalahari Color Palette */
    --kalahari-sand: #D4B896;
    --kalahari-sand-light: #E8DCC8;
    --kalahari-sand-dark: #C4A676;
    --kalahari-terracotta: #C17F59;
    --kalahari-terracotta-dark: #9A5C3B;
    --kalahari-rust: #B85C38;
    --kalahari-rust-dark: #9A4D30;
    --kalahari-sage: #8B9A7D;
    --kalahari-sage-dark: #66735A;
    --kalahari-earth: #8B7355;
    --kalahari-earth-dark: #63513C;
    --kalahari-dust: #A89F91;
    --kalahari-cream: #F5F0E6;
    /* Primary UI chrome color (sidebar, navbar, footer) */
    /* Deep variants: the mid-tone palette carries white text below the 4.5:1
       WCAG 2.1 1.4.3 asks for - terracotta manages 3.26, sage only 2.99. These
       are the same hues walked down in lightness until white clears 4.5:1, and
       are used ONLY where a solid fill sits under white text. Borders, panels
       and accents keep the original, lighter palette. */
    --kalahari-terracotta-deep: #A8653F;  /* white on this: 4.57 */
    --kalahari-sage-deep: #6C7B5F;        /* white on this: 4.53 */
    --kalahari-earth-deep: #897254;       /* white on this: 4.57 */
    --kalahari-chrome: #3D3228;
    --kalahari-chrome-dark: #2D241C;
}

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

/* Primary Button - Terracotta */
.btn-primary {
    background-color: var(--kalahari-terracotta-deep);
    border-color: var(--kalahari-terracotta-dark);
    color: #fff;
}
.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--kalahari-terracotta-dark);
    border-color: var(--kalahari-terracotta-dark);
    color: #fff;
}
.btn-primary:active,
.btn-primary.active {
    background-color: var(--kalahari-terracotta-dark) !important;
    border-color: var(--kalahari-terracotta-dark) !important;
}

/* Success Button - Sage Green */
.btn-success {
    background-color: var(--kalahari-sage-deep);
    border-color: var(--kalahari-sage-dark);
    color: #fff;
}
.btn-success:hover,
.btn-success:focus {
    background-color: var(--kalahari-sage-dark);
    border-color: var(--kalahari-sage-dark);
    color: #fff;
}
.btn-success:active,
.btn-success.active {
    background-color: var(--kalahari-sage-dark) !important;
    border-color: var(--kalahari-sage-dark) !important;
}

/* Secondary Button - Sand */
.btn-secondary {
    background-color: var(--kalahari-dust);
    border-color: var(--kalahari-earth);
    color: #2D241C;
}
.btn-secondary:hover,
.btn-secondary:focus {
    background-color: var(--kalahari-sand-dark);
    border-color: var(--kalahari-earth);
    color: #3d3d3d;
}

/* Warning Button - Sand Dark */
.btn-warning {
    background-color: var(--kalahari-sand);
    border-color: var(--kalahari-sand-dark);
    color: #3d3d3d;
}
.btn-warning:hover,
.btn-warning:focus {
    background-color: var(--kalahari-sand-dark);
    border-color: var(--kalahari-earth);
    color: #3d3d3d;
}

/* Danger Button - Muted Rust */
.btn-danger {
    background-color: var(--kalahari-rust);
    border-color: var(--kalahari-rust-dark);
    color: #fff;
}
.btn-danger:hover,
.btn-danger:focus {
    background-color: var(--kalahari-rust-dark);
    border-color: var(--kalahari-rust-dark);
    color: #fff;
}

/* Info Button - Earth */
.btn-info {
    background-color: var(--kalahari-earth-deep);
    border-color: var(--kalahari-earth-dark);
    color: #fff;
}
.btn-info:hover,
.btn-info:focus {
    background-color: var(--kalahari-earth-dark);
    border-color: var(--kalahari-earth-dark);
    color: #fff;
}

/* Outline Buttons - Kalahari Theme */
.btn-outline-kalahari-sage {
    color: #657259;
    border-color: var(--kalahari-sage);
    background-color: transparent;
}
.btn-outline-kalahari-sage:hover,
.btn-outline-kalahari-sage.active {
    background-color: var(--kalahari-sage-deep);
    border-color: var(--kalahari-sage-dark);
    color: #fff;
}

.btn-outline-kalahari-sand {
    color: var(--kalahari-earth-dark);
    border-color: var(--kalahari-sand-dark);
    background-color: transparent;
}
.btn-outline-kalahari-sand:hover,
.btn-outline-kalahari-sand.active {
    background-color: var(--kalahari-sand);
    border-color: var(--kalahari-sand-dark);
    color: #5A4838;
}

.btn-outline-kalahari-dust {
    color: #806A4F;
    border-color: var(--kalahari-dust);
    background-color: transparent;
}
.btn-outline-kalahari-dust:hover,
.btn-outline-kalahari-dust.active {
    background-color: var(--kalahari-dust);
    border-color: var(--kalahari-earth);
    color: #2D241C;
}

.btn-outline-kalahari-terracotta {
    color: var(--kalahari-terracotta-dark);
    border-color: var(--kalahari-terracotta);
    background-color: transparent;
}
.btn-outline-kalahari-terracotta:hover,
.btn-outline-kalahari-terracotta.active {
    background-color: var(--kalahari-terracotta-deep);
    border-color: var(--kalahari-terracotta-dark);
    color: #fff;
}

/* ============================================
   TABS (Bootstrap Nav Tabs)
   ============================================ */

.nav-tabs {
    border-bottom: 2px solid var(--kalahari-sand);
}

.nav-tabs .nav-link {
    color: var(--kalahari-earth);
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: 0.25rem 0.25rem 0 0;
    transition: all 0.2s ease;
}

.nav-tabs .nav-link:hover {
    background-color: var(--kalahari-sand-light);
    border-color: var(--kalahari-sand) var(--kalahari-sand) transparent;
    color: #5A4838;
}

.nav-tabs .nav-link.active {
    background-color: var(--kalahari-cream);
    border-color: var(--kalahari-sand) var(--kalahari-sand) var(--kalahari-cream);
    color: var(--kalahari-terracotta-dark);
    font-weight: 500;
}

/* Pills style tabs */
.nav-pills .nav-link {
    color: #6D5A43;
    background-color: var(--kalahari-sand-light);
    border: 1px solid var(--kalahari-sand);
    margin-right: 0.25rem;
    transition: all 0.2s ease;
}

.nav-pills .nav-link:hover {
    background-color: var(--kalahari-sand);
    color: #5A4838;
}

.nav-pills .nav-link.active {
    background-color: var(--kalahari-terracotta-deep);
    border-color: var(--kalahari-terracotta-dark);
    color: #fff;
}

/* ============================================
   BADGES
   ============================================ */

.badge-primary {
    background-color: var(--kalahari-terracotta);
}

.badge-success {
    background-color: var(--kalahari-sage);
}

.badge-warning {
    background-color: var(--kalahari-sand);
    color: #3d3d3d;
}

.badge-danger {
    background-color: var(--kalahari-rust);
}

.badge-info {
    background-color: var(--kalahari-earth);
}

.badge-secondary {
    background-color: var(--kalahari-dust);
    color: #2D241C;
}

/* ============================================
   CARDS
   ============================================ */

.card {
    border-color: var(--kalahari-sand);
}

.card-header {
    /* The house card header: flat Kalahari chrome with light text. Modules used
       to each pick their own - #f8f9fa grey, sand, two different dark gradients
       and a purple one - so this is the single definition they all defer to.
       White on chrome is 12.46:1. */
    background-color: var(--kalahari-chrome, #3D3228);
    color: #FFFFFF;
    border-bottom: 2px solid var(--kalahari-terracotta, #C17F59);
}

/* Anything sitting in the header inherits the light text, so a heading or an
   icon written for the old pale header does not end up dark on dark. */
.card-header h1, .card-header h2, .card-header h3,
.card-header h4, .card-header h5, .card-header h6,
.card-header .h4, .card-header .h5, .card-header .h6,
.card-header > i, .card-header label, .card-header strong {
    color: #FFFFFF;
}

.card-header small,
.card-header .text-muted {
    color: var(--kalahari-sand, #D4B896) !important;   /* 6.94:1 on chrome */
}

/* ============================================
   SEARCH RESULTS PANEL - shared component
   ============================================
   The live-search dropdown used by the navbar, viewIndividuals and viewGroups.
   All three run the same initializer against the same endpoint and render the
   same rows, so the whole appearance lives here rather than being repeated as
   inline style on each panel - where it had already drifted apart (z-index 1050
   against 1000, two different shadows, two different corner radii).

   To reuse it:  <div id="..." class="search-results-panel"></div>
   The only requirement is that the nearest positioned ancestor is the search
   box, i.e. that wrapper carries position: relative. The panel is hidden by
   default; jQuery's fadeIn/fadeOut set display inline and override this.

   The navbar version is canonical, since that is the copy that has always
   rendered correctly.

   Why the card-header rules below exist
   -------------------------------------
   Two of the three panels sit inside .card-header, which is chrome with light
   text, so its colour rules leaked onto a white surface: <strong> - the
   individual code, the main line of every row - was #FFFFFF on white, and
   .text-muted was sand on white at about 1.9:1. The navbar copy escaped only
   because a navbar is not a card header.

   Rather than chase each element, the panel is returned to Bootstrap's own
   colours - what the navbar renders. Anything the header sets explicitly is put
   back to inherit, so it picks up the panel's colour instead. */

.search-results-panel {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1050;
    max-height: 400px;
    overflow-y: auto;
    margin-top: 2px;
    background: #FFFFFF;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    color: #212529;                 /* Bootstrap's body colour */
}

.card-header .search-results-panel strong,
.card-header .search-results-panel label,
.card-header .search-results-panel i,
.card-header .search-results-panel b,
.card-header .search-results-panel h1,
.card-header .search-results-panel h2,
.card-header .search-results-panel h3,
.card-header .search-results-panel h4,
.card-header .search-results-panel h5,
.card-header .search-results-panel h6,
.card-header .search-results-panel .h4,
.card-header .search-results-panel .h5,
.card-header .search-results-panel .h6,
.card-header .search-results-panel .dropdown-item {
    color: inherit;
}

/* .card-header .text-muted is !important, so this has to be too. Same tone
   Bootstrap would have given it. */
.card-header .search-results-panel small,
.card-header .search-results-panel .text-muted {
    color: #6C757D !important;      /* 4.68:1 on white */
}

/* Badges bring their own colours and must keep them. */
.search-results-panel .badge {
    color: #FFFFFF;
}
.search-results-panel .badge-warning,
.search-results-panel .badge-light {
    color: #3D3D3D;
}

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

.table thead.thead-light th {
    background-color: var(--kalahari-sand-light);
    border-color: var(--kalahari-sand);
    color: #5A4838;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(212, 184, 150, 0.1);
}

.table-hover tbody tr:hover {
    background-color: rgba(212, 184, 150, 0.2);
}

/* ============================================
   ALERTS - Kalahari Sunset Style
   Solid backgrounds for maximum readability
   ============================================ */

.alert-success {
    background-color: #E8F0E4;
    border: 2px solid var(--kalahari-sage);
    border-left: 5px solid var(--kalahari-sage);
    color: #3D4A36;
    font-weight: 500;
}

.alert-success i {
    color: #657259;
}

.alert-danger {
    background-color: #FAE8E3;
    border: 2px solid var(--kalahari-rust);
    border-left: 5px solid var(--kalahari-rust);
    color: #5C2E1E;
    font-weight: 500;
}

.alert-danger i {
    color: #AB5534;
}

/* Kalahari Sunset Red - more vivid for critical errors */
.alert-danger.alert-critical,
.alert-error {
    background-color: #FCEAE6;
    border: 2px solid #C75B39;
    border-left: 5px solid #C75B39;
    color: #4A2216;
    font-weight: 600;
}

.alert-warning {
    background-color: #FDF6EC;
    border: 2px solid var(--kalahari-sand-dark);
    border-left: 5px solid var(--kalahari-sand-dark);
    color: #5C4A32;
    font-weight: 500;
}

.alert-warning i {
    color: #9C5E3A;
}

.alert-info {
    background-color: #F5F0E8;
    border: 2px solid var(--kalahari-earth);
    border-left: 5px solid var(--kalahari-earth);
    color: #4A3D2E;
    font-weight: 500;
}

.alert-info i {
    color: var(--kalahari-earth-dark);
}

/* Alert icon spacing */
.alert i.fas,
.alert i.far,
.alert i.fa {
    margin-right: 0.5rem;
}

/* Alert links */
.alert a {
    font-weight: 600;
    text-decoration: underline;
}

.alert-danger a {
    color: var(--kalahari-rust-dark);
}

.alert-success a {
    color: #657259;
}

/* Toast/floating alerts - solid with shadow */
.alert.alert-floating,
#alert-container .alert {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* ============================================
   BACKGROUND UTILITY CLASSES
   ============================================ */

/* Override Bootstrap's bg-* classes with Kalahari colors */
.bg-primary {
    background-color: var(--kalahari-terracotta) !important;
}

.bg-success {
    background-color: var(--kalahari-sage) !important;
}

.bg-info {
    background-color: var(--kalahari-earth) !important;
}

.bg-warning {
    background-color: var(--kalahari-sand) !important;
}

.bg-danger {
    background-color: var(--kalahari-rust) !important;
}

.bg-secondary {
    background-color: var(--kalahari-dust) !important;
}

/* Border colors */
.border-primary {
    border-color: var(--kalahari-terracotta) !important;
}

.border-success {
    border-color: var(--kalahari-sage) !important;
}

.border-info {
    border-color: var(--kalahari-earth) !important;
}

/* ============================================
   FORM CONTROLS
   ============================================ */

.form-control:focus {
    border-color: var(--kalahari-terracotta);
    box-shadow: 0 0 0 0.2rem rgba(193, 127, 89, 0.25);
}

.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--kalahari-terracotta);
    border-color: var(--kalahari-terracotta-dark);
}

/* Select2 integration -------------------------------------------------------
   Select2 ships a blue look of its own. These rules put it in the Kalahari
   palette so a Select2 control sits beside a Bootstrap one without announcing
   itself. Contrast is noted where text sits on a fill. */

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border: 1px solid var(--kalahari-sand);
    background-color: #FFFFFF;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--kalahari-earth-dark);      /* 7.57:1 on white */
}

.select2-container--default .select2-selection--single:focus,
.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--kalahari-terracotta);
    box-shadow: 0 0 0 0.15rem rgba(193, 127, 89, 0.25);
}

.select2-dropdown {
    border-color: var(--kalahari-sand);
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid var(--kalahari-sand);
    /* Without an explicit colour this input inherits from wherever the control
       sits. In a .card-header that is white, so the text you type disappears
       into the white field. 12.63:1 on white. */
    color: var(--kalahari-earth-dark, #4A3D2E);
    background-color: #FFFFFF;
}

/* Form controls inside a card header
   ---------------------------------
   .card-header is chrome with white text, which every child inherits - including
   inputs, whose own background stays white. Filter rows live in card headers
   (Session Tracker puts its week picker and its observer and group selects
   there), so those fields were white-on-white and unreadable. The header text
   stays white; only the controls are pulled back to ink on white. */
.card-header .form-control,
.card-header input:not([type="checkbox"]):not([type="radio"]),
.card-header select,
.card-header textarea {
    color: var(--kalahari-earth-dark, #4A3D2E);   /* 12.63:1 on white */
    background-color: #FFFFFF;
}

.card-header .form-control::placeholder {
    color: var(--kalahari-earth, #8B7355);        /* 4.019:1 - placeholder, not content */
    opacity: 1;                                   /* Firefox dims placeholders by default */
}

/* The prepend icons beside those inputs sit on sand, not on chrome. */
.card-header .input-group-text {
    color: var(--kalahari-earth-dark, #4A3D2E);
    background-color: var(--kalahari-sand-light, #EDE0CC);
    border: 1px solid var(--kalahari-sand, #D4B896);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--kalahari-terracotta-deep);
    color: #FFFFFF;                          /* 4.57:1 */
}

.select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: var(--kalahari-sand-light);
    color: var(--kalahari-earth-dark);       /* 5.59:1 */
}

/* Group headings - what makes an "Active / everyone else" split readable */
.select2-container--default .select2-results__group {
    background-color: var(--kalahari-sand-light);
    color: var(--kalahari-earth-dark);       /* 5.59:1 */
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.3rem 0.6rem;
}

/* ============================================
   SESSION HEADER (Compact)
   ============================================ */

.session-header {
    background: linear-gradient(135deg, var(--kalahari-sand-light) 0%, var(--kalahari-cream) 100%);
    padding: 0.6rem 1rem;
    border-radius: 0.25rem;
    border-left: 4px solid var(--kalahari-terracotta);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.session-info {
    font-size: 0.875rem;
    color: var(--kalahari-earth-dark);
}

.session-item {
    padding: 0 0.5rem;
}

.session-item i {
    color: #9C5E3A;
    margin-right: 0.25rem;
    font-size: 0.8rem;
}

.session-divider {
    color: #86693A;
    font-weight: 300;
}

.session-period-badge {
    background-color: var(--kalahari-terracotta-deep);
    color: #fff;
    padding: 0.15rem 0.5rem;
    border-radius: 0.25rem;
    font-weight: 600;
    font-size: 0.8rem;
}

.session-type-label {
    background-color: var(--kalahari-sage-deep);
    color: #fff;
    padding: 0.15rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
}

/* ============================================
   REQUIRED FIELD INDICATOR
   ============================================ */

.required-indicator {
    color: #AB5534;
    font-weight: 600;
    margin-left: 2px;
}

/* ============================================
   PRESENCE BUTTON GROUP (Group Members Tab)
   ============================================ */

.presence-btn-group {
    display: inline-flex;
}

.presence-btn-group .presence-btn {
    padding: 0.2rem 0.5rem;
    font-size: 0.75rem;
    border-radius: 0;
}

.presence-btn-group .presence-btn:first-child {
    border-radius: 0.25rem 0 0 0.25rem;
}

.presence-btn-group .presence-btn:last-child {
    border-radius: 0 0.25rem 0.25rem 0;
}

.presence-btn-group .presence-btn i {
    margin-right: 0.15rem;
}

/* Stronger active state visibility */
.presence-btn-group .presence-btn.active {
    font-weight: 600;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}

/* Individual row styling for better separation */
#tblGroupMembers tbody tr {
    border-bottom: 2px solid var(--kalahari-sand-light);
}

#tblGroupMembers tbody tr:hover {
    background-color: var(--kalahari-cream) !important;
}

/* IndividID cell - lighter, smaller styling */
.individ-id-cell {
    color: #766C5D;
    font-size: 0.75rem;
    font-weight: 400;
}

/* ============================================
   MODAL HEADERS - Kalahari Theme
   ============================================ */

/* Terracotta header - for primary actions */
.modal-header.bg-kalahari-terracotta {
    background-color: var(--kalahari-terracotta-deep, #A8653F);
    color: #fff;
    border-bottom: 2px solid var(--kalahari-rust);
}

.modal-header.bg-kalahari-rust {
    background-color: var(--kalahari-rust, #B85C38);
    color: #FFFFFF;          /* 4.54:1 */
    border-bottom: none;
}

.modal-header.bg-kalahari-rust .close {
    color: #FFFFFF;
    opacity: 0.9;
}

/* Sand header - for neutral/info modals */
.modal-header.bg-kalahari-sand {
    background-color: var(--kalahari-sand, #D4B896);
    color: #5A4838;
    border-bottom: 2px solid var(--kalahari-earth);
}

/* Sage header - for success/positive modals */
.modal-header.bg-kalahari-sage {
    background-color: var(--kalahari-sage-deep, #6C7B5F);
    color: #fff;
    border-bottom: 2px solid var(--kalahari-sage-dark);
}

/* Earth header - for secondary actions */
.modal-header.bg-kalahari-earth {
    background-color: var(--kalahari-earth-deep, #897254);
    color: #fff;
    border-bottom: 2px solid var(--kalahari-earth-dark);
}

/* Modal close button styling for Kalahari headers */
.modal-header.bg-kalahari-terracotta .close,
.modal-header.bg-kalahari-sage .close,
.modal-header.bg-kalahari-earth .close {
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    opacity: 0.9;
}

.modal-header.bg-kalahari-terracotta .close:hover,
.modal-header.bg-kalahari-sage .close:hover,
.modal-header.bg-kalahari-earth .close:hover {
    color: #fff;
    opacity: 1;
}

.modal-header.bg-kalahari-sand .close {
    color: var(--kalahari-earth-dark);
    opacity: 0.8;
}

.modal-header.bg-kalahari-sand .close:hover {
    opacity: 1;
}

/* Modal title icon styling */
.modal-header .modal-title i {
    margin-right: 0.5rem;
}

/* ============================================
   TABULATOR TABLES - Kalahari Theme
   ============================================ */

/* Main Tabulator container */
.tabulator {
    border: 1px solid var(--kalahari-sand);
    background-color: var(--kalahari-cream);
}

/* Tabulator header */
.tabulator .tabulator-header {
    background-color: var(--kalahari-sand-light);
    border-bottom: 2px solid var(--kalahari-sand);
}

.tabulator .tabulator-header .tabulator-col {
    background-color: var(--kalahari-sand-light);
    border-right-color: var(--kalahari-sand);
}

.tabulator .tabulator-header .tabulator-col.tabulator-sortable:hover {
    background-color: var(--kalahari-sand);
}

.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title {
    color: var(--kalahari-earth-dark);
}

/* Tabulator column group headers */
.tabulator .tabulator-header .tabulator-col.tabulator-col-group .tabulator-col-group-cols {
    border-top-color: var(--kalahari-sand);
}

/* Tabulator rows */
.tabulator .tabulator-tableHolder .tabulator-table .tabulator-row {
    border-bottom-color: var(--kalahari-sand-light);
}

.tabulator .tabulator-tableHolder .tabulator-table .tabulator-row:nth-child(odd) {
    background-color: rgba(212, 184, 150, 0.08);
}

.tabulator .tabulator-tableHolder .tabulator-table .tabulator-row:hover {
    background-color: rgba(212, 184, 150, 0.2) !important;
}

.tabulator .tabulator-tableHolder .tabulator-table .tabulator-row.tabulator-selected {
    background-color: rgba(193, 127, 89, 0.2) !important;
}

/* Tabulator cells */
.tabulator .tabulator-cell {
    border-right-color: var(--kalahari-sand-light);
}

/* Tabulator footer/pagination */
.tabulator .tabulator-footer {
    background-color: var(--kalahari-sand-light) !important;
    border: none !important;
    border-top: 1px solid var(--kalahari-sand) !important;
    color: #5A4838;
    box-shadow: none !important;
    outline: none !important;
}

.tabulator .tabulator-footer .tabulator-footer-contents {
    background-color: var(--kalahari-sand-light) !important;
    border: none !important;
    box-shadow: none !important;
}

/* Override any calcs holder borders */
.tabulator .tabulator-footer .tabulator-calcs-holder {
    background-color: var(--kalahari-sand-light) !important;
    border: none !important;
    border-top: 1px solid var(--kalahari-sand) !important;
}

/* Page counter text ("Showing 1 to 50 of 6568 rows") */
.tabulator .tabulator-footer .tabulator-page-counter {
    color: #806A4F;
}

/* Paginator container */
.tabulator .tabulator-footer .tabulator-paginator {
    color: #806A4F;
}

/* Page size dropdown */
.tabulator .tabulator-footer .tabulator-page-size {
    background-color: var(--kalahari-cream);
    border-color: var(--kalahari-sand);
    color: #7A6349;
}

.tabulator .tabulator-footer .tabulator-page-size:focus {
    border-color: var(--kalahari-terracotta);
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(193, 127, 89, 0.25);
}

/* Page buttons */
.tabulator .tabulator-footer .tabulator-page {
    background-color: var(--kalahari-cream);
    border-color: var(--kalahari-sand);
    color: #7A6349;
}

.tabulator .tabulator-footer .tabulator-page:hover:not(:disabled) {
    background-color: var(--kalahari-sand);
    color: #5A4838;
}

.tabulator .tabulator-footer .tabulator-page.active {
    background-color: var(--kalahari-terracotta-deep);
    border-color: var(--kalahari-terracotta-dark);
    color: #fff;
}

.tabulator .tabulator-footer .tabulator-page:disabled {
    background-color: var(--kalahari-sand-light);
    color: #696053;
    opacity: 0.6;
}

/* ============================================
   TASK COMPLETION ICONS - Kalahari Theme
   ============================================ */

/* Override Bootstrap text-success for task completion */
.task-completed .fa-check-circle.text-success,
.tabulator .fa-check-circle.text-success {
    color: #657259 !important;
}

/* Pending tasks use dust color */
.task-pending .fa-circle.text-muted,
.tabulator .fa-circle.text-muted {
    color: #766C5D !important;
}

/* Disabled tasks */
.task-disabled .fa-check-circle.text-secondary,
.task-disabled .fa-circle.text-secondary {
    color: #86693A !important;
}

/* Clickable task hover effect */
.task-completed:not(.task-disabled):hover,
.task-pending:not(.task-disabled):hover {
    cursor: pointer;
    transform: scale(1.1);
    transition: transform 0.15s ease;
}

/* ============================================
   IN-TABLE BUTTONS - Kalahari Theme
   ============================================ */

/* Extra small buttons for tables */
.btn-xs {
    padding: 0.15rem 0.4rem;
    font-size: 0.75rem;
    line-height: 1.3;
    border-radius: 0.2rem;
}

/* Button group extra small */
.btn-group-xs > .btn {
    padding: 0.15rem 0.4rem;
    font-size: 0.75rem;
    line-height: 1.3;
    border-radius: 0.2rem;
}

.btn-group-xs > .btn:first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.btn-group-xs > .btn:last-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.btn-group-xs > .btn:not(:first-child):not(:last-child) {
    border-radius: 0;
}

/* Outline buttons in tables */
.tabulator .btn-outline-primary {
    color: #9C5E3A;
    border-color: var(--kalahari-terracotta);
}
.tabulator .btn-outline-primary:hover {
    background-color: var(--kalahari-terracotta-deep);
    border-color: var(--kalahari-terracotta);
    color: #fff;
}

.tabulator .btn-outline-secondary {
    color: #806A4F;
    border-color: var(--kalahari-dust);
}
.tabulator .btn-outline-secondary:hover {
    background-color: var(--kalahari-dust);
    border-color: var(--kalahari-earth);
    color: #2D241C;
}

.tabulator .btn-outline-success {
    color: #657259;
    border-color: var(--kalahari-sage);
}
.tabulator .btn-outline-success:hover {
    background-color: var(--kalahari-sage-deep);
    border-color: var(--kalahari-sage-dark);
    color: #fff;
}

.tabulator .btn-outline-danger {
    color: #AB5534;
    border-color: var(--kalahari-rust);
}
.tabulator .btn-outline-danger:hover {
    background-color: var(--kalahari-rust);
    border-color: var(--kalahari-rust-dark);
    color: #fff;
}

.tabulator .btn-outline-info {
    color: #806A4F;
    border-color: var(--kalahari-earth);
}
.tabulator .btn-outline-info:hover {
    background-color: var(--kalahari-earth-deep);
    border-color: var(--kalahari-earth-dark);
    color: #fff;
}

.tabulator .btn-outline-warning {
    color: #86693A;
    border-color: var(--kalahari-sand-dark);
}
.tabulator .btn-outline-warning:hover {
    background-color: var(--kalahari-sand);
    border-color: var(--kalahari-sand-dark);
    color: #3d3d3d;
}

/* ============================================
   IN-TABLE BADGES - Kalahari Theme
   ============================================ */

.tabulator .badge-primary {
    background-color: var(--kalahari-terracotta-deep);
    color: #fff;
}

.tabulator .badge-success {
    background-color: var(--kalahari-sage-deep);
    color: #fff;
}

.tabulator .badge-warning {
    background-color: var(--kalahari-sand);
    color: #5A4838;
}

.tabulator .badge-danger {
    background-color: var(--kalahari-rust);
    color: #fff;
}

.tabulator .badge-info {
    background-color: var(--kalahari-earth-deep);
    color: #fff;
}

.tabulator .badge-secondary {
    background-color: var(--kalahari-dust);
    color: #2D241C;
}

/* ============================================
   TICK/CROSS FORMATTER - Kalahari Theme
   ============================================ */

/* Tabulator tick (checkmark) */
.tabulator .tabulator-cell svg.tabulator-tick {
    stroke: var(--kalahari-sage) !important;
}

/* Tabulator cross */
.tabulator .tabulator-cell svg.tabulator-cross {
    stroke: var(--kalahari-rust) !important;
}

/* Alternative: if using font-awesome icons */
.tabulator .fa-check,
.tabulator .fa-check-circle {
    color: #657259;
}

.tabulator .fa-times,
.tabulator .fa-times-circle {
    color: #AB5534;
}

/* Warning icons */
.tabulator .fa-exclamation-triangle,
.tabulator .fa-exclamation-circle {
    color: #86693A;
}

/* ============================================
   SESSION TRACKER SPECIFIC STYLES
   ============================================ */

/* Session status badges */
.session-status-active {
    background-color: var(--kalahari-sage-deep);
    color: #fff;
}

.session-status-planned {
    background-color: var(--kalahari-terracotta-deep);
    color: #fff;
}

.session-status-unplanned {
    background-color: var(--kalahari-sand);
    color: #5A4838;
}

.session-status-cancelled {
    background-color: var(--kalahari-rust);
    color: #fff;
}

/* GoToDog button styling */
.gotodog-button {
    color: #657259;
    border-color: var(--kalahari-sage);
}
.gotodog-button:hover:not(:disabled) {
    background-color: var(--kalahari-sage-deep);
    border-color: var(--kalahari-sage-dark);
    color: #fff;
}
.gotodog-button:disabled {
    color: #766C5D;
    border-color: var(--kalahari-sand);
    opacity: 0.6;
}

/* Reason button styling */
.reason-button {
    font-size: 0.75em !important;
}

/* Row highlighting for different states */
.tabulator .tabulator-row.row-cancelled {
    background-color: rgba(184, 92, 56, 0.1) !important;
}

.tabulator .tabulator-row.row-future {
    background-color: rgba(168, 159, 145, 0.15) !important;
}

.tabulator .tabulator-row.row-today {
    background-color: rgba(139, 154, 125, 0.15) !important;
    border-left: 3px solid var(--kalahari-sage);
}

/* ============================================
   DATATABLES - Kalahari Theme
   ============================================ */

/* DataTables header */
table.dataTable thead th,
table.dataTable thead td {
    background-color: var(--kalahari-sand-light);
    border-bottom-color: var(--kalahari-sand) !important;
    color: #5A4838;
}

/* DataTables rows */
table.dataTable.stripe tbody tr.odd,
table.dataTable.display tbody tr.odd {
    background-color: rgba(212, 184, 150, 0.08);
}

table.dataTable.hover tbody tr:hover,
table.dataTable.display tbody tr:hover {
    background-color: rgba(212, 184, 150, 0.2) !important;
}

table.dataTable tbody tr.selected {
    background-color: rgba(193, 127, 89, 0.2) !important;
}

/* DataTables pagination */
.dataTables_wrapper .dataTables_paginate .paginate_button {
    background-color: var(--kalahari-cream);
    border-color: var(--kalahari-sand) !important;
    color: #7A6349 !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--kalahari-sand) !important;
    border-color: var(--kalahari-sand-dark) !important;
    color: #5A4838 !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--kalahari-terracotta-deep);
    border-color: var(--kalahari-terracotta-dark) !important;
    color: #fff !important;
}

/* DataTables search/filter */
.dataTables_wrapper .dataTables_filter input {
    border-color: var(--kalahari-sand);
}

.dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--kalahari-terracotta);
    box-shadow: 0 0 0 0.2rem rgba(193, 127, 89, 0.25);
}

/* DataTables info text */
.dataTables_wrapper .dataTables_info {
    color: #806A4F;
}

/* DataTables length selector */
.dataTables_wrapper .dataTables_length select {
    border-color: var(--kalahari-sand);
}

.dataTables_wrapper .dataTables_length select:focus {
    border-color: var(--kalahari-terracotta);
    box-shadow: 0 0 0 0.2rem rgba(193, 127, 89, 0.25);
}

/* ============================================
   LOADING SPINNERS - Kalahari Theme
   ============================================ */

.spinner-border.text-primary {
    color: #9C5E3A !important;
}

.spinner-border.text-success {
    color: #657259 !important;
}

.spinner-border.text-info {
    color: #806A4F !important;
}

/* ============================================
   PROGRESS BARS - Kalahari Theme
   ============================================ */

.progress-bar {
    background-color: var(--kalahari-terracotta);
}

.progress-bar.bg-success {
    background-color: var(--kalahari-sage) !important;
}

.progress-bar.bg-info {
    background-color: var(--kalahari-earth) !important;
}

.progress-bar.bg-warning {
    background-color: var(--kalahari-sand) !important;
}

.progress-bar.bg-danger {
    background-color: var(--kalahari-rust) !important;
}

/* ============================================
   DROPDOWN MENUS - Kalahari Theme
   ============================================ */

.dropdown-menu {
    border-color: var(--kalahari-sand);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--kalahari-sand-light);
    color: var(--kalahari-earth-dark);
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--kalahari-terracotta-deep);
    color: #fff;
}

.dropdown-divider {
    border-top-color: var(--kalahari-sand);
}

.dropdown-header {
    color: #806A4F;
}

/* ============================================
   SIDEBAR - Kalahari Theme
   ============================================ */

/* Sidebar background - warm sandy brown (CMYK 24/38/60/8 = RGB 187/150/104) */
.sidebar {
    background: linear-gradient(180deg, var(--kalahari-chrome) 0%, var(--kalahari-chrome-dark) 100%) !important;
}

/* Sidebar nav links - light text for contrast on darker background */
.sidebar .nav-item .nav-link {
    color: var(--kalahari-cream) !important;
}

.sidebar .nav-item .nav-link:hover,
.sidebar .nav-item .nav-link:focus {
    color: #fff !important;
    background-color: rgba(255, 255, 255, 0.15);
}

.sidebar .nav-item .nav-link.active {
    color: #fff !important;
    background-color: var(--kalahari-terracotta-deep);
}

/* Sidebar icons - light for visibility on darker background */
.sidebar .nav-item .nav-link i {
    color: var(--kalahari-sand-light);
}

.sidebar .nav-item .nav-link:hover i,
.sidebar .nav-item .nav-link.active i {
    color: #fff;
}

/* Sidebar dropdown menus - slightly darker */
.sidebar .nav-item .dropdown-menu {
    background-color: var(--kalahari-chrome-dark);
    border-color: #6D5535;
}

.sidebar .nav-item .dropdown-menu .dropdown-item {
    color: var(--kalahari-cream);
}

/* Long item names wrap inside the sidebar instead of running past it (Bootstrap sets nowrap);
   the icon keeps its own column so a second line lines up with the text, not under the icon. */
.sidebar .nav-item .dropdown-menu .dropdown-item {
    display: flex;
    align-items: baseline;
    white-space: normal;
    overflow-wrap: break-word;
    padding-left: .75rem;
    padding-right: .5rem;
}
.sidebar .nav-item .dropdown-menu .dropdown-item > i:first-child {
    flex: 0 0 1.25em;
    margin-right: .35em;
    text-align: center;
}

.sidebar .nav-item .dropdown-menu .dropdown-item:hover {
    background-color: var(--kalahari-terracotta-deep);
    color: #fff;
}

.sidebar .nav-item .dropdown-menu .dropdown-header {
    color: var(--kalahari-sand-light);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.05em;
}

.sidebar .nav-item .dropdown-menu .dropdown-divider {
    border-top-color: #6D5535;
}

/* ============================================
   TOP NAVBAR - Kalahari Theme
   ============================================ */

/* Override dark navbar with warm sandy brown to match sidebar (CMYK 24/38/60/8 = RGB 187/150/104) */
.navbar.bg-dark,
.navbar-dark {
    background: linear-gradient(90deg, var(--kalahari-chrome) 0%, var(--kalahari-chrome-dark) 100%) !important;
}

.navbar-dark .navbar-brand {
    color: var(--kalahari-cream);
}

.navbar-dark .navbar-brand:hover {
    color: #fff;
}

.navbar-dark .navbar-nav .nav-link {
    color: var(--kalahari-cream);
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
    color: #fff;
}

/* Navbar toggler */
.navbar-dark .navbar-toggler {
    border-color: var(--kalahari-sand-light);
}

/* ============================================
   STICKY FOOTER - Kalahari Theme
   Always visible at bottom of viewport
   ============================================ */

/* Flexbox layout for sticky footer - must override sb-admin.css */
html {
    height: 100% !important;
    min-height: 100vh !important;
}

body {
    min-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Wrapper takes available space but allows footer below */
#wrapper {
    flex: 1 0 auto !important;
    display: flex !important;
    flex-direction: row !important;
    min-height: 0 !important;
}

/* Content wrapper fills remaining space */
#content-wrapper {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    background-color: var(--kalahari-cream) !important;
    padding-bottom: 0 !important; /* Remove padding, footer handles spacing */
}

/* Footer sticks to bottom - outside wrapper (CMYK 24/38/60/8 = RGB 187/150/104) */
footer.sticky-footer,
footer.sticky-footer.bg-dark {
    flex-shrink: 0 !important;
    margin-top: auto !important;
    width: 100% !important;
    background: linear-gradient(135deg, var(--kalahari-chrome) 0%, var(--kalahari-chrome-dark) 100%) !important;
    border-top: 2px solid var(--kalahari-terracotta) !important;
    padding: 1rem 0 !important;
    height: auto !important;
}

footer.sticky-footer .copyright,
footer.sticky-footer.text-white .copyright {
    color: var(--kalahari-cream) !important;
}

footer.sticky-footer .copyright span {
    color: var(--kalahari-cream) !important;
}

/* ============================================
   PAGE BACKGROUND - Kalahari Theme
   ============================================ */

/* Note: #content-wrapper background is set above in sticky footer section */

/* Container fluid subtle styling */
.container-fluid {
    background-color: transparent;
}

/* ============================================
   LINKS - Kalahari Theme
   ============================================ */

a {
    /* Terracotta is 2.87:1 on cream - links have to clear 4.5:1 */
    color: #9C5E3A;
}

a:hover {
    color: #7A4527;
}

/* Don't apply to buttons */
.btn a,
a.btn {
    color: inherit;
}

/* Don't apply to nav links (handled separately) */
.nav-link,
.navbar-nav a,
.sidebar a {
    color: inherit;
}

/* ============================================
   PAIRING CHECK ACTION BUTTONS - Kalahari Theme
   Uniform styling for Recording and Guard pairing tables
   ============================================ */

/* Extra small button base - for table actions */
.btn-xs {
    padding: 0.2rem 0.4rem;
    font-size: 0.75rem;
    line-height: 1.3;
    border-radius: 0.2rem;
}

.btn-group-xs > .btn {
    padding: 0.2rem 0.4rem;
    font-size: 0.75rem;
    line-height: 1.3;
}

/* Action button group styling */
.pairing-actions {
    display: inline-flex;
    gap: 0.25rem;
}

/* Edit button - Kalahari terracotta outline */
.btn-action-edit {
    color: #9C5E3A;
    background-color: transparent;
    border: 1px solid var(--kalahari-terracotta);
    padding: 0.2rem 0.5rem;
    font-size: 0.75rem;
    line-height: 1.3;
    border-radius: 0.2rem;
    transition: all 0.15s ease;
}

.btn-action-edit:hover,
.btn-action-edit:focus {
    color: #fff;
    background-color: var(--kalahari-terracotta-deep);
    border-color: var(--kalahari-terracotta-dark);
}

/* Delete button - Kalahari rust outline */
.btn-action-delete {
    color: #AB5534;
    background-color: transparent;
    border: 1px solid var(--kalahari-rust);
    padding: 0.2rem 0.5rem;
    font-size: 0.75rem;
    line-height: 1.3;
    border-radius: 0.2rem;
    transition: all 0.15s ease;
}

.btn-action-delete:hover,
.btn-action-delete:focus {
    color: #fff;
    background-color: var(--kalahari-rust);
    border-color: var(--kalahari-rust-dark);
}

/* Refresh button - Kalahari earth outline */
.btn-action-refresh {
    color: #806A4F;
    background-color: transparent;
    border: 1px solid var(--kalahari-earth);
    padding: 0.25rem 0.75rem;
    font-size: 0.8rem;
    border-radius: 0.25rem;
    transition: all 0.15s ease;
}

.btn-action-refresh:hover,
.btn-action-refresh:focus {
    color: #fff;
    background-color: var(--kalahari-earth-deep);
    border-color: var(--kalahari-earth-dark);
}

/* Override Bootstrap outline buttons with Kalahari colors */
.btn-outline-primary {
    color: #9C5E3A;
    border-color: var(--kalahari-terracotta);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    color: #fff;
    background-color: var(--kalahari-terracotta-deep);
    border-color: var(--kalahari-terracotta-dark);
}

.btn-outline-danger {
    color: #AB5534;
    border-color: var(--kalahari-rust);
}

.btn-outline-danger:hover,
.btn-outline-danger:focus {
    color: #fff;
    background-color: var(--kalahari-rust);
    border-color: var(--kalahari-rust-dark);
}

.btn-outline-secondary {
    color: #806A4F;
    border-color: var(--kalahari-dust);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    color: var(--kalahari-earth-dark);
    background-color: var(--kalahari-sand-light);
    border-color: #6D5A43;
}

.btn-outline-success {
    color: #657259;
    border-color: var(--kalahari-sage);
}

.btn-outline-success:hover,
.btn-outline-success:focus {
    color: #fff;
    background-color: var(--kalahari-sage-deep);
    border-color: var(--kalahari-sage-dark);
}

.btn-outline-info {
    color: #806A4F;
    border-color: var(--kalahari-earth);
}

.btn-outline-info:hover,
.btn-outline-info:focus {
    color: #fff;
    background-color: var(--kalahari-earth-deep);
    border-color: var(--kalahari-earth-dark);
}

/* Pairing table wrapper for responsive scrolling */
.pairing-table-wrapper {
    overflow-x: auto;
    max-width: 100%;
}

/* Pairing table compact styling */
.pairing-table-wrapper .table {
    margin-bottom: 0;
    font-size: 0.875rem;
}

.pairing-table-wrapper .table th {
    background-color: var(--kalahari-sand-light);
    border-color: var(--kalahari-sand);
    color: #5A4838;
    font-weight: 600;
    font-size: 0.8rem;
    padding: 0.4rem 0.5rem;
    white-space: nowrap;
}

.pairing-table-wrapper .table td {
    padding: 0.35rem 0.5rem;
    vertical-align: middle;
}

/* ============================================
   CODE/SQL BLOCKS - Kalahari Night Theme
   Dark background with high contrast text
   ============================================ */

/* CSS Variables for code theme */
:root {
    /* Code block dark theme colors */
    --kalahari-code-bg: #1e1e1e;
    --kalahari-code-bg-header: #2d2d2d;
    --kalahari-code-text: #e0e0e0;
    --kalahari-code-muted: #9e9e9e;
    --kalahari-code-border: #3d3d3d;

    /* SQL Syntax highlighting - Monokai-inspired */
    --kalahari-sql-keyword: #66d9ef;
    --kalahari-sql-function: #a6e22e;
    --kalahari-sql-table: #fd971f;
    --kalahari-sql-string: #e6db74;
    --kalahari-sql-number: #ae81ff;
    --kalahari-sql-comment: #75715e;
    --kalahari-sql-operator: #f92672;
}

/* Collapsible code section card */
.kalahari-code-section,
.sql-section {
    margin-top: 1rem;
    border-radius: 0.375rem;
    overflow: hidden;
}

.kalahari-code-section .card,
.sql-section .card {
    border: 1px solid var(--kalahari-code-border);
    border-radius: 0.375rem;
    overflow: hidden;
    margin-bottom: 0;
}

/* Code section header - clickable */
.kalahari-code-section .card-header,
.sql-section .card-header {
    background: var(--kalahari-code-bg-header);
    color: var(--kalahari-code-text);
    padding: 0.5rem 1rem;
    cursor: pointer;
    border-bottom: 1px solid var(--kalahari-code-border);
    transition: background-color 0.15s ease;
}

.kalahari-code-section .card-header:hover,
.sql-section .card-header:hover {
    background: #383838;
}

.kalahari-code-section .card-header .text-muted,
.sql-section .card-header .text-muted {
    color: var(--kalahari-code-muted) !important;
}

/* Code section body */
.kalahari-code-section .card-body,
.sql-section .card-body {
    background: var(--kalahari-code-bg);
    color: var(--kalahari-code-text);
    padding: 1rem;
    max-height: 400px;
    overflow-y: auto;
}

.kalahari-code-section .card-body .text-muted,
.sql-section .card-body .text-muted {
    color: var(--kalahari-code-muted) !important;
}

/* Code/pre block inside the section */
.kalahari-code-section pre,
.sql-section pre {
    margin: 0;
    font-size: 0.8rem;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    white-space: pre-wrap;
    word-wrap: break-word;
    line-height: 1.5;
    color: var(--kalahari-code-text);
    background: transparent;
}

.kalahari-code-section code,
.sql-section code {
    color: var(--kalahari-code-text);
    background: transparent;
    font-family: inherit;
}

/* Copy button in header */
.kalahari-code-section .btn-outline-light,
.sql-section .btn-outline-light {
    color: var(--kalahari-code-text);
    border-color: var(--kalahari-code-muted);
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
}

.kalahari-code-section .btn-outline-light:hover,
.sql-section .btn-outline-light:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-color: #fff;
}

/* SQL Syntax Highlighting Classes */
.sql-keyword {
    color: var(--kalahari-sql-keyword);
    font-weight: bold;
}

.sql-function {
    color: var(--kalahari-sql-function);
}

.sql-table {
    color: var(--kalahari-sql-table);
}

.sql-string {
    color: var(--kalahari-sql-string);
}

.sql-number {
    color: var(--kalahari-sql-number);
}

.sql-comment {
    color: var(--kalahari-sql-comment);
    font-style: italic;
}

.sql-operator {
    color: var(--kalahari-sql-operator);
}

/* Scrollbar styling for code blocks (Webkit browsers) */
.kalahari-code-section .card-body::-webkit-scrollbar,
.sql-section .card-body::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.kalahari-code-section .card-body::-webkit-scrollbar-track,
.sql-section .card-body::-webkit-scrollbar-track {
    background: var(--kalahari-code-bg);
}

.kalahari-code-section .card-body::-webkit-scrollbar-thumb,
.sql-section .card-body::-webkit-scrollbar-thumb {
    background: var(--kalahari-code-border);
    border-radius: 4px;
}

.kalahari-code-section .card-body::-webkit-scrollbar-thumb:hover,
.sql-section .card-body::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Line numbers styling (optional) */
.kalahari-code-section .line-number,
.sql-section .line-number {
    color: var(--kalahari-code-muted);
    user-select: none;
    margin-right: 1rem;
    text-align: right;
    min-width: 2rem;
    display: inline-block;
}

/* ===========================================================================
   COMPACT TABLE
   ---------------------------------------------------------------------------
   The house look for a plain HTML list table, mirroring how Tabulator tables
   are already styled above: sand header, tight rows, quiet gridlines. Server
   rendered tables (the Adlib session list, for one) could not have that look
   without rebuilding them as Tabulator - this gives it to them with a class.

       <table class="table table-compact">

   Contrast, checked: header text earth-dark on sand-light 7.94:1, body text
   on cream 12.6:1, hover tint keeps both.
   =========================================================================== */

.table.table-compact,
.table.table-sm {
    font-size: 0.85rem;
    margin-bottom: 0;
    border-color: var(--kalahari-sand-light);
}

.table.table-compact thead th,
.table.table-sm thead th {
    background-color: var(--kalahari-sand-light);
    color: var(--kalahari-earth-dark);
    border-bottom: 2px solid var(--kalahari-sand);
    border-top: none;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.4rem 0.5rem;
    white-space: nowrap;
    vertical-align: middle;
}

.table.table-compact tbody td,
.table.table-sm tbody td {
    padding: 0.25rem 0.5rem;
    vertical-align: middle;
    border-top-color: var(--kalahari-sand-light);
}

.table.table-compact tbody tr:nth-child(even) > td,
.table.table-sm tbody tr:nth-child(even) > td {
    background-color: rgba(212, 184, 150, 0.08);   /* same banding as Tabulator */
}

.table.table-compact tbody tr:hover > td,
.table.table-sm tbody tr:hover > td {
    background-color: rgba(212, 184, 150, 0.2);
}

/* Buttons and badges in a compact row should not stretch it back out */
.table.table-compact .btn,
.table.table-sm .btn {
    padding: 0.15rem 0.45rem;
    font-size: 0.75rem;
}

.table.table-compact .badge,
.table.table-sm .badge {
    font-size: 0.7rem;
    padding: 0.2rem 0.4rem;
}

/* Tables nested inside a cell (Adlib puts start/end times that way) carry no
   chrome of their own */
.table.table-compact td > table,
.table.table-sm td > table {
    width: 100%;
    margin: 0;
    font-size: 0.8rem;
}

.table.table-compact td > table td,
.table.table-sm td > table td {
    border: none;
    padding: 0 0.15rem;
}

/* Bootstrap's own striping would fight the banding above - grey on the odd
   rows, sand on the even ones. Point both at the sand tint instead. */
.table.table-compact.table-striped tbody tr:nth-of-type(odd) > td,
.table.table-sm.table-striped tbody tr:nth-of-type(odd) > td {
    background-color: rgba(212, 184, 150, 0.08);
}

.table.table-compact.table-striped tbody tr:nth-of-type(even) > td,
.table.table-sm.table-striped tbody tr:nth-of-type(even) > td {
    background-color: transparent;
}

.table.table-compact.table-striped tbody tr:hover > td,
.table.table-sm.table-striped tbody tr:hover > td {
    background-color: rgba(212, 184, 150, 0.2);
}

/* ===========================================================================
   MODALS - one shape, four categories
   ---------------------------------------------------------------------------
   Headers used to be spread across bg-primary, bg-info, bg-success, bg-danger,
   bg-warning, bg-light and a bg-purple, chosen ad hoc, so the colour told the
   reader nothing and no two dialogues looked alike.

   Every modal now has the same header - flat chrome, white text, same padding
   and type - so they read as one family. The category shows only in the rule
   under the header and the title icon:

     (default)        neutral: showing something, or a create/edit form.
                      Terracotta rule.   <div class="modal-header">
     .modal-warning   needs attention before continuing, nothing destroyed.
                      Sand rule.
     .modal-danger    destructive or irreversible: delete, discard, overwrite.
                      Rust rule.
     .modal-success   an action completed. Sage rule.

   The old bg-kalahari-* classes still work as aliases, so a page that was
   missed still renders correctly - new markup should use the semantic name.
   =========================================================================== */

.modal-header {
    background-color: var(--kalahari-chrome, #3D3228);
    color: #FFFFFF;                            /* 12.46:1 */
    border-bottom: 3px solid var(--kalahari-terracotta, #C17F59);
}

.modal-header .modal-title,
.modal-header h1, .modal-header h2, .modal-header h3,
.modal-header h4, .modal-header h5, .modal-header h6 {
    color: #FFFFFF;
}

.modal-header .close {
    color: #FFFFFF;
    opacity: 0.85;
    text-shadow: none;
}

.modal-header .close:hover {
    color: #FFFFFF;
    opacity: 1;
}

/* The category, in the rule under the header and the title icon only */
.modal-header.modal-warning,
.modal-header.bg-kalahari-sand   { border-bottom-color: var(--kalahari-sand, #D4B896); }
.modal-header.modal-danger,
.modal-header.bg-kalahari-rust   { border-bottom-color: #CE7551; }   /* rust, lifted: the
                                     palette rust is 2.74:1 on the chrome header and this
                                     rule is the category signal, so it needs 3:1 */
.modal-header.modal-success,
.modal-header.bg-kalahari-sage   { border-bottom-color: var(--kalahari-sage, #8B9A7D); }

.modal-header.modal-warning .modal-title i { color: var(--kalahari-sand, #D4B896); }      /* 6.58:1 */
.modal-header.modal-danger  .modal-title i { color: #E39A80; }                            /* 6.02:1 */
.modal-header.modal-success .modal-title i { color: #B9CBA6; }                            /* 7.79:1 */

.modal-footer {
    background-color: var(--kalahari-cream, #F5F0E6);
    border-top: 1px solid var(--kalahari-sand, #D4B896);
}

/* Form elements inside a modal, so every dialogue asks for input the same way */
.modal-body label,
.modal-body .col-form-label {
    font-weight: 600;
    color: var(--kalahari-earth-dark, #63513C);   /* 6.67:1 on white */
    margin-bottom: 0.25rem;
}

.modal-body .form-text,
.modal-body small.text-muted {
    color: #7A6349 !important;                    /* 4.99:1 on white */
}

.modal-body .form-control:focus,
.modal-body .custom-select:focus {
    border-color: var(--kalahari-terracotta, #C17F59);
    box-shadow: 0 0 0 0.15rem rgba(193, 127, 89, 0.25);
}

/* A required field is marked the same way everywhere */
.modal-body .required-indicator,
.modal-body label .text-danger {
    color: var(--kalahari-rust, #B85C38) !important;
}

/* ===========================================================================
   AUTOFILL
   ---------------------------------------------------------------------------
   includes/js/noAutofill.js is what stops autofill; CSS cannot. This is the
   fallback for when a browser fills anyway: without it the field turns the
   browser's own pale yellow or blue, which on a data-entry form reads as a
   status the application set. It now looks like any other field - but keep in
   mind a filled field still holds a value nobody typed.
   =========================================================================== */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #FFFFFF inset;
    -webkit-text-fill-color: var(--kalahari-earth-dark, #63513C);
    caret-color: var(--kalahari-earth-dark, #63513C);
    transition: background-color 5000s ease-in-out 0s;   /* outruns the fill animation */
}

input:autofill,
textarea:autofill,
select:autofill {
    background-color: #FFFFFF;
    color: var(--kalahari-earth-dark, #63513C);
}