/* 
 * PR#3: Topic-Based Color Coding System
 * Visual organization by content topic with content type icons
 * Created: [Current Date]
 */

/* ========================================
   Topic Color Classes
   ======================================== */

/* EASA UAS Categories */
.topic-open-category {
    --topic-color: #3498db;
    --topic-color-rgb: 52, 152, 219;
    --topic-color-light: #5dade2;
    --topic-color-dark: #2980b9;
}

.topic-specific-category {
    --topic-color: #2ecc71;
    --topic-color-rgb: 46, 204, 113;
    --topic-color-light: #58d68d;
    --topic-color-dark: #27ae60;
}

.topic-certified-category {
    --topic-color: #e74c3c;
    --topic-color-rgb: 231, 76, 60;
    --topic-color-light: #ec7063;
    --topic-color-dark: #c0392b;
}

/* Operational Topics */
.topic-operations {
    --topic-color: #9b59b6;
    --topic-color-rgb: 155, 89, 182;
  --topic-color-light: #af7ac5;
    --topic-color-dark: #8e44ad;
}

.topic-safety {
    --topic-color: #f39c12;
    --topic-color-rgb: 243, 156, 18;
    --topic-color-light: #f5b041;
    --topic-color-dark: #d68910;
}

.topic-technical {
    --topic-color: #1abc9c;
    --topic-color-rgb: 26, 188, 156;
    --topic-color-light: #48c9b0;
    --topic-color-dark: #16a085;
}

.topic-airspace {
  --topic-color: #34495e;
    --topic-color-rgb: 52, 73, 94;
    --topic-color-light: #5d6d7e;
    --topic-color-dark: #2c3e50;
}

/* Regulatory Topics */
.topic-regulations {
    --topic-color: #c0392b;
    --topic-color-rgb: 192, 57, 43;
    --topic-color-light: #cd6155;
 --topic-color-dark: #a93226;
}

.topic-registration {
    --topic-color: #16a085;
    --topic-color-rgb: 22, 160, 133;
    --topic-color-light: #45b39d;
    --topic-color-dark: #138d75;
}

.topic-training {
    --topic-color: #2980b9;
    --topic-color-rgb: 41, 128, 185;
    --topic-color-light: #5499c7;
    --topic-color-dark: #1f618d;
}

.topic-competency {
    --topic-color: #8e44ad;
    --topic-color-rgb: 142, 68, 173;
    --topic-color-light: #a569bd;
    --topic-color-dark: #7d3c98;
}

/* Additional Topics (PR#5: Extended color mapping) */
.topic-insurance {
    --topic-color: #e67e22;
    --topic-color-rgb: 230, 126, 34;
 --topic-color-light: #eb984e;
    --topic-color-dark: #d68910;
}

.topic-privacy {
    --topic-color: #3498db;
    --topic-color-rgb: 52, 152, 219;
    --topic-color-light: #5dade2;
    --topic-color-dark: #2980b9;
}

.topic-environmental {
    --topic-color: #27ae60;
    --topic-color-rgb: 39, 174, 96;
    --topic-color-light: #52be80;
    --topic-color-dark: #229954;
}

.topic-incident {
    --topic-color: #e74c3c;
    --topic-color-rgb: 231, 76, 60;
    --topic-color-light: #ec7063;
    --topic-color-dark: #c0392b;
}

/* PR#6: ENAC Italian Regulations */
.topic-enac {
    --topic-color: #009246;
    --topic-color-rgb: 0, 146, 70;
    --topic-color-light: #26a65b;
    --topic-color-dark: #007a3d;
}

/* Default fallback */
.topic-default {
    --topic-color: #6c757d;
    --topic-color-rgb: 108, 117, 125;
    --topic-color-light: #868e96;
    --topic-color-dark: #5a6268;
}

/* ========================================
   Card Styling with Topic Colors
   ======================================== */

/* Topic-colored card header - ALWAYS white text */
.card-header[class*="topic-"] {
    background-color: var(--topic-color) !important;
    color: #ffffff !important;
    border-bottom: 3px solid var(--topic-color-dark);
}

/* Ensure ALL content inside topic-colored headers is white */
.card-header[class*="topic-"] *,
.card-header[class*="topic-"] .card-title,
.card-header[class*="topic-"] .card-title a,
.card-header[class*="topic-"] h1,
.card-header[class*="topic-"] h2,
.card-header[class*="topic-"] h3,
.card-header[class*="topic-"] h4,
.card-header[class*="topic-"] h5,
.card-header[class*="topic-"] h6,
.card-header[class*="topic-"] p,
.card-header[class*="topic-"] span {
    color: #ffffff !important;
}

/* Topic-colored card border accent */
.card[class*="topic-"] {
    border-left: 4px solid var(--topic-color);
}

/* ? FIX: Ensure card body text has good readability for ALL topics */
.card-body .card-text {
    color: #343a40 !important; /* Dark text for light background */
}

/* Dark theme - ensure card body text is readable */
[data-theme="dark"] .card-body .card-text,
[data-theme="dark"] .content-card .card-text,
.dark-theme .card-body .card-text {
    color: #dce4ec !important; /* Light text for dark background */
}

/* ? FIX: Ensure card body text maintains good contrast regardless of card topic color */
.card[class*="topic-"] .card-body .card-text {
    color: #343a40 !important;
}

[data-theme="dark"] .card[class*="topic-"] .card-body .card-text,
.dark-theme .card[class*="topic-"] .card-body .card-text {
    color: #dce4ec !important;
}

/* Topic-colored badge */
.badge[class*="topic-"] {
    background-color: var(--topic-color) !important;
    color: white !important;
}

/* Ensure badges inside card bodies also have white text */
.card-body .badge[class*="topic-"],
.card-body span.badge[class*="topic-"] {
    background-color: var(--topic-color) !important;
    color: #ffffff !important;
}

/* Topic-colored badge outline */
.badge-outline[class*="topic-"] {
    background-color: transparent !important;
    color: var(--topic-color) !important;
    border: 2px solid var(--topic-color);
}

/* Topic-colored accent bar (for list items, dividers) */
.accent-bar[class*="topic-"] {
    background-color: var(--topic-color);
    height: 4px;
    width: 100%;
    border-radius: 2px;
}

/* Topic-colored button */
.btn[class*="topic-"] {
    background-color: var(--topic-color);
    border-color: var(--topic-color-dark);
    color: white;
}

.btn[class*="topic-"]:hover,
.btn[class*="topic-"]:focus {
    background-color: var(--topic-color-dark);
    border-color: var(--topic-color-dark);
    color: white;
}

/* Topic-colored link */
a[class*="topic-"] {
    color: var(--topic-color);
}

a[class*="topic-"]:hover,
a[class*="topic-"]:focus {
    color: var(--topic-color-dark);
}

/* ========================================
   Content Type Icons
   ======================================== */

/* Icon with topic color */
.content-type-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: rgba(var(--topic-color-rgb), 0.1);
    color: var(--topic-color);
    font-size: 1.125rem;
}

.content-type-icon-lg {
    width: 48px;
    height: 48px;
    font-size: 1.5rem;
}

/* Content type badge with icon */
.content-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    border-radius: 1rem;
    background-color: rgba(var(--topic-color-rgb), 0.1);
    color: var(--topic-color);
    font-size: 0.875rem;
    font-weight: 500;
}

.content-type-badge i {
    font-size: 1rem;
}

/* ========================================
 Topic Color Utilities
   ======================================== */

/* Background colors with opacity */
.bg-topic-subtle[class*="topic-"] {
    background-color: rgba(var(--topic-color-rgb), 0.1) !important;
}

.bg-topic-light[class*="topic-"] {
    background-color: var(--topic-color-light) !important;
}

.bg-topic[class*="topic-"] {
    background-color: var(--topic-color) !important;
}

.bg-topic-dark[class*="topic-"] {
    background-color: var(--topic-color-dark) !important;
}

/* Text colors */
.text-topic[class*="topic-"] {
    color: var(--topic-color) !important;
}

.text-topic-dark[class*="topic-"] {
    color: var(--topic-color-dark) !important;
}

/* Border colors */
.border-topic[class*="topic-"] {
    border-color: var(--topic-color) !important;
}

.border-topic-dark[class*="topic-"] {
    border-color: var(--topic-color-dark) !important;
}

/* ========================================
   Card Component Enhancements
   ======================================== */

/* Content card with topic color */
.content-card[class*="topic-"] {
    border-top: 4px solid var(--topic-color);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.content-card[class*="topic-"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(var(--topic-color-rgb), 0.2);
}

/* Topic badge on card */
.content-card .topic-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    background-color: var(--topic-color);
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* Content type icon overlay on card */
.content-card .content-type-overlay {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    color: var(--topic-color);
    font-size: 1.25rem;
}

/* ========================================
   Responsive Adjustments
   ======================================== */

@media (max-width: 768px) {
    .content-type-icon-lg {
        width: 40px;
 height: 40px;
        font-size: 1.25rem;
  }
    
    .content-type-badge {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }
}

/* ========================================
   Dark Mode Support
   ======================================== */

[data-theme="dark"] .content-card[class*="topic-"] {
    border-top-width: 4px;
    background-color: #1e262e;
}

/* Ensure card titles are visible in dark mode */
[data-theme="dark"] .card[class*="topic-"] .card-title,
[data-theme="dark"] .card[class*="topic-"] .card-title a,
[data-theme="dark"] .content-card[class*="topic-"] .card-title,
[data-theme="dark"] .content-card[class*="topic-"] .card-title a {
    color: #f8fafc !important;
}

/* Ensure card text has good contrast in dark mode */
[data-theme="dark"] .card[class*="topic-"] .card-text,
[data-theme="dark"] .content-card[class*="topic-"] .card-text {
    color: #dce4ec;
}

[data-theme="dark"] .content-card[class*="topic-"]:hover {
    box-shadow: 0 4px 12px rgba(var(--topic-color-rgb), 0.3);
}

[data-theme="dark"] .content-type-icon {
    background-color: rgba(var(--topic-color-rgb), 0.2);
}

[data-theme="dark"] .content-type-badge {
    background-color: rgba(var(--topic-color-rgb), 0.2);
}

/* Card headers in dark mode - keep them colored with white text */
[data-theme="dark"] .card-header[class*="topic-"] {
    background-color: var(--topic-color) !important;
  color: #ffffff !important;
}

[data-theme="dark"] .card-header[class*="topic-"] * {
    color: #ffffff !important;
}

/* ========================================
   Print Styles
   ======================================== */

@media print {
    .content-card[class*="topic-"] {
        border-top: 2px solid black !important;
        box-shadow: none !important;
    }
    
    .content-type-icon,
    .content-type-badge {
        background-color: transparent !important;
        border: 1px solid black !important;
    }
}