/* =========================================================
   TableKit (brand-aligned)
   - Compact, accessible tables + light helpers
   - No JS required; plays great with TableKit plugins
   ========================================================= */

/* ========== Base Table ========== */
/* Core table container visuals */
.table-dk {
    width: 100%;
    margin-bottom: 0;
    table-layout: auto;
    border-spacing: 0;
    background: var(--surface-1);
    border: 1px solid rgba(0,0,0,.08);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-1);
    overflow: hidden; /* rounds the thead corners */
}

    /* Cell padding + vertical rhythm */
    .table-dk th,
    .table-dk td {
        padding: .6rem .75rem;
        vertical-align: middle;
    }

    /* Head look */
    .table-dk thead th {
        background: var(--surface-2);
        color: var(--text-1);
        font-weight: 600;
        border-bottom: 2px solid var(--brand-yellow);
        box-shadow: inset 0 -1px 0 rgba(0,0,0,.04);
    }

    /* Zebra & hover */
    .table-dk tbody tr:nth-child(even) {
        background: rgba(0,0,0,.02);
    }

    .table-dk tbody tr:hover {
        background: rgba(255,203,8,.10);
    }

    /* Caption (top) */
    .table-dk caption {
        caption-side: top;
        padding: .75rem;
        font-weight: 700;
        font-size: 1.1rem;
        color: var(--text-1);
    }

/* ========== Density Modifiers ========== */
/* Slightly tighter rows when desired */
.table-dk--compact th,
.table-dk--compact td {
    padding: .4rem .6rem;
}

/* ========== Alignment Helpers ========== */
/* Right-align numeric columns */
.table-dk td.tk-num,
.table-dk th.tk-num {
    text-align: right;
}

/* ========== Sort Indicators (TableKit sort plugin) ========== */
/* Header label + indicator inline layout */
.table-dk thead .th-label {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    user-select: none;
    font-weight: 600;
}

/* Placeholder where the arrow sits to prevent jump */
.table-dk thead .sort-ind {
    width: 1em;
    text-align: center;
    opacity: .6;
}

/* State arrows (neutral / asc / desc) */
.table-dk thead th.sorted-asc .sort-ind::after {
    content: "▲";
    opacity: .9;
}

.table-dk thead th.sorted-desc .sort-ind::after {
    content: "▼";
    opacity: .9;
}

.table-dk thead th:not(.sorted-asc):not(.sorted-desc) .sort-ind::after {
    content: "↕";
}

/* ========== Header Dropdowns (filters) ========== */
/* Compact selects for filter-in-header */
.table-dk thead select.form-select,
table thead select.filter-select {
    margin-top: .35rem;
    height: calc(1.8rem + 2px);
    padding: .15rem 1.75rem .15rem .5rem; /* caret space */
    background: var(--surface-1);
    border: 1px solid rgba(0,0,0,.12);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-repeat: no-repeat;
    background-position: right .65rem center;
    background-size: 12px 8px;
    /* Bootstrap caret if available, else inline SVG chevron */
    background-image: var(--bs-form-select-bg-img, url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'>\
<path fill='currentColor' d='M1.8 1.5L8 8.2l6.2-6.7 1.2 1.1L8 10 0.6 2.6z'/></svg>"));
}

    .table-dk thead select.form-select:focus {
        border-color: var(--brand-yellow);
        box-shadow: 0 0 0 .2rem rgba(255,203,8,.25);
    }

    .table-dk thead select.form-select::-ms-expand {
        display: none;
    }
/* IE legacy */

/* ========== Focus Rings (accessibility) ========== */
.table-dk :is(a,button,input,select,textarea):focus-visible {
    outline: 2px solid var(--brand-yellow);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* ========== Hover Opt-out ========== */
.table-dk.no-hover tbody tr:hover > * {
    background-color: transparent !important;
}

/* ========== Width Helpers (optional) ========== */
.w-equip {
    width: 8rem;
}

.w-year {
    width: 6rem;
}

.w-makemodel {
    width: 15%;
}

.w-mfg {
    width: 14%;
}

.w-serial {
    width: 12%;
}

.w-category {
    width: 12%;
}

.w-fielduse {
    width: 8rem;
}

.w-meter {
    width: 9rem;
}

.w-nextsvc {
    width: 10rem;
}

.w-nextannual {
    width: 12rem;
}

/* ========== Responsive Stack (phones) ========== */
@media (max-width: 576px) {
    .table-stack-xs thead {
        display: none;
    }

    .table-stack-xs tbody tr {
        display: grid;
        grid-template-columns: 1fr;
        gap: .25rem;
        padding: .5rem .25rem;
        border-bottom: 1px solid rgba(0,0,0,.08);
    }

    .table-stack-xs tbody td {
        display: flex;
        justify-content: space-between;
        gap: .75rem;
        padding: .15rem 0;
    }

        .table-stack-xs tbody td::before {
            content: attr(data-th);
            color: var(--brand-gray);
            font-weight: 600;
            margin-right: .75rem;
        }

    .table-stack-xs td[data-th="Actions"] {
        justify-content: flex-end;
    }
}

/* ========== Pager Shell (shared with TableKit pager plugin) ========== */
.pager {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    background: var(--surface-2);
    border: 1px solid rgba(0,0,0,.06);
    border-radius: var(--radius-md);
    padding: .5rem .75rem;
    box-shadow: var(--shadow-1);
}

    .pager .btn-darkgray {
        background: var(--brand-gray,#5a6268);
        color: var(--text-invert,#fff);
    }

    .pager .muted {
        opacity: .7;
    }

    .pager select.form-select {
        height: calc(1.8rem + 2px);
        padding: .15rem 1.75rem .15rem .5rem;
        background: var(--surface-1);
        border: 1px solid rgba(0,0,0,.12);
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        background-repeat: no-repeat;
        background-position: right .65rem center;
        background-size: 12px 8px;
        background-image: var(--bs-form-select-bg-img, url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'>\
<path fill='currentColor' d='M1.8 1.5L8 8.2l6.2-6.7 1.2 1.1L8 10 0.6 2.6z'/></svg>"));
    }

    .pager button {
        background: var(--surface-1);
        border: 1px solid rgba(0,0,0,.12);
        padding: .25rem .6rem;
        border-radius: var(--radius-sm);
        box-shadow: var(--shadow-1);
    }

        .pager button:hover {
            background: rgba(255,203,8,.10);
        }

        .pager button:disabled {
            opacity: .45;
            cursor: not-allowed;
        }

.pager-top {
    margin-bottom: .5rem;
}

.pager-bottom {
    margin-top: .5rem;
}

/* ========== Column Separators (optional) ========== */
/* Only before 2nd column */
.table-sep-col-2 :is(thead,tbody,tfoot) tr > *:nth-child(2) {
    border-left: 2px solid var(--bs-border-color, rgba(0,0,0,.125));
    padding-left: calc(var(--bs-table-cell-padding-x, .75rem) + .25rem);
}

@media (max-width: 576px) {
    .table-sep-col-2 :is(thead,tbody,tfoot) tr > *:nth-child(2) {
        border-left: 0;
    }
}
/* Shadow separator variant */
.table-sep-col-2.shadow-sep :is(thead,tbody,tfoot) tr > *:nth-child(2) {
    border-left: 0;
    box-shadow: inset 1px 0 0 var(--bs-border-color, rgba(0,0,0,.125));
}
/* Put a divider before every column except first */
.table-sep-all :is(thead,tbody,tfoot) tr > *:not(:first-child) {
    border-left: 1px solid var(--bs-border-color, rgba(0,0,0,.125));
    padding-left: calc(var(--bs-table-cell-padding-x, .75rem) + .25rem);
}

/* ========== Cell-level GP Colors ========== */
.gp-red, .gp-orange, .gp-yellow {
    font-weight: 600;
}

.gp-red {
    background-color: var(--brand-red,#dc3545) !important;
    color: #fff !important;
}

.gp-orange {
    background-color: #fd7e14 !important;
    color: #fff !important;
}

.gp-yellow {
    background-color: var(--brand-yellow,#ffc107) !important;
    color: #000 !important;
}

/* ========== Footer Rule ========== */
.tfoot-rule tr:first-child > * {
    border-top: 2px solid var(--bs-border-color, rgba(0,0,0,.15));
}

/* ========== Row-as-link affordance ========== */
tr.js-rowlink {
    cursor: pointer;
}

.row-disabled {
    opacity: .5;
    pointer-events: none;
    cursor: not-allowed;
}

/* ========== Server-side sort header styling ========== */
/* Use on server-sorted tables to brand links + manage arrows */
.table--srvsort thead .th-stack {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.table--srvsort thead a.th-label,
.table--srvsort thead a.th-label:visited {
    color: var(--text-1);
    text-decoration: none;
    font-weight: 600;
}

    .table--srvsort thead a.th-label:hover {
        text-decoration: none;
    }

.table--srvsort thead .sort-ind {
    min-width: 1em;
    text-align: center;
    opacity: .85;
}
/* Hide TableKit’s neutral chevrons only on the active column */
.table--srvsort thead th.is-sorted .sort-ind::before,
.table--srvsort thead th.is-sorted .sort-ind::after {
    content: none !important;
}

/* ========== Search input clear (WebKit) ========== */
input[type="search"].with-clear::-webkit-search-cancel-button {
    -webkit-appearance: searchfield-cancel-button;
}

/* ========== Fixed layout & special tables ========== */
.table-fixed {
    table-layout: fixed;
}

/* Specific column widths for “notes” tables */
.table-notes col.col-id {
    width: 10%;
}

.table-notes col.col-note {
    width: 70%;
}

.table-notes col.col-user {
    width: 10%;
}

.table-notes col.col-date {
    width: 10%;
}

/* ========== Hover opt-out per table ========== */
.table-nohover tbody tr:hover > * {
    background-color: transparent !important;
}

/* ========== Long text helpers ========== */
/* One-line ellipsis, expand on hover (for repair/history) */
.dk-truncate {
    max-width: 20em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .dk-truncate:hover {
        white-space: normal;
        overflow: visible;
    }
/* General ellipsis utility */
.dk-ellipsis {
    max-width: 32ch;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ========== Generic caption for non-.table-dk tables (optional) ========== */
.table caption {
    caption-side: top;
    text-align: left;
    font-weight: 600;
    padding: .5rem .75rem 0;
}

/* ========== Misc helpers ========== */
.nowrap {
    white-space: nowrap;
}