/* ============================================================
   GTA V DLC Builder — styled to match BlancoKit (/discord):
   shadcn base-nova, warm-dark palette, Satoshi + JetBrains Mono.
   ============================================================ */

@font-face { font-family: "Satoshi"; src: url("/discord/fonts/Satoshi-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("/discord/fonts/Satoshi-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("/discord/fonts/Satoshi-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/discord/fonts/JetBrainsMono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --background: hsl(28 11% 6.5%);
  --foreground: hsl(40 18% 95%);
  --card: hsl(28 10% 8.5%);
  --card-foreground: hsl(40 18% 95%);
  --primary: hsl(40 18% 95%);
  --primary-foreground: hsl(30 10% 12%);
  --primary-hover: hsl(40 12% 88%);
  --secondary: hsl(28 7% 15.5%);
  --muted: hsl(28 7% 15%);
  --muted-foreground: hsl(34 8% 63%);
  --accent: hsl(28 7% 16.5%);
  --border: hsl(28 7% 16.5%);
  --input: hsl(28 7% 16.5%);
  --ring: hsl(24 92% 55%);
  --destructive: hsl(0 62% 46%);
  --spice: hsl(24 95% 56%);
  --spice-dim: hsl(24 70% 55% / 0.32);
  --sidebar: hsl(28 9% 7.5%);
  --sidebar-accent: hsl(28 7% 16.5%);
  --sidebar-accent-foreground: hsl(40 18% 95%);
  --ok: hsl(150 55% 55%);
  --radius: 0.5rem;
  --shadow-card: 0 1px 2px 0 hsl(30 10% 10% / 0.05);
  --shadow-card-hover: 0 4px 24px -6px hsl(0 0% 0% / 0.5);
  --font-sans: "Satoshi", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  margin: 0; min-height: 100vh;
  background:
    radial-gradient(ellipse 70% 45% at 50% -10%, hsl(24 60% 12% / 0.4), transparent 60%),
    var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: 15px; line-height: 1.55;
}
code, pre { font-family: var(--font-mono); }
a { color: inherit; }

/* ---- header (sticky, full-width) ---- */
.site-head {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  height: 3.5rem; padding: 0 clamp(1rem, 3vw, 1.5rem);
  border-bottom: 1px solid var(--border);
  background: hsl(28 11% 6.5% / 0.82); backdrop-filter: blur(10px);
}
.back { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--muted-foreground); text-decoration: none; font-size: 0.8125rem; font-weight: 500; }
.back:hover { color: var(--foreground); }
.brand { color: var(--muted-foreground); text-decoration: none; font-size: 0.8125rem; font-weight: 700; letter-spacing: -0.01em; }
.brand span { color: var(--spice); }
.brand:hover { color: var(--foreground); }

/* ---- app shell: sidebar + main ---- */
.shell { display: flex; align-items: stretch; min-height: calc(100vh - 3.5rem); }

.sidebar {
  position: sticky; top: 3.5rem; align-self: flex-start;
  width: 15rem; flex-shrink: 0; height: calc(100vh - 3.5rem); overflow-y: auto;
  display: flex; flex-direction: column;
  padding: 1.25rem 0.75rem; border-right: 1px solid var(--border); background: var(--sidebar);
}
.side-brand { display: flex; flex-direction: column; gap: 0.1rem; padding: 0 0.55rem 1rem; }
.side-title { font-size: 0.95rem; font-weight: 700; letter-spacing: -0.02em; color: var(--foreground); }
.side-sub { font-size: 0.72rem; color: var(--muted-foreground); }

/* flat, full-width nav rows (no nested label/group) — each fills the sidebar */
.side-nav { display: flex; flex-direction: column; gap: 0.15rem; }
.side-group {
  padding: 0.85rem 0.55rem 0.3rem; font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-foreground);
}
.nav-item {
  position: relative; display: flex; flex-direction: column; gap: 0.15rem;
  width: 100%; text-align: left; overflow: hidden;
  padding: 0.6rem 0.75rem 0.6rem 0.9rem;
  border: 1px solid transparent; border-radius: calc(var(--radius) - 1px);
  background: transparent; font: inherit; cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
}
.nav-item::before {
  content: ""; position: absolute; left: 0; top: 0.55rem; bottom: 0.55rem;
  width: 2.5px; border-radius: 0 2px 2px 0; background: transparent; transition: background-color 0.15s;
}
.nav-item-title { font-size: 0.875rem; font-weight: 500; color: var(--muted-foreground); transition: color 0.15s; }
.nav-item-desc { font-size: 0.72rem; line-height: 1.35; color: hsl(34 8% 63% / 0.72); }
.nav-item-desc code { background: transparent; padding: 0; color: inherit; font-size: 0.95em; }
.nav-item:hover { background: hsl(28 7% 16.5% / 0.4); }
.nav-item:hover .nav-item-title { color: var(--foreground); }
.nav-item.on { background: var(--sidebar-accent); border-color: hsl(28 8% 22% / 0.8); }
.nav-item.on::before { background: var(--spice); }
.nav-item.on .nav-item-title { color: var(--foreground); font-weight: 600; }

.side-foot { margin-top: auto; padding: 1rem 0.55rem 0; font-size: 0.72rem; line-height: 1.55; color: var(--muted-foreground); }
.side-foot a { color: var(--foreground); text-decoration: underline; text-underline-offset: 2px; }

.builder-main { flex: 1 1 0; min-width: 0; padding: 2rem clamp(1rem, 4vw, 2.5rem) 4rem; }
.builder-main > * { max-width: 52rem; margin-inline: auto; }

code { padding: 0.1em 0.35em; border-radius: 0.3rem; background: var(--muted); font-size: 0.85em; color: var(--foreground); }

/* ---- boot / loading ---- */
.boot { min-height: 40vh; display: grid; place-items: center; text-align: center; color: var(--muted-foreground); }
.boot p { margin: 0.25rem 0; }
.boot-sub { font-size: 0.85rem; max-width: 26rem; }
.spinner { width: 30px; height: 30px; border: 3px solid var(--muted); border-top-color: var(--spice); border-radius: 50%; margin: 0 auto 1rem; animation: bspin 0.8s linear infinite; }
@keyframes bspin { to { transform: rotate(360deg); } }
#blazor-error-ui { position: fixed; inset: auto 0 0 0; display: none; padding: 0.6rem 1rem; text-align: center; background: var(--spice); color: hsl(30 12% 10%); font-size: 0.875rem; }

/* ---- buttons (shadcn base-nova) ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem;
  height: 2.25rem; padding: 0 0.875rem;
  border: 1px solid transparent; border-radius: calc(var(--radius) - 2px);
  font: inherit; font-size: 0.875rem; font-weight: 500; white-space: nowrap; cursor: pointer;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.05s;
  outline: none;
}
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; pointer-events: none; }
.btn:focus-visible { border-color: var(--ring); box-shadow: 0 0 0 3px hsl(24 92% 55% / 0.4); }
.btn-primary { border-color: var(--primary); background: var(--primary); color: var(--primary-foreground); box-shadow: var(--shadow-card); }
.btn-primary:hover:not(:disabled) { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn-outline { border-color: var(--border); background: transparent; color: var(--foreground); }
.btn-outline:hover:not(:disabled) { background: var(--accent); }
.btn-ghost { color: var(--muted-foreground); background: transparent; }
.btn-ghost:hover:not(:disabled) { color: var(--foreground); background: var(--accent); }

/* ---- subtabs (toggle-group) ---- */
.subtabs { display: inline-flex; gap: 0.25rem; margin-bottom: 1.25rem; padding: 0.2rem; background: var(--background); border: 1px solid var(--border); border-radius: calc(var(--radius) - 1px); }
.subtabs button { height: 1.85rem; padding: 0 0.7rem; border: none; border-radius: calc(var(--radius) - 3px); background: transparent; color: var(--muted-foreground); font: inherit; font-size: 0.8rem; font-weight: 500; cursor: pointer; }
.subtabs button:hover { color: var(--foreground); }
.subtabs button.on { color: var(--foreground); background: var(--muted); }

/* ---- panel (card) ---- */
.builder-panel { padding: 1.5rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow-card); }
.builder-panel > h2 { margin: 0 0 0.35rem; font-size: 1.1rem; font-weight: 700; letter-spacing: -0.02em; color: var(--foreground); }
.panel-lead { color: var(--muted-foreground); font-size: 0.9rem; margin: 0 0 1.35rem; max-width: 44rem; }
.panel-lead strong { color: var(--foreground); font-weight: 600; }
.panel-lead em { font-style: normal; color: var(--foreground); }

/* ---- drop zone ---- */
.drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.25rem; position: relative; min-height: 7.5rem; border: 1.5px dashed var(--border); border-radius: var(--radius); padding: 1.5rem 1rem; text-align: center; cursor: pointer; margin-bottom: 1.15rem; background: hsl(28 8% 10% / 0.4); transition: border-color 0.15s, background-color 0.15s; }
.drop:hover, .drop.dragging { border-color: var(--spice); background: hsl(24 40% 11% / 0.4); }
.drop.sm { min-height: 5.25rem; }
.drop.ydrdrop { border-color: hsl(24 35% 24%); }
.drop input[type=file] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); }
.drop-title { color: var(--foreground); font-weight: 500; font-size: 0.9rem; }
.drop-sub { color: var(--muted-foreground); font-size: 0.8rem; }

/* ---- file list ---- */
.filelist { list-style: none; padding: 0; margin: 0 0 0.7rem; border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); overflow: hidden; }
.filelist li { display: flex; align-items: center; gap: 0.65rem; padding: 0.55rem 0.8rem; border-bottom: 1px solid var(--border); font-size: 0.875rem; }
.filelist li:nth-child(odd) { background: hsl(28 8% 10% / 0.4); }
.filelist li:last-child { border-bottom: 0; }
.fname { color: var(--foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fsize { color: var(--muted-foreground); font-size: 0.78rem; margin-left: auto; font-family: var(--font-mono); white-space: nowrap; }
.fx { background: none; border: none; color: var(--muted-foreground); cursor: pointer; font-size: 1.25rem; line-height: 1; padding: 0 0.2rem; }
.fx:hover { color: var(--destructive); }
.ext { flex-shrink: 0; min-width: 3.4em; text-align: center; font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.2em 0.45em; border-radius: 4px; background: var(--muted); color: var(--muted-foreground); font-weight: 700; }
.ext-ymap, .ext-ybn { background: hsl(210 45% 16%); color: hsl(210 85% 76%); }
.ext-ytyp { background: hsl(24 45% 17%); color: hsl(24 90% 68%); }
.ext-ydr, .ext-ydd, .ext-yft, .ext-ytd { background: hsl(150 35% 14%); color: hsl(150 55% 68%); }
.summary { color: var(--muted-foreground); font-size: 0.8rem; margin: 0 0 1.25rem; }

/* ---- fields / inputs ---- */
.field-row { display: flex; gap: 0.75rem; align-items: flex-end; flex-wrap: wrap; }
.field-row > .btn { flex-shrink: 0; }
.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field.grow { flex: 1; min-width: 12rem; }
.field.slim { max-width: 18rem; margin-bottom: 1.15rem; }
label, .field label, .cb { font-size: 0.82rem; color: var(--muted-foreground); font-weight: 500; }
.field-note { font-size: 0.8rem; color: var(--muted-foreground); }
.row-note { margin: 0.55rem 0 0; }
.field-note code, .summary code, .panel-lead code { background: var(--muted); }

input, select {
  width: 100%; height: 2.25rem;
  background: hsl(28 7% 16.5% / 0.3); color: var(--foreground);
  border: 1px solid var(--input); border-radius: calc(var(--radius) - 2px);
  padding: 0.375rem 0.75rem; font: inherit; font-size: 0.875rem;
  transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
}
input:hover, select:hover { background: hsl(28 7% 16.5% / 0.45); }
input::placeholder { color: var(--muted-foreground); }
input:focus, select:focus { outline: none; border-color: var(--ring); box-shadow: 0 0 0 3px hsl(24 92% 55% / 0.35); background: hsl(28 7% 16.5% / 0.45); }
input[type=number] { font-family: var(--font-mono); }
select {
  cursor: pointer; appearance: none; -webkit-appearance: none; padding-right: 2rem;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a1968a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat; background-position: right 0.7rem center;
}

.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.95rem 1rem; margin: 0 0 1.25rem; }
.grid .cb { grid-column: 1 / -1; display: flex; align-items: center; gap: 0.55rem; }
.grid .cb input { width: 1rem; height: 1rem; accent-color: var(--spice); }
.builder-panel > .btn { margin-top: 0.35rem; }

/* ---- vector input (bounding box / offset) ---- */
.vec { margin: 0 0 1.25rem; }
.vec-label { font-size: 0.82rem; color: var(--muted-foreground); font-weight: 500; margin-bottom: 0.5rem; }
.vec-head, .vec-row { display: grid; grid-template-columns: 3rem repeat(3, 1fr); gap: 0.5rem; align-items: center; }
.vec--notag .vec-head, .vec--notag .vec-row { grid-template-columns: repeat(3, 1fr); }
.vec-head span { text-align: center; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; color: var(--muted-foreground); }
.vec-row { margin-top: 0.4rem; }
.vec-row .tag { text-align: center; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); background: var(--muted); border-radius: 5px; padding: 0.45rem 0; font-weight: 600; }
.vec-row input { text-align: right; font-family: var(--font-mono); }

/* ---- results ---- */
.results { margin-top: 1.5rem; }
.banner { border-radius: calc(var(--radius) - 2px); padding: 0.75rem 0.9rem; margin: 1rem 0; font-size: 0.875rem; line-height: 1.5; border: 1px solid; }
.banner.ok { background: hsl(150 40% 12% / 0.5); border-color: hsl(150 35% 26%); color: hsl(150 45% 80%); }
.banner.bad { background: hsl(0 45% 13% / 0.5); border-color: hsl(0 45% 32%); color: hsl(0 65% 82%); }
.banner b { color: inherit; }
.banner em { font-style: normal; font-weight: 600; }
.banner code { background: hsl(0 0% 100% / 0.08); }

.checks { list-style: none; margin: 0 0 1.15rem; padding: 0.7rem 0.95rem; border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); background: hsl(28 8% 10% / 0.5); }
.chk { display: flex; align-items: baseline; gap: 0.55rem; font-size: 0.85rem; padding: 0.2rem 0; color: var(--muted-foreground); }
.chk .tick { font-weight: 700; font-family: var(--font-mono); }
.chk.ok .tick { color: var(--ok); }
.chk.bad .tick { color: hsl(0 70% 62%); }
.chk em { font-style: normal; opacity: 0.7; font-size: 0.92em; }
.chk em::before { content: "— "; }

.dls { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 1.15rem; }

.xmlbox summary { cursor: pointer; color: var(--muted-foreground); font-size: 0.85rem; padding: 0.4rem 0; }
.xmlbox summary:hover { color: var(--foreground); }
.xmlbox pre { background: hsl(28 8% 10% / 0.6); border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); padding: 0.85rem; overflow-x: auto; font-size: 0.75rem; line-height: 1.5; margin: 0.25rem 0 0.6rem; }

.builder-foot { color: var(--muted-foreground); font-size: 0.8rem; margin-top: 1.75rem; text-align: center; }
.builder-foot a { color: var(--muted-foreground); }
.builder-foot a:hover { color: var(--foreground); }

/* ---- narrow screens: sidebar becomes a horizontal bar on top ---- */
@media (max-width: 860px) {
  .shell { flex-direction: column; }
  .sidebar {
    position: sticky; top: 3.5rem; width: auto; height: auto; align-self: stretch;
    flex-direction: row; align-items: center; gap: 0.5rem;
    padding: 0.6rem clamp(1rem, 4vw, 1.5rem); overflow-x: auto;
    border-right: none; border-bottom: 1px solid var(--border); z-index: 20;
  }
  .side-brand, .side-foot, .side-group { display: none; }
  .side-nav { flex-direction: row; gap: 0.25rem; }
  .nav-item { flex-direction: row; white-space: nowrap; padding: 0.4rem 0.75rem; border-radius: calc(var(--radius) - 3px); }
  .nav-item-desc { display: none; }
  .nav-item::before { display: none; }
  .nav-item.on { background: var(--muted); border-color: transparent; }
  .builder-main > * { margin-inline: 0; }
}

@media (max-width: 640px) {
  .grid { grid-template-columns: 1fr; }
  .builder-panel { padding: 1.15rem; }
}