/* Two dark themes for every EPOS Now concept page.
   :root.dark          Dark blue: the original deep-navy dark theme, defined in each page.
   :root.dark.black    Black: true-black page, near-black cards, neutral greys. Only surfaces change; brand blue and status colours stay. */

:root.dark.black {
  --white: #0C0C0E; --mist: #000000; --hover: #151518; --hair: #26262B; --hair-2: #18181B;
  --navy: #2A2A30; --blue-tint: #0E1C36; --topbar: rgba(0, 0, 0, .82);
  --slate: #A1A1AA; --slate-2: #71717A;
  --scrim: rgba(0, 0, 0, .7);
  --sh: 0 1px 2px rgba(0, 0, 0, .5), 0 10px 28px -18px rgba(0, 0, 0, .9);
  --sh-2: 0 2px 6px rgba(0, 0, 0, .5), 0 40px 80px -36px rgba(0, 0, 0, 1);
  /* iPhone app (iOS tokens): pure black, as iOS does */
  --ios-bg: #000000; --surface: #1C1C1E; --navbar: rgba(0, 0, 0, .78); --tabbar: rgba(22, 22, 24, .86); --meter: #2C2C2E; --swoff: #39393D;
}
:root.dark.black body { background-color: #000 }

/* Dark blue in the iPhone app: navy surfaces instead of iOS black, so the two dark themes differ there too. */
:root.dark:not(.black) {
  --ios-bg: #0A1322; --surface: #111C2E; --navbar: rgba(10, 19, 34, .82); --tabbar: rgba(17, 28, 46, .88); --meter: #22324A; --swoff: #2B3D5A;
}

/* Navy that pages hard-code for dark mode, made neutral in Black. */
:root.dark.black .brief { background: linear-gradient(120deg, #0C0C0E 0%, #12141A 100%) }
:root.dark.black .floor { background: repeating-linear-gradient(45deg, #08080A 0 10px, #0C0C0E 10px 20px) }
:root.dark.black .sh.n { background: #26262B }
:root.dark.black .gi[aria-current="true"] { background: #151518 }
:root.dark.black .signin { background: radial-gradient(60% 50% at 10% 0%, rgba(59, 123, 255, .12), transparent 70%), #000 }

/* The theme button shows the current theme and opens the picker. */
.theme-cycle-label { margin-left: 6px }
.epos-theme-menu {
  position: fixed; z-index: 2147483000; width: 272px; padding: 6px; border-radius: 16px;
  background: var(--white, #fff); color: var(--ink, #0D223E); border: 1px solid var(--hair, #E2E7F0);
  box-shadow: 0 2px 6px rgba(13, 34, 62, .08), 0 24px 48px -16px rgba(13, 34, 62, .35);
  font: 14px/1.35 "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; animation: epos-tm .16s ease both;
}
:root.dark .epos-theme-menu { background: var(--white, #111C2E); color: var(--ink, #E8EEF8); box-shadow: 0 24px 48px -16px rgba(0, 0, 0, .8) }
@keyframes epos-tm { from { opacity: 0; transform: translateY(-4px) } to { opacity: 1; transform: none } }
.epos-theme-menu .h { padding: 8px 10px 6px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--slate-2, #7A8AA3) }
.epos-theme-menu button { display: grid; grid-template-columns: 30px 1fr 18px; gap: 12px; align-items: center; width: 100%; padding: 9px 10px; border: 0; border-radius: 11px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer }
.epos-theme-menu button:hover, .epos-theme-menu button:focus-visible { background: var(--hover, #F2F5FB); outline: none }
.epos-theme-menu button[aria-checked="true"] { background: var(--blue-tint, #EAF1FF) }
.epos-theme-menu b { display: block; font-weight: 600 }
.epos-theme-menu small { display: block; font-size: 12px; color: var(--slate, #4A5F7E) }
.epos-theme-menu .ck { color: var(--blue, #014AD9); display: grid; place-items: center }
.epos-sw { display: block; border-radius: 6px }