/* Fonts served by the back-office itself, never by Google (GDPR: visitors' IP addresses stay here). Variable fonts. */
@font-face {
    font-family: Inter;
    src: url("fonts/Inter.ttf") format("truetype");
    font-weight: 100 900;
    font-display: swap;
}

@font-face {
    font-family: "Space Grotesk";
    src: url("fonts/SpaceGrotesk.ttf") format("truetype");
    font-weight: 300 700;
    font-display: swap;
}

html, body {
    font-family: Inter, Helvetica, Arial, sans-serif;
}

.fz-logo {
    font-family: "Space Grotesk", Inter, sans-serif;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.fz-logo-mark {
    width: 32px;
    height: 32px;
    vertical-align: middle;
}

/* Static sign-in pages: plain inputs styled like the rest of the back-office. */
.fz-auth-input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #CBD5E1;
    border-radius: 10px;
    font-size: 1rem;
    margin-bottom: 16px;
    box-sizing: border-box;
}

.fz-auth-input:focus {
    outline: 2px solid #3B5BFF;
    border-color: transparent;
}

.fz-auth-label {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
}

.fz-auth-button {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(90deg, #3B5BFF, #D21FCB);
    color: white;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
}

.fz-auth-error {
    background: #FEF2F2;
    color: #B91C1C;
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 16px;
}

.fz-auth-success {
    background: #F0FDF4;
    color: #166534;
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 16px;
}

.fz-auth-link {
    display: block;
    text-align: right;
    font-size: 0.875rem;
    margin: -6px 0 16px;
}

.validation-message {
    color: #B91C1C;
    margin: -10px 0 12px;
    font-size: 0.875rem;
}

/* Specifications (super admin): Markdown rendered as a readable page. */
.fz-spec { overflow-wrap: anywhere; line-height: 1.6; }
.fz-spec h1 { font-size: 1.75rem; margin: 0 0 16px; }
.fz-spec h2 { font-size: 1.35rem; margin: 28px 0 12px; padding-bottom: 4px; border-bottom: 1px solid #E2E8F0; }
.fz-spec h3 { font-size: 1.1rem; margin: 20px 0 8px; }
.fz-spec p, .fz-spec ul, .fz-spec ol { margin: 0 0 12px; }
.fz-spec ul, .fz-spec ol { padding-left: 24px; }
.fz-spec li { margin-bottom: 4px; }
.fz-spec a { color: #2A3FD6; }
.fz-spec code { background: #F1F5F9; padding: 1px 5px; border-radius: 4px; font-size: 0.9em; }
.fz-spec pre { background: #F1F5F9; padding: 12px; border-radius: 8px; overflow-x: auto; }
.fz-spec pre code { background: none; padding: 0; }
.fz-spec table { display: block; overflow-x: auto; border-collapse: collapse; margin: 0 0 16px; font-size: 0.9rem; }
.fz-spec th, .fz-spec td { border: 1px solid #E2E8F0; padding: 6px 10px; text-align: left; vertical-align: top; }
.fz-spec th { background: #F8FAFC; }
.fz-spec blockquote { margin: 0 0 12px; padding: 4px 12px; border-left: 4px solid #CBD5E1; color: #475569; }

/* Full-screen visual e-mail editor (notification templates). */
.fz-email-editor-content {
    padding: 0 !important;
    height: calc(100vh - 140px);
}

/* Contract preview and signature placement (SPEC-132). */
.fz-pages { display: flex; flex-direction: column; gap: 6px; }
.fz-page { position: relative; width: 100%; max-width: 820px; box-shadow: 0 2px 12px rgba(27, 21, 48, .18); background: #fff; cursor: crosshair; user-select: none; touch-action: none; margin-bottom: 14px; }
.fz-page img { display: block; width: 100%; height: auto; pointer-events: none; }
.fz-sig { position: absolute; border: 2px dashed; border-radius: 4px; display: flex; align-items: center; justify-content: center; font: 600 12px/1.2 Inter, sans-serif; cursor: move; touch-action: none; }
.fz-sig[data-locked="true"] { cursor: default; }
.fz-sig span { pointer-events: none; padding: 2px 6px; border-radius: 3px; background: rgba(255, 255, 255, .85); }
.fz-sig-platform { border-color: #7B2FF7; background: rgba(123, 47, 247, .12); color: #5a1fc0; }
.fz-sig-partner { border-color: #E5318A; background: rgba(229, 49, 138, .12); color: #a8185f; }
.fz-sig-selected { border-style: solid; box-shadow: 0 0 0 3px rgba(123, 47, 247, .25); }
.fz-sig-dragging { opacity: .8; }
.fz-sig-handle { position: absolute; right: -6px; bottom: -6px; width: 12px; height: 12px; border-radius: 50%; background: currentColor; cursor: nwse-resize; }
.fz-contract-tabs, .fz-contract-tabs .mud-tabs-panels { overflow: visible; }

/* Partner portal: ticket scanner (SPEC-502 §2.2). */
.fz-scanner { position: relative; aspect-ratio: 4 / 3; max-height: 420px; width: 100%; border-radius: 12px; overflow: hidden; background: #0A1440; }
.fz-scanner-video { width: 100%; height: 100%; object-fit: cover; display: none; }
.fz-scanner--on .fz-scanner-video { display: block; }
.fz-scanner-placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: #C7CEF5; text-align: center; padding: 16px; }
.fz-scanner-frame { position: absolute; inset: 18% 22%; border: 3px solid rgba(255, 255, 255, .9); border-radius: 16px; box-shadow: 0 0 0 9999px rgba(10, 20, 64, .35); }
.fz-scanner-frame::after { content: ""; position: absolute; left: 8%; right: 8%; height: 2px; top: 10%; background: #7DEE82; box-shadow: 0 0 12px #7DEE82; animation: fz-scan-line 2s ease-in-out infinite alternate; }
@keyframes fz-scan-line { from { top: 10%; } to { top: 88%; } }
@media (prefers-reduced-motion: reduce) { .fz-scanner-frame::after { animation: none; top: 50%; } }
.fz-code-input { flex: 1; min-width: 0; font-size: 1.6rem; letter-spacing: .12em; text-transform: uppercase; font-family: ui-monospace, Menlo, Consolas, monospace; padding: 10px 14px; border: 2px solid var(--mud-palette-lines-inputs); border-radius: 10px; background: var(--mud-palette-surface); color: var(--mud-palette-text-primary); }
.fz-code-input:focus { outline: none; border-color: var(--mud-palette-primary); }
.fz-scan-result { border-radius: 16px; color: #fff; animation: fz-pop .25s ease-out; }
.fz-scan-result--ok { background: #0E9F6E; }
.fz-scan-result--warn { background: #C27803; }
.fz-scan-result--ko { background: #D92D20; }
@keyframes fz-pop { from { transform: scale(.96); opacity: .4; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .fz-scan-result { animation: none; } }
.fz-kpi { height: 100%; }
.fz-event-row { cursor: pointer; }
.fz-date-block { width: 56px; min-width: 56px; text-align: center; border-radius: 10px; padding: 6px 0; background: var(--mud-palette-primary); color: var(--mud-palette-primary-text); }
.fz-date-day { font-size: 1.4rem; font-weight: 700; line-height: 1.1; }
.fz-date-month { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; }
.fz-event-row { transition: border-color .15s ease, transform .15s ease; }
.fz-event-row:hover { border-color: var(--mud-palette-primary); transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) { .fz-event-row { transition: none; } .fz-event-row:hover { transform: none; } }
.fz-cover-choice { width: 120px; height: 80px; object-fit: cover; border-radius: 8px; cursor: pointer; border: 3px solid transparent; }
.fz-cover-choice--on { border-color: var(--mud-palette-primary); }

/* Category logos (illustrated stickers, 2026-11-04) */
.fz-cat-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    border-radius: 30%;
}
/* The illustrated logos are drawn bare, without a tile behind them. */
.fz-cat-logo img { width: 100%; height: 100%; object-fit: contain; }
.fz-logo-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.fz-logo-picker button {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 8px 4px; border-radius: 12px; border: 2px solid transparent;
    background: rgba(59, 91, 255, .04); cursor: pointer; font: inherit; font-size: 12px; color: inherit;
}
.fz-logo-picker button:hover { background: rgba(59, 91, 255, .10); }
.fz-logo-picker button.selected { border-color: #3B5BFF; background: rgba(59, 91, 255, .12); font-weight: 600; }

/* Live connection lost (see js/reconnect.js): hidden until Blazor adds a components-reconnect-* class. */
.fz-reconnect { display: none; position: fixed; inset: 0; z-index: 10000; align-items: center; justify-content: center; padding: 16px; }
/* MudBlazor paints this element with the page background: keep the page visible behind the card. */
#components-reconnect-modal.fz-reconnect { background-color: rgba(10, 20, 64, .35) !important; }
.fz-reconnect.components-reconnect-show,
.fz-reconnect.components-reconnect-retrying,
.fz-reconnect.components-reconnect-failed,
.fz-reconnect.components-reconnect-rejected { display: flex; }
.fz-reconnect-card { max-width: 380px; width: 100%; background: #fff; color: #0A1440; border-radius: 14px; padding: 24px; text-align: center; box-shadow: 0 10px 30px rgba(10, 20, 64, .25); font-family: inherit; }
.fz-reconnect-card p { margin: 0 0 8px; }
.fz-reconnect-hint { color: #64748B; font-size: .9rem; }
.fz-reconnect-spinner { width: 36px; height: 36px; margin: 0 auto 14px; border-radius: 50%; border: 4px solid #E2E8F0; border-top-color: #3D5AFE; animation: fz-reconnect-spin 1s linear infinite; }
@keyframes fz-reconnect-spin { to { transform: rotate(360deg); } }
.fz-reconnect-reloading, .fz-reconnect-stopped, .fz-reconnect-reload { display: none; }
.fz-reconnect.components-reconnect-failed .fz-reconnect-waiting,
.fz-reconnect.components-reconnect-failed .fz-reconnect-hint { display: none; }
.fz-reconnect.components-reconnect-failed .fz-reconnect-stopped,
.fz-reconnect.components-reconnect-failed .fz-reconnect-reload { display: block; margin: 12px auto 0; }
.fz-reconnect.components-reconnect-failed .fz-reconnect-stopped { margin-top: 0; }
.fz-reconnect.fz-reconnect-reloading-now .fz-reconnect-waiting,
.fz-reconnect.fz-reconnect-reloading-now .fz-reconnect-hint,
.fz-reconnect.components-reconnect-rejected .fz-reconnect-waiting,
.fz-reconnect.components-reconnect-rejected .fz-reconnect-hint { display: none; }
.fz-reconnect.fz-reconnect-reloading-now .fz-reconnect-reloading,
.fz-reconnect.components-reconnect-rejected .fz-reconnect-reloading { display: block; }

/* Venue's screen of the party games (SPEC-136): big type for a TV seen from across the room. */
.fz-screen {
    min-height: 100vh; padding: 2.5vh 3vw; color: #F4F6FF;
    background: radial-gradient(circle at 20% 0%, #2A1B6B 0%, #0A0E2A 55%, #05071A 100%);
    font-size: clamp(16px, 1.6vw, 34px);
}
.fz-screen h1 { font-size: 2.6em; line-height: 1.1; margin: 0; font-weight: 800; }
.fz-screen h2 { font-size: 1.8em; margin: 0; font-weight: 700; }
.fz-screen .muted { color: #A9B0D6; }
.fz-screen .card { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); border-radius: 24px; padding: 1.2em; }
.fz-screen .neon { color: #FF3D7F; text-shadow: 0 0 18px rgba(255, 61, 127, .6); }
.fz-screen .player { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 24px; overflow: hidden; background: #000; }
.fz-screen .player > div, .fz-screen .player iframe { position: absolute; inset: 0; width: 100%; height: 100%; }
.fz-screen .cover { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column;
    background: radial-gradient(circle, #3B1E8A 0%, #0A0E2A 80%); z-index: 2; font-size: 2em; font-weight: 800; }
.fz-screen .options { display: grid; grid-template-columns: 1fr 1fr; gap: .6em; }
.fz-screen .option { border-radius: 18px; padding: .7em 1em; font-size: 1.3em; font-weight: 700; position: relative; overflow: hidden; }
.fz-screen .option .bar { position: absolute; inset: 0 auto 0 0; background: rgba(255, 255, 255, .18); }
.fz-screen .option span { position: relative; }
.fz-screen .option.wrong { opacity: .35; }
.fz-screen .option.right { outline: 4px solid #3DFFA2; box-shadow: 0 0 24px rgba(61, 255, 162, .6); }
.fz-screen .o0 { background: #E5375F; } .fz-screen .o1 { background: #2D6BFF; } .fz-screen .o2 { background: #F2A516; } .fz-screen .o3 { background: #1FAE6A; }
.fz-screen .timer { font-size: 3em; font-weight: 800; }
.fz-screen .qr { background: white; padding: 10px; border-radius: 16px; width: 9em; height: 9em; }
.fz-screen .qr svg { width: 100%; height: 100%; display: block; }
.fz-screen .code { font-family: monospace; font-size: 1.6em; letter-spacing: .2em; font-weight: 800; }
.fz-screen .bingo-grid { display: grid; grid-template-columns: repeat(15, 1fr); gap: .3em; }
.fz-screen .bingo-grid div { text-align: center; padding: .35em 0; border-radius: 10px; font-weight: 700; background: rgba(255, 255, 255, .06); color: #5A6190; }
.fz-screen .bingo-grid div.on { background: #FF3D7F; color: white; }
.fz-screen .ball { font-size: 7em; font-weight: 900; line-height: 1; }
.fz-screen .row { display: flex; gap: 2vw; align-items: stretch; }
.fz-screen .grow { flex: 1; min-width: 0; }
.fz-screen .side { width: 30%; display: flex; flex-direction: column; gap: 1em; }
.fz-screen .line { display: flex; justify-content: space-between; gap: 1em; padding: .25em 0; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.fz-screen .tools { position: fixed; right: 12px; bottom: 12px; opacity: .25; display: flex; gap: 6px; }
.fz-screen .tools:hover { opacity: 1; }