:root {
    --bg-color: #050505;
    --card-bg: #111111;
    --text-main: #ffffff;
    --text-dim: #aaaaaa;
    --accent: #ffd700;
    --highlight: #28a745;
    --alert: #dc3545; 
}

* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
}

body {
    background-color: var(--bg-color);
    color: var(--text-main);
    font-family: 'Segoe UI', sans-serif;
    height: 100dvh;
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 1vh 2vw;
    overflow: hidden;
}

/* --- Global Layout Wrapper --- */
.root-container {
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* --- Top Header Branding --- */
.header { 
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    flex: 0 0 auto;
    padding-bottom: 1vh;
    gap: 1.5vmin;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 1vh;
}

.date-box { text-align: left; line-height: 1.3; flex: 1; }
.gregorian-date { font-size: 2.5vmin; font-weight: bold; color: var(--text-main); white-space: nowrap; }
.hijri-date { font-size: 1.8vmin; color: var(--accent); white-space: nowrap; }

.clock-box { text-align: center; flex: 1.5; }
#live-clock { 
    font-size: 8vmin; 
    font-weight: bold; 
    color: var(--text-main);
    font-variant-numeric: tabular-nums;
}

.location-box { text-align: right; line-height: 1.3; flex: 1; min-width: 0; }
#location-name { font-size: 2.2vmin; font-weight: bold; color: var(--text-main); text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
#countdown-container { font-size: 1.8vmin; margin-top: 0.2vh; font-weight: bold; color: var(--accent); white-space: nowrap; }

/* --- Central Card Layout --- */
.main-content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
}

.table-container {
    background-color: var(--card-bg);
    border-radius: 0.8vmin;
    padding: 0.5vh 2vmin;
    border: 1px solid #222;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
    width: 100%; /* Spans 100% width across the monitor container card */
}

/* --- Table Styles --- */
table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    padding: 0.4vh 1.5vmin;
    text-align: left;
}

th {
    font-size: 1.6vmin;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.1vmin;
    border-bottom: 0.1vh solid #222;
}

td {
    font-size: 3.4vmin;
    font-weight: bold;
    border-bottom: 0.1vh solid #1c1c1c;
    white-space: nowrap;
}

tr:last-child td { border-bottom: none; }

td:nth-child(2), th:nth-child(2) { color: var(--text-dim); }
td:nth-child(3), th:nth-child(3) { text-align: right; color: var(--accent); }

/* --- Divider Line --- */
.divider-line {
    border-bottom: 2px dashed #333;
    margin: 0.3vh 0;
}

/* --- Active Prayer Row Highlight (Matches JS tr.classList.add('active')) --- */
tbody tr.active { 
    background-color: rgba(40, 167, 69, 0.18) !important; 
}
tbody tr.active td { 
    color: var(--highlight) !important; 
}
tbody tr.active td:nth-child(2) { 
    color: var(--text-main) !important; 
}

/* --- Bottom Actions Bar Navigation --- */
.nav-controls {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    width: 70%;
    max-width: none;
    margin: 1vh auto 0.2vh auto;
    gap: 1vmin;
}

.nav-controls button {
    flex: 1;
    background: #222;
    border: 1px solid #444;
    color: var(--text-main);
    padding: 0.6vh 2vmin;
    border-radius: 0.8vmin;
    font-size: 1.8vmin;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    text-align: center;
    white-space: nowrap;
}

.nav-controls button:hover { background: #333; border-color: var(--accent); }
.nav-controls button.active { border-color: var(--highlight) !important; color: var(--highlight) !important; }

/* Adjustments for Portrait Mode (Phones) */
@media (orientation: portrait) {
    .nav-controls {
        width: 95%; /* Use more width on narrow screens */
    }
    td {
        font-size: 3.8vmin; /* Slightly larger for better readability on narrow screens */
    }
}