@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 0.9375rem; /* slightly smaller base text (15px at 16px default) */
}

/* --- Mobile safety / prevent page-level horizontal scrolling --- */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

/* --- iOS Safari & Android: safe area (notch, home indicator); requires viewport-fit=cover --- */
body {
    padding-left: env(safe-area-inset-left, 0);
    padding-right: env(safe-area-inset-right, 0);
    padding-bottom: env(safe-area-inset-bottom, 0);
}

/* --- iOS Safari & Android: touch and scroll behaviour --- */
html {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
}
/* Reduce tap delay on touch devices */
a, button, .btn, [role="button"], input[type="submit"], input[type="button"] {
    touch-action: manipulation;
}

/* --- iOS: prevent zoom on input focus (requires font-size >= 16px on inputs) --- */
@media (max-width: 640.98px) {
    .form-control:not(.form-control-sm),
    .form-select:not(.form-select-sm),
    input:not([type="checkbox"]):not([type="radio"]):not(.form-control-sm),
    select:not(.form-select-sm),
    textarea {
        font-size: 16px !important;
    }
    /* Small inputs (e.g. time in scheduler) may still zoom on focus; keep readable */
    .form-control-sm {
        font-size: 14px !important;
    }
}

/* Flex children in the main layout must be allowed to shrink */
.page,
.main,
.content {
    min-width: 0;
    max-width: 100%;
}

img,
svg,
video,
canvas {
    max-width: 100%;
    height: auto;
}

.table-responsive {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* iOS Safari: momentum scrolling for scrollable containers used in app */
.scrollable-container,
.home-scrollable {
    -webkit-overflow-scrolling: touch;
}

a, .btn-link {
    color: #0366d6;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    bottom: env(safe-area-inset-bottom, 0);
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    padding-left: calc(1.25rem + env(safe-area-inset-left, 0));
    padding-right: calc(1.25rem + env(safe-area-inset-right, 0));
    position: fixed;
    width: 100%;
    z-index: 1000;
}
/* Reconnect UI: dimmed screen + centered rounded reconnect card */
#components-reconnect-modal,
.page[data-theme="dark"] ~ #components-reconnect-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2147483647;
    background-color: rgba(10, 12, 14, 0.55);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
}

#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: flex;
    align-items: center;
    justify-content: center;
}

.reconnect-card,
.page[data-theme="dark"] ~ #components-reconnect-modal .reconnect-card {
    min-width: 18rem;
    max-width: calc(100vw - 2rem);
    padding: 1.25rem 3.75rem 1.25rem 1.25rem;
    border-radius: 14px;
    border: 1px solid #3a4046;
    background-color: #2d3238;
    color: #f8f9fa;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: left;
    display: inline-flex;
    align-items: center;
    gap: 1rem;
}

.reconnect-text {
    color: inherit;
}

.reconnect-spinner,
.page[data-theme="dark"] ~ #components-reconnect-modal .reconnect-spinner {
    flex-shrink: 0;
    margin-left: auto;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    border: 3px solid rgba(248, 249, 250, 0.35);
    border-top-color: #f8f9fa;
    animation: reconnect-spinner 0.85s linear infinite;
}

#components-reconnect-modal.components-reconnect-failed .reconnect-text::after {
    content: " - retrying...";
    font-weight: 500;
    opacity: 0.9;
}

#components-reconnect-modal.components-reconnect-rejected .reconnect-text::after {
    content: " - please refresh";
    font-weight: 500;
    opacity: 0.9;
}

html[data-theme="light"] #components-reconnect-modal,
.page[data-theme="light"] ~ #components-reconnect-modal {
    background-color: rgba(222, 226, 230, 0.62);
}

html[data-theme="light"] .reconnect-card,
.page[data-theme="light"] ~ #components-reconnect-modal .reconnect-card {
    border-color: #d0d5da;
    background-color: #e9ecef;
    color: #212529;
    box-shadow: 0 10px 24px rgba(33, 37, 41, 0.18);
}

html[data-theme="light"] .reconnect-spinner,
.page[data-theme="light"] ~ #components-reconnect-modal .reconnect-spinner {
    border-color: rgba(33, 37, 41, 0.25);
    border-top-color: #212529;
}

@keyframes reconnect-spinner {
    to {
        transform: rotate(360deg);
    }
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
.home-header {
    display: flex;
    align-items: center;
    gap: 20px;
}

.home-image {
    width: 150px;
    height: auto;
}

.home-notifications-card {
    max-width: 100%;
    overflow: hidden;
}

.home-notifications-card .list-group-item span {
    word-break: break-word;
    min-width: 0;
}

@media (max-width: 640.98px) {
    .home-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .home-image {
        width: 96px;
    }
}
.login-wrapper {
    max-width: 400px;
    margin: 100px auto;
    padding: 30px;
    text-align: center;
    border: 1px solid #ddd;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    background-color: rgba(82, 96, 113);
}

.login-logo {
    width: 120px;
    margin-bottom: 20px;
}

.login-wrapper input.form-control {
    border-radius: 8px;
}

.btn-login {
    border-radius: 8px;
    padding: 10px;
    font-size: 1rem;
}
.auth a, .auth button {
    margin-left: 5px;
    margin-right: 5px;
}
.sidebar-logo-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 4.25rem; /* Match top-row height so logo centres properly */
    padding: 0;
    flex-shrink: 0;
}

/* 2. The Image: Strictly controls the size */
.sidebar-logo-img {
    max-height: 65px !important;
    max-width: 65px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important; /* Ensures it doesn't stretch or distort */
    display: block !important;
}
.sidebar {
    display: flex !important;
    flex-direction: column !important; /* Stack logo on top of menu */
}

/* ========== LIGHT THEME OVERRIDES (when .page has data-theme="light") ========== */
/* Page wrapper and main: light background so no black strip at bottom (e.g. Home) */
.page[data-theme="light"] {
    background-color: #f5f5f5 !important;
}
.page[data-theme="light"] .main {
    background-color: #f5f5f5 !important;
}
/* Bar/box behind scheduler buttons: light grey in light mode */
.page[data-theme="light"] .scheduler-change-bar {
    background-color: #e9ecef !important;
}

/* All text boxes / inputs: white background */
.page[data-theme="light"] .form-control,
.page[data-theme="light"] .form-select,
.page[data-theme="light"] input[type="text"],
.page[data-theme="light"] input[type="date"],
.page[data-theme="light"] input[type="number"],
.page[data-theme="light"] input[type="email"],
.page[data-theme="light"] textarea {
    background-color: #fff !important;
    color: #212529 !important;
    border-color: #ced4da !important;
}
.page[data-theme="light"] .main input::placeholder,
.page[data-theme="light"] .main textarea::placeholder {
    color: #495057 !important;
    opacity: 0.9;
}
.page[data-theme="light"] .main input::-webkit-input-placeholder,
.page[data-theme="light"] .main textarea::-webkit-input-placeholder {
    color: #495057 !important;
    opacity: 0.9;
}

/* Today / This Week / This Month + arrows: darker blue text and border (readable on #e9ecef toolbar) */
.page[data-theme="light"] .scheduler-change-bar .btn-outline-primary,
.page[data-theme="light"] .scheduler-change-bar .btn-outline-secondary {
    color: #0d6efd !important;
    border-color: #0d6efd !important;
}
.page[data-theme="light"] .scheduler-change-bar .btn-outline-primary:hover,
.page[data-theme="light"] .scheduler-change-bar .btn-outline-secondary:hover {
    color: #0a58ca !important;
    border-color: #0a58ca !important;
    background-color: rgba(13, 110, 253, 0.1) !important;
}
/* Template: darker cyan text and border (readable on #e9ecef toolbar) */
.page[data-theme="light"] .scheduler-change-bar .btn-outline-info {
    color: #0891b2 !important;
    border-color: #0891b2 !important;
}
.page[data-theme="light"] .scheduler-change-bar .btn-outline-info:hover {
    color: #0e7490 !important;
    border-color: #0e7490 !important;
    background-color: rgba(8, 145, 178, 0.1) !important;
}
/* Edit / Delete: darker amber text and border (readable on #e9ecef toolbar) */
.page[data-theme="light"] .scheduler-change-bar .btn-outline-warning {
    color: #b45309 !important;
    border-color: #b45309 !important;
}
.page[data-theme="light"] .scheduler-change-bar .btn-outline-warning:hover {
    color: #92400e !important;
    border-color: #92400e !important;
    background-color: rgba(180, 83, 9, 0.1) !important;
}
/* Total label: same colour as Edit/Delete on toolbar */
.page[data-theme="light"] .scheduler-change-bar .text-warning {
    color: #b45309 !important;
}

/* Scheduler / main content tables in light mode: white bg, black text, hover = slightly darker white */
.page[data-theme="light"] .main .table-dark,
.page[data-theme="light"] .main .table-dark th,
.page[data-theme="light"] .main .table-dark td {
    background-color: #fff !important;
    color: #212529 !important;
    border-color: #dee2e6 !important;
}
.page[data-theme="light"] .main .table-dark.table-hover {
    --bs-table-hover-bg: #e9ecef !important;
    --bs-table-hover-color: #212529 !important;
}
.page[data-theme="light"] .main .table-dark thead th {
    background-color: #e9ecef !important;
    color: #212529 !important;
    border-color: #dee2e6 !important;
}
.page[data-theme="light"] .main .table-dark tbody tr:hover,
.page[data-theme="light"] .main .table-dark.table-hover tbody tr:hover,
.page[data-theme="light"] .main .table-dark tbody tr:hover td,
.page[data-theme="light"] .main .table-dark.table-hover tbody tr:hover > * {
    background-color: #e9ecef !important;
    color: #212529 !important;
}
.page[data-theme="light"] .main .table-secondary,
.page[data-theme="light"] .main .table-secondary.text-dark th {
    background-color: #e9ecef !important;
    color: #212529 !important;
    border-color: #dee2e6 !important;
}
/* Modal/list .bg-dark tables (e.g. client selector) keep medium grey - scoped in modal only if needed */
.page[data-theme="light"] .modal .list-group-item.bg-dark,
.page[data-theme="light"] .modal .list-group-item-action.bg-dark {
    background-color: #495057 !important;
    color: #fff !important;
}
.page[data-theme="light"] .modal .list-group-item-action.bg-dark:hover {
    background-color: #5a6268 !important;
    color: #fff !important;
}
/* Client selector list and other bg-dark list items: medium grey, white text */
.page[data-theme="light"] .list-group-item-action.bg-dark,
.page[data-theme="light"] .list-group-item.bg-dark {
    background-color: #495057 !important;
    color: #fff !important;
    border-color: #5a6268 !important;
}
.page[data-theme="light"] .list-group-item-action.bg-dark:hover {
    background-color: #5a6268 !important;
    color: #fff !important;
}
.page[data-theme="light"] .modal .modal-content,
.page[data-theme="light"] .modal .modal-content.bg-dark,
.page[data-theme="light"] .modal .modal-content .modal-header,
.page[data-theme="light"] .modal .modal-content .modal-body {
    background-color: #fff !important;
    color: #212529 !important;
    border-color: #dee2e6 !important;
}
.page[data-theme="light"] .modal .modal-content.border-warning,
.page[data-theme="light"] .modal .modal-content.border-primary,
.page[data-theme="light"] .modal .modal-content.border-secondary,
.page[data-theme="light"] .modal .modal-content.border-success {
    border-color: #dee2e6 !important;
}

/* Light mode: remove heavy divider line above modal footers (e.g. Save Event button) */
.page[data-theme="light"] .modal .modal-footer {
    background-color: #fff !important;
    color: #212529 !important;
    border-top: none !important;
}
.page[data-theme="light"] .card.bg-dark,
.page[data-theme="light"] .card-header.bg-dark,
.page[data-theme="light"] .card-body.bg-dark {
    background-color: #fff !important;
    color: #212529 !important;
    border-color: #dee2e6 !important;
}
.page[data-theme="light"] .card.border-secondary,
.page[data-theme="light"] .border-secondary {
    border-color: #dee2e6 !important;
}
.page[data-theme="light"] .form-select.bg-dark,
.page[data-theme="light"] .form-control.bg-dark {
    background-color: #fff !important;
    color: #212529 !important;
    border-color: #ced4da !important;
}
.page[data-theme="light"] .navbar-dark {
    background-color: #dee2e6 !important;
    color: #000 !important;
}
/* Sidebar and its nav container: force #dee2e6 in light mode (global, so it wins) */
.page[data-theme="light"] .sidebar,
.page[data-theme="light"] .sidebar .nav-container {
    background-color: #dee2e6 !important;
}
/* Sidebar nav links and icons black in light mode */
.page[data-theme="light"] .sidebar .nav-item a,
.page[data-theme="light"] .sidebar .nav-link,
.page[data-theme="light"] .sidebar .nav-item .nav-icon,
.page[data-theme="light"] .sidebar .nav-item .bi {
    color: #000 !important;
}
.page[data-theme="light"] .sidebar .nav-item a:hover,
.page[data-theme="light"] .sidebar .nav-link:hover {
    color: #000 !important;
    background-color: rgba(0, 0, 0, 0.08) !important;
}
.page[data-theme="light"] .sidebar .nav-item a.active,
.page[data-theme="light"] .sidebar .nav-link.active {
    color: #000 !important;
    background-color: rgba(0, 0, 0, 0.12) !important;
}
.page[data-theme="light"] .navbar-toggler {
    border: none !important;
    color: #000 !important;
    background-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}
.page[data-theme="light"] .navbar-toggler .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(0, 0, 0, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}
.page[data-theme="light"] .navbar-toggler:hover,
.page[data-theme="light"] .navbar-toggler:focus,
.page[data-theme="light"] .navbar-toggler:active {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    color: #000 !important;
    background-color: rgba(0, 0, 0, 0.08) !important;
}
/* Only content area gets dark text in light theme; sidebar keeps light text */
.page[data-theme="light"] .main .text-white {
    color: #212529 !important;
}
.page[data-theme="light"] .badge.bg-info.text-dark {
    color: #212529 !important;
}
.page[data-theme="light"] .shadow-sm {
    box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.075) !important;
}
/* Apply Clients-page-style to all pages in light mode: light bg + dark text for list/card elements */
.page[data-theme="light"] .main .list-group-item:not(.bg-dark) {
    background-color: rgba(255,255,255,0.9) !important;
    color: #212529 !important;
    border-color: #dee2e6 !important;
}
.page[data-theme="light"] .main .list-group-item:not(.bg-dark):hover {
    background-color: #e9ecef !important;
}
.page[data-theme="light"] .main .list-group-item:not(.bg-dark) .text-primary {
    color: #0d6efd !important;
}
.page[data-theme="light"] .main .text-muted {
    color: #495057 !important;
}
.page[data-theme="light"] .main .list-group-item span.client-pet-name,
.page[data-theme="light"] .main .list-group-item .client-pet-name {
    color: #000 !important;
}
/* All outline-light buttons (Edit, etc.): black text and outline on all pages */
.page[data-theme="light"] .main .btn-outline-light {
    color: #000 !important;
    border-color: #000 !important;
}
.page[data-theme="light"] .main .btn-outline-info {
    color: #0891b2 !important;
    border-color: #0891b2 !important;
}
.page[data-theme="light"] .main .btn-outline-info:hover {
    color: #0e7490 !important;
    border-color: #0e7490 !important;
    background-color: rgba(8, 145, 178, 0.1) !important;
}
.page[data-theme="light"] .main .btn-outline-light:hover {
    color: #000 !important;
    border-color: #000 !important;
    background-color: #e9ecef !important;
}
/* Cards and alerts: same light background + dark text when in main content */
.page[data-theme="light"] .main .card:not(.bg-dark):not(.bg-success):not(.bg-danger):not(.bg-primary) {
    background-color: rgba(255,255,255,0.95) !important;
    color: #212529 !important;
    border-color: #dee2e6 !important;
}
/* Reports: Total Revenue (green), Total Expenses (red), Net Profit (blue) keep their colours in light mode */
.page[data-theme="light"] .main .card.bg-success {
    background-color: #198754 !important;
    color: #fff !important;
    border-color: #198754 !important;
}
.page[data-theme="light"] .main .card.bg-success .text-white,
.page[data-theme="light"] .main .card.bg-success h3,
.page[data-theme="light"] .main .card.bg-success h6 {
    color: #fff !important;
}
.page[data-theme="light"] .main .card.bg-danger {
    background-color: #dc3545 !important;
    color: #fff !important;
    border-color: #dc3545 !important;
}
.page[data-theme="light"] .main .card.bg-danger .text-white,
.page[data-theme="light"] .main .card.bg-danger h3,
.page[data-theme="light"] .main .card.bg-danger h6 {
    color: #fff !important;
}
.page[data-theme="light"] .main .card.bg-primary {
    background-color: #0d6efd !important;
    color: #fff !important;
    border-color: #0d6efd !important;
}
.page[data-theme="light"] .main .card.bg-primary .text-white,
.page[data-theme="light"] .main .card.bg-primary h3,
.page[data-theme="light"] .main .card.bg-primary h6 {
    color: #fff !important;
}
.page[data-theme="light"] .main .alert {
    border-color: #dee2e6 !important;
}

/* Expenses page: browse (file input) button grey, rounded like other buttons; table white with black text in light mode */
.page[data-theme="light"] .main input[type="file"]::file-selector-button {
    background-color: #6c757d !important;
    color: #fff !important;
    border-color: #6c757d !important;
    border-radius: 0.375rem !important;
}
/* Browse button rounded in all themes to match other buttons */
.main input[type="file"]::file-selector-button {
    border-radius: 0.375rem !important;
}
.page[data-theme="light"] .main .table-striped,
.page[data-theme="light"] .main .table-striped tbody tr,
.page[data-theme="light"] .main .table-striped td {
    background-color: #fff !important;
    color: #212529 !important;
    border-color: #dee2e6 !important;
}
.page[data-theme="light"] .main .table-striped thead.table-dark,
.page[data-theme="light"] .main .table-striped thead.table-dark th {
    background-color: #e9ecef !important;
    color: #212529 !important;
    border-color: #dee2e6 !important;
}
.page[data-theme="light"] .main .table-striped tbody tr:nth-of-type(odd) {
    background-color: #f8f9fa !important;
}
.page[data-theme="light"] .main .table-striped tbody tr:nth-of-type(even) {
    background-color: #fff !important;
}
.page[data-theme="light"] .main .table-striped tbody tr:hover {
    background-color: #e9ecef !important;
}

/* Time off page: custom table (no .table-dark) so we control light/dark styling */
.main .timeoff-page .timeoff-table thead th,
.main .timeoff-page .timeoff-table tbody td {
    border-color: rgba(255, 255, 255, 0.1);
}
.main .timeoff-page .timeoff-table thead th {
    background-color: #212529;
    color: #fff;
}
.main .timeoff-page .timeoff-table tbody td {
    background-color: #212529;
    color: #dee2e6;
}
.main .timeoff-page .timeoff-table.table-striped tbody tr:nth-of-type(odd) td {
    background-color: #2c3034;
}
.main .timeoff-page .timeoff-table tbody tr:hover td {
    background-color: #373b3e;
    color: #fff;
}
.main .timeoff-page .timeoff-table .text-muted {
    color: #adb5bd !important;
}

/* Time off page: light mode – explicit light table styling */
.page[data-theme="light"] .main .timeoff-page .timeoff-table thead th,
.page[data-theme="light"] .main .timeoff-page .timeoff-table tbody td {
    background-color: #fff !important;
    color: #212529 !important;
    border-color: #dee2e6 !important;
}
.page[data-theme="light"] .main .timeoff-page .timeoff-table thead th {
    background-color: #e9ecef !important;
    color: #212529 !important;
}
.page[data-theme="light"] .main .timeoff-page .timeoff-table.table-striped tbody tr:nth-of-type(odd) td {
    background-color: #f8f9fa !important;
}
.page[data-theme="light"] .main .timeoff-page .timeoff-table.table-striped tbody tr:nth-of-type(even) td {
    background-color: #fff !important;
}
.page[data-theme="light"] .main .timeoff-page .timeoff-table tbody tr:hover td {
    background-color: #e9ecef !important;
    color: #212529 !important;
}
.page[data-theme="light"] .main .timeoff-page .timeoff-table .text-muted {
    color: #6c757d !important;
}
.page[data-theme="light"] .main .timeoff-page .btn-outline-primary {
    color: #0d6efd !important;
    border-color: #0d6efd !important;
    background-color: transparent !important;
}
.page[data-theme="light"] .main .timeoff-page .btn-outline-primary:hover {
    color: #fff !important;
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
}
.page[data-theme="light"] .main .timeoff-page .badge.bg-info {
    background-color: #0dcaf0 !important;
    color: #000 !important;
}
.page[data-theme="light"] .main .timeoff-page .badge.bg-warning.text-dark {
    background-color: #ffc107 !important;
    color: #212529 !important;
}

/* Invoicing page: white backgrounds in light mode */
.page[data-theme="light"] .main .invoice-card {
    background-color: #fff !important;
    border-color: #dee2e6 !important;
}
.page[data-theme="light"] .main .invoice-card .card-header.bg-dark,
.page[data-theme="light"] .main .invoice-card .card-body.bg-dark {
    background-color: #fff !important;
    color: #212529 !important;
    border-color: #dee2e6 !important;
}
.page[data-theme="light"] .main .invoice-card .table-dark,
.page[data-theme="light"] .main .invoice-card .table-dark th,
.page[data-theme="light"] .main .invoice-card .table-dark td {
    background-color: #fff !important;
    color: #212529 !important;
    border-color: #dee2e6 !important;
}
.page[data-theme="light"] .main .invoice-card .table-dark.table-hover {
    --bs-table-hover-bg: #e9ecef !important;
    --bs-table-hover-color: #212529 !important;
}
.page[data-theme="light"] .main .invoice-card .table-dark.table-hover tbody tr:hover,
.page[data-theme="light"] .main .invoice-card .table-dark tbody tr:hover,
.page[data-theme="light"] .main .invoice-card .table-dark.table-hover tbody tr:hover > *,
.page[data-theme="light"] .main .invoice-card .table-dark.table-hover tbody tr:hover td,
.page[data-theme="light"] .main .invoice-card .table-dark tbody tr:hover td {
    background-color: #e9ecef !important;
    color: #212529 !important;
}
.page[data-theme="light"] .main .invoice-card .table-active,
.page[data-theme="light"] .main .invoice-card .table-active th {
    background-color: #5a6268 !important;
    color: #fff !important;
    border-color: #5a6268 !important;
}
.page[data-theme="light"] .main .invoice-card .text-white {
    color: #212529 !important;
}
.page[data-theme="light"] .main .invoice-card .text-muted {
    color: #6c757d !important;
}
/* Grand Total / Outstanding summary boxes */
.page[data-theme="light"] .main .p-3.rounded.bg-dark {
    background-color: #fff !important;
    color: #212529 !important;
    border-color: #dee2e6 !important;
}
.page[data-theme="light"] .main .p-3.rounded.bg-dark.border-danger {
    border-color: #dc3545 !important;
}
.page[data-theme="light"] .main .date-display-box {
    background-color: #fff !important;
    color: #212529 !important;
    border-color: #dee2e6 !important;
}
.page[data-theme="light"] .main .monzo-input-box {
    background-color: #fff !important;
    color: #000 !important;
    border-color: #495057 !important;
    border-width: 1px !important;
}
.page[data-theme="light"] .main .monzo-input-box::placeholder {
    color: #000 !important;
    opacity: 0.7;
}
.page[data-theme="light"] .main .monzo-input-box::-webkit-input-placeholder {
    color: #000 !important;
    opacity: 0.7;
}
.page[data-theme="light"] .main .billing-notice.text-warning {
    color: #b45309 !important;
    border-color: rgba(180, 83, 9, 0.3) !important;
}

/* Invoicing: remove extra dividing lines on stacked card rows in light mode */
.page[data-theme="light"] .main .invoice-card tr {
    border-bottom-color: transparent !important;
}

/* Full-screen modals: use light translucent overlay in light mode (instead of solid black) */
.page[data-theme="light"] .modal.fade.show.d-block {
    background-color: rgba(255, 255, 255, 0.85) !important;
}