/* ============================================================
   css/login.css
   PALO INVENTORY SYSTEM — LOGIN
   Self-contained: tokens + layout + responsive + a11y.
   Uses the SAME palette as css/main.css (Kitchen Ledger).
   ============================================================ */

/* ========== DESIGN TOKENS ========== */
:root {
    --paper:        #f7f5f1;
    --surface:      #ffffff;
    --surface-alt:  #fbfaf7;

    --ink:          #1c1c1a;
    --ink-soft:     #5a5a54;
    --ink-faint:    #8f8d86;

    --line:         #e5e1d8;
    --line-soft:    #efece5;

    --forest:       #2c4a3b;
    --forest-hover: #22392e;
    --forest-tint:  #e8efe9;

    --amber:        #b8862f;
    --amber-tint:   #f5ead0;

    --clay:         #a14a32;
    --clay-tint:    #f4e2dc;

    --olive:        #5f7a4a;
    --olive-tint:   #e6eddf;

    /* Alias so any stylesheet referencing --primary picks up amber */
    --primary:      #b8862f;

    --shadow-sm: 0 1px 2px rgba(28, 28, 26, 0.04);
    --shadow-md: 0 4px 12px rgba(28, 28, 26, 0.06);
    --shadow-lg: 0 12px 32px rgba(28, 28, 26, 0.10);

    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;

    --font: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
}

/* ========== RESET ========== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--font);
}

html, body {
    width: 100%;
    min-height: 100%;
}

body {
    /* Full-page photo background (image/palo.png) with a dark overlay
       so the login card stays readable on top of it. */
    background-color: var(--ink);
    background-image:
        linear-gradient(150deg, rgba(24, 40, 32, 0.80) 0%, rgba(28, 28, 26, 0.62) 55%, rgba(28, 28, 26, 0.78) 100%),
        url('../image/palo.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 24px;
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

/* ========== LOGIN CONTAINER ========== */
.login-container {
    max-width: 1080px;
    width: 100%;
    background: var(--surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    display: flex;
    min-height: 580px;
    position: relative;
    border: 1px solid var(--line);
}

/* ========== BRAND PANEL (left) ========== */
.login-brand {
    width: 40%;
    background: var(--forest);
    background-image:
        radial-gradient(circle at 100% 0%, rgba(184, 134, 47, 0.16) 0%, transparent 50%),
        radial-gradient(circle at 0% 100%, rgba(232, 239, 233, 0.08) 0%, transparent 55%);
    padding: 48px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #ffffff;
    position: relative;
    overflow: hidden;
}

.login-brand::after {
    content: '';
    position: absolute;
    right: -60px;
    bottom: -60px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.06);
    pointer-events: none;
}

.login-brand .brand-icon {
    font-size: 1.5rem;
    color: var(--amber);
    margin-bottom: 24px;
    width: 64px;
    height: 64px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(184, 134, 47, 0.14);
    border: 1px solid rgba(184, 134, 47, 0.28);
    border-radius: var(--radius-xl);
}

.login-brand h1 {
    font-size: 1.85rem;
    font-weight: 700;
    margin-bottom: 10px;
    letter-spacing: -0.01em;
    color: #ffffff;
}

.login-brand p {
    font-size: 0.9rem;
    color: #c9d6cd;
    line-height: 1.6;
    max-width: 30ch;
}

.brand-features {
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.brand-features span {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    color: #dfeae3;
}

.brand-features i {
    color: var(--amber);
    font-size: 0.9rem;
}

/* ========== FORM PANEL (right) ========== */
.login-form {
    width: 60%;
    padding: 48px 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--surface);
}

.form-header {
    margin-bottom: 26px;
}

.form-header h2 {
    font-size: 1.55rem;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 4px;
    letter-spacing: -0.01em;
}

.form-header p {
    color: var(--ink-soft);
    font-size: 0.88rem;
}

/* ========== ROLE SELECTOR ========== */
/* ========== ROLE SELECTOR ========== */
.role-selector {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 20px;
    width: 100%;
    /* Prevent children from blowing past the grid cell */
    min-width: 0;
}

.role-btn {
    /* Grid child — must not exceed cell width */
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;

    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface-alt);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;

    /* Internal flex layout */
    display: flex;
    align-items: center;
    gap: 10px;

    font-size: 0.85rem;
    font-weight: 500;
    color: var(--ink);
    text-align: left;
    font-family: inherit;

    /* Prevent overflow text from making the button larger */
    overflow: hidden;
}

.role-btn:hover {
    background: var(--surface);
    border-color: var(--ink-faint);
}

.role-btn.active {
    background: var(--forest-tint);
    border-color: var(--forest);
    box-shadow: 0 0 0 3px rgba(44, 74, 59, 0.08);
}

/* Text wrapper — this is the piece that was missing flex: 1 */
.role-text {
    display: flex;
    flex-direction: column;
    gap: 1px;

    /* Take all remaining space after icon + check */
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}

.role-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    flex-shrink: 0;
    background: var(--surface);
    border: 1px solid var(--line-soft);
    color: var(--forest);
}

.role-icon.commissary { color: var(--forest); }
.role-icon.food      { color: var(--amber); }

.role-name {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--ink);
    /* Truncate gracefully instead of stretching the button */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.role-sub {
    font-size: 0.68rem;
    color: var(--ink-faint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.role-check {
    margin-left: 4px;
    color: var(--forest);
    opacity: 0;
    transition: opacity 0.15s ease;
    font-size: 0.85rem;

    /* Fixed size so it doesn't grow/shrink between buttons */
    flex-shrink: 0;
    width: 1rem;
    text-align: center;
}

.role-btn.active .role-check {
    opacity: 1;
}

/* ========== FORM CONTROLS ========== */
.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 6px;
    letter-spacing: 0.01em;
}

.input-wrapper {
    position: relative;
}

.input-wrapper > i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ink-faint);
    font-size: 0.82rem;
    pointer-events: none;
}

.input-wrapper .toggle-password {
    left: auto;
    right: 14px;
    cursor: pointer;
    pointer-events: auto;
    transition: color 0.15s ease;
}

.input-wrapper .toggle-password:hover {
    color: var(--ink);
}

.form-group input {
    width: 100%;
    padding: 11px 42px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    color: var(--ink);
    background: var(--surface-alt);
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    font-family: inherit;
}

.form-group input::placeholder {
    color: var(--ink-faint);
}

.form-group input:focus {
    border-color: var(--forest);
    background: var(--surface);
    box-shadow: 0 0 0 3px rgba(44, 74, 59, 0.1);
}

/* ========== MESSAGES ========== */
.error-message,
.success-message {
    padding: 12px 14px;
    border-radius: var(--radius-md);
    margin-bottom: 16px;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 10px;
    border-left: 4px solid;
    line-height: 1.4;
}

.error-message {
    background: var(--clay-tint);
    color: var(--clay);
    border-left-color: var(--clay);
}

.success-message {
    background: var(--olive-tint);
    color: var(--olive);
    border-left-color: var(--olive);
}

/* ========== LOGIN BUTTON ========== */
.login-btn {
    width: 100%;
    padding: 12px;
    background: var(--forest);
    color: #ffffff;
    border: 1px solid var(--forest);
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 6px;
    font-family: inherit;
    letter-spacing: 0.01em;
}

.login-btn:hover {
    background: var(--forest-hover);
    border-color: var(--forest-hover);
}

.login-btn:active {
    transform: translateY(1px);
}

.login-btn:focus-visible {
    outline: 2px solid var(--amber);
    outline-offset: 2px;
}

.login-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* ============================================================
   LOADING OVERLAY
   ============================================================ */
.loading-overlay {
    display: none;
    position: fixed;
    inset: 0;
    /* The overlay paints its OWN copy of the palo.png photo.
       (backdrop-filter can't reliably sample the body's fixed-attachment
       background during form-submit navigation, which is why the image
       previously vanished.) Drawing the image here guarantees it shows
       while loading. */
    background-color: var(--ink);
    z-index: 9999;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    animation: fadeIn 0.25s ease;
}

/* Photo layer inside the overlay: slightly blurred + dimmed so the
   spinner and text stay readable on top of it. */
.loading-overlay::before {
    content: '';
    position: absolute;
    inset: -24px; /* hides the soft edge fringe caused by the blur */
    background: url('../image/palo.png') center / cover no-repeat;
    filter: blur(5px) brightness(0.6) saturate(1.05);
    z-index: 0;
    pointer-events: none;
}

/* Keep the spinner and text above the photo layer */
.loading-overlay > * {
    position: relative;
    z-index: 1;
}

.loading-overlay.active {
    display: flex;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.loading-spinner {
    position: relative;
    width: 84px;
    height: 84px;
    margin-bottom: 32px;
}

.loading-spinner .spinner-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 4px solid rgba(255, 255, 255, 0.08);
    border-top-color: var(--amber);
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.loading-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.4rem;
    color: var(--amber);
}

.loading-text {
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-align: center;
}

.loading-subtext {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.82rem;
    margin-top: 10px;
    letter-spacing: 0.02em;
    text-align: center;
    padding: 0 20px;
}

.loading-dots {
    display: inline-flex;
    gap: 6px;
    margin-top: 14px;
}

.loading-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.22);
    animation: dotBounce 1.4s ease-in-out infinite;
}

.loading-dots span:nth-child(1) { animation-delay: 0s; }
.loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.loading-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes dotBounce {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.3; }
    40%           { transform: scale(1.1); opacity: 1; background: var(--amber); }
}

.loading-progress-bar {
    width: 220px;
    height: 3px;
    background: rgba(255, 255, 255, 0.10);
    border-radius: 2px;
    margin-top: 22px;
    overflow: hidden;
}

.loading-progress-fill {
    height: 100%;
    width: 0%;
    background: var(--amber);
    border-radius: 2px;
    animation: progressFill 2.4s ease-in-out infinite;
}

@keyframes progressFill {
    0%   { width: 0%; }
    50%  { width: 70%; }
    100% { width: 0%; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Tablet + below */
@media (max-width: 820px) {
    body {
        padding: 16px;
        /* iOS Safari janks on fixed backgrounds — scroll instead */
        background-attachment: scroll;
    }

    .login-container {
        flex-direction: column;
        border-radius: var(--radius-xl);
        min-height: 0;
    }

    .login-brand {
        width: 100%;
        padding: 28px 24px;
        min-height: 180px;
    }

    .login-brand h1 { font-size: 1.4rem; }
    .login-brand .brand-icon {
        margin-bottom: 16px;
        width: 52px;
        height: 52px;
        font-size: 1.25rem;
    }

    .login-form {
        width: 100%;
        padding: 28px 24px;
    }
}

/* Small phones landscape */
@media (max-width: 580px) {
    body { padding: 12px; }

    .login-container { border-radius: var(--radius-lg); }
    .login-brand { padding: 22px 20px; min-height: 160px; }
    .login-brand .brand-icon {
        font-size: 1.1rem;
        width: 46px;
        height: 46px;
        margin-bottom: 14px;
    }
    .login-brand h1 { font-size: 1.25rem; }
    .login-brand p { font-size: 0.82rem; }

    .brand-features { margin-top: 20px; gap: 8px; }
    .brand-features span { font-size: 0.78rem; }

    .login-form { padding: 22px 18px; }
    .form-header h2 { font-size: 1.25rem; }

    .role-selector { gap: 8px; margin-bottom: 16px; }
    .role-btn { padding: 11px 10px; font-size: 0.78rem; gap: 8px; }
    .role-icon { width: 32px; height: 32px; font-size: 0.82rem; }
    .role-name { font-size: 0.78rem; }
    .role-sub { font-size: 0.62rem; }
}

/* Phones */
@media (max-width: 480px) {
    body { padding: 10px; }
    .login-container { border-radius: var(--radius-md); }
    .login-brand { padding: 20px 16px; min-height: 140px; }
    .login-brand .brand-icon {
        font-size: 1rem;
        width: 42px;
        height: 42px;
        margin-bottom: 12px;
        border-radius: var(--radius-lg);
    }
    .login-brand h1 { font-size: 1.15rem; }
    .login-brand p { font-size: 0.78rem; line-height: 1.5; }

    .brand-features { display: none; }

    .login-form { padding: 20px 16px; }
    .form-header { margin-bottom: 20px; }
    .form-header h2 { font-size: 1.15rem; }
    .form-header p { font-size: 0.8rem; }

    .role-selector { grid-template-columns: 1fr; gap: 8px; margin-bottom: 16px; }
    .role-btn { padding: 11px 10px; border-radius: var(--radius-md); }
    .role-icon { width: 30px; height: 30px; font-size: 0.8rem; }
    .role-name { font-size: 0.78rem; }
    .role-sub { font-size: 0.6rem; }

    .form-group { margin-bottom: 14px; }
    .form-group label { font-size: 0.74rem; }
    .form-group input { font-size: 0.86rem; padding: 10px 38px; }
    .login-btn { padding: 11px; font-size: 0.86rem; }
}

/* Very small phones */
@media (max-width: 380px) {
    body { padding: 8px; }
    .login-container { border-radius: var(--radius-md); }
    .login-brand { padding: 16px 14px; min-height: 120px; }
    .login-brand .brand-icon {
        font-size: 0.9rem;
        width: 38px;
        height: 38px;
        margin-bottom: 10px;
    }
    .login-brand h1 { font-size: 1.05rem; }
    .login-form { padding: 16px 14px; }
    .form-header h2 { font-size: 1rem; }
    .role-btn { padding: 10px 8px; gap: 6px; }
    .role-icon { width: 28px; height: 28px; font-size: 0.75rem; border-radius: var(--radius-sm); }
    .role-name { font-size: 0.74rem; }
    .role-sub { font-size: 0.58rem; }
    .form-group input { font-size: 0.82rem; padding: 9px 36px; }
    .login-btn { padding: 10px; font-size: 0.82rem; }

    .loading-spinner { width: 58px; height: 58px; }
    .loading-icon { font-size: 1rem; }
    .loading-text { font-size: 0.95rem; }
    .loading-progress-bar { width: 170px; }
}

/* Notched phones */
@supports (padding: env(safe-area-inset-top)) {
    @media (max-width: 768px) {
        body {
            padding-left:   max(16px, env(safe-area-inset-left));
            padding-right:  max(16px, env(safe-area-inset-right));
            padding-bottom: max(16px, env(safe-area-inset-bottom));
        }
    }
}

/* ============================================================
   ACCESSIBILITY
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    /* EXCEPTION — the loading overlay indicators are functional status
       feedback, not decoration. A frozen spinner reads as "the app hung",
       so they keep animating even with reduced motion enabled
       (e.g. Windows "Animation effects" turned off). */
    .loading-overlay .spinner-ring {
        animation: spin 1.5s linear infinite !important;
    }

    .loading-overlay .loading-dots span {
        animation: dotBounce 1.4s ease-in-out infinite !important;
    }

    .loading-overlay .loading-progress-fill {
        animation: progressFill 2.4s ease-in-out infinite !important;
    }
}

*:focus-visible {
    outline: 2px solid var(--amber);
    outline-offset: 2px;
}