/*
 * Yatoon Staff Portal - 4.9.2 polish layer.
 * Loaded after every other staff stylesheet. Layout and look only; no behaviour.
 * Goals: use the whole phone screen, show the day first, calmer iOS-style look.
 */

/* ---- 1. Full-screen app on phones and tablets ---------------------------
 * The theme header, footer and WordPress admin bar are not part of the app.
 * The portal covers them, so the working area is the whole screen. */
@media (max-width: 1024px) {
    body:has(.yatoon-staff-portal-page) { overflow: hidden !important; }

    .yatoon-staff-portal-page {
        position: fixed !important;
        inset: 0 !important;
        z-index: 2147483000 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        background: var(--ysp-canvas, #f2f2f7) !important;
        font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif !important;
        -webkit-font-smoothing: antialiased;
    }
    .yatoon-staff-portal-page #ysp-app { min-height: 100%; background: transparent; }
}

/* ---- 2. Top bar: one slim row ------------------------------------------ */
.yatoon-staff-portal-page .ysp-topbar {
    position: sticky; top: 0; z-index: 130;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 10px !important;
    background: rgba(249, 249, 251, .86) !important;
    -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid rgba(60, 60, 67, .12) !important;
}
.yatoon-staff-portal-page .ysp-topbar-name {
    font-family: inherit !important; font-size: 22px !important; font-weight: 700; letter-spacing: -.02em; color: var(--ysp-text, #1c1c1e);
}
.yatoon-staff-portal-page .ysp-topbar-sub { font-size: 13px !important; color: var(--ysp-muted, #6c6c70) !important; }
.yatoon-staff-portal-page .ysp-topbar-actions { flex-direction: row !important; align-items: center !important; gap: 8px !important; }
.yatoon-staff-portal-page .ysp-last-sync { display: none !important; }
.yatoon-staff-portal-page .ysp-topbar-buttons { gap: 8px !important; }
.yatoon-staff-portal-page .ysp-icon-button {
    width: 40px !important; height: 40px !important; min-height: 40px !important; padding: 0 !important;
    align-items: center; justify-content: center;
    border-radius: 50% !important; background: var(--ysp-surface, #fff) !important; border: 0 !important;
    box-shadow: 0 0 0 1px rgba(60, 60, 67, .1) !important; color: var(--ysp-text, #3a3a3c) !important;
}
.yatoon-staff-portal-page .ysp-icon-button:not([style*="display: none"]):not([style*="display:none"]) { display: inline-flex; }
.yatoon-staff-portal-page .ysp-icon-button svg { width: 20px; height: 20px; }
.yatoon-staff-portal-page #ysp-add-booking-btn {
    background: var(--ysp-accent, #0a84ff) !important; color: #fff !important; box-shadow: 0 4px 12px color-mix(in srgb, var(--ysp-accent, #0a84ff) 35%, transparent) !important;
    font-size: 0 !important;
}
.yatoon-staff-portal-page #ysp-add-booking-btn span {
    position: relative; display: block; width: 18px; height: 18px; font-size: 0 !important;
}
.yatoon-staff-portal-page #ysp-add-booking-btn span::before,
.yatoon-staff-portal-page #ysp-add-booking-btn span::after {
    content: ''; position: absolute; left: 50%; top: 50%; background: #fff; border-radius: 2px; transform: translate(-50%, -50%);
}
.yatoon-staff-portal-page #ysp-add-booking-btn span::before { width: 18px; height: 2.4px; }
.yatoon-staff-portal-page #ysp-add-booking-btn span::after { width: 2.4px; height: 18px; }

/* ---- 3. Calendar toolbar and date strip -------------------------------- */
.yatoon-staff-portal-page .ysp-calendar-toolbar {
    align-items: center; gap: 10px; padding: 10px 16px 4px !important; background: transparent !important;
}
.yatoon-staff-portal-page .ysp-view-switch {
    flex: 1 1 auto; display: flex !important; gap: 0 !important; padding: 2px; border-radius: 9px;
    background: rgba(118, 118, 128, .14) !important; border: 0 !important; box-shadow: none !important;
}
.yatoon-staff-portal-page .ysp-view-switch button {
    flex: 1 1 0; min-height: 32px !important; padding: 0 6px !important; border: 0 !important; border-radius: 7px !important;
    background: transparent !important; box-shadow: none !important; color: var(--ysp-text, #1c1c1e) !important; font-size: 13px !important; font-weight: 600 !important;
}
.yatoon-staff-portal-page .ysp-view-switch button.active {
    background: var(--ysp-surface, #fff) !important; box-shadow: 0 1px 3px rgba(0, 0, 0, .14), 0 0 0 .5px rgba(0, 0, 0, .04) !important;
}
.yatoon-staff-portal-page .ysp-calendar-options {
    width: 36px; height: 36px; min-height: 36px !important; flex: 0 0 auto; border-radius: 50% !important;
    background: var(--ysp-surface, #fff) !important; border: 0 !important; box-shadow: 0 0 0 1px rgba(60, 60, 67, .1) !important; color: var(--ysp-text, #3a3a3c);
}
.yatoon-staff-portal-page .ysp-staff-tabs { padding: 6px 16px !important; gap: 8px !important; }
.yatoon-staff-portal-page .ysp-staff-tab {
    min-height: 34px; padding: 0 14px !important; border-radius: 999px !important; border: 0 !important;
    background: var(--ysp-surface, #fff) !important; box-shadow: 0 0 0 1px rgba(60, 60, 67, .1) !important; color: var(--ysp-text, #1c1c1e) !important; font-size: 14px !important; font-weight: 600 !important;
}
.yatoon-staff-portal-page .ysp-staff-tab.active { background: var(--ysp-text, #1c1c1e) !important; color: #fff !important; box-shadow: none !important; }

.yatoon-staff-portal-page .ysp-day-tabs {
    padding: 8px 12px 10px !important; gap: 6px !important; background: transparent !important; box-shadow: none !important;
    scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
}
.yatoon-staff-portal-page .ysp-day-tab {
    flex: 0 0 auto; min-width: 48px !important; padding: 6px 4px !important; border-radius: 12px !important;
    background: transparent !important; border: 0 !important; box-shadow: none !important; color: var(--ysp-text, #1c1c1e); scroll-snap-align: center;
}
.yatoon-staff-portal-page .ysp-day-tab-day { font-size: 11px !important; font-weight: 600; color: var(--ysp-muted, #8e8e93) !important; text-transform: uppercase; }
.yatoon-staff-portal-page .ysp-day-tab-num { font-size: 20px !important; font-weight: 600; line-height: 1.25; }
.yatoon-staff-portal-page .ysp-day-tab-count { font-size: 10px; background: transparent !important; color: var(--ysp-muted, #8e8e93) !important; min-height: 0; padding: 0; }
.yatoon-staff-portal-page .ysp-day-tab.active { background: var(--ysp-accent, #0a84ff) !important; box-shadow: 0 4px 10px color-mix(in srgb, var(--ysp-accent, #0a84ff) 30%, transparent) !important; }
.yatoon-staff-portal-page .ysp-day-tab.active .ysp-day-tab-day,
.yatoon-staff-portal-page .ysp-day-tab.active .ysp-day-tab-num,
.yatoon-staff-portal-page .ysp-day-tab.active .ysp-day-tab-count { color: #fff !important; }
.yatoon-staff-portal-page .ysp-week-nav {
    flex: 0 0 auto; min-width: 40px !important; height: 40px; align-self: center; border: 0 !important; border-radius: 50% !important;
    background: var(--ysp-surface, #fff) !important; box-shadow: 0 0 0 1px rgba(60, 60, 67, .1) !important; color: var(--ysp-accent, #0a84ff) !important;
    font-size: 0 !important; position: relative; padding: 0 !important;
}
.yatoon-staff-portal-page .ysp-week-nav::before {
    content: ''; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px;
    border-left: 2.4px solid currentColor; border-bottom: 2.4px solid currentColor; transform: translate(-30%, -50%) rotate(45deg);
}
/* Next points right; the Today button in the week strip is a dot (the original rule gave all three the same left chevron). */
.yatoon-staff-portal-page .ysp-week-nav[data-month-next]::before,
.yatoon-staff-portal-page .ysp-day-tabs .ysp-week-nav:last-child::before { transform: translate(-70%, -50%) rotate(-135deg); }
.yatoon-staff-portal-page .ysp-day-tabs .ysp-week-nav:nth-last-child(2)::before {
    width: 9px; height: 9px; border: 0; border-radius: 50%; background: currentColor; transform: translate(-50%, -50%);
}

/* ---- 4. Today ----------------------------------------------------------- */
.yatoon-staff-portal-page .ysp-schedule { padding: 8px 16px calc(96px + env(safe-area-inset-bottom, 0px)) !important; background: transparent !important; }
.yatoon-staff-portal-page .ysp-today-head { padding: 8px 2px 4px !important; }
.yatoon-staff-portal-page .ysp-today-head span { font-size: 12px !important; font-weight: 600 !important; letter-spacing: .02em; color: var(--ysp-muted, #8e8e93) !important; }
.yatoon-staff-portal-page .ysp-today-head h2 { font-size: 26px !important; font-weight: 700; letter-spacing: -.02em !important; color: var(--ysp-text, #1c1c1e) !important; margin-top: 2px !important; }

.yatoon-staff-portal-page .ysp-today-metrics,
.yatoon-staff-portal-page .ysp-insight-strip {
    display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 !important; margin: 10px 0 16px !important;
    background: var(--ysp-surface, #fff); border-radius: 14px; overflow: hidden; box-shadow: 0 0 0 1px rgba(60, 60, 67, .08);
}
.yatoon-staff-portal-page .ysp-insight-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.yatoon-staff-portal-page .ysp-today-metrics > div,
.yatoon-staff-portal-page .ysp-insight-card {
    display: flex !important; flex-direction: column-reverse; align-items: center; gap: 2px; padding: 12px 4px !important;
    border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; text-align: center;
}
.yatoon-staff-portal-page .ysp-today-metrics > div + div,
.yatoon-staff-portal-page .ysp-insight-card + .ysp-insight-card { box-shadow: -1px 0 0 rgba(60, 60, 67, .12) !important; }
.yatoon-staff-portal-page .ysp-today-metrics strong,
.yatoon-staff-portal-page .ysp-insight-card strong { margin: 0 !important; font-size: 22px !important; font-weight: 700; line-height: 1.15; color: var(--ysp-text, #1c1c1e) !important; }
.yatoon-staff-portal-page .ysp-today-metrics span,
.yatoon-staff-portal-page .ysp-insight-card span { font-size: 11px !important; font-weight: 500 !important; color: var(--ysp-muted, #6c6c70) !important; text-transform: none; }
.yatoon-staff-portal-page .ysp-today-metrics .attention { background: #fff4e5 !important; }
.yatoon-staff-portal-page .ysp-today-metrics .attention strong { color: #c93400 !important; }

.yatoon-staff-portal-page .ysp-today-section-title { display: flex; align-items: baseline; justify-content: space-between; margin: 4px 2px 8px; }
.yatoon-staff-portal-page .ysp-today-section-title h3 { font-size: 20px !important; font-weight: 700; letter-spacing: -.01em; color: var(--ysp-text, #1c1c1e); }
.yatoon-staff-portal-page .ysp-today-section-title button { border: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--ysp-accent, #0a84ff) !important; font-size: 15px !important; font-weight: 500 !important; padding: 4px 2px !important; min-height: 0 !important; }
.yatoon-staff-portal-page .ysp-today-section-title span { color: var(--ysp-muted, #8e8e93); font-size: 14px; }

/* Empty states: a quiet card, not a billboard */
.yatoon-staff-portal-page .ysp-today-open,
.yatoon-staff-portal-page .ysp-empty {
    display: flex !important; flex-direction: column; align-items: flex-start; gap: 4px;
    padding: 14px 16px !important; margin: 0 0 14px !important; border: 0 !important; border-radius: 14px !important;
    background: var(--ysp-surface, #fff) !important; box-shadow: 0 0 0 1px rgba(60, 60, 67, .08) !important; text-align: left !important;
}
.yatoon-staff-portal-page .ysp-today-open strong { font-size: 16px; font-weight: 600; color: var(--ysp-text, #1c1c1e); }
.yatoon-staff-portal-page .ysp-today-open span,
.yatoon-staff-portal-page .ysp-empty-text { font-size: 14px !important; color: var(--ysp-muted, #6c6c70) !important; }
.yatoon-staff-portal-page .ysp-empty-icon { display: none !important; }
.yatoon-staff-portal-page .ysp-empty-actions,
.yatoon-staff-portal-page .ysp-today-empty-actions > div { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.yatoon-staff-portal-page .ysp-small-primary {
    min-height: 40px; padding: 0 18px !important; border: 0 !important; border-radius: 999px !important;
    background: var(--ysp-accent, #0a84ff) !important; color: #fff !important; font-size: 15px !important; font-weight: 600 !important; box-shadow: none !important;
}
.yatoon-staff-portal-page .ysp-mini-ghost {
    min-height: 40px; padding: 0 16px !important; border: 0 !important; border-radius: 999px !important;
    background: color-mix(in srgb, var(--ysp-accent, #0a84ff) 10%, transparent) !important; color: var(--ysp-accent, #0a84ff) !important; font-size: 15px !important; font-weight: 600 !important; box-shadow: none !important;
}
.yatoon-staff-portal-page .ysp-date-heading { font-size: 20px !important; font-weight: 700 !important; letter-spacing: -.01em !important; color: var(--ysp-text, #1c1c1e) !important; margin: 6px 2px 10px !important; }

/* Day grid: lighter, and it starts right under the date */
.yatoon-staff-portal-page .ysp-calendar-shell { border: 0 !important; border-radius: 14px !important; background: var(--ysp-surface, #fff) !important; box-shadow: 0 0 0 1px rgba(60, 60, 67, .08) !important; overflow: hidden; }
.yatoon-staff-portal-page .ysp-calendar-grid { padding-top: 8px !important; }
.yatoon-staff-portal-page .ysp-hour-label { color: var(--ysp-muted, #8e8e93) !important; font-size: 11px !important; font-weight: 500 !important; }

/* ---- 5. Bottom navigation: iOS tab bar --------------------------------- */
.yatoon-staff-portal-page .ysp-bottom-nav {
    position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; max-width: none !important; transform: none !important;
    z-index: 140; gap: 0 !important; padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)) !important;
    background: rgba(249, 249, 251, .88) !important; border-top: 1px solid rgba(60, 60, 67, .14) !important; box-shadow: none !important;
    -webkit-backdrop-filter: saturate(180%) blur(20px) !important; backdrop-filter: saturate(180%) blur(20px) !important;
}
.yatoon-staff-portal-page .ysp-bottom-nav-btn {
    min-height: 52px !important; padding: 4px 2px !important; border-radius: 10px !important; background: transparent !important; box-shadow: none !important;
    color: var(--ysp-muted, #8e8e93) !important; font-size: 10.5px !important; font-weight: 600 !important; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
.yatoon-staff-portal-page .ysp-bottom-nav-btn .ysp-bottom-nav-icon { background: transparent !important; box-shadow: none !important; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; }
.yatoon-staff-portal-page .ysp-bottom-nav-btn .ysp-bottom-nav-icon { font-size: 0 !important; }
/* The design system draws text glyphs; the real SVG icons are used instead. */
.yatoon-staff-portal-page .ysp-bottom-nav-btn .ysp-bottom-nav-icon::before { content: none !important; display: none !important; }
.yatoon-staff-portal-page .ysp-bottom-nav-btn .ysp-bottom-nav-icon svg { display: block !important; flex: none; width: 24px !important; height: 24px !important; min-width: 24px; fill: currentColor !important; color: inherit; }
.yatoon-staff-portal-page .ysp-bottom-nav-btn.active { background: transparent !important; color: var(--ysp-accent, #0a84ff) !important; }
.yatoon-staff-portal-page .ysp-bottom-nav-btn .ysp-bottom-nav-icon { color: var(--ysp-muted, #8e8e93) !important; }
.yatoon-staff-portal-page .ysp-bottom-nav-btn.active .ysp-bottom-nav-icon { background: transparent !important; color: var(--ysp-accent, #0a84ff) !important; }
.yatoon-staff-portal-page .ysp-bottom-nav-btn.active .ysp-bottom-nav-icon svg { fill: var(--ysp-accent, #0a84ff) !important; color: var(--ysp-accent, #0a84ff) !important; }

/* ---- 6. Forms and sheets ------------------------------------------------ */
.yatoon-staff-portal-page input[type="text"],
.yatoon-staff-portal-page input[type="search"],
.yatoon-staff-portal-page input[type="tel"],
.yatoon-staff-portal-page input[type="email"],
.yatoon-staff-portal-page input[type="date"],
.yatoon-staff-portal-page input[type="time"],
.yatoon-staff-portal-page input[type="number"],
.yatoon-staff-portal-page select,
.yatoon-staff-portal-page textarea {
    font-size: 17px !important; /* 16px+ stops iOS zooming into the field */
    min-height: 46px; border-radius: 12px !important; border: 1px solid rgba(60, 60, 67, .18) !important; background: var(--ysp-surface, #fff) !important; padding: 10px 14px !important;
}
.yatoon-staff-portal-page input:focus, .yatoon-staff-portal-page select:focus, .yatoon-staff-portal-page textarea:focus {
    outline: none !important; border-color: var(--ysp-accent, #0a84ff) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--ysp-accent, #0a84ff) 20%, transparent) !important;
}
.yatoon-staff-portal-page button { -webkit-tap-highlight-color: transparent; }
.yatoon-staff-portal-page #ysp-save-booking { min-height: 50px; border-radius: 14px !important; background: var(--ysp-accent, #0a84ff) !important; color: #fff !important; font-size: 17px !important; font-weight: 600 !important; border: 0 !important; }

/* Text that must stay readable in a bright salon */
.yatoon-staff-portal-page .ysp-muted, .yatoon-staff-portal-page small { color: var(--ysp-muted, #6c6c70); }

@media (prefers-reduced-motion: reduce) { .yatoon-staff-portal-page * { scroll-behavior: auto !important; transition: none !important; } }

/* 7. Checkout + Messages */
.yatoon-staff-portal-page .ysp-checkout-total { color: var(--ysp-text, #1c1c1e) !important; font-size: 22px !important; font-weight: 700 !important; }
.yatoon-staff-portal-page .ysp-loyalty-lookup {
    background: var(--ysp-surface, #fff) !important; border: 0 !important; border-radius: 14px !important;
    box-shadow: 0 0 0 .5px rgba(60,60,67,.18) !important; padding: 16px !important; margin: 4px 16px 16px !important;
}
.yatoon-staff-portal-page .ysp-loyalty-lookup h3 { margin: 0 0 4px !important; font-size: 17px !important; font-weight: 700 !important; text-align: left !important; }
.yatoon-staff-portal-page .ysp-loyalty-lookup .ysp-sheet-muted { margin: 0 0 12px !important; text-align: left !important; font-size: 14px !important; color: var(--ysp-muted, #6c6c70) !important; }
.yatoon-staff-portal-page .ysp-loyalty-lookup form { display: flex !important; flex-direction: column !important; gap: 10px !important; }
.yatoon-staff-portal-page .ysp-loyalty-lookup label { font-size: 13px !important; font-weight: 600 !important; color: var(--ysp-muted, #6c6c70) !important; }
.yatoon-staff-portal-page .ysp-loyalty-lookup .ysp-editor-input { width: 100% !important; box-sizing: border-box; }
.yatoon-staff-portal-page .ysp-loyalty-lookup .ysp-action-btn {
    width: 100% !important; min-height: 46px !important; border: 0 !important; border-radius: 12px !important;
    background: var(--ysp-accent, #0a84ff) !important; color: #fff !important; font-size: 16px !important; font-weight: 600 !important;
}
.yatoon-staff-portal-page .ysp-client-avatar { background: var(--ysp-accent-soft, #e8f1ff) !important; color: var(--ysp-accent, #0a84ff) !important; border: 0 !important; }
.yatoon-staff-portal-page .ysp-client-meta { color: var(--ysp-text, #1c1c1e) !important; text-align: right; }

/* 9. Colour variables: accent and background follow the booking theme (set inline on the page);
   neutrals switch with the staff light/dark mode. */
.yatoon-staff-portal-page[data-yatoon-color-scheme="dark"] {
    --ysp-canvas: #000; --ysp-surface: #1c1c1e; --ysp-text: #f2f2f7; --ysp-muted: #98989f;
}
body.yatoon-staff-shell .yatoon-staff-portal-page { background: var(--ysp-canvas, #f6f7fb) !important; }

/* 8. Lean shell (no theme around the app): fill the screen */
body.yatoon-staff-shell { margin: 0; background: var(--ysp-canvas, #f6f7fb); }
body.yatoon-staff-shell .yatoon-staff-portal-page,
body.yatoon-staff-shell #ysp-app,
body.yatoon-staff-shell #ysp-login-screen.active { min-height: 100vh !important; min-height: 100dvh !important; box-sizing: border-box; }
@media (max-width: 1024px) {
    body.yatoon-staff-shell { background: var(--ysp-canvas, #f2f2f7); }
}

/* Week strip: fit the whole row (prev, 7 days, Today, Next) on any phone width instead of scrolling it off-screen. */
.yatoon-staff-portal-page .ysp-day-tabs { gap: 4px !important; padding-left: 8px !important; padding-right: 8px !important; }
.yatoon-staff-portal-page .ysp-day-tabs .ysp-day-tab { flex: 1 1 0 !important; min-width: 0 !important; }
.yatoon-staff-portal-page .ysp-day-tabs .ysp-week-nav { min-width: 34px !important; width: 34px; height: 34px; }
@media (max-width: 420px) {
    .yatoon-staff-portal-page .ysp-day-tabs .ysp-day-tab-day { font-size: 10px !important; letter-spacing: -.02em; }
    .yatoon-staff-portal-page .ysp-day-tabs .ysp-day-tab-num { font-size: 17px !important; }
}

/* 4.11.0: whole-team view for managers, on phones too. */
.yatoon-staff-portal-page .ysp-staff-tabs .ysp-staff-tab-all { display: inline-flex !important; align-items: center; }
.yatoon-staff-portal-page .ysp-staff-tab { display: inline-flex; align-items: center; gap: 6px; }
.yatoon-staff-portal-page .ysp-staff-tab i { margin-right: 0 !important; }
.yatoon-staff-portal-page .ysp-staff-tab-count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: rgba(17,24,39,.08); color: inherit; font-size: 12px; font-weight: 700; line-height: 20px; text-align: center; }
.yatoon-staff-portal-page .ysp-staff-tab.active .ysp-staff-tab-count { background: rgba(255,255,255,.22); }
.yatoon-staff-portal-page .ysp-card-staff { display: inline-flex; align-items: center; gap: 6px; margin: 2px 0 4px; font-size: 12px; font-weight: 700; color: var(--ysp-muted, #6b7280); text-transform: none; }
.yatoon-staff-portal-page .ysp-card-staff i { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; }
.yatoon-staff-portal-page .ysp-date-count { margin-left: 6px; font-size: 13px; font-weight: 600; color: var(--ysp-muted, #6b7280); }




/* ---- 9. Appointment detail (4.11.0 r33) -----------------------------------
 * Grouped cards on a soft canvas, one clear primary action pinned to the
 * bottom, and quiet rows for the rare or destructive actions. Layout only. */
#ysp-detail-overlay .ysp-detail-top:has(+ .ysp-d2) {
    min-height: calc(56px + var(--safe-top, env(safe-area-inset-top, 0px)));
    margin: 0 -18px !important;
    padding: calc(8px + var(--safe-top, env(safe-area-inset-top, 0px))) 14px 8px;
    background: rgba(242, 242, 247, .92);
    -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid rgba(60, 60, 67, .12);
}
#ysp-detail-overlay .ysp-detail-top:has(+ .ysp-d2) .ysp-detail-close {
    width: 40px; height: 40px; font-size: 28px; background: var(--ysp-surface, #fff);
    box-shadow: 0 0 0 1px rgba(60, 60, 67, .1);
}
#ysp-detail-overlay .ysp-detail-top:has(+ .ysp-d2) .ysp-detail-edit {
    min-width: 0; height: 40px; padding: 0 18px; font-size: 15px; font-weight: 700;
    background: var(--ysp-accent, #0a84ff);
}
#ysp-detail-overlay #ysp-sheet-body:has(.ysp-d2) { padding-bottom: 0 !important; background: var(--ysp-canvas, #f2f2f7); }
.ysp-d2-title { font-size: 17px; font-weight: 700; letter-spacing: -.01em; color: var(--ysp-text, #1c1c1e); }
.ysp-d2-spacer { width: 40px; }

.ysp-d2 {
    display: flex; flex-direction: column; gap: 12px;
    margin: 0 -18px; padding: 14px 16px calc(24px + var(--safe-bottom, env(safe-area-inset-bottom, 0px)));
    min-height: calc(100dvh - 72px - var(--safe-top, env(safe-area-inset-top, 0px)));
    background: var(--ysp-canvas, #f2f2f7);
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif;
}
.ysp-d2-card, .ysp-d2-list, .ysp-d2 .ysp-square-section {
    margin: 0; padding: 16px; border: 0; border-radius: 16px;
    background: var(--ysp-surface, #fff); box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}
.ysp-d2 .ysp-square-section { margin: 0; }
.ysp-d2-card h3, .ysp-d2 .ysp-square-section h3 {
    margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--ysp-muted, #6c6c70);
}

/* Hero: who, when, contact */
.ysp-d2-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.ysp-d2-badges .ysp-status-badge { font-size: 12px; padding: 4px 10px; }
.ysp-d2-customer {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
    margin: 0; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; font: inherit;
    -webkit-tap-highlight-color: transparent;
}
.ysp-d2-customer span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ysp-d2-customer strong { font-size: 24px; line-height: 1.15; font-weight: 800; letter-spacing: -.02em; color: var(--ysp-text, #1c1c1e); overflow-wrap: anywhere; }
.ysp-d2-customer em { font-style: normal; font-size: 15px; color: var(--ysp-muted, #6c6c70); }
.ysp-d2-customer i { flex: none; font-style: normal; font-size: 30px; line-height: 1; color: #c7c7cc; }
.ysp-d2-contact { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.ysp-d2-chip {
    min-height: 40px; padding: 0 12px; border: 0; border-radius: 12px; cursor: pointer;
    background: color-mix(in srgb, var(--ysp-accent, #0a84ff) 10%, transparent); color: var(--ysp-accent, #0a84ff);
    font: inherit; font-size: 15px; font-weight: 650;
}
.ysp-d2-when {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px;
    margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(60, 60, 67, .1);
}
.ysp-d2-when > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ysp-d2-when span, .ysp-d2-facts span {
    font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ysp-muted, #6c6c70);
}
.ysp-d2-when strong { font-size: 16px; font-weight: 700; color: var(--ysp-text, #1c1c1e); }
.ysp-d2-when em { font-style: normal; font-size: 14px; color: var(--ysp-muted, #6c6c70); }

.ysp-d2-alert {
    display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border-radius: 14px;
    background: #fff1f0; color: #b42318; border: 1px solid #fecdca;
}
.ysp-d2-alert span { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.ysp-d2-alert strong { font-size: 15px; font-weight: 650; }

/* Services */
.ysp-d2-line { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(60, 60, 67, .08); }
.ysp-d2-line:first-of-type { padding-top: 0; }
.ysp-d2-line span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ysp-d2-line strong { font-size: 16px; font-weight: 650; color: var(--ysp-text, #1c1c1e); }
.ysp-d2-line em { font-style: normal; font-size: 14px; color: var(--ysp-muted, #6c6c70); }
.ysp-d2-line b { flex: none; font-size: 16px; font-weight: 700; color: var(--ysp-text, #1c1c1e); font-variant-numeric: tabular-nums; }
.ysp-d2-total { display: flex; align-items: baseline; justify-content: space-between; padding-top: 12px; }
.ysp-d2-total span { font-size: 15px; font-weight: 600; color: var(--ysp-muted, #6c6c70); }
.ysp-d2-total strong { font-size: 22px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--ysp-text, #1c1c1e); }

.ysp-d2-note { font-size: 15px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ysp-text, #1c1c1e); }
.ysp-d2-facts { display: grid; gap: 12px; }
.ysp-d2-facts > div { display: flex; flex-direction: column; gap: 2px; }
.ysp-d2-facts strong { font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--ysp-text, #1c1c1e); overflow-wrap: anywhere; }
.ysp-d2-facts em { font-style: normal; font-size: 13px; color: var(--ysp-muted, #6c6c70); }

/* Quiet rows for repeat / no-show / cancel */
.ysp-d2-list { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.ysp-d2-row {
    display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 52px;
    margin: 0; padding: 10px 16px; border: 0; border-bottom: 1px solid rgba(60, 60, 67, .1);
    background: none; text-align: left; cursor: pointer; font: inherit; color: var(--ysp-text, #1c1c1e);
    -webkit-tap-highlight-color: transparent;
}
.ysp-d2-row:last-child { border-bottom: 0; }
.ysp-d2-row span { display: flex; flex-direction: column; gap: 1px; }
.ysp-d2-row strong { font-size: 16px; font-weight: 600; }
.ysp-d2-row em { font-style: normal; font-size: 13px; color: var(--ysp-muted, #6c6c70); }
.ysp-d2-row.danger strong { color: #d92d20; }
.ysp-d2-row:active { background: rgba(60, 60, 67, .06); }

/* Pinned action bar */
.ysp-d2-bar {
    position: sticky; bottom: 0; z-index: 4; display: flex; gap: 10px; margin: auto -16px calc(-24px - var(--safe-bottom, env(safe-area-inset-bottom, 0px)));
    padding: 12px 16px calc(12px + var(--safe-bottom, env(safe-area-inset-bottom, 0px)));
    background: rgba(242, 242, 247, .92); border-top: 1px solid rgba(60, 60, 67, .12);
    -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
}
.ysp-d2-btn {
    flex: 1 1 0; min-height: 52px; padding: 0 16px; border: 0; border-radius: 14px; cursor: pointer;
    font: inherit; font-size: 17px; font-weight: 750; letter-spacing: -.01em; -webkit-tap-highlight-color: transparent;
}
.ysp-d2-btn.primary { background: var(--ysp-accent, #0a84ff); color: #fff; box-shadow: 0 6px 16px color-mix(in srgb, var(--ysp-accent, #0a84ff) 30%, transparent); }
.ysp-d2-btn.secondary { background: var(--ysp-surface, #fff); color: var(--ysp-text, #1c1c1e); box-shadow: 0 0 0 1px rgba(60, 60, 67, .18); }
.ysp-d2-btn:active { transform: scale(.985); }
.ysp-d2 .ysp-design-reference { padding: 16px; }

@media (min-width: 720px) {
    .ysp-d2 { max-width: 680px; margin: 0 auto; border-radius: 0; }
}

/* ---- 10. Customer profile, add-appointment form, Today cards (4.11.0 r34) ---- */

/* Customer profile */
.ysp-d2-name { font-size: 26px; line-height: 1.15; font-weight: 800; letter-spacing: -.02em; color: var(--ysp-text, #1c1c1e); overflow-wrap: anywhere; }
#ysp-detail-overlay .ysp-d2 .ysp-client-facts {
    display: grid !important; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 14px 16px;
    margin: 14px 0 0 !important; padding: 14px 0 0 !important; border-top: 1px solid rgba(60, 60, 67, .1);
}
#ysp-detail-overlay .ysp-d2 .ysp-client-facts > * {
    display: flex; flex-direction: column; gap: 2px; min-width: 0; margin: 0 !important; padding: 0 !important;
    border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important;
    text-align: left; font: inherit;
}
#ysp-detail-overlay .ysp-d2 .ysp-client-facts span { font-size: 11px !important; font-weight: 700; letter-spacing: .06em !important; text-transform: uppercase; color: var(--ysp-muted, #6c6c70) !important; }
#ysp-detail-overlay .ysp-d2 .ysp-client-facts strong { font-size: 15px !important; font-weight: 650; line-height: 1.35 !important; color: var(--ysp-text, #1c1c1e); overflow-wrap: anywhere; }
#ysp-detail-overlay .ysp-d2 .ysp-client-fact-btn { cursor: pointer; -webkit-tap-highlight-color: transparent; }
#ysp-detail-overlay .ysp-d2 .ysp-client-fact-btn strong { color: var(--ysp-accent, #0a84ff); }

#ysp-detail-overlay .ysp-d2 .ysp-loyalty-panel {
    display: block; margin: 0 !important; padding: 16px !important; border: 0 !important; border-radius: 16px;
    background: var(--ysp-surface, #fff); box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}
.ysp-d2 .ysp-loyalty-header h3 { margin: 0 !important; font-size: 17px !important; font-weight: 750 !important; letter-spacing: -.01em; text-transform: none; color: var(--ysp-text, #1c1c1e); }
.ysp-d2 .ysp-loyalty-link { padding: 6px 4px !important; font-size: 14px; font-weight: 650; color: var(--ysp-accent, #0a84ff) !important; text-decoration: none !important; }
.ysp-d2 .ysp-loyalty-balance { margin-top: 8px; font-size: 36px; }
.ysp-d2 .ysp-loyalty-balance span { font-size: 16px; }
.ysp-d2 .ysp-loyalty-source { margin: 2px 0 14px; }
.ysp-d2 .ysp-loyalty-progress { padding: 12px 14px; border-radius: 12px; background: var(--ysp-canvas, #f2f2f7); }
.ysp-d2 .ysp-loyalty-progress progress { margin: 10px 0 6px; }
.ysp-d2 .ysp-loyalty-panel h4 { margin: 18px 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ysp-muted, #6c6c70); }
.ysp-d2 .ysp-loyalty-reward { padding: 12px 14px; border-radius: 12px; }
.ysp-d2 .ysp-loyalty-reward strong { font-size: 15px; }
.ysp-d2 .ysp-loyalty-use { min-height: 40px; border-radius: 10px !important; }
.ysp-d2 .ysp-loyalty-activity { margin-top: 16px; border-top: 1px solid rgba(60, 60, 67, .1); padding-top: 4px; }
.ysp-d2 .ysp-loyalty-activity summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; font-size: 15px; font-weight: 700; color: var(--ysp-text, #1c1c1e); }
.ysp-d2 .ysp-loyalty-activity ul { margin: 0; padding: 0; list-style: none; }
.ysp-d2 .ysp-loyalty-event { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(60, 60, 67, .08); }
.ysp-d2 .ysp-loyalty-event:last-child { border-bottom: 0; }
.ysp-d2 .ysp-loyalty-event > span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ysp-d2 .ysp-loyalty-event strong { font-size: 14px; font-weight: 650; }
.ysp-d2 .ysp-loyalty-event small { font-size: 12px; color: var(--ysp-muted, #6c6c70); }
.ysp-d2 .ysp-loyalty-event b { flex: none; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ysp-d2 .ysp-loyalty-event b.positive { color: #067647; }
.ysp-d2 button.ysp-activity-more {
    display: block; width: 100%; margin: 8px 0 0; min-height: 42px; border-radius: 12px !important; text-align: center;
    background: var(--ysp-canvas, #f2f2f7) !important; font-size: 14px; font-weight: 650;
}
.ysp-d2 button.ysp-activity-more[hidden] { display: none; }
#ysp-detail-overlay .ysp-d2 .ysp-square-section h3 { margin: 0 0 10px !important; font-size: 17px !important; font-weight: 750 !important; letter-spacing: -.01em !important; text-transform: none !important; color: var(--ysp-text, #1c1c1e) !important; }
.ysp-d2-client .ysp-client-history-section .ysp-square-row-action { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 48px; padding: 0 14px; border: 1px solid rgba(60, 60, 67, .14); border-radius: 12px; background: #fafafc; cursor: pointer; font: inherit; }
.ysp-d2-client .ysp-client-history-section .ysp-square-row-action span { font-size: 15px; font-weight: 600; color: var(--ysp-text, #1c1c1e); }
.ysp-d2-client .ysp-client-history-section .ysp-square-row-action strong { font-size: 14px; font-weight: 650; color: var(--ysp-accent, #0a84ff); }

#ysp-detail-overlay .ysp-client-detail-top:has(+ .ysp-d2) { justify-content: space-between !important; padding-left: 14px !important; padding-right: 14px !important; gap: 8px; }
#ysp-detail-overlay .ysp-client-detail-top:has(+ .ysp-d2) .ysp-detail-close { flex: 0 0 40px !important; width: 40px !important; height: 40px !important; font-size: 28px !important; }
#ysp-detail-overlay .ysp-client-detail-top:has(+ .ysp-d2) .ysp-d2-title { flex: 1; text-align: center; }

/* Add / edit appointment */
#ysp-editor-body:has(.ysp-ed), #ysp-editor-overlay .ysp-sheet:has(.ysp-ed) { padding-bottom: 0 !important; }
#ysp-editor-overlay .ysp-sheet:has(.ysp-ed) .ysp-editor-toolbar { background: var(--ysp-canvas, #f2f2f7) !important; border-bottom-color: transparent !important; }
#ysp-editor-overlay .ysp-sheet:has(.ysp-ed), #ysp-editor-body:has(.ysp-ed) { background: var(--ysp-canvas, #f2f2f7); }
#ysp-editor-body .ysp-ed { display: flex; flex-direction: column; gap: 12px; padding-bottom: 0; }
#ysp-editor-body .ysp-ed > .ysp-sheet-time { margin: 4px 2px 0; font-size: 28px; }
.ysp-ed-card { margin: 0; padding: 16px; border-radius: 16px; background: var(--ysp-surface, #fff); box-shadow: 0 1px 2px rgba(0, 0, 0, .04); }
.ysp-ed-card h3 { margin: 0 0 4px; font-size: 17px; font-weight: 750; letter-spacing: -.01em; color: var(--ysp-text, #1c1c1e); }
.ysp-ed-card .ysp-editor-label { display: block; margin: 12px 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ysp-muted, #6c6c70); }
.ysp-ed-card .ysp-editor-input, .ysp-ed-card .ysp-editor-select, .ysp-ed-card .ysp-editor-textarea {
    display: block; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; margin: 0;
    min-height: 48px; padding: 0 14px; border: 1px solid rgba(60, 60, 67, .16); border-radius: 12px;
    background: #fafafc; color: var(--ysp-text, #1c1c1e); font: inherit; font-size: 16px; text-align: left;
    -webkit-appearance: none; appearance: none;
}
.ysp-ed-card .ysp-editor-select { padding-right: 38px; background-image: linear-gradient(45deg, transparent 50%, #8e8e93 50%), linear-gradient(135deg, #8e8e93 50%, transparent 50%); background-position: calc(100% - 20px) 21px, calc(100% - 15px) 21px; background-size: 5px 5px; background-repeat: no-repeat; }
.ysp-ed-card .ysp-editor-textarea { min-height: 92px; padding: 12px 14px; resize: vertical; }
.ysp-ed-card .ysp-editor-input:focus, .ysp-ed-card .ysp-editor-select:focus, .ysp-ed-card .ysp-editor-textarea:focus { outline: 0; border-color: var(--ysp-accent, #0a84ff); background: #fff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--ysp-accent, #0a84ff) 18%, transparent); }
.ysp-ed-card input[type="date"], .ysp-ed-card input[type="time"] { display: flex; align-items: center; line-height: 48px; }
.ysp-ed-card input[type="date"]::-webkit-date-and-time-value, .ysp-ed-card input[type="time"]::-webkit-date-and-time-value { text-align: left; margin: 0; }
.ysp-ed-card .ysp-editor-grid, .ysp-ed-card .ysp-editor-datetime { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 0 10px; }
.ysp-ed-card .ysp-editor-grid > div { min-width: 0; }
.ysp-ed-card .ysp-service-options { margin: 0; display: grid; gap: 8px; }
.ysp-ed-bar {
    position: sticky; bottom: 0; z-index: 4; display: flex !important; gap: 10px; margin: 4px -18px 0 !important;
    padding: 12px 18px calc(12px + var(--safe-bottom, env(safe-area-inset-bottom, 0px))) !important;
    background: rgba(242, 242, 247, .92); border-top: 1px solid rgba(60, 60, 67, .12);
    -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
}
.ysp-ed-bar .ysp-action-btn { flex: 1 1 0; width: auto !important; min-height: 52px; margin: 0 !important; padding: 0 16px; border-radius: 14px !important; font-size: 17px !important; font-weight: 750 !important; cursor: pointer; }
.ysp-ed-bar .ysp-action-btn.complete { flex: 2 1 0; border: 0 !important; background: var(--ysp-accent, #0a84ff) !important; color: #fff !important; box-shadow: 0 6px 16px color-mix(in srgb, var(--ysp-accent, #0a84ff) 30%, transparent); }
.ysp-ed-bar .ysp-action-btn.cancel { border: 0 !important; background: var(--ysp-surface, #fff) !important; color: var(--ysp-text, #1c1c1e) !important; box-shadow: 0 0 0 1px rgba(60, 60, 67, .18) !important; }

/* Today / Next client cards */
.yatoon-staff-portal-page article.ysp-next-client {
    display: block !important; position: relative; margin: 0 0 12px !important; padding: 0 !important; overflow: hidden;
    border-width: 0 0 0 4px !important; border-radius: 6px 16px 16px 6px !important;
    background: var(--ysp-surface, #fff) !important; box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 0 0 1px rgba(60, 60, 67, .07) !important;
}
.yatoon-staff-portal-page article.ysp-next-client .ysp-today-open {
    display: grid !important; grid-template-columns: 76px minmax(0, 1fr) !important; grid-template-areas: "time main" "time meta";
    align-items: start; gap: 2px 12px; width: 100%; margin: 0 !important; padding: 14px 16px 12px !important;
    border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important;
    text-align: left !important; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.yatoon-staff-portal-page article.ysp-next-client .ysp-next-time {
    grid-area: time; margin: 2px 0 0 !important; padding: 0 !important; text-align: left !important; white-space: nowrap;
    font-size: 15px !important; font-weight: 800 !important; letter-spacing: -.01em; color: var(--ysp-text, #1c1c1e) !important; background: none !important;
}
.yatoon-staff-portal-page article.ysp-next-client .ysp-today-open > span:nth-child(2) { grid-area: main; display: flex; flex-direction: column; gap: 2px; min-width: 0; text-align: left !important; padding: 0 !important; margin: 0 !important; }
.yatoon-staff-portal-page article.ysp-next-client .ysp-today-open > span:nth-child(2) strong { font-size: 17px !important; font-weight: 750 !important; line-height: 1.25; letter-spacing: -.01em; color: var(--ysp-text, #1c1c1e) !important; overflow-wrap: anywhere; }
.yatoon-staff-portal-page article.ysp-next-client .ysp-today-open > span:nth-child(2) em { font-style: normal !important; font-size: 14px !important; line-height: 1.35; color: var(--ysp-muted, #6c6c70) !important; overflow-wrap: anywhere; }
.yatoon-staff-portal-page article.ysp-next-client .ysp-today-card-meta {
    grid-area: meta; grid-column: 2 !important; display: flex !important; flex-direction: row !important; flex-wrap: wrap; align-items: center !important; justify-content: flex-start !important; min-width: 0 !important; gap: 4px 10px; margin: 6px 0 0 !important; padding: 0 !important; text-align: left !important;
}
.yatoon-staff-portal-page article.ysp-next-client .ysp-today-card-meta .ysp-status-badge { margin: 0 !important; font-size: 12px; padding: 3px 10px; }
.yatoon-staff-portal-page article.ysp-next-client .ysp-today-card-meta em { font-style: normal !important; font-size: 13px !important; font-weight: 600; color: var(--ysp-muted, #6c6c70) !important; }
.yatoon-staff-portal-page article.ysp-next-client .ysp-today-card-meta b { font-size: 13px !important; font-weight: 750; color: #b42318 !important; }
.yatoon-staff-portal-page article.ysp-next-client .ysp-today-quick {
    display: block !important; width: calc(100% - 32px) !important; min-height: 44px; margin: 0 16px 14px !important; padding: 0 16px !important;
    border: 0 !important; border-radius: 12px !important; cursor: pointer; font: inherit; font-size: 15px !important; font-weight: 700 !important; text-align: center;
    background: color-mix(in srgb, var(--ysp-accent, #0a84ff) 10%, transparent) !important; color: var(--ysp-accent, #0a84ff) !important; box-shadow: none !important;
}
.yatoon-staff-portal-page article.ysp-next-client .ysp-today-quick:active { filter: brightness(.95); }

/* ---- 11. Calendar settings (4.11.0 r34) ---- */
#ysp-detail-overlay.ysp-settings-overlay .ysp-sheet-body:has(.ysp-cs) { background: var(--ysp-canvas, #f2f2f7); padding: 0 16px calc(24px + var(--safe-bottom, env(safe-area-inset-bottom, 0px))) !important; }
#ysp-detail-overlay.ysp-settings-overlay .ysp-sheet:has(.ysp-cs) { background: var(--ysp-canvas, #f2f2f7) !important; }
.ysp-cs .ysp-settings-head {
    min-height: calc(56px + var(--safe-top, env(safe-area-inset-top, 0px))); margin: 0 -16px 14px !important;
    padding: calc(8px + var(--safe-top, env(safe-area-inset-top, 0px))) 14px 8px !important;
    background: rgba(242, 242, 247, .92); border-bottom: 1px solid rgba(60, 60, 67, .12);
    -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
}
.ysp-cs .ysp-settings-head strong { font-size: 17px; font-weight: 700; letter-spacing: -.01em; color: var(--ysp-text, #1c1c1e); }
#ysp-detail-overlay.ysp-settings-overlay .ysp-cs .ysp-settings-close { flex: 0 0 40px !important; width: 40px !important; min-width: 40px !important; height: 40px !important; min-height: 40px !important; background: var(--ysp-surface, #fff) !important; box-shadow: 0 0 0 1px rgba(60, 60, 67, .1) !important; }
#ysp-detail-overlay.ysp-settings-overlay .ysp-cs .ysp-settings-done {
    position: static !important; width: auto !important; min-width: 0 !important; height: 40px !important; padding: 0 18px !important;
    border-radius: 999px !important; background: var(--ysp-accent, #0a84ff) !important; color: #fff !important; font-size: 15px !important; font-weight: 700 !important;
}
.ysp-cs .ysp-cs-card, .ysp-settings-panel section.ysp-cs-card {
    margin: 0 0 12px !important; padding: 16px !important; border: 0 !important; border-radius: 16px;
    background: var(--ysp-surface, #fff); box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}
.ysp-cs .ysp-cs-card h3 { margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ysp-muted, #6c6c70); }
.ysp-cs-seg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 12px; background: #eeeef2; }
.ysp-cs-seg-opt { position: relative; display: block; margin: 0; cursor: pointer; }
.ysp-cs-seg-opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ysp-cs-seg-opt span { display: block; min-height: 40px; line-height: 40px; border-radius: 9px; text-align: center; font-size: 15px; font-weight: 600; color: var(--ysp-muted, #6c6c70); }
.ysp-cs-seg-opt input:checked + span { background: var(--ysp-surface, #fff); color: var(--ysp-text, #1c1c1e); font-weight: 750; box-shadow: 0 1px 3px rgba(0, 0, 0, .14); }
.ysp-cs-seg-opt input:focus-visible + span { outline: 2px solid var(--ysp-accent, #0a84ff); outline-offset: 1px; }
.ysp-cs-hint { margin: 0 0 4px; font-size: 13px; line-height: 1.4; color: var(--ysp-muted, #6c6c70); }
.ysp-cs-list { display: flex; flex-direction: column; }
.ysp-cs .ysp-cs-emp { border-bottom: 1px solid rgba(60, 60, 67, .08); }
.ysp-cs .ysp-cs-emp:last-child { border-bottom: 0; }
.ysp-cs .ysp-settings-row { min-height: 56px; margin: 0; padding: 0; border: 0; gap: 12px; font-size: 16px; font-weight: 600; color: var(--ysp-text, #1c1c1e); cursor: pointer; }
.ysp-cs .ysp-settings-row.employee span { flex: 1; min-width: 0; gap: 12px; }
button.ysp-cs-swatch { position: relative; flex: none; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: var(--c, #84cc16); box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(60, 60, 67, .22); cursor: pointer; -webkit-tap-highlight-color: transparent; }
button.ysp-cs-swatch::before { content: ''; position: absolute; inset: -9px; }
.ysp-cs-palette { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px 10px; padding: 2px 4px 16px 4px; }
.ysp-cs-palette[hidden] { display: none; }
button.ysp-cs-chip { justify-self: center; width: 100%; max-width: 40px; aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; background: var(--c); cursor: pointer; -webkit-tap-highlight-color: transparent; }
button.ysp-cs-chip.is-current { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--c); }
button.ysp-cs-chip:active { transform: scale(.92); }
.ysp-cs-order { flex: none; min-width: 24px; height: 24px; padding: 0 6px; box-sizing: border-box; border-radius: 12px; background: var(--ysp-canvas, #f2f2f7); color: var(--ysp-muted, #6c6c70); font-size: 12px; font-weight: 700; line-height: 24px; text-align: center; font-variant-numeric: tabular-nums; }
.ysp-cs-order:empty { visibility: hidden; }
.ysp-cs .ysp-settings-row.employee input[type="checkbox"] {
    -webkit-appearance: none; appearance: none; flex: none; width: 26px; height: 26px; margin: 0; border: 2px solid #c7c7cc; border-radius: 50%; background: transparent; cursor: pointer;
}
.ysp-cs .ysp-settings-row.employee input[type="checkbox"]:checked {
    border-color: var(--ysp-accent, #0a84ff); background: var(--ysp-accent, #0a84ff) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
}

/* ---- 12. "New version" bar (4.11.0) ---- */
.ysp-update-bar{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:100000;border:0;border-radius:14px;padding:14px 16px;background:#111827;color:#fff;font:600 15px/1.3 system-ui,-apple-system,sans-serif;text-align:center;box-shadow:0 8px 24px rgba(0,0,0,.25);cursor:pointer}

/* ---- 13. Customer order and A-Z index (4.11.0) ---- */
.yatoon-staff-portal-page .ysp-sort-bar { display: flex; gap: 8px; margin: 0 0 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.yatoon-staff-portal-page .ysp-sort-bar::-webkit-scrollbar { display: none; }
.yatoon-staff-portal-page .ysp-sort-bar button {
    flex: 0 0 auto; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--ysp-border, #e5e5ea) !important;
    background: var(--ysp-surface, #fff) !important; color: var(--ysp-text, #1c1c1e) !important; font-size: 14px; font-weight: 600; cursor: pointer;
}
.yatoon-staff-portal-page .ysp-sort-bar button.active { background: var(--ysp-accent, #0a84ff) !important; border-color: var(--ysp-accent, #0a84ff) !important; color: #fff !important; }
.yatoon-staff-portal-page .ysp-client-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.yatoon-staff-portal-page .ysp-client-meta small { font-size: 11px; font-weight: 500; color: var(--ysp-muted, #6c6c70); }
.yatoon-staff-portal-page .ysp-az-head { scroll-margin-top: 150px; padding: 8px 4px 0; font-size: 13px; font-weight: 700; letter-spacing: .08em; color: var(--ysp-accent, #0a84ff); }
.ysp-az-rail {
    position: fixed; right: 2px; top: 168px; bottom: 96px; z-index: 120; width: 22px; display: flex; flex-direction: column; justify-content: space-between; align-items: center;
    padding: 2px 0; touch-action: none; user-select: none; -webkit-user-select: none; font-size: 11px; font-weight: 700; line-height: 1; color: var(--ysp-accent, #0a84ff);
}
.ysp-az-rail span.off { opacity: .3; }
.ysp-az-bubble {
    position: fixed; left: 50%; top: 42%; transform: translate(-50%, -50%); z-index: 140; width: 76px; height: 76px; border-radius: 20px; display: none; align-items: center; justify-content: center;
    background: rgba(17,24,39,.82); color: #fff; font-size: 38px; font-weight: 700; pointer-events: none;
}
.ysp-az-bubble.show { display: flex; }
.yatoon-staff-portal-page .ysp-client-list:has(.ysp-az-head) { padding-right: 18px; }