/*!
 * PlanB SPC, brand layer shared by every PlanB system.
 * © PlanB SPC (الخطة الأفضل ش.ش.و). All rights reserved.
 *
 * Copy brand/ into the app as  <app>/brand/  and link this file after the app's own CSS.
 * It only defines the font, the brand tokens and the .planb-* components; it never restyles the app.
 */
@font-face {
  font-family: "Dubai";
  src: url("fonts/Dubai-Regular.woff2") format("woff2"), url("fonts/Dubai-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --planb-green: #76b94f;        /* battery outline */
  --planb-green-deep: #0d8437;   /* charged cell */
  --planb-forest: #164a23;       /* cells */
  --planb-ink: #141816;          /* B on light backgrounds */
  --planb-night: #0b0d0c;        /* logo background */
  --planb-font: "Dubai", "IBM Plex Sans Arabic", -apple-system, "Segoe UI", Tahoma, sans-serif;
}

/* ---------- copyright footer (required in every system) ---------- */
.planb-footer {
  display: flex; align-items: center; justify-content: center; gap: .6em; flex-wrap: wrap;
  padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
  font: 400 12.5px/1.6 var(--planb-font);
  color: var(--planb-footer-fg, rgba(127, 135, 131, .95));
  text-align: center;
}
.planb-footer a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: .45em; }
.planb-footer a:hover { color: var(--planb-green); }
.planb-footer img, .planb-footer svg { height: 18px; width: auto; vertical-align: middle; }
.planb-footer .planb-sep { opacity: .45; }

/* ---------- brand chip: "a PlanB SPC system" with the mark ---------- */
.planb-chip {
  display: inline-flex; align-items: center; gap: .5em;
  font: 400 12px/1 var(--planb-font); color: inherit; opacity: .8; text-decoration: none;
}
.planb-chip img { height: 16px; width: auto; vertical-align: middle; }

/* ---------- logo helpers ---------- */
.planb-logo { display: block; height: auto; }
.planb-logo--sm { width: 72px; } .planb-logo--md { width: 120px; } .planb-logo--lg { width: 180px; }

/* show the logo variant that suits the current theme: follows the OS, and data-theme on <html> when the app sets it.
   Mark both <img> with the classes; components above never set display on images, so these rules always win. */
img.planb-on-light, svg.planb-on-light { display: none; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) img.planb-on-dark, :root:not([data-theme="dark"]) svg.planb-on-dark { display: none; }
  :root:not([data-theme="dark"]) img.planb-on-light, :root:not([data-theme="dark"]) svg.planb-on-light { display: inline-block; }
}
:root[data-theme="light"] img.planb-on-dark, :root[data-theme="light"] svg.planb-on-dark { display: none; }
:root[data-theme="light"] img.planb-on-light, :root[data-theme="light"] svg.planb-on-light { display: inline-block; }

/* ---------- language switch (AR / EN) ---------- */
.planb-lang {
  display: inline-flex; border: 1px solid currentColor; border-radius: 999px; overflow: hidden;
  font: 400 12px/1 var(--planb-font); opacity: .85;
}
.planb-lang button {
  all: unset; cursor: pointer; padding: 6px 11px; min-width: 2.2em; text-align: center;
}
.planb-lang button[aria-pressed="true"],
.lang-ar .planb-lang [data-lang="ar"], .lang-en .planb-lang [data-lang="en"] { background: var(--planb-green); color: #0b0d0c; }
.planb-lang button:focus-visible { outline: 2px solid var(--planb-green); outline-offset: -2px; }