/* Shell der Plattform: Modul-Leiste (links, dunkel) und Kontext-Seitenleiste je Modul. Gilt im Mitarbeiterportal
   (body.sl-an) und in der ERP Planung (html.sl-erp, über die Plattform-Anbindung). Akzent = Firmenfarbe (--marke),
   in der ERP Planung deren Blau. Keine Inline-Styles; die Leiste nutzt nur eigene Klassen (sl-…). */
:root {
  --sl-breite: 72px;
  --sl-kontext-breite: 248px;
  --sl-dunkel: #141416;
  --sl-dunkel-text: #a9a9b2;
  --sl-akzent: var(--marke, #0071e3);
  --sl-hell: #fbfbfd;
  --sl-linie: #e5e5ea;
  --sl-text: #1d1d1f;
  --sl-leise: #6e6e73;
}

/* ---------- Modul-Leiste ---------- */
.sl-leiste {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--sl-breite);
  background: var(--sl-dunkel);
  color: var(--sl-dunkel-text);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 0 12px;
  box-sizing: border-box;
  z-index: 40;
  overflow-y: auto;
  scrollbar-width: none;
}
.sl-leiste::-webkit-scrollbar { display: none; }
.sl-gruppe { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; }
.sl-unten { margin-top: auto; }
.sl-logo {
  display: flex;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: var(--sl-akzent);
  color: #fff;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  text-decoration: none;
  flex: none;
  overflow: hidden;
}
.sl-logo img { width: 32px; height: 32px; object-fit: contain; background: #fff; border-radius: 8px; }
.sl-logo-zeichen { width: 22px; height: 22px; }
.sl-zeichen {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
.sl-m {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 60px;
  min-height: 48px;
  padding: 7px 0 6px;
  border-radius: 10px;
  color: var(--sl-dunkel-text);
  text-decoration: none;
  font: 500 10px/1 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  text-align: center;
}
.sl-m:hover, .sl-m:focus-visible { background: rgba(255, 255, 255, .09); color: #fff; outline: none; }
.sl-m:focus-visible { box-shadow: 0 0 0 2px #fff inset; }
.sl-m.sl-aktiv { background: var(--sl-akzent); color: #fff; }
.sl-mt { white-space: nowrap; max-width: 60px; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Kontext-Seitenleiste (Bereiche des Moduls) ---------- */
.sl-kontext {
  background: var(--sl-hell);
  border-right: 1px solid var(--sl-linie);
  padding: 14px 10px;
  box-sizing: border-box;
  position: sticky;
  top: 0;
  align-self: start;
  max-height: 100vh;
  overflow-y: auto;
}
.sl-kt { font: 700 15px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; padding: 4px 10px 10px; color: var(--sl-text); letter-spacing: -.01em; }
.sl-bereiche { display: flex; flex-direction: column; gap: 2px; }
.sl-b {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--sl-text);
  text-decoration: none;
  font: 500 13.5px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
.sl-b:hover { background: rgba(118, 118, 128, .12); }
.sl-b.sl-aktiv { background: color-mix(in srgb, var(--sl-akzent) 12%, #fff); color: var(--sl-akzent); font-weight: 600; }
.sl-bz { width: 18px; height: 18px; color: var(--sl-leise); }
.sl-b.sl-aktiv .sl-bz { color: var(--sl-akzent); }

/* ---------- Portal mit Shell (Mitarbeitende, angemeldet) ---------- */
body.sl-an {
  padding-left: var(--sl-breite);
  display: grid;
  grid-template-columns: var(--sl-kontext-breite) minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  grid-template-areas: "kopf kopf" "hinweise hinweise" "kontext inhalt" "fuss fuss";
}
body.sl-an.sl-ohne-kontext {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "kopf" "hinweise" "inhalt" "fuss";
}
body.sl-an > .kopf { grid-area: kopf; }
body.sl-an > .hinweise { grid-area: hinweise; }
body.sl-an > .sl-kontext { grid-area: kontext; }
body.sl-an > .inhalt { grid-area: inhalt; max-width: none; margin: 0; padding: 24px 28px 40px; }
body.sl-an > .inhalt > * { max-width: 1240px; }
body.sl-an > .fuss { grid-area: fuss; max-width: none; }
body.sl-an .kopf-innen { max-width: none; }
/* Startseite: Module als Gruppen mit Kacheln */
.sl-modulgruppe { margin-top: 20px; }
.sl-modulgruppe > h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.sl-modulgruppe > h2 .sl-zeichen { color: var(--sl-akzent); }
.sl-modulgruppe > .kacheln { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.sl-modulgruppe .kachel p { font-size: .9rem; }

/* ---------- Handy und Tablet im Portal: Leiste unten, Bereiche als Zeile ---------- */
@media (max-width: 760px) {
  body.sl-an {
    padding-left: 0;
    padding-bottom: 64px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "kopf" "hinweise" "kontext" "inhalt" "fuss";
  }
  body.sl-an.sl-ohne-kontext { grid-template-areas: "kopf" "hinweise" "inhalt" "fuss"; }
  body.sl-an > .inhalt { padding: 16px 16px 32px; }
  .sl-leiste {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: auto;
    height: 60px;
    flex-direction: row;
    align-items: stretch;
    padding: 4px 6px calc(4px + env(safe-area-inset-bottom, 0px));
    overflow-x: auto;
    overflow-y: hidden;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, .18);
  }
  .sl-logo { display: none; }
  .sl-gruppe { flex-direction: row; width: auto; align-items: stretch; }
  .sl-unten { margin-top: 0; margin-left: auto; }
  .sl-m { width: 64px; min-height: 48px; padding: 5px 0 4px; }
  .sl-kontext {
    position: static;
    max-height: none;
    border-right: 0;
    border-bottom: 1px solid var(--sl-linie);
    padding: 8px 12px;
  }
  .sl-kt { display: none; }
  .sl-bereiche { flex-direction: row; overflow-x: auto; gap: 6px; scrollbar-width: none; }
  .sl-bereiche::-webkit-scrollbar { display: none; }
  .sl-b { flex: none; min-height: 40px; padding: 8px 12px; border: 1px solid var(--sl-linie); border-radius: 999px; background: #fff; }
  .sl-b.sl-aktiv { border-color: var(--sl-akzent); }
}

/* ---------- ERP Planung mit Leiste (über die Plattform-Anbindung) ---------- */
html.sl-erp #app { margin-left: var(--sl-breite); }
html.sl-erp .pa-hinweise { left: var(--sl-breite); }
html.sl-erp .sl-leiste { --sl-akzent: #0071e3; }
@media (max-width: 900px) {
  html.sl-erp #app { margin-left: 0; }
  html.sl-erp .pa-hinweise { left: 0; }
  html.sl-erp .sl-leiste { display: none; }
}
@media (pointer: coarse) {
  .sl-m, .sl-b { min-height: 44px; }
}