/* ────────────────────────────────────────────────────────────────
   Cross-document page transitions
   On browsers that support it (Chrome / Edge / Safari 18.4+),
   navigations between same-origin pages crossfade automatically
   instead of cutting hard. This makes Boards → Tasks → Customers
   hops (and customer list → customer detail) feel like an SPA
   without us actually building one. Older browsers ignore the
   rule and use the fallback CSS keyframe fade below.
   ──────────────────────────────────────────────────────────────── */
@view-transition {
  navigation: auto;
}
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: .24s;
  animation-timing-function: cubic-bezier(.4, 0, .2, 1);
}

/* Fallback fade-in for browsers without View Transitions support.
   Suppress it when the browser is already running a View Transition
   so we don't double-animate. */
@keyframes bphsPageEnter {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
  body { animation: bphsPageEnter .24s cubic-bezier(.4, 0, .2, 1) both; }
}

/* ────────────────────────────────────────────────────────────────
   User accent color palette. The user picks one in Settings; we
   mirror the choice as `body[data-accent="..."]` (preferences.js)
   and override --blue / --blue-dk / --blue-lt accordingly. Pages
   already use these variables for primary buttons, links, focus
   rings, etc. so the swap propagates automatically.

   --blue-lt is set as an alpha-blended rgba so the same value
   reads as a "light tint" against both light and dark backgrounds.

   Loaded AFTER each page's inline <style> so cascade lets these
   rules win without !important.
   ──────────────────────────────────────────────────────────────── */

body[data-accent="blue"] {
  --blue: #2d7fc6;
  --blue-dk: #1a5fa0;
  --blue-lt: rgba(45, 127, 198, .14);
}
body[data-accent="teal"] {
  --blue: #0d9488;
  --blue-dk: #0f766e;
  --blue-lt: rgba(13, 148, 136, .14);
}
body[data-accent="green"] {
  --blue: #16a34a;
  --blue-dk: #15803d;
  --blue-lt: rgba(22, 163, 74, .14);
}
body[data-accent="orange"] {
  --blue: #ea580c;
  --blue-dk: #c2410c;
  --blue-lt: rgba(234, 88, 12, .14);
}
body[data-accent="purple"] {
  --blue: #7c3aed;
  --blue-dk: #6d28d9;
  --blue-lt: rgba(124, 58, 237, .14);
}
body[data-accent="red"] {
  --blue: #dc2626;
  --blue-dk: #b91c1c;
  --blue-lt: rgba(220, 38, 38, .14);
}
body[data-accent="slate"] {
  --blue: #64748b;
  --blue-dk: #475569;
  --blue-lt: rgba(100, 116, 139, .14);
}

/* ── Settings picker styling ─────────────────────────────────── */
.pref-select {
  font: 600 12px/1 inherit;
  padding: 6px 28px 6px 10px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--panel) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'><path d='M1 1l4 4 4-4' stroke='%23456486' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") right 8px center no-repeat;
  appearance: none; -webkit-appearance: none;
  cursor: pointer; color: var(--text);
}
.pref-select:focus { outline: none; border-color: var(--blue); }

/* Accent swatches — small color circles arranged in a row */
.pref-swatches {
  display: inline-flex; gap: 6px; align-items: center;
}
.pref-swatch {
  width: 22px; height: 22px; border-radius: 50%;
  cursor: pointer; border: 2px solid transparent;
  box-shadow: 0 0 0 1px var(--border);
  transition: transform .12s, box-shadow .15s;
}
.pref-swatch:hover { transform: scale(1.1); }
.pref-swatch.active {
  box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px currentColor;
  transform: scale(1.1);
}
.pref-swatch[data-accent="blue"]   { background: #2d7fc6; color: #2d7fc6; }
.pref-swatch[data-accent="teal"]   { background: #0d9488; color: #0d9488; }
.pref-swatch[data-accent="green"]  { background: #16a34a; color: #16a34a; }
.pref-swatch[data-accent="orange"] { background: #ea580c; color: #ea580c; }
.pref-swatch[data-accent="purple"] { background: #7c3aed; color: #7c3aed; }
.pref-swatch[data-accent="red"]    { background: #dc2626; color: #dc2626; }
.pref-swatch[data-accent="slate"]  { background: #64748b; color: #64748b; }

/* Active Sessions row — current device card + Sign out button */
.session-row {
  display: flex; align-items: center; gap: 8px;
}
.session-current-pill {
  font: 700 10px/1 inherit; padding: 4px 8px;
  background: rgba(27, 143, 90, .15); color: #1b8f5a;
  border-radius: 999px; text-transform: uppercase; letter-spacing: .05em;
}
.session-signout-btn {
  font: 600 12px/1 inherit; padding: 6px 12px;
  background: transparent; color: var(--red, #c0392b);
  border: 1px solid var(--red, #c0392b); border-radius: 7px;
  cursor: pointer;
}
.session-signout-btn:hover { background: var(--red, #c0392b); color: #fff; }

/* ─── Dashboard clock (inline in topbar) ─────────────────────────
   Three modes: 'off' (hidden), 'digital', 'analog'.
   Mode driven by body[data-clock="..."] which preferences.js sets
   from the `bphs_clock` localStorage key.

   Digital: y2k red-LED alarm-clock vibe — black panel, red 7-segment
            digits with glow, per-digit flip animation on change.
   Analog : numbered face (1–12 around the rim), tiny hour/min/sec
            hands, blue second hand for color contrast.
   ──────────────────────────────────────────────────────────────── */

/* DSEG7 — classic 7-segment LCD/LED font (free, served from jsdelivr).
   Falls back to a heavy monospace stack if the network is offline. */
@font-face {
  font-family: 'DSEG7';
  src: url('https://cdn.jsdelivr.net/gh/keshikan/DSEG@v0.46/fonts/DSEG7-Classic/DSEG7Classic-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

.app-clock {
  display: none;
  user-select: none;
}
body[data-clock="digital"] .app-clock,
body[data-clock="analog"]  .app-clock { display: inline-flex; }

/* ─── Digital clock — 2000's red LED ─── */
.app-clock[data-mode="digital"] {
  height: 36px;
  padding: 0 10px 0 12px;
  background: #0a0a0a;
  border: 1px solid #1c1c1c;
  border-radius: 7px;
  box-shadow:
    inset 0 0 8px rgba(0, 0, 0, .9),
    inset 0 0 1px rgba(255, 60, 60, .35),
    0 0 0 1px rgba(255, 40, 40, .15);
  align-items: center; gap: 1px;
  perspective: 220px; /* gives the digit flip some depth */
  justify-content: center;
}
.app-clock[data-mode="digital"] .led-digit,
.app-clock[data-mode="digital"] .led-colon {
  font-family: 'DSEG7', ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  font-weight: 700;
  font-size: 18px;
  line-height: 36px;
  color: #ff2a2a;
  text-shadow:
    0 0 4px rgba(255, 50, 50, .95),
    0 0 9px rgba(255, 30, 30, .65),
    0 0 16px rgba(255, 0, 0, .35);
}
.app-clock[data-mode="digital"] .led-digit {
  display: inline-block;
  width: 12px; text-align: center;
  transform-style: preserve-3d;
}
.app-clock[data-mode="digital"] .led-colon {
  width: 6px; text-align: center;
  animation: led-colon-blink 1s steps(2, start) infinite;
}
@keyframes led-colon-blink {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: .25; }
}
.app-clock[data-mode="digital"] .led-period {
  margin-left: 6px;
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  font-size: 8px; font-weight: 800;
  letter-spacing: .12em;
  color: #ff5a3a;
  text-shadow: 0 0 4px rgba(255, 60, 60, .65);
  line-height: 36px;
}

/* Per-digit flip animation: 3D rotateX on the digit element. JS swaps
   textContent at the midpoint (250ms) so the new value appears as the
   "card" lands. Backface-hidden so the edge looks crisp. */
.app-clock[data-mode="digital"] .led-digit.flipping {
  animation: led-flip .5s cubic-bezier(.4, 0, .2, 1);
  backface-visibility: hidden;
}
@keyframes led-flip {
  0%     { transform: rotateX(0deg);  filter: brightness(1); }
  50%    { transform: rotateX(-90deg); filter: brightness(.4); }
  50.01% { transform: rotateX(90deg);  filter: brightness(.4); }
  100%   { transform: rotateX(0deg);  filter: brightness(1); }
}

/* ─── Analog clock — numbered face ─── */
.app-clock[data-mode="analog"] {
  width: 44px; height: 44px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 38%, #fff 0%, var(--panel, #fff) 60%, #f0f4fa 100%);
  border: 1px solid var(--border, #dde6f0);
  box-shadow: inset 0 0 4px rgba(20, 35, 60, .08);
  position: relative;
}
.app-clock[data-mode="analog"] .clock-num {
  position: absolute;
  font: 700 6px/1 ui-sans-serif, system-ui, sans-serif;
  color: var(--text, #1a2e4a);
  transform: translate(-50%, -50%);
  pointer-events: none;
  letter-spacing: -.02em;
}
.app-clock[data-mode="analog"] .clock-hand {
  position: absolute; left: 50%; top: 50%;
  background: var(--text, #1a2e4a);
  border-radius: 1px;
  transform-origin: 50% 100%;
  z-index: 2;
}
.app-clock[data-mode="analog"] .clock-hand-hour {
  width: 2px; height: 11px;
  margin-left: -1px; margin-top: -11px;
}
.app-clock[data-mode="analog"] .clock-hand-min {
  width: 1.5px; height: 16px;
  margin-left: -.75px; margin-top: -16px;
}
.app-clock[data-mode="analog"] .clock-hand-sec {
  width: 1px; height: 17px;
  margin-left: -.5px; margin-top: -17px;
  background: var(--blue, #2d7fc6);
  transition: transform .08s cubic-bezier(.4, 2, .6, 1);
}
.app-clock[data-mode="analog"] .clock-hub {
  position: absolute; left: 50%; top: 50%;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--blue, #2d7fc6);
  margin-left: -2px; margin-top: -2px;
  z-index: 3;
}