/* ==========================================================================
   PAIKALLISLEHTI - DESIGN SYSTEM & CONTRAST TOKENS
   WCAG AA/AAA High-Contrast Design System for Light & Dark Modes
   ========================================================================== */

:root {
    --font-headline: 'Montserrat', sans-serif;
    --font-body: 'Raleway', sans-serif;

    /* --- Light Theme (Default) --- */
    --color-primary-light: #C1121F;          /* Deep Crimson Red - High Contrast */
    --color-primary-hover-light: #9B0E19;
    --color-secondary-light: #0F172A;        /* Slate 900 - Crisp dark headings */
    --color-accent-light: #D97706;           /* Warm Amber/Gold */
    --color-background-light: #F1F5F9;       /* Slate 100 - Clean modern neutral */
    --color-text-light: #0F172A;             /* Slate 900 - 14:1 contrast ratio */
    --color-muted-light: #475569;            /* Slate 600 - High legibility meta */
    --color-card-bg-light: #FFFFFF;          /* Pure White cards */
    --color-card-border-light: #CBD5E1;      /* Slate 300 - Distinct boundaries */
    --color-link-light: #C1121F;             /* Deep Crimson */
    --color-link-visited-light: #7F1D1D;     /* Dark Crimson */
    --color-navbar-bg-light: #0F172A;        /* Slate 900 */
    --color-navbar-text-light: #F8FAFC;
    --color-navbar-text-hover-light: #FFFFFF;
    --color-footer-bg-light: #0F172A;
    --color-footer-text-light: #94A3B8;
    --color-sidebar-hover-bg-light: #E2E8F0;
    --color-headline-card-hover-bg-light: #F8FAFC;
    --color-edit-control-bg-light: #F8FAFC;
    --color-surface-secondary-light: #E2E8F0;

    /* --- Dark Theme --- */
    --color-primary-dark: #EF4444;           /* Vibrant Red / Coral - High contrast against dark */
    --color-primary-hover-dark: #FCA5A5;
    --color-secondary-dark: #FFFFFF;         /* Pure White headings in dark mode */
    --color-accent-dark: #FBBF24;            /* Amber 400 */
    --color-background-dark: #0B0F19;        /* Deep Slate Black */
    --color-text-dark: #F1F5F9;              /* Slate 100 - High contrast body text */
    --color-muted-dark: #94A3B8;             /* Slate 400 - Clear secondary text */
    --color-card-bg-dark: #151D2E;           /* Slate 800+ - Rich dark card surface */
    --color-card-border-dark: #2A374D;       /* Slate 700 - Distinct visible border */
    --color-link-dark: #F87171;              /* Coral Red - High contrast on dark */
    --color-link-visited-dark: #FCA5A5;
    --color-navbar-bg-dark: #080C14;         /* Near black */
    --color-navbar-text-dark: #F1F5F9;
    --color-navbar-text-hover-dark: #FFFFFF;
    --color-footer-bg-dark: #080C14;
    --color-footer-text-dark: #94A3B8;
    --color-sidebar-hover-bg-dark: #1E293B;
    --color-headline-card-hover-bg-dark: #1E293B;
    --color-edit-control-bg-dark: #151D2E;
    --color-surface-secondary-dark: #1E293B;

    /* --- Default Active Theme Tokens (Light) --- */
    --color-primary: var(--color-primary-light);
    --color-primary-hover: var(--color-primary-hover-light);
    --color-secondary: var(--color-secondary-light);
    --color-accent: var(--color-accent-light);
    --color-background: var(--color-background-light);
    --color-text: var(--color-text-light);
    --color-muted: var(--color-muted-light);
    --color-card-bg: var(--color-card-bg-light);
    --color-card-border: var(--color-card-border-light);
    --color-link: var(--color-link-light);
    --color-link-visited: var(--color-link-visited-light);
    --color-navbar-bg: var(--color-navbar-bg-light);
    --color-navbar-text: var(--color-navbar-text-light);
    --color-navbar-text-hover: var(--color-navbar-text-hover-light);
    --color-footer-bg: var(--color-footer-bg-light);
    --color-footer-text: var(--color-footer-text-light);
    --color-sidebar-hover-bg: var(--color-sidebar-hover-bg-light);
    --color-headline-card-hover-bg: var(--color-headline-card-hover-bg-light);
    --color-edit-control-bg: var(--color-edit-control-bg-light);
    --color-surface-secondary: var(--color-surface-secondary-light);
}

/* ==========================================================================
   DARK THEME OVERRIDES
   ========================================================================== */
[data-theme="dark"],
[data-bs-theme="dark"] {
    --color-primary: var(--color-primary-dark);
    --color-primary-hover: var(--color-primary-hover-dark);
    --color-secondary: var(--color-secondary-dark);
    --color-accent: var(--color-accent-dark);
    --color-background: var(--color-background-dark);
    --color-text: var(--color-text-dark);
    --color-muted: var(--color-muted-dark);
    --color-card-bg: var(--color-card-bg-dark);
    --color-card-border: var(--color-card-border-dark);
    --color-link: var(--color-link-dark);
    --color-link-visited: var(--color-link-visited-dark);
    --color-navbar-bg: var(--color-navbar-bg-dark);
    --color-navbar-text: var(--color-navbar-text-dark);
    --color-navbar-text-hover: var(--color-navbar-text-hover-dark);
    --color-footer-bg: var(--color-footer-bg-dark);
    --color-footer-text: var(--color-footer-text-dark);
    --color-sidebar-hover-bg: var(--color-sidebar-hover-bg-dark);
    --color-headline-card-hover-bg: var(--color-headline-card-hover-bg-dark);
    --color-edit-control-bg: var(--color-edit-control-bg-dark);
    --color-surface-secondary: var(--color-surface-secondary-dark);

    /* Bootstrap 5 Theme Variables */
    --bs-body-color: var(--color-text-dark);
    --bs-body-bg: var(--color-background-dark);
    --bs-card-bg: var(--color-card-bg-dark);
    --bs-card-border-color: var(--color-card-border-dark);
    --bs-card-cap-bg: var(--color-card-bg-dark);
    --bs-secondary-bg: var(--color-surface-secondary-dark);
    --bs-tertiary-bg: #1A2333;
    --bs-emphasis-color: #FFFFFF;
    --bs-secondary-color: var(--color-muted-dark);
    --bs-border-color: var(--color-card-border-dark);
    --bs-border-color-translucent: rgba(255, 255, 255, 0.12);
    --bs-link-color: var(--color-link-dark);
    --bs-link-hover-color: var(--color-link-hover-dark);
    --bs-heading-color: var(--color-secondary-dark);
}

/* ==========================================================================
   BASE & TYPOGRAPHY
   ========================================================================== */
body {
    font-family: var(--font-body);
    background-color: var(--color-background);
    color: var(--color-text);
    line-height: 1.6;
    transition: background-color 0.2s ease, color 0.2s ease;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-headline);
    font-weight: 700;
    color: var(--color-secondary);
    letter-spacing: -0.25px;
}

h1 { font-weight: 900; }

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

/* ==========================================================================
   NAVBAR
   ========================================================================== */
.navbar {
    background-color: var(--color-navbar-bg) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.navbar .navbar-brand {
    font-family: var(--font-headline);
    font-weight: 900;
    font-size: 1.35rem;
    color: var(--color-navbar-text-hover) !important;
}

.navbar .nav-link,
.navbar .dropdown-toggle {
    color: var(--color-navbar-text) !important;
    font-weight: 500;
}

.navbar .nav-link:hover,
.navbar .dropdown-toggle:hover,
.navbar .nav-link.active {
    color: var(--color-navbar-text-hover) !important;
}

/* ==========================================================================
   CARDS & SURFACES
   ========================================================================== */
.card,
.admin-card {
    background-color: var(--color-card-bg) !important;
    border: 1px solid var(--color-card-border) !important;
    color: var(--color-text);
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.06), 0 1px 2px -1px rgba(0, 0, 0, 0.06);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.card-header {
    background-color: var(--color-card-bg) !important;
    border-bottom: 1px solid var(--color-card-border) !important;
    color: var(--color-secondary);
    font-weight: 600;
}

/* Override utility classes that fight theme */
[data-theme="dark"] .bg-white,
[data-bs-theme="dark"] .bg-white {
    background-color: var(--color-card-bg) !important;
    color: var(--color-text) !important;
}

[data-theme="dark"] .bg-light,
[data-bs-theme="dark"] .bg-light {
    background-color: var(--color-surface-secondary) !important;
    color: var(--color-text) !important;
}

[data-theme="dark"] .text-dark,
[data-bs-theme="dark"] .text-dark {
    color: var(--color-text) !important;
}

/* ==========================================================================
   MASTER TABS & SUB-TABS
   ========================================================================== */
.nav-tabs {
    border-bottom: 1px solid var(--color-card-border);
    background-color: var(--color-card-bg);
}

.nav-tabs .nav-link {
    color: var(--color-muted) !important;
    font-weight: 600;
    border: none;
    border-bottom: 3px solid transparent;
    padding: 0.85rem 1.25rem;
    transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.nav-tabs .nav-link:hover {
    color: var(--color-secondary) !important;
    background-color: rgba(125, 125, 125, 0.05);
    border-color: transparent;
}

.nav-tabs .nav-link.active {
    color: var(--color-primary) !important;
    background-color: transparent !important;
    border-bottom: 3px solid var(--color-primary) !important;
}

.nav-pills .nav-link {
    color: var(--color-muted);
    font-weight: 600;
    border-radius: 0.375rem;
}

.nav-pills .nav-link.active {
    background-color: var(--color-primary);
    color: #FFFFFF !important;
}

/* ==========================================================================
   TABLES & DATA LISTS
   ========================================================================== */
.table {
    color: var(--color-text);
    border-color: var(--color-card-border);
}

.table th,
.table thead th,
.table-light th {
    background-color: var(--color-surface-secondary) !important;
    color: var(--color-secondary) !important;
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--color-card-border) !important;
}

.table td {
    color: var(--color-text);
    border-color: var(--color-card-border);
    vertical-align: middle;
}

.table-hover > tbody > tr:hover > * {
    background-color: rgba(125, 125, 125, 0.08) !important;
    color: var(--color-text);
}

.table a {
    color: var(--color-link);
    font-weight: 500;
    text-decoration: none;
}

.table a:hover {
    color: var(--color-primary-hover);
    text-decoration: underline;
}

/* ==========================================================================
   BADGES & STATUS CHIPS (WCAG Compliant Contrast)
   ========================================================================== */
.badge {
    font-weight: 600;
    letter-spacing: 0.25px;
    border-radius: 0.25rem;
}

/* Success Badges */
.badge.bg-success,
.badge.bg-success.bg-opacity-10 {
    background-color: rgba(16, 185, 129, 0.15) !important;
    color: #047857 !important;
    border: 1px solid rgba(16, 185, 129, 0.35) !important;
}
[data-theme="dark"] .badge.bg-success,
[data-theme="dark"] .badge.bg-success.bg-opacity-10,
[data-bs-theme="dark"] .badge.bg-success,
[data-bs-theme="dark"] .badge.bg-success.bg-opacity-10 {
    background-color: rgba(16, 185, 129, 0.2) !important;
    color: #34D399 !important;
    border-color: rgba(52, 211, 153, 0.4) !important;
}

/* Primary / Processing Badges */
.badge.bg-primary,
.badge.bg-primary.bg-opacity-10 {
    background-color: rgba(37, 99, 235, 0.15) !important;
    color: #1D4ED8 !important;
    border: 1px solid rgba(37, 99, 235, 0.35) !important;
}
[data-theme="dark"] .badge.bg-primary,
[data-theme="dark"] .badge.bg-primary.bg-opacity-10,
[data-bs-theme="dark"] .badge.bg-primary,
[data-bs-theme="dark"] .badge.bg-primary.bg-opacity-10 {
    background-color: rgba(59, 130, 246, 0.2) !important;
    color: #60A5FA !important;
    border-color: rgba(96, 165, 250, 0.4) !important;
}

/* Danger / Error Badges */
.badge.bg-danger,
.badge.bg-danger.bg-opacity-10 {
    background-color: rgba(220, 38, 38, 0.15) !important;
    color: #B91C1C !important;
    border: 1px solid rgba(220, 38, 38, 0.35) !important;
}
[data-theme="dark"] .badge.bg-danger,
[data-theme="dark"] .badge.bg-danger.bg-opacity-10,
[data-bs-theme="dark"] .badge.bg-danger,
[data-bs-theme="dark"] .badge.bg-danger.bg-opacity-10 {
    background-color: rgba(239, 68, 68, 0.2) !important;
    color: #F87171 !important;
    border-color: rgba(248, 113, 113, 0.4) !important;
}

/* Warning Badges */
.badge.bg-warning,
.badge.bg-warning.bg-opacity-10 {
    background-color: rgba(217, 119, 6, 0.15) !important;
    color: #B45309 !important;
    border: 1px solid rgba(217, 119, 6, 0.35) !important;
}
[data-theme="dark"] .badge.bg-warning,
[data-theme="dark"] .badge.bg-warning.bg-opacity-10,
[data-bs-theme="dark"] .badge.bg-warning,
[data-bs-theme="dark"] .badge.bg-warning.bg-opacity-10 {
    background-color: rgba(245, 158, 11, 0.2) !important;
    color: #FBBF24 !important;
    border-color: rgba(251, 191, 36, 0.4) !important;
}

/* Info Badges */
.badge.bg-info,
.badge.bg-info.bg-opacity-10 {
    background-color: rgba(14, 165, 233, 0.15) !important;
    color: #0369A1 !important;
    border: 1px solid rgba(14, 165, 233, 0.35) !important;
}
[data-theme="dark"] .badge.bg-info,
[data-theme="dark"] .badge.bg-info.bg-opacity-10,
[data-bs-theme="dark"] .badge.bg-info,
[data-bs-theme="dark"] .badge.bg-info.bg-opacity-10 {
    background-color: rgba(56, 189, 248, 0.2) !important;
    color: #38BDF8 !important;
    border-color: rgba(56, 189, 248, 0.4) !important;
}

/* Secondary / Neutral Badges */
.badge.bg-secondary {
    background-color: var(--color-surface-secondary) !important;
    color: var(--color-muted) !important;
    border: 1px solid var(--color-card-border) !important;
}

/* ==========================================================================
   FORMS & INPUTS
   ========================================================================== */
.form-control,
.form-select,
.input-group-text {
    background-color: var(--color-card-bg);
    border: 1px solid var(--color-card-border);
    color: var(--color-text);
    border-radius: 0.375rem;
}

.form-control:focus,
.form-select:focus {
    background-color: var(--color-card-bg);
    border-color: var(--color-primary);
    color: var(--color-text);
    box-shadow: 0 0 0 3px rgba(193, 18, 31, 0.15);
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] .input-group-text,
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] .input-group-text {
    background-color: #0D1424 !important;
    border-color: var(--color-card-border) !important;
    color: #F8FAFC !important;
}

[data-theme="dark"] .form-control::placeholder,
[data-bs-theme="dark"] .form-control::placeholder {
    color: #64748B;
}

/* ==========================================================================
   ACCORDIONS & LIST GROUPS
   ========================================================================== */
.accordion-item {
    background-color: var(--color-card-bg);
    border-color: var(--color-card-border);
    color: var(--color-text);
}

.accordion-button {
    background-color: var(--color-card-bg);
    color: var(--color-secondary);
    font-weight: 600;
}

.accordion-button:not(.collapsed) {
    background-color: var(--color-surface-secondary);
    color: var(--color-primary);
    box-shadow: none;
}

.list-group-item {
    background-color: var(--color-card-bg);
    border-color: var(--color-card-border);
    color: var(--color-text);
}

/* ==========================================================================
   PROGRESS BARS
   ========================================================================== */
.progress {
    background-color: var(--color-surface-secondary);
    border-radius: 999px;
    overflow: hidden;
}

/* ==========================================================================
   SVG CHARTS & CONTAINERS
   ========================================================================== */
.svg-chart-box {
    background-color: var(--color-surface-secondary);
    border: 1px solid var(--color-card-border);
    border-radius: 0.5rem;
    padding: 1rem;
}

.svg-chart-box text {
    fill: var(--color-text);
}

.svg-chart-box text.text-meta {
    fill: var(--color-muted);
}

/* ==========================================================================
   STORY CARDS & EDIT CONTROLS
   ========================================================================== */
.story-card {
    border: 1px solid var(--color-card-border);
    background-color: var(--color-card-bg);
    margin-bottom: 2rem;
    border-radius: 0.5rem;
}

.story-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

h5.card-title {
    font-size: 2.2rem;
    font-weight: 900;
    margin-bottom: 1rem;
    color: var(--color-secondary);
    line-height: 1.3;
}

h5.card-title a {
    color: inherit !important;
    text-decoration: none;
}

h5.card-title a:hover {
    color: var(--color-primary) !important;
}

.edit-control-block {
    background-color: var(--color-surface-secondary);
    border: 1px solid var(--color-card-border);
    border-radius: 0.375rem;
    padding: 1rem;
    margin-bottom: 1rem;
    color: var(--color-text);
}

/* Pulse animation for active AI processing */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.animate-pulse {
    animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}