/* cleanom 1.6 – mobile Auftragsakte, Kundenportal und UI-Korrekturen */
.toolbar {
  flex-wrap: wrap;
}

.toolbar .search {
  flex: 1 1 260px;
  min-width: 220px;
  max-width: 440px;
  margin: 0;
}

.toolbar .search input {
  min-width: 0;
  height: 36px;
  padding: 0;
  border: 0;
  background: transparent;
}

.toolbar .filter-tabs {
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: thin;
}

.toolbar .filter-tabs button {
  flex: 0 0 auto;
  min-height: 32px;
}

.intro-discount {
  color: #12633f !important;
  background: #eaf8f0 !important;
  border-color: #9bd5b5 !important;
}

.intro-discount small,
.intro-discount svg {
  color: #34795a !important;
}

.job-detail-head {
  position: relative;
  margin-bottom: 14px;
  padding: 18px 20px 0;
  border: 1px solid var(--app-line);
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}

.job-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 13px;
  padding: 0;
  border: 0;
  color: #5d6b79;
  background: transparent;
  font-size: 11px;
}

.job-back svg { width: 14px; }

.job-detail-title {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.job-detail-title > div { flex: 1; min-width: 0; }
.job-detail-title h2 { margin: 0; color: #1f2b37; font-size: 24px; font-weight: 650; }
.job-detail-title p { margin: 5px 0 0; color: #6f7a86; font-size: 12px; }

.job-head-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 17px;
}

.job-progress {
  display: grid;
  grid-template-columns: repeat(6, minmax(95px, 1fr));
  gap: 0;
  margin: 20px -20px 0;
  padding: 12px 20px;
  border-top: 1px solid #e7ebef;
  background: #fafbfc;
  overflow-x: auto;
}

.job-progress span {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 95px;
  color: #8a949e;
  font-size: 9px;
  white-space: nowrap;
}

.job-progress i {
  display: grid;
  place-items: center;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border: 1px solid #d5dce3;
  border-radius: 50%;
  background: #fff;
  font-style: normal;
}

.job-progress i svg { width: 12px; }
.job-progress span.done { color: #176647; font-weight: 600; }
.job-progress span.done i { color: #fff; border-color: #18835c; background: #18835c; }

.job-detail-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 14px;
  padding: 5px;
  border: 1px solid var(--app-line);
  border-radius: 8px;
  background: #fff;
  overflow-x: auto;
}

.job-detail-tabs button {
  flex: 0 0 auto;
  min-height: 35px;
  padding: 0 12px;
  border: 0;
  border-radius: 6px;
  color: #687482;
  background: transparent;
  font-size: 11px;
  white-space: nowrap;
}

.job-detail-tabs button.active { color: #215aa9; background: #edf3fb; font-weight: 650; }

.job-overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr);
  gap: 14px;
}

.job-section { padding: 20px; }
.job-section > h3,
.job-section-head h3 { margin: 0; color: #273441; font-size: 15px; font-weight: 650; }
.job-section > p,
.job-section-head p { margin: 4px 0 0; color: #74808c; font-size: 10.5px; line-height: 1.55; }

.job-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 17px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e8ecf0;
}

.job-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.job-facts > div,
.job-summary-card > div {
  display: grid;
  gap: 4px;
  padding: 12px;
  border-radius: 7px;
  background: #f7f9fb;
}

.job-facts span,
.job-summary-card span { color: #7b8692; font-size: 9px; }
.job-facts strong,
.job-summary-card strong { color: #293744; font-size: 11.5px; }
.job-route { margin-top: 14px; }

.job-customer { display: grid; gap: 5px; margin-top: 16px; }
.job-customer strong { margin-top: 6px; font-size: 13px; }
.job-customer span { color: #687482; font-size: 11px; }
.job-contact-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.job-summary-card { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.job-summary-card h3 { grid-column: 1 / -1; }
.job-summary-card > div strong { font-size: 15px; }
.job-note-card p { margin-top: 13px; }
.job-note-card small { display: block; margin-top: 14px; padding-top: 12px; border-top: 1px solid #e8ecf0; color: #6a7580; }

.job-item-list { display: grid; }
.job-item-list > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  min-height: 58px;
  border-bottom: 1px solid #e9edf1;
}
.job-item-list span { display: grid; gap: 3px; }
.job-item-list small { color: #7d8792; font-size: 9px; }
.job-total { color: #1e5a9f; font-size: 20px; }
.job-add-item {
  display: grid;
  grid-template-columns: minmax(180px, 2fr) 90px 120px 90px auto;
  align-items: end;
  gap: 10px;
  margin-top: 18px;
  padding: 15px;
  border: 1px solid #dce3ea;
  border-radius: 8px;
  background: #f8fafc;
}

.job-photo-sections { display: grid; gap: 14px; }
.job-photo-grid { display: grid; grid-template-columns: repeat(4, minmax(110px, 1fr)); gap: 10px; }
.job-photo-slot {
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  aspect-ratio: 4 / 3;
  min-height: 118px;
  border: 1px dashed #b9c4cf;
  border-radius: 8px;
  color: #647382;
  background: #f8fafb;
  text-align: center;
  overflow: hidden;
  cursor: pointer;
}
.job-photo-slot > svg { width: 22px; margin-bottom: 7px; }
.job-photo-slot strong { z-index: 2; font-size: 10.5px; }
.job-photo-slot span { z-index: 2; margin-top: 3px; font-size: 8.5px; }
.job-photo-slot input,
.damage-section input { display: none; }
.job-photo-slot.filled { justify-items: start; align-items: end; padding: 9px; color: #fff; border-style: solid; }
.job-photo-slot.filled:after { content: ""; position: absolute; inset: 35% 0 0; background: linear-gradient(transparent, #0b1526d9); }
.job-photo-slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.damage-section { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.damage-section > div:first-child { flex: 1 1 300px; }
.damage-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); flex: 1 0 100%; gap: 9px; }
.damage-gallery img { width: 100%; aspect-ratio: 1; border-radius: 7px; object-fit: cover; }

.job-checklist { display: grid; gap: 8px; }
.job-checklist button {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  padding: 10px 12px;
  border: 1px solid #dce3e9;
  border-radius: 7px;
  color: #384654;
  background: #fff;
  text-align: left;
}
.job-checklist button i { display: grid; place-items: center; flex: 0 0 25px; width: 25px; height: 25px; border: 1px solid #ccd5de; border-radius: 6px; color: transparent; }
.job-checklist button i svg { width: 14px; }
.job-checklist button span { display: grid; gap: 3px; }
.job-checklist button small { color: #818b96; font-size: 9px; }
.job-checklist button.done { color: #176647; border-color: #b8dec9; background: #f1faf5; }
.job-checklist button.done i { color: #fff; border-color: #16835b; background: #16835b; }

.acceptance-section { max-width: 980px; margin: 0 auto; }
.signature-pad-wrap { margin: 14px 0; border: 1px solid #bdc8d3; border-radius: 8px; background: #fff; overflow: hidden; }
.signature-pad-wrap canvas { display: block; width: 100%; height: 220px; background: linear-gradient(#fff 91%, #cfd8e1 91%, #cfd8e1 92%, #fff 92%); touch-action: none; cursor: crosshair; }
.signature-pad-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 12px; border-top: 1px solid #e1e6eb; color: #7a8590; background: #fafbfc; font-size: 9px; }
.signature-pad-foot button { border: 0; color: #245da8; background: transparent; font-size: 10px; }
.saved-signature { display: grid; justify-items: start; gap: 6px; padding: 16px; border: 1px solid #b9dfca; border-radius: 8px; background: #f2faf6; }
.saved-signature img { width: min(360px, 100%); height: 120px; object-fit: contain; object-position: left center; mix-blend-mode: multiply; }
.saved-signature span { color: #637267; font-size: 10px; }
.complete-callout { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 18px; padding: 17px; border-radius: 8px; color: #fff; background: #17395f; }
.complete-callout p { max-width: 620px; margin: 4px 0 0; color: #d7e3ef; font-size: 10px; line-height: 1.5; }
.complete-callout .button { background: #fff; color: #17395f; }

.job-history-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, 1fr); gap: 14px; }
.job-timeline { display: grid; margin-top: 14px; }
.job-timeline > div { position: relative; display: flex; gap: 12px; min-height: 56px; }
.job-timeline > div:before { content: ""; position: absolute; top: 14px; bottom: -4px; left: 5px; width: 1px; background: #dfe5eb; }
.job-timeline > div:last-child:before { display: none; }
.job-timeline i { z-index: 1; flex: 0 0 11px; width: 11px; height: 11px; margin-top: 5px; border: 2px solid #fff; border-radius: 50%; background: #3771b9; box-shadow: 0 0 0 1px #3771b9; }
.job-timeline span { display: grid; align-content: start; gap: 4px; }
.job-timeline small { color: #7d8792; font-size: 9px; }
.job-documents { display: grid; gap: 8px; margin-top: 14px; }
.job-documents a { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px; border: 1px solid #dfe5ea; border-radius: 7px; text-decoration: none; }
.job-documents svg { width: 18px; }
.job-documents span { display: grid; gap: 2px; }
.job-documents small { color: #7d8792; font-size: 8.5px; }

.modal-note,
.cancellation-preview { margin: 0; padding: 12px; border-radius: 7px; color: #5f6d7a; background: #f3f6f9; font-size: 10px; line-height: 1.55; }
.cancellation-preview { border-left: 3px solid #c37a18; }

.service-payment-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.service-payment-options label { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 10px; border: 1px solid #d8e0e7; border-radius: 7px; font-size: 10px; }
.service-payment-options svg { width: 16px; }
.service-payment-options input { width: 15px !important; height: 15px !important; }

.booking-style-preview { padding: 18px; border: 1px solid #d8e0e7; }
.booking-style-preview > div { display: grid; gap: 8px; max-width: 440px; padding: 18px; box-shadow: 0 5px 18px #17243312; }
.booking-style-preview strong { font-size: 17px; }
.booking-style-preview span { font-size: 10px; opacity: .72; }
.booking-style-preview button { justify-self: start; padding: 9px 13px; border: 0; border-radius: 6px; color: #fff; }

.booking-page { color: var(--booking-text, #26313d); background: var(--booking-bg, #f4f6f8); }
.booking-page .booking-box,
.booking-page .booking-header,
.booking-page .booking-confirm { background: var(--booking-surface, #fff); }
.booking-page .booking-box,
.booking-page .booking-confirm,
.booking-page .public-calendar,
.booking-page .booking-services button,
.booking-page .public-payment-options button { border-radius: var(--booking-radius, 10px); }
.booking-page.style-compact .booking-main { gap: 24px; padding-top: 36px; }
.booking-page.style-compact .booking-copy p { max-width: 520px; }
.booking-page.style-compact .booking-body { padding: 22px; }
.booking-page.style-editorial .booking-main { max-width: 1320px; gap: 70px; padding-top: 90px; }
.booking-page.style-editorial .booking-copy h1 { font-size: clamp(38px, 5vw, 66px); line-height: 1.02; }
.booking-page.style-editorial .booking-copy p { font-size: 15px; line-height: 1.8; }

.manage-page { display: grid; place-items: center; min-height: 100vh; padding: 24px; background: #f3f6f8; }
.manage-card { width: min(680px, 100%); padding: 28px; border: 1px solid #dce3e9; border-radius: 12px; background: #fff; box-shadow: 0 18px 60px #17253614; }
.manage-card > .brand-mark { margin-bottom: 28px; }
.manage-card h1 { margin: 12px 0 4px; font-size: 27px; }
.manage-reference { margin: 0 0 22px; color: #687583; }
.manage-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.manage-facts > div { display: grid; gap: 4px; padding: 12px; border-radius: 7px; background: #f6f8fa; }
.manage-facts span { color: #7d8792; font-size: 9px; }
.manage-facts strong { font-size: 11px; }
.public-cancel-box { margin-top: 22px; padding: 18px; border: 1px solid #ead9bf; border-radius: 9px; background: #fffaf2; }
.public-cancel-box h2 { margin: 0; font-size: 16px; }
.public-cancel-box p { color: #765c39; font-size: 11px; line-height: 1.6; }
.public-cancel-box textarea { width: 100%; margin: 5px 0 12px; padding: 10px; border: 1px solid #d8c8af; border-radius: 6px; resize: vertical; }
.manage-notice { margin-top: 22px; padding: 13px; border-radius: 7px; color: #5e6b78; background: #f2f5f7; }
.manage-contact { display: inline-block; margin-top: 18px; color: var(--brand); font-size: 11px; }
.manage-success { text-align: center; }
.manage-success > div { display: grid; place-items: center; width: 54px; height: 54px; margin: 16px auto; border-radius: 50%; color: #fff; background: #16825b; }
.manage-success svg { width: 25px; }

@media (max-width: 1050px) {
  .job-overview-grid,
  .job-history-grid { grid-template-columns: 1fr; }
  .job-photo-grid { grid-template-columns: repeat(3, minmax(100px, 1fr)); }
  .job-add-item { grid-template-columns: repeat(4, 1fr); }
  .job-add-item .field:first-child { grid-column: 1 / -1; }
  .job-add-item .button { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  .toolbar { align-items: stretch; }
  .toolbar .search { flex-basis: 100%; max-width: none; }
  .toolbar .toolbar-spacer { display: none; }
  .toolbar > .button { width: 100%; }
  .job-detail-head { margin: -2px -1px 12px; padding: 15px 14px 0; border-radius: 8px; }
  .job-detail-title h2 { font-size: 20px; }
  .job-head-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .job-head-actions .button { width: 100%; }
  .job-progress { margin: 17px -14px 0; padding-inline: 14px; }
  .job-detail-tabs { margin-inline: -1px; }
  .job-section { padding: 15px; }
  .job-section-head { align-items: flex-start; }
  .job-facts,
  .job-summary-card { grid-template-columns: 1fr; }
  .job-summary-card h3 { grid-column: auto; }
  .job-photo-grid { grid-template-columns: repeat(2, minmax(105px, 1fr)); }
  .job-add-item { grid-template-columns: 1fr 1fr; }
  .job-add-item .field:first-child,
  .job-add-item .button { grid-column: 1 / -1; }
  .complete-callout { align-items: stretch; flex-direction: column; }
  .complete-callout .button { width: 100%; }
  .service-payment-options,
  .manage-facts { grid-template-columns: 1fr; }
  .manage-page { padding: 10px; }
  .manage-card { padding: 20px 16px; border-radius: 9px; }
  .signature-pad-wrap canvas { height: 180px; }
}

@media (max-width: 430px) {
  .job-head-actions { grid-template-columns: 1fr; }
  .job-photo-grid { grid-template-columns: 1fr 1fr; gap: 7px; }
  .job-photo-slot { min-height: 104px; }
  .job-add-item { grid-template-columns: 1fr; }
  .job-add-item .field,
  .job-add-item .button { grid-column: auto !important; }
}