/* ============================================================================
   MR DISTRIBUTION, "Liquid Glass on Jet Black" theme
   Drop-in, framework-agnostic. Source of truth extracted from the live portal
   (netflix-theme.css). Apply these tokens + classes to any dark UI to match.

   THE LOOK IN ONE LINE: jet-black ground, translucent frosted-glass panels with
   a specular top rim, platinum (near-white) text, color used ONLY for meaning
   (green = positive/paid, red = negative/owed). Real gold lives ONLY in the logo
   image, never in the UI. Low-opacity gold reads brown, so hairlines are neutral.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  /* ---- ground & surfaces ---- */
  --onyx:       #000000;   /* page background (true black) */
  --soft:       #0A0A0D;   /* solid card base (non-glass fallback) */
  --panel:      #0d0d10;
  --panel-2:    #121216;

  /* ---- text / accent (MONOCHROME: accent is platinum, NOT gold) ---- */
  --platinum:   #F3F4F6;   /* primary accent + headings */
  --text:       #F3F4F6;
  --text-dim:   rgba(243,244,246,.62);
  --text-faint: rgba(243,244,246,.40);
  --grey-mute:  #9A9AA2;

  /* ---- hairlines (strictly neutral, never tinted) ---- */
  --line:       rgba(243,244,246,.10);
  --line-soft:  rgba(243,244,246,.07);

  /* ---- meaning colors (use ONLY to signal state, never decoration) ---- */
  --gain:       #2EA36B;   /* up / positive / paid / success, mature green */
  --loss:       #E0484D;   /* down / negative / owed / error, mature red */
  --on-gain:    #04231a;   /* text ON a green button/fill */

  /* ---- STATE colors: green = positive/paid, red = negative/owed, grey = neutral.
         That's the whole set. No other status hues on the established dashboard. ---- */
  --finalized:  #2EA36B;   /* positive / paid, pill fill rgba(46,163,107,.13) */
  --neutral:    var(--text-dim);   /* neutral pill: fill rgba(243,244,246,.10) */
  --deducted:   #E0484D;   /* negative / owed / deduction, pill fill rgba(224,72,77,.16) */

  /* ---- DATA-VIZ palette (charts: donut "top performers", area fills) ---- */
  --viz-green:  #0B9444;   /* donut slice 1 / primary series */
  --viz-blue:   #2545C0;   /* donut slice 2 */
  --viz-red:    #B0182F;   /* donut slice 3 */
  --viz-area:   rgba(243,244,246,.16);   /* platinum area-chart fill (fades to 0) */

  /* ---- BRAND GOLD, the ONLY real gold; logo + public landing accents ONLY.
         Never in interior/dashboard UI (low-opacity gold reads brown). ---- */
  --gold:       #d4af37;

  /* ---- tiny-dose accents (logo-strip / rare highlights; sparingly) ---- */
  --violet:  #8F19C8;
  --blue:    #1C2ED8;
  --orange:  #E45722;
  --crimson: #E0484D;
  --teal:    #138E90;

  /* ---- type ---- */
  --font-head: 'Archivo','Inter','Helvetica Neue',Arial,sans-serif;  /* headings, labels, buttons */
  --font-body: 'Inter','Helvetica Neue',Arial,sans-serif;            /* body */

  --shadow: 0 12px 40px rgba(0,0,0,.6);

  /* ---- THE LIQUID GLASS (this is the signature) ---- */
  --glass:        rgba(32,32,34,.56);   /* panel fill, neutral grey, translucent so blur reads through */
  --glass-strong: rgba(24,24,25,.74);   /* modals / dropdowns, more opaque for readability */
  --glass-blur:   saturate(185%) blur(28px);
  --glass-rim:    inset 0 1px 0 rgba(255,255,255,.32), inset 0 -1px 0 rgba(0,0,0,.30); /* specular top edge + soft base */
  --glass-edge:   1px solid rgba(243,244,246,.14);
  --glass-drop:   0 20px 54px rgba(0,0,0,.55), 0 2px 10px rgba(0,0,0,.40);             /* layered float depth */
  --glass-sheen:  linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,0) 48%);
  --radius:       18px;   /* glass panels */
}

/* ---- ground ---- */
html, body { background: var(--onyx); color: var(--text);
  font-family: var(--font-body); -webkit-font-smoothing: antialiased; letter-spacing:.1px; }
h1,h2,h3,h4,h5,h6 { font-family: var(--font-head); color: var(--text); letter-spacing:-.01em; }
::selection { background: var(--platinum); color:#000; }

/* ============================================================================
   THE GLASS PANEL, apply .glass-card to any container you want as a panel.
   (In the portal this is mapped onto Bootstrap's .card; here it's standalone.)
   ============================================================================ */
/* On standalone pages (flat black behind), translucent glass reads as an ugly grey box.
   So the card is JET BLACK to match the ground, defined by a hairline edge + float shadow. */
.glass-card {
  position: relative;
  background: #0c0c0e;
  border: 1px solid rgba(243,244,246,.08);
  border-radius: var(--radius);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 24px 60px rgba(0,0,0,.62);
  color: var(--text);
}
.glass-card::before {
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background: none; z-index:0;
}
.glass-card > * { position: relative; z-index: 1; }
.glass-card:hover {
  border-color: rgba(243,244,246,.20);
  box-shadow: var(--glass-rim), 0 24px 64px rgba(0,0,0,.62);
}

/* ---- topbar & sidebar: same glass, slightly different tint/opacity ---- */
.glass-topbar {
  background: rgba(9,9,9,.55);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid rgba(243,244,246,.08);
}
.glass-sidebar {
  background: rgba(11,11,11,.58);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border-right: 1px solid rgba(243,244,246,.10);
}
.glass-menu, .glass-dropdown, .glass-modal {
  background: var(--glass-strong);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(243,244,246,.12);
  border-radius: 12px;
  box-shadow: var(--glass-rim), var(--glass-drop);
  color: var(--text);
}

/* ============================================================================
   FORM CONTROLS, faint frosted fields
   ============================================================================ */
.glass-input, input.glass-input, textarea.glass-input, select.glass-input {
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(243,244,246,.14);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: var(--text); border-radius: 9px; padding: 10px 13px;
  font-family: var(--font-body);
}
.glass-input::placeholder { color: var(--text-faint); }
.glass-input:focus { outline: none; border-color: rgba(243,244,246,.35); }

/* ============================================================================
   BUTTONS, primary = solid platinum w/ black text; success = green; both flat
   ============================================================================ */
.btn-platinum {
  background: var(--platinum); color:#0a0a0a; border:1px solid var(--platinum);
  font-family: var(--font-head); font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  border-radius: 9px; padding: 10px 18px; cursor:pointer;
}
.btn-platinum:hover { background:#ffffff; }
.btn-success-g { background: var(--gain); color:#04231a; border:1px solid var(--gain);
  font-weight:700; border-radius:9px; padding:10px 18px; cursor:pointer; }
.btn-ghost { background: transparent; color: var(--platinum); border:1px solid rgba(243,244,246,.5);
  font-weight:700; border-radius:9px; padding:9px 15px; cursor:pointer; }
.btn-ghost:hover { background: rgba(243,244,246,.12); }
/* primary mustard CTA, full-strength gold on jet black (reads as gold, never brown) */
.btn-gold { display:inline-block; background: var(--gold); color:#0a0a0a; border:1px solid var(--gold);
  font-family: var(--font-head); font-weight:800; text-transform:uppercase; letter-spacing:.06em;
  border-radius: 9px; padding: 12px 22px; cursor:pointer; text-decoration:none; }
.btn-gold:hover { background:#e6c552; }

/* ============================================================================
   TABLES, quiet hairlines, uppercase platinum headers, tabular numerals
   ============================================================================ */
.glass-table { width:100%; border-collapse:collapse; color: var(--text); font-size:13.5px; }
.glass-table thead th {
  color: var(--platinum); border-bottom:2px solid var(--line);
  text-transform:uppercase; font-size:11px; letter-spacing:.09em; font-weight:600;
  font-family: var(--font-head); text-align:left; padding:0 14px 11px;
}
.glass-table td { border-top:1px solid var(--line); padding:12px 14px; font-variant-numeric: tabular-nums; }
.glass-table tbody tr:hover td { background: rgba(243,244,246,.05); }
.num-pos { color: var(--gain); font-weight:700; }   /* positive money */
.num-neg { color: var(--loss); font-weight:700; }   /* negative money */

/* ============================================================================
   BADGES / PILLS, state only (finalized/paid = green, error = red, neutral)
   ============================================================================ */
.pill { display:inline-flex; align-items:center; gap:6px; font-size:10.5px; font-weight:700;
  border-radius:20px; padding:4px 10px; letter-spacing:.04em; }
.pill-pos      { background: rgba(46,163,107,.14); color: var(--gain); }      /* positive / paid */
.pill-neg      { background: rgba(224,72,77,.16);  color: var(--loss); }      /* negative / owed */
.pill-neutral  { background: rgba(243,244,246,.10); color: var(--text-dim); } /* neutral */

/* data-viz: donut / chart series pull from --viz-green / --viz-blue / --viz-red in that order;
   area charts use a platinum line with a --viz-area gradient fill fading to transparent. */

/* label / kicker, uppercase platinum micro-type used above stats and sections */
.kicker { font-family: var(--font-head); font-weight:600; text-transform:uppercase;
  letter-spacing:.10em; font-size:10.5px; color: var(--gold); }   /* mustard label accent on jet black */