/* ═══════════════════════════════════════════════════════════════════════════
   css/ui/design-system/layout.css — Layout category overrides
   Styles specific to ui/design-system/layout/*.php showcase pages.
   Shared article-shell classes (sc-page, sc-header, breadcrumb, pager) live
   in _base.css since every showcase page uses them — this file only holds
   styles that are specific to the Layout category's component demos.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Alpine x-cloak ────────────────────────────────────────────────────────
   Standard Alpine.js requirement: elements with x-cloak stay hidden until
   Alpine finishes initializing, preventing a flash of the collapsed code
   snippet's content before Alpine's x-show kicks in. Not defined anywhere
   else in the project yet since this is the first showcase page using
   Alpine — belongs here rather than _base.css since _base.css is loaded
   on every page regardless of whether that page uses Alpine at all.
   ────────────────────────────────────────────────────────────────────────── */

[x-cloak] {
  display: none !important;
}

/* ── Concept note / callout ───────────────────────────────────────────────
   Markup: ui/design-system/layout/sticky-sidebar.php
   <div class="sc-note">...</div>
   Plain prose block can't be done with a DaisyUI component (alert implies
   a status/severity this isn't) and the left accent bar + muted background
   needs custom CSS since no Tailwind utility composes a tinted block quote.
   ────────────────────────────────────────────────────────────────────────── */

.sc-note {
  margin-bottom: var(--spacing-section-gap, clamp(2rem, 5vw, 4rem));
  padding: 1.25rem 1.5rem;
  background-color: var(--color-bg-b2, #f5f5f5);
  border-left: 3px solid var(--color-accent-b1, #3b82f6);
  border-radius: var(--radius-sm, 0.375rem);
  font-family: var(--font-body, "Inter", system-ui, sans-serif);
  font-size: var(--text-body-sm, 0.875rem);
  line-height: var(--leading-body, 1.75);
  color: var(--color-secondary, #52525b);
}

.sc-note p {
  margin: 0;
}

.sc-note code {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 0.85em;
  background-color: var(--color-bg-b1, #ffffff);
  padding: 0.1em 0.4em;
  border-radius: var(--radius-xs, 0.25rem);
}

.sc-note--callout {
  border-left-color: var(--color-tertiary, #71717a);
}

.sc-note-list {
  margin: 0;
  padding-left: 1.25rem;
  list-style: disc;
}

.sc-note-list li {
  margin-bottom: 0.5rem;
}

.sc-note-list li:last-child {
  margin-bottom: 0;
}

/* ── Variant block wrapper ────────────────────────────────────────────────
   Markup: <section class="sc-block"> wrapping each named variant
   (Category Filter / Dashboard Filter / Article TOC) plus its preview
   and code snippet. Spacing rhythm only — no DaisyUI equivalent for
   "section in an article with a heading + description + body".
   ────────────────────────────────────────────────────────────────────────── */

.sc-block {
  margin-bottom: var(--spacing-section-gap, clamp(2rem, 5vw, 4rem));
}

.sc-block-head {
  margin-bottom: 1.25rem;
}

.sc-block-title {
  margin: 0 0 0.375rem;
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: var(--text-h5, clamp(1.125rem, 2vw, 1.563rem));
  font-weight: var(--weight-heading-sans, 600);
  color: var(--color-primary, #18181b);
}

.sc-block-desc {
  margin: 0;
  max-width: var(--width-prose, 70ch);
  font-size: var(--text-body-sm, 0.875rem);
  line-height: var(--leading-body, 1.75);
  color: var(--color-secondary, #52525b);
}

.sc-block-desc code {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 0.85em;
  background-color: var(--color-bg-b2, #f5f5f5);
  padding: 0.1em 0.4em;
  border-radius: var(--radius-xs, 0.25rem);
}

/* ── Preview frame ────────────────────────────────────────────────────────
   Markup: <div class="sc-preview"><div class="sc-demo-scroll">...</div></div>
   Needs a fixed-height bordered viewport with its own scroll so the sticky
   behavior is demonstrable on the page itself — DaisyUI has no "scrollable
   demo frame" primitive, this is inherently a showcase-only construct.
   ────────────────────────────────────────────────────────────────────────── */

.sc-preview {
  border: 1px solid var(--color-bg-b3, #ebebeb);
  border-radius: var(--radius-md, 0.75rem);
  overflow: hidden;
  background-color: var(--color-bg-b1, #ffffff);
}

.sc-demo-scroll {
  height: 420px;
  overflow-y: auto;
  padding: 1.25rem;
  position: relative;
}

.sc-demo-hint {
  margin: 1rem 0 0;
  text-align: center;
  font-size: var(--text-caption, 0.75rem);
  color: var(--color-tertiary, #71717a);
  font-style: italic;
}

.sc-demo-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--color-bg-b3, #ebebeb);
}

.sc-demo-fake-header {
  position: sticky;
  top: 0;
  z-index: 5;
  margin: -1.25rem -1.25rem 1rem;
  padding: 0.75rem 1.25rem;
  background-color: var(--color-bg-d1, #000000);
  color: var(--color-primary-dark, #fafafa);
  font-size: var(--text-caption, 0.75rem);
  font-family: var(--font-mono, "JetBrains Mono", monospace);
}

/* ── Demo two-column layout ───────────────────────────────────────────────
   Markup: <div class="sc-demo-layout"><aside class="sc-sticky-col">...
   <div class="sc-demo-main">...
   The actual sticky mechanics live on .sc-sticky-col; the grid here just
   gives the sidebar a column shorter/taller than its sibling so the
   different sticky behaviors are visible at all.
   ────────────────────────────────────────────────────────────────────────── */

.sc-demo-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 1.5rem;
  align-items: start;
}

.sc-demo-layout--toc {
  grid-template-columns: 1fr 220px;
}

.sc-demo-layout--toc .sc-demo-main {
  order: 1;
}

.sc-demo-layout--toc .sc-sticky-col--toc {
  order: 2;
}

@media (max-width: 640px) {
  .sc-demo-layout,
  .sc-demo-layout--toc {
    grid-template-columns: 1fr;
  }
}

/* ── Sticky column ────────────────────────────────────────────────────────
   This is the actual component: position: sticky on a column that's
   shorter than its sibling stops naturally at the bottom (Variant 1).
   The --scrollable modifier caps height to the viewport with its own
   overflow so tall content never leaves the screen (Variant 2).
   ────────────────────────────────────────────────────────────────────────── */

.sc-sticky-col {
  position: sticky;
  top: 0;
  align-self: start;
}

.sc-sticky-col--scrollable {
  max-height: calc(420px - 2.5rem);
  overflow-y: auto;
}

.sc-sticky-col--toc {
  top: 0.75rem;
}

/* ── Filter card ───────────────────────────────────────────────────────────
   Markup: <div class="sc-filter-card">
   DaisyUI's "filter" component is for a tag-pill toggle row, not a faceted
   filter panel, so the card shell itself is custom; the controls inside
   (checkbox, range, select, btn) are all stock DaisyUI classes.
   ────────────────────────────────────────────────────────────────────────── */

.sc-filter-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
  background-color: var(--color-bg-b2, #f5f5f5);
  border-radius: var(--radius-sm, 0.375rem);
}

.sc-filter-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.25rem;
}

.sc-filter-group {
  padding-top: 0.5rem;
  border-top: 1px solid var(--color-bg-b3, #ebebeb);
}

.sc-filter-group:first-of-type {
  border-top: none;
  padding-top: 0;
}

.sc-filter-label {
  margin: 0 0 0.25rem;
  font-size: var(--text-caption, 0.75rem);
  font-weight: var(--weight-body-medium, 500);
  text-transform: uppercase;
  letter-spacing: var(--tracking-overline, 0.1em);
  color: var(--color-tertiary, #71717a);
}

.sc-filter-card--tall {
  gap: 0.375rem;
}

.sc-filter-card--mini {
  padding: 0.75rem;
}

.sc-filter-card--empty {
  align-items: center;
}

/* ── Product grid (Variant 1 demo content) ───────────────────────────────── */

.sc-product-card {
  border: 1px solid var(--color-bg-b3, #ebebeb);
  border-radius: var(--radius-sm, 0.375rem);
  padding: 0.75rem;
}

.sc-product-thumb {
  aspect-ratio: 1;
  border-radius: var(--radius-xs, 0.25rem);
  background-color: var(--color-bg-b3, #ebebeb);
}

.sc-demo-main {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.875rem;
  align-content: start;
}

/* ── Table mock (Variant 2 demo content) ──────────────────────────────────
   Plain rows standing in for a real data table — DaisyUI's table component
   is for an actual <table>, this is deliberately simpler since the table
   itself isn't the subject of this article.
   ────────────────────────────────────────────────────────────────────────── */

.sc-table-mock {
  border: 1px solid var(--color-bg-b3, #ebebeb);
  border-radius: var(--radius-sm, 0.375rem);
  overflow: hidden;
}

.sc-table-mock-head,
.sc-table-mock-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 0.75rem;
  padding: 0.625rem 0.875rem;
  font-size: var(--text-body-sm, 0.875rem);
}

.sc-table-mock-head {
  background-color: var(--color-bg-b2, #f5f5f5);
  font-size: var(--text-caption, 0.75rem);
  font-weight: var(--weight-body-medium, 500);
  color: var(--color-tertiary, #71717a);
  text-transform: uppercase;
  letter-spacing: var(--tracking-overline, 0.1em);
}

.sc-table-mock-row {
  border-top: 1px solid var(--color-bg-b3, #ebebeb);
}

/* ── Article mock + TOC (Variant 3) ───────────────────────────────────────
   .sc-article-section just needs enough min-height that scrolling between
   sections is visible in a 420px demo frame — real articles won't need
   this, it exists only so the showcase can demonstrate scroll-tracking.
   ────────────────────────────────────────────────────────────────────────── */

.sc-article-section {
  min-height: 220px;
  padding-bottom: 1.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--color-bg-b3, #ebebeb);
}

.sc-article-section:last-child {
  border-bottom: none;
}

.sc-article-mock {
  display: block;
}

.sc-article-mock h3 {
  margin: 0 0 0.5rem;
}

.sc-article-mock p {
  font-size: var(--text-body-sm, 0.875rem);
  color: var(--color-secondary, #52525b);
  margin: 0 0 0.5rem;
}

.sc-toc-card {
  padding: 0.875rem;
  background-color: var(--color-bg-b2, #f5f5f5);
  border-radius: var(--radius-sm, 0.375rem);
}

.sc-toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.sc-toc-link {
  display: block;
  padding: 0.3rem 0.5rem;
  margin: 0 -0.5rem;
  border-radius: var(--radius-xs, 0.25rem);
  font-size: var(--text-body-sm, 0.875rem);
  color: var(--color-tertiary, #71717a);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease;
}

.sc-toc-link:hover {
  color: var(--color-primary, #18181b);
  background-color: var(--color-bg-b1, #ffffff);
}

.sc-toc-link--active {
  color: var(--color-accent-b1, #3b82f6);
  border-left-color: var(--color-accent-b1, #3b82f6);
  font-weight: var(--weight-body-medium, 500);
}

.sc-toc-empty {
  padding: 0.875rem;
  background-color: var(--color-bg-b2, #f5f5f5);
  border-radius: var(--radius-sm, 0.375rem);
  font-size: var(--text-body-sm, 0.875rem);
  color: var(--color-tertiary, #71717a);
  text-align: center;
}

.sc-toc-empty p {
  margin: 0;
}

/* ── States grid ───────────────────────────────────────────────────────────
   Markup: <div class="sc-states-grid"><div class="sc-state-card">...
   ────────────────────────────────────────────────────────────────────────── */

.sc-states-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
}

.sc-state-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.sc-state-label {
  margin: 0;
  font-size: var(--text-caption, 0.75rem);
  font-weight: var(--weight-body-medium, 500);
  color: var(--color-tertiary, #71717a);
}

/* ── Code snippet block ───────────────────────────────────────────────────
   Markup: <div class="sc-code" x-data="{ open: false }">
   <button class="sc-code-toggle">...</button>
   <div class="sc-code-body" x-show x-collapse>...</div>
   No base <pre>/<code> styling exists anywhere in the project yet — this
   is the first showcase page that needs a code block, so it's defined
   here rather than duplicated per category later.
   ────────────────────────────────────────────────────────────────────────── */

.sc-code {
  margin-top: 0.875rem;
}

.sc-code-toggle {
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: var(--text-caption, 0.75rem);
  font-weight: var(--weight-body-medium, 500);
  color: var(--color-tertiary, #71717a);
  background: none;
  border: 1px solid var(--color-bg-b3, #ebebeb);
  border-radius: var(--radius-sm, 0.375rem);
  padding: 0.375rem 0.75rem;
  cursor: pointer;
  transition: color 150ms ease, border-color 150ms ease;
}

.sc-code-toggle:hover {
  color: var(--color-primary, #18181b);
  border-color: var(--color-bg-b6, #cccccc);
}

.sc-code-body {
  margin-top: 0.625rem;
  border-radius: var(--radius-sm, 0.375rem);
  overflow: hidden;
  background-color: var(--color-bg-d1, #000000);
}

.sc-code-body pre {
  margin: 0;
  padding: 1rem 1.25rem;
  overflow-x: auto;
}

.sc-code-body code {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: var(--text-code-sm, 0.8125rem);
  line-height: var(--leading-code, 1.65);
  color: var(--color-secondary-dark, #d4d4d8);
  white-space: pre;
}

/* ── Dark mode ─────────────────────────────────────────────────────────────
   Mirrors the .dark conventions in css/ui/_base.css.
   ────────────────────────────────────────────────────────────────────────── */

.dark .sc-note {
  background-color: var(--color-bg-d4, #1f1f1f);
  color: var(--color-secondary-dark, #d4d4d8);
}

.dark .sc-note code,
.dark .sc-block-desc code {
  background-color: var(--color-bg-d2, #0a0a0a);
  color: var(--color-secondary-dark, #d4d4d8);
}

.dark .sc-block-title {
  color: var(--color-primary-dark, #fafafa);
}

.dark .sc-block-desc {
  color: var(--color-secondary-dark, #d4d4d8);
}

.dark .sc-preview {
  background-color: var(--color-bg-d2, #0a0a0a);
  border-color: var(--color-bg-d4, #1f1f1f);
}

.dark .sc-demo-toolbar,
.dark .sc-filter-group,
.dark .sc-table-mock-row,
.dark .sc-article-section {
  border-color: var(--color-bg-d4, #1f1f1f);
}

.dark .sc-filter-card,
.dark .sc-table-mock-head,
.dark .sc-toc-card,
.dark .sc-toc-empty {
  background-color: var(--color-bg-d3, #141414);
}

.dark .sc-product-card,
.dark .sc-table-mock {
  border-color: var(--color-bg-d4, #1f1f1f);
}

.dark .sc-product-thumb {
  background-color: var(--color-bg-d4, #1f1f1f);
}

.dark .sc-toc-link:hover {
  background-color: var(--color-bg-d2, #0a0a0a);
  color: var(--color-primary-dark, #fafafa);
}

.dark .sc-code-toggle {
  border-color: var(--color-bg-d4, #1f1f1f);
  color: var(--color-tertiary-dark, #a1a1aa);
}

.dark .sc-code-toggle:hover {
  color: var(--color-primary-dark, #fafafa);
  border-color: var(--color-bg-d6, #333333);
}