/* ============================================================
   EEIS — DESIGN SYSTEM LAYER (additive, non-breaking)
   Loaded AFTER style.css. Extends the existing token set with
   motion, elevation, and native-app interaction polish without
   renaming or removing any existing variable/class.
   Pilot pass — applied globally (shared components) plus the
   Equipment (main) screen. Reviewed before rolling to remaining
   screens.
   ============================================================ */

:root {
  /* ── Motion ─────────────────────────────────────────────── */
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
  --ease-standard: cubic-bezier(.2, 0, 0, 1);
  --ease-decel:     cubic-bezier(0, 0, .2, 1);
  --ease-accel:     cubic-bezier(.3, 0, 1, 1);
  --ease-spring:    cubic-bezier(.34, 1.3, .64, 1);

  /* ── Elevation (native Material-like scale, tuned to the light
     palette's navy-tinted shadow formula — see --shadow-card/-raised
     in rebrand.css, the canonical token source) */
  --e1: 0 1px 2px rgba(47,76,101,.05), 0 1px 3px rgba(47,76,101,.04);
  --e2: 0 2px 6px rgba(47,76,101,.06), 0 1px 2px rgba(47,76,101,.05);
  --e3: 0 6px 16px rgba(47,76,101,.08), 0 2px 4px rgba(47,76,101,.05);
  --e4: 0 10px 28px rgba(47,76,101,.10), 0 4px 8px rgba(47,76,101,.06);
  --e5: 0 18px 40px rgba(47,76,101,.14), 0 6px 12px rgba(47,76,101,.08);

  /* ── Extended type scale (headings/overline on top of --fs-*) */
  --fs-title: 20px;
  --fs-display: 26px;
  --lh-tight: 1.2;
  --lh-normal: 1.5;
  --tracking-tight: -.01em;
  --tracking-wide: .06em;
}

/* ── Breakpoint convention ──────────────────────────────────
   CSS custom properties can't be substituted into @media conditions,
   so this is documentation, not enforced by the cascade:
     - 768px (max-width) / 769px (min-width) is the primary phone↔desktop
       split (used by rebrand.css's .app-sidebar/.app-fab logic and most
       "layout" files) — always pair max:768 with min:769, never 767.
     - 480px is the secondary "small phone" split, used both as
       max-width and min-width across several files (an intentional
       touching boundary, not a gap — do not offset one side to 479).
     - 600px is used the same way as 480px (touching max/min pair).
   A few files define their own bespoke mid-range breakpoints for a
   single feature (e.g. dashboard-layout.css's 1023px "no sidebar rail
   below desktop width" mode, core-details-layout.css's 720–1079px
   detail-aside range) — these are deliberate, documented, and NOT
   drift from the above; don't "normalize" them without checking the
   surrounding comment first, they were verified during a full audit.
   ─────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
  }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Screen stacking hard guarantee ───────────────────────── */
/* Defensive net: whatever else the (very large) stylesheet does
   in any breakpoint/state combination, a non-active screen must
   never be able to paint on top of the active one. This has been
   observed in production (login screen ghosted behind another
   screen) even after removing the opacity animation that first
   caused it — so this rule removes any possibility of it being a
   CSS specificity/override issue, independent of root cause. */
.screen:not(.active) {
  display: none !important;
}

/* ── Screen transitions ───────────────────────────────────── */
/* NOTE: a full-screen opacity/transform animation on `.screen.active`
   was tried here and reverted — on real devices (PWA, tab backgrounding,
   mobile browser throttling) it could get stuck mid-animation, leaving
   a screen frozen at partial opacity on top of the next one (looked like
   a ghosted login screen stuck over the app). Card-level entrance
   animations below are scoped to small elements, so a stuck frame there
   is harmless — full-screen containers are left instant/opaque. */

/* ── List / card entrance ─────────────────────────────────── */
@keyframes ds-card-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.pg-list-row,
.tool-card,
.wh-product-card {
  animation: ds-card-in var(--dur-base) var(--ease-decel) both;
}

/* ── Elevated, springier interaction feedback ─────────────── */
.pg-list-row,
.tool-card {
  transition:
    box-shadow var(--dur-base) var(--ease-standard),
    transform  var(--dur-fast) var(--ease-standard),
    background var(--dur-fast) var(--ease-standard);
  box-shadow: var(--e1);
}

.pg-list-row:hover,
.tool-card:hover {
  box-shadow: var(--e2);
}

.pg-list-row:active,
.tool-card:active {
  transform: scale(.98);
  transition-duration: var(--dur-fast);
}

/* ── FAB: native elevation + press feedback ───────────────── */
.app-fab {
  transition: box-shadow var(--dur-base) var(--ease-standard),
              transform  var(--dur-fast) var(--ease-spring);
  box-shadow: var(--e4);
}

.app-fab:hover  { box-shadow: var(--e5); }
.app-fab:active { transform: scale(.94); }

/* ── Buttons: subtle native press ─────────────────────────── */
.btn-icon,
button.pg-tab-btn,
.rp-tab {
  transition: transform var(--dur-fast) var(--ease-standard),
              background var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}

.btn-icon:active {
  transform: scale(.90);
}

/* ── Skeleton loading (utility — opt-in via class="skeleton") */
.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--clr-surface-2);
  border-radius: var(--r-sm);
  color: transparent !important;
}

.skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);
  animation: ds-shimmer 1.4s ease-in-out infinite;
}

@keyframes ds-shimmer {
  to { transform: translateX(100%); }
}

/* ── Accessible focus ring (keyboard users only) ──────────── */
:focus-visible {
  outline: 2px solid var(--clr-primary-lt);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

/* ── Login screen: premium polish (small, contained elements
   only — no full-screen opacity animation, see note above) ── */
.login-orb {
  display: block;
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: .35;
  pointer-events: none;
  z-index: 0;
}

.login-orb-1 {
  width: 260px;
  height: 260px;
  top: -80px;
  right: -60px;
  background: radial-gradient(circle, var(--clr-primary), transparent 70%);
  animation: ds-orb-float 14s var(--ease-standard) infinite alternate;
}

.login-orb-2 {
  width: 220px;
  height: 220px;
  bottom: -70px;
  left: -60px;
  background: radial-gradient(circle, var(--clr-info), transparent 70%);
  animation: ds-orb-float 18s var(--ease-standard) infinite alternate-reverse;
}

@keyframes ds-orb-float {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(-16px, 18px) scale(1.08); }
}

.login-container {
  z-index: 1;
  box-shadow: var(--e5);
  background: var(--ui-panel-bg, var(--clr-surface));
  backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid var(--ui-border-soft, var(--clr-border));
}

.login-logo {
  box-shadow: var(--e3);
}

.login-input-wrap input {
  transition: border-color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard);
}

.login-btn {
  position: relative;
  overflow: hidden;
  transition: box-shadow var(--dur-base) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard);
  box-shadow: var(--e2);
}

.login-btn:hover  { box-shadow: var(--e3); }
.login-btn:active { transform: scale(.98); }

/* ── Shared component polish (applies app-wide via existing
   shared classes — no markup/JS changes needed per screen) ── */
.app-header {
  transition: box-shadow var(--dur-base) var(--ease-standard);
}

.detail-section,
.profile-info-card,
.profile-password-card,
.profile-admin-card {
  transition: box-shadow var(--dur-base) var(--ease-standard);
  box-shadow: var(--e1);
}

.btn {
  transition: transform var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard),
              filter var(--dur-fast) var(--ease-standard);
}

.btn-primary,
.btn-secondary {
  box-shadow: var(--e1);
}

.btn:hover  { filter: brightness(1.06); box-shadow: var(--e2); }
.btn:active { transform: scale(.97); box-shadow: var(--e1); }

.form-group input,
.form-group select,
.form-group textarea {
  transition: border-color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard);
}

/* ── Forms: native mobile-app feel ────────────────────────── */
.form-group input,
.form-group select,
.form-group textarea {
  padding: 12px 14px;
  border-radius: var(--r-md);
  font-size: var(--fs-lg);
  min-height: 46px;
}

.form-group select {
  padding-right: 34px;
}

.form-group textarea {
  min-height: 96px;
}

.form-group label {
  font-size: var(--fs-md);
  margin-bottom: 2px;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  box-shadow: 0 0 0 4px rgba(182, 58, 49, .18);
}

/* Sticky bottom action bar on phones — Save/Cancel stay one thumb-reach
   away instead of scrolling to the end of a long form, like a native
   app's bottom sheet footer. */
@media (max-width: 640px) {
  .form-row-2 {
    grid-template-columns: 1fr;
  }

  .form-actions {
    position: sticky;
    bottom: 0;
    background: var(--clr-bg);
    margin: 0 calc(var(--sp-md) * -1) calc(var(--sp-md) * -1);
    padding: var(--sp-md) var(--sp-md) calc(var(--sp-md) + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--clr-border);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, .25);
    z-index: 5;
  }

  .form-actions .btn {
    flex: 1;
    min-height: 46px;
  }
}

/* ── Bottom nav: native tab feel ──────────────────────────── */
.nav-tab {
  transition: color var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-spring);
}

.nav-tab.active {
  transform: translateY(-1px);
}

.nav-tab:active {
  transform: scale(.92);
}