/* ============================================================================
   Price list (Preçário) — line tabs as cards + detail panel.

   Shared by every tab (origin zones, destination zones, vehicle types,
   additional charges) through PriceListLineCards. Same arrangement as the load
   order's Occurrences, with its own class family so the price list does not
   depend on load-order.css. Tones are keyed by the card's kind class.
   ============================================================================ */

.price-list-lines-layout {
    display: grid;
    grid-template-columns: minmax(360px, 460px) minmax(0, 1fr);
    gap: 10px;
    align-items: stretch;
    min-height: 0;
}

.price-list-lines-list-pane {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    padding: 10px;
    border: 1px solid #dbe7f6;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(16, 42, 84, .05);
}

.price-list-lines-detail-pane {
    min-width: 0;
    overflow: auto;
}

.price-list-lines-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex: 0 0 auto;
}

.price-list-lines-search {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

.price-list-lines-search .oi {
    position: absolute;
    top: 50%;
    left: 9px;
    transform: translateY(-50%);
    color: #7d94b5;
    font-size: 12px;
    pointer-events: none;
}

.price-list-lines-search input {
    padding-left: 28px;
}

.price-list-lines-count {
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 600;
    color: #49658d;
    white-space: nowrap;
}

.price-list-lines-list {
    display: grid;
    gap: 10px;
    align-content: start;
    min-height: 0;
    overflow-y: auto;
}

/* ----- Tones, keyed by the line kind ----- */

.price-list-line-card,
.price-list-line-chip {
    --line-tone: #B4B2A9;
    --line-tone-soft: #F1EFE8;
    --line-tone-ink: #5F5E5A;
}

.price-list-line-card.is-origin-zone,
.price-list-line-chip.is-origin-zone {
    --line-tone: #185FA5;
    --line-tone-soft: #E6F1FB;
    --line-tone-ink: #0B4A85;
}

.price-list-line-card.is-destination-zone,
.price-list-line-chip.is-destination-zone {
    --line-tone: #1D9E75;
    --line-tone-soft: #EAF6F1;
    --line-tone-ink: #147053;
}

.price-list-line-card.is-vehicle-type,
.price-list-line-chip.is-vehicle-type {
    --line-tone: #534AB7;
    --line-tone-soft: #ECEAF8;
    --line-tone-ink: #3F3790;
}

.price-list-line-card.is-amount,
.price-list-line-chip.is-amount {
    --line-tone: #EF9F27;
    --line-tone-soft: #FAEEDA;
    --line-tone-ink: #854F0B;
}

.price-list-line-card.is-percentage,
.price-list-line-chip.is-percentage {
    --line-tone: #639922;
    --line-tone-soft: #EAF3DE;
    --line-tone-ink: #3B6D11;
}

/* ----- Cards ----- */

.price-list-line-card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 14px;
    border: 0.5px solid #dbe7f6;
    border-left: 3px solid var(--line-tone);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 4px rgba(6, 36, 93, .12);
    cursor: pointer;
}

.price-list-line-card:hover {
    box-shadow: 0 2px 8px rgba(6, 36, 93, .18);
}

.price-list-line-card.is-selected {
    border-color: var(--line-tone);
    background: var(--line-tone-soft);
    box-shadow: 0 2px 8px rgba(6, 36, 93, .22);
}

.price-list-line-card-main {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.price-list-line-badge {
    width: 25px;
    height: 25px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--line-tone-soft);
    color: var(--line-tone-ink);
    font-size: 12px;
    font-weight: 700;
    box-shadow: 0 1px 3px rgba(6, 36, 93, .25);
}

.price-list-line-card-copy {
    min-width: 0;
    display: grid;
    gap: 2px;
    text-align: left;
}

.price-list-line-card-title {
    font-size: 14px;
    font-weight: 600;
    color: #06245d;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.price-list-line-card-subtitle {
    font-size: 12px;
    color: #888780;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.price-list-line-card-side {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

.price-list-line-value {
    font-size: 14px;
    font-weight: 700;
    color: #06245d;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.price-list-line-chip {
    flex: 0 0 auto;
    padding: 2px 10px;
    border-radius: 20px;
    background: var(--line-tone-soft);
    color: var(--line-tone-ink);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.price-list-lines-icon-btn {
    width: 22px;
    height: 22px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #185FA5;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.price-list-lines-icon-btn:hover {
    background: #E6F1FB;
}

.price-list-lines-icon-btn.is-danger,
.price-list-lines-icon-btn.is-danger .oi {
    color: #d33a3a;
}

.price-list-lines-icon-btn.is-danger:hover {
    background: #FCEBEB;
}

.price-list-lines-add {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    border: 1.5px dashed #b9d2f4;
    border-radius: 12px;
    background: transparent;
    color: #185FA5;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.price-list-lines-add:hover {
    background: #f3f8ff;
    border-color: #185FA5;
}

.price-list-lines-empty-list {
    display: grid;
    justify-items: center;
    gap: 6px;
    padding: 24px 12px;
    border: 1.5px dashed #dbe7f6;
    border-radius: 12px;
    color: #6b7a90;
}

.price-list-lines-empty-list .oi {
    font-size: 18px;
    color: #b9d2f4;
}

.price-list-lines-empty-list strong {
    font-size: 13px;
    font-weight: 600;
}

/* ----- Detail panel ----- */

.price-list-line-detail {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 1px solid #dbe7f6;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(16, 42, 84, .05);
}

.price-list-line-detail-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px 0;
}

.price-list-line-detail-head > div:first-child {
    min-width: 0;
    flex: 1 1 auto;
}

.price-list-line-detail-title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #06245d;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.price-list-line-detail-head > div > span {
    font-size: 12px;
    color: #888780;
}

.price-list-line-section {
    padding: 14px 16px;
    border-top: 1px solid #eef3fa;
}

.price-list-line-section:first-child {
    border-top: 0;
}

.price-list-line-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    color: #6b7a90;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.price-list-line-section-title::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: #eef3fa;
}

.price-list-line-fields {
    display: grid;
    gap: 10px 14px;
    align-items: end;
}

.price-list-line-fields.is-two {
    grid-template-columns: 200px minmax(0, 1fr);
}

.price-list-line-fields.is-value {
    grid-template-columns: auto 160px minmax(0, 1fr);
}

.price-list-line-field {
    min-width: 0;
}

.price-list-line-field > label {
    display: block;
    margin-bottom: 3px;
    color: #49658d;
    font-size: 11.5px;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.price-list-line-field .form-control,
.price-list-line-field .ctlf4-Size-label,
.price-list-line-field .dxbl-text-edit,
.price-list-line-field .dxbl-spin-edit,
.price-list-line-field .ctlf4-native-editor {
    width: 100%;
    min-width: 0;
}

.price-list-line-field .form-control,
.price-list-line-field .dxbl-text-edit,
.price-list-line-field .ctlf4-native-editor {
    height: 32px;
    min-height: 32px;
    border: 1px solid #d5e1f0 !important;
    border-radius: 8px !important;
    background: #fff !important;
    box-shadow: none !important;
    color: #06245d;
    font-size: 13px;
    font-weight: 600;
}

.price-list-line-field .form-control:focus,
.price-list-line-field .dxbl-text-edit:focus-within,
.price-list-line-field .ctlf4-native-combobox:focus-within .ctlf4-native-editor {
    border-color: #185FA5 !important;
    box-shadow: 0 0 0 3px rgba(24, 95, 165, .12) !important;
}

.price-list-line-field .form-control[readonly] {
    background: #f6f8fc !important;
    color: #49658d;
}

/* Numbers right-aligned, as in the grids. */
.price-list-line-field .dxbl-spin-edit input {
    text-align: right;
}

/* Valor / Percentagem as one segmented control. */
.price-list-line-type-switch {
    display: inline-flex;
    height: 32px;
    border: 1px solid #d5e1f0;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

.price-list-line-type-switch button {
    height: 100%;
    padding: 0 14px;
    border: 0;
    background: transparent;
    color: #49658d;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.price-list-line-type-switch button + button {
    border-left: 1px solid #d5e1f0;
}

.price-list-line-type-switch button.active {
    background: #06245d;
    color: #fff;
}

.price-list-line-type-switch button:focus-visible {
    outline: 2px solid #185FA5;
    outline-offset: -2px;
}

/* The applied value: a result, not a disabled field. */
.price-list-line-field.is-total {
    align-self: end;
}

.price-list-line-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    height: 32px;
    padding: 0 11px;
    border: 1px solid #cfe0f5;
    border-radius: 8px;
    background: #f4f9ff;
}

.price-list-line-total span {
    color: #49658d;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.price-list-line-total strong {
    font-size: 15px;
    font-weight: 700;
    color: #06245d;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.price-list-line-detail-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid #eef3fa;
    background: #fbfdff;
    border-radius: 0 0 8px 8px;
}

.price-list-line-detail-empty {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 8px;
    min-height: 220px;
    padding: 24px;
    border: 1.5px dashed #dbe7f6;
    border-radius: 12px;
    background: #fff;
    text-align: center;
}

.price-list-line-detail-empty .oi {
    font-size: 22px;
    color: #b9d2f4;
}

.price-list-line-detail-empty strong {
    font-size: 15px;
    font-weight: 700;
    color: #06245d;
}

.price-list-line-detail-empty span {
    font-size: 13px;
    color: #888780;
}

@media (max-width: 1100px) {
    .price-list-lines-layout {
        grid-template-columns: 1fr;
    }

    .price-list-line-fields.is-value {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .price-list-line-field.is-total {
        grid-column: 1 / -1;
    }
}