*,
::before,
::after {
    box-sizing: border-box;
}

html {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif, Apple Color Emoji, "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

body {
    min-height: 100vh;
    /* min-width: 100vh; */
    margin: 0 auto;
    display: grid;
    /* gap: 3vw; */
    grid-template-rows: min-content 1fr min-content;
}

a {
    color: currentColor;
}

footer {
    text-align: center;
}

.base-template main {
    text-align: center;
}

.skip-link {
    position: absolute;
    top: -30px;
}

.skip-link:focus-visible {
    top: 5px;
}


.page-gradient {
    background-image:
        radial-gradient(950px 650px at 18% 22%, color-mix(in srgb, var(--color-secondary), transparent 93%), transparent 60%),
        radial-gradient(850px 600px at 85% 15%, color-mix(in srgb, var(--color-primary), transparent 88%), transparent 62%),
        conic-gradient(from 230deg at 65% 75%, color-mix(in srgb, var(--color-secondary), transparent 90%), transparent 25%),
        linear-gradient(135deg,
            color-mix(in srgb, var(--color-base-100) 80%, var(--color-primary) 20%) 0%,
            color-mix(in srgb, var(--color-base-200) 70%, var(--color-primary) 30%) 40%,
            color-mix(in srgb, var(--color-base-300) 70%, var(--color-base-200) 30%) 100%);
}


.header-gradient {
    background: linear-gradient(135deg,
            rgba(26, 16, 52, 0.65) 0%,
            rgba(48, 22, 72, 0.55) 60%,
            rgba(20, 14, 44, 0.5) 100%);
    backdrop-filter: blur(12px);
}

/* ── Tabulator x DaisyUI: compact, theme-driven ─────────────────────────── */
.tabulator {
    /* table tokens */
    --tbl-bg: color-mix(in srgb, var(--color-base-100) 80%, var(--color-base-200) 20%);
    --tbl-header-bg: color-mix(in srgb, var(--color-base-200) 80%, var(--color-primary) 20%);
    --tbl-row: var(--color-base-100);
    --tbl-border: color-mix(in srgb, var(--color-base-content) 12%, transparent);
    --tbl-text: var(--color-base-content);
    --tbl-select: color-mix(in srgb, var(--color-accent) 70%, var(--color-info) 30%);
    --tbl-grid-col: color-mix(in srgb, var(--color-base-content) 10%, transparent);
    --tbl-grid-row: color-mix(in srgb, var(--color-base-content) 8%, transparent);
    --tint: 8%;
    --tint-hover: 16%;

    /* checkbox tokens */
    --cb-base: var(--color-base-100);
    --cb-border: color-mix(in srgb, var(--color-base-content) 35%, transparent);
    --cb-accent: var(--tbl-select);
    --cb-focus: var(--tbl-select);

    background: var(--tbl-bg) !important;
    color: var(--tbl-text) !important;
    border: 1px solid var(--tbl-border) !important;
    box-shadow: 0 20px 45px rgba(7, 4, 20, .6);
    margin: 0px;
}

/* text colour everywhere */
.tabulator,
.tabulator * {
    color: var(--tbl-text) !important;
}

/* header block */
.tabulator :is(.tabulator-header,
    .tabulator-headers,
    .tabulator-col,
    .tabulator-col .tabulator-col-content,
    .tabulator-col .tabulator-col-title-holder) {
    background: var(--tbl-header-bg) !important;
    border-color: var(--tbl-border) !important;
    box-shadow: none !important;
}

/* table bg */
.tabulator :is(.tabulator-tableholder, .tabulator-table) {
    background: var(--tbl-row) !important;
}

/* vertical/row grid lines */
.tabulator :is(.tabulator-col, .tabulator-cell) {
    border-right: 1px solid var(--tbl-grid-col) !important;
}

.tabulator .tabulator-row {
    border-bottom: 1px solid var(--tbl-grid-row) !important;
    background: color-mix(in srgb,
            var(--tbl-row) calc(100% - var(--tint)),
            var(--color-primary) var(--tint)) !important;
    transition: background .2s, box-shadow .2s;
}

/* hover */
.tabulator .tabulator-row:hover {
    background: color-mix(in srgb,
            var(--tbl-row) calc(100% - var(--tint-hover)),
            var(--color-primary) var(--tint-hover)) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 18%, transparent);
}

/* selection */
.tabulator .tabulator-row.tabulator-selected {
    outline: 1px solid var(--tbl-select) !important;
    outline-offset: -2px;
    box-shadow: 0 0 10px color-mix(in srgb, var(--tbl-select) 25%, transparent);
}

@supports (color-mix(in srgb, black, white)) {
    .tabulator .tabulator-row.tabulator-selected::after {
        content: "";
        position: absolute;
        inset: 0;
        background: color-mix(in srgb, transparent 82%, var(--tbl-select) 18%);
        pointer-events: none;
    }
}

/* sort arrows */
.tabulator .tabulator-col-sorter .tabulator-arrow {
    border-top-color: var(--tbl-text) !important;
    border-bottom-color: var(--tbl-text) !important;
}

/* ── Custom checkbox (round) ────────────────────────────────────────────── */
.tabulator input[type="checkbox"] {
    appearance: none;
    inline-size: 1rem;
    block-size: 1rem;
    border-radius: 50%;
    display: inline-grid;
    place-content: center;
    border: 1.5px solid var(--cb-border);
    background: var(--cb-base);
    transition: background .15s, border-color .15s, box-shadow .15s, transform .15s;
    transform: translateY(3px) scale(1.3);
}

.tabulator input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--cb-focus);
    outline-offset: 1px;
}

/* ✓ checked: keep border, draw white tick as bg image */
.tabulator input[type="checkbox"]:checked {
    background: var(--cb-accent);
    border-color: var(--cb-accent);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4 4L19 7.5'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 90% 90%;
}

/* ─ indeterminate: centred minus, keep border visible */
.tabulator input[type="checkbox"]:indeterminate {
    background: var(--color-warning);
    border-color: var(--color-warning);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='3' y='9' width='20' height='5' fill='white'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 70% 70%;
    /* keeps the bar crisp inside the circle */
}

/* tokens (optional override) */
.tabulator {
    --tf-bg: var(--color-base-100);
    --tf-bd: color-mix(in srgb, var(--color-base-content) 18%, transparent);
    --tf-tx: var(--color-base-content);
    --tf-ph: color-mix(in srgb, var(--color-base-content) 55%, transparent);
    --tf-ring: var(--color-info);
}

.tabulator .tabulator-header-filter {
    padding: .25rem .375rem;
}

.tabulator .tabulator-header-filter :is(input, select) {
    width: 100%;
    height: 2.25rem;
    padding: .45rem .75rem .45rem 2rem;
    /* space for icon */
    color: var(--tf-tx);
    background: var(--tf-bg);
    border: 1px solid var(--tf-bd);
    border-radius: var(--radius-field, .5rem);
    outline: 0;
    transition: border-color .15s, box-shadow .15s, background .15s;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'><circle cx='11' cy='11' r='7'/><line x1='16.65' y1='16.65' x2='21' y2='21'/></svg>");
    background-repeat: no-repeat;
    background-size: 16px 16px;
    background-position: .5rem 50%;
}

.tabulator .tabulator-header-filter input::placeholder {
    color: var(--tf-ph);
}

.tabulator .tabulator-header-filter :is(input, select):hover {
    border-color: color-mix(in srgb, var(--tf-bd) 0%, var(--color-base-content) 30%);
}

.tabulator .tabulator-header-filter :is(input, select):focus-visible {
    border-color: var(--tf-ring);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--tf-ring) 35%, transparent);
}

.tabulator .tabulator-footer {
    background: color-mix(in srgb, var(--color-base-100) 80%, var(--color-base-200) 20%);
    color: var(--color-base-content);
    border-top: 1px solid color-mix(in srgb, var(--color-base-content) 12%, transparent);
    padding: 0;
}

.tabulator .tabulator-footer :is(.tabulator-page-size, .tabulator-page-counter) {
    padding-inline: 1rem;
    padding-block: .6rem;
}

.tabulator .tabulator-footer .tabulator-page-size select,
.tabulator .tabulator-footer .tabulator-page {
    min-height: 2rem;
    min-width: 2rem;
    padding: 0 .9rem;
    border-radius: .6rem;
    border: 1px solid color-mix(in srgb, var(--color-base-content) 20%, transparent);
    background: color-mix(in srgb, var(--color-base-100) 85%, var(--color-base-200) 15%);
    color: var(--color-base-content);
    font-size: .85rem;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.tabulator .tabulator-footer .tabulator-page-size select:focus-visible,
.tabulator .tabulator-footer .tabulator-page:focus-visible,
.tabulator .tabulator-footer .tabulator-page:hover {
    border-color: color-mix(in srgb, var(--color-primary) 40%, transparent);
    background: color-mix(in srgb, var(--color-primary) 25%, var(--color-base-100) 75%);
    color: var(--color-base-content);
}

.tabulator .tabulator-footer .tabulator-page.active {
    border-color: color-mix(in srgb, var(--color-accent) 55%, transparent);
    background: color-mix(in srgb, var(--color-accent) 55%, var(--color-base-100) 45%);
    color: var(--color-base-content);
}

.tabulator .tabulator-footer .tabulator-pages {
    padding-inline: .8rem;
    padding-bottom: .6rem;
}

.tabulator .tabulator-header .tabulator-toolbar {
    display: flex !important;
    min-height: 600px;
}

.table-toolbar {
    background: color-mix(in srgb, var(--color-base-200) 70%, var(--color-base-100) 30%);
    backdrop-filter: blur(6px);
}

.table-toolbar .btn {
    min-height: 2.25rem;
    border-radius: 9999px;
    border: 1px solid color-mix(in srgb, var(--color-base-content) 18%, transparent);
    background: color-mix(in srgb, var(--color-base-100) 85%, var(--color-base-200) 15%);
    color: var(--color-base-content);
    text-transform: none;
    letter-spacing: .02em;
    padding-inline: 1rem;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.table-toolbar .btn:hover,
.table-toolbar .btn:focus-visible {
    border-color: color-mix(in srgb, var(--color-primary) 45%, transparent);
    background: color-mix(in srgb, var(--color-primary) 30%, var(--color-base-100) 70%);
    color: var(--color-base-content);
}

.table-toolbar .btn:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--color-primary) 70%, transparent);
    outline-offset: 2px;
}

.table-toolbar .btn-circle {
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tabulator.hide-filters .tabulator-header-filter {
    display: none !important;
}

/* Tabulator alerts (loading/error) using DaisyUI tokens */
.tabulator .tabulator-alert {
    background: transparent;
    border: none;
}

.tabulator .tabulator-alert-msg {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px !important;
    border-radius: 12px !important;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: #f3f4f6 !important;
    /* force light text */
    text-shadow: 0 0 6px rgba(0, 0, 0, 0.4);
    background: rgba(24, 27, 43, 0.9) !important;
    border: 1px solid color-mix(in srgb, var(--color-base-content) 45%, transparent) !important;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45) !important;
    backdrop-filter: blur(3px);
}

.tabulator .tabulator-alert-state-msg::before {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid var(--color-info);
    border-top-color: transparent;
    border-radius: 9999px;
    animation: tabulator-spin 0.8s linear infinite;
}

.tabulator .tabulator-alert-state-error {
    background: color-mix(in srgb, var(--color-error) 75%, var(--color-base-200) 25%) !important;
    color: var(--color-base-100) !important;
    border-color: color-mix(in srgb, var(--color-error) 60%, transparent) !important;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--color-error) 35%, transparent);
}

@keyframes tabulator-spin {
    to {
        transform: rotate(360deg);
    }
}