:root {
    --ot-navy: #172235;
    --ot-navy-soft: #22324c;
    --ot-canvas: #f3f6fa;
    --ot-wash: #1677ff;
    --ot-parking: #f08c22;
    --ot-tire: #343a40;
    --ot-success: #198754;
    --ot-danger: #dc3545;
    --ot-sidebar-width: 260px;
}

body { background: var(--ot-canvas); color: #263142; min-height: 100vh; }
.app-shell { min-height: 100vh; }
.app-sidebar { --bs-offcanvas-bg: var(--ot-navy); background-color: var(--ot-navy) !important; color: #fff; width: var(--ot-sidebar-width); }
.app-brand { border-bottom: 1px solid rgba(255,255,255,.1); min-height: 72px; }
.app-brand-mark { align-items: center; background: var(--ot-wash); border-radius: .7rem; display: inline-flex; font-weight: 800; height: 40px; justify-content: center; width: 40px; }
.app-sidebar .app-nav .nav-link,
.app-sidebar .app-nav .nav-link:visited { border-radius: .55rem; color: #e8eef7 !important; font-weight: 600; margin-bottom: .2rem; padding: .7rem .8rem; }
.app-sidebar .app-nav .nav-link:hover,
.app-sidebar .app-nav .nav-link:focus-visible { background-color: #304866 !important; color: #fff !important; outline: 2px solid #7cb5ff; outline-offset: -2px; }
.app-sidebar .app-nav .nav-link.active { background-color: var(--ot-wash) !important; color: #fff !important; }
.app-main { min-width: 0; width: 100%; }
.app-header { background: #fff; border-bottom: 1px solid #e7ebf0; min-height: 72px; position: sticky; top: 0; z-index: 1020; }
.service-actions .btn { border: 0; color: #fff !important; font-weight: 650; min-height: 46px; }
.btn-wash { background-color: var(--ot-wash); color: #fff; }
.btn-wash:hover, .btn-wash:focus-visible, .btn-wash:active { background-color: #0b5ed7 !important; border-color: #0b5ed7 !important; color: #fff !important; }
.btn-parking { background-color: var(--ot-parking); color: #fff; }
.btn-parking:hover, .btn-parking:focus-visible, .btn-parking:active { background-color: #c96808 !important; border-color: #c96808 !important; color: #fff !important; }
.btn-tire { background-color: var(--ot-tire); color: #fff; }
.btn-tire:hover, .btn-tire:focus-visible, .btn-tire:active { background-color: #1f2327 !important; border-color: #1f2327 !important; color: #fff !important; }
.page-card { border: 1px solid #e7ebf0; border-radius: .8rem; box-shadow: 0 4px 20px rgba(23,34,53,.04); }
.empty-state { border: 1px dashed #cbd3dc; border-radius: .75rem; color: #667085; padding: 3rem 1rem; text-align: center; }
.breadcrumb { --bs-breadcrumb-divider: '›'; font-size: .875rem; }
.table > :not(caption) > * > * { vertical-align: middle; }
.service-select-card { cursor: pointer; min-height: 145px; transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease; user-select: none; }
.service-select-card:hover { background: #f0f7ff; box-shadow: 0 5px 18px rgba(22,119,255,.14); }
.service-select-card.is-selected { background: #e7f2ff; border-color: var(--ot-wash) !important; box-shadow: 0 0 0 3px rgba(22,119,255,.18); }
.service-select-card .service-selected-text { color: var(--ot-wash); display: none; }
.service-select-card.is-selected .service-selected-text { display: inline; }
.service-select-card.is-disabled { cursor: not-allowed; opacity: .6; }
.service-select-card.is-disabled:hover { background: transparent; box-shadow: none; }
.wash-order-row { cursor: pointer; }
.wash-order-row > td { height: 66px; padding-bottom: .9rem; padding-top: .9rem; }
.wash-order-row:hover > td { background-color: #eef6ff; }

@media (min-width: 992px) {
    .app-sidebar { flex: 0 0 var(--ot-sidebar-width); min-height: 100vh; position: sticky; top: 0; }
}

@media (max-width: 991.98px) {
    .app-sidebar { max-width: 290px; }
}