/* Common CSS - Used by ALL pages */

/* ============================================================
   Design Tokens — CSS custom properties shared across all layers.
   Svelte component <style> blocks reference these directly via
   var(--token-name) without any imports.
   ============================================================ */
:root {
    /* === Brand / Accent === */
    --color-primary:            #2c3e50; /* dark navy — header bg, headings, primary text */
    --color-primary-light:      #34495e; /* slightly lighter navy — subheadings, th bg */
    --color-accent:             #3498db; /* blue — buttons, links, borders, active states */
    --color-accent-hover:       #2980b9; /* darker blue — hover state for accent elements */

    /* === Status === */
    --color-success:            #27ae60; /* green — download / success actions */
    --color-success-hover:      #229954;
    --color-danger:             #e74c3c; /* red — alerts, badges, hot-stat cards */

    /* === Signal colours (used by table cells and Svelte components) === */
    --color-signal-hot:         #ef4444;
    --color-signal-watch:       #f59e0b; /* amber */
    --color-signal-avoid:       #94a3b8; /* slate */

    /* === Info accent (used by instruction/info boxes) === */
    --color-info-accent:        #2196F3;
    --color-info-accent-dark:   #1976d2;

    /* === Date-filter accent (history page) === */
    --color-date-filter:        #ffc107;
    --color-date-filter-bg:     #fff8e1;
    --color-date-filter-hover:  #e0a800;
    --color-date-filter-text:   #856404;

    /* === Text === */
    --color-text:               #333;
    --color-text-heading:       #2c3e50; /* alias of --color-primary */
    --color-text-muted:         #7f8c8d;
    --color-text-dim:           #607080; /* species-detail muted tones */

    /* === Surfaces === */
    --color-bg:                 #f5f5f5; /* page background */
    --color-surface:            #ffffff;
    --color-surface-light:      #f8f9fa; /* cards, filter panels */
    --color-surface-alt:        #ecf0f1; /* nav hover, secondary button bg */
    --color-info-bg:            #e8f4f8; /* info/callout blocks */
    --color-skeleton-base:      var(--color-surface-light);
    --color-skeleton-accent:    var(--color-surface-alt);
    --color-skeleton-border:    var(--color-border-alt);

    /* === Borders === */
    --color-border:             #dee2e6;
    --color-border-light:       #ddd;
    --color-border-alt:         #e1e8ed;

    /* === Shadows === */
    --shadow-sm:                0 2px 5px rgba(0, 0, 0, 0.05);
    --shadow-md:                0 2px 5px rgba(0, 0, 0, 0.1);
    --shadow-lg:                0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-card-hover:        0 4px 8px rgba(0, 0, 0, 0.1);

    /* === Spacing === */
    --spacing-xs:   5px;
    --spacing-sm:   10px;
    --spacing-md:   15px;
    --spacing-lg:   20px;
    --spacing-xl:   30px;

    /* === Border radius === */
    --radius-sm:    4px;
    --radius-md:    6px;
    --radius-lg:    8px;

    /* === Font sizes === */
    --font-sm:      0.9rem;
    --font-base:    0.95rem;
}

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.6;
    color: var(--color-text);
    background: var(--color-bg);
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
}

/* Utility Classes */
.hidden {
    display: none !important;
}

/* Header */
header {
    background: var(--color-primary);
    color: white;
    padding: 20px 0;
    margin-bottom: 30px;
    box-shadow: var(--shadow-md);
}

header .container {
    padding: 0 20px;
}

header h1 {
    font-size: 2rem;
    margin-bottom: 10px;
}

header p {
    font-size: 1.1rem;
    opacity: 0.9;
}

/* Navigation */
nav {
    background: white;
    padding: 15px 0;
    margin-bottom: 30px;
    box-shadow: var(--shadow-sm);
}

nav ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0 20px;
}

nav a {
    color: var(--color-primary);
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 5px;
    transition: background 0.3s;
    display: block;
}

nav a:hover {
    background: var(--color-surface-alt);
}

nav a.nav__link--active {
    background: var(--color-accent);
    color: white;
}

/* Content Container */
.content {
    background: white;
    padding: 30px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    margin-bottom: 30px;
}

h2 {
    color: var(--color-primary);
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--color-accent);
}

h3 {
    color: var(--color-primary-light);
    margin: 20px 0 15px 0;
}

/* Data Tables */
.data-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    background: white;
    font-size: 0.95rem;
}

.data-table th {
    background: var(--color-primary-light);
    color: white;
    padding: 12px;
    text-align: left;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    position: sticky;
    top: 0;
    z-index: 10;
}

.data-table th:hover {
    background: var(--color-primary);
}

.sort-indicator {
    font-size: 0.8em;
    margin-left: 5px;
    opacity: 0.6;
}

.data-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--color-surface-alt);
}

.data-table tbody tr:hover {
    background: #f8f9fa;
}

.data-table tbody tr:nth-child(even) {
    background: #fafafa;
}

.data-table tbody tr:nth-child(even):hover {
    background: #f0f0f0;
}

.table-mount-shell {
    position: relative;
    min-height: calc(var(--spacing-xl) * 14);
}

.table-mount-root {
    min-height: calc(var(--spacing-xl) * 14);
    opacity: 0;
    transition: opacity 0.26s ease;
}

.table-mount-shell[data-table-ready='true'],
.table-mount-shell[data-table-ready='true'] .table-mount-root {
    min-height: 0;
}

.table-mount-shell[data-table-ready='true'] .table-mount-root {
    opacity: 1;
}

.table-skeleton {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    border: 1px solid var(--color-skeleton-border);
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-skeleton-base) 100%);
    box-shadow: var(--shadow-sm);
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.26s ease;
}

.table-skeleton__header,
.table-skeleton__row {
    display: grid;
    grid-template-columns: repeat(var(--table-skeleton-columns), minmax(0, 1fr));
    gap: var(--spacing-sm);
}

.table-skeleton__body {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    flex: 1;
}

.table-skeleton__cell {
    display: block;
    min-height: var(--spacing-lg);
    border-radius: var(--radius-sm);
    background: linear-gradient(90deg, var(--color-skeleton-base) 0%, var(--color-skeleton-accent) 50%, var(--color-skeleton-base) 100%);
    background-size: 200% 100%;
    animation: table-skeleton-shimmer 1.8s ease-in-out infinite;
}

.table-skeleton__cell--header {
    min-height: calc(var(--spacing-lg) + var(--spacing-xs));
    background: linear-gradient(90deg, var(--color-primary-light) 0%, var(--color-accent) 50%, var(--color-primary-light) 100%);
    opacity: 0.9;
}

.table-skeleton--analysis {
    min-height: calc(var(--spacing-xl) * 14);
}

.table-skeleton--snapshot {
    min-height: calc(var(--spacing-xl) * 12);
}

.table-skeleton--history {
    min-height: calc(var(--spacing-xl) * 16);
}

.table-mount-shell[data-table-ready='true'] .table-skeleton {
    opacity: 0;
}

@keyframes table-skeleton-shimmer {
    0% {
        background-position: 100% 0;
    }

    100% {
        background-position: -100% 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .table-skeleton__cell,
    .table-skeleton__cell--header {
        animation: none;
    }
}

/* Color-coded signal cells */
.data-table .signal-hot {
    background: linear-gradient(135deg, #fff5f5 0%, #ffe5e5 100%);
    border-left: 4px solid var(--color-signal-hot);
    text-align: center;
    font-size: 1.8rem;
    padding: 8px;
    font-weight: bold;
    white-space: nowrap;
}

.data-table .signal-watch {
    background: linear-gradient(135deg, #fffef5 0%, #fff7e5 100%);
    border-left: 4px solid var(--color-signal-watch);
    text-align: center;
    font-size: 1.8rem;
    padding: 8px;
    font-weight: bold;
    white-space: nowrap;
}

.data-table .signal-avoid {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-left: 4px solid var(--color-signal-avoid);
    text-align: center;
    font-size: 1.8rem;
    padding: 8px;
    font-weight: bold;
    white-space: nowrap;
}

/* Info Tip (inline icon + tooltip — used in stat cards and data tables) */
.info-tip {
    display: inline-block;
    margin-left: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    opacity: 0.7;
    position: relative;
    transition: opacity 0.2s;
}

.info-tip:hover,
.info-tip:focus {
    opacity: 1;
    outline: none;
}

.info-tip__text {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--color-primary);
    color: #fff;
    padding: 12px 16px;
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    min-width: 200px;
    max-width: 400px;
    text-align: left;
    text-transform: none;
    letter-spacing: normal;
    line-height: 1.5;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transition: opacity 0.3s, visibility 0.3s;
    pointer-events: none;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.info-tip__text::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--color-primary);
}

.info-tip:hover .info-tip__text,
.info-tip:focus .info-tip__text {
    visibility: visible;
    opacity: 1;
}

@media (hover: none) and (pointer: coarse) {
    .info-tip:active .info-tip__text {
        visibility: visible;
        opacity: 1;
    }
}

@media (max-width: 768px) {
    .info-tip__text {
        width: 240px;
        font-size: 0.8rem;
    }
}

/* Info Box */
.info-box {
    background: var(--color-info-bg);
    border-left: 4px solid var(--color-accent);
    padding: 15px;
    margin: 20px 0;
    border-radius: var(--radius-sm);
}

/* Download Links */
.download-links {
    margin: 20px 0;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
}

.download-links a {
    margin: 5px 10px 5px 0;
}

/* Footer */
footer {
    text-align: center;
    padding: 30px 20px;
    color: var(--color-text-muted);
    margin-top: 50px;
}

footer a {
    color: var(--color-accent);
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
}

/* Advanced Filters Container (used for search filter on all pages) */
.advanced-filters {
    margin-top: 0;
    margin-bottom: 20px;
}

/* Action Buttons Container (Download + Filter buttons side by side) */
.action-buttons {
    display: flex;
    gap: 10px;
    margin: 20px 0 15px 0;
    flex-wrap: wrap;
}

/* Base button style */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--font-base);
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
}

/* Primary button variant (blue) - for standard actions */
.btn--primary {
    background: var(--color-accent);
    color: white;
}

.btn--primary:hover {
    background: var(--color-accent-hover);
}

/* Success/download button variant (green) - for download actions */
.btn--success,
.btn--download {
    background: var(--color-success);
    color: white;
}

.btn--success:hover,
.btn--download:hover {
    background: var(--color-success-hover);
}

/* Secondary button variant (gray outline) - for less prominent actions */
.btn--secondary {
    background: var(--color-surface-light);
    border: 2px solid var(--color-border-light);
    color: #495057;
    padding: 8px 16px; /* Slightly smaller padding for secondary actions */
}

.btn--secondary:hover {
    background: #e9ecef;
    border-color: var(--color-accent);
}

/* Snapshot page date display */
.table-stats-date {
    font-size: 0.85rem;
    color: #666;
}

/* Markdown Tables */
.markdown-table {
    margin: 20px 0 !important;
    font-size: 0.9rem !important;
}

/* General Details Element */
details {
    background: white;
    padding: 15px;
    border-radius: 8px;
    margin: 20px 0;
    border: 1px solid #e1e8ed;
}

details summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--color-primary);
    padding: 10px;
    border-radius: 5px;
    transition: background 0.3s;
}

details summary:hover {
    background: var(--color-surface-light);
}

details[open] summary {
    margin-bottom: 15px;
    border-bottom: 1px solid var(--color-border-alt);
}

details p {
    margin: 15px 0;
}

details ul {
    margin-left: 30px;
    margin-top: 10px;
    margin-bottom: 10px;
}

details hr {
    margin: 30px 0;
    border: none;
    border-top: 2px solid var(--color-border);
}

/* Mobile Responsive Card Layout */
@media (max-width: 768px) {
    /* Hide table structure on mobile */
    .data-table thead {
        display: none;
    }
    
    .data-table tbody {
        display: block;
    }
    
    .data-table tbody tr {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 20px;
        margin-bottom: 20px;
        border: 2px solid var(--color-border-alt);
        border-radius: 12px;
        background: white;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    }
    
    .data-table tbody tr:hover {
        background: white;
        box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    }
    
    .data-table tbody tr:nth-child(even) {
        background: white;
    }
    
    /* Card cells with labels */
    .data-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0;
        border: none;
        font-size: 0.95rem;
    }
    
    /* Add labels from data-label attribute */
    .data-table td::before {
        content: attr(data-label);
        font-weight: 600;
        color: #555;
        margin-right: 15px;
        flex-shrink: 0;
    }
    
    /* Signal/Risk cells - make them prominent in card layout */
    .data-table .signal-hot,
    .data-table .signal-watch,
    .data-table .signal-avoid {
        padding: 12px 16px;
        border-radius: 8px;
        border-left: none;
        border: 2px solid;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .data-table .signal-hot {
        border-color: var(--color-signal-hot);
    }
    
    .data-table .signal-watch {
        border-color: var(--color-signal-watch);
    }
    
    .data-table .signal-avoid {
        border-color: var(--color-signal-avoid);
    }
    
    .data-table .signal-hot::before,
    .data-table .signal-watch::before,
    .data-table .signal-avoid::before {
        font-weight: 700;
        font-size: 1rem;
    }
    
    /* Sparkline cells - keep horizontal layout */
    .data-table td svg {
        margin-left: auto;
    }
    
    /* Species name - make it larger and more prominent */
    .data-table td:first-child {
        font-size: 1.1rem;
        font-weight: 600;
        color: var(--color-primary);
        padding-bottom: 8px;
        border-bottom: 2px solid var(--color-border-alt);
        margin-bottom: 8px;
    }
    
    /* Responsive adjustments for other elements */
    header h1 {
        font-size: 1.5rem;
    }
    
    nav ul {
        flex-direction: column;
    }
}

/* Tablet breakpoint - keep table layout but optimize spacing */
@media (min-width: 769px) and (max-width: 1024px) {
    .data-table {
        font-size: 0.9rem;
    }
    
    .data-table th,
    .data-table td {
        padding: 10px;
    }
}