.rounded-12 { border-radius: 12px !important; }
.card .card-header .bi { opacity: 0.95; }
.card-body { min-width: 0; }
.list-group-item { border: 0; }
.card h6.small { letter-spacing: 0.2px; }
/* Add any additional visual tweaks needed for Mazer theme */

/* Dashboard cards: keep light-mode look, adapt for dark mode */
.fi-spacer-row {
    background-color: #f9f9f9;
}

.fi-grandtotal-row {
    background-color: #fcfcfc;
    border-top: 2px solid #ddd;
}

.cb-status-row {
    border-top: 1px solid #f1f3f5;
}

.lot-thead {
    background-color: var(--bs-table-bg, #f8f9fa);
}

[data-bs-theme="dark"] .fi-spacer-row {
    background-color: rgba(255, 255, 255, 0.03);
}

[data-bs-theme="dark"] .fi-grandtotal-row {
    background-color: rgba(255, 255, 255, 0.05);
    border-top: 2px solid rgba(255, 255, 255, 0.15);
}

[data-bs-theme="dark"] .cb-status-row {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .list-group-flush > .list-group-item {
    border-color: rgba(255, 255, 255, 0.08);
}

/* Current Balance card: icon background and status badge colors */
[data-bs-theme="dark"] .cb-icon-settled {
    background-color: rgba(40, 167, 69, 0.18) !important;
}

[data-bs-theme="dark"] .cb-icon-due {
    background-color: rgba(220, 53, 69, 0.18) !important;
}

[data-bs-theme="dark"] .cb-icon-credit {
    background-color: rgba(0, 102, 204, 0.18) !important;
}

[data-bs-theme="dark"] .cb-badge-settled {
    background-color: rgba(40, 167, 69, 0.3) !important;
    color: #8fd9ac !important;
}

[data-bs-theme="dark"] .cb-badge-due {
    background-color: rgba(220, 53, 69, 0.3) !important;
    color: #f5b3ba !important;
}

[data-bs-theme="dark"] .cb-badge-credit {
    background-color: rgba(0, 102, 204, 0.3) !important;
    color: #a8cff0 !important;
}

[data-bs-theme="dark"] .lot-thead,
[data-bs-theme="dark"] .lot-thead th {
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--bs-body-color);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .list-group-item-info {
    background-color: rgba(13, 202, 240, 0.15);
    color: var(--bs-body-color);
}

/* Manage Account page: preview cards and alert banner */
[data-bs-theme="dark"] .ma-preview-card {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

[data-bs-theme="dark"] .ma-preview-card .style-preview .border-bottom {
    border-color: rgba(255, 255, 255, 0.15) !important;
}

[data-bs-theme="dark"] .ma-alert-danger {
    background-color: rgba(220, 53, 69, 0.15);
    border-color: rgba(220, 53, 69, 0.35);
    color: #f5b3ba;
}

[data-bs-theme="dark"] .ma-alert-danger.color-danger i {
    color: #f5b3ba;
}

/* Site-wide: keep light-mode look for common Bootstrap light-only utility
   classes, but make them dark-mode-safe. This covers card headers/footers,
   modal headers/footers, table heads/foots, badges, alerts, and text colors
   used throughout the site's .razor pages. */
[data-bs-theme="dark"] .bg-white {
    background-color: var(--bs-card-bg, #1e1e2d) !important;
}

[data-bs-theme="dark"] .bg-light,
[data-bs-theme="dark"] .table-light,
[data-bs-theme="dark"] .modal-header.bg-light,
[data-bs-theme="dark"] .modal-footer.bg-light {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .table-light > * {
    color: var(--bs-body-color) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

[data-bs-theme="dark"] .text-dark {
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .bg-light-subtle,
[data-bs-theme="dark"] .border-light-subtle {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

[data-bs-theme="dark"] .border-light-secondary {
    border-color: rgba(255, 255, 255, 0.15) !important;
}

[data-bs-theme="dark"] .badge.bg-light {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .alert-light-info {
    background-color: rgba(13, 202, 240, 0.12) !important;
    color: #7fd7e6 !important;
}

[data-bs-theme="dark"] .alert-light-danger {
    background-color: rgba(220, 53, 69, 0.15) !important;
    color: #f5b3ba !important;
}

[data-bs-theme="dark"] .alert-light-success {
    background-color: rgba(25, 135, 84, 0.15) !important;
    color: #8fd9ac !important;
}

[data-bs-theme="dark"] .alert-light-warning {
    background-color: rgba(255, 193, 7, 0.15) !important;
    color: #ffe08a !important;
}

/* Voicemail page: phone line select button */
.vm-phoneline-select {
    background-color: #fff;
}

[data-bs-theme="dark"] .vm-phoneline-select {
    background-color: var(--bs-card-bg, #1e1e2d) !important;
}

/* Manage Logins page: grant new permission card */
.ml-grant-card {
    background-color: #f9f9f9;
}

[data-bs-theme="dark"] .ml-grant-card {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

/* Payment History page: card header and mobile card list */
.ph-header {
    background-color: #fff;
}

[data-bs-theme="dark"] .ph-header {
    background-color: var(--bs-card-bg, #1e1e2d) !important;
}

[data-bs-theme="dark"] .ph-mobile-card {
    background-color: rgba(255, 255, 255, 0.03) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Horizontal layout: collapsed mobile menu keeps a hardcoded light
   background (#f5f7fc) from app.css; make it dark-mode aware. */
@media screen and (max-width: 1199px) {
    [data-bs-theme="dark"] .layout-horizontal .main-navbar {
        background-color: var(--bs-card-bg, #1e1e2d) !important;
    }

    [data-bs-theme="dark"] .layout-horizontal .main-navbar ul .menu-link {
        color: #dee2e6 !important;
    }

    [data-bs-theme="dark"] .layout-horizontal .main-navbar ul > .menu-item.active a {
        color: #fff !important;
    }
}