/* ============================================================
   MANSUR · SOFT UI THEME LAYER  (mn-soft-ui.css)
   ------------------------------------------------------------
   ONE shared, ADDITIVE skin loaded LAST on every platform.
   Airbnb/Apple-inspired "Soft UI": soft floating elevation, pill /
   capsule controls, subtle inset for pressed/selected, gentle
   gradient lighting, 250ms micro-interactions.

   RULES this file follows (do not break):
   • Theme only — colours, shadows, radius, transitions, accent.
     NEVER changes element SIZE / padding / layout / positioning
     (the build's existing dimensions are preserved).
   • All tokens are namespaced --mnsu-* so they can't clash with a
     platform's own brand tokens or any logic.
   • Single uniform brand accent = orange #ea580c across ALL platforms.
   • Data surfaces (tables, form fields, data text) are left crisp
     and high-contrast — Soft UI is applied to the interactive
     SHELL only (buttons, pills, chips, nav, cards, modals, toggles,
     search bars).
   • Respects prefers-reduced-motion.

   Section index:
     0. Tokens (:root)
     1. Reusable utility classes (.mnsu-*)
     2. Shared sidebar skin  (used on every staff platform)
   ============================================================ */

/* ── 0. TOKENS ─────────────────────────────────────────────── */
:root {
  /* Uniform brand accent */
  --mnsu-accent:        #ea580c;
  --mnsu-accent-strong: #c2410c;
  --mnsu-accent-soft:   #fff4ed;
  --mnsu-accent-grad:   linear-gradient(135deg, #fb923c 0%, #ea580c 100%);
  --mnsu-accent-ring:   rgba(234, 88, 12, .18);

  /* Neutral soft-UI base tints (for floating-pill backgrounds) */
  --mnsu-base:   #eef1f6;   /* recessed page/container tint */
  --mnsu-base-2: #f4f6fa;
  --mnsu-surface:#ffffff;   /* raised element */
  --mnsu-ink:    #0f172a;
  --mnsu-ink-2:  #475569;
  --mnsu-mut:    #94a3b8;
  --mnsu-line:   #e6eaf1;

  /* Soft floating elevation (Airbnb-style outer shadow) */
  --mnsu-shadow:       0 4px 14px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.05);
  --mnsu-shadow-sm:    0 2px 8px rgba(15,23,42,.05),  0 1px 2px rgba(15,23,42,.04);
  --mnsu-shadow-hover: 0 12px 26px rgba(15,23,42,.12), 0 4px 10px rgba(15,23,42,.07);
  --mnsu-shadow-lg:    0 22px 48px rgba(15,23,42,.16), 0 8px 18px rgba(15,23,42,.08);

  /* True neumorphic dual shadow — for elements ON the grey base */
  --mnsu-neu:        6px 6px 14px rgba(174,182,201,.42), -6px -6px 14px rgba(255,255,255,.92);
  --mnsu-neu-sm:     4px 4px 9px rgba(174,182,201,.40), -4px -4px 9px rgba(255,255,255,.92);
  --mnsu-neu-hover:  8px 8px 18px rgba(174,182,201,.50), -8px -8px 18px rgba(255,255,255,.95);

  /* Inset / pressed / selected */
  --mnsu-inset:      inset 0 2px 6px rgba(15,23,42,.13), inset 0 1px 2px rgba(15,23,42,.08);
  --mnsu-inset-soft: inset 3px 3px 7px rgba(174,182,201,.45), inset -3px -3px 7px rgba(255,255,255,.85);

  /* Glass highlight (top sheen on raised pills) */
  --mnsu-sheen: linear-gradient(180deg, rgba(255,255,255,.65) 0%, rgba(255,255,255,0) 55%);

  /* Shape + motion */
  --mnsu-r-pill: 9999px;
  --mnsu-r-lg:   18px;
  --mnsu-r:      14px;
  --mnsu-r-sm:   11px;
  --mnsu-ease:   cubic-bezier(.4, 0, .2, 1);
  --mnsu-spring: cubic-bezier(.34, 1.56, .64, 1);
  --mnsu-t:      .25s;
}

/* ── 1. REUSABLE UTILITY CLASSES ───────────────────────────── */
/* Opt-in helpers any platform can drop onto an element. */

.mnsu-raised {
  background: var(--mnsu-surface);
  box-shadow: var(--mnsu-shadow);
  border-radius: var(--mnsu-r);
  border: 1px solid var(--mnsu-line);
  transition: box-shadow var(--mnsu-t) var(--mnsu-ease),
              transform var(--mnsu-t) var(--mnsu-ease);
}
.mnsu-raised:hover { box-shadow: var(--mnsu-shadow-hover); transform: translateY(-2px); }

.mnsu-pill { border-radius: var(--mnsu-r-pill) !important; }

/* Generic soft button — primary (filled accent) + secondary (white) */
.mnsu-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border-radius: var(--mnsu-r-pill);
  font-family: inherit; font-weight: 700; cursor: pointer;
  border: 1px solid var(--mnsu-line);
  background: var(--mnsu-surface); color: var(--mnsu-ink);
  box-shadow: var(--mnsu-shadow-sm);
  transition: box-shadow var(--mnsu-t) var(--mnsu-ease),
              transform var(--mnsu-t) var(--mnsu-ease),
              background var(--mnsu-t) var(--mnsu-ease),
              filter var(--mnsu-t) var(--mnsu-ease);
}
.mnsu-btn:hover  { box-shadow: var(--mnsu-shadow-hover); transform: translateY(-2px); }
.mnsu-btn:active { transform: translateY(0) scale(.98); box-shadow: var(--mnsu-inset); }

.mnsu-btn--primary {
  background: var(--mnsu-accent-grad); color: #fff; border-color: transparent;
  box-shadow: 0 6px 16px rgba(234,88,12,.30), 0 2px 5px rgba(234,88,12,.22);
}
.mnsu-btn--primary:hover  { filter: brightness(1.04); box-shadow: 0 12px 26px rgba(234,88,12,.36), 0 4px 10px rgba(234,88,12,.24); transform: translateY(-2px); }
.mnsu-btn--primary:active { transform: translateY(0) scale(.98); box-shadow: inset 0 3px 8px rgba(124,45,18,.45); }

/* ── 2. SHARED SIDEBAR SKIN ────────────────────────────────── */
/* Soft-UI re-skin of the universal sidebar (shared-sidebar.css).
   Colours/shadows/radius/motion only — paddings & sizes untouched. */

/* Panel becomes a soft recessed surface so the white cards/pills
   inside it read as gently floating (neumorphism needs a tinted base). */
.mn-sidebar {
  background: var(--mnsu-base) !important;
  box-shadow: 10px 0 40px rgba(15,23,42,.20) !important;
}
.mn-sidebar-header,
.mn-profile { background: transparent !important; }
.mn-sidebar-header { border-bottom-color: rgba(15,23,42,.06) !important; }
.mn-profile        { border-bottom-color: rgba(15,23,42,.06) !important; }

/* Hamburger → soft raised, rounded, press = inset */
.mn-hamburger {
  border: none !important;
  border-radius: var(--mnsu-r-sm) !important;
  background: var(--mnsu-surface) !important;
  box-shadow: var(--mnsu-neu-sm) !important;
  transition: box-shadow var(--mnsu-t) var(--mnsu-ease), transform var(--mnsu-t) var(--mnsu-ease) !important;
}
.mn-hamburger:hover  { box-shadow: var(--mnsu-neu-hover) !important; }
.mn-hamburger:active { box-shadow: var(--mnsu-inset-soft) !important; transform: scale(.96) !important; }

.mn-sidebar-close {
  border-radius: var(--mnsu-r-sm) !important;
  background: var(--mnsu-surface) !important;
  box-shadow: var(--mnsu-neu-sm) !important;
  transition: box-shadow var(--mnsu-t) var(--mnsu-ease), color var(--mnsu-t) var(--mnsu-ease) !important;
}
.mn-sidebar-close:hover { box-shadow: var(--mnsu-neu-hover) !important; }

/* Nav links → floating white pills with soft elevation + lift */
.mn-nav { background: transparent; }
.mn-nav-link {
  background: var(--mnsu-surface) !important;
  border: none !important;
  border-radius: var(--mnsu-r) !important;
  box-shadow: var(--mnsu-shadow-sm) !important;
  transition: box-shadow var(--mnsu-t) var(--mnsu-ease), transform var(--mnsu-t) var(--mnsu-ease) !important;
}
.mn-nav-link:hover  { box-shadow: var(--mnsu-shadow-hover) !important; transform: translateY(-2px) !important; }
.mn-nav-link:active { transform: translateY(0) scale(.99) !important; box-shadow: var(--mnsu-inset) !important; }

/* Icon chip inside each nav row → soft inset well */
.mn-nav-link-icon {
  border-radius: var(--mnsu-r-sm) !important;
  background: var(--mnsu-base) !important;
  box-shadow: var(--mnsu-inset-soft) !important;
}
.mn-nav-link:hover .mn-nav-link-icon {
  background: var(--mnsu-accent-soft) !important;
  color: var(--mnsu-accent) !important;
}

/* Section label + empty state stay as-is (text only) */
.mn-nav-empty { border-radius: var(--mnsu-r) !important; background: var(--mnsu-base-2) !important; }

/* Footer → recessed tint to match panel */
.mn-sidebar-footer {
  background: transparent !important;
  border-top-color: rgba(15,23,42,.06) !important;
}

/* Profile edit pill */
.mn-profile-edit-btn {
  border: none !important;
  border-radius: var(--mnsu-r-pill) !important;
  background: var(--mnsu-surface) !important;
  box-shadow: var(--mnsu-neu-sm) !important;
  transition: box-shadow var(--mnsu-t) var(--mnsu-ease), transform var(--mnsu-t) var(--mnsu-ease) !important;
}
.mn-profile-edit-btn:hover  { box-shadow: var(--mnsu-neu-hover) !important; background: var(--mnsu-surface) !important; }
.mn-profile-edit-btn:active { box-shadow: var(--mnsu-inset-soft) !important; transform: scale(.97) !important; }

/* Avatar edit dot → accent */
.mn-avatar-edit { background: var(--mnsu-accent) !important; box-shadow: 0 2px 6px rgba(234,88,12,.45) !important; }

/* Footer cards (printer / fonts) → soft raised */
.mn-print-card,
.mn-fonts-card {
  border: none !important;
  border-radius: var(--mnsu-r) !important;
  background: var(--mnsu-surface) !important;
  box-shadow: var(--mnsu-shadow-sm) !important;
  transition: box-shadow var(--mnsu-t) var(--mnsu-ease), transform var(--mnsu-t) var(--mnsu-ease) !important;
}
.mn-print-card:hover { box-shadow: var(--mnsu-shadow-hover) !important; transform: translateY(-1px) !important; background: var(--mnsu-surface) !important; }

/* APK / install / logout buttons → pill + soft */
.mn-apk-btn {
  border-radius: var(--mnsu-r-pill) !important;
  background: var(--mnsu-accent-grad) !important;
  box-shadow: 0 6px 16px rgba(234,88,12,.28), 0 2px 5px rgba(234,88,12,.20) !important;
  transition: box-shadow var(--mnsu-t) var(--mnsu-ease), transform var(--mnsu-t) var(--mnsu-ease), filter var(--mnsu-t) var(--mnsu-ease) !important;
}
.mn-apk-btn:hover  { filter: brightness(1.04) !important; box-shadow: 0 12px 26px rgba(234,88,12,.34), 0 4px 10px rgba(234,88,12,.22) !important; transform: translateY(-2px) !important; }
.mn-apk-btn:active { transform: translateY(0) scale(.98) !important; box-shadow: inset 0 3px 8px rgba(124,45,18,.4) !important; }

.mn-install-btn {
  border: none !important;
  border-radius: var(--mnsu-r-pill) !important;
  background: var(--mnsu-surface) !important;
  box-shadow: var(--mnsu-neu-sm) !important;
}
.mn-install-btn:hover  { box-shadow: var(--mnsu-neu-hover) !important; background: var(--mnsu-surface) !important; }
.mn-install-btn:active { box-shadow: var(--mnsu-inset-soft) !important; }

.mn-logout-btn {
  border: none !important;
  border-radius: var(--mnsu-r-pill) !important;
  background: var(--mnsu-surface) !important;
  box-shadow: var(--mnsu-neu-sm) !important;
  transition: box-shadow var(--mnsu-t) var(--mnsu-ease), transform var(--mnsu-t) var(--mnsu-ease), color var(--mnsu-t) var(--mnsu-ease) !important;
}
.mn-logout-btn:hover  { box-shadow: var(--mnsu-neu-hover) !important; background: #fff5f5 !important; }
.mn-logout-btn:active { box-shadow: var(--mnsu-inset-soft) !important; transform: scale(.98) !important; }

/* Profile-edit modal → soft floating */
.mn-edit-box { border-radius: var(--mnsu-r-lg) !important; box-shadow: var(--mnsu-shadow-lg) !important; }
.mn-edit-btn-primary {
  border-radius: var(--mnsu-r-pill) !important;
  background: var(--mnsu-accent-grad) !important;
  box-shadow: 0 6px 16px rgba(234,88,12,.28) !important;
  transition: box-shadow var(--mnsu-t) var(--mnsu-ease), transform var(--mnsu-t) var(--mnsu-ease), filter var(--mnsu-t) var(--mnsu-ease) !important;
}
.mn-edit-btn-primary:hover  { filter: brightness(1.04) !important; transform: translateY(-2px) !important; }
.mn-edit-btn-primary:active { transform: scale(.98) !important; }
.mn-edit-btn-secondary,
.mn-edit-btn-danger {
  border-radius: var(--mnsu-r-pill) !important;
  box-shadow: var(--mnsu-shadow-sm) !important;
  transition: box-shadow var(--mnsu-t) var(--mnsu-ease), transform var(--mnsu-t) var(--mnsu-ease), background var(--mnsu-t) var(--mnsu-ease) !important;
}
.mn-edit-btn-secondary:hover,
.mn-edit-btn-danger:hover { box-shadow: var(--mnsu-shadow-hover) !important; transform: translateY(-1px) !important; }

/* Reduced-motion: kill the lifts/scales, keep instant state changes */
@media (prefers-reduced-motion: reduce) {
  .mnsu-btn, .mnsu-raised,
  .mn-hamburger, .mn-sidebar-close, .mn-nav-link, .mn-profile-edit-btn,
  .mn-apk-btn, .mn-install-btn, .mn-logout-btn,
  .mn-edit-btn-primary, .mn-edit-btn-secondary, .mn-edit-btn-danger {
    transition: none !important;
  }
  .mnsu-btn:hover, .mnsu-raised:hover,
  .mn-nav-link:hover, .mn-apk-btn:hover, .mn-logout-btn:hover,
  .mn-edit-btn-primary:hover, .mn-edit-btn-secondary:hover { transform: none !important; }
}


/* ============================================================
   3. PORTAL / ERP SKIN  (portal.html)
   ------------------------------------------------------------
   Soft-UI on the interactive shell only. Tables + form fields
   stay crisp/high-contrast for data work.
   ============================================================ */

/* ── Buttons → pill + soft elevation + lift/press ── */
.btn-primary {
  border-radius: var(--mnsu-r-pill) !important;
  background: var(--mnsu-accent-grad) !important;
  border: none !important;
  box-shadow: 0 6px 16px rgba(234,88,12,.30), 0 2px 5px rgba(234,88,12,.20) !important;
  transition: box-shadow var(--mnsu-t) var(--mnsu-ease), transform var(--mnsu-t) var(--mnsu-ease), filter var(--mnsu-t) var(--mnsu-ease) !important;
}
.btn-primary:hover  { filter: brightness(1.04) !important; box-shadow: 0 12px 26px rgba(234,88,12,.36), 0 4px 10px rgba(234,88,12,.24) !important; transform: translateY(-2px) !important; }
.btn-primary:active { transform: translateY(0) scale(.98) !important; box-shadow: inset 0 3px 8px rgba(124,45,18,.45) !important; }

.btn-outline,
.logout-btn-global {
  border-radius: var(--mnsu-r-pill) !important;
  border: 1px solid var(--mnsu-line) !important;
  background: var(--mnsu-surface) !important;
  box-shadow: var(--mnsu-shadow-sm) !important;
  transition: box-shadow var(--mnsu-t) var(--mnsu-ease), transform var(--mnsu-t) var(--mnsu-ease), background var(--mnsu-t) var(--mnsu-ease), color var(--mnsu-t) var(--mnsu-ease), border-color var(--mnsu-t) var(--mnsu-ease) !important;
}
.btn-outline:hover { box-shadow: var(--mnsu-shadow-hover) !important; transform: translateY(-2px) !important; }
.btn-outline:active { transform: translateY(0) scale(.98) !important; box-shadow: var(--mnsu-inset) !important; }
.logout-btn-global:hover { transform: translateY(-2px) !important; box-shadow: 0 10px 22px rgba(239,68,68,.22) !important; }

/* Inventory toolbar buttons + grid action buttons → pill, soft */
.inventory-top-bar .action-buttons-wrapper > *,
.inventory-top-bar .bulk-edit-btn,
.inventory-top-bar .add-item-btn,
.inventory-top-bar .inv-filter-select {
  border-radius: var(--mnsu-r-pill) !important;
}
table.desktop-table td .grid-action-btn,
.mobile-card .grid-action-btn,
.inv-card .grid-action-btn {
  border-radius: var(--mnsu-r-pill) !important;
}

/* Text action links → soft pill on hover */
.action-link { border-radius: var(--mnsu-r-pill) !important; }
.action-link:hover { box-shadow: var(--mnsu-shadow-sm) !important; }

/* ── Search bars → capsule with soft inset well + orange focus ── */
.search-input {
  border-radius: var(--mnsu-r-pill) !important;
  border: 1px solid var(--mnsu-line) !important;
  box-shadow: var(--mnsu-inset-soft) !important;
}
.search-input:focus {
  border-color: var(--mnsu-accent) !important;
  box-shadow: 0 0 0 4px var(--mnsu-accent-ring), var(--mnsu-inset-soft) !important;
}

/* ── Stat / module cards → soft floating elevation ── */
.stat-card,
.team-module-card {
  border: 1px solid var(--mnsu-line) !important;
  border-radius: var(--mnsu-r-lg) !important;
  box-shadow: var(--mnsu-shadow) !important;
  transition: box-shadow var(--mnsu-t) var(--mnsu-ease), transform var(--mnsu-t) var(--mnsu-ease) !important;
}
.stat-card:hover,
.team-module-card:hover { box-shadow: var(--mnsu-shadow-hover) !important; transform: translateY(-4px) !important; }

/* Table container → soft floating frame (cells inside stay crisp) */
.desktop-view {
  border: 1px solid var(--mnsu-line) !important;
  border-radius: var(--mnsu-r-lg) !important;
  box-shadow: var(--mnsu-shadow) !important;
}

/* ── Filter chips → pill, selected = brand accent + inset ── */
.inq-chip {
  border: 1px solid var(--mnsu-line) !important;
  box-shadow: var(--mnsu-shadow-sm) !important;
  transition: box-shadow var(--mnsu-t) var(--mnsu-ease), transform var(--mnsu-t) var(--mnsu-ease), background var(--mnsu-t) var(--mnsu-ease), color var(--mnsu-t) var(--mnsu-ease) !important;
}
.inq-chip:hover { box-shadow: var(--mnsu-shadow) !important; transform: translateY(-1px) !important; background: var(--mnsu-surface) !important; }
.inq-chip.active {
  background: var(--mnsu-accent) !important;
  border-color: var(--mnsu-accent) !important;
  color: #fff !important;
  box-shadow: inset 0 2px 5px rgba(124,45,18,.40) !important;
  transform: none !important;
}

/* ── Status badges → keep pill, add a whisper of lift ── */
.status-badge { box-shadow: var(--mnsu-shadow-sm) !important; }

/* ── Modals → soft floating sheet ── */
.modal-content,
.cmdk-modal {
  border-radius: var(--mnsu-r-lg) !important;
  box-shadow: var(--mnsu-shadow-lg) !important;
}

/* ── Left desktop sidebar → soft accent on the active row ── */
.nav-item {
  transition: background var(--mnsu-t) var(--mnsu-ease), color var(--mnsu-t) var(--mnsu-ease), transform var(--mnsu-t) var(--mnsu-ease), box-shadow var(--mnsu-t) var(--mnsu-ease) !important;
}
.nav-item.active {
  background: rgba(234,88,12,.16) !important;
  color: var(--mnsu-accent) !important;
  box-shadow: inset 4px 0 0 var(--mnsu-accent), inset 0 1px 3px rgba(0,0,0,.25) !important;
}


/* ── Mobile bottom tab bar (sidebar repurposed ≤991px) ──
   Overrides the desktop .nav-item.active soft rule so it does NOT
   paint a sharp orange box on the bottom bar. Clean soft rounded
   accent tab instead (Airbnb-style), no layout/size change. */
@media (max-width: 991px) {
  .sidebar {
    border-top: none !important;
    box-shadow: 0 -8px 28px rgba(15,23,42,.10) !important;
  }
  .nav-item {
    border-top: none !important;
    border-radius: var(--mnsu-r) !important;
    transition: color var(--mnsu-t) var(--mnsu-ease),
                background var(--mnsu-t) var(--mnsu-ease),
                box-shadow var(--mnsu-t) var(--mnsu-ease),
                transform var(--mnsu-t) var(--mnsu-ease) !important;
  }
  .nav-item.active {
    background: var(--mnsu-accent-soft) !important;
    color: var(--mnsu-accent) !important;
    border-top-color: transparent !important;
    box-shadow: var(--mnsu-inset-soft) !important;
    transform: none !important;
  }
  .nav-item:active { transform: scale(.95) !important; }
  .nav-item:hover:not(.active) { background: rgba(15,23,42,.03) !important; }
}

/* ── Floating cart button → soft round, brand-tinted lift ── */
.float-cart, #floatCartBtn {
  box-shadow: 0 10px 26px rgba(15,23,42,.28), 0 4px 10px rgba(15,23,42,.18) !important;
  transition: box-shadow var(--mnsu-t) var(--mnsu-ease), transform var(--mnsu-t) var(--mnsu-spring) !important;
}
.float-cart:hover, #floatCartBtn:hover { transform: translateY(-3px) scale(1.04) !important; box-shadow: 0 16px 34px rgba(15,23,42,.34) !important; }
.float-cart:active, #floatCartBtn:active { transform: scale(.96) !important; }

/* ── Topbar round icon buttons → soft press feedback ── */
.topbar-actions button {
  transition: box-shadow var(--mnsu-t) var(--mnsu-ease), transform var(--mnsu-t) var(--mnsu-ease), filter var(--mnsu-t) var(--mnsu-ease) !important;
}
.topbar-actions button:hover  { transform: translateY(-1px) !important; filter: brightness(1.05) !important; }
.topbar-actions button:active { transform: scale(.94) !important; }


/* ============================================================
   4. CASHHUB SKIN  (cash-hub.html · #mainAppContainer)
   ------------------------------------------------------------
   Remap brand blue → uniform orange + soft-UI shell. Count/recon
   data rows stay crisp.
   ============================================================ */
#mainAppContainer { --primary: #ea580c !important; --primary-light: #fff4ed !important; }

/* Top tabs → soft accent active */
#mainAppContainer .tab {
  transition: color var(--mnsu-t) var(--mnsu-ease), background var(--mnsu-t) var(--mnsu-ease), border-color var(--mnsu-t) var(--mnsu-ease) !important;
}
#mainAppContainer .tab.active {
  background: var(--mnsu-accent-soft) !important;
  border-bottom-color: var(--mnsu-accent) !important;
  color: var(--mnsu-accent) !important;
}

/* Cards → soft floating (no lift in dense lists) */
#mainAppContainer .card,
#mainAppContainer .highlight-card,
#mainAppContainer .stat-box,
#mainAppContainer .field-box,
#mainAppContainer .recon-light {
  border: 1px solid var(--mnsu-line) !important;
  border-radius: var(--mnsu-r) !important;
  box-shadow: var(--mnsu-shadow-sm) !important;
}
#mainAppContainer .recon-dark { border-radius: var(--mnsu-r) !important; box-shadow: var(--mnsu-shadow) !important; }

/* Primary / action buttons → pill + soft press */
#mainAppContainer .btn-submit,
#mainAppContainer .btn-submit-eod {
  border-radius: var(--mnsu-r-pill) !important;
  background: var(--mnsu-accent-grad) !important;
  box-shadow: 0 6px 16px rgba(234,88,12,.30), 0 2px 5px rgba(234,88,12,.20) !important;
  transition: box-shadow var(--mnsu-t) var(--mnsu-ease), transform var(--mnsu-t) var(--mnsu-ease), filter var(--mnsu-t) var(--mnsu-ease) !important;
}
#mainAppContainer .btn-submit:hover:not(:disabled) { filter: brightness(1.04) !important; transform: translateY(-2px) !important; box-shadow: 0 12px 26px rgba(234,88,12,.36) !important; }
#mainAppContainer .btn-submit:active:not(:disabled) { transform: translateY(0) scale(.98) !important; box-shadow: inset 0 3px 8px rgba(124,45,18,.45) !important; }

#mainAppContainer .btn-edit-opening,
#mainAppContainer .btn-exit {
  border-radius: var(--mnsu-r-pill) !important;
  box-shadow: var(--mnsu-shadow-sm) !important;
  transition: box-shadow var(--mnsu-t) var(--mnsu-ease), transform var(--mnsu-t) var(--mnsu-ease), filter var(--mnsu-t) var(--mnsu-ease) !important;
}
#mainAppContainer .btn-edit-opening:hover,
#mainAppContainer .btn-exit:hover { filter: brightness(1.05) !important; transform: translateY(-1px) !important; }
#mainAppContainer .btn-edit-opening:active,
#mainAppContainer .btn-exit:active { transform: scale(.96) !important; }

/* Upload box → soft rounded dashed well */
#mainAppContainer .upload-box { border-radius: var(--mnsu-r) !important; }


/* ============================================================
   5. SERVICEHUB SKIN  (service-hub.html · --sv-* tokens)
   ------------------------------------------------------------
   ServiceHub already ships a soft/pill design language — we only
   remap its sky→indigo accent to the uniform brand orange so it
   matches every other platform.
   ============================================================ */
:root {
  --sv-primary:       #ea580c !important;
  --sv-primary-2:     #f97316 !important;
  --sv-primary-hover: #c2410c !important;
  --sv-primary-soft:  rgba(234, 88, 12, .10) !important;
  --sv-primary-ring:  rgba(234, 88, 12, .22) !important;
  --sv-grad:          linear-gradient(135deg, #fb923c 0%, #ea580c 100%) !important;
  --sv-info:          #ea580c !important;
}


/* ============================================================
   6. ACCOUNTING SKIN  (accounting.html · --ac-* tokens)
   ============================================================ */
:root { --ac-accent: #ea580c !important; }

.ac-btn {
  border: 1px solid var(--mnsu-line) !important;
  border-radius: var(--mnsu-r-pill) !important;
  box-shadow: var(--mnsu-shadow-sm) !important;
  transition: box-shadow var(--mnsu-t) var(--mnsu-ease), transform var(--mnsu-t) var(--mnsu-ease), filter var(--mnsu-t) var(--mnsu-ease) !important;
}
.ac-btn:hover  { box-shadow: var(--mnsu-shadow-hover) !important; transform: translateY(-2px) !important; }
.ac-btn:active { transform: translateY(0) scale(.98) !important; box-shadow: var(--mnsu-inset) !important; }
.ac-btn-primary {
  background: var(--mnsu-accent-grad) !important;
  border-color: transparent !important;
  box-shadow: 0 6px 16px rgba(234,88,12,.30), 0 2px 5px rgba(234,88,12,.20) !important;
}
.ac-btn-primary:hover  { filter: brightness(1.04) !important; transform: translateY(-2px) !important; box-shadow: 0 12px 26px rgba(234,88,12,.36) !important; }
.ac-btn-primary:active { transform: translateY(0) scale(.98) !important; box-shadow: inset 0 3px 8px rgba(124,45,18,.45) !important; }

/* Party rows + KPI cards → soft floating */
.ac-party, .ac-kpi {
  border-radius: var(--mnsu-r) !important;
  box-shadow: var(--mnsu-shadow-sm) !important;
  transition: box-shadow var(--mnsu-t) var(--mnsu-ease), transform var(--mnsu-t) var(--mnsu-ease) !important;
}
.ac-party:hover { box-shadow: var(--mnsu-shadow-hover) !important; transform: translateY(-2px) !important; }


/* ============================================================
   7. CONTROL CENTER SKIN  (control-center.html · .cc-* )
   ------------------------------------------------------------
   Red --cc-accent doubles as the danger colour, so we leave it.
   Only the active-tab brand highlight goes orange + soft shell.
   ============================================================ */
.cc-tab {
  border-radius: var(--mnsu-r-sm) !important;
  transition: background var(--mnsu-t) var(--mnsu-ease), color var(--mnsu-t) var(--mnsu-ease), border-color var(--mnsu-t) var(--mnsu-ease) !important;
}
.cc-tab.active {
  background: var(--mnsu-accent-soft) !important;
  color: var(--mnsu-accent) !important;
  border-color: #fed7aa !important;
}

.cc-btn {
  border-radius: var(--mnsu-r-pill) !important;
  box-shadow: var(--mnsu-shadow-sm) !important;
  transition: box-shadow var(--mnsu-t) var(--mnsu-ease), transform var(--mnsu-t) var(--mnsu-ease), background var(--mnsu-t) var(--mnsu-ease), filter var(--mnsu-t) var(--mnsu-ease) !important;
}
.cc-btn:hover  { box-shadow: var(--mnsu-shadow-hover) !important; transform: translateY(-2px) !important; }
.cc-btn:active { transform: translateY(0) scale(.97) !important; box-shadow: var(--mnsu-inset) !important; }
.cc-btn-danger:hover { filter: brightness(1.04) !important; }

.cc-card, .cc-kpi {
  border-radius: var(--mnsu-r) !important;
  box-shadow: var(--mnsu-shadow-sm) !important;
  transition: box-shadow var(--mnsu-t) var(--mnsu-ease), transform var(--mnsu-t) var(--mnsu-ease) !important;
}
.cc-card:hover { box-shadow: var(--mnsu-shadow) !important; }
.cc-refresh-btn {
  border-radius: var(--mnsu-r-sm) !important;
  box-shadow: var(--mnsu-shadow-sm) !important;
  transition: box-shadow var(--mnsu-t) var(--mnsu-ease), transform var(--mnsu-t) var(--mnsu-ease) !important;
}
.cc-refresh-btn:hover  { box-shadow: var(--mnsu-shadow-hover) !important; transform: translateY(-1px) !important; }
.cc-refresh-btn:active { transform: scale(.95) !important; }


/* ============================================================
   8. DELIVERY — ADMIN APP SKIN  (delivery/app.html · app.css)
   ------------------------------------------------------------
   Remap brand blue → uniform orange + soft-UI shell. Bottom nav
   active = clean accent (no box), Airbnb-style.
   ============================================================ */
:root {
  --primary:    #ea580c !important;
  --primary-dk: #c2410c !important;
  --primary-lt: #fff4ed !important;
}

.btn-primary, .btn-login {
  border-radius: var(--mnsu-r-pill) !important;
  background: var(--mnsu-accent-grad) !important;
  box-shadow: 0 6px 16px rgba(234,88,12,.30), 0 2px 5px rgba(234,88,12,.20) !important;
  transition: box-shadow var(--mnsu-t) var(--mnsu-ease), transform var(--mnsu-t) var(--mnsu-ease), filter var(--mnsu-t) var(--mnsu-ease) !important;
}
.btn-primary:hover:not(:disabled), .btn-login:hover:not(:disabled) { filter: brightness(1.04) !important; transform: translateY(-2px) !important; box-shadow: 0 12px 26px rgba(234,88,12,.36) !important; }
.btn-primary:active:not(:disabled), .btn-login:active:not(:disabled) { transform: translateY(0) scale(.98) !important; box-shadow: inset 0 3px 8px rgba(124,45,18,.45) !important; }

.btn-ghost, .btn-danger, .btn-success {
  border-radius: var(--mnsu-r-pill) !important;
  transition: box-shadow var(--mnsu-t) var(--mnsu-ease), transform var(--mnsu-t) var(--mnsu-ease), filter var(--mnsu-t) var(--mnsu-ease), background var(--mnsu-t) var(--mnsu-ease) !important;
}
.btn-ghost:hover { box-shadow: var(--mnsu-shadow-sm) !important; transform: translateY(-1px) !important; }
.btn-danger:hover, .btn-success:hover { filter: brightness(1.04) !important; transform: translateY(-1px) !important; }
.btn-sm, .btn-new-order { border-radius: var(--mnsu-r-pill) !important; }

.card {
  border-radius: var(--mnsu-r) !important;
  box-shadow: var(--mnsu-shadow-sm) !important;
  transition: box-shadow var(--mnsu-t) var(--mnsu-ease) !important;
}

/* Chips / pills / segmented → soft + accent active */
.chip, .date-quick, .type-btn, .adm-pill, .topbar-tab {
  transition: background var(--mnsu-t) var(--mnsu-ease), color var(--mnsu-t) var(--mnsu-ease), border-color var(--mnsu-t) var(--mnsu-ease), box-shadow var(--mnsu-t) var(--mnsu-ease) !important;
}
.adm-pill { border-radius: var(--mnsu-r-pill) !important; }
.adm-pill.active { background: var(--mnsu-accent) !important; border-color: var(--mnsu-accent) !important; color: #fff !important; }

/* Bottom nav → clean accent active (Airbnb minimal) */
.bottom-nav { box-shadow: 0 -8px 28px rgba(15,23,42,.10) !important; }
.bnav-btn { transition: color var(--mnsu-t) var(--mnsu-ease), transform var(--mnsu-t) var(--mnsu-ease) !important; }
.bnav-btn.active { color: var(--mnsu-accent) !important; }
.bnav-btn:active { transform: scale(.94) !important; }


/* ============================================================
   9. DELIVERY — DRIVER APP SKIN  (delivery/driver.html · driver.css)
   ------------------------------------------------------------
   Live WebView inside the Capacitor app. COLOUR ONLY — remap the
   red brand CTA to the uniform orange. NO layout/positioning
   changes (native safe-area is handled in MainActivity). The
   driver app already ships pill tabs + clean cards + soft shadows.
   ============================================================ */
:root {
  --pri:      #ea580c !important;
  --pri-dk:   #c2410c !important;
  --pri-lt:   #fff4ed !important;
  --pri-soft: #ffedd5 !important;
}


/* ============================================================
   10. STOREFRONT SKIN  (home/shop/product/cart/account/wishlist/
       info/manage · store.css)
   ------------------------------------------------------------
   The storefront is ALREADY orange with soft shadows + rounded
   cards. Light polish ONLY — no radius/layout changes (mobile-
   sensitive customer site; honours the no-mobile-change rule).
   Primary buttons inherit the pill skin from section 3.
   ============================================================ */
.btn { transition: transform var(--mnsu-t) var(--mnsu-ease), box-shadow var(--mnsu-t) var(--mnsu-ease), background var(--mnsu-t) var(--mnsu-ease), filter var(--mnsu-t) var(--mnsu-ease) !important; }
.btn-primary:hover  { transform: translateY(-2px) !important; filter: brightness(1.03) !important; }
.btn-primary:active { transform: translateY(0) scale(.98) !important; }
.mn-card:hover { box-shadow: var(--mnsu-shadow-hover) !important; }

/* Floating WhatsApp / cart FABs → soft lift */
.mn-wa-fab { transition: transform var(--mnsu-t) var(--mnsu-spring), box-shadow var(--mnsu-t) var(--mnsu-ease) !important; }
.mn-wa-fab:hover  { transform: translateY(-3px) scale(1.05) !important; }
.mn-wa-fab:active { transform: scale(.95) !important; }


/* ── Delivery bottom-nav: kill the browser focus box on tap ── */
.bnav-btn { -webkit-tap-highlight-color: transparent; }
.bnav-btn:focus { outline: none !important; }
.bnav-btn:focus-visible { outline: 2px solid var(--mnsu-accent-ring); outline-offset: -3px; border-radius: var(--mnsu-r-sm); }

/* ============================================================
   11. CATALOGUE SKIN  (catalog.html · --c-* tokens, inline CSS)
   ------------------------------------------------------------
   Remap brand blue → uniform orange + soft-UI shell.
   ============================================================ */
:root { --c-accent: #ea580c !important; --c-accent-soft: #fff4ed !important; }

.btn-action {
  border-radius: var(--mnsu-r-pill) !important;
  box-shadow: var(--mnsu-shadow-sm) !important;
  transition: box-shadow var(--mnsu-t) var(--mnsu-ease), transform var(--mnsu-t) var(--mnsu-ease), filter var(--mnsu-t) var(--mnsu-ease) !important;
}
.btn-action:hover  { transform: translateY(-2px) !important; box-shadow: var(--mnsu-shadow-hover) !important; filter: brightness(1.04) !important; }
.btn-action:active { transform: translateY(0) scale(.97) !important; box-shadow: var(--mnsu-inset) !important; }

/* Search bar → capsule + soft inset */
.search-bar input {
  border-radius: var(--mnsu-r-pill) !important;
  box-shadow: var(--mnsu-inset-soft) !important;
  border-color: var(--mnsu-line) !important;
}
.search-bar input:focus { box-shadow: 0 0 0 4px var(--mnsu-accent-ring), var(--mnsu-inset-soft) !important; }

/* Breadcrumb chips → pill */
.crumb { border-radius: var(--mnsu-r-pill) !important; }

/* File / folder cards → soft floating */
.cat-card {
  border-radius: var(--mnsu-r) !important;
  box-shadow: var(--mnsu-shadow-sm) !important;
  transition: box-shadow var(--mnsu-t) var(--mnsu-ease), transform var(--mnsu-t) var(--mnsu-ease), border-color var(--mnsu-t) var(--mnsu-ease) !important;
}
.cat-card:hover { transform: translateY(-3px) !important; box-shadow: var(--mnsu-shadow-hover) !important; }

/* FAB (orange, soft) + FAB options (pill) */
.fab-main {
  background: var(--mnsu-accent-grad) !important;
  box-shadow: 0 10px 26px rgba(234,88,12,.42) !important;
  transition: transform var(--mnsu-t) var(--mnsu-spring), box-shadow var(--mnsu-t) var(--mnsu-ease) !important;
}
.fab-main:hover  { box-shadow: 0 14px 32px rgba(234,88,12,.50) !important; }
.fab-main:active { transform: scale(.95) !important; }
.fab-main.is-open { transform: rotate(45deg) !important; }
.fab-opt { border-radius: var(--mnsu-r-pill) !important; }

/* Catalogue auth login card + button */
.login-card { border-radius: var(--mnsu-r-lg) !important; box-shadow: var(--mnsu-shadow-lg) !important; }
.btn-login {
  border-radius: var(--mnsu-r-pill) !important;
  background: var(--mnsu-accent-grad) !important;
  box-shadow: 0 6px 16px rgba(234,88,12,.30) !important;
  transition: box-shadow var(--mnsu-t) var(--mnsu-ease), transform var(--mnsu-t) var(--mnsu-ease), filter var(--mnsu-t) var(--mnsu-ease) !important;
}
.btn-login:hover:not(:disabled)  { filter: brightness(1.04) !important; transform: translateY(-2px) !important; }
.btn-login:active:not(:disabled) { transform: translateY(0) scale(.98) !important; }


/* ============================================================
   12. UNIVERSAL FORM FIELDS + INNER CONTROLS  (all platforms)
   ------------------------------------------------------------
   Applies the soft feel INSIDE every page — text inputs, selects,
   textareas (rounded soft well + orange focus ring) and inner
   buttons. Sizes/padding/height untouched. Search bars keep their
   capsule (excluded). Borderless compact inputs are exempted below
   so dense rows (CashHub denominations, date pickers) stay clean.
   ============================================================ */
input:not([type]), input[type="text"], input[type="tel"], input[type="email"],
input[type="number"], input[type="password"], input[type="date"],
input[type="datetime-local"], input[type="month"], input[type="time"], input[type="url"],
textarea, select {
  border-radius: var(--mnsu-r) !important;
  transition: box-shadow var(--mnsu-t) var(--mnsu-ease),
              border-color var(--mnsu-t) var(--mnsu-ease),
              background var(--mnsu-t) var(--mnsu-ease) !important;
}
input:not([type]):focus, input[type="text"]:focus, input[type="tel"]:focus,
input[type="email"]:focus, input[type="number"]:focus, input[type="password"]:focus,
input[type="date"]:focus, input[type="datetime-local"]:focus, input[type="month"]:focus,
input[type="time"]:focus, input[type="url"]:focus,
textarea:focus, select:focus {
  border-color: var(--mnsu-accent) !important;
  box-shadow: 0 0 0 3px var(--mnsu-accent-ring) !important;
  outline: none !important;
}

/* Exceptions — keep borderless / compact inputs clean (no ring/radius takeover) */
#mainAppContainer .field-box input,
#mainAppContainer .field-box select,
#mainAppContainer .date-picker,
#mainAppContainer .date-range-container input,
.mn-step-inp, .mn-card-step input, .mn-pdp-step input,
input[type="range"], input[type="checkbox"], input[type="radio"], input[type="color"], input[type="file"] {
  box-shadow: none !important;
}
#mainAppContainer .field-box input:focus,
#mainAppContainer .date-picker:focus,
#mainAppContainer .date-range-container input:focus {
  box-shadow: none !important;
}

/* Inner action buttons inside modals/cards → consistent soft press
   (covers small +/trash/secondary buttons that lacked feedback). */
.modal button, .modal-content button, .cc-card button, .card button {
  transition: transform var(--mnsu-t) var(--mnsu-ease), box-shadow var(--mnsu-t) var(--mnsu-ease), filter var(--mnsu-t) var(--mnsu-ease) !important;
}
.modal button:active, .modal-content button:active, .cc-card button:active, .card button:active {
  transform: scale(.95);
}


/* ============================================================
   13. FOLLOW-UP (2026-06): field WELL · content cards ·
       CashHub top tabs · public pages
   ============================================================ */

/* ── 13a. Clean high-contrast text fields (2026-07). The old grey recessed
   "well" (#eef1f6) made FILLED fields look empty / disabled / "stale". Crisp
   white field + subtle border + a distinctly lighter placeholder so entered
   text clearly reads as entered. (Text colour is left to each platform — most
   are already dark — so accent-coloured inner inputs like the qty steppers keep
   their colour; those are also exempted from the well below.) ── */
input:not([type]), input[type="text"], input[type="tel"], input[type="email"],
input[type="number"], input[type="password"], input[type="date"],
input[type="datetime-local"], input[type="month"], input[type="time"], input[type="url"],
textarea, select {
  background-color: #ffffff !important;
  box-shadow: 0 1px 2px rgba(15,23,42,.05) !important;
  border: 1px solid #d5dce5 !important;
}
input:not([type]):focus, input[type="text"]:focus, input[type="tel"]:focus,
input[type="email"]:focus, input[type="number"]:focus, input[type="password"]:focus,
input[type="date"]:focus, input[type="datetime-local"]:focus, input[type="month"]:focus,
input[type="time"]:focus, input[type="url"]:focus,
textarea:focus, select:focus {
  background-color: #ffffff !important;
  border-color: var(--mnsu-accent) !important;
  box-shadow: 0 0 0 3px var(--mnsu-accent-ring) !important;
}
/* placeholders: clearly lighter than entered text so empty ≠ filled */
input::placeholder, textarea::placeholder { color:#9aa4b2 !important; opacity:1 !important; }
/* hover: subtle border feedback so fields feel interactive (desktop) */
input:not([type]):hover, input[type="text"]:hover, input[type="tel"]:hover,
input[type="email"]:hover, input[type="number"]:hover, input[type="password"]:hover,
input[type="date"]:hover, input[type="datetime-local"]:hover, input[type="month"]:hover,
input[type="time"]:hover, input[type="url"]:hover,
textarea:hover, select:hover { border-color:#c1cad5 !important; }
/* read-only / locked fields (e.g. the locked Client Name): fully readable but a
   faint tint marks them as not-directly-editable */
input[readonly], textarea[readonly] { background-color:#f5f8fc !important; }

/* keep borderless / compact inputs clean (no well) */
#mainAppContainer .field-box input, #mainAppContainer .field-box select,
#mainAppContainer .date-picker, #mainAppContainer .date-range-container input,
.mn-step-inp, .mn-card-step input, .mn-pdp-step input, .cl-step input {
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* ── 13b. Portal content cards (Quotes / Inventory / Inquiries) ── */
.mobile-card, .inv-card {
  border-radius: var(--mnsu-r) !important;
  box-shadow: var(--mnsu-shadow-sm) !important;
  transition: box-shadow var(--mnsu-t) var(--mnsu-ease), transform var(--mnsu-t) var(--mnsu-ease) !important;
}
.mobile-card:hover, .inv-card:hover { box-shadow: var(--mnsu-shadow-hover) !important; transform: translateY(-2px) !important; }
.inq-card {
  border-radius: var(--mnsu-r) !important;
  box-shadow: var(--mnsu-shadow-sm) !important;
  transition: box-shadow var(--mnsu-t) var(--mnsu-ease), transform var(--mnsu-t) var(--mnsu-ease) !important;
}
.inq-card:hover { box-shadow: var(--mnsu-shadow-hover) !important; transform: translateY(-2px) !important; }

/* ── 13c. CashHub TOP tab bar → clean even rounded segments ──
   Was a merged single row with an uneven box on the active tab.
   Now each tab is an evenly-gapped rounded segment; active = soft
   accent pill (no underline); labels forced one line (even height). */
#mainAppContainer .tabs { gap: 4px !important; padding: 5px 6px !important; }
#mainAppContainer .tab {
  border-bottom: none !important;
  border-radius: var(--mnsu-r) !important;
  white-space: nowrap !important;
  font-size: 0.82rem !important;
  padding: 9px 4px !important;
}
#mainAppContainer .tab.active {
  background: var(--mnsu-accent-soft) !important;
  color: var(--mnsu-accent) !important;
  box-shadow: var(--mnsu-inset-soft) !important;
  border-bottom: none !important;
}

/* ── 13d. Public pages — Service Track brand → uniform orange.
   (Customer Track auto-oranges via the shared :root --primary remap;
   delivery/offline likewise.) ── */
:root { --tk-brand: #ea580c !important; }
.tk-call a.phone { background: var(--mnsu-accent) !important; }
.tk-card, .tk-steps, .tk-header, .state-card {
  box-shadow: var(--mnsu-shadow) !important;
}
.fb-btn { border-radius: var(--mnsu-r) !important; transition: box-shadow var(--mnsu-t) var(--mnsu-ease), transform var(--mnsu-t) var(--mnsu-ease) !important; }
.fb-btn:active { transform: scale(.97) !important; }

/* ============================================================
   14. MOTION LAYER (2026-07) — view transitions + entrance
       polish across every platform. ADDITIVE + layout-safe
       (opacity + settle-to-none transforms only, no reflow of
       other elements), reliably re-triggered on the real
       class-toggle hooks, and fully disabled under
       prefers-reduced-motion. Purely presentational.
   ============================================================ */

/* ── 14a. View / tab-content transition ──────────────────────
   The `active` class is toggled on every tab switch, so the
   keyframe RE-FIRES each time a view is shown → a smooth
   fade-rise. Hooks: portal `.content-area`, CashHub `.view`,
   Control Center `.cc-panel`, plus generic tab-content classes.
   (Data/live re-renders inside a view never touch this class,
   so live updates stay jank-free.) */
@keyframes mnsuViewIn { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
.content-area.active,
.view.active,
.cc-panel.active,
.tab-content.active,
.tab-pane.active {
  animation: mnsuViewIn .34s var(--mnsu-ease) both;
}

/* ── 14b. Centered modal / overlay entrance ──────────────────
   Reliable class-toggled overlays only — fade the backdrop and
   pop the inner card. Slide-in panels (cart sidebar) are
   deliberately NOT matched, so their own slide is untouched. */
@keyframes mnsuOverlayIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes mnsuPopIn { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }

#cmdk-overlay.active,
#cartSearchModal.open,
.mnhsn-back.open,
.mnbd-back.open {
  animation: mnsuOverlayIn .2s var(--mnsu-ease) both;
}
#cmdk-overlay.active .cmdk-modal,
.mnhsn-back.open .mnhsn-modal,
.mnbd-back.open .mnbd-modal {
  animation: mnsuPopIn .32s var(--mnsu-spring) both;
}

/* ── 14c. Global focus-visible ring ──────────────────────────
   Keyboard / assistive-tech users get a clear, on-brand focus
   indicator on interactive shell elements everywhere (mouse
   clicks are unaffected via :focus-visible). Inputs already get
   their own accent ring in §13a, so they're excluded here. */
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
.nav-item:focus-visible,
.tab:focus-visible,
.cc-tab:focus-visible,
.mn-nav-link:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px var(--mnsu-accent-ring), 0 0 0 1px var(--mnsu-accent) !important;
}

/* ── 14d. Icon-button glyph press feedback ───────────────────
   The SVG glyph inside a button gently squishes on press so
   taps feel responsive (state-only, no layout change). */
button > svg { transition: transform var(--mnsu-t) var(--mnsu-spring); }
button:active:not(:disabled) > svg { transform: scale(.88); }

/* ── 14e. Reduced-motion: disable all of the above motion ──── */
@media (prefers-reduced-motion: reduce) {
  .content-area.active, .view.active, .cc-panel.active, .tab-content.active, .tab-pane.active,
  #cmdk-overlay.active, #cartSearchModal.open, .mnhsn-back.open, .mnbd-back.open,
  #cmdk-overlay.active .cmdk-modal, .mnhsn-back.open .mnhsn-modal, .mnbd-back.open .mnbd-modal {
    animation: none !important;
  }
  button > svg, button:active:not(:disabled) > svg { transition: none !important; transform: none !important; }
}

/* ============================================================
   15. TACTILE BUTTON PRESS (2026-07) — the button is the most-
       used control, so pressing ANY button now gives a crisp
       scale-in, a quick brightness "pop", and a springy
       bounce-back on release. Transform + filter only (no
       layout reflow), reduced-motion safe, applied on every
       platform via this shared skin.
   ============================================================ */
:root { --mnsu-press: cubic-bezier(.34, 1.56, .64, 1); }

/* Springy release timing on the common interactive control set
   (so both the hover-lift AND the press bounce back with life). */
.btn, .btn-primary, .btn-outline, .btn-submit,
.mnsu-btn, .mnsu-btn--primary,
.ac-btn, .cc-btn, .fb-btn,
.mn-nav-link, .mn-logout-btn, .mn-apk-btn, .mn-install-btn,
.mn-edit-btn-primary, .mn-edit-btn-secondary,
.topbar-actions button {
  transition-timing-function: var(--mnsu-press) !important;
}

/* Crisp scale-in on press. The short press-in duration snaps it
   down; on release the springy base timing above bounces it back. */
.btn:active:not(:disabled), .btn-primary:active:not(:disabled),
.btn-outline:active:not(:disabled), .btn-submit:active:not(:disabled),
.mnsu-btn:active:not(:disabled), .mnsu-btn--primary:active:not(:disabled),
.ac-btn:active:not(:disabled), .cc-btn:active:not(:disabled), .fb-btn:active:not(:disabled),
.mn-nav-link:active, .mn-logout-btn:active, .mn-apk-btn:active, .mn-install-btn:active,
.mn-edit-btn-primary:active, .mn-edit-btn-secondary:active,
.topbar-actions button:active {
  transform: scale(.93) !important;
  transition-duration: .06s !important;
}

/* Filled / primary buttons dip in brightness so the tap visibly "pops". */
.btn-primary:active:not(:disabled), .btn-submit:active:not(:disabled),
.mnsu-btn--primary:active:not(:disabled), .mn-apk-btn:active,
.cc-btn:active:not(:disabled), .mn-edit-btn-primary:active {
  filter: brightness(.93) !important;
}

/* Universal, layout-safe press flash for EVERY other button too
   (brightness only — never touches transform, so a button that is
   positioned via transform can't be knocked out of place). */
button:active:not(:disabled) { filter: brightness(.95); }

/* Reduced motion: keep it instant, no scale. */
@media (prefers-reduced-motion: reduce) {
  .btn:active, .btn-primary:active, .btn-outline:active, .btn-submit:active,
  .mnsu-btn:active, .mnsu-btn--primary:active, .ac-btn:active, .cc-btn:active, .fb-btn:active,
  .mn-nav-link:active, .mn-logout-btn:active, .mn-apk-btn:active, .mn-install-btn:active,
  .mn-edit-btn-primary:active, .mn-edit-btn-secondary:active, .topbar-actions button:active {
    transform: none !important;
  }
}


/* ============================================================
   16. TOUCH FEEL POLISH (2026-07) - snappier, cleaner taps + a
       gentle hover lift and press-depth on the primary/action
       buttons. State-only (tap-highlight / touch-action / shadow /
       transform on NAMED classes only) - additive, layout-safe,
       reduced-motion aware. Applied on every platform via this
       shared skin.
   ============================================================ */

/* Remove the native grey/blue tap flash so OUR scale + brightness
   feedback is what the user sees, and drop the ~300ms tap delay so
   every tap registers instantly. Safe on all interactive elements. */
button, a, [role="button"], .nav-item, .tab, .cc-tab,
.mn-nav-link, input[type="button"], input[type="submit"], label {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Animate transform + shadow + brightness together on the common
   button set so hover-in, press, and bounce-back read as one fluid
   motion. Only TRANSITIONS these props (never sets transform), so
   no button is ever repositioned by this rule. */
.btn, .btn-primary, .btn-outline, .btn-submit, .confirm-btn,
.mnsu-btn, .mnsu-btn--primary, .ac-btn, .cc-btn, .fb-btn,
.mn-edit-btn-primary, .mn-edit-btn-secondary {
  transition: transform var(--mnsu-t) var(--mnsu-press),
              box-shadow var(--mnsu-t) ease,
              filter .12s ease,
              background-color var(--mnsu-t) ease,
              border-color var(--mnsu-t) ease !important;
}

/* Gentle hover LIFT + deeper shadow - ONLY on hover-capable devices
   (never sticks on a touchscreen) and ONLY on named primary/action
   classes (never generic `button`, so a transform-positioned button
   can never be knocked out of place). */
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover:not(:disabled), .btn-submit:hover:not(:disabled),
  .confirm-btn:hover:not(:disabled), .mnsu-btn--primary:hover:not(:disabled),
  .cc-btn:hover:not(:disabled), .mn-edit-btn-primary:hover:not(:disabled) {
    transform: translateY(-1.5px);
    box-shadow: 0 7px 20px rgba(15, 23, 42, .18);
  }
  .mnsu-raised:hover, .soft-card:hover { box-shadow: 0 10px 28px rgba(15, 23, 42, .14); }
}

/* On press, primary/action buttons settle DOWN with a tight shadow so
   the tap feels physical (pairs with the scale-in from section 15). */
.btn-primary:active:not(:disabled), .btn-submit:active:not(:disabled),
.confirm-btn:active:not(:disabled), .mnsu-btn--primary:active:not(:disabled),
.cc-btn:active:not(:disabled), .mn-edit-btn-primary:active:not(:disabled) {
  box-shadow: 0 2px 5px rgba(15, 23, 42, .2) !important;
}

/* Reduced motion: no hover lift. */
@media (prefers-reduced-motion: reduce) {
  .btn-primary:hover, .btn-submit:hover, .confirm-btn:hover,
  .mnsu-btn--primary:hover, .cc-btn:hover, .mn-edit-btn-primary:hover {
    transform: none !important;
  }
}


/* ============================================================
   17. UX MOTION FX (companion to mn-fx.js, 2026-07) - a success
       checkmark burst on save, and a first-fill entrance fade for
       list cards. Non-interactive (pointer-events:none), auto-
       removed, reduced-motion safe. Additive; no layout impact.
   ============================================================ */
.mnfx-success {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  z-index: 2147483000; pointer-events: none;
}
.mnfx-success svg { width: 96px; height: 96px; overflow: visible; }
.mnfx-success circle {
  fill: none; stroke: #16a34a; stroke-width: 3;
  stroke-dasharray: 151; stroke-dashoffset: 151;
  animation: mnfxCircle .42s ease-out forwards;
}
.mnfx-success path {
  fill: none; stroke: #16a34a; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 40; stroke-dashoffset: 40;
  animation: mnfxCheck .34s .34s ease-out forwards;
}
.mnfx-success::before {
  content: ''; position: absolute; width: 118px; height: 118px; border-radius: 50%;
  background: rgba(22, 163, 74, .12); transform: scale(.4); opacity: .85;
  animation: mnfxHalo .5s ease-out forwards;
}
@keyframes mnfxCircle { to { stroke-dashoffset: 0; } }
@keyframes mnfxCheck { to { stroke-dashoffset: 0; } }
@keyframes mnfxHalo { to { transform: scale(1.35); opacity: 0; } }

.mnfx-enter { animation: mnfxEnter .42s var(--mnsu-spring, cubic-bezier(.34,1.56,.64,1)) both; }
@keyframes mnfxEnter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  .mnfx-success, .mnfx-success circle, .mnfx-success path, .mnfx-success::before, .mnfx-enter {
    animation: none !important;
  }
  .mnfx-success { display: none !important; }
}