@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Public+Sans:wght@400;500;600;700&family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,400,0,0');

:root {
    --bg: #f7f8fc;
    --canvas: #f8f9fd;
    --surface: #ffffff;
    --surface-low: #f1f3fa;
    --surface-high: #e7eaf4;
    --text: #172033;
    --muted: #657089;
    --outline: #d7dce8;
    --primary: #4f46e5;
    --primary-dark: #3730a3;
    --primary-soft: #e9e8ff;
    --success: #087f5b;
    --success-soft: #e4f7ef;
    --danger: #b42318;
    --danger-soft: #fff0ee;
    --info: #2457a6;
    --info-soft: #e7efff;
    --warning: #a16207;
    --warning-soft: #fff8e1;
    --shadow-sm: 0 4px 14px rgba(35, 45, 75, .05);
    --shadow-md: 0 10px 28px rgba(35, 45, 75, .08);
    --shadow: 0 12px 30px rgba(35, 45, 75, .07);
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 18px;
    --radius: 14px;
    --focus-ring: 0 0 0 3px rgba(79, 70, 229, .18);
}

* { box-sizing: border-box; }
html { font-size: 16px; }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); font-family: Inter, sans-serif; line-height: 1.5; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
button { cursor: pointer; }
.material-symbols-outlined { font-size: 20px; vertical-align: middle; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.inline-form { display: inline; margin: 0; }

.app-shell { min-height: 100vh; display: flex; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 30; width: 272px; display: flex; flex-direction: column; background: var(--surface); border-right: 1px solid var(--outline); transition: width .2s ease, transform .22s ease; }
.sidebar-brand { display: flex; gap: 12px; align-items: center; padding: 25px 24px 20px; border-bottom: 1px solid var(--outline); }
.sidebar-brand strong { display: block; font-size: 1.1rem; }
.sidebar-brand span { display: block; color: var(--muted); font: .72rem 'Public Sans', sans-serif; margin-top: 2px; }
.brand-mark { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; color: white; background: linear-gradient(135deg, var(--primary), #2563eb); font-weight: 800; letter-spacing: .04em; box-shadow: 0 8px 18px rgba(79,70,229,.22); }
.brand-mark-logo { overflow: hidden; padding: 5px; background: linear-gradient(145deg, #f5f3ff, #e7e5ff); border: 1px solid #dcd8ff; }
.brand-mark-logo img { width: 100%; height: 100%; object-fit: contain; }
.sidebar-context { margin: 20px 18px 8px; padding: 15px; border: 1px solid #e4e7f2; border-radius: 14px; background: var(--surface-low); }
.eyebrow { margin: 0 0 7px; color: var(--primary); font: 700 .7rem 'Public Sans', sans-serif; letter-spacing: .15em; text-transform: uppercase; }
.sidebar-context strong { font-size: .86rem; }
.sidebar-nav { padding: 10px 14px; }
.sidebar-nav { flex: 1; overflow-y: auto; scrollbar-width: thin; }
.sidebar-nav-group + .sidebar-nav-group { margin-top: 13px; padding-top: 11px; border-top: 1px solid #edf0f6; }
.sidebar-nav-group-label { margin: 0; padding: 0 13px 5px; color: #8b94aa; font: 700 .62rem 'Public Sans', sans-serif; letter-spacing: .13em; text-transform: uppercase; }
.nav-item { display: flex; align-items: center; gap: 12px; margin: 4px 0; padding: 11px 13px; border: 1px solid transparent; border-radius: 11px; color: var(--muted); font-size: .9rem; font-weight: 600; transition: color .16s ease, background .16s ease, border-color .16s ease; }
.nav-item:hover { color: var(--primary); background: var(--surface-low); }
.nav-item.active { color: var(--primary); background: var(--primary-soft); border-color: #d3d1ff; }
.nav-label { display: inline; }
.sidebar-planned { margin: auto 18px 18px; padding: 15px; border-top: 1px solid var(--outline); }
.planned-item { display: flex; gap: 8px; align-items: center; padding: 5px 0; color: #9099ad; font-size: .78rem; }
.planned-item .material-symbols-outlined { font-size: 15px; }
.sidebar-footer { padding: 16px 22px; color: var(--muted); border-top: 1px solid var(--outline); font-size: .75rem; }
.sidebar-backdrop { display: none; }

.app-main { width: calc(100% - 272px); min-height: 100vh; margin-left: 272px; transition: width .2s ease, margin-left .2s ease; }
.app-shell.sidebar-collapsed .sidebar { width: 88px; }
.app-shell.sidebar-collapsed .app-main { width: calc(100% - 88px); margin-left: 88px; }
.app-shell.sidebar-collapsed .sidebar-brand > div:last-child,
.app-shell.sidebar-collapsed .sidebar-context,
.app-shell.sidebar-collapsed .sidebar-planned,
.app-shell.sidebar-collapsed .sidebar-footer,
.app-shell.sidebar-collapsed .sidebar-nav-group-label { display: none; }
.app-shell.sidebar-collapsed .sidebar-nav-group + .sidebar-nav-group { margin-top: 8px; padding-top: 8px; }
.app-shell.sidebar-collapsed .nav-item { justify-content: center; padding-left: 10px; padding-right: 10px; }
.app-shell.sidebar-collapsed .nav-label { display: none; }
.app-shell.sidebar-collapsed .nav-item .material-symbols-outlined { margin: 0; }
.app-shell.sidebar-collapsed .sidebar-brand { justify-content: center; padding: 25px 12px 20px; }
.app-shell.sidebar-collapsed .brand-mark { margin: 0 auto; }
.topbar { position: sticky; top: 0; z-index: 20; min-height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 34px; background: rgba(255,255,255,.9); border-bottom: 1px solid var(--outline); backdrop-filter: blur(12px); }
.topbar-left, .topbar-user, .button-row { display: flex; align-items: center; gap: 12px; }
.topbar-kicker { margin: 0; color: var(--muted); font: 700 .68rem 'Public Sans', sans-serif; letter-spacing: .13em; text-transform: uppercase; }
.topbar-title { margin: 2px 0 0; font-size: .92rem; font-weight: 700; }
.topbar-user-copy { display: grid; gap: 0; font-size: .79rem; }
.topbar-user-copy span { color: var(--muted); font-size: .7rem; }
.account-menu { position: relative; }
.account-menu > summary { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 5px 8px; border: 1px solid transparent; border-radius: 13px; cursor: pointer; list-style: none; transition: background .16s ease, border-color .16s ease; }
.account-menu > summary::-webkit-details-marker { display: none; }
.account-menu > summary:hover, .account-menu[open] > summary { background: var(--surface-low); border-color: var(--outline); }
.account-menu-chevron { color: var(--muted); font-size: 18px; transition: transform .18s ease; }
.account-menu[open] .account-menu-chevron { transform: rotate(180deg); }
.account-menu-popover { position: absolute; top: calc(100% + 10px); right: 0; z-index: 60; width: 272px; padding: 10px; background: var(--surface); border: 1px solid var(--outline); border-radius: 16px; box-shadow: 0 18px 45px rgba(31,41,75,.18); }
.account-menu-heading { display: flex; align-items: center; gap: 11px; margin-bottom: 8px; padding: 10px; border-radius: 12px; background: var(--surface-low); }
.account-menu-heading .avatar { width: 42px; height: 42px; }
.account-menu-heading div { min-width: 0; display: grid; gap: 2px; }
.account-menu-heading strong, .account-menu-heading span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-menu-heading span { color: var(--muted); font-size: .72rem; }
.account-menu-action { width: 100%; min-height: 42px; display: flex; align-items: center; gap: 10px; padding: 9px 11px; color: var(--text); background: transparent; border: 0; border-radius: 10px; text-align: left; font-size: .82rem; font-weight: 700; }
.account-menu-action:hover { color: var(--primary); background: var(--primary-soft); }
.account-menu-danger { color: var(--danger); }
.account-menu-danger:hover { color: var(--danger); background: var(--danger-soft); }
.content { width: 100%; max-width: 1680px; min-height: calc(100vh - 130px); margin: 0 auto; padding: clamp(34px, 2.2vw, 42px) clamp(24px, 2.4vw, 42px) 64px; }
.site-footer { display: flex; justify-content: space-between; gap: 16px; padding: 20px 42px; color: var(--muted); border-top: 1px solid var(--outline); font-size: .75rem; }
.menu-toggle { display: inline-grid !important; }

.page-heading { margin-bottom: 30px; }
.page-heading-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 10px; font-size: clamp(1.8rem, 3vw, 2.55rem); line-height: 1.15; letter-spacing: -.04em; }
h2 { margin-bottom: 8px; font-size: 1.25rem; }
.page-copy { max-width: 680px; margin-bottom: 0; color: var(--muted); }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-bottom: 22px; }
.metric-card, .panel { background: var(--surface); border: 1px solid var(--outline); border-radius: var(--radius); box-shadow: var(--shadow); }
.metric-card { min-height: 205px; padding: 22px; transition: box-shadow .2s ease, transform .2s ease; }
.metric-card.metric-active { cursor: pointer; }
.metric-card.metric-active:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(35,45,75,.12); }
.metric-card.metric-active:focus-within { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(35,45,75,.12); }
.metric-active { border-color: #b9b5ff; }
.metric-icon { width: 40px; height: 40px; display: grid; place-items: center; margin-bottom: 20px; border-radius: 12px; color: var(--primary); background: var(--primary-soft); }
.metric-label { margin-bottom: 6px; color: var(--muted); font-size: .76rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.metric-value { margin-bottom: 8px; font-size: 1.35rem; font-weight: 800; }
.metric-copy { min-height: 48px; margin-bottom: 12px; color: var(--muted); font-size: .83rem; }
.text-link { display: inline-flex; align-items: center; gap: 4px; color: var(--primary); font-size: .82rem; font-weight: 700; }
.text-link .material-symbols-outlined { font-size: 17px; }
.empty-panel { display: flex; align-items: center; gap: 18px; padding: 26px; }
.empty-panel p:last-child { margin-bottom: 0; color: var(--muted); }

.button { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 16px; border: 1px solid transparent; border-radius: 10px; font-size: .85rem; font-weight: 700; transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.button:hover { transform: translateY(-1px); }
.button:active { transform: translateY(0); }
.button-primary { color: white; background: var(--primary); box-shadow: 0 8px 18px rgba(79,70,229,.18); }
.button-primary:hover { background: var(--primary-dark); box-shadow: 0 10px 24px rgba(79,70,229,.26); }
.button-primary:active { background: var(--primary-dark); box-shadow: 0 4px 10px rgba(79,70,229,.18); }
.button-secondary { color: var(--text); background: var(--surface); border-color: var(--outline); }
.button-secondary:hover { background: var(--surface-low); border-color: #c4c9d8; }
.button-secondary:active { background: var(--surface-high); }
.button-wide { width: 100%; }
.icon-button { width: 36px; height: 36px; display: inline-grid; place-items: center; padding: 0; color: var(--muted); background: transparent; border: 1px solid transparent; border-radius: 9px; transition: color .15s ease, background .15s ease, border-color .15s ease; }
.icon-button:hover { color: var(--primary); background: var(--primary-soft); border-color: #d3d1ff; }
.icon-button:active { background: #dddcff; }
.avatar { display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; color: var(--primary); background: var(--primary-soft); font-weight: 800; }
.avatar-small { width: 34px; height: 34px; font-size: .8rem; }

.alert { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 18px; padding: 13px 15px; border: 1px solid; border-radius: 11px; font-size: .84rem; }
.alert ul { margin: 5px 0 0; padding-left: 18px; }
.alert-error { color: var(--danger); background: var(--danger-soft); border-color: #f2c1ba; }
.alert-success { color: var(--success); background: var(--success-soft); border-color: #b9e6d1; }
.alert-info { color: var(--info); background: var(--info-soft); border-color: #c9d8fb; }
.alert-warning { color: var(--warning); background: var(--warning-soft); border-color: #efd88a; }
.alert > .material-symbols-outlined { flex: 0 0 auto; margin-top: 1px; }
.alert > div { min-width: 0; }
.toolbar { display: flex; gap: 10px; align-items: center; padding: 18px; border-bottom: 1px solid var(--outline); }
.search-field { position: relative; flex: 1; max-width: 420px; }
.search-field .material-symbols-outlined { position: absolute; top: 11px; left: 12px; color: var(--muted); font-size: 19px; }
.search-field input, .field input, .field select, .field textarea { width: 100%; min-height: 42px; padding: 9px 12px; color: var(--text); background: var(--surface); border: 1px solid var(--outline); border-radius: 9px; outline: none; }
.search-field input { padding-left: 39px; }
/* Modern select: suppress OS chrome, add consistent custom arrow */
.field select { padding-right: 36px; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23657089' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 16px; }
.field select:disabled { color: var(--muted); background-color: var(--surface-low); cursor: not-allowed; opacity: .7; }
.field textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.search-field input:focus, .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(79,70,229,.12); }
.search-field input, .field input, .field select, .field textarea { transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; }
.search-field input:hover, .field input:hover, .field select:hover, .field textarea:hover { border-color: #b8bed0; background-color: var(--surface-low); }
.search-field input:focus, .field input:focus, .field select:focus, .field textarea:focus { background-color: var(--surface); }
.search-field input:focus-visible, .field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { border-color: var(--primary); box-shadow: var(--focus-ring); outline: none; }
.field input:disabled, .field select:disabled, .field textarea:disabled, .field input[readonly], .field textarea[readonly] { color: var(--muted); background: var(--surface-low); cursor: not-allowed; opacity: .82; }
.field [aria-invalid="true"] { border-color: var(--danger); background: #fffafa; }
.field [aria-invalid="true"]:focus-visible { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(180,35,24,.14); }
.table-wrap { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: #a8b0c2 transparent; }
.table-wrap::-webkit-scrollbar { height: 8px; }
.table-wrap::-webkit-scrollbar-track { background: transparent; }
.table-wrap::-webkit-scrollbar-thumb { background: #a8b0c2; border: 2px solid var(--surface); border-radius: 999px; }
.table-wrap::-webkit-scrollbar-thumb:hover { background: #7f899f; }
.data-table { width: 100%; border-collapse: collapse; text-align: left; font-size: .84rem; }
.data-table th { padding: 14px 18px; color: var(--muted); background: var(--surface-low); border-bottom: 1px solid var(--outline); font: 700 .7rem 'Public Sans', sans-serif; letter-spacing: .09em; text-transform: uppercase; white-space: nowrap; }
.data-table td { padding: 16px 18px; border-bottom: 1px solid #edf0f6; vertical-align: middle; }
.data-table tbody tr { transition: background .14s ease; }
.data-table tbody tr:hover { background: #fafaff; }
.operational-list-table { table-layout: fixed; }
.operational-list-table td { vertical-align: top; }
.request-list-table { min-width: 1460px; }
.request-list-table .request-column-id { width: 70px; }
.request-list-table .request-column-requester { width: 120px; }
.request-list-table .request-column-route { width: auto; }
.request-list-table .request-column-planning { width: 190px; }
.request-list-table .request-column-purpose { width: 160px; }
.request-list-table .request-column-decision { width: 180px; }
.request-list-table .request-column-progress { width: 190px; }
.request-list-table .request-column-action { width: 170px; }
.reservation-list-table { min-width: 1280px; }
.reservation-list-table .reservation-column-id { width: 70px; }
.reservation-list-table .reservation-column-request { width: auto; }
.reservation-list-table .reservation-column-vehicle { width: 170px; }
.reservation-list-table .reservation-column-time { width: 180px; }
.reservation-list-table .reservation-column-status { width: 120px; }
.reservation-list-table .reservation-column-action { width: 210px; }
.dispatch-list-table { min-width: 1360px; }
.dispatch-list-table .dispatch-column-id { width: 72px; }
.dispatch-list-table .dispatch-column-route { width: auto; }
.dispatch-list-table .dispatch-column-vehicle { width: 140px; }
.dispatch-list-table .dispatch-column-driver { width: 150px; }
.dispatch-list-table .dispatch-column-time { width: 155px; }
.dispatch-list-table .dispatch-column-status { width: 112px; }
.dispatch-list-table .dispatch-column-action { width: 175px; }
.trip-list-table { min-width: 1440px; }
.trip-list-table .trip-column-id { width: 70px; }
.trip-list-table .trip-column-dispatch { width: 105px; }
.trip-list-table .trip-column-vehicle { width: 150px; }
.trip-list-table .trip-column-driver { width: 150px; }
.trip-list-table .trip-column-route { width: auto; }
.trip-list-table .trip-column-window { width: 250px; }
.trip-list-table .trip-column-status { width: 180px; }
.trip-list-table .trip-column-action { width: 190px; }
.dispatch-id-cell { white-space: nowrap; }
.dispatch-route-cell { min-width: 0; }
.table-record-reference, .table-primary-value, .table-secondary-value { display: block; }
.table-record-reference { margin-bottom: 4px; color: var(--muted); font-size: .71rem; font-weight: 700; }
.table-route { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; white-space: nowrap; line-height: 1.45; }
.table-route > span:not(.table-route-point):not(.table-route-arrow) { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.table-route-point { display: inline-grid; flex: 0 0 20px; width: 20px; height: 20px; place-items: center; border-radius: 999px; font-size: .64rem; font-weight: 800; }
.table-route-point-a { color: #067647; background: #dcfae6; }
.table-route-point-b { color: var(--primary); background: var(--primary-soft); }
.table-route-arrow { flex: 0 0 auto; color: var(--muted); }
.table-primary-value { margin-bottom: 2px; }
.table-secondary-value { color: var(--muted); font-size: .76rem; line-height: 1.35; }
.table-date-line, .table-time-line { display: block; white-space: nowrap; }
.table-time-line { margin-top: 2px; color: var(--muted); font-size: .76rem; }
.table-window-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.table-window-grid > span { min-width: 0; }
.table-window-grid .table-record-reference { margin-bottom: 3px; text-transform: uppercase; letter-spacing: .06em; }
.compact-route-text { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.actions { white-space: nowrap; text-align: right; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .01em; }
.badge { display: inline-flex; align-items: center; padding: 4px 9px; border: 1px solid transparent; border-radius: 999px; font-size: .7rem; font-weight: 700; white-space: nowrap; }
.badge-success { color: var(--success); background: var(--success-soft); border-color: #b9e6d1; }
.badge-info { color: var(--info); background: var(--info-soft); border-color: #c9d8fb; }
.badge-warning { color: #9a6700; background: #fff6d8; border-color: #f0d98a; }
.badge-danger { color: var(--danger); background: var(--danger-soft); border-color: #f2c1ba; }
.badge-neutral { color: var(--muted); background: var(--surface-high); border-color: var(--outline); }
.status-form { display: inline-flex; align-items: center; gap: 3px; vertical-align: middle; }
.status-form select { max-width: 132px; min-height: 34px; padding: 5px 28px 5px 7px; color: var(--muted); background: var(--surface); border: 1px solid var(--outline); border-radius: 8px; font-size: .72rem; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23657089' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 7px center; background-size: 14px; transition: border-color .15s ease, background-color .15s ease; outline: none; }
.status-form select:hover { border-color: #b8bed0; background-color: var(--surface-low); }
.status-form select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(79,70,229,.12); background-color: var(--surface); }
.status-form select:focus-visible { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(79,70,229,.18); outline: none; }
.table-empty { display: grid; justify-items: center; gap: 4px; padding: 46px 20px; color: var(--muted); }
.table-empty .material-symbols-outlined { color: var(--primary); font-size: 34px; }
.table-empty strong { color: var(--text); }

.form-panel { max-width: 760px; padding: 26px; }
.form-panel select#dispatch_id { min-height: 42px; height: 42px; padding: 9px 12px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.form-selection-summary { display: grid; gap: 14px; padding: 18px; border-color: #d7d5ff; box-shadow: var(--shadow-sm); }
.form-selection-summary[hidden], .form-selection-empty[hidden] { display: none; }
.form-selection-summary-heading { display: flex; align-items: center; gap: 9px; margin: 0; }
.form-selection-summary-heading .material-symbols-outlined { color: var(--primary); }
.form-selection-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
.form-selection-grid > div { min-width: 0; display: grid; gap: 4px; }
.form-selection-grid strong { overflow-wrap: anywhere; }
.form-selection-note, .form-selection-empty { margin: 0; color: var(--muted); font-size: .78rem; }
.location-guidance { margin: 0; }
.location-guidance div { display: grid; gap: 3px; }
.location-guidance span:not(.material-symbols-outlined) { font-size: .8rem; }
.location-picker { overflow: hidden; border: 1px solid var(--outline); border-radius: 14px; background: var(--surface); }
.location-picker-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 18px; border-bottom: 1px solid var(--outline); background: var(--surface-low); }
.location-picker-heading > div { display: flex; align-items: center; gap: 11px; }
.location-picker-heading .material-symbols-outlined { color: var(--primary); }
.location-picker-heading strong, .location-picker-heading small { display: block; }
.location-picker-heading small { margin-top: 2px; color: var(--muted); font-size: .74rem; }
.location-search-row { display: grid; grid-template-columns: minmax(240px, 1fr) auto auto; align-items: end; gap: 10px; padding: 16px 18px; }
.location-search-results { display: grid; gap: 1px; margin: 0 18px 14px; overflow: hidden; color: var(--muted); background: var(--outline); border: 1px solid var(--outline); border-radius: 10px; font-size: .78rem; }
.location-search-result { padding: 10px 12px; border: 0; color: var(--text); background: var(--surface); text-align: left; cursor: pointer; }
.location-search-result:hover, .location-search-result:focus-visible { color: var(--primary); background: var(--primary-soft); outline: none; }
.location-picker-map { width: 100%; height: 340px; background: #e8edf5; border-block: 1px solid var(--outline); }
.location-coordinate-grid { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 12px; padding: 16px 18px 18px; }
.request-route-panel { padding: 0; overflow: hidden; }
.request-route-map { width: 100%; height: 420px; background: #e8edf5; }
.request-route-create-map { height: 380px; }
.request-route-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; padding: 13px 18px; border-top: 1px solid var(--outline); color: var(--muted); font-size: .78rem; }
.route-dot { display: inline-block; width: 9px; height: 9px; margin-right: 6px; border-radius: 50%; background: var(--info); }
.route-dot-destination { background: var(--danger); }
.request-route-pin-wrap { background: transparent; border: 0; }
.request-route-pin, .route-pin { width: 36px; height: 36px; display: inline-grid; place-items: center; flex: 0 0 36px; color: #fff; border: 3px solid #fff; border-radius: 50% 50% 50% 8px; box-shadow: 0 7px 18px rgba(35,45,75,.28); transform: rotate(-45deg); font-weight: 800; }
.request-route-pin { margin-top: 2px; }
.request-route-pin::first-letter { transform: rotate(45deg); }
.request-route-pin-a, .route-pin-a { background: var(--info); }
.request-route-pin-b, .route-pin-b { background: var(--danger); }
.request-route-pin-wrap .request-route-pin { line-height: 1; }
.request-route-pin-wrap .request-route-pin { color: transparent; }
.request-route-pin-wrap .request-route-pin::after { content: attr(aria-label); }
.request-route-pin-wrap .request-route-pin-a::after { content: 'A'; color: #fff; transform: rotate(45deg); }
.request-route-pin-wrap .request-route-pin-b::after { content: 'B'; color: #fff; transform: rotate(45deg); }
.reservation-route-preview { padding: 16px 18px; border: 1px solid var(--outline); border-radius: 12px; background: var(--surface-low); }
.reservation-route-preview[hidden] { display: none; }
.reservation-route-point { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.reservation-route-point > div { min-width: 0; display: grid; gap: 2px; }
.reservation-route-point small { color: var(--muted); font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.reservation-route-point strong { overflow-wrap: anywhere; font-size: .82rem; line-height: 1.4; }
.reservation-route-point .route-pin { width: 30px; height: 30px; flex-basis: 30px; border-width: 2px; transform: none; border-radius: 50%; box-shadow: none; }
.reservation-route-line { width: 2px; height: 18px; margin: 3px 0 3px 14px; background: var(--outline); }
.tracking-live-shell { display: grid; gap: 18px; }
.tracking-map-panel { overflow: hidden; }
.tracking-map-toolbar { min-height: 70px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; border-bottom: 1px solid var(--outline); }
.tracking-map-toolbar > div { display: grid; gap: 3px; }
.tracking-map-toolbar span { color: var(--muted); font-size: .78rem; }
.tracking-map-toolbar .tracking-map-health { color: var(--success); }
.tracking-map-toolbar .tracking-map-health.is-loading { color: var(--info); }
.tracking-map-toolbar .tracking-map-health.is-warning { color: #9a6700; }
.tracking-map { isolation: isolate; width: 100%; height: clamp(380px, 56vh, 620px); background: #e8edf5; }
.tracking-map .leaflet-control-zoom { overflow: hidden; border: 0; border-radius: 12px; box-shadow: 0 8px 22px rgba(23,32,51,.16); }
.tracking-map .leaflet-control-zoom a { width: 38px; height: 38px; color: var(--text); border-color: var(--outline); font: 700 21px/38px Inter, sans-serif; }
.tracking-map .leaflet-control-zoom a:hover { color: var(--primary); background: var(--primary-soft); }
.tracking-map .leaflet-control-attribution { padding: 3px 7px; color: var(--muted); background: rgba(255,255,255,.9); border-radius: 8px 0 0 0; font-size: .64rem; backdrop-filter: blur(8px); }
.tracking-map-fallback { min-height: 380px; display: grid; place-items: center; align-content: center; gap: 6px; padding: 30px; color: var(--muted); text-align: center; }
.tracking-map-fallback[hidden] { display: none; }
.tracking-map-fallback .material-symbols-outlined { color: var(--primary); font-size: 44px; }
.tracking-map-fallback strong { color: var(--text); }
.tracking-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 18px; }
.tracking-card { display: grid; gap: 16px; }
.tracking-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.tracking-card-head h2 { font-size: 1rem; margin: 5px 0 0; }
.tracking-detail-grid { padding: 4px 0; gap: 16px; }
.tracking-empty { grid-column: 1 / -1; }
.tracking-connection { gap: 7px; }
.tracking-connection-live, .tracking-status-live { color: var(--success); background: var(--success-soft); border-color: #b9e6d1; }
.tracking-connection-offline, .tracking-status-offline { color: var(--danger); background: var(--danger-soft); border-color: #f2c1ba; }
.tracking-status-delayed { color: #9a6700; background: #fff6d8; border-color: #f0d98a; }
.tracking-status-waiting { color: var(--info); background: var(--info-soft); border-color: #c9d8fb; }
.tracking-card > .button { margin-top: 14px; width: fit-content; }
.tracking-pulse { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 0 currentColor; animation: tracking-pulse 1.8s infinite; }
.tracking-vehicle-icon-wrap { background: transparent; border: 0; }
.tracking-vehicle-icon { width: 42px; height: 42px; display: grid; place-items: center; color: white; background: var(--primary); border: 3px solid white; border-radius: 50%; box-shadow: 0 7px 18px rgba(35,45,75,.32); }
.tracking-vehicle-arrow { font-size: 23px; transition: transform .3s ease; }
.tracking-route-pin-wrap { background: transparent; border: 0; }
.tracking-route-pin { width: 36px; height: 36px; display: grid; place-items: center; color: white; border: 3px solid white; border-radius: 50% 50% 50% 8px; box-shadow: 0 7px 18px rgba(35,45,75,.26); transform: rotate(-45deg); font-weight: 900; }
.tracking-route-pin::after { content: attr(data-label); }
.tracking-route-pin-pickup { background: var(--info); }
.tracking-route-pin-destination { background: var(--danger); }
.tracking-route-pin { font-size: 0; }
.tracking-route-pin-pickup::after { content: 'A'; font-size: 14px; transform: rotate(45deg); }
.tracking-route-pin-destination::after { content: 'B'; font-size: 14px; transform: rotate(45deg); }
.tracking-accuracy-circle { fill: var(--primary); fill-opacity: .08; stroke: var(--primary); stroke-width: 1; stroke-opacity: .42; }
.tracking-popup { display: grid; min-width: 190px; gap: 3px; }
.tracking-popup strong { color: var(--text); font-size: .88rem; }
.tracking-popup span { color: var(--muted); font-size: .76rem; }
.location-coordinate { padding: 12px; border-radius: 10px; background: var(--canvas); border: 1px solid var(--outline); color: var(--primary); }
.compact-empty { min-height: 120px; }
.location-share-panel { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 20px; margin-bottom: 18px; }
.location-share-panel h2 { margin: 3px 0 6px; font-size: 1.1rem; }
.location-share-panel form { display: grid; gap: 8px; justify-items: end; }
.report-section { margin-top: 18px; }
.form-stack { display: grid; gap: 18px; }
.field { display: grid; gap: 7px; }
.field label { font-size: .82rem; font-weight: 700; }
.required { color: var(--danger); }
.helper, .field small { color: var(--muted); font-size: .75rem; font-weight: 400; }
.field-error { display: flex; align-items: center; gap: 5px; color: var(--danger) !important; font-weight: 600 !important; }
.field-error::before { content: 'error'; font: 400 16px/1 'Material Symbols Outlined'; }
.field-span-2 { grid-column: span 2; }
.form-actions { display: flex; justify-content: flex-end; gap: 10px; padding-top: 8px; border-top: 1px solid var(--outline); }
.button:disabled, .button[aria-disabled="true"] { color: #8d95a8; background: var(--surface-high); border-color: var(--outline); box-shadow: none; cursor: not-allowed; opacity: .72; transform: none; }
.button:disabled:hover, .button[aria-disabled="true"]:hover { background: var(--surface-high); box-shadow: none; transform: none; }
.metric-copy, .detail-grid strong, .form-selection-grid strong { overflow-wrap: break-word; word-break: normal; }
.data-table th, .data-table td { word-break: normal; }
.data-table td { overflow-wrap: break-word; }
.detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; padding: 26px; }
.detail-grid > div { display: grid; gap: 6px; }
.detail-label { color: var(--muted); font: 700 .7rem 'Public Sans', sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.password-field { position: relative; }
.password-field input { padding-right: 46px; }
.password-toggle { position: absolute; top: 3px; right: 3px; width: 36px; height: 36px; color: var(--muted); background: transparent; border: 0; }

.state-page { max-width: 640px; margin: 80px auto; text-align: center; }
.state-page h1 { margin-bottom: 12px; }
.state-page p:not(.eyebrow) { margin-bottom: 24px; color: var(--muted); }
.state-icon { width: 48px; height: 48px; display: grid; place-items: center; margin-bottom: 14px; border-radius: 14px; color: var(--primary); background: var(--primary-soft); }
.state-page .state-icon { margin-left: auto; margin-right: auto; }
.state-danger { color: var(--danger); background: var(--danger-soft); }

.auth-body { background: radial-gradient(circle at 10% 15%, #e9e8ff, transparent 30%), var(--bg); }
.auth-layout { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(380px, 480px); align-items: center; gap: clamp(56px, 7vw, 104px); max-width: 1240px; margin: auto; padding: 48px; }
.auth-intro { max-width: 620px; }
.auth-client-logo { width: 168px; min-height: 92px; display: grid; place-items: center; margin-bottom: 18px; }
.auth-client-logo img { display: block; width: 100%; max-height: 120px; object-fit: contain; object-position: left center; }
.auth-intro h1 { max-width: 620px; margin: 18px 0 16px; font-size: clamp(2.75rem, 4.3vw, 4.15rem); line-height: .98; letter-spacing: -.055em; text-wrap: balance; }
.auth-intro > p:not(.eyebrow) { max-width: 460px; color: var(--muted); font-size: 1.1rem; }
.auth-intro-line { display: flex; align-items: center; gap: 9px; margin-top: 28px; color: var(--success); font-size: .86rem; font-weight: 700; }
.auth-card { min-width: 0; padding: 34px; background: rgba(255,255,255,.9); border: 1px solid var(--outline); border-radius: 20px; box-shadow: 0 24px 60px rgba(35,45,75,.12); }
.auth-card .form-stack, .auth-card .field, .auth-card .password-field { min-width: 0; }
.auth-card-header { margin-bottom: 24px; }
.auth-card-header h2 { margin-bottom: 7px; font-size: 1.65rem; }
.auth-card-header p { margin-bottom: 0; color: var(--muted); font-size: .88rem; }
.auth-utilities { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 24px; margin: 0; padding: 0; }
.auth-access-note { display: inline-flex; align-items: center; gap: 6px; padding-top: 2px; color: var(--muted); font-size: .78rem; font-weight: 600; white-space: nowrap; }
.auth-access-note .material-symbols-outlined { font-size: 16px; }
.auth-help { min-width: 0; margin: -2px 0 4px; }
.auth-help summary { color: var(--primary); font-size: .84rem; font-weight: 700; cursor: pointer; list-style: none; }
.auth-help summary::-webkit-details-marker { display: none; }
.auth-help-link { white-space: nowrap; }
.auth-help summary:hover .auth-help-link { text-decoration: underline; text-underline-offset: 3px; }
.auth-help-content { width: 100%; margin-top: 10px; padding: 12px 14px; color: var(--muted); font-size: .8rem; text-align: left; border: 1px solid var(--outline); border-radius: 11px; background: var(--surface-low); }
.auth-help-content strong { color: var(--text); }
.auth-help-content p { margin: 4px 0 0; }
.auth-loading-mark { width: 23px; height: 23px; display: none; place-items: center; padding: 2px; overflow: hidden; border-radius: 7px; background: white; }
.auth-loading-mark img { display: block; width: 100%; height: 100%; object-fit: contain; }
.button.is-loading { cursor: wait; }
.button.is-loading .auth-loading-mark { display: grid; animation: fleet-auth-mark-pulse .85s ease-in-out infinite alternate; }
.button.is-loading [data-auth-submit-icon] { display: none; }
@keyframes fleet-auth-mark-pulse { from { opacity: .68; transform: scale(.92); } to { opacity: 1; transform: scale(1.04); } }

@media (max-width: 1000px) { .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .auth-layout { gap: 40px; } }
@media (max-width: 760px) {
    .sidebar { transform: translateX(-100%); transition: transform .22s ease; box-shadow: 10px 0 30px rgba(20,30,60,.12); }
    .sidebar.is-open { transform: translateX(0); }
    .sidebar-backdrop.is-visible { display: block; position: fixed; inset: 0; z-index: 25; background: rgba(20,30,60,.45); }
    .app-main { width: 100%; margin-left: 0; }
    .topbar { padding: 12px 18px; }
    .menu-toggle { display: inline-grid !important; }
    .account-menu > summary .topbar-user-copy { display: none; }
    .content { padding: 30px 18px 48px; }
    .site-footer { padding: 18px; flex-direction: column; }
    .page-heading-row { align-items: flex-start; flex-direction: column; }
    .toolbar { align-items: stretch; flex-direction: column; }
    .search-field { max-width: none; }
    .form-grid, .detail-grid, .location-share-panel, .location-coordinate-grid, .form-selection-grid { grid-template-columns: 1fr; }
    .location-search-row { grid-template-columns: 1fr; align-items: stretch; }
    .location-picker-heading { align-items: flex-start; }
    .location-picker-map, .request-route-map { height: 330px; }
    .location-share-panel form { justify-items: stretch; }
    .tracking-map-toolbar { align-items: stretch; flex-direction: column; }
    .tracking-map { height: 420px; }
    .field-span-2 { grid-column: auto; }
    .form-actions { grid-column: auto; justify-content: stretch; }
    .form-actions .button { flex: 1; }
}

@keyframes tracking-pulse {
    70% { box-shadow: 0 0 0 7px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}
@media (max-width: 620px) {
    .metric-grid { grid-template-columns: 1fr; }
    .empty-panel { align-items: flex-start; flex-direction: column; }
    .auth-layout { display: block; padding: 28px 18px; }
    .auth-intro { margin-bottom: 32px; }
    .auth-intro h1 { font-size: 2.6rem; }
    .auth-card { padding: 24px; }
    .auth-utilities { align-items: flex-start; }
    .data-table thead { display: none; }
    .data-table, .data-table tbody, .data-table tr, .data-table td { display: block; width: 100%; }
    .table-wrap { overflow: visible; }
    .data-table tr { width: auto; margin: 12px 0; padding: 8px 0; border: 1px solid var(--outline); border-radius: 12px; box-shadow: 0 3px 12px rgba(35,45,75,.04); }
    .data-table td { display: flex; justify-content: space-between; gap: 16px; padding: 9px 14px; border-bottom: 0; text-align: right; }
    .data-table td::before { content: attr(data-label); color: var(--muted); font-size: .72rem; font-weight: 700; text-transform: uppercase; }
    .data-table td.actions { justify-content: flex-end; flex-wrap: wrap; }
    .data-table td.actions::before { display: none; }
    .operational-list-table { min-width: 0; table-layout: auto; }
    .operational-list-table colgroup { display: none; }
    .operational-list-table td { align-items: flex-start; vertical-align: top; }
    .operational-list-table .dispatch-route-cell { display: grid; grid-template-columns: minmax(88px, auto) minmax(0, 1fr); }
    .operational-list-table .dispatch-route-cell::before { grid-row: 1 / span 2; }
    .operational-list-table .table-record-reference { margin-bottom: 3px; }
    .operational-list-table .table-route { justify-content: flex-end; flex-wrap: wrap; overflow: visible; white-space: normal; }
    .operational-list-table .table-route > span:not(.table-route-point):not(.table-route-arrow) { overflow: visible; text-overflow: clip; }
    .table-window-grid { grid-template-columns: 1fr; justify-items: end; gap: 8px; }
    .compact-route-text { overflow: visible; text-overflow: clip; white-space: normal; }
    .status-form select { max-width: 150px; padding-right: 28px; }
}

/* ── Toolbar clear action ─────────────────────────────── */
.toolbar-clear { display: inline-flex; align-items: center; gap: 5px; min-height: 42px; padding: 9px 14px; border: 1px solid var(--outline); border-radius: 10px; color: var(--muted); background: var(--surface); font-size: .85rem; font-weight: 700; text-decoration: none; transition: color .16s ease, background .16s ease, border-color .16s ease; white-space: nowrap; }
.toolbar-clear:hover { color: var(--danger); background: var(--danger-soft); border-color: #f2c1ba; }
.toolbar-clear:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.toolbar-clear .material-symbols-outlined { font-size: 17px; }

/* ── Reduced-motion ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
    .button:hover, .button:active, .metric-card.metric-active:hover, .metric-card.metric-active:focus-within { transform: none; }
}
.action-no-snooze { display: inline-flex; align-items: center; justify-content: center; gap: 6px; margin: 0; padding: 8px 10px; border-radius: 10px; background: #fff7ed; color: #9a3412; font-size: .78rem; font-weight: 700; text-align: center; }
.action-no-snooze .material-symbols-outlined { font-size: 17px; }
.topbar-actions{display:flex;align-items:center;gap:10px}.action-center-trigger{position:relative;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--outline);border-radius:14px;color:var(--text);background:var(--surface);transition:.2s ease}.action-center-trigger:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-soft)}.action-center-count{position:absolute;top:-5px;right:-5px;display:flex;align-items:center;justify-content:center;min-width:21px;height:21px;padding:0 5px;border:2px solid var(--surface);border-radius:999px;background:#dc2626;color:#fff;font-size:.68rem;font-weight:800}.nav-count{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:#dc2626;color:#fff;font-size:.72rem;font-weight:800}.app-shell.sidebar-collapsed .nav-count{position:absolute;top:3px;right:3px;min-width:18px;height:18px;padding:0 4px;font-size:.62rem}.action-summary-grid{display:grid;grid-template-columns:repeat(5,minmax(130px,1fr));gap:14px;margin-bottom:22px}.action-summary-card{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center;padding:18px;border:1px solid var(--outline);border-radius:16px;background:var(--surface);color:var(--text);box-shadow:var(--shadow-sm)}.action-summary-card>.material-symbols-outlined{grid-row:1/3;display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:12px;background:var(--primary-soft);color:var(--primary)}.action-summary-card strong{font-size:1.55rem;line-height:1}.action-summary-card span:last-child{color:var(--muted);font-size:.86rem}.action-summary-overdue>.material-symbols-outlined{background:#fee2e2;color:#b91c1c}.action-summary-urgent>.material-symbols-outlined{background:#ffedd5;color:#c2410c}.action-center-panel{padding:0;overflow:hidden}.action-filter-toolbar{padding:18px;border-bottom:1px solid var(--outline);align-items:end}.compact-field{min-width:190px;margin:0}.operational-action-list{display:flex;flex-direction:column}.operational-action-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:start;padding:20px;border-bottom:1px solid var(--outline);border-left:4px solid transparent}.operational-action-card:last-child{border-bottom:0}.operational-action-card.urgency-overdue{border-left-color:#dc2626}.operational-action-card.urgency-urgent{border-left-color:#ea580c}.operational-action-card.urgency-due_soon{border-left-color:#d97706}.operational-action-card.urgency-upcoming{border-left-color:var(--primary)}.operational-action-card.urgency-snoozed{border-left-color:#64748b;background:#f8fafc}.operational-action-icon{display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:14px;background:var(--primary-soft);color:var(--primary)}.operational-action-heading{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.operational-action-heading h2{margin:3px 0 6px;font-size:1.05rem}.action-type-label{color:var(--primary);font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.operational-action-main>p{margin:0 0 10px;color:var(--muted)}.operational-action-meta{display:flex;flex-wrap:wrap;gap:8px 18px;color:var(--muted);font-size:.82rem}.operational-action-meta span{display:inline-flex;align-items:center;gap:5px}.operational-action-meta .material-symbols-outlined{font-size:17px}.action-urgency-badge{display:inline-flex;align-items:center;white-space:nowrap;padding:6px 9px;border-radius:999px;font-size:.72rem;font-weight:800;background:#eef2ff;color:#4338ca}.action-urgency-badge.urgency-overdue{background:#fee2e2;color:#b91c1c}.action-urgency-badge.urgency-urgent{background:#ffedd5;color:#c2410c}.action-urgency-badge.urgency-due_soon{background:#fef3c7;color:#a16207}.action-urgency-badge.urgency-snoozed{background:#e2e8f0;color:#475569}.operational-action-controls{display:flex;flex-direction:column;align-items:stretch;gap:8px;min-width:210px}.action-snooze-form{display:flex;gap:6px}.action-snooze-form .select{min-width:92px}.action-empty-state{padding:56px 24px;text-align:center;color:var(--muted)}.action-empty-state>.material-symbols-outlined{font-size:48px;color:#059669}.action-empty-state h2{margin:10px 0 6px;color:var(--text)}.action-center-note{display:flex;gap:10px;align-items:flex-start;margin-top:16px;padding:14px 16px;border:1px solid #bfdbfe;border-radius:14px;background:#eff6ff;color:#1d4ed8}.action-center-note p{margin:0}.manager-action-overview{margin-bottom:20px;padding:20px}.manager-action-overview-header{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;margin-bottom:14px}.manager-action-overview-header h2{margin:3px 0 5px}.manager-action-totals{display:flex;gap:8px}.manager-action-totals>span{display:flex;align-items:baseline;gap:5px;padding:10px 12px;border-radius:12px;background:var(--primary-soft);color:var(--primary)}.manager-overdue-total{background:#fee2e2!important;color:#b91c1c!important}.manager-priority-list{display:flex;flex-direction:column;border:1px solid var(--outline);border-radius:14px;overflow:hidden}.manager-priority-item{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:13px 14px;border-bottom:1px solid var(--outline);color:var(--text)}.manager-priority-item:last-child{border-bottom:0}.manager-priority-item:hover{background:var(--primary-soft)}.manager-priority-item small{display:block;margin-top:3px;color:var(--muted)}.action-urgency-dot{width:9px;height:9px;border-radius:50%;background:var(--primary)}.action-urgency-dot.urgency-overdue{background:#dc2626}.action-urgency-dot.urgency-urgent{background:#ea580c}.action-urgency-dot.urgency-due_soon{background:#d97706}.manager-priority-empty{display:flex;align-items:center;justify-content:center;gap:8px;padding:24px;color:#047857}.manager-action-all{display:inline-flex;align-items:center;gap:4px;margin-top:12px}.manager-action-all .material-symbols-outlined{font-size:18px}@media(max-width:1024px){.action-summary-grid{grid-template-columns:repeat(3,minmax(130px,1fr))}.operational-action-card{grid-template-columns:auto minmax(0,1fr)}.operational-action-controls{grid-column:2;min-width:0;flex-direction:row}.action-snooze-form{flex:1}}@media(max-width:760px){.topbar-actions{gap:4px}.action-center-trigger{width:40px;height:40px}.action-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.action-filter-toolbar{align-items:stretch}.compact-field{min-width:100%;width:100%}.operational-action-card{grid-template-columns:1fr;padding:16px}.operational-action-icon{display:none}.operational-action-controls{grid-column:1;flex-direction:column}.action-snooze-form{width:100%}.action-snooze-form .select{flex:1}.operational-action-heading{flex-direction:column}.manager-action-overview-header{flex-direction:column}.manager-action-totals{width:100%}.manager-action-totals>span{flex:1}.manager-priority-item{grid-template-columns:auto minmax(0,1fr) auto}.manager-priority-item>.action-urgency-badge{display:none}}

/* Fleet patch 20260901: keep row actions visible on wide desktop tables */
@media (min-width: 761px) {
    .table-wrap { position: relative; }
    .data-table thead th:last-child {
        position: sticky;
        right: 0;
        z-index: 6;
        min-width: 58px;
        background: var(--surface-low);
        box-shadow: -12px 0 18px -18px rgba(30, 41, 59, .65);
    }
    .data-table td.actions {
        position: sticky;
        right: 0;
        z-index: 5;
        background: var(--surface);
        box-shadow: -12px 0 18px -18px rgba(30, 41, 59, .65);
    }
    .data-table tbody tr:hover td.actions { background: #fafaff; }
}

/* Manager workflow continuity and record context */
.table-action-button { min-height: 34px; padding: 6px 10px; font-size: .76rem; white-space: nowrap; }
.table-action-button .material-symbols-outlined { font-size: 17px; }
a.table-record-reference, .record-context-link { color: var(--primary); font-weight: 800; text-decoration: none; }
a.table-record-reference:hover, .record-context-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.manager-next-step { margin-bottom: 20px; padding: 0; overflow: hidden; border-left: 4px solid var(--primary); }
.manager-next-step-action { border-left-color: #d97706; }
.manager-next-step-waiting { border-left-color: #2563eb; }
.manager-next-step-monitor { border-left-color: #0891b2; }
.manager-next-step-complete { border-left-color: #059669; }
.manager-next-step-closed { border-left-color: #64748b; }
.manager-workflow-chain { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--outline); background: var(--surface-low); overflow-x: auto; }
.manager-workflow-chain-label { flex: 0 0 auto; color: var(--muted); font-size: .7rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.manager-workflow-chain ol { display: flex; align-items: center; gap: 4px; min-width: max-content; margin: 0; padding: 0; list-style: none; }
.manager-workflow-chain li { display: flex; align-items: center; gap: 4px; }
.manager-workflow-chain a, .manager-workflow-missing { display: flex; align-items: baseline; gap: 5px; padding: 5px 7px; border-radius: 8px; color: var(--muted); font-size: .74rem; }
.manager-workflow-chain a:hover { color: var(--primary); background: var(--primary-soft); }
.manager-workflow-chain a strong { color: inherit; }
.manager-workflow-chain li.is-current a { color: var(--primary); background: var(--primary-soft); }
.manager-workflow-missing { opacity: .72; }
.manager-workflow-missing strong { font-weight: 600; }
.manager-workflow-separator { color: #a8afbf; font-size: 16px; }
.manager-next-step-body { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 18px; }
.manager-next-step-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; color: var(--primary); background: var(--primary-soft); }
.manager-next-step-action .manager-next-step-icon { color: #a16207; background: #fef3c7; }
.manager-next-step-complete .manager-next-step-icon { color: #047857; background: #d1fae5; }
.manager-next-step-closed .manager-next-step-icon { color: #475569; background: #e2e8f0; }
.manager-next-step-copy { min-width: 0; }
.manager-next-step-copy .eyebrow { margin-bottom: 3px; }
.manager-next-step-copy h2 { margin-bottom: 4px; font-size: 1.05rem; }
.manager-next-step-copy > p:last-child { margin: 0; color: var(--muted); font-size: .83rem; line-height: 1.5; }
.manager-next-step-controls { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }

@media (max-width: 760px) {
    .table-action-button { width: 100%; }
    .manager-workflow-chain { align-items: flex-start; flex-direction: column; gap: 7px; }
    .manager-next-step-body { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
    .manager-next-step-controls { grid-column: 1 / -1; align-items: stretch; flex-direction: column; }
    .manager-next-step-controls .button { width: 100%; }
}