/* KOPILA ERP: yhteinen tiivis näyttöteema.
   Ei muuta toimintojen näkyvyyttä, laskureiden palstajakoa tai tulostustyylejä.
   data-erp-preserve rajaa lomakkeet ja kalenterien mitoitetut työalueet pois. */
@media screen {
    .erp-shell {
        --erp-ink: #243247;
        --erp-muted: #5e6e83;
        --erp-line: #d6dde7;
        --erp-blue: #245dc5;
        --erp-surface: #ffffff;
        --erp-soft: #f5f7fa;
        --bs-primary-rgb: 36, 93, 197;
        --bs-border-color: #d6dde7;
        background: #eef1f5;
        color: var(--erp-ink);
        font-family: "Segoe UI", system-ui, sans-serif;
        font-size: 14px;
        line-height: 1.45;
        min-height: 100vh;
    }

    /* Palautetaan ulomman työpöydän perityt arvot suojattujen alueiden rajalla.
       Alueiden omat sisäiset lomake- ja kalenterityylit säilyvät. */
    .erp-shell [data-erp-preserve] {
        font-family: var(--bs-body-font-family);
        font-size: var(--bs-body-font-size);
        line-height: var(--bs-body-line-height);
        color: var(--bs-body-color);
        --bs-primary-rgb: 13, 110, 253;
        --bs-border-color: #dee2e6;
    }

    .erp-shell > main > .top-row {
        background: #172438 !important;
        min-height: 54px !important;
        padding: 6px 20px !important;
        box-shadow: 0 1px 0 #0c192b !important;
        gap: 8px 16px;
        flex-wrap: wrap;
    }
    .erp-shell > main > .top-row > div { flex-wrap: wrap; }
    .erp-shell .nav-link-custom { font-size: 13px; font-weight: 600; padding: 7px 10px; }
    .erp-shell > main > .content { padding: 12px 8px !important; }
    .erp-shell > main > .content > .container-fluid { padding-inline: 12px; }
    .erp-shell .content > .container-fluid > .container-fluid:not([data-erp-preserve]) {
        padding-top: 12px !important;
        padding-bottom: 16px !important;
    }

    .erp-shell :is(h1, h2):not(:where([data-erp-preserve], [data-erp-preserve] *)) {
        font-size: 24px !important; font-weight: 650 !important; line-height: 1.25; letter-spacing: -.3px;
    }
    .erp-shell h3:not(:where([data-erp-preserve], [data-erp-preserve] *)) { font-size: 20px; font-weight: 650; }
    .erp-shell h4:not(:where([data-erp-preserve], [data-erp-preserve] *)) { font-size: 18px; font-weight: 650; }
    .erp-shell h5:not(:where([data-erp-preserve], [data-erp-preserve] *)) { font-size: 16px; font-weight: 650; }
    .erp-shell h6:not(:where([data-erp-preserve], [data-erp-preserve] *)) { font-size: 14px; font-weight: 650; }
    .erp-shell .tracking-wider:not(:where([data-erp-preserve], [data-erp-preserve] *)) { letter-spacing: .25px; }
    .erp-shell :is(.card-header, .form-label, .nav-link, .btn, .section-title, .tracking-wider).text-uppercase:not(:where([data-erp-preserve], [data-erp-preserve] *)) {
        text-transform: none !important; letter-spacing: normal;
    }

    .erp-shell :is(.card, .modern-card, .modal-content, .table-card, .kpi-card):not(:where([data-erp-preserve], [data-erp-preserve] *)) {
        border-radius: 8px !important;
        border-color: var(--erp-line) !important;
        box-shadow: 0 1px 2px rgb(24 39 60 / 4%) !important;
    }
    .erp-shell .card:not(.is-selected, .bg-dark, .bg-primary, .bg-success, .bg-danger, .bg-warning, .bg-info, [style*="background"]):not(:where([data-erp-preserve], [data-erp-preserve] *)) {
        background-color: var(--erp-surface) !important;
    }
    .erp-shell .card-body:not(.p-0, .p-1, .p-2, .px-0, .py-0, .py-1, .py-2):not(:where([data-erp-preserve], [data-erp-preserve] *)) {
        padding: 16px !important;
    }
    .erp-shell :is(.card-header, .modal-header):not(:where([data-erp-preserve], [data-erp-preserve] *)) {
        padding: 10px 16px !important;
        font-size: 14px; font-weight: 600 !important;
        border-bottom-color: #e2e7ee !important;
    }
    .erp-shell .card-header:not(:where([data-erp-preserve], [data-erp-preserve] *)) {
        --erp-header-ink: #33465f;
        background: #f6f8fb !important; color: var(--erp-header-ink) !important;
    }
    .erp-shell .card-header.bg-primary:not(:where([data-erp-preserve], [data-erp-preserve] *)) { --erp-header-ink: #2454a0; background: #edf3fc !important; }
    .erp-shell .card-header.bg-success:not(:where([data-erp-preserve], [data-erp-preserve] *)) { --erp-header-ink: #316546; background: #eef6f0 !important; }
    .erp-shell .card-header.bg-danger:not(:where([data-erp-preserve], [data-erp-preserve] *)) { --erp-header-ink: #9b343e; background: #fbf0f1 !important; }
    .erp-shell .card-header.bg-warning:not(:where([data-erp-preserve], [data-erp-preserve] *)) { --erp-header-ink: #805817; background: #fbf5e9 !important; }
    .erp-shell .card-header .text-white:not(:where(.btn, .btn *, .badge, .badge *, [data-erp-preserve], [data-erp-preserve] *)) { color: var(--erp-header-ink) !important; }
    .erp-shell .card-header :is(h2, h3, h4, h5, h6):not(:where([data-erp-preserve], [data-erp-preserve] *)) { font-size: 14px !important; margin-bottom: 0; }
    .erp-shell :is(.card-footer, .modal-footer):not(:where([data-erp-preserve], [data-erp-preserve] *)) { padding: 10px 16px; border-color: #e2e7ee; }

    .erp-shell :is(.form-control, .form-select):not(:where([data-erp-preserve], [data-erp-preserve] *)) {
        font-family: inherit; font-size: 14px !important; font-weight: 500 !important;
        border: 1px solid #aebccd !important; border-radius: 5px !important;
        color: #243247 !important; background-color: #fff !important;
        padding: 6px 9px; min-height: 34px; line-height: 1.35;
    }
    .erp-shell .form-select:not(:where([data-erp-preserve], [data-erp-preserve] *)) { padding-right: 30px !important; }
    .erp-shell textarea.form-control:not(:where([data-erp-preserve], [data-erp-preserve] *)) { min-height: 76px; }
    .erp-shell :is(.form-control-sm, .form-select-sm, .input-group-sm > .form-control, .input-group-sm > .form-select):not(:where([data-erp-preserve], [data-erp-preserve] *)) {
        font-size: 13px !important; padding-top: 5px; padding-bottom: 5px; min-height: 32px;
    }
    .erp-shell .form-floating > :is(.form-control, .form-select):not(:where([data-erp-preserve], [data-erp-preserve] *)) {
        min-height: 54px; padding-top: 22px; padding-bottom: 6px;
    }
    .erp-shell :is(.form-control, .form-select):focus:not(:where([data-erp-preserve], [data-erp-preserve] *)) {
        border-color: var(--erp-blue) !important; box-shadow: 0 0 0 3px rgb(36 93 197 / 16%) !important;
    }
    .erp-shell :is(.form-control, .form-select):disabled:not(:where([data-erp-preserve], [data-erp-preserve] *)),
    .erp-shell .form-control[readonly]:not(:where([data-erp-preserve], [data-erp-preserve] *)) {
        background-color: #f0f3f7 !important; color: #5d6b7e !important;
    }
    .erp-shell :is(.form-control, .form-select).invalid:not(:where([data-erp-preserve], [data-erp-preserve] *)) { border-color: #b42335 !important; }
    .erp-shell .input-group-text:not(:where([data-erp-preserve], [data-erp-preserve] *)) {
        font-size: 12px; padding: 5px 8px; border-color: #aebccd; color: #526178;
    }
    .erp-shell :is(.form-label, .form-check-label):not(:where([data-erp-preserve], [data-erp-preserve] *)) {
        font-size: 12px !important; font-weight: 600 !important; margin-bottom: 4px;
    }
    .erp-shell .form-check-input:focus:not(:where([data-erp-preserve], [data-erp-preserve] *)) { box-shadow: 0 0 0 3px rgb(36 93 197 / 16%); }

    .erp-shell .btn:not(:where([data-erp-preserve], [data-erp-preserve] *)) {
        font-size: 13px !important; font-weight: 600 !important; line-height: 1.35;
        border-radius: 5px !important; padding: 6px 11px; letter-spacing: 0 !important;
    }
    .erp-shell .btn-sm:not(:where([data-erp-preserve], [data-erp-preserve] *)) { font-size: 12px !important; padding: 5px 9px; }
    .erp-shell .btn-xs:not(:where([data-erp-preserve], [data-erp-preserve] *)) { font-size: 11px !important; padding: 3px 7px; }
    .erp-shell .btn-primary:not(:where([data-erp-preserve], [data-erp-preserve] *)) {
        --bs-btn-bg: #245dc5; --bs-btn-border-color: #245dc5;
        --bs-btn-hover-bg: #1c4da8; --bs-btn-hover-border-color: #1c4da8;
        --bs-btn-active-bg: #183f89; --bs-btn-active-border-color: #183f89;
    }
    .erp-shell :is(.btn, a, summary):focus-visible:not(:where([data-erp-preserve], [data-erp-preserve] *)) { outline: 3px solid #8cafed; outline-offset: 2px; }
    .erp-shell .nav-tabs .nav-link:not(:where([data-erp-preserve], [data-erp-preserve] *)) {
        padding: 9px 14px !important; font-size: 13px !important;
        font-weight: 600 !important; border-top-left-radius: 6px; border-top-right-radius: 6px;
    }
    .erp-shell .list-group-item:not(:where([data-erp-preserve], [data-erp-preserve] *)) { padding: 10px 14px; font-size: 14px; }
    .erp-shell .alert:not(:where([data-erp-preserve], [data-erp-preserve] *)) { border-radius: 6px; padding: 10px 14px; font-size: 13px; }

    .erp-shell .table:not(:where([data-erp-preserve], [data-erp-preserve] *)) {
        font-size: 13px; --bs-table-border-color: #e2e7ee; --bs-table-hover-bg: #edf3fb;
    }
    .erp-shell .table > :is(thead, tbody) > tr > :is(th, td):not(:where([data-erp-preserve], [data-erp-preserve] *)) {
        padding-top: 8px; padding-bottom: 8px; vertical-align: middle;
    }
    .erp-shell .table-sm > :is(thead, tbody) > tr > :is(th, td):not(:where([data-erp-preserve], [data-erp-preserve] *)) {
        padding-top: 5px; padding-bottom: 5px;
    }
    .erp-shell .table > thead > tr > th:not(:where([data-erp-preserve], [data-erp-preserve] *)) { font-size: 12px; font-weight: 600; }
    .erp-shell :is(.text-end, .text-center) .table:not(:where([data-erp-preserve], [data-erp-preserve] *)),
    .erp-shell .table .text-end:not(:where([data-erp-preserve], [data-erp-preserve] *)) { font-variant-numeric: tabular-nums; }

    /* Vain isot osioiden välit pienenevät; kalenterin ja palstojen geometria säilyy. */
    .erp-shell :is(.card, .modern-card, .header-box, .dashboard-header).mb-4:not(:where([data-erp-preserve], [data-erp-preserve] *)) { margin-bottom: 16px !important; }
    .erp-shell :is(.header-box, .dashboard-header):not(:where([data-erp-preserve], [data-erp-preserve] *)) {
        border-radius: 8px; padding: 16px; margin-bottom: 18px; border-color: var(--erp-line);
    }
    .erp-shell .nav-card:not(:where([data-erp-preserve], [data-erp-preserve] *)) {
        min-height: 76px; padding: 12px; border-radius: 8px;
        flex-direction: row; gap: 10px; justify-content: flex-start; text-align: left;
        box-shadow: 0 1px 2px rgb(24 39 60 / 4%);
    }
    .erp-shell .nav-card i:not(:where([data-erp-preserve], [data-erp-preserve] *)) { font-size: 22px; margin-bottom: 0; }
    .erp-shell .nav-card span:not(:where([data-erp-preserve], [data-erp-preserve] *)) { font-size: 13px; font-weight: 600; }
    .erp-shell :is(.nav-card, .hover-scale, .hover-lift):hover:not(:where([data-erp-preserve], [data-erp-preserve] *)) { transform: none; }
    .erp-shell .section-title:not(:where([data-erp-preserve], [data-erp-preserve] *)) { margin-top: 20px; font-size: 12px; font-weight: 600; letter-spacing: .25px; }
    .erp-shell .kpi-card:not(:where([data-erp-preserve], [data-erp-preserve] *)) { padding: 14px 16px; }
    .erp-shell .kpi-value:not(:where([data-erp-preserve], [data-erp-preserve] *)) { font-size: 26px; font-weight: 650; }
    .erp-shell :is(.shadow-lg, .shadow, .shadow-sm):not(:where([data-erp-preserve], [data-erp-preserve] *)) { box-shadow: 0 1px 3px rgb(24 39 60 / 6%) !important; }

    /* Laskureiden oikea palsta: kustannuserittely säilyy ennen hintayhteenvetoa. */
    .erp-shell .result-card {
        background: #fff !important; color: #243247 !important;
        padding: 16px !important; border-radius: 8px !important;
        border: 1px solid var(--erp-line) !important;
        font-size: 13px; font-variant-numeric: tabular-nums;
    }
    .erp-shell .result-card :is(.text-white, .text-light):not(:where(.btn, .btn *, .badge, .badge *)) { color: #243247 !important; }
    .erp-shell .result-card .text-white-50:not(:where(.btn, .btn *, .badge, .badge *)) { color: #5e6e83 !important; }
    .erp-shell .result-card .text-success:not(:where(.btn, .btn *)) { color: #286140 !important; }
    .erp-shell .result-card .text-info:not(:where(.btn, .btn *)) { color: #225787 !important; }
    .erp-shell .result-card .text-warning:not(:where(.btn, .btn *)) { color: #815209 !important; }
    .erp-shell .result-card .unit-price-badge {
        color: #243247 !important;
        background-color: #eef2f7 !important;
        border-color: #cbd5e1 !important;
    }
    .erp-shell .result-card :is(.opacity-50, .opacity-75) { opacity: 1 !important; }
    .erp-shell .result-card :is(.bg-dark, .bg-black):not(.btn) { background: #f5f7fa !important; }
    .erp-shell .result-card .cost-breakdown { background: #f6f8fb !important; padding: 12px !important; border: 1px solid #e2e7ee; border-radius: 6px !important; }
    .erp-shell .result-card :is(.border-secondary, .border-light) { border-color: #d6dde7 !important; }
    .erp-shell .result-card :is(.display-5, .fs-2, .fs-3) { font-size: 28px !important; font-weight: 650 !important; letter-spacing: -.5px !important; }
    .erp-shell .result-card :is(.rounded-top-4, .rounded-bottom-4) { border-radius: 6px !important; }
    .erp-shell .result-card .btn-outline-light { color: #33465f; border-color: #aebccd; }
    .erp-shell .result-card .btn-outline-light:hover { color: #1d4381; background: #edf3fc; }
    .erp-shell .result-card .btn-outline-info { color: #225787; border-color: #6d96b8; }
    .erp-shell .result-card .btn-outline-info:hover { color: #fff; background: #225787; }
}

@media screen and (max-width: 767.98px) {
    .erp-shell > main > .top-row { padding: 8px 12px !important; }
    .erp-shell :is(.form-control, .form-select, .btn):not(:where(.btn-xs, [data-erp-preserve], [data-erp-preserve] *)) { min-height: 40px; }
    .erp-shell :is(.dashboard-header, .header-box):not(:where([data-erp-preserve], [data-erp-preserve] *)) { flex-wrap: wrap; gap: 12px; }
    .erp-shell .nav-grid { grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); }
    .erp-shell .result-card { padding: 14px !important; }
}

@media screen and (prefers-reduced-motion: reduce) {
    .erp-shell :is(.hover-scale, .hover-lift, .nav-card):not(:where([data-erp-preserve], [data-erp-preserve] *)) { transition: none; }
}