.navbar {
    background-color: #1a2e47;
}

.navbar .nav-link {
    font-size: 0.85rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    border-radius: 0.375rem;
    transition: background-color 0.15s ease;
}

.navbar .nav-link.active {
    background-color: rgba(255, 255, 255, 0.1);
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
    background-color: rgba(255, 255, 255, 0.2);
}

#global-search {
    background-color: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.25);
    color: #fff;
}

#global-search::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

#global-search:focus {
    background-color: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
    color: #fff;
    box-shadow: none;
}

.navbar .input-group .btn-outline-secondary {
    border-color: rgba(255, 255, 255, 0.25);
    color: #fff;
}

.navbar .input-group .btn-outline-secondary:hover {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
    color: #fff;
}

:root {
    --bs-border-color: #adb5bd;
    --bs-border-color-translucent: rgba(0, 0, 0, 0.2);
}

.card {
    border-color: #adb5bd;
}

.form-control,
.form-select {
    border-color: #adb5bd;
}

.input-group > .form-control,
.input-group > .form-select,
.input-group > .btn {
    border-color: #adb5bd;
}

.list-group-item {
    border-color: #adb5bd;
}

.table {
    --bs-table-border-color: #adb5bd;
    --bs-table-striped-bg: #dde1f0;
}

.dropdown-menu {
    border-color: #adb5bd;
}

.navbar .dropdown-menu .dropdown-item:hover,
.navbar .dropdown-menu .dropdown-item:focus {
    background-color: #c8d4f0 !important;
    color: #2d3e6b !important;
}

.collapse-toggle .bi-chevron-down {
    transition: transform 0.2s ease;
}

.collapse-toggle.collapsed .bi-chevron-down {
    transform: rotate(-90deg);
}

@keyframes row-flash {
    0% {
        border-color: #adb5bd;
        box-shadow: none;
    }
    25% {
        border-color: #0d6efd;
        box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.35);
    }
    75% {
        border-color: #0d6efd;
        box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.35);
    }
    100% {
        border-color: #adb5bd;
        box-shadow: none;
    }
}

.row-flash {
    border: 1px solid #adb5bd;
    border-radius: 0.375rem;
    animation: row-flash 1.2s ease-in-out;
}

.row-pending-delete {
    position: relative;
    border: 2px solid #dc3545 !important;
    border-radius: 0.375rem;
}

.row-pending-delete::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.65);
    border-radius: 0.375rem;
    pointer-events: none;
    z-index: 1;
}

.row-pending-delete input,
.row-pending-delete select,
.row-pending-delete textarea {
    pointer-events: none;
}

.row-pending-delete .undo-remove {
    position: relative;
    z-index: 2;
}

.btn-show-complete:hover {
    color: #fff;
}

@keyframes check-pop {
    0%   { transform: scale(0);   opacity: 0; }
    50%  { transform: scale(1.5); opacity: 1; }
    70%  { transform: scale(0.85); }
    85%  { transform: scale(1.15); }
    100% { transform: scale(1);   opacity: 1; }
}

.todo-check-animate {
    animation: check-pop 0.6s ease-out forwards;
}

.table tbody td a.text-decoration-none:hover,
.list-group-item a.text-decoration-none:hover,
a.text-decoration-none.text-muted:hover {
    text-decoration: underline !important;
}

/* ─── Dark mode overrides ─────────────────────────────────────────── */

/* bg-light doesn't adapt to dark mode — remap it to Bootstrap's theme-aware
   secondary background (#343a40) so card headers, completed todo rows, badges,
   etc. all stay readable without touching every template */
[data-bs-theme="dark"] .bg-light {
    background-color: var(--bs-secondary-bg) !important;
}

/* Coloured card headers → brand navy in dark mode.
   Scoped to .card-header so buttons, badges, etc. are unaffected. */
[data-bs-theme="dark"] .card-header.bg-primary,
[data-bs-theme="dark"] .card-header.bg-info,
[data-bs-theme="dark"] .card-header.text-bg-info,
[data-bs-theme="dark"] .card-header.text-bg-warning {
    background-color: #1a2e47 !important;
    color: #d6eaff !important;
}
[data-bs-theme="dark"] .card-header.bg-secondary {
    background-color: #152438 !important;
    color: #d6eaff !important;
}
[data-bs-theme="dark"] .card-header.bg-warning {
    background-color: #4a3500 !important;
    color: #ffd966 !important;
}
[data-bs-theme="dark"] .card-header.bg-danger {
    background-color: #4a1a1a !important;
    color: #f5b8b8 !important;
}

/* Badges: bg-warning/bg-info use text-dark which inverts to near-white in dark
   mode, giving poor contrast on yellow/teal. Switch to Bootstrap's own
   dark-mode subtle palette which is designed for this. */
/* Bootstrap's *-bg-subtle values in dark mode are darker than the page
   background itself, making badges invisible. Use a 20% tint instead so
   they always stand out against the dark body colour. */
[data-bs-theme="dark"] .badge.bg-warning {
    background-color: rgba(255, 193, 7, 0.2) !important;
    color: #ffd966 !important;
}
[data-bs-theme="dark"] .badge.bg-info {
    background-color: rgba(13, 202, 240, 0.2) !important;
    color: #6edff6 !important;
}

/* Buttons using text-dark on warning/info backgrounds */
[data-bs-theme="dark"] .btn-warning.text-dark,
[data-bs-theme="dark"] .btn-outline-warning.text-dark,
[data-bs-theme="dark"] .btn-info.text-dark,
[data-bs-theme="dark"] .btn-outline-info.text-dark {
    color: var(--bs-body-color) !important;
}

/* input-group-text bg-white → adapt to dark mode */
[data-bs-theme="dark"] .input-group-text.bg-white {
    background-color: var(--bs-tertiary-bg) !important;
    border-color: #495057;
    color: var(--bs-body-color);
}

/* Table striped rows — the light-purple tint doesn't work in dark mode */
[data-bs-theme="dark"] .table {
    --bs-table-striped-bg: rgba(255, 255, 255, 0.05);
}

/* Bootstrap 5.3 ships no dark-mode overrides for table-light or table-warning —
   fix them by overriding the CSS variables Bootstrap uses to paint every cell. */

/* table-light: map to the brand navy (thead, tfoot, any tbody row) */
[data-bs-theme="dark"] .table-light {
    --bs-table-color: #d6eaff;
    --bs-table-bg: #1a2e47;
    --bs-table-border-color: #2a4a69;
    --bs-table-striped-color: #d6eaff;
    --bs-table-striped-bg: #152840;
    --bs-table-hover-color: #d6eaff;
    --bs-table-hover-bg: #0f2035;
    --bs-table-active-color: #d6eaff;
    --bs-table-active-bg: #0f2035;
}

/* table-warning (overdue rows etc.): dark amber instead of near-white #fff3cd */
[data-bs-theme="dark"] .table-warning {
    --bs-table-color: #ffd966;
    --bs-table-bg: #332701;
    --bs-table-border-color: #664d03;
    --bs-table-striped-color: #ffd966;
    --bs-table-striped-bg: #2e2301;
    --bs-table-hover-color: #ffd966;
    --bs-table-hover-bg: #291f01;
    --bs-table-active-color: #ffd966;
    --bs-table-active-bg: #291f01;
}

/* Pending-delete overlay: white overlay → near-opaque dark overlay */
[data-bs-theme="dark"] .row-pending-delete::before {
    background: rgba(0, 0, 0, 0.65);
}

/* Navbar dropdown hover: swap the light-purple tint for a subtle light tint */
[data-bs-theme="dark"] .navbar .dropdown-menu .dropdown-item:hover,
[data-bs-theme="dark"] .navbar .dropdown-menu .dropdown-item:focus {
    background-color: rgba(255, 255, 255, 0.12) !important;
    color: #d0d8ff !important;
}

/* Border colours — Bootstrap dark mode uses lighter greys; nudge to match */
[data-bs-theme="dark"] {
    --bs-border-color: #495057;
    --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
}

[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] .list-group-item,
[data-bs-theme="dark"] .dropdown-menu {
    border-color: #495057;
}

[data-bs-theme="dark"] .input-group > .form-control,
[data-bs-theme="dark"] .input-group > .form-select,
[data-bs-theme="dark"] .input-group > .btn {
    border-color: #495057;
}

[data-bs-theme="dark"] .table {
    --bs-table-border-color: #495057;
}

/* row-flash animation border in dark mode */
[data-bs-theme="dark"] .row-flash {
    border-color: #495057;
}

@keyframes row-flash-dark {
    0%   { border-color: #495057; box-shadow: none; }
    25%  { border-color: #6ea8fe; box-shadow: 0 0 0 3px rgba(110, 168, 254, 0.35); }
    75%  { border-color: #6ea8fe; box-shadow: 0 0 0 3px rgba(110, 168, 254, 0.35); }
    100% { border-color: #495057; box-shadow: none; }
}

[data-bs-theme="dark"] .row-flash {
    animation: row-flash-dark 1.2s ease-in-out;
}

/* ─── Mobile optimisations (xs / sm) ─────────────────────────────── */

/* Allow dropdown menus to overflow table-responsive containers on mobile.
   Columns hidden with d-none d-md-table-cell mean these tables fit the
   viewport without horizontal scrolling, so the scroll container is not
   needed — and without it, position:absolute dropdowns are never clipped. */
@media (max-width: 991.98px) {
    .table-responsive {
        overflow: visible;
    }
}

/* Nav-tabs: scroll horizontally on small screens instead of wrapping
   or overflowing. Applies to client/business detail tabs. */
@media (max-width: 767.98px) {
    .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .nav-tabs::-webkit-scrollbar {
        display: none;
    }
    .nav-tabs .nav-link {
        white-space: nowrap;
    }
}

/* Navbar mobile menu: tighter vertical padding so the long nav list
   fits in the viewport; cap height + scroll as a safety net.
   Force flex-column on the open state so order-first on the search
   form moves it to the top of the menu. */
@media (max-width: 991.98px) {
    .navbar-collapse {
        max-height: calc(100svh - 68px);
        overflow-y: auto;
    }
    .navbar-collapse.show,
    .navbar-collapse.collapsing {
        display: flex !important;
        flex-direction: column;
        align-items: stretch;
    }
    .navbar .navbar-collapse .nav-link {
        padding-top: 0.3rem;
        padding-bottom: 0.3rem;
    }
}

/* Dim placeholder text across all inputs — opacity: 1 override from Bootstrap */
::placeholder,
.form-control::placeholder,
.form-select::placeholder {
    color: var(--bs-secondary-color);
    opacity: 0.55 !important;
}

/* Scrollable tab indicator — fades tabs into the page background on mobile */
.tab-scroll-container {
    position: relative;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1rem;
}
.tab-scroll-container::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 2px;
    width: 4rem;
    background: linear-gradient(to right, transparent, var(--bs-body-bg));
    pointer-events: none;
    transition: opacity 0.15s;
}
.tab-scroll-container.at-end::after { opacity: 0; }
@media (min-width: 992px) { .tab-scroll-container::after { display: none; } }

/* Flex truncation fix — flex-grow-1 items won't truncate text without this */
.min-width-0 { min-width: 0; }