/* === Modern DataTables (Bootstrap 5) — brug <table class="... modern-dt"> === */
:root {
    /* Tabel */
    --tbl-bg: #fff;
    --tbl-border: rgba(0,0,0,.06);
    --tbl-shadow: 0 6px 18px rgba(0,0,0,.06);
    --tbl-head-bg: linear-gradient(180deg, rgba(245,247,250,.9), rgba(241,244,248,.9));
    --tbl-head-text: #0f172a;
    --tbl-row: #fff;
    --tbl-row-alt: #fafbfc;
    --tbl-row-hover: #f2f6ff;
    --tbl-row-selected: #e6f0ff;
    --radius: 6px;
    /* UI rundt om tabellen (dt-bootstrap5) */
    --ui-border: rgba(0,0,0,.08);
    --ui-bg: #fff;
    --ui-muted: #64748b;
    --ui-primary: #2563eb;
    --ui-hover: #f2f6ff;
}

@media (prefers-color-scheme: dark) {
    :root {
        --tbl-bg: #0b0f16;
        --tbl-border: rgba(255,255,255,.08);
        --tbl-shadow: 0 6px 18px rgba(0,0,0,.4);
        --tbl-head-bg: linear-gradient(180deg, rgba(23,28,40,.9), rgba(18,23,33,.9));
        --tbl-head-text: #e6e8ee;
        --tbl-row: #0b0f16;
        --tbl-row-alt: #0f141e;
        --tbl-row-hover: #101a2b;
        --tbl-row-selected: #0d2347;
        --ui-border: rgba(255,255,255,.08);
        --ui-bg: #0b0f16;
        --ui-muted: #cbd5e1;
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }
}

/* — Table card — */
table.modern-dt.dataTable {
    border-collapse: separate;
    border-spacing: 0;
    background: var(--tbl-bg);
    border: 1px solid var(--tbl-border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--tbl-shadow);
}
/* Sticky header */
table.modern-dt thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--tbl-head-bg);
    color: var(--tbl-head-text);
    text-transform: uppercase;
    letter-spacing: .02em;
    font-weight: 700 !important;
    font-size: .8rem;
    border-bottom: 1px solid var(--tbl-border) !important;
    backdrop-filter: saturate(120%) blur(6px);
}
/* Cells */
table.modern-dt :where(th,td) {
    vertical-align: middle;
    padding: .9rem 1rem !important;
    border-top: none !important;
    border-bottom: 1px solid var(--tbl-border) !important;
    white-space: nowrap;
}
/* Zebra + hover */
table.modern-dt tbody tr:nth-child(odd) td {
    background: var(--tbl-row);
}

table.modern-dt tbody tr:nth-child(even) td {
    background: var(--tbl-row-alt);
}

table.modern-dt tbody tr:hover td {
    background: var(--tbl-row-hover) !important;
    transition: background-color .18s ease;
}
/* Selected rows (Select ext.) */
table.modern-dt.dataTable tbody > tr.selected > * {
    box-shadow: inset 0 0 0 9999px var(--tbl-row-selected);
}

/* Links i celler → diskrete knapper */
table.modern-dt a {
    display: inline-block;
    text-decoration: none;
    padding: .45rem .7rem;
    border: 1px solid var(--tbl-border);
    border-radius: var(--radius);
    line-height: 1;
}

    table.modern-dt a:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-primary) 25%, transparent);
    }

    table.modern-dt a:hover {
        filter: brightness(1.05);
    }

table.modern-dt .invitem-last-movement {
    display: inline-block;
    min-width: 8.8rem;
    text-align: center;
    font-weight: 700;
    font-size: .82rem;
    letter-spacing: .01em;
    padding: .3rem .55rem;
    border-radius: 999px;
    border: 1px solid transparent;
}

table.modern-dt .invitem-last-movement.is-active {
    background: #dcfce7;
    color: #166534;
    border-color: #86efac;
}

table.modern-dt .invitem-last-movement.is-empty {
    background: #e2e8f0;
    color: #475569;
    border-color: #cbd5e1;
}

/* FixedHeader / ScrollHead */
.fixedHeader-floating:has(table.modern-dt), .dataTables_scrollHead:has(table.modern-dt) {
    border-radius: var(--radius) !important;
    overflow: hidden;
    box-shadow: var(--tbl-shadow) !important;
}

/* — dt-bootstrap5 UI (kun når wrapper indeholder .modern-dt) — */
.dt-container.dt-bootstrap5:has(table.modern-dt) {
    margin-top: .25rem;
}

    /* Topbar */
    .dt-container.dt-bootstrap5:has(table.modern-dt) .dt-buttons,
    .dt-container.dt-bootstrap5:has(table.modern-dt) .dt-search {
        margin-bottom: .75rem;
    }

    .dt-container.dt-bootstrap5:has(table.modern-dt) .dt-buttons {
        display: flex;
        gap: .5rem;
        flex-wrap: wrap;
    }

    .dt-container.dt-bootstrap5:has(table.modern-dt) .dt-search {
        margin-left: auto;
        display: flex;
        align-items: center;
        gap: .5rem;
    }

        /* Search */
        .dt-container.dt-bootstrap5:has(table.modern-dt) .dt-search label {
            font-weight: 600;
            color: var(--ui-muted);
            margin: 0;
        }

        .dt-container.dt-bootstrap5:has(table.modern-dt) .dt-search input.form-control,
        .dt-container.dt-bootstrap5:has(table.modern-dt) .dt-search input.form-control-sm {
            height: 38px;
            min-width: 240px;
            border-radius: var(--radius);
            border: 1px solid var(--ui-border);
            background: var(--ui-bg);
            box-shadow: inset 0 1px 2px rgba(0,0,0,.03);
        }

        .dt-container.dt-bootstrap5:has(table.modern-dt) .dt-search input:focus {
            border-color: color-mix(in srgb, var(--ui-primary) 45%, transparent);
            box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-primary) 20%, transparent);
        }

    /* Buttons (DataTables Buttons + Bootstrap .btn) */
    .dt-container.dt-bootstrap5:has(table.modern-dt) .dt-buttons :where(.btn,.dt-button) {
        border-radius: var(--radius);
        border: 1px solid var(--ui-border);
        background: #f1f5f9;
        color: #0f172a;
        font-weight: 600;
        padding: .4rem .7rem;
        line-height: 1.2;
        box-shadow: none;
    }

        .dt-container.dt-bootstrap5:has(table.modern-dt) .dt-buttons :where(.btn,.dt-button):hover {
            background: #e9eef5;
        }

        .dt-container.dt-bootstrap5:has(table.modern-dt) .dt-buttons :where(.btn,.dt-button):focus-visible {
            outline: none;
            box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-primary) 20%, transparent);
        }

    /* Info */
    .dt-container.dt-bootstrap5:has(table.modern-dt) .dt-info {
        color: var(--ui-muted);
        padding-top: .5rem;
    }

    /* Pagination */
    .dt-container.dt-bootstrap5:has(table.modern-dt) .pagination .page-link {
        border-radius: var(--radius);
        border: 1px solid var(--ui-border);
        background: #f8fafc;
        padding: .35rem .6rem;
    }

        .dt-container.dt-bootstrap5:has(table.modern-dt) .pagination .page-link:hover {
            background: var(--ui-hover);
        }

    .dt-container.dt-bootstrap5:has(table.modern-dt) .pagination .page-item.active .page-link {
        background: var(--ui-primary);
        border-color: var(--ui-primary);
        color: #fff;
    }

    .dt-container.dt-bootstrap5:has(table.modern-dt) .pagination .page-item.disabled .page-link {
        opacity: .5;
    }

/* Mobil */
@media (max-width:768px) {
    table.modern-dt :where(th,td) {
        padding: .7rem .75rem !important;
    }

    .dt-container.dt-bootstrap5:has(table.modern-dt) .dt-buttons {
        width: 100%;
    }

    .dt-container.dt-bootstrap5:has(table.modern-dt) .dt-search {
        width: 100%;
        margin-left: 0;
    }

        .dt-container.dt-bootstrap5:has(table.modern-dt) .dt-search input {
            min-width: 0;
            width: 100%;
        }
}

/* — Valgfrie varianter — */
/* Flad variant (ingen skygge) → tilføj .is-flat på tabellen */
table.modern-dt.is-flat {
    box-shadow: none;
}
/* Kompakt variant → tilføj .is-compact på tabellen */
table.modern-dt.is-compact :where(th,td) {
    padding: .55rem .65rem !important;
    font-size: .92rem;
}

/* PAGINATION (Bootstrap .pagination) — mørke knapper */
.dt-container.dt-bootstrap5:has(table.modern-dt) .pagination .page-link {
    border-radius: var(--ui-radius);
    border: 1px solid #1f2937; /* dark gray border */
    background: #111827; /* dark background */
    color: #f9fafb; /* light text */
    padding: .35rem .6rem;
    transition: background .2s ease, color .2s ease;
}

    .dt-container.dt-bootstrap5:has(table.modern-dt) .pagination .page-link:hover {
        background: #1f2937; /* lidt lysere dark gray */
        color: #fff;
    }

.dt-container.dt-bootstrap5:has(table.modern-dt) .pagination .page-item.active .page-link {
    background: var(--ui-secondary);
    border-color: var(--ui-secondary);
    color: rgba(152,132,92);
}

.dt-container.dt-bootstrap5:has(table.modern-dt) .pagination .page-item.disabled .page-link {
    background: #374151;
    color: #9ca3af;
    opacity: .6;
}

/* Spinner: vi styrer den selv (overstyrer også site.css' opacity:0 på .htmx-indicator) */
#spinner {
    display: none;
    opacity: 0;
}

    #spinner.force-show {
        display: flex !important;
        opacity: 1 !important;
    }

/* === UniPim: DT + HTMX loading UX (genbrugelig) === */
.dt-host {
    position: relative;
}

    /* Fade/slide transition (både table før init og wrapper efter init) */
    .dt-host table,
    .dt-host .dataTables_wrapper {
        opacity: 1;
        transform: translateY(0);
        transition: opacity 160ms ease, transform 160ms ease;
    }

    /* Mens vi loader: skjul tabel/wrapper men behold spinner */
    .dt-host.dt-loading table,
    .dt-host.dt-loading .dataTables_wrapper {
        opacity: 0;
        transform: translateY(4px);
        pointer-events: none;
    }

/* Spinner: overstyr site.css (.htmx-indicator er display:none som default) */
.dt-spinner {
    display: none;
    opacity: 0;
}

    .dt-spinner.force-show {
        display: flex !important;
        opacity: 1 !important;
    }