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

/* Fallback CSS Variables */
:root {
    --primary_color: #670E10;
    --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;
}

/* Database variables will be inserted here by PHP in index.php */

/* ========================================
   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
   ======================================== */

.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 {
    border-color: var(--primary_color) !important;
}

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

.card-primary .card-footer {
    background-color: var(--primary_color) !important;
    border-top-color: var(--primary_color) !important;
}

/* ========================================
   OVERRIDE STYLES
   ======================================== */

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

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

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