/* --- Material You (M3) – lightweight theme for File Browser or any app --- */
/* Tweak only the variables; everything else adapts.                         */
/* Palette: expressive violet by default.                                     */

/* Fonts & Icons */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300..900&family=Readex+Pro:wght@400..700&family=Roboto+Flex:opsz,wdth,wght,GRAD,slnt,XTRA,YTAS,YTUC,YTDE,YTLC@8..144,75..125,300..900,0..150,-10..0,380..600,700..1000,-305..-98,440..790,416..570&family=Material+Symbols+Rounded:FILL,wght,GRAD,opsz@0..1,300..700,-50..200,20..48&display=swap');

:root{
  /* === Your only input (seed) === */
  --seed: #4682b4; /* Roze: #f7adfc */
  
  --dark-blue: var(--seed);
  --icon-blue: var(--seed);
  --blue: var(--seed);

  /* Typefaces */
  --font-display: "Outfit", "Roboto Flex", system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans";
  --font-body: "Roboto Flex", system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans";
  --font-numeric: "Readex Pro", "Roboto Flex", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Motion */
  --easing-emph: cubic-bezier(.2,.0,0,1);

  /* Shape scale (expressive) */
  --radius-xs: 12px;
  --radius-sm: 16px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-xl: 36px;
  --radius-pill: 999px;

  /* State layers */
  --hover-opacity: .08;
  --focus-opacity: .12;
  --press-opacity: .12;

  /* Elevation */
  --elev-1: 0 2px 8px rgba(0,0,0,.24);
  --elev-2: 0 8px 20px rgba(0,0,0,.28);
  --elev-3: 0 16px 32px rgba(0,0,0,.32);
}

/* ---------- Palette from ONE seed (dark default) ---------- */
:root{
  /* surfaces: dark, tinted by seed */
  --surface: color-mix(in oklab, black 88%, var(--seed) 12%);
  --on-surface: color-mix(in oklab, white 92%, var(--seed) 8%);
  --surface-variant: color-mix(in oklab, var(--surface), var(--on-surface) 10%);
  --on-surface-variant: color-mix(in oklab, var(--on-surface), var(--surface) 35%);

  /* primary & friends */
  --primary: color-mix(in oklab, var(--seed), white 18%);
  --on-primary: #0f0e14;
  --primary-container: color-mix(in oklab, var(--surface), var(--primary) 28%);
  --on-primary-container: color-mix(in oklab, var(--on-surface), var(--primary) 24%);

  /* derived accents */
  --secondary: color-mix(in oklab, var(--primary), white 35%);
  --on-secondary: #101014;
  --secondary-container: color-mix(in oklab, var(--surface), var(--secondary) 26%);
  --on-secondary-container: color-mix(in oklab, var(--on-surface), var(--secondary) 22%);

  --tertiary: color-mix(in oklab, var(--primary), black 12%);
  --on-tertiary: #101014;
  --tertiary-container: color-mix(in oklab, var(--surface), var(--tertiary) 26%);
  --on-tertiary-container: color-mix(in oklab, var(--on-surface), var(--tertiary) 22%);

  /* feedback & outlines */
  --error: color-mix(in oklab, #ff4545, white 6%);
  --on-error: #140b0b;
  --outline: color-mix(in oklab, var(--on-surface), var(--surface) 60%);

  /* container tiering */
  --surface-container-lowest: color-mix(in oklab, var(--surface), black 4%);
  --surface-container-low: color-mix(in oklab, var(--surface), white 2%);
  --surface-container: color-mix(in oklab, var(--surface), white 6%);
  --surface-container-high: color-mix(in oklab, var(--surface), white 9%);
  --surface-container-highest: color-mix(in oklab, var(--surface), white 12%);

  --focus-ring: color-mix(in oklab, var(--primary), white 16%);
}

/* Light scheme (auto) — same seed */
@media (prefers-color-scheme: light){
  :root{
    --surface: color-mix(in oklab, white 92%, var(--seed) 8%);
    --on-surface: color-mix(in oklab, black 88%, var(--seed) 12%);
    --surface-variant: color-mix(in oklab, var(--surface), var(--on-surface) 9%);
    --on-surface-variant: color-mix(in oklab, var(--on-surface), var(--surface) 35%);

    --primary: color-mix(in oklab, var(--seed), black 6%);
    --on-primary: white;
    --primary-container: color-mix(in oklab, var(--surface), var(--primary) 22%);
    --on-primary-container: color-mix(in oklab, var(--on-surface), var(--primary) 35%);

    --secondary: color-mix(in oklab, var(--primary), black 6%);
    --on-secondary: white;
    --secondary-container: color-mix(in oklab, var(--surface), var(--secondary) 16%);
    --on-secondary-container: color-mix(in oklab, var(--on-surface), var(--secondary) 35%);

    --tertiary: color-mix(in oklab, var(--primary), black 10%);
    --on-tertiary: white;
    --tertiary-container: color-mix(in oklab, var(--surface), var(--tertiary) 16%);
    --on-tertiary-container: color-mix(in oklab, var(--on-surface), var(--tertiary) 35%);

    --error: #b3261e;
    --on-error: white;

    --surface-container-lowest: color-mix(in oklab, var(--surface), white 2%);
    --surface-container-low: color-mix(in oklab, var(--surface), black 2%);
    --surface-container: color-mix(in oklab, var(--surface), black 4%);
    --surface-container-high: color-mix(in oklab, var(--surface), black 6%);
    --surface-container-highest: color-mix(in oklab, var(--surface), black 8%);

    --focus-ring: color-mix(in oklab, var(--primary), black 10%);
  }
}

body {
    font-family: var(--font-body);
    line-height: 1.35;
    letter-spacing: .2px;
    margin: clamp(1rem, 3vw, 3rem);
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
    background: var(--on-tertiary);
}




header {
    background: radial-gradient(160% 140% at 0% 0%, color-mix(in oklab, var(--primary) 14%, transparent) 0%, transparent 60%), var(--surface-container-low);
    border-bottom: 0;
    margin: 1em;
    width: calc(100% - 2em);
    border-radius: 20em;
}

nav {
    margin: clamp(1rem, 3vw, 3rem);
    background: var(--surface-container-highest);
    color: var(--on-primary-container);
    border-radius: 2em;
}
nav .action {
    border-radius: 20em;
}
nav>div {
    border-top: 0.1em solid var(--surface)!important;
}



.dashboard #nav .wrapper {
    border-bottom: none!important;
    background: var(--surface-container-highest);
    color: var(--on-primary-container);
    border-radius: 2em;
}
.dashboard #nav ul li.active {
    border: 0!important;
}






#listing .item {
    border-radius: 1em!important;
    background: var(--primary-container);
    box-shadow: none!important;
    color: var(--action);
    transition: .3s;
    border: 0;
}
#listing .item[aria-selected=true] {
    border-radius: 0.5em!important;
    background: var(--primary)!important;
    color: var(--surface-container-highest)!important;
    transform: scale(1.05);
    transition: .3s;
}
#listing .item:hover {
    border-radius: 0.5em!important;
    transition: .3s;
}
.file-icons [aria-selected=true] i {
    color: var(--surface-container-highest)!important;
}

#search #input {
    border-radius: 10em!important;
}

.breadcrumbs {
    border-radius: 20em;
    border: 0;
    margin-top: 1em;
    margin-bottom: 1em;
    padding: 1em;
    background: var(--surface-container-highest);
    color: var(--on-primary-container);
}

#search #input input:focus {
    border-radius: 10em!important;
    padding: 1.2em;
}

.credits {
  display: none;  
}

input {
    padding: 0em 1em !important;
    border-radius: 2em !important;
    line-height: 3;
}
select {
    border-radius: 2em!important;
}



.button--block {
    background: var(--primary-container);
    box-shadow: none!important;
    color: var(--action);
    border-radius: 2em;
}
.button--block:hover {
    background: var(--primary)!important;
    color: var(--surface-container-highest)!important;
}
.card#download {
    max-width: unset!important;
    width: 25%;
}



.button {
    border-radius: 2em!important;
}
.card {
    border-radius: 2em;
    background: var(--on-primary);
}
.card .card-action.full .action {
    border-radius: 20px;
}

.button--flat:hover {
    border-radius: 2em;
    background: var(--surfacePrimary);
}




.vue-number-input__input {
    padding: .4375rem .875rem!important;
}
.vue-number-input__button--minus[data-v-188efc8c], .vue-number-input__button--plus[data-v-188efc8c] {
    border-radius: 100px;
}

.dashboard #nav ul li.active:before, .dashboard #nav ul li:hover {
    border-radius: 2em;
}