/**
 * Dark Red Theme
 * A dark theme with red primary color
 * File: themes/dark-red.css
 *
 * Theme: Dark - Dark Red
 * Category: Dark
 * Description: A dark theme with red accents
 * Author: CreateThisApp Team
 * Version: 2.0.0 (Refactored - Colors Only)
 * Icon: fire
 * Preview Colors: #e74c3c, #c0392b, #2c3e50, #ecf0f1
 */

:root {
    /* ============================================
       PRIMARY COLORS
       ============================================ */
    --primary-color: #e74c3c;
    --primary-rgb: 231, 76, 60;
    --secondary-color: #c0392b;
    --secondary-rgb: 192, 57, 43;
    --accent-color: #ec7063;
    --accent-rgb: 236, 112, 99;
    
    /* ============================================
       TEXT COLORS
       ============================================ */
    --text-primary: #ecf0f1;
    --text-secondary: #bdc3c7;
    --text-muted: #7f8c8d;
    --text-light: #ecf0f1;
    --text-white: #ffffff;
    --primary-text-contrast: #ffffff;
    
    /* ============================================
       BACKGROUND COLORS
       ============================================ */
    --bg-primary: #2c3e50;
    --bg-secondary: #34495e;
    --card-bg: #34495e;
    --card-header-bg: #2c3e50;
    
    /* ============================================
       BORDER COLORS
       ============================================ */
    --border-color: #415b76;
    --border-light: #415b76;
    --border-dark: #2c3e50;
    --card-border: #415b76;
    
    /* ============================================
       INPUT COLORS
       ============================================ */
    --input-bg: #34495e;
    --input-border: #415b76;
    --input-focus-border: #e74c3c;
    --input-placeholder: #7f8c8d;
    --input-disabled-bg: #2c3e50;
    --input-disabled-text: #7f8c8d;
    
    /* ============================================
       DROPDOWN COLORS
       ============================================ */
    --dropdown-bg: #34495e;
    --dropdown-text: #ecf0f1;
    --dropdown-hover-bg: #415b76;
    --dropdown-hover-text: #ecf0f1;
    --dropdown-active-bg: #e74c3c;
    --dropdown-active-text: #ffffff;
    --dropdown-border: #415b76;
    
    /* ============================================
       BUTTON COLORS
       ============================================ */
    --btn-primary-bg: #e74c3c;
    --btn-primary-text: #ffffff;
    --btn-primary-border: #e74c3c;
    --btn-primary-hover-bg: #c0392b;
    --btn-primary-hover-text: #ffffff;
    --btn-primary-hover-border: #c0392b;
    --btn-primary-active-bg: #a93226;
    --btn-primary-active-text: #ffffff;
    --btn-primary-active-border: #a93226;
    
    --btn-secondary-bg: #34495e;
    --btn-secondary-text: #ecf0f1;
    --btn-secondary-border: #415b76;
    --btn-secondary-hover-bg: #415b76;
    --btn-secondary-hover-border: #5d6d7e;
    
    --btn-outline-primary-color: #e74c3c;
    --btn-outline-primary-border: #e74c3c;
    --btn-outline-primary-hover-bg: #e74c3c;
    --btn-outline-primary-hover-text: #ffffff;
    
    /* ============================================
       STATUS COLORS
       ============================================ */
    --success-color: #2ecc71;
    --success-bg: rgba(46, 204, 113, 0.2);
    --success-border: rgba(46, 204, 113, 0.4);
    --success-text: #2ecc71;
    
    --warning-color: #f39c12;
    --warning-bg: rgba(243, 156, 18, 0.2);
    --warning-border: rgba(243, 156, 18, 0.4);
    --warning-text: #f39c12;
    
    --danger-color: #e74c3c;
    --danger-bg: rgba(231, 76, 60, 0.2);
    --danger-border: rgba(231, 76, 60, 0.4);
    --danger-text: #e74c3c;
    
    --info-color: #3498db;
    --info-bg: rgba(52, 152, 219, 0.2);
    --info-border: rgba(52, 152, 219, 0.4);
    --info-text: #3498db;
    
    /* ============================================
       EFFECTS (COLORS ONLY)
       ============================================ */
    --shadow-sm: 0 2px 5px rgba(0, 0, 0, 0.15);
    --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 8px 15px rgba(0, 0, 0, 0.25);
    --shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.3);
    
    --glow-primary: 0 0 15px rgba(231, 76, 60, 0.4);
    --glow-accent: 0 0 20px rgba(236, 112, 99, 0.6);
    
    --gradient-primary: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
    --gradient-accent: linear-gradient(135deg, #ec7063 0%, #e74c3c 100%);
    
    /* ============================================
       LINK COLORS
       ============================================ */
    --link-color: #e74c3c;
    --link-hover-color: #c0392b;
    --link-visited-color: #e74c3c;
    
    /* ============================================
       NAVBAR COLORS
       ============================================ */
    --navbar-bg: var(--primary-color);
    --navbar-text: var(--text-white);
    --navbar-link: var(--text-white);
    --navbar-link-hover: var(--text-light);
    --navbar-link-active: var(--text-light);
    --navbar-border: #c0392b;
    
    /* ============================================
       TABLE COLORS
       ============================================ */
    --table-bg: var(--card-bg);
    --table-header-bg: #2c3e50;
    --table-border: var(--border-color);
    --table-hover-bg: #415b76;
    --table-striped-bg: rgba(231, 76, 60, 0.1);
    
    /* ============================================
       MODAL COLORS
       ============================================ */
    --modal-bg: #34495e;
    --modal-header-bg: #2c3e50;
    --modal-border: #415b76;
    --modal-backdrop: rgba(0, 0, 0, 0.7);
    
    /* ============================================
       ALERT COLORS
       ============================================ */
    --alert-primary-bg: rgba(231, 76, 60, 0.2);
    --alert-primary-border: rgba(231, 76, 60, 0.4);
    --alert-primary-text: #e74c3c;
    
    --alert-success-bg: var(--success-bg);
    --alert-success-border: var(--success-border);
    --alert-success-text: var(--success-text);
    
    --alert-warning-bg: var(--warning-bg);
    --alert-warning-border: var(--warning-border);
    --alert-warning-text: var(--warning-text);
    
    --alert-danger-bg: var(--danger-bg);
    --alert-danger-border: var(--danger-border);
    --alert-danger-text: var(--danger-text);
    
    /* ============================================
       HERO SECTION COLORS
       ============================================ */
    --hero-bg: linear-gradient(135deg, #34495e 0%, #2c3e50 100%);
    --hero-text: var(--text-primary);
    --hero-border: var(--border-color);
}

/* ============================================
   BASE ELEMENT COLOR OVERRIDES
   (ONLY COLORS - NO STRUCTURAL PROPERTIES)
   ============================================ */

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

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

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

h1, h2, h3, h4, h5, h6 {
    color: var(--text-primary);
}

hr {
    border-color: var(--border-color);
}

/* ============================================
   COMPONENT COLOR OVERRIDES
   (ONLY COLORS - NO STRUCTURAL PROPERTIES)
   ============================================ */

/* Cards */
.card {
    background-color: var(--card-bg);
    border-color: var(--card-border);
    color: var(--text-primary);
}

.card-header {
    background-color: var(--card-header-bg);
    border-bottom-color: var(--card-border);
    color: var(--text-secondary);
}

/* Forms */
.form-control,
.form-select {
    background-color: var(--input-bg);
    border-color: var(--input-border);
    color: var(--text-primary);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--input-focus-border);
}

.form-control::placeholder {
    color: var(--input-placeholder);
}

.form-control:disabled {
    background-color: var(--input-disabled-bg);
    color: var(--input-disabled-text);
}

.form-label {
    color: var(--text-secondary);
}

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

/* Buttons */
.btn-primary {
    background-color: var(--btn-primary-bg);
    border-color: var(--btn-primary-border);
    color: var(--btn-primary-text);
}

.btn-primary:hover {
    background-color: var(--btn-primary-hover-bg);
    border-color: var(--btn-primary-hover-border);
    color: var(--btn-primary-hover-text);
}

.btn-primary:active {
    background-color: var(--btn-primary-active-bg);
    border-color: var(--btn-primary-active-border);
    color: var(--btn-primary-active-text);
}

.btn-outline-primary {
    color: var(--btn-outline-primary-color);
    border-color: var(--btn-outline-primary-border);
}

.btn-outline-primary:hover {
    background-color: var(--btn-outline-primary-hover-bg);
    color: var(--btn-outline-primary-hover-text);
}

.btn-secondary {
    background-color: var(--btn-secondary-bg);
    border-color: var(--btn-secondary-border);
    color: var(--btn-secondary-text);
}

.btn-secondary:hover {
    background-color: var(--btn-secondary-hover-bg);
    border-color: var(--btn-secondary-hover-border);
}

/* Navbar */
.navbar {
    background-color: var(--navbar-bg);
    border-bottom-color: var(--navbar-border);
}

.navbar-brand,
.nav-link {
    color: var(--navbar-link);
}

.nav-link:hover {
    color: var(--navbar-link-hover);
}

.nav-link.active {
    color: var(--navbar-link-active);
}

/* Dropdowns */
.dropdown-menu {
    background-color: var(--dropdown-bg);
    border-color: var(--dropdown-border);
}

.dropdown-item {
    color: var(--dropdown-text);
}

.dropdown-item:hover {
    background-color: var(--dropdown-hover-bg);
    color: var(--dropdown-hover-text);
}

.dropdown-item.active {
    background-color: var(--dropdown-active-bg);
    color: var(--dropdown-active-text);
}

/* Tables */
.table {
    background-color: var(--table-bg);
    border-color: var(--table-border);
    color: var(--text-primary);
}

.table thead th {
    background-color: var(--table-header-bg);
    border-bottom-color: var(--table-border);
    color: var(--text-secondary);
}

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

.table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--table-striped-bg);
}

/* Modals */
.modal-content {
    background-color: var(--modal-bg);
    border-color: var(--modal-border);
    color: var(--text-primary);
}

.modal-header {
    background-color: var(--modal-header-bg);
    border-bottom-color: var(--modal-border);
}

.modal-footer {
    border-top-color: var(--modal-border);
}

.modal-backdrop {
    background-color: var(--modal-backdrop);
}

/* Alerts */
.alert-primary {
    background-color: var(--alert-primary-bg);
    border-color: var(--alert-primary-border);
    color: var(--alert-primary-text);
}

.alert-success {
    background-color: var(--alert-success-bg);
    border-color: var(--alert-success-border);
    color: var(--alert-success-text);
}

.alert-warning {
    background-color: var(--alert-warning-bg);
    border-color: var(--alert-warning-border);
    color: var(--alert-warning-text);
}

.alert-danger {
    background-color: var(--alert-danger-bg);
    border-color: var(--alert-danger-border);
    color: var(--alert-danger-text);
}

/* Badges */
.badge.bg-primary {
    background-color: var(--primary-color);
    color: var(--text-white);
}

/* Progress Bars */
.progress {
    background-color: var(--bg-secondary);
}

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

/* List Groups */
.list-group-item {
    background-color: var(--card-bg);
    border-color: var(--border-color);
    color: var(--text-primary);
}

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

/* Pagination */
.pagination .page-link {
    background-color: var(--card-bg);
    border-color: var(--border-color);
    color: var(--link-color);
}

.pagination .page-link:hover {
    background-color: var(--table-hover-bg);
    border-color: var(--border-color);
    color: var(--link-hover-color);
}

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

/* Tooltips */
.tooltip .tooltip-inner {
    background-color: var(--text-secondary);
    color: var(--bg-primary);
}

.tooltip .arrow::before {
    border-top-color: var(--text-secondary);
}

/* Hero Section */
.hero-section {
    background: var(--hero-bg);
    color: var(--hero-text);
    border-bottom-color: var(--hero-border);
}

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

.hero-subtitle {
    color: var(--text-muted);
}

/* Icons */
.feature-icon {
    color: var(--primary-color);
}

/* Footer */
footer {
    background-color: var(--bg-secondary);
    border-top-color: var(--border-color);
    color: var(--text-muted);
}

footer a {
    color: var(--link-color);
}

footer a:hover {
    color: var(--link-hover-color);
}