/* ═══════════════════════════════════════════════════════════════════════
   TotumTeams — colour palettes

   Every colour in public-dark.css and app-dark.css resolves through one of
   these tokens, so the two palettes below are the whole theme. The active
   one is chosen by data-theme on the html element, which App.razor stamps
   from the tt-theme cookie — server-side, so the first paint is already
   correct and there is no flash.

   Dark is the default: an unknown or missing cookie reads as dark.
═══════════════════════════════════════════════════════════════════════ */

:root,
:root[data-theme="dark"] {
    /* Grounds */
    --tt-band:          #071536;
    --tt-band-alt:      #0b1e4a;
    --tt-grad-top:      #0d2458;
    --tt-glow:          rgba(80, 130, 210, .35);
    --tt-sidebar:       #0b1a38;
    --tt-menu:          #0c1c48;
    --tt-footer:        #050f28;

    /* Surfaces */
    --tt-panel:         rgba(12, 28, 72, .55);
    --tt-subpanel:      rgba(4, 12, 32, .35);
    --tt-topbar:        rgba(8, 18, 48, .45);
    --tt-strip:         rgba(8, 18, 48, .6);
    --tt-sticky:        rgba(8, 18, 48, .85);
    --tt-input-bg:      rgba(4, 12, 32, .45);
    --tt-border:        rgba(255, 255, 255, .12);
    --tt-border-input:  rgba(255, 255, 255, .22);

    /* Neutral fills, lightest to strongest */
    --tt-fill-stripe:   rgba(255, 255, 255, .03);
    --tt-fill-0:        rgba(255, 255, 255, .04);
    --tt-fill-1:        rgba(255, 255, 255, .05);
    --tt-fill-2:        rgba(255, 255, 255, .06);
    --tt-fill-3:        rgba(255, 255, 255, .08);

    /* Type */
    --tt-text:          #eef3ff;
    --tt-lede:          #c9d6ee;
    --tt-muted:         #9aafd0;
    --tt-heading:       #eef3ff;
    --tt-link:          #2eb6ff;

    /* Accent */
    --tt-orange:        #f36c21;
    --tt-orange-hover:  #ff7d33;
    --tt-orange-wash:   rgba(243, 108, 33, .12);
    --tt-orange-ring:   rgba(243, 108, 33, .45);

    /* Status */
    --tt-ok-bg:         rgba(67, 160, 71, .2);
    --tt-ok-fg:         #a8e0aa;
    --tt-warn-bg:       rgba(240, 161, 46, .2);
    --tt-warn-fg:       #f2cd93;
    --tt-warn-fg-strong:#ffd89b;
    --tt-warn-border:   rgba(240, 165, 0, .55);
    --tt-danger-bg:     rgba(239, 83, 80, .2);
    --tt-danger-fg:     #f3aeac;
    --tt-info-bg:       rgba(46, 182, 255, .18);
    --tt-info-fg:       #9cd9f7;
    --tt-purple-bg:     rgba(155, 108, 255, .2);
    --tt-purple-fg:     #cbb4f5;

    /* Depth */
    --tt-shadow:        rgba(0, 0, 0, .35);
    --tt-shadow-strong: rgba(0, 0, 0, .45);

    /* Hero photo scrims */
    --tt-scrim-top:     rgba(7, 16, 40, .35);
    --tt-scrim-bottom:  rgba(7, 16, 40, .55);
    --tt-scrim-deep:    rgba(7, 16, 40, .78);
    --tt-scrim-side-a:  rgba(5, 12, 32, .82);
    --tt-scrim-side-b:  rgba(5, 12, 32, .55);

    /* Stage backdrops behind form pages */
    /* The portal and admin app bar. Dark mode floats it as glass over the ground. */
    --tt-appbar:        rgba(8, 18, 48, .45);
    --tt-appbar-text:   #eef3ff;
    --tt-appbar-muted:  #9aafd0;
    --tt-appbar-border: rgba(255, 255, 255, .12);

    --tt-form-bg:       url("../images/redesign/back1.jpg");
    --tt-form-bg-soft:  url("../images/redesign/back2.jpg");
    --tt-cal-bg:        url("../images/redesign/back1.jpg");
    --tt-cal-cell:      rgba(8, 16, 40, .25);
    --tt-border-faint:  rgba(255, 255, 255, .08);
    --tt-form-scrim:    linear-gradient(180deg, rgba(7, 16, 40, .35), rgba(7, 16, 40, .7));
}

/* ── Light ───────────────────────────────────────────────────────────────
   Not an inversion. The dark theme separates blocks with translucent white
   over a deep ground; doing the reverse — translucent black over white —
   reads as grubby, so light uses solid white panels with a warm border and
   a real shadow, and keeps the orange accent as the only strong colour.
─────────────────────────────────────────────────────────────────────────── */
:root[data-theme="light"] {
    --tt-band:          #fdf8f4;
    --tt-band-alt:      #f7efe8;
    --tt-grad-top:      #fffaf6;
    --tt-glow:          rgba(243, 108, 33, .12);
    --tt-sidebar:       #ffffff;
    --tt-menu:          #ffffff;
    --tt-footer:        #f2e8df;

    --tt-panel:         rgba(255, 255, 255, .92);
    --tt-subpanel:      rgba(250, 244, 238, .9);
    --tt-topbar:        rgba(255, 255, 255, .82);
    --tt-strip:         rgba(255, 255, 255, .75);
    --tt-sticky:        rgba(255, 255, 255, .95);
    --tt-input-bg:      #ffffff;
    --tt-border:        rgba(24, 16, 8, .14);
    --tt-border-input:  rgba(24, 16, 8, .26);

    --tt-fill-stripe:   rgba(24, 16, 8, .025);
    --tt-fill-0:        rgba(24, 16, 8, .035);
    --tt-fill-1:        rgba(24, 16, 8, .05);
    --tt-fill-2:        rgba(24, 16, 8, .06);
    --tt-fill-3:        rgba(24, 16, 8, .09);

    --tt-text:          #1d1b18;
    --tt-lede:          #4a4540;
    --tt-muted:         #6d675f;
    --tt-heading:       #1d1b18;
    --tt-link:          #0b62b0;

    --tt-orange:        #d2540e;
    --tt-orange-hover:  #b8480b;
    --tt-orange-wash:   rgba(210, 84, 14, .1);
    --tt-orange-ring:   rgba(210, 84, 14, .4);

    --tt-ok-bg:         rgba(46, 125, 50, .14);
    --tt-ok-fg:         #1f6323;
    --tt-warn-bg:       rgba(191, 107, 0, .14);
    --tt-warn-fg:       #8a5000;
    --tt-warn-fg-strong:#6b3d00;
    --tt-warn-border:   rgba(191, 107, 0, .45);
    --tt-danger-bg:     rgba(183, 28, 28, .12);
    --tt-danger-fg:     #98201f;
    --tt-info-bg:       rgba(13, 71, 161, .12);
    --tt-info-fg:       #0d47a1;
    --tt-purple-bg:     rgba(106, 27, 154, .12);
    --tt-purple-fg:     #6a1b9a;

    --tt-shadow:        rgba(80, 50, 25, .14);
    --tt-shadow-strong: rgba(80, 50, 25, .2);

    /* The hero photograph is a dark illustration, so on light it needs a pale
       wash rather than a dark one, and a lighter touch so the artwork shows. */
    --tt-scrim-top:     rgba(255, 250, 245, .74);
    --tt-scrim-bottom:  rgba(255, 250, 245, .86);
    --tt-scrim-deep:    rgba(255, 250, 245, .9);
    --tt-scrim-side-a:  rgba(255, 250, 245, .93);
    --tt-scrim-side-b:  rgba(255, 250, 245, .7);

    /* The app bar keeps the brand navy in light mode — it is the one piece of
       chrome that was never white, and inverting it loses the brand. */
    --tt-appbar:        #001158;
    --tt-appbar-text:   #ffffff;
    --tt-appbar-muted:  rgba(255, 255, 255, .72);
    --tt-appbar-border: rgba(255, 255, 255, .16);

    /* Light uses back2light for both: back1light's rays are busy behind a form,
       and the even wash sits better under dark text. */
    --tt-form-bg:       url("../images/redesign/back2light.jpg");
    --tt-form-bg-soft:  url("../images/redesign/back2light.jpg");
    --tt-cal-bg:        url("../images/redesign/back1light.jpg");
    --tt-cal-cell:      rgba(255, 255, 255, .72);
    --tt-border-faint:  rgba(24, 16, 8, .09);
    /* The form sits on a solid white card, so the backdrop does not have to be
       muted for legibility — only enough to keep the page chrome readable. */
    --tt-form-scrim:    linear-gradient(180deg, rgba(255, 252, 248, .12), rgba(255, 252, 248, .3));
}

/* ═══════════════════════════════════════════════════════════════════════
   Form pages

   back1 is a spotlight falling from above — it suits a single centred card,
   so it sits behind the account pages. back2 is a soft even wash, which
   holds up behind the wider in-app forms without competing with them.
   Both are fixed, so the backdrop stays put while a long form scrolls.
═══════════════════════════════════════════════════════════════════════ */
.public-page.tt-dark.tt-form-page,
.portal-shell.tt-form-page {
    background-image: var(--tt-form-scrim), var(--tt-form-bg);
    background-size: cover, cover;
    background-position: center top, center top;
    background-repeat: no-repeat, no-repeat;
    background-attachment: fixed, fixed;
}

.public-page.tt-dark.tt-form-page-soft,
.portal-shell.tt-form-page-soft {
    background-image: var(--tt-form-scrim), var(--tt-form-bg-soft);
    background-size: cover, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
    background-attachment: fixed, fixed;
}

/* The backdrop carries the page, so the bands stacked on top of it must not
   paint over it. */
.tt-form-page .pub-hero,
.tt-form-page .pub-pain-strip,
.tt-form-page .pub-secondary-features,
.tt-form-page-soft .group-panel,
.tt-form-page-soft .admin-main { background: transparent; }

/* In-app form pages carry a .form-wrap, so the shell can spot them itself rather
   than every page having to opt in. */
.portal-shell:has(.form-wrap) {
    background-image: var(--tt-form-scrim), var(--tt-form-bg-soft);
    background-size: cover, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
    background-attachment: fixed, fixed;
}

/* ── Theme toggle ────────────────────────────────────────────────────── */
.tt-theme-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: transparent;
    border: 1px solid var(--tt-border);
    color: var(--tt-muted);
    border-radius: 999px;
    padding: .35rem .75rem;
    font: inherit;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    line-height: 1;
}
.tt-theme-btn:hover { color: var(--tt-text); background: var(--tt-fill-2); }

/* Exactly one of the two toggle links is ever shown, chosen by the attribute the
   server wrote — never by component state, which is unreliable in a circuit. */
:root[data-theme="dark"] .tt-theme-btn--to-dark { display: none; }
:root[data-theme="light"] .tt-theme-btn--to-light { display: none; }

/* ── Account form fields ────────────────────────────────────────────────
   The sign-in, register and manage pages render as static SSR and post an
   enhanced form, so their fields are plain <input>/<select> (or Blazor's
   InputText, which emits the same element) rather than MudBlazor
   components. .tt-field gives them the same glass treatment as the in-app
   forms.

   This deliberately replaces Bootstrap's .form-floating: that pattern floats
   the label onto a ::after plate painted with --bs-body-bg, which is plain
   white regardless of data-theme, so a filled field showed a white chip
   inside the dark control. The labels sit above the field instead.

   Both shells are covered: portal, admin and manage use .portal-shell;
   the public account forms (login, 2FA, external login) use .public-page.
─────────────────────────────────────────────────────────────────────────── */
.portal-shell .tt-field,
.public-page .tt-field {
    width: 100%;
    padding: 10px 12px;
    background: var(--tt-input-bg);
    border: 1px solid var(--tt-border-input);
    border-radius: 10px;
    color: var(--tt-text);
    font: inherit;
    font-size: .92rem;
}
.portal-shell .tt-field::placeholder,
.public-page .tt-field::placeholder { color: var(--tt-muted); }

.portal-shell .tt-field:focus,
.public-page .tt-field:focus {
    outline: none;
    border-color: var(--tt-orange);
    box-shadow: 0 0 0 3px var(--tt-orange-ring);
}

.portal-shell .tt-field:disabled,
.portal-shell .tt-field[readonly],
.public-page .tt-field:disabled,
.public-page .tt-field[readonly] {
    background: var(--tt-fill-2);
    color: var(--tt-muted);
    cursor: not-allowed;
}

/* Native pickers — above all the language <select> — draw their popup with the
   browser palette. Without this the control is dark but the list stays white,
   putting light option text on a light popup. */
:root[data-theme="dark"] .tt-field { color-scheme: dark; }
:root[data-theme="light"] .tt-field { color-scheme: light; }

.portal-shell .tt-field-row,
.public-page .tt-field-row { display: flex; align-items: center; gap: .5rem; }

/* The "email confirmed" tick, which replaces Bootstrap's input-group addon. */
.portal-shell .tt-field-badge,
.public-page .tt-field-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: var(--tt-ok-bg);
    border: 1px solid var(--tt-border);
    color: var(--tt-ok-fg);
    font-weight: 700;
}

/* A button that must submit a form ("Send verification email") rather than
   navigate, so it cannot be an <a>. Bootstrap's .btn-link is a blue tuned for
   a white page. */
.portal-shell .tt-inline-link,
.public-page .tt-inline-link {
    background: none;
    border: none;
    padding: 6px 0 0;
    color: var(--tt-link);
    font: inherit;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
}
.portal-shell .tt-inline-link:hover,
.public-page .tt-inline-link:hover { text-decoration: underline; }

.portal-shell .tt-check-row label,
.public-page .tt-check-row label {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: var(--tt-text);
    font-size: .9rem;
}

/* The banner artwork is shot on two grounds: navy for dark, white for light.
   Serving it as a background means only the copy the theme actually uses is
   fetched. Specificity has to beat .pub-founding-art in public.css. */
:root[data-theme="light"] .public-page.tt-dark .pub-founding-art {
    background-image: url("../images/redesign/hero2_light.jpg");
}

/* The light copy of the artwork is shot on pure white, so the band matches it
   for the same reason the dark one matches the navy: no visible photo edge. */
:root[data-theme="light"] .public-page.tt-dark .pub-founding-banner {
    background: #fff;
}

/* The glass panel behind the copy is built for a dark ground. On light it needs
   a solid card, or the blur leaves the headline sitting on nothing. */
:root[data-theme="light"] .public-page.tt-dark .pub-founding-text {
    background: var(--tt-panel);
    border-color: var(--tt-border);
    box-shadow: 0 18px 48px var(--tt-shadow);
}
:root[data-theme="light"] .public-page.tt-dark .pub-founding-free { color: var(--tt-heading); }
:root[data-theme="light"] .public-page.tt-dark .pub-founding-until { text-shadow: none; }
:root[data-theme="light"] .public-page.tt-dark .pub-founding-text > p,
:root[data-theme="light"] .public-page.tt-dark .pub-founding-deadline { color: var(--tt-lede); }

/* ═══════════════════════════════════════════════════════════════════════
   MudBlazor palette

   MudThemeProvider writes these variables from IsDarkMode, which is resolved
   in C# from the theme cookie. That works while a page is rendered on the
   server, but the portal and admin run an interactive circuit, and inside a
   circuit IHttpContextAccessor.HttpContext is null — so the provider fell
   back to dark and rendered navy form controls on a light page.

   Setting the variables here instead makes the component library follow
   data-theme like everything else, with no dependence on circuit state.
═══════════════════════════════════════════════════════════════════════ */
:root[data-theme="light"] {
    /* MudBlazor wants a colour here and the bare triplet only in -rgb; giving the
       triplet to both made every filled button transparent. */
    --mud-palette-primary: #d2540e;
    --mud-palette-primary-rgb: 210, 84, 14;
    --mud-palette-primary-text: #ffffff;
    --mud-palette-secondary: #0b62b0;
    --mud-palette-secondary-rgb: 11, 98, 176;
    --mud-palette-surface: #ffffff;
    --mud-palette-background: #fdf8f4;
    --mud-palette-background-gray: #f7efe8;
    --mud-palette-drawer-background: #ffffff;
    --mud-palette-drawer-text: #1d1b18;
    --mud-palette-appbar-background: #001158;
    --mud-palette-appbar-text: #ffffff;
    --mud-palette-text-primary: #1d1b18;
    --mud-palette-text-secondary: #6d675f;
    --mud-palette-action-default: #6d675f;
    --mud-palette-divider: rgba(24, 16, 8, .14);
    --mud-palette-divider-light: rgba(24, 16, 8, .07);
    --mud-palette-lines-default: rgba(24, 16, 8, .14);
    --mud-palette-lines-inputs: rgba(24, 16, 8, .3);
    --mud-palette-table-lines: rgba(24, 16, 8, .14);
    --mud-palette-table-striped: rgba(24, 16, 8, .025);
    --mud-palette-table-hover: rgba(24, 16, 8, .05);
    --mud-palette-overlay-dark: rgba(24, 16, 8, .5);
}

:root[data-theme="light"] .mud-input-slot,
:root[data-theme="light"] .mud-input-root,
:root[data-theme="light"] .mud-input > input,
:root[data-theme="light"] .mud-select-input .mud-input-slot {
    background: #ffffff;
    color: #1d1b18;
}
:root[data-theme="light"] .mud-paper,
:root[data-theme="light"] .mud-popover,
:root[data-theme="light"] .mud-dialog,
:root[data-theme="light"] .mud-menu-popover { background-color: #ffffff; color: #1d1b18; }

/* ── App bar ─────────────────────────────────────────────────────────── */
.portal-shell .topbar {
    background: var(--tt-appbar);
    border-bottom: 1px solid var(--tt-appbar-border);
    color: var(--tt-appbar-text);
}
.portal-shell .topbar a,
.portal-shell .topbar .topbar-nav a,
.portal-shell .topbar .logo-totum,
.portal-shell .topbar .topbar-admin-label { color: var(--tt-appbar-text); }
.portal-shell .topbar .topbar-lang-btn,
.portal-shell .topbar .tt-theme-btn { color: var(--tt-appbar-muted); border-color: var(--tt-appbar-border); }
.portal-shell .topbar .topbar-lang-btn:hover,
.portal-shell .topbar .tt-theme-btn:hover { color: var(--tt-appbar-text); background: rgba(255, 255, 255, .1); }

/* ═══════════════════════════════════════════════════════════════════════
   Rich-text editors

   The email header and footer are edited on a white surface deliberately —
   they render on white in the mail client, so editing them on the dark
   chrome would misrepresent them. That surface has to bring its own text
   colour: inheriting the dark theme's near-white type put white text on a
   white field, which is invisible.
═══════════════════════════════════════════════════════════════════════ */
.ql-toolbar.ql-snow,
.ql-container.ql-snow {
    background: #ffffff;
    border-color: rgba(24, 16, 8, .22);
}
.ql-container,
.ql-editor,
.ql-editor p,
.ql-editor li,
.ql-editor h1,
.ql-editor h2,
.ql-editor h3,
.ql-editor strong,
.ql-editor a { color: #1d1b18; }

.ql-editor.ql-blank::before { color: rgba(29, 27, 24, .5); }

/* Toolbar icons and the dropdown are drawn with currentColor / stroke. */
.ql-snow .ql-stroke { stroke: #44403a; }
.ql-snow .ql-fill { fill: #44403a; }
.ql-snow .ql-picker,
.ql-snow .ql-picker-label,
.ql-snow .ql-picker-item { color: #1d1b18; }
.ql-snow .ql-picker-options { background: #ffffff; border-color: rgba(24, 16, 8, .22); }
.ql-snow.ql-toolbar button:hover .ql-stroke,
.ql-snow .ql-toolbar button:hover .ql-stroke { stroke: var(--tt-orange); }
.ql-snow.ql-toolbar button.ql-active .ql-stroke { stroke: var(--tt-orange); }
.ql-snow.ql-toolbar button.ql-active .ql-fill { fill: var(--tt-orange); }

.tt-richtext { min-height: 120px; background: #ffffff; }

/* ── Icons ───────────────────────────────────────────────────────────────
   Masked rather than embedded so a single file follows the text colour: the
   same calendar.svg is muted in a resting sidebar link and orange in the
   active one, with no second asset and no inline SVG in the markup.
─────────────────────────────────────────────────────────────────────────── */
.tt-ico {
    display: inline-block;
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    vertical-align: -4px;
    background-color: currentColor;
    -webkit-mask: var(--tt-ico) center / contain no-repeat;
    mask: var(--tt-ico) center / contain no-repeat;
}
.tt-ico--sm { width: 16px; height: 16px; vertical-align: -3px; }
.tt-ico--lg { width: 24px; height: 24px; vertical-align: -5px; }


/* ── Anti-bot check ───────────────────────────────────────────────────── */
/* As wide as the form's own fields, not the widget's default 260px. */
altcha-widget {
    display: block;
    --altcha-max-width: 100%;
}

/* A plain checkbox on a static form (sign-in's "Remember me"). mud-checkbox-input is
   transparent by design, as MudBlazor draws its own box over it, so it cannot be used bare. */
.tt-checkbox {
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: var(--tt-orange);
    cursor: pointer;
}