/* ==========================================================================
   Theme Variables CSS Override
   app/admin/static/css/theme_variables.css
   ==========================================================================
   
   This stylesheet uses CSS custom properties (variables) to dynamically 
   theme the entire application. The :root variables are injected by the 
   Jinja2 template via the context processor.
   
   HOW IT WORKS:
   1. The context processor (inject_theme) generates :root { --theme-xxx: #val; }
   2. This CSS file references those variables with fallbacks to default colors
   3. When a company changes their theme, only the variables change - no CSS edits
   
   INTEGRATION: Add this line to base.html <head> AFTER your other CSS:
   
       <style id="theme-variables">{{ theme_css | safe }}</style>
       <link rel="stylesheet" href="{{ url_for('static', filename='css/theme_variables.css') }}">
   
   ========================================================================== */

/* ==========================================================================
   1. NAVIGATION & HEADER
   ========================================================================== */
.admin-navbar,
.navbar-admin {
    background: var(--theme-header-gradient, linear-gradient(135deg, #634b32 0%, #8b6b4a 100%)) !important;
}

.navbar-brand {
    color: var(--theme-header-text, #ffffff) !important;
}

.navbar .nav-link,
.top-navigation .nav-link {
    color: var(--theme-header-text, rgba(255, 255, 255, 0.95)) !important;
}

/* Nav pills (sub-navigation) */
.nav-pills .nav-link {
    color: var(--theme-primary-color, #634b32) !important;
    border-radius: var(--theme-border-radius, 8px);
}

.nav-pills .nav-link:hover {
    background-color: var(--theme-primary-light, #8b6b4a) !important;
    color: var(--theme-btn-primary-text, #ffffff) !important;
}

.nav-pills .nav-link.active {
    background-color: var(--theme-primary-color, #634b32) !important;
    color: var(--theme-btn-primary-text, #ffffff) !important;
}

/* Nav tabs (tab-style sub-navigation) */
.nav-tabs .nav-link {
    color: var(--theme-primary-color, #634b32) !important;
}

.nav-tabs .nav-link:hover {
    color: var(--theme-primary-dark, #4a3726) !important;
    border-color: var(--theme-primary-light, #8b6b4a) !important;
}

.nav-tabs .nav-link.active {
    color: var(--theme-primary-color, #634b32) !important;
    border-bottom-color: var(--theme-primary-color, #634b32) !important;
    font-weight: 600;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--theme-dropdown-hover-bg, #f0e6d9) !important;
    color: var(--theme-primary-color, #634b32) !important;
}

.dropdown-header {
    color: var(--theme-primary-color, #634b32) !important;
}


/* ==========================================================================
   2. BUTTONS
   ========================================================================== */
.btn-primary {
    background-color: var(--theme-btn-primary-bg, #634b32) !important;
    border-color: var(--theme-btn-primary-bg, #634b32) !important;
    color: var(--theme-btn-primary-text, #ffffff) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active {
    background-color: var(--theme-btn-primary-hover, #c39144) !important;
    border-color: var(--theme-btn-primary-hover, #c39144) !important;
    color: var(--theme-btn-primary-text, #ffffff) !important;
}

.btn-outline-primary {
    color: var(--theme-btn-primary-bg, #634b32) !important;
    border-color: var(--theme-btn-primary-bg, #634b32) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    background-color: var(--theme-btn-primary-hover, #c39144) !important;
    border-color: var(--theme-btn-primary-hover, #c39144) !important;
    color: var(--theme-btn-primary-text, #ffffff) !important;
}

.btn-success {
    background-color: var(--theme-btn-success-bg, #28a745) !important;
    border-color: var(--theme-btn-success-bg, #28a745) !important;
}

.btn-danger {
    background-color: var(--theme-btn-danger-bg, #dc3545) !important;
    border-color: var(--theme-btn-danger-bg, #dc3545) !important;
}

.btn-warning {
    background-color: var(--theme-btn-warning-bg, #ffc107) !important;
    border-color: var(--theme-btn-warning-bg, #ffc107) !important;
}


/* ==========================================================================
   3. CARDS
   ========================================================================== */
.card {
    border-radius: var(--theme-border-radius, 8px);
}

.card-header {
    background-color: var(--theme-card-header-bg, #f8f9fa);
    color: var(--theme-card-header-text, #333333);
    border-radius: var(--theme-border-radius, 8px) var(--theme-border-radius, 8px) 0 0;
}


/* ==========================================================================
   4. TABLES
   ========================================================================== */
.table thead th {
    background-color: var(--theme-table-header-bg, #f8f9fa);
    color: var(--theme-table-header-text, #333333);
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--theme-table-stripe-bg, #fafafa);
}


/* ==========================================================================
   5. MODALS
   ========================================================================== */
.modal-header {
    background: var(--theme-modal-header-bg, #c39144) !important;
    color: var(--theme-modal-header-text, #ffffff) !important;
    border-bottom-color: var(--theme-modal-border, #634b32) !important;
}

.modal-header .close {
    color: var(--theme-modal-header-text, #ffffff) !important;
}

.modal-footer {
    background: var(--theme-modal-header-bg, #c39144) !important;
    border-top-color: var(--theme-modal-border, #634b32) !important;
}


/* ==========================================================================
   6. LINKS - Override Bootstrap default blue (#007bff / #0056b3)
   ========================================================================== */
a {
    color: var(--theme-link-color, #634b32);
}

a:hover {
    color: var(--theme-link-hover, #c39144);
}

/* Preserve white text on themed buttons */
a.btn-brown,
a.btn-brown:hover {
    color: var(--theme-btn-primary-text, #fff);
}

a.btn-cream {
    color: var(--primary-dark, #4a3726);
}


/* ==========================================================================
   7. BADGES
   ========================================================================== */
.badge-primary {
    background-color: var(--theme-badge-primary, #634b32) !important;
}

.badge-info,
.badge-accent {
    background-color: var(--theme-badge-accent, #c39144) !important;
}

.priority-badge.normal {
    background-color: var(--theme-btn-success-bg, #28a745);
}


/* ==========================================================================
   8. NOTIFICATIONS
   ========================================================================== */
.notification-badge {
    background-color: var(--theme-notification-badge, #dc3545) !important;
}


/* ==========================================================================
   9. PAGE LAYOUT
   ========================================================================== */
body {
    background-color: var(--theme-body-bg, #f5f5f5);
    color: var(--theme-body-text, #333333);
    font-family: var(--theme-font-family, Arial, Helvetica, sans-serif);
}

.footer {
    background-color: var(--theme-footer-bg, #f8f9fa) !important;
    color: var(--theme-footer-text, #666666);
}


/* ==========================================================================
   10. PAGINATION & FORM FOCUS
   ========================================================================== */
.page-item.active .page-link {
    background-color: var(--theme-primary-color, #634b32);
    border-color: var(--theme-primary-color, #634b32);
}

.page-link {
    color: var(--theme-primary-color, #634b32);
}

.page-link:hover {
    color: var(--theme-primary-dark, #4a3726);
}

.form-control:focus {
    border-color: var(--theme-accent-color, #c39144);
    box-shadow: 0 0 0 0.2rem rgba(var(--theme-accent-color, 195, 145, 68), 0.25);
}

/* Custom checkbox/radio using theme colors */
.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--theme-primary-color, #634b32);
    border-color: var(--theme-primary-color, #634b32);
}

/* DataTables integration */
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--theme-primary-color, #634b32) !important;
    border-color: var(--theme-primary-color, #634b32) !important;
    color: #fff !important;
}

/* Progress bars */
.progress-bar {
    background-color: var(--theme-primary-color, #634b32);
}

/* Selection/highlight */
::selection {
    background-color: var(--theme-accent-color, #c39144);
    color: #fff;
}

/* Scrollbar theming (Webkit browsers) */
::-webkit-scrollbar-thumb {
    background-color: var(--theme-primary-light, #8b6b4a);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--theme-primary-color, #634b32);
}