/**
 * Theme System for Property Management Website
 * Centralized styling for consistent design across all pages
 */

/* ===== CSS VARIABLES ===== */
:root {
    /* Primary Colors */
    --primary-color: #415081;
    --primary-dark: #2d3a5e;
    --primary-light: #5a6b9a;
    --primary-lighter: #e8ecf4;
    
    /* Secondary Colors */
    --secondary-color: #4d66b7;
    --secondary-dark: #3a4f8a;
    --secondary-light: #6b7fc4;
    --secondary-lighter: #eef2f9;
    
    /* Success Colors */
    --success-color: #2ba766;
    --success-dark: #1f7a4a;
    --success-light: #4db87a;
    --success-lighter: #e6f7ed;
    
    /* Warning Colors */
    --warning-color: #e3cc2b;
    --warning-dark: #b8a422;
    --warning-light: #e9d55a;
    --warning-lighter: #fdfbe6;
    
    /* Danger Colors */
    --danger-color: #f12317;
    --danger-dark: #c11c12;
    --danger-light: #f44d42;
    --danger-lighter: #fdeaea;
    
    /* Info Colors */
    --info-color: #5197dc;
    --info-dark: #3d72a6;
    --info-light: #74aee3;
    --info-lighter: #eef6fc;
    
    /* Accent Colors */
    --accent1-color: #1b491f;
    --accent1-dark: #0f2a12;
    --accent1-light: #2d5a31;
    --accent1-lighter: #e6f0e7;
    
    --accent2-color: #5e8d3f;
    --accent2-dark: #4a6f32;
    --accent2-light: #7aa55a;
    --accent2-lighter: #eef6ea;
    
    --accent3-color: #b0d561;
    --accent3-dark: #8caa4e;
    --accent3-light: #c4e07a;
    --accent3-lighter: #f7fbe6;
    
    /* Neutral Colors */
    --white: #ffffff;
    --light: #dde0ca;
    --dark: #062b02;
    --muted: #6c757d;
    
    /* Text Colors */
    --text-primary: #212529;
    --text-secondary: #6c757d;
    --text-muted: #6c757d;
    --text-light: #ffffff;
    
    /* Background Colors */
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --bg-dark: #212529;
    --bg-light: #f8f9fa;
    
    /* Border Colors */
    --border-color: #dee2e6;
    --border-light: #e9ecef;
    --border-dark: #adb5bd;
    
    /* Shadow */
    --shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    --shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
    
    /* Border Radius */
    --border-radius: 0;
    --border-radius-sm: 0;
    --border-radius-lg: 0;
    --border-radius-xl: 0;
    
    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 3rem;
    
    /* Typography */
    --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    
    /* Transitions */
    --transition-fast: 0.15s ease-in-out;
    --transition-base: 0.2s ease-in-out;
    --transition-slow: 0.3s ease-in-out;
}

/* ===== DARK THEME ===== */
[data-theme="dark"] {
    --bg-primary: #1a1a1a;
    --bg-secondary: #2d2d2d;
    --bg-light: #2d2d2d;
    --text-primary: #ffffff;
    --text-secondary: #b3b3b3;
    --text-muted: #808080;
    --border-color: #404040;
    --border-light: #404040;
    --border-dark: #666666;
}

/* ===== GLOBAL STYLES ===== */
* {
    box-sizing: border-box;
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: 1.6;
    color: var(--text-primary);
    background-color: var(--bg-light);
    transition: background-color var(--transition-base), color var(--transition-base);
}

/* ===== TYPOGRAPHY ===== */
h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: var(--spacing-md);
    color: var(--text-primary);
}

h1 { font-size: var(--font-size-3xl); }
h2 { font-size: var(--font-size-2xl); }
h3 { font-size: var(--font-size-xl); }
h4 { font-size: var(--font-size-lg); }
h5 { font-size: var(--font-size-base); }
h6 { font-size: var(--font-size-sm); }

p {
    margin-bottom: var(--spacing-md);
    color: var(--text-secondary);
}

/* ===== BUTTONS ===== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-base);
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    border: 1px solid transparent;
    border-radius: var(--border-radius);
    transition: all var(--transition-base);
    gap: var(--spacing-xs);
}

.btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.btn:active {
    transform: translateY(0);
}

.btn-sm {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-sm);
}

.btn-lg {
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: var(--font-size-lg);
}

/* Button Variants */
.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--white);
}

.btn-primary:hover {
    background-color: var(--primary-dark);
    border-color: var(--primary-dark);
    color: var(--white);
}

.btn-secondary {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    color: var(--white);
}

.btn-success {
    background-color: var(--success-color);
    border-color: var(--success-color);
    color: var(--white);
}

.btn-warning {
    background-color: var(--warning-color);
    border-color: var(--warning-color);
    color: var(--dark);
}

.btn-danger {
    background-color: var(--danger-color);
    border-color: var(--danger-color);
    color: var(--white);
}

.btn-info {
    background-color: var(--info-color);
    border-color: var(--info-color);
    color: var(--dark);
}

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

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

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

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

/* ===== CARDS ===== */
.card {
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-base);
    overflow: hidden;
}

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

.card-header {
    padding: var(--spacing-md);
    background-color: var(--bg-light);
    border-bottom: 1px solid var(--border-color);
    font-weight: 600;
}

.card-body {
    padding: var(--spacing-md);
}

.card-title {
    margin-bottom: 0;
    font-weight: 600;
    color: var(--text-primary);
}

/* ===== DASHBOARD CARDS ===== */
.tao_dashboard {
    transition: all var(--transition-base);
    border: none;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
}

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

.tao_dashboard .card-body {
    padding: var(--spacing-lg);
    text-align: center;
}

.tao_dashboard i {
    font-size: 2rem;
    margin-bottom: var(--spacing-sm);
    opacity: 0.9;
}

.tao_dashboard .card-title {
    font-size: var(--font-size-sm);
    font-weight: 500;
    margin-bottom: var(--spacing-sm);
    opacity: 0.9;
}

.tao_dashboard .card-text {
    font-weight: 700;
    margin-bottom: 0;
}

/* ===== TABLES ===== */
.table {
    width: 100%;
    margin-bottom: var(--spacing-md);
    color: var(--text-primary);
    border-collapse: collapse;
}

.table th,
.table td {
    padding: var(--spacing-sm) var(--spacing-md);
    vertical-align: middle;
    border-top: 1px solid var(--border-color);
}

.table thead th {
    vertical-align: bottom;
    border-bottom: 2px solid var(--border-color);
    font-weight: 600;
    background-color: var(--bg-light);
    color: var(--text-primary);
}

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

.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, 0.02);
}

[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.02);
}

/* ===== BADGES ===== */
.badge {
    display: inline-block;
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-sm);
    font-weight: 500;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: var(--border-radius-sm);
}

.bg-primary { background-color: var(--primary-color) !important; }
.bg-secondary { background-color: var(--secondary-color) !important; }
.bg-success { background-color: var(--success-color) !important; }
.bg-warning { background-color: var(--warning-color) !important; }
.bg-danger { background-color: var(--danger-color) !important; }
.bg-info { background-color: var(--info-color) !important; }

/* ===== UTILITIES ===== */
.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-truncate {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-truncate-small {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-truncate-medium {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ===== ANIMATIONS ===== */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideIn {
    from { transform: translateX(-20px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.fade-in {
    animation: fadeIn 0.5s ease-out;
}

.slide-in {
    animation: slideIn 0.3s ease-out;
}

.pulse {
    animation: pulse 0.5s ease-in-out;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .tao_dashboard .card-body {
        padding: var(--spacing-md);
    }
    
    .tao_dashboard i {
        font-size: 1.5rem;
    }
    
    .tao_dashboard .card-title {
        font-size: 0.75rem;
    }
    
    .tao_dashboard .card-text {
        font-size: 1.25rem;
    }
}

@media (max-width: 576px) {
    .card-body {
        padding: var(--spacing-sm);
    }
    
    .table-responsive {
        font-size: var(--font-size-sm);
    }
}

/* ===== BOOTSTRAP PRIMARY COLOR OVERRIDE ===== */
/* Comprehensive override of Bootstrap's primary color with our custom color */

/* Button overrides */
.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary.show,
.btn-primary.dropdown-toggle.show {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: var(--white) !important;
}

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

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary.active,
.btn-outline-primary.show,
.btn-outline-primary.dropdown-toggle.show {
    color: var(--white) !important;
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

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

/* Background color overrides */
.bg-primary {
    background-color: var(--primary-color) !important;
}

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

/* Link color overrides */
a {
    color: var(--primary-color);
}

a:hover {
    color: var(--primary-dark);
}

/* Form control focus overrides */
.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.form-range::-webkit-slider-thumb:focus,
.form-range::-moz-range-thumb:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 0.25rem rgba(1, 44, 25, 0.25) !important;
}

/* Navbar overrides */
.navbar-brand,
.navbar-nav .nav-link.active,
.navbar-nav .nav-link.show,
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus,
.navbar-nav .show > .nav-link,
.navbar-nav .nav-link.active,
.navbar-nav .nav-link.show {
    color: var(--primary-color) !important;
}

/* Dropdown overrides */
.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--primary-color) !important;
    color: var(--white) !important;
}

.dropdown-item:hover {
    background-color: var(--primary-lighter) !important;
    color: var(--primary-dark) !important;
}

/* Pagination overrides */
.page-link {
    color: var(--primary-color);
}

.page-link:hover {
    color: var(--primary-dark);
}

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

/* Progress bar overrides */
.progress-bar {
    background-color: var(--primary-color) !important;
}

/* Alert overrides */
.alert-primary {
    color: var(--primary-dark) !important;
    background-color: var(--primary-lighter) !important;
    border-color: var(--primary-light) !important;
}

/* Badge overrides */
.badge.bg-primary {
    background-color: var(--primary-color) !important;
}

/* List group overrides */
.list-group-item-primary {
    color: var(--primary-dark) !important;
    background-color: var(--primary-lighter) !important;
}

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

/* Modal overrides */
.modal-header .btn-close:focus {
    box-shadow: 0 0 0 0.25rem rgba(1, 44, 25, 0.25) !important;
}

/* Accordion overrides */
.accordion-button:not(.collapsed) {
    color: var(--primary-color) !important;
    background-color: var(--primary-lighter) !important;
}

.accordion-button:focus {
    box-shadow: 0 0 0 0.25rem rgba(1, 44, 25, 0.25) !important;
}

/* Carousel overrides */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    filter: invert(1) grayscale(100%) brightness(200%);
}

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

/* Table overrides */
.table-primary,
.table-primary > th,
.table-primary > td {
    background-color: var(--primary-lighter) !important;
}

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

/* Card overrides */
.card-header-tabs .nav-link.active {
    color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

/* Input group overrides */
.input-group-text {
    border-color: var(--primary-color) !important;
}

/* Custom select overrides */
.form-select:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 0.25rem rgba(1, 44, 25, 0.25) !important;
}

/* Switch overrides */
.form-switch .form-check-input:checked {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

/* Range slider overrides */
.form-range::-webkit-slider-thumb:focus {
    box-shadow: 0 0 0 0.25rem rgba(1, 44, 25, 0.25) !important;
}

.form-range::-moz-range-thumb:focus {
    box-shadow: 0 0 0 0.25rem rgba(1, 44, 25, 0.25) !important;
}

/* Tooltip overrides */
.tooltip .tooltip-inner {
    background-color: var(--primary-color) !important;
}

.tooltip.bs-tooltip-auto[x-placement^=top] .arrow::before,
.tooltip.bs-tooltip-top .arrow::before {
    border-top-color: var(--primary-color) !important;
}

.tooltip.bs-tooltip-auto[x-placement^=bottom] .arrow::before,
.tooltip.bs-tooltip-bottom .arrow::before {
    border-bottom-color: var(--primary-color) !important;
}

.tooltip.bs-tooltip-auto[x-placement^=left] .arrow::before,
.tooltip.bs-tooltip-left .arrow::before {
    border-left-color: var(--primary-color) !important;
}

.tooltip.bs-tooltip-auto[x-placement^=right] .arrow::before,
.tooltip.bs-tooltip-right .arrow::before {
    border-right-color: var(--primary-color) !important;
}

/* Popover overrides */
.popover-header {
    background-color: var(--primary-color) !important;
    color: var(--white) !important;
}

/* Toast overrides */
.toast-header {
    background-color: var(--primary-lighter) !important;
    color: var(--primary-dark) !important;
}

/* Offcanvas overrides */
.offcanvas-header .btn-close:focus {
    box-shadow: 0 0 0 0.25rem rgba(1, 44, 25, 0.25) !important;
}

/* Breadcrumb overrides */
.breadcrumb-item.active {
    color: var(--primary-color) !important;
}

/* Nav tabs overrides */
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

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

/* Nav pills overrides */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--primary-color) !important;
}

/* Navbar toggler overrides */
.navbar-toggler:focus {
    box-shadow: 0 0 0 0.25rem rgba(1, 44, 25, 0.25) !important;
}

/* Close button overrides */
.btn-close:focus {
    box-shadow: 0 0 0 0.25rem rgba(1, 44, 25, 0.25) !important;
}

/* Form validation overrides */
.was-validated .form-control:valid,
.form-control.is-valid {
    border-color: var(--success-color) !important;
}

.was-validated .form-control:invalid,
.form-control.is-invalid {
    border-color: var(--danger-color) !important;
}

/* Custom file input overrides */
.form-control[type="file"]:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 0.25rem rgba(1, 44, 25, 0.25) !important;
}

/* ===== ADDITIONAL PRIMARY COLOR OVERRIDES ===== */
/* Ensure ALL primary elements use our custom color */

/* Dashboard specific overrides */
.tao_dashboard.bg-primary {
    background-color: var(--primary-color) !important;
}

/* Icon colors in primary contexts */
.bg-primary i,
.bg-primary .bi {
    color: var(--white) !important;
}

/* Text in primary contexts */
.bg-primary .text-white {
    color: var(--white) !important;
}

/* Links in primary contexts */
.bg-primary a {
    color: var(--white) !important;
}

.bg-primary a:hover {
    color: var(--primary-lighter) !important;
}

/* Button text in primary contexts */
.bg-primary .btn {
    color: var(--white) !important;
    border-color: var(--white) !important;
}

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

/* Card headers with primary color */
.card-header.bg-primary {
    background-color: var(--primary-color) !important;
    color: var(--white) !important;
}

/* Table headers with primary color */
.table-primary th,
.table-primary td {
    background-color: var(--primary-lighter) !important;
    color: var(--primary-dark) !important;
}

/* Navigation items with primary color */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--primary-color) !important;
    color: var(--white) !important;
}

/* Dropdown items with primary color */
.dropdown-menu .dropdown-item.active,
.dropdown-menu .dropdown-item:active {
    background-color: var(--primary-color) !important;
    color: var(--white) !important;
}

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

/* Input groups with primary color */
.input-group-text.bg-primary {
    background-color: var(--primary-color) !important;
    color: var(--white) !important;
    border-color: var(--primary-color) !important;
}

/* Alert links with primary color */
.alert-primary a {
    color: var(--primary-dark) !important;
}

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

/* List group items with primary color */
.list-group-item-primary {
    color: var(--primary-dark) !important;
    background-color: var(--primary-lighter) !important;
}

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

/* Breadcrumb active items */
.breadcrumb-item.active {
    color: var(--primary-color) !important;
}

/* Nav tabs active state */
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

/* Nav tabs hover state */
.nav-tabs .nav-link:hover {
    border-color: var(--primary-lighter) var(--primary-lighter) var(--primary-color) !important;
}

/* Progress bars with primary color */
.progress-bar.bg-primary {
    background-color: var(--primary-color) !important;
}

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

/* Badges with primary color */
.badge.bg-primary {
    background-color: var(--primary-color) !important;
    color: var(--white) !important;
}

/* Buttons with primary color variants */
.btn-primary {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: var(--white) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary.show,
.btn-primary.dropdown-toggle.show {
    background-color: var(--primary-dark) !important;
    border-color: var(--primary-dark) !important;
    color: var(--white) !important;
}

/* Outline buttons with primary color */
.btn-outline-primary {
    color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    background-color: transparent !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary.active,
.btn-outline-primary.show,
.btn-outline-primary.dropdown-toggle.show {
    color: var(--white) !important;
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

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

/* Background with primary color */
.bg-primary {
    background-color: var(--primary-color) !important;
}

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

/* All links use primary color */
a {
    color: var(--primary-color) !important;
}

a:hover {
    color: var(--primary-dark) !important;
}

/* Form focus states use primary color */
.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.form-range::-webkit-slider-thumb:focus,
.form-range::-moz-range-thumb:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 0.25rem rgba(1, 44, 25, 0.25) !important;
}

/* ===== NAVIGATION STYLES ===== */
#topMenu {
    background: var(--bg-primary);
}

/* ===== BREADCRUMB STYLES ===== */
.breadcrumb-wrapper {
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-light);
    margin: 0;
    padding: 0;
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: var(--spacing-md) 0;
    margin: 0;
    list-style: none;
}

.breadcrumb-item {
    display: flex;
    align-items: center;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.breadcrumb-item a {
    color: var(--primary-color);
    text-decoration: none;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    transition: all var(--transition-base);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.breadcrumb-item a:hover {
    background-color: var(--primary-lighter);
    color: var(--primary-color);
}

.breadcrumb-item + .breadcrumb-item {
    padding-left: 0;
}

.breadcrumb-item + .breadcrumb-item::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23012C19' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.5;
    margin: 0 var(--spacing-xs);
}

.breadcrumb-item.active {
    color: var(--text-primary);
    font-weight: 500;
    padding: var(--spacing-xs) var(--spacing-sm);
    background-color: var(--bg-secondary);
    border-radius: var(--border-radius-sm);
}

/* ===== INVOICE STYLES ===== */
/* Invoice Modal Styles */
.created-info {
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--border-light);
}

.created-info.hidden {
    display: none;
}

.created-info strong {
    color: var(--text-primary);
}
/* Invoice Statistics Cards */
.invoice-stat-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-base);
}

.invoice-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

.invoice-stat-card .stat-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius);
    background: var(--bg-light);
}

.invoice-stat-card .stat-icon i {
    font-size: 24px;
}

.invoice-stat-card .card-title {
    font-size: var(--font-size-2xl);
    font-weight: 600;
    margin: 0;
    line-height: 1.2;
}

.invoice-stat-card .card-subtitle {
    font-size: var(--font-size-sm);
    font-weight: 500;
}

.invoice-stat-card .stat-details {
    font-size: var(--font-size-sm);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
}

[data-theme="dark"] .invoice-stat-card .stat-icon {
    background: var(--bg-secondary);
}
/* Invoice table styles */
.invoice-table {
    --invoice-paid-color: var(--success-lighter);
    --invoice-unpaid-color: var(--bg-light);
    --invoice-overdue-color: var(--danger-lighter);
    --invoice-overpaid-color: var(--warning-lighter);
}

.invoice-table th {
    background-color: var(--bg-light);
    border-bottom: 2px solid var(--border-color);
    font-weight: 600;
    padding: var(--spacing-sm) var(--spacing-md);
}

.invoice-table td {
    padding: var(--spacing-sm) var(--spacing-md);
    vertical-align: middle;
}

.invoice-table .text-small {
    font-size: var(--font-size-sm);
}

/* Status indicators */
.invoice-table tr.paid {
    background-color: var(--invoice-paid-color) !important;
}

.invoice-table tr.unpaid {
    background-color: var(--invoice-unpaid-color) !important;
}

.invoice-table tr.overdue {
    background-color: var(--invoice-overdue-color) !important;
}

.invoice-table tr.overpaid {
    background-color: var(--invoice-overpaid-color) !important;
}

/* Amount columns */
.invoice-table .amount-column {
    font-weight: 500;
    text-align: right;
}

.invoice-table .balance-due {
    font-weight: 600;
    text-align: right;
}

.invoice-table .balance-due.positive {
    color: var(--danger-color);
}

.invoice-table .balance-due.zero {
    color: var(--success-color);
}

.invoice-table .balance-due.negative {
    color: var(--warning-color);
}

/* Action buttons */
.invoice-table .action-column {
    white-space: nowrap;
    text-align: center;
}

.invoice-table .action-column .btn {
    padding: var(--spacing-xs) var(--spacing-sm);
    margin: 0 2px;
}

.invoice-table .action-column .btn i {
    font-size: 14px;
}

/* Filter card styles */
.invoice-filter-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--spacing-lg);
}

.invoice-filter-card .card-title {
    color: var(--text-primary);
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-md);
}

.invoice-filter-card .form-control,
.invoice-filter-card .form-select {
    border-color: var(--border-light);
}

.invoice-filter-card .form-control:focus,
.invoice-filter-card .form-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(1, 44, 25, 0.15);
}

/* ===== PRINT STYLES ===== */
@media print {
    .btn, .badge {
        display: none !important;
    }
    
    .card {
        border: 1px solid var(--dark) !important;
        box-shadow: none !important;
    }
    
    .table {
        border: 1px solid var(--dark) !important;
    }
    
    .table th,
    .table td {
        border: 1px solid var(--dark) !important;
    }
}

/* ===== COMPREHENSIVE BOOTSTRAP OVERRIDES ===== */
/* Square-edged buttons and updated primary color overrides */

/* Text area display for read-only views */
.text-area-display {
    min-height: 80px;
    white-space: pre-wrap;
}

/* Options button positioning */
.options-button-container {
    margin-top: -15px;
}

/* All buttons - square edges */
.btn,
.btn-sm,
.btn-lg,
.btn-xl,
.btn-group .btn,
.btn-group-vertical .btn,
.input-group .btn,
.nav-pills .nav-link,
.nav-tabs .nav-link,
.dropdown-toggle,
.form-control,
.form-select,
.form-check-input,
.form-range,
.card,
.modal-content,
.alert,
.badge,
.pagination .page-link,
.list-group-item,
.breadcrumb-item,
.navbar,
.navbar-brand,
.navbar-nav .nav-link,
.dropdown-menu,
.dropdown-item,
.modal-header,
.modal-footer,
.table,
.table th,
.table td,
.progress,
.progress-bar,
.tooltip .tooltip-inner,
.popover,
.popover-header,
.popover-body,
.toast,
.toast-header,
.toast-body,
.offcanvas,
.offcanvas-header,
.offcanvas-body,
.accordion-item,
.accordion-button,
.accordion-collapse,
.accordion-body,
.carousel,
.carousel-item,
.carousel-control-prev,
.carousel-control-next,
.carousel-indicators,
.carousel-indicators [data-bs-target],
.spinner-border,
.spinner-grow {
    border-radius: 0 !important;
}

/* Updated primary color overrides with CSS custom properties */
:root {
    --bs-primary: var(--primary-color) !important;
    --bs-primary-rgb: 65, 80, 129 !important;
    --bs-primary-text-emphasis: var(--primary-color) !important;
    --bs-primary-bg-subtle: var(--primary-lighter) !important;
    --bs-primary-border-subtle: var(--primary-light) !important;
}

/* Button primary overrides */
.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary.show,
.btn-primary.dropdown-toggle.show {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: var(--white) !important;
}

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

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary.active,
.btn-outline-primary.show,
.btn-outline-primary.dropdown-toggle.show {
    color: var(--white) !important;
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

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

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

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

/* Link color overrides */
a {
    color: var(--primary-color) !important;
}

a:hover {
    color: var(--primary-dark) !important;
}

/* Form control focus overrides */
.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.form-range::-webkit-slider-thumb:focus,
.form-range::-moz-range-thumb:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 0.25rem rgba(65, 80, 129, 0.25) !important;
}

/* Navbar overrides */
.navbar-brand,
.navbar-nav .nav-link.active,
.navbar-nav .nav-link.show,
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus,
.navbar-nav .show > .nav-link,
.navbar-nav .nav-link.active,
.navbar-nav .nav-link.show {
    color: var(--primary-color) !important;
}

/* Dropdown overrides */
.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--primary-color) !important;
    color: var(--white) !important;
}

.dropdown-item:hover {
    background-color: var(--primary-lighter) !important;
    color: var(--primary-dark) !important;
}

/* Pagination overrides */
.page-link {
    color: var(--primary-color);
}

.page-link:hover {
    color: var(--primary-dark);
}

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

/* Progress bar overrides */
.progress-bar {
    background-color: var(--primary-color) !important;
}

/* Alert overrides */
.alert-primary {
    color: var(--primary-dark) !important;
    background-color: var(--primary-lighter) !important;
    border-color: var(--primary-light) !important;
}

/* Badge overrides */
.badge.bg-primary {
    background-color: var(--primary-color) !important;
}

/* List group overrides */
.list-group-item-primary {
    color: var(--primary-dark) !important;
    background-color: var(--primary-lighter) !important;
}

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

/* Modal overrides */
.modal-header .btn-close:focus {
    box-shadow: 0 0 0 0.25rem rgba(65, 80, 129, 0.25) !important;
}

/* Accordion overrides */
.accordion-button:not(.collapsed) {
    color: var(--primary-color) !important;
    background-color: var(--primary-lighter) !important;
}

.accordion-button:focus {
    box-shadow: 0 0 0 0.25rem rgba(65, 80, 129, 0.25) !important;
}

/* Nav tabs overrides */
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

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

/* Nav pills overrides */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: #022C1A !important;
}

/* Navbar toggler overrides */
.navbar-toggler:focus {
    box-shadow: 0 0 0 0.25rem rgba(2, 44, 26, 0.25) !important;
}

/* Close button overrides */
.btn-close:focus {
    box-shadow: 0 0 0 0.25rem rgba(2, 44, 26, 0.25) !important;
}

/* Switch overrides */
.form-switch .form-check-input:checked {
    background-color: #022C1A !important;
    border-color: #022C1A !important;
}

/* Tooltip overrides */
.tooltip .tooltip-inner {
    background-color: #022C1A !important;
}

.tooltip.bs-tooltip-auto[x-placement^=top] .arrow::before,
.tooltip.bs-tooltip-top .arrow::before {
    border-top-color: #022C1A !important;
}

.tooltip.bs-tooltip-auto[x-placement^=bottom] .arrow::before,
.tooltip.bs-tooltip-bottom .arrow::before {
    border-bottom-color: #022C1A !important;
}

.tooltip.bs-tooltip-auto[x-placement^=left] .arrow::before,
.tooltip.bs-tooltip-left .arrow::before {
    border-left-color: #022C1A !important;
}

.tooltip.bs-tooltip-auto[x-placement^=right] .arrow::before,
.tooltip.bs-tooltip-right .arrow::before {
    border-right-color: #022C1A !important;
}

/* Popover overrides */
.popover-header {
    background-color: #022C1A !important;
    color: var(--white) !important;
}

/* Toast overrides */
.toast-header {
    background-color: #e6f2ed !important;
    color: #001a0f !important;
}

/* Breadcrumb overrides */
.breadcrumb-item.active {
    color: #022C1A !important;
}

/* Table overrides */
.table-primary,
.table-primary > th,
.table-primary > td {
    background-color: #e6f2ed !important;
}

.table-hover .table-primary:hover {
    background-color: #1a4d2e !important;
}

/* Card overrides */
.card-header-tabs .nav-link.active {
    color: #022C1A !important;
    border-color: #022C1A !important;
}

/* Input group overrides */
.input-group-text {
    border-color: #022C1A !important;
}

/* Custom select overrides */
.form-select:focus {
    border-color: #022C1A !important;
    box-shadow: 0 0 0 0.25rem rgba(2, 44, 26, 0.25) !important;
}

/* Range slider overrides */
.form-range::-webkit-slider-thumb:focus {
    box-shadow: 0 0 0 0.25rem rgba(2, 44, 26, 0.25) !important;
}

.form-range::-moz-range-thumb:focus {
    box-shadow: 0 0 0 0.25rem rgba(2, 44, 26, 0.25) !important;
}

/* Offcanvas overrides */
.offcanvas-header .btn-close:focus {
    box-shadow: 0 0 0 0.25rem rgba(2, 44, 26, 0.25) !important;
}

/* Spinner overrides */
.spinner-border.text-primary {
    color: #022C1A !important;
}

/* Carousel overrides */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* Form validation overrides */
.was-validated .form-control:valid,
.form-control.is-valid {
    border-color: var(--success-color) !important;
}

.was-validated .form-control:invalid,
.form-control.is-invalid {
    border-color: var(--danger-color) !important;
}

/* Custom file input overrides */
.form-control[type="file"]:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 0.25rem rgba(65, 80, 129, 0.25) !important;
}

/* Dashboard specific overrides */
.tao_dashboard.bg-primary {
    background-color: var(--primary-color) !important;
}

/* Icon colors in primary contexts */
.bg-primary i,
.bg-primary .bi {
    color: var(--white) !important;
}

/* Text in primary contexts */
.bg-primary .text-white {
    color: var(--white) !important;
}

/* Links in primary contexts */
.bg-primary a {
    color: var(--white) !important;
}

.bg-primary a:hover {
    color: var(--primary-lighter) !important;
}

/* Button text in primary contexts */
.bg-primary .btn {
    color: var(--white) !important;
    border-color: var(--white) !important;
}

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

/* Card headers with primary color */
.card-header.bg-primary {
    background-color: var(--primary-color) !important;
    color: var(--white) !important;
}

/* Navigation items with primary color */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--primary-color) !important;
    color: var(--white) !important;
}

/* Dropdown items with primary color */
.dropdown-menu .dropdown-item.active,
.dropdown-menu .dropdown-item:active {
    background-color: var(--primary-color) !important;
    color: var(--white) !important;
}

/* Ensure all Bootstrap components use square edges */
.btn-group > .btn:not(:last-child):not(.dropdown-toggle),
.btn-group > .btn:not(:first-child) {
    border-radius: 0 !important;
}

.btn-group-vertical > .btn:not(:last-child):not(.dropdown-toggle),
.btn-group-vertical > .btn:not(:first-child) {
    border-radius: 0 !important;
}

/* Override any remaining Bootstrap border-radius */
*[class*="rounded"] {
    border-radius: 0 !important;
}

*[class*="border-radius"] {
    border-radius: 0 !important;
}

/* ===== FOOTER STYLING ===== */
footer.background-colour {
    background-color: rgb(6, 43, 2) !important;
}

/* ===== ACCENT COLOR UTILITIES ===== */
/* Accent 1 Color Utilities */
.btn-accent1 {
    background-color: var(--accent1-color) !important;
    border-color: var(--accent1-color) !important;
    color: var(--white) !important;
}

.btn-accent1:hover,
.btn-accent1:focus,
.btn-accent1:active,
.btn-accent1.active,
.btn-accent1.show {
    background-color: var(--accent1-dark) !important;
    border-color: var(--accent1-dark) !important;
    color: var(--white) !important;
}

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

.btn-outline-accent1:hover,
.btn-outline-accent1:focus,
.btn-outline-accent1:active,
.btn-outline-accent1.active,
.btn-outline-accent1.show {
    color: var(--white) !important;
    background-color: var(--accent1-color) !important;
    border-color: var(--accent1-color) !important;
}

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

/* Accent 2 Color Utilities */
.btn-accent2 {
    background-color: var(--accent2-color) !important;
    border-color: var(--accent2-color) !important;
    color: var(--white) !important;
}

.btn-accent2:hover,
.btn-accent2:focus,
.btn-accent2:active,
.btn-accent2.active,
.btn-accent2.show {
    background-color: var(--accent2-dark) !important;
    border-color: var(--accent2-dark) !important;
    color: var(--white) !important;
}

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

.btn-outline-accent2:hover,
.btn-outline-accent2:focus,
.btn-outline-accent2:active,
.btn-outline-accent2.active,
.btn-outline-accent2.show {
    color: var(--white) !important;
    background-color: var(--accent2-color) !important;
    border-color: var(--accent2-color) !important;
}

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

/* Accent 3 Color Utilities */
.btn-accent3 {
    background-color: var(--accent3-color) !important;
    border-color: var(--accent3-color) !important;
    color: var(--dark) !important;
}

.btn-accent3:hover,
.btn-accent3:focus,
.btn-accent3:active,
.btn-accent3.active,
.btn-accent3.show {
    background-color: var(--accent3-dark) !important;
    border-color: var(--accent3-dark) !important;
    color: var(--dark) !important;
}

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

.btn-outline-accent3:hover,
.btn-outline-accent3:focus,
.btn-outline-accent3:active,
.btn-outline-accent3.active,
.btn-outline-accent3.show {
    color: var(--dark) !important;
    background-color: var(--accent3-color) !important;
    border-color: var(--accent3-color) !important;
}

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