/* Global Styles */
body {
    background-color: #f5f7f9;
    overflow-x: hidden;
    min-height: 100dvh;
}

/* Glassmorphism utility */
.glass-panel {
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.4);
}

/* Geometric Wave Pattern (High Density User Provided SVG) */
.geometric-waves-pattern {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;

    /* 1. Base Gradient (White to very soft grey) */
    background-color: #ffffff;

    /* 2. The Geometric Wave Pattern (SVG) - 30 Lines (5x Density) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0%25' y1='0%25' x2='100%25' y2='0%25'%3E%3Cstop offset='0%25' stop-color='%23006C35' stop-opacity='0.1'/%3E%3Cstop offset='50%25' stop-color='%23C5A065' stop-opacity='0.2'/%3E%3Cstop offset='100%25' stop-color='%23006C35' stop-opacity='0.1'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg stroke='url(%23g)' stroke-width='1' fill='none'%3E%3Cpath d='M0 380 C 280 180, 480 580, 780 380 S 1280 80, 1600 380' /%3E%3Cpath d='M0 385 C 285 185, 485 585, 785 385 S 1285 85, 1600 385' /%3E%3Cpath d='M0 390 C 290 190, 490 590, 790 390 S 1290 90, 1600 390' /%3E%3Cpath d='M0 395 C 295 195, 495 595, 795 395 S 1295 95, 1600 395' /%3E%3Cpath d='M0 400 C 300 200, 500 600, 800 400 S 1300 100, 1600 400' /%3E%3Cpath d='M0 405 C 305 205, 505 605, 805 405 S 1305 105, 1600 405' /%3E%3Cpath d='M0 410 C 310 210, 510 610, 810 410 S 1310 110, 1610 410' /%3E%3Cpath d='M0 415 C 315 215, 515 615, 815 415 S 1315 115, 1600 415' /%3E%3Cpath d='M0 420 C 320 220, 520 620, 820 420 S 1320 120, 1600 420' /%3E%3Cpath d='M0 425 C 325 225, 525 625, 825 425 S 1325 125, 1600 425' /%3E%3Cpath d='M0 430 C 330 230, 530 630, 830 430 S 1330 130, 1600 430' /%3E%3Cpath d='M0 435 C 335 235, 535 635, 835 435 S 1335 135, 1600 435' /%3E%3Cpath d='M0 440 C 340 240, 540 640, 840 440 S 1340 140, 1600 440' /%3E%3Cpath d='M0 445 C 345 245, 545 645, 845 445 S 1345 145, 1600 445' /%3E%3Cpath d='M0 450 C 350 250, 550 650, 850 450 S 1350 150, 1600 450' /%3E%3Cpath d='M0 455 C 355 255, 555 655, 855 455 S 1355 155, 1600 455' /%3E%3Cpath d='M0 460 C 360 260, 560 660, 860 460 S 1360 160, 1600 460' /%3E%3Cpath d='M0 465 C 365 265, 565 665, 865 465 S 1365 165, 1600 465' /%3E%3Cpath d='M0 470 C 370 270, 570 670, 870 470 S 1370 170, 1600 470' /%3E%3Cpath d='M0 475 C 375 275, 575 675, 875 475 S 1375 175, 1600 475' /%3E%3Cpath d='M0 480 C 380 280, 580 680, 880 480 S 1380 180, 1600 480' /%3E%3Cpath d='M0 485 C 385 285, 585 685, 885 485 S 1385 185, 1600 485' /%3E%3Cpath d='M0 490 C 390 290, 590 690, 890 490 S 1390 190, 1600 490' /%3E%3Cpath d='M0 495 C 395 295, 595 695, 895 495 S 1395 195, 1600 495' /%3E%3Cpath d='M0 500 C 400 300, 600 700, 900 500 S 1400 200, 1600 500' /%3E%3Cpath d='M0 505 C 405 305, 605 705, 905 505 S 1405 205, 1600 505' /%3E%3Cpath d='M0 510 C 410 310, 610 710, 910 510 S 1410 210, 1600 510' /%3E%3Cpath d='M0 515 C 415 315, 615 715, 915 515 S 1415 215, 1600 515' /%3E%3Cpath d='M0 520 C 420 320, 620 720, 920 520 S 1420 220, 1600 520' /%3E%3Cpath d='M0 525 C 425 325, 625 725, 925 525 S 1425 225, 1600 525' /%3E%3C/g%3E%3C/svg%3E");

    /* 3. Positioning */
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
}

.geometric-waves-pattern svg {
    display: none;
    /* Hide the inline SVG if present */
}

/* Header Section with Glow */
.header-section {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 6vh;
    margin-bottom: 2vh;
}

/* Magic layer behind text */
.header-section::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 150px;
    background: radial-gradient(ellipse at center,
            rgba(255, 255, 255, 0.9) 0%,
            rgba(255, 255, 255, 0.0) 70%);
    z-index: 0;
    pointer-events: none;
}

.time-text {
    position: relative;
    z-index: 1;
    font-family: 'IBM Plex Sans Arabic', 'Tajawal', sans-serif;
    font-weight: bold;
    line-height: 1;
    text-align: center;
    color: #006C35;
    font-size: clamp(4rem, 18vw, 7.5rem);
}

/* Gold Bar Line */
.gold-separator {
    width: 40%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #d4af37, transparent);
    margin: 20px auto;
    opacity: 0.8;
}

/* iPhone 17 Pro Aspect Ratio Frame */
.iphone-pro-frame {
    max-width: 430px;
    /* iPhone Pro layout width */
    margin: 0 auto;
    min-height: 100vh;
    position: relative;
    display: flex;
    flex-direction: column;
    background: transparent;
}

/* Bottom Navigation */
.bottom-nav-glass {
    background: rgba(255, 255, 255, 0.1);
    /* Lighter for more gloss */
    backdrop-filter: blur(30px);
    /* Increased blur */
    -webkit-backdrop-filter: blur(30px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.nav-item.active {
    color: #d4af37;
    /* Gold Active Color */
    position: relative;
}

.nav-item.active::after {
    content: '';
    position: absolute;
    bottom: -4px;
    width: 4px;
    height: 4px;
    background: #d4af37;
    /* Gold Dot */
    border-radius: 50%;
}

.nav-item {
    color: #1e5241;
    /* Dark Green for inactive */
    opacity: 0.7;
    /* Slight transparency */
    transition: all 0.3s ease;
}

/* Ensure content is clickable above background */
.view-section {
    position: relative;
    z-index: 10;
    pointer-events: auto;
    /* Ensure clicks pass through */
}

/* Vertical Lines Theme */
.frequency-lines {
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    /* Light Mode Base */
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    z-index: -1;
}

.frequency-lines::after {
    content: '';
    position: absolute;
    inset: 0;

    /* 1. Create the Vertical Stripes */
    background: repeating-linear-gradient(90deg,
            transparent 0px,
            transparent 4px,
            #006C35 5px,
            /* The Green Line (1px thick) */
            transparent 6px);

    /* 2. Create the "Wave" shape (Fading top/bottom) */
    /* This mask creates the curve shape by hiding parts of the lines */
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);

    opacity: 0.2;
    /* Make it subtle */
}

/* Chart Styles */
.chart-container {
    background-color: #fff;
    padding: 15px;
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    width: 100%;
    margin-bottom: 20px;
}

.chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.chart-title h3 {
    margin: 0;
    font-size: 16px;
    color: #333;
    font-weight: 800;
}

.chart-title p {
    margin: 2px 0 0;
    font-size: 12px;
    color: #777;
}

.total-hours .value {
    font-size: 18px;
    font-weight: bold;
    color: #006C35;
}

.bar-chart {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    height: 150px;
    padding-top: 10px;
    position: relative;
}

.bar {
    width: 100%;
    background-color: #f3f4f6;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    height: 120px;
}

.bar-fill {
    background-color: #34d399;
    /* Emerald 400 */
    width: 100%;
    position: absolute;
    bottom: 0;
    transition: height 0.5s ease;
    border-radius: 4px;
}

.bar-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    margin: 0 3px;
}

.x-axis-label {
    margin-top: 5px;
    font-size: 10px;
    color: #6b7280;
    font-weight: 600;
}

/* Custom Timeline styling */
.timeline-line::before {
    content: '';
    position: absolute;
    top: 24px;
    bottom: -10px;
    right: 5px;
    /* RTL alignment for the line */
    width: 2px;
    background-color: #e5e7eb;
    z-index: 0;
}

/* Hide scrollbar for cleaner mobile look */
::-webkit-scrollbar {
    display: none;
}

/* Interactive States for Check-In */
.check-in-mode .status-display {
    display: none;
}

.check-in-mode .slider-container {
    display: flex;
}

.status-mode .status-display {
    display: flex;
}

.status-mode .slider-container {
    display: none;
}

/* Animated Plus Button */
.plus-btn {
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.plus-btn.active {
    transform: rotate(45deg);
    background-color: rgba(255, 255, 255, 0.2);
}

/* Slide-up Menu */
.slide-up-menu {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #f5f7f9;
    border-top-left-radius: 2rem;
    border-top-right-radius: 2rem;
    padding: 2rem;
    padding-bottom: 7rem;
    /* Space for bottom nav */
    transform: translateY(110%);
    transition: transform 0.4s cubic-bezier(0.32, 0.725, 0.32, 1);
    z-index: 40;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.1);
    max-height: 85vh;
    overflow-y: auto;
}

.slide-up-menu.open {
    transform: translateY(0);
}

/* Glossy Slider */
.glossy-slider {
    background: rgba(255, 255, 255, 0.25);
    /* More transparent/glassy */
    backdrop-filter: blur(12px);
    /* Balanced blur */
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

/* Analytics Grid */
.analytics-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.stat-card {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: transform 0.2s;
}

.stat-card:active {
    transform: scale(0.98);
}

/* Request Menu Grid */
.request-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    padding-bottom: 20px;
}

.request-card-btn {
    background: white;
    border-radius: 16px;
    padding: 20px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    border: 1px solid #f0f0f0;
    transition: all 0.2s;
    cursor: pointer;
}

.request-card-btn:active {
    background: #f9fafb;
    transform: scale(0.98);
}

.request-card-btn .icon-box {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #f0fdf4;
    color: #1e5241;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 5px;
}

.back-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #6b7280;
    font-weight: bold;
    margin-bottom: 20px;
    cursor: pointer;
}

/* Form UI Enhancements */
.form-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 700;
    color: #1e5241;
    /* Dark Green */
    font-size: 0.95rem;
}

.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background-color: #fff;
    font-size: 1rem;
    transition: all 0.2s;
    outline: none;
    color: #374151;
}

/* Remove default arrow from selects */
select.form-input,
select.form-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: none !important;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    border-color: #006C35;
    box-shadow: 0 0 0 3px rgba(0, 108, 53, 0.1);
}

/* Custom File Input */
.file-input-wrapper {
    position: relative;
    width: 100%;
    height: 3rem;
    border: 2px dashed #cbd5e1;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: #f8fafc;
    transition: all 0.2s;
}

.file-input-wrapper:hover {
    border-color: #006C35;
    background: #f0fdf4;
}

.file-input-wrapper input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}

.file-label-text {
    color: #64748b;
    font-size: 0.9rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Fullscreen Form Container (Glass Style) */
/* Fullscreen Form Container (Glass Style) */
/* Fullscreen Form Container (Opaque - No Glass) */
.fullscreen-form {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    /* Force Top Level */
    background: #f5f7f9;
    /* Solid White/Gray similar to home page */

    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.32, 0.725, 0.32, 1);

    /* iPhone Safe Areas */
    padding-top: max(20px, env(safe-area-inset-top) + 20px);
    padding-bottom: max(20px, env(safe-area-inset-bottom) + 120px);
    /* Extra padding for bottom button/nav */

    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Dark Mode Form Override (Opaque) */
body.dark-mode .fullscreen-form {
    background: #0e3126;
    /* Solid Dark Green */
}

/* Green Focus Ring for All Inputs */
input:focus,
select:focus,
textarea:focus {
    outline: none !important;
    border-color: #1e5241 !important;
    box-shadow: 0 0 0 3px rgba(30, 82, 65, 0.2) !important;
    /* Green Ring */
}

/* Dark Mode Input Focus */
body.dark-mode input:focus,
body.dark-mode select:focus,
body.dark-mode textarea:focus {
    border-color: #4ade80 !important;
    box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.2) !important;
}

.fullscreen-form.active {
    transform: translateY(0%);
}

.form-header {
    display: flex;
    align-items: center;
    margin-bottom: 2rem;
    padding-top: 1rem;
}

/* User Badge Style (Refactored from inline) */
.user-badge {
    background-color: rgba(30, 82, 65, 0.1);
    color: #1e5241;
    padding: 4px 16px;
    border-radius: 20px;
    font-weight: 800;
    border: 1px solid rgba(212, 175, 55, 0.4);
    font-size: 1.2rem;
    transition: all 0.3s ease;
}

/* --- Dark Green Mode Theme --- */
.dark-green-mode {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: -1;

    background-color: #0e3126;
    /* Dark Green Base */

    background-image: url("dark-green-pattern.svg");

    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
}

/* --- Dark Mode Overrides (Applied via body toggle) --- */
body.dark-mode {
    color: #d4af37;
    /* Base text Gold */
    background-color: #0e3126;
}

/* Big Blur at Bottom (Dark Mode Only) */
body.dark-mode::after {
    content: '';
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40vh;
    /* Covers bottom area */
    background: linear-gradient(to top, #0e3126 10%, rgba(14, 49, 38, 0.9) 50%, transparent 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: -1;
    /* Behind content but in front of background pattern */
    pointer-events: none;
}

/* Generic Border Overrides for Dark Mode */
body.dark-mode .border-gray-100,
body.dark-mode .border-gray-200,
body.dark-mode .border-gray-300,
body.dark-mode .border-t,
body.dark-mode .border-b,
body.dark-mode .border {
    border-color: rgba(212, 175, 55, 0.2) !important;
}

/* Readability Mask for Dark Mode (Dark Gradient behind text) */
body.dark-mode .header-section::before {
    display: block;
    opacity: 1;
    /* Dark gradient to mask lines behind the white text */
    background: radial-gradient(ellipse at center,
            rgba(14, 49, 38, 1) 0%,
            rgba(14, 49, 38, 0) 70%);
}

/* User Badge Dark Mode */
body.dark-mode .user-badge {
    background-color: #1e5241;
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.3);
}

/* Text Colors */
body.dark-mode .text-gray-900,
body.dark-mode .text-gray-800 {
    color: #ffffff;
}

body.dark-mode .text-gray-700 {
    color: #d1d5db;
    /* Light Gray */
}

body.dark-mode .text-gray-600,
body.dark-mode .text-gray-500 {
    color: #9ca3af;
    /* Gray 400 */
}

/* Time Text Override */
body.dark-mode .time-text {
    color: #a5f3c3;
    /* Light Green Tint */
    text-shadow: 0 0 20px rgba(165, 243, 195, 0.4);
}

/* Glass Panels & Cards Override */
body.dark-mode .bg-white\/80,
/* Settings container */
body.dark-mode .bg-white\/50,
body.dark-mode .bg-white,
body.dark-mode .bg-gray-50,
body.dark-mode .stat-card,
body.dark-mode .request-card-btn,
body.dark-mode .chart-container,
body.dark-mode .glossy-slider,
body.dark-mode .day-card,
body.dark-mode .profile-card {
    background: rgba(14, 49, 38, 0.95) !important;
    /* Deep Dark Green, almost opaque */
    border-color: rgba(212, 175, 55, 0.2) !important;
    /* Gold Border */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

body.dark-mode .request-card-btn {
    background-color: #1a4234 !important;
    /* Fallback Solid Dark Green */
}

body.dark-mode .request-card-btn:active,
body.dark-mode .stat-card:active {
    background: rgba(30, 70, 55, 0.7);
}

/* Headings */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3 {
    color: #ffffff;
}

/* Inputs in Dark Mode */
body.dark-mode .form-input,
body.dark-mode .form-select,
body.dark-mode .form-textarea,
body.dark-mode .bg-gray-50 {
    background-color: #173d32;
    border-color: #2a5f50;
    color: #ffffff;
}

body.dark-mode .form-label {
    color: #a5f3c3;
}

/* Navigation Bar (Glossy Effect) */
body.dark-mode .bottom-nav-glass {
    background: rgba(255, 255, 255, 0.15);
    /* More visible gloss */
    backdrop-filter: blur(40px);
    /* Enhanced blur */
    -webkit-backdrop-filter: blur(40px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    /* Deeper shadow */
}

body.dark-mode .nav-item {
    color: #6b8c82;
}

body.dark-mode .nav-item.active {
    color: #d4af37;
    /* Keep Gold */
}

/* Icons in Cards */
body.dark-mode .icon-box {
    background-color: rgba(255, 255, 255, 0.1);
    color: #a5f3c3;
}

/* Chart Text */
body.dark-mode .chart-title h3 {
    color: #ffffff;
}

/* Slider Overrides */
body.dark-mode #checkInSlider {
    background: rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.2);
}

body.dark-mode #sliderText {
    color: #a5f3c3 !important;
}

/* Fullscreen Form Background */
body.dark-mode .fullscreen-form {
    background-color: #0e3126;
}

/* Slide Up Menu Background */
body.dark-mode .slide-up-menu {
    background-color: #122922;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Glassy Form Footer */
/* Opaque Form Footer (Lifted above Nav) */
.form-footer-glass {
    position: fixed;
    bottom: 110px;
    /* Lift above the 80px+20px nav bar */
    left: 1rem;
    right: 1rem;
    padding: 1rem;
    z-index: 10001;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    /* Floating Card Style */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

body.dark-mode .form-footer-glass {
    background: #0e3126;
    /* Solid Dark Green */
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Opaque Back Button */
.back-btn-glass {
    padding: 0.5rem;
    border-radius: 9999px;
    background: #ffffff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    transition: background 0.2s;
}

body.dark-mode .back-btn-glass {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

body.dark-mode .back-btn-glass svg {
    color: #d4af37 !important;
    /* Gold Icon */
}

/* User Requested: All White/Gray Text -> Gold in Dark Mode */
body.dark-mode .x-axis-label {
    color: #d4af37 !important;
    font-weight: 700;
}

body.dark-mode .chart-title h3 {
    color: #d4af37 !important;
}

body.dark-mode .chart-title p {
    color: #d4af37 !important;
    opacity: 0.8;
}

body.dark-mode .total-hours .text-xs {
    color: #d4af37 !important;
    opacity: 0.8;
}

body.dark-mode .text-gray-900,
body.dark-mode .text-gray-800,
body.dark-mode .text-gray-700,
body.dark-mode .text-gray-600 {
    color: #ffffff !important;
}

body.dark-mode .text-gray-500,
body.dark-mode .text-gray-400 {
    color: #d1d5db !important;
    /* Gray 300 */
}

body.dark-mode .form-label {
    color: #a5f3c3 !important;
    text-shadow: none;
}

body.dark-mode .form-input::placeholder {
    color: rgba(212, 175, 55, 0.5);
    /* Gold placeholder */
}

body.dark-mode .back-btn {
    color: #d4af37 !important;
}

/* Ensure global headings are White in dark mode for cleaner look */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {
    color: #ffffff !important;
}

/* Update Time Text to Gold as well if it fits "all white/gray", 
   though it was Light Green. User said "white or gray", but let's keep it cohesive. 
   Actually, let's Stick to user request "white or gray". Time text was #a5f3c3 (green tint). 
   I will leave Time Text as Green unless asked, focusing on the "white or gray" parts which are labels/content. */