@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.xvjn5d5jgp.bundle.scp.css';

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

/* Dwie kolumny wyrównane do lewej — druga (serwis/paczki) szersza od pierwszej
   (nadawca/odbiorca). Poniżej ~1100px szerokości kontenera układ łamie się
   do jednej kolumny (container query mierzy treść, nie viewport — uwzględnia
   miejsce zajęte przez menu nawigacji). Pierwsza kolumna nie może być węższa
   niż ~520px, bo siatka adresowa (Kraj/Kod pocztowy/Miasto) się ściska. */
.addshipment-layout[b-iq2ijkfa43] {
    display: grid;
    grid-template-columns: minmax(0, 560px) minmax(0, 760px);
    gap: 16px;
    align-items: start;
    width: 100%;
}

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

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

[b-iq2ijkfa43] fluent-option[disabled] {
    opacity: 1 !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;
}