/*
 * Exentra interface system
 *
 * Customer pages and operator dashboards share one navy-and-gold identity,
 * but use different layouts for different jobs. Operator customization is
 * limited to a logo and business information; colors and typography stay
 * consistent across every tenant.
 */

:root {
  --ex-navy: #0A2E6B;
  --ex-navy-deep: #062354;
  --ex-gold: #FFC107;
  --ex-purple: #1677FF;
  --ex-purple-bright: #1677FF;
  --ex-paper: #F8FAFF;
  --ex-dashboard-bg: #F5F7FB;
  --ex-white: #fff;
  --ex-ink: #0F172A;
  --ex-muted: #52637A;
  --ex-faint: #73839A;
  --ex-line: #DFE7F1;
  --ex-good: #0f9d58;
  --ex-warn: #c98a00;
  --ex-bad: #d64550;
  --ex-shadow: 0 1px 2px rgba(16, 19, 45, .04), 0 8px 24px rgba(16, 19, 45, .05);
  --ex-radius: 16px;
  --ex-ease-out: cubic-bezier(.23, 1, .32, 1);
  --ex-ease-drawer: cubic-bezier(.32, .72, 0, 1);
  --ex-font: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --ex-mono: ui-monospace, "SF Mono", Consolas, monospace;

  /* Compatibility aliases used by the existing page templates. */
  --bg: var(--ex-paper);
  --paper: var(--ex-paper);
  --surface: var(--ex-white);
  --surface2: #faf9fc;
  --card: var(--ex-white);
  --ink: var(--ex-ink);
  --ink-soft: var(--ex-muted);
  --muted: var(--ex-muted);
  --faint: var(--ex-faint);
  --line: var(--ex-line);
  --brand: var(--ex-navy);
  --brand-deep: var(--ex-navy-deep);
  --navy: var(--ex-navy);
  --navy-deep: var(--ex-navy-deep);
  --electric: var(--ex-purple-bright);
  --purple: var(--ex-purple);
  --purple-bright: var(--ex-purple-bright);
  --gold: var(--ex-gold);
  --good: var(--ex-good);
  --good-bg: #e7f6ec;
  --warn: var(--ex-warn);
  --warn-bg: #fff6e0;
  --bad: var(--ex-bad);
  --bad-bg: #fbeaea;
  --shadow: var(--ex-shadow);
  --r: 14px;
  --radius: var(--ex-radius);
  --ease-out: var(--ex-ease-out);
  --ease-drawer: var(--ex-ease-drawer);
  --font-display: var(--ex-font);
  --font-body: var(--ex-font);
  --font-mono: var(--ex-mono);
  color-scheme: light;
}

html { background: var(--ex-paper); }

html,
body,
button,
input,
select,
textarea {
  font-family: var(--ex-font) !important;
}

body {
  background: var(--ex-paper) !important;
  color: var(--ex-ink) !important;
  min-height: 100vh;
}

::selection { color: var(--ex-navy-deep); background: rgba(244, 180, 0, .32); }
:focus-visible { outline: 2px solid var(--ex-gold) !important; outline-offset: 2px !important; }

a { transition: color 160ms var(--ex-ease-out), border-color 160ms var(--ex-ease-out); }
button { transition: transform 160ms var(--ex-ease-out), filter 160ms var(--ex-ease-out), background 160ms var(--ex-ease-out); }
button:not(:disabled):active { transform: scale(.98); }

input,
select,
textarea {
  color: var(--ex-ink) !important;
  background: var(--ex-white) !important;
  border-color: var(--ex-line) !important;
}
input::placeholder,
textarea::placeholder { color: #928da7 !important; }
input:focus,
select:focus,
textarea:focus {
  outline: 2px solid var(--ex-gold) !important;
  outline-offset: 1px !important;
  box-shadow: none !important;
}

.card,
.checkout,
.help-card,
.check-item,
.feature,
.modal,
.sheet,
.guest-card,
.plan,
.rt,
.kpi {
  background: var(--ex-white) !important;
  border-color: var(--ex-line) !important;
  box-shadow: var(--ex-shadow) !important;
}

.logo-ring,
.ring,
.brand .ring {
  overflow: hidden;
  background: var(--ex-white) !important;
  border: 2px solid var(--ex-gold) !important;
}
.logo-ring img,
.ring img,
.brand .ring img {
  width: 100%;
  height: 100%;
  padding: 3px;
  object-fit: contain;
}

.btn,
.pay-btn,
.tf-btn {
  color: #fff !important;
  background: var(--ex-navy) !important;
  border-color: var(--ex-navy) !important;
  box-shadow: none !important;
  font-weight: 700 !important;
}
.btn:hover,
.pay-btn:hover,
.tf-btn:hover { filter: brightness(1.08); }
.buy,
.btn.gold,
button.gold {
  color: var(--ex-navy-deep) !important;
  background: var(--ex-gold) !important;
  border-color: var(--ex-gold) !important;
  box-shadow: 0 8px 20px rgba(244, 180, 0, .18) !important;
}
.btn.ghost,
.a-btn,
.tb-btn,
button.more {
  color: var(--ex-ink) !important;
  background: var(--ex-white) !important;
  border: 1px solid var(--ex-line) !important;
  box-shadow: none !important;
}
.muted,
.faint,
.sub,
.pay-note { color: var(--ex-muted) !important; }
.section-label,
.vlabel,
th {
  color: var(--ex-faint) !important;
  letter-spacing: .08em !important;
}
.mono,
td.code,
td.num,
th.num,
.samount,
.pamount,
.gamount,
.vcode,
.cd { font-family: var(--ex-mono) !important; font-variant-numeric: tabular-nums; }

/* Customer journeys: compact, calm and mobile-first. */
body[data-exentra-page]:not([data-exentra-page="admin-dashboard"]) .wrap {
  max-width: 440px;
}
body[data-exentra-page="home"] .wrap { max-width: 1040px; }

body[data-exentra-page="connect"] { padding-bottom: 56px; }
body[data-exentra-page="connect"] > .topbar {
  color: #fff;
  padding: 16px 0 38px;
  background:
    radial-gradient(circle at 88% -10%, rgba(107, 63, 212, .38), transparent 50%),
    radial-gradient(circle at 8% 115%, rgba(244, 180, 0, .17), transparent 43%),
    linear-gradient(180deg, var(--ex-navy-deep), var(--ex-navy)) !important;
}
body[data-exentra-page="connect"] > .topbar::after { display: none; }
body[data-exentra-page="connect"] .brandrow { gap: 11px; }
body[data-exentra-page="connect"] .logo-ring { width: 42px; height: 42px; }
body[data-exentra-page="connect"] .status-pill {
  color: #d7d3e7;
  border-color: rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .08);
}
body[data-exentra-page="connect"] .hero { margin-top: 28px; }
body[data-exentra-page="connect"] .hero-eyebrow,
body[data-exentra-page="connect"] .hero h1 em { color: var(--ex-gold); }
body[data-exentra-page="connect"] .hero h1 {
  font-size: clamp(34px, 9vw, 42px);
  line-height: 1.05;
  letter-spacing: -.035em;
}
body[data-exentra-page="connect"] .hero p { color: #cbc7df; }
body[data-exentra-page="connect"] .signal-bars i { background: var(--ex-gold); }
body[data-exentra-page="connect"] .section-label { margin-top: 28px; }
body[data-exentra-page="connect"] .packages { gap: 12px; }
body[data-exentra-page="connect"] .card,
body[data-exentra-page="connect"] .checkout,
body[data-exentra-page="connect"] .help-card { border-radius: var(--ex-radius); }
body[data-exentra-page="connect"] .card.popular {
  border-color: var(--ex-gold) !important;
  box-shadow: 0 0 0 1px var(--ex-gold), var(--ex-shadow) !important;
}
body[data-exentra-page="connect"] .badge {
  color: var(--ex-navy-deep);
  background: var(--ex-gold);
}
body[data-exentra-page="connect"] .meta-item svg,
body[data-exentra-page="connect"] .feature svg,
body[data-exentra-page="connect"] .help-icon svg { color: var(--ex-purple-bright); }
body[data-exentra-page="connect"] .price-opt {
  color: var(--ex-ink);
  background: var(--ex-paper);
  border-color: var(--ex-line);
}
body[data-exentra-page="connect"] .price-opt.selected {
  color: #fff;
  background: var(--ex-navy);
  border-color: var(--ex-navy);
  box-shadow: none;
}
body[data-exentra-page="connect"] .guest-card {
  color: #fff;
  background: var(--ex-navy) !important;
  border-color: var(--ex-navy) !important;
}
body[data-exentra-page="connect"] .guest-opt.selected { background: var(--ex-gold); border-color: var(--ex-gold); }
body[data-exentra-page="connect"] .pay-tip {
  color: #6b4e00;
  background: #fff7e6;
  border-color: #f4d68a;
}
body[data-exentra-page="connect"] .pay-tip b { color: #5a4200; }
body[data-exentra-page="connect"] .footer {
  color: #fff;
  background: var(--ex-navy-deep) !important;
  border: 1px solid rgba(255, 255, 255, .08);
}
body[data-exentra-page="connect"] .footer-row svg,
body[data-exentra-page="connect"] .footer-biz small { color: var(--ex-gold); }

body[data-exentra-page="admin-login"] {
  background:
    radial-gradient(circle at 50% -12%, rgba(107, 63, 212, .11), transparent 30rem),
    var(--ex-paper) !important;
}
body[data-exentra-page="admin-login"] .card {
  max-width: 400px;
  padding: 36px 32px 30px;
  border-radius: 20px;
}
body[data-exentra-page="admin-login"] .logo-ring { width: 52px; height: 52px; }
body[data-exentra-page="admin-login"] h1 { color: var(--ex-navy); font-size: 21px; }
body[data-exentra-page="admin-login"] button { min-height: 48px; }

body[data-exentra-page="home"] .hero {
  color: #fff;
  background:
    radial-gradient(circle at 80% 5%, rgba(107, 63, 212, .3), transparent 24rem),
    linear-gradient(150deg, var(--ex-navy-deep), var(--ex-navy)) !important;
  border: 1px solid var(--ex-navy);
  box-shadow: var(--ex-shadow);
}
body[data-exentra-page="home"] .hero .eyebrow { color: var(--ex-gold); }

/* Operator dashboard: a working surface, not a marketing page. */
body[data-exentra-page="admin-dashboard"] {
  --bg: var(--ex-dashboard-bg);
  --surface: #fff;
  --surface2: #f9fafd;
  --ink: #0F172A;
  --muted: #52637A;
  --faint: #73839A;
  --line: #DFE7F1;
  --brand: #0A2E6B;
  --brand-deep: #062354;
  --gold: #FFC107;
  --purple: #1677FF;
  --good: #0f9d58;
  --good-bg: #e7f6ec;
  --warn: #c98a00;
  --warn-bg: #fff6e0;
  --bad: #d64550;
  --bad-bg: #fbeaea;
  --shadow: 0 1px 2px rgba(16, 19, 45, .04), 0 8px 24px rgba(16, 19, 45, .05);
  background: var(--bg) !important;
  color: var(--ink) !important;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body[data-exentra-page="admin-dashboard"] {
    --bg: #0a0c18;
    --surface: #14172a;
    --surface2: #0f1223;
    --ink: #e9e7f2;
    --muted: #a9a6c4;
    --faint: #7c789c;
    --line: #262a44;
    --brand: #14172a;
    --good-bg: #123524;
    --warn-bg: #3a2e08;
    --bad-bg: #3a1620;
    --shadow: 0 1px 2px rgba(0, 0, 0, .2), 0 10px 30px rgba(0, 0, 0, .35);
  }
}
:root[data-theme="dark"] body[data-exentra-page="admin-dashboard"] {
  --bg: #0a0c18;
  --surface: #14172a;
  --surface2: #0f1223;
  --ink: #e9e7f2;
  --muted: #a9a6c4;
  --faint: #7c789c;
  --line: #262a44;
  --brand: #14172a;
  --good-bg: #123524;
  --warn-bg: #3a2e08;
  --bad-bg: #3a1620;
  --shadow: 0 1px 2px rgba(0, 0, 0, .2), 0 10px 30px rgba(0, 0, 0, .35);
}
:root[data-theme="light"] body[data-exentra-page="admin-dashboard"] {
  --bg: #F5F7FB;
  --surface: #fff;
  --surface2: #F8FAFF;
  --ink: #0F172A;
  --muted: #52637A;
  --faint: #73839A;
  --line: #DFE7F1;
  --brand: #0A2E6B;
  --good-bg: #e7f6ec;
  --warn-bg: #fff6e0;
  --bad-bg: #fbeaea;
  --shadow: 0 1px 2px rgba(16, 19, 45, .04), 0 8px 24px rgba(16, 19, 45, .05);
}

body[data-exentra-page="admin-dashboard"] .app { grid-template-columns: 232px minmax(0, 1fr); }
body[data-exentra-page="admin-dashboard"] .side {
  padding: 18px 12px;
  color: #fff;
  background: linear-gradient(180deg, var(--ex-navy-deep), var(--ex-navy)) !important;
  box-shadow: none;
}
body[data-exentra-page="admin-dashboard"] .brand { padding: 6px 8px 16px; }
body[data-exentra-page="admin-dashboard"] .brand .ring { width: 36px; height: 36px; }
body[data-exentra-page="admin-dashboard"] .brand small { color: #c9c6de !important; }
body[data-exentra-page="admin-dashboard"] .nav { display: grid; gap: 3px; }
body[data-exentra-page="admin-dashboard"] .nav a {
  color: #c8c6df;
  border-radius: 10px;
  padding: 10px 11px;
}
body[data-exentra-page="admin-dashboard"] .nav a:hover { color: #fff; background: rgba(255, 255, 255, .08); }
body[data-exentra-page="admin-dashboard"] .nav a.active {
  color: #fff;
  background: rgba(255, 255, 255, .14);
  box-shadow: inset 3px 0 0 var(--ex-gold);
}
body[data-exentra-page="admin-dashboard"] .topbar {
  padding: 12px 22px;
  background: color-mix(in srgb, var(--surface) 92%, transparent) !important;
  border-color: var(--line) !important;
  backdrop-filter: blur(14px);
}
body[data-exentra-page="admin-dashboard"] .content { width: 100%; max-width: 1320px; padding: 24px; }
body[data-exentra-page="admin-dashboard"] .card,
body[data-exentra-page="admin-dashboard"] .kpi {
  color: var(--ink);
  background: var(--surface) !important;
  border-color: var(--line) !important;
  border-radius: 14px;
  box-shadow: var(--shadow) !important;
}
body[data-exentra-page="admin-dashboard"] .kpi { min-height: 116px; padding: 16px; }
body[data-exentra-page="admin-dashboard"] .kpi .accent { width: 3px; background: var(--ex-gold); }
body[data-exentra-page="admin-dashboard"] .kpi .lab { color: var(--faint); }
body[data-exentra-page="admin-dashboard"] .kpi .val {
  color: var(--ink);
  font-size: 28px;
  font-variant-numeric: tabular-nums;
}
body[data-exentra-page="admin-dashboard"] .sec-h { margin-top: 24px; }
body[data-exentra-page="admin-dashboard"] .sec-h h2 { color: var(--ink); }
body[data-exentra-page="admin-dashboard"] table { color: var(--ink); }
body[data-exentra-page="admin-dashboard"] th { background: var(--surface2); }
body[data-exentra-page="admin-dashboard"] td,
body[data-exentra-page="admin-dashboard"] th { border-color: var(--line); }
body[data-exentra-page="admin-dashboard"] tr.clk:hover td { background: var(--surface2) !important; }
body[data-exentra-page="admin-dashboard"] .chart .bar { background: var(--ex-purple-bright); }
body[data-exentra-page="admin-dashboard"] .pill.good { color: var(--good); background: var(--good-bg); }
body[data-exentra-page="admin-dashboard"] .pill.warn { color: var(--warn); background: var(--warn-bg); }
body[data-exentra-page="admin-dashboard"] .pill.bad { color: var(--bad); background: var(--bad-bg); }
body[data-exentra-page="admin-dashboard"] .modal,
body[data-exentra-page="admin-dashboard"] #moreSheet > div { border: 1px solid var(--line) !important; }

@media (max-width: 900px) {
  body[data-exentra-page="admin-dashboard"] .app { display: block; }
  body[data-exentra-page="admin-dashboard"] .content { padding: 16px 14px 86px; }
  body[data-exentra-page="admin-dashboard"] .topbar { padding: 10px 13px; }
  body[data-exentra-page="admin-dashboard"] .grid-kpi { gap: 10px; }
  body[data-exentra-page="admin-dashboard"] .kpi { min-height: 102px; padding: 14px; }
  body[data-exentra-page="admin-dashboard"] .kpi .val { font-size: 22px; }
  body[data-exentra-page="admin-dashboard"] .mobnav {
    background: var(--surface);
    border-color: var(--line);
    box-shadow: 0 -8px 24px rgba(16, 19, 45, .08);
  }
  body[data-exentra-page="admin-dashboard"] .mobnav a.active { color: var(--ex-purple-bright); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}