/* ============ Zindl design system — teal brand ============ */
:root {
    /* Brand */
    --zn-teal:        #15C0B4;  /* primary */
    --zn-teal-bright: #2AD8CE;  /* highlight / glow */
    --zn-teal-deep:   #0E9E95;  /* hover / pressed */
    --zn-night:       #0A1417;  /* near-black teal (login base) */
    --zn-night-2:     #0F2024;  /* raised dark surface */

    /* Aliases kept so existing components resolve to the brand automatically */
    --zn-midnight: #0A1417;
    --zn-indigo:   #15C0B4;
    --zn-amber:    #F4A623;     /* retained as the warning / attention accent only */

    /* Neutrals (light app chrome) */
    --zn-ink:   #0E2A2E;
    --zn-muted: #6b7f82;
    --zn-line:  #e4ecec;
    --zn-bg:    #f3f8f7;

    /* The whole UI reads these; the brand is now fixed (no per-tenant palette) */
    --ss-primary: var(--zn-teal);
    --ss-accent:  var(--zn-teal-bright);
}

html, body {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    color: var(--zn-ink);
    background-color: var(--zn-bg);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-weight: 700; letter-spacing: -0.01em; }

a, .btn-link { color: var(--ss-primary, var(--zn-teal)); text-decoration: none; }

.btn-primary {
    color: #fff;
    background-color: var(--ss-primary, var(--zn-teal));
    border-color: var(--ss-primary, var(--zn-teal));
}
.btn-primary:hover, .btn-primary:focus { background-color: var(--zn-teal-deep); border-color: var(--zn-teal-deep); }

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem #fff, 0 0 0 0.25rem rgba(21, 192, 180, .45);
}

/* ============================================================
   Sign-in — a centred, brand-forward card floating over a
   split-tone teal backdrop with the logo swoosh as artwork.
   No external providers / self-registration (accounts are
   provisioned). Scoped under .zn-login so nothing leaks.
   ============================================================ */
.zn-login {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.5rem;
    color: #eaf6f5;
    overflow: hidden;
}

/* Split-left/right backdrop + brand glows */
.zn-login-bg {
    position: absolute; inset: 0; z-index: 0; overflow: hidden;
    background:
        radial-gradient(1200px 820px at 16% 18%, rgba(42, 216, 206, .14), transparent 60%),
        radial-gradient(1000px 720px at 86% 86%, rgba(21, 192, 180, .12), transparent 60%),
        linear-gradient(90deg, #06100F 0%, #0A1A1B 49.4%, #0D2E2A 50.6%, #103A34 100%);
}

/* Big translucent brand swoosh, angled across the backdrop behind the card */
.zn-login-swoosh {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-9deg);
    width: min(1080px, 120vw); pointer-events: none; opacity: .30;
}
.zn-login-swoosh svg { width: 100%; height: auto; display: block; }

/* Centred vertical stack: lockup · headline · card · features */
.zn-login-stack {
    position: relative; z-index: 1;
    display: flex; flex-direction: column; align-items: center;
    gap: 1.1rem; width: 100%; max-width: 420px;
}
.zn-login-logo { width: 200px; max-width: 70%; height: auto; }
.zn-login-headline {
    font-size: clamp(1.7rem, 3.4vw, 2.2rem); line-height: 1.06; font-weight: 800;
    text-align: center; margin: -.1rem 0 .1rem; color: #fff;
}
.zn-login-headline .accent { color: var(--zn-teal-bright); }

/* Feature strip beneath the card */
.zn-login-feats { display: flex; justify-content: center; flex-wrap: wrap; margin-top: .3rem; }
.zn-feat { display: flex; flex-direction: column; align-items: center; gap: .4rem; padding: 0 1.05rem; text-align: center; border-right: 1px solid rgba(255, 255, 255, .1); }
.zn-feat:last-child { border-right: none; }
.zn-feat svg { width: 22px; height: 22px; color: var(--zn-teal-bright); }
.zn-feat span { font-size: .63rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #cfe6e4; line-height: 1.2; }

/* ---- Sign-in card ---- */
.zn-login-card {
    width: 100%;
    background: rgba(15, 30, 33, .74);
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 20px;
    padding: 1.6rem 1.9rem;
    backdrop-filter: blur(16px);
    box-shadow: 0 30px 70px rgba(0, 0, 0, .5);
}
.zn-login-card-brand { display: flex; justify-content: center; margin-bottom: .7rem; }
.zn-login-card-brand img { width: 46px; height: 46px; }

.zn-login-welcome { text-align: center; margin-bottom: 1.1rem; }
.zn-login-welcome h2 { font-size: 1.35rem; color: #fff; margin: 0; font-weight: 700; }
.zn-login-welcome p { color: #8fa8a6; margin: .15rem 0 0; font-size: .9rem; }

.zn-field { position: relative; margin-bottom: .7rem; }
.zn-field .zn-field-ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: #7f9997; pointer-events: none; }
.zn-login-card .zn-input {
    width: 100%; height: 46px; padding: 0 14px 0 42px;
    background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 11px; color: #fff; font-size: .95rem;
}
.zn-login-card .zn-input::placeholder { color: #7f9997; }
.zn-login-card .zn-input:focus { outline: none; border-color: var(--zn-teal); background: rgba(255, 255, 255, .08); box-shadow: 0 0 0 3px rgba(21, 192, 180, .18); }

.zn-login-row { display: flex; align-items: center; justify-content: space-between; margin: .25rem 0 1rem; }
.zn-remember { display: inline-flex; align-items: center; gap: .5rem; margin: 0; color: #b8ccca; font-size: .88rem; cursor: pointer; }
.zn-remember input { width: 18px; height: 18px; accent-color: var(--zn-teal); }
.zn-login-forgot { color: var(--zn-teal-bright); font-size: .88rem; font-weight: 600; }

.zn-login-btn {
    width: 100%; height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
    background: linear-gradient(180deg, var(--zn-teal-bright) 0%, var(--zn-teal) 100%);
    color: #04201d; font-weight: 800; font-size: 1rem; letter-spacing: .01em;
    border: none; border-radius: 11px; cursor: pointer;
    box-shadow: 0 12px 26px rgba(21, 192, 180, .32); transition: filter .15s ease, transform .05s ease;
}
.zn-login-btn:hover { filter: brightness(1.05); }
.zn-login-btn:active { transform: translateY(1px); }
.zn-login-btn svg { width: 18px; height: 18px; }

.zn-login-error { background: rgba(220, 38, 38, .14); border: 1px solid rgba(248, 113, 113, .4); color: #fecaca; border-radius: 10px; padding: .55rem .8rem; font-size: .88rem; margin-bottom: .9rem; }
.zn-login-card .validation-message, .zn-login-card .text-danger { color: #fca5a5; font-size: .82rem; }
.zn-login-legal { text-align: center; color: #6f8785; font-size: .77rem; margin: 1rem 0 0; }

@media (max-width: 560px) {
    .zn-login-logo { width: 170px; }
    .zn-login-headline { font-size: 1.6rem; }
    .zn-feat { padding: 0 .65rem; }
    .zn-feat span { font-size: .56rem; }
}

/* ---- White-label dashboard shell ---- */
.ss-hero { padding: 1.5rem 0 0.5rem; }
.ss-hero h1 { font-weight: 600; color: var(--ss-primary, var(--zn-teal)); margin-bottom: 0.25rem; }
.ss-subtle { color: var(--zn-muted); font-size: 0.9rem; }
.ss-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-top: 1rem; }
.ss-card {
    background: #fff; border: 1px solid var(--zn-line); border-top: 3px solid var(--ss-accent, var(--zn-teal-bright));
    border-radius: 10px; padding: 1.1rem 1.25rem; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}
.ss-card h3 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--zn-muted); margin: 0 0 0.4rem; }
.ss-metric { font-size: 2rem; font-weight: 600; color: var(--zn-ink); margin: 0 0 0.25rem; }

.content { padding-top: 1.1rem; }
h1:focus { outline: none; }

.valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; }
.invalid { outline: 1px solid #e50000; }
.validation-message { color: #e50000; }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}
.blazor-error-boundary::after { content: "An error has occurred." }

.darker-border-checkbox.form-check-input { border-color: #929292; }