/* Phase 3 — Service Orders list and shared OS layout */
/* Page shell: .elev-listing-page.service-orders-page (overlay Absolute via elevai-listings.css) */

.service-orders-heading {
    align-items: center;
    margin-bottom: 0 !important;
}

.service-orders-heading__intro {
    min-width: 0;
}

.service-orders-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    white-space: nowrap;
}

.service-orders-actions__primary {
    height: 2.75rem;
    padding-inline: 1rem !important;
    border-radius: var(--elev-radius-pill) !important;
    font-family: var(--elev-font-sans) !important;
    font-size: var(--elev-text-sm-size) !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    text-transform: none !important;
}

.service-orders-actions__primary--icon {
    display: none;
    width: 2.75rem;
    min-width: 2.75rem;
    padding-inline: 0 !important;
    box-shadow: none !important;
}

.service-orders-actions__filter,
.service-orders-actions__icon {
    width: 2.75rem;
    height: 2.75rem;
    border: 0 !important;
    border-radius: var(--elev-radius-pill) !important;
    color: var(--elev-text-bold) !important;
    background: var(--elev-surface) !important;
    box-shadow: none !important;
}

.service-orders-actions__filter:hover,
.service-orders-actions__filter:focus-visible,
.service-orders-actions__icon:hover,
.service-orders-actions__icon:focus-visible {
    background: var(--elev-bg-pale) !important;
}

.service-orders-actions__filter .mud-icon-root,
.service-orders-actions__icon .mud-icon-root {
    font-size: 1.125rem;
}

.service-orders-actions__icon:disabled,
.service-orders-actions__icon.mud-disabled {
    opacity: 0.45;
}

.service-orders-actions__reload.is-loading,
.service-orders-actions__reload.is-loading:disabled,
.service-orders-actions__reload.is-loading.mud-disabled {
    opacity: 1 !important;
    color: var(--elev-text-bold) !important;
    background: var(--elev-surface) !important;
    pointer-events: none;
}

.service-orders-actions__reload.is-loading .mud-icon-root {
    color: var(--elev-text-bold) !important;
}

.orders-table-card {
    overflow: hidden;
    border: 1px solid var(--elev-border);
    border-radius: var(--elev-radius);
    background: var(--elev-surface);
    box-shadow: var(--elev-shadow);
}

/* Dual calendar popover sits in the toolbar — don't clip while open */
.orders-table-card:has(.date-range-filter.is-open) {
    overflow: visible;
    position: relative;
    z-index: 25;
}

.orders-table-card:has(.date-range-filter.is-open) .orders-table-toolbar,
.orders-table-card:has(.date-range-filter.is-open) .orders-table-toolbar__controls {
    overflow: visible;
}

.orders-map-card {
    position: relative;
    z-index: 0;
    overflow: hidden;
    isolation: isolate;
}

.orders-map-card__body {
    padding: 0.75rem !important;
}

.orders-table-toolbar {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem !important;
    border-bottom: 0;
}

.orders-table-toolbar__controls {
    display: flex;
    flex: 0 1 auto;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-left: auto;
    min-width: 0;
    width: auto;
    max-width: calc(100% - 10rem);
}

.service-orders-page.elev-listing-page .orders-table-toolbar__controls,
.service-orders-page .orders-table-toolbar__controls {
    flex: 0 1 auto;
    margin-left: auto;
    max-width: calc(100% - 10rem);
    justify-content: flex-end;
}

.orders-table-card .elev-ui-card__body {
    padding: 0 1.25rem 0.75rem;
}

.orders-table-title {
    margin: 0;
    flex: 0 0 auto;
    color: var(--elev-text-bold);
    font-family: var(--elev-font-display);
    font-size: 1.125rem;
    line-height: 1.35;
    font-weight: 700;
    white-space: nowrap;
}

.orders-search-field {
    flex: 0 1 19.5rem;
    width: 19.5rem;
    min-width: 14.3rem;
    max-width: 20.8rem;
}

.orders-table-card .orders-search-field.mud-input-control,
.orders-table-card .orders-status-select.mud-input-control,
.orders-table-card .orders-period-select.mud-input-control {
    margin: 0 !important;
}

/* Toolbar + filter drawer + create OS drawer — MudBlazor field typography */
.service-orders-page .orders-table-toolbar__controls .mud-select-input,
.service-orders-page .orders-table-toolbar__controls .mud-input-slot,
.service-orders-page .orders-table-toolbar__controls input.mud-input-slot,
.service-orders-page .elev-filter-drawer .mud-select-input,
.service-orders-page .elev-filter-drawer .mud-input-slot,
.service-orders-page .elev-filter-drawer input.mud-input-slot,
.service-orders-page .elev-filter-drawer textarea.mud-input-slot,
.service-order-edit-drawer .mud-select-input,
.service-order-edit-drawer .mud-input-slot,
.service-order-edit-drawer input.mud-input-slot,
.service-order-edit-drawer textarea.mud-input-slot,
.service-order-pending-stage-drawer .mud-select-input,
.service-order-pending-stage-drawer .mud-input-slot,
.service-order-pending-stage-drawer input.mud-input-slot,
.service-order-pending-stage-drawer textarea.mud-input-slot,
.service-order-create-drawer .mud-select-input,
.service-order-create-drawer .mud-input-slot,
.service-order-create-drawer input.mud-input-slot,
.service-order-create-drawer textarea.mud-input-slot {
    font-family: var(--elev-font-sans) !important;
    font-size: var(--elev-text-sm-size) !important;
    font-weight: 500 !important;
    line-height: var(--elev-text-sm-line) !important;
    color: var(--elev-gray-900) !important;
}

.service-orders-page .orders-table-toolbar__controls .mud-input-label,
.service-orders-page .elev-filter-drawer .mud-input-label,
.service-order-edit-drawer .mud-input-label,
.service-order-pending-stage-drawer .mud-input-label,
.service-order-create-drawer .mud-input-label {
    font-family: var(--elev-font-sans) !important;
    font-size: var(--elev-text-sm-size) !important;
    font-weight: 500 !important;
    line-height: var(--elev-text-sm-line) !important;
}

.service-orders-page .orders-table-toolbar__controls .mud-input-slot::placeholder,
.service-orders-page .orders-table-toolbar__controls input.mud-input-slot::placeholder,
.service-orders-page .elev-filter-drawer .mud-input-slot::placeholder,
.service-orders-page .elev-filter-drawer input.mud-input-slot::placeholder,
.service-order-edit-drawer .mud-input-slot::placeholder,
.service-order-edit-drawer input.mud-input-slot::placeholder,
.service-order-pending-stage-drawer .mud-input-slot::placeholder,
.service-order-pending-stage-drawer input.mud-input-slot::placeholder,
.service-order-create-drawer .mud-input-slot::placeholder,
.service-order-create-drawer input.mud-input-slot::placeholder {
    color: var(--elev-muted-foreground) !important;
    font-family: var(--elev-font-sans) !important;
    font-size: var(--elev-text-sm-size) !important;
    font-weight: 400 !important;
    opacity: 1 !important;
}

.service-orders-page .orders-table-toolbar__controls .mud-select .mud-chip,
.service-orders-page .elev-filter-drawer .mud-select .mud-chip,
.service-order-edit-drawer .mud-select .mud-chip,
.service-order-pending-stage-drawer .mud-select .mud-chip,
.service-order-create-drawer .mud-select .mud-chip {
    font-family: var(--elev-font-sans) !important;
    font-size: var(--elev-text-xs-size) !important;
    font-weight: 500 !important;
    line-height: var(--elev-text-xs-line) !important;
}

/* Dropdown popovers (portaled) on service orders page / create OS drawer */
body:has(.service-orders-page) .mud-popover .mud-list-item,
body:has(.service-orders-page) .mud-popover .mud-list-item-text,
body:has(.service-orders-page) .mud-popover .mud-list-item .mud-typography,
body:has(.service-order-create-drawer) .mud-popover .mud-list-item,
body:has(.service-order-create-drawer) .mud-popover .mud-list-item-text,
body:has(.service-order-create-drawer) .mud-popover .mud-list-item .mud-typography {
    font-family: var(--elev-font-sans) !important;
    font-size: var(--elev-text-sm-size) !important;
    font-weight: 500 !important;
    line-height: var(--elev-text-sm-line) !important;
    color: var(--elev-gray-900) !important;
}

body:has(.service-orders-page) .mud-popover .mud-list-item.mud-selected-item,
body:has(.service-orders-page) .mud-popover .mud-list-item.mud-selected-item .mud-list-item-text,
body:has(.service-order-create-drawer) .mud-popover .mud-list-item.mud-selected-item,
body:has(.service-order-create-drawer) .mud-popover .mud-list-item.mud-selected-item .mud-list-item-text {
    color: var(--elev-primary) !important;
    font-weight: 600 !important;
}

.orders-period-select {
    flex: 0 0 9.75rem;
    width: 9.75rem;
    min-width: 9.75rem;
    max-width: 9.75rem;
}

.orders-date-range {
    flex: 0 0 auto;
    min-width: 12.5rem;
}

.orders-date-range .date-range-trigger {
    height: 2.5rem;
    min-width: 12.5rem;
    border: 1px solid var(--elev-border);
    background: var(--elev-surface);
}

.orders-status-select {
    flex: 0 0 18.5rem;
    width: 18.5rem;
    min-width: 18.5rem;
    max-width: 20.2rem;
}

/* Pill chrome for search + status (match date-range / view tabs; keep Status floating label) */
.orders-table-card .orders-search-field .mud-input-control-input-container,
.orders-table-card .orders-status-select .mud-input-control-input-container {
    height: 2.5rem;
    min-height: 2.5rem;
    max-height: 2.5rem;
}

.orders-table-card .orders-search-field .mud-input-outlined,
.orders-table-card .orders-status-select .mud-input-outlined {
    box-sizing: border-box;
    height: 2.5rem !important;
    min-height: 2.5rem !important;
    max-height: 2.5rem !important;
    border-radius: var(--elev-radius-pill);
}

.orders-table-card .orders-search-field .mud-input-outlined-border,
.orders-table-card .orders-status-select .mud-input-outlined-border {
    border-radius: var(--elev-radius-pill) !important;
}

.orders-table-card .orders-search-field .mud-input-slot,
.orders-table-card .orders-search-field input.mud-input-slot,
.orders-table-card .orders-status-select .mud-select-input,
.orders-table-card .orders-status-select input.mud-input-slot {
    box-sizing: border-box;
    height: 2.5rem !important;
    min-height: 2.5rem !important;
    max-height: 2.5rem !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 2.5rem !important;
}

.orders-view-tabs {
    flex: 0 0 auto;
}

.orders-view-tabs-row {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.orders-view-tabs-row .orders-toolbar-filter {
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 2.5rem;
    height: 2.5rem;
    min-width: 2.5rem;
    border: 1px solid var(--elev-border) !important;
    border-radius: var(--elev-radius-pill) !important;
    color: var(--elev-text-bold) !important;
    background: var(--elev-surface) !important;
    box-shadow: none !important;
}

.orders-view-tabs-row .orders-toolbar-filter:hover,
.orders-view-tabs-row .orders-toolbar-filter:focus-visible {
    background: var(--elev-bg-pale) !important;
}

.orders-table-body {
    padding-top: 0 !important;
    padding-inline: 1.25rem !important;
}

.orders-view-tabs.mud-toggle-group {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    height: 2.5rem;
    min-height: 2.5rem;
    max-height: 2.5rem;
    padding: 0.1875rem;
    border: 1px solid var(--elev-border);
    border-radius: var(--elev-radius-pill);
    background: var(--elev-bg-pale);
    box-shadow: none;
    scale: 1 !important;
}

.orders-view-tabs .mud-toggle-item {
    box-sizing: border-box;
    height: calc(2.5rem - 0.375rem - 2px);
    min-height: calc(2.5rem - 0.375rem - 2px);
    padding-inline: 0.75rem;
    border: 0 !important;
    border-radius: var(--elev-radius-pill) !important;
    color: var(--elev-muted) !important;
    font-family: var(--elev-font-sans) !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-transform: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

.orders-view-tabs .mud-toggle-item.mud-toggle-item-selected {
    color: var(--elev-primary) !important;
    background: var(--elev-surface) !important;
    box-shadow: 0 1px 2px rgba(10, 13, 18, 0.08) !important;
}

.orders-customer-area {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
}

.orders-customer-area__name {
    color: var(--elev-gray-900);
    font-family: var(--elev-font-sans);
    font-size: var(--elev-text-sm-size);
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0;
    text-transform: none;
}

.orders-customer-area__area {
    color: var(--elev-muted-foreground);
    font-family: var(--elev-font-sans);
    font-size: var(--elev-text-xs-size);
    font-weight: 400;
    line-height: 1.25;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

.orders-code {
    color: var(--elev-gray-900);
    font-family: var(--elev-font-sans);
    font-size: var(--elev-text-sm-size);
    font-weight: 700;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}

.orders-code-group {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
    min-width: 0;
}

.orders-row-view--copy {
    width: 1.375rem !important;
    height: 1.375rem !important;
    min-width: 1.375rem !important;
    padding: 0 !important;
}

.orders-row-view--copy .mud-icon-root {
    font-size: 0.9375rem !important;
}

.orders-equipment {
    color: var(--elev-gray-900);
    font-family: var(--elev-font-sans);
    font-size: var(--elev-text-sm-size);
    font-weight: 400;
    line-height: 1.3;
}

.orders-equipment.is-priority {
    color: var(--elev-warning);
    font-weight: 500;
}

.orders-stopped-icon {
    margin-left: 0.25rem;
    vertical-align: middle;
}

.orders-problem {
    margin: 0;
    color: var(--elev-gray-900);
    font-family: var(--elev-font-sans);
    font-size: var(--elev-text-sm-size);
    font-weight: 400;
    line-height: 1.3;
}

.orders-problem.is-priority {
    color: var(--elev-destructive);
    font-weight: 500;
    text-transform: none;
}

.orders-call-badge {
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.orders-status-text {
    color: var(--elev-gray-900);
    font-family: var(--elev-font-sans);
    font-size: var(--elev-text-sm-size);
    font-weight: 400;
}

.orders-status-text--pending {
    color: var(--elev-destructive);
    font-weight: 500;
}

.orders-date {
    color: var(--elev-muted);
    font-family: var(--elev-font-sans);
    font-size: var(--elev-text-xs-size);
    font-weight: 400;
    white-space: nowrap;
}

.orders-date-stack {
    display: grid;
    gap: 0.125rem;
    min-width: 0;
}

.orders-date-header {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    white-space: nowrap;
}

.orders-date-header .dashboard-help-tip__btn.mud-button-root,
.orders-date-header .dashboard-help-tip__btn.mud-icon-button {
    width: 1.25rem !important;
    height: 1.25rem !important;
}

.orders-date-header .dashboard-help-tip__btn .mud-icon-root {
    font-size: 0.8125rem !important;
}

.orders-date--secondary {
    color: var(--elev-text-sheen);
}

.orders-row-view {
    width: 2rem;
    height: 2rem;
    color: var(--elev-muted) !important;
}

.orders-row-view:hover {
    color: var(--elev-text-bold) !important;
    background: var(--elev-bg-pale) !important;
}

.orders-table-card .grid-os,
.orders-table-card .service-orders-table {
    border: 0;
    box-shadow: none;
    overflow: hidden;
    border-radius: var(--elev-radius);
}

.orders-table-card .mud-table-container {
    overflow-x: auto;
    overflow-y: hidden;
    border: 1px solid var(--elev-border);
    border-radius: var(--elev-radius);
    background: var(--elev-surface);
}

.orders-table-card .mud-table-root {
    background: transparent;
    table-layout: auto;
    border-collapse: separate;
    border-spacing: 0;
}

.orders-table-card .mud-table-head .mud-table-cell:first-child {
    border-top-left-radius: calc(var(--elev-radius) - 1px);
}

.orders-table-card .mud-table-head .mud-table-cell:last-child {
    border-top-right-radius: calc(var(--elev-radius) - 1px);
}

.orders-table-card .mud-table-body .mud-table-row:last-child .mud-table-cell:first-child {
    border-bottom-left-radius: calc(var(--elev-radius) - 1px);
}

.orders-table-card .mud-table-body .mud-table-row:last-child .mud-table-cell:last-child {
    border-bottom-right-radius: calc(var(--elev-radius) - 1px);
}

.orders-table-card .mud-table-body .mud-table-row:last-child .mud-table-cell {
    border-bottom: 0;
}

.orders-table-card .mud-table-head .mud-table-cell {
    height: 2.75rem;
    padding: 0.625rem 1rem;
    border-bottom: 1px solid var(--elev-border);
    background: var(--elev-surface-strong);
    color: var(--elev-gray-900);
    font-family: var(--elev-font-sans);
    font-size: var(--elev-text-sm-size);
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.25;
    text-transform: none;
    white-space: nowrap;
    vertical-align: middle;
}

.orders-table-card .mud-table-body .mud-table-cell {
    height: auto;
    min-height: 3.5rem;
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--elev-border-soft);
    color: var(--elev-gray-900);
    font-family: var(--elev-font-sans);
    font-size: var(--elev-text-sm-size);
    font-weight: 400;
    line-height: 1.3;
    vertical-align: middle;
}

.orders-table-card .mud-table-body .mud-table-cell.orders-table-cell--code {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.orders-table-card .mud-table-body .mud-table-cell.orders-table-cell--date {
    white-space: nowrap;
}

.orders-table-card .mud-table-body .mud-table-cell.orders-table-cell--actions {
    width: 3rem;
    padding-inline: 0.25rem;
    text-align: center;
}

.orders-row-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.125rem;
}

.orders-table-card .mud-table-body .mud-table-row {
    transition: background-color 0.15s ease;
}

.orders-table-card .mud-table-body .mud-table-row:hover {
    background: rgba(33, 150, 233, 0.04);
}

.orders-table-card .orders-table-pager {
    margin: 0.25rem 0 0;
    padding-top: 0.625rem;
    border-top: 1px solid var(--elev-border-soft);
}

.orders-table-card .orders-table-pager .mud-tablepager-content,
.orders-table-card .orders-table-pager .mud-tablepager-toolbar,
.orders-table-card .orders-table-pager .mud-table-pagination-caption,
.orders-table-card .orders-table-pager .mud-select-input,
.orders-table-card .orders-table-pager .mud-input-slot,
.orders-table-card .orders-table-pager .mud-input-label,
.orders-table-card .orders-table-pager .mud-button-root {
    font-family: var(--elev-font-sans) !important;
    font-size: var(--elev-text-sm-size) !important;
    font-weight: 500 !important;
    line-height: var(--elev-text-sm-line) !important;
    color: var(--elev-muted) !important;
    text-transform: none !important;
}

.orders-table-card .orders-table-pager .mud-button-root {
    font-weight: 600 !important;
}

.orders-table-card .orders-table-pager .mud-select-input,
.orders-table-card .orders-table-pager .mud-input-slot {
    color: var(--elev-gray-900) !important;
}

.service-orders-table-card {
    overflow: hidden;
}

.service-orders-table-card .grid-os {
    border: 0;
    box-shadow: none;
}

.service-orders-table-card .mud-table-root {
    background: transparent;
}

.service-orders-table-card .mud-table-head .mud-table-cell {
    height: 3rem;
    padding-inline: 0.75rem;
    border-bottom: 1px solid var(--elev-border);
    background: var(--elev-bg-pale);
    color: var(--elev-text-bold);
    font-size: var(--elev-text-sm-size);
    font-weight: 600;
}

.service-orders-table-card .mud-table-body .mud-table-cell {
    height: 3.125rem;
    padding-inline: 0.75rem;
    border-bottom: 1px solid var(--elev-border-soft);
    color: var(--elev-gray-900);
    font-size: var(--elev-text-sm-size);
    vertical-align: middle;
}

.service-orders-table-card .mud-table-body .mud-table-row:hover {
    background: rgba(33, 150, 233, 0.04);
}

.service-orders-call-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 1.25rem;
    max-height: 1.25rem;
    padding: 0 0.5rem;
    border-radius: 1rem;
    font-family: Inter, var(--elev-font-sans);
    font-size: 0.6875rem;
    line-height: 1.2;
    font-weight: 500;
    white-space: nowrap;
}

/* Listing/card status colors (same tokens as detail; size stays compact via .service-orders-call-badge) */
.service-orders-call-badge.service-detail-status-badge--open,
.service-orders-call-badge.service-detail-status-badge--neutral {
    color: var(--elev-gray-600);
    background: var(--elev-surface-strong);
}

.service-orders-call-badge.service-detail-status-badge--route {
    color: var(--elev-info);
    background: var(--elev-info-soft);
}

.service-orders-call-badge.service-detail-status-badge--active {
    color: var(--elev-primary);
    background: var(--elev-primary-soft);
}

.service-orders-call-badge.service-detail-status-badge--warning {
    color: var(--elev-warning);
    background: var(--elev-warning-soft);
}

.service-orders-call-badge.service-detail-status-badge--success {
    color: var(--elev-success);
    background: var(--elev-success-soft);
}

.service-orders-call-badge.service-detail-status-badge--danger {
    color: var(--elev-destructive);
    background: var(--elev-destructive-soft);
}

.orders-status-cell {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
}

.orders-pending-stage-badge {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.orders-filter-switches {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.orders-filter-section {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    width: 100%;
    padding-top: 0.25rem;
}

.orders-filter-section__label {
    color: var(--elev-muted);
    font-family: var(--elev-font-sans);
    font-size: var(--elev-text-xs-size);
    font-weight: 600;
    line-height: var(--elev-text-xs-line);
    letter-spacing: 0.02em;
}

.orders-filter-section::after {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background: var(--elev-border-soft);
}

.service-orders-page .elev-filter-drawer .orders-filter-switches .mud-switch .mud-typography,
.service-orders-page .elev-filter-drawer .orders-filter-switches .mud-switch-label,
.dashboard-page .elev-filter-drawer .orders-filter-switches .mud-switch .mud-typography,
.dashboard-page .elev-filter-drawer .orders-filter-switches .mud-switch-label,
.reports-page .elev-filter-drawer .orders-filter-switches .mud-switch .mud-typography,
.reports-page .elev-filter-drawer .orders-filter-switches .mud-switch-label,
.os-workspace-filter-drawer .orders-filter-switches .mud-switch .mud-typography,
.os-workspace-filter-drawer .orders-filter-switches .mud-switch-label {
    font-family: var(--elev-font-sans) !important;
    font-size: var(--elev-text-sm-size) !important;
    font-weight: 500 !important;
    line-height: var(--elev-text-sm-line) !important;
    color: var(--elev-gray-900) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.service-orders-cards-grid {
    margin-top: 0.25rem;
    align-items: stretch;
}

/* 1 / 2 / 3 / 4 via MudItem xs/sm/md/lg; 5 cols only on very wide screens */
@media (min-width: 1600px) {
    .service-orders-cards-grid > .service-orders-card-item.mud-grid-item {
        flex: 0 0 20%;
        max-width: 20%;
    }
}

.service-orders-card-item {
    display: flex;
}

.service-orders-card-item > .service-orders-card {
    width: 100%;
}

.service-orders-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    user-select: none;
    border: 1px solid var(--elev-border);
    border-radius: var(--elev-radius);
    box-shadow: var(--elev-shadow);
    background: var(--elev-surface);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    cursor: pointer;
}

.service-orders-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(10, 13, 20, 0.1);
    background: var(--elev-surface-strong);
}

.service-orders-card > .mud-card-content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.5rem;
    min-height: 0;
    height: 100%;
    padding: 1rem !important;
}

.service-orders-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    min-height: 2rem;
}

.service-orders-card__status {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.35rem;
    max-width: 55%;
    min-width: 0;
}

.service-orders-card__status .service-orders-call-badge {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.service-orders-card__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.5rem;
    min-height: 0;
}

.service-orders-card__body > .listing-org-cell {
    min-height: 2.5rem;
}

.service-orders-card__body > .orders-customer-area {
    min-height: 2.75rem;
    margin: 0;
}

.service-orders-card__equipment {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 1.35rem;
    margin: 0;
}

.service-orders-card__problem {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    min-height: 1.35rem;
    margin: auto 0 0;
}

.service-orders-card .mud-text-title {
    font-size: var(--elev-text-sm-size);
    color: var(--elev-muted);
}

.service-orders-card .mud-text-field {
    color: var(--elev-foreground);
}

.service-orders-card .mud-text-highlight {
    font-weight: 700;
    color: var(--elev-text-bold);
}

.service-orders-card__dates {
    display: grid;
    gap: 0.375rem;
    margin-top: 0.75rem;
}

.service-orders-card__footer {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-top: 0;
    min-width: 0;
    min-height: 2.5rem;
}

.service-orders-card__footer > div {
    display: grid;
    gap: 0.0625rem;
    min-width: 0;
}

.service-orders-card__footer strong {
    color: var(--elev-text-bold);
    font-family: var(--elev-font-sans);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.service-orders-card__footer small {
    color: var(--elev-muted);
    font-family: var(--elev-font-sans);
    font-size: 0.6875rem;
    font-weight: 400;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.service-orders-card__date {
    display: grid;
    gap: 0.125rem;
    min-width: 0;
}

.service-orders-card__date-label {
    color: var(--elev-muted-foreground);
    font-family: var(--elev-font-sans);
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.service-orders-card__date-value {
    color: var(--elev-gray-900);
    font-family: var(--elev-font-sans);
    font-size: var(--elev-text-xs-size);
    font-weight: 500;
    line-height: 1.3;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.service-orders-load-more {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 0;
    color: var(--elev-muted);
    font-family: var(--elev-font-sans);
    font-size: var(--elev-text-sm-size);
    font-weight: 500;
    line-height: var(--elev-text-sm-line);
}

.service-orders-load-more .mud-button-label {
    font-family: var(--elev-font-sans) !important;
    font-size: var(--elev-text-sm-size) !important;
    font-weight: 600 !important;
    line-height: var(--elev-text-sm-line) !important;
    text-transform: none !important;
}

/* Legacy grid-os filter row tweaks (list view) */
div.grid-os table > thead > tr:nth-child(2) > th > div > div.mud-menu {
    display: none;
}

div.grid-os table > thead > tr:nth-child(2) > th > div > button {
    display: none;
}

div.grid-os table > thead > tr:nth-child(2) > th > div:has(> div.mud-input-control > div > div > input:not(:placeholder-shown)) > button {
    display: block;
}

.service-orders-page .mud-switch-button .mud-surface-text,
.dashboard-page .mud-switch-button .mud-surface-text,
.reports-page .mud-switch-button .mud-surface-text {
    color: #fff;
}

@media (max-width: 960px) {
    .service-orders-heading {
        align-items: flex-start;
    }

    .service-orders-actions {
        width: 100%;
        flex-wrap: nowrap;
        justify-content: flex-end;
        gap: 0.5rem;
    }

    .service-orders-actions__primary--full {
        display: none !important;
    }

    .service-orders-actions__primary--icon {
        display: inline-flex !important;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
    }

    .service-orders-actions__primary--icon .mud-icon-root {
        font-size: 1.125rem;
    }

    .orders-table-toolbar {
        flex-wrap: wrap;
        align-items: stretch;
    }

    .orders-table-title {
        flex: 1 1 100%;
        width: 100%;
    }

    .service-orders-page.elev-listing-page .orders-table-toolbar__controls,
    .service-orders-page .orders-table-toolbar__controls,
    .orders-table-toolbar__controls {
        flex: 1 1 100%;
        width: 100%;
        max-width: none;
        margin-left: 0;
        flex-wrap: wrap;
        justify-content: stretch;
        align-items: stretch;
    }

    .service-orders-page .orders-search-field,
    .service-orders-page.elev-listing-page .orders-search-field,
    .orders-search-field,
    .service-orders-page .orders-status-select,
    .orders-status-select,
    .orders-period-select,
    .orders-date-range,
    .orders-view-tabs-row {
        flex: 1 1 100%;
        width: 100%;
        min-width: 0;
        max-width: none;
    }

    .orders-date-range .date-range-trigger {
        width: 100%;
        min-width: 0;
    }

    .orders-view-tabs-row {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .orders-view-tabs-row .orders-view-tabs {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
        max-width: none;
    }

    .orders-view-tabs-row .orders-toolbar-filter {
        flex: 0 0 auto;
        align-self: center;
    }

    .orders-view-tabs.mud-toggle-group {
        display: flex;
        width: 100%;
    }

    .orders-view-tabs .mud-toggle-item {
        flex: 1 1 0;
        min-width: 0;
        justify-content: center;
    }
}

/* --- Create drawer (620px) — Figma Nova ordem de serviço --- */
.mud-dialog-container:has(.service-order-create-drawer) {
    justify-content: flex-end;
    align-items: stretch;
    padding: 0 !important;
}

.service-order-create-drawer.mud-dialog {
    position: relative !important;
    inset: auto !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    width: min(620px, calc(100vw - 28px));
    max-width: min(620px, calc(100vw - 28px));
    height: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border-left: 1px solid var(--elev-stroke-pale);
    box-shadow: -18px 0 48px rgba(10, 13, 18, 0.14);
    background: var(--elev-surface);
    overflow: hidden !important;
}

.service-order-create-drawer__title,
.service-order-create-drawer .mud-dialog-title {
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
    min-height: 5.55rem !important;
    padding: 1.25rem !important;
    padding-inline-end: 1.25rem !important;
    border-bottom: 1px solid var(--elev-border-soft);
    box-shadow: none !important;
    background: var(--elev-surface) !important;
}

.service-order-create-drawer__heading {
    display: flex;
    flex: 1 1 auto;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    min-width: 0;
    padding-right: 0;
}

.service-order-create-drawer__heading > div:first-child {
    min-width: 0;
    flex: 1 1 auto;
}

.service-order-create-drawer__heading h2,
.service-order-create-drawer__heading .mud-typography,
.elev-filter-drawer__title {
    margin: 0 !important;
    color: var(--elev-foreground) !important;
    font-family: var(--elev-font-display) !important;
    font-size: var(--elev-text-lg-size) !important;
    line-height: var(--elev-text-lg-line) !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
}

.service-order-create-drawer__heading p,
.elev-filter-drawer__subtitle {
    margin: 0.25rem 0 0 !important;
    color: var(--elev-muted) !important;
    font-family: var(--elev-font-sans) !important;
    font-size: var(--elev-text-sm-size) !important;
    line-height: var(--elev-text-sm-line) !important;
    font-weight: 400 !important;
}

.service-order-create-drawer__close.mud-icon-button,
.elev-filter-drawer__header > .mud-icon-button {
    flex: 0 0 auto;
    width: 3rem !important;
    height: 3rem !important;
    min-width: 3rem !important;
    padding: 0.75rem !important;
    color: var(--elev-foreground) !important;
}

/* Prefer the explicit header close; hide Mud's absolute default to avoid duplicates. */
.service-order-create-drawer .mud-button-close {
    display: none !important;
}

.service-order-create-drawer__content,
.service-order-create-drawer .mud-dialog-content {
    position: relative !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 1rem 1.25rem !important;
    overflow-y: auto;
    background: var(--elev-surface);
}

.service-order-create-drawer .elev-page-loading-overlay.mud-overlay {
    position: absolute !important;
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    z-index: 5;
}

/* Legacy wrapper also scrolled — keep a single scrollbar on the drawer content */
.service-order-create-drawer .dialog-modal-body-div,
.service-order-create-drawer .dialog-modal-body {
    max-height: none !important;
    overflow: visible !important;
    padding-right: 0 !important;
}

.new-order-contract-input {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.new-order-contract-input .create-os-contract-autocomplete {
    flex: 1 1 auto;
    min-width: 0;
}

.new-order-contract-search {
    flex: 0 0 auto;
}

.new-order-contract-card {
    display: grid;
    gap: 0.25rem;
    padding: 0.8125rem;
    border: 1px solid var(--elev-border);
    border-radius: 12px;
    background: var(--elev-surface-soft);
}

.new-order-contract-card strong {
    color: var(--elev-text-bold);
    font-size: var(--elev-text-sm-size);
    font-weight: 600;
    line-height: 1.3;
}

.new-order-contract-card span,
.new-order-contract-card small {
    color: var(--elev-muted);
    font-size: var(--elev-text-xs-size);
    line-height: 1.35;
}

.new-order-field__helper {
    display: block;
    margin-top: 0.375rem;
    color: #8c8f96;
    font-size: var(--elev-text-xs-size);
    font-weight: 400;
    line-height: 1.35;
}

.new-order-alert {
    border-radius: 12px !important;
}

.new-order-priority {
    color: var(--elev-destructive);
}

.new-order-empty-state {
    display: grid;
    place-items: center;
    min-height: 3.125rem;
    padding: 0.875rem;
    border: 1px dashed var(--elev-border);
    border-radius: 12px;
    background: var(--elev-surface-soft);
    color: var(--elev-muted);
    text-align: center;
    font-size: var(--elev-text-sm-size);
    font-weight: 500;
    line-height: var(--elev-text-sm-line);
}

.new-order-meta {
    display: grid;
    gap: 0.75rem;
    padding-top: 0.25rem;
}

.new-order-meta__item {
    display: grid;
    gap: 0.25rem;
}

.new-order-meta__label {
    color: var(--elev-primary);
    font-family: var(--elev-font-sans);
    font-size: var(--elev-text-xs-size, 0.75rem);
    line-height: var(--elev-text-xs-line, 1rem);
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
}

.new-order-meta__value {
    color: var(--elev-gray-900);
    font-size: var(--elev-text-sm-size);
    font-weight: 500;
    line-height: 1.35;
}

.new-order-meta__value--with-avatar {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.new-order-meta__avatar.mud-avatar {
    width: 1.75rem !important;
    height: 1.75rem !important;
    font-size: 0.6875rem !important;
    flex-shrink: 0;
}

.new-order-user-stack {
    display: grid;
    gap: 0.625rem;
    width: 100%;
    min-width: 0;
}

.new-order-user-entry {
    display: grid;
    gap: 0.25rem;
    min-width: 0;
}

.new-order-user-entry__role {
    color: var(--elev-primary);
    font-family: var(--elev-font-sans);
    font-size: var(--elev-text-xs-size, 0.75rem);
    line-height: var(--elev-text-xs-line, 1rem);
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
}

.new-order-user-entry__people {
    display: grid;
    gap: 0.5rem;
    min-width: 0;
}

.service-order-create-drawer .new-order-user-entry .service-detail-user-row {
    display: inline-flex;
    width: auto;
    max-width: 100%;
    column-gap: 0.5rem;
}

.service-order-create-drawer .new-order-user-entry .service-detail-user-row__name {
    flex: 0 1 auto;
    width: auto;
}

.service-order-create-drawer .new-order-user-entry .service-detail-user-row__menu.mud-menu {
    justify-self: start;
    margin-inline-start: 0;
}

.service-order-create-drawer__footer,
.service-order-create-drawer .mud-dialog-actions.service-order-create-drawer__footer {
    display: flex !important;
    flex: 0 0 auto !important;
    gap: 0.75rem;
    margin: 0 !important;
    padding: 1.25rem !important;
    border-top: 1px solid var(--elev-border-soft);
    border-radius: 0 !important;
    box-shadow: none !important;
    background: var(--elev-surface) !important;
}

.service-order-create-drawer__btn {
    flex: 1 1 0;
    min-height: 2.25rem;
    border-radius: var(--elev-radius-pill) !important;
    text-transform: none !important;
    font-family: var(--elev-font-sans) !important;
    font-size: var(--elev-text-sm-size) !important;
    font-weight: 600 !important;
    line-height: var(--elev-text-sm-line) !important;
}

.service-order-create-drawer .custom-autocomplete-item,
.service-order-create-drawer .custom-autocomplete-item strong,
.service-order-create-drawer .custom-autocomplete-item small,
.service-order-create-drawer .custom-autocomplete-item span {
    font-family: var(--elev-font-sans) !important;
    font-size: var(--elev-text-sm-size) !important;
    font-weight: 500 !important;
    line-height: var(--elev-text-sm-line) !important;
}

.service-order-create-drawer .custom-autocomplete-item strong {
    font-weight: 600 !important;
    color: var(--elev-gray-900) !important;
}

.service-order-create-drawer .custom-autocomplete-item small,
.service-order-create-drawer .custom-item-color {
    font-size: var(--elev-text-xs-size) !important;
    line-height: var(--elev-text-xs-line) !important;
    color: var(--elev-muted) !important;
}

@media (max-width: 640.98px) {
    .service-order-create-drawer.mud-dialog {
        width: 100vw;
        max-width: 100vw;
    }
}

.service-detail-title-group {
    display: grid;
    gap: 0.5rem;
    min-width: 0;
    flex: 1 1 auto;
}

/* --- Edit detail: dialog confined to app-shell content area --- */
/* Do not use `inset` here — it locks `left` and blocks the sidebar hover override. */
/* Nested :has() (body:has(.app-shell:has(...))) is unreliable; match .sidebar directly. */
body:has(.service-order-detail-dialog) .app-shell > .sidebar {
    z-index: calc(var(--mud-zindex-dialog, 1400) + 20);
}

body:has(.service-order-detail-dialog) .topbar {
    z-index: calc(var(--mud-zindex-dialog, 1400) + 20);
}

.mud-dialog-container:has(.service-order-detail-dialog--loading) {
    background: transparent !important;
}

.mud-dialog-container:has(.service-order-detail-dialog--loading) > .mud-overlay {
    background: transparent !important;
    opacity: 0 !important;
}

.service-order-detail-dialog--loading.mud-dialog,
.service-order-detail-dialog--loading .mud-dialog-content,
.service-order-detail-dialog--loading .service-order-detail-dialog__content {
    background: transparent !important;
    box-shadow: none !important;
}

.service-order-detail-dialog--loading .service-order-detail-dialog__content {
    position: relative;
    min-height: 100%;
    padding: 0 !important;
    overflow: hidden;
}

.service-order-detail-dialog--loading .elev-page-loading-overlay.mud-overlay {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

.mud-dialog-container:has(.service-order-detail-dialog) {
    position: fixed !important;
    top: var(--elev-topbar-height) !important;
    right: 0 !important;
    bottom: 0 !important;
    left: var(--elev-sidebar-collapsed-width) !important;
    width: auto !important;
    height: auto !important;
    align-items: stretch;
    justify-content: stretch;
    z-index: 1100;
    overflow: hidden;
    border-top-left-radius: 1.25rem;
    background: var(--elev-bg-pale);
    transition: left 0.24s ease;
}

body:has(.sidebar:hover) .mud-dialog-container:has(.service-order-detail-dialog),
body:has(.sidebar:focus-within) .mud-dialog-container:has(.service-order-detail-dialog) {
    left: var(--elev-sidebar-width) !important;
}

.mud-dialog-container:has(.service-order-detail-dialog) > .mud-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: var(--elev-bg-pale) !important;
    backdrop-filter: none !important;
    opacity: 1 !important;
    border-top-left-radius: 1.25rem;
}

.service-order-detail-dialog.mud-dialog {
    position: relative;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    max-height: none !important;
    margin: 0 !important;
    border-radius: 0;
    box-shadow: none;
    background: var(--elev-bg-pale);
    /* Allow nested fixed drawers to use the viewport (not the dialog box). */
    transform: none !important;
    filter: none !important;
    perspective: none !important;
    contain: none !important;
}

.mud-dialog-container:has(.service-order-detail-dialog),
.mud-dialog-container:has(.service-order-detail-dialog) .mud-dialog-content,
.mud-dialog-container:has(.service-order-detail-dialog) .service-order-detail-dialog__content {
    transform: none !important;
    filter: none !important;
    perspective: none !important;
    contain: none !important;
}

.service-order-detail-dialog .mud-dialog-title,
.service-order-detail-dialog .d-none {
    display: none !important;
    padding: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    overflow: hidden;
}

.service-order-detail-dialog .mud-dialog-content,
.service-order-detail-dialog .service-order-detail-dialog__content {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    padding: 1.25rem !important;
    overflow-y: auto;
    overflow-x: hidden !important;
    background: var(--elev-bg-pale);
}

.service-order-detail-dialog.os-workspace-dialog .service-order-detail-dialog__content {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.os-workspace-page {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    gap: 0.75rem;
}

.os-workspace-page > .service-detail-heading {
    flex-shrink: 0;
}

.pending-management-actions,
.os-workspace-actions {
    margin-left: auto;
}

.pending-management-actions .orders-date-range,
.os-workspace-actions .orders-date-range {
    flex: 0 1 auto;
    min-width: 0;
}

.pending-management-actions .orders-date-range .date-range-trigger,
.os-workspace-actions .orders-date-range .date-range-trigger {
    height: 2.5rem;
    min-width: 12.5rem;
    border: 1px solid var(--elev-border);
    background: var(--elev-surface);
}

/* Dual calendar popover in pending/scheduling workspace — don't clip while open */
.service-order-detail-dialog.os-workspace-dialog:has(.date-range-filter.is-open) .service-order-detail-dialog__content {
    overflow: visible !important;
}

.os-workspace-page:has(.date-range-filter.is-open) {
    overflow: visible;
    z-index: 40;
}

@media (max-width: 960px) {
    .pending-management-actions,
    .os-workspace-actions {
        width: 100%;
        justify-content: flex-end;
    }

    .pending-management-actions .orders-date-range,
    .os-workspace-actions .orders-date-range {
        flex: 1 1 auto;
    }

    .pending-management-actions .orders-date-range .date-range-trigger,
    .os-workspace-actions .orders-date-range .date-range-trigger {
        width: 100%;
        min-width: 0;
    }

    .pending-management-actions .service-orders-actions__icon,
    .pending-management-actions .service-orders-actions__filter,
    .os-workspace-actions .service-orders-actions__icon,
    .os-workspace-actions .service-orders-actions__filter {
        flex: 0 0 auto;
    }
}

.service-detail-page {
    position: relative;
    display: grid;
    gap: 1.25rem;
    align-content: start;
    padding: 0;
    width: 100%;
    max-width: 100%;
    min-height: 0;
}

@media (max-width: 960px) {
    /* Sidebar is off-canvas (hamburger); dialog must fill the full shell width. */
    .mud-dialog-container:has(.service-order-detail-dialog) {
        left: 0 !important;
        border-radius: 0 !important;
    }

    body:has(.sidebar:hover) .mud-dialog-container:has(.service-order-detail-dialog),
    body:has(.sidebar:focus-within) .mud-dialog-container:has(.service-order-detail-dialog) {
        left: 0 !important;
    }

    .service-order-detail-dialog.mud-dialog {
        border-radius: 0 !important;
    }

    .mud-dialog-container:has(.service-order-detail-dialog) > .mud-overlay {
        border-radius: 0 !important;
    }

    .service-order-detail-dialog .mud-dialog-content,
    .service-order-detail-dialog .service-order-detail-dialog__content {
        padding: 1rem !important;
        border-radius: 0 !important;
    }

    .service-detail-heading {
        width: 100%;
        align-items: flex-start;
    }

    .service-detail-title-group {
        flex: 1 1 100%;
        min-width: 100%;
    }

    .service-detail-more-menu {
        margin-left: auto;
    }
}

.service-order-detail-dialog .mud-select-input,
.service-order-detail-dialog .mud-input-slot,
.service-order-detail-dialog input.mud-input-slot,
.service-order-detail-dialog textarea.mud-input-slot,
.service-detail-page .mud-select-input,
.service-detail-page .mud-input-slot,
.service-detail-page input.mud-input-slot,
.service-detail-page textarea.mud-input-slot {
    font-family: var(--elev-font-sans) !important;
    font-size: var(--elev-text-sm-size) !important;
    font-weight: 500 !important;
    line-height: var(--elev-text-sm-line) !important;
    color: var(--elev-gray-900) !important;
}

.service-order-detail-dialog .mud-input-label,
.service-detail-page .mud-input-label {
    font-family: var(--elev-font-sans) !important;
    font-size: var(--elev-text-xs-size) !important;
    line-height: var(--elev-text-xs-line) !important;
    color: var(--elev-muted) !important;
}

.service-detail-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.back-link-button {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    width: fit-content;
    padding: 0;
    border: 0;
    color: var(--elev-primary);
    background: transparent;
    font-family: var(--elev-font-sans);
    font-size: var(--elev-text-xs-size);
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
}

.back-link-button:hover {
    color: var(--elev-primary-hover);
}

.back-link-button__icon {
    width: 1rem;
    height: 1rem;
    font-size: 1rem !important;
}

.service-detail-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    margin: 0;
    color: var(--elev-text-bold);
    font-family: var(--elev-font-sans);
    font-size: var(--elev-text-xl-size);
    line-height: var(--elev-text-xl-line);
    font-weight: 600;
}

.service-detail-title__text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.service-detail-status-badge {
    flex: 0 0 auto;
    min-height: 1.5rem;
    max-height: none;
    padding: 0.125rem 0.625rem;
    font-size: var(--elev-text-sm-size);
    line-height: var(--elev-text-sm-line);
}

.service-detail-status-badge--open,
.service-detail-status-badge--neutral {
    color: var(--elev-gray-600);
    background: var(--elev-surface-strong);
}

.service-detail-status-badge--route {
    color: var(--elev-info);
    background: var(--elev-info-soft);
}

.service-detail-status-badge--active {
    color: var(--elev-primary);
    background: var(--elev-primary-soft);
}

.service-detail-status-badge--warning {
    color: var(--elev-warning);
    background: var(--elev-warning-soft);
}

.service-detail-status-badge--success {
    color: var(--elev-success);
    background: var(--elev-success-soft);
}

.service-detail-status-badge--danger {
    color: var(--elev-destructive);
    background: var(--elev-destructive-soft);
}

.service-detail-more-menu {
    flex: 0 0 auto;
}

.service-detail-more-menu .mud-menu-activator {
    display: inline-flex;
}

.service-detail-more-menu__popover {
    z-index: calc(var(--mud-zindex-dialog, 1400) + 30) !important;
}

.service-detail-more-menu__popover .mud-list {
    min-width: 10.5rem;
    padding: 0.375rem !important;
    border-radius: 1rem !important;
    box-shadow: 0 10px 32px rgba(10, 13, 18, 0.12) !important;
}

.service-detail-more-menu__item.mud-menu-item,
.service-detail-more-menu__item.mud-menu-item .mud-menu-item-text,
.service-detail-more-menu__item.mud-menu-item .mud-typography {
    min-height: 2.5rem;
    padding: 0.5rem 0.75rem !important;
    border-radius: 0.625rem !important;
    font-family: var(--elev-font-sans) !important;
    font-size: 0.9375rem !important;
    line-height: 1.375rem !important;
    font-weight: 400 !important;
    color: var(--elev-foreground) !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}

.service-detail-more-menu__item.mud-menu-item:hover {
    background: var(--elev-surface-strong) !important;
}

.service-detail-more-menu__item--danger.mud-menu-item,
.service-detail-more-menu__item--danger.mud-menu-item .mud-menu-item-text {
    color: var(--elev-destructive) !important;
}

.service-detail-more-menu__item.mud-menu-item .mud-icon-root {
    margin-right: 0.625rem;
    font-size: 1.125rem !important;
    color: var(--elev-muted) !important;
}

.service-detail-more-menu__item--danger.mud-menu-item .mud-icon-root {
    color: var(--elev-destructive) !important;
}

.service-detail-more-menu__divider {
    margin: 0.25rem 0 !important;
}

.service-detail-more-menu .orders-more-actions.mud-button-root,
.orders-more-actions {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-width: 9.875rem;
    height: 2.75rem;
    padding: 0 0.875rem !important;
    border: 1px solid var(--elev-border) !important;
    border-radius: var(--elev-radius-pill) !important;
    color: var(--elev-foreground) !important;
    background: var(--elev-surface) !important;
    font-family: var(--elev-font-sans) !important;
    font-size: var(--elev-text-sm-size) !important;
    font-weight: 500 !important;
    line-height: var(--elev-text-sm-line) !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    cursor: pointer;
}

.service-detail-more-menu .orders-more-actions.mud-button-root:hover,
.orders-more-actions:hover {
    background: var(--elev-surface-strong);
}

.orders-more-actions__icon {
    width: 1rem;
    height: 1rem;
    font-size: 1rem !important;
}

.service-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 417px);
    gap: 1.25rem;
    align-items: start;
    align-content: start;
}

.service-detail-fields-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem 1rem;
}

.service-detail-fields-grid--single {
    grid-template-columns: minmax(0, 1fr);
}

.service-detail-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.service-detail-field--full {
    grid-column: 1 / -1;
}

.service-detail-field__label {
    color: var(--elev-primary);
    font-family: var(--elev-font-sans);
    font-size: var(--elev-text-xs-size, 0.75rem);
    line-height: var(--elev-text-xs-line, 1rem);
    font-weight: 500;
}

.service-detail-field__value {
    color: var(--elev-foreground);
    font-family: var(--elev-font-sans);
    font-size: var(--elev-text-sm-size);
    line-height: var(--elev-text-sm-line);
    font-weight: 500;
    word-break: break-word;
}

.service-detail-field__value-row {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    min-width: 0;
}

.service-detail-field__value-row .service-detail-field__value {
    flex: 0 1 auto;
    min-width: 0;
}

.service-detail-field__value-stack {
    display: grid;
    gap: 0.25rem;
    width: 100%;
}

.service-detail-field__value-stack .service-detail-field__value {
    display: block;
}

.service-detail-field__value--priority-equipment {
    color: #ffa500;
}

.service-detail-field__value--priority-problem {
    color: #ff0000;
}

.service-detail-field--problems .service-detail-field__value-row {
    width: 100%;
}

.service-detail-problems {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.5rem;
    width: 100%;
}

.service-detail-problems__item {
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.5rem;
}

.service-detail-problems__error {
    color: var(--elev-foreground);
    font-family: var(--elev-font-sans);
    font-size: var(--elev-text-sm-size);
    line-height: var(--elev-text-sm-line);
    font-weight: 500;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.service-detail-problems__category {
    color: var(--elev-muted);
    font-family: var(--elev-font-sans);
    font-size: var(--elev-text-xs-size, 0.75rem);
    line-height: var(--elev-text-xs-line, 1.25);
    font-weight: 400;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.service-detail-field__inline-icon {
    flex: 0 0 auto;
}

.service-detail-field__label-row {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
}

.service-detail-field__edit-action {
    flex: 0 0 auto;
    margin: -0.25rem 0;
}

.service-detail-field--with-action .service-detail-field__label {
    flex: 1 1 auto;
    min-width: 0;
}

.service-detail-person-field__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-width: 0;
}

.service-detail-person-field__row .service-detail-field__value {
    flex: 1 1 auto;
    min-width: 0;
}

.service-detail-person-field__action {
    flex: 0 0 auto;
}

/* OS detail drawers are portaled to document.body (elevaiOsDetailDrawer.mount)
   so they cover the full viewport like listagem filters, without resizing the in-shell dialog. */
.service-order-edit-drawer-shell,
.service-order-pending-stage-drawer-shell,
.service-order-proposal-drawer-shell {
    position: fixed !important;
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    z-index: calc(var(--mud-zindex-dialog, 1400) + 50);
}

.service-order-proposal-generate-drawer-shell {
    position: fixed !important;
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    z-index: calc(var(--mud-zindex-dialog, 1400) + 70);
}

.service-order-edit-drawer-shell.is-open .elev-filter-drawer-backdrop,
.service-order-pending-stage-drawer-shell.is-open .elev-filter-drawer-backdrop,
.service-order-proposal-drawer-shell.is-open .elev-filter-drawer-backdrop {
    background: rgba(10, 13, 18, 0.28) !important;
}

.service-order-proposal-generate-drawer-shell.is-open .elev-filter-drawer-backdrop {
    background: rgba(10, 13, 18, 0.36) !important;
}

.service-order-edit-drawer-shell .elev-filter-drawer,
.service-order-pending-stage-drawer-shell .elev-filter-drawer,
.service-order-proposal-drawer-shell .elev-filter-drawer {
    width: min(100%, 620px);
    height: 100%;
    min-height: 0;
    max-height: none;
    z-index: 2;
}

.service-order-proposal-generate-drawer-shell .elev-filter-drawer {
    width: min(100%, 56rem);
    height: 100%;
    min-height: 0;
    max-height: none;
    z-index: 2;
}

.service-order-edit-drawer-shell .elev-filter-drawer-backdrop,
.service-order-pending-stage-drawer-shell .elev-filter-drawer-backdrop,
.service-order-proposal-drawer-shell .elev-filter-drawer-backdrop,
.service-order-proposal-generate-drawer-shell .elev-filter-drawer-backdrop {
    z-index: 1;
}

body:has(.service-order-detail-dialog) .mud-popover {
    z-index: calc(var(--mud-zindex-dialog, 1400) + 40) !important;
}

/* Portaled to document.body so it covers the topbar, not the in-shell dialog. */
.os-workspace-filter-drawer {
    z-index: calc(var(--mud-zindex-dialog, 1400) + 40);
}

body:has(.os-workspace-filter-drawer.is-open) .mud-popover {
    z-index: calc(var(--mud-zindex-dialog, 1400) + 55) !important;
}

body:has(.service-order-edit-drawer-shell.is-open) .mud-popover,
body:has(.service-order-pending-stage-drawer-shell.is-open) .mud-popover,
body:has(.service-order-proposal-drawer-shell.is-open) .mud-popover {
    z-index: calc(var(--mud-zindex-dialog, 1400) + 60) !important;
}

body:has(.service-order-proposal-generate-drawer-shell.is-open) .mud-popover {
    z-index: calc(var(--mud-zindex-dialog, 1400) + 80) !important;
}

.service-detail-card {
    align-self: start;
    height: auto;
}

.service-detail-card .elev-ui-card__header h2,
.service-detail-card .elev-ui-card__header h3 {
    margin: 0;
    font-size: var(--elev-text-lg-size);
    line-height: var(--elev-text-lg-line);
    font-weight: 600;
    color: var(--elev-foreground);
}

.service-detail-main,
.service-detail-side {
    display: grid;
    gap: 1.25rem;
    align-content: start;
    min-width: 0;
    height: auto;
}

.service-detail-images__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.service-detail-images__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

.service-detail-image-button {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    padding: 0;
    border: 1px solid var(--elev-border-soft);
    border-radius: 12px;
    overflow: hidden;
    background: var(--elev-surface);
    cursor: pointer;
}

.service-detail-image-button img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.service-detail-images__empty,
.events-timeline__empty {
    margin: 0;
    color: var(--elev-muted);
    font-size: var(--elev-text-sm-size);
    line-height: var(--elev-text-sm-line);
}

.location-map-preview {
    position: relative;
    z-index: 0;
    isolation: isolate;
    width: 100%;
    height: 180px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--elev-border-soft);
    background: var(--elev-background);
    margin-bottom: 0.875rem;
}

.location-map-preview__canvas {
    width: 100%;
    height: 100%;
}

.location-map-preview--empty {
    background-color: #d7e0e8;
    background-image:
        linear-gradient(90deg, rgba(255, 255, 255, 0.35) 1px, transparent 1px),
        linear-gradient(rgba(255, 255, 255, 0.35) 1px, transparent 1px),
        linear-gradient(135deg, #c9d5e0 0%, #dbe4ec 42%, #c2cfdb 100%),
        radial-gradient(ellipse at 28% 62%, rgba(148, 163, 184, 0.35) 0%, transparent 48%),
        radial-gradient(ellipse at 72% 34%, rgba(148, 163, 184, 0.28) 0%, transparent 42%);
    background-size:
        28px 28px,
        28px 28px,
        100% 100%,
        100% 100%,
        100% 100%;
}

.location-map-preview__empty {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    pointer-events: none;
    padding: 1rem;
}

.location-map-preview__empty-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    padding: 0.5rem 0.875rem;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.1);
    color: var(--elev-foreground);
    font-size: var(--elev-text-sm-size);
    font-weight: 600;
    line-height: var(--elev-text-sm-line);
    text-align: center;
}

.location-address {
    margin: 0 0 0.75rem;
    color: var(--elev-foreground);
    font-size: var(--elev-text-sm-size);
    line-height: var(--elev-text-sm-line);
    font-weight: 500;
}

.service-detail-field__value-row:has(.service-detail-user-stack),
.service-detail-field__value-row:has(.service-detail-user-row) {
    display: block;
    width: 100%;
}

.service-detail-user-stack {
    display: grid;
    gap: 0.5rem;
    width: 100%;
    min-width: 0;
}

.service-detail-user-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 0.5rem;
    width: 100%;
    min-width: 0;
}

.service-detail-user-row__avatar {
    width: 1.75rem !important;
    height: 1.75rem !important;
    font-size: 0.6875rem !important;
}

.service-detail-user-row__name {
    min-width: 0;
    overflow: hidden;
    color: var(--elev-gray-900);
    font-size: var(--elev-text-sm-size);
    font-weight: 500;
    line-height: var(--elev-text-sm-line);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.service-detail-user-row__menu.mud-menu {
    justify-self: end;
    display: inline-flex;
}

.service-detail-user-row__menu .mud-menu-activator {
    display: inline-flex;
}

.service-detail-user-row__view.mud-icon-button {
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    color: var(--elev-muted) !important;
}

body:has(.service-order-detail-dialog) .mud-popover.service-detail-user-row__popover,
.mud-popover.service-detail-user-row__popover,
.mud-popover.service-detail-user-row__popover .mud-paper,
.mud-popover.service-detail-user-row__popover .mud-list {
    min-width: 16rem;
    max-width: min(20rem, calc(100vw - 2rem));
    padding: 0 !important;
    border: 1px solid var(--elev-border-soft) !important;
    border-radius: 0.75rem !important;
    background: #fff !important;
    background-color: #fff !important;
    opacity: 1 !important;
    box-shadow: 0 12px 32px rgba(10, 13, 18, 0.14) !important;
}

.service-detail-user-card {
    display: grid;
    gap: 0.625rem;
    padding: 0.75rem;
    background: #fff;
}

.service-detail-user-card__row {
    display: grid;
    gap: 0.125rem;
    min-width: 0;
}

.service-detail-user-card__label {
    color: var(--elev-muted);
    font-size: var(--elev-text-xs-size);
    font-weight: 500;
    line-height: var(--elev-text-xs-line);
}

.service-detail-user-card__value {
    color: var(--elev-gray-900);
    font-size: var(--elev-text-sm-size);
    font-weight: 500;
    line-height: var(--elev-text-sm-line);
    overflow-wrap: anywhere;
}

.location-map-preview:fullscreen,
.location-map-preview:-webkit-full-screen,
.location-map-preview.leaflet-fullscreen-on,
.location-map-preview:has(.leaflet-fullscreen-on),
.location-map-preview__canvas.leaflet-fullscreen-on {
    overflow: visible;
    height: 100%;
    border-radius: 0;
}

.location-map-preview .leaflet-container {
    width: 100%;
    height: 100%;
    z-index: 0;
}

.location-map-preview .leaflet-pane,
.location-map-preview .leaflet-control,
.location-map-preview .leaflet-top,
.location-map-preview .leaflet-bottom {
    z-index: 1;
}

.location-map-preview .leaflet-control-zoom a,
.location-map-preview .leaflet-control-fullscreen a {
    width: 2rem;
    height: 2rem;
    line-height: 2rem;
    color: var(--elev-text-bold) !important;
    background: #fff !important;
}

.location-map-preview .leaflet-control-zoom,
.location-map-preview .leaflet-control-fullscreen {
    border: 0 !important;
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(10, 13, 18, 0.16);
}

.location-map-preview .leaflet-popup.location-map-popup-wrapper .leaflet-popup-content-wrapper,
.leaflet-popup.location-map-popup-wrapper .leaflet-popup-content-wrapper {
    padding: 0.5rem 1.5rem 0.5rem 0.625rem;
    border: 0;
    border-radius: 0.5rem;
    background: #fff !important;
    color: var(--elev-gray-900);
    box-shadow: 0 6px 16px rgba(10, 13, 18, 0.16);
}

.location-map-preview .leaflet-popup.location-map-popup-wrapper .leaflet-popup-tip,
.leaflet-popup.location-map-popup-wrapper .leaflet-popup-tip {
    background: #fff !important;
    box-shadow: none;
}

.location-map-preview .leaflet-popup.location-map-popup-wrapper .leaflet-popup-content,
.leaflet-popup.location-map-popup-wrapper .leaflet-popup-content {
    margin: 0 !important;
    min-width: 11rem !important;
    width: auto !important;
}

.leaflet-popup.location-map-popup-wrapper .leaflet-popup-close-button {
    top: 2px !important;
    right: 2px !important;
    width: 1.125rem;
    height: 1.125rem;
    padding: 0 !important;
    border: 0 !important;
    color: var(--elev-muted) !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    line-height: 1.125rem !important;
    text-align: center;
}

.leaflet-popup.location-map-popup-wrapper .leaflet-popup-close-button:hover {
    color: var(--elev-text-bold) !important;
    background: transparent !important;
}

.location-map-popup {
    display: grid;
    gap: 0.125rem;
    min-width: 11rem;
    max-width: 16rem;
    margin: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
    border: 0;
    font-family: var(--elev-font-sans);
    line-height: 1.3;
}

.location-map-popup > strong {
    color: var(--elev-gray-900);
    font-size: 0.75rem;
    font-weight: 600;
    overflow-wrap: break-word;
    word-break: normal;
}

.location-map-popup__meta {
    color: var(--elev-muted);
    font-size: 0.6875rem;
    font-weight: 400;
    line-height: 1.25;
    white-space: nowrap;
}

.location-map-popup--technician {
    min-width: 12.5rem;
    max-width: 17rem;
}

.location-info-grid {
    width: 100%;
}

.service-detail-technician-select {
    max-width: 100%;
    min-width: 0;
}

.service-detail-technician-select .mud-input-control,
.service-detail-technician-select .mud-input-control-input-container {
    max-width: 100%;
    min-width: 0;
}

.service-detail-technician-select .mud-select-input,
.service-detail-technician-select .mud-input-slot {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.service-detail-technician-select .mud-select-item {
    white-space: normal;
}

.events-timeline__header,
.service-detail-events__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.service-detail-events__add.mud-button-root {
    flex-shrink: 0;
    min-height: 2.25rem;
    padding-inline: 0.875rem !important;
    border-radius: var(--elev-radius-pill) !important;
    font-family: var(--elev-font-sans) !important;
    font-size: var(--elev-text-sm-size) !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    text-transform: none !important;
    white-space: nowrap;
    box-shadow: none !important;
}

.service-detail-events__add .mud-button-label {
    gap: 0.375rem;
}

.service-detail-events__add .mud-button-label .mud-icon-root {
    font-size: 1.125rem !important;
}

.service-detail-events__add--mobile {
    display: none !important;
}

.events-timeline {
    display: grid;
    gap: 0;
    max-height: 28rem;
    overflow-y: auto;
    padding: 0.5rem 0.125rem 0 0.625rem;
}

.timeline-item {
    position: relative;
    display: grid;
    grid-template-columns: 1.5rem minmax(0, 1fr);
    column-gap: 0.5rem;
    min-height: 4.875rem;
}

.timeline-marker {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    grid-row: 1;
    grid-column: 1;
    width: 1.125rem;
    height: 1.125rem;
    margin-top: 0.125rem;
    margin-left: 0.1875rem;
    border-radius: 999px;
    background: var(--elev-primary);
}

.timeline-marker__check {
    width: 0.75rem;
    height: 0.75rem;
    font-size: 0.75rem !important;
    color: #fff;
}

.timeline-item--active .timeline-marker {
    width: 1.5rem;
    height: 1.5rem;
    margin-top: 0;
    margin-left: 0;
    background: #fff;
    border: 0.1875rem solid var(--elev-primary);
    box-shadow: 0 0 0 0.5rem rgba(33, 150, 233, 0.1);
}

.timeline-line {
    position: absolute;
    top: 1.5rem;
    bottom: 0;
    left: 0.6875rem;
    width: 0;
    border-left: 1px solid rgba(33, 150, 233, 0.42);
}

.timeline-item--active .timeline-line {
    border-left-style: dashed;
    border-left-color: #cbd5e1;
}

.timeline-content {
    grid-row: 1;
    grid-column: 2;
    min-width: 0;
    padding-bottom: 1rem;
}

.timeline-content__status {
    display: block;
    color: #2a3646;
    font-family: var(--elev-font-sans);
    font-size: var(--elev-text-md-size);
    font-weight: 500;
    line-height: 1.25rem;
}

.timeline-item--active .timeline-content__status {
    color: var(--elev-primary);
    font-size: var(--elev-text-lg-size);
    font-weight: 700;
    line-height: 1.75rem;
}

.timeline-content__meta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
}

.timeline-content__time,
.timeline-content__user {
    display: block;
    margin: 0;
    color: #64748b;
    font-family: var(--elev-font-sans);
    font-size: var(--elev-text-sm-size);
    font-weight: 500;
    line-height: 1.125rem;
}

.timeline-content__meta .timeline-content__time {
    display: inline;
    min-width: 0;
}

.timeline-content__description {
    margin: 0.25rem 0 0;
    font-size: var(--elev-text-sm-size);
    line-height: var(--elev-text-sm-line);
    color: var(--elev-gray-900);
}

.timeline-content__description-text {
    overflow-wrap: anywhere;
}

.timeline-content__errors {
    margin: 0.35rem 0 0;
}

.timeline-content__errors-label {
    display: block;
    margin-bottom: 0.15rem;
    color: var(--elev-muted);
    font-size: var(--elev-text-sm-size);
    line-height: var(--elev-text-sm-line);
    font-weight: 600;
}

.timeline-content__errors-list {
    margin: 0;
    padding-left: 1.1rem;
    color: var(--elev-gray-900);
    font-size: var(--elev-text-sm-size);
    line-height: var(--elev-text-sm-line);
}

.timeline-content__errors-list li {
    margin: 0.1rem 0;
    overflow-wrap: anywhere;
}

.timeline-content__internal-icon {
    flex-shrink: 0;
    width: 1rem !important;
    height: 1rem !important;
    font-size: 1rem !important;
}

.timeline-os-link {
    display: inline;
    width: auto;
    max-width: none;
    padding: 0;
    border: 0;
    margin: 0;
    color: var(--elev-primary);
    background: transparent;
    font: inherit;
    font-weight: 700;
    line-height: inherit;
    text-decoration-line: underline;
    text-decoration-color: var(--elev-primary);
    text-underline-offset: 0.12em;
    cursor: pointer;
    vertical-align: baseline;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.timeline-os-link:hover,
.timeline-os-link:focus {
    color: var(--elev-primary-hover);
    text-decoration-color: var(--elev-primary-hover);
    outline: none;
}

.timeline-content__user-label {
    margin-right: 0.25rem;
}

.timeline-content__user-name {
    color: var(--elev-foreground);
    font-weight: 600;
}

.service-detail-events .mud-data-grid {
    border: 0;
}

/* --- Shared OS dialogs (advanced search, pending, scheduling, etc.) --- */
.service-order-dialog .dialog-modal-title,
.service-order-dialog .mud-dialog-title {
    font-family: var(--elev-font-display) !important;
    font-size: var(--elev-text-lg-size) !important;
    line-height: var(--elev-text-lg-line) !important;
    font-weight: 600 !important;
    color: var(--elev-text-bold) !important;
    letter-spacing: 0 !important;
}

.service-order-dialog .dialog-modal-footer,
.service-order-dialog .mud-dialog-actions {
    border-top: 1px solid var(--elev-border-soft);
    background: var(--elev-surface);
}

.service-order-dialog .mud-select-input,
.service-order-dialog .mud-input-slot,
.service-order-dialog input.mud-input-slot,
.service-order-dialog textarea.mud-input-slot {
    font-family: var(--elev-font-sans) !important;
    font-size: var(--elev-text-sm-size) !important;
    font-weight: 500 !important;
    line-height: var(--elev-text-sm-line) !important;
    color: var(--elev-gray-900) !important;
}

.service-order-dialog .mud-input-label {
    font-family: var(--elev-font-sans) !important;
    font-size: var(--elev-text-sm-size) !important;
    font-weight: 500 !important;
    line-height: var(--elev-text-sm-line) !important;
}

.service-order-dialog .mud-input-slot::placeholder,
.service-order-dialog input.mud-input-slot::placeholder {
    color: var(--elev-muted-foreground) !important;
    font-family: var(--elev-font-sans) !important;
    font-size: var(--elev-text-sm-size) !important;
    font-weight: 400 !important;
    opacity: 1 !important;
}

.service-order-dialog .mud-select .mud-chip,
.service-order-dialog .mud-chip-content {
    font-family: var(--elev-font-sans) !important;
    font-size: var(--elev-text-xs-size) !important;
    font-weight: 500 !important;
    line-height: var(--elev-text-xs-line) !important;
}

.service-order-dialog .mud-button-root,
.service-order-dialog .mud-button-label {
    font-family: var(--elev-font-sans) !important;
    font-size: var(--elev-text-sm-size) !important;
    font-weight: 600 !important;
    line-height: var(--elev-text-sm-line) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.service-order-dialog .mud-link,
.service-order-dialog .small-link {
    font-family: var(--elev-font-sans) !important;
    font-size: var(--elev-text-sm-size) !important;
    font-weight: 600 !important;
    line-height: var(--elev-text-sm-line) !important;
    text-transform: none !important;
}

.service-order-dialog .mud-typography,
.service-order-dialog .mud-typography-body1,
.service-order-dialog .mud-typography-body2 {
    font-family: var(--elev-font-sans) !important;
    font-size: var(--elev-text-sm-size) !important;
    font-weight: 500 !important;
    line-height: var(--elev-text-sm-line) !important;
    color: var(--elev-gray-900) !important;
    letter-spacing: 0 !important;
}

.service-order-dialog .mud-typography-subtitle2 {
    font-family: var(--elev-font-sans) !important;
    font-size: var(--elev-text-sm-size) !important;
    font-weight: 600 !important;
    line-height: var(--elev-text-sm-line) !important;
    color: var(--elev-gray-900) !important;
    letter-spacing: 0 !important;
}

.service-order-dialog .mud-typography-caption {
    font-family: var(--elev-font-sans) !important;
    font-size: var(--elev-text-xs-size) !important;
    font-weight: 500 !important;
    line-height: var(--elev-text-xs-line) !important;
    color: var(--elev-muted) !important;
    letter-spacing: 0 !important;
}

.service-order-dialog .mud-switch .mud-typography,
.service-order-dialog .mud-switch-label {
    font-family: var(--elev-font-sans) !important;
    font-size: var(--elev-text-sm-size) !important;
    font-weight: 500 !important;
    line-height: var(--elev-text-sm-line) !important;
    color: var(--elev-gray-900) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.service-order-dialog .mud-alert-message,
.service-order-dialog .mud-alert-content {
    font-family: var(--elev-font-sans) !important;
    font-size: var(--elev-text-sm-size) !important;
    font-weight: 500 !important;
    line-height: var(--elev-text-sm-line) !important;
}

.service-order-dialog .mud-table-head .mud-table-cell {
    font-family: var(--elev-font-sans) !important;
    font-size: var(--elev-text-sm-size) !important;
    font-weight: 600 !important;
    line-height: var(--elev-text-sm-line) !important;
    color: var(--elev-text-bold) !important;
}

.service-order-dialog .mud-table-body .mud-table-cell {
    font-family: var(--elev-font-sans) !important;
    font-size: var(--elev-text-sm-size) !important;
    font-weight: 400 !important;
    line-height: var(--elev-text-sm-line) !important;
    color: var(--elev-gray-900) !important;
}

.service-order-dialog .mud-tablepager-content,
.service-order-dialog .mud-tablepager-toolbar,
.service-order-dialog .mud-table-pagination-caption,
.service-order-dialog .mud-tablepager .mud-select-input,
.service-order-dialog .mud-tablepager .mud-input-slot,
.service-order-dialog .mud-tablepager .mud-button-root {
    font-family: var(--elev-font-sans) !important;
    font-size: var(--elev-text-sm-size) !important;
    font-weight: 500 !important;
    line-height: var(--elev-text-sm-line) !important;
    color: var(--elev-muted) !important;
    text-transform: none !important;
}

.service-order-dialog .pending-kanban-card-code {
    font-family: var(--elev-font-sans) !important;
    font-size: var(--elev-text-sm-size) !important;
    font-weight: 700 !important;
    line-height: var(--elev-text-sm-line) !important;
    color: var(--elev-text-bold) !important;
    margin-bottom: 4px;
}

.service-order-dialog .pending-kanban-card-customer {
    font-family: var(--elev-font-sans) !important;
    font-size: var(--elev-text-sm-size) !important;
    font-weight: 500 !important;
    line-height: var(--elev-text-sm-line) !important;
    color: var(--elev-gray-900) !important;
}

.service-order-dialog .pending-kanban-card-equipment {
    font-family: var(--elev-font-sans) !important;
    font-size: var(--elev-text-xs-size) !important;
    font-weight: 400 !important;
    line-height: var(--elev-text-xs-line) !important;
    color: var(--elev-muted) !important;
}

/* Pending management kanban layout */
.pending-management-dialog-root .pending-management-dialog-content {
    overflow: hidden !important;
}

.pending-management-dialog {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: auto !important;
    max-height: none !important;
    overflow: hidden !important;
}

.pending-management-content {
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.pending-management-content .pending-kanban-board {
    flex: 1 1 0;
    height: 100%;
    min-height: 0;
}

.pending-kanban-board {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 8px;
    align-items: stretch;
}

.pending-kanban-column {
    flex: 0 0 280px;
    max-width: 280px;
    height: 100%;
    background: var(--elev-bg-muted, #f5f5f5);
    border-radius: var(--elev-radius-md, 8px);
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.pending-kanban-column-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    background: #fff;
    border-radius: var(--elev-radius-md, 8px) var(--elev-radius-md, 8px) 0 0;
    border-bottom: 1px solid var(--elev-border, #e0e0e0);
}

.pending-kanban-column-header-unassigned {
    border-top: 4px solid #9e9e9e;
}

.pending-kanban-column-cards {
    flex: 1 1 0;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 8px;
}

.pending-kanban-card {
    background: #fff;
    border: 1px solid var(--elev-border, #e0e0e0);
    border-radius: var(--elev-radius-md, 8px);
    padding: 10px 12px;
    margin-bottom: 8px;
    cursor: grab;
    user-select: none;
}

.pending-kanban-card:hover {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.pending-kanban-card-ghost {
    opacity: 0.4;
}

.pending-kanban-card-chosen,
.pending-kanban-card-drag {
    opacity: 0.85;
}

.service-order-dialog .calendar-layout .calendar-sidebar h5 {
    font-family: var(--elev-font-display) !important;
    font-size: var(--elev-text-sm-size) !important;
    font-weight: 600 !important;
    line-height: var(--elev-text-sm-line) !important;
    color: var(--elev-text-bold) !important;
}

.service-order-dialog .calendar-accordion__button {
    font-family: var(--elev-font-sans) !important;
    font-size: var(--elev-text-sm-size) !important;
    font-weight: 600 !important;
    line-height: var(--elev-text-sm-line) !important;
    color: var(--elev-gray-900) !important;
}

.service-order-dialog .calendar-accordion__badge {
    font-family: var(--elev-font-sans) !important;
    font-size: var(--elev-text-xs-size) !important;
    font-weight: 600 !important;
    line-height: var(--elev-text-xs-line) !important;
}

.service-order-dialog .external-event,
.service-order-dialog .fc-event,
.service-order-dialog .fc-event-title,
.service-order-dialog .fc .fc-toolbar-title,
.service-order-dialog .fc .fc-col-header-cell-cushion,
.service-order-dialog .fc .fc-daygrid-day-number {
    font-family: var(--elev-font-sans) !important;
    font-size: var(--elev-text-sm-size) !important;
    font-weight: 500 !important;
    line-height: var(--elev-text-sm-line) !important;
}

.service-order-dialog .fc .fc-toolbar-title {
    font-weight: 600 !important;
    color: var(--elev-text-bold) !important;
}

/* Scheduling workspace — calendar layout */
.scheduling-dialog-root .scheduling-dialog-content {
    overflow: hidden !important;
}

.os-workspace-page .calendar-layout {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    margin-top: 0 !important;
}

.calendar-layout {
    display: flex;
    gap: 1rem;
    height: 100%;
    min-height: 0;
}

.calendar-sidebar {
    width: 280px;
    flex: 0 0 280px;
    background-color: var(--elev-surface);
    border: 1px solid var(--elev-border);
    padding: 1rem;
    border-radius: var(--elev-radius);
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, width 0.2s ease, flex-basis 0.2s ease, padding 0.2s ease;
}

.calendar-sidebar__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-shrink: 0;
    min-height: 1.75rem;
}

.calendar-sidebar__title {
    margin: 0;
    min-width: 0;
    flex: 1 1 auto;
}

.calendar-sidebar__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    margin: 0;
    padding: 0;
    border: 1px solid var(--elev-border);
    border-radius: 999px;
    background: var(--elev-surface);
    color: var(--elev-muted);
    cursor: pointer;
}

.calendar-sidebar__toggle:hover {
    color: var(--elev-primary);
    border-color: var(--elev-primary);
    background: var(--elev-primary-soft);
}

.calendar-sidebar__toggle-icon {
    font-size: 1.25rem !important;
    width: 1.25rem !important;
    height: 1.25rem !important;
}

.calendar-sidebar__body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.calendar-sidebar.is-collapsed {
    width: 2.75rem;
    flex: 0 0 2.75rem;
    padding: 0.5rem;
    overflow: hidden;
}

.calendar-sidebar.is-collapsed .calendar-sidebar__header {
    justify-content: center;
}

.calendar-sidebar.is-collapsed .calendar-sidebar__title,
.calendar-sidebar.is-collapsed .calendar-sidebar__body {
    display: none;
}

.calendar-sidebar.is-drop-active {
    border-style: dashed;
    border-color: var(--elev-primary);
}

.calendar-sidebar.is-drop-target {
    background-color: var(--elev-primary-soft);
    box-shadow: inset 0 0 0 2px var(--elev-primary);
}

.calendar-sidebar__search {
    flex-shrink: 0;
}

.calendar-accordion {
    margin-bottom: 8px;
    border-radius: 0.5rem;
    overflow: hidden;
    border: 1px solid var(--elev-border);
    background: var(--elev-surface);
    /* Do not let the flex list crush open/closed sections (clips cards, hides later types). */
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.calendar-accordion:has(> .calendar-accordion__content.is-open) {
    /* Expanded type uses remaining sidebar height; cards scroll inside. */
    flex: 1 1 auto;
    min-height: 0;
}

.calendar-accordion__button {
    width: 100%;
    padding: 10px 12px;
    background-color: var(--elev-surface);
    border: none;
    text-align: left;
    font-family: var(--elev-font-sans);
    font-size: var(--elev-text-sm-size);
    font-weight: 600;
    line-height: var(--elev-text-sm-line);
    color: var(--elev-gray-900);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    flex-shrink: 0;
}

.calendar-accordion__button:hover {
    background-color: var(--elev-surface-soft);
}

.calendar-accordion__label {
    flex: 1 1 auto;
    min-width: 0;
}

.calendar-accordion__badge {
    flex: 0 0 auto;
    background-color: var(--elev-primary-soft);
    color: var(--elev-primary-active);
    padding: 2px 8px;
    border-radius: var(--elev-radius-pill);
    font-family: var(--elev-font-sans);
    font-size: var(--elev-text-xs-size);
    font-weight: 600;
    line-height: var(--elev-text-xs-line);
}

/* Chevron: down when collapsed, up when expanded */
.calendar-accordion__button::after {
    content: "";
    flex: 0 0 1rem;
    width: 1rem;
    height: 1rem;
    margin-left: 0.125rem;
    background-color: var(--elev-muted);
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z'/%3E%3C/svg%3E") center / contain no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z'/%3E%3C/svg%3E") center / contain no-repeat;
    transform: rotate(0deg);
    transition: transform 0.2s ease;
}

.calendar-accordion__button[aria-expanded="true"]::after {
    transform: rotate(180deg);
}

.calendar-accordion__content {
    background-color: var(--elev-surface);
    display: none;
    padding: 0 0.5rem 0.5rem;
}

.calendar-accordion__content.is-open {
    display: block;
    flex: 1 1 auto;
    min-height: 0;
    /* Prefer flex remaining-height; keep a cap when the list itself scrolls. */
    max-height: min(50vh, 28rem);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.calendar-accordion:has(> .calendar-accordion__content.is-open) > .calendar-accordion__content.is-open {
    /* Inside a flex-grown accordion, drop the vh cap so cards use the real leftover height. */
    max-height: none;
}

.calendar-group-card {
    --group-color: var(--elev-primary);
    margin: 0.5rem 0;
    padding: 0;
    background: var(--elev-surface);
    border: 1px solid var(--elev-border);
    border-left: 4px solid var(--group-color);
    border-radius: 0.5rem;
    overflow: hidden;
}

.calendar-group-card__top {
    display: flex;
    align-items: stretch;
    gap: 0;
}

.calendar-group-card__drag {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.65rem 0.75rem;
    cursor: grab;
    background: transparent;
    color: var(--elev-gray-900);
    user-select: none;
}

.calendar-group-card__drag:active {
    cursor: grabbing;
}

.calendar-group-card__title {
    font-family: var(--elev-font-sans);
    font-size: var(--elev-text-sm-size);
    font-weight: 700;
    line-height: var(--elev-text-sm-line);
    color: var(--elev-text-bold);
}

.calendar-group-card__meta {
    font-family: var(--elev-font-sans);
    font-size: var(--elev-text-xs-size);
    font-weight: 500;
    line-height: var(--elev-text-xs-line);
    color: var(--elev-muted);
}

.calendar-group-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    margin-top: 0.15rem;
}

.calendar-group-card__footer .calendar-group-card__count {
    margin: 0 0 0 auto;
    min-width: 0;
}

/* Sidebar sem chip de horario: link alinhado a direita */
.calendar-sidebar .calendar-group-card__footer {
    justify-content: flex-end;
}

.calendar-sidebar .calendar-group-card__footer .calendar-group-card__count {
    margin-left: 0;
}

/* Sem Agendamento: denser cards matching scheduled calendar typography */
.calendar-sidebar .calendar-group-card {
    margin: 0.35rem 0;
}

.calendar-sidebar .calendar-group-card__drag {
    gap: 0.1rem;
    padding: 0.4rem 0.5rem;
}

.calendar-sidebar .calendar-group-card__title {
    font-size: var(--elev-text-xs-size);
    line-height: var(--elev-text-xs-line);
}

.calendar-sidebar .calendar-group-card__count {
    margin-top: 0.05rem;
}

.calendar-sidebar .calendar-group-card__orders {
    gap: 0.25rem;
    max-height: 10rem;
    padding: 0.35rem;
}

.calendar-sidebar .calendar-os-card {
    gap: 0;
    padding: 0.3rem 0.4rem;
    border-radius: 0.35rem;
}

.calendar-sidebar .calendar-os-card__code,
.calendar-sidebar .calendar-os-card__line {
    font-size: var(--elev-text-xs-size);
    line-height: 1.25;
}

.calendar-sidebar .calendar-os-card__eye-btn {
    width: 1.35rem;
    height: 1.35rem;
}

.calendar-sidebar .calendar-os-card__eye.mud-icon-button {
    width: 1.35rem !important;
    height: 1.35rem !important;
    min-width: 1.35rem !important;
}

.calendar-sidebar .calendar-os-card__eye .mud-icon-root {
    font-size: 0.95rem !important;
}

.calendar-group-card__time-chip {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 0;
    padding: 0.15rem 0.5rem;
    border: 1px solid var(--elev-border);
    border-radius: var(--elev-radius-pill, 999px);
    background: var(--elev-surface-soft, #f3f4f6);
    color: var(--elev-text-bold);
    font-family: var(--elev-font-sans);
    font-size: var(--elev-text-xs-size);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: var(--elev-text-xs-line);
    white-space: nowrap;
}

.calendar-group-card__time-chip.is-all-day {
    color: var(--elev-muted);
    background: transparent;
}

.calendar-group-card__count {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin: 0.15rem 0 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--elev-primary);
    font-family: var(--elev-font-sans);
    font-size: var(--elev-text-xs-size);
    font-weight: 600;
    line-height: var(--elev-text-xs-line);
    text-decoration: underline;
    text-underline-offset: 0.15em;
    cursor: pointer;
}

.calendar-group-card__count:hover {
    color: var(--elev-primary-hover);
}

.calendar-group-card__count::after {
    content: "";
    width: 0.875rem;
    height: 0.875rem;
    background-color: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z'/%3E%3C/svg%3E") center / contain no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z'/%3E%3C/svg%3E") center / contain no-repeat;
    transform: rotate(0deg);
    transition: transform 0.2s ease;
    text-decoration: none;
}

.calendar-group-card__count[aria-expanded="true"]::after {
    transform: rotate(180deg);
}

.calendar-group-card__orders {
    display: none;
    flex-direction: column;
    gap: 0.35rem;
    max-height: 12.5rem;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0.5rem;
    border-top: 1px solid var(--elev-border-soft);
    background: var(--elev-surface-soft);
    -webkit-overflow-scrolling: touch;
}

.calendar-group-card.is-detailed .calendar-group-card__orders {
    display: flex;
}

.calendar-os-card {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    margin: 0;
    padding: 0.45rem 0.55rem;
    border: 1px solid var(--elev-border);
    border-left: 3px solid var(--elev-primary);
    border-radius: 0.4rem;
    background: var(--elev-surface);
    color: var(--elev-gray-900);
    cursor: grab;
    user-select: none;
}

.calendar-os-card:active {
    cursor: grabbing;
}

.calendar-os-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem;
}

.calendar-os-card__code {
    font-family: var(--elev-font-sans);
    font-size: var(--elev-text-xs-size);
    font-weight: 700;
    line-height: var(--elev-text-xs-line);
    color: var(--elev-text-bold);
}

.calendar-os-card__eye-wrap {
    display: inline-flex;
    flex-shrink: 0;
    cursor: pointer;
}

.calendar-os-card__eye.mud-icon-button {
    width: 1.75rem !important;
    height: 1.75rem !important;
    min-width: 1.75rem !important;
    padding: 0 !important;
    color: var(--elev-muted) !important;
}

.calendar-os-card__eye .mud-icon-root {
    font-size: 1.05rem !important;
}

.calendar-os-card__eye:hover {
    color: var(--elev-primary) !important;
}

.calendar-os-card__line {
    font-family: var(--elev-font-sans);
    font-size: var(--elev-text-xs-size);
    font-weight: 500;
    line-height: var(--elev-text-xs-line);
    color: var(--elev-gray-900);
}

.calendar-os-card__line--muted {
    color: var(--elev-muted);
}

.calendar-sidebar .badge {
    background-color: var(--elev-primary-soft);
    color: var(--elev-primary-active);
    padding: 2px 8px;
    border-radius: var(--elev-radius-pill);
    font-family: var(--elev-font-sans);
    font-size: var(--elev-text-xs-size);
    font-weight: 600;
    line-height: var(--elev-text-xs-line);
}

.calendar-container {
    flex: 1;
    min-height: 0;
    height: 100%;
    background: var(--elev-surface);
    border: 1px solid var(--elev-border);
    border-radius: var(--elev-radius);
    padding: 0.75rem;
    overflow: hidden;
}

/* FullCalendar — Elev.Ai chrome */
.calendar-container .fc {
    --fc-border-color: var(--elev-border);
    --fc-page-bg-color: var(--elev-surface);
    --fc-neutral-bg-color: var(--elev-surface-soft);
    --fc-neutral-text-color: var(--elev-muted);
    /* Today ≠ drag hover: warm/neutral wash vs primary drop target */
    --fc-today-bg-color: color-mix(in srgb, var(--elev-warning-soft) 72%, transparent);
    --fc-highlight-color: color-mix(in srgb, var(--elev-primary) 28%, transparent);
    --fc-button-text-color: var(--elev-gray-900);
    --fc-button-bg-color: var(--elev-surface);
    --fc-button-border-color: var(--elev-border);
    --fc-button-hover-bg-color: var(--elev-primary-soft);
    --fc-button-hover-border-color: var(--elev-primary);
    --fc-button-active-bg-color: var(--elev-primary);
    --fc-button-active-border-color: var(--elev-primary);
    --fc-button-active-text-color: #fff;
    --fc-event-border-color: transparent;
    --fc-event-text-color: #fff;
    --fc-now-indicator-color: var(--elev-primary);
    height: 100%;
    font-family: var(--elev-font-sans);
}

.calendar-container .fc .fc-toolbar {
    gap: 0.5rem;
    margin-bottom: 0.75rem !important;
    flex-wrap: wrap;
}

.calendar-container .fc .fc-toolbar-title {
    font-family: var(--elev-font-display) !important;
    font-size: var(--elev-text-lg-size) !important;
    font-weight: 600 !important;
    line-height: var(--elev-text-lg-line) !important;
    color: var(--elev-text-bold) !important;
}

.calendar-container .fc .fc-button {
    font-family: var(--elev-font-sans) !important;
    font-size: var(--elev-text-sm-size) !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    text-transform: none !important;
    border-radius: var(--elev-radius-pill) !important;
    padding: 0.4rem 0.85rem !important;
    box-shadow: none !important;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.calendar-container .fc .fc-button:focus {
    box-shadow: 0 0 0 3px var(--elev-primary-soft) !important;
}

.calendar-container .fc .fc-button-primary:not(:disabled).fc-button-active,
.calendar-container .fc .fc-button-primary:not(:disabled):active {
    background-color: var(--elev-primary) !important;
    border-color: var(--elev-primary) !important;
    color: #fff !important;
}

.calendar-container .fc .fc-button-primary:not(:disabled):hover {
    background-color: var(--elev-primary-soft) !important;
    border-color: var(--elev-primary) !important;
    color: var(--elev-primary-active) !important;
}

.calendar-container .fc .fc-button-primary:not(:disabled).fc-button-active:hover {
    background-color: var(--elev-primary-hover) !important;
    border-color: var(--elev-primary-hover) !important;
    color: #fff !important;
}

.calendar-container .fc .fc-button-group {
    gap: 0.25rem;
}

.calendar-container .fc .fc-button-group > .fc-button {
    border-radius: var(--elev-radius-pill) !important;
    margin: 0 !important;
}

.calendar-container .fc .fc-scrollgrid,
.calendar-container .fc .fc-scrollgrid-section > td,
.calendar-container .fc .fc-scrollgrid-section > th {
    border-radius: var(--elev-radius);
}

.calendar-container .fc .fc-scrollgrid {
    border: 1px solid var(--elev-border) !important;
    border-radius: var(--elev-radius) !important;
    overflow: hidden;
}

.calendar-container .fc .fc-col-header-cell {
    background: var(--elev-surface-soft);
}

.calendar-container .fc .fc-col-header-cell-cushion {
    font-family: var(--elev-font-sans) !important;
    font-size: var(--elev-text-xs-size) !important;
    font-weight: 600 !important;
    line-height: var(--elev-text-xs-line) !important;
    color: var(--elev-muted) !important;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding: 0.5rem 0.25rem !important;
}

.calendar-container .fc .fc-daygrid-day-number {
    font-family: var(--elev-font-sans) !important;
    font-size: var(--elev-text-sm-size) !important;
    font-weight: 600 !important;
    color: var(--elev-gray-900) !important;
    padding: 0.35rem 0.5rem !important;
}

.calendar-container .fc .fc-daygrid-day.fc-day-today .fc-daygrid-day-number {
    background: var(--elev-primary);
    color: #fff !important;
    border-radius: var(--elev-radius-pill);
    width: 1.75rem;
    height: 1.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    margin: 0.25rem;
}

/* Native / custom time-slot drop highlight (week & day) */
.calendar-container .fc .fc-highlight {
    background: color-mix(in srgb, var(--elev-primary) 32%, transparent) !important;
    border-radius: 0.35rem;
}

.calendar-container .fc .fc-timegrid-col-bg .fc-highlight,
.calendar-container .fc .fc-timegrid-col-bg .is-drag-over-slot {
    position: absolute;
    left: 0;
    right: 0;
    bottom: auto !important;
    z-index: 4;
    pointer-events: none;
    background: color-mix(in srgb, var(--elev-primary) 34%, transparent) !important;
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--elev-primary) 55%, transparent);
    border-radius: 0.35rem;
}

/* Month only: full-day drag target */
.calendar-container .fc .fc-daygrid-day.is-drag-over-day {
    background-color: color-mix(in srgb, var(--elev-primary) 16%, transparent) !important;
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--elev-primary) 50%, transparent);
}

.calendar-container .fc .fc-daygrid-day.fc-day-today.is-drag-over-day {
    background-color: color-mix(in srgb, var(--elev-primary) 20%, transparent) !important;
}

/* Keep week/day all-day strip hittable when empty (otherwise drag snaps to hidden pre-scroll hours). */
.calendar-container .fc .fc-timegrid .fc-daygrid-body .fc-daygrid-day-frame {
    min-height: 2.25rem;
}

.calendar-container .fc .fc-daygrid-day.fc-day-other .fc-daygrid-day-number {
    color: var(--elev-muted-foreground) !important;
    font-weight: 500 !important;
}

.calendar-container .fc .fc-event {
    border-radius: 0.5rem !important;
    border: none !important;
    box-shadow: none;
}

.calendar-container .fc .fc-daygrid-event {
    display: block !important;
    margin: 2px 2px !important;
    padding: 0 !important;
    background: transparent !important;
    max-width: calc(100% - 4px);
    overflow: hidden;
    box-sizing: border-box;
}

.calendar-container .fc .fc-daygrid-event.calendar-fc-group-event,
.calendar-container .fc .fc-timegrid-event.calendar-fc-group-event {
    background: transparent !important;
    border: none !important;
}

.calendar-container .fc .fc-daygrid-event.calendar-fc-group-event .fc-event-main {
    padding: 0 !important;
    color: inherit !important;
    overflow: hidden;
    max-width: 100%;
}

.calendar-container .fc .fc-timegrid-event.calendar-fc-group-event {
    /* Tall enough for wrapped client name + time/OS footer. */
    min-height: 6.75rem !important;
    overflow: visible !important;
}

.calendar-container .fc .fc-timegrid-event-harness {
    overflow: visible !important;
}

.calendar-container .fc .fc-timegrid-event-harness:hover,
.calendar-container .fc .fc-timegrid-event-harness:has(.fc-event:hover) {
    z-index: 6 !important;
}

.calendar-container .fc .fc-timegrid-event.calendar-fc-group-event .fc-event-main {
    padding: 0 !important;
    color: inherit !important;
    overflow: visible !important;
    height: auto !important;
    min-height: 100%;
}

.calendar-container .fc .fc-daygrid-event .calendar-fc-group-card {
    margin: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    cursor: grab;
}

.calendar-container .fc .fc-timegrid-event .calendar-fc-group-card {
    margin: 0;
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 100%;
    box-sizing: border-box;
    overflow: visible;
    cursor: grab;
    display: flex;
    flex-direction: column;
    background: var(--elev-surface, #fff);
}

.calendar-container .fc .calendar-fc-group-card .calendar-group-card__title {
    font-size: var(--elev-text-xs-size);
    line-height: var(--elev-text-xs-line);
    overflow: visible;
    text-overflow: unset;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.calendar-container .fc .fc-daygrid-event .calendar-fc-group-card .calendar-group-card__drag {
    padding: 0.45rem 0.55rem;
}

.calendar-container .fc .fc-timegrid-event .calendar-fc-group-card .calendar-group-card__drag {
    flex: 1 1 auto;
    min-height: 0;
    gap: 0.1rem;
    padding: 0.3rem 0.4rem;
}

.calendar-container .fc .calendar-fc-group-card .calendar-group-card__orders {
    max-height: 10rem;
}

.calendar-container .fc .calendar-fc-os-card {
    cursor: grab;
    border-left-width: 3px !important;
    border-left-style: solid !important;
    border-left-color: var(--os-color, var(--group-color, var(--elev-primary))) !important;
}

.calendar-container .fc .calendar-fc-os-card:active {
    cursor: grabbing;
}

.calendar-container .fc .calendar-fc-group-card {
    border-left-color: var(--group-color, var(--elev-primary)) !important;
}

/* Drag mirror is appended to body (fixedMirrorParent / appendTo) — keep above shell dialog. */
body > .fc-event-dragging,
body > .fc-event.fc-event-dragging {
    z-index: 12000 !important;
    pointer-events: none !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
}

/* Sidebar group drag: mirror is .calendar-group-card__drag — paint full card chrome. */
body > .fc-event-dragging.calendar-group-card__drag,
body > .fc-event-dragging.external-event:not(.calendar-os-card):not(.calendar-fc-os-card) {
    background: var(--elev-surface, #fff) !important;
    border: 1px solid var(--elev-border) !important;
    border-left: 4px solid var(--group-color, var(--elev-primary)) !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18) !important;
    /* Allow injected time chip to expand the painted card (FC locks source height). */
    overflow: visible !important;
    box-sizing: border-box !important;
}

body > .fc-event-dragging.calendar-group-card__drag .calendar-group-card__footer,
body > .fc-event-dragging.external-event .calendar-group-card__footer {
    flex-wrap: nowrap;
    min-width: 0;
}

/* Sidebar OS card drag — keep compact chrome (do not stretch like FC harness). */
body > .fc-event-dragging.calendar-os-card,
body > .fc-event-dragging.calendar-fc-os-card {
    background: var(--elev-surface, #fff) !important;
    border: 1px solid var(--elev-border) !important;
    border-left: 3px solid var(--os-color, var(--group-color, var(--elev-primary))) !important;
    border-radius: 0.4rem !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18) !important;
    box-sizing: border-box !important;
    max-width: 16rem !important;
}

/* Elev card-only clone (scheduled → scheduled). */
body.fc-elev-dragging > #fc-elev-drag-mirror {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: var(--elev-surface, #fff) !important;
    border: 1px solid var(--elev-border) !important;
    border-left: 4px solid var(--group-color, var(--elev-primary)) !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18) !important;
}

body.fc-elev-dragging > #fc-elev-drag-mirror.calendar-os-card,
body.fc-elev-dragging > #fc-elev-drag-mirror.calendar-fc-os-card {
    border-left-width: 3px !important;
    border-radius: 0.4rem !important;
}

/* Only suppress FC harness mirrors when our elev clone is active. */
body.fc-elev-dragging:has(#fc-elev-drag-mirror) .calendar-container .fc-event-mirror,
body.fc-elev-dragging:has(#fc-elev-drag-mirror) > .fc-event-dragging:not(#fc-elev-drag-mirror),
body.fc-elev-dragging:has(#fc-elev-drag-mirror) > .fc-event.fc-event-dragging:not(#fc-elev-drag-mirror) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    box-shadow: none !important;
}

/* Sidebar → calendar: hide translucent in-calendar FC preview (body mirror stays). */
body.fc-elev-dragging:not(:has(#fc-elev-drag-mirror)) .calendar-container .fc-event-mirror {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.calendar-os-card__eye-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0.35rem;
    background: transparent;
    color: var(--elev-muted);
    cursor: pointer;
}

.calendar-os-card__eye-btn:hover {
    color: var(--elev-primary);
}

.calendar-container .fc .fc-event-title,
.calendar-container .fc .fc-event-time {
    font-family: var(--elev-font-sans) !important;
    font-size: var(--elev-text-xs-size) !important;
    font-weight: 600 !important;
    line-height: var(--elev-text-xs-line) !important;
}

.calendar-container .fc .fc-timegrid-slot-label-cushion,
.calendar-container .fc .fc-timegrid-axis-cushion {
    font-family: var(--elev-font-sans) !important;
    font-size: var(--elev-text-xs-size) !important;
    color: var(--elev-muted) !important;
}

.calendar-container .fc .fc-timegrid-now-indicator-line {
    border-color: var(--elev-primary) !important;
}

.calendar-container .fc .fc-timegrid-now-indicator-arrow {
    border-top-color: var(--elev-primary) !important;
    border-bottom-color: var(--elev-primary) !important;
}

.external-event {
    cursor: grab;
    user-select: none;
    touch-action: none;
}

.external-event:active {
    cursor: grabbing;
}

.fc-event {
    cursor: all-scroll;
    white-space: normal;
}

.fc-event:hover {
    opacity: 0.85;
}

.calendar-container .fc .calendar-fc-group-event:hover {
    opacity: 1;
}

#unscheduled-events-container {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

@media (max-width: 960px) {
    .calendar-layout {
        flex-direction: column;
    }

    .calendar-sidebar {
        width: 100%;
        flex: 0 0 auto;
        max-height: 40vh;
    }
}

/* Dropdown popovers (portaled) from OS dialogs */
body:has(.service-order-dialog) .mud-popover .mud-list-item,
body:has(.service-order-dialog) .mud-popover .mud-list-item-text,
body:has(.service-order-dialog) .mud-popover .mud-list-item .mud-typography {
    font-family: var(--elev-font-sans) !important;
    font-size: var(--elev-text-sm-size) !important;
    font-weight: 500 !important;
    line-height: var(--elev-text-sm-line) !important;
    color: var(--elev-gray-900) !important;
}

body:has(.service-order-dialog) .mud-popover .mud-list-item.mud-selected-item,
body:has(.service-order-dialog) .mud-popover .mud-list-item.mud-selected-item .mud-list-item-text {
    color: var(--elev-primary) !important;
    font-weight: 600 !important;
}

/* --- Map preview card --- */
.orders-map {
    position: relative;
    z-index: 0;
    width: 100%;
    height: 26.25rem;
    overflow: hidden;
    isolation: isolate;
    border: 1px solid #dfe6ef;
    border-radius: 12px;
    background:
        linear-gradient(90deg, rgba(33, 150, 233, 0.08) 1px, transparent 1px),
        linear-gradient(rgba(33, 150, 233, 0.08) 1px, transparent 1px),
        #eef5fb;
    background-size: 4.25rem 4.25rem;
}

.orders-map__canvas,
.orders-map .leaflet-container {
    width: 100%;
    height: 100%;
    z-index: 0;
}

.orders-map .leaflet-pane,
.orders-map .leaflet-control,
.orders-map .leaflet-top,
.orders-map .leaflet-bottom {
    z-index: 1;
}

.leaflet-div-icon.orders-map-marker-icon {
    background: transparent !important;
    border: none !important;
    overflow: visible !important;
}

.leaflet-div-icon.orders-map-cluster-icon {
    background: transparent !important;
    border: none !important;
    overflow: visible !important;
}

.orders-map-cluster-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.orders-map-cluster {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.96);
    background:
        radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.18), transparent 52%),
        linear-gradient(160deg, #3d4f66 0%, #243447 55%, #1a2636 100%);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow:
        0 0 0 6px rgba(36, 52, 71, 0.12),
        0 0 18px rgba(26, 38, 54, 0.35),
        0 8px 18px rgba(10, 13, 18, 0.22);
    font-family: var(--elev-font-sans, inherit);
    font-weight: 700;
    line-height: 1;
    backdrop-filter: blur(2px);
}

.orders-map-cluster--xs {
    font-size: 0.75rem;
}

.orders-map-cluster--sm {
    font-size: 0.8125rem;
}

.orders-map-cluster--md {
    font-size: 0.875rem;
}

.orders-map-cluster--lg {
    font-size: 0.9375rem;
}

.orders-map-cluster--xl {
    font-size: 1rem;
}

.orders-map-cluster-wrap.is-priority-problem:before,
.orders-map-cluster-wrap.is-priority-problem:after,
.orders-map-cluster-wrap.is-priority-equipment:before,
.orders-map-cluster-wrap.is-priority-equipment:after {
    position: absolute;
    inset: 50% auto auto 50%;
    z-index: 0;
    width: 74px;
    height: 74px;
    border-radius: 999px;
    content: "";
    transform: translate(-50%, -50%) scale(0.54);
    animation: orders-map-urgent-pulse 1.25s ease-out infinite;
    pointer-events: none;
}

.orders-map-cluster-wrap.is-priority-problem:before,
.orders-map-cluster-wrap.is-priority-problem:after {
    background: #e02d3c6b;
    box-shadow: 0 0 0 10px #e02d3c1a;
}

.orders-map-cluster-wrap.is-priority-equipment:before,
.orders-map-cluster-wrap.is-priority-equipment:after {
    background: #e073066b;
    box-shadow: 0 0 0 10px #e073061a;
}

.orders-map-cluster-wrap.is-priority-problem:after,
.orders-map-cluster-wrap.is-priority-equipment:after {
    animation-delay: 0.42s;
}

.orders-map-cluster-wrap.is-priority-problem .orders-map-cluster {
    background:
        radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.16), transparent 52%),
        linear-gradient(160deg, #6b3030 0%, #4a1f1f 55%, #321616 100%);
    box-shadow:
        0 0 0 6px rgba(211, 47, 47, 0.12),
        0 0 20px rgba(211, 47, 47, 0.28),
        0 8px 18px rgba(10, 13, 18, 0.22);
}

.orders-map-cluster-wrap.is-priority-equipment .orders-map-cluster {
    background:
        radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.16), transparent 52%),
        linear-gradient(160deg, #6b4a22 0%, #4a3216 55%, #322210 100%);
    box-shadow:
        0 0 0 6px rgba(245, 124, 0, 0.12),
        0 0 20px rgba(245, 124, 0, 0.26),
        0 8px 18px rgba(10, 13, 18, 0.22);
}

.orders-map-marker-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.orders-map-marker {
    border: 1px solid #fff;
    box-shadow: 0 2px 6px rgba(10, 13, 18, 0.18);
    position: relative;
    z-index: 1;
}

.orders-map-marker-wrap.is-priority-problem:before,
.orders-map-marker-wrap.is-priority-problem:after,
.orders-map-marker-wrap.is-priority-equipment:before,
.orders-map-marker-wrap.is-priority-equipment:after {
    position: absolute;
    inset: 50% auto auto 50%;
    z-index: 0;
    width: 74px;
    height: 74px;
    border-radius: 999px;
    content: "";
    transform: translate(-50%, -50%) scale(0.54);
    animation: orders-map-urgent-pulse 1.25s ease-out infinite;
    pointer-events: none;
}

.orders-map-marker-wrap.is-priority-problem:before,
.orders-map-marker-wrap.is-priority-problem:after {
    background: #e02d3c6b;
    box-shadow: 0 0 0 10px #e02d3c1a;
}

.orders-map-marker-wrap.is-priority-equipment:before,
.orders-map-marker-wrap.is-priority-equipment:after {
    background: #e073066b;
    box-shadow: 0 0 0 10px #e073061a;
}

.orders-map-marker-wrap.is-priority-problem:after,
.orders-map-marker-wrap.is-priority-equipment:after {
    animation-delay: 0.42s;
}

.orders-map-marker-wrap.is-priority-problem .orders-map-marker {
    border: 3px solid var(--elev-destructive);
    box-shadow: 0 14px 30px #e02d3c61;
    animation: orders-map-marker-beat 1.25s ease-in-out infinite;
}

.orders-map-marker-wrap.is-priority-equipment .orders-map-marker {
    border: 3px solid var(--elev-warning);
    box-shadow: 0 14px 30px #e0730661;
    animation: orders-map-marker-beat 1.25s ease-in-out infinite;
}

@keyframes orders-map-urgent-pulse {
    0% {
        opacity: 0.9;
        transform: translate(-50%, -50%) scale(0.54);
    }
    76%,
    to {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.5);
    }
}

@keyframes orders-map-marker-beat {
    0%,
    to {
        transform: scale(1);
    }
    45% {
        transform: scale(1.14);
    }
}

.orders-map-tabs {
    position: absolute;
    top: 0.875rem;
    left: 0.875rem;
    z-index: 2;
}

.orders-map-tabs__group {
    /* Visual chrome shared via .orders-view-tabs; keep solid fill over map tiles */
    background: var(--elev-bg-pale);
}

.orders-map-popup {
    /* 90% of previous individual max (22rem) — same width for single and stacked popups */
    width: 19.8rem;
    min-width: 19.8rem;
    max-width: 19.8rem;
    box-sizing: border-box;
    gap: 0.3rem;
    margin: 0;
    padding: 0.625rem 0.75rem;
    cursor: default;
    box-shadow: 0 8px 24px rgba(10, 13, 18, 0.12);
    font-size: 0.8125rem;
}

.orders-map-popup-stack {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    width: 19.8rem;
    min-width: 19.8rem;
    max-width: 19.8rem;
    box-sizing: border-box;
}

.orders-map-popup__pages {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}

.orders-map-popup__page {
    display: none;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
    box-sizing: border-box;
}

.orders-map-popup__page.is-active {
    display: flex;
}

.orders-map-popup__pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin: 0.15rem 0 0;
    padding: 0.35rem 0 0;
    border-top: 1px solid var(--elev-border-soft, #eceff3);
    border-bottom: 0;
}

.orders-map-popup__pager-label {
    color: var(--elev-muted, #98a2b3);
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    min-width: 2.25rem;
    text-align: center;
}

.orders-map-popup__pager-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    color: var(--elev-muted, #98a2b3);
    background: transparent;
    cursor: pointer;
}

.orders-map-popup__pager-btn svg {
    width: 14px;
    height: 14px;
}

.orders-map-popup__pager-btn:hover:not(:disabled) {
    color: var(--elev-primary, #1976d2);
    background: var(--elev-primary-soft, rgba(25, 118, 210, 0.08));
}

.orders-map-popup__pager-btn:disabled {
    opacity: 0.28;
    cursor: default;
}

.orders-map-marker__count {
    position: absolute;
    top: -0.35rem;
    right: -0.4rem;
    min-width: 1.05rem;
    height: 1.05rem;
    padding: 0 0.2rem;
    border-radius: 999px;
    border: 1.5px solid #fff;
    background: #1a2636;
    color: #fff;
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 1.05rem;
    text-align: center;
    box-shadow: 0 2px 6px rgba(10, 13, 18, 0.25);
}

.orders-map-popup__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    padding-right: 1.25rem;
}

.orders-map-popup__top .kanban-order-card__code {
    color: var(--elev-text-bold);
    font-size: 0.8125rem;
    font-weight: 700;
    flex-shrink: 0;
}

.orders-map-popup__status-cell {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
    max-width: 55%;
    min-width: 0;
}

.orders-map-popup__status-cell .service-orders-call-badge {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.orders-map-popup > strong {
    font-size: 0.8125rem;
}

.orders-map-popup > p,
.orders-map-popup .kanban-order-card__meta {
    font-size: 0.75rem;
}

.orders-map-popup footer strong {
    font-size: 0.75rem;
}

.orders-map-popup footer small {
    font-size: 0.6875rem;
}

.orders-map-popup__view {
    display: inline-grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    margin-left: auto;
    padding: 0;
    border: 0;
    border-radius: 999px;
    color: var(--elev-muted);
    background: transparent;
    cursor: pointer;
}

.orders-map-popup__view:hover {
    color: var(--elev-text-bold);
    background: var(--elev-bg-pale);
}

.orders-map-popup--technician {
    gap: 0.5rem;
}

.orders-map-popup__technician-header {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding-right: 1.25rem;
}

.orders-map-popup__technician-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    min-width: 0;
}

.orders-map-popup__technician-info > strong {
    color: var(--elev-text-bold);
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.2;
}

.orders-map-popup__technician-info > .orders-map-popup__status {
    flex-shrink: 0;
}

.orders-map-popup__user-type {
    color: var(--elev-muted);
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.2;
}

.orders-map-popup__last-update {
    color: var(--elev-muted);
    font-size: 0.6875rem;
    line-height: 1.2;
    white-space: nowrap;
}

.orders-map-popup__orders {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-top: 0.375rem;
    border-top: 1px solid var(--elev-border-soft, rgba(223, 230, 239, 0.92));
}

.orders-map-popup__order-item {
    display: flex;
    align-items: flex-start;
    gap: 0.375rem;
    min-width: 0;
}

.orders-map-popup__order-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.orders-map-popup__order-top {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    min-width: 0;
}

.orders-map-popup__order-top .orders-map-popup__status {
    flex-shrink: 0;
}

.orders-map-popup__order-top .kanban-order-card__code {
    flex-shrink: 0;
    font-size: 0.75rem;
}

.orders-map-popup__order-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--elev-muted);
    font-size: 0.6875rem;
    line-height: 1.25;
}

.orders-map-popup__order-item .orders-map-popup__view {
    flex-shrink: 0;
    margin-top: 0.0625rem;
}

.leaflet-popup.orders-map-popup-wrapper .leaflet-popup-content-wrapper {
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: transparent;
    box-shadow: none;
}

.leaflet-popup.orders-map-popup-wrapper .leaflet-popup-content {
    margin: 0;
    width: 19.8rem;
    min-width: 19.8rem;
    max-width: 19.8rem;
}

.leaflet-popup.orders-map-popup-wrapper .leaflet-popup-content p {
    margin: 0;
}

.leaflet-popup.orders-map-popup-wrapper .leaflet-popup-tip-container {
    margin-top: -1px;
}

.leaflet-popup.orders-map-popup-wrapper .leaflet-popup-close-button {
    top: 10px !important;
    right: 10px !important;
    width: 22px;
    height: 22px;
    padding: 0 !important;
    border-radius: 999px;
    color: var(--elev-muted) !important;
    font-size: 18px !important;
    line-height: 20px !important;
    text-align: center;
}

.leaflet-popup.orders-map-popup-wrapper .leaflet-popup-close-button:hover {
    color: var(--elev-text-bold) !important;
    background: var(--elev-bg-pale);
}

.orders-map-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.orders-map-card__title {
    margin: 0;
    font-size: var(--elev-text-lg-size);
    font-weight: 600;
    color: var(--elev-foreground);
}

.orders-map-card__subtitle {
    margin: 0.15rem 0 0;
    color: var(--elev-muted);
    font-size: var(--elev-text-sm-size);
}

.orders-map-preview {
    display: none;
}

.orders-map-preview__cta {
    display: none;
}

/* --- Order card styles (shared with map popups) --- */
.kanban-order-card {
    display: grid;
    gap: 0.625rem;
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #e9eaeb;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(10, 13, 18, 0.05);
    text-align: left;
    transition: box-shadow 0.18s ease;
}

.kanban-order-card:hover {
    box-shadow: 0 6px 18px rgba(10, 13, 18, 0.07);
}

.kanban-order-top,
.kanban-order-card footer {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.kanban-order-top {
    justify-content: space-between;
}

.kanban-order-top .orders-code-group > .kanban-order-card__code {
    color: var(--elev-text-bold);
    font-size: var(--elev-text-md-size);
    line-height: var(--elev-text-md-line);
    font-weight: 700;
}

.kanban-order-card > strong {
    color: var(--elev-foreground);
    font-size: var(--elev-text-sm-size);
    font-weight: 600;
}

.kanban-order-card > p {
    margin: 0;
    color: var(--elev-foreground);
    font-size: var(--elev-text-sm-size);
    font-weight: 500;
}

.kanban-order-card__code {
    font-size: var(--elev-text-md-size);
    line-height: var(--elev-text-md-line);
    font-weight: 700;
    color: var(--elev-text-bold);
}

.kanban-order-card__meta {
    color: var(--elev-muted);
    font-size: var(--elev-text-xs-size);
    line-height: var(--elev-text-xs-line);
}

.kanban-order-card footer {
    margin-top: 0.25rem;
}

.kanban-order-card footer strong {
    display: block;
    color: var(--elev-foreground);
    font-size: var(--elev-text-xs-size);
    font-weight: 600;
}

.kanban-order-card footer small {
    color: var(--elev-muted);
    font-size: 0.6875rem;
}

.kanban-order-card footer .mud-icon-root {
    margin-left: auto;
}

.kanban-avatar {
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: var(--elev-primary);
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 700;
    flex-shrink: 0;
}

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

    .service-detail-fields-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .service-detail-images__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .service-detail-fields-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .service-detail-images__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .service-detail-page {
        padding: 1rem;
    }

    .location-map-preview {
        height: 150px;
    }

    .service-detail-events__add--desktop {
        display: none !important;
    }

    .service-detail-events__add--mobile.mud-icon-button {
        display: inline-flex !important;
        width: 2.25rem !important;
        height: 2.25rem !important;
        min-width: 2.25rem !important;
        padding: 0 !important;
        border-radius: var(--elev-radius-pill) !important;
        box-shadow: none !important;
    }

    .service-detail-events__add--mobile .mud-icon-root {
        font-size: 1.125rem !important;
    }
}

/* --- Confirm existing OS (Nova OS) --- */
.confirm-os-dialog__scroll {
    max-height: min(18rem, 42vh);
    margin-top: 0.625rem;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(10, 13, 18, 0.18) transparent;
}

.confirm-os-dialog__scroll::-webkit-scrollbar {
    width: 0.35rem;
}

.confirm-os-dialog__scroll::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(10, 13, 18, 0.18);
}

.confirm-os-dialog__list {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.confirm-os-dialog__item {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.2fr) auto auto;
    align-items: center;
    gap: 0.375rem 0.5rem;
    min-height: 0;
    padding: 0.375rem 0.5rem;
    border: 1px solid var(--elev-border-soft);
    border-radius: 0.625rem;
    background: var(--elev-surface-soft);
}

.confirm-os-dialog__main {
    display: flex;
    flex-direction: column;
    gap: 0.0625rem;
    min-width: 0;
}

.confirm-os-dialog__code {
    color: var(--elev-text-bold);
    font-family: var(--elev-font-sans);
    font-size: var(--elev-text-xs-size);
    font-weight: 700;
    line-height: 1.25;
}

.confirm-os-dialog__date {
    color: var(--elev-muted);
    font-family: var(--elev-font-sans);
    font-size: 0.6875rem;
    font-weight: 400;
    line-height: 1.25;
}

.confirm-os-dialog__item .orders-problem {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--elev-text-xs-size);
}

.confirm-os-dialog__item .service-orders-call-badge {
    justify-self: start;
}

.confirm-os-dialog__view {
    margin: 0;
    justify-self: end;
}

.confirm-os-dialog__confirm-text {
    margin-top: 0.75rem;
}

@media (max-width: 640px) {
    .confirm-os-dialog__item {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "main view"
            "problem status";
    }

    .confirm-os-dialog__main { grid-area: main; }
    .confirm-os-dialog__item .orders-problem { grid-area: problem; }
    .confirm-os-dialog__item .service-orders-call-badge { grid-area: status; }
    .confirm-os-dialog__view { grid-area: view; }
}