/* Area C – cleaner mobile app: my jobs, job execution, my hours, my absences (mobile first, large touch targets). Owned by the area (docs/AREAS.md).
   Visual reference: docs/mockups (dark teal header with status / title / address / progress, white cards with light border, counter pills,
   dashed "+ Foto" tiles, sticky bottom bar "Problem melden" + "Einsatz abschließen"). Only tokens from theme.css; no all-caps labels,
   no cards with a thick coloured left border. Classes are prefixed with mob-. */
.mob-page { --mob-tap: 48px; max-width: 760px; margin: 0 auto; }

/* ---------- header (hero) ---------- */
.mob-hero { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; padding: 18px 18px 20px; margin-bottom: 14px; border-radius: var(--radius-lg);
  background: var(--job-head); color: #fff; }
.mob-hero > div:first-child { flex: 1; min-width: 0; }
.mob-hero h1 { color: #fff; font-size: 24px; font-weight: 750; letter-spacing: -.02em; line-height: 1.2; margin: 2px 0 0; overflow-wrap: anywhere; }
.mob-hero-kicker { display: block; font-size: var(--fs-sm); color: rgba(255, 255, 255, .85); }
.mob-hero-sub { font-size: var(--fs-sm); color: rgba(255, 255, 255, .82); margin-top: 4px; overflow-wrap: anywhere; }
.mob-hero-btn { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .22); color: #fff; width: 44px; height: 44px; }
.mob-hero-btn:hover { background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .3); } .mob-hero-btn:disabled { opacity: .35; }
.mob-hero-job { display: block; }
.mob-back { display: inline-flex; align-items: center; gap: 4px; color: rgba(255, 255, 255, .88); font-size: var(--fs-sm); margin-bottom: 10px; text-decoration: none !important; min-height: 32px; }
.mob-back:hover { color: #fff; }
.mob-hero-bar { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .16); overflow: hidden; margin-top: 14px; }
.mob-hero-bar span { display: block; height: 100%; border-radius: 4px; background: var(--job-glow); transition: width .3s; }
.mob-hero-count { font-size: var(--fs-xs); color: rgba(255, 255, 255, .88); margin-top: 6px; }
.mob-month { display: flex; gap: 8px; }
@media (max-width: 960px) {
  body.own-mode .mob-hero { margin: -16px -14px 16px; border-radius: 0; padding: 14px 16px 20px; }
  /* the phone top bar blends into the dark teal job header */
  body.own-mode .topbar { background: var(--job-head); border-bottom-color: transparent; backdrop-filter: none; color: #fff; }
  body.own-mode .topbar .topbar-brand { color: #fff; } body.own-mode .topbar .btn-ghost { color: #fff; } body.own-mode .topbar .btn-ghost:hover { background: rgba(255, 255, 255, .12); }
  body.own-mode .topbar .avatar { background: rgba(255, 255, 255, .16); color: #fff; } body.own-mode .topbar :focus-visible { outline-color: #fff; }
}

/* ---------- groups, sync bar ---------- */
.mob-group { margin-top: 18px; }
.mob-group-head { display: flex; align-items: center; gap: 8px; font-size: var(--fs-md); margin: 0 2px 10px; }
.mob-group-head .icon { stroke: var(--primary); }
.mob-group-head .n { margin-left: auto; min-width: 26px; height: 22px; padding: 0 8px; border-radius: var(--radius-pill); background: var(--surface-3); color: var(--text-2); font-size: 12px; font-weight: 650; display: inline-grid; place-items: center; }
.mob-none { padding: 14px 16px; border: 1px dashed var(--border-strong); border-radius: var(--radius); background: var(--surface); }
.mob-hint { margin: -4px 2px 10px; display: flex; gap: 6px; align-items: flex-start; }
.mob-stale { margin-bottom: 12px; }
[data-syncbar]:empty { display: none; }
.mob-sync { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius); font-size: var(--fs-sm); margin-bottom: 12px; border: 1px solid var(--border); background: var(--surface); }
.mob-sync > span { flex: 1; min-width: 0; } .mob-sync .btn { flex: none; }
.mob-sync[data-state="ok"] { color: var(--success); } .mob-sync[data-state="ok"] > span { color: var(--text-2); }
.mob-sync[data-state="offline"] { background: var(--warning-bg); border-color: transparent; color: var(--text); }
.mob-sync[data-state="syncing"] { background: var(--info-bg); border-color: transparent; }
.mob-sync[data-state="syncing"] .icon { animation: spin 1.4s linear infinite; }
.mob-sync[data-state="failed"] { background: var(--danger-bg); border-color: transparent; }
.mob-failed li { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--border); }
.mob-failed-msg { color: var(--danger); margin-top: 4px; }

/* ---------- my jobs: cards ---------- */
.mob-job { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); margin-bottom: 12px; overflow: hidden; }
.mob-job[data-status="completed"], .mob-job[data-status="cancelled"] { background: var(--surface-2); }
.mob-job-main { display: block; padding: 14px 16px 12px; color: var(--text); text-decoration: none !important; }
.mob-job-top { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.mob-job-time { font-size: 18px; font-variant-numeric: tabular-nums; } .mob-job-time .muted { font-weight: 500; font-size: var(--fs-md); }
.mob-job-day { font-size: var(--fs-sm); font-weight: 650; color: var(--primary); }
.mob-job-title { font-size: var(--fs-md); font-weight: 650; margin-top: 6px; overflow-wrap: anywhere; }
.mob-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; } .mob-meta span { display: inline-flex; align-items: center; gap: 4px; } .mob-meta .icon { width: 13px; height: 13px; }
.mob-job-note { display: flex; gap: 6px; align-items: flex-start; margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: var(--info-bg); color: var(--text-2); }
.mob-job-note .icon { margin-top: 1px; stroke: var(--info); }
.mob-progress { display: flex; align-items: center; gap: 10px; margin-top: 10px; } .mob-progress .progress { flex: 1; }
.mob-job-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 16px 14px; }
.mob-job-actions .btn { min-height: var(--mob-tap); white-space: normal; text-align: center; }
.mob-running { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--radius-lg); background: var(--st-progress-bg); color: var(--text); text-decoration: none !important; margin-bottom: 4px; min-height: 60px; }
.mob-running > .icon { stroke: var(--st-progress); width: 22px; height: 22px; } .mob-running-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mob-running .small { color: var(--text-2); }

/* ---------- job execution ---------- */
.mob-panel, .mob-info, .mob-issues { margin-bottom: 12px; }
.mob-panel .card-body, .mob-info .card-body { padding: 16px; }
.mob-plan { display: flex; gap: 12px; align-items: center; } .mob-plan > .icon { width: 26px; height: 26px; stroke: var(--primary); }
.mob-gps { margin-top: 14px; padding: 12px; border-radius: var(--radius); background: var(--surface-2); }
.mob-panel .xs.muted { margin-top: 10px; }
.mob-clock { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mob-clock > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: var(--radius); background: var(--surface-2); }
.mob-clock span { font-size: var(--fs-xs); color: var(--text-3); } .mob-clock b { font-size: 22px; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.mob-total { margin: 12px 0; }
.mob-paused { margin-bottom: 12px; }
.mob-two { display: grid; grid-template-columns: 1fr; gap: 10px; } .mob-two:has(> :nth-child(2)) { grid-template-columns: 1fr 1fr; }
.mob-two .btn { min-height: var(--mob-tap); }
.mob-done { display: flex; gap: 12px; align-items: flex-start; } .mob-done > .icon { width: 30px; height: 30px; padding: 6px; border-radius: 50%; background: var(--st-done-bg); stroke: var(--st-done); box-sizing: content-box; }
.mob-sum { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 14px 0 6px; }
.mob-sum > div { display: flex; flex-direction: column; padding: 10px 12px; border-radius: var(--radius); background: var(--surface-2); }
.mob-sum span { font-size: var(--fs-xs); color: var(--text-3); } .mob-sum b { font-size: var(--fs-lg); font-variant-numeric: tabular-nums; }
.mob-addr { display: flex; gap: 10px; align-items: flex-start; } .mob-addr > .icon { stroke: var(--primary); margin-top: 2px; }
.mob-info-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; } .mob-info-actions:not(:has(> :nth-child(2))) { grid-template-columns: 1fr; }
.mob-info-actions .btn { min-height: var(--mob-tap); }
.mob-note { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; padding: 10px 12px; border-radius: var(--radius); background: var(--surface-2); }
.mob-note p { margin: 2px 0 0; color: var(--text-2); white-space: pre-wrap; } .mob-note > .icon { margin-top: 2px; stroke: var(--primary); }
.mob-note.office { background: var(--accent-50); } .mob-note.office > .icon { stroke: var(--accent-600); }
.mob-access { margin-top: 12px; padding: 12px; border-radius: var(--radius); border: 1px dashed var(--border-strong); }
.mob-access-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.mob-access-grid > div { display: flex; flex-direction: column; } .mob-access-grid span { font-size: var(--fs-xs); color: var(--text-3); }
.mob-code { font-size: 22px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .06em; }
.mob-access .xs { display: flex; align-items: center; gap: 6px; margin-top: 8px; }

/* checklist: area cards (collapsible) */
.mob-checklist { margin: 18px 0 12px; }
.mob-area { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); margin-bottom: 10px; }
.mob-area > summary { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 14px 16px 12px; cursor: pointer; min-height: 60px; position: relative; }
.mob-area > summary::-webkit-details-marker { display: none; }
.mob-area-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .mob-area-title b { font-size: var(--fs-md); overflow-wrap: anywhere; }
.mob-area-title .icon { width: 12px; height: 12px; vertical-align: -1px; }
.mob-pill { min-width: 44px; height: 26px; padding: 0 10px; border-radius: var(--radius-pill); display: inline-grid; place-items: center; font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums;
  background: var(--st-neutral-bg); color: var(--st-neutral); }
.mob-pill.part { background: var(--st-progress-bg); color: var(--st-progress); } .mob-pill.ok { background: var(--st-done-bg); color: var(--st-done); }
.mob-chev { transition: transform .15s; color: var(--text-3); } .mob-area[open] .mob-chev { transform: rotate(180deg); }
.mob-area-bar { grid-column: 1 / -1; height: 5px; }
.mob-area.complete .mob-area-bar span { background: var(--st-done); }
.mob-area-body { padding: 0 16px 14px; }
.mob-items { margin: 4px 0 0; }
.mob-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--border); transition: background .3s; }
.mob-check { width: 34px; height: 34px; margin: 2px 0; border-radius: 10px; border: 2px solid var(--border-strong); background: var(--surface); display: grid; place-items: center; cursor: pointer; padding: 0; flex: none; position: relative; }
.mob-check::after { content: ''; position: absolute; inset: -8px; }   /* larger touch target (≥ 48 px) */
.mob-check .icon { width: 20px; height: 20px; stroke: transparent; stroke-width: 3; }
.mob-check[aria-checked="true"] { background: var(--st-done); border-color: var(--st-done); } .mob-check[aria-checked="true"] .icon { stroke: #fff; }
[data-mode="dark"] .mob-check[aria-checked="true"] .icon { stroke: #052e16; }
.mob-check:disabled { cursor: default; opacity: .85; }
.mob-check:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.mob-item-task { font-size: var(--fs-md); line-height: 1.35; overflow-wrap: anywhere; }
.mob-item.done .mob-item-task { color: var(--text-3); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--text-3) 60%, transparent); }
.mob-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.mob-tag { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: var(--radius-pill); background: var(--surface-3); color: var(--text-2); font-size: 11.5px; font-weight: 600; }
.mob-tag.soft { background: transparent; border: 1px solid var(--border); color: var(--text-3); }
.mob-tag.photo { background: var(--danger-bg); color: var(--danger); } .mob-tag.photo.ok { background: var(--st-done-bg); color: var(--st-done); }
.mob-tag.wait { background: var(--info-bg); color: var(--info); } .mob-tag .icon { width: 12px; height: 12px; }
.mob-item-tools { display: flex; flex-direction: column; gap: 6px; }
.mob-tool { width: 44px; height: 44px; cursor: pointer; } .mob-tool .icon { stroke: var(--text-2); }
.mob-item-cmt { display: flex; gap: 6px; align-items: flex-start; margin: 8px 0 0; color: var(--text-2); white-space: pre-wrap; overflow-wrap: anywhere; } .mob-item-cmt .icon { margin-top: 2px; stroke: var(--text-3); }
.mob-cmt { margin-top: 8px; min-height: 64px; font-size: 16px; }
.mob-area-note { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; } .mob-area-note textarea { font-size: 16px; }
.mob-flash { background: var(--accent-50); border-radius: 10px; }
.mob-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.mob-thumb { position: relative; width: 64px; height: 64px; padding: 0; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--surface-3); cursor: pointer; }
.mob-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mob-thumb > span { position: absolute; left: 0; right: 0; bottom: 0; font-size: 10px; font-weight: 650; color: #fff; background: rgba(0, 0, 0, .5); padding: 1px 0; text-align: center; }
.mob-thumb-wait { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; }
.mob-thumb-wait .icon { width: 12px; height: 12px; stroke: var(--info); }
.mob-add { width: 64px; height: 64px; border: 2px dashed color-mix(in srgb, var(--primary) 70%, transparent); border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  color: var(--primary); font-size: 11.5px; font-weight: 650; cursor: pointer; background: var(--primary-soft); text-align: center; line-height: 1.1; }
.mob-add .icon { width: 16px; height: 16px; } .mob-add.has { border-style: solid; border-width: 1px; }
.mob-ba { margin-top: 0; margin-bottom: 4px; }
.mob-extra { margin-top: 4px; }
.mob-photo-full { display: block; width: 100%; max-height: 70vh; object-fit: contain; border-radius: var(--radius); background: var(--surface-3); }
.mob-missing li + li { margin-top: 6px; }
.mob-missing-btn { width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); cursor: pointer; min-height: 52px; color: var(--text); font: inherit; }
.mob-missing-btn > span { flex: 1; display: flex; flex-direction: column; min-width: 0; } .mob-missing-btn > .icon:first-child { stroke: var(--danger); }
.mob-issue .chips { flex-wrap: wrap; } .mob-issue .chip { height: 40px; } .mob-issue .seg { width: 100%; } .mob-issue .seg button { flex: 1; height: 40px; }
.mob-issue textarea { font-size: 16px; } .mob-issue-photo { width: 100%; cursor: pointer; }
.mob-issue-prev { margin-top: 8px; max-width: 160px; max-height: 120px; border-radius: 10px; border: 1px solid var(--border); object-fit: cover; }
.mob-issue-list li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; } .mob-issue-list li + li { border-top: 1px solid var(--border); } .mob-issue-list li > div { flex: 1; min-width: 0; }
.mob-actionbar { position: sticky; bottom: 12px; z-index: 30; display: grid; grid-template-columns: 1fr; gap: 10px; padding: 10px; margin-top: 14px; border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(8px); border: 1px solid var(--border); box-shadow: var(--shadow); }
.mob-actionbar:has(> :nth-child(2)) { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
.mob-actionbar .btn { min-height: 52px; white-space: normal; text-align: center; }
.mob-actionbar .btn-danger { background: var(--surface); border-color: var(--danger); }
.mob-actionbar .btn { border-radius: var(--radius); }
@media (max-width: 960px) { body.own-mode .mob-actionbar { bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom) + 8px); } }

/* ---------- my hours ---------- */
.mob-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.mob-kpi { display: flex; flex-direction: column; padding: 12px 14px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); }
.mob-kpi span { font-size: var(--fs-xs); color: var(--text-3); } .mob-kpi b { font-size: 24px; font-variant-numeric: tabular-nums; } .mob-kpi small { font-size: var(--fs-xs); color: var(--text-3); }
.mob-kpi.main { background: var(--primary-soft); border-color: transparent; } .mob-kpi.main b { color: var(--primary); }
@media (min-width: 640px) { .mob-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mob-earn { margin-top: 12px; } .mob-earn .card-body { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; }
.mob-earn-bar span { background: var(--st-done); } .mob-earn.warn .mob-earn-bar span { background: var(--warning); }
.mob-day { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); margin-bottom: 10px; overflow: hidden; }
.mob-day-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.mob-entry { display: flex; gap: 12px; align-items: center; padding: 12px 14px; } .mob-entry + .mob-entry { border-top: 1px solid var(--border); }
.mob-entry-main { flex: 1; min-width: 0; } .mob-entry-main b { overflow-wrap: anywhere; }
.mob-entry-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; } .mob-entry-side b { font-size: var(--fs-lg); font-variant-numeric: tabular-nums; }

/* ---------- my absences ---------- */
.mob-sick-box { display: flex; flex-direction: column; gap: 10px; }
.mob-sick { display: flex; align-items: center; gap: 14px; width: 100%; height: auto; min-height: 84px; padding: 16px 18px; text-align: left; white-space: normal; border-radius: var(--radius-lg);
  background: var(--danger-bg); border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent); color: var(--text); }
.mob-sick:hover { background: color-mix(in srgb, var(--danger) 16%, var(--surface)); border-color: var(--danger); }
.mob-sick > .icon { width: 30px; height: 30px; stroke: var(--danger); } .mob-sick span { display: flex; flex-direction: column; gap: 2px; }
.mob-sick b { font-size: 18px; } .mob-sick small { color: var(--text-2); font-weight: 500; font-size: var(--fs-sm); }
.mob-sick-box .btn-block { min-height: var(--mob-tap); white-space: normal; }
.mob-abs-list { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.mob-abs { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; } .mob-abs + .mob-abs { border-top: 1px solid var(--border); }
.mob-abs-ic { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-3); flex: none; }
.mob-abs-ic.sick { background: var(--danger-bg); } .mob-abs-ic.sick .icon { stroke: var(--danger); } .mob-abs-ic.vacation { background: var(--st-planned-bg); } .mob-abs-ic.vacation .icon { stroke: var(--st-planned); }
.mob-abs-main { flex: 1; min-width: 0; } .mob-abs-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.mob-abs-form .seg { width: 100%; } .mob-abs-form .seg button { flex: 1; height: 40px; white-space: normal; line-height: 1.1; }
.mob-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0; } .mob-abs-form .input { font-size: 16px; }
.mob-abs-form .field + .field { margin-top: 12px; }