/**
 * (re)expense Color Themes
 * Four distinct color schemes for different brand personalities
 */

/* =====================================================
   Theme Color Swatches (for settings page)
   ===================================================== */
.theme-color-swatch {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: inline-block;
}

.theme-card {
    cursor: pointer;
}

.theme-card .card {
    transition: all 0.2s ease;
    border: 2px solid transparent;
}

.theme-card input:checked + .card {
    border-color: var(--tblr-primary);
    box-shadow: 0 0 0 3px rgba(var(--tblr-primary-rgb), 0.15);
}

.theme-card .form-selectgroup-check {
    width: 20px;
    height: 20px;
    border: 2px solid #ccc;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.theme-card input:checked + .card .form-selectgroup-check {
    border-color: var(--tblr-primary);
    background: var(--tblr-primary);
}

.theme-card input:checked + .card .form-selectgroup-check::after {
    content: '';
    width: 8px;
    height: 8px;
    background: white;
    border-radius: 50%;
}

/* =====================================================
   DEFAULT THEME: The Modern Broker (Trust & Tech)
   ===================================================== */
:root,
[data-theme="modern-broker"] {
    /* Primary Colors */
    --tt-primary: #0F172A;
    --tt-primary-rgb: 15, 23, 42;
    --tt-secondary: #334155;
    --tt-accent: #3B82F6;
    --tt-accent-rgb: 59, 130, 246;

    /* Status Colors */
    --tt-success: #10B981;
    --tt-success-rgb: 16, 185, 129;
    --tt-warning: #F59E0B;
    --tt-danger: #EF4444;
    --tt-info: #3B82F6;

    /* Background Colors */
    --tt-bg-body: #F8FAFC;
    --tt-bg-surface: #FFFFFF;
    --tt-bg-surface-secondary: #F1F5F9;

    /* Text Colors */
    --tt-text-primary: #0F172A;
    --tt-text-secondary: #64748B;
    --tt-text-muted: #94A3B8;

    /* Border Colors */
    --tt-border: #E2E8F0;
    --tt-border-dark: #CBD5E1;

    /* Sidebar */
    --tt-sidebar-bg: #0F172A;
    --tt-sidebar-text: rgba(255, 255, 255, 0.7);
    --tt-sidebar-text-active: #FFFFFF;
    --tt-sidebar-active-bg: rgba(59, 130, 246, 0.2);
    --tt-sidebar-active-text: #60A5FA;

    /* Buttons */
    --tt-btn-primary-bg: #3B82F6;
    --tt-btn-primary-text: #FFFFFF;
    --tt-btn-primary-hover: #2563EB;
}

/* =====================================================
   THEME: The Luxury Estate (High-End & Minimalist)
   ===================================================== */
[data-theme="luxury-estate"] {
    /* Primary Colors */
    --tt-primary: #1A1A1A;
    --tt-primary-rgb: 26, 26, 26;
    --tt-secondary: #E5E5E5;
    --tt-accent: #D4AF37;
    --tt-accent-rgb: 212, 175, 55;

    /* Status Colors */
    --tt-success: #10B981;
    --tt-success-rgb: 16, 185, 129;
    --tt-warning: #D4AF37;
    --tt-danger: #C0392B;
    --tt-info: #6B7280;

    /* Background Colors */
    --tt-bg-body: #FFFFFF;
    --tt-bg-surface: #FFFFFF;
    --tt-bg-surface-secondary: #FAFAFA;

    /* Text Colors */
    --tt-text-primary: #1A1A1A;
    --tt-text-secondary: #4A4A4A;
    --tt-text-muted: #9CA3AF;

    /* Border Colors */
    --tt-border: #E5E5E5;
    --tt-border-dark: #D1D5DB;

    /* Sidebar */
    --tt-sidebar-bg: #1A1A1A;
    --tt-sidebar-text: rgba(255, 255, 255, 0.7);
    --tt-sidebar-text-active: #FFFFFF;
    --tt-sidebar-active-bg: rgba(212, 175, 55, 0.15);
    --tt-sidebar-active-text: #D4AF37;

    /* Buttons */
    --tt-btn-primary-bg: #1A1A1A;
    --tt-btn-primary-text: #FFFFFF;
    --tt-btn-primary-hover: #333333;
}

/* =====================================================
   THEME: The Commission (Growth & Energy)
   ===================================================== */
[data-theme="commission"] {
    /* Primary Colors */
    --tt-primary: #064E3B;
    --tt-primary-rgb: 6, 78, 59;
    --tt-secondary: #D1FAE5;
    --tt-accent: #059669;
    --tt-accent-rgb: 5, 150, 105;

    /* Status Colors */
    --tt-success: #059669;
    --tt-success-rgb: 5, 150, 105;
    --tt-warning: #D97706;
    --tt-danger: #DC2626;
    --tt-info: #0891B2;

    /* Background Colors */
    --tt-bg-body: #FFFFFF;
    --tt-bg-surface: #FFFFFF;
    --tt-bg-surface-secondary: #ECFDF5;

    /* Text Colors */
    --tt-text-primary: #1E293B;
    --tt-text-secondary: #475569;
    --tt-text-muted: #94A3B8;

    /* Border Colors */
    --tt-border: #D1FAE5;
    --tt-border-dark: #A7F3D0;

    /* Sidebar */
    --tt-sidebar-bg: #064E3B;
    --tt-sidebar-text: rgba(255, 255, 255, 0.75);
    --tt-sidebar-text-active: #FFFFFF;
    --tt-sidebar-active-bg: rgba(16, 185, 129, 0.2);
    --tt-sidebar-active-text: #6EE7B7;

    /* Buttons */
    --tt-btn-primary-bg: #059669;
    --tt-btn-primary-text: #FFFFFF;
    --tt-btn-primary-hover: #047857;
}

/* =====================================================
   THEME: Open House (Approachable & Warm)
   ===================================================== */
[data-theme="open-house"] {
    /* Primary Colors */
    --tt-primary: #FF6B6B;
    --tt-primary-rgb: 255, 107, 107;
    --tt-secondary: #4ECDC4;
    --tt-accent: #FFE66D;
    --tt-accent-rgb: 255, 230, 109;

    /* Status Colors */
    --tt-success: #4ECDC4;
    --tt-success-rgb: 78, 205, 196;
    --tt-warning: #FFE66D;
    --tt-danger: #FF6B6B;
    --tt-info: #45B7D1;

    /* Background Colors */
    --tt-bg-body: #FFF9F5;
    --tt-bg-surface: #FFFFFF;
    --tt-bg-surface-secondary: #FFF5F0;

    /* Text Colors */
    --tt-text-primary: #292F36;
    --tt-text-secondary: #4A5568;
    --tt-text-muted: #A0AEC0;

    /* Border Colors */
    --tt-border: #FED7D7;
    --tt-border-dark: #FEB2B2;

    /* Sidebar */
    --tt-sidebar-bg: #292F36;
    --tt-sidebar-text: rgba(255, 255, 255, 0.75);
    --tt-sidebar-text-active: #FFFFFF;
    --tt-sidebar-active-bg: rgba(255, 107, 107, 0.2);
    --tt-sidebar-active-text: #FF6B6B;

    /* Buttons */
    --tt-btn-primary-bg: #FF6B6B;
    --tt-btn-primary-text: #FFFFFF;
    --tt-btn-primary-hover: #FF5252;
}

/* =====================================================
   Apply Theme Variables to Tabler Components
   ===================================================== */

/* Body */
body {
    background-color: var(--tt-bg-body) !important;
}

/* Page wrapper */
.page-wrapper {
    background-color: var(--tt-bg-body);
}

/* Cards */
.card {
    background-color: var(--tt-bg-surface);
    border-color: var(--tt-border);
}

/* Sidebar */
.navbar-vertical {
    background-color: var(--tt-sidebar-bg) !important;
}

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

.navbar-vertical .nav-link:hover {
    color: var(--tt-sidebar-text-active) !important;
    background: rgba(255, 255, 255, 0.05);
}

.navbar-vertical .nav-link.active {
    color: var(--tt-sidebar-active-text) !important;
    background: var(--tt-sidebar-active-bg) !important;
}

.navbar-vertical[data-bs-theme="dark"] .nav-link.active {
    color: #6ee7b7 !important;
}

/* Navbar Brand (logo + text) */
.navbar-brand a {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
}

.navbar-vertical .navbar-brand .text-primary {
    color: var(--tt-sidebar-active-text) !important;
}

.navbar-vertical .navbar-brand {
    color: var(--tt-sidebar-text-active);
}

/* Buttons - Primary */
.btn-primary {
    background-color: var(--tt-btn-primary-bg) !important;
    border-color: var(--tt-btn-primary-bg) !important;
    color: var(--tt-btn-primary-text) !important;
}

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

/* Success elements */
.text-green,
.text-success {
    color: var(--tt-success) !important;
}

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

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

/* Text colors */
.text-secondary {
    color: var(--tt-text-secondary) !important;
}

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

/* Links and active states */
.nav-link.active,
.list-group-item.active {
    color: var(--tt-accent) !important;
}

/* Page pretitle */
.page-pretitle {
    color: var(--tt-text-secondary);
}

/* Stat card icons */
.bg-primary-lt {
    background-color: rgba(var(--tt-accent-rgb), 0.1) !important;
}

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

/* Table hover */
.table-hover tbody tr:hover {
    background-color: var(--tt-bg-surface-secondary);
}

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

/* Form controls focus */
.form-control:focus,
.form-select:focus {
    border-color: var(--tt-accent);
    box-shadow: 0 0 0 0.25rem rgba(var(--tt-accent-rgb), 0.25);
}

/* Alert info */
.alert-info {
    background-color: rgba(var(--tt-accent-rgb), 0.1);
    border-color: rgba(var(--tt-accent-rgb), 0.2);
    color: var(--tt-text-primary);
}

/* Dropdown menus */
.dropdown-menu {
    background-color: var(--tt-bg-surface);
    border-color: var(--tt-border);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--tt-bg-surface-secondary);
}

/* Modals */
.modal-content {
    background-color: var(--tt-bg-surface);
}

/* Tabs */
.nav-tabs .nav-link.active {
    background-color: var(--tt-bg-surface);
    border-color: var(--tt-border) var(--tt-border) var(--tt-bg-surface);
    color: var(--tt-accent);
}

/* Progress bars */
.progress-bar {
    background-color: var(--tt-accent);
}

/* Borders */
.border {
    border-color: var(--tt-border) !important;
}

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

/* Avatar backgrounds */
.avatar.bg-primary-lt {
    background-color: rgba(var(--tt-accent-rgb), 0.15) !important;
    color: var(--tt-accent) !important;
}