/**
 * minline.css — OOCSS Nested Theme
 * Copyright (c) 2025 Vivian Voss
 * Licensed under Apache 2.0
 */

@layer globals, minline, theme;

@layer globals {
    :root {
        --bg: light-dark(oklch(97% 0 0), oklch(15% 0 0));
        --surface: light-dark(oklch(100% 0 0), oklch(22% 0 0));
        --text: light-dark(oklch(15% 0 0), oklch(97% 0 0));
        --text-inv: light-dark(oklch(100% 0 0), oklch(100% 0 0));
        --muted: light-dark(oklch(60% 0 0), oklch(65% 0 0));
        --border: light-dark(oklch(85% 0 0), oklch(30% 0 0));
        --control: light-dark(oklch(92% 0 0), oklch(28% 0 0));
        --accent: oklch(55% 0.22 260);
        --success: oklch(65% 0.2 145);
        --warning: oklch(70% 0.18 85);
        --error: oklch(55% 0.25 25);
        --brand: oklch(57% 0.2 25);
        --stripe: light-dark(oklch(0% 0 0 / 0.05), oklch(100% 0 0 / 0.05));
        --shadow-sm: light-dark(oklch(0% 0 0 / 0.1), oklch(0% 0 0 / 0.2));
        --shadow-md: light-dark(oklch(0% 0 0 / 0.15), oklch(0% 0 0 / 0.3));
        --shadow-lg: light-dark(oklch(0% 0 0 / 0.2), oklch(0% 0 0 / 0.4));
        --overlay: oklch(0% 0 0 / 0.4);
        --radius: 12px;
        --disabled: repeating-linear-gradient(
            -45deg,
            transparent,
            transparent 2px,
            var(--stripe) 2px,
            var(--stripe) 4px
        );
    }

    * {
        box-sizing: border-box;
        margin: 0;
    }

    body {
        font-family: system-ui, sans-serif;
        min-height: 100dvh;
        background: var(--bg);
        color: var(--text);
    }
}

@layer minline {
    /* Button + Varianten */
    button {
        padding: 16px;
        font: inherit;
        font-weight: 500;
        background: var(--accent);
        color: var(--text-inv);
        border: none;
        border-radius: var(--radius);
        cursor: pointer;
        width: 100%;

        &:hover {
            filter: brightness(1.1);
        }
        &:disabled {
            background: var(--disabled), var(--control);
            color: var(--muted);
            cursor: not-allowed;
        }
        &.secondary {
            background: var(--control);
            color: var(--text);
        }
        &.icon {
            width: 48px;
            height: 36px;
            padding: 0;
            font-size: 28px;
            background: none;
            border: 2px solid transparent;
            &:hover {
                filter: none;
                border-color: var(--border);
            }
            &.active {
                border-color: var(--accent);
            }
        }
    }

    /* Toggle Switch */
    input[type="checkbox"] {
        appearance: none;
        width: 51px;
        height: 31px;
        background: var(--control);
        border-radius: 31px;
        position: relative;
        cursor: pointer;

        &::before {
            content: "";
            position: absolute;
            width: 27px;
            height: 27px;
            background: var(--text-inv);
            border-radius: 50%;
            top: 2px;
            left: 2px;
            box-shadow: 0 2px 4px var(--shadow-sm);
            transition: translate 0.2s;
        }
        &:checked {
            background: var(--success);
        }
        &:checked::before {
            translate: 20px;
        }
        &:disabled {
            background: var(--disabled), var(--control);
            cursor: not-allowed;
        }
    }

    /* Input Text + Varianten */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    input[type="url"],
    input[type="number"],
    input[type="tel"],
    textarea {
        width: 100%;
        padding: 12px 16px;
        font: inherit;
        background: var(--control);
        color: var(--text);
        border: 1px solid var(--border);
        border-radius: 10px;

        &::placeholder {
            color: var(--muted);
        }
        &:focus {
            outline: 2px solid var(--accent);
            outline-offset: 2px;
        }
        &.error {
            border-color: var(--error);
        }
        &:disabled {
            background: var(--disabled), var(--control);
            color: var(--muted);
            cursor: not-allowed;
        }
    }

    textarea {
        resize: vertical;
        min-height: 100px;
    }

    /* Password Input */
    .pw {
        position: relative;
        width: 100%;

        input[type="password"],
        input[type="text"] {
            width: 100%;
            padding-right: 48px;
        }
        input[type="checkbox"] {
            position: absolute;
            opacity: 0;
            pointer-events: none;
        }
        input[type="checkbox"] + label {
            position: absolute;
            right: 12px;
            top: 50%;
            transform: translateY(-50%);
            margin: 0;
            font-size: 0.6875rem;
            color: var(--muted);
            cursor: pointer;

            &::after {
                content: "show";
            }
            &:hover {
                color: var(--text);
            }
        }
        input[type="checkbox"]:checked + label::after {
            content: "hide";
        }
        input[type="checkbox"]:checked ~ input {
            -webkit-text-security: none;
        }
        input:not([type="checkbox"]) {
            -webkit-text-security: disc;
        }
    }

    /* Search Input */
    .search {
        --progress: 0;
        position: relative;
        width: 100%;

        input[type="search"] {
            width: 100%;
            padding-right: 48px;
        }
        &::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            width: calc(var(--progress) * 1%);
            height: 2px;
            background: var(--success);
            border-radius: 0 1px 1px 0;
            transition: width 0.2s;
        }
        button {
            position: absolute;
            right: 12px;
            top: 50%;
            transform: translateY(-50%);
            width: auto;
            height: auto;
            padding: 0;
            background: none;
            border: none;
            font-size: 0.6875rem;
            color: var(--muted);
            cursor: pointer;

            &:hover {
                color: var(--text);
                filter: none;
            }
        }
    }

    /* Select */
    select {
        width: 100%;
        padding: 12px 48px 12px 16px;
        font: inherit;
        background: var(--control)
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")
            no-repeat right 16px center / 20px;
        color: var(--text);
        border: 1px solid var(--border);
        border-radius: 10px;
        cursor: pointer;
        appearance: none;

        &:focus {
            outline: 2px solid var(--accent);
            outline-offset: 2px;
        }
        &:disabled {
            background:
                var(--disabled),
                var(--control)
                    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")
                    no-repeat right 16px center / 20px;
            color: var(--muted);
            cursor: not-allowed;
        }
    }

    /* Radio */
    input[type="radio"] {
        appearance: none;
        width: 22px;
        height: 22px;
        background: var(--control);
        border: 2px solid var(--border);
        border-radius: 50%;
        cursor: pointer;

        &:checked {
            border-color: var(--accent);
            background: var(--accent);
            box-shadow: inset 0 0 0 4px var(--surface);
        }
        &:disabled {
            background: var(--disabled), var(--control);
            cursor: not-allowed;
        }
    }

    /* Range Slider */
    .range {
        --value: 0;
        position: relative;
        width: 100%;
        height: 20px;

        input[type="range"] {
            width: 100%;
            height: 6px;
            background: linear-gradient(
                to right,
                var(--accent) calc(var(--value) * 1%),
                var(--control) calc(var(--value) * 1%)
            );
            border-radius: 3px;
            appearance: none;
            cursor: pointer;

            &::-webkit-slider-thumb {
                appearance: none;
                width: 20px;
                height: 20px;
                background: var(--accent);
                border-radius: 50%;
                box-shadow: 0 2px 4px var(--shadow-sm);
            }
            &:focus {
                outline: none;
            }
        }
    }

    input[type="range"] {
        width: 100%;
        height: 6px;
        background: var(--control);
        border-radius: 3px;
        appearance: none;
        cursor: pointer;

        &::-webkit-slider-thumb {
            appearance: none;
            width: 20px;
            height: 20px;
            background: var(--accent);
            border-radius: 50%;
            box-shadow: 0 2px 4px var(--shadow-sm);
        }
        &:focus {
            outline: none;
        }
    }

    /* Dual Range Slider */
    .range-dual {
        --min: 20;
        --max: 80;
        position: relative;
        height: 20px;

        &::before {
            content: "";
            position: absolute;
            top: 0;
            left: calc(var(--min) * 1%);
            width: calc((var(--max) - var(--min)) * 1%);
            height: 6px;
            background: var(--accent);
            border-radius: 3px;
            pointer-events: none;
            z-index: 1;
        }
        input[type="range"] {
            position: absolute;
            width: 100%;
            background: transparent;
            pointer-events: none;

            &::-webkit-slider-thumb {
                pointer-events: auto;
            }
            &:focus {
                outline: none;
            }
        }
        input[type="range"]:first-of-type {
            background: var(--control);
        }
    }

    /* Date Input */
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"] {
        width: 100%;
        padding: 12px 16px;
        font: inherit;
        background: var(--control);
        color: var(--text);
        border: 1px solid var(--border);
        border-radius: 10px;

        &:focus {
            outline: 2px solid var(--accent);
            outline-offset: 2px;
        }
    }

    /* File Input */
    input[type="file"] {
        width: 100%;
        padding: 12px 16px;
        font: inherit;
        background: var(--control);
        color: var(--text);
        border: 1px solid var(--border);
        border-radius: 10px;

        &::file-selector-button {
            font: inherit;
            font-weight: 500;
            padding: 8px 16px;
            margin-right: 12px;
            background: var(--accent);
            color: var(--text-inv);
            border: none;
            border-radius: 8px;
            cursor: pointer;
        }
    }

    /* Progress Bar */
    progress {
        width: 100%;
        height: 8px;
        appearance: none;
        border-radius: 4px;
        overflow: hidden;

        &::-webkit-progress-bar {
            background: var(--control);
            border-radius: 4px;
        }
        &::-webkit-progress-value {
            background: var(--accent);
            border-radius: 4px;
        }
    }

    /* Meter */
    meter {
        width: 100%;
        height: 8px;
        appearance: none;
        border-radius: 4px;
        overflow: hidden;

        &::-webkit-meter-bar {
            background: var(--control);
            border-radius: 4px;
        }
        &::-webkit-meter-optimum-value {
            background: var(--success);
        }
        &::-webkit-meter-suboptimum-value {
            background: var(--warning);
        }
        &::-webkit-meter-even-less-good-value {
            background: var(--error);
        }
    }

    /* Label standalone */
    label {
        display: block;
        font-size: 0.875rem;
        font-weight: 500;
        color: var(--text);
        margin-bottom: 6px;
    }

    /* Visually hidden (accessible) */
    .visually-hidden {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    /* Output */
    output {
        display: block;
        font-size: 0.875rem;
        color: var(--muted);
        margin-top: 8px;
    }

    /* Segmented Control */
    .segments {
        display: flex;
        gap: 4px;
        background: var(--control);
        padding: 4px;
        border-radius: 10px;

        input {
            display: none;
        }
        label {
            flex: 1;
            padding: 8px 12px;
            margin-bottom: 0;
            text-align: center;
            font-size: 0.8125rem;
            font-weight: 500;
            border-radius: 6px;
            border-bottom: none;
            cursor: pointer;
        }
        input:checked + label,
        :has(> input:checked) > label {
            background: var(--surface);
        }
    }

    /* Fieldset */
    fieldset {
        border: none;
        padding: 0;
        margin-bottom: 24px;

        legend {
            font-size: 0.875rem;
            font-weight: 500;
            margin-bottom: 12px;
        }
        label {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 0;
            border-bottom: 1px solid var(--border);
            font-size: 0.9375rem;
            &:last-of-type {
                border: none;
            }
        }
    }

    /* Dots / Pagination */
    .dots {
        display: flex;
        gap: 8px;

        span {
            width: 8px;
            height: 8px;
            background: var(--border);
            border-radius: 4px;
            transition: all 0.3s;
            &.active {
                width: 24px;
                background: var(--text);
            }
        }
    }

    /* Card */
    .card {
        background: var(--surface);
        border-radius: calc(var(--radius) + 4px);
        box-shadow: 0 8px 32px var(--shadow-lg);
    }

    /* Details / Accordion */
    details {
        background: var(--surface);
        border-radius: var(--radius);
        margin-bottom: 12px;

        summary {
            padding: 20px 48px 20px 24px;
            font-weight: 500;
            cursor: pointer;
            list-style: none;
            position: relative;

            &::after {
                content: "+";
                position: absolute;
                right: 24px;
                top: 50%;
                translate: 0 -50%;
                font-size: 1.5rem;
                color: var(--muted);
            }
            &::-webkit-details-marker {
                display: none;
            }
        }
        &[open] summary::after {
            content: "−";
        }
        .content {
            padding: 0 24px 24px;
            display: flex;
            flex-direction: column;
            gap: 16px;
        }
    }

    /* Dialog */
    dialog {
        border: none;
        padding: 0;
        background: transparent;
        overflow: visible;
        max-width: none;
        width: fit-content;
        margin: auto;
        inset: 0;
        position: fixed;

        &::backdrop {
            background: var(--overlay);
            backdrop-filter: blur(4px);
        }
    }

    .dialog-wrapper {
        position: relative;
    }

    .dialog-main {
        background: var(--surface);
        border-radius: calc(var(--radius) + 4px);
        box-shadow: 0 8px 32px var(--shadow-lg);
        width: 90vw;
        max-width: 400px;
        overflow: hidden;
    }

    /* Progress Button */
    @property --progress {
        syntax: "<angle>";
        initial-value: 0deg;
        inherits: false;
    }

    .button-wrapper {
        padding: 3px;
        border-radius: calc(var(--radius) + 3px);
        background: transparent;

        &:has(button[data-save]:active),
        &:has(button[data-save].loading) {
            background: conic-gradient(
                from -90deg,
                var(--success) var(--progress),
                transparent var(--progress)
            );
            animation: fill-border 1s linear forwards;
        }
    }

    @keyframes fill-border {
        to {
            --progress: 360deg;
        }
    }

    /* Typography */
    h2 {
        font-size: 1.5rem;
        font-weight: 600;
        text-align: center;
        margin-bottom: 8px;
    }
    p {
        font-size: 0.875rem;
        color: var(--muted);
        text-align: center;
        margin-bottom: 32px;
    }

    @media (prefers-reduced-motion: reduce) {
        *,
        *::before {
            transition: none;
        }
    }
}