/* theme.css - Law Firm Color Palette & Dark Mode Support */
/* Based on الجبر والجبور Logo Analysis */
:root {
    --z-topnav: 1800;
    --z-sidebar: 2000;
    --z-overlay: 1500;
    --z-dropdown: 1080;
    --z-mobilemenu: 2001;
    --topnav-height: 64px;

    /* ===== LIGHT MODE PALETTE ===== */
    /* Base backgrounds */
    --color-bg: #f8f6f0;
    --color-bg-content: #ffffff;
    --color-surface: #f8f6f0;
    --color-bg-topnav: #ffffff;
    --color-bg-button-outline: #f8f6f0;
    /* Text colors */
    --color-text: #4a4a4a;
    --color-text-secondary: #8c8c8c;
    --color-text-light: #8c8c8c;
    --color-text-muted: #8c8c8c;
    /* Border colors */
    --color-border: #e5e5e5;
    --color-border-light: #f0f0f0;
    --color-border-dark: #d0d0d0;
    /* Brand colors */
    --color-primary: #1e3c72;
    --color-primary-dark: #163055;
    --color-primary-hover: #2a5298;
    --color-primary-light: rgba(30, 60, 114, 0.1);
    --color-secondary: #2a5298;
    --color-secondary-dark: #1e3c72;
    --color-secondary-hover: #3a66bb;
    --color-accent: #b8860b;
    --color-accent-dark: #996f09;
    --color-accent-hover: #d4a70d;
    /* Status colors */
    --color-success: #28a745;
    --color-success-dark: #1e7e34;
    --color-success-light: rgba(40, 167, 69, 0.1);
    --color-info: #2a5298;
    --color-info-dark: #1e3c72;
    --color-info-light: rgba(42, 82, 152, 0.1);
    --color-warning: #b8860b;
    --color-warning-dark: #996f09;
    --color-warning-light: rgba(184, 134, 11, 0.1);
    --color-danger: #dc3545;
    --color-danger-dark: #bd2130;
    --color-danger-light: rgba(220, 53, 69, 0.1);
    /* Sidebar colors */
    --color-sidebar-start: #1e3c72;
    --color-sidebar-end: #163055;
    --color-sidebar-hover: rgba(184, 134, 11, 0.15);
    --color-sidebar-text: #f8f6f0;
    --color-sidebar-text-active: #ffffff;
    /* Footer colors */
    --color-footer-bg: #4a4a4a;
    --color-footer-text: #f8f6f0;
    --color-footer-border: #8c8c8c;
    /* Special purpose colors */
    --color-overlay: rgba(30, 60, 114, 0.6);
    --color-backdrop: rgba(248, 246, 240, 0.95);
    --color-glass: rgba(184, 134, 11, 0.1);
    /* Shadow colors */
    --shadow-light: rgba(30, 60, 114, 0.08);
    --shadow-medium: rgba(30, 60, 114, 0.15);
    --shadow-dark: rgba(30, 60, 114, 0.25);
    /* Gradient stops */
    --gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    --gradient-sidebar: linear-gradient(180deg, var(--color-sidebar-start) 0%, var(--color-sidebar-end) 100%);
    --gradient-header: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    /* RTL/LTR variables */
    --start: left;
    --end: right;
    --transform-direction: 1;
}

[data-theme="dark"] {
    /* ===== DARK MODE PALETTE ===== */
    /* Base backgrounds */
    --color-bg: #2c2c2c;
    --color-bg-content: #3a3a3a;
    --color-surface: #4a4a4a;
    --color-bg-topnav: #3a3a3a;
    --color-bg-button-outline: #4a4a4a;
    /* Text colors */
    --color-text: #f8f6f0;
    --color-text-secondary: #d0d0d0;
    --color-text-light: #b0b0b0;
    --color-text-muted: #a0a0a0;
    /* Border colors */
    --color-border: #5a5a5a;
    --color-border-light: #6a6a6a;
    --color-border-dark: #4a4a4a;
    /* Brand colors - adjusted for dark mode */
    --color-primary: #3a66bb;
    --color-primary-dark: #2a5298;
    --color-primary-hover: #4a76cb;
    --color-primary-light: rgba(58, 102, 187, 0.15);
    --color-secondary: #4a76cb;
    --color-secondary-dark: #3a66bb;
    --color-secondary-hover: #5a86db;
    --color-accent: #d4a70d;
    --color-accent-dark: #b8860b;
    --color-accent-hover: #e4b71d;
    /* Status colors - adjusted for dark mode */
    --color-success: #34d399;
    --color-success-dark: #10b981;
    --color-success-light: rgba(52, 211, 153, 0.15);
    --color-info: #4a76cb;
    --color-info-dark: #3a66bb;
    --color-info-light: rgba(74, 118, 203, 0.15);
    --color-warning: #d4a70d;
    --color-warning-dark: #b8860b;
    --color-warning-light: rgba(212, 167, 13, 0.15);
    --color-danger: #f87171;
    --color-danger-dark: #ef4444;
    --color-danger-light: rgba(248, 113, 113, 0.15);
    /* Sidebar colors */
    --color-sidebar-start: #2c2c2c;
    --color-sidebar-end: #1a1a1a;
    --color-sidebar-hover: rgba(212, 167, 13, 0.1);
    --color-sidebar-text: #d0d0d0;
    --color-sidebar-text-active: #f8f6f0;
    /* Footer colors */
    --color-footer-bg: #1a1a1a;
    --color-footer-text: #b0b0b0;
    --color-footer-border: #4a4a4a;
    /* Special purpose colors */
    --color-overlay: rgba(44, 44, 44, 0.8);
    --color-backdrop: rgba(58, 58, 58, 0.95);
    --color-glass: rgba(212, 167, 13, 0.08);
    /* Shadow colors - darker shadows for dark mode */
    --shadow-light: rgba(0, 0, 0, 0.3);
    --shadow-medium: rgba(0, 0, 0, 0.4);
    --shadow-dark: rgba(0, 0, 0, 0.6);
    /* Gradient stops */
    --gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    --gradient-sidebar: linear-gradient(180deg, var(--color-sidebar-start) 0%, var(--color-sidebar-end) 100%);
    --gradient-header: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
}

[dir="rtl"] {
    --start: right;
    --end: left;
    --transform-direction: -1;
}

/* ===== THEME TRANSITION ===== */
* {
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

/* Prevent transition on theme toggle to avoid flash */
.theme-transition-disabled * {
    transition: none !important;
}

/* ===== TABLE STYLING ===== */
table {
    background-color: var(--color-bg-content);
    color: var(--color-text);
    border-color: var(--color-border);
}

    table thead {
        background: var(--gradient-primary);
        color: #ffffff;
    }

        table thead th {
            background: transparent;
            color: #ffffff;
            border-color: rgba(255, 255, 255, 0.2);
        }

    table tbody {
        background-color: var(--color-bg-content);
    }

        table tbody tr {
            background-color: var(--color-bg-content);
            border-color: var(--color-border);
        }

            table tbody tr:nth-child(even) {
                background-color: var(--color-surface);
            }

            table tbody tr:hover {
                background-color: var(--color-primary-light);
            }

        table tbody td {
            background-color: transparent;
            color: var(--color-text);
            border-color: var(--color-border);
        }

/* Specific styling for your lease contracts table */
.table,
.table-responsive table,
div[class*="table"] table {
    background-color: var(--color-bg-content) !important;
    color: var(--color-text) !important;
}

    .table thead th,
    .table-responsive table thead th,
    div[class*="table"] table thead th {
        background: var(--gradient-primary) !important;
        color: #ffffff !important;
        border-color: rgba(255, 255, 255, 0.2) !important;
    }

    .table tbody tr,
    .table-responsive table tbody tr,
    div[class*="table"] table tbody tr {
        background-color: var(--color-bg-content) !important;
        color: var(--color-text) !important;
        border-color: var(--color-border) !important;
    }

        .table tbody tr:nth-child(even),
        .table-responsive table tbody tr:nth-child(even),
        div[class*="table"] table tbody tr:nth-child(even) {
            background-color: var(--color-surface) !important;
        }

        .table tbody tr:hover,
        .table-responsive table tbody tr:hover,
        div[class*="table"] table tbody tr:hover {
            background-color: var(--color-primary-light) !important;
        }

    .table tbody td,
    .table-responsive table tbody td,
    div[class*="table"] table tbody td {
        background-color: transparent !important;
        color: var(--color-text) !important;
        border-color: var(--color-border) !important;
    }

    /* Form elements within tables */
    .table select,
    .table input,
    .table button,
    table select,
    table input,
    table button {
        background-color: var(--color-bg-content);
        color: var(--color-text);
        border-color: var(--color-border);
    }

        .table select:focus,
        .table input:focus,
        table select:focus,
        table input:focus {
            background-color: var(--color-bg-content);
            color: var(--color-text);
            border-color: var(--color-primary);
            box-shadow: 0 0 0 0.2rem var(--color-primary-light);
        }

/* Status badges in tables */
.badge {
    color: #ffffff !important;
}

    .badge.bg-success,
    .badge[style*="background-color: rgb(40, 167, 69)"],
    .badge[class*="success"] {
        background-color: var(--color-success) !important;
    }

    .badge.bg-primary,
    .badge[style*="background-color: rgb(30, 60, 114)"],
    .badge[class*="primary"] {
        background-color: var(--color-primary) !important;
    }

    .badge.bg-warning,
    .badge[style*="background-color: rgb(184, 134, 11)"],
    .badge[class*="warning"] {
        background-color: var(--color-warning) !important;
    }

    .badge.bg-danger,
    .badge[style*="background-color: rgb(220, 53, 69)"],
    .badge[class*="danger"] {
        background-color: var(--color-danger) !important;
    }

    .badge.bg-info,
    .badge[style*="background-color: rgb(42, 82, 152)"],
    .badge[class*="info"] {
        background-color: var(--color-info) !important;
    }

/* Action buttons in tables */
.btn-outline-primary {
    color: var(--color-primary);
    border-color: var(--color-primary);
    background-color: transparent;
}

    .btn-outline-primary:hover {
        color: #ffffff;
        background-color: var(--color-primary);
        border-color: var(--color-primary);
    }

.btn-outline-secondary {
    color: var(--color-text);
    border-color: var(--color-border);
    background-color: transparent;
}

    .btn-outline-secondary:hover {
        color: var(--color-bg-content);
        background-color: var(--color-text);
        border-color: var(--color-text);
    }

/* ===== BOOTSTRAP COMPONENT OVERRIDES ===== */
/* Cards */
.card {
    background-color: var(--color-bg-content) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text) !important;
}

.card-body {
    background-color: var(--color-bg-content) !important;
    color: var(--color-text) !important;
}

.card-header {
    background-color: var(--color-surface) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text) !important;
}

.card-footer {
    background-color: var(--color-surface) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text) !important;
}

/* Form Controls */
.form-control {
    background-color: var(--color-bg-content) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text) !important;
}

    .form-control:focus {
        background-color: var(--color-bg-content) !important;
        border-color: var(--color-primary) !important;
        color: var(--color-text) !important;
        box-shadow: 0 0 0 0.25rem var(--color-primary-light) !important;
    }

    .form-control::placeholder {
        color: var(--color-text-muted) !important;
    }

    .form-control:disabled,
    .form-control[readonly] {
        background-color: var(--color-surface) !important;
        color: var(--color-text-muted) !important;
        border-color: var(--color-border) !important;
    }

/* Form Select */
.form-select {
    background-color: var(--color-bg-content) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m1 6 7 7 7-7'/%3e%3c/svg%3e") !important;
}

[data-theme="dark"] .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23f8f6f0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m1 6 7 7 7-7'/%3e%3c/svg%3e") !important;
}

.form-select:focus {
    background-color: var(--color-bg-content) !important;
    border-color: var(--color-primary) !important;
    color: var(--color-text) !important;
    box-shadow: 0 0 0 0.25rem var(--color-primary-light) !important;
}

.form-select option {
    background-color: var(--color-bg-content) !important;
    color: var(--color-text) !important;
}

/* Form Check (Checkboxes and Radios) */
.form-check-input {
    background-color: var(--color-bg-content) !important;
    border-color: var(--color-border) !important;
}

    .form-check-input:checked {
        background-color: var(--color-primary) !important;
        border-color: var(--color-primary) !important;
    }

    .form-check-input:focus {
        box-shadow: 0 0 0 0.25rem var(--color-primary-light) !important;
    }

.form-check-label {
    color: var(--color-text) !important;
}

/* Form Labels */
.form-label {
    color: var(--color-text) !important;
}

/* Form Text (Help Text) */
.form-text {
    color: var(--color-text-muted) !important;
}

/* Input Groups */
.input-group-text {
    background-color: var(--color-surface) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text) !important;
}

/* Buttons */
.btn {
    border-color: var(--color-border) !important;
    min-height: 36px; /* Ensure minimum touch target size */
}

.btn-primary {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: #ffffff !important;
}

    .btn-primary:hover {
        background-color: var(--color-primary-hover) !important;
        border-color: var(--color-primary-hover) !important;
    }

.btn-secondary {
    background-color: var(--color-text-secondary) !important;
    border-color: var(--color-text-secondary) !important;
    color: var(--color-bg-content) !important;
}

.btn-outline-primary {
    color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    background-color: transparent !important;
}

    .btn-outline-primary:hover {
        color: #ffffff !important;
        background-color: var(--color-primary) !important;
        border-color: var(--color-primary) !important;
    }

.btn-outline-secondary {
    color: var(--color-text) !important;
    border-color: var(--color-border) !important;
    background-color: transparent !important;
}

    .btn-outline-secondary:hover {
        color: var(--color-bg-content) !important;
        background-color: var(--color-text) !important;
        border-color: var(--color-text) !important;
    }

.btn-outline-dark {
    color: var(--color-text) !important;
    border-color: var(--color-text) !important;
    background-color: transparent !important;
}

    .btn-outline-dark:hover {
        color: var(--color-bg-content) !important;
        background-color: var(--color-text) !important;
        border-color: var(--color-text) !important;
    }

/* Alerts */
.alert {
    border-color: var(--color-border) !important;
}

.alert-success {
    background-color: var(--color-success-light) !important;
    border-color: var(--color-success) !important;
    color: var(--color-success-dark) !important;
}

.alert-danger {
    background-color: var(--color-danger-light) !important;
    border-color: var(--color-danger) !important;
    color: var(--color-danger-dark) !important;
}

.alert-warning {
    background-color: var(--color-warning-light) !important;
    border-color: var(--color-warning) !important;
    color: var(--color-warning-dark) !important;
}

.alert-info {
    background-color: var(--color-info-light) !important;
    border-color: var(--color-info) !important;
    color: var(--color-info-dark) !important;
}

/* Pagination */
.pagination .page-link {
    background-color: var(--color-bg-content) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text) !important;
    min-height: 36px; /* Ensure minimum touch target size */
    display: flex;
    align-items: center;
    justify-content: center;
}

    .pagination .page-link:hover {
        background-color: var(--color-primary-light) !important;
        border-color: var(--color-primary) !important;
        color: var(--color-primary) !important;
    }

.pagination .page-item.active .page-link {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: #ffffff !important;
}

.pagination .page-item.disabled .page-link {
    background-color: var(--color-surface) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text-muted) !important;
}

/* Container and Layout */
.container,
.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
    color: var(--color-text) !important;
}

/* Text Validation */
.text-danger {
    color: var(--color-danger) !important;
}

.text-success {
    color: var(--color-success) !important;
}

.text-warning {
    color: var(--color-warning) !important;
}

.text-muted {
    color: var(--color-text-muted) !important;
}

.text-center {
    color: var(--color-text) !important;
}

/* Dropdown Menus */
.dropdown-menu {
    background-color: var(--color-bg-content) !important;
    border-color: var(--color-border) !important;
}

.dropdown-item {
    color: var(--color-text) !important;
}

    .dropdown-item:hover,
    .dropdown-item:focus {
        background-color: var(--color-primary-light) !important;
        color: var(--color-text) !important;
    }

/* Modal */
.modal-content {
    background-color: var(--color-bg-content) !important;
    border-color: var(--color-border) !important;
}

.modal-header {
    border-color: var(--color-border) !important;
}

.modal-footer {
    border-color: var(--color-border) !important;
}

.modal-title {
    color: var(--color-text) !important;
}

.modal-body {
    color: var(--color-text) !important;
}

/* Close Button */
.btn-close {
    filter: var(--bs-btn-close-filter, none) !important;
}

[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%) !important;
}

/* ===== ADDITIONAL BOOTSTRAP COMPONENTS ===== */
/* Navbar */
.navbar {
    background-color: var(--color-bg-topnav) !important;
    border-color: var(--color-border) !important;
}

.navbar-brand {
    color: var(--color-text) !important;
}

    .navbar-brand:hover {
        color: var(--color-primary) !important;
    }

.navbar-nav .nav-link {
    color: var(--color-text) !important;
}

    .navbar-nav .nav-link:hover {
        color: var(--color-primary) !important;
    }

    .navbar-nav .nav-link.active {
        color: var(--color-primary) !important;
    }

.navbar-toggler {
    border-color: var(--color-border) !important;
    color: var(--color-text) !important;
}

.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%2833, 37, 41, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

[data-theme="dark"] .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%28248, 246, 240, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* Nav Pills & Tabs */
.nav-pills .nav-link {
    color: var(--color-text) !important;
    background-color: transparent !important;
}

    .nav-pills .nav-link:hover {
        color: var(--color-primary) !important;
        background-color: var(--color-primary-light) !important;
    }

    .nav-pills .nav-link.active {
        background-color: var(--color-primary) !important;
        color: #ffffff !important;
    }

.nav-tabs {
    border-color: var(--color-border) !important;
}

    .nav-tabs .nav-link {
        color: var(--color-text) !important;
        background-color: transparent !important;
        border-color: transparent !important;
    }

        .nav-tabs .nav-link:hover {
            color: var(--color-primary) !important;
            background-color: var(--color-primary-light) !important;
            border-color: var(--color-border) !important;
        }

        .nav-tabs .nav-link.active {
            color: var(--color-primary) !important;
            background-color: var(--color-bg-content) !important;
            border-color: var(--color-border) var(--color-border) var(--color-bg-content) !important;
        }

.tab-content {
    background-color: var(--color-bg-content) !important;
    color: var(--color-text) !important;
}

.tab-pane {
    background-color: var(--color-bg-content) !important;
    color: var(--color-text) !important;
}

/* Breadcrumb */
.breadcrumb {
    background-color: var(--color-surface) !important;
    border-color: var(--color-border) !important;
}

.breadcrumb-item {
    color: var(--color-text) !important;
}

    .breadcrumb-item a {
        color: var(--color-primary) !important;
        text-decoration: none !important;
    }

        .breadcrumb-item a:hover {
            color: var(--color-primary-hover) !important;
        }

    .breadcrumb-item.active {
        color: var(--color-text-muted) !important;
    }

/* Progress Bars */
.progress {
    background-color: var(--color-surface) !important;
    border-color: var(--color-border) !important;
}

.progress-bar {
    background-color: var(--color-primary) !important;
    color: #ffffff !important;
}

.progress-bar-striped {
    background-color: var(--color-primary) !important;
}

.progress-bar.bg-success {
    background-color: var(--color-success) !important;
}

.progress-bar.bg-info {
    background-color: var(--color-info) !important;
}

.progress-bar.bg-warning {
    background-color: var(--color-warning) !important;
}

.progress-bar.bg-danger {
    background-color: var(--color-danger) !important;
}

/* Range Slider - Basic styling without vendor prefixes */
.form-range {
    background-color: transparent !important;
    accent-color: var(--color-primary) !important;
}

    .form-range:focus {
        outline-color: var(--color-primary) !important;
    }

/* List Group */
.list-group {
    border-color: var(--color-border) !important;
}

.list-group-item {
    background-color: var(--color-bg-content) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text) !important;
}

    .list-group-item:hover {
        background-color: var(--color-primary-light) !important;
    }

    .list-group-item.active {
        background-color: var(--color-primary) !important;
        border-color: var(--color-primary) !important;
        color: #ffffff !important;
    }

    .list-group-item.disabled {
        background-color: var(--color-surface) !important;
        color: var(--color-text-muted) !important;
    }

.list-group-item-action {
    color: var(--color-text) !important;
}

    .list-group-item-action:hover {
        background-color: var(--color-primary-light) !important;
        color: var(--color-text) !important;
    }

/* Accordion */
.accordion {
    background-color: var(--color-bg-content) !important;
}

.accordion-item {
    background-color: var(--color-bg-content) !important;
    border-color: var(--color-border) !important;
}

.accordion-header {
    background-color: var(--color-bg-content) !important;
}

.accordion-button {
    background-color: var(--color-surface) !important;
    color: var(--color-text) !important;
    border-color: var(--color-border) !important;
}

    .accordion-button:not(.collapsed) {
        background-color: var(--color-primary-light) !important;
        color: var(--color-primary) !important;
    }

    .accordion-button:focus {
        box-shadow: 0 0 0 0.25rem var(--color-primary-light) !important;
    }

    .accordion-button::after {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
    }

[data-theme="dark"] .accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23f8f6f0'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
}

.accordion-body {
    background-color: var(--color-bg-content) !important;
    color: var(--color-text) !important;
}

/* Collapse */
.collapse {
    background-color: var(--color-bg-content) !important;
    color: var(--color-text) !important;
}

/* Carousel */
.carousel {
    background-color: var(--color-bg-content) !important;
}

.carousel-item {
    background-color: var(--color-bg-content) !important;
    color: var(--color-text) !important;
}

.carousel-caption {
    background-color: var(--color-overlay) !important;
    color: #ffffff !important;
}

.carousel-control-prev,
.carousel-control-next {
    filter: none !important;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: var(--color-primary) !important;
    border-radius: 50% !important;
}

.carousel-indicators [data-bs-target] {
    background-color: var(--color-primary) !important;
}

/* Offcanvas */
.offcanvas {
    background-color: var(--color-bg-content) !important;
    color: var(--color-text) !important;
    border-color: var(--color-border) !important;
}

.offcanvas-header {
    border-color: var(--color-border) !important;
}

.offcanvas-title {
    color: var(--color-text) !important;
}

.offcanvas-body {
    background-color: var(--color-bg-content) !important;
    color: var(--color-text) !important;
}

/* Toast */
.toast {
    background-color: var(--color-bg-content) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text) !important;
}

.toast-header {
    background-color: var(--color-surface) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text) !important;
}

.toast-body {
    background-color: var(--color-bg-content) !important;
    color: var(--color-text) !important;
}

/* Modern flash toasts */
.flash-toast {
    --flash-color: var(--color-info);
    --flash-duration: 5s;
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    width: 100%;
    padding: 1rem 1.25rem 1.35rem;
    border-radius: 1rem;
    border: 1px solid var(--color-border);
    border-left-width: 5px;
    border-left-color: var(--flash-color);
    background: var(--color-bg-content);
    box-shadow: 0 1.25rem 2.5rem rgba(30, 60, 114, 0.08), 0 0.75rem 1.5rem rgba(30, 60, 114, 0.05);
    color: var(--color-text);
    opacity: 0;
    transform: translate3d(0, -12px, 0);
    transition: opacity 0.35s ease, transform 0.35s ease, box-shadow 0.3s ease;
    overflow: hidden;
}

.flash-toast::after {
    content: '';
    position: absolute;
    left: 1.25rem;
    right: 3.25rem;
    bottom: 0.9rem;
    height: 3px;
    border-radius: 999px;
    background: var(--flash-color);
    opacity: 0.35;
    transform-origin: left center;
    animation: flash-toast-progress var(--flash-duration) linear forwards;
}

.flash-toast__icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--flash-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.15rem;
    font-weight: 700;
    flex-shrink: 0;
    box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.1);
}

.flash-toast[data-kind="success"] .flash-toast__icon::before {
    content: '✓';
}

.flash-toast[data-kind="error"] .flash-toast__icon::before {
    content: '!';
}

.flash-toast[data-kind="warning"] .flash-toast__icon::before,
.flash-toast[data-kind="warn"] .flash-toast__icon::before {
    content: '!';
}

.flash-toast[data-kind="info"] .flash-toast__icon::before,
.flash-toast__icon::before {
    content: 'i';
}

.flash-toast__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    line-height: 1.4;
}

.flash-toast__message {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 500;
}

.flash-toast__close {
    border: none;
    background: none;
    color: var(--color-text-secondary);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.125rem;
    margin-left: 0.5rem;
    border-radius: 50%;
    transition: background 0.2s ease, color 0.2s ease;
}

.flash-toast__close:hover,
.flash-toast__close:focus-visible {
    color: var(--flash-color);
    background: rgba(0, 0, 0, 0.04);
    outline: none;
}

.flash-toast--visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.flash-toast--leaving {
    opacity: 0;
    transform: translate3d(0, -8px, 0);
}

.flash-toast-success { --flash-color: var(--color-success); }
.flash-toast-info { --flash-color: var(--color-info); }
.flash-toast-warning,
.flash-toast-warn { --flash-color: var(--color-warning); }
.flash-toast-error,
.flash-toast-danger { --flash-color: var(--color-danger); }

@keyframes flash-toast-progress {
    from { transform: scaleX(1); }
    to { transform: scaleX(0); }
}

@media (prefers-reduced-motion: reduce) {
    .flash-toast,
    .flash-toast::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Tooltip */
.tooltip {
    --bs-tooltip-bg: var(--color-bg-content) !important;
    --bs-tooltip-color: var(--color-text) !important;
}

.tooltip-inner {
    background-color: var(--color-bg-content) !important;
    color: var(--color-text) !important;
    border: 1px solid var(--color-border) !important;
}

/* Popover */
.popover {
    background-color: var(--color-bg-content) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text) !important;
}

.popover-header {
    background-color: var(--color-surface) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text) !important;
}

.popover-body {
    background-color: var(--color-bg-content) !important;
    color: var(--color-text) !important;
}

/* Spinners */
.spinner-border {
    color: var(--color-primary) !important;
}

.spinner-grow {
    color: var(--color-primary) !important;
}

.spinner-border.text-secondary {
    color: var(--color-secondary) !important;
}

.spinner-border.text-success {
    color: var(--color-success) !important;
}

.spinner-border.text-danger {
    color: var(--color-danger) !important;
}

.spinner-border.text-warning {
    color: var(--color-warning) !important;
}

.spinner-border.text-info {
    color: var(--color-info) !important;
}

/* Additional Table Variants */
.table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--color-surface) !important;
}

.table-striped tbody tr:nth-of-type(even) {
    background-color: var(--color-bg-content) !important;
}

.table-hover tbody tr:hover {
    background-color: var(--color-primary-light) !important;
}

.table-bordered {
    border-color: var(--color-border) !important;
}

    .table-bordered th,
    .table-bordered td {
        border-color: var(--color-border) !important;
    }

.table-borderless th,
.table-borderless td {
    border-color: transparent !important;
}

.table-dark {
    background-color: var(--color-surface) !important;
    color: var(--color-text) !important;
}

    .table-dark th,
    .table-dark td {
        background-color: var(--color-surface) !important;
        color: var(--color-text) !important;
        border-color: var(--color-border-dark) !important;
    }

.table-light {
    background-color: var(--color-bg-content) !important;
    color: var(--color-text) !important;
}

    .table-light th,
    .table-light td {
        background-color: var(--color-bg-content) !important;
        color: var(--color-text) !important;
        border-color: var(--color-border-light) !important;
    }

/* Table Responsive Wrapper */
.table-responsive {
    border-color: var(--color-border) !important;
}

/* Image Thumbnail */
.img-thumbnail {
    border-color: var(--color-border) !important;
    background-color: var(--color-bg-content) !important;
}

/* Figure */
.figure-caption {
    color: var(--color-text-muted) !important;
}

/* Mark/Highlight */
mark,
.mark {
    background-color: var(--color-warning-light) !important;
    color: var(--color-text) !important;
}

/* Code */
code {
    background-color: var(--color-surface) !important;
    color: var(--color-accent) !important;
}

kbd {
    background-color: var(--color-text) !important;
    color: var(--color-bg-content) !important;
}

pre {
    background-color: var(--color-surface) !important;
    color: var(--color-text) !important;
    border-color: var(--color-border) !important;
}

/* Blockquote */
.blockquote {
    color: var(--color-text) !important;
}

.blockquote-footer {
    color: var(--color-text-muted) !important;
}

/* Display headings */
.display-1,
.display-2,
.display-3,
.display-4,
.display-5,
.display-6 {
    color: var(--color-text) !important;
}

/* Lead text */
.lead {
    color: var(--color-text) !important;
}

/* Small text */
small,
.small {
    color: var(--color-text-muted) !important;
}

/* Text emphasis */
.text-primary {
    color: var(--color-primary) !important;
}

.text-secondary {
    color: var(--color-text-secondary) !important;
}

.text-success {
    color: var(--color-success) !important;
}

.text-danger {
    color: var(--color-danger) !important;
}

.text-warning {
    color: var(--color-warning) !important;
}

.text-info {
    color: var(--color-info) !important;
}

.text-light {
    color: var(--color-text-light) !important;
}

.text-dark {
    color: var(--color-text) !important;
}

.text-muted {
    color: var(--color-text-muted) !important;
}

.text-white {
    color: #ffffff !important;
}

/* Background utilities */
.bg-light {
    background-color: var(--color-surface) !important;
    color: var(--color-text) !important;
}

.bg-dark {
    background-color: var(--color-text) !important;
    color: var(--color-bg-content) !important;
}

.bg-white {
    background-color: var(--color-bg-content) !important;
    color: var(--color-text) !important;
}

.bg-transparent {
    background-color: transparent !important;
}

/* Border utilities */
.border {
    border-color: var(--color-border) !important;
}

.border-top {
    border-top-color: var(--color-border) !important;
}

.border-end {
    border-inline-end-color: var(--color-border) !important;
}

.border-bottom {
    border-bottom-color: var(--color-border) !important;
}

.border-start {
    border-inline-start-color: var(--color-border) !important;
}

.border-light {
    border-color: var(--color-border-light) !important;
}

.border-dark {
    border-color: var(--color-border-dark) !important;
}

/* ===== UTILITY CLASSES ===== */
.bg-primary {
    background-color: var(--color-primary) !important;
}

.bg-secondary {
    background-color: var(--color-secondary) !important;
}

.bg-success {
    background-color: var(--color-success) !important;
}

.bg-danger {
    background-color: var(--color-danger) !important;
}

.bg-warning {
    background-color: var(--color-warning) !important;
}

.bg-info {
    background-color: var(--color-info) !important;
}

.text-primary {
    color: var(--color-primary) !important;
}

.text-secondary {
    color: var(--color-text-secondary) !important;
}

.text-success {
    color: var(--color-success) !important;
}

.text-danger {
    color: var(--color-danger) !important;
}

.text-warning {
    color: var(--color-warning) !important;
}

.text-info {
    color: var(--color-info) !important;
}

.text-muted {
    color: var(--color-text-muted) !important;
}

.border-primary {
    border-color: var(--color-primary) !important;
}

.border-secondary {
    border-color: var(--color-text-secondary) !important;
}

.border-success {
    border-color: var(--color-success) !important;
}

.border-danger {
    border-color: var(--color-danger) !important;
}

.border-warning {
    border-color: var(--color-warning) !important;
}

.border-info {
    border-color: var(--color-info) !important;
}

/* Responsive improvements */
@media (max-width: 575.98px) {
    .btn {
        min-height: 36px; /* Ensure minimum touch target size */
    }

    .btn-sm {
        min-height: 32px; /* Ensure minimum touch target size */
    }

    .form-control {
        padding: 0.375rem 0.625rem;
    }

    .form-select {
        padding: 0.375rem 0.625rem;
    }

    .input-group-text {
        padding: 0.375rem 0.625rem;
    }

    .dropdown-item {
        padding: 0.375rem 0.75rem;
    }

    .nav-link {
        padding: 0.375rem 0.75rem;
        min-height: 36px; /* Ensure minimum touch target size */
    }

    .list-group-item {
        padding: 0.5rem 0.75rem;
    }

    .accordion-button {
        padding: 0.75rem 1rem;
    }

    .pagination .page-link {
        padding: 0.25rem 0.5rem;
        min-height: 32px; /* Ensure minimum touch target size */
    }
}

/* ===== Toast host (shared across layouts) ===== */
.toast-host-top {
    position: fixed;
    top: calc(var(--topnav-height, 64px) + 0.75rem);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    padding: 0.5rem;
    margin: 0;
    width: min(100vw - 2rem, 26rem);
    max-width: min(100vw - 1.5rem, 32rem);
    pointer-events: none;
    z-index: var(--z-dropdown, 1080);
}

.toast-host-top .toast {
    pointer-events: auto;
    margin: 0;
    width: 100%;
}

.toast-host-top .flash-toast {
    pointer-events: auto;
    margin: 0;
}

@media (max-width: 576px) {
    .toast-host-top {
        width: min(100vw - 1rem, 22.5rem);
        padding-inline: 0.5rem;
    }
}