/* ==========================================================
   Lýsis Gallery Theme — theme.css (FULL)
   A premium “digital gallery” UI for your 3D model portal.
   No inline styling required; everything lives here.
   ========================================================== */

/* -----------------------------
   Reset & base
------------------------------ */
*{ box-sizing:border-box; }
html, body{ height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Inter, Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a{ color:inherit; text-decoration:none; }
button, input, textarea, select{ font: inherit; }
img{ max-width:100%; display:block; }
:focus-visible{ outline: none; }

/* -----------------------------
   Theme tokens
------------------------------ */
:root{
  /* Layout */
  --maxw: 1720px;
  --gap: 18px;
  --sidebar: 452px;
  --topbar-h: 64px;

  /* Radii */
  --r-xl: 26px;
  --r-lg: 20px;
  --r-md: 16px;
  --r-sm: 12px;

  /* Typography */
  --text-strong: 0.94;
  --text-muted: 0.68;

  /* Motion */
  --ease: cubic-bezier(.2,.8,.2,1);
  --fast: 140ms;
  --med: 260ms;

  /* Viewer size */
  --viewer-h: 74vh;

  /* Default theme = Aurora */
  --bg0: #060713;
  --bg1: #0b1022;
  --card: rgba(255,255,255,.075);
  --card2: rgba(255,255,255,.050);
  --stroke: rgba(255,255,255,.12);
  --stroke2: rgba(255,255,255,.18);

  --text: rgba(255,255,255,var(--text-strong));
  --muted: rgba(255,255,255,var(--text-muted));
  --muted2: rgba(255,255,255,.52);

  --a1: #8b5cf6;   /* violet */
  --a2: #22d3ee;   /* cyan */
  --a3: #34d399;   /* mint */
  --danger: #ff4d6d;

  --shadow-lg: 0 28px 90px rgba(0,0,0,.52);
  --shadow-md: 0 14px 50px rgba(0,0,0,.32);

  /* Viewer background */
  --viewer-bg:
    radial-gradient(900px 600px at 60% 12%, rgba(139,92,246,.26), transparent 60%),
    radial-gradient(900px 700px at 18% 35%, rgba(34,211,238,.18), transparent 62%),
    radial-gradient(900px 700px at 70% 120%, rgba(52,211,153,.12), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.00));
}

/* -----------------------------
   Additional themes (JS will set data-theme)
------------------------------ */
:root[data-theme="graphite"]{
  --bg0:#07080b;
  --bg1:#0d1117;
  --card: rgba(255,255,255,.06);
  --card2: rgba(255,255,255,.04);
  --stroke: rgba(255,255,255,.11);
  --stroke2: rgba(255,255,255,.16);
  --a1:#a78bfa;
  --a2:#60a5fa;
  --a3:#22c55e;
  --viewer-bg: linear-gradient(180deg, rgba(255,255,255,.015), rgba(255,255,255,0));
}

:root[data-theme="paper"]{
  --bg0:#f5f6fb;
  --bg1:#eef1f8;
  --card: rgba(255,255,255,.78);
  --card2: rgba(255,255,255,.62);
  --stroke: rgba(25,35,60,.14);
  --stroke2: rgba(25,35,60,.22);
  --text: rgba(10,14,25,.92);
  --muted: rgba(10,14,25,.62);
  --muted2: rgba(10,14,25,.50);
  --a1:#6d28d9;
  --a2:#0ea5e9;
  --a3:#16a34a;
  --shadow-lg: 0 28px 90px rgba(25,35,60,.18);
  --shadow-md: 0 14px 50px rgba(25,35,60,.12);
  --viewer-bg: linear-gradient(180deg, rgba(10,14,25,.04), rgba(10,14,25,0));
}

:root[data-theme="neon"]{
  --bg0:#04020a;
  --bg1:#0a0430;
  --card: rgba(255,255,255,.07);
  --card2: rgba(255,255,255,.045);
  --stroke: rgba(255,255,255,.14);
  --stroke2: rgba(255,255,255,.22);
  --a1:#ff3dff;
  --a2:#00e5ff;
  --a3:#00ffa3;
  --viewer-bg:
    radial-gradient(900px 600px at 65% 10%, rgba(255,61,255,.20), transparent 60%),
    radial-gradient(900px 700px at 20% 35%, rgba(0,229,255,.18), transparent 62%),
    radial-gradient(900px 700px at 70% 120%, rgba(0,255,163,.12), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior:auto !important; transition:none !important; animation:none !important; }
}

/* -----------------------------
   Background (aurora + subtle noise)
------------------------------ */
body{
  color: var(--text);
  background:
    radial-gradient(900px 700px at 70% -12%, color-mix(in srgb, var(--a2) 22%, transparent), transparent 60%),
    radial-gradient(900px 700px at 10% 0%,  color-mix(in srgb, var(--a1) 22%, transparent), transparent 60%),
    radial-gradient(1000px 800px at 40% 120%, color-mix(in srgb, var(--a3) 12%, transparent), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.10'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity:.22;
}

/* -----------------------------
   Topbar
------------------------------ */
.topbar{
  position: sticky;
  top:0;
  z-index: 40;
  height: var(--topbar-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 0 18px;
  background: color-mix(in srgb, var(--bg0) 72%, transparent);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--stroke);
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  font-weight: 900;
  letter-spacing: .2px;
}
.brand > span:first-child{
  font-size: 16px;
}
.badge{
  font-size: 12px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  color: var(--muted);
  background: color-mix(in srgb, var(--card) 70%, transparent);
}

/* Our injected theme UI container */
#themeDock{
  display:flex;
  align-items:center;
  gap:10px;
}

/* -----------------------------
   Main layout
------------------------------ */
.main{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 18px;
  display:grid;
  grid-template-columns: var(--sidebar) 1fr;
  gap: var(--gap);
}

/* Sticky left column */
.main > div:first-child{
  position: sticky;
  top: calc(var(--topbar-h) + 14px);
  align-self: start;
  height: calc(100vh - (var(--topbar-h) + 28px));
  overflow: hidden;
}

/* -----------------------------
   Cards
------------------------------ */
.card{
  border-radius: var(--r-xl);
  border: 1px solid var(--stroke);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--card) 92%, transparent), color-mix(in srgb, var(--card2) 92%, transparent));
  box-shadow: var(--shadow-md);
  overflow:hidden;
  transform: translateZ(0);
}

.cardHeader{
  padding: 14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--stroke) 70%, transparent);
  background: color-mix(in srgb, var(--card2) 75%, transparent);
}
.cardHeader > div:first-child{ min-width:0; }

.cardBody{ padding: 16px; }

.sub{
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}
.meta{
  color: var(--muted2);
  font-size: 12px;
}

/* Give important text a “gallery” vibe */
#modelTitle{
  font-weight: 950;
  letter-spacing: .2px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#modelPath{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* -----------------------------
   Buttons + inputs
------------------------------ */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: color-mix(in srgb, var(--card2) 85%, transparent);
  color: var(--text);
  cursor:pointer;
  transition: transform var(--fast) var(--ease), background var(--fast) var(--ease), border-color var(--fast) var(--ease);
  user-select:none;
}

.btn:hover{
  background: color-mix(in srgb, var(--card) 88%, transparent);
  border-color: var(--stroke2);
}
.btn:active{
  transform: translateY(1px);
}

.btn.primary{
  border-color: color-mix(in srgb, var(--a2) 40%, var(--stroke));
  background:
    radial-gradient(120% 140% at 20% 0%, color-mix(in srgb, var(--a2) 24%, transparent), transparent 60%),
    radial-gradient(120% 140% at 80% 10%, color-mix(in srgb, var(--a1) 18%, transparent), transparent 60%),
    color-mix(in srgb, var(--card2) 90%, transparent);
}

.btn.ghost{
  background: transparent;
  border-color: color-mix(in srgb, var(--stroke) 65%, transparent);
}

input[type="text"],
input[type="password"],
textarea,
select{
  width:100%;
  border-radius: 16px;
  border: 1px solid var(--stroke);
  background: color-mix(in srgb, var(--bg0) 25%, transparent);
  color: var(--text);
  padding: 11px 12px;
  outline:none;
  transition: box-shadow var(--fast) var(--ease), border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}

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

input[type="text"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus{
  border-color: color-mix(in srgb, var(--a2) 55%, var(--stroke));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--a2) 18%, transparent);
  background: color-mix(in srgb, var(--bg0) 16%, transparent);
}

input[type="color"]{
  width:100%;
  height: 44px;
  border-radius: 16px;
  border: 1px solid var(--stroke);
  background: color-mix(in srgb, var(--bg0) 20%, transparent);
  padding: 6px;
}

/* -----------------------------
   Left: Upload + Tree
------------------------------ */
#uploadCard{ margin-bottom: var(--gap); }

/* Upload row inside minimal index has inline flex; we style children nicely */
#uploadCard input[type="text"]{ min-width: 160px; }
#uploadCard input[type="file"]{
  width:auto;
  max-width: 240px;
  padding: 10px 10px;
  border-radius: 16px;
  border: 1px dashed color-mix(in srgb, var(--stroke) 75%, transparent);
  background: color-mix(in srgb, var(--card2) 65%, transparent);
}

/* Search row */
.searchRow{
  padding: 10px 12px;
  display:flex;
  gap: 10px;
}

/* Tree scrolling inside sidebar */
#sidebar{
  height: calc(100% - 0px);
  overflow:hidden;
}
#tree{
  max-height: calc(100vh - (var(--topbar-h) + 360px));
  overflow-y: auto;
  padding: 8px 0 14px 0;
  overscroll-behavior: contain;
}

/* Folder/file rows */
.dirRow, .fileRow{
  margin: 6px 10px;
  padding: 10px 10px;
  border-radius: var(--r-lg);
  display:flex;
  gap: 10px;
  cursor:pointer;
  transition: background var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.dirRow:hover, .fileRow:hover{
  background: color-mix(in srgb, var(--card) 65%, transparent);
}
.dirRow:active, .fileRow:active{
  transform: translateY(1px);
}

.caret{
  width: 18px;
  flex: 0 0 18px;
  color: var(--muted2);
  text-align:center;
  margin-top: 2px;
}

.label{
  flex:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Thumbnail block in tree */
.fileRow{ align-items:flex-start; }
.fileRow .icon{
  width: 150px;
  height: 150px;
  flex: 0 0 150px;
  border-radius: 20px;
  overflow:hidden;
  border: 1px solid color-mix(in srgb, var(--stroke) 90%, transparent);
  background: color-mix(in srgb, var(--bg0) 22%, transparent);
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
}

/* Delete buttons become “danger pills” automatically */
.fileRow .btn, .dirRow .btn{
  padding: 7px 10px;
  font-size: 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--danger) 14%, transparent);
  border-color: color-mix(in srgb, var(--danger) 34%, var(--stroke));
}
.fileRow .btn:hover, .dirRow .btn:hover{
  background: color-mix(in srgb, var(--danger) 20%, transparent);
  border-color: color-mix(in srgb, var(--danger) 50%, var(--stroke2));
}

/* Children indentation */
.children{ padding-left: 14px; display:none; }
.children.open{ display:block; }

/* -----------------------------
   Right: Viewer (gallery hero)
------------------------------ */
#viewerBox{
  height: var(--viewer-h);
  border-radius: var(--r-xl);
  border: 1px solid var(--stroke);
  background: var(--viewer-bg);
  overflow:hidden;
  box-shadow: var(--shadow-lg);
}

model-viewer{
  width:100%;
  height:100%;
  display:block;
  background: transparent;
}

/* -----------------------------
   Effects
------------------------------ */
#effectsCard .fxGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
#effectsCard .fxItem label{
  display:block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 13px;
}
#effectsCard .fxRow{
  display:flex;
  gap: 12px;
  align-items:center;
}

/* -----------------------------
   Notes
------------------------------ */
#notesList{ margin-top: 12px; }

.noteLine{
  border-radius: var(--r-lg);
  border: 1px solid color-mix(in srgb, var(--stroke) 80%, transparent);
  background: color-mix(in srgb, var(--card2) 60%, transparent);
  padding: 12px 12px;
  margin-bottom: 10px;
}
.noteTs{
  font-size: 12px;
  color: var(--muted2);
  margin-bottom: 6px;
}

/* -----------------------------
   Auth overlay (cinematic)
------------------------------ */
#authOverlay{
  position: fixed;
  inset: 0;
  display:none;
  align-items:center;
  justify-content:center;
  padding: 18px;
  background:
    radial-gradient(1200px 800px at 50% 30%, rgba(0,0,0,.25), rgba(0,0,0,.66)),
    rgba(0,0,0,.55);
  backdrop-filter: blur(12px);
  z-index: 9999;
}

.authCard{
  width: min(620px, 100%);
  border-radius: 30px;
  border: 1px solid color-mix(in srgb, var(--stroke2) 90%, transparent);
  background:
    radial-gradient(110% 140% at 20% 0%, color-mix(in srgb, var(--a2) 18%, transparent), transparent 60%),
    radial-gradient(110% 140% at 80% 0%, color-mix(in srgb, var(--a1) 16%, transparent), transparent 60%),
    linear-gradient(180deg, color-mix(in srgb, var(--card) 92%, transparent), color-mix(in srgb, var(--card2) 92%, transparent));
  box-shadow: 0 40px 160px rgba(0,0,0,.65);
  overflow:hidden;
}

.authBody{ padding: 16px; }
.authActions{ margin-top: 10px; display:flex; gap: 10px; }
.authStatus{ margin-top: 10px; color: var(--muted); font-size: 13px; }

/* -----------------------------
   Scrollbars
------------------------------ */
#tree::-webkit-scrollbar{ width: 10px; }
#tree::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.14);
  border-radius: 999px;
}
#tree::-webkit-scrollbar-thumb:hover{
  background: rgba(255,255,255,.20);
}

/* -----------------------------
   Responsive
------------------------------ */
@media (max-width: 1040px){
  :root{ --sidebar: 392px; --viewer-h: 66vh; }
  .fileRow .icon{ width: 130px; height: 130px; flex: 0 0 130px; }
}

@media (max-width: 980px){
  .main{ grid-template-columns: 1fr; }
  .main > div:first-child{ position: static; height:auto; overflow:visible; }
  #tree{ max-height: none; overflow: visible; }
  #effectsCard .fxGrid{ grid-template-columns: 1fr; }
  :root{ --viewer-h: 58vh; }
}


/* ==================================================
   FIX: Dropdown menus (select / option)
   Chrome / Windows / dark themes issue
   ================================================== */

/* The select control itself */
select{
  color: var(--text);
  background: color-mix(in srgb, var(--bg0) 35%, transparent);
}

/* Dropdown list items */
select option,
select optgroup{
  background-color: var(--bg0);
  color: var(--text);
}

/* Hover / selected option (where browser allows it) */
select option:hover,
select option:checked{
  background-color: color-mix(in srgb, var(--a2) 22%, var(--bg0));
  color: var(--text);
}

/* Paper theme override */
:root[data-theme="paper"] select{
  background: #ffffff;
  color: rgba(10,14,25,.92);
}

:root[data-theme="paper"] select option,
:root[data-theme="paper"] select optgroup{
  background: #ffffff;
  color: rgba(10,14,25,.92);
}