/* ============================================================
   Fiesta backoffice - design layer on top of MudBlazor.
   Palette and typography come from Theme/FiestaTheme.cs; this file
   carries what the MudTheme API cannot express: the brand face,
   square corners, hairline borders instead of Material elevation,
   and the gold accent treatments.
   ============================================================ */

@font-face {
  font-family: "AbrahamLincoln";
  src: url("fonts/AbrahamLincoln.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "CinzelDecorative";
  src: url("fonts/CinzelDecorative-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

:root {
  --ink: #050505;
  --ink-soft: #0d0d0d;
  --ink-line: #1a1a1a;
  --ink-raise: #131313;
  --gold: #c9a84c;
  --gold-bright: #e5c870;
  --gold-deep: #8c7028;
  --cream: #f5f0e8;
  --mute: #a5a5a5;
  --mute-soft: #6d6d6d;

  --font-display: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-brand: "AbrahamLincoln", "Cormorant Garamond", Georgia, serif;

  --tr-wide: 0.08em;
  --tr-wider: 0.18em;
  --tr-widest: 0.28em;

  --ease: cubic-bezier(.16, .84, .32, 1);
  --dur-fast: 180ms;
  --dur-base: 320ms;
}

html, body {
  font-family: var(--font-body);
  background-color: var(--ink);
  color: var(--cream);
}

/* ---------- Brand wordmark ---------- */

.fiesta-brand {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--font-brand);
  font-size: 1.6rem;
  line-height: 1;
  letter-spacing: var(--tr-wide);
  color: var(--cream);
  white-space: nowrap;
  user-select: none;
}

/* The exclamation is set in the display serif rather than the brand face: AbrahamLincoln's
   own glyph runs into the following E and the wordmark reads "FAESTA". */
.fiesta-brand__bang {
  font-family: var(--font-display);
  color: var(--gold);
  font-style: italic;
  font-weight: 600;
  padding: 0 0.06em;
}

.fiesta-brand__sub {
  font-family: var(--font-body);
  font-size: 0.6rem;
  letter-spacing: var(--tr-widest);
  text-transform: uppercase;
  color: var(--mute-soft);
  margin-left: 0.8em;
  align-self: center;
}

/* Small uppercase label used above headings and on stat cards. */
.eyebrow {
  font-size: 0.68rem;
  letter-spacing: var(--tr-widest);
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
}

/* ---------- Square corners everywhere ---------- */

.mud-paper,
.mud-card,
.mud-button-root,
.mud-input-control .mud-input,
.mud-input-slot,
.mud-chip,
.mud-alert,
.mud-avatar,
.mud-dialog,
.mud-menu-popover .mud-list,
.mud-table,
.mud-tooltip {
  border-radius: 0 !important;
}

/* ---------- Surfaces: hairline borders, no Material shadow ---------- */

.mud-paper {
  background-color: var(--ink-soft);
  border: 1px solid var(--ink-line);
  box-shadow: none !important;
  background-image: none;
}

.mud-paper-outlined {
  border: 1px solid var(--ink-line);
}

/* ---------- App bar ---------- */

.mud-appbar {
  background-color: rgba(5, 5, 5, 0.92) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--ink-line);
  box-shadow: none !important;
}

/* ---------- Drawer / navigation ---------- */

.mud-drawer {
  background-color: var(--ink) !important;
  border-right: 1px solid var(--ink-line);
  box-shadow: none !important;
}

.mud-drawer-header {
  border-bottom: 1px solid var(--ink-line);
  padding: 20px 20px 18px;
}

.mud-nav-link {
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: var(--mute);
  border-left: 2px solid transparent;
  transition: color var(--dur-fast) var(--ease),
              background-color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}

.mud-nav-link:hover:not(.mud-nav-link-disabled) {
  background-color: rgba(201, 168, 76, 0.06);
  color: var(--cream);
}

.mud-nav-link.active:not(.mud-nav-link-disabled) {
  background-color: rgba(201, 168, 76, 0.1);
  border-left-color: var(--gold);
  color: var(--gold);
  font-weight: 500;
}

.mud-nav-link.active .mud-icon-root {
  color: var(--gold);
}

/* Group headers read as section labels rather than links. */
.mud-nav-group > .mud-nav-link {
  font-size: 0.68rem;
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
  color: var(--mute-soft);
}

.mud-nav-group > .mud-nav-link:hover {
  color: var(--mute);
  background-color: transparent;
}

/* ---------- Buttons ---------- */

.mud-button-filled.mud-button-filled-primary {
  background-color: var(--gold);
  color: var(--ink);
  border: 1px solid var(--gold);
  box-shadow: none !important;
  transition: background-color var(--dur-base) var(--ease),
              transform var(--dur-base) var(--ease),
              box-shadow var(--dur-base) var(--ease);
}

.mud-button-filled.mud-button-filled-primary:hover {
  background-color: var(--gold-bright);
  border-color: var(--gold-bright);
  transform: translateY(-1px);
  box-shadow: 0 16px 40px -14px rgba(201, 168, 76, 0.5) !important;
}

.mud-button-outlined.mud-button-outlined-primary {
  border-color: var(--gold);
  color: var(--gold);
}

.mud-button-outlined.mud-button-outlined-primary:hover {
  background-color: var(--gold);
  color: var(--ink);
}

.mud-button-text.mud-button-text-primary {
  color: var(--gold);
}

.mud-button-text.mud-button-text-primary:hover {
  background-color: rgba(201, 168, 76, 0.08);
  color: var(--gold-bright);
}

/* ---------- Tables ---------- */

.mud-table {
  background-color: var(--ink-soft);
  border: 1px solid var(--ink-line);
}

.mud-table-toolbar {
  border-bottom: 1px solid var(--ink-line);
}

.mud-table-head .mud-table-cell {
  font-size: 0.68rem;
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
  color: var(--mute-soft);
  font-weight: 500;
  background-color: var(--ink);
  border-bottom: 1px solid var(--ink-line);
}

.mud-table-row:hover:not(.mud-table-no-hover) {
  background-color: var(--ink-raise) !important;
}

.mud-table-cell {
  border-bottom: 1px solid var(--ink-line);
}

.mud-table-pagination {
  border-top: 1px solid var(--ink-line);
}

/* ---------- Inputs ---------- */

.mud-input.mud-input-outlined .mud-input-outlined-border {
  border-color: #262626;
  border-radius: 0;
  transition: border-color var(--dur-fast) var(--ease);
}

.mud-input.mud-input-outlined:hover .mud-input-outlined-border {
  border-color: var(--mute-soft);
}

.mud-input.mud-input-outlined.mud-focused .mud-input-outlined-border {
  border-color: var(--gold) !important;
  border-width: 1px !important;
}

.mud-input-label.mud-input-label-inputcontrol {
  letter-spacing: 0.02em;
}

.mud-input-label.mud-focused {
  color: var(--gold) !important;
}

/* ---------- Chips / status pills ---------- */

.mud-chip {
  font-size: 0.68rem;
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  font-weight: 500;
  height: 22px;
}

/* ---------- Focus visibility ---------- */

.mud-button-root:focus-visible,
.mud-nav-link:focus-visible,
a:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 2px;
}

/* ---------- Dialogs & overlays ---------- */

.mud-dialog {
  background-color: var(--ink-soft);
  border: 1px solid var(--ink-line);
}

.mud-dialog-title {
  border-bottom: 1px solid var(--ink-line);
}

.mud-dialog-actions {
  border-top: 1px solid var(--ink-line);
}

.mud-overlay-dark {
  background-color: rgba(5, 5, 5, 0.82);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* ---------- Page header ---------- */

.fiesta-page-header {
  border-bottom: 1px solid var(--ink-line);
  padding-bottom: 20px;
  margin-bottom: 28px;
}

.fiesta-page-header__title {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.15;
  color: var(--cream);
  margin: 0;
}

.fiesta-page-header__subtitle {
  font-size: 0.82rem;
  color: var(--mute);
  margin-top: 4px;
}

/* ---------- Stat card ---------- */

.fiesta-stat {
  position: relative;
  padding: 20px 22px;
  background-color: var(--ink-soft);
  border: 1px solid var(--ink-line);
  transition: border-color var(--dur-base) var(--ease);
  height: 100%;
}

.fiesta-stat:hover {
  border-color: var(--gold-deep);
}

/* Accent rule that appears on hover for actionable cards. */
.fiesta-stat--actionable::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: var(--gold);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--dur-base) var(--ease);
}

.fiesta-stat--actionable:hover::before {
  transform: scaleY(1);
}

.fiesta-stat__label {
  font-size: 0.68rem;
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
  color: var(--mute-soft);
  font-weight: 500;
}

.fiesta-stat__value {
  font-family: var(--font-display);
  font-size: 2.4rem;
  line-height: 1.05;
  font-weight: 500;
  color: var(--cream);
  margin: 10px 0 2px;
  /* Cormorant Garamond defaults to oldstyle figures, where the zero is x-height and reads as
     a lowercase o - "0/50" looked like "o/50". Lining figures put every digit on the cap line. */
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
}

.fiesta-stat__sub {
  font-size: 0.72rem;
  color: var(--mute);
}

/* ---------- Login ---------- */

.fiesta-login {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  background-color: var(--ink);
}

@media (max-width: 900px) {
  .fiesta-login { grid-template-columns: 1fr; }
  .fiesta-login__aside { display: none; }
}

.fiesta-login__aside {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 56px;
  border-right: 1px solid var(--ink-line);
  background:
    radial-gradient(circle at 20% 15%, rgba(201, 168, 76, 0.1), transparent 55%),
    linear-gradient(160deg, #0a0a0a, #050505 60%);
  overflow: hidden;
}

.fiesta-login__aside::after {
  content: '';
  position: absolute;
  right: -120px;
  bottom: -120px;
  width: 380px;
  height: 380px;
  border: 1px solid rgba(201, 168, 76, 0.14);
  border-radius: 50%;
}

.fiesta-login__tagline {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.8rem);
  line-height: 1.15;
  color: var(--cream);
  max-width: 15ch;
  margin: 0;
}

.fiesta-login__tagline em {
  color: var(--gold);
  font-style: italic;
}

.fiesta-login__meta {
  font-size: 0.7rem;
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
  color: var(--mute-soft);
}

.fiesta-login__panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
}

.fiesta-login__form {
  width: 100%;
  max-width: 380px;
}

/* Corner ticks - the storefront marks framed panels this way. */
.fiesta-corner-frame {
  position: relative;
}

.fiesta-corner-frame::before,
.fiesta-corner-frame::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  border-color: var(--gold);
  border-style: solid;
  pointer-events: none;
}

.fiesta-corner-frame::before {
  top: -1px;
  left: -1px;
  border-width: 1px 0 0 1px;
}

.fiesta-corner-frame::after {
  right: -1px;
  bottom: -1px;
  border-width: 0 1px 1px 0;
}

/* ---------- Scrollbar ---------- */

* {
  scrollbar-width: thin;
  scrollbar-color: #262626 var(--ink);
}

*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: var(--ink); }
*::-webkit-scrollbar-thumb { background: #262626; border: 2px solid var(--ink); }
*::-webkit-scrollbar-thumb:hover { background: var(--gold-deep); }

/* Numeric columns line up when digits share a width. */
.tabular-nums {
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
}

/* The partner's referral code. Set in the display serif, so it needs lining figures too -
   "ANA01" was rendering as "ANAoı" with oldstyle digits. */
.fiesta-referral-code {
  font-family: var(--font-display);
  font-size: 2.2rem;
  line-height: 1;
  letter-spacing: 0.08em;
  color: var(--gold);
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
}

/* Any serif heading that carries a figure needs the same treatment. */
.fiesta-page-header__title,
h1, h2, h3, h4,
.mud-typography-h1, .mud-typography-h2, .mud-typography-h3, .mud-typography-h4 {
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
}