/* Central dimensions, typography and surfaces for Ratio overview tables. */
.app-main :is(.overview-table, .receipt-table) {
    --overview-table-body-font-size: 12px;
    --overview-table-body-font-weight: 500;
    --overview-table-header-font-size: 10.5px;
    --overview-table-row-height: 46px;
    width: 100%;
    border-collapse: collapse;
}

/* Tabular data stays on one line and makes the surrounding region scroll first. */
.app-main :is(.table-wrapper, .dashboard-table-wrap, .schedule-scroll) {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-color: var(--text-subtle) var(--selected-surface);
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

/* Reserve room for the persistent control so the final row stays completely visible. */
.app-main :is(.table-wrapper, .dashboard-table-wrap, .schedule-scroll).has-horizontal-overflow {
    padding-bottom: 18px;
    scrollbar-width: auto;
    scrollbar-color: auto;
}

/* WebKit controls only the horizontal native bar; vertical panel scrolling stays visible. */
.app-main :is(.table-wrapper, .dashboard-table-wrap, .schedule-scroll).has-horizontal-overflow::-webkit-scrollbar {
    height: 0;
}

.app-main :is(.table-wrapper, .dashboard-table-wrap, .schedule-scroll)::-webkit-scrollbar {
    height: 12px;
}

.app-main :is(.table-wrapper, .dashboard-table-wrap, .schedule-scroll)::-webkit-scrollbar-track {
    margin: 0 4px;
    border-radius: 999px;
    background: var(--selected-surface);
}

.app-main :is(.table-wrapper, .dashboard-table-wrap, .schedule-scroll)::-webkit-scrollbar-thumb {
    border: 2px solid var(--info-border);
    border-radius: 999px;
    background: var(--text-subtle);
}

.app-main :is(.table-wrapper, .dashboard-table-wrap, .schedule-scroll)::-webkit-scrollbar-thumb:hover {
    background: var(--text-subtle);
}

.app-main :is(.table-wrapper, .dashboard-table-wrap, .schedule-scroll)::-webkit-scrollbar-button {
    width: 0;
    height: 0;
}

.app-main :is(.table-wrapper, .dashboard-table-wrap, .schedule-scroll)::-webkit-scrollbar-corner {
    background: transparent;
}

/* Persistent controls follow the visible table edge without relying on OS scrollbar visibility. */
.table-scrollbar {
    position: fixed;
    z-index: 35;
    box-sizing: border-box;
    height: 18px;
    padding: 3px 4px;
    border-top: 1px solid var(--interface-divider);
    background: var(--surface-subtle);
    box-shadow: 0 -2px 5px color-mix(in srgb, var(--shadow-ink) 4%, transparent);
    touch-action: none;
    user-select: none;
    cursor: default;
}

.table-scrollbar[hidden] {
    display: none;
}

.table-scrollbar-thumb {
    height: 11px;
    border-radius: 999px;
    background: var(--interface-border-strong);
}

/* Pointer and keyboard feedback use a neutral thumb shade without outlining the track. */
.table-scrollbar:hover .table-scrollbar-thumb,
.table-scrollbar:focus-visible .table-scrollbar-thumb {
    background: var(--text-subtle);
}

.table-scrollbar:focus {
    outline: none;
}

/* A one-time mobile cue reveals horizontal list content without covering a data column. */
.table-scroll-hint {
    position: fixed;
    z-index: 36;
    display:grid;
    width:44px;
    height:58px;
    place-items:center;
    border:1px solid var(--info-border);
    border-right:0;
    border-radius:29px 0 0 29px;
    background:var(--selected-surface);
    color:var(--link);
    box-shadow:-3px 3px 10px color-mix(in srgb, var(--shadow-ink) 12%, transparent);
    transform:translateY(-50%);
    pointer-events:none;
}

.table-scroll-hint[hidden] {
    display:none;
}

.table-scroll-hint svg {
    width:27px;
    height:20px;
    fill:none;
    stroke:currentcolor;
    stroke-width:2.2;
    stroke-linecap:round;
    stroke-linejoin:round;
}

/* System colours keep the persistent track usable in high-contrast modes. */
@media (forced-colors: active) {
    .table-scrollbar { border: 1px solid ButtonText; background: Canvas; }
    .table-scrollbar-thumb { background: ButtonText; forced-color-adjust: none; }
    .table-scroll-hint { border:1px solid ButtonText; background:Canvas; color:ButtonText; forced-color-adjust:none; }
}

/* Printed tables do not need viewport controls. */
@media print {
    .table-scrollbar, .table-scroll-hint { display: none; }
}

.app-main :is(.table-wrapper, .dashboard-table-wrap, .schedule-scroll) > table {
    width: max-content;
    min-width: 100%;
}

.app-main :is(.table-wrapper, .dashboard-table-wrap, .schedule-scroll) :is(th, td) {
    display: table-cell;
    white-space: nowrap;
}

/* Empty states and contextual explanations remain readable inside a wide table. */
.app-main :is(.table-wrapper, .dashboard-table-wrap, .schedule-scroll) :is(.empty-state, [role="tooltip"], [popover]) {
    white-space: normal;
}

/* Compact standard layouts allocate text columns from the remaining desktop space. */
.app-main .table-wrapper > table.overview-table--fit {
    width: 100%;
    min-width: 760px;
    table-layout: fixed;
}
.app-main .overview-table--fit :is(th, td):not(:is(.status-column, .record-signals-column)) {
    overflow: hidden;
    text-overflow: ellipsis;
}
.overview-table--fit .column-filters input {
    box-sizing: border-box;
    min-width: 0;
    width: 100%;
}

/* Small screens retain semantic rows instead of converting list tables into cards. */
@media (max-width: 620px) {
    .app-main :is(.table-wrapper, .dashboard-table-wrap, .schedule-scroll) > table {
        display: table;
    }

    .app-main :is(.table-wrapper, .dashboard-table-wrap, .schedule-scroll) > table > thead {
        display: table-header-group;
    }

    .app-main :is(.table-wrapper, .dashboard-table-wrap, .schedule-scroll) > table > tbody {
        display: table-row-group;
    }

    .app-main :is(.table-wrapper, .dashboard-table-wrap, .schedule-scroll) > table tr {
        display: table-row;
    }
}

/* Headers and their filter rows keep the same surface after feature styles load. */
.app-main :is(.overview-table, .receipt-table) th {
    background: var(--table-header-surface);
    padding: 11px 12px 9px;
    font-size: var(--overview-table-header-font-size);
    line-height: 1.2;
}

.app-main :is(.overview-table, .receipt-table) td {
    height: var(--overview-table-row-height);
    padding: 8px 12px;
    font-size: var(--overview-table-body-font-size);
    font-weight: var(--overview-table-body-font-weight);
    line-height: 1.35;
    vertical-align: middle;
}

.app-main :is(.overview-table, .receipt-table) .article-number,
.app-main :is(.overview-table, .receipt-table) .quote-identity strong {
    font-size: var(--overview-table-body-font-size);
}

/* Neutral record links retain body weight; only identifiers carry visual emphasis. */
.app-main :is(.overview-table, .receipt-table) .relation-link {
    font-weight: var(--overview-table-body-font-weight);
}

.app-main :is(.overview-table, .receipt-table) input[type="number"],
.app-main :is(.overview-table, .receipt-table) input[type="search"],
.app-main :is(.overview-table, .receipt-table) select {
    font-size: var(--overview-table-body-font-size);
}

/* Receipt rows follow the central height instead of their historical fixed height. */
.app-main .receipt-table tbody tr {
    height: auto;
}

/* Purchase prices stay visible without forcing a desktop table to scroll. */
.app-main .purchase-table :is(th, td):last-child {
    box-sizing: border-box;
    width: 92px;
    min-width: 92px;
    white-space: nowrap;
}

/* Editable table controls stay readable within the compact shared row spacing. */
.app-main .purchase-table :is(.quantity-input, .purchase-supplier-select),
.app-main .overview-table .overview-table-input {
    min-height: 32px;
    padding-top: 5px;
    padding-bottom: 5px;
}