/* Inner Circle — desktop layout refresh (less dead space, one consistent page frame).
   Layered over the original styles; remove the <link> to this file in index.html to undo it completely.
   Scope: member + public pages (main.md:pl-[256px]) at desktop widths. Admin pages are untouched. */

/* No page may scroll sideways at any width (decorative glows and full-bleed bands poke a few px out). */
html, body { overflow-x: clip; }

@media (min-width: 1024px) {
  /* Page banners (image + title) run edge to edge with no white frame around them, so they join the page
     (and dark sections below them) seamlessly — square corners, so no white specks where a dark section follows. */
  .md\:pl-\[256px\] div.relative.w-full.overflow-hidden:has(> img.object-cover):has(h1) {
    margin-top: 0 !important; margin-left: 0 !important; margin-right: 0 !important; border-radius: 0 !important;
  }

  /* Narrow centred columns left wide white bands either side: use the full content width (capped for very wide screens). */
  .md\:pl-\[256px\] .mx-auto.max-w-3xl,
  .md\:pl-\[256px\] .mx-auto.max-w-4xl,
  .md\:pl-\[256px\] .mx-auto.max-w-5xl { max-width: 1480px !important; padding-left: 28px !important; padding-right: 28px !important; }

  /* Dashboard: its cards ran edge to edge with no margin — give it the same frame as every other page… */
  .md\:pl-\[256px\] > .space-y-6 { padding: 0 28px 32px; }
  .md\:pl-\[256px\] > .space-y-6 > div.relative.w-full.overflow-hidden:first-child:has(> img.object-cover):has(h1) { margin: 0 -28px 24px !important; width: calc(100% + 56px) !important; }   /* already inside the padded frame; the bottom margin IS the section gap (Tailwind v4 spaces siblings with margin-block-end) */
  /* …and move the name/tier badge, which sat alone on its own row, into the banner's bottom-right corner. */
  .md\:pl-\[256px\] > .space-y-6 > div:first-child:has(> img.object-cover) + .flex.items-start.justify-between.flex-wrap {
    margin-top: -98px !important; margin-bottom: 48px !important; padding-right: 0; position: relative; z-index: 2; pointer-events: none;
  }
  .md\:pl-\[256px\] > .space-y-6 > div:first-child:has(> img.object-cover) + .flex.items-start.justify-between.flex-wrap > * { pointer-events: auto; }
  
  /* Sector Analysis: its dark terminal sat under a white strip holding the tabs — run the dark background up to the banner. */
  .md\:pl-\[256px\] > .pb-10:has([style*="min-height: 600px"]) { background: #0a1628; }
  .md\:pl-\[256px\] > .pb-10:has([style*="min-height: 600px"]) > .flex.gap-3 { margin-bottom: 0 !important; padding-bottom: 28px; }
  /* Market Research: line its tabs and sections up with the rest of the page. */
  .md\:pl-\[256px\] > .pb-10 > .px-6, .md\:pl-\[256px\] > .pb-10 > .md\:px-8 { padding-left: 28px !important; padding-right: 28px !important; }
}

/* ---- Fixes for layout defects in the original app (present on the live site too) ---- */
/* Investment Paths: built for a dark page like its sister calculators (Guide, Monthly Spending) but never got the dark
   background, so its "Your FIRE Parameters" inputs were white-on-white — invisible. Give it the same background. */
main.md\:pl-\[256px\]:has(> .max-w-\[900px\].mx-auto.space-y-5) { background: rgb(5, 8, 16); color: #fff; }

@media (min-width: 1024px) {
  /* The three dark calculator pages pin themselves to 860–900px; give them the same wider frame as the rest. */
  .md\:pl-\[256px\] [style*="max-width: 860px"], .md\:pl-\[256px\] [style*="max-width: 900px"],
  .md\:pl-\[256px\] .max-w-\[900px\].mx-auto { max-width: 1480px !important; }
  /* Pages without an image banner (e.g. Opportunities) started flush against the top edge. */
  .md\:pl-\[256px\] > .space-y-6:not(:has(> div:first-child > img.object-cover)) { padding-top: 32px; }
  /* Market Cycle is a long-read article: keep a comfortable reading width instead of the widened frame. */
  .md\:pl-\[256px\] .min-h-screen.bg-white > .mx-auto.max-w-4xl { max-width: 896px !important; }
}

@media (min-width: 1024px) {
  /* ---- Less dead space between sections (member + public pages). The original stacks sections 56–144px apart;
          bring that to 32–56px so pages read as one continuous layout. ---- */
  .md\:pl-\[256px\] :is(.mb-10, .mb-12, .mb-14) { margin-bottom: 2rem !important; }
  .md\:pl-\[256px\] :is(.mt-12) { margin-top: 2rem !important; }
  .md\:pl-\[256px\] :is(.space-y-10, .space-y-14, .space-y-16, .space-y-20) > :not(:last-child) { margin-bottom: 2rem !important; }
  .md\:pl-\[256px\] :is(.gap-10, .lg\:gap-12) { gap: 2rem !important; }
  .md\:pl-\[256px\] :is(.pt-14, .pt-16) { padding-top: 2.5rem !important; }
  .md\:pl-\[256px\] :is(.pb-14, .pb-16, .md\:pb-16, .pb-20, .pb-28) { padding-bottom: 2.5rem !important; }
  .md\:pl-\[256px\] :is(.py-16) { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
  .md\:pl-\[256px\] :is(.py-20, .py-24, .md\:py-28, .md\:py-32, .md\:py-36) { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; }

  /* Sector Analysis tabs now sit on dark: light text, subtle outline; the active tab stays blue. */
  .md\:pl-\[256px\] > .pb-10:has([style*="min-height: 600px"]) > .flex.gap-3 > a { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.14) !important; color: rgba(255,255,255,.85) !important; }
  .md\:pl-\[256px\] > .pb-10:has([style*="min-height: 600px"]) > .flex.gap-3 > a :is(span, p, div) { color: inherit !important; }
  .md\:pl-\[256px\] > .pb-10:has([style*="min-height: 600px"]) > .flex.gap-3 > a.text-blue-700 { background: rgba(59,130,246,.16); border-color: rgba(96,165,250,.45) !important; color: #93c5fd !important; }
}

/* ---- Admin pages (main.md:pl-[220px]): three pages used half the screen ---- */
@media (min-width: 1024px) {
  /* Record Points: the two tools sit side by side instead of one narrow column. */
  .md\:pl-\[220px\] .space-y-6.max-w-3xl:has(> .rounded-xl.border) { max-width: none !important; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
  .md\:pl-\[220px\] .space-y-6.max-w-3xl:has(> .rounded-xl.border) > * { margin: 0 !important; }
  .md\:pl-\[220px\] .space-y-6.max-w-3xl:has(> .rounded-xl.border) > :first-child { grid-column: 1 / -1; }
  /* User Management: full width like the other admin pages. */
  .md\:pl-\[220px\] .max-w-5xl.mx-auto.space-y-6 { max-width: none !important; }
  /* Briefing Builder step 1: form uses the full width. */
  .md\:pl-\[220px\] .py-8.max-w-3xl { max-width: none !important; }
}

/* ---- Dark-card pages (flagged by ic-theme.js): dark page background so gaps between cards aren't white strips ---- */
/* html too: that is what shows when you scroll/bounce past the top or bottom of the page */
html[data-ic-dark], html[data-ic-dark] body, html[data-ic-dark] .min-h-screen.bg-background, html[data-ic-dark] main.md\:pl-\[256px\] { background: #07111f; }
html[data-ic-dark] { color-scheme: dark; }

/* Things the original designed for a white page, fixed for the dark-card pages: */
/* Margin Calculator: the live-position card is a light tint over white — keep its white base. */
/* Margin Calculator: the live-position card was a light tint made for a white page; restyle it as a dark card like
   its neighbours (its own green/amber/red tint still shows over the dark base, so the risk state stays visible). */
html[data-ic-dark] div:has(> .rounded-2xl.p-6 .mof-number-pop) { background: #0d1b2e; border-radius: 16px; }
html[data-ic-dark] .rounded-2xl.p-6:has(.mof-number-pop) { color: rgba(255,255,255,.75); }
html[data-ic-dark] .rounded-2xl.p-6:has(.mof-number-pop) [style*="color: rgba(0, 0, 0"] { color: rgba(255,255,255,.5) !important; }
html[data-ic-dark] .rounded-2xl.p-6:has(.mof-number-pop) [style*="background: rgba(0, 0, 0, 0.08)"] { background: rgba(255,255,255,.1) !important; }
html[data-ic-dark] .rounded-2xl.p-6:has(.mof-number-pop) :is(.text-green-600, .text-green-700) { color: #4ade80 !important; }
html[data-ic-dark] .rounded-2xl.p-6:has(.mof-number-pop) :is(.text-red-600, .text-red-950, .text-destructive) { color: #f87171 !important; }
html[data-ic-dark] .rounded-2xl.p-6:has(.mof-number-pop) .text-yellow-600 { color: #fbbf24 !important; }
html[data-ic-dark] .rounded-2xl.p-6:has(.mof-number-pop) :is([style*="color: rgb(21, 128, 61)"], [style*="color: rgb(22, 163, 74)"]) { color: #4ade80 !important; }
html[data-ic-dark] .rounded-2xl.p-6:has(.mof-number-pop) [style*="color: rgb(180, 83, 9)"] { color: #fbbf24 !important; }
html[data-ic-dark] .rounded-2xl.p-6:has(.mof-number-pop) :is([style*="color: rgb(185, 28, 28)"], [style*="color: rgb(100, 0, 0)"], [style*="color: rgb(127, 29, 29)"]) { color: #fca5a5 !important; }
html[data-ic-dark] .rounded-2xl.p-6:has(.mof-number-pop) [style*="background: rgba(100, 0, 0"] { background: #f87171 !important; }
html[data-ic-dark] .rounded-2xl.p-6:has(.mof-number-pop) .bg-white.rounded-full { box-shadow: 0 0 0 3px rgba(13,27,46,.9); }
/* Market Research tabs (all three pages): light text, subtle outline; the active tab stays blue. */
html[data-ic-dark] main > .pb-10 > .flex.gap-3 > a { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.14) !important; color: rgba(255,255,255,.85) !important; }
html[data-ic-dark] main > .pb-10 > .flex.gap-3 > a :is(span, p, div) { color: inherit !important; }
html[data-ic-dark] main > .pb-10 > .flex.gap-3 > a.text-blue-700 { background: rgba(59,130,246,.16); border-color: rgba(96,165,250,.45) !important; color: #93c5fd !important; }
/* Section headings and helper text that sat on white (skipped inside white cards/tables). */
html[data-ic-dark] main > .pb-10 > .px-6 h2:not([class]) { color: #fff !important; }
html[data-ic-dark] main > .pb-10 .text-slate-900:not(.bg-white *, .bg-card *) { color: #fff !important; }
html[data-ic-dark] main > .pb-10 :is(.text-slate-500, .text-slate-400):not(.bg-white *, .bg-card *) { color: #94a3b8 !important; }
html[data-ic-dark] main > .pb-10 .text-\[\#0071E3\] { color: #60a5fa !important; }

/* pages built on a slightly darker navy: match the bounce area to them exactly */
html[data-ic-dark]:has([style*="background: rgb(5, 8, 16)"], main.md\:pl-\[256px\] > .max-w-\[900px\]), html[data-ic-dark]:has([style*="background: rgb(5, 8, 16)"]) body { background: rgb(5, 8, 16); }

/* stock report: the disabled "Download Full PDF Report" was dark-on-dark once the page went dark — show it as muted grey */
html[data-ic-dark] main > .pb-10 .fade-up button:disabled { color: #94a3b8 !important; border-color: rgba(148,163,184,.35) !important; }
/* Briefing Builder is a dark page in the admin: the area past its bottom showed as a white strip */
html[data-ic-dark-admin], html[data-ic-dark-admin] body, html[data-ic-dark-admin] .min-h-screen.bg-background { background: #07111F; }   /* the app wrapper too: it sits on top of body */