/* =============================================================================
   DEX CRM - Bookings (19 Oct 2026)

   The All Bookings page, the New appointment intake and the appointment
   record. The page and the panels are built from the app's own pieces
   (page-header, invoice-widget tiles, data-table, record-tabs, SlideOverPanel,
   the contact picker); this sheet only adds what is Bookings' own. Every
   colour is a theme token, so Navy, Wood and every other theme follow.
   ============================================================================= */

/* ---- Status pills --------------------------------------------------------
   One tone per status. The tone classes are shared with the Contact tab and
   the Calendar overlay (invoice-status--<tone>), and appointment-status--<key>
   carries the same colour for anything that only knows the status key. */

.booking-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 24px;
    padding: 0 10px;
    border-radius: var(--radius-chip, 4px);
    font-size: var(--font-size-tiny);
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    background: var(--status-neutral-tint);
    color: var(--status-neutral);
}

.booking-status--info, .invoice-status--info,
.appointment-status--scheduled { background: var(--status-info-tint); color: var(--status-info); }

.booking-status--violet, .invoice-status--violet,
.booking-status--accent, .invoice-status--accent,
.appointment-status--confirmed { background: var(--accent-tint); color: var(--accent); }

.booking-status--success, .invoice-status--success,
.appointment-status--completed { background: var(--status-success-tint); color: var(--status-success); }

.booking-status--neutral, .invoice-status--neutral,
.appointment-status--cancelled { background: var(--status-neutral-tint); color: var(--status-neutral); }

.booking-status--danger, .invoice-status--danger,
.appointment-status--no_show { background: var(--status-danger-tint); color: var(--status-danger); }

.booking-status--warning, .invoice-status--warning { background: var(--status-warning-tint); color: var(--status-warning); }

/* The appointment record's header status button is the Organisation's own
   project-status-select, filled inline with the status tone's token. */


/* ---- The table ------------------------------------------------------------ */

.booking-table td { vertical-align: middle; }

.booking-when {
    display: block;
    white-space: nowrap;
    color: var(--text-primary);
}

.booking-when__length,
.booking-row__sub {
    display: block;
    margin-top: 2px;
    font-size: var(--font-size-tiny);
    color: var(--text-muted);
}

.booking-row { cursor: pointer; }


/* ---- Forms (intake and the Main tab) ------------------------------------- */

.booking-required { color: var(--status-danger); }

.booking-form__error {
    margin-bottom: 12px;
    padding: 10px 12px;
    border: 1px solid var(--status-danger);
    border-radius: var(--radius-small);
    background: var(--status-danger-tint);
    color: var(--status-danger);
    font-size: var(--font-size-small);
    line-height: 1.4;
}

.booking-form__error[hidden] { display: none; }

.booking-form__hint {
    margin: 6px 0 0;
    font-size: var(--font-size-small);
    color: var(--text-muted);
}

.booking-form__hint[hidden] { display: none; }

.booking-form--grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 16px;
}

.booking-form--grid .booking-form__wide { grid-column: 1 / -1; }

.booking-service-picker { position: relative; }


/* ---- The record panel -----------------------------------------------------
   Main and Notes are built from the Organisation panel's own classes
   (slide-over__layout--record, record-section, record-row, client-tile,
   record-activity / project-activity, record-create). Only what those do not
   cover is here. */

.booking-card__title {
    margin: 0 0 12px;
    font-size: var(--font-size-medium);
    font-weight: 600;
    color: var(--text-primary);
}

/* A search (contact or service) standing in for a row's value while it is
   being changed: as wide as the value it replaced. */
.booking-row-picker {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
}

.booking-row-picker .contact-picker { width: 100%; }

/* Remove beside Open on an attachment row. */
.booking-attachment-remove { flex: none; margin-left: 4px; }

.booking-tab-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.booking-tab-head .booking-card__title { margin: 0; }

.booking-banner {
    margin: 12px var(--gutter) 0;
    padding: 10px 12px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-small);
    background: var(--status-warning-tint);
    color: var(--text-primary);
    font-size: var(--font-size-small);
}

.booking-subtable { width: 100%; }

.booking-menu { max-height: 320px; overflow-y: auto; }


/* ---- Phones ---------------------------------------------------------------- */

@media (max-width: 560px) {
    /* Type and Employee step aside; the row still says when, who and status. */
    .booking-col--secondary { display: none; }

    /* The Contact record's Appointments tab (appointments-section.js). */
    .appointments-table th:nth-child(4),
    .appointments-table td:nth-child(4) { display: none; }

    /* 16px so iOS does not zoom into the field. */
    .booking-form input,
    .booking-form select,
    .booking-form textarea,
    .booking-record .record-row__input,
    .booking-record .project-activity__field,
    .booking-record .contact-picker__input { font-size: 16px; }

    .booking-form--grid { grid-template-columns: minmax(0, 1fr); }

    .booking-form .form-field__control,
    .booking-form .contact-picker__input,
    .booking-record .booking-row-picker .contact-picker__input { min-height: 40px; }

    .booking-tab-head .am-btn { min-height: 40px; }

    .booking-when { white-space: normal; }
}

/* RM-105: editing an appointment note in place, and the locked mark. */
.appointment-note__edit.project-activity__field {
    display: block;
    width: 100%;
    max-height: 240px;
    padding: 8px 10px;
    border: 1px solid var(--border-default);
    border-radius: 5px;
    background: var(--surface-panel);
    font: inherit;
    resize: vertical;
}

.appointment-note__edit-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 8px;
}

.appointment-note__locked {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.appointment-note__locked .icon {
    flex: none;
}

/* RM-109: Appointment details as a card; the pencil shows the fields. */
.appointment-details__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-left: auto;
    padding: 0;
    border: 1px solid var(--border-default);
    border-radius: 5px;
    background: var(--surface-panel);
    color: var(--text-secondary);
    cursor: pointer;
}
.appointment-details__toggle:hover { background: var(--accent-tint); color: var(--accent); }
.appointment-details__toggle[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.appointment-details__toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.appointment-details { display: flex; flex-direction: column; gap: 14px; }

.appointment-details__hero {
    padding: 14px 16px;
    border-radius: 5px;
    background: var(--accent-tint);
}
.appointment-details__service {
    font-size: var(--font-size-medium);
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
}
.appointment-details__when {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    margin-top: 8px;
    font-size: var(--font-size-small);
    color: var(--text-secondary);
}
.appointment-details__when > span { display: inline-flex; align-items: center; gap: 6px; }
.appointment-details__pill {
    padding: 2px 8px;
    border-radius: 5px;
    background: var(--surface-panel);
    font-weight: 500;
    color: var(--text-primary);
}

.appointment-details__facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
}
@container (max-width: 380px) {
    .appointment-details__facts { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
    .appointment-details__facts { grid-template-columns: minmax(0, 1fr); }
}
.appointment-details__fact { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.appointment-details__fact-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 5px;
    background: var(--accent-tint);
    color: var(--accent);
}
.appointment-details__fact-text { display: flex; flex-direction: column; min-width: 0; }
.appointment-details__fact-label { font-size: var(--font-size-tiny); color: var(--text-muted); }
.appointment-details__fact-value {
    font-size: var(--font-size-base);
    font-weight: 500;
    color: var(--text-primary);
    overflow-wrap: anywhere;
}
.appointment-details__fact-value--muted { font-weight: 400; color: var(--text-muted); }

/* RM-110: the Calls tab's recent calls under the filed ones. */
.appointment-calls__suggested { margin-top: 18px; }
.appointment-table-scroll { overflow-x: auto; }

/* RM-108: the no-show fee under the appointment details. */
.appointment-no-show {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 5px;
    font-size: var(--font-size-small);
    line-height: 1.45;
}
.appointment-no-show__icon { display: inline-flex; flex: none; }
.appointment-no-show__text { flex: 1 1 200px; min-width: 0; }
.appointment-no-show--success { background: var(--status-success-tint); color: var(--status-success); }
.appointment-no-show--warning { background: var(--status-warning-tint); color: var(--status-warning); }
.appointment-no-show--danger { background: var(--status-danger-tint); color: var(--status-danger); }
.appointment-no-show .button { margin-left: auto; }