/* PEXTH visual identity from the customer, partner and platform PDF decks.
   Shared by all four UIs. Authored source: _shared/ui; sync with sync-shared.php. */
:root {
  --brand-900: #041522;
  --brand-800: #083041;
  --brand-700: #08798a;
  --brand-600: #0793a5;
  --brand-500: #16a9b7;
  --brand-100: #d2f0f0;
  --brand-50: #edf9f8;
  --primary: #08798a;
  --primary-hover: #065d6c;
  --primary-soft: #e4f4f3;
  --bg: #f3f7f7;
  --surface-2: #eef4f5;
  --surface-3: #e2ebed;
  --border: #d8e4e7;
  --border-strong: #b9cdd2;
  --text: #102b39;
  --text-2: #4b6572;
  --text-3: #627c87;
  --badge-success-ink: #17683d;
  --badge-warning-ink: #855300;
  --badge-danger-ink: #b62332;
  /* ink for text/icons on a solid var(--primary) fill: white on the light-theme teal, dark ink on the
     light dark-theme teal (#63ddd9 — white there is ~1.6:1) */
  --on-primary: #fff;
  --focus: 0 0 0 3px rgba(17,167,180,.4);
  --nav-h: 78px;
  --r: 9px;
  --r-lg: 12px;
  --r-xl: 18px;
  --shadow-2: 0 8px 24px -12px rgba(7,35,47,.2);
  --shadow-3: 0 18px 48px -20px rgba(0,16,28,.34);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #03131f; --surface: #091f2e; --surface-2: #0d2838; --surface-3: #163647;
    --border: #203c4c; --border-strong: #365663;
    --text: #ecf6f8; --text-2: #b3c9d2; --text-3: #8faab8;
    --primary: #63ddd9; --primary-hover: #9aeeea; --primary-soft: #0a383f; --on-primary: #04212a;
    --info-soft: #0d303e; --focus: 0 0 0 3px rgba(99,221,217,.42);
    --badge-success-ink: #88e3b0; --badge-warning-ink: #f3cd79; --badge-danger-ink: #ffacb4;
  }
}
:root[data-theme="dark"] {
  --bg: #03131f; --surface: #091f2e; --surface-2: #0d2838; --surface-3: #163647;
  --border: #203c4c; --border-strong: #365663;
  --text: #ecf6f8; --text-2: #b3c9d2; --text-3: #8faab8;
  --primary: #63ddd9; --primary-hover: #9aeeea; --primary-soft: #0a383f; --on-primary: #04212a;
  --info-soft: #0d303e; --focus: 0 0 0 3px rgba(99,221,217,.42);
  --badge-success-ink: #88e3b0; --badge-warning-ink: #f3cd79; --badge-danger-ink: #ffacb4;
}
.badge-success,.badge-verified { color: var(--badge-success-ink); }
.badge-warning { color: var(--badge-warning-ink); }
.badge-danger { color: var(--badge-danger-ink); }
/* Status TEXT uses the per-theme inks too: the dark blocks only darken the *-soft backgrounds, so the light-theme
   --danger/--warning/--grow-600 inks fall to ~3:1 there. Those three stay as-is for FILLS behind white text
   (.btn-danger, .toast.err, .toast.ok). */
.alert-success { color: var(--badge-success-ink); }
.alert-warning { color: var(--badge-warning-ink); }
.alert-danger,.field-error,.label .req { color: var(--badge-danger-ink); }
.stat-delta.up { color: var(--badge-success-ink); }
.stat-delta.down { color: var(--badge-danger-ink); }
.btn { font-weight: 600; transition: background .18s, border-color .18s, box-shadow .18s; }
.btn-primary { color: #fff; background: #08798a; border-color: #08798a; }
.btn-primary:hover { color: #fff; background: #066473; border-color: #066473; }
.btn-accent { color: #302206; background: linear-gradient(110deg,#efd889,#f2c34b); border-color: #e6b542; }
.btn-accent:hover { color: #241a04; background: #f6d575; border-color: #f6d575; }
.input,.select,.textarea { border-radius: 7px; }
.input:focus,.select:focus,.textarea:focus { border-color: var(--primary); }
.card { box-shadow: 0 3px 16px -12px rgba(0,22,34,.25); }

/* The transparent original logo is framed in CSS, never re-typeset. */
.brand .pexth-wordmark { display: block; flex: none; position: relative; width: 142px; height: 43px; overflow: hidden; }
.pexth-wordmark img { position: absolute; width: 142px; max-width: none; height: auto; top: -4px; left: 0; }
.brand:has(.pexth-wordmark) { gap: 0; }
.nav { color: #e9f5f7; background: #041522; border-bottom: 1px solid #214353; box-shadow: none; }
.nav .container { gap: 20px; }
.nav .nav-links { gap: 2px; }
.nav-links .nav-prefs { display: none; }
.nav-links .nav-mobile-login { display: none; }
.nav .nav-links a { color: #c2d6df; font-size: .82rem; border-radius: 0; padding: 14px 9px; border-bottom: 2px solid transparent; }
.nav .nav-links a:hover,.nav .nav-links a[aria-current="page"] { color: #72e2db; background: transparent; border-bottom-color: #57d5ce; text-decoration: none; }
.nav .btn-ghost { color: #d7e8ed; }
.nav .btn-ghost:hover { background: #12313e; }
.nav .nav-auth > .btn-primary { background: transparent; border-color: #4ac6c5; color: #8be3df; }
.nav .nav-auth > .btn-primary:hover { background: #123b45; }
.nav .prefs-select { background: #0d2836; color: #d9edef; border-color: #294955; max-width: 110px; }
.nav .prefs-theme { background: #0d2836; border-color: #294955; color: #a2eee5; }
.nav .prefs-theme:hover { background: #1d4550; border-color: #4ac6c5; }
.nav .menu-panel { color: var(--text); }
.nav-auth { min-width: 0; }
.footer { background: #02101a url('/assets/img/pexth-energy-horizon.webp') center bottom / cover; color: #d7e7ed; border-top: 1px solid #20404d; }
.footer-grid { gap: 48px; }
.footer .brand { min-height: 48px; }
.footer a { color: #d7e7ed; }
.footer a:hover { color: #6ddcd4; }
.footer-lead,.footer-contact { color: #a7c0cb; }
.footer h4 { color: #fff; font-size: .93rem; }

/* Account forms follow the device layouts from customer p6 / partner p7. */
.auth-shell { grid-template-columns: minmax(0,1.06fr) minmax(0,1fr); background: var(--bg); }
.auth-aside { padding: clamp(32px,4vw,64px); background: linear-gradient(180deg,rgba(2,16,28,.08),rgba(2,16,28,.48)),url('/assets/img/pexth-earth.webp') center / cover; }
.auth-aside::after { display: none; }
.auth-aside .brand .pexth-wordmark { width: 200px; height: 62px; }
.auth-aside .pexth-wordmark img { width: 200px; }
.auth-aside-body { margin-block: 70px; padding: 30px; border-left: 2px solid #5bd5cc; border-radius: 0 16px 16px 0; background: rgba(3,20,34,.8); backdrop-filter: blur(8px); }
.auth-headline { font-size: clamp(1.75rem,2.8vw,2.7rem); font-weight: 600; }
.auth-tagline { font-size: .63rem; letter-spacing: .17em; }
.auth-props { gap: 18px; }
.auth-props strong { font-size: .94rem; }
.auth-props span { font-size: .83rem; }
.auth-prop-ico { border: 1px solid #315d6c; background: #0e3442; color: #69d9d1; }
.auth-aside-foot { max-width: 410px; color: #afc7d1; }
.auth-main { padding: 44px; }
.auth-card { width: 100%; max-width: 470px; padding: 32px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-3); }
.auth-top { margin-bottom: 28px; }
.auth-title { font-weight: 600; }
.auth-form .btn-primary { background: linear-gradient(100deg,#126a80,#127d86); border-color: transparent; color: #fff; }
.auth-form .btn-primary:hover { background: #117b8d; }
.auth-mobile-brand { background: #041522; border-radius: 6px; padding: 6px 12px; }

/* Portal navigation stays dark like the phone and tablet views in the deck. */
.sidebar { background: #041826; border-color: #213f4e; }
.sidebar .brand { color: #fff; padding-block: 10px 25px; }
.sidebar .side-link { color: #adc7d2; border: 1px solid transparent; }
.sidebar .side-link:hover { color: #e6ffff; background: #0d2d3e; }
.sidebar .side-link[aria-current="page"],.sidebar .side-link.active { background: #0b3c49; border-color: #266470; color: #80e3df; }
.sidebar .side-group,.sidebar .side-help,.sidebar .side-foot { color: #8aa9b8; }
.sidebar .side-help a { color: #86d5d6; }
.sidebar .side-close { color: #d2e9ef; }
.sidebar .side-prefs { margin: 8px 0; }
.sidebar .side-prefs .prefs-select { color: #d7e8ed; background-color: #102c3b; border-color: #315464; }
.sidebar .side-prefs .prefs-theme { background: #102c3b; border-color: #315464; color: #a2eee5; }
.sidebar .side-prefs .prefs-theme:hover { background: #23606a; border-color: #4ac6c5; }
.app-top { border-bottom-color: var(--border); box-shadow: 0 2px 12px -9px #001925; }
.page-head h1 { font-weight: 600; }
.stat { border-color: var(--border); box-shadow: none; }
.stat-value { color: var(--text); }
.pager button[aria-current="page"] { background: #08798a; border-color: #08798a; color: #fff; }

@media (max-width: 1180px) {
  .nav-links.open { background: #061d2b; border-color: #294855; }
  .nav .nav-links a { padding: 12px 8px; }
  .nav-links .nav-prefs { display: flex; padding: 12px 8px; }
}
@media (max-width: 900px) {
  .auth-shell { grid-template-columns: 1fr; }
  .auth-main { min-height: 100svh; background: linear-gradient(180deg,rgba(3,19,31,.06),rgba(3,19,31,.35)),url('/assets/img/pexth-solar-panels.webp') center / cover; padding: 32px 20px; }
  .auth-card { padding: 26px; }
  .auth-top { flex-wrap: wrap; justify-content: space-between; gap: 16px; }
  .auth-mobile-brand { display: flex; }
}
@media (max-width: 520px) {
  :root { --nav-h: 68px; }
  .nav .container { gap: 8px; }
  .brand .pexth-wordmark { width: 114px; height: 35px; }
  .pexth-wordmark img { width: 114px; top: -3px; }
  .nav .nav-actions { gap: 6px; }
  .nav-prefs-desktop { display: none; }
  .nav-links .nav-mobile-login { display: block; }
  .app-top .top-title { display: none; }
  .nav .btn-sm { padding-inline: 10px; }
  .auth-main { padding: 22px 14px; }
  .auth-card { padding: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn { transition: none; }
}