/* AFPD Fleet - colors from the department patch and badge:
   navy, silver and white, with flag red only as a small accent. */
:root {
  --primary: #1B3A6B;
  --primary-dark: #102544;
  --primary-soft: #EAF0F8;
  --primary-ring: rgba(27, 58, 107, 0.18);
  --silver: #C5CBD3;
  --accent: #D0313F;
  --bg: #BEC3CA;
  --card: #E1E4E8;
  --surface: #D2D6DB;
  --dark-gray: #3A3F47;
  --text: #16202F;
  --muted: #64707F;
  --border: #A9AFB8;
  --danger: #D0313F;
  --success: #2F7D4F;
  --warning: #A86400;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(16, 37, 68, 0.05), 0 4px 16px rgba(16, 37, 68, 0.04);
  --sidebar-w: 248px;
  --topbar-h: 60px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

.view { min-height: 100vh; }
.hidden { display: none !important; }
a { color: var(--primary); }
h2, h3 { color: var(--text); letter-spacing: -0.01em; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.05rem; margin-bottom: 0.75rem; }
small { font-size: 0.82rem; }

.ic {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

/* ===== LOGIN ===== */
.login-bg {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(255,255,255,0.08), transparent 60%),
    linear-gradient(160deg, var(--primary) 0%, var(--primary-dark) 100%);
  z-index: -1;
}
.login-card {
  max-width: 400px;
  margin: 0 auto;
  padding: 2.25rem 2rem;
  background: var(--card);
  border-radius: 20px;
  box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.35);
  position: relative;
  top: 12vh;
}
.login-header { text-align: center; margin-bottom: 1.75rem; }
.badge-logo {
  display: inline-block;
  background: var(--primary);
  color: white;
  font-weight: 700;
  font-size: 1rem;
  padding: 0.45rem 1.1rem;
  border-radius: 10px;
  letter-spacing: 2px;
  margin-bottom: 1rem;
  box-shadow: inset 0 0 0 2px var(--silver);
}
.login-header h1 { font-size: 1.5rem; color: var(--text); margin-bottom: 0.25rem; letter-spacing: -0.02em; }
.login-header p { color: var(--muted); font-size: 0.95rem; }
.input-group { margin-bottom: 1.1rem; }
.input-group label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--muted); margin-bottom: 0.4rem; }
.login-btn {
  width: 100%;
  padding: 0.85rem;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  margin-top: 0.25rem;
  transition: background 0.15s;
}
.login-btn:hover { background: var(--primary-dark); }
.login-footer { text-align: center; margin-top: 1.5rem; font-size: 0.8rem; color: var(--muted); }

/* ===== FORM CONTROLS ===== */
input, textarea, select {
  width: 100%;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 0.95rem;
  color: var(--text);
  background: var(--surface);
  transition: border-color 0.15s, box-shadow 0.15s;
}
input[type="checkbox"] { width: auto; accent-color: var(--primary); }
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-ring);
}
.field { margin-bottom: 1rem; }
.field label { display: block; font-size: 0.82rem; font-weight: 600; margin-bottom: 0.35rem; color: var(--muted); }

.search-input {
  width: 100%;
  padding: 0.75rem 1rem 0.75rem 2.6rem;
  margin-bottom: 1rem;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364707F' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 0.9rem center / 18px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.55rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 500;
  transition: background 0.15s, border-color 0.15s;
}
.btn:hover { background: var(--bg); border-color: var(--silver); }
.btn.primary { background: var(--primary); color: #fff; border-color: var(--primary); font-weight: 600; }
.btn.primary:hover { background: var(--primary-dark); }
.btn.ghost { background: transparent; border: none; color: var(--primary); padding: 0.25rem 0; font-weight: 600; }
.btn.ghost:hover { background: transparent; text-decoration: underline; }
.btn.full { width: 100%; padding: 0.8rem; }
.btn.small { padding: 0.4rem 0.8rem; font-size: 0.82rem; }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
}
.icon-btn:hover { background: rgba(127, 140, 160, 0.14); }

/* ===== SIDEBAR ===== */
.sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: calc(-1 * var(--sidebar-w) - 20px);
  width: var(--sidebar-w);
  background: var(--primary-dark);
  color: #D5DCE6;
  z-index: 200;
  transition: left 0.25s ease;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  padding-top: env(safe-area-inset-top, 0);
}
.sidebar.open { left: 0; box-shadow: 0 0 40px rgba(0,0,0,0.3); }
.sidebar-header {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 1.25rem 1.1rem 1.1rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.sidebar-logo { width: 44px; height: auto; }
.brand-title { font-weight: 700; color: #fff; font-size: 1.02rem; letter-spacing: -0.01em; }
.brand-sub { font-size: 0.75rem; color: #93A1B5; }

.nav { padding: 0.75rem 0.6rem; display: flex; flex-direction: column; gap: 2px; }
.nav-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0.8rem;
  color: #C3CCD9;
  text-decoration: none;
  border-radius: 10px;
  font-size: 0.93rem;
  font-weight: 500;
  transition: background 0.15s, color 0.15s;
}
.nav-link .ic { width: 19px; height: 19px; opacity: 0.85; }
.nav-link:hover { background: rgba(255,255,255,0.06); color: #fff; }
.nav-link.active { background: rgba(255,255,255,0.12); color: #fff; box-shadow: inset 3px 0 0 var(--accent); }
.nav-link.active .ic { opacity: 1; }

.sidebar-user {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.9rem 1rem calc(0.9rem + env(safe-area-inset-bottom, 0));
  border-top: 1px solid rgba(255,255,255,0.08);
}
.sidebar-user .icon-btn { color: #C3CCD9; margin-left: auto; }
.sidebar-user .icon-btn:hover { background: rgba(255,255,255,0.08); color: #fff; }
.sidebar-user-text { min-width: 0; }
#user-name { color: #fff; font-weight: 600; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.role-text { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: #93A1B5; }
.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--silver);
  color: var(--primary-dark);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.scrim {
  position: fixed;
  inset: 0;
  background: rgba(10, 20, 35, 0.45);
  z-index: 150;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.scrim.show { opacity: 1; pointer-events: auto; }

/* ===== TOP BAR ===== */
.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: var(--topbar-h);
  padding: 0.6rem 1rem;
  padding-top: calc(0.6rem + env(safe-area-inset-top, 0));
  background: rgba(58, 63, 71, 0.96);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
}
.topbar h1 { flex: 1; font-size: 1.15rem; font-weight: 700; letter-spacing: -0.02em; color: var(--text); }
#menu-btn { color: var(--text); margin-left: -0.35rem; }

/* ===== CONTENT ===== */
.main-content {
  padding: 1.25rem 1rem 6rem;
  max-width: 1100px;
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  margin-bottom: 1rem;
  box-shadow: var(--shadow);
}
.card > p { margin-bottom: 0.35rem; }

.dash-banner {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  border: none;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.dash-banner::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--accent);
}
.dash-banner img { width: 76px; height: auto; flex-shrink: 0; }
.dash-banner h2 { font-size: 1.2rem; margin-bottom: 0.15rem; color: #fff; }
.dash-banner p { color: #C3CCD9; font-size: 0.92rem; }

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.stat-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  box-shadow: var(--shadow);
}
.stat-card .label { color: var(--muted); font-size: 0.8rem; font-weight: 600; }
.stat-card .number { font-size: 1.9rem; font-weight: 700; color: var(--text); letter-spacing: -0.03em; line-height: 1.2; margin: 0.15rem 0; }
.stat-card .sub { color: var(--muted); font-size: 0.78rem; }
button.stat-card {
  font: inherit;
  color: inherit;
  text-align: left;
  width: 100%;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
button.stat-card:hover { border-color: var(--silver); box-shadow: 0 4px 18px rgba(16, 37, 68, 0.1); transform: translateY(-1px); }
button.stat-card:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--primary-ring); }
.stat-card.is-warn .number { color: var(--warning); }
.stat-card.is-danger .number { color: var(--danger); }

.list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 0.75rem;
  margin: 0 -0.75rem;
  border-bottom: 1px solid var(--border);
}
.list-item:last-child { border-bottom: none; }
.list-item[data-id], .list-item .officer-vehicle { cursor: pointer; }
.list-item[data-id]:hover { background: var(--bg); }
.list-item small { color: var(--muted); }
.officer-vehicle { padding: 0.15rem 0; }

.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.9rem 1.25rem;
  margin: 1rem 0 0.25rem;
}
.detail-grid dt { font-size: 0.75rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.detail-grid dd { font-size: 0.95rem; margin-top: 0.1rem; word-break: break-word; }

.badge {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 600;
  white-space: nowrap;
  background: var(--bg);
  color: var(--muted);
}
.badge.success { background: #E5F3EA; color: #1F6A3F; }
.badge.warning { background: #FBF0DC; color: #7A4A00; }
.badge.danger { background: #FBE4E6; color: #A51F2D; }
.badge.info { background: var(--primary-soft); color: var(--primary); }

/* ===== BOTTOM NAV (phones) ===== */
.bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  display: flex;
  justify-content: space-around;
  padding: 0.35rem 0.25rem calc(0.35rem + env(safe-area-inset-bottom, 0));
  background: rgba(58, 63, 71, 0.97);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-top: 1px solid var(--border);
}
.bottom-nav button {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  background: none;
  border: none;
  color: var(--muted);
  font: inherit;
  font-size: 0.68rem;
  font-weight: 500;
  padding: 0.35rem 0;
  cursor: pointer;
}
.bottom-nav button .ic { width: 22px; height: 22px; }
.bottom-nav button.active { color: var(--primary); font-weight: 700; }
.bottom-nav button.active .ic { stroke-width: 2.2; }

/* ===== PHONES ===== */
@media (max-width: 767px) {
  .login-card { top: 6vh; margin: 1rem; padding: 1.75rem 1.25rem; }
  .main-content { padding: 1rem 0.85rem 6.5rem; }
  .card { padding: 1rem; }
  .stats-grid { gap: 0.6rem; }
  .stat-card .number { font-size: 1.6rem; }
  .list-item { flex-direction: column; align-items: flex-start; gap: 0.4rem; }
  .list-item > div[style*="text-align:right"] { text-align: left !important; }
  input, textarea, select { font-size: 16px; } /* stops iPhone zooming into fields */
}

/* ===== DESKTOP ===== */
@media (min-width: 768px) {
  .sidebar { left: 0; box-shadow: none; }
  .scrim { display: none; }
  .shell { margin-left: var(--sidebar-w); }
  .topbar { padding: 0.75rem 1.75rem; }
  .main-content { padding: 1.5rem 1.75rem 2.5rem; }
  .bottom-nav { display: none; }
  .stats-grid { grid-template-columns: repeat(4, 1fr); gap: 1rem; }
  #menu-btn, #top-logout { display: none; }
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.4rem 0.5rem 0.4rem 0.85rem;
  border-radius: 999px;
  margin-bottom: 0.9rem;
}
.filter-chip button {
  border: none;
  background: var(--surface);
  color: var(--primary);
  font: inherit;
  font-size: 0.8rem;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  cursor: pointer;
}

.tabs {
  display: inline-flex;
  gap: 0.25rem;
  padding: 0.25rem;
  background: #E7EBF0;
  border-radius: 12px;
  margin-bottom: 1rem;
}
.tab {
  border: none;
  background: none;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--muted);
  padding: 0.45rem 1rem;
  border-radius: 9px;
  cursor: pointer;
}
.tab.active { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(16, 37, 68, 0.12); }
.tab-count {
  display: inline-block;
  min-width: 1.4rem;
  margin-left: 0.3rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 0.75rem;
}
.cleanup { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.cleanup small { color: var(--muted); }
.cleanup-row { display: flex; gap: 0.5rem; align-items: center; }
.cleanup-row input { width: auto; }

/* ===== VEHICLE + OFFICER ROWS: each row is its own defined box ===== */
.row-list { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1rem; }
.row-list .list-item {
  margin: 0;
  padding: 0.9rem 1rem 0.9rem 1.1rem;
  background: var(--card);
  border: 1px solid #CDD4DE;
  border-left: 4px solid var(--primary);
  border-radius: var(--radius-sm);
  box-shadow: 0 1px 3px rgba(16, 37, 68, 0.08);
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.row-list .list-item:last-child { border-bottom: 1px solid #CDD4DE; }
.row-list .list-item[data-id]:hover {
  background: var(--card);
  border-color: var(--silver);
  border-left-color: var(--accent);
  box-shadow: 0 4px 14px rgba(16, 37, 68, 0.12);
  transform: translateY(-1px);
}
.row-list .officer-vehicle {
  padding: 0.3rem 0.5rem;
  margin-top: 0.2rem;
  border-radius: 8px;
  background: var(--primary-soft);
}
.row-list .officer-vehicle:hover { background: #DCE5F2; }
.row-list > p { padding: 1rem; }

/* ===== DASHBOARD: more defined boxes on the darker background ===== */
.card, .stat-card { box-shadow: 0 1px 3px rgba(16, 37, 68, 0.10), 0 4px 14px rgba(16, 37, 68, 0.06); }
.stat-card { border-left: 4px solid var(--primary); }
.stat-card.is-warn { border-left-color: var(--warning); }
.stat-card.is-danger { border-left-color: var(--danger); }
.badge:not(.success):not(.warning):not(.danger):not(.info):not(.owner):not(.reserve) { background: #EEF1F5; }
.btn:hover { background: #EEF1F5; }
.row-list .list-item, .row-list .list-item:last-child { border-color: var(--border); border-left-color: var(--primary); }

/* ===== ISSUE PHOTOS ===== */
.photo-btn { display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer; }
.photo-previews { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.6rem; align-items: center; }
.photo-thumb { position: relative; width: 84px; height: 84px; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border); background: #EEF1F5; display: block; }
.photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-thumb.small { width: 56px; height: 56px; }
.photo-thumb button { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border-radius: 50%; border: none; background: rgba(16, 37, 68, 0.75); color: #fff; font-size: 16px; line-height: 24px; cursor: pointer; padding: 0; }

/* ===== CLICKABLE ROWS (dashboard Recent Issues) ===== */
.list-item.clickable { cursor: pointer; border-radius: var(--radius-sm); transition: background 0.15s; }
.list-item.clickable:hover, .list-item.clickable:focus-visible { background: #EEF1F5; outline: none; }
.row-end { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
.chevron { color: var(--muted); font-size: 1.4rem; line-height: 1; }
@media (max-width: 767px) {
  .list-item.clickable { flex-direction: row; align-items: center; }
}

/* Site Owner label (Byron and Scotty) */
.badge.owner { background: var(--primary); color: #fff; }

/* ===== REPORT ISSUE: vehicle picker ===== */
.vpick-list { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.5rem; max-height: 340px; overflow-y: auto; }
.vpick-item, .vpick-selected {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  width: 100%; text-align: left; font: inherit; color: inherit;
  background: var(--card); border: 1px solid var(--border); border-left: 4px solid var(--primary);
  border-radius: var(--radius-sm); padding: 0.65rem 0.85rem; cursor: pointer;
}
.vpick-item small, .vpick-selected small { display: block; color: var(--muted); }
.vpick-item:hover { background: #EEF1F5; }
.vpick-selected { cursor: default; background: var(--primary-soft); }
.check { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 500; cursor: pointer; }
.check input { width: auto; }
.alert-error { background: #FBE4E6; color: #A51F2D; border-radius: var(--radius-sm); padding: 0.6rem 0.8rem; margin-bottom: 0.75rem; font-size: 0.9rem; }

/* ===== RESERVE VEHICLES ===== */
.badge.reserve { background: #E2EAF6; color: var(--primary); }
.row-list .officer-vehicle.reserve-row { background: #FBF0DC; }
.row-list .officer-vehicle.reserve-row:hover { background: #F6E3BF; }
#reserve-card h4 { font-size: 0.95rem; color: var(--text); }

/* ===== WIDE SCREENS: Vehicles and Officers as a card grid ===== */
@media (min-width: 900px) {
  .main-content { max-width: 1400px; }
  .row-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 0.85rem; align-items: stretch; }
  .row-list .list-item { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0.5rem; }
  .row-list .list-item > div[style*="text-align:right"] { text-align: left !important; }
  .row-list .list-item .row-end { justify-content: flex-start !important; flex-wrap: wrap; }
  .row-list > p { grid-column: 1 / -1; }
}

/* ===== OFFICER DIRECTORY SECTIONS ===== */
.officer-section { margin-bottom: 1.25rem; }
.section-title { display: flex; align-items: center; gap: 0.6rem; font-size: 1.2rem; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; color: #fff; background: var(--primary); margin: 1rem 0 0.75rem; padding: 0.6rem 1rem; border-radius: 10px; box-shadow: 0 2px 6px rgba(16, 37, 68, 0.18); }
.section-title .tab-count { background: var(--surface); color: var(--primary); font-size: 0.85rem; font-weight: 800; padding: 0.1rem 0.6rem; }

/* Admin buttons on directory cards */
.card-actions { display: flex; gap: 0.4rem; margin-top: 0.25rem; }
.btn.danger-outline { color: var(--danger); border-color: var(--danger); }

/* Vehicles: search plus location filter */
.filter-row { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: stretch; }
.filter-row #vsearch { flex: 1 1 240px; }
.filter-row #vloc { flex: 0 1 220px; width: auto; }
.filter-row #vloc { background-image: none; padding-left: 1rem; }
.filter-row { margin-bottom: 1rem; }
.filter-row .search-input { margin-bottom: 0; }
@media (max-width: 600px) { .filter-row #vloc { flex: 1 1 100%; } }

/* Links styled as buttons (Export CSV, backup downloads) */
a.btn { text-decoration: none; }

/* Quarterly inspection progress bar */
.progress { height: 10px; border-radius: 999px; background: #e2e8f0; overflow: hidden; }
.progress span { display: block; height: 100%; background: var(--success, #2f855a); border-radius: 999px; }

/* Mileage update box */
.mileage-form { display: flex; gap: 0.5rem; margin: 0.4rem 0 0.25rem; }
.mileage-form input { flex: 1; min-width: 0; }

/* Site Owner extra fields and change history */
.form-section { margin: 1.25rem 0 0.5rem; padding-top: 0.75rem; border-top: 1px solid #e2e8f0; color: var(--primary); font-size: 0.95rem; }
.history-row { cursor: default; }
.history-row > div { line-height: 1.5; }

.contact-line { font-size: 0.85rem; margin-top: 0.2rem; }
.contact-line a { color: var(--primary); text-decoration: none; }

/* Vehicle cards: clearer text */
.vtitle { font-size: 1.08rem; font-weight: 600; color: var(--text); line-height: 1.3; }
.vnum { font-weight: 800; color: var(--primary); font-size: 1.15rem; margin-right: 0.15rem; }
.vwho { font-size: 0.95rem; font-weight: 700; color: #2A3646; margin-top: 0.3rem; }
.vmeta { font-size: 0.9rem; font-weight: 500; color: #3E4A5A; margin-top: 0.15rem; }
.row-list .list-item .badge { font-size: 0.82rem; padding: 0.25rem 0.7rem; }

/* Login: badge image and password help */
.login-badge { display: block; width: 96px; height: auto; margin: 0 auto 0.9rem; }
.login-footer .forgot { text-align: center; padding: 0.9rem 0 1rem; margin-bottom: 0.9rem; border-bottom: 1px solid var(--border); }
.login-footer .forgot p { color: var(--muted); font-size: 0.88rem; margin: 0; }
.login-footer .forgot .forgot-title { color: var(--text); font-size: 0.98rem; font-weight: 700; margin-bottom: 0.2rem; }
.login-footer .forgot-phone { display: inline-block; margin-top: 0.35rem; font-size: 1.05rem; font-weight: 700; color: var(--primary); text-decoration: none; letter-spacing: 0.02em; }

/* Detail cards (vehicle, issue): each field is a tile with a pill label */
.detail-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 0.75rem; grid-auto-flow: row dense; }
.detail-grid > div { background: var(--surface); border: 1px solid #DCE3EC; border-radius: 12px; padding: 0.65rem 0.8rem 0.75rem; }
.detail-grid > div.wide { grid-column: span 2; }
.detail-grid dt { display: inline-block; background: var(--primary); color: #fff; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; padding: 0.2rem 0.6rem; border-radius: 999px; margin-bottom: 0.4rem; }
.detail-grid dd { font-size: 1.05rem; font-weight: 600; color: var(--text); margin-top: 0; }
.detail-grid dd.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.98rem; letter-spacing: 0.03em; word-break: break-all; }
@media (max-width: 600px) { .detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; } .detail-grid > div { padding: 0.55rem 0.65rem; } .detail-grid > div.wide { grid-column: 1 / -1; } .detail-grid dd { font-size: 0.98rem; word-break: break-word; } }
.vehicle-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.9rem; }
.vehicle-actions:empty { display: none; }
.docs-form { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.75rem; }
.docs-form input { flex: 1 1 280px; margin: 0; }
.card-docs { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.5rem; }
.btn.small { font-size: 0.78rem; padding: 0.35rem 0.7rem; }
#alertform .check { display: flex; align-items: center; gap: 0.5rem; }
.mileage-nudge { border-left: 4px solid #D99A1E; background: #FFF8EA; }
.mileage-nudge h3 { margin: 0 0 0.35rem; color: #7A4A00; }
.mileage-nudge p { margin: 0 0 0.6rem; color: var(--text); }
/* Collapsible cards (Settings → Recent Changes) */
details.collapsible > summary { list-style: none; cursor: pointer; display: flex; align-items: center; flex-wrap: wrap; gap: 0.25rem 0.75rem; padding-right: 2rem; position: relative; }
details.collapsible > summary::-webkit-details-marker { display: none; }
details.collapsible > summary h3 { margin: 0; }
details.collapsible > summary .collapse-hint { color: var(--muted); font-size: 0.85rem; }
details.collapsible > summary::after { content: '▸'; position: absolute; right: 0.25rem; top: 50%; transform: translateY(-50%); font-size: 1.1rem; color: var(--primary); transition: transform 0.15s; }
details.collapsible[open] > summary::after { transform: translateY(-50%) rotate(90deg); }
/* Quarterly inspection checklist */
.qi-item { display: grid; grid-template-columns: 1fr auto; gap: 0.4rem 0.75rem; align-items: center; padding: 0.75rem 0; border-bottom: 1px solid var(--border); }
.qi-text strong { display: block; color: var(--text); }
.qi-text small { color: var(--muted); }
.qi-choice { display: flex; gap: 0.35rem; }
.qi-choice button { border: 1px solid #CDD4DE; background: var(--surface); border-radius: 999px; padding: 0.4rem 0.8rem; font-size: 0.85rem; font-weight: 600; color: var(--text); cursor: pointer; }
.qi-choice button.on[data-v="ok"] { background: #E5F3EA; border-color: #1F6A3F; color: #1F6A3F; }
.qi-choice button.on[data-v="attention"] { background: #FBF0DC; border-color: #7A4A00; color: #7A4A00; }
.qi-note { grid-column: 1 / -1; margin: 0; }
@media (max-width: 600px) { .qi-item { grid-template-columns: 1fr; } }
/* Officer-facing issue progress */
.issue-steps { list-style: none; display: flex; gap: 0.25rem; margin: 0.6rem 0 0.2rem; padding: 0; width: 100%; }
.issue-steps li { flex: 1; text-align: center; font-size: 0.68rem; font-weight: 600; color: var(--muted); padding-top: 0.45rem; border-top: 4px solid #DDE2EA; line-height: 1.2; }
.issue-steps li.done { border-color: #1F6A3F; color: #1F6A3F; }
.issue-steps li.now { border-color: var(--navy, #1B365D); color: var(--text); }
.issue-callout { background: #EEF3FA; border-left: 4px solid var(--navy, #1B365D); border-radius: 8px; padding: 0.65rem 0.8rem; margin: 0 0 0.9rem; display: flex; flex-direction: column; gap: 0.15rem; }
.issue-callout strong { text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.04em; color: var(--navy, #1B365D); }
.issue-callout small { color: var(--muted); }
.issue-callout.ready { background: #E5F3EA; border-color: #1F6A3F; }
.issue-callout.ready strong { color: #1F6A3F; font-size: 0.85rem; }
.row-list .list-item.report-item { display: flex; flex-direction: column; align-items: stretch; gap: 0.2rem; }
.report-item > * { width: 100%; min-width: 0; }
.report-top { display: flex; justify-content: space-between; gap: 0.5rem; align-items: flex-start; }
.report-top > div:first-child { min-width: 0; flex: 1; }
.report-top .row-end { flex-shrink: 0; flex-wrap: nowrap !important; }
.report-diag { color: var(--text); margin-top: 0.3rem; }
/* Phones: list rows stack their badges under the text so names don't get squeezed */
@media (max-width: 767px) {
  .row-list .list-item.clickable:not(.report-item) { flex-direction: column; align-items: stretch; gap: 0.5rem; }
  .row-list .list-item.clickable:not(.report-item) .row-end { justify-content: flex-start !important; flex-wrap: wrap; }
  .row-list .list-item.clickable:not(.report-item) .row-end .chevron { margin-left: auto; }
}
/* Comments & Concerns */
.list-item.concern { display: block; padding: 0.9rem 0; }
.concern-head { display: flex; justify-content: space-between; gap: 0.75rem; align-items: flex-start; }
.concern-msg { margin: 0.5rem 0; white-space: pre-wrap; }
.concern-reply { background: #EEF3FA; border-left: 3px solid var(--primary); border-radius: 6px; padding: 0.5rem 0.7rem; margin: 0.4rem 0; font-size: 0.92rem; }
.concern-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; align-items: center; }
.concern-actions .c-reply { flex: 1 1 220px; margin: 0; }
.dash-note { display: flex; align-items: center; gap: 0.5rem; width: 100%; text-align: left; cursor: pointer; font: inherit; color: var(--text); border-left: 4px solid var(--warning, #B7791F); }
.dash-note .chevron { margin-left: auto; }
/* Mobile radios */
.radio-block { margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid var(--border); }
.radio-head { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; margin-bottom: 0.6rem; }
.radio-head h4 { margin: 0; color: var(--primary); }
.radio-table-wrap { overflow-x: auto; margin-bottom: 0.5rem; }
.radio-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.radio-table th { text-align: left; background: var(--primary); color: #fff; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.5rem 0.6rem; white-space: nowrap; }
.radio-table td { padding: 0.55rem 0.6rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.radio-table tr:nth-child(even) td { background: var(--surface); }
.radio-table td.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.85rem; }
/* Downtime */
.downtime-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; margin-bottom: 0.75rem; }
.downtime-stats > div { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.6rem 0.75rem; display: flex; flex-direction: column; }
.downtime-stats .number { font-size: 1.6rem; font-weight: 800; color: var(--primary); line-height: 1.1; }
.downtime-stats span:last-child { font-size: 0.8rem; color: var(--muted); }
.downtime-add { margin-top: 0.75rem; }
.downtime-add summary { cursor: pointer; font-weight: 600; color: var(--primary); }
.dt-form { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: flex-end; margin-top: 0.6rem; }
.dt-form .field { flex: 1 1 140px; margin: 0; }
/* Vehicle cards: chips for details, badges + buttons pinned to the bottom */
.row-list .list-item.vcard { display: flex; flex-direction: column; align-items: stretch; justify-content: space-between; gap: 0.75rem; }
.vcard .vwho { margin-top: 0.35rem; }
.vsub { font-size: 0.85rem; color: #3E4A5A; margin-top: 0.2rem; }
.vchips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.55rem; }
.vchip { white-space: nowrap; background: #EEF2F7; border: 1px solid #DCE3EC; border-radius: 999px; padding: 0.18rem 0.6rem; font-size: 0.82rem; font-weight: 600; color: #3E4A5A; line-height: 1.4; }
.vcard-bottom { display: flex; flex-direction: column; gap: 0.5rem; margin-top: auto; }
.vbadges { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
.vcard .card-docs { margin-top: 0; padding-top: 0.5rem; border-top: 1px dashed #DCE3EC; }
/* Directory */
.dir-card { padding: 0.25rem 1rem; }
.dir-row { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(0, 2fr) auto; gap: 0.4rem 1rem; align-items: center; padding: 0.7rem 0; border-bottom: 1px solid var(--border); }
.dir-row:last-child { border-bottom: none; }
.dir-who small { color: var(--muted); }
.dir-contact { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; align-items: center; }
.dir-contact a { color: var(--primary); text-decoration: none; font-weight: 600; white-space: nowrap; }
.dir-contact a:hover { text-decoration: underline; }
.dir-contact .dir-text { font-size: 0.8rem; border: 1px solid var(--border); border-radius: 999px; padding: 0.05rem 0.55rem; margin-left: -0.6rem; }
.dir-email { overflow-wrap: anywhere; white-space: normal !important; }
.dir-none { color: var(--muted); font-size: 0.85rem; }
@media (max-width: 600px) { .dir-row { grid-template-columns: 1fr auto; } .dir-contact { grid-column: 1 / -1; grid-row: 2; } }

.sticker-notice { position: relative; margin: 1rem 1rem 0; max-width: calc(1100px - 2rem); padding-right: 2.5rem; }
.sticker-x { position: absolute; top: 0.4rem; right: 0.6rem; background: none; border: 0; font-size: 1.4rem; line-height: 1; color: var(--muted); cursor: pointer; }
/* Sub-item under Vehicles */
.nav-link.nav-sub { padding-left: 2.6rem; font-size: 0.92em; margin-top: -0.1rem; }
.nav-link.nav-sub .ic { width: 16px; height: 16px; }
/* Vehicle cards (Oct 21 look): red number pill, driver's name, then year/make/model on the right */
.row-list .list-item.vcard { border-left: 5px solid var(--accent); border-radius: 14px; padding: 1rem 1.1rem; box-shadow: 0 2px 8px rgba(16, 37, 68, 0.08); }
.vhead { display: grid; grid-template-columns: auto minmax(0, auto) minmax(min-content, 1fr); align-items: center; gap: 0.7rem; }
.vpill { background: var(--accent); color: #fff; font-weight: 800; font-size: 1.15rem; letter-spacing: -0.01em; padding: 0.2rem 0.75rem; border-radius: 999px; line-height: 1.3; white-space: nowrap; }
.vdriver { font-weight: 800; font-size: 1.12rem; color: var(--text); min-width: 0; }
.vmodel { text-align: right; font-weight: 700; font-size: 0.95rem; line-height: 1.25; color: var(--text); }
.vcard .vsub { margin-top: 0.45rem; }
.vcard .vchips { gap: 0.45rem; margin-top: 0.75rem; }
.vcard .vchip { padding: 0.25rem 0.75rem; font-size: 0.86rem; border-color: transparent; color: #2D3748; }
.vcard .vbadges .badge { padding: 0.25rem 0.75rem; border-radius: 999px; font-size: 0.86rem; }
.vcard .card-docs { border-top: 1px solid #E2E8F0; padding-top: 0.75rem; }
.vmodel .vmk { display: inline-block; white-space: nowrap; }
/* Officer cards reuse the vehicle card look */
.ocard .vmodel { font-weight: 600; font-size: 0.85rem; color: var(--muted); }
.ocard a.vchip { text-decoration: none; color: var(--primary); }
.ocard .ochip-email { white-space: normal; overflow-wrap: anywhere; }
.ovehicles { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.6rem; }
.row-list .ocard .officer-vehicle, .row-list .ocard .officer-vehicle.reserve-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; padding: 0; margin: 0; background: none; border: 0; text-align: left; cursor: pointer; }
.row-list .ocard .officer-vehicle:hover .vchip { background: #DCE5F2; }
.ocard .reserve-row .vchip { background: #FBF0DC; }
.ocard .officer-vehicle .vchip { white-space: normal; }
.ocard .officer-vehicle .badge { padding: 0.25rem 0.75rem; border-radius: 999px; font-size: 0.86rem; }
.ocard .card-docs { display: flex; gap: 0.5rem; }
/* Field labels: darker and bolder so each one stands out from its box */
.field label { font-size: 0.88rem; font-weight: 700; color: var(--text); letter-spacing: 0.01em; margin-bottom: 0.4rem; }
/* iPhone: date/time boxes ignore width:100% unless their native look is reset, and text under 16px makes Safari
   zoom in when a box is tapped (which makes the page look wider than the screen) */
input, textarea, select { min-width: 0; max-width: 100%; }
input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"] { -webkit-appearance: none; appearance: none; display: block; min-height: 2.9rem; }
input::-webkit-date-and-time-value { text-align: left; }
@media (max-width: 700px) { input, textarea, select { font-size: 16px; } }
/* Replacement order */
.ro-list .list-item.ro-row { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr) auto; align-items: center; gap: 0.75rem; }
.ro-place { width: 2.2rem; height: 2.2rem; border-radius: 999px; background: var(--accent); color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.ro-place.held { background: #CBD5E0; color: #4A5568; }
.ro-who small { display: block; color: var(--muted); }
.ro-car { color: var(--primary); font-weight: 600; cursor: pointer; margin-top: 0.15rem; }
.ro-car:hover { text-decoration: underline; }
.ro-who .ro-note { color: #975A16; }
.ro-hint { display: block; margin-top: 0.35rem; color: var(--primary); }
.insp-damage { font-size: 0.85rem; color: #975A16; margin-top: 0.25rem; }
.insp-row { align-items: flex-start; }

/* Issue priority colors: Critical red, High orange, Medium yellow, Low gray */
.prio { display: inline-block; padding: 0.15rem 0.55rem; border-radius: 999px; font-size: 0.75rem; font-weight: 700; vertical-align: middle; }
.prio-critical { background: #C8202F; color: #fff; }
.prio-high { background: #F28C28; color: #fff; }
.prio-medium { background: #F6D04D; color: #4A3A00; }
.prio-low { background: #fff; color: #111; border: 2px solid #111; font-weight: 700; }
.list-item.prio-row { border-left: 5px solid transparent; padding-left: 0.6rem; }
.list-item.prio-row-critical { border-left-color: #C8202F; background: #FDF1F2; }
.list-item.prio-row-high { border-left-color: #F28C28; }
.list-item.prio-row-medium { border-left-color: #F6D04D; }
.list-item.prio-row-low { border-left-color: #3A3F47; }

/* Big tap targets on the report form */
.chips { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.chip { min-height: 44px; padding: 0.5rem 0.95rem; border-radius: 999px; border: 1.5px solid var(--border); background: var(--card); color: var(--text); font: inherit; font-weight: 600; cursor: pointer; }
.chip.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.chip.prio-critical, .chip.prio-high, .chip.prio-medium, .chip.prio-low { background: var(--card); color: var(--text); }
.chip.prio-critical.on { background: #C8202F; border-color: #C8202F; color: #fff; }
.chip.prio-high.on { background: #F28C28; border-color: #F28C28; color: #fff; }
.chip.prio-medium.on { background: #F6D04D; border-color: #E2B92C; color: #4A3A00; }
.chip.prio-low.on { background: #fff; border: 2px solid #111; color: #111; }
.report-more { margin: 0 0 0.9rem; }
.report-more summary { cursor: pointer; color: var(--primary); font-weight: 600; padding: 0.4rem 0; }

/* Dashboard tidy-up (update 85) */
details.collapsible > summary { display: block; }
details.collapsible > summary .collapse-hint { display: block; margin-top: 0.2rem; }
.dash-note { gap: 0.75rem; }
.dash-note-icon { font-size: 1.4rem; line-height: 1; flex-shrink: 0; }
.dash-note-text { display: flex; flex-direction: column; min-width: 0; font-weight: 600; }
.dash-note-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--warning); }
.dash-note-text small { color: var(--muted); font-weight: 400; }
#oos-tile[aria-expanded="true"] { box-shadow: 0 0 0 3px var(--primary-ring); }
.recent-issue { align-items: center; }
.recent-issue .ri-main { min-width: 0; flex: 1; }
.ri-top { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.ri-car { color: var(--muted); font-size: 0.85rem; }
.ri-desc { margin: 0.15rem 0; font-size: 0.92rem; }
@media (max-width: 700px) {
  .dash-banner { padding-top: 0.7rem; padding-bottom: 0.7rem; gap: 0.75rem; }
  .dash-banner img { width: 46px; }
  .dash-banner h2 { font-size: 1.02rem; }
  .dash-banner p { font-size: 0.82rem; }
}
#down-list { scroll-margin-top: calc(var(--topbar-h) + 12px); }

/* Officer taking the car in (update 87) */
.badge.officer-tag { background: #E8F1FB; color: #1B4F8A; }
.repair-panel { margin-top: 1rem; padding: 0.9rem 1rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.repair-panel h4 { margin: 0 0 0.5rem; }
.prio-help { display: block; margin-top: 0.45rem; color: var(--muted); font-size: 0.85rem; line-height: 1.4; }

/* Quick assign pill on unassigned vehicles */
.assign-quick { margin-top: 0.75rem; }
.pill-btn { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 40px; padding: 0.45rem 1rem; border-radius: 999px; border: none; background: var(--accent); color: #fff; font: inherit; font-weight: 700; cursor: pointer; box-shadow: 0 2px 8px rgba(208, 49, 63, 0.25); }
.pill-btn:hover { filter: brightness(1.05); }
.pill-btn.pill-sm { min-height: 32px; padding: 0.25rem 0.8rem; font-size: 0.85rem; margin: 0.35rem 0 0.1rem; box-shadow: none; }
.site-version { padding: 0.4rem 1rem 0.8rem; font-size: 0.72rem; color: var(--muted); }

/* Driver's last name in a pill on issue rows */
.driver-pill { display: inline-block; padding: 0.12rem 0.6rem; border-radius: 999px; background: var(--primary); color: #fff; font-size: 0.82rem; font-weight: 700; vertical-align: middle; }

/* Vehicle identity: #548 [Halladay] 2026 Chev Tahoe, kept together everywhere */
.carline { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0.2rem 0.45rem; vertical-align: middle; }
.carline .cl-num { font-weight: 800; color: var(--text); }
.carline .cl-ymm { font-weight: 600; color: var(--text); }
.carline .driver-pill { margin: 0; }
.carline-h .carline { gap: 0.3rem 0.55rem; }
.carline-h .cl-num { color: var(--primary); }
.carline-h .driver-pill { font-size: 0.95rem; padding: 0.18rem 0.75rem; }

/* Log Service */
.photo-row { display: flex; gap: 0.4rem; margin-top: 0.35rem; flex-wrap: wrap; }
.svc-done p { color: var(--muted); }

/* Update 103-106: every vehicle line (#, officer, year make model) sits in a light navy pill with a bold navy outline; info boxes with bold dark borders */
.carline { background: var(--primary-soft); border: 2px solid var(--primary); border-radius: 999px; padding: 0.22rem 0.8rem 0.22rem 0.7rem; }
.carline-h > .carline { padding: 0.3rem 0.95rem 0.3rem 0.85rem; }
.vhead-pill { display: block; }
.vhead-pill .carline { font-size: 1.05rem; }
@media (max-width: 600px) { .carline { border-radius: 16px; } .carline-h > .carline { border-radius: 18px; padding: 0.3rem 0.7rem; } }
.detail-grid > div { border: 2px solid #1E293B; }

/* Update 107: vehicle page status pill stands out with a softly pulsing dot (green In Service, amber In Shop, red otherwise) */
.status-live { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.55rem 1.3rem 0.55rem 1rem; border-radius: 999px; font-weight: 800; font-size: 1.2rem; color: #fff; white-space: nowrap; box-shadow: 0 2px 6px rgba(16, 37, 68, 0.18); }
.status-live.ok { background: #1F8A4C; }
.status-live.shop { background: #C77700; }
.status-live.down { background: #C62828; }
.status-live .dot { width: 0.75rem; height: 0.75rem; border-radius: 50%; background: #fff; animation: status-pulse 1.6s ease-in-out infinite; }
@keyframes status-pulse { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,0.85); opacity: 1; } 70% { box-shadow: 0 0 0 0.45rem rgba(255,255,255,0); opacity: 0.55; } 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .status-live .dot { animation: none; } }

/* Update 108: bigger status pill with Edit Vehicle beside it */
.status-row { display: flex; align-items: center; justify-content: flex-start; gap: 0.5rem; flex-wrap: wrap; margin: 0.9rem 0 0.25rem; }
/* Update 109: Edit Vehicle sits right beside the status pill as a solid navy pill of the same height */
.btn.edit-veh-btn { background: var(--primary); border: 2px solid var(--primary); color: #fff; font-weight: 800; font-size: 1.05rem; border-radius: 999px; padding: 0.6rem 1.2rem; box-shadow: 0 2px 6px rgba(16, 37, 68, 0.18); }
.btn.edit-veh-btn:hover { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; }
@media (max-width: 600px) { .status-row { gap: 0.5rem; } .status-live { font-size: 1.05rem; padding: 0.5rem 0.95rem 0.5rem 0.8rem; } .btn.edit-veh-btn { font-size: 0.95rem; padding: 0.55rem 0.95rem; } }
/* Update 110: all vehicle actions sit in the status row as pills */
.btn.act-pill { border-radius: 999px; border: 2px solid var(--primary); color: var(--primary); background: var(--surface); font-weight: 700; font-size: 0.93rem; padding: 0.5rem 0.85rem; text-decoration: none; }
.btn.act-pill:hover { background: var(--primary-soft); }
.btn.act-pill.act-docs { background: var(--primary-soft); }
@media (max-width: 600px) { .btn.act-pill { font-size: 0.88rem; padding: 0.45rem 0.75rem; } }

/* Update 111: no white backgrounds (Scott's pick). Page is gray, cards light gray, buttons/fields a mid light gray, top bar and phone bottom bar dark gray */
.topbar h1, #menu-btn { color: #F1F3F5; }
.topbar #top-logout { background: #4A5059; color: #F1F3F5; border-color: #5D646E; }
.bottom-nav { border-top-color: #2B2F35; }
.bottom-nav button { color: #B9BFC7; }
.bottom-nav button.active { color: #FFFFFF; }
.detail-grid > div { background: var(--surface); }
/* Update 112-113: desktop Vehicles cards keep #, officer and year make model on one line (normal card width, smaller font on that line) */
@media (min-width: 900px) {
  .vhead-pill .carline { flex-wrap: nowrap; white-space: nowrap; max-width: 100%; font-size: 0.95rem; gap: 0.35rem; padding: 0.2rem 0.65rem 0.2rem 0.6rem; }
  .vhead-pill .carline .driver-pill { font-size: 0.8em; padding: 0.1em 0.55em; }
  .vhead-pill .carline .cl-num, .vhead-pill .carline .driver-pill { flex: none; }
  .vhead-pill .carline .cl-ymm { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}

/* Update 114: Edit / Add Vehicle form, grouped into sections with a sticky save bar */
.vform { margin-top: 1rem; display: flex; flex-direction: column; gap: 1rem; padding-bottom: 5rem; }
.vform-head { background: var(--card); border-radius: var(--radius); padding: 1.1rem 1.25rem; box-shadow: var(--shadow); border-left: 5px solid var(--primary); }
.vform-head h2 { margin: 0; font-size: 1.35rem; }
.vform-sub { color: var(--muted); margin: 0.3rem 0 0; }
.vform-sec { background: var(--card); border-radius: var(--radius); padding: 1rem 1.25rem 0.35rem; box-shadow: var(--shadow); border: 2px solid #1E293B; }
.vform-sec h3 { display: flex; align-items: center; gap: 0.4rem; font-size: 1.05rem; margin: 0 0 0.85rem; padding-bottom: 0.55rem; border-bottom: 1px solid var(--border); color: var(--primary); }
.vform-sec h3 small { color: var(--muted); font-weight: 600; font-size: 0.8rem; }
.vform-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 0 1rem; }
.vform-grid .vform-wide { grid-column: span 2; }
.vform .field label { display: inline-block; background: var(--primary); color: #fff; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.2rem 0.6rem; border-radius: 999px; margin-bottom: 0.4rem; }
.vform .field label.vform-toggle { display: flex; align-items: center; gap: 0.55rem; background: var(--surface); color: var(--text); text-transform: none; letter-spacing: 0; font-size: 0.95rem; font-weight: 600; padding: 0.7rem 0.9rem; border-radius: var(--radius-sm); border: 1.5px solid var(--border); cursor: pointer; margin: 0; }
.vform-toggle input { width: 1.15rem; height: 1.15rem; accent-color: var(--accent); }
.vform input, .vform select { border: 1.5px solid #8F96A1; font-weight: 600; }
.vform input:focus, .vform select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-ring); outline: none; }
.vform input.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 0.04em; }
.vform-hint { display: block; color: var(--muted); margin-top: 0.3rem; font-size: 0.8rem; }
.vform-bar { position: sticky; bottom: 0.75rem; z-index: 50; align-self: flex-end; display: flex; justify-content: flex-end; gap: 0.6rem; background: var(--dark-gray); padding: 0.7rem 0.9rem; border-radius: 999px; box-shadow: 0 6px 20px rgba(16, 37, 68, 0.3); }
.vform-bar .btn { border-radius: 999px; font-weight: 700; padding: 0.6rem 1.2rem; white-space: nowrap; }
.vform-bar .btn.primary { padding: 0.6rem 1.6rem; font-size: 1rem; }
@media (max-width: 767px) {
  .vform-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 0.65rem; }
  .vform-grid .vform-wide, .vform-grid .field:has(#vassigned), .vform-grid .field:has(#vresp) { grid-column: 1 / -1; }
  .vform-sec { padding: 0.9rem 0.9rem 0.25rem; }
  .vform-bar { bottom: calc(4.6rem + env(safe-area-inset-bottom, 0)); align-self: stretch; padding: 0.5rem; }
  .vform-bar .btn { flex: 1; padding: 0.55rem 0.8rem; }
  .vform-bar .btn.primary { flex: 2; padding: 0.55rem 0.8rem; }
}
/* Update 115: Quarterly Inspection cards get extra-bold black borders */
#qi-due .list-item, #qi-done .list-item, #qi-due .list-item:last-child, #qi-done .list-item:last-child { border: 3px solid #000; border-left-width: 6px; }
/* Update 117: reserves. Available = bright green edge and badge; in use = "frozen" (grayed, icy edge, can't be opened by officers) */
.badge.res-badge-free, .vcard .vbadges .badge.res-badge-free, .row-list .list-item .badge.res-badge-free { background: #1F8A4C !important; color: #fff !important; font-weight: 800; }
.badge.res-badge-out { background: #B8C2CE; color: #2F3A48; font-weight: 700; }
.badge.res-badge-out.danger { background: #C62828; color: #fff; }
.row-list .list-item.res-free, .row-list .list-item.vcard.res-free { border-left: 6px solid #1F8A4C; }
.row-list .list-item.res-out, .row-list .list-item.vcard.res-out { border-left: 6px solid #8FB3D9; background: repeating-linear-gradient(135deg, #D3D8DE 0 10px, #CBD1D8 10px 20px); filter: grayscale(0.85); opacity: 0.72; }
.row-list .list-item.res-out[aria-disabled="true"] { cursor: not-allowed; }
.row-list .list-item.res-out:hover { opacity: 0.85; }
.res-sub { margin: 0.9rem 0 0.5rem; font-size: 0.95rem; color: var(--muted); }
/* Update 118: "CHECKED OUT" stamp over in-use reserve cards on the Vehicles page (stamp stays in color, the card underneath stays frozen) */
.row-list .list-item.vcard.res-out { position: relative; filter: none; opacity: 1; }
.row-list .list-item.vcard.res-out > :not(.res-stamp) { filter: grayscale(0.85); opacity: 0.55; }
.res-stamp { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-8deg); z-index: 2; pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 0.1rem; padding: 0.45rem 1.1rem; border: 3px solid #B42318; border-radius: 10px; background: rgba(255, 244, 242, 0.92); color: #B42318; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15); white-space: nowrap; }
.res-stamp strong { font-size: 1.35rem; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.1; }
.res-stamp span { font-size: 0.85rem; font-weight: 700; color: #7A1A12; }

/* Issue close-out (update 119) */
.closeout { border: 2px solid #1F6A3F; border-radius: 10px; background: var(--surface); padding: 0.8rem 0.9rem 0.3rem; margin-bottom: 1rem; }
.closeout h4 { margin: 0 0 0.2rem; color: #1F6A3F; }
.co-hint { color: var(--muted); font-size: 0.85rem; margin: 0 0 0.7rem; }
.co-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0 0.75rem; }
.issue-callout.resolved { background: #E5F3EA; border-color: #1F6A3F; }
.issue-callout.resolved strong { color: #1F6A3F; font-size: 0.85rem; }
.issue-callout.resolved .photo-previews { margin-top: 0.4rem; }

/* Dashboard: Recent / Resolved Issues tabs (update 122) */
.recent-issue.ri-done { border-left: 6px solid #1F6A3F; }
.ri-tabs { margin-bottom: 0.75rem; }
.ri-tabs .tab { white-space: nowrap; }
@media (max-width: 480px) { .ri-tabs .tab { font-size: 0.82rem; padding-left: 0.5rem; padding-right: 0.5rem; } .ri-tabs .ri-long { display: none; } }

/* Fleet "Today" list, quick issue buttons, costs (update 123) */
.today-card { border-left: 6px solid var(--primary); }
.today-head { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.today-head h3 { margin: 0; color: var(--primary); }
.todo-row { align-items: center; gap: 0.6rem; }
.todo-icon { font-size: 1.25rem; width: 1.6rem; text-align: center; flex: none; }
.todo-main { flex: 1; min-width: 0; }
.todo-top { display: flex; flex-direction: column; align-items: flex-start; gap: 0.4rem; }
.todo-what { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 800; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.3rem 0.7rem; border-radius: 999px; color: #fff; background: #6B7380; border: 2px solid transparent; white-space: nowrap; box-shadow: 0 1px 2px rgba(0,0,0,0.18); }
.todo-row { border-left: 5px solid #6B7380; }
.todo-critical .todo-what { background: #C42B38; } .todo-critical { border-left-color: #C42B38; }
.todo-late .todo-what { background: #F28C28; color: #2A1600; } .todo-late { border-left-color: #F28C28; }
.todo-reserve .todo-what { background: #5B3F99; } .todo-reserve { border-left-color: #5B3F99; }
.todo-stale .todo-what { background: #6B7380; } .todo-stale { border-left-color: #6B7380; }
.todo-closeout .todo-what { background: #1F6A3F; } .todo-closeout { border-left-color: #1F6A3F; }
.todo-registration .todo-what { background: #1B5FA8; } .todo-registration { border-left-color: #1B5FA8; }
.todo-oil .todo-what { background: #7A4A00; } .todo-oil { border-left-color: #7A4A00; }
.todo-inspection .todo-what { background: #0F766E; } .todo-inspection { border-left-color: #0F766E; }
.today-clear { margin: 0.25rem 0 0; font-weight: 600; color: #1F6A3F; }
.quick-acts { display: flex; gap: 0.5rem; flex-wrap: wrap; width: 100%; }
.quick-acts .qa-close { border-color: #1F6A3F; color: #1F6A3F; }
.cost-sum { background: var(--surface); border: 2px solid #1E293B; border-radius: 8px; padding: 0.45rem 0.7rem; margin: 0.25rem 0 0.6rem; display: inline-block; }
@media (max-width: 480px) { .todo-what { min-width: 0; } }
.mv-more { color: var(--muted); font-size: 0.88rem; margin: 1rem 0.25rem; }
#my-reserves { scroll-margin-top: 72px; }
.new-issue-row { display: flex; justify-content: flex-end; margin: 0 0 0.75rem; }
.btn.act-pill.new-issue-pill { background: var(--primary-soft); }
@media (max-width: 600px) { .new-issue-row .new-issue-pill { width: 100%; justify-content: center; } }

/* Dashboard: two columns on a computer, one on a phone (update 126) */
.dash-cols { display: flex; flex-direction: column; }
.dash-col { display: contents; }
.dc:empty { display: none; }
@media (min-width: 1100px) {
  .dash-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
  .dash-col { display: flex; flex-direction: column; min-width: 0; }
  .dash-col .dc { order: 0 !important; }
}
.new-issue-row { justify-content: flex-start; }
.btn.new-issue-pill { border-radius: 999px; background: var(--primary); color: #fff; border: 2px solid var(--primary); font-weight: 800; font-size: 1rem; padding: 0.7rem 1.3rem; box-shadow: 0 4px 12px rgba(27, 54, 93, 0.35); }
.btn.new-issue-pill:hover { filter: brightness(1.15); }

/* Vehicle page pills (update 128) */
.btn.act-pill.act-link { background: #CFE6FA; }
.btn.act-pill.act-link:hover { background: #B8DAF7; }
.btn.act-pill.act-wrong { background: #F8D3D3; border-color: #B42318; color: #8E1B12; }
.btn.act-pill.act-wrong:hover { background: #F2BDBD; }
#p-body td.mono, #b-body td.mono { white-space: nowrap; }
#c-body td.mono { white-space: nowrap; }

/* Dashboard: white welcome banner, circled numbers (update 131) */
.dash-banner { background: #fff; border: 2px solid var(--primary); color: var(--primary); }
.dash-banner h2 { color: var(--primary); }
.dash-banner p { color: #3A3F47; font-weight: 600; }
.stat-card .number { display: inline-flex; align-items: center; justify-content: center; min-width: 3.3rem; height: 3.3rem; padding: 0 0.45rem; border-radius: 999px; border: 3px solid currentColor; background: #fff; font-size: 1.6rem; margin: 0.35rem 0; }
@media (max-width: 600px) { .stat-card .number { min-width: 2.9rem; height: 2.9rem; font-size: 1.35rem; } }

/* New issue pill: white plus (update 132) */
.new-issue-pill .plus { color: #fff; font-weight: 900; font-size: 1.25em; line-height: 1; margin-right: 0.15rem; }

/* My Tasks (update 132) */
.task-card .today-head h3 { color: var(--primary); }
.task-row { display: flex; align-items: flex-start; gap: 0.65rem; padding: 0.7rem 0.6rem; border-bottom: 1px solid var(--border); border-left: 5px solid #8A95A5; background: var(--surface); border-radius: 8px; margin-bottom: 0.45rem; }
.task-row.task-high { border-left-color: #F28C28; }
.task-row.task-medium { border-left-color: #F6D04D; }
.task-row.task-low { border-left-color: #3A3F47; }
.task-row.is-done { border-left-color: #1F6A3F; opacity: 0.85; }
.task-row.is-done .task-top strong { text-decoration: line-through; text-decoration-color: rgba(0,0,0,0.35); }
.task-row.editing { display: block; border-left-color: var(--primary); }
.task-check input { width: 1.35rem; height: 1.35rem; margin-top: 0.15rem; accent-color: #1F6A3F; cursor: pointer; }
.task-main { flex: 1; min-width: 0; }
.task-top { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; }
.task-main small { color: var(--muted); display: block; margin-top: 0.2rem; }
.task-note { font-size: 0.88rem; margin-top: 0.25rem; }
.prio-other { background: #E1E4E8; color: #3A3F47; border: 1px solid #8A95A5; }
.chip.prio-other.on { background: #8A95A5; border-color: #8A95A5; color: #fff; }

.task-share { display: inline-block; font-size: 0.75rem; font-weight: 700; padding: 0.15rem 0.55rem; border-radius: 999px; background: #DCEAF7; border: 1.5px solid var(--primary); color: var(--primary); white-space: nowrap; }
.task-share.from { background: #E4DCF5; border-color: #5B3F99; color: #5B3F99; }
.task-row.is-shared { box-shadow: inset 0 0 0 1.5px #B9CDE3; }
.task-share-toggle { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; font-weight: 600; margin: 0.2rem 0 0.8rem; cursor: pointer; }
.task-share-toggle input { width: 1.2rem; height: 1.2rem; accent-color: var(--primary); }
.task-share-toggle small { color: var(--muted); font-weight: 400; }

/* One-on-One inspections (Scott only) */
.ooo-prog-txt { font-size: 0.95rem; margin-bottom: 0.3rem; }
.ooo-prog-txt b { font-size: 1.3rem; color: var(--primary); }
.ooo-bar { height: 10px; background: #B9C0C9; border-radius: 999px; overflow: hidden; }
.ooo-bar span { display: block; height: 100%; background: #1F6A3F; border-radius: 999px; }
.ooo-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; padding: 0.7rem 0.6rem; background: var(--surface); border-radius: 8px; margin-bottom: 0.45rem; border-left: 5px solid #8A95A5; }
.ooo-row.st-sched, .ooo-row.st-progress { border-left-color: var(--primary); }
.ooo-row.st-done { border-left-color: #1F6A3F; }
.ooo-main { flex: 1; min-width: 220px; }
.ooo-main small { display: block; color: var(--muted); margin-top: 0.2rem; }
.ooo-acts { display: flex; gap: 0.4rem; }
.ooo-schedbox { flex-basis: 100%; }
.ooo-sched-form { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin-bottom: 0.3rem; }
.ooo-sched-form input { max-width: 230px; }
.badge.ooo-sched { background: #DCEAF7; color: var(--primary); }
.badge.ooo-todo { background: #E2E5E9; color: #4A5260; }
.ooo-prep { background: #E7EDF5; border-left: 4px solid var(--primary); border-radius: 8px; padding: 0.65rem 0.85rem; margin: 0.3rem 0 0.9rem; }
.ooo-prep ul { margin: 0.35rem 0 0; padding-left: 0; list-style: none; display: grid; gap: 0.25rem; font-size: 0.9rem; }
.ooo-sec { margin-top: 1rem; }
.ooo-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; border-bottom: 2px solid var(--primary); padding-bottom: 0.3rem; }
.ooo-sec-head h4 { margin: 0; color: var(--primary); }
.qi-choice button.on[data-v="fix"] { background: #FBF0DC; border-color: #7A4A00; color: #7A4A00; }
.qi-choice button.on[data-v="na"] { background: #E2E5E9; border-color: #4A5260; color: #4A5260; }
.ooo-sum { margin-top: 1rem; background: var(--surface); border-radius: 8px; padding: 0.7rem 0.85rem; }
.ooo-sum ul { margin: 0.4rem 0; padding-left: 1.1rem; }
@media print {
  .sidebar, .bottom-nav, .topbar, header, nav, .no-print, .site-version { display: none !important; }
  .ooo-form .qi-choice button { border: 1.5px solid #000 !important; background: #fff !important; }
  .ooo-form .qi-choice button.on { background: #ddd !important; }
  .ooo-form .qi-note[hidden] { display: none; }
  .ooo-item { break-inside: avoid; }
  .shell { margin-left: 0 !important; }
  .ooo-form input, .ooo-form select, .ooo-form textarea { background: #fff !important; border: 1px solid #000 !important; }
  body, main, .card { background: #fff !important; box-shadow: none !important; }
}

/* Grouped sidebar (update 135) */
.nav-group { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: #8796AB; padding: 0.85rem 0.8rem 0.3rem; }
.nav-new { position: relative; padding: 0.15rem 0.2rem 0.2rem; }
.nav-new-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.6rem 0.8rem; border-radius: 999px; border: 2px solid #8FB0DA; background: #CFE0F5; color: #102544; font-weight: 800; font-size: 0.95rem; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,0.25); }
.nav-new-btn .plus { font-size: 1.1rem; line-height: 1; }
.nav-new-menu, .user-menu { background: #1C2F4D; border: 1px solid rgba(255,255,255,0.14); border-radius: 12px; padding: 0.35rem; box-shadow: 0 8px 22px rgba(0,0,0,0.35); display: flex; flex-direction: column; gap: 2px; }
.nav-new-menu { margin-top: 0.4rem; }
.nav-new-menu[hidden], .user-menu[hidden] { display: none; }
.nav-new-menu a, .user-menu a, .user-menu button { color: #E6ECF4; text-decoration: none; padding: 0.55rem 0.75rem; border-radius: 8px; font-size: 0.92rem; font-weight: 600; background: none; border: 0; text-align: left; cursor: pointer; font-family: inherit; }
.nav-new-menu a:hover, .user-menu a:hover, .user-menu button:hover, .nav-new-menu a.active, .user-menu a.active { background: rgba(255,255,255,0.1); color: #fff; }
.user-menu { margin: 0 0.6rem 0.4rem; }
button.sidebar-user-text { background: none; border: 0; padding: 0.2rem 0.3rem; margin: -0.2rem -0.3rem; border-radius: 8px; text-align: left; cursor: pointer; color: inherit; font-family: inherit; }
button.sidebar-user-text:hover { background: rgba(255,255,255,0.08); }
#user-name::after { content: ' ▾'; color: #93A1B5; font-size: 0.75rem; }
.sidebar-user .avatar { cursor: pointer; }

/* Wish List (Doyl <-> Scott) */
.nav-badge { margin-left: auto; background: #D0313F; color: #fff; font-size: 0.72rem; font-weight: 800; min-width: 1.35rem; height: 1.35rem; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; padding: 0 0.35rem; }
.nav-badge[hidden] { display: none; }
.wish-item { background: var(--surface); border-radius: 10px; padding: 0.8rem 0.9rem; margin-bottom: 0.6rem; border-left: 5px solid #8A95A5; }
.wish-item.is-important { border-left-color: #F28C28; }
.wish-item.is-new { box-shadow: 0 0 0 2px var(--primary) inset; }
.wish-item.editing { border-left-color: var(--primary); }
.wish-top { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.wish-cat, .wish-star, .wish-status, .wish-new { font-size: 0.74rem; font-weight: 800; padding: 0.2rem 0.6rem; border-radius: 999px; white-space: nowrap; }
.wish-cat { background: #DCEAF7; color: var(--primary); border: 1.5px solid var(--primary); }
.wish-star { background: #FFE8CC; color: #7A3E00; border: 1.5px solid #F28C28; }
.wish-new { background: #D0313F; color: #fff; }
.wish-status { margin-left: auto; color: #fff; background: #4A5260; }
.wish-status.st-reviewing { background: #B7791F; }
.wish-status.st-planned { background: #1B5FA8; }
.wish-status.st-done { background: #1F6A3F; }
.wish-status.st-not-now { background: #8A95A5; }
.wish-title { margin: 0.45rem 0 0.1rem; font-size: 1.05rem; color: var(--text); }
.wish-meta { color: var(--muted); }
.wish-details { margin: 0.45rem 0 0; white-space: pre-wrap; }
.wish-set { margin-top: 0.6rem; }
.wish-set .chip { font-size: 0.8rem; padding: 0.3rem 0.7rem; }
.wish-replies { margin-top: 0.6rem; display: grid; gap: 0.4rem; }
.wish-reply { background: #E4E8ED; border-radius: 8px; padding: 0.45rem 0.65rem; font-size: 0.92rem; white-space: pre-wrap; }
.wish-reply.mine { background: #DCEAF7; }
.wish-reply small { color: var(--muted); }
.wish-reply-form { display: flex; gap: 0.4rem; margin-top: 0.6rem; flex-wrap: wrap; }
.wish-reply-form input { flex: 1; min-width: 160px; }
.wish-form .wish-cats { margin-bottom: 0.6rem; }

/* Next in Line as the 5th stat card (update 138) */
.stat-next { border-left-color: #B7791F; }
.stat-next .next-name { font-size: 1.15rem; font-weight: 800; color: var(--primary); line-height: 1.2; margin: 0.9rem 0 0.6rem; }
.stats-grid.has-next .stat-next { grid-column: 1 / -1; }
@media (min-width: 768px) {
  .stats-grid.has-next { grid-template-columns: repeat(5, 1fr); }
  .stats-grid.has-next .stat-next { grid-column: auto; }
}

/* Dashboard banner, update 139: date, greeting, quick-glance chips, badge watermark */
.dash-banner { position: relative; overflow: hidden; border-top: 6px solid var(--primary); }
.dash-banner::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255,255,255,0.93) 0%, rgba(255,255,255,0.84) 40%, rgba(255,255,255,0.62) 100%), url('/banner-flag.jpg') no-repeat 70% 40% / cover; pointer-events: none; }
.banner-values { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.45rem; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--primary); }
.banner-values span { width: 22px; height: 3px; border-radius: 2px; background: #1E4FD8; }
.dash-banner img { position: relative; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.25)); }
.banner-text { position: relative; min-width: 0; }
.banner-kicker { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #C42B38; margin-bottom: 0.15rem; }
.dash-banner h2 { font-size: 1.5rem; letter-spacing: -0.01em; }
.banner-chips { position: relative; margin-left: auto; display: flex; flex-wrap: wrap; gap: 0.45rem; justify-content: flex-end; max-width: 52%; }
.banner-chip { background: #E7EDF5; border: 2px solid var(--primary); color: var(--primary); border-radius: 999px; padding: 0.4rem 0.85rem; font-size: 0.85rem; font-weight: 600; cursor: pointer; white-space: nowrap; font-family: inherit; }
.banner-chip b { font-size: 1rem; }
.banner-chip:hover { background: var(--primary); color: #fff; }
.banner-chip.warn { background: #FBF0DC; border-color: #7A4A00; color: #7A4A00; }
.banner-chip.hot { background: #FBE3E5; border-color: #C42B38; color: #9B1C27; }
@media (max-width: 900px) {
  .dash-banner { flex-wrap: wrap; }
  .banner-chips { margin-left: 0; max-width: none; justify-content: flex-start; flex-basis: 100%; }
  .dash-banner h2 { font-size: 1.1rem; }
  .banner-values { font-size: 0.68rem; letter-spacing: 0.12em; gap: 0.45rem; }
  .banner-values span { width: 14px; }
}
.banner-chip.ok { background: #E5F3EA; border-color: #1F6A3F; color: #1F6A3F; cursor: default; }
.banner-chip.ok:hover { background: #E5F3EA; color: #1F6A3F; }
#reserve-card.reserve-top { border: 2px solid var(--primary); border-left: 6px solid #B7791F; }
#reserve-card.reserve-top > h3 { color: var(--primary); font-size: 1.2rem; }
.task-ack { font-size: 0.82rem; font-weight: 700; margin-top: 0.35rem; }
.task-ack.seen { color: #1F6A3F; }
.task-ack.waiting { color: #7A4A00; }
.task-ack-btn { margin-top: 0.45rem; background: #5B3F99; border-color: #5B3F99; color: #fff; font-weight: 700; }
.task-row.needs-ack { box-shadow: inset 0 0 0 2px #5B3F99; }
#menu-btn { position: relative; }
#menu-btn.has-dot::after { content: ''; position: absolute; top: 6px; right: 6px; width: 10px; height: 10px; border-radius: 50%; background: #D0313F; box-shadow: 0 0 0 2px #3A3F47; }

.task-due-chip { display: inline-block; font-size: 0.75rem; font-weight: 800; padding: 0.15rem 0.55rem; border-radius: 999px; background: #DCEAF7; border: 1.5px solid var(--primary); color: var(--primary); white-space: nowrap; }
.task-due-chip.today { background: #FFE8CC; border-color: #F28C28; color: #7A3E00; }
.task-due-chip.late { background: #C42B38; border-color: #C42B38; color: #fff; }
.chip-label { align-self: center; font-size: 0.8rem; font-weight: 700; color: var(--muted); margin-right: 0.15rem; }
.task-due label small { font-weight: 400; color: var(--muted); }

/* Sidebar quick buttons (update 148): New Issue + Log Service side by side, no menu to open */
.nav-new { display: grid; grid-template-columns: 1fr 1fr; gap: 0.45rem; }
.nav-quick { display: flex; align-items: center; justify-content: center; gap: 0.3rem; padding: 0.6rem 0.4rem; border-radius: 999px; font-weight: 800; font-size: 0.86rem; text-decoration: none; white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,0.25); }
.nq-issue { background: #CFE0F5; border: 2px solid #8FB0DA; color: #102544; }
.nq-service { background: #E2E5E9; border: 2px solid #AEB6C1; color: #102544; }
.nav-quick:hover, .nav-quick.active { filter: brightness(1.07); outline: 2px solid #fff; outline-offset: 1px; }

/* ===== PATROL TAHOE ARTWORK ===== */
#login-view { display: flex; flex-direction: column; align-items: center; padding: 1rem 0 1.5rem; }
#login-view .login-card { top: 0; width: 100%; }
.login-tahoe { order: -1; display: block; width: min(250px, 70vw); height: auto; margin: 0 auto 0.75rem; filter: drop-shadow(0 14px 18px rgba(0,0,0,0.35)); animation: tahoe-in 0.9s cubic-bezier(.2,.8,.2,1) both; }
@media (max-width: 767px) { #login-view .login-card { margin: 0 1rem; width: auto; align-self: stretch; } }
@media (min-width: 1100px) {
  #login-view { padding-top: 10vh; }
  .login-tahoe { position: fixed; right: 3vw; bottom: 6vh; width: min(440px, calc(50vw - 250px)); margin: 0; }
}
@keyframes tahoe-in { from { transform: translateX(-60vw); opacity: 0; } to { transform: none; opacity: 1; } }
.all-good { text-align: center; padding: 0.4rem 0 0.2rem; }
.all-good img { display: block; width: min(220px, 70%); height: auto; margin: 0 auto 0.4rem; }
.all-good p { margin: 0; font-weight: 600; color: #1F6A3F; }
.tahoe-art { display: block; width: min(360px, 100%); height: auto; margin: 0.4rem auto 0.6rem; }
.drive-by { position: fixed; left: 0; right: 0; bottom: 0; height: 190px; z-index: 9999; pointer-events: auto; overflow: hidden; }
.drive-by img { position: absolute; bottom: 14px; left: 0; width: 300px; height: auto; filter: drop-shadow(0 8px 10px rgba(0,0,0,0.3)); animation: drive-across 3.6s cubic-bezier(.45,.05,.55,.95) forwards; }
.drive-msg { position: absolute; left: 50%; top: 0; transform: translateX(-50%); background: #E6EEF8; color: #102544; border: 2px solid #102544; border-radius: 999px; padding: 0.5rem 1rem; font-weight: 700; white-space: nowrap; max-width: 92vw; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 6px 16px rgba(0,0,0,0.2); animation: msg-fade 4s ease forwards; }
@keyframes drive-across { from { transform: translateX(-320px); } to { transform: translateX(calc(100vw + 20px)); } }
@keyframes msg-fade { 0%, 85% { opacity: 1; } 100% { opacity: 0; } }
@media (max-width: 767px) { .drive-by { bottom: 4.5rem; } .drive-by img { width: 220px; } .drive-msg { font-size: 0.88rem; white-space: normal; text-align: center; } }
@media (prefers-reduced-motion: reduce) { .login-tahoe, .drive-by img { animation: none; } .drive-by img { left: 50%; transform: translateX(-50%); } }

/* Banner: patch + badge | AMERICAN FORK POLICE FLEET + values | Tahoe, all centered */
.dash-banner { justify-content: center; }
.banner-row { position: relative; display: flex; align-items: center; justify-content: center; gap: 1.5rem; width: 100%; }
.dash-banner img.banner-badge { width: 96px; }
.dash-banner .banner-text { text-align: center; flex: 0 1 auto; min-width: 0; }
.dash-banner .banner-text h2 { font-size: 1.75rem; margin: 0 0 0.35rem; }
.dash-banner .banner-values { justify-content: center; }
.dash-banner img.banner-tahoe { width: 200px; height: auto; flex-shrink: 0; filter: drop-shadow(0 6px 8px rgba(0,0,0,0.25)); }
@media (min-width: 768px) and (max-width: 1100px) {
  .dash-banner img.banner-tahoe { width: 150px; }
  .dash-banner img.banner-badge { width: 76px; }
  .dash-banner .banner-text h2 { font-size: 1.4rem; }
}
@media (max-width: 767px) {
  .banner-row { gap: 0.6rem; }
  .dash-banner img.banner-badge { width: 52px; }
  .dash-banner img.banner-tahoe { width: 92px; }
  .dash-banner .banner-text h2 { font-size: 1rem; }
}
/* Top bar greeting on the home page, with the day and date on the opposite side */
.topbar h1.home-title { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; min-width: 0; }
.topbar h1.home-title .pt-date { font-size: 0.95rem; font-weight: 600; color: #C3CCD9; white-space: nowrap; }
@media (max-width: 767px) {
  .topbar h1.home-title { flex-direction: column; align-items: flex-start; gap: 0; font-size: 1.02rem; line-height: 1.2; }
  .topbar h1.home-title .pt-date { font-size: 0.78rem; }
}
/* Banner: black text and black top/bottom borders; the blue dividers between the values stay */
.dash-banner { border-color: #000; border-top-color: #000; }
.dash-banner::after { background: #000; }
.dash-banner .banner-text h2, .dash-banner .banner-values { color: #000; }
/* Banner text sits dead center: equal columns on each side for the badge and the Tahoe */
.banner-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.dash-banner img.banner-badge { justify-self: end; max-width: 100%; }
.dash-banner img.banner-tahoe { justify-self: start; max-width: 100%; }
@media (max-width: 767px) {
  .banner-row { gap: 0.45rem; }
  .dash-banner img.banner-badge { width: 44px; }
  .dash-banner img.banner-tahoe { width: 64px; }
  .dash-banner .banner-text h2 { font-size: 0.98rem; white-space: nowrap; }
  .dash-banner .banner-values { font-size: 0.6rem; letter-spacing: 0.1em; gap: 0.3rem; }
  .dash-banner .banner-values span { width: 10px; }
}
/* Greeting bar on the home page: pitch black */
.topbar.home-bar { background: #000; border-bottom-color: #000; }
/* Task card: Edit and Delete side by side */
.task-btns { display: flex; gap: 0.4rem; flex-shrink: 0; }
.task-del-btn { color: var(--danger); border-color: var(--danger); }
@media (max-width: 767px) { .task-btns { flex-direction: column; } }
/* Tasks: waiting tag, vehicle link, complete-with-action box */
.task-wait { display: inline-block; background: #EDE7F6; color: #4A2F86; border: 1.5px solid #5B3F99; border-radius: 999px; padding: 0.05rem 0.55rem; font-size: 0.78rem; font-weight: 700; margin-right: 0.35rem; }
.task-row.is-waiting { opacity: 0.92; }
.task-car { color: var(--primary); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.task-close { margin-top: 0.55rem; padding: 0.6rem; border: 2px solid #1F6A3F; border-radius: 10px; background: #E5F3EA; }
.task-close label { font-weight: 700; color: #1F6A3F; display: block; margin-bottom: 0.3rem; }
.task-close textarea { width: 100%; }
/* Task updates log (shop calls, pickup date changes, receipts) */
.upd-latest { margin-top: 0.4rem; font-size: 0.88rem; color: #24324A; background: #E7EDF5; border-left: 3px solid var(--primary); border-radius: 6px; padding: 0.35rem 0.55rem; }
.upd-toggle { background: none; border: none; color: var(--primary); font-weight: 700; text-decoration: underline; cursor: pointer; padding: 0 0 0 0.35rem; font: inherit; font-size: 0.82rem; }
.upd-log { margin-top: 0.35rem; border-left: 2px solid #B9CDE3; padding-left: 0.6rem; }
.upd-entry { padding: 0.35rem 0; border-bottom: 1px dashed var(--border); font-size: 0.88rem; }
.upd-entry:last-child { border-bottom: none; }
.upd-head span { color: var(--muted); font-size: 0.78rem; margin-left: 0.25rem; }
.upd-said { margin-top: 0.15rem; white-space: pre-wrap; }
.upd-moved { margin-top: 0.15rem; font-weight: 700; color: #7A4A00; }
.task-update { margin-top: 0.55rem; padding: 0.6rem; border: 2px solid var(--primary); border-radius: 10px; background: #E7EDF5; }
.task-update > label { font-weight: 700; color: var(--primary); display: block; margin-bottom: 0.3rem; }
.task-update textarea { width: 100%; }
.task-upd-btn { white-space: nowrap; }
@media (max-width: 767px) {
  .task-row:not(.editing) { flex-wrap: wrap; }
  .task-row:not(.editing) .task-main { flex: 1 1 calc(100% - 2.5rem); min-width: 0; }
  .task-row:not(.editing) .task-btns { flex-direction: row; width: 100%; justify-content: flex-end; flex-wrap: wrap; }
}
/* Sign-in screen without the Tahoe: card sits where it used to */
#login-view { padding-top: 12vh; }
@media (max-width: 767px) { #login-view { padding-top: 6vh; } }
/* My Vehicle: one line to the reserves instead of the whole list */
.res-link { display: flex; align-items: center; gap: 0.4rem; width: 100%; text-align: left; font: inherit; font-size: 1rem; cursor: pointer; color: var(--text); }
.res-link span { margin-left: auto; color: var(--primary); font-weight: 700; }
/* Top-bar search */
#top-search { color: #F1F3F5; }
#gsearch { position: fixed; inset: 0; z-index: 2000; background: rgba(0,0,0,0.45); display: flex; justify-content: center; align-items: flex-start; padding: 4.5rem 1rem 1rem; }
.gs-panel { width: min(560px, 100%); background: var(--card); border: 2px solid var(--primary); border-radius: 14px; padding: 0.8rem; box-shadow: 0 18px 40px rgba(0,0,0,0.35); max-height: 75vh; overflow: auto; }
#gs-input { width: 100%; margin-bottom: 0.5rem; }
.gs-item { display: block; width: 100%; text-align: left; background: var(--surface); border: 1.5px solid var(--border); border-radius: 10px; padding: 0.6rem 0.75rem; margin-bottom: 0.35rem; font: inherit; font-weight: 600; color: var(--text); cursor: pointer; }
.gs-item small { color: var(--muted); font-weight: 500; margin-left: 0.3rem; }
.gs-item:hover { border-color: var(--primary); }
/* Today: grouped reminder rows */
.today-card .todo-group { display: block; cursor: pointer; }
.todo-group summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; cursor: pointer; }
.todo-group summary::-webkit-details-marker { display: none; }
.todo-group summary::marker { content: ''; }
.todo-group summary .chevron { transition: transform 0.15s; }
.todo-group[open] summary .chevron { transform: rotate(90deg); }
.todo-count { font-size: 0.9rem; color: var(--text); margin-left: 0.4rem; }
.today-card .todo-group .todo-sub { margin: 0.5rem 0 0; padding: 0.6rem 0.5rem; border-bottom: none; border-top: 1px solid var(--border); flex-direction: row; align-items: center; }
/* Vehicles: compact one-line mode */
.row-list .list-item.vcard.vcompact { flex-direction: row; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.45rem 0.7rem; min-height: 0; cursor: pointer; border-radius: 10px; box-shadow: none; }
.row-list .list-item.vcard.vcompact .vhead-pill { font-size: 0.9rem; padding: 0.2rem 0.55rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-wrap: nowrap; }
.row-list .list-item.vcard.vcompact .badge { flex-shrink: 0; font-size: 0.75rem; padding: 0.15rem 0.5rem; }
.row-list:has(.vcompact) { gap: 0.35rem; }
.vcard.vcompact .vhead-pill { min-width: 0; overflow: hidden; }
.vcompact-btn { white-space: nowrap; flex-shrink: 0; }
/* Settings: email dry run */
.held-log { margin-top: 1rem; border-top: 1px solid var(--border); padding-top: 0.75rem; }
.held-log summary { cursor: pointer; font-weight: 700; color: var(--primary); }
.held-row { padding: 0.45rem 0; border-bottom: 1px dashed var(--border); }

/* Vehicle Ideas (169) */
.idea-label { display: block; font-weight: 700; margin: 0.2rem 0 0.4rem; }
.idea-scope { margin-bottom: 0.6rem; }
.idea-text { font-size: 1.02rem; font-weight: 600; color: var(--text); }
.idea-thumbs { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.45rem; }
.idea-thumbs img { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; border: 1.5px solid var(--border); }
.wish-status.st-looking-into-it { background: #B7791F; }
.wish-status.st-approved { background: #1B5FA8; }
a.gs-item { text-decoration: none; box-sizing: border-box; }
/* CSV download: white circle in the top bar (172) */
#top-csv { background: #fff; color: #102544; border: 2px solid #102544; border-radius: 50%; width: 2.25rem; height: 2.25rem; padding: 0; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(0,0,0,0.3); }
#top-csv[style*="none"] { display: none !important; }
#top-csv .ic { width: 1.15rem; height: 1.15rem; stroke: #102544; }
#top-csv:hover { background: #F1F4F8; }
/* Car drawings on vehicle cards (177) */
.vcard-top .vthumb { display: block; width: min(200px, 60%); height: auto; margin: -0.2rem auto 0.5rem; }
.vcompact .vthumb { width: 64px; height: auto; flex-shrink: 0; margin-left: auto; }
.act-print { background: #E6ECF4; color: #102544; border: 2px solid #102544; }
.fix-group { margin-top: 0.75rem; }
.fix-rows { display: grid; gap: 0.35rem; margin-top: 0.5rem; }
.fix-row { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; background: var(--surface); border: 1.5px solid var(--border); border-radius: 10px; padding: 0.5rem 0.7rem; cursor: pointer; }
.fix-row:hover { border-color: var(--primary); }
.fix-row small { color: var(--muted); }
/* Pick-or-type drop-downs (178): works on iPhone, where <datalist> barely shows */
.combo-wrap { position: relative; }
.combo-input { background-image: linear-gradient(45deg, transparent 50%, #102544 50%), linear-gradient(135deg, #102544 50%, transparent 50%); background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 2rem !important; }
.combo-box { position: absolute; left: 0; right: 0; top: 100%; z-index: 60; margin-top: 2px; background: var(--card); border: 2px solid var(--primary); border-radius: 10px; box-shadow: 0 10px 24px rgba(0,0,0,0.25); max-height: 240px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.combo-opt { display: block; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--border); padding: 0.65rem 0.8rem; font: inherit; color: var(--text); cursor: pointer; }
.combo-opt:last-child { border-bottom: 0; }
.combo-opt:hover, .combo-opt:active { background: var(--surface); }
/* Tahoe animations removed (179): the confirmation is just the message */
.drive-by { height: auto; bottom: 96px; pointer-events: auto; overflow: visible; }
.drive-by .drive-msg { position: static; transform: none; margin: 0 auto; width: fit-content; box-shadow: 0 6px 16px rgba(0,0,0,0.25); }
.drive-by img, .login-tahoe { animation: none !important; }
/* Sidebar: black, tighter rows so more fits (180) */
.sidebar { background: #000; }
.sidebar .nav { padding: 0.4rem 0.5rem; gap: 0; }
.sidebar .nav-link { padding: 0.4rem 0.75rem; gap: 0.65rem; font-size: 0.9rem; }
.sidebar .nav-link.nav-sub { padding-left: 2.4rem; }
.sidebar .nav-group { padding: 0.55rem 0.75rem 0.15rem; }
.sidebar-header { padding: 0.9rem 1rem 0.8rem; border-bottom-color: rgba(255,255,255,0.14); }
.sidebar-user { padding-top: 0.7rem; border-top-color: rgba(255,255,255,0.14); }
.sidebar .nav-link:hover { background: rgba(255,255,255,0.1); }
.sidebar .nav-link.active { background: rgba(255,255,255,0.16); }
/* Reserve Desk on the dashboard (186) */
.reserve-desk .today-head { margin-bottom: 0.2rem; }
.rd-row { border-top: 1px solid var(--border); padding: 0.6rem 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.rd-info { flex: 1; min-width: 200px; cursor: pointer; }
.rd-info .badge { margin-top: 0.3rem; }
.rd-in { white-space: nowrap; border: 2px solid #1F6A3F; color: #1F6A3F; background: #E3F1E8; font-weight: 700; }
.rd-form { width: 100%; background: var(--surface); border: 1.5px solid var(--border); border-radius: 12px; padding: 0.8rem; margin: 0.6rem 0; }
.rd-form .chips { margin-bottom: 0.7rem; }
.rd-form .check { display: flex; gap: 0.45rem; align-items: center; margin: 0.35rem 0 0.6rem; }
.rd-own-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.rd-own-row select { flex: 1; min-width: 180px; }
.rd-more { margin: 0.2rem 0 0.4rem; } .rd-more summary { cursor: pointer; color: var(--primary); font-weight: 600; }
/* Next in Line for everyone (188) */
.ro-row.ro-me { background: #E3ECF7; border-radius: 10px; box-shadow: inset 4px 0 0 var(--primary); }
.ro-you { margin: 0.6rem 0 0; font-size: 1.05rem; color: var(--primary); }
/* Maintenance History edit + pick-ups (189) */
.maint-row { position: relative; }
.maint-row .maint-edit { position: absolute; top: 0.5rem; right: 0.25rem; padding: 0.2rem 0.45rem; min-height: 0; }
.maint-row > div { padding-right: 2.4rem; }
.maint-form { width: 100%; }
.maint-form-btns { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.maint-moved { color: var(--muted); }
.svc-atshop { margin: -0.2rem 0 0.8rem; }
.pickup-card { border: 2px solid #F59E0B; background: #FFF7E6; }
.pickup-card h3 { margin-top: 0; color: #92400E; }
.pickup-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.6rem 0; border-top: 1px solid rgba(146, 64, 14, 0.2); }
.pickup-row:first-of-type { border-top: 0; }
.pickup-row .btn { white-space: nowrap; background: #16A34A; color: #fff; border: 0; }
/* Tap-to-edit vehicle tiles for Fleet/Admin (189) */
.tiles-editable > div.tile-tap { cursor: pointer; position: relative; transition: border-color 0.15s, box-shadow 0.15s; }
.tiles-editable > div.tile-tap::after { content: ''; position: absolute; top: 0.55rem; right: 0.6rem; width: 14px; height: 14px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B3A6B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L19 9l-4-4L4 16z'/%3E%3Cpath d='m13 7 4 4'/%3E%3C/svg%3E") no-repeat center / contain; opacity: 0.5; }
.tiles-editable > div.tile-tap:hover { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(30, 58, 95, 0.12); }
.tiles-editable > div.tile-tap:has(.tile-editor)::after { display: none; }
.status-live.tile-tap { cursor: pointer; }
.status-live.tile-tap::after { content: ''; display: inline-block; width: 0.8em; height: 0.8em; margin-left: 0.4em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L19 9l-4-4L4 16z'/%3E%3Cpath d='m13 7 4 4'/%3E%3C/svg%3E") no-repeat center / contain; opacity: 0.75; }
.tile-editor { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.15rem; }
.tile-editor input, .tile-editor select { width: 100%; font-size: 16px; padding: 0.45rem 0.55rem; }
.tile-editor-btns { display: flex; gap: 0.4rem; }
.status-live.tile-tap:has(.tile-editor) { background: #DCE3EC; color: var(--text); border-radius: 12px; padding: 0.5rem; }
.status-live.tile-tap:has(.tile-editor)::after, .status-live.tile-tap:has(.tile-editor) .dot { display: none; }
/* Home button in the top bar (194) */
#top-home { color: #F1F3F5; }
#top-home[style*="none"] { display: none !important; }
/* Open issues callout at the top of a vehicle page (195) */
.open-issues { margin-top: 1rem; background: #FFF4DB; border: 2px solid #F59E0B; border-radius: 14px; padding: 0.7rem 0.9rem 0.4rem; }
.oi-head { font-weight: 800; color: #92400E; font-size: 1rem; margin-bottom: 0.2rem; }
.oi-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.55rem 0; border-top: 1px solid rgba(146, 64, 14, 0.2); cursor: pointer; }
.oi-head + .oi-row { border-top: 0; }
.oi-row strong { color: var(--text); font-weight: 600; }
.oi-row small { color: #7C5A1E; }
/* Reserve Desk: expandable list of free reserves (196) */
.rd-free { margin: 0.35rem 0 0.2rem; border: 1px solid #C9D6E6; border-radius: 12px; background: #EEF3FA; }
.rd-free summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; padding: 0.55rem 0.8rem; font-size: 0.95rem; color: var(--text); }
.rd-free summary::-webkit-details-marker { display: none; }
.rd-free summary::after { content: '▾'; color: var(--primary); font-weight: 700; transition: transform 0.15s; }
.rd-free[open] summary::after { transform: rotate(180deg); }
.rd-free-hint { margin-left: auto; font-size: 0.78rem; color: var(--muted); }
.rd-free[open] .rd-free-hint { display: none; }
.rd-free-row { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; padding: 0.55rem 0.8rem; border-top: 1px solid #C9D6E6; cursor: pointer; }
.rd-free-row.down { opacity: 0.6; }
/* In-car equipment checklist (198) */
.eq-list { margin-top: 0.5rem; }
.eq-row { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; flex-wrap: wrap; padding: 0.6rem 0; border-top: 1px solid #DCE3EC; }
.eq-row:first-child { border-top: 0; }
.eq-name { flex: 1 1 10rem; min-width: 0; }
.eq-name small { color: var(--muted); }
.eq-row.missing .eq-name strong { color: #B91C1C; }
.eq-row.damaged .eq-name strong { color: #B45309; }
.eq-btns { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.eq-btn { border: 1px solid #C9D6E6; background: #EEF3FA; color: var(--text); border-radius: 999px; padding: 0.3rem 0.6rem; font-size: 0.8rem; font-weight: 600; cursor: pointer; }
.eq-btn.on[data-state="ok"] { background: #DCF2E3; border-color: #1F6A3F; color: #1F6A3F; }
.eq-btn.on[data-state="missing"] { background: #FDE2E2; border-color: #B91C1C; color: #B91C1C; }
.eq-btn.on[data-state="damaged"] { background: #FFF1D6; border-color: #B45309; color: #92400E; }
.eq-add { display: flex; gap: 0.5rem; margin-top: 0.6rem; }
.eq-add input { flex: 1; min-width: 0; }
.open-issues.eq-missing { background: #FDE8E8; border-color: #DC2626; cursor: pointer; padding-bottom: 0.6rem; }
.open-issues.eq-missing .oi-head { color: #991B1B; margin: 0; }
.eq-warn { color: #B91C1C; font-weight: 600; }

/* Vehicles tabs (update 212): premium stat tiles, big number + small caps label, color stripe per tab */
.tabs.veh-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; width: 100%; padding: 0; background: none; border-radius: 0; }
.veh-tabs .tab { --acc: var(--primary); position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.15rem; min-height: 60px; padding: 0.55rem 0.2rem 0.45rem;
  background: linear-gradient(180deg, #E8EBEF 0%, #D9DDE2 100%); border: 1px solid rgba(16, 37, 68, 0.10); border-radius: 14px; color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 1px 2px rgba(16, 37, 68, 0.06), 0 4px 10px rgba(16, 37, 68, 0.06);
  transition: transform 0.12s ease, box-shadow 0.12s ease; white-space: nowrap; line-height: 1; }
.veh-tabs .tab::before { content: ''; position: absolute; left: 22%; right: 22%; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: var(--acc); opacity: 0.85; }
.veh-tabs .tab:active { transform: scale(0.97); }
.veh-tabs .vt-num { font-size: 1.3rem; font-weight: 800; letter-spacing: -0.02em; color: var(--primary-dark); font-variant-numeric: tabular-nums; }
.veh-tabs .vt-num small { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.02em; margin-left: 0.15rem; color: var(--muted); }
.veh-tabs .vt-lbl { font-size: 0.64rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); }
.veh-tabs .tab.active { background: linear-gradient(160deg, #2A5592 0%, #1B3A6B 55%, #102544 100%); border-color: #102544; transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 6px 16px rgba(16, 37, 68, 0.35); }
.veh-tabs .tab.active::before { background: rgba(255, 255, 255, 0.85); }
.veh-tabs .tab.active .vt-num, .veh-tabs .tab.active .vt-num small { color: #fff; }
.veh-tabs .tab.active .vt-lbl { color: rgba(255, 255, 255, 0.78); }
.veh-tabs .vt-marked { --acc: #D0313F; }
.veh-tabs .vt-unmarked { --acc: #3A3F47; }
.veh-tabs .vt-chevrolet { --acc: #C9A227; }
.veh-tabs .vt-ford { --acc: #2A5592; }
.veh-tabs .vt-other { --acc: #7A8594; }
.veh-tabs .vt-reserves { --acc: #2F7D4F; }
.veh-tabs .vt-surplus { --acc: #A86400; }
@media (min-width: 900px) { .tabs.veh-tabs { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
/* Phones: 16px inputs so iOS never zooms in when you tap a box; nothing wider than the screen */
body { overflow-x: clip; }
@media (max-width: 760px) { input, select, textarea { font-size: 16px !important; } }

/* Forms page (update 215) */
.form-links { display: grid; gap: 0.6rem; }
.form-link { background: linear-gradient(180deg, #E8EBEF 0%, #D9DDE2 100%); border: 1px solid rgba(16, 37, 68, 0.10); border-radius: 14px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 2px 8px rgba(16, 37, 68, 0.06); overflow: hidden; }
.form-open { display: flex; align-items: center; gap: 0.8rem; padding: 0.85rem 1rem; color: var(--text); text-decoration: none; }
.form-ic { font-size: 1.5rem; line-height: 1; }
.form-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.form-txt b { font-size: 1rem; }
.form-txt small { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.form-open .chevron { color: var(--primary); font-weight: 800; }
.form-tools { display: flex; gap: 0.35rem; flex-wrap: wrap; padding: 0 1rem 0.75rem; }
.form-editor { margin-bottom: 0.75rem; }

/* Vehicle Assignment / Turn-in checklists (update 216) */
.cl-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 0.3rem; padding: 0.25rem; background: var(--surface); border-radius: 12px; margin-bottom: 0.75rem; }
.cl-seg button { border: none; font: inherit; font-weight: 700; padding: 0.6rem; border-radius: 9px; background: none; color: var(--muted); cursor: pointer; }
.cl-seg button.active { background: var(--primary); color: #fff; box-shadow: 0 2px 6px rgba(16, 37, 68, 0.25); }
.cl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0 0.75rem; }
.cl-h { margin: 1rem 0 0.5rem; font-size: 0.95rem; color: var(--primary-dark); }
.cl-h small { font-weight: 500; color: var(--muted); font-size: 0.78rem; margin-left: 0.3rem; }
.cl-row { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 0.5rem; }
.cl-pill, .cl-tile { display: flex; align-items: center; gap: 0.45rem; padding: 0.55rem 0.8rem; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); font-weight: 600; cursor: pointer; }
.cl-pill:has(input:checked), .cl-tile:has(input:checked) { border-color: var(--success); background: #D5E6DB; }
.cl-pill.cl-warn:has(input:checked) { border-color: var(--danger); background: #F0D3D6; }
.cl-pill input, .cl-tile input, .cl-check input { width: 20px; height: 20px; accent-color: var(--primary); margin: 0; }
.cl-equip { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.4rem; }
.cl-check { display: flex; align-items: center; gap: 0.4rem; }
.cl-replace { color: var(--danger); font-weight: 700; margin: 0.3rem 0; }
.cl-pending { color: var(--warning); font-weight: 700; margin: 0.3rem 0; }
.cl-wait { color: var(--warning); font-weight: 700; }
.cl-photo-btn { position: relative; display: inline-block; cursor: pointer; }
.cl-sigs { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0.75rem; margin: 1rem 0; }
.cl-sig { display: flex; flex-direction: column; gap: 0.35rem; }
.cl-sig label { font-weight: 700; font-size: 0.88rem; }
.cl-sig canvas { width: 100%; height: 130px; background: var(--card); border: 1px dashed var(--border); border-radius: 10px; touch-action: none; }
.cl-sig .btn { align-self: flex-start; }
.cl-sigs-done .cl-sig img { width: 100%; height: 90px; object-fit: contain; background: var(--card); border-radius: 10px; }
.cl-head { display: flex; flex-direction: column; margin-bottom: 0.5rem; }
.cl-head small { color: var(--muted); }
.cl-kvs { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 1rem; }
.cl-kv { display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.4rem 0; border-bottom: 1px solid rgba(16, 37, 68, 0.08); }
.cl-kv span { color: var(--muted); }
.cl-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0.3rem 1rem; }
.cl-yes { color: var(--success); font-weight: 800; }
.cl-no { color: var(--danger); font-weight: 800; }
.cl-start { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.4rem 0 0.6rem; }
.cl-start-big .btn { flex: 1 1 140px; }
.cl-forms-card { margin: 0.25rem 0 1rem; padding: 0.85rem 1rem; border-radius: 14px; background: var(--surface); border: 1px solid rgba(16, 37, 68, 0.10); }
.cl-forms-card h4 { margin: 0 0 0.3rem; }
.cl-forms-card h4 small { color: var(--muted); font-weight: 500; }

/* Shop Contacts (update 217) */
.ct-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0.6rem; }
.ct-card { padding: 0.85rem 1rem; border-radius: 14px; background: linear-gradient(180deg, #E8EBEF 0%, #D9DDE2 100%); border: 1px solid rgba(16, 37, 68, 0.10); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 2px 8px rgba(16, 37, 68, 0.06); }
.ct-top { display: flex; justify-content: space-between; gap: 0.5rem; align-items: flex-start; }
.ct-top b { font-size: 1.02rem; }
.ct-top small { color: var(--muted); }
.ct-type { flex: none; font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--primary); background: var(--surface); border-radius: 999px; padding: 0.2rem 0.55rem; }
.ct-acts { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.6rem; }
.ct-act { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.4rem 0.7rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); color: var(--primary-dark); font-weight: 600; font-size: 0.86rem; text-decoration: none; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-notes { margin: 0.55rem 0 0; color: var(--muted); font-size: 0.88rem; white-space: pre-wrap; }
.ct-tools { padding: 0.6rem 0 0; }

/* Checklist issues list + typed signatures (update 218) */
.cl-items { display: grid; gap: 0.5rem; margin-bottom: 0.5rem; }
.cl-item { padding: 0.6rem 0.7rem; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); display: grid; gap: 0.45rem; }
.cl-item-top { display: flex; align-items: center; gap: 0.5rem; }
.cl-item-top select { flex: 1; }
.cl-item-n { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--primary); color: #fff; font-weight: 800; font-size: 0.85rem; display: grid; place-items: center; }
.cl-item-x { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border); background: var(--card); color: var(--danger); font-size: 1.3rem; line-height: 1; cursor: pointer; }
.cl-item textarea { width: 100%; }
.cl-item-ph { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.cl-item-ph .photo-thumb { width: 52px; height: 52px; }
.cl-add-item { width: 100%; border-style: dashed; font-weight: 700; }
.cl-issues { margin: 0 0 0.5rem 1.2rem; display: grid; gap: 0.45rem; }
.cl-issue-type { display: inline-block; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--primary); background: var(--surface); border-radius: 999px; padding: 0.1rem 0.5rem; margin-right: 0.25rem; }
.cl-sig-type { width: 100%; font-family: 'Snell Roundhand', 'Segoe Script', 'Brush Script MT', cursive; font-size: 1.4rem !important; padding: 0.6rem 0.8rem; }
.cl-sig-switch { align-self: flex-start; border: none; background: none; color: var(--primary); font: inherit; font-weight: 600; font-size: 0.86rem; padding: 0.2rem 0; cursor: pointer; text-decoration: underline; }
.cl-sig-draw { display: flex; flex-direction: column; gap: 0.35rem; }
.cl-sig-draw[hidden] { display: none; }
.cl-sig-text { display: block; font-family: 'Snell Roundhand', 'Segoe Script', 'Brush Script MT', cursive; font-size: 1.7rem; color: var(--primary-dark); padding: 0.4rem 0.2rem; border-bottom: 1px solid var(--border); }

/* Portable batteries (update 219) */
.bt-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.45rem; margin-bottom: 0.6rem; }
@media (max-width: 600px) { .bt-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.bt-tile { --acc: var(--primary); position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.2rem; min-height: 62px; padding: 0.55rem 0.25rem 0.45rem; cursor: pointer;
  background: linear-gradient(180deg, #E8EBEF 0%, #D9DDE2 100%); border: 1px solid rgba(16, 37, 68, 0.10); border-radius: 14px; color: var(--text); font: inherit; line-height: 1.05;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 1px 2px rgba(16, 37, 68, 0.06), 0 4px 10px rgba(16, 37, 68, 0.06); }
.bt-tile::before { content: ''; position: absolute; left: 22%; right: 22%; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: var(--acc); }
.bt-tile .vt-num { font-size: 1.25rem; font-weight: 800; color: var(--primary-dark); }
.bt-tile .vt-lbl { font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); text-align: center; white-space: normal; }
.bt-tile.active { background: linear-gradient(160deg, #2A5592 0%, #1B3A6B 55%, #102544 100%); border-color: #102544; box-shadow: 0 6px 16px rgba(16, 37, 68, 0.35); }
.bt-tile.active .vt-num { color: #fff; } .bt-tile.active .vt-lbl { color: rgba(255, 255, 255, 0.8); } .bt-tile.active::before { background: rgba(255, 255, 255, 0.85); }
.bt-storage { --acc: #7A8594; } .bt-out { --acc: #2A5592; } .bt-needs { --acc: #A86400; } .bt-retired { --acc: #D0313F; } .bt-active { --acc: #2F7D4F; }
.bt-table tr.bt-click { cursor: pointer; }
.bt-table tr.bt-click:hover td { background: rgba(27, 58, 107, 0.06); }
div.bt-retired { margin: 0.4rem 0 0.8rem; padding: 0.7rem 0.9rem; border-radius: 12px; background: #F0D3D6; color: var(--text); }
.bt-hist { margin-top: 1rem; }
.bt-hist summary { cursor: pointer; font-weight: 700; color: var(--primary); }
.bt-hist-row { padding: 0.45rem 0; border-bottom: 1px solid rgba(16, 37, 68, 0.08); }
.bt-hist-row small { color: var(--muted); }
.bt-list { display: grid; gap: 0.45rem; }
.bt-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.65rem 0.85rem; border-radius: 12px; background: var(--surface); border: 1px solid rgba(16, 37, 68, 0.08); }
.bt-row.bt-click { cursor: pointer; }
.bt-row.bt-click:hover { border-color: var(--primary); }
.bt-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.bt-top { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; }
.bt-main small { color: var(--muted); }
.bt-main .bt-note { font-style: italic; }
.bt-noser { color: var(--muted); font-weight: 600; font-family: inherit; }
.bt-row .chevron { color: var(--primary); font-size: 1.3rem; }
/* Hide the bottom menu while the keyboard is up (update 220) */
body.typing .bottom-nav { display: none !important; }

/* Today's List on My Tasks (update 221) */
.todo-card { border-left: 4px solid var(--success); }
.todo-add { display: flex; gap: 0.5rem; margin: 0.4rem 0 0.7rem; }
.todo-add input { flex: 1; min-width: 0; padding: 0.7rem 0.9rem; }
.todo-add .btn { min-width: 48px; font-size: 1.3rem; padding: 0 0.9rem; }
.todo-list { display: grid; gap: 0.35rem; }
.todo-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.7rem; border-radius: 10px; background: var(--surface); border: 1px solid rgba(16, 37, 68, 0.08); }
.todo-check { flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.6rem; cursor: pointer; }
.todo-check input { width: 22px; height: 22px; flex: none; accent-color: var(--success); margin: 0; }
.todo-text { font-weight: 600; overflow-wrap: anywhere; }
.todo-item.done .todo-text { text-decoration: line-through; color: var(--muted); font-weight: 500; }
.todo-from { flex: none; font-size: 0.72rem; font-weight: 700; color: var(--warning); }
.todo-act { flex: none; border: 1px solid var(--border); background: var(--card); color: var(--primary); font: inherit; font-size: 0.78rem; font-weight: 700; border-radius: 999px; padding: 0.25rem 0.55rem; cursor: pointer; }
.todo-x { color: var(--danger); font-size: 1.05rem; line-height: 1; padding: 0.2rem 0.5rem; }
/* Vehicle page: My Tasks for this car (update 222) */
.veh-tasks .prio { font-size: 0.68rem; padding: 0.05rem 0.45rem; vertical-align: middle; }
.vt-done { margin-top: 0.6rem; }
.vt-done summary { cursor: pointer; font-weight: 700; color: var(--muted); }
.vt-pills { display: flex; gap: 0.35rem; flex-wrap: wrap; margin-top: 0.3rem; }
.vt-pill { font-size: 0.74rem; font-weight: 800; border-radius: 999px; padding: 0.15rem 0.6rem; border: 1px solid transparent; }
.vt-pill.act { background: var(--primary); color: #fff; }
.vt-pill.done { background: #D5E6DB; color: var(--success); border-color: rgba(47, 125, 79, 0.35); }
.vt-pill.zero { background: var(--surface); color: var(--muted); border-color: var(--border); }
.vt-none { padding: 0.7rem 0.85rem; border-radius: 10px; background: var(--surface); border: 1px dashed var(--border); font-weight: 600; color: var(--text); }

/* ===== Apple-style type (update 224): San Francisco on Apple devices, Inter (its closest free match) everywhere else ===== */
:root {
  --font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --text: #1D1D1F;
}
body { font-family: var(--font); letter-spacing: -0.011em; line-height: 1.47; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
button, input, select, textarea { font-family: inherit; letter-spacing: inherit; }
h1, h2, h3, h4, .page-title, .brand-title, .carline-h { font-family: var(--display); letter-spacing: -0.022em; text-wrap: balance; }
h2 { font-weight: 700; }
h3 { font-weight: 650; }
.page-title { font-weight: 700; }
small, .co-hint { letter-spacing: -0.005em; }
.tab-count, .vt-num, td, .mono { font-variant-numeric: tabular-nums; }

/* Inline line icons that replace emojis */
.ic.ic-inline { width: 1.05em; height: 1.05em; vertical-align: -0.16em; stroke-width: 1.9; margin-right: 0.12em; }
h1 .ic-inline, h2 .ic-inline, h3 .ic-inline, h4 .ic-inline, summary .ic-inline { color: var(--primary); width: 1.1em; height: 1.1em; }
.btn.primary .ic-inline, .tab.active .ic-inline, .bt-tile.active .ic-inline { color: inherit; }
.ic-ok { color: var(--success) !important; } .ic-warn { color: var(--warning) !important; } .ic-bad { color: var(--danger) !important; }
.badge .ic-inline, .chip .ic-inline, .vt-pill .ic-inline { color: inherit !important; }
.ic-dot { display: inline-block; width: 0.55em; height: 0.55em; border-radius: 50%; background: var(--success); margin-right: 0.3em; vertical-align: 0.05em; }

/* Dashboard Today + Recent Issues: each car row is its own outlined card (update 225) */
.today-card .todo-row, .recent-issue {
  border-top: 1px solid rgba(29, 29, 31, 0.55); border-right: 1px solid rgba(29, 29, 31, 0.55); border-bottom: 1px solid rgba(29, 29, 31, 0.55);
  border-radius: 12px; margin: 0 0 0.55rem; background: var(--card); box-shadow: 0 1px 2px rgba(16, 37, 68, 0.06);
}
.today-card .todo-row:last-of-type, .recent-issue:last-child { margin-bottom: 0.2rem; }
.recent-issue:not([class*="prio-row-"]):not(.ri-done) { border-left: 1px solid rgba(29, 29, 31, 0.55); }

/* Other page (update 226): locked notes grid */
.other-lock { max-width: 420px; margin: 1.5rem auto; text-align: center; }
.other-lock form { text-align: left; margin-top: 0.8rem; }
.other-lock .btn { width: 100%; }
.other-lock-ic { width: 54px; height: 54px; margin: 0 auto 0.4rem; border-radius: 50%; display: grid; place-items: center; background: #DCEAF7; color: var(--primary); }
.other-lock-ic .ic { width: 26px; height: 26px; }
.other-msg { color: var(--danger); font-weight: 600; min-height: 1.2em; margin-bottom: 0.5rem; }
.other-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.8rem; }
.other-head h2 { margin: 0 auto 0 0; }
.other-saved { font-size: 0.8rem; }
.other-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.other-cell { width: 100%; box-sizing: border-box; resize: vertical; min-height: 4.2rem; font: inherit; font-size: 16px; padding: 0.55rem 0.65rem; border: 1px solid rgba(29, 29, 31, 0.35); border-radius: 10px; background: var(--card); color: var(--text); }
.other-cell:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(31, 78, 140, 0.18); }

/* Coming Soon page (update 230) */
.cs-hero { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.8rem; background: linear-gradient(135deg, #102544 0%, #1F4E8C 100%); color: #fff; padding: 1.4rem 1.4rem 1.3rem; }
.cs-hero-txt { flex: 1 1 260px; }
.cs-hero h2 { color: #fff; font-size: 1.9rem; margin: 0.15rem 0 0.35rem; letter-spacing: -0.02em; }
.cs-hero p { margin: 0; color: rgba(255, 255, 255, 0.82); max-width: 560px; }
.cs-kicker { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #9CC3F0; }
.cs-hero .btn.primary { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.35); color: #fff; }
.cs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 0.8rem; margin-top: 0.8rem; }
.cs-tile { background: var(--card); border: 1px solid rgba(29, 29, 31, 0.18); border-radius: 16px; padding: 1rem 1.05rem; box-shadow: 0 1px 3px rgba(16, 37, 68, 0.07); display: flex; flex-direction: column; }
.cs-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.6rem; }
.cs-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: #DCEAF7; color: var(--primary); }
.cs-ic .ic { width: 22px; height: 22px; }
.cs-tile h3 { margin: 0 0 0.25rem; font-size: 1.08rem; }
.cs-tile p { margin: 0; color: var(--muted, #555); font-size: 0.9rem; line-height: 1.4; flex: 1; }
.cs-pill { font-size: 0.7rem; font-weight: 800; padding: 0.22rem 0.6rem; border-radius: 999px; letter-spacing: 0.03em; background: #E6E8EC; color: #4A5260; }
.cs-pill.cs-in-progress { background: #FFE8CC; color: #7A3E00; }
.cs-pill.cs-almost-ready { background: #D6F2DF; color: #176B2C; }
.cs-tools { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.75rem; padding-top: 0.6rem; border-top: 1px solid rgba(29, 29, 31, 0.1); }
.cs-icpick { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.cs-icbtn { width: 40px; height: 40px; border-radius: 10px; border: 1px solid rgba(29, 29, 31, 0.25); background: var(--card); color: var(--primary); display: grid; place-items: center; cursor: pointer; }
.cs-icbtn.on { background: var(--primary); color: #fff; border-color: var(--primary); }
.cs-icbtn .ic { width: 20px; height: 20px; }

/* Coming Soon dashboard banner (update 231): dark glass with a red/blue light-bar glow */
#nav-comingsoon[hidden] { display: none !important; }
.csb { position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr; grid-template-areas: "head go" "chips chips"; gap: 0.9rem 1.2rem; align-items: center;
  width: 100%; text-align: left; cursor: pointer; margin: 0 0 1rem; padding: 1.25rem 1.4rem 1.2rem; border-radius: 20px; color: #fff; font: inherit;
  background: radial-gradient(120% 140% at 50% -40%, #1B2C4D 0%, #0A1222 55%, #05080F 100%); border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 10px 30px rgba(5, 8, 15, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08); transition: transform 0.15s ease, box-shadow 0.15s ease; }
.csb:hover { transform: translateY(-1px); box-shadow: 0 14px 36px rgba(5, 8, 15, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.1); }
.csb::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, #E5243B 0%, #E5243B 42%, #fff 50%, #2F7BFF 58%, #2F7BFF 100%); }
.csb-glow { position: absolute; top: -70px; width: 260px; height: 160px; border-radius: 50%; filter: blur(42px); opacity: 0.55; pointer-events: none; animation: csb-flash 2.4s ease-in-out infinite; }
.csb-red { left: -60px; background: #E5243B; }
.csb-blue { right: -60px; background: #2F7BFF; animation-delay: 1.2s; }
@keyframes csb-flash { 0%, 100% { opacity: 0.18; } 45%, 55% { opacity: 0.6; } }
.csb > :not(.csb-glow) { position: relative; }
.csb-head { grid-area: head; display: flex; flex-direction: column; }
.csb-kicker { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; color: #8FB6FF; }
.csb-title { font-family: "Orbitron", var(--display); font-weight: 900; font-size: clamp(1.7rem, 4.2vw, 2.5rem); line-height: 1.05; letter-spacing: 0.06em; text-transform: uppercase; margin: 0.25rem 0 0.3rem;
  background: linear-gradient(90deg, #FF5A6B 0%, #FFFFFF 50%, #6BA4FF 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.csb-sub { color: rgba(255, 255, 255, 0.75); font-size: 0.92rem; }
.csb-go { grid-area: go; justify-self: end; display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; font-weight: 700; font-size: 0.9rem; padding: 0.6rem 1rem; border-radius: 999px;
  background: rgba(255, 255, 255, 0.10); border: 1px solid rgba(255, 255, 255, 0.22); color: #fff; }
.csb-go .ic { width: 18px; height: 18px; }
.csb-chips { grid-area: chips; display: flex; flex-wrap: wrap; gap: 0.45rem; }
.csb-chip { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; font-weight: 600; padding: 0.38rem 0.75rem; border-radius: 999px;
  background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.92); }
.csb-chip .ic { width: 15px; height: 15px; color: #8FB6FF; }
.csb-dot { width: 7px; height: 7px; border-radius: 50%; background: #F5A524; box-shadow: 0 0 6px #F5A524; }
.csb-dot.is-ready { background: #3DDC84; box-shadow: 0 0 6px #3DDC84; }
@media (max-width: 640px) {
  .csb { grid-template-columns: 1fr; grid-template-areas: "head" "chips" "go"; padding: 1.1rem 1rem; }
  .csb-go { justify-self: stretch; justify-content: center; }
  .csb-chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 -1rem; padding: 0 1rem 0.2rem; scrollbar-width: none; }
  .csb-chips::-webkit-scrollbar { display: none; }
  .csb-chip { flex: 0 0 auto; }
}
@media (prefers-reduced-motion: reduce) { .csb-glow { animation: none; } }

/* Crossing Guards (update 232) */
.cg-top { padding-bottom: 0.9rem; }
.cg-title { display: flex; align-items: center; gap: 0.7rem; }
.cg-title h2 { margin: 0; } .cg-title small { color: var(--muted); }
.cg-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: #F9D9DC; color: #B3261E; }
.cg-ic .ic { width: 24px; height: 24px; }
.cg-today { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; margin: 0.9rem 0; }
.cg-today > div, .cg-times > div { background: var(--surface); border-radius: 12px; padding: 0.55rem 0.75rem; }
.cg-k { display: block; font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.cg-tabs .chip { min-height: 38px; padding: 0.35rem 0.85rem; font-size: 0.88rem; }
.cg-h { margin: 1rem 0 0.5rem; display: flex; align-items: center; gap: 0.4rem; }
.cg-sub { font-style: normal; font-size: 0.68rem; font-weight: 800; padding: 0.12rem 0.5rem; border-radius: 999px; background: #DCEAF7; color: var(--primary); margin-left: 0.35rem; vertical-align: middle; }
.cg-sub.cg-warn { background: #FFE8CC; color: #7A3E00; } .cg-sub.cg-off { background: #E6E8EC; color: #4A5260; }
.cg-period { display: flex; align-items: center; gap: 0.6rem; justify-content: space-between; text-align: center; }
.cg-period small { display: block; color: var(--muted); }
.cg-progress { height: 8px; border-radius: 99px; background: var(--surface); overflow: hidden; margin: 0.8rem 0 0.3rem; }
.cg-progress div { height: 100%; background: #2E8B57; border-radius: 99px; }
.cg-ts { display: grid; grid-template-columns: minmax(170px, 1.4fr) 130px 150px auto 1fr auto; gap: 0.45rem; align-items: center; padding: 0.5rem 0.6rem; border: 1px solid rgba(29, 29, 31, 0.35); border-radius: 12px; margin-bottom: 0.45rem; background: var(--card); }
.cg-ts.is-got { border-color: #2E8B57; box-shadow: inset 4px 0 0 #2E8B57; }
.cg-ts select, .cg-ts input:not([type=checkbox]) { min-width: 0; padding: 0.4rem 0.5rem; font-size: 0.9rem; }
.cg-check { display: flex; gap: 0.55rem; align-items: center; font-weight: 700; cursor: pointer; }
.cg-check input { width: 22px; height: 22px; flex: 0 0 auto; }
.cg-check small { display: block; font-weight: 500; color: var(--muted); font-size: 0.78rem; }
.cg-printed { font-size: 0.85rem; white-space: nowrap; display: flex; gap: 0.3rem; align-items: center; }
.cg-addsub { margin-top: 0.6rem; }
.cg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0.6rem; }
.cg-guard { border: 1px solid rgba(29, 29, 31, 0.35); border-radius: 12px; padding: 0.7rem 0.8rem; background: var(--card); }
.cg-guard.is-off { opacity: 0.6; }
.cg-g-top { display: flex; align-items: center; flex-wrap: wrap; gap: 0.2rem; }
.cg-g-top .btn { margin-left: auto; }
.cg-g-where { color: var(--muted); font-size: 0.88rem; margin: 0.2rem 0 0.4rem; }
.cg-g-contact { display: flex; flex-wrap: wrap; gap: 0.35rem 0.8rem; font-size: 0.88rem; }
.cg-g-contact a { display: inline-flex; align-items: center; gap: 0.25rem; color: var(--primary); font-weight: 600; text-decoration: none; word-break: break-all; }
.cg-g-notes { margin-top: 0.45rem; font-size: 0.85rem; background: var(--surface); border-radius: 8px; padding: 0.4rem 0.55rem; }
.cg-contacts { margin-top: 1rem; font-size: 0.9rem; display: grid; gap: 0.3rem; }
.cg-form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0 0.7rem; }
.cg-eqpick { display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; align-items: center; }
.cg-eqpick input[name=cones] { max-width: 180px; }
.cg-schools { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 0.7rem; }
.cg-school { border: 1px solid rgba(29, 29, 31, 0.35); border-radius: 12px; padding: 0.75rem 0.85rem; background: var(--card); margin-bottom: 0.6rem; }
.cg-school h4 { margin: 0 0 0.5rem; }
.cg-times { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; margin-bottom: 0.55rem; }
.cg-xing { border-left: 3px solid #2E8B57; padding: 0.15rem 0 0.15rem 0.55rem; margin: 0.35rem 0; }
.cg-xing.no-guard { border-left-color: #F28C28; }
.cg-xing small { display: block; color: var(--muted); }
.cg-on { margin-top: 0.5rem; font-size: 0.85rem; font-weight: 600; color: var(--primary); }
.cg-xedit { display: grid; grid-template-columns: 1fr 1.4fr auto auto; gap: 0.4rem; align-items: center; margin-top: 0.4rem; }
.cg-pp { margin-bottom: 1rem; } .cg-pp.is-past { opacity: 0.6; }
.cg-pp-h { font-weight: 800; margin-bottom: 0.4rem; }
.cg-pp.is-cur .cg-pp-h { color: var(--primary); }
.cg-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.3rem; }
.cg-dow { font-size: 0.7rem; font-weight: 800; color: var(--muted); text-align: center; text-transform: uppercase; }
.cg-dayc { min-height: 58px; border: 1px solid rgba(29, 29, 31, 0.25); border-radius: 10px; background: var(--card); padding: 0.3rem; text-align: left; font: inherit; cursor: pointer; display: flex; flex-direction: column; gap: 0.1rem; color: var(--text); }
.cg-dayc b { font-size: 0.85rem; } .cg-dayc small { font-size: 0.66rem; line-height: 1.15; font-weight: 700; }
.cg-dayc.is-off { background: #F9D9DC; border-color: #D0313F; color: #8A1C25; }
.cg-dayc.is-note { background: #FFE8CC; border-color: #F28C28; color: #7A3E00; }
.cg-dayc.is-due { box-shadow: inset 0 -3px 0 #2E8B57; } .cg-due { color: #1E6B40; }
.cg-dayc.is-today { outline: 2px solid var(--primary); outline-offset: 1px; }
.cg-eqtable { overflow-x: auto; }
.cg-eqtable table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.cg-eqtable th { font-size: 0.7rem; text-transform: uppercase; color: var(--muted); text-align: center; padding: 0.4rem; }
.cg-eqtable th:first-child, .cg-eqtable td:first-child { text-align: left; }
.cg-eqtable td { border-top: 1px solid rgba(29, 29, 31, 0.15); padding: 0.4rem; text-align: center; }
.cg-eqtable td small { display: block; color: var(--muted); }
.cg-eqtable tfoot td { font-weight: 800; color: #B3261E; }
.cg-eqbtn { border: 0; background: transparent; cursor: pointer; width: 36px; height: 32px; border-radius: 8px; font: inherit; }
.cg-eqbtn:hover { background: var(--surface); }
.cg-yes { color: #2E8B57; } .cg-no { color: var(--muted); }
.cg-idc { font-size: 0.72rem; font-weight: 800; padding: 0.15rem 0.5rem; border-radius: 99px; }
.cg-id-yes { background: #D6F2DF; color: #176B2C; } .cg-id-no { background: #F9D9DC; color: #8A1C25; } .cg-id-pending { background: #FFE8CC; color: #7A3E00; }
@media (max-width: 760px) {
  .cg-today { grid-template-columns: 1fr; gap: 0.4rem; }
  .cg-ts { grid-template-columns: 1fr 1fr; }
  .cg-ts .cg-check, .cg-ts input[data-f=note] { grid-column: 1 / -1; }
  .cg-xedit { grid-template-columns: 1fr 1fr; }
  .cg-dayc { min-height: 50px; padding: 0.2rem; } .cg-dayc small { font-size: 0.58rem; }
}

/* Update 233: tasks tied to issues and cars */
.task-issues { display: flex; flex-direction: column; gap: 0.35rem; margin: 0.45rem 0 0.2rem; align-items: flex-start; }
.ti-issue { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; text-decoration: none; color: var(--text); font-size: 0.88rem; font-weight: 600; background: #FFF4DB; border: 1px solid #F59E0B; border-radius: 10px; padding: 0.3rem 0.6rem; }
.ti-issue small { color: #7A3E00; font-weight: 700; }
.ti-lbl, .oi-lbl { font-size: 0.66rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.1rem 0.45rem; border-radius: 99px; background: #F59E0B; color: #fff; vertical-align: middle; }
.oi-lbl.oi-task { background: var(--primary); }
.ti-closed { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; font-size: 0.88rem; font-weight: 600; background: #D6F2DF; border: 1px solid #2E8B57; color: #176B2C; border-radius: 10px; padding: 0.35rem 0.6rem; }
.open-issues.on-car.is-clear { background: var(--card); border-color: rgba(29, 29, 31, 0.3); }
.open-issues.on-car.is-clear .oi-head { color: #176B2C; }
.oi-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; padding: 0.5rem 0 0.4rem; }
.oi-foot .vt-done { flex: 1 1 100%; }
.oi-foot .vt-done summary { cursor: pointer; font-weight: 700; font-size: 0.88rem; color: var(--muted); }
.todo-title { font-size: 0.95rem; }
.todo-row.todo-task { border-left-color: var(--primary); }

/* Update 234: folding sidebar groups, Crossing Guards in orange and gold */
#sidebar .nav-group { display: flex; align-items: center; justify-content: space-between; cursor: pointer; user-select: none; border-radius: 8px; }
#sidebar .nav-group:hover { color: #C9D3E0; }
#sidebar .nav-group .nav-caret { width: 14px; height: 14px; opacity: 0.7; transition: transform 0.15s ease; }
#sidebar .nav-group.is-folded .nav-caret { transform: rotate(-90deg); }
#sidebar .nav-link.nav-folded { display: none !important; }
.cg-navtxt { background: linear-gradient(90deg, #FF8A00 0%, #FFB000 50%, #FFD43B 100%); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 700; }
#nav-guards .ic { color: #FFA41B; opacity: 1; }
.cg-grad { background: linear-gradient(90deg, #E65C00 0%, #F28C00 55%, #E0A800 100%); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 800; }
.cg-ic { background: linear-gradient(135deg, #FFE7B8, #FFD27A); color: #D35400; }
.cg-today-pub { grid-template-columns: 1fr; }

/* Update 236: Next in Line heat colors, red (oldest) → orange → yellow → green (newest) */
.ro-place.ro-heat { --ro-h: 120; background: radial-gradient(circle at 32% 28%, hsl(var(--ro-h) 95% 68%) 0%, hsl(var(--ro-h) 85% 47%) 55%, hsl(var(--ro-h) 80% 36%) 100%);
  color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35); box-shadow: 0 0 0 3px hsl(var(--ro-h) 85% 47% / 0.22), 0 2px 6px hsl(var(--ro-h) 80% 30% / 0.35); }
.ro-place.ro-heat[data-ink="dark"] { color: #3A2A00; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45); }
.ro-legend { display: flex; align-items: center; gap: 0.6rem; font-size: 0.75rem; font-weight: 700; color: var(--muted); margin: 0.2rem 0 0.8rem; }
.ro-legend i { flex: 1; height: 8px; border-radius: 99px; background: linear-gradient(90deg, hsl(0 85% 47%), hsl(30 90% 50%), hsl(55 95% 50%), hsl(90 75% 45%), hsl(120 70% 38%)); }

/* Update 237: upgrade qualifications */
.ro-quals { margin: 0.9rem 0 0.4rem; padding: 0.8rem 1rem; border-radius: 12px; background: var(--surface); border-left: 4px solid hsl(120 70% 38%); }
.ro-goal { margin: 0 0 0.5rem; font-weight: 700; color: var(--text); }
.ro-quals h4 { margin: 0 0 0.3rem; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.ro-quals ol { margin: 0; padding-left: 1.3rem; } .ro-quals li { margin: 0.15rem 0; }

/* Update 239: smaller quick pills and a more compact command sidebar */
body.cmd-nav .nav-new { gap: 0.35rem; padding: 0.1rem 0.15rem 0.15rem; }
body.cmd-nav .nav-quick { padding: 0.38rem 0.3rem; font-size: 0.74rem; gap: 0.2rem; border-width: 1.5px; }
body.cmd-nav .sidebar .nav-link { padding: 0.32rem 0.7rem; gap: 0.55rem; font-size: 0.82rem; }
body.cmd-nav .sidebar .nav-link .ic { width: 16px; height: 16px; }
body.cmd-nav .sidebar .nav-link.nav-sub { padding-left: 2.2rem; }
body.cmd-nav .sidebar .nav-group { font-size: 0.62rem; padding: 0.45rem 0.7rem 0.1rem; }
body.cmd-nav .sidebar .nav-badge { font-size: 0.66rem; min-width: 1.2rem; height: 1.2rem; }

/* Update 240: premium desktop dashboard for command (compact rows, aligned columns, quieter chrome) */
@media (min-width: 1100px) {
  body.cmd-nav .new-issue-row { margin: 0 0 0.9rem; }
  body.cmd-nav .btn.new-issue-pill { font-size: 0.86rem; padding: 0.5rem 1.05rem; border-width: 1.5px; box-shadow: 0 2px 8px rgba(27, 54, 93, 0.28); }
  body.cmd-nav .dash-cols { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 1rem; }
  body.cmd-nav .dash-cols .card { border-radius: 16px; padding: 0.95rem 1.05rem 1rem; margin-bottom: 1rem; border: 1px solid rgba(16, 37, 68, 0.14); box-shadow: 0 1px 2px rgba(16, 37, 68, 0.06), 0 8px 24px rgba(16, 37, 68, 0.07); }
  body.cmd-nav .dash-cols .today-card { border-left: 1px solid rgba(16, 37, 68, 0.14); }
  body.cmd-nav .dash-cols .today-head { padding-bottom: 0.6rem; margin-bottom: 0.65rem; border-bottom: 1px solid rgba(16, 37, 68, 0.12); }
  body.cmd-nav .dash-cols .today-head h3, body.cmd-nav .dash-cols .card summary h3 { font-size: 1rem; letter-spacing: 0.01em; }
  body.cmd-nav .dash-cols .tab-count { font-size: 0.72rem; }

  /* Car chip: same identity pill, a size down */
  body.cmd-nav .dash-cols .carline { font-size: 0.84rem; padding: 0.1rem 0.6rem 0.1rem 0.55rem; border-width: 1.5px; gap: 0.15rem 0.4rem; }
  body.cmd-nav .dash-cols .carline .driver-pill { font-size: 0.7rem; padding: 0.08rem 0.5rem; }
  body.cmd-nav .dash-cols .chevron { font-size: 1.1rem; opacity: 0.6; }

  /* Today: one tidy line per item, tags lined up in their own column */
  body.cmd-nav .today-card .todo-list { gap: 0; }
  body.cmd-nav .today-card .todo-row { margin: 0 0 0.4rem; padding: 0.5rem 0.7rem 0.5rem 0.75rem; border-radius: 11px; border: 1px solid rgba(16, 37, 68, 0.13); border-left-width: 3px; box-shadow: none; background: rgba(255, 255, 255, 0.28); }
  body.cmd-nav .today-card .todo-row:hover { background: rgba(255, 255, 255, 0.55); }
  /* Narrower laptops: tag and car share the first line, details underneath */
  body.cmd-nav .today-card .todo-top { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; }
  body.cmd-nav .today-card .todo-what { font-size: 0.64rem; padding: 0.22rem 0.6rem; border: 0; box-shadow: none; letter-spacing: 0.06em; }
  body.cmd-nav .today-card .carline { flex-wrap: nowrap; white-space: nowrap; }
  body.cmd-nav .today-card .todo-main small { font-size: 0.78rem; line-height: 1.3; }
  body.cmd-nav .today-card .todo-title { font-size: 0.9rem; }
  body.cmd-nav .today-card .todo-count { font-size: 0.85rem; margin: 0; }
  body.cmd-nav .today-card .todo-group .todo-sub { margin-top: 0.4rem; padding: 0.45rem 0.4rem 0.2rem; }

  /* Recent Issues: chip and priority on one line, a one-line summary, then the meta line */
  body.cmd-nav .ri-tabs { margin-bottom: 0.65rem; padding-bottom: 0.6rem; border-bottom: 1px solid rgba(16, 37, 68, 0.12); }
  body.cmd-nav .ri-tabs .tab { font-size: 0.86rem; padding: 0.35rem 0.8rem; }
  body.cmd-nav .recent-issue { margin: 0 0 0.4rem; padding: 0.55rem 0.7rem 0.55rem 0.75rem; border-radius: 11px; border: 1px solid rgba(16, 37, 68, 0.13); border-left-width: 3px; box-shadow: none; background: rgba(255, 255, 255, 0.28); }
  body.cmd-nav .recent-issue:hover { background: rgba(255, 255, 255, 0.55); }
  body.cmd-nav .recent-issue .ri-top { flex-wrap: wrap; gap: 0.3rem 0.35rem; min-width: 0; }
  body.cmd-nav .recent-issue .ri-top .badge { font-size: 0.68rem; padding: 0.1rem 0.45rem; flex: none; }
  body.cmd-nav .recent-issue .ri-top > *:not(.carline) { white-space: nowrap; }
  body.cmd-nav .recent-issue .ri-desc { font-size: 0.86rem; margin: 0.3rem 0 0.1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.cmd-nav .recent-issue small { font-size: 0.76rem; }

  /* Reserve Desk and the fold-down cards */
  body.cmd-nav .reserve-desk .today-head h3 { font-size: 1rem; }
  body.cmd-nav .reserve-desk .btn.new-issue-pill, body.cmd-nav .reserve-desk .today-head .btn { font-size: 0.82rem; padding: 0.4rem 0.95rem; box-shadow: 0 2px 6px rgba(27, 54, 93, 0.25); }
  body.cmd-nav .dash-cols details.card.collapsible { padding: 0.8rem 1.05rem; }
  body.cmd-nav .dash-cols .collapse-hint { font-size: 0.78rem; }
  /* Stat tiles: number circle beside its label, so the row sits lower and tidier */
  body.cmd-nav .stats-grid { gap: 0.8rem; margin-bottom: 0.9rem; }
  body.cmd-nav .stats-grid .stat-card:not(.stat-next) { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 0.8rem; row-gap: 0.1rem; align-items: center; padding: 0.8rem 0.95rem; }
  body.cmd-nav .stats-grid .stat-card:not(.stat-next) .number { grid-column: 1; grid-row: 1 / span 2; margin: 0; }
  body.cmd-nav .stats-grid .stat-card:not(.stat-next) .label { grid-column: 2; grid-row: 1; align-self: end; font-size: 0.82rem; font-weight: 700; color: var(--text); }
  body.cmd-nav .stats-grid .stat-card:not(.stat-next) .sub { grid-column: 2; grid-row: 2; align-self: start; }
  body.cmd-nav .stats-grid .stat-next { padding: 0.8rem 0.95rem; }
  body.cmd-nav .recent-issue .carline { flex-wrap: nowrap; white-space: nowrap; flex: none; }
}

/* Wide screens: Today tags line up in their own column */
@media (min-width: 1360px) {
  body.cmd-nav .today-card .todo-main { display: grid; grid-template-columns: 11rem minmax(0, 1fr); column-gap: 0.85rem; row-gap: 0.15rem; align-items: center; }
  body.cmd-nav .today-card .todo-top { display: contents; }
  body.cmd-nav .today-card .todo-what { grid-column: 1; grid-row: 1 / span 2; justify-self: start; max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: 0.64rem; padding: 0.22rem 0.6rem; border: 0; box-shadow: none; letter-spacing: 0.06em; }
  body.cmd-nav .today-card .todo-main > *:not(.todo-top), body.cmd-nav .today-card .todo-top > *:not(.todo-what) { grid-column: 2; justify-self: start; }
}

/* Update 243: Quick Links */
.ql-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.8rem; padding-bottom: 0.7rem; border-bottom: 1px solid rgba(16, 37, 68, 0.12); }
.ql-head h3 { margin: 0 0 0.2rem; color: var(--primary); }
.ql-head .co-hint { margin: 0; }
.ql-actions { display: flex; gap: 0.4rem; }
.ql-pills { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.ql-pill { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.95rem 0.5rem 0.5rem; border-radius: 999px; background: var(--primary-soft); border: 1.5px solid var(--primary); color: var(--primary-dark); font-weight: 700; font-size: 0.95rem; text-decoration: none; box-shadow: 0 1px 3px rgba(16, 37, 68, 0.12); transition: transform 0.12s, box-shadow 0.12s, background 0.12s; }
a.ql-pill:hover, a.ql-pill:focus-visible { background: var(--primary); color: #fff; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(16, 37, 68, 0.25); outline: none; }
.ql-ic { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--primary); color: #fff; flex: none; }
.ql-ic .ic { width: 16px; height: 16px; }
a.ql-pill:hover .ql-ic { background: rgba(255, 255, 255, 0.18); }
.ql-go { font-size: 0.85em; opacity: 0.6; }
.ql-pill-edit { padding: 0.35rem 0.4rem 0.35rem 0.9rem; gap: 0.4rem; }
.ql-pill-edit small { color: var(--muted); font-weight: 500; font-size: 0.75rem; }
.ql-x { width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(16, 37, 68, 0.25); background: var(--card); color: var(--primary); display: grid; place-items: center; cursor: pointer; font-size: 1.1rem; line-height: 1; padding: 0; }
.ql-x .ic { width: 14px; height: 14px; }
.ql-x.ql-del { color: var(--danger); }
.ql-form { margin: 0 0 0.9rem; padding: 0.85rem 1rem; border-radius: 14px; background: var(--surface); border: 1px solid rgba(16, 37, 68, 0.12); display: grid; gap: 0.2rem; }
@media (max-width: 600px) { .ql-pills { display: grid; grid-template-columns: 1fr; } .ql-pill { justify-content: flex-start; } .ql-go { margin-left: auto; } }

/* Update 247: each sidebar group gets its own color family, like Crossing Guards */
#sidebar .nav-link { --g1: #DCE3EC; --g2: #DCE3EC; }
#sidebar .nav-link:is([data-page="dashboard"], [data-page="issues"], [data-page="vehicles"], [data-page="equipment"], [data-page="quarterly"], [data-page="fixit"], [data-page="forms"], [data-page="contacts"], [data-page="myvehicle"], [data-page="reserves"]) { --g1: #4FA8FF; --g2: #7FE3F2; }
#sidebar .nav-link:is([data-page="officers"], [data-page="concerns"], [data-page="directory"], [data-page="profile"], [data-page="service"], [data-page="report"], [data-page="nextinline"], [data-page="ideas"]) { --g1: #34D399; --g2: #B6F09C; }
#sidebar .nav-link:is([data-page="tasks"], [data-page="oneonone"], [data-page="wishlist"], [data-page="other"]) { --g1: #B794FF; --g2: #FF8FC7; }
#sidebar .nav-link:is([data-page="quicklinks"], [data-page="comingsoon"]) { --g1: #FF6B6B; --g2: #FFA270; }
#sidebar #nav-guards { --g1: #FFA41B; --g2: #FFD43B; }
#sidebar .nav-link > span:not(.nav-badge):not(.cg-navtxt) { background: linear-gradient(90deg, var(--g1) 0%, var(--g2) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 600; }
#sidebar .nav-link .ic { color: var(--g1); opacity: 1; }
#sidebar .nav-group:has(+ .nav-link[data-page="dashboard"]) { color: #6FA9E6; }
#sidebar .nav-group:has(+ .nav-link[data-page="officers"]) { color: #5CC79A; }
#sidebar #nav-group-me { color: #B39AE8; }
#sidebar .nav-group:has(+ .nav-link[data-page="quicklinks"]) { color: #E8956B; }

/* Update 248: Fleet issues on My Tasks */
.fi-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--primary); margin: 0.4rem 0 0.45rem; }
.fi-head small { flex-basis: 100%; text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 0.8rem; color: var(--muted); }
.task-row.fi-row { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; color: inherit; cursor: pointer; }
.task-row.fi-row:hover { filter: brightness(1.03); }
.fi-tag { flex: none; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; padding: 0.2rem 0.55rem; border-radius: 999px; background: #F59E0B; color: #fff; }
.fi-row .task-top { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; }
.fi-desc { margin: 0.3rem 0 0.15rem; font-size: 0.92rem; }
@media (max-width: 600px) { .task-row.fi-row { flex-wrap: wrap; } .fi-tag { order: -1; } }

/* Update 249: work Fleet issues from My Tasks */
.task-row.fi-row { flex-wrap: wrap; align-items: stretch; cursor: default; }
.fi-open { flex: 1 1 100%; display: flex; align-items: flex-start; gap: 0.7rem; cursor: pointer; }
.fi-tags { flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 0.3rem; min-width: 7.2rem; }
.fi-new { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; padding: 0.15rem 0.5rem; border-radius: 999px; background: #D0313F; color: #fff; }
.fi-last { margin-top: 0.35rem; font-size: 0.82rem; color: var(--primary-dark); background: rgba(27, 58, 107, 0.07); border-radius: 8px; padding: 0.3rem 0.55rem; }
.fi-btns { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.55rem; padding-top: 0.5rem; border-top: 1px solid rgba(16, 37, 68, 0.1); }
.fi-btns .ic-inline, .fi-btns .ic { width: 1em; height: 1em; }
.fi-form { flex: 1 1 100%; margin-top: 0.5rem; }
.todo-followup .todo-what { background: #B45309; } .todo-followup { border-left-color: #B45309; }
@media (max-width: 600px) { .fi-open { flex-direction: column; gap: 0.4rem; } .fi-tags { flex-direction: row; flex-wrap: wrap; min-width: 0; } .fi-btns .btn { flex: 1 1 45%; } }

/* Update 251: officer-handled issues as check-back reminders */
.fi-tag.fi-tag-off { background: #2F6FB3; }
.fi-appt { margin-top: 0.3rem; font-size: 0.84rem; font-weight: 600; color: var(--primary-dark); }

/* Update 252: a note before checking off a Today's List item */
.todo-note, .todo-noteform { flex-basis: 100%; }
.todo-note { margin: 0.1rem 0 0 1.9rem; font-size: 0.82rem; color: var(--muted); }
.todo-noteform { display: flex; gap: 0.4rem; margin: 0.4rem 0 0.2rem 1.9rem; flex-wrap: wrap; }
.todo-noteform .todo-note-in { flex: 1 1 200px; }
.todo-item { flex-wrap: wrap; }

/* Update 253: issue progress checklist */
.flow-card { margin: 0 0 1rem; padding: 0.85rem 1rem; border-radius: 14px; background: var(--surface); border: 1px solid rgba(16, 37, 68, 0.14); }
.flow-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.55rem; }
.flow-head b { color: var(--primary); font-size: 0.95rem; }
.flow-where { display: flex; align-items: center; gap: 0.45rem; font-size: 0.82rem; font-weight: 700; color: var(--muted); }
.flow-where select { width: auto; min-width: 9rem; padding: 0.3rem 0.5rem; font-size: 0.88rem; }
.flow-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 0.4rem; }
.flow-step { display: flex; flex-wrap: wrap; align-items: center; gap: 0.15rem 0.55rem; padding: 0.5rem 0.65rem; border-radius: 10px; border: 1px solid rgba(16, 37, 68, 0.14); background: var(--card); cursor: pointer; }
.flow-step input { width: 20px; height: 20px; margin: 0; accent-color: #1F6A3F; flex: none; }
.flow-step .flow-lbl { font-weight: 700; font-size: 0.9rem; }
.flow-step .flow-lbl small { font-weight: 500; color: var(--muted); font-size: 0.74rem; }
.flow-step .flow-note { flex-basis: 100%; padding-left: 1.75rem; font-size: 0.76rem; color: var(--muted); }
.flow-step.on { background: #DCEFE2; border-color: #8CC5A0; }
.flow-step.on .flow-lbl { color: #1F5A35; }
.flow-step.next { border: 2px solid var(--primary); }
.flow-step.opt:not(.on) { opacity: 0.8; border-style: dashed; }
.fi-where { margin-top: 0.25rem; font-size: 0.82rem; font-weight: 700; color: var(--primary); }
@media (max-width: 600px) { .flow-list { grid-template-columns: 1fr; } .flow-head { align-items: flex-start; flex-direction: column; } }

/* Update 254: status bar on every issue (officers and command) */
.sbar { position: relative; margin: 0.9rem 0 0.4rem; padding: 0.9rem 0.9rem 0.75rem; border-radius: 16px; background: linear-gradient(135deg, #102544 0%, #1B3A6B 60%, #24508F 100%); color: #fff; box-shadow: 0 6px 18px rgba(16, 37, 68, 0.25); overflow: hidden; }
.sbar-track { position: absolute; left: calc(0.9rem + 8.33% - 2px); right: calc(0.9rem + 8.33% - 2px); top: calc(0.9rem + 17px); height: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.18); }
.sbar-fill { height: 100%; width: var(--sbar-pct); border-radius: 4px; background: linear-gradient(90deg, #34D399, #7FE3F2); box-shadow: 0 0 10px rgba(127, 227, 242, 0.7); transition: width 0.6s ease; }
.sbar-steps { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); }
.sbar-steps li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.35rem; }
.sbar-dot { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #1B3A6B; border: 2px solid rgba(255, 255, 255, 0.3); color: rgba(255, 255, 255, 0.55); }
.sbar-dot .ic { width: 17px; height: 17px; }
.sbar-lbl { font-size: 0.7rem; font-weight: 700; line-height: 1.2; color: rgba(255, 255, 255, 0.6); max-width: 7.5rem; padding: 0 2px; }
.sbar-steps li.done .sbar-dot { background: linear-gradient(135deg, #34D399, #10B981); border-color: #A7F3D0; color: #fff; }
.sbar-steps li.done .sbar-lbl { color: #C9F7E3; }
.sbar-steps li.now .sbar-dot { background: #fff; border-color: #7FE3F2; color: #1B3A6B; box-shadow: 0 0 0 0 rgba(127, 227, 242, 0.7); animation: sbarPulse 1.8s infinite; }
.sbar-steps li.now .sbar-lbl { color: #fff; }
@keyframes sbarPulse { 0% { box-shadow: 0 0 0 0 rgba(127, 227, 242, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(127, 227, 242, 0); } 100% { box-shadow: 0 0 0 0 rgba(127, 227, 242, 0); } }
.sbar-now { margin-top: 0.75rem; padding-top: 0.6rem; border-top: 1px solid rgba(255, 255, 255, 0.15); font-size: 0.88rem; color: rgba(255, 255, 255, 0.9); }
.sbar-now b { color: #7FE3F2; }
.sbar-where { display: inline-block; margin-left: 0.35rem; padding: 0.08rem 0.55rem; border-radius: 999px; background: rgba(255, 255, 255, 0.14); font-size: 0.78rem; font-weight: 700; }
.sbar-done .sbar-fill { background: linear-gradient(90deg, #34D399, #A7F3D0); }
@media (prefers-reduced-motion: reduce) { .sbar-steps li.now .sbar-dot { animation: none; } }
@media (max-width: 600px) { .sbar { padding: 0.8rem 0.5rem 0.7rem; } .sbar-track { left: calc(0.5rem + 8.33% - 2px); right: calc(0.5rem + 8.33% - 2px); top: calc(0.8rem + 14px); } .sbar-dot { width: 30px; height: 30px; } .sbar-dot .ic { width: 14px; height: 14px; } .sbar-lbl { font-size: 0.6rem; } }

.pick-back { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; padding: 16px; background: rgba(8, 18, 34, 0.55); }
.pick-card { width: 100%; max-width: 380px; padding: 1.1rem; border-radius: 16px; background: var(--card, #E3E7EE); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35); }
.pick-card h3 { margin: 0 0 0.3rem; color: var(--primary); }
.pick-card p { margin: 0 0 0.8rem; color: var(--muted); font-size: 0.92rem; }
.pick-opt { display: block; width: 100%; text-align: left; margin-bottom: 0.55rem; padding: 0.75rem 0.9rem; border-radius: 12px; border: 2px solid var(--primary); background: transparent; color: var(--primary); font: inherit; cursor: pointer; }
.pick-opt b { display: block; font-size: 1rem; }
.pick-opt small { color: var(--muted); }
.pick-opt:hover, .pick-opt:focus { background: var(--primary); color: #fff; outline: none; }
.pick-opt:hover small, .pick-opt:focus small { color: rgba(255, 255, 255, 0.8); }
.pick-cancel { width: 100%; }

/* Update 255: officer updates on the Taking it in panel */
.rp-done { margin: 0 0 0.6rem; color: var(--success, #1E7B4A); font-weight: 600; }
.rp-tell { margin-top: 0.8rem; padding-top: 0.7rem; border-top: 1px solid rgba(0, 0, 0, 0.08); }
.rp-tell label { display: block; font-weight: 700; font-size: 0.85rem; margin-bottom: 0.3rem; }
.rp-tell-row { display: flex; gap: 0.5rem; }
.rp-tell-row input { flex: 1; min-width: 0; }
.repair-panel h4 .ic { width: 16px; height: 16px; vertical-align: -2px; }
.check-row { display: flex; gap: 0.5rem; align-items: baseline; flex-wrap: wrap; }

/* Update 256: Users search + buttons that wrap; My Tasks compact view */
.users-card .user-row { flex-wrap: wrap; gap: 0.6rem; }
.users-card .user-row > div:first-child { min-width: 0; flex: 1 1 260px; overflow-wrap: anywhere; }
.user-btns { display: flex; flex-wrap: wrap; gap: 0.4rem; }
@media (max-width: 700px) { .users-card .user-row { flex-direction: column; align-items: stretch; } .users-card .user-row > div:first-child { flex: 0 0 auto; } .user-btns .btn { flex: 1 1 auto; padding: 0.45rem 0.6rem; } }
.t-searchrow { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 0.75rem; }
.t-searchrow .search-input { flex: 1; min-width: 0; margin: 0; }
.task-row.tcompact { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.65rem; min-height: 0; }
.task-row.tcompact .tc-line, .task-row.fi-row.tcompact { cursor: pointer; }
.task-row.tcompact .tc-line { display: flex; align-items: center; gap: 0.4rem; flex: 1; min-width: 0; }
.task-row.fi-row.tcompact { flex-direction: row; flex-wrap: nowrap; align-items: center; cursor: pointer; }
.task-row.tcompact .tc-txt { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.9rem; }
.task-row.tcompact .tc-car { flex-shrink: 0; font-size: 0.85rem; }
.task-row.tcompact .prio, .task-row.tcompact .due-chip { flex-shrink: 0; font-size: 0.72rem; }
.task-row.tcompact .chevron { flex-shrink: 0; color: var(--muted); }
#t-list:has(.tcompact) .task-row { margin-bottom: 0.3rem; }

/* Update 257: My Tasks section headings as banners */
.fi-head { margin: 0.9rem 0 0.5rem; }
.fi-banner { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.6rem 0.45rem 0.85rem; border-radius: 999px; background: linear-gradient(135deg, #1B3A6B, #24508F); color: #fff; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; box-shadow: 0 3px 10px rgba(27, 58, 107, 0.25); }
.fi-banner .ic { width: 15px; height: 15px; color: #7FE3F2; }
.fi-banner-off { background: linear-gradient(135deg, #0F5E57, #13877C); }
.fi-banner-off .ic { color: #B6F09C; }
.fi-banner-tasks { background: linear-gradient(135deg, #4B2A7A, #6E3FA8); }
.fi-banner-tasks .ic { color: #FFC4E1; }
.fi-count { min-width: 1.5rem; height: 1.5rem; padding: 0 0.4rem; border-radius: 999px; display: inline-grid; place-items: center; background: rgba(255, 255, 255, 0.2); font-size: 0.78rem; letter-spacing: 0; }
.fi-head small { margin-top: 0.15rem; padding-left: 0.3rem; }

/* Update 258: dashboard panels and tiles match the Coming Soon banner (dark navy, light-bar stripe, red-white-blue headings) */
.stats-grid .stat-card, .dash-cols .card, #down-list.card {
  position: relative; overflow: hidden; color: #fff;
  background: radial-gradient(120% 140% at 50% -40%, #1B2C4D 0%, #0A1222 55%, #05080F 100%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 10px 30px rgba(5, 8, 15, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.dash-cols .card > *, #down-list.card > * { position: relative; z-index: 1; }
/* Update 259: headings in the site's own font, white */
.dash-cols .card h3, #down-list.card h3 { color: #fff !important; }
.dash-cols .card h3 .tab-count { color: #fff; background: rgba(255, 255, 255, 0.16); }
.dash-cols .today-head { border-bottom-color: rgba(255, 255, 255, 0.12); }
.dash-cols .card > p, .dash-cols .card > small, .dash-cols .card > div > small, .dash-cols .collapse-hint { color: rgba(255, 255, 255, 0.72); }
.dash-cols .card.collapsible > summary { color: #fff; }
.dash-cols .all-good p { color: #8EF0B5; }
/* Recent / Resolved tabs on dark */
.dash-cols .ri-tabs { background: rgba(255, 255, 255, 0.08); }
.dash-cols .ri-tabs .tab { color: rgba(255, 255, 255, 0.75); }
.dash-cols .ri-tabs .tab.active { background: rgba(255, 255, 255, 0.16); color: #fff; box-shadow: none; }
.dash-cols .ri-tabs .tab-count { background: rgba(255, 255, 255, 0.18); color: #fff; }
/* Rows inside stay light so they read like cards on the panel */
.dash-cols .card .list-item, .dash-cols .card .rd-free-row, .dash-cols .card .rd-free, #down-list.card .list-item { color: var(--text); background: #E1E4E8; border-color: rgba(255, 255, 255, 0.25); }
.dash-cols .card .list-item:hover, #down-list.card .list-item:hover { background: #EDF0F4; }
.dash-cols .card .list-item .todo-sub { background: #EDF0F4; }
.stats-grid .stat-next .stat-next-name, .stats-grid .stat-card.stat-next strong, .stats-grid .stat-card.stat-next b { color: #8FC2FF; }
.stats-grid .stat-card.stat-next { color: rgba(255, 255, 255, 0.8); }
/* Stat tiles */
.stats-grid .stat-card .label, body.cmd-nav .stats-grid .stat-card:not(.stat-next) .label { color: #fff; }
.stats-grid .stat-card .sub { color: rgba(255, 255, 255, 0.7); }
.stats-grid .stat-card { border-left-width: 4px; border-left-color: #2F7BFF; }
.stats-grid .stat-card.is-warn { border-left-color: #F5A524; }
.stats-grid .stat-card.is-danger { border-left-color: #E5243B; }
.stats-grid .stat-card .number { color: #1B3A6B; }
.stats-grid .stat-card.is-warn .number { color: #B86B00; }
.stats-grid .stat-card.is-danger .number { color: #C81E32; }
button.stat-card:hover { box-shadow: 0 14px 36px rgba(5, 8, 15, 0.45); }
.stats-grid .stat-next .next-name { color: #8FC2FF; }
.stats-grid .stat-card.stat-next { border-left-color: #F5A524; }
body.cmd-nav .dash-cols .today-card .todo-row { background: #E1E4E8; }
body.cmd-nav .dash-cols .today-card .todo-row:hover { background: #EDF0F4; }
.dash-cols .card h3 .ic, .dash-cols .card h3 svg { color: #8FB6FF; }

/* Update 260: Next in Line / Replacement Order officer list in 3 columns on laptop (reads down each column, order unchanged) */
@media (min-width: 1100px) {
  .ro-officers .ro-list { columns: 3; column-gap: 0.9rem; }
  .ro-officers .ro-list .list-item.ro-row { break-inside: avoid; margin-bottom: 0.45rem; }
  .ro-officers .ro-list .list-item.ro-row .btn.small { padding: 0.3rem 0.55rem; font-size: 0.75rem; }
}

/* Update 261: Graphite theme. A dark page (matching the sidebar and top bar) with light cards floating on it.
   The Coming Soon banner, sidebar and top bar are left exactly as they were. */
body { background: radial-gradient(120% 90% at 30% -10%, #1C2A44 0%, #101827 50%, #0A0F18 100%) fixed; background-color: #0E1420; }
/* Zero-specificity so cards with their own look (Coming Soon, dashboard panels, banners) keep it */
:where(.main-content .card) { border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 16px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); }
.main-content .list-item { border-radius: 12px; }


/* Update 262: Police Blue. Lighter blue page and dashboard cards; sidebar, top bar and phone tab bar match.
   The Coming Soon banner keeps its own look. */
body { background: radial-gradient(120% 90% at 30% -10%, #3F7FCC 0%, #2F69B0 55%, #255694 100%) fixed; background-color: #2F69B0; }
.stats-grid .stat-card, .dash-cols .card, #down-list.card { background: linear-gradient(160deg, #24569A 0%, #1B4378 100%); border-color: rgba(255, 255, 255, 0.18); }
/* Small text that got hard to read on the brighter blue */
.stats-grid .stat-card .sub [style*="--danger"], .stats-grid .stat-card .sub span[style*="danger"] { color: #FFB4BC !important; }
.stats-grid .stat-card .sub, .dash-cols .card > p, .dash-cols .collapse-hint { color: rgba(255, 255, 255, 0.82); }
.stats-grid .stat-next .next-name { color: #CDE6FF; }

/* Update 263: the dark panels (dashboard cards, stat tiles, Out of Service list) are solid black */
.stats-grid .stat-card, .dash-cols .card, #down-list.card { background: #000; border-color: rgba(255, 255, 255, 0.14); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35); }
.dash-cols .ri-tabs { background: rgba(255, 255, 255, 0.10); }

/* Update 263: white page background on every page (Scott, Nov 1). Sidebar and top bar stay Police Blue. */
body { background: #fff; background-color: #fff; }
:where(.main-content .card) { border: 1px solid #D5DAE1; box-shadow: 0 2px 6px rgba(16, 37, 68, 0.08), 0 10px 24px rgba(16, 37, 68, 0.08); }

/* Update 264: black top bar on every page; dashboard panels Police Blue; sidebar links white
   (section headings keep their colors, People is green, Crossing Guards keeps its gold) */
.topbar, .topbar.home-bar { background: #000; border-bottom-color: #000; }
.stats-grid .stat-card, .dash-cols .card, #down-list.card { background: linear-gradient(160deg, #24569A 0%, #1B4378 100%); border-color: rgba(255, 255, 255, 0.18); }
#sidebar .nav-link:not(#nav-guards) { --g1: #FFFFFF; --g2: #FFFFFF; }
#sidebar .nav-group:has(+ .nav-link[data-page="officers"]) { color: #34D399; }
/* Page background: Pale Blue (Scott picked it, Nov 1) */
body { background: #DCE6F2; background-color: #DCE6F2; }

/* Update 266: Coming Soon banner on solid black (everything else about it unchanged); dashboard panels lined in black;
   New Issue pill gone from the sidebar, so Log Service fills the row */
.csb { background: #000; }
.stats-grid .stat-card, .dash-cols .card, #down-list.card { border: 2px solid #000; }
.stats-grid .stat-card { border-left: 4px solid #2F7BFF; }
.stats-grid .stat-card.is-warn, .stats-grid .stat-card.stat-next { border-left-color: #F5A524; }
.stats-grid .stat-card.is-danger { border-left-color: #E5243B; }
.stats-grid #oos-tile { border-color: #000; border-left-color: #F5A524; }

/* Update 268: dashboard panels and stat tiles are white surfaces with a subtle border (text back to dark) */
.stats-grid .stat-card, .dash-cols .card, #down-list.card { background: #FFFFFF; color: var(--text); border: 1px solid #C9D3E0; box-shadow: 0 1px 3px rgba(16, 37, 68, 0.08), 0 6px 18px rgba(16, 37, 68, 0.06); }
.stats-grid .stat-card { border-left: 4px solid #2F7BFF; }
.stats-grid .stat-card.is-warn, .stats-grid .stat-card.stat-next, .stats-grid #oos-tile { border-color: #C9D3E0; border-left-color: #F5A524; }
.stats-grid .stat-card.is-danger { border-left-color: #E5243B; }
.stats-grid .stat-card .label, body.cmd-nav .stats-grid .stat-card:not(.stat-next) .label { color: var(--text); }
.stats-grid .stat-card .sub, .dash-cols .card > p, .dash-cols .card > small, .dash-cols .card > div > small, .dash-cols .collapse-hint { color: var(--muted); }
.stats-grid .stat-card .sub [style*="--danger"], .stats-grid .stat-card .sub span[style*="danger"] { color: var(--danger) !important; }
.stats-grid .stat-card.stat-next { color: var(--muted); }
.stats-grid .stat-next .next-name { color: var(--primary); }
.stats-grid .stat-card .number { border-color: currentColor; }
.dash-cols .card h3, #down-list.card h3 { color: var(--primary) !important; }
.dash-cols .card h3 .ic, .dash-cols .card h3 svg { color: var(--primary); }
.dash-cols .card h3 .tab-count { color: var(--primary); background: var(--primary-soft); }
.dash-cols .today-head { border-bottom-color: #DCE3EC; }
.dash-cols .card.collapsible > summary { color: var(--text); }
.dash-cols .all-good p { color: #1F6A3F; }
.dash-cols .ri-tabs { background: #EEF2F7; }
.dash-cols .ri-tabs .tab { color: var(--muted); }
.dash-cols .ri-tabs .tab.active { background: #fff; color: var(--text); box-shadow: 0 1px 3px rgba(16, 37, 68, 0.12); }
.dash-cols .ri-tabs .tab-count { background: var(--primary-soft); color: var(--primary); }
.dash-cols .card .list-item, .dash-cols .card .rd-free-row, .dash-cols .card .rd-free, #down-list.card .list-item, body.cmd-nav .dash-cols .today-card .todo-row { background: #EEF2F7; border-color: #D5DDE8; }
.dash-cols .card .list-item:hover, body.cmd-nav .dash-cols .today-card .todo-row:hover { background: #E4EAF2; }

/* Update 270: rank insignia beside command names */
.rank-ins { display: inline-flex; align-items: center; vertical-align: middle; margin-left: 6px; line-height: 0; }
.rank-ins svg { display: block; }
.rank-chief svg path { fill: #D4A72C; stroke: #8A6A12; stroke-width: .5; stroke-linejoin: round; }
.rank-lt svg rect { fill: url(#rk-silver); stroke: #3F4954; stroke-width: 1; }
.rank-sgt svg path { fill: none; stroke: #1B4378; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* Update 276: officers' Dashboard link sits in a subtle white pill */
#sidebar .nav-link[data-page="myvehicle"], #sidebar .nav-link[data-page="dashboard"] { border: 1px solid rgba(255, 255, 255, 0.45); border-radius: 999px; margin-bottom: 6px; }

/* Update 278: main banner gets the Coming Soon lights: red glows behind the patch and badge, blue around the Tahoe */
.dash-banner { overflow: hidden; }
.dash-banner .banner-row { isolation: isolate; }
.db-lit { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.db-lit::before { content: ""; position: absolute; left: 50%; top: 50%; width: 170%; height: 170%; transform: translate(-50%, -50%); border-radius: 50%; filter: blur(22px); z-index: -1; pointer-events: none; animation: db-flash 2.4s ease-in-out infinite; }
@keyframes db-flash { 0%, 100% { opacity: 0.35; } 45%, 55% { opacity: 1; } }
.db-lit-red::before { background: radial-gradient(closest-side, #FF1F3D, rgba(229, 36, 59, 0.7) 55%, transparent); }
.db-lit-blue::before { width: 130%; height: 170%; background: radial-gradient(closest-side, #1F6BFF, rgba(47, 123, 255, 0.7) 55%, transparent); animation-delay: 1.2s; }
@media (prefers-reduced-motion: reduce) { .db-lit::before { animation: none; opacity: .45; } }
.dash-banner .db-lit-red { justify-self: end; min-width: 0; max-width: 100%; }
.dash-banner .db-lit-blue { justify-self: start; min-width: 0; max-width: 100%; }

/* Update 279: accident repair quotes */
.quote-card .flow-head b { display: inline-flex; align-items: center; gap: 6px; }
.quote-help { color: var(--muted); font-size: .9rem; margin: .25rem 0 .6rem; }
.quote-row { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; padding: .6rem .75rem; border: 1px solid var(--border); border-radius: 10px; background: #fff; margin-bottom: .45rem; }
.quote-row.is-picked { border-color: #2E9E5B; box-shadow: inset 4px 0 0 #2E9E5B; }
.quote-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .6rem; min-width: 0; }
.quote-main small { flex-basis: 100%; color: var(--muted); }
.quote-amt { font-weight: 700; color: var(--primary); }
.quote-btns { display: flex; gap: .4rem; align-items: center; }
.quote-none { color: var(--muted); margin: .25rem 0 .6rem; }
.quote-add { border-top: 1px dashed var(--border); padding-top: .6rem; margin-top: .4rem; }
.fi-tag.fi-tag-quote { background: #FFF1D6; color: #8A5300; }
.fi-tag.fi-tag-quote.is-ready { background: #DFF5E7; color: #1F6A3F; }

/* ===== Update 280: My Tasks overhaul ===== */
.mt-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
@media (min-width: 1100px) { .mt-cols { grid-template-columns: minmax(0, 1fr) 360px; } }
.mt-card.card, .mt-side-card.card { background: #fff; border: 1px solid #C9D3E0; border-radius: 16px; box-shadow: 0 1px 3px rgba(16,37,68,.08), 0 6px 18px rgba(16,37,68,.06); padding: 18px 0 8px; }
.mt-h { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 0 20px; }
.mt-h h2 { margin: 0; font-size: 1.4rem; color: var(--primary); flex: 1 1 auto; }
.mt-search.search-input { flex: 1 1 240px; max-width: 360px; margin: 0; border-radius: 999px; background: #F6F8FB; }
.mt-priv { margin: 6px 20px 0; font-size: .82rem; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.mt-priv .ic { width: 14px; height: 14px; }
.mt-tabs.tabs { margin: 12px 20px 0; }
.mt-quick { display: flex; align-items: center; gap: 8px; margin: 14px 20px 4px; padding: 4px 14px; border: 1px dashed #B7C1CF; border-radius: 12px; }
.mt-quick span { color: var(--muted); font-weight: 700; font-size: 1.1rem; }
.mt-quick input { flex: 1; border: 0; background: transparent; padding: 9px 0; font-size: .95rem; outline: none; box-shadow: none; }
.mt-nudge { margin: 12px 20px 4px; padding: 10px 14px; border-radius: 12px; background: #FFF6E5; border: 1px solid #F3D9A4; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: .9rem; }
.mt-nudge > div:first-child { flex: 1 1 260px; }
.mt-nudge b { color: #7A4B00; display: block; }
.mt-nudge span { color: #6B5320; }
.mt-review { flex-basis: 100%; display: grid; gap: 6px; }
.mt-rev-row { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: center; background: #fff; border: 1px solid #F0DDB5; border-radius: 10px; padding: 8px 10px; }
.mt-rev-row small { display: block; color: var(--muted); }
.mt-rev-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.mt-sec { display: flex; align-items: center; gap: 8px; padding: 16px 20px 6px; font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.mt-sec-over { color: var(--danger); }
.mt-sec-today { color: var(--primary); }
.mt-row { display: flex; align-items: center; gap: 12px; padding: 10px 20px; border-top: 1px solid #EEF1F5; cursor: pointer; }
.mt-row:hover { background: #F7F9FC; }
.mt-row.is-done .mt-t b { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(0,0,0,.25); }
.mt-ck { position: relative; flex: 0 0 auto; width: 22px; height: 22px; cursor: pointer; }
.mt-ck input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.mt-ck span { display: block; width: 22px; height: 22px; border: 2px solid #B7C1CF; border-radius: 7px; background: #fff; }
.mt-ck input:checked + span { background: #2E9E5B; border-color: #2E9E5B; box-shadow: inset 0 0 0 3px #fff; }
.mt-ck input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }
.mt-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.mt-high { background: #E8590C; } .mt-medium { background: #E0A800; } .mt-low { background: #98A2B3; }
.mt-t { flex: 1; min-width: 0; }
.mt-t b { display: block; font-weight: 600; font-size: .98rem; color: var(--text); }
.mt-meta { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; align-items: center; font-size: .8rem; color: var(--muted); }
.mt-chip { border-radius: 999px; padding: 1px 8px; font-size: .76rem; font-weight: 600; background: #EEF2F7; color: #344054; white-space: nowrap; text-decoration: none; }
.mt-chip.mt-car { background: #E7EEFB; color: var(--primary); }
a.mt-chip.mt-car:hover { text-decoration: underline; }
.mt-chip.mt-tag { background: #F2EBFB; color: #5B3A99; }
.mt-chip.mt-wait { background: #FFF1D6; color: #8A5300; }
.mt-chip.mt-share { background: #DDF3F1; color: #0E6E66; }
.mt-chip.mt-new { background: var(--danger); color: #fff; }
.mt-added { color: var(--muted); }
.mt-last { margin-top: 3px; font-size: .8rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt-due { font-size: .82rem; font-weight: 700; white-space: nowrap; color: var(--muted); flex: 0 0 auto; }
.mt-due.late { color: var(--danger); } .mt-due.now { color: var(--primary); }
.mt-due-none { font-weight: 600; opacity: .7; }
.mt-more { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: var(--muted); flex: 0 0 auto; }
.mt-more .ic { width: 16px; height: 16px; }
.mt-row:hover .mt-more { background: #EEF2F7; color: var(--primary); }
.mt-empty { color: var(--muted); padding: 12px 20px; margin: 0; }
.mt-more-btn { display: block; width: 100%; text-align: left; background: none; border: 0; border-top: 1px solid #EEF1F5; padding: 12px 20px; color: var(--primary); font-weight: 700; cursor: pointer; font-size: .88rem; }
/* Repairs to watch */
.mt-side-card h3 { margin: 0; padding: 0 16px; font-size: 1.05rem; color: var(--primary); display: flex; gap: 8px; align-items: center; }
.mt-sub { margin: 4px 16px 8px; font-size: .8rem; color: var(--muted); }
.rp-row { border-top: 1px solid #EEF1F5; }
.rp-head { padding: 11px 16px; cursor: pointer; }
.rp-head:hover, .rp-row.open .rp-head { background: #F7F9FC; }
.rp-st { font-size: .86rem; margin-top: 5px; color: var(--text); }
.rp-chips { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; align-items: center; }
.rp-row .fi-row { margin: 0 12px 12px; border-radius: 12px; }
.rp-row .fi-row .fi-tags, .rp-row .fi-row .task-top { display: none; }
.mt-rp-all { display: block; padding: 10px 16px 6px; border-top: 1px solid #EEF1F5; font-weight: 700; font-size: .88rem; color: var(--primary); text-decoration: none; }
#t-list > .mt-rp-list .rp-head { padding: 11px 20px; }
#t-list > .mt-rp-all { padding: 12px 20px; }
/* Task panel */
.mt-back { position: fixed; inset: 0; z-index: 400; background: rgba(10, 20, 35, .45); display: flex; justify-content: flex-end; }
body.mt-locked { overflow: hidden; }
.mt-panel { width: 480px; max-width: 100%; height: 100%; overflow: auto; background: #fff; padding: 20px 22px 40px; box-shadow: -10px 0 30px rgba(0,0,0,.18); animation: mt-in .18s ease-out; }
@keyframes mt-in { from { transform: translateX(30px); opacity: .4; } to { transform: none; opacity: 1; } }
.mt-p-top { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; margin-bottom: 6px; }
.mt-p-top h3 { margin: 0; font-size: 1.25rem; line-height: 1.3; color: var(--text); }
.mt-x { border: 0; background: #EEF2F7; border-radius: 10px; width: 36px; height: 36px; display: grid; place-items: center; flex: 0 0 auto; cursor: pointer; }
.mt-fl { font-size: .72rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; margin: 16px 0 6px; }
.mt-seg { display: flex; gap: 6px; flex-wrap: wrap; }
.mt-seg button { border: 1px solid #D5DDE8; background: #fff; border-radius: 999px; padding: 6px 13px; font-weight: 600; font-size: .86rem; cursor: pointer; color: var(--text); }
.mt-seg button.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.mt-pick { margin-top: 8px; }
.mt-small { margin-top: 6px; font-size: .85rem; color: var(--muted); }
.mt-wait-row { display: flex; gap: 8px; }
.mt-wait-row input { flex: 1; min-width: 0; }
.mt-upd { display: grid; gap: 8px; }
.mt-upd-btns { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mt-upd-btns .photo-previews { flex: 1; }
.mt-p { margin: 0; white-space: pre-wrap; }
.mt-tl { border-left: 2px solid #D5DDE8; margin-left: 6px; padding-left: 16px; }
.mt-tl-i { position: relative; margin-bottom: 12px; font-size: .92rem; }
.mt-tl-i::before { content: ""; position: absolute; left: -23px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--primary); }
.mt-tl-i small { display: block; color: var(--muted); font-size: .76rem; }
.mt-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 20px; padding-top: 14px; border-top: 1px solid #EEF1F5; }
.mt-acts .mt-del { color: var(--danger); border-color: #F1B8BE; margin-left: auto; }
.mt-panel .task-form { margin-top: 6px; }
.mt-panel .task-issues { margin-top: 12px; }
.mt-note-in { width: 100%; }
@media (max-width: 700px) {
  .mt-card.card { padding-top: 14px; }
  .mt-h, .mt-sec, .mt-row, .mt-empty, .mt-more-btn { padding-left: 14px; padding-right: 14px; }
  .mt-h { padding: 0 14px; }
  .mt-search.search-input { max-width: none; flex-basis: 100%; order: 3; }
  .mt-priv, .mt-tabs.tabs, .mt-quick, .mt-nudge { margin-left: 14px; margin-right: 14px; }
  .mt-tabs.tabs { overflow-x: auto; }
  .mt-row { gap: 10px; }
  .mt-more { display: none; }
  .mt-panel { width: 100%; padding: 16px 16px 90px; }
}
.mt-card .btn:not(.primary):not(.new-issue-pill), .mt-side-card .btn:not(.primary), .mt-panel .btn:not(.primary):not(.mt-del) { background: #fff; border-color: #D5DDE8; }
.mt-panel input:not([type=checkbox]):not([type=file]), .mt-panel textarea, .mt-panel select { background: #F6F8FB; border-color: #D5DDE8; }
.mt-panel .mt-del { background: #fff; }

.mt-next { margin-top: 3px; font-size: .84rem; color: #2B3A4E; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt-t .mt-next b { display: inline; font-size: inherit; color: var(--primary); font-weight: 600; text-decoration: none; }
.mt-sub { display: flex; align-items: center; gap: 8px; padding: 8px 22px 4px; font-size: .74rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.mt-sub span:last-child { font-weight: 500; }
.mt-sub .mt-dot { width: 8px; height: 8px; }
@media (max-width: 700px) { .mt-sub { padding-left: 14px; } }

/* Update 281: new task asks first whether a car is involved */
.mt-kinds { display: grid; gap: 10px; }
.mt-kind { display: flex; gap: 14px; align-items: center; text-align: left; width: 100%; padding: 16px; background: #fff; border: 1px solid #D5DDE8; border-radius: 14px; cursor: pointer; font: inherit; color: var(--text); }
.mt-kind:hover, .mt-kind:focus-visible { border-color: var(--primary); background: #F6F8FB; }
.mt-kind b { display: block; font-size: 1rem; }
.mt-kind small { display: block; color: var(--muted); font-size: .85rem; margin-top: 2px; }
.mt-kind-ic { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px; background: #E8EEF6; color: var(--primary); display: grid; place-items: center; }
.mt-kind-ic svg { width: 22px; height: 22px; }
.mt-back-link { display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; color: var(--primary); font: inherit; font-size: .88rem; padding: 0; margin: 0 0 10px; cursor: pointer; }
.mt-back-link svg { width: 16px; height: 16px; }
.mt-when { flex-wrap: wrap; }
.mt-when-pick { margin-top: 10px; }

/* Update 282: Issues list and issue page */
.is-row { align-items: flex-start; }
.is-row .mt-dot { margin-top: 8px; }
.is-row .mt-due { margin-top: 4px; }
.is-car .carline { font-size: .9rem; }
.is-car { margin-bottom: 4px; }
.is-critical { background: var(--danger); } .is-high { background: #E8590C; } .is-medium { background: #E0A800; } .is-low { background: #98A2B3; }
.is-row.is-closed .mt-t > b { color: var(--muted); }
.is-row .mt-meta .prio { font-size: .72rem; padding: 1px 8px; }
.nx-card { padding: 14px 16px; }
.nx-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.nx-k { display: block; font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.nx-go { display: inline-flex; align-items: center; gap: 8px; }
.nx-go svg { width: 18px; height: 18px; }
.nx-row { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin-top: 12px; font-size: .88rem; color: var(--muted); }
.nx-row:empty { display: none; }
.nx-jump { display: inline-flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.nx-link { display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; padding: 0; font: inherit; font-size: .88rem; color: var(--primary); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.nx-link svg { width: 15px; height: 15px; }
.nx-opts { padding-top: 12px; border-top: 1px solid #EEF1F5; }
.nx-opt { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #D5DDE8; background: #fff; border-radius: 999px; padding: 6px 12px; font: inherit; font-size: .85rem; color: var(--text); cursor: pointer; }
.nx-opt svg { width: 15px; height: 15px; }
.nx-opt.on { background: #E7EEFB; border-color: var(--primary); color: var(--primary); font-weight: 600; }
.nx-close { margin-left: auto; }
.pb-card { border: 1px solid #D5DDE8; border-radius: 12px; padding: 12px 14px; margin: 0 0 1rem; background: #fff; }
.pb-h { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.pb-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid #EEF1F5; cursor: pointer; }
.pb-row input { width: 1.15rem; height: 1.15rem; accent-color: var(--primary); flex: 0 0 auto; }
.pb-row span { flex: 1; }
.pb-row.is-done span { color: var(--muted); text-decoration: line-through; }
.pb-x { border: 0; background: none; color: var(--muted); cursor: pointer; padding: 4px; display: grid; place-items: center; }
.pb-x svg { width: 15px; height: 15px; }
.pb-add { display: flex; gap: 8px; margin-top: 8px; }
.pb-add input, .pb-add textarea { flex: 1; min-width: 0; }
.pb-first { flex-direction: column; align-items: flex-start; }
.pb-first textarea { width: 100%; }
.pb-start { margin: 0 0 1rem; }
.it-card.card { margin-top: 0; }
.it-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid #EEF1F5; flex-wrap: wrap; }
.it-row small { display: block; color: var(--muted); }
.it-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.hist-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.hist-h h3 { margin: 0; }
.hist-i.auto { color: var(--muted); }
@media (max-width: 700px) { .nx-close { margin-left: 0; } .is-row { flex-wrap: wrap; } .is-row .mt-due { order: 5; flex-basis: 100%; padding-left: 21px; margin-top: 0; } }
.card.iss-card { background: #fff; border: 1px solid #C9D3E0; box-shadow: 0 1px 3px rgba(16,37,68,.08), 0 6px 18px rgba(16,37,68,.06); border-radius: 16px; }
.iss-card .detail-grid > div { background: #F6F8FB; border: 1px solid #DCE3EC !important; box-shadow: none; }
.iss-card .flow-card, .iss-card .repair-panel, .iss-card .rp-card { background: #F6F8FB; border: 1px solid #DCE3EC; }
.iss-card .nx-card { background: #F6F8FB; }
.nx-go svg { stroke: #fff; }

/* Update 284: priority pills on My Tasks, Pick lists beside People and Cars */
.mt-sub { padding: 10px 20px 4px; }
.mt-subpill { display: inline-flex; align-items: center; gap: 7px; padding: 4px 12px; border-radius: 999px; border: 1px solid; font-size: .74rem; font-weight: 700; letter-spacing: .05em; }
.mt-sp-high { background: #FDEDE4; border-color: #F4B08A; color: #A33D06; }
.mt-sp-medium { background: #FDF5DA; border-color: #EBCB6B; color: #7A5A00; }
.mt-sp-low { background: #F1F3F6; border-color: #C9D0DA; color: #475467; }
.mt-subpill .mt-sp-n { font-weight: 600; opacity: .8; }
.mt-combo { display: flex; gap: 6px; align-items: stretch; }
.mt-combo input { flex: 1; min-width: 0; }
.mt-pick-sel { flex: 0 0 auto; width: 74px; padding: 0 6px; border: 1px solid #D5DDE8; border-radius: 10px; background: #fff; color: var(--primary); font-weight: 600; font-size: .9rem; cursor: pointer; }
.mt-panel .co-grid:has(.mt-combo) { grid-template-columns: 1fr; }
@media (max-width: 700px) { .mt-sub { padding-left: 14px; } }

/* Update 286: Favorites and a customizable sidebar */
#sidebar .nav-group-fav { color: #F5C451; }
.nav-edit-btn { display: flex; align-items: center; gap: 8px; margin: 10px 12px 4px; padding: 7px 12px; border: 1px dashed rgba(255,255,255,.35); border-radius: 999px; background: none; color: rgba(255,255,255,.75); font: inherit; font-size: .82rem; cursor: pointer; }
.nav-edit-btn:hover { color: #fff; border-color: rgba(255,255,255,.7); }
.nav-edit-btn svg { width: 15px; height: 15px; }
.nav-edit-btn[hidden] { display: none; }
.ne-bar { margin: 8px 10px; padding: 10px 12px; border-radius: 12px; background: #1B2636; color: #fff; font-size: .8rem; display: grid; gap: 6px; }
.ne-bar span { color: rgba(255,255,255,.75); line-height: 1.35; }
.ne-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.ne-btns .btn:not(.primary) { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
body.nav-editing #sidebar .nav-link, body.nav-editing #sidebar .nav-group { cursor: default; }
body.nav-editing #sidebar .nav-link { outline: 1px dashed rgba(255,255,255,.18); outline-offset: -2px; }
.ne-ctl { display: inline-flex; gap: 2px; margin-left: auto; flex: 0 0 auto; }
.ne-ctl button { width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 8px; background: rgba(255,255,255,.08); color: #fff; cursor: pointer; padding: 0; }
.ne-ctl button:hover { background: rgba(255,255,255,.2); }
.ne-ctl svg { width: 15px; height: 15px; }
.ne-ctl .ne-star.on { color: #F5C451; }
.ne-ctl .ne-star.on svg { fill: #F5C451; }
body.nav-editing #sidebar .nav-caret { display: none; }
body.nav-editing #sidebar .nav-badge { display: none; }

/* Update 287: quick to-do line in the header, search under the tabs */
.mt-h .mt-quick-h { flex: 1 1 260px; max-width: 420px; margin: 0; background: #F6F8FB; border-radius: 999px; }
.mt-search-row { margin: 12px 20px 4px; }
.mt-search-row .mt-search.search-input { max-width: none; width: 100%; }
@media (max-width: 700px) { .mt-h .mt-quick-h { max-width: none; flex-basis: 100%; order: 3; } .mt-search-row { margin-left: 14px; margin-right: 14px; } }

/* Update 288: livelier dashboard panels */
.dash-cols .card.dp-card { padding: 18px 20px; border-radius: 16px; }
.dp-h { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.dp-t { flex: 1; min-width: 0; }
.dp-t h3 { margin: 0; font-size: 1.08rem; color: var(--text); }
.dp-t small { display: block; color: var(--muted); font-size: .82rem; margin-top: 2px; }
.dp-warn { color: var(--danger); font-weight: 700; }
.dp-ic { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; }
.dp-ic svg { width: 21px; height: 21px; }
.dp-red { background: #FDE8EA; color: #B42332; } .dp-teal { background: #DDF3F1; color: #0E6E66; } .dp-blue { background: #E3ECFB; color: #1F4FA8; }
.dp-green { background: #E2F4E8; color: #1E7A3C; } .dp-purple { background: #EEE8FB; color: #5B3A99; } .dp-amber { background: #FDF1D8; color: #8A5A00; } .dp-navy { background: #E7EEFB; color: var(--primary); }
.dp-link { border: 0; background: none; color: var(--primary); font: inherit; font-weight: 600; font-size: .88rem; cursor: pointer; white-space: nowrap; }
.dp-big { font-size: 1.35rem; color: var(--text); white-space: nowrap; }
.dp-card .ri-tabs.tabs { margin: 0 0 6px; }
.dp-row { display: flex; align-items: center; gap: 12px; padding: 11px 4px; border-top: 1px solid #EEF1F5; cursor: pointer; border-radius: 8px; }
.dp-row:hover { background: #F7F9FC; }
.dp-row > .mt-dot { align-self: flex-start; margin-top: 9px; }
.dp-main { flex: 1; min-width: 0; }
.dp-car .carline { font-size: .86rem; }
.dp-desc { font-weight: 600; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dp-main small { color: var(--muted); font-size: .8rem; }
.dp-done-ic { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; background: #E2F4E8; color: #1E7A3C; display: grid; place-items: center; align-self: flex-start; margin-top: 4px; }
.dp-done-ic svg { width: 14px; height: 14px; }
.dp-stage { flex: 0 0 auto; font-size: .74rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; background: #EEF2F7; color: #344054; }
.st-new { background: #FDE8EA; color: #B42332; } .st-quotes { background: #FFF1D6; color: #8A5300; } .st-contacted { background: #E3ECFB; color: #1F4FA8; }
.st-sched { background: #E7EEFB; color: var(--primary); } .st-shop { background: #EEE8FB; color: #5B3A99; } .st-ready, .st-done { background: #E2F4E8; color: #1E7A3C; }
.st-late { background: #FDE8EA; color: #B42332; } .st-soon { background: #FFF1D6; color: #8A5300; }
.dp-bars { display: grid; gap: 4px; }
.dp-bar { display: grid; grid-template-columns: minmax(90px, 30%) 1fr auto; align-items: center; gap: 12px; padding: 7px 4px; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; border-radius: 8px; color: var(--text); }
.dp-bar:hover { background: #F7F9FC; }
.dp-bar-car { font-weight: 700; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dp-bar-car small { font-weight: 500; color: var(--muted); }
.dp-bar-track { height: 10px; background: #EEF1F5; border-radius: 4px; overflow: hidden; }
.dp-bar-fill { display: block; height: 100%; border-radius: 0 4px 4px 0; }
.dp-fill-green { background: #2E9150; } .dp-fill-purple { background: #7A57C2; }
.dp-bar-val { font-weight: 700; font-size: .88rem; text-align: right; white-space: nowrap; }
.dp-bar-val small { display: block; font-weight: 500; color: var(--muted); font-size: .74rem; }
.dp-more { margin-top: 8px; }
.dp-more > summary { cursor: pointer; color: var(--primary); font-weight: 600; font-size: .88rem; padding: 6px 4px; list-style: none; }
.dp-more > summary::-webkit-details-marker { display: none; }
.dp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dp-chip { border: 1px solid #EBCB6B; background: #FDF5DA; color: #7A5A00; border-radius: 999px; padding: 4px 11px; font: inherit; font-weight: 700; font-size: .85rem; cursor: pointer; }
.dp-chip.is-now { border-color: #F1A7AF; background: #FDE8EA; color: #B42332; }
.dp-meter { height: 10px; background: #EEF1F5; border-radius: 4px; overflow: hidden; }
.dp-meter span { display: block; height: 100%; background: var(--primary); border-radius: 0 4px 4px 0; }
.rd-meter { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; margin-bottom: 10px; }
.rd-slot { display: grid; gap: 1px; padding: 8px 6px; border-radius: 12px; border: 1px solid; font: inherit; cursor: pointer; text-align: center; }
.rd-slot b { font-size: .95rem; } .rd-slot small { font-size: .72rem; font-weight: 600; }
.rd-slot.rd-free { background: #E2F4E8; border-color: #9FD3B0; color: #1E6A36; }
.rd-slot.rd-out { background: #E3ECFB; border-color: #A9C1EE; color: #1F4FA8; }
.rd-slot.rd-late { background: #FDE8EA; border-color: #F1A7AF; color: #B42332; }
.rd-slot.rd-down { background: #F1F3F6; border-color: #C9D0DA; color: #475467; }
.dp-note.card { width: 100%; text-align: left; padding: 14px 18px; cursor: pointer; }
.dp-note .dp-h { margin: 0; }
@media (max-width: 700px) { .dash-cols .card.dp-card { padding: 16px 14px; } .dp-bar { grid-template-columns: 84px 1fr auto; gap: 8px; } }

/* Update 289: quarterly inspections, Fleet view */
.dp-fill-navy { background: var(--primary); }
.qi-qsel { width: auto; flex: 0 0 auto; }
.qi-top { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.qi-ring { --p: 0; width: 118px; height: 118px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center;
  background: conic-gradient(#2E9150 calc(var(--p) * 1%), #EEF1F5 0); }
.qi-ring > div { width: 92px; height: 92px; border-radius: 50%; background: #fff; display: grid; place-content: center; text-align: center; }
.qi-ring b { font-size: 1.55rem; color: var(--text); line-height: 1.1; }
.qi-ring small { font-size: .74rem; color: var(--muted); }
.qi-stats { flex: 1; min-width: 240px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.qi-stat { border: 1px solid #E4E8EF; background: #fff; border-radius: 14px; padding: 12px; text-align: left; font: inherit; cursor: pointer; display: grid; gap: 2px; color: var(--text); }
.qi-stat:hover { background: #F7F9FC; }
.qi-stat b { font-size: 1.5rem; line-height: 1.15; margin-top: 6px; }
.qi-stat small { color: var(--muted); font-size: .8rem; }
.qi-stat-ic, .qi-car { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; }
.qi-stat-ic svg, .qi-car svg { width: 17px; height: 17px; }
.is-done { background: #E2F4E8; color: #1E7A3C; } .is-due { background: #FFF1D6; color: #8A5300; }
.is-missed, .is-flag { background: #FDE8EA; color: #B42332; }
.qi-note { margin: 12px 0 0; color: var(--muted); font-size: .85rem; }
.qi-cols { display: grid; grid-template-columns: minmax(260px, 1fr) 2fr; gap: 1rem; align-items: start; }
.qi-cols > .card { margin: 0; }
.qi-dept { width: 100%; }
.qi-dept.on { background: #E7EEFB; }
.qi-dept { grid-template-columns: minmax(150px, 48%) 1fr auto; }
.qi-dept .dp-bar-car { font-weight: 600; }
.qi-car { width: 36px; height: 36px; flex: 0 0 auto; }
.qi-row .dp-main small { display: block; margin-top: 2px; }
.qi-veh { color: var(--muted); font-size: .9rem; }
.qi-grp-h { display: flex; justify-content: space-between; font-size: .76rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); padding: 12px 4px 4px; }
.qi-grp-h span { font-weight: 700; }
.qi-filter { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 4px; }
.qi-filter .search-input { flex: 1; min-width: 200px; }
.qi-clear { border: 1px solid #C9D6E6; background: #E7EEFB; color: var(--primary); border-radius: 999px; padding: 5px 12px; font: inherit; font-weight: 600; font-size: .85rem; cursor: pointer; }
.qi-empty { color: var(--muted); padding: 12px 4px; margin: 0; }
@media (max-width: 900px) { .qi-cols { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .qi-top { gap: 14px; } .qi-ring { width: 96px; height: 96px; } .qi-ring > div { width: 74px; height: 74px; } .qi-ring b { font-size: 1.25rem; }
  .qi-stats { min-width: 0; flex: 1 1 100%; gap: 6px; } .qi-top { justify-content: center; } .qi-dept { grid-template-columns: minmax(120px, 45%) 1fr auto; } .qi-stat { padding: 9px; } .qi-stat b { font-size: 1.25rem; } .qi-veh { display: block; } }
.card.qi-w { background: #fff; border: 1px solid #C9D3E0; box-shadow: 0 1px 3px rgba(16,37,68,.08), 0 6px 18px rgba(16,37,68,.06); border-radius: 16px; }
.qi-w .dp-row { border-top-color: #EEF1F5; }

/* Update 290: Fleet review of officers' checklists */
.card.cl-review { background: #fff; border: 1px solid #EBCB6B; border-radius: 16px; }
.card.cl-review p { margin: 0 0 .6rem; }
.cl-status { background: #FFF1D6; color: #7A4B00; border-radius: 12px; padding: .65rem .9rem; margin: 0 0 .8rem; font-weight: 600; }
.cl-status.is-ok { background: #E2F4E8; color: #1E5E33; }
.cl-rev-h { display: flex; align-items: center; gap: .5rem; margin: .9rem 0 .3rem; font-size: .9rem; }

/* Update 291: a little more room between New Issue / Log Service and the Dashboard pill */
#sidebar .nav-new { margin-bottom: 10px; }

/* Update 293: My Vehicle rows keep the vehicle pill on one line; badges drop below on a narrow screen */
.mv-row { flex-wrap: wrap; row-gap: .5rem; }
.mv-row > div:first-child { flex: 1 1 auto; min-width: 0; max-width: 100%; }
.mv-row .carline .cl-ymm { min-width: 0; }
.mv-row .carline { flex-wrap: nowrap; white-space: nowrap; max-width: 100%; }
.mv-row .carline .cl-ymm { overflow: hidden; text-overflow: ellipsis; }

/* Update 296: marked (Patrol) vs unmarked (Investigations) reserves */
.pool-tag { display: inline-flex; align-items: center; gap: 5px; font-size: .78rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; vertical-align: middle; }
.pool-tag svg { width: 14px; height: 14px; }
.pool-patrol { background: #E3ECFB; color: #1F4FA8; border: 1px solid #A9C1EE; }
.pool-inv { background: #ECEEF1; color: #3A4250; border: 1px solid #B9C0CA; }
.pool-h { display: flex; align-items: center; gap: 10px; margin: 14px 0 8px; padding: 10px 14px; border-radius: 12px; font-size: 1.02rem; }
.pool-h small { font-weight: 600; opacity: .8; font-size: .85rem; }
.pool-h-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: rgba(255,255,255,.7); flex: 0 0 auto; }
.pool-h-ic svg { width: 18px; height: 18px; }
.pool-h-n { margin-left: auto; font-size: .82rem; font-weight: 700; white-space: nowrap; }
.pool-h-patrol { background: #E3ECFB; color: #1F4FA8; border: 1px solid #A9C1EE; }
.pool-h-inv { background: #ECEEF1; color: #2F3640; border: 1px solid #B9C0CA; }
.rd-pool { margin-bottom: 10px; }
.rd-pool-h { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; margin-bottom: 6px; }
.rd-pool-h svg { width: 14px; height: 14px; }
.rd-pool-h small { font-weight: 600; opacity: .8; margin-left: 4px; }
.rd-pool .rd-meter { margin-bottom: 0; }
.rd-chip-grp { margin: 4px 0 8px; } .rd-chip-grp .chips { margin-top: 6px; }

/* Update 299: painted unmarked vehicles (hidden until tinted, so the white drawing never flashes) */
img[data-paint]:not(.painted) { visibility: hidden; }
/* Next in Line: arrow to show the vehicle */
.ro-exp { border: 1px solid #C9D3E0; background: #fff; color: var(--primary); width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; padding: 0; }
.ro-exp svg { width: 18px; height: 18px; transition: transform .15s; }
.ro-exp.open svg { transform: rotate(180deg); }
.ro-more { grid-column: 1 / -1; padding: 6px 4px 10px; }
.ro-more .carline-h { margin-bottom: 6px; }
.ro-more .tahoe-art { display: block; width: 100%; max-width: 560px; height: auto; margin: 0 auto; }

/* Update 305: Documents pill on the accident repair quotes card */
.q-head-btns { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.btn.q-docs { background: var(--primary-soft); color: var(--primary); border: 1px solid var(--primary); border-radius: 999px; display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 600; text-decoration: none; }
.btn.q-docs svg { width: 15px; height: 15px; }

/* Update 307: quick note box at the top of an issue's History (Enter adds it) */
.card.iss-card.hist-card { border-left: 4px solid var(--primary); }
.hist-card .hist-h h3, .hist-card > h3 { color: var(--primary); }
.hist-note { display: flex; gap: 8px; margin: 0.2rem 0 1rem; padding: 10px; background: var(--primary-soft); border: 1px solid #C9D6EA; border-radius: 12px; }
.hist-note input { flex: 1; min-width: 0; background: #fff; margin: 0; }
.hist-note .btn { flex: none; }
.mt-tl-i.is-new { animation: histNew 1.6s ease-out; }
@keyframes histNew { from { background: #FFF6D6; } to { background: transparent; } }

/* Update 308: paused sections (Comments & Concerns, Vehicle Ideas) for everyone but the Chief, Lt. Doyl and Fleet */
#sidebar .nav-link.nav-paused { opacity: 0.5; }
#sidebar .nav-link.nav-paused::after { content: "Paused"; margin-left: auto; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; border: 1px solid currentColor; border-radius: 999px; padding: 1px 7px; }
.paused-card { text-align: center; padding: 2rem 1.25rem; max-width: 560px; margin: 1rem auto; }
.paused-card h2 { color: var(--primary); margin: 0.6rem 0 0.4rem; font-size: 1.25rem; }
.paused-card p { color: var(--muted); margin: 0 0 0.5rem; }
.paused-ic { width: 52px; height: 52px; margin: 0 auto; border-radius: 50%; background: var(--primary-soft); color: var(--primary); display: grid; place-items: center; }
.paused-ic svg { width: 26px; height: 26px; }
.paused-help a { color: var(--primary); font-weight: 600; }

/* Update 310: photo viewer with a Close button */
body.pv-on { overflow: hidden; }
.pv { position: fixed; inset: 0; z-index: 10000; background: #0B111C; display: flex; flex-direction: column; padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
.pv-top { display: flex; align-items: center; gap: 12px; padding: 10px 14px; color: #fff; }
.pv-count { font-size: 0.9rem; opacity: 0.8; margin-right: auto; }
.pv-close { display: inline-flex; align-items: center; gap: 6px; background: #fff; color: #0B1A33; border: 0; border-radius: 999px; padding: 9px 16px; font-weight: 700; font-size: 1rem; cursor: pointer; }
.pv-close svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2.4; fill: none; }
.pv-stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; position: relative; padding: 8px 12px 16px; }
.pv-img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; }
.pv-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,0.18); color: #fff; font-size: 1.8rem; line-height: 1; cursor: pointer; }
.pv-prev { left: 10px; } .pv-next { right: 10px; }

/* Update 311: Equipment area in the dashboard style */
.eq-nav { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-bottom: 1rem; }
.eq-nav-b { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 14px; border: 1px solid #D5DDE8; background: #fff; font: inherit; font-weight: 600; font-size: .9rem; color: var(--text); cursor: pointer; text-align: left; box-shadow: 0 1px 2px rgba(16,37,68,.05); }
.eq-nav-b:hover { border-color: #A9B7CB; box-shadow: 0 4px 14px rgba(16,37,68,.08); }
.eq-nav-b .dp-ic { width: 32px; height: 32px; border-radius: 10px; }
.eq-nav-b .dp-ic svg { width: 17px; height: 17px; }
.eq-nav-b.on { border: 2px solid var(--primary); padding: 8px 11px; background: #F3F7FE; color: var(--primary); }
.eq-top { margin-bottom: 1rem; }
.eq-top .dp-h { flex-wrap: wrap; }
.eq-top .dp-t small { max-width: 60ch; }
.eq-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.qi-stats.eq-stats { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); }
.eq-stat { position: relative; }
.eq-stat.on { border: 2px solid var(--primary); padding: 11px; background: #F3F7FE; }
.is-info { background: #E3ECFB; color: #1F4FA8; } .is-muted { background: #EEF1F5; color: #475467; }
.card.qi-w + .card.qi-w { margin-top: 1rem; }
.qi-w .search-input { background: #F7F9FC; }
/* Lists: white, light header, roomy rows */
.radio-table.eq-table { background: #fff; border-collapse: separate; border-spacing: 0; }
.radio-table.eq-table thead th { background: #F4F6FA; color: #5B6B82; font-size: .72rem; letter-spacing: .06em; border-bottom: 1px solid #E4E8EF; position: static; }
.radio-table.eq-table thead th:first-child { border-top-left-radius: 10px; } .radio-table.eq-table thead th:last-child { border-top-right-radius: 10px; }
.radio-table.eq-table tbody tr { background: #fff; }
.radio-table.eq-table tr:nth-child(even) td, .radio-table.eq-table td { background: transparent; }
.radio-table.eq-table tbody td { border-bottom: 1px solid #EEF1F5; vertical-align: middle; }
.radio-table.eq-table tbody tr:hover { background: #F7F9FC; }
.eq-car { display: inline-block; font-weight: 800; color: var(--primary); background: #E7EEFB; border: 1px solid #C9D6EA; border-radius: 999px; padding: 2px 10px; text-decoration: none; font-size: .9rem; }
.eq-who { display: block; color: var(--muted); font-size: .8rem; margin-top: 3px; }
.eq-act { text-align: right; }
.qi-w .bt-row { background: #fff; border-color: #E4E8EF; }
.qi-w .bt-row:hover { background: #F7F9FC; }
.qi-w .bt-row small svg { width: 13px; height: 13px; vertical-align: -2px; }
.eq-fuel .list-item { background: #fff; }
.eq-other > div:first-child { margin-top: 1.2rem; }
.eq-other .card { background: #fff; border: 1px solid #C9D3E0; border-radius: 16px; }
.dp-note.qi-w { margin-top: 1rem; }
@media (max-width: 700px) {
  .eq-nav { display: flex; overflow-x: auto; gap: 6px; margin: 0 -16px 0.9rem; padding: 2px 16px 6px; scrollbar-width: none; }
  .eq-nav::-webkit-scrollbar { display: none; }
  .eq-nav-b { flex: 0 0 auto; white-space: nowrap; padding: 7px 10px; font-size: .84rem; gap: 8px; } .eq-nav-b.on { padding: 6px 8px; }
  .eq-nav-b .dp-ic { width: 28px; height: 28px; }
  .qi-stats.eq-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .eq-stat { grid-template-columns: auto minmax(0, 1fr); column-gap: 9px; align-items: center; padding: 9px; }
  .eq-stat.on { padding: 8px; }
  .eq-stat .qi-stat-ic { grid-row: 1 / span 2; }
  .eq-stat b { margin: 0; font-size: 1.2rem; }
  .eq-stat small { font-size: .74rem; line-height: 1.2; }
  .eq-top .qi-ring { width: 84px; height: 84px; } .eq-top .qi-ring > div { width: 64px; height: 64px; } .eq-top .qi-ring b { font-size: 1.1rem; } .eq-top .qi-ring small { font-size: .66rem; }
  /* Tables turn into cards on a phone */
  .qi-w .radio-table-wrap { overflow: visible; }
  .radio-table.eq-table, .radio-table.eq-table tbody { display: block; }
  .radio-table.eq-table thead { display: none; }
  .radio-table.eq-table tbody tr { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; padding: 12px; margin-bottom: 8px; border: 1px solid #E4E8EF; border-radius: 12px; }
  .radio-table.eq-table tbody td { border: 0; padding: 0; min-width: 0; overflow-wrap: anywhere; }
  .radio-table.eq-table tbody td[data-l]::before { content: attr(data-l); display: block; font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin-bottom: 1px; }
  .radio-table.eq-table tbody td:first-child { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; }
  .radio-table.eq-table tbody td:first-child::before { display: none; }
  .radio-table.eq-table tbody td:first-child .eq-who { margin: 0; }
  .radio-table.eq-table tbody td.eq-act { grid-column: 1 / -1; text-align: left; }
}

/* Update 313: Ideas & Feedback */
.fb-ask { font-weight: 700; margin: 4px 0 8px; }
.fb-kinds { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.fb-kind { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid #D5DDE8; border-radius: 14px; background: #fff; font: inherit; color: var(--text); text-align: left; cursor: pointer; box-shadow: 0 1px 2px rgba(16,37,68,.05); }
.fb-kind:hover { border-color: #A9B7CB; box-shadow: 0 4px 14px rgba(16,37,68,.08); }
.fb-kind.on { border: 2px solid var(--primary); padding: 11px 13px; background: #F3F7FE; }
.fb-kind-t { display: grid; gap: 2px; min-width: 0; }
.fb-kind-t b { font-size: .97rem; }
.fb-kind-t small { color: var(--muted); font-size: .8rem; line-height: 1.3; }
.fb-form { margin-top: 14px; padding: 16px; border: 1px solid #E4E8EF; border-left: 4px solid var(--primary); border-radius: 14px; background: #FAFBFD; }
.fb-form.fb-blue { border-left-color: #1F4FA8; } .fb-form.fb-amber { border-left-color: #C98A00; } .fb-form.fb-purple { border-left-color: #5B3A99; } .fb-form.fb-teal { border-left-color: #0E6E66; }
.fb-form-h { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.fb-form-h h3 { margin: 0; font-size: 1.05rem; }
.fb-form-h .dp-ic { width: 32px; height: 32px; border-radius: 10px; } .fb-form-h .dp-ic svg { width: 17px; height: 17px; }
.fb-form textarea, .fb-form input:not([type=file]) { background: #fff; }
.fb-chips .chip svg, .fb-status svg { width: 15px; height: 15px; vertical-align: -3px; margin-right: 2px; }
.fb-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.fb-btns .btn svg, .fb-act-row .btn svg { width: 16px; height: 16px; vertical-align: -3px; margin-right: 3px; }
.fb-sent { margin-top: 12px; padding: 10px 14px; border-radius: 12px; background: #E2F4E8; color: #1E7A3C; font-weight: 700; }
.fb-sent svg { width: 17px; height: 17px; vertical-align: -3px; }
.fb-stats { margin-bottom: 12px; }
.qi-stats.fb-stats { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.fb-tabs { margin-bottom: 10px; }
.fb-item { border: 1px solid #E4E8EF; border-radius: 14px; background: #fff; padding: 14px; margin-bottom: 10px; }
.fb-item.is-new { border-left: 4px solid var(--primary); }
.fb-item.is-done { background: #FAFBFD; }
.fb-item-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fb-item-h .wish-status { margin-left: auto; }
.fb-pill { display: inline-flex; align-items: center; gap: 5px; font-size: .78rem; font-weight: 800; padding: 3px 10px; border-radius: 999px; }
.fb-pill svg { width: 14px; height: 14px; }
.fb-p-blue { background: #E3ECFB; color: #1F4FA8; } .fb-p-amber { background: #FDF1D8; color: #8A5A00; } .fb-p-purple { background: #EEE8FB; color: #5B3A99; } .fb-p-teal { background: #DDF3F1; color: #0E6E66; }
.fb-sub { font-size: .82rem; font-weight: 600; color: var(--muted); }
.fb-new { font-size: .7rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; background: var(--primary); color: #fff; padding: 2px 8px; border-radius: 999px; }
.fb-text { margin: 10px 0 6px; white-space: pre-wrap; font-size: .98rem; }
.fb-why { margin: 0 0 6px; color: var(--text); font-size: .92rem; }
.fb-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; color: var(--muted); font-size: .82rem; margin-top: 6px; }
.fb-meta span { display: inline-flex; align-items: center; gap: 4px; }
.fb-meta svg { width: 14px; height: 14px; }
.fb-meta .eq-car { font-size: .8rem; }
.fb-notes { margin-top: 10px; display: grid; gap: 6px; }
.fb-note { background: #F3F7FE; border-left: 3px solid var(--primary); border-radius: 8px; padding: 8px 12px; font-size: .92rem; }
.fb-note small { color: var(--muted); }
.fb-act { display: flex; gap: 8px; margin-top: 12px; }
.fb-act input { flex: 1; min-width: 0; padding: 8px 12px; border: 1px solid #D5DDE8; border-radius: 10px; font: inherit; background: #F7F9FC; }
.fb-act-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.fb-act-row .fb-status { flex: 1; }
.fb-del { color: var(--danger); border-color: var(--danger); }
.fb-empty { color: var(--muted); padding: 8px 2px; }
.btn.act-pill svg { width: 16px; height: 16px; vertical-align: -3px; }
@media (max-width: 700px) {
  .fb-kinds { grid-template-columns: 1fr 1fr; gap: 8px; }
  .fb-kind { flex-direction: column; align-items: flex-start; gap: 8px; padding: 10px; }
  .fb-kind.on { padding: 9px; }
  .fb-kind-t small { font-size: .74rem; }
  .qi-stats.fb-stats { display: flex; overflow-x: auto; gap: 6px; scrollbar-width: none; }
  .qi-stats.fb-stats .eq-stat { flex: 0 0 auto; min-width: 112px; }
  .fb-form { padding: 12px; }
  .fb-item-h .wish-status { margin-left: 0; }
}
.fb-item .chip, .fb-form .fb-chips .chip { font-size: .86rem; padding: 6px 13px; }

/* Update 315: Announcements. Dashboard banner in the same dark style as Coming Soon, with its own color look */
.anb { position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "head cal" "note note"; gap: 0.8rem 1.4rem; align-items: center;
  width: 100%; text-align: left; cursor: pointer; margin: 0 0 1rem; padding: 1.3rem 1.4rem 1.2rem; border-radius: 20px; color: #fff; font: inherit; background: #000;
  border: 1px solid rgba(255, 255, 255, 0.10); box-shadow: 0 10px 30px rgba(5, 8, 15, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08); transition: transform 0.15s ease, box-shadow 0.15s ease; }
.anb:hover { transform: translateY(-1px); box-shadow: 0 14px 36px rgba(5, 8, 15, 0.45); }
.anb::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--anb-bar); }
.anb > :not(.anb-glow):not(.anb-snow) { position: relative; z-index: 1; }
.anb-glow { position: absolute; top: -70px; width: 280px; height: 170px; border-radius: 50%; filter: blur(44px); pointer-events: none; animation: csb-flash 2.6s ease-in-out infinite; }
.anb-g1 { left: -60px; background: var(--anb-c1); } .anb-g2 { right: -60px; background: var(--anb-c2); animation-delay: 1.3s; }
.anb-head { grid-area: head; display: flex; flex-direction: column; min-width: 0; }
.anb-kicker { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.24em; text-transform: uppercase; color: var(--anb-k); }
.anb-kicker .ic { width: 14px; height: 14px; }
.anb-title { font-family: "Orbitron", var(--display); font-weight: 900; font-size: clamp(1.5rem, 3.8vw, 2.35rem); line-height: 1.08; letter-spacing: 0.05em; text-transform: uppercase; margin: 0.3rem 0 0.7rem;
  background: var(--anb-title); -webkit-background-clip: text; background-clip: text; color: transparent; }
.anb-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.anb-chip { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.86rem; font-weight: 700; padding: 0.42rem 0.8rem; border-radius: 999px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16); }
.anb-chip .ic { width: 15px; height: 15px; color: var(--anb-k); } .anb-chip i { font-weight: 500; opacity: 0.8; }
.anb-cal { grid-area: cal; display: grid; justify-items: center; min-width: 104px; padding: 0.55rem 0.9rem 0.65rem; border-radius: 16px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.18); }
.anb-m { font-size: 0.8rem; font-weight: 900; letter-spacing: 0.24em; text-transform: uppercase; color: var(--anb-k); }
.anb-d { font-family: "Orbitron", var(--display); font-weight: 900; font-size: 2.6rem; line-height: 1; margin: 0.15rem 0; }
.anb-w { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); }
.anb-note { grid-area: note; font-size: 0.9rem; color: rgba(255, 255, 255, 0.85); padding-top: 0.75rem; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.anb-note b { color: var(--anb-k); }
.anb-holiday { --anb-c1: #D4213D; --anb-c2: #1E9E5A; --anb-k: #F6C453; --anb-bar: linear-gradient(90deg, #D4213D 0 33%, #F6C453 33% 66%, #1E9E5A 66%);
  --anb-title: linear-gradient(90deg, #FF6B7F 0%, #FFF3D1 50%, #5FE0A0 100%); }
.anb-department { --anb-c1: #E5243B; --anb-c2: #2F7BFF; --anb-k: #8FB6FF; --anb-bar: linear-gradient(90deg, #E5243B 0%, #E5243B 42%, #fff 50%, #2F7BFF 58%, #2F7BFF 100%);
  --anb-title: linear-gradient(90deg, #FF5A6B 0%, #FFFFFF 50%, #6BA4FF 100%); }
.anb-gold { --anb-c1: #B8862B; --anb-c2: #F6C453; --anb-k: #F6C453; --anb-bar: linear-gradient(90deg, #8A6420, #F6C453, #8A6420);
  --anb-title: linear-gradient(90deg, #F6C453 0%, #FFF6DD 50%, #D9A441 100%); }
.anb-snow { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.anb-snow i { position: absolute; top: -10px; left: var(--x); width: var(--s); height: var(--s); border-radius: 50%; background: #fff; opacity: 0.75; animation: anb-fall var(--d) linear var(--w) infinite; }
@keyframes anb-fall { from { transform: translate(0, -10px); } to { transform: translate(18px, 260px); } }
@media (max-width: 640px) {
  .anb { grid-template-columns: 1fr; grid-template-areas: "cal" "head" "note"; padding: 1.1rem 1rem; }
  .anb-cal { justify-self: start; grid-auto-flow: column; align-items: baseline; gap: 0.5rem; min-width: 0; padding: 0.4rem 0.8rem; }
  .anb-d { font-size: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) { .anb-glow, .anb-snow i { animation: none; } .anb-snow { display: none; } }
/* Announcements page */
.ann-banners { margin-bottom: 0.2rem; }
.ann-card { margin-bottom: 1rem; }
.ann-card.is-past { opacity: 0.7; }
.ann-top { display: flex; align-items: flex-start; gap: 14px; }
.ann-cal { flex: 0 0 auto; width: 58px; height: 62px; border-radius: 14px; display: grid; place-items: center; align-content: center; color: #fff; background: #0B1A33; }
.ann-cal span { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.85; }
.ann-cal b { font-size: 1.5rem; line-height: 1; } .ann-cal svg { width: 22px; height: 22px; }
.ann-holiday { background: linear-gradient(135deg, #B31B32, #16794A); } .ann-gold { background: linear-gradient(135deg, #8A6420, #C99A3A); } .ann-department { background: linear-gradient(135deg, #102544, #1F4E8C); }
.ann-main { flex: 1; min-width: 0; }
.ann-main h3 { margin: 0.1rem 0 0.4rem; font-size: 1.2rem; }
.ann-kicker { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--primary); }
.ann-facts { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--text); font-size: 0.92rem; }
.ann-facts span { display: inline-flex; align-items: center; gap: 5px; } .ann-facts svg { width: 15px; height: 15px; color: var(--muted); }
.ann-flag { flex: 0 0 auto; font-size: 0.72rem; font-weight: 800; padding: 3px 10px; border-radius: 999px; background: #E2F4E8; color: #1E7A3C; }
.ann-note { margin: 0.8rem 0 0; padding: 0.6rem 0.8rem; border-radius: 10px; background: #F3F7FE; border-left: 3px solid var(--primary); }
.ann-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: 0.8rem; color: var(--muted); }
.ann-tools { display: flex; gap: 6px; } .ann-tools svg { width: 15px; height: 15px; vertical-align: -3px; margin-right: 2px; }
.ann-form { margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid #E4E8EF; }
.card > .ann-form:first-child { margin: 0; padding: 0; border: 0; }
.ann-form h3 { margin: 0 0 0.6rem; }
.ann-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
.ann-wide { grid-column: 1 / -1; }
.ann-check { display: flex; align-items: center; gap: 8px; margin: 0.3rem 0 0.6rem; font-weight: 600; }
.ann-check-big { align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: #FFF8E6; border: 1px solid #F3D9A4; }
.ann-check-big input { margin-top: 4px; width: 18px; height: 18px; }
.ann-check-big span { display: grid; } .ann-check-big small { color: var(--muted); font-weight: 500; }
.ann-btns { display: flex; gap: 8px; } .ann-hero .btn svg { width: 16px; height: 16px; vertical-align: -3px; }
.ann-past-h { margin: 1.4rem 0 0.6rem; }
@media (max-width: 640px) { .ann-grid { grid-template-columns: 1fr; } .ann-top { flex-wrap: wrap; } }

/* Update 316: Coming Soon banner shrunk to just the title and its red/blue lights */
.csb.csb-mini { display: flex; align-items: center; justify-content: center; padding: 0.85rem 1rem; border-radius: 16px; }
.csb-mini .csb-title { margin: 0; font-size: clamp(1.2rem, 3vw, 1.6rem); text-align: center; }
.csb-mini .csb-glow { top: -90px; height: 150px; }
/* Update 317 */
.btn.dir-remove { margin-top: 0.75rem; } .btn.dir-remove svg { width: 16px; height: 16px; vertical-align: -3px; margin-right: 4px; }

/* Update 320: Phone List */
.pl-top .search-input { margin-top: 0.2rem; }
.pl-area { display: flex; align-items: center; gap: 8px; margin: 1.3rem 0 0.6rem; } .pl-area svg { width: 18px; height: 18px; }
.pl-grid { display: grid; grid-template-columns: repeat(var(--pl-cols, 1), minmax(0, 1fr)); gap: 0 1rem; align-items: start; }
.pl-col { min-width: 0; }
.pl-sec { break-inside: avoid; margin: 0 0 1rem; padding: 0.9rem 1rem 0.6rem; display: inline-block; width: 100%; }
.pl-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-bottom: 2px solid var(--primary); padding-bottom: 0.4rem; margin-bottom: 0.4rem; }
.pl-head h3 { margin: 0; font-size: 1.02rem; } .pl-head .btn svg { width: 15px; height: 15px; }
.pl-sub { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 0.85rem; color: var(--muted); margin-bottom: 0.3rem; }
.pl-sub span, .pl-sub a { display: inline-flex; align-items: center; gap: 4px; } .pl-sub a { color: var(--primary); font-weight: 700; text-decoration: none; }
.pl-sub svg { width: 14px; height: 14px; }
.pl-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 0.42rem 0.3rem; border-bottom: 1px solid #EEF1F5; }
.pl-row:last-child { border-bottom: 0; }
.pl-row.is-hi { background: #FFF6D6; border-radius: 8px; padding-left: 0.5rem; padding-right: 0.5rem; }
.pl-who { min-width: 0; } .pl-who b { font-weight: 600; } .pl-who small { display: block; color: var(--muted); font-size: 0.8rem; overflow-wrap: anywhere; }
.pl-who small a { color: var(--primary); }
.pl-nums { display: grid; justify-items: end; gap: 2px; flex: 0 0 auto; text-align: right; }
.pl-tel { font-weight: 700; color: var(--primary); text-decoration: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pl-alt { font-weight: 600; font-size: 0.85rem; color: var(--text); }
.pl-ext { font-size: 0.82rem; font-weight: 700; color: #5B6B82; background: #EEF1F5; border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
.pl-form textarea { font-family: ui-monospace, Menlo, monospace; font-size: 0.82rem; }
.pl-form-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.pl-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.pl-top .btn svg { width: 15px; height: 15px; vertical-align: -3px; }
@media (max-width: 700px) { .pl-grid { columns: 1; } .pl-form-2 { grid-template-columns: 1fr; } }
/* Update 321: each Phone List card gets its own soft color */
.pl-sec { --pt: #F3F7FD; --pl: #2F6FD0; background: var(--pt); }
.pl-tint-0 { --pt: #F1F6FE; --pl: #2F6FD0; } .pl-tint-1 { --pt: #F0FAF4; --pl: #2E9A5A; }
.pl-tint-2 { --pt: #FEF8EC; --pl: #C98A12; } .pl-tint-3 { --pt: #F6F2FD; --pl: #7B5BC9; }
.pl-tint-4 { --pt: #EEF9FA; --pl: #1E929E; } .pl-tint-5 { --pt: #FDF2F4; --pl: #C2526A; }
.pl-tint-6 { --pt: #F4F6EC; --pl: #7C8A2E; } .pl-tint-7 { --pt: #FBF3EC; --pl: #C06A2E; }
.pl-sec .pl-head { border-bottom-color: var(--pl); }
.pl-sec .pl-row { border-bottom-color: rgba(20, 40, 70, 0.08); }
.pl-sec .pl-ext { background: rgba(255, 255, 255, 0.8); }
/* Update 321: row-by-row editor */
.pl-editing { background: #fff; box-shadow: 0 0 0 2px var(--pl); }
.pl-form-h { display: flex; align-items: center; gap: 6px; font-weight: 700; color: var(--pl); margin-bottom: 0.6rem; } .pl-form-h svg { width: 15px; height: 15px; }
.pl-ed-rows { display: grid; gap: 8px; margin: 0.3rem 0 0.6rem; }
.pl-ed { display: grid; grid-template-columns: 1.3fr 1.2fr 1fr 0.8fr auto; align-items: end; gap: 6px 8px; padding: 8px; border: 1px solid #E3E8EF; border-radius: 10px; background: var(--pt); }
.pl-ed.is-hi { background: #FFF6D6; border-color: #EBCB6B; }
.pl-ed-f { min-width: 0; } .pl-ed-f label { display: block; font-size: 0.72rem; font-weight: 700; color: var(--muted); margin-bottom: 2px; }
.pl-ed-f input { width: 100%; box-sizing: border-box; padding: 6px 8px; font-size: 0.9rem; border: 1px solid #D5DCE6; border-radius: 7px; background: #fff; }
.pl-ed-b { display: flex; gap: 6px; justify-content: flex-end; }
.pl-ib { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 30px; border: 1px solid #D5DCE6; border-radius: 7px; background: #fff; color: #5B6B82; cursor: pointer; font-size: 0.75rem; }
.pl-ib svg { width: 15px; height: 15px; } .pl-ib:disabled { opacity: 0.35; cursor: default; }
.pl-ib.on { background: #FFE7A3; border-color: #E2B33C; color: #8A6300; }
.pl-ib-del:hover { color: #C0392B; border-color: #E6A9A1; }
.pl-addrow { width: 100%; margin-bottom: 0.7rem; border-style: dashed; } .pl-addrow svg { width: 15px; height: 15px; vertical-align: -3px; }
.pl-sec.pl-editing { display: block; margin-bottom: 1rem; }
@media (max-width: 700px) { .pl-ed { grid-template-columns: 1fr 1fr; } .pl-ed-b { grid-column: 1 / -1; } .pl-ed-f:nth-child(1), .pl-ed-f:nth-child(2) { grid-column: 1 / -1; } .pl-ib { min-width: 42px; height: 36px; } }
/* Update 325: "Add to every vehicle" under the add box */
.eq-add { flex-wrap: wrap; }
.eq-all { flex-basis: 100%; display: flex; align-items: center; gap: 6px; font-size: 0.88rem; color: var(--muted); cursor: pointer; }
.eq-all input { width: auto; flex: 0 0 auto; }
/* Update 327: Fuel Card Drivers */
.fd-top-btns { display: flex; gap: 6px; flex-wrap: wrap; margin: 0.6rem 0 0.2rem; } .fd-top-btns svg { width: 15px; height: 15px; vertical-align: -3px; }
.fd-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0.4rem 0 0.7rem; }
.fd-filters .chip { min-height: 36px; padding: 0.3rem 0.85rem; } .fd-filters .chip b { margin-left: 4px; opacity: 0.8; }
.fd-list { margin-top: 0.7rem; }
.fd-row { display: grid; grid-template-columns: 110px minmax(0, 1.6fr) 130px 110px 110px 44px; gap: 10px; align-items: center; padding: 0.55rem 0.4rem; border-bottom: 1px solid #EEF1F5; }
.fd-row.is-off { opacity: 0.7; }
.fd-headrow { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); border-bottom: 2px solid #E3E8EF; }
.fd-pin { font-family: ui-monospace, Menlo, monospace; font-weight: 700; letter-spacing: 0.05em; font-variant-numeric: tabular-nums; }
.fd-name { min-width: 0; overflow-wrap: anywhere; } .fd-date { color: var(--muted); font-size: 0.88rem; font-variant-numeric: tabular-nums; }
.fd-edit svg { width: 15px; height: 15px; }
.fd-editing { display: block; background: #F5F8FC; border-radius: 10px; padding: 0.8rem; margin: 0.4rem 0; }
.fd-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 10px; align-items: end; }
.fd-f label { display: block; font-size: 0.75rem; font-weight: 700; color: var(--muted); margin-bottom: 2px; } .fd-f input { width: 100%; box-sizing: border-box; }
.fd-chk { display: flex; align-items: center; gap: 6px; font-weight: 600; } .fd-chk input { width: auto; }
.fd-btns { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 700px) {
  .fd-headrow { display: none; }
  .fd-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name edit" "pin pin" "tags tags"; row-gap: 4px; }
  .fd-name { grid-area: name; } .fd-edit { grid-area: edit; } .fd-pin { grid-area: pin; font-size: 0.9rem; }
  .fd-row > .fd-tag, .fd-row > .fd-date { display: inline-block; }
  .fd-row:not(.fd-editing) { grid-template-columns: minmax(0, 1fr) auto auto auto; column-gap: 6px; grid-template-areas: "name name name edit" "pin tied act date"; }
  .fd-row > .fd-tag:nth-of-type(3) { grid-area: tied; } .fd-row > .fd-tag:nth-of-type(4) { grid-area: act; } .fd-date { grid-area: date; font-size: 0.78rem; justify-self: end; } .fd-edit { justify-self: end; }
  .fd-form { grid-template-columns: 1fr 1fr; }
}
/* Update 329: reserve check-in/out reminder pop-up */
.rr-back { position: fixed; inset: 0; z-index: 9999; background: rgba(10, 20, 40, 0.55); display: flex; align-items: center; justify-content: center; padding: 16px; }
.rr-card { background: var(--card, #fff); color: var(--text); border-radius: 16px; max-width: 420px; width: 100%; padding: 1.4rem 1.3rem 1.1rem; text-align: center; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3); border-top: 5px solid #E0A526; }
.rr-ic { width: 56px; height: 56px; margin: 0 auto 0.5rem; border-radius: 50%; background: #FFF4D9; color: #B7791F; display: flex; align-items: center; justify-content: center; }
.rr-ic svg { width: 28px; height: 28px; }
.rr-card h3 { margin: 0.2rem 0 0.5rem; font-size: 1.2rem; }
.rr-card p { margin: 0 0 1.1rem; font-size: 1.02rem; line-height: 1.45; }
.rr-btns { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.rr-btns .btn { min-width: 130px; }
/* Update 331: permission checkboxes under each user */
.perm-row { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding-top: 0.5rem; border-top: 1px dashed #E3E8EF; }
.perm-h { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin-right: 4px; }
.perm { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid #DCE3EC; border-radius: 999px; font-size: 0.82rem; font-weight: 600; cursor: pointer; background: #fff; }
.perm input { width: auto; margin: 0; }
.perm small { font-weight: 600; color: var(--muted); }
.perm.is-built { background: #EEF3FA; border-color: #C9D6E8; cursor: default; color: #3A4F6E; }
.perm.is-temp { background: #FFF6DE; border-color: #EBCB6B; color: #7A5A00; } .perm.is-temp small { color: #8A6300; }
.perm-ask { text-align: left; } .perm-ask h3 { text-align: center; }
.perm-ic { background: #E8F0FB; color: var(--primary); }
.perm-opt { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 0.5rem 0.6rem; border: 1px solid #E3E8EF; border-radius: 10px; margin-bottom: 0.5rem; font-weight: 600; cursor: pointer; }
.perm-opt input[type=radio] { width: auto; margin: 0; } .perm-opt input[type=date] { width: auto; flex: 1 1 150px; }
.perm-ask .co-hint { margin: 0.2rem 0 0.9rem; font-size: 0.85rem; }
/* Update 332: what caused the issue */
.cause-b { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; font-size: 0.76rem; font-weight: 700; margin-right: 4px; white-space: nowrap; }
.cause-accident { background: #FDE7E9; color: #A51F2D; } .cause-broke { background: #E8F0FB; color: #1F4E8C; } .cause-other { background: #EEF1F5; color: #4A5A70; }
[data-for="cause"] .chip svg { width: 15px; height: 15px; vertical-align: -3px; }
/* Update 333: connection problems log */
.net-card summary { cursor: pointer; list-style: none; } .net-card summary::-webkit-details-marker { display: none; }
.net-rows { display: grid; gap: 4px; max-height: 420px; overflow: auto; }
.net-row { display: grid; grid-template-columns: 120px 140px minmax(0, 1fr) 190px; gap: 8px; font-size: 0.82rem; padding: 5px 8px; border-radius: 8px; background: #F5F7FA; overflow-wrap: anywhere; }
.net-row.is-bad { background: #FDECEC; } .net-row.is-ok { background: #EEF8F1; } .net-row.is-start { background: #EEF3FA; }
@media (max-width: 700px) { .net-row { grid-template-columns: 1fr 1fr; } }

/* ===== Update 334: Investigations ===== */
.iv-hero { position: relative; overflow: hidden; border-radius: 18px; padding: 1.3rem 1.3rem 1.1rem; margin-bottom: 0.9rem; color: #fff;
  background: radial-gradient(120% 140% at 100% 0%, #2F5DA8 0%, #17305C 45%, #0D1B36 100%); box-shadow: 0 10px 28px rgba(13, 27, 54, 0.25); }
.iv-hero::after { content: ''; position: absolute; right: -40px; top: -40px; width: 200px; height: 200px; border-radius: 50%; border: 28px solid rgba(255,255,255,0.05); }
.iv-hero-t { display: flex; gap: 0.9rem; align-items: center; position: relative; z-index: 1; }
.iv-hero-ic { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.22); }
.iv-hero-ic svg { width: 28px; height: 28px; stroke: #fff; }
.iv-hero h2 { margin: 0; font-size: 1.45rem; letter-spacing: 0.01em; color: #fff; }
.iv-hero p { margin: 0.2rem 0 0; color: #C9D6EE; font-size: 0.9rem; line-height: 1.35; }
.iv-search { position: relative; z-index: 1; margin-top: 1rem; display: flex; align-items: center; gap: 0.55rem; background: #fff; border-radius: 12px; padding: 0 0.85rem; box-shadow: 0 4px 14px rgba(0,0,0,0.18); }
.iv-search svg { width: 20px; height: 20px; stroke: #5B6B82; flex: 0 0 auto; }
.iv-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 1rem; padding: 0.8rem 0; color: #14213D; }
.iv-tabs { display: flex; gap: 0.5rem; overflow-x: auto; padding: 0.1rem 0.1rem 0.6rem; margin-bottom: 0.4rem; scrollbar-width: none; }
.iv-tabs::-webkit-scrollbar { display: none; }
.iv-tab { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 0.45rem; min-height: 46px; padding: 0.45rem 0.9rem; border-radius: 999px; border: 1.5px solid var(--border); background: var(--card); color: var(--text); font: inherit; font-weight: 700; cursor: pointer; transition: transform .12s, box-shadow .12s; }
.iv-tab svg { width: 18px; height: 18px; }
.iv-tab b { font-size: 0.75rem; min-width: 1.5rem; padding: 0.1rem 0.4rem; border-radius: 999px; background: rgba(91,107,130,0.13); text-align: center; }
.iv-tab:hover { transform: translateY(-1px); box-shadow: 0 3px 10px rgba(0,0,0,0.08); }
.iv-tab.on { color: #fff; border-color: transparent; box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.iv-tab.on b { background: rgba(255,255,255,0.25); }
.iv-tab-quick.on { background: #2F5DA8; } .iv-tab-links.on { background: #6B4FB8; } .iv-tab-banks.on { background: #1E7A5A; }
.iv-tab-business.on { background: #C0632B; } .iv-tab-dcfs.on { background: #B03A6B; }
.iv-tabbar { display: flex; justify-content: space-between; align-items: flex-end; gap: 0.8rem; flex-wrap: wrap; margin: 0.3rem 0 0.8rem; }
.iv-tabbar h3 { margin: 0; display: flex; align-items: center; gap: 0.45rem; font-size: 1.15rem; }
.iv-tabbar h3 svg { width: 20px; height: 20px; }
.iv-tabbar small { color: var(--muted, #5B6B82); }
.iv-tabbar-r { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.iv-vf { display: flex; gap: 0.35rem; flex-wrap: wrap; } .iv-vf .chip { min-height: 38px; padding: 0.35rem 0.8rem; font-size: 0.85rem; }
.iv-sec-h { display: flex; align-items: center; gap: 0.45rem; margin: 1rem 0 0.6rem; font-size: 1.05rem; }
.iv-sec-h svg { width: 18px; height: 18px; } .iv-sec-h small { color: var(--muted, #5B6B82); font-weight: 600; }
.iv-masonry { display: grid; grid-template-columns: repeat(var(--iv-cols, 1), minmax(0, 1fr)); gap: 0.8rem; align-items: start; }
.iv-col { display: flex; flex-direction: column; gap: 0.8rem; min-width: 0; }
.iv-masonry > .iv-card { margin: 0; }
.iv-card { position: relative; margin: 0; padding: 1rem 1rem 0.85rem; border-radius: 14px; border-top: 4px solid var(--iv-c, #2F5DA8); min-width: 0; }
.iv-t-quick { --iv-c: #2F5DA8; --iv-bg: #EEF3FC; } .iv-t-banks { --iv-c: #1E7A5A; --iv-bg: #EAF6F0; } .iv-t-business { --iv-c: #C0632B; --iv-bg: #FCF1E9; }
.iv-t-dcfs { --iv-c: #B03A6B; --iv-bg: #FBEEF3; } .iv-t-links { --iv-c: #6B4FB8; --iv-bg: #F2EEFB; }
.iv-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.5rem; }
.iv-head h3 { margin: 0; font-size: 1.05rem; line-height: 1.25; overflow-wrap: anywhere; }
.iv-pen { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--border); background: var(--card); color: #5B6B82; display: grid; place-items: center; cursor: pointer; }
.iv-pen svg { width: 16px; height: 16px; } .iv-pen:hover { color: var(--iv-c, #2F5DA8); border-color: var(--iv-c, #2F5DA8); }
.iv-badge { display: inline-flex; align-items: center; gap: 0.3rem; margin-top: 0.5rem; padding: 0.22rem 0.6rem; border-radius: 999px; font-size: 0.78rem; font-weight: 700; }
.iv-badge svg { width: 14px; height: 14px; }
.iv-b-go { background: #DDF3E6; color: #11643F; } .iv-b-ok { background: #E3ECFA; color: #1F4C8F; } .iv-b-warn { background: #FFF1CC; color: #7A5600; }
.iv-b-stop { background: #FBE3E3; color: #9B1C1C; } .iv-b-info { background: #EDE7FA; color: #4E3796; }
.iv-note { display: flex; gap: 0.45rem; margin-top: 0.6rem; padding: 0.55rem 0.7rem; border-radius: 10px; background: var(--iv-bg, #EEF3FC); color: #2A3A52; font-size: 0.88rem; line-height: 1.35; }
.iv-note svg { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 2px; stroke: var(--iv-c, #2F5DA8); }
.iv-rows { margin-top: 0.55rem; }
.iv-row { display: flex; justify-content: space-between; gap: 0.6rem; padding: 0.55rem 0; border-top: 1px solid var(--border); }
.iv-row:first-child { border-top: 0; }
.iv-who { min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.iv-who b { font-size: 0.95rem; overflow-wrap: anywhere; } .iv-who small { color: var(--muted, #5B6B82); font-size: 0.82rem; overflow-wrap: anywhere; }
.iv-nums { display: flex; flex-direction: column; align-items: flex-end; gap: 0.25rem; flex: 0 0 auto; }
.iv-tel { display: inline-block; padding: 0.22rem 0.6rem; border-radius: 8px; background: var(--iv-bg, #EEF3FC); color: var(--iv-c, #2F5DA8); font-weight: 700; font-size: 0.88rem; text-decoration: none; white-space: nowrap; }
.iv-tel.iv-alt { background: transparent; border: 1px solid var(--border); color: #2A3A52; font-weight: 600; }
.iv-ext { font-size: 0.82rem; color: var(--muted, #5B6B82); white-space: nowrap; }
.iv-mail { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.84rem; color: var(--iv-c, #2F5DA8); text-decoration: none; overflow-wrap: anywhere; word-break: break-word; }
.iv-mail svg { width: 14px; height: 14px; flex: 0 0 auto; } .iv-mail:hover { text-decoration: underline; }
.iv-cardlink { margin-top: 0.5rem; }
.iv-plain { font-size: 0.84rem; color: #2A3A52; overflow-wrap: anywhere; }
.iv-foot { margin-top: 0.55rem; font-size: 0.72rem; color: var(--muted, #8A97AB); }
.iv-group-h { margin: 1.1rem 0 0.55rem; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #6B4FB8; }
.iv-group-h:first-of-type { margin-top: 0.2rem; }
.iv-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.75rem; }
.iv-link { position: relative; display: flex; flex-direction: column; gap: 0.55rem; padding: 0.9rem; border-radius: 14px; background: var(--card); border: 1px solid var(--border); box-shadow: 0 2px 8px rgba(20, 33, 61, 0.05); transition: box-shadow .15s, transform .15s; min-width: 0; --iv-c: #6B4FB8; --iv-bg: #F2EEFB; }
.iv-link:hover { box-shadow: 0 8px 22px rgba(20, 33, 61, 0.12); transform: translateY(-2px); }
.iv-link-top { display: flex; align-items: center; gap: 0.65rem; }
.iv-fav { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; font-weight: 800; font-size: 1.1rem; color: #fff; background: linear-gradient(135deg, #8A6FE0, #5A3EA8); }
.iv-link-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.iv-link-t b { font-size: 0.98rem; line-height: 1.2; overflow-wrap: anywhere; } .iv-link-t small { color: var(--muted, #5B6B82); font-size: 0.8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iv-link-note { margin: 0; font-size: 0.86rem; color: #2A3A52; line-height: 1.35; }
.iv-open { margin-top: auto; justify-content: center; display: inline-flex; align-items: center; gap: 0.35rem; text-decoration: none; }
.iv-open svg { width: 16px; height: 16px; }
.iv-creds { display: flex; flex-direction: column; gap: 0.35rem; margin-top: 0.4rem; padding: 0.55rem; border-radius: 10px; background: #F5F7FB; border: 1px dashed #CBD3E1; }
.iv-cred { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr) auto; align-items: center; gap: 0.45rem; }
.iv-cred span { font-size: 0.74rem; font-weight: 700; color: #5B6B82; text-transform: uppercase; letter-spacing: 0.04em; }
.iv-cred code { font-size: 0.85rem; background: #fff; border: 1px solid #E1E6EF; border-radius: 6px; padding: 0.2rem 0.4rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #14213D; }
.iv-copy { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.25rem 0.55rem; min-height: 32px; border-radius: 7px; border: 1px solid #CBD3E1; background: #fff; color: #2A3A52; font: inherit; font-size: 0.78rem; font-weight: 700; cursor: pointer; }
.iv-copy svg { width: 14px; height: 14px; } .iv-copy.ok { background: #DDF3E6; border-color: #9BD3B2; color: #11643F; }
.iv-empty { text-align: center; padding: 2rem 1rem; color: var(--muted, #5B6B82); }
.iv-empty svg { width: 32px; height: 32px; opacity: 0.5; }
.iv-editing { border-top: 4px solid var(--iv-c, #2F5DA8); margin-bottom: 1rem; padding: 1rem; border-radius: 14px; }
.iv-form-h { display: flex; align-items: center; gap: 0.4rem; font-weight: 800; color: var(--iv-c, #2F5DA8); margin-bottom: 0.7rem; }
.iv-form-h svg { width: 18px; height: 18px; }
.iv-f2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 0.8rem; }
.iv-more { margin: 0.2rem 0 0.7rem; border: 1px solid var(--border); border-radius: 10px; padding: 0.5rem 0.75rem; }
.iv-more summary { cursor: pointer; font-weight: 700; } .iv-more[open] summary { margin-bottom: 0.5rem; }
.iv-rows-l { display: block; font-weight: 700; margin: 0.3rem 0 0.4rem; }
.iv-ed-rows { display: flex; flex-direction: column; gap: 0.55rem; }
.iv-ed { display: grid; grid-template-columns: 1.3fr 1.3fr 1fr 0.9fr auto; grid-template-areas: "n d p x b" "e e e e b"; gap: 0.4rem 0.5rem; padding: 0.6rem; border-radius: 10px; background: var(--iv-bg, #EEF3FC); }
.iv-ed-f { display: flex; flex-direction: column; min-width: 0; }
.iv-ed-f:nth-child(1) { grid-area: n; } .iv-ed-f:nth-child(2) { grid-area: d; } .iv-ed-f:nth-child(3) { grid-area: p; } .iv-ed-f:nth-child(4) { grid-area: x; } .iv-ed-wide { grid-area: e; }
.iv-ed-f label { font-size: 0.72rem; font-weight: 700; color: #5B6B82; margin-bottom: 0.15rem; }
.iv-ed-f input { width: 100%; box-sizing: border-box; font: inherit; font-size: 0.92rem; padding: 0.45rem 0.55rem; border: 1px solid #CBD3E1; border-radius: 7px; background: #fff; }
.iv-ed-b { grid-area: b; display: flex; flex-direction: column; gap: 0.3rem; justify-content: center; }
@media (max-width: 700px) {
  .iv-hero { padding: 1rem; border-radius: 14px; } .iv-hero h2 { font-size: 1.25rem; } .iv-hero-ic { width: 44px; height: 44px; }
  .iv-f2 { grid-template-columns: 1fr; }
  .iv-ed { grid-template-columns: 1fr 1fr auto; grid-template-areas: "n n b" "d d b" "p x b" "e e b"; }
  .iv-links { grid-template-columns: 1fr; }
  .iv-tabbar-r { width: 100%; } .iv-tabbar-r #iv-add { margin-left: auto; }
}
.iv-card, .iv-link, .iv-editing, .iv-tab:not(.on) { background: #fff; }

/* ===== Update 335: Time Card ===== */
.tc-hero { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.4rem; border-radius: 20px; color: #fff; margin-bottom: 0.9rem;
  background: radial-gradient(110% 130% at 0% 0%, #1D3F7A 0%, #0F2148 55%, #0A1630 100%); box-shadow: 0 12px 30px rgba(10, 22, 48, 0.28); position: relative; overflow: hidden; }
.tc-hero::before { content: ''; position: absolute; right: -60px; bottom: -80px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(242,183,5,0.18), transparent 70%); }
.tc-hero-l { position: relative; z-index: 1; min-width: 0; }
.tc-kicker { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #F2C14E; }
.tc-kicker svg { width: 14px; height: 14px; stroke: #F2C14E; }
.tc-clock { font-size: 3rem; font-weight: 800; line-height: 1.05; margin-top: 0.3rem; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.tc-today { color: #C9D6EE; font-weight: 600; }
.tc-period { margin-top: 0.4rem; color: #C9D6EE; font-size: 0.9rem; } .tc-period b { color: #fff; }
.tc-punch { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-top: 1rem; }
.tc-btn { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 48px; padding: 0.6rem 1.2rem; border-radius: 999px; border: 0; font: inherit; font-weight: 800; font-size: 1rem; cursor: pointer; transition: transform .12s, box-shadow .12s; }
.tc-btn svg { width: 20px; height: 20px; }
.tc-btn.in { background: #2FBF71; color: #fff; box-shadow: 0 6px 18px rgba(47,191,113,0.4); }
.tc-btn.out { background: #F25F4C; color: #fff; box-shadow: 0 6px 18px rgba(242,95,76,0.4); }
.tc-btn.ghost { background: rgba(255,255,255,0.1); color: #fff; border: 1px solid rgba(255,255,255,0.3); }
.tc-btn:hover { transform: translateY(-1px); }
.tc-since { font-size: 0.88rem; color: #C9D6EE; } .tc-since b { color: #fff; }
.tc-hero-r { position: relative; z-index: 1; width: 150px; height: 150px; flex: 0 0 auto; }
.tc-ring { width: 100%; height: 100%; }
.tc-ring circle { fill: none; stroke-width: 12; }
.tc-ring-bg { stroke: rgba(255,255,255,0.12); }
.tc-ring-fg { stroke: #4FA3FF; stroke-linecap: round; transition: stroke-dashoffset .6s; }
.tc-ring-fg.over { stroke: #F2B705; }
.tc-ring-t { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.tc-ring-t b { font-size: 2rem; line-height: 1; } .tc-ring-t span { font-size: 0.72rem; color: #C9D6EE; line-height: 1.2; margin-top: 0.2rem; }
.tc-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.7rem; margin-bottom: 0.9rem; }
.tc-stat { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 0.8rem 0.9rem; border-left: 4px solid #2F5DA8; display: flex; flex-direction: column; min-width: 0; }
.tc-stat span { font-size: 0.74rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: #5B6B82; }
.tc-stat b { font-size: 1.7rem; line-height: 1.15; margin-top: 0.15rem; color: #14213D; }
.tc-stat small { color: #5B6B82; font-size: 0.78rem; }
.tc-stat.ot { border-left-color: #D98A00; } .tc-stat.ext { border-left-color: #6B4FB8; } .tc-stat.leave { border-left-color: #1E7A5A; }
.tc-flagbar { display: flex; align-items: center; gap: 0.5rem; padding: 0.65rem 0.9rem; border-radius: 12px; background: #FFF6D6; border: 1px solid #F0D68A; color: #6B5100; font-weight: 600; margin-bottom: 0.9rem; }
.tc-flagbar svg { width: 18px; height: 18px; flex: 0 0 auto; }
.tc-chart-card { background: #fff; } .tc-chart-card h3 { margin: 0 0 0.7rem; font-size: 1rem; }
.tc-chart-plot { position: relative; height: 130px; display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; align-items: end; border-bottom: 1px solid #D5DCE6; }
.tc-forty { position: absolute; left: 0; right: 0; border-top: 1.5px dashed #9AA7BA; pointer-events: none; }
.tc-forty span { position: absolute; right: 0; top: -1.15rem; font-size: 0.7rem; font-weight: 700; color: #5B6B82; background: #fff; padding: 0 0.2rem; }
.tc-bar { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; cursor: default; }
.tc-bar i { display: block; width: 100%; max-width: 28px; margin: 0 auto; }
.tc-bar-reg { background: #8FB4E8; border-radius: 0 0 0 0; } .tc-bar-ot { background: #E8A33D; border-radius: 4px 4px 0 0; }
.tc-bar .tc-bar-reg:first-child { border-radius: 4px 4px 0 0; }
.tc-bar.cur .tc-bar-reg { background: #2F5DA8; }
.tc-bar:hover i { filter: brightness(0.92); }
.tc-chart-x { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; margin-top: 0.3rem; }
.tc-chart-x span { text-align: center; font-size: 0.68rem; color: #5B6B82; white-space: nowrap; overflow: hidden; }
.tc-legend { display: flex; gap: 1rem; margin-top: 0.5rem; font-size: 0.78rem; color: #5B6B82; flex-wrap: wrap; }
.tc-legend span { display: inline-flex; align-items: center; gap: 0.35rem; }
.tc-sw { width: 12px; height: 12px; border-radius: 3px; display: inline-block; } .tc-sw.reg { background: #2F5DA8; } .tc-sw.ot { background: #E8A33D; }
.tc-period-card { background: #fff; border-radius: 16px; }
.tc-period-card.cur { box-shadow: 0 0 0 2px #2F5DA8, 0 8px 22px rgba(47,93,168,0.12); }
.tc-period-h { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; margin-bottom: 0.4rem; }
.tc-period-h h3 { margin: 0; font-size: 1.1rem; }
.tc-now { display: inline-block; margin-top: 0.2rem; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #2F5DA8; }
.tc-csv { display: inline-flex; align-items: center; gap: 0.35rem; } .tc-csv svg { width: 16px; height: 16px; }
.tc-week { margin-top: 0.8rem; }
.tc-week-h { display: flex; align-items: baseline; gap: 0.6rem; }
.tc-week-h b { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.08em; color: #14213D; }
.tc-week-h span { color: #5B6B82; font-size: 0.85rem; }
.tc-week-tot { margin-left: auto; font-weight: 800; color: #14213D !important; font-variant-numeric: tabular-nums; }
.tc-week-tot.over { color: #B36B00 !important; } .tc-week-tot.under { color: #B03A3A !important; }
.tc-meter { height: 6px; border-radius: 999px; background: #E8EDF5; margin: 0.35rem 0 0.3rem; overflow: hidden; }
.tc-meter i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #4FA3FF, #2F5DA8); }
.tc-row { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr) auto auto; gap: 0.7rem; align-items: center; padding: 0.6rem 0; border-top: 1px solid #EEF1F6; }
.tc-row.flagged { background: linear-gradient(90deg, #FFF8DE, transparent); border-radius: 8px; padding-left: 0.35rem; }
.tc-date { display: flex; flex-direction: column; align-items: center; justify-content: center; background: #F2F5FA; border-radius: 10px; padding: 0.3rem 0; }
.tc-date b { font-size: 0.78rem; text-transform: uppercase; color: #5B6B82; } .tc-date span { font-size: 0.85rem; font-weight: 700; color: #14213D; white-space: nowrap; }
.tc-mid { min-width: 0; }
.tc-mid-top { display: flex; flex-wrap: wrap; gap: 0.4rem 0.6rem; align-items: center; }
.tc-time { font-size: 0.88rem; color: #2A3A52; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tc-live { color: #1E8F55; }
.tc-note { font-size: 0.84rem; color: #5B6B82; margin-top: 0.2rem; overflow-wrap: anywhere; }
.tc-flag { display: flex; gap: 0.35rem; align-items: flex-start; font-size: 0.8rem; color: #7A5600; margin-top: 0.25rem; }
.tc-flag svg { width: 14px; height: 14px; flex: 0 0 auto; margin-top: 2px; }
.tc-hrs { font-size: 1.25rem; font-weight: 800; color: #14213D; text-align: right; font-variant-numeric: tabular-nums; }
.tc-hrs small { font-size: 0.7rem; font-weight: 600; color: #5B6B82; margin-left: 0.15rem; }
.tc-chip { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.15rem 0.55rem; border-radius: 999px; font-size: 0.75rem; font-weight: 800; }
.tc-chip svg { width: 13px; height: 13px; }
.tc-work { background: #E3ECFA; color: #1F4C8F; } .tc-train { background: #DFF2F3; color: #0F6670; } .tc-ot { background: #FDEBCB; color: #8A5300; }
.tc-ext { background: #ECE6FA; color: #4E3796; } .tc-hol { background: #DDF3E6; color: #11643F; } .tc-vac { background: #DCEFFA; color: #145E8A; }
.tc-sick { background: #FBE3E3; color: #9B1C1C; } .tc-off { background: #ECEFF3; color: #4A5568; }
.tc-week-f { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.4rem; }
.tc-pill { font-size: 0.76rem; font-weight: 700; padding: 0.2rem 0.6rem; border-radius: 999px; }
.tc-pill.ot { background: #FDEBCB; color: #8A5300; } .tc-pill.ext { background: #ECE6FA; color: #4E3796; }
.tc-none { margin: 0.4rem 0; }
.tc-more { width: 100%; justify-content: center; margin-bottom: 1rem; }
.tc-modal .rr-card { max-width: 520px; width: 100%; max-height: calc(100vh - 32px); overflow-y: auto; text-align: left; }
.tc-form-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.6rem; } .tc-form-h b { font-size: 1.15rem; }
.tc-l { display: block; font-weight: 700; margin-bottom: 0.35rem; }
.tc-types { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.4rem; margin-bottom: 0.8rem; }
.tc-type { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; padding: 0.5rem 0.2rem; border-radius: 10px; border: 2px solid transparent; font: inherit; font-size: 0.74rem; font-weight: 700; cursor: pointer; opacity: 0.75; text-align: center; }
.tc-type svg { width: 18px; height: 18px; }
.tc-type.on { opacity: 1; border-color: currentColor; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.tc-f3 { display: grid; grid-template-columns: 1fr 1fr 0.8fr; gap: 0 0.6rem; }
.tc-qn { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.4rem; } .tc-qn .chip { min-height: 32px; padding: 0.2rem 0.7rem; font-size: 0.8rem; }
@media (max-width: 760px) {
  .tc-hero { flex-direction: column; align-items: stretch; padding: 1.1rem; }
  .tc-hero-r { position: absolute; top: 1rem; right: 1rem; width: 96px; height: 96px; }
  .tc-ring-t b { font-size: 1.3rem; } .tc-ring-t span { font-size: 0.6rem; }
  .tc-clock { font-size: 2.3rem; }
  .tc-stats { grid-template-columns: 1fr 1fr; }
  .tc-row { grid-template-columns: 3.1rem minmax(0, 1fr) auto; } .tc-edit { grid-column: 3; grid-row: 1; display: none; }
  .tc-row { cursor: pointer; }
  .tc-chart-x span:nth-child(odd) { visibility: hidden; }
  .tc-types { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tc-f3 { grid-template-columns: 1fr 1fr; } .tc-f3 .field:last-child { grid-column: 1 / -1; }
}

/* ===== Update 337: missing-equipment warning ===== */
.miss-warn { border: 1.5px solid #E8B4B4; background: #FDF1F1; border-radius: 12px; padding: 0.75rem 0.9rem; margin: 0.4rem 0 0.8rem; }
.miss-warn-h { display: flex; align-items: center; gap: 0.45rem; color: #9B1C1C; }
.miss-warn-h svg { width: 18px; height: 18px; } .miss-warn-h .btn { margin-left: auto; }
.miss-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.5rem 0 0.3rem; }
.miss-tags span { background: #fff; border: 1px solid #E8B4B4; color: #7A1616; border-radius: 999px; padding: 0.15rem 0.6rem; font-size: 0.82rem; font-weight: 700; }
.miss-warn p { margin: 0.35rem 0; color: #4A1D1D; } .miss-warn small { color: #7A4A4A; }
.miss-add { margin: 0.3rem 0 0.8rem; display: inline-flex; align-items: center; gap: 0.4rem; border-color: #B03A3A; color: #B03A3A; }
.miss-add svg { width: 16px; height: 16px; }
.miss-form { border: 1px solid var(--border); border-radius: 12px; padding: 0.8rem; margin: 0.4rem 0 0.8rem; background: #fff; }
.miss-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(125px, 1fr)); gap: 0.4rem; margin: 0.6rem 0 0.8rem; }
.miss-check { display: flex; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0.3rem 0.7rem; border: 1.5px solid var(--border); border-radius: 10px; cursor: pointer; font-weight: 600; }
.miss-check:has(input:checked) { border-color: #B03A3A; background: #FDF1F1; color: #7A1616; }
.miss-check input { width: 18px; height: 18px; accent-color: #B03A3A; }
.rr-miss { text-align: left; background: #FDF1F1; border: 1.5px solid #E8B4B4; border-radius: 12px; padding: 0.7rem 0.85rem; margin: 0.4rem 0 0.7rem; color: #4A1D1D; }
.rr-miss b { display: flex; align-items: center; gap: 0.4rem; color: #9B1C1C; } .rr-miss b svg { width: 18px; height: 18px; }
.rr-miss ul { margin: 0.4rem 0 0.3rem 1.2rem; padding: 0; } .rr-miss li { font-weight: 700; }
.rr-miss p { margin: 0.3rem 0; } .rr-miss small { color: #7A4A4A; }

/* ===== Update 338: Officer Service Logs ===== */
.sl-card { border-left: 4px solid #D98A00; }
.sl-card.sl-done { border-left-color: #C8D0DC; }
.sl-top { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.sl-car { border: 1.5px solid var(--primary); background: #fff; color: var(--primary); border-radius: 999px; padding: 0.3rem 0.8rem; font: inherit; font-size: 0.9rem; cursor: pointer; }
.sl-what { display: flex; align-items: center; gap: 0.45rem; margin: 0.7rem 0 0.4rem; font-size: 1.05rem; }
.sl-what svg { width: 18px; height: 18px; flex: 0 0 auto; }
.sl-meta { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; color: #4A5A70; font-size: 0.88rem; }
.sl-meta span { display: inline-flex; align-items: center; gap: 0.3rem; } .sl-meta svg { width: 15px; height: 15px; }
.sl-note { margin-top: 0.55rem; padding: 0.55rem 0.7rem; border-radius: 10px; background: #F3F6FB; color: #2A3A52; font-size: 0.9rem; overflow-wrap: anywhere; }
.sl-when { display: block; margin-top: 0.5rem; color: var(--muted, #6B7A90); }
.sl-btns { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.7rem; }
.sl-btns .btn { display: inline-flex; align-items: center; gap: 0.35rem; } .sl-btns svg { width: 15px; height: 15px; }
.sl-rm { display: flex; gap: 0.5rem; align-items: flex-start; text-align: left; margin: 0.6rem 0; font-size: 0.92rem; }
.sl-rm input { width: 18px; height: 18px; margin-top: 2px; flex: 0 0 auto; }

/* ===== Update 340: submitted page ===== */
.sb-wrap { max-width: 640px; margin: 0 auto; }
.sb-hero { text-align: center; padding: 1.6rem 1.2rem 1.4rem; border-radius: 18px; margin-bottom: 0.9rem; color: #fff;
  background: radial-gradient(120% 140% at 50% 0%, #2E9E68 0%, #1C7A4E 55%, #135C3A 100%); box-shadow: 0 10px 26px rgba(19, 92, 58, 0.25); }
.sb-hero.svc { background: radial-gradient(120% 140% at 50% 0%, #3C74C7 0%, #22508F 55%, #163A6B 100%); box-shadow: 0 10px 26px rgba(22, 58, 107, 0.25); }
.sb-hero.crit { background: radial-gradient(120% 140% at 50% 0%, #D0473A 0%, #A82E24 55%, #7E1F18 100%); box-shadow: 0 10px 26px rgba(126, 31, 24, 0.25); }
.sb-ic { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,0.18); border: 2px solid rgba(255,255,255,0.5); animation: sb-pop .45s cubic-bezier(.2,1.4,.4,1); }
.sb-ic svg { width: 34px; height: 34px; stroke: #fff; stroke-width: 2.5; }
@keyframes sb-pop { from { transform: scale(0.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.sb-hero h2 { margin: 0.7rem 0 0.25rem; color: #fff; font-size: 1.5rem; }
.sb-hero p { margin: 0; color: rgba(255,255,255,0.88); }
.sb-card h3 { margin: 0 0 0.6rem; font-size: 1rem; }
.sb-sum { margin: 0; }
.sb-row { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 0.6rem; padding: 0.45rem 0; border-top: 1px solid #EEF1F6; }
.sb-row:first-child { border-top: 0; }
.sb-row dt { color: var(--muted, #5B6B82); font-size: 0.85rem; font-weight: 700; }
.sb-row dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.sb-desc { font-weight: 400; white-space: pre-wrap; }
.sb-steps { list-style: none; margin: 0; padding: 0; }
.sb-step { position: relative; display: flex; gap: 0.75rem; padding: 0 0 0.9rem; }
.sb-step:not(:last-child)::before { content: ''; position: absolute; left: 13px; top: 28px; bottom: 2px; width: 2px; background: #DDE3EC; }
.sb-step.done:not(:last-child)::before { background: #2E9E68; }
.sb-dot { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; border: 2px solid #C9D2DE; background: #fff; display: grid; place-items: center; }
.sb-step.done .sb-dot { background: #2E9E68; border-color: #2E9E68; } .sb-dot svg { width: 16px; height: 16px; stroke: #fff; stroke-width: 3; }
.sb-step.next .sb-dot { border-color: #2E9E68; box-shadow: 0 0 0 4px rgba(46,158,104,0.15); }
.sb-step b { display: block; } .sb-step small { color: var(--muted, #5B6B82); }
.sb-tip { display: flex; gap: 0.65rem; align-items: flex-start; padding: 0.75rem 0.9rem; border-radius: 12px; background: #F1F4F9; border: 1px solid #DDE3EC; margin-bottom: 0.6rem; line-height: 1.4; }
.sb-tip > svg { width: 20px; height: 20px; flex: 0 0 auto; margin-top: 1px; color: #22508F; }
.sb-tip.red { background: #FDF1F1; border-color: #E8B4B4; color: #4A1D1D; } .sb-tip.red > svg { color: #B03A3A; }
.sb-tip.blue { background: #EEF4FC; border-color: #C6D8F2; } 
.sb-tip.amber { background: #FFF8E6; border-color: #F0D68A; color: #4A3A00; } .sb-tip.amber > svg { color: #B37A00; }
.sb-inline { margin-top: 0.5rem; }
.sb-btns { display: flex; flex-direction: column; gap: 0.5rem; margin: 1rem 0 1.5rem; }
.sb-btns .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; } .sb-btns svg { width: 18px; height: 18px; }
.sb-ic svg.ic, .sb-ic .ic { width: 34px !important; height: 34px !important; }

/* Update 342: "Can it still be driven?" on Report an Issue */
.drive-no { margin-top: 0.7rem; padding: 0.75rem 0.85rem; border-radius: 12px; background: #FDF3F2; border: 1.5px solid #EBC3BE; }
.drive-no > label { display: block; font-weight: 600; margin-bottom: 0.45rem; }
.drive-no #carshop { margin-top: 0.6rem; }
.drive-no .co-hint { display: flex; align-items: center; gap: 0.35rem; margin-top: 0.55rem; }
.drive-no .co-hint svg.ic { width: 16px; height: 16px; flex: none; }
.mileage-nudge h3 { display: flex; align-items: center; gap: 0.45rem; }
.mileage-nudge h3 svg.ic { width: 20px; height: 20px; }
.chips .chip svg.ic { width: 15px; height: 15px; vertical-align: -2px; }
/* Update 342: officer-repair confirmations on the Repairs list */
.fm-ck { border: 1.5px solid #B9D8C3; background: #F1FAF4; border-radius: 12px; padding: 0.7rem 0.8rem; margin-bottom: 0.6rem; }
.fm-ck-top { display: flex; align-items: center; gap: 0.4rem; font-weight: 700; color: #1F6B3A; margin-bottom: 0.3rem; }
.fm-ck-top svg.ic { width: 18px; height: 18px; }
.fm-ck p { margin: 0.25rem 0 0.5rem; font-size: 0.95rem; }
.fm-ck textarea { width: 100%; margin-bottom: 0.45rem; }
.fm-ck-btns { display: flex; gap: 0.45rem; flex-wrap: wrap; }
.why-down textarea { width: 100%; margin: 0 0 0.9rem; text-align: left; }

/* Update 343: Inspection Review */
.ir-item { margin-top: 0.7rem; padding: 0.65rem 0.75rem; border-radius: 12px; border: 1.5px solid #E6D3A8; background: #FFFBF1; }
.ir-item.ir-noted { border-color: #C8E3D1; background: #F3FAF5; }
.ir-item.ir-issue { border-color: #C9D8EE; background: #F3F7FC; }
.ir-it-top { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.ir-it-note { margin-top: 0.3rem; font-size: 0.95rem; color: #2A3A52; overflow-wrap: anywhere; }
.ir-why { display: block; margin-top: 0.35rem; color: var(--muted, #6B7A90); }
.ir-text { width: 100%; margin-top: 0.55rem; }
.ir-item .sl-btns { margin-top: 0.55rem; }
.cause-body { background: #F4ECFB; color: #6B2FA0; } .cause-equip { background: #E6F5F3; color: #1D6B62; }

/* Update 345: Log Service removed, New Issue fills the row */
.nav-new { grid-template-columns: 1fr; }

/* Update 346: where to take it, on Report an Issue */
.shop-guide { margin-top: 0.7rem; padding: 0.75rem 0.85rem; border-radius: 12px; background: #EEF4FB; border: 1.5px solid #C5D6EC; }
.sg-head { display: flex; gap: 0.6rem; align-items: flex-start; }
.sg-head > svg.ic { width: 22px; height: 22px; flex: none; color: #1F4E8C; margin-top: 2px; }
.sg-head b { display: block; color: #102544; }
.sg-head span { display: block; font-size: 0.92rem; color: #33445C; margin-top: 0.15rem; }
.sg-shop { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.6rem; margin-top: 0.55rem; padding: 0.5rem 0.65rem; border-radius: 10px; background: #fff; border: 1px solid #D6E1EF; }
.sg-shop b { margin-right: 0.2rem; } .sg-shop small { color: #5A6A80; flex: 1 1 160px; }
.sg-shop .btn svg.ic, .sg-addr svg.ic { width: 14px; height: 14px; vertical-align: -2px; }
.sg-addr { font-size: 0.85rem; color: var(--primary); text-decoration: none; width: 100%; }
.cause-maint { background: #EAF6EC; color: #22663A; }

/* Update 347: Report an Issue, styled like Time Card */
.ri-wrap { max-width: 860px; }
.ri-hero .ri-title { margin: 0.35rem 0 0.25rem; font-size: 1.7rem; line-height: 1.15; color: #fff; letter-spacing: -0.01em; }
.ri-hero .ri-sub { color: #C9D6EE; font-size: 0.95rem; }
.ri-car { margin-top: 0.8rem; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.85rem; border-radius: 999px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.25); color: #fff; font-size: 0.95rem; }
.ri-car:empty { display: none; }
.ri-car svg.ic { width: 18px; height: 18px; stroke: #F2C14E; }
.ri-ring-box { width: 130px; height: 130px; }
.ri-ring-box .tc-ring-t b { font-size: 1.45rem; }
.ri-card { padding: 0.4rem 1.1rem 1.2rem; border-radius: 18px; }
.ri-sec { padding: 1rem 0 0.4rem; border-bottom: 1px solid #E6EBF2; }
.ri-sec:last-of-type { border-bottom: 0; }
.ri-sec-h { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.8rem; }
.ri-sec-h b { display: block; font-size: 1.08rem; color: #14213D; }
.ri-sec-h small { display: block; color: #5B6B82; font-size: 0.85rem; }
.ri-n { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, #2F5DA8, #1D3F7A); box-shadow: 0 4px 10px rgba(29,63,122,0.3); transition: background .25s; }
.ri-n.ok { background: linear-gradient(135deg, #2FBF71, #1E8F52); box-shadow: 0 4px 10px rgba(47,191,113,0.35); }
.ri-n svg.ic { width: 18px; height: 18px; stroke: #fff; }
.ri-sec[data-optional] .ri-n { background: #E3E9F2; color: #5B6B82; box-shadow: none; }
.ri-card .chips .chip.on { box-shadow: 0 4px 12px rgba(29,63,122,0.25); }
.ri-submit { width: 100%; justify-content: center; margin-top: 1rem; font-size: 1.05rem; min-height: 54px; }
@media (max-width: 760px) {
  .ri-hero { flex-direction: row; align-items: flex-start; }
  .ri-hero .ri-title { font-size: 1.35rem; }
  .ri-ring-box { width: 92px; height: 92px; }
  .ri-ring-box .tc-ring-t b { font-size: 1.05rem; } .ri-ring-box .tc-ring-t span { font-size: 0.62rem; }
  .ri-card { padding: 0.2rem 0.85rem 1rem; }
}
@media (max-width: 760px) { .ri-hero .tc-hero-l { padding-right: 100px; } }

/* Update 348: Invoices & Quotes */
.iq-wrap { max-width: 1100px; }
.iq-hero .tc-punch { margin-top: 1.1rem; }
.iq-card { border-radius: 18px; padding: 1rem 1.1rem; }
.iq-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem; justify-content: space-between; margin-bottom: 0.8rem; }
.iq-tools .nav-badge { margin-left: 0.25rem; }
.iq-search { flex: 1 1 260px; max-width: 420px; }
.iq-head, .iq-row { display: grid; grid-template-columns: 110px minmax(0, 1.4fr) minmax(0, 1.2fr) minmax(0, 1fr) 120px; gap: 0.8rem; align-items: center; }
.iq-head { padding: 0.45rem 0.8rem; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #5B6B82; border-bottom: 1px solid #E1E7EF; }
.iq-head span:last-child, .iq-amt { text-align: right; }
.iq-row { padding: 0.75rem 0.8rem; border-bottom: 1px solid #EEF2F7; cursor: pointer; border-radius: 10px; transition: background .15s; }
.iq-row:hover { background: #F4F7FC; }
.iq-c { min-width: 0; } .iq-c small { display: block; color: #5B6B82; font-size: 0.8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iq-veh b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #14213D; }
.iq-date { color: #33445C; font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.iq-amt { font-weight: 800; font-size: 1.05rem; color: #14213D; font-variant-numeric: tabular-nums; }
.iq-st { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; }
.iq-pill { display: inline-flex; padding: 2px 9px; border-radius: 999px; font-size: 0.74rem; font-weight: 700; background: #EEF1F5; color: #4A5A70; }
.iq-pill.paid, .iq-pill.q-approved { background: #E3F5EA; color: #1E7A45; }
.iq-pill.unpaid, .iq-pill.q-pending { background: #FFF2D6; color: #8A5A00; }
.iq-pill.q-declined { background: #FDE7E9; color: #A51F2D; }
.iq-pill.q-invoiced { background: #E8F0FB; color: #1F4E8C; }
.iq-pill.link { background: #EEF1F5; color: #4A5A70; }
.iq-od { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.78rem; font-weight: 700; color: var(--primary); text-decoration: none; }
.iq-od svg.ic { width: 14px; height: 14px; }
.iq-back { align-items: stretch; justify-content: flex-end; padding: 0; }
.iq-panel { width: min(640px, 100%); height: 100%; overflow-y: auto; background: var(--card, #fff); padding: 1.1rem 1.3rem 1.4rem; box-shadow: -12px 0 40px rgba(0,0,0,0.25); animation: iqIn .2s ease-out; }
@keyframes iqIn { from { transform: translateX(30px); opacity: 0.6; } to { transform: none; opacity: 1; } }
.iq-ph { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.6rem; padding-bottom: 0.4rem; border-bottom: 1px solid #E6EBF2; }
.iq-ph h3 { margin: 0.2rem 0 0; font-size: 1.35rem; color: #14213D; }
.iq-ph .tc-kicker { color: #B07A00; } .iq-ph .tc-kicker svg { stroke: #B07A00; }
.iq-panel .ri-sec .field { margin-bottom: 0.75rem; }
.iq-line { display: grid; grid-template-columns: minmax(0, 1fr) 96px 120px 34px; gap: 0.45rem; margin-bottom: 0.45rem; align-items: center; }
.iq-la { display: flex; align-items: center; border: 1px solid var(--border, #CBD5E1); border-radius: 10px; background: #fff; padding-left: 0.6rem; }
.iq-la span { color: #5B6B82; font-weight: 700; } .iq-la input { border: 0 !important; box-shadow: none !important; text-align: right; background: transparent; }
.iq-lx { border: 0; background: none; color: #8A97AA; cursor: pointer; padding: 0.3rem; border-radius: 8px; } .iq-lx:hover:not(:disabled) { background: #FDE7E9; color: #A51F2D; } .iq-lx:disabled { opacity: 0.3; cursor: default; }
.iq-lx svg.ic { width: 16px; height: 16px; }
.iq-totals { margin: 0.8rem 0 0.4rem auto; max-width: 280px; display: grid; gap: 0.35rem; }
.iq-totals > div { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; color: #33445C; }
.iq-totals input { width: 120px; text-align: right; }
.iq-grand { border-top: 2px solid #14213D; padding-top: 0.4rem; } .iq-grand b { font-size: 1.4rem; color: #14213D; }
.iq-paid { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; margin: 0.3rem 0 0.7rem; } .iq-paid input[type=date] { width: auto; }
.iq-close { background: #EAF6EC; border-radius: 10px; padding: 0.55rem 0.7rem; margin-bottom: 0.7rem; color: #1E5F36; }
.iq-big .iq-la { max-width: 240px; } .iq-big input { font-size: 1.3rem; font-weight: 800; }
.iq-foot { position: sticky; bottom: -1.4rem; display: flex; gap: 0.5rem; align-items: center; padding: 0.9rem 0 0.2rem; background: var(--card, #fff); border-top: 1px solid #E6EBF2; margin-top: 0.8rem; }
.iq-foot .tc-btn { min-height: 46px; }
.iq-status { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; justify-content: space-between; margin: 0.8rem 0 0.2rem; padding: 0.6rem 0.75rem; border-radius: 12px; background: #FFF6E0; border: 1px solid #F0D68A; }
.iq-status.q-approved { background: #EAF6EC; border-color: #B9DFC6; } .iq-status.q-declined { background: #FDF1F1; border-color: #EBC3BE; } .iq-status.q-invoiced { background: #EEF4FB; border-color: #C5D6EC; }
.iq-sbtns { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.iq-issue-btns { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 0.6rem 0; }
@media (max-width: 760px) {
  .iq-head { display: none; }
  .iq-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "veh amt" "vend vend" "st date"; gap: 0.25rem 0.6rem; padding: 0.75rem 0.4rem; }
  .iq-veh { grid-area: veh; } .iq-amt { grid-area: amt; } .iq-vend { grid-area: vend; } .iq-st { grid-area: st; } .iq-date { grid-area: date; text-align: right; font-size: 0.8rem; }
  .iq-line { grid-template-columns: minmax(0, 1fr) 34px; } .iq-line .iq-lk { grid-column: 1; } .iq-line .iq-la { grid-column: 1; } .iq-line .iq-lx { grid-row: 1; grid-column: 2; }
  .iq-line { padding-bottom: 0.5rem; border-bottom: 1px dashed #E1E7EF; }
  .iq-panel { padding: 1rem 0.9rem 1.2rem; }
  .tc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.iq-hero .ri-title { margin: 0.35rem 0 0.25rem; font-size: 1.7rem; line-height: 1.15; color: #fff; } .iq-hero .ri-sub { color: #C9D6EE; font-size: 0.95rem; max-width: 640px; }

/* Update 351: Warranties */
.iq-pill.w-active { background: #E3F5EA; color: #1E7A45; }
.iq-pill.w-soon { background: #FFF2D6; color: #8A5A00; }
.iq-pill.w-expired { background: #FDE7E9; color: #A51F2D; }
.iq-pill.w-closed { background: #EEF1F5; color: #4A5A70; }
.wty-left { font-size: 0.92rem; font-weight: 700; }
.wty-views { margin: 0 0 0.6rem; gap: 0.35rem; }
.wty-views .chip { font-size: 0.8rem; padding: 0.3rem 0.7rem; }
.wty-hero { background: linear-gradient(135deg, #12355B 0%, #1E5A4A 100%); }
.iq-status.wty-st.w-active { background: #EAF6EC; border-color: #B9DFC6; }
.iq-status.wty-st.w-expired { background: #FDF1F1; border-color: #EBC3BE; }
.iq-status.wty-st.w-closed { background: #F3F5F8; border-color: #DCE2EA; }
.iq-wty { border: 1px solid #DCE5EF; border-radius: 12px; padding: 0.7rem 0.75rem 0.4rem; margin-bottom: 0.6rem; background: #F8FAFD; }
.iq-wty .field { margin-bottom: 0.5rem; }
.iq-wty-f { display: flex; flex-wrap: wrap; gap: 0.4rem 0.8rem; align-items: center; justify-content: space-between; margin-bottom: 0.3rem; }
.iq-wty-f small { color: #1E6A45; font-weight: 600; }
.wty-note { display: flex; gap: 0.7rem; align-items: flex-start; padding: 0.75rem 0.85rem; border-radius: 12px; background: #EAF6EC; border: 1px solid #B9DFC6; color: #1E4D33; margin: 0 0 0.8rem; }
.wty-note > svg.ic { flex: none; width: 22px; height: 22px; stroke: #1E7A45; margin-top: 1px; }
.wty-note b { display: block; margin-bottom: 0.25rem; }
.wty-note span { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; font-size: 0.9rem; margin-top: 0.2rem; }
.wty-note span.hit { font-weight: 700; }
.wty-note em { font-style: normal; background: #FFF2D6; color: #8A5A00; border-radius: 999px; padding: 1px 8px; font-size: 0.78rem; font-weight: 800; }
.wty-note small { display: block; color: #3C6B50; margin-top: 0.35rem; }
.wty-note.issue { margin-top: 0.6rem; }
.wty-claims { display: grid; gap: 0.45rem; margin-bottom: 0.6rem; }
.wty-claim { display: flex; justify-content: space-between; gap: 0.6rem; padding: 0.55rem 0.7rem; border-radius: 10px; background: #F4F7FC; border: 1px solid #E1E7EF; }
.wty-claim span { display: block; color: #33445C; margin-top: 0.15rem; } .wty-claim small { color: #5B6B82; }
.wty-cform { border: 1px solid #DCE5EF; border-radius: 12px; padding: 0.7rem; margin-bottom: 0.6rem; background: #F8FAFD; }
.wty-vrow { cursor: pointer; }
@media (max-width: 760px) { .iq-hero .tc-punch { flex-wrap: wrap; } }

/* Update 352: type-to-find drop-downs for vehicles and officers */
.ss { position: relative; width: 100%; }
.ss[hidden] { display: none; }
.ss-in { padding-right: 2.4rem !important; text-overflow: ellipsis; cursor: pointer; }
.ss-in:focus { cursor: text; }
.ss-caret { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); border: 0; background: none; width: 34px; height: 34px; display: grid; place-items: center; color: var(--muted, #5B6B82); cursor: pointer; border-radius: 8px; }
.ss-caret svg.ic { width: 18px; height: 18px; transition: transform .15s; }
.ss.is-open .ss-caret svg.ic { transform: rotate(180deg); }
.ss.is-off .ss-caret { opacity: 0.4; pointer-events: none; }
.ss-list { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 2000; max-height: 290px; overflow-y: auto; background: var(--surface, #fff); border: 1px solid var(--border, #CBD5E1); border-radius: 12px; box-shadow: 0 12px 32px rgba(15, 30, 60, 0.18); padding: 4px; }
.ss-opt { padding: 0.55rem 0.7rem; border-radius: 8px; cursor: pointer; font-size: 0.95rem; color: var(--text, #14213D); line-height: 1.3; }
.ss-opt.is-on { background: var(--primary, #1F4E8C); color: #fff; }
.ss-opt.is-cur:not(.is-on) { font-weight: 700; background: rgba(31, 78, 140, 0.08); }
.ss-opt.is-blank { color: var(--muted, #5B6B82); font-style: italic; }
.ss-opt.is-blank.is-on { color: #fff; }
.ss-opt[aria-disabled="true"] { opacity: 0.45; cursor: default; }
.ss-none { padding: 0.7rem; color: var(--muted, #5B6B82); font-size: 0.9rem; }
select.ss-native { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: 0 !important; opacity: 0 !important; pointer-events: none !important; border: 0 !important; }
@media (max-width: 700px) { .ss-opt { padding: 0.75rem 0.8rem; font-size: 16px; } .ss-list { max-height: 50vh; } }

/* Update 354: Email Notifications */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nf-wrap { max-width: 980px; }
.nf-hero { background: linear-gradient(135deg, #14213D 0%, #2B4C7E 100%); }
.nf-banner { display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.75rem 0.9rem; border-radius: 12px; background: #EEF4FB; border: 1px solid #C5D6EC; color: #1F3B63; margin: 0.9rem 0 0; }
.nf-banner.warn { background: #FFF6E0; border-color: #EBD49A; color: #6B4A00; }
.nf-banner svg.ic { flex: none; width: 20px; height: 20px; margin-top: 1px; }
.nf-bar { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; justify-content: space-between; margin: 1rem 0 0.8rem; }
.nf-bar .chip svg.ic { width: 16px; height: 16px; vertical-align: -3px; margin-right: 0.2rem; }
.nf-saved { color: #5B6B82; font-weight: 600; }
.nf-card { border-radius: 18px; padding: 1rem 1.1rem; margin-bottom: 1rem; }
.nf-gh { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; justify-content: space-between; margin-bottom: 0.4rem; }
.nf-gh h3 { margin: 0; } .nf-gh h3 small { display: block; font-weight: 500; color: #5B6B82; font-size: 0.82rem; margin-top: 0.15rem; }
.nf-gh > span { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.nf-row { display: flex; gap: 0.9rem; align-items: center; padding: 0.8rem 0.2rem; border-top: 1px solid #EEF2F7; }
.nf-row.is-off .nf-main b { color: #8A97AA; }
.nf-main { flex: 1; min-width: 0; } .nf-main b { display: block; color: #14213D; } .nf-main small { display: block; color: #5B6B82; font-size: 0.84rem; margin-top: 0.1rem; }
.nf-sum { display: inline-block; margin-top: 0.3rem; font-size: 0.78rem; font-weight: 700; color: #1E6A45; background: #E3F5EA; border-radius: 999px; padding: 2px 9px; }
.nf-sum.off { color: #A51F2D; background: #FDE7E9; }
.nf-sw { position: relative; flex: none; width: 46px; height: 26px; cursor: pointer; }
.nf-sw input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.nf-sw > span { position: absolute; inset: 0; border-radius: 999px; background: #CBD5E1; transition: background .15s; pointer-events: none; }
.nf-sw > span::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.25); transition: transform .15s; }
.nf-sw input:checked + span { background: #1E7A45; } .nf-sw input:checked + span::after { transform: translateX(20px); }
.nf-sw input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }
.nf-seg { display: inline-flex; flex: none; border: 1px solid #CBD5E1; border-radius: 10px; overflow: hidden; }
.nf-seg button { border: 0; background: #fff; padding: 0.4rem 0.7rem; font: inherit; font-size: 0.82rem; font-weight: 700; color: #4A5A70; cursor: pointer; }
.nf-seg button + button { border-left: 1px solid #CBD5E1; }
.nf-seg button.on { background: #14213D; color: #fff; }
.nf-seg button[data-v="on"].on { background: #1E7A45; } .nf-seg button[data-v="off"].on { background: #A51F2D; }
.nf-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #CBD5E1; } .nf-dot.on { background: #1E9A55; }
.nf-count { margin: 0.8rem 0 0.2rem; padding: 0.6rem 0.8rem; border-radius: 12px; background: #F4F7FC; color: #33445C; } .nf-count b { font-size: 1.2rem; color: #14213D; }
.nf-roles { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.nf-role { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.7rem 0.4rem 0.45rem; border-radius: 999px; border: 1px solid #DCE5EF; font-weight: 700; color: #8A97AA; cursor: pointer; }
.nf-role.on { color: #14213D; background: #F4FAF6; border-color: #B9DFC6; }
.nf-people { display: grid; gap: 0.1rem; margin-top: 0.6rem; }
.nf-prow { display: flex; gap: 0.7rem; align-items: center; padding: 0.5rem 0.2rem; border-bottom: 1px solid #EEF2F7; }
.nf-prow.is-off .nf-main b { color: #8A97AA; }
.nf-foot { margin-top: -0.3rem; }
.nf-link { display: flex; gap: 0.8rem; align-items: center; cursor: pointer; } .nf-link > svg.ic { width: 26px; height: 26px; stroke: var(--primary); flex: none; }
.nf-link div { flex: 1; } .nf-link b { display: block; } .nf-link small { color: #5B6B82; } .nf-link .chevron { font-size: 1.4rem; color: #8A97AA; }
@media (max-width: 640px) { .nf-row { flex-wrap: wrap; } .nf-row .nf-main { flex-basis: calc(100% - 70px); } .nf-row > .btn, .nf-row > .nf-seg { margin-left: auto; } .nf-prow { flex-wrap: wrap; } .nf-prow .nf-seg { margin-left: 1.3rem; } }
.nf-hero .ri-title { color: #fff; }
.nf-sum.muted { color: #4A5A70; background: #EEF1F5; }

/* Update 355: simpler Email Notifications (checkboxes) */
.nf-cb { flex: none; width: 22px !important; height: 22px; accent-color: #1E7A45; cursor: pointer; margin: 0; }
label.nf-row, label.nf-prow { cursor: pointer; }
.nf-row:hover, .nf-prow:hover { background: #F7F9FC; }
.nf-sec { margin-top: 0.9rem; } .nf-sec h4 { margin: 0 0 0.1rem; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: #5B6B82; }
.nf-note { margin: 0.2rem 0 0.4rem; color: #5B6B82; font-size: 0.85rem; }
.nf-quick { margin: 0.8rem 0 0.7rem; } .nf-quick small { display: block; color: #5B6B82; margin-bottom: 0.35rem; }
.nf-quick > div { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.nf-qg { border: 1px solid #CBD5E1; background: #fff; border-radius: 999px; padding: 0.35rem 0.75rem; font: inherit; font-size: 0.85rem; font-weight: 700; color: #33445C; cursor: pointer; }
.nf-qg span { font-weight: 600; color: #8A97AA; margin-left: 0.2rem; }
.nf-qg.some { border-color: #B9DFC6; background: #F4FAF6; } .nf-qg.all { background: #1E7A45; border-color: #1E7A45; color: #fff; } .nf-qg.all span { color: #D7F0E0; }
.nf-gh h3 small { display: block; }

/* Update 357: internal notes on Ideas & Feedback cards */
.fb-int { margin-top: 0.7rem; border: 1px dashed #C9B37A; background: #FFFBEF; border-radius: 12px; padding: 0.5rem 0.75rem; }
.fb-int summary { cursor: pointer; font-weight: 700; color: #6B4A00; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; list-style: none; }
.fb-int summary::-webkit-details-marker { display: none; }
.fb-int summary svg.ic { width: 16px; height: 16px; stroke: #8A5A00; }
.fb-int summary small { font-weight: 500; color: #8A7340; flex-basis: 100%; }
.fb-int-n { position: relative; padding: 0.45rem 2rem 0.45rem 0; border-bottom: 1px solid #F0E3BF; }
.fb-int-n small { color: #8A7340; } .fb-int-n p { margin: 0.15rem 0 0; white-space: pre-line; color: #33445C; }
.fb-int-x { position: absolute; right: 0; top: 0.4rem; border: 0; background: none; color: #A08A55; cursor: pointer; padding: 0.2rem; border-radius: 6px; } .fb-int-x svg.ic { width: 14px; height: 14px; }
.fb-int-f { display: flex; gap: 0.5rem; align-items: flex-end; margin-top: 0.5rem; } .fb-int-f textarea { flex: 1; background: #fff; }
@media (max-width: 600px) { .fb-int-f { flex-direction: column; align-items: stretch; } }

/* Update 358: required (locked) email */
.nf-req { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.74rem; font-weight: 800; color: #1F3B63; background: #E8F0FB; border-radius: 999px; padding: 2px 9px; vertical-align: 1px; white-space: nowrap; }
.nf-req svg.ic { width: 12px; height: 12px; }
label.nf-row.is-locked { cursor: default; } label.nf-row.is-locked .nf-cb { opacity: 0.6; cursor: not-allowed; }

/* Update 359: Patrol Schedule in the site's own style, with the sheet's color patterns */
.ps-top { padding: 0.85rem 1rem; margin-bottom: 0.75rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; }
.ps-nav { display: flex; align-items: center; gap: 0.45rem; flex: 1 1 320px; }
.ps-arrow { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--border); background: var(--surface); display: inline-flex; align-items: center; justify-content: center; }
.ps-arrow:disabled { opacity: 0.35; }
.ps-arrow .ic { width: 20px; height: 20px; }
.ps-range { display: flex; flex-direction: column; min-width: 0; padding: 0 0.2rem; }
.ps-range b { font-size: 1.05rem; }
.ps-range small, .ps-meta { color: var(--muted); font-size: 0.82rem; }
.ps-tools { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.ps-tools .ic, .ps-empty .btn .ic { width: 16px; height: 16px; vertical-align: -3px; }
.ps-key { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; padding-top: 0.55rem; border-top: 1px solid var(--border); font-size: 0.85rem; color: var(--text); }
.ps-key-i { display: inline-flex; align-items: center; gap: 0.4rem; }
.ps-key-i i { width: 14px; height: 14px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); }
.ps-card { padding: 0; overflow: hidden; }
.ps-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ps-table { --who: 172px; min-width: calc(var(--who) + var(--n) * 50px); }
.ps-row { display: grid; grid-template-columns: var(--who) repeat(var(--n), minmax(50px, 1fr)); border-bottom: 1px solid rgba(16,37,68,.08); }
.ps-row.is-me { background: var(--primary-soft); }
.ps-row.is-me .ps-who { background: var(--primary-soft); box-shadow: inset 4px 0 0 var(--primary); }
.ps-who { position: sticky; left: 0; z-index: 2; background: var(--card); padding: 0.45rem 0.7rem; display: flex; flex-direction: column; justify-content: center; border-right: 1px solid var(--border); min-height: 44px; }
.ps-who b { font-weight: 600; font-size: 0.92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-who small { color: var(--muted); font-size: 0.74rem; }
.ps-cs { color: var(--muted); font-weight: 500; font-size: 0.8rem; }
.ps-hrow { position: sticky; top: 0; z-index: 3; background: var(--surface); border-bottom: 1px solid var(--border); }
.ps-hrow .ps-who { background: var(--surface); }
.ps-day { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0.45rem 0.15rem; background: var(--dct, transparent); }
.ps-dow { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.ps-dnum { font-weight: 700; font-size: 0.92rem; padding: 1px 8px; border-radius: 999px; }
.ps-dnum.has-c { background: var(--dc); color: var(--dci); }
.ps-day.is-today .ps-dnum { box-shadow: 0 0 0 2px var(--primary); }
.ps-day.is-today .ps-dow { color: var(--primary); }
.ps-ev { font-size: 0.66rem; font-weight: 700; border-radius: 6px; padding: 1px 5px; background: rgba(16,37,68,.08); text-align: center; line-height: 1.2; }
.ps-day.is-off, .ps-cell.is-off { opacity: .35; }
.ps-cell { position: relative; display: flex; align-items: center; justify-content: center; padding: 0.3rem 0.15rem; background: var(--dct, transparent); }
.ps-cell.is-today, .ps-day.is-today { box-shadow: inset 2px 0 0 var(--primary), inset -2px 0 0 var(--primary); }
.ps-cell.can-edit { cursor: pointer; }
.ps-cell.can-edit:hover { background: rgba(27,58,107,.10); }
.ps-code { font-size: 0.8rem; font-weight: 600; padding: 3px 7px; border-radius: 8px; background: rgba(255,255,255,.7); box-shadow: inset 0 0 0 1px rgba(16,37,68,.12); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.ps-code.has-own { box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.ps-note-dot { position: absolute; top: 4px; right: 4px; width: 7px; height: 7px; border-radius: 50%; background: #E0A526; }
.ps-group + .ps-group { border-top: 6px solid var(--surface); }
.ps-gname { position: sticky; left: 0; display: flex; align-items: baseline; gap: 0.6rem; padding: 0.55rem 0.8rem 0.35rem; font-weight: 700; color: var(--primary); font-size: 0.85rem; text-transform: uppercase; letter-spacing: .04em; width: max-content; }
.ps-gname small { text-transform: none; letter-spacing: 0; color: var(--muted); font-weight: 600; font-size: 0.8rem; }
.ps-foot { font-size: 0.84rem; margin: 0.6rem 0.2rem; }
.ps-empty { text-align: center; padding: 1.6rem 1rem; }
.ps-empty-ic { width: 52px; height: 52px; margin: 0 auto 0.4rem; border-radius: 50%; background: var(--primary-soft); color: var(--primary); display: flex; align-items: center; justify-content: center; }
.ps-empty-ic .ic { width: 26px; height: 26px; }
.ps-edit { text-align: left; border-top-color: var(--primary); max-height: 90vh; overflow: auto; }
.ps-edit p { margin-bottom: 0.6rem; }
.ps-lbl { display: block; font-weight: 600; font-size: 0.88rem; margin: 0.7rem 0 0.3rem; }
.ps-edit input, .ps-edit textarea { width: 100%; }
.ps-codes { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.45rem; }
.ps-codes .chip { min-height: 36px; padding: 0.3rem 0.7rem; font-size: 0.85rem; }
.ps-colors { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.ps-sw { width: 40px; height: 40px; border-radius: 10px; border: 1.5px solid var(--border); background: var(--card); font: 600 0.7rem inherit; cursor: pointer; }
.ps-sw.on { box-shadow: 0 0 0 3px var(--primary); }
.ps-notes { display: flex; flex-direction: column; gap: 0.35rem; }
.ps-note { position: relative; background: var(--surface); border-radius: 10px; padding: 0.45rem 2.2rem 0.45rem 0.65rem; font-size: 0.92rem; }
.ps-note small { display: block; color: var(--muted); font-size: 0.76rem; }
.ps-ndel { position: absolute; top: 6px; right: 6px; border: 0; background: none; color: var(--muted); cursor: pointer; }
.ps-ndel .ic { width: 16px; height: 16px; }
@media (max-width: 700px) {
  .ps-table { --who: 112px; min-width: calc(var(--who) + var(--n) * 44px); }
  .ps-row { grid-template-columns: var(--who) repeat(var(--n), minmax(44px, 1fr)); }
  .ps-who { padding: 0.35rem 0.5rem; }
  .ps-who b { font-size: 0.82rem; }
  .ps-code { font-size: 0.72rem; padding: 2px 4px; }
  .ps-top { padding: 0.7rem; }
}
.ps-oc { font-size: 0.7rem; font-weight: 600; color: var(--text); line-height: 1.2; }
.ps-hwho { justify-content: flex-end; }
.ps-hwho small { color: var(--muted); font-weight: 700; font-size: 0.7rem; text-transform: uppercase; letter-spacing: .04em; }
.ps-day.can-edit { cursor: pointer; }
.ps-day.can-edit:hover { background: rgba(27,58,107,.10); }
.ps-kdots { display: flex; gap: 3px; }
.ps-kdots i { width: 8px; height: 8px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.2); }
.ps-marks { display: flex; flex-direction: column; gap: 0.45rem; margin-bottom: 0.8rem; }
.ps-mark { display: flex; align-items: center; gap: 0.6rem; min-height: 48px; padding: 0.5rem 0.9rem; border-radius: 12px; border: 1.5px solid var(--border); background: var(--card); font: inherit; font-weight: 600; cursor: pointer; text-align: left; }
.ps-mark i { width: 18px; height: 18px; border-radius: 5px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.2); }
.ps-mark.on { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-ring); }

/* Update 362: report acknowledgment */
.ack-box { display: flex; align-items: flex-start; gap: 0.7rem; margin: 0 0 1rem; padding: 0.75rem 0.9rem; border-radius: 12px; border: 1.5px solid var(--border); background: var(--surface); cursor: pointer; }
.ack-box.is-view { cursor: default; }
.ack-box input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--success); flex: none; }
.ack-box span { display: flex; flex-direction: column; gap: 2px; }
.ack-box small { color: var(--muted); }
.ack-box.is-on { border-color: var(--success); background: rgba(47,125,79,.08); }
.ack-box.is-on b { color: var(--success); }
.ack-line { display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: var(--muted); margin: 0.3rem 0; }
.ack-line input { width: 16px; height: 16px; margin: 0; accent-color: var(--success); }
.ack-line.is-on { color: var(--success); font-weight: 600; }
.mt-chip.ack-need { background: #FFF4D9; color: #8A5A00; }
.ack-ck { width: 22px; height: 22px; flex: none; border-radius: 6px; border: 2px solid var(--border); background: #fff; display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; }
.ack-ck.on { background: var(--success); border-color: var(--success); }
.ack-ck svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ack-line .ack-ck { width: 16px; height: 16px; border-radius: 4px; margin: 0; }
.ack-line .ack-ck svg { width: 12px; height: 12px; }

/* Update 363: equipment assign / exchange form and log */
.ex-acts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.5rem; margin-bottom: 0.85rem; }
.ex-acts .cl-pill span { display: flex; flex-direction: column; line-height: 1.2; }
.ex-acts .cl-pill small { font-weight: 500; color: var(--muted); font-size: 0.78rem; }
.ex-acts .cl-pill input { accent-color: var(--success); }
.ex-line { border: 1px solid var(--border); border-radius: 12px; padding: 0.7rem 0.85rem 0.1rem; margin-bottom: 0.6rem; background: var(--surface); }
.ex-line-h { display: flex; align-items: center; gap: 0.5rem; justify-content: space-between; margin-bottom: 0.55rem; }
.ex-line-h .ex-kind { font-weight: 700; max-width: 220px; }
.ex-has { display: grid; gap: 0.35rem; padding: 0.65rem 0.85rem; border-radius: 12px; background: var(--surface); border: 1px dashed var(--border); margin-bottom: 0.85rem; font-size: 0.9rem; }
.ex-has-h { color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.72rem; }
.ex-chip { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.1rem 0.5rem; margin: 0.1rem 0 0.1rem 0.35rem; border-radius: 999px; background: var(--card); border: 1px solid var(--border); font-size: 0.82rem; }
.ex-chip small { color: var(--muted); font-family: inherit; }
.ex-row .bt-top small { color: var(--muted); margin-left: auto; }
.ex-item { font-size: 0.9rem; margin: 0.15rem 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; }
.ex-item small { color: var(--muted); }
.ex-arrow svg { width: 15px; height: 15px; color: var(--muted); vertical-align: -2px; }
.ex-stats { margin-top: 0.75rem; }
.ex-sub { margin-bottom: 0.25rem; }
.ex-sub-h { display: flex; align-items: center; gap: 0.3rem; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.72rem; margin-bottom: 0.35rem; }
.ex-sub-h svg { width: 14px; height: 14px; }
.eq-nav { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); }
/* Update 364: Assign / Exchange is the first tab and stands out */
.eq-nav-b.eq-nav-ex { background: #0F766E; border-color: #0F766E; color: #fff; }
.eq-nav-b.eq-nav-ex .dp-ic { background: rgba(255,255,255,.18); color: #fff; }
.eq-nav-b.eq-nav-ex:hover { background: #115E59; border-color: #115E59; box-shadow: 0 4px 14px rgba(15,118,110,.3); }
.eq-nav-b.eq-nav-ex.on { background: #115E59; border: 2px solid #0B3B37; color: #fff; box-shadow: 0 0 0 3px rgba(15,118,110,.25); }
/* Update 366: Damage Log */
.dmg-offs { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.dmg-off { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.35rem 0.4rem 0.35rem 0.75rem; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); font: inherit; font-weight: 600; cursor: pointer; color: var(--text); }
.dmg-off b { min-width: 1.6rem; padding: 0.05rem 0.45rem; border-radius: 999px; background: #F0D3D6; color: #8B1E2B; text-align: center; font-size: 0.82rem; }
.dmg-off.on { border: 2px solid var(--primary); background: #F3F7FE; }
.dmg-type { margin-bottom: 0.75rem; }
.bt-top .dmg-when { color: var(--muted); margin-left: auto; }
.dmg-from { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; padding: 0.6rem 0.85rem; margin-bottom: 0.85rem; border-radius: 12px; background: #FDF3D8; border: 1px solid #EBC96A; font-size: 0.9rem; }
.dmg-from svg { width: 16px; height: 16px; }
.dmg-issue small svg { width: 13px; height: 13px; vertical-align: -2px; }

/* Update 369: Reserves, officer view. Marked and Unmarked headers stand out; checked-out rows carry the red and white stamp */
.pool-h { margin: 18px 0 10px; padding: 12px 16px; font-size: 1.1rem; font-weight: 800; box-shadow: 0 4px 14px rgba(16,37,68,.14); }
.pool-h small { font-weight: 600; opacity: .9; }
.pool-h-ic { width: 34px; height: 34px; background: rgba(255,255,255,.2); }
.pool-h-n { font-size: .9rem; padding: 3px 10px; border-radius: 999px; background: rgba(255,255,255,.22); }
.pool-h-patrol { background: #1F4FA8; color: #fff; border: 1px solid #173E86; border-left: 6px solid #0F2C63; }
.pool-h-inv { background: #3B4350; color: #fff; border: 1px solid #2B313B; border-left: 6px solid #1B1F26; }
.row-list .list-item.res-out.has-stamp { position: relative; filter: none; opacity: 1; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; }
.row-list .list-item.res-out.has-stamp > :not(.res-stamp) { filter: grayscale(0.85); opacity: 0.6; }
.row-list .list-item.res-out.has-stamp .res-stamp { position: static; transform: rotate(-5deg); margin: 0.2rem 0.4rem 0.2rem auto; }
.pool-h-ic { color: #fff; }
.pool-h-ic svg { stroke: currentColor; }
@media (max-width: 600px) {
  .row-list .list-item.res-out.has-stamp .res-stamp { margin: 0.1rem auto 0.3rem; padding: 0.35rem 0.9rem; }
  .row-list .list-item.res-out.has-stamp .res-stamp strong { font-size: 1.1rem; }
  .row-list .list-item.res-out.has-stamp .res-stamp span { font-size: 0.8rem; }
}

/* Update 369: Reserve Desk tiles. Free is solid green, Out is solid blue, Overdue solid red, Down stays quiet gray */
.dash-cols .card .rd-slot, .rd-slot { margin: 0; border-width: 2px; box-shadow: 0 2px 6px rgba(16,37,68,.08); }
.dash-cols .card .rd-slot.rd-free, .rd-slot.rd-free { background: #1F8A4C; border-color: #17703C; color: #fff; }
.dash-cols .card .rd-slot.rd-out, .rd-slot.rd-out { background: #1F4FA8; border-color: #173E86; color: #fff; }
.dash-cols .card .rd-slot.rd-late, .rd-slot.rd-late { background: #B42318; border-color: #8E1B12; color: #fff; }
.dash-cols .card .rd-slot.rd-down, .rd-slot.rd-down { background: #F1F3F6; border-color: #C9D0DA; color: #667085; box-shadow: none; }
.rd-slot.rd-free small, .rd-slot.rd-out small, .rd-slot.rd-late small { color: rgba(255,255,255,.92); text-transform: uppercase; letter-spacing: .06em; font-weight: 800; }
.rd-slot:hover { filter: brightness(1.06); }

/* Update 370: "This screen" download, and the on-call phlebotomist on the Patrol Schedule */
.gs-item.gs-screen { display: flex; align-items: center; gap: 0.6rem; width: 100%; text-align: left; border: 2px solid var(--primary); background: #EEF3FB; }
.gs-item.gs-screen span { display: flex; flex-direction: column; }
.gs-item.gs-screen small { color: var(--muted); font-weight: 500; }
.gs-item.gs-screen svg { width: 20px; height: 20px; flex: 0 0 auto; }
.ps-oc { display: inline-flex; align-items: center; gap: 3px; margin-top: 3px; padding: 2px 7px 2px 5px; border-radius: 999px; background: #6D28D9; color: #fff; font-size: 0.72rem; font-weight: 800; line-height: 1.25; box-shadow: 0 1px 4px rgba(76,29,149,.35); }
.ps-oc svg { width: 11px; height: 11px; flex: 0 0 auto; }
.ps-oc-h { display: inline-flex; align-items: center; gap: 3px; color: #6D28D9 !important; }
.ps-oc-h svg { width: 12px; height: 12px; }

/* Update 371: Patrol Schedule, new look. Navy hero with today's numbers, squad bands, colored shift codes, editable names */
.ps-hero { position: relative; overflow: hidden; color: #fff; border: 0; padding: 1.1rem 1.2rem; background: radial-gradient(120% 140% at 100% 0%, #2B63C9 0%, rgba(43,99,201,0) 55%), linear-gradient(135deg, #0B1F45 0%, #143A7A 60%, #1F4FA8 100%); box-shadow: 0 10px 30px rgba(11,31,69,.28); }
.ps-hero::after { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 2px, transparent 2px 14px); }
.ps-hero > * { position: relative; z-index: 1; }
.ps-hero .ps-range b { font-size: 1.35rem; font-weight: 800; letter-spacing: -.01em; color: #fff; }
.ps-hero .ps-range small, .ps-hero .ps-meta { color: rgba(255,255,255,.75); }
.ps-hero .ps-arrow { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.3); color: #fff; }
.ps-hero .ps-arrow .ic { stroke: #fff; }
.ps-hero .ps-arrow:not(:disabled):hover { background: rgba(255,255,255,.22); }
.ps-hero .btn.ghost { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.3); color: #fff; }
.ps-hero .btn.ghost:hover { background: rgba(255,255,255,.22); }
.ps-hero .btn.ghost:disabled { opacity: .45; }
.ps-hero .btn .ic { stroke: #fff; }
.ps-hero .ps-key { border-top-color: rgba(255,255,255,.18); color: rgba(255,255,255,.9); }
.ps-hero .ps-key-i i { box-shadow: 0 0 0 2px rgba(255,255,255,.35); }
.ps-today { flex-basis: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.6fr); gap: 0.6rem; }
.ps-tt { display: flex; align-items: center; gap: 0.65rem; padding: 0.65rem 0.8rem; border-radius: 14px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(4px); min-width: 0; }
.ps-tt > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.ps-tt b { font-size: 1.45rem; font-weight: 800; line-height: 1.1; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-tt small { color: rgba(255,255,255,.75); font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.ps-tt-oc b { font-size: 1.1rem; }
.ps-tt-ic { width: 38px; height: 38px; flex: none; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: #1F8A4C; }
.ps-tt-ic.is-t { background: #2563EB; } .ps-tt-ic.is-off { background: #B7791F; } .ps-tt-ic.is-oc { background: #6D28D9; }
.ps-tt-ic .ic { width: 20px; height: 20px; stroke: #fff; }
.ps-card { border-radius: 16px; box-shadow: 0 6px 22px rgba(16,37,68,.10); }
.ps-table { --who: 200px; }
.ps-hrow { background: #F4F7FC; }
.ps-hrow .ps-who { background: #F4F7FC; }
.ps-day.is-today { background: var(--primary); box-shadow: none; }
.ps-day.is-today .ps-dow { color: rgba(255,255,255,.85); }
.ps-day.is-today .ps-dnum { background: #fff; color: var(--primary); box-shadow: none; }
.ps-day.is-today .ps-dnum.has-c { background: var(--dc); color: var(--dci); box-shadow: 0 0 0 2px #fff; }
.ps-cell.is-today { background: rgba(31,79,168,.07); box-shadow: inset 2px 0 0 var(--primary), inset -2px 0 0 var(--primary); }
.ps-group + .ps-group { border-top: 0; }
.ps-gname { width: auto; position: sticky; left: 0; align-items: center; padding: 0.5rem 0.9rem; margin: 0; font-size: 0.82rem; color: #fff; background: #4B5563; border-top: 1px solid rgba(0,0,0,.08); }
.ps-gname small { color: rgba(255,255,255,.8); }
.ps-g-day .ps-gname { background: linear-gradient(90deg, #B45309, #D97706 60%, #F59E0B); }
.ps-g-night .ps-gname { background: linear-gradient(90deg, #1E1B4B, #3730A3 60%, #4F46E5); }
.ps-g-admin .ps-gname { background: linear-gradient(90deg, #1F2937, #374151 60%, #4B5563); }
.ps-g-phleb .ps-gname { background: linear-gradient(90deg, #4C1D95, #6D28D9); }
.ps-gic { width: 22px; height: 22px; border-radius: 7px; background: rgba(255,255,255,.18); display: inline-flex; align-items: center; justify-content: center; }
.ps-gic .ic { width: 14px; height: 14px; stroke: #fff; }
.ps-gname.can-edit { cursor: pointer; }
.ps-gname.can-edit:hover { filter: brightness(1.08); }
.ps-gname .ps-pen .ic { stroke: #fff; }
.ps-g-day .ps-who { box-shadow: inset 4px 0 0 #F59E0B; }
.ps-g-night .ps-who { box-shadow: inset 4px 0 0 #4F46E5; }
.ps-g-admin .ps-who { box-shadow: inset 4px 0 0 #6B7280; }
.ps-row.is-me .ps-who { box-shadow: inset 4px 0 0 var(--primary); }
.ps-row:hover .ps-cell { background-color: rgba(31,79,168,.035); }
.ps-who { flex-direction: row; align-items: center; justify-content: flex-start; gap: 0.55rem; }
.ps-wt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ps-av { width: 28px; height: 28px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #E6ECF6; color: #1F3B63; font-weight: 800; font-size: 0.8rem; }
.ps-av::before { content: attr(data-ini); }
.ps-g-day .ps-av { background: #FEF3C7; color: #92400E; }
.ps-g-night .ps-av { background: #E0E7FF; color: #3730A3; }
.ps-row.is-me .ps-av { background: var(--primary); color: #fff; }
.ps-pen { opacity: 0; flex: none; transition: opacity .15s; }
.ps-pen .ic { width: 14px; height: 14px; stroke: var(--muted); }
.ps-who.can-edit { cursor: pointer; }
.ps-who.can-edit:hover { background: #EEF3FB; }
.ps-who.can-edit:hover .ps-pen, .ps-gname.can-edit:hover .ps-pen, .ps-who.can-edit:focus-visible .ps-pen { opacity: 1; }
@media (hover: none) { .ps-pen { opacity: .55; } }
.ps-code { font-weight: 800; letter-spacing: .02em; border-radius: 7px; box-shadow: none; background: #EEF1F5; color: #344054; }
.ps-code.k-on { background: #1F8A4C; color: #fff; }
.ps-code.k-v { background: #F59E0B; color: #3B2300; }
.ps-code.k-h { background: #7C3AED; color: #fff; }
.ps-code.k-t { background: #2563EB; color: #fff; }
.ps-code.k-hrs { background: #0E7C86; color: #fff; }
.ps-cell.can-edit:hover .ps-code { transform: scale(1.06); }
.ps-code { transition: transform .12s; }
.ps-add { position: sticky; left: 0; display: inline-flex; align-items: center; gap: 0.35rem; margin: 0.35rem 0.7rem 0.55rem; padding: 0.35rem 0.8rem; border-radius: 999px; border: 1.5px dashed #9AA8BD; background: transparent; color: #475467; font: inherit; font-size: 0.82rem; font-weight: 700; cursor: pointer; }
.ps-add:hover { border-color: var(--primary); color: var(--primary); background: #EEF3FB; }
.ps-add .ic { width: 14px; height: 14px; }
.ps-q { display: flex; align-items: center; gap: 0.4rem; border: 1.5px solid var(--border); border-radius: 12px; padding: 0 0.6rem; background: var(--card); }
.ps-q:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-ring); }
.ps-q .ic { width: 18px; height: 18px; stroke: var(--muted); flex: none; }
.ps-edit .ps-q input { border: 0; box-shadow: none; outline: 0; padding: 0.65rem 0; background: transparent; }
.ps-plist { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; max-height: 280px; overflow: auto; }
.ps-pi { display: flex; align-items: center; gap: 0.6rem; min-height: 44px; padding: 0.35rem 0.6rem; border: 1px solid var(--border); border-radius: 10px; background: var(--card); font: inherit; text-align: left; cursor: pointer; }
.ps-pi:hover { background: #EEF3FB; }
.ps-pi.on { border-color: var(--primary); background: #EEF3FB; box-shadow: 0 0 0 2px var(--primary-ring); }
.ps-pi small { color: var(--muted); margin-left: auto; font-weight: 600; }
.ps-pfree { font-size: 0.82rem; color: var(--muted); padding: 0.3rem 0.2rem; }
.ps-pick .rr-btns { margin-top: 1rem; }
.ps-rm .ic { width: 15px; height: 15px; vertical-align: -2px; stroke: currentColor; }
.ps-ocl { display: flex; flex-direction: column; gap: 6px; }
.ps-oce { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; align-items: center; text-align: left; padding: 0.5rem 0.8rem; border-radius: 12px; border: 1.5px solid #C4B5FD; background: #F5F3FF; font: inherit; cursor: pointer; }
.ps-oce small { color: #6D28D9; font-weight: 700; font-size: 0.74rem; text-transform: uppercase; letter-spacing: .04em; }
.ps-oce b { grid-row: 2; }
.ps-oce .ic { grid-row: 1 / 3; grid-column: 2; width: 16px; height: 16px; stroke: #6D28D9; }
.ps-oce:hover { border-color: #6D28D9; }
.ps-lbl .ic { width: 14px; height: 14px; vertical-align: -2px; stroke: #6D28D9; }
@media (max-width: 900px) { .ps-today { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ps-tt-oc { grid-column: 1 / -1; } }
@media (max-width: 700px) {
  .ps-table { --who: 128px; }
  .ps-av { display: none; }
  .ps-hero { padding: 0.9rem; }
  .ps-hero .ps-range b { font-size: 1.1rem; }
  .ps-tt { padding: 0.5rem 0.55rem; gap: 0.45rem; }
  .ps-tt-ic { width: 30px; height: 30px; border-radius: 9px; } .ps-tt-ic .ic { width: 16px; height: 16px; }
  .ps-tt b { font-size: 1.15rem; } .ps-tt small { font-size: 0.64rem; }
}
.ps-oc { max-width: 100%; overflow: hidden; }
.ps-oc > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 700px) {
  .ps-oc { padding: 1px 4px; font-size: 0.62rem; gap: 0; }
  .ps-oc svg { display: none; }
  .ps-hero .ps-meta { display: none; }
  .ps-hero .ps-range b { font-size: 1rem; }
  .ps-today { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45rem; }
  .ps-tt-oc { grid-column: auto; }
  .ps-tt b { font-size: 1.05rem; }
  .ps-tt-oc b { font-size: 0.9rem; }
  .ps-tt small { letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ps-hero .ps-key { font-size: 0.78rem; }
}
@media (max-width: 700px) { .ps-who .ps-pen { display: none; } }

/* Update 374: Officer Development */
.td-pills { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 0.9rem; }
.td-pill { min-height: 36px; padding: 0.3rem 0.9rem; border-radius: 999px; border: 1px solid #C9D3E0; background: #fff; color: var(--text); font: inherit; font-size: 0.88rem; font-weight: 700; cursor: pointer; }
.td-pill.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.td-details { margin: 0.8rem 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.td-link { margin: 0.7rem 0 0; } .td-link a { display: inline-flex; align-items: center; gap: 5px; text-decoration: none; } .td-link svg { width: 15px; height: 15px; }
.td-sign { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-top: 0.8rem; padding: 0.6rem 0.8rem; border-radius: 10px; background: #F3F7FE; }
.td-sign .btn svg { width: 15px; height: 15px; vertical-align: -3px; margin-right: 2px; }
.td-seats { color: var(--text); font-size: 0.9rem; } .td-in { color: #1E7A3C; } .td-in svg { width: 15px; height: 15px; vertical-align: -3px; }
.td-tag { font-size: 0.78rem; font-weight: 800; padding: 3px 10px; border-radius: 999px; background: #ECEFF3; color: var(--muted); }
.td-roster { margin-top: 0.6rem; } .td-roster summary { cursor: pointer; font-weight: 700; color: var(--primary); } .td-roster ol { margin: 0.4rem 0 0; padding-left: 1.4rem; }
.cs-hero.td-hero { background: linear-gradient(135deg, #4A0A14 0%, #8E1426 100%); }
.td-hero .cs-kicker { color: #F6C6CE; }

/* Update 375: sidebar cleanup */
#sidebar .nav-group[data-group="Fleet"] { color: #6FA9E6; }
#sidebar .nav-group[data-group="People"] { color: #34D399; }
#sidebar .nav-group[data-group="AFPD Intranet"] { color: #E8956B; }
#sidebar .nav-group:hover { filter: brightness(1.2); }
.nav-group-count { margin-left: auto; margin-right: 8px; background: #D0313F; color: #fff; font-size: 0.68rem; font-weight: 800; letter-spacing: 0; min-width: 1.25rem; height: 1.25rem; padding: 0 0.3rem; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; }
.nav-group-count[hidden] { display: none; }
.nav-find { padding: 0.5rem 0.6rem 0.1rem; }
#nav-find { width: 100%; box-sizing: border-box; min-height: 34px; padding: 0.3rem 0.75rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.08); color: #fff; font: inherit; font-size: 0.85rem; }
#nav-find::placeholder { color: rgba(255,255,255,.55); }
#nav-find:focus { outline: none; border-color: rgba(255,255,255,.65); }
#sidebar .nav-link.nav-find-out, #sidebar .nav-group.nav-find-out { display: none !important; }
body.nav-finding #sidebar .nav-link.nav-folded:not(.nav-find-out) { display: flex !important; }
.nav-find-none { margin: 0.5rem 0.75rem; color: rgba(255,255,255,.65); font-size: 0.85rem; }
body.nav-editing .nav-find { display: none; }
.nav-star { flex: 0 0 auto; margin: -6px -6px -6px auto; width: 32px; height: 32px; padding: 0; border: 0; background: none; display: grid; place-items: center; cursor: pointer; }
.nav-badge:not([hidden]) + .nav-star { margin-left: 2px; }
#sidebar .nav-link .nav-star .ic { width: 15px; height: 15px; color: #fff; opacity: 0.28; }
#sidebar .nav-link .nav-star:hover .ic { opacity: 0.7; }
#sidebar .nav-link .nav-star.on .ic { color: #F5C451; fill: #F5C451; opacity: 1; }
body.nav-editing .nav-star { display: none; }
@media (hover: hover) { #sidebar .nav-link .nav-star:not(.on) { visibility: hidden; } #sidebar .nav-link:hover .nav-star { visibility: visible; } }
@media (max-width: 767px) {
  #nav-find { font-size: 16px; }
  .sidebar .nav-group { padding-top: 0.45rem; padding-bottom: 0.1rem; }
}

/* Update 377: Firearms */
.cs-hero.fa-hero { background: linear-gradient(135deg, #171B21 0%, #47525F 100%); }
.fa-hero .cs-kicker { color: #C7D0DB; }
.fa-cal { background: linear-gradient(135deg, #171B21, #47525F); width: 66px; }
.fa-cal b { font-size: 1.3rem; }
.fa-you { display: flex; align-items: center; gap: 8px; margin-top: 0.9rem; padding: 0.65rem 0.8rem; border-radius: 10px; background: #E2F4E8; color: #14532D; border-left: 4px solid #1E7A3C; }
.fa-you svg { flex: 0 0 auto; width: 18px; height: 18px; }
.fa-details { margin: 0.8rem 0 0; white-space: pre-line; }
.fa-change { margin: 0.8rem 0 0; padding: 0.6rem 0.8rem; border-radius: 10px; background: #FFF8E6; border: 1px solid #F3D9A4; }
.fa-tels { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 4px; } .fa-tels a { font-weight: 700; }
.fa-loc { margin-top: 0.8rem; padding: 0.7rem 0.8rem; border-radius: 10px; background: #F3F7FE; }
.fa-loc h4 { display: flex; align-items: center; gap: 6px; margin: 0 0 0.3rem; font-size: 1rem; } .fa-loc h4 svg { width: 16px; height: 16px; }
.fa-addr { margin: 0; white-space: pre-line; }
.fa-maps { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0.45rem 0 0; } .fa-maps a { font-weight: 700; }
.fa-drive { margin: 0.45rem 0 0; color: var(--muted); font-size: 0.9rem; }
.fa-rosters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 0.8rem; }
.fa-col { padding: 0.7rem 0.8rem; border-radius: 10px; background: #F3F7FE; min-width: 0; }
.fa-col h4 { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin: 0 0 0.4rem; font-size: 0.95rem; }
.fa-col ul { list-style: none; margin: 0; padding: 0; }
.fa-col li { padding: 3px 6px; border-radius: 6px; overflow-wrap: anywhere; }
.fa-col li.is-me { background: #1E7A3C; color: #fff; font-weight: 700; }
@media (max-width: 760px) { .fa-rosters { grid-template-columns: 1fr; } }
.fa-leave { margin: 0.7rem 0 0; color: var(--muted); }

/* Update 378: Firearms sentences stay on one line */
.fa-you > span { display: grid; gap: 2px; }
.fa-change b, .fa-change > span { display: block; }
.fa-drive { white-space: pre-line; }
.fa-change > .fa-tels { display: flex; flex-direction: column; gap: 2px; }
@media (max-width: 480px) {
  .fa-hero p, .fa-you, .fa-details, .fa-change, .fa-addr, .fa-maps, .fa-drive { font-size: 0.82rem; }
  .fa-you { gap: 6px; padding: 0.55rem 0.6rem; }
  .fa-change, .fa-loc { padding: 0.55rem 0.65rem; }
  .fa-card .ann-top { flex-wrap: wrap; align-items: center; gap: 10px 12px; }
  .fa-card .ann-main { display: contents; }
  .fa-card .ann-main h3 { flex: 1 1 100%; margin: 0; font-size: min(1rem, 4.2vw); letter-spacing: -0.01em; }
  .fa-you, .fa-change { font-size: min(0.82rem, 3.3vw); }
  .fa-card .ann-facts { flex: 1 1 100%; font-size: 0.82rem; }
}

/* Update 379: Training Staff sits right under the location */
.fa-staff { margin-top: 0.8rem; }
.fa-staff ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 12px; }
@media (max-width: 760px) { .fa-staff ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Update 380: Fleet inbox */
.cs-hero.msg-hero { background: linear-gradient(135deg, #102544 0%, #1F6F8C 100%); }
.msg-rule { margin: 0 0 0.7rem; color: var(--muted); font-size: 0.85rem; }
.msg-log { display: flex; flex-direction: column; gap: 8px; max-height: 55vh; overflow-y: auto; padding: 4px 2px; margin-bottom: 0.9rem; }
.msg-b { align-self: flex-start; max-width: 85%; padding: 0.55rem 0.75rem; border-radius: 14px; background: #fff; color: var(--text); overflow-wrap: anywhere; }
.msg-b.mine { align-self: flex-end; background: var(--primary); color: #fff; }
.msg-b p { margin: 0; white-space: pre-wrap; }
.msg-b small { display: block; margin-top: 3px; font-size: 0.7rem; opacity: 0.7; }
.msg-car { display: block; margin-bottom: 3px; font-size: 0.78rem; font-weight: 800; color: inherit; }
.msg-pics { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } .msg-pics img { width: 110px; height: 110px; object-fit: cover; border-radius: 10px; display: block; }
.msg-note { align-self: center; max-width: 92%; padding: 0.4rem 0.7rem; border-radius: 10px; background: #FFF8E6; border: 1px solid #F3D9A4; font-size: 0.85rem; overflow-wrap: anywhere; }
.msg-note small { display: block; color: var(--muted); font-size: 0.7rem; }
.msg-rows { display: grid; gap: 8px; }
.msg-row { display: grid; gap: 2px; width: 100%; margin: 0; text-align: left; font: inherit; color: var(--text); cursor: pointer; }
.msg-row.unread { border-left: 4px solid #D0313F; }
.msg-row-top { display: flex; justify-content: space-between; gap: 8px; } .msg-row-top small { color: var(--muted); flex: 0 0 auto; }
.msg-row-car { font-size: 0.78rem; font-weight: 800; color: var(--primary); }
.msg-row-txt { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-head { display: flex; align-items: center; gap: 10px; margin-bottom: 0.7rem; } .msg-head h3 { flex: 1; margin: 0; }
.msg-state { font-size: 0.72rem; font-weight: 800; padding: 3px 10px; border-radius: 999px; background: #ECEFF3; color: var(--muted); }
.msg-state.msg-new { background: #FBE4E6; color: #B31B32; } .msg-state.msg-waiting { background: #FFF1CC; color: #8A6420; }
.msg-close { margin-top: 0.9rem; padding-top: 0.8rem; border-top: 1px solid #C9D3E0; }

/* Update 381: Notification Center */
#top-bell { position: relative; color: #F1F3F5; }
.bell-badge { position: absolute; top: 0; right: 0; min-width: 17px; height: 17px; padding: 0 4px; box-sizing: border-box; border-radius: 999px; background: #D0313F; color: #fff; font-size: 0.66rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.bell-badge[hidden], .bell-scrim[hidden], .bell-panel[hidden] { display: none; }
.bell-scrim { position: fixed; inset: 0; z-index: 290; background: rgba(0, 0, 0, 0.4); }
.bell-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 300; width: min(420px, 100vw); box-sizing: border-box; display: flex; flex-direction: column; background: #DCE6F2; box-shadow: -8px 0 30px rgba(0, 0, 0, 0.3); padding-top: env(safe-area-inset-top, 0); }
.bell-head { display: flex; align-items: center; gap: 8px; padding: 0.8rem 0.9rem; background: #000; color: #fff; }
.bell-head h2 { flex: 1; margin: 0; font-size: 1.1rem; color: #fff; }
.bell-x { color: #fff; }
.bell-list { flex: 1; overflow-y: auto; padding: 0.7rem; display: grid; align-content: start; gap: 8px; }
.bell-card { background: #fff; border-radius: 12px; padding: 0.6rem 0.7rem; border-left: 4px solid transparent; }
.bell-card.unread { border-left-color: #D0313F; }
.bell-main { display: flex; gap: 10px; width: 100%; padding: 0; border: 0; background: none; text-align: left; font: inherit; color: var(--text); cursor: pointer; }
.bell-ic { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: #E7EEF8; color: #1F4E8C; }
.bell-ic svg { width: 18px; height: 18px; }
.bell-issue { background: #FBE4E6; color: #B31B32; } .bell-idea { background: #FFF1CC; color: #8A6420; } .bell-private { background: #ECE4FB; color: #5B3AA8; }
.bell-txt { min-width: 0; display: grid; gap: 1px; overflow-wrap: anywhere; font-size: 0.88rem; }
.bell-txt b { font-size: 0.95rem; } .bell-txt small { color: var(--muted); }
.bell-meta { font-size: 0.72rem; font-weight: 700; color: var(--muted); }
.bell-acts { display: flex; justify-content: flex-end; gap: 6px; margin-top: 0.4rem; }
.bell-empty { margin: 2rem 0; text-align: center; color: var(--muted); }
.bell-ask { padding: 0.7rem 0.9rem calc(0.8rem + env(safe-area-inset-bottom, 0px)); background: #fff; border-top: 1px solid #C9D3E0; }
.bell-ask h3 { margin: 0 0 0.4rem; font-size: 0.95rem; }
.bell-ask-btns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .bell-ask-btns .btn { padding-left: 4px; padding-right: 4px; font-size: 0.76rem; }
.fb-private { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 0.7rem; padding: 0.6rem 0.8rem; border: 1px solid #C9D3E0; border-radius: 12px; background: #fff; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.fb-private svg { flex: 0 0 auto; width: 18px; height: 18px; color: #5B3AA8; } .fb-private span { display: grid; } .fb-private small { color: var(--muted); }
#bell-x svg { color: #fff; }
#top-logout { white-space: nowrap; flex: 0 0 auto; }
.topbar h1 { min-width: 0; }
@media (max-width: 480px) { .topbar { gap: 0.15rem; } #top-logout { padding-left: 0.5rem; padding-right: 0.5rem; font-size: 0.78rem; } }

/* Update 382: reply on the card, internal notes */
.bell-meta em { font-style: normal; color: #B31B32; }
.bell-reply { margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid #E4E8EF; }
.bell-thread { display: grid; gap: 5px; margin-bottom: 0.5rem; max-height: 220px; overflow-y: auto; }
.bell-say { justify-self: start; max-width: 90%; padding: 0.35rem 0.55rem; border-radius: 10px; background: #EEF2F7; font-size: 0.84rem; overflow-wrap: anywhere; }
.bell-say.own { justify-self: end; background: #DCE6F2; } .bell-say small { display: block; color: var(--muted); font-size: 0.68rem; }
.bell-kinds { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 0.4rem; } .bell-kinds .td-pill { min-height: 32px; padding: 0.15rem 0.7rem; font-size: 0.78rem; } .bell-kinds svg { width: 13px; height: 13px; vertical-align: -2px; }
.bell-reply textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; padding: 0.45rem 0.55rem; border-radius: 10px; border: 1px solid #C9D3E0; background: #fff; color: var(--text); }
.inote-h { display: flex; align-items: center; gap: 6px; margin: 0 0 0.3rem; } .inote-h svg { width: 16px; height: 16px; }
.inote-f { margin-top: 0.6rem; display: grid; gap: 6px; justify-items: start; } .inote-f textarea { width: 100%; box-sizing: border-box; }

/* Update 383: search, filter chips, snooze, quick replies */
.bell-tools { padding: 0.6rem 0.7rem 0; display: grid; gap: 6px; }
#bell-q { width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; padding: 0.4rem 0.7rem; border-radius: 10px; border: 1px solid #C9D3E0; background: #fff; color: var(--text); }
.bell-chips, .bell-quick { display: flex; flex-wrap: wrap; gap: 5px; }
.bell-quick { margin-bottom: 0.4rem; } .bell-quick[hidden] { display: none; }
.bell-chip { min-height: 32px; padding: 0.15rem 0.65rem; border-radius: 999px; border: 1px solid #C9D3E0; background: #fff; color: var(--text); font: inherit; font-size: 0.78rem; font-weight: 600; cursor: pointer; }
.bell-chip.on { background: #000; border-color: #000; color: #fff; } .bell-chip b { color: #B31B32; } .bell-chip.on b { color: #fff; }
.bell-acts { flex-wrap: wrap; align-items: center; }
.bell-until { flex: 1; font-size: 0.76rem; font-weight: 700; color: var(--muted); }
.bell-flash { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); padding: 0.45rem 0.9rem; border-radius: 999px; background: #000; color: #fff; font-size: 0.85rem; font-weight: 700; white-space: nowrap; }
.bell-chips { gap: 4px; } .bell-chips .bell-chip { padding: 0.15rem 0.5rem; font-size: 0.74rem; }
.bell-acts .btn { padding-left: 8px; padding-right: 8px; font-size: 0.78rem; }
#bell-x svg, #bell-x svg * { stroke: #fff; }

/* Update 384: OneDrive documents on the vehicle card */
.vdocs { margin: 0.7rem 0; border: 1px solid #C9D3E0; border-radius: 12px; background: #fff; }
.vdocs summary { padding: 0.6rem 0.8rem; font-weight: 700; cursor: pointer; }
.vdocs summary svg { width: 17px; height: 17px; vertical-align: -3px; }
.vdocs-body { padding: 0 0.8rem 0.7rem; }
.vdocs-list { list-style: none; margin: 0; padding: 0; }
.vdocs-list li + li { border-top: 1px solid #E4E8EF; }
.vdocs-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0.35rem 0; border: 0; background: none; font: inherit; color: var(--text); text-align: left; text-decoration: none; cursor: pointer; }
.vdocs-row svg { flex: 0 0 auto; width: 19px; height: 19px; color: #1F4E8C; }
.vdocs-row span { min-width: 0; display: grid; overflow-wrap: anywhere; } .vdocs-row b { font-weight: 600; } .vdocs-row small { color: var(--muted); }
.vdocs-up { margin-bottom: 0.3rem; } .vdocs-up svg { width: 14px; height: 14px; vertical-align: -2px; }
.od-form { margin-bottom: 1rem; } .od-form .field input { width: 100%; box-sizing: border-box; }
.vdocs-old { margin: 0 0 0.4rem; padding: 0.4rem 0.6rem; border-radius: 8px; background: #FFF1CC; color: #6B4D12; font-size: 0.85rem; font-weight: 600; }

/* Update 386: new OneDrive files waiting to be entered */
.iq-inbox { margin-bottom: 1rem; border-radius: 18px; padding: 0.9rem 1.1rem; }
.iq-inbox h3 { margin: 0 0 0.3rem; }
.iq-doc { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 12px; padding: 0.5rem 0; }
.iq-doc + .iq-doc { border-top: 1px solid #C9D3E0; }
.iq-doc-file { flex: 1 1 280px; min-width: 0; display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; }
.iq-doc-file svg { flex: 0 0 auto; width: 19px; height: 19px; color: #1F4E8C; }
.iq-doc-file span { min-width: 0; display: grid; overflow-wrap: anywhere; } .iq-doc-file b { font-weight: 600; } .iq-doc-file small { color: var(--muted); }
.iq-doc-acts { display: flex; gap: 6px; }

/* Update 390: Week One gap and Week Two goal on the Time Card */
.tc-plan { display: flex; align-items: flex-start; gap: 8px; margin: 0.5rem 0; padding: 0.5rem 0.65rem; border-radius: 10px; font-size: 0.88rem; line-height: 1.35; background: #E7EEF8; color: #1F3F6E; }
.tc-plan.over, .tc-plan.under { background: #FFF1CC; color: #6B4D12; }
.tc-plan svg { flex: 0 0 auto; width: 17px; height: 17px; margin-top: 1px; }

/* Update 393: Departments */
.sec-group { margin: 1.2rem 0 0.55rem; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.sec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0.75rem; }
.sec-tile { font: inherit; color: inherit; text-align: left; cursor: pointer; background: var(--card); border: 1px solid rgba(29, 29, 31, 0.18); border-radius: 16px; padding: 0.95rem 1rem; box-shadow: 0 1px 3px rgba(16, 37, 68, 0.07); display: flex; flex-direction: column; gap: 0.25rem; transition: transform 0.15s, box-shadow 0.15s; }
.sec-tile:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(16, 37, 68, 0.13); }
.sec-tile strong { font-size: 1.05rem; }
.sec-tile small { color: var(--muted); font-size: 0.86rem; line-height: 1.35; }
.sec-tile em { font-style: normal; font-size: 0.76rem; font-weight: 700; color: var(--primary); margin-top: 0.3rem; display: flex; align-items: center; gap: 0.3rem; }
.sec-tile em .ic, .sec-hero-t small .ic { width: 14px; height: 14px; }
.sec-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.4rem; }
.sec-pill { font-size: 0.7rem; font-weight: 800; padding: 0.22rem 0.6rem; border-radius: 999px; background: #E6E8EC; color: #4A5260; white-space: nowrap; }
.sec-pill.is-open { background: #D6F2DF; color: #176B2C; }
.sec-back { margin-bottom: 0.5rem; }
.sec-hero { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem; }
.sec-hero .cs-ic { flex: none; }
.sec-hero-t { flex: 1 1 220px; min-width: 0; }
.sec-hero-t h2 { margin: 0 0 0.15rem; }
.sec-hero-t p { margin: 0; color: var(--muted); }
.sec-hero-t small { display: flex; align-items: center; gap: 0.3rem; margin-top: 0.3rem; color: var(--primary); font-weight: 700; }
.sec-short { font: inherit; font-weight: 700; color: var(--primary); cursor: pointer; width: 100%; display: flex; align-items: center; gap: 0.5rem; background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 0.7rem 0.9rem; margin-top: 0.75rem; }
.sec-short span { margin-left: auto; }
.sec-layout { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 0.75rem; margin-top: 0.75rem; align-items: start; }
.sec-col { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; }
.sec-col .card { margin: 0; }
.sec-card-h { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.5rem; }
.sec-card-h h3 { margin: 0; display: flex; align-items: center; gap: 0.4rem; font-size: 1rem; }
.sec-empty { margin: 0; color: var(--muted); font-size: 0.9rem; }
.sec-text { margin: 0.2rem 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.sec-item { padding: 0.55rem 0; border-top: 1px solid rgba(29, 29, 31, 0.1); overflow-wrap: anywhere; }
.sec-card-h + .sec-item { border-top: 0; padding-top: 0; }
.sec-item small { color: var(--muted); }
.sec-kind { font-size: 0.68rem; font-weight: 800; padding: 0.12rem 0.45rem; border-radius: 6px; background: #DCEAF7; color: var(--primary); }
.sec-kind.is-bolo { background: #FBE0E0; color: #A61B1B; }
.sec-team { display: grid; gap: 0.4rem; }
.sec-person { display: flex; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; }
.sec-person small { color: var(--muted); }
.sec-link { display: flex; justify-content: space-between; gap: 0.6rem; padding: 0.45rem 0; color: var(--primary); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.sec-link small { display: block; color: var(--muted); font-weight: 400; }
.sec-edit-row { display: grid; gap: 0.4rem; padding: 0.6rem 0; border-bottom: 1px solid rgba(29, 29, 31, 0.1); justify-items: start; }
.sec-edit-row input:not([type=checkbox]), .sec-edit-row select, .sec-edit-row textarea { width: 100%; }
.sec-row2 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 0.4rem; width: 100%; }
.sec-setup .sec-check { margin-bottom: 1rem; }
.sec-check { display: flex; align-items: center; gap: 0.4rem; font-size: 0.86rem; }
.sec-btns { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.7rem; }
.sec-setup { margin-top: 0.75rem; }
@media (max-width: 760px) { .sec-layout { grid-template-columns: minmax(0, 1fr); } }

/* Update 394: first working sections */
.sec-res { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.2rem 0.8rem; padding: 0.5rem 0; border-top: 1px solid rgba(29, 29, 31, 0.1); overflow-wrap: anywhere; }
.sec-res:first-of-type { border-top: 0; }
.sec-res > span { flex: 1 1 170px; min-width: 0; }
.sec-res small { display: block; color: var(--muted); font-size: 0.82rem; }
.sec-res a { color: var(--primary); font-weight: 600; }
.sec-phones { border-top: 1px solid rgba(29, 29, 31, 0.1); padding: 0.45rem 0; }
.sec-phones summary { cursor: pointer; font-weight: 700; }
.sec-phones .sec-res:first-of-type { border-top: 1px solid rgba(29, 29, 31, 0.1); margin-top: 0.4rem; }
.sec-fine { margin: 0.6rem 0 0; color: var(--muted); font-size: 0.8rem; line-height: 1.4; }
.sec-tool form .field { margin-bottom: 0.4rem; max-width: 230px; }
.sec-until { display: block; font-size: 0.82rem; color: var(--muted); width: 100%; }
.sec-until small { font-weight: 400; }
.sec-needs { border-left: 4px solid #F5A524; }
.sec-needs ul { margin: 0; padding-left: 1.1rem; }
.sec-needs li { margin: 0.25rem 0; }

/* Update 400: Extra Duty sign-ups */
.xd-shift { padding: 0.7rem 0; border-top: 1px solid rgba(29, 29, 31, 0.1); overflow-wrap: anywhere; }
.sec-card-h + .xd-shift { border-top: 0; padding-top: 0; }
.xd-shift.is-past { opacity: 0.7; }
.xd-top { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.xd-facts { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; color: var(--muted); font-size: 0.88rem; margin-top: 0.2rem; }
.xd-facts .ic { width: 15px; height: 15px; }
.xd-sign { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.4rem 0.8rem; margin-top: 0.45rem; font-size: 0.88rem; }
.xd-who { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.4rem; }
.xd-who > span { background: #DCEAF7; color: var(--primary); border-radius: 999px; padding: 0.12rem 0.55rem; font-size: 0.8rem; font-weight: 600; }
.xd-tools { display: flex; gap: 0.35rem; margin-top: 0.5rem; }
.xd-form { margin-top: 0.6rem; display: grid; gap: 0.4rem; }
.xd-form input:not([type=checkbox]), .xd-form select, .xd-form textarea { width: 100%; }

/* Update 401: half-size Department tiles */
.sec-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0.5rem; }
.sec-tile { flex-direction: row; align-items: center; gap: 0.6rem; padding: 0.55rem 0.65rem; border-radius: 12px; min-height: 60px; }
.sec-tile .cs-ic { width: 36px; height: 36px; border-radius: 10px; flex: none; }
.sec-tile .cs-ic .ic { width: 19px; height: 19px; }
.sec-tile-t { display: flex; flex-direction: column; min-width: 0; }
.sec-tile strong { font-size: 0.92rem; line-height: 1.2; }
.sec-tile small { font-size: 0.74rem; }
.sec-group { margin: 0.9rem 0 0.4rem; }
@media (max-width: 760px) { .sec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Update 402: policy manual */
.manual-frame { display: block; width: 100%; height: calc(100dvh - 190px); min-height: 480px; border: 1px solid var(--border); border-radius: 12px; background: #fff; }
@media (max-width: 760px) { .manual-frame { height: calc(100dvh - 215px); } }

/* Update 403: Patrol Schedule overhaul. Calm and premium: soft shift pills, light squad headers, gold pay dots,
   violet holidays, blue training, rose on-call, navy today. The Color key card explains every color. */
.ps-hero { background: linear-gradient(135deg, #0A1A3A 0%, #12305F 55%, #1B4384 100%); box-shadow: 0 12px 32px rgba(10,26,58,.22); border-radius: 18px; }
.ps-hero::after { display: none; }
.ps-tt { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.12); backdrop-filter: none; }
.ps-tt-ic { background: #16A34A; } .ps-tt-ic.is-t { background: #2563EB; } .ps-tt-ic.is-off { background: #D97706; } .ps-tt-ic.is-oc { background: #E11D48; }
.ps-legend { margin-bottom: 0.75rem; padding: 0.2rem 1rem; border-radius: 16px; }
.ps-legend summary { display: flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0; font-weight: 700; font-size: 0.92rem; cursor: pointer; list-style: none; }
.ps-legend summary::-webkit-details-marker { display: none; }
.ps-legend summary::after { content: ''; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .15s; }
.ps-legend[open] summary::after { transform: rotate(-135deg); }
.ps-lg-ic { width: 26px; height: 26px; border-radius: 8px; background: #EEF2F8; display: inline-flex; align-items: center; justify-content: center; }
.ps-lg-ic .ic { width: 14px; height: 14px; stroke: #1B3A6B; }
.ps-lg-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.1rem; padding: 0.55rem 0; border-top: 1px solid #EEF1F5; font-size: 0.85rem; color: #344054; }
.ps-lg-row:last-child { padding-bottom: 0.8rem; }
.ps-lg-t { width: 52px; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.ps-lg-i { display: inline-flex; align-items: center; gap: 0.45rem; }
.ps-lg-today { font-weight: 800; font-size: 0.76rem; padding: 2px 8px; border-radius: 999px; background: #12305F; color: #fff; }
.ps-lg-oc { width: 20px; height: 20px; border-radius: 50%; background: #FFE4E9; display: inline-flex; align-items: center; justify-content: center; }
.ps-lg-oc .ic { width: 11px; height: 11px; stroke: #E11D48; }
.ps-lg-note { width: 8px; height: 8px; border-radius: 50%; background: #E0A526; }
.ps-mk { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: none; }
.ps-mk.mk-payday { background: #CA8A04; }
.ps-mk.mk-paystart { background: #fff; box-shadow: inset 0 0 0 2px #CA8A04; }
.ps-mk.mk-holiday { background: #7C3AED; }
.ps-mk.mk-training { background: #2563EB; }
.ps-card { border-radius: 18px; border: 1px solid #E4E9F0; box-shadow: 0 8px 26px rgba(16,37,68,.07); }
.ps-row { border-bottom: 1px solid #EEF1F5; }
.ps-hrow, .ps-hrow .ps-who { background: #fff; }
.ps-hrow { border-bottom: 1px solid #E4E9F0; }
.ps-day { padding: 0.55rem 0.15rem 0.45rem; gap: 3px; }
.ps-day, .ps-day.is-today { background: var(--dct, transparent); box-shadow: none; }
.ps-dow { font-size: 0.68rem; letter-spacing: .08em; color: #8A94A6; }
.ps-dnum { font-size: 0.95rem; font-weight: 700; color: #1D2939; padding: 2px 9px; }
.ps-day.is-today .ps-dow { color: #12305F; }
.ps-day.is-today .ps-dnum { background: #12305F; color: #fff; box-shadow: 0 3px 10px rgba(18,48,95,.3); }
.ps-kdots { display: flex; gap: 3px; min-height: 9px; }
.ps-kdots i { box-shadow: none; }
.ps-kdots .ps-mk.mk-paystart { box-shadow: inset 0 0 0 2px #CA8A04; }
.ps-ev { background: #F2F4F7; color: #344054; font-weight: 700; }
.ps-ocrow, .ps-ocrow .ps-who { background: #FFF8F9; }
.ps-ocrow { border-bottom: 1px solid #F6DCE2; }
.ps-oc-h { color: #BE123C !important; font-weight: 800 !important; }
.ps-oc-h svg { stroke: #E11D48; }
.ps-ocd { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 0.35rem 0.15rem; min-width: 0; }
.ps-ocd span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.74rem; font-weight: 700; color: #9F1239; }
.ps-ocd.can-edit { cursor: pointer; }
.ps-ocd.can-edit:hover { background: #FFE4E9; }
.ps-ocd.is-off { opacity: .35; }
.ps-cell.is-today { background: rgba(18,48,95,.045); box-shadow: inset 1.5px 0 0 rgba(18,48,95,.35), inset -1.5px 0 0 rgba(18,48,95,.35); }
.ps-ocd.is-today { box-shadow: inset 1.5px 0 0 rgba(18,48,95,.35), inset -1.5px 0 0 rgba(18,48,95,.35); }
.ps-day.is-wk, .ps-cell.is-wk, .ps-ocd.is-wk { border-left: 2px solid #E4E9F0; }
.ps-gname { background: #F7F9FC; color: #1D2939; border-top: 1px solid #E4E9F0; border-bottom: 1px solid #E4E9F0; padding: 0.6rem 0.9rem; font-size: 0.78rem; letter-spacing: .07em; }
.ps-gname small { color: #667085; }
.ps-g-day .ps-gname { background: linear-gradient(90deg, #FFF6E5, #FFFBF3 45%, #F7F9FC); }
.ps-g-night .ps-gname { background: linear-gradient(90deg, #ECEEFF, #F5F6FF 45%, #F7F9FC); }
.ps-g-admin .ps-gname { background: linear-gradient(90deg, #EEF1F5, #F7F9FC); }
.ps-g-phleb .ps-gname { background: linear-gradient(90deg, #FFE9EE, #FFF6F8 45%, #F7F9FC); }
.ps-gic { width: 24px; height: 24px; border-radius: 8px; background: #64748B; }
.ps-g-day .ps-gic { background: #D97706; }
.ps-g-night .ps-gic { background: #4338CA; }
.ps-g-phleb .ps-gic { background: #E11D48; }
.ps-gname .ps-pen .ic { stroke: #667085; }
.ps-gname.can-edit:hover { filter: brightness(.98); }
.ps-g-day .ps-who { box-shadow: inset 3px 0 0 #F2B544; }
.ps-g-night .ps-who { box-shadow: inset 3px 0 0 #7C83E8; }
.ps-g-admin .ps-who { box-shadow: inset 3px 0 0 #A3AEBE; }
.ps-g-phleb .ps-who { box-shadow: inset 3px 0 0 #F08AA0; }
.ps-who { border-right: 1px solid #EEF1F5; }
.ps-who b { color: #1D2939; }
.ps-av, .ps-g-day .ps-av, .ps-g-night .ps-av { background: #F2F4F7; color: #475467; font-size: 0.74rem; width: 26px; height: 26px; }
.ps-row.is-me, .ps-row.is-me .ps-who { background: #EEF3FB; }
.ps-row.is-me .ps-who { box-shadow: inset 3px 0 0 #12305F; }
.ps-row.is-me .ps-av { background: #12305F; color: #fff; }
.ps-row:hover .ps-cell { background-color: rgba(18,48,95,.025); }
.ps-code { font-size: 0.74rem; font-weight: 700; letter-spacing: .02em; padding: 3px 8px; min-width: 32px; text-align: center; border-radius: 999px; background: #F2F4F7; color: #475467; box-shadow: inset 0 0 0 1px #E1E5EB; }
.ps-code.k-on { background: #E8F6EC; color: #166534; box-shadow: inset 0 0 0 1px #BFE3CB; }
.ps-code.k-hrs { background: #fff; color: #1E3A8A; box-shadow: inset 0 0 0 1px #B9C6E4; }
.ps-code.k-t { background: #E8EFFE; color: #1D4ED8; box-shadow: inset 0 0 0 1px #C6D6FB; }
.ps-code.k-v { background: #FEF4DE; color: #92400E; box-shadow: inset 0 0 0 1px #F3D69C; }
.ps-code.k-h { background: #F2ECFE; color: #6D28D9; box-shadow: inset 0 0 0 1px #DACBFB; }
.ps-cell.can-edit:hover .ps-code { transform: scale(1.05); }
.ps-add { border-color: #CBD3DF; color: #667085; }
.ps-mark i { box-shadow: none; }
@media (max-width: 700px) {
  .ps-legend { padding: 0.1rem 0.8rem; }
  .ps-lg-row { gap: 0.45rem 0.8rem; font-size: 0.8rem; }
  .ps-lg-t { width: 100%; }
  .ps-code { font-size: 0.68rem; padding: 2px 5px; min-width: 0; }
  .ps-ocd span { font-size: 0.64rem; }
  .ps-dnum { font-size: 0.86rem; padding: 1px 6px; }
}
.ps-card, .ps-legend, .ps-who, .ps-scroll { background: #fff; }
.ps-group .ps-row:not(.is-me) .ps-who { background: #fff; }
.ps-cell.is-off, .ps-day.is-off { opacity: 1; background: #FAFBFC; }
.ps-cell.is-today, .ps-ocd.is-today { box-shadow: inset 1.5px 0 0 rgba(18,48,95,.16), inset -1.5px 0 0 rgba(18,48,95,.16); }
@media (max-width: 700px) {
  .ps-cell { padding: 0.3rem 1px; }
  .ps-code { font-size: 0.64rem; padding: 2px 3px; letter-spacing: 0; }
}

/* Update 403, round 2: each squad is its own card, shifts are full color tiles, bold date header */
.ps-card { background: transparent; border: 0; box-shadow: none; padding: 0; overflow: visible; }
.ps-scroll { background: transparent; padding: 2px 2px 6px; }
.ps-headcard, .ps-group { background: #fff; border: 1px solid #E3E8EF; border-radius: 16px; box-shadow: 0 1px 2px rgba(16,37,68,.04), 0 6px 18px rgba(16,37,68,.05); overflow: clip; margin-bottom: 12px; }
.ps-group + .ps-group { border-top: 1px solid #E3E8EF; }
.ps-group .ps-row:last-of-type { border-bottom: 0; }
.ps-hrow { border-bottom: 0; }
.ps-ocrow { border-top: 1px solid #F6DCE2; border-bottom: 0; }
.ps-day { padding: 0.5rem 0.15rem 0.45rem; margin: 5px 3px; border-radius: 12px; gap: 1px; }
.ps-dow { font-size: 0.66rem; font-weight: 700; letter-spacing: .09em; color: #98A2B3; }
.ps-dnum { font-size: 1.3rem; font-weight: 800; line-height: 1.15; padding: 0; color: #101828; letter-spacing: -.02em; }
.ps-mon { font-size: 0.66rem; font-weight: 600; color: #98A2B3; text-transform: uppercase; letter-spacing: .06em; }
.ps-day.is-today { background: linear-gradient(160deg, #1B4384, #0E2752); box-shadow: 0 6px 16px rgba(14,39,82,.28); }
.ps-day.is-today .ps-dow, .ps-day.is-today .ps-mon { color: rgba(255,255,255,.75); }
.ps-day.is-today .ps-dnum { background: none; color: #fff; box-shadow: none; }
.ps-day.is-today .ps-mk.mk-paystart { background: transparent; }
.ps-day.can-edit:hover { background: #F2F5FA; }
.ps-day.is-today.can-edit:hover { background: linear-gradient(160deg, #1F4C94, #12305F); }
.ps-cell { padding: 4px 3px; }
.ps-cell.is-today, .ps-ocd.is-today { background: rgba(27,67,132,.055); box-shadow: none; }
.ps-code { display: flex; align-items: center; justify-content: center; width: 100%; height: 30px; padding: 0 4px; border-radius: 9px; font-size: 0.76rem; font-weight: 700; letter-spacing: .03em; box-shadow: none; background: #F1F3F6; color: #475467; }
.ps-code.k-on { background: #E2F4E8; color: #166534; box-shadow: none; }
.ps-code.k-hrs { background: #fff; color: #1E3A8A; box-shadow: inset 0 0 0 1.5px #A9B8D6; }
.ps-code.k-t { background: #E0E9FF; color: #1D4ED8; box-shadow: none; }
.ps-code.k-v { background: #FDEED0; color: #92400E; box-shadow: none; }
.ps-code.k-h { background: #ECE4FE; color: #6D28D9; box-shadow: none; }
.ps-cell.can-edit:hover .ps-code { transform: none; filter: brightness(.96); }
.ps-cell.can-edit:hover { background: #F5F7FB; }
.ps-lg-i .ps-code { width: auto; min-width: 38px; height: 24px; padding: 0 8px; }
.ps-lg-today { border-radius: 8px; background: linear-gradient(160deg, #1B4384, #0E2752); }
.ps-gname { display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 0.9rem; font-size: 0.82rem; letter-spacing: 0; text-transform: none; border-top: 0; border-bottom: 1px solid #EEF1F5; }
.ps-gt { font-size: 1rem; font-weight: 800; color: #101828; letter-spacing: -.01em; }
.ps-gtime { font-size: 0.74rem; font-weight: 700; color: #475467; background: rgba(255,255,255,.8); border: 1px solid #E3E8EF; border-radius: 999px; padding: 2px 9px; font-variant-numeric: tabular-nums; }
.ps-gname small { font-size: 0.82rem; font-weight: 600; color: #667085; }
.ps-gcount { position: sticky; right: 0.9rem; margin-left: auto; font-size: 0.76rem; font-weight: 600; color: #98A2B3; white-space: nowrap; }
.ps-gic { width: 30px; height: 30px; border-radius: 10px; box-shadow: 0 3px 8px rgba(16,37,68,.15); }
.ps-gic .ic { width: 16px; height: 16px; }
.ps-g-day .ps-gic { background: linear-gradient(160deg, #F59E0B, #D97706); }
.ps-g-night .ps-gic { background: linear-gradient(160deg, #6366F1, #4338CA); }
.ps-g-admin .ps-gic { background: linear-gradient(160deg, #64748B, #475569); }
.ps-g-phleb .ps-gic { background: linear-gradient(160deg, #F43F5E, #E11D48); }
.ps-g-day .ps-av { background: #FEF3DC; color: #B45309; }
.ps-g-night .ps-av { background: #E8E9FD; color: #4338CA; }
.ps-g-phleb .ps-av { background: #FFE4E9; color: #BE123C; }
.ps-who { padding: 0.4rem 0.75rem; }
.ps-rank { display: inline-block; font-size: 0.6rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 2px 5px; border-radius: 5px; background: #12305F; color: #fff; margin-right: 6px; vertical-align: 2px; }
.ps-add { margin: 0.5rem 0.75rem 0.6rem; }
.ps-hero { padding: 1.2rem 1.3rem; }
.ps-tt { border-radius: 14px; }
.ps-tt-ic { border-radius: 12px; box-shadow: 0 4px 10px rgba(0,0,0,.2); }
.ps-tt-ic { background: linear-gradient(160deg, #22C55E, #15803D); } .ps-tt-ic.is-t { background: linear-gradient(160deg, #3B82F6, #1D4ED8); } .ps-tt-ic.is-off { background: linear-gradient(160deg, #F59E0B, #B45309); } .ps-tt-ic.is-oc { background: linear-gradient(160deg, #FB7185, #E11D48); }
@media (max-width: 700px) {
  .ps-headcard, .ps-group { border-radius: 14px; margin-bottom: 10px; }
  .ps-day { margin: 4px 2px; padding: 0.4rem 0; border-radius: 10px; }
  .ps-dnum { font-size: 1.1rem; }
  .ps-cell { padding: 3px 2px; }
  .ps-code { height: 28px; font-size: 0.64rem; padding: 0 2px; border-radius: 7px; letter-spacing: 0; }
  .ps-gname { padding: 0.6rem 0.7rem; gap: 0.45rem; }
  .ps-gt { font-size: 0.92rem; }
  .ps-gname small, .ps-gcount { display: none; }
  .ps-gic { width: 26px; height: 26px; }
  .ps-rank { font-size: 0.55rem; padding: 1px 4px; margin-right: 4px; }
  .ps-who { padding: 0.35rem 0.5rem; }
}

/* Update 404: review a new schedule file before it is applied */
.ps-merge { max-width: 560px; width: 100%; }
.ps-mg-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 0.5rem; margin: 0.4rem 0 0.8rem; }
.ps-mg-st { border-radius: 12px; background: #F2F5FA; padding: 0.55rem 0.7rem; display: flex; flex-direction: column; }
.ps-mg-st b { font-size: 1.35rem; font-weight: 800; color: #101828; line-height: 1.1; }
.ps-mg-st small { font-size: 0.74rem; font-weight: 700; color: #667085; }
.ps-mg-st.is-ok { background: #EAF6EE; } .ps-mg-st.is-ok b { color: #166534; }
.ps-mg-st.is-warn { background: #FDF1DC; } .ps-mg-st.is-warn b { color: #92400E; }
.ps-mg-box { border: 1px solid #E3E8EF; border-radius: 12px; padding: 0.6rem 0.75rem; margin-bottom: 0.6rem; font-size: 0.88rem; display: flex; flex-direction: column; gap: 0.3rem; }
.ps-mg-box.is-warn { border-color: #F3D69C; background: #FFFBF2; }
.ps-mg-box summary { cursor: pointer; }
.ps-mg-row { display: grid; grid-template-columns: 96px 1fr auto; align-items: center; gap: 0.5rem; padding: 3px 0; border-top: 1px solid #F1F3F6; }
.ps-mg-d { color: #667085; font-size: 0.8rem; }
.ps-mg-ch { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.78rem; color: #667085; }
.ps-mg-ch .ps-code { width: auto; min-width: 34px; height: 24px; padding: 0 7px; font-size: 0.72rem; }
.ps-mg-ar { color: #98A2B3; }
.ps-mg-off { font-size: 0.72rem; font-weight: 700; color: #98A2B3; min-width: 34px; text-align: center; }
.ps-mg-pick { display: flex; align-items: center; gap: 0.45rem; font-weight: 600; min-height: 36px; }
@media (max-width: 500px) { .ps-mg-row { grid-template-columns: 1fr auto; } .ps-mg-d { grid-column: 1 / -1; } }
.ps-edit .ps-mg-pick input { width: 18px; height: 18px; flex: none; margin: 0; }

/* Update 405: Dept Schedule tabs (Patrol, Investigations) */
.ps-tabs { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 0.75rem; background: #fff; border: 1px solid #E3E8EF; border-radius: 14px; box-shadow: 0 1px 2px rgba(16,37,68,.04), 0 4px 12px rgba(16,37,68,.05); }
.ps-tab { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 40px; padding: 0 1.05rem; border: 0; border-radius: 10px; background: transparent; font: inherit; font-weight: 700; font-size: 0.92rem; color: #475467; cursor: pointer; }
.ps-tab .ic { width: 16px; height: 16px; stroke: currentColor; }
.ps-tab:hover { background: #F2F5FA; color: #12305F; }
.ps-tab.on { background: linear-gradient(160deg, #1B4384, #0E2752); color: #fff; box-shadow: 0 4px 12px rgba(14,39,82,.25); }
@media (max-width: 700px) { .ps-tabs { display: flex; } .ps-tab { flex: 1; justify-content: center; } }

/* Update 406: Admin tab has no on-call tile */
.ps-today.no-oc { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 700px) { .ps-today.no-oc { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ps-tabs .ps-tab { padding: 0 0.5rem; font-size: 0.86rem; } }
@media (max-width: 700px) {
  .ps-today.no-oc .ps-tt-ic { display: none; }
  .ps-today.no-oc .ps-tt small { white-space: normal; overflow: visible; line-height: 1.2; }
}

/* Update 407: On call now card, handoff arrows, name cards with Call and Text */
.ps-oncall { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0.75rem; margin-bottom: 0.75rem; }
.ps-ocp { position: relative; background: #fff; border: 1px solid #E3E8EF; border-radius: 16px; padding: 0.9rem 1rem 1rem; box-shadow: 0 1px 2px rgba(16,37,68,.04), 0 6px 18px rgba(16,37,68,.06); overflow: hidden; }
.ps-ocp::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 5px; background: linear-gradient(180deg, #FB7185, #E11D48); }
.ps-ocp-det::before { background: linear-gradient(180deg, #818CF8, #4338CA); }
.ps-ocp-l { display: flex; align-items: center; gap: 0.5rem; font-size: 0.74rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #9F1239; }
.ps-ocp-det .ps-ocp-l { color: #3730A3; }
.ps-ocp-ic { width: 28px; height: 28px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(160deg, #FB7185, #E11D48); }
.ps-ocp-det .ps-ocp-ic { background: linear-gradient(160deg, #818CF8, #4338CA); }
.ps-ocp-ic .ic { width: 15px; height: 15px; stroke: #fff; }
.ps-ocp-l em { margin-left: auto; font-style: normal; font-size: 0.68rem; letter-spacing: .06em; color: #166534; background: #E2F4E8; border-radius: 999px; padding: 2px 8px; }
.ps-ocp-name { display: block; margin: 0.45rem 0 0.1rem; padding: 0; border: 0; background: none; font: inherit; font-size: 1.5rem; font-weight: 800; letter-spacing: -.01em; color: #101828; cursor: pointer; text-align: left; }
.ps-ocp-name small { font-size: 0.9rem; font-weight: 700; color: #667085; }
.ps-ocp-name:hover { color: #12305F; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.ps-ocp-when { font-size: 0.86rem; color: #475467; font-weight: 600; }
.ps-ocp-acts { display: flex; gap: 0.5rem; margin-top: 0.7rem; flex-wrap: wrap; }
.ps-call { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; min-height: 44px; padding: 0 1.1rem; border-radius: 12px; font-weight: 700; text-decoration: none; flex: 1; }
.ps-call .ic { width: 17px; height: 17px; stroke: currentColor; }
.ps-ocp-nophone, .ps-ocp-none { font-size: 0.84rem; color: #98A2B3; font-weight: 600; }
.ps-ocp-none { margin-top: 0.6rem; }
.ps-ocd.is-hand span { font-weight: 700; }
.ps-ocd span i { font-style: normal; color: #E11D48; margin-right: 2px; }
.ps-ocd.is-today { background: #FFE4E9; }
.ps-ocd.is-today span { color: #881337; font-weight: 800; }
.ps-ocd[role="button"] { cursor: pointer; }
.ps-ocd[role="button"]:hover { background: #FFE4E9; }
.ps-who[role="button"] { cursor: pointer; }
.ps-who[role="button"]:hover { background: #F2F5FA; }
.ps-pc { max-width: 420px; width: 100%; }
.ps-pc-top { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.9rem; }
.ps-pc-top h3 { margin: 0; font-size: 1.3rem; }
.ps-pc-top p { margin: 0.1rem 0 0; }
.ps-pc-av { width: 52px; height: 52px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(160deg, #1B4384, #0E2752); color: #fff; font-size: 1.3rem; font-weight: 800; }
.ps-pc-acts { display: flex; gap: 0.6rem; margin-bottom: 0.8rem; }
.ps-pc-acts .ps-call { min-height: 52px; font-size: 1.02rem; }
.ps-pc-none { color: #667085; font-size: 0.9rem; margin-bottom: 0.8rem; }
.ps-pc-more { display: flex; flex-direction: column; gap: 0.4rem; }
.ps-pc-more .btn { justify-content: flex-start; }
.ps-pc-more .btn .ic, .ps-pc .rr-btns .ic { width: 16px; height: 16px; stroke: currentColor; vertical-align: -3px; }
@media (max-width: 700px) { .ps-oncall { grid-template-columns: 1fr; gap: 0.6rem; } .ps-ocp-name { font-size: 1.35rem; } }

/* Update 408: Christmas banner a little smaller, plus the small Firearms training banner */
.anb { padding: 1rem 1.2rem 0.95rem; gap: 0.6rem 1.2rem; }
.anb-title { font-size: clamp(1.25rem, 3vw, 1.9rem); margin: 0.25rem 0 0.55rem; }
.anb-chip { font-size: 0.8rem; padding: 0.34rem 0.7rem; }
.anb-cal { min-width: 88px; padding: 0.45rem 0.75rem 0.5rem; }
.anb-d { font-size: 2.1rem; }
.anb-note { font-size: 0.85rem; padding-top: 0.6rem; }
.fab { display: flex; align-items: center; gap: 0.9rem; width: 100%; margin: 0 0 1rem; padding: 0.7rem 0.9rem; border-radius: 16px; cursor: pointer; text-align: left; font: inherit; color: #fff;
  background: linear-gradient(100deg, #10161F 0%, #1A2230 100%); border: 1px solid rgba(255, 255, 255, 0.10); border-left: 4px solid #F28C28;
  box-shadow: 0 6px 18px rgba(5, 8, 15, 0.28); transition: transform 0.15s ease, box-shadow 0.15s ease; }
.fab:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(5, 8, 15, 0.38); }
.fab-cal { flex: 0 0 auto; display: grid; justify-items: center; align-content: center; width: 58px; height: 56px; border-radius: 12px; background: rgba(242, 140, 40, 0.14); border: 1px solid rgba(242, 140, 40, 0.45); }
.fab-cal span { font-size: 0.66rem; font-weight: 900; letter-spacing: 0.2em; text-transform: uppercase; color: #F7A54A; }
.fab-cal b { font-family: "Orbitron", var(--display); font-size: 1.05rem; line-height: 1.15; white-space: nowrap; }
.fab-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.fab-k { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: #F7A54A; }
.fab-t { font-weight: 800; font-size: 1rem; line-height: 1.25; margin: 0.1rem 0; }
.fab-s { font-size: 0.8rem; color: rgba(255, 255, 255, 0.72); }
.fab-go { flex: 0 0 auto; font-size: 0.8rem; font-weight: 800; padding: 0.45rem 0.8rem; border-radius: 999px; background: #F28C28; color: #10161F; white-space: nowrap; }
.fab-go span { font-size: 1rem; margin-left: 0.15rem; }
@media (max-width: 640px) {
  .anb { padding: 0.95rem 0.9rem; }
  .anb-title { font-size: 1.2rem; }
  .anb-d { font-size: 1.3rem; }
  .anb-chip { font-size: 0.74rem; padding: 0.3rem 0.6rem; }
  .anb-chips { gap: 0.35rem; }
  .anb-note { font-size: 0.8rem; }
  .fab { flex-wrap: wrap; gap: 0.6rem 0.75rem; }
  .fab-go { flex-basis: 100%; text-align: center; }
}

/* Update 409: RSVP on the banner, and the RSVP list on the Announcements page */
.anb.has-rsvp { grid-template-areas: "head cal" "note note" "rsvp rsvp"; }
.anb-rsvp { grid-area: rsvp; display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.9rem; padding: 0.7rem 0.8rem; border-radius: 14px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(246, 196, 83, 0.35); cursor: default; }
.anb-rsvp-q { font-weight: 800; color: var(--anb-k); }
.anb-rsvp-guest { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.88rem; font-weight: 700; cursor: pointer; }
.anb-rsvp-guest input { width: 18px; height: 18px; accent-color: #1E9E5A; }
.anb-rsvp-btns { display: inline-flex; gap: 0.5rem; margin-left: auto; }
.anb-rsvp-btn { font: inherit; font-size: 0.85rem; font-weight: 800; padding: 0.45rem 0.95rem; border-radius: 999px; cursor: pointer; border: 1px solid rgba(255, 255, 255, 0.25); color: #fff; background: transparent; }
.anb-rsvp-btn.yes { background: #1E9E5A; border-color: #1E9E5A; }
.anb-rsvp-btn:disabled { opacity: 0.6; }
.anb-rsvp-me { display: inline-flex; align-items: center; gap: 0.45rem; }
.anb-rsvp-me .ic { width: 18px; height: 18px; color: #5FE0A0; }
.anb-rsvp-g { color: var(--anb-k); font-weight: 700; }
.anb-rsvp.is-done .anb-rsvp-btn { margin-left: auto; }
.anb-rsvp-see { font: inherit; font-size: 0.8rem; font-weight: 700; color: var(--anb-k); background: none; border: 0; text-decoration: underline; cursor: pointer; padding: 0; }
.ann-rsvps { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.ann-rsvp-sum { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.ann-rsvp-sum span { padding: 6px 12px; border-radius: 999px; background: var(--surface); font-size: 0.86rem; }
.ann-rsvp-sum .is-total { background: #1E9E5A; color: #fff; }
.ann-rsvp-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 10px; }
.ann-rsvp-list:empty { display: none; }
.ann-rsvp-col h4 { margin-bottom: 6px; }
.ann-rsvp-col ul { list-style: none; }
.ann-rsvp-col li { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 0.92rem; }
.ann-rsvp-col em { font-style: normal; font-weight: 700; color: #1E7A47; }
@media (max-width: 640px) {
  .anb.has-rsvp { grid-template-areas: "cal" "head" "note" "rsvp"; }
  .anb-rsvp-btns { margin-left: 0; width: 100%; }
  .anb-rsvp-btns .anb-rsvp-btn { flex: 1; }
}

/* Update 410: DEPT Schedule banner, same size as Departments, written as Scott asked */
.csb-sched .csb-title { text-transform: none; }

/* Update 411: Christmas banner on light blue. Same layout and font, bright white snow, red and green bar (no yellow) */
.anb-holiday { --anb-c1: #FF8FA0; --anb-c2: #7FE0AE; --anb-k: #B3122E; --anb-bar: linear-gradient(90deg, #D4213D 0 50%, #1E9E5A 50%);
  --anb-title: linear-gradient(90deg, #C8102E 0%, #9B1B4A 50%, #0E7C3A 100%);
  background: linear-gradient(160deg, #DCEEFF 0%, #B9DBFF 55%, #A3CEFA 100%); color: #10284A; border-color: rgba(16, 40, 74, 0.15);
  box-shadow: 0 10px 28px rgba(30, 80, 150, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.7); }
.anb-holiday .anb-glow { opacity: 0.35; }
.anb-holiday .anb-snow i { background: #fff; opacity: 1; box-shadow: 0 0 2px rgba(20, 70, 140, 0.55), 0 0 6px rgba(255, 255, 255, 0.9); }
.anb-holiday .anb-chip { background: rgba(255, 255, 255, 0.6); border-color: rgba(16, 40, 74, 0.18); color: #10284A; }
.anb-holiday .anb-chip .ic { color: #B3122E; }
.anb-holiday .anb-cal { background: rgba(255, 255, 255, 0.55); border-color: rgba(16, 40, 74, 0.18); }
.anb-holiday .anb-d { color: #10284A; }
.anb-holiday .anb-w { color: rgba(16, 40, 74, 0.7); }
.anb-holiday .anb-note { color: #1F3A60; border-top-color: rgba(16, 40, 74, 0.15); }
.anb-holiday .anb-rsvp { background: rgba(255, 255, 255, 0.55); border-color: rgba(16, 40, 74, 0.2); }
.anb-holiday .anb-rsvp-btn.ghost { color: #10284A; border-color: rgba(16, 40, 74, 0.35); background: rgba(255, 255, 255, 0.5); }
.anb-holiday .anb-rsvp-me { color: #10284A; }
.anb-holiday .anb-rsvp-me .ic { color: #1E9E5A; }
.anb-holiday .anb-rsvp-guest input { accent-color: #1E9E5A; }
.anb-holiday .anb-snow i { width: calc(var(--s) + 2px); height: calc(var(--s) + 2px); }
/* Candy-cane frame so the light blue stands apart from the page */
.anb-holiday { border: 7px solid transparent;
  background: linear-gradient(160deg, #DCEEFF 0%, #B9DBFF 55%, #A3CEFA 100%) padding-box,
    repeating-linear-gradient(45deg, #D4213D 0 9px, #FFFFFF 9px 18px) border-box;
  box-shadow: 0 0 0 1px rgba(150, 20, 40, 0.35), 0 10px 28px rgba(30, 80, 150, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.7); }

/* Update 412: Firearms banner in iMessage blue instead of orange */
.fab { border-left-color: #0A84FF; }
.fab-cal { background: rgba(10, 132, 255, 0.16); border-color: rgba(10, 132, 255, 0.5); }
.fab-cal span, .fab-k { color: #5AB0FF; }
.fab-go { background: #0A84FF; color: #fff; }

/* Update 416: What's New */
button.site-version { display: block; width: 100%; text-align: left; background: none; border: 0; font: inherit; font-size: 0.72rem; cursor: pointer; }
button.site-version:hover { color: #fff; text-decoration: underline; }
.nav-badge.wn-new { padding: 0 0.5rem; font-size: 0.64rem; letter-spacing: 0.04em; text-transform: uppercase; background: #0A84FF; }
.wn-day { margin-bottom: 1rem; }
.wn-date { font-size: 0.8rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.4rem; }
.wn-list { list-style: none; }
.wn-list li { display: flex; gap: 0.6rem; padding: 0.7rem 0; border-bottom: 1px solid var(--border); line-height: 1.4; }
.wn-list li:last-child { border-bottom: 0; }
.wn-list li::before { content: ""; flex: 0 0 8px; height: 8px; margin-top: 0.5rem; border-radius: 50%; background: var(--primary); opacity: 0.5; }
.wn-list li.is-new::before { background: #0A84FF; opacity: 1; }
.wn-pill { display: inline-block; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; background: #0A84FF; padding: 0.1rem 0.45rem; border-radius: 999px; vertical-align: 1px; }
.wn-who { display: inline-block; font-size: 0.72rem; font-weight: 700; color: var(--primary); background: var(--primary-soft); padding: 0.1rem 0.5rem; border-radius: 999px; margin-left: 0.2rem; }

/* Update 417: on a phone the whole week fits the screen, so the schedule cards are not cut off on the right */
@media (max-width: 700px) {
  .ps-table { --who: 96px; min-width: calc(var(--who) + var(--n) * 33px); }
  .ps-row { grid-template-columns: var(--who) repeat(var(--n), minmax(0, 1fr)); }
  .ps-who { padding: 0.35rem 0.45rem; font-size: 0.86rem; }
  .ps-wt b { white-space: normal; overflow-wrap: anywhere; line-height: 1.2; }
  .ps-wt .ps-cs { display: block; font-size: 0.72rem; font-weight: 600; }
  .ps-oc-h { font-size: 0.54rem !important; letter-spacing: -0.01em !important; white-space: normal; line-height: 1.25; }
  .ps-ocrow .ps-who { padding-left: 0.4rem; padding-right: 0.3rem; }
  .ps-oc-h svg { display: none; }
  .ps-code { display: block; text-align: center; line-height: 28px; text-overflow: ellipsis; }
  .ps-rank { font-size: 0.54rem; padding: 1px 3px; margin-right: 3px; }
  .ps-day { margin: 4px 1px; padding: 0.4rem 0 0.35rem; }
  .ps-dow, .ps-mon { font-size: 0.58rem; letter-spacing: 0.02em; }
  .ps-dnum { font-size: 1.05rem; }
  .ps-cell { padding: 3px 1px; }
  .ps-code { height: 28px; padding: 0 1px; border-radius: 7px; font-size: 0.6rem; letter-spacing: 0; overflow: hidden; white-space: nowrap; }
  .ps-gname { padding: 0.6rem 0.7rem; }
}

/* Update 419: back arrow in the top bar (most useful in the home screen app, which has no browser back button) */
#top-back { color: #F1F3F5; }
#top-back[hidden] { display: none !important; }

/* Update 420: green bubble for new What's New lines */
.nav-badge.wn-new { padding: 0; font-size: 0.72rem; letter-spacing: 0; text-transform: none; background: #1F9D55; }
.nav-group-wn { display: inline-flex; align-items: center; justify-content: center; min-width: 1.2rem; height: 1.2rem; padding: 0 0.3rem; margin-left: 0.3rem; border-radius: 999px; background: #1F9D55; color: #fff; font-size: 0.66rem; font-weight: 800; letter-spacing: 0; }
.nav-group-wn[hidden] { display: none; }
#menu-btn.has-gdot::after { content: ''; position: absolute; top: 6px; right: 6px; width: 10px; height: 10px; border-radius: 50%; background: #1F9D55; box-shadow: 0 0 0 2px #3A3F47; }
.wn-pill { background: #1F9D55; }
.wn-list li.is-new::before { background: #1F9D55; }

/* Update 421: a bigger, easier to see Back button in the top bar */
.top-back { display: inline-flex; align-items: center; gap: 0.2rem; flex: none; height: 36px; padding: 0 0.85rem 0 0.55rem; margin-right: 0.35rem; border-radius: 999px; border: 0; cursor: pointer;
  background: #0A84FF; color: #fff; font: inherit; font-size: 0.92rem; font-weight: 800; box-shadow: 0 3px 10px rgba(10, 132, 255, 0.35); }
.top-back .ic { width: 20px; height: 20px; stroke-width: 2.6; }
.top-back:hover { background: #2B95FF; }
.top-back:active { transform: scale(0.96); }
#top-back { color: #fff; }
@media (max-width: 640px) {
  .top-back { height: 34px; padding: 0 0.7rem 0 0.4rem; font-size: 0.86rem; margin-right: 0.15rem; }
  .topbar:has(.top-back:not([hidden])) #top-home { display: none !important; }
  .topbar:has(.top-back:not([hidden])) #page-title { font-size: 1.05rem; }
}
@media (max-width: 640px) {
  .topbar:has(.top-back:not([hidden])) #page-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* The Back button names the page it goes to. The old in-page "Back" links only show when there is no step to go back to. */
.top-back span { max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.has-back .pg-back { display: none !important; }
@media (max-width: 640px) { .top-back span { max-width: 6.5rem; } }

/* Update 422: Patrol "On duty now" tile */
.ps-tt-ic.is-duty { background: linear-gradient(160deg, #22C55E, #15803D); }
.ps-tt-duty { position: relative; }
.ps-tt-duty::after { content: ""; position: absolute; top: 10px; right: 10px; width: 9px; height: 9px; border-radius: 50%; background: #4ADE80; box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7); animation: ps-live 1.8s ease-out infinite; }
@keyframes ps-live { 0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7); } 100% { box-shadow: 0 0 0 9px rgba(74, 222, 128, 0); } }
@media (prefers-reduced-motion: reduce) { .ps-tt-duty::after { animation: none; } }

/* Update 425: on a phone the on-call names wrap instead of cutting off, and a hand-off day stacks both names with a small arrow between */
@media (max-width: 700px) {
  .ps-ocd { padding: 0.3rem 1px; gap: 0; }
  .ps-ocd span { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; line-height: 1.12; font-size: 0.62rem; text-align: center; }
  .ps-ocd.is-hand { padding-left: 0; padding-right: 0; }
  .ps-ocd.is-hand span { font-size: 0.54rem; letter-spacing: -0.03em; overflow-wrap: normal; word-break: normal; }
  .ps-ocd.is-hand span i { display: block; margin: 1px 0; font-size: 0.6rem; line-height: 1; transform: rotate(90deg); }
}

/* Update 428: Directory photos */
.dir-row { align-items: center; }
.dir-av { position: relative; flex: none; width: 48px; height: 48px; padding: 0; border-radius: 50%; overflow: hidden; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--border), 0 2px 6px rgba(16,37,68,.15);
  background: #E6ECF6; color: #1F3B63; font: inherit; font-weight: 800; font-size: 0.9rem; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; margin-right: 0.75rem; }
.dir-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.dir-av.no-img img { display: none; }
.dir-av.is-none { cursor: default; }
.dir-av.is-big { width: 72px; height: 72px; font-size: 1.2rem; }
.dir-lb { display: flex; align-items: center; justify-content: center; padding: 1rem; }
.dir-lb-card { background: var(--card); border-radius: 18px; padding: 1rem; max-width: 360px; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 0.35rem; text-align: center; box-shadow: 0 20px 50px rgba(0,0,0,.35); }
.dir-lb-card img { width: 100%; max-height: 60vh; object-fit: contain; border-radius: 12px; background: #fff; margin-bottom: 0.4rem; }
.dir-lb-card small { color: var(--muted); }
.dir-lb-card .btn { margin-top: 0.5rem; }
.dir-ph-card { margin-top: 1rem; }
.dir-ph-now { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.8rem; }
.dir-ph-now img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; }
.dir-ph-now div { display: flex; flex-direction: column; }
.dir-ph-now small { color: var(--muted); }
@media (max-width: 640px) { .dir-av { width: 42px; height: 42px; margin-right: 0.6rem; } }
.dir-row { grid-template-columns: auto minmax(160px, 1fr) minmax(0, 2fr) auto; }
.dir-av { margin-right: 0; }
@media (max-width: 600px) { .dir-row { grid-template-columns: auto 1fr auto; } .dir-row .dir-contact { grid-column: 2 / -1; grid-row: 2; } }

/* Update 429: officer cut-out on the Firearms banner, standing on the bottom edge and leaning out the top */
.fab { position: relative; overflow: visible; margin-top: 1.6rem; }
.fab-guy { flex: 0 0 auto; align-self: flex-end; height: 104px; width: auto; margin: -2.2rem 0 -0.7rem; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.45)); pointer-events: none; }
@media (max-width: 640px) {
  .fab { overflow: hidden; margin-top: 0; }
  .fab-guy { position: absolute; right: 0.3rem; top: 0.35rem; height: 92px; margin: 0; -webkit-mask-image: linear-gradient(#000 62%, transparent 96%); mask-image: linear-gradient(#000 62%, transparent 96%); }
  .fab-txt { padding-right: 76px; position: relative; z-index: 1; }
  .fab-k { font-size: 0.58rem; letter-spacing: 0.14em; }
  .fab-t { font-size: 0.9rem; }
  .fab-s { font-size: 0.72rem; }
  .fab-go { position: relative; z-index: 1; }
}

/* Update 430: crossing guard time card */
body.guard-mode .bottom-nav, body.guard-mode #top-bell, body.guard-mode #top-search, body.guard-mode #top-csv, body.guard-mode .nav-find,
body.guard-mode #site-version, body.guard-mode .user-menu a[data-page="profile"], body.guard-mode .nav-group-title, body.guard-mode .nav-group-head { display: none !important; }
.cgt-head .cg-period { margin-bottom: 0.4rem; }
.cgt-total { display: flex; align-items: baseline; justify-content: center; gap: 0.4rem; margin: 0.4rem 0 0.2rem; }
.cgt-total b { font-size: 2.6rem; line-height: 1; color: #0A84FF; font-family: "Orbitron", var(--display); }
.cgt-total span { font-weight: 700; color: var(--muted); }
.cgt-rule { text-align: center; margin: 0.2rem 0 0; }
.cgt-day { display: grid; grid-template-columns: 3.4rem 1fr; gap: 0.3rem 0.6rem; align-items: center; padding: 0.55rem 0; border-top: 1px solid var(--border, #E3E8EF); }
.cgt-week .cg-h + .cgt-day { border-top: 0; }
.cgt-date { display: flex; flex-direction: column; line-height: 1.15; }
.cgt-date span { font-size: 0.78rem; color: var(--muted); }
.cgt-btns { display: grid; grid-template-columns: 1fr 1fr 2.6rem; gap: 0.4rem; }
.cgt-sh, .cgt-more { font: inherit; font-weight: 700; font-size: 0.9rem; padding: 0.6rem 0.3rem; border-radius: 12px; border: 1.5px solid #C9D3E0; background: #fff; color: #31415A; cursor: pointer; }
.cgt-sh.on { background: #0A84FF; border-color: #0A84FF; color: #fff; }
.cgt-more.on { border-color: #0A84FF; color: #0A84FF; }
.cgt-note { grid-column: 2; color: #B42318; font-weight: 700; font-size: 0.78rem; }
.cgt-other { grid-column: 2; }
.cgt-other label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--muted); }
.cgt-other input { width: 5.5rem; }
.cgt-day.is-future .cgt-date { opacity: 0.6; }
.cgt-status { padding: 0.6rem 0.8rem; border-radius: 12px; background: #FFF6E5; color: #7A4B00; font-weight: 600; font-size: 0.9rem; }
.cgt-status.is-signed { background: #E7F6EC; color: #176B2C; }
.cgt-cert { font-size: 0.85rem; color: var(--muted); margin: 0.7rem 0 0.4rem; }
.cgt-sign .chips { margin-bottom: 0.5rem; }
.cgt-mysig { margin: 0.6rem 0; padding: 0.4rem; border-bottom: 1.5px solid #31415A; min-height: 3rem; display: flex; align-items: flex-end; }
.cgt-mysig img { max-height: 70px; max-width: 100%; }
.cgt-typed { font-family: "Snell Roundhand", "Segoe Script", "Brush Script MT", cursive; font-size: 1.7rem; color: #0B1E3A; }
.cgt-msg { margin: 0.6rem 0 0; font-weight: 600; color: #0A64C8; min-height: 1em; }
.sigpad { position: relative; margin-bottom: 0.6rem; }
.sigpad canvas { display: block; width: 100%; height: 130px; border: 1.5px dashed #9AA8BC; border-radius: 12px; background: #fff; }
.sigpad-hint { position: absolute; left: 1rem; bottom: 0.7rem; color: #9AA8BC; pointer-events: none; font-size: 0.9rem; }
.sigpad-clear { position: absolute; right: 0.4rem; top: 0.4rem; }
.cgt-row { display: grid; grid-template-columns: 1fr auto auto auto; gap: 0.5rem; align-items: center; padding: 0.5rem 0; border-top: 1px solid var(--border, #E3E8EF); }
.cgt-row small { display: block; color: var(--muted); font-size: 0.78rem; }
.cgt-row.cgt-acct { grid-template-columns: 1fr auto; }
.cgt-hrs { font-weight: 800; white-space: nowrap; }
.cgt-chip { display: inline-block; font-style: normal; font-size: 0.7rem; font-weight: 800; padding: 0.15rem 0.5rem; border-radius: 999px; background: #EEF1F5; color: #4A5A70; white-space: nowrap; }
.cgt-chip.ok { background: #E7F6EC; color: #176B2C; }
.cgt-chip.warn { background: #FFF1E0; color: #9A4A00; }
.cgt-chip.off { background: #F3F4F6; color: #8A94A3; }
@media (max-width: 640px) {
  .cgt-row { grid-template-columns: 1fr auto auto; }
  .cgt-row > .cgt-chip { grid-column: 1; justify-self: start; grid-row: 2; }
}

/* Update 432: note with extra hours */
.cgt-notel { flex-direction: column; align-items: stretch !important; gap: 0.25rem !important; margin-top: 0.5rem; }
.cgt-notel textarea { width: 100%; font: inherit; font-size: 0.9rem; padding: 0.5rem 0.6rem; border-radius: 10px; border: 1.5px solid #C9D3E0; resize: vertical; }
.cgt-fmnote { color: #0A64C8 !important; }

/* Update 433: test account view switch */
.nav-link.nav-testswitch { color: #5AB0FF !important; border: 1px dashed rgba(90, 176, 255, 0.55); border-radius: 10px; margin: 0.3rem 0; }
/* Update 433: guards' menu shows only their two pages (no section headers or New Issue) */
body.guard-mode .nav-group, body.guard-mode .nav-new, body.guard-mode .nav-fav-head { display: none !important; }

/* Update 435: Crossing Guard Coverage */
.sec-cgc .cgc-open { margin-left: 0.4rem; font-size: 0.72rem; font-weight: 800; padding: 0.12rem 0.5rem; border-radius: 999px; background: #FFF1E0; color: #9A4A00; }
.cgc-head .co-hint { margin: 0.6rem 0; }
.cgc-item { display: grid; grid-template-columns: 6.2rem 1fr auto; gap: 0.6rem; align-items: center; padding: 0.65rem 0.7rem; margin-top: 0.5rem; border-radius: 12px; border: 1.5px solid #E3E8EF; background: #fff; }
.cgc-item.is-open { border-color: #F5B76B; }
.cgc-item.is-mine { border-color: #34A853; background: #F1FAF3; }
.cgc-item.is-taken { opacity: 0.75; }
.cgc-when { display: flex; flex-direction: column; line-height: 1.2; }
.cgc-when span, .cgc-where small { font-size: 0.78rem; color: var(--muted); }
.cgc-where { display: flex; flex-direction: column; min-width: 0; }
.cgc-note { color: #0A64C8 !important; }
.cgc-claim { display: flex; align-items: center; gap: 0.45rem; font-weight: 700; font-size: 0.88rem; white-space: nowrap; cursor: pointer; }
.cgc-claim input { width: 1.3rem; height: 1.3rem; accent-color: #0A84FF; }
.cgc-by { font-size: 0.82rem; font-weight: 700; color: #176B2C; }
.cgc-dates { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.cgc-date { display: inline-flex; gap: 0.25rem; align-items: center; }
.cgc-form .chips small { font-weight: 500; opacity: 0.8; margin-left: 0.25rem; }
.cgc-adm { grid-template-columns: 1fr auto auto; }
.cgt-covered { display: flex; gap: 0.7rem; align-items: flex-start; padding: 0.8rem 0.9rem; margin-bottom: 1rem; border-radius: 14px; background: #E7F6EC; color: #176B2C; border: 1px solid #B9E2C4; }
.cgt-covered .ic { flex: 0 0 auto; width: 22px; height: 22px; margin-top: 0.1rem; }
.cgt-covered small { display: block; color: #2F6B40; margin-top: 0.2rem; }
@media (max-width: 640px) {
  .cgc-item { grid-template-columns: 5.4rem 1fr; }
  .cgc-item > .cgc-claim, .cgc-item > .cgc-by { grid-column: 1 / -1; }
}

/* Update 436: each posted day has a visible remove button */
.cgc-date { display: inline-flex; align-items: center; gap: 0; border: 1.5px solid #C9D3E0; border-radius: 12px; background: #fff; overflow: hidden; }
.cgc-date input[type="date"] { width: auto !important; min-width: 0; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
.cgc-x { flex: 0 0 auto; align-self: stretch; width: 2.4rem; border: 0; border-left: 1.5px solid #C9D3E0; background: #FDECEC; color: #B42318; font-size: 1.35rem; font-weight: 700; line-height: 1; cursor: pointer; }
.cgc-x:hover { background: #F9D5D5; }

/* Update 437: Post for officers greys out once posted */
.cgc-post:disabled { opacity: 1; cursor: default; }
.cgc-post.is-done, .cgc-post.is-done:hover { background: #E3E8EF !important; border-color: #E3E8EF !important; color: #5B6B80 !important; box-shadow: none !important; }
.cgc-post .ic { width: 18px; height: 18px; vertical-align: -3px; margin-right: 0.3rem; }

/* Update 438: Crossing Guard Coverage button on AFPD Schedule > Patrol */
.ps-cgc { grid-column: 1 / -1; display: flex; align-items: center; gap: 0.65rem; padding: 0.6rem 0.8rem; border-radius: 14px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); color: #fff; font: inherit; text-align: left; cursor: pointer; }
.ps-cgc:hover { background: rgba(255,255,255,.16); }
.ps-tt-ic.is-cgc { background: #D9480F; }
.ps-cgc-t { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.ps-cgc-t b { font-size: 1rem; }
.ps-cgc-t small { color: rgba(255,255,255,.75); font-size: 0.78rem; font-weight: 600; }
.ps-cgc em { font-style: normal; font-size: 0.72rem; font-weight: 800; padding: 0.15rem 0.55rem; border-radius: 999px; background: #FFE3C2; color: #8A3A00; white-space: nowrap; }
.ps-cgc-go { font-size: 1.4rem; line-height: 1; opacity: 0.8; }

/* Update 439: guards pick up shifts; FM sets who covers */
.cgt-picked { background: #E8F1FF; color: #0B4A9C; border-color: #BCD6FB; }
.cgt-picked small { color: #2D5A93; }
.cgc-adm { grid-template-columns: 1fr minmax(9rem, 14rem) auto; }
.cgc-assign { font: inherit; font-size: 0.85rem; font-weight: 700; padding: 0.35rem 0.5rem; border-radius: 10px; border: 1.5px solid #F5B76B; background: #FFF6EA; color: #8A3A00; max-width: 100%; }
.cgc-assign.is-set { border-color: #9ED2AC; background: #EEF8F1; color: #176B2C; }
@media (max-width: 640px) { .cgc-adm { grid-template-columns: 1fr auto; } .cgc-adm > .cgc-assign { grid-column: 1 / -1; grid-row: 2; } }

/* Update 440: Crossing Guard Coverage in safety-vest orange with a reflective stripe, so it stands out on navy */
.ps-cgc { position: relative; overflow: hidden; background: linear-gradient(135deg, #FF8A1F 0%, #F26A0A 100%); border: 1px solid #FFB06B; box-shadow: 0 6px 16px rgba(242, 106, 10, 0.35); }
.ps-cgc:hover { background: linear-gradient(135deg, #FF9633 0%, #F5741A 100%); }
.ps-cgc { padding-bottom: 0.95rem; }
.ps-cgc::before { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 5px; background: linear-gradient(180deg, rgba(235,240,246,.55), rgba(255,255,255,.85) 50%, rgba(220,228,238,.55)); pointer-events: none; }
.ps-cgc > * { position: relative; }
.ps-cgc .ps-tt-ic.is-cgc { background: #fff; }
.ps-cgc .ps-tt-ic.is-cgc .ic { stroke: #E25C00; }
.ps-cgc-t b { font-size: 1.05rem; font-weight: 800; letter-spacing: .01em; text-shadow: 0 1px 2px rgba(120, 40, 0, .35); }
.ps-cgc-t small { color: #FFF3E6; font-weight: 700; }
.ps-cgc em { background: #fff; color: #C2410C; box-shadow: 0 1px 3px rgba(120, 40, 0, .25); }
.ps-cgc-go { opacity: 1; }
.sec-short.sec-cgc { background: linear-gradient(135deg, #FF8A1F 0%, #F26A0A 100%); color: #fff; border-color: #FFB06B; font-weight: 800; }
.sec-short.sec-cgc .ic { stroke: #fff; }
.sec-cgc .cgc-open { background: #fff; color: #C2410C; }

/* Update 441: two-step sign-in */
.twofa { text-align: left; }
.twofa[hidden], #login-form[hidden] { display: none; }
.twofa-h { margin: 0 0 0.5rem; font-size: 1.15rem; color: #1a202c; }
.twofa-p, .twofa-steps { color: #4a5568; font-size: 0.92rem; line-height: 1.45; }
.twofa-steps { padding-left: 1.2rem; margin: 0 0 0.75rem; }
.twofa-steps li { margin-bottom: 0.5rem; }
.twofa-qr { width: 180px; max-width: 70%; margin: 0.5rem auto; background: #fff; padding: 4px; border: 1px solid #e2e8f0; border-radius: 8px; }
.twofa-qr svg { display: block; width: 100%; height: auto; }
.twofa-link { display: block; text-align: center; font-weight: 600; margin: 0.35rem 0; }
.twofa-key { font-size: 0.8rem; color: #718096; text-align: center; overflow-wrap: anywhere; }
.twofa-key code { font-size: 0.85rem; color: #1a202c; letter-spacing: 0.04em; }
.twofa-code { width: 100%; font-size: 1.5rem; letter-spacing: 0.3em; text-align: center; padding: 0.6rem; border: 1px solid #cbd5e0; border-radius: 8px; box-sizing: border-box; }
.twofa-hint { font-size: 0.8rem; color: #718096; margin: 0.35rem 0 0; }
.twofa-rem { display: flex; align-items: center; gap: 0.5rem; margin: 0.75rem 0; font-size: 0.9rem; color: #4a5568; }
.twofa-rem input { width: auto; margin: 0; }
.twofa-err { color: #c53030; font-size: 0.9rem; margin: 0.5rem 0 0; min-height: 1em; }
.twofa-back { background: none; border: none; color: #718096; cursor: pointer; font-size: 0.9rem; padding: 0.5rem 0; width: 100%; }
.twofa-codes { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; margin: 0.75rem 0; font-family: ui-monospace, Menlo, monospace; font-size: 1rem; }
.twofa-codes span { background: #f7fafc; border: 1px solid #e2e8f0; border-radius: 6px; padding: 0.4rem; text-align: center; color: #1a202c; }
.twofa .btn.full { width: 100%; margin-bottom: 0.6rem; }
.badge.tf-on { background: #e6f4ea; color: #1e7b34; }
.badge.tf-off { background: #fdecea; color: #b42318; }
.twofa-code::placeholder { letter-spacing: normal; font-size: 1rem; }

/* Update 442: phone greeting at the top of the home page, out of the black bar */
.home-greet { display: none; }
@media (max-width: 767px) {
  .home-greet:not([hidden]) { display: block; padding: 1rem 1rem 0.25rem; }
  .home-greet .hg-hi { font-size: 1rem; font-weight: 600; color: var(--muted, #5a6475); line-height: 1.2; }
  .home-greet .hg-name { font-family: var(--display); font-size: 1.6rem; font-weight: 800; color: var(--text, #111827); letter-spacing: -0.02em; line-height: 1.15; }
  .home-greet .hg-date { font-size: 0.85rem; font-weight: 600; color: var(--muted, #5a6475); margin-top: 0.15rem; }
  .topbar h1.home-title > span, .topbar h1.home-title .pt-date { display: none; }
}

/* Update 443: phone greeting just below the main banner; the top one only shows on pages without the banner */
@media (max-width: 767px) {
  .home-greet.hg-inline { display: block; padding: 0.1rem 0.25rem 0.9rem; }
  #home-greet:has(+ main .dash-banner) { display: none; }
}

/* Update 445: search a name to set who covers a crossing */
.cgc-pick { position: relative; min-width: 220px; }
.cgc-pick input.cgc-assign { width: 100%; box-sizing: border-box; -webkit-appearance: none; appearance: none; }
.cgc-pick input.cgc-assign::placeholder { color: #8A3A00; opacity: 0.85; }
.cgc-list { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px); max-height: 300px; overflow-y: auto; background: var(--card, #fff); border: 1.5px solid #cbd5e0; border-radius: 10px; box-shadow: 0 10px 28px rgba(0,0,0,0.18); padding: 0.25rem; }
.cgc-list[hidden] { display: none; }
.cgc-grp { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted, #5a6475); padding: 0.45rem 0.5rem 0.2rem; }
.cgc-opt { display: block; width: 100%; text-align: left; background: none; border: none; font: inherit; font-size: 0.92rem; padding: 0.5rem 0.6rem; border-radius: 7px; cursor: pointer; color: var(--text, #111827); }
.cgc-opt:hover, .cgc-opt:focus-visible { background: #EEF2F7; }
.cgc-opt.on { background: #EEF8F1; color: #176B2C; font-weight: 700; }
.cgc-opt small { color: var(--muted, #5a6475); font-weight: 600; margin-left: 0.3rem; }
.cgc-open { color: #8A3A00; font-weight: 700; }
.cgc-other { color: var(--primary, #1d4ed8); font-weight: 700; border-top: 1px solid #e2e8f0; border-radius: 0; margin-top: 0.2rem; }
@media (max-width: 640px) { .cgc-adm > .cgc-pick { grid-column: 1 / -1; grid-row: 2; min-width: 0; } }

/* Update 448: FM switch on each What's New line */
.wn-list li .wn-txt { flex: 1; min-width: 0; }
.wn-sw { display: inline-flex; align-items: center; gap: 0.4rem; flex-shrink: 0; cursor: pointer; align-self: flex-start; }
.wn-sw input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.wn-track { width: 40px; height: 24px; border-radius: 999px; background: #C9D1DC; position: relative; transition: background 0.15s; }
.wn-track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.25); transition: transform 0.15s; }
.wn-sw input:checked + .wn-track { background: #1F9D55; }
.wn-sw input:checked + .wn-track::after { transform: translateX(16px); }
.wn-sw input:focus-visible + .wn-track { outline: 2px solid var(--primary); outline-offset: 2px; }
.wn-swl { font-size: 0.75rem; font-weight: 700; color: var(--muted); width: 4.2rem; }

/* Update 449: email and text alert choices */
.nt-row { display: flex; align-items: flex-start; gap: 0.6rem; margin: 0.6rem 0; cursor: pointer; }
.nt-row input { width: 20px; height: 20px; margin-top: 2px; flex-shrink: 0; }
.nt-row span { display: flex; flex-direction: column; }
.nt-row small { color: var(--muted); font-size: 0.8rem; }
.nt-push { cursor: default; }
.nt-ic { width: 20px; height: 20px; flex-shrink: 0; color: var(--primary); margin-top: 2px; }
.nt-ic svg { width: 20px; height: 20px; }
.nt-push .btn { margin-top: 0.5rem; align-self: flex-start; }
.nt-on { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.4rem; font-weight: 700; color: #176B2C; }
.nt-on svg { width: 16px; height: 16px; }
.nt-btns { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.nt-how { margin-top: 0.4rem; }
.nt-wait { background: #FFF6EA; border-left: 3px solid #F26A0A; padding: 0.4rem 0.6rem; border-radius: 6px; }

/* Update 450: which phone alerts */
.nt-types { margin-top: 0.9rem; border-top: 1px solid var(--border); padding-top: 0.8rem; }
.nt-types h4 { margin: 0 0 0.2rem; font-size: 0.95rem; }
.nt-type { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.55rem 0; border-bottom: 1px solid var(--border); }
.nt-type:last-child { border-bottom: none; }
.nt-type > span { display: flex; flex-direction: column; min-width: 0; }
.nt-type small { color: var(--muted); font-size: 0.78rem; }
.nt-type .wn-swl { width: 1.8rem; }

/* Update 451: sign-ins list on Users */
.si-card summary { cursor: pointer; list-style: none; }
.si-card summary::-webkit-details-marker { display: none; }
.si-h { margin: 0.9rem 0 0.3rem; font-size: 1rem; }
.si-kind { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 0.6rem 0 0.2rem; }
.si-list { list-style: none; margin: 0; padding: 0; }
.si-list li { display: flex; justify-content: space-between; gap: 0.6rem; padding: 0.35rem 0; border-bottom: 1px solid var(--border); font-size: 0.92rem; }
.si-list li small { color: var(--muted); white-space: nowrap; }

/* Update 452: crossing guard dashboard */
.cgh-hero { background: linear-gradient(135deg, #FF8A1F 0%, #F26A0A 100%); color: #fff; border: none; position: relative; overflow: hidden; }
.cgh-hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 10px; height: 8px; background: linear-gradient(90deg, #d9dde3, #ffffff, #c4c9d0); opacity: 0.85; }
.cgh-hero .cs-kicker { color: rgba(255,255,255,0.9); }
.cgh-hero h2 { color: #fff; margin: 0.15rem 0; font-size: 1.6rem; }
.cgh-hero p { color: #fff; font-weight: 600; margin-bottom: 0.6rem; }
.cgh-h { display: flex; align-items: center; gap: 0.45rem; margin: 0 0 0.6rem; font-size: 1.05rem; }
.cgh-h svg { width: 20px; height: 20px; color: var(--primary); }
.cgh-where { font-weight: 700; margin-bottom: 0.4rem; }
.cgh-shift { display: flex; justify-content: space-between; gap: 0.75rem; padding: 0.6rem 0.75rem; border-radius: 10px; background: #EEF2F7; margin-bottom: 0.4rem; }
.cgh-shift span { text-align: right; }
.cgh-shift.is-covered { background: #E7F6EC; color: #176B2C; }
.cgh-shift.is-picked { background: #E6F0FB; color: #1B4F8A; }
.cgh-off { font-weight: 700; color: #176B2C; }
.cgh-note { display: flex; gap: 0.4rem; align-items: center; font-size: 0.9rem; margin: 0.35rem 0; color: #176B2C; }
.cgh-note svg { width: 16px; height: 16px; flex-shrink: 0; }
.cgh-big { font-size: 2rem; font-weight: 800; margin: 0; line-height: 1.1; }
.cgh-big small { font-size: 0.9rem; font-weight: 600; color: var(--muted); }
.cgh-open, .cgh-phone, .cgh-day { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; padding: 0.55rem 0; border-bottom: 1px solid var(--border); }
.cgh-open:last-of-type, .cgh-phone:last-of-type { border-bottom: none; }
.cgh-open div, .cgh-phone > div:first-child { display: flex; flex-direction: column; min-width: 0; }
.cgh-open small, .cgh-phone small { color: var(--muted); font-size: 0.82rem; }
.cgh-day span { text-align: right; color: var(--muted); }
.cgh-pbtns { display: flex; gap: 0.4rem; flex-shrink: 0; }
.cgh-sub { margin: 0.9rem 0 0.2rem; font-size: 0.9rem; }
.cgh-alert { display: flex; gap: 0.7rem; align-items: flex-start; width: 100%; text-align: left; font: inherit; padding: 0.8rem 0.9rem; margin-bottom: 1rem; border-radius: 14px; background: #FDECEA; color: #B42318; border: 1px solid #F5C2BC; cursor: pointer; }
.cgh-alert svg { width: 22px; height: 22px; flex-shrink: 0; }
.cgh-alert div { display: flex; flex-direction: column; }
.cgh-cantbtn { border-color: #F26A0A; color: #B54708; font-weight: 700; }
.cgh-post { font-size: 1.25rem; font-weight: 800; margin: 0 0 0.1rem; color: var(--text); }
.cgh-post + .cgh-where { font-weight: 600; color: var(--muted); }

/* Update 454: bright red 911 pill on the guard Dashboard */
.cgh-911 { display: block; margin: 0.9rem auto 0.2rem; padding: 0.75rem 1.2rem; border-radius: 999px; background: #E11D2E; color: #fff !important; font-weight: 800; font-size: 1.05rem; letter-spacing: 0.04em; text-align: center; text-decoration: none; box-shadow: 0 4px 14px rgba(225, 29, 46, 0.35); }
.cgh-911:active { background: #B8141F; }

/* Update 455: school fills in from the intersection */
.cgc-school { padding: 0.6rem 0.8rem; border-radius: 10px; background: #EEF2F7; border: 1px solid var(--border); font-weight: 700; }

/* Update 457: Show / Hide on the guard starting password */
.pw-wrap { position: relative; }
.pw-wrap input { width: 100%; padding-right: 4.2rem; box-sizing: border-box; }
.pw-show { position: absolute; right: 0.4rem; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--primary); font: inherit; font-size: 0.85rem; font-weight: 700; padding: 0.3rem 0.5rem; cursor: pointer; }

/* Update 460: today's column stands out. Gold highlighter ring that ties into the gold ring on today's date, closed at the top and bottom of each squad */
.ps-cell.is-today, .ps-ocd.is-today { background: rgba(220,38,38,.10); box-shadow: inset 3px 0 0 #DC2626, inset -3px 0 0 #DC2626; }
.ps-ocd.is-today { background: #FFE4E9; }
.ps-gname + .ps-row .ps-cell.is-today { box-shadow: inset 3px 0 0 #DC2626, inset -3px 0 0 #DC2626, inset 0 3px 0 #DC2626; border-top-left-radius: 8px; border-top-right-radius: 8px; }
.ps-group .ps-row:last-of-type .ps-cell.is-today { box-shadow: inset 3px 0 0 #DC2626, inset -3px 0 0 #DC2626, inset 0 -3px 0 #DC2626; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; }
.ps-group .ps-gname + .ps-row:last-of-type .ps-cell.is-today { box-shadow: inset 0 0 0 3px #DC2626; border-radius: 8px; }
.ps-day.is-today { box-shadow: 0 0 0 3px #DC2626, 0 6px 16px rgba(14,39,82,.28); }
.ps-cell.is-today .ps-chip, .ps-cell.is-today b { font-weight: 800; }
/* Update 460: Patrol tab only. On-call row in its own card above the dates; the date bar follows the page on scroll */
.ps-scroll.ps-stick { overflow: visible; }
.ps-scroll.ps-stick .ps-stickhead { position: sticky; top: var(--ps-top, 60px); z-index: 20; box-shadow: 0 6px 16px rgba(16,37,68,.12); }
.ps-occard .ps-ocrow { border-top: 0; }
/* Update 461: a navy border around the pinned date bar on the Patrol tab */
.ps-scroll.ps-stick .ps-stickhead { border: 2px solid #1B4384; }
/* Update 462: Patrol name search in the pinned date bar, gold spotlight on the picked officer, gold for your own row */
.ps-headcard.ps-stickhead { overflow: visible; }
.ps-stickhead .ps-hrow { border-radius: 0 0 14px 14px; overflow: clip; }
.ps-find { position: relative; display: flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.6rem; border-bottom: 1px solid #E3E8EF; }
.ps-find-ic { display: inline-flex; color: #5B6B82; }
.ps-find-ic svg { width: 18px; height: 18px; }
.ps-find input { flex: 1; min-width: 0; border: 1px solid #D5DDE8; border-radius: 999px; padding: 0.45rem 0.85rem; font: inherit; font-size: 0.95rem; background: #F7F9FC; }
.ps-find input:focus { outline: none; border-color: #1B4384; background: #fff; box-shadow: 0 0 0 3px rgba(27,67,132,.15); }
.ps-find-x { border: 0; background: #1B4384; color: #fff; width: 30px; height: 30px; border-radius: 50%; font-size: 1.1rem; line-height: 1; cursor: pointer; flex: none; }
.ps-find-list { position: absolute; left: 0.6rem; right: 0.6rem; top: calc(100% - 2px); z-index: 40; background: #fff; border: 1px solid #D5DDE8; border-radius: 12px; box-shadow: 0 12px 28px rgba(16,37,68,.18); max-height: 320px; overflow-y: auto; padding: 4px; }
.ps-find-list button { display: flex; align-items: baseline; gap: 0.4rem; width: 100%; text-align: left; border: 0; background: none; padding: 0.55rem 0.65rem; border-radius: 8px; font: inherit; cursor: pointer; color: #12305F; }
.ps-find-list button:hover { background: #EEF3FB; }
.ps-find-list button span { color: #5B6B82; font-size: 0.8rem; font-weight: 700; }
.ps-find-list button small { margin-left: auto; color: #8A97AB; font-size: 0.75rem; }
.ps-find-none { padding: 0.6rem; color: #8A97AB; }
.ps-table.ps-spot .ps-group .ps-row:not(.is-spot) { opacity: .35; transition: opacity .2s; }
.ps-row.is-spot, .ps-row.is-spot .ps-who, .ps-group .ps-row.is-spot .ps-who { background: #FDE8E8; }
.ps-row.is-spot { box-shadow: inset 0 3px 0 #DC2626, inset 0 -3px 0 #DC2626; }
.ps-row.is-spot .ps-who { box-shadow: inset 4px 0 0 #DC2626; }
.ps-row.is-spot .ps-av { background: #DC2626; color: #fff; }
.ps-row.is-me, .ps-row.is-me .ps-who, .ps-group .ps-row.is-me .ps-who { background: #FFF5F5; }
.ps-row.is-me .ps-who { box-shadow: inset 4px 0 0 #DC2626; }
.ps-row.is-me .ps-av { background: #DC2626; color: #fff; }
/* Update 463: Best days button and card; pinned bar and search on all three tabs */
.ps-find-best { display: inline-flex; align-items: center; gap: 0.35rem; border: 0; background: #DC2626; color: #fff; font: inherit; font-weight: 800; font-size: 0.85rem; padding: 0.45rem 0.8rem; border-radius: 999px; cursor: pointer; flex: none; }
.ps-find-best svg { width: 16px; height: 16px; }
.ps-bd { max-width: 560px; }
.ps-bd h3 { margin: 0 0 0.15rem; }
.ps-bd > .muted { margin: 0 0 0.6rem; font-size: 0.85rem; }
.ps-bd-sec { margin: 0.7rem 0 0; padding: 0.6rem 0.7rem; border-radius: 12px; background: #F7F9FC; border-left: 4px solid #98A2B3; }
.ps-bd-sec h4 { margin: 0 0 0.4rem; font-size: 0.9rem; color: #12305F; }
.ps-bd-sec h4 span { font-size: 0.75rem; color: #5B6B82; background: #fff; border-radius: 999px; padding: 0 0.45rem; margin-left: 0.2rem; }
.ps-bd-sec .muted { margin: 0; font-size: 0.85rem; }
.ps-bd-sec.is-off { background: #ECF8F0; border-left-color: #1E7A3C; }
.ps-bd-sec.is-hrs { background: #EAF6F7; border-left-color: #0F7C86; }
.ps-bd-sec.is-avoid { background: #FFF4E5; border-left-color: #E07B00; }
.ps-bd-sec.is-work { background: #F4F6F9; }
.ps-bd-days { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.ps-bd-d { display: inline-flex; flex-direction: column; background: #fff; border: 1px solid #E3E8EF; border-radius: 8px; padding: 0.3rem 0.55rem; font-size: 0.85rem; color: #12305F; }
.ps-bd-d small { color: #5B6B82; font-size: 0.72rem; }
.ps-bd .ps-pc-acts { margin-top: 0.8rem; }
@media (max-width: 600px) { .ps-find-best { padding: 0.45rem 0.7rem; font-size: 0.8rem; } }
.ps-find-best[hidden] { display: none; }
/* Update 464: Schools & Bell Times. Each school shows bell times, then each intersection with its morning and afternoon guard */
.cg-s2 { padding: 0.9rem 1rem 1rem; }
.cg-s2-head h4 { margin: 0 0 0.5rem; font-size: 1.15rem; color: #12305F; }
.cg-bells { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.7rem; }
.cg-bell { display: inline-flex; align-items: center; gap: 0.35rem; background: #EEF3FB; color: #12305F; border-radius: 999px; padding: 0.3rem 0.75rem; font-size: 0.85rem; }
.cg-bell svg { width: 15px; height: 15px; }
.cg-bell span { color: #5B6B82; font-weight: 700; text-transform: uppercase; font-size: 0.72rem; letter-spacing: .04em; }
.cg-s2-grid { border: 1px solid #E3E8EF; border-radius: 12px; overflow: hidden; background: #fff; }
.cg-s2-th, .cg-s2-tr { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: 0.6rem; align-items: center; padding: 0.6rem 0.8rem; }
.cg-s2-th { background: #F4F6F9; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #5B6B82; }
.cg-s2-th span { display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; }
.cg-s2-th small { font-size: 0.8rem; font-weight: 700; color: #12305F; text-transform: none; letter-spacing: 0; width: 100%; }
.cg-s2-th svg, .cg-s2-sh svg { width: 15px; height: 15px; }
.cg-s2-th .is-am svg, .cg-s2-sh.is-am svg { color: #E08A00; }
.cg-s2-th .is-pm svg, .cg-s2-sh.is-pm svg { color: #5B4FD6; }
.cg-s2-tr { border-top: 1px solid #EEF1F5; }
.cg-s2-loc { display: flex; align-items: flex-start; gap: 0.35rem; color: #12305F; }
.cg-s2-loc svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: #E07B00; }
.cg-s2-who { font-size: 0.95rem; color: #1F2937; line-height: 1.35; }
.cg-s2-who i { display: none; }
.cg-s2-who b { font-weight: 700; }
.cg-open { display: inline-block; color: #B42318; background: #FEECEB; font-weight: 800; font-size: 0.78rem; border-radius: 999px; padding: 0.1rem 0.55rem; }
.cg-s2-more { margin: 0.6rem 0 0; font-size: 0.85rem; color: #5B6B82; }
.cg-s2-more b { color: #12305F; }
.cg-s2-shifts { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.6rem; }
.cg-s2-sh { display: inline-flex; align-items: center; gap: 0.35rem; background: #F4F6F9; border-radius: 999px; padding: 0.3rem 0.75rem; font-size: 0.85rem; color: #12305F; }
.cg-s2-sh span { color: #5B6B82; font-weight: 700; font-size: 0.75rem; }
.cg-s2-plain { display: flex; flex-direction: column; gap: 0.25rem; font-weight: 700; color: #12305F; }
@media (max-width: 600px) {
  .cg-s2-th { display: none; }
  .cg-s2-tr { grid-template-columns: 1fr 1fr; gap: 0.35rem 0.5rem; }
  .cg-s2-loc { grid-column: 1 / -1; font-size: 1rem; }
  .cg-s2-who { background: #F7F9FC; border-radius: 10px; padding: 0.4rem 0.6rem; }
  .cg-s2-who i { display: block; font-style: normal; font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #5B6B82; }
  .cg-s2-who.is-am { box-shadow: inset 3px 0 0 #F5A623; }
  .cg-s2-who.is-pm { box-shadow: inset 3px 0 0 #7C6FF0; }
}
.cg-schools:has(.cg-s2) { grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr)); }
.cg-s2-grid > .co-hint { margin: 0; padding: 0.7rem 0.8rem; border-top: 1px solid #EEF1F5; }
@media (max-width: 600px) { .cg-s2-who i { margin-bottom: 0.1rem; } }
/* Update 465: on phones the Back button is a blue circle with just the white arrow. The What's New count in the menu is red like the others */
@media (max-width: 640px) {
  .top-back { width: 38px; height: 38px; padding: 0; justify-content: center; border-radius: 50%; gap: 0; }
  .top-back .ic { width: 22px; height: 22px; }
  .top-back span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; max-width: none; }
}
.nav-badge.wn-new { background: #D0313F; }
.nav-group-wn { background: #D0313F; } #menu-btn.has-gdot::after { background: #D0313F; }
/* Update 466: Ideas & Feedback conversations and statuses; Website reminders */
.wish-status.st-open { background: #4B5563; }
.wish-status.st-on-hold { background: #8A95A5; }
.wish-status.st-not-doing { background: #B42318; }
.fb-note.is-author { background: #FFF8EA; border-left-color: #F5A623; }
.fb-locked { display: flex; align-items: center; gap: 0.35rem; margin: 0.5rem 0 0; color: #5B6B82; font-size: 0.85rem; }
.fb-locked svg { width: 15px; height: 15px; flex: none; }
.mt-site-ck { display: inline-flex; align-items: center; gap: 0.3rem; flex: none; margin-right: 6px; padding: 4px 10px; border-radius: 999px; background: #fff; border: 1px solid #D5DDE8; font-size: 0.8rem; font-weight: 700; color: #12305F; cursor: pointer; }
.mt-site-ck input { width: 16px; height: 16px; margin: 0; accent-color: #1B4384; }
.mt-site-ck:has(input:checked) { background: #1B4384; border-color: #1B4384; color: #fff; }
.mt-quick .mt-site-ck { padding: 3px 9px; gap: 0.25rem; }
.mt-quick .mt-site-ck span { font-size: 0.74rem; font-weight: 800; color: inherit; line-height: 1; }
.mt-quick .mt-site-ck input { width: 14px; height: 14px; }
@media (max-width: 700px) { #mt-quick-in::placeholder { font-size: 0.88rem; } }
/* Update 467: Status drop-down and status history lines */
.fb-stat-pick { display: flex; align-items: center; gap: 0.5rem; flex: 1 1 260px; min-width: 0; }
.fb-stat-pick span { font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #5B6B82; }
.fb-stat-pick select { flex: 1; min-width: 0; appearance: none; -webkit-appearance: none; font: inherit; font-weight: 700; color: #12305F; background: #F7F9FC url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2312305F' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 12px center; border: 1px solid #D5DDE8; border-radius: 10px; padding: 0.55rem 2.2rem 0.55rem 0.75rem; cursor: pointer; }
.fb-stat-pick select:focus { outline: none; border-color: #1B4384; box-shadow: 0 0 0 3px rgba(27,67,132,.15); }
.fb-act-row .fb-del { margin-left: auto; }
.fb-stat-line { text-align: center; font-size: 0.8rem; color: #5B6B82; padding: 2px 0; }
.fb-stat-line b { color: #12305F; }
@media (max-width: 600px) { .fb-stat-pick { flex-basis: 100%; } }
/* Update 468: Dashboard tiles that open a short preview in place */
.qt-wrap { margin: 0 0 1rem; }
.qt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 0.65rem; }
.qt-tile { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 0.2rem; text-align: left; padding: 0.85rem 0.9rem; border-radius: 16px; border: 1px solid #E3E8EF; background: #fff; cursor: pointer; font: inherit; color: #12305F; box-shadow: 0 1px 2px rgba(16,37,68,.04), 0 6px 18px rgba(16,37,68,.05); transition: transform .12s, box-shadow .12s; }
.qt-tile:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(16,37,68,.10); }
.qt-tile.is-open { border-color: var(--qt-c); box-shadow: 0 0 0 2px var(--qt-c), 0 8px 22px rgba(16,37,68,.12); }
.qt-tile.is-open::after { content: ''; position: absolute; left: 50%; bottom: -9px; width: 14px; height: 14px; background: #fff; border-right: 2px solid var(--qt-c); border-bottom: 2px solid var(--qt-c); transform: translateX(-50%) rotate(45deg); }
.qt-ic { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: var(--qt-s); color: var(--qt-c); }
.qt-ic svg { width: 18px; height: 18px; }
.qt-t { font-weight: 800; font-size: 0.95rem; margin-top: 0.25rem; }
.qt-n { font-size: 0.85rem; color: #5B6B82; }
.qt-n b { font-size: 1.35rem; color: #12305F; margin-right: 0.1rem; }
.qt-w { font-size: 0.72rem; font-weight: 800; color: #B42318; background: #FEECEB; border-radius: 999px; padding: 0.1rem 0.5rem; }
.qt-red { --qt-c: #D0313F; --qt-s: #FDECEE; } .qt-navy { --qt-c: #1B4384; --qt-s: #EAF0FA; } .qt-purple { --qt-c: #6D4BD1; --qt-s: #F0EBFC; }
.qt-teal { --qt-c: #0F7C86; --qt-s: #E4F5F6; } .qt-amber { --qt-c: #D97A00; --qt-s: #FFF2DF; } .qt-blue { --qt-c: #1F6FD1; --qt-s: #E7F0FC; }
.qt-panel { margin-top: 0.9rem; border-top: 4px solid var(--qt-c); padding: 0.9rem 1rem 1rem; }
.qt-ph { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.4rem; }
.qt-ph h3 { margin: 0; display: flex; align-items: center; gap: 0.4rem; color: #12305F; font-size: 1.05rem; }
.qt-ph h3 svg { width: 18px; height: 18px; color: var(--qt-c); }
.qt-x { border: 0; background: #EEF1F5; width: 32px; height: 32px; border-radius: 50%; font-size: 1.2rem; cursor: pointer; color: #12305F; }
.qt-row { display: flex; align-items: center; gap: 0.6rem; width: 100%; text-align: left; border: 0; background: none; padding: 0.6rem 0.2rem; border-bottom: 1px solid #EEF1F5; font: inherit; color: #12305F; cursor: pointer; }
.qt-row > span:first-of-type { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.qt-row small { color: #5B6B82; font-size: 0.8rem; }
.qt-row .chevron { color: #98A2B3; font-size: 1.2rem; }
.qt-task { cursor: default; }
.qt-ck { display: inline-flex; flex: none; }
.qt-ck input { width: 20px; height: 20px; accent-color: #0F7C86; }
.qt-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #D0313F; margin-right: 0.35rem; vertical-align: middle; }
.qt-none { color: #8A97AB; margin: 0.4rem 0; }
.qt-btns { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.8rem; }
.qt-full { margin-left: auto; }
.qt-add { display: flex; gap: 0.5rem; margin-bottom: 0.4rem; }
.qt-add input { flex: 1; min-width: 0; border: 1px solid #D5DDE8; border-radius: 999px; padding: 0.5rem 0.9rem; font: inherit; }
.qt-find { position: relative; display: flex; align-items: center; gap: 0.4rem; }
.qt-find > span svg { width: 18px; height: 18px; color: #5B6B82; }
.qt-find input { flex: 1; min-width: 0; border: 1px solid #D5DDE8; border-radius: 999px; padding: 0.55rem 0.9rem; font: inherit; background: #F7F9FC; }
.qt-find-list { position: absolute; left: 1.6rem; right: 0; top: calc(100% + 4px); z-index: 30; background: #fff; border: 1px solid #D5DDE8; border-radius: 12px; box-shadow: 0 12px 28px rgba(16,37,68,.18); padding: 4px; max-height: 300px; overflow-y: auto; }
.qt-find-list button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 0.55rem 0.65rem; border-radius: 8px; font: inherit; color: #12305F; cursor: pointer; }
.qt-find-list button:hover { background: #EEF3FB; }
.qt-find-list span { color: #5B6B82; font-size: 0.8rem; font-weight: 700; }
.qt-foot { display: flex; justify-content: flex-end; margin-top: 0.4rem; }
.qt-cust { border: 0; background: none; color: #5B6B82; font: inherit; font-size: 0.82rem; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 0.3rem; }
.qt-cust svg { width: 14px; height: 14px; }
.qt-empty { display: flex; justify-content: flex-end; }
.qt-cz { max-width: 440px; }
.qt-cz-list { display: flex; flex-direction: column; gap: 0.35rem; margin: 0.6rem 0; }
.qt-cz-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.4rem 0.5rem; border: 1px solid #E3E8EF; border-radius: 10px; }
.qt-cz-row label { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; color: #12305F; cursor: pointer; }
.qt-cz-row .qt-ic { width: 28px; height: 28px; }
.qt-cz-mv button { border: 1px solid #D5DDE8; background: #fff; width: 32px; height: 32px; border-radius: 8px; cursor: pointer; font-size: 1rem; }
.qt-cz-mv button:disabled { opacity: .35; cursor: default; }
@media (max-width: 600px) { .qt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; } .qt-tile { padding: 0.7rem; } .qt-full { margin-left: 0; } }
/* Update 469: the top search shows a person card with everything you can open about them */
.gs-person { border: 1px solid #E3E8EF; border-radius: 14px; background: #fff; margin-bottom: 0.5rem; overflow: hidden; }
.gs-person.is-open { border-color: #1B4384; box-shadow: 0 0 0 1px #1B4384; }
.gs-ph { display: flex; align-items: center; gap: 0.6rem; width: 100%; border: 0; background: none; padding: 0.65rem 0.75rem; text-align: left; font: inherit; color: #12305F; cursor: pointer; }
.gs-av { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: #1B4384; color: #fff; font-weight: 800; flex: none; }
.gs-pn { flex: 1; min-width: 0; }
.gs-pn b { font-size: 1.02rem; }
.gs-pn small { display: block; color: #5B6B82; font-size: 0.8rem; }
.gs-ph .chevron { color: #98A2B3; font-size: 1.2rem; }
.gs-pbody { padding: 0 0.75rem 0.6rem; }
.gs-call { display: flex; gap: 0.5rem; margin-bottom: 0.4rem; }
.gs-call .btn { flex: 1; justify-content: center; display: inline-flex; align-items: center; gap: 0.35rem; }
.gs-call svg { width: 16px; height: 16px; }
.gs-link { display: flex; align-items: center; gap: 0.6rem; width: 100%; border: 0; border-top: 1px solid #EEF1F5; background: none; padding: 0.6rem 0.15rem; text-align: left; font: inherit; color: #12305F; cursor: pointer; }
.gs-link > svg { width: 18px; height: 18px; color: #1B4384; flex: none; }
.gs-link > span:first-of-type { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.gs-link small { color: #5B6B82; font-size: 0.78rem; }
.gs-link .chevron { color: #98A2B3; font-size: 1.2rem; }
.gs-link:hover, .gs-ph:hover { background: #F7F9FC; }
.gs-item svg { width: 16px; height: 16px; vertical-align: -3px; margin-right: 0.25rem; color: #1B4384; }
#gs-results { max-height: calc(100vh - 160px); overflow-y: auto; }
/* Update 471: Directions and Add to calendar on announcements and banners */
.ann-links, .anb-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-top: 0.55rem; }
.anb-links { position: relative; z-index: 2; grid-column: 1 / -1; margin-top: 0.1rem; }
.ann-addr { width: 100%; font-size: 0.82rem; color: #5B6B82; }
.ann-lk { display: inline-flex; align-items: center; gap: 0.3rem; border: 1px solid #D5DDE8; background: #fff; color: #12305F; border-radius: 999px; padding: 0.35rem 0.75rem; font: inherit; font-size: 0.8rem; font-weight: 700; text-decoration: none; cursor: pointer; }
.ann-lk svg { width: 14px; height: 14px; color: #1B4384; }
.anb .ann-lk { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.35); color: #fff; }
.anb .ann-lk svg { color: currentColor; }
.anb-holiday .ann-lk { background: rgba(255,255,255,.65); border-color: rgba(16,40,74,.2); color: #10284A; }
.anb-holiday .ann-lk svg { color: #B3122E; }
/* Update 471: on phones every announcement banner (the Christmas one included) is more compact. Same pieces, smaller */
@media (max-width: 600px) {
  .anb { padding: 0.7rem 0.8rem 0.75rem; gap: 0.35rem 0.6rem; border-radius: 18px; }
  .anb-holiday { border-width: 5px; }
  .anb-cal { padding: 0.25rem 0.6rem; border-radius: 12px; gap: 0.4rem; }
  .anb-m, .anb-w { font-size: 0.66rem; letter-spacing: 0.14em; }
  .anb-d { font-size: 1.25rem; }
  .anb-kicker { font-size: 0.64rem; letter-spacing: 0.18em; }
  .anb-title { font-size: 1.2rem; margin: 0.1rem 0 0.35rem; line-height: 1.15; }
  .anb-chips { gap: 0.3rem; }
  .anb-chip { font-size: 0.72rem; padding: 0.2rem 0.55rem; }
  .anb-chip .ic { width: 13px; height: 13px; }
  .anb-links { gap: 0.3rem; margin-top: 0.35rem; }
  .ann-lk { font-size: 0.7rem; padding: 0.22rem 0.55rem; }
  .ann-lk svg { width: 12px; height: 12px; }
  .anb-note { font-size: 0.74rem; padding-top: 0.35rem; line-height: 1.35; }
  .anb-rsvp { padding: 0.4rem 0.55rem; gap: 0.3rem 0.5rem; border-radius: 12px; font-size: 0.82rem; }
  .anb-rsvp-btn { font-size: 0.75rem; padding: 0.28rem 0.7rem; }
  .anb-rsvp-btns { width: auto; margin-left: auto; }
  .anb-rsvp-btns .anb-rsvp-btn { flex: none; }
  .anb-rsvp-see { font-size: 0.72rem; }
  .anb-rsvp-guest { font-size: 0.76rem; }
}
/* Update 472: phone top bar is buttons only. No page name (each page already shows its own).
   Left: menu, Back, Home. Right: search, bell, download, log out. Same round buttons, always in the same spots */
#top-logout .ic { display: none; }
@media (max-width: 640px) {
  .topbar { gap: 0.4rem; padding-left: 0.6rem; padding-right: 0.6rem; }
  .topbar #page-title, .topbar:has(.top-back:not([hidden])) #page-title { display: none !important; }
  #menu-btn { order: 1; } #top-back { order: 2; } #top-home { order: 3; }
  #top-search { order: 10; margin-left: auto; } #top-bell { order: 11; } #top-csv { order: 12; } #top-logout { order: 13; }
  body.guard-mode #top-csv, body.guard-mode #top-logout { margin-left: auto; }
  #top-home, #top-home[style*="none"], .topbar:has(.top-back:not([hidden])) #top-home { display: inline-flex !important; }
  .topbar .icon-btn, #top-logout { width: 38px; height: 38px; min-width: 38px; padding: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
  #menu-btn, #top-home, #top-search, #top-bell { background: rgba(255,255,255,.1); }
  #top-csv { width: 38px; height: 38px; }
  #top-logout { background: #4A5059; border: 1px solid #5D646E; color: #F1F3F5; font-size: 0; }
  #top-logout .ic { display: block; width: 18px; height: 18px; stroke: #F1F3F5; }
  #top-logout span { display: none; }
  .top-back { width: 38px; height: 38px; }
}

/* 473: Desk/WebEx # in the Directory */
/* 474: Directory contact panel */
.dc { display: flex; flex-direction: column; background: #fff; border: 1px solid #D7DFEA; border-radius: 14px; overflow: hidden; box-shadow: 0 1px 2px rgba(16,32,64,.05); width: 100%; max-width: 440px; }
.dc-line { display: flex; align-items: center; gap: .4rem; padding: .45rem .55rem .45rem .6rem; }
.dc-line + .dc-line { border-top: 1px solid #EDF1F6; }
.dir-contact a.dc-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: .65rem; color: inherit; text-decoration: none; font-weight: 400; white-space: normal; }
.dir-contact a.dc-main:hover { text-decoration: none; }
.dc-ic { flex: none; width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; }
.dc-ic .ic { width: 18px; height: 18px; }
.is-mob .dc-ic { background: #E6EEF9; color: #1F3A68; }
.is-desk .dc-ic { background: #E3F4F1; color: #0F766E; }
.is-mail .dc-ic { background: #F1EDF8; color: #5B3F99; }
.dc-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.dc-txt small { font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #6B7684; }
.dc-txt b { font-size: 1rem; font-weight: 650; color: #14233F; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.is-mail .dc-txt b { font-size: .92rem; font-weight: 600; }
.dir-contact a.dc-btn { flex: none; width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #D7DFEA; background: #F7F9FC; color: #1F3A68; }
.dir-contact a.dc-btn:hover { background: #1F3A68; color: #fff; border-color: #1F3A68; text-decoration: none; }
.dc-btn .ic { width: 16px; height: 16px; }
.is-desk a.dc-btn { color: #0F766E; }
@media (max-width: 600px) { .dir-row .dir-contact { grid-column: 1 / -1; grid-row: 2; margin-top: .35rem; } .dc { max-width: none; } }
.dir-desk-tools { margin-top: .6rem; }
.dir-desk-list { display: grid; gap: .3rem; max-height: 55vh; overflow: auto; margin: .5rem 0; }
.dir-desk-row { display: flex; gap: .6rem; align-items: flex-start; padding: .45rem .5rem; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; }
.dir-desk-row input { margin-top: .2rem; width: 18px; height: 18px; flex: none; }
.dir-desk-row small, .dir-desk-miss small { display: block; color: var(--muted); }
.dir-desk-miss { margin: .5rem 0; }
.dir-desk-miss > div { padding: .35rem 0; border-bottom: 1px solid var(--border); }
.dir-desk-btns { display: flex; gap: .5rem; margin-top: .6rem; flex-wrap: wrap; }
#dd-text { width: 100%; font: inherit; padding: .5rem; border: 1px solid var(--border); border-radius: 8px; }
.gs-desk { display: flex; align-items: center; gap: .4rem; padding: .5rem .2rem; font-weight: 600; color: var(--primary, #1F3A68); text-decoration: none; }
.gs-desk span { font-size: .75rem; color: var(--muted); text-transform: uppercase; }
.gs-desk .ic { width: 16px; height: 16px; }
.is-mail a.dc-btn { color: #5B3F99; }

/* 475: pick an email app */
.mp-back { align-items: flex-end; }
@media (min-width: 641px) { .mp-back { align-items: center; } }
.mp-card { background: #fff; border-radius: 18px; padding: 1rem; width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: .45rem; box-shadow: 0 20px 50px rgba(0,0,0,.35); margin-bottom: env(safe-area-inset-bottom); }
.mp-h { display: flex; align-items: center; gap: .65rem; padding-bottom: .4rem; }
.mp-h .dc-ic { background: #F1EDF8; color: #5B3F99; }
.mp-h span:last-child { display: flex; flex-direction: column; min-width: 0; }
.mp-h small { font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #6B7684; }
.mp-h b { overflow-wrap: anywhere; color: #14233F; }
.mp-opt { display: flex; align-items: center; gap: .5rem; justify-content: space-between; width: 100%; padding: .75rem .9rem; border: 1px solid #D7DFEA; border-radius: 12px; background: #F7F9FC; color: #14233F; font: inherit; font-weight: 650; text-decoration: none; cursor: pointer; text-align: left; }
.mp-opt:hover { background: #EEF2F8; }
.mp-opt.is-ol { border-left: 4px solid #0F6CBD; }
.mp-opt.is-gm { border-left: 4px solid #D93025; }
.mp-opt.is-am { border-left: 4px solid #1F7AE0; }
.mp-opt.is-copy { justify-content: flex-start; color: #55606E; }
.mp-opt .ic { width: 16px; height: 16px; }
.mp-fine { margin: 0; font-size: .78rem; color: #6B7684; text-align: center; }

/* 476: contact panel in the top search card */
.gs-dc { margin: .1rem 0 .5rem; }
.gs-dc .dc { max-width: none; }

/* 477: Days off tip */
.ps-tip { position: absolute; right: 0.6rem; top: calc(100% + 6px); z-index: 45; width: min(300px, calc(100% - 1.2rem)); background: #0F2A4F; color: #fff; border-radius: 12px; padding: 0.7rem 0.8rem; box-shadow: 0 12px 28px rgba(16,37,68,.3); display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.88rem; line-height: 1.35; }
.ps-tip::before { content: ''; position: absolute; top: -6px; right: 4.2rem; width: 12px; height: 12px; background: #0F2A4F; transform: rotate(45deg); }
.ps-tip b { color: #FCA5A5; }
.ps-tip i { font-style: normal; font-weight: 800; }
.ps-tip .btn { align-self: flex-end; background: #DC2626; color: #fff; border: 0; }
.ps-pc-avail { width: 100%; margin: 0.6rem 0 0.2rem; display: flex; align-items: center; justify-content: center; gap: 0.45rem; background: #DC2626; color: #fff; border: 0; font-weight: 800; }
.ps-pc-avail:hover { background: #B91C1C; }
.ps-pc-avail small { font-weight: 600; opacity: .85; }
.ps-bd-span { display: inline-flex; background: #EEF2F7; border-radius: 999px; padding: 3px; margin: 0.2rem 0 0.4rem; }
.ps-bd-span button { border: 0; background: none; font: inherit; font-weight: 700; font-size: 0.85rem; padding: 0.35rem 0.9rem; border-radius: 999px; color: #44526A; cursor: pointer; }
.ps-bd-span button.on { background: #DC2626; color: #fff; }
.ps-bd-more { margin-top: 0.7rem; }
.ps-bd-more summary { cursor: pointer; font-weight: 700; color: #12305F; padding: 0.4rem 0.2rem; }
.ps-bd-more summary span { font-size: 0.75rem; color: #5B6B82; background: #EEF2F7; border-radius: 999px; padding: 0 0.45rem; }
.ps-bd-more .ps-bd-sec { margin-top: 0.3rem; }
.ps-bd-mon { font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #5B6B82; margin: .55rem 0 .3rem; }
.ps-bd-mon:first-of-type { margin-top: .1rem; }
/* 477: Availability tiles in an even grid, same width and height in each row */
.ps-bd-days { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 0.4rem; }
.ps-bd-d { justify-content: flex-start; min-height: 3.3rem; }

/* 479: vehicle page. Car line centered over the picture; the buttons under it in an even grid */
.carline-wrap { display: flex; justify-content: center; align-items: flex-start; gap: 0.75rem; flex-wrap: wrap; text-align: center; }
.status-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem; max-width: 560px; margin-left: auto; margin-right: auto; }
.status-row > * { width: 100%; min-width: 0; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; text-align: center; margin: 0 !important; white-space: nowrap; }
.status-row > .status-live { position: relative; }
@media (max-width: 600px) { .status-row > *, .status-row .status-live, .status-row .btn.edit-veh-btn { font-size: 0.95rem; padding: 0.6rem 0.6rem; min-height: 48px; } }
/* 479: long words or links (task text, notes, file names) wrap instead of pushing the page sideways */
html { overflow-x: clip; }
.oi-row > div:first-child { min-width: 0; }
.oi-row strong, .oi-row small, .card, .card p, .card small, .card td { overflow-wrap: anywhere; }
@media (min-width: 601px) { .status-row > .status-live, .status-row > .btn { font-size: 1rem; min-height: 46px; } }
.status-row > .status-live { gap: 0.4rem; }
.status-row > .status-live .dot { flex: none; }
.status-row > .status-live:has(.tile-editor) { grid-column: 1 / -1; white-space: normal; }
@media (max-width: 600px) { .status-row > .status-live { font-size: 0.86rem; padding: 0.5rem 0.45rem; gap: 0.3rem; letter-spacing: -0.01em; } .status-row > .status-live .dot { width: 0.6rem; height: 0.6rem; } .status-row > .status-live.tile-tap::after { margin-left: 0.15em; flex: none; } }

/* ===== 480: Reminders refresh ===== */
.mt-h h2 { display: flex; align-items: center; gap: .4rem; }
.mt-lock { border: 0; background: #EEF2F7; color: #5B6B82; width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.mt-lock .ic { width: 14px; height: 14px; }
.mt-priv[hidden] { display: none; }
/* 1. Tabs in one swipeable row; words never break */
.mt-tabs.tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 4px; }
.mt-tabs.tabs::-webkit-scrollbar { display: none; }
.mt-tabs .tab { flex: none; white-space: nowrap; word-break: keep-all; display: inline-flex; align-items: center; gap: .35rem; padding: .5rem .85rem; }
.mt-tabs .tab .tab-count { margin: 0; }
/* 2. At a glance */
.mt-glance { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 12px 20px 2px; }
.mt-glance:empty { display: none; }
.mt-gl { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: .55rem .65rem; border-radius: 12px; border: 1px solid #DCE3EC; background: #fff; cursor: pointer; font: inherit; text-align: left; border-left: 4px solid #98A2B3; }
.mt-gl b { font-size: 1.35rem; line-height: 1.1; color: #14233F; font-variant-numeric: tabular-nums; }
.mt-gl span { font-size: .74rem; font-weight: 700; color: #5B6B82; white-space: nowrap; }
.mt-gl-over { border-left-color: #D0313F; } .mt-gl-over b { color: #B42318; }
.mt-gl-today { border-left-color: #1B4384; }
.mt-gl-week { border-left-color: #2E9E5B; }
.mt-gl-none { border-left-color: #98A2B3; }
.mt-gl.is-zero { opacity: .55; }
.mt-gl.on { background: #1B4384; border-color: #1B4384; } .mt-gl.on b, .mt-gl.on span { color: #fff; }
/* 3. Quick add with chips */
.mt-qa { margin: 12px 20px 4px; padding: 6px 8px 8px; border: 1px solid #D5DDE8; border-radius: 14px; background: #F7F9FC; }
.mt-qa-line { display: flex; align-items: center; gap: 8px; padding: 0 4px 0 8px; }
.mt-qa-line > span { color: var(--muted); font-weight: 700; font-size: 1.1rem; }
.mt-qa-line input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 9px 0; font: inherit; font-size: .98rem; outline: none; box-shadow: none; }
.mt-qa-go { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 0; background: #1B4384; color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.mt-qa-go .ic { width: 17px; height: 17px; }
.mt-qa-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 2px 0; }
.mt-qc { display: inline-flex; align-items: center; gap: .3rem; border: 1px solid #D5DDE8; background: #fff; color: #33435C; font: inherit; font-size: .8rem; font-weight: 700; padding: .32rem .7rem; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.mt-qc .ic { width: 14px; height: 14px; }
.mt-qc.on { background: #1B4384; border-color: #1B4384; color: #fff; }
.mt-qc-high.on { background: #D0313F; border-color: #D0313F; }
.mt-qc-car input { width: 3.2rem; border: 0; background: transparent; color: inherit; font: inherit; font-weight: 800; outline: none; padding: 0; }
.mt-qc-car input::placeholder { color: rgba(255,255,255,.7); }
.mt-qa-date { font: inherit; font-size: .85rem; border: 1px solid #D5DDE8; border-radius: 999px; padding: .25rem .6rem; background: #fff; }
/* 4. Rows: priority as a colored edge, calendar button for no date */
.mt-row { border-left: 4px solid transparent; }
.mt-row.mt-pr-high { border-left-color: #D0313F; }
.mt-row.mt-pr-medium { border-left-color: #E0A526; }
.mt-row.mt-pr-low { border-left-color: #B7C1CF; }
.mt-row.is-done { border-left-color: #2E9E5B; }
.mt-ck span { border-radius: 50%; }
.mt-setdate { flex: none; width: 32px; height: 32px; border-radius: 50%; border: 1px dashed #B7C1CF; background: #fff; color: #5B6B82; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.mt-setdate:hover { border-style: solid; color: #1B4384; border-color: #1B4384; }
.mt-setdate .ic { width: 15px; height: 15px; }
/* 5. Finish inline */
.mt-row.is-finishing { background: #F2FAF5; }
.mt-fin { margin: 0 20px 10px 52px; padding: .6rem .7rem; border: 1px solid #BFE3CC; border-radius: 12px; background: #F2FAF5; }
.mt-fin label { display: block; font-weight: 800; font-size: .85rem; color: #1E6B3C; margin-bottom: .3rem; }
.mt-fin textarea { width: 100%; box-sizing: border-box; font: inherit; border: 1px solid #CFE5D8; border-radius: 10px; padding: .5rem .6rem; background: #fff; }
.mt-fin-btns { display: flex; gap: .5rem; margin-top: .5rem; flex-wrap: wrap; }
/* 6. Thin vehicle-problems bar */
.mt-nudge.mt-nudge-thin { padding: 6px 8px 6px 12px; flex-wrap: nowrap; }
.mt-nudge-thin > div:first-child { flex: 1 1 auto; display: flex; align-items: center; gap: .45rem; min-width: 0; }
.mt-nudge-thin > div:first-child .ic { width: 16px; height: 16px; color: #7A4B00; flex: none; }
.mt-nudge-thin b { display: inline; font-size: .85rem; }
.mt-nudge.mt-nudge-thin:has(.mt-review) { flex-wrap: wrap; }
.mt-nudge-thin .mt-review { flex-basis: 100%; }
/* 7. Done headings */
.mt-sec-done { color: #2E6B45; }
@media (max-width: 700px) {
  .mt-glance, .mt-qa { margin-left: 14px; margin-right: 14px; }
  .mt-glance { gap: 6px; }
  .mt-gl { padding: .45rem .5rem; }
  .mt-gl b { font-size: 1.2rem; }
  .mt-gl span { font-size: .68rem; }
  .mt-fin { margin: 0 14px 10px 14px; }
  .mt-row { padding-left: 10px; }
}
.mt-qa-go .ic, .mt-qa-go svg { color: #fff; stroke: #fff; }
/* Phone: every tab visible at once, label over count */
@media (max-width: 700px) {
  .mt-tabs.tabs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; overflow: visible; }
  .mt-tabs .tab { flex-direction: column; gap: 2px; padding: .4rem .2rem; font-size: .8rem; min-width: 0; justify-content: center; }
  .mt-tabs .tab .tab-count { font-size: .7rem; }
}
/* 481: phone greeting is one centered line with the date under it */
@media (max-width: 767px) {
  .home-greet .hg-line { text-align: center; line-height: 1.25; }
  .home-greet .hg-hi { display: inline; font-family: var(--display); font-size: 1.15rem; font-weight: 600; color: var(--muted, #5a6475); }
  .home-greet .hg-name { display: inline; font-size: 1.15rem; font-weight: 800; }
  .home-greet .hg-date { text-align: center; font-size: 0.8rem; margin-top: 0.1rem; }
  .home-greet.hg-inline { padding: 0 0.25rem 0.6rem; }
}
/* 482: Reminder panel cleanup */
.mt-sec-card { background: #F6F8FB; border: 1px solid #E3E8F0; border-radius: 14px; padding: 4px 14px 14px; margin-top: 12px; }
.mt-sec-card .mt-fl { display: flex; align-items: center; gap: 6px; margin-top: 12px; }
.mt-sec-card .mt-fl .ic { width: 14px; height: 14px; }
.mt-due-now { font-size: 1.05rem; font-weight: 700; color: #14233F; margin: 0 0 10px; }
.mt-due-now.over { color: var(--danger, #C62828); }
.mt-dt-row { display: flex; gap: 8px; align-items: flex-end; margin-top: 10px; flex-wrap: wrap; }
.mt-dt { flex: 1 1 130px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mt-dt span { font-size: .75rem; font-weight: 700; color: var(--muted); }
.mt-dt input { width: 100%; min-width: 0; min-height: 42px; border: 1px solid #D5DDE8; border-radius: 10px; padding: 6px 10px; background: #fff; font: inherit; font-weight: 600; color: #14233F; }
.mt-dt-clear { border: 0; background: none; color: var(--muted); font-weight: 600; font-size: .85rem; text-decoration: underline; padding: 10px 4px; cursor: pointer; }
.mt-seg-p button.on.p-high { background: #C62828; border-color: #C62828; }
.mt-seg-p button.on.p-medium { background: #D98A00; border-color: #D98A00; }
.mt-seg-p button.on.p-low { background: #5B6B82; border-color: #5B6B82; }
.mt-wait-row { align-items: center; }
.mt-wait-row input { background: #fff; }
.mt-saved { display: inline-flex; align-items: center; gap: 4px; color: #1E7B3A; font-weight: 700; font-size: .85rem; white-space: nowrap; }
.mt-saved[hidden] { display: none; }
.mt-saved .ic { width: 14px; height: 14px; }
.mt-upd-card { padding: 0 14px; }
.mt-upd-card summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 14px 0; font-weight: 700; color: #1B4384; }
.mt-upd-card summary::-webkit-details-marker { display: none; }
.mt-upd-card summary small { color: var(--muted); font-weight: 500; }
.mt-upd-card summary .ic { width: 16px; height: 16px; }
.mt-upd-card[open] { padding-bottom: 14px; }
.mt-acts { gap: 8px; }
.mt-acts .mt-act-main { flex: 1 1 100%; justify-content: center; min-height: 46px; font-size: 1rem; }
.mt-acts .btn:not(.mt-act-main) { flex: 1 1 auto; justify-content: center; font-size: .88rem; }
.mt-acts .mt-del { flex: 0 0 100%; border: 0 !important; background: none !important; text-decoration: underline; font-size: .85rem; margin: 2px 0 0; }
.mt-acts .mt-act-main .ic, .mt-acts .mt-act-main svg { color: #fff; stroke: #fff; }
/* 485: time chip in quick add */
.mt-qc-time { display: inline-flex; align-items: center; gap: 4px; }
.mt-qc-time input { border: 0; background: transparent; color: inherit; font: inherit; font-weight: 700; min-width: 0; width: 7.2em; padding: 0; }
.mt-qc-time input::-webkit-calendar-picker-indicator { filter: invert(1); }
.mt-qa-chips { align-items: center; }
.mt-qc-time input { height: 1.4em; line-height: 1.4em; font-size: inherit; width: 6.4em; -webkit-appearance: none; appearance: none; }
.mt-qc-time input::-webkit-calendar-picker-indicator { display: none; }
.mt-qc-time input::-webkit-date-and-time-value { text-align: left; }
.mt-qa-chips .mt-qc-time { padding: .32rem .7rem; height: auto; line-height: 1.2; }
.mt-qa-chips .mt-qc-time input { min-height: 0 !important; height: 1.2em !important; padding: 0 !important; margin: 0; border: 0 !important; box-shadow: none !important; font-size: .8rem !important; font-weight: 700; line-height: 1.2; }
/* 486: previous/next week arrows in the date bar corner */
.ps-hwho { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.ps-wkarrows { display: flex; gap: 6px; }
.ps-wk { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid #C9D3E2; background: #fff; color: #1B4384; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.ps-wk .ic { width: 18px; height: 18px; stroke: currentColor; }
.ps-wk:not(:disabled):active { background: #1B4384; color: #fff; border-color: #1B4384; }
.ps-wk:disabled { opacity: .35; cursor: default; }
.ps-wk-l { font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
/* 488: bolder schedule pills (Patrol, Investigations, Admin): a solid border in each pill's own color */
.ps-code { box-shadow: inset 0 0 0 1.5px #98A2B3; }
.ps-code.k-on { box-shadow: inset 0 0 0 1.5px #3FA166; }
.ps-code.k-t { box-shadow: inset 0 0 0 1.5px #5B84F0; }
.ps-code.k-v { box-shadow: inset 0 0 0 1.5px #E0A43A; }
.ps-code.k-h { box-shadow: inset 0 0 0 1.5px #9D74F2; }
.ps-code.k-hrs { box-shadow: inset 0 0 0 1.5px #5C74B0; }
/* 489: Color key stands out (navy bar with a soft glow); payday is a green $ coin; notes are a teal folded corner */
.ps-legend { background: linear-gradient(135deg, #374151, #1F2937) !important; color: #fff; border: 0; box-shadow: 0 0 0 2px rgba(220,38,38,.45), 0 0 18px rgba(239,68,68,.5); animation: psKeyGlow 2.8s ease-in-out 3; }
@keyframes psKeyGlow { 0%,100% { box-shadow: 0 0 0 2px rgba(220,38,38,.45), 0 0 14px rgba(239,68,68,.4); } 50% { box-shadow: 0 0 0 3px rgba(220,38,38,.7), 0 0 26px rgba(239,68,68,.8); } }
@media (prefers-reduced-motion: reduce) { .ps-legend { animation: none; } }
.ps-legend summary { color: #fff; padding: 0.7rem 0; }
.ps-legend summary::after { border-color: #fff; }
.ps-legend .ps-lg-ic { background: rgba(255,255,255,.16); }
.ps-legend .ps-lg-ic .ic { stroke: #fff; }
.ps-lg-st { display: flex; flex-direction: column; line-height: 1.2; }
.ps-lg-st b { font-size: .95rem; }
.ps-lg-st small { font-size: .72rem; font-weight: 500; color: rgba(255,255,255,.75); }
/* the open key sits on a white panel inside the navy frame */
.ps-legend[open] { padding-bottom: .8rem; }
.ps-legend .ps-lg-row { background: #fff; color: #344054; border-top: 0; border-radius: 12px; padding: .7rem .8rem; margin-top: .5rem; }
.ps-legend .ps-lg-row:last-child { padding-bottom: .7rem; }
@media (max-width: 767px) {
  .ps-legend .ps-lg-row { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem .6rem; }
  .ps-legend .ps-lg-t { grid-column: 1 / -1; width: auto; }
}
.ps-lg-i { min-width: 0; }
/* Payday: green coin with $. Pay period starts: green ring with $ */
.ps-mk.mk-payday, .ps-mk.mk-paystart { width: 13px; height: 13px; display: inline-flex; align-items: center; justify-content: center; font-style: normal; }
.ps-mk.mk-payday { background: #16A34A; box-shadow: none; }
.ps-mk.mk-paystart, .ps-kdots .ps-mk.mk-paystart { background: #fff; box-shadow: inset 0 0 0 1.5px #16A34A; }
.ps-mk.mk-payday::after, .ps-mk.mk-paystart::after { content: '$'; font: 800 9px/1 system-ui, sans-serif; }
.ps-mk.mk-payday::after { color: #fff; }
.ps-mk.mk-paystart::after { color: #16A34A; }
.ps-kdots { min-height: 13px; align-items: center; }
.ps-day.is-today .ps-mk.mk-paystart { background: #fff; }
/* Note: a teal folded corner on the cell */
.ps-note-dot { top: 0; right: 0; width: 0; height: 0; border-radius: 0 4px 0 0; background: none; border-style: solid; border-width: 0 11px 11px 0; border-color: transparent #0F766E transparent transparent; }
.ps-lg-note { width: 18px; height: 18px; border-radius: 4px; background: #F2F4F7; box-shadow: inset 0 0 0 1px #D0D5DD; position: relative; overflow: hidden; }
.ps-lg-note::after { content: ''; position: absolute; top: 0; right: 0; border-style: solid; border-width: 0 9px 9px 0; border-color: transparent #0F766E transparent transparent; }
#ps-today { white-space: nowrap; flex: none; }

/* Update 492: no flashing lights behind the patch, on the holiday banner, Departments or AFPD Schedule; holiday snow sits still */
.db-lit-off::before { display: none; }
.anb-snow i { animation: none !important; top: var(--y, 50%); }
/* Update 492: the Tahoe's blue light, the On duty dot and the vehicle status dot hold still */
.ps-tt-duty::after, .status-live .dot { animation: none !important; box-shadow: none !important; opacity: 1 !important; }

/* Update 495: schedule change history (FM only) */
.ph-sum { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.6rem 0 0.8rem; }
.ph-who { padding: 0.3rem 0.7rem; border-radius: 999px; background: #FDE8E8; color: #991B1B; font-size: 0.85rem; }
.ph-none { padding: 0.45rem 0.8rem; border-radius: 10px; background: #E8F6EE; color: #166534; font-size: 0.9rem; font-weight: 600; }
.ph-seg { display: inline-flex; border: 1px solid #D5DEEA; border-radius: 999px; overflow: hidden; margin-bottom: 0.6rem; }
.ph-seg button { border: 0; background: #fff; padding: 0.4rem 0.9rem; font: inherit; font-size: 0.85rem; font-weight: 700; color: #475569; cursor: pointer; }
.ph-seg button.on { background: #1B3A6B; color: #fff; }
.ph-day { margin: 0.9rem 0 0.3rem; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: #5B6B82; }
.ph-row { display: grid; grid-template-columns: 72px 1fr; gap: 0.6rem; padding: 0.55rem 0; border-bottom: 1px solid #EEF2F7; }
.ph-t { font-size: 0.82rem; color: #64748B; padding-top: 0.1rem; }
.ph-by { font-weight: 700; color: #102544; }
.ph-what { font-size: 0.9rem; color: #334155; overflow-wrap: anywhere; }

/* Update 498: Swap a shift card on Crossing Guards > Shift Coverage */
.cgs-card { border: 2px solid #1B3A6B; }
.cgs-card .cg-h { display: flex; align-items: center; gap: 0.45rem; }
.cgs-card .cg-h .ic { width: 18px; height: 18px; }
.cgs-sub { margin: -0.2rem 0 0.8rem; }

/* Update 499: Officer Development requests and approvals */
.td-draft { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin: 0.8rem 0 0; padding: 0.65rem 0.8rem; border-radius: 12px; background: #FFF7E6; border: 1px solid #F5C77E; color: #7A4B00; }
.td-draft .ic { width: 16px; height: 16px; }
.td-draft span { flex: 1 1 180px; }
.td-openrow { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-top: 0.6rem; color: #64748B; }
.td-ask { margin-top: 0.8rem; padding: 0.8rem; border-radius: 12px; background: #F4F7FB; border: 1px solid #D5DEEA; }
.td-ask label { display: flex; flex-direction: column; gap: 0.2rem; margin-bottom: 0.5rem; }
.td-ask label small { color: #64748B; }
.td-why { width: 100%; }
.td-steps { flex: 1 1 220px; }
.td-st.wait { color: #B45309; } .td-st.ok { color: #1D4ED8; } .td-st.yes { color: #15803D; } .td-st.no { color: #B91C1C; }
.td-st .ic { width: 15px; height: 15px; vertical-align: -2px; }
.td-chip { display: inline-block; padding: 0.15rem 0.55rem; border-radius: 999px; font-size: 0.75rem; font-weight: 700; background: #EEF2F7; color: #334155; }
.td-chip.wait { background: #FEF3C7; color: #92400E; } .td-chip.ok { background: #DBEAFE; color: #1E40AF; } .td-chip.yes { background: #DCFCE7; color: #166534; } .td-chip.no { background: #FEE2E2; color: #991B1B; }
.td-req { padding: 0.7rem 0; border-bottom: 1px solid #EEF2F7; }
.td-req:last-child { border-bottom: 0; }
.td-req-h { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.td-req-h small { color: #64748B; margin-left: auto; }
.td-req-t { color: #334155; margin-top: 0.2rem; }
.td-req-why { margin: 0.4rem 0; padding: 0.5rem 0.7rem; border-left: 3px solid #93C5FD; background: #F8FAFC; white-space: pre-wrap; }
.td-req-b { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.45rem; }
.td-req-b:empty { display: none; }
.td-wait { border: 2px solid #F59E0B; }
.td-wait h3 { display: flex; align-items: center; gap: 0.45rem; margin: 0 0 0.2rem; }

/* Update 501: the date bar follows the page even when the schedule scrolls sideways */
.ps-stickhead.ps-float { position: relative; z-index: 20; box-shadow: 0 6px 16px rgba(16,37,68,.18); border: 2px solid #1B4384; }
/* Update 501: "Today" stays on one line in narrow day columns */
.ps-day.is-today .ps-dow { white-space: nowrap; letter-spacing: 0.02em; font-size: clamp(0.55rem, 0.9vw, 0.7rem); }

/* Update 503: Directory view switch (Rank / Call number) */
.dir-view { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 0.7rem; }
.dir-view > span { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #5B6B82; margin-right: 0.2rem; }
.dir-view button { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 1rem; border-radius: 999px; border: 1.5px solid #C9D3E1; background: #fff; color: #1B3A6B; font: inherit; font-weight: 700; font-size: 0.92rem; cursor: pointer; }
.dir-view button .ic { width: 16px; height: 16px; }
.dir-view button.on { background: #1B3A6B; border-color: #1B3A6B; color: #fff; }
.dir-sec { display: block; color: #64748B; font-size: 0.8rem; }
/* Update 504: the Directory contact box (474) shares the "dc" class name with the Dashboard's card slots.
   Undo its look on the Dashboard so cards fill their columns again (no 440px cap, no white frame). */
.dash-col > .dc, .dash-cols > .dc, .dash-cols .dc:not(.dir-contact .dc) { display: block; max-width: none; width: auto; background: none; border: 0; border-radius: 0; overflow: visible; box-shadow: none; }

/* Update 506: fewer repeats on the home page.
   Departments and AFPD Schedule sit side by side in one row. The Open Issues tile is gone (the Issues card shows it),
   so the tiles are 3 across (4 with Next in Line). The drawer's New Issue button hides on phones, where Report is in the bottom bar. */
.csb-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-bottom: 1rem; }
.csb-pair > .csb { margin: 0 !important; min-width: 0; }
.csb-pair .csb-mini .csb-title { font-size: clamp(1rem, 2.4vw, 1.5rem); white-space: nowrap; }
.stats-grid { grid-template-columns: repeat(3, 1fr); }
@media (min-width: 768px) {
  .stats-grid { grid-template-columns: repeat(3, 1fr); }
  .stats-grid.has-next { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 767px) { .nav-new.staff-only { display: none !important; } }
@media (max-width: 767px) {
  .csb-pair { gap: 0.5rem; }
  .csb-pair .csb.csb-mini { padding: 0.75rem 0.4rem; }
  .csb-pair .csb-mini .csb-title { font-size: clamp(0.85rem, 3.9vw, 1.1rem) !important; letter-spacing: 0.02em; }
  .stats-grid.has-next { grid-template-columns: repeat(2, 1fr); }
  .stats-grid.has-next .stat-next { grid-column: auto; }
}

/* Update 507: one search for the whole site. A big rounded bar under the main banner, results drop down under it. */
.hs-wrap { position: relative; margin: 0 0 1rem; z-index: 30; }
.hs-bar { display: flex; align-items: center; gap: 0.7rem; background: var(--card, #fff); border: 2px solid #C9D3E0; border-radius: 999px; padding: 0 1.2rem; min-height: 54px; box-shadow: 0 2px 10px rgba(16, 37, 68, 0.08); cursor: text; }
.hs-bar:focus-within { border-color: var(--primary); box-shadow: 0 4px 18px rgba(16, 37, 68, 0.16); }
.hs-bar .ic { width: 22px; height: 22px; color: var(--muted); flex: none; }
.hs-bar input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-size: 1.05rem; color: var(--text); padding: 0.85rem 0; -webkit-appearance: none; appearance: none; }
.hs-bar input::placeholder { color: var(--muted); }
.hs-out { position: absolute; left: 0; right: 0; top: calc(100% + 6px); background: var(--card, #fff); border: 1.5px solid #C9D3E0; border-radius: 16px; padding: 0.6rem; box-shadow: 0 18px 40px rgba(16, 37, 68, 0.22); max-height: min(70vh, 640px); overflow-y: auto; overscroll-behavior: contain; }
.hs-out[hidden] { display: none; }
.gs-group { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 0.65rem 0.35rem 0.3rem; }
.gs-group:first-child { margin-top: 0.15rem; }
.gs-row { display: flex; gap: 0.35rem; align-items: stretch; margin-bottom: 0.35rem; }
.gs-row .gs-item { margin: 0; flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.6rem; }
.gs-row .gs-item > .ic { width: 18px; height: 18px; flex: none; color: var(--primary); }
.gs-t { min-width: 0; display: flex; flex-direction: column; }
.gs-t b, .gs-t small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-t small { margin: 0.1rem 0 0 !important; }
.gs-call { display: flex; align-items: center; justify-content: center; width: 46px; flex: none; border-radius: 10px; border: 1.5px solid var(--border); background: var(--surface); color: #1F7A4D; }
.gs-call .ic { width: 18px; height: 18px; }
.gs-call:hover { border-color: #1F7A4D; }
#gs-results mark, .hs-out mark { background: #FFE58A; color: inherit; border-radius: 3px; padding: 0 1px; }
.gs-focus { border-color: var(--primary) !important; box-shadow: 0 0 0 2px rgba(27, 58, 107, 0.25); }
.gs-recent { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0.25rem 0.4rem; }
.gs-chip { display: inline-flex; align-items: center; gap: 0.35rem; border: 1.5px solid var(--border); background: var(--surface); border-radius: 999px; padding: 0.35rem 0.75rem; font-weight: 600; color: var(--text); cursor: pointer; }
.gs-chip .ic { width: 14px; height: 14px; color: var(--muted); }
.gs-tip { margin: 0.4rem 0.35rem; }
@media (max-width: 767px) {
  .hs-bar { min-height: 50px; padding: 0 1rem; }
  .hs-bar input { font-size: 16px; }
  .hs-out { max-height: 62vh; }
}

/* Update 508: Directory Compact view. One short line per person. */
.dir-view .dir-compact-btn { margin-left: auto; }
.dir-card.is-compact { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.dir-row.dir-crow { grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 0 0.7rem; padding: 0.4rem 0; }
.dir-crow .dir-av { width: 32px; height: 32px; margin: 0; border-width: 1px; }
.dir-crow .dir-av.is-none span { font-size: 0.75rem; }
.dcr-who { min-width: 0; line-height: 1.25; }
.dcr-who strong { font-size: 0.95rem; }
.dcr-who .badge { font-size: 0.72rem; padding: 0.05rem 0.4rem; }
.dcr-who small { display: block; color: #64748B; font-size: 0.76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dcr-num { font-weight: 700; font-size: 0.92rem; white-space: nowrap; }
.dcr-num a { color: var(--primary); text-decoration: none; }
.dcr-num small { color: #64748B; font-weight: 500; }
.dcr-btns { display: flex; align-items: center; gap: 0.3rem; }
.dcr-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface, #F4F7FB); color: var(--primary); }
.dcr-btn .ic { width: 16px; height: 16px; }
.dcr-btns .btn.small { padding: 0.3rem 0.6rem; font-size: 0.8rem; }
@media (max-width: 600px) {
  .dir-view .dir-compact-btn { margin-left: 0; }
  .dir-row.dir-crow { grid-template-columns: auto minmax(0, 1fr) auto; }
  .dir-crow .dcr-num { grid-column: 2; grid-row: 2; font-size: 0.85rem; }
  .dir-crow .dcr-btns { grid-column: 3; grid-row: 1 / span 2; }
  .dir-crow .dir-av { grid-row: 1 / span 2; }
  .dcr-btn.dcr-phone { display: none; }
}

/* Update 509: Signal groups on Quick Links */
.sg-card { margin-bottom: 1rem; }
.sg-pill .ql-ic { color: #3A76F0; }
.sg-tag { font-size: 0.7rem; font-weight: 700; color: #6B4FA0; background: #EFE9F8; border-radius: 999px; padding: 0.05rem 0.5rem; margin-left: 0.3rem; }
.sg-edit { display: flex; flex-direction: column; gap: 0.45rem; margin-top: 0.6rem; }
.sg-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 0.4rem; align-items: center; }
.sg-row input, .sg-row select, #sg-paste { font: inherit; padding: 0.5rem 0.65rem; border: 1.5px solid var(--border); border-radius: 10px; background: #fff; color: var(--text); min-width: 0; }
#sg-paste { width: 100%; resize: vertical; font-size: 0.9rem; }
.sg-paste-l { font-weight: 700; font-size: 0.88rem; margin-top: 0.4rem; }

/* ===== Update 510: plan ahead, squads, on call by week, quick edit, on-call bars ===== */
.ps-ocgrid { grid-column: 2 / -1; display: grid; grid-auto-rows: minmax(42px, auto); position: relative; min-width: 0; }
.ps-ocgrid .ps-ocd { grid-row: 1; padding: 0; min-height: 42px; }
.ps-ocbar { grid-row: 1; z-index: 1; pointer-events: none; align-self: center; margin: 0 2px; min-width: 0; height: 26px; display: flex; align-items: center; justify-content: center; padding: 0 8px; border-radius: 999px; background: linear-gradient(180deg, #FFF1F3, #FFE4E9); border: 1.5px solid #FDA4AF; color: #9F1239; font-weight: 800; font-size: 0.8rem; letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 1px 2px rgba(159,18,57,.08); }
.ps-ocbar.is-det { background: linear-gradient(180deg, #EEF2FF, #E0E7FF); border-color: #A5B4FC; color: #3730A3; }
.ps-ocbar.is-in { border-top-left-radius: 6px; border-bottom-left-radius: 6px; }
.ps-ocbar.is-out { border-top-right-radius: 6px; border-bottom-right-radius: 6px; opacity: .8; }
.ps-ocbar.is-short { padding: 0 4px; font-size: 0.72rem; }
.ps-ocbar.is-tiny { padding: 0; font-size: 0.62rem; letter-spacing: 0; text-overflow: clip; }
.ps-ocd.is-today { background: #FFE4E9; }
.ps-ocwk { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; border: 1px solid #FBCFE8; background: #fff; color: #9F1239; border-radius: 999px; padding: 2px 8px; font: inherit; font-size: 0.7rem; font-weight: 700; cursor: pointer; }
.ps-ocwk .ic { width: 12px; height: 12px; stroke: currentColor; }
.ps-ocrow .ps-who.ps-hwho { flex-direction: column; align-items: flex-start; justify-content: center; }
@media (max-width: 700px) {
  .ps-ocbar { font-size: 0.7rem; padding: 0 4px; height: 24px; margin: 0 1px; }
  .ps-ocbar.is-short { font-size: 0.64rem; padding: 0 2px; }
  .ps-ocwk { font-size: 0.64rem; padding: 1px 6px; }
}
.ps-tools { flex-wrap: wrap; gap: 0.4rem; }
.ps-runway { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid #FCD34D; background: #FFFBEB; color: #92400E; border-radius: 999px; padding: 0.3rem 0.75rem; font: inherit; font-size: 0.8rem; font-weight: 700; cursor: pointer; }
.ps-runway .ic { width: 14px; height: 14px; stroke: currentColor; }
.ps-runway:hover { background: #FEF3C7; }
/* Planner cards */
.pa-back { align-items: flex-start; overflow-y: auto; }
.pa-card { max-width: 560px; text-align: left; border-top: 0; padding: 1.1rem 1.15rem 1rem; margin: auto 0; }
.pa-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.6rem; }
.pa-h h3 { margin: 0.15rem 0 0.15rem; font-size: 1.3rem; }
.pa-h .tc-kicker { color: #B07A00; } .pa-h .tc-kicker svg { stroke: #B07A00; }
.pa-done { display: flex; gap: 0.5rem; align-items: flex-start; background: #ECFDF3; border: 1px solid #ABEFC6; color: #085D3A; border-radius: 12px; padding: 0.6rem 0.75rem; font-size: 0.88rem; font-weight: 600; margin-bottom: 0.7rem; }
.pa-done .ic { width: 18px; height: 18px; stroke: #079455; flex: none; margin-top: 1px; }
.pa-run { display: grid; grid-template-columns: 1fr auto; gap: 0.2rem 0.75rem; align-items: center; background: linear-gradient(135deg, #12305F, #1F4FA8); color: #fff; border-radius: 14px; padding: 0.85rem 1rem; margin-bottom: 0.4rem; }
.pa-run small { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: .08em; opacity: .8; font-weight: 700; }
.pa-run-t b { font-size: 1.1rem; }
.pa-run-n { text-align: right; } .pa-run-n b { font-size: 1.7rem; line-height: 1; }
.pa-meter { grid-column: 1 / -1; height: 6px; border-radius: 999px; background: rgba(255,255,255,.2); overflow: hidden; margin-top: 0.4rem; }
.pa-meter i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #34D399, #A7F3D0); }
.pa-run.is-low { background: linear-gradient(135deg, #7C2D12, #C2410C); }
.pa-run.is-low .pa-meter i { background: linear-gradient(90deg, #FCD34D, #FDE68A); }
.pa-sec { border-top: 1px solid #EEF1F5; padding-top: 0.8rem; margin-top: 0.8rem; }
.pa-sec h4 { display: flex; align-items: center; gap: 0.4rem; margin: 0 0 0.5rem; font-size: 1rem; }
.pa-sec h4 .ic { width: 17px; height: 17px; stroke: #1F4FA8; }
.pa-hint { font-size: 0.84rem; margin: 0.35rem 0 0.6rem; }
.pa-chips, .ow-pick { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.pa-chip { border: 1.5px solid #D0D5DD; background: #fff; border-radius: 999px; padding: 0.4rem 0.85rem; font: inherit; font-size: 0.88rem; font-weight: 700; color: #344054; cursor: pointer; display: inline-flex; align-items: center; gap: 0.3rem; }
.pa-chip .ic { width: 14px; height: 14px; stroke: currentColor; }
.pa-chip.on { background: #12305F; border-color: #12305F; color: #fff; }
.pa-chip.ghost { border-style: dashed; color: #475467; }
.pa-new { margin: 0.55rem 0 0; font-size: 0.9rem; }
.pa-go { width: 100%; justify-content: center; }
.pa-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.pa-row select { flex: 1 1 200px; font: inherit; padding: 0.55rem 0.6rem; border: 1.5px solid var(--border, #D0D5DD); border-radius: 10px; background: #fff; }
.pa-periods { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.7rem; }
.pa-per { display: flex; align-items: center; gap: 0.6rem; border: 1px solid #E4E7EC; border-radius: 12px; padding: 0.55rem 0.7rem; }
.pa-per-d { flex: 1; min-width: 0; } .pa-per-d b { display: block; } .pa-per-d small { color: #667085; font-size: 0.8rem; }
.pa-per em { font-style: normal; font-size: 0.7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #166534; background: #E2F4E8; border-radius: 999px; padding: 2px 8px; }
.pa-per.is-now { border-color: #ABEFC6; background: #F6FEF9; }
/* Squad builder */
.sq-card { max-width: 1180px; }
.sq-tip { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; font-size: 0.86rem; color: #475467; background: #F8FAFC; border: 1px dashed #D0D5DD; border-radius: 12px; padding: 0.55rem 0.75rem; margin: 0 0 0.7rem; }
.sq-tip .ic { width: 16px; height: 16px; stroke: currentColor; }
.sq-tip.is-on { background: #FFFBEB; border: 1.5px solid #FCD34D; color: #92400E; font-weight: 600; }
.sq-len { margin-bottom: 0.6rem; font-weight: 700; font-size: 0.88rem; }
.sq-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0.7rem; }
.sq-sq { border: 1.5px solid #E4E7EC; border-radius: 14px; background: #FCFCFD; padding: 0.55rem; display: flex; flex-direction: column; gap: 0.4rem; transition: border-color .15s, box-shadow .15s, background .15s; }
.sq-sq.is-target { border-color: #FCD34D; border-style: dashed; background: #FFFDF5; }
.sq-sq.is-over { border-color: #1F4FA8; border-style: solid; box-shadow: 0 0 0 4px rgba(31,79,168,.15); background: #F5F8FF; }
.sq-sqh { display: flex; align-items: center; gap: 0.5rem; padding: 0.15rem 0.2rem 0.35rem; border-bottom: 1px solid #EEF1F5; cursor: default; }
.sq-sq.is-target .sq-sqh { cursor: pointer; }
.sq-sqh .ps-gic { width: 30px; height: 30px; border-radius: 10px; background: linear-gradient(160deg, #64748B, #475569); flex: none; }
.sq-day .ps-gic { background: linear-gradient(160deg, #F59E0B, #D97706); }
.sq-night .ps-gic { background: linear-gradient(160deg, #6366F1, #4338CA); }
.sq-off .ps-gic { background: linear-gradient(160deg, #98A2B3, #667085); }
.sq-sqh .ps-gic .ic { width: 16px; height: 16px; stroke: #fff; }
.sq-st { flex: 1; min-width: 0; } .sq-st b { display: block; font-size: 0.95rem; } .sq-st small { color: #667085; font-size: 0.78rem; font-weight: 600; }
.sq-sqh em { font-style: normal; font-weight: 800; font-size: 0.8rem; background: #EEF2F7; color: #344054; border-radius: 999px; padding: 2px 9px; }
.sq-list { display: flex; flex-direction: column; gap: 0.3rem; min-height: 36px; }
.sq-empty { margin: 0.4rem; color: #98A2B3; font-size: 0.84rem; }
.sq-chip { display: flex; align-items: center; gap: 0.5rem; background: #fff; border: 1.5px solid #E4E7EC; border-radius: 11px; padding: 0.35rem 0.4rem 0.35rem 0.45rem; cursor: grab; user-select: none; -webkit-user-select: none; transition: transform .12s, box-shadow .12s, border-color .12s; }
.sq-chip:hover { border-color: #B2C3E0; }
.sq-chip .ps-av { width: 28px; height: 28px; background: #E6ECF6; color: #1F3B63; font-size: 0.78rem; }
.sq-ct { flex: 1; min-width: 0; line-height: 1.15; } .sq-ct b { display: block; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sq-ct small { color: #667085; font-size: 0.74rem; font-weight: 600; }
.sq-chip.is-slot { background: #F9FAFB; border-style: dashed; } .sq-chip.is-slot .sq-ct b { color: #667085; }
.sq-chip.is-moved { border-color: #FCD34D; background: #FFFBEB; } .sq-chip.is-moved .sq-ct small { color: #B45309; }
.sq-chip.is-sel { border-color: #1F4FA8; box-shadow: 0 0 0 3px rgba(31,79,168,.2), 0 8px 18px rgba(16,37,68,.15); transform: translateY(-1px) scale(1.02); }
.sq-chip.is-drag { opacity: .4; }
.sq-x { border: 0; background: none; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; cursor: pointer; flex: none; }
.sq-x .ic { width: 14px; height: 14px; stroke: #98A2B3; } .sq-x:hover { background: #FEE4E2; } .sq-x:hover .ic { stroke: #D92D20; }
.sq-here, .sq-add { border: 1.5px dashed #D0D5DD; background: none; border-radius: 10px; padding: 0.4rem; font: inherit; font-size: 0.84rem; font-weight: 700; color: #475467; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 0.3rem; }
.sq-here { border: 1.5px solid #F59E0B; background: #FEF3C7; color: #92400E; }
.sq-here .ic, .sq-add .ic { width: 14px; height: 14px; stroke: currentColor; }
.sq-foot { position: sticky; bottom: -1rem; display: flex; align-items: center; gap: 0.5rem; justify-content: flex-end; background: var(--card, #fff); border-top: 1px solid #EEF1F5; margin: 0.8rem -1.15rem -1rem; padding: 0.7rem 1.15rem; border-radius: 0 0 16px 16px; }
.sq-count { margin-right: auto; font-size: 0.86rem; color: #667085; font-weight: 600; }
.sq-count.has { color: #B45309; font-weight: 800; }
/* On call by week */
.ow-card { max-width: 560px; }
.ow-tools { display: flex; justify-content: flex-end; margin-bottom: 0.5rem; }
.ow-rot { border: 1.5px solid #E0E7FF; background: #F8FAFF; border-radius: 14px; padding: 0.7rem; margin-bottom: 0.7rem; }
.ow-rot p { margin: 0 0 0.5rem; font-size: 0.84rem; }
.ow-rl { list-style: none; margin: 0 0 0.5rem; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.ow-rl li { display: flex; align-items: center; gap: 0.5rem; background: #fff; border: 1px solid #E4E7EC; border-radius: 10px; padding: 0.3rem 0.4rem; }
.ow-rn { width: 22px; text-align: center; font-weight: 800; color: #667085; font-size: 0.8rem; }
.ow-ra { margin-left: auto; display: flex; gap: 2px; } .ow-ra .icon-btn { width: 30px; height: 30px; font-weight: 800; }
.ow-rot .pa-row { margin-top: 0.4rem; font-size: 0.88rem; font-weight: 600; }
.ow-list { display: flex; flex-direction: column; gap: 0.35rem; }
.ow-row { display: grid; grid-template-columns: minmax(96px, auto) 1fr; gap: 0.5rem; align-items: center; border: 1.5px solid #E4E7EC; border-radius: 12px; padding: 0.4rem 0.5rem 0.4rem 0.7rem; background: #fff; }
.ow-row.is-now { border-color: #A5B4FC; background: #F5F7FF; }
.ow-row.is-ch { border-color: #FCD34D; background: #FFFBEB; }
.ow-row.is-tradeable { border-style: dashed; border-color: #F59E0B; }
.ow-d b { display: block; font-size: 0.9rem; } .ow-d small { color: #667085; font-size: 0.74rem; font-weight: 600; }
.ow-row.is-now .ow-d small { color: #3730A3; font-weight: 800; }
.ow-name { display: flex; align-items: center; gap: 0.5rem; border: 0; background: none; font: inherit; text-align: left; padding: 0.3rem 0.4rem; border-radius: 10px; cursor: pointer; min-width: 0; }
.ow-name:hover { background: #F2F4F7; }
.ow-name .ps-av { width: 30px; height: 30px; background: #E0E7FF; color: #3730A3; }
.ow-nt { min-width: 0; line-height: 1.15; } .ow-nt b { display: block; } .ow-nt small { color: #667085; font-size: 0.74rem; font-weight: 600; }
.ow-name s { margin-left: auto; color: #98A2B3; font-size: 0.8rem; }
.ow-nobody { color: #98A2B3; font-weight: 600; font-style: italic; }
.ow-pick { grid-column: 1 / -1; padding: 0.3rem 0 0.2rem; }
/* Shift editor: the same shift for more days */
.ps-thru { text-align: left; margin: 0.6rem 0 0.2rem; border: 1px solid #E4E7EC; border-radius: 10px; padding: 0.45rem 0.6rem; }
.ps-thru summary { cursor: pointer; font-weight: 700; font-size: 0.88rem; display: flex; align-items: center; gap: 0.35rem; }
.ps-thru summary .ic { width: 15px; height: 15px; stroke: #1F4FA8; }
.ps-thru-b { display: flex; flex-wrap: wrap; gap: 0.4rem 0.6rem; align-items: center; margin-top: 0.5rem; font-size: 0.88rem; }
.ps-thru-b input[type=date] { font: inherit; padding: 0.4rem 0.5rem; border: 1.5px solid #D0D5DD; border-radius: 9px; }
.ps-thru-w { display: inline-flex; align-items: center; gap: 0.3rem; font-weight: 600; }
.ps-ocweek { width: 100%; justify-content: center; margin-top: 0.45rem; }
/* Quick edit */
.pq-bar { position: fixed; left: 50%; transform: translateX(-50%); bottom: 18px; z-index: 900; width: min(760px, calc(100vw - 24px)); background: #0F1B2D; color: #fff; border-radius: 18px; padding: 0.6rem 0.7rem 0.7rem; box-shadow: 0 16px 40px rgba(0,0,0,.35); }
.pq-top { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.pq-top b { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.92rem; } .pq-top b .ic { width: 15px; height: 15px; stroke: #F2C14E; }
.pq-top small { flex: 1; min-width: 0; color: #B6C2D4; font-size: 0.78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pq-top .btn.ghost { color: #fff; border-color: rgba(255,255,255,.3); background: transparent; }
.pq-top .btn.ghost .ic { stroke: #fff; }
.pq-codes { display: flex; gap: 0.35rem; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.pq-c { flex: none; border: 2px solid transparent; background: rgba(255,255,255,.08); border-radius: 12px; padding: 0.3rem; cursor: pointer; min-width: 52px; display: grid; place-items: center; }
.pq-c .ic { width: 16px; height: 16px; stroke: #fff; }
.pq-c.on { border-color: #F2C14E; background: rgba(242,193,78,.18); }
.pq-off { color: #fff; font-weight: 800; font-size: 0.8rem; padding: 0.2rem 0.4rem; }
.ps-painting .ps-cell[data-r] { cursor: crosshair; }
.ps-painting .ps-cell[data-r]:hover { box-shadow: inset 0 0 0 2px #F2C14E; }
.ps-painting .ps-card { margin-bottom: 140px; }
.ps-cell.pq-pop .ps-code { animation: pqPop .28s ease-out; }
@keyframes pqPop { 0% { transform: scale(.6); } 70% { transform: scale(1.12); } 100% { transform: scale(1); } }
@media (max-width: 767px) { .pq-bar { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); } .sq-grid { grid-template-columns: 1fr; } .pa-back { padding: 8px; } .pa-card { padding: 1rem 0.9rem 0.9rem; } .sq-foot { margin: 0.8rem -0.9rem -0.9rem; padding: 0.7rem 0.9rem; } }
.sq-chip .ps-av, .ow-name .ps-av, .ow-rl .ps-av { display: inline-flex; }
.sq-foot { flex-wrap: wrap; }
.sq-move { flex: 1 1 100%; display: flex; gap: 0.35rem; overflow-x: auto; align-items: center; padding-bottom: 0.4rem; scrollbar-width: none; }
.sq-move small { flex: none; font-weight: 800; color: #92400E; font-size: 0.78rem; text-transform: uppercase; letter-spacing: .05em; }
.sq-move .pa-chip { flex: none; border-color: #F59E0B; background: #FEF3C7; color: #92400E; padding: 0.35rem 0.7rem; font-size: 0.82rem; }
@media (min-width: 768px) { .sq-move { display: none; } }

/* ===== Update 511: on-call name on every day tile, kept to one line ===== */
.ps-ocrow .ps-ocd { padding: 0.35rem 1px; gap: 3px; }
.ps-ocd span { display: block; width: 100%; max-width: 100%; overflow: hidden; text-overflow: clip; text-align: center; }
.ps-ocd span em { display: inline-block; font-style: normal; white-space: nowrap; transform-origin: center; background: #FFE4E9; border: 1px solid #FDA4AF; color: #9F1239; border-radius: 7px; padding: 2px 4px; font-weight: 800; font-size: 0.78rem; line-height: 1.2; }
.ps-ocd.is-det span em { background: #E0E7FF; border-color: #A5B4FC; color: #3730A3; }
.ps-ocd.is-hand span em { font-size: 0.7rem; }
.ps-ocd.is-hand span + span em { opacity: 1; }
.ps-ocd.is-hand span:first-child em { opacity: .7; }
.ps-ocd span em i { font-style: normal; margin-right: 1px; }
.ps-ocd.is-today span em { background: #9F1239; border-color: #9F1239; color: #fff; }
.ps-ocd.is-det.is-today span em { background: #3730A3; border-color: #3730A3; }
@media (max-width: 700px) { .ps-ocd span em { padding: 2px 2px; font-size: 0.72rem; border-radius: 6px; } .ps-ocd.is-hand span em { font-size: 0.66rem; } }
.ps-ocd span { display: flex; justify-content: center; }
.ps-ocd span em { flex: none; }
.ps-ocd.is-hand span:first-child em { opacity: .55; font-weight: 700; }

/* ===== Update 512: print my time card ===== */
.tc-pbtns { display: flex; gap: 0.4rem; flex-wrap: wrap; justify-content: flex-end; }
.tcp-card { max-width: 520px; text-align: left; max-height: 92vh; overflow: auto; }
.tcp-sum { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin: 0.4rem 0; }
.tcp-wk { border: 1px solid #E4E7EC; border-radius: 12px; padding: 0.5rem 0.6rem; }
.tcp-wkh { display: flex; justify-content: space-between; border-bottom: 1px solid #EEF1F5; padding-bottom: 0.3rem; margin-bottom: 0.3rem; }
.tcp-wkh span { font-weight: 800; color: #12305F; }
.tcp-day { display: flex; justify-content: space-between; gap: 0.5rem; font-size: 0.84rem; padding: 2px 0; }
.tcp-day span { color: #667085; white-space: nowrap; } .tcp-day b { text-align: right; }
.tcp-tot { display: flex; align-items: baseline; gap: 0.5rem; background: #12305F; color: #fff; border-radius: 12px; padding: 0.55rem 0.8rem; margin: 0.5rem 0; }
.tcp-tot b { margin-left: auto; font-size: 1.15rem; } .tcp-tot small { color: #F2C14E; font-weight: 700; }
.tcp-sig { border: 1px dashed #D0D5DD; border-radius: 10px; padding: 0.5rem; min-height: 60px; display: flex; align-items: center; }
.tcp-sig img { max-height: 60px; max-width: 100%; } .tcp-sig.off { opacity: .3; }
.tcp-sigb { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin: 0.45rem 0; }
.tcp-chk { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 600; margin-right: auto; }
@media (max-width: 520px) { .tcp-sum { grid-template-columns: 1fr; } }

/* ===== Update 513: print review keeps Print and Cancel on screen ===== */
.rr-back:has(.tcp-card) { align-items: center; padding: 10px; }
.tcp-card { max-height: calc(100vh - 20px); max-height: calc(100dvh - 20px); overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 0; }
.tcp-foot { position: sticky; bottom: 0; z-index: 2; background: var(--card, #fff); margin: 0.6rem -1.3rem 0; padding: 0.7rem 1.3rem calc(0.8rem + env(safe-area-inset-bottom, 0px)); border-top: 1px solid #EEF1F5; box-shadow: 0 -6px 14px rgba(16,37,68,.08); display: flex; gap: 0.5rem; }
.tcp-foot .btn { flex: 1; justify-content: center; min-height: 46px; }
@media (max-width: 520px) { .tcp-card .tcp-day { font-size: 0.8rem; } .tcp-sum { gap: 0.4rem; } }

/* ===== Update 514: print sheet inside the site (time cards) ===== */
#print-sheet { position: fixed; inset: 0; z-index: 100000; overflow: auto; -webkit-overflow-scrolling: touch; background: #e9edf3; }
html.printing-sheet, html.printing-sheet body { overflow: hidden; }
@media print {
  @page { size: letter; margin: 0.25in; }
  html.printing-sheet, html.printing-sheet body { overflow: visible !important; height: auto !important; background: #fff !important; margin: 0 !important; padding: 0 !important; }
  html.printing-sheet body > *:not(#print-sheet) { display: none !important; }
  #print-sheet { position: static; overflow: visible; background: #fff; }
}

/* Update 516: search under the tabs; smaller on-call cards */
.ps-findtop { background: #fff; border: 1px solid #E3E8EF; border-radius: 14px; margin-bottom: 0.6rem; padding: 0.4rem 0.5rem; box-shadow: 0 1px 2px rgba(16,37,68,.04); }
.ps-findtop .ps-find-list { left: 0; right: 0; top: calc(100% + 4px); }
.ps-find-sep { font-size: 0.7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #8A97AB; padding: 0.5rem 0.65rem 0.2rem; border-top: 1px solid #EEF1F5; margin-top: 2px; }
.ps-find-list button small.ps-find-tab { color: #1B4384; font-weight: 700; }
.ps-oncall { gap: 0.5rem; margin-bottom: 0.6rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.ps-ocp { padding: 0.55rem 0.75rem 0.65rem 0.9rem; border-radius: 12px; }
.ps-ocp::before { width: 4px; }
.ps-ocp-l { font-size: 0.66rem; gap: 0.4rem; }
.ps-ocp-ic { width: 20px; height: 20px; border-radius: 6px; }
.ps-ocp-ic .ic { width: 12px; height: 12px; }
.ps-ocp-l em { font-size: 0.6rem; padding: 1px 6px; }
.ps-ocp-name { margin: 0.25rem 0 0; font-size: 1.12rem; }
.ps-ocp-name small { font-size: 0.78rem; }
.ps-ocp-when { font-size: 0.76rem; }
.ps-ocp-acts { margin-top: 0.4rem; gap: 0.4rem; }
.ps-ocp .ps-call { min-height: 34px; padding: 0 0.7rem; border-radius: 9px; font-size: 0.85rem; }
.ps-ocp .ps-call .ic { width: 15px; height: 15px; }
.ps-ocp-nophone, .ps-ocp-none { font-size: 0.76rem; }
.ps-ocp-none { margin-top: 0.3rem; }
@media (max-width: 700px) { .ps-oncall { grid-template-columns: 1fr 1fr; gap: 0.45rem; } .ps-ocp { padding: 0.5rem 0.55rem 0.55rem 0.75rem; } .ps-ocp-name { font-size: 1rem; } .ps-ocp-l span:not(.ps-ocp-ic) { font-size: 0.6rem; letter-spacing: .04em; } .ps-ocp-when { font-size: 0.7rem; line-height: 1.25; } .ps-ocp .ps-call { min-height: 32px; padding: 0 0.4rem; font-size: 0.78rem; gap: 0.25rem; } }
@media (max-width: 700px) { .ps-ocp-l { white-space: nowrap; letter-spacing: .03em; } .ps-ocp-l em { display: none; } .ps-ocp-nophone { font-size: 0.68rem; line-height: 1.25; display: block; } }
.ps-find-sep:first-child { border-top: 0; margin-top: 0; }

/* Update 517: schedule header card, even and centered */
.ps-hero .ps-nav { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 0.6rem; flex: 1 1 100%; }
.ps-hero .ps-arrow { width: 44px; height: 44px; }
.ps-hero .ps-range { align-items: center; text-align: center; padding: 0; }
.ps-hero .ps-range small { display: flex; align-items: center; justify-content: center; gap: 0.3rem; margin-top: 0.15rem; }
.ps-wk-now { font-weight: 600; }
.ps-wk-today { display: inline-flex; align-items: center; gap: 0.3rem; border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.14); color: #fff; font: inherit; font-size: 0.78rem; font-weight: 700; padding: 0.2rem 0.65rem; border-radius: 999px; cursor: pointer; }
.ps-wk-today .ic { width: 13px; height: 13px; stroke: #fff; }
.ps-hero .ps-tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.5rem; margin-top: 0.8rem; }
.ps-hero .ps-tools .btn { justify-content: center; display: inline-flex; align-items: center; gap: 0.4rem; min-height: 42px; margin: 0; border-radius: 12px; width: 100%; }
.ps-hero .ps-tools .btn.primary { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.3); color: #fff; box-shadow: none; }
.ps-hero .ps-tools .btn.primary[aria-pressed="true"], .ps-hero .ps-tools #ps-plan { background: #fff; color: #12305F; border-color: #fff; }
.ps-hero .ps-tools #ps-plan .ic { stroke: #12305F; }
.ps-hero .ps-runway, .ps-hero .ps-meta { grid-column: 1 / -1; text-align: center; }
.ps-hero .ps-today { margin-top: 0.8rem; }
.ps-hero .ps-tt { justify-content: center; text-align: center; }
.ps-hero .ps-tt > span:last-child { align-items: center; }
.ps-cgc { padding-bottom: 0.6rem; }
.ps-cgc::before { display: none; }
@media (max-width: 700px) {
  .ps-hero .ps-tools { grid-template-columns: 1fr 1fr; }
  .ps-hero .ps-tools .btn { font-size: 0.86rem; padding: 0 0.5rem; }
  .ps-cgc-t b { font-size: 0.98rem; }
}
.ps-hero .ps-tools { flex: 1 1 100%; width: 100%; box-sizing: border-box; }
.ps-hero .ps-tools > * { min-width: 0; }
@media (max-width: 700px) { .ps-hero .ps-today { margin-top: 0.4rem; } }

/* Update 519: Equipment checklists */
.ckl-cards { display: grid; gap: 0.6rem; }
.ckl-card { display: flex; align-items: center; gap: 0.75rem; width: 100%; text-align: left; font: inherit; color: inherit; background: #fff; border: 1px solid #E3E8EF; border-radius: 14px; padding: 0.8rem 0.9rem; cursor: pointer; }
.ckl-card:hover { border-color: #B9C6DA; background: #F8FAFD; }
.ckl-card-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.ckl-card-t b { font-size: 1.02rem; color: #12305F; }
.ckl-card-t small { color: #667085; font-size: 0.8rem; }
.ckl-card em { font-style: normal; font-weight: 800; color: #15803D; font-size: 0.95rem; }
.ckl-go { font-size: 1.4rem; color: #98A2B3; }
.ckl-bar { display: block; height: 6px; border-radius: 999px; background: #EEF1F5; overflow: hidden; margin-top: 0.3rem; }
.ckl-bar i { display: block; height: 100%; background: linear-gradient(90deg, #22C55E, #15803D); border-radius: 999px; }
.ckl-head .dp-h .btn { margin-left: auto; }
.ckl-prog { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0.5rem; margin: 0.6rem 0; }
.ckl-pc { background: #F7F9FC; border: 1px solid #E8ECF2; border-radius: 12px; padding: 0.55rem 0.7rem; min-width: 0; }
.ckl-pc small { display: block; font-size: 0.72rem; font-weight: 700; color: #5B6B82; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ckl-pc b { font-size: 1.15rem; color: #12305F; } .ckl-pc b span { font-size: 0.78rem; color: #8A97AB; font-weight: 600; }
.ckl-tools { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.ckl-tools .search-input { flex: 1 1 240px; margin: 0; }
.ckl-chips { display: flex; gap: 0.35rem; }
.ckl-chip { border: 1px solid #D5DDE8; background: #fff; color: #12305F; font: inherit; font-size: 0.82rem; font-weight: 700; padding: 0.4rem 0.75rem; border-radius: 999px; cursor: pointer; }
.ckl-chip.on { background: #12305F; color: #fff; border-color: #12305F; }
#ckl-rows { margin-top: 0.6rem; }
.ckl-table { background: #fff; border: 1px solid #E3E8EF; border-radius: 14px; overflow: hidden; margin-bottom: 1rem; }
.ckl-tr { display: grid; grid-template-columns: minmax(0, 1fr) repeat(var(--nc), minmax(110px, 150px)); align-items: stretch; border-top: 1px solid #EEF1F5; }
.ckl-tr.is-done { background: #F3FBF5; }
.ckl-th { border-top: 0; background: #F4F6FA; position: sticky; top: var(--ps-top, 60px); z-index: 2; }
.ckl-th > div { display: flex; gap: 1rem; padding: 0.55rem 0.8rem; }
.ckl-th span { font-size: 0.7rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #5B6B82; }
.ckl-colh { padding: 0.55rem 0.5rem; text-align: center; border-left: 1px solid #E8ECF2; line-height: 1.2; }
.ckl-who { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.8rem; padding: 0.6rem 0.8rem; min-width: 0; }
.ckl-name { display: flex; flex-direction: column; min-width: 120px; }
.ckl-name b { color: #101828; font-size: 0.98rem; } .ckl-name small { color: #667085; font-size: 0.78rem; }
.ckl-car { display: inline-flex; flex-direction: column; text-decoration: none; color: #1B4384; font-weight: 800; font-size: 0.95rem; line-height: 1.15; }
.ckl-car small { color: #667085; font-weight: 600; font-size: 0.74rem; }
.ckl-radio { position: relative; display: inline-flex; flex-direction: column; align-items: flex-start; text-align: left; border: 1px solid #D5DDE8; background: #F7F9FC; border-radius: 10px; padding: 0.35rem 1.9rem 0.35rem 0.6rem; font: inherit; color: #12305F; cursor: pointer; line-height: 1.2; }
.ckl-radio b { font-size: 0.85rem; } .ckl-radio small { font-family: ui-monospace, Menlo, monospace; font-size: 0.74rem; color: #475467; }
.ckl-radio.is-none { border-style: dashed; color: #98A2B3; }
.ckl-radio[disabled] { cursor: default; padding-right: 0.6rem; }
.ckl-pen { position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%); display: inline-flex; }
.ckl-pen .ic { width: 14px; height: 14px; stroke: #5B6B82; }
.ckl-note-t { flex-basis: 100%; font-size: 0.8rem; color: #92400E; background: #FFF7E6; border-radius: 8px; padding: 0.25rem 0.5rem; }
.ckl-note-b { border: 0; background: none; color: #1B4384; font: inherit; font-size: 0.78rem; font-weight: 700; cursor: pointer; padding: 0.2rem 0; }
.ckl-box { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.15rem; border: 0; border-left: 1px solid #EEF1F5; background: none; font: inherit; cursor: pointer; padding: 0.4rem; min-height: 56px; }
.ckl-box:not([disabled]):hover { background: #F1F6FF; }
.ckl-ck { width: 30px; height: 30px; border-radius: 9px; border: 2px solid #C5CFDC; display: inline-flex; align-items: center; justify-content: center; background: #fff; }
.ckl-box.on .ckl-ck { background: #16A34A; border-color: #16A34A; }
.ckl-ck .ic { width: 22px; height: 22px; stroke: #fff; }
.ckl-box small { font-size: 0.66rem; color: #15803D; font-weight: 700; }
.ckl-bl { display: none; }
.ckl-box[disabled] { cursor: default; }
.ckl-sep { padding: 0.5rem 0.8rem; font-size: 0.72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #8A97AB; background: #F7F9FC; border-top: 1px solid #E8ECF2; }
.ckl-dlg { position: fixed; inset: 0; z-index: 9000; background: rgba(10,26,58,.45); display: flex; align-items: center; justify-content: center; padding: 16px; }
.ckl-dlg-card { background: #fff; border-radius: 16px; width: min(520px, 100%); max-height: calc(100dvh - 32px); display: flex; flex-direction: column; box-shadow: 0 20px 50px rgba(0,0,0,.3); }
.ckl-dlg-card h3 { margin: 0; padding: 1rem 1.1rem 0.4rem; color: #12305F; }
.ckl-dlg-body { padding: 0.4rem 1.1rem; overflow-y: auto; }
.ckl-dlg-body textarea { width: 100%; box-sizing: border-box; font: inherit; }
.ckl-dlg-foot { display: flex; justify-content: flex-end; gap: 0.5rem; padding: 0.8rem 1.1rem 1rem; border-top: 1px solid #EEF1F5; }
.ckl-colrow { display: flex; gap: 0.4rem; margin-bottom: 0.4rem; } .ckl-colrow input { flex: 1; }
.ckl-rm { margin-top: 0.8rem; } .ckl-rm summary { color: var(--danger); font-weight: 700; cursor: pointer; font-size: 0.88rem; }
@media (max-width: 760px) {
  .ckl-th { display: none; }
  .ckl-tr { grid-template-columns: repeat(var(--nc), minmax(0, 1fr)); }
  .ckl-who { grid-column: 1 / -1; padding-bottom: 0.3rem; }
  .ckl-box { border-left: 0; border-top: 1px dashed #EEF1F5; min-height: 64px; padding: 0.45rem 0.25rem 0.55rem; }
  .ckl-box + .ckl-box { border-left: 1px dashed #EEF1F5; }
  .ckl-bl { display: block; font-size: 0.66rem; font-weight: 700; color: #5B6B82; text-align: center; line-height: 1.15; }
  .ckl-ck { width: 28px; height: 28px; }
  .ckl-chips { width: 100%; } .ckl-chip { flex: 1; }
}
.ckl-table { overflow: clip; }
.ckl-th { top: 63px; }
@media (max-width: 760px) {
  .ckl-prog { grid-template-columns: 1fr; gap: 0.35rem; }
  .ckl-pc { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 0.6rem; padding: 0.45rem 0.6rem; }
  .ckl-pc small { white-space: normal; } .ckl-pc b { font-size: 1rem; } .ckl-pc .ckl-bar { grid-column: 1 / -1; margin-top: 0.25rem; height: 5px; }
  .ckl-head .dp-t h3 { font-size: 1.05rem; }
}

/* Update 521: guard picks how to handle a shift they can't make */
.cgh-how { display: grid; gap: 0.45rem; }
.cgh-hw { display: flex; align-items: center; gap: 0.65rem; text-align: left; width: 100%; font: inherit; color: #12305F; background: #fff; border: 1.5px solid #D5DDE8; border-radius: 12px; padding: 0.65rem 0.75rem; cursor: pointer; }
.cgh-hw .ic { width: 22px; height: 22px; flex: none; stroke: #5B6B82; }
.cgh-hw span { display: flex; flex-direction: column; min-width: 0; }
.cgh-hw b { font-size: 0.95rem; } .cgh-hw small { color: #667085; font-size: 0.8rem; }
.cgh-hw.on { border-color: #1B4384; background: #EEF3FB; box-shadow: 0 0 0 3px rgba(27,67,132,.12); }
.cgh-hw.on .ic { stroke: #1B4384; }
#cgh-whof select { width: 100%; }
.cgh-cantbtn[hidden], .cgh-cant[hidden] { display: none !important; }
/* 522: print screen fills the screen edge to edge; padding here because page styles beat :host */
@media screen { #print-sheet { box-sizing: border-box; padding: 0.35in !important; } }
@media screen and (max-width: 820px) { #print-sheet { padding: 0.15in !important; } }
/* 523: Shift Coverage history (FM only) */
.cgh-hist > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.cgh-hist > summary::-webkit-details-marker { display: none; }
.cgh-hist > summary .cg-h { margin: 0; }
.cgh-hist > summary small { color: var(--muted, #5b6676); }
.cgh-hl { margin-top: 0.6rem; }
.cgh-row { display: flex; gap: 0.6rem; padding: 0.55rem 0; border-top: 1px solid var(--border, #dfe4ec); }
.cgh-row > div { min-width: 0; }
.cgh-row b { display: block; font-size: 0.95rem; }
.cgh-row small { display: block; color: var(--muted, #5b6676); }
.cgh-row .cgh-note { color: inherit; font-style: italic; }
.cgh-row .cgh-at { font-size: 0.78rem; }
.cgh-tag { flex: 0 0 6px; border-radius: 3px; background: #9aa6b6; }
.cgh-tag.cant { background: #C2410C; } .cgh-tag.open { background: #1D4ED8; } .cgh-tag.swap { background: #7C3AED; } .cgh-tag.took { background: #15803D; } .cgh-tag.rm { background: #6B7280; }
.cgh-more { margin-top: 0.5rem; }
/* 524: guard cancels a "can't make it" */
.cgh-told .cgh-cx { margin-top: 0.55rem; background: #fff; border: 1.5px solid #176B2C; color: #176B2C; font-weight: 600; }
/* 525: restore an earlier schedule copy */
.rs-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.7rem 0; border-top: 1px solid #E3E8EF; }
.rs-row small { display: block; color: #5b6676; margin-top: 0.15rem; }
.rs-now { background: #F1F5FB; border-radius: 10px; padding: 0.7rem; border-top: 0; margin-top: 0.5rem; }
.rs-same { font-size: 0.8rem; color: #5b6676; white-space: nowrap; }
.le-det { margin-top: 0.8rem; font-size: 0.8rem; color: #5b6676; }
.le-det pre { white-space: pre-wrap; word-break: break-word; font-size: 0.75rem; }
/* 526: four schedule tabs fit on a phone: icon above the label */
@media (max-width: 700px) {
  .ps-tabs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); gap: 3px; }
  .ps-tabs .ps-tab { flex-direction: column; gap: 3px; min-height: 52px; padding: 6px 2px; font-size: 0.74rem; letter-spacing: -0.01em; min-width: 0; }
  .ps-tabs .ps-tab span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ps-tabs .ps-tab .ic { width: 18px; height: 18px; }
}
/* 529: in-site document viewer (vehicle Documents) */
#doc-viewer { position: fixed; inset: 0; z-index: 100001; display: flex; flex-direction: column; background: #1b2433; }
#doc-viewer .dv-bar { display: flex; align-items: center; gap: 10px; padding: calc(8px + env(safe-area-inset-top, 0px)) 12px 8px; background: #102544; color: #fff; }
#doc-viewer .dv-x { display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 10px; padding: 10px 14px; background: rgba(255,255,255,.16); color: #fff; font: 600 16px -apple-system, "Segoe UI", Roboto, sans-serif; cursor: pointer; }
#doc-viewer .dv-x .ic { width: 18px; height: 18px; stroke: currentColor; }
#doc-viewer .dv-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.95rem; }
#doc-viewer .dv-dl { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; background: #fff; color: #102544; }
#doc-viewer .dv-dl .ic { width: 20px; height: 20px; stroke: currentColor; }
#doc-viewer .dv-body { position: relative; flex: 1; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch; padding-bottom: env(safe-area-inset-bottom, 0px); }
#doc-viewer iframe { display: block; width: 100%; height: 100%; border: 0; background: #fff; }
#doc-viewer img { display: block; max-width: 100%; margin: 0 auto; }
#doc-viewer .dv-load { position: absolute; top: 40%; left: 0; right: 0; text-align: center; color: #cbd5e1; margin: 0; pointer-events: none; }
/* 530: Crossing Guards tabs in an even grid */
.cg-tabs.cg-tabs-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cg-tabs.cg-tabs-grid .chip { width: 100%; margin: 0; justify-content: center; text-align: center; min-height: 48px; padding: 0.5rem 0.4rem; white-space: normal; line-height: 1.15; }
@media (max-width: 600px) { .cg-tabs.cg-tabs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* 533: Firearms "Need a different day?" Call and Text pills */
.fa-change .fa-pills { display: flex; gap: 8px; margin-top: 0.55rem; }
.fa-change .fa-pill { display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: 1; max-width: 160px; min-height: 42px; border-radius: 999px; border: 2px solid #102544; background: #fff; color: #102544; font-weight: 700; font-size: 0.95rem; text-decoration: none; }
.fa-change .fa-pill:first-child { background: #102544; color: #fff; }
.fa-change .fa-pill .ic { width: 17px; height: 17px; stroke: currentColor; }
.fa-change .fa-num { display: block; margin-top: 0.35rem; color: #6B5A2E; font-size: 0.8rem; }

/* Update 534: Department Training */
.dt-entry { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; font: inherit; color: var(--text); cursor: pointer; border: 1px solid #C9D3E0; border-left: 5px solid #8E1426; margin-bottom: 1rem; }
.dt-entry:hover { border-color: #8E1426; }
.dt-entry-ic { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px; background: #8E1426; color: #fff; display: grid; place-items: center; } .dt-entry-ic svg { width: 22px; height: 22px; }
.dt-entry-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .dt-entry-t b { font-size: 1.05rem; } .dt-entry-t small { color: var(--muted); font-size: 0.88rem; }
.dt-entry-go { font-size: 1.8rem; color: #8E1426; line-height: 1; }
.dt-hero .cs-kicker a { color: inherit; text-decoration: none; } .dt-hero .cs-kicker a::before { content: '\2039  '; }
.dt-card { padding-top: 1.1rem; }
.dt-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.dt-top h3 { margin: 0.1rem 0 0.4rem; font-size: 1.35rem; }
.dt-tiles { display: flex; gap: 10px; }
.dt-tile { position: relative; width: 96px; padding: 8px 6px 10px; border-radius: 12px; background: #fff; border: 1px solid #C9D3E0; text-align: center; display: flex; flex-direction: column; align-items: center; line-height: 1.15; }
.dt-tile-g { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.dt-tile-m { font-size: 0.8rem; font-weight: 700; color: #8E1426; text-transform: uppercase; margin-top: 3px; }
.dt-tile b { font-size: 1.9rem; } .dt-tile-w { font-size: 0.75rem; color: var(--muted); }
.dt-tile.is-mine { border: 2px solid #8E1426; background: #FFF4F5; }
.dt-tile em { position: absolute; bottom: -9px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-style: normal; font-size: 0.68rem; font-weight: 800; background: #8E1426; color: #fff; padding: 1px 8px; border-radius: 999px; }
.dt-tile.is-past { opacity: 0.55; }
.dt-mine { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 1rem 0 0.2rem; padding: 0.65rem 0.85rem; border-radius: 10px; background: #E8F4EC; color: #1E5A33; }
.dt-mine svg { width: 18px; height: 18px; flex: 0 0 auto; } .dt-mine span { flex: 1; min-width: 12rem; } .dt-mine .btn { text-decoration: none; display: inline-flex; gap: 5px; align-items: center; } .dt-mine .btn svg { width: 15px; height: 15px; }
.dt-mine.dt-none { background: #F3F4F6; color: var(--muted); }
.dt-sub { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 1.2rem 0 0.5rem; font-size: 1rem; } .dt-sub svg { width: 17px; height: 17px; } .dt-sub small { font-weight: 400; color: var(--muted); font-size: 0.82rem; }
.dt-ag { border: 1px solid #C9D3E0; border-radius: 10px; overflow: hidden; background: #fff; }
.dt-ag-h, .dt-ag-r { display: grid; grid-template-columns: 7.2rem 1.4fr 1.1fr 1.3fr 1fr; gap: 10px; padding: 0.55rem 0.8rem; align-items: center; }
.dt-ag-h { background: #1B3A6B; color: #fff; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
.dt-ag-r + .dt-ag-r, .dt-ag-brk + .dt-ag-r { border-top: 1px solid #E3E8EF; }
.dt-t { font-variant-numeric: tabular-nums; font-weight: 700; color: #1B3A6B; } .dt-c { font-weight: 700; } .dt-w, .dt-d { font-size: 0.92rem; } .dt-w svg { width: 14px; height: 14px; vertical-align: -2px; color: var(--muted); }
.dt-k i { font-style: normal; font-size: 0.78rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: #EAF0F8; color: #1B3A6B; display: inline-block; }
.dt-ag-brk { display: flex; gap: 10px; align-items: center; padding: 0.35rem 0.8rem; background: #D0313F; color: #fff; font-size: 0.88rem; }
.dt-ag-brk span { width: 7.2rem; font-variant-numeric: tabular-nums; opacity: 0.9; } .dt-ag-brk b { flex: 1; text-align: center; text-transform: uppercase; letter-spacing: 0.04em; }
.is-now { box-shadow: inset 4px 0 0 #2F7D4F; background: #EEF8F1; } .dt-ag-brk.is-now { background: #A8202D; }
.is-now em { font-style: normal; font-size: 0.68rem; font-weight: 800; background: #2F7D4F; color: #fff; padding: 1px 7px; border-radius: 999px; margin-left: 6px; vertical-align: 2px; }
.dt-groups { margin-top: 1.1rem; } .dt-groups summary { cursor: pointer; font-weight: 700; display: flex; align-items: center; gap: 6px; } .dt-groups summary svg { width: 17px; height: 17px; } .dt-groups summary small { font-weight: 400; color: var(--muted); }
.dt-gcols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 0.6rem; }
.dt-g { background: #fff; border: 1px solid #C9D3E0; border-radius: 10px; padding: 0.6rem 0.8rem; } .dt-g.is-mine { border: 2px solid #8E1426; }
.dt-g h4 { margin: 0 0 0.4rem; display: flex; align-items: center; gap: 6px; } .dt-g h4 small { color: var(--muted); font-weight: 400; } .dt-g h4 .tab-count { margin-left: auto; }
.dt-g ol { margin: 0; padding-left: 1.6rem; columns: 2; column-gap: 1.6rem; font-size: 0.92rem; } .dt-g li { break-inside: avoid; padding: 1px 0; } .dt-g li small { color: var(--muted); font-size: 0.75rem; }
.dt-g li.me { font-weight: 800; color: #8E1426; }
.dt-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 1.1rem; } .dt-acts .btn svg { width: 15px; height: 15px; vertical-align: -3px; margin-right: 3px; }
.dt-by { display: block; margin-top: 0.6rem; color: var(--muted); }
.dt-edit h3 { margin-top: 0; }
.dt-er-list { display: flex; flex-direction: column; gap: 6px; }
.dt-er { display: flex; gap: 6px; align-items: center; padding: 6px; border-radius: 10px; background: #fff; border: 1px solid #C9D3E0; }
.dt-er.is-brk { background: #FCE9EA; border-color: #E9A3A9; }
.dt-er-f { flex: 1; min-width: 0; display: grid; grid-template-columns: 7rem 1.4fr 1.1fr 1.3fr 1fr; gap: 6px; }
.dt-er.is-brk .dt-er-f { grid-template-columns: 7rem 1fr; }
.dt-er input { min-width: 0; min-height: 38px; padding: 0.3rem 0.55rem; border: 1px solid #C9D3E0; border-radius: 8px; font: inherit; font-size: 0.92rem; background: #fff; }
.dt-er-b { display: flex; gap: 3px; } .dt-er-b button { width: 32px; height: 34px; border-radius: 8px; border: 1px solid #C9D3E0; background: #fff; cursor: pointer; font-size: 0.95rem; color: var(--text); } .dt-er-b button:disabled { opacity: 0.3; cursor: default; } .dt-er-b [data-rm] { color: #D0313F; }
.dt-add { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } .dt-add svg { width: 14px; height: 14px; vertical-align: -2px; }
.dt-gsum { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.dt-gc { padding: 4px 12px; border-radius: 999px; font-size: 0.85rem; background: #EAF0F8; color: #1B3A6B; } .dt-gc.b { background: #FFF4F5; color: #8E1426; } .dt-gc.n { background: #F3F4F6; color: var(--muted); } .dt-gc.n.warn { background: #FFF1D6; color: #A86400; }
.dt-gsum .btn svg { width: 14px; height: 14px; vertical-align: -2px; }
.dt-gq { width: 100%; box-sizing: border-box; min-height: 40px; padding: 0.35rem 0.8rem; border-radius: 999px; border: 1px solid #C9D3E0; font: inherit; font-size: 16px; margin-bottom: 8px; }
.dt-pl { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 6px; max-height: 26rem; overflow-y: auto; padding: 2px; }
.dt-p { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 6px 5px 10px; border-radius: 10px; background: #fff; border: 1px solid #DCE2EA; }
.dt-p > span:first-child { display: flex; flex-direction: column; min-width: 0; font-size: 0.92rem; font-weight: 600; } .dt-p small { font-weight: 400; color: var(--muted); font-size: 0.74rem; }
.dt-p.unset { border-color: #E8B04B; background: #FFFAF0; }
.dt-seg { display: inline-flex; border: 1px solid #C9D3E0; border-radius: 8px; overflow: hidden; flex: 0 0 auto; }
.dt-seg button { width: 36px; height: 32px; border: 0; background: #fff; font: inherit; font-weight: 800; cursor: pointer; color: var(--muted); } .dt-seg button + button { border-left: 1px solid #C9D3E0; }
.dt-seg button.on[data-g="A"] { background: #1B3A6B; color: #fff; } .dt-seg button.on[data-g="B"] { background: #8E1426; color: #fff; } .dt-seg button.on[data-g=""] { background: #64707F; color: #fff; }
.dt-save { position: sticky; bottom: 0; background: var(--card); padding: 10px 0; margin-top: 12px; z-index: 2; }
@media (max-width: 760px) {
  .dt-tiles { width: 100%; } .dt-tile { flex: 1; }
  .dt-ag-h { display: none; }
  .dt-ag-r { grid-template-columns: 1fr; gap: 2px; padding: 0.6rem 0.8rem; }
  .dt-ag-r .dt-t { font-size: 0.85rem; } .dt-ag-r .dt-w:empty, .dt-ag-r .dt-d:empty, .dt-ag-r .dt-k:empty { display: none; }
  .dt-ag-r .dt-d { color: var(--muted); } .dt-ag-r .dt-k { margin-top: 2px; }
  .dt-ag-brk span { width: auto; }
  .dt-gcols { grid-template-columns: 1fr; } .dt-g ol { columns: 2; column-gap: 1rem; padding-left: 1.4rem; }
  .dt-er { align-items: flex-start; } .dt-er-f, .dt-er.is-brk .dt-er-f { grid-template-columns: 1fr 1fr; } .dt-er-f [data-k="cls"] { grid-column: 1 / -1; order: -1; } .dt-er.is-brk .dt-er-f [data-k="cls"] { grid-column: auto; order: 0; }
  .dt-er { flex-direction: column; align-items: stretch; } .dt-er input { font-size: 16px; } .dt-er-b { justify-content: flex-end; } .dt-er-b button { width: 40px; }
  .dt-pl { grid-template-columns: 1fr; max-height: 22rem; }
}
.dt-p.skip { opacity: 0.6; } .dt-seg button.on[data-g="-"] { background: #64707F; color: #fff; }

/* Update 535: Officer Development theme (night blue, light-bar blue and red) */
.od-theme { --od-ink: #050B18; --od-navy: #0B1A33; --od-blue: #2F7BFF; --od-red: #E5303C; --od-glow: 0 0 14px rgba(47,123,255,.55); }
.od-hero { position: relative; overflow: hidden; color: #fff; background: var(--od-ink); border: 1px solid rgba(80,150,255,.35); padding: 1.7rem 1.6rem 1.3rem; min-height: 270px; margin-bottom: 1rem; }
.od-hero::before { content: ''; position: absolute; top: 0; bottom: 0; right: 0; left: 52%; background: linear-gradient(90deg, #050B18 0%, rgba(5,11,24,.65) 20%, rgba(5,11,24,.08) 50%, rgba(5,11,24,0) 100%), url('/od-hero.jpg') 50% 48% / cover no-repeat; }
.od-hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--od-blue) 30%, var(--od-blue) 60%, transparent); box-shadow: var(--od-glow); }
.od-hero-txt { position: relative; z-index: 1; max-width: 36rem; }
.od-kick { display: flex; align-items: center; gap: 14px; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: #C9D6EA; }
.od-kick::after { content: ''; flex: 0 1 170px; height: 1px; background: rgba(201,214,234,.5); }
.od-kick a { color: inherit; text-decoration: none; } .od-kick a::before { content: '\2039  '; }
.od-hero h2 { margin: 0.5rem 0 0; font-size: clamp(2.1rem, 5.4vw, 3.3rem); font-weight: 900; font-style: italic; text-transform: uppercase; line-height: 0.95; letter-spacing: -0.01em; color: #fff; background: linear-gradient(180deg, #FFFFFF 0%, #D5DCE6 60%, #A9B4C4 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 2px 1px rgba(0,0,0,.55)); }
.od-glow { width: 72%; height: 2px; margin: 0.75rem 0 0.8rem; background: linear-gradient(90deg, var(--od-blue), rgba(47,123,255,0)); box-shadow: 0 0 10px rgba(47,123,255,.7); }
.od-hero p { margin: 0; font-style: italic; font-size: 1.05rem; color: #E1E9F5; max-width: 30rem; }
.od-btn { display: inline-flex; align-items: center; gap: 12px; margin-top: 1.1rem; padding: 0.6rem 1.1rem 0.6rem 0.9rem; border: 2px solid #3B8BFF; border-radius: 12px; background: rgba(10,30,70,.65); color: #fff; font: inherit; font-weight: 700; font-size: 1.05rem; cursor: pointer; box-shadow: var(--od-glow), inset 0 0 12px rgba(59,139,255,.25); }
.od-btn:hover { background: rgba(20,55,120,.8); }
.od-btn-ic { display: grid; place-items: center; padding-right: 12px; border-right: 1px solid rgba(255,255,255,.35); } .od-btn-ic svg { width: 22px; height: 22px; }
.od-btn-go { font-size: 1.5rem; line-height: 1; margin-left: 4px; }
.od-trio { display: flex; flex-wrap: wrap; gap: 0; margin-top: 1.2rem; }
.od-trio span { display: inline-flex; align-items: center; gap: 10px; padding: 0 1.1rem; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: #C9D6EA; }
.od-trio span:first-child { padding-left: 0; } .od-trio span + span { border-left: 1px solid rgba(201,214,234,.4); }
.od-trio svg { width: 20px; height: 20px; color: #DCE6F5; }
/* Cards and controls */
.od-theme .td-card, .od-theme .dt-card { border-top: 3px solid var(--od-blue); }
.od-theme .ann-cal.ann-department { background: linear-gradient(160deg, #0B1A33, #12306A); box-shadow: inset 0 -3px 0 var(--od-blue); }
.od-theme .ann-kicker { color: #1554D1; letter-spacing: 0.12em; }
.od-theme .td-pill { border-color: #B9C8E0; } .od-theme .td-pill.on { background: var(--od-navy); border-color: var(--od-blue); color: #fff; box-shadow: 0 0 10px rgba(47,123,255,.35); }
.od-theme .btn.primary { background: #1554D1; border-color: #1554D1; } .od-theme .btn.primary:hover { background: #0F3F9E; }
.od-theme .td-sign { background: #EEF4FF; }
.od-theme .td-draft { border-left: 3px solid var(--od-blue); }
.od-theme .dt-entry { background: linear-gradient(110deg, #0B1A33 0%, #12306A 100%); color: #fff; border: 1px solid rgba(80,150,255,.5); border-left: 4px solid var(--od-blue); box-shadow: 0 0 16px rgba(47,123,255,.18); }
.od-theme .dt-entry:hover { border-color: var(--od-blue); }
.od-theme .dt-entry-ic { background: rgba(47,123,255,.2); border: 1px solid rgba(80,150,255,.7); }
.od-theme .dt-entry-t small { color: #C9D6EA; } .od-theme .dt-entry-go { color: #8FB8FF; }
.od-theme .dt-tile-m { color: #1554D1; }
.od-theme .dt-tile.gB .dt-tile-m { color: var(--od-red); }
.od-theme .dt-tile.is-mine.gA { border-color: var(--od-blue); background: #EEF4FF; box-shadow: 0 0 12px rgba(47,123,255,.3); }
.od-theme .dt-tile.is-mine.gB { border-color: var(--od-red); background: #FFF1F2; box-shadow: 0 0 12px rgba(229,48,60,.28); }
.od-theme .dt-tile.gA em { background: var(--od-blue); } .od-theme .dt-tile.gB em { background: var(--od-red); }
.od-theme .dt-mine { background: var(--od-navy); color: #fff; border-left: 4px solid var(--od-blue); } .od-theme .dt-mine.gB { border-left-color: var(--od-red); }
.od-theme .dt-mine .btn { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.35); color: #fff; }
.od-theme .dt-mine.dt-none { background: #F3F4F6; color: var(--muted); border-left-color: #B9C2CE; }
.od-theme .dt-ag-h { background: var(--od-navy); box-shadow: inset 0 -2px 0 var(--od-blue); }
.od-theme .dt-t { color: #1554D1; } .od-theme .dt-k i { background: #EEF4FF; color: #0F3F9E; }
.od-theme .dt-ag-brk { background: var(--od-red); }
.od-theme .dt-g.is-mine.gA { border-color: var(--od-blue); } .od-theme .dt-g.is-mine.gB { border-color: var(--od-red); }
.od-theme .dt-g.gA h4 { color: #1554D1; } .od-theme .dt-g.gB h4 { color: #C21F2B; }
.od-theme .dt-g.gA li.me { color: #1554D1; } .od-theme .dt-g.gB li.me { color: #C21F2B; }
.od-theme .dt-gc.a { background: #EEF4FF; color: #1554D1; } .od-theme .dt-gc.b { background: #FFF1F2; color: #C21F2B; }
.od-theme .dt-seg button.on[data-g="A"] { background: #1554D1; } .od-theme .dt-seg button.on[data-g="B"] { background: var(--od-red); }
@media (max-width: 760px) {
  .od-hero { padding: 1.3rem 1.1rem 1.1rem; min-height: 0; }
  .od-hero::before { left: 0; background: linear-gradient(90deg, rgba(5,11,24,.97) 0%, rgba(5,11,24,.86) 55%, rgba(5,11,24,.45) 100%), url('/od-hero.jpg') 70% center / cover no-repeat; }
  .od-kick { font-size: 0.7rem; letter-spacing: 0.24em; } .od-kick::after { flex-basis: 60px; }
  .od-hero h2 { font-size: 2rem; } .od-hero p { font-size: 0.98rem; }
  .od-trio span { padding: 0 0.7rem; letter-spacing: 0.2em; font-size: 0.7rem; gap: 6px; } .od-trio svg { width: 16px; height: 16px; }
}

/* Update 536: Mandatory vs Optional on Officer Development */
.od-sec { display: flex; align-items: center; gap: 10px; margin: 1.3rem 0 0.6rem; font-size: 1.1rem; color: var(--text); }
.od-sec span { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; background: #C21F2B; color: #fff; }
.od-sec.od-sec-opt { margin-top: 1.8rem; } .od-sec.od-sec-opt span { background: #1554D1; }
.od-sec-p { margin: -0.2rem 0 0.8rem; color: var(--muted); font-size: 0.92rem; }
.od-theme .dtf { position: relative; overflow: hidden; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; width: 100%; text-align: left; font: inherit; cursor: pointer; color: #fff; padding: 1.3rem 1.3rem 1.1rem; border: 0; border-radius: 16px;
  background: radial-gradient(120% 140% at 100% 0%, rgba(229,48,60,.45) 0%, rgba(229,48,60,0) 45%), radial-gradient(120% 140% at 0% 100%, rgba(47,123,255,.35) 0%, rgba(47,123,255,0) 50%), linear-gradient(135deg, #2A0710 0%, #120A1E 55%, #0B1A33 100%);
  box-shadow: 0 0 0 1px rgba(229,48,60,.55), 0 6px 22px rgba(229,48,60,.22); }
.od-theme .dtf:hover { box-shadow: 0 0 0 2px rgba(229,48,60,.8), 0 8px 26px rgba(229,48,60,.3); }
.dtf-bar { position: absolute; top: 0; left: 0; right: 0; height: 5px; background: linear-gradient(90deg, #2F7BFF 0%, #2F7BFF 48%, #fff 50%, #E5303C 52%, #E5303C 100%); box-shadow: 0 0 14px rgba(229,48,60,.7); }
.dtf-main { flex: 1 1 15rem; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.dtf-tag { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; background: #E5303C; color: #fff; }
.dtf-tag svg { width: 13px; height: 13px; }
.dtf-t { font-size: 1.45rem; font-weight: 900; font-style: italic; text-transform: uppercase; letter-spacing: 0.01em; margin-top: 4px; }
.dtf-l { color: #E1E9F5; font-size: 0.95rem; }
.dtf-tiles { display: flex; gap: 8px; }
.dtf-tile { width: 84px; padding: 7px 4px; border-radius: 12px; text-align: center; display: flex; flex-direction: column; line-height: 1.15; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.25); }
.dtf-tile small { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; opacity: .85; }
.dtf-tile b { font-size: 1.15rem; margin: 2px 0; } .dtf-tile i { font-style: normal; font-size: 0.72rem; opacity: .85; }
.dtf-tile.gA { border-color: rgba(47,123,255,.8); } .dtf-tile.gB { border-color: rgba(229,48,60,.85); }
.dtf-tile.is-mine.gA { background: #1554D1; box-shadow: 0 0 14px rgba(47,123,255,.7); } .dtf-tile.is-mine.gB { background: #C21F2B; box-shadow: 0 0 14px rgba(229,48,60,.7); }
.dtf-tile.is-mine i { font-weight: 800; opacity: 1; }
.dtf-go { display: inline-flex; align-items: center; gap: 8px; padding: 0.55rem 1rem; border-radius: 10px; background: #fff; color: #120A1E; font-weight: 800; font-size: 0.95rem; white-space: nowrap; }
.dtf-go span { font-size: 1.3rem; line-height: 1; }
@media (max-width: 760px) {
  .od-theme .dtf { padding: 1.2rem 1rem 1rem; gap: 12px; }
  .dtf-tiles { width: 100%; } .dtf-tile { flex: 1; }
  .dtf-go { width: 100%; justify-content: center; }
  .dtf-t { font-size: 1.3rem; }
}
.dtf-tag svg { color: #fff; stroke: currentColor; }

/* Update 537: sign-in warnings */
.nt-wrap { position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center; padding: 16px; background: rgba(5,11,24,.62); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.nt-card { position: relative; overflow: hidden; width: min(100%, 460px); max-height: calc(100vh - 32px); overflow-y: auto; background: #fff; color: #16202F; border-radius: 18px; padding: 1.6rem 1.4rem 1.3rem; box-shadow: 0 20px 60px rgba(0,0,0,.4); }
.nt-stripe { position: absolute; top: 0; left: 0; right: 0; height: 8px; background: repeating-linear-gradient(135deg, #F5B400 0 14px, #16202F 14px 28px); }
.nt-info .nt-stripe { background: #1554D1; }
.nt-head { display: flex; align-items: center; gap: 10px; margin-top: 0.3rem; }
.nt-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: #FFF3D1; color: #A86400; } .nt-ic svg { width: 22px; height: 22px; }
.nt-info .nt-ic { background: #EEF4FF; color: #1554D1; }
.nt-kick { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #A86400; } .nt-info .nt-kick { color: #1554D1; }
.nt-card h2 { margin: 0.8rem 0 0.5rem; font-size: 1.45rem; line-height: 1.2; color: #16202F; }
.nt-body { margin: 0; white-space: pre-wrap; font-size: 1.02rem; line-height: 1.5; }
.nt-until { display: block; margin-top: 0.9rem; color: #64707F; }
.nt-ok { width: 100%; margin-top: 1rem; min-height: 46px; font-size: 1.05rem; }
.nt-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0.55rem 0; border-bottom: 1px solid #DCE2EA; } .nt-row > div { display: flex; flex-direction: column; } .nt-row small { color: var(--muted); } .nt-row.is-old { opacity: .55; }
.nt-new { margin-top: 0.8rem; } .nt-new summary { cursor: pointer; font-weight: 700; color: var(--primary); } .nt-new form { margin-top: 0.6rem; }
.nt-row .btn { white-space: nowrap; flex: 0 0 auto; }

/* Update 539: one, two or three tiles in the row (AFPD Schedules, then Patrol and/or Investigations) */
.csb-pair { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }

/* Update 541: three tiles don't fit across a phone. AFPD Schedules goes full width on top, the two unit tiles share the row below. */
@media (max-width: 767px) {
  .csb-pair:has(> .csb:nth-child(3)) { grid-auto-flow: row; grid-template-columns: 1fr 1fr; grid-auto-columns: auto; }
  .csb-pair:has(> .csb:nth-child(3)) > .csb:first-child { grid-column: 1 / -1; }
}

/* Update 542: Patrol page */
.pt-theme { --pt-ink: #07101F; --pt-blue: #2F7BFF; --pt-red: #E5303C; }
.pt-hero { position: relative; overflow: hidden; border-radius: 22px; color: #fff; padding: 1.8rem 1.6rem 1.4rem; margin-bottom: 1rem; border: 1px solid rgba(80,150,255,.35);
  background: radial-gradient(120% 90% at 100% 0%, rgba(47,123,255,.35) 0%, rgba(47,123,255,0) 55%), radial-gradient(80% 70% at 0% 100%, rgba(229,48,60,.28) 0%, rgba(229,48,60,0) 60%), linear-gradient(160deg, #0B1A33 0%, #07101F 70%); box-shadow: 0 14px 34px rgba(7,16,31,.35); }
.pt-hero::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .18; background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px); background-size: 28px 28px; mask-image: linear-gradient(90deg, transparent 0%, #000 60%); -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 60%); }
.pt-bar { position: absolute; top: 0; left: 0; right: 0; height: 5px; background: linear-gradient(90deg, var(--pt-red) 0%, var(--pt-red) 48%, #fff 50%, var(--pt-blue) 52%, var(--pt-blue) 100%); box-shadow: 0 0 14px rgba(47,123,255,.7); animation: ptBar 2.4s ease-in-out infinite alternate; }
@keyframes ptBar { from { filter: hue-rotate(0deg) brightness(1); } to { filter: brightness(1.35); } }
@media (prefers-reduced-motion: reduce) { .pt-bar, .pt-pulse { animation: none !important; } }
.pt-hero-art { position: absolute; right: -30px; top: 50%; transform: translateY(-50%); width: 230px; height: 230px; color: rgba(255,255,255,.07); pointer-events: none; } .pt-hero-art svg, .pt-hero-art svg.ic { width: 100% !important; height: 100% !important; stroke-width: 1.2; }
.pt-hero-in { position: relative; z-index: 1; max-width: 40rem; }
.pt-hero h2 { margin: 0.5rem 0 0; font-size: clamp(2.6rem, 7vw, 4rem); font-weight: 900; font-style: italic; text-transform: uppercase; line-height: 0.95; letter-spacing: 0.01em; background: linear-gradient(180deg, #FFFFFF 0%, #D5DCE6 60%, #A9B4C4 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 2px 1px rgba(0,0,0,.55)); }
.pt-hero p { margin: 0; color: #DCE6F5; font-style: italic; font-size: 1.02rem; }
.pt-live { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 1rem; padding: 0.55rem 0.95rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.08); color: #fff; font: inherit; font-size: 0.95rem; cursor: pointer; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); text-align: left; }
.pt-live b { font-size: 1.15rem; }
.pt-sep { width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,.5); }
.pt-pulse { width: 10px; height: 10px; border-radius: 50%; background: #2BD576; box-shadow: 0 0 0 0 rgba(43,213,118,.7); animation: ptPulse 1.8s infinite; flex: none; }
.pt-pulse.is-off { background: #8792A2; animation: none; }
@keyframes ptPulse { 0% { box-shadow: 0 0 0 0 rgba(43,213,118,.6); } 70% { box-shadow: 0 0 0 10px rgba(43,213,118,0); } 100% { box-shadow: 0 0 0 0 rgba(43,213,118,0); } }
.pt-setup { position: absolute; top: 14px; right: 14px; z-index: 2; }
.pt-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.7rem; margin-bottom: 1rem; }
.pt-tile { position: relative; display: flex; align-items: center; gap: 0.7rem; min-width: 0; padding: 0.85rem 0.9rem; border-radius: 16px; border: 1px solid var(--border, #DCE2EA); background: var(--card, #fff); color: var(--text, #16202F); font: inherit; text-align: left; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
.pt-tile:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(7,16,31,.12); }
.pt-tile-ic { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 12px; color: #fff; } .pt-tile-ic svg { width: 22px; height: 22px; }
.pt-tile-t { display: flex; flex-direction: column; min-width: 0; } .pt-tile-t b { font-size: 0.98rem; line-height: 1.2; } .pt-tile-t small { color: var(--muted); font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-navy .pt-tile-ic { background: linear-gradient(135deg, #1554D1, #0B2E6F); } .pt-amber .pt-tile-ic { background: linear-gradient(135deg, #F5A300, #D97706); } .pt-purple .pt-tile-ic { background: linear-gradient(135deg, #7C4DFF, #4C1D95); }
.pt-teal .pt-tile-ic { background: linear-gradient(135deg, #14B8A6, #0F766E); } .pt-red .pt-tile-ic { background: linear-gradient(135deg, #E5303C, #9F1239); } .pt-slate .pt-tile-ic { background: linear-gradient(135deg, #64748B, #334155); }
.pt-badge { position: absolute; top: 8px; right: 8px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: #E5303C; color: #fff; font-style: normal; font-weight: 800; font-size: 0.75rem; display: grid; place-items: center; }
.pt-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.pt-col { display: flex; flex-direction: column; gap: 1rem; min-width: 0; } .pt-col > .card { margin: 0; }
.pt-board { border-top: 4px solid var(--pt-red); }
.pt-pills { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.2rem 0 0.8rem; }
.pt-pill { border: 1px solid var(--border, #DCE2EA); background: transparent; color: inherit; border-radius: 999px; padding: 0.35rem 0.8rem; font: inherit; font-size: 0.88rem; font-weight: 600; cursor: pointer; }
.pt-pill span { opacity: .6; margin-left: 2px; } .pt-pill.on { background: var(--pt-ink); color: #fff; border-color: var(--pt-ink); }
.pt-post { position: relative; padding: 0.85rem 0.95rem 0.8rem 1.1rem; border-radius: 14px; background: rgba(21,84,209,.05); border: 1px solid rgba(21,84,209,.14); margin-bottom: 0.6rem; }
.pt-post::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 4px; border-radius: 0 4px 4px 0; background: #1554D1; }
.pt-post.k-bolo { background: rgba(229,48,60,.06); border-color: rgba(229,48,60,.25); } .pt-post.k-bolo::before { background: var(--pt-red); }
.pt-post.k-note { background: rgba(100,112,127,.06); border-color: rgba(100,112,127,.18); } .pt-post.k-note::before { background: #8792A2; }
.pt-post-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pt-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #1554D1; } .pt-tag svg { width: 15px; height: 15px; }
.k-bolo .pt-tag { color: #C81E2B; } .k-note .pt-tag { color: #64707F; }
.pt-left { font-size: 0.75rem; font-weight: 700; color: #C81E2B; background: rgba(229,48,60,.1); padding: 2px 8px; border-radius: 999px; } .k-brief .pt-left, .k-note .pt-left { color: #1554D1; background: rgba(21,84,209,.1); }
.pt-post h4 { margin: 0.35rem 0 0.2rem; font-size: 1.05rem; } .pt-post p { margin: 0 0 0.35rem; white-space: pre-wrap; line-height: 1.45; } .pt-post small { color: var(--muted); }
.pt-duty { border-top: 4px solid #2BD576; }
.pt-squad { border-radius: 14px; padding: 0.75rem 0.85rem; margin-bottom: 0.6rem; background: linear-gradient(135deg, rgba(245,180,0,.10), rgba(245,180,0,.02)); border: 1px solid rgba(245,180,0,.25); }
.pt-squad.is-night { background: linear-gradient(135deg, rgba(21,84,209,.12), rgba(21,84,209,.02)); border-color: rgba(21,84,209,.25); }
.pt-sq-h { display: flex; align-items: center; gap: 6px; } .pt-sq-h svg { width: 18px; height: 18px; color: #D97706; } .is-night .pt-sq-h svg { color: #1554D1; } .pt-sq-h small { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; }
.pt-sgt { display: inline-flex; align-items: center; gap: 5px; margin: 0.45rem 0 0.1rem; font-weight: 700; } .pt-sgt svg { width: 16px; height: 16px; color: #1554D1; }
.pt-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.45rem; } .pt-chips span { padding: 0.25rem 0.6rem; border-radius: 999px; background: var(--card, #fff); border: 1px solid var(--border, #DCE2EA); font-size: 0.86rem; font-weight: 600; }
.pt-dates { display: flex; flex-direction: column; gap: 0.55rem; }
.pt-date { display: flex; align-items: center; gap: 0.75rem; }
.pt-cal { width: 54px; flex: none; text-align: center; border-radius: 12px; overflow: hidden; border: 1px solid var(--border, #DCE2EA); background: var(--card, #fff); padding-bottom: 3px; }
.pt-cal small { display: block; background: var(--pt-red); color: #fff; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; padding: 2px 0; } .pt-cal b { display: block; font-size: 1.35rem; line-height: 1.15; } .pt-cal i { display: block; font-style: normal; font-size: 0.68rem; color: var(--muted); }
.pt-date-t { display: flex; flex-direction: column; min-width: 0; } .pt-date-t small { color: var(--muted); }
@media (max-width: 900px) { .pt-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .pt-hero { padding: 1.5rem 1.1rem 1.15rem; border-radius: 18px; } .pt-hero-art { width: 150px; height: 150px; right: -36px; }
  .pt-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; } .pt-tile { padding: 0.7rem; gap: 0.55rem; } .pt-tile-ic { width: 36px; height: 36px; } .pt-tile-t b { font-size: 0.9rem; }
  .pt-setup { position: static; margin-top: 0.8rem; }
}

/* Update 547: Slate Canyon card and guidelines */
.sc-card { border-top: 4px solid #0E8A7E; }
.sc-sub { margin: -0.2rem 0 0.7rem; color: var(--muted); font-size: 0.9rem; }
.sc-msg { border: 1px solid rgba(14,138,126,.25); background: rgba(14,138,126,.06); border-radius: 14px; overflow: hidden; margin-bottom: 0.75rem; }
.sc-msg-h { display: flex; align-items: center; gap: 10px; padding: 0.7rem 0.9rem; background: rgba(14,138,126,.12); color: #0B6E65; }
.sc-msg-h svg { width: 20px; height: 20px; flex: none; } .sc-msg-h span { display: flex; flex-direction: column; } .sc-msg-h small { color: var(--muted); font-weight: 600; }
.sc-msg-b { padding: 0.85rem 0.95rem; white-space: pre-wrap; line-height: 1.5; }
.sc-sign { display: block; margin-top: 0.3rem; font-weight: 700; }
.sc-open { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 0.85rem 1rem; border-radius: 14px; border: 0; cursor: pointer; color: #fff; font: inherit;
  background: linear-gradient(135deg, #0E8A7E, #1554D1); box-shadow: 0 6px 18px rgba(21,84,209,.25); }
.sc-open b { display: block; font-size: 1.05rem; } .sc-open small { opacity: .85; } .sc-open > span:nth-child(2) { flex: 1; } .sc-open > span:last-child { font-size: 1.6rem; line-height: 1; }
.sc-open-ic { width: 40px; height: 40px; border-radius: 12px; background: rgba(255,255,255,.18); display: grid; place-items: center; flex: none; } .sc-open-ic svg { width: 22px; height: 22px; }
body.sc-lock { overflow: hidden; }
.sc-guide { position: fixed; inset: 0; z-index: 3000; background: rgba(7,16,31,.55); overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 24px 16px 40px; }
.sc-g-in { max-width: 760px; margin: 0 auto; background: #EEF2F8; border-radius: 22px; padding: 1.1rem 1rem 1.3rem; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.sc-g-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 1rem 1.1rem; border-radius: 16px; color: #fff; background: linear-gradient(135deg, #07101F, #0E5A8A 60%, #0E8A7E); margin-bottom: 0.9rem; }
.sc-g-top h2 { margin: 0.15rem 0; color: #fff; font-size: 1.5rem; } .sc-g-top small { opacity: .8; }
.sc-kick { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; opacity: .85; }
.sc-close { width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255,255,255,.18); color: #fff; display: grid; place-items: center; cursor: pointer; flex: none; } .sc-close svg { width: 20px; height: 20px; color: #fff; stroke: #fff; }
.sc-h { margin: 0.9rem 0.2rem 0.5rem; font-size: 1.05rem; }
.sc-glance { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.6rem; }
.sc-gl { border-radius: 14px; padding: 0.75rem 0.85rem; border: 1px solid var(--c-bd); background: var(--c-bg); border-left: 5px solid var(--c); }
.sc-gl b { display: flex; align-items: center; gap: 6px; color: var(--c-ink); } .sc-gl b svg { width: 18px; height: 18px; } .sc-gl p { margin: 0.3rem 0 0; line-height: 1.45; font-size: 0.93rem; }
.sc-fine { color: var(--muted); font-size: 0.85rem; margin: 0.5rem 0.2rem 0; }
.c-info { --c: #64707F; --c-ink: #3E4856; --c-bg: rgba(100,112,127,.08); --c-bd: rgba(100,112,127,.22); }
.c-age { --c: #D9822B; --c-ink: #9A5410; --c-bg: rgba(217,130,43,.09); --c-bd: rgba(217,130,43,.3); }
.c-yes { --c: #1E9E5A; --c-ink: #13703F; --c-bg: rgba(30,158,90,.08); --c-bd: rgba(30,158,90,.28); }
.c-no { --c: #E5303C; --c-ink: #B0141F; --c-bg: rgba(229,48,60,.07); --c-bd: rgba(229,48,60,.28); }
.c-special { --c: #1554D1; --c-ink: #103F9C; --c-bg: rgba(21,84,209,.07); --c-bd: rgba(21,84,209,.25); }
.c-after { --c: #7A3FD1; --c-ink: #5A2AA0; --c-bg: rgba(122,63,209,.07); --c-bd: rgba(122,63,209,.25); }
.sc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 0.7rem; }
.sc-chip { border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 0.85rem; font-weight: 700; cursor: pointer; border: 1.5px solid var(--c, #07101F); color: var(--c-ink, #07101F); background: #fff; }
.sc-chip.on { background: var(--c, #07101F); color: #fff; }
.sc-rule { border-radius: 14px; margin-bottom: 0.55rem; background: #fff; border: 1px solid var(--c-bd); border-left: 6px solid var(--c); overflow: hidden; }
.sc-rule summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 0.75rem 0.85rem; cursor: pointer; background: var(--c-bg); }
.sc-rule summary::-webkit-details-marker { display: none; }
.sc-num { flex: none; font-size: 0.75rem; font-weight: 800; color: #fff; background: var(--c); border-radius: 8px; padding: 4px 7px; white-space: nowrap; }
.sc-rt { flex: 1; min-width: 0; display: flex; flex-direction: column; } .sc-rt b { color: var(--c-ink); line-height: 1.25; }
.sc-rt small { display: flex; align-items: center; gap: 4px; color: var(--c-ink); opacity: .8; font-weight: 700; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; margin-top: 2px; } .sc-rt small svg { width: 13px; height: 13px; }
.sc-chev svg { width: 20px; height: 20px; color: var(--c-ink); transition: transform .2s; } .sc-rule[open] .sc-chev svg { transform: rotate(180deg); }
.sc-body { padding: 0.6rem 0.95rem 0.8rem; line-height: 1.5; }
.sc-body p { margin: 0.45rem 0; } .sc-body ul { margin: 0.3rem 0 0.5rem; padding-left: 1.1rem; } .sc-body li { margin: 0.25rem 0; } .sc-body li::marker { color: var(--c); }
.sc-hi { background: var(--c-bg); border-radius: 10px; padding: 0.55rem 0.7rem; font-weight: 600; color: var(--c-ink); }
.sc-g-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 0.8rem; color: var(--muted); font-size: 0.85rem; }

/* Update 548: guidelines editor */
.sc-g-top-btns { display: flex; gap: 8px; flex: none; }
.sc-edit-btn { border: 0; border-radius: 999px; padding: 0 14px; height: 40px; font: inherit; font-weight: 700; background: rgba(255,255,255,.92); color: #07101F; cursor: pointer; }
.sc-ed { background: #fff; border-radius: 16px; padding: 0.9rem; margin-bottom: 0.8rem; }
.sc-ed h3 { margin: 0 0 0.6rem; }
.sc-ed-row { border: 1px solid var(--c-bd); border-left: 6px solid var(--c); background: var(--c-bg); border-radius: 12px; padding: 0.6rem; margin-bottom: 0.55rem; display: grid; gap: 0.45rem; }
.sc-ed-row input, .sc-ed-row select, .sc-ed-row textarea, .sc-ed input { width: 100%; box-sizing: border-box; font: inherit; padding: 0.5rem 0.6rem; border-radius: 10px; border: 1px solid rgba(7,16,31,.2); background: #fff; }
.sc-ed-row textarea { min-height: 7rem; line-height: 1.45; }
.sc-ed-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.45rem; }
.sc-ed-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.sc-ed-help { color: var(--muted); font-size: 0.85rem; margin: 0 0 0.6rem; }
.sc-ed-save { position: sticky; bottom: -40px; display: flex; gap: 8px; padding: 0.7rem 0; background: #EEF2F8; }
.sc-ed-err { color: #B0141F; font-weight: 700; }

/* Update 549: site search: top result, snippets, jump highlight */
.gs-feat { border-radius: 16px; padding: 0.8rem 0.9rem; margin: 0.2rem 0 0.6rem; background: linear-gradient(135deg, rgba(21,84,209,.08), rgba(14,138,126,.10)); border: 1px solid rgba(21,84,209,.22); }
.gs-feat-k { display: flex; align-items: center; gap: 6px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #1554D1; }
.gs-feat-k svg { width: 15px; height: 15px; } .gs-feat-k span { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 700; color: var(--muted); }
.gs-feat-main { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 0.35rem 0 0.2rem; font: inherit; color: inherit; cursor: pointer; }
.gs-feat-main b { display: block; font-size: 1.2rem; } .gs-feat-main small { display: block; color: var(--muted); line-height: 1.4; margin-top: 0.2rem; }
.gs-feat-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 0.45rem; }
.gs-act { border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 0.85rem; font-weight: 700; border: 1.5px solid #1554D1; background: #fff; color: #1554D1; cursor: pointer; }
.gs-act.gs-focus { background: #1554D1; color: #fff; }
.gs-flash { animation: gsFlash 2.4s ease-out 1; }
@keyframes gsFlash { 0%, 30% { box-shadow: 0 0 0 4px rgba(47,123,255,.55); } 100% { box-shadow: 0 0 0 0 rgba(47,123,255,0); } }

/* Update 552: Start Here and New this week */
.sh-tour { display: flex; align-items: center; gap: 0.75rem; padding: 0.8rem 1rem; border-left: 4px solid var(--primary); }
.sh-tour-ic { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); }
.sh-tour-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sh-tour-txt span { color: var(--muted); font-size: 0.9rem; }
.sh-x { flex: none; }
.sh-news { padding: 0.8rem 1rem; border-left: 4px solid var(--success); }
.sh-news-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.3rem; }
.sh-news-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem 0; border-top: 1px solid var(--border); }
.sh-news-row:first-of-type { border-top: 0; }
.sh-news-row p { flex: 1; min-width: 0; margin: 0; }
.sh-news-row .btn { flex: none; }
.sh-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--success); }
.sh-hero p { color: var(--muted); margin-top: 0.25rem; }
.sh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.9rem; margin-bottom: 1rem; }
.sh-card { --sc: var(--primary); background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); border-top: 4px solid var(--sc); padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem; }
.sh-blue { --sc: #2F6FD0; } .sh-green { --sc: #2F7D4F; } .sh-navy { --sc: #1B3A6B; } .sh-red { --sc: #D0313F; } .sh-amber { --sc: #C27A12; } .sh-purple { --sc: #6B4BB8; } .sh-gray { --sc: #64707F; }
.sh-card-h { display: flex; align-items: center; gap: 0.6rem; }
.sh-card-h h3 { margin: 0; font-size: 1.05rem; }
.sh-ic { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: #fff; background: var(--sc); }
.sh-ic .ic { width: 20px; height: 20px; }
.sh-d { margin: 0; color: var(--muted); }
.sh-steps { margin: 0; padding-left: 1.3rem; display: flex; flex-direction: column; gap: 0.2rem; }
.sh-steps li::marker { color: var(--sc); font-weight: 700; }
.sh-btns { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: auto; padding-top: 0.3rem; }
.sh-ed-row { border-top: 1px solid var(--border); padding: 0.7rem 0; display: flex; flex-direction: column; gap: 0.45rem; }
.sh-ed-t { width: 100%; }
.sh-ed-opts { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: end; }
.sh-ed-opts label { display: flex; flex-direction: column; font-size: 0.85rem; color: var(--muted); }
@media (max-width: 600px) { .sh-grid { grid-template-columns: 1fr; } .sh-news-row { flex-wrap: wrap; } .sh-news-row .btn { margin-left: 1.1rem; } }

/* Update 553: Sheet vs. site */
.cmp-h { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.cmp-row { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 0.25rem 0.6rem; padding: 0.5rem 0; border-top: 1px solid var(--border); cursor: pointer; }
.cmp-row input { width: 20px; height: 20px; }
.cmp-vals { grid-column: 2 / -1; display: flex; gap: 1rem; }
.cmp-v { display: inline-flex; align-items: center; gap: 0.35rem; }
.cmp-v small { color: var(--muted); }
.cmp-by { grid-column: 2 / -1; color: var(--muted); }
.cmp .rr-btns [data-go]:disabled { opacity: 0.5; }