/* -------------------------------------------------------------------
   Stage 105.0C CLEAN — UI v2 App Shell / Navigation Polish Foundation
   Frontend-only professional app chrome layer for the real ISP Forge app.

   Scope:
   - CSS-first polish for the left app shell, menu fly-outs, subbar,
     content spacing, action bars, tables and modal chrome.
   - Builds on Stage 105.0B without changing route/menu functions.
   - No backend, API, popup, save, billing, RADIUS or protected logic changes.
------------------------------------------------------------------- */

:root {
  --ui-v2-stage: "105.0C CLEAN";
  --ui-v2-sidebar-edge: rgba(45, 212, 191, 0.42);
  --ui-v2-sidebar-highlight: rgba(14, 165, 163, 0.18);
  --ui-v2-page-max: 1720px;
  --ui-v2-nav-text: rgba(226, 241, 255, 0.88);
  --ui-v2-nav-muted: rgba(203, 213, 225, 0.70);
  --ui-v2-content-gap: 18px;
}

html[data-ispforge-ui-v2-shell="navigation-polish"] body {
  min-width: 320px;
}

/* App shell refinement */
#app-screen {
  isolation: isolate;
}

.topbar {
  padding: 18px 13px 14px !important;
  border-right: 1px solid rgba(45, 212, 191, 0.14) !important;
}

.topbar::before {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--ui-v2-sidebar-edge), transparent);
  pointer-events: none;
}

.topbar::after {
  content: "";
  position: absolute;
  inset: auto 10px 12px 10px;
  height: 68px;
  border-radius: 22px;
  background: radial-gradient(circle at 50% 100%, rgba(20,184,166,0.20), transparent 72%);
  pointer-events: none;
  opacity: .72;
}

.logo-area {
  position: relative;
  border-radius: 18px;
  padding: 10px 10px 18px !important;
  background: rgba(255,255,255,0.035);
}

.logo-area::after {
  content: "UI v2";
  position: absolute;
  right: 10px;
  top: 10px;
  padding: 3px 7px;
  border-radius: 999px;
  color: #99f6e4;
  background: rgba(20,184,166,0.12);
  border: 1px solid rgba(45,212,191,0.18);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.top-menu {
  padding: 4px 2px 8px !important;
  scrollbar-color: rgba(148,163,184,0.38) transparent;
}

.top-menu::-webkit-scrollbar,
#top-menu .stage831-dropdown::-webkit-scrollbar,
.submenu-bar::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.top-menu::-webkit-scrollbar-thumb,
#top-menu .stage831-dropdown::-webkit-scrollbar-thumb,
.submenu-bar::-webkit-scrollbar-thumb {
  background: rgba(148,163,184,0.36);
  border-radius: 999px;
}

.top-menu a,
#top-menu .stage831-menu-top {
  position: relative;
  min-height: 42px !important;
  padding: 10px 12px !important;
  color: var(--ui-v2-nav-text) !important;
  border: 1px solid transparent !important;
  outline: none;
}

.top-menu a::before,
#top-menu .stage831-menu-top::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(148,163,184,0.48);
  box-shadow: 0 0 0 4px rgba(148,163,184,0.08);
  flex: 0 0 auto;
}

.top-menu a:hover::before,
#top-menu .stage831-menu-item:hover > .stage831-menu-top::before,
.top-menu a.active::before,
#top-menu .stage831-menu-item.active > .stage831-menu-top::before {
  background: #2dd4bf;
  box-shadow: 0 0 0 4px rgba(45,212,191,0.17), 0 0 20px rgba(45,212,191,0.26);
}

.top-menu a:hover,
#top-menu .stage831-menu-top:hover,
#top-menu .stage831-menu-item:hover > .stage831-menu-top,
#top-menu .stage831-menu-item:focus-within > .stage831-menu-top {
  transform: translateX(2px);
}

#top-menu .stage831-caret {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255,255,255,0.07);
  color: rgba(226,241,255,0.72);
}

#top-menu .stage831-menu-item:hover > .stage831-menu-top .stage831-caret,
#top-menu .stage831-menu-item:focus-within > .stage831-menu-top .stage831-caret {
  background: rgba(45,212,191,0.15);
  color: #ccfbf1;
}

/* Fly-out menus become clearer, denser and easier to scan. */
#top-menu .stage831-dropdown {
  width: 318px !important;
  padding: 10px !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(14,165,163,0.16), transparent 14rem),
    linear-gradient(180deg, rgba(8,18,32,0.985), rgba(7,17,31,0.975)) !important;
  border: 1px solid rgba(148,163,184,0.22) !important;
  box-shadow: 0 30px 90px rgba(2,6,23,0.42) !important;
  color: #e5f0ff !important;
}

#top-menu .stage831-dropdown::before {
  content: "Select page";
  display: block;
  margin: 2px 4px 8px;
  color: rgba(203,213,225,0.76);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

#top-menu .stage831-sub-link {
  min-height: 36px !important;
  color: rgba(226,232,240,0.88) !important;
  border-radius: 12px !important;
}

#top-menu .stage831-sub-link::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 999px;
  margin-right: 8px;
  background: rgba(148,163,184,0.45);
  flex: 0 0 auto;
}

#top-menu .stage831-sub-link:hover,
#top-menu .stage831-sub-link.active {
  color: #ffffff !important;
  background: linear-gradient(135deg, rgba(20,184,166,0.20), rgba(37,99,235,0.13)) !important;
  border-color: rgba(45,212,191,0.28) !important;
}

#top-menu .stage831-sub-link:hover::before,
#top-menu .stage831-sub-link.active::before {
  background: #5eead4;
}

#top-menu .stage831-menu-separator {
  background: rgba(148,163,184,0.18) !important;
}

.user-chip {
  position: relative;
  z-index: 1;
  margin-top: 2px;
  border-radius: 18px;
  background: rgba(255,255,255,0.045);
  padding: 12px 8px 8px !important;
}

.user-chip span {
  color: var(--ui-v2-nav-muted) !important;
}

/* Top subbar and content chrome */
.submenu-bar {
  min-height: 58px;
  padding: 11px 24px !important;
  gap: 8px !important;
  overflow-x: auto;
  flex-wrap: nowrap !important;
}

.submenu-bar::before {
  content: "Module";
  flex: 0 0 auto;
  color: #64748b;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-right: 3px;
}

.submenu-bar:empty,
.submenu-bar.stage831-submenu-hidden {
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}

.submenu-bar:empty::before,
.submenu-bar.stage831-submenu-hidden::before {
  content: none;
}

.submenu-bar a {
  flex: 0 0 auto;
  min-height: 34px;
}

.page {
  position: relative;
  max-width: none;
  padding: 30px clamp(20px, 2vw, 34px) !important;
}

.page > * {
  max-width: var(--ui-v2-page-max);
}

.page > .table-wrap,
.page > .panel,
.page > .shell-card,
.page > .stage822-page,
.page > .stage833-edit-customer-page,
.page > .ui-v2-wide,
.page > [style*="overflow"] {
  max-width: none;
}

.page-title-row {
  margin-bottom: var(--ui-v2-content-gap);
}

.page-title-row h1 {
  display: flex;
  align-items: center;
  gap: 10px;
}

.page-title-row h1::before {
  content: "";
  width: 12px;
  height: 32px;
  border-radius: 999px;
  background: linear-gradient(180deg, #14b8a6, #2563eb);
  box-shadow: 0 10px 24px rgba(14,165,163,0.22);
  flex: 0 0 auto;
}

.page-actions,
.panel-actions,
.stage822-card-actions,
.stage822-top-actions,
[class*="action"]:not(.stage822-icon):not(.stage822-btn) {
  align-items: center;
}

/* Better professional table frame without changing table data or JS. */
.table-wrap,
.panel table,
.shell-card table,
.stage822-card table,
.ui-v2-table-shell {
  border-radius: 16px;
}

.table-wrap {
  border: 1px solid rgba(15,23,42,0.08);
  box-shadow: 0 12px 30px rgba(15,23,42,0.045);
}

table th {
  letter-spacing: .035em;
  text-transform: uppercase;
  font-size: 11px !important;
}

table td {
  vertical-align: middle;
}

/* Modal chrome only: no close/cancel/event rewrites. */
[class*="modal"],
.stage828-modal,
[data-stage828-modal],
.popup,
.dialog {
  border-radius: 22px !important;
}

[class*="modal"] .panel-header,
.stage828-modal .panel-header,
[data-stage828-modal] .panel-header {
  background: linear-gradient(180deg, #ffffff, #f8fbff) !important;
}

/* Focus/accessibility polish */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: none !important;
  box-shadow: var(--ui-v2-focus-ring) !important;
}

/* Dark contrast compatibility */
body.dark,
html.dark body,
body[data-theme="dark"] {
  --ui-v2-nav-text: rgba(226,241,255,0.90);
  --ui-v2-nav-muted: rgba(203,213,225,0.72);
}

body.dark .submenu-bar,
html.dark body .submenu-bar,
body[data-theme="dark"] .submenu-bar {
  background: rgba(15,23,42,0.88) !important;
  border-bottom-color: rgba(148,163,184,0.16) !important;
}

body.dark .submenu-bar::before,
html.dark body .submenu-bar::before,
body[data-theme="dark"] .submenu-bar::before {
  color: rgba(203,213,225,0.70);
}

/* Responsive shell: preserve existing mobile menu behaviour, just tidy spacing. */
@media (max-width: 900px) {
  .topbar {
    padding: 12px !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(45,212,191,0.18) !important;
  }

  .topbar::before,
  .topbar::after,
  .logo-area::after,
  .top-menu a::before,
  #top-menu .stage831-menu-top::before,
  .submenu-bar::before,
  .page-title-row h1::before {
    content: none !important;
  }

  .logo-area {
    background: transparent;
    min-width: 190px !important;
    padding: 0 !important;
  }

  .top-menu {
    overflow-x: auto !important;
    overflow-y: visible !important;
  }

  .top-menu a,
  #top-menu .stage831-menu-top {
    min-height: 38px !important;
    padding: 9px 10px !important;
  }

  #top-menu .stage831-dropdown {
    width: min(320px, calc(100vw - 28px)) !important;
  }

  .submenu-bar {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    padding: 9px 12px !important;
  }

  .page {
    padding: 18px 14px !important;
  }

  .page > * {
    max-width: none;
  }
}

@media (min-width: 1600px) {
  .page {
    padding-left: 34px !important;
    padding-right: 42px !important;
  }
}