@import '_content/MasterDataUI.Components/MasterDataUI.Components.6zvsyd9xqd.bundle.scp.css';
@import '_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.84wtju4z0n.bundle.scp.css';
@import '_content/SharedUI.Components/SharedUI.Components.t9bxvegwvs.bundle.scp.css';

/* /Components/DeliveryModeSelector.razor.rz.scp.css */
.delivery-mode-seg[b-nabuav3m15] {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    padding: 3px;
    gap: 2px;
    background: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 8px;
}

.seg-btn[b-nabuav3m15] {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    background: transparent;
    padding: 6px 12px;
    border-radius: 6px;
    color: var(--neutral-foreground-hint);
    font-family: inherit;
    font-size: var(--type-ramp-base-font-size);
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
}

.seg-btn svg[b-nabuav3m15] {
    flex: 0 0 auto;
}

.seg-btn.active[b-nabuav3m15] {
    background: var(--neutral-layer-1);
    color: var(--accent-foreground-rest);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}

.seg-btn:focus-visible[b-nabuav3m15] {
    outline: 2px solid var(--accent-fill-rest);
    outline-offset: 1px;
}
/* /Components/DetailsDrawer.razor.rz.scp.css */
.details-drawer[b-ie4hstbsza] {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    /* Responsive sweet spot: wide enough for a multi-column packages table to
       breathe, capped so the non-modal drawer never swallows the grid behind. */
    width: clamp(900px, 66vw, 1200px);
    max-width: 94vw;
    background-color: var(--neutral-layer-1);
    box-shadow: -4px 0 16px rgba(0, 0, 0, 0.18);
    z-index: 998;
    display: flex;
    flex-direction: column;
    animation: details-drawer-slide-in-b-ie4hstbsza 0.18s ease-out;
}

@keyframes details-drawer-slide-in-b-ie4hstbsza {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }
}

.details-drawer__header[b-ie4hstbsza] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
    flex: 0 0 auto;
}

.details-drawer__header h3[b-ie4hstbsza] {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
}

.details-drawer__body[b-ie4hstbsza] {
    padding: 12px 20px 24px;
    overflow-y: auto;
    flex: 1 1 auto;
}

/* Packages grid inside the drawer: FluentDataGrid truncates header titles
   (.col-title-text) and data cells (td) with ellipsis by default. Override so
   they wrap and stay fully readable in the panel width. */
.details-drawer__body[b-ie4hstbsza]  .packages-grid .col-title-text,
.details-drawer__body[b-ie4hstbsza]  .packages-grid td {
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    line-height: 1.25;
}

.details-drawer__body[b-ie4hstbsza]  .packages-grid .col-sort-button {
    width: 100% !important;
    overflow: hidden !important;
    text-overflow: clip !important;
}

/* Tighter horizontal padding so all columns fit without crowding. */
.details-drawer__body[b-ie4hstbsza]  .packages-grid td,
.details-drawer__body[b-ie4hstbsza]  .packages-grid .col-title {
    padding-left: 8px !important;
    padding-right: 8px !important;
}

/* Wrapped header titles: top-align every header cell's content so the first line
   of single- and multi-line headers sits on the same baseline (no "stairs"), and
   the second line gets room instead of crowding the divider. The header cell is
   stretched to the row height, so make it a top-aligned column flexbox. */
.details-drawer__body[b-ie4hstbsza]  .packages-grid th {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    height: auto !important;
}

.details-drawer__body[b-ie4hstbsza]  .packages-grid .col-title {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

/* Let status badges grow and wrap instead of clipping their text. The badge
   box lives in shadow DOM, so pierce it via ::part(control). */
.details-drawer__body[b-ie4hstbsza]  .packages-grid fluent-badge,
.details-drawer__body[b-ie4hstbsza]  .packages-grid fluent-badge::part(control) {
    white-space: normal !important;
    height: auto !important;
    min-height: unset !important;
}
/* /Components/PointPicker.razor.rz.scp.css */
.point-slot[b-qfq58972qr] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    border: 1.5px dashed var(--neutral-stroke-rest);
    border-radius: 8px;
    background: var(--neutral-layer-1);
    cursor: pointer;
}

.point-slot:hover[b-qfq58972qr] {
    border-color: var(--accent-fill-rest);
}

.point-slot:focus-visible[b-qfq58972qr] {
    outline: 2px solid var(--accent-fill-rest);
    outline-offset: 2px;
}

.point-slot.ready[b-qfq58972qr] {
    border-style: solid;
    border-color: var(--accent-fill-rest);
    background: color-mix(in srgb, var(--accent-fill-rest) 8%, transparent);
}

.ps-icon[b-qfq58972qr] {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--neutral-layer-2);
    display: grid;
    place-items: center;
    color: var(--neutral-foreground-hint);
}

.point-slot.ready .ps-icon[b-qfq58972qr] {
    background: var(--neutral-layer-1);
    color: var(--accent-fill-rest);
}

.ps-text[b-qfq58972qr] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.ps-title[b-qfq58972qr] {
    font-weight: 600;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.ps-sub[b-qfq58972qr] {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
    overflow-wrap: anywhere;
}

.point-slot.ready .ps-sub[b-qfq58972qr] {
    color: var(--neutral-foreground-rest);
}

.ps-cta[b-qfq58972qr] {
    margin-left: auto;
    flex: 0 0 auto;
}

.point-sel[b-qfq58972qr] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 14px;
    border: 1px solid var(--neutral-stroke-rest);
    border-left-width: 4px;
    border-radius: 8px;
    background: var(--neutral-layer-1);
}

.point-sel.apm[b-qfq58972qr] {
    border-left-color: #16a34a;
}

.point-sel.pudo[b-qfq58972qr] {
    border-left-color: #2563eb;
}

.ps-dist[b-qfq58972qr] {
    color: #d97706;
    font-weight: 600;
}
/* /Components/PointPickerDialog.razor.rz.scp.css */
.type-chips[b-7uiq43jjlk] {
    display: inline-flex;
    gap: 6px;
}

.picker-layout[b-7uiq43jjlk] {
    display: flex;
    gap: 10px;
    width: 100%;
}

.picker-list[b-7uiq43jjlk] {
    flex: 0 0 320px;
    max-height: 580px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-right: 2px;
}

.picker-map[b-7uiq43jjlk] {
    flex: 1;
    height: 580px;
    min-width: 480px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 4px;
}

@media (max-width: 900px) {
    .picker-layout[b-7uiq43jjlk] {
        flex-direction: column;
    }

    .picker-list[b-7uiq43jjlk] {
        flex: none;
        max-height: 240px;
        order: 2;
    }

    .picker-map[b-7uiq43jjlk] {
        width: 100%;
        min-width: 0;
        height: 420px;
    }
}

.point-row[b-7uiq43jjlk] {
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 6px;
    padding: 8px 10px;
    background: var(--neutral-layer-1);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.point-row:hover[b-7uiq43jjlk] {
    background: var(--neutral-layer-2);
}

.point-row-head[b-7uiq43jjlk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.point-row-name[b-7uiq43jjlk] {
    font-weight: 600;
    font-size: 13px;
    overflow-wrap: anywhere;
}

.point-row-addr[b-7uiq43jjlk] {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
}

.point-row-foot[b-7uiq43jjlk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.point-row-dist[b-7uiq43jjlk] {
    font-size: 12px;
    font-weight: 600;
    color: var(--accent-foreground-rest);
}

.picker-legend[b-7uiq43jjlk] {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--neutral-foreground-hint);
    width: 100%;
}

.legend-item[b-7uiq43jjlk] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.legend-count[b-7uiq43jjlk] {
    margin-left: auto;
}

.point-row-badges[b-7uiq43jjlk] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.point-status-badge[b-7uiq43jjlk] {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
}

.point-status-badge.overloaded[b-7uiq43jjlk] {
    background: #fef3c7;
    color: #b45309;
}

.point-status-badge.failure[b-7uiq43jjlk] {
    background: #fee2e2;
    color: #b91c1c;
}
/* /Pages/AddShipment.razor.rz.scp.css */
.addshipment-page[b-iq2ijkfa43] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
    container-type: inline-size;
}

.addshipment-page h2[b-iq2ijkfa43] {
    margin: 0;
}

/* Three left-aligned columns: sender/recipient, service/packages, pickup.
   Container queries measure the content area, not the viewport, so the space
   taken by the navigation menu is accounted for. Free space is shared equally
   between the minmax(0, Npx) tracks; below ~1560px the sender column would drop
   under ~520px, where the address grid (Country/Postcode/City) squeezes, so the
   pickup area wraps under the service column. Below ~1100px everything stacks.
   The pickup track is reserved even while its column is not rendered yet, so
   columns 1 and 2 keep their width when it appears after the service is chosen. */
.addshipment-layout[b-iq2ijkfa43] {
    display: grid;
    grid-template-columns: minmax(0, 560px) minmax(0, 760px) minmax(0, 440px);
    grid-template-areas: "sender service pickup";
    gap: 16px;
    align-items: start;
    width: 100%;
}

@container (max-width: 1559px) {
    .addshipment-layout[b-iq2ijkfa43] {
        grid-template-columns: minmax(0, 560px) minmax(0, 760px);
        grid-template-areas:
            "sender service"
            "sender pickup";
    }
}

@container (max-width: 1099px) {
    .addshipment-layout[b-iq2ijkfa43] {
        grid-template-columns: minmax(0, 760px);
        grid-template-areas:
            "sender"
            "service"
            "pickup";
    }
}

.addshipment-col-sender[b-iq2ijkfa43] {
    grid-area: sender;
}

.addshipment-col-service[b-iq2ijkfa43] {
    grid-area: service;
}

.addshipment-col-pickup[b-iq2ijkfa43] {
    grid-area: pickup;
}

.addshipment-col[b-iq2ijkfa43] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

[b-iq2ijkfa43] fluent-option[disabled] {
    opacity: 1 !important;
}

/* FAST sets max-height inline on the listbox, so !important is required */
[b-iq2ijkfa43] fluent-select#service-select::part(listbox) {
    max-height: 320px !important;
    overflow-y: auto !important;
}

[b-iq2ijkfa43] .service-group-header {
    font-weight: 600;
    font-size: 0.85em;
    color: var(--neutral-foreground-hint);
}

[b-iq2ijkfa43] .service-group-item {
    padding-left: 12px;
}

/* /Pages/Settings.razor.rz.scp.css */
/* Kafelki wyboru domyślnego nadawcy — zamiast tabeli.
   Cały kafelek jest klikalny (ustawia domyślnego), wybrany ma akcentową
   ramkę + badge; podpowiedź akcji pojawia się przy hover. */
.sender-tiles[b-b4stop3t1u] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;
    max-width: 640px;
}

.sender-tile[b-b4stop3t1u] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 8px;
    background: var(--neutral-layer-1);
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

.sender-tile:hover[b-b4stop3t1u] {
    background: var(--neutral-layer-2);
    border-color: var(--accent-fill-rest);
}

.sender-tile.selected[b-b4stop3t1u] {
    border: 2px solid var(--accent-fill-rest);
    padding: 13px 15px; /* kompensacja grubszej ramki */
    background: color-mix(in srgb, var(--accent-fill-rest) 8%, transparent);
    cursor: default;
}

.sender-tile-info[b-b4stop3t1u] {
    flex: 1;
    min-width: 0;
}

.sender-tile-name[b-b4stop3t1u] {
    font-weight: 600;
}

.sender-tile-address[b-b4stop3t1u] {
    color: var(--neutral-foreground-hint);
    font-size: 0.9em;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sender-tile-hint[b-b4stop3t1u] {
    color: var(--accent-foreground-rest);
    font-size: 0.85em;
    opacity: 0;
    transition: opacity .15s ease;
    white-space: nowrap;
}

.sender-tile:hover .sender-tile-hint[b-b4stop3t1u] {
    opacity: 1;
}