/*
 * Scoped fallbacks for the CRM shell when Tailwind utilities fail to load
 * (stale service worker, dev chunk errors on LAN, etc.). Only [data-lc-*]
 * nodes from Layout.tsx / Sidebar.tsx — avoids overriding global `.hidden`.
 */

[data-lc-root] {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  height: 100vh !important;
  max-height: 100vh !important;
  width: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  background-color: #f8fafc !important;
  color: #0f172a !important;
}

html.dark [data-lc-root] {
  background-color: #020617 !important;
  color: #f8fafc !important;
}

/*
 * Single flex child for the whole sidebar system (Replaces a Fragment so the root
 * row does not get 3+ flex items: backdrop / mobile / desktop — which can wrap the
 * sidebar under the main column when Tailwind `fixed` / widths fail.)
 */
[data-lc-sidebar-slot] {
  box-sizing: border-box !important;
  flex: 0 0 auto !important;
  align-self: stretch !important;
  position: relative !important;
  height: 100vh !important;
  max-height: 100vh !important;
  width: 0 !important;
  overflow: visible !important;
}

@media (min-width: 1024px) {
  [data-lc-sidebar-slot] {
    width: 14rem !important;
    flex: 0 0 14rem !important;
  }

  [data-lc-sidebar-slot][data-lc-sidebar-collapsed="true"] {
    width: 4rem !important;
    flex: 0 0 4rem !important;
  }
}

[data-lc-main-column] {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  height: 100vh !important;
  max-height: 100vh !important;
  box-sizing: border-box !important;
}

/* Desktop sidebar: hidden below lg, flex at lg+ */
[data-lc-sidebar-desktop] {
  display: none !important;
  flex-direction: column !important;
  flex-shrink: 0 !important;
  height: 100vh !important;
  max-height: 100vh !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

@media (min-width: 1024px) {
  [data-lc-sidebar-desktop] {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* Mobile drawer: fixed strip; transform from inline style */
[data-lc-sidebar-mobile] {
  position: fixed !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 16rem !important;
  max-width: 85vw !important;
  z-index: 50 !important;
  box-sizing: border-box !important;
}

@media (min-width: 1024px) {
  [data-lc-sidebar-mobile] {
    display: none !important;
  }
}

[data-lc-sidebar-backdrop] {
  position: fixed !important;
  inset: 0 !important;
  z-index: 40 !important;
  background: rgba(0, 0, 0, 0.55) !important;
}

@media (min-width: 1024px) {
  [data-lc-sidebar-backdrop] {
    display: none !important;
  }
}