/* ============================================================
   KOOMI — one table, everywhere.

   Before this file every screen styled its own table: the list
   pages got the DataTables theme, IMEI shipped a bespoke <style>
   block, Delivery/Sales-People used raw `.table-hover` with a
   `.table-light` head, and each detail page invented its own
   padding. Same product, five different tables.

   Scope
   -----
   Applies to every table inside a normal page shell and inside
   modals. Two escape hatches keep the deliberately-bespoke
   screens untouched:

       .page-wrapper.koomi-bespoke   → whole screen opts out (POS)
       table.koomi-table-plain       → one table opts out

   `.koomi-table` is the same look for a table that lives outside
   a page shell. Print stylesheets are untouched — the print
   documents use their own markup, not `.table`.
   ============================================================ */

/* The --koomi-tbl-* values this file reads are declared once, centrally, in
   koomi-design-system.css (section 1b) as aliases of the canonical --k-*
   tokens. They are deliberately NOT redefined here: a second definition is
   how the app ended up with three different table greys. */

/* ── The frame ─────────────────────────────────────────────── */

.page-wrapper:not(.koomi-bespoke) .content .table-responsive,
.modal .table-responsive,
.koomi-table-wrap {
    border: 1px solid var(--koomi-tbl-border);
    border-radius: var(--koomi-tbl-radius);
    background: #fff;
    overflow-x: auto;
}

/* A table drawn straight into a card body still gets the frame. */
.page-wrapper:not(.koomi-bespoke) .content .table-responsive + .table-responsive { margin-top: 14px; }

/* ── The table ─────────────────────────────────────────────── */

.page-wrapper:not(.koomi-bespoke) .content .table:not(.koomi-table-plain),
.modal .table:not(.koomi-table-plain),
.koomi-table {
    --bs-table-bg: transparent;
    --bs-table-accent-bg: transparent;
    width: 100%;
    margin-bottom: 0;
    border-collapse: separate;
    border-spacing: 0;
    color: var(--koomi-tbl-fg);
    font-size: 13.5px;
    vertical-align: middle;
}

/* Head — one weight, one tone, on every screen. */
.page-wrapper:not(.koomi-bespoke) .content .table:not(.koomi-table-plain) > thead th,
.modal .table:not(.koomi-table-plain) > thead th,
.koomi-table > thead th {
    background: var(--koomi-tbl-head-bg) !important;
    color: var(--koomi-tbl-head-fg);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .01em;
    text-transform: none;
    padding: 13px 14px;
    border: 0;
    border-bottom: 1px solid var(--koomi-tbl-border);
    white-space: nowrap;
    vertical-align: middle;
    box-shadow: none;
}

.page-wrapper:not(.koomi-bespoke) .content .table:not(.koomi-table-plain) > thead th:first-child,
.modal .table:not(.koomi-table-plain) > thead th:first-child,
.koomi-table > thead th:first-child { border-top-left-radius: var(--koomi-tbl-radius); }

.page-wrapper:not(.koomi-bespoke) .content .table:not(.koomi-table-plain) > thead th:last-child,
.modal .table:not(.koomi-table-plain) > thead th:last-child,
.koomi-table > thead th:last-child { border-top-right-radius: var(--koomi-tbl-radius); }

/* Body */
.page-wrapper:not(.koomi-bespoke) .content .table:not(.koomi-table-plain) > tbody > tr > td,
.modal .table:not(.koomi-table-plain) > tbody > tr > td,
.koomi-table > tbody > tr > td {
    padding: 12px 14px;
    border: 0;
    border-bottom: 1px solid var(--koomi-tbl-line);
    background: transparent;
    vertical-align: middle;
    box-shadow: none;
}

.page-wrapper:not(.koomi-bespoke) .content .table:not(.koomi-table-plain) > tbody > tr:last-child > td,
.modal .table:not(.koomi-table-plain) > tbody > tr:last-child > td,
.koomi-table > tbody > tr:last-child > td { border-bottom: 0; }

.page-wrapper:not(.koomi-bespoke) .content .table:not(.koomi-table-plain) > tbody > tr:hover > td,
.modal .table:not(.koomi-table-plain) > tbody > tr:hover > td,
.koomi-table > tbody > tr:hover > td { background: var(--koomi-tbl-hover); }

/* Foot / totals row */
.page-wrapper:not(.koomi-bespoke) .content .table:not(.koomi-table-plain) > tfoot td,
.page-wrapper:not(.koomi-bespoke) .content .table:not(.koomi-table-plain) > tfoot th,
.koomi-table > tfoot td,
.koomi-table > tfoot th {
    padding: 12px 14px;
    border: 0;
    border-top: 1px solid var(--koomi-tbl-border);
    background: var(--koomi-tbl-head-bg);
    font-weight: 700;
}

/* The first cell is the record's identity — same emphasis everywhere. */
.page-wrapper:not(.koomi-bespoke) .content .table:not(.koomi-table-plain) > tbody > tr > td:first-child,
.koomi-table > tbody > tr > td:first-child { font-weight: 600; }

/* Bootstrap's `.table-light` head is redundant now — neutralise it so a page that
   still ships it looks identical to one that does not. */
.page-wrapper:not(.koomi-bespoke) .content .table > thead.table-light,
.koomi-table > thead.table-light { --bs-table-bg: transparent; }

/* Row-level tints (warnings, disabled rows) still win over the hover tint. */
.koomi-row-danger > td,
.imei-row-not-available > td { background: #fff5f6 !important; }
.koomi-row-warning > td { background: #fffbeb !important; }

/* Empty state */
.page-wrapper:not(.koomi-bespoke) .content .table .koomi-table-empty,
.koomi-table .koomi-table-empty,
.page-wrapper:not(.koomi-bespoke) .content .table td.dataTables_empty {
    text-align: center;
    color: var(--koomi-tbl-muted);
    padding: 42px 16px !important;
    font-weight: 500;
}

/* ── Compact variant: item-entry grids inside create/edit forms ─ */

.koomi-table-compact > thead th { padding: 10px 10px; font-size: 12px; }
.koomi-table-compact > tbody > tr > td { padding: 8px 10px; }
.koomi-table-compact .form-control,
.koomi-table-compact .form-select { min-height: 34px; padding-block: 4px; font-size: 13px; }

/* ── Things that live inside cells ─────────────────────────── */

/* Status pills: `badges` (theme) and `badge` (bootstrap) render the same. */
.page-wrapper:not(.koomi-bespoke) .content .table .badges,
.page-wrapper:not(.koomi-bespoke) .content .table .badge,
.koomi-table .badges,
.koomi-table .badge {
    display: inline-block;
    border-radius: 999px;
    padding: 4px 11px;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
}

/* Row actions sit on one line and never wrap mid-button. */
.page-wrapper:not(.koomi-bespoke) .content .table .koomi-row-actions,
.koomi-table .koomi-row-actions {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.page-wrapper:not(.koomi-bespoke) .content .table .koomi-row-actions .btn,
.koomi-table .koomi-row-actions .btn {
    --bs-btn-padding-y: 4px;
    --bs-btn-padding-x: 11px;
    --bs-btn-font-size: 12.5px;
    border-radius: 8px;
    font-weight: 600;
}

.page-wrapper:not(.koomi-bespoke) .content .table .koomi-row-actions form,
.koomi-table .koomi-row-actions form { display: inline-block; margin: 0; }

/* A secondary line under the main cell value (SKU, ref, phone). */
.koomi-cell-sub {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    font-weight: 500;
    color: var(--koomi-tbl-muted);
}

/* Clickable rows — the list pages set data-href on the <tr>. */
.page-wrapper:not(.koomi-bespoke) .content .table tbody tr[data-href],
.page-wrapper:not(.koomi-bespoke) .content .table tbody tr.koomi-clickable-row { cursor: pointer; }

/* ── Password mode picker (x-password-field) ───────────────── */

.koomi-password-modes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.koomi-password-mode {
    flex: 1 1 220px;
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 0;
    padding: 11px 13px;
    border: 1px solid #d7dee8;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
}

.koomi-password-mode:hover { border-color: #b9c6d8; background: var(--koomi-tbl-head-bg); }

.koomi-password-mode input { margin-top: 3px; flex: 0 0 auto; }

.koomi-password-mode strong {
    display: block;
    font-size: 13.5px;
    font-weight: 700;
    color: #1f2937;
}

.koomi-password-mode small {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    font-weight: 500;
    color: var(--koomi-tbl-muted);
}

.koomi-password-mode:has(input:checked) {
    border-color: var(--k-primary);
    background: #f2f8fd;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, .10);
}

/* ── The filter bar above a table (x-list-filters) ─────────── */

.koomi-list-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .5rem;
    padding: .75rem;
    margin-bottom: 1rem;
    background: var(--koomi-tbl-head-bg);
    border: 1px solid #e5e7eb;
    border-radius: .5rem;
}

.koomi-filter-field {
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.koomi-filter-label {
    font-size: .7rem;
    font-weight: 600;
    color: #64748b;
    margin: 0;
}

.koomi-filter-search {
    position: relative;
    flex: 1 1 14rem;
    min-width: 12rem;
    justify-content: flex-end;
}

.koomi-filter-search-icon {
    position: absolute;
    left: .6rem;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: .8rem;
    pointer-events: none;
}

.koomi-filter-search .form-control {
    padding-left: 1.9rem;
    padding-right: 2rem;   /* room for the clear × */
}

/* The clear × lives inside the field and only shows while there is text. */
.koomi-filter-search-clear {
    position: absolute;
    right: .45rem;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: #94a3b8;
    line-height: 1;
    padding: .2rem;
    border-radius: 50%;
    cursor: pointer;
}

.koomi-filter-search-clear:hover {
    color: #475569;
    background: #eef2f7;
}

.koomi-filter-actions {
    display: flex;
    gap: .35rem;
}

/* ── Summary tiles above a table (x-stat-tile) ─────────────── */

.koomi-stat-tile-value {
    font-size: 26px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.koomi-stat-tile-label {
    margin-top: 4px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--koomi-tbl-muted);
}

.koomi-stat-tile-hint { margin-top: 2px; font-size: 11.5px; color: #9aa4b2; }

/* ── DataTables chrome ─────────────────────────────────────── */

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate { font-size: 13px; color: var(--koomi-tbl-muted); }

.dataTables_wrapper .dataTables_length { margin-bottom: 12px; }

.dataTables_wrapper .dataTables_length select {
    min-height: 34px;
    border: 1px solid #d7dee8;
    border-radius: 8px;
    padding: 3px 8px;
    margin-inline: 6px;
}

.dataTables_wrapper .dataTables_paginate { padding-top: 14px; }

.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: 8px !important;
    border: 1px solid transparent !important;
    padding: 5px 11px !important;
    margin-left: 3px;
    font-weight: 600;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--k-primary) !important;
    border-color: var(--k-primary) !important;
    color: #fff !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--koomi-tbl-head-bg) !important;
    border-color: var(--koomi-tbl-border) !important;
    color: #1f2937 !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    background: transparent !important;
    color: #b6bfcc !important;
    border-color: transparent !important;
}

/* Sort arrows sit inside the padded header instead of on the cell edge. */
.dataTables_wrapper table.dataTable thead th.sorting,
.dataTables_wrapper table.dataTable thead th.sorting_asc,
.dataTables_wrapper table.dataTable thead th.sorting_desc { padding-right: 26px; position: relative; }

/* Laravel's own paginator (IMEI list and other non-DataTables screens). */
.page-wrapper:not(.koomi-bespoke) .content .pagination { margin-bottom: 0; }
.page-wrapper:not(.koomi-bespoke) .content .pagination .page-link {
    border-radius: 8px;
    margin-left: 3px;
    border-color: var(--koomi-tbl-border);
    color: #1f2937;
    font-weight: 600;
    font-size: 13px;
}
.page-wrapper:not(.koomi-bespoke) .content .pagination .page-item.active .page-link {
    background: var(--k-primary);
    border-color: var(--k-primary);
    color: #fff;
}

/* ── Money inputs (see assets/js/koomi-money.js) ───────────── */

/* No spinners anywhere — they nudge amounts by accident and make two
   otherwise-identical fields look different. */
.page-wrapper .content input[type="number"]::-webkit-outer-spin-button,
.page-wrapper .content input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.page-wrapper .content input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

.koomi-money-input {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Inside an input-group the currency symbol keeps the amount left-padded. */
.input-group .koomi-money-input { text-align: right; }

/* In a dense item-entry row the amount stays right-aligned but compact. */
.koomi-table-compact .koomi-money-input { padding-inline: 8px; }

/* ── Small screens ─────────────────────────────────────────── */

@media (max-width: 767px) {
    .page-wrapper:not(.koomi-bespoke) .content .table:not(.koomi-table-plain) > thead th,
    .koomi-table > thead th { padding: 11px 10px; }

    .page-wrapper:not(.koomi-bespoke) .content .table:not(.koomi-table-plain) > tbody > tr > td,
    .koomi-table > tbody > tr > td { padding: 10px; }
}

/* ── Table top bar: search left, Excel / PDF / Columns right ────────────
   Rendered by x-data-table's DataTables `dom`, so every list page in the app
   gets the same bar without touching the page itself. */

.koomi-dt .dataTables_wrapper .koomi-dt-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.koomi-dt-top-search { flex: 1 1 320px; min-width: 220px; max-width: 700px; }
.koomi-dt-top-tools  { flex: 0 0 auto; }

.koomi-dt .dataTables_wrapper .koomi-dt-top-search .dataTables_filter { float: none; text-align: left; margin: 0; }
.koomi-dt .dataTables_wrapper .koomi-dt-top-search .dataTables_filter label { display: block; margin: 0; width: 100%; }

.koomi-dt .dataTables_wrapper .koomi-dt-top-search input[type="search"] {
    width: 100%;
    margin: 0;
    height: 38px;
    padding: 6px 14px;
    border: 1px solid var(--koomi-tbl-border, #e3e8ef);
    border-radius: 6px;
    font-size: 13.5px;
    color: #1f2937;
    background: #fff;
}

.koomi-dt .dataTables_wrapper .koomi-dt-top-search input[type="search"]:focus {
    outline: none;
    border-color: var(--k-primary, #4a6cf7);
    box-shadow: 0 0 0 3px rgba(74, 108, 247, .12);
}

/* Export / Columns toolbar — light outline pills, matched to the filter bar's
   Apply / Clear buttons. They used to be solid grey slabs fused into one block,
   which read as a disabled control group next to the blue primary button. */
.koomi-dt .dataTables_wrapper .dt-buttons {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    float: none;
    margin: 0;
    padding: 0;
}

.koomi-dt .dataTables_wrapper .dt-buttons .koomi-dt-btn,
.koomi-dt .dataTables_wrapper .dt-buttons .koomi-dt-btn:visited {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #fff;
    background-image: none;
    border: 1px solid var(--koomi-tbl-border, #e3e8ef);
    border-radius: 6px;
    box-shadow: none;
    color: #475467;
    font-size: 13px;
    font-weight: 500;
    height: 38px;
    line-height: 1;
    margin: 0;
    padding: 0 14px;
    text-shadow: none;
    white-space: nowrap;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.koomi-dt .dataTables_wrapper .dt-buttons .koomi-dt-btn:hover,
.koomi-dt .dataTables_wrapper .dt-buttons .koomi-dt-btn:focus,
.koomi-dt .dataTables_wrapper .dt-buttons .koomi-dt-btn:active {
    background: var(--koomi-tbl-head-bg, #f6f8fb);
    border-color: #cfd6e4;
    color: #1f2937;
    box-shadow: none;
    outline: none;
}

.koomi-dt .dataTables_wrapper .dt-buttons .koomi-dt-btn:focus-visible {
    border-color: var(--k-primary, #4a6cf7);
    box-shadow: 0 0 0 3px rgba(74, 108, 247, .12);
}

/* The file-type icons keep their own colour so the two exports are told apart
   at a glance; the labels stay neutral. */
.koomi-dt .dataTables_wrapper .dt-buttons .koomi-dt-btn i { font-size: 14px; }
.koomi-dt .dataTables_wrapper .dt-buttons .koomi-dt-btn-excel i { color: #1d8a4e; }
.koomi-dt .dataTables_wrapper .dt-buttons .koomi-dt-btn-pdf i   { color: #d64545; }
.koomi-dt .dataTables_wrapper .dt-buttons .koomi-dt-btn-columns i { color: #6b7280; }

.koomi-dt .dataTables_wrapper .dt-buttons .koomi-dt-btn-hidden { display: none !important; }
.koomi-dt-caret { font-size: 10px; margin-left: 1px; color: #98a2b3; }

/* Below ~576px the labels would push the toolbar onto a second line — keep the
   icons and drop the words. */
@media (max-width: 575.98px) {
    .koomi-dt .dataTables_wrapper .dt-buttons .koomi-dt-btn > span:not(.koomi-dt-caret) { display: none; }
    .koomi-dt .dataTables_wrapper .dt-buttons .koomi-dt-btn { padding: 0 11px; }
}

/* Columns dropdown — one toggle per column, ticked when the column is shown. */
.koomi-dt-colvis-wrap { position: relative; display: inline-flex; }

.koomi-dt-colvis-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 190px;
    max-height: 320px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--koomi-tbl-border, #e3e8ef);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(16, 24, 40, .12);
    padding: 6px;
    z-index: 1200;
}

.koomi-dt-colvis-menu[hidden] { display: none; }

.koomi-dt-colvis-menu .koomi-dt-colvis {
    background: transparent;
    border: 0;
    border-radius: 6px;
    color: #6b7280;
    display: block;
    font-size: 13px;
    padding: 6px 10px 6px 26px;
    position: relative;
    text-align: left;
    width: 100%;
}

.koomi-dt-colvis-menu .koomi-dt-colvis:hover { background: var(--koomi-tbl-head-bg, #f6f8fb); }
.koomi-dt-colvis-menu .koomi-dt-colvis-on { color: #1f2937; font-weight: 600; }
.koomi-dt-colvis-menu .koomi-dt-colvis-on::before {
    content: '✓';
    position: absolute;
    left: 8px;
    color: var(--k-primary, #4a6cf7);
}

/* ── Table bottom bar: "Show N per page" left, info + pages right ─────── */

.koomi-dt .dataTables_wrapper .koomi-dt-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
}

.koomi-dt .dataTables_wrapper .koomi-dt-bottom-page {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-left: auto;
}

.koomi-dt .dataTables_wrapper .dataTables_length,
.koomi-dt .dataTables_wrapper .dataTables_info,
.koomi-dt .dataTables_wrapper .dataTables_paginate {
    float: none;
    margin: 0;
    padding: 0;
    white-space: nowrap;
}

.koomi-dt .dataTables_wrapper .dataTables_length label { margin: 0; font-weight: 400; }

.koomi-dt .dataTables_wrapper .dataTables_paginate .paginate_button {
    border: 1px solid var(--koomi-tbl-border, #e3e8ef) !important;
    border-radius: 6px !important;
    color: #4b5563 !important;
    margin-left: 4px;
    min-width: 34px;
    padding: 5px 10px !important;
    text-align: center;
}

.koomi-dt .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.koomi-dt .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    border-color: var(--koomi-tbl-border, #e3e8ef) !important;
    color: #c3cad6 !important;
}

.koomi-dt .dataTables_wrapper .dataTables_paginate .ellipsis {
    color: #9aa4b2;
    padding: 0 4px;
}

@media (max-width: 767.98px) {
    .koomi-dt .dataTables_wrapper .koomi-dt-top-search { max-width: none; flex-basis: 100%; }
    .koomi-dt .dataTables_wrapper .koomi-dt-bottom-page { margin-left: 0; }
}

/* ── Bulk actions ────────────────────────────────────────────────────────────
   The tick-box column and the "N selected" strip that appears above a table
   once rows are ticked. Both are added by x-list-page / x-data-table, so these
   rules apply to every list page that opts in. */

.koomi-bulk-bar {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    margin-bottom: .75rem;
    padding: .5rem .875rem;
    border: 1px solid var(--koomi-border, #e6e9f0);
    border-radius: 8px;
    background: var(--koomi-surface-muted, #f6f8fb);
}

.koomi-bulk-bar[hidden] { display: none; }

.koomi-bulk-count {
    font-size: .875rem;
    color: var(--koomi-text-muted, #67748e);
}

.koomi-bulk-count strong { color: var(--koomi-text, #1b2559); }

.koomi-bulk-buttons {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

.koomi-bulk-clear {
    margin-left: auto;
    padding: 0;
    font-size: .8125rem;
    text-decoration: none;
}

/* The column is only as wide as the box, and never the target of a row click. */
.koomi-dt table th.koomi-bulk-col,
.koomi-dt table td.koomi-bulk-col {
    width: 40px;
    padding-left: .75rem;
    padding-right: .25rem;
    text-align: center;
    vertical-align: middle;
}

.koomi-dt table th.koomi-bulk-col { cursor: default; }

.koomi-dt table .koomi-bulk-col input[type="checkbox"] {
    cursor: pointer;
    margin: 0;
}

/* Sorting arrows would be meaningless on a checkbox header. */
.koomi-dt table th.koomi-bulk-col.sorting,
.koomi-dt table th.koomi-bulk-col.sorting_asc,
.koomi-dt table th.koomi-bulk-col.sorting_desc { background-image: none; }

/* ── Row action menus, once moved out to <body> ──────────────────────────────
   footer-scripts.blade.php relocates any dropdown menu that a scrolling table
   (or any other clipping ancestor) would cut off. Once it is on <body> nothing
   can clip it, but Popper is still writing its own inline position onto the
   element — so these declarations are !important to neutralise it. A stylesheet
   !important beats a plain inline style, which is exactly what Popper writes.
   The script then sets top/left inline *with* !important to win the rest. */

.dropdown-menu.koomi-dropdown-portal {
    position: fixed !important;
    inset: auto !important;
    margin: 0 !important;
    transform: none !important;
    /* Above the modal backdrop (1050) and the modal itself (1055), so a table
       inside a modal keeps working; still below tooltips (1080). */
    z-index: 1070 !important;
}

/* ── Purchase lines ──────────────────────────────────────────────────────────
   A purchase row carries ten columns: the item, its variation, quantity, cost,
   the two selling prices, its share of shipping, its own expenses, the line
   total and a remove control. Left to size itself the table ran wider than the
   page and pushed the last columns out of reach behind a horizontal scroll.

   Laying it out to the widths declared on the header keeps every column
   reachable: the item name wraps into whatever is left over, and the inputs
   fill their cell rather than carrying a hard-coded width of their own. */
.koomi-purchase-lines {
    table-layout: fixed;
    width: 100%;
}

.koomi-purchase-lines > thead th,
.koomi-purchase-lines > tbody > tr > td {
    padding-left: 6px;
    padding-right: 6px;
}

.koomi-purchase-lines > thead th {
    white-space: normal;
    line-height: 1.2;
}

/* Every cell wraps. The table is laid out to fixed widths, so a long label that
   cannot break — a variation like "4GB 64GB Violet Brand New" in a 150px column —
   spills straight over the cell next to it and lands on top of the Qty box. */
.koomi-purchase-lines > tbody > tr > td {
    white-space: normal;
    overflow-wrap: anywhere;
    vertical-align: middle;
}

/* The two text columns carry the wording, so they get a little breathing room. */
.koomi-purchase-lines > tbody > tr > td:first-child,
.koomi-purchase-lines > tbody > tr > td:nth-child(2) {
    line-height: 1.3;
    padding-top: 10px;
    padding-bottom: 10px;
}

.koomi-purchase-lines .form-control {
    width: 100%;
    min-width: 0;
    padding-left: .4rem;
    padding-right: .4rem;
    font-size: .8rem;
}

/* Spinners cost ~16px of a 96px money cell and are no use at a keyboard. */
.koomi-purchase-lines input[type="number"] {
    -moz-appearance: textfield;
}
.koomi-purchase-lines input[type="number"]::-webkit-outer-spin-button,
.koomi-purchase-lines input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* The per-line buttons and notes have to live inside their column too. */
/* Just a plus and, once there are any, a count — so it sizes to that rather than
   stretching across a column it no longer has words to fill. */
.koomi-purchase-lines .k-line-expense-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    width: auto;
    min-width: 0;
    padding-left: .5rem !important;
    padding-right: .5rem !important;
    font-size: .78rem;
}

.koomi-purchase-lines .k-line-cost-note {
    display: block;
    font-size: .68rem;
    overflow-wrap: anywhere;
}

/* Money and quantity read as a block: the figure sits under its heading, right
   aligned, instead of each column starting at its own left edge. The inputs are
   right aligned with them so a typed cost lines up with the total beside it. */
.koomi-purchase-lines > tbody > tr > td:nth-child(n + 3) input.form-control {
    text-align: right;
}

.koomi-purchase-lines > tbody > tr > td.k-line-actions,
.koomi-purchase-lines > tbody > tr > td:last-child {
    text-align: center;
}

/* The row is a set of controls on one baseline; the item cell is the only one
   that grows, so everything else is centred against it rather than floating. */
.koomi-purchase-lines > tbody > tr > td {
    vertical-align: middle;
}