/**
 * Professional Color Scheme for Medrano Landscaping Inc
 * 
 * Primary Color: Deep Forest Green - #1B4332 (Professional, nature-related)
 * Secondary Color: Fresh Lawn Green - #52B788 (Vibrant, landscape)
 * Accent Color: Sky Blue - #2D6A4F (Trust, stability)
 * Background: Soft White - #F8F9FA (Clean, modern)
 * Text: Charcoal - #2B2D42 (Professional, readable)
 */

:root {
    /* Professional Color Palette */
    --primary: #1B4332;
    --primary-dark: #081C15;
    --primary-light: #2D6A4F;
    --primary-lighter: #40916C;

    /* Secondary Colors */
    --secondary: #52B788;
    --secondary-dark: #40916C;
    --secondary-light: #74C69D;
    
    /* Accent Colors */
    --accent: #2D6A4F;
    --success: #40916C;
    --warning: #F77F00;
    --danger: #D62828;
    --info: #1E88E5;

    /* Hover States */
    --primary-hover: #2D6A4F;
    --secondary-hover: #40916C;

    /* Background Colors */
    --bg-primary-light: rgba(27, 67, 50, 0.08);
    --bg-primary-lighter: rgba(27, 67, 50, 0.05);
    --bg-secondary-light: rgba(82, 183, 136, 0.1);
    --bg-professional: #F8F9FA;
    --bg-card: #FFFFFF;
    
    /* Text Colors */
    --text-primary: #2B2D42;
    --text-secondary: #6C757D;
    --text-light: #FFFFFF;
    --text-muted: #ADB5BD;
    
    /* Border Colors */
    --border-color: #DEE2E6;
    --border-light: #E9ECEF;
}

/* ============================================
   PRIMARY BUTTONS
   ============================================ */

.btn-primary {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--text-light) !important;
    font-weight: 500;
    padding: 0.5rem 1.5rem;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
    color: var(--text-light) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(27, 67, 50, 0.2);
}

.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show>.btn-primary.dropdown-toggle {
    background-color: var(--primary-dark) !important;
    border-color: var(--primary-dark) !important;
}

.btn-primary:focus,
.btn-primary.focus {
    box-shadow: 0 0 0 0.2rem rgba(27, 67, 50, 0.25) !important;
}

/* Light Button Primary */
.light.btn-primary {
    background-color: var(--bg-primary-light) !important;
    border-color: transparent !important;
    color: var(--primary) !important;
}

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

/* Shadow Button Primary */
.shadow.btn-primary {
    box-shadow: 0 0.5rem 1.125rem -0.5rem rgba(27, 67, 50, 0.4) !important;
}

/* ============================================
   BACKGROUND COLORS
   ============================================ */

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

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

[data-theme-version="dark"] .bg-primary-light {
    background-color: rgba(27, 67, 50, 0.15) !important;
}

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

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

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

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

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

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

/* ============================================
   TEXT COLORS
   ============================================ */

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

a.text-primary:hover,
a.text-primary:focus {
    color: var(--primary-hover) !important;
}

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

/* ============================================
   LINKS
   ============================================ */

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

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

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

.text-primary a:hover {
    color: var(--primary-lighter);
}

/* ============================================
   NAVIGATION & SIDEBAR
   ============================================ */

/* Navigation Header */
.nav-header {
    background-color: var(--primary) !important;
    box-shadow: 0 2px 8px rgba(27, 67, 50, 0.12);
}

.nav-header .brand-logo {
    color: var(--text-light) !important;
}

.brand-title {
    color: var(--text-light) !important;
    font-weight: 600 !important;
}

/* Header */
.header {
    background-color: var(--bg-card) !important;
    border-bottom: 1px solid var(--border-light);
    box-shadow: 0 2px 8px rgba(27, 67, 50, 0.08);
}

.dashboard_bar {
    color: var(--text-primary) !important;
    font-weight: 600;
    font-size: 1.5rem;
}

/* Sidebar */
.deznav {
    background-color: var(--primary) !important;
    box-shadow: 0 4px 12px rgba(27, 67, 50, 0.12);
}

.deznav .metismenu > li > a {
    color: rgba(255, 255, 255, 0.85) !important;
    transition: all 0.3s ease;
}

.deznav .metismenu > li > a:hover,
.deznav .metismenu > li > a:focus {
    background-color: var(--primary-light) !important;
    color: var(--text-light) !important;
}

.deznav .metismenu > li.mm-active > a {
    background-color: var(--secondary) !important;
    color: var(--text-light) !important;
}

.deznav .metismenu ul a {
    color: rgba(255, 255, 255, 0.75) !important;
}

.deznav .metismenu ul a:hover {
    color: var(--text-light) !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
}

.deznav .metismenu ul a.mm-active {
    color: var(--secondary) !important;
}

/* Active Menu Items */
.deznav .metismenu>li.mm-active>a i,
.deznav .metismenu>li:hover>a i {
    color: var(--text-light) !important;
}

/* SVG Icons in Navigation */
.svg-logo-primary-path {
    fill: var(--primary) !important;
}

/* ============================================
   FORMS & INPUTS
   ============================================ */

.form-control {
    border: 1px solid var(--border-color) !important;
    border-radius: 8px !important;
    padding: 0.6rem 1rem !important;
    color: var(--text-primary) !important;
    background-color: var(--bg-card) !important;
    transition: all 0.3s ease;
}

.form-control:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(27, 67, 50, 0.15) !important;
    background-color: var(--bg-card) !important;
}

.form-label {
    color: var(--text-primary) !important;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.form-select,
select.form-control,
select {
    border: 1px solid var(--border-color) !important;
    border-radius: 8px !important;
    padding: 0.6rem 2.5rem 0.6rem 1rem !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='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 16px 12px !important;
    background-color: white !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
}

.form-select:focus,
select.form-control:focus,
select:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(27, 67, 50, 0.15) !important;
    outline: none !important;
}

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

.form-check-input:focus {
    border-color: var(--primary-light) !important;
    box-shadow: 0 0 0 0.2rem rgba(27, 67, 50, 0.25) !important;
}

/* ============================================
   BADGES & ALERTS
   ============================================ */

.badge {
    font-weight: 500;
    padding: 0.35rem 0.65rem;
    border-radius: 6px;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

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

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

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

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

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

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

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

/* ============================================
   PROGRESS BARS
   ============================================ */

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

.bg-primary-gradient {
    background: linear-gradient(to right, var(--primary), var(--primary-light)) !important;
}

/* ============================================
   PAGINATION
   ============================================ */

.pagination .page-link {
    color: var(--primary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 8px !important;
    margin: 0 0.25rem;
    transition: all 0.3s ease;
}

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

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

/* ============================================
   DROPDOWN MENUS
   ============================================ */

.dropdown-menu {
    border: 1px solid var(--border-light) !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 24px rgba(27, 67, 50, 0.15) !important;
    padding: 0.5rem 0;
}

.dropdown-item {
    padding: 0.6rem 1.5rem;
    color: var(--text-primary) !important;
    transition: all 0.2s ease;
}

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

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

/* ============================================
   CARDS & PANELS
   ============================================ */

.card {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-light) !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 8px rgba(27, 67, 50, 0.08) !important;
    transition: all 0.3s ease;
}

.card:hover {
    box-shadow: 0 4px 12px rgba(27, 67, 50, 0.12) !important;
    transform: translateY(-2px);
}

.card-header {
    background-color: var(--bg-professional) !important;
    border-bottom: 1px solid var(--border-light) !important;
    color: var(--text-primary) !important;
    font-weight: 600;
    padding: 1rem 1.5rem;
}

.card-header.bg-primary {
    background-color: var(--primary) !important;
    color: var(--text-light) !important;
}

.card-title {
    color: var(--text-primary) !important;
    font-weight: 600;
}

.card-body {
    padding: 1.5rem;
}

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

/* ============================================
   TABLES
   ============================================ */

.table {
    background-color: var(--bg-card) !important;
    border-radius: 12px;
    overflow: hidden;
}

.table thead th {
    background-color: var(--primary) !important;
    color: #FFFFFF !important;
    font-weight: 600;
    border: none !important;
    padding: 1rem;
}

/* Ensure all table headers have white text and green background - maximum specificity */
thead th,
thead tr th,
table thead th,
.table-responsive table thead th,
.table-responsive-md thead th,
.card-body table thead th,
div table thead th {
    background-color: #1B4332 !important;
    color: #FFFFFF !important;
}

/* Force white text on all th elements with strong selector */
th.text-white,
thead th.text-white,
table thead th.text-white {
    color: #FFFFFF !important;
    background-color: #1B4332 !important;
}

.table tbody tr {
    border-bottom: 1px solid var(--border-light);
    transition: all 0.2s ease;
}

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

.table tbody td {
    padding: 1rem;
    vertical-align: middle;
    color: var(--text-primary) !important;
}

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

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

/* ============================================
   DARK MODE OVERRIDES
   ============================================ */

[data-theme-version="dark"] .btn-primary {
    background-color: var(--primary-light) !important;
    border-color: var(--primary-light) !important;
}

[data-theme-version="dark"] .btn-primary:hover {
    background-color: var(--primary-lighter) !important;
    border-color: var(--primary-lighter) !important;
}

[data-theme-version="dark"] .light.btn-primary {
    background-color: rgba(159, 41, 29, 0.2) !important;
    color: var(--primary-lighter) !important;
}

[data-theme-version="dark"] .bg-primary {
    background-color: var(--primary-dark) !important;
}

/* ============================================
   CALENDAR & EVENTS
   ============================================ */

#external-events [data-class="bg-primary"]::before {
    background: var(--primary) !important;
}

[data-theme-version="dark"] #external-events [data-class="bg-primary"] {
    background: var(--primary-dark) !important;
}

/* ============================================
   LOGIN & AUTH PAGES
   ============================================ */

.authincation .btn-primary {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    padding: 0.75rem 2rem;
    font-weight: 600;
}

.authincation .btn-primary:hover {
    background-color: var(--primary-hover) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(159, 41, 29, 0.3);
    transition: all 0.3s ease;
}

.authincation a.text-primary {
    color: var(--primary) !important;
    font-weight: 600;
}

.authincation a.text-primary:hover {
    color: var(--primary-lighter) !important;
    text-decoration: underline;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

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

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

/* ============================================
   DASHBOARD ICONS
   ============================================ */

/* All dashboard icons */
.dashboard i,
.card i,
.widget i,
.stat-widget i,
.widget-stat i {
    color: var(--primary) !important;
}

/* Flaticon and custom icons */
.flaticon,
[class*="flaticon-"],
[class*="icon-"] {
    color: var(--primary) !important;
}

/* SVG icons in dashboard */
.dashboard svg,
.card svg,
.widget svg {
    fill: var(--primary) !important;
    color: var(--primary) !important;
}

.dashboard svg path,
.card svg path,
.widget svg path {
    fill: var(--primary) !important;
}

/* Icon boxes */
.icon-box,
.icon-box-primary {
    background-color: var(--bg-primary-light) !important;
}

.icon-box i,
.icon-box-primary i {
    color: var(--primary) !important;
}

/* ============================================
   JOB STATUS
   ============================================ */

/* Job status badges */
.badge-status,
.job-status,
.status-badge,
.badge-job-status {
    background-color: var(--primary) !important;
    color: #fff !important;
    border-color: var(--primary) !important;
}

/* Job status text */
.job-status-text,
.status-text {
    color: var(--primary) !important;
    font-weight: 600;
}

/* Job cards */
.job-card .badge,
.job-item .badge {
    background-color: var(--primary) !important;
    color: #fff !important;
}

/* Status pills */
.status-pill {
    background-color: var(--bg-primary-light) !important;
    color: var(--primary) !important;
    border: 1px solid var(--primary) !important;
    padding: 0.25rem 0.75rem;
    border-radius: 50px;
    font-weight: 600;
}

/* ============================================
   DASHBOARD ICON FIXES
   ============================================ */

/* All Font Awesome icons - white background with primary color */
.icon-circle,
.icon-box {
    background-color: #fff !important;
    border: 2px solid var(--bg-primary-light) !important;
}

.icon-circle i,
.icon-box i {
    color: var(--primary) !important;
}

/* Force all statistic card icons to be primary color */
.card .icon-circle i,
.widget .icon-circle i {
    color: var(--primary) !important;
}

/* Override all colored text classes for icons */
.text-warning,
.text-success,
.text-info,
.text-danger,
.text-purple,
.text-teal,
.text-orange {
    color: var(--primary) !important;
}

/* Override all colored background light classes */
.bg-warning-light,
.bg-success-light,
.bg-info-light,
.bg-danger-light,
.bg-purple-light,
.bg-teal-light,
.bg-orange-light {
    background-color: #fff !important;
    border: 2px solid var(--bg-primary-light) !important;
}

/* ============================================
   JOB STATUS BADGE STYLING
   ============================================ */

/* All job status badges with specific colors for each status */
tbody .badge,
.table tbody .badge,
table tbody .badge,
.badge {
    font-weight: 600 !important;
    padding: 0.4rem 0.8rem !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.25rem !important;
}

/* Status-specific badge colors */
.badge.badge-under-review,
.badge-UNDER_REVIEW,
.badge-under_review {
    background-color: var(--info) !important;
    color: var(--text-light) !important;
}

.badge.badge-priced,
.badge-PRICED {
    background-color: #52B788 !important;
    color: var(--text-light) !important;
}

.badge.badge-awaiting-approval,
.badge-AWAITING_APPROVAL,
.badge-awaiting_approval {
    background-color: var(--warning) !important;
    color: var(--text-light) !important;
}

.badge.badge-approved,
.badge-APPROVED {
    background-color: #2D6A4F !important;
    color: var(--text-light) !important;
}

.badge.badge-rejected,
.badge-REJECTED {
    background-color: var(--danger) !important;
    color: var(--text-light) !important;
}

.badge.badge-assigned,
.badge-ASSIGNED {
    background-color: #1E88E5 !important;
    color: var(--text-light) !important;
}

.badge.badge-in-progress,
.badge-IN_PROGRESS,
.badge-in_progress {
    background-color: #9C27B0 !important;
    color: var(--text-light) !important;
}

.badge.badge-worker-completed,
.badge-WORKER_COMPLETED,
.badge-worker_completed {
    background-color: #FF9800 !important;
    color: var(--text-light) !important;
}

.badge.badge-completed,
.badge-COMPLETED {
    background-color: var(--success) !important;
    color: var(--text-light) !important;
}

.badge.badge-invoiced,
.badge-INVOICED {
    background-color: #00ACC1 !important;
    color: var(--text-light) !important;
}

.badge.badge-paid,
.badge-PAID {
    background-color: #43A047 !important;
    color: var(--text-light) !important;
}

/* Dark mode badge adjustments */
[data-theme-version="dark"] tbody .badge,
[data-theme-version="dark"] .table tbody .badge {
    opacity: 0.95;
}

/* ============================================
   ACTION BUTTONS IN TABLES
   ============================================ */

/* Action buttons in tables - filled style */
.table tbody tr td .btn,
.table tbody tr td .btn-primary,
.table tbody tr td .btn-sm,
table tbody tr td .btn,
tbody tr td .btn {
    background-color: var(--primary) !important;
    border: 2px solid var(--primary) !important;
    color: var(--text-light) !important;
    padding: 0.375rem 0.75rem !important;
    font-weight: 500;
    border-radius: 6px;
    transition: all 0.3s ease;
}

/* Hover states for table buttons */
.table tbody tr td .btn:hover,
.table tbody tr td .btn-primary:hover,
table tbody tr td .btn:hover,
tbody tr td .btn:hover {
    background-color: var(--primary-hover) !important;
    color: var(--text-light) !important;
    border-color: var(--primary-hover) !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(27, 67, 50, 0.3);
}

/* Icons inside table buttons */
.table tbody tr td .btn i,
table tbody tr td .btn i,
tbody tr td .btn i {
    color: var(--text-light) !important;
}

/* Specific button variants in tables */
.table tbody tr td .btn-success {
    border-color: var(--success) !important;
    color: var(--success) !important;
}

.table tbody tr td .btn-success:hover {
    background-color: var(--success) !important;
    color: var(--text-light) !important;
}

.table tbody tr td .btn-danger {
    border-color: var(--danger) !important;
    color: var(--danger) !important;
}

.table tbody tr td .btn-danger:hover {
    background-color: var(--danger) !important;
    color: var(--text-light) !important;
}

.table tbody tr td .btn-warning {
    border-color: var(--warning) !important;
    color: var(--warning) !important;
}

.table tbody tr td .btn-warning:hover {
    background-color: var(--warning) !important;
    color: var(--text-light) !important;
}

/* Dark mode table buttons */
[data-theme-version="dark"] .table tbody tr td .btn,
[data-theme-version="dark"] table tbody tr td .btn {
    background-color: transparent !important;
    border-color: var(--primary-light) !important;
    color: var(--primary-light) !important;
}

[data-theme-version="dark"] .table tbody tr td .btn:hover {
    background-color: var(--primary-light) !important;
    color: var(--text-light) !important;
}

/* ============================================
   SECONDARY & UTILITY BUTTONS
   ============================================ */

.btn-success {
    background-color: var(--success) !important;
    border-color: var(--success) !important;
    color: var(--text-light) !important;
    font-weight: 500;
    border-radius: 8px;
}

.btn-success:hover {
    background-color: var(--secondary-dark) !important;
    border-color: var(--secondary-dark) !important;
    color: var(--text-light) !important;
}

.btn-warning {
    background-color: var(--warning) !important;
    border-color: var(--warning) !important;
    color: var(--text-light) !important;
    font-weight: 500;
    border-radius: 8px;
}

.btn-danger {
    background-color: var(--danger) !important;
    border-color: var(--danger) !important;
    color: var(--text-light) !important;
    font-weight: 500;
    border-radius: 8px;
}

.btn-info {
    background-color: var(--info) !important;
    border-color: var(--info) !important;
    color: var(--text-light) !important;
    font-weight: 500;
    border-radius: 8px;
}

.btn-secondary {
    background-color: var(--secondary) !important;
    border-color: var(--secondary) !important;
    color: var(--text-light) !important;
    font-weight: 500;
    border-radius: 8px;
}

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

/* ============================================
   DETAIL BUTTON ICON FIX
   ============================================ */

/* Make icons white in primary buttons */
.btn-primary .fa-eye,
.btn-primary .fas.fa-eye,
.btn-primary i.fa-eye {
    color: white !important;
}

/* ============================================
   DROPDOWN TEXT VISIBILITY
   ============================================ */

/* Fix dropdown selected text visibility */
select.form-control,
.form-select,
select {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}

select.form-control:focus,
.form-select:focus,
select:focus {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(27, 67, 50, 0.15) !important;
}

/* Selected option text */
select.form-control option,
select option {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
}

select.form-control option:checked,
select option:checked {
    background-color: var(--primary) !important;
    color: white !important;
    font-weight: 500 !important;
}

/* Dark mode dropdown fixes */
[data-theme-version="dark"] select.form-control,
[data-theme-version="dark"] .form-select,
[data-theme-version="dark"] select {
    background-color: #1e1e2d !important;
    color: #fff !important;
    border-color: #3a3a52 !important;
}

[data-theme-version="dark"] select.form-control option,
[data-theme-version="dark"] select option {
    background-color: #1e1e2d !important;
    color: #fff !important;
}

/* ============================================
   PROFESSIONAL UI ENHANCEMENTS
   ============================================ */

/* Alerts */
.alert {
    border-radius: 10px !important;
    border: none !important;
    padding: 1rem 1.5rem;
    box-shadow: 0 2px 8px rgba(27, 67, 50, 0.08);
}

.alert-success {
    background-color: #D1F2E6 !important;
    color: var(--success) !important;
}

.alert-warning {
    background-color: #FFE8CC !important;
    color: #B86200 !important;
}

.alert-danger {
    background-color: #FFE0E0 !important;
    color: var(--danger) !important;
}

.alert-info {
    background-color: #D3E9F9 !important;
    color: #0B5A9C !important;
}

/* Progress Bars */
.progress {
    height: 8px;
    border-radius: 10px;
    background-color: var(--border-light);
}

.progress-bar {
    background-color: var(--secondary) !important;
    border-radius: 10px;
}

/* Links */
a {
    color: var(--primary) !important;
    text-decoration: none;
    transition: all 0.3s ease;
}

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

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

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

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

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

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

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

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

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

/* Dashboard Icons */
.dashboard i,
.card i,
.widget i,
.stat-widget i,
.widget-stat i {
    color: var(--primary) !important;
}

/* Icon Boxes */
.icon-circle,
.icon-box {
    background-color: var(--bg-primary-light) !important;
    border: 2px solid var(--primary) !important;
    border-radius: 50%;
    padding: 1rem;
}

.icon-circle i,
.icon-box i {
    color: var(--primary) !important;
}

/* Modal */
.modal-content {
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 24px rgba(27, 67, 50, 0.15) !important;
}

.modal-header {
    background-color: var(--primary) !important;
    color: var(--text-light) !important;
    border-top-left-radius: 12px !important;
    border-top-right-radius: 12px !important;
    border-bottom: none !important;
}

.modal-title {
    color: var(--text-light) !important;
    font-weight: 600;
}

.modal-body {
    padding: 2rem;
}

.modal-footer {
    border-top: 1px solid var(--border-light) !important;
    padding: 1rem 2rem;
}

/* Footer */
.footer {
    background-color: var(--bg-card) !important;
    border-top: 1px solid var(--border-light);
    color: var(--text-secondary) !important;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-professional);
}

::-webkit-scrollbar-thumb {
    background: var(--secondary);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary);
}

/* Preloader */
#preloader {
    background-color: var(--bg-professional) !important;
}

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

/* Avatar */
.header-profile img {
    border: 2px solid var(--primary);
    border-radius: 50%;
}

/* List Group */
.list-group-item {
    border: 1px solid var(--border-light) !important;
    color: var(--text-primary) !important;
    transition: all 0.2s ease;
}

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

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

/* Navigation Pills/Tabs */
.nav-pills .nav-link {
    border-radius: 8px;
    color: var(--text-primary) !important;
    transition: all 0.3s ease;
}

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

.nav-tabs .nav-link {
    border-radius: 8px 8px 0 0;
    color: var(--text-primary) !important;
    border: none !important;
}

.nav-tabs .nav-link.active {
    background-color: var(--bg-card) !important;
    color: var(--primary) !important;
    border-bottom: 3px solid var(--primary) !important;
}

/* Image Gallery */
.job-image-gallery img {
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(27, 67, 50, 0.08);
    transition: all 0.3s ease;
}

.job-image-gallery img:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 24px rgba(27, 67, 50, 0.15);
}

/* Login & Auth Pages */
.authincation {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    min-height: 100vh;
}

.authincation .btn-primary {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    padding: 0.75rem 2rem;
    font-weight: 600;
}

.authincation .btn-primary:hover {
    background-color: var(--primary-hover) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(27, 67, 50, 0.3);
    transition: all 0.3s ease;
}

.authincation a.text-primary {
    color: var(--primary) !important;
    font-weight: 600;
}

.authincation a.text-primary:hover {
    color: var(--primary-lighter) !important;
    text-decoration: underline;
}

/* Dark Mode Overrides */
[data-theme-version="dark"] {
    --bg-professional: #1e1e2d;
    --bg-card: #2a2a3c;
    --text-primary: #f8f9fa;
    --text-secondary: #adb5bd;
    --border-color: #3a3a52;
    --border-light: #343447;
}

[data-theme-version="dark"] .btn-primary {
    background-color: var(--primary-light) !important;
    border-color: var(--primary-light) !important;
}

[data-theme-version="dark"] .btn-primary:hover {
    background-color: var(--primary-lighter) !important;
    border-color: var(--primary-lighter) !important;
}

[data-theme-version="dark"] .bg-primary {
    background-color: var(--primary-dark) !important;
}

/* ============================================
   ANIMATIONS & TRANSITIONS
   ============================================ */

.btn,
a,
.nav-link,
.dropdown-item,
.card,
.badge,
.table tbody tr {
    transition: all 0.3s ease;
}

/* Smooth hover effects */
.btn:hover {
    transform: translateY(-1px);
}

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

/* Responsive Adjustments */
@media (max-width: 768px) {
    .card-body {
        padding: 1rem;
    }
    
    .table thead th,
    .table tbody td {
        padding: 0.75rem 0.5rem;
        font-size: 0.875rem;
    }
    
    .btn {
        padding: 0.4rem 1rem;
        font-size: 0.875rem;
    }
}

/* Utility Classes */
.bg-professional-primary {
    background-color: var(--primary) !important;
}

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

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

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

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