/* backend-styles.css
   -------------------
   Gemeinsames Aussehen fuer ALLE Backend-Seiten (base.html und die
   eigenstaendigen Seiten wie Login, Firmenauswahl, Superadmin). Bewusst
   eine einzige gemeinsame Datei statt pro Template eigenes CSS - so bleibt
   das Backend optisch konsistent zur Landingpage (desksentinel.de) und
   Aenderungen muessen nur an EINER Stelle gepflegt werden.

   Farben und Schriften sind bewusst identisch zur Landingpage gewaehlt
   (siehe styles.css der Marketing-Seite) - fuer den Wiedererkennungswert,
   wenn ein Kunde von der Webseite zum Login wechselt. */

@font-face{ font-family:'Space Grotesk'; font-style:normal; font-weight:500; font-display:swap; src:url('fonts/space-grotesk-latin-500-normal.woff2') format('woff2'); }
@font-face{ font-family:'Space Grotesk'; font-style:normal; font-weight:600; font-display:swap; src:url('fonts/space-grotesk-latin-600-normal.woff2') format('woff2'); }
@font-face{ font-family:'Space Grotesk'; font-style:normal; font-weight:700; font-display:swap; src:url('fonts/space-grotesk-latin-700-normal.woff2') format('woff2'); }
@font-face{ font-family:'IBM Plex Sans'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2'); }
@font-face{ font-family:'IBM Plex Sans'; font-style:normal; font-weight:500; font-display:swap; src:url('fonts/ibm-plex-sans-latin-500-normal.woff2') format('woff2'); }
@font-face{ font-family:'IBM Plex Sans'; font-style:normal; font-weight:600; font-display:swap; src:url('fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2'); }
@font-face{ font-family:'IBM Plex Mono'; font-style:normal; font-weight:500; font-display:swap; src:url('fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2'); }
@font-face{ font-family:'IBM Plex Mono'; font-style:normal; font-weight:600; font-display:swap; src:url('fonts/ibm-plex-mono-latin-600-normal.woff2') format('woff2'); }
@font-face{ font-family:'Poppins'; font-style:italic; font-weight:600; font-display:swap; src:url('fonts/poppins-latin-600-italic.woff2') format('woff2'); }

:root{
  --ink: #08131f;
  --ink-2: #102033;
  --ink-3: #182c43;
  --line: rgba(234,241,240,0.13);
  --signal: #22D3BC;
  --signal-dim: rgba(34,211,188,0.14);
  --alert: #FF5A4E;
  --alert-dim: rgba(255,90,78,0.14);
  --amber: #F5A93F;
  --amber-dim: rgba(245,169,63,0.14);
  --paper: #EAF1F0;
  --slate: #9aafb6;
  --slate-dim: #68808a;
  --disp: 'Space Grotesk', sans-serif;
  --body: 'IBM Plex Sans', sans-serif;
  --mono: 'IBM Plex Mono', monospace;
  --logotype: 'Poppins', sans-serif;
  --brand-desk: #5FE0E8;
  --brand-sentinel: #22D3BC;
}

*{ box-sizing:border-box; }

body{
  font-family:var(--body);
  margin:0;
  background:
    radial-gradient(circle at 12% 0%, rgba(34,211,188,0.08), transparent 28rem),
    radial-gradient(circle at 88% 12%, rgba(95,224,232,0.06), transparent 24rem),
    var(--ink);
  color:var(--paper);
  line-height:1.6;
  min-height:100vh;
}

h1, h2, h3{ font-family:var(--disp); font-weight:600; letter-spacing:0; }
h1{ font-size:clamp(1.8rem, 3vw, 2.5rem); margin-bottom:0.5rem; }
h2{ color:var(--paper); }

a{ color:var(--signal); }

/* --- Navigation (base.html) --- */
nav{
  background:rgba(16,32,51,0.92);
  padding:0.85rem 2rem;
  display:flex;
  justify-content:space-between;
  align-items:center;
  position:relative;
  border-bottom:1px solid var(--line);
  box-shadow:0 10px 30px rgba(0,0,0,0.14);
  backdrop-filter:blur(14px);
}

.seitenleiste{
  position:fixed;
  inset:0 auto 0 0;
  width:250px;
  display:flex;
  flex-direction:column;
  padding:1.35rem 0.85rem 1rem;
  background:linear-gradient(180deg, rgba(16,32,51,0.98), rgba(8,19,31,0.98));
  border-right:1px solid var(--line);
  box-shadow:18px 0 42px rgba(0,0,0,0.16);
  z-index:200;
}
.seitenleiste-marke{ padding:0 0.75rem 1rem; border-bottom:1px solid var(--line); text-align:center; }
.seitenleiste-marke img{ display:block; width:118px; max-width:100%; height:auto; margin:0 auto; }
.seitenleiste-firma{ padding:0.85rem 0.75rem 1.25rem; color:var(--slate); font-size:0.78rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.seitenleiste-gruppe{ padding:1rem 0.75rem 0.4rem; color:var(--slate-dim); font-family:var(--mono); font-size:0.68rem; text-transform:uppercase; letter-spacing:0.08em; }
.seitenlink{ display:flex; align-items:center; gap:0.7rem; min-height:42px; padding:0.55rem 0.75rem; border-radius:9px; color:var(--slate); text-decoration:none; font-size:0.9rem; font-weight:500; transition:background .16s ease, color .16s ease, transform .16s ease; }
.seitenlink:hover{ background:rgba(34,211,188,0.10); color:var(--paper); transform:translateX(2px); }
.seitenlink-icon{ display:inline-flex; align-items:center; justify-content:center; width:1.35rem; color:var(--signal); font-family:var(--mono); font-size:0.95rem; }
.seitenleiste-fuss{ margin-top:auto; padding-top:0.8rem; border-top:1px solid var(--line); }

.marke{
  position:absolute; left:50%; transform:translateX(-50%);
  font-family:var(--logotype); font-style:italic; font-weight:600; font-size:1.35rem;
  display:flex; align-items:center; gap:8px;
}
.marke img{ height:28px; vertical-align:middle; }
/* Zweifarbig wie das echte Logo (Desk hell, Sentinel als Signalfarbe) -
   falls die Marke als reiner Text statt Bild eingebunden wird. */
.marke .t1{ color:var(--brand-desk); }
.marke .t2{ color:var(--brand-sentinel); }

.kopf-identitaet{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  align-items:baseline;
  gap:0.7rem;
  max-width:60%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.kopf-identitaet strong{ color:var(--paper); font-family:var(--disp); font-size:0.95rem; }
.kopf-trenner{ color:var(--slate-dim); }
.kopf-identitaet span{ color:var(--slate); font-size:0.85rem; }

.firmenname-zeile{
  text-align:center;
  background:rgba(16,32,51,0.82);
  color:var(--slate-dim);
  font-size:0.8rem;
  padding:0.35rem 0 0.55rem;
  border-bottom:1px solid var(--line);
  letter-spacing:0.02em;
}

.kopf-fixiert{
  /* position:sticky statt fixed: bleibt beim Scrollen genauso oben
     stehen, ordnet sich aber (bis der Scroll-Punkt erreicht ist) ganz
     normal in den Seitenfluss ein - dadurch "weiss" <main> automatisch,
     wie viel Platz freizuhalten ist, ganz ohne eigene JavaScript-
     Berechnung der Kopfbereichs-Höhe. */
  position:sticky;
  top:0;
  z-index:100;
  margin-left:250px;
}

.hamburger{
  background:none; border:none; color:var(--paper);
  font-size:1.6rem; cursor:pointer; padding:0; line-height:1;
  display:none;
}

.dropdown-menu{
  display:none;
  position:absolute; top:100%; left:0;
  background:var(--ink-2);
  border:1px solid var(--line);
  min-width:220px;
  box-shadow:0 12px 24px rgba(0,0,0,0.4);
  z-index:50;
  border-radius:0 0 8px 0;
}
.dropdown-menu.aktiv{ display:block; }
.dropdown-menu a{
  display:block; padding:0.75rem 1.5rem;
  color:var(--paper); text-decoration:none; font-weight:600; font-size:0.92rem;
}
/* Derselbe teal-getoente "Leucht"-Schatten wie bei button:hover (siehe
   unten) - Menüpunkte sollen sich beim Ueberfahren genauso anfuehlen wie
   ein echter Button, nicht nur die Hintergrundfarbe wechseln. */
.dropdown-menu a:hover{
  background:var(--ink-3);
  box-shadow:0 10px 24px -8px rgba(34,211,188,0.5);
  transform:translateX(2px);
}

/* .dropdown-menu wird pro Tabellenzeile wiederverwendet (siehe
   objekte.html/mitarbeiter.html) fuer das "⋮"-Aktionsmenue - Button
   innerhalb eines <form> (z.B. "Loeschen") soll optisch wie die <a>-
   Menuepunkte darueber wirken, nicht wie ein eigener Button mit Rand. */
.dropdown-menu button{
  display:block; width:100%; text-align:left;
  background:none; border:none; font-family:inherit;
  padding:0.75rem 1.5rem; color:var(--paper);
  font-weight:600; font-size:0.92rem; cursor:pointer;
}
.dropdown-menu button:hover{ background:var(--ink-3); }

.zeilenmenu{ position:relative; display:inline-block; }
.zeilenmenu form{ margin:0; }
.zeilenmenu-knopf{
  background:none; border:none; color:var(--slate);
  font-size:1.3rem; line-height:1; cursor:pointer;
  padding:0.1rem 0.6rem; border-radius:4px;
}
.zeilenmenu-knopf:hover{
  background:var(--ink-3); color:var(--paper);
  box-shadow:0 10px 20px -10px rgba(34,211,188,0.5);
}

nav .nav-rechts{ display:flex; align-items:center; }
nav .nav-rechts a{ color:var(--slate); margin-right:1rem; text-decoration:none; font-weight:500; font-size:0.9rem; }
nav .nav-rechts a:hover{ color:var(--paper); }
nav .nav-rechts a:not([download]){ display:inline-block; }

/* --- Layout --- */
main{ max-width:1060px; margin:2.6rem auto 4rem; padding:0 1.25rem; margin-left:calc(250px + max(1.25rem, (100vw - 250px - 1060px) / 2)); margin-right:max(1.25rem, (100vw - 250px - 1060px) / 2); }

/* --- Tabellen --- */
table{ width:100%; border-collapse:collapse; background:rgba(16,32,51,0.84); border:1px solid var(--line); border-radius:12px; overflow:hidden; box-shadow:0 14px 34px rgba(0,0,0,0.12); }
th, td{ padding:0.78rem 0.95rem; border-bottom:1px solid var(--line); text-align:left; font-size:0.92rem; }
th{ font-family:var(--mono); font-size:0.72rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--slate); font-weight:600; background:rgba(255,255,255,0.025); }
tr:last-child td{ border-bottom:none; }
tr:hover td{ background:rgba(255,255,255,0.02); }

form.inline{ display:inline; }

/* --- Flash-Nachrichten --- */
.flash{ padding:0.9rem 1.1rem; margin-bottom:1rem; border-radius:10px; font-size:0.92rem; border:1px solid transparent; box-shadow:0 10px 24px rgba(0,0,0,0.12); }
.flash.success{ background:var(--signal-dim); color:var(--signal); border-color:rgba(34,211,188,0.3); }
.flash.error{ background:var(--alert-dim); color:var(--alert); border-color:rgba(255,90,78,0.3); }

/* --- Boxen/Karten --- */
.box{ background:linear-gradient(145deg, rgba(24,44,67,0.92), rgba(16,32,51,0.92)); border:1px solid var(--line); padding:1.5rem; border-radius:14px; margin-top:1.5rem; box-shadow:0 18px 40px rgba(0,0,0,0.14); }

/* --- Formularelemente --- */
input, select, textarea, button{
  font-family:var(--body);
  padding:0.55rem 0.7rem;
  margin:0.2rem 0;
  border-radius:8px;
  border:1px solid var(--line);
  background:var(--ink);
  color:var(--paper);
  font-size:0.92rem;
}
input:focus, select:focus, textarea:focus{ outline:none; border-color:var(--signal); }
input:focus, select:focus, textarea:focus{ box-shadow:0 0 0 3px var(--signal-dim); }
input[disabled], select[disabled]{ opacity:0.45; cursor:not-allowed; }
label{ font-size:0.9rem; color:var(--slate); }

button{
  background:var(--signal);
  color:#04211C;
  border:none;
  font-weight:600;
  cursor:pointer;
  transition:transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
button:hover{ transform:translateY(-1px); box-shadow:0 10px 24px -8px rgba(34,211,188,0.62); filter:saturate(1.12); }

/* Sekundaere/gefaehrliche Aktionen (z.B. Loeschen-Buttons in Tabellen)
   sollen nicht wie die Haupt-Aktion aussehen - dezent statt signalgruen. */
form.inline button, table button{
  background:transparent; color:var(--alert); border:1px solid var(--alert-dim);
}
form.inline button:hover, table button:hover{ background:var(--alert-dim); box-shadow:none; }

/* Neutrale Sekundaer-Aktionen als Link (Abbrechen, Zurueck) - sollen
   genauso wie ein Button aussehen und sich anklicken lassen, aber
   optisch zurueckhaltender bleiben als die primaere gefuellte Aktion
   (form-button oben). Outline statt Fuellung dafuer. */
.knopf-sekundaer{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0.55rem 1rem;
  margin:0.3rem 0;
  border-radius:8px;
  border:1px solid var(--line);
  background:transparent;
  color:var(--paper);
  text-decoration:none;
  font-size:0.92rem;
  font-weight:600;
  cursor:pointer;
  transition:background .16s ease, border-color .16s ease, transform .16s ease;
}
.knopf-sekundaer:hover{
  background:rgba(255,255,255,0.06); border-color:var(--slate); transform:translateY(-1px);
  box-shadow:0 10px 24px -8px rgba(34,211,188,0.5);
}
/* Nur wenn direkt NACH einem Button (z.B. "Speichern") im Fluss -
   Abstand dazu, damit es nicht am Button klebt. Steht der Link
   alleine (eigener Absatz), soll er nicht unnoetig eingerueckt sein. */
button + .knopf-sekundaer{ margin-left:0.6rem; }

/* --- Eigener Tooltip (statt native title-Attribute) --- */
/* Native title-Tooltips lassen sich weder in Groesse noch Verzoegerung
   beeinflussen (Browser-Sache). Hier stattdessen per data-tooltip-
   Attribut + reinem CSS: groessere, besser lesbare Schrift und eine
   sehr kurze Verzoegerung (nahezu sofort) statt der browserueblichen
   ~1 Sekunde. Ueberall im Backend wiederverwendbar, einfach
   data-tooltip="..." auf ein beliebiges Element setzen. */
[data-tooltip]{ position:relative; }
[data-tooltip]::after{
  content:attr(data-tooltip);
  position:absolute;
  bottom:calc(100% + 8px); left:50%;
  transform:translateX(-50%);
  background:var(--ink-2);
  color:var(--paper);
  border:1px solid var(--line);
  padding:0.5rem 0.85rem;
  border-radius:8px;
  font-size:1rem;
  font-weight:500;
  white-space:nowrap;
  box-shadow:0 12px 24px rgba(0,0,0,0.4);
  opacity:0;
  pointer-events:none;
  transition:opacity .06s ease;
  transition-delay:0s;
  z-index:100;
}
[data-tooltip]:hover::after, [data-tooltip]:focus-visible::after{
  opacity:1;
  transition-delay:.05s;
}

summary{ cursor:pointer; color:var(--slate); font-size:0.9rem; }
details ul{ font-size:0.85rem; color:var(--slate); }

/* --- Status-Texte (Superadmin-Firmenliste) --- */
.status-aktiv{ color:var(--signal); font-weight:600; }
.status-inaktiv{ color:var(--slate-dim); font-weight:600; }

/* --- Auth-Seiten (Login, Firmenauswahl, Superadmin-Login) --- */
.auth-seite{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding-top:15vh;
}
.auth-box{
  background:linear-gradient(145deg, rgba(24,44,67,0.96), rgba(16,32,51,0.96));
  border:1px solid var(--line);
  border-radius:16px;
  padding:2rem;
  width:100%;
  max-width:360px;
  margin-top:2rem;
  box-shadow:0 24px 60px rgba(0,0,0,0.24);
}
.auth-logo{ display:flex; align-items:center; gap:10px; font-family:var(--logotype); font-style:italic; font-weight:600; font-size:1.4rem; }
.auth-logo img{ height:32px; }

@media (max-width:760px){
  .seitenleiste{
    transform:translateX(-105%);
    transition:transform .2s ease;
  }
  .seitenleiste.offen{ transform:translateX(0); }
  .kopf-fixiert{ margin-left:0; }
  .hamburger{ display:block; }
  .marke{ position:absolute; }
  nav{ padding:0.75rem 1rem; }
  nav .nav-rechts span{ display:none; }
  nav .nav-rechts a[download]{ display:none; }
  .kopf-identitaet{ max-width:58%; gap:0.35rem; }
  .kopf-identitaet strong, .kopf-identitaet span{ overflow:hidden; text-overflow:ellipsis; }
  main{ margin:1.8rem 0 3rem; padding:0 1rem; }
}