/* ====================================
   Theme + Base
==================================== */
:root {
    --brand-blue: #0033A1;
    --brand-blue-dark: #0056b3;
    --brand-gold: #FFB71B;
    --ink-100: #212529;
    --ink-90: rgba(33, 37, 41, .85);
    --radius-lg: .75rem;
    --shadow-md: 0 8px 18px rgba(0, 0, 0, .4);
    --control-h: 46px;
}

/* Mobile scaling */
html {
    font-size: clamp(14px, 1.6vw, 16px);
}

*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

body {
    margin: 0;
    color: var(--ink-100);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.5;
    background: #f7f4eb;
    display: flex;
    flex-direction: column;
    min-height: 100svh;
}

/* ====================================
   Accessibility
==================================== */
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ====================================
   Header (Responsive Fix)
==================================== */
.login-header {
    width: 100%;
    height: clamp(50px, 8vw, 70px);
    background-image: url('../images/mytime_login_blue_2_760_70.jpg');
    background-size: cover;
    background-position: left center;
    border-radius: 6px;
    margin-bottom: 16px;
}

/* ====================================
   Layout
==================================== */
main.signin-main {
    flex: 1;
    display: flex;
    justify-content: center;
}

.auth-shell {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: clamp(16px, 4vw, 32px);
}

.login-container {
    width: 100%;
    max-width: 760px;
    background: #fff;
    padding: clamp(20px, 4vw, 32px);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

/* ====================================
   Form
==================================== */
.form-row {
    margin-bottom: 1rem;
}

.form-label {
    font-weight: 700;
    margin-bottom: .25rem;
    color: #00274c;
}

.form-control {
    width: 100%;
    height: var(--control-h);
    border: 1px solid #ccc;
    border-radius: .375rem;
    font-size: 16px;
    padding: 0 12px;
}

/* Password */
.password-group {
    display: flex;
    align-items: stretch;
    height: var(--control-h); /* ✅ enforce same height */
    border: 1px solid #ccc;
    border-radius: .375rem;
    background: #fff;
    overflow: hidden;
}

    .password-group .form-control {
        flex: 1 1 auto;
        height: 100%; /* ✅ match container height */
        border: 0;
        border-radius: 0;
        padding: 0 12px;
    }

    /* Toggle button */
    .password-group .btn-toggle-password {
        height: 100%;
        width: var(--control-h); /* ✅ equal to height */
        min-width: var(--control-h); /* ✅ override previous min-width */
        flex: 0 0 var(--control-h); /* ✅ prevent stretching */

        /*display: inline-flex;*/
        align-items: center;
        justify-content: center;
        border: 0;
        border-left: 1px solid #ccc;
        background: #fff;
        padding: 2px; 
        display: flex;
    }

.btn-toggle-password svg {
    width: 24px;
    height: 24px;
    flex: 0 0 auto; /* 🔥 prevents stretching */
    display: block; /* avoids inline SVG quirks */
}

/* ====================================
   Buttons
==================================== */
.btn-login {
    width: 100%;
    padding: 14px;
    font-size: 1.125rem;
    border-radius: .5rem;
    background: var(--brand-blue);
    color: #fff;
    border: none;
}

/* ====================================
   Notes
==================================== */
.login-note {
    text-align: center;
    margin-top: 1rem;
    color: var(--ink-90);
}

/* ====================================
   Login Links Panel (RESTORED)
==================================== */
.login-links {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-top: 48px;
    background-color: #f1f1f1;
    border-radius: 6px;
    padding: 20px 16px 16px;
    border-top: 2px solid #ccc;
}

/* ====================================
   Section Headings (TEXT STYLE)
==================================== */
.section-heading {
    margin: 0;
}

.accordion-toggle {
    all: unset;
    display: block;
    width: 100%;
    font-size: .95rem;
    font-weight: 700;
    color: #00274c;
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: .5rem 0;
}

/* Mobile toggle behavior */
@media (max-width: 576px) {
    .accordion-toggle {
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}

/* Accordion icon */
.accordion-icon::before {
    content: "+";
    font-size: 1.25rem;
}

.accordion-toggle[aria-expanded="true"] .accordion-icon::before {
    content: "–";
}

/* Hide icon on desktop */
@media (min-width: 577px) {
    .accordion-icon {
        display: none;
    }
}

/* ====================================
   Links (NO BULLETS)
==================================== */
.link-group {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .link-group > li {
        list-style: none;
    }

/* Desktop layout */
@media (min-width: 577px) {
    .link-section {
        text-align: center;
    }

    .accordion-toggle {
        pointer-events: none;
        text-align: center;
    }

    .link-group {
        display: inline-flex !important;
        flex-wrap: wrap;
        gap: 1.5rem;
        justify-content: center;
        margin-top: .5em;
    }

        .link-group[hidden] {
            display: inline-flex !important;
        }

    .link-chip {
        color: var(--brand-blue);
        text-decoration: none;
        font-size: 1rem;
    }

        .link-chip:hover,
        .link-chip:focus-visible {
            text-decoration: underline;
        }
}

/* Mobile layout */
@media (max-width: 576px) {
    .link-section {
        text-align: left;
    }

    .link-group {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: .25rem .75rem .75rem;
    }

        .link-group[hidden] {
            display: none !important;
        }

    .link-chip {
        display: block;
        width: 100%;
        padding: 8px;
        font-size: 1rem;
        color: var(--brand-blue);
        text-decoration: none;
        border-radius: .375rem;
    }

        .link-chip:hover,
        .link-chip:focus-visible {
            background-color: rgba(0, 51, 161, 0.06);
            text-decoration: underline;
        }

    .login-links {
        margin-top: 24px;
        padding: 16px 12px;
    }
}