/* ═══════════════════════════════════════════════════════════════════════
   ROYALS 666 — DESIGN TOKENS  (Royals UI/UX Harmonization, 2026-05-18)
   Single source of truth for spacing, buttons, palette, typography.
   Loaded BEFORE royals-overlay.css so overlays inherit these tokens.
   Loaded ONLY in the admin panel chain — does not affect player turbo UI.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
    /* Spacing scale — 4 px baseline grid (Tailwind-aligned).
       Use these instead of arbitrary px so margins/paddings stay symmetric. */
    --tb-space-0: 0;
    --tb-space-1: 4px;     /* hairline */
    --tb-space-2: 8px;     /* tight */
    --tb-space-3: 12px;    /* default gap inside cards */
    --tb-space-4: 16px;    /* default card padding */
    --tb-space-5: 20px;    /* section separator */
    --tb-space-6: 24px;    /* card outer margin */
    --tb-space-8: 32px;    /* page-level gutter */
    --tb-space-10: 40px;   /* section group separator */
    --tb-space-12: 48px;   /* big visual break */

    /* Button geometry — every interactive button uses these so heights
       and corners stay uniform across the panel. */
    --tb-btn-h-sm: 32px;   /* minimum tap target / small action */
    --tb-btn-h:    36px;   /* default — meets 36 px a11y minimum */
    --tb-btn-h-lg: 44px;   /* primary submit / hero CTA */
    --tb-btn-radius: 8px;
    --tb-btn-padding-x: 16px;
    --tb-btn-padding-x-lg: 24px;
    --tb-btn-font-size: 13px;
    --tb-btn-font-weight: 600;

    /* Form input geometry — match button height so they sit on the same baseline. */
    --tb-input-h: 36px;
    --tb-input-radius: 8px;
    --tb-input-padding-x: 12px;
    --tb-input-border: 1px solid #e7e5e4;
    --tb-input-border-focus: 1px solid #3b82f6;

    /* Color palette — neutral chrome + 4 intent colors.
       Use these instead of raw hex / random Tailwind classes. */
    --tb-bg-page:       #f8fafc;
    --tb-bg-card:       #ffffff;
    --tb-bg-subtle:     #f5f5f4;
    --tb-bg-muted:      #fafaf9;
    --tb-border:        #e7e5e4;
    --tb-border-strong: #d6d3d1;
    --tb-text:          #1c1917;
    --tb-text-muted:    #57534e;
    --tb-text-dim:      #78716c;

    /* Intent colors — psychology mapping:
         primary = neutral admin actions (Save / Submit / Edit)
         success = ADD / GREEN money / approve
         danger  = REMOVE / RED money / reject / destroy
         warning = caution / pending */
    --tb-primary:       #2563eb;
    --tb-primary-hover: #1d4ed8;
    --tb-primary-ring:  rgba(37, 99, 235, .25);
    --tb-success:       #16a34a;
    --tb-success-hover: #15803d;
    --tb-success-ring:  rgba(22, 163, 74, .25);
    --tb-danger:        #dc2626;
    --tb-danger-hover:  #b91c1c;
    --tb-danger-ring:   rgba(220, 38, 38, .25);
    --tb-warning:       #f59e0b;
    --tb-warning-hover: #d97706;
    --tb-warning-ring:  rgba(245, 158, 11, .25);

    /* Brand accent — gold pill / Royals 666 mark.
       Set per-tenant by ResolveWhitelabel via --wl-primary; this is the fallback. */
    --tb-accent-gold:   #d4af37;

    /* Elevations */
    --tb-shadow-sm: 0 1px 2px rgba(0, 0, 0, .04);
    --tb-shadow:    0 4px 12px rgba(0, 0, 0, .08);
    --tb-shadow-lg: 0 10px 32px rgba(0, 0, 0, .12);

    /* Typography */
    --tb-font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont,
                    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --tb-text-xs:   11px;
    --tb-text-sm:   13px;
    --tb-text-base: 14px;
    --tb-text-lg:   16px;
    --tb-text-xl:   18px;
    --tb-text-2xl:  22px;
    --tb-leading-tight:  1.25;
    --tb-leading-normal: 1.5;
}

/* ─── Standardized button classes ─────────────────────────────────────────
   Use these in blades INSTEAD of ad-hoc `bg-blue-600 hover:... px-6 py-2`
   so heights and ring states stay uniform. Existing Tailwind utility
   buttons still work; these are additive. */

.tb-btn,
button.tb-btn,
a.tb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tb-space-2);
    height: var(--tb-btn-h);
    padding: 0 var(--tb-btn-padding-x);
    border-radius: var(--tb-btn-radius);
    border: 1px solid transparent;
    font-family: var(--tb-font-sans);
    font-size: var(--tb-btn-font-size);
    font-weight: var(--tb-btn-font-weight);
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .05s ease;
    user-select: none;
}
.tb-btn:active { transform: translateY(1px); }
.tb-btn:focus-visible { outline: none; }
.tb-btn-sm { height: var(--tb-btn-h-sm); padding: 0 var(--tb-space-3); font-size: var(--tb-text-xs); }
.tb-btn-lg { height: var(--tb-btn-h-lg); padding: 0 var(--tb-btn-padding-x-lg); font-size: var(--tb-text-base); }

/* Variants */
.tb-btn-primary  { background: var(--tb-primary);  color: #fff; }
.tb-btn-primary:hover  { background: var(--tb-primary-hover); }
.tb-btn-primary:focus-visible  { box-shadow: 0 0 0 3px var(--tb-primary-ring); }

.tb-btn-success  { background: var(--tb-success);  color: #fff; }
.tb-btn-success:hover  { background: var(--tb-success-hover); }
.tb-btn-success:focus-visible  { box-shadow: 0 0 0 3px var(--tb-success-ring); }

.tb-btn-danger   { background: var(--tb-danger);   color: #fff; }
.tb-btn-danger:hover   { background: var(--tb-danger-hover); }
.tb-btn-danger:focus-visible   { box-shadow: 0 0 0 3px var(--tb-danger-ring); }

.tb-btn-warning  { background: var(--tb-warning);  color: #0c1220; }
.tb-btn-warning:hover  { background: var(--tb-warning-hover); }
.tb-btn-warning:focus-visible  { box-shadow: 0 0 0 3px var(--tb-warning-ring); }

.tb-btn-ghost   { background: transparent; color: var(--tb-text); border-color: var(--tb-border); }
.tb-btn-ghost:hover   { background: var(--tb-bg-subtle); border-color: var(--tb-border-strong); }

.tb-btn-outline { background: transparent; color: var(--tb-primary); border-color: var(--tb-primary); }
.tb-btn-outline:hover { background: var(--tb-primary); color: #fff; }

.tb-btn:disabled,
.tb-btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; }

/* ─── Standardized form inputs ────────────────────────────────────────── */

.tb-input,
input.tb-input,
select.tb-input,
textarea.tb-input {
    display: block;
    width: 100%;
    height: var(--tb-input-h);
    padding: 0 var(--tb-input-padding-x);
    border-radius: var(--tb-input-radius);
    border: var(--tb-input-border);
    background: #fff;
    color: var(--tb-text);
    font-family: var(--tb-font-sans);
    font-size: var(--tb-text-sm);
    line-height: 1;
    transition: border-color .15s, box-shadow .15s;
}
textarea.tb-input { height: auto; padding-top: 10px; padding-bottom: 10px; line-height: var(--tb-leading-normal); }
.tb-input:focus { outline: none; border-color: var(--tb-primary); box-shadow: 0 0 0 3px var(--tb-primary-ring); }
.tb-input:disabled { background: var(--tb-bg-subtle); cursor: not-allowed; opacity: .7; }

.tb-label {
    display: block;
    font-size: var(--tb-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--tb-text-muted);
    margin-bottom: var(--tb-space-1);
}

/* ─── Card / page chrome (additive to existing .tb-card) ─────────────── */

.tb-card {
    background: var(--tb-bg-card);
    border: 1px solid var(--tb-border);
    border-radius: 12px;
    padding: var(--tb-space-5) var(--tb-space-5);
    margin-bottom: var(--tb-space-4);
    box-shadow: var(--tb-shadow-sm);
}
.tb-card + .tb-card { margin-top: 0; }

/* ─── Status pills (replace ad-hoc colored badges) ───────────────────── */

.tb-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: var(--tb-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    line-height: 1;
}
.tb-pill-success { background: rgba(22, 163, 74, .10);  color: var(--tb-success-hover); }
.tb-pill-danger  { background: rgba(220, 38, 38, .10);  color: var(--tb-danger-hover); }
.tb-pill-warning { background: rgba(245, 158, 11, .12); color: var(--tb-warning-hover); }
.tb-pill-info    { background: rgba(37, 99, 235, .10);  color: var(--tb-primary-hover); }
.tb-pill-muted   { background: var(--tb-bg-subtle);     color: var(--tb-text-muted); }

/* ─── Table standardization ──────────────────────────────────────────── */

.tb-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--tb-text-sm);
    color: var(--tb-text);
}
.tb-table th,
.tb-table td {
    padding: var(--tb-space-3) var(--tb-space-4);
    text-align: left;
    border-bottom: 1px solid var(--tb-border);
    vertical-align: middle;
}
.tb-table th {
    font-size: var(--tb-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--tb-text-muted);
    background: var(--tb-bg-muted);
}
.tb-table tbody tr:hover { background: var(--tb-bg-subtle); }
.tb-table tbody tr:last-child td { border-bottom: 0; }
.tb-table.is-compact th, .tb-table.is-compact td { padding: var(--tb-space-2) var(--tb-space-3); }

/* Pagination centered by default to match WhitelabelsController::index look */
.tb-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--tb-space-2);
    padding: var(--tb-space-4) 0;
}
.tb-pagination a,
.tb-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 var(--tb-space-3);
    border-radius: var(--tb-btn-radius);
    font-size: var(--tb-text-sm);
    font-weight: 600;
    color: var(--tb-text);
    background: var(--tb-bg-card);
    border: 1px solid var(--tb-border);
    text-decoration: none;
}
.tb-pagination a:hover { background: var(--tb-bg-subtle); }
.tb-pagination .active span,
.tb-pagination [aria-current="page"] {
    background: var(--tb-primary);
    color: #fff;
    border-color: var(--tb-primary);
}

/* ─── Friendly error / empty states (matches errors/*.blade.php style) ──── */

.tb-empty {
    text-align: center;
    padding: var(--tb-space-12) var(--tb-space-6);
    color: var(--tb-text-muted);
}
.tb-empty .tb-empty-icon { font-size: 40px; opacity: .35; margin-bottom: var(--tb-space-3); }
.tb-empty .tb-empty-title { font-size: var(--tb-text-lg); font-weight: 700; color: var(--tb-text); margin-bottom: var(--tb-space-1); }
.tb-empty .tb-empty-msg { font-size: var(--tb-text-sm); }

/* ═══════════════════════════════════════════════════════════════════════
   LEGACY-BOOTSTRAP HARMONIZATION
   Many operator views still use `.btn .btn-primary` / `.form-control` /
   `.form-group label` (39 files at last sweep). Rewriting every one is
   churn — instead we re-tokenize the Bootstrap selectors in-place so they
   inherit the same geometry / palette as .tb-* without any blade edits.
   Scoped to .ap-main + main (admin shells) so player turbo UI is untouched.
   ═══════════════════════════════════════════════════════════════════════ */

.ap-main .btn,
main .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tb-space-2);
    height: var(--tb-btn-h);
    padding: 0 var(--tb-btn-padding-x);
    border-radius: var(--tb-btn-radius);
    border: 1px solid transparent;
    font-family: var(--tb-font-sans);
    font-size: var(--tb-btn-font-size);
    font-weight: var(--tb-btn-font-weight);
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .05s ease;
}
.ap-main .btn-sm,    main .btn-sm    { height: var(--tb-btn-h-sm); padding: 0 var(--tb-space-3); font-size: var(--tb-text-xs); }
.ap-main .btn-lg,    main .btn-lg    { height: var(--tb-btn-h-lg); padding: 0 var(--tb-btn-padding-x-lg); font-size: var(--tb-text-base); }

.ap-main .btn-primary,   main .btn-primary    { background: var(--tb-primary);   border-color: var(--tb-primary);   color: #fff; }
.ap-main .btn-primary:hover, main .btn-primary:hover { background: var(--tb-primary-hover); border-color: var(--tb-primary-hover); color: #fff; }
.ap-main .btn-success,   main .btn-success    { background: var(--tb-success);   border-color: var(--tb-success);   color: #fff; }
.ap-main .btn-success:hover, main .btn-success:hover { background: var(--tb-success-hover); border-color: var(--tb-success-hover); color: #fff; }
.ap-main .btn-danger,    main .btn-danger     { background: var(--tb-danger);    border-color: var(--tb-danger);    color: #fff; }
.ap-main .btn-danger:hover, main .btn-danger:hover  { background: var(--tb-danger-hover);  border-color: var(--tb-danger-hover);  color: #fff; }
.ap-main .btn-warning,   main .btn-warning    { background: var(--tb-warning);   border-color: var(--tb-warning);   color: #0c1220; }
.ap-main .btn-warning:hover, main .btn-warning:hover { background: var(--tb-warning-hover); border-color: var(--tb-warning-hover); color: #0c1220; }
.ap-main .btn-secondary, main .btn-secondary  { background: transparent;         border-color: var(--tb-border); color: var(--tb-text); }
.ap-main .btn-secondary:hover, main .btn-secondary:hover { background: var(--tb-bg-subtle); border-color: var(--tb-border-strong); color: var(--tb-text); }
.ap-main .btn-outline-primary, main .btn-outline-primary { background: transparent; color: var(--tb-primary); border-color: var(--tb-primary); }
.ap-main .btn-outline-primary:hover, main .btn-outline-primary:hover { background: var(--tb-primary); color: #fff; }

.ap-main .form-control,
.ap-main .form-select,
main .form-control,
main .form-select {
    display: block;
    width: 100%;
    height: var(--tb-input-h);
    padding: 0 var(--tb-input-padding-x);
    border-radius: var(--tb-input-radius);
    border: var(--tb-input-border);
    background: #fff;
    color: var(--tb-text);
    font-family: var(--tb-font-sans);
    font-size: var(--tb-text-sm);
    line-height: 1;
    transition: border-color .15s, box-shadow .15s;
    box-shadow: none;
}
.ap-main textarea.form-control,
main textarea.form-control { height: auto; padding-top: 10px; padding-bottom: 10px; line-height: var(--tb-leading-normal); }
.ap-main .form-control:focus,
.ap-main .form-select:focus,
main .form-control:focus,
main .form-select:focus { outline: none; border-color: var(--tb-primary); box-shadow: 0 0 0 3px var(--tb-primary-ring); }

.ap-main .form-group { margin-bottom: var(--tb-space-4); }
.ap-main .form-group > label,
main .form-group > label {
    display: block;
    font-size: var(--tb-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--tb-text-muted);
    margin-bottom: var(--tb-space-1);
}