/* Square Booking Sync - Admin Styles */

/* ---------------------------------------------------------------------
 * Design tokens - shared colors, spacing, radius, and shadow values for
 * the Yatoon admin area. New admin UI should prefer these variables over
 * one-off hex colors so the whole back office reads as one product.
 * Existing inline styles are being migrated to these over time; when
 * touching an existing section, prefer swapping its hardcoded values for
 * the matching token below.
 * --------------------------------------------------------------------- */
:root {
    /* Brand */
    --yt-pink:        #ec4899;
    --yt-pink-dark:   #db2777;
    --yt-pink-tint:   #fff5f9;
    --yt-purple:      #7c3aed;

    /* Ink / text - aliased to the --adm-* system (defined later in this file)
     * so both naming schemes always resolve to the same value. CSS custom
     * properties resolve at use-time, not declaration order, so this is safe
     * regardless of where --adm-* is declared in the stylesheet. */
    --yt-ink:         var(--adm-ink, #111827);
    --yt-ink-2:       #172033;
    --yt-muted:       var(--adm-muted, #6b7280);
    --yt-muted-2:     #64748b;
    --yt-faint:       #9ca3af;

    /* Surfaces - aliased to --adm-* */
    --yt-bg:          var(--adm-surface2, #f9fafb);
    --yt-card:        var(--adm-surface, #ffffff);
    --yt-border:      var(--adm-line, #e5e7eb);
    --yt-border-soft: #f3f4f6;

    /* Status */
    --yt-success:      #16a34a;
    --yt-success-bg:    #dcfce7;
    --yt-success-ink:   #166534;
    --yt-warning:       #f59e0b;
    --yt-warning-bg:    #fef3c7;
    --yt-warning-ink:   #92400e;
    --yt-danger:        #dc2626;
    --yt-danger-bg:     #fee2e2;
    --yt-danger-ink:    #991b1b;
    --yt-info:          #3b82f6;
    --yt-info-bg:       #dbeafe;

    /* Shape - aliased to --adm-* where an equivalent exists */
    --yt-radius-sm:   var(--adm-radius-sm, 6px);
    --yt-radius:      var(--adm-radius, 10px);
    --yt-radius-lg:   14px;
    --yt-radius-pill: 999px;

    /* Shadow */
    --yt-shadow-sm:   0 1px 3px rgba(15, 23, 42, .08);
    --yt-shadow:      0 6px 20px rgba(15, 23, 42, .08);

    /* Spacing scale */
    --yt-space-1:  4px;
    --yt-space-2:  8px;
    --yt-space-3:  12px;
    --yt-space-4:  16px;
    --yt-space-5:  20px;
    --yt-space-6:  24px;
}

/* ---------------------------------------------------------------------
 * Sub-tab navigation - used to split large settings tabs (e.g. "General")
 * into scannable categories without changing how the underlying form
 * saves. Panels are shown/hidden client-side; every field stays present
 * in the DOM at all times so a single Save still submits everything.
 * --------------------------------------------------------------------- */
.yatoon-subtab-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--yt-space-2);
    margin: 0 0 var(--yt-space-5);
    padding: var(--yt-space-2);
    background: var(--yt-bg);
    border: 1px solid var(--yt-border);
    border-radius: var(--yt-radius);
}
.yatoon-subtab-btn {
    appearance: none;
    border: 1px solid transparent;
    background: transparent;
    color: var(--yt-muted);
    font-size: 13px;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: var(--yt-radius-pill);
    cursor: pointer;
    transition: background .15s, color .15s;
    white-space: nowrap;
}
.yatoon-subtab-btn:hover {
    background: var(--yt-border-soft);
    color: var(--yt-ink);
}
.yatoon-subtab-btn.is-active {
    background: var(--yt-ink);
    color: #fff;
}
.yatoon-subtab-panel {
    animation: yt-fade-in .12s ease;
}
@keyframes yt-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}


.sbs-admin-container {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 20px;
    margin-top: 20px;
}

/* 3.3.5 SaaS polish: calmer admin surfaces and clearer daily operations. */
.sbs-admin-page,
.wrap:has(.sbs-card),
.wrap:has(.sbs-admin-table-wrap),
.wrap:has(.sbs-table-toolbar),
#yatoon-dashboard-wrap {
    color: #172033;
}

.sbs-admin-page .sbs-admin-page-description,
.sbs-admin-page p.description,
.sbs-card p.description,
#yatoon-dashboard-wrap .description {
    color: #697386;
    font-size: 13px;
    line-height: 1.5;
}

.sbs-card,
.sbs-admin-table-wrap,
.sbs-table-toolbar,
.yatoon-card,
#yatoon-dashboard-wrap .yd-card,
#yatoon-dashboard-wrap .yd-panel,
#yatoon-dashboard-wrap .yd-command {
    border-color: rgba(203, 213, 225, .78) !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .045) !important;
}

.sbs-card h2,
.sbs-card h3,
#yatoon-dashboard-wrap h2,
#yatoon-dashboard-wrap h3 {
    letter-spacing: 0 !important;
}

.sbs-admin-page .button,
.sbs-card .button,
.sbs-table-toolbar .button,
#yatoon-dashboard-wrap .button {
    min-height: 36px;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-weight: 700;
    box-shadow: none !important;
}

.sbs-admin-page .button-primary,
.sbs-card .button-primary,
.sbs-table-toolbar .button-primary,
#yatoon-dashboard-wrap .button-primary {
    background: #111827 !important;
    border-color: #111827 !important;
    color: #fff !important;
}

.sbs-admin-page input[type="text"],
.sbs-admin-page input[type="email"],
.sbs-admin-page input[type="number"],
.sbs-admin-page input[type="search"],
.sbs-admin-page input[type="url"],
.sbs-admin-page input[type="tel"],
.sbs-admin-page input[type="password"],
.sbs-admin-page select,
.sbs-admin-page textarea,
.sbs-card input[type="text"],
.sbs-card input[type="email"],
.sbs-card input[type="number"],
.sbs-card input[type="search"],
.sbs-card input[type="url"],
.sbs-card input[type="tel"],
.sbs-card input[type="password"],
.sbs-card select,
.sbs-card textarea {
    border-radius: 8px !important;
    border-color: #cbd5e1 !important;
    min-height: 38px;
}

.sbs-admin-page input:focus,
.sbs-admin-page select:focus,
.sbs-admin-page textarea:focus,
.sbs-card input:focus,
.sbs-card select:focus,
.sbs-card textarea:focus {
    border-color: #111827 !important;
    box-shadow: 0 0 0 3px rgba(17, 24, 39, .10) !important;
    outline: none !important;
}

.sbs-table-toolbar {
    align-items: center;
    gap: 12px !important;
}

.sbs-table-search {
    min-width: min(100%, 420px);
}

.sbs-table-search input[type="search"],
.sbs-table-search input[type="text"] {
    width: min(100%, 320px);
}

.sbs-admin-table-wrap .wp-list-table thead th,
.sbs-admin-table-wrap .wp-list-table thead td {
    background: #f8fafc !important;
    color: #475569 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.sbs-admin-table-wrap .wp-list-table tbody tr:hover td,
.sbs-admin-table-wrap .wp-list-table tbody tr:hover th {
    background: #fbfdff !important;
}

.sbs-admin-page .notice,
.wrap:has(.sbs-card) .notice {
    border-radius: 10px;
}

@media (max-width: 782px) {
    .sbs-admin-page,
    .wrap:has(.sbs-card),
    .wrap:has(.sbs-admin-table-wrap),
    #yatoon-dashboard-wrap {
        padding-right: 10px;
    }

    .sbs-card,
    .sbs-admin-table-wrap,
    .sbs-table-toolbar,
    .yatoon-card,
    #yatoon-dashboard-wrap .yd-card,
    #yatoon-dashboard-wrap .yd-panel,
    #yatoon-dashboard-wrap .yd-command {
        border-radius: 10px !important;
    }

    .sbs-admin-page .button,
    .sbs-card .button,
    .sbs-table-toolbar .button,
    #yatoon-dashboard-wrap .button {
        width: 100%;
        min-height: 42px;
    }
}

/* Spreadsheet-style admin tables on desktop/tablet widths. Keeps long emails and names from stacking vertically. */
@media (min-width: 783px) {
    .sbs-admin-page .sbs-admin-table-wrap,
    .sbs-admin-page .yatoon-admin-table-scroll {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        scrollbar-gutter: stable;
    }

    .sbs-admin-page table.yatoon-resizable-table {
        table-layout: fixed !important;
        width: 100%;
        min-width: 1180px;
        border-collapse: separate !important;
        border-spacing: 0 !important;
    }

    .sbs-admin-page #sbs-staff-table.yatoon-resizable-table {
        min-width: 1320px !important;
    }

    .sbs-admin-page #sbs-services-table.yatoon-resizable-table {
        min-width: 1780px !important;
    }

    .sbs-admin-page table.yatoon-resizable-table th,
    .sbs-admin-page table.yatoon-resizable-table td {
        position: relative;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        vertical-align: middle !important;
    }

    .sbs-admin-page table.yatoon-resizable-table th {
        user-select: none;
    }

    .sbs-admin-page table.yatoon-resizable-table td .button,
    .sbs-admin-page table.yatoon-resizable-table td button {
        white-space: nowrap !important;
    }

    .yatoon-col-resizer {
        position: absolute;
        top: 0;
        right: -4px;
        z-index: 5;
        width: 8px;
        height: 100%;
        cursor: col-resize;
        touch-action: none;
    }

    .yatoon-col-resizer::after {
        content: "";
        position: absolute;
        top: 10px;
        bottom: 10px;
        left: 3px;
        width: 2px;
        border-radius: 999px;
        background: transparent;
    }

    .yatoon-col-resizer:hover::after,
    .yatoon-col-resizer.is-dragging::after {
        background: #2563eb;
    }

    .sbs-admin-page .yatoon-table-x-scrollbar {
        position: sticky;
        bottom: 0;
        z-index: 15;
        height: 18px;
        overflow-x: auto;
        overflow-y: hidden;
        background: rgba(248, 250, 252, .96);
        border-top: 1px solid #e5e7eb;
        border-radius: 0 0 10px 10px;
        -webkit-overflow-scrolling: touch;
    }

    .sbs-admin-page .yatoon-table-x-scrollbar-inner {
        height: 1px;
    }

    body.yatoon-table-resizing {
        cursor: col-resize !important;
        user-select: none !important;
    }
}

.sbs-admin-content {
    flex: 1;
}

.sbs-admin-sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.sbs-card {
    background: #fff;
    border: 1px solid #ccd0d4;
    box-shadow: 0 1px 1px rgba(0,0,0,.04);
    padding: 20px;
    margin-bottom: 20px;
}

.sbs-card h2 {
    margin-top: 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #e5e7eb;
    font-size: 18px;
}

.sbs-card h3 {
    margin-top: 0;
    font-size: 16px;
}

.sbs-card ol {
    padding-left: 20px;
}

.sbs-card ol li {
    margin-bottom: 10px;
    line-height: 1.6;
}

.sbs-card ul {
    list-style: none;
    padding: 0;
}

.sbs-card ul li {
    margin-bottom: 8px;
}

.sbs-card ul li a {
    text-decoration: none;
    color: #2271b1;
}

.sbs-card ul li a:hover {
    color: #135e96;
}

#sbs-connection-status,
#sbs-sync-status {
    margin-left: 10px;
    font-weight: 600;
}

#sbs-connection-status.success,
#sbs-sync-status.success {
    color: #10B981;
}

#sbs-connection-status.error,
#sbs-sync-status.error {
    color: #EF4444;
}

#sbs-connection-status.loading,
#sbs-sync-status.loading {
    color: #F59E0B;
}

/* Loading spinner */
.sbs-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid #e5e7eb;
    border-top-color: #4F46E5;
    border-radius: 50%;
    animation: sbs-spin 1s linear infinite;
    vertical-align: middle;
    margin-right: 5px;
}

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

/* Status badges */
.sbs-status-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
}

.sbs-status-badge.active {
    background: #D1FAE5;
    color: #065F46;
}

.sbs-status-badge.inactive {
    background: #FEE2E2;
    color: #991B1B;
}

.sbs-status-badge.synced {
    background: #DBEAFE;
    color: #1E40AF;
}

/* Responsive */
@media (max-width: 768px) {
    .sbs-admin-container {
        grid-template-columns: 1fr;
    }
}

/* Table improvements */
.wp-list-table td {
    vertical-align: middle;
}

.wp-list-table details {
    margin-top: 5px;
}

.wp-list-table details summary {
    cursor: pointer;
    color: #2271b1;
    font-size: 13px;
}

.wp-list-table details summary:hover {
    color: #135e96;
}

/* Buttons */
.button.sbs-sync-button {
    margin-left: 10px;
}

/* Notice styles */
.notice.sbs-notice {
    padding: 12px;
    margin: 15px 0;
}

.notice.sbs-notice p {
    margin: 0.5em 0;
}

/* Cleaner everyday admin screens */
.sbs-admin-page h1 {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.sbs-table-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    background: #fff;
    border: 1px solid #dcdcde;
    border-radius: 8px;
    padding: 12px;
    margin: 12px 0;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
}

.sbs-table-search,
.sbs-table-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.sbs-table-search input[type="search"] {
    min-width: 260px;
}

.sbs-admin-table-wrap {
    background: #fff;
    border: 1px solid #dcdcde;
    border-radius: 8px;
    overflow: auto;
}

.sbs-admin-table-wrap .wp-list-table {
    border: none;
}

.sbs-admin-table-wrap .wp-list-table thead th,
.sbs-admin-table-wrap .wp-list-table thead td {
    background: #f6f7f7;
    font-weight: 700;
}

.sbs-admin-table-wrap .wp-list-table tbody tr:hover {
    background: #f8fafc;
}

.sbs-admin-page .button[disabled] {
    opacity: .55;
}

@media (max-width: 782px) {
    .sbs-table-toolbar,
    .sbs-table-search,
    .sbs-table-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .sbs-table-search input[type="search"],
    .sbs-table-search select,
    .sbs-table-actions .button {
        width: 100%;
        max-width: none;
    }
}

/* ============================================================
   4.8.7 UI Polish: cleaner WordPress admin screens
   ============================================================ */
.toplevel_page_yatoon-booking-system,
.yatoon-booking_page_yatoon-booking-services,
.yatoon-booking_page_yatoon-booking-staff,
.yatoon-booking_page_yatoon-booking-service-menu,
.yatoon-booking_page_yatoon-booking-bookings,
.yatoon-booking_page_yatoon-booking-calendar,
.yatoon-booking_page_yatoon-booking-reports,
.yatoon-booking_page_yatoon-booking-messages,
.yatoon-booking_page_yatoon-booking-waitlist,
.yatoon-booking_page_yatoon-booking-clients,
.yatoon-booking_page_yatoon-booking-notifications,
.yatoon-booking_page_yatoon-booking-sync-log,
.yatoon-booking_page_yatoon-booking-blacklist,
.yatoon-booking_page_yatoon-booking-brand,
.yatoon-booking_page_yatoon-booking-sms,
.yatoon-booking_page_yatoon-booking-google-calendar,
.yatoon-booking_page_yatoon-booking-growth,
.yatoon-booking_page_yatoon-booking-account {
    background: #f6f7fb;
}

.sbs-admin-page,
.wrap:has(.sbs-card),
.wrap:has(.sbs-admin-table-wrap),
.wrap:has(.sbs-table-toolbar) {
    color: #1f2937;
}

.sbs-admin-page h1,
.wrap:has(.sbs-card) h1,
.wrap:has(.sbs-admin-table-wrap) h1 {
    color: #111827;
    font-weight: 700;
    letter-spacing: 0;
}

.sbs-card,
.sbs-table-toolbar,
.sbs-admin-table-wrap,
.yatoon-card,
.yatoon-settings-card {
    border: 1px solid #e1e5ea;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
}

.sbs-card {
    padding: 22px;
}

.sbs-card h2,
.sbs-card h3 {
    color: #111827;
    letter-spacing: 0;
}

.sbs-card h2 {
    border-bottom-color: #eef2f7;
}

.sbs-table-toolbar {
    padding: 14px;
    border-radius: 10px;
}

.sbs-admin-table-wrap {
    border-radius: 10px;
}

.sbs-admin-table-wrap .wp-list-table {
    border-collapse: separate;
    border-spacing: 0;
}

.sbs-admin-table-wrap .wp-list-table thead th,
.sbs-admin-table-wrap .wp-list-table thead td {
    background: #f8fafc;
    color: #374151;
    border-bottom: 1px solid #e5e7eb;
}

.sbs-admin-table-wrap .wp-list-table tbody td,
.sbs-admin-table-wrap .wp-list-table tbody th {
    border-bottom: 1px solid #eef2f7;
}

.sbs-admin-table-wrap .wp-list-table tbody tr:last-child td,
.sbs-admin-table-wrap .wp-list-table tbody tr:last-child th {
    border-bottom: none;
}

.sbs-admin-table-wrap .wp-list-table tbody tr:hover {
    background: #f8fafc;
}

.sbs-status-badge {
    border-radius: 999px;
    padding: 4px 10px;
    letter-spacing: 0;
    text-transform: none;
}

.sbs-admin-page input[type="text"],
.sbs-admin-page input[type="email"],
.sbs-admin-page input[type="number"],
.sbs-admin-page input[type="search"],
.sbs-admin-page input[type="url"],
.sbs-admin-page input[type="tel"],
.sbs-admin-page input[type="password"],
.sbs-admin-page select,
.sbs-admin-page textarea,
.sbs-card input[type="text"],
.sbs-card input[type="email"],
.sbs-card input[type="number"],
.sbs-card input[type="search"],
.sbs-card input[type="url"],
.sbs-card input[type="tel"],
.sbs-card input[type="password"],
.sbs-card select,
.sbs-card textarea {
    border-color: #d1d5db;
    border-radius: 8px;
    box-shadow: none;
}

.sbs-admin-page input:focus,
.sbs-admin-page select:focus,
.sbs-admin-page textarea:focus,
.sbs-card input:focus,
.sbs-card select:focus,
.sbs-card textarea:focus {
    border-color: #2271b1;
    box-shadow: 0 0 0 3px rgba(34, 113, 177, .12);
}

.sbs-admin-page .button,
.sbs-card .button,
.sbs-table-toolbar .button,
.sbs-admin-table-wrap .button {
    border-radius: 8px;
    font-weight: 600;
}

.sbs-admin-page .button-primary,
.sbs-card .button-primary,
.sbs-table-toolbar .button-primary {
    box-shadow: 0 6px 14px rgba(34, 113, 177, .16);
}

.sbs-admin-page .notice,
.wrap:has(.sbs-card) .notice {
    border-radius: 8px;
}

.sbs-admin-page .widefat td,
.sbs-admin-page .widefat th {
    vertical-align: middle;
}

.sbs-admin-page .tablenav,
.sbs-admin-page .subsubsub {
    margin-top: 12px;
}

.sbs-admin-page .form-table th {
    color: #374151;
}

.sbs-admin-page .form-table td p.description {
    color: #6b7280;
}

@media (max-width: 782px) {
    .sbs-card {
        padding: 16px;
    }

    .sbs-admin-page h1 {
        font-size: 24px;
    }
}


/* ═══════════════════════════════════════════════════════════════════
   YATOON APPLE-STYLE - Admin Panel Refresh
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --adm-pink:       #ec4899;
  --adm-ink:        #111827;
  --adm-ink2:       #374151;
  --adm-muted:      #6b7280;
  --adm-line:       #e5e7eb;
  --adm-surface:    #ffffff;
  --adm-surface2:   #f8fafc;
  --adm-surface3:   #f2f4f8;
  --adm-radius:     12px;
  --adm-radius-sm:  8px;
  --adm-shadow-sm:  0 2px 8px rgba(15,23,42,.06);
  --adm-shadow-md:  0 8px 24px rgba(15,23,42,.09);
  --adm-duration:   .18s;
  --adm-ease:       cubic-bezier(.4,0,.2,1);
}

/* Page background */
.toplevel_page_yatoon-booking-system,
.yatoon-booking_page_yatoon-booking-services,
.yatoon-booking_page_yatoon-booking-staff,
.yatoon-booking_page_yatoon-booking-service-menu,
.yatoon-booking_page_yatoon-booking-bookings,
.yatoon-booking_page_yatoon-booking-calendar,
.yatoon-booking_page_yatoon-booking-reports,
.yatoon-booking_page_yatoon-booking-messages,
.yatoon-booking_page_yatoon-booking-waitlist,
.yatoon-booking_page_yatoon-booking-clients,
.yatoon-booking_page_yatoon-booking-notifications,
.yatoon-booking_page_yatoon-booking-sync-log,
.yatoon-booking_page_yatoon-booking-blacklist,
.yatoon-booking_page_yatoon-booking-brand,
.yatoon-booking_page_yatoon-booking-sms,
.yatoon-booking_page_yatoon-booking-google-calendar,
.yatoon-booking_page_yatoon-booking-growth,
.yatoon-booking_page_yatoon-booking-account {
  background: #f0f2f7;
}

/* Cards */
.sbs-card,
.yatoon-card,
.yatoon-settings-card {
  background: var(--adm-surface);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: var(--adm-radius);
  box-shadow: var(--adm-shadow-sm),
              0 1px 0 rgba(255,255,255,.9) inset;
  padding: 24px;
  transition: box-shadow var(--adm-duration) var(--adm-ease);
}

.sbs-card:hover { box-shadow: var(--adm-shadow-md); }

.sbs-card h2 {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.015em;
  color: var(--adm-ink);
  border-bottom-color: var(--adm-line);
  padding-bottom: 12px;
  margin-bottom: 16px;
}

.sbs-card h3 {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--adm-ink);
}

/* Table toolbar */
.sbs-table-toolbar {
  background: var(--adm-surface);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: var(--adm-radius);
  box-shadow: var(--adm-shadow-sm);
  padding: 14px 16px;
}

/* Table wrap */
.sbs-admin-table-wrap {
  background: var(--adm-surface);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: var(--adm-radius);
  box-shadow: var(--adm-shadow-sm);
  overflow-x: auto;
  overflow-y: visible;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
  padding-bottom: 10px;
}

.sbs-admin-table-wrap .wp-list-table {
  border-collapse: separate;
  border-spacing: 0;
}

.sbs-admin-table-wrap .wp-list-table thead th,
.sbs-admin-table-wrap .wp-list-table thead td {
  background: var(--adm-surface2);
  color: var(--adm-ink2);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .03em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--adm-line);
}

.sbs-admin-table-wrap .wp-list-table tbody td,
.sbs-admin-table-wrap .wp-list-table tbody th {
  border-bottom: 1px solid rgba(0,0,0,.05);
  vertical-align: middle;
}

.sbs-admin-table-wrap .wp-list-table tbody tr:last-child td,
.sbs-admin-table-wrap .wp-list-table tbody tr:last-child th {
  border-bottom: none;
}

.sbs-admin-table-wrap .wp-list-table tbody tr:hover td,
.sbs-admin-table-wrap .wp-list-table tbody tr:hover th {
  background: var(--adm-surface2);
}

/* Status badges */
.sbs-status-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.sbs-status-badge.active   { background: #dcfce7; color: #15803d; }
.sbs-status-badge.inactive { background: #fee2e2; color: #991b1b; }
.sbs-status-badge.synced   { background: #dbeafe; color: #1d4ed8; }

/* Inputs */
.sbs-admin-page input[type="text"],
.sbs-admin-page input[type="email"],
.sbs-admin-page input[type="number"],
.sbs-admin-page input[type="search"],
.sbs-admin-page input[type="url"],
.sbs-admin-page input[type="tel"],
.sbs-admin-page input[type="password"],
.sbs-admin-page select,
.sbs-admin-page textarea,
.sbs-card input[type="text"],
.sbs-card input[type="email"],
.sbs-card input[type="number"],
.sbs-card input[type="search"],
.sbs-card input[type="url"],
.sbs-card input[type="tel"],
.sbs-card input[type="password"],
.sbs-card select,
.sbs-card textarea {
  border-color: rgba(0,0,0,.14);
  border-radius: var(--adm-radius-sm);
  background: var(--adm-surface2);
  box-shadow: none;
  transition: border-color var(--adm-duration), box-shadow var(--adm-duration);
}

.sbs-admin-page input:focus,
.sbs-admin-page select:focus,
.sbs-admin-page textarea:focus,
.sbs-card input:focus,
.sbs-card select:focus,
.sbs-card textarea:focus {
  border-color: var(--adm-pink);
  background: var(--adm-surface);
  box-shadow: 0 0 0 4px rgba(236,72,153,.10);
  outline: none;
}

/* WP Buttons override */
.sbs-admin-page .button,
.sbs-card .button,
.sbs-table-toolbar .button,
.sbs-admin-table-wrap .button {
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: -.01em;
  transition: all var(--adm-duration) var(--adm-ease);
}

.sbs-admin-page .button:hover,
.sbs-card .button:hover {
  transform: translateY(-1px);
}

.sbs-admin-page .button-primary,
.sbs-card .button-primary,
.sbs-table-toolbar .button-primary {
  box-shadow: 0 4px 14px rgba(34,113,177,.18);
}

/* Notices */
.sbs-admin-page .notice,
.wrap:has(.sbs-card) .notice {
  border-radius: var(--adm-radius-sm);
  border-left-width: 4px;
}

@media (max-width: 782px) {
  .sbs-card { padding: 18px; }
}

/* ═══════════════════════════════════════════════════════════════════
   拖拽手柄优化 - 更明显、更好抓
   ═══════════════════════════════════════════════════════════════════ */

.sbs-drag-handle,
.sbs-option-drag-handle {
    cursor: grab !important;
    color: #9ca3af !important;
    font-size: 18px !important;
    padding: 4px 8px !important;
    border-radius: 6px;
    transition: color .15s, background .15s;
    user-select: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
}

.sbs-drag-handle:hover,
.sbs-option-drag-handle:hover {
    color: #374151 !important;
    background: #f3f4f6;
}

.sbs-drag-handle:active,
.sbs-option-drag-handle:active {
    cursor: grabbing !important;
    color: #111827 !important;
    background: #e5e7eb;
}

/* ═══════════════════════════════════════════════════════════════════
   手机端响应式 - Services & Staff 后台自适应
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 782px) {

    /* ── 覆盖 WordPress 核心的 widefat 响应式折叠 ──────────────────────────
       WP 在 782px 以下把 wp-list-table 改成 display:block 并将每个 td
       折叠成伪元素标签 + 内容堆叠，和我们的卡片布局冲突。
       以下规则强制还原，让我们的 nth-child 卡片逻辑接管。           */
    .sbs-admin-table-wrap .wp-list-table,
    .sbs-admin-table-wrap .wp-list-table tbody,
    .sbs-admin-table-wrap .wp-list-table tbody tr,
    .sbs-admin-table-wrap .wp-list-table tbody td,
    .sbs-admin-table-wrap .wp-list-table tbody th {
        /* Reset WP's block/flex overrides so our rules take effect cleanly */
        float: none !important;
    }
    /* WP hides thead at 782px - we hide it ourselves per-table below */
    .sbs-admin-table-wrap .wp-list-table thead {
        display: table-header-group !important; /* reset WP, we override per-table */
    }
    /* WP adds content: attr(data-colname) pseudo-labels - suppress them
       since we write our own ::before labels */
    .sbs-admin-table-wrap .wp-list-table td::before {
        content: none !important;
        display: none !important;
    }

    /* ── 表格容器 ── */
    .sbs-admin-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: 10px;
    }

    /* ── Delete Selected 按钮不应浮到表格顶部 ────────────────────────────
       WP 的 .tablenav.top/.bottom 在 782px 下 display:block，
       但我们的 Delete Selected 在 .sbs-table-actions 里，不在 .tablenav 里，
       所以它本不该受影响。若还是出现，是 WP 把 .button 当 bulk-action 处理。
       以下规则锁定工具栏位置。                                           */
    .sbs-table-toolbar {
        position: relative;
        z-index: 1;
    }
    .sbs-table-actions {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
    }
    .sbs-table-actions .button[disabled] {
        display: inline-flex !important;
    }

    /* ══════════════════════════════════════════
       STAFF TABLE - block-flow card layout
       不用 grid，避免伪元素与内容重叠
       ══════════════════════════════════════════ */
    #sbs-staff-table { min-width: unset !important; width: 100% !important; }
    #sbs-staff-table thead { display: none !important; }

    /* 每行变成卡片 */
    #sbs-staff-table tbody tr {
        display: block;
        border: 1px solid rgba(0,0,0,.08);
        border-radius: 12px;
        margin-bottom: 12px;
        padding: 14px 14px 10px;
        background: #fff;
        box-shadow: 0 1px 4px rgba(15,23,42,.06);
    }

    /* 隐藏 checkbox 和 ID 列 */
    #sbs-staff-table tbody td:nth-child(1),
    #sbs-staff-table tbody td:nth-child(2) { display: none; }

    /* 所有 td：block，内容自然堆叠 */
    #sbs-staff-table tbody td {
        display: block;
        padding: 3px 0;
        border: none !important;
        font-size: 14px;
        word-break: break-word;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    /* 标签作为独立的 block 行，不占 grid 列 */
    #sbs-staff-table tbody td:nth-child(4)::before,
    #sbs-staff-table tbody td:nth-child(5)::before,
    #sbs-staff-table tbody td:nth-child(6)::before,
    #sbs-staff-table tbody td:nth-child(7)::before,
    #sbs-staff-table tbody td:nth-child(8)::before,
    #sbs-staff-table tbody td:nth-child(9)::before {
        display: block;
        font-size: 10px;
        color: #9ca3af;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .06em;
        margin-bottom: 2px;
        margin-top: 6px;
    }

    #sbs-staff-table tbody td:nth-child(4)::before  { content: "Name"; }
    #sbs-staff-table tbody td:nth-child(5)::before  { content: "Email"; }
    #sbs-staff-table tbody td:nth-child(6)::before  { content: "Status"; }
    #sbs-staff-table tbody td:nth-child(7)::before  { content: "Online"; }
    #sbs-staff-table tbody td:nth-child(8)::before  { content: "Services"; }
    #sbs-staff-table tbody td:nth-child(9)::before  { content: "Time Off"; }

    /* 头像行 */
    #sbs-staff-table tbody td:nth-child(3) {
        margin-bottom: 6px;
    }

    /* Actions 行：横排按钮 */
    #sbs-staff-table tbody td:last-child {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        padding-top: 10px;
        border-top: 1px solid rgba(0,0,0,.06) !important;
        margin-top: 8px;
    }
    #sbs-staff-table tbody td:last-child::before { display: none !important; }
    #sbs-staff-table tbody td:last-child .button {
        flex: 1;
        text-align: center;
        min-width: 80px;
    }

    /* ══════════════════════════════════════════
       SERVICES TABLE - block-flow card layout
       ══════════════════════════════════════════ */
    #sbs-services-table { min-width: unset !important; width: 100% !important; }
    #sbs-services-table thead { display: none !important; }

    #sbs-services-table tbody tr.sbs-main-service-row {
        display: block;
        border: 1px solid rgba(0,0,0,.08);
        border-radius: 12px;
        margin-bottom: 12px;
        padding: 14px 14px 10px;
        background: #fff;
        box-shadow: 0 1px 4px rgba(15,23,42,.06);
    }

    /* 隐藏 checkbox + 拖拽列 */
    #sbs-services-table tbody tr.sbs-main-service-row td:nth-child(1),
    #sbs-services-table tbody tr.sbs-main-service-row td:nth-child(2) { display: none; }

    /* 所有 td：block */
    #sbs-services-table tbody tr.sbs-main-service-row td {
        display: block;
        padding: 3px 0;
        border: none !important;
        font-size: 14px;
        word-break: break-word;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    /* 标签作为独立 block 行 */
    #sbs-services-table tbody tr.sbs-main-service-row td:nth-child(3)::before,
    #sbs-services-table tbody tr.sbs-main-service-row td:nth-child(4)::before,
    #sbs-services-table tbody tr.sbs-main-service-row td:nth-child(6)::before,
    #sbs-services-table tbody tr.sbs-main-service-row td:nth-child(7)::before,
    #sbs-services-table tbody tr.sbs-main-service-row td:nth-child(8)::before,
    #sbs-services-table tbody tr.sbs-main-service-row td:nth-child(9)::before,
    #sbs-services-table tbody tr.sbs-main-service-row td:nth-child(10)::before {
        display: block;
        font-size: 10px;
        color: #9ca3af;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .06em;
        margin-bottom: 2px;
        margin-top: 6px;
    }

    #sbs-services-table tbody tr.sbs-main-service-row td:nth-child(3)::before  { content: "Order"; }
    #sbs-services-table tbody tr.sbs-main-service-row td:nth-child(4)::before  { content: "ID"; }
    #sbs-services-table tbody tr.sbs-main-service-row td:nth-child(6)::before  { content: "Duration"; }
    #sbs-services-table tbody tr.sbs-main-service-row td:nth-child(7)::before  { content: "Price"; }
    #sbs-services-table tbody tr.sbs-main-service-row td:nth-child(8)::before  { content: "Category"; }
    #sbs-services-table tbody tr.sbs-main-service-row td:nth-child(9)::before  { content: "Rules"; }
    #sbs-services-table tbody tr.sbs-main-service-row td:nth-child(10)::before { content: "Status"; }

    /* 服务名称行 - 全宽大字 */
    #sbs-services-table tbody tr.sbs-main-service-row td:nth-child(5) {
        font-size: 15px;
        font-weight: 700;
        color: #111827;
        padding: 4px 0 10px;
        border-bottom: 1px solid rgba(0,0,0,.06) !important;
        margin-bottom: 4px;
    }
    #sbs-services-table tbody tr.sbs-main-service-row td:nth-child(5)::before { display: none !important; }

    /* Actions 行：横排按钮 */
    #sbs-services-table tbody tr.sbs-main-service-row td:last-child {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        padding-top: 10px;
        border-top: 1px solid rgba(0,0,0,.06) !important;
        margin-top: 8px;
    }
    #sbs-services-table tbody tr.sbs-main-service-row td:last-child::before { display: none !important; }
    #sbs-services-table tbody tr.sbs-main-service-row td:last-child .button {
        flex: 1;
        text-align: center;
        min-width: 70px;
    }

    /* ══ Toolbar ══ */
    .sbs-table-toolbar { flex-direction: column; align-items: stretch; }
    .sbs-table-search, .sbs-table-actions { flex-direction: column; align-items: stretch; width: 100%; }
    .sbs-table-search input, .sbs-table-search select, .sbs-table-actions .button { width: 100% !important; max-width: none !important; }
}

/* 3.3.5 final SaaS override pass. Kept late so it wins over older admin rules. */
.sbs-admin-page .button,
.sbs-card .button,
.sbs-table-toolbar .button,
.sbs-admin-table-wrap .button,
#yatoon-dashboard-wrap .button {
    border-radius: 8px !important;
    font-weight: 700 !important;
}

.sbs-admin-page .button-primary,
.sbs-card .button-primary,
.sbs-table-toolbar .button-primary,
#yatoon-dashboard-wrap .button-primary {
    background: #111827 !important;
    border-color: #111827 !important;
    color: #fff !important;
}

.sbs-card,
.sbs-admin-table-wrap,
.sbs-table-toolbar,
.yatoon-card,
#yatoon-dashboard-wrap .yd-card,
#yatoon-dashboard-wrap .yd-panel,
#yatoon-dashboard-wrap .yd-command {
    border-color: rgba(203, 213, 225, .78) !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .045) !important;
}

.sbs-admin-table-wrap .wp-list-table thead th,
.sbs-admin-table-wrap .wp-list-table thead td {
    background: #f8fafc !important;
    color: #475569 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
}

.sbs-admin-page input:focus,
.sbs-admin-page select:focus,
.sbs-admin-page textarea:focus,
.sbs-card input:focus,
.sbs-card select:focus,
.sbs-card textarea:focus {
    border-color: #111827 !important;
    box-shadow: 0 0 0 3px rgba(17, 24, 39, .10) !important;
    outline: none !important;
}

/* ═══════════════════════════════════════════════════════════════════
   手机端响应式 - Bookings 后台自适应
   与 Staff / Services 表格用同一套卡片折叠手法，保持一致体验。
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 782px) {

    #sbs-bookings-table { min-width: unset !important; width: 100% !important; }
    #sbs-bookings-table thead { display: none !important; }

    /* 每一行（单条预约 / 分组表头 / 分组子行）都变成一张卡片 */
    #sbs-bookings-table tbody tr {
        display: block;
        border: 1px solid rgba(0,0,0,.08);
        border-radius: 12px;
        margin-bottom: 12px;
        padding: 14px 14px 10px;
        background: #fff;
        box-shadow: 0 1px 4px rgba(15,23,42,.06);
    }
    #sbs-bookings-table tbody tr.sbs-group-row {
        margin-bottom: 8px;
        margin-left: 12px;
        width: calc(100% - 12px);
        background: #fbfdff;
    }

    /* 隐藏 checkbox + ID 列，跟 Staff/Services 表格一致 */
    #sbs-bookings-table tbody tr td:nth-child(1),
    #sbs-bookings-table tbody tr th.check-column,
    #sbs-bookings-table tbody tr td:nth-child(2) { display: none; }

    /* 所有 td：block 堆叠 */
    #sbs-bookings-table tbody tr td {
        display: block;
        padding: 3px 0;
        border: none !important;
        font-size: 14px;
        word-break: break-word;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    /* 标签作为独立的 block 行 */
    #sbs-bookings-table tbody tr td:nth-child(4)::before,
    #sbs-bookings-table tbody tr td:nth-child(5)::before,
    #sbs-bookings-table tbody tr td:nth-child(6)::before,
    #sbs-bookings-table tbody tr td:nth-child(7)::before,
    #sbs-bookings-table tbody tr td:nth-child(8)::before,
    #sbs-bookings-table tbody tr td:nth-child(9)::before,
    #sbs-bookings-table tbody tr td:nth-child(10)::before {
        display: block;
        font-size: 10px;
        color: #9ca3af;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .06em;
        margin-bottom: 2px;
        margin-top: 6px;
    }
    #sbs-bookings-table tbody tr td:nth-child(4)::before  { content: "Service"; }
    #sbs-bookings-table tbody tr td:nth-child(5)::before  { content: "Staff"; }
    #sbs-bookings-table tbody tr td:nth-child(6)::before  { content: "Date & Time"; }
    #sbs-bookings-table tbody tr td:nth-child(7)::before  { content: "Price"; }
    #sbs-bookings-table tbody tr td:nth-child(8)::before  { content: "Status"; }
    #sbs-bookings-table tbody tr td:nth-child(9)::before  { content: "Payment"; }
    #sbs-bookings-table tbody tr td:nth-child(10)::before { content: "Square Sync"; }

    /* 客户信息（姓名/电话/邮箱）本身已经是易读文字块，不需要标签 */
    #sbs-bookings-table tbody tr td:nth-child(3) {
        padding-bottom: 6px;
        border-bottom: 1px solid rgba(0,0,0,.06) !important;
        margin-bottom: 4px;
    }

    /* Actions 行：横排按钮，跟 Staff/Services 一致 */
    #sbs-bookings-table tbody tr td:last-child {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        padding-top: 10px;
        border-top: 1px solid rgba(0,0,0,.06) !important;
        margin-top: 8px;
    }
    #sbs-bookings-table tbody tr td:last-child::before { display: none !important; }
    #sbs-bookings-table tbody tr td:last-child .button {
        flex: 1;
        text-align: center;
        min-width: 70px;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   Settings page - quick-jump anchor nav for long subtab panels
   ═══════════════════════════════════════════════════════════════════ */
.yatoon-jump-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 16px;
    padding: 10px 12px;
    background: var(--adm-surface2, #f8fafc);
    border: 1px solid rgba(0,0,0,.06);
    border-radius: var(--adm-radius, 12px);
}
.yatoon-jump-nav a {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    color: #374151;
    font-size: 12.5px;
    font-weight: 650;
    text-decoration: none;
    transition: all .15s;
    scroll-margin-top: 44px;
}
.yatoon-jump-nav a:hover {
    background: #111827;
    border-color: #111827;
    color: #fff;
}
/* Anchor targets scroll a little below the WP admin bar / sticky nav-tab row */
#yt-sec-platform, #yt-sec-experience, #yt-sec-pwa, #yt-sec-connection {
    scroll-margin-top: 44px;
}

/* Settings > Staff: stable desktop table and compact mobile cards. */
.yatoon-settings-page > .nav-tab-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 20px 0 24px !important;
    border-bottom: 0;
}
.yatoon-settings-page > .nav-tab-wrapper .nav-tab {
    margin: 0;
    padding: 8px 14px;
    border: 1px solid #d8dee8;
    border-radius: 8px;
    background: #fff;
    color: #4b5563;
    font-weight: 600;
}
.yatoon-settings-page > .nav-tab-wrapper .nav-tab-active {
    border-color: #111827;
    background: #111827;
    color: #fff;
}
.yatoon-settings-staff {
    max-width: 1180px;
}
.yatoon-settings-staff-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}
.yatoon-settings-staff-header h2 {
    margin: 0 0 6px;
    font-size: 22px;
}
.yatoon-settings-staff-header p {
    max-width: 700px;
    margin: 0;
    color: #64748b;
}
.yatoon-settings-staff-header #sbs-add-staff-btn {
    flex: 0 0 auto;
}
.yatoon-settings-staff-table-wrap {
    overflow: auto;
    border: 1px solid #dbe2ea;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 28px rgba(15, 23, 42, .06);
}
#sbs-settings-staff-table {
    min-width: 800px;
    margin: 0;
    border: 0;
    table-layout: auto;
}
#sbs-settings-staff-table th {
    padding: 13px 12px;
    color: #475569;
    white-space: nowrap;
}
#sbs-settings-staff-table td {
    padding: 13px 12px;
    vertical-align: middle;
}
#sbs-settings-staff-table td small {
    color: #64748b;
}
.yatoon-settings-staff-avatar {
    display: flex;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    object-fit: cover;
}
.yatoon-settings-staff-avatar.is-placeholder {
    background: #e8edf3;
    color: #475569;
    font-weight: 700;
}
.yatoon-settings-staff-badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
}
.yatoon-settings-staff-badge.is-active,
.yatoon-settings-staff-badge.is-square {
    background: #dcfce7;
    color: #166534;
}
.yatoon-settings-staff-badge.is-inactive {
    background: #f1f5f9;
    color: #64748b;
}
.yatoon-settings-staff-badge.is-manual {
    background: #e0e7ff;
    color: #4338ca;
}
.yatoon-settings-staff-actions {
    display: flex;
    gap: 7px;
    white-space: nowrap;
}
.yatoon-settings-staff-actions .sbs-delete-staff-btn {
    color: #b91c1c;
    border-color: #fecaca;
}
.yatoon-settings-staff-empty td {
    padding: 30px !important;
    color: #64748b;
    text-align: center;
}
.yatoon-settings-staff-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    overflow-y: auto;
    padding: 40px;
    background: rgba(15, 23, 42, .56);
}
.yatoon-settings-staff-modal-dialog {
    max-width: 520px;
    max-height: calc(100vh - 80px);
    margin: 0 auto;
    overflow: auto;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .24);
}

@media screen and (max-width: 782px) {
    .yatoon-settings-page > .nav-tab-wrapper {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 6px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }
    .yatoon-settings-page > .nav-tab-wrapper .nav-tab {
        flex: 0 0 auto;
        padding: 7px 12px;
        font-size: 13px;
    }
    .yatoon-settings-staff-header {
        display: grid;
        gap: 14px;
    }
    .yatoon-settings-staff-header #sbs-add-staff-btn {
        width: 100%;
        min-height: 44px;
    }
    .yatoon-settings-staff-table-wrap {
        overflow: visible;
        border: 0;
        background: transparent;
        box-shadow: none;
    }
    #sbs-settings-staff-table {
        min-width: 0;
        background: transparent;
    }
    #sbs-settings-staff-table thead {
        display: none;
    }
    #sbs-settings-staff-table tbody,
    #sbs-settings-staff-table tr,
    #sbs-settings-staff-table td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }
    #sbs-settings-staff-table tr:not(.yatoon-settings-staff-empty) {
        margin: 0 0 14px;
        padding: 14px 16px;
        border: 1px solid #dbe2ea;
        border-radius: 14px;
        background: #fff;
        box-shadow: 0 6px 20px rgba(15, 23, 42, .05);
    }
    #sbs-settings-staff-table td {
        display: grid;
        grid-template-columns: minmax(76px, .42fr) minmax(0, 1fr);
        gap: 12px;
        padding: 7px 0;
        border: 0;
        overflow-wrap: anywhere;
    }
    #sbs-settings-staff-table td::before {
        content: attr(data-label);
        color: #64748b;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .02em;
        text-transform: uppercase;
    }
    #sbs-settings-staff-table td[data-label="Photo"] {
        align-items: center;
    }
    #sbs-settings-staff-table td[data-label="Actions"] {
        display: block;
        padding-top: 12px;
        border-top: 1px solid #e5e7eb;
    }
    #sbs-settings-staff-table td[data-label="Actions"]::before {
        display: none;
    }
    .yatoon-settings-staff-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .yatoon-settings-staff-actions .button {
        width: 100%;
        min-height: 40px;
        text-align: center;
    }
    .yatoon-settings-staff-empty td {
        display: block !important;
        padding: 28px 18px !important;
        border: 1px solid #dbe2ea !important;
        border-radius: 14px;
        background: #fff;
    }
    .yatoon-settings-staff-empty td::before {
        display: none;
    }
    .yatoon-settings-staff-modal {
        padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
    }
    .yatoon-settings-staff-modal-dialog {
        max-height: calc(100dvh - 24px);
    }
    .yatoon-settings-staff-modal-dialog .form-table th,
    .yatoon-settings-staff-modal-dialog .form-table td {
        display: block;
        width: 100%;
        padding: 6px 0;
    }
    .yatoon-settings-staff-modal-dialog input.regular-text,
    .yatoon-settings-staff-modal-dialog textarea.large-text {
        width: 100%;
    }
}