/* Solvia SupportAssist — single global stylesheet.
   Theme "Solvia Paper": light, calm, professional — aligned with www.solvia.ch.
   Layers: reset, base, tokens, layout, components, utilities. */

@layer reset, base, tokens, layout, components, utilities;

@font-face {
    font-family: "InterVariable";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("fonts/InterVariable.woff2") format("woff2");
}

@font-face {
    font-family: "InterVariable";
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url("fonts/InterVariable-Italic.woff2") format("woff2");
}

@layer reset {
    *,
    *::before,
    *::after {
        box-sizing: border-box;
        margin: 0;
    }
}

@layer tokens {
    :root {
        /* palette — Solvia paper & teal (see www.solvia.ch global.css) */
        --color-bg: #faf9f6;
        --color-bg-accent: #f5efe6;
        --color-surface: #ffffff;
        --color-surface-strong: #ffffff;
        --color-border: #e7e3da;
        --color-border-strong: #d8d4c9;
        --color-text: #19181c;
        --color-text-soft: #3b3b42;
        --color-text-muted: #6b6b73;
        --color-brand: #358997;
        --color-brand-hover: #2a6f7a;
        --color-brand-deep: #1f5660;
        --color-brand-soft: #8ed3d4;
        --color-brand-tint: #e6f0f1;
        --color-link: #2a6f7a;
        --color-danger: #b42318;
        --color-danger-surface: #fdecec;
        --color-ok: #1a7f4b;
        --color-ok-surface: #e5f5eb;
        --color-warn: #9a6700;
        --color-warn-surface: #fdf3d8;
        --color-ink-on-brand: #faf9f6;

        /* type */
        --font-sans: "InterVariable", "Inter", ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
        --font-display: var(--font-sans);
        --font-mono: ui-monospace, "Cascadia Code", Consolas, monospace;
        --text-xs: 0.75rem;
        --text-sm: 0.875rem;
        --text-base: 1rem;
        --text-lg: 1.25rem;
        --text-xl: 2rem;
        --text-2xl: clamp(2.6rem, 6vw, 4rem);

        /* spacing scale */
        --space-1: 0.25rem;
        --space-2: 0.5rem;
        --space-3: 1rem;
        --space-4: 1.5rem;
        --space-5: 2.5rem;
        --space-6: 4rem;

        --radius: 12px;
        --radius-lg: 20px;
        --radius-pill: 999px;

        --shadow-card: 0 1px 2px rgb(10 10 12 / 4%), 0 24px 56px -24px rgb(10 10 12 / 18%);
        --shadow-soft: 0 1px 2px rgb(10 10 12 / 4%), 0 6px 18px -8px rgb(10 10 12 / 10%);
        --focus-ring: 0 0 0 3px rgb(53 137 151 / 25%);
    }
}

@layer base {
    html {
        font-family: var(--font-sans);
        font-feature-settings: "cv11", "ss01", "ss03";
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
        color: var(--color-text);
        background-color: var(--color-bg);
    }

    body {
        min-height: 100dvh;
        position: relative;
        /* calm teal mesh, barely-there — echoes the website hero */
        background:
            radial-gradient(48rem 30rem at 10% -8%, color-mix(in oklab, var(--color-brand-soft) 26%, transparent), transparent 60%),
            radial-gradient(44rem 28rem at 105% 0%, color-mix(in oklab, var(--color-brand) 10%, transparent), transparent 65%),
            var(--color-bg);
        background-attachment: fixed;
    }

    h1, h2, h3 {
        font-family: var(--font-display);
        font-weight: 650;
        letter-spacing: -0.035em;
    }

    a {
        color: var(--color-link);
        text-decoration: none;
    }

    a:hover {
        text-decoration: underline;
        text-underline-offset: 2px;
    }

    ::selection {
        background: var(--color-brand);
        color: var(--color-bg);
    }

    :focus-visible {
        outline: none;
        box-shadow: var(--focus-ring);
        border-radius: 4px;
    }
}

@layer components {
    /* ---- auth (login) scene ------------------------------------------ */

    .auth {
        min-height: 100dvh;
        display: flex;
        flex-direction: column;
        position: relative;
        z-index: 1;
    }

    .auth__layout {
        flex: 1;
        display: grid;
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
        align-items: center;
        gap: var(--space-6);
        width: min(72rem, 100%);
        margin-inline: auto;
        padding: var(--space-5) var(--space-4);
    }

    .auth__brand {
        display: flex;
        flex-direction: column;
        gap: var(--space-4);
        animation: rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
    }

    .auth__wordmark {
        font-size: 0.72rem;
        letter-spacing: 0.3em;
        text-transform: uppercase;
        color: var(--color-brand);
        font-weight: 650;
    }

    .auth__title {
        font-size: var(--text-2xl);
        font-weight: 650;
        line-height: 1.02;
        letter-spacing: -0.045em;
        color: var(--color-text);
    }

    .auth__title span {
        display: block;
        color: var(--color-brand);
    }

    .auth__lede {
        font-size: var(--text-lg);
        color: var(--color-text-soft);
        line-height: 1.55;
        max-width: 28rem;
    }

    .auth__points {
        list-style: none;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
        border-left: 2px solid var(--color-border-strong);
        padding-left: var(--space-3);
    }

    .auth__points li {
        color: var(--color-text-muted);
        font-size: var(--text-sm);
        line-height: 1.5;
    }

    .auth__points li::before {
        content: "▸ ";
        color: var(--color-brand);
    }

    .auth__panel {
        animation: rise 0.7s 0.12s cubic-bezier(0.2, 0.7, 0.2, 1) both;
    }

    .auth__card {
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        padding: var(--space-5);
        box-shadow: var(--shadow-card);
        display: flex;
        flex-direction: column;
        gap: var(--space-4);
    }

    .auth__card-title {
        font-size: var(--text-xl);
        font-weight: 650;
    }

    .auth__card-sub {
        color: var(--color-text-muted);
        font-weight: 400;
        font-size: var(--text-base);
        letter-spacing: 0;
    }

    .auth__form {
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
    }

    .auth__help {
        font-size: var(--text-xs);
        color: var(--color-text-muted);
        line-height: 1.6;
    }

    .auth__footer {
        text-align: center;
        padding: var(--space-3);
        font-size: var(--text-xs);
        color: var(--color-text-muted);
    }

    @media (max-width: 56rem) {
        .auth__layout {
            grid-template-columns: 1fr;
            gap: var(--space-4);
            align-content: center;
        }

        .auth__brand {
            text-align: center;
            align-items: center;
        }

        .auth__points {
            display: none;
        }
    }

    /* ---- shared: fields, buttons, alerts, badges ----------------------- */

    .field {
        display: flex;
        flex-direction: column;
        gap: var(--space-1);
    }

    .field__label {
        font-size: 0.72rem;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--color-text-muted);
        font-weight: 650;
    }

    .field__input {
        padding: 0.7rem var(--space-3);
        border-radius: var(--radius);
        border: 1px solid var(--color-border-strong);
        background: var(--color-surface);
        color: var(--color-text);
        font-size: var(--text-base);
        font-family: var(--font-sans);
        transition: border-color 0.15s, box-shadow 0.15s;
    }

    .field__input:hover {
        border-color: var(--color-brand-soft);
    }

    .field__input:focus-visible {
        border-color: var(--color-brand);
        box-shadow: var(--focus-ring);
    }

    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-2);
        padding: 0.7rem var(--space-4);
        border-radius: var(--radius-pill);
        border: 1px solid var(--color-border-strong);
        background: var(--color-surface);
        color: var(--color-text);
        font-size: var(--text-sm);
        font-family: var(--font-sans);
        font-weight: 600;
        letter-spacing: -0.01em;
        cursor: pointer;
        transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.12s;
    }

    .btn:hover {
        border-color: var(--color-text);
        transform: translateY(-1px);
    }

    .btn:active {
        transform: translateY(0);
    }

    .btn--primary {
        border-color: transparent;
        background: var(--color-text);
        color: var(--color-ink-on-brand);
    }

    .btn--primary:hover {
        background: var(--color-brand-deep);
        border-color: transparent;
    }

    .btn--block {
        width: 100%;
    }

    .btn--ghost {
        background: transparent;
    }

    .btn--warn {
        border-color: var(--color-warn);
        color: var(--color-warn);
        background: transparent;
    }

    .btn--warn:hover {
        background: var(--color-warn-surface);
        border-color: var(--color-warn);
    }

    .alert {
        padding: var(--space-2) var(--space-3);
        border-radius: var(--radius);
        font-size: var(--text-sm);
        line-height: 1.5;
    }

    .alert--error {
        background: var(--color-danger-surface);
        border: 1px solid color-mix(in oklab, var(--color-danger) 30%, transparent);
        color: var(--color-danger);
    }

    .badge {
        display: inline-block;
        padding: 0.2rem 0.65rem;
        border-radius: var(--radius-pill);
        font-size: var(--text-xs);
        font-weight: 650;
        letter-spacing: 0.02em;
        background: var(--color-bg-accent);
        color: var(--color-text-muted);
    }

    .badge--active {
        background: var(--color-brand-tint);
        color: var(--color-brand-deep);
    }

    .badge--warn {
        background: var(--color-warn-surface);
        color: var(--color-warn);
    }

    .badge--ok {
        background: var(--color-ok-surface);
        color: var(--color-ok);
    }

    .badge--danger {
        background: var(--color-danger-surface);
        color: var(--color-danger);
    }

    /* ---- landing (interim home placeholder) --------------------------- */

    .landing {
        min-height: 100dvh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: var(--space-5);
        padding: var(--space-4);
        text-align: center;
        position: relative;
        z-index: 1;
    }

    .landing__card {
        max-width: 34rem;
        padding: var(--space-5);
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-card);
        animation: rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
    }

    .landing__brand {
        font-size: 0.72rem;
        letter-spacing: 0.3em;
        text-transform: uppercase;
        color: var(--color-brand);
        font-weight: 650;
    }

    .landing__title {
        font-size: var(--text-xl);
        font-weight: 650;
        margin-block: var(--space-2) var(--space-4);
    }

    .landing__tagline {
        font-size: var(--text-lg);
    }

    .landing__hint {
        margin-top: var(--space-4);
        font-size: var(--text-sm);
        color: var(--color-text-muted);
        line-height: 1.6;
    }

    /* ---- page chrome (authenticated app pages) ------------------------ */

    .page {
        max-width: 60rem;
        margin-inline: auto;
        padding: var(--space-4);
        display: flex;
        flex-direction: column;
        gap: var(--space-4);
        position: relative;
        z-index: 1;
    }

    .page__header {
        display: flex;
        justify-content: space-between;
        align-items: start;
    }

    .page__header-actions {
        display: flex;
        align-items: center;
        gap: var(--space-2);
    }

    .admin-banner {
        background: var(--color-warn-surface);
        color: var(--color-warn);
        padding: var(--space-2) var(--space-3);
        border-radius: var(--radius);
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: var(--space-2);
        font-size: var(--text-sm);
    }

    .page__title {
        font-size: var(--text-lg);
        font-weight: 650;
    }

    .page__empty {
        color: var(--color-text-muted);
    }

    /* ---- reusable DataTable (QuickGrid wrapper) ------------------------ */

    .table {
        overflow-x: auto;
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        padding: var(--space-3);
        box-shadow: var(--shadow-soft);
    }

    .table__filter {
        display: block;
        margin-bottom: var(--space-3);
        max-width: 20rem;
    }

    .table__mono {
        font-family: var(--font-mono);
        font-size: var(--text-sm);
    }

    .table table {
        width: 100%;
        border-collapse: collapse;
    }

    .table table th {
        padding: var(--space-2) var(--space-3);
        text-align: left;
        text-transform: uppercase;
        font-size: 0.72rem;
        letter-spacing: 0.14em;
        font-weight: 650;
        color: var(--color-text-muted);
        border-bottom: 1px solid var(--color-border-strong);
    }

    .table table th button {
        background: none;
        border: none;
        padding: 0;
        margin: 0;
        cursor: pointer;
        color: inherit;
        font: inherit;
        text-transform: inherit;
        letter-spacing: inherit;
    }

    .table table td {
        padding: var(--space-2) var(--space-3);
    }

    .table table tbody tr {
        border-bottom: 1px solid var(--color-border);
    }

    .table table tbody tr:last-child {
        border-bottom: none;
    }

    .table table tbody tr:hover {
        background: var(--color-bg-accent);
    }

    /* ---- admin (usage report + settings editor) ------------------------ */

    .admin__section {
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
        padding: var(--space-4);
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-soft);
    }

    .admin__controls {
        display: flex;
        gap: var(--space-2);
        align-items: center;
        flex-wrap: wrap;
    }

    .admin__setting {
        display: grid;
        grid-template-columns: 16rem 1fr;
        gap: var(--space-2);
        align-items: center;
    }

    /* ---- chat (Case page) ---------------------------------------------- */

    .chat {
        height: 100dvh;
        max-height: 100dvh;
    }

    .chat__messages {
        flex: 1;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
        padding-block: var(--space-3);
    }

    .chat__bubble {
        max-width: 85%;
        padding: var(--space-2) var(--space-3);
        border-radius: var(--radius);
        line-height: 1.5;
    }

    .chat__bubble--user {
        align-self: flex-end;
        background: var(--color-brand-tint);
        color: var(--color-text);
    }

    .chat__bubble--bot {
        align-self: flex-start;
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        box-shadow: var(--shadow-soft);
    }

    .chat__composer {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
        padding-block: var(--space-3);
    }

    .chat__input {
        min-height: 4rem;
        padding: 0.7rem var(--space-3);
        border-radius: var(--radius);
        border: 1px solid var(--color-border-strong);
        background: var(--color-surface);
        color: var(--color-text);
        font-family: var(--font-sans);
        font-size: var(--text-base);
        resize: vertical;
        transition: border-color 0.15s, box-shadow 0.15s;
    }

    .chat__input:hover {
        border-color: var(--color-brand-soft);
    }

    .chat__input:focus-visible {
        border-color: var(--color-brand);
        box-shadow: var(--focus-ring);
    }

    .chat__actions {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        justify-content: space-between;
    }

    .chat__thumbs {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2);
    }

    .chat__thumb-wrap {
        position: relative;
    }

    .chat__thumb {
        max-height: 9rem;
        max-width: 14rem;
        border-radius: var(--radius);
        border: 1px solid var(--color-border);
        box-shadow: var(--shadow-soft);
        display: block;
    }

    .chat__thumb-chip {
        font-size: var(--text-xs);
        color: var(--color-text-muted);
        background: var(--color-bg-accent);
        border-radius: var(--radius-pill);
        padding: 0.15rem var(--space-2);
        align-self: center;
    }

    .chat__thumb-remove {
        position: absolute;
        top: -0.4rem;
        right: -0.4rem;
        width: 1.4rem;
        height: 1.4rem;
        border-radius: var(--radius-pill);
        border: 1px solid var(--color-border-strong);
        background: var(--color-surface);
        color: var(--color-text-muted);
        cursor: pointer;
        line-height: 1;
    }

    .chat__thumb-remove:hover {
        color: var(--color-danger);
    }

    .chat__dropzone {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-2);
        padding: var(--space-2) var(--space-3);
        border: 1px dashed var(--color-border-strong);
        border-radius: var(--radius);
        background: var(--color-surface);
        transition: border-color 0.15s, background 0.15s;
    }

    .chat__dropzone--over {
        border-color: var(--color-brand);
        background: var(--color-brand-tint);
    }

    .chat__dropzone-text {
        font-size: var(--text-xs);
        color: var(--color-text-muted);
    }

    .chat__dropzone-btn {
        font-size: var(--text-xs);
        padding: 0.35rem var(--space-3);
        white-space: nowrap;
    }

    .chat__notice {
        padding: var(--space-3);
        background: var(--color-bg-accent);
        border-radius: var(--radius);
        color: var(--color-text-muted);
        text-align: center;
    }

    .chat__feedback {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
        padding: var(--space-3);
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-soft);
    }

    .chat__stars {
        display: flex;
        gap: var(--space-1);
    }

    .chat__star {
        background: none;
        border: none;
        color: var(--color-border-strong);
        font-size: var(--text-lg);
        cursor: pointer;
    }

    .chat__star--on {
        color: var(--color-warn);
    }

    .chat__cursor {
        animation: blink 1s step-start infinite;
    }

    @keyframes blink {
        50% {
            opacity: 0;
        }
    }

    .chat__back {
        font-size: var(--text-sm);
    }

    .chat__ref {
        color: var(--color-text-muted);
        font-size: var(--text-sm);
    }
}

@layer utilities {
    .visually-hidden {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
    }

    @keyframes rise {
        from {
            opacity: 0;
            transform: translateY(14px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
    }
}