/* =============================================================================
 * icardauth.css - sdilene styly prihlasovacich obrazovek administrace:
 *   app/templates/Auth/login.latte          (prihlaseni)
 *   app/templates/Auth/resetpassword.latte  (zadost o reset hesla)
 *   app/templates/Auth/newpassword.latte    (nastaveni noveho hesla z e-mailu)
 *
 * Proc soubor a ne <style> v sablone: styl byl driv inline v login.latte
 * a obe reset obrazovky si vezly starsi kopii (bily gradient, modre tlacitko).
 * Rozesly se. Jediny zdroj pravdy to drzi pohromade - kdo zmeni login,
 * zmeni tim i obe reset obrazovky.
 *
 * MIMO gruntovane bundly. Cache-busting je datovy (?v=<Ymd> v sablonach),
 * takze editace tehoz dne potrebuje hard refresh - stejne jako u zbytku CMS.
 * Pismo Open Sans linkuji sablony samy (preconnect + Google Fonts).
 * ========================================================================== */

    :root {

        /* light theme*/

        --color-primary: #2A2A31;

        --color-primary-text: #FFFFFF;

        --color-bg:rgb(233, 238, 235);

        --color-surface: #FFFFFF;

        --color-text: #0F172A;

        --color-muted: #64748B;

        --color-border: #E5E7EB;

        --color-error: #B91C1C;



        --radius-md: 6px;

        --shadow-sm: 0 1px 2px rgba(16,24,40,0.04), 0 1px 3px rgba(16,24,40,0.1);

        --shadow-md: 0 8px 24px rgba(16,24,40,0.08);

        --focus-ring: 0 0 0 3px rgba(42,42,49,0.15);

        /*--font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji";*/

        --font-sans: 'Open Sans', sans-serif;

        --space-1: .25rem;

        --space-2: .5rem;

        --space-3: .75rem;

        --space-4: 1rem;

        --space-5: 1.25rem;

        --space-6: 1.5rem;

    }





    html, body {

        height: 100%;

        background: var(--color-bg);

        color: var(--color-text);

        font-family: var(--font-sans);

        font-size: 16px;

        line-height: 1.5;

        -webkit-font-smoothing: antialiased;

        -moz-osx-font-smoothing: grayscale;

    }



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

    a:hover { text-decoration: underline; }



    .page {

        min-height: 100vh;

        display: grid;

        place-items: center;

    }



    #login.card {

        width: 100%;

        max-width: 420px;

        /*background: var(--color-surface);*/

        /*border: 1px solid var(--color-border);

        border-radius: var(--radius-md);*/

        /*box-shadow: var(--shadow-md);*/

    }



    .header { margin-bottom: var(--space-5);text-align: center; }

    .brand { margin: 0; font-size: 1.6rem; font-weight: 700;color: var(--color-text); }

    .brand a { color: var(--color-text); }

    .subtitle { margin: var(--space-2) 0 0; color: var(--color-muted); font-size: 1rem; }



    .form { margin: 0; }

    .field { margin-bottom: var(--space-4); }

    .field input[type="text"],

    .field input[type="email"],

    .field input[type="password"] {

        width: 100%;

        appearance: none;

        background: var(--color-surface);

        border: 1px solid var(--color-border);

        border-radius: var(--radius-md);

        padding: .9rem 1rem;

        font-weight: 600;

        font-size: 1.4rem;

        color: var(--color-text);

        transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;

    }

    .field input:focus {

        outline: none;

        border-color: var(--color-primary);

        box-shadow: var(--focus-ring);

    }



    .field input:is(:-webkit-autofill, :autofill) {

        

    }



    .actions { margin-top: var(--space-3); }

    .button {

        width: 100%;

        border: 1px solid var(--color-primary);

        background: var(--color-primary);

        color: var(--color-primary-text);

        font-size: 1.2rem;

        font-weight: 700;

        padding: .9rem 1rem;

        border-radius: var(--radius-md);

        cursor: pointer;

        transition: background .15s ease, transform .02s ease, opacity .2s ease;

    }

    .button:hover { filter: brightness(0.95); }

    .button:active { transform: translateY(1px); }

    .button:disabled { opacity: .6; cursor: not-allowed; }



    .help { margin: var(--space-3) 0 0; text-align: left;text-align:center; }

    .help a { font-weight: 600; color: var(--color-text); }

    .help a:hover { text-decoration: underline; }



    .alerts { margin-bottom: var(--space-4); }

    .alert {

        padding: .875rem 1rem;

        border: 1px solid rgba(185,28,28,.25);

        background: #FEF2F2;

        color: var(--color-error);

        border-radius: var(--radius-md);

    }

    .alert ul { margin: 0; padding: 0;list-style: none; }

    .alert li { margin: .2rem 0;list-style: none; }

    .alert-action { display: inline-block; margin-top: .5rem; font-weight: 700; }



    .meta {

        margin-top: var(--space-5);

        text-align: center;

        color: var(--color-muted);

    }

    .meta a { font-size: 12px; font-family: ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; color: var(--color-muted); }

    .meta small { display: block; font-size: 11px; font-family: ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }



    .spinner { display:inline-block; width:16px; height:16px; border-radius:50%; border:2px solid rgba(255,255,255,0.35); border-top-color:#fff; animation: spin 1s linear infinite; vertical-align:-3px; margin-left:.5rem }

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



    @media (max-width: 480px) {

        .brand { font-size: 1.2rem; }

    }



    /* Honeypot: pole je odsunuté mimo viewport. Vědomě NE display:none ani

       visibility:hidden - to bot pozná a pole přeskočí. */

    .field-alt {

        position: absolute !important;

        left: -9999px !important;

        top: -9999px !important;

        width: 1px;

        height: 1px;

        overflow: hidden;

    }



    input:-webkit-autofill,

    input:-webkit-autofill:hover,

    input:-webkit-autofill:focus {

        -webkit-text-fill-color: inherit;

        -webkit-box-shadow: 0 0 0px 1000px #ffffff inset;

        box-shadow: 0 0 0px 1000px #ffffff inset;

        transition: background-color 9999s ease-in-out 0s;

    }

/* ---------------------------------------------------------------------------
 * Metr sily hesla (newpassword.latte). Pravidla vykresluje ICARD\PasswordPolicy
 * do data-* atributu, JS je odtud jen cte - viz sablona.
 * ------------------------------------------------------------------------- */
.pwmeter { margin-top: var(--space-2); }

.pwmeter-track {
    height: 4px;
    background: var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.pwmeter-bar {
    height: 100%;
    width: 0;
    background: var(--color-error);
    transition: width .2s ease, background .2s ease;
}

.pwmeter-bar.is-medium { background: #B45309; }
.pwmeter-bar.is-strong { background: #15803D; }

.pwmeter-rules {
    margin: var(--space-2) 0 0;
    padding: 0;
    list-style: none;
    color: var(--color-muted);
    font-size: .8rem;
}

.pwmeter-rules li { margin: .15rem 0; list-style: none; }
.pwmeter-rules li.is-ok { color: #15803D; }

/* Vysvetlujici text nad formularem (obe reset obrazovky). */
.lead {
    margin: 0 0 var(--space-4);
    color: var(--color-muted);
    font-size: .95rem;
    text-align: center;
}