/*
 * Satyro Music — identity layer over Feishin. Spotify-style experience (near-black surfaces, one vivid
 * green accent, geometric sans, pill buttons), own brand: no Spotify name, logo, font or exact color.
 * Feishin applies its theme as CSS variables on the root element; these win with !important.
 */
html:root,
html:root[data-mantine-color-scheme] {
    --satyro-green: #22d36b;
    --satyro-green-hover: #3ae07f;

    --theme-colors-background: #121212 !important;
    --theme-colors-background-alternate: #000000 !important;
    --theme-colors-surface: #181818 !important;
    --theme-colors-surface-foreground: #ffffff !important;
    --theme-colors-border: #282828 !important;
    --theme-colors-foreground: #ffffff !important;
    --theme-colors-foreground-muted: #a7a7a7 !important;
    --theme-colors-primary: var(--satyro-green) !important;
    --theme-colors-primary-filled: var(--satyro-green) !important;
    --theme-colors-primary-contrast: #000000 !important;
    --theme-colors-state-success: var(--satyro-green) !important;

    --theme-radius-sm: 6px !important;
    --theme-radius-md: 8px !important;
    --theme-radius-lg: 10px !important;
    --theme-radius-xl: 999px !important;

    --theme-content-font-family: 'Figtree', 'Inter', system-ui, sans-serif !important;
    --mantine-font-family: 'Figtree', 'Inter', system-ui, sans-serif !important;
    --mantine-font-family-headings: 'Figtree', 'Inter', system-ui, sans-serif !important;
    --mantine-color-body: #121212 !important;

    --theme-scrollbar-track-background: transparent !important;
    --theme-scrollbar-handle-background: rgba(255, 255, 255, 0.18) !important;
    --theme-scrollbar-handle-hover-background: rgba(255, 255, 255, 0.32) !important;
}

html,
body {
    font-family: 'Figtree', 'Inter', system-ui, sans-serif !important;
    background: #000000;
    -webkit-font-smoothing: antialiased;
}

/* Headings: heavy and tight, like the reference look. */
h1, h2, h3,
.mantine-Title-root {
    font-family: 'Figtree', 'Inter', system-ui, sans-serif !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em;
}

/* Filled buttons become pills; primary actions read as the brand green with black text. */
.mantine-Button-root {
    border-radius: 999px !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em;
    transition: transform 0.12s ease, background-color 0.15s ease, filter 0.15s ease;
}
.mantine-Button-root:active {
    transform: scale(0.97);
}
.mantine-Button-root[data-variant='filled'] {
    background: var(--satyro-green) !important;
    color: #000000 !important;
}
.mantine-Button-root[data-variant='filled']:hover {
    background: var(--satyro-green-hover) !important;
}

/* Round icon buttons (play, transport controls) stay perfectly circular. */
.mantine-ActionIcon-root {
    border-radius: 999px !important;
}
.mantine-ActionIcon-root[data-variant='filled'] {
    background: var(--satyro-green) !important;
    color: #000000 !important;
    transition: transform 0.12s ease, background-color 0.15s ease;
}
.mantine-ActionIcon-root[data-variant='filled']:hover {
    background: var(--satyro-green-hover) !important;
    transform: scale(1.06);
}

/* Inputs: dark wells with a soft focus ring in the brand color. */
.mantine-Input-input {
    background: #242424 !important;
    border-color: transparent !important;
    border-radius: 999px !important;
}
.mantine-Input-input:focus,
.mantine-Input-input:focus-within {
    border-color: var(--satyro-green) !important;
    box-shadow: 0 0 0 1px var(--satyro-green) !important;
}

/* Sliders (seek, volume): thin white track that turns green on hover. */
.mantine-Slider-bar {
    background: #ffffff !important;
}
.mantine-Slider-root:hover .mantine-Slider-bar {
    background: var(--satyro-green) !important;
}
.mantine-Slider-thumb {
    border: none !important;
    background: #ffffff !important;
}

/* Text selection, focus rings and links themed from the palette. */
::selection {
    background: rgba(34, 211, 107, 0.35);
    color: #ffffff;
}
:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}
a {
    text-underline-offset: 0.18em;
}

/* ---------------------------------------------------------------------------------------------
 * Login (#/action-required with the Navidrome password form). brand.js sets html.satyro-login and
 * injects .satyro-login-art: a full-height brand stage of drifting sound waves (the logo's motif)
 * on the left, the form on its own quiet panel on the right. Phones stack the two.
 * ------------------------------------------------------------------------------------------- */
.satyro-login-art {
    display: none;
}
html.satyro-login {
    --login-panel: min(500px, 42vw);
}
html.satyro-login body {
    background: #000000;
}
html.satyro-login #player-bar,
html.satyro-login .fs-titlebar-outlet-module-container,
html.satyro-login .fs-page-header-module-container {
    display: none !important;
}

html.satyro-login .satyro-login-art {
    display: block;
    position: fixed;
    inset: 0 var(--login-panel) 0 0;
    z-index: 50;
    overflow: hidden;
    background:
        radial-gradient(120% 90% at 0% 100%, rgba(34, 211, 107, 0.28) 0%, rgba(34, 211, 107, 0) 60%),
        radial-gradient(90% 70% at 100% 0%, rgba(17, 94, 52, 0.55) 0%, rgba(17, 94, 52, 0) 70%),
        #050806;
}
.satyro-login-art svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.satyro-login-art .wave {
    fill: none;
    stroke: #22d36b;
    stroke-linecap: round;
    animation: satyro-drift var(--d, 30s) linear infinite;
    will-change: transform;
}
@keyframes satyro-drift {
    to { transform: translateX(var(--shift, -800px)); }
}
@media (prefers-reduced-motion: reduce) {
    .satyro-login-art .wave { animation: none; }
}
.satyro-login-brand {
    position: absolute;
    left: clamp(32px, 6vw, 96px);
    right: clamp(32px, 6vw, 96px);
    bottom: clamp(40px, 9vh, 112px);
    color: #ffffff;
}
.satyro-login-brand img {
    display: block;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    margin-bottom: 28px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}
.satyro-login-brand h1 {
    margin: 0;
    font-size: clamp(3rem, 6.4vw, 6rem);
    line-height: 0.92;
    font-weight: 800 !important;
    letter-spacing: -0.04em !important;
    text-wrap: balance;
}
.satyro-login-brand p {
    margin: 20px 0 0;
    max-width: 30ch;
    font-size: clamp(1rem, 1.3vw, 1.25rem);
    line-height: 1.45;
    color: #c4e9d2;
}

/* The form panel. */
html.satyro-login .mantine-Center-root:has(input[type='password']) {
    position: fixed !important;
    inset: 0 0 0 auto !important;
    width: var(--login-panel) !important;
    height: auto !important;
    z-index: 51;
    background: #121212;
    box-shadow: -24px 0 48px rgba(0, 0, 0, 0.35);
}
html.satyro-login .mantine-Center-root:has(input[type='password']) > .mantine-Paper-root {
    width: 100%;
    max-width: 380px;
    padding: 0 32px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}
/* Logo/name/"Navidrome" header: the stage already carries the brand. */
html.satyro-login form > .mantine-Stack-root > .mantine-Stack-root:first-child {
    display: none;
}
html.satyro-login form {
    display: flex;
    flex-direction: column;
}
html.satyro-login form::before {
    content: 'Entrar';
    order: -2;
    display: block;
    margin-bottom: 8px;
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #ffffff;
}
html.satyro-login form::after {
    content: 'Use a conta que o administrador criou para você.';
    display: block;
    order: -1;
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.45;
    color: #a7a7a7;
}
html.satyro-login form > .mantine-Stack-root {
    gap: 20px !important;
    margin-top: 28px;
}
html.satyro-login form .mantine-Stack-root .mantine-Stack-root {
    gap: 18px !important;
}

/* Labels in Portuguese (the app ships English here; aria labels are set by brand.js). */
html.satyro-login form .mantine-InputWrapper-label {
    font-size: 0 !important;
    margin-bottom: 8px;
}
html.satyro-login form .mantine-InputWrapper-label::before {
    font-size: 0.875rem;
    font-weight: 700;
    color: #ffffff;
}
html.satyro-login form .mantine-TextInput-label::before { content: 'Usuário'; }
html.satyro-login form .mantine-PasswordInput-label::before { content: 'Senha'; }
html.satyro-login form .mantine-InputWrapper-required {
    display: none;
}

html.satyro-login form .mantine-Input-input {
    height: 48px !important;
    min-height: 48px !important;
    padding-inline: 20px !important;
    font-size: 1rem !important;
    background: #1f1f1f !important;
    border: 1px solid #3a3a3a !important;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
html.satyro-login form .mantine-PasswordInput-innerInput {
    height: 46px !important;
    padding-inline: 20px !important;
    font-size: 1rem !important;
}
html.satyro-login form .mantine-Input-input:hover {
    border-color: #6a6a6a !important;
}
html.satyro-login form .mantine-Input-input:focus,
html.satyro-login form .mantine-Input-input:focus-within {
    background: #242424 !important;
    border-color: #ffffff !important;
    box-shadow: 0 0 0 1px #ffffff !important;
}
html.satyro-login form .mantine-PasswordInput-section {
    width: 48px;
}

html.satyro-login form button[type='submit'] {
    height: 52px !important;
    margin-top: 8px;
    font-size: 1rem !important;
    letter-spacing: 0 !important;
}
html.satyro-login form button[type='submit'] .mantine-Button-label {
    font-size: 0;
}
html.satyro-login form button[type='submit'] .mantine-Button-label::after {
    content: 'Entrar';
    font-size: 1rem;
    font-weight: 800;
}
html.satyro-login form button[type='submit']:not([data-disabled]):hover {
    transform: scale(1.02);
}
html.satyro-login form button[type='submit'][data-disabled] {
    background: #1e3a2a !important;
    color: #7fa592 !important;
    cursor: not-allowed;
}
html.satyro-login form button[type='submit'][data-loading] {
    background: var(--satyro-green) !important;
}

html.satyro-login input:-webkit-autofill {
    -webkit-text-fill-color: #ffffff;
    -webkit-box-shadow: 0 0 0 40px #1f1f1f inset;
    caret-color: #22d36b;
}
html.satyro-login input {
    caret-color: #22d36b;
}

/* Phones and narrow windows: the stage becomes a band on top, the form fills the rest. */
@media (max-width: 860px) {
    html.satyro-login {
        --login-band: clamp(220px, 34vh, 320px);
    }
    html.satyro-login .satyro-login-art {
        inset: 0 0 auto 0;
        height: var(--login-band);
    }
    html.satyro-login .mantine-Center-root:has(input[type='password']) {
        inset: var(--login-band) 0 0 0 !important;
        width: auto !important;
        align-items: flex-start;
        padding-top: 36px;
        overflow-y: auto;
        scrollbar-width: none;
        border-radius: 24px 24px 0 0;
        margin-top: -24px;
        box-shadow: 0 -16px 40px rgba(0, 0, 0, 0.4);
    }
    html.satyro-login .mantine-Center-root:has(input[type='password']) > .mantine-Paper-root {
        padding: 0 24px 32px !important;
    }
    .satyro-login-brand {
        left: 24px;
        right: 24px;
        bottom: 44px;
    }
    .satyro-login-brand img {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        margin-bottom: 16px;
    }
    .satyro-login-brand h1 {
        font-size: clamp(2.25rem, 11vw, 3.25rem);
    }
    .satyro-login-brand p {
        display: none;
    }
    html.satyro-login form::before {
        font-size: 1.625rem;
    }
}