/* ================================================================
   HUBTEX TripLog — Mobile Cockpit-Ansicht  (Phase 2.3)
   Dunkles Fleet-Control-Design für Smartphone und Tablet.
   Wird zusätzlich zu style.css eingebunden.
   ================================================================ */

/* ── Dark Cockpit Root (scoped to .mobile-shell) ─────────────── */
body.mobile-page { background: #0a0d10; margin: 0; padding: 0; }

.mobile-shell {
  --mb-bg:      #0E1216;
  --mb-s1:      #14181D;
  --mb-s2:      #1A1F26;
  --mb-s3:      #222930;
  --mb-line:    #2A3037;
  --mb-line2:   #1E2329;
  --mb-t1:      #E8ECF0;
  --mb-t2:      #B0BAC4;
  --mb-t3:      #7A8490;
  --mb-t4:      #4E5860;
  --mb-accent:  #FF661B;
  --mb-accentH: #E5550D;
  --mb-ok:      #16A34A;
  --mb-warn:    #F59E0B;
  --mb-crit:    #DC2626;
  min-height: 100vh;
  background: var(--mb-bg);
  color: var(--mb-t1);
  font-family: var(--f-sans);
  display: flex;
  flex-direction: column;
  max-width: 540px;
  margin: 0 auto;
  position: relative;
}

@media (min-width: 541px) {
  .mobile-shell {
    border-left: 1px solid rgba(255,255,255,.05);
    border-right: 1px solid rgba(255,255,255,.05);
    box-shadow: 0 0 80px rgba(0,0,0,.5);
  }
}

/* ── Header ─────────────────────────────────────────────────── */
.mobile-header {
  background: var(--mb-s1);
  border-bottom: 1px solid var(--mb-line);
  padding: 0 14px;
  height: 56px;
  display: flex;
  align-items: center;
  gap: 10px;
  position: sticky;
  top: 0;
  z-index: 50;
  flex-shrink: 0;
}

.mobile-header-logo {
  width: 34px; height: 34px;
  background: var(--mb-accent);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 11px; color: #fff;
  letter-spacing: .04em; flex-shrink: 0;
  font-family: var(--f-mono);
}

.mobile-header-title { flex: 1; min-width: 0; }
.mobile-header-title strong {
  display: block; font-size: 13px; font-weight: 700;
  color: var(--mb-t1); line-height: 1.2;
}
.mobile-header-title span {
  font-size: 10px; color: var(--mb-t4);
  font-family: var(--f-mono); letter-spacing: .06em;
  text-transform: uppercase;
}

.mobile-header-status {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; color: #4ade80; font-weight: 600;
  flex-shrink: 0;
}
.mobile-header-status::before {
  content: ''; width: 6px; height: 6px;
  background: #4ade80; border-radius: 50%; flex-shrink: 0;
  animation: pulse-dot 2.5s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%,100% { opacity: 1; } 50% { opacity: .4; }
}

.mobile-header-back {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: var(--mb-s2); border: 1px solid var(--mb-line);
  border-radius: 8px; color: var(--mb-t2);
  text-decoration: none; flex-shrink: 0;
  transition: background .15s;
}
.mobile-header-back:hover { background: var(--mb-s3); color: var(--mb-t1); }

/* ── Stepper ──────────────────────────────────────────────────── */
.mobile-stepper {
  display: flex; align-items: center;
  padding: 10px 16px; gap: 0;
  background: var(--mb-s1); border-bottom: 1px solid var(--mb-line);
  flex-shrink: 0;
}

.mobile-step-node { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

.mobile-step-dot {
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; flex-shrink: 0;
  transition: all .2s; font-family: var(--f-mono);
}
.mobile-step-dot.pending  { background: var(--mb-s3); color: var(--mb-t4); }
.mobile-step-dot.active   { background: var(--mb-accent); color: #fff; box-shadow: 0 0 0 4px rgba(255,102,27,.2); }
.mobile-step-dot.done     { background: var(--mb-ok); color: #fff; }

.mobile-step-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--mb-t4); white-space: nowrap;
  transition: color .2s;
}
.mobile-step-label.active { color: var(--mb-accent); }
.mobile-step-label.done   { color: #4ade80; }

.mobile-step-connector {
  flex: 1; height: 2px; background: var(--mb-line); margin: 0 6px;
  min-width: 8px; transition: background .3s; border-radius: 1px;
}
.mobile-step-connector.done { background: var(--mb-ok); }

/* ── Step Panels ────────────────────────────────────────────── */
.mobile-step { display: none; flex-direction: column; flex: 1; padding-bottom: 88px; }
.mobile-step.active { display: flex; }

.mobile-section { padding: 14px 16px; }
.mobile-section + .mobile-section { padding-top: 0; }

.mobile-section-hd {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .09em; color: var(--mb-t4);
  margin-bottom: 10px; display: flex; align-items: center; gap: 6px;
}

/* ── Vehicle Card ──────────────────────────────────────────── */
.mobile-vehicle-card {
  margin: 14px 16px;
  background: linear-gradient(135deg, #12161C 0%, #1A2130 100%);
  border: 1px solid rgba(255,102,27,.18);
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
}

.mobile-vehicle-card-top {
  padding: 16px 16px 12px;
  display: flex; align-items: flex-start; gap: 12px;
}

.mobile-vehicle-plate {
  background: #fff; color: #0F1318;
  font-family: var(--f-mono); font-weight: 800;
  font-size: 18px; letter-spacing: .07em;
  padding: 6px 12px; border-radius: 6px;
  border: 2px solid #d4d8de; line-height: 1.2;
  flex-shrink: 0; white-space: nowrap;
}

.mobile-vehicle-info { flex: 1; min-width: 0; }
.mobile-vehicle-name {
  font-size: 14px; font-weight: 700; color: #E8ECF0;
  line-height: 1.3; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}
.mobile-vehicle-sub { font-size: 11px; color: #6A7480; margin-top: 2px; line-height: 1.4; }

.mobile-vehicle-card-stats {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  border-top: 1px solid rgba(255,255,255,.07);
}
.mobile-vehicle-stat {
  padding: 10px 12px;
  border-right: 1px solid rgba(255,255,255,.05);
}
.mobile-vehicle-stat:last-child { border-right: none; }
.mobile-vehicle-stat-val {
  font-family: var(--f-mono); font-size: 12px; font-weight: 700;
  color: #C8D0DA; line-height: 1.2;
}
.mobile-vehicle-stat-lbl {
  font-size: 9px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .07em; color: #404850; margin-top: 2px;
}

.mobile-fz-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; padding: 3px 8px; border-radius: 4px;
}
.mobile-fz-badge.aktiv    { background: rgba(22,163,74,.2);   color: #4ade80; border: 1px solid rgba(22,163,74,.3); }
.mobile-fz-badge.wartung  { background: rgba(245,158,11,.15); color: #fbbf24; border: 1px solid rgba(245,158,11,.25); }
.mobile-fz-badge.gesperrt { background: rgba(220,38,38,.2);   color: #f87171; border: 1px solid rgba(220,38,38,.3); }
.mobile-fz-badge.inaktiv  { background: rgba(107,116,128,.2); color: #9ca3af; border: 1px solid rgba(107,116,128,.2); }

/* ── Warnings ─────────────────────────────────────────────── */
.mobile-warning {
  margin: 0 16px 12px; padding: 12px 14px; border-radius: 10px;
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 13px; line-height: 1.5;
}
.mobile-warning svg { flex-shrink: 0; margin-top: 1px; }
.mobile-warning.warn-red {
  background: rgba(220,38,38,.12); border: 1px solid rgba(220,38,38,.35); color: #fca5a5;
}
.mobile-warning.warn-red strong { color: #f87171; }
.mobile-warning.warn-yellow {
  background: rgba(245,158,11,.10); border: 1px solid rgba(245,158,11,.28); color: #fde68a;
}
.mobile-warning.warn-yellow strong { color: #fbbf24; }

/* ── KM Hint ──────────────────────────────────────────────── */
.mobile-km-hint {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: #4ade80; margin-top: 6px;
  padding: 6px 10px;
  background: rgba(22,163,74,.08); border: 1px solid rgba(22,163,74,.15);
  border-radius: 7px;
}

/* ── Form Fields ────────────────────────────────────────────── */
.mobile-field { margin-bottom: 14px; }
.mobile-label {
  display: block; font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--mb-t3); margin-bottom: 7px;
}
.mobile-label .req { color: var(--mb-accent); margin-left: 2px; }

.mobile-input,
.mobile-select,
.mobile-textarea {
  width: 100%; padding: 13px 14px;
  background: var(--mb-s2); border: 1px solid var(--mb-line);
  border-radius: 10px; color: var(--mb-t1);
  font-size: 16px; /* prevents iOS zoom-on-focus */
  font-family: var(--f-sans); line-height: 1.4;
  transition: border-color .15s, background .15s;
  -webkit-appearance: none; appearance: none;
}
.mobile-input:focus,
.mobile-select:focus,
.mobile-textarea:focus {
  outline: none; border-color: var(--mb-accent); background: var(--mb-s3);
}
.mobile-input.is-error,
.mobile-select.is-error { border-color: var(--mb-crit); }
.mobile-input.mono {
  font-family: var(--f-mono); font-weight: 700;
  font-size: 20px; letter-spacing: .04em;
}

.mobile-input-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.mobile-input-row-3 {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px;
}

.mobile-field-err {
  font-size: 11.5px; color: #f87171; margin-top: 5px;
  display: flex; align-items: center; gap: 4px;
}

.mobile-km-row {
  display: grid; grid-template-columns: 1fr 22px 1fr; align-items: end; gap: 6px;
}
.mobile-km-sep {
  text-align: center; color: var(--mb-t4); font-size: 18px; padding-bottom: 12px;
}
.mobile-km-diff {
  margin-top: 8px; padding: 10px 14px;
  background: var(--mb-s2); border: 1px solid var(--mb-line); border-radius: 10px;
  font-family: var(--f-mono); font-size: 13px; color: var(--mb-t3);
  text-align: center;
}
.mobile-km-diff strong { color: var(--mb-accent); font-size: 18px; }

/* Fahrttyp toggle */
.mobile-fahrttyp { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mobile-fahrttyp input[type="radio"] { display: none; }
.mobile-fahrttyp label {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px; background: var(--mb-s2); border: 1px solid var(--mb-line);
  border-radius: 10px; cursor: pointer; font-size: 14px; font-weight: 600;
  color: var(--mb-t2); transition: all .15s; text-align: center;
  -webkit-tap-highlight-color: transparent;
}
.mobile-fahrttyp input[type="radio"]:checked + label {
  background: rgba(255,102,27,.12); border-color: var(--mb-accent); color: var(--mb-accent);
}

/* ── Sicherheitscheck ────────────────────────────────────── */
.mobile-check-hd {
  padding: 12px 16px 8px; display: flex; align-items: center; gap: 10px;
}
.mobile-check-vorlage-name { font-size: 12px; font-weight: 600; color: var(--mb-t2); }

.mobile-check-status-bar {
  display: flex; gap: 8px; padding: 0 16px 12px; flex-wrap: wrap;
}
.mobile-check-pill {
  display: flex; align-items: center; gap: 4px;
  font-size: 10.5px; font-weight: 700; padding: 3px 10px; border-radius: 20px;
}
.mobile-check-pill.ok      { background: rgba(22,163,74,.15);  color: #4ade80; }
.mobile-check-pill.hinweis { background: rgba(245,158,11,.12); color: #fbbf24; }
.mobile-check-pill.mangel  { background: rgba(220,38,38,.15);  color: #f87171; }
.mobile-check-pill.ng      { background: var(--mb-s3);         color: var(--mb-t4); }

.mobile-check-item {
  background: var(--mb-s1); border: 1px solid var(--mb-line);
  border-radius: 12px; padding: 14px; margin: 0 16px 10px;
  transition: border-color .2s;
}
.mobile-check-item.s-ok      { border-color: rgba(22,163,74,.4); }
.mobile-check-item.s-hinweis { border-color: rgba(245,158,11,.4); }
.mobile-check-item.s-mangel  { border-color: rgba(220,38,38,.45); }

.mobile-check-item-title {
  font-size: 14px; font-weight: 600; color: var(--mb-t1);
  margin-bottom: 3px; line-height: 1.4;
}
.mobile-check-item-desc { font-size: 12px; color: var(--mb-t3); margin-bottom: 10px; }

.mobile-check-btns { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; }

.mobile-check-btn {
  padding: 10px 3px 8px; border-radius: 8px;
  border: 1px solid var(--mb-line); font-size: 9.5px; font-weight: 700;
  text-align: center; cursor: pointer;
  background: var(--mb-s2); color: var(--mb-t4);
  transition: all .12s; line-height: 1.3;
  letter-spacing: .03em; text-transform: uppercase;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none; user-select: none;
}
.mobile-check-btn:active { transform: scale(.96); }

.mobile-check-btn-icon { font-size: 17px; display: block; margin-bottom: 2px; }

.mobile-check-btn.sel-ok       { background: rgba(22,163,74,.2);  color: #4ade80; border-color: rgba(22,163,74,.45); }
.mobile-check-btn.sel-hinweis  { background: rgba(245,158,11,.15);color: #fbbf24; border-color: rgba(245,158,11,.4); }
.mobile-check-btn.sel-mangel   { background: rgba(220,38,38,.2);  color: #f87171; border-color: rgba(220,38,38,.45); }
.mobile-check-btn.sel-nicht_geprueft { background: var(--mb-s3); color: var(--mb-t4); border-color: var(--mb-line); }

.mobile-check-bem-wrap { margin-top: 10px; }
.mobile-check-bem-toggle {
  font-size: 11px; color: var(--mb-t4); cursor: pointer;
  background: none; border: none; padding: 2px 0;
  text-decoration: underline; text-underline-offset: 2px;
}
.mobile-check-bem-input {
  width: 100%; margin-top: 6px; padding: 8px 10px;
  background: var(--mb-s2); border: 1px solid var(--mb-line);
  border-radius: 7px; font-size: 14px; color: var(--mb-t1);
  font-family: var(--f-sans); resize: vertical; min-height: 52px;
}
.mobile-check-bem-input:focus { outline: none; border-color: var(--mb-accent); }

.mobile-check-global-bem { padding: 0 16px 14px; }

/* ── Summary Card ─────────────────────────────────────────── */
.mobile-summary-strecke {
  text-align: center; padding: 18px 16px; margin: 0 16px 12px;
  background: linear-gradient(135deg, rgba(255,102,27,.1) 0%, rgba(255,102,27,.03) 100%);
  border: 1px solid rgba(255,102,27,.22); border-radius: 12px;
}
.mobile-summary-strecke-val {
  font-family: var(--f-mono); font-size: 40px; font-weight: 800;
  color: var(--mb-accent); line-height: 1;
}
.mobile-summary-strecke-lbl {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .09em; color: var(--mb-t4); margin-top: 4px;
}

.mobile-summary-card {
  margin: 0 16px 12px;
  background: var(--mb-s1); border: 1px solid var(--mb-line);
  border-radius: 12px; overflow: hidden;
}
.mobile-summary-card-hd {
  padding: 9px 14px; font-size: 9.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; color: var(--mb-t4);
  border-bottom: 1px solid var(--mb-line); background: var(--mb-s2);
}
.mobile-summary-row {
  display: flex; gap: 10px; padding: 10px 14px;
  border-bottom: 1px solid var(--mb-line2); font-size: 13px;
}
.mobile-summary-row:last-child { border-bottom: none; }
.mobile-summary-label { color: var(--mb-t3); flex-shrink: 0; width: 82px; font-size: 12px; }
.mobile-summary-value { color: var(--mb-t1); font-weight: 500; flex: 1; min-width: 0; word-break: break-word; }

.mobile-summary-check {
  margin: 0 16px 12px; padding: 11px 14px;
  border-radius: 10px; display: flex; align-items: center;
  gap: 10px; font-size: 13px; font-weight: 600;
}
.mobile-summary-check.ok       { background: rgba(22,163,74,.1);  border: 1px solid rgba(22,163,74,.25);  color: #4ade80; }
.mobile-summary-check.hinweis  { background: rgba(245,158,11,.1); border: 1px solid rgba(245,158,11,.25); color: #fbbf24; }
.mobile-summary-check.kritisch { background: rgba(220,38,38,.1);  border: 1px solid rgba(220,38,38,.25);  color: #f87171; }
.mobile-summary-check.none     { background: var(--mb-s2);        border: 1px solid var(--mb-line);       color: var(--mb-t4); }

/* ── Action Bar ──────────────────────────────────────────── */
.mobile-action-bar {
  position: fixed; bottom: 0;
  left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 540px;
  background: var(--mb-s1); border-top: 1px solid var(--mb-line);
  padding: 12px 16px; display: flex; gap: 10px; z-index: 40;
}
@supports (padding: env(safe-area-inset-bottom)) {
  .mobile-action-bar { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  .mobile-step       { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
}

.mobile-btn {
  padding: 15px 20px; border-radius: 12px; font-weight: 700;
  font-size: 15px; cursor: pointer; border: none; transition: all .15s;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  text-decoration: none; font-family: var(--f-sans);
  -webkit-tap-highlight-color: transparent;
}
.mobile-btn:active { transform: scale(.97); }

.mobile-btn-primary {
  flex: 1; background: var(--mb-accent); color: #fff;
}
.mobile-btn-primary:hover,
.mobile-btn-primary:active { background: var(--mb-accentH); }

.mobile-btn-secondary {
  background: var(--mb-s2); color: var(--mb-t2);
  border: 1px solid var(--mb-line); padding: 15px 18px;
}
.mobile-btn-secondary:hover { background: var(--mb-s3); }

.mobile-btn-save {
  flex: 1; background: var(--mb-ok); color: #fff;
}
.mobile-btn-save:hover { background: #15803d; }

.mobile-btn-gesperrt {
  flex: 1;
  background: rgba(220,38,38,.18) !important;
  border: 1px solid rgba(220,38,38,.4) !important;
  color: #f87171 !important;
}

/* ── Success Card ─────────────────────────────────────────── */
.mobile-success-card {
  margin: 20px 16px;
  padding: 32px 20px 28px;
  background: linear-gradient(135deg, rgba(22,163,74,.12) 0%, rgba(22,163,74,.03) 100%);
  border: 1px solid rgba(22,163,74,.28); border-radius: 16px; text-align: center;
}
.mobile-success-icon {
  width: 64px; height: 64px;
  background: rgba(22,163,74,.2); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px; font-size: 28px;
}
.mobile-success-title { font-size: 22px; font-weight: 800; color: #4ade80; margin-bottom: 8px; }
.mobile-success-sub { font-size: 13px; color: var(--mb-t3); margin-bottom: 20px; line-height: 1.6; }
.mobile-success-km { font-family: var(--f-mono); font-size: 32px; font-weight: 800; color: var(--mb-accent); margin: 4px 0 2px; }
.mobile-success-kmlbl { font-size: 10px; text-transform: uppercase; letter-spacing: .09em; color: var(--mb-t4); margin-bottom: 24px; }
.mobile-success-actions { display: flex; flex-direction: column; gap: 10px; }

/* ── Vehicle Picker (selection mode) ────────────────────── */
.mobile-picker-search { padding: 12px 16px; background: var(--mb-bg); }
.mobile-picker-section {
  font-size: 9.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .09em; color: var(--mb-t4); padding: 10px 16px 5px;
}

.mobile-vehicle-list {
  background: var(--mb-s1);
  border-top: 1px solid var(--mb-line);
  border-bottom: 1px solid var(--mb-line);
}

.mobile-vehicle-item {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 16px; border-bottom: 1px solid var(--mb-line2);
  text-decoration: none; color: var(--mb-t1);
  transition: background .1s; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mobile-vehicle-item:last-child { border-bottom: none; }
.mobile-vehicle-item:active { background: var(--mb-s2); }

.mobile-vehicle-item-plate {
  background: #fff; color: #0F1318;
  font-family: var(--f-mono); font-weight: 800;
  font-size: 12.5px; letter-spacing: .05em;
  padding: 4px 10px; border-radius: 5px;
  border: 2px solid #d4d8de; flex-shrink: 0;
  min-width: 86px; text-align: center;
}
.mobile-vehicle-item.gesperrt .mobile-vehicle-item-plate {
  border-color: rgba(220,38,38,.5); box-shadow: 0 0 0 1px rgba(220,38,38,.2);
}
.mobile-vehicle-item.wartung .mobile-vehicle-item-plate {
  border-color: rgba(245,158,11,.45);
}

.mobile-vehicle-item-info { flex: 1; min-width: 0; }
.mobile-vehicle-item-name {
  font-size: 14px; font-weight: 600; color: var(--mb-t1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mobile-vehicle-item-sub { font-size: 11px; color: var(--mb-t3); margin-top: 1px; }
.mobile-vehicle-item-arrow { color: var(--mb-t4); flex-shrink: 0; }

.mobile-manual-section {
  font-size: 9.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .09em; color: var(--mb-t4); padding: 12px 16px 5px;
}
.mobile-manual-form { margin: 0 16px 16px; }

/* ── Misc ─────────────────────────────────────────────────── */
.mobile-dup-warn {
  margin: 12px 16px;
  padding: 12px 14px;
  background: rgba(245,158,11,.1); border: 1px solid rgba(245,158,11,.3);
  border-radius: 10px; font-size: 13px; color: #fde68a; line-height: 1.5;
}
.mobile-error-box {
  margin: 12px 16px;
  padding: 12px 14px;
  background: rgba(220,38,38,.1); border: 1px solid rgba(220,38,38,.3);
  border-radius: 10px; font-size: 13px; color: #fca5a5;
}
.mobile-nocheck {
  margin: 16px; padding: 28px 20px; text-align: center;
  background: var(--mb-s1); border: 1px solid var(--mb-line);
  border-radius: 12px; color: var(--mb-t3); font-size: 13px; line-height: 1.6;
}
.mobile-divider { height: 1px; background: var(--mb-line); margin: 2px 0; }

/* hidden utility */
.m-hidden { display: none !important; }