:root {
  --navy: #0b2741;
  --blue: #0d6efd;
  --soft: #f4f7fa;
  --wash-not-started: #f0ad4e;
  --wash-active: #198754;
  --wash-completed: #6c757d;
}
body { background: var(--soft); color: #243241; }
.bg-navy { background: var(--navy); }
.card { border: 0; box-shadow: 0 2px 12px rgba(20, 45, 70, .07); border-radius: .8rem; }
.card-header { border-bottom: 1px solid #edf0f3; border-radius: .8rem .8rem 0 0 !important; }
.metric-card { transition: transform .15s ease, box-shadow .15s ease; }
.metric-card:hover, .vessel-card:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(20, 45, 70, .12); }
.table thead th { color: #607080; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.table td { vertical-align: middle; }
.preserve-lines { white-space: pre-line; }
.invoice-sheet { max-width: 980px; background: white; padding: 3rem; border-radius: .8rem; box-shadow: 0 2px 18px rgba(20,45,70,.08); }
.brand-mark { color: var(--navy); font-weight: 800; font-size: 2rem; letter-spacing: -.04em; }
.sticky-form { position: sticky; top: 5.5rem; }

.status-not-started { background: #fff3cd; color: #664d03; border: 1px solid #ffecb5; }
.status-active { background: #198754; color: #fff; }
.status-completed { background: #6c757d; color: #fff; }
.status-border-not-started { border-left-color: var(--wash-not-started) !important; }
.status-border-active { border-left-color: var(--wash-active) !important; }
.status-border-completed { border-left-color: var(--wash-completed) !important; opacity: .83; }
.status-dot-not-started { background: var(--wash-not-started); }
.status-dot-active { background: var(--wash-active); }
.status-dot-completed { background: var(--wash-completed); }

.calendar-scroll { overflow-x: auto; }
.month-grid { display: grid; grid-template-columns: repeat(7, minmax(155px, 1fr)); min-width: 1085px; }
.weekday-row { background: #f8fafc; border-bottom: 1px solid #e5e9ed; }
.weekday { padding: .7rem; text-align: center; font-size: .75rem; color: #607080; text-transform: uppercase; font-weight: 700; letter-spacing: .04em; }
.calendar-body { grid-auto-rows: minmax(165px, auto); }
.calendar-day { position: relative; min-height: 165px; padding: .5rem; background: #fff; border-right: 1px solid #edf0f3; border-bottom: 1px solid #edf0f3; }
.calendar-day:nth-child(7n) { border-right: 0; }
.calendar-day.outside-month { background: #f7f8fa; color: #98a2ad; }
.calendar-day.today-cell { box-shadow: inset 0 0 0 2px #0d6efd; }
.calendar-date { width: 1.8rem; height: 1.8rem; display: flex; align-items: center; justify-content: center; font-size: .83rem; font-weight: 700; margin-bottom: .35rem; border-radius: 50%; }
.today-cell .calendar-date { background: #0d6efd; color: #fff; }
.calendar-events { display: grid; gap: .35rem; }
.wash-event { display: block; background: #f8fafc; color: #243241; text-decoration: none; border: 1px solid #e6ebef; border-left: 4px solid; border-radius: .45rem; padding: .4rem .45rem; font-size: .72rem; line-height: 1.25; transition: box-shadow .15s ease, transform .15s ease; }
.wash-event:hover { color: #162535; box-shadow: 0 4px 12px rgba(20,45,70,.13); transform: translateY(-1px); }
.wash-dot, .legend-dot { display: inline-block; width: .65rem; height: .65rem; border-radius: 50%; flex: 0 0 auto; }
.legend-dot { margin-right: .3rem; }
.event-vessel { font-size: .82rem; font-weight: 800; margin-top: .15rem; }
.event-client, .event-crew, .event-location, .event-time { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.event-client { color: #5b6874; }
.event-crew { margin-top: .2rem; font-weight: 600; }
.event-location, .event-time { color: #6c757d; }
.clock-card { border: 1px solid rgba(25,135,84,.22); }
.service-queue-card { border-top: 4px solid var(--blue); }
.service-email-card { border-top: 4px solid #198754; }

@media (max-width: 1199.98px) {
  .sticky-form { position: static; }
}
@media (max-width: 767.98px) {
  main { padding-left: .75rem !important; padding-right: .75rem !important; }
  .calendar-card .card-header { padding: .75rem; }
  .invoice-sheet { padding: 1.25rem; }
}
@media print {
  nav, .alert, .d-print-none { display: none !important; }
  body, main { background: white !important; padding: 0 !important; }
  .invoice-sheet { max-width: none; box-shadow: none; padding: 0; }
}

.view-switch { display: inline-flex; padding: .3rem; background: #fff; border-radius: .75rem; box-shadow: 0 2px 12px rgba(20,45,70,.07); gap: .3rem; }
.day-open-link { font-size: .66rem; text-decoration: none; opacity: .72; }
.event-members { color: #74808c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.day-board { align-items: stretch; }
.day-column { background: #f7f9fb; border-radius: .75rem; padding: .8rem; border-top: 4px solid; min-height: 330px; }
.status-column-not-started { border-top-color: var(--wash-not-started); }
.status-column-active { border-top-color: var(--wash-active); }
.status-column-completed { border-top-color: var(--wash-completed); }
.day-job-card { display: block; background: #fff; color: #243241; text-decoration: none; border: 1px solid #e6ebef; border-radius: .65rem; padding: .8rem; margin-bottom: .7rem; box-shadow: 0 2px 8px rgba(20,45,70,.05); transition: transform .15s ease, box-shadow .15s ease; }
.day-job-card:hover { color: #17293a; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(20,45,70,.12); }
.day-job-vessel { font-size: 1.05rem; font-weight: 800; margin-top: .35rem; }
.day-job-line { display: flex; justify-content: space-between; gap: .7rem; border-top: 1px solid #eef1f4; padding-top: .35rem; margin-top: .35rem; font-size: .75rem; }
.day-job-line span { color: #6c757d; }
.day-job-line strong { text-align: right; }
.empty-day-column { color: #7b8793; background: #fff; border: 1px dashed #d8dee4; border-radius: .6rem; padding: 2rem .75rem; text-align: center; }
.crew-panel { background: #f8fafc; border: 1px solid #e5ebf0; border-radius: .7rem; padding: 1rem; }
.employee-checklist { max-height: 190px; overflow-y: auto; background: #f8fafc; border: 1px solid #e4e9ee; border-radius: .55rem; padding: .7rem; }
.crew-clock-card { border: 1px solid rgba(13,110,253,.2); }
.billing-calendar-body { grid-auto-rows: minmax(175px, auto); }
.billing-day { min-height: 175px; }
.billing-event { background: #eaf3ff; border-left: 4px solid #0d6efd; border-radius: .5rem; padding: .5rem; font-size: .73rem; color: #243241; }
.billing-event + .billing-event { margin-top: .35rem; }
.billing-overdue { background: #fff0f0; border-left-color: #dc3545; }
@media (max-width: 1199.98px) {
  .day-column { min-height: auto; }
}

/* Installable mobile app interface */
.mini-brand-mark { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: .55rem; background: #fff; color: var(--navy); font-size: .72rem; letter-spacing: -.02em; }
.mobile-bottom-nav { display: none; }
.mobile-app-shell { max-width: 760px; margin: 0 auto; }
.mobile-hero { background: linear-gradient(145deg, #0b2741, #154f79); color: #fff; border-radius: 1.15rem; padding: 1.25rem; box-shadow: 0 10px 28px rgba(11,39,65,.2); }
.mobile-eyebrow { font-size: .68rem; font-weight: 800; letter-spacing: .14em; opacity: .72; }
.mobile-hero-date { opacity: .82; }
.install-app-button { font-weight: 700; white-space: nowrap; }
.ios-install-hint { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); border-radius: .7rem; padding: .7rem .8rem; font-size: .78rem; }
.employee-device-card { border: 1px solid #dce7ef; }
.mobile-day-switch { display: flex; gap: .55rem; background: var(--navy); border-radius: .85rem; padding: .45rem; }
.mobile-day-switch .btn { font-weight: 700; }
.active-timer-card { background: #198754; color: #fff; border-radius: 1rem; padding: 1.1rem; box-shadow: 0 9px 24px rgba(25,135,84,.22); }
.active-pulse { display: flex; align-items: center; gap: .42rem; font-size: .67rem; font-weight: 900; letter-spacing: .1em; margin-bottom: .25rem; }
.active-pulse span { width: .62rem; height: .62rem; border-radius: 50%; background: #fff; box-shadow: 0 0 0 0 rgba(255,255,255,.7); animation: marinepro-pulse 1.8s infinite; }
@keyframes marinepro-pulse { 70% { box-shadow: 0 0 0 .55rem rgba(255,255,255,0); } 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); } }
.mobile-stat { background: #fff; border-radius: .85rem; padding: .8rem .45rem; box-shadow: 0 2px 12px rgba(20,45,70,.07); text-align: center; }
.mobile-stat strong { display: block; font-size: 1.35rem; line-height: 1; color: var(--navy); }
.mobile-stat span { display: block; color: #6b7785; font-size: .7rem; margin-top: .28rem; }
.mobile-job-list, .mobile-task-list { display: grid; gap: .85rem; }
.mobile-job-card, .mobile-task-card { background: #fff; border: 1px solid #e3e9ee; border-left: 5px solid #d5dde4; border-radius: 1rem; padding: 1rem; box-shadow: 0 3px 14px rgba(20,45,70,.07); }
.mobile-task-card { border-left-color: #0d6efd; }
.mobile-job-time { color: #607080; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.mobile-job-details { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; margin-top: .85rem; padding-top: .75rem; border-top: 1px solid #edf1f4; }
.mobile-job-details div { min-width: 0; }
.mobile-job-details span { display: block; color: #75818d; font-size: .65rem; text-transform: uppercase; letter-spacing: .03em; }
.mobile-job-details strong { display: block; margin-top: .12rem; font-size: .78rem; overflow: hidden; text-overflow: ellipsis; }
.mobile-empty-state { background: #fff; border: 1px dashed #ccd6df; border-radius: 1rem; padding: 2.2rem 1rem; text-align: center; }
.mobile-empty-icon { width: 2.8rem; height: 2.8rem; display: grid; place-items: center; margin: 0 auto .75rem; border-radius: 50%; background: #eaf7ef; color: #198754; font-size: 1.35rem; font-weight: 800; }
.mobile-log-hours { border-top: 1px solid #edf1f4; padding-top: .75rem; }
.mobile-log-hours summary { color: #0d6efd; font-weight: 700; cursor: pointer; }
.mobile-log-hours summary::marker { color: #0d6efd; }

@media (max-width: 767.98px) {
  body { padding-bottom: calc(4.65rem + env(safe-area-inset-bottom)); }
  .desktop-navbar { display: none !important; }
  .app-main { padding-top: .8rem !important; padding-bottom: 1rem !important; }
  .mobile-bottom-nav { position: fixed; z-index: 1040; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(7, 1fr); background: rgba(255,255,255,.96); border-top: 1px solid #dfe6ec; box-shadow: 0 -8px 28px rgba(11,39,65,.11); padding: .42rem .25rem calc(.35rem + env(safe-area-inset-bottom)); backdrop-filter: blur(16px); }
  .mobile-nav-link { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem; min-height: 3.25rem; color: #667482; text-decoration: none; font-size: .62rem; font-weight: 700; border-radius: .65rem; }
  .mobile-nav-link svg { width: 1.35rem; height: 1.35rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .mobile-nav-link.active { color: #0d6efd; background: #edf5ff; }
  .mobile-app-page { background: #edf2f6; }
  .mobile-hero { border-radius: 0 0 1.1rem 1.1rem; margin: -.8rem -.75rem 0; padding: calc(1.1rem + env(safe-area-inset-top)) 1rem 1.1rem; }
  .employee-device-card { margin-top: .85rem; }
  .mobile-job-details { grid-template-columns: 1fr 1fr; }
  .mobile-job-details div:last-child { grid-column: 1 / -1; }
  .mobile-job-card .btn-lg, .active-timer-card .btn-lg { min-height: 3.15rem; font-size: 1rem; font-weight: 800; }
  .table-responsive { border-radius: .75rem; }
  .card .table { min-width: 690px; }
  input, select, textarea, .form-control, .form-select { font-size: 16px !important; }
}

@media (display-mode: standalone) {
  .mobile-app-page .mobile-hero { padding-top: calc(1.1rem + env(safe-area-inset-top)); }
}

@media print {
  .mobile-bottom-nav { display: none !important; }
}

/* Calendar drag-and-drop and flexible billing pricing */
.billing-event[draggable="true"], .wash-event[draggable="true"] { cursor: grab; }
.billing-event[draggable="true"]:active, .wash-event[draggable="true"]:active { cursor: grabbing; }
.is-dragging { opacity: .42; transform: scale(.98); }
.drag-over { box-shadow: inset 0 0 0 3px #0d6efd !important; background: #eaf3ff !important; }
.drag-handle { color: #6b7a88; font-size: 1rem; line-height: 1; }
.billing-event { user-select: none; }
.billing-event form, .billing-event button { user-select: auto; }
@media (hover: none) and (pointer: coarse) {
  .billing-event[draggable="true"], .wash-event[draggable="true"] { cursor: default; }
}

/* Secure client-facing portal */
.client-portal-page { background: #eef3f7; min-height: 100vh; }
.client-main { max-width: 1320px; }
.client-portal-hero { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.5rem; border-radius: 1.1rem; color: #fff; background: linear-gradient(140deg, #0b2741, #155a87); box-shadow: 0 12px 30px rgba(11,39,65,.18); }
.client-approval-alert { display: flex; justify-content: space-between; align-items: center; gap: 1rem; border: 0; border-left: 5px solid #f0ad4e; box-shadow: 0 4px 16px rgba(60,45,0,.08); }
.client-metric-card { border: 1px solid #e1e8ee; box-shadow: none; }
.client-metric-label { color: #6c7884; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.client-metric-value { margin-top: .25rem; font-size: 2rem; font-weight: 800; color: var(--navy); }
.client-vessel-summary { padding: .85rem; border: 1px solid #e1e8ee; border-radius: .7rem; background: #f8fafc; }
.client-work-order-card { border: 1px solid #e0e8ee; transition: transform .15s ease, box-shadow .15s ease; }
.client-work-order-card:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(20,45,70,.12); }
.client-description-preview { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: #52606d; }
.client-decision-card { border-top: 5px solid #f0ad4e; }
.client-calendar-body { grid-auto-rows: minmax(175px, auto); }
.client-calendar-day { min-height: 175px; }
.client-calendar-event { border-radius: .5rem; padding: .45rem .5rem; font-size: .72rem; line-height: 1.25; border-left: 4px solid; }
.client-wash-event { background: #eaf7ef; border-left-color: #198754; }
.client-billing-event { background: #eaf3ff; border-left-color: #0d6efd; }
.client-event-type { font-size: .6rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; opacity: .68; }
.client-wash-legend { background: #198754; }
.client-billing-legend { background: #0d6efd; }
.client-bottom-nav { display: none; }
.client-login-page { min-height: 100vh; background: radial-gradient(circle at top right, #1c648f 0, #0b2741 42%, #071b2c 100%); padding: 2rem 1rem; }
.client-login-shell { width: min(100%, 500px); margin: 5vh auto 0; }
.client-login-brand { display: flex; align-items: center; gap: .8rem; color: #fff; margin-bottom: 1.25rem; }
.client-login-mark { display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: .9rem; background: #fff; color: var(--navy); font-weight: 900; }
.client-login-card { border-radius: 1.1rem; box-shadow: 0 18px 48px rgba(0,0,0,.24); }
.client-nav-icon { font-size: 1.35rem; line-height: 1; }

@media (max-width: 767.98px) {
  .client-portal-page { padding-bottom: calc(4.8rem + env(safe-area-inset-bottom)); }
  .client-desktop-nav { display: none !important; }
  .client-main { padding-top: .8rem !important; }
  .client-portal-hero { margin: -.8rem -.75rem 0; border-radius: 0 0 1.1rem 1.1rem; padding: calc(1.25rem + env(safe-area-inset-top)) 1rem 1.25rem; align-items: flex-start; }
  .client-portal-hero .btn { white-space: nowrap; }
  .client-approval-alert { align-items: stretch; flex-direction: column; }
  .client-bottom-nav { position: fixed; z-index: 1050; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(5, 1fr); background: rgba(255,255,255,.97); border-top: 1px solid #dfe6ec; box-shadow: 0 -8px 28px rgba(11,39,65,.11); padding: .42rem .25rem calc(.35rem + env(safe-area-inset-bottom)); backdrop-filter: blur(16px); }
  .client-nav-link { display: flex; min-height: 3.35rem; flex-direction: column; align-items: center; justify-content: center; gap: .12rem; border-radius: .65rem; color: #667482; text-decoration: none; font-size: .62rem; font-weight: 750; }
  .client-nav-link.active { color: #0d6efd; background: #edf5ff; }
  .client-calendar-card .card-header { padding: .75rem; }
  .client-login-page { padding-top: calc(1.5rem + env(safe-area-inset-top)); }
  .client-login-shell { margin-top: 2vh; }
}
.client-nav-alert { position: absolute; top: -.45rem; right: -.7rem; min-width: 1.15rem; height: 1.15rem; padding: 0 .2rem; display: grid; place-items: center; border-radius: 999px; background: #dc3545; color: #fff; font-size: .55rem; font-style: normal; font-weight: 800; border: 2px solid #fff; }

.settings-link-card {
  color: inherit;
  border: 1px solid rgba(11, 39, 65, .12);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.settings-link-card:hover {
  color: inherit;
  transform: translateY(-2px);
  border-color: rgba(11, 39, 65, .3);
  box-shadow: 0 .6rem 1.4rem rgba(11, 39, 65, .1);
}
.settings-count {
  min-width: 3rem;
  height: 3rem;
  padding: 0 .65rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 1rem;
  background: #eef4f8;
  color: #0b2741;
  font-weight: 800;
}
.work-order-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1rem;
}
.work-order-photo {
  display: block;
  overflow: hidden;
  border: 1px solid #dce4ea;
  border-radius: .85rem;
  background: #fff;
  color: #0b2741;
  text-decoration: none;
}
.work-order-photo:hover { color: #0b2741; box-shadow: 0 .4rem 1rem rgba(11,39,65,.12); }
.work-order-photo img {
  width: 100%;
  height: 145px;
  object-fit: cover;
  display: block;
  background: #eef2f5;
}
.work-order-photo span {
  display: block;
  padding: .65rem .75rem;
  font-size: .82rem;
  overflow-wrap: anywhere;
}
.work-order-photo small {
  display: block;
  color: #6c757d;
  margin-top: .2rem;
}
@media (max-width: 575.98px) {
  .work-order-photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
  .work-order-photo img { height: 120px; }
}

/* Left-side desktop navigation */
.admin-shell { min-height: 100vh; }
.admin-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 1035;
  width: 276px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  color: #dbe8f2;
  background: linear-gradient(180deg, #0b2741 0%, #081f34 100%);
  box-shadow: 12px 0 34px rgba(7, 29, 48, .12);
}
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: 1.25rem 1.15rem 1.1rem;
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.09);
}
.sidebar-brand:hover { color: #fff; background: rgba(255,255,255,.035); }
.sidebar-brand-mark {
  display: grid;
  place-items: center;
  width: 2.7rem;
  height: 2.7rem;
  flex: 0 0 auto;
  border-radius: .8rem;
  background: #fff;
  color: var(--navy);
  font-size: .88rem;
  font-weight: 900;
  letter-spacing: -.03em;
  box-shadow: 0 7px 18px rgba(0,0,0,.16);
}
.sidebar-brand strong { display: block; font-size: 1.05rem; line-height: 1.05; }
.sidebar-brand small { display: block; margin-top: .22rem; color: #9eb4c6; font-size: .68rem; letter-spacing: .04em; }
.sidebar-nav { flex: 1; padding: .85rem .72rem 1.25rem; }
.sidebar-section-label {
  padding: .55rem .72rem .35rem;
  color: #7892a7;
  font-size: .64rem;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.sidebar-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: .72rem;
  width: 100%;
  min-height: 2.8rem;
  padding: .65rem .72rem;
  border: 0;
  border-radius: .7rem;
  color: #c8d8e5;
  background: transparent;
  text-decoration: none;
  font-size: .88rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.sidebar-link:hover { color: #fff; background: rgba(255,255,255,.075); }
.sidebar-link.active { color: #fff; background: rgba(37, 132, 199, .28); box-shadow: inset 3px 0 0 #55b9ff; }
.sidebar-link svg {
  width: 1.22rem;
  height: 1.22rem;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sidebar-external { margin-left: auto; color: #8ea5b7; font-size: .78rem; }
.sidebar-settings { margin: 0; }
.sidebar-settings summary { list-style: none; }
.sidebar-settings summary::-webkit-details-marker { display: none; }
.sidebar-chevron { margin-left: auto; font-size: 1rem; transition: transform .18s ease; }
.sidebar-settings[open] .sidebar-chevron { transform: rotate(180deg); }
.sidebar-submenu {
  display: grid;
  gap: .12rem;
  margin: .3rem 0 .45rem 1.34rem;
  padding: .25rem 0 .25rem .85rem;
  border-left: 1px solid rgba(255,255,255,.13);
}
.sidebar-sublink {
  padding: .46rem .62rem;
  border-radius: .55rem;
  color: #aebfcd;
  text-decoration: none;
  font-size: .78rem;
  font-weight: 650;
}
.sidebar-sublink:hover { color: #fff; background: rgba(255,255,255,.065); }
.sidebar-sublink.active { color: #fff; background: rgba(85,185,255,.15); }
.sidebar-footer {
  padding: .95rem 1.15rem 1.1rem;
  color: #8fa6b9;
  border-top: 1px solid rgba(255,255,255,.09);
}
.sidebar-footer small { font-size: .65rem; }
.sidebar-local-status { display: flex; align-items: center; gap: .45rem; margin-bottom: .18rem; color: #b8cbd9; font-size: .72rem; font-weight: 700; }
.sidebar-local-status span { width: .55rem; height: .55rem; border-radius: 50%; background: #45d483; box-shadow: 0 0 0 .22rem rgba(69,212,131,.12); }
.app-main { width: calc(100% - 276px); min-height: 100vh; margin-left: 276px; }
.sticky-form { top: 1rem; }
.test-account-card { border: 1px solid rgba(13,110,253,.2); border-top: 5px solid #0d6efd; }
.test-login-box { padding: 1rem; border-radius: .75rem; background: #f0f6ff; border: 1px solid #d9e9ff; }
.test-login-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .35rem 0; }
.test-login-row + .test-login-row { border-top: 1px solid #d7e5f5; }
.test-login-row span { color: #607080; font-size: .78rem; }
.test-login-row code { color: #0b2741; font-size: .9rem; font-weight: 800; }

@media (max-width: 767.98px) {
  .desktop-sidebar { display: none !important; }
  .app-main { width: 100%; margin-left: 0; }
}

@media print {
  .admin-sidebar { display: none !important; }
  .app-main { width: 100% !important; margin-left: 0 !important; }
}

/* Recurring wash scheduling and confirmed client notifications */
.simplified-wash-event { position: relative; padding: .38rem .42rem .35rem; user-select: none; }
.wash-event-main { display: block; color: inherit; text-decoration: none; padding-right: 2.35rem; min-height: 3.1rem; }
.wash-event-main:hover { color: inherit; }
.wash-event-time { font-size: .68rem; font-weight: 800; color: #435365; text-transform: uppercase; letter-spacing: .025em; }
.wash-move-mini { position: absolute; right: .28rem; bottom: .28rem; border: 0; border-radius: .35rem; background: #e8f1fb; color: #0b5ed7; font-size: .62rem; font-weight: 800; padding: .22rem .34rem; line-height: 1; }
.wash-move-mini:hover { background: #d7e9fb; }
.day-job-card { color: inherit; text-decoration: none; }
#washMoveModal .modal-content { border: 0; border-radius: 1rem; box-shadow: 0 20px 60px rgba(14,39,64,.24); }
#washMoveModal textarea { resize: vertical; }
.client-notification-card { border-left: 5px solid #0d6efd; }
.client-notification-card.notification-read { border-left-color: #cbd5df; background: #f8fafc; }
.client-notification-message { white-space: pre-line; }
@media (max-width: 767.98px) {
  .wash-move-mini { min-width: 2.35rem; min-height: 1.65rem; }
  #washMoveModal .modal-dialog { margin: .6rem; }
}

/* Wash locations and route planner */
.day-job-location-note {
  margin-top: .55rem;
  padding: .55rem .65rem;
  border-radius: .55rem;
  background: #eef7ff;
  color: #214e70;
  font-size: .82rem;
  line-height: 1.35;
}

.mobile-location-note {
  grid-column: 1 / -1;
  padding: .65rem;
  border-radius: .65rem;
  background: #eef7ff;
}

.wash-route-map {
  min-height: 620px;
  width: 100%;
  background: #e9eef2;
}

.route-totals {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
}

.route-totals > div {
  padding: .85rem;
  border: 1px solid #dfe5ea;
  border-radius: .75rem;
  text-align: center;
  background: #f8fafb;
}

.route-totals strong,
.route-totals span {
  display: block;
}

.route-totals strong {
  font-size: 1.45rem;
  line-height: 1.1;
}

.route-totals span {
  margin-top: .25rem;
  font-size: .72rem;
  color: #6c757d;
}

.route-stop {
  display: grid;
  grid-template-columns: 2.2rem minmax(0, 1fr);
  gap: .7rem;
  align-items: start;
  padding: .85rem 1rem;
}

.route-stop > span {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: #0d6efd;
  color: #fff;
  font-weight: 700;
  font-size: .75rem;
}

.route-stop strong,
.route-stop small,
.route-stop em {
  display: block;
}

.route-stop small {
  color: #6c757d;
  margin-top: .15rem;
}

.route-stop em {
  margin-top: .35rem;
  color: #214e70;
  font-size: .8rem;
}

.route-start {
  background: #eaf7ef;
  border-bottom: 1px solid #dfe5ea;
}

.route-start > span {
  width: auto;
  padding: 0 .45rem;
  border-radius: .45rem;
  background: #198754;
}

@media (max-width: 767.98px) {
  .wash-route-map { min-height: 460px; }
}

/* Dedicated Operations route planner */
.route-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.route-control-card {
  border-top: 4px solid #198754;
}

.route-planner-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
  gap: 1.25rem;
  align-items: stretch;
}

.route-map-card {
  min-width: 0;
  overflow: hidden;
}

.route-map-toolbar,
.route-map-footer {
  background: #fff;
  border-bottom: 1px solid #e7edf2;
  padding: .9rem 1rem;
}

.route-map-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}

.route-map-toolbar strong,
.route-map-toolbar span {
  display: block;
}

.route-map-toolbar > div:first-child span,
.route-map-footer {
  color: #6c757d;
  font-size: .76rem;
}

.route-map-footer {
  border-top: 1px solid #e7edf2;
  border-bottom: 0;
}

.route-map-legend {
  display: flex;
  gap: .9rem;
  color: #5f6e7a;
  font-size: .75rem;
  font-weight: 700;
}

.route-map-legend span {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

.route-legend-dot {
  width: .7rem;
  height: .7rem;
  border-radius: 999px;
}

.route-legend-start { background: #198754; }
.route-legend-stop { background: #1677d2; }

.route-map-frame {
  position: relative;
  min-height: 620px;
  overflow: hidden;
  background: linear-gradient(135deg, #e7eef4, #f4f7fa);
}

.wash-route-map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 620px;
  background: #e9eef2;
}

.route-map-loading,
.route-map-error {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  padding: 2rem;
  text-align: center;
  background: rgba(244, 247, 250, .92);
  color: #536575;
}

.route-map-loading[hidden],
.route-map-error[hidden] { display: none !important; }
.route-map-error strong { color: #b02a37; }
.route-map-error span { max-width: 360px; font-size: .85rem; }

.route-summary-column {
  min-width: 0;
}

.route-stop-card {
  max-height: 620px;
  overflow: hidden;
}

.route-stop-list {
  max-height: 552px;
  overflow-y: auto;
}

.route-map-marker {
  display: grid;
  place-items: center;
  width: 2.15rem;
  height: 2.15rem;
  border: 3px solid #fff;
  border-radius: 50%;
  color: #fff;
  font-size: .75rem;
  font-weight: 900;
  box-shadow: 0 4px 13px rgba(11, 39, 65, .32);
  cursor: pointer;
}

.route-map-marker-start { background: #198754; }
.route-map-marker-stop { background: #1677d2; }


/* Google Maps route planner */
.google-maps-setup-alert {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.google-route-map-frame { min-height: 590px; }
.google-route-map {
  width: 100%;
  height: 590px;
  min-height: 420px;
  background: #eef2f7;
}
.google-route-map-frame:fullscreen,
.google-route-map-frame:-webkit-full-screen { background: #fff; }
.google-route-map-frame:fullscreen .google-route-map,
.google-route-map-frame:-webkit-full-screen .google-route-map { height: 100vh; }
@media (max-width: 767.98px) {
  .google-route-map-frame { min-height: 470px; }
  .google-route-map { height: 470px; min-height: 390px; }
}

/* Role-based login and read-only employee access */
.staff-login-back { display: inline-block; color: rgba(255,255,255,.82); text-decoration: none; margin-bottom: 1rem; font-weight: 700; }
.staff-login-back:hover { color: #fff; }
.staff-login-options a { font-weight: 700; text-decoration: none; }
.test-credential-card { border: 1px solid #dfe7ed; border-radius: .8rem; background: #f7fafc; padding: .85rem; }
.test-credential-card > div:not(:first-child) { display: flex; justify-content: space-between; gap: 1rem; padding: .25rem 0; }
.test-credential-card code { color: #0b2741; font-weight: 700; overflow-wrap: anywhere; }
.staff-account-summary { display: grid; gap: .25rem; color: #fff; }
.staff-account-summary strong { line-height: 1.1; }
.staff-account-summary .badge { width: fit-content; }
.staff-account-summary small { color: rgba(255,255,255,.65); overflow-wrap: anywhere; }
.employee-readonly-banner { position: sticky; top: .5rem; z-index: 1030; box-shadow: 0 .35rem 1rem rgba(13,110,253,.12); }
.employee-hidden-action { display: none !important; }
.employee-no-drag { cursor: default !important; }
.staff-read-only #washMoveModal { display: none; z-index: 1080; }
.staff-read-only #washMoveModal.show { display: block !important; }
.staff-read-only .modal-backdrop { z-index: 1070; }
.staff-read-only .drag-handle, .staff-read-only [data-wash-move], .staff-read-only .move-wash-button { display: none !important; }
.role-test-card { display: flex; flex-direction: column; height: 100%; border: 1px solid #dfe7ed; border-radius: .85rem; padding: 1rem; background: #f8fafc; }
.role-permission-panel { padding: 1rem; border: 1px solid #dce6eb; border-radius: .8rem; background: #f8fafc; }
.role-permission-panel h2 { color: #0b2741; }
.role-test-card strong { font-size: 1.05rem; }
.role-test-card small { color: #687684; margin-bottom: .7rem; }
.role-test-card code { display: block; color: #0b2741; overflow-wrap: anywhere; }
.staff-account-card { background: #fbfcfd; }
.staff-messages-page { background: linear-gradient(145deg, #eef6f7 0%, #f7fafb 48%, #edf3f6 100%); }
.message-page-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.15rem; }
.message-page-heading h1 { margin: 0; color: #0b2741; font-size: 2rem; font-weight: 800; letter-spacing: -.035em; }
.message-page-heading p { margin: .15rem 0 0; color: #607886; }
.message-compose-link { display: grid; place-items: center; width: 2.65rem; height: 2.65rem; border-radius: .8rem; color: #fff; background: linear-gradient(145deg, #0d8f9b, #08707b); font-size: 1.75rem; font-weight: 300; line-height: 1; text-decoration: none; box-shadow: 0 5px 14px rgba(8,112,123,.24); }
.message-inbox-layout { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(310px, .8fr); gap: 1.25rem; align-items: start; }
.message-inbox-panel, .message-compose-panel, .imessage-shell { overflow: hidden; border: 1px solid #ccdde2; border-radius: 1rem; background: rgba(255,255,255,.97); box-shadow: 0 12px 34px rgba(11,39,65,.08); }
.message-search { display: flex; align-items: center; gap: .45rem; margin: .85rem 1rem .55rem; padding: .42rem .7rem; border: 1px solid #d9e6e9; border-radius: .55rem; color: #6f858f; background: #f0f6f7; }
.message-search input { width: 100%; padding: 0; border: 0; outline: 0; background: transparent; font-size: .95rem; }
.message-conversation { display: flex; gap: .8rem; min-height: 82px; padding: .72rem 1rem; color: #111; text-decoration: none; }
.message-conversation:hover { color: #111; background: #edf8f8; }
.message-conversation + .message-conversation .message-preview { border-top: 1px solid #e5e5ea; }
.message-avatar { flex: 0 0 auto; display: grid; place-items: center; width: 3.25rem; height: 3.25rem; margin-top: .15rem; border: 2px solid #d8ebee; border-radius: .9rem 50% 50%; color: #fff; background: linear-gradient(145deg, #315b75, #173d58); font-size: 1.05rem; font-weight: 800; }
.message-avatar-group { background: linear-gradient(145deg, #18a3a8, #08737e); }
.message-preview { min-width: 0; flex: 1; padding: .12rem 0 .72rem; }
.message-preview-top { display: flex; align-items: center; gap: .35rem; }
.message-preview-top strong { overflow: hidden; flex: 1; font-size: 1rem; text-overflow: ellipsis; white-space: nowrap; }
.message-preview-top time, .message-preview-top span { color: #8e8e93; font-size: .78rem; }
.message-preview-top span { font-size: 1.25rem; line-height: .7; }
.message-preview-subject { overflow: hidden; color: #3a3a3c; font-size: .88rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.message-preview-body { overflow: hidden; color: #8e8e93; font-size: .88rem; text-overflow: ellipsis; white-space: nowrap; }
.message-empty { padding: 4rem 1rem; color: #8e8e93; text-align: center; }
.message-empty-icon { margin-bottom: .6rem; font-size: 2.6rem; }
.message-empty h2 { color: #3a3a3c; font-size: 1.1rem; }
.message-compose-panel { position: sticky; top: 1rem; }
.message-compose-header { display: flex; justify-content: space-between; padding: .85rem 1rem; border-bottom: 3px solid #14a0a6; color: #0b2741; font-weight: 800; background: #f7fbfc; }
.message-compose-header small { color: #8e8e93; font-weight: 500; }
.message-compose-row { display: flex; align-items: center; min-height: 2.9rem; padding: 0 1rem; border-bottom: 1px solid #e5e5ea; }
.message-compose-row label { margin: 0 .45rem 0 0; color: #636366; }
.message-compose-row input, .message-compose-row select { min-width: 0; flex: 1; padding: .45rem 0; border: 0; outline: 0; background: transparent; }
.message-compose-body { display: block; width: 100%; min-height: 180px; padding: 1rem; border: 0; outline: 0; resize: vertical; }
.message-compose-footer, .imessage-composer { display: flex; align-items: center; gap: .75rem; padding: .65rem .75rem; border-top: 1px solid #e5e5ea; background: rgba(249,249,249,.94); }
.message-compose-footer span { flex: 1; color: #8e8e93; font-size: .78rem; }
.message-compose-footer button, .imessage-composer button { display: grid; place-items: center; width: 2.15rem; height: 2.15rem; padding: 0 0 0 .08rem; border: 0; border-radius: .65rem; color: #fff; background: linear-gradient(145deg, #12a0a7, #08737e); font-size: 1rem; font-weight: 800; }
.imessage-shell { display: grid; grid-template-rows: auto minmax(360px, calc(100vh - 285px)) auto; max-width: 980px; margin: 0 auto; }
.imessage-header { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 82px; padding: .45rem .9rem; border-bottom: 3px solid #13a0a6; background: linear-gradient(90deg, rgba(244,250,251,.96), rgba(235,246,247,.96)); backdrop-filter: blur(18px); }
.imessage-back { color: #087b86; font-size: 1.75rem; font-weight: 700; text-decoration: none; }
.imessage-back span { vertical-align: .15rem; font-size: .95rem; }
.imessage-contact { display: flex; flex-direction: column; align-items: center; min-width: 160px; color: #111; }
.imessage-contact .message-avatar { width: 2.55rem; height: 2.55rem; margin: 0 0 .15rem; font-size: .82rem; }
.imessage-contact strong { max-width: 280px; overflow: hidden; font-size: .83rem; text-overflow: ellipsis; white-space: nowrap; }
.imessage-contact small { max-width: 260px; overflow: hidden; color: #8e8e93; font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
.imessage-thread { overflow-y: auto; padding: 1rem 1.2rem 1.4rem; background: linear-gradient(rgba(255,255,255,.92), rgba(248,252,252,.96)), repeating-linear-gradient(0deg, transparent 0 35px, rgba(8,115,126,.025) 35px 36px); scroll-behavior: smooth; }
.imessage-thread-date { margin: .4rem 0 1.2rem; color: #66808b; font-size: .72rem; font-weight: 700; letter-spacing: .03em; text-align: center; text-transform: uppercase; }
.imessage-message-row { display: flex; flex-direction: column; align-items: flex-start; margin: .18rem 0 .6rem; }
.imessage-message-row.is-own { align-items: flex-end; }
.imessage-sender { margin: 0 0 .2rem .7rem; color: #8e8e93; font-size: .7rem; }
.imessage-bubble { position: relative; max-width: min(72%, 620px); padding: .62rem .82rem; border: 1px solid #d6e2e5; border-radius: .9rem .9rem .9rem .25rem; color: #183647; background: #edf3f5; line-height: 1.35; white-space: pre-wrap; overflow-wrap: anywhere; box-shadow: 0 2px 5px rgba(11,39,65,.05); }
.is-own .imessage-bubble { border-color: #0d7d87; border-radius: .9rem .9rem .25rem .9rem; color: #fff; background: linear-gradient(145deg, #0d929c, #08717d); }
.message-meta-row { position: relative; display: flex; align-items: center; gap: .35rem; margin: .18rem .5rem 0; }
.imessage-message-row time { color: #8799a1; font-size: .64rem; }
.message-actions { position: relative; }
.message-actions summary { padding: 0 .25rem; color: #78909a; cursor: pointer; font-size: .72rem; font-weight: 800; list-style: none; letter-spacing: .04em; }
.message-actions summary::-webkit-details-marker { display: none; }
.message-actions-menu { position: absolute; z-index: 20; left: 0; width: 280px; padding: .75rem; border: 1px solid #c8dadd; border-radius: .75rem; background: #fff; box-shadow: 0 12px 30px rgba(11,39,65,.18); }
.is-own .message-actions-menu { right: 0; left: auto; }
.message-actions-menu label { display: block; margin-bottom: .3rem; color: #3f5966; font-size: .75rem; font-weight: 700; }
.message-actions-menu textarea { width: 100%; padding: .5rem; border: 1px solid #bed1d6; border-radius: .5rem; outline: 0; resize: vertical; }
.message-edit-button, .message-delete-button { width: 100%; margin-top: .45rem; padding: .45rem .65rem; border: 0; border-radius: .45rem; font-size: .8rem; font-weight: 700; }
.message-edit-button { color: #fff; background: #087b86; }
.message-delete-button { color: #b42318; background: #fff0ee; }
.imessage-composer textarea { min-height: 2.25rem; max-height: 120px; flex: 1; padding: .42rem .8rem; border: 1px solid #bdd3d8; border-radius: .7rem; outline: 0; resize: none; line-height: 1.35; }
.imessage-composer button { flex: 0 0 auto; }
@media (max-width: 767.98px) {
  .employee-readonly-banner { position: static; }
  .client-login-shell { margin-top: 1vh; }
  .staff-messages-page .app-main { padding: .65rem .55rem 5.6rem !important; }
  .message-page-heading { padding: 0 .35rem; }
  .message-page-heading h1 { font-size: 1.75rem; }
  .message-page-heading p { font-size: .8rem; }
  .message-inbox-layout { display: block; }
  .message-inbox-panel, .message-compose-panel, .imessage-shell { border-radius: 1rem; }
  .message-compose-panel { position: static; margin-top: 1rem; }
  .imessage-shell { grid-template-rows: auto minmax(330px, calc(100vh - 250px)) auto; }
  .imessage-header { min-height: 72px; padding: .35rem .6rem; }
  .imessage-back span { display: none; }
  .imessage-thread { padding: .8rem .7rem 1rem; }
  .imessage-bubble { max-width: 84%; }
  .message-compose-footer, .imessage-composer { padding-bottom: calc(.65rem + env(safe-area-inset-bottom)); }
}

/* Fluid phone layout */
html { width: 100%; max-width: 100%; overflow-x: clip; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { width: 100%; max-width: 100%; overflow-x: clip; }
img, video, iframe, canvas, svg { max-width: 100%; }
.admin-shell, .app-main, .client-main, .container-fluid, .container-xl, .row, [class*="col-"] { min-width: 0; }
.card, .card-body, .card-header { min-width: 0; }
.calendar-scroll, .table-responsive { max-width: 100%; overscroll-behavior-inline: contain; -webkit-overflow-scrolling: touch; }

@media (max-width: 767.98px) {
  :root { --mobile-nav-clearance: calc(6.75rem + env(safe-area-inset-bottom)); }
  html { scroll-padding-bottom: var(--mobile-nav-clearance); }
  body, .admin-shell, .client-portal-page { min-height: 100dvh; }
  body, .client-portal-page { padding-bottom: 0; }
  .app-main, .client-main, .staff-messages-page .app-main {
    padding-bottom: var(--mobile-nav-clearance) !important;
  }
  .app-main::after, .client-main::after {
    display: block;
    height: .5rem;
    content: "";
  }
  body { font-size: .95rem; }
  .app-main, .client-main { max-width: 100%; padding-left: .7rem !important; padding-right: .7rem !important; }
  .app-main > .d-flex, .client-main > .d-flex, .card-header.d-flex {
    flex-wrap: wrap;
  }
  .app-main h1, .client-main h1 { font-size: clamp(1.45rem, 7vw, 1.85rem); overflow-wrap: anywhere; }
  .app-main h2, .client-main h2 { overflow-wrap: anywhere; }
  .card { border-radius: .72rem; }
  .card-body { padding: .9rem; }
  .card-header { padding: .75rem .9rem; }
  .row { --bs-gutter-x: 1rem; }

  .mobile-bottom-nav {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    overflow-x: auto;
  }
  .mobile-nav-link { min-width: 3.15rem; padding: .2rem .1rem; }
  .mobile-nav-link span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .btn { white-space: normal; }
  .btn:not(.btn-sm), .form-control, .form-select { min-height: 44px; }
  textarea.form-control { min-height: 88px; }
  .input-group > .btn, .input-group > .form-control, .input-group > .form-select { min-width: 0; }
  .modal-dialog { margin: .5rem; }
  .modal-content { max-height: calc(100dvh - 1rem); overflow-y: auto; }

  .table-responsive .table { min-width: 620px; }
  .card > .table { display: block; width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table td, .table th { padding: .65rem .55rem; }

  .calendar-card { overflow: hidden; }
  .calendar-scroll { scroll-snap-type: x proximity; }
  .month-grid { grid-template-columns: repeat(7, 118px); min-width: 826px; }
  .calendar-day { min-height: 142px; padding: .4rem; scroll-snap-align: start; }
  .calendar-body { grid-auto-rows: minmax(142px, auto); }
  .weekday { padding: .55rem .25rem; font-size: .65rem; }
  .wash-event { font-size: .68rem; }

  .day-board { display: grid; grid-template-columns: 1fr; }
  .day-board > [class*="col-"] { width: 100%; }
  .day-column { min-height: 0; padding: .7rem; }
  .day-job-line { align-items: flex-start; }
  .day-job-line strong { max-width: 65%; overflow-wrap: anywhere; }

  .route-page-header > div, .route-page-header > form { width: 100%; }
  .route-page-header .btn { width: 100%; }
  .route-planner-grid { grid-template-columns: minmax(0, 1fr); gap: .85rem; }
  .route-map-frame, .wash-route-map { min-height: min(55dvh, 430px); }
  .google-route-map-frame { min-height: min(55dvh, 430px); }
  .google-route-map { height: min(55dvh, 430px); min-height: 330px; }
  .route-stop-card, .route-stop-list { max-height: none; }
  .route-map-toolbar { align-items: flex-start; }
  .route-map-legend { flex-wrap: wrap; gap: .45rem .8rem; }

  .mobile-hero > .d-flex, .client-portal-hero { flex-wrap: wrap; }
  .mobile-hero .install-app-button { white-space: normal; }
  .mobile-day-switch { flex-wrap: wrap; }
  .mobile-day-switch .btn { flex: 1 1 30%; }
  .mobile-job-card, .mobile-task-card { padding: .85rem; }
  .mobile-job-details { gap: .45rem; }

  .invoice-sheet { width: 100%; padding: 1rem; }
  .invoice-sheet > .d-flex { flex-wrap: wrap; gap: 1rem; }
  .invoice-sheet > .d-flex .text-end { width: 100%; text-align: left !important; }
  .message-actions-menu { width: min(280px, calc(100vw - 2.5rem)); }
  .imessage-bubble { max-width: 90%; }
}

@media (max-width: 389.98px) {
  .app-main, .client-main { padding-left: .5rem !important; padding-right: .5rem !important; }
  .card-body { padding: .75rem; }
  .mobile-nav-link { font-size: .56rem; }
  .mobile-nav-link svg { width: 1.2rem; height: 1.2rem; }
  .mobile-job-details { grid-template-columns: 1fr; }
  .mobile-job-details div:last-child { grid-column: auto; }
  .work-order-photo-grid { grid-template-columns: 1fr; }
}

/* Compact bow-to-stern systems inspection */
.system-check-page { max-width: 1080px; margin: 0 auto; }
.system-check-toolbar { position: sticky; z-index: 20; top: .5rem; border: 1px solid #dce7ec; }
.system-zone-list { display: grid; gap: .7rem; }
.system-zone { overflow: hidden; border: 1px solid #dce5ea; box-shadow: 0 2px 8px rgba(20,45,70,.05); }
.system-zone > summary { display: flex; align-items: center; gap: .75rem; padding: .7rem .85rem; cursor: pointer; list-style: none; }
.system-zone > summary::-webkit-details-marker { display: none; }
.system-zone-number { display: grid; place-items: center; flex: 0 0 auto; width: 2rem; height: 2rem; border-radius: 50%; color: #fff; background: linear-gradient(145deg,#0d7e89,#0b5965); font-size: .78rem; font-weight: 900; }
.system-zone-chevron { color: #71808d; transition: transform .15s ease; }
.system-zone[open] .system-zone-chevron { transform: rotate(180deg); }
.system-zone-actions { background: #f8fafb; }
.system-check-item { display: grid; grid-template-columns: minmax(240px,1fr) auto; align-items: center; gap: .55rem 1rem; padding: .55rem .85rem; border-bottom: 1px solid #edf1f3; }
.system-check-item:last-child { border-bottom: 0; }
.system-component { display: flex; align-items: center; gap: .5rem; min-width: 0; font-size: .86rem; font-weight: 650; }
.system-component-tag { flex: 0 0 auto; min-width: 3.25rem; padding: .15rem .35rem; border-radius: .35rem; color: #48606f; background: #edf3f6; font-size: .61rem; font-weight: 850; text-align: center; }
.system-condition-group { display: inline-flex; overflow: hidden; border: 1px solid #cfdae0; border-radius: .5rem; background: #fff; }
.system-condition-option { margin: 0; cursor: pointer; }
.system-condition-option input { position: absolute; opacity: 0; pointer-events: none; }
.system-condition-option span { display: block; min-width: 3.25rem; padding: .34rem .5rem; border-left: 1px solid #dce4e8; color: #60717d; font-size: .72rem; font-weight: 800; text-align: center; }
.system-condition-option:first-child span { border-left: 0; }
.condition-good input:checked + span { color: #fff; background: #198754; }
.condition-bad input:checked + span { color: #fff; background: #dc3545; }
.condition-na input:checked + span { color: #fff; background: #6c757d; }
.system-condition-option input:focus-visible + span { box-shadow: inset 0 0 0 2px #0d6efd; }
.system-bad-description { grid-column: 1 / -1; border-color: #efb1b7; background: #fff7f7; }
.system-check-submit { position: sticky; z-index: 18; bottom: .6rem; box-shadow: 0 8px 30px rgba(11,39,65,.16); }

/* Unified usability and navigation polish */
:root {
  --surface: #fff;
  --surface-soft: #f6f9fb;
  --border-soft: #dce6ed;
  --text-muted-strong: #607282;
  --focus-ring: rgba(16, 132, 166, .22);
}
body { color: #183247; background: #f3f7fa; }
.app-main, .client-main { background: radial-gradient(circle at 100% 0, rgba(22,153,164,.055), transparent 30rem), #f3f7fa; }
.app-main > :first-child, .client-main > :first-child { scroll-margin-top: 1rem; }
.app-main h1, .client-main h1 { color: #102f47; font-weight: 800; letter-spacing: -.025em; }
.app-main h1 + .text-muted, .app-main h1 + p, .client-main h1 + .text-muted, .client-main h1 + p { color: var(--text-muted-strong) !important; }
.card { border-color: var(--border-soft); box-shadow: 0 5px 18px rgba(17, 48, 72, .055); }
.card-header { border-bottom-color: #e4ecf1; }
.card-header.bg-white { background: linear-gradient(180deg, #fff, #fbfdfe) !important; }
.form-label, legend.form-label { color: #29465c; font-weight: 750; }
.form-control, .form-select { border-color: #c9d7e1; border-radius: .62rem; }
.form-control:focus, .form-select:focus { border-color: #178da1; box-shadow: 0 0 0 .24rem var(--focus-ring); }
.form-text, .text-muted { color: var(--text-muted-strong) !important; }
.btn { border-radius: .62rem; font-weight: 700; }
.btn-primary { border-color: #087b88; background: linear-gradient(145deg, #11929e, #08717e); }
.btn-primary:hover, .btn-primary:focus { border-color: #075e69; background: linear-gradient(145deg, #0c808b, #075e69); }
.table { --bs-table-bg: transparent; }
.table thead th { color: #506678; background: #f7fafc; font-size: .74rem; letter-spacing: .035em; text-transform: uppercase; white-space: nowrap; }
.table tbody tr { transition: background-color .14s ease; }
.table-hover tbody tr:hover { --bs-table-hover-bg: #f1f8fa; }
.badge { font-weight: 750; letter-spacing: .01em; }
.alert { border-radius: .75rem; }
.empty-day-column, .message-empty { border: 1px dashed #cbd9e2; border-radius: .75rem; background: #f8fbfc; }
.view-switch { display: inline-flex; gap: .3rem; padding: .28rem; border: 1px solid #dbe5eb; border-radius: .78rem; background: #fff; box-shadow: 0 3px 10px rgba(17,48,72,.04); }
.view-switch .btn { border: 0; }
.mobile-staff-header { display: none; }
.skip-to-content { position: fixed; z-index: 2000; top: .5rem; left: .5rem; padding: .65rem .85rem; border-radius: .55rem; color: #fff; background: #072d46; font-weight: 800; text-decoration: none; transform: translateY(-150%); transition: transform .15s ease; }
.skip-to-content:focus { color: #fff; transform: translateY(0); }
.mobile-client-header { display: none; }
.mobile-menu-groups { display: grid; gap: 1rem; }
.mobile-menu-groups section { overflow: hidden; border: 1px solid var(--border-soft); border-radius: .8rem; background: #fff; }
.mobile-menu-groups h3 { margin: 0; padding: .6rem .8rem; color: #60778a; background: #f4f8fa; font-size: .7rem; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.mobile-menu-groups a, .mobile-menu-groups button { display: flex; width: 100%; padding: .78rem .85rem; border: 0; border-top: 1px solid #edf2f5; color: #173b54; background: #fff; font-weight: 700; text-align: left; text-decoration: none; }
.mobile-menu-groups a:hover, .mobile-menu-groups button:hover { color: #08717e; background: #f2fafb; }
.sidebar-notification-count { display: grid; place-items: center; min-width: 1.35rem; height: 1.35rem; margin-left: auto; padding: 0 .3rem; border-radius: 999px; color: #09283f; background: #7edce1; font-size: .64rem; font-weight: 900; }
.notification-center-drawer { width: min(100vw, 430px) !important; border-left: 1px solid #dce6ed; background: #fff; box-shadow: -8px 0 24px rgba(7, 34, 53, .12); }
.notification-center-header { min-height: 72px; padding: 1rem 1.1rem; color: #17394f; background: #fff; border-bottom: 1px solid #dce6ed; }
.notification-center-heading { display: flex; align-items: center; gap: .8rem; }
.notification-center-heading h2 { margin: 0; color: #17394f; font-size: 1.15rem; font-weight: 850; }
.notification-center-heading p { margin: .1rem 0 0; color: #718391; font-size: .75rem; }
.notification-center-body { padding: .9rem 1rem 1.5rem; overflow-y: auto; }
.notification-composer { margin-bottom: 1rem; border-radius: .85rem; background: #fff; box-shadow: 0 4px 16px rgba(18,55,77,.08); }
.notification-composer summary { display: flex; align-items: center; justify-content: center; gap: .35rem; padding: .8rem 1rem; border: 1px solid #b9dce0; border-radius: .85rem; color: #086d78; font-weight: 800; list-style: none; cursor: pointer; }
.notification-composer[open] summary { border-radius: .85rem .85rem 0 0; background: #eef9fa; }
.notification-composer summary::-webkit-details-marker { display: none; }
.notification-compose-form { display: grid; gap: .85rem; padding: 1rem; border: 1px solid #dbe7ec; border-top: 0; border-radius: 0 0 .85rem .85rem; }
.notification-section-label { display: flex; justify-content: space-between; margin: .25rem .15rem .65rem; color: #697e8d; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.notification-history { display: grid; gap: 1rem; }
.notification-history-item { overflow: hidden; border: 1px solid #d5e1e8; border-radius: .75rem; background: #fff; box-shadow: 0 3px 10px rgba(18,55,77,.05); }
.notification-card-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: .7rem; }
.notification-card-top { padding: .9rem 1rem .65rem; border-bottom: 1px solid #edf2f5; }
.notification-card-title { min-width: 0; }
.notification-card-title strong { display: block; }
.notification-card-title strong { overflow-wrap: anywhere; color: #17394f; line-height: 1.25; }
.notification-audience { padding: .2rem .42rem; border-radius: 999px; color: #176775; background: #e7f5f6; font-size: .62rem; font-weight: 850; white-space: nowrap; }
.notification-card-message { min-height: 3rem; padding: 1rem; color: #314f62; font-size: .88rem; line-height: 1.55; }
.notification-card-footer { display: flex; align-items: end; justify-content: space-between; gap: .75rem; padding: .65rem 1rem; border-top: 1px solid #edf2f5; background: #f8fafb; }
.notification-card-footer time, .notification-card-footer span { display: block; color: #718391; font-size: .68rem; }
.notification-card-footer span { margin-top: .15rem; }
.notification-dismiss { padding: .25rem .45rem; border: 0; color: #687d8c; background: transparent; font-size: .72rem; font-weight: 800; }
.notification-dismiss:hover, .notification-dismiss:focus { color: #a22b38; text-decoration: underline; }
.notification-empty { padding: 3.2rem 1.5rem; color: #69808f; text-align: center; }
.notification-empty span, .notification-empty strong { display: block; }
.notification-empty span { margin-bottom: .65rem; font-size: 2rem; }
.notification-empty strong { color: #28495e; }
.notification-empty p { max-width: 17rem; margin: .3rem auto 0; font-size: .82rem; }
.schedule-shortcuts { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.schedule-shortcuts .btn { width: auto; min-height: 0; padding: .38rem .68rem; line-height: 1.2; white-space: nowrap; }

@media (min-width: 768px) and (max-width: 991.98px) {
  .mobile-client-header { position: sticky; z-index: 1030; top: 0; display: flex; align-items: center; justify-content: space-between; min-height: 62px; padding: .55rem 1rem; color: #fff; background: linear-gradient(105deg, #0b2741, #0a3c55); box-shadow: 0 5px 18px rgba(7,29,48,.18); }
  .mobile-client-header > a { display: flex; align-items: center; gap: .55rem; color: #fff; text-decoration: none; }
  .mobile-client-header .mini-brand-mark { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: .62rem; color: #0b2741; background: #fff; font-size: .72rem; font-weight: 900; }
  .mobile-client-header strong, .mobile-client-header small { display: block; line-height: 1.05; }
  .mobile-client-header small { margin-top: .15rem; color: #b9ccda; font-size: .65rem; }
}

@media (max-width: 767.98px) {
  .mobile-staff-header { position: sticky; z-index: 1030; top: 0; display: flex; align-items: center; justify-content: space-between; min-height: 64px; padding: .55rem .75rem; color: #fff; background: linear-gradient(105deg, #0b2741, #0a3c55); box-shadow: 0 5px 18px rgba(7,29,48,.18); }
  .mobile-staff-brand { display: flex; align-items: center; gap: .6rem; color: #fff; text-decoration: none; }
  .mobile-staff-brand .sidebar-brand-mark { width: 2.25rem; height: 2.25rem; border-radius: .65rem; }
  .mobile-staff-brand strong, .mobile-staff-brand small { display: block; line-height: 1.1; }
  .mobile-staff-brand small { max-width: 52vw; margin-top: .15rem; overflow: hidden; color: #b9ccda; font-size: .65rem; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-menu-button { display: flex; align-items: center; gap: .35rem; min-height: 42px; padding: .45rem .65rem; border: 1px solid rgba(255,255,255,.2); border-radius: .65rem; color: #fff; background: rgba(255,255,255,.08); font-size: .72rem; font-weight: 800; }
  .mobile-menu-button svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
  .mobile-staff-menu { width: min(92vw, 390px) !important; }
  .mobile-client-header { position: sticky; z-index: 1030; top: 0; display: flex; align-items: center; justify-content: space-between; min-height: 62px; padding: .55rem .75rem; color: #fff; background: linear-gradient(105deg, #0b2741, #0a3c55); box-shadow: 0 5px 18px rgba(7,29,48,.18); }
  .mobile-client-header > a { display: flex; align-items: center; gap: .55rem; color: #fff; text-decoration: none; }
  .mobile-client-header .mini-brand-mark { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: .62rem; color: #0b2741; background: #fff; font-size: .72rem; font-weight: 900; }
  .mobile-client-header strong, .mobile-client-header small { display: block; line-height: 1.05; }
  .mobile-client-header small { margin-top: .15rem; color: #b9ccda; font-size: .65rem; }
  .app-main { padding-top: .85rem !important; }
  .view-switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .view-switch .btn { width: 100%; }
  .schedule-shortcuts { width: 100%; }
  .schedule-shortcuts .btn { flex: 0 1 auto; width: auto; min-height: 36px; }
}

@media (max-width: 767.98px) {
  .system-check-toolbar { top: .25rem; }
  .system-zone > summary { padding: .65rem; }
  .system-zone > summary .small { font-size: .68rem; line-height: 1.2; }
  .system-check-item { grid-template-columns: 1fr; gap: .45rem; padding: .65rem; }
  .system-condition-group { display: grid; grid-template-columns: repeat(3,1fr); width: 100%; }
  .system-condition-option span { min-width: 0; padding: .5rem .3rem; }
  .system-check-submit { bottom: calc(5.25rem + env(safe-area-inset-bottom)); }
  .system-check-submit .btn { width: 100%; }
}