@layer components {
    .field-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 18px 20px;
    }

    .field {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .field.span-2 {
        grid-column: span 2;
    }

    @media (max-width: 640px) {
        .field-grid {
            grid-template-columns: 1fr;
        }

        .field.span-2 {
            grid-column: span 1;
        }
    }

    .field label {
        font-size: 12.5px;
        font-weight: 600;
        color: var(--text-muted);
    }

    .field .hint {
        font-size: 12px;
        color: var(--text-faint);
        margin-top: -2px;
    }

    /* Pairs a native color swatch with a visible hex readout + explicit
       Apply button -- see color-field.js. The swatch alone gives no
       persistent indication of the current value, and there's no obvious
       way to confirm a typed hex without knowing to press Enter. */
    .color-field {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .color-field input[type="color"] {
        width: 44px;
        height: 36px;
        padding: 2px;
        border: 1px solid var(--border-strong);
        border-radius: var(--radius-sm);
        background: var(--surface);
        cursor: pointer;
        flex-shrink: 0;
    }

    .color-field input[type="text"] {
        width: 90px;
        text-transform: uppercase;
        font-family: monospace;
    }

    .job-datetime-wrapper {
        position: relative;
        display: flex;
        align-items: stretch;
        cursor: pointer;
    }

    .job-datetime-wrapper input {
        flex: 1;
        cursor: pointer;
        padding-right: 36px;
    }

    /* The browser's own built-in calendar-picker glyph would otherwise show
       up right next to our custom .job-datetime-icon button, doubling up --
       hide it since job-datetime-picker.js's showPicker() button already
       covers that job. Webkit-only (Chrome/Edge/Safari); Firefox has no
       equivalent hook to remove its native indicator, so it still shows
       both there, same as before this fix. */
    .job-datetime-wrapper input::-webkit-calendar-picker-indicator {
        display: none;
        -webkit-appearance: none;
    }

    .job-datetime-icon {
        position: absolute;
        right: 4px;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        align-items: center;
        justify-content: center;
        width: 26px;
        height: 26px;
        border: none;
        background: transparent;
        color: var(--text-muted);
        cursor: pointer;
    }

    .job-datetime-icon svg {
        width: 16px;
        height: 16px;
    }

    .photo-preview {
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 12.5px;
        margin-bottom: 6px;
    }

    .photo-preview label {
        display: flex;
        align-items: center;
        gap: 4px;
        color: var(--text-muted);
        font-weight: 400;
    }

    .field input,
    .field select,
    .field textarea {
        font-family: inherit;
        font-size: 13.5px;
        padding: 9px 11px;
        border-radius: var(--radius-sm);
        border: 1px solid var(--border-strong);
        background: var(--paper);
        color: var(--text);
    }

    .field input:focus,
    .field select:focus,
    .field textarea:focus {
        outline: none;
        border-color: var(--brand);
        box-shadow: 0 0 0 3px var(--brand-wash);
        background: var(--surface);
    }

    .field .field-validation-error,
    .validation-summary-errors {
        color: var(--critical);
        font-size: 12.5px;
        font-weight: 600;
    }

    .validation-summary-errors ul {
        margin: 6px 0 0;
        padding-left: 18px;
    }

    .form-alert {
        border-radius: var(--radius);
        padding: 12px 16px;
        font-size: 13px;
        font-weight: 600;
        margin-bottom: 16px;
    }

    .form-alert-success {
        background: var(--success-bg);
        color: var(--success);
    }

    .form-alert-error {
        background: var(--critical-bg);
        color: var(--critical);
    }

    .form-alert-warning {
        background: var(--warning-bg);
        color: var(--warning);
    }

    .combobox-quick-create {
        border: none;
        background: transparent;
        color: var(--brand);
        font-weight: 600;
        cursor: pointer;
        padding: 0;
        text-decoration: underline;
    }

    .quick-add-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1000;
    }

    /* The `hidden` attribute must win over the `display: flex` above --
       without this, an invisible-but-still-flex overlay sits fixed over the
       whole page and intercepts every click, even while "hidden". */
    .quick-add-overlay[hidden] {
        display: none;
    }

    .quick-add-dialog {
        background: var(--paper);
        border-radius: var(--radius);
        padding: 20px;
        width: 100%;
        max-width: 360px;
        display: flex;
        flex-direction: column;
        gap: 12px;
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
    }

    .quick-add-dialog h3 {
        margin: 0;
    }

    .quick-add-actions {
        display: flex;
        justify-content: flex-end;
        gap: 8px;
        margin-top: 6px;
    }

    .logo-upload {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .logo-preview {
        width: 64px;
        height: 64px;
        border-radius: var(--radius);
        border: 1px dashed var(--border-strong);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--text-faint);
        background: var(--paper);
        font-family: var(--font-display);
        font-size: 22px;
        font-weight: 700;
        flex-shrink: 0;
        overflow: hidden;
    }

    .logo-preview img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .combobox {
        position: relative;
    }

    .combobox-list {
        position: absolute;
        z-index: 20;
        top: calc(100% + 4px);
        left: 0;
        right: 0;
        max-height: 220px;
        overflow-y: auto;
        margin: 0;
        padding: 4px;
        list-style: none;
        background: var(--surface);
        border: 1px solid var(--border-strong);
        border-radius: var(--radius-sm);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    }

    .combobox-list[hidden] {
        display: none;
    }

    .combobox-list li {
        padding: 8px 10px;
        border-radius: var(--radius-sm);
        font-size: 13.5px;
        color: var(--text);
        cursor: pointer;
    }

    .combobox-list li:hover,
    .combobox-list li.active {
        background: var(--brand-wash);
    }

    .combobox-list .combobox-empty {
        padding: 8px 10px;
        font-size: 13px;
        color: var(--text-faint);
        cursor: default;
    }

    .combobox-list .combobox-empty a {
        color: var(--brand);
        text-decoration: underline;
    }

    .day-chip-row {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
    }

    .day-chip {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        padding: 8px 10px;
        border-radius: var(--radius-sm);
        border: 1px solid var(--border-strong);
        background: var(--paper);
        color: var(--text-muted);
        font-size: 13px;
        cursor: pointer;
        user-select: none;
    }

    .day-chip input {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

    .day-chip:has(input:checked) {
        background: var(--brand-wash);
        border-color: var(--brand);
        color: var(--brand-strong);
    }

    /* V4 "Service descriptions on the booking page": richer selectable cards
       (name/description/duration/price) replacing the old name-only chips,
       still driven by the same hidden checkbox-per-card mechanism. */
    .service-option-list {
        display: flex;
        flex-direction: column;
        gap: 8px;
        max-height: 320px;
        overflow-y: auto;
    }

    .service-option-card {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        padding: 10px 12px;
        border-radius: var(--radius-sm);
        border: 1px solid var(--border-strong);
        background: var(--paper);
        cursor: pointer;
    }

    .service-option-card input {
        margin-top: 3px;
    }

    .service-option-card:has(input:checked) {
        background: var(--brand-wash);
        border-color: var(--brand);
    }

    .service-option-name {
        font-weight: 600;
        color: var(--text);
    }

    .service-option-description {
        margin-top: 2px;
    }

    .service-option-meta {
        margin-top: 4px;
    }

    /* V4 "Availability grid": one chip per candidate slot across the whole
       work-hours window, not just the bookable ones -- available slots use
       the same success color already proven for pill-success elsewhere in
       both themes; unavailable ones are disabled (can never be submitted)
       and struck through so it's clear why they're not selectable. */
    .slot-chip-row {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
    }

    .slot-chip {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 64px;
        padding: 8px 10px;
        border-radius: var(--radius-sm);
        border: 1px solid var(--border-strong);
        background: var(--paper);
        color: var(--text-muted);
        font-size: 13px;
        cursor: pointer;
        user-select: none;
    }

    .slot-chip input {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

    .slot-chip.available {
        border-color: var(--success);
        color: var(--success);
    }

    .slot-chip.available:has(input:checked) {
        background: var(--success-bg);
        border-color: var(--success);
        color: var(--success);
    }

    .slot-chip.unavailable {
        color: var(--text-faint);
        text-decoration: line-through;
        cursor: not-allowed;
        opacity: 0.7;
    }

    /* V4 "Unselectable closed dates": custom month-grid calendar replacing
       the native <input type="date">, which can only restrict a min/max
       range and has no cross-browser way to disable arbitrary individual
       dates -- needed so weekends, schedule exceptions, and fully-booked
       days can be shown and enforced as non-selectable up front. */
    .date-picker {
        max-width: 280px;
        border: 1px solid var(--border-strong);
        border-radius: var(--radius-sm);
        background: var(--paper);
        padding: 10px;
    }

    .date-picker-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 8px;
    }

    .date-picker-title {
        font-weight: 600;
        color: var(--text);
        font-size: 13px;
    }

    .date-picker-nav {
        background: none;
        border: none;
        color: var(--text-muted);
        font-size: 18px;
        line-height: 1;
        cursor: pointer;
        padding: 2px 8px;
    }

    .date-picker-nav:hover {
        color: var(--brand);
    }

    .date-picker-weekdays,
    .date-picker-grid {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 2px;
    }

    .date-picker-weekdays {
        margin-bottom: 4px;
        font-size: 11px;
        color: var(--text-faint);
        text-align: center;
    }

    .date-picker-day {
        aspect-ratio: 1;
        border: none;
        background: none;
        border-radius: var(--radius-sm);
        color: var(--text);
        font-size: 12.5px;
        cursor: pointer;
    }

    .date-picker-day:hover:not(.disabled):not(.empty) {
        background: var(--brand-wash);
    }

    .date-picker-day.selected {
        background: var(--brand);
        color: #fff;
    }

    .date-picker-day.disabled {
        color: var(--text-faint);
        text-decoration: line-through;
        cursor: not-allowed;
        opacity: 0.6;
    }

    .date-picker-day.empty {
        cursor: default;
    }
}