/* ============================================================
   Izipass — brand mapping + application-specific selectors (.izipass-*)

   Design system: Standalone/Codli.Design (codli-design.css, loaded first).
   Never define new .r-* components here and never use hex outside the :root block.
   Two areas with their own accent (owner's decision, 2026-10-29, as in the first Izipass):
   - learning area and logo: .NET purple, --brand-700 = #512BD4 (white text 7.94:1);
   - admin panel ([data-area="admin"]): red of the first Izipass, --brand-700 = #B71C1C (6.57:1).
   The learning area has its own layout (.izipass-learn-*), not the Codli admin shell; Izipass 01
   designs its final look and documents every .izipass-* class in Wiki/Izipass/Design-System.md.
   ============================================================ */

:root {
    --brand-50:  #f3effd;
    --brand-100: #e6defb;
    --brand-200: #cdbcf7;
    --brand-300: #a98ff0;
    --brand-400: #8462e6;
    --brand-500: #6a41dd;
    --brand-600: #5a32d8;
    --brand-700: #512bd4;
    --brand-800: #4122ab;
    --brand-900: #311a82;
    --brand-950: #1f1052;

    /* Admin red outside the admin panel (staff-only shortcut in the learning area). */
    --izipass-admin-accent: #b71c1c;
    --izipass-admin-accent-dark: #ee7b7b;
    --izipass-on-brand: #ffffff;
}

[data-area="admin"] {
    --brand-50:  #fdecec;
    --brand-100: #fbd5d5;
    --brand-200: #f5aaaa;
    --brand-300: #ee7b7b;
    --brand-400: #e35050;
    --brand-500: #d32f2f;
    --brand-600: #c62828;
    --brand-700: #b71c1c;
    --brand-800: #921616;
    --brand-900: #6e1010;
    --brand-950: #450a0a;
}

body { margin: 0; }
a { color: var(--brand-700); }
:where([data-theme="dark"]) a { color: var(--brand-300); }

/* Wordmark — the same in sidebar, splash, auth and error screens. */
.izipass-wordmark {
    font-family: var(--font-sans);
    font-weight: 600;
    letter-spacing: var(--tracking-tight);
}
.r-brand .izipass-wordmark { font-size: var(--t-h3); }
.r-brand-mark img { width: 32px; height: 32px; }
.izipass-brand-link { color: inherit; text-decoration: none; }
.izipass-brand-link:focus-visible { outline: none; box-shadow: var(--shadow-focus-ring); }

.izipass-topbar-title {
    font-size: var(--t-body);
    font-weight: 600;
    color: var(--text-primary);
}
.izipass-user { margin-left: auto; }
.izipass-user--fragnal { display: flex; align-items: center; gap: var(--s-2); min-width: 0; }
@media (max-width: 640px) {
    .izipass-user .r-user-pill-name,
    .izipass-user .blazing-fragnal-badge__name { display: none; }
    .izipass-user .blazing-fragnal-badge__user { padding-right: 0; }
}

.izipass-update-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    margin-bottom: var(--s-5);
}
.izipass-update-banner .r-btn { min-height: 44px; flex-shrink: 0; }

/* Blazor's unhandled-error strip: hidden until the framework shows it, then a bottom bar. */
#blazor-error-ui {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    align-items: center;
    gap: var(--s-4);
    padding: var(--s-3) max(var(--s-4), env(safe-area-inset-right)) max(var(--s-3), env(safe-area-inset-bottom)) max(var(--s-4), env(safe-area-inset-left));
    background: var(--status-rejected-bg);
    color: var(--status-rejected-fg);
    border-top: 1px solid var(--status-rejected-solid);
    font-size: var(--t-body);
}
#blazor-error-ui[style*="block"] { display: flex !important; }
#blazor-error-ui .reload { font-weight: 600; color: inherit; min-height: 44px; display: inline-flex; align-items: center; }
#blazor-error-ui .dismiss { margin-left: auto; min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }

/* Small layout helpers inside cards (instead of inline flex styles). */
.izipass-stack { display: flex; flex-direction: column; gap: var(--s-3); }
.izipass-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); flex-wrap: wrap; }
.izipass-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.izipass-flush { margin: 0; }
.izipass-section-gap { margin-top: var(--s-6); }
.izipass-touch { min-height: 44px; min-width: 44px; touch-action: manipulation; }

/* Installed PWA: keep content clear of the home indicator. */
.r-main { padding-bottom: max(var(--s-6), env(safe-area-inset-bottom)); }

/* Admin panel: small "admin" tag next to the wordmark, in the red accent. */
.izipass-admin-tag {
    margin-left: var(--s-2);
    padding: 2px var(--s-2);
    border-radius: var(--r-pill, 999px);
    background: var(--brand-700);
    color: var(--izipass-on-brand);
    font-size: var(--t-micro, 11px);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ============================================================
   LEARNING AREA — own layout (no sidebar), first step before the Izipass 01 design.
   ============================================================ */
.izipass-learn {
    min-height: 100dvh;
    background:
        radial-gradient(1200px 400px at 50% -120px, var(--brand-100), transparent 70%),
        var(--bg-app);
    color: var(--text-primary);
}
:where([data-theme="dark"]) .izipass-learn {
    background: radial-gradient(1200px 400px at 50% -120px, color-mix(in srgb, var(--brand-900) 60%, transparent), transparent 70%), var(--bg-app);
}
.izipass-learn-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    max-width: 1080px;
    margin: 0 auto;
    padding: max(var(--s-4), env(safe-area-inset-top)) var(--s-5) var(--s-4);
}
.izipass-learn-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
    color: inherit;
    text-decoration: none;
    font-size: var(--t-h3);
}
.izipass-learn-brand img { width: 36px; height: 36px; }
.izipass-learn-nav { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; justify-content: flex-end; }
.izipass-learn-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 var(--s-3);
    border: 0;
    border-radius: var(--r-pill, 999px);
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
}
.izipass-learn-link:hover { background: var(--brand-50); color: var(--brand-800); }
.izipass-learn-link:focus-visible { outline: none; box-shadow: var(--shadow-focus-ring); }
/* Staff-only shortcut, in the admin red so it is clearly a different place. */
.izipass-learn-link--admin { color: var(--izipass-admin-accent); }
:where([data-theme="dark"]) .izipass-learn-link--admin { color: var(--izipass-admin-accent-dark); }
.izipass-learn-main {
    max-width: 1080px;
    margin: 0 auto;
    padding: var(--s-4) var(--s-5) max(var(--s-8, 48px), env(safe-area-inset-bottom));
}

.izipass-hello { margin: var(--s-6) 0 var(--s-6); }
.izipass-hello-title {
    margin: 0;
    font-size: clamp(28px, 5vw, 44px);
    font-weight: 700;
    letter-spacing: var(--tracking-tight);
}
.izipass-hello-text { margin: var(--s-2) 0 0; color: var(--text-secondary); font-size: var(--t-body-lg, 17px); }

.izipass-mode-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--s-5);
}
.izipass-mode {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    padding: var(--s-6);
    border-radius: 20px;
    background: var(--bg-surface);
    box-shadow: 0 10px 30px -18px color-mix(in srgb, var(--brand-700) 55%, transparent);
    border-top: 6px solid var(--brand-500);
}
.izipass-mode--test { border-top-color: var(--brand-700); }
.izipass-mode--mistakes { border-top-color: var(--brand-300); }
.izipass-mode-title { margin: 0; font-size: var(--t-h3); font-weight: 700; }
.izipass-mode-text { margin: 0; color: var(--text-secondary); flex: 1; }
.izipass-mode-btn {
    min-height: 48px;
    border: 0;
    border-radius: 14px;
    background: var(--brand-700);
    color: var(--izipass-on-brand);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.izipass-mode-btn:disabled { opacity: 0.55; cursor: default; }

/* Settings: one-time invitation link shown when SMTP is not configured. */
.izipass-link-box {
    font-family: var(--font-mono);
    font-size: var(--t-small);
    word-break: break-all;
}
.izipass-inline-select { min-width: 150px; }