/**
 * CDRRMO Enhanced Dashboard Layout
 * Modern command center design with responsive grid system
 *
 * @version 1.0.0
 */

/* ============================================================
   CSS VARIABLES - DASHBOARD SPECIFIC
   ============================================================ */

:root {
    /* Dashboard Grid */
    --dashboard-gap: 1rem;
    --dashboard-padding: 1.5rem;
    --dashboard-max-width: 1800px;

    /* Card Styles */
    --card-radius: 12px;
    --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    --card-border: 1px solid rgba(255, 255, 255, 0.1);
    --card-bg: linear-gradient(135deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.95));

    /* Status Colors */
    --status-online: #22c55e;
    --status-warning: #f59e0b;
    --status-danger: #dc2626;
    --status-critical: #7f1d1d;
}

/* ============================================================
   MAIN DASHBOARD CONTAINER
   ============================================================ */

.dashboard-container {
    width: 100%;
    max-width: var(--dashboard-max-width);
    margin: 0 auto;
    padding: var(--dashboard-padding);
    display: flex;
    flex-direction: column;
    gap: var(--dashboard-gap);
}

/* ============================================================
   QUICK STATS BAR
   ============================================================ */

.quick-stats-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
    background: var(--card-bg);
    border-radius: var(--card-radius);
    border: var(--card-border);
    padding: 1rem;
    box-shadow: var(--card-shadow);
}

.quick-stat {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    border-left: 4px solid var(--cdrrmo-accent);
}

.quick-stat.warning { border-left-color: var(--status-warning); }
.quick-stat.danger { border-left-color: var(--status-danger); }
.quick-stat.success { border-left-color: var(--status-online); }

.quick-stat-icon {
    font-size: 1.5rem;
    opacity: 0.9;
}

.quick-stat-content {
    flex: 1;
}

.quick-stat-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.quick-stat-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ============================================================
   MAIN GRID LAYOUT
   ============================================================ */

.dashboard-main-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: auto auto 1fr;
    gap: var(--dashboard-gap);
}

@media (max-width: 1200px) {
    .dashboard-main-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   THREAT LEVEL PANEL
   ============================================================ */

.threat-level-panel {
    background: var(--card-bg);
    border-radius: var(--card-radius);
    border: var(--card-border);
    padding: 1.5rem;
    box-shadow: var(--card-shadow);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 200px;
}

.threat-level-panel.normal {
    border-color: var(--status-online);
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(15, 23, 42, 0.95));
}

.threat-level-panel.elevated {
    border-color: var(--status-warning);
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(15, 23, 42, 0.95));
}

.threat-level-panel.high {
    border-color: var(--status-danger);
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.2), rgba(15, 23, 42, 0.95));
    animation: pulse-border 2s infinite;
}

.threat-level-panel.critical {
    border-color: var(--status-critical);
    background: linear-gradient(135deg, rgba(127, 29, 29, 0.3), rgba(15, 23, 42, 0.95));
    animation: pulse-border 1s infinite;
}

@keyframes pulse-border {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); }
    50% { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); }
}

.threat-level-indicator {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    margin-bottom: 1rem;
    background: rgba(0, 0, 0, 0.3);
    border: 3px solid currentColor;
}

.threat-level-panel.normal .threat-level-indicator { color: var(--status-online); }
.threat-level-panel.elevated .threat-level-indicator { color: var(--status-warning); }
.threat-level-panel.high .threat-level-indicator { color: var(--status-danger); }
.threat-level-panel.critical .threat-level-indicator { color: var(--status-critical); }

.threat-level-text {
    font-size: 1.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.5rem;
}

.threat-level-description {
    font-size: 0.85rem;
    color: var(--text-secondary);
    max-width: 200px;
}

/* ============================================================
   MAP CONTAINER
   ============================================================ */

.map-panel {
    grid-row: span 2;
    background: var(--card-bg);
    border-radius: var(--card-radius);
    border: var(--card-border);
    box-shadow: var(--card-shadow);
    overflow: hidden;
    min-height: 400px;
}

.map-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.map-panel-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.map-layer-toggles {
    display: flex;
    gap: 0.5rem;
}

.layer-toggle {
    padding: 0.35rem 0.75rem;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    color: var(--text-secondary);
    font-size: 0.7rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.layer-toggle.active {
    background: rgba(0, 168, 232, 0.3);
    border-color: var(--cdrrmo-accent);
    color: var(--cdrrmo-accent);
}

.map-panel-content {
    height: calc(100% - 50px);
}

/* ============================================================
   FORECAST CARDS ROW
   ============================================================ */

.forecast-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--dashboard-gap);
}

@media (max-width: 900px) {
    .forecast-row {
        grid-template-columns: 1fr;
    }
}

.forecast-card {
    background: var(--card-bg);
    border-radius: var(--card-radius);
    border: var(--card-border);
    box-shadow: var(--card-shadow);
    padding: 1.25rem;
}

.forecast-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.forecast-card-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.forecast-card-badge {
    padding: 0.2rem 0.5rem;
    background: rgba(0, 168, 232, 0.2);
    border-radius: 4px;
    font-size: 0.65rem;
    color: var(--cdrrmo-accent);
}

.forecast-main {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.forecast-icon {
    font-size: 3rem;
}

.forecast-temp {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}

.forecast-temp-unit {
    font-size: 1.5rem;
    color: var(--text-secondary);
}

.forecast-condition {
    font-size: 1rem;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.forecast-details {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.forecast-detail-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
}

.forecast-detail-icon {
    font-size: 0.9rem;
    opacity: 0.7;
}

.forecast-detail-value {
    color: var(--text-primary);
}

.forecast-detail-label {
    color: var(--text-muted);
    font-size: 0.7rem;
}

/* ============================================================
   HOURLY FORECAST TIMELINE
   ============================================================ */

.hourly-timeline {
    background: var(--card-bg);
    border-radius: var(--card-radius);
    border: var(--card-border);
    box-shadow: var(--card-shadow);
    padding: 1rem;
    overflow: hidden;
}

.hourly-timeline-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.hourly-timeline-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}

.hourly-scroll-container {
    overflow-x: auto;
    padding-bottom: 0.5rem;
}

.hourly-items {
    display: flex;
    gap: 0.5rem;
    min-width: max-content;
}

.hourly-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.75rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    min-width: 70px;
    transition: all 0.2s ease;
}

.hourly-item:hover {
    background: rgba(0, 168, 232, 0.1);
}

.hourly-item.now {
    background: rgba(0, 168, 232, 0.2);
    border: 1px solid var(--cdrrmo-accent);
}

.hourly-item.danger {
    background: rgba(220, 38, 38, 0.15);
    border: 1px solid var(--status-danger);
}

.hourly-time {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

.hourly-icon {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.hourly-temp {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}

.hourly-rain {
    font-size: 0.65rem;
    color: var(--cdrrmo-accent);
    margin-top: 0.25rem;
}

/* ============================================================
   HAZARD STATUS GRID
   ============================================================ */

.hazard-status-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--dashboard-gap);
}

@media (max-width: 1200px) {
    .hazard-status-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .hazard-status-grid {
        grid-template-columns: 1fr;
    }
}

.hazard-card {
    background: var(--card-bg);
    border-radius: var(--card-radius);
    border: var(--card-border);
    box-shadow: var(--card-shadow);
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: all 0.2s ease;
}

.hazard-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.4);
}

.hazard-card.active {
    border-color: var(--status-warning);
}

.hazard-card.danger {
    border-color: var(--status-danger);
    animation: pulse-border 2s infinite;
}

.hazard-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    background: rgba(0, 0, 0, 0.3);
}

.hazard-card.typhoon .hazard-icon { background: rgba(234, 179, 8, 0.2); }
.hazard-card.earthquake .hazard-icon { background: rgba(249, 115, 22, 0.2); }
.hazard-card.flood .hazard-icon { background: rgba(59, 130, 246, 0.2); }
.hazard-card.volcano .hazard-icon { background: rgba(220, 38, 38, 0.2); }

.hazard-content {
    flex: 1;
}

.hazard-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.hazard-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}

.hazard-subtitle {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

.hazard-status-badge {
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 600;
}

.hazard-status-badge.normal {
    background: rgba(34, 197, 94, 0.2);
    color: var(--status-online);
}

.hazard-status-badge.warning {
    background: rgba(245, 158, 11, 0.2);
    color: var(--status-warning);
}

.hazard-status-badge.danger {
    background: rgba(220, 38, 38, 0.2);
    color: var(--status-danger);
}

/* ============================================================
   QUICK ACTIONS PANEL
   ============================================================ */

.quick-actions-panel {
    background: linear-gradient(135deg, rgba(0, 168, 232, 0.15), rgba(15, 23, 42, 0.95));
    border-radius: var(--card-radius);
    border: 1px solid rgba(0, 168, 232, 0.3);
    box-shadow: var(--card-shadow);
    padding: 1rem;
}

.quick-actions-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.75rem;
}

.quick-actions-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.quick-action-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.quick-action-btn:hover {
    background: rgba(0, 168, 232, 0.2);
    border-color: var(--cdrrmo-accent);
    transform: translateY(-1px);
}

.quick-action-btn.emergency {
    background: rgba(220, 38, 38, 0.2);
    border-color: rgba(220, 38, 38, 0.3);
    color: #fca5a5;
}

.quick-action-btn.emergency:hover {
    background: rgba(220, 38, 38, 0.3);
}

.quick-action-icon {
    font-size: 1.1rem;
}

/* ============================================================
   AI ANALYSIS SECTION
   ============================================================ */

.ai-analysis-section {
    background: var(--card-bg);
    border-radius: var(--card-radius);
    border: var(--card-border);
    box-shadow: var(--card-shadow);
    overflow: hidden;
}

.ai-analysis-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: linear-gradient(90deg, rgba(138, 43, 226, 0.15), transparent);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.ai-analysis-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
}

.ai-badge {
    padding: 0.2rem 0.5rem;
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
    border-radius: 4px;
    font-size: 0.6rem;
    font-weight: 700;
    color: white;
}

.ai-analysis-content {
    padding: 1.25rem;
}

.ai-summary {
    font-size: 0.9rem;
    color: var(--text-primary);
    line-height: 1.7;
    margin-bottom: 1rem;
}

.ai-confidence {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.confidence-bar {
    flex: 1;
    max-width: 150px;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
}

.confidence-fill {
    height: 100%;
    background: linear-gradient(90deg, #22c55e, #4ade80);
    border-radius: 3px;
    transition: width 0.5s ease;
}

/* ============================================================
   COLLAPSIBLE SECTIONS
   ============================================================ */

.collapsible-section {
    background: var(--card-bg);
    border-radius: var(--card-radius);
    border: var(--card-border);
    box-shadow: var(--card-shadow);
    overflow: hidden;
}

.collapsible-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    cursor: pointer;
    transition: background 0.2s ease;
}

.collapsible-header:hover {
    background: rgba(0, 168, 232, 0.05);
}

.collapsible-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
}

.collapsible-toggle {
    font-size: 1.2rem;
    color: var(--text-muted);
    transition: transform 0.3s ease;
}

.collapsible-section.open .collapsible-toggle {
    transform: rotate(180deg);
}

.collapsible-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.collapsible-section.open .collapsible-content {
    max-height: 2000px;
}

.collapsible-inner {
    padding: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* ============================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================ */

@media (max-width: 768px) {
    .dashboard-container {
        padding: 1rem;
    }

    .quick-stats-bar {
        grid-template-columns: repeat(2, 1fr);
    }

    .threat-level-panel {
        min-height: 150px;
    }

    .threat-level-indicator {
        width: 70px;
        height: 70px;
        font-size: 1.8rem;
    }

    .forecast-main {
        flex-direction: column;
        text-align: center;
    }

    .quick-actions-grid {
        flex-direction: column;
    }

    .quick-action-btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .quick-stats-bar {
        grid-template-columns: 1fr;
    }

    .forecast-details {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   PRINT STYLES
   ============================================================ */

@media print {
    .dashboard-container {
        background: white;
        color: black;
    }

    .quick-action-btn,
    .collapsible-toggle,
    .layer-toggle {
        display: none;
    }

    .hazard-card,
    .forecast-card,
    .threat-level-panel {
        background: #f8f9fa;
        border: 1px solid #ddd;
        box-shadow: none;
    }
}