/* demo.css — minimal shared styles for V5 demos.
 *
 * V5 emits semantic class names (qx-text, qx-button, qx-container, …); this
 * file gives them enough visual weight to read in a real browser. A real
 * deployment supplies its own stylesheet — these are demo defaults, not the
 * V5 framework's opinion. */

:root {
    color-scheme: light;
    --qx-bg:        #fafaf8;
    --qx-fg:        #1a1a1a;
    --qx-muted:     #777;
    --qx-accent:    #2563eb;
    --qx-accent-fg: #fff;
    --qx-border:    #d9d9d6;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    background: var(--qx-bg);
    color:      var(--qx-fg);
    margin: 0;
    padding: 2rem;
    line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 { margin: 0; }

.qx-container          { display: flex; flex-direction: column; }
.qx-container--row     { flex-direction: row; align-items: center; }
.qx-container--column  { flex-direction: column; }

.qx-text               { font-size: 1rem; }
.qx-text--xs           { font-size: 0.75rem; }
.qx-text--sm           { font-size: 0.875rem; }
.qx-text--base         { font-size: 1rem; }
.qx-text--lg           { font-size: 1.25rem; }
.qx-text--xl           { font-size: 1.5rem; }
.qx-text--2xl          { font-size: 2rem; }
.qx-text--3xl          { font-size: 2.5rem; }
.qx-text--light        { font-weight: 300; }
.qx-text--normal       { font-weight: 400; }
.qx-text--medium       { font-weight: 500; }
.qx-text--semibold     { font-weight: 600; }
.qx-text--bold         { font-weight: 700; }
.qx-align-start        { text-align: left; }
.qx-align-center       { text-align: center; }
.qx-align-end          { text-align: right; }

.qx-button {
    appearance: none;
    border: 1px solid var(--qx-border);
    background: white;
    color: var(--qx-fg);
    padding: 0.5rem 1rem;
    font: inherit;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.1s ease;
}
.qx-button:hover                 { background: #f0f0ee; }
.qx-button:active                { transform: translateY(1px); }
.qx-button--primary              { background: var(--qx-accent); color: var(--qx-accent-fg); border-color: var(--qx-accent); }
.qx-button--primary:hover        { background: #1d4ed8; }
.qx-button--success              { background: #16a34a; color: white; border-color: #16a34a; }
.qx-button--success:hover        { background: #15803d; }
.qx-button--outline-secondary    { background: white; color: var(--qx-fg); border-color: var(--qx-border); }
.qx-button--outline-secondary:hover { background: #f4f4f2; }
.qx-button--sm                   { padding: 0.25rem 0.5rem; font-size: 0.875rem; }
.qx-button--lg                   { padding: 0.75rem 1.5rem; font-size: 1.125rem; }

/* demo chrome */
.demo-shell        { max-width: 720px; margin: 0 auto; }
.demo-header       { border-bottom: 1px solid var(--qx-border); padding-bottom: 1rem; margin-bottom: 2rem; }
.demo-header h1    { font-size: 1.5rem; font-weight: 600; }
.demo-header p     { color: var(--qx-muted); margin: 0.25rem 0 0; }
.demo-back         { color: var(--qx-accent); text-decoration: none; font-size: 0.875rem; }
.demo-back:hover   { text-decoration: underline; }

/* CSS-only tooltip rendering. V5's `ui.tooltip` capability sets
 * `data-bs-toggle="tooltip"` + `data-bs-title` + `data-bs-placement` on
 * tooltip-bearing elements (so a real Bootstrap.Tooltip JS can adopt
 * them). These rules render a styled popover from the same attributes
 * with zero JS — dark background, four placement variants, hover-only,
 * positioned via the nearest positioned ancestor (which we establish on
 * the tooltip-bearing element itself). */
[data-bs-toggle="tooltip"] { position: relative; }
[data-bs-toggle="tooltip"]::after {
    content: attr(data-bs-title);
    position: absolute;
    background: #1f2937;
    color: #fff;
    padding: 0.35rem 0.55rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.3;
    white-space: nowrap;
    max-width: 18rem;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.12s ease 0.05s;
    z-index: 9999;
    /* Default — placement="top" (and the unscoped fallback) */
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
}
[data-bs-toggle="tooltip"]:hover::after,
[data-bs-toggle="tooltip"]:focus::after        { opacity: 1; }

[data-bs-toggle="tooltip"][data-bs-placement="bottom"]::after {
    bottom: auto; top: calc(100% + 6px);
}
[data-bs-toggle="tooltip"][data-bs-placement="right"]::after {
    left: calc(100% + 6px); right: auto;
    bottom: auto; top: 50%;
    transform: translateY(-50%);
}
[data-bs-toggle="tooltip"][data-bs-placement="left"]::after {
    left: auto; right: calc(100% + 6px);
    bottom: auto; top: 50%;
    transform: translateY(-50%);
}

/* ── capability blocks: picker-row, text-input, validation ───────────────
 * Centralised here so every demo (especially the pure-V5 set) inherits
 * consistent styling without per-demo inline <style> blocks. Ported from
 * the older v4-adapter demos (03-picker-row, 04-form, 07-validation-port).
 */

/* picker-row — props.input.basic */
.qx-picker-row {
    display: inline-flex;
    gap: 0;
    border: 1px solid var(--qx-border);
    border-radius: 6px;
    overflow: hidden;
}
.qx-picker-row__option {
    appearance: none;
    border: none;
    border-right: 1px solid var(--qx-border);
    background: white;
    color: var(--qx-fg);
    padding: 0.5rem 1rem;
    font: inherit;
    cursor: pointer;
    transition: background 0.1s ease;
}
.qx-picker-row__option:last-child   { border-right: none; }
.qx-picker-row__option:hover        { background: #f0f0ee; }
.qx-picker-row__option--selected    { background: var(--qx-accent); color: var(--qx-accent-fg); }
.qx-picker-row__option--selected:hover { background: #1d4ed8; }

/* text-input — props.input.basic */
.qx-text-input {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.qx-text-input__label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--qx-fg);
}
.qx-text-input__field {
    appearance: none;
    border: 1px solid var(--qx-border);
    background: white;
    color: var(--qx-fg);
    padding: 0.5rem 0.625rem;
    font: inherit;
    border-radius: 6px;
    transition: border-color 0.1s ease, box-shadow 0.1s ease;
    width: 100%;
    box-sizing: border-box;
}
.qx-text-input__field:focus {
    outline: none;
    border-color: var(--qx-accent);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

/* validation feedback — forms.validation
 *
 * The propHandler sets data-qx-invalid="true" on the field's wrapper
 * after first blur if rules fail. Surface that with a red ring + error
 * text below. Pristine fields (data-qx-invalid absent) render clean.
 */
[data-qx-invalid="true"] .qx-text-input__field {
    border-color: #c0392b;
    box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.12);
}
[data-qx-validation-error] {
    color: #c0392b;
    font-size: 0.8125rem;
    margin-top: 0.2rem;
}

/* datepicker / colorpicker — props.input.basic
 *
 * Same field-shape as text-input; pick up the .qx-text-input__field
 * rules by adding the class. (The blocks emit their own root classes
 * for variant styling; field-level rules live above.)
 */
.qx-datepicker__field, .qx-colorpicker__field {
    appearance: none;
    border: 1px solid var(--qx-border);
    background: white;
    color: var(--qx-fg);
    padding: 0.5rem 0.625rem;
    font: inherit;
    border-radius: 6px;
}

/* form block — props.input.form
 *
 * The dedicated `form` block (not used by pure-V5 demos yet — they
 * compose form-shaped layouts from container + text-input + button).
 * Included for parity demos that DO use it.
 */
.qx-form                       { display: flex; flex-direction: column; gap: 0.875rem; }
.qx-form__row                  { display: flex; flex-direction: column; gap: 0.25rem; }
.qx-form__row--boolean         { flex-direction: row; align-items: center; gap: 0.5rem; }
.qx-form__label                { font-size: 0.875rem; font-weight: 500; color: var(--qx-fg); }
.qx-form__required             { color: #c0392b; }
.qx-form__field {
    appearance: none;
    border: 1px solid var(--qx-border);
    background: white;
    color: var(--qx-fg);
    padding: 0.5rem 0.625rem;
    font: inherit;
    border-radius: 6px;
    transition: border-color 0.1s ease, box-shadow 0.1s ease;
}
.qx-form__field:focus          { outline: none; border-color: var(--qx-accent); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); }
textarea.qx-form__field        { resize: vertical; min-height: 4em; font-family: inherit; }
.qx-form__check                { width: 1rem; height: 1rem; accent-color: var(--qx-accent); }
.qx-form__hint                 { font-size: 0.75rem; color: var(--qx-muted); }

/* Validation feedback. The form's submit-time error summary (.qx-form__errors,
 * role=alert) and per-field live errors (.qx-form__field-error, shown on blur)
 * both render through the one validation engine. Invalid fields get a red ring
 * via [data-qx-invalid="true"]. Hidden until there's something to say. */
.qx-form__errors {
    margin: 0;
    padding: 0.6rem 0.75rem;
    border: 1px solid #f0c2c2;
    border-radius: 6px;
    background: #fdf0f0;
    color: #9a2c2c;
    font-size: 0.85rem;
}
.qx-form__errors[hidden]                 { display: none; }
.qx-form__field-error {
    font-size: 0.75rem;
    color: #c0392b;
    min-height: 0;
}
.qx-form__field-error:empty              { display: none; }
.qx-form__field[data-qx-invalid="true"],
.qx-form__row[data-qx-invalid="true"] .qx-form__field {
    border-color: #c0392b;
}
.qx-form__field[data-qx-invalid="true"]:focus {
    box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.15);
}

/* effect.basic — Phase E7
 *
 * `effect.speechBubble` — a viewport-positioned overlay that anchors
 * itself to a target block via [data-qx-id]. The block sets its own
 * top/left via JS; the CSS only handles the visual + the tail
 * triangle's per-direction placement.
 */
.qx-speech-bubble {
    background:   var(--qx-fg);
    color:        var(--qx-bg);
    padding:      0.5rem 0.75rem;
    border-radius: 8px;
    font-size:    0.875rem;
    line-height:  1.4;
    max-width:    220px;
    box-shadow:   0 4px 16px rgba(0, 0, 0, 0.18);
    /* The bubble itself is non-interactive — overrides the inline
     * pointer-events: none from the inline style if anyone changes it. */
    pointer-events: none;
}
.qx-speech-bubble__body         { white-space: pre-wrap; word-break: break-word; }
.qx-speech-bubble__tail {
    position: absolute;
    width: 0; height: 0;
    border: 6px solid transparent;
}
.qx-speech-bubble--above .qx-speech-bubble__tail {
    top: 100%; left: 50%; transform: translateX(-50%);
    border-top-color: var(--qx-fg);
}
.qx-speech-bubble--below .qx-speech-bubble__tail {
    bottom: 100%; left: 50%; transform: translateX(-50%);
    border-bottom-color: var(--qx-fg);
}
.qx-speech-bubble--left .qx-speech-bubble__tail {
    top: 50%; left: 100%; transform: translateY(-50%);
    border-left-color: var(--qx-fg);
}
.qx-speech-bubble--right .qx-speech-bubble__tail {
    top: 50%; right: 100%; transform: translateY(-50%);
    border-right-color: var(--qx-fg);
}

/* ── table (capability data.table) ──────────────────────────────────────
 * A semantic <table> rendered by the `table` block. System-agnostic base
 * styling; sites layer their own look via the author `class` (e.g. seaside
 * adds `.tariff-table`). On narrow screens each row collapses into a stacked
 * "card": the <thead> is hidden and each <td> shows its column label from the
 * data-label attribute the block emits. This keeps the real <table> element
 * (and its accessibility) intact while reflowing the layout for phones. */
.qx-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}
.qx-table caption {
    caption-side: top;
    text-align: left;
    font-weight: 600;
    color: var(--qx-fg);
    padding: 0 0 0.5rem;
}
.qx-table th,
.qx-table td {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--qx-border, #e5e7eb);
}
.qx-table thead th {
    font-weight: 600;
    color: var(--qx-fg);
    border-bottom-width: 2px;
    white-space: nowrap;
}
.qx-table tbody tr:hover { background: color-mix(in srgb, var(--qx-accent, #2563eb) 6%, transparent); }
.qx-table .qx-table-empty td {
    color: var(--qx-muted, #6b7280);
    font-style: italic;
    text-align: center;
}

/* Responsive: stack rows as cards under 640px. The <table> stays a table in
 * the DOM (a11y/SEO preserved); only the visual box model changes. */
@media (max-width: 640px) {
    .qx-table thead {
        position: absolute;
        width: 1px; height: 1px;
        overflow: hidden; clip: rect(0 0 0 0);
        white-space: nowrap;
    }
    .qx-table tbody tr {
        display: block;
        margin-bottom: 0.75rem;
        border: 1px solid var(--qx-border, #e5e7eb);
        border-radius: 8px;
        padding: 0.25rem 0.5rem;
    }
    .qx-table td {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        border-bottom: 1px solid color-mix(in srgb, var(--qx-border, #e5e7eb) 60%, transparent);
        text-align: right;
    }
    .qx-table tbody tr td:last-child { border-bottom: 0; }
    .qx-table td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--qx-muted, #6b7280);
        text-align: left;
    }
}

/* ── table: pills, group banners, link cells (capability data.table) ────── */
.qx-pill {
    display: inline-block;
    padding: 0.15em 0.6em;
    border-radius: 999px;
    font-size: 0.85em;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    background: color-mix(in srgb, var(--qx-fg, #334155) 10%, transparent);
    color: var(--qx-fg, #334155);
}
/* Status tones (statusType slug). Tasteful defaults; sites can override. */
.qx-pill--full-week   { background: #dcfce7; color: #166534; }   /* green  */
.qx-pill--short-break { background: #fef3c7; color: #92400e; }   /* amber  */
.qx-pill--sold-out    { background: #f1f5f9; color: #64748b; }   /* grey   */

/* Group banner row — one per group (e.g. a season), spans all columns. */
.qx-table-group th {
    background: color-mix(in srgb, var(--qx-accent, #2563eb) 8%, transparent);
    color: var(--qx-fg, #0f172a);
    font-weight: 700;
    text-align: left;
    padding: 0.55rem 0.75rem;
    border-bottom: 2px solid var(--qx-border, #e5e7eb);
}

/* Link cell — an anchor inside a <td>. */
.qx-table-link { color: var(--qx-accent, #2563eb); font-weight: 600; text-decoration: none; }
.qx-table-link:hover { text-decoration: underline; }

/* Mobile stacked-card: group banners stay full-width separators. */
@media (max-width: 640px) {
    .qx-table-group th { display: block; }
}