/* Shared by both portals. Keep these rules after page styles so new desktop
   variants cannot accidentally override the small-screen layout. */
.content, .panel, .toolbar > *, .form-grid > *, .detail-grid > *,
.compact-filters > *, .page-header > *, .section-header > *, .section-heading-row > *,
.quote-layout > *, .profile-grid > *, .details-list > div {
    min-width: 0;
}
.content { overflow-wrap: break-word; }
.content img, .content iframe, .content input, .content select, .content textarea {
    max-width: 100%;
}
.toolbar, .toolbar-wide, .parcels-toolbar, .toolbar-customers {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}
.fees-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }
.summary-line, .pager, .page-header, .section-header, .side-panel-header,
.customer-hero-actions, .sub-nav, .cancel-tabs, .services-panel-head, .section-heading-row {
    flex-wrap: wrap;
}
.pager { margin-top: 1rem; }
.filter-panel { margin-bottom: 1rem; border: 1px solid #dce3ed; border-radius: 10px; background: #fff; }
.filter-panel > summary { padding: .85rem 1rem; font-weight: 600; cursor: pointer; }
.filter-panel > .toolbar { margin-bottom: 0; box-shadow: none; }
.page-header .btn { white-space: normal; }
.details-list { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.details-list:has(> div) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.details-list dd { overflow-wrap: anywhere; }
.stat-cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.offers-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); }
.service-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.services-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
.freight-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }

/* Wide matrices keep their columns and scroll inside the page. */
.table-responsive, .rates-grid-wrap {
    min-width: 0;
    max-width: 100%;
    overscroll-behavior-x: contain;
    scrollbar-width: auto;
}
.table-responsive:focus-visible, .rates-grid-wrap:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}
.table { overflow: visible; }
.table th { vertical-align: middle; }
.table td { overflow-wrap: break-word; }
/* Keep words at their natural minimum width in tables that still scroll.
   Emergency wrapping belongs to record content, never badges or controls. */
.table th { overflow-wrap: normal; word-break: normal; }
.table .btn, .table .badge, .table .status-badge {
    overflow-wrap: normal;
    word-break: normal;
    white-space: nowrap;
}
.customer-accounts-table td[data-label="E-mail"] { overflow-wrap: anywhere; min-width: 9rem; }
.parcels-table { min-width: 78rem; font-size: .875rem; }
.parcels-table th { font-size: .78rem; }
.parcels-table .cell-main, .parcels-table .cell-sub {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    min-width: 6rem;
    max-width: 14rem;
    line-height: 1.45;
}
.parcels-table .cell-sub { font-size: .8rem; }
.parcels-table .status-badge { font-size: .8rem; white-space: normal; }
.parcels-table .btn-sm { font-size: .82rem; }
@media (min-width: 768px) {
    .parcels-table td[data-label="Płatnik"] { min-width: 14rem; }
    .parcels-table td[data-label="Nadawca"], .parcels-table td[data-label="Odbiorca"],
    .parcels-table td[data-label="Zamówienie"] { min-width: 10rem; }
    .parcels-table td[data-label="List przewozowy"], .parcels-table td[data-label="Status"] { min-width: 12rem; }
    .parcels-table td.record-actions, .parcels-table th:last-child {
        position: sticky; right: 0; z-index: 2;
        background: #fff; box-shadow: -1px 0 #dce3ed; min-width: 4rem;
    }
    .parcels-table td[data-label="Zamówienie"], .parcels-table th:nth-child(2) {
        position: sticky; left: 0; z-index: 1;
        background: #fff; box-shadow: 1px 0 #dce3ed;
    }
}
.table-scroll-hint { color: #64748b; font-size: .8rem; margin: .35rem 0 .6rem; }

/* Menus inside scrolling tables must expand the row, otherwise the scroll
   container clips the last row's actions. */
.table .kebab[open] { display: block; }
.table .kebab-menu {
    position: static;
    width: max-content;
    max-width: 100%;
    min-width: 0;
    margin-top: .35rem;
    box-shadow: none;
}
.table .kebab-menu a, .table .kebab-menu button { white-space: normal; }
.modal-backdrop-custom { overflow-y: auto; }
.modal-panel, .modal-panel-wide, .cod-picker-panel, .raw-response-panel {
    min-width: 0;
    max-height: calc(100dvh - 2rem);
    overflow: auto;
    overscroll-behavior: contain;
}
.side-panel { height: 100dvh; max-width: 100%; }

@media (max-width: 1100px) {
    .detail-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1023.98px) {
    /* Standalone detail tables also need their own scroll area. */
    .content table:not(.mobile-records):not(.rates-grid) {
        display: block;
        max-width: 100%;
        overflow-x: auto;
    }
    .notif-panel {
        position: fixed;
        top: 8rem;
        left: 1rem;
        right: 1rem;
        width: auto;
        max-width: none;
        max-height: calc(100dvh - 9rem);
        overflow-y: auto;
    }
    .quote-sticky-bar { left: 0; }
}
@media (max-width: 767.98px) {
    .stat-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
    .stat-card { padding: .75rem; flex-direction: column; align-items: flex-start; gap: .5rem; }
    .stat-card .stat-delta { white-space: normal; }
    .stat-card .stat-label { font-size: .75rem; }
    .stat-card .stat-spark { display: none; }
    .toolbar, .toolbar-wide, .parcels-toolbar, .toolbar-customers {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: .85rem;
    }
    .form-grid, .form-grid-3, .tpl-editor .form-grid, .fees-grid,
    .compact-filters, .profile-form { grid-template-columns: minmax(0, 1fr); }
    .form-grid .span-2 { grid-column: auto; }
    .panel { padding: .9rem; }
    .page-header { gap: .65rem; }
    .page-header h1 { font-size: 1.55rem; }
    .page-header p { margin-bottom: .25rem; }
    .content .btn, .dialog-actions .btn, .kebab > summary {
        min-height: 2.75rem;
        padding: .55rem .75rem;
        font-size: .9rem;
        white-space: normal;
    }
    .content .form-control, .content .form-select { font-size: 1rem; min-height: 2.75rem; }
    .content .form-check-input { width: 1.35rem; height: 1.35rem; }
    .content .d-flex, .content .d-inline-flex { flex-wrap: wrap; }
    .content .btn, .content .badge, .content .status-badge { overflow-wrap: normal; word-break: normal; }
    .content .badge, .content .status-badge { white-space: normal; }
    .content table:not(.mobile-records) .btn,
    .content table:not(.mobile-records) th { white-space: nowrap; }
    .section-heading-row > .d-flex { width: 100%; }
    .section-heading-row > .d-flex > .btn { flex: 1 1 14rem; }
    .segmented { flex-wrap: wrap; }
    .offer-services-tip { left: 0; transform: none; max-width: calc(100vw - 4rem); }
    .quote-sticky-bar { padding-bottom: max(.7rem, env(safe-area-inset-bottom)); }
    .quote-layout { padding-bottom: calc(12rem + env(safe-area-inset-bottom)); }
    .table-responsive:has(> .mobile-records) { background: none; border: 0; box-shadow: none; overflow: visible; }
    .mobile-records.table { display: block; width: 100%; min-width: 0; background: none; }
    .mobile-records > tbody { display: grid; gap: .85rem; }
    .mobile-records > tbody > tr {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .75rem 1rem;
        padding: 1rem;
        background: #fff;
        border: 1px solid #dce3ed;
        border-radius: 12px;
        box-shadow: 0 1px 3px #0f172a08;
    }
    .mobile-records > tbody > tr.selected-row { border-color: #2563eb; background: #eff6ff; }
    .mobile-records > tbody > tr.table-danger { border-color: #f1bfc4; background: #fff1f2; }
    .mobile-records > tbody > tr.table-warning { border-color: #f3d58d; background: #fffbeb; }
    .mobile-records.record-stack > tbody > tr { grid-template-columns: minmax(0, 1fr); }
    .mobile-records > tbody > tr.invoice-overdue { border-left: 4px solid #dc2626; }
    .mobile-records.table > tbody > tr > td {
        display: block;
        padding: 0;
        border: 0;
        min-width: 0;
        width: auto;
        max-width: none;
        font-size: .9rem;
        text-align: left !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
        background: transparent;
        box-shadow: none;
    }
    .mobile-records td[data-label]::before {
        content: attr(data-label);
        display: block;
        margin-bottom: .2rem;
        color: #64748b;
        font-size: .75rem;
        font-weight: 600;
        line-height: 1.4;
    }
    .mobile-records td.record-primary, .mobile-records td.record-actions,
    .mobile-records td[colspan] { grid-column: 1 / -1; }
    .mobile-records tr:has(> td[colspan]) > td:not([colspan]) { display: none; }
    .mobile-records td.record-actions { border-top: 1px solid #e8edf4; padding-top: .65rem; }
    .mobile-records td.record-actions > .btn { margin: .2rem .2rem .2rem 0; }
    .mobile-records .cell-main, .mobile-records .cell-sub, .mobile-records .parcel-actions {
        min-width: 0;
        max-width: none;
        white-space: normal;
        overflow: visible;
    }
    /* Keep table headings available to assistive technology. Sorting and
       select-all stay visible and usable above the cards. */
    .mobile-records > thead { display: block; }
    .mobile-records > thead > tr { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .75rem; }
    .mobile-records > thead th:not([role="button"]):not(:has(input)) {
        position: absolute; width: 1px; height: 1px; padding: 0;
        overflow: hidden; clip-path: inset(50%); white-space: nowrap;
    }
    .mobile-records > thead th[role="button"], .mobile-records > thead th:has(input) {
        display: inline-flex; align-items: center; gap: .5rem;
        min-height: 2.75rem; padding: .5rem .65rem;
        border: 1px solid #dce3ed; border-radius: 8px;
        font-size: .8rem; text-transform: none; background: #fff;
        width: auto; white-space: normal;
    }
    .mobile-records > thead th:has(input)::after { content: "Zaznacz wszystkie"; }
    .table-scroll-hint:has(+ .table-responsive > .mobile-records) { display: none; }
}
@media (max-width: 359.98px) {
    .mobile-records > tbody > tr { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 479.98px) {
    .toolbar, .toolbar-wide, .parcels-toolbar, .toolbar-customers { grid-template-columns: minmax(0, 1fr); }
    .details-list { grid-template-columns: minmax(0, 1fr); gap: .2rem; }
    .details-list dd { margin-bottom: .7rem; }
    .modal-backdrop-custom { padding: .5rem; }
    .modal-panel, .modal-panel-wide, .cod-picker-panel { max-height: calc(100dvh - 1rem); padding: .9rem; }
    .dialog-actions > .btn, .pager > .btn { flex: 1 1 auto; }
    .service-tile { flex-wrap: wrap; }
    .cart-groups .cart-group { min-width: 0; width: 100%; }
}