/* mein-fretus · Tagesrapport — self-contained, auf .tgr- gescoped.
   Bewusst KEINE Klassen aus bohrprotokoll-mf.css: das Modul steht eigenstaendig
   und darf nicht kaputtgehen, wenn dort jemand aufraeumt.

   Mobil zuerst. Zwei Regeln, ohne die es auf dem Telefon bricht:
   - Felder brauchen width:100%. Ohne das gewinnt die Eigenbreite von
     <input type=date> und <select>, und die ist auf iOS breiter als eine
     halbe Telefonspalte.
   - Spuren sind minmax(0,1fr), nicht 1fr. 1fr heisst minmax(auto,1fr) und
     kann nicht unter die Inhaltsbreite schrumpfen — die Picker-Trigger mit
     langen Geraetenamen sprengen sonst das Raster.
   Beides faellt nicht als Scrollbalken auf, weil die Shell body{overflow-x:hidden}
   setzt: es wird stumm abgeschnitten. */

.tgr-head { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.tgr-head h2 { margin:0; font-size:20px; color:var(--fa-text); }
.tgr-net { margin-left:auto; flex:0 0 auto; font-size:11px; font-weight:600; padding:2px 9px; border-radius:99px; }
.tgr-net.on  { background:#e8f5e9; color:var(--fa-ok); }
.tgr-net.off { background:#fdeaea; color:var(--fa-error); }

.tgr-intro { margin:0 0 14px; font-size:13px; line-height:1.5; color:var(--fa-muted); }
.tgr-dim   { color:var(--fa-muted); }
.tgr-new   { width:100%; margin-bottom:14px; }
.tgr-sync  { width:100%; margin-top:14px; }
.tgr-hint  { font-size:12px; color:var(--fa-muted,#94a3b8); padding:8px 10px; margin-bottom:10px;
             border:1px dashed var(--fa-border,#dbe2ea); border-radius:8px; background:#fafcfe; }

.tgr-list { display:flex; flex-direction:column; gap:10px; }

.tgr-card { background:#fff; border:1px solid var(--fa-border); border-radius:12px; overflow:hidden; }

/* Kopfzeile: umbrechen statt abschneiden. Geraetenamen wie
   «Sondierbohrgeraet Ghelmina-Ralla» passen auf 320px sonst nicht neben das Datum. */
.tgr-card > summary { list-style:none; cursor:pointer; padding:13px 14px;
                      display:flex; align-items:center; flex-wrap:wrap; gap:4px 10px;
                      font-weight:600; font-size:15px; }
.tgr-card > summary::-webkit-details-marker { display:none; }
.tgr-datum  { flex:0 0 auto; color:var(--fa-cyan-dark); }
.tgr-geraet { flex:1 1 8em; min-width:0; color:var(--fa-muted); font-weight:400; font-size:13px;
              overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tgr-del    { flex:0 0 auto; margin-left:auto; color:var(--fa-error); font-weight:700;
              padding:4px 8px; border-radius:6px; }
.tgr-del:active { background:#fdeaea; }

.tgr-pill  { flex:0 0 auto; display:inline-block; padding:2px 9px; border-radius:99px; font-size:11px; font-weight:600; }
.tgr-dirty { background:#fff3e0; color:#b45309; }
.tgr-err   { background:#fdeaea; color:var(--fa-error); }
.tgr-frei  { background:#e8f5e9; color:#166534; }

.tgr-kopf   { padding:0 14px 6px; font-size:12.5px; color:var(--fa-muted); overflow-wrap:anywhere; }
.tgr-errbox { margin:0; padding:9px 14px; background:#fdeaea; color:#991b1b;
              font-size:12.5px; line-height:1.4; overflow-wrap:anywhere; }

/* Eingabe-Raster: zwei Spalten schon auf dem Telefon, wie im Bohrprotokoll —
   einspaltig waere die Karte ueber 1000px hoch und der Bohrmeister scrollt
   fuer zwei Zahlen. Die Ausnahme ist das Datumsfeld: Chromium braucht dafuer
   rund 260px, darunter faellt das Kalendersymbol weg und das Jahr wird
   abgeschnitten. Es bekommt bis 420px die volle Breite. */
.tgr-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px 12px; padding:4px 14px 16px; }
/* .tgr-feld ist der label-lose Zwilling fuer Felder mit eigenem Widget:
   ein <label> wuerde den Klick an den Picker-Trigger weiterreichen und das
   Oeffnen damit aufheben. Gleiche Optik, anderes Element. */
.tgr-grid label, .tgr-grid .tgr-feld {
  display:flex; flex-direction:column; gap:4px; min-width:0;
  font-size:12px; color:var(--fa-muted); font-weight:600; }
.tgr-grid label.tgr-wide, .tgr-grid .tgr-feld.tgr-wide { grid-column:1 / -1; }
.tgr-grid .tgr-label { font:inherit; color:inherit; }
.tgr-grid input, .tgr-grid select {
  width:100%; max-width:100%; min-width:0;
  padding:11px 12px; border:1px solid var(--fa-border); border-radius:9px;
  font-size:16px;                    /* 16px = kein iOS-Zoom beim Fokus */
  color:var(--fa-text); background:#fff; font-family:inherit; font-weight:400; }
.tgr-grid input:focus, .tgr-grid select:focus { outline:2px solid var(--fa-cyan); border-color:var(--fa-cyan); }
.tgr-grid input:disabled, .tgr-grid select:disabled { background:#f6f8fa; color:var(--fa-muted); }

/* Die Picker montieren ihr eigenes Markup in dieses div — ohne min-width:0
   schiebt ihr Trigger die Rasterspur auf. */
.tgr-grid [data-tgr-obj], .tgr-grid [data-tgr-geraet] { min-width:0; max-width:100%; }

/* Unter 420px steht Schicht sonst allein in der halben Spalte, weil Datum die
   ganze Zeile braucht. Volle Breite kostet dort keine einzige Zeile mehr. */
@media (max-width: 420px) { .tgr-grid label.tgr-datum-f,
                            .tgr-grid label.tgr-schicht-f { grid-column:1 / -1; } }
@media (min-width: 640px)  { .tgr-grid { grid-template-columns:repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .tgr-grid { grid-template-columns:repeat(4, minmax(0, 1fr)); } }

/* Herkunftshinweis unter einem Feld (z.B. «aus der Disposition uebernommen»). */
.tgr-feldhinweis { font-size:11.5px; font-weight:400; line-height:1.35; color:var(--fa-muted); margin-top:2px; }