/* ─────────────────────────────────────────────────────────────────────────
   Pawtal HQ — PREMIUM edition theme: CARBON base + PLATINUM accents.
   Injected by lib/app.php ONLY when edition=premium, so the standard
   self-serve (blue) app is never affected. Uses !important to override the
   pages' inline styles cleanly without fighting specificity.
   Traffic-light booking strips (.bar.pay*, .appt, .pay dots) are left ALONE.
   ───────────────────────────────────────────────────────────────────────── */

:root{
  --brand:#c7d2dd; --brand-dk:#aab6c2; --brand-soft:#212a33; --brand-line:#3a4651;
  --ink:#e9eef4; --muted:#9aa7b4; --faint:#6f7d8b;
  --bg:#0f1318; --card:#191f27; --line:#2b333d; --line2:#212932; --card-soft:#141a21;
}

/* ── base canvas: FLAT carbon (a subtle gradient caused visible banding) ── */
html, body{ background:#11151b !important; color:#e9eef4 !important; }

/* ── surfaces that were white / very light ─────────────────────────────── */
.card, .side, .modal .box, .csdd, .mcell, .petpick, .ecard, .dl, .tb,
.stat, .scroll, .prog, .step, .invside .card, .seg button.on{
  background:#191f27 !important; border-color:#2b333d !important; color:#e9eef4 !important;
}
.card{ box-shadow:0 1px 12px rgba(0,0,0,.45) !important; }
.mcell.out{ background:#11171e !important; border-color:#1b212a !important; }
.topbar{ background:rgba(16,21,28,.85) !important; border-bottom-color:#2b333d !important; }
.codekey{ background:#11161d !important; }
.invprev{ background:#13191f !important; border-color:#2b333d !important; }
.biz img{ background:#11161d !important; border-color:#2b333d !important; }
.maint{ background:#1b2230 !important; }

/* ── text colours ──────────────────────────────────────────────────────── */
.muted{ color:#9aa7b4 !important; } .faint, .biz small, .card-h .sub{ color:#73818f !important; }
h1,h2,h3,.biz b,.itots .r.g,.ptot .r.g,.pli-d b{ color:#eef3f8 !important; }

/* ── inputs / fields (were #fff / #fdfaf7) ─────────────────────────────── */
input, select, textarea,
.field input, .field select, .field textarea,
.iline input, .crow input, .ecard input, .ecard select,
.invrange input[type=date], .search input, .toolbar input, .toolbar select{
  background:#10161d !important; color:#e9eef4 !important; border-color:#2b333d !important;
}
input:focus, select:focus, textarea:focus{ border-color:#c7d2dd !important; background:#161d25 !important; }
::placeholder{ color:#5d6b78 !important; }

/* ── PLATINUM primary buttons: light brushed-metal gradient + dark text ─── */
.btn, .gen, .addbtn, .gobtn, .addrange, .invrange .addrange,
.mf .save, .rptact .save, .dl.send, .nav button.on, .pg button.on, .tb.on,
.gobtn.green, button.gen{
  background:linear-gradient(135deg,#e8edf2 0%, #c0cad4 45%, #a9b5c0 100%) !important;
  color:#13181e !important; border-color:transparent !important;
  box-shadow:0 1px 2px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.5) !important;
}
.btn:hover, .gen:hover, .addbtn:hover, .gobtn:hover, .mf .save:hover{ filter:brightness(1.05) !important; }
/* login / signup / 2fa card pages use a bare <button> as the submit */
body > .card button, body > .card .btn{
  background:linear-gradient(135deg,#e8edf2 0%, #c0cad4 45%, #a9b5c0 100%) !important;
  color:#13181e !important; border:0 !important;
}
.btn.ghost, .gobtn.ghost{ background:#1b222b !important; color:#aab6c2 !important; border:1.5px solid #2b333d !important; }

/* ── nav / sidebar ─────────────────────────────────────────────────────── */
.nav button{ color:#9aa7b4 !important; }
.nav button:hover, .side-foot a:hover{ background:#212a33 !important; color:#dfe6ee !important; }
.nav button.on .ct{ background:rgba(0,0,0,.22) !important; color:#13181e !important; }
.side-foot a{ color:#9aa7b4 !important; }
.navbtn, .tbtn, .pg button, .seg button{ background:#161d25 !important; color:#9aa7b4 !important; border-color:#2b333d !important; }

/* ── logo mark: dark carbon chip with a BRUSHED-PLATINUM metallic paw ───── */
.mark, .biz .ph{
  background:linear-gradient(135deg,#2c3540 0%, #161b22 100%) !important;
}
.mark{ box-shadow:inset 0 1px 0 rgba(255,255,255,.16), inset 0 0 0 1px #3a4651, 0 2px 7px rgba(0,0,0,.55) !important; }
/* metallic paw — uses the <linearGradient id="pawMetal"> defined in the logo SVG */
.mark svg{ fill:url(#pawMetal) !important; }

/* ── chips / pills (keep semantics, just darken neutrals) ───────────────── */
.chip.y{ background:#212a33 !important; color:#cdd6df !important; }
.chip.n{ background:#212932 !important; color:#9aa7b4 !important; }
.pill.lic{ background:#212a33 !important; color:#cdd6df !important; border-color:#3a4651 !important; }
.tb.off{ background:#141a21 !important; color:#6f7d8b !important; }

/* ── helper boxes on the card pages (ui.php .ok/.note/.key) ────────────── */
.ok, .note, .key, .codes span{ background:#13191f !important; border-color:#2b333d !important; color:#cdd6df !important; }
.err{ background:#2a1714 !important; border-color:#5b2b22 !important; color:#f0a99a !important; }

/* ── Trial pill / lock banner / warnings: OFF the warm beige+brown → silver +
   cool dark text (Phil: NO beiges/browns in Premium) ───────────────────────── */
.pill.trial{ background:linear-gradient(135deg,#eef2f6,#c8d2dc) !important; color:#1b2430 !important; border:1px solid #aab6c2 !important; }
.lockbanner{ background:linear-gradient(180deg,#eef1f5,#dbe2e9) !important; border:1px solid #c2ccd6 !important; color:#1b2430 !important; }
.lockbanner b, .lockbanner a{ color:#1b2430 !important; }
.warn{ background:#1b222c !important; border:1px solid #3a4651 !important; border-left:3px solid #c7d2dd !important; color:#cdd6df !important; }

/* ── admin.php master bar (.bar.adminbar): match the carbon theme — it was a
   white bar with light-on-white title, faint links, and an invisible paw
   (the admin paw <svg> has no #pawMetal gradient). Scoped to .adminbar so the
   traffic-light booking strips (.bar.payX) are never affected. ─────────────── */
.adminbar{ background:#191f27 !important; border-bottom-color:#2b333d !important; }
.adminbar b{ color:#eef3f8 !important; }
.adminbar small{ color:#9aa7b4 !important; }
.adminbar .mark svg{ fill:#dfe7ee !important; }
.adminbar .lnk{ color:#cdd6df !important; border-color:#3a4651 !important; }
.adminbar .lnk:hover{ border-color:#c7d2dd !important; color:#fff !important; }

/* Deliberately NOT touched: .bar.paygreen/.payyellow/.payred (traffic-light
   booking strips), .appt service chips, .pay status dots — these stay so the
   PAYMENT status colours keep their meaning. */