/* ========================================================================== 
   admin-portal.css
   Long-term visual foundation for the rewritten PawsApp AdminPortal.

   The existing Paw.Component styles remain loaded because the rest of Paw.Web
   still uses them. AdminPortal is intentionally isolated by the .paw-admin
   boundary. New admin components should consume these semantic tokens and
   primitives instead of recreating brand colours, buttons, fields or cards in
   their isolated .razor.css files.
   ========================================================================== */

.paw-admin {
    /* Admin opens in the PawsApp reference palette. Clinic colours are an
       explicit, non-persisted preview applied to this shell by the header
       theme action; do not inherit a host/public clinic stylesheet implicitly. */
    --primary-color: #11BCC3;
    --primary-color-text: #ffffff;
    --primary-color-label: #00627D;
    --alternate-color: #BBF5F8;
    --alternate-color-text: #585858;
    --additional-alternate-color: #BBF5F8;
    --additional-alternate-color-text: #585858;
    --continue-btn-color: #11BCC3;
    --continue-btn-color-text: #ffffff;
    --cancel-btn-color: #00627D;
    --cancel-btn-color-text: #ffffff;
    --navbar-btn-color: #00627D;
    --navbar-btn-color-text: #ffffff;
    --dashboard-edit-btn-color: #11BCC3;

    /* Active PawsApp/clinic theme input -> Admin semantic palette. */
    --admin-primary: var(--primary-color, #11BCC3);
    --admin-primary-text: var(--primary-color-text, #ffffff);
    /* Theme-derived label/action ink. This follows the active clinic palette,
       matching Prototype 103's --primary-color-label contract. */
    --admin-label: var(--primary-color-label, #00627D);
    /* Neutral structural/chrome label. Prototype 103 deliberately keeps card
       section headers and table chrome on this neutral ramp while field labels
       may use the theme-derived label ink above. */
    --admin-chrome-label: #6b767c;
    /* Form labels are theme-aware; do not freeze them to the default teal. */
    --admin-form-label-ink: var(--admin-label);
    --admin-alternate: var(--alternate-color, #BBF5F8);
    --admin-alternate-text: var(--alternate-color-text, #585858);
    --admin-action-primary: var(--continue-btn-color, var(--admin-primary));
    --admin-action-primary-text: var(--continue-btn-color-text, var(--admin-primary-text));
    --admin-action-secondary: var(--cancel-btn-color, var(--admin-label));
    --admin-action-secondary-text: var(--cancel-btn-color-text, #ffffff);

    --admin-text: #3f4a4f;
    --admin-heading: #1f2b30;
    --admin-muted: #9aa4a9;
    --admin-muted-soft: #c6d2d5;
    --admin-border: #e4eaec;
    --admin-border-soft: #eef2f2;
    --admin-border-strong: #c9d7da;
    --admin-border-control: #dde6e7;
    --admin-row-stripe: #f7fafb;
    --admin-page-bg: #f1f4f5;
    --admin-surface: #ffffff;
    --admin-danger: #f14b56;
    --admin-danger-bg: #fff5f5;
    --admin-success: #12855c;
    --admin-success-bg: #d9f7ea;
    --admin-warning: #b7791f;
    --admin-warning-bg: #fff6e0;
    --admin-success-border: #bfe9d3;
    --admin-icon-btn-neutral: #5f7d88;

    --admin-tint: color-mix(in srgb, var(--admin-primary) 11%, #fff);
    --admin-tint-strong: color-mix(in srgb, var(--admin-primary) 22%, #fff);
    --admin-tint-soft: color-mix(in srgb, var(--admin-primary) 6%, #fff);

    /* Skeleton palette follows the active admin/clinic hue. These percentages
       intentionally match the Clinic Overview loader instead of introducing
       fixed grey placeholders that drift when the configured primary changes. */
    --admin-skeleton-base: color-mix(in srgb, var(--admin-primary) 22%, var(--admin-surface));
    --admin-skeleton-highlight: color-mix(in srgb, var(--admin-primary) 11%, var(--admin-surface));
    --admin-skeleton-surface: color-mix(in srgb, var(--admin-primary) 6%, var(--admin-surface));
    --admin-skeleton-surface-strong: color-mix(in srgb, var(--admin-primary) 14%, var(--admin-surface));
    --admin-shadow-ink: var(--admin-label);

    --admin-font-heading: 'Jost', 'Segoe UI', system-ui, sans-serif;
    --admin-font-family: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
    --admin-font-xs: 11px;
    --admin-font-sm: 13px;
    --admin-font-md: 14px;
    --admin-font-base: 15px;
    --admin-font-lg: 18px;
    --admin-font-xl: 25px;
    --admin-font-light: 300;
    --admin-font-regular: 400;
    --admin-font-medium: 500;
    --admin-font-semibold: 600;
    --admin-font-bold: 700;

    --admin-card-pad: 28px 32px;
    --admin-header-height: 62px;
    --admin-footer-height: 65px;
    --admin-section-header-height: 48px;
    --admin-mobile-actions-inset: 96px;
    --admin-mobile-detail-actions-reserve: 62px;
    --admin-sidebar-width: 248px;
    --admin-sidebar-collapsed-width: 64px;
    --admin-sidebar-current-width: var(--admin-sidebar-width);
    --admin-tabs-height: 0px;
    --admin-radius: 12px;
    --admin-radius-sm: 8px;
    --admin-radius-input: 10px;
    --admin-radius-card: 16px;
    --admin-radius-pill: 999px;
    --admin-shadow-card: 0 1px 2px rgba(16,42,50,.04), 0 4px 16px rgba(16,42,50,.06);
    --admin-container-max: 1230px;

    /* Shared layer contract. Fixed page actions are persistent chrome; any
       transient mobile UI opened above the page must sit over that chrome. */
    --admin-layer-footer: 70;
    --admin-layer-mobile-backdrop: 90;
    --admin-layer-mobile-sheet: 91;
    --admin-layer-result: 200;

    /* Compatibility aliases for existing AdminPortal isolated CSS. These are
       transitional: migrated components should use --admin-* directly. */
    --teal: var(--admin-primary);
    --teal-dark: color-mix(in srgb, var(--admin-primary) 71%, var(--admin-text));
    --teal-light: var(--admin-tint);
    --teal-mid: var(--admin-tint-strong);
    --hover: var(--admin-row-stripe);
    --white-color: var(--admin-surface);
    --text: var(--admin-text);
    --text-color: var(--admin-text);
    --heading-color: var(--admin-heading);
    --label-color: var(--admin-chrome-label);
    --muted: var(--admin-muted);
    --muted-soft: var(--admin-muted-soft);
    --border: var(--admin-border);
    --border-soft: var(--admin-border-soft);
    --border-control: var(--admin-border-control);
    --row-stripe: var(--admin-row-stripe);
    --page-bg: var(--admin-page-bg);
    --tint: var(--admin-tint);
    --tint-strong: var(--admin-tint-strong);
    --tint-soft: var(--admin-tint-soft);
    --danger-color: var(--admin-danger);
    --success-bg: var(--admin-success-bg);
    --success-text: var(--admin-success);
    --success-border: var(--admin-success-border);
    --warning-bg: var(--admin-warning-bg);
    --warning-text: var(--admin-warning);
    --icon-btn-neutral: var(--admin-icon-btn-neutral);
    --font-heading: var(--admin-font-heading);
    --font-family: var(--admin-font-family);
    --font-light: var(--admin-font-light);
    --font-regular: var(--admin-font-regular);
    --font-medium: var(--admin-font-medium);
    --font-semibold: var(--admin-font-semibold);
    --font-bold: var(--admin-font-bold);
    --fs-xs: var(--admin-font-xs);
    --fs-sm: var(--admin-font-sm);
    --fs-base: var(--admin-font-base);
    --fs-md: var(--admin-font-md);
    --fs-lg: var(--admin-font-lg);
    --fs-xl: var(--admin-font-xl);
    --radius: var(--admin-radius);
    --radius-sm: var(--admin-radius-sm);
    --radius-input: var(--admin-radius-input);
    --radius-card: var(--admin-radius-card);
    --radius-pill: var(--admin-radius-pill);
    --shadow-card: var(--admin-shadow-card);
    --container-max: var(--admin-container-max);
    --navbar-h: var(--admin-header-height);
    --primary-tabs-h: 0px;
    --secondary-tabs-h: var(--admin-tabs-height);
    --nav-bottom: calc(var(--admin-header-height) + var(--admin-tabs-height));

    min-width: 0;
    width: 100%;
    height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
    background: var(--admin-page-bg);
    color: var(--admin-text);
    font-family: var(--admin-font-family);
    font-size: var(--admin-font-base);
    line-height: 1.45;
}

.paw-admin.admin-has-tabs {
    --admin-tabs-height: 68px;
}

/* Prototype 103 remembers a deliberately collapsed desktop rail across
   navigation/reloads. The html class is applied by adminSidebarState.js before
   the shell paints; the component class catches up once Blazor hydrates. */
html.admin-sidebar-collapsed .paw-admin,
.paw-admin.admin-sidebar-collapsed {
    --admin-sidebar-current-width: var(--admin-sidebar-collapsed-width);
}

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

.paw-admin a {
    color: inherit;
}

.paw-admin button,
.paw-admin input,
.paw-admin select,
.paw-admin textarea {
    font-family: inherit;
}

.paw-admin h1,
.paw-admin h2,
.paw-admin h3,
.paw-admin h4,
.paw-admin h5,
.paw-admin h6,
.paw-admin .form-section-title,
.paw-admin .card-title {
    font-family: var(--admin-font-heading);
}

.paw-admin h1,
.paw-admin h2,
.paw-admin h3,
.paw-admin h4,
.paw-admin h5,
.paw-admin h6 {
    color: var(--admin-heading);
}

.paw-admin .admin-page-host > * {
    min-width: 0;
    width: 100%;
}

/* ---------- shared page surfaces ---------- */
.paw-admin .settings-page {
    width: min(100%, var(--admin-container-max));
    margin: 0 auto;
    padding: 26px;
}

.paw-admin .card,
.paw-admin .s-box {
    width: 100%;
    margin: 0 0 22px;
    padding: var(--admin-card-pad);
    border: 0;
    border-radius: var(--admin-radius-card);
    background: var(--admin-surface);
    box-shadow: 0 6px 24px rgba(20, 60, 70, .06);
}

.paw-admin .card:last-child,
.paw-admin .s-box:last-child {
    margin-bottom: 0;
}

.paw-admin .card h2,
.paw-admin .s-box h2,
.paw-admin .card h4,
.paw-admin .s-box h4 {
    margin: 0 0 4px;
    color: var(--admin-heading);
    font-family: var(--admin-font-heading);
    font-size: 17px;
    font-weight: var(--admin-font-semibold);
    line-height: 1.3;
}

.paw-admin .card .card-desc,
.paw-admin .s-box .card-desc {
    margin: 0 0 22px;
    color: var(--admin-muted);
    font-size: var(--admin-font-sm);
}

.paw-admin .card-title {
    margin: 0 0 20px;
    color: var(--admin-heading);
    font-size: var(--admin-font-xs);
    font-weight: var(--admin-font-semibold);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.paw-admin .section-card {
    padding: 0;
    overflow: hidden;
    border-radius: var(--admin-radius-card);
}

.paw-admin .section-card .section-card-body,
.paw-admin .section-card .hero-body,
.paw-admin .section-card .hours-body,
.paw-admin .section-card .int-body {
    padding: 16px 25px 25px;
}

/* Shared read-only detail grid from Prototype 17. Clinic Overview is the first
   Blazor consumer, but the contract is intentionally generic for other compact
   read-only summary cards. */
.paw-admin .section-card-body.detail-readout-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 32px;
}

.paw-admin .detail-readout-grid .detail-readout-full {
    grid-column: 1 / -1;
}

.paw-admin .section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    row-gap: 8px;
    min-height: var(--admin-section-header-height);
    padding: 7px 18px;
    border-bottom: 1px solid var(--admin-border);
    background: var(--admin-row-stripe);
}

.paw-admin .card:not(.section-card) > .section-header:first-child,
.paw-admin .card:not(.section-card) > .grid-head-bar:first-child,
.paw-admin .s-box:not(.section-card) > .section-header:first-child {
    margin: -28px -32px 22px;
    border-radius: var(--admin-radius-card) var(--admin-radius-card) 0 0;
}

.paw-admin .section-card > .section-header:first-child {
    margin: 0;
}

.paw-admin .section-header-icon {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: var(--admin-tint);
    color: var(--admin-primary);
}

.paw-admin .section-header-icon .svg-icon,
.paw-admin .section-header-icon svg {
    width: 14px;
    height: 14px;
}

.paw-admin .section-header-icon svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.paw-admin .section-header h2,
.paw-admin .section-header-title {
    min-width: 0;
    flex: 1 1 auto;
    margin: 0;
    color: var(--admin-chrome-label);
    font-family: var(--admin-font-heading);
    font-size: var(--admin-font-xs);
    font-weight: var(--admin-font-semibold);
    line-height: 1.3;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.paw-admin .section-header-actions {
    margin-left: auto;
    min-width: 0;
    max-width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 1 auto;
}

/* Shared Customise workspace geometry. Text, Options, Questions, Question
   editor and Answer editor are peer panes. The host owns the remaining height,
   only the active section participates in layout, every pane fills that section,
   and scrolling belongs to the pane body. Keep this hierarchy intact instead of
   adding section-specific height/footer compensation in feature components. */
.paw-admin .customise-workspace-host {
    position: relative;
    flex: 1 1 0;
    width: 100%;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--admin-surface);
}

.paw-admin .customise-workspace-section {
    display: none;
    flex: 1 1 0;
    width: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.paw-admin .customise-workspace-section.is-active {
    display: flex;
    flex-direction: column;
}

.paw-admin .customise-workspace-section.is-active > .customise-workspace-card {
    flex: 1 1 0;
    min-height: 0;
    margin: 0;
    align-self: stretch;
}

/* Reusable retained-section fill modifier. Use this when a Customise section is
   kept mounted for background hydration but its active pane must consume the
   host's exact remaining rectangle. This is the generalized form of the
   Text/Options footer-contact correction; section names are intentionally not
   part of the contract. */
@media (min-width: 701px) {
    .paw-admin .customise-workspace-section--fill-host.is-active {
        position: absolute;
        inset: 0;
        width: 100%;
        height: auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .paw-admin .customise-workspace-section--fill-host.is-active > .customise-workspace-card {
        flex: 1 1 0;
        width: 100%;
        height: auto;
        min-height: 0;
        margin: 0;
        align-self: stretch;
    }
}

.paw-admin .customise-workspace-card {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: var(--admin-surface);
    box-shadow: none;
}

.paw-admin .card > .section-header.customise-workspace-header:first-child {
    position: sticky;
    top: 0;
    z-index: 2;
    flex: 0 0 var(--admin-section-header-height);
    width: 100%;
    height: var(--admin-section-header-height);
    min-height: var(--admin-section-header-height);
    margin: 0;
    flex-wrap: nowrap;
    border-radius: 0;
}

.paw-admin .customise-workspace-body {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    padding: 18px;
}

.paw-admin .form-section-title {
    margin: 26px 0 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--admin-border);
    color: var(--admin-label);
    font-size: var(--admin-font-xs);
    font-weight: var(--admin-font-semibold);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.paw-admin .form-section-title:first-child {
    margin-top: 0;
}

/* Shared prototype clickable-link chips used by Clinic Emergency, Booking Customise
   and Booking Pet Symptoms. */
.paw-admin .ctf-link-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.paw-admin .ctf-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    padding: 5px 12px;
    border: 1px solid var(--tint-strong);
    border-radius: var(--radius-pill);
    background: var(--tint);
    color: var(--primary-color-label);
    font-family: inherit;
    font-size: var(--fs-sm);
    font-weight: var(--font-medium);
    line-height: 1.4;
    cursor: pointer;
    transition: background .13s, border-color .13s, color .13s;
    -webkit-tap-highlight-color: transparent;
}

.paw-admin .ctf-chip:hover,
.paw-admin .ctf-chip:focus-visible {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--primary-color-text);
}

/* ---------- buttons ---------- */
.paw-admin .btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 26px;
    border: 1px solid transparent;
    border-radius: 12px;
    font-family: inherit;
    font-size: var(--admin-font-md);
    font-weight: var(--admin-font-semibold);
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: filter .15s ease, box-shadow .15s ease, background .15s ease, transform .1s ease, opacity .15s ease;
}

.paw-admin .btn:hover {
    text-decoration: none;
    filter: brightness(1.04);
}

.paw-admin .btn:active:not(:disabled) {
    transform: scale(.97);
}

.paw-admin .btn:disabled,
.paw-admin .btn.disabled {
    opacity: .45;
    cursor: not-allowed;
    filter: none;
    box-shadow: none;
}

.paw-admin .btn-primary,
.paw-admin .btn-teal {
    background: var(--admin-action-primary);
    border-color: var(--admin-action-primary);
    color: var(--admin-action-primary-text);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--admin-primary) 35%, transparent);
}

.paw-admin .btn-dark,
.paw-admin .btn-neutral,
.paw-admin .btn-gray {
    background: var(--admin-action-secondary);
    border-color: var(--admin-action-secondary);
    color: var(--admin-action-secondary-text);
}

.paw-admin .btn-danger,
.paw-admin .btn-danger-sm,
.paw-admin .btn-red {
    background: var(--admin-danger);
    border-color: var(--admin-danger);
    color: #fff;
}

.paw-admin .btn-soft,
.paw-admin .btn-secondary,
.paw-admin .btn-light {
    border: 1px solid var(--admin-tint-strong);
    background: var(--admin-tint);
    color: var(--admin-label);
}

.paw-admin .btn-soft:hover,
.paw-admin .btn-secondary:hover,
.paw-admin .btn-light:hover {
    background: var(--admin-tint-strong);
    filter: none;
}

.paw-admin .btn-sm,
.paw-admin .btn-danger-sm {
    min-height: 34px;
    padding: 8px 16px;
    border-radius: 10px;
    font-size: var(--admin-font-sm);
}

.paw-admin .icon-btn {
    width: 34px;
    height: 34px;
    display: inline-grid;
    place-items: center;
    margin: 0 2px;
    padding: 0;
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius-sm);
    background: var(--admin-tint);
    color: var(--admin-label);
    font-size: var(--admin-font-md);
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.paw-admin .icon-btn:hover {
    background: var(--admin-tint-strong);
}

/* ---------- fields ---------- */
.paw-admin .field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.paw-admin .field.full,
.paw-admin .toggle-row.full {
    grid-column: 1 / -1;
}

.paw-admin .field.narrow {
    max-width: 320px;
}

/* Shared compact helper/caption used below pill-picker fields. Keep this
   global so callers outside PillPicker itself can reuse the same treatment. */
.paw-admin .pill-picker-hint {
    margin-top: 10px;
    color: var(--muted);
    font-size: var(--fs-sm);
    line-height: 1.45;
}

.paw-admin .pill-picker-hint strong {
    color: var(--primary-color-label);
}

/* Shared form-field label contract. Match the typography used by the shared
   toggle-row label (.lbl), e.g. Clinic > Details > Hide Header: Bricolage,
   13px medium, natural casing and normal tracking. Colour follows the normal
   text colour by default and the existing .ink-teal page treatment below. */
.paw-admin .field label:not(.switch),
.paw-admin .form-label,
.paw-admin .card label:not(.switch):not(.onoffswitch-label):not(.form-check-label),
.paw-admin .s-box label:not(.switch):not(.onoffswitch-label):not(.form-check-label) {
    display: block;
    margin: 0;
    color: var(--admin-text);
    font-family: var(--admin-font-family);
    font-size: var(--admin-font-sm);
    font-weight: var(--admin-font-medium);
    line-height: 1.45;
    letter-spacing: normal;
    text-transform: none;
}

.paw-admin input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
.paw-admin select,
.paw-admin textarea,
.paw-admin .form-control,
.paw-admin .form-select {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    padding: 12px 14px;
    border: 1px solid var(--admin-border-control);
    border-radius: var(--admin-radius-input);
    outline: none;
    background-color: var(--admin-surface);
    color: var(--admin-text);
    font-family: inherit;
    font-size: var(--admin-font-base);
    line-height: 1.35;
    box-shadow: none;
    transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
}

.paw-admin .form-control.form-control-solid {
    background-color: var(--admin-surface);
}

.paw-admin select,
.paw-admin .form-select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 40px !important;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b767c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
}

.paw-admin textarea,
.paw-admin textarea.form-control {
    min-height: 86px;
    resize: vertical;
}

.paw-admin input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus,
.paw-admin select:focus,
.paw-admin textarea:focus,
.paw-admin .form-control:focus,
.paw-admin .form-select:focus {
    border-color: var(--admin-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--admin-primary) 15%, transparent);
}

.paw-admin input.modified,
.paw-admin select.modified,
.paw-admin textarea.modified,
.paw-admin .form-control.modified,
.paw-admin .form-select.modified {
    border-color: var(--admin-success);
    box-shadow: 0 0 0 3px rgba(18, 133, 92, .10);
}

.paw-admin input.invalid,
.paw-admin select.invalid,
.paw-admin textarea.invalid,
.paw-admin .form-control.invalid,
.paw-admin .form-select.invalid {
    border-color: var(--admin-danger);
    box-shadow: 0 0 0 3px rgba(240, 85, 106, .14);
}

.paw-admin input:disabled,
.paw-admin select:disabled,
.paw-admin textarea:disabled,
.paw-admin .form-control:disabled,
.paw-admin .form-select:disabled {
    opacity: 1;
    background: var(--admin-page-bg);
    color: var(--admin-muted);
    cursor: not-allowed;
}

.paw-admin .form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 28px;
}

.paw-admin .form-grid > * {
    min-width: 0;
}

/* Shared compact form density. This is the same field/toggle vocabulary used by
   Clinic Details, with only spacing/control height tightened for editor panes
   such as Customise Question/Answer. Consumers should keep using .form-grid,
   .field, .toggle-grid, .toggle-row, .lbl and .lbl-sub rather than creating a
   parallel editor-form visual system. */
.paw-admin .compact-form-stack {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.paw-admin .compact-form-stack .compact-form-grid {
    gap: 12px 18px;
}

.paw-admin .compact-form-stack .compact-toggle-grid {
    gap: 0;
}

.paw-admin .compact-form-stack .form-grid + .toggle-grid,
.paw-admin .compact-form-stack .toggle-grid + .form-grid,
.paw-admin .compact-form-stack .toggle-grid + .toggle-grid {
    margin-top: 0;
}

.paw-admin .compact-form-stack > .form-section-title {
    margin: 8px 0 0;
}

.paw-admin .compact-form-stack input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
.paw-admin .compact-form-stack select,
.paw-admin .compact-form-stack textarea {
    min-height: 40px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.paw-admin [data-rows="flat"] .compact-form-stack .compact-form-grid > .field,
.paw-admin [data-rows="flat"] .compact-form-stack .compact-toggle-grid > .toggle-row {
    padding-top: 12px;
    padding-bottom: 12px;
}

.paw-admin .form-grid + .toggle-grid,
.paw-admin .toggle-grid + .form-grid,
.paw-admin .toggle-grid + .toggle-grid {
    margin-top: 18px;
}

.paw-admin .toggle-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 16px;
}

.paw-admin .toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    border-radius: var(--admin-radius-sm);
    background: transparent;
    transition: background .12s ease;
}

/* Switch settings do not introduce a filled field/panel of their own. Keep the
   row transparent in every value state so only the switch track communicates
   off/on; this also prevents disabled/off rows from picking up row-stripe fill. */
.paw-admin .toggle-row:hover,
.paw-admin .toggle-row.disabled:hover {
    background: transparent;
}

.paw-admin .toggle-row .lbl {
    color: var(--admin-text);
    font-size: var(--admin-font-sm);
    font-weight: var(--admin-font-medium);
}

.paw-admin .toggle-row .lbl-sub {
    display: block;
    margin-top: 2px;
    color: var(--admin-muted);
    font-size: var(--admin-font-xs);
    font-weight: var(--admin-font-regular);
}

.paw-admin .toggle-row .lbl.show-sub .lbl-sub {
    max-width: 52ch;
}

/* ---------- production switch primitive ---------- */
/* Visual contract copied directly from the prototype .switch primitive.
   Off = neutral grey track with no outline; checked = primary teal. The
   surrounding setting row stays transparent; only the track communicates state. */
.paw-admin .switch {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}

.paw-admin .switch input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.paw-admin .switch .track {
    position: relative;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
    box-sizing: border-box;
    border: 0;
    border-radius: 999px;
    background: #ccd6da;
    cursor: pointer;
    transition: background .18s;
}

.paw-admin .switch .track::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    box-sizing: border-box;
    border: 0;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
    transition: left .18s;
}

.paw-admin .switch input:checked + .track {
    background: var(--admin-primary);
}

.paw-admin .switch input:checked + .track::after {
    left: 23px;
}

.paw-admin .switch input:focus-visible + .track {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--admin-primary) 18%, transparent);
}

.paw-admin .switch input:disabled + .track {
    cursor: not-allowed;
}

/* Transitional adapter for legacy Blazor onoffswitch markup. It deliberately
   wears the exact same prototype switch visual contract as AdminSwitch. */
.paw-admin .onoffswitch {
    position: relative !important;
    width: 44px !important;
    height: 24px !important;
    display: inline-block !important;
    margin: 0 !important;
    user-select: none !important;
}

.paw-admin .onoffswitch .onoffswitch-checkbox {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.paw-admin .onoffswitch .onoffswitch-label {
    position: relative !important;
    display: block !important;
    width: 44px !important;
    height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #ccd6da !important;
    cursor: pointer !important;
    font-size: 0 !important;
    line-height: 0 !important;
    transition: background .18s !important;
}

.paw-admin .onoffswitch .onoffswitch-inner,
.paw-admin .onoffswitch .onoffswitch-inner::before,
.paw-admin .onoffswitch .onoffswitch-inner::after {
    display: none !important;
    content: none !important;
}

.paw-admin .onoffswitch .onoffswitch-switch {
    position: absolute !important;
    top: 3px !important;
    left: 3px !important;
    right: auto !important;
    bottom: auto !important;
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: #fff !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .2) !important;
    transition: left .18s !important;
}

.paw-admin .onoffswitch .onoffswitch-checkbox:checked + .onoffswitch-label {
    background: var(--admin-primary) !important;
}

.paw-admin .onoffswitch .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
    left: 23px !important;
    right: auto !important;
}

.paw-admin .onoffswitch .onoffswitch-checkbox:focus-visible + .onoffswitch-label {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--admin-primary) 18%, transparent) !important;
}

.paw-admin .onoffswitch .onoffswitch-checkbox:disabled + .onoffswitch-label {
    cursor: not-allowed !important;
}

/* ---------- shared tables / badges ---------- */
.paw-admin .grid-table-wrap {
    overflow-x: auto;
}

.paw-admin .grid-table {
    width: 100%;
    border-collapse: collapse;
}

.paw-admin .grid-table th {
    padding: 12px 14px;
    border-bottom: 1px solid var(--admin-border);
    background: var(--admin-row-stripe);
    color: var(--admin-label);
    font-size: var(--admin-font-xs);
    font-weight: var(--admin-font-semibold);
    letter-spacing: .06em;
    text-align: left;
    text-transform: uppercase;
}

.paw-admin .grid-table th:first-child {
    border-top-left-radius: var(--admin-radius-sm);
}

.paw-admin .grid-table th:last-child {
    border-top-right-radius: var(--admin-radius-sm);
}

.paw-admin .grid-table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--admin-border);
    vertical-align: middle;
}

.paw-admin .grid-table tr:last-child td {
    border-bottom: 0;
}

.paw-admin .grid-table .grid-name {
    color: var(--admin-label);
    font-size: var(--admin-font-sm);
    font-weight: var(--admin-font-semibold);
}

.paw-admin .grid-table .grid-muted {
    color: var(--admin-muted);
    font-size: var(--admin-font-sm);
}

.paw-admin .grid-table .grid-col-primary { width: var(--grid-col-primary-width, auto); }
.paw-admin .grid-table .grid-col-secondary { width: var(--grid-col-secondary-width, auto); }
.paw-admin .grid-table .grid-col-toggle { width: var(--grid-col-toggle-width, auto); }

/* Bookings > Team Consulting — exact Prototype 13 grid contract. The variant
   belongs on the table itself: fixed layout makes the 34/40/26 proportions
   authoritative instead of allowing select/header content to rebalance them. */
.paw-admin .team-consulting-grid {
    table-layout: fixed;
    --grid-col-primary-width: 34%;
    --grid-col-secondary-width: 40%;
    --grid-col-toggle-width: 26%;
}

/* Group Configuration > Clinics In Group. Keep the prototype's compact drag
   and action columns on the real table so the flexible clinic-name column owns
   all remaining width. The generic mobile modifier below is reusable by other
   three-slot reorder grids. */
.paw-admin .cg-member-grid {
    table-layout: fixed;
}

.paw-admin .cg-member-grid .cg-drag-head,
.paw-admin .cg-member-grid .detail-grid__drag-cell {
    width: 42px;
}

.paw-admin .cg-member-grid .cg-action-head,
.paw-admin .cg-member-grid .cg-action-cell {
    width: 64px;
    text-align: right;
}

.paw-admin .cg-member-grid .cg-action-cell .slot-actions {
    justify-content: flex-end;
}

.paw-admin .cg-member-grid .grid-name {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.paw-admin .cg-member-grid tr[draggable="true"] {
    cursor: grab;
}


.paw-admin .grid-table .grid-col-duration { width: var(--grid-col-duration-width, auto); }
.paw-admin .grid-table .grid-col-override { width: var(--grid-col-override-width, auto); }
.paw-admin .grid-table .grid-col-weight { width: var(--grid-col-weight-width, auto); }
.paw-admin .grid-table .grid-col-number { width: var(--grid-col-number-width, auto); }
.paw-admin .grid-table .grid-col-actions { width: var(--grid-col-actions-width, 54px); text-align: right; }
.paw-admin .grid-table .grid-col-nowrap { white-space: nowrap; }

.paw-admin .grid-table .status-cell {
    display: flex;
    align-items: center;
}

/* Prototype 41: Booking Types > Booking Count Restrictions. Calendar is the
   broad identity column; the two numeric override columns share the middle,
   while the trailing action slot reserves its geometry for hover actions. */
.paw-admin .booking-count-grid {
    table-layout: fixed;
    --grid-col-primary-width: 35%;
    --grid-col-number-width: 25%;
    --grid-col-actions-width: 15%;
}


/* Booking Types > Species Categories. Categories are not inherently weight based,
   so this shared grid exposes only the four supported configuration columns. */
.paw-admin .species-category-grid {
    min-width: 620px;
    table-layout: fixed;
    --grid-col-primary-width: 25%;
    --grid-col-toggle-width: 14%;
    --grid-col-duration-width: 20%;
    --grid-col-override-width: 41%;
}

/* Shared named-section pattern used by schedule/day grids and by the bounded
   species groups in Species Categories. */
.paw-admin .slot-day-section {
    padding-top: 22px;
    margin-top: 22px;
    border-top: 1px solid var(--admin-border-soft);
}

.paw-admin .slot-day-section:first-child {
    padding-top: 0;
    margin-top: 0;
    border-top: 0;
}

.paw-admin .slot-day-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.paw-admin .slot-day-head h3 {
    margin: 0;
    color: var(--admin-heading);
    font-family: var(--admin-font-heading);
    font-size: 16px;
    font-weight: var(--admin-font-semibold);
}

/* Prototype 41 hoisted grid header: several tables sharing one geometry use a
   single sticky visual header while every table keeps a collapsed semantic
   thead for column sizing/accessibility. */
.paw-admin .grid-head-bar {
    position: sticky;
    top: 0;
    z-index: 7;
    padding: 0 32px;
    background: var(--admin-row-stripe);
    border-bottom: 1px solid var(--admin-border);
    box-shadow: 0 8px 10px -10px rgba(20, 60, 70, .3);
}

.paw-admin .grid-head-bar .grid-table { margin: 0; }
.paw-admin .grid-head-bar .grid-table th {
    background: none;
    border-bottom: 0;
    border-radius: 0;
}

.paw-admin .grid-head-scope .slot-day-head {
    padding: 10px 14px;
    margin-bottom: 0;
    background: var(--admin-row-stripe);
    border: 1px solid var(--admin-border);
    border-bottom: 0;
    border-radius: var(--admin-radius-sm) var(--admin-radius-sm) 0 0;
}

.paw-admin .grid-head-scope .grid-table-wrap {
    border: 1px solid var(--admin-border);
    border-top: 0;
    border-radius: 0 0 var(--admin-radius-sm) var(--admin-radius-sm);
    overflow: hidden;
}

.paw-admin .grid-head-scope .slot-day-section {
    padding-top: 0;
    margin-top: 18px;
    border-top: 0;
}

.paw-admin .grid-head-scope .slot-day-section:first-child { margin-top: 0; }

.paw-admin .grid-head-scope .grid-table tr.dirty td {
    background: color-mix(in srgb, var(--admin-primary) 10%, transparent);
}
.paw-admin .grid-head-scope .grid-table tr.dirty td:first-child { box-shadow: none; }
.paw-admin .grid-head-scope .grid-table tr.dirty input,
.paw-admin .grid-head-scope .grid-table tr.dirty select { background-color: transparent; }

.paw-admin .grid-head-scope .slot-day-head h3 {
    font-family: var(--admin-font-family);
    font-size: var(--admin-font-xs);
    font-weight: var(--admin-font-semibold);
    letter-spacing: .07em;
    text-transform: uppercase;
}

.paw-admin .grid-table .grid-sr-head th {
    height: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    background: none;
    color: transparent;
    font-size: 0;
    line-height: 0;
    letter-spacing: 0;
    white-space: nowrap;
}

.paw-admin .grid-head-scope {
    container-type: inline-size;
    container-name: gridhead;
}

@media (min-width: 861px) {
    .paw-admin .detail-body:has(.grid-head-bar) { padding-top: 0; }
    .paw-admin .detail-body:has(.grid-head-bar) > .grid-head-scope:first-child { margin-top: 24px; }
}

/* Prototype 17 sticky-head contract. A sticky child rests against the scroll
   container's content edge, so detail-body's normal 24px top padding leaves a
   visible band above a pinned header. Pages with a hoisted/sticky header opt in
   with .has-sticky-head: keep the same initial 24px page inset by moving it to
   the first rendered child, while allowing the sticky header itself to dock
   flush to the scrollport's top edge. Restrict this transfer to desktop/tablet
   widths where detail-body actually owns that top padding; the mobile slide-over
   already uses padding: 0 and must not regain a synthetic top gap. */
@media (min-width: 861px) {
    .paw-admin .detail-pane.has-sticky-head > .detail-body {
        padding-top: 0;
    }

    .paw-admin .detail-pane.has-sticky-head > .detail-body > *:first-child {
        margin-top: 24px;
    }
}

@container gridhead (max-width: 960px) {
    .paw-admin .grid-head-bar { display: none; }
    .paw-admin .grid-head-scope .grid-table-wrap { border: 0; border-radius: 0; }
    .paw-admin .grid-head-scope .slot-day-head {
        margin-bottom: 10px;
        border-bottom: 1px solid var(--admin-border);
        border-radius: var(--admin-radius-sm);
    }
    .paw-admin .grid-head-scope .grid-table tr.dirty {
        background: color-mix(in srgb, var(--admin-primary) 10%, transparent);
        box-shadow: none;
    }
    .paw-admin .grid-head-scope .grid-table tr.dirty td { background: transparent; }
}

/* Prototype data-grid responsiveness is based on the space the table actually
   receives, not only the browser viewport. This keeps reusable editable grids
   usable inside narrow master/detail columns and split-screen layouts. */
.paw-admin .grid-table-wrap {
    container-type: inline-size;
    container-name: gridwrap;
}

/* Prototype 85 shared grid overflow contract. overflow-x:auto on a wrapper can
   coerce a visible y-axis to auto, accidentally making the grid wrapper a
   second vertical scroll container. Non-flow grids hand vertical scrolling
   back to their owning detail/card body while retaining x-axis clipping. */
.paw-admin .grid-table-wrap:where(:has(> .grid-table:not(.flow))) {
    overflow: clip visible;
}

/* Customise Options has no table min-width and must not own a horizontal or
   vertical scroll surface. Its enclosing .customise-workspace-body is the
   single scroll owner. This mirrors Prototype 85's .cust-work rule and applies
   to any compatible Customise grid rather than one component name. */
.paw-admin .cust-work .grid-table-wrap {
    overflow-x: visible;
}

/* Fixed-position picker portals rely on viewport coordinates. A grid holding
   one of those controls opts out of container containment, matching the
   prototype's escape hatch. */
.paw-admin .grid-table-wrap:has(.color-field),
.paw-admin .grid-table-wrap:has(.picker-input),
.paw-admin .grid-table-wrap:has([data-datetime-picker]),
.paw-admin .grid-table-wrap:has([data-time-picker]) {
    container-type: normal;
    container-name: none;
}

/* Shared prototype stacked-record contract for non-flow data grids. The
   viewport fallback protects phones; the container query handles the same
   layout when a grid is narrow inside a wider desktop workspace. */
@media (max-width: 700px) {
    .paw-admin .grid-table:not(.flow) thead { display: none; }
    .paw-admin .grid-table:not(.flow),
    .paw-admin .grid-table:not(.flow) tbody { display: block; width: 100%; }
    .paw-admin .grid-table:not(.flow) tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        margin-bottom: 14px;
        padding: 14px;
        border: 1px solid var(--admin-border);
        border-radius: var(--admin-radius-sm);
    }
    .paw-admin .grid-table:not(.flow) tr:last-child { margin-bottom: 0; }
    .paw-admin .grid-table:not(.flow) td { display: block; padding: 8px 0; border-bottom: 0; }
    .paw-admin .grid-table:not(.flow) td:first-child,
    .paw-admin .grid-table:not(.flow) td:last-child { padding-left: 0; padding-right: 0; }
    .paw-admin .grid-table:not(.flow) td[data-label]::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 6px;
        color: var(--admin-label);
        font-size: var(--admin-font-xs);
        font-weight: var(--admin-font-semibold);
        letter-spacing: .06em;
        text-transform: uppercase;
    }
    .paw-admin .grid-table:not(.flow) td[data-label="Feature Type"],
    .paw-admin .grid-table:not(.flow) td[data-label="Contact"] { flex: 0 0 100%; width: 100%; }
    .paw-admin .grid-table:not(.flow) td[data-label="Active"] { flex: 1; }
    .paw-admin .booking-count-grid { table-layout: auto; }
    .paw-admin .booking-count-grid td[data-label="Calendar"] { flex: 0 0 100%; width: 100%; }
    .paw-admin .booking-count-grid td[data-label="Max Per Day"],
    .paw-admin .booking-count-grid td[data-label="Max Per Hour"] { flex: 1; padding-right: 10px; }
    .paw-admin .grid-table:not(.flow) td:last-child:not([data-label]) { flex: 0 0 auto; width: auto; }
    .paw-admin .grid-table:not(.flow) td.grid-empty { flex: 0 0 100%; width: 100%; }
    .paw-admin .grid-table:not(.flow) .status-cell { justify-content: flex-start; }
    .paw-admin .team-consulting-grid { table-layout: auto; }
    .paw-admin .team-consulting-grid td { flex: 0 0 100%; width: 100%; }
    .paw-admin .team-consulting-grid .grid-col-nowrap { white-space: normal; }

    .paw-admin .grid-table:not(.flow) tr.dirty {
        border-color: var(--admin-primary);
        box-shadow: inset 3px 0 0 var(--admin-primary);
    }
    .paw-admin .grid-table:not(.flow) tr.dirty td:first-child { box-shadow: none; }
}

@container gridwrap (max-width: 700px) {
    .paw-admin .grid-table:not(.flow) thead { display: none; }
    .paw-admin .grid-table:not(.flow),
    .paw-admin .grid-table:not(.flow) tbody { display: block; width: 100%; }
    .paw-admin .grid-table:not(.flow) tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        margin-bottom: 14px;
        padding: 14px;
        border: 1px solid var(--admin-border);
        border-radius: var(--admin-radius-sm);
    }
    .paw-admin .grid-table:not(.flow) tr:last-child { margin-bottom: 0; }
    .paw-admin .grid-table:not(.flow) td { display: block; padding: 8px 0; border-bottom: 0; }
    .paw-admin .grid-table:not(.flow) td:first-child,
    .paw-admin .grid-table:not(.flow) td:last-child { padding-left: 0; padding-right: 0; }
    .paw-admin .grid-table:not(.flow) td[data-label]::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 6px;
        color: var(--admin-label);
        font-size: var(--admin-font-xs);
        font-weight: var(--admin-font-semibold);
        letter-spacing: .06em;
        text-transform: uppercase;
    }
    .paw-admin .grid-table:not(.flow) td[data-label="Feature Type"],
    .paw-admin .grid-table:not(.flow) td[data-label="Contact"] { flex: 0 0 100%; width: 100%; }
    .paw-admin .grid-table:not(.flow) td[data-label="Active"] { flex: 1; }
    .paw-admin .booking-count-grid { table-layout: auto; }
    .paw-admin .booking-count-grid td[data-label="Calendar"] { flex: 0 0 100%; width: 100%; }
    .paw-admin .booking-count-grid td[data-label="Max Per Day"],
    .paw-admin .booking-count-grid td[data-label="Max Per Hour"] { flex: 1; padding-right: 10px; }
    .paw-admin .grid-table:not(.flow) td:last-child:not([data-label]) { flex: 0 0 auto; width: auto; }
    .paw-admin .grid-table:not(.flow) td.grid-empty { flex: 0 0 100%; width: 100%; }
    .paw-admin .grid-table:not(.flow) .status-cell { justify-content: flex-start; }
    .paw-admin .team-consulting-grid { table-layout: auto; }
    .paw-admin .team-consulting-grid td { flex: 0 0 100%; width: 100%; }
    .paw-admin .team-consulting-grid .grid-col-nowrap { white-space: normal; }
    .paw-admin .grid-table:not(.flow) tr.dirty {
        border-color: var(--admin-primary);
        box-shadow: inset 3px 0 0 var(--admin-primary);
    }
    .paw-admin .grid-table:not(.flow) tr.dirty td:first-child { box-shadow: none; }
}


/* Compact reorder/action rows: on phone-sized layouts, keep one horizontal
   record row instead of letting the generic stacked-grid flex rules collapse
   the action beside the name. The contract is deliberately semantic: drag,
   primary content, action. Consumers opt in with grid-table--inline-row-actions. */
@media (max-width: 700px) {
    .paw-admin .grid-table.grid-table--inline-row-actions .detail-grid__generated-row {
        display: grid;
        grid-template-columns: 28px minmax(0, 1fr) 44px;
        align-items: center;
        gap: 8px;
    }

    .paw-admin .grid-table.grid-table--inline-row-actions .detail-grid__generated-row > td {
        min-width: 0 !important;
        width: auto !important;
    }

    .paw-admin .grid-table.grid-table--inline-row-actions .detail-grid__drag-cell {
        grid-column: 1;
        padding-right: 0 !important;
    }

    .paw-admin .grid-table.grid-table--inline-row-actions .detail-grid__primary-cell {
        grid-column: 2;
        overflow: hidden;
    }

    .paw-admin .grid-table.grid-table--inline-row-actions .detail-grid__delete-cell {
        grid-column: 3;
        justify-self: end;
        padding-left: 0 !important;
        padding-right: 0 !important;
        text-align: right;
    }

    .paw-admin .grid-table.grid-table--inline-row-actions .detail-grid__delete-cell .slot-actions {
        width: 100%;
        justify-content: flex-end;
    }
}

@container gridwrap (max-width: 700px) {
    .paw-admin .grid-table.grid-table--inline-row-actions .detail-grid__generated-row {
        display: grid;
        grid-template-columns: 28px minmax(0, 1fr) 44px;
        align-items: center;
        gap: 8px;
    }

    .paw-admin .grid-table.grid-table--inline-row-actions .detail-grid__generated-row > td {
        min-width: 0 !important;
        width: auto !important;
    }

    .paw-admin .grid-table.grid-table--inline-row-actions .detail-grid__drag-cell {
        grid-column: 1;
        padding-right: 0 !important;
    }

    .paw-admin .grid-table.grid-table--inline-row-actions .detail-grid__primary-cell {
        grid-column: 2;
        overflow: hidden;
    }

    .paw-admin .grid-table.grid-table--inline-row-actions .detail-grid__delete-cell {
        grid-column: 3;
        justify-self: end;
        padding-left: 0 !important;
        padding-right: 0 !important;
        text-align: right;
    }

    .paw-admin .grid-table.grid-table--inline-row-actions .detail-grid__delete-cell .slot-actions {
        width: 100%;
        justify-content: flex-end;
    }
}


/* Species Categories stacks earlier than ordinary editable grids because six
   columns (four controls) become cramped before the generic 700px threshold. */
@container gridwrap (max-width: 960px) {
    .paw-admin .species-category-grid thead { display: none; }
    .paw-admin .species-category-grid,
    .paw-admin .species-category-grid tbody { display: block; width: 100%; }
    .paw-admin .species-category-grid tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        margin-bottom: 14px;
        padding: 14px;
        border: 1px solid var(--admin-border);
        border-radius: var(--admin-radius-sm);
    }
    .paw-admin .species-category-grid tr:last-child { margin-bottom: 0; }
    .paw-admin .species-category-grid td { display: block; padding: 8px 0; border-bottom: 0; }
    .paw-admin .species-category-grid td[data-label]::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 6px;
        color: var(--admin-label);
        font-size: var(--admin-font-xs);
        font-weight: var(--admin-font-semibold);
        letter-spacing: .06em;
        text-transform: uppercase;
    }
    .paw-admin .species-category-grid .status-cell { justify-content: flex-start; }
    .paw-admin .species-category-grid {
        min-width: 0;
        table-layout: auto;
    }
    .paw-admin .species-category-grid td.grid-empty { flex: 0 0 100%; width: 100%; }
    .paw-admin .species-category-grid td[data-label="Category Name"],
    .paw-admin .species-category-grid td[data-label="Enabled"],
    .paw-admin .species-category-grid td[data-label="Duration Extension"],
    .paw-admin .species-category-grid td[data-label="Booking Type Override"] { flex: 0 0 100%; width: 100%; }
}

.paw-admin .badge-pill,
.paw-admin .int-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 4px 9px;
    border-radius: var(--admin-radius-pill);
    font-size: var(--admin-font-xs);
    font-weight: var(--admin-font-semibold);
    line-height: 1;
}

.paw-admin .page-actions {
    min-height: var(--admin-footer-height);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 10px 34px;
    border-top: 1px solid var(--admin-border);
    background: var(--admin-surface);
}

.paw-admin .page-actions .btn {
    padding: 9px 20px;
}

/* Exact prototype page-footer button contract. Full-panel pages should use
   .page-footer-fixed directly rather than combining it with .page-actions. */
.paw-admin .page-footer-fixed .btn {
    padding: 9px 20px;
}

/* Shared footer action geometry: Cancel/discard is the leading action and
   Save remains at the trailing edge. The mobile full-panel bar replaces these
   buttons on phones but desktop keeps the same left/right action hierarchy. */
.paw-admin .page-footer-fixed > .action-lead {
    margin-right: auto;
}

/* ---------- common state helpers ---------- */
.paw-admin [hidden] {
    display: none !important;
}

.paw-admin .ink-teal .grid-name,
.paw-admin .ink-teal .row-label,
.paw-admin .ink-teal .toggle-row .lbl,
.paw-admin .ink-teal .form-section-title,
.paw-admin .ink-teal .slot-day-head h3,
.paw-admin .ink-teal .card-title,
.paw-admin .ink-teal .field label:not(.switch),
.paw-admin .ink-teal .form-label,
.paw-admin .ink-teal .card label:not(.switch):not(.onoffswitch-label):not(.form-check-label),
.paw-admin .ink-teal .s-box label:not(.switch):not(.onoffswitch-label):not(.form-check-label) {
    /* Prototype 103 promotes editable/static form labels to the active clinic
       label ink. !important remains a compatibility boundary against legacy
       Paw.Component label rules, but the colour itself is theme-derived. */
    color: var(--admin-form-label-ink) !important;
}

/* ---------- scrollbars ----------
   Mirrors the prototype globally inside the rewritten Admin shell. The legacy
   host stylesheet still defines a wide teal scrollbar; these declarations are
   intentionally authoritative so every Admin pane, list, flyout and editor
   gets the same quiet neutral treatment. */
.paw-admin,
.paw-admin * {
    scrollbar-width: thin !important;
    scrollbar-color: var(--admin-muted-soft) transparent !important;
}

.paw-admin::-webkit-scrollbar,
.paw-admin *::-webkit-scrollbar {
    width: 8px !important;
    height: 8px !important;
}

.paw-admin::-webkit-scrollbar-track,
.paw-admin *::-webkit-scrollbar-track {
    background: transparent !important;
}

.paw-admin::-webkit-scrollbar-thumb,
.paw-admin *::-webkit-scrollbar-thumb {
    background: var(--admin-border) !important;
    border-radius: 4px !important;
}

.paw-admin::-webkit-scrollbar-corner,
.paw-admin *::-webkit-scrollbar-corner {
    background: transparent !important;
}

.paw-admin:hover::-webkit-scrollbar-thumb,
.paw-admin *:hover::-webkit-scrollbar-thumb {
    background: var(--admin-muted-soft) !important;
}

/* The legacy ConfigNavBar still deliberately hides its horizontal bars. Keep
   that behaviour until the old navigation component is retired. */
.paw-admin .primary-tabs,
.paw-admin .secondary-tabs {
    scrollbar-width: none !important;
}

.paw-admin .primary-tabs::-webkit-scrollbar,
.paw-admin .secondary-tabs::-webkit-scrollbar {
    display: none !important;
}

@media (max-width: 1320px) and (min-width: 861px) {
    .paw-admin {
        --admin-sidebar-current-width: var(--admin-sidebar-collapsed-width);
    }
}

@media (max-width: 860px) {
    /* The Admin document is viewport-locked. Keep the page host constrained so
       its feature components can own vertical scrolling instead of relying on
       the document/body, which is intentionally non-scrollable. */
    .paw-admin .admin-page-host {
        min-height: 0;
        overflow: hidden;
    }

    .paw-admin .detail-scroll,
    .paw-admin .detail-body,
    .paw-admin .gl-body,
    .paw-admin .list-body,
    .paw-admin .admin-home-page {
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
    }

    .paw-admin,
    html.admin-sidebar-collapsed .paw-admin {
        --admin-sidebar-current-width: 0px;
        --admin-tabs-height: 48px;
    }

    /* admin-has-tabs has higher specificity than the base mobile token, so it
       needs its own mobile value. Without this the shell continued reserving
       the desktop 68px tab height even after the tab strip itself was made
       compact. */
    .paw-admin.admin-has-tabs {
        --admin-tabs-height: 48px;
    }

    /* Exact prototype mobile settings-page/card contract. Keep the same card
       object as desktop; only the page inset and card padding tighten. */
    .paw-admin .settings-page {
        padding: 18px 16px;
    }

    .paw-admin .card,
    .paw-admin .s-box {
        padding: 22px 18px;
    }

    .paw-admin .card:not(.section-card) > .section-header:first-child,
    .paw-admin .card:not(.section-card) > .grid-head-bar:first-child,
    .paw-admin .s-box:not(.section-card) > .section-header:first-child {
        margin-left: -18px;
        margin-right: -18px;
    }

    .paw-admin .form-grid,
    .paw-admin .toggle-grid {
        grid-template-columns: 1fr;
    }

    .paw-admin .section-card {
        border-radius: 0;
    }

    .paw-admin .section-card .hero-body,
    .paw-admin .section-card .hours-body,
    .paw-admin .section-card .int-body,
    .paw-admin .section-card .section-card-body {
        padding: 14px 18px 20px;
    }

    .paw-admin .section-card-body.detail-readout-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .paw-admin .section-header {
        padding: 10px 18px;
    }
}

/* Prototype 17 phone density. These are shared layout primitives rather than
   Clinic-only overrides so migrated settings/detail pages inherit the same
   compact rhythm while retaining their existing theme colours. */
@media (max-width: 700px) {
    .paw-admin .settings-page {
        padding: 14px;
    }

    .paw-admin .settings-page .card,
    .paw-admin .settings-page .s-box {
        margin-bottom: 10px;
    }

    .paw-admin .settings-page .card:last-child,
    .paw-admin .settings-page .s-box:last-child {
        margin-bottom: 0;
    }

    /* Prototype 103 phone section-card contract. The generic <=860px card
       rule applies 22px/18px padding after the base section-card reset; without
       this stronger mobile reset the section strip/body are effectively padded
       twice. Keep this shared so Overview and other true section-card panes do
       not need page-specific compensation. */
    .paw-admin .settings-page .card.section-card,
    .paw-admin .card.section-card {
        padding: 0;
    }

    .paw-admin .section-header .section-header-icon {
        display: none;
    }

    .paw-admin .section-card .hero-body,
    .paw-admin .section-card .hours-body,
    .paw-admin .section-card .int-body,
    .paw-admin .section-card .section-card-body {
        padding: 12px 14px 16px;
    }

    /* Prototype 103 does not force the desktop 48px section-header minimum on
       phone section cards. The compact strip is content-sized from its 9px
       vertical inset; wrapping can still grow it when a real action requires
       another line. */
    .paw-admin .section-card > .section-header {
        min-height: 0;
        padding: 9px 14px;
    }

    .paw-admin .section-card-body.detail-readout-grid {
        gap: 13px;
    }

    /* Containers that own their own mobile gap must also own the spacing
       between cards. Otherwise the ordinary 10px settings-page card margin is
       added on top of the container gap (Overview was 8 + 10). These are the
       same three stack contracts used by Prototype 103. */
    .paw-admin .overview-wrap > .card,
    .paw-admin .dash-charts > .card,
    .paw-admin .card-row > .card {
        margin-bottom: 0;
    }

    .paw-admin .overview-wrap {
        gap: 8px;
    }

    .paw-admin .dash-charts,
    .paw-admin .card-row {
        gap: 10px;
    }
}

/* ---------- shared loading skeletons ---------- */
@keyframes admin-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Legacy csp-skel-* markup is still used by a handful of detail loaders.
   Own the family globally so those loaders cannot fall back to host/legacy
   grey styles. New pages should prefer the shared .skeleton family. */
.paw-admin .csp-skel-wrap {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.paw-admin .csp-skel-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 20px;
    min-width: 0;
}

.paw-admin .csp-skel-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.paw-admin .csp-skel-field.full {
    grid-column: 1 / -1;
}

.paw-admin .csp-skel-bar {
    display: block;
    border-radius: 4px;
    background: linear-gradient(
        90deg,
        var(--admin-skeleton-base) 25%,
        var(--admin-skeleton-highlight) 50%,
        var(--admin-skeleton-base) 75%
    );
    background-size: 200% 100%;
    animation: admin-shimmer 1.2s infinite;
}

.paw-admin .csp-skel-bar.csp-label {
    width: 55%;
    height: 10px;
}

.paw-admin .csp-skel-bar.csp-heading {
    width: 35%;
    height: 11px;
    margin-top: 10px;
    margin-bottom: 4px;
}

.paw-admin .csp-skel-bar.csp-input,
.paw-admin .csp-skel-bar.csp-select {
    width: 100%;
    height: 38px;
    border-radius: 6px;
}

.paw-admin .csp-skel-bar.csp-textarea {
    width: 100%;
    height: 64px;
    border-radius: 6px;
}

.paw-admin .csp-skel-bar.csp-toggle {
    width: 44px;
    height: 24px;
    flex: 0 0 44px;
    border-radius: 999px;
}

.paw-admin .csp-skel-bar.csp-btn {
    width: 110px;
    height: 38px;
    border-radius: 6px;
}

.paw-admin .csp-skel-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 44px;
    padding: 8px 0;
}

.paw-admin .csp-skel-hours-row {
    display: grid;
    grid-template-columns: 80px repeat(3, minmax(0, 1fr)) auto;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 7px 0;
}

.paw-admin .detail-skeleton,
.paw-admin .body-skeleton {
    width: 100%;
    margin: 0 auto;
    padding: 32px 40px;
}

.paw-admin .detail-skeleton,
.paw-admin .body-skeleton {
    max-width: none;
    margin-inline: 0;
}

.paw-admin .detail-skeleton .ds-block,
.paw-admin .body-skeleton .ds-block {
    height: 12px;
    margin-bottom: 16px;
    border-radius: 4px;
    background: linear-gradient(
        90deg,
        var(--admin-skeleton-base) 25%,
        var(--admin-skeleton-highlight) 50%,
        var(--admin-skeleton-base) 75%
    );
    background-size: 200% 100%;
    animation: admin-shimmer 1.2s infinite;
}

.paw-admin .detail-skeleton .ds-block.wide,
.paw-admin .body-skeleton .ds-block.wide { width: 80%; }
.paw-admin .detail-skeleton .ds-block.med,
.paw-admin .body-skeleton .ds-block.med { width: 55%; }
.paw-admin .detail-skeleton .ds-block.short,
.paw-admin .body-skeleton .ds-block.short { width: 35%; }

.paw-admin .detail-skeleton .ds-block.tall,
.paw-admin .body-skeleton .ds-block.tall {
    height: 80px;
    margin-bottom: 22px;
    border-radius: var(--admin-radius-sm);
}

.paw-admin .body-skeleton .ds-block.hero {
    height: 120px;
    margin-bottom: 28px;
    border-radius: var(--admin-radius-input);
}

.paw-admin .ds-field-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 16px;
    margin-bottom: 20px;
}

.paw-admin .ds-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.paw-admin .ds-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--admin-border);
}

.paw-admin .ds-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--admin-border);
}

.paw-admin .ds-footer-right {
    display: flex;
    gap: 8px;
}

@media (max-width: 700px) {
    .admin-color-picker-backdrop.is-open {
        display: block;
    }

    .paw-admin .detail-skeleton,
    .paw-admin .body-skeleton { padding: 16px; }
    .paw-admin .ds-field-grid,
    .paw-admin .csp-skel-grid { grid-template-columns: 1fr; }

    .paw-admin .csp-skel-hours-row {
        grid-template-columns: 72px repeat(3, minmax(64px, 1fr)) auto;
        overflow-x: auto;
    }
}

/* ========================================================================
   Phase 2 — shared page-pattern layer
   These rules own structure that is repeated across multiple Admin features.
   Feature .razor.css files should supply only their genuine local geometry.
   ======================================================================== */
.paw-admin .label-note {
    display: block;
    margin-top: 3px;
    color: var(--admin-muted);
    font-size: var(--admin-font-xs);
    font-weight: var(--admin-font-regular);
    line-height: 1.35;
    letter-spacing: 0;
    text-transform: none;
}

.paw-admin .toggle-grid-paired {
    align-items: stretch;
}

.paw-admin .toggle-grid-paired > .field.is-empty {
    visibility: hidden;
}

.paw-admin .grid-table th:first-child {
    border-top-left-radius: var(--admin-radius-sm);
}

.paw-admin .grid-table th:last-child {
    border-top-right-radius: var(--admin-radius-sm);
}

.paw-admin .grid-table td.grid-empty,
.paw-admin .grid-table .detail-grid__empty {
    padding: 20px 14px;
    border-bottom: 0;
    color: var(--admin-muted);
    font-size: var(--admin-font-sm);
    text-align: center;
}

/* Prototype inline action used inside grid empty/default states. */
.paw-admin .link-btn {
    padding: 0;
    border: 0;
    background: none;
    color: var(--admin-form-label-ink);
    cursor: pointer;
    font: inherit;
    font-weight: var(--admin-font-semibold);
    text-decoration: underline;
}

.paw-admin .link-btn:hover {
    color: var(--admin-primary);
}

.paw-admin .grid-table input:disabled,
.paw-admin .grid-table select:disabled,
.paw-admin .grid-table textarea:disabled {
    background-color: var(--admin-row-stripe);
    color: var(--admin-muted);
    cursor: not-allowed;
}

.paw-admin .grid-head-scope .grid-table tr.dirty input:disabled,
.paw-admin .grid-head-scope .grid-table tr.dirty select:disabled {
    background-color: transparent;
}

.paw-admin .grid-table:not(.flow) tr.dirty td,
.paw-admin .grid-table:not(.flow) tr.detail-grid__row--dirty td {
    background: var(--admin-tint-soft);
}

.paw-admin .grid-table:not(.flow) tr.dirty td:first-child,
.paw-admin .grid-table:not(.flow) tr.detail-grid__row--dirty td:first-child {
    box-shadow: inset 3px 0 0 var(--admin-primary);
}

.paw-admin .grid-table.flow th {
    padding: 0 14px 10px;
    background: none;
    border-bottom: 1px solid var(--admin-border);
    border-radius: 0;
}

.paw-admin .grid-table.flow td {
    padding: 18px 14px;
}

.paw-admin .grid-table.flow td:first-child,
.paw-admin .grid-table.flow th:first-child {
    padding-left: 0;
}

.paw-admin .grid-table.flow .color-field,
.paw-admin .grid-table.flow input[type="text"],
.paw-admin .grid-table.flow select {
    max-width: 220px;
}

/* Full-panel pages use the width of the Admin workspace. The prototype
   deliberately does not cap settings pages: consistent outer padding is what
   keeps sibling pages aligned, while wide grids/forms remain usable. */
.paw-admin .admin-page-content,
.paw-admin .settings-page {
    width: 100%;
    max-width: none;
    margin-inline: 0;
}

/* Prototype page-flow contract.
   A settings page is normal document flow, not a viewport-height flex column.
   The routed scroll host owns viewport sizing; the page owns only its intrinsic
   content height. Keeping those responsibilities separate prevents short pages
   from manufacturing a large empty band above a fixed action footer. */
.paw-admin .settings-page {
    min-height: 0;
    display: block;
}

.paw-admin .detail-scroll > form {
    width: 100%;
    min-height: 0;
    display: block;
}

/* Master/detail panes historically render DetailActionFooter in two ways:
   newer callers pass it through ItemDetailPanel.FooterContent, while older
   detail components render it inside the scroll body. Make the latter use the
   exact same bottom-docked bar without requiring every feature pane to be
   rewritten at once. */
.paw-admin .detail-col {
    position: relative;
}

.paw-admin .detail-col:has(> .detail-scroll .detail-action-footer)
    > .detail-scroll {
    padding-bottom: calc(var(--admin-footer-height) + 14px) !important;
}

.paw-admin .detail-col > .detail-scroll .detail-action-footer {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 8;
    width: 100% !important;
    min-height: var(--admin-footer-height);
    margin: 0 !important;
    padding: 10px 34px !important;
    display: flex;
    align-items: center;
    border-top: 1px solid var(--admin-border);
    background: var(--admin-surface);
}

@media (max-width: 700px) {
    .paw-admin .detail-col:has(> .detail-scroll .detail-action-footer)
        > .detail-scroll {
        padding-bottom: calc(var(--admin-footer-height) + 10px) !important;
    }

    .paw-admin .detail-col > .detail-scroll .detail-action-footer {
        padding: 10px 16px !important;
    }
}

.paw-admin .detail-scroll > .row.justify-content-center,
.paw-admin .detail-scroll > .row > .col-12.col-md-10 {
    min-width: 0;
}

@media (max-width: 700px) {
    .paw-admin .toggle-grid-paired > .field.is-empty {
        display: none;
    }

    .paw-admin .grid-table.flow input[type="text"],
    .paw-admin .grid-table.flow select,
    .paw-admin .grid-table.flow .color-field {
        max-width: none;
    }
}

/* Shared compact page/grid actions. These started in the slot editors but are
   now used by Client Restrictions and other section headers as a true Admin
   primitive. */
.paw-admin .slot-page-btn {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1.5px solid var(--admin-border);
    border-radius: var(--admin-radius-sm);
    background: var(--admin-page-bg);
    color: var(--admin-muted);
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s, transform .1s;
}

.paw-admin .slot-page-btn svg { width: 16px; height: 16px; }
.paw-admin .slot-page-btn:hover { background: var(--admin-tint); border-color: var(--admin-primary); color: var(--admin-label); }
.paw-admin .slot-page-btn.primary { background: var(--admin-tint); border-color: var(--admin-primary); color: var(--admin-label); }
.paw-admin .slot-page-btn.primary:hover { background: var(--admin-primary); color: var(--admin-primary-text); }
.paw-admin .slot-page-btn:disabled { opacity: .55; cursor: not-allowed; }
.paw-admin .slot-page-btn:focus-visible { outline: 2px solid var(--admin-primary); outline-offset: 2px; }

.paw-admin .slot-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    white-space: nowrap;
}

.paw-admin .slot-icon-btn {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: inline-grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--admin-primary);
    color: var(--admin-primary-text);
    cursor: pointer;
    transition: filter .15s, transform .1s, opacity .15s;
}

.paw-admin .slot-icon-btn svg { width: 14px; height: 14px; }
.paw-admin .slot-icon-btn.edit { background: var(--admin-label); }
.paw-admin .slot-icon-btn.delete { background: var(--admin-danger); }
.paw-admin .slot-icon-btn:hover { filter: brightness(.94); }
.paw-admin .slot-icon-btn:active:not(:disabled),
.paw-admin .slot-page-btn:active:not(:disabled) { transform: scale(.94); }
.paw-admin .slot-icon-btn:disabled { opacity: .35; cursor: not-allowed; filter: none; }

/* Prototype row-action contract: any grid/list that wraps its compact actions in
   .slot-actions gets the same quiet-at-rest interaction. The action container
   keeps its geometry, while icon buttons fade in for the row being hovered or
   keyboard-focused. At compact widths and on non-hover devices the actions stay
   visible so touch/mobile users never lose access to them. */
.paw-admin .slot-actions .slot-icon-btn {
    opacity: 0;
    pointer-events: none;
    transition: opacity .13s ease, filter .15s, transform .1s;
}

.paw-admin tr:hover .slot-actions .slot-icon-btn,
.paw-admin tr:focus-within .slot-actions .slot-icon-btn,
.paw-admin .sched-row:hover .slot-actions .slot-icon-btn,
.paw-admin .sched-row:focus-within .slot-actions .slot-icon-btn,
.paw-admin .q-row:hover .slot-actions .slot-icon-btn,
.paw-admin .q-row:focus-within .slot-actions .slot-icon-btn,
.paw-admin .q-row.selected .slot-actions .slot-icon-btn {
    opacity: 1;
    pointer-events: auto;
}

/* Preserve the shared disabled treatment when a row reveals its actions. */
.paw-admin tr:hover .slot-actions .slot-icon-btn:disabled,
.paw-admin tr:focus-within .slot-actions .slot-icon-btn:disabled,
.paw-admin .sched-row:hover .slot-actions .slot-icon-btn:disabled,
.paw-admin .sched-row:focus-within .slot-actions .slot-icon-btn:disabled,
.paw-admin .q-row:hover .slot-actions .slot-icon-btn:disabled,
.paw-admin .q-row:focus-within .slot-actions .slot-icon-btn:disabled,
.paw-admin .q-row.selected .slot-actions .slot-icon-btn:disabled {
    opacity: .35;
}

@media (max-width: 860px), (hover: none) {
    .paw-admin .slot-actions .slot-icon-btn {
        opacity: 1;
        pointer-events: auto;
    }

    .paw-admin .slot-actions .slot-icon-btn:disabled {
        opacity: .35;
    }
}

.paw-admin .row-label {
    color: var(--admin-heading);
    font-size: var(--admin-font-sm);
    font-weight: var(--admin-font-semibold);
}

.paw-admin .row-desc {
    margin-top: 2px;
    color: var(--admin-muted);
    font-size: var(--admin-font-sm);
}

.paw-admin .color-field {
    display: flex;
    align-items: center;
    gap: 10px;
}

.paw-admin .color-field input[type="text"] {
    min-width: 0;
    flex: 1;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    text-transform: uppercase;
}

/* Card stack used inside master/detail scroll bodies. Unlike .settings-page it
   carries no outer padding because ItemDetailPanel already owns that inset. */
.paw-admin .detail-card-stack {
    display: flex;
    flex-direction: column;
    gap: 22px;
    min-width: 0;
}

.paw-admin .detail-card-stack > .card,
.paw-admin .detail-card-stack > .s-box {
    margin-bottom: 0;
}

@media (max-width: 700px) {
    .paw-admin .detail-card-stack {
        gap: 10px;
    }
}


/* ==========================================================================
   Full-panel page contract
   Overview, Details and sibling Clinic/Booking full-panel screens share one
   page geometry. FullPanelRouter owns scrolling; children own only their card
   stack and local feature layout.
   ========================================================================== */
.paw-admin .full-panel-page,
.paw-admin .clinic-detail-pane,
.paw-admin .clinic-overview-empty {
    width: 100%;
    max-width: none;
    min-width: 0;
}

.paw-admin .full-panel-page {
    min-height: 0;
}

.paw-admin .full-panel-page--legacy {
    padding: 26px;
}

.paw-admin .full-panel-page--legacy > .row,
.paw-admin .full-panel-page--legacy > .row > [class*="col-"] {
    width: 100%;
    max-width: none;
    margin-inline: 0;
}

.paw-admin .full-panel-page--legacy > .row > [class*="col-"] {
    flex: 0 0 100%;
}

.paw-admin .full-panel-page > .settings-page,
.paw-admin .clinic-detail-pane.settings-page,
.paw-admin .clinic-overview-empty.settings-page {
    width: 100%;
    max-width: none;
    margin: 0;
}

/* Loading placeholders are allowed to retain temporary Bootstrap row/column
   markup, but never its centred col-md-10 width constraint. */
.paw-admin .full-panel-page--loading > .row,
.paw-admin .full-panel-page--loading > .row > [class*="col-"] {
    width: 100%;
    max-width: none;
    margin: 0;
}

.paw-admin .full-panel-page--loading > .row {
    padding: 26px;
}

.paw-admin .full-panel-page--loading > .row > [class*="col-"] {
    padding: 0;
    flex: 0 0 100%;
}

/* Full-panel page footer — same structural contract as the prototype.
   .page-actions remains the in-flow footer for master/detail panes.
   .page-footer-fixed is reserved for normal scrolling full-panel pages and is
   deliberately out of flow. The content page reserves exactly one footer
   height plus its normal outer inset; no viewport-height flex or auto margins
   are involved. */
.paw-admin .full-panel-page:has(.page-footer-fixed) .settings-page {
    padding-bottom: calc(var(--admin-footer-height) + 26px);
}

.paw-admin .full-panel-page--legacy:has(.page-footer-fixed) {
    padding-bottom: calc(var(--admin-footer-height) + 26px);
}

.paw-admin .page-footer-fixed {
    position: fixed;
    left: var(--admin-sidebar-current-width);
    right: 0;
    bottom: 0;
    z-index: var(--admin-layer-footer);
    width: auto;
    min-height: var(--admin-footer-height);
    margin: 0;
    padding: 10px 34px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    background: rgba(255, 255, 255, .97);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--admin-border);
    transition: left .16s ease;
}

.paw-admin .page-footer-fixed > .detail-action-footer {
    width: 100%;
    margin: 0;
}

@media (max-width: 860px) {
    .paw-admin .full-panel-page--loading > .row {
        padding: 12px 12px 18px;
    }

    .paw-admin .full-panel-page--legacy {
        padding: 12px 12px 18px;
    }

    .paw-admin .full-panel-page:has(.page-footer-fixed) .settings-page,
    .paw-admin .full-panel-page--legacy:has(.page-footer-fixed) {
        padding-bottom: calc(var(--admin-footer-height) + 18px);
    }

    .paw-admin .page-footer-fixed {
        left: 0;
        padding: 8px 18px calc(8px + env(safe-area-inset-bottom, 0px));
    }
}

.paw-admin .mobile-list-search-close {
    display: none;
}

/* ==========================================================================
   Shared Prototype 11 mobile action primitives
   These are the Blazor-side equivalent of the prototype's site.mobile-actions
   vocabulary. They are intentionally generic so list navigation, detail commit
   controls and full-panel actions can share one phone geometry as pages move to
   the new mobile shell.
   ========================================================================== */
@media (max-width: 700px) {
    .paw-admin .ma-group {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 92;
        padding-top: 14px;
        background: transparent;
        pointer-events: none;
    }

    .paw-admin .ma-group > * {
        pointer-events: auto;
    }

    .paw-admin .ma-row {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 0 14px calc(14px + env(safe-area-inset-bottom, 0px));
    }

    .paw-admin .ma-pill {
        height: 58px;
        min-width: 0;
        flex: 1 1 auto;
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 0 8px;
        border-radius: var(--admin-radius-pill);
        background: #fff;
        box-shadow: 0 6px 18px rgba(16, 42, 50, .16);
    }

    .paw-admin .ma-pill-item {
        height: 44px;
        min-width: 0;
        flex: 0 0 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        border: 0;
        border-radius: var(--admin-radius-pill);
        background: transparent;
        color: var(--admin-muted);
        cursor: pointer;
    }

    .paw-admin .ma-pill-item.is-current {
        flex: 1 1 auto;
        padding: 0 12px;
        background: var(--admin-primary);
        color: var(--admin-primary-text);
        font-weight: var(--admin-font-semibold);
    }

    /* Prototype 103 list/full-page floating navigation is a compact object,
       not a bottom toolbar. Keep the pill sized to its contents and centre the
       pill + primary action as one group. Detail commit controls intentionally
       do not use this modifier and continue to align to the trailing edge. */
    .paw-admin .mobile-floating-navigation .ma-row {
        width: fit-content;
        max-width: 100%;
        margin-inline: auto;
        justify-content: center;
    }

    /* Prototype 137 list-state refinement. Keep the navigation pill and Add
       FAB in normal flow as one centred cluster. The prototype can visually
       overlap the two at narrow widths because it centres the pill
       independently; Blazor instead preserves the shared 10px row gap and
       lets the pill shrink/ellipsis inside the remaining viewport width. */
    .paw-admin .mobile-floating-navigation.has-add-action:not(.has-clear-action) .ma-row {
        width: fit-content;
        max-width: calc(100vw - 28px);
        margin-inline: auto;
        justify-content: center;
    }

    .paw-admin .mobile-floating-navigation.has-add-action:not(.has-clear-action) .ma-pill {
        max-width: calc(100vw - 96px);
        flex: 0 1 auto;
    }

    .paw-admin .mobile-floating-navigation.has-add-action:not(.has-clear-action) .mobile-list-add {
        flex: 0 0 58px;
        margin-left: 0 !important;
    }

    /* Explicit clear + commit mode for editable full-panel pages. Keep the X
       and check pinned to opposite edges while the navigation pill remains the
       centred middle object. */
    .paw-admin .mobile-floating-navigation.has-clear-action .ma-row {
        width: 100%;
        max-width: 100%;
        display: grid;
        grid-template-columns: 58px minmax(0, 1fr) 58px;
        align-items: center;
        justify-content: stretch;
    }

    .paw-admin .mobile-floating-navigation.has-clear-action .mobile-floating-clear-action {
        justify-self: start;
    }

    .paw-admin .mobile-floating-navigation.has-clear-action .ma-pill {
        justify-self: center;
        width: fit-content;
        max-width: 100%;
    }

    .paw-admin .mobile-floating-navigation.has-clear-action .mobile-floating-primary-action {
        justify-self: end;
    }

    .paw-admin .mobile-floating-navigation .ma-pill {
        width: fit-content;
        max-width: calc(100vw - 28px);
        flex: 0 1 auto;
    }

    .paw-admin .mobile-floating-navigation.has-primary-action .ma-pill {
        max-width: calc(100vw - 96px);
    }

    .paw-admin .mobile-floating-navigation.has-clear-action.has-primary-action .ma-pill {
        max-width: 100%;
    }

    .paw-admin .mobile-floating-navigation .ma-pill-item.is-current {
        flex: 0 1 auto;
        max-width: min(220px, calc(100vw - 140px));
    }

    .paw-admin .mobile-floating-navigation .ma-pill-item:not(.is-current) {
        flex: 0 0 44px;
    }

    .paw-admin .mobile-floating-navigation .ma-label {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .paw-admin .ma-fab,
    .paw-admin .btn.ma-fab {
        width: 58px;
        height: 58px;
        min-width: 58px;
        flex: 0 0 58px;
        padding: 0 !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 0;
        border-radius: var(--admin-radius-pill);
        background: var(--admin-primary);
        color: var(--admin-primary-text);
        box-shadow: 0 6px 18px rgba(16, 42, 50, .2);
        cursor: pointer;
    }

    .paw-admin .ma-fab svg,
    .paw-admin .btn.ma-fab svg {
        width: 22px;
        height: 22px;
    }

    .paw-admin .ma-fab-sm,
    .paw-admin .btn.ma-fab-sm {
        width: 44px;
        height: 44px;
        min-width: 44px;
        flex: 0 0 44px;
        padding: 0 !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 0;
        border-radius: var(--admin-radius-pill);
        background: #fff;
        color: var(--admin-label);
        box-shadow: 0 4px 12px rgba(16, 42, 50, .16);
        cursor: pointer;
    }

    .paw-admin .ma-fab-sm svg,
    .paw-admin .btn.ma-fab-sm svg {
        width: 18px;
        height: 18px;
    }

    /* Prototype 145 / admin-cancel-style.html option 2: Neutral outline.
       Cancel is an exit, not a destructive action, so danger red belongs only
       to Delete. Keep Cancel on the shared 44px secondary circle with a muted
       glyph, the normal control border, and a quieter shadow. */
    .paw-admin .ma-fab-sm.is-cancel,
    .paw-admin .btn.ma-fab-sm.is-cancel {
        color: var(--admin-muted);
        background: var(--admin-surface);
        border: 1px solid var(--admin-border);
        box-shadow: 0 2px 8px color-mix(in srgb, var(--admin-shadow-ink) 10%, transparent);
    }

    .paw-admin .ma-fab-sm.is-cancel:active,
    .paw-admin .btn.ma-fab-sm.is-cancel:active {
        background: var(--admin-row-stripe);
    }

    .paw-admin .ma-fab-sm.is-danger,
    .paw-admin .btn.ma-fab-sm.is-danger {
        color: var(--admin-danger);
    }

    .paw-admin .ma-fab:active,
    .paw-admin .btn.ma-fab:active,
    .paw-admin .ma-fab-sm:active,
    .paw-admin .btn.ma-fab-sm:active {
        transform: scale(.96);
    }

    .paw-admin .ma-fab:disabled,
    .paw-admin .btn.ma-fab:disabled {
        background: var(--admin-muted-soft);
        color: #fff;
        box-shadow: none;
        cursor: default;
        transform: none;
    }

    .paw-admin .ma-fab-sm:disabled,
    .paw-admin .btn.ma-fab-sm:disabled {
        background: #fff;
        color: var(--admin-muted);
        box-shadow: none;
        opacity: .55;
        cursor: default;
        transform: none;
    }

    .paw-admin .ma-fab-sm.is-cancel:disabled,
    .paw-admin .btn.ma-fab-sm.is-cancel:disabled {
        border-color: var(--admin-border);
        background: var(--admin-surface);
        color: var(--admin-muted);
    }

    .paw-admin .ma-sr {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    /* Prototype 17 detail action cluster. Keep this in the global mobile
       action contract so the generic .md-page .page-actions rule cannot pull
       the circles down to its 8px footer inset. */
    .paw-admin .md-page .page-actions.mobile-floating-actions {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 92;
        min-height: 0;
        margin: 0;
        padding: 20px 14px calc(14px + env(safe-area-inset-bottom, 0px));
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 10px;
        border-top: 0;
        background: transparent;
        pointer-events: none;
    }

    .paw-admin .md-page .page-actions.mobile-floating-actions > * {
        pointer-events: auto;
    }

    .paw-admin .md-page .page-actions.mobile-floating-actions > .action-error {
        flex: 1 1 100%;
        order: -1;
        margin: 0 0 8px;
        padding: 9px 10px;
        border: 0;
        border-radius: var(--admin-radius-card);
        background: #fff;
        box-shadow: 0 4px 12px rgba(16, 42, 50, .16);
    }

    .paw-admin .md-page .page-actions.mobile-floating-actions > .action-lead {
        margin-right: auto;
    }

    .paw-admin .md-page .page-actions.mobile-floating-actions > .btn.ma-fab,
    .paw-admin .md-page .page-actions.mobile-floating-actions > .btn.ma-fab-sm {
        margin: 0 !important;
        align-self: center;
    }

    /* When the detail header's Back action runs the same guarded discard/close
       path, the mobile Cancel circle is redundant. Desktop still renders it. */
    .paw-admin .md-page .page-actions.mobile-floating-actions > .mobile-back-cancel {
        display: none;
    }

    /* Shared floating-list navigation contract. The floating bar replaces app
       navigation on phones; SidebarListTabs remain visible because they filter
       the master list rather than navigate the app. The list toolbar stays
       mounted as the behavior source but stands down visually. */
    .paw-admin:has(.md-list.mobile-list-nav-enabled) {
        --admin-tabs-height: 0px;
        --secondary-tabs-h: 0px;
        --nav-bottom: var(--admin-header-height);
    }

    .paw-admin:has(.md-list.mobile-list-nav-enabled) .primary-tabs-wrap,
    .paw-admin:has(.md-list.mobile-list-nav-enabled) .secondary-tabs-wrap,
    .paw-admin:has(.md-list.mobile-list-nav-enabled) .sub-tabs:not(.is-sidebar-tabs) {
        display: none !important;
    }

    /* Sidebar tabs are list filters, not app navigation. Prototype 11 keeps
       them visible on phones even when the floating app bar is active. */
    .paw-admin .md-list.mobile-list-nav-enabled > .sub-tabs.is-sidebar-tabs {
        display: flex !important;
    }

    /* Prototype list-chrome search reveal. The desktop toolbar remains the
       behavior source, but on phones it collapses to zero height until the
       floating Search action opens it directly beneath SidebarListTabs. */
    .paw-admin .md-list.mobile-list-nav-enabled > .md-list-toolbar {
        display: flex;
        align-items: center;
        gap: 0;
        position: relative;
        min-height: 0;
        height: 0;
        padding: 0 12px;
        border: 0;
        border-bottom: 0 solid transparent;
        overflow: hidden;
        flex: 0 0 auto;
        transition: height .2s ease, padding .2s ease, border-color .2s ease;
    }

    .paw-admin .md-list.mobile-list-nav-enabled.mobile-search-open > .md-list-toolbar,
    .paw-admin .md-list.mobile-list-nav-enabled.bulk-mode > .md-list-toolbar {
        height: 52px;
        padding: 8px 12px;
        border-bottom-width: 1px;
        border-bottom-color: var(--admin-border);
    }

    .paw-admin .md-list.mobile-list-nav-enabled > .md-list-toolbar > * {
        display: none !important;
    }

    .paw-admin .md-list.mobile-list-nav-enabled > .md-list-toolbar > .searchbar {
        min-width: 0;
        opacity: 0;
        transform: translateY(-6px);
        transition: opacity .18s ease .04s, transform .18s ease .04s;
    }

    .paw-admin .md-list.mobile-list-nav-enabled.mobile-search-open > .md-list-toolbar > .searchbar {
        display: flex !important;
        flex: 1 1 auto;
        opacity: 1;
        transform: translateY(0);
    }

    .paw-admin .md-list.mobile-list-nav-enabled.mobile-search-open > .md-list-toolbar > .mobile-list-search-close {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        flex: 0 0 36px;
        width: 36px;
        height: 36px;
        margin-left: 8px;
        padding: 0;
        border: 0;
        border-radius: var(--admin-radius-pill);
        background: var(--admin-tint);
        color: var(--admin-label);
        cursor: pointer;
    }

    .paw-admin .md-list.mobile-list-nav-enabled.mobile-search-open > .md-list-toolbar > .mobile-list-search-close:hover,
    .paw-admin .md-list.mobile-list-nav-enabled.mobile-search-open > .md-list-toolbar > .mobile-list-search-close:focus-visible {
        background: var(--admin-tint-strong);
        outline: none;
    }

    .paw-admin .md-list.mobile-list-nav-enabled.bulk-mode > .md-list-toolbar > .gl-select-bar {
        display: flex !important;
    }

    .paw-admin .md-list.mobile-list-nav-enabled .md-list-items {
        padding-bottom: calc(var(--admin-mobile-actions-inset) + env(safe-area-inset-bottom, 0px));
    }

    /* Native-flow mobile detail footer. Standard detail panes already use a
       flex-column shell (`detail-body` + `page-actions`), so let the footer's
       real height participate in layout instead of measuring it in JavaScript.
       A fixed 30px negative top margin reproduces Prototype 17's deliberate
       visual overlap: the transparent lead-in floats over the end of the
       scroller while the remaining footer height is reserved intrinsically.
       If validation adds another row, flex layout automatically reserves that
       extra height with no ResizeObserver or runtime CSS variable.

       Bespoke workspaces that do not use a direct `.detail-body` (for example
       Customise) keep the existing fixed floating-action contract and can be
       migrated independently without changing their current mobile geometry. */
    .paw-admin .detail-pane:has(> .detail-body) > .page-actions.mobile-floating-actions {
        position: relative;
        left: auto;
        right: auto;
        bottom: auto;
        flex: 0 0 auto;
        width: 100%;
        margin-top: -30px;
    }
}

/* ==========================================================================
   Prototype master/detail contract
   Mirrors the prototype's .md-page / .md-layout / .md-list / .md-detail
   structure. Blazor owns selection/state; these classes own layout only.
   ========================================================================== */
.paw-admin .md-page {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.paw-admin .md-layout {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    margin: 18px 26px;
    background: var(--admin-surface);
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius);
    box-shadow: var(--admin-shadow-card);
    overflow: hidden;
}

.paw-admin .md-list {
    position: relative;
    /* Prototype master/detail geometry: fixed desktop rail, narrowed only in
       the explicit 701–860px intermediate band below. */
    width: 320px;
    flex-shrink: 0;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-right: 1px solid var(--admin-border);
    background: var(--admin-surface);
}

.paw-admin .md-list-items {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 6px 12px 12px;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
}

/* Button semantics are preferable in Blazor for state-changing list actions.
   The prototype uses links, so reset only native button chrome while retaining
   the prototype's exact .item-row visual class. */
.paw-admin .md-list .item-row {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    margin: 1px 0;
    padding: 10px 12px;
    border: 0;
    border-radius: var(--admin-radius-sm);
    background: transparent;
    color: var(--admin-text);
    font: inherit;
    font-size: var(--admin-font-md);
    font-weight: var(--admin-font-medium);
    line-height: 1.45;
    text-align: left;
    cursor: pointer;
    transition: background .12s, color .12s;
    -webkit-tap-highlight-color: transparent;
}

.paw-admin .md-list .item-row:hover {
    background: var(--admin-row-stripe);
}

.paw-admin .md-list .item-row.active {
    background: var(--admin-tint);
    color: var(--admin-label);
    font-weight: var(--admin-font-semibold);
}

.paw-admin .md-list .item-row .label-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.paw-admin .md-list .item-row .chev {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    display: inline-grid;
    place-items: center;
    margin-left: auto;
    color: var(--admin-muted);
    line-height: 1;
}

.paw-admin .md-list .item-row.active .chev {
    color: var(--admin-label);
}

.paw-admin .md-detail {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--admin-page-bg);
}

/* Shared master/detail empty state from Prototype 41. Prototype-owned detail
   components use .md-pane directly when no record is selected, so this lives
   with the md-* shell rather than in an individual page/component stylesheet. */
.paw-admin .md-pane {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    display: grid;
    place-items: center;
    justify-content: center;
    padding: 40px;
    border-radius: var(--admin-radius-sm);
    background: var(--admin-row-stripe);
    color: var(--admin-muted);
    text-align: center;
}

.paw-admin .md-pane .paw {
    display: block;
    margin-bottom: 12px;
    font-size: 52px;
    line-height: 1;
    opacity: .4;
}

.paw-admin .md-pane h3 {
    margin: 0 0 6px;
    color: var(--admin-heading);
    font-family: var(--admin-font-heading);
    font-size: var(--admin-font-lg);
    font-weight: var(--admin-font-semibold);
}

.paw-admin .md-pane p {
    margin: 0;
    color: var(--admin-muted);
    font-size: var(--admin-font-sm);
    line-height: 1.55;
}

/* Keep prototype-owned detail panes bounded by the available workspace rather
   than by their intrinsic content height. `flex-basis: 0` is important here:
   tall settings groups (notably Rules) must give the available height to the
   pane/body first, then let `.detail-body` scroll. With an `auto` basis the
   content height can participate in flex sizing and the intended nested
   scroller may expand past the clipped master/detail host. */
.paw-admin .detail-pane {
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.paw-admin .detail-body {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 24px 34px 14px;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
}

.paw-admin .detail-skeleton {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 24px 34px 14px;
}

.paw-admin .mobile-detail-bar {
    display: none;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 8px 14px;
    border-bottom: 1px solid var(--admin-tint-strong);
    background: var(--admin-tint);
    flex-shrink: 0;
}

.paw-admin .mobile-detail-bar > button {
    display: flex;
    align-items: center;
    padding: 4px;
    border: 0;
    background: none;
    color: var(--admin-label);
    cursor: pointer;
}

.paw-admin .mobile-detail-title {
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    color: var(--admin-label);
    font-family: var(--admin-font-heading);
    font-size: var(--admin-font-base);
    font-weight: var(--admin-font-semibold);
    line-height: 1.3;
}

.paw-admin .mobile-detail-title .mdt-sep {
    color: var(--admin-muted);
    font-weight: var(--admin-font-regular);
}

.paw-admin .mobile-detail-title .mdt-record {
    color: var(--admin-text);
    font-weight: var(--admin-font-medium);
}

/* Prototype 145 list/detail phone header. Master/detail screens use two quiet
   lines rather than the old inline breadcrumb: the list/section context is
   muted above the currently edited record, which remains the dominant teal
   label. Scope this to ItemDetailPanel's modifier so nested editor bars (for
   example Customise) keep their existing compact one-line geometry. */
.paw-admin .mobile-detail-bar.mobile-list-detail-bar {
    min-height: 56px;
    padding: 7px 14px;
}

.paw-admin .mobile-list-detail-bar .mobile-detail-title {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 1px;
    line-height: 1.15;
}

.paw-admin .mobile-list-detail-bar .mobile-detail-title .mdt-section {
    color: var(--admin-muted);
    font-size: var(--admin-font-xs);
    font-weight: var(--admin-font-regular);
    line-height: 1.1;
}

.paw-admin .mobile-list-detail-bar .mobile-detail-title .mdt-record {
    color: var(--admin-label);
    font-size: var(--admin-font-base);
    font-weight: var(--admin-font-semibold);
    line-height: 1.15;
}

/* Integration-specific non-prototype state text. The geometry remains owned by
   the prototype .page-actions primitive. */
.paw-admin .integration-save-message {
    margin-right: auto;
    color: var(--admin-success, #2f8f5b);
    font-size: var(--admin-font-sm);
}

.paw-admin .integration-save-message.is-error {
    color: var(--admin-danger);
}

.paw-admin .integration-list-skeleton {
    display: grid;
    gap: 12px;
    padding: 20px 18px;
}

.paw-admin .integration-list-skeleton .skeleton-line {
    width: 82%;
    height: 14px;
}

@media (min-width: 701px) and (max-width: 860px) {
    .paw-admin .md-page .md-layout {
        margin: 14px 16px;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        overflow: visible;
        gap: 14px;
    }

    .paw-admin .md-list,
    .paw-admin .md-pane,
    .paw-admin .md-page .page-actions {
        background: var(--admin-surface);
        border: 1px solid var(--admin-border);
        border-radius: var(--admin-radius);
        box-shadow: var(--admin-shadow-card);
    }

    .paw-admin .md-list {
        width: 260px;
        border-right: 0;
    }

    .paw-admin .detail-pane {
        gap: 14px;
    }

    .paw-admin .detail-body,
    .paw-admin .detail-skeleton {
        padding: 0 4px;
        background: transparent;
    }
}

@media (max-width: 700px) {
    .paw-admin .md-page .md-layout {
        position: relative;
        margin: 0;
        border-left: 0;
        border-right: 0;
        border-bottom: 0;
        border-radius: 0;
        box-shadow: none;
        overflow: hidden;
    }

    .paw-admin .md-list {
        width: 100%;
        border-right: 0;
    }

    .paw-admin .md-detail {
        position: fixed;
        top: var(--admin-header-height);
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 88;
        width: auto;
        height: auto;
        background: var(--admin-surface);
        transform: translateX(100%);
        transition: transform .26s ease;
    }

    .paw-admin .md-layout.detail-open .md-detail {
        transform: translateX(0);
    }

    /* Prototype 85 full-screen phone detail contract. The prototype's
       detail-cluster layer hides the app header and moves the actual detail
       slide-over to top:0; it does not leave a reserved header/tab band above
       the record. Keep that ownership on the detail screen itself so the same
       rule works for Customise and ordinary list/detail pages without page-
       specific negative offsets. */
    .paw-admin:has(.mobile-detail-screen.mobile-detail-open) {
        --admin-tabs-height: 0px;
        --secondary-tabs-h: 0px;
        --nav-bottom: 0px;
    }

    .paw-admin:has(.mobile-detail-screen.mobile-detail-open) .admin-header-shell,
    .paw-admin:has(.mobile-detail-screen.mobile-detail-open) .sub-tabs {
        display: none !important;
    }

    .paw-admin:has(.mobile-detail-screen.mobile-detail-open) .admin-workspace,
    .paw-admin:has(.mobile-detail-screen.mobile-detail-open) .admin-content-region,
    .paw-admin:has(.mobile-detail-screen.mobile-detail-open) .admin-page-host {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    .paw-admin .mobile-detail-screen.mobile-detail-open {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        z-index: 102;
        width: 100vw !important;
        height: 100dvh !important;
        min-height: 100dvh;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: translateX(0) !important;
    }

    .paw-admin .mobile-detail-screen.mobile-detail-open > .detail-pane {
        width: 100%;
        height: 100%;
        min-height: 0;
        margin: 0 !important;
    }

    /* A full-screen mobile detail always has its own Back control. Footer
       Cancel is therefore redundant on this pattern; desktop Cancel remains
       untouched, as do Cancel actions inside confirmation dialogs. */
    .paw-admin .mobile-detail-screen.mobile-detail-open .mobile-cancel-action {
        display: none !important;
    }

    /* Prototype 85's persistent bottom Preview peek, generalized for any
       auxiliary mobile detail surface. It is fixed rather than an in-flow
       footer: the form/card continues behind it and the floating Save cluster
       crosses its top edge. Grip and label share one row exactly like
       `.cust-preview-peek` in the prototype. */
    .paw-admin .mobile-detail-bottom-rail {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 91;
        width: 100%;
        height: 40px;
        min-height: 40px;
        padding: 6px 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        border: 0;
        border-top: 1px solid var(--admin-tint-strong);
        border-radius: 12px 12px 0 0;
        background: var(--admin-surface);
        box-shadow: 0 -6px 24px rgba(0, 0, 0, .12);
        color: var(--admin-label);
        font: inherit;
        font-size: var(--admin-font-sm);
        font-weight: var(--admin-font-medium);
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .paw-admin .mobile-detail-bottom-rail__handle {
        position: static;
        flex: 0 0 34px;
        width: 34px;
        height: 4px;
        border-radius: 2px;
        background: var(--admin-tint-strong);
        transform: none;
    }

    .paw-admin .mobile-detail-bottom-rail__label {
        line-height: 1;
    }

    /* Prototype 85 turns the real detail footer into the floating cluster; it
       does not reserve a white footer row. Scope this to the reusable mobile
       detail-screen contract so other migrated list/detail pages can use the
       same Save/Back geometry. No JavaScript measurement is needed: compatible
       detail bodies already reserve the shared mobile action inset. */
    .paw-admin .mobile-detail-screen.mobile-detail-open .page-actions.mobile-floating-actions {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 92;
        width: 100%;
        min-height: 0;
        margin: 0;
        padding: 20px 14px calc(14px + env(safe-area-inset-bottom, 0px));
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 10px;
        border-top: 0;
        background: transparent;
        pointer-events: none;
    }

    .paw-admin .mobile-detail-screen.mobile-detail-open .page-actions.mobile-floating-actions > * {
        pointer-events: auto;
    }

    .paw-admin .mobile-detail-screen.mobile-detail-open .page-actions.mobile-floating-actions > .action-error {
        flex: 1 1 100%;
        order: -1;
        margin: 0 0 8px;
        padding: 9px 10px;
        border: 0;
        border-radius: var(--admin-radius-card);
        background: #fff;
        box-shadow: 0 4px 12px rgba(16, 42, 50, .16);
    }

    .paw-admin .mobile-detail-screen.mobile-detail-open .page-actions.mobile-floating-actions > .action-lead {
        margin-right: auto;
    }

    .paw-admin .mobile-detail-screen.mobile-detail-open .page-actions.mobile-floating-actions > .btn.ma-fab,
    .paw-admin .mobile-detail-screen.mobile-detail-open .page-actions.mobile-floating-actions > .btn.ma-fab-sm {
        margin: 0 !important;
        align-self: center;
    }

    /* A fixed 40px peek must still be accounted for by the detail content. The
       rail itself stays out of flow so the Save circle can visibly straddle the
       card/peek boundary, as in Prototype 85. */
    .paw-admin .mobile-detail-screen.mobile-detail-open > .detail-pane:has(> .mobile-detail-bottom-rail) {
        padding-bottom: 40px;
    }

    .paw-admin .mobile-detail-bottom-rail:focus-visible {
        outline: 2px solid var(--admin-primary);
        outline-offset: -2px;
    }

    /* An opened auxiliary sheet owns the whole screen. The shared Save action
       and its trigger rail belong to the detail pane behind it. */
    .paw-admin .bfe-mobile-preview-open > .page-actions.mobile-floating-actions,
    .paw-admin .bfe-mobile-preview-open > .mobile-detail-bottom-rail {
        display: none !important;
    }

   .paw-admin .mobile-detail-bar {
        display: flex;
    }

    .paw-admin .detail-body,
    .paw-admin .detail-skeleton {
        padding: 0;
    }

    .paw-admin .md-detail .card {
        margin: 0;
        border-left: 0;
        border-right: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .paw-admin .md-page .page-actions {
        margin: 0;
        padding: 8px 18px calc(8px + env(safe-area-inset-bottom, 0px));
    }

    /* Match the prototype: returning to the list also clears the visual
       selection because no detail is currently on screen. */
    .paw-admin .md-layout:not(.detail-open) .item-row.active {
        background: transparent;
        color: var(--admin-text);
        font-weight: var(--admin-font-medium);
    }

    .paw-admin .md-layout:not(.detail-open) .item-row.active .chev {
        color: var(--admin-muted);
    }
}

/* Shared optional bottom rail for full-screen phone detail panes. The rail is
   deliberately hidden outside phone layouts. It participates in normal flex
   flow, so a page can reserve real height for an auxiliary view trigger while
   the standard floating Save action overlaps the rail/card boundary. */
@media (min-width: 701px) {
    .paw-admin .mobile-detail-bottom-rail {
        display: none;
    }
}

/* ---------- Prototype 153 confirmation dialogs ----------
   Shared by ordinary confirmation prompts and UnsavedChangesGuard. Prototype
   153 supersedes the older three-band dialog with the selected "brand" look:
   primary-colour rule, white surface, teal title, tinted safe action and a red
   destructive action. The same content becomes a thumb-reachable sheet on a
   phone; callers keep their existing wording/behavior. */
.paw-admin .admin-confirm-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10020;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(16, 42, 50, .38);
}

/* Some non-confirmation overlays (for example the Breed mapping picker) reuse
   the backdrop utility without an .admin-confirm-dialog. Keep their existing
   backdrop behavior; Prototype 153's lighter confirmation scrim applies only
   to actual confirmation prompts. */
.paw-admin .admin-confirm-backdrop:has(> .admin-confirm-dialog) {
    background: rgba(16, 42, 50, .32);
}

.paw-admin .admin-confirm-dialog {
    width: min(420px, calc(100% - 40px));
    padding: 22px;
    overflow: hidden;
    background: var(--admin-surface);
    border-top: 3px solid var(--admin-primary);
    border-radius: var(--admin-radius-card);
    box-shadow: 0 16px 44px rgba(0, 0, 0, .22);
    animation: admin-confirm-in .16s ease-out;
}

@keyframes admin-confirm-in {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.paw-admin .admin-confirm-dialog > h3 {
    margin: 0 0 6px;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--admin-label);
    font-family: var(--admin-font-heading);
    font-size: var(--admin-font-lg);
    font-weight: var(--admin-font-semibold);
    line-height: 1.3;
    text-align: left;
}

.paw-admin .admin-confirm-dialog > p {
    margin: 0 0 16px;
    padding: 0;
    color: var(--admin-chrome-label);
    font-family: var(--admin-font-family);
    font-size: var(--admin-font-sm);
    line-height: 1.5;
    text-align: left;
}

.paw-admin .admin-confirm-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 0;
    border: 0;
    background: transparent;
}

.paw-admin .admin-confirm-actions .btn {
    min-height: 40px;
    padding: 0 16px;
    border-radius: var(--admin-radius-sm);
    font-family: var(--admin-font-family);
    font-size: var(--admin-font-sm);
    font-weight: var(--admin-font-semibold);
}

/* The safe confirmation action uses the same brand tint as Prototype 153's
   `ac-cancel`, independent of the ordinary solid admin Cancel button token. */
.paw-admin .admin-confirm-actions .btn-dark,
.paw-admin .admin-confirm-actions .btn-neutral,
.paw-admin .admin-confirm-actions .btn-gray {
    color: var(--admin-label);
    background: var(--admin-tint);
    border-color: var(--admin-tint-strong);
    box-shadow: none;
}

.paw-admin .admin-confirm-actions .btn-dark:hover,
.paw-admin .admin-confirm-actions .btn-neutral:hover,
.paw-admin .admin-confirm-actions .btn-gray:hover {
    color: var(--admin-label);
    background: var(--admin-tint-strong);
    border-color: var(--admin-tint-strong);
    filter: none;
}

.paw-admin .admin-confirm-actions .btn-danger,
.paw-admin .admin-confirm-actions .btn-danger-sm,
.paw-admin .admin-confirm-actions .btn-red {
    color: #fff;
    background: var(--admin-danger);
    border-color: var(--admin-danger);
    box-shadow: none;
}

.paw-admin .admin-confirm-actions .btn:focus-visible {
    outline: 2px solid var(--admin-primary);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .paw-admin .admin-confirm-dialog {
        animation: none;
    }
}

@media (max-width: 700px) {
    .paw-admin .admin-confirm-backdrop:has(> .admin-confirm-dialog) {
        align-items: flex-end;
        padding: 0;
    }

    .paw-admin .admin-confirm-dialog {
        width: 100%;
        max-width: none;
        padding: 8px 18px calc(18px + env(safe-area-inset-bottom, 0px));
        border-radius: var(--admin-radius-card) var(--admin-radius-card) 0 0;
        box-shadow: 0 -6px 30px rgba(16, 42, 50, .22);
        animation-name: admin-confirm-sheet-in;
    }

    /* The prototype sheet owns an explicit grip element. Shared Blazor
       confirmation markup predates it, so render the same visual without
       introducing duplicate grip markup across every caller. */
    .paw-admin .admin-confirm-dialog::before {
        content: '';
        display: block;
        width: 36px;
        height: 4px;
        margin: 4px auto 14px;
        border-radius: var(--admin-radius-pill);
        background: var(--admin-border);
    }

    @keyframes admin-confirm-sheet-in {
        from {
            opacity: 0;
            transform: translateY(16px);
        }

        to {
            opacity: 1;
            transform: none;
        }
    }

    .paw-admin .admin-confirm-actions {
        flex-direction: column-reverse;
        gap: 8px;
    }

    .paw-admin .admin-confirm-actions .btn {
        width: 100%;
        min-width: 0;
        min-height: 50px;
    }
}

/* ========================================================================== 
   Phase 2.14 — prototype Styles page + shared colour picker
   ========================================================================== */

/* Settings footers follow the prototype validation-row contract: messages get
   their own full-width line above the actions instead of squeezing buttons. */
.paw-admin .page-actions {
    flex-wrap: wrap;
}

.paw-admin .action-error {
    flex: 1 0 100%;
    order: -1;
    min-width: 0;
    color: var(--admin-danger);
    font-size: var(--admin-font-sm);
    font-weight: var(--admin-font-medium);
    line-height: 1.35;
}

.paw-admin .action-error.validation-navigator-host { display: flex; }

.paw-admin .validation-navigator {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    min-width: 0;
}

.paw-admin .validation-nav-icon {
    display: inline-grid;
    place-items: center;
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #FDEEEF;
    color: var(--admin-danger);
    font-size: 12px;
    font-weight: var(--admin-font-bold);
}

.paw-admin .validation-nav-copy { min-width: 0; flex: 1 1 auto; }
.paw-admin .validation-nav-title { display: block; color: var(--admin-danger); font-weight: var(--admin-font-semibold); }
.paw-admin .validation-nav-message { display: block; margin-top: 2px; color: var(--admin-text); font-weight: var(--admin-font-regular); }
.paw-admin .validation-nav-controls { display: inline-flex; flex: 0 0 auto; gap: 5px; margin-left: 6px; }

.paw-admin .validation-nav-button {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid #E9B5BA;
    border-radius: 50%;
    background: #fff;
    color: var(--admin-danger);
    cursor: pointer;
}

.paw-admin .validation-nav-button svg { width: 15px; height: 15px; }
.paw-admin .validation-nav-button:hover:not(:disabled) { background: #FFF7F8; border-color: var(--admin-danger); }
.paw-admin .validation-nav-button:focus-visible { outline: 2px solid var(--admin-danger); outline-offset: 2px; }
.paw-admin .validation-nav-button:disabled { opacity: .35; cursor: default; }

/* Read-only value + compact action, shared with the prototype's URL/file-name
   fields. */
.paw-admin .url-field {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.paw-admin .url-field input {
    min-width: 0;
    flex: 1;
    background: var(--admin-row-stripe);
    color: var(--admin-text);
    cursor: text;
}

.paw-admin .url-field .icon-btn {
    flex: 0 0 34px;
}

.paw-admin .url-field .icon-btn.copied {
    background: var(--admin-success-bg);
    border-color: var(--admin-success-border);
    color: var(--admin-success);
}

.paw-admin .url-field .icon-btn:disabled {
    opacity: .45;
    cursor: not-allowed;
}

/* Prototype colour field. The native picker remains the no-network fallback;
   adminColorPicker.js reveals .color-swatch only after Vanilla Picker loads. */
.paw-admin .color-field {
    display: flex;
    align-items: center;
    gap: 10px;
}

.paw-admin .color-field input[type="color"],
.paw-admin .color-swatch {
    width: 44px;
    height: 40px;
    flex: 0 0 44px;
    padding: 4px;
    border: 1px solid var(--admin-border-control);
    border-radius: 10px;
    background: var(--admin-surface);
    cursor: pointer;
}

.paw-admin .color-swatch {
    position: relative;
    display: none;
}

.paw-admin .color-field.custom-picker-ready .color-swatch {
    display: block;
}

.paw-admin .color-field.custom-picker-ready > input[type="color"] {
    display: none;
}

.paw-admin .color-swatch:focus-visible {
    outline: none;
    border-color: var(--admin-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--admin-primary) 18%, transparent);
}

.paw-admin .color-swatch > span {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 7px;
    box-shadow: inset 0 0 0 1px rgba(16,42,50,.12);
}

.paw-admin .color-field input[type="text"] {
    min-width: 0;
    flex: 1;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    text-transform: uppercase;
}

/* Clinic > Styles now consumes the shared prototype .grid-table.flow rules
   directly. No page-specific live table selector is required here. */

/* Vanilla Picker is mounted in a body-level portal so third-party DOM stays
   out of Blazor's render tree. The portal is only a mount. The popup itself is
   position:fixed and adminColorPicker.js calculates its viewport coordinates
   directly from the real swatch, matching the prototype colour-picker / Copy
   Day anchoring contract. */
.admin-color-picker-portal {
    position: fixed;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    z-index: 10010;
    overflow: visible;
    pointer-events: none;
    font-family: var(--admin-font-family, 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif);
}

.admin-color-picker-portal .picker_wrapper {
    background: var(--admin-surface, #fff);
    color: var(--admin-text, #3f4a4f);
    font-family: var(--admin-font-family, 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif);
    border-radius: var(--admin-radius-card, 16px);
    box-shadow: 0 0 0 1px var(--admin-border, #e4eaec);
}

.admin-color-picker-portal .layout_default.picker_wrapper {
    width: 27em;
    padding: 1em;
}

.admin-color-picker-portal .picker_wrapper.popup {
    /* Vanilla Picker writes absolute left/top values when it opens. The
       prototype intentionally replaces that with fixed viewport positioning
       calculated from the real field rect. JS owns left/top; these rules own
       only the positioning mode and visual layer. */
    position: fixed !important;
    right: auto;
    bottom: auto;
    margin: 0 !important;
    z-index: 10010 !important;
    pointer-events: auto;
    background: var(--admin-surface, #fff);
    border-radius: var(--admin-radius-card, 16px);
    box-shadow: 0 10px 32px rgba(20,60,70,.18), 0 0 0 1px var(--admin-border, #e4eaec);
}

/* The prototype treats the colour picker differently by viewport:
   desktop is an anchored popover with no dimmed page; mobile is a modal
   bottom sheet with a backdrop. The element exists at all sizes so the same
   JS lifecycle can be reused, but it is only rendered below the breakpoint. */
.admin-color-picker-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10009;
    display: none;
    background: rgba(16, 42, 50, .28);
}

/* Body overflow alone is not enough for the Admin shell because several pages
   scroll inside nested regions; JS also cancels wheel/touch gestures outside
   the open panel. These rules stop viewport/shell overscroll and scrollbar
   movement while the modal picker is active. */
html.admin-color-picker-locked,
html.admin-color-picker-locked body {
    overflow: hidden !important;
    overscroll-behavior: none;
}

/* FullPanelRouter and several Admin screens scroll inside nested containers,
   so locking html/body alone cannot freeze the page. JS tags every scrollable
   ancestor of the active colour field while the picker is open. This also
   prevents dragging a background scrollbar thumb, not only wheel/touch input. */
.admin-color-picker-scroll-locked {
    overflow: hidden !important;
    overscroll-behavior: none !important;
}

.admin-color-picker-portal .picker_arrow {
    display: none;
}

.admin-color-picker-portal .picker_sl,
.admin-color-picker-portal .picker_alpha,
.admin-color-picker-portal .picker_sample {
    border-radius: var(--admin-radius-sm, 8px);
    box-shadow: 0 0 0 1px var(--admin-border, #e4eaec);
}

.admin-color-picker-portal .picker_hue {
    border-radius: var(--admin-radius-pill, 999px);
    box-shadow: 0 0 0 1px var(--admin-border, #e4eaec);
}

.admin-color-picker-portal .picker_selector {
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(16,42,50,.15), 0 1px 4px rgba(16,42,50,.25);
}

.admin-color-picker-portal .picker_slider .picker_selector {
    border-radius: var(--admin-radius-pill, 999px);
}

.admin-color-picker-portal .picker_editor input {
    color: var(--admin-text, #3f4a4f);
    background: var(--admin-surface, #fff);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: var(--admin-font-sm, 13px);
    text-transform: uppercase;
    border-radius: var(--admin-radius-input, 10px);
    box-shadow: 0 0 0 1px var(--admin-border-control, #dde6e7);
    padding: .6em .7em;
}

.admin-color-picker-portal .picker_wrapper input:focus,
.admin-color-picker-portal .picker_wrapper input:active {
    outline: none;
    box-shadow: 0 0 0 1px var(--admin-primary, #11BCC3),
                0 0 0 3px color-mix(in srgb, var(--admin-primary, #11BCC3) 18%, transparent);
}

.admin-color-picker-portal .picker_wrapper button {
    border: 0;
    background: var(--admin-action-primary, #11BCC3);
    background-image: none;
    color: var(--admin-action-primary-text, #fff);
    font-family: var(--admin-font-family, 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif);
    font-size: var(--admin-font-sm, 13px);
    font-weight: var(--admin-font-semibold, 600);
    line-height: 1;
    padding: .95em 1.8em;
    border-radius: var(--admin-radius-input, 10px);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--admin-primary, #11BCC3) 35%, transparent);
    transition: filter .15s, transform .1s;
}

.admin-color-picker-portal .picker_wrapper button:hover {
    background: var(--admin-action-primary, #11BCC3);
    background-image: none;
    filter: brightness(.95);
}

.admin-color-picker-portal .picker_wrapper button:active {
    background-image: none;
    transform: translateY(1px);
}

.admin-color-picker-portal .picker_wrapper button:focus-visible {
    outline: none;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--admin-primary, #11BCC3) 35%, transparent),
                0 0 0 3px color-mix(in srgb, var(--admin-primary, #11BCC3) 30%, transparent);
}

@media (max-width: 860px) {
    /* Exact prototype settings-table mobile contract. A .flow table is a list
       of settings groups, so rows become divided sections rather than boxed
       records. */
    .paw-admin .grid-table.flow thead {
        display: none;
    }

    .paw-admin .grid-table.flow,
    .paw-admin .grid-table.flow tbody {
        display: block;
        width: 100%;
    }

    .paw-admin .grid-table.flow tr {
        display: block;
        width: 100%;
        margin: 0;
        padding: 20px 0;
        border: 0;
        border-bottom: 1px solid var(--admin-border);
        border-radius: 0;
    }

    .paw-admin .grid-table.flow tr:first-child {
        padding-top: 0;
    }

    .paw-admin .grid-table.flow tr:last-child {
        padding-bottom: 0;
        border-bottom: 0;
    }

    .paw-admin .grid-table.flow td {
        display: block;
        width: 100%;
        padding: 14px 0 0;
        border: 0;
    }

    .paw-admin .grid-table.flow td:first-child {
        padding-top: 0;
    }

    .paw-admin .grid-table.flow td:empty {
        display: none;
    }

    .paw-admin .grid-table.flow td[data-label]::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 6px;
        color: var(--label-color);
        font-size: var(--admin-font-xs);
        font-weight: var(--admin-font-semibold);
        letter-spacing: .06em;
        text-transform: uppercase;
    }

    .paw-admin .grid-table.flow .color-field,
    .paw-admin .grid-table.flow input[type="text"],
    .paw-admin .grid-table.flow select {
        max-width: none;
    }
}

@media (max-width: 700px) {
    .admin-color-picker-portal .picker_wrapper.popup {
        position: fixed !important;
        left: 12px !important;
        right: 12px !important;
        bottom: 12px !important;
        top: auto !important;
        width: auto !important;
        max-width: none !important;
        max-height: calc(100dvh - 24px);
        overflow-y: auto;
        z-index: 10010 !important;
        margin: 0 !important;
        box-shadow: 0 -6px 30px rgba(16, 42, 50, .22) !important;
    }

    .admin-color-picker-portal .picker_sl {
        min-height: 150px;
    }

    .admin-color-picker-portal .picker_wrapper button {
        padding: 1.2em 2em;
    }

}

/* ========================================================================== 
   Phase 2.27 — prototype full-panel form primitives
   These are direct prototype class ports shared by the remaining Clinic forms.
   ========================================================================== */

.paw-admin .btn.btn-saving {
    opacity: .75;
    pointer-events: none;
    cursor: not-allowed;
}

.paw-admin .btn-spinner {
    display: inline-block;
    width: 10px;
    height: 10px;
    flex-shrink: 0;
    border: 2px solid rgba(255, 255, 255, .4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: admin-btn-spin .6s linear infinite;
}

@keyframes admin-btn-spin {
    to { transform: rotate(360deg); }
}

.paw-admin .toggle-row.disabled {
    opacity: .55;
    cursor: not-allowed;
}

.paw-admin .toggle-row.disabled:hover {
    background: transparent;
}

/* Shared settings-page skeleton family from the prototype. */
@keyframes admin-skeleton-shimmer {
    0% { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}

.paw-admin .skeleton {
    display: block;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--admin-skeleton-base) 25%, var(--admin-skeleton-highlight) 37%, var(--admin-skeleton-base) 63%);
    background-size: 400px 100%;
    animation: admin-skeleton-shimmer 1.4s ease infinite;
}

.paw-admin .skeleton-title { height: 20px; width: 40%; margin-bottom: 18px; }
.paw-admin .skeleton-line { height: 13px; width: 100%; margin-bottom: 10px; }
.paw-admin .skeleton-line:last-child { margin-bottom: 0; }
.paw-admin .skeleton-line.w-50 { width: 50%; }
.paw-admin .skeleton-line.w-70 { width: 70%; }
.paw-admin .skeleton-input { height: 44px; border-radius: 10px; margin-bottom: 18px; }
.paw-admin .skeleton-textarea { height: 76px; border-radius: 10px; margin-bottom: 18px; }
.paw-admin .skeleton-toggle-row { height: 68px; border-radius: var(--admin-radius-sm); margin-bottom: 10px; }
.paw-admin .skeleton-toggle-row:last-child { margin-bottom: 0; }

.paw-admin .skeleton-card {
    width: 100%;
    margin-bottom: 22px;
    padding: 28px 32px;
    border-radius: var(--admin-radius-card);
    background: var(--admin-surface);
    box-shadow: 0 6px 24px rgba(20, 60, 70, .06);
}

.paw-admin .skeleton-card:last-child { margin-bottom: 0; }

.paw-admin .skeleton-card > .skeleton-card-head:first-child {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: -28px -32px 22px;
    padding: 8px 18px;
    border-bottom: 1px solid var(--admin-border);
    border-radius: var(--admin-radius-card) var(--admin-radius-card) 0 0;
    background: var(--admin-row-stripe);
}

.paw-admin .skeleton-card-head .skeleton-chip {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border-radius: 6px;
}

.paw-admin .skeleton-card-head .skeleton-bar {
    width: 120px;
    height: 9px;
}

.paw-admin .skeleton-field-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 28px;
    margin-bottom: 4px;
}

/* Shared silhouette skeleton primitives. These mirror the same full-width
   settings-page, form-grid and toggle-grid geometry used by the loaded page,
   so skeletons naturally follow future workspace-width changes. */
.paw-admin .admin-page-skeleton,
.paw-admin .admin-page-skeleton__content {
    width: 100%;
    max-width: none;
    min-width: 0;
}

.paw-admin .skeleton-card-desc {
    width: min(620px, 58%);
    margin-bottom: 20px;
}

.paw-admin .skeleton-setting-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
}

.paw-admin .skeleton-setting-row {
    min-width: 0;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    border-radius: var(--admin-radius-sm);
}

.paw-admin .skeleton-setting-label {
    width: clamp(110px, 34%, 220px);
    height: 11px;
    margin: 0;
}

.paw-admin .skeleton-switch {
    width: 38px;
    height: 22px;
    flex: 0 0 38px;
    margin: 0;
    border-radius: 999px;
}

.paw-admin .skeleton-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 28px;
    margin-top: 22px;
}

.paw-admin .skeleton-field {
    min-width: 0;
}

.paw-admin .skeleton-field-label {
    width: min(180px, 42%);
    height: 10px;
    margin-bottom: 8px;
}

.paw-admin .skeleton-field-control {
    width: 100%;
    height: 44px;
    margin: 0;
    border-radius: var(--admin-radius-input);
}

.paw-admin .skeleton-info-note {
    width: 100%;
    min-height: 76px;
    margin: 0;
    border-radius: var(--admin-radius-sm);
}

/* Test API uses the same prototype field/code primitives. */
.paw-admin .pims-tag {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 6px;
    border: 1px solid var(--admin-border-strong);
    border-radius: 6px;
    color: var(--admin-muted);
    font-size: 10px;
    font-weight: var(--admin-font-semibold);
    letter-spacing: .5px;
    vertical-align: middle;
}

.paw-admin .code-block {
    position: relative;
    max-width: 100%;
    padding: 16px 44px 16px 16px;
    overflow-x: auto;
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius-sm);
    background: var(--admin-row-stripe);
}

.paw-admin .field-highlight,
.paw-admin textarea.field-highlight,
.paw-admin .code-block.field-highlight {
    border-color: #F0E4A8;
    background: #FFFCEB;
}

.paw-admin .code-block pre {
    margin: 0;
    color: var(--admin-text);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12.5px;
    line-height: 1.7;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.paw-admin .code-block.code-result { min-height: 160px; }
.paw-admin .input-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--admin-font-sm); }
.paw-admin .int-muted { color: var(--admin-muted); }

.paw-admin .info-note {
    padding: 16px;
    border-radius: var(--admin-radius-sm);
    background: var(--admin-row-stripe);
}

.paw-admin .info-note strong {
    display: block;
    margin-bottom: 4px;
    color: var(--admin-heading);
    font-size: var(--admin-font-sm);
}

.paw-admin .info-note span {
    color: var(--admin-muted);
    font-size: var(--admin-font-sm);
    line-height: 1.5;
}

@media (max-width: 860px) {
    .paw-admin .skeleton-card {
        padding: 22px 18px;
    }

    .paw-admin .skeleton-card > .skeleton-card-head:first-child {
        margin: -22px -18px 18px;
    }

    .paw-admin .skeleton-field-grid,
    .paw-admin .skeleton-setting-grid,
    .paw-admin .skeleton-form-grid {
        grid-template-columns: 1fr;
    }

    .paw-admin .skeleton-card-desc {
        width: 78%;
    }
}


/* ==========================================================================
   Prototype grouped-list multi-select controls
   Shared globally because both GroupedListPanel-owned rows and reusable child
   ItemListRow components render the exact same .bulk-check primitive.
   ========================================================================== */
.paw-admin .bulk-check,
.paw-admin .bulk-group-check {
    place-items: center;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    margin: -2px;
    padding: 0;
    border: 2px solid var(--border);
    border-radius: 50%;
    background: #fff;
    color: #fff;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.paw-admin .bulk-check {
    display: none;
}

.paw-admin .bulk-check.on,
.paw-admin .bulk-group-check.on {
    background: var(--tint);
    border-color: var(--primary-color);
    color: var(--primary-color-label);
}

.paw-admin .bulk-group-check.some {
    background: var(--tint);
    border-color: var(--primary-color);
}

.paw-admin .bulk-group-check.some svg {
    display: none;
}

.paw-admin .bulk-group-check.some::after {
    content: "";
    width: 9px;
    height: 2px;
    border-radius: 1px;
    background: var(--primary-color-label);
}

.paw-admin .bulk-check svg,
.paw-admin .bulk-group-check svg {
    width: 12px;
    height: 12px;
}

.paw-admin .bulk-check path,
.paw-admin .bulk-group-check path {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0;
}

.paw-admin .bulk-check.on path,
.paw-admin .bulk-group-check.on path {
    opacity: 1;
}

.paw-admin .item-row.bulk-mode > .bulk-check {
    display: inline-grid;
}

.paw-admin .bulk-check--hidden {
    visibility: hidden;
    pointer-events: none;
}

@media (max-width: 700px) {
    .paw-admin .bulk-check svg,
    .paw-admin .bulk-group-check svg {
        width: 14px;
        height: 14px;
    }
}

/* ==========================================================================
   Prototype 27 grouped-list contract
   --------------------------------------------------------------------------
   Shared visual source of truth for every GroupedListPanel. Blazor owns
   search/selection/drag state; these exact prototype classes own geometry.
   Component-isolated CSS is intentionally limited to behavior adapters.
   ========================================================================== */
.paw-admin .md-list[data-grouped-list] {
    position: relative;
    /* Geometry deliberately comes from the shared .md-list contract above.
       Grouped-list styling must not override the prototype's 320 / 260 / 100%
       master-rail breakpoints. */
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    /* Prototype 27 keeps the column itself overflow-visible: the list body is
       the scroller, while desktop filter/bulk popovers may extend into the
       adjacent detail area. */
    overflow: visible;
    border-right: 1px solid var(--border);
    background: #fff;
}

.paw-admin .md-list-toolbar {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    padding: 12px 12px 10px;
    border-bottom: 1px solid var(--border);
    background: #fff;
}

.paw-admin .md-list-toolbar .searchbar {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
}

.paw-admin .md-list-toolbar .searchbar input {
    width: 100%;
    min-width: 0;
    padding: 9px 36px 9px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--text-color);
    font: inherit;
    font-size: var(--fs-sm);
    line-height: 1.35;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}

.paw-admin .md-list-toolbar .searchbar input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px var(--tint);
}

.paw-admin .md-list-toolbar .searchbar input::placeholder {
    color: var(--muted);
}

/* The prototype uses a span for the decorative icon. Blazor keeps it a button
   so an explicit search action remains keyboard accessible. The same .ico
   class owns its visual placement. */
.paw-admin .md-list-toolbar .searchbar .ico {
    position: absolute;
    top: 50%;
    right: 8px;
    width: 24px;
    height: 24px;
    transform: translateY(-50%);
    display: inline-grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
}

.paw-admin .md-list-toolbar .searchbar .ico:hover,
.paw-admin .md-list-toolbar .searchbar .ico:focus-visible {
    color: var(--primary-color-label);
    background: var(--tint);
}

.paw-admin .md-list-toolbar .icon-btn {
    width: 36px;
    height: 36px;
    min-width: 36px;
    margin: 0;
    flex: 0 0 36px;
    background: var(--tint);
    color: var(--primary-color-label);
}

.paw-admin .md-list-toolbar .icon-btn:hover {
    background: var(--tint-strong);
}

.paw-admin .md-list-toolbar .icon-btn.bulk-toggle.on {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--primary-color-text);
}

/* HeaderActionItems are a Blazor extension point. They keep prototype button
   chrome but may grow horizontally when a caller intentionally supplies text. */
.paw-admin .md-list-toolbar .icon-btn.gl-lh-action {
    width: auto;
    min-width: 36px;
    max-width: 132px;
    flex: 0 1 auto;
}

.paw-admin .md-list-items[data-grouped-list-items] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 6px 12px 12px;
    user-select: none;
    -webkit-user-select: none;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
}

.paw-admin .md-list-items[data-grouped-list-items] *,
.paw-admin .md-list-items[data-grouped-list-items] *::before,
.paw-admin .md-list-items[data-grouped-list-items] *::after {
    box-sizing: border-box;
}

.paw-admin .gl-group-header {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 12px 12px 8px;
    border-radius: var(--radius-sm);
    color: var(--muted);
    font-size: var(--fs-xs);
    font-weight: var(--font-semibold);
    line-height: 1.4;
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
    user-select: none;
}

.paw-admin .gl-group-header:hover {
    color: var(--label-color);
}

.paw-admin .gl-group-header > .label-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.paw-admin .gl-group-header .count {
    margin-left: auto;
    padding: 1px 9px;
    border-radius: 999px;
    background: var(--border-soft);
    color: var(--label-color);
    font-size: 11px;
    font-weight: var(--font-semibold);
    font-variant-numeric: tabular-nums;
}

.paw-admin .gl-group-header::after {
    content: "";
    width: 7px;
    height: 7px;
    flex-shrink: 0;
    margin-right: 2px;
    border-right: 1.5px solid var(--muted);
    border-bottom: 1.5px solid var(--muted);
    transform: rotate(-45deg);
    transition: transform .15s;
}

.paw-admin .gl-group-header.open::after {
    transform: rotate(45deg);
}

.paw-admin .gl-group-items.drop-target-active .gl-empty-drop {
    border-color: var(--primary-color);
    background: var(--tint);
    color: var(--primary-color-label);
}

.paw-admin .gl-empty-drop {
    margin: 6px 10px;
    padding: 11px 14px;
    border: 1.5px dashed var(--border);
    border-radius: 6px;
    background: #fff;
    color: var(--muted);
    text-align: center;
    font-size: var(--fs-xs);
    line-height: 1.35;
    transition: background .15s, border-color .15s, color .15s;
}

.paw-admin .gl-empty-drop strong {
    color: var(--text-color);
    font-weight: var(--font-semibold);
}

.paw-admin .md-list .item-row {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    margin: 1px 0;
    padding: 10px 12px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-color);
    font: inherit;
    font-size: var(--fs-md);
    font-weight: var(--font-medium);
    line-height: 1.45;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.paw-admin .md-list .item-row:hover {
    background: var(--row-stripe);
}

.paw-admin .md-list .item-row.active {
    background: var(--tint);
    color: var(--primary-color-label);
    font-weight: var(--font-semibold);
}

.paw-admin .md-list .item-row.disabled {
    color: var(--muted);
}

.paw-admin .md-list .item-row .chev,
.paw-admin .md-list .item-row .expand-toggle {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    display: inline-grid;
    place-items: center;
    padding: 0;
    line-height: 1;
    color: var(--muted);
}

.paw-admin .md-list .item-row .chev {
    margin-left: auto;
}

.paw-admin .md-list .item-row.active .chev,
.paw-admin .md-list .item-row.active .expand-toggle {
    color: var(--primary-color-label);
}

.paw-admin .md-list .item-row .expand-toggle {
    border: 0;
    background: none;
    cursor: pointer;
    transition: transform .15s, color .15s;
}

.paw-admin .md-list .item-row.expanded .expand-toggle {
    transform: rotate(90deg);
}

.paw-admin .md-list .item-row .drag {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    color: var(--border);
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.paw-admin .md-list .item-row .drag span {
    display: block;
    width: 12px;
    height: 1.5px;
    border-radius: 1px;
    background: currentColor;
}

.paw-admin .md-list .item-row:hover .drag {
    color: var(--muted);
}

.paw-admin .md-list .item-row.active .drag {
    color: var(--primary-color-label);
}

.paw-admin .md-list .item-row .drag.is-reserved {
    visibility: hidden;
    pointer-events: none;
}

.paw-admin .md-list.no-drag .item-row .drag:not(.is-reserved) {
    display: none;
}

.paw-admin .md-list .item-row .label-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Prototype 37 multi-select contract.
   Selection is a state of the row, not a new leading control. Nothing enters
   or leaves flex flow when the mode turns on: the drag grip keeps its leading
   slot, the chevron keeps its trailing slot, and the selected tick is drawn
   over that trailing slot. This keeps labels/counts/chevrons pixel-stable. */
.paw-admin .md-list .item-row {
    position: relative;
}

/* The tick exists out of flow at every width and is revealed only when the
   row is selected. The whole row remains the interaction target. */
.paw-admin .md-list .item-row > .bulk-check {
    display: inline-grid;
    position: absolute;
    z-index: 2;
    right: 12px;
    top: 50%;
    width: 16px;
    height: 16px;
    margin: 0;
    padding: 0;
    transform: translateY(-50%);
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--primary-color-label);
    opacity: 0;
    visibility: visible;
    pointer-events: none;
    transition: opacity .12s ease;
}

.paw-admin .md-list .item-row > .bulk-check.on {
    opacity: 1;
}

.paw-admin .md-list .item-row > .bulk-check svg {
    width: 14px;
    height: 14px;
}

/* Keep the reorder slot present in multi-select without changing its display
   formatting when the mode toggles. The row already renders the same 16px
   drag slot in both states; bulk mode only disables interaction with it. */
.paw-admin .md-list[data-bulk-layout-stable="true"].bulk-mode .item-row .drag {
    pointer-events: none;
}

/* Match Prototype 145's touch-target geometry. On hover-less/touch devices
   the 16px drag slot grows a larger press target via content-box padding, then
   negative margins pull its margin box back to the same 16px layout footprint.
   Keeping this geometry identical in and out of multi-select prevents the
   cumulative row/label compression that was still visible when the mode toggled. */
@media (hover: none) {
    .paw-admin .md-list[data-bulk-layout-stable="true"] .item-row > .drag {
        box-sizing: content-box;
        padding: 6px 4px;
        margin: -6px -4px;
    }
}

@media (max-width: 700px) {
    .paw-admin .md-list[data-bulk-layout-stable="true"].bulk-mode .item-row .drag {
        visibility: hidden;
    }
}

/* The selected tick replaces the trailing disclosure glyph visually without
   removing that glyph's box from layout. */
.paw-admin .md-list .item-row.bulk-selected .chev,
.paw-admin .md-list .item-row.bulk-selected .expand-toggle {
    opacity: 0;
    pointer-events: none;
}

/* Existing detail selection should not read as bulk selection while the list
   is in multi-select mode. Keep its font metrics identical to the normal
   selected row so toggling multi-select cannot nudge label/suffix geometry. */
.paw-admin .md-list.bulk-mode .item-row.active {
    background: transparent;
    color: var(--text-color);
    font-weight: var(--font-semibold);
}

.paw-admin .md-list.bulk-mode .item-row:hover {
    background: var(--row-stripe);
}

.paw-admin .md-list.bulk-mode .item-row.bulk-selected,
.paw-admin .md-list.bulk-mode .item-row.bulk-selected:hover {
    background: var(--tint);
    color: var(--primary-color-label);
    font-weight: var(--font-medium);
}

/* If the row that already owns the detail selection is also bulk-selected,
   preserve its pre-mode font weight. Other rows stay at the normal medium
   weight, so no new width/flow change is introduced by bulk selection. */
.paw-admin .md-list.bulk-mode .item-row.active.bulk-selected,
.paw-admin .md-list.bulk-mode .item-row.active.bulk-selected:hover {
    font-weight: var(--font-semibold);
}

/* Prototype 37 default group treatment: the heading itself is Select all.
   The old group checkbox is retained in the DOM for state/accessibility but
   is not a second visible control. Full selection tints the heading; partial
   selection tints its count badge. */
.paw-admin .md-list .gl-group-header {
    position: relative;
}

.paw-admin .md-list .gl-group-header .bulk-group-check {
    display: none;
}

.paw-admin .md-list.bulk-mode .gl-group-header {
    cursor: pointer;
}

.paw-admin .md-list.bulk-mode .gl-group-header:active {
    background: var(--tint);
}

.paw-admin .md-list.bulk-mode .gl-group-header.gl-group-on {
    background: var(--tint);
    color: var(--primary-color-label);
}

.paw-admin .md-list.bulk-mode .gl-group-header.gl-group-some .count {
    background: var(--tint);
    color: var(--primary-color-label);
}

/* The pseudo-element caret stays where it was. This transparent hit target is
   only present in multi-select and gives the caret a real collapse action,
   matching Prototype 37's header + caret behavior without DOM-owned JS state. */
.paw-admin .gl-group-collapse-hit {
    position: absolute;
    z-index: 3;
    top: 0;
    right: 0;
    bottom: 0;
    width: 28px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

@media (max-width: 700px), (pointer: coarse) {
    .paw-admin .gl-group-collapse-hit {
        width: 44px;
    }
}

@media (hover: hover) {
    .paw-admin .md-list.bulk-mode .gl-group-header:hover::after {
        border-color: var(--primary-color-label);
    }
}

@media (prefers-reduced-motion: reduce) {
    .paw-admin .md-list .item-row > .bulk-check {
        transition: none;
    }
}

.paw-admin .md-list.bulk-place .item-row {
    cursor: pointer;
    transition: opacity .12s, background .12s;
}

.paw-admin .md-list.bulk-place .item-row.bulk-selected {
    opacity: .42;
    background: transparent;
}

.paw-admin .gl-group-header.bulk-focus {
    background: var(--tint);
    box-shadow: inset 3px 0 0 var(--primary-color);
}

.paw-admin .gl-group-header.bulk-muted {
    opacity: .72;
}

.paw-admin .bulk-insert-slot {
    position: relative;
    display: block;
    width: 100%;
    height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    z-index: 5;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.paw-admin .bulk-insert-slot > span {
    display: none;
}

.paw-admin .bulk-insert-slot::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -8px;
    height: 16px;
}

.paw-admin .bulk-insert-slot::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    top: -1px;
    height: 2px;
    border-radius: 1px;
    background: var(--primary-color);
    opacity: 0;
    transform: scaleX(.6);
    transition: opacity .08s, transform .12s;
    pointer-events: none;
}

.paw-admin .bulk-insert-slot:hover::after,
.paw-admin .bulk-insert-slot:focus-visible::after {
    opacity: 1;
    transform: scaleX(1);
}

@keyframes admin-grouped-list-just-moved {
    0%, 32% {
        background: var(--tint);
        box-shadow: inset 3px 0 0 var(--primary-color);
    }
    100% {
        background: transparent;
        box-shadow: inset 3px 0 0 color-mix(in srgb, var(--primary-color) 0%, transparent);
    }
}

.paw-admin .md-list .item-row.just-moved {
    animation: admin-grouped-list-just-moved 6s ease-in forwards;
}

@media (prefers-reduced-motion: reduce) {
    .paw-admin .md-list .item-row.just-moved {
        animation: none;
        background: var(--tint);
        box-shadow: inset 3px 0 0 var(--primary-color);
    }
}

/* Contextual bulk bar: always lives inside the toolbar. On mobile it overlays
   the toolbar's existing box instead of replacing it, so enabling multi-select
   cannot move the first row or reduce the list's scrollable height. */
.paw-admin .gl-select-bar {
    display: none;
}

/* Destination dock follows the Prototype 27 row-sheet treatment. */
.paw-admin .bulk-dock {
    position: absolute;
    left: calc(100% + 12px);
    top: 12px;
    width: 280px;
    z-index: 60;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 12px 32px color-mix(in srgb, var(--shadow-ink) 14%, transparent);
}

.paw-admin .bulk-dock-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--tint-strong);
    background: var(--tint);
}

.paw-admin .bulk-dock-title {
    flex: 1 1 auto;
    min-width: 150px;
}

.paw-admin .bulk-dock-title strong {
    display: block;
    font-family: var(--font-family);
    font-size: var(--fs-sm);
    font-weight: var(--font-semibold);
    color: var(--primary-color-label);
}

.paw-admin .bulk-dock-title small {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: var(--fs-xs);
    line-height: 1.45;
}

.paw-admin .bulk-dock-close {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid var(--tint-strong);
    border-radius: 50%;
    background: rgba(255, 255, 255, .7);
    color: var(--muted);
    font: inherit;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    display: inline-grid;
    place-items: center;
    transition: background .15s, border-color .15s, color .15s;
}

.paw-admin .bulk-dock-close:hover {
    background: #fff;
    border-color: var(--primary-color);
    color: var(--primary-color-label);
}

.paw-admin .bulk-dock-grid {
    display: grid;
    gap: 0;
    padding: 0;
}

.paw-admin .bulk-dock-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    min-height: 46px;
    padding: 12px 16px;
    border: 0;
    border-top: 1px solid var(--border);
    border-radius: 0;
    background: #fff;
    color: var(--text-color);
    font: inherit;
    font-size: var(--fs-base);
    text-align: left;
    cursor: pointer;
    transition: background .15s;
}

.paw-admin .bulk-dock-cell:first-child {
    border-top: 0;
}

.paw-admin .bulk-dock-cell:hover {
    background: var(--row-stripe);
}

.paw-admin .bulk-dock-cell.selected {
    background: var(--tint);
    color: var(--primary-color-label);
    font-weight: var(--font-semibold);
}

.paw-admin .bulk-dock-cell:disabled {
    color: var(--muted);
    cursor: not-allowed;
}

.paw-admin .bulk-dock-cell:disabled:hover {
    background: #fff;
}

.paw-admin .bulk-place-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
}

.paw-admin .bulk-place-bar .txt {
    flex: 1;
    min-width: 0;
    color: var(--text-color);
    font-size: var(--fs-sm);
    font-weight: var(--font-medium);
    line-height: 1.3;
}

.paw-admin .bulk-place-bar b {
    color: var(--primary-color);
    font-weight: var(--font-semibold);
}

.paw-admin .bulk-place-bar button {
    flex: 0 0 auto;
    padding: 6px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: #fff;
    color: var(--text-color);
    font: inherit;
    font-size: var(--fs-sm);
    font-weight: var(--font-semibold);
    cursor: pointer;
}

@media (max-width: 860px) {
    .paw-admin .md-list[data-grouped-list] {
        min-height: 0;
        border-right: 0;
    }

    .paw-admin .md-list.bulk-mode .md-list-toolbar > *:not(.gl-select-bar) {
        visibility: hidden;
    }

    .paw-admin .md-list.bulk-mode .gl-select-bar {
        display: flex;
        align-items: center;
        gap: 10px;
        position: absolute;
        inset: 0;
        z-index: 2;
        padding: 8px 12px;
        background: var(--tint);
        border-bottom: 1px solid var(--tint-strong);
    }

    .paw-admin .gl-select-close {
        flex: 0 0 auto;
        width: 28px;
        height: 28px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: none;
        color: var(--primary-color-label);
        font: inherit;
        font-size: 20px;
        line-height: 1;
        cursor: pointer;
        display: inline-grid;
        place-items: center;
    }

    .paw-admin .gl-select-close:hover {
        background: rgba(255, 255, 255, .7);
    }

    .paw-admin .gl-select-count {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        color: var(--primary-color-label);
        font-size: var(--fs-sm);
        font-weight: var(--font-semibold);
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .paw-admin .gl-select-hint {
        color: var(--muted);
        font-size: var(--fs-xs);
    }

    .paw-admin .gl-select-move {
        flex: 0 0 auto;
        min-height: 34px;
        padding: 8px 16px;
        border: 0;
        border-radius: var(--radius-pill);
        background: var(--primary-color);
        color: var(--primary-color-text);
        font: inherit;
        font-size: var(--fs-xs);
        font-weight: var(--font-semibold);
        cursor: pointer;
    }

    .paw-admin .gl-select-move:disabled {
        background: var(--muted-soft);
        cursor: not-allowed;
    }

    .paw-admin .bulk-dock[data-bulk-dock-open="false"]:not(.bulk-place) {
        display: none;
    }

    .paw-admin .bulk-dock {
        position: fixed;
        left: 12px;
        right: 12px;
        bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        top: auto;
        width: auto;
        max-height: min(70vh, 400px);
        /* Deliberate application exception: transient mobile UI must sit above
           persistent page actions even where the static prototype layers it
           lower. */
        z-index: var(--admin-layer-mobile-sheet, 91);
        border-radius: var(--radius-card);
        box-shadow: 0 -6px 30px rgba(16, 42, 50, .22);
    }

    .paw-admin .bulk-dock-cell {
        min-height: 52px;
        padding: 15px 20px;
    }

    .paw-admin .bulk-dock-head {
        padding: 14px 20px;
    }

    /* Placement is deliberately non-modal. Keep the list as the scroll owner
       and reserve only the floating instruction bar's physical footprint. */
    .paw-admin .md-list.bulk-place .md-list-items[data-grouped-list-items] {
        padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
        scroll-padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    }
}


/* ========================================================================
   Prototype 41 — opt-in flat setting rows.
   Bookings > Types is the first Blazor consumer. The prototype owns this as
   data-rows="flat" so the same attribute can be reused by future pages rather
   than reimplementing section-specific row/divider CSS.
   ======================================================================== */
.paw-admin [data-rows="flat"] .form-grid,
.paw-admin [data-rows="flat"] .toggle-grid {
    column-gap: 0;
    row-gap: 0;
}

.paw-admin [data-rows="flat"] .toggle-grid > .toggle-row,
.paw-admin [data-rows="flat"] .toggle-grid > .field,
.paw-admin [data-rows="flat"] .form-grid > .field {
    padding: 15px 0;
    border-bottom: 1px solid var(--admin-border-soft);
    border-radius: 0;
    background: transparent;
}

.paw-admin [data-rows="flat"] .toggle-grid > .toggle-row:hover {
    background: transparent;
}

.paw-admin [data-rows="flat"] .form-grid > :nth-child(odd of :not(.full)),
.paw-admin [data-rows="flat"] .toggle-grid > :nth-child(odd of :not(.full)) {
    padding-right: 28px;
    border-right: 1px solid var(--admin-border-soft);
}

.paw-admin [data-rows="flat"] .form-grid > :nth-child(even of :not(.full)),
.paw-admin [data-rows="flat"] .toggle-grid > :nth-child(even of :not(.full)) {
    padding-left: 28px;
}

.paw-admin [data-rows="flat"] .form-grid > :last-child,
.paw-admin [data-rows="flat"] .toggle-grid > :last-child {
    border-bottom: 0;
}

/* Prototype 41 keeps label notes on the label line on flat detail forms. */
.paw-admin [data-rows="flat"] .label-note {
    display: inline;
    margin: 0 0 0 6px;
    white-space: normal;
}

@media (max-width: 700px) {
    /* Once the detail pane has its mobile back/title bar, the desktop pane
       title would repeat the same heading immediately underneath it. */
    .paw-admin .section-header.pane-title,
    .paw-admin h2.pane-title {
        display: none;
    }

    .paw-admin [data-rows="flat"] .form-grid > :nth-child(odd of :not(.full)),
    .paw-admin [data-rows="flat"] .toggle-grid > :nth-child(odd of :not(.full)) {
        padding-right: 0;
        border-right: 0;
    }

    .paw-admin [data-rows="flat"] .form-grid > :nth-child(even of :not(.full)),
    .paw-admin [data-rows="flat"] .toggle-grid > :nth-child(even of :not(.full)) {
        padding-left: 0;
    }
}

/* ---------- Bookings > Staff ----------
   Prototype 55 uses the shared editable-grid vocabulary. Only Staff-specific
   column proportions and the compact duration/status presentation live here;
   row actions inherit the shared .slot-actions hover/focus contract. */
.paw-admin .staff-grid-wrap {
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius-sm);
    overflow: hidden;
}

.paw-admin .staff-restriction-grid {
    --grid-col-primary-width: 58%;
    --grid-col-secondary-width: 32%;
}

.paw-admin .staff-extension-grid {
    --grid-col-primary-width: 60%;
    --grid-col-secondary-width: 30%;
}

.paw-admin .staff-duration-field {
    display: flex;
    align-items: center;
    gap: 9px;
}

.paw-admin .staff-duration-field input {
    max-width: 130px;
}

.paw-admin .staff-duration-field span {
    color: var(--admin-muted);
    font-size: var(--admin-font-sm);
}

.paw-admin .staff-restriction-status {
    white-space: nowrap;
    background: var(--admin-tint);
    color: var(--admin-label);
}

@container gridwrap (max-width: 860px) {
    .paw-admin .staff-restriction-grid td[data-label="Booking Type"],
    .paw-admin .staff-restriction-grid td[data-label="Restriction"],
    .paw-admin .staff-extension-grid td[data-label="Booking Type"],
    .paw-admin .staff-extension-grid td[data-label="Duration Extension"] {
        flex: 0 0 100%;
        width: 100%;
    }

    .paw-admin .staff-duration-field input {
        max-width: none;
        flex: 1;
    }
}

/* Prototype 55: Bookings > Slot Customisation. Overrides, Restrictions and
   First Available deliberately share one weekly-grid contract: one sticky
   column header, quiet weekday sections, page-level Copy/Add controls and
   hover-reveal row actions. Page-specific .razor.css remains responsible only
   for its editor/drawer internals. */
.paw-admin .slot-prototype-pane .detail-body {
    padding-top: 0;
}

.paw-admin .slot-prototype-pane .detail-body > .card:first-child {
    margin-top: 24px;
}

.paw-admin .slot-prototype-pane .slot-card-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.paw-admin .slot-prototype-pane .copy-anchor {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.paw-admin .slot-prototype-pane .slot-head-bar {
    position: sticky;
    top: 0;
    z-index: 7;
    margin: 0 -32px 14px;
    padding: 12px 32px;
    background: var(--admin-surface);
    box-shadow: 0 8px 10px -10px rgba(20, 60, 70, .3);
}

.paw-admin .slot-prototype-pane .slot-head-bar .slot-table-scroll {
    overflow-x: hidden;
}

.paw-admin .slot-prototype-pane .slot-head-bar .slot-table th {
    padding-top: 7px;
    padding-bottom: 7px;
    border-bottom: 0;
}

.paw-admin .slot-prototype-pane .slot-head-bar .slot-table th.slot-action-head {
    padding-top: 6px;
    padding-bottom: 6px;
}

.paw-admin .slot-prototype-pane .slot-table-wrap {
    overflow: hidden;
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius-sm);
}

.paw-admin .slot-prototype-pane .slot-table-scroll {
    overflow-x: auto;
}

.paw-admin .slot-prototype-pane .slot-table-wrap:has(.copy-anchor.copy-open),
.paw-admin .slot-prototype-pane .slot-table-scroll:has(.copy-anchor.copy-open) {
    overflow: visible;
}

.paw-admin .slot-prototype-pane .slot-table {
    width: 100%;
    min-width: 900px;
    margin: 0;
    border-collapse: collapse;
    table-layout: fixed;
}

.paw-admin .slot-prototype-pane .slot-table th {
    padding: 12px 14px;
    border-bottom: 1px solid var(--admin-border);
    background: var(--admin-row-stripe);
    color: var(--label-color);
    font-size: var(--admin-font-xs);
    font-weight: var(--admin-font-semibold);
    letter-spacing: .06em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.paw-admin .slot-prototype-pane .slot-table td {
    padding: 12px 14px;
    overflow-wrap: break-word;
    border-bottom: 1px solid var(--admin-border);
    color: var(--admin-text);
    font-size: var(--admin-font-sm);
    vertical-align: middle;
}

.paw-admin .slot-prototype-pane .slot-table tr:last-child td {
    border-bottom: 0;
}

.paw-admin .slot-prototype-pane .slot-table .slot-sr-head th {
    height: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    background: none;
    color: transparent;
    font-size: 0;
    letter-spacing: 0;
    line-height: 0;
    white-space: nowrap;
}

.paw-admin .slot-prototype-pane .slot-table .slot-action-head {
    text-align: right;
}

.paw-admin .slot-prototype-pane .slot-table .slot-empty-row td {
    padding: 22px 14px;
    color: var(--admin-muted);
    text-align: center;
}

.paw-admin .slot-prototype-pane .slot-table tbody tr:not(.slot-empty-row) {
    transition: background .13s ease;
}

.paw-admin .slot-prototype-pane .slot-table tbody tr:not(.slot-empty-row):hover td,
.paw-admin .slot-prototype-pane .slot-table tbody tr:not(.slot-empty-row):focus-within td {
    background: var(--admin-row-stripe);
}

.paw-admin .slot-prototype-pane .slot-day-section {
    padding-top: 22px;
    margin-top: 22px;
    border-top: 1px solid var(--admin-border-soft);
}

.paw-admin .slot-prototype-pane .slot-head-bar + .slot-day-section {
    padding-top: 0;
    margin-top: 0;
    border-top: 0;
}

.paw-admin .slot-prototype-pane .slot-day-head {
    margin-bottom: 12px;
}

.paw-admin .slot-prototype-pane .slot-day-head h3 {
    margin: 0;
    color: var(--admin-heading);
    font-family: var(--admin-font-heading);
    font-size: 16px;
    font-weight: var(--admin-font-semibold);
}

.paw-admin .slot-prototype-pane .slot-row-grip {
    width: 26px;
    height: 32px;
    display: inline-grid;
    flex: 0 0 26px;
    place-items: center;
    border-radius: var(--admin-radius-sm);
    color: var(--admin-muted-soft);
    cursor: grab;
    touch-action: none;
}

.paw-admin .slot-prototype-pane .slot-row-grip svg {
    width: 17px;
    height: 17px;
}

.paw-admin .slot-prototype-pane .slot-row-grip:hover {
    background: var(--admin-tint);
    color: var(--admin-label);
}

.paw-admin .slot-prototype-pane .slot-icon-btn.copy {
    background: var(--admin-icon-btn-neutral);
}

.paw-admin .slot-prototype-pane .slot-type-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.paw-admin .slot-prototype-pane .slot-type-pill {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 3px 10px;
    border: 1px solid var(--admin-tint-strong);
    border-radius: var(--admin-radius-pill);
    background: var(--admin-tint);
    color: var(--admin-label);
    font-size: .78rem;
    font-weight: var(--admin-font-semibold);
    line-height: 1.3;
}

/* Stable column geometry across the seven independently-rendered day tables. */
.paw-admin .slot-prototype-pane .slot-table.cols-restrictions col:nth-child(1) { width: 32%; }
.paw-admin .slot-prototype-pane .slot-table.cols-restrictions col:nth-child(2) { width: 20%; }
.paw-admin .slot-prototype-pane .slot-table.cols-restrictions col:nth-child(4) { width: 140px; }

.paw-admin .slot-prototype-pane .slot-table.cols-first-available.with-staff col:nth-child(1) { width: 14%; }
.paw-admin .slot-prototype-pane .slot-table.cols-first-available.with-staff col:nth-child(2) { width: 25%; }
.paw-admin .slot-prototype-pane .slot-table.cols-first-available.with-staff col:nth-child(3) { width: 25%; }
.paw-admin .slot-prototype-pane .slot-table.cols-first-available.with-staff col:nth-child(5) { width: 140px; }
.paw-admin .slot-prototype-pane .slot-table.cols-first-available.without-staff col:nth-child(1) { width: 18%; }
.paw-admin .slot-prototype-pane .slot-table.cols-first-available.without-staff col:nth-child(2) { width: 31%; }
.paw-admin .slot-prototype-pane .slot-table.cols-first-available.without-staff col:nth-child(3) { width: 31%; }
.paw-admin .slot-prototype-pane .slot-table.cols-first-available.without-staff col:nth-child(4) { width: 140px; }

.paw-admin .slot-prototype-pane .slot-table.cols-overrides.with-staff col:nth-child(1) { width: 16%; }
.paw-admin .slot-prototype-pane .slot-table.cols-overrides.with-staff col:nth-child(2) { width: 10%; }
.paw-admin .slot-prototype-pane .slot-table.cols-overrides.with-staff col:nth-child(3) { width: 13%; }
.paw-admin .slot-prototype-pane .slot-table.cols-overrides.with-staff col:nth-child(4) { width: 14%; }
.paw-admin .slot-prototype-pane .slot-table.cols-overrides.with-staff col:nth-child(5) { width: 13%; }
.paw-admin .slot-prototype-pane .slot-table.cols-overrides.with-staff col:nth-child(6) { width: 9%; }
.paw-admin .slot-prototype-pane .slot-table.cols-overrides.with-staff col:nth-child(7) { width: 9%; }
.paw-admin .slot-prototype-pane .slot-table.cols-overrides.with-staff col:nth-child(8) { width: 9%; }
.paw-admin .slot-prototype-pane .slot-table.cols-overrides.with-staff col:nth-child(9) { width: 168px; }
.paw-admin .slot-prototype-pane .slot-table.cols-overrides.without-staff col:nth-child(1) { width: 17%; }
.paw-admin .slot-prototype-pane .slot-table.cols-overrides.without-staff col:nth-child(2) { width: 11%; }
.paw-admin .slot-prototype-pane .slot-table.cols-overrides.without-staff col:nth-child(3) { width: 15%; }
.paw-admin .slot-prototype-pane .slot-table.cols-overrides.without-staff col:nth-child(4) { width: 16%; }
.paw-admin .slot-prototype-pane .slot-table.cols-overrides.without-staff col:nth-child(5) { width: 10%; }
.paw-admin .slot-prototype-pane .slot-table.cols-overrides.without-staff col:nth-child(6) { width: 10%; }
.paw-admin .slot-prototype-pane .slot-table.cols-overrides.without-staff col:nth-child(7) { width: 9%; }
.paw-admin .slot-prototype-pane .slot-table.cols-overrides.without-staff col:nth-child(8) { width: 168px; }

.paw-admin .slot-prototype-pane .slot-override-row.dragging td { opacity: .35; }
.paw-admin .slot-prototype-pane .slot-override-row.drag-over td { box-shadow: inset 0 2px 0 var(--admin-primary); }
.paw-admin .slot-prototype-pane .slot-override-row.drag-over-end td { box-shadow: inset 0 -2px 0 var(--admin-primary); }

@media (hover: none) {
    .paw-admin .slot-prototype-pane .slot-table tbody tr:hover td {
        background: none;
    }
}

@media (max-width: 767px) {
    .paw-admin .slot-prototype-pane .detail-body > .card:first-child {
        margin-top: 18px;
    }

    .paw-admin .slot-prototype-pane .slot-day-head {
        align-items: flex-start;
    }

    .paw-admin .slot-prototype-pane .slot-head-bar {
        margin: 0 -18px 10px;
        padding: 10px 18px;
    }

    .paw-admin .slot-prototype-pane .slot-head-bar .slot-table-wrap {
        overflow: visible;
        border: 0;
        border-radius: 0;
    }

    .paw-admin .slot-prototype-pane .slot-head-bar .slot-table-scroll {
        overflow: visible;
    }

    .paw-admin .slot-prototype-pane .slot-head-bar .slot-table,
    .paw-admin .slot-prototype-pane .slot-head-bar .slot-table thead,
    .paw-admin .slot-prototype-pane .slot-head-bar .slot-table tr {
        display: block;
        width: 100%;
        min-width: 0;
    }

    .paw-admin .slot-prototype-pane .slot-head-bar .slot-table th {
        display: none;
    }

    .paw-admin .slot-prototype-pane .slot-head-bar .slot-table th.slot-action-head {
        width: auto;
        display: block;
        padding: 0;
        border: 0;
        background: none;
    }

    .paw-admin .slot-prototype-pane .slot-table-wrap {
        overflow: visible;
        border: 0;
        border-radius: 0;
    }

    .paw-admin .slot-prototype-pane .slot-table-scroll {
        overflow-x: visible;
    }

    .paw-admin .slot-prototype-pane .slot-table,
    .paw-admin .slot-prototype-pane .slot-table tbody,
    .paw-admin .slot-prototype-pane .slot-table tr,
    .paw-admin .slot-prototype-pane .slot-table td {
        width: 100%;
        min-width: 0;
        display: block;
    }

    .paw-admin .slot-prototype-pane .slot-table thead {
        display: none;
    }

    .paw-admin .slot-prototype-pane .slot-table tr.slot-override-row,
    .paw-admin .slot-prototype-pane .slot-table tr.slot-first-available-row,
    .paw-admin .slot-prototype-pane .slot-table tr.slot-restriction-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        padding: 14px;
        margin-bottom: 12px;
        border: 1px solid var(--admin-border);
        border-radius: var(--admin-radius-sm);
    }

    .paw-admin .slot-prototype-pane .slot-table tr.slot-override-row:last-child,
    .paw-admin .slot-prototype-pane .slot-table tr.slot-first-available-row:last-child,
    .paw-admin .slot-prototype-pane .slot-table tr.slot-restriction-row:last-child {
        margin-bottom: 0;
    }

    .paw-admin .slot-prototype-pane .slot-table td {
        padding: 8px 0;
        border-bottom: 0;
    }

    .paw-admin .slot-prototype-pane .slot-table .slot-empty-row td {
        padding: 18px 0;
    }

    .paw-admin .slot-prototype-pane .slot-table td[data-label]::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 6px;
        color: var(--label-color);
        font-size: var(--admin-font-xs);
        font-weight: var(--admin-font-semibold);
        letter-spacing: .06em;
        text-transform: uppercase;
    }

    .paw-admin .slot-prototype-pane .slot-table td[data-label="Display Name"],
    .paw-admin .slot-prototype-pane .slot-table td[data-label="Calendar"],
    .paw-admin .slot-prototype-pane .slot-table td[data-label="Booking Type"],
    .paw-admin .slot-prototype-pane .slot-table td[data-label="Booking Types"],
    .paw-admin .slot-prototype-pane .slot-table td[data-label="Slot Time"],
    .paw-admin .slot-prototype-pane .slot-table td[data-label="Staff"] {
        width: 100%;
        flex: 0 0 100%;
    }

    .paw-admin .slot-prototype-pane .slot-table td[data-label="Slots to Show"],
    .paw-admin .slot-prototype-pane .slot-table td[data-label="Display Time"],
    .paw-admin .slot-prototype-pane .slot-table td[data-label="Slot Order"],
    .paw-admin .slot-prototype-pane .slot-table td[data-label="Start Time"],
    .paw-admin .slot-prototype-pane .slot-table td[data-label="End Time"] {
        min-width: 0;
        flex: 1 1 50%;
        padding-right: 10px;
    }

    .paw-admin .slot-prototype-pane .slot-table .slot-action-head {
        width: 100%;
        flex: 0 0 100%;
        padding-top: 12px;
        margin-top: 4px;
        border-top: 1px solid var(--admin-border-soft);
    }

    .paw-admin .slot-prototype-pane .slot-table .slot-actions {
        justify-content: flex-end;
    }

    .paw-admin .slot-prototype-pane .slot-table .slot-actions .slot-row-grip {
        margin-right: auto;
    }
}

/* Retained editor-focused isolated styles predate the shared table contract and
   gave Action cells legacy left padding with !important. Neutralise only that
   obsolete table geometry here; drawer field rules remain local. */
.paw-admin .slot-prototype-pane .slot-table .slot-action-head {
    padding-left: 14px !important;
}

@media (max-width: 767px) {
    .paw-admin .slot-prototype-pane .slot-head-bar .slot-table th.slot-action-head {
        padding: 0 !important;
    }

    .paw-admin .slot-prototype-pane .slot-table td.slot-action-head {
        padding: 12px 0 0 !important;
    }
}

/* ========================================================================
   Shared master/detail Add ↔ Edit transition silhouette
   ItemDetailPanel owns the 450ms transition timing; these rules only shape the
   reusable prototype-width skeleton and footer so every opted-in editor uses
   the same cue without page-specific CSS.
   ======================================================================== */
.paw-admin .detail-mode-transition-skeleton {
    width: 100%;
    min-width: 0;
}

.paw-admin .detail-mode-transition-skeleton .detail-body {
    overflow: hidden;
}

.paw-admin .detail-mode-transition-fields {
    margin-top: 0;
}

.paw-admin .detail-mode-transition-actions {
    pointer-events: none;
}

.paw-admin .detail-mode-transition-actions__right {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.paw-admin .detail-mode-transition-button {
    width: 78px;
    height: 34px;
    margin: 0;
    border-radius: var(--admin-radius-input);
}

.paw-admin .detail-mode-transition-button--secondary {
    width: 66px;
}

.paw-admin .detail-mode-transition-button--primary {
    width: 72px;
}

/* ========================================================================== 
   Phase 2.198 — stable reusable mobile detail overlays/actions
   ========================================================================== */
@media (max-width: 700px) {
    /* The detail slide-over itself is the phone viewport. Establish one local
       containing block so floating actions/rails are not viewport-fixed
       descendants of a transformed .md-detail (which can be clipped after a
       retained editor finishes loading). */
    .paw-admin .mobile-detail-screen.mobile-detail-open > .detail-pane {
        position: relative;
        overflow: visible;
    }

    /* Only the page-owned direct footer is the mobile floating action cluster.
       Nested editor/footer components must not be promoted accidentally. */
    .paw-admin .mobile-detail-screen.mobile-detail-open > .detail-pane > .page-actions.mobile-floating-actions {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 120;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* The reusable peek belongs to the same detail containing block. Absolute
       positioning reproduces Prototype 85's detail-local fixed peek without
       the transformed-ancestor behaviour of CSS position:fixed. */
    .paw-admin .mobile-detail-screen.mobile-detail-open > .detail-pane > .mobile-detail-bottom-rail {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 119;
    }

    /* An auxiliary full-screen surface owns the detail while open. Scope this
       to direct page-owned chrome so a child component cannot hide unrelated
       actions merely by sharing a class name. */
    .paw-admin .mobile-detail-screen.mobile-detail-open > .detail-pane.bfe-mobile-preview-open > .page-actions.mobile-floating-actions,
    .paw-admin .mobile-detail-screen.mobile-detail-open > .detail-pane.bfe-mobile-preview-open > .mobile-detail-bottom-rail {
        display: none !important;
    }
}

/* ==========================================================================
   Phase 2.287 — universal discard-left / commit-right footer contract
   ========================================================================== */

/* DetailActionFooter now renders exactly one discard control. Keep it pinned
   to the leading edge on desktop regardless of page/footer composition; Delete
   and Save remain in the trailing group. */
.paw-admin .page-actions > .action-lead,
.paw-admin .detail-action-footer__actions > .detail-discard-action.action-lead {
    margin-right: auto !important;
}

@media (max-width: 700px) {
    /* Generic mobile footer rules intentionally zero button margins. Reassert
       the one universal exception after those rules: the neutral outlined X is the
       leading control and must consume the free middle space before Delete/Save. */
    .paw-admin .md-page .page-actions.mobile-floating-actions > .btn.detail-discard-action.ma-fab-sm,
    .paw-admin .mobile-detail-screen.mobile-detail-open .page-actions.mobile-floating-actions > .btn.detail-discard-action.ma-fab-sm,
    .paw-admin .mobile-detail-screen.mobile-detail-open > .detail-pane > .page-actions.mobile-floating-actions > .btn.detail-discard-action.ma-fab-sm {
        margin: 0 auto 0 0 !important;
    }
}

/* ==========================================================================
   Phase 2.289 — mobile detail content remains reachable beneath floating actions
   ========================================================================== */
@media (max-width: 700px) {
    /* Prototype 127 measures the floating detail-action group and reserves its
       height minus a deliberate 30px overlap. The normal one-row cluster is
       ~92px tall, so 62px reproduces that contract without runtime measuring:
       the final row can scroll above the Cancel/Delete/Save circles while the page
       still visually continues a little way underneath the floating chrome. */
    .paw-admin .mobile-detail-screen.mobile-detail-open
        > .detail-pane:has(> .page-actions.mobile-floating-actions)
        > .detail-body {
        padding-bottom: calc(var(--admin-mobile-detail-actions-reserve) + env(safe-area-inset-bottom, 0px)) !important;
        scroll-padding-bottom: calc(var(--admin-mobile-detail-actions-reserve) + env(safe-area-inset-bottom, 0px));
    }
}

/* ======================================================================
   Shared repeatable configuration-item patterns
   Prototype 99 source: Config card + chip adder.

   These are intentionally global Admin primitives. Embedded Experience is
   the first Blazor consumer, but the pattern applies anywhere a screen grows
   a repeatable list of configured objects with a title/remove action and
   optional revealed settings.
   ====================================================================== */
.paw-admin .config-card,
.paw-admin .screen-card {
    position: relative;
    --cc-pad: 18px;
    min-width: 0;
    max-width: 100%;
    margin: 12px 0 0;
    padding: 16px var(--cc-pad);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--admin-surface, #fff);
}

.paw-admin .config-card-title,
.paw-admin .screen-card-title {
    margin: 0 calc(var(--cc-pad) * -1) 16px;
    padding: 0 44px 12px var(--cc-pad);
    border-bottom: 1px solid var(--border-soft);
    color: var(--primary-color-label);
    font-family: var(--font-heading);
    font-size: var(--fs-md);
    font-weight: var(--font-semibold);
}

.paw-admin .config-card-x,
.paw-admin .screen-card-x {
    position: absolute;
    top: 9px;
    right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--muted);
    cursor: pointer;
}

.paw-admin .config-card-x:hover,
.paw-admin .screen-card-x:hover {
    background: var(--admin-danger-bg, #fff1f1);
    color: var(--danger-color);
}

.paw-admin .config-card > .toggle-link-row,
.paw-admin .screen-card > .toggle-link-row {
    margin: 14px 0 0;
}

.paw-admin .config-card > .config-card-title:first-child + .toggle-link-row,
.paw-admin .screen-card > .screen-card-title:first-child + .toggle-link-row {
    margin-top: 12px;
}

.paw-admin .config-card > .reveal-block,
.paw-admin .screen-card > .reveal-block {
    margin: 14px calc(var(--cc-pad) * -1) 0;
    padding: 14px var(--cc-pad) 0;
    border-top: 1px solid var(--border-soft);
}

.paw-admin .chip-adder {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.paw-admin .chip-add {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px 6px 9px;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    background: var(--tint);
    color: var(--primary-color-label);
    cursor: pointer;
    font: inherit;
    font-size: var(--fs-sm);
    font-weight: var(--font-medium);
    transition: background-color .15s, border-color .15s;
}

.paw-admin .chip-add:hover:not(:disabled) {
    background: var(--tint-strong);
}

.paw-admin .chip-add:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.paw-admin .chip-add:disabled {
    cursor: default;
    opacity: .5;
}

.paw-admin .chip-add-plus {
    font-size: 15px;
    font-weight: var(--font-semibold);
    line-height: 1;
}

/* Keep each compact action phrase intact; the surrounding toggle-link row is
   the wrapping owner at narrow widths. This is the Prototype 99 shared rule. */
.paw-admin .toggle-link .tl-text {
    white-space: nowrap;
}

.paw-admin .adder-empty {
    margin: 14px 0 0;
    padding: 14px;
    border-radius: var(--radius-sm);
    background: var(--row-stripe);
    color: var(--muted);
    font-size: var(--fs-sm);
    text-align: center;
}

/* Shared two-field composition used by repeatable config cards. A lone field
   spans the row; the pair stacks by the containing Embedded Experience panel
   width and also has a phone fallback for use outside that container. */
.paw-admin .button-card-primary,
.paw-admin .targeting-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 18px;
    margin-top: 16px;
}

.paw-admin .button-card-primary > .field,
.paw-admin .targeting-grid > .field {
    min-width: 0;
    margin: 0;
}

.paw-admin .button-card-primary > .field:only-child,
.paw-admin .targeting-grid > .field:only-child {
    grid-column: 1 / -1;
}

@container eepanel (max-width: 520px) {
    .paw-admin .button-card-primary,
    .paw-admin .targeting-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 700px) {
    .paw-admin .button-card-primary,
    .paw-admin .targeting-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ========================================================================
   Prototype 103 — shell-owned secondary-tab overflow surface

   The tab strip itself is rendered by AdminTabBar, but Prototype 103 keeps one
   menu/backdrop surface outside the active page shell and rebuilds its rows
   from whichever tabs overflow. Keep these rules global because the overflow
   rows are cloned by adminTabOverflow.js and therefore must not depend on a
   Blazor CSS-isolation attribute.
   ======================================================================== */
.paw-admin > .sub-tabs-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 55;
    margin: 0;
    padding: 0;
    border: 0;
    background: rgba(0, 0, 0, 0);
    cursor: default;
}

.paw-admin > .sub-tabs-backdrop.open {
    display: block;
}

.paw-admin > .sub-tabs-menu {
    display: none;
    position: fixed;
    z-index: 56;
    min-width: 220px;
    max-width: calc(100vw - 28px);
    max-height: 60vh;
    padding: 6px;
    overflow-y: auto;
    background: var(--admin-surface);
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius-sm);
    box-shadow: 0 10px 32px rgba(20, 60, 70, .18);
}

.paw-admin > .sub-tabs-menu.open {
    display: block;
}

.paw-admin > .sub-tabs-menu a {
    position: relative;
    display: block;
    padding: 10px 12px;
    color: var(--admin-text);
    border-radius: var(--admin-radius-sm);
    font-size: var(--admin-font-sm);
    text-decoration: none;
    white-space: nowrap;
}

.paw-admin > .sub-tabs-menu a:hover:not(.disabled) {
    background: var(--admin-row-stripe);
    text-decoration: none;
}

.paw-admin > .sub-tabs-menu a.active {
    background: var(--admin-tint);
    color: var(--admin-label);
    font-weight: var(--admin-font-semibold);
}

.paw-admin > .sub-tabs-menu a.disabled {
    opacity: .36;
    cursor: not-allowed;
    pointer-events: none;
    filter: grayscale(1);
}

.paw-admin > .sub-tabs-menu .badge-count {
    padding: 2px 8px;
    border-radius: var(--admin-radius-pill);
    background: var(--admin-tint-strong);
    color: var(--admin-label);
    font-size: var(--admin-font-xs);
    font-weight: var(--admin-font-semibold);
    line-height: 1.2;
}

/* The PIMS marker is part of the cloned overflow row, so reproduce the shared
   marker geometry here instead of relying on AdminTabBar's isolated styles. */
.paw-admin > .sub-tabs-menu .pims-pin {
    position: absolute;
    top: 50%;
    right: 5px;
    z-index: 2;
    width: 19px;
    height: 19px;
    margin-top: -9px;
    display: grid;
    place-items: center;
    background: #fff;
    border: 1px solid #d3e0e3;
    border-radius: 999px 999px 999px 4px;
    box-shadow: 0 2px 5px rgba(31, 70, 78, .18);
    transform: rotate(45deg);
    cursor: help;
}

.paw-admin > .sub-tabs-menu .pims-pin-image {
    display: block;
    width: 13px;
    height: 13px;
    object-fit: contain;
    transform: rotate(-45deg);
}

.paw-admin > .sub-tabs-menu .pims-pin.ezyvet .pims-pin-image {
    width: 15px;
    height: 15px;
}

.paw-admin > .sub-tabs-menu .pims-pin.openvpms .pims-pin-image {
    width: 13px;
    height: 13px;
}

.paw-admin > .sub-tabs-menu a:has(.pims-pin),
.paw-admin > .sub-tabs-menu a.has-pims-pin {
    padding-right: 34px;
}

@media (max-width: 860px) {
    /* Prototype 103 turns the overflow into a bottom sheet at the same width
       where the main sidebar becomes off-canvas. The shell-level ownership is
       what lets this surface sit over Customise instead of inside its clipping
       and stacking contexts. */
    .paw-admin > .sub-tabs-menu {
        top: auto !important;
        left: 12px !important;
        right: 12px !important;
        bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
        z-index: var(--admin-layer-mobile-sheet, 91);
        min-width: 0;
        max-width: none;
        max-height: 72vh;
        padding: 8px;
        border-radius: var(--admin-radius-card);
        box-shadow: 0 -6px 30px rgba(16, 42, 50, .22);
    }

    .paw-admin > .sub-tabs-menu a {
        padding: 14px;
        border-radius: 10px;
        font-size: var(--admin-font-md);
        white-space: normal;
    }

    .paw-admin > .sub-tabs-menu a:has(.pims-pin),
    .paw-admin > .sub-tabs-menu a.has-pims-pin {
        padding-right: 40px;
    }

    .paw-admin > .sub-tabs-menu .pims-pin {
        width: 22px;
        height: 22px;
        margin-top: -11px;
    }

    .paw-admin > .sub-tabs-menu .pims-pin.ezyvet .pims-pin-image {
        width: 17px;
        height: 17px;
    }

    .paw-admin > .sub-tabs-menu .pims-pin.openvpms .pims-pin-image {
        width: 15px;
        height: 15px;
    }

    .paw-admin > .sub-tabs-backdrop {
        z-index: var(--admin-layer-mobile-backdrop, 90);
    }

    .paw-admin > .sub-tabs-backdrop.open {
        background: rgba(16, 42, 50, .28);
    }
}

/* ==========================================================================
   Shared mobile Admin navigation
   Phone navigation is owned by MobileFloatingNavigation / MobileAppNavigationSheet.
   The desktop horizontal Admin tab strip therefore stands down on every phone
   screen, independent of which page happens to render the floating control.
   Sidebar-list filter tabs (Linked/Pending/Search, etc.) remain visible.
   ========================================================================== */
@media (max-width: 700px) {
    .paw-admin {
        --admin-tabs-height: 0px;
        --secondary-tabs-h: 0px;
        --nav-bottom: var(--admin-header-height);
    }

    .paw-admin .primary-tabs-wrap,
    .paw-admin .secondary-tabs-wrap,
    .paw-admin .sub-tabs:not(.is-sidebar-tabs) {
        display: none !important;
    }

    /* The overflow host belongs to the hidden desktop tab strip. Keep it out
       of the phone UI as well, including after a desktop-to-phone resize while
       its menu was open. */
    .paw-admin > .sub-tabs-menu,
    .paw-admin > .sub-tabs-backdrop {
        display: none !important;
    }

    /* Prototype 103 reserves the 56px mobile chrome plus the same 10px gap
       used between cards. This keeps Opening Hours / the final read-only card
       reachable above the centred navigation pill without adding a fake spacer. */
    .paw-admin:has(.mobile-floating-navigation) .settings-page:not(:has(.page-footer-fixed)),
    .paw-admin:has(.mobile-floating-navigation) .clinic-detail-pane.settings-page {
        padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* Full-panel commit pages keep the shared mobile navigation visible and place the
       explicit X / Save pair around the same shared navigation row. The
       desktop page footer remains authoritative, but its fixed mobile bar
       stands down so it cannot compete with the floating mobile actions. */
    /* The floating X / Save controls replace the footer's desktop buttons.
       Keep the footer itself only when it currently owns validation/error
       content, so mobile chrome never discards validator navigation. */
    .paw-admin:has(.mobile-floating-navigation.has-primary-action)
        .page-footer-fixed > .btn {
        display: none !important;
    }

    .paw-admin:has(.mobile-floating-navigation.has-primary-action)
        .page-footer-fixed:not(:has(.action-error)) {
        display: none !important;
    }

    .paw-admin:has(.mobile-floating-navigation.has-primary-action)
        .page-footer-fixed:has(.action-error) {
        left: 12px;
        right: 12px;
        bottom: calc(72px + env(safe-area-inset-bottom, 0px));
        width: auto;
        min-height: 0;
        padding: 8px 12px;
        justify-content: flex-start;
        border: 1px solid var(--admin-border);
        border-radius: var(--admin-radius-card);
        background: var(--admin-surface);
        box-shadow: var(--admin-shadow-card);
        backdrop-filter: none;
    }

    .paw-admin:has(.mobile-floating-navigation.has-primary-action)
        .full-panel-page:has(.page-footer-fixed) .settings-page {
        padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

@media (max-width: 700px) {
    /* Any migrated non-detail page with the shared floating navigator no
       longer needs the duplicate header burger. */
    .paw-admin:has(.mobile-floating-navigation) .admin-navigation-trigger {
        display: none !important;
    }
}

/* ==========================================================================
   Prototype 103 mobile full-panel density
   The full-panel page keeps the prototype's 14px page inset, while section
   cards cancel that inset with -14px side margins and therefore render as
   full-width bands. This is intentionally different from the Phase 2.231
   zero-gutter approximation: the page gutter still exists for non-card content,
   while the cards themselves use the full viewport and keep their own 14px
   body inset. Detail/master-detail records do not opt into this page contract.
   ========================================================================== */
@media (max-width: 700px) {
    .paw-admin:has(.mobile-floating-navigation) .settings-page.mobile-full-panel-page {
        padding-top: 14px !important;
        padding-right: 14px !important;
        padding-left: 14px !important;
        padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .paw-admin:has(.mobile-floating-navigation)
        .mobile-full-panel-page .overview-wrap > .section-card {
        width: auto;
        margin-right: -14px !important;
        margin-left: -14px !important;
        box-shadow: none;
    }
}

/* ========================================================================
   Prototype 118 — reusable mobile bulk-move destination modal.
   The grouped-list destination chooser is a modal bottom sheet on phones:
   it covers the floating list chrome and uses a dimmed scrim. Closing the
   scrim dismisses only the destination chooser; the selected rows remain in
   multi-select mode. The later placement step is deliberately non-modal so
   insert slots in the list stay tappable.
   ======================================================================== */
.paw-admin .gl-bulk-dock-scrim {
    display: none;
}

@media (max-width: 700px) {
    .paw-admin .gl-bulk-dock-scrim {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 94;
        margin: 0;
        padding: 0;
        border: 0;
        background: rgba(16, 30, 34, .38);
        cursor: default;
        animation: admin-bulk-dock-scrim-in .18s ease both;
    }

    .paw-admin .md-list[data-grouped-list] .bulk-dock {
        left: 0;
        right: 0;
        bottom: 0;
        width: auto;
        max-height: min(72vh, 420px);
        z-index: 95;
        border-radius: var(--admin-radius-card) var(--admin-radius-card) 0 0;
        box-shadow: 0 -6px 30px rgba(16, 42, 50, .22);
    }

    /* Once a destination needs manual positioning, the list itself becomes the
       interaction surface. Remove the modal layer and leave the dock as the
       instruction bar so taps can reach the insertion slots. */
    .paw-admin .md-list[data-grouped-list].bulk-place .bulk-dock {
        z-index: var(--admin-layer-mobile-sheet, 91);
    }
}

@keyframes admin-bulk-dock-scrim-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ========================================================================== 
   Phase 2.361 — shared NotificationBanner result-strip runtime contract

   Phase 2.259 deliberately moved the universal dm-bar presentation out of
   isolated NotificationBanner CSS and into this MVID-versioned global sheet.
   Keep these rules global: deployed clients may still have an older scoped
   bundle whose phone rule hides .dm-bar, so the current contract must be able
   to win from the build-versioned admin stylesheet.
   ========================================================================== */
.paw-admin .notification-result-host {
    /* Shell-level result portal. Keep the host viewport-fixed so responsive
       master/detail transforms and half-width layouts cannot become the
       containing/stacking block for a notification. JS still scopes the bar
       horizontally to the active pane by writing viewport coordinates. */
    position: fixed;
    inset: 0;
    z-index: var(--admin-layer-result, 200);
    pointer-events: none;
}

.paw-admin .dm-bar {
    display: flex !important;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
    min-width: 0;
    padding: 10px 16px;
    font-family: var(--admin-font-family);
    font-size: var(--admin-font-sm);
    font-weight: var(--admin-font-regular);
    line-height: 1.45;
}

.paw-admin .dm-bar-text {
    flex: 1 1 auto;
    min-width: 0;
}

.paw-admin .dm-bar.is-success {
    color: var(--admin-success);
    background: var(--admin-success-bg);
    border-bottom: 1px solid var(--admin-success-border);
}

.paw-admin .dm-bar.is-warning {
    color: var(--admin-warning);
    background: var(--admin-warning-bg);
    border-bottom: 1px solid color-mix(in srgb, var(--admin-warning) 28%, transparent);
}

.paw-admin .dm-bar.is-error {
    color: var(--admin-danger);
    background: var(--admin-danger-bg);
    border-bottom: 1px solid var(--admin-danger);
}

.paw-admin .dm-bar.is-info {
    color: var(--admin-label);
    background: var(--admin-tint-soft);
    border-bottom: 1px solid var(--admin-tint-strong);
}

.paw-admin .dm-bar-review,
.paw-admin .dm-bar-close {
    flex: 0 0 auto;
    font-family: var(--admin-font-family);
    color: inherit;
    background: transparent;
    border: 0;
    cursor: pointer;
    pointer-events: auto;
}

.paw-admin .dm-bar-review {
    min-height: 30px;
    padding: 0 12px;
    font-size: var(--admin-font-xs);
    font-weight: var(--admin-font-semibold);
    border: 1px solid currentColor;
    border-radius: var(--admin-radius-pill);
}

.paw-admin .dm-bar-close {
    display: inline-grid;
    place-items: center;
    min-width: 28px;
    min-height: 28px;
    padding: 0;
    font-size: 18px;
    line-height: 1;
    border-radius: var(--admin-radius-pill);
}

.paw-admin .dm-bar-review:hover,
.paw-admin .dm-bar-close:hover {
    background: color-mix(in srgb, currentColor 8%, transparent);
}

.paw-admin .dm-bar.is-overlay {
    /* The parent notification-result-host is the fixed viewport portal. Using
       absolute positioning here makes the JS coordinates independent of any
       transformed/clipped responsive page descendant. */
    position: absolute;
    top: var(--dm-overlay-top, var(--admin-header-height));
    left: var(--dm-overlay-left, var(--admin-sidebar-current-width));
    right: var(--dm-overlay-right, 0px);
    z-index: var(--admin-layer-result, 200);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .10);
    pointer-events: auto;
    max-width: 100vw;
    overflow-wrap: anywhere;

    /* Prevent the shell fallback from flashing before the contextual host has
       been measured. adminNotificationBanner.js sets this marker synchronously
       after resolving the current detail/full-panel geometry. */
    visibility: hidden;
    opacity: 0;
    transition: opacity 120ms ease;
}

.paw-admin .dm-bar.is-overlay[data-positioned="true"] {
    visibility: visible;
    opacity: 1;
}

@media (max-width: 700px) {
    .paw-admin .dm-bar.is-overlay {
        display: flex !important;
        left: 0 !important;
        right: 0 !important;
        width: 100vw;
        max-width: 100vw;
        gap: 8px;
        padding: 10px 14px;
        font-size: var(--admin-font-sm);
        z-index: var(--admin-layer-result, 200);
    }

    .paw-admin .dm-bar-review {
        min-height: 32px;
        padding-inline: 10px;
    }

    .paw-admin .dm-bar-close {
        min-width: 32px;
        min-height: 32px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .paw-admin .dm-bar.is-overlay {
        transition: none;
    }
}

/* ========================================================================== 
   Phase 2.377 — Customise compact-width bridge (701–760px)

   The shared Admin shell deliberately keeps a tablet master/detail band from
   701–860px. Customise is denser than ordinary detail forms, however, and at
   browser zoom / split-screen widths around 720px its editor already behaves
   like a phone-sized surface while the shared phone chrome is still gated at
   700px. Keep the global breakpoint contract intact and opt only Customise into
   the existing mobile-detail presentation through 760px.
   ========================================================================== */
@media (min-width: 701px) and (max-width: 760px) {
    .paw-admin:has(.customise-detail-host.mobile-detail-open) {
        --admin-tabs-height: 0px;
        --secondary-tabs-h: 0px;
        --nav-bottom: 0px;
    }

    .paw-admin:has(.customise-detail-host.mobile-detail-open) .admin-header-shell,
    .paw-admin:has(.customise-detail-host.mobile-detail-open) .sub-tabs {
        display: none !important;
    }

    .paw-admin:has(.customise-detail-host.mobile-detail-open) .admin-workspace,
    .paw-admin:has(.customise-detail-host.mobile-detail-open) .admin-content-region,
    .paw-admin:has(.customise-detail-host.mobile-detail-open) .admin-page-host {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    .paw-admin .customise-detail-host.mobile-detail-open {
        position: fixed !important;
        inset: 0 !important;
        z-index: 102;
        width: 100vw !important;
        height: 100dvh !important;
        min-height: 100dvh;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        background: var(--admin-surface);
        transform: translateX(0) !important;
    }

    .paw-admin .customise-detail-host.mobile-detail-open > .detail-pane {
        position: relative;
        width: 100%;
        height: 100%;
        min-height: 0;
        margin: 0 !important;
        overflow: visible;
    }

    .paw-admin .customise-detail-host.mobile-detail-open .mobile-detail-bar {
        display: flex;
    }

    .paw-admin .customise-detail-host.mobile-detail-open > .detail-pane > .page-actions.mobile-floating-actions {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 120;
        width: 100%;
        min-height: 0;
        margin: 0;
        padding: 20px 14px calc(14px + env(safe-area-inset-bottom, 0px));
        display: flex !important;
        align-items: center;
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 10px;
        border-top: 0;
        background: transparent;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: none;
    }

    .paw-admin .customise-detail-host.mobile-detail-open > .detail-pane > .page-actions.mobile-floating-actions > * {
        pointer-events: auto;
    }

    .paw-admin .customise-detail-host.mobile-detail-open > .detail-pane > .page-actions.mobile-floating-actions > .action-lead {
        margin: 0 auto 0 0 !important;
    }

    .paw-admin .customise-detail-host.mobile-detail-open .page-actions.mobile-floating-actions .btn.ma-fab {
        width: 58px;
        height: 58px;
        min-width: 58px;
        flex: 0 0 58px;
        margin: 0 !important;
        padding: 0 !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 0;
        border-radius: var(--admin-radius-pill);
        background: var(--admin-primary);
        color: var(--admin-primary-text);
        box-shadow: 0 6px 18px rgba(16, 42, 50, .2);
    }

    .paw-admin .customise-detail-host.mobile-detail-open .page-actions.mobile-floating-actions .btn.ma-fab-sm {
        width: 44px;
        height: 44px;
        min-width: 44px;
        flex: 0 0 44px;
        margin: 0 !important;
        padding: 0 !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--admin-radius-pill);
        background: var(--admin-surface);
        box-shadow: 0 4px 12px rgba(16, 42, 50, .16);
    }

    .paw-admin .customise-detail-host.mobile-detail-open .page-actions.mobile-floating-actions .btn.ma-fab-sm.is-cancel {
        color: var(--admin-muted);
        border: 1px solid var(--admin-border);
        box-shadow: 0 2px 8px color-mix(in srgb, var(--admin-shadow-ink) 10%, transparent);
    }

    .paw-admin .customise-detail-host.mobile-detail-open .page-actions.mobile-floating-actions .mobile-action-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .paw-admin .customise-detail-host.mobile-detail-open .page-actions.mobile-floating-actions .mobile-action-label {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .paw-admin .customise-detail-host.mobile-detail-open .page-actions.mobile-floating-actions .btn-spinner {
        width: 16px;
        height: 16px;
        border-width: 2px;
    }

    .paw-admin .customise-detail-host.mobile-detail-open > .detail-pane > .mobile-detail-bottom-rail {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 119;
        width: 100%;
        height: 40px;
        min-height: 40px;
        padding: 6px 12px;
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 8px;
        border: 0;
        border-top: 1px solid var(--admin-tint-strong);
        border-radius: 12px 12px 0 0;
        background: var(--admin-surface);
        box-shadow: 0 -6px 24px rgba(0, 0, 0, .12);
        color: var(--admin-label);
        font: inherit;
        font-size: var(--admin-font-sm);
        font-weight: var(--admin-font-medium);
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .paw-admin .customise-detail-host.mobile-detail-open .mobile-detail-bottom-rail__handle {
        position: static;
        flex: 0 0 34px;
        width: 34px;
        height: 4px;
        border-radius: 2px;
        background: var(--admin-tint-strong);
        transform: none;
    }

    .paw-admin .customise-detail-host.mobile-detail-open .mobile-detail-bottom-rail__label {
        line-height: 1;
    }

    .paw-admin .customise-detail-host.mobile-detail-open .mobile-detail-bottom-rail:focus-visible {
        outline: 2px solid var(--admin-primary);
        outline-offset: -2px;
    }

    .paw-admin .customise-detail-host.mobile-detail-open .page-actions.mobile-floating-actions .btn.ma-fab:disabled {
        background: var(--admin-muted-soft);
        color: #fff;
        box-shadow: none;
        cursor: default;
        transform: none;
    }

    .paw-admin .customise-detail-host.mobile-detail-open .page-actions.mobile-floating-actions .btn.ma-fab-sm:disabled {
        background: var(--admin-surface);
        color: var(--admin-muted);
        box-shadow: none;
        opacity: .55;
        cursor: default;
        transform: none;
    }

    .paw-admin .customise-detail-host.mobile-detail-open > .detail-pane:has(> .mobile-detail-bottom-rail) {
        padding-bottom: 40px;
    }

    .paw-admin .customise-detail-host.mobile-detail-open > .detail-pane.bfe-mobile-preview-open > .page-actions.mobile-floating-actions,
    .paw-admin .customise-detail-host.mobile-detail-open > .detail-pane.bfe-mobile-preview-open > .mobile-detail-bottom-rail {
        display: none !important;
    }
}

/* The banner runtime can classify a compact Customise detail as phone-like even
   when the shared shell remains above 700px. Keep presentation compact without
   overriding the JS-computed visual-viewport left/right coordinates. */
.paw-admin .dm-bar.is-overlay[data-phone-layout="true"] {
    gap: 8px;
    padding: 10px 14px;
    font-size: var(--admin-font-sm);
}

/* ========================================================================== 
   Phase 2.378 — mobile detail action geometry parity
   Cancel is always the leading action; Delete/Save remain trailing. Secondary
   detail actions use the same 58px footprint as the primary Save FAB without
   changing compact navigation controls that also use ma-fab-sm elsewhere.
   ========================================================================== */
@media (max-width: 700px) {
    .paw-admin .page-actions.mobile-floating-actions > .btn.ma-fab-sm,
    .paw-admin .md-page .page-actions.mobile-floating-actions > .btn.ma-fab-sm,
    .paw-admin .mobile-detail-screen.mobile-detail-open .page-actions.mobile-floating-actions > .btn.ma-fab-sm,
    .paw-admin .mobile-detail-screen.mobile-detail-open > .detail-pane > .page-actions.mobile-floating-actions > .btn.ma-fab-sm {
        width: 58px;
        height: 58px;
        min-width: 58px;
        flex: 0 0 58px;
    }

    .paw-admin .page-actions.mobile-floating-actions > .btn.detail-discard-action.action-lead.ma-fab-sm,
    .paw-admin .md-page .page-actions.mobile-floating-actions > .btn.detail-discard-action.action-lead.ma-fab-sm,
    .paw-admin .mobile-detail-screen.mobile-detail-open .page-actions.mobile-floating-actions > .btn.detail-discard-action.action-lead.ma-fab-sm,
    .paw-admin .mobile-detail-screen.mobile-detail-open > .detail-pane > .page-actions.mobile-floating-actions > .btn.detail-discard-action.action-lead.ma-fab-sm {
        margin: 0 auto 0 0 !important;
    }
}

/* Customise deliberately enters its compact/mobile detail composition through
   760px (Phase 2.377), so mirror the same action geometry in that bridge. */
@media (min-width: 701px) and (max-width: 760px) {
    .paw-admin .customise-detail-host.mobile-detail-open .page-actions.mobile-floating-actions > .btn.ma-fab-sm {
        width: 58px;
        height: 58px;
        min-width: 58px;
        flex: 0 0 58px;
    }

    .paw-admin .customise-detail-host.mobile-detail-open > .detail-pane > .page-actions.mobile-floating-actions > .btn.detail-discard-action.action-lead.ma-fab-sm {
        margin: 0 auto 0 0 !important;
    }
}