/* =========================================================
   DataTables — Fastnet Design System v1.0
   Uses CSS tokens defined in layout-style.blade.php.
   Dark mode is handled automatically via [data-theme="dark"]
   token overrides — no duplicate dark-mode blocks needed.
   ========================================================= */

/* ── Table base ── */
table.dataTable {
    margin-bottom: 20px !important;
    border-collapse: separate !important;
    border-spacing: 0;
    width: 100% !important;
    background-color: var(--bg-card);
    border-radius: 10px;
    overflow: hidden;
    font-family: var(--font-ui) !important;
    color: var(--tx-body) !important;
}

/* ── Head cells ── */
table.dataTable thead th,
table.dataTable thead td {
    background-color: var(--bg-page) !important;
    color: var(--tx-title-blue) !important;
    font-family: var(--font-ui) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    border-bottom: 1px solid var(--border) !important;
    padding: 11px 16px !important;
    vertical-align: middle !important;
    white-space: nowrap;
    position: relative !important;
    overflow: visible !important;
    padding-right: 1.7rem !important;
}

/* ── Body cells ── */
table.dataTable tbody td {
    font-family: var(--font-ui) !important;
    font-size: 13px !important;
    color: var(--tx-body) !important;
    padding: 12px 16px !important;
    border-bottom: 1px solid var(--divider) !important;
    vertical-align: middle !important;
}

/* Override Bootstrap table striped */
.table.table-striped tbody tr:nth-child(even) td,
.table.table-striped tbody tr.even td,
.table tbody tr:nth-child(even) td,
.dataTable tbody tr:nth-child(even) td {
    background-color: var(--row-stripe) !important;
}

.table.table-striped tbody tr:nth-child(odd) td,
.table.table-striped tbody tr.odd td,
.table tbody tr:nth-child(odd) td,
.dataTable tbody tr:nth-child(odd) td {
    background-color: var(--row-stripe-odd) !important;
}

/* Also handle hover with your theme */
.table tbody tr:hover td,
.dataTable tbody tr:hover td {
    background-color: var(--row-hover) !important;
}

/* ── Row hover ── */
table.dataTable tbody tr:hover td {
    background-color: var(--row-hover) !important;
    cursor: pointer;
}

/* ── Remove last-row bottom border ── */
table.dataTable tbody tr:last-child td {
    border-bottom: none !important;
}

/* ── Selected row ── */
table.dataTable tbody tr.selected > * {
    background-color: var(--accent-lt) !important;
}

/* ── Compact density ── */
.table-compact table.dataTable td,
.table-compact table.dataTable thead th {
    padding: 8px 12px !important;
    font-size: 12px !important;
}

/* =========================================================
   SORTING ICONS — single conflict-free set
   ========================================================= */

/* 0) Wipe everything from DT / Bootstrap */
table.dataTable thead th::before,
table.dataTable thead th::after,
table.dataTable thead td::before,
table.dataTable thead td::after {
    content: none !important;
    background-image: none !important;
}

/* 1) Nuke DT v1 & v2 background images */
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc,
table.dataTable thead .sorting_asc_disabled,
table.dataTable thead .sorting_desc_disabled,
table.dataTable thead .dt-orderable,
table.dataTable thead .dt-ordering-asc,
table.dataTable thead .dt-ordering-desc {
    background-image: none !important;
}

/* 2) Neutral (unsorted) caret */
table.dataTable thead th.sorting::after,
table.dataTable thead td.sorting::after,
table.dataTable thead th.dt-orderable::after,
table.dataTable thead td.dt-orderable::after {
    content: "";
    position: absolute;
    right: .55rem;
    top: 50%;
    width: .55rem;
    height: .55rem;
    transform: translateY(-50%) rotate(45deg);
    border-right: 2px solid var(--border-strong);
    border-bottom: 2px solid var(--border-strong);
    opacity: .6;
    pointer-events: none;
}

/* 3) Active ASC (point up) */
table.dataTable thead th.sorting_asc::after,
table.dataTable thead td.sorting_asc::after,
table.dataTable thead th.dt-ordering-asc::after,
table.dataTable thead td.dt-ordering-asc::after {
    content: "";
    position: absolute;
    right: .55rem;
    top: 50%;
    width: .55rem;
    height: .55rem;
    transform: translateY(-35%) rotate(225deg);
    border-right: 2px solid var(--accent);
    border-bottom: 2px solid var(--accent);
    opacity: .95;
    pointer-events: none;
}

/* 4) Active DESC (point down) */
table.dataTable thead th.sorting_desc::after,
table.dataTable thead td.sorting_desc::after,
table.dataTable thead th.dt-ordering-desc::after,
table.dataTable thead td.dt-ordering-desc::after {
    content: "";
    position: absolute;
    right: .55rem;
    top: 50%;
    width: .55rem;
    height: .55rem;
    transform: translateY(-65%) rotate(45deg);
    border-right: 2px solid var(--accent);
    border-bottom: 2px solid var(--accent);
    opacity: .95;
    pointer-events: none;
}

/* 5) RTL support */
[dir="rtl"] table.dataTable thead th,
[dir="rtl"] table.dataTable thead td {
    padding-right: 16px !important;
    padding-left: 1.7rem !important;
}
[dir="rtl"] table.dataTable thead th.sorting::after,
[dir="rtl"] table.dataTable thead td.sorting::after,
[dir="rtl"] table.dataTable thead th.dt-orderable::after,
[dir="rtl"] table.dataTable thead td.dt-orderable::after,
[dir="rtl"] table.dataTable thead th.sorting_asc::after,
[dir="rtl"] table.dataTable thead td.sorting_asc::after,
[dir="rtl"] table.dataTable thead th.dt-ordering-asc::after,
[dir="rtl"] table.dataTable thead td.dt-ordering-asc::after,
[dir="rtl"] table.dataTable thead th.sorting_desc::after,
[dir="rtl"] table.dataTable thead td.sorting_desc::after,
[dir="rtl"] table.dataTable thead th.dt-ordering-desc::after,
[dir="rtl"] table.dataTable thead td.dt-ordering-desc::after {
    right: auto;
    left: .55rem;
}

/* =========================================================
   DATATABLES CONTROLS — filter, length, info, paginate
   ========================================================= */

.dataTables_wrapper .row,
.dataTables_wrapper .top,
.dataTables_wrapper .bottom {
    align-items: center;
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    margin: .5rem 0 !important;
}

/* Search & length inputs */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    display: inline-block;
    width: auto;
    background: var(--bg-input) !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: 8px !important;
    color: var(--tx-body) !important;
    font-family: var(--font-ui) !important;
    font-size: 13px !important;
    padding: 6px 12px !important;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label
{
color: var(--tx-secondary) !important;
}

.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--accent-glow) !important;
}

.dataTables_filter {
    margin-bottom: 16px !important;
}

/* Info text */
.dataTables_wrapper .dataTables_info {
    font-family: var(--font-ui) !important;
    font-size: 12.5px !important;
    color: var(--tx-secondary) !important;
    padding-top: .5rem;
}

/* Pagination */
.dataTables_wrapper .dataTables_paginate {
    padding-top: .5rem;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    font-family: var(--font-ui) !important;
    font-size: 12.5px !important;
    color: var(--tx-secondary) !important;
    padding: .35rem .7rem;
    border-radius: 6px;
    margin: 0 3px;
    border: 1px dotted var(--border-strong) !important;
    background: transparent;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.current):not(.disabled) {
    background-color: var(--accent-lt) !important;
    color: var(--accent) !important;
    border: none !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--accent) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 6px !important;
    box-shadow: 0 2px 6px var(--accent-glow);
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    color: var(--tx-muted) !important;
    background: transparent !important;
    border-color: transparent !important;
    cursor: not-allowed;
}

/* ── Export buttons (CSV, Excel, Print…) ── */
.dt-buttons .btn,
.dataTables_wrapper .dt-buttons .btn {
    font-family: var(--font-ui) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 6px 14px;
    border-radius: 8px;
    border: 1.5px solid var(--border-strong) !important;
    background: var(--bg-card) !important;
    color: var(--tx-secondary) !important;
    box-shadow: var(--shadow-card);
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.dt-buttons .btn:hover,
.dataTables_wrapper .dt-buttons .btn:hover {
    background: var(--neutral-lt) !important;
    border-color: var(--border-strong) !important;
    color: var(--tx-body) !important;
    transform: translateY(-1px);
}

.dt-buttons .btn:active {
    transform: translateY(0);
}

/* ── Processing overlay ── */
.dataTables_wrapper .dataTables_processing {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: .75rem 1.25rem;
    border-radius: 8px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--tx-secondary);
    font-family: var(--font-ui) !important;
    font-size: 13px !important;
    box-shadow: var(--shadow-hover);
    z-index: 10;
}

/* ── Empty state ── */
table.dataTable tbody td.dataTables_empty {
    text-align: center !important;
    color: var(--tx-muted) !important;
    padding: 2.5rem !important;
    background: var(--bg-page) !important;
    font-style: italic;
    font-size: 13px !important;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter {
        width: 100%;
    }
    .dataTables_wrapper .dataTables_filter {
        text-align: left !important;
    }
}

/* =========================================================
   AMOUNT COLUMN — status-matched colours
   Mirrors the fn-status-* palette so amount and badge are
   always visually in sync.
   ========================================================= */
.dt-amount,
.fn-mono,
.mono,
[data-font="numeric"],
input[type="number"],
input[type="date"],
input[type="datetime-local"] {
    font-family: var(--font-numeric) !important;
    font-variant-numeric: tabular-nums;
}

.dt-amount {
    font-size: 14px !important;
    font-weight: 700 !important;
}

/* Paid / Accepted  → success green */
.amount-status-paid,
.amount-status-accepted {
    color: var(--success) !important;
}

/* Unpaid / Rejected  → danger red */
.amount-status-unpaid,
.amount-status-rejected {
    color: var(--danger) !important;
}

/* Partially Paid / Partially Refunded / Pending  → warning amber */
.amount-status-partially-paid,
.amount-status-partially-refunded,
.amount-status-pending {
    color: var(--warning) !important;
}

/* Refunded  → accent blue */
.amount-status-refunded {
    color: var(--accent) !important;
}

/* Draft / Cancelled / Expired  → neutral gray */
.amount-status-draft,
.amount-status-cancelled,
.amount-status-expired {
    color: var(--neutral) !important;
}

/* =========================================================
   TYPOGRAPHY — Fastnet scale
   ========================================================= */
h1 { font-family: var(--font-ui); font-size: 22px; font-weight: 700; color: var(--tx-h1); }
h2 { font-family: var(--font-ui); font-size: 20px; font-weight: 700; color: var(--tx-h2); }
h3 { font-family: var(--font-ui); font-size: 18px; font-weight: 600; color: var(--tx-h2); }
h4 { font-family: var(--font-ui); font-size: 16px; font-weight: 600; color: var(--tx-body); }
h5 { font-family: var(--font-ui); font-size: 14px; font-weight: 600; color: var(--tx-body); }
h6 { font-family: var(--font-ui); font-size: 13px; font-weight: 600; color: var(--tx-secondary); }

p     { font-family: var(--font-ui); font-size: 13.5px; font-weight: 400; line-height: 1.6; color: var(--tx-body); }
span  { font-size: 13px; font-weight: 600; }
small { font-family: var(--font-ui); font-size: 11.5px; font-weight: 400; color: var(--tx-muted); }