/* Rapport – custom styles (mirrors SolarStream's app.css, --rp-* tokens) */

/* ── Theme variables ─────────────────────────────────────────────────── */
:root {
  --rp-bg:           #0f172a;
  --rp-card:         #1e293b;
  --rp-card-2:       #263449;
  --rp-border:       #334155;
  --rp-border-2:     #475569;
  --rp-hover:        #334155;
  --rp-body:         #e2e8f0;
  --rp-label:        #cbd5e1;
  --rp-heading:      #ffffff;
  --rp-subtle:       #94a3b8;
  --rp-muted:        #64748b;
  --rp-input-bg:     #0f172a;
  --rp-input-border: #475569;
  --rp-accent:       #2563eb;
  --rp-accent-soft:  #60a5fa;
}

[data-theme="light"] {
  --rp-bg:           #f1f5f9;
  --rp-card:         #ffffff;
  --rp-card-2:       #f8fafc;
  --rp-border:       #d8e0ea;
  --rp-border-2:     #b0bfce;
  --rp-hover:        #eef2f7;
  --rp-body:         #334155;
  --rp-label:        #475569;
  --rp-heading:      #0f172a;
  --rp-subtle:       #64748b;
  --rp-muted:        #94a3b8;
  --rp-input-bg:     #ffffff;
  --rp-input-border: #cbd5e1;
  --rp-accent:       #2563eb;
  --rp-accent-soft:  #1d4ed8;
}

/* Light mode: text-white utilities would vanish on a light card */
[data-theme="light"] .text-white { color: var(--rp-heading); }
[data-theme="light"] [class*="bg-blue-"].text-white,
[data-theme="light"] [class*="bg-blue-"] .text-white,
[data-theme="light"] [class*="bg-red-"].text-white,
[data-theme="light"] [class*="bg-emerald-"].text-white { color: #ffffff; }

html, body {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  -webkit-tap-highlight-color: transparent;
}

/* Respect the iOS/Android safe areas — this runs full-screen when installed */
.safe-top    { padding-top:    env(safe-area-inset-top, 0px); }
.safe-bottom { padding-bottom: env(safe-area-inset-bottom, 0px); }

/* ── Top bar ─────────────────────────────────────────────────────────── */
.topbar {
  background: var(--rp-accent);
  color: #ffffff;
}
.topbar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  color: #ffffff;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background-color 0.15s;
}
.topbar-btn:hover  { background: rgba(255, 255, 255, 0.15); }
.topbar-btn:active { background: rgba(255, 255, 255, 0.25); }

/* Round icon button INSIDE a card (not the blue topbar) — accent-coloured so
   it stays visible on light and dark cards alike. */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  color: var(--rp-accent-soft);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background-color 0.15s;
}
.icon-btn:hover  { background: rgba(59, 130, 246, 0.12); }
.icon-btn:active { background: rgba(59, 130, 246, 0.20); }

/* ── Tabs (Pendent / Hochgeladen) ────────────────────────────────────── */
.tab-link {
  flex: 1;
  text-align: center;
  padding: 0.75rem 0.5rem;
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--rp-muted);
  border-bottom: 2px solid transparent;
  text-decoration: none;
  transition: color 0.15s, border-color 0.15s;
}
.tab-link:hover  { color: var(--rp-body); }
.tab-link.active { color: var(--rp-accent-soft); border-bottom-color: var(--rp-accent-soft); }

/* ── Day card ────────────────────────────────────────────────────────── */
.day-card {
  background: var(--rp-card);
  border: 1px solid var(--rp-border);
  border-radius: 1rem;
  overflow: hidden;
}
/* A card holding a combobox must not clip its dropdown. Two-class selector:
   app.css loads after tailwind.css, so a bare .overflow-visible would lose. */
.day-card.has-combo { overflow: visible; }
.day-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.875rem 1rem 0.625rem;
}
.day-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--rp-accent-soft);
}
.day-total {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--rp-heading);
  font-variant-numeric: tabular-nums;
}

/* ── Entry row ───────────────────────────────────────────────────────── */
.entry-row {
  display: block;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--rp-border);
  text-decoration: none;
  color: inherit;
  transition: background-color 0.15s;
}
.entry-row:hover  { background: rgba(59, 130, 246, 0.08); }
.entry-row:active { background: rgba(59, 130, 246, 0.14); }

/* Swipe-to-delete (Erfassen, pending entries only). The red action sits behind
   the row; the row has a solid card background so it hides the action until
   swiped left. */
.swipe-wrap { position: relative; overflow: hidden; }
.swipe-action {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;      /* "Löschen" sits at the trailing edge */
  background: #ef4444;
  transition: background-color 0.15s;
}
.swipe-wrap.will-delete .swipe-action { background: #dc2626; }  /* armed: release to delete */
.swipe-delete {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0 1.25rem;
  background: transparent;
  color: #ffffff;
  font-weight: 600;
  font-size: 0.9rem;
  border: none;
  cursor: pointer;
}
.swipe-content {
  position: relative;
  background: var(--rp-card);
  transition: transform 0.2s ease;
  touch-action: pan-y;
}
.swipe-content.swiping { transition: none; user-select: none; -webkit-user-select: none; cursor: grabbing; }
/* Stay opaque on hover/active so the red delete never bleeds through — it may
   only appear once the row is actually dragged left. */
.swipe-content:hover,
.swipe-content:active { background: var(--rp-card); }
.entry-time {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--rp-heading);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.entry-hours {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--rp-heading);
  font-variant-numeric: tabular-nums;
}
.entry-meta { font-size: 0.8125rem; color: var(--rp-subtle); }

/* ── Add-entry row inside a day card ─────────────────────────────────── */
.add-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.625rem;
  border-top: 1px solid var(--rp-border);
  color: var(--rp-accent-soft);
  font-size: 0.8125rem;
  font-weight: 600;
  background: transparent;
  text-decoration: none;
  transition: background-color 0.15s;
}
.add-row:hover { background: rgba(59, 130, 246, 0.08); }

/* ── Upload-Status (Doppelhaken) ─────────────────────────────────────── */
.upload-state {
  display: inline-flex;
  align-items: center;
  color: var(--rp-muted);
  flex-shrink: 0;
}
/* Blue once Abacus has taken the hours — same signal as a read receipt. */
.upload-state.is-sent  { color: var(--rp-accent-soft); }
.upload-state.is-error { color: #f87171; }
[data-theme="light"] .upload-state.is-error { color: #dc2626; }

/* ── Spesenart-Auswahl ───────────────────────────────────────────────── */
.expense-option {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--rp-border);
  cursor: pointer;
  transition: background-color 0.15s;
}
.expense-option:first-child { border-top: none; }
.expense-option:hover { background: rgba(59, 130, 246, 0.08); }
.expense-option input { margin-top: 0.2rem; width: 1.1rem; height: 1.1rem; accent-color: var(--rp-accent); flex-shrink: 0; }
.expense-option:has(input:checked) { background: rgba(59, 130, 246, 0.12); }
.expense-option-body { display: flex; flex-direction: column; min-width: 0; }
.expense-option-name { font-size: 0.9375rem; font-weight: 600; color: var(--rp-body); }
.expense-option-meta { font-size: 0.75rem; color: var(--rp-muted); margin-top: 0.1rem; }

/* Dateifeld: nativer Input versteckt, Label ist der Knopf. */
.file-field input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.file-field label { cursor: pointer; }
.file-field label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Spesenzeile in den Listen ───────────────────────────────────────── */
.expense-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #fbbf24;
}
[data-theme="light"] .expense-badge { color: #b45309; }

/* ── Status pill ─────────────────────────────────────────────────────── */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 700;
  border: 1px solid;
}
.pill-pending  { color: var(--rp-accent-soft); border-color: rgba(59, 130, 246, 0.4);  background: rgba(59, 130, 246, 0.12); }
.pill-lead     { color: #fbbf24; border-color: rgba(251, 191, 36, 0.4); background: rgba(251, 191, 36, 0.12); }
.pill-blocked  { color: #f87171; border-color: rgba(248, 113, 113, 0.4); background: rgba(248, 113, 113, 0.12); }
.pill-missing  { color: #f87171; border-color: rgba(248, 113, 113, 0.4); background: rgba(248, 113, 113, 0.12); }
[data-theme="light"] .pill-pending  { color: #1d4ed8; background: #eff6ff; }
[data-theme="light"] .pill-lead     { color: #b45309; background: #fffbeb; }
[data-theme="light"] .pill-blocked  { color: #b91c1c; background: #fef2f2; }
[data-theme="light"] .pill-missing  { color: #b91c1c; background: #fef2f2; }

/* ── Form inputs ─────────────────────────────────────────────────────── */
.field-input {
  width: 100%;
  background-color: var(--rp-input-bg);
  border: 1px solid var(--rp-input-border);
  border-radius: 0.75rem;
  padding: 0.75rem;
  color: var(--rp-body);
  font-size: 1rem;   /* 16px — anything smaller makes iOS Safari zoom on focus */
  outline: none;
  transition: box-shadow 0.15s, border-color 0.15s;
  appearance: none;
  -webkit-appearance: none;
  color-scheme: dark;
}
[data-theme="light"] .field-input { color-scheme: light; }
.field-input:focus  { box-shadow: 0 0 0 2px var(--rp-accent); border-color: transparent; }
.field-input option { background-color: var(--rp-card); color: var(--rp-body); }

.field-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--rp-label);
  margin-bottom: 0.4rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.field-error {
  margin-top: 0.375rem;
  font-size: 0.8125rem;
  color: #f87171;
}
[data-theme="light"] .field-error { color: #dc2626; }

/* ── The big Von → Bis pair ──────────────────────────────────────────── */
/* Hier fehlen absichtlich drei Regeln, die frueher dastanden:
   appearance: none, -webkit-appearance: none und das Ausblenden von
   ::-webkit-calendar-picker-indicator. Sie versteckten das Uhr-Symbol,
   damit die grosse Zahl allein steht.

   Auf Android war das Feld damit nicht mehr bedienbar: Chrome nimmt dem
   Zeitfeld mit appearance:none die native Bedienung, und das versteckte
   Symbol war der letzte Weg, den Zeitdialog zu oeffnen. Antippen tat
   nichts, ohne Fehlermeldung. iOS war nicht betroffen - WebKit ignoriert
   appearance bei Datums- und Zeitfeldern, der Picker ging dort weiter auf.
   Darum fiel es lange nur bei einzelnen Leuten auf.

   Wer das Symbol wieder wegstylen will: vorher auf einem Android testen. */
.time-input {
  background: transparent;
  border: none;
  outline: none;
  color: var(--rp-heading);
  /* Mitwachsend: bei hochgedrehter Anzeigegroesse passten zwei feste
     36px-Felder samt Pfeil nicht mehr nebeneinander. */
  font-size: clamp(1.75rem, 8vw, 2.25rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
  width: 100%;
  min-width: 0;
  padding: 0.25rem 0;
  color-scheme: dark;
}
[data-theme="light"] .time-input { color-scheme: light; }
.time-input:focus { color: var(--rp-accent-soft); }

/* Invalid time range: the hours line carries the message instead. */
.hours-line.is-invalid { color: #f87171; font-weight: 600; }
.hours-line.is-invalid .hours-unit { display: none; }
[data-theme="light"] .hours-line.is-invalid { color: #dc2626; }

/* ── Buttons ─────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border-radius: 0.75rem;
  font-size: 0.9375rem;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.btn-primary { background: var(--rp-accent); color: #ffffff; }
.btn-primary:hover { background: #1d4ed8; }
.btn-ghost {
  background: transparent;
  color: var(--rp-subtle);
  border-color: var(--rp-border);
}
.btn-ghost:hover { color: var(--rp-body); border-color: var(--rp-border-2); }
.btn-danger { background: transparent; color: #f87171; border-color: rgba(248, 113, 113, 0.4); }
.btn-danger:hover { background: rgba(248, 113, 113, 0.1); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* ── Floating action button ──────────────────────────────────────────── */
.fab {
  position: fixed;
  /* Align with the content column (max-w-2xl = 42rem), not the viewport edge:
     on a wide screen the button would otherwise float far off to the right,
     away from everything it belongs to. */
  right: max(1.25rem, calc((100vw - 42rem) / 2 + 1.25rem));
  bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 9999px;
  background: var(--rp-accent);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
  border: none;
  cursor: pointer;
  z-index: 40;
}
.fab:hover { background: #1d4ed8; }

/* ── Project combobox ────────────────────────────────────────────────── */
.combo-wrap { position: relative; }
.combo-list {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  margin-top: 4px;
  z-index: 50;
  background: var(--rp-card);
  border: 1px solid var(--rp-border);
  border-radius: 0.75rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
  overflow: hidden auto;
  max-height: 16rem;
  list-style: none;
  padding: 0;
  margin-left: 0;
  margin-right: 0;
}
.combo-list[hidden] { display: none; }
.combo-item {
  padding: 0.625rem 0.875rem;
  cursor: pointer;
  border-bottom: 1px solid var(--rp-border);
}
.combo-item:last-child { border-bottom: none; }
.combo-item:hover,
.combo-item[data-active="1"] { background: var(--rp-hover); }
.combo-item-title { font-size: 0.9375rem; font-weight: 600; color: var(--rp-body); }
.combo-item-sub   { font-size: 0.8125rem; color: var(--rp-muted); }
.combo-empty      { padding: 0.75rem 0.875rem; font-size: 0.875rem; color: var(--rp-muted); }

/* ── Bestätigungs-Modal ──────────────────────────────────────────────── */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}
.modal[hidden] { display: none; }
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(2px);
}
.modal-card {
  position: relative;
  width: 100%;
  max-width: 24rem;
  background: var(--rp-card);
  border: 1px solid var(--rp-border);
  border-radius: 1rem;
  padding: 1.25rem;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45);
  animation: modal-in 0.12s ease-out;
}
@keyframes modal-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .modal-card { animation: none; }
}
.modal-title {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--rp-heading);
  margin-bottom: 0.5rem;
}
.modal-text {
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--rp-subtle);
}
.modal-actions {
  display: flex;
  gap: 0.625rem;
  margin-top: 1.25rem;
}
.modal-actions .btn { flex: 1; }

/* ── Messages ────────────────────────────────────────────────────────── */
.flash {
  padding: 0.625rem 0.875rem;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  border: 1px solid;
}
.flash-success { color: #34d399; border-color: rgba(16, 185, 129, 0.35); background: rgba(16, 185, 129, 0.1); }
.flash-error   { color: #f87171; border-color: rgba(248, 113, 113, 0.35); background: rgba(248, 113, 113, 0.1); }
[data-theme="light"] .flash-success { color: #047857; background: #ecfdf5; }
[data-theme="light"] .flash-error   { color: #b91c1c; background: #fef2f2; }

/* ── Offline banner (service worker sets .is-offline on <html>) ──────── */
.offline-banner { display: none; }
.is-offline .offline-banner {
  display: block;
  background: #b45309;
  color: #ffffff;
  font-size: 0.8125rem;
  font-weight: 600;
  text-align: center;
  padding: 0.375rem 0.75rem;
}

/* ── Scrollbar ───────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--rp-bg); }
::-webkit-scrollbar-thumb { background: var(--rp-border); border-radius: 3px; }

/* ── Zeitrad ──────────────────────────────────────────────────────────────
   Eigener Zeitwähler statt des nativen Dialogs. Der gehört dem Browser und
   sieht auf jeder Plattform anders aus; auf Android war das Feld zeitweise
   gar nicht bedienbar. Das hier verhält sich überall gleich.

   Die Mechanik ist CSS-Scroll-Snap, kein JavaScript-Scrollen: der Browser
   rastet selbst ein, mit seinem eigenen Schwung und seiner eigenen Haptik.
   JS liest nur ab, wo er stehengeblieben ist. */
.tw {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(2, 6, 23, 0.6);
  backdrop-filter: blur(2px);
}
.tw[hidden] { display: none; }
.tw-sheet {
  width: 100%;
  max-width: 420px;
  background: var(--rp-card);
  border: 1px solid var(--rp-border);
  border-bottom: none;
  border-radius: 20px 20px 0 0;
  padding: 18px 16px calc(16px + env(safe-area-inset-bottom));
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.45);
}
.tw-title {
  margin: 0 0 10px;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rp-muted);
}
.tw-cols {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
/* 5 sichtbare Zeilen à 48px; die Polster oben und unten lassen den ersten
   und letzten Eintrag in die Mitte rutschen. */
.tw-col {
  height: 240px;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  flex: 0 0 5.5rem;
  outline: none;
}
.tw-col::-webkit-scrollbar { display: none; }
.tw-item {
  height: 48px;
  line-height: 48px;
  scroll-snap-align: center;
  text-align: center;
  font-size: 1.6rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--rp-muted);
  transition: color 0.12s, transform 0.12s;
}
.tw-item.is-current { color: var(--rp-heading); transform: scale(1.12); }
.tw-pad { height: 96px; }
.tw-colon {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--rp-muted);
  padding-bottom: 2px;
}
/* Das Band markiert die Mitte und darf keine Berührung abfangen. */
.tw-band {
  position: absolute;
  left: 0; right: 0;
  top: 96px;
  height: 48px;
  border-top: 1px solid var(--rp-border);
  border-bottom: 1px solid var(--rp-border);
  background: rgba(59, 130, 246, 0.08);
  border-radius: 10px;
  pointer-events: none;
}
.tw-actions { display: flex; gap: 10px; margin-top: 16px; }
.tw-actions button {
  flex: 1 1 0%;
  padding: 13px 0;
  border: none;
  border-radius: 12px;
  font-size: 0.92rem;
  font-weight: 600;
}
.tw-cancel { background: var(--rp-bg); color: var(--rp-muted); border: 1px solid var(--rp-border) !important; }
.tw-ok { background: #2563eb; color: #fff; }
/* Solange das Rad offen ist, soll die Seite dahinter nicht mitscrollen. */
body.tw-open { overflow: hidden; }

/* Der kleine Knopf unter der Zahl. Er ist im Markup hidden und wird von
   app.js eingeblendet: ohne JavaScript gibt es kein Rad, und ein Knopf,
   der nichts tut, wäre schlimmer als keiner. */
.tw-open {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  margin-top: 2px;
  padding: 3px 0;
  background: none;
  border: none;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--rp-muted);
}
.tw-open:active { color: var(--rp-accent-soft); }