/*
 * Yatoon admin 4.10 — one calm layout for every Yatoon admin screen.
 *
 * A final layer on top of the existing admin styles: shared chrome (sidebar, top bar,
 * page title, tabs), cards, buttons, forms, notices and tables. Each product sets its own
 * accent through --y2-accent / --y2-accent-soft / --y2-accent-ink; the structure is shared.
 * Colour-scheme aware: surfaces and text come from the --y4-* tokens the dark scheme remaps.
 */

body.yatoon-app-shell-on {
    --y2-bg: var(--y4-canvas, #faf8f5);
    --y2-surface: var(--y4-surface, #ffffff);
    --y2-ink: var(--y4-text, #1c1917);
    --y2-ink-soft: color-mix(in srgb, var(--y2-ink) 72%, var(--y2-bg));
    --y2-muted: var(--y4-muted, #78716c);
    --y2-line: var(--y4-border, #ebe6df);
    --y2-line-strong: var(--y4-border-strong, #d9d2c9);
    --y2-accent: #db2777;
    --y2-accent-soft: color-mix(in srgb, var(--y2-accent) 11%, var(--y2-surface));
    --y2-accent-ink: #9d174d;
    --y2-primary: var(--y2-ink);
    --y2-primary-text: #fff;
    --y2-radius: 16px;
    --y2-radius-sm: 12px;
    --y2-shadow: 0 1px 2px rgba(28, 25, 23, .04), 0 8px 24px rgba(28, 25, 23, .04);
    --yapp-surface-2: var(--y2-bg);
    --yapp-border: var(--y2-line);
    --yapp-radius: var(--y2-radius-sm);
}
body.yatoon-app-shell-on.yatoon-color-scheme-dark {
    --y2-primary: #f5f5f4;
    --y2-primary-text: #1c1917;
    --y2-accent-ink: #f9a8d4;
}

/* ---- Page canvas -------------------------------------------------------- */
body.yatoon-app-shell-on,
body.yatoon-app-shell-on #wpwrap,
body.yatoon-app-shell-on #wpcontent,
body.yatoon-app-shell-on #wpbody { background: var(--y2-bg) !important; }
body.yatoon-app-shell-on #wpbody-content { padding-bottom: 48px; }
body.yatoon-app-shell-on .wrap { max-width: 1280px; }

/* ---- Sidebar ------------------------------------------------------------ */
body.yatoon-app-shell-on .yatoon-app-sidebar {
    background: var(--y2-bg) !important; border-right: 1px solid var(--y2-line) !important; box-shadow: none !important;
}
body.yatoon-app-shell-on .yatoon-app-brand {
    padding: 22px 22px 14px !important; border-bottom: 0 !important; font-size: 18px !important; font-weight: 800 !important; letter-spacing: -.01em; color: var(--y2-ink) !important;
}
body.yatoon-app-shell-on .yatoon-app-nav { padding: 6px 12px !important; }
body.yatoon-app-shell-on .yatoon-app-nav a {
    min-height: 44px; padding: 0 14px !important; border-radius: var(--y2-radius-sm) !important; gap: 12px;
    color: var(--y2-ink-soft) !important; font-size: 14.5px !important; font-weight: 500 !important; transition: background .12s ease, color .12s ease;
}
body.yatoon-app-shell-on .yatoon-app-nav a .dashicons { color: var(--y2-muted); font-size: 20px; width: 20px; height: 20px; }
body.yatoon-app-shell-on .yatoon-app-nav a:hover { background: color-mix(in srgb, var(--y2-ink) 5%, transparent) !important; color: var(--y2-ink) !important; }
body.yatoon-app-shell-on .yatoon-app-nav a.is-active,
body.yatoon-app-shell-on .yatoon-app-nav a.is-active:hover,
body.yatoon-app-shell-on .yatoon-app-nav a[aria-current="page"] {
    background: var(--y2-accent-soft) !important; color: var(--y2-accent-ink) !important; font-weight: 700 !important;
}
body.yatoon-app-shell-on .yatoon-app-nav a.is-active .dashicons,
body.yatoon-app-shell-on .yatoon-app-nav a[aria-current="page"] .dashicons { color: var(--y2-accent) !important; }
body.yatoon-app-shell-on { --yapp-active-bg: var(--y2-accent-soft); --yapp-active-text: var(--y2-accent-ink); }
body.yatoon-app-shell-on .yatoon-app-nav .yatoon-app-nav-group a.is-active,
body.yatoon-app-shell-on .yatoon-app-nav-group.is-flat a.is-active,
body.yatoon-app-shell-on .yatoon-app-nav a.is-active {
    background: var(--y2-accent-soft) !important; color: var(--y2-accent-ink) !important; border-color: transparent !important; box-shadow: none !important; transform: none !important;
}
body.yatoon-app-shell-on .yatoon-app-nav a { transition: none; }
body.yatoon-app-shell-on .yatoon-app-sidebar-footer { border-top: 0 !important; padding: 12px 22px 18px !important; }
body.yatoon-app-shell-on .yatoon-app-sidebar-wp { color: var(--y2-ink-soft); }

/* ---- Top bar ------------------------------------------------------------ */
body.yatoon-app-shell-on .yatoon-app-topbar {
    background: color-mix(in srgb, var(--y2-bg) 88%, transparent) !important; backdrop-filter: saturate(1.4) blur(10px);
    border-bottom: 1px solid var(--y2-line) !important; box-shadow: none !important;
}
body.yatoon-app-shell-on .yatoon-app-search input {
    height: 40px; border-radius: 999px !important; background: var(--y2-surface) !important; border: 1px solid var(--y2-line) !important; font-size: 14px;
}
body.yatoon-app-shell-on .yatoon-app-search input:focus { border-color: var(--y2-accent) !important; box-shadow: 0 0 0 3px var(--y2-accent-soft) !important; }
body.yatoon-app-shell-on .yatoon-app-quick-create {
    height: 40px; padding: 0 18px !important; border-radius: 999px !important; background: var(--y2-primary) !important; color: var(--y2-primary-text) !important; font-weight: 700; border: 0 !important;
}
body.yatoon-app-shell-on .yatoon-app-topbar-icon,
body.yatoon-app-shell-on .yatoon-app-actions-toggle,
body.yatoon-app-shell-on .yatoon-app-menu-toggle {
    border-radius: 999px !important; border: 1px solid var(--y2-line) !important; background: var(--y2-surface) !important; color: var(--y2-ink-soft) !important;
}

/* ---- Page header: kicker removed, one big title ------------------------- */
body.yatoon-app-shell-on .yatoon-page-kicker { display: none !important; }
body.yatoon-app-shell-on .wrap > h1,
body.yatoon-app-shell-on .wrap > .yatoon-page-header h1 {
    margin: 8px 0 6px !important; padding: 0 !important; font-size: 34px !important; line-height: 1.15 !important; font-weight: 800 !important;
    letter-spacing: -.02em; color: var(--y2-ink) !important;
}
body.yatoon-app-shell-on .wrap > p.description,
body.yatoon-app-shell-on .yatoon-admin-subtitle { color: var(--y2-muted) !important; font-size: 14.5px; max-width: 760px; }

/* ---- Section tabs: flat text tabs with an underline -------------------- */
body.yatoon-app-shell-on nav.yat-context {
    display: flex; align-items: center; gap: 22px; margin: 4px 0 18px !important; padding: 0 !important;
    background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--y2-line) !important; border-radius: 0 !important; box-shadow: none !important;
}
body.yatoon-app-shell-on nav.yat-context .yat-context-label { display: none !important; }
body.yatoon-app-shell-on nav.yat-context .yat-context-links { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
body.yatoon-app-shell-on nav.yat-context a,
body.yatoon-app-shell-on nav.yat-context summary {
    position: relative; padding: 12px 14px !important; border-radius: 0 !important; background: transparent !important; color: var(--y2-ink-soft) !important;
    font-size: 14.5px !important; font-weight: 500 !important; text-decoration: none; cursor: pointer; list-style: none;
}
body.yatoon-app-shell-on nav.yat-context a:hover,
body.yatoon-app-shell-on nav.yat-context summary:hover { color: var(--y2-ink) !important; }
body.yatoon-app-shell-on nav.yat-context a[aria-current="page"] { color: var(--y2-ink) !important; font-weight: 700 !important; }
body.yatoon-app-shell-on nav.yat-context a[aria-current="page"]::after {
    content: ''; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--y2-accent);
}

/* ---- Cards -------------------------------------------------------------- */
body.yatoon-app-shell-on :is(.sbs-card, .yatoon-card, .postbox, .yd-card, .yd-panel) {
    background: var(--y2-surface) !important; border: 1px solid var(--y2-line) !important; border-radius: var(--y2-radius) !important; box-shadow: var(--y2-shadow) !important;
}
body.yatoon-app-shell-on .sbs-card { padding: 22px 24px; margin-bottom: 18px; }
body.yatoon-app-shell-on .sbs-card > h2:first-child { margin-top: 0; font-size: 18px; font-weight: 700; letter-spacing: -.01em; }

/* ---- Buttons ------------------------------------------------------------ */
body.yatoon-app-shell-on :is(.wrap, .yatoon-app-sidebar, .yatoon-app-topbar) .button,
body.yatoon-app-shell-on :is(.wrap) a.button {
    min-height: 38px; padding: 0 16px; border-radius: var(--y2-radius-sm); border: 1px solid var(--y2-line-strong); background: var(--y2-surface);
    color: var(--y2-ink); font-weight: 600; font-size: 13.5px; line-height: 36px; box-shadow: none; transition: background .12s ease, border-color .12s ease;
}
body.yatoon-app-shell-on .wrap .button:hover { background: color-mix(in srgb, var(--y2-ink) 4%, var(--y2-surface)); border-color: var(--y2-ink-soft); color: var(--y2-ink); }
body.yatoon-app-shell-on .wrap .button.button-small { min-height: 32px; line-height: 30px; padding: 0 12px; font-size: 12.5px; border-radius: 10px; }
body.yatoon-app-shell-on .wrap .button.button-large { min-height: 44px; line-height: 42px; padding: 0 22px; font-size: 14.5px; }
body.yatoon-app-shell-on .wrap .button-primary,
body.yatoon-app-shell-on .wrap .button-primary:hover,
body.yatoon-app-shell-on .wrap .button-primary:focus {
    background: var(--y2-primary) !important; border-color: var(--y2-primary) !important; color: var(--y2-primary-text) !important; font-weight: 700;
}
body.yatoon-app-shell-on .wrap .button-primary:hover { filter: brightness(1.12); }
body.yatoon-app-shell-on .wrap .button:focus-visible,
body.yatoon-app-shell-on .wrap a:focus-visible { outline: 2px solid var(--y2-accent); outline-offset: 2px; box-shadow: none; }

/* ---- Forms -------------------------------------------------------------- */
body.yatoon-app-shell-on .wrap :is(input[type="text"], input[type="search"], input[type="email"], input[type="number"], input[type="url"], input[type="tel"], input[type="password"], input[type="date"], input[type="time"], select, textarea) {
    min-height: 40px; border-radius: var(--y2-radius-sm); border: 1px solid var(--y2-line-strong); background: var(--y2-surface); color: var(--y2-ink); box-shadow: none; font-size: 14px;
}
body.yatoon-app-shell-on .wrap textarea { min-height: 88px; }
body.yatoon-app-shell-on .wrap :is(input, select, textarea):focus { border-color: var(--y2-accent); box-shadow: 0 0 0 3px var(--y2-accent-soft); outline: 0; }
body.yatoon-app-shell-on .wrap .form-table th { font-weight: 600; color: var(--y2-ink); }
body.yatoon-app-shell-on .wrap .description { color: var(--y2-muted); }

/* ---- Notices: quiet cards instead of coloured bars --------------------- */
body.yatoon-app-shell-on .wrap .notice:not(.yatoon-keep-notice),
body.yatoon-app-shell-on #wpbody-content > .notice {
    margin: 0 0 12px; padding: 12px 16px; background: var(--y2-surface); border: 1px solid var(--y2-line); border-left-width: 1px;
    border-radius: var(--y2-radius-sm); box-shadow: none;
}
body.yatoon-app-shell-on .wrap .notice-success { background: color-mix(in srgb, #16a34a 8%, var(--y2-surface)); border-color: color-mix(in srgb, #16a34a 28%, var(--y2-line)); }
body.yatoon-app-shell-on .wrap .notice-warning { background: color-mix(in srgb, #d97706 8%, var(--y2-surface)); border-color: color-mix(in srgb, #d97706 30%, var(--y2-line)); }
body.yatoon-app-shell-on .wrap .notice-error { background: color-mix(in srgb, #dc2626 7%, var(--y2-surface)); border-color: color-mix(in srgb, #dc2626 30%, var(--y2-line)); }

/* ---- Tables ------------------------------------------------------------- */
body.yatoon-app-shell-on .sbs-admin-table-wrap,
body.yatoon-app-shell-on .yatoon-admin-table-scroll {
    background: var(--y2-surface); border: 1px solid var(--y2-line); border-radius: var(--y2-radius); box-shadow: var(--y2-shadow); overflow-x: auto;
}
body.yatoon-app-shell-on .wrap table.wp-list-table, body.yatoon-app-shell-on .wrap table.widefat {
    border: 0 !important; box-shadow: none !important; background: transparent !important; border-radius: 0;
}
body.yatoon-app-shell-on .wrap table.widefat thead th, body.yatoon-app-shell-on .wrap table.widefat thead td {
    padding: 14px 14px !important; background: color-mix(in srgb, var(--y2-ink) 3%, var(--y2-surface)) !important; border-bottom: 1px solid var(--y2-line) !important;
    color: var(--y2-muted) !important; font-size: 11.5px !important; font-weight: 700 !important; letter-spacing: .05em; text-transform: uppercase;
}
body.yatoon-app-shell-on .wrap table.widefat tbody td, body.yatoon-app-shell-on .wrap table.widefat tbody th {
    padding: 14px !important; border-bottom: 1px solid var(--y2-line) !important; vertical-align: middle; color: var(--y2-ink);
}
body.yatoon-app-shell-on .wrap table.widefat tbody tr:nth-child(even) { background: transparent !important; }
body.yatoon-app-shell-on .wrap table.widefat tbody tr:hover { background: color-mix(in srgb, var(--y2-ink) 3%, transparent) !important; }
body.yatoon-app-shell-on .wrap table.widefat tbody tr:last-child td { border-bottom: 0 !important; }
body.yatoon-app-shell-on .sbs-table-toolbar {
    padding: 14px 16px; margin: 0 0 14px; background: var(--y2-surface); border: 1px solid var(--y2-line); border-radius: var(--y2-radius); box-shadow: none;
}

/* ---- Settings screen: one slim header, sticky save bar, flat tabs ------- */
body.yatoon-app-shell-on .yat-settings-toprow { align-items: center; gap: 10px; margin: 2px 0 14px; }
body.yatoon-app-shell-on .yat-settings-toprow .yat-settings-browser { flex: 0 0 auto; position: relative; margin: 0 !important; border: 0; background: transparent; box-shadow: none; }
body.yatoon-app-shell-on .yat-settings-browser > summary {
    display: inline-flex; align-items: center; gap: 6px; min-height: 36px !important; padding: 0 14px !important; border: 1px solid var(--y2-line-strong);
    border-radius: 999px; background: var(--y2-surface); font-size: 13px !important; font-weight: 600 !important; color: var(--y2-ink) !important; list-style: none;
}
body.yatoon-app-shell-on .yat-settings-browser[open] .yatoon-settings-task-nav {
    position: absolute; z-index: 40; top: 42px; left: 0; width: min(760px, 86vw); padding: 18px !important; background: var(--y2-surface);
    border: 1px solid var(--y2-line); border-radius: var(--y2-radius); box-shadow: 0 18px 48px rgba(28, 25, 23, .14);
}
body.yatoon-app-shell-on .yatoon-settings-checklist-link {
    display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border: 1px solid var(--y2-line-strong); border-radius: 999px;
    background: var(--y2-surface); font-size: 13px; font-weight: 600; color: var(--y2-ink); text-decoration: none;
}
body.yatoon-app-shell-on .yat-settings-savebar {
    position: sticky; top: calc(var(--yapp-topbar-h, 56px) + 8px); z-index: 20; display: flex; align-items: center; gap: 14px; padding: 10px 14px !important; margin: 0 0 16px !important;
    background: color-mix(in srgb, var(--y2-surface) 92%, transparent) !important; backdrop-filter: blur(8px); border: 1px solid var(--y2-line) !important;
    border-radius: 14px !important; box-shadow: var(--y2-shadow) !important;
}
body.yatoon-app-shell-on .yatoon-subtab-nav {
    display: flex !important; gap: 4px; flex-wrap: wrap; padding: 0 !important; margin: 0 0 14px !important; background: transparent !important;
    border: 0 !important; border-bottom: 1px solid var(--y2-line) !important; border-radius: 0 !important; box-shadow: none !important;
}
body.yatoon-app-shell-on .yatoon-subtab-btn {
    position: relative; min-height: 0 !important; padding: 11px 14px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important;
    box-shadow: none !important; color: var(--y2-ink-soft) !important; font-size: 14.5px !important; font-weight: 500 !important;
}
body.yatoon-app-shell-on .yatoon-subtab-btn.is-active { color: var(--y2-ink) !important; font-weight: 700 !important; }
body.yatoon-app-shell-on .yatoon-subtab-btn.is-active::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--y2-accent); }
body.yatoon-app-shell-on .yatoon-settings-viewbar { padding: 0 !important; margin: 0 0 12px !important; background: transparent !important; border: 0 !important; justify-content: flex-end !important; gap: 12px; }
body.yatoon-app-shell-on .yatoon-settings-viewbar div span { display: none !important; }
body.yatoon-app-shell-on .yatoon-settings-viewbar strong { display: inline !important; font-size: 13px; font-weight: 600; color: var(--y2-muted) !important; }
body.yatoon-app-shell-on .sbs-card[style*="dbeafe"] { border: 1px solid var(--y2-line) !important; background: var(--y2-surface) !important; }
body.yatoon-app-shell-on .yatoon-jump-nav { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 0 14px !important; }

/* ---- Today: command banner as a calm light card ------------------------- */
body.yatoon-app-shell-on #yatoon-dashboard-wrap .yd-command {
    background: var(--y2-surface) !important; color: var(--y2-ink) !important; border: 1px solid var(--y2-line) !important;
    border-radius: var(--y2-radius) !important; box-shadow: var(--y2-shadow) !important; padding: 18px 22px !important;
}
body.yatoon-app-shell-on #yatoon-dashboard-wrap .yd-command-kicker { color: var(--y2-accent-ink) !important; }
body.yatoon-app-shell-on #yatoon-dashboard-wrap .yd-command-title { color: var(--y2-ink) !important; font-size: 22px; }
body.yatoon-app-shell-on #yatoon-dashboard-wrap .yd-command-sub { color: var(--y2-muted) !important; }
body.yatoon-app-shell-on #yatoon-dashboard-wrap .yd-command-actions .button { color: var(--y2-ink) !important; border-color: var(--y2-line-strong) !important; background: var(--y2-surface) !important; }
body.yatoon-app-shell-on #yatoon-dashboard-wrap .yd-command-actions .button-primary { color: var(--y2-primary-text) !important; background: var(--y2-primary) !important; border-color: var(--y2-primary) !important; }

/* ---- Bookings: the row action buttons share one quiet outlined style ---- */
body.yatoon-app-shell-on #sbs-bookings-table .sbs-toggle-group,
body.yatoon-app-shell-on #sbs-bookings-table .sbs-view-booking {
    background: var(--y2-surface) !important; color: var(--y2-ink) !important; border: 1px solid var(--y2-line-strong) !important; box-shadow: none !important;
}
body.yatoon-app-shell-on #sbs-bookings-table .sbs-toggle-group:hover,
body.yatoon-app-shell-on #sbs-bookings-table .sbs-view-booking:hover { border-color: var(--y2-accent) !important; color: var(--y2-accent-ink) !important; }

/* ==========================================================================
   Layout pass: settings rows, neutral cards.
   Every settings card used its own coloured border and a stacked label-over-field
   table. Cards are now one neutral style and each field is a row: label on the
   left, control and help text on the right, hairline between rows.
   ========================================================================== */
body.yatoon-app-shell-on .wrap .sbs-card[style] {
    border: 1px solid var(--y2-line) !important; border-left-width: 1px !important; background: var(--y2-surface) !important;
}
body.yatoon-app-shell-on .wrap form > .sbs-card,
body.yatoon-app-shell-on .wrap .yatoon-subtab-panel > .sbs-card,
body.yatoon-app-shell-on .wrap .yatoon-subtab-content > .sbs-card { max-width: 1040px; }
body.yatoon-app-shell-on .wrap .sbs-card > h2:first-child,
body.yatoon-app-shell-on .wrap .sbs-card > div:first-child > h2:first-child { font-size: 19px !important; font-weight: 800 !important; letter-spacing: -.01em; color: var(--y2-ink) !important; }
body.yatoon-app-shell-on .wrap .sbs-card > h2 + p.description,
body.yatoon-app-shell-on .wrap .sbs-card > h2 + p { color: var(--y2-muted); margin: 4px 0 14px; }
body.yatoon-app-shell-on .wrap .sbs-card h3[style] {
    margin: 26px 0 4px !important; padding-top: 22px; border-top: 1px solid var(--y2-line); color: var(--y2-ink) !important; font-size: 15px !important; font-weight: 700;
}

body.yatoon-app-shell-on .wrap .sbs-card table.form-table { display: block; width: 100%; margin: 6px 0 0 !important; }
body.yatoon-app-shell-on .wrap .sbs-card table.form-table > tbody { display: block; }
body.yatoon-app-shell-on .wrap .sbs-card table.form-table tr {
    display: grid; grid-template-columns: minmax(170px, 250px) minmax(0, 1fr); gap: 6px 36px; align-items: start;
    padding: 16px 0; border-top: 1px solid var(--y2-line); background: transparent !important;
}
body.yatoon-app-shell-on .wrap .sbs-card table.form-table tr:first-child { border-top: 0; }
body.yatoon-app-shell-on .wrap .sbs-card table.form-table th {
    display: block; width: auto !important; padding: 8px 0 0 !important; font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--y2-ink);
}
body.yatoon-app-shell-on .wrap .sbs-card table.form-table td { display: block; padding: 0 !important; min-width: 0; }
body.yatoon-app-shell-on .wrap .sbs-card table.form-table tr > :only-child,
body.yatoon-app-shell-on .wrap .sbs-card table.form-table tr > [colspan] { grid-column: 1 / -1; }
body.yatoon-app-shell-on .wrap .sbs-card table.form-table td > p.description,
body.yatoon-app-shell-on .wrap .sbs-card table.form-table td > .description { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: var(--y2-muted); }
body.yatoon-app-shell-on .wrap .sbs-card table.form-table td :is(input.regular-text, input.large-text, input[type="text"], input[type="url"], input[type="email"], select, textarea) { max-width: 560px; }
body.yatoon-app-shell-on .wrap .sbs-card table.form-table td :is(input.large-text, textarea.large-text, textarea) { width: 100%; }
body.yatoon-app-shell-on .wrap .sbs-card table.form-table td label { display: inline-flex; align-items: center; gap: 8px; }
@media (max-width: 782px) {
    body.yatoon-app-shell-on .wrap .sbs-card table.form-table tr { grid-template-columns: 1fr; gap: 4px; padding: 14px 0; }
    body.yatoon-app-shell-on .wrap .sbs-card table.form-table th { padding-top: 0 !important; }
}
body.yatoon-app-shell-on .wrap .sbs-card table.form-table { border: 0 !important; background: transparent !important; box-shadow: none !important; }
body.yatoon-app-shell-on .wrap:has(.yat-settings-savebar) { max-width: 1060px; }
body.yatoon-app-shell-on .wrap:has(.yat-settings-savebar) .sbs-card { max-width: none !important; }

/* ==========================================================================
   Layout pass: Staff list (desktop). The 13-column table becomes one two-line
   row per person: identity and status on top, services and portal details
   below. Markup and JS are unchanged; the cells are only re-placed on a grid.
   Phones and tablets keep the card layout from admin-mobile.css.
   ========================================================================== */
@media (min-width: 1101px) {
    body.yatoon-app-shell-on #sbs-staff-table.yatoon-resizable-table { display: block; width: 100% !important; min-width: 0 !important; table-layout: auto; }
    body.yatoon-app-shell-on :is(#sbs-staff-table, #sbs-bookings-table) thead { display: block; }
    body.yatoon-app-shell-on :is(#sbs-staff-table, #sbs-bookings-table) thead tr { display: flex; padding: 0; background: color-mix(in srgb, var(--y2-ink) 3%, var(--y2-surface)); border-bottom: 1px solid var(--y2-line); }
    body.yatoon-app-shell-on :is(#sbs-staff-table, #sbs-bookings-table) thead :is(th, td) { display: none; }
    body.yatoon-app-shell-on :is(#sbs-staff-table, #sbs-bookings-table) thead :is(th, td):first-child {
        display: flex; align-items: center; gap: 12px; width: auto !important; min-width: 0 !important; max-width: none !important; padding: 10px 18px !important; border: 0 !important; background: transparent !important;
    }
    body.yatoon-app-shell-on :is(#sbs-staff-table, #sbs-bookings-table) thead :is(th, td):first-child::after { content: attr(data-yatoon-mobile-label); font-size: 12px; font-weight: 600; color: var(--y2-muted); }
    body.yatoon-app-shell-on #sbs-staff-table tbody { display: block; }
    body.yatoon-app-shell-on #sbs-staff-table tbody tr {
        display: grid; grid-template-columns: 36px 56px minmax(0, 1.1fr) minmax(0, 1.4fr) 100px 120px minmax(0, 1.1fr) auto;
        grid-template-areas: "chk photo name email status online portal actions" ". id services services timeoff priority pin .";
        gap: 10px 16px; align-items: center; padding: 16px 18px; border-bottom: 1px solid var(--y2-line); background: transparent !important;
    }
    body.yatoon-app-shell-on #sbs-staff-table tbody tr:last-child { border-bottom: 0; }
    body.yatoon-app-shell-on #sbs-staff-table tbody td {
        width: auto !important; min-width: 0 !important; max-width: none !important; padding: 0 !important; border: 0 !important; overflow-wrap: anywhere;
    }
    body.yatoon-app-shell-on #sbs-staff-table td:nth-child(1)  { grid-area: chk; }
    body.yatoon-app-shell-on #sbs-staff-table td:nth-child(2)  { grid-area: id; }
    body.yatoon-app-shell-on #sbs-staff-table td:nth-child(3)  { grid-area: photo; }
    body.yatoon-app-shell-on #sbs-staff-table td:nth-child(4)  { grid-area: name; font-weight: 700; font-size: 15px; }
    body.yatoon-app-shell-on #sbs-staff-table td:nth-child(5)  { grid-area: priority; }
    body.yatoon-app-shell-on #sbs-staff-table td:nth-child(6)  { grid-area: email; }
    body.yatoon-app-shell-on #sbs-staff-table td:nth-child(7)  { grid-area: status; }
    body.yatoon-app-shell-on #sbs-staff-table td:nth-child(8)  { grid-area: online; }
    body.yatoon-app-shell-on #sbs-staff-table td:nth-child(9)  { grid-area: services; }
    body.yatoon-app-shell-on #sbs-staff-table td:nth-child(10) { grid-area: timeoff; }
    body.yatoon-app-shell-on #sbs-staff-table td:nth-child(11) { grid-area: portal; }
    body.yatoon-app-shell-on #sbs-staff-table td:nth-child(12) { grid-area: pin; }
    body.yatoon-app-shell-on #sbs-staff-table td:nth-child(13) { grid-area: actions; display: flex; gap: 6px; justify-content: flex-end; }
    /* Small caption above the secondary fields; the text comes from the column header (already translated by admin-mobile.js). */
    body.yatoon-app-shell-on #sbs-staff-table td:is(:nth-child(2), :nth-child(5), :nth-child(9), :nth-child(10), :nth-child(12), :nth-child(7), :nth-child(8), :nth-child(11))::before {
        content: attr(data-yatoon-mobile-label); display: block; margin-bottom: 3px; color: var(--y2-muted); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    }
    body.yatoon-app-shell-on .sbs-admin-table-wrap:has(#sbs-staff-table) .yatoon-table-x-scrollbar { display: none !important; }

    /* ---- Bookings: same idea. Top line = who, what, when, status; second line = the details. ---- */
    body.yatoon-app-shell-on #sbs-bookings-table.yatoon-resizable-table { display: block; width: 100% !important; min-width: 0 !important; table-layout: auto; }
    body.yatoon-app-shell-on #sbs-bookings-table tbody { display: block; }
    body.yatoon-app-shell-on #sbs-bookings-table tbody tr {
        display: grid; grid-template-columns: 36px minmax(0, 1.5fr) minmax(0, 1.3fr) minmax(0, 1.2fr) 150px 150px;
        grid-template-areas: "chk customer service date status actions" ". id staff price payment sync";
        gap: 8px 16px; align-items: start; padding: 14px 18px; border-bottom: 1px solid var(--y2-line);
    }
    body.yatoon-app-shell-on #sbs-bookings-table tbody tr:not([data-design-upload="1"]):not(.sbs-group-header) { background: transparent !important; }
    body.yatoon-app-shell-on #sbs-bookings-table tbody tr.sbs-group-header { background: color-mix(in srgb, var(--y2-ink) 3%, var(--y2-surface)) !important; }
    body.yatoon-app-shell-on #sbs-bookings-table tbody tr.sbs-group-row { padding-left: 34px; }
    body.yatoon-app-shell-on #sbs-bookings-table tbody tr:last-child { border-bottom: 0; }
    body.yatoon-app-shell-on #sbs-bookings-table tbody td {
        width: auto !important; min-width: 0 !important; max-width: none !important; padding: 0 !important; border: 0 !important; background: transparent; white-space: normal !important; overflow-wrap: anywhere;
    }
    body.yatoon-app-shell-on #sbs-bookings-table td:nth-child(1)  { grid-area: chk; }
    body.yatoon-app-shell-on #sbs-bookings-table td:nth-child(2)  { grid-area: id; }
    body.yatoon-app-shell-on #sbs-bookings-table td:nth-child(3)  { grid-area: customer; }
    body.yatoon-app-shell-on #sbs-bookings-table td:nth-child(4)  { grid-area: service; font-weight: 600; }
    body.yatoon-app-shell-on #sbs-bookings-table td:nth-child(5)  { grid-area: staff; }
    body.yatoon-app-shell-on #sbs-bookings-table td:nth-child(6)  { grid-area: date; font-weight: 600; }
    body.yatoon-app-shell-on #sbs-bookings-table td:nth-child(7)  { grid-area: price; }
    body.yatoon-app-shell-on #sbs-bookings-table td:nth-child(8)  { grid-area: status; }
    body.yatoon-app-shell-on #sbs-bookings-table td:nth-child(9)  { grid-area: payment; }
    body.yatoon-app-shell-on #sbs-bookings-table td:nth-child(10) { grid-area: sync; }
    body.yatoon-app-shell-on #sbs-bookings-table td:nth-child(11) { grid-area: actions; display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
    body.yatoon-app-shell-on #sbs-bookings-table td:is(:nth-child(2), :nth-child(5), :nth-child(7), :nth-child(8), :nth-child(9), :nth-child(10))::before {
        content: attr(data-yatoon-mobile-label); display: block; margin-bottom: 3px; color: var(--y2-muted); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    }
    body.yatoon-app-shell-on #sbs-bookings-table td:is(:nth-child(2), :nth-child(5), :nth-child(7), :nth-child(9), :nth-child(10)) { font-size: 12.5px; }
    body.yatoon-app-shell-on .sbs-admin-table-wrap:has(#sbs-bookings-table) .yatoon-table-x-scrollbar { display: none !important; }
}

@media (max-width: 782px) {
    body.yatoon-app-shell-on .yat-settings-savebar { position: static; flex-wrap: wrap; }
    body.yatoon-app-shell-on .yat-settings-browser[open] .yatoon-settings-task-nav { position: static; width: auto; margin-top: 8px; box-shadow: none; }
    body.yatoon-app-shell-on .wrap .sbs-card { padding: 16px; }
}


/* 4.10.0 admin refinement: compact list cards and easier long-report scanning. */
@media (min-width: 1101px) {
    body.yatoon-app-shell-on #sbs-staff-table { display:block; width:100% !important; min-width:0 !important; table-layout:auto; }
    body.yatoon-app-shell-on #sbs-bookings-table { display:block; width:100% !important; min-width:0 !important; table-layout:fixed; }
    body.yatoon-app-shell-on .sbs-bookings-page .sbs-admin-table-wrap { overflow:visible; }
    body.yatoon-app-shell-on #sbs-bookings-table thead,
    body.yatoon-app-shell-on #sbs-staff-table thead { display:block; }
    body.yatoon-app-shell-on #sbs-bookings-table tbody,
    body.yatoon-app-shell-on #sbs-staff-table tbody { display:block; }
    body.yatoon-app-shell-on #sbs-bookings-table tbody tr { grid-template-columns:36px minmax(0,1.5fr) minmax(0,1.3fr) minmax(0,1.2fr) minmax(115px,.9fr) minmax(132px,1fr); }
    body.yatoon-app-shell-on #sbs-bookings-table tbody tr > th.check-column { grid-area:chk; align-self:start; }
    body.yatoon-app-shell-on #sbs-bookings-table tbody tr.sbs-group-header > td { overflow-wrap:anywhere; }
    body.yatoon-app-shell-on #sbs-bookings-table td:nth-child(11) { align-self:start; }
    body.yatoon-app-shell-on #sbs-staff-table tbody tr { grid-template-columns:36px 56px minmax(115px,1fr) minmax(150px,1.15fr) 92px 110px minmax(140px,1fr) auto; gap:8px 12px; padding:14px 16px; }
    body.yatoon-app-shell-on #sbs-staff-table td:nth-child(11) .sbs-portal-permission-summary { display:-webkit-box !important; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; line-height:1.35; }
    body.yatoon-app-shell-on #sbs-staff-table .sbs-staff-services-help { display:none !important; }
    body.yatoon-app-shell-on #sbs-staff-table td:nth-child(13) { flex-wrap:wrap; }
}
body.yatoon-app-shell-on #yatoon-reports-wrap .yr-panel h2 { letter-spacing:-.01em; }
body.yatoon-app-shell-on #yatoon-reports-wrap .yr-table-wrap { scrollbar-width:thin; }
body.yatoon-app-shell-on #yatoon-reports-wrap .yr-jump-nav { position:sticky; top:32px; z-index:4; background:var(--y2-bg); }
@media (max-width:782px) {
    body.yatoon-app-shell-on #yatoon-reports-wrap .yr-jump-nav { top:0; overflow-x:auto; flex-wrap:nowrap; padding-bottom:10px; }
    body.yatoon-app-shell-on #yatoon-reports-wrap .yr-jump-nav a { white-space:nowrap; }
}