/* Voxel Veda Titanium UI 2026-08-20
   Final shared presentation layer. Loaded after the historical application CSS. */

:root{

















  --vv-sidebar-width: 248px;
  --vv-topbar-height: 72px;
  --vv-radius: 8px;

}

body.staff-portal{
  width: 100% !important;
  max-width: 100% !important;
  min-height: 100% !important;
  overflow-x: clip !important;
  color: var(--vv-text) !important;
  background: var(--vv-bg) !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  letter-spacing: 0 !important;
}body.customer-portal{
  width: 100% !important;
  max-width: 100% !important;
  min-height: 100% !important;
  overflow-x: clip !important;
  color: var(--vv-text) !important;
  background: var(--vv-bg) !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  letter-spacing: 0 !important;
}

body::before{
  opacity: 1 !important;
  background-image:none!important;
  background-size: 64px 64px !important;
  mask-image: linear-gradient(to bottom, #000, transparent 76%) !important;
  filter: none !important;
}

body::after{
  opacity: 0.022 !important;
  background-size: 380px !important;
  background-position: calc(50% + 118px) 54% !important;
  filter: grayscale(1) !important;
}

button{
  font: inherit !important;
  letter-spacing: 0 !important;
}input{
  font: inherit !important;
  letter-spacing: 0 !important;
}select{
  font: inherit !important;
  letter-spacing: 0 !important;
}textarea{
  font: inherit !important;
  letter-spacing: 0 !important;
}

button{
  touch-action: manipulation;
}[role="button"]{
  touch-action: manipulation;
}

button:focus-visible{
  outline: 3px solid var(--focus) !important;
  outline-offset: 2px !important;
}a:focus-visible{
  outline: 3px solid var(--focus) !important;
  outline-offset: 2px !important;
}input:focus-visible{
  outline: 3px solid var(--focus) !important;
  outline-offset: 2px !important;
}select:focus-visible{
  outline: 3px solid var(--focus) !important;
  outline-offset: 2px !important;
}textarea:focus-visible{
  outline: 3px solid var(--focus) !important;
  outline-offset: 2px !important;
}summary:focus-visible{
  outline: 3px solid var(--focus) !important;
  outline-offset: 2px !important;
}



/* Navigation rail */
.staff-portal .sidebar{
  position: fixed !important;
  inset: 0 auto 0 0 !important;
  z-index: 120 !important;
  display: flex !important;
  flex-direction: column !important;
  width: var(--vv-sidebar-width) !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  box-sizing: border-box !important;
  padding: 14px 12px !important;
  overflow: hidden !important;
  background:var(--nav-bg)!important;
  border: 0 !important;
  border-right: 1px solid var(--vv-line) !important;
  border-radius: 0 !important;
  box-shadow:var(--shadow)!important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
color:var(--nav-text);}.customer-portal .sidebar{
  position: fixed !important;
  inset: 0 auto 0 0 !important;
  z-index: 120 !important;
  display: flex !important;
  flex-direction: column !important;
  width: var(--vv-sidebar-width) !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  box-sizing: border-box !important;
  padding: 14px 12px !important;
  overflow: hidden !important;
  background:var(--nav-bg)!important;
  border: 0 !important;
  border-right: 1px solid var(--vv-line) !important;
  border-radius: 0 !important;
  box-shadow:var(--shadow)!important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
color:var(--nav-text);}

.sidebar .brand{
  display: flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  gap: 10px !important;
  min-height: 58px !important;
  margin: 0 0 12px !important;
  padding: 8px !important;
  overflow: visible !important;
  border: 1px solid var(--vv-line) !important;
  border-radius: var(--vv-radius) !important;
  background: var(--vv-bg-raised) !important;
  box-shadow:var(--shadow)!important;
}.sidebar.vv-sidebar .shell-brand{
  display: flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  gap: 10px !important;
  min-height: 58px !important;
  margin: 0 0 12px !important;
  padding: 8px !important;
  overflow: visible !important;
  border: 1px solid var(--vv-line) !important;
  border-radius: var(--vv-radius) !important;
  background: var(--vv-bg-raised) !important;
  box-shadow:var(--shadow)!important;
}.staff-portal .sidebar .brand{
  display: flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  gap: 10px !important;
  min-height: 58px !important;
  margin: 0 0 12px !important;
  padding: 8px !important;
  overflow: visible !important;
  border: 1px solid var(--vv-line) !important;
  border-radius: var(--vv-radius) !important;
  background: var(--vv-bg-raised) !important;
  box-shadow:var(--shadow)!important;
}.customer-portal .sidebar .brand{
  display: flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  gap: 10px !important;
  min-height: 58px !important;
  margin: 0 0 12px !important;
  padding: 8px !important;
  overflow: visible !important;
  border: 1px solid var(--vv-line) !important;
  border-radius: var(--vv-radius) !important;
  background: var(--vv-bg-raised) !important;
  box-shadow:var(--shadow)!important;
}

.sidebar .brand .logo-img{
  display: block !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  flex: 0 0 42px !important;
  object-fit: contain !important;
  object-position: center !important;
  border-radius: 6px !important;
  filter: none !important;
}.sidebar.vv-sidebar .shell-brand .logo-img{
  display: block !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  flex: 0 0 42px !important;
  object-fit: contain !important;
  object-position: center !important;
  border-radius: 6px !important;
  filter: none !important;
}.staff-portal .sidebar .brand .logo-img{
  display: block !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  flex: 0 0 42px !important;
  object-fit: contain !important;
  object-position: center !important;
  border-radius: 6px !important;
  filter: none !important;
}.customer-portal .sidebar .brand .logo-img{
  display: block !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  flex: 0 0 42px !important;
  object-fit: contain !important;
  object-position: center !important;
  border-radius: 6px !important;
  filter: none !important;
}

.sidebar .brand h1{
  margin: 0 !important;
  color: var(--vv-text) !important;
  font-size: 0.88rem !important;
  line-height: 1.15 !important;
}

.sidebar .brand p{
  margin: 3px 0 0 !important;
  color: var(--vv-muted) !important;
  font-size:14px!important;
  line-height: 1.25 !important;
}

.sidebar-nav{
  flex: 1 1 auto !important;
  min-height: 0 !important;
  padding: 0 3px 12px 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(190, 242, 100, 0.28) transparent !important;
}

.sidebar-nav::-webkit-scrollbar{ width: 4px !important; }
.sidebar-nav::-webkit-scrollbar-track{ background: transparent !important; }
.sidebar-nav::-webkit-scrollbar-thumb{ background:var(--nav-bg)!important; border-radius: 99px !important; color:var(--nav-text);}

.nav-section-label{
  display: block !important;
  margin: 14px 8px 6px !important;
  color: var(--text-secondary) !important;
  font-size: 0.62rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
}

.sidebar .nav-btn{
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  min-height: 38px !important;
  margin: 3px 0 !important;
  padding: 8px 10px !important;
  overflow: hidden !important;
  color: var(--nav-text) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 7px !important;
  box-shadow:var(--shadow)!important;
  font-size:14px!important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-align: left !important;
  white-space: normal !important;
}.sidebar .nav-sub-btn{
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  min-height: 38px !important;
  margin: 3px 0 !important;
  padding: 8px 10px !important;
  overflow: hidden !important;
  color: var(--nav-text) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 7px !important;
  box-shadow:var(--shadow)!important;
  font-size:14px!important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-align: left !important;
  white-space: normal !important;
}.sidebar .nav-group-toggle{
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  min-height: 38px !important;
  margin: 3px 0 !important;
  padding: 8px 10px !important;
  overflow: hidden !important;
  color: var(--nav-text) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 7px !important;
  box-shadow:var(--shadow)!important;
  font-size:14px!important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-align: left !important;
  white-space: normal !important;
}.staff-portal .sidebar .nav-btn{
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  min-height: 38px !important;
  margin: 3px 0 !important;
  padding: 8px 10px !important;
  overflow: hidden !important;
  color: var(--nav-text) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 7px !important;
  box-shadow:var(--shadow)!important;
  font-size:14px!important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-align: left !important;
  white-space: normal !important;
}.staff-portal .sidebar .nav-sub-btn{
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  min-height: 38px !important;
  margin: 3px 0 !important;
  padding: 8px 10px !important;
  overflow: hidden !important;
  color: var(--nav-text) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 7px !important;
  box-shadow:var(--shadow)!important;
  font-size:14px!important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-align: left !important;
  white-space: normal !important;
}

.sidebar .nav-btn::before{
  content: none !important;
  display: none !important;
}.sidebar .nav-sub-btn::before{
  content: none !important;
  display: none !important;
}.sidebar .nav-group-toggle::before{
  content: none !important;
  display: none !important;
}.staff-portal .sidebar .nav-btn::before{
  content: none !important;
  display: none !important;
}.staff-portal .sidebar .nav-sub-btn::before{
  content: none !important;
  display: none !important;
}

.sidebar .nav-btn:hover{
  color: var(--nav-text) !important;
  background: var(--vv-surface) !important;
  border-color: var(--vv-line) !important;
}.sidebar .nav-sub-btn:hover{
  color: var(--nav-text) !important;
  background: var(--vv-surface) !important;
  border-color: var(--vv-line) !important;
}.sidebar .nav-group-toggle:hover{
  color: var(--nav-text) !important;
  background: var(--vv-surface) !important;
  border-color: var(--vv-line) !important;
}

.sidebar .nav-btn.active{
  color: var(--on-primary) !important;
  background: var(--vv-accent) !important;
  border-color: var(--vv-accent) !important;
  box-shadow:var(--shadow)!important;
}.sidebar .nav-sub-btn.active{
  color: var(--on-primary) !important;
  background: var(--vv-accent) !important;
  border-color: var(--vv-accent) !important;
  box-shadow:var(--shadow)!important;
}.staff-portal .sidebar .nav-btn.active{
  color: var(--on-primary) !important;
  background: var(--vv-accent) !important;
  border-color: var(--vv-accent) !important;
  box-shadow:var(--shadow)!important;
}.staff-portal .sidebar .nav-sub-btn.active{
  color: var(--on-primary) !important;
  background: var(--vv-accent) !important;
  border-color: var(--vv-accent) !important;
  box-shadow:var(--shadow)!important;
}

.sidebar .nav-group{
  margin: 4px 0 !important;
  padding: 3px !important;
  overflow: visible !important;
  background:var(--nav-bg)!important;
  border: 1px solid var(--vv-line) !important;
  border-radius: var(--vv-radius) !important;
  box-shadow:var(--shadow)!important;
color:var(--nav-text);}

.sidebar .nav-group:has(.nav-btn.active){
  border-color: var(--vv-line-strong) !important;
  box-shadow:var(--shadow)!important;
}

.sidebar .nav-submenu{
  display: grid !important;
  gap: 1px !important;
  padding: 2px 0 1px 10px !important;
}

.sidebar .nav-sub-btn{
  min-height: 34px !important;
  padding-left: 12px !important;
  color: var(--vv-muted) !important;
  font-size:14px!important;
}

.nav-group-caret{
  width: 20px !important;
  height: 20px !important;
  color: var(--vv-accent) !important;
  background: transparent !important;
  border-radius: 4px !important;
}

.sidebar-footer{
  position: relative !important;
  flex: 0 0 auto !important;
  bottom: auto !important;
  padding: 10px 0 0 !important;
  background:var(--nav-bg)!important;
  border-top: 1px solid var(--vv-line) !important;
color:var(--nav-text);}

.sidebar .logout-btn{
  min-height: 38px !important;
  margin: 0 !important;
  padding: 8px 11px !important;
  color:var(--nav-text)!important;
  background:var(--nav-bg)!important;
  border: 1px solid var(--border) !important;
  border-radius: 7px !important;
  box-shadow:var(--shadow)!important;
  font-size:14px!important;
}

/* Main workspace and toolbar */
.app-shell > .main{
  width: calc(100% - var(--vv-sidebar-width)) !important;
  min-width: 0 !important;
  min-height: 100dvh !important;
  margin-left: var(--vv-sidebar-width) !important;
  padding: 18px clamp(18px, 2.4vw, 34px) 40px !important;
  overflow: visible !important;
}.staff-portal .app-shell > .main{
  width: calc(100% - var(--vv-sidebar-width)) !important;
  min-width: 0 !important;
  min-height: 100dvh !important;
  margin-left: var(--vv-sidebar-width) !important;
  padding: 18px clamp(18px, 2.4vw, 34px) 40px !important;
  overflow: visible !important;
}.customer-portal .app-shell > .main{
  width: calc(100% - var(--vv-sidebar-width)) !important;
  min-width: 0 !important;
  min-height: 100dvh !important;
  margin-left: var(--vv-sidebar-width) !important;
  padding: 18px clamp(18px, 2.4vw, 34px) 40px !important;
  overflow: visible !important;
}

.staff-portal .topbar{
  position: sticky !important;
  top: 12px !important;
  z-index: 90 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: var(--vv-topbar-height) !important;
  margin: 0 0 24px !important;
  padding: 12px 14px !important;
  color: var(--vv-text) !important;
  background:var(--surface)!important;
  border: 1px solid var(--vv-line) !important;
  border-radius: var(--vv-radius) !important;
  box-shadow:var(--shadow)!important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.topbar-title{ min-width: 0 !important; }.topbar > div:first-child{ min-width: 0 !important; }
.topbar-title h2{
  margin: 2px 0 !important;
  overflow: hidden !important;
  color: var(--vv-text) !important;
  font-size: 1.15rem !important;
  line-height: 1.2 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}.topbar > div:first-child h2{
  margin: 2px 0 !important;
  overflow: hidden !important;
  color: var(--vv-text) !important;
  font-size: 1.15rem !important;
  line-height: 1.2 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.topbar-title p{
  margin: 0 !important;
  overflow: hidden !important;
  color: var(--vv-muted) !important;
  font-size:14px!important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}.topbar > div:first-child p{
  margin: 0 !important;
  overflow: hidden !important;
  color: var(--vv-muted) !important;
  font-size:14px!important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.topbar-kicker{
  color: var(--vv-accent) !important;
  font-size: 0.64rem !important;
  font-weight: 850 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}
.topbar-actions{
  display: flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  gap: 8px !important;
}.staff-top-actions{
  display: flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  gap: 8px !important;
}

.topbar-menu-btn{ display: none !important; }.mobile-menu-btn{ display: none !important; }

.topbar-quick-action{
  min-height: 40px !important;
  padding: 9px 14px !important;
  color: var(--text-primary) !important;
  background: var(--vv-accent) !important;
  border: 1px solid var(--vv-accent) !important;
  border-radius: 7px !important;
  box-shadow:var(--shadow)!important;
  font-size:14px!important;
  font-weight: 850 !important;
}.primary-btn{
  min-height: 40px !important;
  padding: 9px 14px !important;
  color: var(--on-primary) !important;
  background: var(--vv-accent) !important;
  border: 1px solid var(--vv-accent) !important;
  border-radius: 7px !important;
  box-shadow:var(--shadow)!important;
  font-size:14px!important;
  font-weight: 850 !important;
}.login-btn{
  min-height: 40px !important;
  padding: 9px 14px !important;
  color: var(--on-primary) !important;
  background: var(--vv-accent) !important;
  border: 1px solid var(--vv-accent) !important;
  border-radius: 7px !important;
  box-shadow:var(--shadow)!important;
  font-size:14px!important;
  font-weight: 850 !important;
}.roster-generate-btn{
  min-height: 40px !important;
  padding: 9px 14px !important;
  color: var(--text-primary) !important;
  background: var(--vv-accent) !important;
  border: 1px solid var(--vv-accent) !important;
  border-radius: 7px !important;
  box-shadow:var(--shadow)!important;
  font-size:14px!important;
  font-weight: 850 !important;
}button.primary-btn{
  min-height: 40px !important;
  padding: 9px 14px !important;
  color: var(--on-primary) !important;
  background: var(--vv-accent) !important;
  border: 1px solid var(--vv-accent) !important;
  border-radius: 7px !important;
  box-shadow:var(--shadow)!important;
  font-size:14px!important;
  font-weight: 850 !important;
}
.topbar-quick-action:hover{ background:var(--surface-muted)!important; border-color: var(--border) !important; }.primary-btn:hover{ background:var(--primary)!important; border-color: var(--border) !important; color:var(--on-primary);}.login-btn:hover{ background:var(--primary)!important; border-color: var(--border) !important; color:var(--on-primary);}

.secondary-btn{
  min-height: 40px !important;
  color: var(--vv-text) !important;
  background: var(--vv-surface) !important;
  border: 1px solid var(--vv-line) !important;
  border-radius: 7px !important;
  box-shadow:var(--shadow)!important;
}.icon-btn{
  min-height: 40px !important;
  color: var(--vv-text) !important;
  background: var(--vv-surface) !important;
  border: 1px solid var(--vv-line) !important;
  border-radius: 7px !important;
  box-shadow:var(--shadow)!important;
}.quick-pill{
  min-height: 40px !important;
  color: var(--vv-text) !important;
  background: var(--vv-surface) !important;
  border: 1px solid var(--vv-line) !important;
  border-radius: 7px !important;
  box-shadow:var(--shadow)!important;
}.profile-chip{
  min-height: 40px !important;
  color: var(--vv-text) !important;
  background: var(--vv-surface) !important;
  border: 1px solid var(--vv-line) !important;
  border-radius: 7px !important;
  box-shadow:var(--shadow)!important;
}.notification-bell{
  min-height: 40px !important;
  color: var(--vv-text) !important;
  background: var(--vv-surface) !important;
  border: 1px solid var(--vv-line) !important;
  border-radius: 7px !important;
  box-shadow:var(--shadow)!important;
}.staff-task-alert{
  min-height: 40px !important;
  color: var(--vv-text) !important;
  background: var(--vv-surface) !important;
  border: 1px solid var(--vv-line) !important;
  border-radius: 7px !important;
  box-shadow:var(--shadow)!important;
}
.secondary-btn:hover{ border-color: var(--vv-line-strong) !important; background: var(--vv-surface-2) !important; }.icon-btn:hover{ border-color: var(--vv-line-strong) !important; background: var(--vv-surface-2) !important; }.quick-pill:hover{ border-color: var(--vv-line-strong) !important; background: var(--vv-surface-2) !important; }.profile-chip:hover{ border-color: var(--vv-line-strong) !important; background: var(--vv-surface-2) !important; }.notification-bell:hover{ border-color: var(--vv-line-strong) !important; background: var(--vv-surface-2) !important; }

.profile-initial{
  background: var(--vv-accent) !important;
  color: var(--text-primary) !important;
  box-shadow:var(--shadow)!important;
}.staff-avatar{
  background: var(--vv-accent) !important;
  color: var(--text-primary) !important;
  box-shadow:var(--shadow)!important;
}.notification-bell .bell-mark{
  background: var(--vv-accent) !important;
  color: var(--text-primary) !important;
  box-shadow:var(--shadow)!important;
}
.live-pill{
  min-height: 34px !important;
  padding: 7px 10px !important;
  color: var(--vv-success) !important;
  background:var(--surface)!important;
  border: 1px solid var(--border) !important;
  border-radius: 999px !important;
  font-size:14px!important;
}
.notification-badge{
  color: var(--text-primary) !important;
  background: var(--vv-warning) !important;
  border: 2px solid var(--vv-bg-raised) !important;
}
.notification-panel{
  top: calc(100% + 10px) !important;
  right: 0 !important;
  width: min(390px, calc(100vw - 28px)) !important;
  max-height: min(560px, calc(100dvh - 110px)) !important;
  overflow-y: auto !important;
  color: var(--vv-text) !important;
  background:var(--surface)!important;
  border: 1px solid var(--vv-line-strong) !important;
  border-radius: var(--vv-radius) !important;
  box-shadow:var(--shadow)!important;
  backdrop-filter: none !important;
}.notification-dropdown{
  top: calc(100% + 10px) !important;
  right: 0 !important;
  width: min(390px, calc(100vw - 28px)) !important;
  max-height: min(560px, calc(100dvh - 110px)) !important;
  overflow-y: auto !important;
  color: var(--vv-text) !important;
  background:var(--surface)!important;
  border: 1px solid var(--vv-line-strong) !important;
  border-radius: var(--vv-radius) !important;
  box-shadow:var(--shadow)!important;
  backdrop-filter: none !important;
}

/* Content hierarchy */
.page-section{
  width: 100% !important;
  max-width: 1560px !important;
  margin-inline: auto !important;
}

.section-head{
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 14px !important;
  margin: 0 0 18px !important;
}
.section-head h2{
  color: var(--vv-text) !important;
  font-size: 1.35rem !important;
  line-height: 1.25 !important;
}.page-section > h2{
  color: var(--vv-text) !important;
  font-size: 1.35rem !important;
  line-height: 1.25 !important;
}
.section-head p{ color: var(--vv-muted) !important; }.page-section > p{ color: var(--vv-muted) !important; }

.home-command-hero{
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 170px !important;
  align-items: center !important;
  gap: 24px !important;
  min-height: 210px !important;
  margin-bottom: 14px !important;
  padding: clamp(22px, 3vw, 38px) !important;
  overflow: hidden !important;
  background:var(--hero-bg)!important;
  border: 1px solid var(--vv-line) !important;
  border-left: 4px solid var(--vv-accent) !important;
  border-radius: var(--vv-radius) !important;
  box-shadow:var(--shadow)!important;
color:var(--nav-text);}
.home-command-copy{ max-width: 800px !important; }
.home-command-copy h1{
  margin: 6px 0 10px !important;
  color: var(--vv-text) !important;
  font-size: 2.25rem !important;
  line-height: 1.06 !important;
}
.home-command-copy p{
  max-width: 720px !important;
  color: var(--vv-muted) !important;
  font-size: 0.95rem !important;
  line-height: 1.55 !important;
}
.panel-kicker{
  color: var(--vv-accent) !important;
  font-size: 0.66rem !important;
  font-weight: 850 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}.eyebrow{
  color: var(--vv-accent) !important;
  font-size: 0.66rem !important;
  font-weight: 850 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}
.home-command-orb{
  width: 148px !important;
  height: 148px !important;
  padding: 18px !important;
  border-radius: var(--vv-radius) !important;
  background:var(--hero-bg)!important;
  border: 1px solid var(--vv-line) !important;
  box-shadow:var(--shadow)!important;
color:var(--nav-text);}
.home-command-orb img{ width: 82px !important; height: 82px !important; object-fit: contain !important; }
.home-command-orb span{ color: var(--vv-accent) !important; font-size:14px!important; }
.command-ring{ display: none !important; }

.dashboard-action-row{
  display: grid !important;
  grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin: 0 0 20px !important;
}
.command-pill{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 7px !important;
  min-width: 0 !important;
  padding: 8px 9px !important;
  overflow: hidden !important;
  font-size:14px!important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.command-pill span{
  display: grid !important;
  place-items: center !important;
  width: 22px !important;
  height: 22px !important;
  flex: 0 0 22px !important;
  color: var(--text-primary) !important;
  background: var(--vv-accent) !important;
  border-radius: 5px !important;
  font-size:14px!important;
}

.card{
  color: var(--vv-text) !important;
  background: var(--vv-surface) !important;
  border: 1px solid var(--vv-line) !important;
  border-radius: var(--vv-radius) !important;
  box-shadow:var(--shadow)!important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}.vv-suite-panel{
  color: var(--vv-text) !important;
  background: var(--vv-surface) !important;
  border: 1px solid var(--vv-line) !important;
  border-radius: var(--vv-radius) !important;
  box-shadow:var(--shadow)!important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}.admin-workhub-control{
  color: var(--vv-text) !important;
  background: var(--vv-surface) !important;
  border: 1px solid var(--vv-line) !important;
  border-radius: var(--vv-radius) !important;
  box-shadow:var(--shadow)!important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}.staff-work-panel{
  color: var(--vv-text) !important;
  background: var(--vv-surface) !important;
  border: 1px solid var(--vv-line) !important;
  border-radius: var(--vv-radius) !important;
  box-shadow:var(--shadow)!important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}.staff-suite-panel{
  color: var(--vv-text) !important;
  background: var(--vv-surface) !important;
  border: 1px solid var(--vv-line) !important;
  border-radius: var(--vv-radius) !important;
  box-shadow:var(--shadow)!important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}.workforce-intelligence-panel{
  color: var(--vv-text) !important;
  background: var(--vv-surface) !important;
  border: 1px solid var(--vv-line) !important;
  border-radius: var(--vv-radius) !important;
  box-shadow:var(--shadow)!important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}.roster-generator-card{
  color: var(--vv-text) !important;
  background: var(--vv-surface) !important;
  border: 1px solid var(--vv-line) !important;
  border-radius: var(--vv-radius) !important;
  box-shadow:var(--shadow)!important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}.supplier-intelligence-card{
  color: var(--vv-text) !important;
  background: var(--vv-surface) !important;
  border: 1px solid var(--vv-line) !important;
  border-radius: var(--vv-radius) !important;
  box-shadow:var(--shadow)!important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}.stock-table-card{
  color: var(--vv-text) !important;
  background: var(--vv-surface) !important;
  border: 1px solid var(--vv-line) !important;
  border-radius: var(--vv-radius) !important;
  box-shadow:var(--shadow)!important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}.table-wrap{
  color: var(--vv-text) !important;
  background: var(--vv-surface) !important;
  border: 1px solid var(--vv-line) !important;
  border-radius: var(--vv-radius) !important;
  box-shadow:var(--shadow)!important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}.dialog-panel{
  color: var(--vv-text) !important;
  background: var(--vv-surface) !important;
  border: 1px solid var(--vv-line) !important;
  border-radius: var(--vv-radius) !important;
  box-shadow:var(--shadow)!important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}.modal{
  color: var(--vv-text) !important;
  background: var(--vv-surface) !important;
  border: 1px solid var(--vv-line) !important;
  border-radius: var(--vv-radius) !important;
  box-shadow:var(--shadow)!important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}.modal-content{
  color: var(--vv-text) !important;
  background: var(--vv-surface) !important;
  border: 1px solid var(--vv-line) !important;
  border-radius: var(--vv-radius) !important;
  box-shadow:var(--shadow)!important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}.login-card{
  color: var(--vv-text) !important;
  background: var(--vv-surface) !important;
  border: 1px solid var(--vv-line) !important;
  border-radius: var(--vv-radius) !important;
  box-shadow:var(--shadow)!important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}.public-card{
  color: var(--vv-text) !important;
  background: var(--vv-surface) !important;
  border: 1px solid var(--vv-line) !important;
  border-radius: var(--vv-radius) !important;
  box-shadow:var(--shadow)!important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}.settings-qr-frame{
  color: var(--vv-text) !important;
  background: var(--vv-surface) !important;
  border: 1px solid var(--vv-line) !important;
  border-radius: var(--vv-radius) !important;
  box-shadow:var(--shadow)!important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}.qr-tool-card{
  color: var(--vv-text) !important;
  background: var(--vv-surface) !important;
  border: 1px solid var(--vv-line) !important;
  border-radius: var(--vv-radius) !important;
  box-shadow:var(--shadow)!important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}.announcement-panel{
  color: var(--vv-text) !important;
  background: var(--vv-surface) !important;
  border: 1px solid var(--vv-line) !important;
  border-radius: var(--vv-radius) !important;
  box-shadow:var(--shadow)!important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.card{ padding: 20px !important; }.vv-suite-panel{ padding: 20px !important; }.admin-workhub-control{ padding: 20px !important; }.staff-work-panel{ padding: 20px !important; }.staff-suite-panel{ padding: 20px !important; }.workforce-intelligence-panel{ padding: 20px !important; }.roster-generator-card{ padding: 20px !important; }.supplier-intelligence-card{ padding: 20px !important; }

.card:hover{
  border-color: var(--vv-line-strong) !important;
  transform: translateY(-1px) !important;
  box-shadow:var(--shadow)!important;
}.vv-suite-card:hover{
  border-color: var(--vv-line-strong) !important;
  transform: translateY(-1px) !important;
  box-shadow:var(--shadow)!important;
}.command-insight-card:hover{
  border-color: var(--vv-line-strong) !important;
  transform: translateY(-1px) !important;
  box-shadow:var(--shadow)!important;
}.system-action:hover{
  border-color: var(--vv-line-strong) !important;
  transform: translateY(-1px) !important;
  box-shadow:var(--shadow)!important;
}.staff-action-card:hover{
  border-color: var(--vv-line-strong) !important;
  transform: translateY(-1px) !important;
  box-shadow:var(--shadow)!important;
}

.metric-grid{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
  margin-bottom: 18px !important;
}.dashboard-kpis{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
  margin-bottom: 18px !important;
}.command-status-grid{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
  margin-bottom: 18px !important;
}.stats-grid{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
  margin-bottom: 18px !important;
}
.metric-grid .card{ min-height: 132px !important; }
.metric-grid .card h3{ margin: 0 0 14px !important; color: var(--vv-muted) !important; font-size:14px!important; }
.metric-grid .card p{ margin: 0 !important; }
.metric-grid .card strong{ color: var(--vv-text) !important; font-size: 1.45rem !important; }
.metric-grid .card span{ display: block !important; margin-top: 10px !important; color: var(--vv-soft) !important; font-size:14px!important; }
.kpi-teal{ background: var(--vv-surface) !important; border-top: 3px solid var(--vv-accent) !important; }.kpi-blue{ background: var(--vv-surface) !important; border-top: 3px solid var(--vv-accent) !important; }.kpi-green{ background: var(--vv-surface) !important; border-top: 3px solid var(--vv-accent) !important; }.kpi-red{ background: var(--vv-surface) !important; border-top: 3px solid var(--vv-accent) !important; }
.kpi-blue{ border-top-color: var(--vv-info) !important; }
.kpi-green{ border-top-color: var(--vv-success) !important; }
.kpi-red{ border-top-color: var(--vv-danger) !important; }

.vv-suite-head{
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin-bottom: 16px !important;
}.admin-workhub-head{
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin-bottom: 16px !important;
}.workforce-panel-head{
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin-bottom: 16px !important;
}.supplier-intelligence-head{
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin-bottom: 16px !important;
}
.vv-suite-grid{
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
}.admin-workhub-grid{
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
}.system-action-grid{
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
}.staff-suite-grid{
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
}.staff-mission-grid{
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
}
.vv-suite-card{
  min-width: 0 !important;
  min-height: 128px !important;
  padding: 16px !important;
  color: var(--vv-text) !important;
  text-align: left !important;
  background: var(--vv-bg-raised) !important;
  border: 1px solid var(--vv-line) !important;
  border-radius: var(--vv-radius) !important;
  box-shadow:var(--shadow)!important;
}.admin-workhub-card{
  min-width: 0 !important;
  min-height: 128px !important;
  padding: 16px !important;
  color: var(--vv-text) !important;
  text-align: left !important;
  background: var(--vv-bg-raised) !important;
  border: 1px solid var(--vv-line) !important;
  border-radius: var(--vv-radius) !important;
  box-shadow:var(--shadow)!important;
}.system-action{
  min-width: 0 !important;
  min-height: 128px !important;
  padding: 16px !important;
  color: var(--vv-text) !important;
  text-align: left !important;
  background: var(--vv-bg-raised) !important;
  border: 1px solid var(--vv-line) !important;
  border-radius: var(--vv-radius) !important;
  box-shadow:var(--shadow)!important;
}.staff-action-card{
  min-width: 0 !important;
  min-height: 128px !important;
  padding: 16px !important;
  color: var(--vv-text) !important;
  text-align: left !important;
  background: var(--vv-bg-raised) !important;
  border: 1px solid var(--vv-line) !important;
  border-radius: var(--vv-radius) !important;
  box-shadow:var(--shadow)!important;
}.staff-mission-tile{
  min-width: 0 !important;
  min-height: 128px !important;
  padding: 16px !important;
  color: var(--vv-text) !important;
  text-align: left !important;
  background: var(--vv-bg-raised) !important;
  border: 1px solid var(--vv-line) !important;
  border-radius: var(--vv-radius) !important;
  box-shadow:var(--shadow)!important;
}.command-insight-card{
  min-width: 0 !important;
  min-height: 128px !important;
  padding: 16px !important;
  color: var(--vv-text) !important;
  text-align: left !important;
  background: var(--vv-bg-raised) !important;
  border: 1px solid var(--vv-line) !important;
  border-radius: var(--vv-radius) !important;
  box-shadow:var(--shadow)!important;
}
.vv-suite-card span{ color: var(--vv-accent) !important; }.admin-workhub-card span{ color: var(--vv-accent) !important; }.system-action span{ color: var(--vv-accent) !important; }
.vv-suite-card strong{ color: var(--vv-text) !important; font-size: 0.9rem !important; }.admin-workhub-card strong{ color: var(--vv-text) !important; font-size: 0.9rem !important; }.system-action strong{ color: var(--vv-text) !important; font-size: 0.9rem !important; }
.vv-suite-card small{ color: var(--vv-muted) !important; font-size:14px!important; line-height: 1.45 !important; }.admin-workhub-card small{ color: var(--vv-muted) !important; font-size:14px!important; line-height: 1.45 !important; }.system-action small{ color: var(--vv-muted) !important; font-size:14px!important; line-height: 1.45 !important; }

.chart-grid{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
}.expense-chart-grid{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
}.supplier-intelligence-grid{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
}
.command-chart-card{
  min-width: 0 !important;
  min-height: 340px !important;
  padding: 18px !important;
  overflow: hidden !important;
}.finance-chart-card{
  min-width: 0 !important;
  min-height: 340px !important;
  padding: 18px !important;
  overflow: hidden !important;
}
.command-chart-card canvas{
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 270px !important;
  max-height: 270px !important;
}.finance-chart-card canvas{
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 270px !important;
  max-height: 270px !important;
}

/* Data surfaces */
.table-wrap{
  width: 100% !important;
  max-width: 100% !important;
  padding: 16px !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-color: rgba(190, 242, 100, 0.28) transparent !important;
}.expense-table-wrap{
  width: 100% !important;
  max-width: 100% !important;
  padding: 16px !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-color: rgba(190, 242, 100, 0.28) transparent !important;
}.staff-expense-register{
  width: 100% !important;
  max-width: 100% !important;
  padding: 16px !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-color: rgba(190, 242, 100, 0.28) transparent !important;
}.admin-workhub-register{
  width: 100% !important;
  max-width: 100% !important;
  padding: 16px !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-color: rgba(190, 242, 100, 0.28) transparent !important;
}
table{
  width: 100% !important;
  border-collapse: collapse !important;
  color: var(--vv-text) !important;
}
th{
  padding: 11px 10px !important;
  color: var(--vv-muted) !important;
  background:var(--surface-muted)!important;
  border-bottom: 1px solid var(--vv-line) !important;
  font-size:14px!important;
  font-weight: 850 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  text-align: left !important;
}
td{
  padding: 12px 10px !important;
  color: var(--text-primary) !important;
  border-bottom: 1px solid var(--border) !important;
  font-size:14px!important;
  line-height: 1.35 !important;
  vertical-align: middle !important;
}
tbody tr:hover td{ background:var(--page)!important; }
.register-footer{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding-top: 12px !important;
  color: var(--vv-muted) !important;
}

input{
  width: 100% !important;
  min-height: 44px !important;
  padding: 10px 12px !important;
  color: var(--vv-text) !important;
  background:var(--surface)!important;
  border: 1px solid var(--vv-line) !important;
  border-radius: 7px !important;
  box-shadow:var(--shadow)!important;
}select{
  width: 100% !important;
  min-height: 44px !important;
  padding: 10px 12px !important;
  color: var(--vv-text) !important;
  background:var(--surface)!important;
  border: 1px solid var(--vv-line) !important;
  border-radius: 7px !important;
  box-shadow:var(--shadow)!important;
}textarea{
  width: 100% !important;
  min-height: 44px !important;
  padding: 10px 12px !important;
  color: var(--vv-text) !important;
  background:var(--surface)!important;
  border: 1px solid var(--vv-line) !important;
  border-radius: 7px !important;
  box-shadow:var(--shadow)!important;
}
textarea{ min-height: 112px !important; resize: vertical !important; }
input::placeholder{ color: var(--text-secondary) !important; }textarea::placeholder{ color: var(--text-secondary) !important; }
input:focus{ border-color: var(--vv-accent) !important; }select:focus{ border-color: var(--vv-accent) !important; }textarea:focus{ border-color: var(--vv-accent) !important; }
.form-field label{ color: var(--vv-muted) !important; font-size:14px!important; }.form-grid label{ color: var(--vv-muted) !important; font-size:14px!important; }
.form-grid{ gap: 14px !important; }

.status-badge{
  min-height: 26px !important;
  padding: 4px 8px !important;
  color: var(--vv-text) !important;
  background: var(--vv-surface-2) !important;
  border: 1px solid var(--vv-line) !important;
  border-radius: 999px !important;
  font-size: 0.68rem !important;
}.badge{
  min-height: 26px !important;
  padding: 4px 8px !important;
  color: var(--vv-text) !important;
  background: var(--vv-surface-2) !important;
  border: 1px solid var(--vv-line) !important;
  border-radius: 999px !important;
  font-size: 0.68rem !important;
}.active-badge{
  min-height: 26px !important;
  padding: 4px 8px !important;
  color: var(--vv-text) !important;
  background: var(--vv-surface-2) !important;
  border: 1px solid var(--vv-line) !important;
  border-radius: 999px !important;
  font-size: 0.68rem !important;
}.timesheet-status-chip{
  min-height: 26px !important;
  padding: 4px 8px !important;
  color: var(--vv-text) !important;
  background: var(--vv-surface-2) !important;
  border: 1px solid var(--vv-line) !important;
  border-radius: 999px !important;
  font-size:14px!important;
}.email-state-chip{
  min-height: 26px !important;
  padding: 4px 8px !important;
  color: var(--vv-text) !important;
  background: var(--vv-surface-2) !important;
  border: 1px solid var(--vv-line) !important;
  border-radius: 999px !important;
  font-size:14px!important;
}
.active-badge{ color:var(--on-primary)!important; border-color: var(--border) !important; background:var(--primary)!important; }.status-paid{ color: var(--vv-success) !important; border-color: var(--border) !important; background:var(--success-bg)!important; }.status-reimbursed{ color: var(--vv-success) !important; border-color: var(--border) !important; background:var(--surface)!important; }
.danger-badge{ color: var(--danger) !important; border-color: var(--border) !important; background:var(--danger-bg)!important; }.status-unpaid{ color: var(--text-primary) !important; border-color: var(--border) !important; background:var(--surface)!important; }.status-disputed{ color: var(--text-primary) !important; border-color: var(--border) !important; background:var(--surface)!important; }

/* Standalone attendance display */
.shift-terminal-page{
  min-height: 100dvh !important;
  background-color: var(--vv-bg) !important;
  background-image:none!important;
  background-size: 32px 32px !important;
}
.shift-terminal-shell{ color: var(--vv-text) !important; }
.shift-terminal-hero{
  background: var(--vv-bg-raised) !important;
  border-color: var(--vv-line) !important;
  border-radius: var(--vv-radius) !important;
  box-shadow:var(--shadow)!important;
}.shift-terminal-grid{
  background: var(--vv-bg-raised) !important;
  border-color: var(--vv-line) !important;
  border-radius: var(--vv-radius) !important;
  box-shadow:var(--shadow)!important;
}.terminal-qr-stage{
  background: var(--vv-bg-raised) !important;
  border-color: var(--vv-line) !important;
  border-radius: var(--vv-radius) !important;
  box-shadow:var(--shadow)!important;
}
.terminal-brand-lockup img{ border-radius: 6px !important; }
.terminal-status-pill{
  color: var(--vv-accent) !important;
  background:var(--surface)!important;
  border-color: var(--border) !important;
  border-radius: 999px !important;
}.terminal-countdown-ring{
  color: var(--vv-accent) !important;
  background:var(--surface)!important;
  border-color: var(--border) !important;
  border-radius: 999px !important;
}
.terminal-qr-orbit{ display: none !important; }
.terminal-qr-frame{
  background:var(--surface)!important;
  border: 10px solid var(--border) !important;
  border-radius: var(--vv-radius) !important;
  box-shadow:var(--shadow)!important;
}

/* Dialogs, confirmations and empty states */
.dialog-backdrop{
  position: fixed !important;
  inset: 0 !important;
  z-index: 400 !important;
  place-items: center !important;
  padding: 18px !important;
  overflow-y: auto !important;
  background:var(--scrim)!important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}.modal-backdrop{
  position: fixed !important;
  inset: 0 !important;
  z-index: 400 !important;
  place-items: center !important;
  padding: 18px !important;
  overflow-y: auto !important;
  background:var(--scrim)!important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.dialog-backdrop{ display: none !important; }
.dialog-backdrop.active{ display: grid !important; }
.dialog-panel{
  width: min(920px, 100%) !important;
  max-width: calc(100vw - 36px) !important;
  max-height: calc(100dvh - 36px) !important;
  padding: 20px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  background:var(--surface)!important;
  border-color: var(--vv-line-strong) !important;
  box-shadow:var(--shadow)!important;
}.modal{
  width: min(920px, 100%) !important;
  max-width: calc(100vw - 36px) !important;
  max-height: calc(100dvh - 36px) !important;
  padding: 20px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  background:var(--surface)!important;
  border-color: var(--vv-line-strong) !important;
  box-shadow:var(--shadow)!important;
}.modal-content{
  width: min(920px, 100%) !important;
  max-width: calc(100vw - 36px) !important;
  max-height: calc(100dvh - 36px) !important;
  padding: 20px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  background:var(--surface)!important;
  border-color: var(--vv-line-strong) !important;
  box-shadow:var(--shadow)!important;
}
.dialog-actions{
  position: sticky !important;
  bottom: -20px !important;
  z-index: 2 !important;
  display: flex !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  margin: 18px -20px -20px !important;
  padding: 14px 20px !important;
  background:var(--surface)!important;
  border-top: 1px solid var(--vv-line) !important;
}.modal-actions{
  position: sticky !important;
  bottom: -20px !important;
  z-index: 2 !important;
  display: flex !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  margin: 18px -20px -20px !important;
  padding: 14px 20px !important;
  background:var(--surface)!important;
  border-top: 1px solid var(--vv-line) !important;
}
.empty-state{
  padding: 28px 18px !important;
  color: var(--vv-muted) !important;
  text-align: center !important;
  background:var(--surface)!important;
  border: 1px dashed var(--vv-line) !important;
  border-radius: var(--vv-radius) !important;
}
.toast{
  position: fixed !important;
  top: 18px !important;
  right: 18px !important;
  bottom: auto !important;
  z-index: 1000 !important;
  width: min(390px, calc(100vw - 28px)) !important;
  padding: 13px 15px !important;
  color: var(--vv-text) !important;
  background:var(--surface)!important;
  border: 1px solid var(--border) !important;
  border-left: 4px solid var(--vv-success) !important;
  border-radius: var(--vv-radius) !important;
  box-shadow:var(--shadow)!important;
}.action-confirmation{
  position: fixed !important;
  top: 18px !important;
  right: 18px !important;
  bottom: auto !important;
  z-index: 1000 !important;
  width: min(390px, calc(100vw - 28px)) !important;
  padding: 13px 15px !important;
  color: var(--vv-text) !important;
  background:var(--surface)!important;
  border: 1px solid var(--border) !important;
  border-left: 4px solid var(--vv-success) !important;
  border-radius: var(--vv-radius) !important;
  box-shadow:var(--shadow)!important;
}

/* Staff portal */
.staff-sidebar-profile{
  display: grid !important;
  grid-template-columns: 38px minmax(0, 1fr) !important;
  gap: 9px !important;
  margin: 0 0 10px !important;
  padding: 9px !important;
  background: var(--vv-bg-raised) !important;
  border: 1px solid var(--vv-line) !important;
  border-radius: var(--vv-radius) !important;
}
.staff-sidebar-profile .staff-avatar.small{ width: 38px !important; height: 38px !important; }
.staff-sidebar-profile strong{ overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }.staff-sidebar-profile span{ overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }.staff-sidebar-profile small{ overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
.staff-sidebar-profile strong{ color: var(--vv-text) !important; font-size:14px!important; }
.staff-sidebar-profile span{ color: var(--vv-muted) !important; font-size:14px!important; }.staff-sidebar-profile small{ color: var(--vv-muted) !important; font-size:14px!important; }
.staff-profile-shell{ max-width: 840px !important; }
.staff-profile-hero{
  background: var(--vv-surface) !important;
  border: 1px solid var(--vv-line) !important;
  border-radius: var(--vv-radius) !important;
  box-shadow:var(--shadow)!important;
}.profile-block{
  background: var(--vv-surface) !important;
  border: 1px solid var(--vv-line) !important;
  border-radius: var(--vv-radius) !important;
  box-shadow:var(--shadow)!important;
}
.profile-row{ border-color: var(--vv-line) !important; }.profile-action{ border-color: var(--vv-line) !important; }
.staff-task-alert{ padding: 7px 10px !important; }
.staff-task-alert small{ color: var(--vv-muted) !important; }

/* Login and customer entry */
.login-page{
  background:var(--surface)!important;
}
.login-page .login-shell{ padding: 24px !important; }
.login-page .login-card{
  width: min(430px, 100%) !important;
  padding: 26px !important;
  background:var(--surface)!important;
  border: 1px solid var(--vv-line-strong) !important;
  border-radius: var(--vv-radius) !important;
  box-shadow:var(--shadow)!important;
}
.login-page .login-card::before{ display: none !important; }
.login-page .login-logo-box{
  width: 104px !important;
  height: 84px !important;
  padding: 8px !important;
  background:var(--surface)!important;
  border: 1px solid var(--vv-line) !important;
  border-radius: var(--vv-radius) !important;
  box-shadow:var(--shadow)!important;
}
.login-page .login-logo{ width: 100% !important; height: 100% !important; object-fit: contain !important; }
.login-page .login-card h1{ color: var(--vv-text) !important; font-size: 1.8rem !important; }
.login-page .portal-links a{ color: var(--vv-accent) !important; }
.vv-entry-sequence{ background:var(--surface)!important; }
.vv-entry-core img{ border-radius: var(--vv-radius) !important; filter: none !important; }
.vv-entry-ring{ border-color: var(--border) !important; box-shadow:var(--shadow)!important; }
.vv-entry-ring-one{ border-top-color: var(--vv-accent) !important; }
.vv-entry-ring-two{ border-right-color: var(--vv-info) !important; }
.vv-entry-scan{ background: var(--vv-accent) !important; box-shadow:var(--shadow)!important; }

/* Mobile bottom navigation */
.mobile-bottom-nav{
  display: none !important;
}

.mobile-sidebar-backdrop{
  display: none !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 110 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  background:var(--scrim)!important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: opacity 180ms ease !important;
}

@media (min-width: 1440px) {
  .app-shell > .main{ padding-inline: 40px !important; }.staff-portal .app-shell > .main{ padding-inline: 40px !important; }.customer-portal .app-shell > .main{ padding-inline: 40px !important; }
  .vv-suite-grid{ grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }.admin-workhub-grid{ grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }.system-action-grid{ grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
}

@media (max-width: 1180px) {
  .dashboard-action-row{ grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .vv-suite-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }.admin-workhub-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }.system-action-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }.staff-suite-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

@media (max-width: 1023px) {
  :root{ --vv-sidebar-width: 290px; }

  body::after{ background-position: 50% 54% !important; }

  .app-shell > .main{
    width: 100% !important;
    margin-left: 0 !important;
    padding: 12px 14px 92px !important;
  }.staff-portal .app-shell > .main{
    width: 100% !important;
    margin-left: 0 !important;
    padding: 12px 14px 92px !important;
  }.customer-portal .app-shell > .main{
    width: 100% !important;
    margin-left: 0 !important;
    padding: 12px 14px 92px !important;
  }

  .staff-portal .sidebar{
    width: min(82vw, var(--vv-sidebar-width)) !important;
    max-width: var(--vv-sidebar-width) !important;
    padding: calc(62px + env(safe-area-inset-top)) 10px calc(16px + env(safe-area-inset-bottom)) !important;
    transform: translate3d(-104%, 0, 0) !important;
    visibility: visible !important;
    opacity: 1 !important;
    transition: transform 220ms cubic-bezier(0.2, 0.72, 0.2, 1) !important;
    background:var(--nav-bg)!important;
    border-right-color: var(--border) !important;
    border-radius: 0 !important;
    box-shadow:var(--shadow)!important;
  color:var(--nav-text);}.customer-portal .sidebar{
    width: min(82vw, var(--vv-sidebar-width)) !important;
    max-width: var(--vv-sidebar-width) !important;
    padding: calc(62px + env(safe-area-inset-top)) 10px calc(16px + env(safe-area-inset-bottom)) !important;
    transform: translate3d(-104%, 0, 0) !important;
    visibility: visible !important;
    opacity: 1 !important;
    transition: transform 220ms cubic-bezier(0.2, 0.72, 0.2, 1) !important;
    background:var(--nav-bg)!important;
    border-right-color: var(--border) !important;
    border-radius: 0 !important;
    box-shadow:var(--shadow)!important;
  color:var(--nav-text);}

  .sidebar .brand{ background:var(--nav-bg)!important; color:var(--nav-text);}.sidebar.vv-sidebar .shell-brand{ background:var(--nav-bg)!important; color:var(--nav-text);}.staff-portal .sidebar .brand{ background:var(--nav-bg)!important; color:var(--nav-text);}.customer-portal .sidebar .brand{ background:var(--nav-bg)!important; color:var(--nav-text);}

  .sidebar .nav-btn{
    color:var(--nav-text)!important;
    background:var(--nav-bg)!important;
    border-color: var(--border) !important;
  }.sidebar .nav-sub-btn{
    color:var(--nav-text)!important;
    background:var(--nav-bg)!important;
    border-color: var(--border) !important;
  }.sidebar .sidebar-group-toggle{
    color:var(--nav-text)!important;
    background:var(--nav-bg)!important;
    border-color: var(--border) !important;
  }.sidebar .nav-group-title{
    color:var(--nav-text)!important;
    background:var(--nav-bg)!important;
    border-color: var(--border) !important;
  }

  body.nav-open .sidebar{
    transform: translate3d(0, 0, 0) !important;
  }

  .mobile-sidebar-backdrop{ display: block !important; }
  body.mobile-menu-open .mobile-sidebar-backdrop{
    opacity: 1 !important;
    pointer-events: auto !important;
  }html.mobile-menu-open .mobile-sidebar-backdrop{
    opacity: 1 !important;
    pointer-events: auto !important;
  }body.sidebar-open .mobile-sidebar-backdrop{
    opacity: 1 !important;
    pointer-events: auto !important;
  }body.nav-open .mobile-sidebar-backdrop{
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .staff-portal .topbar{
    top: 8px !important;
    min-height: 64px !important;
    padding: 9px 10px !important;
  }

  .topbar-menu-btn{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
    color: var(--vv-text) !important;
    background: var(--vv-surface-2) !important;
    border: 1px solid var(--vv-line) !important;
    border-radius: 7px !important;
    box-shadow:var(--shadow)!important;
  }.mobile-menu-btn{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
    color: var(--vv-text) !important;
    background: var(--vv-surface-2) !important;
    border: 1px solid var(--vv-line) !important;
    border-radius: 7px !important;
    box-shadow:var(--shadow)!important;
  }
  .mobile-menu-btn{
    position: fixed !important;
    top: max(10px, env(safe-area-inset-top)) !important;
    left: 10px !important;
    z-index: 130 !important;
  }
  .topbar-menu-btn span{
    display: block !important;
    width: 18px !important;
    height: 2px !important;
    margin: 2px 0 !important;
    background: var(--vv-accent) !important;
    border-radius: 99px !important;
  }.mobile-menu-btn span{
    display: block !important;
    width: 18px !important;
    height: 2px !important;
    margin: 2px 0 !important;
    background: var(--vv-accent) !important;
    border-radius: 99px !important;
  }

  .staff-portal .topbar{ padding-left: 56px !important; }
  .topbar-title h2{ font-size: 1rem !important; }.topbar > div:first-child h2{ font-size: 1rem !important; }
  .topbar-quick-action{ display: none !important; }.profile-chip span:not(.profile-initial){ display: none !important; }.live-pill{ display: none !important; }.staff-task-alert span:last-child{ display: none !important; }

  .notification-panel{
    position: fixed !important;
    top: 80px !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: none !important;
  }.notification-dropdown{
    position: fixed !important;
    top: 80px !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: none !important;
  }

  .metric-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }.dashboard-kpis{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }.command-status-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .chart-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }.expense-chart-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }.supplier-intelligence-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .vv-suite-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }.admin-workhub-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }.system-action-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }.staff-suite-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  .mobile-bottom-nav{
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
    z-index: 100 !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 4px !important;
    padding: 6px !important;
    background:var(--surface)!important;
    border: 1px solid var(--vv-line) !important;
    border-radius: var(--vv-radius) !important;
    box-shadow:var(--shadow)!important;
  }.admin-mobile-bottom-nav{
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
    z-index: 100 !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 4px !important;
    padding: 6px !important;
    background:var(--surface)!important;
    border: 1px solid var(--vv-line) !important;
    border-radius: var(--vv-radius) !important;
    box-shadow:var(--shadow)!important;
  }.staff-mobile-bottom-nav{
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
    z-index: 100 !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 4px !important;
    padding: 6px !important;
    background:var(--surface)!important;
    border: 1px solid var(--vv-line) !important;
    border-radius: var(--vv-radius) !important;
    box-shadow:var(--shadow)!important;
  }
  .mobile-bottom-nav button{
    min-width: 0 !important;
    min-height: 42px !important;
    padding: 5px 3px !important;
    overflow: hidden !important;
    color: var(--vv-muted) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 6px !important;
    font-size:14px!important;
    font-weight: 750 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }.admin-mobile-bottom-nav button{
    min-width: 0 !important;
    min-height: 42px !important;
    padding: 5px 3px !important;
    overflow: hidden !important;
    color: var(--vv-muted) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 6px !important;
    font-size:14px!important;
    font-weight: 750 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }.staff-mobile-bottom-nav button{
    min-width: 0 !important;
    min-height: 42px !important;
    padding: 5px 3px !important;
    overflow: hidden !important;
    color: var(--vv-muted) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 6px !important;
    font-size:14px!important;
    font-weight: 750 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .mobile-bottom-nav .mobile-bottom-primary{
    color: var(--on-primary) !important;
    background: var(--vv-accent) !important;
  }.admin-mobile-bottom-nav .mobile-bottom-primary{
    color: var(--on-primary) !important;
    background: var(--vv-accent) !important;
  }.staff-mobile-bottom-nav .mobile-bottom-primary{
    color: var(--on-primary) !important;
    background: var(--vv-accent) !important;
  }
  body.mobile-menu-open .mobile-bottom-nav{ opacity: 0 !important; pointer-events: none !important; }body.mobile-menu-open .admin-mobile-bottom-nav{ opacity: 0 !important; pointer-events: none !important; }body.mobile-menu-open .staff-mobile-bottom-nav{ opacity: 0 !important; pointer-events: none !important; }
}

@media (max-width: 767px) {
  .app-shell > .main{ padding-inline: 10px !important; }.staff-portal .app-shell > .main{ padding-inline: 10px !important; }.customer-portal .app-shell > .main{ padding-inline: 10px !important; }

  .staff-portal .topbar{ margin-bottom: 16px !important; }

  .home-command-hero{
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
    padding: 20px !important;
  }
  .home-command-copy h1{ font-size: 1.75rem !important; }
  .home-command-orb{ display: none !important; }
  .home-command-actions{
    align-items: stretch !important;
    flex-direction: column !important;
  }.section-head{
    align-items: stretch !important;
    flex-direction: column !important;
  }.vv-suite-head{
    align-items: stretch !important;
    flex-direction: column !important;
  }.admin-workhub-head{
    align-items: stretch !important;
    flex-direction: column !important;
  }.workforce-panel-head{
    align-items: stretch !important;
    flex-direction: column !important;
  }.supplier-intelligence-head{
    align-items: stretch !important;
    flex-direction: column !important;
  }
  .home-command-actions{ display: grid !important; grid-template-columns: 1fr !important; }
  .home-command-actions button{ width: 100% !important; }.section-head button{ width: 100% !important; }

  .dashboard-action-row{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .metric-grid{ grid-template-columns: 1fr !important; }.dashboard-kpis{ grid-template-columns: 1fr !important; }.command-status-grid{ grid-template-columns: 1fr !important; }.stats-grid{ grid-template-columns: 1fr !important; }.chart-grid{ grid-template-columns: 1fr !important; }.expense-chart-grid{ grid-template-columns: 1fr !important; }.supplier-intelligence-grid{ grid-template-columns: 1fr !important; }.vv-suite-grid{ grid-template-columns: 1fr !important; }.admin-workhub-grid{ grid-template-columns: 1fr !important; }.system-action-grid{ grid-template-columns: 1fr !important; }.staff-suite-grid{ grid-template-columns: 1fr !important; }.staff-mission-grid{ grid-template-columns: 1fr !important; }.form-grid{ grid-template-columns: 1fr !important; }.settings-grid{ grid-template-columns: 1fr !important; }.staff-work-grid{ grid-template-columns: 1fr !important; }

  .metric-grid .card{ min-height: 112px !important; }
  .command-chart-card{ min-height: 300px !important; }.finance-chart-card{ min-height: 300px !important; }
  .command-chart-card canvas{ height: 230px !important; max-height: 230px !important; }.finance-chart-card canvas{ height: 230px !important; max-height: 230px !important; }

  .table-wrap{ padding: 10px !important; }.expense-table-wrap{ padding: 10px !important; }.staff-expense-register{ padding: 10px !important; }.admin-workhub-register{ padding: 10px !important; }
  .table-wrap table{ min-width: 760px !important; }.expense-table-wrap table{ min-width: 760px !important; }.staff-expense-register table{ min-width: 760px !important; }
  .register-footer{ align-items: stretch !important; flex-direction: column !important; }

  .dialog-backdrop{ align-items: end !important; padding: 0 !important; }.modal-backdrop{ align-items: end !important; padding: 0 !important; }
  .dialog-panel{
    width: 100% !important;
    max-width: 100% !important;
    max-height: 92dvh !important;
    padding: 16px !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
    border-radius: 10px 10px 0 0 !important;
  }.modal{
    width: 100% !important;
    max-width: 100% !important;
    max-height: 92dvh !important;
    padding: 16px !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
    border-radius: 10px 10px 0 0 !important;
  }.modal-content{
    width: 100% !important;
    max-width: 100% !important;
    max-height: 92dvh !important;
    padding: 16px !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
    border-radius: 10px 10px 0 0 !important;
  }
  .dialog-actions{
    bottom: -16px !important;
    margin: 16px -16px -16px !important;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom)) !important;
  }.modal-actions{
    bottom: -16px !important;
    margin: 16px -16px -16px !important;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom)) !important;
  }
  .dialog-actions button{ flex: 1 1 0 !important; min-width: 0 !important; }.modal-actions button{ flex: 1 1 0 !important; min-width: 0 !important; }

  .toast{ top: auto !important; right: 10px !important; bottom: calc(72px + env(safe-area-inset-bottom)) !important; left: 10px !important; width: auto !important; }.action-confirmation{ top: auto !important; right: 10px !important; bottom: calc(72px + env(safe-area-inset-bottom)) !important; left: 10px !important; width: auto !important; }
}

@media (max-width: 420px) {
  .staff-portal .sidebar{ width: min(82vw, 276px) !important; }.customer-portal .sidebar{ width: min(82vw, 276px) !important; }
  .topbar-actions{ gap: 5px !important; }.staff-top-actions{ gap: 5px !important; }
  .profile-chip{ width: 38px !important; min-width: 38px !important; height: 38px !important; padding: 0 !important; }.notification-bell{ width: 38px !important; min-width: 38px !important; height: 38px !important; padding: 0 !important; }.staff-task-alert{ width: 38px !important; min-width: 38px !important; height: 38px !important; padding: 0 !important; }
  .dashboard-action-row{ grid-template-columns: 1fr 1fr !important; }
  .command-pill{ font-size:14px!important; }
  .card{ padding: 15px !important; }.vv-suite-panel{ padding: 15px !important; }.admin-workhub-control{ padding: 15px !important; }.staff-work-panel{ padding: 15px !important; }.staff-suite-panel{ padding: 15px !important; }
}

/* ========================================================================== */
/* Titanium workspace: final cross-portal presentation layer                  */
/* ========================================================================== */

:root{
















  --vv-sidebar-width: 264px;
  --vv-topbar-height: 74px;
  --vv-radius: 7px;

}



body.staff-portal{
  color: var(--vv-text) !important;
  background:var(--page)!important;
}body.customer-portal{
  color: var(--vv-text) !important;
  background:var(--page)!important;
}

body::before{
  opacity: 0.72 !important;
  background-image:none!important;
  background-size: 72px 72px !important;
}

body::after{
  opacity: 0.01 !important;
}

/* The former page-wide QR launcher is intentionally retired. */
.global-qr-button{
  display: none !important;
}.global-qr-backdrop{
  display: none !important;
}

.staff-portal .sidebar{
  background:var(--nav-bg)!important;
  border-right: 1px solid var(--border) !important;
  box-shadow:var(--shadow)!important;
color:var(--nav-text);}.customer-portal .sidebar{
  background:var(--nav-bg)!important;
  border-right: 1px solid var(--border) !important;
  box-shadow:var(--shadow)!important;
color:var(--nav-text);}

.sidebar .brand{
  min-height: 64px !important;
  background:var(--nav-bg)!important;
  border-color: var(--border) !important;
  box-shadow:var(--shadow)!important;
color:var(--nav-text);}.sidebar.vv-sidebar .shell-brand{
  min-height: 64px !important;
  background:var(--nav-bg)!important;
  border-color: var(--border) !important;
  box-shadow:var(--shadow)!important;
color:var(--nav-text);}.staff-portal .sidebar .brand{
  min-height: 64px !important;
  background:var(--nav-bg)!important;
  border-color: var(--border) !important;
  box-shadow:var(--shadow)!important;
color:var(--nav-text);}.customer-portal .sidebar .brand{
  min-height: 64px !important;
  background:var(--nav-bg)!important;
  border-color: var(--border) !important;
  box-shadow:var(--shadow)!important;
color:var(--nav-text);}.staff-sidebar-profile{
  min-height: 64px !important;
  background:var(--nav-bg)!important;
  border-color: var(--border) !important;
  box-shadow:var(--shadow)!important;
color:var(--nav-text);}

.sidebar .brand .logo-img{
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  flex-basis: 46px !important;
  background:var(--nav-bg)!important;
  border-color: var(--border) !important;
color:var(--nav-text);}.sidebar.vv-sidebar .shell-brand .logo-img{
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  flex-basis: 46px !important;
  background:var(--nav-bg)!important;
  border-color: var(--border) !important;
color:var(--nav-text);}.staff-portal .sidebar .brand .logo-img{
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  flex-basis: 46px !important;
  background:var(--nav-bg)!important;
  border-color: var(--border) !important;
color:var(--nav-text);}.customer-portal .sidebar .brand .logo-img{
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  flex-basis: 46px !important;
  background:var(--nav-bg)!important;
  border-color: var(--border) !important;
color:var(--nav-text);}

.sidebar .brand h1{
  font-size: 0.94rem !important;
}

.sidebar .brand p{
  font-size:14px!important;
}

.nav-section-label{
  margin-top: 17px !important;
  color: var(--text-secondary) !important;
  font-size: 0.64rem !important;
}

.sidebar .nav-btn{
  min-height: 42px !important;
  margin-bottom: 5px !important;
  padding: 9px 11px !important;
  color:var(--nav-text)!important;
  background:var(--nav-bg)!important;
  border-color: var(--border) !important;
  font-size:14px!important;
  font-weight: 720 !important;
}.sidebar .nav-sub-btn{
  min-height: 42px !important;
  margin-bottom: 5px !important;
  padding: 9px 11px !important;
  color:var(--nav-text)!important;
  background:var(--nav-bg)!important;
  border-color: var(--border) !important;
  font-size:14px!important;
  font-weight: 720 !important;
}.sidebar .nav-group-toggle{
  min-height: 42px !important;
  margin-bottom: 5px !important;
  padding: 9px 11px !important;
  color:var(--nav-text)!important;
  background:var(--nav-bg)!important;
  border-color: var(--border) !important;
  font-size:14px!important;
  font-weight: 720 !important;
}.staff-portal .sidebar .nav-btn{
  min-height: 42px !important;
  margin-bottom: 5px !important;
  padding: 9px 11px !important;
  color:var(--nav-text)!important;
  background:var(--nav-bg)!important;
  border-color: var(--border) !important;
  font-size:14px!important;
  font-weight: 720 !important;
}.staff-portal .sidebar .nav-sub-btn{
  min-height: 42px !important;
  margin-bottom: 5px !important;
  padding: 9px 11px !important;
  color:var(--nav-text)!important;
  background:var(--nav-bg)!important;
  border-color: var(--border) !important;
  font-size:14px!important;
  font-weight: 720 !important;
}

.sidebar .nav-btn:hover{
  color:var(--nav-text)!important;
  background:var(--nav-bg)!important;
  border-color: var(--border) !important;
}.sidebar .nav-sub-btn:hover{
  color:var(--nav-text)!important;
  background:var(--nav-bg)!important;
  border-color: var(--border) !important;
}.sidebar .nav-group-toggle:hover{
  color:var(--nav-text)!important;
  background:var(--nav-bg)!important;
  border-color: var(--border) !important;
}

.sidebar .nav-btn.active{
  color:var(--on-primary)!important;
  background:var(--primary)!important;
  box-shadow:var(--shadow)!important;
}.sidebar .nav-sub-btn.active{
  color:var(--on-primary)!important;
  background:var(--primary)!important;
  box-shadow:var(--shadow)!important;
}.staff-portal .sidebar .nav-btn.active{
  color:var(--on-primary)!important;
  background:var(--primary)!important;
  box-shadow:var(--shadow)!important;
}.staff-portal .sidebar .nav-sub-btn.active{
  color:var(--on-primary)!important;
  background:var(--primary)!important;
  box-shadow:var(--shadow)!important;
}

.sidebar .nav-group{
  background:var(--nav-bg)!important;
  border-color: var(--border) !important;
color:var(--nav-text);}

.sidebar-nav{
  scrollbar-color: rgba(106, 183, 255, 0.38) transparent !important;
}

.sidebar-nav::-webkit-scrollbar-thumb{
  background:var(--nav-bg)!important;
color:var(--nav-text);}

.sidebar-footer{
  background:var(--nav-bg)!important;
color:var(--nav-text);}

.logout-btn{
  min-height: 44px !important;
  color: var(--text-primary) !important;
  background:var(--surface)!important;
  border-color: var(--border) !important;
}

.app-shell > .main{
  padding: 20px clamp(24px, 2.5vw, 52px) 54px !important;
}.staff-portal .app-shell > .main{
  padding: 20px clamp(24px, 2.5vw, 52px) 54px !important;
}.customer-portal .app-shell > .main{
  padding: 20px clamp(24px, 2.5vw, 52px) 54px !important;
}

.page-section{
  width: min(100%, 1880px) !important;
  max-width: 1880px !important;
  margin-inline: auto !important;
}

.staff-portal .topbar{
  min-height: var(--vv-topbar-height) !important;
  padding: 11px 14px !important;
  background:var(--surface)!important;
  border-color: var(--border) !important;
  box-shadow:var(--shadow)!important;
}

.topbar::after{
  background: linear-gradient(90deg, transparent, var(--vv-accent), var(--vv-warning), transparent) !important;
}.vv-topbar::after{
  background: linear-gradient(90deg, transparent, var(--vv-accent), var(--vv-warning), transparent) !important;
}

.topbar-title h2{
  font-size: 1.28rem !important;
}.topbar > div:first-child h2{
  font-size: 1.28rem !important;
}

.topbar-title p{
  font-size:14px!important;
}.topbar > div:first-child p{
  font-size:14px!important;
}

.section-head{
  min-height: 78px !important;
  margin-bottom: 18px !important;
  padding: 14px 16px !important;
  background:var(--surface)!important;
  border: 1px solid var(--border) !important;
  border-left: 3px solid var(--vv-accent) !important;
  border-radius: var(--vv-radius) !important;
}

.section-head h2{
  margin: 0 0 5px !important;
  font-size: 1.34rem !important;
}

.section-head p{
  margin: 0 !important;
  color: var(--vv-muted) !important;
  font-size:14px!important;
}

.card{
  background:var(--surface)!important;
  border-color: var(--border) !important;
  box-shadow:var(--shadow)!important;
}.vv-suite-panel{
  background:var(--surface)!important;
  border-color: var(--border) !important;
  box-shadow:var(--shadow)!important;
}.admin-workhub-control{
  background:var(--surface)!important;
  border-color: var(--border) !important;
  box-shadow:var(--shadow)!important;
}.staff-work-panel{
  background:var(--surface)!important;
  border-color: var(--border) !important;
  box-shadow:var(--shadow)!important;
}.staff-suite-panel{
  background:var(--surface)!important;
  border-color: var(--border) !important;
  box-shadow:var(--shadow)!important;
}.workforce-intelligence-panel{
  background:var(--surface)!important;
  border-color: var(--border) !important;
  box-shadow:var(--shadow)!important;
}.roster-generator-card{
  background:var(--surface)!important;
  border-color: var(--border) !important;
  box-shadow:var(--shadow)!important;
}.supplier-intelligence-card{
  background:var(--surface)!important;
  border-color: var(--border) !important;
  box-shadow:var(--shadow)!important;
}.stock-table-card{
  background:var(--surface-muted)!important;
  border-color: var(--border) !important;
  box-shadow:var(--shadow)!important;
}.table-wrap{
  background:var(--surface-muted)!important;
  border-color: var(--border) !important;
  box-shadow:var(--shadow)!important;
}.dialog-panel{
  background:var(--surface)!important;
  border-color: var(--border) !important;
  box-shadow:var(--shadow)!important;
}.modal{
  background:var(--surface)!important;
  border-color: var(--border) !important;
  box-shadow:var(--shadow)!important;
}.modal-content{
  background:var(--surface)!important;
  border-color: var(--border) !important;
  box-shadow:var(--shadow)!important;
}.login-card{
  background:var(--surface)!important;
  border-color: var(--border) !important;
  box-shadow:var(--shadow)!important;
}.public-card{
  background:var(--surface)!important;
  border-color: var(--border) !important;
  box-shadow:var(--shadow)!important;
}.settings-qr-frame{
  background:var(--surface)!important;
  border-color: var(--border) !important;
  box-shadow:var(--shadow)!important;
}.qr-tool-card{
  background:var(--surface)!important;
  border-color: var(--border) !important;
  box-shadow:var(--shadow)!important;
}.announcement-panel{
  background:var(--surface)!important;
  border-color: var(--border) !important;
  box-shadow:var(--shadow)!important;
}

.metric-grid{
  gap: 14px !important;
  margin-bottom: 22px !important;
}

.metric-grid > .card{
  position: relative !important;
  min-height: 126px !important;
  padding: 20px !important;
  overflow: hidden !important;
}

.metric-grid > .card::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 auto 0 0 !important;
  width: 3px !important;
  background: var(--vv-accent) !important;
}

.metric-grid > .card:nth-child(2)::before{
  background: var(--vv-warning) !important;
}

.metric-grid > .card:nth-child(3)::before{
  background: var(--vv-success) !important;
}

.metric-grid > .card h3{
  color: var(--vv-muted) !important;
  font-size:14px!important;
  text-transform: uppercase !important;
}

.metric-grid > .card p{
  margin-top: 17px !important;
}

.metric-grid > .card strong{
  color: var(--vv-text) !important;
  font-size: 1.62rem !important;
}

.primary-btn{
  color:var(--on-primary)!important;
  background:var(--primary)!important;
  border-color: transparent !important;
  box-shadow:var(--shadow)!important;
}.small-btn{
  color: var(--text-secondary) !important;
  background:var(--surface)!important;
  border-color: transparent !important;
  box-shadow:var(--shadow)!important;
}.topbar-quick-action{
  color: var(--text-primary) !important;
  background:var(--surface)!important;
  border-color: transparent !important;
  box-shadow:var(--shadow)!important;
}.login-btn{
  color:var(--on-primary)!important;
  background:var(--primary)!important;
  border-color: transparent !important;
  box-shadow:var(--shadow)!important;
}button.primary-btn{
  color:var(--on-primary)!important;
  background:var(--primary)!important;
  border-color: transparent !important;
  box-shadow:var(--shadow)!important;
}

.secondary-btn{
  color: var(--vv-text) !important;
  background:var(--surface-muted)!important;
  border-color: var(--border) !important;
}.icon-btn{
  color: var(--vv-text) !important;
  background:var(--surface)!important;
  border-color: var(--border) !important;
}.quick-pill{
  color: var(--vv-text) !important;
  background:var(--surface)!important;
  border-color: var(--border) !important;
}.profile-chip{
  color: var(--vv-text) !important;
  background:var(--surface-muted)!important;
  border-color: var(--border) !important;
}.notification-bell{
  color: var(--vv-text) !important;
  background:var(--surface)!important;
  border-color: var(--border) !important;
}.staff-task-alert{
  color: var(--vv-text) !important;
  background:var(--surface)!important;
  border-color: var(--border) !important;
}

.danger-btn{
  color: var(--danger) !important;
  background:var(--danger-bg)!important;
  border-color: var(--border) !important;
}

.primary-btn{
  min-height: 40px !important;
  padding: 8px 13px !important;
  border-radius: 7px !important;
  font-size:14px!important;
  font-weight: 760 !important;
}.secondary-btn{
  min-height: 40px !important;
  padding: 8px 13px !important;
  border-radius: 7px !important;
  font-size:14px!important;
  font-weight: 760 !important;
}.small-btn{
  min-height: 40px !important;
  padding: 8px 13px !important;
  border-radius: 7px !important;
  font-size:14px!important;
  font-weight: 760 !important;
}.danger-btn{
  min-height: 40px !important;
  padding: 8px 13px !important;
  border-radius: 7px !important;
  font-size:14px!important;
  font-weight: 760 !important;
}.topbar-quick-action{
  min-height: 40px !important;
  padding: 8px 13px !important;
  border-radius: 7px !important;
  font-size:14px!important;
  font-weight: 760 !important;
}

.table-wrap{
  padding: 18px !important;
  overflow-x: auto !important;
}

.table-wrap > h3{
  margin: 2px 0 18px !important;
  font-size: 1.1rem !important;
}

table{
  min-width: 920px !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

thead th{
  position: sticky !important;
  top: 0 !important;
  z-index: 2 !important;
  height: 46px !important;
  padding: 11px 10px !important;
  color: var(--text-primary) !important;
  background:var(--surface-muted)!important;
  border-bottom-color: var(--border) !important;
  font-size:14px!important;
}

tbody td{
  min-height: 58px !important;
  padding: 12px 10px !important;
  color: var(--text-primary) !important;
  border-bottom-color: var(--border) !important;
  font-size:14px!important;
  line-height: 1.4 !important;
}

tbody tr:nth-child(even) td{
  background:var(--page)!important;
}

tbody tr:hover td{
  background:var(--page)!important;
}

#invoiceTableBody td:last-child{
  min-width: 390px !important;
}

#invoiceTableBody td:last-child .small-btn{
  min-height: 34px !important;
  margin: 3px 2px !important;
  padding: 6px 9px !important;
  font-size:14px!important;
  box-shadow:var(--shadow)!important;
}#invoiceTableBody td:last-child .secondary-btn{
  min-height: 34px !important;
  margin: 3px 2px !important;
  padding: 6px 9px !important;
  font-size:14px!important;
  box-shadow:var(--shadow)!important;
}#invoiceTableBody td:last-child .danger-btn{
  min-height: 34px !important;
  margin: 3px 2px !important;
  padding: 6px 9px !important;
  font-size:14px!important;
  box-shadow:var(--shadow)!important;
}

#invoiceTableBody td:last-child .secondary-btn{
  color: var(--text-primary) !important;
  background:var(--page)!important;
}

input{
  min-height: 42px !important;
  color: var(--vv-text) !important;
  background:var(--surface)!important;
  border-color: var(--control-border) !important;
}select{
  min-height: 42px !important;
  color: var(--vv-text) !important;
  background:var(--surface)!important;
  border-color: var(--control-border) !important;
}textarea{
  min-height: 42px !important;
  color: var(--vv-text) !important;
  background:var(--surface)!important;
  border-color: var(--control-border) !important;
}

input:focus{
  border-color: var(--focus) !important;
  box-shadow:var(--shadow)!important;
}select:focus{
  border-color: var(--focus) !important;
  box-shadow:var(--shadow)!important;
}textarea:focus{
  border-color: var(--focus) !important;
  box-shadow:var(--shadow)!important;
}

.dialog-backdrop{
  background:var(--scrim)!important;
  backdrop-filter: blur(5px) !important;
  -webkit-backdrop-filter: blur(5px) !important;
}.modal-backdrop{
  background:var(--scrim)!important;
  backdrop-filter: blur(5px) !important;
  -webkit-backdrop-filter: blur(5px) !important;
}

.dialog-panel.wide-dialog{
  width: min(1180px, calc(100vw - 42px)) !important;
  max-width: 1180px !important;
  max-height: min(860px, calc(100dvh - 42px)) !important;
  padding: 0 !important;
  overflow: auto !important;
}.dialog-panel.manual-invoice-dialog{
  width: min(1180px, calc(100vw - 42px)) !important;
  max-width: 1180px !important;
  max-height: min(860px, calc(100dvh - 42px)) !important;
  padding: 0 !important;
  overflow: auto !important;
}.dialog-panel.wide-dialog.manual-invoice-dialog{
  width: min(1180px, calc(100vw - 42px)) !important;
  max-width: 1180px !important;
  max-height: min(860px, calc(100dvh - 42px)) !important;
  padding: 0 !important;
  overflow: auto !important;
}

.manual-invoice-dialog > h3{
  margin: 0 !important;
  padding: 18px 20px !important;
  background:var(--surface)!important;
  border-bottom: 1px solid var(--border) !important;
}

.manual-invoice-dialog .stock-dialog-grid{
  grid-template-columns: minmax(300px, 0.38fr) minmax(0, 1fr) !important;
  gap: 16px !important;
  padding: 18px 20px !important;
}

.manual-invoice-dialog .dialog-card{
  padding: 16px !important;
  background:var(--surface)!important;
  border-color: var(--border) !important;
}

.manual-invoice-dialog .invoice-item-row{
  grid-template-columns: minmax(240px, 1fr) 92px 132px 94px !important;
  gap: 10px !important;
}

.manual-invoice-dialog .dialog-actions{
  position: sticky !important;
  bottom: 0 !important;
  z-index: 3 !important;
  margin: 0 !important;
  padding: 12px 20px !important;
  background:var(--surface)!important;
  border-top: 1px solid var(--border) !important;
}

.gst-control-panel{
  background:var(--surface)!important;
  border-color: var(--border) !important;
}

.gst-toggle-track{
  border-color: var(--border) !important;
}

.gst-toggle input:checked + .gst-toggle-track::after{
  background: var(--vv-accent) !important;
}

.manual-invoice-summary div{
  background:var(--surface)!important;
  border-color: var(--border) !important;
}

.manual-invoice-summary .manual-invoice-total{
  background:var(--surface)!important;
  border-color: var(--border) !important;
}

.login-page .login-card{
  background:var(--surface)!important;
  border-color: var(--border) !important;
}

@media (min-width: 1800px) {
  .page-section{
    width: min(100%, 1980px) !important;
    max-width: 1980px !important;
  }

  .metric-grid > .card{
    min-height: 136px !important;
  }
}

/* Titanium authority: deliberately last so historical overrides cannot leak. */
:root{
















  --vv-sidebar-width: 264px;
}

body.staff-portal{
  background:var(--page)!important;
}body.customer-portal{
  background:var(--page)!important;
}

.global-qr-button{
  display: none !important;
}.global-qr-backdrop{
  display: none !important;
}

.staff-portal .sidebar{
  background:var(--nav-bg)!important;
  border-right-color: var(--border) !important;
color:var(--nav-text);}.customer-portal .sidebar{
  background:var(--nav-bg)!important;
  border-right-color: var(--border) !important;
color:var(--nav-text);}

.sidebar .brand{
  background:var(--nav-bg)!important;
  border-color: var(--border) !important;
color:var(--nav-text);}.sidebar.vv-sidebar .shell-brand{
  background:var(--nav-bg)!important;
  border-color: var(--border) !important;
color:var(--nav-text);}.staff-portal .sidebar .brand{
  background:var(--nav-bg)!important;
  border-color: var(--border) !important;
color:var(--nav-text);}.customer-portal .sidebar .brand{
  background:var(--nav-bg)!important;
  border-color: var(--border) !important;
color:var(--nav-text);}.staff-sidebar-profile{
  background:var(--nav-bg)!important;
  border-color: var(--border) !important;
color:var(--nav-text);}

.sidebar .nav-btn{
  color:var(--nav-text)!important;
  background:var(--nav-bg)!important;
  border-color: var(--border) !important;
}.sidebar .nav-sub-btn{
  color:var(--nav-text)!important;
  background:var(--nav-bg)!important;
  border-color: var(--border) !important;
}.sidebar .nav-group-toggle{
  color:var(--nav-text)!important;
  background:var(--nav-bg)!important;
  border-color: var(--border) !important;
}.staff-portal .sidebar .nav-btn{
  color:var(--nav-text)!important;
  background:var(--nav-bg)!important;
  border-color: var(--border) !important;
}.staff-portal .sidebar .nav-sub-btn{
  color:var(--nav-text)!important;
  background:var(--nav-bg)!important;
  border-color: var(--border) !important;
}

.sidebar .nav-btn:hover{
  color:var(--nav-text)!important;
  background:var(--nav-bg)!important;
  border-color: var(--border) !important;
}.sidebar .nav-sub-btn:hover{
  color:var(--nav-text)!important;
  background:var(--nav-bg)!important;
  border-color: var(--border) !important;
}.sidebar .nav-group-toggle:hover{
  color:var(--nav-text)!important;
  background:var(--nav-bg)!important;
  border-color: var(--border) !important;
}

.sidebar .nav-btn.active{
  color:var(--on-primary)!important;
  background:var(--primary)!important;
  box-shadow:var(--shadow)!important;
}.sidebar .nav-sub-btn.active{
  color:var(--on-primary)!important;
  background:var(--primary)!important;
  box-shadow:var(--shadow)!important;
}.staff-portal .sidebar .nav-btn.active{
  color:var(--on-primary)!important;
  background:var(--primary)!important;
  box-shadow:var(--shadow)!important;
}.staff-portal .sidebar .nav-sub-btn.active{
  color:var(--on-primary)!important;
  background:var(--primary)!important;
  box-shadow:var(--shadow)!important;
}

.sidebar .nav-group{
  background:var(--nav-bg)!important;
  border-color: var(--border) !important;
color:var(--nav-text);}

.sidebar-footer{
  background:var(--nav-bg)!important;
color:var(--nav-text);}

.staff-portal .topbar{
  background:var(--surface)!important;
  border-color: var(--border) !important;
}

.topbar::after{
  background: linear-gradient(90deg, transparent, var(--vv-accent), var(--vv-warning), transparent) !important;
}.vv-topbar::after{
  background: linear-gradient(90deg, transparent, var(--vv-accent), var(--vv-warning), transparent) !important;
}

.section-head{
  background:var(--surface)!important;
  border-color: var(--border) !important;
  border-left-color: var(--vv-accent) !important;
}

.home-command-hero{
  background:var(--hero-bg)!important;
  border-color: var(--border) !important;
  border-left-color: var(--vv-accent) !important;
color:var(--nav-text);}

.card{
  background:var(--surface)!important;
  border-color: var(--border) !important;
}.vv-suite-panel{
  background:var(--surface)!important;
  border-color: var(--border) !important;
}.admin-workhub-control{
  background:var(--surface)!important;
  border-color: var(--border) !important;
}.staff-work-panel{
  background:var(--surface)!important;
  border-color: var(--border) !important;
}.staff-suite-panel{
  background:var(--surface)!important;
  border-color: var(--border) !important;
}.workforce-intelligence-panel{
  background:var(--surface)!important;
  border-color: var(--border) !important;
}.roster-generator-card{
  background:var(--surface)!important;
  border-color: var(--border) !important;
}.supplier-intelligence-card{
  background:var(--surface)!important;
  border-color: var(--border) !important;
}.stock-table-card{
  background:var(--surface-muted)!important;
  border-color: var(--border) !important;
}.table-wrap{
  background:var(--surface-muted)!important;
  border-color: var(--border) !important;
}.dialog-panel{
  background:var(--surface)!important;
  border-color: var(--border) !important;
}.modal{
  background:var(--surface)!important;
  border-color: var(--border) !important;
}.modal-content{
  background:var(--surface)!important;
  border-color: var(--border) !important;
}.login-card{
  background:var(--surface)!important;
  border-color: var(--border) !important;
}.public-card{
  background:var(--surface)!important;
  border-color: var(--border) !important;
}.settings-qr-frame{
  background:var(--surface)!important;
  border-color: var(--border) !important;
}.qr-tool-card{
  background:var(--surface)!important;
  border-color: var(--border) !important;
}.announcement-panel{
  background:var(--surface)!important;
  border-color: var(--border) !important;
}

.vv-suite-card{
  background:var(--surface)!important;
  border-color: var(--border) !important;
}.command-insight-card{
  background:var(--surface)!important;
  border-color: var(--border) !important;
}.system-action{
  background:var(--surface)!important;
  border-color: var(--border) !important;
}.staff-action-card{
  background:var(--surface)!important;
  border-color: var(--border) !important;
}.roster-signal-card{
  background:var(--surface)!important;
  border-color: var(--border) !important;
}.roster-week-card{
  background:var(--surface)!important;
  border-color: var(--border) !important;
}

.primary-btn{
  color:var(--on-primary)!important;
  background:var(--primary)!important;
  border-color: transparent !important;
}.small-btn{
  color: var(--text-secondary) !important;
  background:var(--surface)!important;
  border-color: transparent !important;
}.topbar-quick-action{
  color: var(--text-primary) !important;
  background:var(--surface)!important;
  border-color: transparent !important;
}.login-btn{
  color:var(--on-primary)!important;
  background:var(--primary)!important;
  border-color: transparent !important;
}button.primary-btn{
  color:var(--on-primary)!important;
  background:var(--primary)!important;
  border-color: transparent !important;
}

.secondary-btn{
  color: var(--vv-text) !important;
  background:var(--surface-muted)!important;
  border-color: var(--border) !important;
}.icon-btn{
  color: var(--vv-text) !important;
  background:var(--surface)!important;
  border-color: var(--border) !important;
}.quick-pill{
  color: var(--vv-text) !important;
  background:var(--surface)!important;
  border-color: var(--border) !important;
}.profile-chip{
  color: var(--vv-text) !important;
  background:var(--surface-muted)!important;
  border-color: var(--border) !important;
}.notification-bell{
  color: var(--vv-text) !important;
  background:var(--surface)!important;
  border-color: var(--border) !important;
}.staff-task-alert{
  color: var(--vv-text) !important;
  background:var(--surface)!important;
  border-color: var(--border) !important;
}

input{
  color: var(--vv-text) !important;
  background:var(--surface)!important;
  border-color: var(--control-border) !important;
}select{
  color: var(--vv-text) !important;
  background:var(--surface)!important;
  border-color: var(--control-border) !important;
}textarea{
  color: var(--vv-text) !important;
  background:var(--surface)!important;
  border-color: var(--control-border) !important;
}

.login-page{
  background:var(--surface)!important;
}.vv-entry-sequence{
  background:var(--surface)!important;
}

.login-page .login-card{
  background:var(--surface)!important;
  border-color: var(--border) !important;
}

@media (max-width: 1023px) {
  .staff-portal .sidebar{
    background:var(--nav-bg)!important;
    border-right-color: var(--border) !important;
  color:var(--nav-text);}.customer-portal .sidebar{
    background:var(--nav-bg)!important;
    border-right-color: var(--border) !important;
  color:var(--nav-text);}

  .staff-portal .topbar{
    background:var(--surface)!important;
  }

  .mobile-bottom-nav{
    background:var(--surface)!important;
    border-color: var(--border) !important;
  }.admin-mobile-bottom-nav{
    background:var(--surface)!important;
    border-color: var(--border) !important;
  }.staff-mobile-bottom-nav{
    background:var(--surface)!important;
    border-color: var(--border) !important;
  }
}

@media (max-width: 1100px) and (min-width: 768px) {
  .manual-invoice-dialog .stock-dialog-grid{
    grid-template-columns: 280px minmax(0, 1fr) !important;
  }

  .manual-invoice-dialog .invoice-item-row{
    grid-template-columns: minmax(190px, 1fr) 76px 108px !important;
  }

  .manual-invoice-dialog .invoice-remove-btn{
    grid-column: 1 / -1 !important;
    width: auto !important;
    justify-self: end !important;
  }
}

@media (max-width: 1023px) {
  :root{
    --vv-sidebar-width: 300px;
  }

  .staff-portal .sidebar{
    background:var(--nav-bg)!important;
    border-right-color: var(--border) !important;
  color:var(--nav-text);}.customer-portal .sidebar{
    background:var(--nav-bg)!important;
    border-right-color: var(--border) !important;
  color:var(--nav-text);}

  .staff-portal .topbar{
    background:var(--surface)!important;
  }

  .app-shell > .main{
    padding: 10px 12px 92px !important;
  }.staff-portal .app-shell > .main{
    padding: 10px 12px 92px !important;
  }.customer-portal .app-shell > .main{
    padding: 10px 12px 92px !important;
  }

  .page-section{
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 767px) {


  .section-head{
    align-items: stretch !important;
    min-height: 0 !important;
    padding: 14px !important;
  }

  .section-head > div:last-child{
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
  }

  .section-head button{
    width: 100% !important;
  }

  .metric-grid{
    grid-template-columns: 1fr !important;
  }

  .metric-grid > .card{
    min-height: 108px !important;
  }

  .table-wrap{
    padding: 12px !important;
  }

  .dialog-panel.wide-dialog{
    width: 100% !important;
    max-width: none !important;
    max-height: calc(100dvh - env(safe-area-inset-top)) !important;
    border-radius: 12px 12px 0 0 !important;
  }.dialog-panel.manual-invoice-dialog{
    width: 100% !important;
    max-width: none !important;
    max-height: calc(100dvh - env(safe-area-inset-top)) !important;
    border-radius: 12px 12px 0 0 !important;
  }.dialog-panel.wide-dialog.manual-invoice-dialog{
    width: 100% !important;
    max-width: none !important;
    max-height: calc(100dvh - env(safe-area-inset-top)) !important;
    border-radius: 12px 12px 0 0 !important;
  }

  .manual-invoice-dialog .stock-dialog-grid{
    grid-template-columns: 1fr !important;
  }.manual-invoice-dialog .invoice-item-row{
    grid-template-columns: 1fr !important;
  }

  .manual-invoice-dialog .invoice-remove-btn{
    width: 100% !important;
  }

  .manual-invoice-summary{
    grid-template-columns: 1fr !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *{
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }*::before{
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }*::after{
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ========================================================================== */
/* Forge shell: authoritative final overrides                                 */
/* ========================================================================== */

html.vv-scroll-locked{
  overflow: hidden !important;
  overscroll-behavior: none !important;
}body.vv-scroll-locked{
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

body.staff-portal{
  background:var(--page)!important;
}body.customer-portal{
  background:var(--page)!important;
}

body::after{
  opacity: 0.015 !important;
  background-size: min(32vw, 460px) !important;
  filter: grayscale(1) contrast(0.8) !important;
}

.staff-portal .sidebar{
  background:var(--nav-bg)!important;
  border-right: 1px solid var(--border) !important;
  box-shadow:var(--shadow)!important;
color:var(--nav-text);}.customer-portal .sidebar{
  background:var(--nav-bg)!important;
  border-right: 1px solid var(--border) !important;
  box-shadow:var(--shadow)!important;
color:var(--nav-text);}

.sidebar .brand{
  background:var(--nav-bg)!important;
  border-color: var(--border) !important;
color:var(--nav-text);}.sidebar.vv-sidebar .shell-brand{
  background:var(--nav-bg)!important;
  border-color: var(--border) !important;
color:var(--nav-text);}.staff-portal .sidebar .brand{
  background:var(--nav-bg)!important;
  border-color: var(--border) !important;
color:var(--nav-text);}.customer-portal .sidebar .brand{
  background:var(--nav-bg)!important;
  border-color: var(--border) !important;
color:var(--nav-text);}.staff-sidebar-profile{
  background:var(--nav-bg)!important;
  border-color: var(--border) !important;
color:var(--nav-text);}

.sidebar .brand .logo-img{
  background:var(--nav-bg)!important;
  border: 1px solid var(--border) !important;
color:var(--nav-text);}.sidebar.vv-sidebar .shell-brand .logo-img{
  background:var(--nav-bg)!important;
  border: 1px solid var(--border) !important;
color:var(--nav-text);}.staff-portal .sidebar .brand .logo-img{
  background:var(--nav-bg)!important;
  border: 1px solid var(--border) !important;
color:var(--nav-text);}.customer-portal .sidebar .brand .logo-img{
  background:var(--nav-bg)!important;
  border: 1px solid var(--border) !important;
color:var(--nav-text);}

.sidebar-nav::-webkit-scrollbar-thumb{
  background:var(--nav-bg)!important;
color:var(--nav-text);}

.nav-section-label{
  color: var(--text-secondary) !important;
}

.sidebar .nav-btn{
  color: var(--nav-text) !important;
}.sidebar .nav-sub-btn{
  color: var(--nav-text) !important;
}.sidebar .nav-group-toggle{
  color: var(--nav-text) !important;
}.staff-portal .sidebar .nav-btn{
  color: var(--nav-text) !important;
}.staff-portal .sidebar .nav-sub-btn{
  color: var(--nav-text) !important;
}

.sidebar .nav-btn:hover{
  background:var(--nav-bg)!important;
  border-color: var(--border) !important;
color:var(--nav-text);}.sidebar .nav-sub-btn:hover{
  background:var(--nav-bg)!important;
  border-color: var(--border) !important;
color:var(--nav-text);}.sidebar .nav-group-toggle:hover{
  background:var(--nav-bg)!important;
  border-color: var(--border) !important;
color:var(--nav-text);}

.sidebar .nav-btn.active{
  color:var(--on-primary)!important;
  background:var(--primary)!important;
  border-color: transparent !important;
  box-shadow:var(--shadow)!important;
}.sidebar .nav-sub-btn.active{
  color:var(--on-primary)!important;
  background:var(--primary)!important;
  border-color: transparent !important;
  box-shadow:var(--shadow)!important;
}.staff-portal .sidebar .nav-btn.active{
  color:var(--on-primary)!important;
  background:var(--primary)!important;
  border-color: transparent !important;
  box-shadow:var(--shadow)!important;
}.staff-portal .sidebar .nav-sub-btn.active{
  color:var(--on-primary)!important;
  background:var(--primary)!important;
  border-color: transparent !important;
  box-shadow:var(--shadow)!important;
}

.sidebar .nav-group{
  background:var(--nav-bg)!important;
  border-color: var(--border) !important;
color:var(--nav-text);}

.nav-group-caret{
  color: var(--vv-accent) !important;
}

.sidebar-footer{
  background:var(--nav-bg)!important;
  border-top-color: var(--border) !important;
color:var(--nav-text);}

.sidebar-close{
  position: absolute !important;
  top: calc(12px + env(safe-area-inset-top)) !important;
  right: 12px !important;
  z-index: 4 !important;
  display: none !important;
  place-items: center !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  color:var(--nav-text)!important;
  background:var(--nav-bg)!important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  font-size: 1.65rem !important;
  font-weight: 400 !important;
  line-height: 1 !important;
}

.app-shell > .main{
  padding: 18px clamp(22px, 2.3vw, 46px) 48px !important;
}.staff-portal .app-shell > .main{
  padding: 18px clamp(22px, 2.3vw, 46px) 48px !important;
}.customer-portal .app-shell > .main{
  padding: 18px clamp(22px, 2.3vw, 46px) 48px !important;
}

.page-section{
  max-width: 1920px !important;
}

.staff-portal .topbar{
  top: 10px !important;
  background:var(--surface)!important;
  border-color: var(--border) !important;
  box-shadow:var(--shadow)!important;
}

.topbar::after{
  content: "" !important;
  position: absolute !important;
  right: 14px !important;
  bottom: -1px !important;
  left: 14px !important;
  height: 1px !important;
  pointer-events: none !important;
  background:var(--surface)!important;
}.vv-topbar::after{
  content: "" !important;
  position: absolute !important;
  right: 14px !important;
  bottom: -1px !important;
  left: 14px !important;
  height: 1px !important;
  pointer-events: none !important;
  background:var(--surface)!important;
}

.topbar-title h2{
  font-size: clamp(1.08rem, 1.25vw, 1.34rem) !important;
}.topbar > div:first-child h2{
  font-size: clamp(1.08rem, 1.25vw, 1.34rem) !important;
}

.topbar-kicker{
  color: var(--vv-accent) !important;
}.panel-kicker{
  color: var(--vv-accent) !important;
}.eyebrow{
  color: var(--vv-accent) !important;
}

.topbar-quick-action{
  color: var(--text-primary) !important;
  background:var(--surface)!important;
  border-color: transparent !important;
  box-shadow:var(--shadow)!important;
}.primary-btn{
  color:var(--on-primary)!important;
  background:var(--primary)!important;
  border-color: transparent !important;
  box-shadow:var(--shadow)!important;
}.login-btn{
  color:var(--on-primary)!important;
  background:var(--primary)!important;
  border-color: transparent !important;
  box-shadow:var(--shadow)!important;
}.roster-generate-btn{
  color: var(--text-primary) !important;
  background:var(--surface)!important;
  border-color: transparent !important;
  box-shadow:var(--shadow)!important;
}button.primary-btn{
  color:var(--on-primary)!important;
  background:var(--primary)!important;
  border-color: transparent !important;
  box-shadow:var(--shadow)!important;
}

.topbar-quick-action:hover{
  color: var(--text-primary) !important;
  background:var(--surface-muted)!important;
}.primary-btn:hover{
  color:var(--on-primary)!important;
  background:var(--primary)!important;
}.login-btn:hover{
  color:var(--on-primary)!important;
  background:var(--primary)!important;
}

.secondary-btn{
  background:var(--surface-muted)!important;
  border-color: var(--border) !important;
}.icon-btn{
  background:var(--surface)!important;
  border-color: var(--border) !important;
}.quick-pill{
  background:var(--surface)!important;
  border-color: var(--border) !important;
}.profile-chip{
  background:var(--surface-muted)!important;
  border-color: var(--border) !important;
}.notification-bell{
  background:var(--surface)!important;
  border-color: var(--border) !important;
}.staff-task-alert{
  background:var(--surface)!important;
  border-color: var(--border) !important;
}

.profile-initial{
  color: var(--text-primary) !important;
  background: var(--vv-accent) !important;
}.staff-avatar{
  color: var(--text-primary) !important;
  background: var(--vv-accent) !important;
}.notification-bell .bell-mark{
  color: var(--text-primary) !important;
  background: var(--vv-accent) !important;
}

.live-pill{
  color: var(--vv-success) !important;
  background:var(--surface)!important;
  border-color: var(--border) !important;
}

.notification-panel{
  background:var(--surface)!important;
  border-color: var(--border) !important;
}.notification-dropdown{
  background:var(--surface)!important;
  border-color: var(--border) !important;
}

.home-command-hero{
  grid-template-columns: minmax(0, 1fr) 132px !important;
  min-height: 176px !important;
  padding: clamp(22px, 2.2vw, 34px) !important;
  background:var(--hero-bg)!important;
  border-color: var(--border) !important;
  border-left-color: var(--vv-accent) !important;
  box-shadow:var(--shadow)!important;
color:var(--nav-text);}

.home-command-copy h1{
  margin: 8px 0 18px !important;
  font-size: clamp(2rem, 2.4vw, 3rem) !important;
}

.home-command-copy > p{
  display: none !important;
}

.home-command-actions{
  margin-top: 0 !important;
}

.home-command-orb{
  width: 118px !important;
  height: 118px !important;
  padding: 14px !important;
  background:var(--hero-bg)!important;
  border-color: var(--border) !important;
color:var(--nav-text);}

.home-command-orb img{
  width: 68px !important;
  height: 68px !important;
}

.home-command-orb span{
  color: var(--vv-accent) !important;
}

.dashboard-action-row{
  gap: 10px !important;
}

.command-pill{
  min-height: 44px !important;
  background:var(--surface)!important;
}

.command-pill span{
  color: var(--text-primary) !important;
  background: var(--vv-accent) !important;
}

.card{
  background:var(--surface)!important;
  border-color: var(--border) !important;
}.vv-suite-panel{
  background:var(--surface)!important;
  border-color: var(--border) !important;
}.admin-workhub-control{
  background:var(--surface)!important;
  border-color: var(--border) !important;
}.staff-work-panel{
  background:var(--surface)!important;
  border-color: var(--border) !important;
}.staff-suite-panel{
  background:var(--surface)!important;
  border-color: var(--border) !important;
}.workforce-intelligence-panel{
  background:var(--surface)!important;
  border-color: var(--border) !important;
}.roster-generator-card{
  background:var(--surface)!important;
  border-color: var(--border) !important;
}.supplier-intelligence-card{
  background:var(--surface)!important;
  border-color: var(--border) !important;
}.stock-table-card{
  background:var(--surface-muted)!important;
  border-color: var(--border) !important;
}.table-wrap{
  background:var(--surface-muted)!important;
  border-color: var(--border) !important;
}.dialog-panel{
  background:var(--surface)!important;
  border-color: var(--border) !important;
}.modal{
  background:var(--surface)!important;
  border-color: var(--border) !important;
}.modal-content{
  background:var(--surface)!important;
  border-color: var(--border) !important;
}.login-card{
  background:var(--surface)!important;
  border-color: var(--border) !important;
}.public-card{
  background:var(--surface)!important;
  border-color: var(--border) !important;
}.settings-qr-frame{
  background:var(--surface)!important;
  border-color: var(--border) !important;
}.qr-tool-card{
  background:var(--surface)!important;
  border-color: var(--border) !important;
}.announcement-panel{
  background:var(--surface)!important;
  border-color: var(--border) !important;
}

.vv-suite-card{
  background:var(--surface)!important;
  border-color: var(--border) !important;
}.command-insight-card{
  background:var(--surface)!important;
  border-color: var(--border) !important;
}.system-action{
  background:var(--surface)!important;
  border-color: var(--border) !important;
}.staff-action-card{
  background:var(--surface)!important;
  border-color: var(--border) !important;
}.roster-signal-card{
  background:var(--surface)!important;
  border-color: var(--border) !important;
}.roster-week-card{
  background:var(--surface)!important;
  border-color: var(--border) !important;
}

.card:hover{
  border-color: var(--border) !important;
  box-shadow:var(--shadow)!important;
}.vv-suite-card:hover{
  border-color: var(--border) !important;
  box-shadow:var(--shadow)!important;
}.command-insight-card:hover{
  border-color: var(--border) !important;
  box-shadow:var(--shadow)!important;
}.system-action:hover{
  border-color: var(--border) !important;
  box-shadow:var(--shadow)!important;
}.staff-action-card:hover{
  border-color: var(--border) !important;
  box-shadow:var(--shadow)!important;
}

.kpi-teal{
  border-top-color: var(--vv-accent) !important;
}.kpi-blue{
  border-top-color: var(--vv-accent) !important;
}.kpi-green{
  border-top-color: var(--vv-accent) !important;
}.kpi-red{
  border-top-color: var(--vv-accent) !important;
}

.kpi-blue{ border-top-color: var(--vv-info) !important; }
.kpi-green{ border-top-color: var(--vv-success) !important; }
.kpi-red{ border-top-color: var(--vv-danger) !important; }

.vv-suite-card > span{
  color: var(--vv-accent) !important;
}.command-insight-card > span{
  color: var(--vv-accent) !important;
}.system-action > span{
  color: var(--vv-accent) !important;
}

input{
  color: var(--vv-text) !important;
  background:var(--surface)!important;
  border-color: var(--control-border) !important;
}select{
  color: var(--vv-text) !important;
  background:var(--surface)!important;
  border-color: var(--control-border) !important;
}textarea{
  color: var(--vv-text) !important;
  background:var(--surface)!important;
  border-color: var(--control-border) !important;
}

input:focus{
  border-color: var(--focus) !important;
  box-shadow:var(--shadow)!important;
}select:focus{
  border-color: var(--focus) !important;
  box-shadow:var(--shadow)!important;
}textarea:focus{
  border-color: var(--focus) !important;
  box-shadow:var(--shadow)!important;
}

.login-page{
  background:var(--surface)!important;
}.vv-entry-sequence{
  background:var(--surface)!important;
}

.login-page .login-card{
  background:var(--surface)!important;
  border-color: var(--border) !important;
}

.login-page .login-logo-box{
  background:var(--surface)!important;
}

.vv-entry-ring-one{ border-top-color: var(--vv-accent) !important; }
.vv-entry-ring-two{ border-right-color: var(--vv-warning) !important; }
.vv-entry-scan{ background: var(--vv-accent) !important; box-shadow:var(--shadow)!important; }

@media (min-width: 1800px) {
  .page-section{
    max-width: none !important;
  }

  .app-shell > .main{
    padding-inline: clamp(42px, 3vw, 72px) !important;
  }.staff-portal .app-shell > .main{
    padding-inline: clamp(42px, 3vw, 72px) !important;
  }.customer-portal .app-shell > .main{
    padding-inline: clamp(42px, 3vw, 72px) !important;
  }

  .home-command-hero{
    grid-template-columns: minmax(0, 1fr) 146px !important;
  }

  .vv-suite-grid{
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }.admin-workhub-grid{
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }.system-action-grid{
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 1023px) {
  :root{
    --vv-sidebar-width: 300px;
  }

  .staff-portal .sidebar{
    top: 0 !important;
    bottom: 0 !important;
    width: min(calc(100vw - 52px), var(--vv-sidebar-width)) !important;
    max-width: var(--vv-sidebar-width) !important;
    height: 100dvh !important;
    padding: calc(12px + env(safe-area-inset-top)) 12px calc(12px + env(safe-area-inset-bottom)) !important;
    overflow: hidden !important;
    transform: translate3d(-110%, 0, 0) !important;
    background:var(--nav-bg)!important;
    border-right-color: var(--border) !important;
    border-radius: 0 14px 14px 0 !important;
    box-shadow:var(--shadow)!important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: none !important;
    transition: transform 220ms cubic-bezier(0.22, 0.78, 0.22, 1) !important;
  color:var(--nav-text);}.customer-portal .sidebar{
    top: 0 !important;
    bottom: 0 !important;
    width: min(calc(100vw - 52px), var(--vv-sidebar-width)) !important;
    max-width: var(--vv-sidebar-width) !important;
    height: 100dvh !important;
    padding: calc(12px + env(safe-area-inset-top)) 12px calc(12px + env(safe-area-inset-bottom)) !important;
    overflow: hidden !important;
    transform: translate3d(-110%, 0, 0) !important;
    background:var(--nav-bg)!important;
    border-right-color: var(--border) !important;
    border-radius: 0 14px 14px 0 !important;
    box-shadow:var(--shadow)!important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: none !important;
    transition: transform 220ms cubic-bezier(0.22, 0.78, 0.22, 1) !important;
  color:var(--nav-text);}

  .sidebar.is-open{
    transform: translate3d(0, 0, 0) !important;
    pointer-events: auto !important;
  }

  .sidebar-close{
    display: grid !important;
  }

  .sidebar .brand{
    min-height: 52px !important;
    margin: 0 48px 10px 0 !important;
    padding: 7px !important;
    background:var(--nav-bg)!important;
  color:var(--nav-text);}.sidebar.vv-sidebar .shell-brand{
    min-height: 52px !important;
    margin: 0 48px 10px 0 !important;
    padding: 7px !important;
    background:var(--nav-bg)!important;
  color:var(--nav-text);}.staff-portal .sidebar .brand{
    min-height: 52px !important;
    margin: 0 48px 10px 0 !important;
    padding: 7px !important;
    background:var(--nav-bg)!important;
  color:var(--nav-text);}.customer-portal .sidebar .brand{
    min-height: 52px !important;
    margin: 0 48px 10px 0 !important;
    padding: 7px !important;
    background:var(--nav-bg)!important;
  color:var(--nav-text);}

  .staff-sidebar-profile{
    min-height: 52px !important;
    margin: 0 0 10px !important;
    padding: 7px !important;
  }

  .sidebar-nav{
    flex: 1 1 auto !important;
    min-height: 0 !important;
    padding: 0 4px 10px 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .sidebar-footer{
    position: relative !important;
    flex: 0 0 auto !important;
    bottom: auto !important;
    padding-top: 9px !important;
  }

  .mobile-sidebar-backdrop{
    display: block !important;
    background:var(--scrim)!important;
  }.mobile-sidebar-backdrop.is-open{
    display: block !important;
    background:var(--scrim)!important;
  }

  .mobile-sidebar-backdrop.is-open{
    opacity: 1 !important;
    pointer-events: auto !important;
  }body.mobile-menu-open .mobile-sidebar-backdrop{
    opacity: 1 !important;
    pointer-events: auto !important;
  }html.mobile-menu-open .mobile-sidebar-backdrop{
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .app-shell > .main{
    width: 100% !important;
    margin-left: 0 !important;
    padding: 10px 12px 88px !important;
  }.staff-portal .app-shell > .main{
    width: 100% !important;
    margin-left: 0 !important;
    padding: 10px 12px 88px !important;
  }.customer-portal .app-shell > .main{
    width: 100% !important;
    margin-left: 0 !important;
    padding: 10px 12px 88px !important;
  }

  .staff-portal .topbar{
    top: 6px !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    gap: 10px !important;
    min-height: 64px !important;
    padding: 8px 10px !important;
  }

  .topbar-menu-btn{
    color: var(--vv-text) !important;
    background:var(--surface)!important;
    border-color: var(--border) !important;
  }.mobile-menu-btn{
    color: var(--vv-text) !important;
    background:var(--surface)!important;
    border-color: var(--border) !important;
  }

  .topbar-menu-btn span{
    background: var(--vv-accent) !important;
  }.mobile-menu-btn span{
    background: var(--vv-accent) !important;
  }

  .staff-portal .mobile-menu-btn{
    top: max(15px, env(safe-area-inset-top)) !important;
    left: 20px !important;
  }

  .staff-portal .topbar{
    padding-left: 58px !important;
  }

  .mobile-bottom-nav{
    background:var(--surface)!important;
    border-color: var(--border) !important;
  }.admin-mobile-bottom-nav{
    background:var(--surface)!important;
    border-color: var(--border) !important;
  }.staff-mobile-bottom-nav{
    background:var(--surface)!important;
    border-color: var(--border) !important;
  }

  .mobile-bottom-nav .mobile-bottom-primary{
    color: var(--on-primary) !important;
    background: var(--vv-accent) !important;
  }.admin-mobile-bottom-nav .mobile-bottom-primary{
    color: var(--on-primary) !important;
    background: var(--vv-accent) !important;
  }.staff-mobile-bottom-nav .mobile-bottom-primary{
    color: var(--on-primary) !important;
    background: var(--vv-accent) !important;
  }
}

@media (max-width: 767px) {
  .home-command-hero{
    grid-template-columns: 1fr !important;
    padding: 20px !important;
  }

  .home-command-copy h1{
    margin-bottom: 16px !important;
    font-size: clamp(1.72rem, 8vw, 2.25rem) !important;
  }

  .home-command-actions{
    grid-template-columns: 1fr !important;
  }

  .dashboard-action-row{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .command-pill{
    min-height: 48px !important;
    font-size:14px!important;
  }

  .topbar-actions{
    gap: 5px !important;
  }.staff-top-actions{
    gap: 5px !important;
  }

  .notification-panel{
    top: 76px !important;
    right: 10px !important;
    left: 10px !important;
  }.notification-dropdown{
    top: 76px !important;
    right: 10px !important;
    left: 10px !important;
  }

  .dialog-panel{
    border-top-color: var(--border) !important;
  }.modal{
    border-top-color: var(--border) !important;
  }.modal-content{
    border-top-color: var(--border) !important;
  }
}

@media (max-width: 420px) {
  .staff-portal .sidebar{
    width: min(calc(100vw - 44px), 286px) !important;
  }.customer-portal .sidebar{
    width: min(calc(100vw - 44px), 286px) !important;
  }

  .sidebar .nav-btn{
    min-height: 40px !important;
    font-size:14px!important;
  }.sidebar .nav-sub-btn{
    min-height: 40px !important;
    font-size:14px!important;
  }.sidebar .nav-group-toggle{
    min-height: 40px !important;
    font-size:14px!important;
  }.staff-portal .sidebar .nav-btn{
    min-height: 40px !important;
    font-size:14px!important;
  }.staff-portal .sidebar .nav-sub-btn{
    min-height: 40px !important;
    font-size:14px!important;
  }
}

/* ========================================================================== */
/* Titanium authority: this block intentionally remains last in the cascade.  */
/* ========================================================================== */

:root{
















  --vv-sidebar-width: 264px;
}



body.staff-portal{
  color: var(--vv-text) !important;
  background:var(--page)!important;
}body.customer-portal{
  color: var(--vv-text) !important;
  background:var(--page)!important;
}

body::after{
  opacity: 0.01 !important;
}

.global-qr-button{
  display: none !important;
}.global-qr-backdrop{
  display: none !important;
}.global-qr-floating{
  display: none !important;
}

.staff-portal .sidebar{
  width: var(--vv-sidebar-width) !important;
  background:var(--nav-bg)!important;
  border-right: 1px solid var(--border) !important;
  box-shadow:var(--shadow)!important;
color:var(--nav-text);}.customer-portal .sidebar{
  width: var(--vv-sidebar-width) !important;
  background:var(--nav-bg)!important;
  border-right: 1px solid var(--border) !important;
  box-shadow:var(--shadow)!important;
color:var(--nav-text);}

.sidebar .brand{
  background:var(--nav-bg)!important;
  border-color: var(--border) !important;
  box-shadow:var(--shadow)!important;
color:var(--nav-text);}.sidebar.vv-sidebar .shell-brand{
  background:var(--nav-bg)!important;
  border-color: var(--border) !important;
  box-shadow:var(--shadow)!important;
color:var(--nav-text);}.staff-portal .sidebar .brand{
  background:var(--nav-bg)!important;
  border-color: var(--border) !important;
  box-shadow:var(--shadow)!important;
color:var(--nav-text);}.customer-portal .sidebar .brand{
  background:var(--nav-bg)!important;
  border-color: var(--border) !important;
  box-shadow:var(--shadow)!important;
color:var(--nav-text);}.staff-sidebar-profile{
  background:var(--nav-bg)!important;
  border-color: var(--border) !important;
  box-shadow:var(--shadow)!important;
color:var(--nav-text);}

.sidebar .brand .logo-img{
  background:var(--nav-bg)!important;
  border-color: var(--border) !important;
color:var(--nav-text);}.sidebar.vv-sidebar .shell-brand .logo-img{
  background:var(--nav-bg)!important;
  border-color: var(--border) !important;
color:var(--nav-text);}.staff-portal .sidebar .brand .logo-img{
  background:var(--nav-bg)!important;
  border-color: var(--border) !important;
color:var(--nav-text);}.customer-portal .sidebar .brand .logo-img{
  background:var(--nav-bg)!important;
  border-color: var(--border) !important;
color:var(--nav-text);}

.nav-section-label{
  color: var(--text-secondary) !important;
}

.sidebar .nav-btn{
  min-height: 42px !important;
  color:var(--nav-text)!important;
  background:var(--nav-bg)!important;
  border-color: var(--border) !important;
}.sidebar .nav-sub-btn{
  min-height: 42px !important;
  color:var(--nav-text)!important;
  background:var(--nav-bg)!important;
  border-color: var(--border) !important;
}.sidebar .nav-group-toggle{
  min-height: 42px !important;
  color:var(--nav-text)!important;
  background:var(--nav-bg)!important;
  border-color: var(--border) !important;
}.staff-portal .sidebar .nav-btn{
  min-height: 42px !important;
  color:var(--nav-text)!important;
  background:var(--nav-bg)!important;
  border-color: var(--border) !important;
}.staff-portal .sidebar .nav-sub-btn{
  min-height: 42px !important;
  color:var(--nav-text)!important;
  background:var(--nav-bg)!important;
  border-color: var(--border) !important;
}

.sidebar .nav-btn:hover{
  color:var(--nav-text)!important;
  background:var(--nav-bg)!important;
  border-color: var(--border) !important;
}.sidebar .nav-sub-btn:hover{
  color:var(--nav-text)!important;
  background:var(--nav-bg)!important;
  border-color: var(--border) !important;
}.sidebar .nav-group-toggle:hover{
  color:var(--nav-text)!important;
  background:var(--nav-bg)!important;
  border-color: var(--border) !important;
}

.sidebar .nav-btn.active{
  color:var(--on-primary)!important;
  background:var(--primary)!important;
  border-color: transparent !important;
  box-shadow:var(--shadow)!important;
}.sidebar .nav-sub-btn.active{
  color:var(--on-primary)!important;
  background:var(--primary)!important;
  border-color: transparent !important;
  box-shadow:var(--shadow)!important;
}.staff-portal .sidebar .nav-btn.active{
  color:var(--on-primary)!important;
  background:var(--primary)!important;
  border-color: transparent !important;
  box-shadow:var(--shadow)!important;
}.staff-portal .sidebar .nav-sub-btn.active{
  color:var(--on-primary)!important;
  background:var(--primary)!important;
  border-color: transparent !important;
  box-shadow:var(--shadow)!important;
}

.sidebar .nav-group{
  background:var(--nav-bg)!important;
  border-color: var(--border) !important;
color:var(--nav-text);}

.sidebar-footer{
  background:var(--nav-bg)!important;
  border-top-color: var(--border) !important;
color:var(--nav-text);}

.app-shell > .main{
  padding: 18px clamp(22px, 2.4vw, 48px) 56px !important;
}.staff-portal .app-shell > .main{
  padding: 18px clamp(22px, 2.4vw, 48px) 56px !important;
}.customer-portal .app-shell > .main{
  padding: 18px clamp(22px, 2.4vw, 48px) 56px !important;
}

.page-section{
  width: 100% !important;
  max-width: 1760px !important;
  margin-right: auto !important;
  margin-left: auto !important;
}

.staff-portal .topbar{
  min-height: 72px !important;
  background:var(--surface)!important;
  border-color: var(--border) !important;
  box-shadow:var(--shadow)!important;
}

.topbar::after{
  background: linear-gradient(90deg, transparent, var(--vv-accent), var(--vv-warning), transparent) !important;
}.vv-topbar::after{
  background: linear-gradient(90deg, transparent, var(--vv-accent), var(--vv-warning), transparent) !important;
}

.section-head{
  padding: 18px 20px !important;
  background:var(--surface)!important;
  border: 1px solid var(--border) !important;
  border-left: 3px solid var(--vv-accent) !important;
}

.home-command-hero{
  background:var(--hero-bg)!important;
  border-color: var(--border) !important;
  border-left-color: var(--vv-accent) !important;
  box-shadow:var(--shadow)!important;
color:var(--nav-text);}

.card{
  background:var(--surface)!important;
  border-color: var(--border) !important;
  border-radius: 7px !important;
  box-shadow:var(--shadow)!important;
}.vv-suite-panel{
  background:var(--surface)!important;
  border-color: var(--border) !important;
  border-radius: 7px !important;
  box-shadow:var(--shadow)!important;
}.admin-workhub-control{
  background:var(--surface)!important;
  border-color: var(--border) !important;
  border-radius: 7px !important;
  box-shadow:var(--shadow)!important;
}.staff-work-panel{
  background:var(--surface)!important;
  border-color: var(--border) !important;
  border-radius: 7px !important;
  box-shadow:var(--shadow)!important;
}.staff-suite-panel{
  background:var(--surface)!important;
  border-color: var(--border) !important;
  border-radius: 7px !important;
  box-shadow:var(--shadow)!important;
}.workforce-intelligence-panel{
  background:var(--surface)!important;
  border-color: var(--border) !important;
  border-radius: 7px !important;
  box-shadow:var(--shadow)!important;
}.roster-generator-card{
  background:var(--surface)!important;
  border-color: var(--border) !important;
  border-radius: 7px !important;
  box-shadow:var(--shadow)!important;
}.supplier-intelligence-card{
  background:var(--surface)!important;
  border-color: var(--border) !important;
  border-radius: 7px !important;
  box-shadow:var(--shadow)!important;
}.stock-table-card{
  background:var(--surface-muted)!important;
  border-color: var(--border) !important;
  border-radius: 7px !important;
  box-shadow:var(--shadow)!important;
}.table-wrap{
  background:var(--surface-muted)!important;
  border-color: var(--border) !important;
  border-radius: 7px !important;
  box-shadow:var(--shadow)!important;
}.dialog-panel{
  background:var(--surface)!important;
  border-color: var(--border) !important;
  border-radius: 7px !important;
  box-shadow:var(--shadow)!important;
}.modal{
  background:var(--surface)!important;
  border-color: var(--border) !important;
  border-radius: 7px !important;
  box-shadow:var(--shadow)!important;
}.modal-content{
  background:var(--surface)!important;
  border-color: var(--border) !important;
  border-radius: 7px !important;
  box-shadow:var(--shadow)!important;
}.login-card{
  background:var(--surface)!important;
  border-color: var(--border) !important;
  border-radius: 7px !important;
  box-shadow:var(--shadow)!important;
}.public-card{
  background:var(--surface)!important;
  border-color: var(--border) !important;
  border-radius: 7px !important;
  box-shadow:var(--shadow)!important;
}.settings-qr-frame{
  background:var(--surface)!important;
  border-color: var(--border) !important;
  border-radius: 7px !important;
  box-shadow:var(--shadow)!important;
}.qr-tool-card{
  background:var(--surface)!important;
  border-color: var(--border) !important;
  border-radius: 7px !important;
  box-shadow:var(--shadow)!important;
}.announcement-panel{
  background:var(--surface)!important;
  border-color: var(--border) !important;
  border-radius: 7px !important;
  box-shadow:var(--shadow)!important;
}

.metric-grid > .card{
  min-height: 130px !important;
  padding: 20px !important;
  border-top: 2px solid var(--border) !important;
}

.metric-grid > .card:nth-child(3n + 2){
  border-top-color: var(--border) !important;
}

.metric-grid > .card:nth-child(3n){
  border-top-color: var(--border) !important;
}

.metric-grid .card strong{
  font-size: clamp(1.48rem, 2vw, 2rem) !important;
}.metric-value{
  font-size: clamp(1.48rem, 2vw, 2rem) !important;
}

.vv-suite-card{
  background:var(--surface)!important;
  border-color: var(--border) !important;
  border-radius: 6px !important;
}.command-insight-card{
  background:var(--surface)!important;
  border-color: var(--border) !important;
  border-radius: 6px !important;
}.system-action{
  background:var(--surface)!important;
  border-color: var(--border) !important;
  border-radius: 6px !important;
}.staff-action-card{
  background:var(--surface)!important;
  border-color: var(--border) !important;
  border-radius: 6px !important;
}.roster-signal-card{
  background:var(--surface)!important;
  border-color: var(--border) !important;
  border-radius: 6px !important;
}.roster-week-card{
  background:var(--surface)!important;
  border-color: var(--border) !important;
  border-radius: 6px !important;
}

.primary-btn{
  color:var(--on-primary)!important;
  background:var(--primary)!important;
  border-color: transparent !important;
  box-shadow:var(--shadow)!important;
}.small-btn{
  color: var(--text-secondary) !important;
  background:var(--surface)!important;
  border-color: transparent !important;
  box-shadow:var(--shadow)!important;
}.topbar-quick-action{
  color: var(--text-primary) !important;
  background:var(--surface)!important;
  border-color: transparent !important;
  box-shadow:var(--shadow)!important;
}.login-btn{
  color:var(--on-primary)!important;
  background:var(--primary)!important;
  border-color: transparent !important;
  box-shadow:var(--shadow)!important;
}button.primary-btn{
  color:var(--on-primary)!important;
  background:var(--primary)!important;
  border-color: transparent !important;
  box-shadow:var(--shadow)!important;
}

.primary-btn:hover{
  background:var(--primary)!important;
color:var(--on-primary);}.small-btn:hover{
  background:var(--surface-muted)!important;
}.topbar-quick-action:hover{
  background:var(--surface-muted)!important;
}.login-btn:hover{
  background:var(--primary)!important;
color:var(--on-primary);}

.secondary-btn{
  color: var(--vv-text) !important;
  background:var(--surface-muted)!important;
  border-color: var(--border) !important;
}.icon-btn{
  color: var(--vv-text) !important;
  background:var(--surface)!important;
  border-color: var(--border) !important;
}.quick-pill{
  color: var(--vv-text) !important;
  background:var(--surface)!important;
  border-color: var(--border) !important;
}.profile-chip{
  color: var(--vv-text) !important;
  background:var(--surface-muted)!important;
  border-color: var(--border) !important;
}.notification-bell{
  color: var(--vv-text) !important;
  background:var(--surface)!important;
  border-color: var(--border) !important;
}.staff-task-alert{
  color: var(--vv-text) !important;
  background:var(--surface)!important;
  border-color: var(--border) !important;
}

input{
  color: var(--vv-text) !important;
  background:var(--surface)!important;
  border-color: var(--control-border) !important;
}select{
  color: var(--vv-text) !important;
  background:var(--surface)!important;
  border-color: var(--control-border) !important;
}textarea{
  color: var(--vv-text) !important;
  background:var(--surface)!important;
  border-color: var(--control-border) !important;
}

input:focus{
  border-color: var(--vv-accent) !important;
  box-shadow:var(--shadow)!important;
}select:focus{
  border-color: var(--vv-accent) !important;
  box-shadow:var(--shadow)!important;
}textarea:focus{
  border-color: var(--vv-accent) !important;
  box-shadow:var(--shadow)!important;
}

.table-wrap{
  padding: 18px !important;
}

.table-scroll{
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
}.responsive-table-shell{
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
}

table{
  font-size:14px!important;
}

table th{
  position: sticky !important;
  top: 0 !important;
  z-index: 2 !important;
  min-height: 48px !important;
  color: var(--text-primary) !important;
  background:var(--surface-muted)!important;
  border-bottom-color: var(--border) !important;
}

table td{
  min-height: 54px !important;
  border-bottom-color: var(--border) !important;
}

table tbody tr:nth-child(even) td{
  background:var(--page)!important;
}

table tbody tr:hover td{
  background:var(--page)!important;
}

.invoice-action-cell{
  min-width: 420px !important;
  gap: 7px !important;
}

.invoice-action-cell button{
  min-width: 62px !important;
  min-height: 38px !important;
}

.dialog-backdrop{
  background:var(--scrim)!important;
  backdrop-filter: blur(5px) !important;
  -webkit-backdrop-filter: blur(5px) !important;
}.modal-backdrop{
  background:var(--scrim)!important;
  backdrop-filter: blur(5px) !important;
  -webkit-backdrop-filter: blur(5px) !important;
}

.dialog-panel.wide-dialog.manual-invoice-dialog{
  width: min(1180px, calc(100vw - 42px)) !important;
  max-width: 1180px !important;
  max-height: min(860px, calc(100dvh - 42px)) !important;
  padding: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}.dialog-panel.manual-invoice-dialog{
  width: min(1180px, calc(100vw - 42px)) !important;
  max-width: 1180px !important;
  max-height: min(860px, calc(100dvh - 42px)) !important;
  padding: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

.manual-invoice-dialog > h3{
  margin: 0 !important;
  padding: 18px 20px !important;
  background:var(--surface)!important;
  border-bottom: 1px solid var(--border) !important;
}

.manual-invoice-dialog .stock-dialog-grid{
  grid-template-columns: minmax(300px, 0.38fr) minmax(0, 1fr) !important;
  gap: 16px !important;
  padding: 18px 20px !important;
}

.manual-invoice-dialog .dialog-card{
  min-width: 0 !important;
  padding: 16px !important;
  background:var(--surface)!important;
  border-color: var(--border) !important;
}

.manual-invoice-dialog .invoice-item-row{
  grid-template-columns: minmax(210px, 1fr) 82px 116px 92px !important;
  gap: 10px !important;
  min-width: 0 !important;
  align-items: end !important;
}

.manual-invoice-dialog .invoice-item-row > *{
  min-width: 0 !important;
}

.manual-invoice-dialog .invoice-remove-btn{
  width: 100% !important;
  min-width: 0 !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 8px !important;
}

.manual-invoice-dialog .dialog-actions{
  position: sticky !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  z-index: 4 !important;
  margin: 0 !important;
  padding: 13px 20px !important;
  background:var(--surface)!important;
  border-top: 1px solid var(--border) !important;
}

.login-page{
  background:var(--surface)!important;
}.vv-entry-sequence{
  background:var(--surface)!important;
}

.login-page .login-card{
  background:var(--surface)!important;
  border-color: var(--border) !important;
}

@media (max-width: 1100px) and (min-width: 768px) {
  .manual-invoice-dialog .stock-dialog-grid{
    grid-template-columns: 260px minmax(0, 1fr) !important;
  }

  .manual-invoice-dialog .invoice-item-row{
    grid-template-columns: minmax(180px, 1fr) 76px 108px !important;
  }

  .manual-invoice-dialog .invoice-remove-btn{
    grid-column: 1 / -1 !important;
    width: 120px !important;
    justify-self: end !important;
  }
}

@media (max-width: 1023px) {
  :root{
    --vv-sidebar-width: min(78vw, 300px);
  }

  .staff-portal .sidebar{
    background:var(--nav-bg)!important;
    border-right-color: var(--border) !important;
  color:var(--nav-text);}.customer-portal .sidebar{
    background:var(--nav-bg)!important;
    border-right-color: var(--border) !important;
  color:var(--nav-text);}

  .app-shell > .main{
    padding: 10px 12px 92px !important;
  }.staff-portal .app-shell > .main{
    padding: 10px 12px 92px !important;
  }.customer-portal .app-shell > .main{
    padding: 10px 12px 92px !important;
  }

  .staff-portal .topbar{
    min-height: 64px !important;
    background:var(--surface)!important;
  }

  .mobile-bottom-nav{
    background:var(--surface)!important;
    border-color: var(--border) !important;
  }.admin-mobile-bottom-nav{
    background:var(--surface)!important;
    border-color: var(--border) !important;
  }.staff-mobile-bottom-nav{
    background:var(--surface)!important;
    border-color: var(--border) !important;
  }
}

@media (max-width: 767px) {


  .section-head{
    padding: 14px !important;
  }

  .section-head > div:last-child{
    width: 100% !important;
  }.section-head > div:last-child > button{
    width: 100% !important;
  }

  .metric-grid{
    grid-template-columns: 1fr !important;
  }

  .dialog-panel.wide-dialog{
    width: 100% !important;
    max-width: none !important;
    max-height: calc(100dvh - env(safe-area-inset-top)) !important;
    border-radius: 10px 10px 0 0 !important;
  }.dialog-panel.manual-invoice-dialog{
    width: 100% !important;
    max-width: none !important;
    max-height: calc(100dvh - env(safe-area-inset-top)) !important;
    border-radius: 10px 10px 0 0 !important;
  }.dialog-panel.wide-dialog.manual-invoice-dialog{
    width: 100% !important;
    max-width: none !important;
    max-height: calc(100dvh - env(safe-area-inset-top)) !important;
    border-radius: 10px 10px 0 0 !important;
  }

  .manual-invoice-dialog .stock-dialog-grid{
    grid-template-columns: 1fr !important;
  }.manual-invoice-dialog .invoice-item-row{
    grid-template-columns: 1fr !important;
  }.manual-invoice-summary{
    grid-template-columns: 1fr !important;
  }

  .manual-invoice-dialog .invoice-remove-btn{
    width: 100% !important;
  }

  .invoice-action-cell{
    min-width: 0 !important;
  }
}

/* ========================================================================== */
/* Viewport reliability: notifications and high-resolution operations canvas. */
/* ========================================================================== */

.topbar-actions{
  overflow: visible !important;
}.notification-center{
  overflow: visible !important;
}

.notification-panel{
  position: fixed !important;
  top: 92px !important;
  right: 24px !important;
  left: auto !important;
  width: min(410px, calc(100vw - 32px)) !important;
  min-width: min(330px, calc(100vw - 32px)) !important;
  max-width: 410px !important;
  max-height: min(620px, calc(100dvh - 112px)) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  z-index: 10020 !important;
  overscroll-behavior: contain;
}.notification-dropdown{
  position: fixed !important;
  top: 92px !important;
  right: 24px !important;
  left: auto !important;
  width: min(410px, calc(100vw - 32px)) !important;
  min-width: min(330px, calc(100vw - 32px)) !important;
  max-width: 410px !important;
  max-height: min(620px, calc(100dvh - 112px)) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  z-index: 10020 !important;
  overscroll-behavior: contain;
}

.notification-panel-head{
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}.notification-list{
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}.notification-item{
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}.notification-empty{
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

.notification-item{
  min-width: 0 !important;
  overflow-wrap: anywhere;
}.notification-item *{
  min-width: 0 !important;
  overflow-wrap: anywhere;
}

@media (min-width: 1600px) {


  .page-section{
    max-width: 2040px !important;
  }

  .app-shell > .main{
    padding-right: clamp(34px, 2.6vw, 60px) !important;
    padding-left: clamp(34px, 2.6vw, 60px) !important;
  }.staff-portal .app-shell > .main{
    padding-right: clamp(34px, 2.6vw, 60px) !important;
    padding-left: clamp(34px, 2.6vw, 60px) !important;
  }.customer-portal .app-shell > .main{
    padding-right: clamp(34px, 2.6vw, 60px) !important;
    padding-left: clamp(34px, 2.6vw, 60px) !important;
  }

  #dashboardSection .home-command-hero{
    min-height: 230px !important;
    padding: 30px 34px !important;
  }

  #dashboardSection .home-command-copy h1{
    font-size: 2.65rem !important;
  }

  #dashboardSection .vv-suite-panel{
    padding: 28px !important;
  }

  #dashboardSection .vv-suite-grid{
    gap: 14px !important;
  }

  #dashboardSection .vv-suite-card{
    min-height: 128px !important;
    padding: 17px !important;
  }

  #dashboardSection .metric-grid > .card{
    min-height: 150px !important;
    padding: 24px !important;
  }
}

@media (max-width: 767px) {
  .notification-panel{
    top: calc(max(68px, env(safe-area-inset-top) + 58px)) !important;
    right: 10px !important;
    left: 10px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    max-height: calc(100dvh - max(84px, env(safe-area-inset-top) + 74px)) !important;
    border-radius: 10px !important;
  }.notification-dropdown{
    top: calc(max(68px, env(safe-area-inset-top) + 58px)) !important;
    right: 10px !important;
    left: 10px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    max-height: calc(100dvh - max(84px, env(safe-area-inset-top) + 74px)) !important;
    border-radius: 10px !important;
  }
}

/* ========================================================================== */
/* Shell and invoice authority: one mobile drawer model, one invoice language. */
/* ========================================================================== */



#invoiceSection .section-head{
  padding: 18px 20px !important;
  background:var(--surface)!important;
  border: 1px solid var(--border) !important;
  border-left: 3px solid var(--vv-accent) !important;
}

#invoiceSection .metric-grid > .card{
  min-height: 128px !important;
  padding: 20px !important;
  background:var(--surface)!important;
  border-color: var(--border) !important;
  box-shadow:var(--shadow)!important;
}

#invoiceSection .metric-grid > .card strong{
  font-size: clamp(1.45rem, 2.2vw, 2rem) !important;
  color: var(--text-primary) !important;
}

#invoiceSection .table-wrap{
  background:var(--surface-muted)!important;
  border-color: var(--border) !important;
}

#invoiceSection .table-wrap > h3{
  margin: 0 0 14px !important;
  color: var(--text-primary) !important;
}

#invoiceSection table{
  min-width: 1180px !important;
}

#invoiceSection table th{
  color: var(--text-primary) !important;
  background:var(--surface-muted)!important;
}

#invoiceSection .invoice-action-cell{
  display: grid !important;
  grid-template-columns: repeat(4, minmax(66px, 1fr)) !important;
  align-items: stretch !important;
  min-width: 330px !important;
  gap: 6px !important;
}

#invoiceSection .invoice-action-cell button{
  width: 100% !important;
  min-width: 0 !important;
  min-height: 36px !important;
  margin: 0 !important;
  padding: 7px 8px !important;
  border-radius: 6px !important;
  font-size:14px!important;
}

@media (max-width: 1023px) {
  .staff-portal .app-shell{
    z-index: auto !important;
    isolation: auto !important;
  }.customer-portal .app-shell{
    z-index: auto !important;
    isolation: auto !important;
  }

  body.vv-scroll-locked{
    overflow: hidden !important;
    overscroll-behavior: none !important;
  }

  .staff-portal .sidebar{
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    z-index: 20020 !important;
    display: flex !important;
    flex-direction: column !important;
    width: min(84vw, 304px) !important;
    max-width: 304px !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    padding: calc(12px + env(safe-area-inset-top)) 10px calc(10px + env(safe-area-inset-bottom)) !important;
    overflow: hidden !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: none !important;
    transform: translate3d(-106%, 0, 0) !important;
    background:var(--nav-bg)!important;
    border: 0 !important;
    border-right: 1px solid var(--border) !important;
    border-radius: 0 10px 10px 0 !important;
    box-shadow:var(--shadow)!important;
    transition: transform 210ms cubic-bezier(0.22, 0.78, 0.22, 1) !important;
  color:var(--nav-text);}.customer-portal .sidebar{
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    z-index: 20020 !important;
    display: flex !important;
    flex-direction: column !important;
    width: min(84vw, 304px) !important;
    max-width: 304px !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    padding: calc(12px + env(safe-area-inset-top)) 10px calc(10px + env(safe-area-inset-bottom)) !important;
    overflow: hidden !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: none !important;
    transform: translate3d(-106%, 0, 0) !important;
    background:var(--nav-bg)!important;
    border: 0 !important;
    border-right: 1px solid var(--border) !important;
    border-radius: 0 10px 10px 0 !important;
    box-shadow:var(--shadow)!important;
    transition: transform 210ms cubic-bezier(0.22, 0.78, 0.22, 1) !important;
  color:var(--nav-text);}

  .sidebar.is-open{
    pointer-events: auto !important;
    transform: translate3d(0, 0, 0) !important;
  }

  .mobile-sidebar-backdrop{
    position: fixed !important;
    inset: 0 !important;
    z-index: 20010 !important;
    display: block !important;
    width: 100vw !important;
    height: 100dvh !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    background:var(--scrim)!important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transition: opacity 180ms ease, visibility 180ms ease !important;
  }

  .mobile-sidebar-backdrop.is-open{
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }body.mobile-menu-open .mobile-sidebar-backdrop{
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }html.mobile-menu-open .mobile-sidebar-backdrop{
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .sidebar-close{
    top: calc(11px + env(safe-area-inset-top)) !important;
    right: 10px !important;
    z-index: 3 !important;
    display: grid !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    border-radius: 6px !important;
  }

  .sidebar .brand{
    flex: 0 0 auto !important;
    min-height: 54px !important;
    margin: 0 44px 10px 0 !important;
    padding: 6px 7px !important;
    overflow: hidden !important;
  }.sidebar.vv-sidebar .shell-brand{
    flex: 0 0 auto !important;
    min-height: 54px !important;
    margin: 0 44px 10px 0 !important;
    padding: 6px 7px !important;
    overflow: hidden !important;
  }.staff-portal .sidebar .brand{
    flex: 0 0 auto !important;
    min-height: 54px !important;
    margin: 0 44px 10px 0 !important;
    padding: 6px 7px !important;
    overflow: hidden !important;
  }.customer-portal .sidebar .brand{
    flex: 0 0 auto !important;
    min-height: 54px !important;
    margin: 0 44px 10px 0 !important;
    padding: 6px 7px !important;
    overflow: hidden !important;
  }

  .sidebar .brand .logo-img{
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    flex: 0 0 42px !important;
    object-fit: contain !important;
  }.sidebar.vv-sidebar .shell-brand .logo-img{
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    flex: 0 0 42px !important;
    object-fit: contain !important;
  }.staff-portal .sidebar .brand .logo-img{
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    flex: 0 0 42px !important;
    object-fit: contain !important;
  }.customer-portal .sidebar .brand .logo-img{
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    flex: 0 0 42px !important;
    object-fit: contain !important;
  }

  .sidebar-nav{
    flex: 1 1 auto !important;
    min-height: 0 !important;
    padding: 0 3px 10px 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-width: thin !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
  }.staff-portal .sidebar nav{
    flex: 1 1 auto !important;
    min-height: 0 !important;
    padding: 0 3px 10px 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-width: thin !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .sidebar-footer{
    position: static !important;
    flex: 0 0 auto !important;
    margin-top: auto !important;
    padding: 9px 0 0 !important;
  }

  .topbar-menu-btn{
    position: relative !important;
    z-index: 12 !important;
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }.mobile-menu-btn{
    position: relative !important;
    z-index: 12 !important;
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .staff-portal .mobile-menu-btn{
    position: fixed !important;
    z-index: 19000 !important;
  }

  .app-shell > .main{
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
  }.staff-portal .app-shell > .main{
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
  }.customer-portal .app-shell > .main{
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
  }

  #invoiceSection .table-wrap{
    padding: 14px !important;
    overflow: hidden !important;
  }

  #invoiceSection .table-wrap > table{
    display: block !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overscroll-behavior-inline: contain !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

@media (max-width: 767px) {
  html:has(.dialog-backdrop.active, .modal-backdrop.active){
    width: 100% !important;
    height: 100dvh !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
  }body:has(.dialog-backdrop.active, .modal-backdrop.active){
    width: 100% !important;
    height: 100dvh !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
  }

  body #dialogBackdrop.dialog-backdrop.active{
    z-index: 40000 !important;
    align-items: center !important;
    justify-items: center !important;
    padding: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom)) !important;
    padding-inline: 8px !important;
    overflow: hidden !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
  }body .dialog-backdrop.active{
    z-index: 40000 !important;
    align-items: center !important;
    justify-items: center !important;
    padding: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom)) !important;
    padding-inline: 8px !important;
    overflow: hidden !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
  }body .modal-backdrop.active{
    z-index: 40000 !important;
    align-items: center !important;
    justify-items: center !important;
    padding: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom)) !important;
    padding-inline: 8px !important;
    overflow: hidden !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
  }

  .dialog-panel{
    width: calc(100vw - 16px) !important;
    max-width: 720px !important;
    height: calc(100dvh - max(20px, env(safe-area-inset-top) + env(safe-area-inset-bottom))) !important;
    max-height: calc(100dvh - max(20px, env(safe-area-inset-top) + env(safe-area-inset-bottom))) !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    border-radius: 8px !important;
  }.dialog-panel.wide-dialog{
    width: calc(100vw - 16px) !important;
    max-width: 720px !important;
    height: calc(100dvh - max(20px, env(safe-area-inset-top) + env(safe-area-inset-bottom))) !important;
    max-height: calc(100dvh - max(20px, env(safe-area-inset-top) + env(safe-area-inset-bottom))) !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    border-radius: 8px !important;
  }.dialog-panel.manual-invoice-dialog{
    width: calc(100vw - 16px) !important;
    max-width: 720px !important;
    height: calc(100dvh - max(20px, env(safe-area-inset-top) + env(safe-area-inset-bottom))) !important;
    max-height: calc(100dvh - max(20px, env(safe-area-inset-top) + env(safe-area-inset-bottom))) !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    border-radius: 8px !important;
  }.dialog-panel.wide-dialog.manual-invoice-dialog{
    width: calc(100vw - 16px) !important;
    max-width: 720px !important;
    height: calc(100dvh - max(20px, env(safe-area-inset-top) + env(safe-area-inset-bottom))) !important;
    max-height: calc(100dvh - max(20px, env(safe-area-inset-top) + env(safe-area-inset-bottom))) !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    border-radius: 8px !important;
  }

  .dialog-panel > h3{
    flex: 0 0 auto !important;
    min-height: 54px !important;
    margin: 0 !important;
    padding: 15px 16px !important;
    line-height: 1.4 !important;
  }.manual-invoice-dialog > h3{
    flex: 0 0 auto !important;
    min-height: 54px !important;
    margin: 0 !important;
    padding: 15px 16px !important;
    line-height: 1.4 !important;
  }

  .dialog-panel > #dialogBody{
    flex: 1 1 auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
  }.manual-invoice-dialog > #dialogBody{
    flex: 1 1 auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .manual-invoice-dialog .stock-dialog-grid{
    gap: 12px !important;
    padding: 12px !important;
  }

  .manual-invoice-dialog .dialog-card{
    padding: 14px !important;
  }

  .manual-invoice-dialog .dialog-actions{
    position: static !important;
    flex: 0 0 auto !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    padding: 10px 12px max(10px, env(safe-area-inset-bottom)) !important;
  }

  .manual-invoice-dialog .dialog-actions button{
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    margin: 0 !important;
  }

  #invoiceSection .section-head > div:last-child{
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  #invoiceSection .section-head button{
    width: 100% !important;
  }

  #invoiceSection .metric-grid > .card{
    min-height: 110px !important;
  }

  #invoiceSection .invoice-action-cell{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    min-width: 0 !important;
  }
}

/* Finance workspace */
.finance-workspace{




  display: grid;
  gap: 18px;
}

.finance-workspace.hidden-section{
  display: none !important;
}

.finance-workspace.is-loading{
  cursor: progress;
}

.finance-page-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}.finance-panel-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.finance-page-head{
  margin: 0 !important;
  padding: 0 0 2px !important;
}

.finance-page-head h2{
  margin: 0;
}.finance-panel-head h3{
  margin: 0;
}.finance-alert-band h3{
  margin: 0;
}.finance-register-panel h3{
  margin: 0;
}.finance-side-panel h3{
  margin: 0;
}

.finance-page-head p{
  max-width: 68ch;
  margin: 6px 0 0;
  color: var(--vv-muted);
}.finance-panel-head p{
  max-width: 68ch;
  margin: 6px 0 0;
  color: var(--vv-muted);
}.finance-alert-band p{
  max-width: 68ch;
  margin: 6px 0 0;
  color: var(--vv-muted);
}

.finance-head-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}.finance-output-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}.finance-row-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.finance-period-bar{
  border: 1px solid var(--finance-line) !important;
  border-radius: 8px !important;
  background: var(--finance-panel) !important;
  box-shadow:var(--shadow)!important;
}.finance-alert-band{
  border: 1px solid var(--finance-line) !important;
  border-radius: 8px !important;
  background: var(--finance-panel) !important;
  box-shadow:var(--shadow)!important;
}.finance-register-panel{
  border: 1px solid var(--finance-line) !important;
  border-radius: 8px !important;
  background: var(--finance-panel) !important;
  box-shadow:var(--shadow)!important;
}.finance-side-panel{
  border: 1px solid var(--finance-line) !important;
  border-radius: 8px !important;
  background: var(--finance-panel) !important;
  box-shadow:var(--shadow)!important;
}

.finance-period-bar{
  display: grid;
  grid-template-columns: minmax(180px, 0.8fr) minmax(190px, 1fr) minmax(220px, 1fr) auto;
  align-items: end;
  gap: 16px;
  padding: 16px;
}

.finance-period-bar label{
  display: grid;
  gap: 7px;
  margin: 0;
}.finance-form-grid label{
  display: grid;
  gap: 7px;
  margin: 0;
}.finance-amount-grid label{
  display: grid;
  gap: 7px;
  margin: 0;
}.finance-confirm-panel label{
  display: grid;
  gap: 7px;
  margin: 0;
}

.finance-period-bar label > span{
  color: var(--vv-muted);
  font-size:14px;
  font-weight: 700;
}.finance-form-grid label > span{
  color: var(--vv-muted);
  font-size:14px;
  font-weight: 700;
}.finance-amount-grid label > span{
  color: var(--vv-muted);
  font-size:14px;
  font-weight: 700;
}.finance-confirm-panel label > span{
  color: var(--vv-muted);
  font-size:14px;
  font-weight: 700;
}

.finance-period-identity{
  display: grid;
  gap: 4px;
  align-self: center;
}

.finance-period-identity span{
  color: var(--vv-muted);
  font-size:14px;
}

.finance-readiness{
  display: grid;
  gap: 8px;
  align-self: center;
}

.finance-readiness > div:first-child{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--vv-muted);
  font-size:14px;
}

.finance-readiness-track{
  height: 7px;
  overflow: hidden;
  border: 1px solid var(--finance-line);
  border-radius: 99px;
  background:var(--track);
}

.finance-readiness-track > span{
  display: block;
  width: 0;
  height: 100%;
  background: var(--vv-accent);
  transition: width 240ms ease;
}

.finance-status-pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  min-height: 25px;
  padding: 4px 9px;
  border: 1px solid var(--finance-line);
  border-radius: 99px;
  color: var(--vv-muted);
  background:var(--surface);
  font-size:14px;
  font-weight: 800;
  text-transform: uppercase;
}.finance-type-chip{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  min-height: 25px;
  padding: 4px 9px;
  border: 1px solid var(--finance-line);
  border-radius: 99px;
  color: var(--vv-muted);
  background:var(--surface-muted);
  font-size:14px;
  font-weight: 800;
  text-transform: uppercase;
}.finance-locked-label{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  min-height: 25px;
  padding: 4px 9px;
  border: 1px solid var(--finance-line);
  border-radius: 99px;
  color: var(--vv-muted);
  background:var(--surface);
  font-size:14px;
  font-weight: 800;
  text-transform: uppercase;
}

.finance-status-pill[data-status="ready"]{
  color: var(--vv-success);
  border-color: var(--border);
}.finance-status-pill[data-status="posted"]{
  color: var(--vv-success);
  border-color: var(--border);
}.finance-status-pill[data-status="reconciled"]{
  color: var(--vv-success);
  border-color: var(--border);
}.finance-status-pill[data-status="balanced"]{
  color: var(--vv-success);
  border-color: var(--border);
}

.finance-status-pill[data-status="incomplete"]{
  color: var(--vv-warning);
  border-color: var(--border);
}.finance-status-pill[data-status="reviewing"]{
  color: var(--vv-warning);
  border-color: var(--border);
}.finance-status-pill[data-status="warning"]{
  color: var(--vv-warning);
  border-color: var(--border);
}

.finance-status-pill[data-status="void"]{
  color: var(--vv-danger);
  border-color: var(--border);
}.finance-status-pill[data-status="error"]{
  color: var(--vv-danger);
  border-color: var(--border);
}.finance-status-pill[data-status="blocking_error"]{
  color: var(--vv-danger);
  border-color: var(--border);
}

.finance-metric-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.finance-metric-card{
  display: grid;
  min-width: 0;
  min-height: 122px;
  padding: 16px;
  border: 1px solid var(--finance-line);
  border-top-color: var(--finance-line-strong);
  border-radius: 8px;
  background: var(--finance-panel-2);
}

.finance-metric-card > span{
  color: var(--vv-muted);
  font-size:14px;
  font-weight: 700;
}

.finance-metric-card > strong{
  align-self: center;
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--vv-text);
  font-size: 1.32rem;
}

.finance-metric-card > small{
  align-self: end;
  color: var(--vv-soft);
  font-size:14px;
  line-height: 1.4;
}

.finance-alert-band{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px;
  border-left: 3px solid var(--vv-warning) !important;
}

.finance-alert-counts{
  display: grid;
  grid-template-columns: repeat(3, minmax(88px, 1fr));
  gap: 8px;
}

.finance-alert-count{
  display: grid;
  gap: 2px;
  min-height: 58px;
  padding: 9px 12px;
  border: 1px solid var(--finance-line) !important;
  border-radius: 6px !important;
  color: var(--vv-text) !important;
  background:var(--surface)!important;
  box-shadow:var(--shadow)!important;
  text-align: left;
}

.finance-alert-count strong{ font-size: 1.02rem; }
.finance-alert-count span{ color: var(--vv-muted); font-size:14px; }
.finance-alert-count.blocking strong{ color: var(--vv-danger); }
.finance-alert-count.warning strong{ color: var(--vv-warning); }
.finance-alert-count.info strong{ color: var(--vv-info); }

.finance-main-grid{
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(300px, 0.9fr);
  align-items: start;
  gap: 14px;
}

.finance-register-panel{
  min-width: 0;
  padding: 16px;
}.finance-side-panel{
  min-width: 0;
  padding: 16px;
}

.finance-side-stack{
  display: grid;
  min-width: 0;
  gap: 14px;
}

.finance-filter-grid{
  display: grid;
  grid-template-columns: minmax(190px, 1.4fr) minmax(150px, 1fr) minmax(130px, 0.8fr) 100px;
  gap: 8px;
  margin: 14px 0;
}

.finance-table-wrap{
  max-width: 100%;
  padding: 0 !important;
  overflow-x: auto !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow:var(--shadow)!important;
}

.finance-table-wrap table{
  width: 100%;
  min-width: 820px;
  table-layout: auto;
}

.finance-table-wrap th{
  padding: 11px 9px !important;
  vertical-align: top;
}.finance-table-wrap td{
  padding: 11px 9px !important;
  vertical-align: top;
}

.finance-cell-note{
  display: block;
  max-width: 250px;
  margin-top: 5px;
  color: var(--vv-soft);
  font-size:14px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.finance-row-actions{
  flex-wrap: nowrap;
}

.finance-row-actions button{
  min-height: 34px !important;
  padding: 7px 10px !important;
}

.finance-issue-list{
  display: grid;
  gap: 9px;
  max-height: 420px;
  margin-top: 12px;
  overflow-y: auto;
}

.finance-issue-item{
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--finance-line);
  border-left: 3px solid var(--vv-info);
  border-radius: 6px;
  background:var(--surface);
}

.finance-issue-item.blocking_error{ border-left-color: var(--vv-danger); }
.finance-issue-item.warning{ border-left-color: var(--vv-warning); }
.finance-issue-item.info{ border-left-color: var(--vv-info); }

.finance-issue-item > div:first-child{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}.finance-issue-meta{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}.finance-integrity-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.finance-issue-item > div:first-child span{
  color: var(--vv-soft);
  font-size:14px;
  text-transform: uppercase;
}.finance-issue-meta{
  color: var(--vv-soft);
  font-size:14px;
  text-transform: uppercase;
}

.finance-issue-item p{
  margin: 0;
  color: var(--vv-muted);
  font-size:14px;
  line-height: 1.5;
}

.finance-integrity-row{
  margin: 14px 0 10px;
  padding: 11px 0;
  border-top: 1px solid var(--finance-line);
  border-bottom: 1px solid var(--finance-line);
}

.finance-report-metrics{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.finance-report-metrics > div{
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 9px;
  border: 1px solid var(--finance-line);
  border-radius: 6px;
  background:var(--surface);
}

.finance-report-metrics span{ color: var(--vv-soft); font-size:14px; }
.finance-report-metrics strong{ overflow-wrap: anywhere; font-size:14px; }
.finance-output-actions{ margin-top: 12px; }
.finance-output-actions button{ flex: 1 1 130px; }
.finance-report-note{ margin: 12px 0 0; color: var(--vv-soft); font-size:14px; line-height: 1.45; }

.finance-dialog-layout{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 0;
}

.finance-dialog-layout.compact{ grid-template-columns: 1fr; }

.finance-dialog .dialog-card{
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--finance-line) !important;
  border-radius: 7px !important;
  background:var(--surface)!important;
}

.finance-dialog .dialog-card h4{
  margin: 0 0 12px;
}.finance-confirm-panel h4{
  margin: 0 0 12px;
}

.finance-form-grid{
  display: grid;
  gap: 10px;
}.finance-amount-grid{
  display: grid;
  gap: 10px;
}

.finance-form-grid.two-col{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.finance-form-grid .full{ grid-column: 1 / -1; }
.finance-amount-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: end; margin-top: 12px; }

.finance-entry-completeness{
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  padding: 12px;
  border: 1px solid var(--finance-line);
  border-radius: 7px;
  background:var(--surface);
}

.finance-entry-completeness strong{ grid-column: 1 / -1; }
.finance-entry-completeness span{ font-size:14px; }
.finance-entry-completeness .ok{ color: var(--vv-success); }
.finance-entry-completeness .missing{ color: var(--vv-warning); }
.finance-entry-completeness ul{ grid-column: 1 / -1; margin: 0; padding-left: 18px; }
.finance-ready-action{ grid-column: 1 / -1; justify-self: end; }

.finance-confirm-panel{
  display: grid;
  gap: 12px;
}

.finance-confirm-panel p{ margin: 0; color: var(--vv-muted); line-height: 1.55; }

.finance-tab-bar{
  display: flex;
  gap: 6px;
  max-width: 100%;
  padding: 5px;
  overflow-x: auto;
  scrollbar-width: none;
  border: 1px solid var(--finance-line);
  border-radius: 7px;
  background:var(--surface-muted);
}

.finance-tab-bar::-webkit-scrollbar{ display: none; }

.finance-tab{
  flex: 0 0 auto;
  min-height: 38px;
  padding: 8px 15px;
  border: 1px solid transparent;
  border-radius: 5px;
  color: var(--vv-muted);
  background: transparent;
  font-weight: 700;
  white-space: nowrap;
}

.finance-tab:hover{
  color: var(--vv-text);
  border-color: var(--finance-line);
  background:var(--surface-muted);
}.finance-tab:focus-visible{
  color: var(--vv-text);
  border-color: var(--finance-line);
  background:var(--surface-muted);
}

.finance-tab.is-active{
  color: var(--text-primary);
  border-color: var(--border);
  background:var(--surface-muted);
  box-shadow:var(--shadow);
}

.finance-tab-panel{ display: none; min-width: 0; }
.finance-tab-panel.is-active{ display: block; }

.finance-banking-layout{
  display: grid;
  grid-template-columns: minmax(240px, 0.32fr) minmax(0, 1fr);
  gap: 14px;
  min-width: 0;
}

.finance-control-grid{
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
  gap: 14px;
  min-width: 0;
}

.finance-assets-panel{ grid-column: 1 / -1; }

.finance-account-list{
  display: grid;
  gap: 8px;
}.finance-bill-lines{
  display: grid;
  gap: 8px;
}

.finance-account-item{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  width: 100%;
  padding: 12px;
  text-align: left;
  color: var(--vv-text);
  border: 1px solid var(--finance-line);
  border-radius: 6px;
  background:var(--surface);
}

.finance-account-item:hover{
  border-color: var(--border);
  background:var(--surface-muted);
}.finance-account-item:focus-visible{
  border-color: var(--focus);
  background:var(--surface);
}.finance-account-item.is-active{
  border-color: var(--border);
  background:var(--surface);
}

.finance-account-item span{ min-width: 0; }
.finance-account-item strong{ display: block; overflow-wrap: anywhere; }.finance-account-item small{ display: block; overflow-wrap: anywhere; }
.finance-account-item small{ margin-top: 3px; color: var(--vv-muted); font-weight: 500; }
.finance-account-item > span:last-child{ text-align: right; }

.finance-bill-line{
  display: grid;
  grid-template-columns: minmax(180px, 2fr) minmax(84px, 0.55fr) minmax(110px, 0.75fr) minmax(160px, 1.25fr) 38px;
  gap: 8px;
  align-items: end;
  padding: 10px;
  border: 1px solid var(--finance-line);
  border-radius: 6px;
  background:var(--surface);
}

.finance-remove-line{
  width: 38px;
  height: 38px;
  color: var(--text-primary) !important;
  border-color: var(--border) !important;
}

.finance-pager{
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}

.finance-register-note{
  display: block;
  color: var(--vv-muted);
  font-size:14px;
  line-height: 1.35;
}.finance-cell-note{
  display: block;
  color: var(--vv-muted);
  font-size:14px;
  line-height: 1.35;
}

.finance-register-note{ margin: 10px 0; }

.finance-table-wrap{
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

.finance-table-wrap td:last-child .card-actions{
  flex-wrap: wrap;
}

.dialog-panel.finance-dialog{
  max-height: min(88dvh, 860px);
  overflow-x: hidden !important;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.finance-dialog #dialogBody{
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}.finance-dialog .finance-dialog-layout{
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}.finance-dialog .dialog-card{
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}.finance-dialog .finance-bill-lines{
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}.finance-dialog .finance-bill-line{
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.finance-dialog #dialogBody{
  width: 100%;
  overflow-x: hidden;
}.finance-dialog .finance-dialog-layout{
  width: 100%;
  overflow-x: hidden;
}

.finance-dialog .finance-bill-line > *{
  min-width: 0;
  max-width: 100%;
}

.finance-dialog input{ width: 100%; min-width: 0; }.finance-dialog select{ width: 100%; min-width: 0; }.finance-dialog textarea{ width: 100%; min-width: 0; }

@media (max-width: 1180px) {
  .finance-metric-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .finance-main-grid{ grid-template-columns: 1fr; }
  .finance-side-stack{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .finance-banking-layout{ grid-template-columns: 1fr; }.finance-control-grid{ grid-template-columns: 1fr; }
  .finance-assets-panel{ grid-column: 1; }
  .finance-bill-line{ grid-template-columns: minmax(160px, 1.6fr) repeat(3, minmax(110px, 1fr)) 38px; }
}

@media (max-width: 767px) {
  .finance-workspace{ gap: 12px; }
  .finance-page-head{ align-items: stretch; flex-direction: column; }.finance-alert-band{ align-items: stretch; flex-direction: column; }.finance-panel-head{ align-items: stretch; flex-direction: column; }
  .finance-head-actions{ display: grid; grid-template-columns: 1fr; width: 100%; }
  .finance-head-actions button{ width: 100% !important; }
  .finance-period-bar{ grid-template-columns: 1fr; align-items: stretch; gap: 12px; padding: 13px; }
  .finance-period-bar > .finance-status-pill{ justify-self: start; }
  .finance-metric-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .finance-metric-card{ min-height: 112px; padding: 12px; }
  .finance-metric-card > strong{ font-size: 1rem; }
  .finance-alert-counts{ width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .finance-alert-count{ min-width: 0; padding: 8px; }
  .finance-register-panel{ padding: 13px; }.finance-side-panel{ padding: 13px; }
  .finance-filter-grid{ grid-template-columns: 1fr; }
  .finance-side-stack{ grid-template-columns: 1fr; }
  .finance-report-metrics{ grid-template-columns: 1fr; }
  .finance-output-actions{ display: grid; grid-template-columns: 1fr; }
  .finance-output-actions button{ width: 100% !important; }
  .finance-dialog-layout{ grid-template-columns: 1fr; }.finance-form-grid.two-col{ grid-template-columns: 1fr; }.finance-amount-grid{ grid-template-columns: 1fr; }
  .finance-dialog .dialog-card{ padding: 12px; }
  .finance-tab-bar{ margin-inline: -1px; }
  .finance-tab{ min-height: 42px; padding-inline: 13px; }
  .finance-bill-line{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .finance-bill-line .finance-line-description{ grid-column: 1 / -1; }
  .finance-bill-line .finance-remove-line{ grid-column: 2; justify-self: end; }
  .finance-account-item{ padding: 11px; }
  .finance-pager{ display: grid; grid-template-columns: 1fr 1fr; }
  .finance-pager button{ width: 100% !important; }
  .finance-entry-completeness{ grid-template-columns: 1fr; }
  .finance-entry-completeness strong{ grid-column: 1; }.finance-entry-completeness ul{ grid-column: 1; }
  .finance-ready-action{ width: 100% !important; justify-self: stretch; }
  .finance-table-wrap table{ min-width: 760px; }
}

@media (max-width: 430px) {
  .finance-metric-grid{ grid-template-columns: 1fr; }
  .finance-alert-counts{ grid-template-columns: 1fr; }
}

.security-readiness{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  border-left: 5px solid var(--border);
}

.security-readiness > div{ display: grid; gap: 4px; }
.security-readiness strong{ font-size: clamp(2.4rem, 7vw, 4.6rem); line-height: 1; color: var(--text-primary); }
.security-readiness p{ max-width: 520px; color: var(--muted, #728199); }
.security-ledger-grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.security-severity{ display: inline-flex; padding: 4px 9px; border-radius: 999px; font-size:14px; font-weight: 800; letter-spacing: .05em; }
.severity-critical{ background:var(--surface); color: var(--text-primary); }
.severity-high{ background:var(--surface); color: var(--text-primary); }
.severity-medium{ background:var(--surface); color: var(--text-primary); }
.severity-low{ background:var(--surface); color: var(--text-primary); }.severity-info{ background:var(--surface); color: var(--text-primary); }
.security-warning{ color: var(--warning); font-weight: 800; }

@media (max-width: 980px) {
  .security-ledger-grid{ grid-template-columns: 1fr; }
  .security-readiness{ align-items: flex-start; flex-direction: column; }
}

@media (max-width: 767px) {
  #dialogBackdrop .dialog-panel{
    display: flex !important;
    flex-direction: column !important;
    max-height: calc(100dvh - 20px) !important;
    overflow: hidden !important;
  }#staffDialogBackdrop .dialog-panel{
    display: flex !important;
    flex-direction: column !important;
    max-height: calc(100dvh - 20px) !important;
    overflow: hidden !important;
  }

  #dialogBody{
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }#staffDialogBody{
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  #dialogBackdrop .dialog-actions{
    position: static !important;
    bottom: auto !important;
    flex: 0 0 auto !important;
    flex-direction: row !important;
    margin: 0 -16px !important;
  }#staffDialogBackdrop .dialog-actions{
    position: static !important;
    bottom: auto !important;
    flex: 0 0 auto !important;
    flex-direction: row !important;
    margin: 0 -16px !important;
  }
}

.app-banking-nav{position:relative;}
.app-banking-badge{display:inline-grid;place-items:center;min-width:18px;height:18px;margin-left:auto;padding:0 5px;border-radius:999px;background:var(--surface-muted);color:var(--text-primary);font-size:10px;font-weight:900;line-height:1;}
@media(max-width:1023px){.app-banking-nav .app-banking-badge{margin-left:8px;}}