/**
 * Federal Register Design System
 *
 * Pure CSS version of the FastHTML styles from:
 * src/comment_history/web/components/styles.py
 * src/comment_history/web/components/layout.py
 * src/comment_history/web/components/cards.py
 * src/comment_history/web/components/forms.py
 * src/comment_history/web/components/tables.py
 * src/comment_history/web/routes/documents.py
 * src/comment_history/web/routes/letters.py
 * src/comment_history/web/routes/rulemakings.py
 * src/comment_history/web/routes/search.py
 * src/comment_history/web/routes/positions.py
 * src/comment_history/web/routes/cfr_parts.py
 * src/comment_history/web/routes/citations.py
 * src/comment_history/web/routes/taxonomy.py
 * src/comment_history/web/routes/arguments.py
 * src/comment_history/web/routes/home.py
 * src/comment_history/web/routes/proposals.py
 * src/comment_history/web/routes/responses.py
 *
 * Sections:
 *   1. Theme Variables (Light & Dark Mode)
 *   2. Typography
 *   3. Tables (including Pagination, EntityTable, table-sm)
 *   4. Layout (including Mobile Menu, Breadcrumbs, Drawer)
 *   5. Cards & Elevation (including StatCard, Stats Orientation)
 *   6. DataGrid
 *   7. Modals
 *   8. Checkbox Fix
 *   9. Card Components (MetadataList, Arguments, Response, Tree Views)
 *  10. Form Components (FilterPanel, Alerts, Selectors)
 *  11. List View Components (Tree View Container, Filter Form, View Toggle)
 *  12. Search Components (Tabs, Autocomplete, Result Cards, Layout)
 *  13. Position Detail Page Components (Filters, Pagination, Passages, Sections)
 *  14. CFR Citations Page Components (Positions Section, Actions)
 *  15. Dashboard Components (Navigation Cards, Search Form)
 *  16. Proposal Page Components (Content Box, Deprecated Fields, Edit Form)
 *  17. Agency Response Page Components (Detail Layout, Sections, Edit Form)
 */

/* =============================================================================
   1. THEME VARIABLES - Federal Register Color Palette
   ============================================================================= */

[data-theme="federal-register"] {
  --rounded-box: 0.25rem;
  --rounded-btn: 0.125rem;
  --rounded-badge: 0.125rem;
  --animation-btn: 0.15s;
  --animation-input: 0.15s;
  --btn-focus-scale: 0.98;
  --border-btn: 1px;
  --tab-border: 1px;
  --tab-radius: 0.25rem;

  /* Layout dimensions */
  --navbar-height: 4rem;

  /* Font families */
  --font-serif: "Source Serif 4", Merriweather, Georgia, serif;
  --font-display: "Libre Baskerville", Spectral, Georgia, serif;
  --font-sans: "IBM Plex Sans", Inter, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", monospace;

  /* Federal Register Color Palette */
  --p: #2C5F5F;  /* Deep blue-green - primary */
  --pf: #234a4a; /* Primary focus */
  --pc: #FFFFFF; /* Primary content */
  --s: #2F3E46;  /* Deep charcoal - secondary */
  --sf: #1f2a2f; /* Secondary focus */
  --sc: #FFFFFF; /* Secondary content */
  --a: #D4CFC7;  /* Hairline - accent */
  --af: #c4bfb7; /* Accent focus */
  --ac: #2F3E46; /* Accent content */
  --n: #2F3E46;  /* Neutral */
  --nf: #1f2a2f; /* Neutral focus */
  --nc: #FFFFFF; /* Neutral content */
  --b1: #F5F3EE; /* Base cream */
  --b2: #FFFFFF; /* Surface white */
  --b3: #E8E6E1; /* Base darker */
  --bc: #2F3E46; /* Base content */
  --in: #3b82f6; /* Info */
  --inc: #FFFFFF;
  --su: #22c55e; /* Success */
  --suc: #FFFFFF;
  --wa: #f59e0b; /* Warning */
  --wac: #FFFFFF;
  --er: #ef4444; /* Error */
  --erc: #FFFFFF;
}

/* Dark mode variant - "The Federal Register After Hours"

   HOW DARK MODE TEXT COLOR ACTUALLY WORKS:
   DaisyUI v4's [data-theme] rule uses: color: var(--fallback-bc, oklch(var(--bc)/1))
   Our hex --bc makes oklch() invalid, so DaisyUI uses --fallback-bc from :root.
   In dark mode, DaisyUI's :root sets --fallback-bc: #a6adbb (muted grey) and
   --fallback-b1: #1d232a (dark background), producing readable muted grey text.
   This is the INHERITED text color for most elements in both Django and FastHTML.

   The --bc variable below (#e8e3db warm cream) is only used by CSS classes that
   explicitly reference var(--bc) — e.g. .prose, .text-muted, .metadata-list dt.
   Do NOT add explicit color/background-color declarations here — that would
   override DaisyUI's fallback with brighter #e8e3db on all inherited text,
   breaking parity with FastHTML. (This was tried and reverted multiple times:
   commits cd40027, 36629ed, 2c83a8b.) */
@media (prefers-color-scheme: dark) {
  [data-theme="federal-register"] {
    /* Backgrounds - used by .app-body, .card-elevated, etc. via var(--b1/b2/b3) */
    --b1: #1a1714; /* Deep warm charcoal */
    --b2: #242120; /* Warm gray surface */
    --b3: #2d2926; /* Elevated warm tone */
    --bc: #e8e3db; /* Used only where var(--bc) is set explicitly (not inherited) */

    /* Primary colors - warmed jade green maintains authority */
    --p: #4a8a8a;  /* Warm teal/jade green */
    --pf: #5a9d9d; /* Primary focus - brighter */
    --pc: #1a1714; /* Primary content - dark for contrast */

    /* Secondary colors - warm neutrals for sophistication */
    --s: #d4cfc7;  /* Light warm cream for headings */
    --sf: #e0dbd3; /* Secondary focus - brighter cream */
    --sc: #1a1714; /* Secondary content - dark */

    /* Accent - subtle warm borders (aged bronze/brass) */
    --a: #3d3935;  /* Border color - warm brown-gray */
    --af: #4a4540; /* Accent focus - slightly lighter */
    --ac: #d4cfc7; /* Accent content - warm cream */

    /* Neutral - medium warm grays */
    --n: #3d3935;  /* Neutral base */
    --nf: #4a4540; /* Neutral focus */
    --nc: #e8e3db; /* Neutral content - warm cream */

    /* Status colors - warmed and softened for dark mode harmony */
    --in: #6ba5e7; /* Info - warmed blue */
    --inc: #1a1714;
    --su: #5db88d; /* Success - warmed green (less neon) */
    --suc: #1a1714;
    --wa: #e6a645; /* Warning - warm amber/gold */
    --wac: #1a1714;
    --er: #d97066; /* Error - warmed red (less harsh) */
    --erc: #1a1714;
  }}

/* =============================================================================
   2. TYPOGRAPHY
   ============================================================================= */

/* Federal Register Typography */
.font-serif {
    font-family: var(--font-serif);
}

.font-display {
    font-family: var(--font-display);
}

.font-sans {
    font-family: var(--font-sans);
}

.font-mono {
    font-family: var(--font-mono);
}

/* Dark mode font-weight adjustments - reduce heaviness */
@media (prefers-color-scheme: dark) {
    /* Body text - slightly lighter for better readability */
    [data-theme="federal-register"] {
        font-weight: 400;
    }

    /* Add letter-spacing to body text for lighter appearance */
    [data-theme="federal-register"] .reading-mode,
    [data-theme="federal-register"] .reading-mode p,
    [data-theme="federal-register"] .prose,
    [data-theme="federal-register"] .prose p {
        letter-spacing: 0.02em;
    }

    /* Headings - reduce from 600 to 500 for less visual weight */
    [data-theme="federal-register"] h1,
    [data-theme="federal-register"] h2,
    [data-theme="federal-register"] h3,
    [data-theme="federal-register"] h4,
    [data-theme="federal-register"] h5,
    [data-theme="federal-register"] h6,
    [data-theme="federal-register"] .prose h1,
    [data-theme="federal-register"] .prose h2,
    [data-theme="federal-register"] .prose h3,
    [data-theme="federal-register"] .prose h4,
    [data-theme="federal-register"] .prose h5,
    [data-theme="federal-register"] .prose h6 {
        font-weight: 500 !important;
    }

    /* Strong/bold text - reduce from 600 to 500 */
    [data-theme="federal-register"] strong,
    [data-theme="federal-register"] .prose strong,
    [data-theme="federal-register"] b {
        font-weight: 500 !important;
    }

    /* Heading utility classes */
    [data-theme="federal-register"] .heading-primary,
    [data-theme="federal-register"] .heading-secondary {
        font-weight: 500 !important;
    }

    /* Table headers - reduce from 600 to 500 */
    [data-theme="federal-register"] .data-table th,
    [data-theme="federal-register"] .prose table th {
        font-weight: 500 !important;
    }

    /* Card titles */
    [data-theme="federal-register"] .card-title {
        font-weight: 500 !important;
    }}

/* Reading Mode - Content-Heavy Pages - Responsive */
.reading-mode {
    max-width: 720px;
    margin: 0 auto;
    line-height: 1.7;
    font-family: var(--font-serif);
    padding: 0 1rem;
}

@media (min-width: 640px) {
    .reading-mode {
        padding: 0 1.5rem;
    }}

@media (min-width: 768px) {
    .reading-mode {
        padding: 0 2rem;
    }}

.reading-mode h1, .reading-mode h2, .reading-mode h3 {
    font-family: var(--font-display);
    color: var(--s);
    word-wrap: break-word;
}

.reading-mode p {
    margin-bottom: 1.25rem;
    word-wrap: break-word;
}

/* Markdown Content Styling */
.prose {
    color: var(--bc);
    line-height: 1.75;
}

.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
    font-family: var(--font-display);
    color: var(--s);
    font-weight: 600;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.prose h1 { font-size: 2rem; }
.prose h2 { font-size: 1.5rem; }
.prose h3 { font-size: 1.25rem; }
.prose h4 { font-size: 1.125rem; }

.prose p {
    margin-bottom: 1.25rem;
}

.prose a {
    color: var(--p);
    text-decoration: underline;
}

.prose a:hover {
    color: var(--pf);
}

.prose strong {
    font-weight: 600;
    color: var(--s);
}

.prose em {
    font-style: italic;
}

.prose ul, .prose ol {
    margin-left: 1.5rem;
    margin-bottom: 1.25rem;
}

.prose ul {
    list-style-type: disc;
}

.prose ol {
    list-style-type: decimal;
}

.prose li {
    margin-bottom: 0.5rem;
}

.prose blockquote {
    border-left: 4px solid var(--a);
    padding-left: 1rem;
    margin: 1.5rem 0;
    font-style: italic;
    color: var(--bc);
    opacity: 0.9;
}

.prose code {
    font-family: var(--font-mono);
    font-size: 0.875rem;
    background: var(--b3);
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    color: var(--s);
}

.prose pre {
    background: var(--b3);
    padding: 1rem;
    border-radius: 0.375rem;
    overflow-x: auto;
    margin-bottom: 1.25rem;
}

.prose pre code {
    background: transparent;
    padding: 0;
}

.prose table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.5rem;
}

.prose table th {
    background: var(--b3);
    padding: 0.75rem 1rem;
    text-align: left;
    font-weight: 600;
    border: 1px solid var(--a);
}

.prose table td {
    padding: 0.75rem 1rem;
    border: 1px solid var(--a);
}

.prose table tbody tr:nth-child(even) {
    background: var(--b1);
}

.prose hr {
    border: none;
    border-top: 2px solid var(--a);
    margin: 2rem 0;
}

.prose img {
    max-width: 100%;
    height: auto;
    border-radius: 0.375rem;
    margin: 1.5rem 0;
}

/* Prose size variant - larger text for reading documents (from documents.py) */
.prose-lg {
    font-size: 1.125rem; /* 18px base */
    line-height: 1.8;
}

.prose-lg h1 { font-size: 2.25rem; }
.prose-lg h2 { font-size: 1.75rem; }
.prose-lg h3 { font-size: 1.375rem; }
.prose-lg h4 { font-size: 1.25rem; }

.prose-lg p {
    margin-bottom: 1.5rem;
}

/* Status indicators - subtle dots */
.status-dot {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    margin-right: 0.5rem;
}

/* Rulemaking Timeline Styles */
.rulemaking-timeline {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.timeline-item {
    display: flex;
    gap: 1rem;
    position: relative;
}

.timeline-connector {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    width: 1rem;
}

.timeline-connector-line {
    width: 2px;
    flex-grow: 1;
    margin-top: 0.5rem;
    min-height: 2rem;
}

.timeline-box-content {
    flex-grow: 1;
}

/* Main content area - Responsive */
.main-content {
    padding: 1rem;
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
}

@media (min-width: 640px) {
    .main-content {
        padding: 1.5rem;
    }}

@media (min-width: 1024px) {
    .main-content {
        padding: 2rem;
    }}

/* Container with max-width - Responsive */
.container-constrained {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
    width: 100%;
}

@media (min-width: 640px) {
    .container-constrained {
        padding: 0 1.5rem;
    }}

@media (min-width: 1024px) {
    .container-constrained {
        padding: 0 2rem;
    }}

/* Base app body styling */
.app-body {
    min-height: 100vh;
    background: var(--b1);
    font-family: var(--font-sans);
    /* Force consistent scrollbar to prevent layout shift */
    overflow-y: scroll;
}

/* Prevent layout shift from scrollbar appearance/disappearance */
html {
    overflow-y: scroll;
    scrollbar-gutter: stable;
    font-family: var(--font-sans);
}

/* Navbar styling - Fully Responsive */
.navbar {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--b2);
    border-bottom: 1px solid var(--a);
    padding: 0.75rem 1rem;
    min-height: var(--navbar-height);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

@media (min-width: 640px) {
    .navbar {
        padding: 1rem 1.5rem;
    }}

@media (min-width: 1024px) {
    .navbar {
        padding: 1rem 2rem;
        flex-wrap: nowrap;
    }}

.navbar-brand {
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--s);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (min-width: 640px) {
    .navbar-brand {
        font-size: 1.125rem;
    }}

@media (min-width: 1024px) {
    .navbar-brand {
        font-size: 1.25rem;
    }}

.navbar-nav {
    gap: 0.25rem;
    align-items: center;
    flex-wrap: wrap;
}

@media (min-width: 1024px) {
    .navbar-nav {
        gap: 0.5rem;
        flex-wrap: nowrap;
    }}

.navbar-user {
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

@media (min-width: 1024px) {
    .navbar-user {
        gap: 1rem;
        flex-wrap: nowrap;
    }}

/* Metadata sidebar - visually distinguished from main content */
.metadata-sidebar {
    background: var(--b3);
    border: 1px solid var(--a);
    border-radius: 0.25rem;
    padding: 1.5rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    position: sticky;
    top: calc(var(--navbar-height) + 1rem); /* navbar height + gap */
}

/* Dark mode elevation system - uses light glows instead of dark shadows */
@media (prefers-color-scheme: dark) {
    .metadata-sidebar {
        /* Subtle warm glow for elevation in dark mode */
        box-shadow:
            0 0 0 1px rgba(212, 207, 199, 0.08),
            0 2px 8px 0 rgba(212, 207, 199, 0.04),
            inset 0 1px 0 0 rgba(212, 207, 199, 0.05);
        border-color: rgba(212, 207, 199, 0.12);
    }}

/* Breadcrumbs (from layout.py) */
.breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    font-size: 0.875rem;
    padding: 1rem 0;
}

.breadcrumbs a:hover {
    color: var(--p);
}

/* =============================================================================
   5. CARDS & ELEVATION
   ============================================================================= */

/* Card component with dark mode support */
.card-elevated {
    background: var(--b2);
    /* Light mode: traditional shadow */
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.card-elevated:hover {
    /* Light mode: deeper shadow on hover */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
}

/* Dark mode: light warm glows instead of dark shadows */
@media (prefers-color-scheme: dark) {
    .card-elevated {
        box-shadow:
            0 0 0 1px rgba(212, 207, 199, 0.08),
            0 2px 8px 0 rgba(212, 207, 199, 0.04),
            inset 0 1px 0 0 rgba(212, 207, 199, 0.05);
        border-color: rgba(212, 207, 199, 0.1);
    }

    .card-elevated:hover {
        box-shadow:
            0 0 0 1px rgba(212, 207, 199, 0.15),
            0 4px 16px 0 rgba(212, 207, 199, 0.08),
            inset 0 1px 0 0 rgba(212, 207, 199, 0.08);
        border-color: rgba(212, 207, 199, 0.18);
        transform: translateY(-1px);
    }}

/* Text size utilities */
.text-small {
    font-size: 0.8125rem; /* 13px - between sm (12px) and base (14px) */
    line-height: 1.5;
}

/* Text opacity utilities with dark mode support */
.text-muted {
    color: var(--bc);
    /* Light mode: 70% opacity */
    opacity: 0.7;
}

.text-subtle {
    color: var(--bc);
    /* Light mode: 60% opacity */
    opacity: 0.6;
}

.text-faint {
    color: var(--bc);
    /* Light mode: 40% opacity */
    opacity: 0.4;
}

/* Dark mode: adjust opacity for better contrast on dark backgrounds */
@media (prefers-color-scheme: dark) {
    .text-muted {
        /* Slightly higher opacity in dark mode for better readability */
        opacity: 0.85;
    }

    .text-subtle {
        opacity: 0.75;
    }

    .text-faint {
        opacity: 0.55;
    }}

/* Heading colors with proper dark mode support */
.heading-primary {
    color: var(--s);
    font-weight: 600;
}

.heading-secondary {
    color: var(--bc);
    font-weight: 600;
}

/* Icon opacity with dark mode support */
.icon-muted {
    color: var(--bc);
    opacity: 0.5;
}

@media (prefers-color-scheme: dark) {
    .icon-muted {
        opacity: 0.65;
    }}

/* StatCard - Dashboard statistics (from layout.py) */
.stats {
    /* Container for stat cards - uses DaisyUI base */
    display: flex;
}

.stat {
    /* Individual stat item */
    padding: 1rem 1.5rem;
}

.stat-title {
    font-family: var(--font-sans);
    font-size: 0.875rem;
    color: var(--bc);
    opacity: 0.7;
}

.stat-value {
    font-size: 2rem;
    font-weight: 600;
    color: var(--p);
}

.stat-desc {
    font-size: 0.75rem;
    color: var(--bc);
    opacity: 0.6;
}

/* Stats orientation variants (from rulemakings.py RulemakingStats) */
.stats-vertical {
    flex-direction: column;
}

/* Stats dividers for vertical layout */
.stats-vertical .stat + .stat {
    border-top: 1px solid var(--a);
    border-left: none;
}

@keyframes spin {
    to { transform: rotate(360deg); }}

/* =============================================================================
   7. MODALS
   ============================================================================= */

/* Modal backdrop - semi-transparent overlay */
.modal-backdrop {
    background: rgba(0, 0, 0, 0.5);
}

/* Modal content box - opaque background (light mode) */
.modal-box {
    background: var(--b2);
    border: 1px solid var(--a);
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.1),
        0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Dark mode modal styling */
@media (prefers-color-scheme: dark) {
    /* Modal backdrop - warm dark overlay */
    .modal-backdrop {
        background: rgba(26, 23, 20, 0.85);
        backdrop-filter: blur(4px);
    }

    /* Modal content box - opaque background (dark mode) */
    .modal-box {
        background: var(--b1);
        border: 1px solid rgba(212, 207, 199, 0.15);
        box-shadow:
            0 0 0 1px rgba(212, 207, 199, 0.12),
            0 16px 48px 0 rgba(0, 0, 0, 0.5),
            inset 0 1px 0 0 rgba(212, 207, 199, 0.08);
    }}

/* =============================================================================
   8. CHECKBOX FIX
   ============================================================================= */

/* Ensure DaisyUI checkboxes display checkmarks properly */
/* Tailwind CDN's preflight resets form element appearance, breaking DaisyUI */
.checkbox {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
}

/* Fallback for checkbox variables if not set by theme */
.checkbox {
    --chkbg: var(--p);
    --chkfg: var(--pc);
}

/* Ensure the checked state shows the checkmark */
.checkbox:checked {
    background-image: linear-gradient(-45deg, transparent 65%, var(--chkbg) 65.99%),
                      linear-gradient(45deg, transparent 75%, var(--chkbg) 75.99%),
                      linear-gradient(-45deg, var(--chkbg) 40%, transparent 40.99%),
                      linear-gradient(45deg, var(--chkbg) 30%, var(--chkfg) 30.99%, var(--chkfg) 40%, transparent 40.99%),
                      linear-gradient(-45deg, var(--chkfg) 50%, var(--chkbg) 50.99%) !important;
    background-color: var(--chkbg) !important;
}

/* =============================================================================
   9. CARD COMPONENTS (from cards.py)
   ============================================================================= */

/* -----------------------------------------------------------------------------
   9.1 MetadataList - Key-value pairs display
   ----------------------------------------------------------------------------- */

.metadata-list {
    margin-top: 1rem;
}

.metadata-list dt {
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--bc);
    opacity: 0.7;
}

.metadata-list dd {
    font-family: var(--font-sans);
    font-size: 0.875rem;
    margin-left: 0;
    margin-bottom: 0.5rem;
}

/* -----------------------------------------------------------------------------
   9.3 Arguments - Hierarchical argument display
   ----------------------------------------------------------------------------- */

.arguments-section {
    margin-top: 1.5rem;
}

.arguments-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.argument-item {
    padding: 1rem;
    background: var(--b2);
    border-radius: 0.25rem;
    margin-bottom: 1rem;
    border-left: 4px solid var(--p);
}

.argument-text {
    margin-bottom: 1rem;
}

.argument-text p {
    font-size: 0.875rem;
    font-family: var(--font-serif);
    line-height: 1.6;
}

/* -----------------------------------------------------------------------------
   9.5 Relevance Indicator
   ----------------------------------------------------------------------------- */

.relevance-indicator {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
}

/* -----------------------------------------------------------------------------
   9.6 Collapsible Toggle Pattern (Tree Views)
   ----------------------------------------------------------------------------- */

/* Hidden checkbox that controls the collapse state */
.collapse-checkbox {
    display: none;
}

/* Toggle indicator (+/-) styling */
.collapse-checkbox + div label {
    cursor: pointer;
}

/* Default hidden state for collapsible content */
.collapse-checkbox ~ div:last-child {
    display: none;
}

.collapse-checkbox:checked ~ div:last-child {
    display: block;
}

/* Link hover effect for tree items */
.link-hover:hover {
    text-decoration: underline;
}

/* =============================================================================
   11. LIST VIEW COMPONENTS (from routes/letters.py)
   ============================================================================= */

/* -----------------------------------------------------------------------------
   11.1 Tree View Container - Container for tree view mode in list pages
   ----------------------------------------------------------------------------- */

.tree-view-container {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Tree view for grouped hierarchical display (e.g., CFR Parts by Title)
   Uses DaisyUI collapse components for collapsible sections */
.tree-view {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* -----------------------------------------------------------------------------
   11.2 Filter Form - Container for filter controls in list pages
   ----------------------------------------------------------------------------- */

.filter-form {
    /* Filter form uses DaisyUI form controls with grid layout */
    /* Semantic container for form-based filtering */
}

/* =============================================================================
   12. SEARCH COMPONENTS
   ============================================================================= */

/* Autocomplete dropdown - ensure opaque background */
#autocomplete-results .dropdown-content {
  background-color: var(--b2);
}

/* =============================================================================
   13. POSITION DETAIL PAGE COMPONENTS (from routes/positions.py)
   ============================================================================= */

/* -----------------------------------------------------------------------------
   13.1 Filters Section - Container for filter controls on list pages
   ----------------------------------------------------------------------------- */

/* Filters section container - wraps filter form on list pages */
.filters-section {
    margin-bottom: 1.5rem;
}

/* -----------------------------------------------------------------------------
   13.2 Pagination - Page navigation wrapper
   ----------------------------------------------------------------------------- */

/* Pagination wrapper - centers page controls */
.pagination {
    margin-top: 1.5rem;
}

/* Pagination inner flex container */
.pagination .flex {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* -----------------------------------------------------------------------------
   13.3 Position Statement Section
   ----------------------------------------------------------------------------- */

/* Position statement container - main policy stance display */
.position-statement {
    margin-bottom: 1.5rem;
}

.position-statement h2 {
    font-family: var(--font-display);
}

/* Position statement content box */
.position-statement .bg-base-200 {
    padding: 1rem;
    background: var(--b3);
    border-radius: 0.25rem;
}

/* -----------------------------------------------------------------------------
   13.4 Comment Letter Passages - Supporting text excerpts
   ----------------------------------------------------------------------------- */

/* Passages list container */
.passages-list {
    margin-top: 1rem;
}

/* Individual passage item */
.passage-item {
    padding: 1rem;
    background: var(--b3);
    border-radius: 0.25rem;
    margin-bottom: 0.5rem;
}

.passage-item h3 {
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.passage-item .prose {
    font-size: 0.875rem;
    line-height: 1.6;
}

/* -----------------------------------------------------------------------------
   13.5 Proposed Amendments Section
   ----------------------------------------------------------------------------- */

/* Proposed amendments section container */
.proposed-amendments-section {
    margin-bottom: 1.5rem;
}

.proposed-amendments-section h2 {
    font-family: var(--font-display);
}

/* Proposals list container */
.proposals-list {
    display: flex;
    flex-direction: column;
}

/* -----------------------------------------------------------------------------
   13.8 CFR Citations List - Sidebar citations display
   ----------------------------------------------------------------------------- */

/* Citations list container in sidebar */
.citations-list {
    display: flex;
    flex-direction: column;
}

/* Citation link item */
.citations-list a {
    display: block;
    margin-bottom: 0.25rem;
}

/* -----------------------------------------------------------------------------
   13.9 Collapsible Passages Details - HTML5 details/summary pattern
   ----------------------------------------------------------------------------- */

/* Details element for collapsible content */
details.mb-6 {
    margin-bottom: 1.5rem;
    padding: 1rem;
    border: 1px solid var(--a);
    border-radius: 0.25rem;
}

/* Summary element - clickable toggle */
details summary {
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--p);
}

details summary:hover {
    color: var(--pf);
}

/* =============================================================================
   14. CFR CITATIONS PAGE COMPONENTS (from routes/citations.py)
   ============================================================================= */

/* -----------------------------------------------------------------------------
   14.1 Positions Section - Linked positions on citation detail page
   ----------------------------------------------------------------------------- */

/* Positions section container - wraps positions citing a CFR provision */
.positions-section {
    margin-bottom: 1.5rem;
}

.positions-section h2 {
    font-family: var(--font-display);
}

/* Positions list container */
.positions-list {
    display: flex;
    flex-direction: column;
}

/* Individual position item in citation context */
.position-item {
    margin-bottom: 0.5rem;
}

/* Position item clickable area */
.position-item a {
    display: block;
}

/* Position item content styling */
.position-item .p-3 {
    padding: 0.75rem;
    background: var(--b3);
    border-radius: 0.25rem;
    transition: background-color 0.15s ease;
}

.position-item .p-3:hover {
    background: var(--b2);
}

/* Position item title */
.position-item h3 {
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

/* Position item statement preview */
.position-item p {
    font-size: 0.875rem;
    color: var(--bc);
    opacity: 0.7;
    margin-bottom: 0.5rem;
}

/* Position item source attribution */
.position-item .text-small {
    font-size: 0.8125rem;
    color: var(--bc);
    opacity: 0.6;
}

/* -----------------------------------------------------------------------------
   14.2 Actions Container - Sidebar action buttons
   ----------------------------------------------------------------------------- */

/* Actions container for sidebar buttons */
.actions {
    margin-top: 1rem;
}

.actions .btn {
    margin-bottom: 0.25rem;
}

.actions .btn:last-child {
    margin-bottom: 0;
}