/* DEBUG: Primary color from database: #670E10 */
/* DEBUG: Dynamic CSS: :root {
    --primary_color: #670E10;
    --secondary_color: #005959;
    --success_color: #28a745;
    --danger_color: #000000;
    --warning_color: #00ff80;
    --info_color: #17a2b8;
    --light_color: #f8f9fa;
    --dark_color: #ff0000;
    --sidebar_bg_color: #076d0a;
    --sidebar_text_color: #ffffff;
    --header_bg_color: #ffffff;
    --header_text_color: #343a40;
}
 */

/* Dynamic Color System - Safety Management System */
/* This file contains all dynamic color styles that use CSS variables from database */

/* CSS Variables - All main colors from database only */
:root {
    /* Primary color MUST come from database */
    --primary_color: #670E10;
    
    /* Danger color MUST come from database */
    --danger_color: #000000;
    
    /* Warning color MUST come from database */
    --warning_color: #00ff80;
    
    /* Secondary color MUST come from database */
    --secondary_color: #005959;
    
    /* Success color MUST come from database */
    --success_color: #28a745;
    
    /* Info color MUST come from database */
    --info_color: #17a2b8;
    
    /* Dark color MUST come from database */
    --dark_color: #ff0000;
    
    /* Other colors can have fallbacks for now */
    --light_color: #f8f9fa;
    
    /* Sidebar bg color MUST come from database */
    --sidebar_bg_color: #076d0a;
    
    /* Other sidebar colors can have fallbacks for now */
    --sidebar_text_color: #ffffff;
    --header_bg_color: #ffffff;
    --header_text_color: #343a40;
}

/* Additional database variables will be inserted here by PHP */
:root {
    --primary_color: #670E10;
    --secondary_color: #005959;
    --success_color: #28a745;
    --danger_color: #000000;
    --warning_color: #00ff80;
    --info_color: #17a2b8;
    --light_color: #f8f9fa;
    --dark_color: #ff0000;
    --sidebar_bg_color: #076d0a;
    --sidebar_text_color: #ffffff;
    --header_bg_color: #ffffff;
    --header_text_color: #343a40;
}

/* ========================================
   CARD PRIMARY - TEST WITH DATABASE COLOR
   ======================================== */

/* Ultimate card-primary override - maximum specificity */
html body .content-wrapper .card.card-primary .card-header,
html body .main-content .card.card-primary .card-header,
html body .card.card-primary .card-header {
    background: var(--primary_color) !important;
    background-color: var(--primary_color) !important;
    border-color: var(--primary_color) !important;
    color: #ffffff !important;
}

/* Force AdminLTE card-primary border */
html body .content-wrapper .card.card-primary,
html body .main-content .card.card-primary,
html body .card.card-primary {
    border-color: var(--primary_color) !important;
    border-top: 3px solid var(--primary_color) !important;
}

/* Test: Simple override */
.card-primary .card-header {
    background-color: var(--primary_color) !important;
    color: white !important;
}

/* Test: Even more specific */
body .card-primary .card-header {
    background-color: var(--primary_color) !important;
    color: white !important;
}

/* Test: Inline style override */
.card-primary .card-header {
    background-color: #670E10 !important;
    color: white !important;
}

/* ========================================
   DANGER COLOR STYLES - All use database danger color
   ======================================== */

/* Danger Button */
.btn-danger {
    background-color: var(--danger_color) !important;
    border-color: var(--danger_color) !important;
    color: white !important;
}

.btn-danger:hover,
.btn-danger:focus {
    background-color: var(--danger_color) !important;
    border-color: var(--danger_color) !important;
    color: white !important;
    opacity: 0.8;
}

.btn-danger:active {
    background-color: var(--danger_color) !important;
    border-color: var(--danger_color) !important;
    color: white !important;
    opacity: 0.9;
}

/* Danger Badge */
.badge-danger {
    background-color: var(--danger_color) !important;
    color: white !important;
}

/* Danger Alert */
.alert-danger {
    background-color: var(--danger_color) !important;
    border-color: var(--danger_color) !important;
    color: white !important;
}

/* Danger Card */
.card-danger {
    border-color: var(--danger_color) !important;
    border-top: 3px solid var(--danger_color) !important;
}

.card-danger .card-header {
    background-color: var(--danger_color) !important;
    border-bottom-color: var(--danger_color) !important;
    color: white !important;
}

.card-danger .card-footer {
    background-color: var(--danger_color) !important;
    border-top-color: var(--danger_color) !important;
    color: white !important;
}

.card-danger .card-title {
    color: var(--danger_color) !important;
}

/* Danger Utility Classes */
.bg-danger {
    background-color: var(--danger_color) !important;
}

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

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

/* Danger Override Styles */
[class*="danger"] {
    border-color: var(--danger_color) !important;
}

[class*="danger"] .card-header {
    background-color: var(--danger_color) !important;
    color: white !important;
}

/* Ultimate danger override - maximum specificity */
html body .content-wrapper .card.card-danger .card-header,
html body .main-content .card.card-danger .card-header,
html body .card.card-danger .card-header {
    background: var(--danger_color) !important;
    background-color: var(--danger_color) !important;
    border-color: var(--danger_color) !important;
    color: #ffffff !important;
}

html body .content-wrapper .card.card-danger,
html body .main-content .card.card-danger,
html body .card.card-danger {
    border-color: var(--danger_color) !important;
    border-top: 3px solid var(--danger_color) !important;
}

/* Test: Inline danger style override */
.card-danger .card-header {
    background-color: var(--danger_color) !important;
    color: white !important;
}

/* ========================================
   WARNING COLOR STYLES - All use database warning color
   ======================================== */

/* Warning Button */
.btn-warning {
    background-color: var(--warning_color) !important;
    border-color: var(--warning_color) !important;
    color: #000 !important;
}

.btn-warning:hover,
.btn-warning:focus {
    background-color: var(--warning_color) !important;
    border-color: var(--warning_color) !important;
    color: #000 !important;
    opacity: 0.8;
}

.btn-warning:active {
    background-color: var(--warning_color) !important;
    border-color: var(--warning_color) !important;
    color: #000 !important;
    opacity: 0.9;
}

/* Warning Badge */
.badge-warning {
    background-color: var(--warning_color) !important;
    color: #000 !important;
}

/* Warning Alert */
.alert-warning {
    background-color: var(--warning_color) !important;
    border-color: var(--warning_color) !important;
    color: #000 !important;
}

/* Warning Card */
.card-warning {
    border-color: var(--warning_color) !important;
    border-top: 3px solid var(--warning_color) !important;
}

.card-warning .card-header {
    background-color: var(--warning_color) !important;
    border-bottom-color: var(--warning_color) !important;
    color: #000 !important;
}

.card-warning .card-footer {
    background-color: var(--warning_color) !important;
    border-top-color: var(--warning_color) !important;
    color: #000 !important;
}

.card-warning .card-title {
    color: var(--warning_color) !important;
}

/* Warning Utility Classes */
.bg-warning {
    background-color: var(--warning_color) !important;
}

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

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

/* Warning Override Styles */
[class*="warning"] {
    border-color: var(--warning_color) !important;
}

[class*="warning"] .card-header {
    background-color: var(--warning_color) !important;
    color: #000 !important;
}

/* Ultimate warning override - maximum specificity */
html body .content-wrapper .card.card-warning .card-header,
html body .main-content .card.card-warning .card-header,
html body .card.card-warning .card-header {
    background: var(--warning_color) !important;
    background-color: var(--warning_color) !important;
    border-color: var(--warning_color) !important;
    color: #000000 !important;
}

html body .content-wrapper .card.card-warning,
html body .main-content .card.card-warning,
html body .card.card-warning {
    border-color: var(--warning_color) !important;
    border-top: 3px solid var(--warning_color) !important;
}

/* Test: Inline warning style override */
.card-warning .card-header {
    background-color: var(--warning_color) !important;
    color: #000 !important;
}

/* ========================================
   SECONDARY COLOR STYLES - All use database secondary color
   ======================================== */

/* Secondary Button */
.btn-secondary {
    background-color: var(--secondary_color) !important;
    border-color: var(--secondary_color) !important;
    color: white !important;
}

.btn-secondary:hover,
.btn-secondary:focus {
    background-color: var(--secondary_color) !important;
    border-color: var(--secondary_color) !important;
    color: white !important;
    opacity: 0.8;
}

.btn-secondary:active {
    background-color: var(--secondary_color) !important;
    border-color: var(--secondary_color) !important;
    color: white !important;
    opacity: 0.9;
}

/* Secondary Badge */
.badge-secondary {
    background-color: var(--secondary_color) !important;
    color: white !important;
}

/* Secondary Card */
.card-secondary {
    border-color: var(--secondary_color) !important;
    border-top: 3px solid var(--secondary_color) !important;
}

.card-secondary .card-header {
    background-color: var(--secondary_color) !important;
    border-bottom-color: var(--secondary_color) !important;
    color: white !important;
}

.card-secondary .card-footer {
    background-color: var(--secondary_color) !important;
    border-top-color: var(--secondary_color) !important;
    color: white !important;
}

.card-secondary .card-title {
    color: var(--secondary_color) !important;
}

/* Secondary Utility Classes */
.bg-secondary {
    background-color: var(--secondary_color) !important;
}

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

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

/* Secondary Override Styles */
[class*="secondary"] {
    border-color: var(--secondary_color) !important;
}

[class*="secondary"] .card-header {
    background-color: var(--secondary_color) !important;
    color: white !important;
}

/* Ultimate secondary override - maximum specificity */
html body .content-wrapper .card.card-secondary .card-header,
html body .main-content .card.card-secondary .card-header,
html body .card.card-secondary .card-header {
    background: var(--secondary_color) !important;
    background-color: var(--secondary_color) !important;
    border-color: var(--secondary_color) !important;
    color: #ffffff !important;
}

html body .content-wrapper .card.card-secondary,
html body .main-content .card.card-secondary,
html body .card.card-secondary {
    border-color: var(--secondary_color) !important;
    border-top: 3px solid var(--secondary_color) !important;
}

/* Test: Inline secondary style override */
.card-secondary .card-header {
    background-color: var(--secondary_color) !important;
    color: white !important;
}

/* ========================================
   SUCCESS COLOR STYLES - All use database success color
   ======================================== */

/* Success Button */
.btn-success {
    background-color: var(--success_color) !important;
    border-color: var(--success_color) !important;
    color: white !important;
}

.btn-success:hover,
.btn-success:focus {
    background-color: var(--success_color) !important;
    border-color: var(--success_color) !important;
    color: white !important;
    opacity: 0.8;
}

.btn-success:active {
    background-color: var(--success_color) !important;
    border-color: var(--success_color) !important;
    color: white !important;
    opacity: 0.9;
}

/* Success Badge */
.badge-success {
    background-color: var(--success_color) !important;
    color: white !important;
}

/* Success Alert */
.alert-success {
    background-color: var(--success_color) !important;
    border-color: var(--success_color) !important;
    color: white !important;
}

/* Success Card */
.card-success {
    border-color: var(--success_color) !important;
    border-top: 3px solid var(--success_color) !important;
}

.card-success .card-header {
    background-color: var(--success_color) !important;
    border-bottom-color: var(--success_color) !important;
    color: white !important;
}

.card-success .card-footer {
    background-color: var(--success_color) !important;
    border-top-color: var(--success_color) !important;
    color: white !important;
}

.card-success .card-title {
    color: var(--success_color) !important;
}

/* Success Utility Classes */
.bg-success {
    background-color: var(--success_color) !important;
}

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

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

/* Success Override Styles */
[class*="success"] {
    border-color: var(--success_color) !important;
}

[class*="success"] .card-header {
    background-color: var(--success_color) !important;
    color: white !important;
}

/* Ultimate success override - maximum specificity */
html body .content-wrapper .card.card-success .card-header,
html body .main-content .card.card-success .card-header,
html body .card.card-success .card-header {
    background: var(--success_color) !important;
    background-color: var(--success_color) !important;
    border-color: var(--success_color) !important;
    color: #ffffff !important;
}

html body .content-wrapper .card.card-success,
html body .main-content .card.card-success,
html body .card.card-success {
    border-color: var(--success_color) !important;
    border-top: 3px solid var(--success_color) !important;
}

/* Test: Inline success style override */
.card-success .card-header {
    background-color: var(--success_color) !important;
    color: white !important;
}

/* ========================================
   INFO COLOR STYLES - All use database info color
   ======================================== */

/* Info Button */
.btn-info {
    background-color: var(--info_color) !important;
    border-color: var(--info_color) !important;
    color: white !important;
}

.btn-info:hover,
.btn-info:focus {
    background-color: var(--info_color) !important;
    border-color: var(--info_color) !important;
    color: white !important;
    opacity: 0.8;
}

.btn-info:active {
    background-color: var(--info_color) !important;
    border-color: var(--info_color) !important;
    color: white !important;
    opacity: 0.9;
}

/* Info Badge */
.badge-info {
    background-color: var(--info_color) !important;
    color: white !important;
}

/* Info Alert */
.alert-info {
    background-color: var(--info_color) !important;
    border-color: var(--info_color) !important;
    color: white !important;
}

/* Info Card */
.card-info {
    border-color: var(--info_color) !important;
    border-top: 3px solid var(--info_color) !important;
}

.card-info .card-header {
    background-color: var(--info_color) !important;
    border-bottom-color: var(--info_color) !important;
    color: white !important;
}

.card-info .card-footer {
    background-color: var(--info_color) !important;
    border-top-color: var(--info_color) !important;
    color: white !important;
}

.card-info .card-title {
    color: var(--info_color) !important;
}

/* Info Utility Classes */
.bg-info {
    background-color: var(--info_color) !important;
}

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

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

/* Info Override Styles */
[class*="info"] {
    border-color: var(--info_color) !important;
}

[class*="info"] .card-header {
    background-color: var(--info_color) !important;
    color: white !important;
}

/* Ultimate info override - maximum specificity */
html body .content-wrapper .card.card-info .card-header,
html body .main-content .card.card-info .card-header,
html body .card.card-info .card-header {
    background: var(--info_color) !important;
    background-color: var(--info_color) !important;
    border-color: var(--info_color) !important;
    color: #ffffff !important;
}

html body .content-wrapper .card.card-info,
html body .main-content .card.card-info,
html body .card.card-info {
    border-color: var(--info_color) !important;
    border-top: 3px solid var(--info_color) !important;
}

/* Test: Inline info style override */
.card-info .card-header {
    background-color: var(--info_color) !important;
    color: white !important;
}

/* ========================================
   DARK COLOR STYLES - All use database dark color
   ======================================== */

/* Dark Button */
.btn-dark {
    background-color: var(--dark_color) !important;
    border-color: var(--dark_color) !important;
    color: white !important;
}

.btn-dark:hover,
.btn-dark:focus {
    background-color: var(--dark_color) !important;
    border-color: var(--dark_color) !important;
    color: white !important;
    opacity: 0.8;
}

.btn-dark:active {
    background-color: var(--dark_color) !important;
    border-color: var(--dark_color) !important;
    color: white !important;
    opacity: 0.9;
}

/* Dark Badge */
.badge-dark {
    background-color: var(--dark_color) !important;
    color: white !important;
}

/* Dark Card */
.card-dark {
    border-color: var(--dark_color) !important;
    border-top: 3px solid var(--dark_color) !important;
}

.card-dark .card-header {
    background-color: var(--dark_color) !important;
    border-bottom-color: var(--dark_color) !important;
    color: white !important;
}

.card-dark .card-footer {
    background-color: var(--dark_color) !important;
    border-top-color: var(--dark_color) !important;
    color: white !important;
}

.card-dark .card-title {
    color: var(--dark_color) !important;
}

/* Dark Utility Classes */
.bg-dark {
    background-color: var(--dark_color) !important;
}

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

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

/* Dark Override Styles */
[class*="dark"] {
    border-color: var(--dark_color) !important;
}

[class*="dark"] .card-header {
    background-color: var(--dark_color) !important;
    color: white !important;
}

/* Ultimate dark override - maximum specificity */
html body .content-wrapper .card.card-dark .card-header,
html body .main-content .card.card-dark .card-header,
html body .card.card-dark .card-header {
    background: var(--dark_color) !important;
    background-color: var(--dark_color) !important;
    border-color: var(--dark_color) !important;
    color: #ffffff !important;
}

html body .content-wrapper .card.card-dark,
html body .main-content .card.card-dark,
html body .card.card-dark {
    border-color: var(--dark_color) !important;
    border-top: 3px solid var(--dark_color) !important;
}

/* Dark header border override */
.main-header {
    border-bottom: 1px solid var(--dark_color) !important;
}

/* Test: Inline dark style override */
.card-dark .card-header {
    background-color: var(--dark_color) !important;
    color: white !important;
}

/* ========================================
   SIDEBAR BG COLOR STYLES - All use database sidebar bg color
   ======================================== */

/* Main Sidebar Background */
.main-sidebar,
.main-sidebar .sidebar {
    background-color: var(--sidebar_bg_color) !important;
}

/* Sidebar Navigation Background */
.main-sidebar .nav-sidebar,
.main-sidebar .sidebar .nav-sidebar {
    background-color: var(--sidebar_bg_color) !important;
}

/* Sidebar Treeview Background */
.main-sidebar .nav-treeview,
.main-sidebar .sidebar .nav-treeview {
    background-color: var(--sidebar_bg_color) !important;
}

/* Sidebar User Panel Background */
.main-sidebar .user-panel,
.main-sidebar .sidebar .user-panel {
    background-color: var(--sidebar_bg_color) !important;
}

/* Sidebar Brand/Logo Background */
.main-sidebar .brand-link,
.main-sidebar .sidebar .brand-link {
    background-color: var(--sidebar_bg_color) !important;
}

/* Sidebar Hover States - maintain same color with opacity */
.main-sidebar .nav-link:hover,
.main-sidebar .sidebar .nav-link:hover,
.main-sidebar .nav-item .nav-link:hover,
.main-sidebar .sidebar .nav-item .nav-link:hover,
.main-sidebar .nav-treeview .nav-link:hover,
.main-sidebar .sidebar .nav-treeview .nav-link:hover {
    background-color: var(--sidebar_bg_color) !important;
    opacity: 0.8;
}

/* Sidebar Active States - maintain same color with opacity */
.main-sidebar .nav-link.active,
.main-sidebar .sidebar .nav-link.active,
.main-sidebar .nav-item .nav-link.active,
.main-sidebar .sidebar .nav-item .nav-link.active,
.main-sidebar .nav-treeview .nav-link.active,
.main-sidebar .sidebar .nav-treeview .nav-link.active {
    background-color: var(--sidebar_bg_color) !important;
    opacity: 0.9;
}

/* Ultimate sidebar bg override - maximum specificity */
html body .main-sidebar,
html body .main-sidebar .sidebar,
html body .content-wrapper .main-sidebar,
html body .main-content .main-sidebar {
    background-color: var(--sidebar_bg_color) !important;
    background: var(--sidebar_bg_color) !important;
}

/* Sidebar components override */
html body .main-sidebar .nav-sidebar,
html body .main-sidebar .sidebar .nav-sidebar,
html body .main-sidebar .nav-treeview,
html body .main-sidebar .sidebar .nav-treeview,
html body .main-sidebar .user-panel,
html body .main-sidebar .sidebar .user-panel,
html body .main-sidebar .brand-link,
html body .main-sidebar .sidebar .brand-link {
    background-color: var(--sidebar_bg_color) !important;
    background: var(--sidebar_bg_color) !important;
}

/* Test: Inline sidebar bg style override */
.main-sidebar {
    background-color: var(--sidebar_bg_color) !important;
}