/* Basic Reset & Defaults (Keep as before) */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; line-height: 1.6; scroll-behavior: smooth; }
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    background-color: #f0f2f5;
    color: #333;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Header (Keep as before) */
.site-header {
    background-color: #ffffff;
    color: #333;
    padding: 0.8rem 2rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 100;
}
.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
}
.site-header h1 { font-size: 1.6rem; font-weight: 600; color: #3d9be9; }
.user-info span { font-weight: 500; }

/* Main Dashboard Area */

#home {
    background-color: transparent; /* Home panel has no background itself */
    box-shadow: none;
    padding: 0; /* Remove padding, grid will handle spacing */
}

.home-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 1.5rem;
}

.home-module {
    background-color: #ffffff;
    border-radius: 8px;
    padding: 1.25rem;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.07);
    display: flex;
    flex-direction: column;
}

.home-module h3 {
    font-size: 1.15rem;
    color: #343a40;
    margin-bottom: 1rem;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid #e9ecef;
}

/* Quick Access Module */
.quick-access-module {
    /* Special emphasis maybe? */
}

.quick-access-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 1rem;
    flex-grow: 1; /* Allow grid to fill module height */
    align-content: start; /* Align items to the start */
}

.quick-access-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem 0.5rem;
    border-radius: 6px;
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    text-decoration: none;
    color: #343a40;
    text-align: center;
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    min-height: 80px;
}

.quick-access-item:hover {
    background-color: #e9ecef;
    transform: translateY(-3px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
}

.qa-icon {
    font-size: 2rem;
    line-height: 1;
    margin-bottom: 0.5rem;
}

.qa-label {
    font-size: 0.85rem;
    font-weight: 500;
}

/* News Module */
.news-module {
    grid-row: span 2; /* Make news taller by default if possible */
    min-height: 300px; /* Ensure minimum height */
}

.news-list {
    list-style: none;
    padding: 0;
    margin: 0;
    overflow-y: auto; /* Allow scrolling if content exceeds height */
    flex-grow: 1;
    max-height: 400px; /* Limit height */
}

.news-list li {
    padding: 0.75rem 0;
    border-bottom: 1px solid #f1f1f1;
}
.news-list li:last-child {
    border-bottom: none;
}

.news-title {
    font-weight: 600;
    color: #0056b3; /* Link-like color */
    margin-bottom: 0.2rem;
    font-size: 0.95rem;
}

.news-meta {
    font-size: 0.75rem;
    color: #6c757d;
    margin-bottom: 0.3rem;
}

.news-summary {
    font-size: 0.85rem;
    color: #495057;
    line-height: 1.4;
}

.view-all-link {
    display: block;
    text-align: right;
    margin-top: 1rem;
    font-size: 0.85rem;
    color: #0056b3;
    text-decoration: none;
}
.view-all-link:hover {
    text-decoration: underline;
}

/* Status Overview Module */
.status-overview-module {
    /* Adjust layout */
}

.status-section {
    margin-bottom: 1.5rem;
}
.status-section:last-child {
    margin-bottom: 0;
}

.status-section h4 {
    font-size: 0.9rem;
    font-weight: 600;
    color: #495057;
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ticket-status {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #f8f9fa;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    border: 1px solid #e9ecef;
}

.stat-value {
    font-size: 1.2rem;
    font-weight: 700;
    color: #3d9be9;
    margin-bottom: 0.1rem;
}
.stat-item span:not(.stat-value) { /* Label */
    font-size: 0.75rem;
    color: #6c757d;
    text-transform: uppercase;
}

/* Specific status colors for values */
.stat-value.status-ok { color: #28a745; }
.stat-value.status-warn { color: #ffc107; }
.stat-value.status-error { color: #dc3545; }


.platform-status-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.platform-status-list li {
    display: flex;
    align-items: center;
    font-size: 0.9rem;
    padding: 0.3rem 0;
}
.platform-status-list .status-dot {
    margin-right: 0.75rem; /* More space for platform list dots */
    flex-shrink: 0; /* Prevent dot from shrinking */
}


/* Emergency Alerts Module */
.alerts-module {
    background-color: #fff3cd; /* Light yellow default */
    border-left: 5px solid #ffeeba; /* Default warning color */
}
.alerts-module h3 {
    color: #856404; /* Dark yellow text */
    border-bottom-color: rgba(0,0,0,0.1);
}

.alert-content {
    /* Styles for individual alerts */
}

.alert-item {
    padding: 0.75rem 1rem;
    border-radius: 4px;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    border: 1px solid transparent;
}
.alert-item:last-child {
    margin-bottom: 0;
}

.alert-item strong {
    font-weight: 600;
}

/* Alert Colors */
.alert-item.alert-info {
    color: #0c5460;
    background-color: #d1ecf1;
    border-color: #bee5eb;
}
.alerts-module.info-state { /* Optional: Change module border based on content */
    background-color: #d1ecf1;
    border-left-color: #bee5eb;
}
.alerts-module.info-state h3 {
    color: #0c5460;
}


.alert-item.alert-warning { /* Matches module default */
    color: #856404;
    background-color: #fff9e1; /* Slightly lighter than module */
    border-color: #ffeeba;
}
/* No module state needed for default warning */

.alert-item.alert-danger,
.alert-item.alert-error {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}
.alerts-module.danger-state {
    background-color: #f8d7da;
    border-left-color: #f5c6cb;
}
.alerts-module.danger-state h3 {
    color: #721c24;
}

.dashboard-container {
    flex-grow: 1;
    padding: 1.5rem;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
    /* Remove grid layout from container */
}

/* Tab Navigation */
.tab-nav {
    display: flex;
    flex-wrap: wrap; /* Allow tabs to wrap on smaller screens */
    gap: 0.5rem; /* Space between tabs */
    margin-bottom: 1.5rem;
    border-bottom: 2px solid #dee2e6;
}

.tab-link {
    padding: 0.75rem 1.25rem;
    border: none;
    background-color: transparent;
    color: #495057;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    border-bottom: 3px solid transparent; 
    transition: color 0.2s ease, border-color 0.2s ease;
    margin-bottom: -2px;
    padding: 0.75rem 1rem;
}

.tab-link:hover {
    color: #0056b3;
}

.tab-link.active {
    color: #3d9be9; /* Theme color */
    border-bottom-color: #3d9be9; /* Theme color */
    font-weight: 600;
}

/* Tab Content Panels */
.tab-panel {
    display: none; /* Hide panels by default */
    animation: fadeIn 0.5s ease-in-out; /* Add fade-in effect */
}

.tab-panel.active {
    display: block; /* Show active panel */
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}


/* Dashboard Sections (Now Tab Panels) */
.dashboard-section {
    background-color: #ffffff;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.07);
}

.dashboard-section h2 {
    font-size: 1.5rem;
    color: #2b689c;
    margin: 0 0 1.5rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 3px solid #3d9be9;
    display: inline-block;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.subsection-title {
    font-size: 1.1rem;
    color: #495057;
    margin-top: 2rem;
    margin-bottom: 1rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid #e0e0e0;
}

/* Status Indicators (Keep as before) */
.status-indicators { display: flex; gap: 1rem; margin-top: 0.5rem; }
.status-item { display: flex; align-items: center; font-size: 0.85rem; color: #555; }
.status-dot { width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; display: inline-block; animation: pulse 2s infinite ease-in-out; }
.status-ok { background-color: #28a745; animation-delay: 0s; }
.status-warn { background-color: #ffc107; animation-delay: 0.5s; }
.status-error { background-color: #dc3545; animation-delay: 1s; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }


/* Detailed Health Checks (Monitoring Tab) */
.health-checks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem; /* Space before cards */
    border-top: 1px solid #e9ecef;
    padding-top: 1.5rem;
    margin-top: 1rem;
}

.health-check-item {
    background-color: #f8f9fa;
    border-radius: 6px;
    padding: 0.75rem 1rem;
    border: 1px solid #e9ecef;
    display: flex;
    align-items: center;
    gap: 0.75rem; /* Space between elements */
    font-size: 0.9rem;
}

.health-icon {
    font-size: 1.5rem;
    line-height: 1;
    color: #495057;
}

.health-label {
    flex-grow: 1; /* Take up remaining space */
    font-weight: 500;
    color: #343a40;
}

.health-bar {
    width: 80px; /* Fixed width for bars */
    height: 8px;
    background-color: #e9ecef; /* Bar background */
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.health-bar .bar-fill {
    height: 100%;
    width: 100%; /* Default to full */
    border-radius: 4px;
    /* Color is set by status class */
    position: absolute;
    left: 0; top: 0;
    /* Example: override width with JS later if needed */
}

/* Bar Colors */
.health-bar.status-ok .bar-fill { background-color: #28a745; }
.health-bar.status-warn .bar-fill { background-color: #ffc107; }
.health-bar.status-error .bar-fill { background-color: #dc3545; }

/* Bar Fill Levels (Example static values) */
.health-bar.status-ok[style*="--fill-level"] .bar-fill, /* Use custom property if set by JS */
.health-bar.status-ok .bar-fill { width: 100%; } /* Default OK = full */

.health-bar.status-warn[style*="--fill-level"] .bar-fill { width: var(--fill-level, 75%); }
.health-bar.status-warn .bar-fill { width: 75%; } /* Default Warn = 75% */

.health-bar.status-error[style*="--fill-level"] .bar-fill { width: var(--fill-level, 100%); }
.health-bar.status-error .bar-fill { width: 100%; } /* Default Error = full (indicates max issue) */


.health-value {
    font-weight: 600;
    color: #495057;
    min-width: 40px; /* Ensure space for value */
    text-align: right;
}
/* Color value based on status */
.health-check-item .status-ok + .health-value { color: #28a745; }
.health-check-item .status-warn + .health-value { color: #ff9800; } /* Darker warning */
.health-check-item .status-error + .health-value { color: #dc3545; }

/* Card Grid Layout (Keep as before, but adjust columns if needed) */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 1rem;
}

/* Card Styling (Keep as before) */
.card { background-color: #ffffff; border: 1px solid #e0e0e0; border-radius: 6px; padding: 1rem 0.75rem; text-align: center; text-decoration: none; color: #333; transition: transform 0.2s ease-out, box-shadow 0.2s ease-out, border-color 0.2s ease-out; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100px; overflow: hidden; }
.card:hover { transform: translateY(-4px); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08); border-color: #3d9be9; }
.card-icon { font-size: 2rem; margin-bottom: 0.5rem; line-height: 1; }
.card-title { font-weight: 500; font-size: 0.9rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; min-height: calc(0.9rem * 1.3 * 2); }

/* Tech Section Specific Styling (Keep as before) */
.tech-section { background-color: #eef3f8; border-left: 4px solid #2b689c; }
.tech-section h2 { color: #1a4a73; border-bottom-color: #2b689c; }

/* Footer (Keep as before) */
.site-footer { background-color: #343a40; color: #f8f9fa; text-align: center; padding: 1rem; font-size: 0.85rem; margin-top: 2rem; }
.site-footer p { margin-bottom: 0.25rem; }

/* Responsive Adjustments */
@media (max-width: 1200px) {
    .home-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }
}

@media (max-width: 992px) {
    /* Adjust home grid further if needed */
    .news-module { grid-row: auto; } /* Stack news normally */
}

@media (max-width: 768px) {
    /* ... other 768px styles ... */
    .home-grid {
        grid-template-columns: 1fr; /* Stack all home modules */
        gap: 1rem;
    }
    .home-module { padding: 1rem; }
    .quick-access-grid { grid-template-columns: repeat(3, 1fr); } /* 3 QA items per row */
    .qa-icon { font-size: 1.8rem; }
    .qa-label { font-size: 0.8rem; }
    .ticket-status { gap: 1rem; justify-content: space-around; }
    .stat-item { padding: 0.4rem 0.8rem; }
    .stat-value { font-size: 1.1rem; }
}

@media (max-width: 480px) {
    /* ... other 480px styles ... */
    .tab-link { font-size: 0.85rem; padding: 0.6rem 0.5rem; }
    .tab-nav button:first-child { padding-left: 0.8rem; } /* More space for home icon */
    .quick-access-grid { grid-template-columns: repeat(2, 1fr); } /* 2 QA items per row */
}