/* Agateo shell — tokens + chrome (ads-app / ads-landing) */

:root,
html[data-theme='light'] {
    color-scheme: light;
    --bg: #f5f5f7;
    --bg-elevated: #ffffff;
    --ink: #0a0a0a;
    --ink-soft: #1d1d1f;
    --muted: #6e6e73;
    --line: rgba(0, 0, 0, 0.08);
    --line-strong: rgba(0, 0, 0, 0.14);
    --solid-bg: #000000;
    --solid-fg: #ffffff;
    --ghost: rgba(0, 0, 0, 0.04);
    --ghost-hover: rgba(0, 0, 0, 0.06);
    --mesh-a: rgba(0, 0, 0, 0.045);
    --mesh-b: rgba(0, 0, 0, 0.025);
    --glass-bg: rgba(255, 255, 255, 0.58);
    --glass-shadow:
        0 0 0 0.5px rgba(0, 0, 0, 0.04),
        0 8px 28px rgba(0, 0, 0, 0.08),
        0 2px 6px rgba(0, 0, 0, 0.04);
    --font: 'Geist', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --radius: 0.75rem;
    --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --danger: #b42318;
    --scroll-thumb: rgba(0, 0, 0, 0.22);
    --scroll-thumb-hover: rgba(0, 0, 0, 0.38);

    --wapp-bg: var(--bg);
    --wapp-surface: var(--bg-elevated);
    --wapp-surface-2: #ebebed;
    --wapp-border: var(--line);
    --wapp-border-hover: var(--line-strong);
    --wapp-primary: var(--solid-bg);
    --wapp-primary-dark: var(--ink);
    --wapp-accent: var(--ink-soft);
    --wapp-text: var(--ink);
    --wapp-text-muted: var(--muted);
    --wapp-radius: 12px;
    --wapp-radius-sm: 8px;
    --wapp-shadow: var(--glass-shadow);
    --wapp-shadow-hover: 0 12px 32px rgba(0, 0, 0, 0.12);
    --toast-ok-bg: #0a0a0a;
    --toast-ok-fg: #f5f5f7;
    --toast-err-bg: #b42318;
    --toast-err-fg: #ffffff;
}

html[data-theme='dark'] {
    color-scheme: dark;
    --bg: #000000;
    --bg-elevated: #1c1c1e;
    --ink: #f5f5f7;
    --ink-soft: #f5f5f7;
    --muted: #a1a1a6;
    --line: rgba(255, 255, 255, 0.08);
    --line-strong: rgba(255, 255, 255, 0.12);
    --solid-bg: #f5f5f7;
    --solid-fg: #0a0a0a;
    --ghost: rgba(255, 255, 255, 0.06);
    --ghost-hover: rgba(255, 255, 255, 0.1);
    --mesh-a: rgba(255, 255, 255, 0.06);
    --mesh-b: rgba(255, 255, 255, 0.03);
    --glass-bg: rgba(28, 28, 30, 0.88);
    --glass-shadow:
        0 0 0 0.5px rgba(255, 255, 255, 0.04),
        0 12px 36px rgba(0, 0, 0, 0.55),
        0 2px 8px rgba(0, 0, 0, 0.35);
    --danger: #f97066;
    --scroll-thumb: rgba(255, 255, 255, 0.28);
    --scroll-thumb-hover: rgba(255, 255, 255, 0.45);
    --wapp-surface-2: #2c2c2e;
    --toast-ok-bg: #f5f5f7;
    --toast-ok-fg: #0a0a0a;
    --toast-err-bg: #f97066;
    --toast-err-fg: #0a0a0a;
}

@media (prefers-color-scheme: dark) {
    html[data-theme='system'],
    html:not([data-theme]) {
        color-scheme: dark;
        --bg: #000000;
        --bg-elevated: #1c1c1e;
        --ink: #f5f5f7;
        --ink-soft: #f5f5f7;
        --muted: #a1a1a6;
        --line: rgba(255, 255, 255, 0.08);
        --line-strong: rgba(255, 255, 255, 0.12);
        --solid-bg: #f5f5f7;
        --solid-fg: #0a0a0a;
        --ghost: rgba(255, 255, 255, 0.06);
        --ghost-hover: rgba(255, 255, 255, 0.1);
        --mesh-a: rgba(255, 255, 255, 0.06);
        --mesh-b: rgba(255, 255, 255, 0.03);
        --glass-bg: rgba(28, 28, 30, 0.88);
        --glass-shadow:
            0 0 0 0.5px rgba(255, 255, 255, 0.04),
            0 12px 36px rgba(0, 0, 0, 0.55),
            0 2px 8px rgba(0, 0, 0, 0.35);
        --danger: #f97066;
        --scroll-thumb: rgba(255, 255, 255, 0.28);
        --scroll-thumb-hover: rgba(255, 255, 255, 0.45);
        --wapp-surface-2: #2c2c2e;
        --toast-ok-bg: #f5f5f7;
        --toast-ok-fg: #0a0a0a;
        --toast-err-bg: #f97066;
        --toast-err-fg: #0a0a0a;
        --wapp-bg: var(--bg);
        --wapp-surface: var(--bg-elevated);
        --wapp-border: var(--line);
        --wapp-border-hover: var(--line-strong);
        --wapp-primary: var(--solid-bg);
        --wapp-primary-dark: var(--ink);
        --wapp-accent: var(--muted);
        --wapp-text: var(--ink);
        --wapp-text-muted: var(--muted);
    }
}

html, body {
    font-family: var(--font);
    height: 100%;
    margin: 0;
    background-color: var(--bg);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}

/* Blazor FocusOnNavigate focuses the first h1 after load/F5. Headings are not
   tab stops — hide the UA focus ring so the client name is not boxed in blue. */
:is(h1, h2, h3, h4, h5, h6):focus {
    outline: none;
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--scroll-thumb);
    border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); }

.shell {
    --shell-pad-top: 4.25rem;
    --shell-pad-x: 1.25rem;
    --shell-pad-bottom: 1.5rem;
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
    color: var(--ink);
    background:
        radial-gradient(1200px 600px at -10% -10%, var(--mesh-a), transparent 55%),
        radial-gradient(900px 500px at 110% 0%, var(--mesh-b), transparent 50%),
        var(--bg);
}

.shell--empty {
    min-height: 100dvh;
    height: auto;
    max-height: none;
    overflow: auto;
}

.shell__chrome {
    position: absolute;
    inset-inline: 0;
    top: 0;
    z-index: 30;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: flex-start;
    gap: 0.75rem;
    padding:
        max(0.75rem, env(safe-area-inset-top, 0px))
        max(1rem, env(safe-area-inset-right, 0px))
        0
        max(1rem, env(safe-area-inset-left, 0px));
    pointer-events: none;
    background: transparent;
    border: 0;
}

@media (min-width: 768px) {
    .shell {
        --shell-pad-top: 4.5rem;
        --shell-pad-x: 2rem;
        --shell-pad-bottom: 2rem;
    }

    .shell__chrome {
        padding-inline:
            max(1.5rem, env(safe-area-inset-left, 0px))
            max(1.5rem, env(safe-area-inset-right, 0px));
    }
}

.shell__brand-link {
    pointer-events: auto;
    z-index: 1;
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
    background: color-mix(in oklab, var(--glass-bg) 55%, transparent);
    backdrop-filter: saturate(140%) blur(14px);
    -webkit-backdrop-filter: saturate(140%) blur(14px);
    padding: 0.38rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 650;
    letter-spacing: -0.03em;
    color: var(--ink-soft);
    text-decoration: none;
    box-shadow: none;
    opacity: 0.55;
    white-space: nowrap;
    transition:
        opacity 0.25s var(--ease),
        color 0.2s var(--ease),
        background 0.2s var(--ease);
}

.shell__brand-short { display: none; }

.shell__brand-link:hover,
.shell__brand-link:focus-visible {
    opacity: 0.92;
    color: var(--ink);
}

.shell__float {
    pointer-events: auto;
    justify-self: center;
    grid-column: 1 / -1;
    grid-row: 1;
    display: flex;
    width: fit-content;
    max-width: min(100%, calc(100vw - 11rem));
    min-width: 0;
    align-items: center;
    gap: 0.2rem;
    margin-inline: auto;
    padding: 0.28rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: color-mix(in oklab, var(--glass-bg) 78%, transparent);
    box-shadow: var(--glass-shadow);
    backdrop-filter: saturate(160%) blur(22px);
    -webkit-backdrop-filter: saturate(160%) blur(22px);
}

.shell__float-sep {
    width: 1px;
    height: 1.15rem;
    margin-inline: 0.2rem;
    background: var(--line);
    flex-shrink: 0;
}

.shell__top-nav {
    display: flex;
    flex-shrink: 1;
    min-width: 0;
    align-items: center;
    gap: 0.15rem;
}

.shell__top-nav-link {
    display: inline-flex;
    height: 1.9rem;
    align-items: center;
    justify-content: center;
    gap: 0.28rem;
    border-radius: 999px;
    padding: 0 0.6rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--muted);
    text-decoration: none;
    line-height: 1;
    white-space: nowrap;
    transition: color 0.2s var(--ease), background 0.2s var(--ease);
}

.shell__top-nav-link .mud-icon-root { font-size: 0.95rem !important; }

.shell__top-nav-link:hover,
.shell__top-nav-link.is-active {
    color: var(--ink);
    background: var(--ghost);
}

.shell__icon-group {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    height: 1.85rem;
    gap: 0;
}

.shell__icon-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 1.85rem;
}

.shell__icon-wrap .mud-badge-root,
.shell__icon-wrap .mud-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

.shell__icon-btn {
    position: relative;
    display: inline-flex;
    width: 1.85rem;
    height: 1.85rem;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    text-decoration: none;
    transition:
        color 0.2s var(--ease),
        background 0.2s var(--ease),
        transform 0.25s var(--ease-out);
}

.shell__icon-dot {
    position: absolute;
    top: -0.12rem;
    right: -0.12rem;
    min-width: 0.85rem;
    height: 0.85rem;
    padding: 0 0.2rem;
    border-radius: 999px;
    background: var(--ink);
    color: var(--bg);
    font-size: 0.55rem;
    font-weight: 700;
    line-height: 0.85rem;
    text-align: center;
    pointer-events: none;
}

.shell__icon-btn:hover,
.shell__icon-btn[aria-expanded='true'] {
    color: var(--ink);
    background: var(--ghost);
}

.shell__icon-btn:active {
    transform: scale(0.94);
}

.shell__pop {
    position: absolute;
    right: 0;
    top: calc(100% + 0.5rem);
    z-index: 40;
    width: min(15rem, 78vw);
    border-radius: 1rem;
    border: 1px solid var(--line);
    background: var(--bg-elevated);
    padding: 0.45rem;
    box-shadow: var(--glass-shadow);
}

.shell__pop-account {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.55rem 0.7rem 0.65rem;
    border-bottom: 1px solid var(--line);
    margin-bottom: 0.25rem;
}

.shell__pop-name {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shell__pop-role {
    font-size: 0.7rem;
    color: var(--muted);
}

.shell__pop-link {
    display: block;
    border-radius: 0.7rem;
    padding: 0.5rem 0.7rem;
    font-size: 0.8125rem;
    font-weight: 550;
    letter-spacing: -0.01em;
    color: var(--ink);
    text-decoration: none;
}

.shell__pop-link:hover { background: var(--ghost); }
.shell__pop-form { margin: 0; }

.shell__pop-link--btn {
    width: 100%;
    border: 0;
    background: transparent;
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: var(--danger);
}

.shell__backdrop {
    position: fixed;
    inset: 0;
    z-index: 25;
}

.theme-toggle {
    pointer-events: auto;
    position: relative;
    z-index: 1;
    justify-self: end;
    grid-column: 3;
    grid-row: 1;
    display: grid;
    grid-template-columns: repeat(3, 1.55rem);
    padding: 0.12rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
    background: color-mix(in oklab, var(--glass-bg) 55%, transparent);
    backdrop-filter: saturate(140%) blur(14px);
    -webkit-backdrop-filter: saturate(140%) blur(14px);
    opacity: 0.55;
    transition: opacity 0.25s var(--ease);
}

.theme-toggle:hover,
.theme-toggle:focus-within { opacity: 0.92; }

.theme-toggle__pill {
    position: absolute;
    top: 0.12rem;
    left: 0.12rem;
    width: 1.55rem;
    height: 1.55rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg-elevated) 80%, transparent);
    border: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
    transition: transform 0.45s var(--ease-out);
    pointer-events: none;
}

.theme-toggle[data-active='dark'] .theme-toggle__pill { transform: translateX(1.55rem); }
.theme-toggle[data-active='system'] .theme-toggle__pill { transform: translateX(3.1rem); }

.theme-toggle__btn {
    position: relative;
    z-index: 1;
    display: inline-flex;
    width: 1.55rem;
    height: 1.55rem;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
}

.theme-toggle__btn .mud-icon-root { font-size: 0.85rem !important; }
.theme-toggle__btn:hover { color: var(--ink-soft); }
.theme-toggle__btn[aria-pressed='true'] { color: var(--ink); }

.shell__content {
    flex: 1;
    min-height: 0;
    overflow: auto;
    overflow-x: clip;
    -webkit-overflow-scrolling: touch;
    padding:
        var(--shell-pad-top)
        max(var(--shell-pad-x), env(safe-area-inset-right, 0px))
        max(var(--shell-pad-bottom), env(safe-area-inset-bottom, 0px))
        max(var(--shell-pad-x), env(safe-area-inset-left, 0px));
}

.shell__container {
    width: 100%;
    max-width: 1400px;
    margin-inline: auto;
    min-width: 0;
}

.login-bg {
    min-height: 100dvh;
    min-height: 100svh;
    padding:
        max(1rem, env(safe-area-inset-top, 0px))
        max(1rem, env(safe-area-inset-right, 0px))
        max(1rem, env(safe-area-inset-bottom, 0px))
        max(1rem, env(safe-area-inset-left, 0px));
    box-sizing: border-box;
    background:
        radial-gradient(1200px 600px at -10% -10%, var(--mesh-a), transparent 55%),
        radial-gradient(900px 500px at 110% 0%, var(--mesh-b), transparent 50%),
        var(--bg);
}

.login-card {
    border-radius: 1rem !important;
    border: 1px solid var(--line) !important;
    background: var(--bg-elevated) !important;
    box-shadow: var(--glass-shadow) !important;
    width: 100% !important;
    max-width: min(420px, 100%) !important;
}

.login-logo {
    width: 3rem;
    height: 3rem;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--solid-bg);
    color: var(--solid-fg);
}

/* Phone / small tablet — stacked chrome, full-width float */
@media (max-width: 720px) {
    .shell {
        --shell-pad-top: 6.85rem;
        --shell-pad-x: 0.85rem;
        --shell-pad-bottom: 1.25rem;
    }

    .shell__chrome {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: auto auto;
        gap: 0.45rem;
        padding-top: max(0.55rem, env(safe-area-inset-top, 0px));
        padding-inline:
            max(0.7rem, env(safe-area-inset-left, 0px))
            max(0.7rem, env(safe-area-inset-right, 0px));
    }

    .shell__brand-link {
        grid-column: 1;
        grid-row: 1;
        opacity: 0.78;
        padding: 0.34rem 0.7rem;
        font-size: 0.78rem;
    }

    .shell__brand-full { display: none; }
    .shell__brand-short { display: inline; }

    .theme-toggle {
        grid-column: 2;
        grid-row: 1;
        opacity: 0.78;
        grid-template-columns: repeat(3, 1.5rem);
        padding: 0.1rem;
    }

    .theme-toggle__pill,
    .theme-toggle__btn {
        width: 1.5rem;
        height: 1.5rem;
    }

    .theme-toggle[data-active='dark'] .theme-toggle__pill { transform: translateX(1.5rem); }
    .theme-toggle[data-active='system'] .theme-toggle__pill { transform: translateX(3rem); }

    .theme-toggle__btn .mud-icon-root { font-size: 0.8rem !important; }

    .shell__float {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-self: stretch;
        width: 100%;
        max-width: none;
        margin-inline: 0;
        justify-content: space-between;
        gap: 0.15rem;
        padding: 0.22rem;
    }

    .shell__top-nav {
        flex: 1;
        min-width: 0;
        justify-content: space-evenly;
        gap: 0.1rem;
    }

    .shell__top-nav-link {
        flex: 1 1 0;
        min-width: 0;
        height: 2.2rem;
        padding: 0 0.35rem;
        gap: 0;
    }

    .shell__top-nav-link span { display: none; }

    .shell__top-nav-link .mud-icon-root { font-size: 1.15rem !important; }

    .shell__float-sep {
        height: 1.35rem;
        margin-inline: 0.1rem;
    }

    .shell__icon-btn {
        width: 2.2rem;
        height: 2.2rem;
    }

    .shell__icon-btn .mud-icon-root { font-size: 1.15rem !important; }

    .shell__pop {
        position: fixed;
        right: max(0.7rem, env(safe-area-inset-right, 0px));
        left: max(0.7rem, env(safe-area-inset-left, 0px));
        width: auto;
        max-width: none;
        top: calc(env(safe-area-inset-top, 0px) + 5.6rem);
        border-radius: 1.1rem;
        animation: shell-pop-in 0.28s var(--ease-out) both;
    }
}

@keyframes shell-pop-in {
    from {
        opacity: 0;
        transform: translateY(-6px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* Very narrow phones */
@media (max-width: 380px) {
    .shell {
        --shell-pad-top: 6.6rem;
        --shell-pad-x: 0.7rem;
    }

    .shell__brand-link {
        padding: 0.3rem 0.55rem;
        font-size: 0.74rem;
    }

    .theme-toggle {
        grid-template-columns: repeat(3, 1.35rem);
    }

    .theme-toggle__pill,
    .theme-toggle__btn {
        width: 1.35rem;
        height: 1.35rem;
    }

    .theme-toggle[data-active='dark'] .theme-toggle__pill { transform: translateX(1.35rem); }
    .theme-toggle[data-active='system'] .theme-toggle__pill { transform: translateX(2.7rem); }
}

.mud-snackbar {
    transition-duration: 80ms !important;
}

.mud-snackbar.mud-alert-filled-success,
.mud-alert-filled-success.mud-snackbar {
    background-color: var(--toast-ok-bg) !important;
    color: var(--toast-ok-fg) !important;
}

.mud-snackbar.mud-alert-filled-success .mud-snackbar-icon,
.mud-snackbar.mud-alert-filled-success .mud-button-root,
.mud-snackbar.mud-alert-filled-success .mud-icon-button,
.mud-alert-filled-success.mud-snackbar .mud-typography {
    color: var(--toast-ok-fg) !important;
}

.mud-snackbar.mud-alert-filled-error,
.mud-alert-filled-error.mud-snackbar {
    background-color: var(--toast-err-bg) !important;
    color: var(--toast-err-fg) !important;
}

.mud-snackbar.mud-alert-filled-error .mud-snackbar-icon,
.mud-snackbar.mud-alert-filled-error .mud-button-root,
.mud-snackbar.mud-alert-filled-error .mud-icon-button,
.mud-alert-filled-error.mud-snackbar .mud-typography {
    color: var(--toast-err-fg) !important;
}