/* Shared screen-only list appearance. The existing controls and data remain
   in their original DOM positions; document previews keep their own styles.
   erp-list also opts non-Bootstrap record tables into the same appearance. */
@media screen {
    .erp-shell :is(.table, .erp-list, .list-group):not(:where([data-erp-preserve], [data-erp-preserve] *, .pc-document, .pc-document *)) {
        --erp-list-ink: #191919;
        --erp-list-line: #e2e6eb;
        --bs-table-color: #191919;
        --bs-table-striped-bg: #fafbfc;
        --bs-table-striped-color: #191919;
        --bs-table-hover-bg: #f4f7fa;
        --bs-table-hover-color: #191919;
        --bs-table-border-color: #e2e6eb;
        color: var(--erp-list-ink);
        font-size: 12.8px;
        font-weight: 400;
        line-height: 1.3;
    }
    .erp-shell :is(.table, .erp-list):not(:where([data-erp-preserve], [data-erp-preserve] *, .pc-document, .pc-document *)) > :is(thead, tbody, tfoot) > tr > :is(td, th) {
        padding-top: 3px !important;
        padding-bottom: 3px !important;
        vertical-align: middle;
        border-color: var(--erp-list-line) !important;
        line-height: 1.3;
    }
    .erp-shell :is(.table, .erp-list):not(:where([data-erp-preserve], [data-erp-preserve] *, .pc-document, .pc-document *)) > thead,
    .erp-shell :is(.table, .erp-list):not(:where([data-erp-preserve], [data-erp-preserve] *, .pc-document, .pc-document *)) > thead > tr > th {
        --bs-table-bg: #f7f8fa;
        --bs-table-color: #58606b;
        background-color: #f7f8fa !important;
        color: #58606b !important;
        border-bottom-color: #dce1e7 !important;
        font-size: 11.5px !important;
        font-weight: 600 !important;
    }
    .erp-shell :is(.table, .erp-list):not(:where([data-erp-preserve], [data-erp-preserve] *, .pc-document, .pc-document *)) > tbody > tr > :is(td, th),
    .erp-shell :is(.table, .erp-list, .list-group):not(:where([data-erp-preserve], [data-erp-preserve] *, .pc-document, .pc-document *)) :is(.fw-bold, .fw-bolder, .fw-semibold, strong, b) {
        font-weight: 400 !important;
    }
    .erp-shell :is(.table, .erp-list, .list-group):not(:where([data-erp-preserve], [data-erp-preserve] *, .pc-document, .pc-document *)) :is(.text-primary, .erp-list-customer, .erp-list-price):not(:where(.btn, .btn *, .badge, .badge *, input, select, textarea, .alert, .alert *)) {
        color: #191919 !important;
        font-weight: 400 !important;
    }
    .erp-shell :is(.table, .erp-list):not(:where([data-erp-preserve], [data-erp-preserve] *, .pc-document, .pc-document *)) :is(.fs-5, .fs-6):not(:where(.btn *, .alert *)) {
        font-size: 12.8px !important;
    }
    .erp-shell :is(.table, .erp-list, .list-group):not(:where([data-erp-preserve], [data-erp-preserve] *, .pc-document, .pc-document *)) .erp-list-job {
        font-size: 13.6px !important;
        font-weight: 600 !important;
        color: #111111 !important;
        line-height: 1.3 !important;
    }

    .erp-shell :is(.table, .erp-list, .list-group):not(:where([data-erp-preserve], [data-erp-preserve] *, .pc-document, .pc-document *)) .erp-list-item {
        font-size: 14px !important;
        font-weight: 600 !important;
        color: #111111 !important;
    }
    .erp-shell :is(.table, .erp-list, .list-group):not(:where([data-erp-preserve], [data-erp-preserve] *, .pc-document, .pc-document *)) .erp-list-customer {
        font-size: 12px !important;
        font-weight: 400 !important;
        color: #111111 !important;
    }
    .erp-shell :is(.table, .erp-list, .list-group):not(:where([data-erp-preserve], [data-erp-preserve] *, .pc-document, .pc-document *)) .erp-list-id {
        color: #111111 !important;
        font-weight: 600 !important;
    }
    .erp-shell :is(.table, .erp-list, .list-group):not(:where([data-erp-preserve], [data-erp-preserve] *, .pc-document, .pc-document *)) :is(.erp-list-item, .erp-list-job) :is(small, .small, .text-muted) {
        font-size: 11.5px !important;
        font-weight: 400 !important;
    }
    .erp-shell :is(.table, .erp-list) .erp-list-description:not(:where([data-erp-preserve], [data-erp-preserve] *, .pc-document, .pc-document *)) {
        font-size: 11.5px !important;
        line-height: 14px !important;
        margin-top: 0 !important;
        padding-left: 24px;
    }
    .erp-shell :is(.table, .erp-list, .list-group):not(:where([data-erp-preserve], [data-erp-preserve] *, .pc-document, .pc-document *)) .erp-list-seller {
        display: inline;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        color: #30343a !important;
        font-size: 12px !important;
        font-weight: 400 !important;
        line-height: inherit;
        white-space: normal;
    }
    .erp-shell :is(.table, .erp-list, .list-group):not(:where([data-erp-preserve], [data-erp-preserve] *, .pc-document, .pc-document *)) :is(.badge, .dash-badge, .hlo-tag, .q-badge):not(.erp-list-seller) {
        --erp-badge-bg: #e9ecef;
        --erp-badge-border: #aab2bd;
        --erp-badge-ink: #30363d;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 25px;
        padding: 3px 7px !important;
        border: 1px solid var(--erp-badge-border) !important;
        border-radius: 3px !important;
        background: var(--erp-badge-bg) !important;
        color: var(--erp-badge-ink) !important;
        box-shadow: none !important;
        font-size: 11.5px !important;
        font-weight: 400 !important;
        line-height: 1.2;
        white-space: normal;
    }
    .erp-shell :is(.table, .erp-list, .list-group) .badge:is(.bg-primary, .bg-info, .text-bg-primary, .text-bg-info) {
        --erp-badge-bg: #dce7f5; --erp-badge-border: #8da8cd; --erp-badge-ink: #1e426f;
    }
    .erp-shell :is(.table, .erp-list, .list-group) .badge:is(.bg-success, .text-bg-success) {
        --erp-badge-bg: #dcebdd; --erp-badge-border: #8db393; --erp-badge-ink: #254b2d;
    }
    .erp-shell :is(.table, .erp-list, .list-group) .badge:is(.bg-warning, .text-bg-warning) {
        --erp-badge-bg: #f6e6b7; --erp-badge-border: #c9a644; --erp-badge-ink: #4d3b0f;
    }
    .erp-shell :is(.table, .erp-list, .list-group) .badge:is(.bg-danger, .text-bg-danger) {
        --erp-badge-bg: #f4dadb; --erp-badge-border: #c98e95; --erp-badge-ink: #7e242e;
    }
    .erp-shell .erp-list :is(.dash-badge.ongoing) { --erp-badge-bg: #dce7f5; --erp-badge-border: #8da8cd; --erp-badge-ink: #1e426f; }
    .erp-shell .erp-list :is(.dash-badge.risk) { --erp-badge-bg: #f6e6b7; --erp-badge-border: #c9a644; --erp-badge-ink: #4d3b0f; }
    .erp-shell .erp-list .q-badge.q-warn { --erp-badge-bg: #f6e6b7; --erp-badge-border: #c9a644; --erp-badge-ink: #4d3b0f; }
    .erp-shell .erp-list :is(.dash-badge.late) { --erp-badge-bg: #f4dadb; --erp-badge-border: #c98e95; --erp-badge-ink: #7e242e; }
    .erp-shell .erp-list :is(.dash-badge.ready, .hlo-tag.hlo-approved) { --erp-badge-bg: #dcebdd; --erp-badge-border: #8db393; --erp-badge-ink: #254b2d; }
    .erp-shell :is(.table, .erp-list) .erp-list-status { min-width: 100px; max-width: 180px; }
    .erp-shell :is(.table, .erp-list, .list-group):not(:where([data-erp-preserve], [data-erp-preserve] *, .pc-document, .pc-document *)) .btn {
        min-height: 25px;
        padding: 3px 8px !important;
        border-radius: 3px !important;
        box-shadow: none !important;
        font-size: 11.5px !important;
        font-weight: 400 !important;
        line-height: 1.2;
        letter-spacing: normal;
    }
    .erp-shell :is(.table, .erp-list, .list-group):not(:where([data-erp-preserve], [data-erp-preserve] *, .pc-document, .pc-document *)) .btn-dark {
        --bs-btn-color: #1b2a3b; --bs-btn-bg: #f7f8fa; --bs-btn-border-color: #aab2bd;
        --bs-btn-hover-color: #23364c; --bs-btn-hover-bg: #e9edf2; --bs-btn-hover-border-color: #8997a9;
        --bs-btn-active-color: #23364c; --bs-btn-active-bg: #e1e7ef; --bs-btn-active-border-color: #8997a9;
    }
    .erp-shell :is(.table, .erp-list, .list-group):not(:where([data-erp-preserve], [data-erp-preserve] *, .pc-document, .pc-document *)) :is(.btn-primary, .btn-info, .btn-outline-primary, .btn-outline-info) {
        --bs-btn-color: #1e426f; --bs-btn-bg: #fff; --bs-btn-border-color: #8da8cd;
        --bs-btn-hover-color: #233d60; --bs-btn-hover-bg: #eaf0f7; --bs-btn-hover-border-color: #899fbf;
        --bs-btn-active-color: #233d60; --bs-btn-active-bg: #dce7f5; --bs-btn-active-border-color: #899fbf;
    }
    .erp-shell :is(.table, .erp-list, .list-group):not(:where([data-erp-preserve], [data-erp-preserve] *, .pc-document, .pc-document *)) :is(.btn-success, .btn-outline-success) {
        --bs-btn-color: #254b2d; --bs-btn-bg: #fff; --bs-btn-border-color: #8db393;
        --bs-btn-hover-color: #264e36; --bs-btn-hover-bg: #dcebdd; --bs-btn-hover-border-color: #83a88d;
        --bs-btn-active-color: #264e36; --bs-btn-active-bg: #e0eee3; --bs-btn-active-border-color: #83a88d;
    }
    /* Materiaalivaraston ostoslistan toiminnot erottuvat myös ilman hiiren kohdistusta. */
    .erp-shell .list-group.materiaalivarasto-ostoslista .btn-outline-primary {
        --bs-btn-bg: #e4eefb;
        --bs-btn-hover-bg: #d5e4f7;
        --bs-btn-active-bg: #c4d8f1;
    }
    .erp-shell .list-group.materiaalivarasto-ostoslista .btn-success {
        --bs-btn-bg: #e2f0e5;
        --bs-btn-hover-bg: #cfe5d4;
        --bs-btn-active-bg: #bbd9c2;
    }
    .erp-shell :is(.table, .erp-list, .list-group):not(:where([data-erp-preserve], [data-erp-preserve] *, .pc-document, .pc-document *)) .btn-outline-secondary {
        --bs-btn-color: #3d4650; --bs-btn-border-color: #8e99a7;
    }
    .erp-shell :is(.table, .erp-list, .list-group):not(:where([data-erp-preserve], [data-erp-preserve] *, .pc-document, .pc-document *)) :is(a, button, [tabindex="0"]):focus-visible {
        outline: 2px solid #245dc5;
        outline-offset: 2px;
    }
    .erp-shell :is(.table, .erp-list):not(:where([data-erp-preserve], [data-erp-preserve] *, .pc-document, .pc-document *)) a:not(.btn) { text-underline-offset: 2px; }
    .erp-shell :is(.table, .erp-list):not(:where([data-erp-preserve], [data-erp-preserve] *, .pc-document, .pc-document *)) a:not(.btn):hover { text-decoration: underline; }
    .erp-shell .list-group:not(:where([data-erp-preserve], [data-erp-preserve] *, .pc-document, .pc-document *)) > .list-group-item {
        padding-top: 7px !important;
        padding-bottom: 7px !important;
        border-color: #e2e6eb;
        font-weight: 400 !important;
        box-shadow: none !important;
    }
    .erp-shell .list-group:not(:where([data-erp-preserve], [data-erp-preserve] *, .pc-document, .pc-document *)) > .list-group-item.active {
        color: #233d60;
        background-color: #eaf0f7;
        border-color: #8da8cd;
    }
    .erp-shell .list-group-item.active .text-white-50 { color: #53667e !important; }
    .erp-shell .person-list .person { padding: 8px 12px; gap: 8px; }
    .erp-shell .person-list .avatar { width: 28px; height: 28px; border-radius: 3px; font-size: 11px; }
    .erp-shell .person-list .person-text strong { font-size: 12.8px; font-weight: 400; color: #191919; }
    .erp-shell .person-list .person-text :is(span, small) { font-size: 11.5px; line-height: 1.3; }
    .erp-shell .person-list .person-badge { border: 1px solid #c9a644; border-radius: 3px; background: #f6e6b7; color: #4d3b0f; font-size: 11px; font-weight: 400; }
    .erp-shell .erp-print-type {
        display: inline-flex; align-items: center; justify-content: center;
        width: 20px; height: 20px; flex: 0 0 20px;
        border: 1px solid #9ea8b3; border-radius: 2px;
        background: #dce2e8; color: #263340;
        font: 600 11px/1 "Segoe UI", system-ui, sans-serif;
        vertical-align: middle;
    }
    .erp-shell .erp-print-type--digi { background: #d4e3f8; border-color: #86a9d8; color: #133d76; }
    .erp-shell .erp-print-type--offset { background: #f5df9f; border-color: #c7a347; color: #4f3805; }
    .erp-shell .erp-print-type--suurkuva { background: #e8d2ef; border-color: #b68bc1; color: #5a2069; }
}
@media screen and (max-width: 767.98px) {
    .erp-shell :is(.table, .erp-list, .list-group):not(:where([data-erp-preserve], [data-erp-preserve] *, .pc-document, .pc-document *)) .btn {
        min-height: 36px;
    }
}

/* Quote/order tables only: smaller text, with net prices still easy to pick out. */
@media screen {
    .erp-shell table.table.erp-sales-list > tbody > tr .erp-list-job {
        font-size: calc(13.6px - 2pt) !important;
    }
    .erp-shell table.table.erp-sales-list > tbody > tr .erp-list-customer {
        font-size: calc(12px - 1pt) !important;
    }
    .erp-shell table.table.erp-sales-list > tbody > tr :is(.erp-list-quantity, .erp-list-price) {
        font-size: calc(12.8px - 1pt) !important;
        font-variant-numeric: tabular-nums;
    }
    .erp-shell table.table.erp-sales-list > tbody > tr .erp-list-price {
        font-weight: 600 !important;
    }
    .erp-shell table.table.erp-sales-list > tbody > tr .badge.erp-list-status {
        box-sizing: border-box;
        width: 100px;
        min-width: 100px;
        max-width: 100px;
        overflow-wrap: anywhere;
        min-height: 19px;
        padding: 1px 5px !important;
        font-size: 10px !important;
    }
}

/* Catalogue names: 14 px minus 2 pt (2.6667 px), with wrapping in narrower columns. */
@media screen {
    .erp-shell #materiaalihinnasto { table-layout:fixed; width:100%; min-width:1030px; }
    .erp-shell #materiaalihinnasto th:nth-child(1) { width:54px; }
    .erp-shell #materiaalihinnasto th:nth-child(2) { width:100px; }
    .erp-shell #materiaalihinnasto th:nth-child(3) { width:90px; }
    .erp-shell #materiaalihinnasto th:nth-child(4) { width:21%; }
    .erp-shell #materiaalihinnasto th:nth-child(5) { width:95px; }
    .erp-shell #materiaalihinnasto th:nth-child(6) { width:55px; }
    .erp-shell #materiaalihinnasto th:nth-child(7) { width:65px; }
    .erp-shell #materiaalihinnasto th:nth-child(8) { width:110px; }
    .erp-shell #materiaalihinnasto th:nth-child(9) { width:90px; }
    .erp-shell #materiaalihinnasto th:nth-child(10) { width:85px; }
    .erp-shell #materiaalihinnasto th:nth-child(11) { width:95px; }
    .erp-shell #materiaalihinnasto th:last-child { width:38px; }
    .erp-shell #materiaalihinnasto :is(td, th) { white-space:normal; overflow-wrap:anywhere; }
    .erp-shell :is(#materiaalihinnasto, #suurkuvahinnasto) .erp-list-item { font-size:calc(14px - 2pt) !important; }
}