:root{
  --bg:#0b0f14;
  --panel:#121924;
  --panel2:#0f1620;
  --text:#e6edf3;
  --muted:#9fb0c0;
  --accent:#4aa3ff;
  --danger:#ff4d4d;
  --ok:#30d158;
  --border:#233044;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background: radial-gradient(1200px 800px at 30% 10%, #101a28 0%, var(--bg) 60%);
  color:var(--text);
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}

.container{max-width:1100px;margin:0 auto;padding:24px}
.nav{
  display:flex; gap:14px; align-items:center;
  padding:14px 18px; border:1px solid var(--border);
  background:linear-gradient(180deg,var(--panel),var(--panel2));
  border-radius:14px; box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.nav .brand{font-weight:700; letter-spacing:.4px; margin-right:auto}
.chip{
  padding:6px 10px;border:1px solid var(--border);
  border-radius:999px;background:rgba(255,255,255,.03);color:var(--muted);font-size:13px
}
.card{
  border:1px solid var(--border);
  background:linear-gradient(180deg,var(--panel),var(--panel2));
  border-radius:18px; padding:18px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.grid{display:grid; gap:16px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:900px){.grid-2{grid-template-columns:1fr}}

.h1{font-size:28px; margin:0 0 6px}
.p{margin:0;color:var(--muted);line-height:1.6}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px;border-radius:12px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.04);
  color:var(--text);
  cursor:pointer;
}
.btn:hover{background:rgba(255,255,255,.07)}
.input, .select, .textarea{
  width:100%;
  padding:10px 12px;border-radius:12px;
  border:1px solid var(--border);
  background:rgba(0,0,0,.25);
  color:var(--text);
  outline:none;
}
.input:focus, .select:focus, .textarea:focus{border-color:#2b4a73}
.row{display:flex; gap:12px}
.row > *{flex:1}
.hr{height:1px;background:var(--border);margin:16px 0}
.small{font-size:13px;color:var(--muted)}
.badge{font-size:12px;padding:4px 8px;border-radius:999px;border:1px solid var(--border);color:var(--muted)}
.badge.ok{color:var(--ok); border-color: rgba(48,209,88,.4)}
.badge.danger{color:var(--danger); border-color: rgba(255,77,77,.4)}

/* --- Tag Chips (Aktenarchiv) --- */
.tag-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.tag-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 10px;border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  font-size:12.5px;letter-spacing:.2px;
}
.tag-chip::before{content:"•";opacity:.75}
.tag-red{border-color:rgba(255,90,90,.35);background:rgba(255,90,90,.10)}
.tag-orange{border-color:rgba(255,165,0,.35);background:rgba(255,165,0,.10)}
.tag-green{border-color:rgba(90,255,160,.30);background:rgba(90,255,160,.08)}
.tag-blue{border-color:rgba(90,160,255,.35);background:rgba(90,160,255,.10)}
.tag-purple{border-color:rgba(190,120,255,.35);background:rgba(190,120,255,.10)}
.tag-cyan{border-color:rgba(90,255,255,.30);background:rgba(90,255,255,.08)}
.tag-prio{font-weight:600}

/* --- KI Box: kleine optische Aufwertung --- */
.ai-box{
  border:1px solid rgba(255,255,255,.16);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
}
.ai-box h3, .ai-box .h2 {letter-spacing:.3px}

/* --- Tag Chips (Aktenarchiv) --- */
.tag-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.tag-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 10px;border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  font-size:12.5px;letter-spacing:.2px;
}
.tag-chip::before{content:"•";opacity:.75}
.tag-red{border-color:rgba(255,90,90,.35);background:rgba(255,90,90,.10)}
.tag-orange{border-color:rgba(255,165,0,.35);background:rgba(255,165,0,.10)}
.tag-green{border-color:rgba(90,255,160,.30);background:rgba(90,255,160,.08)}
.tag-blue{border-color:rgba(90,160,255,.35);background:rgba(90,160,255,.10)}
.tag-purple{border-color:rgba(190,120,255,.35);background:rgba(190,120,255,.10)}
.tag-cyan{border-color:rgba(90,255,255,.30);background:rgba(90,255,255,.08)}
.tag-prio{font-weight:600}

/* --- KI Box: kleine optische Aufwertung --- */
.ai-box{
  border:1px solid rgba(255,255,255,.16);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
}
.ai-box h3, .ai-box .h2 {letter-spacing:.3px}


/* AKTENARCHIV TAGS */
.tag{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  font-size:12px; line-height:1; white-space:nowrap;
  margin:4px 6px 0 0;
}
.tag::before{content:"•"; opacity:.7}
.tag-red{background:rgba(255,77,77,.14); border-color:rgba(255,77,77,.35)}
.tag-amber{background:rgba(255,180,60,.14); border-color:rgba(255,180,60,.35)}
.tag-green{background:rgba(48,209,88,.12); border-color:rgba(48,209,88,.30)}
.tag-blue{background:rgba(74,163,255,.14); border-color:rgba(74,163,255,.35)}
.tag-purple{background:rgba(190,120,255,.14); border-color:rgba(190,120,255,.35)}

.kv{display:grid; grid-template-columns: 220px 1fr; gap:10px; align-items:start}
@media (max-width:900px){.kv{grid-template-columns: 1fr}}

.box{
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.18);
  border-radius:14px;
  padding:12px;
}

pre.pretty{
  margin:0;
  white-space:pre-wrap;
  word-break:break-word;
  font-size:13px;
  line-height:1.45;
}

/* === HEADER/NAV FIX (wrap + spacing) === */
.nav{
  display:flex;
  align-items:center;
  flex-wrap:wrap;          /* erlaubt Zeilenumbruch */
  gap:10px;                /* sauberer Abstand statt "komisch verteilt" */
}

.nav .brand{
  margin-right:8px;
  white-space:nowrap;
}

.nav .chip{
  white-space:nowrap;      /* Chips bleiben "kompakt" */
}

.container{
  max-width: 1180px;       /* verhindert ultrabreite Darstellung */
  margin: 0 auto;
}

/* Wenn es auf sehr kleinen Screens trotzdem eng wird -> horizontal scroll statt kaputt */
.nav{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

/* === HEADER/NAV FIX (wrap + spacing) === */
.nav{
  display:flex;
  align-items:center;
  flex-wrap:wrap;          /* erlaubt Zeilenumbruch */
  gap:10px;                /* sauberer Abstand statt "komisch verteilt" */
}

.nav .brand{
  margin-right:8px;
  white-space:nowrap;
}

.nav .chip{
  white-space:nowrap;      /* Chips bleiben "kompakt" */
}

.container{
  max-width: 1180px;       /* verhindert ultrabreite Darstellung */
  margin: 0 auto;
}

/* Wenn es auf sehr kleinen Screens trotzdem eng wird -> horizontal scroll statt kaputt */
.nav{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

/* === FIX: Header/Nav overflow / wrapping === */
.nav{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  max-width:100%;
  overflow:hidden;
}

/* Chips dürfen umbrechen/kleiner werden statt rauszulaufen */
.nav .chip{
  max-width:100%;
  white-space:normal;
}

/* Der inline Spacer (span style="flex:1") soll bei wenig Platz umbrechen dürfen */
.nav span[style*="flex:1"]{
  flex: 1 1 120px;
  min-width: 0;
}

/* Wenn es eng wird: Login-Buttons lieber in nächste Zeile statt Overflow */
@media (max-width: 1200px){
  .nav span[style*="flex:1"]{
    flex-basis:100%;
    height:0;
  }
}

/* === FIX OVERRIDE: Nav darf umbrechen (letzte Regel gewinnt) === */
.nav{ flex-wrap:wrap !important; overflow:hidden !important; }
.nav .chip{ white-space:normal !important; max-width:100% !important; }

/* === FINAL FIX: Header sauber wrappt, keine Chips laufen raus === */
.nav{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  gap:10px !important;
  max-width:100% !important;
  overflow:hidden !important;
}

.nav .brand{
  flex:0 0 auto !important;
  white-space:normal !important;
}

.nav .chip{
  flex:0 1 auto !important;
  max-width:100% !important;
  white-space:normal !important;
  min-width:0 !important;
}

.nav span[style*="flex:1"]{
  flex:1 1 160px !important;
  min-width:0 !important;
}

@media (max-width: 1200px){
  .nav span[style*="flex:1"]{
    flex-basis:100% !important;
    height:0 !important;
  }
}

/* === FIX: Brand/Spacer verursachen leere Fläche -> neutralisieren === */
.nav { justify-content:flex-start !important; }

.nav .brand{
  margin-right:12px !important;   /* statt margin-right:auto */
}

.nav span[style*="flex:1"]{
  flex:0 0 0 !important;
  width:0 !important;
  height:0 !important;
  margin:0 !important;
  padding:0 !important;
}

/* Optional: Nav EINZEILIG + horizontal scroll statt umbrechen */
.nav{
  flex-wrap:nowrap !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  -webkit-overflow-scrolling:touch;
}

/* Scrollbar optisch dezenter (optional) */
.nav::-webkit-scrollbar{ height:6px; }
.nav::-webkit-scrollbar-thumb{ border-radius:8px; }

.nav .chip{
  white-space:nowrap !important;
  flex:0 0 auto;
}

/* === FINAL FIX: Einzeilige Nav ohne Überlappung === */
.nav{
  display:flex !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  gap:10px !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  white-space:nowrap !important;
  -webkit-overflow-scrolling:touch;
}

/* Spacer raus, weil der sonst alles "zusammendrückt" */
.nav span[style*="flex:1"]{
  display:none !important;
}

/* Chips dürfen NICHT schrumpfen -> kein Text-Overlap */
.nav .chip{
  flex:0 0 auto !important;
  white-space:nowrap !important;
}

/* Brand auch fix */
.nav .brand{
  flex:0 0 auto !important;
  white-space:nowrap !important;
}

/* =========================================
   BKA PREMIUM COMMAND BACKGROUND
   ========================================= */

body {
    background: radial-gradient(circle at 20% 20%, rgba(70,140,255,0.15), transparent 40%),
                radial-gradient(circle at 80% 80%, rgba(70,140,255,0.08), transparent 50%),
                linear-gradient(180deg, #07111f 0%, #050b16 100%) !important;
    overflow-x: hidden;
}

/* LOGO WATERMARK */
body::before {
    content: "";
    position: fixed;
    top: 50%;
    left: 50%;
    width: 700px;
    height: 700px;
    transform: translate(-50%, -50%);
    background: url('/assets/img/bka-logo-transparent.png') no-repeat center;
    background-size: contain;
    opacity: 0.05;
    pointer-events: none;
    z-index: 0;
    animation: bkaFloat 12s ease-in-out infinite;
}

/* SOFT LIGHT OVERLAY */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    background:
        radial-gradient(circle at 30% 40%, rgba(120,190,255,0.08), transparent 40%),
        radial-gradient(circle at 70% 60%, rgba(70,140,255,0.05), transparent 50%);
    pointer-events: none;
    z-index: 0;
    animation: bkaGlow 10s ease-in-out infinite;
}

/* FLOAT ANIMATION */
@keyframes bkaFloat {
    0% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -52%) scale(1.03); }
    100% { transform: translate(-50%, -50%) scale(1); }
}

/* GLOW ANIMATION */
@keyframes bkaGlow {
    0% { opacity: 0.6; }
    50% { opacity: 1; }
    100% { opacity: 0.6; }
}

/* CONTENT LAYER FIX */
.main-content, .container, .dashboard, .card {
    position: relative;
    z-index: 2;
}

/* REMOVE OLD GRID IF EXISTS */
body {
    background-image: none !important;
}

/* OPTIONAL: GLASS EFFECT FOR CARDS */
.card {
    background: rgba(10, 20, 40, 0.65) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(120,190,255,0.08);
    box-shadow: 0 0 30px rgba(0,0,0,0.5);
}



/* === GLOBAL BKA GLOW BACKGROUND FIX === */
html, body{
  min-height:100%;
}

html{
  background:
    radial-gradient(circle at 18% 20%, rgba(45,110,255,.22), transparent 0 24%),
    radial-gradient(circle at 82% 10%, rgba(25,88,255,.18), transparent 0 22%),
    radial-gradient(circle at 50% 50%, rgba(18,52,130,.10), transparent 0 40%),
    linear-gradient(180deg, #04101f 0%, #020815 45%, #01050e 100%);
  background-color:#020815;
}

body{
  background:transparent !important;
  color:#eaf1ff;
  position:relative;
  overflow-x:hidden;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:
    radial-gradient(circle at 18% 22%, rgba(57,122,255,.18), transparent 0 22%),
    radial-gradient(circle at 80% 12%, rgba(26,93,255,.16), transparent 0 20%),
    radial-gradient(circle at 50% 55%, rgba(25,71,190,.08), transparent 0 34%),
    linear-gradient(180deg, #051122 0%, #030916 48%, #020611 100%);
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    linear-gradient(to right, rgba(255,255,255,.02) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.015) 1px, transparent 1px);
  background-size:120px 120px, 120px 120px;
  opacity:.12;
  mask-image: radial-gradient(circle at center, black 45%, transparent 100%);
  -webkit-mask-image: radial-gradient(circle at center, black 45%, transparent 100%);
}

.container{
  position:relative;
  z-index:1;
}