/* ==========================================================================
   Frosin - Gestaltung des Passwortportals
   Wird ueber $custom_css geladen und liegt getrennt von der Anwendung,
   damit ein Update von LTB SSP nichts ueberschreibt.
   ========================================================================== */

:root {
    --frosin-blau:        #1c3f6e;
    --frosin-blau-hell:   #2d5c9e;
    --frosin-akzent:      #3d8bcd;
    --grund:              #f4f6f9;
    --karte:              #ffffff;
    --text:               #1f2933;
    --text-leise:         #5b6b7c;
    --rand:               #dde3ea;
    --gut:                #1b7f4f;
    --warn:               #9a6a00;
    --schlecht:           #b3261e;
    --radius:             14px;
    --schatten:           0 10px 30px rgba(28, 63, 110, .10),
                          0  2px  6px rgba(28, 63, 110, .06);
}

/* ---------- Grundflaeche ---------- */
body {
    background: linear-gradient(160deg, #eef2f7 0%, #e3ebf4 45%, #dce6f2 100%);
    color: var(--text);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Kopfleiste der Anwendung zurueckhaltend halten */
.navbar, nav.navbar {
    background: var(--frosin-blau) !important;
    border: 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
}
.navbar a, .navbar .navbar-brand, .navbar .nav-link {
    color: #fff !important;
    font-weight: 500;
}
.navbar .nav-link:hover { color: var(--frosin-akzent) !important; }

/* ---------- Inhaltskarte ---------- */
.container, .container-fluid { max-width: 720px; }

.panel, .card, .well, form {
    background: var(--karte);
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    box-shadow: var(--schatten);
}

.panel-heading, .card-header {
    background: transparent;
    border-bottom: 1px solid var(--rand);
    border-radius: var(--radius) var(--radius) 0 0;
    padding: 1.1rem 1.4rem;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--frosin-blau);
}
.panel-body, .card-body { padding: 1.4rem; }

h1, h2, h3 { color: var(--frosin-blau); font-weight: 600; letter-spacing: -.01em; }

/* ---------- Eingabefelder ---------- */
.form-control, input[type="text"], input[type="password"] {
    border: 1px solid var(--rand);
    border-radius: 10px;
    padding: .7rem .9rem;
    font-size: 1rem;
    transition: border-color .15s ease, box-shadow .15s ease;
    background: #fcfdfe;
}
.form-control:focus, input[type="text"]:focus, input[type="password"]:focus {
    border-color: var(--frosin-akzent);
    box-shadow: 0 0 0 3px rgba(61, 139, 205, .18);
    outline: none;
    background: #fff;
}
label, .control-label { font-weight: 600; color: var(--text-leise); font-size: .92rem; }

.input-group-addon, .input-group-text {
    background: #eef3f9;
    border: 1px solid var(--rand);
    color: var(--frosin-blau);
    border-radius: 10px 0 0 10px;
}

/* ---------- Schaltflaechen ---------- */
.btn, button, input[type="submit"] {
    border-radius: 10px;
    font-weight: 600;
    padding: .65rem 1.4rem;
    border: 0;
    transition: transform .08s ease, box-shadow .15s ease, background .15s ease;
}
.btn-primary, .btn-success, input[type="submit"] {
    background: linear-gradient(180deg, var(--frosin-blau-hell), var(--frosin-blau));
    color: #fff;
    box-shadow: 0 4px 12px rgba(28, 63, 110, .25);
}
.btn-primary:hover, .btn-success:hover, input[type="submit"]:hover {
    background: linear-gradient(180deg, var(--frosin-akzent), var(--frosin-blau-hell));
    transform: translateY(-1px);
}
.btn-primary:active, input[type="submit"]:active { transform: translateY(0); }

/* ---------- Meldungen ---------- */
.alert {
    border: 0;
    border-left: 4px solid;
    border-radius: 10px;
    padding: .9rem 1.1rem;
    font-size: .95rem;
}
.alert-success { background: #e8f6ee; border-color: var(--gut);      color: #14603c; }
.alert-danger  { background: #fdecea; border-color: var(--schlecht); color: #8c1d18; }
.alert-warning { background: #fdf3e0; border-color: var(--warn);     color: #6d4c00; }
.alert-info    { background: #eaf2fb; border-color: var(--frosin-akzent); color: #17457a; }

/* ---------- Passwortregeln ---------- */
#policy, .policy, ul.policy {
    background: #f7f9fc;
    border: 1px solid var(--rand);
    border-radius: 10px;
    padding: .9rem 1.1rem;
    font-size: .88rem;
    color: var(--text-leise);
    list-style: none;
}
#policy li, .policy li { padding: .18rem 0; }
.text-success, .fa-check, .fa-circle-check { color: var(--gut) !important; }
.text-danger,  .fa-times, .fa-circle-xmark { color: var(--schlecht) !important; }

/* Staerkeanzeige */
.progress { height: 8px; border-radius: 99px; background: #e6ecf3; }
.progress-bar { border-radius: 99px; }

/* ---------- CAPTCHA ---------- */
img[src*="captcha"], .captcha img {
    border: 1px solid var(--rand);
    border-radius: 10px;
    background: #fff;
}
#captcha-refresh {
    cursor: pointer;
    color: var(--frosin-akzent);
}

/* ---------- Fusszeile ---------- */
footer, .footer {
    margin-top: auto;
    padding: 1.4rem 0;
    text-align: center;
    font-size: .82rem;
    color: var(--text-leise);
}
footer a, .footer a { color: var(--frosin-blau-hell); }

/* ---------- Kleine Geraete ---------- */
@media (max-width: 576px) {
    .container, .container-fluid { padding: 0 .8rem; }
    .panel-body, .card-body { padding: 1.1rem; }
    .btn, input[type="submit"] { width: 100%; }
}