@import "tailwindcss";
@import "@heroui/styles";

/* unicode-range restricts Duneway to the Latin/Cyrillic blocks it actually covers.
   Symbols, arrows, dingbats (U+2000+) fall through to the system font immediately,
   preventing garbled â□□ rendering for ✓ ✗ ✕ — ¾ ³ → ↑ ● etc. */
@font-face {
  font-family: "Duneway";
  src: url("/fonts/Duneway-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-024F, U+0400-04FF, U+1E00-1EFF;
}
@font-face {
  font-family: "Duneway";
  src: url("/fonts/Duneway-Medium.ttf") format("truetype");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-024F, U+0400-04FF, U+1E00-1EFF;
}
@font-face {
  font-family: "Duneway";
  src: url("/fonts/Duneway-ExtraLight.ttf") format("truetype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-024F, U+0400-04FF, U+1E00-1EFF;
}
@font-face {
  font-family: "Duneway";
  src: url("/fonts/Duneway-Bold-Italic_MonoNumbers_Kommafix_Cyrfix.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-024F, U+0400-04FF, U+1E00-1EFF;
}
@font-face {
  font-family: "Duneway";
  src: url("/fonts/Duneway-Italic_MonoNumbers_Kommafix_Cyrfix.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-024F, U+0400-04FF, U+1E00-1EFF;
}
@font-face {
  font-family: "ImperialFont";
  src: url("/fonts/ImperialFont.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ── Dune desert dark theme ──────────────────────────────────────────────────
   Single source of truth for the dune palette. We override HeroUI v3 semantic
   tokens directly so utility classes (`bg-surface`, `text-foreground`,
   `border-border`, `bg-accent`, etc.) and HeroUI components both pick up the
   amber/sand colors automatically — no need for inline style={{}} overrides.

   `.dark` is applied on <html> in index.html.
   ─────────────────────────────────────────────────────────────────────────── */

:root {
  --font-sans: "Duneway", ui-sans-serif, system-ui, sans-serif;
}

.dark {
  color-scheme: dark;

  /* ── Dune monochromatic amber ladder (light → dark) ──────────────────────
     #f0a830 — accent hover / link
     #c9820a — primary accent
     #9e6711 — secondary accent
     #754d13 — soft accent borders / scrollbar
     #4e3411 — borders / hover surface / elevated panels
     #2a1d0c — primary surface (cards, tables, modal body)
     #1a1610 — subtle stripe / field background
     #0d0b07 — page background (near-black warm)                              */

  /* Base — surfaces use the DARKER half of the palette */
  --background: #0d0b07; /* page */
  --foreground: #e8dcc8;
  --muted: #8a7a60;

  /* Surfaces (darker) */
  --surface: #1a1610; /* cards, tables, modal body */
  --surface-foreground: #e8dcc8;
  --surface-secondary: #2a1d0c; /* slightly elevated panels */
  --surface-tertiary: #4e3411; /* top elevation (table headers) */
  --overlay: #1a1610; /* modal body */
  --overlay-foreground: #e8dcc8;

  --default: #1a1610;
  --default-foreground: #e8dcc8;

  /* Accent — dune amber */
  --accent: #c9820a;
  --accent-foreground: #0d0b07;
  --focus: #f0a830;
  --link: #f0a830;

  /* Form fields — recessed bg + BRIGHTER border for emphasis */
  --field-background: #0d0b07;
  --field-foreground: #e8dcc8;
  --field-placeholder: #8a7a60;
  --field-border: #754d13; /* brighter — buttons & inputs pop */

  /* Border widths + radii — global override: thin border, near-square corners */
  --border-width: 0.1em;
  --field-border-width: 0.1em;
  --radius: 0.1em;
  --field-radius: 0.1em;

  /* Status — hue-shifted from accent to stay in family */
  --success: #b0c90a; /* amber-green */
  --success-foreground: #0d0b07;
  --warning: #f0a830; /* lighter amber */
  --warning-foreground: #0d0b07;
  --danger: #c9230a; /* amber-red */
  --danger-foreground: #ffffff;

  /* Item rarity tiers — used by Market grid/table to color names & borders */
  --rarity-common: var(--foreground);
  --rarity-uncommon: var(--success);
  --rarity-rare: #4a90e2; /* blue */
  --rarity-epic: #a855f7; /* purple */
  --rarity-legendary: #f0a830; /* amber */
  --rarity-unique: #f97316; /* orange */
  --rarity-memento: #f43f5e; /* rose */

  /* Borders / separators — mid-tone */
  --border: #4e3411;
  --separator: #2a1d0c; /* subtle in-table dividers */

  /* Scrollbar */
  --scrollbar: #754d13;

  /* Dune-specific extras (not part of HeroUI's standard set) */
  --surface-alt: #14110b; /* striped table rows — between bg and surface */
  --surface-hover: #2a1d0c; /* hover state for rows / nav */
  --accent-soft-bg: #2a1d0c; /* faint amber pill background */
  --accent-soft-border: #754d13;

  /* ── Legacy aliases ────────────────────────────────────────────────────────
     Existing markup uses `var(--color-*)` everywhere. Map those to the new
     semantic tokens so nothing breaks while we migrate tab-by-tab.            */
  --color-background: var(--background);
  --color-surface: var(--surface);
  --color-surface-alt: var(--surface-alt);
  --color-primary: var(--accent);
  --color-primary-hover: var(--link);
  --color-text: var(--foreground);
  --color-text-dim: var(--muted);
  --color-border: var(--border);
  --color-danger: var(--danger);
  --color-success: var(--success);
}

/* ── Tailwind v4 utility surface ─────────────────────────────────────────────
   Expose the dune-specific extras as Tailwind colors so we can write
   `bg-surface-alt`, `border-border-strong`, etc. The standard HeroUI tokens
   (`bg-surface`, `bg-accent`, etc.) are wired by @heroui/styles already.    */
@theme {
  --color-surface-alt: var(--surface-alt);
  --color-surface-hover: var(--surface-hover);
  --color-accent-soft: var(--accent-soft-bg);
  --color-rarity-common: var(--rarity-common);
  --color-rarity-uncommon: var(--rarity-uncommon);
  --color-rarity-rare: var(--rarity-rare);
  --color-rarity-epic: var(--rarity-epic);
  --color-rarity-legendary: var(--rarity-legendary);
  --color-rarity-unique: var(--rarity-unique);
  --color-rarity-memento: var(--rarity-memento);
}

html,
body,
#root {
  background-color: var(--background);
  color: var(--foreground);
  min-height: 100vh;
  font-family: "Duneway", system-ui, sans-serif;
  margin: 0;
  padding: 0;
  /* Prevent the page itself from scrolling — the app is bounded to h-screen.
     The !important beats React Aria's inline overflow:hidden on modal scroll-lock,
     keeping the scrollbar gutter stable so modals don't cause layout shift. */
  overflow: hidden !important;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: var(--surface);
}
::-webkit-scrollbar-thumb {
  background: var(--scrollbar);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--accent);
}

/* ── HeroUI Checkbox + Switch — the root <label> has no position:relative,
   so the VisuallyHidden <input> (position:absolute, margin:-1px) can escape
   its container and cause scroll jumps when focused. We also clamp the
   VisuallyHidden wrapper span itself to ensure it can never affect layout.   */
.checkbox,
.switch {
  position: relative;
  align-items: center;
}

/* The VisuallyHidden span wrapping the hidden <input> inside Checkbox/Switch.
   React Aria renders it as position:absolute with margin:-1px — without a
   positioned ancestor the margin can still influence scroll-extent calculations
   in some browsers. Force all layout-affecting properties to be inert.        */
.checkbox > span[style],
.switch > span[style] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
  pointer-events: none !important;
}

/* ── HeroUI Table — compact density. HeroUI doesn't ship a size prop, so
   we override cell/header padding + font globally for a consistent look.   */
[role="columnheader"],
[role="rowheader"],
[role="gridcell"] {
  padding: 0.375rem 0.75rem !important; /* py-1.5 px-3 */
  font-size: 0.75rem; /* text-xs */
  line-height: 1.25rem;
}

/* Column headers — sit on the body bg with a hairline divider below.
   Subtle elevation; the amber text + uppercase is what makes them read.   */
[role="columnheader"] {
  background: linear-gradient(180deg, var(--surface-secondary) 0%, var(--surface) 100%);
  color: var(--accent);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--border);
  border-top: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 1;
}

/* Base cells = darkest (page bg); even rows get the lighter zebra stripe. */
[role="rowheader"],
[role="gridcell"] {
  background: var(--background) !important;
}
[role="row"]:nth-child(even) > [role="rowheader"],
[role="row"]:nth-child(even) > [role="gridcell"] {
  background: var(--surface) !important;
}

/* Accent left stripe on row hover — inset shadow avoids layout shift. */
[role="row"]:hover > [role="rowheader"],
[role="row"]:hover > [role="gridcell"]:first-of-type {
  box-shadow: inset 2px 0 0 color-mix(in srgb, var(--accent) 45%, transparent);
}

/* ── Tabs.Panel — HeroUI's default panel bg is too amber for our theme.
   Force the page background so the content area reads dark, not brown.   */
[role="tabpanel"],
.tabs__panel {
  background: var(--background) !important;
}

/* Depth/hillshade overlay blends into the tile layer for perceived terrain depth. */
.leaflet-depth-overlay {
  mix-blend-mode: multiply;
  opacity: 0.55;
  pointer-events: none;
}

/* Leaflet's control elements (z-index: 1000) escape their container's stacking
   context. Override dialogs/modals to always appear above the map. */
.alert-dialog__backdrop,
.modal__backdrop {
  z-index: 9999;
}

/* ── Top tabs — uppercase white labels, amber pill when selected.
   The selected-state pill is rendered by `Tabs.Indicator`, NOT the tab's
   own background, so we color that element directly to match the
   "DUNE ADMIN" logo (`--accent`).                                          */
[role="tab"] {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--foreground);
  font-weight: 600;
  background: transparent !important;
  width: fit-content;
  justify-content: space-between;
}
.tabs__indicator {
  background-color: var(--accent) !important;
}
.tabs__list {
  justify-content: space-between;
}
[role="tab"][data-selected="true"],
[role="tab"][aria-selected="true"],
[role="tab"][data-state="active"] {
  color: var(--accent-foreground) !important;
}

/* ── Listbox option hover / focus / selected — used by every Select,
   Autocomplete, and standalone ListBox in the app. HeroUI doesn't give
   these a visible hover state by default in our dark theme.              */
[role="option"]:hover,
[role="option"][data-hovered="true"],
[role="option"][data-focused="true"],
[role="option"][data-focus-visible="true"] {
  background-color: var(--surface-hover) !important;
  color: var(--foreground);
}
[role="option"][data-selected="true"],
[role="option"][aria-selected="true"] {
  background-color: var(--accent-soft-bg) !important;
  color: var(--accent);
}

/* ── HeroUI Tabs + Table containers leak brown bg from `--default` / their
   own internal tokens. Null them out so the page bg shows through.        */
.tabs,
.tabs__list-container,
.tabs__list,
[role="tablist"],
[role="tabpanel"],
.tabs__panel,
.table,
.table__scroll-container,
.table__content,
[role="grid"],
[role="row"],
[role="rowgroup"] {
  background: transparent !important;
}

/* Cells: transparent by default; even-row cells get the subtle stripe. */
[role="rowheader"],
[role="gridcell"] {
  background: transparent;
}

/* ── HeroUI modal dialog — gradient body matches the panel language.  */
[role="dialog"] {
  background: linear-gradient(170deg, var(--surface-secondary) 0%, var(--background) 100%) !important;
}
.dialog-surface-alt[role="dialog"] {
  background: var(--surface-alt) !important;
}

/* ── Pre / monospace output blocks ─────────────────────────────────────── */
pre,
.font-mono[class*="border"] {
  border-radius: var(--radius) !important;
}

/* ── Surface lift — deep shadow stack ───────────────────────────────────
   Adds perceived depth to card/panel surfaces: top-edge rim using the
   theme accent-soft-border, a gradient that darkens toward the bottom,
   and a stacked drop-shadow. Use alongside bg-surface* + border-border.  */
.dune-lift {
  background: linear-gradient(170deg, var(--surface-secondary) 0%, var(--background) 100%) !important;
  border-top-color: var(--accent-soft-border) !important;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.35),
    0 4px 10px rgba(0, 0, 0, 0.25);
}

/* Clerk modal backdrop — Clerk injects this via inline style so the
   appearance.elements className alone doesn't override it. */
.cl-modalBackdrop,
[class*="cl-modalBackdrop"] {
  background-color: rgba(13, 11, 7, 0.82) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

/* Clerk card — amber-tinted border so it reads as a deliberate surface
   against the dark scrim rather than a floating box with no edges. */
.cl-cardBox,
.cl-card,
[class*="cl-cardBox"],
[class*="cl-card "] {
  border: 1px solid rgba(201, 130, 10, 0.2) !important;
  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.02) inset !important;
}

/* ── Tab content fade-in ──────────────────────────────────────────────────
   Triggered when a keep-alive TabPane becomes active (hidden → flex).
   Pure opacity fade — no transform to avoid layout thrash on content reloads. */
@keyframes dune-tab-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.dune-tab-active {
  animation: dune-tab-in 180ms ease-out both;
}
