/* =====================================================================
   FlightSuite — gemeinsame Bausteine fuer alle drei Oberflaechen:
   App-Wechsler (oben in der Seitenleiste), Kontomenue (unten),
   Startseiten-Karten. Verwendet die Farbvariablen der jeweiligen App
   (--navy, --navy-2, --accent, …), damit es in Orange (FlightForms) und
   Blau (FlightDeck) gleichermassen sitzt.
   ===================================================================== */

/* ---------- App-Wechsler ---------- */
.fs-switch{position:relative; margin:0 0 8px}
.fs-switch-btn{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  padding:6px 8px; border:1px solid transparent; border-radius:12px; background:none;
  color:#fff; cursor:pointer; font:inherit;
}
.fs-switch-btn:hover{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.08)}
.fs-switch-btn[aria-expanded="true"]{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.12)}
.fs-switch-btn:focus-visible{outline:2px solid #fff; outline-offset:2px}
.fs-logo{width:34px; height:34px; border-radius:9px; flex:0 0 auto; background:#fff}
.fs-switch-txt{display:flex; flex-direction:column; min-width:0; flex:1; line-height:1.15}
.fs-switch-txt em{font-style:normal; font-size:9.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.45)}
.fs-switch-txt strong{font-size:15px; font-weight:800; letter-spacing:.02em; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.fs-switch-txt strong.fs-app-forms{color:#fb923c}
.fs-switch-txt strong.fs-app-deck{color:#38bdf8}
.fs-chev{flex:0 0 auto; color:rgba(255,255,255,.45); display:flex}
.fs-switch-btn[aria-expanded="true"] .fs-chev{transform:rotate(180deg)}

/* ---------- Menue (gemeinsam fuer Wechsler und Konto) ---------- */
.fs-menu{
  position:absolute; left:0; right:0; z-index:70; margin-top:6px;
  background:var(--navy-2,#1e293b); border:1px solid rgba(255,255,255,.12); border-radius:12px;
  padding:6px; box-shadow:0 14px 34px rgba(0,0,0,.45);
}
.fs-menu[hidden]{display:none!important}
.fs-menu-up{bottom:calc(100% + 8px); margin-top:0}
.fs-mi{
  display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:9px;
  color:#e2e8f0; text-decoration:none; font-size:13.5px; line-height:1.25;
}
.fs-mi:hover,.fs-mi:focus{background:rgba(255,255,255,.08); color:#fff; text-decoration:none; outline:none}
.fs-mi:focus-visible{box-shadow:inset 0 0 0 2px #fff}
.fs-mi.on{background:rgba(255,255,255,.1)}
.fs-mi-txt{display:flex; flex-direction:column; min-width:0; flex:1}
.fs-mi-txt b{font-weight:650; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.fs-mi-txt span{font-size:11.5px; color:rgba(255,255,255,.5); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.fs-dot{width:9px; height:9px; border-radius:50%; flex:0 0 auto; background:#94a3b8; margin:0 6px}
.fs-mi-logo{width:22px; height:22px; border-radius:6px; flex:0 0 auto; background:#fff; object-fit:cover}
.fs-mi-forms .fs-dot{background:#f97316}
.fs-mi-deck .fs-dot{background:#0ea5e9}
.fs-mi-suite .fs-dot{background:#fff}
.fs-mi-admin .fs-dot{background:#a78bfa}
.fs-check{color:#fff; font-weight:700; flex:0 0 auto}
.fs-mi-out{border-top:1px solid rgba(255,255,255,.08); margin-top:4px; padding-top:11px; border-radius:0 0 9px 9px}

/* ---------- Kontomenue am Fuss ---------- */
.fs-foot{position:relative}
.fs-acct-btn{
  display:flex; align-items:center; gap:9px; width:100%; text-align:left; min-width:0;
  padding:6px; border:0; border-radius:10px; background:none; color:inherit; cursor:pointer; font:inherit;
}
.fs-acct-btn:hover{background:rgba(255,255,255,.06)}
.fs-acct-btn[aria-expanded="true"]{background:rgba(255,255,255,.08)}
.fs-acct-btn:focus-visible{outline:2px solid #fff; outline-offset:2px}
.fs-acct-btn .side-who{flex:1; min-width:0; display:flex; flex-direction:column}
.fs-acct-btn .side-who b{display:block; font-size:12.5px; font-weight:600; color:#e2e8f0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.fs-acct-btn .side-who b em{font-style:normal; font-size:9px; color:#fff; background:var(--accent,#0ea5e9); padding:1px 6px; border-radius:5px; letter-spacing:.5px; text-transform:uppercase; margin-left:4px; vertical-align:1px}
.fs-acct-btn .side-who>span{display:block; font-size:11px; color:rgba(255,255,255,.45); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* ---------- Startseite: App-Karten ---------- */
.fs-hi{font-size:26px; font-weight:800; letter-spacing:-.02em; margin:4px 0 2px}
.fs-sub{margin-bottom:18px}
.fs-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px}
.fs-card{
  display:flex; flex-direction:column; gap:6px; padding:20px 20px 18px; border-radius:var(--radius,16px);
  background:var(--card,#fff); border:1px solid var(--line,#e2e8f0); box-shadow:var(--shadow,0 1px 2px rgba(15,23,42,.04));
  color:var(--txt,#0f172a); text-decoration:none; position:relative; overflow:hidden; min-height:150px;
}
.fs-card::before{content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:var(--fs-c,#64748b)}
.fs-card:hover{text-decoration:none; border-color:var(--fs-c,#64748b); transform:translateY(-1px)}
.fs-card:focus-visible{outline:2px solid var(--fs-c,#2563eb); outline-offset:2px}
.fs-card-forms{--fs-c:#f97316}
.fs-card-deck{--fs-c:#0ea5e9}
.fs-card-admin{--fs-c:#7c3aed}
.fs-card-account{--fs-c:#64748b}
.fs-card-k{font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--fs-c)}
.fs-card-t{font-size:20px; font-weight:800; letter-spacing:-.01em}
.fs-card-d{color:var(--muted,#64748b); font-size:13.5px; flex:1}
.fs-card-cta{font-weight:600; color:var(--fs-c); font-size:13.5px}
.fs-card-role{position:absolute; right:14px; top:14px; font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--fs-c); background:color-mix(in srgb, var(--fs-c) 12%, #fff); padding:2px 8px; border-radius:999px}
.fs-empty{max-width:560px; margin:40px auto; padding:26px; text-align:center}

/* ---------- Kleinkram ---------- */
.fs-pill{display:inline-block; font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:2px 8px; border-radius:999px;
  background:#f1f5f9; color:#475569; border:1px solid #e2e8f0}
.fs-pill-forms{background:#fff7ed; color:#c2410c; border-color:#fed7aa}
.fs-pill-deck{background:#e0f2fe; color:#0369a1; border-color:#bae6fd}
.fs-pill-global{background:#ede9fe; color:#6d28d9; border-color:#ddd6fe}
.fs-pill-warn{background:#fffbeb; color:#b45309; border-color:#fde68a}
.fs-pill-off{background:#fef2f2; color:#b91c1c; border-color:#fecaca}

@media (max-width:900px){
  .fs-menu{max-height:60vh; overflow:auto}
}
@media (prefers-reduced-motion:reduce){ .fs-card:hover{transform:none} }

/* ---------- Einheitliche Leistenpunkte in allen drei Oberflaechen ----------
   Diese Datei laden Suite, FlightForms und FlightDeck; die Regeln hier
   ueberstimmen die App-eigenen Masse, damit Hoehe, Schrift und Abstaende
   ueberall identisch sind. Der orange Balken am Rand (FlightForms) entfaellt. */
.side{gap:14px}
.side .side-nav,.side .side-list,.side .side-groups{gap:2px}
.side .side-item,.side .sg-head{
  display:flex; align-items:center; gap:8px; box-sizing:border-box;
  min-height:42px; padding:9px 10px; border-radius:10px;
  font-size:13.5px; font-weight:400; line-height:1.55; letter-spacing:0;
}
.side .side-item.on,.side .sg-head.on{font-weight:600}
.side .sg-head.on::before{display:none}
.side .sg-list{margin:2px 0 6px 12px}

/* Schrift der Leiste und Avatar im Kontomenue: ueberall gleich, unabhaengig von der App. */
.side{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; font-size:15px; line-height:1.55}
.side .av{width:30px; height:30px; border-radius:50%; display:inline-grid; place-items:center; overflow:hidden;
  flex:0 0 auto; font-size:12px; font-weight:600; color:#fff; line-height:1}
.side .av img{width:100%; height:100%; object-fit:cover}
.side .side-foot,.side .fs-foot{margin-top:auto; padding-top:12px; border-top:1px solid rgba(255,255,255,.08)}
.side .fs-switch-txt strong{font-size:15px; font-weight:800; letter-spacing:.02em}
.side .fs-switch-txt em{font-size:9.5px; letter-spacing:.14em}
.side .fs-acct-btn .side-who{line-height:1.5}
.side .fs-acct-btn .side-who b,.side .fs-acct-btn .side-who>span{line-height:1.5}