/*
 * ═══════════════════════════════════════════════════════════════
 *  GLITZZ STAFFING — GLOBAL THEME OVERRIDE
 *  Apply this AFTER bootstrap.min.css in your master layout.
 *  This overrides Bootstrap's default blue/green palette with
 *  the navy + teal brand palette across every component.
 * ═══════════════════════════════════════════════════════════════
 *
 *  HOW TO USE:
 *  In your layouts/master-layouts.blade.php (or wherever you
 *  load CSS), add this line AFTER your bootstrap link:
 *
 *    <link href="{{ URL::asset('/assets/css/glitzz-theme-override.css') }}" rel="stylesheet">
 *
 *  Save this file to: public/assets/css/glitzz-theme-override.css
 * ═══════════════════════════════════════════════════════════════
 */

/* ══════════════════════════════════════════════════════════════
   1. ROOT VARIABLES — override Bootstrap + Skote defaults
══════════════════════════════════════════════════════════════ */
:root {
    /* Brand */
    --gs-navy:        #1a2340;
    --gs-navy2:       #1e2a4a;
    --gs-navy3:       #1f3460;
    --gs-teal:        #2db8b0;
    --gs-teal2:       #25a09a;
    --gs-teal-lt:     #e6f7f6;
    --gs-teal-mid:    #b2dfdb;

    /* Override Bootstrap CSS variables */
    --bs-primary:          #2db8b0;
    --bs-primary-rgb:      45, 184, 176;
    --bs-secondary:        #1a2340;
    --bs-secondary-rgb:    26, 35, 64;
    --bs-success:          #38a169;
    --bs-success-rgb:      56, 161, 105;
    --bs-info:             #3182ce;
    --bs-info-rgb:         49, 130, 206;
    --bs-warning:          #d69e2e;
    --bs-warning-rgb:      214, 158, 46;
    --bs-danger:           #f46a6a;
    --bs-danger-rgb:       229, 62, 62;
    --bs-teal:             #2db8b0;
    --bs-body-color:       #2d3748;
    --bs-body-bg:          #f0f4f8;

    /* Overwrite Skote-specific variables if present */
    --bs-blue:   #3182ce;
    --bs-green:  #38a169;
    --bs-red:    #e53e3e;
    --bs-yellow: #d69e2e;
}

/* ══════════════════════════════════════════════════════════════
   2. BODY & TYPOGRAPHY
══════════════════════════════════════════════════════════════ */
body {
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Poppins', sans-serif !important;
    background-color: #ffffff !important;
    color: #2d3748 !important;
}

/* a { color: var(--gs-teal2); } */
a:hover { color: var(--gs-navy); }

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--gs-navy);
}

/* ══════════════════════════════════════════════════════════════
   3. BUTTONS — primary = teal, secondary = navy
══════════════════════════════════════════════════════════════ */

/* Primary */
.btn-primary {
    color: #fff !important;
    background-color: var(--gs-teal) !important;
    border-color: var(--gs-teal) !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-check:focus + .btn-primary {
    color: #fff !important;
    background-color: var(--gs-teal2) !important;
    border-color: var(--gs-teal2) !important;
    box-shadow: 0 0 0 .15rem rgba(45,184,176,.35) !important;
}
.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
    background-color: #1d8f89 !important;
    border-color: #1d8f89 !important;
}
.btn-primary.disabled, .btn-primary:disabled {
    background-color: var(--gs-teal) !important;
    border-color: var(--gs-teal) !important;
}

/* Secondary */
.btn-secondary {
    color: #fff !important;
    background-color: var(--gs-navy) !important;
    border-color: var(--gs-navy) !important;
}
.btn-secondary:hover,
.btn-secondary:focus {
    background-color: var(--gs-navy2) !important;
    border-color: var(--gs-navy2) !important;
    box-shadow: 0 0 0 .15rem rgba(26,35,64,.35) !important;
}

/* Success */
.btn-success {
    background-color: #38a169 !important;
    border-color: #38a169 !important;
    color: #fff !important;
}
.btn-success:hover { background-color: #2f8a58 !important; border-color: #2f8a58 !important; }

/* Danger */
.btn-danger {
    background-color: #e53e3e !important;
    border-color: #e53e3e !important;
    color: #fff !important;
}
.btn-danger:hover { background-color: #c53030 !important; border-color: #c53030 !important; }

/* Warning */
.btn-warning {
    background-color: #d69e2e !important;
    border-color: #d69e2e !important;
    color: #fff !important;
}
.btn-warning:hover { background-color: #b7861f !important; border-color: #b7861f !important; }

/* Info */
.btn-info {
    background-color: #3182ce !important;
    border-color: #3182ce !important;
    color: #fff !important;
}
.btn-info:hover { background-color: #2563a8 !important; border-color: #2563a8 !important; }

/* Light */
.btn-light {
    background-color: #f0f4f8 !important;
    border-color: #e2e8f0 !important;
    color: #2d3748 !important;
}
.btn-light:hover { background-color: #e2e8f0 !important; }

/* Dark */
.btn-dark {
    background-color: var(--gs-navy) !important;
    border-color: var(--gs-navy) !important;
    color: #fff !important;
}
.btn-dark:hover { background-color: var(--gs-navy2) !important; }

/* Outline variants */
.btn-outline-primary {
    color: var(--gs-teal) !important;
    border-color: var(--gs-teal) !important;
}
.btn-outline-primary:hover {
    background-color: var(--gs-teal) !important;
    color: #fff !important;
}
.btn-outline-secondary {
    color: var(--gs-navy) !important;
    border-color: var(--gs-navy) !important;
}
.btn-outline-secondary:hover {
    background-color: var(--gs-navy) !important;
    color: #fff !important;
}
.btn-outline-success  { color: #38a169 !important; border-color: #38a169 !important; }
.btn-outline-success:hover  { background-color: #38a169 !important; color: #fff !important; }
.btn-outline-danger   { color: #e53e3e !important; border-color: #e53e3e !important; }
.btn-outline-danger:hover   { background-color: #e53e3e !important; color: #fff !important; }
.btn-outline-warning  { color: #d69e2e !important; border-color: #d69e2e !important; }
.btn-outline-warning:hover  { background-color: #d69e2e !important; color: #fff !important; }
.btn-outline-info     { color: #3182ce !important; border-color: #3182ce !important; }
.btn-outline-info:hover     { background-color: #3182ce !important; color: #fff !important; }

/* Focus ring — all buttons */
.btn:focus { box-shadow: 0 0 0 .15rem rgba(45,184,176,.35) !important; }

/* ══════════════════════════════════════════════════════════════
   3b. PAGE-LEVEL ADD BUTTON  (.btn-add — use on all "+ Add" CTAs)
       Usage: <a href="..." class="btn-add">+ Label</a>
══════════════════════════════════════════════════════════════ */
.btn-add,
.bg-add {
    background: var(--gs-navy) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 7px !important;
    padding: 9px 20px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: .3px !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: background .15s !important;
    text-decoration: none !important;
}
.btn-add:hover,
.bg-add:hover {
    background: var(--gs-navy2) !important;
    color: #fff !important;
}

/* Cancel / Reset companion button */
.btn-cancel,
.bg-cancel {
    background: #e53e3e !important;
    color: #fff !important;
    border: none !important;
    border-radius: 7px !important;
    padding: 9px 14px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    transition: background .15s !important;
    text-decoration: none !important;
}
.btn-cancel:hover,
.bg-cancel:hover {
    background: #c53030 !important;
    color: #fff !important;
}

/* ══════════════════════════════════════════════════════════════
   4. FORMS — inputs, selects, textareas
══════════════════════════════════════════════════════════════ */
.form-control{
    background-color: #ffffff !important;
}
.form-control:focus,
.form-select:focus {
    border-color: var(--gs-teal) !important;
    box-shadow: 0 0 0 .15rem rgba(45,184,176,.25) !important;
    
}
.form-select{
        appearance: none !important;
    -webkit-appearance: none !important;
}
.form-check-input[class*="global"]:checked,
.form-check-input.global:checked {
    background-color: #626ED4 !important;
    border-color: #626ED4 !important;
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
    background-image: var(--bs-form-switch-bg) !important;
}

.form-check-input[class*="view"]:checked,
.form-check-input.view:checked {
    background-color: #3498DB !important;
    border-color: #3498DB !important;
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
    background-image: var(--bs-form-switch-bg) !important;
}

.form-check-input[class*="add"]:checked,
.form-check-input.add:checked {
    background-color: #02A499 !important;
    border-color: #02A499 !important;
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
    background-image: var(--bs-form-switch-bg) !important;
}

.form-check-input[class*="update"]:checked,
.form-check-input.update:checked {
    background-color: #F8B425 !important;
    border-color: #F8B425 !important;
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
    background-image: var(--bs-form-switch-bg) !important;
}

.form-check-input[class*="delete"]:checked,
.form-check-input.delete:checked {
    background-color: #5C0385 !important;
    border-color: #5C0385 !important;
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
    background-image: var(--bs-form-switch-bg) !important;
}
.form-range::-webkit-slider-thumb { background-color: var(--gs-teal) !important; }
.form-range::-moz-range-thumb     { background-color: var(--gs-teal) !important; }

/* Valid / Invalid */
.form-control.is-valid, .was-validated .form-control:valid {
    border-color: #38a169 !important;
}
.form-control.is-invalid, .was-validated .form-control:invalid {
    border-color: #e53e3e !important;
}

/* ── Filter select (used in list-page filter bars) ──
   Usage: <select class="gs-filter-select"> or class="filter-select"
══════════════════════════════════════════════════════════════ */
.gs-filter-select,
.filter-select {
    appearance: none !important;
    -webkit-appearance: none !important;
    background-color: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 7px !important;
    padding: 8px 32px 8px 12px !important;
    font-size: 13px !important;
    color: #374151 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    cursor: pointer !important;
    width: 100% !important;
    transition: border-color .15s, box-shadow .15s !important;
}
.gs-filter-select:focus,
.filter-select:focus {
    outline: none !important;
    border-color: var(--gs-teal) !important;
    box-shadow: 0 0 0 3px rgba(45,184,176,.12) !important;
}

/* ══════════════════════════════════════════════════════════════
   5. NAVIGATION — tabs, pills, navbar
══════════════════════════════════════════════════════════════ */

/* Nav pills */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--gs-teal) !important;
    color: #fff !important;
}
.nav-pills .nav-link {
    color: var(--gs-navy) !important;
}
.nav-pills .nav-link:hover {
    background-color: var(--gs-teal-lt) !important;
    color: var(--gs-navy) !important;
}

/* Nav tabs */
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    color: var(--gs-teal) !important;
    border-bottom-color: var(--gs-teal) !important;
    font-weight: 700 !important;
}
.nav-tabs .nav-link:hover {
    border-color: var(--gs-teal-lt) var(--gs-teal-lt) #dee2e6 !important;
    color: var(--gs-teal2) !important;
}

/* Skote custom tab */
.nav-tabs-custom .nav-item .nav-link.active { color: var(--gs-teal) !important; }
.nav-tabs-custom .nav-item .nav-link:after  { background: var(--gs-teal) !important; }

/* ══════════════════════════════════════════════════════════════
   6. CARDS
══════════════════════════════════════════════════════════════ */
.card {
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05) !important;
}
.card-header {
    background-color: #f7fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
    font-weight: 600 !important;
    color: var(--gs-navy) !important;
}
.card-footer {
    background-color: #f7fafc !important;
    border-top: 1px solid #e2e8f0 !important;
}
.card-title { color: var(--gs-navy) !important; font-weight: 700 !important; }

/* ── Page section cards (filter bar + table wrapper) ──
   Usage: <div class="gs-filter-card"> and <div class="gs-table-card">
══════════════════════════════════════════════════════════════ */
.gs-filter-card,
.filter-card {
    background: #fff;
    border: 1px solid #e8ecf4;
    border-radius: 10px;
    padding: 18px 22px 16px;
    margin-bottom: 20px;
    box-shadow: 0 1px 4px rgba(26,35,64,.05);
}

.gs-table-card,
.table-card {
    background: #fff;
    border: 1px solid #e8ecf4;
    border-radius: 10px;
    padding: 20px 22px;
    box-shadow: 0 1px 4px rgba(26,35,64,.05);
}

/* ══════════════════════════════════════════════════════════════
   7. TABLES
══════════════════════════════════════════════════════════════ */
.table > thead {
    background-color: #f8fafc;
}
.table > thead th {
    color: #374151 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .5px !important;
    border-bottom: 2px solid #e8ecf4 !important;
    /* padding: 10px 12px !important; */
    white-space: nowrap !important;
}
.table > tbody td {
    font-size: 13px !important;
    color: #374151 !important;
    padding: 11px 12px !important;
    vertical-align: middle !important;
    border-bottom: 1px solid #f1f5f9 !important;
}
.table > tbody tr:last-child td { border-bottom: none !important; }
.table-hover > tbody > tr:hover > * {
    background-color: #f8fafc !important;
    color: var(--gs-navy) !important;
}
.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(45,184,176,.04) !important;
}

/* DataTables overrides */
.dataTables_wrapper .dataTables_filter input{
     border: 1px solid #e2e8f0 !important;
    border-radius: 6px !important;
    padding: 5px 10px !important;
    font-size: 13px !important;
    color: #374151;
    outline: none !important;
    width: 600px !important;
}

.dataTables_wrapper .dataTables_length select {
    border: 1px solid #e2e8f0 !important;
    border-radius: 6px !important;
    padding: 5px 10px !important;
    font-size: 13px !important;
    color: #374151 ;
    outline: none !important;
    width: 65px !important;
}
.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
    border-color: var(--gs-teal) !important;
    box-shadow: 0 0 0 .15rem rgba(45,184,176,.2) !important;
}
.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dataTables_length label {
    font-size: 13px !important;
    color: #6b7280 !important;
}
.dataTables_wrapper .dataTables_info {
    color: #6b7280 !important;
    font-size: 13px !important;
    margin-top: 14px !important;
}
.dataTables_wrapper .dataTables_paginate {
    font-size: 13px !important;
    color: #6b7280 !important;
    margin-top: 14px !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--gs-navy) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 6px !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.current) {
    background: #f1f5f9 !important;
    color: var(--gs-navy) !important;
    border: none !important;
    border-radius: 6px !important;
}

/* Suppress DataTables' built-in processing overlay (using Loader utility instead) */
.dataTables_processing { display: none !important; }
/* =========================================
   GLOBAL DATATABLE PROCESSING LOADER
========================================= */
/* .dataTables_wrapper .dataTables_processing {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9999 !important;

    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 6px !important;

    width: 100vw !important;
    height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;

    background: rgba(255, 255, 255, 0.6) !important;
    border: none !important;
    box-shadow: none !important;
    font-size: 0 !important;   /* hide default text */
    /* color: transparent !important;
} */

/* Create 5 animated bars using box-shadow trick */
/* .dataTables_wrapper .dataTables_processing::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 50px;
    background: #4c86f9;
    animation: dtScale 0.9s ease-in-out infinite;
    box-shadow:
        10px 0 0 #49a84c,
        20px 0 0 #f6bb02,
        30px 0 0 #f6bb02,
        40px 0 0 #2196f3;
} */

/* Optional smoother bar illusion */
/* @keyframes dtScale { 
    0%, 40%, 100% {
        transform: scaleY(0.05);
    }
    20% {
        transform: scaleY(1);
    }
} */
/* ══════════════════════════════════════════════════════════════
   8. MODALS
══════════════════════════════════════════════════════════════ */
.modal-content {
    border-radius: 12px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 8px 30px rgba(0,0,0,.15) !important;
}
.modal-header {
    background: linear-gradient(90deg, var(--gs-navy), var(--gs-navy3)) !important;
    border-radius: 12px 12px 0 0 !important;
    border-bottom: none !important;
    padding: 14px 20px !important;
}
.modal-title {
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 14px !important;
}
.modal-header .btn-close {
    filter: invert(1) !important;       /* directly inverts black → white */
}
.modal-footer {
    border-top: 1px solid #e2e8f0 !important;
    background: #f9fafb !important;
    border-radius: 0 0 12px 12px !important;
}
.modal-footer .btn-secondary {
    background-color: #f0f4f8 !important;
    color: #4a5568 !important;
    border: 1px solid #d0d8e8 !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
}
.modal-footer .btn-secondary:hover {
    background-color: #e2e8f0 !important;
}

/* ══════════════════════════════════════════════════════════════
   9. ALERTS
══════════════════════════════════════════════════════════════ */
.alert-primary {
    color: var(--gs-navy) !important;
    background-color: var(--gs-teal-lt) !important;
    border-color: var(--gs-teal-mid) !important;
}
.alert-success  { color: #276749 !important; background-color: #c6f6d5 !important; border-color: #9ae6b4 !important; }
.alert-danger   { color: #742a2a !important; background-color: #fed7d7 !important; border-color: #feb2b2 !important; }
.alert-warning  { color: #744210 !important; background-color: #fefcbf !important; border-color: #faf089 !important; }
.alert-info     { color: #2a4365 !important; background-color: #bee3f8 !important; border-color: #90cdf4 !important; }
.alert-secondary { color: var(--gs-navy) !important; background-color: #e8ecf4 !important; border-color: #c5cde6 !important; }

/* ══════════════════════════════════════════════════════════════
   10. BADGES
══════════════════════════════════════════════════════════════ */
.badge.bg-primary   { background-color: var(--gs-teal) !important; color: #fff !important; }
.badge.bg-secondary { background-color: var(--gs-navy) !important; color: #fff !important; }
.badge.bg-success   { background-color: #38a169 !important; color: #fff !important; }
.badge.bg-danger    { background-color: #e53e3e !important; color: #fff !important; }
.badge.bg-warning   { background-color: #d69e2e !important; color: #fff !important; }
.badge.bg-info      { background-color: #3182ce !important; color: #fff !important; }

.badge-soft-primary   { background-color: var(--gs-teal-lt) !important; color: var(--gs-teal2) !important; }
.badge-soft-secondary { background-color: #e8ecf4 !important; color: var(--gs-navy) !important; }
.badge-soft-success   { background-color: #c6f6d5 !important; color: #276749 !important; }
.badge-soft-danger    { background-color: #fed7d7 !important; color: #c53030 !important; }
.badge-soft-warning   { background-color: #fefcbf !important; color: #b7791f !important; }
.badge-soft-info      { background-color: #bee3f8 !important; color: #2b6cb0 !important; }

/* ══════════════════════════════════════════════════════════════
   11. PAGINATION
══════════════════════════════════════════════════════════════ */
.page-item.active .page-link {
    background-color: var(--gs-teal) !important;
    border-color: var(--gs-teal) !important;
    color: #fff !important;
}
.page-link {
    color: var(--gs-navy) !important;
}
.page-link:hover {
    background-color: var(--gs-teal-lt) !important;
    color: var(--gs-navy) !important;
    border-color: var(--gs-teal-mid) !important;
}
.page-link:focus {
    box-shadow: 0 0 0 .15rem rgba(45,184,176,.25) !important;
}

/* ══════════════════════════════════════════════════════════════
   12. DROPDOWNS
══════════════════════════════════════════════════════════════ */
.dropdown-item.active,
.dropdown-item:active {
    background-color: #113d68 !important;
    color: var(--gs-navy) !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--gs-teal-lt) !important;
    color: var(--gs-navy) !important;
}

/* ══════════════════════════════════════════════════════════════
   13. PROGRESS BARS
══════════════════════════════════════════════════════════════ */
.progress-bar {
    background-color: var(--gs-teal) !important;
}
.progress-bar.bg-primary  { background-color: var(--gs-teal) !important; }
.progress-bar.bg-success  { background-color: #38a169 !important; }
.progress-bar.bg-danger   { background-color: #e53e3e !important; }
.progress-bar.bg-warning  { background-color: #d69e2e !important; }
.progress-bar.bg-info     { background-color: #3182ce !important; }

/* ══════════════════════════════════════════════════════════════
   14. LIST GROUPS
══════════════════════════════════════════════════════════════ */
.list-group-item.active {
    background-color: var(--gs-teal) !important;
    border-color: var(--gs-teal) !important;
    color: #fff !important;
}
.list-group-item-action:hover,
.list-group-item-action:focus {
    background-color: var(--gs-teal-lt) !important;
    color: var(--gs-navy) !important;
}
.list-group-item-primary {
    color: var(--gs-navy) !important;
    background-color: var(--gs-teal-lt) !important;
}

/* ══════════════════════════════════════════════════════════════
   15. ACCORDION
══════════════════════════════════════════════════════════════ */
.accordion-button:not(.collapsed) {
    color: var(--gs-teal2) !important;
    background-color: var(--gs-teal-lt) !important;
    box-shadow: inset 0 -1px 0 var(--gs-teal-mid) !important;
}
.accordion-button:focus {
    border-color: var(--gs-teal) !important;
    box-shadow: 0 0 0 .15rem rgba(45,184,176,.25) !important;
}

/* ══════════════════════════════════════════════════════════════
   16. TOASTS
══════════════════════════════════════════════════════════════ */
.toast-header {
    background-color: var(--gs-teal-lt) !important;
    color: var(--gs-navy) !important;
    border-bottom: 1px solid var(--gs-teal-mid) !important;
}

/* ══════════════════════════════════════════════════════════════
   17. BREADCRUMB
══════════════════════════════════════════════════════════════ */
.breadcrumb-item > a { color: var(--gs-teal2) !important; }
.breadcrumb-item.active { color: var(--gs-navy) !important; font-weight: 600; }

/* ══════════════════════════════════════════════════════════════
   18. PAGE LAYOUT — topbar, sidebar, footer (Skote overrides)
══════════════════════════════════════════════════════════════ */

/* Topbar */
#page-topbar,
.navbar-header,
.topbar-left,
.navbar-brand-box {
    background: linear-gradient(90deg, var(--gs-navy) 0%, var(--gs-navy2) 40%, var(--gs-navy3) 100%) !important;
}

/* Left sidebar (Skote) */
.vertical-menu {
    background: var(--gs-navy) !important;
}
#sidebar-menu ul li a {
    color: rgba(255,255,255,.65) !important;
}
#sidebar-menu ul li a:hover,
#sidebar-menu ul li a.active {
    color: #fff !important;
    background: rgba(45,184,176,.15) !important;
}
#sidebar-menu ul li a i {
    color: rgba(255,255,255,.5) !important;
}
#sidebar-menu ul li a:hover i,
#sidebar-menu ul li a.active i {
    color: var(--gs-teal) !important;
}
.menu-title { color: rgba(255,255,255,.35) !important; }
.mm-active > a,
.mm-active .active {
    color: #fff !important;
}
.mm-active > a i { color: var(--gs-teal) !important; }

/* Vertical menu active state */
.vertical-menu .navbar-brand-box {
    background: var(--gs-navy) !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
}

/* Footer */
.footer {
    background: #fff !important;
    border-top: 1px solid #e2e8f0 !important;
    color: #718096 !important;
}

/* Page content background */
.main-content, .page-content {
    background: #f0f4f8 !important;
}

/* ══════════════════════════════════════════════════════════════
   19. BACKGROUND UTILITY OVERRIDES
══════════════════════════════════════════════════════════════ */
.bg-primary   { background-color: var(--gs-teal) !important; }
.bg-secondary { background-color: var(--gs-navy) !important; }
.bg-success   { background-color: #38a169 !important; }
.bg-danger    { background-color: #e53e3e !important; }
.bg-warning   { background-color: #d69e2e !important; }
.bg-info      { background-color: #3182ce !important; }

.bg-primary.bg-soft   { background-color: var(--gs-teal-lt) !important; }
.bg-secondary.bg-soft { background-color: #e8ecf4 !important; }
.bg-success.bg-soft   { background-color: #c6f6d5 !important; }
.bg-danger.bg-soft    { background-color: #fed7d7 !important; }
.bg-warning.bg-soft   { background-color: #fefcbf !important; }
.bg-info.bg-soft      { background-color: #bee3f8 !important; }

/* ══════════════════════════════════════════════════════════════
   20. TEXT COLOR UTILITIES
══════════════════════════════════════════════════════════════ */
.text-primary   { color: var(--gs-teal) !important; }
.text-secondary { color: var(--gs-navy) !important; }
.text-success   { color: #38a169 !important; }
.text-danger    { color: #e53e3e !important; }
.text-warning   { color: #d69e2e !important; }
.text-info      { color: #3182ce !important; }
.text-muted     { color: #718096 !important; }

/* ══════════════════════════════════════════════════════════════
   21. SELECT2 (if used)
══════════════════════════════════════════════════════════════ */
.select2-container--default .select2-selection--single:focus,
.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--gs-teal) !important;
    box-shadow: 0 0 0 .15rem rgba(45,184,176,.2) !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--gs-teal) !important;
}

/* ══════════════════════════════════════════════════════════════
   22. SPINNER / LOADER
══════════════════════════════════════════════════════════════ */
.spinner-border.text-primary { color: var(--gs-teal) !important; }
.spinner-grow.text-primary   { color: var(--gs-teal) !important; }

/* ══════════════════════════════════════════════════════════════
   23. SCROLLBAR (Webkit browsers)
══════════════════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f0f4f8; }
::-webkit-scrollbar-thumb {
    background: var(--gs-teal-mid);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: var(--gs-teal2); }

/* ══════════════════════════════════════════════════════════════
   24. PAGE TOPBAR COMPONENT  (.gs-page-topbar)
       A flex row used at the top of every list page showing the
       page heading on the left and a "+ Add" CTA on the right.

       Usage:
       <div class="gs-page-topbar">
           <h4 class="gs-page-title">LEADS</h4>
           <a href="..." class="btn-add">+ LEAD</a>
       </div>
══════════════════════════════════════════════════════════════ */
.gs-page-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
}
.gs-page-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--gs-navy);
    margin: 0;
    letter-spacing: -.3px;
}

/* ══════════════════════════════════════════════════════════════
   25. FILTER BAR LAYOUT  (.gs-filter-row / .gs-filter-group)
       Use inside .gs-filter-card.

       Usage:
       <div class="gs-filter-card">
         <form>
           <div class="gs-filter-row">
             <div class="gs-filter-group">
               <label class="gs-filter-label">Source</label>
               <select class="gs-filter-select">...</select>
             </div>
             ...
             <div class="gs-filter-actions">
               <button class="gs-btn-search">...</button>
               <a class="gs-btn-reset">...</a>
             </div>
           </div>
         </form>
       </div>
══════════════════════════════════════════════════════════════ */
.gs-filter-row,
.filter-row {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    flex-wrap: wrap;
}
.gs-filter-group,
.filter-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 160px;
    flex: 1;
    max-width: 220px;
}
.gs-filter-label,
.filter-group label {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #6b7280 !important;
    text-transform: uppercase !important;
    letter-spacing: .5px !important;
    margin-bottom: 0 !important;
}

/* Filter action buttons (search + reset pair) */
.gs-filter-actions,
.filter-actions {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    padding-bottom: 1px;
}
.gs-btn-search,
.btn-filter-search {
    background: var(--gs-navy) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 7px !important;
    width: 38px ;
    height: 38px ;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: background .15s !important;
    font-size: 14px !important;
}
.gs-btn-search:hover,
.btn-filter-search:hover { background: var(--gs-navy2) !important; }

.gs-btn-reset,
.btn-filter-reset {
    background: #e53e3e !important;
    color: #fff !important;
    border: none !important;
    border-radius: 7px !important;
    width: 38px;
    height: 38px ;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: background .15s !important;
    font-size: 14px !important;
    text-decoration: none !important;
}
.gs-btn-reset:hover,
.btn-filter-reset:hover { background: #c53030 !important; color: #fff !important; }

/* ══════════════════════════════════════════════════════════════
   26. TABLE ACTION BUTTONS  (.gs-action-btn)
       Small icon-only square buttons used in table Action columns.

       Usage:
       <a class="gs-action-btn" href="..." title="View"><i class="fas fa-eye"></i></a>
       <a class="gs-action-btn" href="javascript:void(0)" title="Notes"><i class="fas fa-sticky-note"></i></a>
══════════════════════════════════════════════════════════════ */
.gs-action-btn,
.action-btn {
    width: 30px !important;
    height: 30px !important;
    border-radius: 6px !important;
    border: 1px solid #e2e8f0 !important;
    background: #fff !important;
    color: #6b7280 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 12px !important;
    cursor: pointer !important;
    transition: all .15s !important;
    text-decoration: none !important;
}
.gs-action-btn:hover,
.action-btn:hover {
    background: #f8fafc !important;
    border-color: var(--gs-teal) !important;
    color: var(--gs-teal) !important;
}

/* ══════════════════════════════════════════════════════════════
   27. AVATAR COMPONENTS  (.gs-avatar / .gs-avatar-initials)
       Circular user avatar — image or initials fallback.

       Usage (image):    <img class="gs-avatar" src="..." alt="...">
       Usage (initials): <span class="gs-avatar-initials">AB</span>
══════════════════════════════════════════════════════════════ */
.gs-avatar,
.lead-avatar {
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
}
.gs-avatar-initials,
.lead-avatar-initials {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #6c757d;
    color: #fff;
    font-weight: 700;
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Avatar size variants */
.gs-avatar-xsm { width: 20px !important; height: 20px !important; font-size: 8px !important; }
.gs-avatar-sm { width: 24px !important; height: 24px !important; font-size: 9px !important; }
.gs-avatar-md { width: 36px !important; height: 36px !important; font-size: 13px !important; }
.gs-avatar-lg { width: 44px !important; height: 44px !important; font-size: 16px !important; }

/* Avatar teal gradient (used for admin/self user) */
.gs-avatar-teal {
    background: linear-gradient(135deg, var(--gs-teal), #1a8a84) !important;
}

/* ══════════════════════════════════════════════════════════════
   28. STATUS & DAYS BADGES
       Pill-shaped badges for status labels and day-count columns.

       Usage:
       <span class="gs-status-badge">New</span>
       <span class="gs-days-badge">20</span>
       <span class="gs-days-badge high">176</span>   ← red (≥100 days)
       <span class="gs-days-badge mid">45</span>    ← amber (≥30 days)
══════════════════════════════════════════════════════════════ */
.gs-status-badge,
.status-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    background: var(--gs-teal-mid);
    color: #0f6e56;
}

.gs-days-badge,
.days-badge {
    display: inline-block;
    min-width: 34px;
    text-align: center;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    background: #f1f5f9;
    color: #374151;
}
.gs-days-badge.high,
.days-badge.high { background: #dea7a7; color: #ab1414; }
.gs-days-badge.mid,
.days-badge.mid  { background: #fffbeb; color: #92400e; }

/* Email link in tables */
.gs-email-link,
.email-link {
    /* color: var(--gs-teal2) !important; */
    text-decoration: none !important;
    font-size: 13px !important;
}
.gs-email-link:hover,
.email-link:hover { text-decoration: underline !important; }

/* ══════════════════════════════════════════════════════════════
   29. CUSTOM GLITZZ COMPONENTS (reusable across all pages)
══════════════════════════════════════════════════════════════ */

/* Section card title bar */
.gs-card-tb {
    display: flex; align-items: center; gap: 8px;
    padding: 11px 14px; border-bottom: 1px solid #e2e8f0;
}
.gs-ctb-bar  { width: 3px; height: 14px; background: var(--gs-teal); border-radius: 2px; }
.gs-ctb-text { font-size: 13px; font-weight: 700; color: var(--gs-navy); }

/* Status badges used across pages */
.gs-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; padding: 4px 10px; border-radius: 20px;
    font-size: 12px; font-weight: 700;
}
.gs-d-green  { background: #c6f6d5; color: #276749; }
.gs-d-amber  { background: #fefcbf; color: #b7791f; }
.gs-d-orange { background: #fbd38d; color: #c05621; }
.gs-d-red    { background: #fed7d7; color: #c53030; }
.gs-d-teal   { background: var(--gs-teal-lt); color: var(--gs-teal2); }
.gs-d-navy   { background: #e8ecf4; color: var(--gs-navy); }

/* Action buttons used in tables (legacy aliases kept) */
.gs-act-edit {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px; border-radius: 5px;
    font-size: 11.5px; font-weight: 600; font-family: inherit;
    background: #dbeafe; color: #2563a8;
    border: 1px solid #bfdbfe; cursor: pointer; margin-right: 4px;
    text-decoration: none; transition: all .15s;
}
.gs-act-edit:hover { background: #2563a8; color: #fff; }

.gs-act-reason {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px; border-radius: 5px;
    font-size: 11.5px; font-weight: 600; font-family: inherit;
    background: #fee2e2; color: #c53030;
    border: 1px solid #fecaca; cursor: pointer;
    transition: all .15s;
}
.gs-act-reason:hover { background: #c53030; color: #fff; }

/* Source chip */
.gs-src-chip {
    display: inline-block; padding: 3px 10px; border-radius: 4px;
    font-size: 11px; font-weight: 600;
    background: var(--gs-teal-lt); color: var(--gs-teal2);
    border: 1px solid var(--gs-teal-mid);
}

/* ══════════════════════════════════════════════════════════════
   30. RESPONSIVE HELPERS
══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .gs-filter-row,
    .filter-row { flex-direction: column; gap: 10px; }

    .gs-filter-group,
    .filter-group { max-width: 100%; }

    .gs-filter-actions,
    .filter-actions { flex-direction: row; }

    .gs-page-topbar { flex-wrap: wrap; gap: 10px; }

    .gs-table-card,
    .table-card { padding: 14px 12px; }

    .gs-filter-card,
    .filter-card { padding: 14px 12px 12px; }
}

/* ══════════════════════════════════════════════════════════════
   31. JQUERY UI DATEPICKER — global theme
       Applies to every datepicker across the entire project.
══════════════════════════════════════════════════════════════ */
#ui-datepicker-div {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12) !important;
    padding: 8px !important;
    font-size: 12px !important;
    z-index: 99999 !important;
}
#ui-datepicker-div .ui-datepicker-header {
    background: #1a2340 !important;
    border: none !important;
    border-radius: 6px !important;
    color: #fff !important;
    padding: 6px 8px !important;
    margin-bottom: 6px !important;
}
#ui-datepicker-div .ui-datepicker-title {
    color: #fff !important;
}
#ui-datepicker-div .ui-datepicker-prev,
#ui-datepicker-div .ui-datepicker-next {
    background: transparent !important;
    border: none !important;
    color: #fff !important;
    cursor: pointer !important;
    top: 4px !important;
}
#ui-datepicker-div .ui-datepicker-prev span,
#ui-datepicker-div .ui-datepicker-next span {
    background: none !important;
}
#ui-datepicker-div .ui-datepicker-calendar {
    background: #ffffff !important;
    width: 100% !important;
}
#ui-datepicker-div .ui-datepicker-calendar th {
    color: #6b7280 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 4px !important;
    background: #ffffff !important;
}
#ui-datepicker-div .ui-datepicker-calendar td {
    background: #ffffff !important;
    padding: 1px !important;
}
#ui-datepicker-div .ui-datepicker-calendar td a,
#ui-datepicker-div .ui-datepicker-calendar td span {
    background: #ffffff !important;
    color: #374151 !important;
    border-radius: 6px !important;
    text-align: center !important;
    padding: 4px 6px !important;
    display: block !important;
    text-decoration: none !important;
}
#ui-datepicker-div .ui-datepicker-calendar td a:hover {
    background: #e6f7f6 !important;
    color: #0f6e56 !important;
}
#ui-datepicker-div .ui-datepicker-calendar .ui-state-active {
    background: #1a2340 !important;
    color: #fff !important;
}
#ui-datepicker-div .ui-datepicker-calendar .ui-state-highlight {
    background: #e6f7f6 !important;
    color: #0f6e56 !important;
}
#ui-datepicker-div select.ui-datepicker-month,
#ui-datepicker-div select.ui-datepicker-year {
    background: rgba(255,255,255,0.15) !important;
    color: #000000 !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    border-radius: 4px !important;
    padding: 2px 4px !important;
    font-size: 12px !important;
}