/* MAIN.CSS
   Projekt-specifični stili — personalizacija ultra.css */

/* TOKENS */
@layer tokens {
    :root {
        /* Nadomestna vrednost — JS jo prepiše z izmerjeno višino */
        --header-h: 3.5rem;

        /* SEMANTIČNE BARVE */
        --color-primary:        light-dark(oklch(0.58 0.22 265), oklch(0.65 0.18 265));
        --color-primary-hover:  color-mix(in oklch, var(--color-primary), white 12%);
        --color-primary-active: color-mix(in oklch, var(--color-primary), black 8%);
        --color-primary-soft:   color-mix(in oklch, var(--color-primary), transparent 88%);
        --color-primary-border: color-mix(in oklch, var(--color-primary), transparent 70%);
        --color-primary-fg:     oklch(97% 0 0);

        --color-success:        light-dark(oklch(0.68 0.17 155), oklch(0.60 0.14 155));
        --color-success-hover:  color-mix(in oklch, var(--color-success), white 12%);
        --color-success-active: color-mix(in oklch, var(--color-success), black 8%);
        --color-success-soft:   color-mix(in oklch, var(--color-success), transparent 88%);
        --color-success-border: color-mix(in oklch, var(--color-success), transparent 70%);
        --color-success-fg:     light-dark(oklch(15% 0.01 262), oklch(97% 0 0));

        --color-danger:         light-dark(oklch(0.62 0.22 25), oklch(0.62 0.18 25));
        --color-danger-hover:   color-mix(in oklch, var(--color-danger), white 12%);
        --color-danger-active:  color-mix(in oklch, var(--color-danger), black 8%);
        --color-danger-soft:    color-mix(in oklch, var(--color-danger), transparent 88%);
        --color-danger-border:  color-mix(in oklch, var(--color-danger), transparent 70%);
        --color-danger-fg:      oklch(97% 0 0);

        --color-warning:        light-dark(oklch(0.75 0.16 75), oklch(0.65 0.13 75));
        --color-warning-hover:  color-mix(in oklch, var(--color-warning), white 12%);
        --color-warning-active: color-mix(in oklch, var(--color-warning), black 8%);
        --color-warning-soft:   color-mix(in oklch, var(--color-warning), transparent 88%);
        --color-warning-border: color-mix(in oklch, var(--color-warning), transparent 70%);
        --color-warning-fg:     light-dark(oklch(15% 0.01 262), oklch(97% 0 0));

        --color-info:           light-dark(oklch(0.70 0.13 220), oklch(0.62 0.11 220));
        --color-info-hover:     color-mix(in oklch, var(--color-info), white 12%);
        --color-info-active:    color-mix(in oklch, var(--color-info), black 8%);
        --color-info-soft:      color-mix(in oklch, var(--color-info), transparent 88%);
        --color-info-border:    color-mix(in oklch, var(--color-info), transparent 70%);
        --color-info-fg:        light-dark(oklch(15% 0.01 262), oklch(97% 0 0));

        /* NEVTRALNE — dodatne semantične */
        --color-surface:        light-dark(oklch(100% 0 0), oklch(18% 0.012 262));
        --color-border:         color-mix(in oklch, var(--color-text) 15%, transparent);
        --color-border-strong:  color-mix(in oklch, var(--color-text) 28%, transparent);
        --color-text-secondary: light-dark(oklch(35% 0.012 262), oklch(75% 0.008 262));

        /* Gumb — Material 3 emphasized easing */
        --transition-btn: 160ms cubic-bezier(0.2, 0, 0, 1);
    }
}

/* BASE */
@layer base {

    /* HEADER */
    header {
        position: sticky;
        inset-block-start: 0;
        z-index: 100;
        background-color: var(--color-bg);
        border-block-end: 1px solid var(--color-border);
        transition: transform 300ms cubic-bezier(0.2, 0, 0, 1);

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

    header.header-hidden {
        transform: translateY(-100%);
    }

    /* NAV — samodejni burger prek JS ResizeObserver */
    #nav {
        inline-size: 100%;
    }

    /* Desktop: nav linki inline (ko JS ugotovi da je dovolj prostora) */
    #nav:not([data-compact]) {
        #burger { display: none; }

        #m-menu {
            display: flex !important; /* prepiše HTML hidden attribute */
            flex-direction: row !important;
            position: static !important;
            align-items: center;
            gap: var(--space-3);
            background: none;
            border: none;
            padding: 0;
            box-shadow: none;
            margin: 0;

            a {
                inline-size: auto;
                padding-block: var(--space-1);
                padding-inline: var(--space-2);
            }

            hr {
                display: block;
                inline-size: 1px;
                block-size: 1.5rem;
                background-color: var(--color-border);
                border: none;
                margin: 0;
                flex-shrink: 0;
            }

            button { inline-size: auto; }
        }
    }

    /* Merni način — menu inline in nevidno za meritev, burger skrit */
    #nav[data-measuring] {
        #burger { display: none; }

        /* Vsi direktni otroci ne smejo krčiti — sicer scrollWidth ne zazna overflow-a */
        & > * { flex-shrink: 0; }

        #m-menu {
            display: flex !important;
            visibility: hidden;
            flex-direction: row !important;
            position: static !important;
            flex-shrink: 0;
            align-items: center;
            gap: var(--space-3);
            background: none;
            border: none;
            padding: 0;
            box-shadow: none;
            margin: 0;

            a, button, hr { flex-shrink: 0; }
        }
    }

    /* Mobilni meni — odprt (hidden atribut odstranjen z JS) */
    #nav[data-compact] #m-menu:not([hidden]) {
        display: flex;
        flex-direction: column;
        position: fixed;
        inset-block-start: calc(var(--header-h) + var(--space-2));
        inset-inline: var(--space-4);
        inset-block-end: auto;
        inline-size: auto;
        margin: 0;
        z-index: 99;
        padding: var(--space-2);
        border-radius: var(--radius-xl);
        background: var(--color-bg);
        border: 1px solid var(--color-border);
        box-shadow: var(--shadow-xl);
        gap: var(--space-1);

        a, button {
            inline-size: 100%;
            padding-block: var(--space-2);
            padding-inline: var(--space-3);
            border-radius: var(--radius-md);
            font-weight: 500;
            text-align: left;

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

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

    /* TEMA TOGGLE */
    #theme-toggle {
        gap: var(--space-2);

        #theme-icon {
            font-size: var(--font-5);
            font-family: system-ui, sans-serif;
            line-height: 1;
        }
    }

    /* TIPOGRAFIJA */
    a {
        font-weight: 500;

        /* Samo navadne povezave — gumbi (a.btn) obdržijo svojo barvo */
        &:not(.btn):hover { color: var(--color-primary); }
    }

    /* GUMBI */
    button, .btn {
        padding-block: var(--space-1);
        padding-inline: var(--space-3);
        border-radius: var(--radius-md);
        font-weight: 600;
        font-optical-sizing: auto;
        letter-spacing: -0.01em;
        display: flex;
        align-items: center;
        line-height: 1.4;
        gap: var(--space-2);
        transition:
            background-color var(--transition-btn),
            border-color var(--transition-btn),
            box-shadow var(--transition-btn),
            transform var(--transition-btn),
            color var(--transition-btn);

        i.icon {
            font-size: 1.1em;
            line-height: 1;
            flex-shrink: 0;
        }

        &:focus-visible {
            outline: 2px solid var(--color-primary-border);
            outline-offset: 2px;
        }

        &:active:not(:disabled):not([disabled]) {
            transform: scale(0.98);
        }

        &:disabled, &[disabled] {
            opacity: 0.5;
            pointer-events: none;
        }
    }

/* Solid — primarni */
    .btn-primary {
        color: var(--color-primary-fg);
        background-color: var(--color-primary);
        box-shadow:
            inset 0 1px 0 oklch(100% 0 0 / 0.12),
            0 1px 3px oklch(0% 0 0 / 0.12);

        &:hover {
            background-color: var(--color-primary-hover);
            box-shadow:
                inset 0 1px 0 oklch(100% 0 0 / 0.12),
                0 2px 6px oklch(0% 0 0 / 0.16);
        }

        &:active:not(:disabled) {
            background-color: var(--color-primary-active);
            box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.08);
        }
    }

    /* Outline */
    .btn-secondary {
        background-color: transparent;
        border: 1px solid var(--color-border-strong);
        color: var(--color-text);

        &:hover {
            background-color: var(--color-bg-secondary);
            border-color: color-mix(in oklch, var(--color-text) 50%, transparent);
        }

        &:active:not(:disabled) {
            background-color: color-mix(in oklch, var(--color-bg-secondary), var(--color-text) 5%);
        }
    }

    /* Ghost */
    .btn-plain {
        background-color: transparent;
        color: var(--color-text);

        &:hover { background-color: var(--color-bg-secondary); }

        &:active:not(:disabled) {
            background-color: color-mix(in oklch, var(--color-bg-secondary), var(--color-text) 8%);
        }
    }

    /* Solid — statusni (override ultra.css z ustreznimi fg barvami) */
    .btn-success {
        color: var(--color-success-fg);
        background-color: var(--color-success);
        box-shadow:
            inset 0 1px 0 oklch(100% 0 0 / 0.12),
            0 1px 3px oklch(0% 0 0 / 0.12);

        &:hover {
            background-color: var(--color-success-hover);
            box-shadow:
                inset 0 1px 0 oklch(100% 0 0 / 0.12),
                0 2px 6px oklch(0% 0 0 / 0.16);
        }

        &:active:not(:disabled) {
            background-color: var(--color-success-active);
            box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.08);
        }
    }

    .btn-danger {
        color: var(--color-danger-fg);
        background-color: var(--color-danger);
        box-shadow:
            inset 0 1px 0 oklch(100% 0 0 / 0.12),
            0 1px 3px oklch(0% 0 0 / 0.12);

        &:hover {
            background-color: var(--color-danger-hover);
            box-shadow:
                inset 0 1px 0 oklch(100% 0 0 / 0.12),
                0 2px 6px oklch(0% 0 0 / 0.16);
        }

        &:active:not(:disabled) {
            background-color: var(--color-danger-active);
            box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.08);
        }
    }

    .btn-warning {
        color: var(--color-warning-fg);
        background-color: var(--color-warning);
        box-shadow:
            inset 0 1px 0 oklch(100% 0 0 / 0.12),
            0 1px 3px oklch(0% 0 0 / 0.12);

        &:hover {
            background-color: var(--color-warning-hover);
            box-shadow:
                inset 0 1px 0 oklch(100% 0 0 / 0.12),
                0 2px 6px oklch(0% 0 0 / 0.16);
        }

        &:active:not(:disabled) {
            background-color: var(--color-warning-active);
            box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.08);
        }
    }

    .btn-info {
        color: var(--color-info-fg);
        background-color: var(--color-info);
        box-shadow:
            inset 0 1px 0 oklch(100% 0 0 / 0.12),
            0 1px 3px oklch(0% 0 0 / 0.12);

        &:hover {
            background-color: var(--color-info-hover);
            box-shadow:
                inset 0 1px 0 oklch(100% 0 0 / 0.12),
                0 2px 6px oklch(0% 0 0 / 0.16);
        }

        &:active:not(:disabled) {
            background-color: var(--color-info-active);
            box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.08);
        }
    }

    /* OBRAZCI */
    label {
        display: flex;
        flex-direction: column;
        gap: var(--space-1);
        font-weight: 500;

        &:has(input[type="checkbox"]),
        &:has(input[type="radio"]) {
            flex-direction: row;
            align-items: center;
            gap: var(--space-2);
            font-weight: 400;
            cursor: pointer;
        }
    }

    /* Besedilna polja, textarea, select */
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="hidden"]):not([type="submit"]):not([type="reset"]):not([type="button"]),
    textarea,
    select {
        padding-block: var(--space-2);
        padding-inline: var(--space-3);
        border-radius: var(--radius-md);
        color: var(--color-text);
        background-color: var(--color-bg);
        border: 1px solid var(--color-border-strong);
        /* Podeduj color-scheme od :root, da JS tema toggle deluje */
        color-scheme: inherit;
        transition:
            border-color var(--transition-btn),
            box-shadow var(--transition-btn);

        &::placeholder {
            color: var(--color-text-muted);
            opacity: 0.65;
        }

        &:focus-visible {
            outline: none;
            border-color: var(--color-primary);
            box-shadow: 0 0 0 3px var(--color-primary-soft);
        }

        /* :user-invalid se sproži šele po interakciji — boljši UX kot :invalid */
        &:user-invalid {
            border-color: var(--color-danger-border);

            &:focus-visible {
                border-color: var(--color-danger);
                box-shadow: 0 0 0 3px var(--color-danger-soft);
            }
        }

        &:user-valid {
            border-color: var(--color-success-border);

            &:focus-visible {
                border-color: var(--color-success);
                box-shadow: 0 0 0 3px var(--color-success-soft);
            }
        }
    }

    textarea {
        min-block-size: 120px;
        resize: vertical;
    }

    /* Select — custom chevron */
    select {
        padding-inline-end: calc(var(--space-3) + 1.5em);
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23555' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right var(--space-2) center;
        background-size: 1.25em;
        cursor: pointer;
    }

    /* Temni chevron za temno temo — OS preferenca */
    @media (prefers-color-scheme: dark) {
        :root:not([style*="light"]) select {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23aaa' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
        }
    }

    /* Temni chevron za temno temo — JS override */
    :root[style*="dark"] select {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23aaa' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    }

    /* Checkbox in radio — skupni bazni stil */
    input[type="checkbox"],
    input[type="radio"] {
        inline-size: 1.1em;
        block-size: 1.1em;
        border: 2px solid var(--color-border-strong);
        background-color: var(--color-bg);
        color-scheme: inherit;
        cursor: pointer;
        flex-shrink: 0;
        transition:
            background-color var(--transition-btn),
            border-color var(--transition-btn);

        &:checked {
            background-color: var(--color-primary);
            border-color: var(--color-primary);
        }

        &:focus-visible {
            outline: 2px solid var(--color-primary-border);
            outline-offset: 2px;
        }
    }

    input[type="checkbox"] {
        border-radius: var(--radius-sm);

        &:checked {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
            background-size: 0.75em;
            background-position: center;
            background-repeat: no-repeat;
        }
    }

    input[type="radio"] {
        border-radius: 50%;

        &:checked {
            background-image: radial-gradient(circle, oklch(97% 0 0) 34%, transparent 34%);
        }
    }

    /* MEDIJI */
    img { border-radius: var(--radius-sm); }

    /* TABELE */
    table {
        inline-size: 100%;
        max-inline-size: 100%;
        border-collapse: collapse;

        th, td {
            padding-block: var(--space-1);
            padding-inline: var(--space-2);
            border: 1px solid var(--color-text-muted);
            text-align: left;
        }

        th { font-weight: 600; }

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

        tbody tr {
            transition: background-color var(--transition-fast);
            &:hover { background-color: color-mix(in oklch, var(--color-primary) 20%, var(--color-bg)); }
        }
    }

    /* IKONE */
    i.icon { font-size: var(--font-5); }

    /* OZADJE */
    .main-back { background-color: var(--color-bg); }
    .sec-back { background-color: var(--color-bg-secondary); }

    /* PISKOTKI */
    #cookie {
        padding: var(--space-4);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-xl);
        background: var(--color-bg-secondary);
        font-size: var(--font-2);
        gap: var(--space-4);
    }
}

/* UTILITIES */
@layer utilities {

    /* Hero: točno do spodnjega roba zaslona (pod headerjem) */
    .vh { min-block-size: calc(100svh - var(--header-h, 0px)); }

    /* Zelo veliki namizni računalniki (1568px+) */
    @media (min-width: 1568px) {
        html { font-size: 20px; }
    }
}