/*
 * app.css — heusel.licence Companion (lädt NACH heusel.web.css)
 * ============================================================
 * Nur noch LICENCE-FACHLICHES: LicenceGrid + Kundenliste (ListViews mit festen
 * Spaltenbreiten). Alles Generische — Glas/Cursor-Glow, Reconnect-Overlay, Spacing-
 * Utilities, Notice-Varianten, fixed-tbl/fx_*, Diff-Zelle (chg), col-status, amp-black,
 * inf_* — liegt jetzt im kanonischen heusel.web.css (Abschnitt 12). Diese Datei bleibt
 * bewusst minimal; was hier generisch wird, wandert in den Kanon.
 */

/* ── ListView-Feinschliff (nur wo Kanon nicht reicht) ─────────────────────── */
.hsl_sort_arrow { color: var(--hsl-brand); margin-left: 4px; font-size: .8em; }
.hsl_lv_filters { align-items: center; }

/* ── LicenceGrid (v2): Gruppen-/Instanz-Köpfe, Auswahl, Bulk-Leiste ────────── */
.hsl_lg_group_head {
  display: flex; align-items: center; gap: .5rem;
  background: color-mix(in srgb, var(--hsl-fg) 4%, transparent);
  border-radius: 6px; padding: 8px 12px; margin-top: .6rem;
  font-weight: 600; user-select: none; cursor: pointer;
}
.hsl_lg_group_head:hover { background: color-mix(in srgb, var(--hsl-fg) 7%, transparent); }
.hsl_lg_inst_head {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  border-radius: 6px; padding: 6px 10px; margin-top: .35rem; margin-left: .4rem; user-select: none;
}
.hsl_lg_inst_head:hover { background: color-mix(in srgb, var(--hsl-fg) 3%, transparent); }
.hsl_lg_inst_toggle { cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; }
.hsl_lg_inst_actions { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.hsl_lg_chevron { display: inline-block; width: 1em; text-align: center; color: var(--hsl-fg-dim); font-size: .85em; }

th.hsl_lg_check, td.hsl_lg_check { text-align: center; width: 1%; white-space: nowrap; padding-left: 6px; padding-right: 6px; }
label.hsl_lg_check { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }

/* Ausgewählte Zeile: Hervorhebung + Akzent-Kante links. */
table.hsl_tbl tr.hsl_lg_row_selected td {
  background: rgb(125 180 255 / .10);
  box-shadow: inset 3px 0 0 0 var(--hsl-brand);
}

/* Sticky Mehrfachaktions-Leiste (sichtbar wenn ≥1 Lizenz ausgewählt). */
.hsl_lg_bulkbar {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: rgb(233 30 99 / .14);
  border: 1px solid var(--hsl-brand); border-radius: 8px;
  padding: 8px 12px; margin: .4rem 0; backdrop-filter: blur(6px);
}
.hsl_lg_bulkbar_count { font-weight: 600; margin-right: 4px; }

/* Datenbank-Gruppenwechsel innerhalb einer Instanz (Trennzeile, nicht klappbar). */
.hsl_lg_db_sep td {
  background: color-mix(in srgb, var(--hsl-fg) 5%, transparent);
  color: var(--hsl-fg-dim); font-weight: 600; font-size: .8rem;
  padding: 5px 10px; border-top: 1px solid var(--hsl-border); border-bottom: 1px solid var(--hsl-border);
}
.hsl_lg_db_sep td b { color: var(--hsl-fg); font-weight: 700; }
table.hsl_tbl tbody tr.hsl_lg_db_sep:hover td { background: color-mix(in srgb, var(--hsl-fg) 5%, transparent); }
tr.hsl_lg_db_sep { cursor: default; }

/* Lizenz-Tabelle: feste Spaltenbreiten; nur "Modulname" (ohne Breitenklasse) wächst. */
.hsl_lg_tbl { table-layout: fixed; }
.hsl_lg_tbl th.hsl_lg_check     { width: 34px; }
.hsl_lg_tbl th.hsl_lg_w_status  { width: 26px; }
.hsl_lg_tbl th.hsl_lg_w_partner { width: 70px; }
.hsl_lg_tbl th.hsl_lg_w_modid   { width: 130px; }
.hsl_lg_tbl th.hsl_lg_w_sql     { width: 210px; }
.hsl_lg_tbl th.hsl_lg_w_db      { width: 170px; }
.hsl_lg_tbl th.hsl_lg_w_valid   { width: 150px; }
.hsl_lg_tbl th.hsl_col_ts       { width: 150px; }
.hsl_lg_tbl th.hsl_lg_w_act     { width: 92px; }
.hsl_lg_tbl td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hsl_lg_tbl td.hsl_tbl_actions, .hsl_lg_tbl td.hsl_lg_check, .hsl_lg_tbl td.hsl_col_status { overflow: visible; }

/* ── Kundenliste: nach Betreuer gruppiert, feste Spaltenbreiten (gleiche Ausrichtung) ── */
table.hsl_tbl th.hsl_col_ed, table.hsl_tbl td.hsl_col_ed {
  width: 1%; white-space: nowrap; text-align: right; padding-left: 7px; padding-right: 7px;
}
table.hsl_tbl th.hsl_col_ed { font-size: .78rem; letter-spacing: .02em; }
table.hsl_tbl.hsl_cust_tbl { table-layout: fixed; }
table.hsl_tbl.hsl_cust_tbl th.hsl_cust_c_num { width: 96px; }
table.hsl_tbl.hsl_cust_tbl th.hsl_cust_c_lic { width: 82px; }
table.hsl_tbl.hsl_cust_tbl th.hsl_col_ed     { width: 48px; }
table.hsl_tbl.hsl_cust_tbl th.hsl_cust_c_act { width: 72px; }
table.hsl_tbl.hsl_cust_tbl td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.hsl_tbl.hsl_cust_tbl td.hsl_tbl_actions { overflow: visible; }

/* Check-Log: Kunde-Spalte breiter (lange Namen). */
table.hsl_tbl.hsl_fixed_tbl th.hsl_cl_kunde { width: 360px; }

/* ── SSO-Login-Button (heusel.id) auf der Login-Seite ── */
.hsl_sso_btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; height: 46px; box-sizing: border-box; padding: 0 16px; margin-top: 6px;
  border-radius: 8px; border: 1px solid var(--hsl-border);
  background: var(--hsl-bg-input); color: var(--hsl-fg);
  font-size: .95rem; font-weight: 500; text-decoration: none;
  transition: border-color .15s ease, background .15s ease, transform .05s ease;
}
.hsl_sso_btn:hover { border-color: var(--hsl-brand); text-decoration: none; }
.hsl_sso_btn:active { transform: translateY(1px); }
.hsl_sso_btn img { width: 22px; height: 22px; display: block; flex: 0 0 auto; }

/* ── Abmelde-Toast (One-Shot, per JS im statischen Host eingeblendet) ── */
.hsl_login_toast {
  position: fixed; top: 22px; left: 50%; z-index: 50;
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 10px;
  background: var(--hsl-bg-card); border: 1px solid var(--hsl-border); color: var(--hsl-fg);
  font-size: 14px; box-shadow: 0 8px 24px rgba(0,0,0,.35);
  animation: hsl-login-toast 3.6s ease forwards;
}
.hsl_login_toast svg { width: 18px; height: 18px; color: #38c172; flex: 0 0 auto; }
@keyframes hsl-login-toast {
  0%   { opacity: 0; transform: translateX(-50%) translateY(-10px); }
  8%   { opacity: 1; transform: translateX(-50%) translateY(0); }
  85%  { opacity: 1; transform: translateX(-50%) translateY(0); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-10px); visibility: hidden; }
}

/* App-Hero (Verbund-Farbidentitaet, hsl 0.46.0) — Violett */
#app{ --hero-a:#a56bc4;--hero-c:#cca5e0;--hero-glow:165,107,196; }