/*
 * 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; }
}