/*
 * Filename: _normalize.scss
 * FullPath: modules/projects/veela.css/src/scss/basic/_normalize.scss
 * Change date and time: 16.25.00_31.07.2026
 * Reason for changes: Basic consumes the canonical core token emitter.
 */
@use "./shared" as *;
@use "../core/tokens";
@use "../layers";

@layer base {
    @keyframes bottom-to-top {
        0% {
            opacity: 0;
            transform: translateY(10%);
        }

        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @media screen {
        *,
        *::before,
        *::after {
            @include reset-box-model;
            box-sizing: border-box;
            dynamic-range-limit: no-limit;
        }

        :where(html) {
            -webkit-text-size-adjust: 100%;
            tab-size: 4;
            font-size-adjust: from-font;
            font-optical-sizing: auto;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            text-rendering: optimizeLegibility;
            font-family: var(--font-sans);
            font-size: 16px;
            line-height: 1.5;
            dynamic-range-limit: no-limit;
            background: none;
            background-color: transparent;
            border: none 0px transparent;
            outline: none 0px transparent;
        }

        :where(body) {
            inset: 0;
            margin: 0;
            padding: 0;
            border: none;
            min-block-size: min(var(--lv-height, 100lvb), 100cqb);
            block-size: fit-content;
            background: var(--color-bg);
            color: var(--color-text);
            line-height: var(--line-height);
            -webkit-font-smoothing: antialiased;
            text-rendering: optimizeLegibility;
            dynamic-range-limit: no-limit;
            background: none;
            background-color: transparent;
            border: none 0px transparent;
            outline: none 0px transparent;
        }

        :where(ul, ol) {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        :where(blockquote, q) {
            quotes: none;

            &::before,
            &::after {
                content: "";
                content: none;
            }
        }

        :where(article, main, aside, section, header, footer, nav) {
            border: none 0px transparent;
            outline: none 0px transparent;
            box-shadow: none 0px transparent;
        }

        :where(table) {
            border-collapse: collapse;
            border-spacing: 0;
            display: block;
            overflow-x: auto;
            inline-size: max-content;
            max-inline-size: 100%;
            margin-block: 1rem;
            border: 1px solid var(--color-border);
            border-radius: var(--border-radius);

            :where(th, td) {
                padding: 0.5rem 1rem;
                border-block-end: 1px solid var(--color-border);
                text-align: start;
            }

            :where(th) {
                background-color: var(--color-table);
                color: var(--color-text);
                font-weight: bold;
            }

            :where(tr:last-child td) {
                border-block-end: none;
            }

            :where(tr:nth-child(even)) {
                background-color: var(--color-bg-secondary);
            }
        }

        :focus-visible {
            @include focus-ring();
        }

        :focus:not(:focus-visible) {
            outline: none;
        }

        :where(button, input, optgroup, select, textarea) {
            @include reset-form-appearance;
            line-height: 1.15;
            border: none 0px transparent;
            outline: none 0px transparent;
            box-shadow: none 0px transparent;
        }

        :where(button) {
            min-block-size: fit-content;
            min-inline-size: fit-content;
            padding-inline: 1rem;
            padding-block: 0.5rem;
            gap: 0.25rem;
            text-transform: none;
            user-select: none;
            pointer-events: auto;
            cursor: pointer;
            appearance: none;
            border: none;
            background: transparent;

            &:has(> ui-icon:only-child) {
                place-content: center;
                place-items: center;
                aspect-ratio: 1 / 1;
            }

            &:disabled {
                pointer-events: none;
                cursor: not-allowed;
            }
        }

        :where(select) {
            text-transform: none;
        }

        :where(button, [type="button"], [type="reset"], [type="submit"]) {
            -webkit-appearance: button;
            cursor: pointer;

            &::-moz-focus-inner {
                border-style: none;
                padding: 0;
            }
        }

        :where(fieldset, dialog) {
            border: none;
            padding: 0;
            margin: 0;
        }

        :where(legend) {
            padding: 0;
        }

        :where(progress) {
            vertical-align: baseline;
        }

        :where(textarea) {
            overflow: auto;
            resize: vertical;
        }

        :where([type="search"]) {
            -webkit-appearance: textfield;
            outline-offset: -2px;

            &::-webkit-search-decoration {
                -webkit-appearance: none;
            }
        }

        :where([type="range"]) {
            -webkit-appearance: none;
        }

        :where(details > summary),
        :where(summary) {
            cursor: pointer;
        }

        :where(mark) {
            background-color: transparent;
            color: inherit;
        }

        :where(sub, sup) {
            font-size: 75%;
            line-height: 0;
            position: relative;
            vertical-align: baseline;
        }

        :where(sup) {
            top: -0.5em;
        }

        :where(sub) {
            bottom: -0.25em;
        }

        :where(a) {
            color: var(--color-link, inherit);
            text-decoration: inherit;
            text-underline-offset: 0.2em;
            pointer-events: auto;
            cursor: pointer;
            transition: color var(--transition-fast);

            &:hover {
                color: var(--color-primary-hover);
            }
        }

        :where(img, canvas, svg, video, iframe, picture) {
            max-inline-size: 100%;
            block-size: auto;
            border: none 0px transparent;
            outline: none 0px transparent;
            box-shadow: none 0px transparent;
            dynamic-range-limit: no-limit;
        }

        :where(img, video, canvas, svg, picture) {
            @include media-sizing;
        }

        :where(img, video) {
            object-fit: contain;
            object-position: center;
        }

        :where(picture) {
            display: contents;
        }

        :where(iframe) {
            max-inline-size: 100%;
            block-size: auto;
        }

        :where(em, i) {
            font-style: normal;
        }

        :where(strong, b) {
            font-weight: normal;
        }

        :where(code, kbd, samp, pre) {
            font-family: var(--font-family-mono, "SF Mono", "Monaco", "Inconsolata", "Roboto Mono", monospace);
            font-size: 1em;
        }

        :where(code, pre) {
            font-family: var(--font-mono);
            font-size: 0.875em;
        }

        :where(:not(pre) > code, samp, kbd) {
            @include code-styling();
        }

        /* WHY: Never paint `pre > code` as inline chips. Capacitor highlight
         * is inplace/source-only (no overlay), so the old `code` background
         * showed a strip per line. */
        :where(:not(pre) > code) {
            background: var(--color-bg-alt);
            padding: 0.125em 0.25em;
            border-radius: var(--radius-sm);
        }

        :where(pre) {
            background: var(--color-bg-alt);
            padding: var(--space-md);
            border-radius: var(--radius-md);
            overflow-x: auto;

            :where(code) {
                display: block;
                background: transparent;
                padding: 0;
                border-radius: 0;
            }
        }

        :where(input, textarea, select, button, option) {
            @include reset-borders;
            accent-color: var(--color-link, currentColor);
            font-variant-emoji: text;
            border: none 0px transparent;
            outline: none 0px transparent;
            box-shadow: none 0px transparent;
        }

        :where(span) {
            font-variant-emoji: text;
        }

        :where(hr) {
            border: none;
            border-block-start: 1px solid var(--color-border);
            margin-block: var(--space-lg);
        }

        ::-webkit-scrollbar {
            inline-size: 8px;
            block-size: 8px;
        }

        ::-webkit-scrollbar-track {
            background: transparent;
        }

        ::-webkit-scrollbar-thumb {
            background: var(--color-outline-variant, #d1d5db);
            border-radius: 4px;

            &:hover {
                background: var(--color-outline, #9ca3af);
            }
        }

        * {
            scrollbar-width: thin;
            scrollbar-color: var(--color-outline-variant, #d1d5db) transparent;
        }

        :where(input, textarea, select) {
            inline-size: 100%;
            padding: 0.5rem;
            font-size: var(--font-size-base);
            background-color: var(--color-bg-alt);
            color: var(--color-fg);
            border: 0px solid var(--color-border);
            border-radius: var(--border-radius);

            &:focus {
                outline: none;
                border-color: var(--color-primary);
            }

            &::placeholder {
                color: var(--color-text-secondary);
                opacity: 0.7;
            }

            &:disabled {
                background-color: var(--color-bg-secondary);
                cursor: not-allowed;
                opacity: 0.5;
            }
        }

        :where(input) {
            &:-webkit-autofill::first-line,
            &:autofill::first-line {
                font-size: 1em;
                text-size-adjust: 100%;
            }

            &:-internal-autofill-previewed {
                letter-spacing: #{"calc(1em / 10)"} !important;
            }
        }

        :where(input):is([type="radio"], [type="checkbox"]) {
            inline-size: 1rem;
            block-size: 1rem;
            accent-color: var(--color-primary);
            aspect-ratio: 1 / 1;
        }

        :where(label) {
            font-weight: 600;
            user-select: none;
            pointer-events: none;
            margin-block-end: 0.25rem;
        }

        :where(h1, h2, h3, h4, h5, h6) {
            font-weight: 600;
            line-height: 1.2;
            margin-block: 0.5em;
            text-wrap: balance;
        }

        :where(h1) {
            font-size: 2rem;
        }

        :where(h2) {
            font-size: 1.5rem;
        }

        :where(h3) {
            font-size: 1.25rem;
        }

        :where(h4) {
            font-size: 1.125rem;
        }

        :where(h5) {
            font-size: 1rem;
        }

        :where(h6) {
            font-size: 0.875rem;
        }

        :where(p) {
            text-wrap: pretty;
            margin-block: 1em;
        }

        :where(article, .content) {
            ul,
            ol {
                margin-block: var(--space-md);
                padding-inline-start: var(--space-lg);
            }

            ul {
                list-style: disc;
            }

            ol {
                list-style: decimal;
            }
        }

        :where(blockquote) {
            margin-inline: 1rem;
            padding-inline: 1rem;
            border-inline-start: 0.25rem solid var(--color-secondary);
            color: var(--color-text-secondary);
            font-style: italic;
        }

        :where(body, main, aside, pre, code, textarea, [data-scrollable], .scrollable) {
            @include scrollbar-styling();
        }

        //:not(:defined),
        :where(link, head, script, style, meta),
        [hidden] {
            display: none !important;
        }

        /*:not(:defined) {
            opacity: 0;
            visibility: collapse;
            pointer-events: none;
        }*/

        :where(link, head, script, style, meta) {
            pointer-events: none !important;
        }

        [aria-hidden="true"] {
            visibility: collapse;
            pointer-events: none;
            opacity: 0;
        }

        [data-dragging] {
            will-change: transform;
            cursor: grabbing;
        }

        :where(a, button, [role="button"]) {
            -webkit-tap-highlight-color: transparent;
        }

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

@layer layout {
    @media screen {
        :where(footer, header, main) {
            margin-inline: auto;
            padding: 0;
        }

        :where(header) {
            text-align: center;
        }

        :where(nav) {
            @include flex-row-wrap();
            margin-block-end: 0;

            ul {
                display: flex;
                list-style: none;
                padding: 0;
                gap: 1rem;
                margin: 0;

                li {
                    position: relative;
                }
            }

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

        :where(section) {
            display: flex;
            flex-wrap: wrap;
            justify-content: var(--justify-important, center);
            gap: 1rem;

            :where(aside) {
                border: 1px solid var(--color-bg-secondary);
                border-radius: var(--border-radius);
                box-shadow: var(--box-shadow);
                padding: 1.25rem;
                inline-size: var(--width-card);
                flex: 1 1 var(--width-card);
            }
        }
    }
}

@layer components {
    @media screen {
        :where(dialog) {
            margin: auto;
            padding: 1rem;
            background: var(--color-bg);
            color: var(--color-text);
            border: 1px solid var(--color-border);
            border-radius: var(--border-radius);
            box-shadow: var(--box-shadow);
            max-inline-size: min(90vw, 600px);
            max-block-size: 85vh;

            &::backdrop {
                background-color: rgb(0 0 0 / 0.5);
            }

            &[open] {
                animation: bottom-to-top 0.25s ease-out;
            }
        }

        :where(button, input[type="submit"], input[type="button"]) {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background-color: var(--color-link);
            border: 0px solid transparent;
            border-radius: var(--border-radius);
            padding: 0.5rem 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: filter 0.2s ease, transform 0.1s ease;

            &:disabled {
                opacity: 0.6;
                cursor: not-allowed;
                filter: none;
                background-color: var(--color-secondary);
            }
        }

        :where(canvas):is([is="ui-canvas"]) {
            position: fixed;
            inset: 0;
            inset-block-end: auto;
            pointer-events: none;
            z-index: 0;
            padding: 0;
            margin: 0;
            max-inline-size: max(100%, min(100cqi, 100lvi)) !important;
            max-block-size: max(100%, min(100cqb, 100lvb)) !important;
            max-inline-size: max(100%, min(100cqi, 100lvi)) !important;
            max-block-size: max(100%, min(100cqb, 100lvb)) !important;
            box-sizing: border-box !important;
            background-color: transparent !important;
            border: none 0px transparent !important;
            outline: none 0px transparent !important;
            min-inline-size: 0;
            min-block-size: 0;
            object-fit: cover;
            object-position: center;
        }

    }
}

//
@layer overrides {
    @media screen {
        [data-scheme="dark"],
        [data-theme="dark"] {
            color-scheme: dark only;

            & * {
                color-scheme: dark;
            }
        }

        [data-scheme="light"],
        [data-theme="light"] {
            color-scheme: light only;

            & * {
                color-scheme: light;
            }
        }

        [data-scheme="system"],
        [data-theme="system"] {
            color-scheme: light dark;
        }
        
        /* Scheme Overrides — align with Theme.ts data-scheme / data-theme */
        [data-scheme="dark"], [data-theme="dark"] { color-scheme: dark only; & * { color-scheme: dark; } }
        [data-scheme="light"], [data-theme="light"] { color-scheme: light only; & * { color-scheme: light; } }
        /*
         * WHY: When QS/Theme pins data-theme=light|dark, do NOT let stale data-scheme=auto
         * win (same specificity, later rule used to force `light dark` and keep OS dark).
         */
        [data-scheme="auto"]:not([data-theme="light"]):not([data-theme="dark"]),
        [data-theme="auto"],
        [data-scheme="system"]:not([data-theme="light"]):not([data-theme="dark"]),
        [data-theme="system"] { color-scheme: light dark; }
    }
}