/* ═══════════════════════════════════════════════════════════
   PRICING TOOL — Global Design System
   Shared stylesheet included by every page.
   Handles: focus rings · scrollbars · selection · reduced-motion
            smooth theme transitions · touch targets · utilities
   ═══════════════════════════════════════════════════════════ */

/* ── Smooth theme transition ────────────────────────────────
   Transitions only properties that change between themes so
   layout/animation transforms are not affected.              */
html {
  transition:
    background-color 0.28s ease,
    color            0.28s ease;
}
body,
.panel, .card, .section-card, .profile-hero,
.sidebar, .nav-item, .user-pill, .setting-field,
.msg-bubble, .msg-input, .input-area,
.search-input-wrap, .tool-btn,
.dm-sidebar, .dm-convo, .dm-user-item,
.chat-input-bar, .floating-nav,
.video-card, .stat-card, .kpi-mini, .stat-tile,
.field, .margin-card, .breakdown-card,
.form-field input, .form-field select,
.input-field {
  transition:
    background-color 0.25s ease,
    border-color     0.22s ease,
    color            0.22s ease,
    box-shadow       0.25s ease;
}

/* ── Focus Rings (Accessibility — WCAG 2.4.7) ───────────────
   Uses :focus-visible so mouse users don't see outlines,
   but keyboard / assistive-technology users do.             */
:focus-visible {
  outline: 2px solid var(--accent, #e8b84b);
  outline-offset: 2px;
  border-radius: 4px;
}
/* Inputs and textareas already have a custom ring via border */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none;
}

/* ── Text / Range Selection ─────────────────────────────────*/
::selection {
  background: rgba(232, 184, 75, 0.32);
  color: inherit;
}
[data-theme="light"] ::selection {
  background: rgba(184, 137, 31, 0.22);
}

/* ── Scrollbars ─────────────────────────────────────────────
   Thin, subtle, adapts to theme.                            */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.10);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.20);
}
[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: rgba(15, 23, 42, 0.12);
}
[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(15, 23, 42, 0.22);
}
/* Firefox */
* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.10) transparent; }
[data-theme="light"] * { scrollbar-color: rgba(15,23,42,0.12) transparent; }

/* ── Touch Targets ──────────────────────────────────────────
   Prevent 300ms tap delay on mobile.                        */
button, a, [role="button"], label, select {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* ── Button Press Feedback ───────────────────────────────────
   Subtle scale on active press for tactile feel.            */
.send-btn:active,
.tool-btn:active,
.edit-save-btn:active,
.edit-cancel-btn:active,
.pinned-btn:active,
.search-nav-btn:active,
.search-close:active,
.dock-item:active .dock-icon,
.msg-action-btn:active {
  transform: scale(0.94);
  transition: transform 0.08s ease;
}
/* Nav items already scale — preserve that */
.dock-item:hover .dock-icon,
.dock-item:active .dock-icon {
  transition: transform 0.08s ease, background 0.2s, border-color 0.2s;
}

/* ── Page Entrance ───────────────────────────────────────────
   Soft fade-up so each page feels intentional.              */
@keyframes pg-fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0);    }
}
.wrapper,
.page-wrapper,
.profile-wrapper,
.videos-wrapper {
  animation: pg-fade-in 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ── Reduced Motion ─────────────────────────────────────────
   Respect system accessibility preference.                  */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration:       0.01ms !important;
    animation-iteration-count: 1     !important;
    transition-duration:      0.01ms !important;
    scroll-behavior:          auto   !important;
  }
}

/* ── Utility: Visually hidden (screen-reader only) ──────────*/
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}

/* ── Utility: Hover lift on cards ───────────────────────────
   Opt-in with class .hover-lift                             */
.hover-lift {
  transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1),
              box-shadow 0.2s ease !important;
}
.hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.22) !important;
}
[data-theme="light"] .hover-lift:hover {
  box-shadow: 0 6px 20px rgba(15,23,42,0.13) !important;
}

/* ── Utility: Number display (tabular figures) ───────────────
   Prevents layout shift in price/stat columns.              */
.num, .profit-amount, .margin-value, .breakdown-val {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* ── Global Avatar Ring Pulse ────────────────────────────────
   Used on avatar elements that should glow when active.     */
@keyframes avatarPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232,184,75,0); }
  50%       { box-shadow: 0 0 0 4px rgba(232,184,75,0.15); }
}

/* ── Input base refinements ─────────────────────────────────
   Ensure all inputs inherit from CSS variables consistently. */
input, textarea, select {
  color: var(--text, inherit);
  font-family: 'Cairo', sans-serif;
}
input::placeholder, textarea::placeholder {
  color: var(--text-dim, rgba(122,127,150,0.6));
}

/* ── Smooth page content fade-in ────────────────────────────
   Extra selectors for pages that use different wrapper names */
.main, .page.active {
  animation: pg-fade-in 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ── Card elevation tokens ───────────────────────────────────
   Dark mode card shadows (3 tiers).                         */
.elevation-1 { box-shadow: 0 1px  6px rgba(0,0,0,0.18); }
.elevation-2 { box-shadow: 0 2px 16px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.025); }
.elevation-3 { box-shadow: 0 4px 32px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.03);  }

[data-theme="light"] .elevation-1 { box-shadow: 0 1px  5px rgba(15,23,42,0.07), 0 0 0 1px rgba(15,23,42,0.05); }
[data-theme="light"] .elevation-2 { box-shadow: 0 2px 14px rgba(15,23,42,0.09), 0 0 0 1px rgba(15,23,42,0.06); }
[data-theme="light"] .elevation-3 { box-shadow: 0 4px 28px rgba(15,23,42,0.12), 0 0 0 1px rgba(15,23,42,0.07); }

/* ── Light mode: dot grid ────────────────────────────────────
   Ensure every page has a proper light-mode dot grid if used */
[data-theme="light"] .dot-grid {
  background-image: radial-gradient(rgba(15,23,42,0.065) 1px, transparent 1px);
}