@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

/* reset */
/** {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}*/

/* Font-family is now set in theme.css (Inter). */

/*--------- FuelerLinx custom styles ---------*/
.fl-form-field-container {
    min-height: 32px;
}

.highlighted {
    background-color: yellow;
}

/*--------- Theme specific overrides ---------*/

/* colors */
:root {
    --rz-white: #ffffff;
    --rz-black: #000000;
    --rz-primary: #0260c5;
    --rz-secondary: #9e9e9e;
    --rz-info: #03a9f4;
    --rz-success: #4caf50;
    --rz-warning: #ff9a03;
    --rz-danger: #ff0000;
}

/* switch */
:root {
    /* Radzen's stock checked track is var(--rz-primary-lighter) (#e7f0fb), which is almost
       the same colour as a selected grid row - an "on" switch then reads as a bare thumb
       with no track at all. Darkened to a light tint of the thumb's indigo so the track
       stays visible on white rows, selected rows and cards alike. */
    --rz-switch-checked-background-color: #b3b2ec;
}

/* input */
:root {
    --rz-input-font-size: 0.75rem;
    --rz-input-value-color: #212529;
    --rz-input-background-color: #ffffff;
    --rz-input-height: 2rem;
    --rz-body-line-height: 1rem;
    --rz-numeric-input-padding: 0.4375rem;
}

/* text */
:root {
    --rz-text-font-family: 'Roboto', sans-serif;
    --rz-text-h6-font-weight: 600;
    --rz-icon-size: 1.3rem;
    --rz-text-body1-font-size: 0.8rem;
    --rz-text-body1-margin-bottom: 0;
    --rz-text-body2-font-size: 0.8rem;
    --rz-text-body2-margin-bottom: 0;
    --rz-text-body3-font-size: 0.625rem;
}

/* grid */
:root {
    --rz-grid-cell-padding: 0.35rem 0.75rem;
    --rz-grid-header-font-weight: 600;
    --rz-grid-cell-font-size: 0.75rem;
    --rz-grid-header-title-padding-inline: 1rem 0.2rem;
    /*  --rz-grid-header-font-size: 0.875rem;
*/
}

/* RadzenSwitch inside any DataGrid cell.
   Radzen's Material switch is a thin 2.25rem x 0.875rem track with a 1.25rem knob
   centred on it (top: 50% + margin-block-start: -0.625rem), so the knob deliberately
   overhangs the track by 3px above and below. Radzen also wraps every DataGrid cell's
   content in .rz-cell-data.rz-text-truncate (overflow: hidden) to get ellipsis
   behaviour, and that shears the overhang off - the switch renders with a flattened
   top and bottom. Outside a grid (forms, settings panels) there is no such wrapper,
   which is why only grid switches look clipped.
   :has() keeps this to cells that actually contain a switch, so text cells keep their
   truncation. The selector deliberately mirrors Radzen's own
   ".rz-grid-table td .rz-cell-data" shape - a bare ".rz-cell-data:has(...)" loses to it
   on specificity (0,2,0 vs 0,2,1) and silently does nothing. */
.rz-datatable-data td .rz-cell-data:has(.rz-switch),
.rz-grid-table td .rz-cell-data:has(.rz-switch) {
    overflow: visible;
}

/* trip grid headers */
.trip-grid {
    --rz-grid-header-title-padding-inline: 0 0.2rem;
}

.trip-grid .rz-data-row {
    cursor: pointer;
}

.trip-grid .rz-grid-table th {
    background-color: #f0f0f0;
}

.trip-grid .rz-grid-table .rz-column-title {
    color: #3b3b3b !important;
    font-size: 0.875rem;
    font-weight: 700;
    text-align: left !important;
    justify-content: flex-start !important;
    padding-inline-start: 0 !important;
}

.rz-expanded-row-content .rz-expanded-row-content,
.rz-dialog-content .rz-expanded-row-content {
    --rz-grid-detail-template-background-color: var(--rz-base-50);
}

.grid-with-expand-button {
    position: relative;
}

.savings-pill-overlay {
    position: absolute;
    top: 2.2rem;
    transform: translateY(-50%);
    right: 1rem;
    z-index: 105;
}

.expand-trips-button-wrapper,
.expand-legs-button-wrapper {
    position: absolute;
    top: 5rem;
    left: 0.125rem;
    z-index: 10;
}

/* .rz-data-grid-data is the true scroll container inside Radzen's DataGrid.
   Constraining it (not the outer wrapper) keeps the column picker naturally
   pinned above the scroll area and makes thead th sticky within it. */
.leg-grid-scroll-container .rz-data-grid-data {
    max-height: calc(100vh - 300px);
}

.leg-grid-scroll-container .rz-grid-table thead th {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: #f0f0f0;
}

.leg-grid-scroll-container tr.leg-row-expanded > td {
    position: sticky;
    top: 2.75rem;
    z-index: 50;
    background-color: white;
}

/* Legs we are not fueling are de-emphasised rather than hidden - the leg is still
   flown, quoted and dispatchable, it just gets no uplift. Mirrors how the legacy
   app greys an excluded leg (.legexcluded). Kept lighter than a disabled state so
   the Take Fuel switch itself stays clearly readable and clickable. */
.leg-grid-scroll-container tr.leg-row-no-fuel > td {
    background-color: #fafbfc;
    color: #8b95a3;
}

/* The expanded-row background must win over the no-fuel tint when both apply,
   otherwise a skipped leg's sticky header goes transparent while scrolling. */
.leg-grid-scroll-container tr.leg-row-expanded.leg-row-no-fuel > td {
    background-color: white;
}

/* "Set all: Yes | No" sits under the Take Fuel column title. */
.take-fuel-set-all {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--rz-text-secondary-color, #6b7686);
}

.take-fuel-set-all a {
    cursor: pointer;
}

.take-fuel-set-all-divider {
    color: #c3cad4;
}

/* Vertically center every data cell in the leg grid so the now-two-line
   Fuel Price Options button doesn't push neighbouring columns to the top. */
.leg-grid-scroll-container .rz-grid-table tbody td {
    vertical-align: middle;
}

.trip-grid tr.trip-row-expanded > td {
    position: sticky;
    top: 2.9rem;
    z-index: 110;
    background-color: #f0f0f0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    border-inline-end: none;
}

.automation-grid .rz-grid-table thead th:nth-child(2) .rz-column-drag {
    display: none;
}

/* misc */
:root {
    --rz-layout-body-background-color: #ffffff;
    --rz-gap: 0.625rem;
    --rz-tabs-padding: 0rem 0rem;
    --rz-paginator-summary-font-size: 0.875rem;
    --rz-text-h6-font-size: 1rem;
    --rz-upload-choose-background-color: #e3eaf2;
    --rz-datepicker-calendar-selected-hover-background-color: var(--rz-info-light);
}

/* stacks */
:root {
    --rz-stack-gap: 0.6rem;
}

/* cards */
:root {
    --rz-card-header-margin: -1rem;
    --rz-card-header-padding-top: 0.4rem;
}

/* tabs */
:root {
    --rz-tabs-tab-font-size: 0.75rem;
    --rz-tabs-padding: 1.25rem;
    --rz-tabs-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01);
    --rz-tabs-border: 1px solid #e9edf0;
    --rz-tabs-border-radius: var(--rz-border-radius);
    --rz-tabs-background-color: var(--rz-base-background-color);
    --rz-tabs-tab-line-height: var(--rz-body-line-height);
    --rz-tabs-tab-font-weight: 700;
    --rz-tabs-tab-text-transform: none;
    --rz-tabs-tab-letter-spacing: 0;
    --rz-tabs-tab-padding-block: 0.5rem;
    --rz-tabs-tab-padding-inline: 1rem;
    --rz-tabs-tab-background-color: #e9edf0;
    --rz-tabs-tab-color: #35a0d7;
    --rz-tabs-tab-selected-background-color: var(--rz-tabs-background-color);
    --rz-tabs-tab-selected-color: #28363c;
    --rz-tabs-tab-selected-top-border-color: #35a0d7;
    --rz-tabs-tab-hover-background-color: var(--rz-base-background-color);
    --rz-tabs-tab-hover-color: #4dabdc;
    --rz-tabs-tab-focus-background-color: var(--rz-base-background-color);
    --rz-tabs-tab-focus-color: #4dabdc;
    --rz-tabs-tab-focus-outline: 2px solid #35a0d7;
    --rz-tabs-tab-focus-outline-offset: calc(-1 * var(--rz-outline-width));
    --rz-tabs-icon-font-size: 1.25rem;
    --rz-tabs-icon-margin-inline: -0.25rem 0.25rem;
    --rz-tabs-transition: var(--rz-transition-all);
}

/* tabview states */
.rz-tabview-nav .rz-tabview-title {
    font-weight: normal;
}

.rz-tabview-nav .rz-tabview-selected .rz-tabview-title {
    font-weight: bold;
}

/* dialog */
:root {
    --rz-dialog-title-padding: 1rem 1rem 0 1rem;
    --rz-dialog-content-padding: 1rem;
    --rz-dialog-transition: 0.08s ease-out;
}

/* Trip leg panel / pop-out dialog — layout wrapper */
.trip-dialog-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.trip-dialog-body {
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* Full-screen modal: strip Radzen content padding and prevent outer scroll */
.trip-leg-modal .rz-dialog-content {
    padding: 0 !important;
    overflow: hidden !important;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Side panel: strip content padding too so header bleeds edge-to-edge */
.rz-dialog-side .rz-dialog-content {
    padding: 0 !important;
    overflow: hidden !important;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Trip leg panel / pop-out dialog — dark header */
.trip-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px 12px;
    background: var(--rz-primary);
    flex-shrink: 0;
}

.trip-panel-tail {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.3px;
    line-height: 1.1;
}

.trip-panel-meta {
    font-size: 12px;
    color: #ffffff;
    margin-top: 5px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.trip-panel-sep {
    opacity: 0.35;
}

.trip-panel-header-info {
    min-width: 0;
}

.trip-panel-header-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
    margin-left: 16px;
}

/* All buttons inside the dark primary header use ghost-white treatment */
.trip-panel-header-actions .rz-button {
    color: rgba(255, 255, 255, 0.85) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

.trip-panel-header-actions .rz-button:hover {
    background: rgba(255, 255, 255, 0.18) !important;
}

/* selection bar */
.rz-selectbutton .rz-button.rz-button-sm.rz-state-active {
    --rz-selectbar-selected-background-color: var(--rz-primary);
    --rz-selectbar-selected-color: var(--rz-white);
}

/*--------- Class specific overrides ---------*/
/* stacks */
.rz-stack {
    gap: var(--rz-stack-gap) !important;
}

/* buttons */
.rz-button-md,
.rz-button-sm,
.rz-button-xs,
.rz-fileupload .rz-button {
    text-transform: none;
}

/* Dropdown */
.rz-multiselect-panel.rz-popup {
    width: auto !important;
}

.rz-label {
    font-size: var(--rz-text-body1-font-size);
    font-weight: bold;
}

.rz-popup.info-popup {
    position: absolute;
    border: var(--rz-panel-border);
    background-color: var(--rz-panel-background-color);
    box-shadow: var(--rz-panel-shadow);
    border-radius: var(--rz-border-radius);
    padding: 0.5rem;
}

/* Checkbox */
.rz-chkbox-label {
    font-size: var(--rz-text-body1-font-size);
}

/* Radio button list — match body text size */
.rz-radio-button-list {
    font-size: var(--rz-text-body1-font-size);
}

/* Alerts — match body text size */
.rz-alert {
    font-size: var(--rz-text-body1-font-size);
}

/* Calendar icons */
.rz-datepicker-trigger .rzi-calendar,
.rz-datepicker-trigger .rzi-time {
    font-size: 16px;
}

/* blazor error */
#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/*Radzen cards*/
.rz-card,
.rz-card.rz-variant-outlined {
    background: var(--rz-base-100);
}

.rz-card .rz-card-header {
    margin-top: var(--rz-card-header-margin);
    margin-left: var(--rz-card-header-margin);
    margin-right: var(--rz-card-header-margin);
    padding-left: var(--rz-card-padding);
    padding-top: var(--rz-card-header-padding-top);
    padding-right: var(--rz-card-padding);
}

.ramp-header h6 {
    font-size: 0.875rem;
}

.notes-card .rz-accordion .rz-accordion-header a span {
    font-size: 0.8rem !important;
    font-weight: 700;
    padding-block: 0.25rem !important;
}

.notes-card .rz-accordion-content {
    font-size: 0.75rem;
    box-shadow: none !important;
}

.notes-card .rz-accordion .rz-accordion-header,
.notes-card .rz-accordion .rz-accordion-header a,
.notes-card .rz-accordion .rz-accordion-header a span {
    box-shadow: none !important;
    text-shadow: none !important;
}

.services-card .rz-card,
.rz-card.rz-variant-outlined {
    background: #fff;
    font-weight: 400;
    color: #3b3b3b;
}

.services-card-selected {
    border-color: var(--rz-primary);
    border-width: 2px;
}

.services-card:focus {
    outline: 2px solid var(--rz-primary);
    outline-offset: 2px;
}

.rz-dialog-side {
    top: 0;
}

/* Remove side panel slide animation so pop-out → modal transition is instant */
.rz-dialog-side .rz-dialog {
    transition: none !important;
    animation: none !important;
}

.rz-dialog-side-position-top {
    margin-left: 25%;
    width: 50%;
}

i.rzi {
    vertical-align: top;
}

.rz-expanded-row-template {
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 10px;
    padding-right: 10px;
}

.rz-expanded-row-template .rz-expanded-row-template {
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
}

.rz-expanded-row-template .rz-tabview-panels {
    padding-top: var(--rz-card-padding);
    padding-bottom: var(--rz-card-padding);
}

.rz-notification {
    top: auto !important;
    bottom: 50px !important;
}

.rz-expanded-row-template .rz-tabview-panel {
    padding: 0 1rem;
}

.rz-autocomplete-panel {
    width: fit-content !important;
}

.rz-selectable.rz-data-grid .rz-data-row {
    cursor: pointer;
}

.rz-progressbar-circular-label {
    text-align: center;
    text-wrap: auto;
}

.rz-progressbar-circular {
    overflow: visible;
}

.rz-tabview.rz-tabview-top > .rz-tabview-nav .rz-tabview-selected {
    border-bottom: 0px solid var(--rz-primary) !important;
    border-bottom-width: 0;
    border-top: 2px solid #35a0d7 !important;
}

.rz-tabview.rz-tabview-left > .rz-tabview-nav .rz-tabview-selected {
    border-right: 0px solid var(--rz-primary) !important;
    border-right-width: 0;
    border-left: 2px solid #35a0d7 !important;
}

.rz-badge {
    text-transform: none;
}

.fuel-price-column {
    flex-shrink: 0 !important;
}

.fuel-price-column .rz-cell-data {
    overflow: visible;
}

.trip-grid .volume-column {
    min-width: 120px !important;
}

.trip-grid .volume-column .rz-inputtext {
    padding-inline: 0.25rem !important;
}

@media (max-width: 1536px) {
    .kpi-row .rz-card {
        min-width: 0 !important;
        padding: 0.4rem 0.6rem !important;
    }
    .kpi-row .rz-display-h5 {
        font-size: 0.9rem !important;
    }
    .kpi-row .rz-caption {
        font-size: 0.6rem !important;
    }

    .trip-grid .rz-grid-table .rz-column-title {
        font-size: 0.75rem;
    }

    .trip-grid .rz-tabview-title {
        font-size: 0.7rem;
    }

    .trip-grid .rz-label {
        font-size: 0.7rem;
    }

    .trip-grid p {
        font-size: 0.7rem;
    }

    .trip-grid .rz-dropdown,
    .trip-grid .rz-textbox,
    .trip-grid .rz-inputtext {
        font-size: 0.65rem;
        padding: 0.25rem 0.8rem !important;
        padding-inline: 1rem;
    }

    .trip-grid .rz-grid-table td,
    .rz-grid-table th {
        padding: 0.2rem 0.2rem !important;
    }

    .trip-grid .rz-cell-data {
        padding: 0 !important;
        line-height: 1.2;
    }

    .trip-grid .rz-numeric {
        font-size: 0.65rem;
    }

    .trip-grid .custom-button {
        font-size: 0.6rem;
        /* font-weight: 600; */
        padding: 0.25rem 0.35rem;
        white-space: normal;
        word-break: break-word;
        line-height: 1.3;
        align-items: flex-start;
    }

    .trip-grid .custom-button .btn-text {
        flex: 1;
        min-width: 0;
    }

    .trip-grid .custom-button i {
        font-size: 0.9rem;
        padding: 0.25rem;
        flex-shrink: 0;
    }

    .trip-grid .rz-cell-filter {
        padding: 0.1rem 0.5rem;
    }

    .trip-grid .rz-grid-table thead th {
        padding: 0.1rem;
    }

    .trip-grid .rz-button {
        font-size: 0.6rem;
    }

    .notes-card .rz-accordion .rz-accordion-header a span {
        font-size: 0.7rem !important;
    }

    .notes-card .rz-accordion .rz-accordion-header a {
        padding-block: 0.2rem !important;
    }

    .notes-card .rz-accordion-content {
        font-size: 0.7rem;
    }

    .notes-card .rz-accordion-content p {
        font-size: 0.6rem;
    }

    .notes-card.rz-card h6,
    .notes-card.rz-card i {
        font-size: 0.875rem;
    }

    .ramp-header h6 {
        font-size: 0.875rem !important;
        padding: 0.25rem;
    }

    .trip-grid .fuel-price-column {
        flex-shrink: 0 !important;
        min-width: 280px !important;
    }

    .automation-grid .rz-grid-table td,
    .automation-grid .rz-grid-table th {
        padding: 0.25rem 0.5rem !important;
    }

    .automation-grid .rz-button.rz-button-sm {
        padding: 0.2rem 0.5rem;
    }

    .automation-grid .rz-grid-table .rz-column-title {
        font-size: 0.65rem;
        font-weight: 800;
    }

    .automation-grid .rz-cell-data {
        font-size: 0.65rem;
        line-height: 1.3;
    }

    .automation-grid .rz-button {
        font-size: 0.7rem;
    }
}

@media (max-width: 992px) {
    .automation-grid .rz-grid-table td,
    .automation-grid .rz-grid-table th {
        padding: 0.15rem 0.3rem !important;
    }

    .automation-grid .rz-cell-data {
        font-size: 0.68rem;
    }
}

@media (max-width: 575px) {
    .automation-grid {
        touch-action: pan-x pan-y;
    }

    .automation-grid .rz-grid-table td,
    .automation-grid .rz-grid-table th {
        padding: 0.1rem 0.25rem !important;
    }

    .automation-grid .rz-cell-data {
        font-size: 0.65rem;
    }
}

/* services card - compact grid layout (applies at all screen sizes) */
.service-items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    align-items: start;
    gap: 0.5rem;
    width: 100%;
}

.service-item {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--rz-base-300);
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    transition: all 0.15s;
    font-size: 0.7rem;
    color: #3b3b3b;
    user-select: none;
    overflow: hidden;
}

.service-item:hover {
    background: var(--rz-base-100);
    border-color: var(--rz-base-400);
}

.service-item:focus {
    outline: 2px solid var(--rz-primary);
    outline-offset: 2px;
}

.service-item-selected {
    border-color: var(--rz-primary);
    background: var(--rz-primary-lighter);
    border-width: 2px;
}

.service-item-main {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0.75rem;
    min-height: 50px;
}

.service-item-selected .service-item-main {
    padding: 0 calc(0.75rem - 1px);
}

.service-item-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.3rem 0.75rem;
    border-top: 1px solid var(--rz-primary-light);
    font-size: 0.7rem;
    color: var(--rz-primary);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
}

.service-item-footer span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.service-item-footer:hover {
    filter: brightness(0.94);
}

.service-item-footer.has-comment {
    color: var(--rz-warning-dark);
}

.service-item-selected .service-item-footer {
    padding: 0.3rem calc(0.75rem - 1px);
}

.service-item .rz-chkbox-box {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

.service-item-label {
    font-weight: 500;
    color: var(--rz-base-900);
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.service-item-fee {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--rz-base-600);
    white-space: nowrap;
    flex-shrink: 0;
}

.service-item-edit-icon {
    font-size: 18px !important;
    color: var(--rz-base-500);
    cursor: pointer;
    flex-shrink: 0;
}

.service-item-edit-icon:hover {
    color: var(--rz-primary);
}

/* Special Event Fee horizontal list layout */
.special-event-fee-list {
    padding: 0.4rem 0;
}

.special-event-fee-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 0.6rem 0.75rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-bottom: 0.5rem;
    background: #fff;
}

.special-event-fee-item:last-child {
    margin-bottom: 0;
}

.special-event-fee-info {
    flex: 1;
    min-width: 0;
    padding-right: 1rem;
}

.special-event-fee-name {
    font-weight: 600;
    font-size: 0.95rem;
    color: #333;
}

.special-event-fee-dates {
    font-size: 11px;
    color: #777;
    margin-top: 0.2rem;
}

.special-event-fee-notes {
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-size: 11px;
    color: #555;
    font-style: italic;
    margin-top: 0.2rem;
    overflow-wrap: anywhere;
}

/* The card sits inside a Radzen grid row, whose cells set white-space: nowrap. Without this a long
   fee note ran on one line and pushed the leg panel into a horizontal scroll. */
.special-event-fee-list,
.special-event-fee-warning,
.special-event-fee-empty {
    white-space: normal;
}

.special-event-fee-notes > .rzi {
    flex: none;
}

.special-event-fee-notes > .fl-expandable-text {
    flex: 1;
}

.special-event-fee-amount {
    font-size: 1.1rem;
    font-weight: 700;
    color: #333;
    white-space: nowrap;
    flex-shrink: 0;
    align-self: center;
}

.special-event-fee-amount-na {
    color: var(--rz-base-500);
    font-weight: 400;
}

/* Shown in place of the empty state when another FBO at this airport has an event fee */
.special-event-fee-warning {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    margin: 0.4rem 0;
    border: 1px solid #f0c36d;
    border-left-width: 4px;
    border-radius: 4px;
    background: #fdf7e3;
    color: #6b5417;
    line-height: 1.4;
    /* Never let a long event list push the warning past the card; it grows taller instead. */
    max-width: 100%;
}

.special-event-fee-warning .rzi {
    color: #c99a2e;
    flex-shrink: 0;
}

/* Wrap the full message inside the card - no truncation, the box grows to fit.
   min-width:0 is required or the flex item sizes to its content and overflows instead. */
.special-event-fee-warning-text {
    margin: 0;
    min-width: 0;
    flex: 1;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Edit service fee dialog - two-column form grid */
.service-fee-form {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 1rem;
    row-gap: 0.75rem;
}

@media (max-width: 576px) {
    .service-items-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 400px) {
    .service-items-grid {
        grid-template-columns: 1fr;
    }
}

/* ───────────────────────────────────────────────────────────────────────
   Global tooltip restyle — applies to EVERY Radzen tooltip app-wide.
   Radzen tooltips are driven by --rz-tooltip-* variables and have no arrow,
   so overriding the variables on .rz-tooltip-content restyles them cleanly.
   Replaces the default tight, info-blue box with a higher-contrast, better
   padded, more legible surface.
   ─────────────────────────────────────────────────────────────────────── */
.rz-tooltip-content {
    --rz-tooltip-background-color: #222b38;
    --rz-tooltip-color: #ffffff;
    --rz-tooltip-padding: 0.625rem 0.875rem;
    --rz-tooltip-font-size: 0.8125rem;
    --rz-tooltip-border-radius: 8px;
    --rz-tooltip-shadow: 0 8px 24px rgba(0, 0, 0, 0.24);
    line-height: 1.45;
    max-width: 22rem;
    width: max-content;
    text-align: left;
    white-space: normal;
    overflow-wrap: break-word;
}

/* Field label + help icon */
.fl-field-label {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.fl-field-label .rz-label {
    margin: 0;
}

.fl-help-icon {
    font-size: 1rem;
    line-height: 1;
    color: var(--fg-4, #98a0ae);
    cursor: help;
    flex: none;
}

.fl-help-icon:hover {
    color: var(--fg-2, #353b49);
}

/* Structured "rich" tooltip content (title + body + optional CTA). */
.fl-rich-tooltip {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    /* Stay within the tooltip's max-width; without this the flex container sizes to
       the body's longest line (min-width:auto) and the text overflows/clips. */
    max-width: 100%;
    min-width: 0;
}

.fl-rich-tooltip__title {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-weight: 700;
    font-size: 0.875rem;
    min-width: 0;
}

.fl-rich-tooltip__title span {
    white-space: normal;
    overflow-wrap: anywhere;
    min-width: 0;
}

.fl-rich-tooltip__icon {
    font-size: 1.05rem;
    line-height: 1;
    flex-shrink: 0;
}

.fl-rich-tooltip__body {
    color: rgba(255, 255, 255, 0.82);
    /* Allow the body to wrap within the tooltip width rather than clip on one line. */
    white-space: normal;
    overflow-wrap: anywhere;
    min-width: 0;
}

.fl-rich-tooltip__cta {
    margin-top: 0.125rem;
    font-weight: 600;
    color: var(--rz-warning-light, #ffca57);
}

/* Assistant-dependent settings group. The native fieldset is used only to disable/grey its
   inner controls when the Smart Assistant is off; reset its default chrome so it lays out flat. */
fieldset.fl-assistant-settings {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}

/* When the assistant is off the fieldset is `disabled`, which blocks interaction but doesn't
   visually grey Radzen's custom-styled controls. Dim the whole group so it reads as inactive
   (the thresholds sit outside this fieldset and stay full-strength). */
fieldset.fl-assistant-settings:disabled {
    opacity: 0.55;
    pointer-events: none;
}

/* ───────────────────────────────────────────────────────────────────────
   Leg Transaction Comparison dialog — highlight the differing supplier/FBO
   values so the mismatch is obvious at a glance.
   ─────────────────────────────────────────────────────────────────────── */
.fl-variance-dialog__intro {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.fl-variance-dialog__intro-icon {
    color: var(--rz-warning, #ff9800);
    flex-shrink: 0;
    margin-top: 2px;
}

.fl-variance-flag {
    background: var(--rz-warning-lighter, #fff3e0);
    color: var(--rz-warning-darker, #8a5300);
    padding: 0 0.25rem;
    border-radius: 3px;
    font-weight: 600;
}

.fl-variance-cell--diff {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    background: var(--rz-warning-lighter, #fff3e0);
    color: var(--rz-warning-darker, #8a5300);
    font-weight: 600;
    border-radius: 4px;
    padding: 0.0625rem 0.4375rem;
}

.fl-variance-cell--diff::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--rz-warning, #ff9800);
    flex-shrink: 0;
}

/* ───────────────────────────────────────────────────────────────────────
   Dispatch Status legend dialog (opened from the column-header info icon).
   ─────────────────────────────────────────────────────────────────────── */
.fl-status-legend__grid {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--rz-border-color, #e0e4ea);
    border-radius: 8px;
    overflow: hidden;
}

.fl-status-legend__head,
.fl-status-legend__row {
    display: grid;
    grid-template-columns: 34px 160px 1fr;
    gap: 0.75rem;
    align-items: start;
    padding: 0.5rem 0.75rem;
}

.fl-status-legend__head {
    background: var(--rz-base-200, #f1f3f7);
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--rz-text-secondary-color, #5a6a85);
}

.fl-status-legend__row {
    border-top: 1px solid var(--rz-border-color, #e0e4ea);
}

.fl-status-legend__prio {
    text-align: center;
    font-weight: 700;
    color: var(--rz-text-secondary-color, #8a97ab);
}

.fl-status-legend__badge {
    display: flex;
    align-items: flex-start;
}

.fl-status-legend__desc {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.fl-status-legend__meaning {
    font-weight: 600;
}

.fl-status-legend__trigger {
    color: var(--rz-text-secondary-color, #5a6a85);
    font-size: 0.8125rem;
}

.fl-status-legend__detail-title {
    margin-bottom: 0.25rem;
}

.fl-status-legend__detail-lead {
    margin-top: 0.375rem;
}

.fl-status-legend__list {
    margin: 0.25rem 0 0 0;
    padding-left: 1.25rem;
    /* Plain <ul> doesn't pick up RadzenText's body sizing, so it rendered larger than the surrounding copy. */
    font-size: var(--rz-text-body1-font-size);
    line-height: var(--rz-text-body1-line-height, 1.5);
}

.fl-status-legend__list li {
    margin-bottom: 0.3125rem;
}

.fl-status-legend__notes {
    border-top: 1px solid var(--rz-border-color, #e0e4ea);
    padding-top: 0.625rem;
    color: var(--rz-text-secondary-color, #5a6a85);
}

/* Info icon in the Dispatch Status column header. */
.fl-status-info-icon {
    cursor: pointer;
    font-size: 1rem;
    color: var(--rz-text-secondary-color, #8a97ab);
    vertical-align: middle;
}

.fl-status-info-icon:hover {
    color: var(--rz-primary, #2f7ec4);
}

.fl-status-header {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}