/* ==========================================================================
   The control panel — /admin/{token} and /assistant/{token}.

   Same brand as the booking page: the tokens in omnia.css, the two serif
   faces, the gold and the forest, hairlines instead of heavy borders.

   Different density. booker.css sets 16.5px on a leading of 2, because the
   booking page is read once, slowly, by someone deciding. This is a working
   surface — lists of months, tables of bookings, forms filled repeatedly —
   and at the website's measurements every screen grew about half again in
   height and stopped being scannable. So: 14.5px, tighter leading, smaller
   padding, buttons that do not need 26px of side room. The display face is
   kept for headings and for numbers, which is where it earns its place.

   Everything is nested under .ap. The screens not yet moved across still use
   coordinate.css, and the two can sit on the same page while that is true.
   ========================================================================== */

.ap {
    min-height: 100vh;
    background: var(--ok-cream);
    color: var(--ok-ink);
    font-family: var(--ok-body);
    font-size: 14.5px;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
}

.ap-shell {
    width: 100%;
    /* The same measure the panel already had, so screens still on
       coordinate.css sit at the width they were built for. */
    max-width: 560px;
    margin-inline: auto;
    padding: 16px 16px 48px;
}

.ap h1,
.ap h2,
.ap h3 {
    margin: 0;
    font-family: var(--ok-display);
    font-weight: 500;
    line-height: 1.2;
}

.ap p {
    margin: 0;
}

.ap img {
    display: block;
    max-width: 100%;
}

.ap :focus-visible {
    outline: 2px solid var(--ok-gold-ink);
    outline-offset: 2px;
}

/* Arabic has no upper- and lower-case, and letter-spacing breaks the joins
   between letters, so neither is used anywhere in this file. */

/* ----------------------------------------------------------------- banner */

/* The panel's one block of colour. It was a brown slab; the forest is the
   logo's own green, and the mark sits in it the way it does on the site. */
.ap-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 20px;
    border-radius: var(--ok-radius);
    background: var(--ok-forest);
    color: var(--ok-cream);
}

.ap-banner h1 {
    font-size: 24px;
    font-weight: 400;
}

.ap-banner .ap-banner-sub {
    margin-top: 2px;
    font-size: 11px;
    color: color-mix(in srgb, var(--ok-cream) 66%, transparent);
}

.ap-banner img {
    width: 46px;
    height: auto;
    opacity: .92;
}

/* ------------------------------------------------------------------- head */

.ap-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.ap-head h2 {
    font-size: 21px;
    font-weight: 400;
}

.ap-sub {
    margin-top: 2px;
    font-size: 11.5px;
    color: var(--ok-faint);
}

.ap-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ap-rule {
    height: 1px;
    width: 88px;
    border: 0;
    margin: 0 0 18px;
    background: linear-gradient(to left, var(--ok-gold), transparent);
}

/* --------------------------------------------------------------- surfaces */

/* A hairline and a tint, not a card with a shadow. Twelve of these down a
   page is a list; twelve drop-shadowed boxes is a pile. */
.ap-panel {
    padding: 14px 16px;
    border: 1px solid var(--ok-divider);
    border-radius: var(--ok-radius);
    background: color-mix(in srgb, var(--ok-cream) 60%, transparent);
}

.ap-panel + .ap-panel {
    margin-top: 8px;
}

.ap-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 13px 16px;
    border: 1px solid var(--ok-divider);
    border-radius: var(--ok-radius);
    background: color-mix(in srgb, var(--ok-cream) 60%, transparent);
    transition: border-color .15s ease, background .15s ease;
}

.ap-row + .ap-row {
    margin-top: 8px;
}

.ap-row.is-clickable {
    cursor: pointer;
}

.ap-row.is-clickable:hover {
    border-color: var(--ok-gold);
    background: color-mix(in srgb, var(--ok-gold) 7%, transparent);
}

.ap-row-title {
    font-family: var(--ok-display);
    font-size: 19px;
    line-height: 1.25;
    font-variant-numeric: lining-nums tabular-nums;
}

/* ------------------------------------------------------------------- tabs */

.ap-tabs {
    display: flex;
    gap: 26px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--ok-divider);
}

/* An underline, not two filled slabs: which view you are in is a quiet fact,
   and the filled pair read as two competing buttons. */
.ap-tab {
    padding: 0 0 10px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    font-family: var(--ok-body);
    font-size: 13.5px;
    color: var(--ok-faint);
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease;
}

.ap-tab:hover {
    color: var(--ok-ink);
}

.ap-tab.is-active {
    color: var(--ok-gold-ink);
    border-bottom-color: var(--ok-gold);
}

/* ------------------------------------------------------------------- kpis */

.ap-kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 16px;
}

.ap-kpi {
    padding: 12px 10px;
    border: 1px solid var(--ok-divider);
    border-radius: var(--ok-radius);
    text-align: center;
    background: color-mix(in srgb, var(--ok-cream) 60%, transparent);
}

.ap-kpi .num {
    font-family: var(--ok-display);
    font-size: 28px;
    line-height: 1;
    color: var(--ok-gold-ink);
    font-variant-numeric: lining-nums tabular-nums;
}

.ap-kpi .lb {
    margin-top: 5px;
    font-size: 11px;
    color: var(--ok-sage);
}

/* ---------------------------------------------------------------- buttons */

.ap-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 18px;
    border: 1px solid var(--ok-divider-strong);
    border-radius: 999px;
    background: transparent;
    font-family: var(--ok-body);
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--ok-ink);
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.ap-btn:hover:not(:disabled) {
    border-color: var(--ok-gold);
    background: color-mix(in srgb, var(--ok-gold) 10%, transparent);
}

.ap-btn:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.ap-btn-gold {
    border-color: var(--ok-gold);
    color: var(--ok-gold-ink);
}

.ap-btn-solid {
    background: var(--ok-forest);
    border-color: var(--ok-forest);
    color: var(--ok-cream);
}

.ap-btn-solid:hover:not(:disabled) {
    background: var(--ok-forest-deep);
    border-color: var(--ok-forest-deep);
    color: var(--ok-cream);
}

/* Destructive actions are the only red on the surface, and they are outlined
   rather than filled: a filled red button is a thing the eye lands on first,
   which is the wrong thing to make easy. */
.ap-btn-danger {
    border-color: color-mix(in srgb, var(--ok-danger) 45%, transparent);
    color: var(--ok-danger-ink);
}

.ap-btn-danger:hover:not(:disabled) {
    border-color: var(--ok-danger);
    background: color-mix(in srgb, var(--ok-danger) 8%, transparent);
    color: var(--ok-danger-ink);
}

.ap-btn-icon {
    width: 34px;
    height: 34px;
    padding: 0;
    font-size: 18px;
    line-height: 1;
}

.ap-btn-block {
    display: flex;
    width: 100%;
}

/* ------------------------------------------------------------------- tags */

.ap-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 11px;
    border-radius: 999px;
    font-size: 11px;
    line-height: 1.8;
    white-space: nowrap;
    background: color-mix(in srgb, var(--ok-gold) 14%, transparent);
    color: var(--ok-gold-ink);
}

.ap-tag-sage {
    background: color-mix(in srgb, var(--ok-sage) 18%, transparent);
    color: color-mix(in srgb, var(--ok-sage) 80%, var(--ok-ink));
}

.ap-tag-quiet {
    background: transparent;
    border: 1px solid var(--ok-divider-strong);
    color: var(--ok-muted);
}

.ap-tag-danger {
    background: color-mix(in srgb, var(--ok-danger) 12%, transparent);
    color: var(--ok-danger-ink);
}

/* ------------------------------------------------------------------ notes */

.ap-note {
    padding: 11px 14px;
    border: 1px solid color-mix(in srgb, var(--ok-danger) 40%, transparent);
    border-radius: var(--ok-radius);
    background: color-mix(in srgb, var(--ok-danger) 8%, transparent);
    color: var(--ok-danger-ink);
    font-size: 13px;
}

.ap-empty {
    padding: 28px 18px;
    text-align: center;
    color: var(--ok-faint);
    font-size: 13.5px;
}

/* --------------------------------------------------------------- confirms */

/* The panel that stands between someone and an irreversible act. It is the
   one place on the surface that is allowed to be loud. */
.ap-confirm {
    padding: 16px;
    border: 1px solid color-mix(in srgb, var(--ok-danger) 45%, transparent);
    border-radius: var(--ok-radius);
    background: color-mix(in srgb, var(--ok-danger) 5%, transparent);
    margin-bottom: 12px;
}

.ap-confirm h3 {
    font-size: 18px;
    font-weight: 400;
    color: var(--ok-danger-ink);
}

.ap-confirm-body {
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.85;
    color: var(--ok-ink);
}

.ap-check {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 12px;
    font-size: 13px;
    line-height: 1.7;
    cursor: pointer;
}

.ap-check input {
    width: 16px;
    height: 16px;
    margin-top: 5px;
    accent-color: var(--ok-danger);
    flex: none;
}

.ap-confirm-actions {
    display: flex;
    gap: 8px;
    margin-top: 14px;
}

.ap-confirm-actions .ap-btn {
    flex: 1;
}

/* ---------------------------------------------------------------- stepper */

.ap-stepper {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 14px 4px;
}

.ap-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: none;
}

.ap-step .n {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ok-divider-strong);
    border-radius: 999px;
    background: transparent;
    font-family: var(--ok-display);
    font-size: 14px;
    color: var(--ok-faint);
    font-variant-numeric: lining-nums tabular-nums;
}

.ap-step .lb {
    font-size: 10.5px;
    color: var(--ok-faint);
    white-space: nowrap;
}

.ap-step.is-active .n {
    border-color: var(--ok-gold);
    background: var(--ok-gold);
    color: var(--ok-cream);
}

.ap-step.is-active .lb {
    color: var(--ok-gold-ink);
}

.ap-step.is-done .n {
    border-color: var(--ok-sage);
    color: var(--ok-sage);
}

.ap-step-bar {
    flex: 1;
    height: 1px;
    background: var(--ok-divider);
    /* Sits on the numerals' centre line rather than between the labels. */
    margin-bottom: 22px;
}

/* ----------------------------------------------------------------- mobile */

@media (max-width: 560px) {
    .ap-shell {
        padding: 12px 12px 40px;
    }

    .ap-row {
        align-items: flex-start;
    }

    .ap-step .lb {
        display: none;
    }

    .ap-step-bar {
        margin-bottom: 0;
    }
}