[x-cloak] { display: none !important; }
 

        /* ── Border / BG tokens ─────────────────────────────────────── */
        :root {
            --ss-border: #d1d5db;
            --ss-border-cell: #e5e7eb;
            --ss-bg: #f9fafb;
            --ss-bg-thead: #f3f4f6;
        }

        .dark {
            --ss-border: #374151;
            --ss-border-cell: #1f2937;
            --ss-bg: #111827;
            --ss-bg-thead: #1f2937;
        }

        /* ── Presets row ────────────────────────────────────────────── */
        .ss-presets {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 8px;
            margin-bottom: 14px;
        }

        .ss-preset-btn {
            padding: 6px 14px;
            font-size: 12px;
            font-weight: 600;
            border-radius: 8px;
            background: transparent;
            color: rgb(var(--gray-600));
            border: 1.5px solid var(--ss-border);
            cursor: pointer;
            transition: all 0.15s;
            white-space: nowrap;
        }

        .ss-preset-btn:hover {
            background: rgba(0, 0, 0, 0.05);
        }

        .dark .ss-preset-btn:hover {
            background: rgba(255, 255, 255, 0.06);
        }

        /* Active / selected preset */
        .ss-preset-btn.ss-active {
            background: #2563eb;
            color: #fff;
            border-color: #2563eb;
        }

        .dark .ss-preset-btn.ss-active {
            background: #3b82f6;
            border-color: #3b82f6;
            color: #fff;
        }

        .ss-preset-btn.ss-active:hover {
            background: #1d4ed8;
            border-color: #1d4ed8;
        }

        .ss-reset-btn {
            margin-left: auto;
            padding: 6px 14px;
            font-size: 12px;
            font-weight: 600;
            border-radius: 8px;
            background: transparent;
            color: #b91c1c;
            border: 1.5px solid rgba(239, 68, 68, 0.5);
            cursor: pointer;
            transition: all 0.15s;
            white-space: nowrap;
        }

        .ss-reset-btn:hover {
            background: rgba(239, 68, 68, 0.08);
        }

        .dark .ss-reset-btn {
            color: #fca5a5;
            border-color: rgba(239, 68, 68, 0.4);
        }

        /* ── Filters panel ──────────────────────────────────────────── */
        .ss-filters-panel {
            background: var(--ss-bg);
            border: 1.5px solid var(--ss-border);
            border-radius: 14px;
            padding: 18px 20px;
            margin-bottom: 20px;
        }

        .ss-filters-label {
            font-size: 10.5px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.07em;
            color: rgb(var(--gray-500));
            margin-bottom: 14px;
        }

        /* ── Strip Filament's own inner card/heading so it blends in ── */

        /* Remove the inner white/dark card wrapper Filament adds */
        .ss-filters-panel .fi-section,
        .ss-filters-panel .fi-section-content-ctn,
        .ss-filters-panel .fi-section-header,
        .ss-filters-panel [class*="fi-section"] {
            background: transparent !important;
            border: none !important;
            box-shadow: none !important;
            padding: 0 !important;
            margin: 0 !important;
        }

        /* Hide Filament's auto-generated "Filters" heading inside the form */
        .ss-filters-panel .fi-section-header-heading,
        .ss-filters-panel h3,
        .ss-filters-panel .fi-section>header {
            display: none !important;
        }

        /* Force all fields into one horizontal row */
        /* Let fields flow into a row but WRAP when space runs out */
        .ss-filters-panel .fi-fo-component-ctn,
        .ss-filters-panel .fi-fo-grid,
        .ss-filters-panel [class*="grid-cols"],
        .ss-filters-panel form>div,
        .ss-filters-panel form>div>div {
            display: flex !important;
            flex-direction: row !important;
            flex-wrap: wrap !important;
            /* was nowrap — this is the key change */
            align-items: flex-end !important;
            gap: 12px !important;
            width: 100% !important;
            grid-template-columns: unset !important;
        }

        /* Give each field a sensible minimum so they wrap instead of crushing */
        .ss-filters-panel .fi-fo-field-wrp {
            flex: 1 1 180px !important;
            /* was 1 1 0 — the 180px basis triggers wrapping */
            min-width: 150px !important;
            /* was 0 — stops fields shrinking into overlap */
        }

        /* Let labels wrap instead of overflowing */
        .ss-filters-panel label,
        .ss-filters-panel .fi-fo-field-wrp label {
            font-size: 10px !important;
            font-weight: 700 !important;
            text-transform: uppercase !important;
            letter-spacing: 0.05em !important;
            margin-bottom: 4px !important;
            white-space: normal !important;
            /* was nowrap — was causing the label overlap */
            line-height: 1.2 !important;
        }

        .ss-filters-panel input,
        .ss-filters-panel select,
        .ss-filters-panel .fi-input,
        .ss-filters-panel .fi-select-input,
        .ss-filters-panel [class*="fi-input"] {
            font-size: 12.5px !important;
            min-height: 34px !important;
            height: 34px !important;
            padding-top: 0 !important;
            padding-bottom: 0 !important;
        }

        /* ── Stat cards ─────────────────────────────────────────────── */
        .ss-stats-grid {
            display: grid;
            grid-template-columns: repeat(1, 1fr);
            gap: 12px;
            margin-bottom: 16px;
        }

        @media (min-width: 480px) {
            .ss-stats-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 640px) {
            .ss-filters-panel .fi-fo-field-wrp {
                flex: 1 1 100% !important;
            }
        }

        @media (min-width: 1024px) {
            .ss-stats-grid {
                grid-template-columns: repeat(5, 1fr);
            }
        }

        .ss-card {
            background: var(--ss-bg);
            border: 1.5px solid var(--ss-border);
            border-radius: 14px;
            padding: 18px 20px 16px;
            transition: box-shadow 0.2s, transform 0.2s;
        }

        .ss-card:hover {
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
            transform: translateY(-1px);
        }

        .ss-card-label {
            font-size: 10.5px;
            font-weight: 700;
            color: rgb(var(--gray-500));
            text-transform: uppercase;
            letter-spacing: 0.07em;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 7px;
        }

        .ss-card-icon-sm {
            width: 22px;
            height: 22px;
            border-radius: 6px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .ss-card-value {
            font-size: 26px;
            font-weight: 700;
            color: rgb(var(--gray-900));
            line-height: 1.15;
            letter-spacing: -0.02em;
        }

        .dark .ss-card-value {
            color: rgb(var(--gray-50));
        }

        .ss-card-sub {
            font-size: 11px;
            color: rgb(var(--gray-400));
            margin-top: 4px;
        }

        /* ── Panels ─────────────────────────────────────────────────── */
        .ss-panel {
            background: var(--ss-bg);
            border: 1.5px solid var(--ss-border);
            border-radius: 14px;
            margin-bottom: 16px;
            overflow: hidden;
        }

        .ss-panel-header {
            padding: 7px 20px;
            border-bottom: 1.5px solid var(--ss-border);
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
        }

        .ss-panel-title {
            font-size: 11px;
            font-weight: 700;
            color: rgb(var(--gray-700));
            text-transform: uppercase;
            letter-spacing: 0.06em;
        }

        .dark .ss-panel-title {
            color: rgb(var(--gray-300));
        }

        .ss-panel-meta {
            font-size: 11px;
            color: rgb(var(--gray-400));
        }

        /* ── Payment pills ───────────────────────────────────────────── */
        .ss-payment-pills {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            padding: 14px 20px;
        }

        .ss-payment-pill {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            padding: 7px 14px;
            border-radius: 10px;
            background: transparent;
            border: 1.5px solid var(--ss-border);
            font-size: 12.5px;
            color: rgb(var(--gray-600));
            font-weight: 500;
        }

        .dark .ss-payment-pill {
            color: rgb(var(--gray-400));
        }

        .ss-payment-pill-count {
            font-family: 'DM Mono', monospace;
            font-weight: 700;
            font-size: 13px;
            color: rgb(var(--gray-900));
        }

        .dark .ss-payment-pill-count {
            color: rgb(var(--gray-50));
        }

        .ss-pill-dot {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            flex-shrink: 0;
        }

        /* ── Table ───────────────────────────────────────────────────── */
        .ss-table {
            width: 100%;
            border-collapse: collapse;
        }

        .ss-table thead {
            background: var(--ss-bg-thead);
        }

        .ss-table th {
            padding: 10px 18px;
            text-align: left;
            font-size: 10.5px;
            font-weight: 700;
            color: rgb(var(--gray-500));
            text-transform: uppercase;
            letter-spacing: 0.06em;
            white-space: nowrap;
            border-bottom: 1.5px solid var(--ss-border);
        }

        .ss-table td {
            padding: 11px 18px;
            border-bottom: 1px solid var(--ss-border-cell);
            font-size: 12.5px;
            color: rgb(var(--gray-700));
            vertical-align: middle;
        }

        .dark .ss-table td {
            color: rgb(var(--gray-300));
        }

        .ss-table tbody tr:last-child td {
            border-bottom: none;
        }

        .ss-table tbody tr {
            transition: background 0.1s;
        }

        .ss-table tbody tr:hover {
            background: rgba(0, 0, 0, 0.025);
        }

        .dark .ss-table tbody tr:hover {
            background: rgba(255, 255, 255, 0.03);
        }

        /* ── Badges ──────────────────────────────────────────────────── */
        .ss-badge {
            display: inline-flex;
            align-items: center;
            padding: 3px 9px;
            border-radius: 6px;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.02em;
        }

        .ss-badge-pos {
            background: rgba(59, 130, 246, 0.12);
            color: #1d4ed8;
            border: 1px solid rgba(59, 130, 246, 0.3);
        }

        .dark .ss-badge-pos {
            color: #93c5fd;
            border-color: rgba(147, 197, 253, 0.25);
        }

        .ss-badge-online {
            background: rgba(34, 197, 94, 0.12);
            color: #15803d;
            border: 1px solid rgba(34, 197, 94, 0.3);
        }

        .ss-badge-refund {
            background: var(--pos-danger-bg, #fee2e2);
            color: var(--pos-danger, #dc2626);
        }

        .dark .ss-badge-online {
            color: #86efac;
            border-color: rgba(134, 239, 172, 0.25);
        }

        /* ── Utility ─────────────────────────────────────────────────── */
        .ss-mono {
            font-family: 'DM Mono', monospace;
            font-size: 12px;
        }

        .ss-right {
            text-align: right;
        }

        .ss-bold {
            font-weight: 600;
            color: rgb(var(--gray-900));
        }

        .dark .ss-bold {
            color: rgb(var(--gray-100));
        }

        .ss-muted {
            color: rgb(var(--gray-400));
        }

        .ss-amount {
            font-family: 'DM Mono', monospace;
            font-size: 12.5px;
            font-weight: 600;
            color: rgb(var(--gray-900));
        }

        .dark .ss-amount {
            color: rgb(var(--gray-100));
        }

        .ss-time {
            color: rgb(var(--gray-400));
            font-size: 11.5px;
            margin-left: 3px;
        }

        .ss-empty {
            padding: 56px 20px;
            text-align: center;
            color: rgb(var(--gray-400));
            font-size: 13px;
        }

        .ss-badge-paid {
            background: var(--pos-success-bg, #dcfce7);
            color: var(--pos-success, #16a34a);
        }

        .ss-badge-partial {
            background: color-mix(in srgb, #f59e0b 18%, transparent);
            color: #d97706;
        }

        .ss-action-link {
            background: none;
            border: none;
            cursor: pointer;
            font: inherit;
            color: var(--pos-primary, #3b82f6);
            padding: 2px 6px;
            text-decoration: none;
        }

        .ss-action-link:hover {
            text-decoration: underline;
        }