/**
 * src/css/nav.css
 * DEV-09 (Navigation consistency) — shared sidebar/topbar rules for the
 * component rendered by src/js/nav.js.
 *
 * IMPORTANT (inventory finding): pages define their OWN Tailwind CDN
 * `tailwind.config` color tokens, and they drift — index.html/dashboard.html
 * etc. define `primary`/`on-primary`/`secondary-container`, while several
 * module pages (druckprufung.html, kalibrieren.html) only define
 * `brand.navy`/`brand.amber`, and others (einblasen/apl/otdr) define a THIRD
 * scheme (`primary`/`accent`/`sidebar-bg`). A shared nav.js rendering
 * Tailwind utility classes like `bg-primary`/`text-on-primary` would render
 * unstyled (transparent background, invisible text) on any page whose
 * config doesn't define those exact tokens — this bit us during DEV-09
 * verification (druckprufung.html sidebar rendered with no background).
 *
 * Fix: nav.js does NOT depend on any page's Tailwind config for sidebar
 * colors. All sidebar/topbar/bottom-nav chrome uses these hardcoded,
 * plain-CSS classes instead (hex values match the app's one true palette:
 * navy #022448 / amber #fea619 — same values every page's config already
 * agrees on, just under different token names). This makes the shared nav
 * render identically regardless of which Tailwind config a given page
 * happens to load. Load nav.css AFTER design-system.css / styles.css.
 */

/* ── Sidebar shell ────────────────────────────────────────── */
.dp-nav-sidebar {
  display: none;
  flex-direction: column;
  background: #022448;
  color: #ffffff;
  width: 240px;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 50;
  flex-shrink: 0;
}
@media (min-width: 768px) {
  .dp-nav-sidebar { display: flex; }
}

.dp-nav-brand {
  padding: 20px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.dp-nav-brand h1 {
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.01em;
  margin: 0;
}
.dp-nav-brand p {
  font-size: 12px;
  color: #93c5fd;
  margin: 2px 0 0;
}
.dp-nav-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: transparent;
  border: none;
  color: #93c5fd;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
.dp-nav-toggle:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

.dp-nav-items {
  flex: 1;
  padding: 16px 12px;
  overflow-y: auto;
}
.dp-nav-items > * + * {
  margin-top: 2px;
}

.dp-nav-admin-header {
  padding: 12px 12px 4px;
}
.dp-nav-admin-header p {
  font-size: 10px;
  font-weight: 600;
  color: #60a5fa;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0;
}

.dp-nav-footer {
  padding: 16px 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.dp-nav-logout-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  background: transparent;
  border: none;
  color: #dbeafe;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.dp-nav-logout-btn:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #fca5a5;
}
.dp-nav-logout-btn .material-symbols-outlined {
  color: #93c5fd;
  font-size: 20px;
  transition: color 0.15s;
}
.dp-nav-logout-btn:hover .material-symbols-outlined {
  color: #fca5a5;
}

/* ── Sidebar link (used both for the desktop sidebar AND kept as the
     class name several legacy inline scripts on module pages already key
     off — .sidebar-link — so nothing else needs to change to find it) ── */
.sidebar-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  color: #dbeafe;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: background 0.15s, color 0.15s;
}
.sidebar-link:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}
.sidebar-link .material-symbols-outlined {
  font-size: 20px;
  color: #93c5fd;
  transition: color 0.15s;
}
.sidebar-link:hover .material-symbols-outlined {
  color: #ffffff;
}
.sidebar-link.active,
.sidebar-link.dp-nav-active {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
}
.sidebar-link.active::after {
  content: '';
  position: absolute;
  right: 0;
  top: 4px;
  bottom: 4px;
  width: 3px;
  border-radius: 3px 0 0 3px;
  background: #fea619;
}

/* ── Sidebar collapse ─────────────────────────────────────── */
.dp-nav-sidebar.sidebar-collapsed {
  width: 64px;
}
.dp-nav-sidebar.sidebar-collapsed .sidebar-text,
.dp-nav-sidebar.sidebar-collapsed .sidebar-brand-text,
.dp-nav-sidebar.sidebar-collapsed .dp-nav-admin-header {
  display: none;
}
.dp-nav-sidebar.sidebar-collapsed .sidebar-link,
.dp-nav-sidebar.sidebar-collapsed .dp-nav-logout-btn {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}
.dp-nav-sidebar {
  transition: width 0.25s ease;
  overflow: hidden;
}
.main-content {
  transition: margin-left 0.25s ease;
}
.main-content.sidebar-collapsed {
  margin-left: 64px !important;
}

/* ── Pre-collapsed state (anti-flicker on load) ──────────────── */
html.sidebar-pre-collapsed .dp-nav-sidebar {
  width: 64px !important;
}
html.sidebar-pre-collapsed .dp-nav-sidebar .sidebar-text,
html.sidebar-pre-collapsed .dp-nav-sidebar .sidebar-brand-text,
html.sidebar-pre-collapsed .dp-nav-sidebar .dp-nav-admin-header {
  display: none !important;
}
html.sidebar-pre-collapsed .dp-nav-sidebar .sidebar-link,
html.sidebar-pre-collapsed .dp-nav-sidebar .dp-nav-logout-btn {
  justify-content: center !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
html.sidebar-pre-collapsed .main-content {
  margin-left: 64px !important;
}

/* ── Mobile bottom nav ────────────────────────────────────── */
.dp-nav-bottom {
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: #ffffff;
  border-top: 1px solid #e2e8f0;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
  justify-content: space-around;
  align-items: center;
  height: 64px;
  padding: 0 8px;
}
@media (min-width: 768px) {
  .dp-nav-bottom { display: none; }
}
.dp-nav-bottom-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 8px;
  border-radius: 12px;
  width: 64px;
  color: #43474e;
  text-decoration: none;
  transition: color 0.15s;
}
.dp-nav-bottom-link:hover {
  color: #022448;
}
.dp-nav-bottom-link.dp-nav-active {
  color: #022448;
}
.dp-nav-bottom-link .material-symbols-outlined {
  font-size: 24px;
}
.dp-nav-bottom-link span:last-child {
  font-size: 10px;
  font-weight: 600;
}

/* ── B4 fix: mobile bottom-nav safe-area clearance (sitewide) ───────────
 * Root cause: the fixed 64px `.dp-nav-bottom` bar renders unconditionally
 * on every page at <=767px (see above), but several pages' own scrollable
 * content container only reserves 32px of bottom padding (e.g. `pb-8`,
 * used by cloud.html/support.html) or relies on `pb-20`/`80px` (e.g.
 * index.html) which is close but doesn't account for `env(safe-area-
 * inset-bottom)` on notched devices. Either way this is a per-page inline
 * Tailwind utility class, so it silently drifts/gets missed on new pages
 * (exactly what happened here). Fix centrally: every page's main scroll
 * container gets guaranteed clearance from nav.css itself, regardless of
 * what utility classes the page markup happens to carry. `!important` is
 * intentional here — this is a safety-net floor, not a design choice a
 * page should be able to accidentally undercut.
 */
@media (max-width: 767px) {
  /* Scoped to the "scrollable page content" pattern (`overflow-y-auto` on a
     direct `<main>` child of `.main-content`) — the pattern index.html,
     cloud.html, support.html, dashboard.html, teams.html, admin*.html,
     mms.html, profile.html, user-management.html all share. Deliberately
     does NOT touch bespoke full-viewport app-shell layouts that manage
     their own internal scroll regions (`overflow-hidden` mains, e.g.
     chat.html, aufmass.html) — adding this padding there would misalign
     their own internally-positioned composer/toolbar bars instead of
     fixing anything.
     IMPORTANT: the padding must live on `.main-content` itself (the
     `h-screen` flex column), NOT on the inner `<main>`. `.dp-nav-bottom`
     is `position: fixed` and lives OUTSIDE `.main-content`'s box, so it
     always covers the bottom 64px of the viewport regardless of where any
     element inside `.main-content` scrolls to. Padding on the inner
     `<main>` only adds scrollable space at the END of its content (fixes
     reachability once fully scrolled) but does nothing for the *visible,
     un-scrolled* viewport, where `<main>`'s own `flex: 1` height still
     extends the full remaining h-screen height, uncovered space or not —
     hence content silently rendering UNDER the fixed bar the whole time.
     Padding on `.main-content` shrinks the flex column's content box by
     64px, which `<main>`'s `flex-1` then correctly respects, giving the
     inner scroll region a clientHeight that stops above the fixed bar. */
  .main-content:has(> main.overflow-y-auto) {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
    box-sizing: border-box !important;
  }
}

/* ── Top bar frosted glass (hub-style pages) ─────────────────── */
.topbar-glass {
  background: rgba(247, 249, 251, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* ── Badges ───────────────────────────────────────────────── */
.chat-nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: auto;
  border-radius: 9999px;
  background: #fea619;
  color: #2a1700;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

.appt-nav-badge {
  display: inline-flex;
  margin-left: auto;
}
.appt-nav-badge.appt-nav-badge-dot::after {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: #fea619;
  display: block;
}