/* CSS for the SAGIP dashboard. 
    This file contains all the custom styling and animations. 
    Organized for better readability and maintenance. 
*/ 

/* --- 1. Global/Base Styles --- */ 
*, 
*::before, 
*::after { 
    box-sizing: border-box; 
} 

:root { 
    --sagip-dark: #1A202C; /* A custom dark shade */ 
    --sagip-black: #0f172a; /* A custom even darker shade */ 
    --sagip-gray: #1E293B; /* Slate-800 for cards */ 
    --sagip-darker-blue: #020617; 
    --sagip-accent: #38bdf8; /* Sky-500 accent color */ 
	--sagip-light-gray: #A0AEC0; 
    --good-color: #2ECC71;      /* A nice green */
    --moderate-color: #F39C12;  /* A nice orange */
    --dangerous-color: #C0392B; /* A nice red */
    --header-gradient: linear-gradient(to bottom, #8e9eab, #eef2f3); 
    /* NEW: A CSS variable for the beacon pulse color */
    --pulse-color: var(--good-color);
} 

body { 
    font-family: 'Inter', sans-serif; 
    background: #f1f5f9; 
    color: #1A202C; 
    margin: 0; 
} 

/* --- 2. Layouts and Containers --- */ 
.main-dashboard-grid { 
    /* Use auto-fit with minmax to create a fluid, scaling grid */
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
    gap: 2rem; 
    padding: 2rem 1.5rem; 
    max-width: 1200px; 
    margin: 0 auto; 
} 

.header-content-wrapper { 
    width: 100%; 
    max-width: 1200px; 
    margin: 0 auto; 
    padding: 0 1.5rem; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    text-align: center; 
} 

.header-container { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    text-align: center; 
    background: var(--header-gradient) !important; 
    color: #fff; 
    padding: 2rem 0; 
    border-bottom: 1px solid var(--border); 
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); 
    animation: fadeInDown 0.5s ease-out both; 
    width: 100%; 
    position: relative; 
    z-index: 10; 
} 

.logo-container { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    text-align: center; 
} 

.BSU-container { 
    display: flex; 
    justify-content: center; 
    gap: 1rem; 
    margin-top: 1rem; 
} 

.beacon-center {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2rem; /* Add a top margin to move the container lower */
} 

/* --- 3. Component Styles --- */ 
.card {
    background-color: var(--sagip-gray);
    padding: 1rem;
    border-radius: 1.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* THIS IS THE FIX */
    text-align: center;
    color: #E2E8F0;
}

.card:hover { 
    transform: translateY(-5px); 
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.04); 
} 

.average-ppm-card { 

    /* Ang average ppm card ay palaging sasakop sa buong lapad ng grid */
    grid-column: 1 / -1; 
} 
.co2-ppm-card {
    grid-column: 1 / -1;
}
.card-value.large-value { 
    font-size: clamp(1rem, 7vw, 1.5rem); 
} 

.unit { 
    font-size: 1rem; 
    font-weight: 500; 
    color: #9CA3AF; 
} 

.unit.small-unit { 
    font-size: 1.25rem; 
    font-weight: 400; 
    color: #9CA3AF; 
} 

.status-text { 
    font-size: 1rem; 
    font-weight: 500; 
    color: #E2E8F0 !important;
    transition: color 0.3s ease; 
} 

.linear-bar-container {
    width: 100%;
    padding: 3rem;
    margin-bottom: 2rem;
}

.linear-bar-bg { 
    width: 100%; 
    background-color: #4A5568 !important; 
    border-radius: 9999px; 
    height: 1.5rem; 
    overflow: hidden; 
} 

.linear-bar-fill { 
    height: 100%; 
    border-radius: 9999px; 
    transition: width 0.5s ease-in-out; 
} 

/* Image box styles */ 
.logo-box img, 
.BSU-BOX img { 
    width: 100%; 
    height: auto; 
    display: block; 
    object-fit: contain; 
    transition: transform var(--transition-speed); 
} 

.BSU-BOX { 
    width: 80px; 
    aspect-ratio: 1/1; 
    background: white; 
    border-radius: 12px; 
    padding: 0.5rem; 
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    overflow: hidden; 
    transition: transform var(--transition-speed); 
} 

#datetime-container { 
    display: inline-flex; 
    gap: 0.5rem; /* Binawasan ang gap */ 
    background: white; 
    /* Ginamitan ng clamp() para mag-scale ang padding */ 
    padding: clamp(0.2rem, 1vw, 0.4rem) clamp(0.5rem, 2vw, 1.2rem); 
    border-radius: 999px; 
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2); 
	border: 1px solid #e5e7eb; 
    margin-bottom: 1rem; 
} 

#datetime-container span { 
    font-weight: 500; 
    color: black; 
    font-family: monospace; 
    font-size: clamp(0.2rem, 2.5vw, 1rem); 
} 

/* Tab styles */ 
.tab-container { 
    display: grid; 
    grid-auto-flow: column; 
    grid-auto-columns: minmax(50px, 1fr); 
    width: 100%; 
    max-width: 100vw; 
    overflow-x: auto; 
    -webkit-overflow-scrolling: touch; 
    padding-bottom: 0.25rem; 
    background: var(--header-gradient); 
} 

.tab-container .tab-button { 
    padding: 1rem; 
    border: none; 
    color: black; 
    font-size: clamp(0.5rem, 2.5vw, 1rem); 
    cursor: pointer; 
    background: var(--header-gradient); 
    background-size: 200% auto; 
    transition: filter var(--transition-speed); 
    position: relative; 
} 

.tab-container .tab-button:hover { 
    filter: brightness(1.2); 
} 

.tab-container .tab-button:focus { 
    outline: 2px solid var(--sagip-accent); 
    outline-offset: 2px; 
} 

.tab-container .tab-button.active::after { 
    content: ""; 
    position: absolute; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    height: 4px; 
    background-color: #FF9800; 
    z-index: 1; 
} 

.tab-content { 
    display: none; 
    padding: 1rem; 
} 

.tab-content.active { 
    display: grid; 
} 
.tab-button:focus,
.card-menu-button:focus,
.menu-item:focus,
.area-dropdown:focus,
.back-button:focus {
    outline: 3px solid var(--sagip-accent);
    outline-offset: 2px;
}
/* Menu styles for each card */
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 0.25rem; /* Reduced to a much smaller value */
}

.card-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #F7FAFC !important;
}

.card-menu-button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    color: #9CA3AF; /* This sets the color */
    transition: color 0.2s ease-in-out;
}
.card-menu-button svg {
    fill: currentColor; 
    width: 24px;
    height: 24px;
}
.card-menu-button:hover {
    color: #E2E8F0;
}

.menu-dropdown-container {
    position: relative;
}

.menu-dropdown-container .menu-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    transform: translateY(10px);
    background-color: #2D3748; /* Darker background for contrast */
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    z-index: 10;
    min-width: 150px;
    padding: 0.5rem 0;
}

.menu-dropdown-container .menu-dropdown.hidden {
    display: none;
}

.menu-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.75rem 1rem;
    color: #E2E8F0;
    background-color: transparent;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
}

.menu-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
}
/* Gauge styles */ 
.gauge-container { 
    width: clamp(150px, 40vw, 200px); 
    height: clamp(150px, 40vw, 200px); 
    position: relative; 
    margin: auto; 
    margin-bottom: 1rem; 
} 

.gauge-svg { 
    width: 100%; 
    height: 100%; 
} 

.gauge-ring { 
    fill: none; 
    stroke-width: 15; 
    transform: rotate(-90deg); 
    transform-origin: 50% 50%; 
} 

.gauge-bg { 
    stroke: #4B5563; 
} 

.gauge-fill { 
    transition: stroke-dashoffset 0.5s ease-in-out; 
    stroke-linecap: round; 
} 

.gauge-text { 
    font-size: 3rem; 
    font-weight: 700; 
    fill: #F7FAFC !important;
} 

.gauge-unit { 
    position: absolute; 
    bottom: 1.5rem; 
    left: 50%; 
    transform: translateX(-50%); 
    width: 100%; 
    text-align: center; 
    color: #E2E8F0 !important;
    font-weight: 500; 
} 

/* Wind speed gauge styles */ 
.speed-gauge-container { 
    width: clamp(150px, 40vw, 200px); 
    height: clamp(80px, 20vw, 110px); 
    position: relative; 
    margin: auto; 
    display: flex; 
    align-items: flex-end; 
    justify-content: center; 
    overflow: visible; 
    margin-bottom: 0.5rem; 
} 

.speed-gauge-svg { 
    width: 100%; 
    height: 100%; 
} 

.speed-gauge-arc {
    fill: none;
    stroke-width: 15;
    transform: rotate(90); /* This should match your arc length */
    transform-origin: 50% 100%;
    stroke-linecap: round;
}

.speed-gauge-bg { 
    stroke: #4B5563; 
} 

.speed-gauge-fill { 
    stroke: var(--sagip-accent); 
    transition: stroke-dashoffset 0.5s ease-in-out; 
    stroke-linecap: round; 
} 

.speed-needle { 
    width: 4px; 
    height: clamp(70px, 15vw, 90px); 
    background-color: var(--sagip-accent); 
    position: absolute; 
    left: 50%; 
    bottom: 0; 
    transform-origin: 50% 100%; 
    transform: translateX(-50%) rotate(90deg); 
    transition: transform 0.5s ease-in-out; 
    border-radius: 9999px; 
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.18); 
    pointer-events: none; 
    margin: 0; 
} 

/* Wind direction compass styles */ 
.compass { 
    width: clamp(150px, 40vw, 180px); 
    height: clamp(150px, 40vw, 180px); 
    border-radius: 50%; 
    position: relative; 
     border-color: #4A5568 !important;
    background: #1F2937; 
    display: grid; 
    place-items: center; 
    overflow: visible; 
    margin-top: 4rem; 
} 

.compass::after { 
    content: ""; 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    width: 6px; 
    height: 6px; 
    background: rgba(255, 255, 255, 0.08); 
    border-radius: 50%; 
    transform: translate(-50%, -50%); 
    pointer-events: none; 
} 

.compass-arrow { 
    width: 18px; 
    height: calc(50% - 12px); 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    transform-origin: 50% 50%; 
    transform: translate(-50%, -50%) rotate(0deg); 
    transition: transform 0.5s ease-in-out; 
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%); 
    background-color: var(--sagip-accent); 
    box-shadow: 0 0 8px rgba(56, 189, 248, 0.18); 
    pointer-events: none; 
    margin: 0; 
} 

.compass-rose { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    pointer-events: none; 
    font-size: clamp(0.7rem, 2vw, 1.05rem); 
    font-weight: 700; 
} 

.compass-rose span { 
    position: absolute; 
    color: #9CA3AF; 
    user-select: none; 
    line-height: 1; 
    transform-origin: center; 
} 

.compass-rose .north { 
    top: -10px; 
    left: 50%; 
    transform: translateX(-50%); 
    color: var(--sagip-accent); 
} 

.compass-rose .east { 
    right: -6px; 
    top: 50%; 
    transform: translateY(-50%); 
    color: var(--sagip-accent); 
} 

.compass-rose .south { 
    bottom: -10px; 
    left: 50%; 
    transform: translateX(-50%); 
    color: var(--sagip-accent); 
} 

.compass-rose .west { 
    left: -9px; 
    top: 50%; 
    transform: translateY(-50%); 
    color: var(--sagip-accent); 
} 

.compass-rose .northeast { 
    top: 25px; 
    right: 25px; 
    transform: translate(50%, -50%); 
} 

.compass-rose .southeast { 
    bottom: 25px; 
    right: 25px; 
    transform: translate(50%, 50%); 
} 

.compass-rose .southwest { 
    bottom: 25px; 
    left: 25px; 
    transform: translate(-50%, 50%); 
} 

.compass-rose .northwest { 
    top: 25px; 
    left: 25px; 
    transform: translate(-50%, -50%); 
} 

/* Beacon and Status styles */ 
#beacon-light {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    animation: pulse 2s infinite;
}
.social-media {
    margin-top: 1.5rem;
}

.social-link {
    display: block;
    margin-bottom: 0.5rem;
    color: #fff;
    text-decoration: none;
    font-size: 1.1rem;
    transition: color 0.3s;
}

.social-link:hover {
    color: #007BFF; /* Or a color that matches your theme */
}

.social-link i {
    margin-right: 8px;
    width: 20px;
    text-align: center;
}
#status-text { 
    font-size: 1.25rem; 
    font-weight: 600; 
    color: var(--good-color); 
    transition: color 0.5s ease; 
    margin-left: 0.5rem; 
} 
/* Now, each class is responsible for setting the correct color and shadow */
.status-good {
    background-color: var(--good-color);
    box-shadow: 0 0 10px 4px color-mix(in srgb, var(--good-color) 30%, transparent);
    --pulse-color: var(--good-color);
}

.status-moderate {
    background-color: var(--moderate-color);
    box-shadow: 0 0 10px 4px color-mix(in srgb, var(--moderate-color) 30%, transparent);
    --pulse-color: var(--moderate-color);
}

.status-dangerous {
    background-color: var(--dangerous-color);
    box-shadow: 0 0 10px 4px color-mix(in srgb, var(--dangerous-color) 30%, transparent);
    --pulse-color: var(--dangerous-color);
}
/* --- 4. Keyframes/Animations --- */ 
@keyframes pulse { 
    0% { 
        transform: scale(0.8); 
        box-shadow: 0 0 10px 4px color-mix(in srgb, var(--pulse-color) 30%, transparent); 
    } 
    50% { 
        transform: scale(1.1); 
        box-shadow: 0 0 20px 8px color-mix(in srgb, var(--pulse-color) 70%, transparent); 
    } 
    100% { 
        transform: scale(0.8); 
        box-shadow: 0 0 10px 4px color-mix(in srgb, var(--pulse-color) 30%, transparent); 
    } 
} 
/* Last event card styling */
.last-event {
  font-family: inherit;
  color: var(--sagip-light-gray);
  font-size: 0.95rem;
  margin-top: 8px;
  line-height: 1.25;
}

/* header with prefix and badge */
.last-event-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 4px;
}
.last-event-header .last-prefix {
  font-weight: 600;
  color: var(--sagip-muted) /* optionally */;
  font-size: 0.95rem;
}
.last-status-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: capitalize;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
    /* Ensure sufficient contrast */
    color: #ffffff !important; /* Force white text for better contrast */
    border: 1px solid rgba(255,255,255,0.3); /* Add border for extra definition */
}
.last-status-badge[style*="background-color:var(--good-color)"],
.last-status-badge[style*="background-color:#2ECC71"] {
    background-color: #27ae60 !important; /* Darker green for better contrast */
}

.last-status-badge[style*="background-color:var(--moderate-color)"],
.last-status-badge[style*="background-color:#F39C12"] {
    background-color: #e67e22 !important; /* Darker orange for better contrast */
    color: #ffffff !important;
}

.last-status-badge[style*="background-color:var(--dangerous-color)"],
.last-status-badge[style*="background-color:#C0392B"] {
    background-color: #c0392b !important; /* Ensure red is consistent */
    color: #ffffff !important;
}
/* date/time row */
.last-event-datetime {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
  align-items: center;
  margin-bottom: 4px;
  font-size: 0.92rem;
}
.last-event-datetime .last-prefix,
.last-event-datetime .time-prefix {
  color: var(--sagip-muted);
  font-weight: 600;
}

/* value row */
.last-event-value {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  font-size: 1rem;
}
.last-event-value .last-prefix {
  color: var(--sagip-muted);
  font-weight: 600;
}
.last-event-value .last-value {
  font-weight: 700;
  color: var(--sagip-light);
}

/* small unit */
.unit.small-unit {
  font-size: 0.85em;
  color: var(--sagip-muted);
  margin-left: 6px;
}
/* ======= Highcharts Data Table - Pure CSS Styling (drop-in) ======= */
/* Place this at the *end* of your CSS so it overrides other rules */

#chart-container, #chart-container > div, .highcharts-container {
  overflow: visible !important; /* avoid clipping */
}

/* Ensure high specificity so existing rules don't win */
div.highcharts-data-table,
div.highcharts-data-table.styled-hc-table,
.highcharts-data-table,
.highcharts-data-table table {
  display: block !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  margin: 18px auto !important;
  max-width: 920px !important;
  width: calc(100% - 24px) !important;
  font-family: Inter, "Helvetica Neue", Arial, sans-serif !important;
  color: #111 !important;
  background: transparent !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

/* Card wrapper look (applies even if wrapper class not set) */
div.highcharts-data-table,
.highcharts-data-table {
  padding: 10px 12px !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,255,0.96)) !important;
  box-shadow: 0 8px 24px rgba(12,22,32,0.06) !important;
  border: 1px solid rgba(20,30,40,0.04) !important;
}

/* Table base */
.highcharts-data-table table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  text-align: center !important;        /* center all cell content */
  table-layout: auto !important;
  background: transparent !important;
  margin: 0 !important;
}

/* Header styling */
.highcharts-data-table table thead th {
  padding: 12px 14px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  color: #fff !important;
  background: linear-gradient(90deg, var(--sagip-accent,#38bdf8) 0%, color-mix(in srgb, var(--sagip-accent,#38bdf8) 65%, #0b6b6b) 100%) !important;
  border-left: 1px solid rgba(255,255,255,0.06) !important;
}

/* Body cells */
.highcharts-data-table table tbody td {
  padding: 12px 14px !important;
  font-size: 14px !important;
  color: var(--sagip-dark,#1A202C) !important;
  vertical-align: middle !important;
  border-bottom: 1px solid rgba(20,30,40,0.04) !important;
}

/* Alternate row shading */
.highcharts-data-table table tbody tr:nth-child(even) td {
  background: linear-gradient(180deg, rgba(255,255,255,0), rgba(245,250,255,0.6)) !important;
}

/* Strong timestamp cell style (left column in screenshot) */
.highcharts-data-table table tbody td:first-child {
  font-weight: 700 !important;
  color: var(--sagip-dark,#1A202C) !important;
  background: linear-gradient(180deg, rgba(0,0,0,0.06), rgba(0,0,0,0.03)) !important;
  color: #fff !important; /* if you want white text on the teal pill */
  background: linear-gradient(180deg, rgba(10,90,82,0.95), rgba(7,64,58,0.85)) !important;
  border-right: 1px solid rgba(255,255,255,0.03) !important;
  border-bottom: 1px solid rgba(0,0,0,0.06) !important;
}

/* Round corners on top/bottom of the card */
.highcharts-data-table table thead th:first-child { border-top-left-radius: 8px !important; }
.highcharts-data-table table thead th:last-child  { border-top-right-radius: 8px !important; }
.highcharts-data-table table tbody tr:last-child td:first-child  { border-bottom-left-radius: 8px !important; }
.highcharts-data-table table tbody tr:last-child td:last-child   { border-bottom-right-radius: 8px !important; }

/* Unit styling inside headers/cells */
.highcharts-data-table .unit {
  font-size: 12px !important;
  opacity: 0.9 !important;
  margin-left: 6px !important;
  font-weight: 600 !important;
}
.beacon-light.status-offline {
    background-color: #6b7280 !important;
    box-shadow: 0 0 10px #6b7280 !important;
    animation: pulse-offline 2s infinite;
}

.offline-indicator {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #ff6b6b;
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
    display: none;
    z-index: 1000;
}

.last-update-time {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(0,0,0,0.7);
    color: #10b981;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    z-index: 1000;
}

@keyframes pulse-offline {
    0% { opacity: 0.6; }
    50% { opacity: 1; }
    100% { opacity: 0.6; }
}
/* Make table responsive and centered */
@media (max-width: 900px) {
  .highcharts-data-table { max-width: 96% !important; padding: 8px !important; }
  .highcharts-data-table table thead th { font-size: 12px !important; padding: 10px !important; }
  .highcharts-data-table table tbody td { font-size: 13px !important; padding: 10px !important; }
}

/* Defensive: if some other rules use higher specificity, increase it further */
html body .highcharts-data-table table thead th,
html body .highcharts-data-table table tbody td {
  color: inherit !important;
}

/* Small tweak for high-contrast / printing */
@media print {
  .highcharts-data-table { box-shadow: none !important; border: 1px solid #ddd !important; background: #fff !important; }
}
/* Area Selection Styles */
.area-selection-container {
    background: var(--header-gradient);
    padding: 1rem;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.area-selector {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.area-selector label {
    font-weight: 600;
    color: var(--sagip-dark);
    font-size: 1rem;
    white-space: nowrap;
}

.area-dropdown {
    padding: 0.5rem 1rem;
    border: 2px solid var(--sagip-accent);
    border-radius: 0.5rem;
    background: white;
    color: var(--sagip-dark);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 120px;
}

.area-dropdown:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.3);
}

.area-dropdown:hover {
    border-color: #0ea5e9;
}

/* Area Dashboard Styles */
.area-dashboard {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    transition: opacity 0.3s ease;
}

.area-dashboard.hidden {
    display: none;
}

.area-dashboard.active {
    display: grid;
    animation: fadeIn 0.5s ease-in-out;
}

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

/* Update beacon styles to be area-specific */
.beacon-light {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    animation: pulse 2s infinite;
}

/* Ensure area indicators are visible */
.card-title::after {
    content: attr(data-area);
    font-size: 0.8rem;
    color: var(--sagip-accent);
    margin-left: 0.5rem;
    font-weight: 500;
}

/* Additional mobile optimizations */
@media (max-width: 480px) {
    .area-selection-container {
        padding: 0.75rem;
    }
    
    .area-selector label {
        font-size: 0.9rem;
    }
    
    .area-dropdown {
        padding: 0.4rem 0.8rem;
        font-size: 0.9rem;
    }
}
/* Pangkalahatang responsive adjustments para sa lahat ng screen */
@media (max-width: 768px) {
    .main-dashboard-grid {
        gap: 0.75rem; /* Reduced gap between cards */
        padding: 1rem 0.5rem; /* A little more padding to avoid edges */
    }

    .card {
        padding: 0.75rem; /* Reduced card padding */
    }

    /* Reduce the size of the main values */
    .card-value.large-value {
        font-size: 1.25rem;
    }

    .gauge-text {
        font-size: 1.5rem; /* Reduced font size for the gauge value */
    }

    /* Make the linear bar smaller */
    .linear-bar-bg {
        height: 1rem;
    }
    
    /* Make the units smaller */
    .unit, .unit.small-unit {
        font-size: 0.8rem;
    }

    /* Make the beacon and status text smaller */
    #beacon-light {
        width: 30px;
        height: 30px;
    }

    #status-text {
        font-size: 0.85rem;
        margin-left: 0.3rem;
    }

    /* Binawasan ang padding ng header para mas compact */
    .header-content-wrapper {
        padding: 0 0.5rem;
    }

    .header-container {
        padding: 1rem 0;
    }

    /* I-adjust ang iba pang mobile-specific styles */
    .logo-box {
        width: 90%;
        border-radius: 2rem;
    }
    .BSU-BOX {
        width: 50px; /* Slightly smaller BSU logo */
        padding: 0.2rem;
        
        
    }
}
.chart-container {
		height: 300px;
	}

  .last-event {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    font-size: 0.82rem;
    padding-right: 6px;
  }

  /* hide dot separators on mobile to avoid noise */
  .last-event .separator { display: none; }

  .last-event .last-status { font-weight: 600; white-space: normal; }

  /* if needed, make card allow more vertical room */
  .card { min-height: 420px; }

.back-button-container {
	/* Position this container relative to its parent to place it accurately */
	position: absolute;
	top: 2rem; /* Adjust as needed */
	left: 2rem; /* Adjust as needed */
	z-index: 20; /* Ensure it's above other content */
}

.back-button {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.6rem 1.5rem;
	border: none;
	border-radius: 9999px; /* Fully rounded corners */
	font-size: 1rem;
	font-weight: 500;
	cursor: pointer;
	color: var(--sagip-darker-blue); /* Text color */
	background-color: rgba(255, 255, 255, 0.4); /* Frosted glass effect base */
	backdrop-filter: blur(10px); /* Frosted glass blur effect */
	-webkit-backdrop-filter: blur(10px); /* For Safari support */
	box-shadow: 
		inset 0 1px 0 rgba(255, 255, 255, 0.3), /* Inner highlight */
		0 4px 6px rgba(0, 0, 0, 0.1), /* Soft outer shadow */
		0 1px 3px rgba(0, 0, 0, 0.08); /* Smaller, sharper outer shadow */
	transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.back-button:hover {
	background-color: rgba(255, 255, 255, 0.6); /* Lighter on hover */
	box-shadow: 
		inset 0 1px 0 rgba(255, 255, 255, 0.4),
		0 6px 10px rgba(0, 0, 0, 0.15),
		0 2px 4px rgba(0, 0, 0, 0.1);
	transform: translateY(-2px);
}

.back-button:active {
	background-color: rgba(255, 255, 255, 0.2);
	box-shadow: 
		inset 0 1px 2px rgba(0, 0, 0, 0.1),
		0 2px 4px rgba(0, 0, 0, 0.08);
	transform: translateY(0);
}

.icon-back {
	width: 1.25rem;
	height: 1.25rem;
	fill: currentColor; /* Inherits color from the button text */
	transition: transform 0.3s ease;
}

.back-button:hover .icon-back {
	transform: translateX(-2px); /* Subtle icon slide on hover */
}

@media (max-width: 992px) { 
    .main-dashboard-grid { 
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 
    } 
}
	.chart-container-wrapper {
		background-color: #2D3748; /* Darker background for contrast */
		padding: 2rem;
		border-radius: 1.5rem;
		box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
		max-width: 1200px;
		margin: 2rem auto;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.chart-container {
		position: relative;
		width: 100%;
		height: 320px;
	}
/* Update the info-container to match the card style */
.info-container {
    background-color: var(--sagip-gray); /* Using the dark gray from your dashboard theme */
    color: #E2E8F0; /* Light text color for contrast */
    padding: 1rem; /* Increased padding for more space */
    max-width: 1200px; /* Make it a bit narrower for better readability */
    margin: 2rem auto; /* Center the card and add top/bottom margin */
    border-radius: 1.5rem; /* Large border-radius to match other cards */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.info-container:hover {
    transform: translateY(-5px); /* Subtle lift effect on hover */
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Style the Contact Us title */
.info-item h3 {
    font-size: 1.5rem; /* Larger font size for the heading */
    font-weight: 600;
    color: var(--sagip-accent); /* Use your accent color for the title */
    margin-bottom: 1rem; /* More space below the title */
    border-bottom: 2px solid var(--sagip-gray); /* Add a subtle line below the title */
    display: inline-block;
    padding-bottom: 0.25rem;
}

/* Style the paragraph text */
.info-item p {
    font-size: 1rem;
    font-weight: 400;
    color: var(--sagip-light-gray);
    margin-bottom: 1.5rem;
}

/* Style the list of contact details */
.info-item ul {
    list-style-type: none; /* Remove bullet points */
    padding-left: 0;
    margin: 0;
    display: grid; /* Use grid for better alignment */
    gap: 1rem; /* Space between list items */
}

/* Style individual list items */
.info-item li {
    background-color: #2D3748; /* A slightly lighter gray for list item backgrounds */
    padding: 1rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease;
}

.info-item li:hover {
    background-color: #3B4553; /* Darker on hover */
}

/* Add an icon to the list items for a better visual cue */
.info-item li::before {
    content: "";
    display: inline-block;
    width: 24px;
    height: 24px;
    background-size: contain;
    background-repeat: no-repeat;
    flex-shrink: 0;
}



.sagip-acronym p { 
    font-size: 1.1rem; 
    font-weight: 500; 
    margin: 0.25rem 0; 
} 

/* Add a margin to separate the list from the main paragraph */ 
.logo-meaning ul { 
    margin-top: 1rem; 
} 
.chart-container-wrapper {
	background-color: #2D3748; /* Darker background for contrast */
	padding: 2rem;
	border-radius: 1.5rem;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
	max-width: 1200px;
	margin: 2rem auto;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.chart-container {
	position: relative;
	width: 100%;
	height: 500px;
}
#chart-container { overflow: visible !important; }
#charts-section { overflow: visible; } /* adjust selector to match your layout */