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

/* CSS Variables - Primary color from database only */
:root {
    /* Primary color MUST come from database */
    --primary_color: #670E10;
    
    /* Other colors can have fallbacks for now */
    --secondary_color: #6c757d;
    --success_color: #28a745;
    --danger_color: #dc3545;
    --warning_color: #ffc107;
    --info_color: #17a2b8;
    --light_color: #f8f9fa;
    --dark_color: #343a40;
    --sidebar_bg_color: #343a40;
    --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;
}

/* ========================================
   BUTTON STYLES
   ======================================== */

/* Primary Button */
.btn-primary {
    background-color: var(--primary_color) !important;
    border-color: var(--primary_color) !important;
    color: white !important;
}

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

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

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

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

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

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

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

/* ========================================
   BADGE STYLES
   ======================================== */

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

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

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

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

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

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

/* ========================================
   ALERT STYLES
   ======================================== */

.alert-primary {
    background-color: var(--primary_color) !important;
    border-color: var(--primary_color) !important;
    color: white !important;
}

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

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

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

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

/* ========================================
   SIDEBAR STYLES
   ======================================== */

.main-sidebar,
.main-sidebar .sidebar {
    background-color: var(--sidebar_bg_color) !important;
}

/* Sidebar Navigation Links */
.main-sidebar .nav-link,
.main-sidebar .sidebar .nav-link,
.main-sidebar .nav-item .nav-link,
.main-sidebar .sidebar .nav-item .nav-link,
.main-sidebar .nav-link i,
.main-sidebar .sidebar .nav-link i,
.main-sidebar .nav-link p,
.main-sidebar .sidebar .nav-link p,
.main-sidebar .nav-link span,
.main-sidebar .sidebar .nav-link span,
.main-sidebar .nav-treeview .nav-link,
.main-sidebar .sidebar .nav-treeview .nav-link,
.main-sidebar .nav-treeview .nav-link i,
.main-sidebar .sidebar .nav-treeview .nav-link i,
.main-sidebar .nav-treeview .nav-link p,
.main-sidebar .sidebar .nav-treeview .nav-link p {
    color: var(--sidebar_text_color) !important;
}

/* Sidebar Hover and Active States */
.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-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:hover,
.main-sidebar .sidebar .nav-treeview .nav-link:hover,
.main-sidebar .nav-treeview .nav-link.active,
.main-sidebar .sidebar .nav-treeview .nav-link.active {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: var(--sidebar_text_color) !important;
}

/* Sidebar Brand/Logo */
.main-sidebar .brand-link,
.main-sidebar .sidebar .brand-link,
.main-sidebar .brand-link i,
.main-sidebar .sidebar .brand-link i,
.main-sidebar .brand-link span,
.main-sidebar .sidebar .brand-link span {
    color: var(--sidebar_text_color) !important;
}

/* Sidebar User Panel */
.main-sidebar .user-panel,
.main-sidebar .sidebar .user-panel,
.main-sidebar .user-panel .info,
.main-sidebar .sidebar .user-panel .info,
.main-sidebar .user-panel .info a,
.main-sidebar .sidebar .user-panel .info a {
    color: var(--sidebar_text_color) !important;
}

/* ========================================
   HEADER STYLES
   ======================================== */

.main-header {
    background-color: var(--header_bg_color) !important;
    border-bottom: 1px solid var(--dark_color) !important;
}

.main-header .navbar-nav .nav-link {
    color: var(--header_text_color) !important;
}

/* ========================================
   CARD STYLES
   ======================================== */

.card-header {
    background-color: var(--primary_color) !important;
    color: white !important;
}

/* ========================================
   FORM STYLES
   ======================================== */

.form-control:focus {
    border-color: var(--primary_color) !important;
    box-shadow: 0 0 0 0.2rem rgba(var(--primary_color), 0.25) !important;
}

.form-select:focus {
    border-color: var(--primary_color) !important;
    box-shadow: 0 0 0 0.2rem rgba(var(--primary_color), 0.25) !important;
}

/* ========================================
   TABLE STYLES
   ======================================== */

.table-primary {
    background-color: var(--primary_color) !important;
    color: white !important;
}

.table-primary th,
.table-primary td {
    border-color: var(--primary_color) !important;
}

/* ========================================
   PROGRESS BAR STYLES
   ======================================== */

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

/* ========================================
   LINK STYLES
   ======================================== */

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

a:hover {
    color: var(--primary_color) !important;
    opacity: 0.8;
}

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

.page-link {
    color: var(--primary_color) !important;
}

.page-item.active .page-link {
    background-color: var(--primary_color) !important;
    border-color: var(--primary_color) !important;
}

/* ========================================
   UTILITY STYLES - All use database primary color
   ======================================== */

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

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

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

/* ========================================
   COMPONENT STYLES - Card primary uses database primary color
   ======================================== */

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

.card.card-primary .card-header,
.content-wrapper .card.card-primary .card-header,
.main-content .card.card-primary .card-header,
body .card.card-primary .card-header {
    background-color: var(--primary_color) !important;
    border-bottom-color: var(--primary_color) !important;
    color: white !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.card.card-primary .card-footer,
.content-wrapper .card.card-primary .card-footer,
.main-content .card.card-primary .card-footer,
body .card.card-primary .card-footer {
    background-color: var(--primary_color) !important;
    border-top-color: var(--primary_color) !important;
    color: white !important;
}

.card.card-primary .card-body,
.content-wrapper .card.card-primary .card-body,
.main-content .card.card-primary .card-body,
body .card.card-primary .card-body {
    border-left: 4px solid var(--primary_color) !important;
}

.card.card-primary .card-title,
.content-wrapper .card.card-primary .card-title,
.main-content .card.card-primary .card-title,
body .card.card-primary .card-title {
    color: var(--primary_color) !important;
}

.card.card-primary .card-tools .btn,
.content-wrapper .card.card-primary .card-tools .btn,
.main-content .card.card-primary .card-tools .btn,
body .card.card-primary .card-tools .btn {
    background-color: transparent !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: white !important;
}

.card.card-primary .card-tools .btn:hover,
.content-wrapper .card.card-primary .card-tools .btn:hover,
.main-content .card.card-primary .card-tools .btn:hover,
body .card.card-primary .card-tools .btn:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    color: white !important;
}

/* ========================================
   OVERRIDE STYLES - All primary elements use database color
   ======================================== */

/* Force override any existing AdminLTE styles */
.btn-primary {
    background: var(--primary_color) !important;
    background-image: none !important;
}

/* Any element with primary in class name */
[class*="primary"] {
    border-color: var(--primary_color) !important;
}

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

[class*="primary"] .card-footer {
    background-color: var(--primary_color) !important;
    border-top-color: var(--primary_color) !important;
}

/* Primary colored backgrounds */
.bg-primary,
[class*="bg-primary"] {
    background-color: var(--primary_color) !important;
}

/* Primary colored text */
.text-primary,
[class*="text-primary"] {
    color: var(--primary_color) !important;
}

/* Primary colored borders */
.border-primary,
[class*="border-primary"] {
    border-color: var(--primary_color) !important;
}

/* Primary colored elements */
.primary,
[class*="primary"]:not(.btn):not(.badge) {
    background-color: var(--primary_color) !important;
    color: white !important;
}

/* Primary hover states */
.btn-primary:hover,
.bg-primary:hover,
[class*="primary"]:hover {
    background-color: var(--primary_color) !important;
    opacity: 0.8;
}

/* Primary focus states */
.btn-primary:focus,
.form-control:focus {
    border-color: var(--primary_color) !important;
    box-shadow: 0 0 0 0.2rem rgba(var(--primary_color), 0.25) !important;
}

/* ========================================
   ULTIMATE OVERRIDE - Force AdminLTE to use database colors
   ======================================== */

/* 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;
}

/* Force AdminLTE card-primary tools */
html body .content-wrapper .card.card-primary .card-tools .btn,
html body .main-content .card.card-primary .card-tools .btn,
html body .card.card-primary .card-tools .btn {
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

/* Override any AdminLTE .bg-primary classes */
html body .bg-primary,
html body .content-wrapper .bg-primary,
html body .main-content .bg-primary {
    background-color: var(--primary_color) !important;
    background: var(--primary_color) !important;
}