/* =========================================
   I Got Thumbs – Base Theme (Bootstrap 5)
   Brand: #1869ae (primary) / #0f3d63 (deep) / #ffb703 (accent)
   Honors user’s OS theme; no forcing.
   ========================================= */

/* ===== Root Theme Tokens (LIGHT) ===== */
:root {
    /* Brand */
    --igt-primary: #1869ae;
    --igt-primary-rgb: 24,105,174;
    --igt-deep: #0f3d63;
    --igt-accent: #ffb703;
    /* Surfaces & text (light) */
    --igt-bg: #f8f9fb;
    --igt-surface: #ffffff;
    --igt-text: #222222;
    --igt-muted: #4b5b6a;
    /* Elevation */
    --shadow-sm: 0 .25rem .75rem rgba(0,0,0,.06);
    --shadow-md: 0 .5rem 1.25rem rgba(0,0,0,.08);
    --shadow-lg: 0 .75rem 1.75rem rgba(0,0,0,.12);
    /* Type scale */
    --fs-900: clamp(2rem, 3.2vw + 1rem, 3rem);
    --fs-800: clamp(1.5rem, 2.2vw + .8rem, 2rem);
    --fs-700: 1.5rem;
    --fs-600: 1.25rem;
    --fs-500: 1.125rem;
    --fs-400: 1rem;
    /* Spacing */
    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    /* Let UA know default light tokens exist */
    color-scheme: light;
}

/* Map brand into Bootstrap vars (light) */
:root {
    --bs-primary: var(--igt-primary);
    --bs-primary-rgb: var(--igt-primary-rgb);
    --bs-secondary: #6c757d;
    --bs-success: #2a9d8f;
    --bs-info: #00b4d8;
    --bs-warning: #f4a261;
    --bs-danger: #e63946;
    /* Core Bootstrap surfaces (light) */
    --bs-body-bg: var(--igt-bg);
    --bs-body-color: var(--igt-text);
    --bs-card-bg: var(--igt-surface);
    --bs-modal-bg: var(--igt-surface);
    --bs-offcanvas-bg: var(--igt-surface);
    --bs-dropdown-bg: var(--igt-surface);
    --bs-table-bg: var(--igt-surface);
    --bs-border-color: rgba(0,0,0,.12);
    --bs-link-color: var(--igt-primary);
    --bs-link-hover-color: #124e82;
}

/* ===== Base ===== */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat:wght@400;600;700&display=swap');

html, body {
    height: 100%;
}

body {
    background: var(--igt-bg);
    font-family: 'Montserrat', system-ui, -apple-system, Segoe UI, Arial, sans-serif;
    color: var(--igt-text);
    line-height: 1.6;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

/* Typography */
h1, h2, .navbar-brand, .brand-name {
    font-family: "Bebas Neue", Montserrat, Arial, sans-serif;
    letter-spacing: .8px;
}

h1 {
    font-size: var(--fs-900);
    line-height: 1.1;
    margin-bottom: var(--space-4);
}

h2 {
    font-size: var(--fs-800);
    line-height: 1.15;
    margin-bottom: var(--space-3);
}

h3 {
    font-size: var(--fs-700);
    line-height: 1.2;
    margin-bottom: var(--space-3);
}

p {
    font-size: var(--fs-400);
    margin: 0 0 var(--space-4);
}

/* Links */
a {
    color: var(--bs-link-color);
    text-decoration-thickness: .06em;
}

    a:hover {
        color: var(--bs-link-hover-color);
    }

/* Logo */
.logo {
    height: 60px;
    max-width: 100%;
    margin-right: 16px;
}

/* ===== Buttons ===== */
.btn-primary, .bg-primary {
    background-color: var(--igt-primary) !important;
}

.btn-primary {
    border: none;
    box-shadow: 0 0 0 0 rgba(var(--igt-primary-rgb), .4);
    transition: box-shadow .2s, transform .05s;
}

    .btn-primary:hover {
        box-shadow: 0 0 0 .25rem rgba(var(--igt-primary-rgb), .25);
    }

    .btn-primary:active {
        transform: translateY(1px);
    }

.btn-outline-primary {
    border-color: var(--igt-primary);
    color: var(--igt-primary);
}

    .btn-outline-primary:hover {
        background: rgba(var(--igt-primary-rgb), .08);
        color: var(--igt-deep);
    }

/* Stronger focus rings */
:where(input, textarea, select, .form-control, .btn):focus {
    outline: none;
    box-shadow: 0 0 0 .2rem rgba(var(--igt-primary-rgb), .3) !important;
    border-color: rgba(var(--igt-primary-rgb), .65) !important;
}

/* ===== Cards ===== */
.card {
    border: 0;
    border-radius: 1rem;
    box-shadow: var(--shadow-sm);
    transition: transform .2s ease, box-shadow .2s ease;
    overflow: hidden;
    background: var(--bs-card-bg);
    color: var(--bs-body-color);
}

    .card:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-md);
    }

    .card .card-body {
        display: flex;
        flex-direction: column;
        gap: .75rem;
    }

.card-title {
    font-weight: 700;
    color: var(--igt-primary);
}

.card.border-brand {
    border-top: 4px solid var(--igt-accent);
}

/* ===== Sections & Utilities ===== */
.section {
    padding: var(--space-7) 0;
}

.section-light {
    background: #e8f2fb;
}

.section-warm {
    background: #fff7ea;
}

.shadow-md {
    box-shadow: var(--shadow-md);
}

.shadow-lg {
    box-shadow: var(--shadow-lg);
}

/* ===== Hero ===== */
.hero-colored {
    background: linear-gradient(135deg, var(--igt-primary) 0%, var(--igt-deep) 60%);
    color: #fff;
    position: relative;
    overflow: hidden;
}

    .hero-colored::after {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(800px 300px at 80% -10%, rgba(255,255,255,.15), transparent 60%), radial-gradient(600px 240px at 10% 110%, rgba(0,0,0,.06), transparent 60%);
        pointer-events: none;
    }

/* ===== Ribbon / Badges ===== */
.ribbon {
    display: inline-block;
    padding: .25rem .6rem;
    border-radius: .35rem;
    background: linear-gradient(135deg, var(--igt-accent), #ffd36a);
    color: #222;
    font-weight: 600;
}

.badge-accent {
    background: linear-gradient(135deg, var(--igt-accent), #ffd36a);
    color: #222;
}

/* ===== Footer ===== */
footer {
    background: linear-gradient(180deg, #f7fbff, #eef5fb);
    color: var(--igt-muted);
}

/* ===== Navbar / Offcanvas ===== */
.custom-navbar {
    background: linear-gradient(90deg, var(--igt-primary), var(--igt-deep)) !important;
    padding: .75rem 1rem;
}

    .custom-navbar .navbar-brand,
    .custom-navbar .nav-link {
        color: #fff !important;
        font-weight: 500;
    }

    .custom-navbar .brand-name {
        color: #fff !important;
        font-weight: 700;
    }

    .custom-navbar .nav-link:hover,
    .custom-navbar .nav-link.active {
        color: var(--igt-accent) !important;
    }

    .custom-navbar .nav-item.disabled .nav-link {
        color: rgba(255,255,255,.55) !important;
        pointer-events: none;
    }

    .custom-navbar .navbar-toggler {
        border-color: rgba(255,255,255,.5);
    }

    .custom-navbar .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,1%29' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    }

    .custom-navbar .navbar-brand img {
        height: 56px;
    }

@media (min-width: 992px) {
    .custom-navbar .navbar-nav {
        margin-left: 2rem;
    }
}

/* Offcanvas */
.custom-navbar .offcanvas {
    background: linear-gradient(180deg, var(--igt-deep), var(--igt-primary));
    color: #fff;
}

    .custom-navbar .offcanvas .nav-link {
        color: #fff !important;
        font-weight: 500;
    }

        .custom-navbar .offcanvas .nav-link:hover,
        .custom-navbar .offcanvas .nav-link.active {
            color: var(--igt-accent) !important;
            background: rgba(255,255,255,.08);
            border-radius: .375rem;
        }

    .custom-navbar .offcanvas .btn-outline-primary {
        border-color: #fff;
        color: #fff;
    }

        .custom-navbar .offcanvas .btn-outline-primary:hover {
            background: var(--igt-accent);
            border-color: var(--igt-accent);
            color: #1b1b1b;
        }

.custom-navbar .offcanvas-header .btn-close {
    filter: invert(1);
}

/* Optional compact offcanvas for lg+ only */
@media (min-width: 992px) {
    .offcanvas.offcanvas-end {
        width: 320px;
        border-radius: .5rem;
        margin: 1rem;
        box-shadow: var(--shadow-md);
    }
}

.offcanvas-backdrop {
    background-color: rgba(0,0,0,.4);
}

/* ===== Modal (card style) ===== */
.modal.modal-card .modal-content {
    border-radius: .75rem;
    border: 0;
    box-shadow: 0 .75rem 1.5rem rgba(0,0,0,.25);
    background: var(--bs-modal-bg);
    color: var(--bs-body-color);
}

.modal.modal-card .modal-header {
    background: var(--igt-primary);
    color: #fff;
    border-bottom: 0;
}

.modal.modal-card .modal-title {
    font-weight: 700;
}

.modal.modal-card .btn-close-white {
    filter: invert(1) grayscale(100%) brightness(200%);
}

.modal.modal-card .modal-body {
    background: var(--bs-modal-bg);
}

.modal.modal-card .modal-footer {
    background: color-mix(in oklab, var(--bs-modal-bg) 90%, #000 10%);
    border-top: 1px solid rgba(0,0,0,.05);
}

/* ===== Mobile CTA Bar (optional) ===== */
.mobile-cta {
    background: rgba(var(--igt-primary-rgb), .95);
}

/* ===== Responsive tweaks ===== */
@media (max-width: 768px) {
    .custom-navbar .navbar-brand img {
        height: 44px;
    }

    .custom-navbar .brand-name {
        font-size: 1.5rem;
    }

    .section {
        padding: var(--space-6) 0;
    }
}

/* ===== Motion & Contrast ===== */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ===== Little polish helpers ===== */
.text-white-75 {
    color: rgba(255,255,255,.85) !important;
}

.text-wrap-balance {
    text-wrap: balance;
}

.btn-lg.shadow-sm {
    box-shadow: 0 .5rem 1.25rem rgba(0,0,0,.15);
}

/* ===== Services page ===== */
.areas-menu {
    width: 280px;
    max-height: 320px;
    overflow: auto;
    border-radius: .5rem;
}

.service-card {
    border: 0;
    box-shadow: var(--shadow-sm);
    background: var(--bs-card-bg);
}

    .service-card:hover {
        transform: translateY(-3px);
        box-shadow: var(--shadow-md);
        transition: .2s;
    }

.table td, .table th {
    vertical-align: middle;
}

/* Mobile stacked table (opt-in via data-labels) */
@media (max-width:576px) {
    .table thead {
        display: none;
    }

    .table tbody tr {
        display: block;
        margin-bottom: 1rem;
        border: 1px solid rgba(0,0,0,.06);
        border-radius: .5rem;
        padding: .5rem .75rem;
        background: var(--bs-table-bg);
        color: var(--bs-body-color);
    }

    .table tbody td {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
    }

        .table tbody td::before {
            content: attr(data-label);
            font-weight: 600;
            color: #6c757d;
        }
}

/* ===== Contact / Contract / Forms ===== */
.card-header.bg-primary {
    background: var(--bs-primary) linear-gradient(135deg, var(--bs-primary), #0f3d63);
}

.input-group .input-group-text i {
    opacity: .8;
}

.form-text {
    color: #6c757d;
}

#photoList {
    word-break: break-word;
}

.sig-wrap {
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
}

.sticky-submit {
    position: sticky;
    bottom: .5rem;
    background: color-mix(in oklab, var(--bs-body-bg) 90%, #fff 10%);
    padding-top: .5rem;
}

/* Print hygiene */
@media print {
    .sticky-submit {
        position: static;
        background: transparent;
    }

    .btn, .input-group-text, .dropdown, .navbar, .offcanvas {
        display: none !important;
    }

    .card, .card-header, .card-body {
        box-shadow: none !important;
        border: 1px solid #ccc;
        background: #fff;
        color: #000;
    }
}

/* ===== Tables / Dashboard ===== */
.table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
}

.table-hover tbody tr:hover {
    background-color: rgba(24,105,174,.04);
}

.kpi-card .fs-4 {
    letter-spacing: .2px;
}

.trend-up {
    color: #137333;
}

.trend-down {
    color: #b3261e;
}

.sticky-th th {
    position: sticky;
    top: 0;
    z-index: 1;
}

.table tbody td .badge {
    vertical-align: middle;
}

/* Subtle badge palette (light) */
.bg-secondary-subtle {
    background: #eef2f6 !important;
    color: #506072 !important;
}

.bg-info-subtle {
    background: rgba(0,180,216,.12) !important;
    color: #0b5c6f !important;
}

.bg-primary-subtle {
    background: rgba(24,105,174,.12) !important;
    color: #0f3d63 !important;
}

.bg-success-subtle {
    background: rgba(42,157,143,.12) !important;
    color: #1e6d61 !important;
}

.bg-warning-subtle {
    background: rgba(244,162,97,.18) !important;
    color: #8a4d1d !important;
}

.bg-danger-subtle {
    background: rgba(230,57,70,.12) !important;
    color: #8a2831 !important;
}

/* ===== Customers page ===== */
th.sortable {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 1.25rem;
}

    th.sortable::after {
        content: "\F574"; /* bootstrap-icons arrow-down-up */
        font-family: "bootstrap-icons";
        position: absolute;
        right: .5rem;
        top: 50%;
        transform: translateY(-50%);
        opacity: .4;
        font-size: .9rem;
    }

    th.sortable.sorted-asc::after {
        content: "\F148";
        opacity: .9;
    }
    /* chevron-up */
    th.sortable.sorted-desc::after {
        content: "\F14D";
        opacity: .9;
    }
/* chevron-down */

/* ============================================================
   DARK MODE – only swaps tokens/vars; keeps structure & layout
   ============================================================ */
@media (prefers-color-scheme: dark) {
    :root {
        /* Brand */
        --igt-primary: #1869ae;
        --igt-primary-rgb: 24,105,174;
        --igt-deep: #0f3d63;
        --igt-accent: #ffb703;
        /* Surfaces & text (light) */
        --igt-bg: #f8f9fb;
        --igt-surface: #ffffff;
        --igt-text: #222222;
        --igt-muted: #4b5b6a;
        /* Elevation */
        --shadow-sm: 0 .25rem .75rem rgba(0,0,0,.06);
        --shadow-md: 0 .5rem 1.25rem rgba(0,0,0,.08);
        --shadow-lg: 0 .75rem 1.75rem rgba(0,0,0,.12);
        /* Type scale */
        --fs-900: clamp(2rem, 3.2vw + 1rem, 3rem);
        --fs-800: clamp(1.5rem, 2.2vw + .8rem, 2rem);
        --fs-700: 1.5rem;
        --fs-600: 1.25rem;
        --fs-500: 1.125rem;
        --fs-400: 1rem;
        /* Spacing */
        --space-1: .25rem;
        --space-2: .5rem;
        --space-3: .75rem;
        --space-4: 1rem;
        --space-5: 1.5rem;
        --space-6: 2rem;
        --space-7: 3rem;
        /* Let UA know default light tokens exist */
        color-scheme: light;
    }

    /* Map brand into Bootstrap vars (light) */
    :root {
        --bs-primary: var(--igt-primary);
        --bs-primary-rgb: var(--igt-primary-rgb);
        --bs-secondary: #6c757d;
        --bs-success: #2a9d8f;
        --bs-info: #00b4d8;
        --bs-warning: #f4a261;
        --bs-danger: #e63946;
        /* Core Bootstrap surfaces (light) */
        --bs-body-bg: var(--igt-bg);
        --bs-body-color: var(--igt-text);
        --bs-card-bg: var(--igt-surface);
        --bs-modal-bg: var(--igt-surface);
        --bs-offcanvas-bg: var(--igt-surface);
        --bs-dropdown-bg: var(--igt-surface);
        --bs-table-bg: var(--igt-surface);
        --bs-border-color: rgba(0,0,0,.12);
        --bs-link-color: var(--igt-primary);
        --bs-link-hover-color: #124e82;
    }

    /* ===== Base ===== */
    @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat:wght@400;600;700&display=swap');

    html, body {
        height: 100%;
    }

    body {
        background: var(--igt-bg);
        font-family: 'Montserrat', system-ui, -apple-system, Segoe UI, Arial, sans-serif;
        color: var(--igt-text);
        line-height: 1.6;
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
    }

    /* Typography */
    h1, h2, .navbar-brand, .brand-name {
        font-family: "Bebas Neue", Montserrat, Arial, sans-serif;
        letter-spacing: .8px;
    }

    h1 {
        font-size: var(--fs-900);
        line-height: 1.1;
        margin-bottom: var(--space-4);
    }

    h2 {
        font-size: var(--fs-800);
        line-height: 1.15;
        margin-bottom: var(--space-3);
    }

    h3 {
        font-size: var(--fs-700);
        line-height: 1.2;
        margin-bottom: var(--space-3);
    }

    p {
        font-size: var(--fs-400);
        margin: 0 0 var(--space-4);
    }

    /* Links */
    a {
        color: var(--bs-link-color);
        text-decoration-thickness: .06em;
    }

        a:hover {
            color: var(--bs-link-hover-color);
        }

    /* Logo */
    .logo {
        height: 60px;
        max-width: 100%;
        margin-right: 16px;
    }

    /* ===== Buttons ===== */
    .btn-primary, .bg-primary {
        background-color: var(--igt-primary) !important;
    }

    .btn-primary {
        border: none;
        box-shadow: 0 0 0 0 rgba(var(--igt-primary-rgb), .4);
        transition: box-shadow .2s, transform .05s;
    }

        .btn-primary:hover {
            box-shadow: 0 0 0 .25rem rgba(var(--igt-primary-rgb), .25);
        }

        .btn-primary:active {
            transform: translateY(1px);
        }

    .btn-outline-primary {
        border-color: var(--igt-primary);
        color: var(--igt-primary);
    }

        .btn-outline-primary:hover {
            background: rgba(var(--igt-primary-rgb), .08);
            color: var(--igt-deep);
        }

    /* Stronger focus rings */
    :where(input, textarea, select, .form-control, .btn):focus {
        outline: none;
        box-shadow: 0 0 0 .2rem rgba(var(--igt-primary-rgb), .3) !important;
        border-color: rgba(var(--igt-primary-rgb), .65) !important;
    }

    /* ===== Cards ===== */
    .card {
        border: 0;
        border-radius: 1rem;
        box-shadow: var(--shadow-sm);
        transition: transform .2s ease, box-shadow .2s ease;
        overflow: hidden;
        background: var(--bs-card-bg);
        color: var(--bs-body-color);
    }

        .card:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-md);
        }

        .card .card-body {
            display: flex;
            flex-direction: column;
            gap: .75rem;
        }

    .card-title {
        font-weight: 700;
        color: var(--igt-primary);
    }

    .card.border-brand {
        border-top: 4px solid var(--igt-accent);
    }

    /* ===== Sections & Utilities ===== */
    .section {
        padding: var(--space-7) 0;
    }

    .section-light {
        background: #e8f2fb;
    }

    .section-warm {
        background: #fff7ea;
    }

    .shadow-md {
        box-shadow: var(--shadow-md);
    }

    .shadow-lg {
        box-shadow: var(--shadow-lg);
    }

    /* ===== Hero ===== */
    .hero-colored {
        background: linear-gradient(135deg, var(--igt-primary) 0%, var(--igt-deep) 60%);
        color: #fff;
        position: relative;
        overflow: hidden;
    }

        .hero-colored::after {
            content: "";
            position: absolute;
            inset: 0;
            background: radial-gradient(800px 300px at 80% -10%, rgba(255,255,255,.15), transparent 60%), radial-gradient(600px 240px at 10% 110%, rgba(0,0,0,.06), transparent 60%);
            pointer-events: none;
        }

    /* ===== Ribbon / Badges ===== */
    .ribbon {
        display: inline-block;
        padding: .25rem .6rem;
        border-radius: .35rem;
        background: linear-gradient(135deg, var(--igt-accent), #ffd36a);
        color: #222;
        font-weight: 600;
    }

    .badge-accent {
        background: linear-gradient(135deg, var(--igt-accent), #ffd36a);
        color: #222;
    }

    /* ===== Footer ===== */
    footer {
        background: linear-gradient(180deg, #f7fbff, #eef5fb);
        color: var(--igt-muted);
    }

    /* ===== Navbar / Offcanvas ===== */
    .custom-navbar {
        background: linear-gradient(90deg, var(--igt-primary), var(--igt-deep)) !important;
        padding: .75rem 1rem;
    }

        .custom-navbar .navbar-brand,
        .custom-navbar .nav-link {
            color: #fff !important;
            font-weight: 500;
        }

        .custom-navbar .brand-name {
            color: #fff !important;
            font-weight: 700;
        }

        .custom-navbar .nav-link:hover,
        .custom-navbar .nav-link.active {
            color: var(--igt-accent) !important;
        }

        .custom-navbar .nav-item.disabled .nav-link {
            color: rgba(255,255,255,.55) !important;
            pointer-events: none;
        }

        .custom-navbar .navbar-toggler {
            border-color: rgba(255,255,255,.5);
        }

        .custom-navbar .navbar-toggler-icon {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,1%29' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
        }

        .custom-navbar .navbar-brand img {
            height: 56px;
        }

    @media (min-width: 992px) {
        .custom-navbar .navbar-nav {
            margin-left: 2rem;
        }
    }

    /* Offcanvas */
    .custom-navbar .offcanvas {
        background: linear-gradient(180deg, var(--igt-deep), var(--igt-primary));
        color: #fff;
    }

        .custom-navbar .offcanvas .nav-link {
            color: #fff !important;
            font-weight: 500;
        }

            .custom-navbar .offcanvas .nav-link:hover,
            .custom-navbar .offcanvas .nav-link.active {
                color: var(--igt-accent) !important;
                background: rgba(255,255,255,.08);
                border-radius: .375rem;
            }

        .custom-navbar .offcanvas .btn-outline-primary {
            border-color: #fff;
            color: #fff;
        }

            .custom-navbar .offcanvas .btn-outline-primary:hover {
                background: var(--igt-accent);
                border-color: var(--igt-accent);
                color: #1b1b1b;
            }

    .custom-navbar .offcanvas-header .btn-close {
        filter: invert(1);
    }

    /* Optional compact offcanvas for lg+ only */
    @media (min-width: 992px) {
        .offcanvas.offcanvas-end {
            width: 320px;
            border-radius: .5rem;
            margin: 1rem;
            box-shadow: var(--shadow-md);
        }
    }

    .offcanvas-backdrop {
        background-color: rgba(0,0,0,.4);
    }

    /* ===== Modal (card style) ===== */
    .modal.modal-card .modal-content {
        border-radius: .75rem;
        border: 0;
        box-shadow: 0 .75rem 1.5rem rgba(0,0,0,.25);
        background: var(--bs-modal-bg);
        color: var(--bs-body-color);
    }

    .modal.modal-card .modal-header {
        background: var(--igt-primary);
        color: #fff;
        border-bottom: 0;
    }

    .modal.modal-card .modal-title {
        font-weight: 700;
    }

    .modal.modal-card .btn-close-white {
        filter: invert(1) grayscale(100%) brightness(200%);
    }

    .modal.modal-card .modal-body {
        background: var(--bs-modal-bg);
    }

    .modal.modal-card .modal-footer {
        background: color-mix(in oklab, var(--bs-modal-bg) 90%, #000 10%);
        border-top: 1px solid rgba(0,0,0,.05);
    }

    /* ===== Mobile CTA Bar (optional) ===== */
    .mobile-cta {
        background: rgba(var(--igt-primary-rgb), .95);
    }

    /* ===== Responsive tweaks ===== */
    @media (max-width: 768px) {
        .custom-navbar .navbar-brand img {
            height: 44px;
        }

        .custom-navbar .brand-name {
            font-size: 1.5rem;
        }

        .section {
            padding: var(--space-6) 0;
        }
    }

    /* ===== Motion & Contrast ===== */
    @media (prefers-reduced-motion: reduce) {
        * {
            animation-duration: .001ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: .001ms !important;
            scroll-behavior: auto !important;
        }
    }

    /* ===== Little polish helpers ===== */
    .text-white-75 {
        color: rgba(255,255,255,.85) !important;
    }

    .text-wrap-balance {
        text-wrap: balance;
    }

    .btn-lg.shadow-sm {
        box-shadow: 0 .5rem 1.25rem rgba(0,0,0,.15);
    }

    /* ===== Services page ===== */
    .areas-menu {
        width: 280px;
        max-height: 320px;
        overflow: auto;
        border-radius: .5rem;
    }

    .service-card {
        border: 0;
        box-shadow: var(--shadow-sm);
        background: var(--bs-card-bg);
    }

        .service-card:hover {
            transform: translateY(-3px);
            box-shadow: var(--shadow-md);
            transition: .2s;
        }

    .table td, .table th {
        vertical-align: middle;
    }

    /* Mobile stacked table (opt-in via data-labels) */
    @media (max-width:576px) {
        .table thead {
            display: none;
        }

        .table tbody tr {
            display: block;
            margin-bottom: 1rem;
            border: 1px solid rgba(0,0,0,.06);
            border-radius: .5rem;
            padding: .5rem .75rem;
            background: var(--bs-table-bg);
            color: var(--bs-body-color);
        }

        .table tbody td {
            display: flex;
            justify-content: space-between;
            gap: 1rem;
        }

            .table tbody td::before {
                content: attr(data-label);
                font-weight: 600;
                color: #6c757d;
            }
    }

    /* ===== Contact / Contract / Forms ===== */
    .card-header.bg-primary {
        background: var(--bs-primary) linear-gradient(135deg, var(--bs-primary), #0f3d63);
    }

    .input-group .input-group-text i {
        opacity: .8;
    }

    .form-text {
        color: #6c757d;
    }

    #photoList {
        word-break: break-word;
    }

    .sig-wrap {
        box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
    }

    .sticky-submit {
        position: sticky;
        bottom: .5rem;
        background: color-mix(in oklab, var(--bs-body-bg) 90%, #fff 10%);
        padding-top: .5rem;
    }

    /* Print hygiene */
    @media print {
        .sticky-submit {
            position: static;
            background: transparent;
        }

        .btn, .input-group-text, .dropdown, .navbar, .offcanvas {
            display: none !important;
        }

        .card, .card-header, .card-body {
            box-shadow: none !important;
            border: 1px solid #ccc;
            background: #fff;
            color: #000;
        }
    }

    /* ===== Tables / Dashboard ===== */
    .table thead th {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .table-hover tbody tr:hover {
        background-color: rgba(24,105,174,.04);
    }

    .kpi-card .fs-4 {
        letter-spacing: .2px;
    }

    .trend-up {
        color: #137333;
    }

    .trend-down {
        color: #b3261e;
    }

    .sticky-th th {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .table tbody td .badge {
        vertical-align: middle;
    }

    /* Subtle badge palette (light) */
    .bg-secondary-subtle {
        background: #eef2f6 !important;
        color: #506072 !important;
    }

    .bg-info-subtle {
        background: rgba(0,180,216,.12) !important;
        color: #0b5c6f !important;
    }

    .bg-primary-subtle {
        background: rgba(24,105,174,.12) !important;
        color: #0f3d63 !important;
    }

    .bg-success-subtle {
        background: rgba(42,157,143,.12) !important;
        color: #1e6d61 !important;
    }

    .bg-warning-subtle {
        background: rgba(244,162,97,.18) !important;
        color: #8a4d1d !important;
    }

    .bg-danger-subtle {
        background: rgba(230,57,70,.12) !important;
        color: #8a2831 !important;
    }

    /* ===== Customers page ===== */
    th.sortable {
        cursor: pointer;
        user-select: none;
        position: relative;
        padding-right: 1.25rem;
    }

        th.sortable::after {
            content: "\F574"; /* bootstrap-icons arrow-down-up */
            font-family: "bootstrap-icons";
            position: absolute;
            right: .5rem;
            top: 50%;
            transform: translateY(-50%);
            opacity: .4;
            font-size: .9rem;
        }

        th.sortable.sorted-asc::after {
            content: "\F148";
            opacity: .9;
        }
        /* chevron-up */
        th.sortable.sorted-desc::after {
            content: "\F14D";
            opacity: .9;
        }
}