/* Main Styles for 58-custom-clock (v3) */

/* =========================================
   1. Theme Variables & Configuration
   ========================================= */

:root {
    /* Default Theme: Darkmode Default */
    --bg-color: #121212;
    --card-bg: #1E1E1E;
    --text-primary: #E0E0E0;
    --text-secondary: #A0A0A0;
    --accent-color: #90CAF9;
    /* Soft Blue */
    --highlight-color: #03DAC6;
    /* Teal */
    --border-color: #333333;
    --font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --clock-font: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    /* Can be overridden */
    --mantle-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

body.theme-forest-green {
    --bg-color: #0a1f0a;
    --card-bg: rgba(10, 31, 10, 0.8);
    /* Slightly more opaque for readability */
    --text-primary: #e0f2e0;
    --text-secondary: #90EE90;
    --accent-color: #00FF00;
    /* Neon Lime */
    --highlight-color: #3CB371;
    /* Medium Sea Green */
    --border-color: #228B22;
    /* Forest Green */
    --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body.theme-orange-sunset {
    --bg-color: #1a0f0a;
    /* Fallback */
    --bg-gradient: linear-gradient(180deg, #2d1a10 0%, #4a2c00 100%);
    --card-bg: rgba(45, 26, 16, 0.8);
    --text-primary: #fff5e6;
    --text-secondary: #FF9500;
    --accent-color: #FF9500;
    /* Neon Orange */
    --highlight-color: #FFEB3B;
    /* Yellow */
    --border-color: #D84315;
    --font-family: 'Helvetica Neue', Arial, sans-serif;
}

body.theme-antique-white {
    --bg-color: #FFF8F0;
    --card-bg: #FAEBD7;
    /* Antique White */
    --text-primary: #343434;
    --text-secondary: #A0522D;
    --accent-color: #A0522D;
    /* Medium Sienna */
    --highlight-color: #D2B48C;
    /* Light Tan */
    --border-color: #D4C5B9;
    --font-family: 'Georgia', 'Times New Roman', serif;
    --clock-font: 'Courier New', Courier, monospace;
}

/* =========================================
   2. Reset & Base Styles
   ========================================= */

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

body {
    background-color: var(--bg-color);
    background-image: var(--bg-gradient, none);
    color: var(--text-primary);
    font-family: var(--font-family);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    /* Prevent horizontal scroll */
    transition: background-color 0.3s, color 0.3s;
}

/* =========================================
   3. Layout - Grid & Containers
   ========================================= */

.app-container {
    display: grid;
    grid-template-columns: 1fr minmax(300px, 400px) 1fr;
    /* Left, Center, Right columns */
    grid-template-rows: auto auto 1fr auto;
    /* Mantle, Clock, Modules, Footer */
    gap: 1rem;
    padding: 1rem;
    max-width: 1600px;
    margin: 0 auto;
    width: 100%;
}

/* Mantle Area (Top Center) */
.col-mantle {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1rem;
}

.mantle-image {
    max-width: 100%;
    height: auto;
    max-height: 150px;
    filter: drop-shadow(var(--mantle-shadow));
    object-fit: contain;
}

/* Main Clock Area (Center) */
.col-clock {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 2rem;
}

/* Top Holiday Label */
.holiday-label {
    font-size: 1.2rem;
    color: var(--highlight-color);
    margin-bottom: 0.5rem;
    font-weight: bold;
    min-height: 1.5rem;
    /* prevent jump */
}

/* Time & Dial Container */
.time-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.main-time {
    font-size: 4rem;
    font-weight: bold;
    font-family: var(--clock-font);
    font-feature-settings: "tnum";
    /* Tabular numbers */
    color: var(--text-primary);
    text-shadow: 0 0 20px rgba(var(--accent-color), 0.3);
    /* Premium glow */
}

.theme-darkmode-default .main-time {
    text-shadow: 0 0 20px rgba(144, 202, 249, 0.4);
    /* Specific Blue Glow */
}


.seconds-dial {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 2px solid var(--border-color);
    position: relative;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
}

.dial-hand {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50%;
    /* Radius length */
    height: 2px;
    background-color: var(--accent-color);
    transform-origin: 0% 50%;
    /* Rotate from center */
    transform: rotate(-90deg);
    /* Start at 12 o'clock */
    transition: transform 0.1s linear;
    /* Smooth, but updated frequently */
}

.dial-progress {
    /* Optional fill effect - can use SVG or conic-gradient dynamically */
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(var(--highlight-color) 0deg, transparent 0deg);
    opacity: 0.2;
    pointer-events: none;
}

.date-display {
    font-size: 1.5rem;
    margin-top: 0.5rem;
    color: var(--text-secondary);
}

/* =========================================
   4. Modules (Peripherals)
   ========================================= */

/* Left Column Modules */
.col-left {
    grid-column: 1;
    grid-row: 2 / span 2;
    /* Span alongside clock and below */
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: flex-end;
    /* Align closer to center */
}

/* Right Column Modules */
.col-right {
    grid-column: 3;
    grid-row: 2 / span 2;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
    /* Align closer to center */
}

/* Game Timer / Bottom Center */
.col-bottom {
    grid-column: 2;
    grid-row: 3;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    /* Center items */
    width: 100%;
}

.col-bottom .card {
    max-width: 100%;
    /* Allow full width of column */
}

/* Card Styling */
.card {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1rem;
    width: 100%;
    max-width: 300px;
    /* Limit peripheral card width */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s, box-shadow 0.2s;
}

.card:hover {
    /* Subtle hover effect */
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

fieldset.card {
    min-width: 0;
    /* Flexbox fix */
    margin: 0;
}

legend {
    color: var(--accent-color);
    font-weight: bold;
    padding: 0 0.5rem;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Module Specifics */
.module-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
    text-align: center;
}

.large-digit {
    font-size: 1.5rem;
    font-family: var(--clock-font);
    font-feature-settings: "tnum";
}

.ctrl-row {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 0.5rem;
}

/* Inputs & Buttons */
button {
    background-color: var(--border-color);
    /* Default btn bg */
    color: var(--text-primary);
    border: none;
    padding: 0.4rem 0.8rem;
    border-radius: 4px;
    cursor: pointer;
    font-family: inherit;
    transition: background-color 0.2s;
}

button:hover {
    background-color: var(--accent-color);
    color: var(--bg-color);
    /* Contrast on hover */
}

button.active {
    background-color: var(--highlight-color);
    color: #000;
}

input {
    background-color: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 0.3rem;
    border-radius: 4px;
    font-family: var(--clock-font);
    text-align: center;
}

select {
    background-color: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 0.3rem;
    border-radius: 4px;
}

/* =========================================
   5. Settings Modal
   ========================================= */
.settings-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}

.settings-overlay.visible {
    opacity: 1;
    pointer-events: auto;
}

.settings-modal {
    background-color: var(--card-bg);
    border: 2px solid var(--accent-color);
    padding: 2rem;
    border-radius: 12px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

.settings-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 1rem;
}

.settings-group {
    margin-bottom: 1.5rem;
}

.settings-group label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--text-secondary);
}

/* =========================================
   6. Footer
   ========================================= */
footer {
    grid-column: 1 / -1;
    grid-row: 4;
    text-align: center;
    padding: 2rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

footer a {
    color: var(--text-secondary);
    text-decoration: none;
}

footer a:hover {
    color: var(--accent-color);
}

/* =========================================
   7. Mobile / Responsive
   ========================================= */
@media (max-width: 900px) {
    .app-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0.5rem;
        gap: 1.5rem;
    }

    /* Reset grid specific alignments */
    .col-mantle,
    .col-clock,
    .col-left,
    .col-right,
    .col-bottom {
        width: 100%;
        max-width: 400px;
        margin: 0;
        align-items: center;
    }

    .main-time {
        font-size: 3rem;
        /* Slightly smaller on mobile */
    }

    .card {
        max-width: 100%;
        /* Full width on mobile stack */
    }

    /* Order controls as per spec */
    /* 
       Spec Order:
       1) Mantle (col-mantle)
       2) Holiday (inside col-clock)
       3) Time (inside col-clock)
       4) Date (inside col-clock)
       5) World clocks (col-left or right)
       6) Chime (col-left or right)
       7) Countdown/Stopwatch 
       ...
       
       Since we are using Flexbox column, we can use 'order' property 
       if we keep the container structure, or just rely on DOM order.
       
       Let's use Order property on the major columns if they are siblings.
       Currently structure is:
       .col-mantle
       .col-clock
       .col-left
       .col-right (includes Chime, Epoch etc?)
       .col-bottom (Ingress)
       
       We need to be careful where we place modules in index.html to support this.
       Best approach: Put ALL peripheral modules in a generic container or 
       carefully assign them to columns.
       
       For now, let's just stack them naturally.
       .col-mantle (Order 1)
       .col-clock (Order 2)
       .col-left (Order 3)
       .col-right (Order 4)
       .col-bottom (Order 5)
    */
    .col-mantle {
        order: 1;
    }

    .col-clock {
        order: 2;
    }

    .col-left {
        order: 3;
    }

    /* World Clocks, etc */
    .col-right {
        order: 4;
    }

    /* Chime, Unix */
    .col-bottom {
        order: 5;
    }

    /* Ingress */
    footer {
        order: 10;
    }
}

/* =========================================
   8. FX Layer
   ========================================= */
#fireworks-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    /* Let clicks pass through */
    z-index: 999;
}