: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: 100vw;
    display: flex;
    flex-direction: column;
    padding: 1vh 1.5vw;
    overflow: hidden; 
}

/* --- Header Section --- */
.header { 
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    flex: 0 0 auto;
    padding-bottom: 1vh;
}

.date-box { text-align: left; line-height: 1.1; flex: 1; }
.gregorian-date { font-size: 1.8vw; font-weight: bold; }
.hijri-date { font-size: 1.4vw; color: var(--accent); }

.clock-box { text-align: center; flex: 2; }
#live-clock { 
    font-size: 8vh; 
    font-weight: 800; 
    color: var(--text-main); 
    line-height: 1; 
    white-space: nowrap;
}

.location-box { text-align: right; flex: 1; display: flex; flex-direction: column; align-items: flex-end; }
#location-name { font-size: 1.4vw; color: var(--text-dim); }

#countdown-container {
    background: var(--highlight);
    padding: 0.4vh 1vw;
    border-radius: 6px;
    font-size: 1.2vw;
    font-weight: 800;
    display: none;
    color: white;
}

#countdown-container.iqama-now {
    background: var(--alert);
    animation: flash 0.6s infinite;
}

/* --- Table Section --- */
.main-content { 
    flex: 1;
    display: flex; 
    flex-direction: column; 
    justify-content: space-evenly; 
    min-height: 0;
}

table { 
    width: 100%; 
    border-collapse: separate; 
    border-spacing: 0 0.5vh; 
    table-layout: fixed; 
}

/* Fixed Header Colors */
th { 
    font-size: 1.5vh; 
    color: var(--text-dim) !important; /* Force grey/dim color for headers */
    text-transform: uppercase; 
    padding: 0 2vw; 
    font-weight: normal;
}

th:first-child { text-align: left; width: 60%; }
th:nth-child(2) { text-align: center; width: 20%; } 
th:last-child { text-align: right; width: 20%; }

td { 
    padding: 1.2vh 2vw; 
    font-size: 3.8vh; 
    font-weight: 700; 
    background: var(--card-bg); 
    line-height: 1; 
}

/* --- COLUMN LOGIC --- */
/* Target only 'td' for yellow color, leaving 'th' as grey */
tbody tr td:first-child { 
    border-radius: 10px 0 0 10px; 
    width: 60%; 
    color: var(--accent); /* Only prayer names are yellow */
}

tbody tr td:nth-child(2) { 
    text-align: center; 
    width: 20%;
}

tbody tr td:last-child { 
    border-radius: 0 10px 10px 0; 
    text-align: right; 
    width: 20%;
}

/* --- Active Row States --- */
tr.active td { background-color: var(--highlight) !important; color: white !important; }
tr.active td:first-child { color: white !important; }

.divider-row td { background: transparent !important; padding: 0.2vh 0; }
.divider-line { border-top: 1px solid rgba(255, 215, 0, 0.3); width: 100%; display: block; }

/* --- Navigation --- */
.nav-controls {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    gap: 1.5vw;
    padding-top: 1vh;
    padding-bottom: 0.5vh;
}

.nav-controls button {
    background: #222;
    border: 1px solid #444;
    color: var(--text-main);
    padding: 0.8vh 2.5vw;
    border-radius: 6px;
    font-size: 1.8vh;
    font-weight: bold;
    cursor: pointer;
    transition: 0.2s ease;
}

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

/* --- Responsiveness --- */
@media screen and (max-height: 500px) {
    td { font-size: 6vh; padding: 0.8vh 2vw; }
    #live-clock { font-size: 12vh; }
}

@media screen and (max-width: 600px) and (orientation: portrait) {
    .gregorian-date { font-size: 4vw; }
    .hijri-date { font-size: 3vw; }
    #live-clock { font-size: 12vw; }
    #location-name { font-size: 3.5vw; }
    td { font-size: 3.2vh; } 
    .nav-controls button { padding: 1.2vh 5vw; font-size: 2.2vh; }
    
    th:first-child, tbody tr td:first-child { width: 40%; }
    th:nth-child(2), tbody tr td:nth-child(2) { width: 30%; }
    th:last-child, tbody tr td:last-child { width: 30%; }
}

@keyframes flash { 0% { opacity: 1; } 50% { opacity: 0.3; } 100% { opacity: 1; } }