@import url("billing-design-tokens.css?v=1bb76d40acee053d");

/* DispoFleet · Pilot common left navigation for native ERP + legacy chrome.
 *
 * The generated DispoFleet Designsystem export imported above supplies the
 * adapter's colors, radii, spacing and typography on
 * native/legacy pages that do not load the DS stylesheet. No new design
 * decisions — only DS-exported token values and the exact look of the React
 * AppShell (lib/dispo-pilot-ui/src/components/AppShell.tsx): a WHITE card rail
 * with a border, muted inactive rows, a `secondary` active row, a dark
 * `primary` brand mark, and the DS focus ring.
 */

/* Width is defined at document scope so `body` padding can reference it. */
:root {
  --dfp-width: 15rem;
}

.dfp-nav {
  box-sizing: border-box;
  font-family: var(--dfp-font-sans);
  color: hsl(var(--dfp-card-foreground));
}
.dfp-nav *,
.dfp-nav *::before,
.dfp-nav *::after { box-sizing: border-box; }

/* ---------------------------------------------------------------------------
 * Shared inner column (used by the fixed rail, the native mount, the drawer)
 * ------------------------------------------------------------------------- */
.dfp-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: hsl(var(--dfp-card));
  color: hsl(var(--dfp-card-foreground));
}

/* ---------------------------------------------------------------------------
 * Legacy / website persistent left rail (fixed). Native Desk uses .dfp-mounted
 * instead so it never covers the native .body-sidebar.
 * ------------------------------------------------------------------------- */
.dfp-sidebar {
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  z-index: 1030;
  width: var(--dfp-width);
  border-inline-end: 1px solid hsl(var(--dfp-border));
}

/* Reserve space so legacy/website content is not hidden behind the fixed rail.
 * Only applied for the fixed rail — never for the native in-sidebar mount. */
body.dfp-has-sidebar { padding-inline-start: var(--dfp-width) !important; }

/* Native mount: the common nav lives at the TOP of the existing native
 * .body-sidebar, above the preserved native children. It is in normal flow
 * (not fixed) and adds NO body padding. */
.dfp-mounted {
  flex: none;
  width: 100%;
  border-bottom: 1px solid hsl(var(--dfp-border));
}
.dfp-mounted .dfp-scroll { overflow: visible; }

.dfp-brand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 3.5rem;
  padding-inline: 1rem;
  border-bottom: 1px solid hsl(var(--dfp-border));
  color: inherit;
  text-decoration: none;
}
.dfp-brand:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px hsl(var(--dfp-ring));
  border-radius: var(--dfp-radius-md);
}
.dfp-brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex: none;
  border-radius: var(--dfp-radius-md);
  background: hsl(var(--dfp-primary));
  color: hsl(var(--dfp-primary-foreground));
}
.dfp-brand-mark svg { width: 1rem; height: 1rem; }
.dfp-brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.dfp-brand-title { font-size: 0.875rem; font-weight: 600; color: hsl(var(--dfp-card-foreground)); }
.dfp-brand-sub { font-size: 0.75rem; color: hsl(var(--dfp-muted-foreground)); }

.dfp-scroll { flex: 1 1 auto; overflow-y: auto; }

.dfp-section-label {
  padding: 0.75rem 0.75rem 0.25rem;
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: hsl(var(--dfp-muted-foreground));
}

.dfp-groups { display: flex; flex-direction: column; }
.dfp-list { list-style: none; margin: 0; padding: 0.5rem; display: flex; flex-direction: column; gap: 0.25rem; }

.dfp-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.25rem;
  padding-inline: 0.75rem;
  border-radius: var(--dfp-radius-md);
  font-size: 0.875rem;
  font-weight: 500;
  color: hsl(var(--dfp-muted-foreground));
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
  cursor: pointer;
}
.dfp-link svg { width: 1rem; height: 1rem; flex: none; }
.dfp-link:hover { background: hsl(var(--dfp-muted)); color: hsl(var(--dfp-foreground)); }
.dfp-link:focus-visible { outline: none; box-shadow: 0 0 0 2px hsl(var(--dfp-ring)); }
.dfp-link[aria-current="page"] {
  background: hsl(var(--dfp-secondary));
  color: hsl(var(--dfp-secondary-foreground));
}

.dfp-account { border-top: 1px solid hsl(var(--dfp-border)); padding: 0.5rem; display: flex; flex-direction: column; gap: 0.25rem; }
.dfp-account-user {
  padding: 0.25rem 0.75rem;
  margin: 0;
  font-size: 0.75rem;
  color: hsl(var(--dfp-muted-foreground));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dfp-account-user strong { color: hsl(var(--dfp-foreground)); font-weight: 600; }

.dfp-error {
  margin: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--dfp-radius-md);
  font-size: 0.75rem;
  border: 1px solid hsl(var(--dfp-border));
  background: hsl(var(--dfp-muted));
  color: hsl(var(--dfp-foreground));
}

/* ---------------------------------------------------------------------------
 * Mobile drawer
 * ------------------------------------------------------------------------- */
.dfp-mobilebar {
  position: sticky;
  top: 0;
  z-index: 1029;
  display: none;
  align-items: center;
  gap: 0.5rem;
  min-height: 3.5rem;
  padding-inline: 0.75rem;
  background: hsl(var(--dfp-card));
  color: hsl(var(--dfp-card-foreground));
  border-bottom: 1px solid hsl(var(--dfp-border));
}
.dfp-mobilebar-title { font-size: 0.875rem; font-weight: 600; }

.dfp-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
  border: none;
  border-radius: var(--dfp-radius-md);
  background: transparent;
  color: hsl(var(--dfp-card-foreground));
  cursor: pointer;
}
.dfp-trigger:hover { background: hsl(var(--dfp-muted)); }
.dfp-trigger:focus-visible { outline: none; box-shadow: 0 0 0 2px hsl(var(--dfp-ring)); }
.dfp-trigger svg { width: 1.25rem; height: 1.25rem; }

.dfp-overlay {
  position: fixed;
  inset: 0;
  z-index: 1040;
  display: none;
  background: rgba(15, 23, 42, 0.55);
}
.dfp-overlay.dfp-open { display: block; }

.dfp-drawer {
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  z-index: 1041;
  display: none;
  flex-direction: column;
  width: min(18rem, 85vw);
  background: hsl(var(--dfp-card));
  color: hsl(var(--dfp-card-foreground));
  border-inline-end: 1px solid hsl(var(--dfp-border));
  transform: translateX(-100%);
  transition: transform 0.2s ease;
}
.dfp-drawer.dfp-open { display: flex; transform: translateX(0); }

.dfp-drawer-close {
  margin-inline-start: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: none;
  border-radius: var(--dfp-radius-md);
  background: transparent;
  color: hsl(var(--dfp-muted-foreground));
  cursor: pointer;
}
.dfp-drawer-close:hover { background: hsl(var(--dfp-muted)); color: hsl(var(--dfp-foreground)); }
.dfp-drawer-close:focus-visible { outline: none; box-shadow: 0 0 0 2px hsl(var(--dfp-ring)); }
.dfp-drawer-close svg { width: 1rem; height: 1rem; }

/* ---------------------------------------------------------------------------
 * Responsive: below 768px use the mobile drawer, hide the persistent rail.
 * ------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .dfp-sidebar,
  .dfp-mounted { display: none; }
  body.dfp-has-sidebar { padding-inline-start: 0 !important; }
  .dfp-mobilebar { display: flex; }
}

/* Legacy website chrome: hide the bespoke top navigation the adapter replaces,
 * while preserving page title, safety notices and content containers. */
body.dfp-legacy [data-dfp-obsolete-nav] { display: none !important; }

/* Active group + native tools (Fachwerkzeuge) */
.dfp-section-label.dfp-group-active { color: hsl(var(--dfp-foreground)); }
.dfp-link[aria-current="page"] { font-weight: 600; box-shadow: inset 2px 0 0 hsl(var(--dfp-primary)); }
.dfp-tools { border-top: 1px solid hsl(var(--dfp-border)); padding: 0.5rem; }
.dfp-tools-toggle { width: 100%; border: none; background: transparent; text-align: start; }
.dfp-tools-toggle[aria-expanded="true"] { color: hsl(var(--dfp-foreground)); }
.dfp-tools-collapsed > :not(.dfp-nav) { display: none !important; }
.body-sidebar:has(.dfp-mounted) > .sidebar-header { display: none; }
.body-sidebar:has(.sidebar-items:not(.dfp-tools-collapsed) > .dfp-mounted) > .sidebar-header {
  display: flex;
}