/* Full page scroll lock (desktop + iOS) */
    html.no-scroll,
    body.no-scroll {
        overflow: hidden;
        height: 100%;
    }

    /* Extra lock for iOS to stop touch scroll “rubber banding” */
    body.no-scroll {
        position: fixed;
        width: 100%;
        left: 0;
        right: 0;
    }


    #filter-backdrop {
        position: fixed;
        inset: 0; /* full screen */
        background: rgba(0,0,0,0.25); /* subtle dark overlay */
        backdrop-filter: blur(4px);   /* the actual blur */
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.4s ease;
        z-index: 999; /* just under your sheet's z-index (1000) */
    }

    #bookie-filter-dialog.open ~ #filter-backdrop {
        opacity: 1;
        pointer-events: auto;
    }


    .percent-cell { min-width: 140px; white-space: nowrap; }
    .percent-dual { display:flex; flex-direction:column; gap:2px; }
    .percent-dual span { display:block; }
    .hide { display: none !important; }
    .odds-dd { position: relative; display:inline-block; }
    .odds-dd__toggle { display:flex; align-items:center; gap:.4rem; padding:.35rem .6rem; border:1px solid #ddd; border-radius:8px; cursor:pointer; }
    .odds-dd__logo { width:30px; height:30px; object-fit:contain; }
    .odds-dd__menu { position:absolute; z-index:20; min-width:220px; margin-top:.25rem; padding:.35rem; border:1px solid #ddd; border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,.08); max-height:260px; overflow:auto; }
    .odds-dd__item { display:flex; align-items:center; justify-content:space-between; gap:.5rem; width:100%; padding:.4rem .5rem; border-radius:6px; cursor:pointer; border:none; background:transparent; }
    .odds-dd__left { display:flex; align-items:center; gap:.5rem; }
    .odds-dd__odds { font-weight:bold; }
    .odds-dd__link { font-size:.85em; opacity:.7; text-decoration:underline; }
    .sortable { cursor: pointer; user-select: none; }
    .sort-indicator { opacity: .6; font-size: .85em; margin-left: 4px; display: inline-flex; align-items: center; }
    .odds-dd__toggle {
        display: flex;
        align-items: center;
        gap: .4rem;
        padding: .35rem .6rem;
        border: none;
        border-radius: 8px;
        background-color: var(--color-base-300); /* inherit luxury bg */
        color: var(--color-base-content);
        cursor: pointer;
        transition: background-color 0.2s;
    }
    .odds-dd__toggle:hover {
        background-color: color-mix(in oklch, var(--color-base-300) 80%, black);
    }

    /* Dropdown menu (dark theme) */
    .odds-dd__menu {
        position: absolute;
        z-index: 20;
        min-width: 220px;
        margin-top: .25rem;
        padding: .35rem;
        background-color: var(--color-base-200);
        border: 1px solid var(--color-primary-dark);
        border-radius: 8px;
        box-shadow: 0 8px 24px rgba(0,0,0,.25);
        max-height: 260px;
        overflow: auto;
        color: var(--color-base-content);
    }

        /* Gold glow for luxury cards/tables */
    .lux-gold-glow {
        position: relative;
        border: 1px solid oklch(72% 0.32 90 / 0.45);
        box-shadow:
            0 0 36px 8px oklch(78% 0.26 95 / 0.18),
            0 0 14px 2px  oklch(86% 0.28 100 / 0.14),
            0 10px 24px rgba(0,0,0,.25);
        transition: box-shadow .3s ease, transform .3s ease; /* <- ensures smooth in + out */
        }

    .icon-btn {
        padding: 0;         /* no inner padding */
        min-height: 0;      /* override DaisyUI's min-h */
        overflow: hidden;   /* so the image can fully fill */
    }

    /* 1) Keep separate borders */
    .arbitrage-table { border-collapse: separate; border-spacing: 0; }

    /* 3) Slightly darker grid color (≈ slate-400 at ~55% opacity) */
    .arbitrage-table td {
        border-left: 1px solid oklch(62% 0.04 70 / 0.55)
    }

    .arbitrage-table th {
        border-left: 1px solid oklch(62% 0.04 70 / 0.55);
        background-color: var(--tbl-head-bg);
        border-bottom: 1px solid oklch(62% 0.04 70 / 0.55);
    }

    /* 1) Remove first and last column outer borders */
    .arbitrage-table tr > *:first-child { border-left: none; }
    .arbitrage-table tr > *:last-child  { border-right: none; }

    /* 2) Bolder header separator (and a touch darker) */
    .arbitrage-table tr {
        border-bottom: 2px solid yellow !important;
    }

    /* Row separators (same darker tone) */
    .arbitrage-table tbody tr + tr > * {
        border-top: 1px solid oklch(62% 0.04 70 / 0.55);
    }

    .no-scroll { overflow: hidden !important; }

    /* Dialog: pinned under the 40px header; outside area passes clicks through */
    #bookie-filter-dialog{
        position: fixed;
        inset: 30px 0 0 0;      /* 40px top gap; flush right/bottom/left */
        margin: 0;
        padding-top: 20px;
        border: 0;
        background: transparent;
        display: flex;
        align-items: stretch;
        justify-content: flex-end;
        overflow: hidden;
        width: auto !important; /* neutralize old 100vw/100vh */
        height: auto !important;
        z-index: 1000;

        /* KEY: allow clicking the page behind except where the sheet is */
        pointer-events: none;
    }

    /* The right-hand sheet itself is interactive and fills the dialog height */
    #bookie-filter-dialog .filter-sheet{
        pointer-events: auto;
        height: 100%;
        width: min(100%, 820px);   /* your existing max widths */
        max-width: 820px;

        /* rounded top-left corner + subtle gold glow (lighter than .lux-gold-glow) */
        border-top-right-radius: 1rem;                     /* ≈ Tailwind rounded-2xl */
        overflow: hidden;                                 /* clip the rounded corner */
        border: 1px solid var(--tbl-grid);  /* soft gold top edge */
        border-left: none;       /* keep existing left border */
        box-shadow:
            0 0 22px 6px oklch(78% 0.20 95 / 0.12),
            0 0 10px 1px  oklch(86% 0.22 100 / 0.10),
            0 8px 18px rgba(0,0,0,.18);

        /* keep your slide/fade animation, but cheaper durations */
        transform: translateX(-50px);
        opacity: 0;
        transition: transform 350ms cubic-bezier(.2,.8,.2,1), opacity 275ms linear;

        /* perf hints */
        backface-visibility: hidden;
        contain: paint;
    }

    #bookie-filter-dialog .sheet-header{
        /* Match the table thead; if you later set --tbl-head-bg, this honors it */
        background-color: var(--tbl-head-bg, color-mix(in oklch, var(--color-base-200) 40%, transparent)) !important;
        padding-block: .70rem !important; /* slightly less than py-3 if you want it tighter */
    }


    #bookie-filter-dialog .flex-1{
        padding: 0 !important;
    }

    /* Enter */
    #bookie-filter-dialog.open .filter-sheet{
        transform: translateX(0);
        opacity: 1;
    }

    /* Exit */
    #bookie-filter-dialog.closing .filter-sheet{
    transform: translateX(-20px);
    opacity: 0;
    }

    /* Only reserve GPU during actual animation */
    #bookie-filter-dialog.open .filter-sheet,
    #bookie-filter-dialog.closing .filter-sheet{
    will-change: transform, opacity;
    }

    /* Respect reduced motion */
    @media (prefers-reduced-motion: reduce) {
    #bookie-filter-dialog .filter-sheet{
        transition: none; transform: none; opacity: 1;
    }
    }

    /* 95% width separators between items */
    .category-rail li { position: relative; }
    .category-rail li:not(:last-child)::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
        width: 95%;
        height: 1px;
        background: var(--tbl-grid);
        opacity: .8;
    }

    .category-rail [data-tab]{
        color: var(--color-base-content);
        padding-block: 1rem !important;
        background: transparent !important;   /* neutralize any hover:bg-* classes */
        transition: color .2s ease;
    }
    .category-rail [data-tab]:hover{
        color: var(--color-warning-mid);       /* hover color */
    }
    .category-rail [data-tab][aria-current="page"]{
        color: var(--color-primary-bright);    /* active color */
    }

    /* Let clicks go through the dialog by default */
    #bookie-filter-dialog { pointer-events: none; }

    /* Make the full-screen form transparent to clicks at all times */
    #bookie-filter-dialog > form { pointer-events: none; }

    /* CLOSED (default) — sheet not interactive */
    #bookie-filter-dialog .filter-sheet { pointer-events: none; }

    /* OPEN — sheet interactive */
    #bookie-filter-dialog.open .filter-sheet { pointer-events: auto; }

    /* While closing animation runs, disable again (prevents stray clicks) */
    #bookie-filter-dialog.closing .filter-sheet { pointer-events: none; }

        /* 3) Bookies & Markets – tile styling that fits the page */
    #bookie-filter-dialog .bookie-list label,
    #bookie-filter-dialog .bonus-bookie-list label,
    #bookie-filter-dialog .market-list label{
        display: flex;
        align-items: center;
        gap: .6rem;
        padding: .6rem .7rem;
        border-radius: .75rem;                 /* ~rounded-xl */
        background: color-mix(in oklch, var(--color-base-300) 30%, transparent);
        border: 1px solid var(--tbl-grid);
        transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .06s ease;
    }

    #bookie-filter-dialog .bookie-list label:hover,
    #bookie-filter-dialog .bonus-bookie-list label:hover,
    #bookie-filter-dialog .market-list label:hover{
        background: color-mix(in oklch, var(--color-base-300) 45%, transparent);
    }

    #bookie-filter-dialog .bookie-list label:has(input:checked),
    #bookie-filter-dialog .bonus-bookie-list label:has(input:checked),
    #bookie-filter-dialog .market-list label:has(input:checked){
        background: color-mix(in oklch, var(--color-primary) 10%, var(--color-base-200));
        border-color: oklch(72% 0.32 90 / .45);
        box-shadow: 0 0 5px oklch(78% 0.26 95 / .16), 0 4px 10px rgba(0,0,0,.18);
    }

    #bookie-filter-dialog .bookie-list img,
    #bookie-filter-dialog .bonus-bookie-list img{
        width: 20px; height: 20px; object-fit: contain; opacity: .9;
    }

    #bookie-filter-dialog .bookie-list label .truncate,
    #bookie-filter-dialog .bonus-bookie-list label .truncate,
    #bookie-filter-dialog .market-list label .truncate{
        font-size: .95rem;
    }

    #bookie-filter-dialog .bookie-list label:has(input:checked) .truncate,
    #bookie-filter-dialog .bonus-bookie-list label:has(input:checked) .truncate,
    #bookie-filter-dialog .market-list label:has(input:checked) .truncate{
        font-weight: 600;
    }

    /* 4) Right-rail border hits the top (keep this in case Tailwind classes reintroduce spacing) */
    #bookie-filter-dialog .flex-1.min-h-0{ padding-top: 0 !important; }

    /* 5) Keep the sheet interactive only when open (from earlier fix) */
    #bookie-filter-dialog { pointer-events: none; }
    #bookie-filter-dialog > form { pointer-events: none; }
    #bookie-filter-dialog .filter-sheet { pointer-events: none; }
    #bookie-filter-dialog.open .filter-sheet { pointer-events: auto; }
    #bookie-filter-dialog.closing .filter-sheet { pointer-events: none; }