/*! ==========================================================================
   framework.css  —  OK DockApp Framework Styles
   ---------------------------------------------------------------------------
   Build aus:
     - app.css    (Header/Appbar/Toolbar/Badges/Buttons)
     - dock.css   (Bottom Dock, Light/Dark Theme)
   Autor: Klaus Lay
   Hinweis:
     - Diese Datei vereint Framework-Styles, die für alle Tenants gelten.
     - Tenant-spezifisches Branding bitte in einer separaten tenant.css überschreiben.
   ========================================================================== */

/* ==========================================================================
   Abschnitt A — App-Grundlagen (aus app.css)
   ========================================================================== */

/* Platz nach unten, damit Content nicht unter das Dock läuft */
main { padding-bottom: 84px; }

/* Optik des Dock-Menüs / Appbar */
.appbar {
  position: sticky;
  top: 0;
  z-index: 1020;
  /* Hintergrundverlauf optional aktivieren:
     background: linear-gradient(to bottom, rgba(255,255,255,.9), rgba(255,255,255,.6)); */
  backdrop-filter: blur(3px);
  border-bottom: 1px solid var(--bs-border-color);
}

.badge-equal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.4rem;          /* gleiche Höhe wie Icon-Buttons */
  padding: 0 0.75rem;      /* horizontal etwas Luft */
  font-size: 0.9rem;       /* sonst wirkt der Text zu gedrungen */
}

/* Quadratische Buttons (Icons & Toggle) */
.icon-btn {
  width: 2.4rem;
  height: 2.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: .5rem;
}

/* Horizontale Icon-Leiste (mobil scrollbar) */
.toolbar-icons {
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.toolbar-icons::-webkit-scrollbar { height: 6px; }
.toolbar-icons::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,.25);
  border-radius: 3px;
}

/* breite Container-Variante */
@media (min-width: 1400px) {
  .OK-fullwidth {
    max-width: none;
    padding-left: 3rem;
    padding-right: 3rem;
  }
}

/* Header: sekundäre Buttons kompakt */
@media (min-width: 576px) {
  header nav a.btn.btn-outline-secondary {
    width: 2.4rem;
    height: 2.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: .5rem;
  }
}

/* XS: User-Button quadratisch und größer */
@media (max-width: 575.98px) {
  .user-btn {
    width: 2.4rem;
    height: 2.4rem;
    padding: 0;
    border-radius: .5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* Icon auf XS leicht vergrößern */
  .user-btn .fa-circle-user {
    font-size: 1.25rem;
  }
}

/* Aktiver Nav-Button (rechte Toolbar) */
header .toolbar-icons .btn.active,
header .toolbar-icons .btn[aria-current="page"] {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  color: var(--bs-white);
}
header .toolbar-icons .btn.active i,
header .toolbar-icons .btn[aria-current="page"] i {
  color: var(--bs-white);
}

/* Optional: dezent auch im XS-Dropdown markieren */
header .dropdown-menu .dropdown-item.active,
header .dropdown-menu .dropdown-item[aria-current="page"] {
  background-color: var(--bs-primary);
  color: var(--bs-white);
}

/* ==========================================================================
   Abschnitt B — Dock (aus dock.css)
   ========================================================================== */

/* =========================
   DOCK – BASE LAYOUT (both themes)
   ========================= */
.dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1030;
  border-top: 1px solid var(--bs-border-color);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: .35rem 0;
}

/* Kompakte Nav-Buttons (icon über text) */
.dock .nav { align-items: center; }
.dock .nav-link {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: .35rem .5rem;   /* kompakt */
  margin: 0 .15rem;
  min-width: 3rem;
  min-height: 3rem;
  font-size: .75rem;
  line-height: 1.1;
  text-decoration: none;
  border-radius: .6rem;
  transition:
    color .15s ease,
    background-color .15s ease,
    box-shadow .15s ease,
    transform .12s ease;
  /* Farbe kommt aus Variablen (je Theme gesetzt) */
  color: var(--dock-fg, var(--bs-body-color));
  background-color: transparent; /* Basis: nie gefüllt */
}

/* Icons folgen der Textfarbe */
.dock .nav-link .icon i {
  font-size: 1.1rem;
  margin-bottom: .15rem;
  color: currentColor !important;
}

/* Hover: dezent, keine Fläche */
.dock .nav-link:hover {
  transform: translateY(-1px);
  background-color: transparent;
}

/* Active: nur Textfarbe, keine Fläche, kein Glow */
.dock .nav-link.active,
.dock .nav-link[aria-current="page"] {
  color: var(--dock-active-fg, var(--bs-primary)) !important;
  font-weight: 600;
  background-color: transparent !important;
  box-shadow: none !important;
  transform: translateY(-1px);
}

/* =========================
   LIGHT THEME
   ========================= */
:root,
[data-bs-theme="light"] {
  --dock-bg-light: rgba(255,255,255,0.85);
  --dock-fg: var(--bs-emphasis-color); /* gut lesbarer Text */
  --dock-active-fg: var(--bs-primary);
}
:root .dock,
[data-bs-theme="light"] .dock {
  background-color: var(--dock-bg-light);
  box-shadow:
    0 -1px 0 rgba(0,0,0,.06) inset,
    0 -10px 20px rgba(0,0,0,.08),
    0 -2px 8px rgba(0,0,0,.05);
}

/* =========================
   DARK THEME
   ========================= */
[data-bs-theme="dark"] {
  /* nicht zu dunkel – fein einstellbar über die Alpha */
  --dock-bg-dark: rgba(15,17,20,0.60);
  --dock-fg: rgba(255,255,255,0.92);
  --dock-active-fg: color-mix(in srgb, var(--bs-primary) 88%, #fff 12%);
}
[data-bs-theme="dark"] .dock {
  background-color: var(--dock-bg-dark) !important;
  box-shadow:
    0 -1px 0 rgba(255,255,255,.04) inset,
    0 -8px 20px rgba(0,0,0,.45); /* clean, kein Glow */
}
/* Dark: Basisfarbe für Links */
[data-bs-theme="dark"] .dock .nav-link {
  color: var(--dock-fg) !important;
}
/* Dark: Active bleibt OHNE Füllung, nur Textfarbe */
[data-bs-theme="dark"] .dock .nav-link.active,
[data-bs-theme="dark"] .dock .nav-link[aria-current="page"] {
  color: var(--dock-active-fg) !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

/* ============================
   OPTIONAL FEINSCHLIFF (Add-on)
   ============================ */
/* 1) Bessere Touch-Zonen auf Mobile (iOS/Android Empfehlung: 44px) */
.dock .nav-link {
  min-width: 44px;
  min-height: 44px;
  padding: .35rem .4rem;
}
/* 2) Label dezent, aber lesbar */
.dock .nav-link .label {
  font-size: .70rem;
  opacity: .85;
}
/* 3) Icon etwas größer für bessere Balance */
.dock .nav-link .icon i {
  font-size: 1.2rem;
}
/* 4) Hover/Active Micro-Interactions (Desktop only) */
@media (hover: hover) {
  .dock .nav-link:hover {
    transform: translateY(-2px);
    transition: transform .12s ease, color .12s ease;
  }
  .dock .nav-link.active {
    transform: translateY(-2px);
  }
}
/* 5) Click/Tap Feedback (Mobile only) */
@media (hover: none) {
  .dock .nav-link:active {
    transform: scale(0.92);
    opacity: .9;
    transition: transform .08s ease-out;
  }
}
/* 6) Harmonie im Dark Mode: Labels minimal heller */
[data-bs-theme="dark"] .dock .nav-link .label {
  opacity: .92;
}