/* Square Booking Sync - Admin Styles */

.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;
}