/* =====================================================
   COMIC THEME - 70s B/W Magazine Style + Yellow Accents
   ===================================================== */

/* Import Georgia-like serif for that classic 70s look */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700;900&family=Source+Serif+4:wght@400;600;700&display=swap');

/* =====================================================
   CSS VARIABLES - Comic Palette
   ===================================================== */
:root {
    /* Primary Colors */
    --comic-black: #000000;
    --comic-white: #ffffff;
    --comic-cream: #fffef5;
    --comic-yellow: #FFD700;
    --comic-yellow-hover: #FFC000;
    --comic-yellow-light: #FFF8DC;
    
    /* Grays for depth */
    --comic-gray-dark: #333333;
    --comic-gray-medium: #666666;
    --comic-gray-light: #999999;
    --comic-gray-border: #e0e0e0;
    
    /* Typography */
    --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --font-body: 'Source Serif 4', Georgia, 'Times New Roman', serif;
    --font-mono: 'Courier New', Courier, monospace;
    
    /* Borders */
    --border-thin: 2px solid var(--comic-black);
    --border-medium: 3px solid var(--comic-black);
    --border-thick: 4px solid var(--comic-black);
    
    /* Shadows - Harsh comic style */
    --shadow-comic: 4px 4px 0 var(--comic-black);
    --shadow-comic-sm: 2px 2px 0 var(--comic-black);
    --shadow-comic-yellow: 4px 4px 0 var(--comic-yellow);
}

/* =====================================================
   BASE STYLES
   ===================================================== */
body {
    font-family: var(--font-body) !important;
    background: var(--comic-cream) !important;
    color: var(--comic-black) !important;
    line-height: 1.6;
}

/* Override dark theme */
[data-bs-theme="dark"] {
    --bs-body-bg: var(--comic-cream) !important;
    --bs-body-color: var(--comic-black) !important;
}

/* Container adjustments */
.container {
    background: transparent;
}

/* =====================================================
   TYPOGRAPHY - Use inheritance for proper dark card support
   ===================================================== */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display) !important;
    font-weight: 900 !important;
    color: inherit;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.1rem; }
h6 { font-size: 1rem; }

p, li, td, th, label, span, div {
    font-family: var(--font-body);
    color: inherit;
}

small {
    color: inherit;
}

/* Links */
a {
    color: var(--comic-black);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    transition: all 0.2s ease;
}

a:hover {
    color: var(--comic-gray-dark);
    background: var(--comic-yellow);
}

/* =====================================================
   NAVBAR - Comic Style
   ===================================================== */
.navbar {
    background: var(--comic-white) !important;
    border-bottom: var(--border-thick) !important;
    padding: 0.75rem 1rem !important;
    font-family: var(--font-display) !important;
}

.navbar-brand {
    font-family: var(--font-display) !important;
    font-weight: 900 !important;
    font-size: 1.5rem !important;
    color: var(--comic-black) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    text-decoration: none !important;
}

.navbar-brand:hover {
    background: var(--comic-yellow) !important;
}

.nav-link {
    font-family: var(--font-display) !important;
    font-weight: 700 !important;
    color: var(--comic-black) !important;
    text-transform: uppercase !important;
    font-size: 0.85rem !important;
    letter-spacing: 0.05em !important;
    padding: 0.5rem 0.75rem !important;
    border: 2px solid transparent !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.nav-link:hover,
.nav-link.active {
    background: var(--comic-yellow) !important;
    border-color: var(--comic-black) !important;
    color: var(--comic-black) !important;
}

.navbar-toggler {
    border: var(--border-medium) !important;
    border-radius: 0 !important;
    background: var(--comic-yellow) !important;
}

.navbar-toggler-icon {
    filter: none !important;
}

.dropdown-menu {
    background: var(--comic-white) !important;
    border: var(--border-medium) !important;
    border-radius: 0 !important;
    box-shadow: var(--shadow-comic) !important;
}

.dropdown-item {
    font-family: var(--font-body) !important;
    color: var(--comic-black) !important;
    padding: 0.5rem 1rem !important;
    border-bottom: 1px solid var(--comic-gray-border) !important;
}

.dropdown-item:hover {
    background: var(--comic-yellow) !important;
    color: var(--comic-black) !important;
}

.dropdown-item:last-child {
    border-bottom: none !important;
}

/* =====================================================
   BUTTONS - Yellow Primary, Black Secondary
   ===================================================== */
.btn {
    font-family: var(--font-display) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    border-radius: 0 !important;
    border: var(--border-medium) !important;
    padding: 0.5rem 1.25rem !important;
    transition: all 0.15s ease !important;
    box-shadow: var(--shadow-comic-sm) !important;
}

.btn:active {
    transform: translate(2px, 2px) !important;
    box-shadow: none !important;
}

/* Primary Button - Yellow */
.btn-primary {
    background: var(--comic-yellow) !important;
    border-color: var(--comic-black) !important;
    color: var(--comic-black) !important;
}

.btn-primary:hover {
    background: var(--comic-yellow-hover) !important;
    color: var(--comic-black) !important;
}

/* Secondary Button - Black */
.btn-secondary,
.btn-dark {
    background: var(--comic-black) !important;
    border-color: var(--comic-black) !important;
    color: var(--comic-white) !important;
}

.btn-secondary:hover,
.btn-dark:hover {
    background: var(--comic-gray-dark) !important;
}

/* Outline Buttons - FORCE white background */
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-dark,
.btn-outline-warning,
.btn-outline-info,
.btn-outline-success,
.btn-outline-danger {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border-color: #000000 !important;
    color: #000000 !important;
}

.btn-outline-primary:hover,
.btn-outline-secondary:hover,
.btn-outline-dark:hover,
.btn-outline-warning:hover,
.btn-outline-info:hover,
.btn-outline-success:hover,
.btn-outline-danger:hover {
    background: #FFD700 !important;
    background-color: #FFD700 !important;
    color: #000000 !important;
}

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

.btn-success:hover {
    background: var(--comic-yellow) !important;
    color: var(--comic-black) !important;
}

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

.btn-danger:hover {
    background: var(--comic-black) !important;
    color: var(--comic-white) !important;
}

/* Info/Warning Buttons */
.btn-info,
.btn-warning {
    background: var(--comic-yellow) !important;
    border-color: var(--comic-black) !important;
    color: var(--comic-black) !important;
}

/* Light Button */
.btn-light {
    background: var(--comic-white) !important;
    border-color: var(--comic-black) !important;
    color: var(--comic-black) !important;
}

.btn-light:hover {
    background: var(--comic-yellow-light) !important;
}

/* Small Buttons */
.btn-sm {
    font-size: 0.75rem !important;
    padding: 0.35rem 0.75rem !important;
}

/* =====================================================
   CARDS - Comic Style
   ===================================================== */

/* Base card styling - borders and shadows only */
.card {
    border: var(--border-thick) !important;
    border-radius: 0 !important;
    box-shadow: var(--shadow-comic) !important;
    overflow: hidden;
}

/* Light cards (default) - white background, black text */
.card:not(.bg-dark):not(.card-dark):not([class*="bg-gradient-"]) {
    background: var(--comic-white) !important;
    color: var(--comic-black) !important;
}

/* DARK CARDS - GLOBAL RULE - black bg, white text */
.card.bg-dark {
    background: #000000 !important;
    color: #ffffff !important;
}

.card.bg-dark .card-body {
    background: #000000 !important;
    color: #ffffff !important;
}

.card.bg-dark .card-title,
.card.bg-dark .card-text,
.card.bg-dark h1, .card.bg-dark h2, .card.bg-dark h3,
.card.bg-dark h4, .card.bg-dark h5, .card.bg-dark h6,
.card.bg-dark p, .card.bg-dark span, .card.bg-dark div,
.card.bg-dark small, .card.bg-dark .text-light {
    color: #ffffff !important;
}

.card.bg-dark .text-muted {
    color: #bbbbbb !important;
}

.card-header {
    background: var(--comic-yellow) !important;
    border-bottom: var(--border-medium) !important;
    font-family: var(--font-display) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    color: var(--comic-black) !important;
    padding: 0.75rem 1rem !important;
}

.card-body {
    padding: 1.25rem !important;
}

.card-footer {
    background: var(--comic-cream) !important;
    border-top: var(--border-thin) !important;
    color: var(--comic-black) !important;
}

.card-title {
    font-family: var(--font-display) !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    margin-bottom: 0.75rem !important;
}

.card-text {
    font-family: var(--font-body) !important;
}

/* =====================================================
   CARD VARIANTS - Semantic classes for different card types
   ===================================================== */

/* Dark card - black background, white text */
/* HIGH SPECIFICITY with .card.card-dark to override base .card rules */
.card.card-dark {
    background: #000000 !important;
    color: #ffffff !important;
}

.card.card-dark .card-header {
    background: #FFD700 !important;
    color: #000000 !important;
}

.card.card-dark .card-header h1, .card.card-dark .card-header h2,
.card.card-dark .card-header h3, .card.card-dark .card-header h4,
.card.card-dark .card-header h5, .card.card-dark .card-header h6 {
    color: #000000 !important;
}

.card.card-dark .card-body {
    background: #000000 !important;
    color: #ffffff !important;
}

.card.card-dark .card-body * {
    color: inherit !important;
}

.card.card-dark h1, .card.card-dark h2, .card.card-dark h3,
.card.card-dark h4, .card.card-dark h5, .card.card-dark h6 {
    color: #ffffff !important;
}

.card.card-dark small,
.card.card-dark .text-muted {
    color: #cccccc !important;
}

.card.card-dark i {
    color: inherit !important;
}

/* Yellow card - yellow background, black text */
.card-yellow {
    background: #FFD700 !important;
    color: #000000 !important;
}

.card-yellow .card-header {
    background: #000000 !important;
    color: #FFD700 !important;
}

.card-yellow .card-body {
    background: #FFD700 !important;
    color: #000000 !important;
}

.card-yellow .card-body * {
    color: inherit !important;
}

.card-yellow small,
.card-yellow .text-muted {
    color: #333333 !important;
}

/* Stat card - simplified black card for statistics */
/* HIGH SPECIFICITY with .card.card-stat to override base .card rules */
.card.card-stat {
    background: #000000 !important;
    color: #ffffff !important;
    border: 3px solid #000000 !important;
    box-shadow: 4px 4px 0 #000000 !important;
}

.card.card-stat .card-body {
    background: #000000 !important;
    color: #ffffff !important;
}

.card.card-stat .card-body * {
    color: inherit !important;
}

.card.card-stat h1, .card.card-stat h2, .card.card-stat h3,
.card.card-stat h4, .card.card-stat h5, .card.card-stat h6 {
    color: #ffffff !important;
}

.card.card-stat small {
    color: #cccccc !important;
}

.card.card-stat i {
    color: inherit !important;
}

/* Yellow stat card - HIGH SPECIFICITY */
.card.card-stat-yellow {
    background: #FFD700 !important;
    color: #000000 !important;
    border: 3px solid #000000 !important;
    box-shadow: 4px 4px 0 #000000 !important;
}

.card.card-stat-yellow .card-body {
    background: #FFD700 !important;
    color: #000000 !important;
}

.card.card-stat-yellow .card-body * {
    color: inherit !important;
}

.card.card-stat-yellow h1, .card.card-stat-yellow h2, .card.card-stat-yellow h3,
.card.card-stat-yellow h4, .card.card-stat-yellow h5, .card.card-stat-yellow h6 {
    color: #000000 !important;
}

.card.card-stat-yellow small {
    color: #333333 !important;
}

/* Circuit cards - white background with black text */
.card.circuit-card {
    background: #ffffff !important;
    color: #000000 !important;
}

.card.circuit-card .card-body {
    background: #ffffff !important;
    color: #000000 !important;
}

.card.circuit-card .card-body * {
    color: #000000 !important;
}

/* Circuit card buttons - EXPLICIT overrides */
.card.circuit-card .btn,
.card.circuit-card .btn-outline-primary,
.card.circuit-card .btn-outline-secondary,
.card.circuit-card .btn-outline-warning,
.card.circuit-card button {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: 2px solid #000000 !important;
    color: #000000 !important;
}

.card.circuit-card .btn i,
.card.circuit-card button i {
    color: #000000 !important;
}

.card.circuit-card .btn:hover,
.card.circuit-card button:hover {
    background: #FFD700 !important;
    background-color: #FFD700 !important;
}

.card.circuit-card .card-title {
    color: #000000 !important;
}

.card.circuit-card .card-text,
.card.circuit-card .text-muted {
    color: #666666 !important;
}

.card.circuit-card small {
    color: #666666 !important;
}

/* =====================================================
   FORMS - Comic Style
   ===================================================== */
.form-control,
.form-select {
    font-family: var(--font-body) !important;
    background: var(--comic-white) !important;
    border: var(--border-medium) !important;
    border-radius: 0 !important;
    color: var(--comic-black) !important;
    padding: 0.5rem 0.75rem !important;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--comic-black) !important;
    box-shadow: var(--shadow-comic-sm) !important;
    outline: none !important;
}

.form-control::placeholder {
    color: var(--comic-gray-light) !important;
    font-style: italic !important;
}

.form-label {
    font-family: var(--font-display) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 0.85rem !important;
    letter-spacing: 0.05em !important;
    color: var(--comic-black) !important;
    margin-bottom: 0.35rem !important;
}

.form-check-input {
    border: var(--border-thin) !important;
    border-radius: 0 !important;
    background: var(--comic-white) !important;
}

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

.form-check-label {
    font-family: var(--font-body) !important;
    color: var(--comic-black) !important;
}

.input-group-text {
    background: var(--comic-yellow) !important;
    border: var(--border-medium) !important;
    border-radius: 0 !important;
    color: var(--comic-black) !important;
    font-family: var(--font-display) !important;
    font-weight: 700 !important;
}

/* =====================================================
   TABLES - Comic Style
   ===================================================== */
.table {
    font-family: var(--font-body) !important;
    border: var(--border-thick) !important;
    background: var(--comic-white) !important;
}

.table thead {
    background: var(--comic-black) !important;
    color: var(--comic-white) !important;
}

.table thead th {
    font-family: var(--font-display) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    font-size: 0.85rem !important;
    border-bottom: var(--border-medium) !important;
    padding: 0.75rem !important;
    background: var(--comic-black) !important;
    color: var(--comic-white) !important;
}

.table tbody tr {
    border-bottom: 2px solid var(--comic-black) !important;
}

.table tbody tr:hover {
    background: var(--comic-yellow-light) !important;
}

.table tbody td {
    padding: 0.75rem !important;
    color: var(--comic-black) !important;
    vertical-align: middle !important;
}

.table-striped tbody tr:nth-of-type(odd) {
    background: var(--comic-cream) !important;
}

.table-dark {
    background: var(--comic-black) !important;
}

/* =====================================================
   ALERTS - Comic Style
   ===================================================== */
.alert {
    font-family: var(--font-body) !important;
    border: var(--border-medium) !important;
    border-radius: 0 !important;
    color: var(--comic-black) !important;
    box-shadow: var(--shadow-comic-sm) !important;
}

.alert-success {
    background: var(--comic-yellow-light) !important;
    border-color: var(--comic-black) !important;
}

.alert-danger,
.alert-warning {
    background: var(--comic-white) !important;
    border-color: var(--comic-black) !important;
}

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

.btn-close {
    filter: none !important;
}

/* =====================================================
   BADGES - Comic Style
   ===================================================== */
.badge {
    font-family: var(--font-display) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    border-radius: 0 !important;
    border: 2px solid var(--comic-black) !important;
    padding: 0.35rem 0.65rem !important;
}

.badge.bg-primary,
.badge.bg-warning {
    background: var(--comic-yellow) !important;
    color: var(--comic-black) !important;
}

.badge.bg-secondary {
    background: #666666 !important;
    background-color: #666666 !important;
    color: #ffffff !important;
}

.badge.bg-dark {
    background: #000000 !important;
    background-color: #000000 !important;
    color: #ffffff !important;
}

.badge.bg-success {
    background: var(--comic-white) !important;
    color: var(--comic-black) !important;
}

.badge.bg-info {
    background: var(--comic-cream) !important;
    color: var(--comic-black) !important;
}

/* =====================================================
   MODALS - Comic Style
   ===================================================== */
.modal-content {
    background: var(--comic-white) !important;
    border: var(--border-thick) !important;
    border-radius: 0 !important;
    box-shadow: 8px 8px 0 var(--comic-black) !important;
}

.modal-header {
    background: var(--comic-yellow) !important;
    border-bottom: var(--border-medium) !important;
    padding: 1rem !important;
}

.modal-title {
    font-family: var(--font-display) !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    color: var(--comic-black) !important;
}

.modal-body {
    background: var(--comic-white) !important;
    color: var(--comic-black) !important;
    padding: 1.5rem !important;
}

.modal-footer {
    background: var(--comic-cream) !important;
    border-top: var(--border-thin) !important;
    padding: 1rem !important;
}

/* =====================================================
   PAGINATION - Comic Style
   ===================================================== */
.pagination {
    gap: 0.25rem;
}

.page-link {
    font-family: var(--font-display) !important;
    font-weight: 700 !important;
    background: var(--comic-white) !important;
    border: var(--border-medium) !important;
    border-radius: 0 !important;
    color: var(--comic-black) !important;
    padding: 0.5rem 0.75rem !important;
}

.page-link:hover {
    background: var(--comic-yellow) !important;
    color: var(--comic-black) !important;
}

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

.page-item.disabled .page-link {
    background: var(--comic-cream) !important;
    color: var(--comic-gray-light) !important;
}

/* =====================================================
   LISTS - Comic Style
   ===================================================== */
.list-group {
    border-radius: 0 !important;
}

.list-group-item {
    font-family: var(--font-body) !important;
    background: var(--comic-white) !important;
    border: var(--border-thin) !important;
    border-radius: 0 !important;
    color: var(--comic-black) !important;
    margin-bottom: -2px;
}

.list-group-item:first-child {
    border-top-width: 3px !important;
}

.list-group-item:last-child {
    border-bottom-width: 3px !important;
}

.list-group-item:hover {
    background: var(--comic-yellow-light) !important;
}

.list-group-item.active {
    background: var(--comic-yellow) !important;
    border-color: var(--comic-black) !important;
    color: var(--comic-black) !important;
}

/* =====================================================
   BREADCRUMBS - Comic Style
   ===================================================== */
.breadcrumb {
    background: var(--comic-cream) !important;
    border: var(--border-thin) !important;
    border-radius: 0 !important;
    padding: 0.75rem 1rem !important;
    font-family: var(--font-body) !important;
}

.breadcrumb-item a {
    color: var(--comic-black) !important;
}

.breadcrumb-item.active {
    color: var(--comic-gray-medium) !important;
    font-weight: 600 !important;
}

/* =====================================================
   FOOTER - Comic Style
   ===================================================== */
footer {
    background: var(--comic-black) !important;
    color: var(--comic-white) !important;
    border-top: var(--border-thick) !important;
    font-family: var(--font-body) !important;
    padding: 2rem 0 !important;
    margin-top: 2rem !important;
}

footer a {
    color: var(--comic-yellow) !important;
    text-decoration: none !important;
}

footer a:hover {
    background: var(--comic-yellow) !important;
    color: var(--comic-black) !important;
}

footer h5, footer h6 {
    color: var(--comic-white) !important;
    font-family: var(--font-display) !important;
}

/* =====================================================
   SPECIAL ELEMENTS
   ===================================================== */

/* Newspaper-style section headers */
.section-header {
    font-family: var(--font-display) !important;
    font-weight: 900 !important;
    font-size: 2rem !important;
    text-transform: uppercase !important;
    text-align: center !important;
    padding: 1rem !important;
    margin-bottom: 1.5rem !important;
    border-top: var(--border-thick) !important;
    border-bottom: var(--border-thick) !important;
    background: var(--comic-white) !important;
    letter-spacing: 0.1em !important;
}

/* Comic speech bubble effect */
.comic-bubble {
    position: relative;
    background: var(--comic-yellow);
    border: var(--border-thick);
    padding: 1rem 1.5rem;
    font-family: var(--font-display);
    font-weight: 700;
}

.comic-bubble::after {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 30px;
    border: 10px solid transparent;
    border-top-color: var(--comic-black);
}

/* Halftone texture overlay (optional for images) */
.halftone {
    position: relative;
}

.halftone::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: radial-gradient(circle, var(--comic-black) 1px, transparent 1px);
    background-size: 4px 4px;
    opacity: 0.1;
    pointer-events: none;
}

/* Comic-style text emphasis */
.comic-emphasis {
    font-family: var(--font-display) !important;
    font-weight: 900 !important;
    font-size: 1.2em !important;
    background: var(--comic-yellow) !important;
    padding: 0 0.25em !important;
    display: inline !important;
}

/* Grayscale filter for images */
.comic-img {
    filter: grayscale(100%) contrast(1.2);
    border: var(--border-thick);
}

/* =====================================================
   RESPONSIVE ADJUSTMENTS
   ===================================================== */
@media (max-width: 768px) {
    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.25rem; }
    
    .btn {
        font-size: 0.8rem !important;
        padding: 0.4rem 0.75rem !important;
    }
    
    .card {
        box-shadow: 3px 3px 0 var(--comic-black) !important;
    }
    
    .section-header {
        font-size: 1.5rem !important;
    }
}

/* =====================================================
   BOOTSTRAP UTILITY OVERRIDES - Minimal, non-destructive
   ===================================================== */

/* Background utilities */
.bg-dark {
    background: #000000 !important;
    color: #ffffff !important;
}

/* Text muted - context-aware */
.text-muted {
    color: #666666 !important;
}

/* =====================================================
   UTILITY CLASSES
   ===================================================== */
.bg-comic-yellow { background: var(--comic-yellow) !important; }
.bg-comic-black { background: var(--comic-black) !important; }
.bg-comic-white { background: var(--comic-white) !important; }
.bg-comic-cream { background: var(--comic-cream) !important; }

.text-comic-black { color: var(--comic-black) !important; }
.text-comic-white { color: var(--comic-white) !important; }
.text-comic-yellow { color: var(--comic-yellow) !important; }

.border-comic { border: var(--border-thick) !important; }
.shadow-comic { box-shadow: var(--shadow-comic) !important; }

.font-display { font-family: var(--font-display) !important; }
.font-body { font-family: var(--font-body) !important; }

/* =====================================================
   GLOBAL COMIC THEME DEFAULTS
   Bootstrap is now in light mode - we just apply comic styling
   ===================================================== */

/* All cards white by default with comic borders - EXCEPT dark cards */
.card:not(.bg-dark):not(.card-dark):not([class*="bg-gradient-"]) { 
    background: #ffffff !important;
    color: #000000 !important;
}

.card {
    border: 3px solid #000000 !important;
    border-radius: 0 !important;
    box-shadow: 4px 4px 0 #000000 !important;
}

/* DARK CARDS - Black background, white text - SIMPLE AND GLOBAL */
.card.bg-dark,
.card.bg-dark .card-body {
    background: #000000 !important;
    color: #ffffff !important;
}

.card.bg-dark * {
    color: #ffffff !important;
}

.card.bg-dark .text-muted,
.card.bg-dark .card-text {
    color: #bbbbbb !important;
}

.card-header {
    background: #FFD700 !important;
    border-bottom: 3px solid #000000 !important;
    border-radius: 0 !important;
}

.card-header h1, .card-header h2, .card-header h3,
.card-header h4, .card-header h5, .card-header h6 {
    color: #000000 !important;
    margin-bottom: 0 !important;
}

/* =====================================================
   GRADIENT STAT CARDS - Black background, white text
   HIGH SPECIFICITY: .card.bg-gradient-* beats .card
   ===================================================== */
.card.bg-gradient-primary,
.card.bg-gradient-success,
.card.bg-gradient-info,
.card.bg-gradient-danger,
.card.bg-gradient-secondary,
.card.bg-gradient-purple,
.card.bg-gradient-teal,
div.bg-gradient-primary,
div.bg-gradient-success,
div.bg-gradient-info,
div.bg-gradient-danger,
div.bg-gradient-secondary,
div.bg-gradient-purple,
div.bg-gradient-teal {
    background: #000000 !important;
    border: 3px solid #000000 !important;
    box-shadow: 4px 4px 0 #000000 !important;
}

/* White text inside gradient cards - ALL text elements */
.card.bg-gradient-primary *,
.card.bg-gradient-success *,
.card.bg-gradient-info *,
.card.bg-gradient-danger *,
.card.bg-gradient-secondary *,
.card.bg-gradient-purple *,
.card.bg-gradient-teal * {
    color: #ffffff !important;
}

/* Yellow accent icons inside gradient cards */
.card.bg-gradient-primary .rounded-circle,
.card.bg-gradient-success .rounded-circle,
.card.bg-gradient-info .rounded-circle,
.card.bg-gradient-danger .rounded-circle,
.card.bg-gradient-secondary .rounded-circle,
.card.bg-gradient-purple .rounded-circle,
.card.bg-gradient-teal .rounded-circle {
    background: #FFD700 !important;
    border: 2px solid #ffffff !important;
}

.card.bg-gradient-primary .rounded-circle i,
.card.bg-gradient-success .rounded-circle i,
.card.bg-gradient-info .rounded-circle i,
.card.bg-gradient-danger .rounded-circle i,
.card.bg-gradient-secondary .rounded-circle i,
.card.bg-gradient-purple .rounded-circle i,
.card.bg-gradient-teal .rounded-circle i {
    color: #000000 !important;
}

/* Warning gradient - yellow background, black text */
.card.bg-gradient-warning,
div.bg-gradient-warning {
    background: #FFD700 !important;
    border: 3px solid #000000 !important;
    box-shadow: 4px 4px 0 #000000 !important;
}

.card.bg-gradient-warning * {
    color: #000000 !important;
}

.card.bg-gradient-warning .rounded-circle {
    background: #000000 !important;
    border: 2px solid #000000 !important;
}

.card.bg-gradient-warning .rounded-circle i {
    color: #FFD700 !important;
}

/* DARK CARDS rules are defined earlier in the file - no duplicates here */

/* =====================================================
   REGULAR CARDS - White background, black text
   Only for cards that are NOT dark variants
   ===================================================== */
.card:not(.bg-dark):not(.card-dark):not(.card-stat):not([class*="bg-gradient-"]) {
    color: #000000;
}

.card:not(.bg-dark):not(.card-dark):not(.card-stat):not([class*="bg-gradient-"]) h1,
.card:not(.bg-dark):not(.card-dark):not(.card-stat):not([class*="bg-gradient-"]) h2,
.card:not(.bg-dark):not(.card-dark):not(.card-stat):not([class*="bg-gradient-"]) h3,
.card:not(.bg-dark):not(.card-dark):not(.card-stat):not([class*="bg-gradient-"]) h4,
.card:not(.bg-dark):not(.card-dark):not(.card-stat):not([class*="bg-gradient-"]) h5,
.card:not(.bg-dark):not(.card-dark):not(.card-stat):not([class*="bg-gradient-"]) h6 {
    color: #000000 !important;
}

/* Progress bars */
.progress {
    background: var(--comic-gray-border) !important;
    border: 2px solid var(--comic-black) !important;
    border-radius: 0 !important;
}

.progress-bar {
    background: var(--comic-yellow) !important;
}

/* Border color utilities */
.border-primary { border-color: var(--comic-yellow) !important; }
.border-success { border-color: var(--comic-black) !important; }
.border-secondary { border-color: var(--comic-gray-medium) !important; }

/* Text color utilities */
.text-primary { color: var(--comic-yellow) !important; }
.text-success { color: var(--comic-black) !important; }
.text-danger { color: #742a2a !important; }
.text-warning { color: var(--comic-yellow) !important; }
.text-info { color: var(--comic-gray-dark) !important; }

/* Hover effects */
.hover-lift:hover {
    transform: translateY(-2px);
}

.hover-glow:hover {
    box-shadow: var(--shadow-comic-yellow) !important;
}

/* =====================================================
   ARTICLE CONTENT OVERRIDES - HIGHEST PRIORITY
   Force all bg-dark elements inside articles to use light theme
   These rules MUST be at the end for maximum specificity
   ===================================================== */
.article-body .bg-dark,
.article-body .card.bg-dark,
.article-body blockquote.bg-dark,
.article-body div.bg-dark,
.article-content .bg-dark,
.article-content .card.bg-dark,
.article-content blockquote.bg-dark,
.article-content div.bg-dark {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #000000 !important;
}

.article-body .bg-dark *,
.article-body .card.bg-dark *,
.article-body blockquote.bg-dark *,
.article-content .bg-dark *,
.article-content .card.bg-dark *,
.article-content blockquote.bg-dark * {
    color: #000000 !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
}

.article-body .card.bg-dark .card-header,
.article-content .card.bg-dark .card-header {
    background: #f0f0f0 !important;
    color: #000000 !important;
}

.article-body .blockquote-footer,
.article-content .blockquote-footer {
    color: #333333 !important;
}

/* =====================================================
   CIRCUIT CARD BUTTONS - HIGHEST PRIORITY
   Fix invisible buttons on /circuiti page
   ===================================================== */
.card .btn,
.card.circuit-card .btn,
.circuit-card .btn,
.card .btn-outline-primary,
.card .btn-outline-secondary,
.card .btn-outline-warning,
.card .btn-outline-info,
.card .btn-outline-success,
.card .btn-outline-danger {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: 2px solid #000000 !important;
    color: #000000 !important;
}

.card .btn i,
.card.circuit-card .btn i,
.circuit-card .btn i {
    color: #000000 !important;
}

.card .btn:hover,
.card.circuit-card .btn:hover,
.circuit-card .btn:hover {
    background: #FFD700 !important;
    background-color: #FFD700 !important;
    color: #000000 !important;
}

.card .btn:hover i,
.card.circuit-card .btn:hover i,
.circuit-card .btn:hover i {
    color: #000000 !important;
}

/* Primary button in cards - keep yellow */
.card .btn-primary,
.card.circuit-card .btn-primary {
    background: #FFD700 !important;
    background-color: #FFD700 !important;
    color: #000000 !important;
}

/* =====================================================
   NLS ARTICLE STYLES - Scientific/Technical Content
   ===================================================== */
.nls-article {
    font-family: var(--font-body);
    line-height: 1.8;
}

.nls-article h2 {
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 3px solid var(--comic-yellow);
}

.nls-article h4 {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

.algorithm-box {
    background: var(--comic-white);
    border: 3px solid var(--comic-black);
    padding: 1.5rem;
    margin: 1.5rem 0;
    box-shadow: var(--shadow-comic);
}

.algorithm-box h4 {
    font-family: var(--font-display);
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--comic-black);
}

.algorithm-box code {
    font-family: var(--font-mono);
    font-size: 1.1rem;
    background: var(--comic-yellow-light);
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--comic-black);
    display: inline-block;
}

.chakra-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    font-size: 0.95rem;
}

.chakra-table th,
.chakra-table td {
    border: 2px solid var(--comic-black);
    padding: 0.75rem;
    text-align: left;
}

.chakra-table th {
    background: var(--comic-black);
    color: var(--comic-white);
    font-family: var(--font-display);
    font-weight: 700;
    text-transform: uppercase;
}

.chakra-table tr:nth-child(odd) td {
    background: var(--comic-cream);
}

.chakra-table tr:nth-child(even) td {
    background: var(--comic-white);
}

.chakra-table tr:hover td {
    background: var(--comic-yellow-light);
}

.nls-article ul,
.nls-article ol {
    margin: 1rem 0 1.5rem 1.5rem;
}

.nls-article li {
    margin-bottom: 0.5rem;
}

.nls-article li strong {
    color: var(--comic-black);
}

.nls-article em {
    font-style: italic;
    color: var(--comic-gray-dark);
}