/*
 * ============================================================
 * StructureSick (BIM Triage) ΓÇö Post-build Overrides
 * Loaded LAST ΓÇö wins over hashed Tailwind bundle.
 *
 * Contains: light/dark theme vars, color-scheme, body bg,
 * WebView fixes, scrollbar, reduced motion, mobile fixes.
 * ============================================================
 */

/* ============================================================
   1. LIGHT MODE ΓÇö CSS CUSTOM PROPERTIES
   ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇ
   The Tailwind bundle defines all colors on bare :root as
   dark-mode values. These :root:not(.dark) overrides provide
   light-mode equivalents. Loaded after the bundle so they win
   by source order + higher specificity via :not(.dark).
   ============================================================ */
:root:not(.dark) {
  --color-bg:              #f5f7fa;
  --color-surface:         #ffffff;
  --color-surface-raised:  #f4f4f5;
  --color-border:          #e4e4e7;
  --color-text:            #18181b;
  --color-text-secondary:  #52525b;
  --color-text-muted:      #a1a1aa;
  --color-accent:          #10b981;
  --color-warning:         #f59e0b;
  --color-danger:          #ef4444;
  --color-info:            #3b82f6;
  --color-purple:          #a78bfa;
}

/* ============================================================
   2. DARK MODE ΓÇö CSS CUSTOM PROPERTIES
   ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇ
   :root.dark has higher specificity than bare :root (the
   bundle). Re-declare the dark values here so the bundle's
   bare :root doesn't accidentally win against base-overrides.css
   in Samsung Internet's resolution order.
   ============================================================ */
:root.dark {
  --color-bg:              #09090b;
  --color-surface:         #18181b;
  --color-surface-raised:  #27272a;
  --color-border:          #27272a;
  --color-text:            #fafafa;
  --color-text-secondary:  #a1a1aa;
  --color-text-muted:      #52525b;
  --color-accent:          #10b981;
  --color-warning:         #f59e0b;
  --color-danger:          #ef4444;
  --color-info:            #3b82f6;
  --color-purple:          #a78bfa;
}

/* ============================================================
   3. R3F CANVAS CONTAINER ΓÇö THEME-AWARE BACKGROUND
   ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇ
   React Three Fiber sets an inline `background: rgb(9, 9, 11)`
   on the canvas wrapper div. We must override it with !important
   so the 3D viewport respects the current theme. The container
   is identified by its inline style pattern (position:relative,
   100% dimensions, overflow:hidden, pointer-events:auto).
   ============================================================ */
:root:not(.dark) .h-full.w-full > div[style*="pointer-events"] {
  background: #e8eaed !important;
}
:root.dark .h-full.w-full > div[style*="pointer-events"] {
  background: #09090b !important;
}

/* ============================================================
   4. COLOR-SCHEME + BODY BACKGROUND
   ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇ
   Hardcoded !important values bypass Samsung Internet var bugs.
   Must override the bundle's `color-scheme: dark` on bare :root.
   ============================================================ */
:root:not(.dark) { color-scheme: light; }
:root.dark        { color-scheme: dark;  }

html {
  background-color: #f5f7fa;
}
html.dark {
  background-color: #09090b;
}

:root:not(.dark) body {
  background-color: #f5f7fa !important;
  color: #18181b !important;
}
:root.dark body {
  background-color: #09090b !important;
  color: #fafafa !important;
}

/* ============================================================
   4. FONT + TEXT RENDERING
   ============================================================ */
html, body {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
   5. LINKEDIN / SAMSUNG WEBVIEW ΓÇö SCROLL FIX
   ============================================================ */
html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: auto !important;
  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 {
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

#root {
  max-width: 100vw;
  overflow-x: clip;
}
@supports not (overflow: clip) {
  #root { overflow-x: hidden; }
}

/* Samsung Internet / LinkedIn WebView scroll fix */
html, body {
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
}

/* 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; }
  }
}

/* ============================================================
   6. FOCUS-VISIBLE ΓÇö KEYBOARD NAVIGATION
   ============================================================ */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ============================================================
   7. SCROLLBAR (both themes)
   ============================================================ */
:root:not(.dark) ::-webkit-scrollbar { width: 4px; height: 4px; }
:root:not(.dark) ::-webkit-scrollbar-track { background: transparent; }
:root:not(.dark) ::-webkit-scrollbar-thumb { background: #d4d4d8; border-radius: 2px; }
:root:not(.dark) ::-webkit-scrollbar-thumb:hover { background: #a1a1aa; }

:root.dark ::-webkit-scrollbar { width: 4px; height: 4px; }
:root.dark ::-webkit-scrollbar-track { background: transparent; }
:root.dark ::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 2px; }
:root.dark ::-webkit-scrollbar-thumb:hover { background: #3f3f46; }

/* ============================================================
   8. 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;
  }
}

/* ============================================================
   9. MOBILE ΓÇö PERFORMANCE + LAYOUT (<=767px)
   ============================================================ */
@media (max-width: 767px) {
  /* Strip backdrop-blur ΓÇö Samsung Internet GPU perf */
  [class*="backdrop-blur"],
  #project-nav-btn {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  /* Tap highlight removal */
  a, button {
    -webkit-tap-highlight-color: transparent !important;
  }

  /* Portfolio back button ΓÇö mobile adjustments */
  #project-nav-btn {
    background: rgba(255, 255, 255, 0.95) !important;
  }
  :root.dark #project-nav-btn {
    background: rgba(9, 9, 11, 0.95) !important;
  }
  #project-nav-btn:active {
    transform: scale(0.92) !important;
    transition: transform 0.08s ease-out !important;
  }

  /* Touch targets ΓÇö 44px minimum (Apple HIG) */
  button, a, [role="button"] {
    min-height: 44px;
  }
}

/* ============================================================
   10. TABLET ΓÇö SHARED (768-1023px)
   ============================================================ */
@media (min-width: 768px) and (max-width: 1023px) {
  [class*="backdrop-blur"] {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

/* ============================================================
   10b. DESKTOP — HEADER CLEARANCE FOR FIXED BUTTONS (≥768px)
   ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇ
   2026-08-17: #theme-toggle-btn moved from right:12px to the
   canonical left:52px (left:60px under project-nav.js's mobile
   shift) so it now sits beside #project-nav-btn instead of
   opposite it. Both fixed buttons are on the LEFT, so it's the
   header's left edge (not right) that needs clearance now.
   Selector: header.flex.items-center.justify-between.border-b
   .border-border.px-4 ΓÇö targets the app's real `<header>`
   element (there are two header variants in the bundle; both
   share these exact classes). A bare `header` tag selector was
   flagged as too broad/fragile, so this uses the actual class
   list the component renders instead.
   ============================================================ */
@media (max-width: 767px) {
  /* Buttons are 44x44 at touch widths (shared sizing in
     assets/base-overrides.css + project-nav.js), occupying
     x=12-56 (#project-nav-btn) and x=60-104 (#theme-toggle-btn).
     7rem (112px) clears x=104 with an 8px gap. */
  header.flex.items-center.justify-between.border-b.border-border.px-4 {
    padding-left: 7rem !important;
  }
  /* Theme toggle: solid background so it's clearly visible over the
     3D canvas. Position/size are governed by the canonical left:52px
     inline style in index.html, project-nav.js's left:60px mobile
     shift, and base-overrides.css's shared 44px touch sizing ΓÇö this
     block only adds bim-triage's background/border/shadow styling. */
  #theme-toggle-btn {
    background: rgba(255, 255, 255, 0.96) !important;
    border: 1.5px solid rgba(0, 0, 0, 0.18) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
  }
  :root.dark #theme-toggle-btn {
    background: rgba(20, 20, 30, 0.96) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
  }
}
@media (min-width: 768px) {
  /* Non-touch buttons: #project-nav-btn 36px (12-48), #theme-toggle-btn
     32px at left:52px (52-84). 6rem (96px) clears x=84 with a 12px gap.
     This rule's own (min-width:768px) query technically also spans
     768-1023px, but section 13 below overrides padding-left with a
     more specific 768-1023px rule for the still-44px touch buttons in
     that range, so in practice this value only governs >=1024px. */
  header.flex.items-center.justify-between.border-b.border-border.px-4 {
    padding-left: 6rem !important;
  }
}

/* ============================================================
   11. DESKTOP ΓÇö HEADING TRACKING (>=1024px)
   ============================================================ */
@media (min-width: 1024px) {
  h1, h2 { letter-spacing: -0.02em !important; }
}

/* ============================================================
   12. SAMSUNG INTERNET ΓÇö color-mix() FALLBACKS (<=v21)
   ============================================================ */
@supports not (color: color-mix(in srgb, red, blue)) {
  :root:not(.dark) .border-accent\/30 {
    border-color: #6ee7b7 !important;
  }
  :root:not(.dark) .bg-accent\/15 {
    background-color: #d1fae5 !important;
  }
  :root:not(.dark) .border-danger\/30 {
    border-color: #fca5a5 !important;
  }
  :root:not(.dark) .bg-danger\/15 {
    background-color: #fee2e2 !important;
  }
  :root:not(.dark) .border-warning\/30 {
    border-color: #fcd34d !important;
  }
  :root:not(.dark) .bg-warning\/15 {
    background-color: #fef3c7 !important;
  }
}

/* ============================================================
   13. TABLET (768-1023px) - HEADER CLEARANCE
   A 768px tablet is a touch device, so the site-chrome buttons
   are held to 44x44 here as well as at mobile.

   The 44x44 sizing that used to live here has moved to the
   shared chrome layer, so all eight subprojects stay in step:
   #theme-toggle-btn -> assets/base-overrides.css section 7b,
   #project-nav-btn  -> assets/project-nav.js (both now use a
   1023px cutoff instead of 767px). Only the bim-triage-specific
   consequence of that sizing stays here: the header clearance
   below.
   ============================================================ */
@media (min-width: 768px) and (max-width: 1023px) {
  /* Both buttons are 44px wide: #project-nav-btn 12-56, #theme-toggle-btn
     (left:60px under project-nav.js's touch shift) 60-104. The 6rem
     clearance from section 10b would put the header content at x=96,
     8px underneath the theme toggle at this breakpoint. 7rem (112px)
     clears x=104 with the same 8px gap used at mobile. */
  header.flex.items-center.justify-between.border-b.border-border.px-4 {
    padding-left: 7rem !important;
  }
}