/* Central dimensions and typography 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: #788b9b #edf2f6;
    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: #edf2f6;
}

.app-main :is(.table-wrapper, .dashboard-table-wrap, .schedule-scroll)::-webkit-scrollbar-thumb {
    border: 2px solid #edf2f6;
    border-radius: 999px;
    background: #788b9b;
}

.app-main :is(.table-wrapper, .dashboard-table-wrap, .schedule-scroll)::-webkit-scrollbar-thumb:hover {
    background: #5f7486;
}

.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 #ededed;
    background: #fafafa;
    box-shadow: 0 -2px 5px rgb(0 0 0 / 4%);
    touch-action: none;
    user-select: none;
    cursor: default;
}

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

.table-scrollbar-thumb {
    height: 11px;
    border-radius: 999px;
    background: #c1c1c1;
}

/* 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: #a8a8a8;
}

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

/* 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; }
}

/* Printed tables do not need viewport controls. */
@media print {
    .table-scrollbar { 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;
}

/* 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;
    }
}

.app-main :is(.overview-table, .receipt-table) th {
    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);
}

.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;
}

/* Purchase inputs stay readable while fitting the compact overview rows. */
.app-main .purchase-table :is(.quantity-input, .purchase-supplier-select) {
    min-height: 32px;
    padding-top: 5px;
    padding-bottom: 5px;
}