:root {
    --brick: #ad4f44;
    --brick-dark: #8f3932;
    --rose: #d99a9a;
    --rose-dark: #c77e7e;
    --ink: #171717;
    --muted: #6f6f6f;
    --line: #d7d7d7;
    --soft: #f2f1ef;
    --stripe: #ececec;
    --white: #fff;
    --sidebar: 112px;
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
    box-sizing: border-box;
}

/* Ensure [hidden] always wins over display overrides */
[hidden] { display: none !important; }

body {
    margin: 0;
    min-height: 100vh;
    color: var(--ink);
    background: #f5f4f2;
}

button,
input,
select,
textarea {
    font: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

button {
    cursor: pointer;
}

a {
    color: inherit;
}

/* Authentication */
.auth-page {
    background:
        radial-gradient(circle at 20% 15%, rgba(173, 79, 68, .13), transparent 28rem),
        #d9d9d9;
}

.auth-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 32px 18px;
}

.auth-card {
    width: min(100%, 650px);
    min-height: 760px;
    padding: 140px 64px 64px;
    background: var(--white);
    border-radius: 16px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .08);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.brand {
    margin-bottom: 62px;
    color: #000;
    font-size: clamp(54px, 7vw, 82px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -4px;
    text-decoration: none;
}

.brand strong,
.sidebar-brand strong {
    color: #920700;
}

.page-heading {
    margin: -28px 0 28px;
    font-size: 34px;
    text-align: center;
}

.helper-text {
    width: min(100%, 520px);
    margin: -10px 0 24px;
    color: var(--muted);
    font-size: 17px;
    line-height: 1.5;
    text-align: center;
}

.auth-form {
    width: min(100%, 520px);
    display: grid;
    gap: 34px;
}

.auth-form.compact {
    gap: 16px;
}

.auth-form input {
    width: 100%;
    height: 66px;
    border: 1px solid transparent;
    border-radius: 12px;
    padding: 0 17px;
    background: #d8d8d8;
    color: #222;
    font-size: 30px;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
}

.auth-form.compact input {
    height: 56px;
    font-size: 22px;
}

.auth-form input::placeholder {
    color: #606060;
}

.auth-form input:focus {
    border-color: var(--brick);
    box-shadow: 0 0 0 4px rgba(173, 79, 68, .12);
}

.auth-form button {
    justify-self: center;
    width: min(100%, 330px);
    min-height: 62px;
    margin-top: 36px;
    border: 0;
    border-radius: 11px;
    background: var(--rose-dark);
    color: #090909;
    font-size: 31px;
    transition: transform .2s, background .2s;
}

.auth-form.compact button {
    margin-top: 12px;
    font-size: 25px;
}

.auth-form button:hover {
    background: var(--brick);
    color: white;
    transform: translateY(-2px);
}

.auth-links {
    margin-top: 18px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 24px;
    font-size: 18px;
}

.auth-links a {
    color: #626262;
    text-decoration: none;
}

.auth-links a:hover {
    color: var(--brick-dark);
    text-decoration: underline;
}

.quiet-link {
    font-style: italic;
}

.alert,
.admin-alert {
    border-radius: 10px;
    padding: 13px 16px;
    font-size: 15px;
    line-height: 1.4;
}

.alert {
    width: min(100%, 520px);
    margin: -36px 0 22px;
    text-align: center;
}

.alert-info,
.admin-alert {
    color: #533f00;
    background: #fff1bd;
}

.alert-error {
    color: #761c1c;
    background: #ffe0e0;
}

.alert-success {
    color: #14522c;
    background: #dff5e6;
}

/* Admin shell */
.admin-page {
    background: #f7f6f4;
}

.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 50;
    width: var(--sidebar);
    padding: 18px 10px;
    background: var(--brick);
    display: flex;
    flex-direction: column;
    box-shadow: 8px 0 28px rgba(86, 36, 31, .12);
}

.sidebar-brand {
    display: block;
    margin: 5px 0 23px;
    color: white;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -1px;
    text-align: center;
    text-decoration: none;
}

.sidebar nav {
    display: grid;
    gap: 8px;
}

.nav-item {
    min-height: 66px;
    border-radius: 18px;
    color: rgba(255, 255, 255, .75);
    display: grid;
    place-items: center;
    text-decoration: none;
    transition: background .2s, color .2s, transform .2s;
}

.nav-item svg {
    width: 29px;
    height: 29px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.nav-item span:not(.avatar) {
    display: none;
}

.nav-item:hover {
    color: white;
    transform: translateX(2px);
}

.nav-item.active {
    position: relative;
    color: #424242;
    background: white;
}

.nav-item.active::before {
    content: "";
    position: absolute;
    left: -10px;
    width: 5px;
    height: 31px;
    border-radius: 0 5px 5px 0;
    background: var(--brick-dark);
}

.logout-link {
    margin-top: auto;
}

.logout-section {
    padding: 24px;
    border: 1px solid #e5b7b2;
    border-radius: 16px;
    background: #fff8f7;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.logout-section h2 {
    margin: 0 0 8px;
}

.settings-description {
    margin: 0;
    color: var(--muted);
}

.danger-btn {
    flex: 0 0 auto;
    padding: 12px 24px;
    border-radius: 10px;
    background: var(--brick-dark);
    color: white;
    font-weight: 800;
    text-decoration: none;
}

.danger-btn:hover {
    background: #6f211c;
}

.admin-main {
    min-height: 100vh;
    margin-left: var(--sidebar);
    padding: 46px clamp(24px, 4vw, 68px) 70px;
}

.admin-titlebar {
    margin-bottom: 34px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}

.eyebrow {
    margin: 0 0 6px;
    color: var(--brick);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.admin-titlebar h1 {
    margin: 0;
    font-size: clamp(42px, 5.2vw, 76px);
    line-height: .98;
    letter-spacing: -.055em;
}

.admin-chip {
    min-width: 230px;
    padding: 9px 13px 9px 9px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: white;
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .04);
}

.avatar {
    width: 39px;
    height: 39px;
    border-radius: 50%;
    background: var(--brick);
    color: white;
    display: grid;
    place-items: center;
    font-weight: 800;
}

.admin-chip strong,
.admin-chip small {
    display: block;
}

.admin-chip strong {
    max-width: 160px;
    overflow: hidden;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-chip small {
    margin-top: 2px;
    color: var(--muted);
    font-size: 11px;
}

.admin-alert {
    margin: -14px 0 24px;
}

.admin-content {
    width: min(100%, 1500px);
}

.metric-grid,
.profile-grid,
.chart-grid {
    display: grid;
    gap: 26px;
}

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

.metric-card,
.panel,
.table-card {
    border: 1px solid #bdbdbd;
    border-radius: 16px;
    background: white;
    box-shadow: 0 12px 35px rgba(0, 0, 0, .035);
}

.metric-card {
    min-height: 190px;
    padding: 34px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.more-link-card {
    color: inherit;
    text-decoration: none;
}

.more-link-card:hover {
    border-color: var(--brick);
    transform: translateY(-2px);
}

.metric-card > span,
.metric-card > div > span {
    font-size: clamp(22px, 2.5vw, 34px);
    font-weight: 760;
}

.metric-card strong {
    display: block;
    margin-top: 3px;
    font-size: clamp(56px, 7vw, 92px);
    line-height: .95;
    letter-spacing: -.06em;
}

.metric-card small {
    margin-top: 15px;
    color: var(--muted);
}

.live-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 5px;
    border-radius: 50%;
    background: #27a865;
    box-shadow: 0 0 0 5px rgba(39, 168, 101, .13);
}

.metric-with-icon {
    flex-direction: row;
    align-items: center;
    gap: 28px;
}

.metric-icon {
    flex: 0 0 108px;
    height: 108px;
    border: 1px solid var(--line);
    border-radius: 15px;
    color: #555;
    display: grid;
    place-items: center;
    font-size: 56px !important;
}

.section-block {
    margin-top: 38px;
}

.section-heading,
.panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.section-heading {
    margin-bottom: 14px;
}

.section-heading h2,
.panel-heading h2 {
    margin: 0;
    font-size: clamp(26px, 3vw, 42px);
    letter-spacing: -.035em;
}

.text-link {
    color: var(--brick-dark);
    font-weight: 700;
    text-decoration: none;
}

.table-card {
    padding: 22px;
    overflow: hidden;
}

.table-scroll {
    max-height: min(60vh, 620px);
    overflow: auto;
    scrollbar-gutter: stable;
    overscroll-behavior: contain;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 17px;
}

.data-table th,
.data-table td {
    padding: 15px 18px;
    text-align: left;
    vertical-align: middle;
}

.data-table thead {
    background: #dedede;
}

.data-table th {
    font-size: 15px;
    letter-spacing: .01em;
}

.table-scroll .data-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #dedede;
}

.data-table tbody tr:nth-child(even) {
    background: var(--stripe);
}

.data-table td:last-child,
.data-table th:last-child {
    text-align: right;
}

.data-table td small {
    display: block;
    margin-top: 3px;
    color: var(--muted);
}

.editable-fares-table input {
    width: 100%;
    min-width: 100px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 9px 10px;
    background: white;
}

.toda-fares-table th:first-child,
.toda-fares-table td:first-child {
    min-width: 260px;
    width: 32%;
}

.fare-import-form {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.progress {
    width: min(100%, 400px);
    height: 9px;
    border-radius: 999px;
    background: #e6e1df;
    display: block;
    overflow: hidden;
}

.progress i {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--brick), var(--rose));
    display: block;
}

.panel {
    padding: 30px;
}

.profile-grid {
    grid-template-columns: .9fr 1.1fr;
}

.profile-identity {
    margin: 30px 0;
    display: flex;
    align-items: center;
    gap: 25px;
}

.profile-avatar {
    flex: 0 0 112px;
    width: 112px;
    height: 112px;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--brick), var(--rose));
    color: white;
    display: grid;
    place-items: center;
    font-size: 48px;
    font-weight: 800;
}

.profile-identity h3 {
    margin: 0 0 5px;
    font-size: 31px;
}

.profile-identity p {
    margin: 4px 0;
    font-size: 18px;
}

.profile-identity a {
    color: var(--brick-dark);
}

.profile-meta {
    padding-top: 24px;
    border-top: 1px solid var(--ink);
    font-size: 17px;
}

/* Profile photo avatar */
.profile-avatar--photo {
    object-fit: cover;
    background: var(--line);
    font-size: 0;
}

/* Clickable avatar wrapper with pencil overlay */
.profile-avatar-btn {
    position: relative;
    flex: 0 0 112px;
    width: 112px;
    height: 112px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: none;
    cursor: pointer;
}

.profile-avatar-btn .profile-avatar {
    flex: none;
    width: 112px;
    height: 112px;
    transition: filter .2s;
}

.profile-avatar-btn:hover .profile-avatar,
.profile-avatar-btn:focus-visible .profile-avatar {
    filter: brightness(.55);
}

.profile-avatar-overlay {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s;
}

.profile-avatar-btn:hover .profile-avatar-overlay,
.profile-avatar-btn:focus-visible .profile-avatar-overlay {
    opacity: 1;
}



/* Header chip photo avatar */
.avatar--photo {
    overflow: hidden;
    padding: 0;
}

.avatar--photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

/* ---------- Avatar crop modal ---------- */
.avatar-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.avatar-modal.is-open {
    display: flex;
}

.avatar-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .55);
}

.avatar-modal-box {
    position: relative;
    width: min(100%, 520px);
    background: var(--white);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .22);
    display: flex;
    flex-direction: column;
}

.avatar-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--line);
}

.avatar-modal-header h2 {
    margin: 0;
    font-size: 20px;
    letter-spacing: -.02em;
}

.avatar-modal-close {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: var(--soft);
    color: var(--ink);
    font-size: 14px;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background .15s;
}

.avatar-modal-close:hover { background: var(--line); }

.avatar-modal-body {
    flex: 1;
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1a1a1a;
}

.avatar-upload-prompt {
    width: 100%;
    height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1a1a1a;
}

.avatar-file-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 40px;
    border: 2px dashed rgba(255,255,255,.25);
    border-radius: 14px;
    color: rgba(255,255,255,.7);
    cursor: pointer;
    transition: border-color .2s, background .2s;
    text-align: center;
}

.avatar-file-label:hover,
.avatar-file-label.drag-over {
    border-color: var(--rose);
    background: rgba(173,79,68,.1);
}

.avatar-file-label svg { color: rgba(255,255,255,.55); }

.avatar-file-label span { font-size: 15px; font-weight: 600; }

.avatar-file-label small {
    font-size: 12px;
    color: rgba(255,255,255,.4);
}

.avatar-cropper-wrap {
    width: 100%;
    height: 320px;
}

.avatar-cropper-wrap img {
    display: block;
    max-width: 100%;
}

/* Keep the circular crop box indicator */
.cropper-view-box,
.cropper-face {
    border-radius: 50%;
}

.avatar-modal-footer {
    padding: 14px 24px 20px;
    background: var(--white);
    border-top: 1px solid var(--line);
}

.avatar-hint {
    margin: 0 0 12px;
    color: var(--muted);
    font-size: 13px;
    text-align: center;
}

.avatar-modal-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.avatar-error {
    margin: 0;
    padding: 10px 24px;
    background: #fff0f0;
    color: #9b2626;
    font-size: 14px;
    text-align: center;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}



.status {
    padding: 5px 10px;
    border-radius: 999px;
    display: inline-block;
    font-size: 13px;
    font-weight: 750;
}

.status.active {
    color: #17613a;
    background: #d9f2e3;
}

.status.open {
    color: #8a4b05;
    background: #fff0cf;
}

.status.in-progress {
    color: #245283;
    background: #dcecff;
}

.status.resolved {
    color: #17613a;
    background: #d9f2e3;
}

.outline-btn,
.primary-btn,
.actions button,
.backup-schedule button,
.data-table button {
    border: 0;
    border-radius: 9px;
    padding: 9px 14px;
    text-decoration: none;
}

.outline-btn {
    border: 1px solid #bdbdbd;
    background: white;
}

.primary-btn,
.actions button,
.data-table button {
    background: var(--rose);
    color: #2c1c1c;
}

.primary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--brick);
    color: white;
    font-weight: 800;
    text-transform: uppercase;
}

.support-summary {
    margin-bottom: 18px;
}

.support-action-card {
    justify-content: center;
}

.live-refresh-status {
    margin: 0 0 12px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
    text-align: right;
}

.live-refresh-status::before {
    content: "";
    width: 8px;
    height: 8px;
    margin-right: 7px;
    border-radius: 50%;
    background: #2e8a52;
    display: inline-block;
}

.live-refresh-status[data-state="error"]::before {
    background: #b94a3d;
}

.inline-form {
    margin: 0;
}

.empty-state {
    padding: 34px 18px;
    color: var(--muted);
    text-align: center !important;
}

.muted-text {
    color: var(--muted);
    font-size: 14px;
}

.small-btn {
    padding: 11px 16px;
    font-size: 13px;
}

.actions {
    white-space: nowrap;
}

.actions form {
    display: inline;
}

.actions button {
    margin-left: 5px;
}

.actions .muted-btn,
.muted-btn {
    background: #cecece;
}

.is-done {
    color: #155d37 !important;
    background: #d9f2e3 !important;
}

.compact-table {
    margin-top: 24px;
    font-size: 14px;
}

.compact-table th,
.compact-table td {
    padding: 13px 11px;
}

.chart-grid {
    margin-top: 28px;
    grid-template-columns: 1.5fr .8fr;
}

.chart-panel.wide {
    min-width: 0;
}

.line-chart {
    width: 100%;
    margin-top: 18px;
    overflow: visible;
}

.chart-gridlines path {
    fill: none;
    stroke: #dfdfdf;
    stroke-width: 1;
}

.trip-line,
.growth-line,
.cancel-line {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 5;
}

.trip-line {
    stroke: #5b788b;
}

.growth-line {
    stroke: #8ba5b2;
}

.cancel-line {
    stroke: #a95757;
}

.area-path {
    fill: rgba(91, 120, 139, .14);
}

.chart-legend {
    display: flex;
    gap: 20px;
    color: var(--muted);
    font-size: 13px;
}

.chart-legend i {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 6px;
    border-radius: 50%;
}

.legend-blue {
    background: #5b788b;
}

.legend-red {
    background: #a95757;
}

.table-tools {
    margin-bottom: 14px;
    display: flex;
    justify-content: flex-end;
}

.search-input,
.filter-bar select {
    min-height: 43px;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 0 14px;
    background: white;
    outline: none;
}

.search-input:focus,
.filter-bar select:focus,
.admin-form input:focus,
.admin-form textarea:focus,
.admin-form select:focus {
    border-color: var(--brick);
    box-shadow: 0 0 0 3px rgba(173, 79, 68, .1);
}

.backup-schedule {
    margin-top: 18px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.backup-schedule > div {
    display: flex;
    gap: 8px;
}

.backup-schedule button {
    background: #ccc;
}

.backup-schedule button.selected {
    background: var(--rose);
}

.tab-nav {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    overflow-x: auto;
}

.tab-nav a {
    min-width: max-content;
    padding: 15px 24px;
    border: 1px solid transparent;
    border-bottom: 0;
    border-radius: 12px 12px 0 0;
    font-size: 17px;
    font-weight: 850;
    letter-spacing: .04em;
    text-decoration: none;
    text-transform: uppercase;
}

.tab-nav a.active {
    border-color: #aaa;
    background: white;
}

.tab-panel {
    min-height: 520px;
    border-radius: 0 16px 16px 16px;
}

.admin-form {
    margin-top: 26px;
    display: grid;
    gap: 20px;
}

.admin-form label {
    display: grid;
    gap: 8px;
    font-size: 16px;
    font-weight: 750;
}

.admin-form label span {
    color: var(--muted);
    font-weight: 400;
}

.admin-form label b {
    color: var(--brick);
}

.admin-form input,
.admin-form textarea,
.admin-form select {
    width: 100%;
    border: 1px solid #aaa;
    border-radius: 10px;
    padding: 13px;
    background: #f7f7f7;
    outline: none;
    font-weight: 400;
}

.admin-form textarea {
    min-height: 140px;
    resize: vertical;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.send-btn {
    justify-self: end;
    padding: 14px 23px;
}

/* Route editor */
.route-editor { color: #252525; }
.route-editor-header { margin-bottom: 18px; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.route-editor-back { color: var(--brick); font-size: 13px; font-weight: 800; text-decoration: none; }
.route-title-line { margin-top: 9px; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.route-title-line h2 { margin: 0; font-size: clamp(24px, 3vw, 34px); letter-spacing: -.03em; }
.route-editor-header p { margin: 6px 0 0; color: var(--muted); font-size: 13px; }
.prototype-badge { padding: 6px 9px; border: 1px solid #d6c8b1; border-radius: 20px; color: #755f35; background: #fff8e9; font-size: 11px; font-weight: 800; text-transform: uppercase; }
.route-save-top { min-height: 44px; padding: 0 20px; border: 0; border-radius: 9px; }
.route-editor-grid { min-height: 690px; border: 1px solid #d9d7d3; border-radius: 15px; background: white; box-shadow: 0 12px 36px rgba(38, 32, 28, .06); display: grid; grid-template-columns: 286px minmax(420px, 1fr) 310px; overflow: hidden; }
.route-editor-sidebar, .route-order-panel { padding: 22px; background: #fff; overflow: auto; }
.route-editor-sidebar { border-right: 1px solid #e5e2de; }
.route-order-panel { border-left: 1px solid #e5e2de; }
.editor-section-heading { margin-bottom: 18px; display: flex; align-items: flex-start; gap: 10px; }
.editor-section-heading > span { width: 27px; height: 27px; border-radius: 7px; color: white; background: var(--brick); display: grid; place-items: center; font-size: 10px; font-weight: 900; }
.editor-section-heading h3, .order-panel-head h3 { margin: 0; font-size: 16px; }
.editor-section-heading p { margin: 3px 0 0; color: var(--muted); font-size: 11px; line-height: 1.35; }
.route-details-form { padding-bottom: 22px; border-bottom: 1px solid #e9e7e3; display: grid; gap: 13px; }
.route-details-form label, .coordinate-fields label { display: grid; gap: 6px; color: #4f4d49; font-size: 11px; font-weight: 800; }
.route-details-form label b { color: var(--brick); }
.route-details-form input, .route-details-form select, .coordinate-fields input { width: 100%; min-width: 0; height: 39px; padding: 0 10px; border: 1px solid #d5d2cd; border-radius: 8px; background: #faf9f7; outline: none; font-size: 12px; }
.route-details-form input:focus, .route-details-form select:focus, .coordinate-fields input:focus { border-color: var(--brick); box-shadow: 0 0 0 3px rgba(173,79,68,.09); }
.route-detail-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.editor-tools { padding-top: 21px; }
.editor-tool { width: 100%; margin-bottom: 8px; padding: 10px; border: 1px solid #dfdcd7; border-radius: 9px; color: #393735; background: white; display: flex; align-items: center; gap: 10px; text-align: left; }
.editor-tool:hover, .editor-tool.active { border-color: var(--brick); background: #fff8f7; }
.editor-tool.primary { color: white; border-color: var(--brick); background: var(--brick); }
.editor-tool.primary.active { background: var(--brick-dark); }
.editor-tool.danger { color: #9e3e35; }
.editor-tool strong, .editor-tool small { display: block; }
.editor-tool strong { font-size: 12px; }
.editor-tool small { margin-top: 2px; opacity: .7; font-size: 9px; }
.tool-icon { width: 27px; height: 27px; border-radius: 7px; background: rgba(0,0,0,.06); display: grid; place-items: center; font-size: 14px; flex: 0 0 auto; }
.mode-switch { margin-bottom: 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.mode-switch button { padding: 9px 4px; border: 1px solid #dfdcd7; border-radius: 8px; color: #555; background: #faf9f7; font-size: 9px; font-weight: 800; }
.mode-switch button span { margin-right: 3px; color: var(--brick); font-size: 13px; }
.mode-switch button.active { border-color: var(--brick); color: var(--brick); background: #fff3f1; }
.editor-notice { margin-top: 14px; padding: 10px; border-radius: 8px; color: #67593f; background: #fff8e9; display: flex; gap: 8px; font-size: 9px; line-height: 1.45; }
.editor-notice span { width: 17px; height: 17px; border: 1px solid #c6a867; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; font-weight: 900; }
.editor-notice p { margin: 0; }
.route-map-panel { min-width: 0; background: #eeeae3; display: grid; grid-template-rows: auto 1fr auto; }
.map-toolbar, .map-footer { padding: 12px 16px; background: rgba(255,255,255,.95); display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.map-toolbar > div:first-child { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 7px; }
.map-toolbar strong { font-size: 11px; }.map-toolbar small { grid-column: 2; color: var(--muted); font-size: 9px; }
.map-status-dot { width: 8px; height: 8px; border-radius: 50%; background: #45a16b; grid-row: span 2; }
.map-legend { display: flex; gap: 12px; color: var(--muted); font-size: 9px; }
.map-legend span { display: inline-flex; align-items: center; gap: 5px; }
.map-legend i { width: 12px; height: 12px; display: inline-block; flex: 0 0 auto; }
.legend-route { width: 24px !important; height: 4px !important; border-radius: 999px; background: var(--brick); }
.legend-point { border: 3px solid var(--editor-blue); border-radius: 50%; background: white; }
.legend-stop { position: relative; border: 3px solid #761c1c; border-radius: 50% 50% 3px 50%; background: white; transform: rotate(45deg); }
.legend-stop::after { content: ""; position: absolute; inset: 2px; border-radius: 50%; background: #761c1c; }
.legend-terminal { border: 3px solid #d08a31; border-radius: 5px; background: white; transform: rotate(45deg); }
.route-map-placeholder { position: relative; min-height: 590px; overflow: hidden; outline: none; background-color: #e9e6df; background-image: linear-gradient(30deg, rgba(255,255,255,.4) 12%, transparent 12.5%, transparent 87%, rgba(255,255,255,.4) 87.5%), linear-gradient(150deg, rgba(255,255,255,.4) 12%, transparent 12.5%, transparent 87%, rgba(255,255,255,.4) 87.5%); background-size: 80px 140px; }
.route-map-placeholder.adding-points { cursor: crosshair; }
.route-map-placeholder .mapboxgl-canvas { outline: none; }
.route-map-placeholder .mapboxgl-ctrl-top-right { top: 5px; right: 5px; }
.route-map-placeholder .mapboxgl-popup-content { padding: 11px 13px; border-radius: 8px; font-size: 11px; }
.route-map-placeholder.map-load-error::after { content: "Unable to load Mapbox. Check your internet connection and access-token URL restrictions."; position: absolute; z-index: 8; inset: 0; padding: 30px; background: #eeeae3; display: grid; place-items: center; color: #8f3932; font-size: 12px; font-weight: 800; text-align: center; }
.map-road { position: absolute; height: 14px; border: 3px solid #fbfaf6; border-width: 3px 0; background: #d8d2c8; transform-origin: left center; opacity: .9; }.road-one { width: 120%; top: 30%; left: -10%; transform: rotate(18deg); }.road-two { width: 100%; top: 72%; left: 8%; transform: rotate(-28deg); }.road-three { width: 80%; top: 6%; left: 65%; transform: rotate(82deg); }
.map-label { position: absolute; z-index: 1; color: #9a9489; font-size: 10px; font-weight: 800; letter-spacing: .04em; }.label-one { top: 18%; left: 16%; }.label-two { right: 13%; bottom: 24%; }
.route-preview-svg { position: absolute; z-index: 3; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }.route-preview-svg polyline { fill: none; stroke: var(--brick); stroke-width: 1.2; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 2px 1px rgba(83,37,31,.18)); }
.route-map-marker { position: absolute; z-index: 5; width: 24px; height: 24px; border: 3px solid var(--editor-blue); border-radius: 50%; color: var(--editor-blue); background: white; box-shadow: 0 2px 8px rgba(0,0,0,.28); transform: translate(-50%,-50%); display: grid; place-items: center; font-size: 9px; font-weight: 900; }
.route-map-marker.selected { width: 31px; height: 31px; outline: 3px solid rgba(49,93,114,.24); }
.official-stop-marker,
.map-location-marker {
    position: absolute;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    color: #761c1c;
    background: transparent;
    filter: drop-shadow(0 3px 7px rgba(0,0,0,.32));
    display: grid;
    place-items: center;
}
.official-stop-marker::before,
.map-location-marker::before {
    content: "";
    position: absolute;
    inset: 1px;
    border: 3px solid white;
    border-radius: 50% 50% 8px 50%;
    background: currentColor;
    transform: rotate(45deg);
}
.official-stop-marker span,
.map-location-marker span {
    position: relative;
    z-index: 1;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: white;
    display: block;
}
.official-stop-marker.terminal,
.map-location-marker.terminal {
    width: 36px;
    height: 36px;
    color: #d08a31;
}
.official-stop-marker.terminal::before,
.map-location-marker.terminal::before {
    border-radius: 7px;
}
.map-location-marker.terminal span {
    width: 12px;
    height: 12px;
    border-radius: 4px;
}
.map-location-marker.on-route {
    outline: 3px solid rgba(173,79,68,.22);
}
.map-location-marker.is-inactive {
    opacity: .55;
}
.route-map-placeholder .mapboxgl-popup-content em { color: var(--brick); font-size: 9px; font-style: normal; font-weight: 800; }
.map-empty { position: absolute; z-index: 4; inset: 0; margin: auto; width: 220px; height: max-content; padding: 22px; border: 1px solid rgba(255,255,255,.8); border-radius: 12px; background: rgba(255,255,255,.9); box-shadow: 0 12px 30px rgba(69,61,51,.1); text-align: center; }.map-empty span { color: var(--brick); font-size: 28px; }.map-empty strong { margin-top: 8px; display: block; font-size: 13px; }.map-empty p { margin: 5px 0 0; color: var(--muted); font-size: 10px; line-height: 1.4; }
.map-watermark { position: absolute; z-index: 5; left: 12px; bottom: 11px; display: flex; align-items: baseline; gap: 5px; color: #777268; }.map-watermark strong { font-size: 9px; letter-spacing: .08em; }.map-watermark span { font-size: 7px; }
.map-controls { position: absolute; z-index: 5; top: 12px; right: 12px; border-radius: 7px; box-shadow: 0 3px 10px rgba(0,0,0,.12); overflow: hidden; }.map-controls button { width: 30px; height: 30px; border: 0; border-bottom: 1px solid #ddd; background: white; display: block; font-weight: 900; }.map-controls button:last-child { border: 0; }
.map-footer { color: #605e59; font-size: 9px; justify-content: flex-start; }.map-footer span { padding-right: 13px; border-right: 1px solid #ddd; }.map-footer strong { color: var(--ink); }.map-footer .map-hint { margin-left: auto; padding: 0; border: 0; }
.order-panel-head { display: flex; justify-content: space-between; align-items: center; }.order-panel-head .eyebrow { margin: 0 0 3px; font-size: 8px; }.order-panel-head > span { padding: 5px 7px; border-radius: 12px; color: var(--muted); background: #f0efed; font-size: 9px; font-weight: 800; }
.route-list-tabs { margin: 18px 0 10px; border-bottom: 1px solid #ddd; display: flex; }.route-list-tabs button { flex: 1; padding: 9px 2px; border: 0; border-bottom: 2px solid transparent; color: var(--muted); background: transparent; font-size: 10px; font-weight: 800; }.route-list-tabs button.active { border-color: var(--brick); color: var(--brick); }.route-list-tabs span { min-width: 17px; padding: 2px 4px; border-radius: 8px; background: #eee; display: inline-block; font-size: 8px; }
.route-list { max-height: 320px; overflow: auto; }.route-list-empty { padding: 28px 10px; color: #999; font-size: 11px; text-align: center; }
.route-point-item, .route-stop-item { width: 100%; padding: 9px; border: 1px solid transparent; border-radius: 8px; background: transparent; display: flex; align-items: center; gap: 9px; text-align: left; }.route-point-item:hover, .route-point-item.selected { border-color: #e5c1bd; background: #fff6f5; }.route-point-item > span, .stop-symbol { width: 25px; height: 25px; border-radius: 50%; color: white; background: var(--brick); display: grid; place-items: center; flex: 0 0 auto; font-size: 9px; font-weight: 900; }.route-point-item div, .route-stop-item div { min-width: 0; flex: 1; }.route-point-item strong, .route-point-item small, .route-stop-item strong, .route-stop-item small { display: block; }.route-point-item strong, .route-stop-item strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.route-point-item small, .route-stop-item small { margin-top: 3px; color: var(--muted); font-size: 8px; }.route-point-item i { color: #aaa; font-style: normal; }.stop-symbol { border-radius: 8px 8px 8px 2px; background: #314e63; transform: rotate(-45deg); }.stop-symbol + div { margin-left: 2px; }.stop-symbol.terminal { background: #d08a31; }
.selected-point-editor { margin-top: 16px; padding-top: 15px; border-top: 1px solid #e2dfdb; }.selected-point-title { display: flex; align-items: center; justify-content: space-between; }.selected-point-title span, .selected-point-title strong { display: block; }.selected-point-title span { color: var(--muted); font-size: 8px; text-transform: uppercase; }.selected-point-title strong { margin-top: 2px; font-size: 12px; }.selected-point-title button { width: 28px; height: 28px; border: 0; border-radius: 7px; color: #a34138; background: #fff1ef; }
.coordinate-fields { margin-top: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }.coordinate-fields input { height: 36px; font-size: 10px; }.reorder-actions { margin-top: 9px; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }.reorder-actions button { padding: 8px 3px; border: 1px solid #d9d6d1; border-radius: 7px; color: #555; background: white; font-size: 9px; font-weight: 800; }

/* Route editor clarity pass */
.route-editor { --editor-blue: #315d72; --editor-blue-soft: #eef5f8; --editor-canvas: #f7f6f3; }
.route-editor-header { margin-bottom: 16px; align-items: center; }
.route-editor-back { display: inline-flex; align-items: center; gap: 4px; }
.route-title-line h2 { font-size: clamp(28px, 3vw, 38px); }
.prototype-badge { padding: 7px 11px; border-color: #bcd5c5; color: #286441; background: #edf8f0; letter-spacing: .035em; }
.prototype-badge i { width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: #42a568; display: inline-block; }
.route-save-top { min-height: 48px; padding-inline: 22px; gap: 8px; box-shadow: 0 7px 18px rgba(143,57,50,.2); }
.route-save-top span { font-size: 15px; }
.route-workflow { margin-bottom: 15px; padding: 14px 20px; border: 1px solid #dedbd5; border-radius: 13px; background: white; display: flex; align-items: center; box-shadow: 0 5px 18px rgba(38,32,28,.035); }
.route-workflow > button { min-width: 150px; padding: 0; border: 0; color: inherit; background: transparent; display: flex; align-items: center; gap: 10px; text-align: left; }
.route-workflow > button > span { width: 31px; height: 31px; border: 2px solid #d2cfca; border-radius: 50%; color: #88847e; display: grid; place-items: center; flex: 0 0 auto; font-size: 11px; font-weight: 900; }
.route-workflow p, .route-workflow small, .route-workflow strong { margin: 0; display: block; }
.route-workflow small { margin-bottom: 2px; color: #9a9690; font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.route-workflow strong { color: #6a6762; font-size: 11px; }
.route-workflow > i { height: 2px; margin: 0 15px; background: #dedbd5; flex: 1; }
.route-workflow .complete > span { border-color: #3d9760; color: white; background: #3d9760; }
.route-workflow .current > span { border-color: var(--brick); color: white; background: var(--brick); box-shadow: 0 0 0 5px rgba(173,79,68,.1); }
.route-workflow .current strong { color: var(--ink); }
.route-editor-grid { min-height: 720px; grid-template-columns: 300px minmax(460px, 1fr) 330px; border-radius: 17px; }
.route-editor-sidebar, .route-order-panel { padding: 25px 23px; }
.editor-section-heading { margin-bottom: 20px; }
.editor-section-heading > span { width: 32px; height: 32px; border-radius: 9px; background: var(--editor-blue); font-size: 13px; }
.editor-section-heading h3, .order-panel-head h3 { font-size: 17px; }
.editor-section-heading p { font-size: 10px; }
.route-details-form { gap: 15px; }
.route-details-form label, .coordinate-fields label { color: #44413d; font-size: 10px; letter-spacing: .02em; text-transform: uppercase; }
.route-details-form input, .route-details-form select { height: 43px; border-color: #dcd8d2; background: white; font-size: 12px; }
.editor-tools { padding-top: 24px; }
.editor-tool { min-height: 52px; padding: 10px 12px; border-radius: 10px; }
.editor-tool.primary { min-height: 58px; border: 0; background: var(--editor-blue); box-shadow: 0 5px 13px rgba(49,93,114,.18); }
.editor-tool.primary:hover, .editor-tool.primary.active { color: white; background: #234a5e; }
.editor-tool strong { font-size: 11px; }.editor-tool small { font-size: 8px; }
.mode-label { margin: 15px 0 8px; color: #8d8983; font-size: 8px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.mode-switch { gap: 8px; }
.mode-switch button { min-height: 78px; padding: 10px 6px; border: 1px solid #dedbd5; background: white; display: flex; align-items: center; flex-direction: column; justify-content: center; }
.mode-switch button .mode-icon { width: 27px; height: 27px; margin: 0 0 5px; border-radius: 50%; color: var(--editor-blue); background: var(--editor-blue-soft); display: grid; place-items: center; font-size: 15px; }
.mode-switch button strong, .mode-switch button small { display: block; }.mode-switch button strong { font-size: 9px; }.mode-switch button small { margin-top: 3px; color: #999; font-size: 7px; font-weight: 600; }
.mode-switch button.active { border-color: var(--editor-blue); color: var(--editor-blue); background: var(--editor-blue-soft); box-shadow: inset 0 0 0 1px var(--editor-blue); }
.route-tool-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }.route-tool-actions .editor-tool { padding: 8px; }
.editor-notice { margin-top: 16px; padding: 12px; font-size: 9px; }
.route-map-panel { background: #e4e2dc; }
.map-toolbar { min-height: 63px; padding-inline: 19px; border-bottom: 1px solid #ddd9d2; }
.map-toolbar strong { font-size: 12px; }.map-toolbar small { margin-top: 2px; font-size: 9px; }
.map-status-dot { width: 10px; height: 10px; box-shadow: 0 0 0 4px rgba(69,161,107,.13); }
.map-legend { padding: 8px 10px; border: 1px solid #e2dfda; border-radius: 8px; background: #fafafa; font-size: 9px; }
.route-map-placeholder { min-height: 600px; }
.map-instruction { position: absolute; z-index: 6; top: 16px; left: 50%; min-width: 285px; padding: 11px 14px; border: 1px solid rgba(255,255,255,.8); border-radius: 10px; color: white; background: rgba(35,49,57,.9); box-shadow: 0 6px 20px rgba(0,0,0,.2); transform: translateX(-50%); display: flex; align-items: center; gap: 10px; pointer-events: none; backdrop-filter: blur(5px); }
.map-instruction > span { width: 27px; height: 27px; border-radius: 7px; background: rgba(255,255,255,.13); display: grid; place-items: center; flex: 0 0 auto; font-weight: 900; }.map-instruction strong, .map-instruction small { display: block; }.map-instruction strong { font-size: 10px; }.map-instruction small { margin-top: 2px; color: rgba(255,255,255,.72); font-size: 8px; }.map-instruction.editing { background: rgba(143,57,50,.93); }
.map-footer { min-height: 48px; padding-inline: 19px; font-size: 10px; }
.order-panel-head > div > small { margin-top: 5px; color: var(--muted); display: block; font-size: 9px; line-height: 1.35; }
.route-list-tabs { margin-top: 22px; }
.route-list-tabs button { padding-block: 11px; font-size: 10px; }
.route-point-item, .route-stop-item { min-height: 55px; margin-bottom: 4px; padding: 10px; }
.unassign-stop-btn { padding: 7px 9px; border: 1px solid #e3c1bd; border-radius: 7px; color: #761c1c; background: #fff5f3; flex: 0 0 auto; font-size: 8px; font-weight: 850; }
.unassign-stop-btn:hover { border-color: #761c1c; background: #fce9e6; }.unassign-stop-btn:disabled { opacity: .55; cursor: wait; }
.stop-item-actions { display: flex; align-items: stretch; flex-direction: column; gap: 4px; flex: 0 0 auto; }
.delete-location-btn { padding: 7px 9px; border: 0; border-radius: 7px; color: white; background: #761c1c; font-size: 8px; font-weight: 850; }
.delete-location-btn:hover { background: #541010; }.delete-location-btn:disabled { opacity: .55; cursor: wait; }
.route-point-item > span, .stop-symbol { width: 29px; height: 29px; }
.route-point-item strong, .route-stop-item strong { font-size: 11px; }.route-point-item small, .route-stop-item small { font-size: 8px; }
.selected-point-editor { margin-top: 20px; padding: 16px; border: 1px solid #e1ded8; border-radius: 11px; background: var(--editor-canvas); }
.coordinate-fields input { background: white; }
.reorder-actions button { min-height: 34px; background: white; }
.step-navigation { margin-top: 18px; padding-top: 16px; border-top: 1px solid #e3e0db; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.step-navigation button { min-height: 40px; padding: 0 13px; border-radius: 8px; font-size: 9px; }
.step-navigation-end { justify-content: flex-end; }
.review-navigation { margin-top: auto; }

/* Only one workflow task is visible at a time. */
.route-editor[data-workflow-step="1"] .editor-tools,
.route-editor[data-workflow-step="1"] .route-map-panel,
.route-editor[data-workflow-step="1"] .route-order-panel { display: none; }
.route-editor[data-workflow-step="1"] .route-editor-grid { min-height: 0; grid-template-columns: minmax(0, 620px); justify-content: center; background: #f3f1ed; }
.route-editor[data-workflow-step="1"] .route-editor-sidebar { width: 100%; padding: 34px; border: 0; }
.route-editor[data-workflow-step="2"] .route-details-form,
.route-editor[data-workflow-step="2"] .route-order-panel,
.route-editor[data-workflow-step="3"] .route-details-form,
.route-editor[data-workflow-step="3"] .route-order-panel { display: none; }
.route-editor[data-workflow-step="2"] .route-editor-grid,
.route-editor[data-workflow-step="3"] .route-editor-grid { grid-template-columns: 300px minmax(460px, 1fr); }
.route-editor[data-workflow-step="2"] .route-editor-sidebar,
.route-editor[data-workflow-step="3"] .route-editor-sidebar { padding: 25px 23px; }
.route-editor[data-workflow-step="2"] .editor-tools,
.route-editor[data-workflow-step="3"] .editor-tools { padding-top: 0; }
.route-editor[data-workflow-step="2"] [data-editor-action="start"],
.route-editor[data-workflow-step="2"] [data-mode="point"],
.route-editor[data-workflow-step="2"] .route-tool-actions,
.route-editor[data-workflow-step="2"] .point-step-navigation { display: none; }
.route-editor[data-workflow-step="2"] .mode-switch { grid-template-columns: 1fr; }
.route-editor[data-workflow-step="3"] [data-editor-action="start"],
.route-editor[data-workflow-step="3"] [data-mode="stop"],
.route-editor[data-workflow-step="3"] .stop-step-navigation { display: none; }
.route-editor[data-workflow-step="3"] .mode-switch { grid-template-columns: 1fr; }
.route-editor:not([data-workflow-step="3"]) .map-empty { display: none; }
.route-editor[data-workflow-step="4"] .route-editor-sidebar,
.route-editor[data-workflow-step="4"] .route-map-panel { display: none; }
.route-editor[data-workflow-step="4"] .route-editor-grid { width: 100%; min-height: 640px; grid-template-columns: minmax(0, 1fr); justify-content: stretch; background: #f3f1ed; }
.route-editor[data-workflow-step="4"] .route-order-panel { width: 100%; min-height: 640px; padding: 42px 48px; border: 0; display: flex; flex-direction: column; }
.route-editor[data-workflow-step="4"] .order-panel-head { padding-bottom: 8px; border-bottom: 1px solid #ded8d0; }
.route-editor[data-workflow-step="4"] .order-panel-head .eyebrow { color: var(--brick); font-size: 10px; }
.route-editor[data-workflow-step="4"] .order-panel-head h3 { font-size: 24px; }
.route-editor[data-workflow-step="4"] .order-panel-head > div > small { color: #5f5b55; font-size: 11px; }
.route-editor[data-workflow-step="4"] .order-panel-head > span { padding: 8px 12px; border-radius: 999px; color: #555; background: #ebe7e0; font-size: 10px; }
.route-editor[data-workflow-step="4"] .route-list-tabs { margin: 24px 0 14px; border-bottom-color: #d5cec5; gap: 8px; }
.route-editor[data-workflow-step="4"] .route-list-tabs button { padding: 13px 10px; border-radius: 8px 8px 0 0; color: #66615b; font-size: 11px; }
.route-editor[data-workflow-step="4"] .route-list-tabs button.active { color: var(--brick); background: #fff6f5; }
.route-editor[data-workflow-step="4"] .route-list-tabs span { margin-left: 6px; color: #555; background: #e7e1d9; font-size: 9px; }
.route-editor[data-workflow-step="4"] .route-list { width: 100%; max-height: 410px; padding-right: 6px; }
.route-editor[data-workflow-step="4"] .route-point-item,
.route-editor[data-workflow-step="4"] .route-stop-item { width: 100%; min-height: 68px; margin-bottom: 8px; padding: 13px 14px; border-color: #e2dcd5; background: #fffdfb; box-shadow: 0 4px 14px rgba(42,34,29,.035); }
.route-editor[data-workflow-step="4"] .route-point-item:hover,
.route-editor[data-workflow-step="4"] .route-point-item.selected,
.route-editor[data-workflow-step="4"] .route-stop-item.selected,
.route-editor[data-workflow-step="4"] .route-stop-item:hover { border-color: #cc9b95; background: #fff6f5; box-shadow: 0 8px 20px rgba(143,57,50,.08); }
.route-editor[data-workflow-step="4"] .route-point-item[draggable="true"],
.route-editor[data-workflow-step="4"] .route-stop-item[draggable="true"] { cursor: grab; }
.route-editor[data-workflow-step="4"] .route-point-item.dragging,
.route-editor[data-workflow-step="4"] .route-stop-item.dragging { opacity: .58; cursor: grabbing; }
.route-editor[data-workflow-step="4"] .route-point-item.drag-over,
.route-editor[data-workflow-step="4"] .route-stop-item.drag-over { border-color: var(--brick); background: #fff0ee; transform: translateY(2px); }
.drag-handle { width: 18px; color: #aaa19a; display: grid; place-items: center; flex: 0 0 auto; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; font-weight: 900; line-height: 1; letter-spacing: -3px; cursor: grab; }
.route-point-item:hover .drag-handle,
.route-stop-item:hover .drag-handle,
.route-point-item.selected .drag-handle { color: var(--brick); }
.route-editor[data-workflow-step="4"] .route-point-item > span,
.route-editor[data-workflow-step="4"] .stop-symbol { width: 34px; height: 34px; font-size: 11px; }
.route-editor[data-workflow-step="4"] .route-point-item strong,
.route-editor[data-workflow-step="4"] .route-stop-item strong { font-size: 13px; }
.route-editor[data-workflow-step="4"] .route-point-item small,
.route-editor[data-workflow-step="4"] .route-stop-item small { color: #625d57; font-size: 10px; }
.route-editor[data-workflow-step="4"] .route-point-item i,
.route-editor[data-workflow-step="4"] .route-stop-item i { color: #8d8780; font-size: 15px; font-style: normal; }
.route-editor[data-workflow-step="4"] .selected-point-editor { margin-top: 22px; padding: 20px; border-color: #d8c8c4; background: #fff8f6; box-shadow: 0 8px 20px rgba(143,57,50,.07); }
.route-editor[data-workflow-step="4"] .selected-point-title span { color: var(--brick); font-size: 9px; font-weight: 900; }
.route-editor[data-workflow-step="4"] .selected-point-title strong { font-size: 16px; }
.route-editor[data-workflow-step="4"] .coordinate-fields input { height: 42px; border-color: #d7ccc8; font-size: 12px; }
.route-editor[data-workflow-step="4"] .reorder-actions button { min-height: 40px; border-color: #d7ccc8; color: #4d4944; font-size: 10px; }
.selected-stop-editor { margin-top: 22px; padding: 20px; border: 1px solid #d8c8c4; border-radius: 11px; background: #fff8f6; box-shadow: 0 8px 20px rgba(143,57,50,.07); }
.selected-stop-title { display: flex; align-items: center; gap: 15px; }
.selected-stop-title > div { min-width: 0; }
.selected-stop-title span:not(.stop-symbol),
.selected-stop-title strong,
.selected-stop-title small { display: block; }
.selected-stop-title span:not(.stop-symbol) { color: var(--brick); font-size: 9px; font-weight: 900; text-transform: uppercase; }
.selected-stop-title strong { margin-top: 3px; overflow: hidden; color: var(--ink); font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
.selected-stop-title small { margin-top: 5px; color: #625d57; font-size: 10px; }
.selected-stop-editor .stop-symbol { width: 40px; height: 40px; font-size: 12px; }
.stop-detail-actions { margin-top: 20px; display: grid; gap: 10px; }
.stop-detail-actions .unassign-stop-btn,
.stop-detail-actions .delete-location-btn { min-height: 42px; width: 100%; font-size: 10px; }
.route-editor[data-workflow-step="4"] .review-navigation { margin-top: 20px; }
.route-editor:not([data-workflow-step="4"]) .route-save-top { display: none; }
.stop-dialog { position: fixed; z-index: 1000; inset: 0; padding: 20px; display: grid; place-items: center; }
.stop-dialog-backdrop { position: absolute; inset: 0; background: rgba(25,22,20,.58); backdrop-filter: blur(3px); }
.stop-dialog-card { position: relative; z-index: 1; width: min(100%, 470px); padding: 25px; border-radius: 15px; background: white; box-shadow: 0 24px 70px rgba(0,0,0,.25); display: grid; gap: 15px; }
.stop-dialog-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.stop-dialog-heading .eyebrow { margin: 0 0 4px; font-size: 9px; }.stop-dialog-heading h3 { margin: 0; font-size: 21px; }
.stop-dialog-heading > button { width: 32px; height: 32px; border: 0; border-radius: 8px; color: #666; background: #f0eeeb; font-size: 22px; line-height: 1; }
.stop-dialog-help { margin: -4px 0 2px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.stop-dialog-card > label { display: grid; gap: 6px; color: #45413d; font-size: 10px; font-weight: 800; letter-spacing: .025em; text-transform: uppercase; }
.stop-dialog-card label b { color: var(--brick); }.stop-dialog-card input { width: 100%; height: 42px; padding: 0 11px; border: 1px solid #d7d3ce; border-radius: 8px; background: #faf9f7; outline: none; font-size: 12px; }
.stop-dialog-card input:focus { border-color: var(--brick); box-shadow: 0 0 0 3px rgba(173,79,68,.1); }.stop-dialog-card input[readonly] { color: #777; background: #efeeeb; }
.stop-dialog-message { padding: 10px 12px; border-radius: 8px; color: #8c3028; background: #fff0ee; font-size: 10px; font-weight: 700; }
.stop-dialog-actions { padding-top: 4px; display: flex; justify-content: flex-end; gap: 8px; }.stop-dialog-actions button { min-height: 42px; padding: 0 16px; border-radius: 8px; font-size: 10px; }.stop-dialog-actions button:disabled { opacity: .6; cursor: wait; }

/* Terminal location editor */
.terminal-editor { padding: 26px; }
.terminal-editor-grid { margin-top: 20px; display: grid; grid-template-columns: minmax(330px, .78fr) minmax(460px, 1.22fr); gap: 24px; }
.terminal-details-form { height: max-content; margin: 0; padding: 25px; border: 1px solid #dfdcd7; border-radius: 14px; background: #faf9f7; box-shadow: 0 8px 25px rgba(40,34,30,.04); }
.terminal-form-heading, .terminal-map-heading > div { display: flex; align-items: flex-start; gap: 11px; }
.terminal-form-heading > span, .terminal-map-heading > div > span { width: 31px; height: 31px; border-radius: 50%; color: white; background: #761c1c; display: grid; place-items: center; flex: 0 0 auto; font-size: 11px; font-weight: 900; }
.terminal-form-heading h3, .terminal-map-heading h3 { margin: 0; font-size: 18px; }.terminal-form-heading p, .terminal-map-heading p { margin: 3px 0 0; color: var(--muted); font-size: 10px; line-height: 1.4; }
.terminal-coordinate-box { padding: 15px; border: 1px solid #ddd8d1; border-radius: 10px; background: white; }
.terminal-coordinate-box > div:first-child { margin-bottom: 12px; }.terminal-coordinate-box strong, .terminal-coordinate-box small { display: block; }.terminal-coordinate-box strong { font-size: 11px; }.terminal-coordinate-box small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.terminal-details-form .send-btn { width: 100%; min-height: 47px; justify-self: stretch; border: 0; border-radius: 9px; }
.terminal-map-section { min-width: 0; padding: 20px; border: 1px solid #dedbd5; border-radius: 14px; background: white; box-shadow: 0 8px 25px rgba(40,34,30,.05); }
.terminal-map-heading { min-height: 48px; margin-bottom: 15px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }.terminal-map-heading > button { min-height: 38px; padding-inline: 12px; border-radius: 8px; font-size: 9px; font-weight: 800; }.terminal-map-heading > button:disabled { opacity: .55; cursor: wait; }
.terminal-map { width: 100%; min-height: 540px; border: 1px solid #d7d3cc; border-radius: 11px; overflow: hidden; background: #e7e4de; }
.terminal-edit-marker { position: relative; width: 30px; height: 30px; padding: 0; border: 3px solid white; border-radius: 50%; background: #761c1c; box-shadow: 0 3px 12px rgba(60,15,15,.4); }
.terminal-edit-marker span { position: absolute; top: 50%; left: 50%; width: 6px; height: 6px; border: 1px solid white; border-radius: 50%; background: white; transform: translate(-50%,-50%); }
.terminal-edit-marker:focus { outline: 4px solid rgba(118,28,28,.24); }
.terminal-map-status { min-height: 51px; padding: 10px 3px 0; display: flex; align-items: center; gap: 10px; }.terminal-map-status .map-status-dot { margin-left: 4px; flex: 0 0 auto; }.terminal-map-status > div { min-width: 0; flex: 1; }.terminal-map-status strong, .terminal-map-status small { display: block; }.terminal-map-status strong { font-size: 10px; }.terminal-map-status small { margin-top: 2px; color: var(--muted); font-family: ui-monospace, monospace; font-size: 9px; }.terminal-map-status button { padding: 7px 10px; border: 1px solid #d5d1ca; border-radius: 7px; color: #555; background: white; font-size: 9px; font-weight: 800; }
.terminal-map-tip { margin-top: 10px; padding: 10px 12px; border-radius: 8px; color: #67593f; background: #fff8e9; display: flex; align-items: center; gap: 8px; font-size: 9px; }.terminal-map-tip span { width: 18px; height: 18px; border: 1px solid #c6a867; border-radius: 50%; display: grid; place-items: center; font-weight: 900; }.terminal-map-tip p { margin: 0; }

/* Compact desktop layout for map-based edit screens. */
@media (min-width: 1051px) and (min-height: 650px) {
    .map-editor-page { overflow: hidden; }
    .map-editor-page .admin-main { height: 100dvh; min-height: 0; padding: 18px clamp(20px, 2.2vw, 38px); }
    .map-editor-page .admin-titlebar { display: none; }
    .map-editor-page .admin-content { width: 100%; height: 100%; }
    .map-editor-page .terminal-editor { height: 100%; padding: 20px; display: flex; flex-direction: column; overflow: hidden; }
    .map-editor-page .terminal-editor > .panel-heading { flex: 0 0 auto; }
    .map-editor-page .terminal-editor > .panel-heading h2 { font-size: clamp(25px, 2.2vw, 34px); }
    .map-editor-page .terminal-editor-grid { min-height: 0; margin-top: 14px; flex: 1; gap: 18px; overflow: hidden; }
    .map-editor-page .terminal-details-form { height: 100%; min-height: 0; max-height: 100%; padding: 20px; overflow-y: auto; overscroll-behavior: contain; }
    .map-editor-page .terminal-map-section { height: 100%; min-height: 0; padding: 16px; display: flex; flex-direction: column; overflow: hidden; }
    .map-editor-page .terminal-map-heading { min-height: 42px; margin-bottom: 10px; }
    .map-editor-page .terminal-map { height: 0; min-height: 0; flex: 1; }

    .map-editor-page .route-editor { height: 100%; display: flex; flex-direction: column; }
    .map-editor-page .route-editor-header,
    .map-editor-page .route-workflow { flex: 0 0 auto; }
    .map-editor-page .route-editor-header { margin-bottom: 10px; }
    .map-editor-page .route-workflow { margin-bottom: 10px; padding-block: 10px; }
    .map-editor-page .route-editor-grid,
    .map-editor-page .route-editor[data-workflow-step] .route-editor-grid { min-height: 0; flex: 1; }
    .map-editor-page .route-editor[data-workflow-step="4"] .route-editor-grid { width: 100%; grid-template-columns: minmax(0, 1fr); }
    .map-editor-page .route-editor[data-workflow-step="4"] .route-order-panel {
        padding-inline: clamp(34px, 4vw, 72px);
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(360px, 430px);
        grid-template-rows: auto auto minmax(390px, 1fr) auto;
        column-gap: 24px;
        align-items: start;
    }
    .map-editor-page .route-editor-sidebar,
    .map-editor-page .route-order-panel,
    .map-editor-page .route-editor[data-workflow-step="4"] .route-order-panel { min-height: 0; }
    .map-editor-page .route-editor[data-workflow-step="4"] .order-panel-head { grid-column: 1 / -1; }
    .map-editor-page .route-editor[data-workflow-step="4"] .route-list-tabs { grid-column: 1; grid-row: 2; width: 100%; }
    .map-editor-page .route-editor[data-workflow-step="4"] .route-list { grid-column: 1; grid-row: 3; min-height: 390px; max-height: none; align-self: stretch; overscroll-behavior: contain; }
    .map-editor-page .route-editor[data-workflow-step="4"] .selected-point-editor,
    .map-editor-page .route-editor[data-workflow-step="4"] .selected-stop-editor { grid-column: 2; grid-row: 2 / 4; margin-top: 24px; padding: 18px; align-self: start; }
    .map-editor-page .route-editor[data-workflow-step="4"] .review-navigation { grid-column: 1 / -1; grid-row: 4; margin-top: 10px; padding-top: 10px; }
    .map-editor-page .route-map-placeholder { min-height: 0; }
}

@media (max-width: 1050px) { .terminal-editor-grid { grid-template-columns: 1fr; }.terminal-map { min-height: 480px; } }
@media (max-width: 560px) { .terminal-editor { padding: 18px; }.terminal-details-form, .terminal-map-section { padding: 16px; }.terminal-map { min-height: 400px; }.terminal-map-heading { align-items: flex-start; flex-direction: column; }.terminal-map-heading > button { width: 100%; } }

@media (max-width: 1260px) { .route-editor-grid { grid-template-columns: 260px minmax(360px,1fr); }.route-order-panel { grid-column: 1 / -1; border-top: 1px solid #e5e2de; border-left: 0; }.route-list { max-height: 240px; } }
@media (max-width: 850px) { .route-editor-grid { display: block; }.route-editor-sidebar, .route-order-panel { border: 0; }.route-map-placeholder { min-height: 500px; }.route-editor-header { align-items: flex-start; }.route-save-top { flex: 0 0 auto; }.route-workflow > button { min-width: auto; }.route-workflow p { display: none; }.route-editor[data-workflow-step] .route-editor-grid { display: block; }.route-editor[data-workflow-step="1"] .route-editor-sidebar, .route-editor[data-workflow-step="4"] .route-order-panel { width: 100%; }.route-editor[data-workflow-step="2"] .route-editor-sidebar, .route-editor[data-workflow-step="3"] .route-editor-sidebar { border-bottom: 1px solid #e5e2de; }.route-editor[data-workflow-step="2"] .route-map-panel, .route-editor[data-workflow-step="3"] .route-map-panel { display: grid; } }
@media (max-width: 560px) { .route-editor-header { flex-direction: column; }.route-save-top { width: 100%; }.route-editor-sidebar, .route-order-panel { padding: 17px; }.route-map-placeholder { min-height: 410px; }.map-legend, .map-hint { display: none; }.route-workflow { justify-content: center; }.route-workflow > i { max-width: 45px; margin-inline: 8px; }.map-instruction { top: 10px; min-width: 0; width: calc(100% - 85px); padding: 9px; transform: none; left: 10px; }.map-instruction small { display: none; } }

.filter-bar {
    margin-bottom: 18px;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 10px;
}

.filter-bar select {
    flex: 1 1 180px;
    min-width: 0;
}

.filter-bar .search-input {
    flex: 1 1 260px;
    min-width: 0;
}
.registry-count { min-height: 43px; padding: 0 14px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); background: #f8f7f5; display: inline-flex; align-items: center; font-size: 11px; font-weight: 800; }
.coordinate-value { color: #555; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px; white-space: nowrap; }
.route-count-badge { min-width: 28px; height: 28px; padding: 0 8px; border-radius: 14px; color: #761c1c; background: #f7e7e5; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 900; }
.danger-outline-btn { margin-left: 5px; border-color: #d9aaa5; color: #761c1c; }.danger-outline-btn:hover { border-color: #761c1c; background: #fff1ef; }

.nav-toggle {
    display: none;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 1050px) {
    .profile-grid,
    .chart-grid {
        grid-template-columns: 1fr;
    }

    .admin-chip {
        min-width: 0;
    }

    .admin-chip > span:last-child {
        display: none;
    }
}

@media (max-width: 760px) {
    :root {
        --sidebar: 270px;
    }

    .sidebar {
        width: var(--sidebar);
        padding: 70px 18px 18px;
        transform: translateX(-105%);
        transition: transform .25s ease;
    }

    .nav-open .sidebar {
        transform: translateX(0);
    }

    .sidebar-brand {
        font-size: 29px;
    }

    .nav-item {
        min-height: 54px;
        padding: 0 14px;
        grid-template-columns: 34px 1fr;
        justify-items: start;
        gap: 12px;
    }

    .nav-item span:not(.avatar) {
        display: block;
    }

    .nav-toggle {
        position: fixed;
        top: 16px;
        left: 16px;
        z-index: 60;
        width: 44px;
        height: 44px;
        border: 0;
        border-radius: 10px;
        background: var(--brick);
        color: white;
        display: grid;
        place-items: center;
        font-size: 23px;
    }

    .admin-main {
        margin-left: 0;
        padding: 82px 18px 45px;
    }

    .admin-titlebar {
        align-items: center;
    }

    .metric-grid {
        grid-template-columns: 1fr;
    }

    .metric-card {
        min-height: 160px;
    }

    .data-table {
        min-width: 720px;
    }

    .route-table {
        min-width: 620px;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .backup-schedule {
        align-items: flex-start;
        flex-direction: column;
    }

    .filter-bar {
        align-items: stretch;
        flex-direction: column;
    }

    .filter-bar select,
    .filter-bar .search-input,
    .filter-bar .outline-btn {
        width: 100%;
    }
}

@media (max-width: 560px) {
    .auth-card {
        min-height: auto;
        padding: 75px 22px 44px;
    }

    .brand {
        margin-bottom: 48px;
    }

    .auth-form {
        gap: 20px;
    }

    .auth-form input {
        height: 56px;
        font-size: 22px;
    }

    .auth-form button {
        margin-top: 18px;
        font-size: 25px;
    }

    .admin-titlebar h1 {
        font-size: 39px;
    }

    .metric-card {
        padding: 26px;
    }

    .metric-with-icon {
        align-items: flex-start;
        flex-direction: column;
    }

    .profile-identity {
        align-items: flex-start;
        flex-direction: column;
    }

    .section-heading,
    .panel-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .tab-nav a {
        padding: 12px 15px;
        font-size: 14px;
    }
}

/* Reference-inspired admin polish */
:root {
    --admin-red: #8c0711;
    --admin-red-dark: #69030b;
    --admin-red-light: #d83f4d;
    --admin-pink: #fff6f7;
    --admin-line: #f0d9dc;
    --admin-text: #202124;
    --admin-muted: #68707a;
    --sidebar: 92px;
}

.auth-page {
    background:
        radial-gradient(circle at 14% 14%, rgba(255, 195, 43, .22), transparent 22rem),
        radial-gradient(circle at 88% 18%, rgba(140, 7, 17, .12), transparent 24rem),
        linear-gradient(135deg, #fff8f8 0%, #fff 44%, #fff3f3 100%);
}

.auth-shell {
    padding: 26px;
}

.auth-card {
    width: min(100%, 540px);
    min-height: 0;
    padding: 42px 48px 38px;
    border: 1px solid var(--admin-line);
    border-radius: 8px;
    box-shadow: 0 26px 80px rgba(140, 7, 17, .12);
    position: relative;
}

.auth-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 5px;
    border-radius: 8px 8px 0 0;
    background: linear-gradient(90deg, var(--admin-red), #ffc32b);
}

.brand--image {
    width: min(100%, 250px);
    margin: 0 auto 28px;
    display: block;
}

.brand--image img {
    width: 100%;
    height: auto;
    display: block;
}

.auth-copy {
    margin-bottom: 24px;
    text-align: center;
}

.auth-copy .eyebrow {
    margin-bottom: 5px;
}

.auth-copy h1 {
    margin: 0;
    font-size: 27px;
    line-height: 1.1;
}

.auth-form {
    gap: 14px;
}

.auth-field {
    position: relative;
    display: block;
}

.auth-field-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    width: 20px;
    height: 20px;
    color: #9b4c51;
    transform: translateY(-50%);
    pointer-events: none;
}

.auth-field-icon svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.auth-form .auth-field input,
.auth-form.compact .auth-field input {
    height: 52px;
    border-color: #ead8db;
    border-radius: 8px;
    background: #fff;
    padding-left: 48px;
    font-size: 15px;
}

.auth-form .auth-field input:hover {
    border-color: #dfbdc1;
}

.auth-form button,
.auth-form.compact button {
    width: 100%;
    min-height: 50px;
    margin-top: 8px;
    border-radius: 8px;
    background: var(--admin-red);
    color: #fff;
    font-size: 15px;
    font-weight: 800;
}

.auth-links {
    width: 100%;
    font-size: 14px;
    gap: 8px 28px;
}

.auth-links a {
    font-weight: 650;
}

.admin-page {
    color: var(--admin-text);
    background: #fffafa;
}

.sidebar {
    width: var(--sidebar);
    padding: 18px 10px;
    overflow: hidden;
    background: linear-gradient(180deg, var(--admin-red) 0%, var(--admin-red-dark) 100%);
    border-right: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 10px 0 30px rgba(105, 3, 11, .15);
    transition: width .22s ease;
}

.sidebar:hover,
.sidebar:focus-within,
.nav-open .sidebar {
    width: 236px;
}

.sidebar-brand {
    min-height: 62px;
    margin: 0 0 14px;
    padding: 8px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    display: grid;
    grid-template-columns: 38px 1fr;
    align-items: center;
    gap: 10px;
    overflow: hidden;
    text-align: left;
}

.sidebar-brand img {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    background: white;
}

.sidebar-brand span,
.sidebar-brand small,
.sidebar-user > span:last-child {
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity .18s ease, transform .18s ease;
    white-space: nowrap;
}

.sidebar:hover .sidebar-brand span,
.sidebar:hover .sidebar-brand small,
.sidebar:hover .sidebar-user > span:last-child,
.sidebar:focus-within .sidebar-brand span,
.sidebar:focus-within .sidebar-brand small,
.sidebar:focus-within .sidebar-user > span:last-child,
.nav-open .sidebar .sidebar-brand span,
.nav-open .sidebar .sidebar-brand small,
.nav-open .sidebar .sidebar-user > span:last-child {
    opacity: 1;
    transform: none;
}

.sidebar-brand span {
    color: white;
    font-size: 20px;
    font-weight: 900;
    letter-spacing: 0;
}

.sidebar-brand small {
    grid-column: 2;
    margin-top: -16px;
    color: rgba(255, 255, 255, .7);
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
}

.sidebar nav {
    gap: 5px;
}

.nav-item {
    min-height: 42px;
    padding: 0 12px;
    border-radius: 7px;
    display: grid;
    grid-template-columns: 24px 1fr;
    align-items: center;
    justify-items: center;
    gap: 11px;
    color: rgba(255, 255, 255, .82);
    font-size: 12px;
    font-weight: 750;
}

.nav-item svg {
    width: 18px;
    height: 18px;
}

.nav-item span:not(.avatar) {
    display: block;
    width: 0;
    overflow: hidden;
    opacity: 0;
    white-space: nowrap;
    transition: opacity .18s ease;
}

.sidebar:hover .nav-item span:not(.avatar),
.sidebar:focus-within .nav-item span:not(.avatar),
.nav-open .sidebar .nav-item span:not(.avatar) {
    width: auto;
    opacity: 1;
}

.nav-item:hover {
    background: rgba(255, 255, 255, .08);
    transform: none;
}

.nav-item.active {
    color: white;
    background: #d83445;
}

.nav-item.active::before {
    display: none;
}

.sidebar-user {
    min-height: 54px;
    margin-top: auto;
    padding: 8px 10px;
    border-top: 1px solid rgba(255, 255, 255, .12);
    display: grid;
    grid-template-columns: 34px 1fr;
    align-items: center;
    gap: 10px;
    color: white;
    overflow: hidden;
    text-decoration: none;
}

.sidebar-user .avatar {
    width: 34px;
    height: 34px;
    background: white;
    color: var(--admin-red);
}

.sidebar-user strong,
.sidebar-user small {
    display: block;
}

.sidebar-user strong {
    max-width: 150px;
    overflow: hidden;
    font-size: 12px;
    text-overflow: ellipsis;
}

.sidebar-user small {
    margin-top: 2px;
    color: rgba(255, 255, 255, .72);
    font-size: 9px;
}

.logout-link {
    margin-top: 8px;
}

.admin-main {
    margin-left: var(--sidebar);
    padding: 28px clamp(20px, 3vw, 42px) 44px;
    transition: margin-left .22s ease;
}

.sidebar:hover + .admin-main,
.sidebar:focus-within + .admin-main {
    margin-left: 236px;
}

.admin-titlebar {
    margin-bottom: 22px;
    align-items: center;
}

.eyebrow {
    color: var(--admin-red);
    font-size: 10px;
    letter-spacing: 0;
}

.admin-titlebar h1 {
    font-size: clamp(25px, 3vw, 38px);
    letter-spacing: 0;
}

.admin-chip {
    min-width: 190px;
    border-color: var(--admin-line);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(140, 7, 17, .06);
}

.admin-content {
    width: min(100%, 1420px);
}

.metric-grid {
    grid-template-columns: repeat(4, minmax(160px, 1fr));
    gap: 14px;
}

.metric-card,
.panel,
.table-card {
    border-color: var(--admin-line);
    border-radius: 8px;
    box-shadow: 0 12px 30px rgba(140, 7, 17, .05);
}

.metric-card {
    min-height: 104px;
    padding: 18px;
}

.metric-card > span,
.metric-card > div > span {
    color: var(--admin-muted);
    font-size: 13px;
    font-weight: 800;
}

.metric-card strong {
    margin-top: 8px;
    font-size: clamp(26px, 3vw, 40px);
    letter-spacing: 0;
}

.metric-card small {
    margin-top: 8px;
    color: var(--admin-muted);
    font-size: 12px;
}

.section-block {
    margin-top: 20px;
}

.section-heading h2,
.panel-heading h2 {
    font-size: clamp(18px, 2vw, 25px);
    letter-spacing: 0;
}

.panel,
.table-card {
    padding: 18px;
}

.tab-panel {
    min-height: 0;
    border-radius: 0 8px 8px 8px;
}

.data-table {
    font-size: 13px;
}

.data-table thead,
.table-scroll .data-table thead th {
    color: #7f8791;
    background: #fff;
}

.data-table th {
    font-size: 10px;
    text-transform: uppercase;
}

.data-table th,
.data-table td {
    padding: 13px 12px;
    border-bottom: 1px solid #f0ecec;
}

.data-table tbody tr:nth-child(even) {
    background: transparent;
}

.data-table tbody tr:hover {
    background: #fff7f8;
}

.status {
    border-radius: 6px;
    font-size: 11px;
}

.outline-btn,
.primary-btn,
.actions button,
.backup-schedule button,
.data-table button {
    min-height: 36px;
    border-radius: 7px;
    padding: 8px 12px;
    font-size: 12px;
}

.outline-btn {
    border-color: #ead8db;
    color: #4b4f55;
}

.primary-btn,
.actions button,
.data-table button {
    background: var(--admin-red);
    color: white;
    text-transform: none;
}

.filter-bar {
    margin-bottom: 16px;
}

.search-input,
.filter-bar select {
    min-height: 38px;
    border-color: #ead8db;
    border-radius: 7px;
    font-size: 12px;
}

.tab-nav a {
    padding: 12px 18px;
    border-radius: 7px 7px 0 0;
    color: #7d848e;
    font-size: 12px;
    letter-spacing: 0;
    text-transform: none;
}

.tab-nav a.active {
    border-color: var(--admin-line);
    border-bottom-color: white;
    color: var(--admin-red);
}

.profile-grid,
.chart-grid {
    gap: 18px;
}

.profile-avatar,
.profile-avatar-btn,
.profile-avatar-btn .profile-avatar {
    width: 90px;
    height: 90px;
    flex-basis: 90px;
}

@media (max-width: 1050px) {
    .metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    :root {
        --sidebar: 236px;
    }

    .sidebar {
        width: var(--sidebar);
    }

    .sidebar-brand span,
    .sidebar-brand small,
    .sidebar-user > span:last-child,
    .nav-item span:not(.avatar) {
        width: auto;
        opacity: 1;
        transform: none;
    }

    .admin-main,
    .sidebar:hover + .admin-main,
    .sidebar:focus-within + .admin-main {
        margin-left: 0;
    }

    .metric-grid {
        grid-template-columns: 1fr;
    }
}

/* LipaGO admin UI fixes */
.sidebar {
    display: flex;
    gap: 8px;
}

.sidebar-brand,
.nav-item,
.sidebar-user {
    outline-offset: 3px;
}

.sidebar-brand:focus-visible,
.nav-item:focus-visible,
.sidebar-user:focus-visible,
.nav-toggle:focus-visible,
.choice-option:focus-visible,
.avatar-file-label:focus-within {
    outline: 3px solid rgba(255, 195, 43, .72);
}

.sidebar nav {
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
}

.nav-item {
    position: relative;
    width: 100%;
    min-width: 0;
    justify-items: start;
}

.nav-item svg {
    justify-self: center;
    flex: 0 0 auto;
}

.nav-item span:not(.avatar) {
    min-width: 0;
    text-overflow: ellipsis;
}

.sidebar:hover .nav-item span:not(.avatar),
.sidebar:focus-within .nav-item span:not(.avatar),
.nav-open .sidebar .nav-item span:not(.avatar) {
    width: 100%;
}

.nav-item.active {
    box-shadow: inset 3px 0 0 #ffc32b;
}

.logout-link {
    flex: 0 0 auto;
}

.admin-form select,
.route-details-form select,
.filter-bar select,
select {
    appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, currentColor 50%),
        linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position:
        calc(100% - 18px) calc(50% - 3px),
        calc(100% - 12px) calc(50% - 3px);
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    cursor: pointer;
    padding-right: 42px;
}

select:hover,
.admin-form select:hover,
.route-details-form select:hover,
.filter-bar select:hover {
    border-color: #d9a8ae;
    background-color: #fff;
}

select[multiple] {
    min-height: 118px;
    padding-right: 13px;
    background-image: none;
}

select[multiple] option {
    padding: 8px 10px;
}

select[multiple] option:checked {
    background: linear-gradient(0deg, var(--admin-red), var(--admin-red));
    color: white;
}

.avatar-file-label {
    width: min(100% - 32px, 330px);
    background: rgba(255, 255, 255, .04);
}

.avatar-file-label:hover,
.avatar-file-label:focus-within,
.avatar-file-label.drag-over {
    border-color: #ffc32b;
    background: rgba(255, 195, 43, .12);
    color: white;
}

.choice-dialog {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: grid;
    place-items: center;
    padding: 20px;
}

.choice-dialog-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(25, 22, 20, .58);
    backdrop-filter: blur(3px);
}

.choice-dialog-card {
    position: relative;
    z-index: 1;
    width: min(100%, 500px);
    max-height: calc(100dvh - 40px);
    overflow-y: auto;
    padding: 24px;
    border: 1px solid #f0d9dc;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .24);
}

.choice-dialog-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.choice-dialog-heading h3 {
    margin: 0;
    font-size: 22px;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.choice-dialog-heading > button {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 7px;
    background: #f5eeee;
    color: #61656b;
    font-size: 22px;
    line-height: 1;
}

.choice-dialog-message {
    margin: 12px 0 18px;
    color: var(--admin-muted);
    font-size: 13px;
    line-height: 1.5;
}

.choice-dialog-options {
    display: grid;
    gap: 10px;
}

.choice-option {
    width: 100%;
    min-height: 82px;
    padding: 16px;
    border: 1px solid #ead8db;
    border-radius: 8px;
    background: #fff;
    color: #25282d;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 14px;
    row-gap: 4px;
    text-align: left;
    white-space: normal;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}

.choice-option:hover {
    border-color: #d9a8ae;
    background: #fff8f8;
}

.choice-option > span {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: #f5eeee;
    color: var(--admin-red);
    display: grid;
    place-items: center;
    font-size: 20px;
    font-weight: 900;
}

.choice-option strong,
.choice-option small {
    display: block;
}

.choice-option strong {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    line-height: 1.4;
    overflow-wrap: anywhere;
    font-size: 14px;
}

.choice-option small {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    margin-top: 0;
    line-height: 1.5;
    overflow-wrap: anywhere;
    color: var(--admin-muted);
    font-size: 12px;
}

.choice-option-primary {
    border-color: var(--admin-red);
}

.choice-option-primary > span {
    background: var(--admin-red);
    color: white;
}

.choice-option.danger {
    border-color: #d95b64;
}

.choice-option.danger > span {
    background: #b51f2d;
    color: white;
}

@media (max-width: 760px) {
    .nav-toggle {
        display: grid;
        place-items: center;
        position: fixed;
        top: 14px;
        left: 14px;
        z-index: 80;
        width: 42px;
        height: 42px;
        padding: 0;
        border-radius: 8px;
        background: var(--admin-red);
        color: white;
        box-shadow: 0 10px 24px rgba(105, 3, 11, .2);
    }

    .sidebar {
        width: min(82vw, 276px);
        transform: translateX(-105%);
        transition: transform .22s ease;
    }

    .nav-open .sidebar {
        transform: translateX(0);
    }

    .nav-open::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 45;
        background: rgba(25, 22, 20, .38);
    }

    .admin-titlebar {
        padding-left: 48px;
    }

    .choice-dialog-card,
    .stop-dialog-card {
        padding: 18px;
    }
}

.analytics-summary {
    grid-template-columns: repeat(4, minmax(170px, 1fr));
}

.page-actions {
    margin: -8px 0 18px;
    display: flex;
    justify-content: flex-start;
}

.analytics-action-btn {
    min-height: 42px;
    padding: 10px 16px;
    border: 1px solid var(--admin-red);
    border-radius: 8px;
    background: var(--admin-red);
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 850;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 10px 22px rgba(140, 7, 17, .12);
}

.analytics-action-btn:hover {
    background: var(--admin-red-dark);
    border-color: var(--admin-red-dark);
}

.analytics-action-btn-secondary {
    background: white;
    color: var(--admin-red);
    box-shadow: 0 8px 20px rgba(140, 7, 17, .07);
}

.analytics-action-btn-secondary:hover {
    background: #fff6f7;
    color: var(--admin-red-dark);
}

.section-stat {
    min-height: 38px;
    padding: 9px 13px;
    border: 1px solid #ead8db;
    border-radius: 8px;
    background: #fff;
    color: var(--admin-muted);
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    font-weight: 850;
}

.backup-overview {
    margin-bottom: 18px;
    padding: 16px;
    border: 1px solid #ead8db;
    border-radius: 8px;
    background: #fffafa;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.backup-overview h3 {
    margin: 3px 0 8px;
    font-size: 20px;
}

.backup-schedule-live {
    align-items: flex-start;
}

.backup-schedule-live > div:first-of-type {
    display: grid;
    gap: 4px;
}

.backup-schedule-live small {
    color: var(--admin-muted);
    font-size: 12px;
}

.backup-controls {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
}

.backup-control-group {
    padding: 4px;
    border: 1px solid #ead8db;
    border-radius: 10px;
    background: #fff;
    display: inline-flex;
    gap: 4px;
    box-shadow: 0 8px 18px rgba(140, 7, 17, .06);
}

.backup-control-group button,
.backup-schedule .backup-control-group button {
    min-height: 42px;
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: 7px;
    background: transparent;
    color: #4b4f55;
    font-size: 13px;
    font-weight: 850;
    transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.backup-control-group button:hover {
    background: #fff6f7;
    color: var(--admin-red);
    transform: translateY(-1px);
}

.backup-control-group button.selected,
.backup-schedule .backup-control-group button.selected {
    border-color: var(--admin-red);
    background: var(--admin-red);
    color: white;
    box-shadow: 0 8px 16px rgba(140, 7, 17, .18);
}

.backup-control-group-schedule button.selected,
.backup-schedule .backup-control-group-schedule button.selected {
    border-color: #d18a90;
    background: #f3c1c5;
    color: #5f060d;
    box-shadow: none;
}

.backup-control-divider {
    width: 1px;
    height: 46px;
    background: #ead8db;
}

.analytics-chart-grid {
    align-items: stretch;
}

.dashboard-chart-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .9fr);
    gap: 18px;
}

.dashboard-chart-grid .chart-panel {
    padding: 20px;
}

.chart-panel {
    min-width: 0;
}

.chart-panel .panel-heading {
    margin-bottom: 14px;
}

.chart-canvas-wrap {
    position: relative;
    width: 100%;
    height: 310px;
    min-height: 260px;
    overflow: hidden;
}

.chart-canvas-tall {
    height: 380px;
}

.chart-canvas-compact {
    height: 235px;
    min-height: 210px;
}

.chart-canvas-wrap canvas {
    width: 100% !important;
    height: 100% !important;
}

.chart-empty-state {
    position: absolute;
    inset: 0;
    border: 1px dashed #ead8db;
    border-radius: 8px;
    background: rgba(255, 250, 250, .88);
    color: var(--admin-muted);
    display: grid;
    place-items: center;
    font-size: 13px;
    font-weight: 800;
    pointer-events: none;
}

.analytics-stack {
    display: grid;
    gap: 22px;
}

@media (max-width: 1180px) {
    .analytics-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-chart-grid,
    .analytics-chart-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .analytics-summary {
        grid-template-columns: 1fr;
    }

    .chart-canvas-wrap,
    .chart-canvas-tall {
        height: 300px;
        min-height: 260px;
    }

    .chart-canvas-compact {
        height: 240px;
    }

    .section-heading {
        gap: 12px;
    }

    .analytics-action-btn {
        width: 100%;
    }

    .backup-schedule-live {
        flex-direction: column;
    }

    .backup-controls {
        width: 100%;
        justify-content: flex-start;
    }

    .backup-control-group {
        width: 100%;
    }

    .backup-control-group button {
        flex: 1;
    }

    .backup-control-divider {
        display: none;
    }
}