/* =============================================================================
   SHARED STYLES FOR WEB-DATERANGEPICKER EXAMPLES
   -----------------------------------------------------------------------------
   Kept in sync with ../web-multiselect/examples-shared.css so both component
   libraries share one example-page design system. The base (layout, cards,
   forms, buttons, notes, tables, log panels, badges) is identical to the
   multiselect file; the "DATERANGEPICKER ADDITIONS" section at the bottom holds
   the few extras this repo needs (rich code-block + syntax highlighting,
   note color variants, control groups, status dots/pills).

   Goal: example pages carry NO <style> blocks and NO inline style="" except
   component CSS variables (e.g. --drp-rem) and grid tuning
   (--grid-min / --grid-gap). Everything visual lives here.
   ============================================================================= */

/* Base reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Body and layout */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    padding: 2rem;
    background: #f7fafc;
    line-height: 1.6;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
}

/* Header styling */
header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 2rem;
    border-radius: 12px;
    margin-bottom: 2rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

h1 {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.subtitle {
    opacity: 0.9;
    font-size: 1.1rem;
}

.back-link {
    display: inline-block;
    color: white;
    text-decoration: none;
    margin-bottom: 1rem;
    opacity: 0.8;
    transition: opacity 0.2s;
}

.back-link:hover {
    opacity: 1;
}

/* Card/Section styles */
.card,
.example-section {
    background: white;
    border-radius: 12px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.card h2,
.example-section h2 {
    margin-bottom: 1rem;
    color: #2d3748;
    font-size: 1.5rem;
    /* Flex so an inline `.badge` sits centered next to the heading text.
       Single-child headings (the common case) render identically. */
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.card h3,
.example-section h3 {
    margin-bottom: 0.75rem;
    color: #4a5568;
    font-size: 1.25rem;
}

/* Accent sub-heading within a card/section (a step below its h2). */
.card h3.subsection,
.example-section h3.subsection {
    margin: 2rem 0 1rem;
    font-size: 1.2rem;
    color: #667eea;
}

.card p,
.example-section p {
    margin-bottom: 1rem;
    color: #666;
}

/* Demo card — a padded box framing a single demo/instance (smaller and lighter
   than `.card`). The surface is tunable via `--demo-card-bg` / `--demo-card-border`
   (e.g. a gray fill or a shadow-only look); the inner heading/paragraph/code are
   standardized so cards read consistently across every example page. */
.demo-card {
    background: var(--demo-card-bg, #fff);
    border: var(--demo-card-border, 1px solid #e5e7eb);
    border-radius: 8px;
    padding: 1.5rem;
}

.demo-card h3,
.demo-card h4 {
    margin: 0 0 0.5rem 0;
    font-size: 1rem;
    color: #374151;
    border: none;
    padding: 0;
}

.demo-card p {
    margin: 0 0 1rem 0;
    font-size: 0.8125rem;
    color: #6b7280;
}

.demo-card code {
    background: #f3f4f6;
    padding: 0.125rem 0.375rem;
    border-radius: 3px;
    font-size: 0.7rem;
}

/* Description text */
.description {
    color: #718096;
    margin-bottom: 1.5rem;
}

/* Form styling */
.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.form-text {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: #666;
}

/* Controls */
.controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    align-items: center;
}

/* Inline control label — a clickable row of checkbox/radio + text. Used for
   each label inside `.controls`, and standalone as `.toggle-label` (a single
   switch that also carries its own bottom spacing). */
.controls label,
.toggle-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.toggle-label {
    margin-bottom: 0.75rem;
}

.controls input[type="checkbox"] {
    width: 16px;
    height: 16px;
}

/* Demo areas — a soft panel wrapping a live component demo, optionally
   introduced by a `.demo-label`. */
.demo-area {
    background: #f7fafc;
    padding: 1.5rem;
    border-radius: 8px;
    margin: 1rem 0;
}

.demo-label {
    display: block;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 0.5rem;
}

/* Output display */
.output {
    margin-top: 1rem;
}

.output-label {
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: #4a5568;
}

.output pre,
pre {
    background: #f7fafc;
    padding: 1rem;
    border-radius: 6px;
    overflow-x: auto;
    font-size: 0.875rem;
    border: 1px solid #e2e8f0;
}

/* Dark output theme — opt in per page with `class="dark-output"` on <body>.
   Turns the light `.output` panels above into a dark console look. */
.dark-output .output {
    background: #2d3748;
    color: #a0aec0;
    padding: 1rem;
    border-radius: 8px;
    margin-top: 1rem;
    font-family: 'Courier New', monospace;
    font-size: 0.875rem;
    overflow-x: auto;
    border: none;
}

.dark-output .output-label {
    color: #667eea;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.dark-output .output pre {
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    color: inherit;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* Section-header badge pill (e.g. a "NEW" tag beside an `.example-section h2`).
   Landing pages override `.badge` locally for their own look. */
.badge {
    display: inline-block;
    background: #667eea;
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.badge.new {
    background: #f56565;
}

/* Log / console panel — a monospace, scrollable box for streaming demo output
   (event logs, request activity, live values). Light by default; add
   `.log-panel--dark` for the console look. Height caps via `--log-max-height`.
   Pages keep their own entry-color classes (`.entry--*`, `.tag-*`, …). */
.log-panel {
    font-family: ui-monospace, SFMono-Regular, Menlo, 'Courier New', monospace;
    font-size: 0.85rem;
    line-height: 1.5;
    padding: 1rem 1.25rem;
    border-radius: 8px;
    max-height: var(--log-max-height, 220px);
    overflow: auto;
    background: #f7fafc;
    color: #2d3748;
    border: 1px solid #e2e8f0;
}

.log-panel--dark {
    background: #0f172a;
    color: #e2e8f0;
    border-color: transparent;
}

/* Muted secondary text — used inside log panels and elsewhere. */
.muted {
    color: #6b7280;
}

/* Spacing utility — top margin to separate a follow-up block (a details
   disclosure, a secondary grid) from the demo above it. */
.mt-1 {
    margin-top: 1rem;
}

/* Inline code */
code {
    background: #edf2f7;
    padding: 0.2rem 0.4rem;
    border-radius: 3px;
    font-size: 0.9em;
    color: #667eea;
    font-family: 'Courier New', monospace;
}

/* Notes/Info boxes */
.note {
    background: #edf2f7;
    padding: 1rem;
    border-radius: 6px;
    border-left: 4px solid #667eea;
    margin: 1rem 0;
}

.note.warning {
    background: #fef3c7;
    border-left-color: #f59e0b;
}

.note.info {
    background: #dbeafe;
    border-left-color: #3b82f6;
}

.note.success {
    background: #d1fae5;
    border-left-color: #10b981;
}

.note.error {
    background: #fee2e2;
    border-left-color: #ef4444;
}

.note-title {
    font-weight: 600;
    color: #667eea;
    margin-bottom: 0.5rem;
}

.note ul {
    margin-left: 1.5rem;
    margin-top: 0.5rem;
}

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

/* Grid layouts — one auto-fit grid parameterized by `--grid-min` (min column
   width) and `--grid-gap`. Pages tune the min inline, e.g.
   `<div class="card-grid" style="--grid-min: 240px">`. `.grid`/`.grid-2` are
   kept as named presets. */
.grid,
.grid-2,
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--grid-min, 300px), 1fr));
    gap: var(--grid-gap, 2rem);
}

.grid-2 {
    --grid-min: 400px;
}

/* Reference table — bordered spec/lookup table used on several pages
   (replaces the old per-page tier-table / comparison-table / api-table). Add
   `is-highlight` to a <tr> to emphasize a row (e.g. the default value). */
.reference-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    margin-bottom: 2rem;
}

.reference-table th,
.reference-table td {
    padding: 0.75rem 1rem;
    text-align: left;
    border: 1px solid #e5e7eb;
}

.reference-table th {
    background: #f3f4f6;
    font-weight: 600;
}

.reference-table tbody tr:hover {
    background: #f9fafb;
}

.reference-table tr.is-highlight {
    background: #eff6ff;
}

.reference-table code {
    background: #e5e7eb;
    padding: 0.125rem 0.375rem;
    border-radius: 3px;
    font-size: 0.75rem;
}

/* Typography */
h2 {
    color: #2d3748;
    margin-bottom: 1rem;
}

h3 {
    color: #4a5568;
    margin-bottom: 0.75rem;
}

ul {
    line-height: 1.8;
}

li {
    color: #4a5568;
}

/* Links */
a {
    color: #667eea;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Buttons */
/* Primary button (default) */
button,
button.btn-primary {
    cursor: pointer;
    background: #667eea;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.875rem;
    transition: background 0.2s;
}

button:hover,
button.btn-primary:hover {
    background: #5a67d8;
}

/* Secondary button (gray) */
button.secondary,
button.btn-secondary {
    background: #6b7280;
    color: white;
}

button.secondary:hover,
button.btn-secondary:hover {
    background: #4b5563;
}

/* Outline button (white bg, dark text) */
button.btn-outline {
    background: white;
    color: #374151;
    border: 1px solid #d1d5db;
}

button.btn-outline:hover {
    background: #f3f4f6;
    border-color: #9ca3af;
}

/* Footer */
footer {
    text-align: center;
    padding: 2rem;
    color: #718096;
    font-size: 0.875rem;
}

footer a {
    color: #667eea;
}

/* =============================================================================
   DATERANGEPICKER ADDITIONS
   Extras beyond the shared multiselect base. Keep this section clearly scoped
   so the base above can be diffed 1:1 against ../web-multiselect.
   ============================================================================= */

/* Code blocks — richer than the multiselect version: the dark surface lives on
   `.code-block` itself so it works whether a page wraps code in <pre> or drops
   a bare <code> straight inside (both markup styles are used across pages). */
.code-block {
    margin: 1.5rem 0;
    position: relative;
    background: #2d3748;
    color: #e2e8f0;
    padding: 1.5rem;
    border-radius: 8px;
    overflow-x: auto;
    font-family: 'Courier New', Consolas, Monaco, monospace;
    font-size: 0.875rem;
    line-height: 1.6;
}

.code-block pre {
    margin: 0;
    background: transparent;
    padding: 0;
    overflow-x: visible;
    border: none;
}

/* Preserve whitespace for bare <code> directly under .code-block (no <pre>). */
.code-block > code {
    white-space: pre;
    display: block;
}

/* Syntax highlighting classes used inside code blocks */
.code-block .keyword { color: #c678dd; }
.code-block .string { color: #98c379; }
.code-block .comment { color: #5c6370; font-style: italic; }
.code-block .function { color: #61afef; }
.code-block .property { color: #d19a66; }

/* Code block copy button */
.code-block .copy-button {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    background: rgba(255, 255, 255, 0.1);
    color: #e2e8f0;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

.code-block .copy-button:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

/* Reset inline-code styling inside pre / code blocks */
pre code,
.code-block code,
.code-block pre code {
    background: transparent;
    padding: 0;
    border-radius: 0;
    color: inherit;
    font-size: inherit;
}

/* Control group — a vertical labeled control (label stacked over an input /
   select). Rows of them wrap via `.control-row`. Used by the option/typography
   control panels (base-variables, sizes, api-methods). */
.control-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
    margin-bottom: 1rem;
}

.control-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.control-group label {
    font-size: 0.75rem;
    color: #374151;
    font-weight: 500;
}

.control-group input,
.control-group select {
    padding: 0.4rem 0.6rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.875rem;
}

/* Status dot — a small colored circle for allowed/blocked/adjusted style
   states. Pair with text. Color via modifier. */
.status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #9ca3af;
    margin-right: 0.4rem;
    vertical-align: middle;
}

.status-dot--ok { background: #10b981; }
.status-dot--warn { background: #f59e0b; }
.status-dot--err { background: #ef4444; }

/* Pill — a small rounded status tag (locked/open, on/off). Color via modifier. */
.pill {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    font-family: ui-monospace, SFMono-Regular, Menlo, 'Courier New', monospace;
    background: #e5e7eb;
    color: #374151;
}

.pill--ok { background: #dcfce7; color: #166534; }
.pill--warn { background: #fef3c7; color: #92400e; }
.pill--err { background: #fee2e2; color: #991b1b; }

/* Fields row — inline inputs sitting side by side (e.g. two date fields, an
   input + button). Children stretch to equal height; `.field-grow` fills. */
.field-row {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
    flex-wrap: wrap;
}

.field-grow {
    flex: 1;
}

/* Full-width grid item — make a child span every column of a
   `.grid` / `.card-grid` / `.grid-2`. */
.col-span-full {
    grid-column: 1 / -1;
}

/* Theme swatch buttons — colored preview buttons in a "switch theme" demo row.
   Each keeps its color on hover (the color IS the preview), overriding the
   default primary-button hover. */
.swatch--blue,   .swatch--blue:hover   { background: #3b82f6; }
.swatch--green,  .swatch--green:hover  { background: #10b981; }
.swatch--purple, .swatch--purple:hover { background: #8b5cf6; }
.swatch--red,    .swatch--red:hover    { background: #ef4444; }
.swatch--dark,   .swatch--dark:hover   { background: #1f2937; }

/* Responsive */
@media (max-width: 768px) {
    body {
        padding: 1rem;
    }

    h1 {
        font-size: 2rem;
    }

    .grid,
    .grid-2,
    .card-grid {
        grid-template-columns: 1fr;
    }

    .card,
    .example-section {
        padding: 1.5rem;
    }
}