@import url('./css_components/navigation.css');
@import url('./css_components/background.css');
@import url('./css_components/cards.css');
@import url('./css_components/modals.css');
@import url('./css_components/dashboard.css');
@import url('./css_components/toast.css');

:root {
    --primary-color: #00ff66;
    --primary-hover: #00cc55;
    --bg-dark: #000000;
    --bg-card: rgba(10, 10, 10, 0.45);
    --border-color: rgba(255, 255, 255, 0.05);
    --font-serif: 'Times New Roman', serif;
}

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

body {
    background-color: var(--bg-dark);
    color: #a0a0a0;
    font-family: var(--font-serif);
    font-variant: small-caps;
    overflow-x: hidden;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body::-webkit-scrollbar {
    width: 8px;
}

body::-webkit-scrollbar-track {
    background: var(--bg-dark);
}

body::-webkit-scrollbar-thumb {
    background: #111111;
    border-radius: 4px;
}

body::-webkit-scrollbar-thumb:hover {
    background: var(--primary-color);
}

h1 {
    color: var(--primary-color);
    font-size: 2.2rem;
    letter-spacing: 2px;
    text-align: center;
}

.title-subtext {
    display: block;
    font-size: 1.2rem;
    color: #a0a0a0;
    text-align: center;
    margin-top: 10px;
}

h2 {
    color: var(--primary-color);
    font-size: 1.8rem;
    margin-bottom: 16px;
    letter-spacing: 1px;
    text-align: center;
}

p {
    font-size: 1.05rem;
    line-height: 1.6;
    color: #a0a0a0;
    margin-top: 16px;
}

.spa-view {
    display: none;
    width: 100%;
    position: relative;
    z-index: 3;
}

.spa-view.active {
    display: block;
}


/* ==========================================================================
   PRODUCTION ENGINE: RESPONSIVE OVERRIDES
   Cascades at the bottom to ensure reliable mobile rendering [4]
========================================================================== */

/* 1. Fluid Typography Scaling (Prevents awkward heading wraps) */
h1 {
    font-size: clamp(1.4rem, 6vw + 0.2rem, 2.2rem) !important;
    line-height: 1.25 !important;
    letter-spacing: 1px !important;
    margin-bottom: 12px !important;
}

p.title-subtext {
    font-size: clamp(0.95rem, 3.5vw + 0.1rem, 1.2rem) !important;
    line-height: 1.5 !important;
}

@media (max-width: 768px) {
    /* 2. Modal Container Optimization (Maximizes usable screen area) */
    .modal-content {
        padding: 20px 15px !important; /* Reduces padding to save space */
        width: 95% !important;         /* Expands modal width across viewport */
        max-height: 90vh !important;    /* Allows more scrolling area */
        border-color: #00ff66 !important;
    }

    .modal-content h2 {
        font-size: 1.5rem !important;
        margin-bottom: 15px !important;
    }

    /* 3. Re-spacing form inputs (Evaluator Name & Hole) */
    .modal-content div[style*="display: flex"] {
        flex-direction: column !important; /* Stack Name & Hole input fields */
        gap: 12px !important;
        margin-bottom: 15px !important;
    }

    #ws-name, #ws-hole {
        width: 100% !important;
        box-sizing: border-box !important;
        height: 48px !important; /* Standard touch target height */
    }

    /* 4. Swapping worksheet rows to vertical stacks [2] */
    .eval-row {
        display: flex !important;
        flex-direction: column !important; /* Stack labels above dropdowns */
        align-items: stretch !important;
        gap: 10px !important;
        padding: 12px 10px !important;
        border-bottom: 1px solid #1a1a1a !important;
    }

    .eval-row span {
        padding-right: 0 !important;
        line-height: 1.4 !important;
        font-size: 0.95rem !important;
        font-weight: bold !important;
    }

    /* 5. Expanding select fields to full-width touch buttons */
    .eval-row select {
        width: 100% !important; /* Expands dropdown across the card */
        height: 46px !important; /* Comfortable tap target */
        box-sizing: border-box !important;
        text-align: left !important;
        padding-left: 12px !important;
        font-size: 0.95rem !important;
        background-color: #000000 !important;
        border-color: #333333 !important;
        appearance: none !important; /* Clears OS-default arrows */
        -webkit-appearance: none !important;
        
        /* Custom dropdown indicator arrow [6] */
        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300ff66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
        background-repeat: no-repeat !important;
        background-position: right 12px center !important;
        background-size: 16px !important;
    }

    /* 6. Expanding detail accordions and note fields */
    .eval-accordion summary {
        padding: 12px 10px !important;
        font-size: 1rem !important;
    }

    .eval-accordion summary::after {
        right: 12px !important;
    }

    .eval-sub {
        padding: 12px 10px !important;
        gap: 8px !important;
    }

    .eval-sub input[type="text"] {
        height: 44px !important;
        font-size: 0.95rem !important;
    }

    /* 7. Re-spacing welcome boxes and cards on landing pages */
    div[style*="max-width: 800px"] {
        width: 95% !important;
        margin: 25px auto !important;
        padding: 20px !important;
        box-sizing: border-box !important;
    }
    
    /* 8. Formatting notes and transmission buttons */
    #ws-p1-notes {
        font-size: 0.95rem !important;
    }
    
    #btn-submit-worksheet {
        height: 50px !important; /* glove-friendly button */
        font-size: 1.05rem !important;
    }
}