/* View-specific: Dashboard, CRM list+detail, placeholders, login */

/* --- Dashboard --- */
.grid-stats {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-bottom: 22px;
}
.dash-grid {
  display: grid; gap: 18px;
  grid-template-columns: repeat(12, 1fr);
}
/* Admins and managers who are working a live shift need a clean handoff
   between their personal operational work and the wider shop overview. */
.dashboard-assigned-shift-section {
  margin-bottom: 28px;
}
.dashboard-section-heading {
  margin: 0 0 12px;
}
.dashboard-section-heading h2 {
  margin: 2px 0 0;
  color: var(--navy);
  font-family: var(--font-display, inherit);
  font-size: 1.12rem;
  line-height: 1.3;
}
.dashboard-role-divider {
  position: relative;
  overflow: hidden;
  margin: 58px 0 22px;
  padding: 30px clamp(24px, 5vw, 56px);
  border: 1px solid rgba(20, 119, 151, .24);
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(118deg, #073846 0%, #0b5e74 52%, #157e99 100%);
  box-shadow: 0 18px 40px rgba(7, 56, 70, .16);
}
.dashboard-role-divider::after {
  content: '';
  position: absolute;
  right: -50px;
  bottom: -105px;
  width: 300px;
  height: 300px;
  border: 42px solid rgba(255,255,255,.10);
  border-radius: 50%;
}
.dashboard-role-divider-kicker,
.dashboard-role-divider h2,
.dashboard-role-divider p {
  position: relative;
  z-index: 1;
}
.dashboard-role-divider-kicker {
  margin-bottom: 6px;
  color: rgba(255,255,255,.78);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .15em;
}
.dashboard-role-divider h2 {
  margin: 0;
  color: #fff;
  font-family: var(--font-display, inherit);
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  line-height: 1.1;
  letter-spacing: -.03em;
}
.dashboard-role-divider p {
  max-width: 600px;
  margin: 8px 0 0;
  color: rgba(255,255,255,.92);
  font-size: .92rem;
}
@media (max-width: 680px) {
  .dashboard-role-divider { margin-top: 42px; padding: 26px 23px; border-radius: 14px; }
  .dashboard-role-divider p { font-size: .86rem; }
}

.dash-grid > .card { grid-column: span 6; }
.dash-grid > .card.col-12 { grid-column: span 12; }
.dash-grid > .card.col-4  { grid-column: span 4; }
.dash-grid > .card.col-8  { grid-column: span 8; }
@media (max-width: 1200px) {
  .dash-grid > .card, .dash-grid > .card.col-4, .dash-grid > .card.col-8 { grid-column: span 12; }
}

.trip-card {
  display: grid; grid-template-columns: auto 1fr auto;
  gap: 14px; align-items: center;
  padding: 13px 0; border-bottom: 1px solid var(--border-soft);
}
.trip-card:last-child { border-bottom: none; }
.stat-card.clickable, .trip-card.clickable, .manifest-client[onclick], .list-row.clickable { cursor: pointer; }
.stat-card.clickable:hover, .trip-card.clickable:hover, .list-row.clickable:hover { background: rgba(27,169,225,0.05); }
.stat-card.clickable:focus, .trip-card.clickable:focus, .list-row.clickable:focus { outline: 2px solid rgba(27,169,225,0.35); outline-offset: 2px; }
.trip-card.clickable { margin: 0 -8px; padding-left: 8px; padding-right: 8px; border-radius: var(--radius-sm); }
.trip-card .time {
  width: 64px; text-align: center;
  border-right: 1px solid var(--border-soft); padding-right: 14px;
}
.trip-card .time .hr { font-family: var(--font-display); font-size: 1.05rem; color: var(--navy); font-weight: 600; }
.trip-card .time .pm { font-size: 0.62rem; color: var(--text-muted); font-weight: 600; letter-spacing: .1em; }
.trip-card .info .title { font-size: 0.92rem; font-weight: 500; color: var(--navy); }
.trip-card .info .meta { font-size: 0.74rem; color: var(--text-muted); margin-top: 4px; display: flex; gap: 14px; flex-wrap: wrap; }
.trip-card .info .meta span { display: inline-flex; align-items: center; gap: 4px; }
.trip-card .pax { text-align: right; min-width: 70px; }
.trip-card .pax .n { font-family: var(--font-display); font-size: 1rem; color: var(--blue); font-weight: 600; }
.trip-card .pax .l { font-size: 0.62rem; letter-spacing: .08em; color: var(--text-muted); text-transform: uppercase; font-weight: 600; }

.dash-modal-list, .manifest-list { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.manifest-client {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px; align-items: start;
  padding: 14px 0; border-bottom: 1px solid var(--border-soft);
}
.manifest-client:last-child { border-bottom: none; }
.manifest-client[onclick]:hover { background: rgba(27,169,225,0.05); }
.manifest-main { min-width: 0; }
.manifest-name { font-weight: 600; color: var(--navy); font-size: .95rem; }
.manifest-sub, .manifest-note { color: var(--text-muted); font-size: .76rem; margin-top: 4px; }
.manifest-flags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }

/* Field Shift: compact on a phone, but keeps each assignment's people and
   readiness visible without opening a separate Guide page. */
.field-shift-overview { margin-bottom: 16px; }
.field-shift-assignment { padding: 12px; }
.field-shift-assignment-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.field-shift-assignment-head h4 { margin: 2px 0 4px; font-size: 16px; }
.field-shift-operational { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 9px 0; color: var(--text-muted); font-size: 13px; }
.field-shift-notes { margin: 8px 0 10px; padding: 8px 10px; border-left: 3px solid var(--border); border-radius: 3px; color: var(--text-muted); font-size: 13px; white-space: pre-wrap; }
.field-shift-person-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 5px; }
.field-shift-divider { height: 1px; background: var(--border); margin: 12px 0 0; }
@media (max-width: 620px) {
  .field-shift-assignment { padding: 10px; }
  .field-shift-assignment-head { gap: 8px; }
  .field-shift-person-actions { justify-content: flex-start; margin-top: 7px; }
  .field-shift-overview .list-row { align-items: flex-start; }
  .field-shift-overview .list-row .end { width: 100%; margin-left: 0; }
}
.dash-chip {
  display: inline-flex; align-items: center; gap: 4px;
  border: 1px solid var(--border); border-radius: 999px;
  padding: 3px 9px; font-size: .68rem; font-weight: 600;
  color: var(--text-muted); background: #fff;
}
.dash-chip.ok { color: var(--status-green); border-color: rgba(34,197,94,.28); background: rgba(34,197,94,.08); }
.dash-chip.warn { color: #b07700; border-color: #fbe4a3; background: var(--amber-50); }
.dash-chip.danger { color: var(--status-red); border-color: rgba(239,68,68,.28); background: rgba(239,68,68,.08); }
.manifest-money { font-family: var(--font-display); font-weight: 700; color: var(--navy); white-space: nowrap; }
.manifest-money.warn { color: var(--amber); }
.manifest-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 700px) {
  .manifest-client { grid-template-columns: 1fr; }
  .manifest-actions { justify-content: flex-start; }
}

/* Field-rental sign-out starts with compact category tiles, so a guide does
   not have to scroll through every numbered item on a phone. */
.field-rental-picker { margin-bottom: 14px; }
.field-rental-picker-copy { display: flex; flex-direction: column; gap: 3px; margin-bottom: 10px; color: var(--text-muted); font-size: .8rem; }
.field-rental-picker-copy strong, .field-rental-picker-head strong { color: var(--navy); font-size: .84rem; }
.field-rental-picker-section { margin: 13px 0 7px; color: var(--text-muted); font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.field-rental-picker-copy + .field-rental-picker-section { margin-top: 0; }
.field-rental-category-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.field-rental-category-grid-priority { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.field-rental-category {
  min-height: 90px; padding: 9px 6px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: #fff; color: var(--navy); cursor: pointer; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 3px; text-align: center;
}
.field-rental-category:hover, .field-rental-category:focus-visible { border-color: var(--blue); background: var(--blue-50); outline: none; }
.field-rental-category-icon { font-size: 1.3rem; line-height: 1; }
.field-rental-category-label { font-size: .76rem; font-weight: 700; }
.field-rental-category-count { color: var(--text-muted); font-size: .66rem; }
.field-rental-picker-head { display: flex; align-items: center; gap: 10px; margin: 12px 0 10px; }
.field-rental-picker-head > div { display: flex; flex-direction: column; gap: 1px; }
.field-rental-picker-head > div span { color: var(--text-muted); font-size: .72rem; }
.field-rental-picker-back { flex: 0 0 auto; }
.field-rental-selection { padding: 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--blue-50); }
.field-rental-selection-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.field-rental-selection-head > div { display: flex; flex-direction: column; gap: 1px; }
.field-rental-selection-head strong { color: var(--navy); font-size: .82rem; }
.field-rental-selection-head span, .field-rental-selected-empty { color: var(--text-muted); font-size: .72rem; }
.field-rental-selected-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.field-rental-selected-item { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; border: 1px solid rgba(20, 120, 180, .24); border-radius: 999px; background: #fff; color: var(--navy); padding: 5px 8px 5px 10px; font-size: .72rem; text-align: left; cursor: pointer; }
.field-rental-selected-item:hover, .field-rental-selected-item:focus-visible { border-color: var(--blue); outline: none; }
.field-rental-selected-remove { flex: 0 0 auto; color: var(--status-red); font-size: 1rem; line-height: .7; }
.field-rental-item-section + .field-rental-item-section { margin-top: 12px; }
.field-rental-item-list { display: flex; flex-direction: column; gap: 7px; }
.field-rental-item { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; color: var(--navy); text-align: left; cursor: pointer; }
.field-rental-item:hover, .field-rental-item:focus-visible { border-color: var(--blue); background: var(--blue-50); outline: none; }
.field-rental-item.selected { border-color: var(--blue); background: var(--blue-50); }
.field-rental-item-copy { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.field-rental-item-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8rem; }
.field-rental-item-copy span { color: var(--text-muted); font-size: .7rem; }
.field-rental-item-action { flex: 0 0 auto; color: var(--blue); font-size: .74rem; font-weight: 700; }
.field-rental-item.selected .field-rental-item-action { color: var(--status-red); }
@media (max-width: 380px) { .field-rental-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* --- Reports --- */
.report-filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.report-filters label {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--text-muted); font-size: .78rem; font-weight: 600;
}
.report-filters input {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 8px 10px; background: #fff; color: var(--navy);
}
.report-card { margin-bottom: 16px; }
.report-table { display: flex; flex-direction: column; margin-top: 8px; }
.report-row {
  display: grid; grid-template-columns: minmax(180px, 1.4fr) repeat(3, minmax(110px, .7fr));
  gap: 14px; align-items: center;
  padding: 12px 0; border-bottom: 1px solid var(--border-soft);
  font-size: .86rem; color: var(--navy);
}
.report-row:last-child { border-bottom: none; }
.report-head {
  color: var(--text-muted); font-size: .68rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
}
.report-sub { display: block; color: var(--text-muted); font-size: .68rem; margin-top: 3px; }
.report-positive { color: var(--status-green); font-weight: 700; }
.report-negative { color: var(--status-red); font-weight: 700; }
@media (max-width: 760px) {
  .report-row { grid-template-columns: 1fr; gap: 4px; }
  .report-head { display: none; }
}

.alert-bar {
  background: var(--amber-50);
  border: 1px solid #fbe4a3;
  border-left: 3px solid var(--amber);
  border-radius: var(--radius-md);
  padding: 13px 18px; margin-bottom: 22px;
  display: flex; align-items: center; gap: 14px;
}
.alert-bar .ico { font-size: 1.1rem; }
.alert-bar .txt { flex: 1; font-size: 0.88rem; color: var(--navy); }
.alert-bar .txt strong { color: #b07700; font-weight: 600; }

/* --- CRM list --- */
.crm-toolbar {
  display: flex; align-items: center; gap: 16px;
  flex-wrap: wrap; margin-bottom: 16px;
}
.crm-toolbar .search-mini {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: #fff;
  min-width: 280px;
}
.crm-toolbar .search-mini input { border: none; padding: 0; background: transparent; }
.crm-toolbar .search-mini input:focus { box-shadow: none; }

.tbl .traffic { display: flex; gap: 14px; align-items: center; }
.tbl .traffic .t {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  font-size: 0.58rem; font-weight: 600;
  letter-spacing: .06em; color: var(--text-muted); text-transform: uppercase;
}

/* --- CRM detail --- */
.detail-head {
  display: grid; grid-template-columns: auto 1fr auto;
  gap: 22px; align-items: center;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 22px 26px; margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
}
.detail-head .portrait {
  width: 80px; height: 80px; border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), #73d2f1);
  display: grid; place-items: center; color: #fff;
  font-family: var(--font-display); font-weight: 600; font-size: 1.6rem;
}
.detail-head .nm-stack h2 { margin: 0 0 4px; font-size: 1.4rem; }
.detail-head .nm-stack .ml { font-size: 0.85rem; color: var(--text-muted); }
.detail-head .signals { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.detail-head .actions { display: flex; gap: 8px; flex-wrap: wrap; }

.tabs {
  display: flex; gap: 4px; border-bottom: 1px solid var(--border);
  margin-bottom: 20px; overflow-x: auto;
}
.tabs .tab {
  padding: 11px 16px; font-size: 0.82rem; font-weight: 500;
  color: var(--text-muted); border-bottom: 2px solid transparent;
  white-space: nowrap; transition: color .12s, border-color .12s;
  background: transparent;
}
.tabs .tab:hover { color: var(--navy); }
.tabs .tab.active { color: var(--blue); border-bottom-color: var(--blue); font-weight: 600; }

.profile-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (max-width: 900px) { .profile-grid { grid-template-columns: 1fr; } }
.kv { display: flex; flex-direction: column; gap: 3px; padding: 11px 0; border-bottom: 1px solid var(--border-soft); }
.kv:last-child { border-bottom: none; }
.kv .k { font-size: 0.7rem; font-weight: 600; letter-spacing: .06em; color: var(--text-muted); text-transform: uppercase; }
.kv .v { font-size: 0.92rem; color: var(--navy); }
.kv .v.gold { color: #b07700; font-weight: 500; }

.waiver-row, .gear-row {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 0; border-bottom: 1px solid var(--border-soft);
}
.waiver-row:last-child, .gear-row:last-child { border-bottom: none; }
.waiver-row .body, .gear-row .body { flex: 1; }
.waiver-row .body .nm, .gear-row .body .nm { font-size: 0.92rem; color: var(--navy); font-weight: 500; }
.waiver-row .body .sub, .gear-row .body .sub { font-size: 0.74rem; color: var(--text-muted); margin-top: 3px; }

/* --- Placeholder --- */
.coming-soon {
  display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-xl); padding: 70px 40px; text-align: center;
  min-height: 340px; box-shadow: var(--shadow-sm);
}
.coming-soon .ico {
  width: 76px; height: 76px; border-radius: 18px;
  background: var(--blue-50); color: var(--blue);
  display: grid; place-items: center; font-size: 1.8rem;
  margin-bottom: 20px;
}
.coming-soon h2 { margin-bottom: 8px; }
.coming-soon p { color: var(--text-muted); max-width: 500px; margin-bottom: 22px; font-size: 0.95rem; }
.coming-soon .tag {
  display: inline-block; margin-bottom: 12px;
  padding: 3px 10px; border-radius: 999px;
  background: var(--blue-50); color: var(--blue);
  font-size: 0.66rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}

/* --- Login --- */
.login-shell {
  min-height: 100vh;
  display: grid; place-items: center;
  padding: 40px 20px;
  background: var(--bg);
  background-image:
    radial-gradient(800px 400px at 15% 10%, rgba(27,169,225,0.06), transparent 60%),
    radial-gradient(700px 400px at 85% 95%, rgba(14,51,60,0.04), transparent 65%);
}
.login-card {
  width: min(440px, 100%);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 36px 34px;
  box-shadow: var(--shadow-lg);
  animation: fadeUp .4s ease both;
}
.login-card .brand-row { display: flex; align-items: center; justify-content: center; gap: 11px; margin-bottom: 18px; }
.login-card .brand-row .logo-mark {
  width: 40px; height: 40px; border-radius: 10px;
  background: linear-gradient(135deg, var(--blue), #73d2f1);
  display: grid; place-items: center;
  box-shadow: 0 6px 18px rgba(27,169,225,0.3);
  position: relative;
}
.login-card .brand-row .logo-mark::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; border: 2px solid #fff; }
.login-card .brand-row .name { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--navy); }
.login-card .eyebrow { margin-bottom: 18px; display: block; }
.login-card h1 { font-size: 1.7rem; margin-bottom: 4px; color: var(--navy); }
.login-card .lead { color: var(--text-muted); margin-bottom: 24px; font-size: 0.9rem; }

.role-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 18px; }
.role-pick {
  padding: 14px 8px; text-align: center;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  cursor: pointer; transition: all .12s;
  display: flex; flex-direction: column; gap: 5px; align-items: center;
  background: #fff;
}
.role-pick:hover { border-color: var(--blue); background: var(--blue-50); }
.role-pick.active { border-color: var(--blue); background: var(--blue-50); box-shadow: 0 0 0 3px rgba(27,169,225,0.1); }
.role-pick .ico { font-size: 1.25rem; }
.role-pick .nm { font-size: 0.74rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.role-pick.active .nm { color: var(--blue); }

.field { margin-bottom: 14px; }
.field label { display: block; font-size: 0.72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px; }
.field.cash-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cash-input { position: relative; }
.cash-input .prefix {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  font-size: 0.84rem; color: var(--text-muted); pointer-events: none; font-weight: 500;
}
.cash-input input { padding-left: 38px; }

.login-card .btn-primary { width: 100%; justify-content: center; padding: 13px; margin-top: 8px; font-size: 0.86rem; }
.login-card .foot { text-align: center; font-size: 0.78rem; color: var(--text-muted); margin-top: 22px; }
.login-card .foot a { color: var(--blue); font-weight: 500; }

.proposal-link {
  position: fixed; top: 18px; left: 22px;
  font-size: 0.78rem; font-weight: 500;
  color: var(--text-muted); display: inline-flex; align-items: center; gap: 6px;
}
.proposal-link:hover { color: var(--blue); }

.login-card .brand-row .login-logo {
  width: min(260px, 82vw);
  max-height: 120px;
  height: auto;
  display: block;
  object-fit: contain;
}

@media (max-width: 900px) {
  .crm-toolbar .search-mini {
    min-width: 0;
    width: 100%;
    flex: 1 1 240px;
  }
  .detail-head {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 18px;
  }
  .detail-head .actions {
    width: 100%;
  }
}

/* Phone dashboard: keep the operational overview dense enough to scan with
   one hand. Cards stay full width, but the key numbers use two columns and a
   trip keeps time, detail and headcount on one compact row. */
@media (max-width: 700px) {
  .grid-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 16px;
  }
  .dash-grid { gap: 12px; }
  .dash-grid > .card,
  .dash-grid > .card.col-4,
  .dash-grid > .card.col-8,
  .dash-grid > .card.col-12 { grid-column: 1 / -1; }
  .card { padding: 16px; }
  .card .card-head { align-items: flex-start; gap: 10px; margin-bottom: 12px; }
  .card .card-head > * { min-width: 0; }
  .stat-card {
    min-width: 0;
    min-height: 108px;
    padding: 13px 12px;
    gap: 3px;
  }
  .stat-card .ico { top: 12px; right: 10px; }
  .stat-card .val {
    max-width: calc(100% - 20px);
    font-size: clamp(1.1rem, 5.5vw, 1.45rem);
    line-height: 1.18;
    overflow-wrap: anywhere;
  }
  .stat-card .delta { font-size: .7rem; line-height: 1.3; }
  .dashboard-page-head { gap: 12px; margin-bottom: 16px; }
  .dashboard-page-head .title-stack { gap: 3px; }
  .dashboard-page-head .actions {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    overflow: visible;
  }
  .dashboard-page-head .actions .btn {
    width: 100%;
    min-width: 0;
    justify-content: center;
    padding-inline: 10px;
  }
  .trip-card {
    grid-template-columns: 52px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: start;
    padding: 12px 0;
  }
  .trip-card .time {
    width: 52px;
    text-align: center;
    border-right: 1px solid var(--border-soft);
    border-bottom: 0;
    padding: 2px 10px 2px 0;
  }
  .trip-card .time .hr { font-size: 1rem; }
  .trip-card .info { min-width: 0; }
  .trip-card .info .title { font-size: .88rem; line-height: 1.3; }
  .trip-card .info .meta { gap: 4px 10px; font-size: .7rem; }
  .trip-card .pax {
    min-width: 38px;
    text-align: right;
    padding-top: 1px;
  }
  .trip-card .pax .n { font-size: .95rem; }
  .trip-card .pax .l { font-size: .56rem; }
  .field-shift-overview { margin-bottom: 12px; }
  .field-shift-overview .card-head { margin-bottom: 10px; }
  .field-shift-assignment { padding: 10px 0; }
  .field-shift-assignment-head h4 { font-size: .98rem; }
  .field-shift-operational { gap: 5px 10px; font-size: .75rem; }
  .field-shift-person {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: start;
    column-gap: 10px;
    row-gap: 8px;
    padding: 12px 0;
  }
  .field-shift-person .ico-pill { grid-row: 1 / span 2; }
  .field-shift-person .body { min-width: 0; }
  .field-shift-person .end {
    grid-column: 2;
    width: auto;
    margin: 0;
    text-align: left;
  }
  .field-shift-person-actions {
    justify-content: flex-start;
    gap: 6px;
  }
  .field-shift-person-actions .dash-chip { min-height: 28px; }
  .field-shift-person-actions > .btn { margin-left: auto; }
  .field.cash-pair { grid-template-columns: 1fr; }
  .login-card { padding: 28px 20px; }
  .role-picker { grid-template-columns: repeat(2, 1fr); }
  .proposal-link {
    position: static;
    display: inline-flex;
    margin: 18px 20px 0;
  }
  .login-shell {
    align-content: start;
    padding-top: 18px;
  }
}

@media (max-width: 390px) {
  .grid-stats { gap: 8px; }
  .stat-card { padding: 12px 10px; }
  .stat-card .lbl { font-size: .62rem; letter-spacing: .06em; }
  .dashboard-page-head .actions { grid-template-columns: 1fr; }
  .field-shift-person-actions > .btn {
    width: 100%;
    margin-left: 0;
    justify-content: center;
  }
}

/* Rental Gear is an operational register with hundreds of numbered items.
   Category tiles keep wetsuits and everyday equipment discoverable instead of
   burying them after the full inventory list. */
.rental-inventory-categories {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(154px, 1fr));
  gap: 8px;
  margin: 0 0 16px;
}
.rental-inventory-category {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 58px;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--navy);
  cursor: pointer;
  text-align: left;
}
.rental-inventory-category:hover,
.rental-inventory-category:focus-visible,
.rental-inventory-category.selected {
  border-color: var(--blue);
  background: var(--blue-50);
  outline: none;
}
.rental-inventory-category-icon { flex: 0 0 auto; font-size: 1.16rem; }
.rental-inventory-category-copy { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rental-inventory-category-copy strong { color: var(--navy); font-size: .8rem; }
.rental-inventory-category-copy span { color: var(--text-muted); font-size: .68rem; }
.rental-inventory-search {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 0 0 16px;
}
.rental-inventory-search input {
  min-width: 0;
  flex: 1 1 260px;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--navy);
  font: inherit;
}
.rental-inventory-search input:focus-visible {
  border-color: var(--blue);
  outline: 2px solid color-mix(in srgb, var(--blue) 24%, transparent);
  outline-offset: 1px;
}
@media (max-width: 520px) {
  .rental-inventory-categories { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rental-inventory-search { flex-wrap: wrap; }
  .rental-inventory-search input { flex-basis: 100%; }
}

/* Field checklists: show the next actions first. Completed items remain
   available as a compact audit history instead of obscuring the work left. */
.predeparture-checklist .predeparture-body {
  padding: 0 14px 14px;
}
.predeparture-checklist .predeparture-progress {
  display: grid;
  gap: 8px;
  padding: 12px 0 10px;
}
.predeparture-progress-copy {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.predeparture-progress-copy strong {
  color: var(--navy);
  font-size: .92rem;
}
.predeparture-progress-copy span {
  color: var(--text-muted);
  font-size: .76rem;
  white-space: nowrap;
}
.predeparture-progress-bar {
  height: 7px;
  overflow: hidden;
  border-radius: 99px;
  background: var(--border-soft, #e8edf0);
}
.predeparture-progress-bar > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--teal, #147d79);
  transition: width .18s ease;
}
.predeparture-list { display: grid; gap: 8px; }
.predeparture-item {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  min-height: 62px;
  padding: 13px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  color: var(--navy);
  cursor: pointer;
}
.predeparture-item:has(input:not(:disabled)):hover,
.predeparture-item:has(input:not(:disabled)):focus-within {
  border-color: var(--blue);
  background: var(--blue-50, #f1f8ff);
}
.predeparture-item input {
  width: 22px;
  height: 22px;
  margin: 1px 0 0;
  accent-color: var(--teal, #147d79);
  cursor: pointer;
}
.predeparture-item-copy { min-width: 0; display: grid; gap: 4px; }
.predeparture-item-title {
  color: var(--navy);
  font-size: .94rem;
  font-weight: 700;
  line-height: 1.25;
}
.predeparture-item-meta {
  color: var(--text-muted);
  font-size: .73rem;
  line-height: 1.3;
}
.predeparture-item.completed {
  min-height: 48px;
  padding: 10px 12px;
  border-color: var(--border-soft, #e8edf0);
  background: var(--surface-soft, #f8f9fb);
}
.predeparture-item.completed .predeparture-item-title {
  color: var(--text-muted);
  font-weight: 600;
  text-decoration: line-through;
}
.predeparture-item.completed input { cursor: pointer; }
.checklist-all-done {
  margin: 2px 0 10px;
  padding: 12px;
  border: 1px solid #b9dfd3;
  border-radius: 10px;
  background: #edf9f4;
  color: #17634e;
  font-size: .84rem;
  font-weight: 700;
}
.checklist-history {
  margin-top: 12px;
  border-top: 1px solid var(--border-soft, #e8edf0);
}
.checklist-history summary {
  padding: 12px 2px 2px;
  color: var(--text-muted);
  font-size: .8rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.checklist-history summary::-webkit-details-marker { display: none; }
.checklist-history summary::before {
  content: '›';
  display: inline-block;
  margin-right: 7px;
  color: var(--navy);
  font-size: 1.1rem;
  transition: transform .15s ease;
}
.checklist-history[open] summary::before { transform: rotate(90deg); }
.checklist-history-list { margin-top: 10px; }
@media (max-width: 520px) {
  .predeparture-checklist .card-head { padding: 14px; }
  .predeparture-checklist .predeparture-tabs { padding: 0 14px 6px; overflow-x: auto; }
  .predeparture-item { min-height: 66px; }
  .predeparture-item-title { font-size: 1rem; }
}

/* Personal daily tasks: one-off named work, separate from recurring shift checklists. */
.personal-daily-tasks-card { margin: 0 0 16px; }
.personal-task-toolbar, .personal-task-actions { display: flex; flex-wrap: wrap; gap: 7px; justify-content: flex-end; }
.personal-task-context-heading, .personal-task-person-heading {
  margin: 15px 0 5px; color: var(--text-muted); font-size: .72rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
}
.personal-task-person-heading { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--border-soft); color: var(--navy); font-size: .8rem; }
.personal-task-person-heading:first-of-type { border-top: 0; padding-top: 0; }
.personal-task-context-heading.compact { margin-left: 6px; }
.personal-task-row.done { opacity: .68; }
.personal-task-row .body { min-width: 0; }
.personal-task-template-options { display: grid; gap: 7px; max-height: 250px; overflow: auto; padding: 3px 0; }
.personal-task-template-option { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 9px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--navy); cursor: pointer; }
.personal-task-template-option:hover { border-color: var(--blue); background: var(--blue-50); }
.personal-task-template-option small { color: var(--text-muted); font-size: .68rem; }
@media (max-width: 620px) {
  .personal-daily-tasks-card .card-head { align-items: flex-start; flex-direction: column; }
  .personal-task-toolbar, .personal-task-actions { justify-content: flex-start; }
  /* The row itself becomes a two-line grid further down in this file, under
     "Dashboard on a phone". Do not re-add a width here: a full-width `.end`
     inside the old flex row is what squeezed the task title to one word. */
}

/* Compressor month/year tallies: four compact chips that sit directly under the
   day status cards. Same surface, border and icon language as .stat-card, but
   shorter, so the running totals read as a summary strip rather than a second
   row of headline numbers. Two columns on a phone, four on a desk screen. */
.compressor-tallies {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  margin: -8px 0 20px;
}
.compressor-tally {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 2px;
  padding: 11px 40px 11px 13px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
}
.compressor-tally .ico {
  position: absolute; right: 10px; top: 10px;
  width: 24px; height: 24px; border-radius: 6px;
  background: var(--blue-50); color: var(--blue);
  font-size: .8rem; display: grid; place-items: center;
}
.compressor-tally .k {
  font-size: .64rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-muted); overflow-wrap: anywhere;
}
.compressor-tally .v {
  font-family: var(--font-display); font-weight: 600; font-size: 1.25rem;
  line-height: 1.15; color: var(--navy); letter-spacing: -0.02em; overflow-wrap: anywhere;
}
.compressor-tally .sub { font-size: .7rem; font-weight: 500; color: var(--text-muted); line-height: 1.3; }
.compressor-tally-empty { grid-column: 1 / -1; }

@media (max-width: 700px) {
  .compressor-tallies {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px; margin: -4px 0 16px;
  }
  .compressor-tally { padding: 10px 10px 10px 11px; }
  .compressor-tally .ico { display: none; }
  .compressor-tally .k { font-size: .6rem; letter-spacing: .05em; }
  .compressor-tally .v { font-size: clamp(1rem, 4.6vw, 1.2rem); }
  .compressor-tally .sub { font-size: .66rem; }
}

/* Narrowest phones keep the two columns - four stacked cards would push the
   run log off the screen - and only give up a little padding and label size. */
@media (max-width: 390px) {
  .compressor-tallies { gap: 7px; }
  .compressor-tally { padding: 9px 9px 9px 10px; }
  .compressor-tally .k { font-size: .57rem; letter-spacing: .04em; }
  .compressor-tally .sub { font-size: .63rem; }
}

/* Tomorrow preparation is deliberately a full-width visual handover from today's live work. */
.tomorrow-preparation-section {
  margin: 58px 0 28px;
  padding-top: 2px;
}
.tomorrow-divider {
  position: relative;
  overflow: hidden;
  margin: 0 0 22px;
  padding: 34px clamp(24px, 5vw, 56px);
  border: 1px solid rgba(20, 119, 151, .24);
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(118deg, #073846 0%, #0b5e74 52%, #157e99 100%);
  box-shadow: 0 18px 40px rgba(7, 56, 70, .16);
}
.tomorrow-divider::after {
  content: '';
  position: absolute;
  right: -50px;
  bottom: -105px;
  width: 300px;
  height: 300px;
  border: 42px solid rgba(255,255,255,.10);
  border-radius: 50%;
}
.tomorrow-divider-kicker {
  position: relative;
  z-index: 1;
  margin-bottom: 6px;
  color: rgba(255,255,255,.78);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .15em;
}
.tomorrow-divider h2 {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #fff;
  font-family: var(--font-display, inherit);
  font-size: clamp(2rem, 5vw, 3.3rem);
  line-height: 1.05;
  letter-spacing: -.035em;
}
.tomorrow-divider p {
  position: relative;
  z-index: 1;
  max-width: 600px;
  margin: 9px 0 0;
  color: rgba(255,255,255,.92);
  font-size: .96rem;
}
.tomorrow-preparation-grid { margin-bottom: 0; }
.tomorrow-cash-card { border-left: 4px solid var(--amber, #d97706); }
.tomorrow-cash-summary {
  display: grid;
  gap: 7px;
  margin: 14px 8px 8px;
  padding: 13px 14px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: rgba(10, 89, 110, .035);
  color: var(--text-muted);
  font-size: .83rem;
}
.tomorrow-cash-summary strong { color: var(--navy); font-size: .9rem; }
.tomorrow-cash-summary small { color: var(--text-muted); line-height: 1.4; }
@media (max-width: 680px) {
  .tomorrow-preparation-section { margin-top: 42px; }
  .tomorrow-divider { padding: 27px 23px; border-radius: 14px; }
  .tomorrow-divider p { font-size: .87rem; }
}

/* ---------------------------------------------------------------------------
   Dashboard on a phone: Personal tasks + Entrance-fee cash
   ---------------------------------------------------------------------------
   Both modules are built from `.list-row`, which is a horizontal flex: the text
   body and the action column compete for the same line. On a desk screen there
   is room for both. On a phone the action column wins and the task title or the
   cenote name collapses to one word per line.

   The desktop rules below only replace inline styles that used to be written
   from dashboard.js, so wide screens render exactly as before. The phone rules
   turn each row into a two-line grid: icon + text first, then money, status and
   the single action on their own full-width line where a thumb can reach them.
   --------------------------------------------------------------------------- */

/* Desk-screen defaults (previously inline styles in dashboard.js). */
.entrance-fee-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.entrance-cash-obligation-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.entrance-fee-row { min-height: 64px; }
.entrance-fee-row .body .pri { font-size: 16px; }
.entrance-fee-row .body .sub { font-size: 14px; }
.entrance-fee-total {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-top: 1px solid var(--border, #e5e7eb);
}
/* The meta line keeps its single dot-separated reading on a desk screen even
   though it is now built from separate spans. */
.personal-task-meta > span + span::before { content: ' · '; }
/* The obligation detail is one dot-separated sentence on a desk screen even
   though it is grouped into a context part and a figures part. */
.entrance-cash-obligation-context > span + span::before,
.entrance-cash-obligation-figures > span::before { content: ' · '; }

@media (max-width: 620px) {
  /* --- Personal daily tasks ------------------------------------------------ */
  .personal-daily-tasks-card .card-head { gap: 10px; }
  .personal-daily-tasks-card .card-head h3 { font-size: 1.02rem; }
  .personal-task-toolbar { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .personal-task-toolbar .btn { width: 100%; min-height: 40px; justify-content: center; padding-inline: 8px; }

  .personal-task-person-heading { margin-top: 16px; padding-top: 11px; font-size: .84rem; }
  .personal-task-context-heading { margin: 13px 0 2px; font-size: .67rem; }
  .personal-task-context-heading.compact { margin-left: 0; }

  /* Icon and text share the first line; actions get their own line below. */
  .personal-task-row {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: start;
    column-gap: 10px;
    row-gap: 9px;
    padding: 13px 0;
  }
  .personal-task-row:hover { margin: 0; padding: 13px 0; }
  .personal-task-row .ico-pill { width: 28px; height: 28px; border-radius: 8px; font-size: .84rem; margin-top: 1px; }
  .personal-task-row .body { grid-column: 2; }
  .personal-task-row .body .pri { font-size: .96rem; line-height: 1.32; overflow-wrap: anywhere; }
  .personal-task-row .body .personal-task-description { font-size: .79rem; line-height: 1.4; margin-top: 3px; }

  /* Context and assignee are already in the headings above the row, so the
     phone keeps them small and gives the open/done status the visual weight. */
  .personal-task-row .body .personal-task-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; font-size: .72rem; }
  .personal-task-meta > span + span::before { content: none; }
  .personal-task-meta-item {
    padding: 2px 7px; border: 1px solid var(--border-soft); border-radius: 999px;
    background: var(--bg-soft, #f7f9fa); color: var(--text-muted); white-space: nowrap;
  }
  .personal-task-status {
    padding: 2px 8px; border-radius: 999px; font-weight: 700;
    color: #b07700; background: var(--amber-50); border: 1px solid #fbe4a3;
  }
  .personal-task-status.is-done {
    color: var(--green, #10b981); background: var(--green-50, #f0fdf4);
    border-color: rgba(34, 197, 94, .3);
  }

  .personal-task-row .end {
    grid-column: 2;
    width: auto;
    margin: 0;
    text-align: left;
  }
  .personal-task-actions { justify-content: flex-start; gap: 8px; }
  .personal-task-actions .btn { min-height: 40px; padding-inline: 16px; }
  /* One action: make it the obvious full-width thing to tap. Two management
     actions: split the line evenly so neither is a hairline target. */
  .personal-task-actions .btn:only-child { width: 100%; justify-content: center; }
  .personal-task-actions .btn:first-child:nth-last-child(2),
  .personal-task-actions .btn:first-child:nth-last-child(2) ~ .btn { flex: 1 1 0; min-width: 0; justify-content: center; }

  /* --- Entrance-fee cash + open obligations -------------------------------- */
  .entrance-fee-cash-card .card-head h3,
  .entrance-cash-obligations-card .card-head h3 { font-size: 1.02rem; }

  .entrance-fee-row,
  .entrance-cash-obligation-row,
  .tomorrow-cash-row {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    align-items: start;
    column-gap: 10px;
    row-gap: 10px;
    padding: 14px 0;
    min-height: 0;
  }
  .entrance-fee-row:hover,
  .entrance-cash-obligation-row:hover,
  .tomorrow-cash-row:hover { margin: 0; padding: 14px 0; }
  .entrance-fee-row .ico-pill,
  .entrance-cash-obligation-row .ico-pill,
  .tomorrow-cash-row .ico-pill { width: 32px; height: 32px; border-radius: 8px; font-size: .92rem; margin-top: 1px; }
  .entrance-fee-row .body,
  .entrance-cash-obligation-row .body,
  .tomorrow-cash-row .body { grid-column: 2; }
  .entrance-fee-row .body .pri,
  .entrance-cash-obligation-row .body .pri,
  .tomorrow-cash-row .body .pri { font-size: 1rem; line-height: 1.3; font-weight: 600; overflow-wrap: anywhere; }
  .entrance-fee-row .body .sub,
  .entrance-cash-obligation-row .body .sub,
  .tomorrow-cash-row .body .sub { font-size: .78rem; line-height: 1.45; margin-top: 4px; }
  .entrance-fee-row .end,
  .entrance-cash-obligation-row .end,
  .tomorrow-cash-row .end {
    grid-column: 2;
    width: auto;
    margin: 0;
    text-align: left;
  }
  .entrance-fee-actions,
  .entrance-cash-obligation-actions { justify-content: flex-start; gap: 8px; row-gap: 8px; }

  /* The amount is what the desk counts out of the drawer — it should read as a
     number, not as another grey label. */
  .dash-chip.entrance-fee-amount,
  .dash-chip.entrance-cash-amount {
    font-family: var(--font-display, inherit);
    font-size: .86rem;
    font-weight: 700;
    padding: 5px 11px;
  }
  .entrance-fee-actions .dash-chip.entrance-fee-status { padding: 5px 10px; font-size: .72rem; }

  /* Give cash / Confirm returned cash is the whole point of the row on a
     phone, so it takes the line under the chips at a full touch height. A
     disabled button is only echoing the status chip beside it, so it stays
     inline and small rather than posing as the row's main action. */
  .entrance-fee-actions > .btn:not([disabled]) {
    flex: 1 0 100%;
    min-height: 44px;
    justify-content: center;
    font-size: .86rem;
  }
  .entrance-fee-actions > .btn[disabled] {
    flex: 0 1 auto;
    min-height: 30px;
    padding: 4px 10px;
    font-size: .72rem;
  }

  /* Date, state and activity stay a normal sentence. The money figures drop to
     their own wrapped line of small pills, so each amount can be picked out at
     a glance without turning the row into eight stacked lines. */
  .entrance-cash-obligation-figures {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 7px;
  }
  .entrance-cash-obligation-figures > span::before { content: none; }
  .entrance-cash-obligation-figures > span {
    padding: 2px 8px;
    border: 1px solid var(--border-soft);
    border-radius: 999px;
    background: var(--bg-soft, #f7f9fa);
    font-size: .73rem;
    white-space: nowrap;
  }

  /* Without hover, a borderless subtle button reads as plain text. Give the
     task actions an outline so they are recognisably tappable. */
  .personal-task-toolbar .btn-subtle,
  .personal-task-actions .btn-subtle {
    border-color: var(--border);
    background: #fff;
    color: var(--navy);
  }

  .entrance-fee-total { padding: 12px 0 2px; }
  .entrance-fee-total strong { font-family: var(--font-display, inherit); font-size: 1.05rem; color: var(--navy); }

  /* The personal-task modals put their buttons in `.form-actions`, which the
     shared modal breakpoint does not cover. Stack them full width so the
     primary action is not pushed past the modal edge. */
  .personal-task-form-actions {
    display: flex;
    flex-direction: column-reverse;
    gap: 8px;
    margin-top: 16px;
  }
  .personal-task-form-actions .btn { width: 100%; min-height: 44px; justify-content: center; }
  .personal-task-template-options { max-height: 40vh; }
  .personal-task-template-option { min-height: 46px; }

  /* --- Guide's own entrance-cash envelope ---------------------------------- */
  .guide-entrance-cash-card .card-head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .guide-entrance-cash-actions .btn { width: 100%; min-height: 46px; justify-content: center; }
  .guide-entrance-cash-actions input[type="number"] {
    min-height: 46px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 16px; /* stops iOS Safari zooming in on focus */
  }
}

/* Narrowest phones: the card-head toolbar stops sharing a line. The two
   management row actions still fit side by side, so they stay there. */
@media (max-width: 380px) {
  .personal-task-toolbar { grid-template-columns: 1fr; }
  .entrance-fee-row .body .pri,
  .entrance-cash-obligation-row .body .pri,
  .tomorrow-cash-row .body .pri { font-size: .95rem; }
}

/* ---------------------------------------------------------------------------
   Mobile layout audit, 2026-09-06
   Presentation only: preserve dashboard actions, permissions and desktop.
   --------------------------------------------------------------------------- */
@media (max-width: 700px) {
  /* A single-column dashboard needs a visible rhythm between operational jobs. */
  .dash-grid { gap: 20px; }
  .dash-grid > .card,
  .dash-grid > .dash-fold,
  .tomorrow-preparation-grid > .card { min-width: 0; }
  .dashboard-assigned-shift-section { margin-bottom: 32px; }
  .dashboard-section-heading { margin: 4px 0 14px; padding: 0 2px 12px; border-bottom: 1px solid var(--border); }
  .dashboard-role-divider { margin-top: 46px; }
  .tomorrow-preparation-section { margin: 46px 0 34px; }
  .tomorrow-preparation-grid { gap: 20px; }
  .field-shift-overview,
  .desk-shift-bar,
  .dashboard-assigned-shift-section > .card,
  .dashboard-assigned-shift-section > .dash-fold { margin-bottom: 20px; }

  /* CRM: let the search, filters and profile controls use the full phone width. */
  .crm-toolbar { align-items: stretch; gap: 10px; margin-bottom: 20px; }
  .crm-toolbar .search-mini { width: 100%; min-width: 0; min-height: 46px; }
  .crm-toolbar .search-mini input { min-width: 0; font-size: 16px; }
  .crm-toolbar .chip-row { width: 100%; flex-wrap: nowrap; overflow-x: auto; padding: 2px 0 5px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
  .crm-toolbar .chip { flex: 0 0 auto; min-height: 40px; }
  .detail-head { margin-bottom: 22px; }
  .detail-head .nm-stack { min-width: 0; }
  .detail-head .nm-stack .ml { overflow-wrap: anywhere; }
  .detail-head .actions { display: grid; grid-template-columns: 1fr; gap: 8px; }
  .detail-head .actions .btn { width: 100%; min-height: 46px; justify-content: center; white-space: normal; text-align: center; }
  .tabs { margin-bottom: 22px; scrollbar-width: thin; }
  .tabs .tab { min-height: 44px; padding: 11px 14px; }
  .table-wrap { border-radius: var(--radius-md); }
  .table-wrap::after { content: 'Swipe to view all columns'; display: block; padding: 7px 12px; border-top: 1px solid var(--border-soft); color: var(--text-muted); background: var(--bg-soft); font-size: .7rem; font-weight: 600; letter-spacing: .03em; }
  .profile-grid { gap: 10px; }
  .section-row { align-items: flex-start; gap: 12px; }
  .section-row > :first-child { min-width: 0; }
  .section-row .btn { flex: 0 0 auto; min-height: 44px; }
  .crm-cert-list .gear-row,
  .crm-gear-list .gear-row { align-items: flex-start; flex-wrap: wrap; }
  .crm-cert-list .gear-row .body,
  .crm-gear-list .gear-row .body { min-width: calc(100% - 72px); }
  .crm-cert-list .gear-row .btn,
  .crm-gear-list .gear-row .btn { min-height: 42px; }

  /* Readiness belongs inside its After the trip row, never as a loose control. */
  .dash-modal-list { gap: 0; margin-top: 14px; }
  .field-participant-state {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: start;
    column-gap: 10px;
    row-gap: 10px;
    min-width: 0;
    padding: 16px 0;
  }
  .field-participant-state:hover { margin: 0; padding: 16px 0; }
  .field-participant-state .ico-pill { width: 36px; height: 36px; }
  .field-participant-state .body { grid-column: 2; min-width: 0; }
  .field-participant-state .body .pri { font-size: .98rem; line-height: 1.28; overflow-wrap: anywhere; }
  .field-participant-state .body .sub { font-size: .79rem; line-height: 1.42; margin-top: 4px; overflow-wrap: anywhere; }
  .field-participant-state .end { grid-column: 2; width: 100%; margin: 0; text-align: left; }
  .field-participant-state .manifest-actions { justify-content: flex-start; gap: 8px; width: 100%; }
  .field-participant-state .manifest-actions > .dash-chip { min-height: 30px; }
  .field-participant-state .manifest-actions > .btn { min-height: 44px; }
  .field-ready-next-day-row {
    margin: 8px 0 0;
    padding: 16px 12px;
    border: 1px solid rgba(20, 119, 151, .22);
    border-radius: 12px;
    background: rgba(10, 89, 110, .04);
  }
  .field-ready-next-day-row:hover { margin: 8px 0 0; padding: 16px 12px; }
  .field-ready-next-day-row .manifest-actions { display: grid; grid-template-columns: 1fr; }
  .field-ready-next-day-row .field-ready-next-day { grid-row: 2; width: 100%; min-height: 48px; justify-content: center; white-space: normal; text-align: center; }

  /* Long equipment names, picker rows and list actions stay readable and tappable. */
  .field-rental-item { align-items: flex-start; padding: 12px; min-height: 52px; }
  .field-rental-item-copy strong { overflow: visible; text-overflow: clip; white-space: normal; overflow-wrap: anywhere; }
  .field-rental-item-copy span { overflow-wrap: anywhere; }
}

@media (max-width: 390px) {
  .dash-grid, .tomorrow-preparation-grid { gap: 18px; }
  .field-participant-state { grid-template-columns: 32px minmax(0, 1fr); column-gap: 8px; }
  .field-participant-state .ico-pill { width: 32px; height: 32px; }
  .section-row { flex-direction: column; }
  .section-row .btn { width: 100%; justify-content: center; }
}

/* Participant readiness: keep names/status readable and give actions their own
   full-width touch area on phones instead of squeezing five controls beside text. */
.desk-readiness-row { align-items: flex-start; }
.desk-readiness-row.is-ready { background: var(--green-50, #ecfdf5); border-radius: 8px; box-shadow: inset 3px 0 0 var(--green, #10b981); padding-left: 10px; }
.desk-paperwork-approved { color: #087e43; background: var(--green-50, #ecfdf5); border: 1px solid #a7e7cb; }
.desk-paperwork-approve.is-ready { background: var(--green, #10b981); border-color: var(--green, #10b981); color: #fff; }
.desk-paperwork-approve.is-ready:hover { background: #059669; border-color: #059669; }
.desk-paperwork-view-waiver { background: var(--green-50, #ecfdf5); border-color: #a7e7cb; color: #087e43; }
.desk-readiness-row .body { overflow-wrap: anywhere; }
.desk-readiness-row .body .pri { font-weight: 650; line-height: 1.3; }
.desk-readiness-row .body .sub { line-height: 1.45; }
.desk-readiness-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.desk-readiness-actions .btn { white-space: nowrap; }
.desk-paperwork-approved { display: inline-flex; justify-content: center; max-width: 100%; white-space: normal; overflow-wrap: anywhere; line-height: 1.35; }
@media (max-width: 620px) {
  .desk-readiness-row { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: start; column-gap: 10px; row-gap: 10px; padding: 14px 0; }
  .desk-readiness-row .ico-pill { grid-column: 1; grid-row: 1; }
  .desk-readiness-row .body { grid-column: 2; grid-row: 1; min-width: 0; }
  .desk-readiness-row .body .pri { font-size: 1rem; }
  .desk-readiness-row .body .sub { font-size: .8rem; overflow-wrap: anywhere; }
  .desk-readiness-row > .end { grid-column: 1 / -1; width: 100%; margin: 0; text-align: left; }
  .desk-readiness-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; justify-content: stretch; }
  .desk-readiness-actions .btn { width: 100%; min-width: 0; min-height: 42px; padding: 8px 6px; justify-content: center; white-space: normal; text-align: center; line-height: 1.25; }
  .desk-readiness-actions .desk-paperwork-approve { grid-column: 1 / -1; min-height: 46px; }
  .desk-readiness-actions .desk-paperwork-approved { grid-column: 1 / -1; justify-self: stretch; }
}

/* ===================================================================== */
/* Desk Shift: foldable sections and the compact shift checklist          */
/* A desk day is one long operational page. Sections fold once they are   */
/* handled, and the checklist leads with what is still outstanding. This  */
/* is presentation only — every panel and control stays one tap away.     */
/* ===================================================================== */

.dash-fold { display: block; min-width: 0; margin-bottom: 16px; }
.dash-fold:last-child { margin-bottom: 0; }
.dash-grid > .dash-fold { margin-bottom: 0; }
.dash-fold > .card { height: auto; }

/* The grid places cards by column class; a folded card carries that class
   on its wrapper instead, so spans are unchanged. */
.dash-grid > .dash-fold { grid-column: span 6; }
.dash-grid > .dash-fold.col-12 { grid-column: span 12; }
.dash-grid > .dash-fold.col-4  { grid-column: span 4; }
.dash-grid > .dash-fold.col-8  { grid-column: span 8; }
@media (max-width: 1200px) {
  .dash-grid > .dash-fold,
  .dash-grid > .dash-fold.col-4,
  .dash-grid > .dash-fold.col-8 { grid-column: span 12; }
}
@media (max-width: 700px) {
  .dash-grid > .dash-fold,
  .dash-grid > .dash-fold.col-4,
  .dash-grid > .dash-fold.col-8,
  .dash-grid > .dash-fold.col-12 { grid-column: 1 / -1; }
}

.dash-fold-head {
  position: relative;
  padding-right: 24px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  border-radius: var(--radius-sm, 8px);
}
.dash-fold-head:hover { background: var(--bg-soft, #f7f9fa); }
.dash-fold-head:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
/* Pinned rather than placed in the flow, so an existing card head keeps the
   exact title/meta layout it has today. */
.dash-fold-caret {
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: .8rem;
  line-height: 1;
  transition: transform .15s ease;
}
.dash-fold.is-folded .dash-fold-caret { transform: translateY(-50%) rotate(-90deg); }
.dash-fold.is-folded > .card > *:not(.card-head) { display: none !important; }
.dash-fold.is-folded > .card > .card-head { margin-bottom: 0; }
.dash-fold.is-folded > .card { padding-bottom: 14px; }

/* --- Shift progress + section controls strip ---------------------------- */
.desk-shift-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding: 13px 16px;
  background: var(--surface, #fff);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 14px);
  box-shadow: var(--shadow-sm);
}
.desk-shift-bar-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.desk-shift-bar-title {
  font-size: .62rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-muted);
}
.desk-shift-bar-count { font-size: .92rem; font-weight: 600; color: var(--navy); }
.desk-shift-bar.is-complete .desk-shift-bar-count { color: var(--green); }
.desk-shift-bar-actions { display: flex; gap: 8px; flex: 0 0 auto; }

.desk-progress-track {
  flex: 1 1 180px;
  min-width: 120px;
  height: 8px;
  border-radius: 999px;
  background: var(--border-soft, #eef0f3);
  overflow: hidden;
}
.desk-progress-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--blue) 0%, var(--green) 100%);
  transition: width .25s ease;
}

/* --- Compact shift checklist -------------------------------------------- */
.desk-checklist-card .desk-checklist-headcount { font-weight: 600; }
.desk-checklist-card.is-complete .desk-checklist-headcount { color: var(--green); }
.desk-checklist-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 2px 0 10px;
}
.desk-checklist-progress-side { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.desk-progress-label { font-size: .74rem; font-weight: 600; color: var(--text-muted); white-space: nowrap; }

.desk-checklist-period-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; padding: 12px 0 2px;
}
.desk-checklist-period-head h4 {
  margin: 0;
  font-size: .68rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-muted);
}

.desk-checklist-group { border-top: 1px solid var(--border-soft); }
.desk-checklist-group.is-empty { display: none; }
.desk-checklist-group-head {
  display: flex; align-items: center; gap: 9px;
  width: 100%; padding: 9px 4px 9px 0;
  background: none; border: 0; cursor: pointer;
  font: inherit; text-align: left; color: var(--navy);
}
.desk-checklist-group-head:hover .desk-checklist-group-name { color: var(--blue); }
.desk-checklist-group-head:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 6px; }
.desk-checklist-group-name { flex: 1; min-width: 0; font-size: .86rem; font-weight: 600; }
.desk-checklist-group-count { flex: 0 0 auto; font-size: .72rem; font-weight: 600; color: var(--text-muted); }
.desk-checklist-group.is-complete .desk-checklist-group-count { color: var(--green); }
.desk-checklist-caret {
  flex: 0 0 auto; width: 12px;
  font-size: .7rem; line-height: 1; color: var(--text-muted);
  transition: transform .15s ease;
}
.desk-checklist-group.is-folded .desk-checklist-caret { transform: rotate(-90deg); }
.desk-checklist-group.is-folded .desk-checklist-group-body { display: none; }
.desk-checklist-group-body { padding: 0 0 6px 21px; }

.desk-check-row { display: flex; align-items: flex-start; gap: 10px; padding: 5px 0; }
.desk-check-row.is-hidden { display: none; }
.desk-check-row.is-saving { opacity: .55; }
.desk-check-toggle {
  position: relative;
  flex: 0 0 auto;
  width: 20px; height: 20px; margin-top: 1px;
  border-radius: 6px;
  border: 1.5px solid var(--line);
  background: #fff;
  display: grid; place-items: center;
  cursor: pointer;
  font-size: .72rem; font-weight: 700; line-height: 1;
  color: transparent;
  transition: background .12s, border-color .12s, color .12s;
}
/* A comfortable tap target without making the row taller. */
.desk-check-toggle::before { content: ""; position: absolute; inset: -11px; }
.desk-check-toggle:hover { border-color: var(--blue); }
.desk-check-toggle:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.desk-check-toggle.done { background: var(--green); border-color: var(--green); color: #fff; }
.desk-check-toggle[disabled] { cursor: default; opacity: .6; }
.desk-check-body { flex: 1; min-width: 0; }
.desk-check-title { font-size: .87rem; line-height: 1.35; color: var(--navy); }
.desk-check-row.is-done .desk-check-title { color: var(--text-soft); text-decoration: line-through; }
.desk-check-sub { font-size: .72rem; color: var(--text-muted); margin-top: 1px; }

/* --- Phone / tablet ------------------------------------------------------ */
@media (max-width: 700px) {
  .desk-shift-bar { padding: 12px; gap: 10px; }
  .desk-shift-bar-text { flex: 1 1 100%; }
  .desk-progress-track { flex: 1 1 100%; }
  .desk-shift-bar-actions { width: 100%; }
  .desk-shift-bar-actions .btn { flex: 1 1 0; min-height: 42px; justify-content: center; }
  .desk-checklist-progress-side { width: 100%; justify-content: space-between; }
  .desk-checklist-filter { min-height: 40px; }
  .dash-fold-head { min-height: 46px; }
  .desk-checklist-group-head { min-height: 46px; }
  .desk-checklist-group-body { padding-left: 8px; }
  .desk-check-row { padding: 8px 0; }
  .desk-check-toggle { width: 24px; height: 24px; margin-top: 0; }
  .desk-check-title { font-size: .9rem; }
}

/* ---------------------------------------------------------------------------
   Rostered DAY OFF — dashboard statement (2026-08-24)
   Purely presentational and additive. Nothing here changes an existing rule.
   --------------------------------------------------------------------------- */
.dashboard-day-off-hero {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 16px;
  padding: 22px 24px;
  border-left: 6px solid var(--teal, #12a594);
  background: linear-gradient(135deg, rgba(18, 165, 148, 0.14), rgba(18, 165, 148, 0.04) 60%, transparent);
}
.dashboard-day-off-mark {
  font-size: 44px;
  line-height: 1;
  flex: 0 0 auto;
}
.dashboard-day-off-copy { min-width: 0; }
.dashboard-day-off-kicker {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal, #12a594);
  margin-bottom: 4px;
}
.dashboard-day-off-hero h2 {
  margin: 0 0 8px;
  font-size: 30px;
  line-height: 1.15;
  font-weight: 800;
}
.dashboard-day-off-hero p {
  margin: 0 0 6px;
  color: var(--text-muted, #6b7c86);
  font-size: 14px;
  line-height: 1.5;
}
.dashboard-day-off-hero p:last-child { margin-bottom: 0; }
.dashboard-day-off-note {
  white-space: pre-wrap;
  color: var(--text, #143038) !important;
  font-weight: 500;
}
.dashboard-day-off-hint { font-size: 12.5px; opacity: 0.85; }
.dashboard-day-off-actions {
  display: flex;
  justify-content: flex-end;
  margin: -6px 0 16px;
}
.list-row.day-off-row .pri { font-weight: 700; letter-spacing: 0.02em; }
.ico-pill.day-off-pill { background: rgba(18, 165, 148, 0.14); }
@media (max-width: 700px) {
  .dashboard-day-off-hero { padding: 18px 16px; gap: 12px; }
  .dashboard-day-off-mark { font-size: 34px; }
  .dashboard-day-off-hero h2 { font-size: 24px; }
  .dashboard-day-off-actions { justify-content: stretch; }
  .dashboard-day-off-actions .btn { width: 100%; }
}

/* ---------- Operational alerts ---------- */
.alert-list { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.alert-card {
  background: var(--surface); border: 1px solid var(--border);
  border-left: 4px solid var(--grey); border-radius: var(--radius-md);
  padding: 14px 16px; box-shadow: var(--shadow-xs);
}
.alert-card.sev-critical { border-left-color: var(--red); }
.alert-card.sev-warning  { border-left-color: var(--amber); }
.alert-card.sev-info     { border-left-color: var(--blue); }
.alert-card-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.alert-card-head .alert-title { margin: 0; font-size: 1rem; font-weight: 600; color: var(--navy); flex: 1 1 auto; }
.alert-ack-btn { flex: 0 0 auto; }
.alert-chip {
  flex: 0 0 auto; font-size: 0.62rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--bg-soft); color: var(--text-muted);
}
.alert-chip.sev-critical { color: var(--red);   border-color: #f6c9c9; background: var(--red-50); }
.alert-chip.sev-warning  { color: #b07700;      border-color: #f2d894; background: var(--amber-50); }
.alert-chip.sev-info     { color: var(--blue);  border-color: var(--blue-soft); background: var(--blue-50); }
.alert-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; }
.alert-meta-item { font-size: 0.74rem; color: var(--text-muted); }
.alert-body { margin: 10px 0 0 0; font-size: 0.86rem; color: var(--text); white-space: pre-wrap; }
.alert-context { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 10px; }
.alert-context span { font-size: 0.72rem; color: var(--text-soft); }
.alert-ack {
  margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border);
  font-size: 0.76rem; color: var(--text-muted);
}
.alert-ack strong { color: var(--green); }
.alert-ack-note { margin-top: 4px; color: var(--text); white-space: pre-wrap; }
.alert-empty {
  background: var(--surface); border: 1px dashed var(--line);
  border-radius: var(--radius-md); padding: 28px 20px; text-align: center;
}
.alert-empty h3 { margin: 0 0 6px 0; font-size: 1rem; font-weight: 600; color: var(--navy); }
.alert-empty p { margin: 0; font-size: 0.84rem; color: var(--text-muted); }
.alert-ack-box { margin-top: 22px; }
.alert-ack-box > summary {
  cursor: pointer; font-size: 0.74rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted);
  padding: 8px 0;
}
.alert-ack-box > summary:hover { color: var(--navy); }
.alert-ack-box .alert-card { background: var(--bg-soft); }
.alert-error { margin-bottom: 14px; }
@media (max-width: 640px) {
  .alert-card-head .alert-title { flex-basis: 100%; order: 3; }
  .alert-ack-btn { margin-left: auto; }
}

/* --- Expenses: admin-only void of an accidentally duplicated entry --- */
/* Scoped to the void dialog so the shared .btn-danger used by other views
   keeps its current appearance. */
.btn-danger-subtle {
  color: var(--red); border-color: var(--line);
}
.btn-danger-subtle:hover { background: var(--red-50); border-color: var(--red); color: var(--red); }
.void-duplicate-form .btn-danger { background: var(--red); color: #fff; border-color: var(--red); }
.void-duplicate-form .btn-danger:hover { background: #dc2626; }
.void-duplicate-form .btn-danger[disabled] { opacity: .45; cursor: not-allowed; background: var(--red); }
.void-duplicate-target {
  background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: var(--radius-md); padding: 12px 14px; margin-bottom: 14px;
}
.void-duplicate-amount { font-size: 1.15rem; font-weight: 700; color: var(--navy); }
.void-duplicate-meta { font-size: 0.78rem; color: var(--text-muted); margin-top: 2px; }
.void-duplicate-notes { font-size: 0.78rem; color: var(--text); margin-top: 6px; white-space: pre-wrap; }
.void-duplicate-effects {
  margin: 0 0 14px 0; padding: 12px 14px 12px 30px;
  background: var(--red-50); border: 1px solid var(--red);
  border-radius: var(--radius-md);
  font-size: 0.8rem; color: var(--text); line-height: 1.5;
}
.void-duplicate-effects li + li { margin-top: 5px; }
.void-duplicate-ack {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 0.8rem; color: var(--text); margin: 4px 0 12px 0; cursor: pointer;
}
.void-duplicate-ack input { margin-top: 2px; flex: 0 0 auto; }
.void-duplicate-counter { margin-top: 4px; }

/* Voided duplicates stay visible to management but must never read as live
   expenses: collapsed by default, muted, and struck through. */
.voided-expense-box { margin-top: 22px; }
.voided-expense-box > summary {
  cursor: pointer; font-size: 0.74rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted);
  padding: 8px 0;
}
.voided-expense-box > summary:hover { color: var(--navy); }
.voided-expense-note {
  display: block; text-transform: none; letter-spacing: 0;
  font-weight: 400; font-size: 0.74rem; color: var(--text-muted); margin-top: 3px;
}
.voided-expense-table tbody tr.voided-expense-row td { color: var(--text-muted); }
.voided-expense-row .voided-expense-amount { text-decoration: line-through; }

/* Dashboard pending-balance collection: make the chosen tender unmistakable. */
.pending-payment-collect-modal .checkout-methods .pay-method.active,
.pending-payment-collect-modal .checkout-methods .pay-method.active:hover {
  color: #073846;
  background: #d9f1e8;
  border: 2px solid #087f5b;
  box-shadow: 0 0 0 3px rgba(8, 127, 91, .18), inset 0 0 0 1px rgba(8, 127, 91, .12);
}
.pending-payment-collect-modal .checkout-methods .pay-method.active .pm-nm { color: #073846; }
.pending-payment-collect-modal .checkout-methods .pay-method.active .pm-cur { color: #17634d; }
.pending-payment-collect-modal .checkout-methods .pay-method.active::after {
  content: '✓ Selected';
  align-self: flex-end;
  margin-top: 3px;
  color: #075c42;
  font-size: .72rem;
  font-weight: 700;
}
.pending-payment-collect-modal .checkout-methods .pay-method:focus-visible {
  outline: 3px solid #146b86;
  outline-offset: 2px;
}