/**
 * TID Project - Custom Color Theme
 *
 * Warm earth-tone color palette inspired by tulareid.org
 * This file overrides base template colors while keeping all layout structure intact.
 *
 * Design Goals:
 * - Professional, minimalist aesthetic
 * - High readability and accessibility
 * - Warm earth-tone scheme (creams, tans, browns)
 * - Clean, functional design typical of government/utility websites
 */

:root {
    /* === PRIMARY COLORS (Warm Browns/Tans) === */
    --primary: #9e9988;              /* Muted tan/brown - main accent */
    --primary-dark: #7a7567;         /* Darker brown for hover states */
    --primary-light: #b5b09f;        /* Lighter tan for accents */

    /* === NEUTRAL EARTH TONES === */
    --secondary: #8b8578;            /* Medium brown for secondary elements */
    --light: #f7f6f3;                /* Light beige/cream backgrounds */
    --dark: #262626;                 /* Dark gray/near-black text */

    /* === BACKGROUND COLORS === */
    --surface-light: #fcf9ef;        /* Light cream/tan surface */
    --surface-lighter: #fbf8ee;      /* Even lighter cream */

    /* === CREAM SCALE (Earth Tones) === */
    --cream-50: #fbf8ee;
    --cream-100: #f7f6f3;
    --cream-200: #f3f0e8;
    --cream-300: #eae5d8;
    --cream-400: #ddd7c8;
    --cream-500: #ccc4b0;
    --cream-600: #b5b09f;
    --cream-700: #9e9988;
    --cream-800: #7a7567;
    --cream-900: #565249;

    /* === BROWN SCALE (Warm Accents) === */
    --brown-50: #f9f5f0;
    --brown-100: #f0e8dc;
    --brown-200: #e3d5c3;
    --brown-300: #d4c0a8;
    --brown-400: #c4aa8d;
    --brown-500: #b39572;
    --brown-600: #9e9988;              /* Primary brown */
    --brown-700: #7a7567;              /* Darker brown */
    --brown-800: #565249;
    --brown-900: #3d3832;

    /* === ACCENT COLORS (Warm Tones) === */
    --accent: #9e9988;                /* Same as primary */
    --accent-light: #f3f0e8;          /* Very light cream for subtle backgrounds */
    --accent-dark: #7a7567;           /* Dark brown for emphasis */
    --highlight: #b39572;             /* Warm highlight */

    /* === STATUS COLORS (Professional) === */
    --success: #28a745;               /* Standard green */
    --info: #17a2b8;                  /* Standard cyan */
    --warning: #ffc107;               /* Standard yellow */
    --danger: #dc3545;                /* Standard red */
}

/* === BODY & TEXT === */
body {
    background-color: #f7f6f3;        /* Light beige/cream background */
    color: var(--dark);
    /* Subtle noise pattern to mimic texture without external image */
    background-image:
        repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(0,0,0,.02) 2px, rgba(0,0,0,.02) 4px),
        repeating-linear-gradient(-45deg, transparent, transparent 2px, rgba(0,0,0,.02) 2px, rgba(0,0,0,.02) 4px);
}

/* === NAVIGATION BAR === */
header {
    position: relative;
    z-index: 1050;  /* Higher than sidebar (1000) to stay on top */
}

.navbar {
    background: linear-gradient(135deg, #9e9988, #7a7567) !important;  /* Warm brown gradient */
    border-bottom: 1px solid #7a7567;
}

.navbar-dark .navbar-nav .nav-link {
    color: #fbf8ee;                   /* Light cream text */
}

.navbar-dark .navbar-nav .nav-link:hover {
    color: #ffffff;                   /* White on hover */
    background: rgba(255, 255, 255, 0.1);
}

/* Navbar toggler with Material Icon */
.navbar-toggler {
    border-color: rgba(255, 255, 255, 0.2);
    color: #fbf8ee;
    padding: 0.5rem;
}

.navbar-toggler:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
}

.navbar-toggler:focus {
    box-shadow: 0 0 0 0.2rem rgba(251, 248, 238, 0.25);
    border-color: rgba(255, 255, 255, 0.3);
}

.navbar-toggler .material-symbols-outlined {
    font-size: 1.5rem;
    color: #fbf8ee;
}

/* === CARDS === */
.card {
    border: 1px solid var(--cream-400);
    background-color: #fcf9ef;        /* Light cream cards for separation */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);  /* Subtle lift */
}

.card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);  /* Stronger shadow on hover */
    border-color: var(--cream-500);
}

.card-header {
    background: linear-gradient(135deg, #9e9988, #7a7567);  /* Brown gradient header */
    color: white;
    border-bottom: 1px solid var(--cream-500);
}

.card-body {
    background-color: #fcf9ef;        /* Ensure card body matches card background */
}

/* === BUTTONS === */
.btn-primary {
    background: linear-gradient(135deg, #9e9988, #7a7567);  /* Warm brown button */
    border-color: transparent;
    color: white;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #7a7567, #565249);
    border-color: transparent;
}

.btn-secondary {
    background-color: var(--cream-300);
    border-color: var(--cream-400);
    color: var(--dark);
}

.btn-secondary:hover {
    background-color: var(--cream-400);
    border-color: var(--cream-500);
}

/* === PAGE HEADER === */
.page-header {
    background: linear-gradient(135deg, #9e9988, #7a7567);  /* Matches navbar */
    color: white;
}

/* === FOOTER === */
footer {
    background: linear-gradient(135deg, #8b8578, #7a7567) !important;  /* Brown gradient */
    color: #f3f0e8;
    border-top: 1px solid #7a7567;
    position: relative;
    z-index: 1020;  /* Above sidebar (1000) but below offcanvas (1045) and modals (1050+) */
}

footer h5, footer h6 {
    color: white;
}

footer h5::after, footer h6::after {
    background: linear-gradient(90deg, #b39572, transparent);  /* Warm brown accent */
}

/* === TABLES === */
.table {
    background-color: #ffffff;        /* White table background for separation */
}

.table thead th {
    background-color: var(--cream-200);
    color: var(--dark);
    border-bottom: 2px solid var(--cream-500);
}

.table tbody tr {
    background-color: #ffffff;
}

.table tbody tr:hover {
    background-color: var(--cream-50);
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: #fefdfb;        /* Very subtle stripe */
}

.table-theme thead th {
    background: linear-gradient(135deg, #9e9988, #7a7567);  /* Brown gradient */
    color: white;
}

/* === FORMS === */
.form-control,
.form-select,
textarea.form-control,
select.form-control {
    background-color: #ffffff;        /* White background to contrast with cream card */
    border: 1.5px solid var(--cream-500);  /* Stronger, more visible border */
}

.form-control:focus,
.form-select:focus,
textarea.form-control:focus,
select.form-control:focus {
    border-color: #9e9988;
    box-shadow: 0 0 0 0.2rem rgba(158, 153, 136, 0.25);  /* Warm brown focus */
    background-color: #ffffff;
}

.form-control:disabled,
.form-control[readonly] {
    background-color: var(--cream-100);
    border-color: var(--cream-400);
}

.input-group-text {
    background: linear-gradient(135deg, #9e9988, #7a7567);  /* Brown gradient */
    color: white;
    border-color: #9e9988;
}

/* Form labels for better readability on cream background */
.form-label {
    color: var(--dark);
    font-weight: 500;
}

/* Password toggle buttons */
.input-group .passwordToggle {
    background: linear-gradient(135deg, #9e9988, #7a7567) !important;
    color: white !important;
    border: 1px solid #9e9988 !important;
}

.input-group .passwordToggle:hover {
    background: linear-gradient(135deg, #7a7567, #565249) !important;
}

/* === PAGINATION === */
.page-link {
    color: var(--brown-700);
    border-color: var(--cream-300);
}

.page-link:hover {
    background-color: #9e9988;
    border-color: #9e9988;
    color: white;
}

.page-item.active .page-link {
    background: linear-gradient(135deg, #9e9988, #7a7567);
    border-color: #9e9988;
}

/* === DATATABLES === */
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: #9e9988 !important;
    border-color: #9e9988 !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: linear-gradient(135deg, #9e9988, #7a7567) !important;
}

/* === ALERTS === */
.alert-primary {
    background-color: #f3f0e8;
    border-color: #e3d5c3;
    color: #565249;
}

/* === BADGES === */
.badge-primary {
    background: linear-gradient(135deg, #9e9988, #7a7567);
}

.badge-theme {
    background: linear-gradient(135deg, #9e9988, #7a7567);
}

/* === STATS CARDS === */
.stats-card .icon {
    background: linear-gradient(135deg, #9e9988, #7a7567);
}

.stats-card::after {
    background: linear-gradient(135deg, #f3f0e8, transparent);
}

/* === MODALS === */
.modal-header {
    background: linear-gradient(135deg, #9e9988, #7a7567);  /* Brown gradient */
    border-bottom: 1px solid #9e9988;
}

/* === PROGRESS BARS === */
.progress-bar {
    background: linear-gradient(90deg, #9e9988, #7a7567);
}

/* === BACKGROUND UTILITIES === */
.bg-primary {
    background-color: #9e9988 !important;
}

.bg-primary-gradient {
    background: linear-gradient(135deg, #9e9988, #7a7567) !important;
}

.bg-accent {
    background-color: #9e9988 !important;
}

.bg-accent-light {
    background-color: #f3f0e8 !important;
}

.bg-accent-gradient {
    background: linear-gradient(135deg, #9e9988, #7a7567) !important;
    color: white;
}

/* === DROPDOWN MENUS === */
.dropdown-menu {
    border: 1px solid var(--cream-300) !important;
    background-color: white !important;
}

.dropdown-menu-dark {
    background: var(--brown-800) !important;
    border-color: var(--brown-700) !important;
}

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

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--cream-100) !important;
    color: #9e9988 !important;
}

.dropdown-menu-dark .dropdown-item {
    color: rgba(255, 255, 255, 0.9) !important;
}

.dropdown-menu-dark .dropdown-item:hover,
.dropdown-menu-dark .dropdown-item:focus {
    background-color: rgba(255, 255, 255, 0.15) !important;
    color: #fff !important;
}

/* === LINKS === */
a {
    color: #9e9988;
}

a:hover {
    color: #7a7567;
}

/* === BREADCRUMBS === */
.breadcrumb {
    background-color: var(--cream-100);
}

.breadcrumb-item a {
    color: #9e9988;
}

/* === BUTTON OUTLINES === */
.btn-outline-primary {
    color: #9e9988;
    border-color: #9e9988;
}

.btn-outline-primary:hover {
    background-color: #9e9988;
    border-color: #9e9988;
    color: white;
}

/* === FOCUS STATES === */
:focus-visible {
    outline: 2px solid #9e9988;
    outline-offset: 2px;
}

.focus\:ring:focus {
    box-shadow: 0 0 0 3px rgba(158, 153, 136, 0.1);
}

/* ============================================================
   NAVIGATION COLOR OVERRIDES
   ============================================================
   Semantic variables for base navigation system (left-nav-layout.css)
   These override the base defaults with TID's warm earth-tone palette
   ============================================================ */

:root {
    /* Navigation/Sidebar colors - TID warm brown theme */
    --nav-bg-start: #7a7567;              /* Warm brown gradient start */
    --nav-bg-end: #565249;                /* Darker brown gradient end */
    --nav-text: #f3f0e8;                  /* Light cream text */
    --nav-text-light: #e3d5c3;            /* Lighter cream for submenus */
    --nav-text-muted: #c4aa8d;            /* Muted tan for labels */
    --nav-hover-bg: rgba(255, 255, 255, 0.1);    /* Subtle white hover */
    --nav-active-bg: rgba(179, 149, 114, 0.2);   /* Warm highlight active */
    --nav-active-border: #b39572;         /* Warm tan active border */
}

/* ============================================================
   FORM FIXED FOOTER
   ============================================================
   Sticky footer for long forms that keeps action buttons
   visible at the bottom of the viewport as you scroll
   ============================================================ */

.form-fixed-footer {
    position: fixed;
    bottom: 0;
    left: 0; /* Will be set dynamically by JavaScript */
    right: 0;
    background-color: #fff;
    border-top: 1px solid #dee2e6;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    padding: 1rem 0;
    z-index: 1055; /* Higher than site footer (1050) to stay on top */
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, left 0.35s ease;
}

/* Docked mode - stays fixed but adjusts bottom offset to sit above site footer */
.form-fixed-footer.docked {
    /* Keep position: fixed, but bottom will be set dynamically via inline style */
}

/* Add padding to body to prevent content from being hidden behind fixed footer */
/* Note: padding-bottom is now applied dynamically by form-fixed-footer.js based on actual footer height */
body.has-fixed-footer {
    /* Dynamic padding applied via JavaScript */
}

/* Ensure buttons are properly styled in the fixed footer */
.form-fixed-footer .btn-group {
    margin: 0;
}

/* ============================================================
   SIDEBAR SECTION TEXT BRIGHTNESS
   ============================================================
   Override base to make section headers more prominent
   ============================================================ */

.sidebar-section-text {
    color: var(--nav-text);               /* Use brighter cream instead of default */
    font-weight: 500;                     /* Slightly bolder */
}