/* =====================================================================
   Woulfe's K9 — Front-end CRM
   Dark, mobile-first, app-like UI rendered via [woulfesk9_admin].
   Depends on tokens.css. The old gold accent is retired; emphasis now
   comes from contrast and weight.
   ===================================================================== */

.wk9-crm,
.wk9-crm * {
    box-sizing: border-box;
}

/* Full-screen lock: applied to <html> once the CRM node is re-parented. */
html.wk9-crm-locked,
html.wk9-crm-locked body {
    overflow: hidden !important;
    height: 100%;
    margin: 0;
    background: var(--k9-surface);
}

.wk9-crm {
    position: fixed;
    inset: 0;
    z-index: var(--k9-z-app);
    background:
        radial-gradient(120% 80% at 50% -10%, var(--k9-ink-800) 0%, var(--k9-surface) 60%)
        fixed;
    color: var(--k9-text);
    font-family: var(--k9-font-body);
    font-size: var(--k9-text-body);
    line-height: var(--k9-leading-snug);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    -webkit-font-smoothing: antialiased;
    overscroll-behavior: contain;
}

/* While the CRM is open it owns the whole viewport. */
html.wk9-crm-locked { margin-top: 0 !important; }
html.wk9-crm-locked #wpadminbar { display: none !important; }
html.wk9-crm-locked.wk9-crm-locked body { padding-top: 0 !important; }

.wk9-crm a {
    color: var(--k9-text);
    text-decoration: none;
}

/* Icons ------------------------------------------------------------- */

.wk9-ico {
    width: 1em;
    height: 1em;
    display: inline-block;
    vertical-align: -0.15em;
    fill: currentColor;
    flex: 0 0 auto;
    pointer-events: none;
}
.wk9-ico--grad { fill: url(#wk9-grad); }
.wk9-chip-btn .wk9-ico { width: 16px; height: 16px; }

/* Boot / loading ---------------------------------------------------- */

.wk9-crm__boot {
    min-height: 70vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--k9-space-4);
    color: var(--k9-text-muted);
}
.wk9-crm__spinner {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 3px solid var(--k9-line);
    border-top-color: var(--k9-text);
    animation: wk9-spin 0.8s linear infinite;
}
@keyframes wk9-spin { to { transform: rotate(360deg); } }

/* Layout shell ------------------------------------------------------ */

.wk9-crm__app {
    max-width: var(--k9-container-sm);
    margin: 0 auto;
    padding:
        calc(var(--k9-space-5) + var(--k9-safe-t))
        var(--k9-space-4)
        calc(72px + var(--k9-space-8) + var(--k9-safe-b));
}

.wk9-crm__topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--k9-space-3);
    margin-bottom: var(--k9-space-5);
}
.wk9-crm__id {
    display: flex;
    align-items: center;
    gap: var(--k9-space-3);
    min-width: 0;
}
.wk9-crm__avatar {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-color: var(--k9-surface-card-2);
    border: var(--k9-border-thick) solid var(--k9-line);
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Initials avatar: inverted, not tinted. */
.wk9-crm__avatar--initials {
    background: var(--k9-action);
    color: var(--k9-action-text);
    font-family: var(--k9-font-display);
    font-weight: var(--k9-weight-display);
    font-size: var(--k9-text-body);
    border-color: transparent;
}
.wk9-crm__avatar--lg {
    width: 72px;
    height: 72px;
    font-size: var(--k9-text-title-sm);
}
.wk9-crm__hello {
    font-size: var(--k9-text-caption);
    color: var(--k9-text-muted);
    margin: 0;
    min-width: 0;
}
.wk9-crm__hello strong {
    display: block;
    font-family: var(--k9-font-display);
    font-size: var(--k9-text-title-sm);
    color: var(--k9-text);
    font-weight: var(--k9-weight-display);
    letter-spacing: var(--k9-tracking-title);
}
.wk9-crm__topbtns { display: flex; gap: var(--k9-space-2); }
.wk9-crm__icon-btn {
    appearance: none;
    border: var(--k9-border-width) solid var(--k9-line);
    background: var(--k9-surface-card);
    color: var(--k9-text-muted);
    width: 42px;
    height: 42px;
    border-radius: var(--k9-radius-sm);
    font-size: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
    transition:
        background var(--k9-duration) var(--k9-ease),
        color var(--k9-duration) var(--k9-ease),
        border-color var(--k9-duration) var(--k9-ease);
}
.wk9-crm__icon-btn:hover {
    background: var(--k9-surface-hover);
    color: var(--k9-text);
    border-color: var(--k9-line-strong);
}

/* View title -------------------------------------------------------- */

.wk9-view-title {
    font-size: var(--k9-text-micro);
    font-weight: var(--k9-weight-bold);
    letter-spacing: var(--k9-tracking-micro);
    text-transform: uppercase;
    color: var(--k9-text-faint);
    margin: var(--k9-space-6) 2px var(--k9-space-3);
}
.wk9-view-title:first-of-type { margin-top: var(--k9-space-1); }

/* KPI cards --------------------------------------------------------- */

.wk9-kpis {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--k9-space-3);
}
.wk9-kpi {
    background: var(--k9-surface-card);
    border: var(--k9-border-width) solid var(--k9-line);
    border-radius: var(--k9-radius-md);
    padding: var(--k9-space-4);
    position: relative;
    overflow: hidden;
}
.wk9-kpi__label {
    font-size: var(--k9-text-micro);
    color: var(--k9-text-muted);
    text-transform: uppercase;
    letter-spacing: var(--k9-tracking-micro);
    font-weight: var(--k9-weight-bold);
    margin: 0 0 var(--k9-space-2);
}
.wk9-kpi__value {
    font-family: var(--k9-font-display);
    font-size: 1.75rem;
    font-weight: var(--k9-weight-display);
    letter-spacing: var(--k9-tracking-display);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.wk9-kpi__icon {
    position: absolute;
    top: var(--k9-space-3);
    right: var(--k9-space-3);
    font-size: 22px;
    color: var(--k9-text-faint);
}
/* The single emphasised KPI: inverted rather than coloured. */
.wk9-kpi--accent {
    background: var(--k9-action);
    border-color: var(--k9-action);
}
.wk9-kpi--accent .wk9-kpi__value,
.wk9-kpi--accent .wk9-kpi__label,
.wk9-kpi--accent .wk9-kpi__icon {
    color: var(--k9-action-text);
}
.wk9-kpi--accent .wk9-kpi__label { opacity: 0.7; }

/* Generic card ------------------------------------------------------ */

.wk9-card {
    background: var(--k9-surface-card);
    border: var(--k9-border-width) solid var(--k9-line);
    border-radius: var(--k9-radius-md);
    padding: var(--k9-space-4);
    margin-bottom: var(--k9-space-3);
}

/* Slot card --------------------------------------------------------- */

.wk9-slot-card {
    background: var(--k9-surface-card);
    border: var(--k9-border-width) solid var(--k9-line);
    border-radius: var(--k9-radius-md);
    padding: var(--k9-space-4);
    margin-bottom: var(--k9-space-3);
    display: flex;
    align-items: center;
    gap: var(--k9-space-4);
    cursor: pointer;
    text-align: left;
    width: 100%;
    appearance: none;
    color: inherit;
    font: inherit;
    transition:
        transform var(--k9-duration-fast) var(--k9-ease),
        border-color var(--k9-duration) var(--k9-ease);
}
.wk9-slot-card:active { transform: scale(0.99); }
.wk9-slot-card:hover { border-color: var(--k9-line-strong); }
.wk9-slot-card.is-full { opacity: 0.72; }
.wk9-slot-card.is-past { opacity: 0.55; }

.wk9-datechip {
    flex: 0 0 auto;
    width: 58px;
    height: 64px;
    border-radius: var(--k9-radius-sm);
    background: var(--k9-surface-inset);
    border: var(--k9-border-width) solid var(--k9-line);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.05;
}
.wk9-datechip__wd {
    font-size: var(--k9-text-micro);
    text-transform: uppercase;
    color: var(--k9-text-muted);
    letter-spacing: var(--k9-tracking-micro);
    font-weight: var(--k9-weight-bold);
}
.wk9-datechip__day {
    font-family: var(--k9-font-display);
    font-size: var(--k9-text-title-sm);
    font-weight: var(--k9-weight-display);
    font-variant-numeric: tabular-nums;
}
.wk9-datechip__mo {
    font-size: var(--k9-text-micro);
    text-transform: uppercase;
    color: var(--k9-text-faint);
    letter-spacing: var(--k9-tracking-micro);
    font-weight: var(--k9-weight-bold);
}

.wk9-slot-card__body { flex: 1 1 auto; min-width: 0; }
.wk9-slot-card__time {
    font-size: var(--k9-text-body);
    font-weight: var(--k9-weight-bold);
    font-variant-numeric: tabular-nums;
}
.wk9-slot-card__sub {
    font-size: var(--k9-text-caption);
    color: var(--k9-text-muted);
    margin-top: 3px;
    display: flex;
    gap: var(--k9-space-2);
    flex-wrap: wrap;
    align-items: center;
}

/* Capacity bar — greyscale fill, red only when genuinely full. */
.wk9-capbar {
    margin-top: var(--k9-space-2);
    height: 6px;
    border-radius: var(--k9-radius-pill);
    background: var(--k9-surface-inset);
    border: var(--k9-border-width) solid var(--k9-line-subtle);
    overflow: hidden;
}
.wk9-capbar__fill {
    height: 100%;
    background: var(--k9-text);
    border-radius: var(--k9-radius-pill);
    transition: width var(--k9-duration-slow) var(--k9-ease);
}
.wk9-capbar__fill.is-full { background: var(--k9-danger); }

.wk9-slot-card__chev {
    color: var(--k9-text-faint);
    font-size: 22px;
    flex: 0 0 auto;
}

/* Pills / badges ---------------------------------------------------- */

.wk9-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--k9-text-micro);
    font-weight: var(--k9-weight-bold);
    letter-spacing: var(--k9-tracking-micro);
    text-transform: uppercase;
    padding: var(--k9-space-1) var(--k9-space-2);
    border-radius: var(--k9-radius-pill);
    background: var(--k9-surface-inset);
    color: var(--k9-text-muted);
    border: var(--k9-border-width) solid var(--k9-line);
    white-space: nowrap;
}
.wk9-pill--ok   { color: var(--k9-success); background: var(--k9-success-dim); border-color: rgba(63, 185, 80, 0.35); }
.wk9-pill--warn { color: var(--k9-warning); background: var(--k9-warning-dim); border-color: rgba(216, 162, 74, 0.35); }
.wk9-pill--full { color: var(--k9-danger);  background: var(--k9-danger-dim);  border-color: rgba(229, 83, 75, 0.35); }

.wk9-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--k9-text-micro);
    font-weight: var(--k9-weight-bold);
    letter-spacing: var(--k9-tracking-micro);
    text-transform: uppercase;
    padding: var(--k9-space-1) var(--k9-space-2);
    border-radius: var(--k9-radius-pill);
    background: var(--k9-surface-inset);
    border: var(--k9-border-width) solid var(--k9-line);
}
.wk9-status::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}
.wk9-status--completed  { color: var(--k9-success); }
.wk9-status--processing { color: var(--k9-info); }
.wk9-status--on-hold    { color: var(--k9-warning); }
.wk9-status--cancelled,
.wk9-status--failed,
.wk9-status--refunded   { color: var(--k9-danger); }

/* Empty state ------------------------------------------------------- */

.wk9-empty {
    text-align: center;
    color: var(--k9-text-muted);
    padding: var(--k9-space-10) var(--k9-space-5);
    border: var(--k9-border-width) dashed var(--k9-line-strong);
    border-radius: var(--k9-radius-md);
    background: var(--k9-line-subtle);
}
.wk9-empty__icon {
    font-size: 40px;
    display: block;
    margin-bottom: var(--k9-space-2);
    color: var(--k9-text-faint);
}

/* Attendee row ------------------------------------------------------ */

.wk9-attendee {
    display: flex;
    align-items: center;
    gap: var(--k9-space-3);
    padding: var(--k9-space-3) 0;
    border-top: var(--k9-border-width) solid var(--k9-line);
}
.wk9-attendee:first-child { border-top: 0; }
.wk9-avatar {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--k9-surface-card-2);
    border: var(--k9-border-width) solid var(--k9-line-strong);
    color: var(--k9-text);
    font-family: var(--k9-font-display);
    font-weight: var(--k9-weight-display);
    font-size: var(--k9-text-caption);
    display: flex;
    align-items: center;
    justify-content: center;
}
.wk9-attendee__main { flex: 1 1 auto; min-width: 0; }
.wk9-attendee__name {
    font-weight: var(--k9-weight-bold);
    font-size: var(--k9-text-body-sm);
}
.wk9-attendee__meta {
    font-size: var(--k9-text-caption);
    color: var(--k9-text-muted);
    margin-top: 2px;
    display: flex;
    gap: var(--k9-space-2);
    flex-wrap: wrap;
    align-items: center;
}
.wk9-attendee__dogs {
    flex: 0 0 auto;
    background: var(--k9-surface-inset);
    border: var(--k9-border-width) solid var(--k9-line);
    border-radius: var(--k9-radius-xs);
    padding: 5px var(--k9-space-2);
    font-size: var(--k9-text-caption);
    font-weight: var(--k9-weight-bold);
    font-variant-numeric: tabular-nums;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.wk9-attendee__dogs .wk9-ico {
    width: 15px;
    height: 15px;
    color: var(--k9-text-muted);
}

.wk9-actions-row {
    display: flex;
    gap: var(--k9-space-2);
    margin-top: var(--k9-space-2);
    flex-wrap: wrap;
}
.wk9-chip-btn {
    appearance: none;
    border: var(--k9-border-width) solid var(--k9-line);
    background: var(--k9-surface-inset);
    color: var(--k9-text);
    border-radius: var(--k9-radius-xs);
    padding: var(--k9-space-2) var(--k9-space-3);
    font-family: var(--k9-font-body);
    font-size: var(--k9-text-caption);
    font-weight: var(--k9-weight-semibold);
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: var(--k9-space-2);
    transition:
        background var(--k9-duration) var(--k9-ease),
        border-color var(--k9-duration) var(--k9-ease);
}
.wk9-chip-btn:hover {
    background: var(--k9-surface-hover);
    border-color: var(--k9-line-strong);
}
.wk9-chip-btn--danger { color: var(--k9-danger); }

/* Buttons ----------------------------------------------------------- */

.wk9-btn {
    appearance: none;
    border: var(--k9-border-width) solid transparent;
    border-radius: var(--k9-radius-sm);
    padding: var(--k9-space-4) var(--k9-space-5);
    font-family: var(--k9-font-body);
    font-size: var(--k9-text-body-sm);
    font-weight: var(--k9-weight-bold);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    cursor: pointer;
    width: 100%;
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--k9-space-2);
    transition:
        transform var(--k9-duration-fast) var(--k9-ease),
        background var(--k9-duration) var(--k9-ease),
        opacity var(--k9-duration) var(--k9-ease);
}
.wk9-btn:active { transform: scale(0.985); }
.wk9-btn[disabled] { opacity: 0.4; cursor: not-allowed; }

.wk9-btn--primary {
    background: var(--k9-action);
    color: var(--k9-action-text);
}
.wk9-btn--primary:hover:not([disabled]) { background: var(--k9-action-hover); }

.wk9-btn--ghost {
    background: transparent;
    color: var(--k9-text);
    border-color: var(--k9-line-strong);
}
.wk9-btn--ghost:hover:not([disabled]) { background: var(--k9-surface-hover); }

.wk9-btn--danger {
    background: var(--k9-danger-dim);
    color: var(--k9-danger);
    border-color: rgba(229, 83, 75, 0.4);
}

.wk9-btn--sm {
    padding: var(--k9-space-3) var(--k9-space-4);
    font-size: var(--k9-text-caption);
    min-height: 40px;
    width: auto;
}

/* Segmented control ------------------------------------------------- */

.wk9-seg {
    display: flex;
    background: var(--k9-surface-inset);
    border: var(--k9-border-width) solid var(--k9-line);
    border-radius: var(--k9-radius-sm);
    padding: var(--k9-space-1);
    gap: var(--k9-space-1);
    margin-bottom: var(--k9-space-4);
}
.wk9-seg__btn {
    flex: 1;
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--k9-text-muted);
    font-family: var(--k9-font-body);
    font-size: var(--k9-text-caption);
    font-weight: var(--k9-weight-bold);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: var(--k9-space-2);
    border-radius: var(--k9-radius-xs);
    cursor: pointer;
    transition:
        background var(--k9-duration) var(--k9-ease),
        color var(--k9-duration) var(--k9-ease);
}
.wk9-seg__btn.is-active {
    background: var(--k9-action);
    color: var(--k9-action-text);
}

/* Bottom nav -------------------------------------------------------- */

.wk9-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(72px + var(--k9-safe-b));
    padding-bottom: var(--k9-safe-b);
    background: rgba(15, 16, 17, 0.86);
    backdrop-filter: saturate(140%) blur(14px);
    -webkit-backdrop-filter: saturate(140%) blur(14px);
    border-top: var(--k9-border-width) solid var(--k9-line);
    display: flex;
    z-index: var(--k9-z-nav);
}
.wk9-nav__btn {
    flex: 1;
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--k9-text-faint);
    font-family: var(--k9-font-body);
    font-size: var(--k9-text-micro);
    font-weight: var(--k9-weight-bold);
    letter-spacing: var(--k9-tracking-micro);
    text-transform: uppercase;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--k9-space-1);
    cursor: pointer;
    padding-top: var(--k9-space-2);
    transition: color var(--k9-duration) var(--k9-ease);
}
.wk9-nav__ico { font-size: 21px; line-height: 1; }
.wk9-nav__btn.is-active { color: var(--k9-text); }

/* FAB --------------------------------------------------------------- */

.wk9-fab {
    position: fixed;
    right: var(--k9-space-5);
    bottom: calc(72px + var(--k9-space-5) + var(--k9-safe-b));
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 0;
    background: var(--k9-action);
    color: var(--k9-action-text);
    font-size: 30px;
    line-height: 1;
    box-shadow: var(--k9-shadow-3);
    cursor: pointer;
    z-index: var(--k9-z-sticky);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--k9-duration-fast) var(--k9-ease);
}
.wk9-fab .wk9-ico { width: 26px; height: 26px; }
.wk9-fab:active { transform: scale(0.94); }

/* Bottom-sheet modal ------------------------------------------------ */

.wk9-sheet-backdrop,
.wk9-sheet-backdrop *,
.wk9-toast,
.wk9-toast * { box-sizing: border-box; }

.wk9-sheet-backdrop,
.wk9-toast {
    font-family: var(--k9-font-body);
    color: var(--k9-text);
    line-height: var(--k9-leading-snug);
}

.wk9-sheet-backdrop {
    position: fixed;
    inset: 0;
    background: var(--k9-scrim);
    /* Sheets are appended to <body>, outside the app root, so they must
       clear --k9-z-app or they open invisibly behind the CRM. */
    z-index: calc(var(--k9-z-app) + 10);
    opacity: 0;
    transition: opacity var(--k9-duration) var(--k9-ease);
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.wk9-sheet-backdrop.is-open { opacity: 1; }

.wk9-sheet {
    background: var(--k9-surface-raised);
    color: var(--k9-text);
    border: var(--k9-border-width) solid var(--k9-line);
    border-bottom: 0;
    border-radius: var(--k9-radius-xl) var(--k9-radius-xl) 0 0;
    width: 100%;
    max-width: 560px;
    max-height: 92vh;
    overflow-y: auto;
    padding: var(--k9-space-2) var(--k9-space-5) calc(var(--k9-space-6) + var(--k9-safe-b));
    transform: translateY(100%);
    transition: transform var(--k9-duration-slow) var(--k9-ease-spring);
    -webkit-overflow-scrolling: touch;
}
.wk9-sheet-backdrop.is-open .wk9-sheet { transform: translateY(0); }
.wk9-sheet__grip {
    width: 42px;
    height: 5px;
    border-radius: var(--k9-radius-pill);
    background: var(--k9-line-strong);
    margin: var(--k9-space-2) auto var(--k9-space-4);
}
.wk9-sheet__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--k9-space-3);
    margin-bottom: var(--k9-space-4);
}
.wk9-sheet__title {
    font-family: var(--k9-font-display);
    font-size: var(--k9-text-title-md);
    font-weight: var(--k9-weight-display);
    letter-spacing: var(--k9-tracking-display);
    text-transform: uppercase;
    margin: 0;
    color: var(--k9-text);
}
.wk9-sheet__subtitle {
    font-size: var(--k9-text-caption);
    color: var(--k9-text-muted);
    margin: var(--k9-space-1) 0 0;
}
.wk9-sheet__close {
    appearance: none;
    border: var(--k9-border-width) solid var(--k9-line);
    background: var(--k9-surface-card);
    color: var(--k9-text-muted);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    flex: 0 0 auto;
    line-height: 1;
}

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

.wk9-field { margin-bottom: var(--k9-space-4); }
.wk9-field__label {
    display: block;
    font-size: var(--k9-text-micro);
    font-weight: var(--k9-weight-bold);
    letter-spacing: var(--k9-tracking-micro);
    text-transform: uppercase;
    color: var(--k9-text-muted);
    margin-bottom: var(--k9-space-2);
}
.wk9-input,
.wk9-textarea,
.wk9-crm select {
    width: 100%;
    background: var(--k9-surface-card);
    border: var(--k9-border-width) solid var(--k9-line);
    border-radius: var(--k9-radius-sm);
    color: var(--k9-text);
    font-family: var(--k9-font-body);
    font-size: var(--k9-text-body); /* 16px min — stops iOS zoom on focus */
    padding: var(--k9-space-3) var(--k9-space-4);
    min-height: 52px;
    appearance: none;
    transition:
        border-color var(--k9-duration) var(--k9-ease),
        box-shadow var(--k9-duration) var(--k9-ease);
}
.wk9-input:focus,
.wk9-textarea:focus,
.wk9-crm select:focus {
    outline: none;
    border-color: var(--k9-text);
    box-shadow: var(--k9-focus-ring);
}
/* BeTheme styles input[type="date"|"text"|"time"…] (and their :focus) with a
   white background, its own colour and a 20px bottom margin. Its attribute
   selectors out-rank a single class, so restate the essentials with enough
   weight to win. Sheets live on <body>, outside .wk9-crm, hence `html body`. */
html body input.wk9-input,
html body select.wk9-input,
html body textarea.wk9-textarea,
html body .wk9-crm select,
html body input.wk9-input:focus,
html body select.wk9-input:focus,
html body textarea.wk9-textarea:focus {
    background: var(--k9-surface-card);
    color: var(--k9-text);
    margin: 0;
    width: 100%;
    line-height: 1.4;
}
html body input.wk9-input,
html body select.wk9-input,
html body textarea.wk9-textarea,
html body .wk9-crm select {
    border: var(--k9-border-width) solid var(--k9-line);
    box-shadow: none;
}
html body input.wk9-input:focus,
html body select.wk9-input:focus,
html body textarea.wk9-textarea:focus {
    border-color: var(--k9-text);
    box-shadow: var(--k9-focus-ring);
}

.wk9-input::placeholder,
.wk9-textarea::placeholder { color: var(--k9-text-faint); }
.wk9-input::-webkit-calendar-picker-indicator { filter: invert(0.8); }
.wk9-textarea { min-height: 96px; resize: vertical; }
.wk9-field__row { display: flex; gap: var(--k9-space-3); }
.wk9-field__row > .wk9-field { flex: 1; }

/* Stepper ----------------------------------------------------------- */

.wk9-stepper2 {
    display: flex;
    align-items: center;
    border: var(--k9-border-width) solid var(--k9-line);
    border-radius: var(--k9-radius-sm);
    overflow: hidden;
    background: var(--k9-surface-card);
    width: fit-content;
}
.wk9-stepper2 button {
    appearance: none;
    border: 0;
    background: var(--k9-surface-card-2);
    color: var(--k9-text);
    width: 52px;
    height: 52px;
    font-size: 24px;
    cursor: pointer;
    transition: background var(--k9-duration) var(--k9-ease);
}
.wk9-stepper2 button:hover:not(:disabled) { background: var(--k9-surface-hover); }
.wk9-stepper2 button:disabled { opacity: 0.35; cursor: not-allowed; }
.wk9-stepper2 span {
    min-width: 56px;
    text-align: center;
    font-family: var(--k9-font-display);
    font-size: var(--k9-text-body-lg);
    font-weight: var(--k9-weight-display);
    font-variant-numeric: tabular-nums;
}

/* Profile ----------------------------------------------------------- */

.wk9-profile {
    display: flex;
    align-items: center;
    gap: var(--k9-space-4);
}
.wk9-profile__info { min-width: 0; }
.wk9-profile__name {
    font-family: var(--k9-font-display);
    font-size: var(--k9-text-body-lg);
    font-weight: var(--k9-weight-display);
    color: var(--k9-text);
    letter-spacing: var(--k9-tracking-title);
}

/* Toggle ------------------------------------------------------------ */

.wk9-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--k9-space-4);
    padding: var(--k9-space-4) 0;
}
.wk9-toggle-row__txt {
    font-size: var(--k9-text-body-sm);
    font-weight: var(--k9-weight-semibold);
}
.wk9-toggle-row__hint {
    font-size: var(--k9-text-caption);
    color: var(--k9-text-muted);
    font-weight: var(--k9-weight-regular);
    margin-top: 2px;
}
.wk9-switch { position: relative; flex: 0 0 auto; width: 52px; height: 30px; }
.wk9-switch input { opacity: 0; width: 0; height: 0; }
.wk9-switch__track {
    position: absolute;
    inset: 0;
    background: var(--k9-surface-card-2);
    border: var(--k9-border-width) solid var(--k9-line);
    border-radius: var(--k9-radius-pill);
    transition: background var(--k9-duration) var(--k9-ease);
}
.wk9-switch__track::before {
    content: "";
    position: absolute;
    width: 24px;
    height: 24px;
    left: 2px;
    top: 2px;
    border-radius: 50%;
    background: var(--k9-text-muted);
    transition:
        transform var(--k9-duration) var(--k9-ease),
        background var(--k9-duration) var(--k9-ease);
}
.wk9-switch input:checked + .wk9-switch__track {
    background: var(--k9-action);
    border-color: var(--k9-action);
}
.wk9-switch input:checked + .wk9-switch__track::before {
    transform: translateX(22px);
    background: var(--k9-action-text);
}
.wk9-switch input:focus-visible + .wk9-switch__track { box-shadow: var(--k9-focus-ring); }

/* Summary box ------------------------------------------------------- */

.wk9-summary {
    background: var(--k9-surface-card);
    border: var(--k9-border-width) solid var(--k9-line);
    border-radius: var(--k9-radius-sm);
    padding: var(--k9-space-3) var(--k9-space-4);
    margin: var(--k9-space-1) 0 var(--k9-space-4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--k9-space-3);
}
.wk9-summary__label { color: var(--k9-text-muted); font-size: var(--k9-text-caption); }
.wk9-summary__value {
    font-family: var(--k9-font-display);
    font-size: var(--k9-text-title-sm);
    font-weight: var(--k9-weight-display);
    font-variant-numeric: tabular-nums;
    color: var(--k9-text);
}

/* Toast ------------------------------------------------------------- */

.wk9-toast {
    position: fixed;
    left: 50%;
    bottom: calc(72px + var(--k9-space-6) + var(--k9-safe-b));
    transform: translateX(-50%) translateY(20px);
    background: var(--k9-ink-700);
    border: var(--k9-border-width) solid var(--k9-line-strong);
    color: var(--k9-text);
    padding: var(--k9-space-3) var(--k9-space-5);
    border-radius: var(--k9-radius-sm);
    font-size: var(--k9-text-body-sm);
    font-weight: var(--k9-weight-semibold);
    box-shadow: var(--k9-shadow-3);
    z-index: calc(var(--k9-z-app) + 20);
    opacity: 0;
    transition:
        opacity var(--k9-duration) var(--k9-ease),
        transform var(--k9-duration) var(--k9-ease);
    max-width: 90vw;
}
.wk9-toast.is-open { opacity: 1; transform: translateX(-50%) translateY(0); }
.wk9-toast--err { border-color: rgba(229, 83, 75, 0.5); }
.wk9-toast--ok  { border-color: rgba(63, 185, 80, 0.5); }

/* Inline error ------------------------------------------------------ */

.wk9-form-error {
    background: var(--k9-danger-dim);
    border: var(--k9-border-width) solid rgba(229, 83, 75, 0.4);
    color: var(--k9-danger);
    border-radius: var(--k9-radius-xs);
    padding: var(--k9-space-3);
    font-size: var(--k9-text-caption);
    margin-bottom: var(--k9-space-4);
}

/* =====================================================================
   Login screen
   ===================================================================== */

.wk9-crm--login {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--k9-space-6);
}
.wk9-crm-login__card {
    width: 100%;
    max-width: 380px;
    background: var(--k9-surface-card);
    border: var(--k9-border-width) solid var(--k9-line);
    border-radius: var(--k9-radius-lg);
    padding: var(--k9-space-8) var(--k9-space-6);
    text-align: center;
    box-shadow: var(--k9-shadow-3);
}
.wk9-crm-login__logo {
    max-width: 120px;
    height: auto;
    margin: 0 auto var(--k9-space-5);
    display: block;
}
.wk9-crm-login__badge { margin-bottom: var(--k9-space-3); color: var(--k9-text); }
.wk9-crm-login__title {
    font-family: var(--k9-font-display);
    font-size: var(--k9-text-title-md);
    font-weight: var(--k9-weight-display);
    letter-spacing: var(--k9-tracking-display);
    text-transform: uppercase;
    margin: 0 0 var(--k9-space-2);
    color: var(--k9-text);
}
.wk9-crm-login__sub {
    color: var(--k9-text-muted);
    font-size: var(--k9-text-body-sm);
    margin: 0 0 var(--k9-space-6);
}
.wk9-crm-login__alt {
    display: inline-block;
    margin-top: var(--k9-space-2);
    font-weight: var(--k9-weight-semibold);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.wk9-crm-login__card .login-username,
.wk9-crm-login__card .login-password {
    text-align: left;
    margin-bottom: var(--k9-space-4);
}
.wk9-crm-login__card label {
    display: block;
    font-size: var(--k9-text-micro);
    font-weight: var(--k9-weight-bold);
    letter-spacing: var(--k9-tracking-micro);
    text-transform: uppercase;
    color: var(--k9-text-muted);
    margin-bottom: var(--k9-space-2);
}
.wk9-crm-login__card input[type="text"],
.wk9-crm-login__card input[type="password"] {
    width: 100%;
    background: var(--k9-surface-inset);
    border: var(--k9-border-width) solid var(--k9-line);
    border-radius: var(--k9-radius-sm);
    color: var(--k9-text);
    font-family: var(--k9-font-body);
    font-size: var(--k9-text-body);
    padding: var(--k9-space-3) var(--k9-space-4);
    min-height: 52px;
}
.wk9-crm-login__card input:focus {
    outline: none;
    border-color: var(--k9-text);
    box-shadow: var(--k9-focus-ring);
}
.wk9-crm-login__card .login-remember {
    text-align: left;
    font-size: var(--k9-text-caption);
    color: var(--k9-text-muted);
    margin-bottom: var(--k9-space-5);
    display: flex;
    align-items: center;
    gap: var(--k9-space-2);
}
.wk9-crm-login__card .login-remember label {
    display: inline;
    margin: 0;
    text-transform: none;
    letter-spacing: 0;
    font-size: var(--k9-text-caption);
    font-weight: var(--k9-weight-regular);
}
.wk9-crm-login__card .login-submit input,
.wk9-crm-login__card #wp-submit {
    width: 100%;
    background: var(--k9-action);
    color: var(--k9-action-text);
    border: 0;
    border-radius: var(--k9-radius-sm);
    padding: var(--k9-space-4);
    min-height: 52px;
    font-family: var(--k9-font-body);
    font-size: var(--k9-text-body-sm);
    font-weight: var(--k9-weight-bold);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background var(--k9-duration) var(--k9-ease);
}
.wk9-crm-login__card .login-submit input:hover,
.wk9-crm-login__card #wp-submit:hover { background: var(--k9-action-hover); }

/* Misc -------------------------------------------------------------- */

.wk9-divider {
    height: 1px;
    background: var(--k9-line);
    margin: var(--k9-space-5) 0;
    border: 0;
}
.wk9-hidden { display: none !important; }

@media (min-width: 600px) {
    .wk9-kpis { grid-template-columns: repeat(4, 1fr); }
}

/* =====================================================================
   Sessions: Bookings + Schedule tabs
   ===================================================================== */

.wk9-day-head { margin-top: var(--k9-space-5); }
.wk9-booking-card .wk9-slot-card__time {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Booking detail facts */
.wk9-booking-facts { padding: var(--k9-space-1) var(--k9-space-4); margin-bottom: var(--k9-space-3); }
.wk9-fact {
    display: flex;
    justify-content: space-between;
    gap: var(--k9-space-4);
    padding: var(--k9-space-3) 0;
    border-bottom: var(--k9-border-width) solid var(--k9-line-subtle);
    font-size: var(--k9-text-body-sm);
}
.wk9-fact:last-child { border-bottom: 0; }
.wk9-fact__label { color: var(--k9-text-muted); flex: 0 0 auto; }
.wk9-fact__value { text-align: right; white-space: pre-line; overflow-wrap: anywhere; }

.wk9-sheet-text {
    font-size: var(--k9-text-body-sm);
    line-height: 1.5;
    margin: 0 0 var(--k9-space-4);
}
.wk9-sheet-text--muted { color: var(--k9-text-muted); }

.wk9-hint {
    font-size: var(--k9-text-caption);
    color: var(--k9-text-muted);
    line-height: 1.5;
    margin: var(--k9-space-3) 0 var(--k9-space-4);
}

/* Day navigator */
.wk9-daynav {
    display: flex;
    align-items: center;
    gap: var(--k9-space-2);
    margin-bottom: var(--k9-space-2);
}
.wk9-daynav__date { flex: 1 1 auto; min-width: 0; text-align: center; }
.wk9-daynav__prev .wk9-ico { transform: rotate(180deg); }

/* Day + time-off rows */
.wk9-daylist { padding: var(--k9-space-1) var(--k9-space-4); }
.wk9-dayrow {
    display: flex;
    align-items: center;
    gap: var(--k9-space-3);
    padding: var(--k9-space-3) 0;
    border-bottom: var(--k9-border-width) solid var(--k9-line-subtle);
}
.wk9-dayrow:last-child { border-bottom: 0; }
.wk9-dayrow__main { flex: 1 1 auto; min-width: 0; }
.wk9-dayrow__time {
    font-weight: var(--k9-weight-bold);
    font-variant-numeric: tabular-nums;
}
.wk9-dayrow__svc {
    font-size: var(--k9-text-caption);
    color: var(--k9-text-muted);
    margin-top: 2px;
}
.wk9-dayrow__who {
    appearance: none;
    border: 0;
    background: none;
    padding: var(--k9-space-1) 0 0;
    color: var(--k9-text);
    font: inherit;
    font-size: var(--k9-text-caption);
    font-weight: var(--k9-weight-bold);
    display: inline-flex;
    align-items: center;
    gap: 2px;
    cursor: pointer;
}
.wk9-dayrow__who .wk9-ico { width: 14px; height: 14px; }
.wk9-dayrow--closed .wk9-dayrow__time,
.wk9-dayrow--time_off .wk9-dayrow__time,
.wk9-dayrow--clash .wk9-dayrow__time,
.wk9-dayrow--past .wk9-dayrow__time { color: var(--k9-text-faint); }

/* Add-a-booking sheet */
.wk9-sheet-form .wk9-check {
    display: flex;
    align-items: center;
    gap: var(--k9-space-2);
    margin: var(--k9-space-2) 0 var(--k9-space-4);
    font-size: var(--k9-text-body-sm);
    color: var(--k9-text);
}
.wk9-sheet-form textarea.wk9-input { min-height: 72px; resize: vertical; }
.wk9-sheet-form .wk9-btn { width: 100%; }

/* Locations: each rule is a ruled-off block inside the one form. */
.wk9-locrule {
    padding: var(--k9-space-4) 0;
    border-top: var(--k9-border-width) solid var(--k9-line);
}
.wk9-locrule:first-of-type { margin-top: var(--k9-space-4); }
#wk9-locations-form [data-loc-add] { margin: var(--k9-space-2) 0 var(--k9-space-4); }

/* Weekly hours */
.wk9-hours { margin-bottom: var(--k9-space-4); }
.wk9-hours__remove { margin-top: var(--k9-space-3); }
.wk9-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: var(--k9-space-1);
    margin: var(--k9-space-3) 0 var(--k9-space-4);
}
.wk9-weekday { position: relative; cursor: pointer; }
.wk9-weekday input {
    position: absolute;
    opacity: 0;
    inset: 0;
    margin: 0;
    cursor: pointer;
}
.wk9-weekday span {
    display: block;
    text-align: center;
    padding: var(--k9-space-2) 0;
    border-radius: var(--k9-radius-xs);
    border: var(--k9-border-width) solid var(--k9-line);
    background: var(--k9-surface-inset);
    color: var(--k9-text-muted);
    font-size: var(--k9-text-micro);
    font-weight: var(--k9-weight-bold);
    letter-spacing: var(--k9-tracking-micro);
    text-transform: uppercase;
    transition: background var(--k9-duration) var(--k9-ease), color var(--k9-duration) var(--k9-ease);
}
.wk9-weekday input:checked + span {
    background: var(--k9-action);
    color: var(--k9-action-text);
    border-color: var(--k9-action);
}
.wk9-weekday input:focus-visible + span { outline: 2px solid var(--k9-text); outline-offset: 2px; }

/* =====================================================================
   BeTheme's `button:hover { background:#D6D9DD; color:#0A0A0B }` out-ranks a
   single class, turning hovered CRM buttons light grey with near-black text
   (and on iOS the hover sticks after a tap). Restate every button's hover
   with enough weight to win. Sheets live on <body>, outside .wk9-crm.
   ===================================================================== */
html body :is(.wk9-crm, .wk9-sheet-backdrop) .wk9-chip-btn:hover { background: var(--k9-surface-hover); color: var(--k9-text); }
html body :is(.wk9-crm, .wk9-sheet-backdrop) .wk9-chip-btn--danger:hover { color: var(--k9-danger); }
html body :is(.wk9-crm, .wk9-sheet-backdrop) .wk9-btn--primary:hover { background: var(--k9-action-hover); color: var(--k9-action-text); }
html body :is(.wk9-crm, .wk9-sheet-backdrop) .wk9-btn--primary[disabled]:hover { background: var(--k9-action); }
html body :is(.wk9-crm, .wk9-sheet-backdrop) .wk9-btn--ghost:hover { background: var(--k9-surface-hover); color: var(--k9-text); }
html body :is(.wk9-crm, .wk9-sheet-backdrop) .wk9-btn--danger:hover { background: var(--k9-danger-dim); color: var(--k9-danger); }
html body :is(.wk9-crm, .wk9-sheet-backdrop) .wk9-slot-card:hover { background: var(--k9-surface-card); color: inherit; }
html body :is(.wk9-crm, .wk9-sheet-backdrop) .wk9-dayrow__who:hover { background: none; color: var(--k9-text); text-decoration: underline; }
html body :is(.wk9-crm, .wk9-sheet-backdrop) .wk9-stepper2 button:hover { background: var(--k9-surface-hover); color: var(--k9-text); }
html body .wk9-crm .wk9-seg__btn:hover { background: transparent; color: var(--k9-text); }
html body .wk9-crm .wk9-seg__btn.is-active:hover { background: var(--k9-action); color: var(--k9-action-text); }
html body .wk9-crm .wk9-crm__icon-btn:hover { background: var(--k9-surface-hover); color: var(--k9-text); }
html body .wk9-crm .wk9-nav__btn:hover { background: transparent; color: var(--k9-text-muted); }
html body .wk9-crm .wk9-nav__btn.is-active:hover { color: var(--k9-text); }
html body .wk9-crm .wk9-fab:hover { background: var(--k9-action); color: var(--k9-action-text); }
html body .wk9-sheet-backdrop .wk9-sheet__close:hover { background: var(--k9-surface-hover); color: var(--k9-text); }