/* ═══════════════════════════════════════════════════════════════════
   imiOffice – App-Design (imifactory v3.0 Palette)
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --navy:#0b3c5d; --navy-dark:#05263d; --teal:#00bfae; --teal-dark:#00897b;
  --bg:#f8fafc; --line:#d1dce6; --line-soft:#eef3f8; --muted:#5a7080;
  --ok:#15803d; --warn:#b45309; --err:#dc2626;
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0; font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
  background:var(--bg); color:#333; line-height:1.55;
  display:flex; flex-direction:column;
}

/* ─── Topbar ─────────────────────────────────────────────────────── */
/* ─── Kopfzeile ───────────────────────────────────────────────────
   Gemeldet am 09.09.2026: «Im Kopf schiesst der Text rechts aussen
   über.» Die Zeile war eine starre Flex-Reihe ohne Umbruch: Marke
   links, Zustand rechts. Wird der Dateiname lang oder das Fenster
   schmal, wächst die Reihe über den Rand hinaus, statt zu brechen.

   Drei Dinge fehlten, und alle drei sind nötig:
     · `flex-wrap`, damit die Zeile überhaupt brechen DARF.
     · `min-width:0` an beiden Hälften — ohne das schrumpft ein
       Flex-Element nie unter seinen Inhalt, egal was daneben steht.
     · eine Grenze am Dateinamen mit Auslassungspunkten. Der ganze
       Name bleibt als `title` erreichbar; abgeschnitten wird die
       Anzeige, nicht die Angabe. */
.topbar{
  background:linear-gradient(90deg,var(--navy-dark) 0%,var(--navy) 100%);
  color:#fff; padding:10px 22px; display:flex; align-items:center;
  justify-content:space-between; box-shadow:0 2px 8px rgba(0,0,0,.25); flex:0 0 auto;
  flex-wrap:wrap; gap:6px 16px;
}
.brand{font-size:20px;font-weight:700;display:flex;align-items:center;gap:10px;
  min-width:0; flex:1 1 auto;}
.brand small{font-weight:400;font-size:12px;color:#cbd5e1;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.dbstatus{font-size:12px;display:flex;align-items:center;gap:12px;color:#cbd5e1;
  min-width:0; flex:0 1 auto; flex-wrap:wrap;}
#dbLabel{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:46vw;}

@media (max-width:720px){
  .topbar{padding:8px 12px;}
  .brand{font-size:17px;}
  .brand small{display:none;}      /* der Untertitel ist Schmuck, der Zustand nicht */
  #dbLabel{max-width:100%;}
}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block;background:#64748b;}
.dot.saved{background:var(--teal);} .dot.dirty{background:#fbbf24;}
/* 14.3 · Serverbetrieb: keine Verbindung, Konflikt, Nur-Lesen */
.dot.fehler{background:#f87171;}

/* ─── Serverbetrieb (14.3) ───────────────────────────────────────── */
/* Weiss auf #b91c1c: 6.47:1. Steht über allem, solange nicht normal
   gespeichert werden kann — Nur-Lesen, Konflikt, offene Entscheidung. */
.serverbanner{
  background:#b91c1c;color:#fff;text-align:center;padding:6px 12px;
  font-size:13px;font-weight:700;letter-spacing:.02em;flex:0 0 auto;
  font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
}

/* ─── Testmodus (8.8) ────────────────────────────────────────────── */
.testbanner{
  background:#b45309;color:#fff;text-align:center;padding:6px 12px;
  font-size:13px;font-weight:700;letter-spacing:.04em;flex:0 0 auto;
  font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
}
.topbar.testmodus{
  background:linear-gradient(90deg,#7c2d12 0%,#b45309 100%);
}

/* ─── Speicheruhr (B3) ───────────────────────────────────────────── */
.saveclock{
  font-size:11px;color:#cbd5e1;font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
}
.saveclock.alt{
  color:#fff;background:var(--err);border-radius:4px;padding:1px 7px;font-weight:700;
}

/* ─── Systemalarm (B2/B3) ────────────────────────────────────────── */
.alarm-backdrop{
  position:fixed;inset:0;background:rgba(5,38,61,.62);z-index:9000;
  display:flex;align-items:center;justify-content:center;padding:24px;
}
.alarm{
  background:#fff;border-radius:10px;max-width:620px;width:100%;
  border-top:5px solid var(--err);box-shadow:0 18px 48px rgba(0,0,0,.32);
  padding:22px 24px 18px;
  font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
}
.alarm h2{
  margin:0 0 12px;font-size:17px;color:var(--err);
  font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
}
.alarm pre{
  margin:0 0 14px;white-space:pre-wrap;word-break:break-word;
  font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
  font-size:13.5px;line-height:1.6;color:#333;
}
.alarm .alarm-hint{font-size:12px;color:var(--muted);margin:0 0 14px;}

/* ─── Layout ─────────────────────────────────────────────────────── */
.shell{flex:1 1 auto;display:flex;min-height:0;}
.sidebar{
  width:210px;flex:0 0 auto;background:#fff;border-right:1px solid var(--line);
  padding:14px 10px;display:flex;flex-direction:column;gap:4px;
}
.navbtn{
  display:flex;align-items:center;gap:10px;padding:10px 14px;border:none;
  background:none;border-radius:8px;cursor:pointer;font:inherit;font-size:14px;
  color:var(--navy);text-align:left;width:100%;font-weight:600;
}
.navbtn:hover{background:var(--line-soft);}
.navbtn.active{background:var(--navy);color:#fff;}
.navbtn .ico{font-size:16px;width:20px;text-align:center;}
.sidebar .spacer{flex:1 1 auto;}
.sidebar .hint{font-size:11px;color:var(--muted);padding:8px 12px;}

.content{flex:1 1 auto;overflow:auto;padding:26px 30px;}
.view{max-width:1340px;margin:0 auto;}
.view h1{color:var(--navy);font-size:22px;margin:0 0 4px;}
.view .lead{color:var(--muted);margin:0 0 22px;font-size:14px;}

/* ─── Karten / Boxen ─────────────────────────────────────────────── */
.card{
  background:#fff;border:1px solid var(--line);border-radius:10px;
  box-shadow:0 4px 12px rgba(0,0,0,.04);margin-bottom:20px;overflow:hidden;
}
.card-head{
  background:var(--navy);color:#fff;padding:11px 18px;font-size:13px;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;display:flex;align-items:center;justify-content:space-between;
}
.card-body{padding:20px 22px;}

/* ─── Formular ───────────────────────────────────────────────────── */
label{display:block;font-size:12px;font-weight:600;color:var(--muted);margin:12px 0 4px;}
label:first-child{margin-top:0;}
.req{color:var(--err);}
/* B61 · war #94a3b8: 2.56:1 auf Weiss, rund 180 Stellen. --muted wie .lead und label. */
.hint{font-size:11px;font-weight:400;color:var(--muted);margin-left:6px;}
input[type=text],input[type=date],input[type=number],input[type=email],textarea,select{
  width:100%;padding:9px 12px;border:1px solid var(--line);border-radius:7px;
  font:inherit;font-size:14px;background:#fff;color:#333;
}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 2px rgba(11,60,93,.1);}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;}

/* ─── Buttons ────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border:none;border-radius:7px;
  cursor:pointer;font:inherit;font-size:14px;font-weight:700;transition:.15s;}
.btn:disabled{opacity:.55;cursor:not-allowed;}
.btn-primary{background:var(--navy);color:#fff;} .btn-primary:hover:not(:disabled){background:#1565a0;}
.btn-accent{background:var(--teal);color:#fff;} .btn-accent:hover:not(:disabled){background:var(--teal-dark);}
.btn-outline{background:#fff;color:var(--navy);border:2px solid var(--navy);} .btn-outline:hover:not(:disabled){background:var(--navy);color:#fff;}
.btn-danger{background:#fff;color:var(--err);border:1px solid #fca5a5;} .btn-danger:hover{background:var(--err);color:#fff;}
.btn-sm{padding:5px 11px;font-size:12px;}
.btn-lg{padding:13px 26px;font-size:15px;}
.row-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px;}

/* ─── Tabelle ────────────────────────────────────────────────────── */
/* ─── Tabellen auf schmalen Fenstern ──────────────────────────────
   Gemeldet am 09.09.2026: «Tabellenansichten sind nicht responsiv.»
   `width:100%` hilft nichts, wenn acht Spalten mit ihrem Inhalt
   zusammen breiter sind als das Fenster — dann wächst die Tabelle über
   ihren Kasten hinaus und die ganze Seite bekommt einen waagrechten
   Balken. Bedient wird dann alles, nur die Tabelle nicht.

   Der Kasten scrollt jetzt selbst. Die Spalten bleiben, wo sie sind;
   nur der Ausschnitt wandert. Das ist die ehrlichere Lösung als
   Spalten zu verstecken: was nicht zu sehen ist, wird auch nicht
   gesucht — und eine Rechnungsliste ohne Betrag ist keine.

   `-webkit-overflow-scrolling` fehlt bewusst: das ist eine Eigenschaft
   für Geräte, die hier keine Rolle spielen. */
.card-body:has(> table.list){overflow-x:auto;}
/* B56 · Die Zeilenbehälter von Rapport, Material, Geräten und Positionen.
   Ihre Raster haben seit dem 09.09.2026 Mindestbreiten je Spalte; passt
   die Summe nicht mehr, schiebt der Behälter waagrecht, statt die
   Eingabefelder auf drei Zeichen zusammenzudrücken. */
#zeitWrap, #matWrap, #geraeteWrap, #posWrap{overflow-x:auto;}

/* ─── Tabellen in Fenstern (Abrechnungslauf, Mahnlauf) ────────────
   `.tbl` hatte bis zum 09.09.2026 KEINE Gestaltung. Ohne Angaben
   bemisst der Browser jede Spalte nach ihrem Inhalt: die kurzen
   Zahlenspalten werden schmal, die Textspalten breit, und sobald in
   einer Zelle zwei Zeilen stehen, wächst die ganze Zeile mit. Das sah
   nach Absicht aus und war keine.

   Zahlen und Beträge stehen rechts und brechen nicht um — eine
   umgebrochene Frankenzahl ist keine mehr. Text oben ausgerichtet,
   damit mehrzeilige Zellen nicht die Nachbarn nach unten ziehen. */
table.tbl{width:100%;border-collapse:collapse;font-size:13px;}
table.tbl th{
  text-align:left;font-weight:600;font-size:11.5px;letter-spacing:.02em;
  color:var(--muted);padding:6px 10px;white-space:nowrap;
  border-bottom:1px solid var(--line);
}
table.tbl td{padding:7px 10px;border-bottom:1px solid var(--line-soft);vertical-align:top;}
table.tbl tr:last-child td{border-bottom:none;}
table.tbl th:nth-child(n+4), table.tbl td:nth-child(n+4){
  text-align:right;white-space:nowrap;
}
table.tbl td:nth-child(1){white-space:nowrap;}
table.list{width:100%;border-collapse:collapse;font-size:14px;min-width:520px;}
table.list th{
  background:var(--navy);color:#fff;text-align:left;padding:10px 12px;font-size:12px;
  text-transform:uppercase;letter-spacing:.03em;
}
table.list th:first-child{border-radius:8px 0 0 0;} table.list th:last-child{border-radius:0 8px 0 0;}
table.list td{padding:10px 12px;border-bottom:1px solid var(--line-soft);}
table.list tr:nth-child(even) td{background:var(--bg);}
table.list tr:hover td{background:#eef6fd;}
.num{text-align:right;font-variant-numeric:tabular-nums;}
.empty{padding:30px;text-align:center;color:var(--muted);font-size:14px;}

.badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700;}
.b-entwurf{background:#e2e8f0;color:#475569;}
.b-offen{background:#fef3c7;color:#92400e;}
.b-bezahlt{background:#dcfce7;color:#166534;}
.b-storniert{background:#fee2e2;color:#991b1b;}
/* Etappe 6e · Offerten. «angenommen» gruen wie bezahlt, «abgelehnt» rot,
   «abgelaufen» und «ersetzt» neutral: beides ist kein Misserfolg, nur
   erledigt. Kontrast je gegen den eigenen Grund geprueft (WCAG AA). */
.b-angenommen{background:#dcfce7;color:#166534;}
.b-abgelehnt{background:#fee2e2;color:#991b1b;}
.b-abgelaufen{background:#f1f5f9;color:#475569;}
.b-ersetzt{background:#e0e7ff;color:#3730a3;}

/* ─── Startbildschirm (keine DB) ─────────────────────────────────── */
.welcome{max-width:560px;margin:8vh auto;text-align:center;}
.welcome .card-body{padding:34px;}
.welcome h1{color:var(--navy);}
.welcome p{color:var(--muted);}

/* ─── Modal ──────────────────────────────────────────────────────── */
.modal-bg{position:fixed;inset:0;background:rgba(5,38,61,.5);display:flex;
  align-items:flex-start;justify-content:center;padding:5vh 16px;z-index:50;overflow:auto;}
.modal{background:#fff;border-radius:12px;width:100%;max-width:920px;box-shadow:0 20px 50px rgba(0,0,0,.3);}
.modal .card-head{border-radius:12px 12px 0 0;}
.modal-foot{padding:16px 22px;border-top:1px solid var(--line-soft);display:flex;gap:10px;justify-content:flex-end;}
.hidden{display:none !important;}

/* ─── Anmeldung (15.1b) ─────────────────────────────────────────── */
.anmelde-bg{position:fixed;inset:0;background:rgba(5,38,61,.62);z-index:8000;display:flex;
  align-items:flex-start;justify-content:center;padding:6vh 16px;overflow:auto;}
.anmelde{background:#fff;border-radius:12px;width:100%;max-width:520px;padding:24px 26px 20px;
  border-top:5px solid var(--navy);box-shadow:0 20px 50px rgba(0,0,0,.3);}
.anmelde h2{margin:0 0 6px;font-size:19px;color:var(--navy);}
.anmelde p{line-height:1.6;}
.anmelde-schritt{margin:0 0 10px;font-size:12px;font-weight:600;color:var(--muted);}
.anmelde .anmelde-hint{margin-left:0;line-height:1.6;}
.anmelde-meldung{color:var(--err);font-weight:600;min-height:1.2em;margin:10px 0 0;}
.anmelde-knoepfe{justify-content:flex-end;margin-top:14px;}
.anmelde-qr{width:200px;height:200px;margin:8px auto;background:#fff;}
.anmelde-qr img,.anmelde-qr canvas{display:block;width:200px;height:200px;}
.anmelde-code{font-family:Consolas,"Courier New",monospace;font-size:15px;letter-spacing:1px;word-break:break-all;
  background:var(--line-soft);color:#1e293b;padding:8px 10px;border-radius:6px;}
.anmelde-schluessel{font-size:17px;line-height:1.7;}
.anmelde-einmal{columns:2;list-style:none;padding:0;font-family:Consolas,"Courier New",monospace;font-size:16px;line-height:1.9;}
.anmelde-check{display:flex;gap:8px;align-items:center;font-weight:400;margin-top:12px;}
.anmelde-check input{width:auto;}
.anmelde-liste{line-height:1.7;padding-left:20px;}

/* ─── Toast ──────────────────────────────────────────────────────── */
#toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);
  background:var(--navy);color:#fff;padding:11px 20px;border-radius:8px;font-size:14px;
  box-shadow:0 8px 24px rgba(0,0,0,.3);opacity:0;transition:.25s;pointer-events:none;z-index:99;}
#toast.show{opacity:1;}

/* ─── Responsive ─────────────────────────────────────────────────── */
@media(max-width:760px){
  .sidebar{width:64px;} .navbtn span.lbl{display:none;} .sidebar .hint{display:none;}
  .grid2,.grid3{grid-template-columns:1fr;}
  .content{padding:18px;}
  /* Fenster mit mehreren Feldern nebeneinander brechen ebenfalls um —
     `.grid2/.grid3` deckte nur einen Teil ab; die Zeilen in den
     Belegmasken benutzen eigene Raster. */
  .row-actions{flex-wrap:wrap;}
  .modal-box{width:auto;max-width:96vw;}
  table.list{font-size:13px;}
  table.list th, table.list td{padding:8px 9px;}
}

/* ─── Barrierefreiheit: sichtbarer Tastatur-Fokus (WCAG 2.1 AA) ──────
   Sichtbarer Fokusring NUR bei Tastaturbedienung (:focus-visible),
   damit Maus-Klicks keinen Ring zeigen, Tab-Navigation aber schon.
   Deckt Buttons, Navbuttons und Links ab (Inputs haben eigenen Ring). */
:focus-visible{outline:3px solid var(--teal);outline-offset:2px;}
.btn:focus-visible,.navbtn:focus-visible{outline:3px solid var(--teal);outline-offset:2px;}
/* aktive Ansicht in der Navigation zusätzlich markiert */
.navbtn[aria-current="page"]{position:relative;}

/* Bewegung reduzieren, wenn vom Nutzer gewünscht */
/* ─── 14.6 · Bedienung mit dem Finger ────────────────────────────────
   Gemessen bei 390 px (pruef-handy.js): «Adresse kopieren» und «Karte
   öffnen» waren 33 px hoch, Kontrollkästchen und Auswahlfelder 38 px.
   Apple nennt 44 pt als Mindestmass, Google 48 dp — darunter trifft man
   mit dem Daumen daneben, und zwar auf genau den Knöpfen, die man
   unterwegs braucht.

   `pointer:coarse` statt einer Breite: es geht um den Finger, nicht um
   den Schirm. Ein Tablet mit 1024 px wird ebenso mit dem Finger bedient,
   eine Maus an einem schmalen Fenster nicht. */
@media (pointer:coarse){
  .btn, .btn-sm, input, select, textarea{ min-height:44px; }
  .btn-sm{ padding:8px 14px; font-size:13px; }
  input[type=checkbox], input[type=radio]{ min-height:0; width:24px; height:24px; }
  label{ line-height:1.5; }
  /* Zeilen in den Belegmasken: mehr Luft zwischen den Feldern, sonst
     trifft der Daumen die Nachbarzeile. */
  .row-actions{ gap:10px; }
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important;}
}