/* ============================================================
   md3-kit.css — Einheitliches Material-Design-3-Formkit (Outlined)
   ------------------------------------------------------------
   ADDITIV & OPT-IN: wirkt ausschliesslich auf Elemente mit
   .m3-* Klassen. Native <input>/<textarea>/<select> bleiben
   voll funktionsfaehig — id, Events (input/change/click) und
   .value sind unangetastet. Getoent ueber die aktive
   Designfarbe (--accent / --accent-rgb) mit sicheren Fallbacks.

   Markup-Muster (Textfeld):
     <div class="m3-field">
       <div class="m3-box">
         <input class="m3-input" placeholder=" ">
         <label class="m3-label">Beschriftung</label>
       </div>
       <div class="m3-help"><span>Hilfetext</span></div>   (optional, AUSSERHALB)
     </div>
   WICHTIG: das <input> braucht placeholder=" " (Leerzeichen),
   damit das schwebende Label korrekt funktioniert.
   Icons: <span class="material-symbols-rounded m3-lead">…</span>
          + Klasse .m3-has-lead auf .m3-field (analog m3-trail).
   ============================================================ */
:root{
  --m3-primary: var(--accent, #1d948f);
  --m3-primary-rgb: var(--accent-rgb, 29,148,143);
  --m3-ink:#17212b;
  --m3-mut:#5f7280;
  --m3-outline:#bcc7cc;
  --m3-field-bg:#ffffff;   /* Hintergrund HINTER dem Feld — fuer den Label-Notch; pro Kontext ueberschreibbar */
  --m3-error:#ba1a1a;
  --m3-secondary-container: rgba(var(--m3-primary-rgb), .14);
  --m3-on-secondary-container: var(--m3-primary);
  --m3-surface-3:#eef3f2;
}

/* ---------- Suchleiste (MD3 Search bar) ----------
   Eine eigene Komponente, kein Textfeld mit Etikett. MD3 trennt das
   bewusst: eine Suche traegt einen BLEIBENDEN Hinweis, weil der
   Hinweis die Beschreibung des Feldes ist. Ein Etikett, das beim
   Tippen hochfliegt, nimmt genau diese Beschreibung weg.

   Markup:
     <div class="m3-such m3-such-dicht has-text">
       <span class="material-symbols-rounded m3-such-ic">search</span>
       <input class="m3-such-in" placeholder="Apps suchen">
       <button class="m3-such-x" type="button">
         <span class="material-symbols-rounded">close</span></button>
     </div>
   Das × zeigt sich nur mit .has-text auf der Huelle.

   Farben kommen aus den m3-Marken und lassen sich je Umgebung
   umsetzen — in einer dunklen Leiste braucht es andere als auf Weiss. */
.m3-such{
  display:flex; align-items:center; gap:10px;
  height:56px; padding:0 8px 0 16px;
  border-radius:28px;
  background:var(--m3-such-bg, var(--m3-surface-3));
  color:var(--m3-such-ink, var(--m3-ink));
  box-shadow:inset 0 0 0 1px var(--m3-such-rand, transparent);
  transition:box-shadow .14s, background .14s;
}
.m3-such:focus-within{
  box-shadow:inset 0 0 0 2px var(--m3-primary);
  background:var(--m3-such-bg-fokus, var(--m3-such-bg, var(--m3-surface-3)));
}
.m3-such-ic{ flex:none; font-size:24px; line-height:1; color:var(--m3-such-mut, var(--m3-mut)); }
.m3-such-in{
  all:unset; box-sizing:border-box; flex:1; min-width:0;
  font:inherit; font-size:16px; color:inherit;
  caret-color:var(--m3-primary);
}
.m3-such-in::placeholder{ color:var(--m3-such-mut, var(--m3-mut)); opacity:1; }
/* Chrome setzt in type="search" ein eigenes Kreuz — wir haben ein besseres. */
.m3-such-in::-webkit-search-cancel-button{ -webkit-appearance:none; appearance:none; }
.m3-such-x{
  all:unset; flex:none; display:none; place-items:center; cursor:pointer;
  width:40px; height:40px; border-radius:50%;
  color:var(--m3-such-mut, var(--m3-mut));
}
.m3-such.has-text .m3-such-x{ display:grid; }
.m3-such-x:hover{ background:var(--m3-secondary-container); color:var(--m3-primary); }
.m3-such-x:focus-visible{ outline:2px solid var(--m3-primary); outline-offset:-2px; }
.m3-such-x .material-symbols-rounded{ font-size:20px; line-height:1; }

/* Dicht — fuer Leisten, in denen alles andere auch 32 hoch ist.
   Die volle Hoehe von 56 wuerde die Sidebar erschlagen. */
.m3-such-dicht{ height:40px; padding:0 5px 0 12px; border-radius:20px; gap:8px; }
.m3-such-dicht .m3-such-ic{ font-size:19px; }
.m3-such-dicht .m3-such-in{ font-size:13px; }
.m3-such-dicht .m3-such-x{ width:30px; height:30px; }
.m3-such-dicht .m3-such-x .material-symbols-rounded{ font-size:17px; }

/* ---------- Textfeld / Textarea / Select ---------- */
.m3-field{ position:relative; text-align:start; }
.m3-field .m3-box{ position:relative; border-radius:4px; box-shadow:inset 0 0 0 1px var(--m3-outline); transition:box-shadow .12s; }
.m3-field:focus-within .m3-box{ box-shadow:inset 0 0 0 2px var(--m3-primary); }
.m3-input{ all:unset; box-sizing:border-box; width:100%; font:inherit; font-size:14px; color:var(--m3-ink);
  height:52px; padding:0 15px; caret-color:var(--m3-primary); }
textarea.m3-input{ height:auto; min-height:92px; padding:16px 15px; resize:vertical; line-height:1.45; display:block; }
.m3-label{ position:absolute; inset-block-start:14px; inset-inline-start:11px; padding-inline:4px; pointer-events:none;
  color:var(--m3-mut); font-size:14px; background:var(--m3-field-bg); transition:all .15s cubic-bezier(.2,0,0,1); }
.m3-lead{ position:absolute; inset-block-start:14px; inset-inline-start:13px; color:var(--m3-mut); font-size:20px; pointer-events:none; line-height:1; }
.m3-trail{ position:absolute; inset-block-start:14px; inset-inline-end:13px; color:var(--m3-mut); font-size:20px; cursor:pointer; line-height:1; }
.m3-field.m3-has-lead .m3-input{ padding-inline-start:44px; }
.m3-field.m3-has-lead .m3-label{ inset-inline-start:40px; }
.m3-field.m3-has-trail .m3-input{ padding-inline-end:44px; }
.m3-input:focus ~ .m3-label,
.m3-input:not(:placeholder-shown) ~ .m3-label{ inset-block-start:-8px; font-size:12px; color:var(--m3-primary); }
.m3-field.m3-has-lead .m3-input:focus ~ .m3-label,
.m3-field.m3-has-lead .m3-input:not(:placeholder-shown) ~ .m3-label{ inset-inline-start:11px; }
.m3-help{ font-size:11.5px; color:var(--m3-mut); margin-block-start:5px; padding-inline:15px; display:flex; justify-content:space-between; gap:8px; }
/* Fehler */
.m3-field.m3-err .m3-box{ box-shadow:inset 0 0 0 2px var(--m3-error); }
.m3-field.m3-err .m3-label,
.m3-field.m3-err .m3-input:focus ~ .m3-label,
.m3-field.m3-err .m3-input:not(:placeholder-shown) ~ .m3-label,
.m3-field.m3-err .m3-trail, .m3-field.m3-err .m3-help{ color:var(--m3-error); }
/* Deaktiviert */
.m3-field.m3-dis{ opacity:.38; pointer-events:none; }
/* Select */
.m3-field.m3-sel .m3-input{ appearance:none; -webkit-appearance:none; cursor:pointer; line-height:50px; }
.m3-field.m3-sel .m3-trail{ pointer-events:none; }
.m3-field.m3-sel .m3-label{ inset-block-start:-8px; font-size:12px; color:var(--m3-primary); }

/* Vertikaler Feld-Stapel mit einheitlichem Abstand.
   [hidden] wird explizit wieder auf display:none gesetzt, damit
   ein-/ausklappbare Bereiche (via hidden-Attribut) weiter funktionieren. */
.m3-stack{ display:flex; flex-direction:column; gap:15px; }
.m3-stack[hidden]{ display:none; }
.m3-row{ display:flex; gap:12px; align-items:flex-start; }
.m3-row > *{ min-width:0; }

/* ---------- Buttons ---------- */
.m3-btn{ all:unset; cursor:pointer; box-sizing:border-box; height:40px; padding-inline:22px; border-radius:20px; font-size:13.5px; font-weight:600;
  display:inline-flex; align-items:center; justify-content:center; gap:8px; position:relative; overflow:hidden; transition:box-shadow .15s,background .12s; color:var(--m3-primary); }
.m3-btn .material-symbols-rounded{ font-size:18px; }
.m3-btn.m3-ic{ padding-inline-start:16px; }
.m3-btn::after{ content:""; position:absolute; inset:0; background:currentColor; opacity:0; transition:opacity .12s; }
.m3-btn:hover::after{ opacity:.08; } .m3-btn:active::after{ opacity:.12; }
.m3-btn.filled{ background:var(--m3-primary); color:#fff; }
.m3-btn.filled:hover{ box-shadow:0 1px 2px rgba(0,0,0,.2),0 2px 6px rgba(var(--m3-primary-rgb),.35); }
.m3-btn.tonal{ background:var(--m3-secondary-container); color:var(--m3-on-secondary-container); }
.m3-btn.elevated{ background:var(--m3-surface-3); color:var(--m3-primary); box-shadow:0 1px 3px rgba(0,0,0,.16); }
.m3-btn.outlined{ background:transparent; color:var(--m3-primary); box-shadow:inset 0 0 0 1px var(--m3-outline); }
.m3-btn.text{ background:transparent; color:var(--m3-primary); padding-inline:12px; }
.m3-btn.m3-dis{ opacity:.38; pointer-events:none; box-shadow:none; background:var(--m3-surface-3); color:var(--m3-ink); }
/* Icon-Button */
.m3-icon-btn{ all:unset; cursor:pointer; width:40px;height:40px;border-radius:50%; display:inline-grid; place-items:center; position:relative; overflow:hidden; color:var(--m3-mut); }
.m3-icon-btn .material-symbols-rounded{ font-size:22px; }
.m3-icon-btn::after{ content:""; position:absolute; inset:0; background:currentColor; opacity:0; transition:.12s; }
.m3-icon-btn:hover::after{ opacity:.09; }
.m3-icon-btn.filled{ background:var(--m3-primary); color:#fff; }
.m3-icon-btn.tonal{ background:var(--m3-secondary-container); color:var(--m3-on-secondary-container); }
.m3-icon-btn.outlined{ box-shadow:inset 0 0 0 1px var(--m3-outline); color:var(--m3-primary); }

/* ---------- Auswahlsteuerung (Checkbox / Radio / Switch) ---------- */
.m3-opt{ display:inline-flex; align-items:center; gap:10px; font-size:14px; color:var(--m3-ink); cursor:pointer; user-select:none; }
.m3-opt input{ position:absolute; opacity:0; width:0;height:0; }
.m3-opt .m3-cbox{ width:18px;height:18px;border-radius:3px; box-shadow:inset 0 0 0 2px var(--m3-mut); display:grid; place-items:center; transition:.12s; flex:none; }
.m3-opt .m3-cbox .material-symbols-rounded{ font-size:16px; color:#fff; opacity:0; }
.m3-opt input:checked ~ .m3-cbox{ background:var(--m3-primary); box-shadow:none; }
.m3-opt input:checked ~ .m3-cbox .material-symbols-rounded{ opacity:1; }
.m3-opt .m3-rad{ width:20px;height:20px;border-radius:50%; box-shadow:inset 0 0 0 2px var(--m3-mut); display:grid; place-items:center; transition:.12s; flex:none; }
.m3-opt .m3-rad::after{ content:""; width:10px;height:10px;border-radius:50%; background:var(--m3-primary); transform:scale(0); transition:.12s; }
.m3-opt input:checked ~ .m3-rad{ box-shadow:inset 0 0 0 2px var(--m3-primary); }
.m3-opt input:checked ~ .m3-rad::after{ transform:scale(1); }
.m3-opt .m3-sw{ width:52px;height:32px;border-radius:16px; background:var(--m3-surface-3); box-shadow:inset 0 0 0 2px var(--m3-outline); position:relative; transition:.15s; flex:none; }
.m3-opt .m3-sw::after{ content:""; position:absolute; inset-block-start:50%; inset-inline-start:8px; width:16px;height:16px;border-radius:50%; background:var(--m3-mut); transform:translateY(-50%); transition:.18s cubic-bezier(.2,0,0,1); }
.m3-opt input:checked ~ .m3-sw{ background:var(--m3-primary); box-shadow:none; }
.m3-opt input:checked ~ .m3-sw::after{ inset-inline-start:28px; width:24px;height:24px; background:#fff; }

/* ---------- Chips ---------- */
.m3-chip{ all:unset; cursor:pointer; box-sizing:border-box; height:32px; padding-inline:14px; border-radius:8px; box-shadow:inset 0 0 0 1px var(--m3-outline);
  display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color:var(--m3-mut); background:transparent; }
.m3-chip .material-symbols-rounded{ font-size:18px; }
.m3-chip.on{ background:var(--m3-secondary-container); color:var(--m3-on-secondary-container); box-shadow:none; }

/* ---------- Segmented Button ---------- */
.m3-segmented{ display:inline-flex; border:1px solid var(--m3-outline); border-radius:20px; overflow:hidden; }
.m3-segmented > button{ all:unset; cursor:pointer; padding:8px 16px; font-size:13px; font-weight:600; color:var(--m3-mut); display:inline-flex; align-items:center; gap:7px; }
.m3-segmented > button.on{ background:var(--m3-secondary-container); color:var(--m3-on-secondary-container); }
.m3-segmented > button + button{ border-inline-start:1px solid var(--m3-outline); }

/* ============================================================
   INTENTIO-APP CI — einheitlicher Header „powered by IntentioDesk"
   + Palette + Tab-Stil (Aktiv/Hover) für ALLE Apps (Hauptfenster
   UND iframes). Blaupause: Datenbank-Verwaltung.
   ============================================================ */
:root{
  /* faint stand auf 2,62:1 gegen Weiss — zu wenig selbst fuer Symbole.
     Derselbe Wert wie in styles.css; beide Dateien setzen die Toene. */
  --ci-ink:#12233a; --ci-mut:#647089; --ci-faint:#7d8ba0;
  --ci-line:#e4eaf2; --ci-line2:#eef2f8; --ci-soft:#f4f7fb; --ci-soft2:#eaf1fb;
}
.iapp-head{ flex:0 0 auto; display:flex; align-items:center; gap:11px; padding:0 16px; height:54px; border-bottom:1px solid var(--ci-line); background:#fff; }
.iapp-head .sp{ flex:1; }
.iapp-logo{ width:30px; height:30px; border-radius:9px; display:grid; place-items:center; color:#fff; flex:none;
  background:linear-gradient(135deg, var(--accent,#2f7ad6), color-mix(in srgb, var(--accent,#2f7ad6) 78%, #000)); }
.iapp-logo .material-symbols-rounded{ font-size:19px; }
.iapp-titlestack{ display:flex; flex-direction:column; line-height:1.12; gap:1px; min-width:0; }
.iapp-titlestack h2{ font-size:15px; font-weight:700; margin:0; color:var(--ci-ink); white-space:nowrap; }
.iapp-powered{ font-size:9.5px; font-weight:600; letter-spacing:.02em; color:var(--ci-faint); white-space:nowrap; }
.iapp-powered .pi{ color:var(--accent-dark, var(--accent,#2f7ad6)); font-weight:700; }
.iapp-sub{ font-size:11.5px; color:var(--ci-mut); padding-left:11px; margin-left:4px; border-left:1px solid var(--ci-line); white-space:nowrap; }
.iapp-sub:empty{ display:none; }
/* position:relative + overflow:hidden zwingend: all:unset entfernt sonst das
   position:relative von .m3-icon-btn → dessen ::after-Pseudo (position:absolute;
   inset:0) bräche bildschirmfüllend aus und finge alle Klicks ab. */
.iapp-x{ all:unset; cursor:pointer; width:40px; height:40px; border-radius:50%; display:grid; place-items:center; color:var(--ci-mut); flex:none; position:relative; overflow:hidden; }
.iapp-x:hover{ background:var(--ci-soft); color:var(--ci-ink); }
.iapp-x .material-symbols-rounded{ font-size:20px; }
/* Tab-Leiste im DB-Stil: auf die Tab-Buttons zusätzlich .iapp-tab setzen */
.iapp-tabs{ display:flex; gap:4px; padding:8px 14px 0; border-bottom:1px solid var(--ci-line); background:#fff; }
.iapp-tab{ all:unset; cursor:pointer; display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border-radius:9px 9px 0 0; font-size:13px; font-weight:600; color:var(--ci-mut); }
.iapp-tab .material-symbols-rounded{ font-size:17px; }
.iapp-tab:hover{ color:var(--ci-ink); background:var(--ci-soft); }
.iapp-tab.on{ color:var(--accent-dark, var(--accent,#2f7ad6)); background:var(--ci-soft); box-shadow:inset 0 -2px 0 var(--accent,#2f7ad6); }

/* Die Designfarbe wird zur Laufzeit auf <body> gesetzt, nicht am Wurzelelement
   (main.js, applyChrome). Ohne diese Wiederholung bliebe --m3-primary auf dem
   Stylesheet-Standard stehen — gemessen: Wurzel #7c5cff, body rgb(242,150,58),
   und jedes MD3-Bauteil im Hauptfenster faerbte lila statt in der Designfarbe.
   In den iframes greift die Zeile ebenso, dort erbt body die eigene Farbe. */
body{
  --m3-primary: var(--accent, #1d948f);
  --m3-primary-rgb: var(--accent-rgb, 29,148,143);
}