/* ============================================================
   KSW Werkzeugkasten – gemeinsames Design
   Eine Datei fuer das einheitliche Aussehen aller Programme.
   Aendere hier Farben/Schrift -> alle Seiten passen sich an.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&family=Barlow+Condensed:wght@600;700&display=swap');

:root {
  --ksw-ink:      #1E1B4B;
  --ksw-ink-2:    #312E81;
  --ksw-indigo:   #4338CA;
  --ksw-indigo-2: #5B5FEF;
  --ksw-accent:   #818CF8;
  --ksw-cyan:     #06B6D4;
  --ksw-violet:   #C084FC;
  --ksw-topbar-h: 50px;
}

/* ---- Platz fuer die fixe Kopfleiste schaffen (fuer JEDES Layout sicher) -- */
html { padding-top: var(--ksw-topbar-h) !important; }

/* ---- Einheitliche KSW-Kopfleiste ---------------------------------------- */
.ksw-topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 2147483000;
  display: flex; align-items: center; gap: 14px;
  height: var(--ksw-topbar-h);
  padding: 0 16px;
  background: linear-gradient(135deg, #1E1B4B, #312E81 55%, #4338CA);
  box-shadow: 0 2px 14px rgba(30, 27, 75, .35);
  font-family: 'Barlow', system-ui, -apple-system, sans-serif;
  color: #fff;
  -webkit-font-smoothing: antialiased;
}
.ksw-topbar * { box-sizing: border-box; }

.ksw-brand {
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 9px; padding: 5px 8px; flex: 0 0 auto;
}
.ksw-brand-logo { height: 26px; width: auto; display: block; border-radius: 4px; }

.ksw-home {
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none; color: #fff;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 9px; padding: 7px 13px;
  font-weight: 600; font-size: 14px; line-height: 1;
  transition: background .15s, transform .15s;
  white-space: nowrap;
}
.ksw-home:hover { background: rgba(255,255,255,.24); transform: translateY(-1px); }
.ksw-home-ic { font-size: 15px; }

.ksw-appname {
  font-family: 'Barlow Condensed', 'Barlow', sans-serif;
  font-weight: 700; font-size: 19px; letter-spacing: .3px;
  color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ksw-appname::before {
  content: ""; display: inline-block; width: 1px; height: 22px;
  background: rgba(255,255,255,.25); margin: 0 14px -5px 2px;
}
.ksw-spacer { flex: 1 1 auto; }

/* Aufnahmebereich fuer die Funktionsknoepfe der Programme */
.ksw-actions { display: flex; align-items: center; gap: 6px; }
.ksw-actions > * { margin: 0 !important; }
/* Verschobene Programm-Knoepfe EINHEITLICH auf die dunkle Leiste stylen,
   egal wie sie im Programm ausgesehen haben (weiss auf transluzent). */
.ksw-actions button,
.ksw-actions a.btn, .ksw-actions .btn,
.ksw-actions .nav-btn, .ksw-actions .btn-topbar,
.ksw-actions .btn-icon, .ksw-actions .btn-outline, .ksw-actions .btn-violet {
  background: rgba(255,255,255,.12) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  color: #fff !important;
  border-radius: 9px !important;
  padding: 7px 12px !important;
  font: 600 13px/1 'Barlow', system-ui, sans-serif !important;
  box-shadow: none !important;
  cursor: pointer; white-space: nowrap;
  height: auto !important; min-height: 0 !important; transform: none !important;
  display: inline-flex; align-items: center; gap: 6px;
}
.ksw-actions button:hover,
.ksw-actions .btn:hover, .ksw-actions .nav-btn:hover,
.ksw-actions .btn-topbar:hover, .ksw-actions .btn-icon:hover,
.ksw-actions .btn-outline:hover, .ksw-actions .btn-violet:hover {
  background: rgba(255,255,255,.24) !important;
}
/* Cloud-„verbunden"-Status bleibt gruen erkennbar */
.ksw-actions .nav-btn.cloud-ok {
  background: rgba(16,185,129,.30) !important; border-color: rgba(16,185,129,.55) !important;
}
/* SVG-Icons in verschobenen Knoepfen mitfaerben */
.ksw-actions button svg { stroke: currentColor; fill: none; width: 16px; height: 16px; }

.ksw-user {
  font-size: 12.5px; color: rgba(199,210,254,.85);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 34vw;
}
.ksw-logout {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  color: rgba(226,232,255,.95);
  border-radius: 9px; padding: 7px 13px;
  font-family: 'Barlow', sans-serif; font-weight: 600; font-size: 13px;
  cursor: pointer; line-height: 1; white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s;
}
.ksw-logout:hover {
  background: rgba(239,68,68,.28); border-color: rgba(239,68,68,.45); color: #FCA5A5;
}

/* farbiger Zierstreifen unter der Leiste */
.ksw-topbar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: linear-gradient(90deg, transparent, #818CF8, #06B6D4, #C084FC, transparent);
}

/* Auf schmalen Bildschirmen Text sparsamer */
@media (max-width: 640px) {
  .ksw-home-tx { display: none; }
  .ksw-appname { font-size: 16px; }
  .ksw-appname::before { margin: 0 10px -4px 2px; }
  .ksw-user { display: none; }
}

@media print { .ksw-topbar { display: none !important; } }