/**
 * WeddingPress Access Tracker Dashboard Stylesheet
 *
 * Design System: SaaS Modern (Linear / Vercel aesthetic)
 * Token Scale  : radius 6/8/10/16 | shadow: 0 1px 3px | control-height: 36px
 * Class Map    : 100% matched to access-tracker-dashboard.php HTML output
 *
 * Package: WeddingPress
 * Version: 4.1.0
 */

/* ─── Design Tokens (scoped, no global bleed) ─── */
.wdp-tracker-dashboard-wrapper {
    --wdp-radius-sm : 6px;
    --wdp-radius-md : 8px;
    --wdp-radius-lg : 10px;
    --wdp-radius-xl : 16px;
    --wdp-shadow    : 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --wdp-h-ctrl    : 36px;

    --wdp-c-text    : #0f172a;
    --wdp-c-text-2  : #64748b;
    --wdp-c-border  : #e2e8f0;
    --wdp-c-surface : #f8fafc;
    --wdp-c-white   : #ffffff;

    --wdp-c-indigo  : #6366f1;
    --wdp-c-primary : #4f46e5; /* hover item menu aksi; indigo-600 agar teks 12px tetap kontras di latar terang */
    --wdp-c-green   : #16a34a;
    --wdp-c-red     : #dc2626;
    --wdp-c-slate   : #94a3b8;
    --wdp-c-amber   : #d97706;

    /* KPI per-card accent colors */
    --wdp-kpi-total-accent   : #6366f1;
    --wdp-kpi-opened-accent  : #16a34a;
    --wdp-kpi-unopened-accent: #94a3b8;
    --wdp-kpi-locked-accent  : #dc2626;
}

/* ─── Root Wrapper ─── */
.wdp-tracker-dashboard-wrapper {
    width: 100%;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    color: var(--wdp-c-text);
    font-size: 13px;
    line-height: 1.5;
    margin: 20px 0;
}

.wdp-tracker-dashboard-wrapper *,
.wdp-tracker-dashboard-wrapper *::before,
.wdp-tracker-dashboard-wrapper *::after {
    box-sizing: border-box;
}

/* ─── Main Content Area ─── */
.wdp-tracker-main-content {
    width: 100%;
}

/* ════════════════════════════════════════════════════════
   1. EDITOR NOTICE BAR
   ════════════════════════════════════════════════════════ */
.wdp-tracker-editor-notice {
    background  : #f5f3ff;
    border      : 1.5px dashed #a5b4fc;
    border-radius: var(--wdp-radius-lg);
    padding     : 12px 16px;
    margin-bottom: 18px;
    display     : flex;
    align-items : center;
    justify-content: space-between;
    gap         : 12px;
    flex-wrap   : wrap;
}

.wdp-tracker-editor-notice strong {
    display     : inline-flex;
    align-items : center;
    gap         : 7px;
    font-size   : 13.5px;
    font-weight : 700;
    color       : #4338ca;
}

.wdp-tracker-editor-notice p {
    margin: 2px 0 0;
    font-size: 11.5px;
    color: var(--wdp-c-text-2);
    line-height: 1.4;
}

.wdp-tracker-editor-badge {
    flex-shrink : 0;
    padding     : 3px 10px;
    background  : #e0e7ff;
    color       : #3730a3;
    border-radius: var(--wdp-radius-sm);
    font-size   : 10.5px;
    font-weight : 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* ════════════════════════════════════════════════════════
   2. NOTICE BOX (Kill Switch / Alert)
   ════════════════════════════════════════════════════════ */
.wdp-tracker-notice {
    padding     : 14px 18px;
    border-radius: var(--wdp-radius-lg);
    margin-bottom: 20px;
    display     : flex;
    align-items : center;
    gap         : 12px;
    font-size   : 13px;
    line-height : 1.5;
}

.wdp-tracker-notice.is-warning {
    background: #fffbeb;
    border    : 1px solid #fde68a;
    color     : #92400e;
}

.wdp-tracker-notice.is-danger {
    background: #fef2f2;
    border    : 1px solid #fecaca;
    color     : #991b1b;
}

.wdp-tracker-notice svg {
    width     : 20px;
    height    : 20px;
    flex-shrink: 0;
    fill      : currentColor;
}

/* ════════════════════════════════════════════════════════
   3. KPI CARDS GRID (Modern SaaS Metrics)
   ════════════════════════════════════════════════════════ */
.wdp-tracker-dashboard-wrapper .wdp-tracker-kpi-grid,
.wdp-tracker-kpi-grid {
    display               : grid;
    grid-template-columns : repeat(auto-fit, minmax(220px, 1fr));
    gap                   : 14px;
    margin-bottom         : 18px;
}

/* Base card — modern clean SaaS card */
.wdp-tracker-dashboard-wrapper .wdp-kpi-card,
.wdp-kpi-card {
    position      : relative;
    background    : #ffffff;
    border        : 1px solid #e2e8f0;
    border-top    : 3px solid #cbd5e1;
    border-radius : 12px;
    box-shadow    : 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px -1px rgba(0, 0, 0, 0.04);
    padding       : 18px 20px;
    display       : flex;
    align-items   : center;
    justify-content: space-between;
    gap           : 14px;
    overflow      : hidden;
    transition    : transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.wdp-tracker-dashboard-wrapper .wdp-kpi-card:hover,
.wdp-kpi-card:hover {
    box-shadow: 0 8px 20px -3px rgba(0, 0, 0, 0.08);
    transform : translateY(-2px);
}

/* Per-card top accent colors (Class-based for reliable show/hide parity) */
.wdp-tracker-dashboard-wrapper .wdp-kpi-card.kpi-card-total,
.wdp-kpi-card.kpi-card-total { border-top-color: #3b82f6; }

.wdp-tracker-dashboard-wrapper .wdp-kpi-card.kpi-card-opened,
.wdp-kpi-card.kpi-card-opened { border-top-color: #10b981; }

.wdp-tracker-dashboard-wrapper .wdp-kpi-card.kpi-card-unopened,
.wdp-kpi-card.kpi-card-unopened { border-top-color: #64748b; }

.wdp-tracker-dashboard-wrapper .wdp-kpi-card.kpi-card-locked,
.wdp-kpi-card.kpi-card-locked { border-top-color: #ef4444; }

/* KPI text content */
.wdp-tracker-dashboard-wrapper .wdp-kpi-content,
.wdp-kpi-content {
    display       : flex;
    flex-direction: column;
    gap           : 4px;
    min-width     : 0;
    flex          : 1;
}

.wdp-tracker-dashboard-wrapper .wdp-kpi-label,
.wdp-kpi-label {
    font-size     : 11px;
    font-weight   : 700;
    color         : #64748b;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space   : nowrap;
    line-height   : 1.2;
}

.wdp-tracker-dashboard-wrapper .wdp-kpi-value,
.wdp-kpi-value {
    font-size     : 28px;
    font-weight   : 800;
    color         : #0f172a;
    line-height   : 1.1;
    letter-spacing: -0.025em;
    display       : flex;
    align-items   : baseline;
    gap           : 6px;
    flex-wrap     : wrap;
}

/* SaaS percentage pill badge */
.wdp-tracker-dashboard-wrapper .wdp-kpi-pill,
.wdp-kpi-pill {
    display       : inline-flex;
    align-items   : center;
    padding       : 2px 7px;
    border-radius : 9999px;
    background    : #dcfce7;
    color         : #15803d;
    font-size     : 11px;
    font-weight   : 700;
    letter-spacing: 0;
    line-height   : 1.2;
    vertical-align: middle;
}

/* KPI value color variants */
.wdp-kpi-value.kpi-green { color: #15803d; }
.wdp-kpi-value.kpi-blue  { color: #4f46e5; }
.wdp-kpi-value.kpi-red   { color: #dc2626; }

/* Zero-FOUC placeholder for KPI loading state */
.wdp-kpi-placeholder {
    display    : inline-block;
    color      : #94a3b8;
    font-weight: 400;
    opacity    : 0.6;
}

/* KPI icon badge — square, rounded corners, soft pastel */
.wdp-tracker-dashboard-wrapper .wdp-kpi-icon,
.wdp-kpi-icon {
    width          : 46px;
    height         : 46px;
    border-radius  : 10px;
    display        : flex;
    align-items    : center;
    justify-content: center;
    flex-shrink    : 0;
    transition     : transform 0.2s ease;
}

.wdp-tracker-dashboard-wrapper .wdp-kpi-card:hover .wdp-kpi-icon,
.wdp-kpi-card:hover .wdp-kpi-icon {
    transform: scale(1.06);
}

.wdp-tracker-dashboard-wrapper .wdp-kpi-icon svg,
.wdp-kpi-icon svg {
    width      : 22px;
    height     : 22px;
    display    : block;
    flex-shrink: 0;
}

/* Per-icon colors — SaaS soft tints */
.wdp-tracker-dashboard-wrapper .wdp-kpi-icon.icon-total,
.wdp-kpi-icon.icon-total {
    background: #eff6ff;
    color     : #2563eb;
    border    : 1px solid #dbeafe;
}

.wdp-tracker-dashboard-wrapper .wdp-kpi-icon.icon-opened,
.wdp-kpi-icon.icon-opened {
    background: #ecfdf5;
    color     : #059669;
    border    : 1px solid #a7f3d0;
}

.wdp-tracker-dashboard-wrapper .wdp-kpi-icon.icon-unopened,
.wdp-kpi-icon.icon-unopened {
    background: #f8fafc;
    color     : #475569;
    border    : 1px solid #e2e8f0;
}

.wdp-tracker-dashboard-wrapper .wdp-kpi-icon.icon-locked,
.wdp-kpi-icon.icon-locked {
    background: #fff1f2;
    color     : #e11d48;
    border    : 1px solid #fecdd3;
}

/* ════════════════════════════════════════════════════════
   4. TOOLBAR (Search, Filter, Action Buttons)
   ════════════════════════════════════════════════════════ */
.wdp-tracker-dashboard-wrapper .wdp-tracker-toolbar,
.wdp-tracker-toolbar {
    display        : flex !important;
    flex-wrap      : nowrap !important; /* LOCKED: 1 single row on desktop */
    align-items    : center !important;
    justify-content: space-between !important;
    gap            : 10px !important;
    margin-bottom  : 16px !important;
}

/* Filter group: search + select in one row — fluid across full space */
.wdp-tracker-dashboard-wrapper .wdp-tracker-filter-group,
.wdp-tracker-filter-group {
    display    : flex !important;
    align-items: center !important;
    gap        : 8px !important;
    flex       : 1 1 auto !important;
    flex-wrap  : nowrap !important; /* never wrap search and dropdown */
    min-width  : 0 !important;
}

/* Search wrapper — expands fluidly to eliminate dead space */
.wdp-tracker-dashboard-wrapper .wdp-tracker-search-wrap,
.wdp-tracker-search-wrap {
    position  : relative !important;
    flex      : 1 1 auto !important;
    width     : 100% !important;
    min-width : 160px !important;
    box-sizing: border-box !important;
}

.wdp-tracker-dashboard-wrapper .wdp-tracker-search-wrap svg,
.wdp-tracker-search-wrap svg {
    position     : absolute !important;
    left         : 12px !important;
    top          : 50% !important;
    transform    : translateY(-50%) !important;
    width        : 15px !important;
    height       : 15px !important;
    color        : #94a3b8 !important;
    pointer-events: none !important;
    z-index      : 2 !important;
    flex-shrink  : 0 !important;
}

/* All inputs and controls: bulletproof padding, height, borders */
.wdp-tracker-dashboard-wrapper input.wdp-tracker-search-input,
.wdp-tracker-dashboard-wrapper .wdp-tracker-search-input {
    width          : 100% !important;
    height         : 38px !important;
    min-height     : 38px !important;
    max-height     : 38px !important;
    box-sizing     : border-box !important;
    padding        : 0 12px 0 38px !important; /* IMMUNE to theme padding overrides */
    margin         : 0 !important;
    font-size      : 13px;
    line-height    : 36px;
    background     : #ffffff;
    border         : 1px solid #cbd5e1;
    border-radius  : 8px;
    color          : #0f172a;
    outline        : none !important;
    box-shadow     : 0 1px 2px rgba(0, 0, 0, 0.04);
    transition     : border-color 0.15s ease, box-shadow 0.15s ease !important;
    font-family    : inherit !important;
}

.wdp-tracker-dashboard-wrapper input.wdp-tracker-search-input::placeholder,
.wdp-tracker-search-input::placeholder {
    color: #94a3b8;
    opacity: 1;
}

.wdp-tracker-dashboard-wrapper input.wdp-tracker-search-input:focus,
.wdp-tracker-search-input:focus {
    border-color: #6366f1;
    box-shadow  : 0 0 0 3px rgba(99, 102, 241, 0.12);
}

/* Select — fixed width, never wraps, custom sleek chevron */
.wdp-tracker-dashboard-wrapper select.wdp-tracker-status-select,
.wdp-tracker-dashboard-wrapper .wdp-tracker-status-select {
    width              : 155px !important;
    min-width          : 155px !important;
    max-width          : 155px !important;
    flex               : 0 0 155px !important;
    height             : 38px !important;
    min-height         : 38px !important;
    max-height         : 38px !important;
    box-sizing         : border-box !important;
    padding            : 0 28px 0 12px !important;
    margin             : 0 !important;
    font-size          : 13px;
    font-weight        : 500;
    line-height        : normal;
    background         : #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='none' stroke='%2364748b' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 10px center;
    border             : 1px solid #cbd5e1;
    border-radius      : 8px;
    color              : #0f172a;
    outline            : none !important;
    cursor             : pointer !important;
    -webkit-appearance : none !important;
    appearance         : none !important;
    box-shadow         : 0 1px 2px rgba(0, 0, 0, 0.04);
    transition         : border-color 0.15s ease, box-shadow 0.15s ease !important;
    font-family        : inherit !important;
}

.wdp-tracker-dashboard-wrapper select.wdp-tracker-status-select:focus,
.wdp-tracker-status-select:focus {
    border-color: #6366f1;
    box-shadow  : 0 0 0 3px rgba(99, 102, 241, 0.12);
}

/* Button group — right side, aligned */
.wdp-tracker-dashboard-wrapper .wdp-tracker-btn-group,
.wdp-tracker-btn-group {
    display    : flex !important;
    align-items: center !important;
    gap        : 8px !important;
    flex-shrink: 0 !important;
    flex-wrap  : nowrap !important;
}

/* Base button */
.wdp-tracker-dashboard-wrapper .wdp-tracker-btn,
.wdp-tracker-btn {
    display        : inline-flex !important;
    align-items    : center !important;
    justify-content: center !important;
    gap            : 6px !important;
    height         : 38px !important;
    min-height     : 38px !important;
    max-height     : 38px !important;
    box-sizing     : border-box !important;
    padding        : 0 14px;
    font-size      : 12.5px;
    font-weight    : 600;
    border-radius  : 8px;
    cursor         : pointer !important;
    border         : 1px solid transparent;
    transition     : all 0.15s ease !important;
    text-decoration: none !important;
    line-height    : 1 !important;
    font-family    : inherit !important;
    white-space    : nowrap !important;
    box-shadow     : 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* display:inline-flex !important di atas mengalahkan atribut hidden: tombol Keluar disembunyikan JS. */
.wdp-tracker-dashboard-wrapper .wdp-tracker-btn[hidden] {
    display: none !important;
}

/* Keluar — netral, tidak bersaing dengan aksi utama */
.wdp-tracker-dashboard-wrapper .wdp-tracker-logout-btn {
    background  : #ffffff;
    color       : #64748b;
    border-color: #e2e8f0;
}

.wdp-tracker-dashboard-wrapper .wdp-tracker-logout-btn:hover {
    background  : #f8fafc;
    color       : #b91c1c;
    border-color: #fecaca;
}

/* Masuk sebagai Pengelola (mode publik) */
.wdp-tracker-dashboard-wrapper .wdp-tracker-login-btn {
    background  : #ffffff;
    color       : #334155;
    border-color: #cbd5e1;
}

.wdp-tracker-dashboard-wrapper .wdp-tracker-login-btn:hover {
    background  : #f8fafc;
    color       : #0f172a;
    border-color: #94a3b8;
}

/* Kembali ke dashboard publik tanpa masuk */
.wdp-tracker-dashboard-wrapper .wdp-passkey-cancel {
    display        : block;
    margin         : 14px auto 0;
    padding        : 6px 10px;
    background     : none;
    border         : 0;
    color          : #64748b;
    font-size      : 13px;
    font-family    : inherit;
    text-decoration: underline;
    cursor         : pointer;
}

.wdp-tracker-dashboard-wrapper .wdp-passkey-cancel:hover,
.wdp-tracker-dashboard-wrapper .wdp-passkey-cancel:focus-visible {
    color: #0f172a;
}

.wdp-tracker-dashboard-wrapper .wdp-passkey-cancel[hidden] {
    display: none;
}

.wdp-tracker-btn i,
.wdp-tracker-btn svg {
    font-size  : 14px;
    width      : 14px;
    height     : 14px;
    flex-shrink: 0;
    line-height: 1;
}

/* Sync — subtle outline with soft violet border */
.wdp-tracker-dashboard-wrapper .wdp-tracker-sync-btn,
.wdp-tracker-sync-btn {
    background  : #ffffff;
    border-color: #cbd5e1;
    color       : #334155;
}
.wdp-tracker-dashboard-wrapper .wdp-tracker-sync-btn:hover,
.wdp-tracker-sync-btn:hover {
    background  : #f8fafc;
    border-color: #94a3b8;
    color       : #0f172a;
}

/* Refresh — clean ghost */
.wdp-tracker-dashboard-wrapper .wdp-tracker-refresh-btn,
.wdp-tracker-refresh-btn {
    background  : #ffffff;
    border-color: #cbd5e1;
    color       : #334155;
}
.wdp-tracker-dashboard-wrapper .wdp-tracker-refresh-btn:hover,
.wdp-tracker-refresh-btn:hover {
    background  : #f8fafc;
    border-color: #94a3b8;
    color       : #0f172a;
}

/* Export CSV — solid emerald SaaS primary */
.wdp-tracker-dashboard-wrapper .wdp-tracker-export-btn,
.wdp-tracker-export-btn {
    background  : #059669;
    border-color: #047857;
    color       : #ffffff;
    padding     : 0 16px;
    box-shadow  : 0 1px 2px rgba(5, 150, 105, 0.2);
}
.wdp-tracker-dashboard-wrapper .wdp-tracker-export-btn:hover,
.wdp-tracker-export-btn:hover {
    background  : #047857;
    border-color: #047857;
    box-shadow  : 0 3px 10px rgba(5, 150, 105, 0.3);
}

/* Loading spin animation for SVG buttons */
.wdp-tracker-dashboard-wrapper .wdp-tracker-refresh-btn.is-loading svg,
.wdp-tracker-dashboard-wrapper .wdp-tracker-sync-btn.is-loading svg,
.wdp-tracker-refresh-btn.is-loading svg,
.wdp-tracker-sync-btn.is-loading svg {
    animation: wdp-spin 0.8s linear infinite !important;
}

@keyframes wdp-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ════════════════════════════════════════════════════════
   5. TABLE CONTAINER & TABLE
   ════════════════════════════════════════════════════════ */
.wdp-tracker-table-container {
    background                : var(--wdp-c-white);
    border                    : 1px solid var(--wdp-c-border);
    border-radius             : var(--wdp-radius-lg) var(--wdp-radius-lg) 0 0;
    box-shadow                : none;
    overflow-x                : auto;
    overflow-y                : visible;
    height                    : auto;
    max-height                : none;
    margin-bottom             : 0;
    -webkit-overflow-scrolling: touch;
}

/* Eliminate vertical scrollbar completely; keep minimal 4px horizontal bar for mobile swipe */
.wdp-tracker-table-container::-webkit-scrollbar:vertical {
    display: none !important;
    width  : 0 !important;
}

.wdp-tracker-table-container::-webkit-scrollbar:horizontal {
    height: 4px;
}

.wdp-tracker-table-container::-webkit-scrollbar-track {
    background: transparent;
}

.wdp-tracker-table-container::-webkit-scrollbar-thumb {
    background   : #cbd5e1;
    border-radius: 9999px;
}

.wdp-tracker-table-container::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

.wdp-tracker-table {
    width          : 100%;
    table-layout   : fixed;
    border-collapse: separate !important;
    border-spacing : 0 !important;
    text-align     : left;
    font-size      : 12.5px;
    margin         : 0;
    border         : none !important;
}

/* Reset all theme borders (kills ugly vertical Excel-like gridlines) */
.wdp-tracker-table,
.wdp-tracker-table thead,
.wdp-tracker-table tbody,
.wdp-tracker-table tr,
.wdp-tracker-table th,
.wdp-tracker-table td {
    border-left : none !important;
    border-right: none !important;
    border-top  : none !important;
}

/* Sticky modern SaaS header */
.wdp-tracker-table thead th {
    position      : sticky;
    top           : 0;
    z-index       : 5;
    background    : #f8fafc;
    color         : #64748b;
    font-size     : 11px;
    font-weight   : 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding       : 12px 16px;
    border-bottom : 1px solid #e2e8f0 !important;
    white-space   : nowrap;
}

/* Balanced Column Proportions (Exact 100% total) */
.wdp-tracker-table th.col-guest,
.wdp-tracker-table td.col-guest   { width: 36%; }
.wdp-tracker-table th.col-status,
.wdp-tracker-table td.col-status  { width: 18%; text-align: center; }
.wdp-tracker-table th.col-device,
.wdp-tracker-table td.col-device  { width: 18%; text-align: left; }
.wdp-tracker-table th.col-time,
.wdp-tracker-table td.col-time    { width: 18%; text-align: left; }
.wdp-tracker-table th.col-actions,
.wdp-tracker-table td.col-actions { width: 10%; text-align: center; }

/* Body cells */
.wdp-tracker-table tbody td {
    padding       : 12px 16px;
    border-bottom : 1px solid #f1f5f9 !important;
    color         : #334155;
    vertical-align: middle;
    background    : var(--wdp-c-white);
}

.wdp-tracker-table tbody tr:hover td {
    background: #f8fafc;
}

.wdp-tracker-table tbody tr:last-child td {
    border-bottom: none !important;
}

/* Stacking context for table rows when dropdown is open */
.wdp-tracker-table tbody tr.is-dropdown-open,
.wdp-tracker-table tbody tr.is-dropdown-open td,
.wdp-tracker-table tbody tr:has(.wdp-action-dropdown.is-open),
.wdp-tracker-table tbody tr:has(.wdp-action-dropdown.is-open) td {
    position: relative !important;
    z-index : 9999 !important;
}

/* ════════════════════════════════════════════════════════
   6. TABLE CELL CONTENT — Guest Column
   ════════════════════════════════════════════════════════ */
.wdp-guest-name {
    font-size    : 13.5px;
    font-weight  : 600;
    color        : var(--wdp-c-text);
    line-height  : 1.35;
    margin-bottom: 2px;
    overflow     : hidden;
    text-overflow: ellipsis;
    white-space  : nowrap;
}

.wdp-guest-phone {
    display      : inline-flex;
    align-items  : center;
    gap          : 4px;
    font-size    : 11.5px;
    color        : var(--wdp-c-text-2);
    line-height  : 1.3;
}

.wdp-guest-phone svg {
    flex-shrink: 0;
    color      : #94a3b8;
}

/* ════════════════════════════════════════════════════════
   7. STATUS BADGES (Kunjungan column)
   ════════════════════════════════════════════════════════ */
.wdp-status-cell {
    display        : inline-flex;
    flex-direction : column;
    align-items    : center;
    justify-content: center;
    gap            : 4px;
}

.wdp-badge-opened,
.wdp-badge-unopened,
.wdp-badge-locked {
    display      : inline-flex;
    align-items  : center;
    gap          : 3.5px;
    padding      : 2px 8px;
    border-radius: 20px;
    font-size    : 10.5px;
    font-weight  : 600;
    white-space  : nowrap;
    border       : 1px solid;
    line-height  : 1.35;
}

.wdp-badge-opened svg,
.wdp-badge-unopened svg,
.wdp-badge-locked svg {
    width      : 11px;
    height     : 11px;
    flex-shrink: 0;
}

.wdp-badge-opened {
    background  : #dcfce7;
    color       : #15803d;
    border-color: #bbf7d0;
}

.wdp-badge-unopened {
    background  : #f1f5f9;
    color       : #64748b;
    border-color: var(--wdp-c-border);
    font-weight : 500;
}

.wdp-badge-locked {
    background  : #fee2e2;
    color       : #b91c1c;
    border-color: #fecaca;
}

/* ════════════════════════════════════════════════════════
   8. DEVICE PILL (Perangkat column)
   ════════════════════════════════════════════════════════ */
.wdp-device-pill {
    display      : inline-block;
    padding      : 2px 8px;
    border-radius: var(--wdp-radius-sm);
    background   : var(--wdp-c-surface);
    border       : 1px solid var(--wdp-c-border);
    font-size    : 11.5px;
    color        : #334155;
    max-width    : 180px;
    overflow     : hidden;
    text-overflow: ellipsis;
    white-space  : nowrap;
}

/* ════════════════════════════════════════════════════════
   9. WAKTU AKSES column
   ════════════════════════════════════════════════════════ */
.wdp-time-block {
    font-size  : 11px;
    color      : var(--wdp-c-text-2);
    line-height: 1.5;
    white-space: nowrap;
}

.wdp-time-lbl {
    color      : var(--wdp-c-text);
    font-weight: 600;
}

.wdp-tracker-table td.col-time-cell {
    font-size  : 11px;
    color      : var(--wdp-c-text-2);
    line-height: 1.55;
}

/* ════════════════════════════════════════════════════════
   10. ACTION DROPDOWN & BUTTONS
   ════════════════════════════════════════════════════════ */
.wdp-action-dropdown {
    position  : relative;
    display   : inline-flex;
    justify-content: center;
    text-align: left;
}

.wdp-action-dropdown.is-open {
    position: relative !important;
    z-index : 10000 !important;
}

/* Dropdown toggle button: Clean 3-dots Kebab icon trigger */
.wdp-act-btn-menu {
    display        : inline-flex;
    align-items    : center;
    justify-content: center;
    width          : 32px;
    height         : 32px;
    min-width      : 32px;
    min-height     : 32px;
    padding        : 0 !important;
    border-radius  : 6px;
    color          : #64748b;
    background     : transparent;
    border         : 1px solid transparent;
    cursor         : pointer !important;
    pointer-events : auto !important;
    font-family    : inherit;
    line-height    : 1;
    transition     : background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    user-select    : none;
    outline        : none;
    box-sizing     : border-box;
}

.wdp-act-btn-menu * {
    pointer-events: none !important;
}

.wdp-act-btn-menu:hover,
.wdp-action-dropdown.is-open .wdp-act-btn-menu {
    background  : #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color       : #0f172a !important;
    box-shadow  : 0 1px 2px rgba(0, 0, 0, 0.05);
}

.wdp-act-btn-menu:focus-visible {
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.25);
}

.wdp-act-btn-menu svg {
    flex-shrink: 0;
    pointer-events: none;
}

/* Floating Menu Panel */
.wdp-dropdown-menu {
    display      : none;
    position     : absolute;
    top          : calc(100% + 4px);
    right        : 0;
    left         : auto;
    min-width    : 200px;
    background   : var(--wdp-c-white);
    border       : 1px solid var(--wdp-c-border);
    border-radius: var(--wdp-radius-md); /* 8px */
    box-shadow   : 0 10px 25px -5px rgba(0, 0, 0, 0.12), 0 8px 10px -6px rgba(0, 0, 0, 0.08);
    padding      : 6px;
    z-index      : 10001 !important;
    animation    : wdpDropdownFadeIn 0.12s ease-out;
}

.wdp-action-dropdown.is-open .wdp-dropdown-menu {
    display: block !important;
    z-index: 10001 !important;
}

/* Menu dibuka JS dengan posisi fixed dari koordinat tombol: kotak tabel (overflow-x: auto) tidak lagi memotongnya
   saat tabel hanya berisi 1-2 baris. Inline top/left dari JS. */
.wdp-action-dropdown.is-open .wdp-dropdown-menu.is-floating {
    position: fixed !important;
    right   : auto !important;
    bottom  : auto !important;
}

/* Dropup variant (when near bottom of table) */
.wdp-action-dropdown.dropup .wdp-dropdown-menu {
    top       : auto !important;
    bottom    : calc(100% + 6px) !important;
    box-shadow: 0 -10px 25px -5px rgba(0, 0, 0, 0.12), 0 -8px 10px -6px rgba(0, 0, 0, 0.08);
}

@keyframes wdpDropdownFadeIn {
    from {
        opacity  : 0;
        transform: translateY(-4px);
    }
    to {
        opacity  : 1;
        transform: translateY(0);
    }
}

/* Dropdown Menu Items */
.wdp-dropdown-item {
    display        : flex;
    align-items    : center;
    gap            : 8px;
    width          : 100%;
    padding        : 7px 10px;
    border-radius  : var(--wdp-radius-sm); /* 6px */
    font-size      : 12px;
    font-weight    : 500;
    color          : var(--wdp-c-text);
    background     : transparent;
    border         : none;
    cursor         : pointer;
    text-align     : left;
    text-decoration: none;
    font-family    : inherit;
    line-height    : 1.4;
    box-sizing     : border-box;
    transition     : background 0.12s, color 0.12s;
    white-space    : nowrap;
}

.wdp-dropdown-item svg {
    flex-shrink: 0;
    color      : #64748b;
    transition : color 0.12s;
}

.wdp-dropdown-item:hover {
    background: #f8fafc;
    color     : var(--wdp-c-primary);
}

.wdp-dropdown-item:hover svg {
    color: var(--wdp-c-primary);
}

/* Special item variants */
.wdp-dropdown-item.is-danger {
    color: #dc2626;
}
.wdp-dropdown-item.is-danger svg {
    color: #dc2626;
}
.wdp-dropdown-item.is-danger:hover {
    background: #fef2f2;
    color     : #b91c1c;
}
.wdp-dropdown-item.is-danger:hover svg {
    color: #b91c1c;
}

.wdp-dropdown-item.is-warning {
    color: #d97706;
}
.wdp-dropdown-item.is-warning svg {
    color: #d97706;
}
.wdp-dropdown-item.is-warning:hover {
    background: #fffbeb;
    color     : #b45309;
}
.wdp-dropdown-item.is-warning:hover svg {
    color: #b45309;
}

/* Divider inside dropdown */
.wdp-dropdown-divider {
    height    : 1px;
    background: var(--wdp-c-border);
    margin    : 4px 0;
}

/* Fallback button groups (in case raw buttons are used) */
.wdp-action-group {
    display        : flex;
    align-items    : center;
    justify-content: flex-end;
    gap            : 5px;
    flex-wrap      : wrap;
}

.wdp-act-btn {
    display        : inline-flex;
    align-items    : center;
    gap            : 4px;
    padding        : 4px 9px;
    border-radius  : var(--wdp-radius-md);
    font-size      : 11px;
    font-weight    : 600;
    cursor         : pointer;
    border         : 1px solid;
    white-space    : nowrap;
    line-height    : 1.4;
    text-decoration: none;
    transition     : background 0.13s, color 0.13s, border-color 0.13s;
    font-family    : inherit;
}

.wdp-act-btn svg { flex-shrink: 0; }

.wdp-act-btn-copy {
    background  : #eef2ff;
    color       : #4f46e5;
    border-color: #c7d2fe;
}
.wdp-act-btn-copy:hover {
    background  : #4f46e5;
    color       : #ffffff;
    border-color: #4f46e5;
}

.wdp-act-btn-open {
    background  : var(--wdp-c-surface);
    color       : var(--wdp-c-text-2);
    border-color: var(--wdp-c-border);
}
.wdp-act-btn-open:hover {
    background  : var(--wdp-c-text);
    color       : #ffffff;
    border-color: var(--wdp-c-text);
}

.wdp-act-btn-unlock {
    background  : #fef2f2;
    color       : var(--wdp-c-red);
    border-color: #fecaca;
}
.wdp-act-btn-unlock:hover {
    background  : var(--wdp-c-red);
    color       : #ffffff;
    border-color: var(--wdp-c-red);
}

.wdp-act-btn-refresh {
    background  : #f0fdf4;
    color       : var(--wdp-c-green);
    border-color: #bbf7d0;
}
.wdp-act-btn-refresh:hover {
    background  : var(--wdp-c-green);
    color       : #ffffff;
    border-color: var(--wdp-c-green);
}

/* ════════════════════════════════════════════════════════
   11. PAGINATION BAR
   ════════════════════════════════════════════════════════ */
.wdp-tracker-pagination {
    display        : flex;
    align-items    : center;
    justify-content: space-between;
    padding        : 10px 16px;
    background     : var(--wdp-c-surface);
    border         : 1px solid var(--wdp-c-border);
    border-top     : none; /* shared border with table container above */
    border-radius  : 0 0 var(--wdp-radius-lg) var(--wdp-radius-lg); /* bottom corners only */
    flex-wrap      : wrap;
    gap            : 8px;
}

.wdp-page-info {
    font-size: 12px;
    color    : var(--wdp-c-text-2);
}

.wdp-page-nav {
    display    : flex;
    align-items: center;
    gap        : 6px;
}

.wdp-page-btn {
    display        : inline-flex;
    align-items    : center;
    gap            : 5px;
    padding        : 0 12px;
    height         : 30px;
    border         : 1px solid var(--wdp-c-border);
    border-radius  : var(--wdp-radius-md);
    background     : var(--wdp-c-white);
    color          : #334155;
    font-size      : 12px;
    font-weight    : 600;
    cursor         : pointer;
    transition     : background 0.13s, border-color 0.13s, color 0.13s;
    font-family    : inherit;
}

.wdp-page-btn:hover:not(:disabled) {
    background  : var(--wdp-c-surface);
    border-color: #94a3b8;
    color       : var(--wdp-c-text);
}

.wdp-page-btn:disabled {
    opacity: 0.4;
    cursor : not-allowed;
}

/* ════════════════════════════════════════════════════════
   12. CLIENT PASSKEY OVERLAY PROMPT & PORTAL PROMPT
   ════════════════════════════════════════════════════════ */
.wdp-tracker-passkey-prompt {
    padding      : 40px 28px;
    background   : var(--wdp-c-white);
    border       : 1px solid var(--wdp-c-border);
    border-radius: var(--wdp-radius-xl);
    box-shadow   : 0 12px 32px rgba(0,0,0,0.06);
    max-width    : 440px;
    margin       : 40px auto;
    text-align   : center;
    position     : relative;
    box-sizing   : border-box;
}

.wdp-passkey-icon-wrap {
    width          : 64px;
    height         : 64px;
    border-radius  : 50%;
    background     : #eff6ff;
    color          : #2563eb;
    display        : flex;
    align-items    : center;
    justify-content: center;
    margin         : 0 auto 16px;
    box-shadow     : 0 0 0 8px rgba(37, 99, 235, 0.06);
}

.wdp-tracker-passkey-prompt h3 {
    margin     : 0 0 8px;
    font-size  : 18px;
    font-weight: 700;
    color      : var(--wdp-c-text);
}

.wdp-tracker-passkey-prompt p {
    margin     : 0 0 20px;
    font-size  : 13.5px;
    color      : var(--wdp-c-text-2);
    line-height: 1.55;
}

.wdp-passkey-notice {
    margin-bottom: 12px;
    padding      : 8px 14px;
    background   : #fef2f2;
    border       : 1px solid #fecaca;
    border-radius: var(--wdp-radius-md);
    font-size    : 13px;
    color        : var(--wdp-c-red);
    line-height  : 1.4;
    text-align   : center;
}

.wdp-passkey-form {
    display       : flex;
    flex-direction: column;
    gap           : 12px;
}

.wdp-passkey-input-wrap {
    position  : relative;
    width     : 100%;
    box-sizing: border-box;
}

.wdp-passkey-input {
    width         : 100%;
    padding       : 12px 42px 12px 16px;
    font-size     : 14.5px;
    border        : 1.5px solid var(--wdp-c-border);
    border-radius : var(--wdp-radius-md);
    text-align    : center;
    outline       : none;
    letter-spacing: 0.08em;
    font-family   : inherit;
    background    : #f8fafc;
    color         : var(--wdp-c-text);
    transition    : border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
    box-sizing    : border-box;
}

.wdp-passkey-input:focus {
    border-color: #2563eb;
    background  : var(--wdp-c-white);
    box-shadow  : 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.wdp-passkey-toggle-eye {
    position       : absolute;
    right          : 12px;
    top            : 50%;
    transform      : translateY(-50%);
    background     : transparent;
    border         : none;
    color          : #94a3b8;
    cursor         : pointer;
    padding        : 6px;
    display        : flex;
    align-items    : center;
    justify-content: center;
    transition     : color 0.15s;
}

.wdp-passkey-toggle-eye:hover {
    color: var(--wdp-c-text);
}

.wdp-passkey-btn {
    width          : 100%;
    height         : 44px;
    background     : #2563eb;
    color          : #ffffff;
    border         : none;
    border-radius  : var(--wdp-radius-md);
    font-size      : 14px;
    font-weight    : 700;
    cursor         : pointer;
    transition     : background 0.15s, transform 0.15s, box-shadow 0.15s;
    display        : flex;
    align-items    : center;
    justify-content: center;
    gap            : 8px;
    box-shadow     : 0 2px 6px rgba(37, 99, 235, 0.25);
    font-family    : inherit;
}

.wdp-passkey-btn:hover {
    background: #1d4ed8;
    transform : translateY(-1px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
}

.wdp-passkey-btn.is-loading {
    opacity       : 0.75;
    pointer-events: none;
}

/* Shake Animation for Incorrect Passkey */
@keyframes wdpShake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-8px); }
    40%, 80% { transform: translateX(8px); }
}

.wdp-tracker-passkey-prompt.shake-anim {
    animation: wdpShake 0.45s ease-in-out;
}

/* Portal Mode Prompt */
.wdp-tracker-portal-prompt {
    padding      : 48px 24px;
    background   : var(--wdp-c-white);
    border       : 1px dashed var(--wdp-c-border);
    border-radius: var(--wdp-radius-xl);
    max-width    : 520px;
    margin       : 40px auto;
    text-align   : center;
    box-sizing   : border-box;
}

.wdp-tracker-portal-prompt .wdp-portal-icon {
    width          : 64px;
    height         : 64px;
    border-radius  : 50%;
    background     : #f1f5f9;
    color          : #64748b;
    display        : flex;
    align-items    : center;
    justify-content: center;
    margin         : 0 auto 16px;
}

.wdp-tracker-portal-prompt h3 {
    margin     : 0 0 8px;
    font-size  : 18px;
    font-weight: 700;
    color      : var(--wdp-c-text);
}

.wdp-tracker-portal-prompt p {
    margin     : 0;
    font-size  : 14px;
    color      : var(--wdp-c-text-2);
    line-height: 1.6;
}

.wdp-tracker-portal-prompt code {
    background   : #eff6ff;
    color        : #2563eb;
    padding      : 3px 8px;
    border-radius: 4px;
    font-weight  : 600;
}

/* ════════════════════════════════════════════════════════
   13. RESPONSIVE — TABLET (≤ 900px)
   ════════════════════════════════════════════════════════ */
@media (max-width: 900px) {

    .wdp-tracker-dashboard-wrapper .wdp-tracker-kpi-grid,
    .wdp-tracker-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .wdp-kpi-value {
        font-size: 24px;
    }

    /* Toolbar wraps into 2 rows on tablet */
    .wdp-tracker-dashboard-wrapper .wdp-tracker-toolbar,
    .wdp-tracker-toolbar {
        flex-wrap: wrap !important;
        gap: 10px !important;
    }

    .wdp-tracker-dashboard-wrapper .wdp-tracker-filter-group,
    .wdp-tracker-filter-group {
        max-width: 100% !important;
        width: 100% !important;
        flex: 1 1 100% !important;
    }

    .wdp-tracker-dashboard-wrapper .wdp-tracker-btn-group,
    .wdp-tracker-btn-group {
        width: 100% !important;
        justify-content: flex-start !important;
    }
}

/* ════════════════════════════════════════════════════════
   14. RESPONSIVE — MOBILE (≤ 600px)
   ════════════════════════════════════════════════════════ */
@media (max-width: 600px) {

    .wdp-tracker-dashboard-wrapper .wdp-tracker-kpi-grid,
    .wdp-tracker-kpi-grid {
        grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
        gap: 10px;
    }

    .wdp-tracker-dashboard-wrapper .wdp-kpi-card,
    .wdp-kpi-card {
        position       : relative;
        padding        : 14px 14px 12px 14px;
        display        : flex;
        flex-direction : column;
        align-items    : flex-start;
        justify-content: flex-start;
        min-height     : 82px;
        box-sizing     : border-box;
    }

    .wdp-tracker-dashboard-wrapper .wdp-kpi-content,
    .wdp-kpi-content {
        width        : 100%;
        padding-right: 38px; /* Ruang aman mutlak agar teks label & nilai tidak pernah menabrak icon di kanan atas */
        box-sizing   : border-box;
    }

    .wdp-tracker-dashboard-wrapper .wdp-kpi-label,
    .wdp-kpi-label {
        font-size     : 10px;
        line-height   : 1.25;
        white-space   : normal; /* wrap alami jika teks panjang */
        word-break    : break-word;
        margin-bottom : 4px;
        letter-spacing: 0.04em;
    }

    .wdp-tracker-dashboard-wrapper .wdp-kpi-value,
    .wdp-kpi-value {
        font-size     : 22px;
        line-height   : 1.1;
        gap           : 5px;
    }

    .wdp-tracker-dashboard-wrapper .wdp-kpi-pill,
    .wdp-kpi-pill {
        font-size: 10px;
        padding  : 1px 6px;
    }

    /* Icon di pojok kanan atas — rapi, mungil, proporsional */
    .wdp-tracker-dashboard-wrapper .wdp-kpi-icon,
    .wdp-kpi-icon {
        position     : absolute;
        top          : 12px;
        right        : 12px;
        width        : 32px;
        height       : 32px;
        min-width    : 32px;
        min-height   : 32px;
        border-radius: 8px;
        flex-shrink  : 0;
    }

    .wdp-tracker-dashboard-wrapper .wdp-kpi-icon svg,
    .wdp-kpi-icon svg {
        width : 16px;
        height: 16px;
    }

    /* Toolbar fully stacked on mobile */
    .wdp-tracker-dashboard-wrapper .wdp-tracker-toolbar,
    .wdp-tracker-toolbar {
        flex-direction: column !important;
        align-items   : stretch !important;
    }

    .wdp-tracker-dashboard-wrapper .wdp-tracker-filter-group,
    .wdp-tracker-filter-group {
        flex-direction: column !important;
        align-items   : stretch !important;
        width         : 100% !important;
    }

    .wdp-tracker-dashboard-wrapper select.wdp-tracker-status-select,
    .wdp-tracker-dashboard-wrapper .wdp-tracker-status-select {
        width    : 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        flex     : 1 1 100% !important;
    }

    .wdp-tracker-dashboard-wrapper .wdp-tracker-btn-group,
    .wdp-tracker-btn-group {
        width    : 100% !important;
        flex-wrap: wrap !important;
    }

    .wdp-tracker-dashboard-wrapper .wdp-tracker-btn,
    .wdp-tracker-btn {
        flex           : 1 1 calc(50% - 4px) !important;
        justify-content: center !important;
        min-width      : 120px !important;
    }

    /* ════════════════════════════════════════════════════════
       MOBILE CARD VIEW FOR TABLE (≤ 600px)
       Transforms table rows into standalone mobile SaaS cards
       ════════════════════════════════════════════════════════ */
    .wdp-tracker-dashboard-wrapper .wdp-tracker-table-container,
    .wdp-tracker-table-container {
        border       : none !important;
        background   : transparent !important;
        border-radius: 0 !important;
        overflow     : visible !important;
        box-shadow   : none !important;
        padding      : 0 !important;
    }

    .wdp-tracker-dashboard-wrapper .wdp-tracker-table,
    .wdp-tracker-table {
        display     : block !important;
        width       : 100% !important;
        min-width   : 0 !important;
        table-layout: auto !important;
        border      : none !important;
        background  : transparent !important;
    }

    /* Hide traditional table header on mobile */
    .wdp-tracker-table thead {
        display: none !important;
    }

    /* Stack cards vertically with 12px gap */
    .wdp-tracker-table tbody {
        display       : flex !important;
        flex-direction: column !important;
        gap           : 12px !important;
        width         : 100% !important;
        box-sizing    : border-box !important;
    }

    /* Standalone SaaS Card Row */
    .wdp-tracker-table tbody tr {
        display              : grid !important;
        grid-template-columns: 1fr auto !important;
        grid-template-areas  :
            "guest   actions"
            "status  status"
            "device  device"
            "time    time" !important;
        align-items          : start !important;
        row-gap              : 10px !important;
        column-gap           : 12px !important;
        background           : #ffffff;
        border               : 1px solid #e2e8f0;
        border-radius        : 12px;
        padding              : 14px 16px;
        box-shadow           : 0 1px 3px rgba(0, 0, 0, 0.04);
        box-sizing           : border-box !important;
        position             : relative !important;
        transition           : box-shadow 0.15s ease, border-color 0.15s ease;
    }

    .wdp-tracker-table tbody tr:hover {
        border-color: #cbd5e1;
        box-shadow  : 0 4px 12px rgba(0, 0, 0, 0.06);
    }

    /* Reset TD properties for card layout */
    .wdp-tracker-table tbody td {
        display        : block !important;
        width          : 100% !important;
        padding        : 0 !important;
        border         : none !important;
        background     : transparent !important;
        box-sizing     : border-box !important;
        vertical-align : top !important;
    }

    /* Top Left: Guest Name & Phone */
    .wdp-tracker-table td.col-guest {
        grid-area: guest !important;
        min-width: 0 !important;
    }

    .wdp-tracker-table td.col-guest .wdp-guest-name {
        font-size  : 14px;
        font-weight: 700;
        color      : inherit;
        white-space: normal !important;
        word-break : break-word !important;
        line-height: 1.35 !important;
    }

    .wdp-tracker-table td.col-guest .wdp-guest-phone {
        margin-top : 3px !important;
        font-size  : 12px !important;
        color      : #64748b !important;
        display    : inline-flex !important;
        align-items: center !important;
        gap        : 5px !important;
    }

    /* Top Right: 3-Dots Action Button */
    .wdp-tracker-table td.col-actions {
        grid-area : actions !important;
        width     : auto !important;
        text-align: right !important;
        align-self: start !important;
    }

    .wdp-tracker-table td.col-actions .wdp-action-dropdown {
        display: inline-flex !important;
    }

    /* Middle: Status Badges (Left Aligned, Full Width) */
    .wdp-tracker-table td.col-status {
        grid-area    : status !important;
        width        : 100% !important;
        padding      : 8px 0 !important;
        border-top   : 1px dashed #f1f5f9 !important;
        border-bottom: 1px dashed #f1f5f9 !important;
    }

    .wdp-tracker-table td.col-status .wdp-status-cell {
        display        : flex !important;
        justify-content: flex-start !important;
        align-items    : center !important;
        flex-wrap      : wrap !important;
        gap            : 6px !important;
        width          : 100% !important;
    }

    /* Device Pill */
    .wdp-tracker-table td.col-device {
        grid-area  : device !important;
        display    : flex !important;
        align-items: center !important;
        width      : 100% !important;
    }

    .wdp-tracker-table td.col-device .wdp-device-pill {
        max-width  : 100% !important;
        white-space: normal !important;
        word-break : break-word !important;
        font-size  : 11.5px !important;
        padding    : 3px 8px !important;
        background : #f8fafc !important;
        border     : 1px solid #e2e8f0 !important;
        color      : #475569 !important;
    }

    /* Time Block */
    .wdp-tracker-table td.col-time {
        grid-area  : time !important;
        width      : 100% !important;
        padding-top: 2px !important;
    }

    .wdp-tracker-table td.col-time .wdp-time-block {
        display        : flex !important;
        flex-direction : column !important;
        gap            : 3px !important;
        font-size      : 11px !important;
        color          : #64748b !important;
        line-height    : 1.4 !important;
        white-space    : normal !important;
    }

    /* Handle Loading State Row in Card View */
    .wdp-tracker-table tbody tr:has(td[colspan]) {
        display       : block !important;
        text-align    : center !important;
        padding       : 32px 16px !important;
        background    : #ffffff !important;
        border        : 1px solid #e2e8f0 !important;
        border-radius : 12px !important;
    }

    .wdp-tracker-table tbody tr:has(td[colspan]) td {
        display   : block !important;
        text-align: center !important;
    }

    /* Pagination attaches smoothly below the cards */
    .wdp-tracker-pagination {
        margin-top    : 14px;
        border        : 1px solid #e2e8f0;
        border-radius : 12px;
        background    : #ffffff;
        box-shadow    : 0 1px 3px rgba(0, 0, 0, 0.04);
        flex-direction: column;
        align-items   : center;
        text-align    : center;
    }

    .wdp-page-nav {
        width          : 100%;
        justify-content: center;
    }

    .wdp-page-btn {
        flex           : 1;
        justify-content: center;
    }

    .wdp-tracker-passkey-prompt {
        padding      : 28px 18px;
        border-radius: var(--wdp-radius-lg);
        margin       : 20px auto;
    }
}