/*
 * theme-dark.css
 * ─────────────────────────────────────────────
 * Two jobs:
 *  1. Dark-mode overrides for the handful of spots that used a hardcoded
 *     hex color instead of a --color-* token (so they don't just stay
 *     light-mode-colored when the theme flips).
 *  2. The theme toggle button itself (used in the sidebar footer, mobile
 *     topbar, and the sign-in / sign-up headers).
 *
 * Everything else in the app already reads from --color-* variables
 * defined in global.css, so it re-themes for free — nothing else to touch.
 */

/* ── Theme-switch reveal animation ──
   Disables the browser's default crossfade so our circular clip-path +
   frosted-blur animation (driven from js/theme.js) is what actually shows.
   The new theme sits on top, blurred like a pane of liquid glass, and
   sharpens into focus as the expanding circle clears from the click
   point; the old theme softly defocuses underneath it. */
::view-transition-old(root) {
  animation: none;
}
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
  will-change: clip-path, filter;
}
::view-transition-old(root) {
  will-change: filter, opacity;
}


[data-theme="dark"] {
  /* Dark surfaces want the opposite of light mode's dark sheen — a bright
     white glint reads as light catching glass here, same as it did before
     this was theme-aware. */
  --glass-highlight: rgba(255, 255, 255, 0.45);
  --glass-highlight-soft: rgba(255, 255, 255, 0.20);
  --glass-shine: rgba(255, 255, 255, 0.68);
}

[data-theme="dark"] .sidebar-nav li a.active {
  background: rgba(34, 197, 94, 0.16);
}
[data-theme="dark"] .status-pill--pending {
  color: #FBBF24;
}
[data-theme="dark"] .tx-badge--stockout {
  color: #FB923C;
}
[data-theme="dark"] .skeleton {
  background: linear-gradient(90deg, #262A33 25%, #323844 50%, #262A33 75%);
  background-size: 200% 100%;
}

/* ── Theme toggle button — "Liquid Glass" (iOS-style) ──
   A round pane of frosted, translucent material: backdrop-blur picks up
   whatever is behind it, a soft radial highlight in the upper-left fakes
   a specular reflection, and a hairline rim + layered shadow give it the
   sense of a lens sitting slightly above the surface. */
.theme-toggle-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  backdrop-filter: blur(14px) saturate(180%);
  color: var(--color-text-muted);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.10),
    0 6px 16px rgba(0, 0, 0, 0.08),
    inset 0 1px 1px rgba(255, 255, 255, 0.65),
    inset 0 -1px 1px rgba(0, 0, 0, 0.05);
  transition: background var(--transition), color var(--transition),
              border-color var(--transition), box-shadow var(--transition),
              transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Specular highlight — the "glassy" glint in the corner */
.theme-toggle-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0) 58%);
  pointer-events: none;
}
.theme-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.26);
  color: var(--color-text);
  border-color: rgba(255, 255, 255, 0.55);
  transform: translateY(-1px);
}
.theme-toggle-btn:active {
  transform: scale(0.88);
  transition: transform 0.12s ease;
}
/* Graceful fallback for browsers without backdrop-filter support */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .theme-toggle-btn {
    background: var(--color-surface);
  }
}

[data-theme="dark"] .theme-toggle-btn {
  background: rgba(30, 33, 40, 0.45);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.30),
    0 6px 18px rgba(0, 0, 0, 0.35),
    inset 0 1px 1px rgba(255, 255, 255, 0.08),
    inset 0 -1px 1px rgba(0, 0, 0, 0.25);
}
[data-theme="dark"] .theme-toggle-btn::before {
  background: radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 58%);
}
[data-theme="dark"] .theme-toggle-btn:hover {
  background: rgba(42, 46, 55, 0.6);
  border-color: rgba(255, 255, 255, 0.22);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  [data-theme="dark"] .theme-toggle-btn {
    background: var(--color-surface);
  }
}

/* Placement in the app sidebar footer, next to the sign-out button */
.sidebar-footer .theme-toggle-btn {
  margin-left: auto;
  margin-right: 4px;
}

/* Placement on the mobile topbar (sits opposite the hamburger) —
   same glass material, just sitting directly on the topbar surface. */
.mobile-topbar .theme-toggle-btn {
  margin-left: auto;
}

/* Placement on the sign-in / sign-up screens, which have no sidebar.
   !important here is deliberate: this button must always pin to the
   viewport corner regardless of any other rule that touches position/
   top/right on .theme-toggle-btn elsewhere in the app. */
body.login-page .auth-theme-toggle {
  position: fixed !important;
  top: 16px !important;
  right: 16px !important;
  left: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  z-index: 100;
}