/*
 * ============================================================
 * Pulse Analytics — Overrides
 * Loaded LAST — wins over hashed Tailwind bundle.
 *
 * AGENT TEAM
 * ──────────────────────────────────────────────────────────
 * Lead Architect  : Token cascade strategy, bare :root fix
 * CSS Engineer    : Mobile sidebar, touch targets, layout
 * Samsung Agent   : Samsung Internet quirks, var fallbacks
 * QA Agent        : Cascade verification, mobile audit
 * ──────────────────────────────────────────────────────────
 *
 * ROOT CAUSE OF SEPIA BUG:
 *   The Tailwind bundle ends with a bare :root { --background:
 *   38 44% 92% } (sepia). Our overrides.css loads AFTER the
 *   bundle so our bare :root wins by source order. BUT Samsung
 *   Internet and some Android Chrome builds have a bug where
 *   they resolve hsl(var(--background)) using the FIRST :root
 *   declaration they encounter (the bundle's sepia one) rather
 *   than the last. Fix: override ALL bare HSL vars on :root
 *   here, AND hardcode background-color on html/body with
 *   !important so no var resolution is needed at all.
 * ============================================================
 */

/* ============================================================
   1. BARE :root — override ALL HSL vars (light defaults)
   Wins over bundle's sepia :root by source order.
   Also overrides --color-* computed tokens used by @layer theme.
   ============================================================ */
:root {
  /* HSL vars — used by bundle's hsl(var(--xxx)) utilities */
  --background:                 210 20% 98%;
  --foreground:                 222 47% 11%;
  --card:                         0  0% 100%;
  --card-foreground:            222 47% 11%;
  --primary:                    214 48% 33%;
  --primary-foreground:         210 40% 98%;
  --secondary:                  220 14% 96%;
  --secondary-foreground:       222 47% 11%;
  --muted:                      220 14% 96%;
  --muted-foreground:           220  9% 46%;
  --accent:                     220 14% 93%;
  --accent-foreground:          222 47% 11%;
  --border:                     220 13% 91%;
  --input:                      220 13% 88%;
  /* Computed tokens — used by @layer theme --color-* utilities */
  --color-background:           hsl(210, 20%, 98%);
  --color-foreground:           hsl(222, 47%, 11%);
  --color-card:                 hsl(0, 0%, 100%);
  --color-card-foreground:      hsl(222, 47%, 11%);
  --color-primary:              hsl(214, 48%, 33%);
  --color-primary-foreground:   hsl(210, 40%, 98%);
  --color-secondary:            hsl(220, 14%, 96%);
  --color-secondary-foreground: hsl(222, 47%, 11%);
  --color-muted:                hsl(220, 14%, 96%);
  --color-muted-foreground:     hsl(220, 9%, 46%);
  --color-accent:               hsl(220, 14%, 93%);
  --color-accent-foreground:    hsl(222, 47%, 11%);
  --color-border:               hsl(220, 13%, 91%);
  --color-input:                hsl(220, 13%, 88%);
}

/* ============================================================
   2. DARK MODE — override all vars back to dark palette
   :root.dark has higher specificity than bare :root.
   ============================================================ */
:root.dark {
  --background:                 30 18%  8%;
  --foreground:                 38 25% 88%;
  --card:                       30 18% 11%;
  --card-foreground:            38 25% 88%;
  --primary:                   210 60% 65%;
  --primary-foreground:         30 18% 10%;
  --secondary:                  30 14% 18%;
  --secondary-foreground:       38 25% 88%;
  --muted:                      30 14% 17%;
  --muted-foreground:           38 16% 66%;
  --accent:                     30 14% 18%;
  --accent-foreground:          38 25% 88%;
  --border:                     32 17% 23%;
  --input:                      32 17% 26%;
  --color-background:           hsl(30, 18%, 8%);
  --color-foreground:           hsl(38, 25%, 88%);
  --color-card:                 hsl(30, 18%, 11%);
  --color-primary:              hsl(210, 60%, 65%);
  --color-primary-foreground:   hsl(30, 18%, 10%);
  --color-border:               hsl(32, 17%, 23%);
  --color-input:                hsl(32, 17%, 26%);
  --color-muted:                hsl(30, 14%, 17%);
  --color-muted-foreground:     hsl(38, 16%, 66%);
  --color-secondary:            hsl(30, 14%, 18%);
  --color-secondary-foreground: hsl(38, 25%, 88%);
  --color-accent:               hsl(30, 14%, 18%);
  --color-accent-foreground:    hsl(38, 25%, 88%);
}

/* ============================================================
   3. COLOR-SCHEME + BODY BACKGROUND
   Hardcoded !important values bypass Samsung Internet var bugs.
   ============================================================ */
:root:not(.dark) { color-scheme: light; }
:root.dark        { color-scheme: dark;  }

/* html bg — hardcoded, no var() needed, Samsung Internet safe */
html {
  background-color: #f5f7fa;
}
html.dark {
  background-color: #1a1209;
}

:root:not(.dark) body {
  background-color: hsl(210, 20%, 98%) !important;
  color: hsl(222, 47%, 11%) !important;
}
:root.dark body {
  background-color: hsl(30, 18%, 8%) !important;
  color: hsl(38, 25%, 88%) !important;
}

/* Inter font — loaded in index.html, applied here */
html, body {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif !important;
}

/* ============================================================
   4. LINKEDIN / SAMSUNG WEBVIEW — DEFINITIVE SCROLL FIX
   ─────────────────────────────────────────────────────────────
   ROOT CAUSES:
   A. scroll-behavior: smooth on <html> → SFSVC animation lock
   B. overscroll-behavior-y: contain → CCT scroll chaining
   C. overflow on <body> → creates scroll container, triggers
      LinkedIn swipe-back gesture detection
   D. Horizontal overflow → LinkedIn touchmove preventDefault
   ============================================================ */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* A: override Tailwind's scroll-behavior:smooth */
  scroll-behavior: auto !important;
  /* B: 'none' prevents scroll chaining into LinkedIn's native container */
  overscroll-behavior-y: none;
  padding-top:   env(safe-area-inset-top, 0px);
  padding-left:  env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

body {
  /* C: NO overflow, NO overscroll-behavior on body */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* D: Prevent horizontal overflow — LinkedIn touchmove fix */
#root {
  max-width: 100vw;
  overflow-x: clip;
}
@supports not (overflow: clip) {
  #root { overflow-x: hidden; }
}

/* dvh with svh fallback for Samsung Internet ≤21 */
@supports (height: 100dvh) {
  .min-h-screen { min-height: 100dvh !important; }
}
@supports not (height: 100dvh) {
  @supports (height: 100svh) {
    .min-h-screen { min-height: 100svh !important; }
  }
}

/* ============================================================
   5. SCROLLBAR
   ============================================================ */
:root:not(.dark) ::-webkit-scrollbar { width: 6px; height: 6px; }
:root:not(.dark) ::-webkit-scrollbar-track { background: hsl(220, 14%, 96%); }
:root:not(.dark) ::-webkit-scrollbar-thumb { background: hsl(220, 13%, 80%); border-radius: 3px; }
:root:not(.dark) ::-webkit-scrollbar-thumb:hover { background: hsl(220, 9%, 62%); }

/* ============================================================
   5b. PROJECT NAV CLEARANCE — EXPANDED SIDEBAR (≥768px)
   ─────────────────────────────────────────────────────────────
   #project-nav-container is position:fixed at top:12px/left:12px
   spanning x≈12-48px (36px button). The "PulseAnalytics Pro"
   logo/title in the sidebar header sits at x=20-155, directly
   under the button. Reserve 3.5rem left padding so the logo
   starts clear of the project-nav button. */
@media (min-width: 768px) {
  aside.fixed:not(.w-20) .h-16.flex.items-center.px-5 {
    padding-left: 3.5rem !important;
  }
}

/* ============================================================
   5c. TABLET (768-1023px) - SIDEBAR HEADER DROPS BELOW CHROME
   At touch widths both fixed chrome buttons are 44x44, so they
   occupy x=12..104 / y=12..56 (#project-nav-btn 12-56,
   #theme-toggle-btn 60-104) instead of x=12..88 / y=12..48.
   That whole band lands on the sidebar's 64px-tall header row.

   Section 5b's horizontal fix cannot absorb this: clearing
   x=104 needs a 116px inset, and the sidebar is only 260px
   wide, so 116px + the 135px "PulseAnalytics Pro" lockup +
   20px right padding overflows it and truncates the title.
   So push the lockup DOWN instead - the same move section 6b/1b
   already makes for the collapsed sidebar - and hand the px-5
   inset back now that no horizontal clearance is needed.
   >=1024px is deliberately untouched.
   ============================================================ */
@media (min-width: 768px) and (max-width: 1023px) {
  aside.fixed:not(.w-20) .h-16.flex.items-center.px-5 {
    height: auto !important;
    align-items: flex-start !important;
    padding-top: 4.25rem !important;
    padding-left: 1.25rem !important;
  }

  /* Collapsed sidebar: section 6b/1b drops the icon by 2.75rem (44px),
     which was tuned to the 36px button's ~42.5px bottom edge. The chrome
     row now ends at y=56, so match the expanded case. */
  aside.fixed.w-20 .h-16.flex.items-center {
    padding-top: 4.25rem !important;
  }

  /* Collapsed sidebar, main content: the sidebar shrinks to 64px, so the
     top bar starts at x=64 and its own 32px inset put the search field at
     x=96 - 8px under the theme toggle's new right edge (x=104). 3.25rem
     (52px) restores a 12px gap. Only reachable after clicking collapse,
     so audit.js never sees it. */
  aside.fixed.w-20 ~ div header.sticky > div {
    padding-left: 3.25rem !important;
  }
}

/* ============================================================
   6. MOBILE SIDEBAR — handled entirely by index.html inline
   CSS + JS (aside.fixed selector + data-nav-open on body).
   See <style> block in index.html for the implementation.
   ============================================================ */

/* Sidebar toggle button — base hidden state (shown via inline style) */
#mob-nav-btn {
  display: none;
}

/* ============================================================
   6b. DESKTOP COLLAPSED SIDEBAR — sizing fix
   ─────────────────────────────────────────────────────────────
   React renders collapsed sidebar as w-20 (80px). Industry
   standard for icon-only sidebars is 64px (Linear, Vercel,
   GitHub). At 80px, icons appear adrift; at 64px they center
   naturally: (64 - 18px icon) / 2 = 23px each side.

   Selectors:
   - aside.fixed.w-20          → the sidebar itself
   - aside.fixed.w-20 ~ div.ml-20 → main content wrapper
   - children scoped inside    → header, nav btns, collapse btn

   Specificity beats Tailwind's single-class rules without
   needing !important. Scoped to ≥768px so mobile is unaffected.
   ============================================================ */
@media (min-width: 768px) {
  /* 1. Sidebar width: 80px → 64px */
  aside.fixed.w-20 {
    width: 64px;
  }

  /* 1b. Collapsed logo icon: drop below the fixed #project-nav-container
     (top:12px, height:30.5px, so bottom≈42.5px). The sidebar header row
     is only h-16 (64px) with items-center, which centers the 32px icon
     at y=16-48 — squarely behind the button (see PORTFOLIO BACK-BUTTON
     CLEARANCE comment below for the expanded-sidebar case of this same
     root cause). Push the icon down below the button instead of
     centering it in the now-too-short header. */
  aside.fixed.w-20 .h-16.flex.items-center {
    height: auto;
    padding-top: 2.75rem;
    align-items: flex-start;
  }

  /* 2. Main content margin matches new sidebar width */
  aside.fixed.w-20 ~ div.ml-20 {
    margin-left: 64px;
  }

  /* 3. Header: center the logo icon, remove asymmetric px-5 */
  aside.fixed.w-20 .h-16.flex.items-center {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
  }

  /* 4. Nav item buttons: center icons */
  aside.fixed.w-20 nav button {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
  }

  /* 5. Collapse toggle button: center chevron */
  aside.fixed.w-20 > div:last-child > button:last-child {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
  }
}

@media (max-width: 767px) {
  /* ──────────────────────────────────────────────────────────
     MOBILE MASTER SECTION
     Agent consensus: CSS/Layout + Touch/Interaction + Typography
     Targets: 320px (SE), 375px, 390px, 414px, 428px
     ────────────────────────────────────────────────────────── */

  /* ── A. LAYOUT FOUNDATIONS ─────────────────────────────────*/

  /* Sidebar: slide off-screen (handled by index.html inline CSS) */
  aside.fixed ~ div {
    margin-left: 0 !important;
    transition: none !important;
  }

  /* Strip backdrop-blur — Samsung Internet perf */
  [class*="backdrop-blur"],
  #project-nav-btn {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  /* Activity feed & traffic sources cards: cap height on mobile
     so they don't push subsequent dashboard sections off-screen.
     The h-full on these cards expands infinitely in single-column
     grid, hiding the chart/table cards below the fold. */
  .bg-card.h-full.flex.flex-col,
  .bg-card.border.border-border.rounded-xl.p-6.h-full {
    max-height: 360px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Grid sections: ensure all rows are visible, no height constraint */
  .grid.grid-cols-1 {
    height: auto !important;
    overflow: visible !important;
  }

  /* Main content padding: responsive scale
     0.75rem (12px) is tight on all phones — use 1rem default */
  .p-8 {
    padding: 1rem !important;
  }
  main.p-8,
  main[class*="p-8"] {
    padding: 1rem !important;
  }

  /* ── B. HEADER — ADAPTIVE PADDING ─────────────────────────
     Real DOM: header contains a search bar (.flex-1.max-w-md) and
     an icon-button group (.flex.items-center.gap-1.5) — NOT the
     time-period selector (that lives lower, in the page toolbar,
     handled separately in section F). At ≤767px the fixed chrome
     row holds three 44px buttons packed left-to-right with no gap:
     #project-nav-btn (x=12-56) + #theme-toggle-btn (x=60-104) +
     #mob-nav-btn (x=112-156). Header content must clear x=156 with
     an 8px breathing gap, so content starts at x=164 = 10.25rem.
     Add flex-wrap so the search bar drops to its own row on very
     narrow phones instead of squeezing unreadable. */
  .sticky.top-0.z-30.h-16 > div {
    padding-left: 10.25rem !important;
    padding-right: 0.75rem !important;
    flex-wrap: wrap !important;
    min-height: 3.5rem !important;
    height: auto !important;
    gap: 0.5rem !important;
  }
  /* Allow header to grow when content wraps */
  .sticky.top-0.z-30.h-16 {
    height: auto !important;
    min-height: 3.5rem !important;
    padding-block: 0.5rem !important;
  }
  /* Search input: shrink gracefully rather than overflowing */
  .sticky.top-0.z-30.h-16 .flex-1.max-w-md {
    min-width: 140px;
  }

  /* ── C. KPI GRID — RESPONSIVE COLUMNS ──────────────────────
     2-col default on phones ≥360px; 1-col on tiny (≤359px)
     Uses minmax(0, 1fr) to prevent content overflow — plain 1fr
     has an implicit min of auto which lets sparkline SVGs push
     the 2nd/4th cards past the viewport edge (clipped by
     #root overflow-x:clip, making them "blocked from viewing"). */
  .grid-cols-1.sm\:grid-cols-2.xl\:grid-cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.75rem !important;
  }
  .grid-cols-1.sm\:grid-cols-2.xl\:grid-cols-4 > * {
    min-width: 0 !important;
    overflow: hidden !important;
  }

  /* ── D. CHARTS — PROPER RECHARTS TARGETING ─────────────────
     The bundle's .h-[420px] and .h-44 don't exist at runtime.
     Recharts uses inline styles on .recharts-responsive-container.
     Target the actual rendered elements. */
  .recharts-responsive-container {
    height: 240px !important;
    max-height: 240px !important;
  }
  /* Also target any explicit height containers from the bundle */
  .h-\[420px\] { height: 240px !important; }
  .h-44        { height: 140px !important; }
  /* Recharts SVG — ensure it fits.
     NOTE: deliberately NOT setting overflow:hidden on the parent
     .card here — Recharts tooltips portal into .recharts-wrapper
     itself (a child of .card), and clip near chart edges if the
     ancestor clips overflow. Height caps below are sufficient to
     prevent layout overflow without breaking tooltip rendering. */
  .recharts-wrapper {
    max-height: 240px !important;
  }
  .recharts-surface {
    max-height: 220px !important;
  }

  /* ── E. TABLES — ENHANCED SCROLL UX ────────────────────────*/
  .overflow-x-auto {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    position: relative;
  }
  /* Table font scaling for narrow columns */
  table .text-sm,
  table .text-xs,
  table td,
  table th {
    font-size: 11px !important;
    white-space: nowrap;
  }

  /* ── F. PAGE TOOLBAR — TIME PERIOD SELECTOR + ACTIONS ──────
     Real DOM: `.flex.items-end.justify-between.flex-wrap.gap-4`
     wraps [title block] + [.flex.items-center.gap-2 (filter tabs,
     Export, Create)]. It already has flex-wrap, but the inner
     action group can still overflow on narrow phones — make that
     inner group horizontally scrollable instead of wrapping into
     a cramped multi-row mess. */
  .flex.items-end.justify-between.flex-wrap.gap-4 {
    gap: 0.75rem !important;
  }
  .flex.items-end.justify-between.flex-wrap.gap-4 > .flex.items-center.gap-2 {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap !important;
    max-width: 100%;
    padding-bottom: 2px; /* room for momentum scroll without clipping shadow/border */
  }
  .flex.items-end.justify-between.flex-wrap.gap-4 > .flex.items-center.gap-2::-webkit-scrollbar {
    display: none;
  }
  /* Time filter buttons + Export/Create shouldn't shrink into unreadable pills.
     EXCEPTION: The period selector (first child) MUST shrink so the Create
     button doesn't get clipped past the viewport by #root overflow-x:clip.
     Period buttons get tighter padding to compensate. */
  .flex.items-end.justify-between.flex-wrap.gap-4 > .flex.items-center.gap-2 > * {
    flex-shrink: 0;
  }
  .flex.items-end.justify-between.flex-wrap.gap-4 > .flex.items-center.gap-2 > *:first-child {
    flex-shrink: 1 !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }
  .flex.items-end.justify-between.flex-wrap.gap-4 > .flex.items-center.gap-2 > *:first-child button {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    font-size: 11px !important;
  }

  /* ── G. TOUCH TARGETS — 44px MINIMUM (Apple HIG) ───────────*/
  button, a, [role="button"] {
    min-height: 44px;
  }
  /* Tap highlight */
  a, button {
    -webkit-tap-highlight-color: transparent !important;
  }

  /* ── H. BUTTON ACTIVE STATES — HAPTIC FEEDBACK FEEL ────────*/
  #mob-nav-btn:active,
  #project-nav-btn:active {
    transform: scale(0.92) !important;
    transition: transform 0.08s ease-out !important;
  }
  button:active,
  [role="button"]:active {
    opacity: 0.85;
    transform: scale(0.97);
  }

  /* ── I. SIDEBAR NAV — TOUCH OPTIMIZED ──────────────────────*/
  aside.fixed nav button {
    min-height: 48px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
  aside.fixed .space-y-0\.5 > * {
    margin-bottom: 4px !important;
  }

  /* ── J. ACTIVITY FEED — TOUCH SPACING ──────────────────────*/
  :where(.space-y-2\.5 > :not(:last-child)) {
    margin-block-end: 0.75rem !important;
  }
  .overflow-y-auto {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
  }

  /* ── L. BOTTOM SAFE AREA — MOBILE BROWSER CHROME ───────────
     Ensure last content isn't hidden behind iPhone home indicator
     or Android nav gestures. */
  #root {
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* ── M. ANIMATION PERFORMANCE — REDUCE JANK ────────────────*/
  .transition-all {
    transition-property: opacity, transform, background-color, border-color !important;
  }
  /* Disable hover card effects (irrelevant on touch) */
  .card:hover {
    border-color: hsl(var(--border)) !important;
  }

  /* ── N. DARK MODE OVERLAY — STRONGER CONTRAST ──────────────*/
  :root.dark body[data-nav-open="1"]::before {
    background: rgba(0, 0, 0, 0.65) !important;
  }

  /* ── O. RECHARTS TOOLTIP — MOBILE OPTIMIZED ────────────────*/
  .recharts-tooltip-wrapper {
    pointer-events: none !important;
  }
  .recharts-default-tooltip {
    font-size: 11px !important;
    padding: 6px 8px !important;
    border-radius: 6px !important;
    max-width: 200px !important;
  }

  /* ── P. FOCUS-VISIBLE — ACCESSIBILITY ──────────────────────*/
  button:focus-visible,
  a:focus-visible,
  [role="button"]:focus-visible {
    outline: 2px solid hsl(var(--primary)) !important;
    outline-offset: 2px !important;
  }
}

/* ============================================================
   6c. MOBILE — EXTRA-SMALL BREAKPOINT (≤359px, iPhone SE)
   ============================================================ */
@media (max-width: 359px) {
  /* KPI grid: fall back to 1 column on tiny screens */
  .grid-cols-1.sm\:grid-cols-2.xl\:grid-cols-4 {
    grid-template-columns: 1fr !important;
  }
  /* Tighter main padding */
  .p-8, main.p-8 {
    padding: 0.75rem !important;
  }
  /* Smaller border radius — cards too boxy on tiny screens */
  .rounded-xl {
    border-radius: 8px !important;
  }
  /* Header: same 10.25rem clearance as the ≤767px rule above (must
     match  this block's later source order would otherwise win the
     cascade at ≤359px and reintroduce the hamburger overlap). */
  .sticky.top-0.z-30.h-16 > div {
    padding-left: 10.25rem !important;
  }
  /* Search input: on the narrowest phones (≤359px) the content box
     is only ~144px (320 - 164 padding-left - 12 padding-right), a
     4px-slack fit against the 140px min-width set above. Lower the
     floor slightly here so the search can never force an overflow
     on the smallest supported phones. */
  .sticky.top-0.z-30.h-16 .flex-1.max-w-md {
    min-width: 120px;
  }
}

/* ============================================================
   6d. MOBILE — SMALL PHONE (≤413px) TYPOGRAPHY + SPACING
   Typography agent: fluid scaling for KPI values & headings
   ============================================================ */
@media (max-width: 413px) {
  /* KPI value font: prevent overflow in 2-col grid */
  .text-\[26px\] {
    font-size: clamp(18px, 5vw, 24px) !important;
  }
  .text-\[28px\] {
    font-size: clamp(20px, 5.5vw, 26px) !important;
  }
  /* Page heading */
  .text-2xl {
    font-size: clamp(18px, 5vw, 22px) !important;
  }
  /* Card internal padding — reclaim space */
  .p-5, .p-6 {
    padding: 0.75rem !important;
  }
  .px-5, .px-6 {
    padding-inline: 0.75rem !important;
  }
  /* Reduce gaps */
  .gap-5, .gap-4 {
    gap: 0.625rem !important;
  }
}

/* ============================================================
   6e. MOBILE — LARGE PHONE (≥414px) ENHANCEMENTS
   More breathing room on iPhone Plus / Pro Max
   ============================================================ */
@media (min-width: 414px) and (max-width: 767px) {
  /* Slightly more generous padding */
  .p-8, main.p-8 {
    padding: 1.25rem !important;
  }
  /* KPI values can be larger on bigger phones */
  .text-\[26px\] {
    font-size: 24px !important;
  }
  .text-\[28px\] {
    font-size: 26px !important;
  }
}

/* ============================================================
   6f. TYPOGRAPHY — MOBILE LINE HEIGHTS & READABILITY
   ============================================================ */
@media (max-width: 767px) {
  /* Body text minimum size */
  .text-\[13px\] {
    line-height: 1.5 !important;
  }
  .text-\[12px\] {
    line-height: 1.5 !important;
  }
  /* Micro labels — ensure they're not too small to read */
  .text-\[10px\] {
    font-size: 10px !important;
    line-height: 1.4 !important;
    letter-spacing: 0.03em !important;
  }
  .text-\[11px\] {
    font-size: 11px !important;
    line-height: 1.45 !important;
  }
  /* Headings: tighter tracking on mobile for space efficiency */
  .text-xl, .text-2xl, .text-lg {
    letter-spacing: -0.02em !important;
  }
  /* KPI card labels — semibold for mobile readability */
  .text-muted-foreground.text-xs {
    font-weight: 500 !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  [class*="backdrop-blur"] {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

/* ============================================================
   7. REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   8. SAMSUNG INTERNET — color-mix() FALLBACKS (≤v21)
   ============================================================ */
@supports not (color: color-mix(in srgb, red, blue)) {
  :root:not(.dark) .bg-primary\/5 {
    background-color: hsl(214, 48%, 96%) !important;
  }
  :root:not(.dark) .border-primary\/20,
  :root:not(.dark) .border-primary\/30 {
    border-color: hsl(214, 48%, 78%) !important;
  }
  :root:not(.dark) .bg-green-500\/10 {
    background-color: #dcfce7 !important;
  }
  :root:not(.dark) .bg-red-500\/5 {
    background-color: #fef2f2 !important;
  }
  :root:not(.dark) .bg-muted\/40 {
    background-color: hsl(220, 14%, 94%) !important;
  }
}


/* ============================================================
   9. DESKTOP — ALL SCREEN SIZES
   Layout, Typography, Color agents.
   Targets: 1024px (lg), 1280px (xl), 1536px (2xl), 1920px+
   ============================================================ */

/* ── 9a. GLOBAL font smoothing ──────────────────────────────*/
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── 9b. ULTRA-WIDE CONTENT CAP (1536px+) ───────────────────
   At 1920px+ the main content area stretches to full width.
   Cap the inner page wrapper so charts/tables stay readable. */
@media (min-width: 1536px) {
  aside.fixed ~ div > .max-w-7xl,
  aside.fixed ~ div > div > .max-w-7xl {
    max-width: 1280px !important;
  }
}

/* ── 9c. KPI GRID — restore 4-col at xl (mobile override fix)
   The mobile override forces 2-col. Restore 4-col at xl+. */
@media (min-width: 1280px) {
  .grid-cols-1.sm\:grid-cols-2.xl\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* ── 9c-ii. CHART GRIDS — fix blocked 2nd/4th cards at lg (1024–1279px)
   ─────────────────────────────────────────────────────────────────────
   ROOT CAUSE: At lg (1024px+), `lg:grid-cols-3` with `lg:col-span-2`
   activates. With the 260px sidebar + 64px padding + 20px gap, the
   right column (Activity Feed, Traffic Sources) gets only ~220px —
   content is unreadable (labels truncated: "Org...", "Soci...", etc.)
   and effectively "blocked from viewing".
   FIX: Force these grids to stay single-column at lg. At xl (1280px+)
   the sidebar is wider (280px) but viewport gives enough room (~300px
   right column) for content to render fully. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .grid.grid-cols-1.lg\:grid-cols-3 {
    grid-template-columns: 1fr !important;
  }
  /* Remove col-span override — everything is single column now */
  .grid.grid-cols-1.lg\:grid-cols-3 > .lg\:col-span-2 {
    grid-column: span 1 !important;
  }
}

/* ── 9d. CHART HEIGHT SCALING ───────────────────────────────
   Charts are capped at 240px on mobile. Restore at desktop. */
@media (min-width: 768px) {
  .h-\[420px\] { height: 420px !important; }
  .h-44        { height: 11rem !important; }
  .recharts-responsive-container,
  .recharts-wrapper {
    max-height: none !important;
  }
  .recharts-surface {
    max-height: none !important;
  }

  /* Restore activity feed / tall cards — remove mobile height cap */
  .bg-card.h-full.flex.flex-col,
  .bg-card.border.border-border.rounded-xl.p-6.h-full {
    max-height: none !important;
    overflow-y: visible !important;
  }
}

/* ── 9e. SIDEBAR EXPANDED WIDTH — 1280px+ ───────────────────
   At xl+ the expanded sidebar can be slightly wider (280px)
   for better label readability. Collapsed stays at 64px. */
@media (min-width: 1280px) {
  aside.fixed.w-\[260px\] {
    width: 280px !important;
  }
  aside.fixed.w-\[260px\] ~ div.ml-\[260px\] {
    margin-left: 280px !important;
  }
}

/* ── 9f. HEADING TRACKING ───────────────────────────────────*/
@media (min-width: 1024px) {
  h1, h2 { letter-spacing: -0.02em !important; }
}


/* ============================================================
   LIVE REVENUE CARD — COLOR THEORY CONTRAST (LIGHT + DARK)
   ─────────────────────────────────────────────────────────────
   COLOR THEORY APPLIED:
   
   1. COMPLEMENTARY CONTRAST: Uses blue (210°) accent against the
      sidebar's neutral base — creates chromatic pop in both modes.
   2. VALUE CONTRAST: Card is distinctly different lightness from
      sidebar in both modes (lighter bg in dark, deeper tint in light).
   3. 60-30-10 RULE: Solid base (60%), gradient accent (30%), glow (10%).
   4. TEXT LEGIBILITY: All text meets WCAG AA minimum (4.5:1 body, 3:1 large).
   ============================================================ */

/* ── DARK MODE: Navy card on warm-brown sidebar ── */
:root.dark aside.fixed .bg-gradient-to-br[class*="from-blue"][class*="rounded-xl"] {
  background:
    linear-gradient(
      135deg,
      hsl(210, 45%, 22%) 0%,
      hsl(220, 40%, 18%) 60%,
      hsl(200, 35%, 16%) 100%
    ) !important;
  border: 1px solid hsl(210, 50%, 40%, 0.45) !important;
  box-shadow:
    0 0 0 1px hsl(210, 50%, 45%, 0.12),
    0 4px 20px hsl(210, 60%, 15%, 0.5),
    inset 0 1px 0 hsl(210, 60%, 50%, 0.1) !important;
}

:root.dark aside.fixed .bg-gradient-to-br[class*="from-blue"][class*="rounded-xl"] .text-xs,
:root.dark aside.fixed .bg-gradient-to-br[class*="from-blue"][class*="rounded-xl"] [class*="text-xs"],
:root.dark aside.fixed .bg-gradient-to-br[class*="from-blue"][class*="rounded-xl"] [class*="uppercase"] {
  font-size: 11px !important;
  letter-spacing: 0.05em !important;
  color: hsl(210, 40%, 80%) !important;
}

:root.dark aside.fixed .bg-gradient-to-br[class*="from-blue"][class*="rounded-xl"] .text-xl {
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

:root.dark aside.fixed .bg-gradient-to-br[class*="from-blue"][class*="rounded-xl"] [class*="text-emerald"],
:root.dark aside.fixed .bg-gradient-to-br[class*="from-blue"][class*="rounded-xl"] [class*="text-green"] {
  color: hsl(145, 70%, 55%) !important;
}

:root.dark aside.fixed .bg-gradient-to-br[class*="from-blue"][class*="rounded-xl"]::before {
  content: '';
  position: absolute;
  top: 0;
  left: 12px;
  right: 12px;
  height: 2px;
  background: linear-gradient(90deg, transparent, hsl(210, 80%, 60%, 0.6), hsl(190, 70%, 55%, 0.4), transparent);
  border-radius: 2px;
}

/* ── LIGHT MODE: Blue-tinted card on light sidebar ── */
:root:not(.dark) aside.fixed .bg-gradient-to-br[class*="from-blue"][class*="rounded-xl"] {
  background:
    linear-gradient(
      135deg,
      hsl(214, 55%, 94%) 0%,
      hsl(210, 50%, 90%) 50%,
      hsl(220, 45%, 92%) 100%
    ) !important;
  border: 1px solid hsl(214, 48%, 70%, 0.5) !important;
  box-shadow:
    0 0 0 1px hsl(214, 48%, 80%, 0.2),
    0 4px 16px hsl(214, 48%, 33%, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
}

:root:not(.dark) aside.fixed .bg-gradient-to-br[class*="from-blue"][class*="rounded-xl"] .text-xs,
:root:not(.dark) aside.fixed .bg-gradient-to-br[class*="from-blue"][class*="rounded-xl"] [class*="text-xs"],
:root:not(.dark) aside.fixed .bg-gradient-to-br[class*="from-blue"][class*="rounded-xl"] [class*="uppercase"] {
  font-size: 11px !important;
  letter-spacing: 0.05em !important;
  color: hsl(214, 48%, 40%) !important;
}

:root:not(.dark) aside.fixed .bg-gradient-to-br[class*="from-blue"][class*="rounded-xl"] .text-xl {
  color: hsl(222, 47%, 11%) !important;
  text-shadow: none !important;
}

:root:not(.dark) aside.fixed .bg-gradient-to-br[class*="from-blue"][class*="rounded-xl"] [class*="text-emerald"],
:root:not(.dark) aside.fixed .bg-gradient-to-br[class*="from-blue"][class*="rounded-xl"] [class*="text-green"] {
  color: hsl(145, 65%, 32%) !important;
}

:root:not(.dark) aside.fixed .bg-gradient-to-br[class*="from-blue"][class*="rounded-xl"]::before {
  content: '';
  position: absolute;
  top: 0;
  left: 12px;
  right: 12px;
  height: 2px;
  background: linear-gradient(90deg, transparent, hsl(214, 60%, 55%, 0.5), hsl(190, 50%, 50%, 0.3), transparent);
  border-radius: 2px;
}