/* ============================================================================
   apex.css — Apex-flavoured design layer (loaded AFTER style.css, overrides it)
   Inspired by apexdatasolutions.sa: Inter + Poppins, green accent, deep-navy
   drama, gradient heroes, rising-bars motif, soft glows, scroll-reveal motion.
   Token-driven so per-vertical --accent keeps working.
   ========================================================================== */

:root{
  /* refined premium neutrals (cooler, deeper) */
  --ink:#0f1620;
  --muted:#5b6675;
  --line:#e6e9ef;
  --bg:#f5f7fa;
  --card:#ffffff;
  --accent-ink:#ffffff;
  /* accent tints derived from the themeable --accent */
  --accent-weak: color-mix(in srgb, var(--accent) 12%, #fff);
  --accent-tint: color-mix(in srgb, var(--accent) 7%, #fff);
  --accent-line: color-mix(in srgb, var(--accent) 26%, var(--line));
  --accent-deep: color-mix(in srgb, var(--accent) 82%, #06231a);
  /* Apex deep-navy ink used for hero / dark surfaces */
  --navy:#0b1220;
  --navy-2:#111b2e;
  --radius:18px;
  --radius-sm:12px;
  --shadow-sm:0 1px 2px rgba(15,22,32,.05);
  --shadow:0 6px 22px rgba(15,22,32,.07);
  --shadow-lg:0 22px 60px -18px rgba(15,22,32,.28);
  --glow: 0 14px 34px -12px color-mix(in srgb, var(--accent) 55%, transparent);
  --font: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --display: 'Poppins', 'Inter', system-ui, sans-serif;
}

*{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }

html{ scroll-behavior:smooth; }

body{
  font-family:var(--font);
  color:var(--ink);
  /* Deliberate light surface: cool-tinted base + navy/green directional washes
     + a faint engineered dot-grid (Apex "data" motif). Layers, top→bottom. */
  background-color:#eef2f7;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Ccircle cx='1' cy='1' r='1' fill='%230b1220' fill-opacity='0.045'/%3E%3C/svg%3E"),
    radial-gradient(1100px 560px at 92% -8%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 58%),
    radial-gradient(900px 640px at -6% -4%, color-mix(in srgb, var(--navy) 13%, transparent), transparent 60%),
    linear-gradient(180deg, #f2f6fb 0%, #e8edf4 100%);
  background-repeat:repeat, no-repeat, no-repeat, no-repeat;
  background-size:22px 22px, auto, auto, auto;
  background-attachment:fixed, fixed, fixed, fixed;
  letter-spacing:-.006em;
}

/* ── Typography ─────────────────────────────────────────────────────────── */
h1,h2,h3,.page-title,.pro-name,.svc-name,.kpi-num{ font-family:var(--display); letter-spacing:-.02em; }
.page-title{ font-weight:700; font-size:clamp(1.6rem,3.4vw,2.15rem); line-height:1.08; margin:0 0 4px; }
.lede{ color:var(--muted); font-weight:400; }
.lede.small{ font-size:.92rem; }
.section{ font-family:var(--display); font-weight:600; letter-spacing:-.015em; }
.eyebrow{ text-transform:uppercase; letter-spacing:.2em; font-size:.7rem; font-weight:700;
  color:var(--accent-deep); display:inline-block; }

/* ── Top bar — sticky glass ─────────────────────────────────────────────── */
.topbar{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(1.4) blur(12px);
  background:color-mix(in srgb, var(--card) 82%, transparent);
  border-bottom:1px solid var(--line);
}
.brand{ display:inline-flex; align-items:center; gap:10px; font-family:var(--display);
  font-weight:700; letter-spacing:-.02em; color:var(--ink); }
.brand-mark{ width:26px; height:23px; color:var(--ink); flex:0 0 auto; }
.topnav a{ font-weight:500; color:var(--muted); padding:8px 14px; border-radius:10px;
  border:1px solid transparent; transition:color .2s, background .2s, border-color .2s; }
.topnav a:hover{ color:var(--ink); background:var(--accent-tint); border-color:var(--accent-line); }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn{ border-radius:12px; font-weight:600; letter-spacing:-.01em;
  transition:transform .16s cubic-bezier(.2,.7,.2,1), box-shadow .2s, background .2s, border-color .2s; }
.btn:hover{ transform:translateY(-2px); }
.btn:not(.primary):not(.danger){ background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow-sm); }
.btn:not(.primary):not(.danger):hover{ border-color:var(--accent-line); background:var(--accent-tint); }
.btn.primary{
  background:linear-gradient(135deg, color-mix(in srgb,var(--accent) 88%, #fff) 0%, var(--accent) 55%, var(--accent-deep) 100%);
  color:var(--accent-ink); box-shadow:var(--glow); border:none;
}
.btn.primary:hover{ box-shadow:0 20px 42px -12px color-mix(in srgb, var(--accent) 62%, transparent); }
.btn.block{ width:100%; }

/* ── Hero band (customer index) ─────────────────────────────────────────── */
.hero{
  position:relative; overflow:hidden; border-radius:26px; margin:6px 0 26px;
  padding:clamp(28px,5vw,52px) clamp(22px,4vw,44px);
  color:#eaf2ee;
  background:
    radial-gradient(120% 120% at 88% -10%, color-mix(in srgb, var(--accent) 42%, transparent), transparent 55%),
    linear-gradient(155deg, var(--navy-2), var(--navy));
  box-shadow:var(--shadow-lg);
}
.hero::after{ /* faint rising-bars motif, bottom-right */
  content:""; position:absolute; right:-6%; bottom:-30%; width:min(46%,360px); aspect-ratio:1;
  background:
    linear-gradient(var(--accent),var(--accent)) 6%  62% / 11% 34% no-repeat,
    linear-gradient(var(--accent),var(--accent)) 26% 62% / 11% 50% no-repeat,
    linear-gradient(var(--accent),var(--accent)) 46% 62% / 11% 70% no-repeat,
    linear-gradient(#fff,#fff)                   66% 62% / 11% 90% no-repeat;
  opacity:.13; filter:blur(.2px); pointer-events:none; border-radius:12px;
}
.hero .eyebrow{ color:color-mix(in srgb, var(--accent) 55%, #fff); }
.hero h1{ font-family:var(--display); font-weight:700; font-size:clamp(1.8rem,4.6vw,3rem);
  line-height:1.04; margin:12px 0 10px; color:#fff; max-width:16ch; }
.hero p{ color:#b9c6d6; font-weight:300; font-size:clamp(1rem,1.6vw,1.12rem); max-width:46ch; margin:0; }
.hero .stat-row{ display:flex; gap:26px; flex-wrap:wrap; margin-top:26px; }
.hero .stat b{ font-family:var(--display); font-size:1.5rem; color:#fff; display:block; }
.hero .stat span{ font-size:.78rem; color:#a8b6c8; text-transform:uppercase; letter-spacing:.12em; }

/* ── Provider / service / choice cards ──────────────────────────────────── */
.pro-card, .svc-card, .summary-card, .policy, .panel, .chart-card, .calwrap, .tips .tip{
  border-radius:var(--radius);
}
.pro-card, .svc-card{
  background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow-sm);
  transition:transform .18s cubic-bezier(.2,.7,.2,1), box-shadow .22s, border-color .2s;
  position:relative; overflow:hidden;
}
.pro-card::before, .svc-card::before{ /* accent edge on hover */
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--accent);
  transform:scaleY(0); transform-origin:top; transition:transform .22s cubic-bezier(.2,.7,.2,1);
}
.pro-card:hover, .svc-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:var(--accent-line); }
.pro-card:hover::before, .svc-card:hover::before{ transform:scaleY(1); }
.svc-price{ color:var(--accent-deep); font-family:var(--display); font-weight:600; }
.svc-card.shared{ background:linear-gradient(180deg, var(--accent-tint), var(--card)); }

/* ── Time & date pickers ────────────────────────────────────────────────── */
.time-row{ border-radius:12px; transition:transform .12s, box-shadow .2s, border-color .2s, background .2s; }
.time-row:hover{ transform:translateY(-2px); border-color:var(--accent-line); background:var(--accent-tint); box-shadow:var(--shadow-sm); }
.time-row.selected{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); box-shadow:var(--glow); }
.date-pill{ border-radius:14px; transition:transform .12s, border-color .2s, background .2s; }
.date-pill:hover{ transform:translateY(-2px); border-color:var(--accent-line); }
.date-pill.active{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); box-shadow:var(--glow); }
.date-pill.active .dow,.date-pill.active .mon{ color:color-mix(in srgb,#fff 78%, var(--accent)); }

/* ── Inputs ─────────────────────────────────────────────────────────────── */
input,textarea,select{ border-radius:12px; }
input:focus,textarea:focus,select:focus{ outline:none; border-color:var(--accent);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent); }

/* ── Stepper ────────────────────────────────────────────────────────────── */
.step-dot{ transition:background .2s, box-shadow .2s, transform .2s; }
.step-item.active .step-dot{ background:var(--accent); box-shadow:var(--glow); transform:scale(1.08); }
.step-item.done .step-dot{ background:var(--accent); }
.step-line.done{ background:var(--accent); }

/* ── Section headers ────────────────────────────────────────────────────── */
.section{ position:relative; padding-left:14px; }
.section::before{ content:""; position:absolute; left:0; top:.15em; bottom:.15em; width:4px;
  border-radius:3px; background:linear-gradient(var(--accent), var(--accent-deep)); }

/* ── Cards footer polish ────────────────────────────────────────────────── */
.summary-card, .policy, .panel{ box-shadow:var(--shadow); }
.fineprint.secure::before{ color:var(--accent-deep); }

/* =========================================================================
   ADMIN — premium "data product" surface (Apex-dark accents on light body)
   ========================================================================= */
/* Admin stays light (keeps every complex component legible) but gets a cool
   field with a navy haze behind the header/KPI zone so the dark KPI tiles land
   on a stage instead of floating on flat grey. Full-dark admin = later sweep. */
body.admin{
  --bg:#e9eef4;
  background-color:#e9eef4;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='1' cy='1' r='1' fill='%230b1220' fill-opacity='0.05'/%3E%3C/svg%3E"),
    radial-gradient(1200px 620px at 92% -10%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 58%),
    radial-gradient(1150px 720px at 14% -16%, color-mix(in srgb, var(--navy) 20%, transparent), transparent 56%),
    linear-gradient(180deg, #eef2f7 0%, #e5eaf1 100%);
  background-repeat:repeat, no-repeat, no-repeat, no-repeat;
  background-size:24px 24px, auto, auto, auto;
  background-attachment:fixed, fixed, fixed, fixed;
}

/* dashboard header treatment */
body.admin .page-title{ font-size:clamp(1.7rem,3.6vw,2.3rem); }
body.admin .adminnav{ gap:8px; }
body.admin .adminnav .btn{ background:var(--card); border:1px solid var(--line);
  box-shadow:var(--shadow-sm); font-weight:600; border-radius:11px; }
body.admin .adminnav .btn:hover{ border-color:var(--accent-line); background:var(--accent-tint); transform:translateY(-2px); }

/* KPI tiles → dark gradient "data cards" */
body.admin .kpi{
  background:linear-gradient(155deg, var(--navy-2), var(--navy));
  border:1px solid rgba(255,255,255,.06);
  color:#eaf1f8; box-shadow:var(--shadow-lg);
}
body.admin .kpi::before{ opacity:.9 !important; }
body.admin .kpi-num{ color:#fff; font-family:var(--display); }
body.admin .kpi-num .cur{ color:color-mix(in srgb, var(--accent) 60%, #fff); }
body.admin .kpi-lab{ color:#aab9cc; text-transform:uppercase; letter-spacing:.1em; font-size:.68rem; font-weight:600; }
body.admin .kpi-icon{ filter:saturate(1.3); opacity:.95; }
body.admin .kpi:hover{ transform:translateY(-4px); box-shadow:0 30px 70px -20px rgba(11,18,32,.6); }
body.admin .kpi--sessions{ background:linear-gradient(155deg,#12233b,#0b1220); }
body.admin .kpi--earnings{ background:linear-gradient(155deg, color-mix(in srgb,var(--accent) 40%, #0b1220), #0b1220); }

/* chart card + accent-gradient bars */
body.admin .chart-card{ background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow); border-radius:var(--radius); }
.bar{ background:linear-gradient(180deg, var(--accent), var(--accent-deep)) !important; border-radius:6px 6px 3px 3px !important;
  box-shadow:0 4px 12px -4px color-mix(in srgb,var(--accent) 55%, transparent); }
.bar-col:hover .bar{ filter:brightness(1.08); }
.chart-controls select{ border-radius:10px; }

/* tips / suggestions */
.tip{ border-radius:14px; box-shadow:var(--shadow-sm); }
.tip.demand{ background:linear-gradient(180deg, var(--accent-tint), #fff); border-color:var(--accent-line); }

/* calendar polish */
.calwrap{ background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow); padding:6px; }
.cal-ev.s-confirmed{ background:linear-gradient(180deg, color-mix(in srgb,var(--accent) 22%, #fff), color-mix(in srgb,var(--accent) 12%, #fff)); border-left-color:var(--accent); }

/* tables */
.tbl tr:not(:first-child):hover td{ background:var(--accent-tint); }

/* ── Site footer — the single front door (customer + owner from one page) ── */
.site-foot{ margin-top:56px; border-top:1px solid var(--line);
  background:color-mix(in srgb, var(--card) 70%, transparent); }
.foot-inner{ max-width:1100px; margin:0 auto; padding:26px 20px 8px;
  display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; }
.foot-brand{ display:inline-flex; align-items:center; gap:9px; font-family:var(--display);
  font-weight:700; color:var(--ink); text-decoration:none; }
.foot-brand .brand-mark{ width:24px; height:21px; color:var(--ink); }
.foot-nav{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.foot-nav a{ color:var(--muted); text-decoration:none; font-weight:500; font-size:.9rem;
  padding:8px 12px; border-radius:10px; border:1px solid transparent;
  transition:color .2s, background .2s, border-color .2s; }
.foot-nav a:hover{ color:var(--ink); background:var(--accent-tint); border-color:var(--accent-line); }
.foot-nav .foot-owner{ color:var(--accent-deep); border-color:var(--accent-line);
  background:var(--accent-tint); font-weight:600; }
.foot-nav .foot-owner:hover{ background:var(--accent-weak); }
.foot-note{ max-width:1100px; margin:0 auto; padding:0 20px 24px; text-align:center;
  color:var(--muted); font-size:.78rem; }

/* ── Scroll-reveal motion ───────────────────────────────────────────────── */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .btn:hover,.pro-card:hover,.svc-card:hover,.time-row:hover,.date-pill:hover,.kpi:hover{ transform:none; }
  html{ scroll-behavior:auto; }
}