/* Lavender 2027 · UI-03 portal bridge
   This file styles only opted-in portal layout roots. Existing route, auth,
   account-scoping, forms, and page-specific styles are intentionally unchanged. */
.lvds-portal-host {
  --lvds-sidebar-size: 252px;
  min-height: 100vh;
  background: var(--lvds-canvas);
  color: var(--lvds-ink);
  font-family: var(--lvds-font);
  box-sizing: border-box;
}
.lvds-portal-host, .lvds-portal-host * { box-sizing: border-box; }

/* Admin and supplier workspaces have a sidebar, respecting the root direction.
   CSS flex row places the first child on the RIGHT in RTL and LEFT in LTR. */
.lvds-portal-host[data-lvds-portal="admin"],
.lvds-portal-host[data-lvds-portal="b2b"],
.lvds-portal-host[data-lvds-portal="b2c"] {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch;
  min-height: 100vh !important;
  background: var(--lvds-canvas) !important;
}
.lvds-portal-host[data-lvds-portal="admin"] > aside,
.lvds-portal-host[data-lvds-portal="b2b"] > aside,
.lvds-portal-host[data-lvds-portal="b2c"] > aside {
  flex: 0 0 var(--lvds-sidebar-size) !important;
  width: var(--lvds-sidebar-size) !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 100vh !important;
  position: sticky !important;
  top: 0;
  align-self: flex-start;
  max-height: 100vh;
  overflow-y: auto;
  padding: 24px 14px !important;
  background: var(--lvds-sidebar) !important;
  color: var(--lvds-ink) !important;
  border: 0 !important;
  border-inline-end: 1px solid var(--lvds-line) !important;
  box-shadow: var(--lvds-shadow-sm);
  border-radius: 0 !important;
  z-index: 20;
}
.lvds-portal-host[data-lvds-portal="admin"] > main,
.lvds-portal-host[data-lvds-portal="b2b"] > main,
.lvds-portal-host[data-lvds-portal="b2c"] > .business-workspace {
  flex: 1 1 0% !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: none !important;
  background: var(--lvds-canvas) !important;
  color: var(--lvds-ink) !important;
}
.lvds-portal-host[data-lvds-portal="admin"] > main,
.lvds-portal-host[data-lvds-portal="b2b"] > main {
  padding: 0 25px 34px !important;
  margin: 0 !important;
}
.lvds-portal-host[data-lvds-portal="admin"] > aside h2,
.lvds-portal-host[data-lvds-portal="b2b"] > aside h2,
.lvds-portal-host[data-lvds-portal="b2c"] .business-brand {
  color: var(--lvds-ink) !important;
  font-weight: 850;
}

/* Existing links and authorization-dependent navigation are preserved. */
.lvds-portal-host[data-lvds-portal="admin"] > aside nav,
.lvds-portal-host[data-lvds-portal="b2b"] > aside nav,
.lvds-portal-host[data-lvds-portal="b2c"] .business-nav {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  min-width: 0;
  padding: 5px 0 !important;
}
.lvds-portal-host[data-lvds-portal="admin"] > aside nav a,
.lvds-portal-host[data-lvds-portal="b2b"] > aside nav a,
.lvds-portal-host[data-lvds-portal="b2c"] .business-nav-link {
  display: flex !important;
  align-items: center !important;
  min-height: 42px;
  border: 1px solid transparent !important;
  border-radius: 11px !important;
  padding: 10px 12px !important;
  margin: 0 !important;
  color: var(--lvds-muted) !important;
  text-decoration: none !important;
  font-size: 13px;
  line-height: 1.45;
  transition: background 160ms ease, color 160ms ease;
}
.lvds-portal-host[data-lvds-portal="admin"] > aside nav a:hover,
.lvds-portal-host[data-lvds-portal="b2b"] > aside nav a:hover,
.lvds-portal-host[data-lvds-portal="b2c"] .business-nav-link:hover:not(.disabled) {
  background: var(--lvds-sidebar-hover) !important;
  color: var(--lvds-primary) !important;
}
.lvds-portal-host[data-lvds-portal="admin"] > aside nav a[aria-current="page"],
.lvds-portal-host[data-lvds-portal="b2b"] > aside nav a[aria-current="page"],
.lvds-portal-host[data-lvds-portal="b2c"] .business-nav-link.active,
.lvds-portal-host[data-lvds-portal="b2c"] .business-nav-link[aria-current="page"] {
  color: var(--lvds-primary) !important;
  background: var(--lvds-primary-soft) !important;
  border-color: var(--lvds-primary-border) !important;
  font-weight: 800 !important;
}
.lvds-portal-host[data-lvds-portal="b2c"] .business-nav-link.disabled {
  opacity: .55;
  cursor: not-allowed;
}
.lvds-portal-host[data-lvds-portal="admin"] > aside button,
.lvds-portal-host[data-lvds-portal="b2b"] > aside button,
.lvds-portal-host[data-lvds-portal="b2c"] .business-logout {
  border: 1px solid var(--lvds-line) !important;
  background: var(--lvds-surface) !important;
  border-radius: 11px !important;
  color: var(--lvds-ink) !important;
  min-height: 40px;
  padding: 9px 13px !important;
  font-weight: 700;
}
.lvds-portal-host[data-lvds-portal="admin"] > aside button:hover,
.lvds-portal-host[data-lvds-portal="b2b"] > aside button:hover,
.lvds-portal-host[data-lvds-portal="b2c"] .business-logout:hover {
  border-color: var(--lvds-primary-border) !important;
  color: var(--lvds-primary) !important;
}

/* Shared, functional topbar on Admin/B2B only: other portals retain theirs. */
.lvds-portal-topbar {
  min-height: 74px;
  margin: 0 -25px 26px;
  padding: 13px 25px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid var(--lvds-line);
  background: var(--lvds-surface);
}
.lvds-portal-title-group { display: flex; align-items: center; gap: 12px; min-width: 0; }
.lvds-portal-monogram {
  width: 39px; height: 39px; border-radius: 13px;
  display: grid; place-items: center; flex: 0 0 auto;
  color: #fff; font-weight: 900; font-size: 23px;
  background: linear-gradient(145deg, #b9a5ff, #7555d9);
  box-shadow: 0 6px 18px rgba(117,85,217,.18);
}
.lvds-portal-topbar strong { display: block; font-size: 15px; line-height: 1.35; color: var(--lvds-ink); }
.lvds-portal-topbar small { display: block; font-size: 12px; color: var(--lvds-muted); margin-top: 3px; }
.lvds-portal-path {
  color: var(--lvds-muted); font-size: 12px; direction: ltr;
  max-width: 36vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lvds-portal-topbar :focus-visible,
.lvds-portal-host > aside :focus-visible,
.lvds-portal-host .business-topbar :focus-visible,
.lvds-portal-host .customer-header :focus-visible {
  outline: 3px solid var(--lvds-primary-border); outline-offset: 2px;
}

/* Existing B2C and Customer header/brand content is not replaced. */
.lvds-portal-host[data-lvds-portal="b2c"] .business-topbar,
.lvds-portal-host[data-lvds-portal="customer"] .customer-header {
  background: var(--lvds-surface) !important;
  color: var(--lvds-ink) !important;
  border-bottom: 1px solid var(--lvds-line) !important;
  box-shadow: var(--lvds-shadow-sm);
}
.lvds-portal-host[data-lvds-portal="b2c"] .business-content {
  min-width: 0; padding-inline: clamp(14px, 2vw, 30px) !important;
}
.lvds-portal-host[data-lvds-portal="customer"] {
  background: var(--lvds-canvas);
}
.lvds-portal-host[data-lvds-portal="customer"] .customer-nav a:hover,
.lvds-portal-host[data-lvds-portal="customer"] .customer-nav a.active,
.lvds-portal-host[data-lvds-portal="customer"] .customer-nav a[aria-current="page"] {
  color: var(--lvds-primary) !important;
}
.lvds-portal-host[data-lvds-portal="customer"] .customer-logo {
  background: linear-gradient(145deg, #b9a5ff, #7555d9) !important;
  color: #fff !important;
  border-radius: 13px;
}
/* Prevent horizontal scroll caused by wide cards while preserving table scroll. */
.lvds-portal-host > main, .lvds-portal-host .business-content, .lvds-portal-host .customer-header {
  min-width: 0;
}
@media (max-width: 960px) {
  .lvds-portal-host[data-lvds-portal="admin"],
  .lvds-portal-host[data-lvds-portal="b2b"],
  .lvds-portal-host[data-lvds-portal="b2c"] {
    flex-direction: column !important;
  }
  .lvds-portal-host[data-lvds-portal="admin"] > aside,
  .lvds-portal-host[data-lvds-portal="b2b"] > aside,
  .lvds-portal-host[data-lvds-portal="b2c"] > aside {
    position: relative !important;
    flex: 0 0 auto !important;
    top: auto; max-height: none;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 11px 13px !important;
    overflow: visible;
    border-inline-end: 0 !important;
    border-bottom: 1px solid var(--lvds-line) !important;
  }
  .lvds-portal-host[data-lvds-portal="admin"] > aside nav,
  .lvds-portal-host[data-lvds-portal="b2b"] > aside nav,
  .lvds-portal-host[data-lvds-portal="b2c"] .business-nav {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overscroll-behavior-x: contain;
    max-width: 100%;
    scrollbar-width: thin;
  }
  .lvds-portal-host[data-lvds-portal="admin"] > aside nav a,
  .lvds-portal-host[data-lvds-portal="b2b"] > aside nav a,
  .lvds-portal-host[data-lvds-portal="b2c"] .business-nav-link {
    flex: 0 0 auto !important; white-space: nowrap;
  }
  .lvds-portal-host[data-lvds-portal="admin"] > main,
  .lvds-portal-host[data-lvds-portal="b2b"] > main,
  .lvds-portal-host[data-lvds-portal="b2c"] > .business-workspace {
    flex: 1 1 auto !important; width: 100% !important;
  }
  .lvds-portal-host[data-lvds-portal="admin"] > main,
  .lvds-portal-host[data-lvds-portal="b2b"] > main { padding: 0 15px 24px !important; }
  .lvds-portal-topbar { margin-inline: -15px; padding-inline: 15px; min-height: 64px; }
  .lvds-portal-path { max-width: 30vw; }
}
@media (max-width: 560px) {
  .lvds-portal-path { display: none; }
  .lvds-portal-host[data-lvds-portal="customer"] .customer-header {
    padding-inline: 12px !important;
  }
  .lvds-portal-host[data-lvds-portal="customer"] .customer-nav {
    max-width: 100%; overflow-x: auto; flex-wrap: nowrap;
  }
}
@media (prefers-reduced-motion: reduce) {
  .lvds-portal-host > aside nav a, .lvds-portal-host .business-nav-link { transition: none !important; }
}

/* Responsive Mobile Collapsible Drawer for B2B, B2C, and Admin Portals */
.lv-mobile-menu-toggle {
  display: none;
}
@media (max-width: 960px) {
  .b2b-shell,
  .business-shell,
  .lavender-admin-shell {
    display: flex !important;
    flex-direction: column !important;
  }
  .lv-mobile-menu-toggle {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    background: #581C87;
    color: #FFFFFF;
    border: none;
    border-radius: 10px;
    padding: 8px 14px;
    font-weight: 800;
    font-size: 13px;
    cursor: pointer;
  }
  .b2b-sidebar,
  .business-sidebar,
  .lavender-admin-sidebar {
    position: static !important;
    height: auto !important;
    width: 100% !important;
    border-left: none !important;
    border-bottom: 1px solid #E2E8F0 !important;
    padding: 12px 16px !important;
  }
  .lv-sidebar-collapsed .b2b-nav,
  .lv-sidebar-collapsed .business-nav,
  .lv-sidebar-collapsed .lavender-admin-nav {
    display: none !important;
  }
}

@media (max-width: 960px) {
  .b2b-sidebar,
  .business-sidebar,
  .lavender-admin-sidebar {
    padding: 8px 12px !important;
  }
  .b2b-brand,
  .business-brand {
    padding: 2px 4px !important;
    margin-bottom: 0 !important;
    border-bottom: none !important;
  }
  .lv-sidebar-collapsed > div:last-child {
    display: none !important;
  }
  .b2b-topbar,
  .business-topbar {
    padding: 8px 12px !important;
    gap: 8px !important;
  }
  .b2b-topbar strong,
  .business-topbar strong {
    font-size: 14px !important;
  }
  .b2b-content,
  .business-content,
  .lavender-admin-main {
    padding: 14px 12px !important;
  }
}