:root {
  --black: #0d0d0f;
  --panel: #17171b;
  --panel-2: #202027;
  --line: #34343d;
  --white: #f7f7f7;
  --muted: #a7a7b0;
  --copper: #b87333;
  --orange: #e87924;
  --yellow: #f2c744;
  --green: #2da866;
  --blue: #2979c9;
  --red: #c94343;
  --radius: 18px;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--black); color: var(--white); font-family: Arial, Helvetica, sans-serif; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 250px 1fr; }
.sidebar { position: sticky; top: 0; height: 100vh; padding: 26px 18px; background: #09090b; border-right: 1px solid var(--line); display: flex; flex-direction: column; }
.brand-kicker, .eyebrow, .section-number { color: var(--copper); font-size: .72rem; font-weight: 800; letter-spacing: .12em; }
.brand-block h1 { margin: 8px 0 4px; font-size: 1.45rem; }
.brand-block p, .top-header p { color: var(--muted); margin: 0; }
.main-navigation { display: grid; gap: 8px; margin-top: 34px; }
.nav-button { padding: 13px 14px; border: 1px solid transparent; border-radius: 12px; background: transparent; color: var(--muted); text-align: left; font-weight: 800; }
.nav-button:hover, .nav-button.active { background: var(--panel); color: var(--white); border-color: var(--line); }
.sidebar-footer { margin-top: auto; display: grid; gap: 4px; color: var(--muted); }
.main-content { padding: 26px; min-width: 0; }
.top-header, .section-heading, .panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.top-header { padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.top-header h2, .section-heading h2, .panel-heading h3 { margin: 5px 0 0; }
.app-section { display: none; padding-top: 26px; }
.app-section.active-section { display: block; }
.dashboard-summary-grid { display: grid; grid-template-columns: repeat(6, minmax(130px, 1fr)); gap: 14px; margin: 22px 0; }
.summary-card, .timer-board article, .snapshot-item { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.summary-card span, .timer-board span, .snapshot-item span { display: block; color: var(--muted); font-size: .74rem; font-weight: 800; }
.summary-card strong, .timer-board strong, .snapshot-item strong { display: block; margin: 9px 0; font-size: 1.45rem; }
.featured-card { border-color: var(--copper); }
.panel { margin-top: 20px; padding: 22px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.snapshot-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 18px; }
.timer-board { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 22px 0; }
.control-panel { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; padding: 22px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.round-control { width: 142px; height: 142px; border-radius: 50%; border: 5px solid rgba(255,255,255,.16); color: white; font-weight: 900; letter-spacing: .03em; box-shadow: inset 0 0 0 2px rgba(0,0,0,.2); }
.round-control:disabled { opacity: .35; cursor: not-allowed; }
.start-control { background: var(--green); }
.driving-control { background: var(--blue); }
.break-control { background: var(--yellow); color: #181818; }
.end-control { background: var(--red); }
.form-grid { display: grid; gap: 15px; margin-top: 18px; }
.two-columns { grid-template-columns: repeat(2, 1fr); }
.three-columns { grid-template-columns: repeat(3, 1fr); }
.four-columns { grid-template-columns: repeat(4, 1fr); }
.form-group { display: grid; gap: 7px; }
label { color: var(--muted); font-size: .76rem; font-weight: 800; }
input, select, textarea { width: 100%; border: 1px solid var(--line); border-radius: 11px; background: #101014; color: var(--white); padding: 12px 13px; }
textarea { resize: vertical; }
.primary-action, .secondary-action, .danger-action, .icon-button { border: 0; border-radius: 11px; padding: 12px 16px; font-weight: 900; }
.primary-action { background: var(--copper); color: white; }
.secondary-action { background: var(--panel-2); color: white; border: 1px solid var(--line); }
.danger-action { background: var(--red); color: white; }
.icon-button { background: transparent; color: var(--muted); }
.button-row, .inline-form { display: flex; gap: 10px; margin-top: 15px; }
.inline-form input { flex: 1; }
.inspection-grid { display: flex; flex-wrap: wrap; gap: 12px; margin: 18px 0; }
.inspection-option { display: flex; align-items: center; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 11px; }
.inspection-option input { width: auto; }
.entry-list, .activity-list, .management-list { display: grid; gap: 12px; margin-top: 16px; }
.entry-card, .activity-card, .management-card { padding: 15px; border: 1px solid var(--line); border-radius: 13px; background: #111115; }
.activity-card { cursor: pointer; }
.activity-card:hover { border-color: var(--copper); }
.entry-card-header, .management-card, .activity-card-header { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.entry-meta { color: var(--muted); font-size: .88rem; margin-top: 8px; line-height: 1.5; }
.status-badge, .record-badge { padding: 7px 10px; border-radius: 999px; background: var(--panel-2); color: var(--muted); font-size: .72rem; font-weight: 900; }
.status-badge.active { background: rgba(45,168,102,.2); color: #77e0a8; }
.status-badge.break { background: rgba(242,199,68,.2); color: var(--yellow); }
.status-badge.driving { background: rgba(41,121,201,.2); color: #85bdff; }
.filter-grid { display: grid; grid-template-columns: 2fr 1fr 1fr auto; gap: 12px; }
.empty-message { color: var(--muted); text-align: center; padding: 20px; }
.notification-bar { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 50; padding: 13px 18px; border-radius: 999px; background: var(--green); color: white; font-weight: 800; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.notification-bar.warning { background: #9c7410; }
.notification-bar.error { background: var(--red); }
.trailer-groups { display: grid; gap: 18px; margin-top: 18px; }
.trailer-group h3 { color: var(--copper); border-bottom: 1px solid var(--line); padding-bottom: 8px; }
dialog { width: min(900px, 94vw); max-height: 90vh; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); color: var(--white); padding: 0; }
dialog::backdrop { background: rgba(0,0,0,.75); }
.dialog-content { padding: 22px; overflow: auto; max-height: 88vh; }
.detail-section { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.detail-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.detail-item { background: #111115; padding: 12px; border-radius: 10px; }
.detail-item span { display:block; color: var(--muted); font-size: .75rem; }
.detail-item strong { display:block; margin-top:6px; }
@media (max-width: 1100px) {
  .dashboard-summary-grid { grid-template-columns: repeat(3, 1fr); }
  .four-columns { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 800px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; }
  .main-navigation { grid-template-columns: repeat(3, 1fr); }
  .nav-button { text-align: center; font-size: .76rem; }
  .sidebar-footer { margin-top: 18px; }
  .main-content { padding: 16px; }
  .dashboard-summary-grid, .timer-board, .snapshot-grid { grid-template-columns: repeat(2, 1fr); }
  .three-columns, .two-columns, .four-columns, .filter-grid, .detail-grid { grid-template-columns: 1fr; }
  .round-control { width: 125px; height: 125px; }
}


/* Build 0.3.1 - Technical inspections and persistent equipment alerts */
.section-help {
  color: var(--muted);
  line-height: 1.55;
  margin: 12px 0 0;
}
.inspection-action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 15px;
  margin-top: 18px;
}
.inspection-launch-button {
  min-height: 112px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #111115;
  color: var(--white);
  text-align: left;
  display: grid;
  gap: 5px;
}
.inspection-launch-button:hover {
  border-color: var(--copper);
  transform: translateY(-1px);
}
.inspection-launch-button span,
.inspection-launch-button small {
  color: var(--muted);
  font-size: .75rem;
  font-weight: 800;
}
.inspection-launch-button strong {
  font-size: 1.25rem;
}
.pretrip-button { box-shadow: inset 5px 0 0 var(--blue); }
.posttrip-button { box-shadow: inset 5px 0 0 var(--copper); }

.inspection-type-picker {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 20px 0;
}
.equipment-choice {
  position: relative;
}
.equipment-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.equipment-choice span {
  display: block;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #111115;
  color: var(--muted);
  text-align: center;
  font-weight: 900;
}
.equipment-choice input:checked + span {
  border-color: var(--copper);
  color: var(--white);
  box-shadow: inset 0 0 0 1px var(--copper);
}
.equipment-choice.disabled {
  opacity: .35;
  pointer-events: none;
}
.selected-equipment-display {
  margin-bottom: 18px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #101014;
}
.selected-equipment-display span {
  display: block;
  color: var(--muted);
  font-size: .74rem;
  font-weight: 900;
}
.selected-equipment-display strong {
  display: block;
  margin-top: 7px;
  font-size: 1.2rem;
}

.inspection-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 9px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 900;
}
.inspection-status.repaired { color: #77e0a8; background: rgba(45,168,102,.18); }
.inspection-status.unrepaired { color: #ff8d8d; background: rgba(201,67,67,.18); }
.inspection-status.pending { color: var(--yellow); background: rgba(242,199,68,.16); }

.equipment-alert-panel {
  margin-top: 22px;
}
.equipment-alert-card {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 17px 20px;
  background: #151519;
  color: var(--white);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 15px;
  align-items: center;
  text-align: left;
}
.equipment-alert-card.alert-unrepaired {
  border-color: rgba(201,67,67,.75);
  box-shadow: 0 0 0 1px rgba(201,67,67,.16), 0 0 22px rgba(201,67,67,.14);
}
.equipment-alert-card.alert-pending {
  border-color: rgba(242,199,68,.72);
  box-shadow: 0 0 0 1px rgba(242,199,68,.14), 0 0 22px rgba(242,199,68,.11);
}
.alert-light {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  display: block;
}
.alert-unrepaired .alert-light {
  background: var(--red);
  animation: redDigitalPulse 1.8s ease-in-out infinite;
}
.alert-pending .alert-light {
  background: var(--yellow);
  animation: yellowDigitalPulse 2.1s ease-in-out infinite;
}
.equipment-alert-copy {
  display: grid;
  gap: 4px;
}
.equipment-alert-copy small { color: var(--muted); font-weight: 900; }
.equipment-alert-copy strong { font-size: 1.08rem; }
.equipment-alert-copy > span { color: var(--muted); }
.equipment-alert-arrow { font-size: .76rem; font-weight: 900; color: var(--copper); }

@keyframes redDigitalPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201,67,67,.18), 0 0 6px rgba(201,67,67,.45); transform: scale(.92); }
  50% { box-shadow: 0 0 0 10px rgba(201,67,67,0), 0 0 21px rgba(201,67,67,.85); transform: scale(1.08); }
}
@keyframes yellowDigitalPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(242,199,68,.16), 0 0 6px rgba(242,199,68,.38); transform: scale(.92); }
  50% { box-shadow: 0 0 0 10px rgba(242,199,68,0), 0 0 19px rgba(242,199,68,.75); transform: scale(1.08); }
}
.issue-list {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}
.issue-card {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #111115;
}
.issue-card.unrepaired { border-left: 5px solid var(--red); }
.issue-card.pending { border-left: 5px solid var(--yellow); }
.issue-card-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}
.issue-resolution-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  margin-top: 13px;
}
@media (prefers-reduced-motion: reduce) {
  .alert-unrepaired .alert-light,
  .alert-pending .alert-light {
    animation: none;
  }
  .inspection-launch-button:hover {
    transform: none;
  }
}
@media (max-width: 650px) {
  .inspection-action-grid,
  .inspection-type-picker,
  .issue-resolution-row {
    grid-template-columns: 1fr;
  }
}


/* Build 0.3.2 - Reefer temperature, mode and trailer activity notes */
.temperature-input-row {
  display: grid;
  grid-template-columns: 1fr 88px;
  gap: 10px;
}
#reeferSettingsGroup {
  margin-top: 15px;
}
#reeferSettingsGroup textarea,
#nonReeferNotesGroup textarea {
  min-height: 86px;
}


/* Build 0.3.3 - Edit and delete Trailer & Load activity */
.trailer-activity-actions {
  align-items: center;
}
.entry-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.edit-action {
  background: var(--blue);
  color: white;
  border: 0;
  border-radius: 9px;
  padding: 9px 12px;
  font-weight: 900;
}
.delete-action {
  background: transparent;
  color: #ff8d8d;
  border: 1px solid rgba(201,67,67,.55);
  border-radius: 9px;
  padding: 9px 12px;
  font-weight: 900;
}
.editing-indicator {
  border-color: var(--blue) !important;
  box-shadow: inset 0 0 0 1px rgba(41,121,201,.35);
}


/* Build 0.3.5 - Live Route & Destination timer */
.active-route-card {
  margin-top: 16px;
  padding: 17px;
  border: 1px solid rgba(41,121,201,.65);
  border-radius: 15px;
  background: linear-gradient(145deg, rgba(41,121,201,.13), rgba(17,17,21,.95));
  box-shadow: inset 0 0 0 1px rgba(41,121,201,.1);
}
.active-route-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.active-route-header > div {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #85bdff;
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .08em;
}
.active-route-header > strong {
  font-size: 1.5rem;
  font-variant-numeric: tabular-nums;
}
.route-status-light {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--blue);
  animation: routePulse 1.8s ease-in-out infinite;
}
.active-route-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 14px;
}
.active-route-grid > div {
  padding: 12px;
  border-radius: 11px;
  background: rgba(10,10,13,.54);
}
.active-route-grid span {
  display: block;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 900;
}
.active-route-grid strong {
  display: block;
  margin-top: 6px;
}
@keyframes routePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(41,121,201,.22), 0 0 5px rgba(41,121,201,.5); }
  50% { box-shadow: 0 0 0 8px rgba(41,121,201,0), 0 0 16px rgba(41,121,201,.85); }
}
@media (prefers-reduced-motion: reduce) {
  .route-status-light { animation: none; }
}
@media (max-width: 650px) {
  .active-route-grid { grid-template-columns: 1fr; }
}


/* Build 0.3.6 - Expanded complete Manual Record */
.manual-record-dialog {
  width: min(1120px, 94vw);
}
.manual-form-section {
  margin-top: 22px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #111115;
}
.manual-section-heading {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.manual-section-heading h3 {
  margin: 0;
}
.manual-section-heading p {
  margin: 5px 0 0;
  color: var(--muted);
}
.manual-trailer-builder {
  margin-top: 18px;
  padding: 17px;
  border: 1px dashed rgba(184,115,51,.55);
  border-radius: 14px;
  background: rgba(184,115,51,.045);
}
.manual-save-button {
  width: 100%;
  margin-top: 22px;
  padding: 16px;
}
.manual-movement-card {
  border-left: 5px solid var(--copper);
}
.manual-movement-card.bobtail {
  border-left-color: var(--blue);
}
.manual-movement-summary {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}
.manual-movement-summary strong {
  font-size: 1.05rem;
}
.manual-movement-details {
  margin-top: 9px;
  color: var(--muted);
  line-height: 1.55;
}
.manual-remove-movement {
  border: 1px solid rgba(201,67,67,.55);
  border-radius: 9px;
  background: transparent;
  color: #ff8d8d;
  padding: 8px 11px;
  font-weight: 900;
}


/* Build 0.3.7 - Rounded mileage and chained manual locations */
.clearable-input {
  position: relative;
}
.clearable-input input {
  padding-right: 42px;
}
.clear-input-button {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(201,67,67,.17);
  color: #ff7373;
  font-size: 1.35rem;
  font-weight: 900;
  line-height: 1;
}
.clear-input-button:hover {
  background: rgba(201,67,67,.3);
  color: #ffffff;
}


/* Build 0.3.8 - Manual equipment shortcuts and trailer-type logic */
.manual-movement-main-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  gap: 15px;
  margin-top: 18px;
}
@media (max-width: 1200px) {
  .manual-movement-main-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 750px) {
  .manual-movement-main-grid {
    grid-template-columns: 1fr;
  }
}


/* Build 0.3.9 - Multi-day manual work records */
.overnight-work-row {
  display: grid;
  grid-template-columns: auto minmax(210px, 320px) 1fr;
  gap: 15px;
  align-items: end;
  margin-top: 15px;
}
.work-over-24-option {
  min-height: 46px;
  margin: 0;
}
.duration-hint {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #101014;
  color: var(--muted);
  line-height: 1.4;
}
.manual-date-range {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-weight: 800;
}
@media (max-width: 850px) {
  .overnight-work-row {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
}


/* Build 0.4.0 - Compact work-time display */
#todayWorkedTime,
#todayDrivingTime,
#weeklyWorkedTime,
#shiftWorkedTime,
#shiftDrivingTime,
#shiftBreakTime,
#manualWorkedTotal {
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}


/* Build 0.4.1 - Multiple trucks in Manual Records */
.manual-truck-builder {
  margin-top: 18px;
  padding: 17px;
  border: 1px dashed rgba(41,121,201,.55);
  border-radius: 14px;
  background: rgba(41,121,201,.045);
}
.manual-truck-card {
  border-left: 5px solid var(--blue);
}
.manual-day-mileage-total {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid rgba(45,168,102,.55);
  border-radius: 14px;
  background: rgba(45,168,102,.07);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}
.manual-day-mileage-total span {
  color: var(--muted);
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .08em;
}
.manual-day-mileage-total strong {
  font-size: 1.45rem;
}


/* Build 0.4.2 - Technical inspections inside Manual Records */
.manual-inspection-controls {
  margin-top: 18px;
  padding: 17px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #101014;
}
.manual-inspection-card {
  border-left: 5px solid var(--copper);
}
.manual-inspection-card.unrepaired {
  border-left-color: var(--red);
}
.manual-inspection-card.pending {
  border-left-color: var(--yellow);
}
.manual-inspection-card.repaired {
  border-left-color: var(--green);
}


/* Build 0.4.3 - Backup, editable history and printable PDF records */
.backup-panel {
  margin-top: 18px;
}
.settings-description,
.backup-note {
  color: var(--muted);
  line-height: 1.55;
}
.backup-note {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #101014;
}
.record-dialog-heading {
  align-items: flex-start;
}
.record-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 9px;
}
.edit-history-dialog {
  width: min(1120px, 95vw);
}
.record-json-editor {
  min-height: 140px;
  font-family: Consolas, "Courier New", monospace;
  font-size: .82rem;
  line-height: 1.45;
}
.pdf-document-header {
  display: none;
}
@media (max-width: 760px) {
  .record-dialog-actions {
    width: 100%;
    justify-content: flex-start;
  }
}
@media print {
  @page {
    size: auto;
    margin: 0.45in;
  }
  body * {
    visibility: hidden !important;
  }
  #recordDialog,
  #recordDialog * {
    visibility: visible !important;
  }
  #recordDialog {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: #ffffff !important;
    color: #111111 !important;
    overflow: visible !important;
  }
  #recordDialog::backdrop {
    display: none !important;
  }
  #recordDialog .dialog-content {
    width: 100% !important;
    max-width: none !important;
    max-height: none !important;
    overflow: visible !important;
    border: 0 !important;
    box-shadow: none !important;
    background: #ffffff !important;
    color: #111111 !important;
  }
  #recordDialog .record-dialog-actions {
    display: none !important;
  }
  #recordDialog .pdf-document-header {
    display: block !important;
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 2px solid #333333;
  }
  #recordDialog .eyebrow,
  #recordDialog .entry-meta,
  #recordDialog .detail-item span {
    color: #555555 !important;
  }
  #recordDialog .entry-card,
  #recordDialog .detail-item,
  #recordDialog .detail-section {
    break-inside: avoid;
    background: #ffffff !important;
    color: #111111 !important;
    border-color: #bbbbbb !important;
    box-shadow: none !important;
  }
  #recordDialog .inspection-status {
    border: 1px solid #777777 !important;
    color: #111111 !important;
    background: #eeeeee !important;
  }
}


/* Build 0.4.4 - Mobile, iPad and tablet support */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

button,
input,
select,
textarea {
  font-size: 16px;
}

button,
.icon-button,
.primary-action,
.secondary-action {
  min-height: 44px;
  touch-action: manipulation;
}

dialog {
  max-width: calc(100vw - 24px);
  max-height: calc(100dvh - 24px);
}

dialog::backdrop {
  background: rgba(0, 0, 0, .72);
}

.dialog-content {
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.edit-history-dialog,
.manual-record-dialog {
  width: min(1120px, calc(100vw - 24px));
}

.record-json-editor {
  width: 100%;
  resize: vertical;
  white-space: pre;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 900px) {
  .record-dialog-heading {
    display: block;
  }

  .record-dialog-actions {
    width: 100%;
    margin-top: 14px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .record-dialog-actions .icon-button {
    grid-column: 1 / -1;
  }

  .backup-panel .button-row,
  .manual-form-section .button-row {
    display: grid;
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  dialog {
    width: calc(100vw - 12px);
    max-width: calc(100vw - 12px);
    max-height: calc(100dvh - 12px);
    margin: 6px;
    padding: 0;
  }

  .dialog-content,
  .edit-history-dialog,
  .manual-record-dialog {
    width: 100%;
    max-width: 100%;
    max-height: calc(100dvh - 12px);
    border-radius: 14px;
    padding: 15px;
  }

  .record-dialog-actions {
    grid-template-columns: 1fr;
  }

  .record-dialog-actions .icon-button {
    grid-column: auto;
  }

  .form-grid,
  .form-grid.two-columns,
  .form-grid.three-columns,
  .form-grid.four-columns,
  .inspection-action-grid,
  .detail-grid {
    grid-template-columns: 1fr !important;
  }

  .manual-form-section {
    padding: 14px;
  }

  .manual-section-heading {
    align-items: flex-start;
  }

  .manual-save-button,
  .primary-action,
  .secondary-action {
    width: 100%;
  }

  .entry-card-header,
  .manual-movement-summary {
    flex-direction: column;
    align-items: stretch;
  }

  .entry-card-actions {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .record-json-editor {
    min-height: 180px;
  }
}

@supports (-webkit-touch-callout: none) {
  .dialog-content {
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
  }

  .record-dialog-actions {
    padding-bottom: env(safe-area-inset-bottom);
  }
}


/* Build 0.4.5 - Daily Bible verse and persistent company logo */
.sidebar-logo-panel {
  margin-top: 18px;
  padding: 14px 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(184,115,51,.05));
  display: flex;
  align-items: center;
  justify-content: center;
}
.sidebar-logo-panel img {
  display: block;
  width: min(100%, 180px);
  height: auto;
  opacity: .92;
}
.daily-verse-card {
  min-width: 290px;
  max-width: 420px;
  padding: 14px 16px;
  border: 1px solid rgba(184,115,51,.35);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(184,115,51,.10), rgba(255,255,255,.02));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
}
.verse-kicker {
  display: block;
  color: var(--copper);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
}
.daily-verse-card blockquote {
  margin: 10px 0 8px;
  font-size: .95rem;
  line-height: 1.5;
  color: var(--white);
}
.daily-verse-card small {
  color: var(--muted);
  font-weight: 800;
  letter-spacing: .03em;
}
@media (max-width: 1000px) {
  .top-header {
    align-items: flex-start;
    flex-direction: column;
  }
  .daily-verse-card {
    width: 100%;
    max-width: none;
  }
}
@media (max-width: 800px) {
  .sidebar-logo-panel {
    margin-top: 14px;
  }
  .sidebar-logo-panel img {
    width: min(100%, 140px);
  }
}


/* Build 0.4.6 - Embedded logo and refined daily verse card */
.sidebar-logo-panel img {
  filter: drop-shadow(0 0 10px rgba(255,255,255,.08));
}

.daily-verse-card {
  position: relative;
  overflow: hidden;
  min-width: 300px;
  max-width: 460px;
  padding: 0;
  border: 1px solid rgba(184,115,51,.42);
  border-radius: 18px;
  background:
    radial-gradient(circle at top right, rgba(232,121,36,.12), transparent 38%),
    linear-gradient(145deg, rgba(184,115,51,.12), rgba(18,18,22,.96));
  box-shadow:
    0 10px 28px rgba(0,0,0,.22),
    inset 0 0 0 1px rgba(255,255,255,.025);
}

.verse-card-accent {
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, var(--yellow), var(--copper), var(--orange));
}

.verse-card-content {
  padding: 16px 18px 15px 21px;
}

.verse-card-heading {
  display: flex;
  align-items: center;
  gap: 8px;
}

.verse-icon {
  color: var(--yellow);
  font-size: .85rem;
  text-shadow: 0 0 10px rgba(242,199,68,.38);
}

.verse-kicker {
  color: var(--copper);
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .14em;
}

.daily-verse-card blockquote {
  margin: 12px 0 13px;
  padding: 0;
  border: 0;
  color: var(--white);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1rem;
  font-style: italic;
  line-height: 1.52;
  text-wrap: pretty;
}

.verse-reference-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.verse-line {
  width: 32px;
  height: 1px;
  background: linear-gradient(90deg, var(--copper), transparent);
}

.daily-verse-card small {
  color: var(--yellow);
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .05em;
}

@media (max-width: 1000px) {
  .daily-verse-card {
    width: 100%;
    max-width: none;
    min-width: 0;
  }
}

@media (max-width: 600px) {
  .verse-card-content {
    padding: 14px 15px 14px 18px;
  }

  .daily-verse-card blockquote {
    font-size: .95rem;
  }
}


/* Build 0.4.7 - Equipment summaries and issue highlighting */
.equipment-summary-value {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  font-size: .92rem;
  line-height: 1.35;
  word-break: break-word;
}

.equipment-number {
  display: inline-block;
}

.problem-equipment {
  color: #ff6b6b;
  font-weight: 900;
  text-shadow: 0 0 10px rgba(201,67,67,.24);
}

.equipment-separator {
  color: var(--muted);
  font-weight: 700;
}

@media (max-width: 700px) {
  .equipment-summary-value {
    font-size: .88rem;
  }
}


/* Build 0.4.8 - Carbon fiber neon background */
body {
  background-color: #070b10;
  background-image:
    radial-gradient(circle at 16% 14%, rgba(0, 255, 214, 0.10), transparent 20%),
    radial-gradient(circle at 84% 12%, rgba(0, 191, 255, 0.11), transparent 22%),
    radial-gradient(circle at 50% 100%, rgba(0, 214, 190, 0.08), transparent 30%),
    linear-gradient(45deg, rgba(255,255,255,0.025) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.025) 50%, rgba(255,255,255,0.025) 75%, transparent 75%, transparent),
    linear-gradient(-45deg, rgba(0,0,0,0.24) 25%, transparent 25%, transparent 50%, rgba(0,0,0,0.24) 50%, rgba(0,0,0,0.24) 75%, transparent 75%, transparent),
    linear-gradient(135deg, #0a0f15 0%, #07090e 48%, #0b1016 100%);
  background-size:
    auto,
    auto,
    auto,
    24px 24px,
    24px 24px,
    auto;
  background-attachment: fixed, fixed, fixed, fixed, fixed, fixed;
}

.app-shell {
  background: transparent;
}

main.content-area {
  background: transparent;
}


/* Build 0.4.9 - Fleet tech / futuristic dashboard background */
body {
  position: relative;
  background-color: #060b11;
  background-image:
    radial-gradient(circle at 12% 10%, rgba(0, 255, 200, 0.12), transparent 18%),
    radial-gradient(circle at 88% 9%, rgba(0, 187, 255, 0.14), transparent 20%),
    radial-gradient(circle at 50% 100%, rgba(0, 160, 140, 0.09), transparent 26%),
    linear-gradient(180deg, rgba(7, 15, 24, 0.96) 0%, rgba(5, 10, 17, 0.97) 100%);
  overflow-x: hidden;
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

body::before {
  background:
    linear-gradient(rgba(0, 214, 190, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 214, 190, 0.05) 1px, transparent 1px),
    linear-gradient(135deg, rgba(255,255,255,0.015) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.015) 50%, rgba(255,255,255,0.015) 75%, transparent 75%, transparent);
  background-size: 42px 42px, 42px 42px, 20px 20px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.7), rgba(0,0,0,.35));
  opacity: .8;
}

body::after {
  background:
    radial-gradient(circle at 16% 18%, rgba(0,255,208,.10), transparent 0 16%),
    radial-gradient(circle at 78% 22%, rgba(0,179,255,.11), transparent 0 15%),
    radial-gradient(circle at 62% 76%, rgba(0,255,208,.08), transparent 0 14%),
    linear-gradient(90deg, transparent 0 9%, rgba(0,255,208,.025) 9% 10%, transparent 10% 100%),
    linear-gradient(0deg, transparent 0 12%, rgba(0,179,255,.02) 12% 13%, transparent 13% 100%);
  mix-blend-mode: screen;
}

.app-shell,
main.content-area,
main.content-area > section,
.sidebar,
.panel,
.stat-card,
.entry-card,
.dialog-content {
  position: relative;
  z-index: 1;
}

.sidebar {
  backdrop-filter: blur(14px);
  background: linear-gradient(180deg, rgba(8, 14, 22, 0.88), rgba(7, 12, 18, 0.78));
  box-shadow:
    0 0 0 1px rgba(65, 203, 255, 0.08),
    0 18px 45px rgba(0, 0, 0, 0.36),
    inset 0 0 24px rgba(0, 220, 180, 0.02);
}

.panel,
.stat-card,
.entry-card,
.dialog-content {
  background: linear-gradient(180deg, rgba(15, 22, 32, 0.93), rgba(10, 16, 24, 0.92));
  border-color: rgba(90, 170, 200, 0.18);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.015),
    0 12px 30px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255,255,255,0.03);
}

.top-header {
  backdrop-filter: blur(8px);
}

.brand-block,
.daily-verse-card,
.sidebar-logo-panel {
  box-shadow:
    0 0 0 1px rgba(0, 229, 255, 0.06),
    0 12px 28px rgba(0, 0, 0, 0.25);
}

.nav-button.active,
.primary-action,
.secondary-action:hover,
.icon-button:hover {
  box-shadow: 0 0 0 1px rgba(0, 255, 220, 0.14), 0 0 22px rgba(0, 187, 255, 0.10);
}

@media (max-width: 900px) {
  body::before {
    background-size: 34px 34px, 34px 34px, 18px 18px;
  }
}


/* Build 0.5.0 - 3 Rusty Nails, Inc. company identity */
.company-name-display,
#settingsCompany {
  font-family:
    "Rockwell Extra Bold",
    Rockwell,
    "Copperplate Gothic Bold",
    Copperplate,
    "Bookman Old Style",
    Georgia,
    serif;
  font-weight: 900;
  letter-spacing: .035em;
}

#sidebarCompany {
  color: #f3f3f3;
  font-size: .95rem;
  line-height: 1.25;
  text-shadow:
    0 1px 0 rgba(0,0,0,.8),
    0 0 10px rgba(255,255,255,.05);
}

#driverCompanyName {
  color: var(--muted);
}

#settingsCompany {
  letter-spacing: .02em;
}


/* Build 0.5.1 - History record deletion */
#deleteHistoryRecordButton {
  background: linear-gradient(180deg, #c94343, #9f2f2f);
  box-shadow: 0 0 0 1px rgba(255, 107, 107, .12);
}

#deleteHistoryRecordButton:hover {
  box-shadow:
    0 0 0 1px rgba(255, 107, 107, .25),
    0 0 22px rgba(201, 67, 67, .18);
}


/* Build 0.5.2 - Yard Move, automatic routes, editable start and tap inspections */
.five-timers {
  grid-template-columns: repeat(5, minmax(125px, 1fr));
}

.five-columns {
  grid-template-columns: repeat(5, minmax(140px, 1fr));
}

.yard-move-control {
  background: linear-gradient(180deg, #148f86, #0b655f);
  color: white;
}

.yard-move-control.active {
  box-shadow:
    0 0 0 4px rgba(31, 210, 194, .16),
    0 0 28px rgba(31, 210, 194, .35);
}

.field-help {
  color: var(--muted);
  line-height: 1.35;
}

.route-driving-help {
  margin: 15px 0 0;
  padding: 12px 14px;
  border: 1px solid rgba(41,121,201,.35);
  border-radius: 11px;
  background: rgba(41,121,201,.07);
  color: var(--muted);
  line-height: 1.5;
}

.inspection-checklist-section {
  margin-top: 18px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #101014;
}

.inspection-checklist-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
}

.inspection-checklist-heading p {
  margin: 5px 0 0;
  color: var(--muted);
  line-height: 1.45;
}

.compact-action {
  min-height: 40px;
  padding: 9px 12px;
  white-space: nowrap;
}

.inspection-checklist-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(150px, 1fr));
  gap: 9px;
  margin-top: 15px;
}

.inspection-item-button {
  min-height: 46px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-2);
  color: var(--white);
  text-align: left;
  font-weight: 800;
}

.inspection-item-button.selected {
  border-color: var(--red);
  background: rgba(201,67,67,.14);
  color: #ff9393;
}

.selected-inspection-issues {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.selected-issue-card {
  padding: 12px;
  border: 1px solid rgba(201,67,67,.38);
  border-radius: 11px;
  background: rgba(201,67,67,.06);
}

.selected-issue-card label {
  color: #ff9393;
}

.selected-issue-card textarea {
  margin-top: 8px;
}

@media (max-width: 1100px) {
  .five-timers {
    grid-template-columns: repeat(3, 1fr);
  }

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

@media (max-width: 750px) {
  .five-timers,
  .five-columns,
  .inspection-checklist-grid {
    grid-template-columns: 1fr;
  }

  .inspection-checklist-heading {
    flex-direction: column;
  }

  .compact-action {
    width: 100%;
  }
}


/* Build 0.5.3 - Local-driver controls, fuel equipment and richer History */
.start-time-card {
  border-color: rgba(0, 214, 190, .36);
}

#shiftStartTime {
  color: #63eadc;
}

.four-controls {
  display: grid;
  grid-template-columns: repeat(4, 142px);
  justify-content: center;
  align-items: center;
}

#fuelUnitNumber[readonly] {
  color: #7adfd6;
  font-weight: 900;
  border-color: rgba(0, 214, 190, .28);
}

.reefer-fuel-value {
  font-weight: 900;
}

.fuel-level-empty { color: #ff4f4f !important; }
.fuel-level-1-8 { color: #ff6548 !important; }
.fuel-level-1-4 { color: #ff8738 !important; }
.fuel-level-3-8 { color: #ffad35 !important; }
.fuel-level-1-2 { color: #f2d24a !important; }
.fuel-level-5-8 { color: #b8dd42 !important; }
.fuel-level-3-4 { color: #79d95a !important; }
.fuel-level-7-8 { color: #a4ef43 !important; }
.fuel-level-full { color: #38df78 !important; }

#reeferFuelLevel.fuel-level-empty,
#reeferFuelLevel.fuel-level-1-8,
#reeferFuelLevel.fuel-level-1-4,
#reeferFuelLevel.fuel-level-3-8,
#reeferFuelLevel.fuel-level-1-2,
#reeferFuelLevel.fuel-level-5-8,
#reeferFuelLevel.fuel-level-3-4,
#reeferFuelLevel.fuel-level-7-8,
#reeferFuelLevel.fuel-level-full {
  font-weight: 900;
}

.history-equipment-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin-top: 7px;
}

.history-equipment-row > span {
  color: var(--muted);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .1em;
}

.history-equipment-row > strong {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  color: var(--white);
  font-size: .96rem;
}

@media (max-width: 800px) {
  .four-controls {
    grid-template-columns: repeat(2, 125px);
  }
}

@media (max-width: 420px) {
  .four-controls {
    grid-template-columns: repeat(2, minmax(112px, 125px));
    gap: 14px;
  }
}


/* Build 0.5.4 - Load-specific documents, location memory and friendly History editing */
.friendly-record-editor {
  display: grid;
  gap: 14px;
}

.friendly-editor-card {
  padding: 16px;
  border: 1px solid rgba(90, 170, 200, .18);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(18, 27, 38, .92), rgba(10, 17, 25, .94));
}

.friendly-editor-card h4 {
  margin: 0 0 14px;
  color: #78e0d7;
  font-size: 1rem;
  letter-spacing: .03em;
}

#editHistoryDialog .record-json-editor {
  display: none !important;
}

#trailerDocumentFields.hidden {
  display: none !important;
}


/* Build 0.5.5 - Favorite Routes and Recent Locations */
.route-shortcuts-panel {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid rgba(90, 170, 200, .18);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(13, 22, 31, .94), rgba(8, 15, 23, .94));
}

.route-shortcuts-heading,
.recent-locations-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
}

.route-shortcuts-heading h4,
.recent-locations-heading h4 {
  margin: 0;
  color: #7ce7dd;
  font-size: .86rem;
  letter-spacing: .08em;
}

.route-shortcuts-heading p,
.recent-locations-heading p {
  margin: 5px 0 0;
  color: var(--muted);
  line-height: 1.4;
}

.favorite-route-chip {
  display: grid;
  grid-template-columns: 1fr 38px;
  overflow: hidden;
  border: 1px solid rgba(0, 214, 190, .22);
  border-radius: 11px;
  background: rgba(0, 214, 190, .055);
}

.route-shortcut-list,
.recent-location-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 13px;
}

.favorite-route-chip {
  min-width: min(100%, 280px);
}

.favorite-route-main {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 10px 14px;
  border: 0;
  background: transparent;
  color: var(--white);
}

.favorite-route-main span {
  color: #53d9cc;
  font-weight: 900;
}

.favorite-route-delete {
  border: 0;
  border-left: 1px solid rgba(201, 67, 67, .25);
  background: rgba(201, 67, 67, .09);
  color: #ff7b7b;
  font-size: 1.25rem;
  font-weight: 900;
}

.favorite-route-delete:hover {
  background: rgba(201, 67, 67, .18);
}

.recent-locations-heading {
  margin-top: 20px;
}

.recent-location-chip {
  min-height: 42px;
  padding: 9px 14px;
  border: 1px solid rgba(65, 203, 255, .21);
  border-radius: 999px;
  background: rgba(65, 203, 255, .07);
  color: #d8f7ff;
  font-weight: 800;
}

.recent-location-chip:hover,
.recent-location-chip:focus {
  border-color: rgba(0, 214, 190, .5);
  background: rgba(0, 214, 190, .12);
}

.empty-shortcut-message {
  margin: 0;
  color: var(--muted);
  font-size: .9rem;
}

@media (max-width: 700px) {
  .route-shortcuts-heading {
    flex-direction: column;
  }

  #saveFavoriteRouteButton {
    width: 100%;
  }

  .favorite-route-chip {
    width: 100%;
  }

  .favorite-route-main {
    justify-content: flex-start;
  }
}


/* Build 0.5.6 - Autosave and inspection workflow */
.trailer-inspection-reminder {
  margin: 16px 0;
  padding: 15px;
  border: 1px solid rgba(242, 210, 74, .24);
  border-radius: 14px;
  background: rgba(242, 210, 74, .055);
}

.trailer-inspection-reminder > div:first-child strong {
  color: #f0d45c;
  letter-spacing: .06em;
}

.trailer-inspection-reminder p {
  margin: 5px 0 13px;
  color: var(--muted);
  line-height: 1.45;
}

.compact-inspection-grid {
  margin-top: 0;
}

.autosave-status {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 9px;
  row-gap: 2px;
  margin-bottom: 13px;
  padding: 11px 13px;
  border: 1px solid rgba(56, 223, 120, .22);
  border-radius: 11px;
  background: rgba(56, 223, 120, .055);
}

.autosave-status strong {
  color: #6fe49b;
  font-size: .8rem;
  letter-spacing: .07em;
}

.autosave-status small {
  grid-column: 2;
  color: var(--muted);
  line-height: 1.35;
}

.autosave-dot {
  grid-row: 1 / span 2;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #38df78;
  box-shadow: 0 0 12px rgba(56, 223, 120, .65);
}

#historicalInspectionEquipmentGroup {
  margin-top: 12px;
}

@media (max-width: 700px) {
  .record-dialog-actions {
    flex-wrap: wrap;
  }

  .compact-inspection-grid {
    grid-template-columns: 1fr 1fr;
  }
}


/* Build 0.5.7 - End Day confirmation and no-work-day support */
.confirmation-dialog {
  width: min(92vw, 440px);
  padding: 0;
  border: 1px solid rgba(201, 67, 67, .34);
  border-radius: 18px;
  background: transparent;
  color: var(--white);
}

.confirmation-dialog::backdrop {
  background: rgba(0, 0, 0, .76);
  backdrop-filter: blur(6px);
}

.confirmation-dialog-content {
  padding: 28px;
  text-align: center;
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 0%, rgba(201, 67, 67, .14), transparent 44%),
    linear-gradient(180deg, rgba(18, 25, 35, .98), rgba(8, 13, 20, .99));
  box-shadow:
    0 24px 70px rgba(0, 0, 0, .55),
    inset 0 1px 0 rgba(255,255,255,.035);
}

.confirmation-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin: 0 auto 14px;
  border: 1px solid rgba(255, 103, 103, .42);
  border-radius: 50%;
  color: #ff7373;
  font-size: 1.4rem;
  font-weight: 900;
  box-shadow: 0 0 24px rgba(201, 67, 67, .16);
}

.confirmation-dialog h2 {
  margin: 0;
  letter-spacing: .08em;
}

.confirmation-dialog p {
  margin: 13px 0 22px;
  color: #e8edf2;
  font-size: 1.05rem;
  line-height: 1.5;
}

.confirmation-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.confirmation-actions button {
  min-height: 48px;
}


/* Build 0.5.8 - Alphabetical inspection lists and search */
.inspection-search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 14px;
  margin-top: 15px;
}

.inspection-search-row .form-group {
  margin: 0;
}

#inspectionProblemSearch {
  padding-left: 14px;
  border-color: rgba(65, 203, 255, .24);
}

.inspection-search-count {
  min-width: 92px;
  padding-bottom: 12px;
  color: #7ce7dd;
  font-size: .82rem;
  font-weight: 900;
  text-align: right;
  white-space: nowrap;
}

.inspection-no-results {
  grid-column: 1 / -1;
  margin: 0;
  padding: 18px;
  border: 1px dashed rgba(90, 170, 200, .24);
  border-radius: 11px;
  color: var(--muted);
  text-align: center;
}

@media (max-width: 650px) {
  .inspection-search-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .inspection-search-count {
    padding-bottom: 0;
    text-align: left;
  }
}

/* Build 0.5.9 - Inspection summaries and specialized trailer equipment */
.activity-inspection-summary{margin-top:12px;padding:12px;border:1px solid rgba(90,170,200,.18);border-radius:11px;background:rgba(7,14,21,.58)}
.activity-inspection-summary.no-inspection{border-color:rgba(242,210,74,.22);background:rgba(242,210,74,.045)}
.activity-inspection-heading{display:flex;justify-content:space-between;align-items:center;gap:12px}
.activity-inspection-heading strong{color:#7ce7dd;font-size:.76rem;letter-spacing:.06em}
.activity-inspection-heading span{color:var(--muted);font-size:.68rem;font-weight:900}
.activity-inspection-summary>p{margin:8px 0 0;color:var(--muted);font-size:.86rem;line-height:1.4}
.activity-inspection-list{display:grid;gap:8px;margin-top:10px}
.activity-inspection-item{padding:10px;border:1px solid rgba(255,255,255,.055);border-radius:9px;background:rgba(255,255,255,.018)}
.activity-inspection-item>div{display:flex;justify-content:space-between;gap:10px}
.activity-inspection-item>div>strong{font-size:.74rem;letter-spacing:.06em}
.activity-inspection-item p{margin:7px 0 0;color:#e8edf2;font-size:.86rem;line-height:1.42}
.activity-inspection-item small{display:block;margin-top:6px;color:var(--muted)}
.inspection-status-repaired{color:#52df83;font-weight:900}
.inspection-status-pending{color:#f2d24a;font-weight:900}
.inspection-status-unrepaired{color:#ff6767;font-weight:900}
@media(max-width:650px){.activity-inspection-heading,.activity-inspection-item>div{align-items:flex-start;flex-direction:column;gap:5px}}


/* Build 0.6.0 - Active clocks with seconds */
.live-clock-card {
  position: relative;
  overflow: hidden;
}

.live-clock-card::after {
  content: "";
  position: absolute;
  inset: auto 12% 0;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(0, 214, 190, .55), transparent);
  opacity: .22;
}

.live-time-value {
  font-variant-numeric: tabular-nums;
  letter-spacing: .025em;
  white-space: nowrap;
}

.live-clock-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 7px;
  color: var(--muted);
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .12em;
}

.live-clock-status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #56606b;
}

.live-clock-card.clock-running {
  border-color: rgba(0, 214, 190, .34);
  box-shadow:
    0 0 0 1px rgba(0, 214, 190, .04),
    0 0 22px rgba(0, 214, 190, .07),
    inset 0 1px 0 rgba(255,255,255,.025);
}

.live-clock-card.clock-running .live-time-value {
  color: #87f1e6;
  text-shadow: 0 0 14px rgba(0, 214, 190, .18);
}

.live-clock-card.clock-running .live-clock-status {
  color: #55dccc;
}

.live-clock-card.clock-running .live-clock-status::before {
  background: #38dfb9;
  box-shadow: 0 0 10px rgba(56, 223, 185, .72);
  animation: liveClockPulse 1.4s ease-in-out infinite;
}

.live-clock-card.clock-running::after {
  opacity: .8;
  animation: liveClockSweep 2.8s linear infinite;
}

@keyframes liveClockPulse {
  0%, 100% { transform: scale(.82); opacity: .55; }
  50% { transform: scale(1.22); opacity: 1; }
}

@keyframes liveClockSweep {
  0% { transform: translateX(-55%); }
  100% { transform: translateX(55%); }
}

@media (prefers-reduced-motion: reduce) {
  .live-clock-card.clock-running .live-clock-status::before,
  .live-clock-card.clock-running::after {
    animation: none;
  }
}

@media (max-width: 700px) {
  .live-time-value {
    font-size: clamp(1.05rem, 5.2vw, 1.42rem);
  }
}


/* Build 0.6.1 - Editable single inspection records */
#inspectionEntryList .entry-card-actions,
#recordDialogBody .entry-card-actions {
  align-items: center;
  flex-wrap: wrap;
}

#inspectionDialogTitle {
  letter-spacing: .04em;
}


/* Build 0.6.2 - Trailer-specific inspection lists */
#inspectionEquipmentLabel {
  color: #89eee5;
  letter-spacing: .025em;
}


/* Build 0.6.3 - Trailer selector grouped by equipment type */
#shiftTrailer optgroup {
  font-weight: 900;
  color: #6fe4d8;
  background: #111820;
}

#shiftTrailer option {
  color: #f4f7f9;
  background: #0d131a;
  font-weight: 700;
}


/* Build 0.6.4 - Last odometer and compact operations row */
.compact-operations-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr .95fr;
  gap: 14px;
  align-items: start;
}

.compact-operation-panel {
  min-width: 0;
  padding: 15px;
}

.compact-operation-panel .panel-heading {
  margin-bottom: 11px;
}

.compact-operation-panel h3 {
  font-size: .92rem;
}

.compact-form-stack {
  display: grid;
  gap: 9px;
}

.compact-two-fields {
  display: grid;
  grid-template-columns: .72fr 1.28fr;
  gap: 9px;
}

.compact-operation-panel .form-group {
  margin: 0;
}

.compact-operation-panel input,
.compact-operation-panel select,
.compact-operation-panel textarea {
  min-height: 42px;
}

.compact-operation-panel textarea {
  resize: vertical;
}

.compact-panel-help {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.4;
}

.compact-panel-button {
  width: 100%;
  margin-top: 10px;
}

.compact-entry-list {
  max-height: 285px;
  overflow-y: auto;
  margin-top: 10px;
}

.compact-entry-list .entry-card {
  padding: 10px;
}

.compact-autosave {
  margin: 10px 0 0;
  padding: 9px 11px;
}

.compact-autosave strong {
  font-size: .7rem;
}

@media (max-width: 1050px) {
  .compact-operations-grid {
    grid-template-columns: 1fr 1fr;
  }

  .compact-operation-panel:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 700px) {
  .compact-operations-grid {
    grid-template-columns: 1fr;
  }

  .compact-operation-panel:last-child {
    grid-column: auto;
  }
}


/* Build 0.6.5 - Unique inspection/activity linking */
.activity-inspection-summary .activity-inspection-item + .activity-inspection-item {
  margin-top: 0;
}


/* Build 0.6.6 - Starting odometer automatic carryover */
#startOdometer:not(:placeholder-shown) {
  font-variant-numeric: tabular-nums;
}


/* Build 0.6.7 - Compact inspection accordions and clean trailer history */
.inspection-accordion {
  margin: 0 0 8px;
  border: 1px solid rgba(90, 170, 200, .17);
  border-radius: 11px;
  background: rgba(7, 14, 21, .58);
  overflow: hidden;
}

.inspection-accordion summary {
  display: grid;
  grid-template-columns: auto auto minmax(72px, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-height: 45px;
  padding: 9px 11px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.inspection-accordion summary::-webkit-details-marker {
  display: none;
}

.inspection-accordion summary::before {
  content: "›";
  color: #70dcd2;
  font-size: 1.15rem;
  font-weight: 900;
  transition: transform .18s ease;
}

.inspection-accordion[open] summary::before {
  transform: rotate(90deg);
}

.inspection-accordion-type,
.inspection-accordion-equipment {
  color: var(--muted);
  font-size: .67rem;
  font-weight: 900;
  letter-spacing: .075em;
}

.inspection-accordion-equipment {
  display: none;
}

.inspection-accordion summary strong {
  font-size: .94rem;
  letter-spacing: .04em;
}

.inspection-unit-clear {
  color: #52df83;
  text-shadow: 0 0 10px rgba(82, 223, 131, .15);
}

.inspection-unit-problem {
  color: #ff6767;
  text-shadow: 0 0 10px rgba(255, 103, 103, .18);
}

.inspection-accordion-status {
  color: var(--muted);
  font-size: .66rem;
  font-weight: 900;
  text-align: right;
}

.inspection-accordion.has-problem {
  border-color: rgba(255, 103, 103, .28);
}

.inspection-accordion.clear-inspection {
  border-color: rgba(82, 223, 131, .2);
}

.inspection-accordion-body {
  padding: 0 12px 12px;
  border-top: 1px solid rgba(255,255,255,.045);
}

.inspection-accordion-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-top: 10px;
}

.inspection-accordion-row span,
.inspection-accordion-notes span {
  color: var(--muted);
  font-size: .67rem;
  font-weight: 900;
  letter-spacing: .07em;
}

.inspection-accordion-row strong {
  color: #e9eef2;
  font-size: .76rem;
}

.inspection-accordion-body > p,
.inspection-accordion-notes p {
  margin: 8px 0 0;
  color: #e9eef2;
  font-size: .84rem;
  line-height: 1.42;
}

.inspection-accordion-notes {
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid rgba(255,255,255,.045);
}

.inspection-accordion-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 11px;
}

.inspection-accordion-footer small {
  color: var(--muted);
}

.inspection-accordion-edit {
  min-height: 32px;
  padding: 5px 10px;
}

#recordDialogBody .detail-section:has(.inspection-accordion),
#inspectionEntryList {
  display: grid;
  gap: 0;
}

@media (min-width: 700px) {
  .inspection-accordion summary {
    grid-template-columns: auto 88px 82px minmax(90px, 1fr) auto;
  }

  .inspection-accordion-equipment {
    display: inline;
  }
}

@media (max-width: 520px) {
  .inspection-accordion summary {
    grid-template-columns: auto minmax(70px, 1fr) auto;
  }

  .inspection-accordion-equipment {
    display: none;
  }

  .inspection-accordion-status {
    max-width: 92px;
  }
}


/* Mobile input and safe-edge correction */
#truckNameInput {
  direction: ltr;
  text-align: left;
  unicode-bidi: isolate;
  min-width: 0;
  width: 100%;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 600px) {
  .main-content {
    padding-left: max(14px, env(safe-area-inset-left));
    padding-right: max(14px, env(safe-area-inset-right));
    padding-bottom: max(18px, env(safe-area-inset-bottom));
  }

  .panel {
    padding-left: 14px;
    padding-right: 14px;
  }

  #trucksSection .inline-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    width: 100%;
  }

  #trucksSection .inline-form input,
  #trucksSection .inline-form button {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  #truckNameInput {
    min-height: 50px;
    padding: 12px 14px;
    font-size: 18px;
  }

  #addTruckButton {
    min-height: 48px;
    padding: 11px 14px;
    font-size: .82rem;
  }

  .primary-action,
  .secondary-action,
  .danger-action,
  .edit-action,
  button {
    margin-left: 0;
    margin-right: 0;
  }

  .main-control-grid,
  .shift-control-grid,
  .dialog-actions,
  .panel-actions {
    padding-left: 2px;
    padding-right: 2px;
  }
}


/* Samsung truck-number order correction */
#truckNameInput,
#truckList,
#shiftTruck {
  direction: ltr !important;
  unicode-bidi: isolate !important;
}

#truckNameInput {
  text-align: left !important;
  writing-mode: horizontal-tb !important;
}


/* BUILD 0.6.17 — HISTORY EDITOR ACTIONS */
.edit-history-heading {
  position: sticky;
  top: -22px;
  z-index: 8;
  margin: -22px -22px 18px;
  padding: 18px 22px;
  background: rgba(16, 16, 20, .97);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(10px);
}
.edit-history-actions,
.edit-history-bottom-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}
.edit-history-bottom-actions {
  position: sticky;
  bottom: -22px;
  z-index: 8;
  margin: 18px -22px -22px;
  padding: 16px 22px;
  background: rgba(16, 16, 20, .97);
  border-top: 1px solid var(--line);
  backdrop-filter: blur(10px);
}
.edit-history-bottom-actions .manual-save-button {
  margin: 0;
}
@media (max-width: 700px) {
  .edit-history-heading {
    align-items: stretch;
  }
  .edit-history-actions,
  .edit-history-bottom-actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .edit-history-actions button,
  .edit-history-bottom-actions button {
    width: 100%;
  }
}


/* BUILD 0.6.18 — Dispatcher Spreadsheet Export */
.dispatcher-export-panel {
  border-color: rgba(183, 110, 27, .38);
  background: linear-gradient(145deg, rgba(183, 110, 27, .08), rgba(12, 20, 28, .96) 42%);
}

.dispatcher-export-dates {
  margin-top: 18px;
}

.dispatcher-export-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 18px 0;
}

.export-option-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 15px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  background: rgba(255,255,255,.035);
  cursor: pointer;
}

.export-option-card input {
  width: 21px;
  height: 21px;
  margin-top: 1px;
  accent-color: #b76e1b;
}

.export-option-card span {
  display: grid;
  gap: 5px;
}

.export-option-card strong {
  color: #fff;
  letter-spacing: .04em;
}

.export-option-card small {
  color: var(--muted-text, #aab5bf);
  line-height: 1.4;
}

.dispatcher-export-buttons {
  flex-wrap: wrap;
}

@media (max-width: 760px) {
  .dispatcher-export-options {
    grid-template-columns: 1fr;
  }

  .dispatcher-export-buttons > button {
    width: 100%;
  }
}


/* BUILD 0.6.19 - TRAILER PLACEMENT */
.placement-dialog-content{max-width:560px}.placement-question{font-size:1.05rem;line-height:1.5;color:var(--muted-text,#b8c1cc);margin:8px 0 18px}.placement-choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:16px 0}.placement-choice{display:flex;align-items:center;justify-content:center;min-height:92px;border:2px solid rgba(255,255,255,.14);border-radius:18px;background:rgba(255,255,255,.035);cursor:pointer;transition:.18s ease}.placement-choice input{position:absolute;opacity:0;pointer-events:none}.placement-choice span{font-size:1.05rem;font-weight:800;letter-spacing:.08em}.placement-choice.selected{border-color:#35c96f;background:rgba(53,201,111,.18);box-shadow:0 0 0 3px rgba(53,201,111,.08),0 0 24px rgba(53,201,111,.14)}.placement-dialog-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}.placement-pending{color:#f3b54a;font-weight:800}.placement-complete{color:#42d77d;font-weight:800}@media(max-width:560px){.placement-choice-grid{grid-template-columns:1fr}.placement-dialog-actions>*{width:100%}}


/* === BUILD 0.6.20 DOCUMENT SCAN & UPLOAD === */
.document-scan-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 22px 0;
  padding: 20px;
  border: 1px solid rgba(80, 175, 255, .24);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(28, 55, 75, .58), rgba(10, 17, 24, .92));
}
.document-scan-panel h3 { margin: 4px 0 6px; }
.document-scan-panel p { margin: 0; color: var(--muted-text, #aeb9c3); }
.document-scan-actions, .document-dialog-actions, .history-document-actions, .document-backup-list { display: flex; flex-wrap: wrap; gap: 10px; }
.document-scan-dialog { width: min(920px, 94vw); }
.document-preview-layout { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(220px, .7fr); gap: 18px; margin: 18px 0; }
.document-preview-box { min-height: 250px; border-radius: 16px; background: #05080b; border: 1px solid rgba(255,255,255,.12); display: grid; place-items: center; overflow: hidden; }
.document-preview-box img { max-width: 100%; max-height: 440px; object-fit: contain; }
.document-scan-status { display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.document-scan-status progress { width: 100%; height: 16px; }
.document-quality-notice { margin: 14px 0; padding: 13px 15px; border-radius: 12px; font-weight: 700; }
.document-quality-notice.warning { color: #ffe6a8; background: rgba(173, 111, 0, .22); border: 1px solid rgba(255, 190, 49, .42); }
.document-quality-notice.success { color: #bff7cd; background: rgba(21, 117, 56, .22); border: 1px solid rgba(78, 214, 118, .35); }
.document-review-fields { margin-top: 14px; }
.ocr-text-details { margin: 18px 0; }
.ocr-text-details textarea { width: 100%; margin-top: 10px; }
.history-document-actions { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.1); }
.document-detail-section { border-left: 4px solid #4daeff; }
@media (max-width: 720px) {
  .document-scan-panel { align-items: stretch; flex-direction: column; }
  .document-preview-layout { grid-template-columns: 1fr; }
  .document-scan-actions > button, .document-dialog-actions > button { flex: 1 1 100%; }
}


/* === BUILD 0.6.21 MANUAL RECORD DOCUMENT SCAN === */
.manual-document-scan-panel {
  margin: 18px 0;
  padding: 18px;
  border: 1px solid rgba(183, 110, 27, .28);
  border-radius: 18px;
  background: rgba(183, 110, 27, .07);
}
.manual-document-scan-panel h4 { margin: 4px 0 6px; }
.manual-document-scan-panel p { margin: 0; }
.manual-document-scan-panel .document-scan-actions { margin-top: 14px; }
#manualDocumentAttachmentStatus.has-document { color: #8ee8a6; font-weight: 700; }
.manual-movement-document-badge {
  display: inline-flex;
  margin-top: 8px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(55, 190, 105, .15);
  border: 1px solid rgba(55, 190, 105, .34);
  color: #9cf1b5;
  font-size: .78rem;
  font-weight: 700;
}


/* === BUILD 0.6.22 SMART DOCUMENT RECOGNITION === */
.document-quality-notice.warning {
  line-height: 1.45;
}

.document-scan-status small {
  display: block;
  line-height: 1.45;
}

/* BUILD 0.6.23: Strict BOL label accuracy and title exclusion. */


/* === BUILD 0.6.24 SMART MOVEMENT + INSPECTIONS === */
.arrived-control {
  border-color: rgba(255, 255, 255, .78);
  background: linear-gradient(145deg, #1f8f5f, #10583e);
  box-shadow: 0 14px 30px rgba(16, 88, 62, .3);
}

.arrived-control.hidden {
  display: none;
}

.control-panel:has(.arrived-control:not(.hidden)) {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

@media (max-width: 900px) {
  .control-panel:has(.arrived-control:not(.hidden)) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* LEGACY BUILD 0.6.25: inspection flow fix. */


/* === LEGACY BUILD 0.6.26 CONTEXTUAL TRAILER & LOAD === */
.movement-entry-hidden {
  display: none !important;
}

.active-movement-summary {
  margin-top: 18px;
}

.active-movement-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.active-movement-grid article {
  min-height: 86px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  background: rgba(255,255,255,.035);
}

.active-movement-grid span {
  display: block;
  margin-bottom: 8px;
  font-size: .72rem;
  letter-spacing: .08em;
  opacity: .68;
}

.active-movement-grid strong {
  display: block;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.active-movement-help {
  margin: 14px 0 0;
  opacity: .72;
}

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

@media (max-width: 560px) {
  .active-movement-grid {
    grid-template-columns: 1fr;
  }
}

/* LEGACY BUILD 0.6.27: previous destination becomes next origin. */


/* === LEGACY BUILD 0.6.28 ENDING ODOMETER AT END DAY === */
.end-day-odometer-panel {
  width: min(100%, 520px);
  margin: 18px auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  text-align: left;
}

.end-day-equipment-summary,
.end-day-odometer-panel .form-group {
  padding: 14px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  background: rgba(255,255,255,.04);
}

.end-day-equipment-summary span {
  display: block;
  margin-bottom: 7px;
  font-size: .72rem;
  letter-spacing: .08em;
  opacity: .7;
}

.end-day-equipment-summary strong {
  font-size: 1.15rem;
}

#endDayEndingOdometerGroup {
  grid-column: 1 / -1;
}

#endDayOdometerHelp {
  grid-column: 1 / -1;
  opacity: .72;
}

@media (max-width: 560px) {
  .end-day-odometer-panel {
    grid-template-columns: 1fr;
  }

  #endDayEndingOdometerGroup,
  #endDayOdometerHelp {
    grid-column: auto;
  }
}


/* === LEGACY BUILD 0.6.29 ACTIVE TRUCK SUMMARY === */
.equipment-summary-card {
  border-color: rgba(203, 126, 54, .42);
  background: linear-gradient(145deg, rgba(203,126,54,.12), rgba(255,255,255,.025));
}

.equipment-summary-card strong {
  overflow-wrap: anywhere;
}

.timer-board:has(.equipment-summary-card:not(.hidden)) {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.trailer-activity-actions:has(#addTrailerActivityButton.hidden):has(#cancelTrailerActivityEditButton.hidden) {
  display: none;
}

@media (max-width: 1100px) {
  .timer-board:has(.equipment-summary-card:not(.hidden)) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 650px) {
  .timer-board:has(.equipment-summary-card:not(.hidden)) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* LEGACY BUILD 0.6.30: dispatcher movement rows. */

/* LEGACY BUILD 0.6.31: professional dispatcher spreadsheet layout. */

/* LEGACY BUILD 0.6.32: complete movement export fix. */


/* === LEGACY BUILD 0.6.33 PDF REPORT SETTINGS === */
.pdf-report-panel {
  border-color: rgba(50, 107, 150, .36);
  background:
    linear-gradient(145deg, rgba(50,107,150,.08), rgba(255,255,255,.018));
}

.pdf-report-panel .panel-heading h3 {
  color: #dcecff;
}


/* === BUILD 0.6.36 — CINEMATIC WELCOME SCREEN === */
body.cinematic-welcome-open { overflow: hidden; }

.cinematic-welcome {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #000;
  transition: opacity .45s ease, visibility .45s ease;
}
.cinematic-welcome.is-closing {
  opacity: 0;
  visibility: hidden;
}
.cinematic-stage {
  position: relative;
  width: 100vw;
  height: 100dvh;
  max-width: 1122px;
  overflow: hidden;
  background: #000;
  isolation: isolate;
}
.cinematic-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  user-select: none;
  -webkit-user-drag: none;
  z-index: 1;
  transform: scale(1.002);
  animation: cinematicBreath 8s ease-in-out infinite;
}
.cinematic-vignette {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 49%, transparent 25%, rgba(0,0,0,.12) 66%, rgba(0,0,0,.5) 100%),
    linear-gradient(180deg, rgba(0,0,0,.08), transparent 25%, transparent 72%, rgba(0,0,0,.18));
}
.cinematic-energy {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 48%;
  width: min(72vw, 720px);
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  mix-blend-mode: screen;
}
.energy-ring-one {
  border: 3px solid rgba(20,174,255,.22);
  box-shadow:
    0 0 22px rgba(0,174,255,.25),
    inset 0 0 28px rgba(27,158,255,.18),
    0 0 70px rgba(0,136,255,.12);
  background:
    repeating-conic-gradient(from 0deg, rgba(56,202,255,.16) 0 2deg, transparent 2deg 8deg);
  mask-image: radial-gradient(circle, transparent 57%, #000 59% 66%, transparent 68%);
  animation: cinematicRingSpin 14s linear infinite;
}
.energy-ring-two {
  width: min(58vw, 580px);
  border: 2px solid rgba(93,219,255,.18);
  box-shadow: 0 0 36px rgba(16,177,255,.22);
  background:
    repeating-conic-gradient(from 90deg, rgba(255,255,255,.13) 0 1deg, transparent 1deg 11deg);
  mask-image: radial-gradient(circle, transparent 61%, #000 63% 66%, transparent 68%);
  animation: cinematicRingSpinReverse 10s linear infinite;
}
.cinematic-beam {
  position: absolute;
  z-index: 4;
  left: -18%;
  width: 140%;
  height: 10px;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
  background: linear-gradient(90deg, transparent 0%, rgba(22,138,255,.08) 24%, rgba(137,231,255,.96) 50%, rgba(24,145,255,.12) 76%, transparent 100%);
  box-shadow:
    0 0 8px rgba(100,220,255,.9),
    0 0 24px rgba(0,152,255,.65),
    0 0 64px rgba(0,112,255,.45);
  filter: blur(.35px);
  transform-origin: center;
}
.beam-one {
  top: 45%;
  transform: rotate(-13deg);
  animation: cinematicBeamSweepOne 4.8s ease-in-out infinite;
}
.beam-two {
  top: 53%;
  transform: rotate(9deg);
  animation: cinematicBeamSweepTwo 5.7s ease-in-out 1.2s infinite;
}
.beam-three {
  top: 41%;
  height: 5px;
  transform: rotate(24deg);
  animation: cinematicBeamSweepThree 6.5s ease-in-out 2.1s infinite;
}
.cinematic-flare {
  position: absolute;
  z-index: 5;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: screen;
  background: #fff;
  box-shadow:
    0 0 8px #fff,
    0 0 24px #42c8ff,
    0 0 58px #008cff,
    0 0 110px rgba(0,140,255,.8);
}
.flare-one {
  left: 26%;
  top: 44%;
  animation: cinematicFlareOne 4.8s ease-in-out infinite;
}
.flare-two {
  left: 67%;
  top: 52%;
  animation: cinematicFlareTwo 5.7s ease-in-out 1.2s infinite;
}
.cinematic-sparks {
  position: absolute;
  z-index: 2;
  inset: 22% 4% 22%;
  pointer-events: none;
  opacity: .42;
  mix-blend-mode: screen;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.95) 0 1px, transparent 1.7px),
    radial-gradient(circle, rgba(33,182,255,.95) 0 1px, transparent 1.8px),
    radial-gradient(circle, rgba(255,164,58,.8) 0 1px, transparent 1.8px);
  background-size: 97px 89px, 131px 113px, 173px 149px;
  background-position: 10px 22px, 45px 18px, 77px 61px;
  animation: cinematicSparkDrift 9s linear infinite;
}
.cinematic-enter-hotspot {
  position: absolute;
  z-index: 20;
  left: 19%;
  right: 19%;
  top: 70.2%;
  height: 9.8%;
  border: 0;
  border-radius: 18px;
  background: transparent;
  cursor: pointer;
  outline-offset: 6px;
}
.cinematic-enter-hotspot::after {
  content: "";
  position: absolute;
  inset: 9% 4%;
  border-radius: 22px;
  box-shadow: 0 0 0 rgba(74,209,255,0);
  transition: box-shadow .2s ease, background .2s ease;
}
.cinematic-enter-hotspot:hover::after,
.cinematic-enter-hotspot:focus-visible::after {
  background: rgba(34,185,255,.06);
  box-shadow: 0 0 30px rgba(74,209,255,.5), inset 0 0 20px rgba(74,209,255,.16);
}
.cinematic-sound-note {
  position: absolute;
  z-index: 21;
  left: 50%;
  bottom: 1.2%;
  transform: translateX(-50%);
  margin: 0;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.62);
  color: rgba(214,231,243,.74);
  font-size: .72rem;
  letter-spacing: .04em;
  white-space: nowrap;
  opacity: .8;
  transition: opacity .3s ease;
}
.cinematic-sound-note.is-hidden { opacity: 0; }

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

@keyframes cinematicBreath {
  0%,100% { transform: scale(1.002); filter: brightness(1) saturate(1); }
  50% { transform: scale(1.012); filter: brightness(1.035) saturate(1.06); }
}
@keyframes cinematicRingSpin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes cinematicRingSpinReverse {
  from { transform: translate(-50%, -50%) rotate(360deg); }
  to { transform: translate(-50%, -50%) rotate(0deg); }
}
@keyframes cinematicBeamSweepOne {
  0%, 13% { opacity: 0; transform: translateX(-20%) rotate(-13deg) scaleX(.65); }
  28% { opacity: .95; }
  52% { opacity: .82; transform: translateX(13%) rotate(-13deg) scaleX(1.04); }
  70%,100% { opacity: 0; transform: translateX(30%) rotate(-13deg) scaleX(.78); }
}
@keyframes cinematicBeamSweepTwo {
  0%, 16% { opacity: 0; transform: translateX(22%) rotate(9deg) scaleX(.7); }
  31% { opacity: .85; }
  55% { opacity: .75; transform: translateX(-12%) rotate(9deg) scaleX(1); }
  74%,100% { opacity: 0; transform: translateX(-29%) rotate(9deg) scaleX(.75); }
}
@keyframes cinematicBeamSweepThree {
  0%, 20% { opacity: 0; transform: translateX(-26%) rotate(24deg) scaleX(.58); }
  38% { opacity: .55; }
  60% { opacity: .46; transform: translateX(18%) rotate(24deg) scaleX(.92); }
  82%,100% { opacity: 0; transform: translateX(34%) rotate(24deg) scaleX(.62); }
}
@keyframes cinematicFlareOne {
  0%,15%,100% { opacity: 0; transform: translate(-90px, 24px) scale(.5); }
  31% { opacity: 1; }
  55% { opacity: .8; transform: translate(185px, -38px) scale(1.35); }
  72% { opacity: 0; transform: translate(300px, -70px) scale(.55); }
}
@keyframes cinematicFlareTwo {
  0%,18%,100% { opacity: 0; transform: translate(105px, -30px) scale(.5); }
  34% { opacity: 1; }
  58% { opacity: .75; transform: translate(-180px, 45px) scale(1.2); }
  76% { opacity: 0; transform: translate(-290px, 78px) scale(.55); }
}
@keyframes cinematicSparkDrift {
  from { transform: translate3d(0,0,0) scale(1); }
  to { transform: translate3d(-34px,24px,0) scale(1.03); }
}

/* About */
.about-hero-panel {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 24px;
  align-items: center;
}
.about-brand-mark {
  display: grid;
  place-items: center;
  min-height: 110px;
  border-radius: 18px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.08);
}
.about-brand-mark img { width: 86px; height: 86px; object-fit: contain; }
.about-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 16px;
}
.about-info-card p,
.about-recognition,
.about-dedication-panel blockquote {
  color: var(--muted-text, #b8c1cc);
  line-height: 1.65;
}
.about-credit-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px;
}
.about-credit-grid > div {
  padding: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  border-radius: 14px;
}
.about-credit-grid span {
  display: block;
  color: var(--muted-text,#b8c1cc);
  font-size: .76rem;
  letter-spacing: .1em;
  margin-bottom: 5px;
}
.about-dedication-panel strong { color: #f0b55a; }

@media (max-width: 760px) {
  .cinematic-stage { max-width: 100vw; }
  .cinematic-enter-hotspot { left: 15%; right: 15%; top: 70%; height: 10.5%; }
  .cinematic-sound-note { font-size: .65rem; bottom: .7%; }
  .about-hero-panel { grid-template-columns: 1fr; text-align: center; }
  .about-card-grid { grid-template-columns: 1fr; }
  .about-credit-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .cinematic-art,
  .cinematic-energy,
  .cinematic-beam,
  .cinematic-flare,
  .cinematic-sparks { animation: none !important; }
}


/* === BUILD 0.6.37 SOUND CONTROLS + EDITABLE PLACEMENT + 0.6.22 TRAILER SELECTOR === */
.sound-settings-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.sound-setting-row { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.025); }
.sound-setting-row span { min-width:0; }
.sound-setting-row strong,.sound-setting-row small { display:block; }
.sound-setting-row small { color:var(--muted); margin-top:4px; line-height:1.35; }
.sound-setting-row input { width:22px; height:22px; flex:0 0 auto; }
.sound-volume-group { margin-top:16px; }
.sound-volume-group input[type="range"] { width:100%; }
.sound-volume-group strong { display:block; margin-top:7px; color:var(--copper); }
.trailer-load-primary-row { display:grid; grid-template-columns:minmax(150px,210px) minmax(320px,1fr) minmax(150px,210px) minmax(150px,210px); gap:14px; align-items:start; }
.trailer-shift-selector-group { min-width:0; width:100%; }
.shift-trailer-search-row { display:grid; grid-template-columns:minmax(160px,1fr) minmax(145px,190px); gap:9px; }
.compact-tabs { display:flex; flex-wrap:wrap; gap:7px; margin:10px 0; }
.shift-trailer-choice-grid { display:grid; grid-template-columns:repeat(4,minmax(92px,1fr)); gap:8px; max-height:260px; overflow-y:auto; overscroll-behavior:contain; padding:4px 4px 4px 0; }
.shift-trailer-choice { width:100%; min-height:42px; padding:8px; border:1px solid var(--line); border-radius:10px; background:#111115; color:var(--white); font-weight:900; }
.shift-trailer-choice.active { border-color:var(--copper); background:rgba(184,115,51,.17); color:#ffd18c; }
.selected-trailer-label { display:block; margin-top:9px; color:var(--copper); font-weight:900; }
.shift-trailer-browser { max-height:430px; opacity:1; overflow:hidden; transition:max-height .34s ease, opacity .28s ease, transform .34s ease, margin .34s ease; transform:translateY(0); }
.shift-trailer-browser.is-collapsed { max-height:0; opacity:0; transform:translateY(-8px); margin:0; pointer-events:none; }
.trailer-load-heading { align-items:center; }
.edit-placement-row { margin-top:12px; }
.edit-door-group.hidden { display:none !important; }
@media (min-width:700px) and (max-width:1100px){ .trailer-load-primary-row{grid-template-columns:minmax(140px,190px) minmax(0,1fr)} .shift-trailer-choice-grid{grid-template-columns:repeat(3,minmax(90px,1fr));max-height:240px;} }
@media (max-width:699px){ .sound-settings-grid{grid-template-columns:1fr} .trailer-load-primary-row{grid-template-columns:1fr 1fr;gap:10px} .trailer-shift-selector-group{grid-column:1/-1;grid-row:2} .shift-trailer-search-row{grid-template-columns:1fr} .shift-trailer-choice-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-height:220px} .compact-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:380px){ .trailer-load-primary-row{grid-template-columns:1fr} .trailer-shift-selector-group{grid-column:auto;grid-row:auto} .shift-trailer-choice-grid{grid-template-columns:1fr} }


/* === BUILD 0.6.38 SOUND + TRAILER LIST FIX === */
.sound-settings-panel.sound-muted .sound-volume-group,
.sound-settings-panel.sound-muted .sound-setting-row:not(:first-of-type) { opacity: .58; }
.sound-volume-group input[type="range"] { cursor: pointer; accent-color: var(--copper); }
.shift-trailer-choice { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; }
.shift-trailer-choice strong { font-size: 1rem; }
.shift-trailer-choice small { color: var(--muted-text, #aeb8c3); font-size: .72rem; font-weight: 700; }
.shift-trailer-choice.active small { color: #ffd18c; }

/* === BUILD 0.6.39 SOUND CONTROLS + TRAILER TABS REBUILT === */
.sound-control-button{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;padding:15px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.025);color:var(--white);text-align:left;cursor:pointer}.sound-control-button span{min-width:0}.sound-control-button strong,.sound-control-button small{display:block}.sound-control-button small{margin-top:4px;color:var(--muted);line-height:1.35}.sound-control-button b{min-width:54px;padding:8px 10px;border-radius:999px;background:rgba(54,199,109,.15);border:1px solid rgba(54,199,109,.45);color:#66e391;text-align:center}.sound-control-button.is-off b{background:rgba(239,79,79,.12);border-color:rgba(239,79,79,.42);color:#ff8c8c}.sound-volume-card039{margin-top:18px;padding:16px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.025)}.sound-volume-heading039{display:flex;justify-content:space-between;gap:16px;align-items:center}.sound-volume-heading039 strong{font-size:1.15rem;color:var(--copper)}#soundVolume039{display:block;width:100%;height:34px;margin:10px 0 12px;cursor:pointer;accent-color:var(--copper);touch-action:none}.sound-volume-buttons039{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.sound-volume-buttons039 button{min-height:38px;border:1px solid var(--line);border-radius:10px;background:#111115;color:var(--white);font-weight:800}.sound-volume-buttons039 button:hover{border-color:var(--copper);color:#ffd18c}.trailer-picker039{max-height:520px;opacity:1;overflow:hidden;transition:max-height .35s ease,opacity .28s ease,transform .35s ease,margin .35s ease;transform:translateY(0)}.trailer-picker039.is-hidden039{max-height:0;opacity:0;pointer-events:none;transform:translateY(-8px);margin:0}.trailer-picker-tools039{display:grid;grid-template-columns:minmax(160px,1fr) minmax(150px,210px);gap:10px}.trailer-tabs039{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}.trailer-tab039{display:flex;align-items:center;gap:8px;min-height:42px;padding:8px 12px;border:1px solid var(--line);border-radius:999px;background:#111115;color:var(--white);font-weight:800}.trailer-tab039 strong{display:grid;place-items:center;min-width:25px;height:25px;padding:0 6px;border-radius:999px;background:rgba(255,255,255,.08);font-size:.78rem}.trailer-tab039.active{border-color:var(--copper);background:rgba(184,115,51,.18);color:#ffd18c}.trailer-list039{display:grid;grid-template-columns:repeat(4,minmax(92px,1fr));gap:9px;max-height:300px;overflow-y:auto;padding:2px 3px 5px 0}.trailer-choice039{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:58px;padding:9px;border:1px solid var(--line);border-radius:11px;background:#111115;color:var(--white)}.trailer-choice039 strong{font-size:1rem}.trailer-choice039 small{color:var(--muted);font-weight:700}.trailer-choice039:hover,.trailer-choice039.active{border-color:var(--copper);background:rgba(184,115,51,.17);color:#ffd18c}.selected-trailer-card039{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px 14px;padding:14px;border:1px solid rgba(184,115,51,.45);border-radius:14px;background:rgba(184,115,51,.09)}.selected-trailer-card039 span{grid-column:1;color:var(--muted);font-size:.76rem;letter-spacing:.1em}.selected-trailer-card039 strong{grid-column:1;font-size:1.05rem;color:#ffd18c}.selected-trailer-card039 button{grid-column:2;grid-row:1/3}.trailer-empty039{grid-column:1/-1;padding:18px;border:1px dashed var(--line);border-radius:12px;color:var(--muted);text-align:center}@media(max-width:760px){.sound-volume-buttons039{grid-template-columns:repeat(3,minmax(0,1fr))}.trailer-picker-tools039{grid-template-columns:1fr}.trailer-tabs039{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.trailer-tab039{justify-content:space-between;border-radius:12px}.trailer-list039{grid-template-columns:repeat(2,minmax(0,1fr));max-height:330px}}


/* === BUILD 0.6.40 — RESTORED 0.6.22 TRAILER MENU / NO SOUND === */
.sound-settings-panel, .cinematic-sound-note, #shiftTrailerBrowser, #changeTrailerButton, #selectedShiftTrailerLabel, #trailerPicker039, #selectedTrailerCard039 { display:none !important; }
#trailerSelectGroup #shiftTrailer { display:block !important; width:100%; }


/* === BUILD 0.6.41 — EXACT 0.6.22-STYLE TRAILER TABS MENU === */
.exact-trailer-picker-group {
  grid-column: span 2;
  min-width: 0;
}
.exact-trailer-native-select {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.exact-trailer-picker {
  display: grid;
  gap: 12px;
  min-width: 0;
}
.exact-trailer-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 168px;
  gap: 10px;
}
.exact-trailer-toolbar input,
.exact-trailer-toolbar select {
  width: 100%;
  min-width: 0;
}
.exact-trailer-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 42px;
}
.exact-trailer-tab {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 40px;
  padding: 0 13px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 11px;
  color: #f1a84a;
  background: rgba(12,16,22,.92);
  font-weight: 850;
  letter-spacing: .02em;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease;
}
.exact-trailer-tab:hover,
.exact-trailer-tab:focus-visible {
  border-color: rgba(241,168,74,.7);
  transform: translateY(-1px);
}
.exact-trailer-tab.is-active {
  border-color: #d9892e;
  background: rgba(218,129,32,.11);
  box-shadow: inset 0 0 0 1px rgba(255,174,74,.08), 0 0 16px rgba(218,129,32,.08);
}
.exact-trailer-tab-count {
  display: inline-grid;
  place-items: center;
  min-width: 28px;
  height: 24px;
  padding: 0 7px;
  border-radius: 999px;
  color: #f3f5f8;
  background: rgba(255,255,255,.11);
  font-size: .78rem;
}
.exact-trailer-tab.is-active .exact-trailer-tab-count {
  color: #111;
  background: #e89437;
}
.exact-trailer-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  max-height: 238px;
  min-height: 110px;
  overflow-y: auto;
  padding: 10px 6px 10px 0;
  scrollbar-gutter: stable;
  border-top: 1px solid rgba(255,255,255,.08);
}
.exact-trailer-option {
  min-height: 42px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  color: #f7f8fa;
  background: rgba(13,15,20,.96);
  font-size: 1rem;
  font-weight: 900;
  cursor: pointer;
  transition: border-color .14s ease, background .14s ease, color .14s ease, transform .14s ease;
}
.exact-trailer-option:hover,
.exact-trailer-option:focus-visible {
  border-color: rgba(85,177,255,.78);
  background: rgba(35,111,175,.13);
  transform: translateY(-1px);
}
.exact-trailer-option.is-selected {
  border-color: #e89437;
  color: #ffb65c;
  background: rgba(232,148,55,.14);
  box-shadow: inset 0 0 0 1px rgba(232,148,55,.12);
}
.exact-trailer-empty {
  grid-column: 1 / -1;
  display: grid;
  place-items: center;
  min-height: 96px;
  border: 1px dashed rgba(255,255,255,.16);
  border-radius: 12px;
  color: var(--muted-text,#aeb7c2);
}
.exact-trailer-selection-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 34px;
  color: #e89437;
}
.exact-change-trailer { flex: 0 0 auto; }
.exact-trailer-picker.is-collapsed .exact-trailer-toolbar,
.exact-trailer-picker.is-collapsed .exact-trailer-tabs,
.exact-trailer-picker.is-collapsed .exact-trailer-grid {
  display: none;
}
.exact-trailer-picker.is-collapsed {
  gap: 0;
}
@media (max-width: 900px) {
  .exact-trailer-picker-group { grid-column: 1 / -1; }
  .exact-trailer-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 620px) {
  .exact-trailer-toolbar { grid-template-columns: 1fr; }
  .exact-trailer-grid { grid-template-columns: repeat(2, minmax(0,1fr)); max-height: 260px; }
  .exact-trailer-tab { flex: 1 1 auto; justify-content: center; }
}


/* === BUILD 0.6.42 — COMPACT TRAILER & LOAD HEADER CONTROLS === */
.trailer-load-main-grid {
  grid-template-columns: 180px minmax(460px, 1fr) 180px;
  align-items: start;
  column-gap: 14px;
}
.trailer-load-main-grid > .form-group {
  align-self: start;
  min-width: 0;
}
.trailer-load-main-grid .exact-trailer-picker-group {
  grid-column: auto;
}
.compact-trailer-control {
  display: grid;
  grid-template-rows: auto 44px;
  gap: 7px;
  align-content: start;
}
.compact-trailer-control select {
  height: 44px;
  min-height: 44px;
  padding: 8px 12px;
}
#reeferFuelGroup {
  grid-column: 1 / span 1;
  max-width: 180px;
  align-self: start;
}

@media (max-width: 1100px) {
  .trailer-load-main-grid {
    grid-template-columns: 160px minmax(360px, 1fr) 160px;
  }
}
@media (max-width: 900px) {
  .trailer-load-main-grid {
    grid-template-columns: 1fr 1fr;
  }
  .trailer-load-main-grid .exact-trailer-picker-group {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .operation-mode-compact { grid-column: 1; grid-row: 1; }
  .load-status-compact { grid-column: 2; grid-row: 1; }
  #reeferFuelGroup { grid-column: 1; max-width: none; }
}
@media (max-width: 560px) {
  .trailer-load-main-grid {
    grid-template-columns: 1fr;
  }
  .operation-mode-compact,
  .load-status-compact,
  .trailer-load-main-grid .exact-trailer-picker-group,
  #reeferFuelGroup {
    grid-column: 1;
    grid-row: auto;
    max-width: none;
  }
}


/* === BUILD 0.6.43 — PLACEMENT QUICK ACTIONS === */
.placement-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}
.placement-quick-actions button {
  min-width: 104px;
  min-height: 42px;
  border-radius: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  cursor: pointer;
}
.placement-quick-yard {
  border: 1px solid rgba(69,211,126,.55);
  background: rgba(31,143,79,.17);
  color: #62e599;
}
.placement-quick-door {
  border: 1px solid rgba(58,166,255,.58);
  background: rgba(31,116,190,.18);
  color: #68c2ff;
}
.placement-quick-yard:hover,
.placement-quick-door:hover,
.placement-quick-yard:focus-visible,
.placement-quick-door:focus-visible {
  filter: brightness(1.18);
  transform: translateY(-1px);
}
.placement-dialog-content .placement-question {
  font-size: 1.08rem;
  font-weight: 700;
  color: #e8eef5;
}
@media (max-width: 560px) {
  .placement-quick-actions button { flex: 1 1 120px; }
}


/* === BUILD 0.6.44 — WEEKLY HOURS & PAY HISTORY === */
.weekly-summary-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-bottom:18px; }
.weekly-pay-history-list { display:grid; gap:14px; }
.weekly-pay-record { border:1px solid var(--line); border-radius:16px; background:rgba(255,255,255,.025); padding:16px; }
.weekly-pay-record-heading { display:flex; justify-content:space-between; align-items:center; gap:14px; margin-bottom:14px; }
.weekly-pay-record-heading span, .weekly-pay-record-grid span { display:block; color:var(--muted); font-size:.74rem; letter-spacing:.09em; margin-bottom:4px; }
.weekly-pay-record-heading strong { font-size:1.05rem; }
.weekly-pay-record-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:10px; }
.weekly-pay-record-grid > div { min-width:0; padding:11px; border-radius:12px; border:1px solid rgba(255,255,255,.07); background:rgba(255,255,255,.025); }
.weekly-pay-record-grid strong { word-break:break-word; }
.weekly-pay-notes { margin:12px 0 0; color:var(--muted); line-height:1.5; }
.weekly-retention-warning { border-color:#d88c2f; box-shadow:0 0 0 1px rgba(216,140,47,.12); }
@media(max-width:1100px){ .weekly-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr));} .weekly-pay-record-grid{grid-template-columns:repeat(4,minmax(0,1fr));} }
@media(max-width:650px){ .weekly-summary-grid{grid-template-columns:1fr;} .weekly-pay-record-grid{grid-template-columns:repeat(2,minmax(0,1fr));} .weekly-pay-record-heading{align-items:flex-start;} }


/* === BUILD 0.6.48 — COMPACT SHIFT & INSPECTION VISIBILITY === */
.combined-equipment-card {
  display: grid;
  align-content: center;
  gap: 4px;
}

.combined-equipment-card .combined-equipment-divider {
  display: block;
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .67rem;
  font-weight: 900;
  letter-spacing: .06em;
}

.combined-equipment-card .combined-odometer-value {
  margin: 1px 0 0;
  font-size: 1.05rem;
}

.inspection-type-picker:has(.equipment-choice:not(.hidden):only-child) {
  grid-template-columns: 1fr;
}

#shiftInformationPanel.hidden {
  display: none !important;
}

#startContinueDayButton.hidden {
  display: none !important;
}


/* === BUILD 0.6.49 — ARRIVAL OPERATION === */
.arrival-operation-dialog {
  width: min(760px, 94vw);
}

.arrival-operation-content {
  display: grid;
  gap: 18px;
}

.arrival-operation-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 14px;
}

.arrival-operation-choice {
  min-height: 150px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #111115;
  color: var(--white);
  display: grid;
  gap: 8px;
  text-align: left;
}

.arrival-operation-choice:hover,
.arrival-operation-choice:focus-visible {
  border-color: var(--copper);
  transform: translateY(-1px);
}

.arrival-operation-choice span {
  color: var(--muted);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .1em;
}

.arrival-operation-choice strong {
  font-size: 1.35rem;
}

.arrival-operation-choice small {
  color: var(--muted);
  line-height: 1.45;
}

.arrival-operation-choice.live-choice {
  box-shadow: inset 5px 0 0 var(--green);
}

.arrival-operation-choice.drop-choice {
  box-shadow: inset 5px 0 0 var(--copper);
}

@media (max-width: 640px) {
  .arrival-operation-grid {
    grid-template-columns: 1fr;
  }

  .arrival-operation-choice {
    min-height: 125px;
  }
}


/* === BUILD 0.6.51 — WEEKLY DAILY BREAKDOWN === */
.weekly-day-breakdown {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 8px;
}

.weekly-day-breakdown-title {
  color: var(--copper);
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .1em;
}

.weekly-day-row {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) auto minmax(190px, auto);
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  background: rgba(0,0,0,.16);
}

.weekly-day-row > div {
  display: grid;
  gap: 3px;
}

.weekly-day-row span {
  color: var(--white);
  font-weight: 900;
}

.weekly-day-row strong {
  font-size: 1.05rem;
}

.weekly-day-row small,
.weekly-day-breakdown-empty {
  color: var(--muted);
}

.weekly-day-breakdown-empty {
  margin-top: 14px;
  padding: 12px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  text-align: center;
}

@media (max-width: 700px) {
  .weekly-day-row {
    grid-template-columns: 1fr auto;
  }

  .weekly-day-row > small {
    grid-column: 1 / -1;
  }
}


/* === BUILD 0.6.52 — MONTHLY WEEKLY-PAY NAVIGATION === */

.weekly-month-navigation {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

.weekly-month-tabs {
  display: flex;
  gap: 9px;
  overflow-x: auto;
  padding: 2px 2px 10px;
  scrollbar-width: thin;
  scroll-snap-type: x proximity;
}

.weekly-month-tab {
  flex: 0 0 auto;
  min-width: 108px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #111115;
  color: var(--muted);
  display: grid;
  gap: 4px;
  text-align: center;
  scroll-snap-align: center;
}

.weekly-month-tab:first-child {
  min-width: 142px;
}

.weekly-month-tab span {
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .04em;
}

.weekly-month-tab small {
  font-size: .68rem;
  font-weight: 800;
  color: var(--muted);
}

.weekly-month-tab:hover,
.weekly-month-tab:focus-visible {
  border-color: var(--copper);
  color: var(--white);
}

.weekly-month-tab.active {
  border-color: var(--copper);
  background: rgba(184, 115, 51, .16);
  color: var(--white);
  box-shadow: inset 0 -3px 0 var(--copper);
}

.weekly-month-tab.active small {
  color: var(--yellow);
}

.weekly-month-summary {
  display: grid;
  grid-template-columns: minmax(170px, 1.35fr) repeat(4, minmax(120px, 1fr));
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(0, 0, 0, .17);
}

.weekly-month-summary > div {
  min-width: 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: #111115;
}

.weekly-month-summary span {
  display: block;
  color: var(--muted);
  font-size: .66rem;
  font-weight: 900;
  letter-spacing: .07em;
}

.weekly-month-summary strong {
  display: block;
  margin-top: 7px;
  font-size: 1.03rem;
  overflow-wrap: anywhere;
}

.weekly-month-summary > div:first-child {
  border-left: 4px solid var(--copper);
}

@media (max-width: 1000px) {
  .weekly-month-summary {
    grid-template-columns: repeat(2, 1fr);
  }

  .weekly-month-summary > div:first-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  .weekly-month-summary {
    grid-template-columns: 1fr 1fr;
    padding: 10px;
  }

  .weekly-month-summary > div {
    padding: 9px;
  }

  .weekly-month-tab {
    min-width: 96px;
  }

  .weekly-month-tab:first-child {
    min-width: 130px;
  }
}


/* === BUILD 0.6.53 — UPDATE NOTICE === */
.app-update-dialog {
  width: min(560px, 94vw);
}

.app-update-content {
  display: grid;
  gap: 14px;
}

.app-update-badge {
  width: fit-content;
  padding: 7px 10px;
  border: 1px solid rgba(184,115,51,.7);
  border-radius: 999px;
  color: var(--copper);
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .1em;
}

.app-update-content h3 {
  margin: 0;
  font-size: 1.55rem;
}

.app-update-content > p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.app-update-notes {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #111115;
}

.app-update-note {
  color: var(--white);
  line-height: 1.45;
}

.app-update-protection {
  padding: 11px 12px;
  border-left: 4px solid var(--green);
  border-radius: 8px;
  background: rgba(45,168,102,.1);
}

.app-update-actions {
  justify-content: flex-end;
}