/* ============================================================
   PROTIS 3D — variantas „CLAY"  (html[data-skin="clay"])
   ------------------------------------------------------------
   Sąmoninga PRIEŠINGYBĖ „Studio" variantui kiekvienoje ašyje:

        Studio                  Clay
        šaltas grafitas         šiltas molis
        aštrūs kampai           labai apvalūs
        rėmeliai skiria         šešėliai skiria (rėmelių beveik nėra)
        tankus, techninis       erdvus, ramus
        aiškūs, kieti šešėliai  minkšti, šilti, difuziniai

   ⛔ `--scene-bg` / `--scene-fog` / `--scene-grid-main` / `--scene-grid-sub`
   ČIA NELIEČIAMI. Juos valdo css/theme.css (šviesi tema ir
   `body.theme-dark`) — lygiai kaip prieš dizaino sluoksnį, kad
   Nustatymų tema toliau keistų 3D vaizdą.

   Krauna PASKUTINIS iš odų — ten, kur specifiškumas vienodas, laimi šis.
   ============================================================ */

/* ---------------------------------------------------------------
   ŽETONAI
   --------------------------------------------------------------- */
html[data-skin="clay"] body {
    /* Antrinė — šalavijas. Mėlyna šiltoje paletėje atrodytų svetima. */
    --secondary:      #4E7C6B;
    --secondary-dark: #3C6154;
    --tertiary:       #8A6BA8;

    /* ---- Paviršiai — nuo smėlio iki grietinės.
       Skirtumai TYČIA maži: Clay skiria ne kontrastu, o šešėliu. */
    --bg-dark:        #EFE7DB;   /* už visko */
    --bg-panel:       #FAF5EE;   /* juostos, skydeliai */
    --bg-card:        #FFFDF9;   /* kortelės — iškiliausios */
    --bg-hover:       #F2EADF;
    --bg-input:       #EBE1D3;   /* laukai — ĮDUBĘ, tamsesni už paviršių */
    --bg-glass:       rgba(250, 245, 238, 0.82);
    --bg:             #FAF5EE;
    --input-bg:       #EBE1D3;

    /* ---- Tekstas — šiltai rudas, ne juodas. Grynas juodas ant smėlio
       atrodo kaip skylė. */
    --text:           #3B322A;
    --text-dim:       #7C7065;
    --text-soft:      #A99C8C;
    --text-bright:    #241D17;

    /* ---- Linijos — beveik nematomos. Clay skiria šešėliu. */
    --border:         #E7DCCB;
    --border-light:   #DED0BB;
    --border-strong:  #CDBBA1;

    --accent-green:   #4E8C5F;
    --accent-red:     #C4553F;
    --accent-yellow:  #D69A2E;
    --accent-orange:  #D2762F;
    --accent-cyan:    #3F8B8B;

    /* ---- Apvalinimas — Clay charakterio pagrindas.
       Studio turi 4–20 px; čia dvigubai daugiau, o mygtukai — piliulės. */
    --r-xs:           9px;
    --r-sm:           13px;
    --r-base:         19px;
    --r-lg:           26px;
    --r-xl:           34px;
    --radius:         var(--r-base);

    /* ---- Šešėliai — ŠILTI ir difuziniai, ne juodi.
       Juodas šešėlis ant smėlio atrodo purvinas. */
    --shadow-xs:      0 1px 2px rgba(120, 84, 52, 0.07);
    --shadow-sm:      0 3px 8px rgba(120, 84, 52, 0.09);
    --shadow-md:      0 8px 20px rgba(120, 84, 52, 0.11), 0 2px 5px rgba(120, 84, 52, 0.06);
    --shadow-lg:      0 18px 44px rgba(120, 84, 52, 0.14), 0 5px 12px rgba(120, 84, 52, 0.07);
    --shadow-xl:      0 34px 76px rgba(120, 84, 52, 0.18), 0 10px 22px rgba(120, 84, 52, 0.08);
    --shadow-inner:   inset 0 2px 5px rgba(120, 84, 52, 0.10);
    --shadow-glow:    0 0 0 5px var(--primary-glow);

    /* ---- Šriftai — apvalūs. `ui-rounded` macOS'e duoda tikrą apvalų
       veidą be jokio atsiuntimo; kitur švelniai nusileidžia į Inter. */
    --font:           ui-rounded, 'SF Pro Rounded', 'Nunito', 'Inter', system-ui, sans-serif;
    --font-display:   ui-rounded, 'SF Pro Rounded', 'Nunito', 'Space Grotesk', sans-serif;

    /* ---- Judesys — lėtesnis ir minkštesnis nei Studio. */
    --t-fast:         160ms cubic-bezier(0.34, 1.4, 0.64, 1);
    --t-base:         260ms cubic-bezier(0.34, 1.4, 0.64, 1);
    --t-slow:         420ms cubic-bezier(0.22, 1, 0.36, 1);
    --ease-out:       cubic-bezier(0.22, 1, 0.36, 1);

    --fx-spring:      320ms cubic-bezier(0.34, 1.5, 0.64, 1);
    --fx-glide:       460ms cubic-bezier(0.22, 1, 0.36, 1);
    --fx-snap:        170ms cubic-bezier(0.34, 1.4, 0.64, 1);
    --fx-sheen:       rgba(255, 255, 255, 0.75);

    letter-spacing: 0.004em;
}

/* Akcentas — terakota, ne rėkianti oranžinė: šviesiame šiltame fone
   #FF6B35 atrodo kaip įspėjimas, o pritildyta ji tampa medžiaga.
   `:not([data-accent])` — kad Nustatymų akcento parinkiklis liktų
   stipresnis už odą (žr. paaiškinimą css/skin.css). */
html[data-skin="clay"] body:not([data-accent]) {
    --primary:        #C75B33;
    --primary-dark:   #A9451F;
    --primary-light:  #E28055;
    --primary-soft:   rgba(199, 91, 51, 0.10);
    --primary-glow:   rgba(199, 91, 51, 0.26);
}

/* ---------------------------------------------------------------
   PAMATAS — rėmelius keičia šešėliai
   --------------------------------------------------------------- */
html[data-skin="clay"] body { background: var(--bg-dark); }

/* Juostos ir skydeliai netenka rėmelių: Clay'uje kraštas yra šešėlis. */
html[data-skin="clay"] #toolbar,
html[data-skin="clay"] #sidebar,
html[data-skin="clay"] #properties,
html[data-skin="clay"] #statusbar,
html[data-skin="clay"] #tools-strip {
    border: none;
    background: var(--bg-panel);
    box-shadow: var(--shadow-sm);
}
html[data-skin="clay"] #toolbar    { box-shadow: 0 4px 18px rgba(120, 84, 52, 0.10); }
html[data-skin="clay"] #sidebar    { box-shadow: 6px 0 22px rgba(120, 84, 52, 0.07); }
html[data-skin="clay"] #properties { box-shadow: -6px 0 22px rgba(120, 84, 52, 0.07); }
html[data-skin="clay"] #statusbar  { box-shadow: 0 -3px 14px rgba(120, 84, 52, 0.06); }

/* Skirtukai, kurie Clay'uje tik triukšmauja. */
html[data-skin="clay"] #toolbar .separator,
html[data-skin="clay"] .status-sep { opacity: 0.35; }

/* ---------------------------------------------------------------
   MYGTUKAI — piliulės, be rėmelių, su prispaudimu
   --------------------------------------------------------------- */
html[data-skin="clay"] .tool-btn,
html[data-skin="clay"] .modal-btn,
html[data-skin="clay"] .np-btn,
html[data-skin="clay"] .mm-auth-btn,
html[data-skin="clay"] .settings-segmented button {
    border-radius: 999px;
    border-color: transparent;
    font-weight: 600;
}
html[data-skin="clay"] .toolbar-group {
    border: none;
    background: var(--bg-hover);
    border-radius: 999px;
    padding: 3px;
}
/* Studio mygtukas UŽVEDUS pakyla. Clay — švelniai IŠSIPUČIA:
   kitas judesys, ne kita spalva. */
html[data-skin="clay"] .tool-btn:hover {
    transform: scale(1.045);
    background: var(--bg-card);
    box-shadow: var(--shadow-sm);
}
html[data-skin="clay"] .tool-btn:active {
    transform: scale(0.955);
    box-shadow: var(--shadow-inner);
}
/* Blizgesio juostelė Clay'uje netinka — paviršius matinis. */
html[data-skin="clay"] .tool-btn::after { display: none; }

html[data-skin="clay"] .tool-btn.active {
    background: var(--primary-soft);
    color: var(--primary-dark);
    box-shadow: inset 0 0 0 2px var(--primary);
}
html[data-skin="clay"] .tool-btn.active::before { display: none; }

html[data-skin="clay"] .modal-btn-primary,
html[data-skin="clay"] .np-primary {
    background: var(--primary);
    color: #FFF8F4;
    box-shadow: 0 4px 14px -3px var(--primary-glow), inset 0 -2px 0 rgba(0,0,0,0.10);
}
html[data-skin="clay"] .modal-btn-primary:hover {
    background: var(--primary-dark);
    box-shadow: 0 8px 22px -4px var(--primary-glow), inset 0 -2px 0 rgba(0,0,0,0.10);
}

/* ---------------------------------------------------------------
   LAUKAI — įdubę, ne apvedžioti
   --------------------------------------------------------------- */
html[data-skin="clay"] input[type="text"],
html[data-skin="clay"] input[type="number"],
html[data-skin="clay"] input[type="search"],
html[data-skin="clay"] input[type="email"],
html[data-skin="clay"] input[type="password"],
html[data-skin="clay"] textarea,
html[data-skin="clay"] select {
    border: none;
    background: var(--bg-input);
    box-shadow: var(--shadow-inner);
    border-radius: var(--r-sm);
}
html[data-skin="clay"] input:focus,
html[data-skin="clay"] textarea:focus,
html[data-skin="clay"] select:focus {
    box-shadow: var(--shadow-inner), 0 0 0 4px var(--primary-soft);
}

/* ---------------------------------------------------------------
   LANGAI — minkšti luitai, be rėmelių ir be brėžinio kampų
   --------------------------------------------------------------- */
html[data-skin="clay"] .modal-dialog,
html[data-skin="clay"] .cp-card,
html[data-skin="clay"] .np-card,
html[data-skin="clay"] .settings-panel,
html[data-skin="clay"] .ctx-menu {
    border: none;
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-xl);
    /* Studio brėžinio kampai priklauso „studio" variantui, bet jei kada
       nutekėtų — čia jų tikrai nebus. */
    background-image: none;
}
html[data-skin="clay"] .modal-overlay {
    background: rgba(90, 70, 52, 0.30);
    backdrop-filter: blur(10px) saturate(112%);
    -webkit-backdrop-filter: blur(10px) saturate(112%);
}

/* Sąrašų eilutės — apvalios kortelės, be juostelės iš kairės. */
html[data-skin="clay"] .ctx-item,
html[data-skin="clay"] .cp-item,
html[data-skin="clay"] .component-item,
html[data-skin="clay"] .export-option {
    border-left: none;
    border-radius: var(--r-sm);
    margin-inline: 8px;
}
html[data-skin="clay"] .ctx-item:hover:not(.disabled),
html[data-skin="clay"] .cp-item:hover,
html[data-skin="clay"] .component-item:hover,
html[data-skin="clay"] .export-option:hover {
    background: var(--primary-soft);
    transform: none;            /* Clay eilutė nešliaužia į šoną */
    padding-left: inherit;
    box-shadow: none;
}
html[data-skin="clay"] .export-option:hover { transform: scale(1.012); }
html[data-skin="clay"] .export-option::before { display: none; }
html[data-skin="clay"] .cp-item.cp-active {
    background: var(--primary-soft);
    box-shadow: inset 0 0 0 2px var(--primary);
}

html[data-skin="clay"] .export-option-icon {
    background: var(--bg-input);
    border: none;
    box-shadow: var(--shadow-inner);
    border-radius: var(--r-sm);
}

/* ---------------------------------------------------------------
   PRADŽIOS EKRANAS — šviesus molis, ne tamsus korpusas
   --------------------------------------------------------------- */
html[data-skin="clay"] #main-menu {
    background:
        radial-gradient(120% 90% at 15% 0%,
            color-mix(in srgb, var(--primary) 13%, transparent), transparent 58%),
        radial-gradient(95% 85% at 88% 100%,
            color-mix(in srgb, var(--secondary) 12%, transparent), transparent 62%),
        linear-gradient(170deg, #FBF6EF 0%, var(--bg-dark) 62%, #E7DCCC 100%);
}
/* Brėžinio tinklelis Clay'uje netinka — paviršius popierinis, ne techninis. */
html[data-skin="clay"] #main-menu::before { opacity: 0.35; }

html[data-skin="clay"] .mm-hero-title       { color: var(--text-bright); }
html[data-skin="clay"] .mm-hero-title span  {
    background: linear-gradient(100deg in oklab, var(--primary) 0%, var(--primary) 46%,
                                var(--secondary) 62%, var(--secondary) 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
html[data-skin="clay"] .mm-hero-sub  { color: var(--text-dim); }
html[data-skin="clay"] .mm-brand     { color: var(--text-bright); }

/* Šviesiame fone permatomi BALTI atspalviai dingsta — meniu elementai
   Clay'uje turi remtis žetonais, ne `rgba(255,255,255,…)`. */
html[data-skin="clay"] .mm-chip,
html[data-skin="clay"] .mm-sort,
html[data-skin="clay"] .mm-view-toggle,
html[data-skin="clay"] .mm-trash-toggle,
html[data-skin="clay"] .mm-user,
html[data-skin="clay"] .mm-logout-btn,
html[data-skin="clay"] .mm-auth-btn {
    background: var(--bg-card);
    border: none;
    color: var(--text);
    box-shadow: var(--shadow-sm);
}
html[data-skin="clay"] .mm-chip:hover,
html[data-skin="clay"] .mm-user:hover,
html[data-skin="clay"] .mm-auth-btn:not(:disabled):hover {
    background: var(--bg-panel);
    color: var(--text-bright);
    box-shadow: var(--shadow-md);
}
html[data-skin="clay"] .mm-section-title,
html[data-skin="clay"] .mm-count,
html[data-skin="clay"] .mm-footer,
html[data-skin="clay"] .mm-empty-text,
html[data-skin="clay"] .mm-locked-text,
html[data-skin="clay"] .mm-user-email,
html[data-skin="clay"] .mm-resume-meta,
html[data-skin="clay"] .mm-search-clear { color: var(--text-dim); }
html[data-skin="clay"] .mm-empty-title,
html[data-skin="clay"] .mm-locked-title,
html[data-skin="clay"] .mm-user-name { color: var(--text-bright); }
html[data-skin="clay"] .mm-locked,
html[data-skin="clay"] .mm-empty {
    background: var(--bg-card);
    border: none;
    box-shadow: var(--shadow-md);
    border-radius: var(--r-lg);
}
html[data-skin="clay"] .mm-pcard {
    border: none;
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-md);
}
html[data-skin="clay"] .mm-pcard:hover {
    transform: translateY(-4px) scale(1.015);
    box-shadow: var(--shadow-xl);
}

/* ---------------------------------------------------------------
   KROVIMO EKRANAS — šviesus, ramus, be tinklelio
   --------------------------------------------------------------- */
html[data-skin="clay"] #loading-screen {
    background: radial-gradient(110% 85% at 50% 30%, #FBF6EF 0%, var(--bg-dark) 60%, #E4D8C6 100%);
}
html[data-skin="clay"] #loading-screen::before { display: none; }
html[data-skin="clay"] #loading-screen .ls-spinner {
    border-color: rgba(120, 84, 52, 0.14);
    border-top-color: var(--primary);
    border-right-color: color-mix(in srgb, var(--primary) 40%, transparent);
    box-shadow: 0 6px 20px -6px var(--primary-glow);
}
html[data-skin="clay"] #loading-screen .ls-spinner::before {
    border-bottom-color: rgba(120, 84, 52, 0.30);
}
html[data-skin="clay"] #loading-screen .ls-text {
    background: none;
    -webkit-text-fill-color: currentColor;
    color: var(--text-dim);
    animation: none;
    letter-spacing: 0.14em;
}

/* ---------------------------------------------------------------
   PRANEŠIMAI — apvalūs, be juostelės iš kairės
   --------------------------------------------------------------- */
html[data-skin="clay"] .toast {
    border: none;
    border-left: none;
    border-radius: 999px;
    padding: 12px 20px;
    background: var(--bg-card);
    box-shadow: var(--shadow-lg);
}
html[data-skin="clay"] .toast-success { box-shadow: var(--shadow-lg), inset 0 0 0 2px var(--accent-green); }
html[data-skin="clay"] .toast-error   { box-shadow: var(--shadow-lg), inset 0 0 0 2px var(--accent-red); }

/* ---------------------------------------------------------------
   SLINKTIS IR FOKUSAS
   --------------------------------------------------------------- */
html[data-skin="clay"] *::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    background-clip: content-box;
}
html[data-skin="clay"] :focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 3px;
}

/* ---------------------------------------------------------------
   MATMENYS — Clay kvėpuoja plačiau
   ---------------------------------------------------------------
   Variantas keičia ne tik išvaizdą, bet ir tankumą. Studio yra
   techniškai tankus; Clay charakteris — ramus ir erdvus, tad juostos
   aukštesnės, skydeliai platesni.

   ⚠️ DVI SKIRTINGOS VIETOS, IR JAS SUMAIŠYTI NEGALIMA:

   `js/panel-resize.js` vartotojo ištemptą plotį rašo INLINE ant
   `document.documentElement` (21 ir 65 eil.) ir skaito jį per
   `getComputedStyle(document.documentElement)` (80 eil.).

   Todėl skydelių pločiai turi būti ant `html[...]` — TO PATIES elemento.
   Tada vartotojo inline reikšmė nugali mūsiškę, kaip ir turi būti.
   Uždėjus juos ant `body`, vidiniai elementai paveldėtų iš `body`
   (artimesnio protėvio), vartotojo inline reikšmė ant `html` liktų
   nepastebėta, ir tempimas TYLIAI nustotų veikęs.

   Juostų aukščiams to nėra — jų niekas inline nerašo, tad jie gali
   gyventi kartu su kitais žetonais ant `body`. */
html[data-skin="clay"] {
    --sidebar-w:      302px;
    --properties-w:   318px;
}
html[data-skin="clay"] body {
    --toolbar-h:      60px;
    --statusbar-h:    32px;
}


/* ===============================================================
   CLAY NAKTIS — `body.theme-dark`
   ---------------------------------------------------------------
   Nustatymuose „Tema: tamsi" veikė ir prieš dizaino sluoksnį, tad
   turi veikti ir dabar. Be šito bloko Clay žetonai (0-1-2) nurungtų
   css/theme.css tamsią temą (0-1-1) ir perjungiklis paviršiams
   nieko nebedarytų.

   Tai NE kitas variantas — tas pats Molis, tik naktį: tos pačios
   piliulės, tie patys apvalinimai ir minkšti šešėliai, tik paviršiai
   iš degintos, ne šviesios keramikos.

   Specifiškumas: `html[data-skin="clay"] body.theme-dark` = (0-2-2),
   didesnis už dieninį `html[data-skin="clay"] body` = (0-1-2).
   =============================================================== */
/* Akcentas tamsoje gali būti šviesesnis — terakota nedega.
   Vėl `:not([data-accent])`: pasirinkta spalva turi nugalėti odą. */
html[data-skin="clay"] body.theme-dark:not([data-accent]) {
    --primary:        #E8794B;
    --primary-dark:   #C75B33;
    --primary-light:  #F79A73;
    --primary-soft:   rgba(232, 121, 75, 0.16);
    --primary-glow:   rgba(232, 121, 75, 0.38);
}

html[data-skin="clay"] body.theme-dark {
    --secondary:      #74A794;
    --secondary-dark: #5C8A78;
    --tertiary:       #B197CC;

    /* Paviršiai — degta keramika, ne pilka. */
    --bg-dark:        #17120E;
    --bg-panel:       #1F1914;
    --bg-card:        #2A221B;
    --bg-hover:       #352B22;
    --bg-input:       #140F0B;
    --bg-glass:       rgba(31, 25, 20, 0.80);
    --bg:             #1F1914;
    --input-bg:       #140F0B;

    --text:           #EFE5D9;
    --text-dim:       #B2A190;
    --text-soft:      #877565;
    --text-bright:    #FFF8F0;

    --border:         #352B22;
    --border-light:   #45382C;
    --border-strong:  #59493A;

    --accent-green:   #5FBE79;
    --accent-red:     #E8705A;
    --accent-yellow:  #E7B45A;
    --accent-orange:  #E89457;
    --accent-cyan:    #5FB5B5;

    /* Šešėliai lieka minkšti (Clay charakteris), tik gilesni. */
    --shadow-xs:      0 1px 3px rgba(8, 5, 3, 0.45);
    --shadow-sm:      0 3px 10px rgba(8, 5, 3, 0.50);
    --shadow-md:      0 8px 22px rgba(8, 5, 3, 0.55), 0 2px 6px rgba(8, 5, 3, 0.40);
    --shadow-lg:      0 18px 46px rgba(8, 5, 3, 0.62), 0 5px 14px rgba(8, 5, 3, 0.45);
    --shadow-xl:      0 34px 78px rgba(8, 5, 3, 0.70), 0 10px 24px rgba(8, 5, 3, 0.50);
    --shadow-inner:   inset 0 2px 6px rgba(0, 0, 0, 0.55);

    --fx-sheen:       rgba(255, 236, 220, 0.07);
}

/* Šešėliai, kurie dieniniame Molyje įrašyti šiltai rusva spalva —
   tamsoje jie tiesiog nematomi, tad juos perrašom juodesniais. */
html[data-skin="clay"] body.theme-dark #toolbar    { box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45); }
html[data-skin="clay"] body.theme-dark #sidebar    { box-shadow: 6px 0 22px rgba(0, 0, 0, 0.35); }
html[data-skin="clay"] body.theme-dark #properties { box-shadow: -6px 0 22px rgba(0, 0, 0, 0.35); }
html[data-skin="clay"] body.theme-dark #statusbar  { box-shadow: 0 -3px 14px rgba(0, 0, 0, 0.35); }

html[data-skin="clay"] body.theme-dark .modal-overlay {
    background: rgba(8, 5, 3, 0.58);
}

html[data-skin="clay"] body.theme-dark #main-menu {
    background:
        radial-gradient(120% 90% at 15% 0%,
            color-mix(in srgb, var(--primary) 16%, transparent), transparent 58%),
        radial-gradient(95% 85% at 88% 100%,
            color-mix(in srgb, var(--secondary) 14%, transparent), transparent 62%),
        linear-gradient(170deg, #241C15 0%, var(--bg-dark) 62%, #120E0A 100%);
}

html[data-skin="clay"] body.theme-dark #loading-screen {
    background: radial-gradient(110% 85% at 50% 30%, #241C15 0%, var(--bg-dark) 60%, #100C08 100%);
}
html[data-skin="clay"] body.theme-dark #loading-screen .ls-spinner {
    border-color: rgba(255, 236, 220, 0.10);
    border-top-color: var(--primary);
}
html[data-skin="clay"] body.theme-dark #loading-screen .ls-spinner::before {
    border-bottom-color: rgba(255, 236, 220, 0.22);
}