/* buttons.css — Global button styles */

/* btn-assign (orange action button) */
.btn-assign{background:var(--o);color:var(--surface);border:none;padding:var(--sp-2) var(--sp-6);font-size:var(--fs-sm);font-weight:var(--fw-bold);border-radius:var(--radius);cursor:pointer;transition:background var(--dur-fast)}
.btn-assign:hover{background:var(--o-h)}

/* btn-cancel (gray cancel button — gleiche Höhe wie btn-assign) */
.btn-cancel{background:var(--grey-500);color:var(--surface);border:none;padding:var(--sp-2) var(--sp-6);font-size:var(--fs-sm);font-weight:var(--fw-bold);border-radius:var(--radius);cursor:pointer;transition:background var(--dur-fast)}
.btn-cancel:hover{background:var(--grey-600)}

/* btn-save (green save button — gleiche Höhe wie btn-assign) */
.btn-save{background:var(--ok);color:var(--surface);border:none;padding:var(--sp-2) var(--sp-6);font-size:var(--fs-sm);font-weight:var(--fw-bold);border-radius:var(--radius);cursor:pointer;transition:background var(--dur-fast)}
.btn-save:hover{background:var(--ok-h)}

/* ac-btn-action (small icon action button — square, gray, rounded) */
.ac-btn-action{width:var(--sz-32);height:var(--sz-32);display:inline-flex;align-items:center;justify-content:center;border:none;background:var(--grey-100);color:var(--grey-600);border-radius:var(--radius);cursor:pointer;text-decoration:none;padding:0;font-size:var(--fs-md);line-height:1;transition:background var(--dur-fast),color var(--dur-fast)}
.ac-btn-action:hover{background:var(--grey-200);color:var(--grey-700)}
/* NEBEN EINEM FELD ist der Icon-Knopf so hoch wie das Feld (36 statt 32) — sonst steht der Plus-Knopf
   hinter einer E-Mail-Adresse oder einem Wähler sichtbar tiefer/kleiner als das Eingabefeld daneben
   (Florian 12.09.2026: „ist etwas kleiner und das sieht nicht gut aus"). Greift NUR in Formularzeilen
   bzw. in Tabellenzeilen, die selbst ein Feld tragen (Erfassungszeilen) — reine Aktionsspalten in
   Listen bleiben bewusst kompakt bei 32. */
.mage-field-body .ac-btn-action,
.cc-input-row .ac-btn-action,
tr:has(.form-control) .ac-btn-action,
tr:has(.mpp-trigger) .ac-btn-action,
tr:has(select) .ac-btn-action { width: var(--sz-36); height: var(--sz-36); }

/* mage-btn-add (Orange Action Button - Subnav) */
/* Voll-Action-Buttons teilen EXAKT eine Höhe (36px) = Control-Höhe → bündig mit Inputs + untereinander
   identisch (kein „unten kleiner als oben"). Nur Farbe unterscheidet. Kleine Varianten (-sm/-action) separat. */
.mage-btn-add, .mage-btn-danger, .mage-btn-neutral, .mage-btn-light,
.btn-save, .btn-cancel, .btn-assign {
    height:var(--sz-36);
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
}
.mage-btn-add {
    background: var(--o);
    color: var(--surface);
    border: none;
    text-decoration: none;
    padding:var(--sp-1) var(--sp-7);
    font-size:var(--fs-md);
    font-weight:var(--fw-bold);
    border-radius:var(--radius);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap:var(--sp-2);
    transition: background var(--dur-fast);
    white-space: nowrap;
}

.mage-btn-add:hover {
    background: var(--o-h);
    color: var(--surface);
}

.mage-btn-add i {
    font-size:var(--fs-md);
}

/* mage-btn-add-sm (Small add button variant – same height as toolbar buttons) — die Höhe war nur
   versprochen, nicht gesetzt (≈27 px neben 32-px-Werkzeugknöpfen). Jetzt EXAKT die Höhe von .ac-btn-action. */
.mage-btn-add-sm {
  height: var(--sz-32);
  box-sizing: border-box;
  background: var(--o);
  color: var(--surface);
  border: none;
  text-decoration: none;
  padding:var(--sp-2) var(--sp-6);
  font-size:var(--fs-base);
  font-weight:var(--fw-bold);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap:var(--sp-1);
  transition: background var(--dur-fast);
  white-space: nowrap;
  border-radius:var(--radius);
}

.mage-btn-add-sm:hover {
  background: var(--o-h);
  color: var(--surface);
}

.mage-btn-add-sm i {
  font-size:var(--fs-base);
}


/* === Button-Hardening 2026-07-08: btn-cancel/btn-save/btn-assign als <a> mit Icon sauber
   rendern (kein Underline, Icon vertikal zentriert) — analog mage-btn-add.
   Wirkt ERP-weit, aendert Text-only-Buttons optisch nicht. === */
.btn-assign, .btn-cancel, .btn-save { text-decoration: none; display: inline-flex; align-items: center; gap:var(--sp-2); }
.btn-assign i, .btn-cancel i, .btn-save i { font-size:var(--fs-base); line-height: 1; }

/* mage-btn-danger (globaler Danger/Delete-Button — rot) — Analyse 2026-07-09 */
/* Voll-Action-Buttons teilen EXAKT eine Grösse (padding 9px 18px / 14px) — nur die Farbe unterscheidet.
   So stehen Öffnen/Neutral/Danger nie in verschiedenen Höhen nebeneinander. Klein = *-sm / btn-sm. */
.mage-btn-danger{background:var(--danger);color:var(--surface);border:none;text-decoration:none;padding:var(--sp-3) var(--sp-7);font-size:var(--fs-md);font-weight:var(--fw-bold);border-radius:var(--radius);cursor:pointer;display:inline-flex;align-items:center;gap:var(--sp-2);transition:background var(--dur-fast);white-space:nowrap}
.mage-btn-neutral{background:var(--grey-500);color:var(--surface);border:none;text-decoration:none;padding:var(--sp-3) var(--sp-7);font-size:var(--fs-md);font-weight:var(--fw-bold);border-radius:var(--radius);cursor:pointer;display:inline-flex;align-items:center;gap:var(--sp-2);transition:background var(--dur-fast);white-space:nowrap}
.mage-btn-neutral:hover{background:var(--grey-600);color:var(--surface)}
.mage-btn-danger:hover{background:var(--danger-h);color:var(--surface)}
.mage-btn-danger i{font-size:var(--fs-base)}

/* mage-btn-light — helle Toolbar-Button-Variante (weiss, Rand, dunkler Text + Icon).
   Für Toolbar-Controls wie Filter/Spalten/Export. Gleiche Höhe wie die Voll-Buttons (padding 9px). */
.mage-btn-light{background:var(--surface);color:var(--grey-700);border:1px solid var(--border);text-decoration:none;padding:var(--sp-3) var(--sp-6);font-size:var(--fs-base);font-weight:var(--fw-med);border-radius:var(--radius);cursor:pointer;display:inline-flex;align-items:center;gap:var(--sp-2);transition:background var(--dur-fast);white-space:nowrap}
.mage-btn-light:hover{background:var(--grey-100);color:var(--grey-700)}
.mage-btn-light i{font-size:var(--fs-md)}

/* Upload-Button (Design::uploadBtn): Kern-Button als <label>, das File-Input bleibt unsichtbar. */
.cc-upload-btn input[type=file] { display: none; }

/* Ton-Hover-Varianten für Aktions-Buttons (Design::iconBtn tone) — Kanalfarben beim Hover. */
.ac-btn-action.ac-btn-ok:hover{background:var(--ok-bg);color:var(--ok)}
.ac-btn-action.ac-btn-info:hover{background:var(--info-bg);color:var(--info)}
.ac-btn-action.ac-btn-accent:hover{background:var(--accent-2-bg);color:var(--accent-2)}
.ac-btn-action.ac-btn-danger:hover{background:var(--danger-bg);color:var(--danger)}
/* Deaktivierter Aktions-Button — EINE System-Optik (Design::iconBtn ['disabled'=>true]). */
.ac-btn-action:disabled{opacity:var(--op-faint);cursor:default;pointer-events:none}
/* Link-Button (Design::linkBtn) — klickbare Textaktion, z.B. „Bild entfernen". */
.cc-link-btn{background:none;border:0;padding:0;font:inherit;cursor:pointer;color:var(--info);text-decoration:none;display:inline-flex;align-items:center;gap:var(--sp-2)}
.cc-link-btn:hover{text-decoration:underline}
.cc-link-btn.cc-link-danger{color:var(--danger)}

/* Segmented-Control (Design::segmented) — Icon/Label-Toggle-Gruppe, EINER aktiv (Ansichts-Umschalter). */
/* Höhe wie jeder andere einzeilige Control (36) — vorher ergab sie sich nur aus dem Innenabstand und
   war damit niedriger als die Knöpfe daneben (Florian 12.09.2026: „Woche/Monat/Jahr sind weniger hoch
   als die Blätter-Knöpfe … sollten genauso hoch sein wie die Inputs"). */
.cc-seg { display: inline-flex; background: var(--grey-100); border-radius: var(--radius); padding: var(--sp-0); height: var(--sz-36); box-sizing: border-box; }
.cc-seg-btn { background: transparent; border: none; display: inline-flex; align-items: center; justify-content: center; height: 100%; font-size: var(--fs-md); color: var(--grey-600); cursor: pointer; border-radius: var(--radius); padding: var(--sp-2) var(--sp-4); transition: background var(--dur-fast), color var(--dur-fast); }
.cc-seg-btn:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink); }
.cc-seg-active, .cc-seg-active:hover { background: var(--o); color: var(--surface); }

/* Gedrückt/aktiv (aria-pressed="true") — Umschalt-Knöpfe (Wichtig, Verrechenbar, Beobachten, Sichtbarkeit):
   EIN Zustand fürs ganze System in Markenfarbe. Vorher definierte Ticketing das selbst. */
.ac-btn-action[aria-pressed="true"],
.mage-btn-light[aria-pressed="true"] { background: var(--o); color: var(--surface); border-color: var(--o); }
.ac-btn-action[aria-pressed="true"]:hover,
.mage-btn-light[aria-pressed="true"]:hover { background: var(--o-h); color: var(--surface); border-color: var(--o-h); }

/* Ton-Varianten des hellen Knopfs (Design::btn ['variant'=>'light','tone'=>…]) — weiche Fläche + kräftige
   Schrift aus der Kern-Skala (z.B. Eskalationsstufe). Der Hover bleibt im Ton. */
.mage-btn-light.cc-btn-warn, .mage-btn-light.cc-btn-warn:hover { background: var(--warn-bg); color: var(--warn-fg); border-color: var(--warn-bg); }
.mage-btn-light.cc-btn-danger, .mage-btn-light.cc-btn-danger:hover { background: var(--danger-bg); color: var(--danger-fg); border-color: var(--danger-bg); }
.mage-btn-light.cc-btn-accent, .mage-btn-light.cc-btn-accent:hover { background: var(--accent-2-bg); color: var(--accent-2); border-color: var(--accent-2-bg); }
/* Gerahmter Icon-Knopf (Design::iconBtn ['framed'=>true]) — weiss mit Rahmen in Voll-Knopf-Höhe, steht neben
   hellen Knöpfen in Kopfleisten. Bewusst einfache Spezifität: „gedrückt" (aria-pressed, oben) gewinnt. */
.ac-btn-framed { background: var(--surface); border: 1px solid var(--border); width: var(--sz-36); height: var(--sz-36); }
.ac-btn-framed:hover { background: var(--grey-100); }
/* Segmented im Info-Ton (Design::segmented ['tone'=>'info']) — aktiver Knopf blau statt orange. */
.cc-seg-info .cc-seg-active, .cc-seg-info .cc-seg-active:hover { background: var(--info); }

/* Farb-Schalter (Design::swatchBtn): Farbpunkt als An/Aus-Knopf — aus = blass, an = voll mit Markenrahmen. */
.cc-swatch-btn { display: inline-flex; align-items: center; padding: var(--sp-1); border: 1px solid var(--border); border-radius: var(--radius);
                 background: none; cursor: pointer; opacity: var(--op-half); font: inherit; line-height: 1; }
.cc-swatch-btn.on { opacity: 1; border-color: var(--o); }
.cc-swatch-btn:hover { border-color: var(--o); }
/* Blätter-Leiste (Design::pager): schlichte Pfeil-Knöpfe, die Position dazwischen. */
.cc-pager { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--muted); }
.cc-pager-btn { display: inline-flex; background: none; border: 0; padding: 0; font: inherit; line-height: inherit; color: var(--muted); cursor: pointer; }
.cc-pager-btn:hover { color: var(--o); }
/* Gedrückt im Info-Ton (Zusatzklasse cc-btn-pressed-info am hellen Umschalt-Knopf) — z.B. „Teams-Meeting
   verknüpft": der Zustand gehört einem fremden Dienst, nicht der Marke. */
.mage-btn-light.cc-btn-pressed-info[aria-pressed="true"] { background: var(--info); color: var(--surface); border-color: var(--info); }
.mage-btn-light.cc-btn-pressed-info[aria-pressed="true"]:hover { background: color-mix(in srgb, var(--info) 85%, var(--ink)); color: var(--surface); border-color: var(--info); }
/* Icon-Knopf auf dunkler Fläche (Zusatzklasse ac-btn-dark) — z.B. Kopf des Kalender-Widgets. */
.ac-btn-action.ac-btn-dark { background: transparent; color: var(--grey-400); }
.ac-btn-action.ac-btn-dark:hover { background: color-mix(in srgb, var(--surface) 10%, transparent); color: var(--surface); }

/* Marke am Icon-Knopf (Design::iconBtn ['badge'=>'!']) — sichtbar NUR solange der Knopf gedrückt ist
   (z.B. „Filter aktiv"). Der Knopf wird dafür zum Bezugsrahmen. */
.ac-btn-action:has(> .ac-btn-badge) { position: relative; }
.ac-btn-badge { display: none; position: absolute; bottom: 2px; right: 2px; width: var(--sz-14); height: var(--sz-14); border-radius: 50%;
                background: var(--surface); color: var(--o); font-size: var(--fs-2xs); font-weight: var(--fw-heavy); line-height: 1;
                align-items: center; justify-content: center; pointer-events: none; }
.ac-btn-action[aria-pressed="true"] > .ac-btn-badge { display: flex; }

/* Umrandeter heller Knopf für DUNKLE Flächen (Design::btn 'ghost') — z.B. „Abbrechen" in der Zeichen-Werkzeugleiste. */
.mage-btn-ghost { height: var(--sz-32); padding: 0 var(--sp-6); border-radius: var(--radius); border: 1px solid color-mix(in srgb, var(--surface) 25%, transparent);
                  background: none; color: color-mix(in srgb, var(--surface) 80%, transparent); font-size: var(--fs-base); cursor: pointer;
                  display: inline-flex; align-items: center; gap: var(--sp-2); white-space: nowrap;
                  transition: background var(--dur-fast), border-color var(--dur-fast); }
.mage-btn-ghost:hover { background: color-mix(in srgb, var(--surface) 10%, transparent); border-color: color-mix(in srgb, var(--surface) 40%, transparent); }

/* Gedrückt auf dunkler Fläche (ac-btn-dark + aria-pressed, z.B. aktives Zeichenwerkzeug): weiche Markenfläche,
   Icon in Markenfarbe, feiner Markenrahmen — ein Vollton-Orange wäre auf der dunklen Leiste zu laut. */
.ac-btn-action.ac-btn-dark[aria-pressed="true"],
.ac-btn-action.ac-btn-dark[aria-pressed="true"]:hover { background: color-mix(in srgb, var(--o) 15%, transparent); color: var(--o); }

/* Glas-Knöpfe auf DUNKLEM Vollbild-Grund (Design::iconBtn ['look'=>'glass'|'glass-round'], z.B. Medien-Lightbox):
   glass = helles Icon ohne Fläche, beim Zeigen voll deckend; glass-round = runde, leicht helle Fläche (Blättern).
   ['size'=>'lg'] = grösseres Icon (Schliessen). Die Lage bestimmt der Container (lightbox.css). */
.ac-btn-action.ac-btn-glass { width: auto; height: auto; padding: 0 var(--sp-2); background: none; color: var(--surface);
                              font-size: var(--fs-xl); opacity: var(--op-soft); transition: opacity var(--dur); }
.ac-btn-action.ac-btn-glass:hover { background: none; color: var(--surface); opacity: 1; }
.ac-btn-action.ac-btn-glass-round { width: var(--sz-44); height: var(--sz-44); border-radius: 50%; color: var(--surface); font-size: var(--fs-xl);
                                    background: color-mix(in srgb, var(--surface) 12%, transparent); opacity: var(--op-muted);
                                    transition: opacity var(--dur), background var(--dur); }
.ac-btn-action.ac-btn-glass-round:hover { background: color-mix(in srgb, var(--surface) 22%, transparent); color: var(--surface); opacity: 1; }
.ac-btn-action.ac-btn-glass-round:disabled { opacity: var(--op-faint); }
.ac-btn-action.ac-btn-lg { font-size: var(--fs-xxl); }
/* Kleiner runder VOLL-Knopf (Design::iconBtn ['solid'=>true, 'tone'=>'danger'|'ok']) — Entfernen/Einblenden an einer
   Desktop-Kachel im Bearbeiten-Modus: Fläche in der Tonfarbe, weisses Zeichen, leichter Schatten. */
.ac-btn-action.ac-btn-solid { width: var(--sz-22); height: var(--sz-22); border-radius: var(--radius-pill); background: var(--grey-600); color: var(--on-o);
                              box-shadow: var(--shadow-sm); font-size: var(--fs-xs); }
.ac-btn-action.ac-btn-solid:hover { background: var(--grey-700); color: var(--on-o); }
.ac-btn-action.ac-btn-solid.ac-btn-danger, .ac-btn-action.ac-btn-solid.ac-btn-danger:hover { background: var(--danger); color: var(--on-o); }
.ac-btn-action.ac-btn-solid.ac-btn-ok, .ac-btn-action.ac-btn-solid.ac-btn-ok:hover { background: var(--ok); color: var(--on-o); }
/* Ohne eigene Fläche auf FARBIGEM Grund (Design::iconBtn ['look'=>'ghost']) — z.B. Löschen in der Notizzettel-Leiste. */
.ac-btn-action.ac-btn-ghost { background: transparent; color: var(--grey-600); }
.ac-btn-action.ac-btn-ghost:hover { background: color-mix(in srgb, var(--ink) 10%, transparent); color: var(--ink); }

/* Werkzeug-Knöpfe einer dunklen Werkzeugleiste (Design::toolBtn): Farbe (Punkt) und Strichstärke (heller Punkt).
   Gedrückt = aria-pressed. Werkzeug-Icons laufen über iconBtn + ac-btn-dark (oben). */
.cc-tool { display: inline-flex; align-items: center; justify-content: center; padding: 0; background: none; cursor: pointer; font: inherit; position: relative; }
.cc-tool-swatch { width: var(--sz-26); height: var(--sz-26); border-radius: 50%; border: 2px solid transparent; transition: border-color var(--dur-fast); }
.cc-tool-swatch > .cc-tool-dot { display: block; width: var(--sz-18); height: var(--sz-18); border-radius: 50%; }
.cc-tool-swatch:hover { border-color: color-mix(in srgb, var(--surface) 40%, transparent); }
.cc-tool-swatch[aria-pressed="true"] { border-color: var(--surface); }
.cc-tool-dot.cc-tool-any { background: conic-gradient(var(--danger), var(--warn), var(--ok), var(--info), var(--accent-2), var(--danger)); }
.cc-tool-width { width: var(--sz-30); height: var(--sz-30); border-radius: var(--radius); border: 1px solid transparent;
                 transition: background var(--dur-fast), border-color var(--dur-fast); }
.cc-tool-width > .cc-tool-dot { display: block; border-radius: 50%; background: var(--surface); }
.cc-tool-width:hover { background: color-mix(in srgb, var(--surface) 10%, transparent); }
.cc-tool-width[aria-pressed="true"] { border-color: color-mix(in srgb, var(--surface) 50%, transparent); background: color-mix(in srgb, var(--surface) 12%, transparent); }
/* Link-Button deaktiviert (z.B. „hier liegt die Nachricht schon" im Verschieben-Menü) — grau, blass, nicht klickbar. */
.cc-link-btn:disabled { color: var(--muted); opacity: var(--op-half); cursor: default; text-decoration: none; }
/* Kleine Höhe der Segmented-Gruppe: exakt die 32 px der Werkzeugknöpfe daneben (.ac-btn-action,
   .mage-btn-add-sm). Florian 12.09.2026 an der E-Mail-Kopfleiste: „Die Dreiergruppe nach Kontakt /
   Unterhaltung / flach ist zu hoch — alles soll so hoch sein wie der Button Neue E-Mail." */
.cc-seg-sm { height: var(--sz-32); }
.cc-seg-sm .cc-seg-btn { padding: var(--sp-1) var(--sp-4); }
/* Aufklapp-Block: der Inhalt hängt unter seinem Knopf und startet zu (Design::toggleBlock). */
.cc-toggleblock-body { margin-top: var(--sp-5); }

/* ── Aktionsknopf-Vertrag: arbeitender Knopf (Klasse setzt der Kern, core/Ui.php actionContractJs) ──
   Solange ein vom Klick ausgelöster API-Aufruf läuft, zeigt der Knopf einen Spinner statt seines Icons und
   nimmt keinen zweiten Klick an. Gilt für JEDEN Knopf — kein Modul baut eigene „lädt…"-Zustände. */
.cc-busy { cursor: progress; pointer-events: none; }
.cc-busy > .cc-ico { display: none; }
.cc-busy > .cc-busy-spin { display: inline-block; vertical-align: middle; margin-right: var(--sp-2); }
.ac-btn-action.cc-busy > .cc-busy-spin { margin-right: 0; }