/*
 * DermaMedica admin area.
 *
 * This file deliberately defines NO colours, fonts, radii or shadows of its own.
 * Every value below resolves to a custom property declared in dermamedica.css -
 * --navy, --sand, --font-display, --radius-md and so on - which the admin
 * layouts load first.
 *
 * That is the whole point: the admin panel is the same product as the public
 * site, so when the brand palette or the type scale changes there, the admin
 * follows without anyone having to remember this file exists. Hard-coding a hex
 * value here would create exactly the drift we are avoiding.
 *
 * Class names keep the `adm-` prefix carried over from CandleCraft.
 *
 * Layout is fluid from 320px up - Charlotte checks this on an iPad (US 5.1).
 */

/* ---------- Shell ---------- */

body.admin {
    --container: 1640px;

    margin: 0;
    background: var(--mist);
    color: var(--body);
    font-family: var(--font-ui);
    font-size: var(--text-base);
    line-height: 1.55;
}

body.admin *,
body.admin *::before,
body.admin *::after {
    box-sizing: border-box;
}

.adm-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Mirrors the public .header: sticky, translucent, blurred. */
.adm-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--line);
}

.adm-header__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-sm);
    padding-block: 0.85rem;
}

.adm-header__logo {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}

.adm-header__logo img {
    display: block;
    width: auto;
    height: 34px;
}

/* Distinguishes the admin panel from the public site at a glance, without
   inventing a new colour - it is the brand sand on its own tint. */
.adm-badge-staff {
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-pill);
    background: var(--sand-soft);
    color: var(--sand-deep);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.adm-session {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gap-sm);
    font-size: var(--text-sm);
    color: var(--body);
}

.adm-global-help {
    position: relative;
    display: inline-flex;
}

.adm-help-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.45rem;
    height: 2.45rem;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--white);
    color: var(--navy);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease),
                background-color 0.2s var(--ease);
}

.adm-help-trigger:hover,
.adm-help-trigger:focus-visible,
.adm-help-trigger[aria-expanded="true"] {
    border-color: var(--navy-soft);
    background: var(--mist);
    box-shadow: var(--shadow-md);
}

.adm-help-trigger img {
    width: 1.25rem;
    height: 1.25rem;
}

.adm-help-popover {
    position: absolute;
    top: calc(100% + 0.65rem);
    right: 0;
    z-index: 250;
    width: min(22rem, calc(100vw - 2rem));
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--white);
    box-shadow: var(--shadow-lg);
    color: var(--body);
    text-align: left;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.18s var(--ease), transform 0.18s var(--ease);
}

.adm-help-popover[hidden] {
    display: none;
}

.adm-help-popover.is-hiding {
    opacity: 0;
    transform: translateY(-0.25rem);
}

.adm-help-popover::before {
    content: "";
    position: absolute;
    top: -0.42rem;
    right: 0.9rem;
    width: 0.75rem;
    height: 0.75rem;
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
    background: var(--white);
    transform: rotate(45deg);
}

.adm-help-popover__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.45rem;
}

.adm-help-popover__title {
    margin: 0;
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: 0;
}

.adm-help-popover__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--white);
    color: var(--muted);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.adm-help-popover__close:hover,
.adm-help-popover__close:focus-visible {
    border-color: var(--navy-soft);
    color: var(--navy);
}

.adm-help-popover__body {
    margin: 0;
    color: var(--muted);
    font-size: var(--text-xs);
    line-height: 1.55;
}

/* Not sticky: .adm-header already sticks to top:0, and a second sticky bar at
   the same offset slides underneath it. Positioned only so the dropdowns paint
   over the page below. */
.adm-nav {
    position: relative;
    z-index: 40;
    background: var(--white);
    border-bottom: 1px solid var(--line);
}

.adm-nav__bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-block: 0.4rem;
}

.adm-nav__menu {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.2rem;
    min-width: 0;
}

.adm-nav__burger {
    display: none;
    align-items: center;
    gap: 0.6rem;
    min-height: 44px;
    padding: 0.5rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--white);
    color: var(--navy);
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
}

.adm-nav__burger-bars,
.adm-nav__burger-bars::before,
.adm-nav__burger-bars::after {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: currentcolor;
    transition: transform 0.2s var(--ease), opacity 0.2s var(--ease);
}

.adm-nav__burger-bars {
    position: relative;
}

.adm-nav__burger-bars::before,
.adm-nav__burger-bars::after {
    position: absolute;
    left: 0;
    content: "";
}

.adm-nav__burger-bars::before {
    top: -6px;
}

.adm-nav__burger-bars::after {
    top: 6px;
}

.adm-nav__burger[aria-expanded="true"] .adm-nav__burger-bars {
    background: transparent;
}

.adm-nav__burger[aria-expanded="true"] .adm-nav__burger-bars::before {
    transform: translateY(6px) rotate(45deg);
}

.adm-nav__burger[aria-expanded="true"] .adm-nav__burger-bars::after {
    transform: translateY(-6px) rotate(-45deg);
}

.adm-nav__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 44px;
    padding: 0.5rem 1rem;
    border: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--body);
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}

.adm-nav__link:hover,
.adm-nav__link:focus-visible {
    background: var(--line-soft);
    color: var(--navy);
}

.adm-nav__link[aria-current="page"],
.adm-nav__link[data-current="true"] {
    background: var(--navy);
    color: var(--white);
}

.adm-nav__group {
    position: relative;
}

.adm-nav__chevron {
    width: 8px;
    height: 8px;
    margin-top: -3px;
    border-right: 2px solid currentcolor;
    border-bottom: 2px solid currentcolor;
    transform: rotate(45deg);
    transition: transform 0.2s var(--ease);
}

.adm-nav__group.is-open .adm-nav__chevron {
    transform: rotate(-135deg);
    margin-top: 3px;
}

.adm-nav__panel {
    position: absolute;
    top: calc(100% + 0.4rem);
    left: 0;
    z-index: 50;
    display: grid;
    gap: 0.15rem;
    min-width: 16rem;
    padding: 0.4rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md, 14px);
    background: var(--white);
    box-shadow: var(--shadow-md);
}

/* display:grid above would otherwise beat the hidden attribute's display:none
   and leave every menu open at once. */
.adm-nav__panel[hidden] {
    display: none;
}

.adm-nav__item {
    display: grid;
    gap: 0.1rem;
    padding: 0.55rem 0.75rem;
    border-radius: 10px;
    color: var(--body);
    text-decoration: none;
    transition: background-color 0.2s var(--ease);
}

.adm-nav__item:hover,
.adm-nav__item:focus-visible {
    background: var(--mist);
}

.adm-nav__item[aria-current="page"] {
    background: var(--mist);
    box-shadow: inset 3px 0 0 var(--navy);
}

.adm-nav__item-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--navy);
    font-size: var(--text-sm);
    font-weight: 600;
}

.adm-nav__item-hint {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.35;
}

@media (max-width: 1280px) {
    .adm-nav__link {
        padding-inline: 0.75rem;
    }
}

@media (max-width: 1024px) {
    .adm-nav__bar {
        display: block;
    }

    .adm-nav__burger {
        display: inline-flex;
    }

    .adm-nav__menu {
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0.15rem;
        padding-block: 0.6rem 0.8rem;
    }

    .adm-nav__menu.is-open {
        display: flex;
    }

    .adm-nav__link {
        justify-content: space-between;
        width: 100%;
    }

    /* A dropdown on a phone would hang off the screen, so the groups open in
       place as an accordion instead. */
    .adm-nav__panel {
        position: static;
        min-width: 0;
        margin: 0.15rem 0 0.4rem 0.75rem;
        border-color: var(--line-soft);
        box-shadow: none;
    }
}

/* Visiting practitioner workspace: three links, no groups, so they sit inline
   rather than in the drawer. */
.adm-nav__menu--personal .adm-nav__link {
    padding-inline: 1.2rem;
}

.adm-main {
    flex: 1;
    padding-block: var(--gap-lg) var(--gap-xl);
}

.adm-visit-eyebrow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin: 0 0 0.65rem;
    color: var(--muted);
    font-size: 14px;
}

.adm-visit-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    padding-block: 1.25rem;
    margin-bottom: 1.5rem;
    border-block: 1px solid var(--line);
}

.adm-visit-summary span,
.adm-visit-summary strong {
    display: block;
}

.adm-visit-summary span {
    color: var(--muted);
    font-size: 13px;
    margin-bottom: 0.25rem;
}

.adm-visit-summary strong {
    font-size: 16px;
}

.adm-visit-period {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-block: 1rem;
}

.adm-visit-planner h2,
.adm-visit-booking h2 {
    margin: 0;
    font: 600 18px/1.4 var(--font-ui);
    letter-spacing: 0;
}

.adm-visit-week {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.4rem;
    margin-block: 1.5rem;
}

.adm-visit-week a {
    display: grid;
    justify-items: center;
    gap: 0.3rem;
    padding: 0.75rem 0.2rem;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--white);
    color: var(--body);
    text-decoration: none;
}

.adm-visit-week a[aria-current] {
    border-color: var(--navy);
    background: var(--navy);
    color: var(--white);
}

.adm-visit-week span,
.adm-visit-week small {
    font-size: 12px;
}

.adm-visit-week strong {
    font-size: 22px;
    line-height: 1.2;
}

.adm-visit-agenda {
    list-style: none;
    padding: 0;
    margin: 0;
}

.adm-visit-agenda li {
    display: grid;
    grid-template-columns: 100px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 1.5rem;
    padding: 1.25rem 0;
    border-top: 1px solid var(--line);
}

.adm-visit-time,
.adm-visit-client {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
    overflow-wrap: anywhere;
}

.adm-visit-time span,
.adm-visit-client span,
.adm-visit-client small {
    color: var(--muted);
    font-size: 14px;
}

.adm-visit-empty {
    padding: 2rem 0;
    border-block: 1px solid var(--line);
    text-align: center;
}

.adm-visit-empty h3 {
    font: 500 16px/1.5 var(--font-ui);
    margin: 0 0 1rem;
}

.adm-form.adm-visit-booking {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
    align-items: start;
    gap: 3rem;
    max-width: 1100px;
}

.adm-visit-fields {
    min-width: 0;
}

.adm-visit-section {
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--line);
}

.adm-visit-section > h2 {
    margin-bottom: 1rem;
}

.adm-visit-review {
    padding-left: 1.5rem;
    border-left: 1px solid var(--line);
    min-width: 0;
}

.adm-visit-review dl > div {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem;
    padding-block: 0.7rem;
    border-bottom: 1px solid var(--line);
}

.adm-visit-review dt {
    color: var(--muted);
}

.adm-visit-review dd {
    margin: 0;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.adm-visit-review .btn,
.adm-visit-review > .adm-btn {
    width: 100%;
    justify-content: center;
    white-space: normal;
    text-align: center;
    margin-top: 0.65rem;
}

.adm-visit-availability {
    min-height: 1.5rem;
    font-size: 14px;
    color: var(--muted);
}

.adm-visit-availability[data-state="available"] {
    color: #1f6b45;
}

.adm-visit-availability[data-state="unavailable"] {
    color: #a3342b;
}

.adm-visit-suggestions {
    padding: 0;
    border: 0;
    margin: 0;
}

.adm-visit-suggestions legend {
    font-size: 14px;
    margin-bottom: 0.75rem;
}

.adm-visit-slots {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
    gap: 0.4rem;
    max-height: 180px;
    overflow-y: auto;
}

.adm-visit-slots [aria-pressed="true"] {
    background: var(--navy);
    color: var(--white);
}

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

@media (max-width: 760px) {
    .adm-visit-summary,
    .adm-form.adm-visit-booking {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .adm-visit-review {
        padding: 1rem 0;
        border-left: 0;
        border-top: 1px solid var(--line);
    }

    .adm-visit-agenda li {
        grid-template-columns: 80px minmax(0, 1fr);
        gap: 0.75rem;
    }

    .adm-visit-agenda li > .adm-badge {
        justify-self: start;
    }
}

/* ---------- Toolbar ---------- */

.adm-toolbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--gap-sm);
    margin-bottom: var(--gap-md);
}

/* Display serif, matching the public site's headings. */
.adm-toolbar__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-h3);
    font-weight: 400;
    letter-spacing: -0.015em;
    color: var(--ink);
}

.adm-toolbar__sub {
    margin: 0.3rem 0 0;
    font-size: var(--text-sm);
    color: var(--muted);
}

.adm-toolbar__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.55rem;
}

.adm-medication-review {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.95rem 1.15rem;
    margin-bottom: var(--gap-md);
    border-left: 4px solid #287d67;
    background: #edf7f3;
    color: #163d35;
}

.adm-medication-review--missing {
    border-left-color: #aa6a26;
    background: #fff6e9;
    color: #633b17;
}

.adm-medication-review h2 {
    margin: 0 0 0.25rem;
    font-size: 1rem;
    line-height: 1.3;
}

.adm-medication-review p {
    margin: 0;
    overflow-wrap: anywhere;
    white-space: normal;
}

@media (max-width: 600px) {
    .adm-medication-review {
        flex-direction: column;
    }
}

/* ---------- Dashboard alerts ---------- */

.adm-privacy-attention {
    margin-bottom: var(--gap-md);
    padding: 0.9rem 1.15rem;
    border-left: 4px solid #287d67;
    background: #edf7f3;
    color: #163d35;
}

.adm-privacy-attention__header,
.adm-privacy-attention__list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.45rem 1rem;
}

.adm-privacy-attention h2 {
    margin: 0;
    font-size: 1rem;
    line-height: 1.3;
}

.adm-privacy-attention p {
    margin: 0.25rem 0 0;
    font-size: var(--text-sm);
}

.adm-privacy-attention__list {
    margin: 0.75rem 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid #badbd0;
}

.adm-privacy-attention__list li {
    padding: 0.55rem 0;
    border-bottom: 1px solid #badbd0;
    font-size: var(--text-sm);
}

.adm-privacy-attention__list time {
    color: #3f5a52;
    font-size: var(--text-xs);
}

.adm-alert {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--gap-sm);
    align-items: start;
    padding: clamp(1rem, 2vw, 1.35rem);
    margin-bottom: var(--gap-md);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    transition: opacity 0.24s var(--ease), transform 0.24s var(--ease);
}

.adm-alert[hidden] {
    display: none;
}

.adm-alert.is-hiding {
    opacity: 0;
    transform: translateY(-0.35rem);
}

.adm-alert--danger {
    background: #fff1f0;
    border-color: #e8aaa5;
    color: #7f211b;
}

.adm-alert__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.15rem;
    height: 2.15rem;
    border-radius: var(--radius-pill);
    background: #a3342b;
    color: var(--white);
    font-size: 1.1rem;
    font-weight: 800;
    line-height: 1;
}

.adm-alert__body {
    min-width: 0;
}

.adm-alert__eyebrow {
    margin: 0 0 0.2rem;
    font-size: var(--text-xs);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.adm-alert h2 {
    margin: 0;
    color: #7f211b;
    font-size: clamp(1.15rem, 2vw, 1.45rem);
    line-height: 1.25;
}

.adm-alert p {
    margin: 0.35rem 0 0;
    color: #7f211b;
}

.adm-alert__list {
    display: grid;
    gap: 0.35rem;
    padding: 0;
    margin: 0.8rem 0 0;
    list-style: none;
}

.adm-alert__list li {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.65rem;
    align-items: baseline;
}

.adm-alert__list span {
    font-size: var(--text-xs);
}

.adm-alert__actions {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    align-self: center;
}

.adm-alert__button {
    white-space: nowrap;
}

.adm-alert__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 1px solid rgba(127, 33, 27, 0.22);
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.72);
    color: #7f211b;
    font-family: var(--font-ui);
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease),
                color 0.2s var(--ease);
}

.adm-alert__close:hover,
.adm-alert__close:focus-visible {
    border-color: #a3342b;
    background: var(--white);
    color: #a3342b;
    outline: none;
}

/* ---------- Tabs ---------- */

.adm-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    width: fit-content;
    max-width: 100%;
    padding: 0.28rem;
    margin-bottom: var(--gap-md);
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--white);
    box-shadow: var(--shadow-sm);
}

.adm-tabs__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.45rem;
    padding: 0.58rem 0.95rem;
    border-radius: var(--radius-pill);
    color: var(--body);
    font-size: var(--text-sm);
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.2s var(--ease), color 0.2s var(--ease),
                box-shadow 0.2s var(--ease);
}

.adm-tabs__link:hover,
.adm-tabs__link:focus-visible {
    background: var(--line-soft);
    color: var(--navy);
}

.adm-tabs__link.is-active,
.adm-tabs__link[aria-current="page"] {
    background: var(--navy);
    color: var(--white);
    box-shadow: 0 8px 20px rgba(33, 56, 107, 0.18);
}

/* ---------- Filter bar ---------- */

.adm-filter {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-sm);
    align-items: flex-end;
    padding: var(--gap-md);
    margin-bottom: var(--gap-md);
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.adm-filter__group {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 12rem;
    flex: 1 1 12rem;
}

.adm-filter__group label {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--muted);
}

.adm-filter--consent-queue .adm-filter__actions .adm-btn {
    min-height: 2.75rem;
}

.adm-filter__actions {
    display: flex;
    gap: 0.5rem;
}

/* ---------- Table ---------- */

.adm-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.adm-table th {
    text-align: left;
    padding: 0.85rem 1rem;
    background: var(--line-soft);
    border-bottom: 1px solid var(--line);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.adm-table td {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--line-soft);
    font-size: var(--text-sm);
    color: var(--body);
}

.adm-table tr:last-child td {
    border-bottom: none;
}

.adm-strong {
    font-weight: 600;
    color: var(--ink);
}

.adm-muted {
    color: var(--muted);
}

.adm-comparison-table td {
    vertical-align: top;
}

@media (min-width: 761px) {
    .adm-comparison-table td:nth-child(3) {
        width: 38%;
    }
}

.adm-comparison-summary {
    margin: 0;
}

.adm-comparison-summary > div + div {
    margin-top: 0.55rem;
}

.adm-comparison-summary dt {
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--muted);
}

.adm-comparison-summary dd {
    margin: 0.1rem 0 0;
    overflow-wrap: anywhere;
}

/* Rows needing attention, e.g. stock at or below the reorder level (US 6.5).
   Colour alone is never the signal - always pair this with a text badge, or the
   state is invisible to a colour-blind user and to anyone printing the page. */
.adm-row--warn {
    background: var(--sand-soft);
}

/* ---------- Badges ---------- */

.adm-badge {
    display: inline-block;
    padding: 0.2rem 0.7rem;
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    font-weight: 600;
}

.adm-badge--green { background: #e7f2ec; color: #1f6b45; }
.adm-badge--amber { background: var(--sand-soft); color: var(--sand-deep); }
.adm-badge--red { background: #fbeceb; color: #a3342b; }
.adm-badge--grey { background: var(--line-soft); color: var(--muted); }
.adm-badge--navy { background: var(--mist); color: var(--navy); }
.adm-badge--clinic { background: var(--sky-soft); color: var(--navy); }

.adm-consent-panel {
    margin-bottom: var(--gap-md);
    padding: 0.9rem 1.25rem;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}

.adm-consent-panel--attention {
    padding: 0;
    background: transparent;
    border: 0;
}

.adm-consent-panel--attention .adm-consent-panel__header {
    padding-left: 0.9rem;
    border-left: 3px solid var(--sand);
}

.adm-consent-panel__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
}

.adm-consent-panel__title {
    margin: 0;
    color: var(--ink);
    font-size: var(--text-sm);
    font-weight: 700;
}

.adm-consent-panel__status {
    margin: 0.1rem 0 0;
    color: var(--muted);
    font-size: var(--text-sm);
}

.adm-consent-panel--attention .adm-consent-panel__status {
    color: var(--body);
}

.adm-consent-counts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin: 0.7rem 0 0;
}

.adm-consent-counts > div {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    padding: 0.3rem 0.55rem;
    background: var(--line-soft);
    border-radius: var(--radius-sm);
}

.adm-consent-counts dt {
    color: var(--body);
    font-size: var(--text-xs);
}

.adm-consent-counts dd {
    margin: 0;
    color: var(--navy);
    font-size: var(--text-xs);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.adm-consent-panel__table {
    margin-top: 0.9rem;
}

@media (max-width: 760px) {
    .adm-consent-panel__header > div:first-child,
    .adm-consent-panel__header .adm-toolbar__actions {
        flex-basis: 100%;
    }
}

.adm-consent-overview {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 1rem;
    padding: 0.75rem 0;
    margin-bottom: var(--gap-md);
    border-block: 1px solid var(--line);
}

.adm-consent-overview h2 {
    margin: 0;
    color: var(--navy);
    font-size: var(--text-sm);
}

.adm-consent-overview__states {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.adm-consent-overview > a {
    margin-left: auto;
    font-size: var(--text-sm);
    white-space: nowrap;
}

.adm-send {
    display: grid;
    gap: var(--gap-md);
    max-width: 1100px;
}

.adm-send__heading {
    margin: 0;
    color: var(--navy);
    font-size: 1.2rem;
}

.adm-send__eyebrow {
    display: block;
    margin-bottom: 0.2rem;
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
}

.adm-send__search {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: var(--gap-sm);
    margin: var(--gap-sm) 0;
    padding: var(--gap-md);
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
}

.adm-send__search .input { margin: 0; }
.adm-send__search label,
.adm-send__step label {
    display: block;
    margin-bottom: 0.4rem;
    color: var(--ink);
    font-size: var(--text-sm);
    font-weight: 600;
}

.adm-send__search input,
.adm-send__step select {
    width: 100%;
    min-height: 2.75rem;
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--white);
    color: var(--ink);
    font: inherit;
}

.adm-send__search input:focus-visible,
.adm-send__step select:focus-visible,
.adm-send__form-row:focus-within {
    outline: 2px solid var(--navy-soft);
    outline-offset: 2px;
}

.adm-send__customer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-sm);
    padding-bottom: var(--gap-sm);
    border-bottom: 1px solid var(--line);
}

.adm-send__customer .adm-muted { margin: 0.2rem 0 0; }

.adm-send__dialog {
    width: min(32rem, calc(100vw - 2rem));
    max-height: calc(100dvh - 2rem);
    padding: 1.5rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--white);
    color: var(--ink);
    box-shadow: var(--shadow-md);
}

.adm-send__dialog::backdrop { background: rgba(15, 29, 54, 0.55); }
.adm-send__dialog-close { display: flex; justify-content: flex-end; }
.adm-send__dialog-close .adm-btn { min-width: 2.5rem; padding-inline: 0.5rem; }
.adm-send__dialog h2 { margin: 0 0 0.65rem; color: var(--navy); font-size: 1.3rem; }
.adm-send__dialog p { margin: 0 0 1.25rem; line-height: 1.5; }
.adm-send__dialog-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.adm-send__dialog-actions a { min-height: 2.75rem; }

.adm-send__form {
    padding: var(--gap-md);
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
}

.adm-send__step { max-width: 680px; }

.adm-send__delivery {
    min-width: 0;
    max-width: 680px;
    margin: var(--gap-md) 0 0;
    padding: 0;
    border: 0;
}

.adm-send__delivery legend {
    margin-bottom: 0.4rem;
    color: var(--navy);
    font-size: var(--text-sm);
    font-weight: 700;
}

.adm-send__delivery-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}

.adm-send__delivery-option {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 2.75rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    color: var(--ink);
    cursor: pointer;
    font-size: var(--text-sm);
    font-weight: 600;
}

.adm-send__delivery-option:has(input:checked) {
    border-color: var(--navy-soft);
    background: var(--mist);
}

.adm-send__delivery-option:focus-within {
    outline: 2px solid var(--navy-soft);
    outline-offset: 2px;
}

.adm-send__delivery-option--disabled {
    color: var(--muted);
    cursor: not-allowed;
    opacity: 0.7;
}

.adm-send__delivery-option input {
    flex: none;
    width: 1rem;
    height: 1rem;
    margin: 0;
    accent-color: var(--navy);
}

.adm-send__forms {
    min-width: 0;
    margin: var(--gap-md) 0 0;
    padding: 0;
    border: 0;
}

.adm-send__forms legend {
    margin-bottom: 0.4rem;
    color: var(--navy);
    font-size: var(--text-sm);
    font-weight: 700;
}

.adm-send__form-row {
    display: grid;
    grid-template-columns: 1.15rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.8rem;
    min-height: 4rem;
    padding: 0.75rem 0.5rem;
    border-bottom: 1px solid var(--line-soft);
    cursor: pointer;
}

.adm-send__form-row:hover,
.adm-send__form-row:has(input:checked) { background: var(--mist); }
.adm-send__form-row input { width: 1.1rem; height: 1.1rem; accent-color: var(--navy); }
.adm-send__form-copy { display: grid; gap: 0.15rem; min-width: 0; }
.adm-send__form-copy strong { font-size: var(--text-sm); }
.adm-send__form-copy small { color: var(--muted); font-size: var(--text-xs); }
.adm-send__form-row [hidden] { display: none; }

.adm-send__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-sm);
    margin-top: var(--gap-md);
}

.adm-send__reminders {
    padding-top: var(--gap-sm);
    border-top: 1px solid var(--line);
}

.adm-send__reminders[hidden],
.adm-send__reminder[hidden] { display: none; }

.adm-send__reminders h3 {
    margin: 0 0 var(--gap-sm);
    color: var(--navy);
    font-size: var(--text-base);
}

.adm-send__reminder {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-sm);
    padding: 0.65rem 0;
    border-bottom: 1px solid var(--line-soft);
}

@media (max-width: 600px) {
    .adm-send__search { grid-template-columns: minmax(0, 1fr); }
    .adm-send__delivery-options { grid-template-columns: minmax(0, 1fr); }
    .adm-send__form-row { grid-template-columns: 1.15rem minmax(0, 1fr); }
    .adm-send__form-row .adm-badge { grid-column: 2; justify-self: start; }
    .adm-send__footer .btn { width: 100%; }
}

/* ---------- Buttons ----------
   .btn / .btn--primary / .btn--ghost come straight from dermamedica.css, so an
   admin button is literally the same component as a public one. Only the
   compact variant used inside table rows is defined here. */

.adm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 2.25rem;
    padding: 0.45rem 0.9rem;
    border: 1px solid var(--navy);
    border-radius: var(--button-radius);
    background: var(--white);
    color: var(--navy);
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: 1.25;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease),
        color 0.25s var(--ease);
}

.adm-btn:not(.adm-btn--active):not(.adm-btn--danger):hover:not(:disabled):not([aria-disabled="true"]) {
    border-color: var(--navy);
    background: var(--sky-soft);
    color: var(--navy);
}

.adm-btn:disabled,
.adm-btn[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
}

.adm-btn--active,
.adm-btn--active:hover,
.adm-btn--active:focus-visible {
    border-color: var(--navy);
    background: var(--navy);
    color: var(--white);
    box-shadow: 0 8px 20px rgba(33, 56, 107, 0.18);
}

.adm-btn--danger:hover:not(:disabled) {
    border-color: #a3342b;
    background: #fff3f1;
    color: #a3342b;
}

.adm-btn--danger {
    border-color: #b85a52;
    color: #a3342b;
}

/* Clinic signing is the only way a consent form completes, so it reads as a panel
   rather than another button in the row. The paper and GP route below it is the
   exception, so it stays folded away behind a summary styled as a button. */
.adm-sign {
    margin: 0.75rem 0 0.5rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--navy);
    border-radius: var(--radius-sm, 8px);
    background: var(--sky-soft, #f3f6fc);
}

.adm-sign__title {
    margin: 0 0 0.5rem;
    font-size: var(--text-sm);
    font-weight: 700;
}

.adm-sign__form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
}

.adm-sign__form .input {
    margin-bottom: 0;
}

.adm-paper > summary {
    display: inline-flex;
    margin-bottom: 0.5rem;
    list-style: none;
}

.adm-paper > summary::-webkit-details-marker {
    display: none;
}

.adm-paper > summary::before {
    content: "+";
    font-weight: 700;
}

.adm-paper[open] > summary::before {
    content: "‘2";
}

.adm-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.adm-treatment-toolbar-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.adm-table td[data-label="Actions"] {
    width: 1%;
    min-width: 12rem;
    white-space: nowrap;
}

.adm-table td[data-label="Actions"] .adm-actions {
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
}

.adm-table td[data-label="Actions"] .adm-actions form {
    display: inline-flex;
    margin: 0;
}

.adm-table td[data-label="Actions"] .adm-btn {
    flex: 0 0 auto;
    white-space: nowrap;
}

.table-responsive th.actions,
.table-responsive td.actions {
    width: 1%;
    white-space: nowrap;
}

.table-responsive td.actions a,
.table-responsive td.actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.25rem;
    margin: 0 0.35rem 0 0;
    padding: 0.45rem 0.9rem;
    border: 1px solid var(--navy);
    border-radius: var(--button-radius);
    background: var(--white);
    color: var(--navy);
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: 1.25;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
}

.table-responsive td.actions form {
    display: inline-flex;
    margin: 0;
    vertical-align: middle;
}

.table-responsive td.actions a:not(.adm-btn--danger):not(.adm-btn--active):hover,
.table-responsive td.actions button:not(.adm-btn--danger):not(.adm-btn--active):hover {
    border-color: var(--navy);
    background: var(--sky-soft);
    color: var(--navy);
}

.table-responsive td.actions button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.table-responsive td.actions .adm-btn--danger {
    border-color: #b85a52;
    color: #a3342b;
}

.table-responsive td.actions .adm-btn--danger:hover {
    background: #fff3f1;
}

.table-responsive td.actions .adm-btn--active,
.table-responsive td.actions .adm-btn--active:hover {
    border-color: var(--navy);
    background: var(--navy);
    color: var(--white);
}

/* ---------- Cards ---------- */

.adm-card {
    padding: clamp(1.5rem, 2vw, 2rem);
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.adm-card + .adm-card {
    margin-top: var(--gap-md);
}

.adm-card + .adm-table {
    margin-top: var(--gap-md);
}

.adm-card__title {
    margin: 0 0 var(--gap-sm);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.adm-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-sm);
    margin-bottom: var(--gap-sm);
}

.adm-card__header .adm-card__title {
    margin-bottom: 0;
}

.adm-card__sub {
    margin: 0.35rem 0 0;
    color: var(--muted);
    font-size: var(--text-sm);
    line-height: 1.5;
}

.adm-empty {
    padding: var(--gap-lg) var(--gap-md);
    text-align: center;
    color: var(--muted);
    background: var(--white);
    border: 1px dashed var(--line);
    border-radius: var(--radius-md);
}

/* ---------- Dashboard stat cards (US 5.1) ---------- */

/* auto-fit keeps this readable at 320px, 768px and 1440px without a single
   media query. */
.adm-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: var(--gap-md);
    margin-bottom: var(--gap-md);
}

.adm-stat {
    display: block;
    min-height: 9rem;
    padding: clamp(1.5rem, 2vw, 2rem);
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    color: inherit;
    transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease),
                border-color 0.25s var(--ease), background-color 0.25s var(--ease);
}

.adm-stat:hover,
.adm-stat:focus-visible {
    transform: translateY(-2px);
    border-color: var(--navy-soft);
    box-shadow: var(--shadow-md);
}

.adm-stat__label {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 0.4rem;
}

/* Display serif for the figure itself - the one flourish, matching the public
   hero's treatment of large numbers and headings. */
.adm-stat__number {
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 300;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--navy);
}

.adm-stat__hint {
    margin-top: 0.35rem;
    font-size: var(--text-xs);
    color: var(--muted);
}

.adm-stat--alert .adm-stat__number { color: var(--sand-deep); }
.adm-stat--warn .adm-stat__number { color: var(--sand-deep); }

.adm-stat--low-stock-active {
    background: #fff7f6;
    border-color: #f0c9c6;
    animation: adm-low-stock-blink 5.5s ease-in-out infinite;
}

.adm-stat--low-stock-active .adm-stat__number,
.adm-stat--low-stock-active .adm-stat__hint {
    color: #a3342b;
}

@keyframes adm-low-stock-blink {
    0%,
    56%,
    100% {
        background: #fff7f6;
        border-color: #f0c9c6;
        box-shadow: var(--shadow-sm);
    }

    8%,
    20% {
        background: #fff1f0;
        border-color: #a3342b;
        box-shadow: 0 0 0 3px rgba(163, 52, 43, 0.12), var(--shadow-md);
    }

    14%,
    26% {
        background: #fff7f6;
        border-color: #f0c9c6;
        box-shadow: var(--shadow-sm);
    }
}

@media (prefers-reduced-motion: reduce) {
    .adm-stat--low-stock-active {
        animation: none;
        border-color: #a3342b;
    }
}

/* Iteration 2 placeholders - visibly inert, so nobody mistakes an empty card
   for a broken one. */
.adm-stat--pending {
    background: var(--cream);
    border-style: dashed;
    box-shadow: none;
}

.adm-stat--pending:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--line);
}

.adm-stat--pending .adm-stat__number {
    font-family: var(--font-ui);
    font-size: var(--text-base);
    font-weight: 500;
    color: var(--muted);
}

/* ---------- Dashboard help guide ---------- */

.adm-help {
    scroll-margin-top: 8rem;
}

.adm-help__heading {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.adm-help__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--mist);
}

.adm-help__icon img {
    width: 1.45rem;
    height: 1.45rem;
}

.adm-help__title {
    margin: 0;
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: var(--text-lg);
    font-weight: 700;
    letter-spacing: 0;
}

.adm-help__intro {
    max-width: 58rem;
    margin: 0 0 var(--gap-md);
    color: var(--body);
    font-size: var(--text-sm);
}

.adm-help__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--white);
}

.adm-help__item {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-height: 8rem;
    padding: 1rem;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    color: inherit;
    text-decoration: none;
    transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}

.adm-help__item:hover,
.adm-help__item:focus-visible {
    background: var(--line-soft);
    color: var(--navy);
}

.adm-help__item-title {
    color: var(--ink);
    font-size: var(--text-sm);
    font-weight: 700;
}

.adm-help__item-text {
    color: var(--muted);
    font-size: var(--text-xs);
    line-height: 1.5;
}

.adm-help__item-action {
    margin-top: auto;
    color: var(--navy);
    font-size: var(--text-xs);
    font-weight: 700;
}

/* ---------- Forms ---------- */

.adm-voucher-checkout {
    border: 0;
    margin: 0 0 1.5rem;
    padding: 0;
    min-width: 0;
}

.adm-voucher-checkout legend {
    margin-bottom: 0.75rem;
    font-size: 1rem;
    font-weight: 600;
}

.adm-form .input {
    margin-bottom: var(--gap-sm);
}

.adm-form label,
.adm-form .adm-label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--ink);
}

.adm-form [role="group"] label {
    display: inline-flex;
    gap: 0.4rem;
    align-items: center;
    margin-right: 1rem;
    font-weight: 400;
}

.adm-form input[type="text"],
.adm-form input[type="search"],
.adm-form input[type="email"],
.adm-form input[type="tel"],
.adm-form input[type="password"],
.adm-form input[type="number"],
.adm-form input[type="date"],
.adm-form input[type="datetime-local"],
.adm-form input[type="time"],
.adm-form textarea,
.adm-form select,
.adm-filter input,
.adm-filter select {
    width: 100%;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--white);
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.adm-form input[type="date"],
.adm-form input[type="time"],
.adm-form input[type="datetime-local"] {
    -webkit-appearance: auto;
    appearance: auto;
}

.adm-form .adm-picker-field {
    position: relative;
}

.adm-form .adm-picker-field > input {
    min-height: 3rem;
    padding-right: 3.4rem;
}

.adm-form .adm-picker-button {
    position: absolute;
    right: 0.55rem;
    bottom: 0.42rem;
    display: grid;
    place-items: center;
    width: 2.2rem;
    height: 2.2rem;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--white);
    cursor: pointer;
}

.adm-form .adm-picker-button img {
    width: 1.2rem;
    height: 1.2rem;
}

.adm-form .adm-picker-button:focus-visible {
    outline: 2px solid var(--navy-soft);
    outline-offset: 2px;
}

.adm-schedule-detail > .adm-card {
    min-width: 0;
    margin-top: 0;
}

.adm-schedule-detail .adm-form select,
.adm-schedule-detail .adm-form input[type="text"],
.adm-schedule-detail .adm-form input[type="date"],
.adm-schedule-detail .adm-form input[type="time"] {
    min-height: 3rem;
    height: 3rem;
}

.adm-form input:focus,
.adm-form textarea:focus,
.adm-form select:focus {
    outline: none;
    border-color: var(--navy-soft);
    box-shadow: 0 0 0 3px rgba(58, 84, 144, 0.14);
}

.adm-visit-booking .checkbox label {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.adm-visit-booking input[type="checkbox"] {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    padding: 0;
    margin: 0;
    accent-color: var(--navy);
}

.adm-form .error-message {
    display: block;
    margin-top: 0.3rem;
    color: #a3342b;
    font-size: var(--text-xs);
}

.adm-form input.form-error,
.adm-form select.form-error,
.adm-form textarea.form-error {
    border-color: #a3342b;
}

.adm-hint {
    margin: 0.4rem 0 0;
    font-size: var(--text-xs);
    color: var(--muted);
}

.adm-care-editor {
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 247, 0.9)),
        var(--white);
}

.adm-care-editor__header {
    align-items: flex-start;
}

.adm-care-editor__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gap-sm);
}

.adm-care-editor__panel {
    position: relative;
    min-width: 0;
    padding: 1rem;
    background: rgba(241, 244, 249, 0.7);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-sm);
}

.adm-care-editor__step {
    display: inline-grid;
    place-items: center;
    width: 2.25rem;
    aspect-ratio: 1;
    margin-bottom: 0.75rem;
    background: var(--navy);
    border-radius: var(--radius-sm);
    color: var(--white);
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1;
}

.adm-care-editor textarea {
    min-height: 11rem;
    resize: vertical;
}

/* ---------- Flash messages ---------- */

.adm-flash:not(:empty) {
    margin-bottom: var(--gap-md);
}

.adm-shell .adm-flash:not(:empty) {
    position: fixed;
    inset: 0;
    z-index: 500;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    padding: var(--gap-md);
    margin: 0;
    pointer-events: none;
}

.adm-flash .message {
    padding: 0.85rem 1.1rem;
    margin-bottom: 0.6rem;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
}

.adm-shell .adm-flash .message {
    width: min(92vw, 28rem);
    padding: 1rem 1.2rem;
    margin: 0;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    cursor: pointer;
    pointer-events: auto;
    text-align: center;
}

.adm-flash .message.hidden {
    opacity: 0;
    transform: translateY(-0.35rem) scale(0.98);
}

.adm-flash .message.success { background: #e7f2ec; border-color: #b9dcc8; color: #1f6b45; }
.adm-flash .message.error { background: #fbeceb; border-color: #f0c9c6; color: #a3342b; }
.adm-flash .message.warning { background: var(--sand-soft); border-color: #e3d0b6; color: var(--sand-deep); }
.adm-flash .message.info { background: var(--mist); border-color: var(--line); color: var(--navy); }

/* ---------- Sign-in page ----------
   Reuses the public hero's layered radial wash so the first admin screen is
   recognisably the same site. */

.adm-auth {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: var(--gap-lg) var(--gap-md);
    background: var(--cream);
}

.adm-auth::before,
.adm-auth::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.adm-auth::before {
    top: -22%;
    right: -12%;
    width: 58vw;
    height: 58vw;
    background: radial-gradient(circle at 35% 35%, rgba(58, 84, 144, 0.14), rgba(58, 84, 144, 0) 62%);
}

.adm-auth::after {
    bottom: -30%;
    left: -14%;
    width: 46vw;
    height: 46vw;
    background: radial-gradient(circle at 60% 40%, rgba(176, 141, 95, 0.16), rgba(176, 141, 95, 0) 65%);
}

.adm-auth__panel {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 26rem;
}

.adm-auth__logo {
    display: block;
    margin: 0 auto var(--gap-md);
}

.adm-auth__logo img {
    display: block;
    width: 100%;
    max-width: 15rem;
    height: auto;
    margin-inline: auto;
}

.adm-auth__title {
    margin: 0 0 0.4rem;
    font-family: var(--font-display);
    font-size: var(--text-h3);
    font-weight: 400;
    letter-spacing: -0.015em;
    color: var(--ink);
    text-align: center;
}

.adm-auth__subtitle {
    margin: 0 0 var(--gap-md);
    font-size: var(--text-sm);
    color: var(--muted);
    text-align: center;
}

.adm-auth__card {
    padding: var(--gap-md);
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.adm-auth__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-sm);
    flex-wrap: wrap;
    margin-top: var(--gap-sm);
}

.adm-auth__actions a {
    font-size: var(--text-sm);
    color: var(--navy);
}

/* Lockout countdown. Amber rather than red - this is a wait, not an error, and
   the person reading it may well be the legitimate owner of the account. */
.adm-lockout {
    margin: var(--gap-sm) 0 0;
    padding: 0.7rem 0.9rem;
    border: 1px solid #e3d0b6;
    border-radius: var(--radius-sm);
    background: var(--sand-soft);
    color: var(--sand-deep);
    font-size: var(--text-sm);
    text-align: center;
}

.adm-lockout__clock {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-variant-numeric: tabular-nums;
    /* Fixed-width digits stop the whole line jittering as the seconds tick. */
    letter-spacing: 0.02em;
}

.adm-auth__back {
    display: block;
    margin-top: var(--gap-md);
    font-size: var(--text-sm);
    color: var(--muted);
    text-align: center;
}

@media (max-width: 420px) {
    .adm-auth__actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .adm-auth__actions .btn {
        width: 100%;
    }
}

/* ---------- Responsive tables ---------- */

/* Below 760px the table stacks into cards. Each cell shows its column name from
   the data-label attribute, which is why every <td> in an admin table must
   carry one. */
@media (max-width: 760px) {
    .adm-help-popover {
        position: fixed;
        top: 5.25rem;
        right: 1rem;
        left: 1rem;
        width: auto;
    }

    .adm-help-popover::before {
        display: none;
    }

    .adm-table thead {
        display: none;
    }

    .adm-table,
    .adm-table tbody,
    .adm-table tr,
    .adm-table td {
        display: block;
        width: 100%;
    }

    .adm-table tr {
        padding: 0.5rem 0;
        border-bottom: 1px solid var(--line);
    }

    .adm-table td {
        display: block;
        padding: 0.45rem 1rem;
        border: none;
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .adm-table td > * {
        min-width: 0;
    }

    .adm-table td::before {
        display: block;
        margin-bottom: 0.25rem;
    }

    .adm-table td::before {
        content: attr(data-label);
        font-size: var(--text-xs);
        font-weight: 600;
        color: var(--muted);
    }

    .adm-table td[data-label="Actions"] {
        width: 100%;
        min-width: 0;
        white-space: normal;
    }

    .adm-table td[data-label="Actions"] .adm-actions {
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .adm-header__inner {
        justify-content: center;
        text-align: center;
    }

    .adm-session {
        justify-content: center;
        gap: 0.6rem;
        width: 100%;
    }

    .adm-session > span {
        flex-basis: 100%;
        overflow-wrap: anywhere;
    }
}

/* --- Secondary line inside a table cell -------------------------------- */

/* Used under a treatment's name to show its plain-language alternative
   without competing with the name itself. */
.adm-table__secondary {
    display: block;
    margin-top: 0.15rem;
    font-size: var(--text-xs);
    font-weight: 400;
}

/* --- Pagination --------------------------------------------------------- */

.adm-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-sm);
    margin-top: var(--gap-md);
}

.adm-pagination__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.adm-pagination__list li a {
    display: inline-flex;
    align-items: center;
    min-width: 2.25rem;
    justify-content: center;
    padding: 0.45rem 0.7rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--white);
    font-size: var(--text-sm);
    color: var(--ink);
    transition: border-color 0.2s ease, color 0.2s ease;
}

.adm-pagination__list li a:hover {
    border-color: var(--navy);
    color: var(--navy);
}

.adm-pagination__list li.active a {
    border-color: var(--navy);
    background: var(--navy);
    color: var(--white);
}

/* Paginator renders disabled controls as links with onclick="return false" -
   they must not read as clickable. */
.adm-pagination__list li.disabled a {
    opacity: 0.45;
    pointer-events: none;
}

.adm-pagination__counter {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--muted);
}

/* --- Practitioner management ------------------------------------------- */

.adm-form-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(18rem, 0.85fr);
    gap: var(--gap-md);
    align-items: start;
    margin-bottom: var(--gap-md);
}

.adm-form-grid + .adm-form-grid {
    margin-top: 0;
}

.adm-photo-panel {
    position: sticky;
    top: 7.5rem;
}

.adm-photo-preview {
    margin-bottom: var(--gap-sm);
}

.adm-media-preview {
    margin-bottom: var(--gap-sm);
}

.adm-media-preview__image {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: var(--radius-md);
    background: var(--line-soft);
}

.adm-media-thumb {
    display: block;
    width: 4.8rem;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: var(--radius-sm);
    background: var(--line-soft);
}

.adm-media-thumb--large {
    width: min(18rem, 100%);
}

.adm-practitioner-preview,
.adm-profile-portrait {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: var(--radius-md);
    background: var(--line-soft);
}

.adm-photo-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 14rem;
    padding: var(--gap-md);
    border: 1px dashed var(--line);
    border-radius: var(--radius-md);
    background: var(--cream);
    color: var(--muted);
    font-size: var(--text-sm);
    text-align: center;
}

.adm-practitioner-photo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.2rem;
    height: 3.2rem;
    object-fit: cover;
    border-radius: 50%;
    background: var(--mist);
    color: var(--navy);
    font-family: var(--font-display);
    font-size: var(--text-lg);
}

.adm-practitioner-photo--initial {
    border: 1px solid var(--line);
}

.adm-stats--compact {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.adm-stats--compact .adm-stat {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.35rem 1rem;
    align-items: center;
    min-height: 5.6rem;
    padding: 1rem 1.1rem;
}

.adm-stats--compact .adm-stat__label,
.adm-stats--compact .adm-stat__hint {
    grid-column: 1;
}

.adm-stats--compact .adm-stat__number {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    min-width: 2.4rem;
    text-align: right;
}

.adm-practitioner-panel {
    overflow: hidden;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}

.adm-practitioner-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-sm);
    padding: 1.15rem 1.25rem;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(180deg, var(--white), var(--cream));
}

.adm-section-kicker {
    margin: 0 0 0.2rem;
    color: var(--sand-deep);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.adm-panel-title {
    margin: 0;
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: var(--text-lg);
    font-weight: 700;
    letter-spacing: 0;
}

.adm-panel-sub {
    margin: 0.25rem 0 0;
    color: var(--muted);
    font-size: var(--text-sm);
}

.adm-table-wrap {
    max-height: min(68vh, 46rem);
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--white);
    box-shadow: var(--shadow-sm);
}

.adm-table-wrap .adm-table {
    min-width: 64rem;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.adm-table-wrap .adm-table th {
    position: sticky;
    top: 0;
    z-index: 1;
}

@media (max-width: 760px) {
    .adm-table-wrap {
        max-height: none;
        overflow: visible;
    }

    .adm-table-wrap .adm-table {
        min-width: 0;
    }
}

.adm-table-scroll {
    max-width: 100%;
    overflow-x: auto;
}

.adm-practitioner-panel .adm-table {
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.adm-practitioner-panel .adm-table-wrap {
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.adm-practitioner-table th {
    padding-block: 0.7rem;
    background: var(--white);
}

.adm-practitioner-table td {
    padding-block: 0.95rem;
    vertical-align: middle;
}

.adm-practitioner-table tbody tr {
    transition:
        background-color 0.18s var(--ease),
        box-shadow 0.18s var(--ease),
        transform 0.18s var(--ease);
}

.adm-practitioner-table tbody tr:hover {
    background: var(--cream);
}

.adm-reorder-form {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    max-width: 24rem;
    margin: 0;
}

.adm-treatment-display {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-sm);
    margin-bottom: var(--gap-md);
}

.adm-treatment-display .adm-hint {
    flex: 1 1 22rem;
    margin: 0;
}

.adm-treatment-view-switch {
    display: flex;
    gap: 0.35rem;
}

.adm-treatment-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
    gap: var(--gap-md);
}

.adm-treatment-card {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
    min-width: 0;
    padding: var(--gap-md);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--white);
    transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}

.adm-treatment-card:hover {
    border-color: var(--navy);
}

.adm-catalogue-card__media {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-sm);
    background: var(--mist);
}

.adm-catalogue-card__image {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.adm-catalogue-card__media--product {
    background: var(--white);
}

.adm-catalogue-card__media--product .adm-catalogue-card__image {
    padding: 1rem;
    object-fit: contain;
}

.adm-catalogue-card__placeholder {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 0.65rem;
    color: var(--muted);
    font-size: var(--text-sm);
}

.adm-catalogue-card__image-note {
    position: absolute;
    right: 0.5rem;
    bottom: 0.5rem;
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-pill);
    background: var(--white);
    color: var(--muted);
    font-size: var(--text-xs);
}

.adm-treatment-card__heading,
.adm-treatment-card__order {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--gap-sm);
}

.adm-treatment-card__heading h2 {
    margin: 0.4rem 0;
    font-size: var(--text-lg);
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.adm-treatment-card__heading h2 a {
    color: var(--navy);
    text-decoration: none;
}

.adm-treatment-card__heading h2 a:hover {
    text-decoration: underline;
}

.adm-treatment-card__heading p {
    margin: 0;
}

.adm-treatment-card .adm-drag-handle {
    border-color: var(--line);
}

.adm-treatment-card__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.adm-treatment-card__details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gap-md);
    margin: 0;
}

.adm-treatment-card__details dt {
    color: var(--muted);
    font-size: var(--text-xs);
}

.adm-treatment-card__details dd {
    margin: 0.3rem 0 0;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.adm-treatment-card__order {
    align-items: center;
    margin-top: auto;
}

.adm-treatment-card > .adm-actions {
    padding-top: var(--gap-sm);
    border-top: 1px solid var(--line);
}

.adm-treatment-cards[aria-busy="true"] {
    cursor: progress;
}

.adm-reorder-form--table {
    justify-content: flex-start;
    max-width: none;
    margin: 0 0 var(--gap-sm);
}

.adm-reorder-status {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 2.3rem;
    padding: 0.55rem 0.8rem;
    margin: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--white);
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 600;
}

.adm-reorder-status::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--muted);
}

.adm-reorder-status[data-state="saving"] {
    border-color: var(--navy-soft);
    background: var(--mist);
    color: var(--navy);
}

.adm-reorder-status[data-state="saving"]::before {
    background: var(--navy);
}

.adm-reorder-status[data-state="success"] {
    border-color: #b9dcc8;
    background: #e7f2ec;
    color: #1f6b45;
}

.adm-reorder-status[data-state="success"]::before {
    background: #1f6b45;
}

.adm-reorder-status[data-state="error"] {
    border-color: #f0c9c6;
    background: #fbeceb;
    color: #a3342b;
}

.adm-reorder-status[data-state="error"]::before {
    background: #a3342b;
}

.adm-practitioner-table tr[data-reorderable="1"],
.adm-treatment-table tr[data-reorderable="1"],
.adm-category-table tr[data-reorderable="1"] {
    transition: background-color 0.18s var(--ease), opacity 0.18s var(--ease);
}

.adm-table--dragging tr[data-reorderable="1"] {
    cursor: grabbing;
}

.adm-row--dragging {
    background: var(--mist) !important;
    box-shadow: inset 4px 0 0 var(--navy);
    opacity: 0.7;
}

.adm-practitioner-identity {
    display: grid;
    grid-template-columns: 2.15rem 3.2rem minmax(0, 1fr);
    align-items: center;
    gap: 0.75rem;
    min-width: 17rem;
}

.adm-practitioner-identity__text {
    display: block;
    min-width: 0;
}

.adm-practitioner-identity__name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
}

.adm-treatment-identity,
.adm-category-identity {
    display: grid;
    grid-template-columns: 2.15rem minmax(0, 1fr);
    align-items: center;
    gap: 0.75rem;
    min-width: 14rem;
}

.adm-drag-handle {
    position: relative;
    flex: 0 0 auto;
    width: 2.15rem;
    height: 2.15rem;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--muted);
    cursor: grab;
    transition:
        background-color 0.18s var(--ease),
        border-color 0.18s var(--ease),
        color 0.18s var(--ease),
        transform 0.18s var(--ease);
}

.adm-practitioner-table tbody tr:hover .adm-drag-handle,
.adm-treatment-table tbody tr:hover .adm-drag-handle,
.adm-category-table tbody tr:hover .adm-drag-handle {
    border-color: var(--line);
    background: var(--line-soft);
}

.adm-drag-handle:hover,
.adm-drag-handle:focus-visible {
    border-color: var(--navy);
    background: var(--white);
    color: var(--navy);
    outline: none;
    transform: translateY(-1px);
}

.adm-drag-handle:active {
    cursor: grabbing;
}

.adm-drag-handle::before {
    content: "";
    position: absolute;
    top: 0.42rem;
    left: 0.48rem;
    width: 0.25rem;
    height: 0.25rem;
    border-radius: 50%;
    background: currentColor;
    box-shadow:
        0 0.42rem 0 currentColor,
        0 0.84rem 0 currentColor,
        0.56rem 0 0 currentColor,
        0.56rem 0.42rem 0 currentColor,
        0.56rem 0.84rem 0 currentColor;
}

.adm-drag-handle-spacer {
    display: block;
    width: 2.15rem;
    height: 2.15rem;
}

.adm-order-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.65rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--white);
    color: var(--ink);
    font-size: var(--text-xs);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.adm-actions--row {
    flex-wrap: nowrap;
    justify-content: flex-start;
}

.adm-profile-summary {
    display: grid;
    grid-template-columns: minmax(14rem, 0.45fr) minmax(0, 1fr);
    gap: var(--gap-md);
    align-items: start;
    margin-bottom: var(--gap-md);
}

.adm-profile-summary__photo {
    padding: 0.7rem;
}

.adm-prose {
    max-width: 54rem;
}

.adm-prose p {
    margin: 0 0 1rem;
}

.adm-prose p:last-child {
    margin-bottom: 0;
}

.adm-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.adm-tag-list li {
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--line-soft);
    color: var(--ink);
    font-size: var(--text-xs);
    font-weight: 600;
}

@media (max-width: 860px) {
    .adm-alert {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .adm-alert__actions {
        grid-column: 1 / -1;
        width: 100%;
    }

    .adm-alert__button {
        flex: 1 1 auto;
        justify-content: center;
        width: auto;
    }

    .adm-form-grid,
    .adm-care-editor__grid,
    .adm-profile-summary {
        grid-template-columns: 1fr;
    }

    .adm-photo-panel {
        position: static;
    }

    .adm-stats--compact {
        grid-template-columns: 1fr;
    }

    .adm-practitioner-panel__header {
        align-items: flex-start;
        flex-direction: column;
    }

    .adm-reorder-form {
        justify-content: flex-start;
        max-width: none;
    }
}

/* --- Table thumbnail ---------------------------------------------------- */

.adm-thumb {
    width: 48px;
    height: 48px;
    object-fit: contain;
    background: var(--mist);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}

/* ---------- Password fields ---------- */

.adm-password {
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
}

.adm-password input {
    flex: 1 1 auto;
    min-width: 0;
}

.adm-password__toggle {
    flex: 0 0 auto;
    min-height: var(--button-height);
    padding: 0 0.9rem;
    border: 1px solid var(--navy);
    border-radius: var(--button-radius);
    background: var(--white);
    color: var(--navy);
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.adm-password__toggle:hover {
    border-color: var(--navy);
    background: var(--sky-soft);
    color: var(--navy);
}

/* Edge draws its own reveal icon on password fields; with a custom button
   present it renders two eyes side by side. */
.adm-password input::-ms-reveal,
.adm-password input::-ms-clear {
    display: none;
}

/* ---------- Slug suggestions ---------- */

.adm-slug-suggest {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    margin-top: -0.45rem;
    margin-bottom: var(--gap-sm);
    color: var(--muted);
    font-size: var(--text-xs);
}

.adm-slug-suggest__text {
    overflow-wrap: anywhere;
}

.adm-slug-suggest__button {
    padding: 0.2rem 0.5rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--white);
    color: var(--navy);
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    font-weight: 700;
    cursor: pointer;
}

.adm-slug-suggest__button:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

/* --- Required-field marking --------------------------------------------- */

.adm-form .required > label::after {
    content: " *";
    color: #a3342b;
    font-weight: 600;
}

.adm-form__legend {
    margin: 0 0 var(--gap-md);
    font-size: var(--text-sm);
    color: var(--muted);
}

.adm-form__legend b {
    color: #a3342b;
    font-weight: 600;
}

.adm-order-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.adm-order-dispatch {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
}

.adm-order-dispatch input[type="text"] {
    min-width: 15rem;
}

.adm-deposit-form {
    max-width: 22rem;
}

.adm-deposit-link {
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--line, #e3e7ee);
    border-radius: 6px;
    background: #f6f7fa;
    font-family: ui-monospace, Menlo, monospace;
    font-size: 0.82rem;
}

.adm-question-row {
    margin: 0 0 1.1rem;
    padding: 1rem 1.15rem;
    border: 1px solid var(--line, #e3e7ee);
    border-radius: 6px;
}

.adm-question-row legend {
    padding: 0 0.4rem;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6b7488;
}

/* --- Iteration 2: diary, client cards, notes, reports ------------------- */

.adm-diary-nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin: 0 0 1rem;
}

.adm-diary-nav__label {
    margin-left: 0.5rem;
}

.adm-diary-day {
    margin: 1.5rem 0 0.5rem;
    font-size: 1.05rem;
}

.adm-detail {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.adm-detail__card {
    background: var(--surface, #fff);
    border: 1px solid var(--line, #dfe4ee);
    border-radius: var(--radius-md, 10px);
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}

.adm-detail .adm-detail__card {
    margin-bottom: 0;
}

.adm-detail__card h2 {
    font-size: 1rem;
    margin: 0 0 0.75rem;
}

.adm-quote-history {
    margin-bottom: 1.25rem;
}

.adm-quote-history h2,
.adm-quote-editor h2 {
    margin: 0 0 0.35rem;
    font-size: 1.1rem;
}

.adm-quote-editor__head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin-bottom: 1.2rem;
}

.adm-quote-editor__head p {
    margin: 0;
    font-size: var(--text-sm);
}

.adm-quote-editor__add {
    display: flex;
    align-items: end;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.adm-quote-editor__add label {
    flex-basis: 100%;
    margin: 0;
}

.adm-quote-editor__add select {
    width: min(24rem, 100%);
}

.adm-quote-editor__add .adm-btn {
    min-height: 2.65rem;
}

.adm-quote-lines__heading,
.adm-quote-line {
    display: grid;
    grid-template-columns: minmax(14rem, 1fr) 5.2rem 8.5rem 7rem 2.25rem;
    gap: 0.75rem;
    align-items: center;
}

.adm-quote-lines__heading {
    padding: 0.65rem 0.75rem;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 700;
}

.adm-quote-line {
    padding: 0.8rem 0.75rem;
    border-bottom: 1px solid var(--line-soft);
}

.adm-quote-line__description {
    min-width: 0;
}

.adm-quote-line__kind {
    display: block;
    margin-bottom: 0.2rem;
    color: var(--muted);
    font-size: var(--text-xs);
}

.adm-quote-line input[type="text"],
.adm-quote-line input[type="number"] {
    width: 100%;
    min-width: 0;
    padding: 0.6rem;
}

.adm-quote-line__mobile-label {
    display: none !important;
}

.adm-quote-line__amount {
    text-align: right;
    font-weight: 600;
    white-space: nowrap;
}

.adm-quote-line__remove {
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--white);
    color: var(--muted);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
}

.adm-quote-line__remove:hover,
.adm-quote-line__remove:focus-visible {
    color: #a3342b;
    border-color: #a3342b;
}

.adm-quote-editor__footer {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.25rem;
}

.adm-quote-totals {
    display: grid;
    grid-template-columns: auto auto;
    gap: 0.35rem 1.75rem;
    margin: 0 0 0 auto;
    text-align: right;
}

.adm-quote-totals dt {
    color: var(--muted);
}

.adm-quote-totals dd {
    margin: 0;
}

.adm-quote-totals .adm-quote-totals__total {
    padding-top: 0.45rem;
    border-top: 1px solid var(--line);
    color: var(--ink);
    font-size: 1.05rem;
    font-weight: 700;
}

.adm-quote-editor__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-top: 1.5rem;
}

@media (max-width: 760px) {
    .adm-quote-editor__add {
        width: 100%;
    }

    .adm-quote-editor__add select {
        flex: 1 1 12rem;
    }

    .adm-quote-lines__heading {
        display: none;
    }

    .adm-quote-line {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
        gap: 0.75rem;
        border-top: 1px solid var(--line);
    }

    .adm-quote-line__description {
        grid-column: 1 / -1;
    }

    .adm-quote-line__mobile-label {
        display: block !important;
        margin-bottom: 0.2rem !important;
        color: var(--muted) !important;
        font-size: var(--text-xs) !important;
    }

    .adm-quote-line__amount {
        grid-column: 1 / 3;
        grid-row: 3;
        text-align: left;
    }

    .adm-quote-line__remove {
        grid-column: 3;
        grid-row: 3;
        align-self: end;
    }
}

.adm-consent-history {
    margin-bottom: 1.25rem;
}

.adm-consent-history > h2 {
    font-size: 1rem;
    margin: 0 0 0.75rem;
}

.adm-dl {
    display: grid;
    grid-template-columns: minmax(120px, auto) 1fr;
    gap: 0.35rem 1rem;
    margin: 0;
}

.adm-dl dt {
    color: var(--muted, #5a6579);
}

.adm-dl dd {
    margin: 0;
}

.adm-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.adm-list li {
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--line, #eef1f7);
}

.adm-list li:last-child {
    border-bottom: none;
}

.adm-inline-form {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.adm-note-photos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.75rem;
}

.adm-note-photo {
    margin: 0;
}

.adm-note-photo img {
    width: 100%;
    height: 140px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--line, #dfe4ee);
}

.adm-note-photo figcaption {
    font-size: 0.8rem;
    color: var(--muted, #5a6579);
    margin-top: 0.25rem;
    word-break: break-word;
}

a.adm-stat {
    text-decoration: none;
    color: inherit;
}

a.adm-stat:hover {
    border-color: var(--brand, #21386b);
}

.adm-hint--warn {
    color: #8a4b00;
    background: #fff4e5;
    border-left: 3px solid #e08a00;
    padding: 0.4rem 0.7rem;
    border-radius: 4px;
}

/* --- Calendar (week / day grid) ------------------------------------------ */

.adm-cal-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.5rem 0 1rem;
}

/* The meaning legend reuses the practitioner legend's pill shape but carries
   its own swatches, because the confirmation rules only fill calendar blocks. */
.adm-cal-legend--meaning .adm-cal-legend__item {
    border: 1px solid var(--line, #dfe4ee);
}

.adm-cal-legend--meaning .is-client-confirmed { background: #e3f6e8; border-color: #1f7a4d; }
.adm-cal-legend--meaning .is-staff-confirmed { background: #e4eeff; border-color: #21386b; }

.adm-cal-legend--meaning .is-cancelled-slot {
    background: repeating-linear-gradient(135deg, #fdeaec, #fdeaec 6px, #fbdfe2 6px, #fbdfe2 12px);
    border-color: #b3283f;
    color: #7c1c2c;
}

.adm-cal-legend__key {
    align-self: center;
    font-size: 0.8rem;
    color: var(--muted, #7c8496);
}

.adm-cal-legend__item {
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.8rem;
    border-left: 4px solid;
}

.adm-cal {
    display: grid;
    grid-template-columns: 4.5rem repeat(var(--adm-cal-cols, 7), minmax(0, 1fr));
    border: 1px solid rgba(33, 56, 107, 0.15);
    border-radius: var(--radius-sm, 8px);
    background: var(--white, #fff);
    overflow-x: auto;
}

.adm-cal--day {
    grid-template-columns: 4.5rem minmax(0, 1fr);
}

.adm-cal__head {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 0.5rem 0.4rem;
    border-bottom: 1px solid rgba(33, 56, 107, 0.15);
    border-left: 1px solid rgba(33, 56, 107, 0.08);
    background: var(--white, #fff);
    text-align: center;
    line-height: 1.2;
}

.adm-cal__head a {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: inherit;
}

.adm-cal__head a span {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted, #5a6579);
}

.adm-cal__head a strong {
    font-size: 1.3rem;
}

.adm-cal__head small {
    display: block;
    color: var(--muted, #5a6579);
    font-size: 0.7rem;
}

.adm-cal__head.is-today a strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--brand, #21386b);
    color: #fff;
}

.adm-cal__head--axis {
    border-left: 0;
}

.adm-cal__axis {
    position: relative;
    border-right: 1px solid rgba(33, 56, 107, 0.15);
}

.adm-cal__hour {
    position: absolute;
    right: 0.4rem;
    transform: translateY(-50%);
    font-size: 0.72rem;
    color: var(--muted, #5a6579);
}

.adm-cal__col {
    position: relative;
    border-left: 1px solid rgba(33, 56, 107, 0.08);
    background: var(--white, #fff);
}

.adm-cal__col.is-today {
    background: rgba(33, 56, 107, 0.03);
}

.adm-cal__line {
    position: absolute;
    left: 0;
    right: 0;
    border-top: 1px solid rgba(33, 56, 107, 0.12);
}

/* The half hour is what people actually book on, so it is drawn - but fainter
   than the hour, so the hour still structures the column. */
.adm-cal__line--half {
    border-top-style: dotted;
    border-top-color: rgba(33, 56, 107, 0.07);
}

/* Where we are right now. The single most useful mark on a working diary. */
.adm-cal__now {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 4;
    border-top: 2px solid #c2402f;
    pointer-events: none;
}

.adm-cal__now::before {
    content: "";
    position: absolute;
    top: -5px;
    left: -4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #c2402f;
}

.adm-cal__block {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    padding: 0.3rem 0.4rem;
    border-radius: 6px;
    border-left: 4px solid;
    font-size: 0.78rem;
    line-height: 1.25;
    color: var(--ink, #1c2540);
    text-decoration: none;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(21, 40, 72, 0.12);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.adm-cal__block:hover,
.adm-cal__block:focus-visible {
    z-index: 3;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(21, 40, 72, 0.18);
    outline: 0;
}

.adm-cal__block-time {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* What a block can say is a function of how tall it is:
     45 min - time, name, and the status if it has one
     30 min - time and name
     15 min - time and name sharing one line
   The treatment is the first thing to go because it is the least actionable;
   the status ("Awaiting card") is the last, because it is the most. Everything
   dropped here is still in the tooltip and on the appointment card. */
.adm-cal__block--md .adm-cal__block-what,
.adm-cal__block--sm .adm-cal__block-what,
.adm-cal__block--sm .adm-cal__block-status,
.adm-cal__block--xs .adm-cal__block-what,
.adm-cal__block--xs .adm-cal__block-status {
    display: none;
}

.adm-cal__block--xs {
    flex-direction: row;
    align-items: baseline;
    gap: 0.3rem;
    padding-block: 0.1rem;
    font-size: 0.72rem;
}

.adm-cal__block--xs .adm-cal__block-name {
    min-width: 0;
}

.adm-cal__block > span {
    flex-shrink: 0;
}

.adm-cal__block-name {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.adm-cal__block-what,
/* The second row of panel actions: the same buttons, set apart from the
   everyday ones above so the thing being done at the desk still leads. */
.adm-panel__actions--more {
    margin-top: 0.4rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--line, #dfe4ee);
}

/* The at-a-glance marks in a block's top-right corner. Each is a glyph in a
   pill rather than an icon font, so they survive with no network and stay
   legible against every practitioner colour. They are the last thing to be
   dropped as a block shrinks: on the smallest blocks there is no room. */
.adm-cal__marks {
    position: absolute;
    top: 2px;
    right: 3px;
    display: flex;
    gap: 2px;
    pointer-events: none;
}

.adm-cal__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 13px;
    height: 13px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.9);
    color: #21386b;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
}

.adm-cal__mark--n::before { content: "N"; }
.adm-cal__mark--note::before { content: "¸E"; }
.adm-cal__mark--sms::before { content: "¸9"; }
.adm-cal__mark--r::before { content: "R"; color: #b3283f; }

.adm-cal__block--xs .adm-cal__marks {
    display: none;
}

.adm-cal__block-status {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--muted, #5a6579);
}

.adm-cal__block.is-pending_deposit {
    border-style: dashed;
    opacity: 0.85;
}

.adm-cal__block.is-completed {
    opacity: 0.6;
}

.adm-cal__block.is-no_show {
    text-decoration: line-through;
    opacity: 0.6;
}

/* Six practitioner colours, applied to both legend chips and blocks. */
/* Confirmation fill. This is what the diary is read for first: has the client
   told us they are coming. Only the background is set, so the border stays the
   practitioner colour from .adm-cal-colour-N below and a block still says whose
   column it belongs to. Two classes beat one, so order here does not matter. */
.adm-cal__block.is-client-confirmed {
    background: #e3f6e8;
}

.adm-cal__block.is-staff-confirmed {
    background: #e4eeff;
}

/* A cancelled slot is free. It stays on the diary so Charlotte can see what
   happened, but it is hatched and faded so it never reads as work booked in. */
.adm-cal__block.is-cancelled-slot {
    background: repeating-linear-gradient(
        135deg,
        #fdeaec,
        #fdeaec 6px,
        #fbdfe2 6px,
        #fbdfe2 12px
    );
    color: #7c1c2c;
    opacity: 0.75;
}

.adm-cal-colour-0 { background: #e8f1ff; border-color: #21386b; }
.adm-cal-colour-1 { background: #e6f6ee; border-color: #1f7a4d; }
.adm-cal-colour-2 { background: #fff2e0; border-color: #c76a00; }
.adm-cal-colour-3 { background: #f3e8ff; border-color: #6b3fa0; }
.adm-cal-colour-4 { background: #ffe9ec; border-color: #b3283f; }
.adm-cal-colour-5 { background: #e6f7f9; border-color: #0f7c8a; }

/* --- Concessions --------------------------------------------------------- */

.adm-concession__current {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.5rem;
}

/* Where the discount on the checkout screen came from. It has to be read
   before the number below it, or the number looks like someone's mistake. */
.adm-concession__banner {
    margin: 0 0 0.75rem;
    padding: 0.55rem 0.8rem;
    border-left: 3px solid var(--brand, #21386b);
    border-radius: 6px;
    background: rgba(33, 56, 107, 0.06);
    font-size: 0.84rem;
}

.adm-concession__banner--warn {
    border-left-color: #c76a00;
    background: #fff2e0;
    color: #7a4100;
}

.adm-concession__past {
    margin-top: 0.75rem;
    font-size: 0.84rem;
}

.adm-concession__past summary {
    cursor: pointer;
    color: var(--muted, #5a6579);
}

.adm-concession__list {
    margin: 0.5rem 0 0;
    padding-left: 1.1rem;
}

.adm-concession__list li {
    margin-bottom: 0.3rem;
}

/* Two fields that belong together on one line - a rate and its unit. */
.adm-form__row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.adm-form__row > .input {
    flex: 1 1 12rem;
    min-width: 0;
}

.adm-fieldset {
    margin: 0 0 var(--gap-sm, 1rem);
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--line, #dfe4ee);
    border-radius: var(--radius-sm, 8px);
}

.adm-fieldset legend {
    padding: 0 0.35rem;
    font-size: var(--text-sm, 0.875rem);
    font-weight: 600;
}

/* --- Waitlist widget ------------------------------------------------------
   Under the date picker, because filling a cancellation is something you do
   while looking at the gap - not on a screen of its own. */

.adm-cal-side {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.adm-waitlist {
    padding: 0.75rem;
    border: 1px solid rgba(33, 56, 107, 0.15);
    border-radius: var(--radius-sm, 8px);
    background: var(--white, #fff);
}

.adm-waitlist__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}

.adm-waitlist__title {
    margin: 0;
    font-size: 0.9rem;
}

.adm-waitlist__count {
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    background: var(--brand, #21386b);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
}

.adm-waitlist__hint,
.adm-waitlist__empty {
    margin: 0 0 0.5rem;
    color: var(--muted, #5a6579);
    font-size: 0.74rem;
}

.adm-waitlist__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    /* Long lists scroll inside the widget rather than pushing the diary down. */
    max-height: 26rem;
    overflow-y: auto;
}

.adm-waitlist__item {
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--line, #dfe4ee);
    border-left: 3px solid var(--sand, #c9a227);
    border-radius: 6px;
    background: var(--mist, #f6f8fc);
    cursor: grab;

    /* The card owns the gesture, so dragging it is never read as a scroll. */
    touch-action: none;
    user-select: none;
}

.adm-waitlist__item:hover {
    border-left-color: var(--brand, #21386b);
}

/* Picked up, or picked out: both mean "this is the one going into the slot". */
.adm-waitlist__item.is-armed {
    border-left-color: var(--brand, #21386b);
    background: rgba(33, 56, 107, 0.08);
    box-shadow: inset 0 0 0 1px rgba(33, 56, 107, 0.3);
}

.adm-waitlist__item.is-dragging {
    opacity: 0.5;
    cursor: grabbing;
}

.adm-waitlist__who {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 600;
}

.adm-waitlist__what {
    margin: 0.1rem 0 0;
    font-size: 0.76rem;
}

.adm-waitlist__when,
.adm-waitlist__note {
    margin: 0.15rem 0 0;
    color: var(--muted, #5a6579);
    font-size: 0.72rem;
}

.adm-waitlist__note {
    font-style: italic;
}

.adm-waitlist__warn {
    margin: 0.2rem 0 0;
    color: #7a4100;
    font-size: 0.7rem;
}

.adm-waitlist__actions {
    margin: 0.4rem 0 0;
}

.adm-btn--small {
    padding: 0.15rem 0.5rem;
    font-size: 0.72rem;
}

.adm-waitlist__foot {
    margin: 0.6rem 0 0;
    font-size: 0.74rem;
}

/* While someone is being assigned, the grid says it will take a drop. */
.adm-cal.is-assigning .adm-cal__col[data-drop-date] {
    cursor: copy;
    background: rgba(33, 56, 107, 0.03);
}

/* --- The booking panel ---------------------------------------------------
   Beside the diary on a desktop, over it on a phone. The diary stays on
   screen either way: the point of the panel is that you never leave the day
   you are working. */

.adm-panel {
    position: relative;
    align-self: start;
    padding: 1rem 1.1rem 1.2rem;
    border: 1px solid rgba(33, 56, 107, 0.15);
    border-radius: var(--radius-sm, 8px);
    background: var(--white, #fff);
    box-shadow: 0 10px 30px rgba(17, 25, 48, 0.1);
}

.adm-panel[hidden] {
    display: none;
}

.adm-panel__close {
    position: absolute;
    top: 0.5rem;
    right: 0.6rem;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--muted, #5a6579);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
}

.adm-panel__close:hover {
    background: rgba(33, 56, 107, 0.08);
}

.adm-panel__head {
    padding-right: 2rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(33, 56, 107, 0.12);
}

/* The time leads. It is what a staff member is checking against the clock. */
.adm-panel__when {
    margin: 0;
    color: var(--brand, #21386b);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.adm-panel__who {
    margin: 0.15rem 0 0.1rem;
    font-size: 1.15rem;
    line-height: 1.25;
}

.adm-panel__what {
    margin: 0 0 0.5rem;
    color: var(--muted, #5a6579);
    font-size: 0.82rem;
}

/* One obvious action, then the rest. The old card gave fifty buttons equal
   weight, which is the same as giving none of them any. */
.adm-panel__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.85rem 0;
}

.adm-panel__primary {
    flex: 1 0 100%;
    text-align: center;
}

.adm-panel__blocked {
    flex: 1 0 100%;
    margin: 0;
    padding: 0.5rem 0.65rem;
    border-radius: 6px;
    background: #fff2e0;
    color: #7a4100;
    font-size: 0.78rem;
}

.adm-panel__block {
    padding: 0.7rem 0 0;
    border-top: 1px solid rgba(33, 56, 107, 0.12);
}

.adm-panel__subtitle {
    margin: 0 0 0.3rem;
    color: var(--muted, #5a6579);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.adm-panel__note {
    margin: 0;
    font-size: 0.84rem;
    line-height: 1.45;
}

.adm-panel__meta {
    margin: 0.2rem 0 0;
    color: var(--muted, #5a6579);
    font-size: 0.76rem;
}

.adm-panel__loading {
    margin: 0;
    padding: 1.5rem 0;
    color: var(--muted, #5a6579);
    font-size: 0.82rem;
    text-align: center;
}

.adm-panel__foot {
    display: grid;
    gap: 0.4rem;
    margin-top: 0.9rem;
    padding-top: 0.8rem;
    border-top: 1px solid rgba(33, 56, 107, 0.12);
}

.adm-panel__wide {
    text-align: center;
}

.adm-pill {
    display: inline-block;
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
    background: rgba(33, 56, 107, 0.08);
    font-size: 0.72rem;
    font-weight: 600;
}

.adm-pill--confirmed { background: #e6f6ee; color: #1f7a4d; }
.adm-pill--pending_deposit { background: #fff2e0; color: #7a4100; }
.adm-pill--completed { background: rgba(33, 56, 107, 0.1); color: #21386b; }
.adm-pill--cancelled,
.adm-pill--no_show { background: #ffe9ec; color: #b3283f; }
.adm-pill--paid { background: #e6f6ee; color: #1f7a4d; }

/* Which booking the panel is describing. */
.adm-cal__block.is-selected {
    outline: 2px solid var(--brand, #21386b);
    outline-offset: 1px;
    z-index: 5;
}

/* --- Quick book: double-click an empty slot ------------------------------
   A dialog rather than a page, because the whole point is to not lose your
   place in the day you are looking at. */

.adm-quickbook {
    width: min(30rem, calc(100vw - 2rem));
    max-height: calc(100vh - 4rem);
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm, 8px);
    box-shadow: 0 24px 60px rgba(17, 25, 48, 0.35);
    color: inherit;
    overflow: auto;
}

.adm-quickbook::backdrop {
    background: rgba(17, 25, 48, 0.45);
}

.adm-quickbook__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1.1rem 0.75rem;
    border-bottom: 1px solid rgba(33, 56, 107, 0.15);
}

.adm-quickbook__title {
    margin: 0;
    font-size: 1.05rem;
}

/* The slot being booked. It is the one fact the staff member did not type, so
   it has to be legible without hunting for it. */
.adm-quickbook__when {
    margin: 0.15rem 0 0;
    color: var(--brand, #21386b);
    font-size: 0.85rem;
    font-weight: 600;
}

.adm-quickbook__close {
    flex: none;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--muted, #5a6579);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
}

.adm-quickbook__close:hover {
    background: rgba(33, 56, 107, 0.08);
}

.adm-quickbook__tabs {
    display: flex;
    gap: 0.25rem;
    padding: 0.6rem 1.1rem 0;
}

.adm-quickbook__tab {
    padding: 0.4rem 0.8rem;
    border: 1px solid rgba(33, 56, 107, 0.2);
    border-radius: 999px;
    background: transparent;
    font-size: 0.8rem;
    cursor: pointer;
}

.adm-quickbook__tab.is-on {
    border-color: var(--brand, #21386b);
    background: var(--brand, #21386b);
    color: #fff;
}

.adm-quickbook__panel {
    padding: 0.9rem 1.1rem 1.1rem;
}

.adm-quickbook__form .adm-form__legend {
    display: none;
}

.adm-quickbook .adm-combo__select {
    inset: 0 auto auto 0;
    width: 1px;
    max-width: 1px;
    height: 1px;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    -webkit-appearance: none;
    appearance: none;
}

.adm-quickbook__actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.9rem;
}

/* Which room the booking will actually land in. Quiet when it agrees with the
   column that was clicked, loud when it does not - the treatment decides the
   room, and being moved to another one without being told is a surprise. */
.adm-quickbook__room {
    margin: 0.4rem 0 0;
    padding: 0.45rem 0.6rem;
    border-radius: 6px;
    background: rgba(33, 56, 107, 0.06);
    font-size: 0.78rem;
}

.adm-quickbook__room.is-elsewhere {
    background: #fff2e0;
    color: #7a4100;
    font-weight: 600;
}

/* A hint that the empty grid is clickable at all. */
.adm-cal__col[data-drop-date] {
    cursor: cell;
}

/* --- Calendar shell: the date picker sits beside the diary ---------------
   Side by side rather than above, because changing date is something you do
   constantly while reading the diary - and a picker you have to scroll back
   up to reach is a picker you stop using. */

.adm-cal-shell {
    display: grid;
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

/* Date picker, diary, booking panel. The panel is a grid column rather than an
   overlay so it never covers the day you are reading from. */
.adm-cal-shell:has(.adm-panel:not([hidden])) {
    grid-template-columns: 13rem minmax(0, 1fr) 19rem;
}

/* Month at a glance. It answers two questions - which day am I on, and which
   days have work on them - and nothing else, which is why the busy marker is
   a dot and not a number. */
.adm-minimap {
    position: sticky;

    /* Clear of the sticky admin header, which is the one thing on the page
       that would otherwise cover it. */
    top: 5rem;
    padding: 0.75rem;
    border: 1px solid rgba(33, 56, 107, 0.15);
    border-radius: var(--radius-sm, 8px);
    background: var(--white, #fff);
}

.adm-minimap__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
}

.adm-minimap__head strong {
    font-size: 0.9rem;
}

.adm-minimap__nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 4px;
    color: var(--brand, #21386b);
    font-size: 1.1rem;
    line-height: 1;
    text-decoration: none;
}

.adm-minimap__nav:hover,
.adm-minimap__nav:focus-visible {
    background: rgba(33, 56, 107, 0.08);
}

.adm-minimap__grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 2px;
}

.adm-minimap__dow {
    padding-bottom: 0.2rem;
    color: var(--muted, #5a6579);
    font-size: 0.65rem;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.adm-minimap__day {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 1.9rem;
    aspect-ratio: 1;
    border-radius: 4px;
    color: inherit;
    font-size: 0.78rem;
    text-decoration: none;
}

.adm-minimap__day:hover {
    background: rgba(33, 56, 107, 0.08);
}

.adm-minimap__day.is-today {
    box-shadow: inset 0 0 0 1px rgba(33, 56, 107, 0.45);
    color: var(--brand, #21386b);
    font-weight: 700;
}

.adm-minimap__day.is-selected {
    background: var(--brand, #21386b);
    color: #fff;
    font-weight: 700;
}

.adm-minimap__day.is-closed {
    color: var(--muted, #5a6579);
    text-decoration: line-through;
}

.adm-minimap__dot {
    position: absolute;
    bottom: 2px;
    left: 50%;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.55;
    transform: translateX(-50%);
}

.adm-minimap__foot {
    margin-top: 0.6rem;
}

.adm-minimap__today {
    display: block;
    text-align: center;
}

/* The ten-minute lattice. Not decoration: these are the positions a dragged
   appointment can actually land on, so seeing them is what makes a drop
   predictable. Faint enough to read as texture under the hour lines. */
.adm-cal__line--ten {
    border-top-color: rgba(33, 56, 107, 0.05);
}

/* Three rooms, side by side, because all three are in use at once and a
   clash is a room clash before it is anything else. */
.adm-cal__room-name {
    display: block;
    font-weight: 700;
    font-size: 0.9rem;
}

/* --- Dragging an appointment -------------------------------------------- */

.adm-cal__block.is-movable {
    cursor: grab;

    /* The block owns the gesture, so a drag is never mistaken for a scroll on
       a touchscreen. Scrolling still works from the column background. */
    touch-action: none;

    /* These two stop the browser competing for the same gesture. A link is
       natively draggable, and Safari needs the property as well as the
       attribute; without them the browser starts its own link drag and the
       reschedule never happens. Selecting the text is the other thing a
       press-and-move would otherwise do. */
    -webkit-user-drag: none;
    user-select: none;
    -webkit-user-select: none;
}

.adm-cal__block.is-dragging {
    z-index: 6;
    box-shadow: 0 8px 20px rgba(17, 25, 48, 0.3);
    cursor: grabbing;
    opacity: 0.95;

    /* So the column under the cursor can be found by hit testing. */
    pointer-events: none;
}

.adm-cal.is-dragging {
    cursor: grabbing;
    user-select: none;
}

.adm-cal__col.is-drop {
    background: rgba(33, 56, 107, 0.06);
    box-shadow: inset 0 0 0 2px rgba(33, 56, 107, 0.25);
}

.adm-cal__block.is-saving {
    cursor: progress;
    opacity: 0.55;
}

/* The answer to a drag, where the eye already is. */
.adm-cal-toast {
    position: fixed;
    left: 50%;
    bottom: 1.25rem;
    z-index: 60;
    max-width: min(32rem, calc(100vw - 2rem));
    padding: 0.6rem 1.1rem;
    border-radius: 999px;
    background: #11203f;
    box-shadow: 0 8px 24px rgba(17, 25, 48, 0.3);
    color: #fff;
    font-size: 0.85rem;
    transform: translateX(-50%);
}

.adm-cal-toast[hidden] {
    display: none;
}

.adm-cal-toast.is-error {
    border-radius: var(--radius-sm, 8px);
    background: #8f1f31;
}

@media (max-width: 1100px) {
    /* Not enough width for both. The picker goes above the diary rather than
       being dropped - navigating by month is the point of it. */
    .adm-cal-shell,
    .adm-cal-shell:has(.adm-panel:not([hidden])) {
        grid-template-columns: minmax(0, 1fr);
    }

    /* No room for a third column, so the panel becomes a sheet over the day.
       Still never a page load. */
    .adm-panel {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 120;
        max-height: 80vh;
        border-radius: var(--radius-sm, 8px) var(--radius-sm, 8px) 0 0;
        overflow-y: auto;
    }

    .adm-minimap {
        position: static;
        max-width: 24rem;
    }
}

@media (max-width: 900px) {
    .adm-cal {
        grid-template-columns: 3.5rem repeat(var(--adm-cal-cols, 7), minmax(7rem, 1fr));
    }

    .adm-cal--day,
    .adm-cal--rooms {
        grid-template-columns: 3.5rem minmax(0, 1fr);
    }

    .adm-cal__head a strong {
        font-size: 1.05rem;
    }
}

/* ---------- Text messages -----------------------------------------------
   The thread reads as a conversation, which is the one place in the admin
   area where a chat layout is the honest representation: staff are reading
   an exchange, not a table of records. Everything else here is ordinary
   admin furniture built from the existing tokens. */

.adm-sms-banner {
    display: block;
    margin-bottom: 1rem;
}

.adm-sms-preview {
    display: block;
    max-width: 42ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The arrow is the fastest way to tell "we said" from "she said" while
   scanning. Muted, because it is orientation rather than content. */
.adm-sms-preview__dir {
    color: var(--muted);
    font-weight: 600;
    margin-right: 0.35rem;
}

.adm-sms-thread {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    /* A conversation reads as a column. Left to stretch the full width of a
       desktop it becomes two lonely bubbles either side of a void. */
    max-width: 48rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.adm-sms-thread__item {
    display: flex;
    /* Outbound sits right, inbound left - the convention every phone uses, so
       it needs no explaining. */
    justify-content: flex-start;
}

.adm-sms-thread__item--out {
    justify-content: flex-end;
}

.adm-sms-bubble {
    max-width: min(34rem, 80%);
    padding: 0.65rem 0.9rem;
    border-radius: var(--radius-md, 10px);
    border: 1px solid var(--line, #dfe4ee);
    background: var(--mist);
}

.adm-sms-thread__item--out .adm-sms-bubble {
    background: var(--sand-soft);
    border-color: #e7d9c4;
}

.adm-sms-bubble__body {
    margin: 0;
    color: var(--ink);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.adm-sms-bubble__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin: 0.45rem 0 0;
    font-size: var(--text-xs);
    color: var(--muted);
}

/* Separators between the facts, so "12:43 pm Sent by Test Admin 1 credit"
   reads as four things and not one run-on sentence. */
.adm-sms-bubble__meta > * + *::before {
    content: "·";
    margin-right: 0.4rem;
    /* Visible enough to group the facts, quiet enough not to compete with
       them. The line colour was so faint it read as plain spacing. */
    color: var(--muted, #5a6579);
    opacity: 0.55;
}

.adm-sms-bubble__meta > .adm-badge + *::before {
    content: none;
}

.adm-sms-bubble__error {
    margin: 0.4rem 0 0;
    font-size: var(--text-xs);
    color: #a3342b;
}

.adm-sms-quote {
    margin: 0 0 1rem;
    padding: 0.75rem 1rem;
    border-left: 3px solid var(--sand);
    background: var(--mist);
    color: var(--ink);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* The template picker sits above the message as its own quiet row: it is a
   starting point, not a field of the message being sent. */
.adm-sms-composer__templates {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.9rem;
    padding-bottom: 0.9rem;
    border-bottom: 1px solid var(--line, #dfe4ee);
}

.adm-sms-composer__templates label {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--ink);
}

.adm-sms-composer__templates select {
    min-width: 16rem;
    max-width: 100%;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--line, #dfe4ee);
    border-radius: var(--radius-sm, 8px);
    background: var(--white, #fff);
    font: inherit;
    font-size: var(--text-sm);
    color: var(--ink);
}

/* The hint belongs under the row, not wedged between the label and the box. */
.adm-sms-composer__templates .adm-hint {
    flex: 1 0 100%;
    margin: 0;
}

.adm-sms-composer textarea {
    min-height: 7rem;
    line-height: 1.5;
    resize: vertical;
}

/* Counter and send button on one line: what it costs, right beside the thing
   that spends it. */
.adm-sms-composer__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.9rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--line, #dfe4ee);
}

/* The credit counter. Deliberately plain until the message is over the limit,
   at which point it has to be impossible to miss - it is the difference
   between one credit and four. */
.adm-sms-counter {
    display: inline-block;
    margin: 0.5rem 0 0;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    background: var(--mist);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
    color: var(--muted);
}

.adm-sms-counter--over {
    background: #fbe9e7;
    color: #a3342b;
    font-weight: 600;
}

.adm-sms-quick {
    margin-bottom: 0.5rem;
}

@media (max-width: 600px) {
    .adm-sms-bubble {
        max-width: 100%;
    }
}

/* Booking epic: closures, block-outs, add-ons, courses, waitlist offers */
.adm-cal__closed {
    display: block;
    margin-top: 0.2rem;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    background: #fde8e8;
    color: #8a1f1f;
    font-size: 0.68rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The same block-out drawn in all three room columns. Hatched harder and
   drained of fill so it reads as "this practitioner is unavailable" and not as
   a booking occupying the room. */
.adm-cal__blockout--person {
    border-left-style: dashed;
    background-color: transparent;
    background-image: repeating-linear-gradient(135deg, rgba(33, 56, 107, 0.14) 0 5px, transparent 5px 10px);
    opacity: 0.7;
}

.adm-cal__blockout--person span {
    background: var(--white, #fff);
    box-shadow: 0 0 0 2px var(--white, #fff);
    border-radius: 3px;
}

.adm-cal__blockout {
    position: absolute;
    left: 2px;
    right: 2px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.25rem;
    padding: 0.2rem 0.35rem;
    border-radius: 6px;
    border-left: 4px solid;
    background-image: repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.06) 0 6px, transparent 6px 12px);
    font-size: 0.7rem;
    color: #4a5268;
    overflow: hidden;
    z-index: 0;
    opacity: 0.85;
}

.adm-cal__blockout span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.adm-cal__unblock {
    flex: 0 0 auto;
    color: #8a1f1f;
    text-decoration: none;
    font-weight: 700;
}

.adm-cal__block {
    z-index: 1;
}

.adm-addons {
    margin: 0 0 1rem;
}

.adm-addons__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0;
    font-weight: 400;
}

.adm-addons__item[hidden] {
    display: none;
}

.adm-list--plain {
    list-style: none;
    margin: 0.35rem 0 0;
    padding: 0;
}

.adm-list--plain li {
    padding: 0.15rem 0;
}

.adm-text--danger {
    color: #8a1f1f;
    font-weight: 600;
}

.adm-text--warn {
    color: #8a5a00;
    font-weight: 600;
}

.adm-code {
    display: inline-block;
    max-width: 22rem;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    background: #f1f3f8;
    font-size: 0.75rem;
    word-break: break-all;
    user-select: all;
}

.adm-section-title {
    margin: 2rem 0 0.5rem;
}

.adm-form--inline .adm-filter {
    margin-bottom: 1rem;
}

/* Money on the day, refunds, imports */
.adm-stats--money .adm-stat__number {
    font-size: 1.4rem;
}

.adm-row--warn td {
    background: #fff7e6;
}

.adm-order-dispatch + .adm-form,
.adm-order-actions .adm-form {
    margin-top: 0.75rem;
}

/* ---------- End of day ---------------------------------------------------
   A reconciliation table is read down the number columns, not across the
   labels, so the figures are right-aligned and tabular-figure spaced to make
   a mismatched digit obvious at a glance. */

.adm-num {
    text-align: right;
    /* Tabular figures keep the decimal points in a straight line, which is what
       makes an odd number jump out when scanning a column. */
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.adm-takings__input {
    width: 8rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.adm-takings tfoot th {
    border-top: 2px solid var(--line, #dfe4ee);
    font-weight: 700;
    background: var(--mist);
}

/* Wide table on a narrow screen scrolls in its own box rather than pushing the
   page sideways. */
.adm-table-scroll {
    overflow-x: auto;
    margin-bottom: 1rem;
}

@media (max-width: 720px) {
    .adm-num {
        text-align: left;
    }

    .adm-takings__input {
        width: 100%;
    }
}

/* ---------- Nav counts ---------------------------------------------------
   A count sits on the section that owns the work, not in one bell. "Money 3"
   says where to go; a bell showing 3 does not. Numbers are tabular so the pill
   does not change width as the count changes. */

.adm-nav__count {
    display: inline-grid;
    place-items: center;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border-radius: var(--radius-pill);
    background: #c2402f;
    color: var(--white);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

/* On the active section the pill sits on navy, so it switches to a light fill
   to keep its contrast rather than going dark-on-dark. */
.adm-nav__link[aria-current="page"] .adm-nav__count,
.adm-nav__link[data-current="true"] .adm-nav__count {
    background: var(--white);
    color: var(--navy);
}



.adm-filter-sheet {
    margin-bottom: var(--gap-md);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--white);
}

.adm-filter-sheet__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    padding: 0 1rem;
    color: var(--navy);
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

.adm-filter-sheet__toggle::-webkit-details-marker {
    display: none;
}

.adm-filter-sheet__chevron {
    width: 8px;
    height: 8px;
    border-right: 2px solid currentcolor;
    border-bottom: 2px solid currentcolor;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform 0.2s var(--ease);
}

.adm-filter-sheet[open] .adm-filter-sheet__chevron {
    transform: rotate(-135deg);
}

.adm-filter-sheet .adm-filter {
    margin: 0;
    padding: 0 1rem 1rem;
    border: 0;
}

@media (max-width: 1024px) {
    /* An iPad is a touch device too, so the laptop-sized controls have to grow
       here, not only on the phone. */
    .adm-main .adm-btn,
    .adm-main .btn,
    .adm-main input,
    .adm-main select,
    .adm-main textarea {
        min-height: 44px;
    }

    /* Narrow day columns must not break "10:30 am" across two lines - the time
       is the first thing being scanned, and wrapping it pushes the name out. */
    .adm-cal__block-time {
        white-space: nowrap;
    }

    .adm-cal__block {
        font-size: 0.72rem;
    }

    /* iPad mini in portrait. The diary keeps its grid - there is room for it -
       but the time axis stays put while the days scroll, so you never lose
       track of which hour you are looking at. */
    .adm-cal {
        position: relative;
    }

    .adm-cal__head--axis,
    .adm-cal__axis {
        position: sticky;
        left: 0;
        z-index: 3;
        background: var(--white);
    }

    .adm-cal__head--axis {
        z-index: 4;
    }
}

@media (max-width: 760px) {
    /* One column of actions beats a ragged wrap of half-width buttons. */
    .adm-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .adm-toolbar__actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }

    .adm-toolbar__actions > .btn--primary {
        grid-column: 1 / -1;
    }

    .adm-toolbar__actions .adm-btn,
    .adm-toolbar__actions .btn {
        justify-content: center;
        width: 100%;
        min-height: 46px;
    }

    .adm-diary-nav {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
        align-items: center;
    }

    .adm-diary-nav .adm-btn {
        justify-content: center;
        min-height: 46px;
    }

    .adm-diary-nav__label {
        grid-column: 1 / -1;
        text-align: center;
    }

    .adm-filter__group,
    .adm-filter__actions {
        width: 100%;
    }

    /* 16px stops iOS zooming the page when a field takes focus, which on a
       diary means losing your place. 44px is the smallest comfortable target. */
    .adm-main input,
    .adm-main select,
    .adm-main textarea {
        min-height: 44px;
        font-size: 16px;
    }

    .adm-main .adm-btn,
    .adm-main .btn {
        min-height: 44px;
    }

    /* The week grid does not fit a phone. Columns get a workable width and the
       diary scrolls sideways, with the hours pinned. */
    .adm-cal {
        grid-template-columns: 3rem repeat(var(--adm-cal-cols, 7), minmax(8.5rem, 1fr));
        scroll-snap-type: x proximity;
    }

    .adm-cal--day {
        grid-template-columns: 3rem minmax(0, 1fr);
    }

    /* Three rooms on a phone: narrower than a day, wider than a week column,
       and the diary scrolls sideways. */
    .adm-cal--rooms {
        grid-template-columns: 3rem repeat(var(--adm-cal-cols, 3), minmax(7rem, 1fr));
    }

    .adm-cal__col {
        scroll-snap-align: start;
    }

    .adm-cal__hour {
        font-size: 0.66rem;
    }

    /* Money and counts should never wrap mid-figure on a narrow card. */
    .adm-table td {
        font-variant-numeric: tabular-nums;
    }
}

@media (max-width: 760px) {
    /* The admin header repeats on every page and pushes the work down the
       screen. On a phone the name is dropped - you know who you signed in as -
       and the controls tighten to one row. */
    .adm-header__inner {
        gap: 0.5rem;
    }

    .adm-session > span {
        display: none;
    }

    .adm-session {
        gap: 0.4rem;
    }

    .adm-header__logo img {
        max-width: 150px;
    }

    .adm-badge-staff {
        display: none;
    }
}

/* --------------------------------------------- appointment action bar --- */

/*
 * One row, not a grid. Taking the money is the only action that looks like a
 * button; everything else is a quiet chip, and anything rare or hard to undo
 * sits behind More so it cannot be hit on the way past.
 */
.adm-actionbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--line, #e3e7ee);
    border-radius: 12px;
    background: #fff;
}

.adm-actionbar__primary {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 0.55rem 1.4rem;
    border-radius: 999px;
    background: var(--navy, #21386b);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
}

.adm-actionbar__primary:hover,
.adm-actionbar__primary:focus-visible {
    background: #16233f;
    color: #fff;
}

.adm-actionbar__done {
    padding: 0.4rem 0.8rem;
    border-radius: 999px;
    background: #e8f1e9;
    color: #26543a;
    font-size: 0.875rem;
    font-weight: 600;
}

.adm-actionbar__done--pending {
    background: #fff1d6;
    color: #754a12;
}

.adm-actionbar__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-left: auto;
}

.adm-chip {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0.35rem 0.8rem;
    border: 1px solid var(--line, #e3e7ee);
    border-radius: 999px;
    background: #fff;
    color: var(--navy, #21386b);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

.adm-chip:hover,
.adm-chip:focus-visible {
    border-color: var(--navy, #21386b);
    background: var(--mist, #f1f4f9);
}

/* postLink renders a form; keep it from breaking the row. */
.adm-actionbar__row form {
    display: inline;
    margin: 0;
}

.adm-rebook-dialog {
    width: min(34rem, calc(100vw - 2rem));
    max-height: calc(100dvh - 2rem);
    overflow: auto;
    padding: 1.5rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--white);
    color: var(--ink);
    box-shadow: var(--shadow-md);
}

.adm-rebook-dialog::backdrop { background: rgba(15, 29, 54, 0.55); }
.adm-rebook-dialog__top,
.adm-rebook-dialog__actions { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.adm-rebook-dialog__top { margin-bottom: 0.8rem; }
.adm-rebook-dialog__close { border: 0; background: transparent; color: var(--ink); font-size: 1.7rem; line-height: 1; cursor: pointer; }
.adm-rebook-dialog h2 { margin: 0 0 0.45rem; font-size: 1.4rem; }
.adm-rebook-dialog p { margin: 0 0 1rem; line-height: 1.5; }
.adm-rebook-dialog__details { display: grid; grid-template-columns: minmax(6rem, 8rem) minmax(0, 1fr); gap: 0.45rem 0.75rem; margin: 0 0 1.2rem; }
.adm-rebook-dialog__details dt { color: var(--muted); }
.adm-rebook-dialog__details dd { min-width: 0; margin: 0; overflow-wrap: anywhere; font-weight: 600; }
.adm-rebook-dialog .adm-rebook-dialog__label { margin-bottom: 0.5rem; font-weight: 600; }
.adm-rebook-dialog__intervals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; margin-bottom: 1.25rem; }
.adm-rebook-dialog__intervals .adm-btn { justify-content: center; padding-inline: 0.3rem; text-align: center; }
.adm-rebook-dialog__actions { justify-content: flex-start; flex-wrap: wrap; }
.adm-rebook-dialog__next-title { margin: 1.25rem 0 0.75rem; font-size: 1.1rem; }
.adm-post-payment-upcoming { margin: 1.25rem 0; padding: 1.1rem 0; border-block: 1px solid var(--line); }
.adm-post-payment-upcoming__header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 0.75rem; }
.adm-post-payment-upcoming__header h2 { margin: 0; font-size: 1.1rem; }
.adm-upcoming-visits { padding: 0; margin: 0; list-style: none; }
.adm-upcoming-visits li { display: grid; grid-template-columns: 9rem minmax(0, 1fr) auto; align-items: start; gap: 0.5rem 0.9rem; padding: 0.85rem 0; border-bottom: 1px solid var(--line); }
.adm-upcoming-visits li:last-child { border-bottom: 0; }
.adm-upcoming-visits time,
.adm-upcoming-visits__visit { display: grid; gap: 0.25rem; min-width: 0; overflow-wrap: anywhere; }
.adm-upcoming-visits time { font-size: 0.9rem; }
.adm-upcoming-visits__visit a { font-weight: 600; }
.adm-upcoming-visits__visit span { color: var(--muted); font-size: 0.9rem; }
.adm-upcoming-visits .adm-badge { white-space: normal; text-align: center; }
.adm-upcoming-visits__empty { margin: 0; color: var(--muted); }
.adm-rebook-dialog .adm-upcoming-visits { margin-bottom: 1rem; }
.adm-rebook-dialog .adm-upcoming-visits li { grid-template-columns: 8.5rem minmax(0, 1fr); }
.adm-rebook-dialog .adm-upcoming-visits .adm-badge { grid-column: 2; justify-self: start; }
.adm-booking-copy { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 1rem; margin: 0 0 1rem; padding: 0.8rem 1rem; border-left: 3px solid var(--navy); background: var(--mist); }

@media (max-width: 440px) {
    .adm-rebook-dialog { padding: 1rem; }
    .adm-rebook-dialog__intervals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .adm-upcoming-visits li,
    .adm-rebook-dialog .adm-upcoming-visits li { grid-template-columns: minmax(0, 1fr); }
    .adm-upcoming-visits .adm-badge,
    .adm-rebook-dialog .adm-upcoming-visits .adm-badge { grid-column: 1; justify-self: start; }
}

.adm-more {
    position: relative;
}

.adm-more > summary {
    list-style: none;
}

.adm-more > summary::-webkit-details-marker {
    display: none;
}

.adm-chip--more::after {
    content: '▾';
    margin-left: 0.35rem;
    font-size: 0.75em;
}

.adm-more__menu {
    position: absolute;
    top: calc(100% + 0.4rem);
    right: 0;
    z-index: 30;
    display: grid;
    min-width: 14rem;
    padding: 0.3rem;
    border: 1px solid var(--line, #e3e7ee);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(22, 35, 63, 0.14);
}

.adm-more__item {
    padding: 0.55rem 0.7rem;
    border: 0;
    border-radius: 7px;
    background: none;
    color: var(--navy, #21386b);
    font: inherit;
    font-size: 0.9rem;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.adm-more__item:hover,
.adm-more__item:focus-visible {
    background: var(--mist, #f1f4f9);
}

.adm-more__item--danger {
    color: #a3342b;
}

.adm-more__menu form {
    display: block;
    margin: 0;
}

/* ------------------------------------------------- folding sections --- */

/*
 * Consent forms, the message thread and treatment notes are long and usually
 * not what someone opened the page for. They fold, and open themselves when
 * there is something outstanding.
 */
.adm-fold {
    margin-bottom: 1rem;
    border: 1px solid var(--line, #e3e7ee);
    border-radius: 12px;
    background: #fff;
}

.adm-fold__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1.1rem;
    color: var(--navy, #21386b);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

.adm-fold__summary::-webkit-details-marker {
    display: none;
}

.adm-fold__summary::after {
    content: '▾';
    margin-left: 0.4rem;
    color: var(--muted, #7c8496);
    transition: transform 0.15s ease;
}

.adm-fold[open] > .adm-fold__summary::after {
    transform: rotate(180deg);
}

.adm-fold__count {
    margin-left: auto;
    color: var(--muted, #7c8496);
    font-size: 0.8125rem;
    font-weight: 500;
}

.adm-fold > *:not(.adm-fold__summary) {
    padding-inline: 1.1rem;
}

.adm-fold > *:last-child {
    padding-bottom: 1.1rem;
}

@media (max-width: 720px) {
    .adm-actionbar__row {
        margin-left: 0;
    }

    .adm-actionbar__primary {
        width: 100%;
        justify-content: center;
    }

    .adm-more__menu {
        right: auto;
        left: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .adm-fold__summary::after {
        transition: none;
    }
}
.adm-combo {
    display: block;
}

.adm-combo__search {
    margin-bottom: 0.45rem;
}

.adm-form .adm-combo__search {
    width: 100%;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--white);
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

/* The real select still submits the value and still carries the FormProtection
   signature, so it stays in the DOM and is only taken off screen. Scripts off,
   or this file not loaded, and it is an ordinary select again. */
.adm-combo__select {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    border: 0;
    clip-path: inset(50%);
}

/* The extras list is now every treatment the practitioner performs rather than
   a handful of same-room add-ons, so it needs a search box and a scroll. */
.adm-addons__search {
    margin: 0.35rem 0 0.5rem;
}

.adm-addons__list {
    display: grid;
    gap: 0.15rem;
    max-height: 14rem;
    overflow-y: auto;
    padding-right: 0.25rem;
}

.adm-combo {
    position: relative;
}

.adm-combo__list {
    position: absolute;
    z-index: 30;
    top: 100%;
    right: 0;
    left: 0;
    max-height: 16rem;
    margin: 0.15rem 0 0;
    padding: 0.25rem;
    overflow-y: auto;
    list-style: none;
    border: 1px solid var(--navy);
    border-radius: var(--radius-sm, 8px);
    background: var(--white);
    box-shadow: 0 12px 28px rgba(33, 56, 107, 0.16);
}

.adm-combo__option {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.45rem 0.6rem;
    border-radius: var(--radius-sm, 6px);
    font-size: var(--text-sm);
    cursor: pointer;
}

.adm-combo__option:hover,
.adm-combo__option.is-active {
    background: var(--sky-soft, #eef3fc);
}

.adm-combo__group {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--muted, #7c8496);
}

.adm-combo__empty {
    padding: 0.5rem 0.6rem;
    font-size: var(--text-sm);
    color: var(--muted, #7c8496);
}


.adm-presets-field {
    margin-bottom: 1rem;
}

.adm-presets__legend {
    display: block;
    margin-bottom: 0.4rem;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--ink);
}

.adm-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.adm-presets__btn {
    padding: 0.45rem 0.8rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--white);
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    line-height: 1.2;
    cursor: pointer;
    transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}

.adm-presets__btn:hover {
    border-color: var(--ink);
}

.adm-presets__btn.is-chosen {
    border-color: var(--ink);
    background: var(--ink);
    color: var(--white);
}

.adm-presets__btn--pick {
    font-style: italic;
}

.adm-link-send {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.5rem 0 0.4rem;
}

.adm-link-send form {
    margin: 0;
}

/* Sessions left on a client's package, read at a glance during checkout. */
.adm-sessions-left {
    display: inline-block;
    min-width: 2rem;
    padding: 0.15rem 0.45rem;
    margin-right: 0.4rem;
    border-radius: var(--radius-sm);
    background: var(--ink);
    color: var(--white);
    font-size: var(--text-sm);
    font-weight: 700;
    text-align: center;
}

/* Concessions offered at the counter: bundle on the left, rate on the right. */
.adm-concession-offer {
    margin: 0 0 1rem;
    padding: 0.9rem 1rem 0.5rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}

.adm-concession-offer legend {
    padding: 0 0.4rem;
    font-size: var(--text-sm);
    font-weight: 600;
}

.adm-concession-offer__row {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    padding: 0.6rem 0.2rem;
    border-bottom: 1px solid var(--line);
    cursor: pointer;
}

.adm-concession-offer__row:last-of-type {
    border-bottom: 0;
}

.adm-concession-offer__label {
    flex: 1;
    font-size: var(--text-sm);
    font-weight: 600;
}

.adm-concession-offer__each {
    color: var(--muted);
    font-size: var(--text-sm);
}