/* ===========================================================================
   Avira - data grid chrome (toolbar, sorting, totals, client pager).
   Loaded wherever a <table class="av-grid"> can appear.
   =========================================================================== */

/* ---- toolbar ---- */
.av-gridbar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 14px;
}

.av-gridbar__search {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 240px;
    max-width: 380px;
}
.av-gridbar__search svg {
    position: absolute;
    inset-inline-start: 13px;
    color: var(--av-muted);
    pointer-events: none;
}
.av-gridbar__search input {
    width: 100%;
    font: inherit;
    font-size: .92rem;
    color: var(--av-ink);
    background: #fff;
    border: 1px solid var(--av-line);
    border-radius: 999px;
    padding: 10px 16px 10px 38px;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.av-gridbar__search input:focus {
    outline: 0;
    border-color: var(--av-navy);
    box-shadow: 0 0 0 3px rgba(27, 62, 140, .12);
}

.av-gridbar__right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.av-gridbar__count { font-size: .84rem; color: var(--av-muted); white-space: nowrap; }

.av-gridbtn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font: inherit;
    font-size: .86rem;
    font-weight: 600;
    color: var(--av-ink);
    background: #fff;
    border: 1px solid var(--av-line);
    border-radius: 999px;
    padding: 9px 16px;
    cursor: pointer;
    transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.av-gridbtn:hover { border-color: var(--av-navy); color: var(--av-navy); }
.av-gridbtn svg { flex: none; }

/* ---- dropdown menus ---- */
.av-gridmenu { position: relative; }
.av-gridmenu__pop {
    position: absolute;
    inset-inline-end: 0;
    top: calc(100% + 8px);
    z-index: 40;
    min-width: 210px;
    max-height: 320px;
    overflow-y: auto;
    padding: 8px;
    background: #fff;
    border: 1px solid var(--av-line);
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(16, 30, 60, .16);
    display: none;
}
.av-gridmenu__pop--sm { min-width: 170px; }
.av-gridmenu__pop.is-open { display: block; }

.av-gridmenu__pop label,
.av-gridmenu__pop button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    font: inherit;
    font-size: .9rem;
    color: var(--av-ink);
    text-align: start;
    background: transparent;
    border: 0;
    border-radius: 9px;
    padding: 9px 11px;
    cursor: pointer;
}
.av-gridmenu__pop label:hover,
.av-gridmenu__pop button:hover { background: var(--av-canvas); }
.av-gridmenu__pop input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--av-navy); }

/* ---- numbers are always right aligned, and never wrap ---- */
.av-table th.av-num,
.av-table td.av-num {
    text-align: end;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* ---- sortable headers ---- */
.av-table th.is-sortable {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-inline-end: 26px;
}
.av-table th.is-sortable::after {
    content: "";
    position: absolute;
    inset-inline-end: 10px;
    top: 50%;
    width: 8px;
    height: 8px;
    margin-top: -4px;
    opacity: .35;
    background: currentColor;
    clip-path: polygon(50% 0, 100% 42%, 0 42%, 50% 0, 50% 100%, 100% 58%, 0 58%);
    transition: opacity .15s ease;
}
.av-table th.is-sortable:hover::after { opacity: .7; }
.av-table th.is-asc::after  { opacity: 1; clip-path: polygon(50% 12%, 100% 72%, 0 72%); }
.av-table th.is-desc::after { opacity: 1; clip-path: polygon(0 28%, 100% 28%, 50% 88%); }
.av-table th.is-sortable:focus-visible { outline: 2px solid var(--av-navy); outline-offset: -2px; }

/* ---- subtotal row ---- */
.av-dg__foot td {
    padding: 13px 18px;
    background: var(--av-canvas);
    border-top: 2px solid var(--av-line);
    font-weight: 800;
    color: var(--av-ink);
    font-size: .93rem;
}
.av-dg__foot td.av-num { font-variant-numeric: tabular-nums; }

/* ---- empty state after a search ---- */
.av-gridempty {
    padding: 26px 18px;
    text-align: center;
    color: var(--av-muted);
    font-size: .93rem;
    border-top: 1px solid var(--av-line);
}

/* ---- client-side pager buttons reuse the server pager's look ---- */
.av-pager--client { margin-top: 14px; }
.av-pager__links button {
    font: inherit;
    font-size: .88rem;
    color: var(--av-ink);
    background: #fff;
    border: 1px solid var(--av-line);
    border-radius: 9px;
    min-width: 34px;
    padding: 7px 10px;
    cursor: pointer;
}
.av-pager__links button:hover:not(.is-disabled):not(.is-current) { border-color: var(--av-navy); color: var(--av-navy); }
.av-pager__links button.is-current { background: var(--av-navy); border-color: var(--av-navy); color: #fff; font-weight: 700; }
.av-pager__links button.is-disabled { opacity: .45; cursor: default; }

@media (max-width: 620px) {
    .av-gridbar { gap: 10px; }
    .av-gridbar__search { max-width: none; flex: 1 1 100%; }
    .av-gridbar__right { width: 100%; justify-content: space-between; }
}

@media print {
    .av-gridbar, .av-pager { display: none !important; }
}

/* ===========================================================================
   Phones: a seven-column table cannot be read on a 360px screen, so below
   680px each row becomes its own card, with the column heading printed
   beside every value. grid.js copies the headings onto the cells, so this
   works for every grid without any per-page markup.
   =========================================================================== */
@media (max-width: 680px) {
    .av-tablewrap:has(.av-dg) { border: 0; background: transparent; overflow-x: visible; }

    table.av-dg { min-width: 0; display: block; }
    table.av-dg thead { display: none; }
    table.av-dg tbody { display: block; }

    table.av-dg tbody tr {
        display: block;
        background: #fff;
        border: 1px solid var(--av-line);
        border-radius: 14px;
        padding: 6px 14px;
        margin-bottom: 12px;
        box-shadow: 0 2px 10px rgba(16, 30, 60, .05);
    }
    table.av-dg tbody tr:hover { background: #fff; }

    table.av-dg tbody td {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 14px;
        padding: 9px 0;
        border-bottom: 1px dashed var(--av-line);
        text-align: start !important;
        white-space: normal;
    }
    table.av-dg tbody tr td:last-child { border-bottom: 0; }

    table.av-dg tbody td::before {
        content: attr(data-label);
        flex: none;
        font-size: .72rem;
        font-weight: 800;
        letter-spacing: .07em;
        text-transform: uppercase;
        color: var(--av-muted);
    }
    /* A cell with no heading (an action button) keeps the full width. */
    table.av-dg tbody td:not([data-label])::before { content: none; }
    table.av-dg tbody td.av-num { justify-content: space-between; }

    /* The subtotal row stays a row - it is the one place a wide layout helps. */
    table.av-dg tfoot { display: block; }
    .av-dg__foot tr { display: flex; flex-wrap: wrap; gap: 4px 16px; border-radius: 14px; }
    .av-dg__foot td { border: 0; padding: 8px 12px; }
    .av-dg__foot td:empty { display: none; }
    .av-dg__foot td[data-label]::before {
        content: attr(data-label) " ";
        font-size: .7rem; font-weight: 700; color: var(--av-muted);
        margin-inline-end: 6px; text-transform: uppercase;
    }
}