/* ============================================================
   NIMRYX — Light-Glass Design Layer (uniform across the app)
   Loaded LAST. Retunes the light theme to a soft glassmorphism
   look + polishes the shared surface/control classes with subtle
   motion. Light-only; accent stays NIMRYX blue (--primary/--blue).
   Applied per-page via <link> during rollout (Hub pilot first).
   ============================================================ */

[data-theme="light"] {
  --bg: #F4F7FC;
  --s1: rgba(255,255,255,0.72);
  --s2: rgba(255,255,255,0.55);
  --s3: #EDF1FA;
  --s4: #E3E9F6;
  --b1: #E4E9F4;
  --b2: #D3DBEC;
  --b3: #B9C3DE;
  --glass: rgba(255,255,255,0.68);
  --glass-border: rgba(255,255,255,0.75);
  --shadow-sm: 0 1px 2px rgba(16,24,40,0.05);
  --shadow:    0 4px 16px rgba(16,24,40,0.07);
  --shadow-lg: 0 14px 34px rgba(16,24,40,0.10);
  --sh-sm: var(--shadow-sm); --sh-md: var(--shadow); --sh-lg: var(--shadow-lg);
  --radius: 14px; --r-md: 14px; --r-lg: 18px;
}

/* Soft ambient light-glass backdrop (subtle brand glows). */
[data-theme="light"] body {
  background:
    radial-gradient(1100px 560px at 100% -12%, rgba(26,115,255,0.06), transparent 60%),
    radial-gradient(880px 480px at -12% 112%, rgba(92,126,255,0.05), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}

/* Frosted glass surfaces — cards, panels, KPI tiles across every page. */
[data-theme="light"] .card,
[data-theme="light"] .panel,
[data-theme="light"] .kpi-card,
[data-theme="light"] [class*="-card"],
[data-theme="light"] [class*="-panel"] {
  background: var(--glass);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  box-shadow: var(--shadow);
  transition: transform .18s cubic-bezier(.4,0,.2,1), box-shadow .18s cubic-bezier(.4,0,.2,1);
}
[data-theme="light"] .card:hover,
[data-theme="light"] .panel:hover,
[data-theme="light"] .kpi-card:hover,
[data-theme="light"] [class*="-card"]:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* Controls — rounded, soft motion, focus ring. */
[data-theme="light"] .btn { border-radius: 10px; transition: transform .16s cubic-bezier(.4,0,.2,1), box-shadow .16s, background .16s; }
[data-theme="light"] .btn:hover { transform: translateY(-1px); }
[data-theme="light"] .btn-primary { box-shadow: 0 4px 14px rgba(26,115,255,0.28); }
[data-theme="light"] .btn-primary:hover { box-shadow: 0 6px 20px rgba(26,115,255,0.34); }
[data-theme="light"] input, [data-theme="light"] select, [data-theme="light"] textarea {
  border-radius: 10px; transition: border-color .16s, box-shadow .16s;
}
[data-theme="light"] input:focus, [data-theme="light"] select:focus, [data-theme="light"] textarea:focus {
  box-shadow: 0 0 0 3px rgba(26,115,255,0.15); outline: none;
}

/* Soft entrance for the main content surfaces. */
@keyframes glassIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
[data-theme="light"] .kpi-card, [data-theme="light"] .panel, [data-theme="light"] .card {
  animation: glassIn .4s cubic-bezier(.4,0,.2,1) both;
}

/* ── Color pop + hover (modern accents) ─────────────────────────
   User asked for more colour + hover life. Kept tasteful + on-brand;
   gradients here are deliberate (override the no-gradient contract for
   primary CTAs + stat accents only). */

/* Cards gain a brand edge + soft blue glow on hover (not just a lift). */
[data-theme="light"] .card:hover,
[data-theme="light"] .panel:hover,
[data-theme="light"] .kpi-card:hover,
[data-theme="light"] [class*="-card"]:hover {
  border-color: rgba(26,115,255,0.32);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(26,115,255,0.10), 0 10px 30px rgba(26,115,255,0.12);
}

/* Colour-coded stat cards — accent top bar + tinted icon + matching hover glow. */
[data-theme="light"] .stat { position: relative; overflow: hidden; transition: transform .18s cubic-bezier(.4,0,.2,1), box-shadow .18s, border-color .18s; }
[data-theme="light"] .stat::before { content:''; position:absolute; left:0; top:0; height:3px; width:100%; background: var(--accent, #1A73FF); }
[data-theme="light"] .stat.blue   { --accent:#1A73FF; }
[data-theme="light"] .stat.green  { --accent:#0ECB81; }
[data-theme="light"] .stat.amber  { --accent:#F5A623; }
[data-theme="light"] .stat.purple { --accent:#7C5CFF; }
[data-theme="light"] .stat.red    { --accent:#F0476A; }
[data-theme="light"] .stat.cyan   { --accent:#22B8CF; }
[data-theme="light"] .stat .stat-icon { color: var(--accent, #1A73FF); transition: transform .16s; }
[data-theme="light"] .stat:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent,#1A73FF) 40%, var(--b1));
  box-shadow: 0 12px 30px color-mix(in srgb, var(--accent,#1A73FF) 22%, transparent);
}
[data-theme="light"] .stat:hover .stat-icon { transform: scale(1.1); }

/* Row hovers everywhere — brand tint (nav, quick actions, lists, table rows). */
[data-theme="light"] .nav-item:hover,
[data-theme="light"] .trip-row:hover,
[data-theme="light"] .billing-row:hover,
[data-theme="light"] .list-row:hover,
[data-theme="light"] tbody tr:hover {
  background: rgba(26,115,255,0.06);
}

/* Quick-action tiles — colourful hover. */
[data-theme="light"] .qb-icon { transition: transform .16s, color .16s; }
[data-theme="light"] .quick-btn:hover { border-color: rgba(26,115,255,0.4); box-shadow: 0 8px 22px rgba(26,115,255,0.14); }
[data-theme="light"] .quick-btn:hover .qb-icon { color:#1A73FF; transform: scale(1.1); }

/* Primary buttons — subtle brand gradient + lively hover. */
[data-theme="light"] .btn-primary,
[data-theme="light"] .btn.primary {
  background: linear-gradient(135deg, #1A73FF, #4C8DFF);
  border-color: transparent; color:#fff;
}
[data-theme="light"] .btn-primary:hover,
[data-theme="light"] .btn.primary:hover { background: linear-gradient(135deg, #1666EC, #3B82FF); }

/* Nav-item active/hover — brand accent bar. */
[data-theme="light"] .nav-item { transition: background .15s, color .15s; }
[data-theme="light"] .nav-item:hover { color:#1A73FF; }

/* ── Mac-style motion (subtle & premium) ────────────────────────
   Spring easing, small scales, smooth loading + show/hide. Scoped to
   light theme; reduced-motion guard below disables it all. */
:root { --mac-spring: cubic-bezier(.34,1.56,.64,1); --mac-ease: cubic-bezier(.22,.61,.36,1); }

/* Press-scale — the Mac "tap" feel. */
[data-theme="light"] .btn:active,
[data-theme="light"] .quick-btn:active,
[data-theme="light"] .nav-item:active,
[data-theme="light"] button:active:not(:disabled) { transform: scale(.97); }

/* Spring hover on surfaces (refines the earlier lift). */
[data-theme="light"] .card,
[data-theme="light"] .panel,
[data-theme="light"] .kpi-card,
[data-theme="light"] .stat,
[data-theme="light"] .quick-btn,
[data-theme="light"] [class*="-card"] {
  transition: transform .22s var(--mac-spring), box-shadow .22s var(--mac-ease), border-color .18s var(--mac-ease);
}

/* Entrance — soft slide-up + fade (8px), spring-lite. Overrides glassIn. */
@keyframes macIn { from { opacity: 0; transform: translateY(8px) scale(.996); } to { opacity: 1; transform: none; } }
[data-theme="light"] .card,
[data-theme="light"] .panel,
[data-theme="light"] .kpi-card,
[data-theme="light"] .stat { animation: macIn .26s var(--mac-ease) both; }

/* Loading — Mac shimmer skeleton (slow sweep). */
[data-theme="light"] .skeleton,
[data-theme="light"] .tc-skeleton,
[data-theme="light"] [class*="skeleton"] {
  background: linear-gradient(100deg, var(--s3) 28%, rgba(255,255,255,.75) 50%, var(--s3) 72%);
  background-size: 200% 100%;
  animation: macShimmer 1.4s ease-in-out infinite;
  border-radius: 8px;
}
@keyframes macShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* 3-dot loader — add <span class="mac-dots"><i></i><i></i><i></i></span>. */
.mac-dots { display: inline-flex; gap: 5px; align-items: center; }
.mac-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--blue, #1A73FF); animation: macDot 1.1s ease-in-out infinite; }
.mac-dots i:nth-child(2) { animation-delay: .15s; }
.mac-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes macDot { 0%,80%,100% { transform: scale(.5); opacity: .4; } 40% { transform: scale(1); opacity: 1; } }

/* Show/hide — Mac zoom-from-origin for modals, menus, dropdowns. */
@keyframes macZoom { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
[data-theme="light"] .modal,
[data-theme="light"] .overlay.open > *,
[data-theme="light"] [class*="modal"]:not(.overlay),
[data-theme="light"] .menu.open,
[data-theme="light"] .dropdown.open { animation: macZoom .18s var(--mac-ease) both; }

/* Collapsibles — smooth unhide. */
[data-theme="light"] details[open] > :not(summary) { animation: macIn .2s var(--mac-ease) both; }

/* Toasts — slide-in from the corner (spring). */
@keyframes macToast { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
[data-theme="light"] .toast,
[data-theme="light"] .toast.on,
[data-theme="light"] [class*="toast"] { animation: macToast .28s var(--mac-spring) both; }

/* Respect reduced-motion. */
@media (prefers-reduced-motion: reduce) {
  [data-theme="light"] * { animation: none !important; transition: none !important; }
}