/*!
 * sc-corners.css — Platz fuer die beiden schwebenden Eckknoepfe, WAAGERECHT.
 *
 * ANLASS (04.09.2026, Inhaber): "nutzt die ganze Hoehe des Telefons — macht
 * clever Platz fuer die zwei Knoepfe in den Ecken, auf jedem Widget und jeder
 * Seite."
 *
 * Bis dahin reservierte die Huelle einen 50px hohen Streifen ueber die VOLLE
 * Breite (TOP_CHROME_PX). Belegt sind davon aber nur zwei Ecken von je 54px:
 * der Team-Chat oben links (sc-chat-dock.css) und die Glocke oben rechts
 * (sc-notif-bell.css) — bei 393px Bildschirmbreite bleiben 285px dazwischen
 * voellig frei und waren trotzdem schwarz. Das Problem ist waagerecht, die
 * Loesung war senkrecht.
 *
 * Jetzt: senkrecht reserviert die Huelle nur noch den Ausschnitt-Rand (Notch),
 * und die Elemente, die tatsaechlich im obersten 50px-Band liegen, ruecken
 * links und rechts um die Eckbreite ein.
 *
 * ZWEI ENTSCHEIDUNGEN, die den Umfang klein halten:
 *
 * 1. Es wird NUR das Element eingerueckt, das wirklich im Band liegt — nicht
 *    der ganze Kasten. Bei einer umbrechenden Werkzeugleiste ist das die erste
 *    Zeile (das Suchfeld); alles, was in Zeile 2 umbricht, liegt bereits
 *    unterhalb von 50px und behaelt die volle Breite. Sonst waere jede Leiste
 *    dauerhaft 108px schmaler, auch dort, wo es nichts zu schuetzen gibt.
 *
 * 2. Alle Regeln stehen in DIESER Datei, nicht verstreut in 13 Widgets. Die
 *    Widgets binden sie nur ein. Wer wissen will, wo ueberall Platz fuer die
 *    Ecken gemacht wird, liest eine Datei.
 *
 * `!important` ist hier kein Holzhammer: die Haelfte der Widgets nutzt das
 * Tailwind-Play-CDN, und dessen <style> haengt NACH dem widget-eigenen <style>
 * im Dokument — eine Utility wie `px-3` gewinnt sonst jeden Gleichstand.
 *
 * DIE ZAHLEN stehen doppelt: hier und als TOP_CHROME_PX / CORNER_W_PX in
 * pwa-shell.js (plus navbar.js fuer die vier Seiten ohne pwa-shell.js). Eine
 * CSS-Variable der Huelle reicht NICHT ueber die iframe-Grenze, deshalb muss
 * das Widget die Zahl selbst kennen. harness/shell-vertikalraum.test.js haelt
 * alle Fundstellen gegeneinander fest.
 */

:root {
  /* Am Rechner gibt es die schwebenden Knoepfe nicht — dort ist der Korridor 0. */
  --sc-corner-w: 0px;
  --sc-corner-h: 0px;
}

@media (max-width: 600px) {
  :root {
    /* 12px Rand + 40px Knopf + 2x1px Rahmen = 54px Breite, 8+40+2 = 50px Hoehe. */
    --sc-corner-w: 54px;
    --sc-corner-h: 50px;
  }

  /* ── Werkzeugleisten mit Suchfeld ────────────────────────────────────────
     AdminBrowseWidget, LeadsWidget, ClientBrowseWidget. Das Suchfeld nimmt am
     Telefon die ganze erste Zeile (`flex: 1 1 100%` bzw. eine Basis breiter als
     der halbe Bildschirm) — beide Knoepfe lagen also darauf. Genau diese Stelle
     nennt pwa-shell.js seit jeher als Grund fuer den Streifen ("liegen sie auf
     dem Suchfeld"). Eingerueckt wird nur das Suchfeld: die Knopfzeilen darunter
     brechen unterhalb des Bandes um und behalten die volle Breite. */
  .toolbar > .search-container {
    margin-inline: var(--sc-corner-w) !important;
  }

  /* ── Personenakte: die Kopfleiste klebt im App-Modus dauerhaft oben ──────
     Rechts liegt das Ueberlaufmenue mit Loeschen und DSGVO-Anonymisierung, links
     der Zurueck-Knopf. Weil die Leiste klebt, hilft hier kein Streifen weiter
     oben — die Einrueckung ist die einzige wirksame Stelle. */
  .detail-view-header {
    padding-inline: calc(14px + var(--sc-corner-w)) !important;
  }

  /* ── Verwaltung: Suche links, "Weitere Aktionen" rechts, eine Zeile ──────
     `.mw-head-row` ist `flex-wrap: nowrap`, es liegt also ALLES im Band. Die
     Glocke deckte den Knopf "Weitere Aktionen" fast vollstaendig zu. */
  .mw-head-row {
    padding-inline: var(--sc-corner-w) !important;
  }

  /* ── Dashboard: links war schon frei, rechts stand der Aktualisieren-Knopf
     an der Kante. Die Einrueckung stand hier bisher als feste 52px nur links —
     jetzt beidseitig und aus derselben Quelle wie alle anderen.
     Seit 21.10.2026 gibt es keine Begruessung und keine Knoepfe mehr im Kopf: er
     ist nur noch die Ueberschrift „Nächste Schicht“, und die liegt im Band. */
  #dashHeaderRow {
    padding-inline: var(--sc-corner-w) !important;
    min-height: 40px;
    display: flex;
    align-items: center;
  }

  /* ── Schichtplan: das VORBILD. Loeste es als erstes, mit zwei hartkodierten
     Zahlen (52px links, 3rem rechts). Jetzt dieselbe Quelle wie der Rest. */
  #calNav {
    padding-inline: var(--sc-corner-w) !important;
  }

  /* ── Reine Ueberschriften-Kopfzeilen ─────────────────────────────────────
     Hier liegt nichts Antippbares in den Ecken, nur Text (und beim Willkommen
     rechts der Schrittzaehler). Ohne Einrueckung wuerde die Ueberschrift unter
     den Knoepfen angeschnitten — kein Bedienfehler, aber unsauber, und der
     Inhaber hat ausdruecklich "auf jedem Widget" gesagt. */
  .sc-corner-row {
    padding-inline: calc(var(--sc-corner-base, 0px) + var(--sc-corner-w)) !important;
  }
}