.addresses-layout {
    grid-template-columns: minmax(340px, .85fr) minmax(0, 1.65fr)
}

.addresses-page .profile-list-title>span {
    font-size: 8px;
    white-space: nowrap
}

.address-tree-panel {
    max-height: 560px;
    overflow: auto;
    margin: 0 -6px;
    padding: 0 6px
}

.address-tree {
    list-style: none;
    margin: 0;
    padding: 0
}

.address-tree .address-tree {
    padding-left: 18px;
    border-left: 1px dashed var(--border);
    margin-left: 12px
}

.tree-row {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 0;
    border-radius: var(--radius)
}

.tree-row.selected {
    background: var(--primary-faint)
}

.tree-row.selected::after {
    content: "";
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    margin: 0 6px 0 2px;
    background: var(--blue);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat
}

.tree-row.inactive strong {
    color: var(--text-faint);
    text-decoration: line-through
}

.tree-toggle {
    border: 0;
    background: none;
    color: var(--text-muted);
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-sm);
    flex-shrink: 0
}

.tree-toggle:hover:not(:disabled) {
    background: var(--hover);
    color: var(--blue)
}

.tree-toggle:disabled {
    opacity: .3
}

.tree-spacer {
    width: 24px;
    flex-shrink: 0
}

.tree-label {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 0;
    background: none;
    text-align: left;
    padding: 7px 6px;
    border-radius: var(--radius);
    color: var(--text-2)
}

.tree-label:hover {
    background: var(--hover)
}

.tree-label strong {
    font-size: 11px;
    font-weight: 700;
    overflow-wrap: anywhere
}

.tree-label small {
    font-size: 9px;
    color: var(--text-faint);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.tree-level.level-0 {
    background: var(--accent-soft);
    color: var(--accent-text)
}

.tree-level.level-1 {
    background: var(--primary-faint);
    color: var(--primary-text)
}

.tree-level.level-2 {
    background: var(--purple-faint);
    color: var(--purple-text)
}

.tree-level.level-3 {
    background: var(--success-soft);
    color: var(--success-text)
}

.tree-loading {
    font-size: 9px;
    color: var(--text-faint);
    margin: 6px 0 6px 30px
}

.address-tabs {
    display: flex;
    gap: 6px;
    border-bottom: 1px solid var(--border-subtle);
    margin: -4px 0 20px;
    padding-bottom: 12px
}

.address-tabs button {
    display: flex;
    align-items: center;
    gap: 6px;
    border: 1px solid transparent;
    background: none;
    color: var(--text-muted);
    border-radius: var(--radius)
}

.address-tabs button.active {
    background: var(--accent-soft);
    color: var(--accent-text);
    border-color: var(--accent-border)
}

.address-tabs button:disabled {
    opacity: .45
}

.address-help {
    font-size: 9px;
    line-height: 1.7;
    color: var(--text-faint);
    margin: 0 0 16px
}

.address-notice {
    font-size: 10px;
    line-height: 1.6;
    color: var(--primary-text);
    background: var(--primary-faint);
    border: 1px solid var(--primary-border);
    border-radius: var(--radius);
    padding: 10px 12px;
    margin: -4px 0 16px
}

.segment-list {
    display: grid;
    gap: 6px
}

.segment-row,
.segment-head {
    display: grid;
    grid-template-columns: 70px 140px minmax(0, .7fr) minmax(0, .7fr) minmax(0, 1.6fr);
    gap: 8px;
    align-items: center;
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0
}

.segment-legend {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap
}

.segment-level {
    justify-self: start
}

.segment-head {
    margin-bottom: 6px;
    font-size: 8px;
    font-weight: 600;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--text-faint)
}

.segment-row .segment-wide {
    grid-column: 3/6
}

.segment-row .profile-name-input {
    background: var(--field-bg)
}

.segment-row .profile-name-input[aria-invalid=true] {
    border-color: var(--danger-border);
    background: var(--danger-faint)
}

.segment-row .profile-name-input.is-suggested {
    color: var(--text-muted);
    font-style: italic
}

.segment-row .profile-name-input.is-locked,
.segment-row select.profile-name-input:disabled {
    background: var(--surface-2);
    color: var(--text-muted);
    cursor: not-allowed
}

.address-preview-description {
    flex-basis: 100%;
    font-size: 9px;
    color: var(--text-muted)
}

.segment-error {
    grid-column: 1/-1;
    font-size: 9px;
    line-height: 1.5;
    color: var(--danger-text)
}

.address-preview {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    padding: 12px;
    border-radius: var(--radius);
    background: var(--primary-faint);
    border: 1px solid var(--primary-border);
    font-size: 10px;
    color: var(--text-2)
}

.address-preview strong {
    font-size: 11px;
    color: var(--primary-text)
}

.address-preview span {
    overflow-wrap: anywhere;
    font-family: ui-monospace, monospace
}

.address-preview.is-over {
    background: var(--danger-faint);
    border-color: var(--danger-border)
}

.address-preview.is-over strong {
    color: var(--danger-text)
}

.address-path {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px
}

.address-path-item {
    display: inline-flex;
    align-items: center;
    gap: 5px
}

.address-path-item strong {
    font-size: 11px;
    color: var(--text-2)
}

.address-path-item em {
    font-style: normal;
    color: var(--text-placeholder);
    margin-left: 1px
}

.address-full {
    font-size: 10px;
    color: var(--text-2);
    margin: 0 0 16px
}

.address-full strong {
    font-family: ui-monospace, monospace;
    font-size: 12px;
    color: var(--primary-text)
}

.address-remove:disabled {
    opacity: .45
}

.address-danger:disabled {
    opacity: .6
}

@media(max-width:1000px) {
    .addresses-layout {
        grid-template-columns: 1fr
    }

    .address-tree-panel {
        max-height: 360px
    }
}

.address-warehouse-field {
    margin-bottom: 14px
}

.tree-warehouse {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: var(--primary-text)
}

.address-readonly {
    display: grid;
    justify-items: center;
    text-align: center;
    gap: 8px;
    padding: 40px 24px;
    color: var(--text-muted);
    border: 1px dashed var(--border);
    border-radius: var(--radius-lg)
}

.address-readonly svg {
    color: var(--primary-text)
}

.address-readonly strong {
    font: 700 13px 'Manrope', sans-serif;
    color: var(--text-2)
}

.address-readonly p {
    font-size: 10px;
    line-height: 1.6;
    margin: 0;
    max-width: 360px
}

@media(max-width:720px) {
    .segment-head {
        display: none
    }

    .segment-row {
        grid-template-columns: 1fr 1fr
    }

    .segment-row .segment-level,
    .segment-row>select:first-of-type,
    .segment-row .segment-wide,
    .segment-row .segment-description {
        grid-column: 1/-1
    }
}

.address-full-input {
    font-family: ui-monospace, monospace;
    color: var(--primary-text) !important
}

.address-edit-description {
    margin-top: 12px
}

.address-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px
}

.address-action {
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: var(--field-radius);
    padding: 8px 12px;
    min-height: var(--field-height);
    color: var(--text-muted);
    cursor: pointer
}

.address-action svg {
    flex-shrink: 0
}

.address-action strong {
    display: block;
    font-size: 10px;
    font-weight: 600
}

.address-action small {
    display: block;
    font-size: 8px;
    color: var(--text-faint);
    margin-top: 2px;
    line-height: 1.35
}

@media(max-width:560px) {
    .address-actions {
        grid-template-columns: 1fr
    }
}

.address-bulk-title {
    display: flex;
    align-items: center;
    gap: 7px;
    font: 700 13px 'Manrope', sans-serif;
    color: var(--text-2);
    margin: 0 0 14px
}

.address-bulk-title svg {
    color: var(--orange)
}

.bulk-list {
    display: grid;
    gap: 6px;
    margin-bottom: 12px
}

.bulk-row {
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr);
    gap: 8px;
    align-items: center
}

.bulk-row .tree-level {
    justify-self: start
}

.bulk-capacity {
    display: block;
    font-size: 9px;
    color: var(--text-muted);
    margin-top: 6px
}

.bulk-capacity strong {
    color: var(--primary-text);
    font-family: ui-monospace, monospace
}

.address-confirm.is-info {
    border-color: var(--primary-border);
    background: var(--primary-faint)
}

.address-confirm.is-info strong {
    color: var(--primary-text)
}

.address-confirm.is-info p {
    color: var(--text-2)
}

.address-confirm div {
    flex-wrap: wrap
}

.address-status-hint {
    margin: 10px 0 0
}

.tree-label small.tree-type {
    flex-shrink: 0;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .3px;
    color: var(--primary-text);
    background: var(--primary-faint);
    padding: 2px 6px;
    border-radius: var(--radius-sm)
}

.tree-label small.tree-type.is-pending {
    color: var(--warning-text);
    background: var(--warning-soft)
}

/* Tree rows of Endereçamento with the occupancy bars (Blazor, 2026-10-09, wms-addresses). Zona, Rua, Bloco and Nível keep one line: the code never
   wraps (ellipsis, full text in its title), the description takes only the space left (it goes first) and chips, status and child count never shrink.
   The apartment is a two-line row (wms-ui "Linha de lista em duas linhas", inside the tree): the level chip centred on both lines, the full address
   alone on line 1 (it used to wrap into 2-3 lines beside the type and description), type, description and status on line 2, and the bar
   (.tree-occupancy, OccupancyBar, outside the button) at the end of line 2. Scoped to the page: the permission tree of Perfis and the address lookup
   dialog reuse these classes. The panel ignores the width of its content (contain): the codes that no longer wrap would otherwise widen the page on
   the phone (wms-ui, "Árvore com caixas de marcar", armadilha 2), and the indentation per level is shorter here (8px after the dashed line). */
.addresses-page .address-tree-panel {
    contain: inline-size
}

.addresses-page .address-tree .address-tree {
    padding-left: 8px
}

.addresses-page .address-tree-panel .tree-label strong {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow-wrap: normal
}

.addresses-page .address-tree-panel .tree-label small.tree-description {
    flex: 1 1 0;
    min-width: 0
}

.addresses-page .address-tree-panel .tree-label>.tree-level,
.addresses-page .address-tree-panel .tree-label>i,
.addresses-page .address-tree-panel .tree-label>em {
    flex-shrink: 0
}

.addresses-page .tree-row>.tree-occupancy {
    margin-right: 6px
}

.addresses-page .tree-row.is-two-line {
    position: relative
}

.addresses-page .tree-lines {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px
}

.addresses-page .tree-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    min-height: 14px
}

.addresses-page .tree-meta>small.tree-type {
    flex-shrink: 1;
    min-width: 24px
}

.addresses-page .tree-meta>i {
    flex-shrink: 0
}

/* Room for the bar at the end of line 2; the bar is centred on that line (row padding 2px + button padding 7px + half of the 14px line). */
.addresses-page .tree-row.is-two-line.has-occupancy .tree-meta {
    padding-right: 80px
}

.addresses-page .tree-row.is-two-line>.tree-occupancy {
    position: absolute;
    right: 12px;
    bottom: 16px;
    transform: translateY(50%);
    margin: 0
}

.addresses-page .tree-row.is-two-line>.tree-occupancy .occupancy-track {
    width: 30px
}

.addresses-page .tree-row.is-two-line.selected>.tree-occupancy {
    right: 34px
}

/* Narrow screens: the dashed line closer to the parent and a shorter track on one-line rows. */
@media(max-width:640px) {
    .addresses-page .address-tree .address-tree {
        margin-left: 8px
    }

    .addresses-page .tree-row:not(.is-two-line)>.tree-occupancy .occupancy-track {
        width: 30px
    }
}

/* Side of the aisle and walking sequence (2026-10-10, wms-addresses): the side chip of a bay row ("Ímpar" blue, "Par" purple, the tree-type chip size,
   never shrinking: the description goes first), the "Seq. 120" of the apartment line 2 (plain, tabular digits) and the preview list of "Gerar
   sequência" (number, address with ellipsis, side chip, current number). */
.tree-label small.tree-side,
.sequence-preview small.tree-side {
    flex-shrink: 0;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .3px;
    padding: 2px 6px;
    border-radius: var(--radius-sm)
}

.tree-side.is-odd {
    color: var(--blue);
    background: var(--blue-tint)
}

.tree-side.is-even {
    color: var(--purple);
    background: var(--purple-tint)
}

.addresses-page .tree-meta>small.tree-sequence {
    flex-shrink: 0;
    font-weight: 700;
    color: var(--text-2);
    font-variant-numeric: tabular-nums
}

.address-side-field,
.address-sequence-field {
    margin-top: 10px
}

.address-side-field>small.address-help,
.address-sequence-field>small.address-help {
    display: block;
    margin-top: 4px
}

.address-side-differs {
    color: var(--warning-text)
}

.sequence-preview {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
    max-height: 320px;
    overflow-y: auto
}

.sequence-preview li {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 4px 6px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    color: var(--text-2)
}

.sequence-preview li:nth-child(odd) {
    background: var(--hover)
}

.sequence-preview li strong {
    flex: 0 0 64px;
    text-align: right;
    font-variant-numeric: tabular-nums
}

.sequence-preview li span {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.sequence-preview li em {
    flex-shrink: 0;
    font-size: 10px;
    color: var(--text-faint)
}

/* "Imprimir etiquetas" (2026-10-10, wms-addresses): the context menu of a tree row and its dialog. The menu opened by the pointer is fixed at the
   position the server wrote in --menu-x/--menu-y and kept inside the viewport; opened by the keyboard without a position it sits under the row (the li
   is its containing block). The transparent backdrop below it closes it on a click, right click, wheel or touch outside (and wms.js on any scroll); it
   is above the side menu (30/35) and below the lookup overlay of the dialog (100). The rows do not show the iOS callout of a long press. */
.addresses-page .address-tree-panel .tree-row {
    -webkit-touch-callout: none
}

.addresses-page .address-tree li {
    position: relative
}

.addresses-page .tree-row.has-menu {
    background: var(--hover)
}

.tree-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 40
}

.tree-menu {
    position: fixed;
    z-index: 41;
    left: min(var(--menu-x, 0px), calc(100vw - 214px));
    top: min(var(--menu-y, 0px), calc(100vh - 52px));
    min-width: 200px;
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: 0 12px 32px var(--shadow)
}

.tree-menu.is-anchored {
    position: absolute;
    left: 28px;
    top: 100%
}

.tree-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: var(--field-height);
    padding: 0 10px;
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--text);
    font: inherit;
    font-size: var(--field-font);
    text-align: left;
    cursor: pointer
}

.tree-menu-item:hover,
.tree-menu-item:focus-visible {
    background: var(--primary-faint);
    color: var(--primary-text);
    outline: none
}

.address-labels-dialog {
    width: min(500px, 100%);
    overflow-y: auto
}

.address-labels-target {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0
}

.address-labels-target strong {
    font-size: 14px;
    color: var(--text);
    overflow-wrap: anywhere
}

.address-labels-target small,
.address-labels-target span {
    font-size: 10px;
    line-height: 1.5;
    color: var(--text-muted)
}

.address-labels-formats {
    display: grid;
    gap: 6px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0
}

.address-labels-formats legend {
    margin-bottom: 6px;
    padding: 0;
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted)
}

.address-labels-dialog .address-notice {
    margin: 0
}

.address-labels-dialog .address-notice.is-warning {
    color: var(--warning-text);
    background: var(--warning-faint);
    border-color: var(--warning-border)
}

.address-labels-dialog .profile-form-footer {
    margin-top: 2px
}

/* The PDF shown in the dialog (2026-10-10): the dialog widens and the frame takes most of the height of the window. */
.address-labels-dialog.has-viewer {
    width: min(1100px, 100%);
    max-height: 94vh
}

.lookup-overlay:has(.address-labels-dialog.has-viewer) {
    padding-top: 3vh
}

.address-labels-viewer {
    min-height: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden
}

.address-labels-viewer iframe {
    display: block;
    width: 100%;
    height: 62vh;
    border: 0
}

.address-labels-viewer-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end
}

.address-labels-viewer-actions a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none
}