/* =============================================================
   assistent24.ch — GEMEINSAMES AUSSEHEN für alle Tools
   Vorlage: Sidebar der Buchhaltung. Hier zentral pflegen —
   Änderungen wirken sofort auf Start, Telefon/Kalender,
   Buchhaltung und KI-Berater.
   Wird über <link rel="stylesheet" href="gemeinsam.css"> geladen
   und steht NACH den seiteneigenen Stilen, damit es gilt.
   ============================================================= */

/* Bildlaufleiste immer einplanen -> kein Springen beim Seitenwechsel */
html { scrollbar-gutter: stable; }

/* ---------- Seitenleiste (identisch in allen Tools) ---------- */
.side, .sidenav {
  width: 240px;
}
.side .brand, .sidenav .sbrand, .app .sbrand {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 18px 18px 14px;
}
/* Logo-Box exakt so breit wie das Logo selbst (30px) — sonst starten Logo und
   Text in der Buchhaltung 4px weiter rechts als in den anderen Tools. */
.side .brand .logo, .sidenav .sbrand .logo, .app .sbrand .logo {
  width: 30px;
  height: 21px;
  flex: none;
}
.side .sbname, .sidenav .sbname, .app .sbname {
  font-weight: 800;
  letter-spacing: -.3px;
  font-size: 16px;
}
.side .sbsub, .sidenav .sbsub, .app .sbsub {
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
}
/* Menü-Container überall gleich: kein Flex-Abstand, der Abstand kommt
   einheitlich aus margin-bottom der Einträge (wie in der Buchhaltung). */
.side .nav, .sidenav .snav, .app .snav {
  padding: 8px;
  display: block;
  gap: 0;
  overflow-y: auto;
}
.side .nav a, .sidenav .snav a, .sidenav .snav button, .app .snav a {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  gap: 10px;
  padding: 12px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  margin-bottom: 2px;
}
.side .nav .sep, .sidenav .snsep, .app .snsep {
  height: 1px;
  margin: 8px 12px;
  background: var(--line);
}

/* ---------- Kleinigkeiten, die überall gleich sein sollen ---------- */
.avatar, .uava, .side .avatar {
  cursor: pointer;
}

/* =============================================================
   DESIGN-POLITUR — ruhiger, sachlicher, geschäftlicher Auftritt.
   Gilt für alle Tools. Hier zentral anpassen.
   ============================================================= */

/* Typografie: klare Hierarchie, weniger „laut" */
.h1{font-size:22px;font-weight:700;letter-spacing:-.3px;margin:2px 0 4px;line-height:1.25}
.sub{font-size:13.5px;color:var(--muted);margin:0 0 18px;line-height:1.45}
.panel h3,.card h3{font-size:15px;font-weight:700;letter-spacing:-.1px}

/* Karten: dezenter Rand statt kräftigem Schatten */
.card,.panel{border-radius:12px}
.card{border:1px solid var(--line);box-shadow:0 1px 2px rgba(16,24,40,.04)}
[data-theme="dark"] .card{box-shadow:none}

/* Tabellen: ruhige Kopfzeile, feine Linien, mehr Luft */
table{border-collapse:collapse;width:100%}
table th{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted);text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
table td{padding:12px;border-bottom:1px solid var(--line);font-size:13.5px;vertical-align:middle}
table tr:last-child td{border-bottom:0}
table tbody tr:hover{background:rgba(127,127,127,.035)}

/* Leere Zustände: freundlich statt kahl */
.empty{color:var(--muted);font-size:13.5px;text-align:center;padding:26px 16px;line-height:1.5}

/* Formularfelder & Buttons einheitlich */
input,select,textarea{font-family:inherit;font-size:14px}
label{font-size:12.5px;font-weight:600;color:var(--muted)}
.btn,button.btn{border-radius:9px;font-weight:600;letter-spacing:0}
.btn.sm,button.sm{font-size:12.5px}

/* Statuspillen ruhiger */
.badge,.pill{font-weight:600;letter-spacing:.01em}

/* =============================================================
   MOBILE: untere Navigationsleiste (wie eine native App).
   Der Daumen erreicht sie — kein Umweg über das Hamburger-Menü.
   ============================================================= */
.mobnav{display:none}
@media(max-width:900px){
  .mobnav{
    display:flex;align-items:center;justify-content:space-around;
    position:fixed;left:0;right:0;bottom:0;z-index:80;
    height:62px;padding-bottom:env(safe-area-inset-bottom);
    background:var(--card,#fff);border-top:1px solid var(--line);
    box-shadow:0 -2px 14px rgba(16,24,40,.06);
  }
  .mobnav-i{
    flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    color:var(--muted);text-decoration:none;font-size:10.5px;font-weight:600;
    padding:6px 2px;min-width:0;
  }
  .mobnav-i span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .mobnav-i.on{color:var(--brand,#2563eb)}
  .mobnav-i.on svg{stroke-width:2.1}
  /* Schwebender Hauptknopf in der Mitte */
  .mobnav-fab{
    flex:none;width:56px;height:56px;margin-top:-24px;border:0;border-radius:50%;
    background:var(--brand,#2563eb);color:#fff;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 8px 20px -4px rgba(37,99,235,.55);
  }
  .mobnav-fab:active{transform:scale(.94)}
  /* Platz schaffen, damit die Leiste nichts verdeckt */
  body{padding-bottom:calc(62px + env(safe-area-inset-bottom))}
  /* Grössere Touch-Ziele und ruhigere Kopfzeilen auf dem Handy */
  .btn,button.btn{min-height:42px}
  .h1{font-size:20px}
  .card,.panel{border-radius:12px}
  .wrap{padding-left:16px;padding-right:16px}
}

/* --- Tabellen auf dem Handy als Karten (Beschriftungen setzt mobilnav.js) --- */
@media(max-width:760px){
  .tablewrap{overflow:visible}
  /* min-width:0 ist die Absicherung: einzelne Seiten setzen Tabellen eine
     Mindestbreite (z.B. 560px), was den Querscroll erzwingen würde. */
  .tablewrap table,.tablewrap tbody,.tablewrap tr,.tablewrap td{display:block;width:auto;min-width:0}
  .tablewrap td>*{min-width:0}
  .tablewrap thead{display:none}
  .tablewrap tr{
    border:1px solid var(--line);border-radius:12px;background:var(--card);
    padding:10px 13px;margin-bottom:10px;
  }
  .tablewrap tbody tr:hover{background:var(--card)}
  .tablewrap td{
    border:0;padding:6px 0;display:flex;align-items:center;justify-content:space-between;
    gap:12px;white-space:normal;font-size:14px;
  }
  .tablewrap td::before{
    content:attr(data-l);flex:none;color:var(--muted);
    font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  }
  .tablewrap td:not([data-l])::before{content:none}
  /* Aktionsknöpfe unten in der Karte, über die volle Breite */
  .tablewrap td:last-child{
    display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-start;
    border-top:1px solid var(--line);margin-top:6px;padding-top:10px;
  }
  .tablewrap td:last-child::before{display:none}
  .tablewrap td:last-child .btn{flex:1;min-width:88px}
  /* Panels im Dashboard haben bewusst kein Innenpolster (das kommt sonst aus
     der Tabelle). Ohne diesen Ausgleich klebten die Karten am Panelrand. */
  .panel>.tablewrap{padding:0 12px 10px}
}

/* --- Kopfzeile und Schnellaktionen auf dem Handy entschlacken --- */
@media(max-width:640px){
  .top{padding:10px 14px}
  .top .who{display:none}          /* Name steht schon im Avatar */
  #logout{display:none}            /* Abmelden ist im Profilmenü */
  .qa{grid-template-columns:1fr 1fr}   /* 2x2 statt 3 enge Spalten */
  .qa a{padding:18px 8px;font-size:13.5px}
  .chips{grid-template-columns:1fr 1fr}
  .k4,.k2{grid-template-columns:1fr 1fr}
  .kpi .val{font-size:22px}
}

/* Vollhöhen-Layouts dürfen nicht unter die Leiste laufen */
@media(max-width:900px){
  body.hat-mobnav .app,
  body.hat-mobnav .main{min-height:calc(100vh - 62px)}
  body:not(.hat-mobnav){padding-bottom:0}
}

/* =============================================================
   MOBIL KOMPAKT — gegen "eng, überfüllt, viel Seitwärtsscrollen".
   Leitgedanke (wie KIDesk): auf dem Handy nichts horizontal
   wegschieben. Alles was scrollt, bricht stattdessen um oder
   stapelt sich. Dazu straffere Schriftgrössen und Abstände.
   ============================================================= */
@media(max-width:760px){

  /* 2) Seitenkopf straffen: Titel kleiner, Beschreibung auf zwei
        Zeilen begrenzt statt vier — das war der grösste Platzfresser. */
  .h1{font-size:19px;margin:2px 0 3px}
  .sub{
    font-size:12.5px;line-height:1.4;margin:0 0 12px;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  }

  /* 3) Kennzahlen-Karten: das Zierbild raus, Zahl darf nicht umbrechen.
        Vorher stand "CHF -1'690.46" auf zwei Zeilen. */
  .kpi{padding:12px 13px}
  .kpi .ico{display:none}
  .kpi .lab{font-size:11.5px;margin-bottom:4px;max-width:100%;line-height:1.3}
  .kpi .val{font-size:18px;letter-spacing:-.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .cards4,.k4{gap:10px}

  /* 4) Offerten-Pipeline: Spalten untereinander statt nebeneinander */
  .pipe{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:1fr;overflow-x:visible}
  .pcol{min-height:0}

  /* 5) Formulare: kompaktere Felder und Beschriftungen */
  input,select,textarea{padding:9px 11px;font-size:15px}  /* 15px: Safari zoomt sonst beim Tippen */
  label{font-size:12px}
  .frow{gap:10px;margin-bottom:10px}

  /* 6) Knöpfe schlanker, damit lange Beschriftungen einzeilig bleiben
        ("In Rechnung umwandeln" stand vorher auf drei Zeilen) */
  .btn,button.btn{padding:9px 13px;font-size:13px;min-height:40px}
  .btn.sm,button.sm{padding:7px 11px;font-size:12.5px;min-height:34px}

  /* 7) Kopfzeile: kleinere Symbolknöpfe, weniger Luft */
  .top,.mtop{padding:9px 14px;gap:7px}
  .iconbtn{width:34px;height:34px;font-size:15px}
  .avatar,.uava{width:32px;height:32px;font-size:12px}

  /* 8) Überschriften in Karten etwas kleiner. Das Innenpolster regelt jede
        Seite selbst — dashboard.html hat bewusst Panels ohne Polster
        (der Abstand kommt dort aus h3 und der Tabelle). */
  .panel h3,.card h3{font-size:14.5px}
  .content{padding-top:10px}

  /* 9) Grundsatz: nichts schiebt die Seite in die Breite */
  body{overflow-x:hidden}
}


/* Tab-Leisten brechen um, sobald die Seitenleiste weicht (gleicher
   Umbruchpunkt, 900px). Sonst scrollt die Leiste auf Tablets wieder
   seitwärts, obwohl daneben Platz frei ist. */
@media(max-width:900px){
  .subtabs{flex-wrap:wrap;overflow-x:visible;gap:5px;padding:11px 16px 2px}
  .subtabs button{padding:6px 11px;font-size:12.5px;flex:0 0 auto}
}

/* Tablet-Bereich (Handy-Navigation, aber noch echte Tabellen):
   Vier Kennzahlen brachen dort in 3+1 um — die einzelne Kachel in der
   zweiten Reihe wirkte wie ein Fehler. Zwei mal zwei liegt ruhiger. */
@media(min-width:761px) and (max-width:900px){
  .grid,.cards4,.k4{grid-template-columns:1fr 1fr}
  .btn.sm,button.sm{padding:6px 10px;font-size:12px}
}

/* =============================================================
   GROSSE BILDSCHIRME — einheitliche Lesebreite.
   Vorher liefen die Werkzeuge unterschiedlich breit (1080 / 1160 /
   1240 px); beim Wechsel sprang die Seite sichtbar. Eine Breite für
   alle: der Wechsel zwischen den Modulen fühlt sich wie eine App an.
   Der KI-Berater bleibt schmaler — Fliesstext liest sich so besser.
   ============================================================= */
@media(min-width:901px){
  .wrap{max-width:1200px}
  .content{max-width:1200px}
  .chatwrap{max-width:900px}            /* Chat des KI-Beraters: schmaler lesen */

  /* Kennzahlen: lieber vier breite Kacheln als sechs schmale */
  .grid{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
}

/* Sehr breite Schirme: etwas mehr Luft am Rand, Inhalt bleibt zentriert */
@media(min-width:1500px){
  .wrap,.content{padding-left:32px;padding-right:32px}
}

/* =============================================================
   ICONS — ersetzen die früheren Emojis (siehe icons.js).
   Sie erben die Textfarbe: farbig hinterlegte Kacheln bleiben
   damit farbig, die Seitenleiste bleibt ruhig und einfarbig.
   ============================================================= */
.a24ic{
  display:inline-block;vertical-align:-.16em;flex:none;
  width:1.15em;height:1.15em;          /* wächst mit der Schriftgrösse mit */
}
/* Seitenleiste: etwas grösser und kräftiger, wie bei einer nativen App */
.side .nav a .a24ic,.sidenav .snav a .a24ic,.app .snav a .a24ic{
  width:20px;height:20px;stroke-width:1.75;opacity:.85;
}
.side .nav a.active .a24ic,.sidenav .snav a.active .a24ic,.app .snav a.active .a24ic{opacity:1;stroke-width:2}
/* In runden Symbolknöpfen mittig setzen */
.iconbtn .a24ic,.bellbtn .a24ic,.hamb .a24ic,.micbtn .a24ic{vertical-align:-.22em}
/* Kennzahl-Kacheln: das Icon füllt die farbige Fläche gut aus */
.kpi .ico .a24ic,.stat .ic .a24ic{width:20px;height:20px}
/* Grosse Zierflächen (Bestätigungshaken u.ä.) */
.haken .a24ic{width:100%;height:100%;stroke-width:2.4}

/* =============================================================
   SEITENLEISTE EINKLAPPEN (nur ab Laptop-Breite, siehe sidebar.js)
   Eingeklappt bleiben die Icons stehen — 68px statt 240px.
   Die Beschriftung wird über font-size:0 ausgeblendet; die Icons
   haben feste Pixelmasse und schrumpfen deshalb nicht mit.
   ============================================================= */
.sbtoggle{
  display:none;margin-left:auto;flex:none;
  width:28px;height:28px;border-radius:8px;
  border:1px solid var(--line);background:var(--card);color:var(--muted);
  cursor:pointer;align-items:center;justify-content:center;padding:0;
}
.sbtoggle:hover{color:var(--ink);background:rgba(127,127,127,.1)}

@media(min-width:901px){
  .sbtoggle{display:flex}

  .side,.sidenav{transition:width .18s ease}
  .main{transition:margin-left .18s ease}

  .sb-zu .side,.sb-zu .sidenav{width:68px;overflow:visible}
  .sb-zu .main{margin-left:68px}
  .sb-zu .side{--side:68px}

  /* Markenzeile: Logo mittig, Schriftzug weg */
  .sb-zu .sbrand,.sb-zu .brand{padding:16px 0 12px;justify-content:center;gap:0;position:relative}
  .sb-zu .sbname,.sb-zu .sbsub{display:none}
  /* Knopf schwebt am Rand, damit er die 68px nicht sprengt */
  .sb-zu .sbtoggle{
    position:absolute;right:-13px;top:18px;margin:0;z-index:5;
    background:var(--card);box-shadow:0 1px 4px rgba(16,24,40,.14);
  }

  /* Menüeinträge: nur noch Icon, mittig */
  .sb-zu .snav,.sb-zu .nav{padding:8px 10px}
  .sb-zu .snav a,.sb-zu .nav a,.sb-zu .snav button{
    justify-content:center;gap:0;padding:11px 0;font-size:0;
  }
  .sb-zu .snav a .a24ic,.sb-zu .nav a .a24ic{width:21px;height:21px;opacity:.9}
  .sb-zu .snav a.active .a24ic,.sb-zu .nav a.active .a24ic{opacity:1}
  .sb-zu .snsep,.sb-zu .nav .sep{margin:8px 8px}

  /* Fusszeile der Leiste (Nutzer, Abmelden) ebenfalls auf Icon-Breite */
  .sb-zu .side .foot,.sb-zu .sidenav .foot{padding:8px}
  .sb-zu .side .foot .uname,.sb-zu .sidenav .foot .uname{display:none}
}

/* =============================================================
   AUFKLAPPBARE INFO-TEXTE (siehe infos.js)
   Kleines „i" neben der Überschrift statt dauerhaft gelber Kästen.
   ============================================================= */
.hat-info{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.infobtn{
  flex:none;width:20px;height:20px;border-radius:50%;padding:0;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);background:transparent;color:var(--muted);
  transition:background .12s,color .12s,border-color .12s;
}
.infobtn:hover{color:var(--brand);border-color:var(--brand)}
.infobtn.auf{background:var(--brand);border-color:var(--brand);color:#fff}
/* Der Text selbst: ruhiger als der frühere gelbe Kasten */
.infobox{
  font-size:12.5px;line-height:1.55;color:var(--muted);
  background:rgba(127,127,127,.06);border:1px solid var(--line);
  border-radius:10px;padding:10px 12px;margin:8px 0 14px;
}
[data-theme="dark"] .infobox{background:rgba(255,255,255,.04)}

/* =============================================================
   BEREICHSWAHL (siehe bereichswahl.js)
   Handy: eine Zeile mit dem aktuellen Bereich, dahinter ein Blatt
   von unten. Laptop: die gewohnte Chip-Leiste, Zeile ausgeblendet.
   ============================================================= */
.bwahl{display:none}   /* Auswahlzeile: nur auf dem Handy sichtbar */

@media(max-width:900px){
  /* Chips weichen der einen Zeile */
  .subtabs[data-bereichs-wahl],.tabs[data-bereichs-wahl],.setnav[data-bereichs-wahl]{display:none}
  .bwahl{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    width:calc(100% - 32px);margin:12px 16px 4px;padding:11px 14px;
    border:1px solid var(--line);border-radius:11px;
    background:var(--card);color:var(--ink);
    font:600 14.5px/1.2 inherit;font-family:inherit;cursor:pointer;text-align:left;
  }
  .bwahl:active{background:rgba(127,127,127,.08)}
  .bwahl svg{flex:none;color:var(--muted)}

  /* Blatt von unten. Position und Ebene setzt das Skript direkt am Element,
     damit es auch bei veralteter Stildatei nicht quer über der Seite liegt.
     Hier steht nur das Aussehen. */
  .bwahl-schatten{
    background:rgba(2,6,15,.45);opacity:0;pointer-events:none;transition:opacity .18s;
  }
  .bwahl-schatten.offen{opacity:1;pointer-events:auto}
  .bwahl-blatt{
    background:var(--card);color:var(--ink);
    border-radius:16px 16px 0 0;box-shadow:0 -8px 32px rgba(0,0,0,.22);
    padding-bottom:env(safe-area-inset-bottom);
    transform:translateY(100%);transition:transform .22s cubic-bezier(.22,1,.36,1);
  }
  .bwahl-schatten.offen .bwahl-blatt{transform:translateY(0)}
  /* Griff-Andeutung wie bei nativen Blättern */
  .bwahl-blatt::before{
    content:"";position:absolute;top:8px;left:50%;transform:translateX(-50%);
    width:38px;height:4px;border-radius:99px;background:var(--line);
  }
  .bwahl-kopf{
    display:flex;align-items:center;justify-content:space-between;
    padding:20px 18px 12px;font-weight:700;font-size:15px;
    border-bottom:1px solid var(--line);
  }
  .bwahl-zu{
    border:0;background:transparent;color:var(--muted);
    font-size:26px;line-height:1;cursor:pointer;padding:0 4px;
  }
  .bwahl-liste{overflow-y:auto;padding:6px}
  .bwahl-e{
    display:flex;align-items:center;gap:10px;width:100%;
    padding:14px 12px;border:0;border-radius:10px;background:transparent;
    color:var(--ink);font:600 15px/1.2 inherit;font-family:inherit;
    cursor:pointer;text-align:left;
  }
  .bwahl-e:active{background:rgba(127,127,127,.1)}
  .bwahl-e.on{background:#eef4ff;color:var(--brand)}
  [data-theme="dark"] .bwahl-e.on{background:#1e293b;color:#93c5fd}
  .bwahl-t{flex:1;min-width:0}
  .bwahl-z{
    flex:none;background:rgba(127,127,127,.14);color:var(--muted);
    border-radius:999px;padding:2px 9px;font-size:12px;font-weight:700;
  }
  .bwahl-e.on .bwahl-z{background:rgba(37,99,235,.16);color:var(--brand)}
  .bwahl-h{flex:none;display:flex;color:var(--brand)}
}

/* Einträge im „Neu"-Blatt (runder Knopf in der unteren Leiste) */
@media(max-width:900px){
  .neu-e{
    display:flex;align-items:center;gap:12px;width:100%;
    padding:13px 12px;border-radius:10px;text-decoration:none;color:var(--ink);
  }
  .neu-e:active{background:rgba(127,127,127,.1)}
  .neu-i{
    flex:none;width:38px;height:38px;border-radius:11px;
    display:flex;align-items:center;justify-content:center;
    background:rgba(37,99,235,.12);color:var(--brand);
  }
  .neu-t{display:flex;flex-direction:column;min-width:0}
  .neu-t b{font-size:15px;font-weight:600}
  .neu-t small{font-size:12.5px;color:var(--muted);line-height:1.35}
  /* Leerer Platz in der Leiste: hält die Breite, zeigt aber nichts */
  .mobnav-i.leer{pointer-events:none}
}

/* =============================================================
   IOS-ZOOM BEIM TIPPEN VERHINDERN
   Safari zoomt in jedes Eingabefeld, dessen Schrift kleiner als
   16px ist — und zoomt danach nicht wieder heraus. Die Seite wirkt
   dann kaputt. Deshalb auf dem Handy überall mindestens 16px.
   Steht bewusst am Ende der Datei, damit es alles überstimmt.
   ============================================================= */
@media(max-width:900px){
  input:not([type=color]):not([type=checkbox]):not([type=radio]):not([type=range]),
  select,textarea,
  .asfeld textarea,.composer textarea,.sz-platz select,#login input,.askbar input{
    font-size:16px;
  }
  /* Die Schrift wächst, die Höhe soll nicht mitwachsen.
     Farbwähler, Schalter und Regler bleiben aussen vor — die haben
     eigene feste Masse und würden von einem Innenabstand zerlegt. */
  input:not([type=color]):not([type=checkbox]):not([type=radio]):not([type=range]),
  select{padding-top:10px;padding-bottom:10px}
}