/* Theme 2.1 for standalone Razor Pages.
   Pages with Layout = null (sign-in, sign-out, SSO, opt-out, SMS registration, onboarding code pages)
   render outside MainLayoutBase, so no MudThemeProvider emits --mud-palette-* and no body.theme-* class
   exists. This file is loaded only by those pages, through Pages/Shared/_TipStandaloneHead.cshtml, after
   bootstrap-overrides.css and app.css. It carries its own copy of the portal palette as --tip-sa-* tokens.
   StandalonePageThemeTests holds every value equal to PortalTheme.cs (or the --tip-status-*-fg tokens
   in tip-app-theme.css) and every text and control pair to WCAG 2.2 AA, so the copy cannot drift.

   Mode: light on :root. Dark when the head script adds tip-sa-dark to <html>, or, with no script
   decision, when the system prefers dark. The script adds tip-sa-light to force light. */

/* Inter, self-hosted (same files and declarations as tip-app-theme.css, which these pages do not load). */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/inter-latin-400-normal.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('fonts/inter-latin-500-normal.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/inter-latin-600-normal.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/inter-latin-700-normal.woff2') format('woff2');
}

:root {
    --tip-sa-page: #f4f4f5;
    --tip-sa-page-image: none;
    --tip-sa-surface: #ffffff;
    --tip-sa-inset: #f4f4f5;
    --tip-sa-text: #1f2733;
    --tip-sa-muted: #5b6678;
    --tip-sa-line: rgba(24, 24, 27, 0.10);
    --tip-sa-line-input: rgba(24, 24, 27, 0.20);
    --tip-sa-primary: #ea580c;
    --tip-sa-on-primary: #1b1206;
    --tip-sa-link: #2563eb;
    --tip-sa-error: #b91c1c;
    --tip-sa-warning: #92400e;
    --tip-sa-success: #047857;
    --tip-sa-fill-error: #ef4444;
    --tip-sa-fill-warning: #f59e0b;
    --tip-sa-fill-success: #10b981;
    --tip-sa-shadow: 0 10px 30px rgba(24, 24, 27, 0.08), 0 1px 3px rgba(24, 24, 27, 0.06);
    color-scheme: light;
}

:root.tip-sa-dark {
    --tip-sa-page: #0b0b0c;
    --tip-sa-page-image: radial-gradient(circle at 30% -10%, #1d1d20 0%, #141416 45%, #0b0b0c 100%);
    --tip-sa-surface: #18181b;
    --tip-sa-inset: #141416;
    --tip-sa-text: #e5e7eb;
    --tip-sa-muted: #9aa6bd;
    --tip-sa-line: rgba(255, 255, 255, 0.09);
    --tip-sa-line-input: rgba(255, 255, 255, 0.12);
    --tip-sa-primary: #f97316;
    --tip-sa-on-primary: #1b1206;
    --tip-sa-link: #60a5fa;
    --tip-sa-error: #f87171;
    --tip-sa-warning: #fbbf24;
    --tip-sa-success: #34d399;
    --tip-sa-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.35);
    color-scheme: dark;
}

/* No script decision (JavaScript off): follow the system. Same values as :root.tip-sa-dark. The
   partial writes the tip-sa-force-light meta when App:ThemeSwitcherEnabled is off, which keeps the
   page light here too. */
@media (prefers-color-scheme: dark) {
    :root:not(.tip-sa-light):not(.tip-sa-dark):not(:has(meta[name="tip-sa-force-light"])) {
        --tip-sa-page: #0b0b0c;
        --tip-sa-page-image: radial-gradient(circle at 30% -10%, #1d1d20 0%, #141416 45%, #0b0b0c 100%);
        --tip-sa-surface: #18181b;
        --tip-sa-inset: #141416;
        --tip-sa-text: #e5e7eb;
        --tip-sa-muted: #9aa6bd;
        --tip-sa-line: rgba(255, 255, 255, 0.09);
        --tip-sa-line-input: rgba(255, 255, 255, 0.12);
        --tip-sa-primary: #f97316;
        --tip-sa-on-primary: #1b1206;
        --tip-sa-link: #60a5fa;
        --tip-sa-error: #f87171;
        --tip-sa-warning: #fbbf24;
        --tip-sa-success: #34d399;
        --tip-sa-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.35);
        color-scheme: dark;
    }
}

/* ---------- Page ---------- */

html,
body {
    min-height: 100%;
}

body {
    font-family: "Inter", system-ui, "Segoe UI", Roboto, Arial, sans-serif;
    color: var(--tip-sa-text);
    background-color: var(--tip-sa-page);
    background-image: var(--tip-sa-page-image);
    background-attachment: fixed;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--tip-sa-text);
}

.text-muted,
.form-text {
    color: var(--tip-sa-muted) !important;
}

.text-dark {
    color: var(--tip-sa-text) !important;
}

.bg-light {
    background-color: var(--tip-sa-inset) !important;
}

a {
    color: var(--tip-sa-link);
}

a:hover {
    color: var(--tip-sa-link);
}

:focus-visible {
    outline: 2px solid var(--tip-sa-link);
    outline-offset: 2px;
}

/* ---------- Card shell (the Onboarding pattern, reused by every card page) ---------- */

.card {
    background-color: var(--tip-sa-surface);
    color: var(--tip-sa-text);
    border: 1px solid var(--tip-sa-line);
    border-radius: 12px;
}

.card.shadow-sm {
    box-shadow: var(--tip-sa-shadow) !important;
}

/* ---------- Forms ---------- */

.form-label,
.form-check-label {
    color: var(--tip-sa-text);
}

.form-control,
.form-select {
    background-color: var(--tip-sa-surface);
    color: var(--tip-sa-text);
    border: 1px solid var(--tip-sa-line-input);
}

/* bootstrap-overrides.css sets these with !important (navy border, no ring), so they need it too. */
.form-control:focus,
.form-select:focus,
.form-select:focus-visible {
    background-color: var(--tip-sa-surface);
    color: var(--tip-sa-text);
    border-color: var(--tip-sa-primary) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tip-sa-primary) 22%, transparent) !important;
    outline: none !important;
}

.form-control::placeholder,
.form-control::-webkit-input-placeholder {
    color: var(--tip-sa-muted);
}

.form-check-input {
    background-color: var(--tip-sa-surface);
    border-color: var(--tip-sa-line-input);
}

.form-check-input:checked {
    background-color: var(--tip-sa-primary);
    border-color: var(--tip-sa-primary);
}

/* Dark ink marks on the orange fill, matching the filled button label (white is 2.8:1). */
/* Not on a .form-switch, whose knob is its own background image. */
.form-check:not(.form-switch) > .form-check-input:checked[type="checkbox"] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%231b1206' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
}

.form-check-input:checked[type="radio"] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%231b1206'/%3e%3c/svg%3e");
}

/* Bootstrap's .form-check-input:focus sets outline 0, which outranks the global :focus-visible rule. */
.form-check-input:focus-visible {
    outline: 2px solid var(--tip-sa-link) !important;
    outline-offset: 2px;
}

/* bootstrap-overrides.css paints native checkboxes green and focus as a white-and-blue ring; on
   these pages the accent marks controls and focus uses the link-blue :focus-visible outline. */
input[type="checkbox"] {
    accent-color: var(--tip-sa-primary);
}

/* No glow on buttons: Bootstrap's .btn-primary:focus halo and the overrides' .btn:focus ring show on a
   mouse click too. Keyboard focus keeps the link-blue outline (Bootstrap sets outline 0 on .btn:focus). */
.btn:focus,
.btn:active:focus,
.btn-primary:focus,
.btn-primary:active:focus,
.form-check-input:focus {
    box-shadow: none !important;
}

.btn:focus-visible {
    outline: 2px solid var(--tip-sa-link) !important;
    outline-offset: 2px;
}

/* ---------- Buttons: accent fill with dark ink, flat in both modes ---------- */

.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:disabled {
    color: var(--tip-sa-on-primary) !important;
    background-color: var(--tip-sa-primary) !important;
    border-color: var(--tip-sa-primary) !important;
    font-weight: 600;
}

.btn-primary:hover {
    filter: brightness(1.06);
}

.btn-primary:focus-visible {
    outline: 2px solid var(--tip-sa-link);
    outline-offset: 2px;
    box-shadow: none !important;
}

/* ---------- Status: text in the status text shade on a 14% fill tint ---------- */

.text-danger {
    color: var(--tip-sa-error) !important;
}

.text-success {
    color: var(--tip-sa-success) !important;
}

.alert {
    color: var(--tip-sa-text);
    border-radius: 10px;
}

.alert-danger {
    color: var(--tip-sa-error);
    background-color: color-mix(in srgb, var(--tip-sa-fill-error) 14%, var(--tip-sa-surface));
    border-color: color-mix(in srgb, var(--tip-sa-fill-error) 35%, var(--tip-sa-surface));
}

.alert-warning {
    color: var(--tip-sa-warning);
    background-color: color-mix(in srgb, var(--tip-sa-fill-warning) 14%, var(--tip-sa-surface));
    border-color: color-mix(in srgb, var(--tip-sa-fill-warning) 35%, var(--tip-sa-surface));
}

.alert-success {
    color: var(--tip-sa-success);
    background-color: color-mix(in srgb, var(--tip-sa-fill-success) 14%, var(--tip-sa-surface));
    border-color: color-mix(in srgb, var(--tip-sa-fill-success) 35%, var(--tip-sa-surface));
}

.alert-secondary {
    color: var(--tip-sa-text);
    background-color: var(--tip-sa-inset);
    border-color: var(--tip-sa-line);
}

.badge {
    color: var(--tip-sa-text);
    background-color: var(--tip-sa-inset);
    border: 1px solid var(--tip-sa-line);
}

/* Status badges read like the alerts. Bootstrap's bg-* and text-dark use !important, so these do too. */
.badge.bg-danger {
    color: var(--tip-sa-error) !important;
    background-color: color-mix(in srgb, var(--tip-sa-fill-error) 14%, var(--tip-sa-surface)) !important;
    border-color: color-mix(in srgb, var(--tip-sa-fill-error) 35%, var(--tip-sa-surface));
}

.badge.bg-warning {
    color: var(--tip-sa-warning) !important;
    background-color: color-mix(in srgb, var(--tip-sa-fill-warning) 14%, var(--tip-sa-surface)) !important;
    border-color: color-mix(in srgb, var(--tip-sa-fill-warning) 35%, var(--tip-sa-surface));
}

.badge.bg-success {
    color: var(--tip-sa-success) !important;
    background-color: color-mix(in srgb, var(--tip-sa-fill-success) 14%, var(--tip-sa-surface)) !important;
    border-color: color-mix(in srgb, var(--tip-sa-fill-success) 35%, var(--tip-sa-surface));
}

/* Bootstrap .border is a light gray with !important; use the theme line. */
.border {
    border-color: var(--tip-sa-line) !important;
}

/* Status icons keep the base fill shade (color roles); they are aria-hidden next to a heading. */
.tip-sa-icon-success { fill: var(--tip-sa-fill-success); }
.tip-sa-icon-warning { fill: var(--tip-sa-fill-warning); }
.tip-sa-icon-neutral { fill: var(--tip-sa-muted); }