/* MG Print Portal · Production normalization layer · 2026-09-11
   One premium geometry system for dashboard/catalog/API/manual/admin/forms. */
:root{
  --mg-card-h:180px;--mg-radius:16px;--mg-btn-h:38px;--mg-control-h:44px;
  --mg-panel-pad:18px;--mg-gap:14px;--mg-shadow:0 12px 28px rgba(21,58,82,.075);
}
html body .v715-live-service-card,
html body .v723-catalog-card{
  height:var(--mg-card-h)!important;min-height:var(--mg-card-h)!important;max-height:var(--mg-card-h)!important;
  border-radius:var(--mg-radius)!important;padding:14px!important;box-shadow:var(--mg-shadow)!important;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease!important;
}
html body .v715-live-service-card:hover,
html body .v723-catalog-card:hover{transform:translateY(-3px)!important;box-shadow:0 18px 36px rgba(21,58,82,.13)!important}
html body .v715-live-service-card .v715-live-service-icon,
html body .v723-catalog-card .v715-live-service-icon{width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;border-radius:12px!important}
html body .v715-live-service-card .v715-live-service-icon img,
html body .v723-catalog-card .v715-live-service-icon img{width:31px!important;height:31px!important;max-width:31px!important;max-height:31px!important;object-fit:contain!important}
html body .v715-live-service-card>div span,
html body .v723-catalog-card>div span{height:34px!important;min-height:34px!important;border-radius:9px!important;padding:0 11px!important}
html body .v715-live-badge{top:9px!important;right:9px!important;min-height:19px!important;border-radius:999px!important}

/* One panel/table/button/input rhythm across user + Admin panels. */
html body .panel{border-radius:var(--mg-radius)!important;box-shadow:var(--mg-shadow)!important}
html body .panel:not(details):not(.v715-live-service-card):not(.v723-catalog-card){padding:var(--mg-panel-pad)!important}
html body .btn,html body button.btn,html body a.btn{min-height:var(--mg-btn-h)!important;border-radius:10px!important;font-weight:750!important;display:inline-flex;align-items:center;justify-content:center;gap:7px}
html body input:not([type="checkbox"]):not([type="radio"]),html body select,html body textarea{border-radius:10px!important;font:inherit!important}
html body input:not([type="checkbox"]):not([type="radio"]),html body select{min-height:var(--mg-control-h)!important}
html body textarea{min-height:108px}
html body .table th{font-size:12px!important;font-weight:800!important;letter-spacing:.02em!important}
html body .table td{font-size:13px!important;vertical-align:middle!important}
html body .modal-panel,html body .command-panel,html body .superchat-popup-panel{border-radius:18px!important}

/* Premium service-detail workspace. */
html body .apply-workspace .content{max-width:1500px!important;margin:0 auto!important;padding-top:20px!important}
html body .video-form-titlebar{border-radius:18px!important;padding:20px 22px!important;box-shadow:var(--mg-shadow)!important}
html body .compact-service-split{align-items:start!important;gap:18px!important}
html body .compact-service-form,html body .compact-service-summary{border-radius:18px!important;overflow:hidden!important}
html body .compact-service-form .gov-apply-head{margin:-18px -18px 18px!important;padding:18px!important;border-radius:18px 18px 0 0!important}
html body .apply-visual-wrap{width:58px!important;height:58px!important;min-width:58px!important;border-radius:14px!important;display:grid!important;place-items:center!important;overflow:hidden!important}
html body .apply-photo{width:100%!important;height:100%!important;object-fit:cover!important}
html body .apply-logo{width:28px!important;height:28px!important;object-fit:contain!important}
html body .form-grid{gap:14px!important}
html body .field label{font-size:12px!important;font-weight:800!important;margin-bottom:6px!important}
html body .compact-service-summary{position:sticky!important;top:86px!important}
html body .compact-service-summary .kv{padding:10px 0!important}
html body [data-optional-fields-panel][hidden]{display:none!important}

/* API response/status tone standard. */
html body .api-flow-status{display:inline-flex!important;align-items:center!important;min-height:32px!important;padding:6px 10px!important;border-radius:9px!important;font-weight:750!important;border:1px solid transparent!important}
html body .api-flow-status.is-success{background:#e8f8ef!important;color:#087549!important;border-color:#bce9d1!important}
html body .api-flow-status.is-pending{background:#fff4dd!important;color:#9a5a00!important;border-color:#f3d39b!important}
html body .api-flow-status.is-failed{background:#fff0f0!important;color:#b42318!important;border-color:#f2c2c2!important}
html body .api-flow-status.is-server{background:#eaf4ff!important;color:#155aa8!important;border-color:#bed9f6!important}
html body .api-flow-status.is-wallet{background:#fff7db!important;color:#7a5700!important;border-color:#ecd078!important}

/* Tracking QR + result. */
html body .track-qr-wrap{display:flex;align-items:center;gap:14px;margin:16px 0;padding:14px;border:1px solid var(--mg-line,#d9e5ed);border-radius:14px;background:var(--mg-surface-2,#f7fafc)}
html body .track-qr{width:148px;min-width:148px;min-height:148px;padding:8px;border-radius:12px;background:#fff;display:grid;place-items:center}
html body .track-qr img,html body .track-qr canvas{display:block!important;max-width:132px!important;max-height:132px!important}

/* Sidebar remains one stable rail; scrolling belongs to rail, not page jumps. */
@media(min-width:981px){
  html body .sidebar{width:270px!important;overflow-y:auto!important;overscroll-behavior:contain!important;scrollbar-gutter:stable!important}
  html body .main{margin-left:270px!important}
}
@media(max-width:1200px) and (min-width:981px){html body .sidebar{width:258px!important}html body .main{margin-left:258px!important}}

/* Responsive production rules. */
@media(max-width:900px){
  html body .v715-live-grid,html body .v723-service-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  html body .compact-service-summary{position:static!important}
  html body .video-form-titlebar{padding:17px!important}
}
@media(max-width:620px){
  :root{--mg-panel-pad:14px}
  html body .v715-live-grid,html body .v723-service-grid{grid-template-columns:1fr!important}
  html body .v715-live-service-card,html body .v723-catalog-card{height:auto!important;min-height:180px!important;max-height:none!important}
  html body .topbar{padding-left:14px!important;padding-right:14px!important}
  html body .content{padding-left:12px!important;padding-right:12px!important}
  html body .track-qr-wrap{align-items:flex-start!important;flex-direction:column!important}
  html body .track-actions .btn{width:100%!important}
}

html[data-theme="dark"] body .track-qr-wrap{background:#102733!important;border-color:#2b4858!important}
html[data-theme="dark"] body .panel{box-shadow:0 14px 32px rgba(0,0,0,.18)!important}

/* =====================================================================
   V8.1.3 · PREMIUM SIDEBAR FINAL
   One polished navigation rail across Admin + all network roles.
   Theme remains per-account; only palette/interaction is normalized here.
   ===================================================================== */
:root{
  --mg-sidebar-bg-admin:linear-gradient(180deg,#07324a 0%,#07526a 50%,#063949 100%);
  --mg-sidebar-bg-network:linear-gradient(180deg,#07525a 0%,#08756f 50%,#07525a 100%);
  --mg-sidebar-text:#f5fbff;
  --mg-sidebar-muted:#a9c9d5;
  --mg-sidebar-line:rgba(202,236,244,.15);
  --mg-sidebar-hover:rgba(255,255,255,.10);
  --mg-sidebar-active:#f4fbff;
  --mg-sidebar-active-text:#0b5068;
  --mg-sidebar-active-network:#effffc;
  --mg-sidebar-active-network-text:#086c65;
  --mg-sidebar-icon-bg:rgba(255,255,255,.105);
  --mg-sidebar-icon-border:rgba(255,255,255,.12);
}
html body.role-admin .sidebar{
  background:var(--mg-sidebar-bg-admin)!important;
  border-right:1px solid var(--mg-sidebar-line)!important;
  box-shadow:12px 0 34px rgba(5,35,52,.18)!important;
}
html body:not(.role-admin) .sidebar{
  background:var(--mg-sidebar-bg-network)!important;
  border-right:1px solid var(--mg-sidebar-line)!important;
  box-shadow:12px 0 34px rgba(3,55,58,.16)!important;
}
html body .sidebar .side-glow{
  opacity:.55!important;
  background:radial-gradient(circle at 22% 4%,rgba(93,207,238,.28),transparent 36%),radial-gradient(circle at 92% 42%,rgba(58,224,194,.14),transparent 34%)!important;
}
html body .sidebar .v697-side-brand{
  min-height:86px!important;
  padding:16px 16px 14px!important;
  border-bottom:1px solid var(--mg-sidebar-line)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,0))!important;
}
html body .sidebar .v697-side-brand img{
  width:48px!important;height:48px!important;object-fit:contain!important;
  filter:drop-shadow(0 8px 16px rgba(0,0,0,.16))!important;
}
html body .sidebar .v697-side-brand b{color:#fff!important;font-weight:900!important;letter-spacing:-.015em!important}
html body .sidebar .v697-side-brand small{color:#c7e2ea!important}
html body .sidebar .v697-side-brand em{color:#91bfcb!important;letter-spacing:.08em!important;font-weight:850!important}
html body .sidebar nav{padding:12px 10px 16px!important;scrollbar-color:rgba(255,255,255,.30) transparent!important}
html body .sidebar nav::-webkit-scrollbar{width:6px!important}
html body .sidebar nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.25)!important;border-radius:999px!important}
html body .sidebar .nav-section{margin:11px 8px 6px!important;padding:0!important;color:var(--mg-sidebar-muted)!important}
html body .sidebar .nav-section span{font-size:10px!important;letter-spacing:.12em!important;font-weight:900!important}
html body .sidebar .nav-section i{background:linear-gradient(90deg,var(--mg-sidebar-line),transparent)!important}
html body .sidebar .nav-item,
html body .sidebar .nav-button,
html body .sidebar .v697-side-services>summary{
  min-height:48px!important;
  margin:4px 0!important;
  padding:8px 10px!important;
  border:1px solid transparent!important;
  border-radius:12px!important;
  color:var(--mg-sidebar-text)!important;
  font-size:13px!important;
  font-weight:800!important;
  line-height:1.15!important;
  transition:background .16s ease,border-color .16s ease,transform .16s ease,box-shadow .16s ease,color .16s ease!important;
}
html body .sidebar .nav-item:hover,
html body .sidebar .nav-button:hover,
html body .sidebar .v697-side-services>summary:hover{
  background:var(--mg-sidebar-hover)!important;
  border-color:rgba(255,255,255,.11)!important;
  transform:translateX(2px)!important;
  box-shadow:inset 3px 0 0 rgba(126,224,242,.56)!important;
  color:#fff!important;
}
html body .sidebar .nav-item.active{
  background:var(--mg-sidebar-active)!important;
  color:var(--mg-sidebar-active-text)!important;
  border-color:rgba(207,235,247,.95)!important;
  box-shadow:0 8px 20px rgba(4,35,53,.18),inset 4px 0 0 #33b8e6!important;
  transform:none!important;
}
html body:not(.role-admin) .sidebar .nav-item.active,
html body:not(.role-admin) .sidebar .v697-side-services[open]>summary{
  background:var(--mg-sidebar-active-network)!important;
  color:var(--mg-sidebar-active-network-text)!important;
  border-color:#c5ebe5!important;
  box-shadow:0 8px 20px rgba(2,62,61,.16),inset 4px 0 0 #28c7b6!important;
}
html body .sidebar .nav-ico{
  width:32px!important;height:32px!important;min-width:32px!important;
  display:grid!important;place-items:center!important;
  border-radius:9px!important;
  background:var(--mg-sidebar-icon-bg)!important;
  border:1px solid var(--mg-sidebar-icon-border)!important;
  color:#dff8ff!important;
  transition:background .16s ease,border-color .16s ease,color .16s ease!important;
}
html body .sidebar .nav-item.active .nav-ico,
html body .sidebar .v697-side-services[open]>summary .nav-ico{
  background:#fff!important;border-color:#d8eaf1!important;color:currentColor!important;
  box-shadow:0 4px 10px rgba(10,65,83,.09)!important;
}
html body .sidebar .nav-label{font-weight:850!important;letter-spacing:-.01em!important}
html body .sidebar .nav-badge{background:#ffcf66!important;color:#593800!important;border:1px solid rgba(255,255,255,.32)!important;font-weight:900!important}
html body .sidebar .v697-service-subnav{padding:4px 0 8px 40px!important}
html body .sidebar .v697-service-subnav a{
  color:#d9f4f2!important;border-radius:10px!important;padding:8px 10px!important;font-size:12px!important;font-weight:750!important;
}
html body .sidebar .v697-service-subnav a:hover{background:rgba(255,255,255,.095)!important;color:#fff!important}
html body .sidebar .side-service-search input{background:rgba(255,255,255,.09)!important;border-color:rgba(255,255,255,.13)!important;color:#fff!important}
html body .sidebar .side-service-search input::placeholder{color:#b7d3dc!important}
html body .sidebar .side-service-accordion>summary,
html body .sidebar .premium-all-services{background:rgba(255,255,255,.055)!important;border-color:rgba(255,255,255,.10)!important;color:#f4fcff!important}
html body .sidebar .side-service-accordion[open]>summary,
html body .sidebar .side-service-accordion>summary:hover,
html body .sidebar .premium-all-services:hover{background:rgba(255,255,255,.105)!important;border-color:rgba(255,255,255,.17)!important}
html body .sidebar .side-accordion-copy small,
html body .sidebar .premium-all-services small{color:#b7d1da!important}
html body .sidebar .side-footer{
  padding:10px!important;
  border-top:1px solid var(--mg-sidebar-line)!important;
  background:linear-gradient(180deg,rgba(4,46,59,.18),rgba(4,39,51,.78))!important;
  backdrop-filter:blur(12px)!important;
}
html body:not(.role-admin) .sidebar .side-footer{background:linear-gradient(180deg,rgba(4,64,63,.18),rgba(3,50,52,.78))!important}
html body .sidebar .side-tool,
html body .sidebar .side-logout-row{
  min-height:44px!important;border-radius:11px!important;
  background:rgba(255,255,255,.065)!important;border:1px solid rgba(255,255,255,.13)!important;color:#f4fbff!important;
}
html body .sidebar .side-tool:hover,
html body .sidebar .side-logout-row:hover{background:rgba(255,255,255,.13)!important;border-color:rgba(255,255,255,.22)!important;color:#fff!important}
html body .sidebar .side-tool b{background:rgba(255,255,255,.15)!important;color:#fff!important;border-color:rgba(255,255,255,.11)!important}

/* Dark mode keeps the same branded rail instead of swapping to a different palette. */
html[data-theme="dark"] body.role-admin .sidebar{background:var(--mg-sidebar-bg-admin)!important}
html[data-theme="dark"] body:not(.role-admin) .sidebar{background:var(--mg-sidebar-bg-network)!important}

@media(max-width:980px){
  html body .sidebar{box-shadow:16px 0 36px rgba(0,0,0,.24)!important}
  html body .sidebar .v697-side-brand{min-height:80px!important}
}

/* =====================================================================
   V8.1.5 · COMPACT PREMIUM SIDEBAR POLISH
   Final visual pass requested after live screenshot review.
   Keeps per-account light/dark isolation and sidebar scroll behavior.
   ===================================================================== */
:root{
  --mg-sidebar-v815-width:250px;
  --mg-sidebar-v815-admin:linear-gradient(180deg,#07354c 0%,#075b70 52%,#063d4c 100%);
  --mg-sidebar-v815-network:linear-gradient(180deg,#07877d 0%,#08746d 54%,#075b59 100%);
  --mg-sidebar-v815-text:#f7fcff;
  --mg-sidebar-v815-muted:#a9d0d6;
  --mg-sidebar-v815-accent:#ffbf3f;
}
@media(min-width:981px){
  html body .sidebar{width:var(--mg-sidebar-v815-width)!important;overflow:hidden!important}
  html body .main{margin-left:var(--mg-sidebar-v815-width)!important}
}
html body.role-admin .sidebar{background:var(--mg-sidebar-v815-admin)!important}
html body:not(.role-admin) .sidebar{background:var(--mg-sidebar-v815-network)!important}
html body .sidebar .v697-side-brand{
  min-height:78px!important;height:78px!important;padding:11px 14px!important;gap:9px!important;
  border-bottom:1px solid rgba(225,247,250,.13)!important;
}
html body .sidebar .v697-side-brand img{width:46px!important;height:42px!important}
html body .sidebar .v697-side-brand b{font-size:16px!important;line-height:1.05!important}
html body .sidebar .v697-side-brand small{font-size:7.2px!important;line-height:1.18!important;margin-top:3px!important}
html body .sidebar .v697-side-brand em{font-size:6.8px!important;margin-top:2px!important}
html body .sidebar>nav{
  flex:1 1 auto!important;min-height:0!important;height:auto!important;overflow-y:auto!important;overflow-x:hidden!important;
  padding:8px 8px 10px!important;scrollbar-width:thin!important;scrollbar-color:rgba(222,247,249,.25) transparent!important;
}
html body .sidebar>nav::-webkit-scrollbar{width:4px!important}
html body .sidebar>nav::-webkit-scrollbar-thumb{background:rgba(224,248,250,.26)!important;border-radius:999px!important}
html body .sidebar .nav-section{margin:9px 7px 5px!important}
html body .sidebar .nav-section span{font-size:8.4px!important;letter-spacing:.115em!important;color:var(--mg-sidebar-v815-muted)!important}
html body .sidebar .nav-item,
html body .sidebar .nav-button,
html body .sidebar .v697-side-services>summary{
  min-height:42px!important;height:42px!important;margin:3px 0!important;padding:5px 9px!important;gap:8px!important;
  border-radius:10px!important;font-size:12.2px!important;font-weight:820!important;color:var(--mg-sidebar-v815-text)!important;
}
html body .sidebar .nav-ico{
  width:30px!important;height:30px!important;min-width:30px!important;flex:0 0 30px!important;border-radius:8px!important;
  background:rgba(255,255,255,.09)!important;border-color:rgba(255,255,255,.10)!important;
}
html body .sidebar .nav-ico svg{width:15px!important;height:15px!important;max-width:15px!important;max-height:15px!important}
html body .sidebar .nav-label{font-size:12.2px!important;font-weight:820!important;line-height:1.12!important;color:inherit!important}
html body .sidebar .nav-item:hover,
html body .sidebar .nav-button:hover,
html body .sidebar .v697-side-services>summary:hover{
  transform:none!important;background:rgba(255,255,255,.095)!important;border-color:rgba(255,255,255,.10)!important;
  box-shadow:inset 3px 0 0 rgba(125,226,238,.55)!important;
}
html body .sidebar .nav-item.active{
  background:linear-gradient(110deg,#f7fdff,#eaf8fb)!important;color:#0a4b63!important;
  border-color:rgba(219,242,247,.96)!important;box-shadow:0 6px 14px rgba(2,42,58,.15),inset 3px 0 0 var(--mg-sidebar-v815-accent)!important;
}
html body:not(.role-admin) .sidebar .nav-item.active,
html body:not(.role-admin) .sidebar .v697-side-services[open]>summary{
  background:linear-gradient(110deg,#f4fffd,#e8faf6)!important;color:#08665f!important;
  border-color:#c5ece5!important;box-shadow:0 6px 14px rgba(2,62,61,.14),inset 3px 0 0 var(--mg-sidebar-v815-accent)!important;
}
html body .sidebar .nav-item.active .nav-ico,
html body .sidebar .v697-side-services[open]>summary .nav-ico{background:#fff!important;border-color:#d9ebee!important;color:currentColor!important;box-shadow:none!important}
html body .sidebar .v697-service-subnav{padding:3px 0 5px 34px!important}
html body .sidebar .v697-service-subnav a{
  min-height:34px!important;padding:7px 9px!important;border-radius:8px!important;font-size:10.8px!important;font-weight:760!important;color:#eafafa!important;
}
html body .sidebar .side-service-accordion>summary,
html body .sidebar .premium-all-services{
  min-height:40px!important;padding:6px 9px!important;margin:3px 0!important;border-radius:9px!important;
  background:rgba(255,255,255,.055)!important;border-color:rgba(255,255,255,.09)!important;color:#f7fcff!important;
}
html body .sidebar .side-service-accordion>summary .side-accordion-copy b,
html body .sidebar .premium-all-services b,
html body .sidebar .v697-side-services>summary .nav-label{color:#f7fcff!important}
html body .sidebar .side-accordion-copy small,
html body .sidebar .premium-all-services small{font-size:8.2px!important;color:#b8d9dd!important}
html body .sidebar .side-footer{
  padding:8px!important;gap:6px!important;border-top:1px solid rgba(220,245,248,.13)!important;
  background:linear-gradient(180deg,rgba(2,60,61,.12),rgba(3,54,56,.62))!important;
}
html body .sidebar .side-tool,
html body .sidebar .side-logout-row{
  min-height:40px!important;height:40px!important;border-radius:9px!important;font-size:11.6px!important;font-weight:820!important;
  background:rgba(255,255,255,.065)!important;border-color:rgba(255,255,255,.13)!important;color:#f7fcff!important;
}
html body .sidebar .side-tool b{font-size:8px!important;padding:3px 7px!important}
html body .sidebar .side-tool:hover,
html body .sidebar .side-logout-row:hover{background:rgba(255,255,255,.115)!important;transform:none!important}
@media(max-width:980px){
  html body .sidebar{width:min(262px,88vw)!important}
  html body .sidebar .v697-side-brand{min-height:74px!important;height:74px!important}
}

/* =====================================================================
   V8.1.6 · UNIFIED ROLE SIDEBAR BRANDING
   One MG Print Portal dark-blue family across every role.
   Role identity is carried only by a restrained accent color.
   ===================================================================== */
:root{
  --mg-sidebar-v816-base:linear-gradient(180deg,#082f49 0%,#0b4f6c 50%,#073b57 100%);
  --mg-sidebar-v816-base-deep:linear-gradient(180deg,#072b43 0%,#0a4561 52%,#062f49 100%);
  --mg-role-accent:#38bdf8;
  --mg-role-accent-soft:rgba(56,189,248,.18);
  --mg-role-active-text:#0b4860;
}
html body.role-admin{--mg-role-accent:#38bdf8;--mg-role-accent-soft:rgba(56,189,248,.18);--mg-role-active-text:#0b4860}
html body.role-master_distributor{--mg-role-accent:#fbbf24;--mg-role-accent-soft:rgba(251,191,36,.18);--mg-role-active-text:#5f4304}
html body.role-super_distributor{--mg-role-accent:#f59e0b;--mg-role-accent-soft:rgba(245,158,11,.18);--mg-role-active-text:#5b3a05}
html body.role-distributor{--mg-role-accent:#8b5cf6;--mg-role-accent-soft:rgba(139,92,246,.18);--mg-role-active-text:#4c2b8b}
html body.role-retailer{--mg-role-accent:#22d3ee;--mg-role-accent-soft:rgba(34,211,238,.18);--mg-role-active-text:#075b67}
html body.role-user{--mg-role-accent:#3b82f6;--mg-role-accent-soft:rgba(59,130,246,.18);--mg-role-active-text:#174e9b}

/* Same premium dark-blue body for every signed-in role. */
html body.role-admin .sidebar,
html body.role-master_distributor .sidebar,
html body.role-super_distributor .sidebar,
html body.role-distributor .sidebar,
html body.role-retailer .sidebar,
html body.role-user .sidebar{
  background:var(--mg-sidebar-v816-base)!important;
  border-right:1px solid rgba(190,229,243,.14)!important;
  box-shadow:12px 0 32px rgba(4,30,48,.20)!important;
}
html body.role-admin .sidebar{background:var(--mg-sidebar-v816-base-deep)!important}
html[data-theme="dark"] body.role-admin .sidebar,
html[data-theme="dark"] body.role-master_distributor .sidebar,
html[data-theme="dark"] body.role-super_distributor .sidebar,
html[data-theme="dark"] body.role-distributor .sidebar,
html[data-theme="dark"] body.role-retailer .sidebar,
html[data-theme="dark"] body.role-user .sidebar{
  background:var(--mg-sidebar-v816-base)!important;
}
html[data-theme="dark"] body.role-admin .sidebar{background:var(--mg-sidebar-v816-base-deep)!important}

html body .sidebar .side-glow{
  opacity:.62!important;
  background:
    radial-gradient(circle at 16% 3%,var(--mg-role-accent-soft),transparent 31%),
    radial-gradient(circle at 95% 45%,rgba(110,206,238,.10),transparent 38%)!important;
}
html body .sidebar .v697-side-brand{
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.008))!important;
  border-bottom-color:rgba(218,241,249,.13)!important;
}
html body .sidebar .v697-side-brand small{color:#c8e1ec!important}
html body .sidebar .v697-side-brand em{color:#98bfce!important}
html body .sidebar .nav-section span{color:#8eb6c7!important}
html body .sidebar .nav-section i{background:linear-gradient(90deg,rgba(189,226,239,.16),transparent)!important}

html body .sidebar .nav-item,
html body .sidebar .nav-button,
html body .sidebar .v697-side-services>summary,
html body .sidebar .v697-service-subnav a,
html body .sidebar .side-service-accordion>summary,
html body .sidebar .premium-all-services{
  color:#f6fbff!important;
}
html body .sidebar .nav-ico{
  background:rgba(255,255,255,.075)!important;
  border-color:rgba(255,255,255,.095)!important;
  color:#e4f6ff!important;
}
html body .sidebar .nav-item:hover,
html body .sidebar .nav-button:hover,
html body .sidebar .v697-side-services>summary:hover,
html body .sidebar .side-service-accordion>summary:hover,
html body .sidebar .premium-all-services:hover{
  background:rgba(255,255,255,.085)!important;
  border-color:rgba(255,255,255,.11)!important;
  box-shadow:inset 3px 0 0 var(--mg-role-accent)!important;
  color:#fff!important;
}

/* Active state is consistent; accent alone identifies the role. */
html body .sidebar .nav-item.active,
html body:not(.role-admin) .sidebar .nav-item.active,
html body:not(.role-admin) .sidebar .v697-side-services[open]>summary{
  background:linear-gradient(110deg,#f9fdff 0%,#edf8fc 100%)!important;
  color:var(--mg-role-active-text)!important;
  border-color:rgba(220,239,247,.96)!important;
  box-shadow:0 7px 16px rgba(3,33,51,.16),inset 4px 0 0 var(--mg-role-accent)!important;
}
html body .sidebar .nav-item.active .nav-ico,
html body .sidebar .v697-side-services[open]>summary .nav-ico{
  background:#fff!important;
  border-color:color-mix(in srgb,var(--mg-role-accent) 24%,#d7e8ef)!important;
  color:var(--mg-role-active-text)!important;
}
html body .sidebar .nav-badge{
  background:var(--mg-role-accent)!important;
  color:#082131!important;
  border-color:rgba(255,255,255,.28)!important;
}
html body .sidebar .side-service-accordion[open]>summary{
  background:var(--mg-role-accent-soft)!important;
  border-color:color-mix(in srgb,var(--mg-role-accent) 35%,transparent)!important;
}
html body .sidebar .v697-service-subnav a:hover{background:var(--mg-role-accent-soft)!important;color:#fff!important}
html body .sidebar .side-footer,
html body:not(.role-admin) .sidebar .side-footer{
  background:linear-gradient(180deg,rgba(5,45,66,.18),rgba(4,37,57,.82))!important;
  border-top-color:rgba(207,237,247,.13)!important;
}
html body .sidebar .side-tool,
html body .sidebar .side-logout-row{
  background:rgba(255,255,255,.06)!important;
  border-color:rgba(255,255,255,.12)!important;
  color:#f5fbff!important;
}
html body .sidebar .side-tool:hover,
html body .sidebar .side-logout-row:hover{
  background:rgba(255,255,255,.105)!important;
  border-color:color-mix(in srgb,var(--mg-role-accent) 34%,rgba(255,255,255,.12))!important;
}
html body .sidebar .side-tool b{background:var(--mg-role-accent-soft)!important;color:#fff!important}

/* =====================================================================
   V8.2.0 · FINAL PORTAL STANDARDIZATION
   Unified production visual contract across Admin + network + user roles.
   Preserves V8.1.6 role accents and account-isolated appearance settings.
   ===================================================================== */
:root{
  --mg-ui-card-radius:16px;
  --mg-ui-control-radius:11px;
  --mg-ui-control-h:42px;
  --mg-ui-border:#d9e7ee;
  --mg-ui-shadow:0 10px 28px rgba(7,50,72,.08);
  --mg-ui-text:#0b3248;
  --mg-ui-muted:#67808f;
  --mg-ui-surface:#ffffff;
  --mg-ui-soft:#f6fafc;
}
html body .main .panel,
html body .main .stat-card,
html body .main .service-card,
html body .main .admin-builder-card,
html body .main .admin-builder-form{
  border-radius:var(--mg-ui-card-radius)!important;
  border:1px solid var(--mg-ui-border)!important;
  box-shadow:var(--mg-ui-shadow)!important;
}
html body .main .btn{
  min-height:var(--mg-ui-control-h)!important;
  border-radius:var(--mg-ui-control-radius)!important;
  padding:9px 15px!important;
  font-size:12px!important;
  font-weight:850!important;
  letter-spacing:-.005em!important;
  align-items:center!important;
  justify-content:center!important;
}
html body .main input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
html body .main select,
html body .main textarea{
  border-radius:var(--mg-ui-control-radius)!important;
  border-color:#cfdee6!important;
  min-height:var(--mg-ui-control-h)!important;
  font-size:13px!important;
}
html body .main textarea{min-height:96px!important}
html body .main table{border-collapse:separate!important;border-spacing:0!important}
html body .main th{font-size:10px!important;letter-spacing:.04em!important;text-transform:uppercase!important;color:#516f7f!important;background:#edf6fa!important}
html body .main td{font-size:12px!important;color:var(--mg-ui-text)!important}
html body .main .notice{border-radius:12px!important;padding:12px 14px!important}
html body .main .chip{border-radius:999px!important;font-size:9px!important;font-weight:900!important}

/* Admin service management is the canonical management surface. */
html body .admin-service-studio .panel,
html body .admin-form-studio .panel{background:var(--mg-ui-surface)!important}
html body .admin-service-studio .content,
html body .admin-form-studio .content{max-width:1540px!important;margin:0 auto!important}
html body .admin-service-hero{background:linear-gradient(118deg,#0a3852 0%,#0e6e83 55%,#3157c8 100%)!important;color:#fff!important;border:0!important}
html body .admin-service-hero h2,
html body .admin-service-hero p{color:#fff!important}
html body .admin-service-kpis>div{border-radius:14px!important;border:1px solid #d7e6ed!important;box-shadow:0 7px 20px rgba(8,51,73,.06)!important}
html body .admin-dynamic-service-card{border-radius:16px!important;border:1px solid #d7e5ec!important;box-shadow:0 9px 24px rgba(6,47,68,.075)!important;overflow:hidden!important}
html body .admin-dynamic-service-card:hover{transform:translateY(-2px)!important;box-shadow:0 14px 32px rgba(6,47,68,.12)!important}
html body .admin-service-actions .btn{flex:1 1 145px!important}
html body .admin-service-runtime-panel{margin-bottom:16px!important}
html body .admin-service-runtime-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:10px!important;margin:12px 0!important}
html body .admin-service-runtime-grid>div{padding:12px 13px!important;border-radius:12px!important;background:#f5fafc!important;border:1px solid #dbe9ef!important;min-width:0!important}
html body .admin-service-runtime-grid small{display:block!important;font-size:8.5px!important;font-weight:900!important;color:#718995!important;letter-spacing:.08em!important}
html body .admin-service-runtime-grid b{display:block!important;margin-top:4px!important;font-size:12px!important;color:#103a51!important;overflow-wrap:anywhere!important}

/* Keep service cards and detail surfaces visually aligned across roles. */
html body .service-card,
html body [class*="service-card"]{transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease!important}
html body .service-card:hover{transform:translateY(-2px)!important}
html body .service-card .btn{min-height:38px!important}
html body .service-detail-hero,
html body .application-hero{border-radius:18px!important;overflow:hidden!important}

/* Dark mode remains readable without changing sidebar identity. */
html[data-theme="dark"] body .main .panel,
html[data-theme="dark"] body .main .admin-builder-card,
html[data-theme="dark"] body .main .admin-builder-form{border-color:rgba(162,199,218,.16)!important}
html[data-theme="dark"] body .admin-service-runtime-grid>div{background:rgba(255,255,255,.045)!important;border-color:rgba(255,255,255,.09)!important}
html[data-theme="dark"] body .admin-service-runtime-grid small{color:#91adbb!important}
html[data-theme="dark"] body .admin-service-runtime-grid b{color:#eef8fc!important}

@media(max-width:900px){
  html body .admin-service-runtime-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  html body .admin-service-actions form{display:flex!important;flex-wrap:wrap!important;gap:7px!important}
}
@media(max-width:560px){
  html body .admin-service-runtime-grid{grid-template-columns:1fr!important}
  html body .main .btn{min-height:40px!important;padding:8px 12px!important}
  html body .admin-service-studio .content,
  html body .admin-form-studio .content{padding-left:10px!important;padding-right:10px!important}
}
html body .admin-builder-form .is-contract-locked{pointer-events:none!important;opacity:.78!important;filter:saturate(.78)!important}

/* =====================================================================
   V8.2.2 · SIDEBAR VISIBILITY + BRAND UNIFICATION POLISH
   Inspired by the user's reference: more visible, premium, role-aware,
   but still original to the MG Print Portal brand system.
   ===================================================================== */
:root{
  --mg-v822-sidebar-bg:linear-gradient(180deg,#071b2f 0%,#0a2943 52%,#092238 100%);
  --mg-v822-sidebar-admin:linear-gradient(180deg,#061a2c 0%,#0a2740 56%,#081f34 100%);
  --mg-v822-panel:rgba(255,255,255,.038);
  --mg-v822-panel-hover:rgba(255,255,255,.082);
  --mg-v822-panel-border:rgba(207,232,245,.09);
  --mg-v822-text:#f6fbff;
  --mg-v822-muted:#9cb7c9;
  --mg-v822-line:rgba(191,221,235,.12);
}
html body.role-admin .sidebar,
html body.role-master_distributor .sidebar,
html body.role-super_distributor .sidebar,
html body.role-distributor .sidebar,
html body.role-retailer .sidebar,
html body.role-user .sidebar{
  width:266px!important;
  background:var(--mg-v822-sidebar-bg)!important;
  border-right:1px solid rgba(169,208,227,.13)!important;
  box-shadow:18px 0 42px rgba(2,17,29,.26)!important;
}
html body.role-admin .sidebar{background:var(--mg-v822-sidebar-admin)!important}
html body .main{margin-left:266px!important}
html body .sidebar .side-glow{
  background:
    radial-gradient(circle at 10% 0%,rgba(255,255,255,.09),transparent 28%),
    radial-gradient(circle at 90% 10%,var(--mg-role-accent-soft),transparent 26%),
    linear-gradient(180deg,transparent,transparent)!important;
  opacity:.95!important;
}
html body .sidebar .v697-side-brand{
  min-height:108px!important;
  height:auto!important;
  align-items:flex-start!important;
  padding:18px 18px 16px!important;
  gap:13px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015))!important;
  border-bottom:1px solid var(--mg-v822-line)!important;
}
html body .sidebar .v697-side-brand img{
  width:50px!important;height:44px!important;object-fit:contain!important;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.24))!important;
}
html body .sidebar .v697-side-brand span{display:grid!important;gap:3px!important;min-width:0!important}
html body .sidebar .v697-side-brand b{
  color:#fff!important;font-size:17px!important;line-height:1.05!important;
  font-weight:900!important;letter-spacing:-.02em!important;
}
html body .sidebar .v697-side-brand small{
  color:#d3e5ef!important;font-size:9.4px!important;line-height:1.28!important;
  max-width:150px!important;
}
html body .sidebar .v697-side-brand em{
  display:inline-flex!important;align-items:center!important;gap:6px!important;
  width:max-content!important;margin-top:3px!important;padding:4px 10px!important;
  border-radius:999px!important;background:rgba(255,255,255,.065)!important;
  border:1px solid rgba(255,255,255,.08)!important;color:#9ec6d6!important;
  font-size:8px!important;font-weight:900!important;letter-spacing:.18em!important;
}
html body .sidebar>nav{
  padding:14px 12px 16px!important;
  scrollbar-width:thin!important;
  scrollbar-color:rgba(202,232,244,.28) transparent!important;
}
html body .sidebar>nav::-webkit-scrollbar{width:5px!important}
html body .sidebar>nav::-webkit-scrollbar-thumb{background:rgba(214,239,248,.25)!important;border-radius:999px!important}
html body .sidebar .nav-section{
  display:flex!important;align-items:center!important;gap:10px!important;
  margin:15px 8px 10px!important;
}
html body .sidebar .nav-section span{
  color:var(--mg-v822-muted)!important;font-size:10px!important;font-weight:900!important;
  letter-spacing:.18em!important;white-space:nowrap!important;
}
html body .sidebar .nav-section i{
  flex:1 1 auto!important;height:1px!important;
  background:linear-gradient(90deg,rgba(182,217,232,.18),transparent)!important;
}
html body .sidebar .nav-item,
html body .sidebar .nav-button,
html body .sidebar .v697-side-services>summary{
  min-height:52px!important;
  padding:12px 14px!important;
  border-radius:15px!important;
  border:1px solid var(--mg-v822-panel-border)!important;
  background:var(--mg-v822-panel)!important;
  color:var(--mg-v822-text)!important;
  box-shadow:none!important;
  margin-bottom:8px!important;
  gap:12px!important;
}
html body .sidebar .nav-item:hover,
html body .sidebar .nav-button:hover,
html body .sidebar .v697-side-services>summary:hover,
html body .sidebar .side-service-accordion>summary:hover,
html body .sidebar .premium-all-services:hover,
html body .sidebar .v697-service-subnav a:hover{
  background:var(--mg-v822-panel-hover)!important;
  border-color:rgba(223,243,252,.13)!important;
  transform:translateX(0)!important;
  color:#fff!important;
}
html body .sidebar .nav-item.active,
html body:not(.role-admin) .sidebar .nav-item.active,
html body:not(.role-admin) .sidebar .v697-side-services[open]>summary{
  background:linear-gradient(180deg,#f9fdff 0%,#edf6fb 100%)!important;
  border-color:#e1edf2!important;
  color:#0b3350!important;
  box-shadow:0 12px 26px rgba(1,16,32,.22), inset 4px 0 0 var(--mg-role-accent)!important;
}
html body .sidebar .nav-label{font-size:14px!important;font-weight:850!important;letter-spacing:-.015em!important}
html body .sidebar .nav-ico{
  width:34px!important;height:34px!important;min-width:34px!important;
  border-radius:10px!important;background:rgba(255,255,255,.06)!important;
  border:1px solid rgba(255,255,255,.075)!important;color:#fff3c7!important;
}
html body .sidebar .nav-ico svg{width:16px!important;height:16px!important;max-width:16px!important;max-height:16px!important}
html body .sidebar .nav-item.active .nav-ico,
html body .sidebar .v697-side-services[open]>summary .nav-ico{
  background:#fff!important;border-color:#dde9ef!important;color:#11354f!important;
}
html body .sidebar .nav-badge{
  min-width:22px!important;height:22px!important;padding:0 6px!important;
  background:var(--mg-role-accent)!important;color:#0a2130!important;font-size:10px!important;
  font-weight:900!important;border:1px solid rgba(255,255,255,.26)!important;
}
html body .sidebar .v697-side-services>summary i,
html body .sidebar .side-accordion-chevron,
html body .sidebar .premium-all-services i,
html body .sidebar .v697-nav-arrow{color:#b6d0de!important;font-style:normal!important;font-weight:900!important}
html body .sidebar .v697-service-subnav{
  padding:4px 0 8px 16px!important;display:grid!important;gap:8px!important;
}
html body .sidebar .v697-service-subnav a{
  min-height:42px!important;padding:10px 12px!important;border-radius:13px!important;
  display:flex!important;align-items:center!important;gap:10px!important;
  border:1px solid rgba(255,255,255,.06)!important;background:rgba(255,255,255,.03)!important;
  color:#e8f6ff!important;font-size:13px!important;font-weight:780!important;
}
html body .sidebar .v697-service-subnav a i{
  width:20px!important;height:20px!important;border-radius:999px!important;display:grid!important;place-items:center!important;
  background:rgba(255,255,255,.06)!important;color:#f3d688!important;font-style:normal!important;flex:0 0 auto!important;
}
html body .sidebar .side-service-accordion>summary,
html body .sidebar .premium-all-services{
  min-height:48px!important;
  padding:10px 12px!important;border-radius:14px!important;
  background:rgba(255,255,255,.035)!important;
  border:1px solid rgba(255,255,255,.08)!important;color:#f6fbff!important;
}
html body .sidebar .side-service-accordion[open]>summary{
  background:rgba(255,255,255,.09)!important;
  border-color:rgba(255,255,255,.13)!important;
  box-shadow:inset 3px 0 0 var(--mg-role-accent)!important;
}
html body .sidebar .side-accordion-copy b,
html body .sidebar .premium-all-services b{font-size:12.5px!important;letter-spacing:-.01em!important;color:#fff!important}
html body .sidebar .side-accordion-copy small,
html body .sidebar .premium-all-services small{font-size:8.4px!important;line-height:1.25!important;color:#afcada!important}
html body .sidebar .side-footer{
  padding:12px!important;gap:8px!important;
  border-top:1px solid var(--mg-v822-line)!important;
  background:linear-gradient(180deg,rgba(8,30,47,.26),rgba(5,23,38,.86))!important;
}
html body .sidebar .side-tool,
html body .sidebar .side-logout-row{
  min-height:44px!important;height:44px!important;padding:0 14px!important;
  border-radius:12px!important;border:1px solid rgba(255,255,255,.095)!important;
  background:rgba(255,255,255,.04)!important;color:#f7fbff!important;
}
html body .sidebar .side-tool span,
html body .sidebar .side-logout-row span{font-size:13px!important;font-weight:820!important}
html body .sidebar .side-tool b{
  background:rgba(255,255,255,.08)!important;color:#fff!important;border:1px solid rgba(255,255,255,.09)!important;
  font-size:8.5px!important;padding:3px 8px!important;
}
html body .sidebar .side-tool:hover,
html body .sidebar .side-logout-row:hover{
  background:rgba(255,255,255,.09)!important;
  border-color:rgba(255,255,255,.16)!important;
}
/* Slight role difference: user/network roles are a touch brighter than admin. */
html body.role-admin .sidebar .v697-side-brand{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.012))!important}
html body:not(.role-admin) .sidebar .v697-side-brand{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02))!important}
html body:not(.role-admin) .sidebar .nav-item,
html body:not(.role-admin) .sidebar .nav-button,
html body:not(.role-admin) .sidebar .v697-side-services>summary,
html body:not(.role-admin) .sidebar .v697-service-subnav a{background:rgba(255,255,255,.045)!important}
@media(max-width:980px){
  html body .sidebar{width:min(274px,88vw)!important}
  html body .main{margin-left:0!important}
  html body .sidebar .v697-side-brand{min-height:100px!important;padding:18px 16px 14px!important}
  html body .sidebar .nav-item,
  html body .sidebar .nav-button,
  html body .sidebar .v697-side-services>summary{min-height:50px!important}
}

/* =====================================================================
   V8.2.3 · REFERENCE-STYLE SIDEBAR REFINEMENT
   Goal: closer to the user's reference — cleaner stacked menu, deeper navy,
   stronger readability, less cardy noise, premium but not copied.
   ===================================================================== */
:root{
  --mg-v823-sidebar:#071d33;
  --mg-v823-sidebar-admin:#06192b;
  --mg-v823-sidebar-soft:#0b2742;
  --mg-v823-line:rgba(194,223,238,.11);
  --mg-v823-text:#f8fbff;
  --mg-v823-muted:#91aabd;
}
html body.role-admin .sidebar,
html body.role-master_distributor .sidebar,
html body.role-super_distributor .sidebar,
html body.role-distributor .sidebar,
html body.role-retailer .sidebar,
html body.role-user .sidebar{
  width:278px!important;
  background:linear-gradient(180deg,var(--mg-v823-sidebar) 0%,#08233a 52%,#081f33 100%)!important;
  box-shadow:16px 0 36px rgba(0,10,20,.28)!important;
  border-right:1px solid rgba(255,255,255,.06)!important;
}
html body.role-admin .sidebar{
  background:linear-gradient(180deg,var(--mg-v823-sidebar-admin) 0%,#0a2740 60%,#081c2f 100%)!important;
}
html body .main{margin-left:278px!important}
html body .sidebar .side-glow{opacity:.65!important}
html body .sidebar .v697-side-brand{
  min-height:98px!important;
  padding:18px 16px 14px!important;
  gap:12px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.018),rgba(255,255,255,.008))!important;
  border-bottom:1px solid var(--mg-v823-line)!important;
}
html body .sidebar .v697-side-brand img{width:52px!important;height:42px!important}
html body .sidebar .v697-side-brand b{font-size:15px!important;font-weight:900!important;color:#ffffff!important}
html body .sidebar .v697-side-brand small{font-size:9px!important;line-height:1.2!important;color:#d8e8f1!important;max-width:150px!important}
html body .sidebar .v697-side-brand em{
  margin-top:4px!important;padding:0!important;border:none!important;background:transparent!important;
  color:#8eb0c1!important;font-size:9px!important;letter-spacing:.16em!important;font-weight:900!important;
}
html body .sidebar>nav{padding:12px 10px 14px!important}
html body .sidebar .nav-section{margin:12px 8px 8px!important;gap:8px!important}
html body .sidebar .nav-section span{
  color:#7f9ab0!important;font-size:10px!important;letter-spacing:.17em!important;font-weight:900!important;
}
html body .sidebar .nav-section i{background:linear-gradient(90deg,rgba(181,214,228,.16),transparent)!important}

/* Main nav: flatter like the reference. */
html body .sidebar .nav-item,
html body .sidebar .nav-button,
html body .sidebar .v697-side-services>summary{
  min-height:54px!important;
  padding:13px 15px!important;
  border-radius:15px!important;
  border:1px solid transparent!important;
  background:transparent!important;
  color:var(--mg-v823-text)!important;
  margin-bottom:6px!important;
  box-shadow:none!important;
}
html body .sidebar .nav-item:hover,
html body .sidebar .nav-button:hover,
html body .sidebar .v697-side-services>summary:hover,
html body .sidebar .side-service-accordion>summary:hover,
html body .sidebar .premium-all-services:hover,
html body .sidebar .v697-service-subnav a:hover{
  background:rgba(255,255,255,.04)!important;
  border-color:rgba(255,255,255,.03)!important;
  box-shadow:none!important;
}
html body .sidebar .nav-item.active,
html body:not(.role-admin) .sidebar .nav-item.active,
html body:not(.role-admin) .sidebar .v697-side-services[open]>summary{
  background:linear-gradient(180deg,#123c67 0%,#13436f 100%)!important;
  color:#ffffff!important;
  border:1px solid rgba(255,255,255,.05)!important;
  box-shadow:inset 4px 0 0 var(--mg-role-accent), 0 7px 16px rgba(0,0,0,.18)!important;
}
html body .sidebar .nav-label{font-size:14px!important;font-weight:850!important;line-height:1.06!important;letter-spacing:-.01em!important}
html body .sidebar .nav-ico{
  width:30px!important;height:30px!important;min-width:30px!important;
  border-radius:10px!important;background:rgba(255,255,255,.035)!important;
  border:1px solid rgba(255,255,255,.05)!important;color:#ffe6a1!important;
}
html body .sidebar .nav-ico svg{width:15px!important;height:15px!important}
html body .sidebar .nav-item.active .nav-ico,
html body .sidebar .v697-side-services[open]>summary .nav-ico{
  background:rgba(255,255,255,.08)!important;border-color:rgba(255,255,255,.08)!important;color:#fff2b8!important;
}
html body .sidebar .nav-badge{
  min-width:19px!important;height:19px!important;padding:0 5px!important;font-size:9px!important;
  background:#21d38a!important;color:#062436!important;border:none!important;box-shadow:0 0 0 3px rgba(8,29,49,.85)!important;
}
html body .sidebar .v697-side-services>summary i,
html body .sidebar .side-accordion-chevron,
html body .sidebar .premium-all-services i,
html body .sidebar .v697-nav-arrow{color:#a3bdd0!important}
html body .sidebar .v697-service-subnav{padding:3px 0 8px 24px!important;gap:6px!important}
html body .sidebar .v697-service-subnav a{
  min-height:42px!important;padding:10px 12px!important;border-radius:12px!important;
  background:rgba(255,255,255,.025)!important;border:1px solid rgba(255,255,255,.03)!important;
  color:#eaf7ff!important;font-size:13px!important;font-weight:760!important;
}
html body .sidebar .v697-service-subnav a i{
  width:18px!important;height:18px!important;background:rgba(255,255,255,.05)!important;color:#ffe39b!important;
}
html body .sidebar .side-service-accordion>summary,
html body .sidebar .premium-all-services{
  background:rgba(255,255,255,.025)!important;
  border:1px solid rgba(255,255,255,.04)!important;
  min-height:46px!important;border-radius:13px!important;
}
html body .sidebar .side-service-accordion[open]>summary{
  background:rgba(255,255,255,.055)!important;
  border-color:rgba(255,255,255,.06)!important;
}
html body .sidebar .side-accordion-copy b,
html body .sidebar .premium-all-services b{font-size:12px!important;color:#fff!important}
html body .sidebar .side-accordion-copy small,
html body .sidebar .premium-all-services small{font-size:8px!important;color:#9ab8c8!important}
html body .sidebar .side-footer{
  background:linear-gradient(180deg,rgba(6,28,45,.35),rgba(4,20,34,.96))!important;
  border-top:1px solid var(--mg-v823-line)!important;
  padding:10px!important;gap:8px!important;
}
html body .sidebar .side-tool,
html body .sidebar .side-logout-row{
  min-height:44px!important;height:44px!important;border-radius:12px!important;
  background:rgba(255,255,255,.028)!important;border:1px solid rgba(255,255,255,.06)!important;color:#f8fbff!important;
}
html body .sidebar .side-tool:hover,
html body .sidebar .side-logout-row:hover{background:rgba(255,255,255,.065)!important;border-color:rgba(255,255,255,.10)!important}
html body .sidebar .side-tool b{background:rgba(255,255,255,.085)!important;color:#ffffff!important;font-size:8px!important}

/* Slight role distinction without changing the family look. */
html body:not(.role-admin) .sidebar .nav-item.active,
html body:not(.role-admin) .sidebar .v697-side-services[open]>summary{
  background:linear-gradient(180deg,#103d63 0%,#11486a 100%)!important;
}

@media(max-width:980px){
  html body .sidebar{width:min(286px,88vw)!important}
  html body .main{margin-left:0!important}
}

/* =====================================================================
   V8.2.4 · SIDEBAR STABILITY + ROLE-SPECIFIC PREMIUM TONE
   Admin = heavier professional; network/user = softer premium.
   The main nav remains fully usable while service categories scroll inside
   their own bounded area, preventing the sidebar from feeling stuck.
   ===================================================================== */
html body .sidebar{
  overflow:hidden!important;
  height:100dvh!important;
  min-height:100vh!important;
}
html body .sidebar>nav{
  flex:1 1 auto!important;
  min-height:0!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain!important;
  scroll-behavior:auto!important;
  scrollbar-gutter:stable!important;
}
html body .sidebar .side-footer{
  flex:0 0 auto!important;
  position:relative!important;
  z-index:3!important;
}

/* User/network: keep Services useful without pushing Applications/Wallet/Reports off-screen. */
html body:not(.role-admin) .sidebar .v697-service-subnav{
  max-height:250px!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain!important;
  scrollbar-width:thin!important;
  scrollbar-color:rgba(200,230,243,.24) transparent!important;
  padding-right:4px!important;
}
html body:not(.role-admin) .sidebar .v697-service-subnav::-webkit-scrollbar{width:4px!important}
html body:not(.role-admin) .sidebar .v697-service-subnav::-webkit-scrollbar-thumb{background:rgba(205,234,245,.24)!important;border-radius:999px!important}

/* Admin: reference-style, heavy and professional. Keep the service directory out of the long nav;
   Service Catalog / All Services remains the canonical management entry point. */
html body.role-admin .premium-service-heading,
html body.role-admin .premium-side-search,
html body.role-admin .premium-service-accordions{
  display:none!important;
}
html body.role-admin .premium-all-services{
  margin:10px 0 4px!important;
  min-height:48px!important;
  background:linear-gradient(180deg,rgba(46,111,162,.32),rgba(35,91,138,.24))!important;
  border-color:rgba(134,191,226,.16)!important;
}
html body.role-admin .sidebar{
  background:linear-gradient(180deg,#061627 0%,#08243d 48%,#071d32 100%)!important;
}
html body.role-admin .sidebar .nav-item,
html body.role-admin .sidebar .nav-button{
  min-height:55px!important;
}
html body.role-admin .sidebar .nav-label{font-size:14.2px!important;font-weight:900!important}
html body.role-admin .sidebar .nav-section span{color:#7f9db2!important}
html body.role-admin .sidebar .nav-item.active{
  background:linear-gradient(180deg,#123d67,#134b79)!important;
  box-shadow:inset 4px 0 0 #5bc8ff,0 10px 22px rgba(0,0,0,.20)!important;
}

/* User/network: softer than Admin but visibly in the same MG family. */
html body:not(.role-admin) .sidebar{
  background:linear-gradient(180deg,#0a3047 0%,#0c4a5a 50%,#0b384c 100%)!important;
}
html body:not(.role-admin) .sidebar .v697-side-brand{
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018))!important;
}
html body:not(.role-admin) .sidebar .nav-item,
html body:not(.role-admin) .sidebar .nav-button,
html body:not(.role-admin) .sidebar .v697-side-services>summary{
  color:#f7fcff!important;
}
html body:not(.role-admin) .sidebar .nav-item.active,
html body:not(.role-admin) .sidebar .v697-side-services[open]>summary{
  background:linear-gradient(180deg,#f8fdff,#eef9fb)!important;
  color:#0c3b52!important;
  box-shadow:inset 4px 0 0 var(--mg-role-accent),0 8px 18px rgba(2,28,41,.17)!important;
}

@media(max-height:760px) and (min-width:981px){
  html body .sidebar .v697-side-brand{min-height:84px!important;padding-top:14px!important;padding-bottom:11px!important}
  html body .sidebar .v697-side-brand img{width:46px!important;height:38px!important}
  html body .sidebar .nav-item,
  html body .sidebar .nav-button,
  html body .sidebar .v697-side-services>summary{min-height:48px!important;padding-top:10px!important;padding-bottom:10px!important;margin-bottom:4px!important}
  html body:not(.role-admin) .sidebar .v697-service-subnav{max-height:200px!important}
  html body .sidebar .side-footer{padding:8px!important}
}

/* =====================================================================
   V9.0.0 FINAL ADMIN CONTROL HUB
   ===================================================================== */
html body .sidebar{width:var(--hub-sidebar-width,278px)!important}
html body .main{margin-left:var(--hub-sidebar-width,278px)!important}
html body.role-admin .sidebar{background:linear-gradient(180deg,var(--hub-sidebar-admin-bg,#06192b),#0a2740 60%,#081c2f)!important}
html body:not(.role-admin) .sidebar{background:linear-gradient(180deg,var(--hub-sidebar-network-bg,#0a2943),#0b3551 58%,#09243a)!important}
html body .sidebar .nav-item,html body .sidebar .nav-button,html body .sidebar .v697-side-services>summary{border-radius:var(--hub-item-radius,14px)!important}
html body .sidebar .nav-item.active,html body:not(.role-admin) .sidebar .nav-item.active,html body:not(.role-admin) .sidebar .v697-side-services[open]>summary{background:var(--hub-active-bg,#123c67)!important;box-shadow:inset 4px 0 0 var(--hub-active-accent,#38bdf8),0 8px 18px rgba(0,0,0,.18)!important;color:#fff!important}
html body .main .panel,html body .main .service-card,html body .hub-control-card{border-radius:var(--hub-card-radius,16px)!important}
html body .btn{border-radius:var(--hub-button-radius,11px)!important}
.hub-admin-page .content{max-width:1640px;margin:0 auto}.hub-hero{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:28px 30px;margin-bottom:18px;border-radius:22px;background:linear-gradient(118deg,#071d33 0%,#0b4c68 55%,#3157c8 100%);color:#fff;box-shadow:0 18px 42px rgba(7,39,62,.18)}.hub-hero h2{font-size:30px;margin:5px 0}.hub-hero p{margin:0;max-width:850px;color:#dcefff}.hub-kicker{font-size:9px;letter-spacing:.16em;font-weight:900;color:#9ee6f7}.hub-shield{width:76px;height:76px;border-radius:22px;display:grid;place-items:center;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);font-size:25px;font-weight:950}.hub-control-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:20px}.hub-control-card{display:flex;align-items:flex-start;gap:13px;padding:16px;border:1px solid #d9e7ee;background:#fff;box-shadow:0 9px 26px rgba(7,50,72,.075);min-height:124px;transition:.16s}.hub-control-card:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(7,50,72,.12)}.hub-control-card>div{min-width:0;flex:1}.hub-control-card small{font-size:8px;letter-spacing:.1em;color:#7390a0;font-weight:900}.hub-control-card h3{margin:4px 0 6px;font-size:15px;color:#0a344c}.hub-control-card p{margin:0;font-size:11px;line-height:1.45;color:#6a8290}.hub-control-icon{width:38px;height:38px;min-width:38px;border-radius:11px;display:grid;place-items:center;background:#edf7fb;color:#0d6681;font-weight:900}.hub-control-card>b{color:#7c96a5}.hub-metrics{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-bottom:20px}.hub-metrics>div{padding:16px;border-radius:15px;background:#fff;border:1px solid #d8e6ed}.hub-metrics small{display:block;font-size:8px;letter-spacing:.08em;color:#718995;font-weight:900}.hub-metrics strong{display:block;margin-top:4px;font-size:23px;color:#0d354c}.hub-builder-layout{display:grid;grid-template-columns:330px 1fr;gap:18px}.hub-builder-list{position:sticky;top:90px;align-self:start;max-height:calc(100vh - 120px);overflow:auto}.hub-list{display:grid;gap:7px;margin-top:12px}.hub-list-row{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:11px;border:1px solid #e0ebf0;border-radius:12px}.hub-list-row.active{background:#edf7fb;border-color:#b9dae7}.hub-list-row small{display:block;color:#718995;font-size:9px;margin-top:3px}.hub-check-row{display:flex;gap:16px;flex-wrap:wrap;margin:16px 0}.hub-field-row{display:grid;grid-template-columns:1.1fr 1.3fr 150px 130px 120px;gap:8px;align-items:center;padding:10px;border:1px solid #dce9ef;border-radius:12px;margin-bottom:8px;background:#fbfdfe}.hub-code-editor{width:100%;min-height:420px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12px;line-height:1.5}.hub-inline-form{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:16px}.hub-inline-form input,.hub-inline-form select{min-width:160px}.hub-search-row{display:flex;gap:10px}.hub-search-results{display:grid;gap:8px;margin-top:14px}.hub-search-result{display:flex;justify-content:space-between;align-items:center;padding:12px;border:1px solid #dce8ee;border-radius:12px}.hub-search-result small{color:#718995}.hub-test-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.hub-test-card{padding:15px;border:1px solid #dbe8ee;border-radius:14px;display:grid;gap:8px;background:#fbfdfe}.hub-test-card small{color:#7690a0}.hub-select-row{display:flex;gap:12px;align-items:center}.hub-select-row select{min-width:330px}.hub-filter .search{width:100%}
@media(max-width:1200px){.hub-control-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.hub-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}.hub-builder-layout{grid-template-columns:1fr}.hub-builder-list{position:static;max-height:none}.hub-field-row{grid-template-columns:1fr 1fr}.hub-test-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:980px){html body .main{margin-left:0!important}.hub-control-grid,.hub-metrics,.hub-test-grid{grid-template-columns:1fr 1fr}.hub-hero{padding:22px}.hub-shield{display:none}}
@media(max-width:640px){.hub-control-grid,.hub-metrics,.hub-test-grid{grid-template-columns:1fr}.hub-field-row{grid-template-columns:1fr}.hub-search-row{flex-direction:column}.hub-select-row{align-items:stretch;flex-direction:column}.hub-select-row select{min-width:0;width:100%}}
body[data-hub-density="compact"] .sidebar .nav-item,body[data-hub-density="compact"] .sidebar .nav-button,body[data-hub-density="compact"] .sidebar .v697-side-services>summary{min-height:44px!important;padding-top:9px!important;padding-bottom:9px!important}body[data-hub-density="spacious"] .sidebar .nav-item,body[data-hub-density="spacious"] .sidebar .nav-button,body[data-hub-density="spacious"] .sidebar .v697-side-services>summary{min-height:60px!important;padding-top:15px!important;padding-bottom:15px!important}body[data-hub-sidebar-style="minimal"] .sidebar .nav-item,body[data-hub-sidebar-style="minimal"] .sidebar .nav-button,body[data-hub-sidebar-style="minimal"] .sidebar .v697-side-services>summary{background:transparent!important;border-color:transparent!important}body[data-hub-sidebar-style="cards"] .sidebar .nav-item,body[data-hub-sidebar-style="cards"] .sidebar .nav-button,body[data-hub-sidebar-style="cards"] .sidebar .v697-side-services>summary{background:rgba(255,255,255,.055)!important;border-color:rgba(255,255,255,.08)!important}body[data-hub-button-style="outline"] .main .btn{background:transparent!important;border:1px solid currentColor!important;box-shadow:none!important}body[data-hub-button-style="soft"] .main .btn.primary{background:#e8f4ff!important;color:#155a91!important;box-shadow:none!important}.hub-admin-page a:focus-visible,.hub-admin-page button:focus-visible,.hub-admin-page input:focus-visible,.hub-admin-page select:focus-visible,.hub-admin-page textarea:focus-visible,.sidebar a:focus-visible,.sidebar button:focus-visible{outline:3px solid #67d5f5!important;outline-offset:2px!important}


/* V9.0.1 Admin Tools Search */
html body.role-admin .sidebar .admin-tool-search{position:relative;margin:2px 2px 12px;z-index:8}
html body.role-admin .sidebar .admin-tool-search-box{min-height:46px;display:flex;align-items:center;gap:8px;padding:6px 9px;border-radius:13px;background:rgba(255,255,255,.075);border:1px solid rgba(255,255,255,.11);box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
html body.role-admin .sidebar .admin-tool-search-icon{width:26px;height:26px;display:grid;place-items:center;color:#d9edf8;flex:0 0 auto}
html body.role-admin .sidebar .admin-tool-search-icon svg{width:14px!important;height:14px!important}
html body.role-admin .sidebar .admin-tool-search-box input{min-width:0;flex:1;height:32px!important;min-height:32px!important;padding:0!important;border:0!important;outline:0!important;background:transparent!important;color:#fff!important;font-size:12px!important;font-weight:750!important;box-shadow:none!important}
html body.role-admin .sidebar .admin-tool-search-box input::placeholder{color:#a9c2d0!important}
html body.role-admin .sidebar .admin-tool-search-box kbd{padding:3px 5px;border-radius:6px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08);color:#a8c4d3;font-size:7px;font-weight:900;white-space:nowrap}
html body.role-admin .sidebar .admin-tool-search-results{position:absolute;left:0;right:0;top:51px;max-height:360px;overflow:auto;padding:7px;border-radius:14px;background:#0a253b;border:1px solid rgba(190,221,235,.16);box-shadow:0 18px 42px rgba(0,10,20,.42);z-index:50}
html body.role-admin .sidebar .admin-tool-search-results[hidden]{display:none!important}
html body.role-admin .sidebar .admin-tool-search-result{display:flex;align-items:center;gap:9px;min-height:44px;padding:8px 9px;border-radius:10px;color:#f5fbff;border:1px solid transparent}
html body.role-admin .sidebar .admin-tool-search-result:hover,html body.role-admin .sidebar .admin-tool-search-result.is-first{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.07)}
html body.role-admin .sidebar .admin-tool-search-result>span:nth-child(2){min-width:0;display:grid;gap:2px;flex:1}
html body.role-admin .sidebar .admin-tool-search-result b{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html body.role-admin .sidebar .admin-tool-search-result small{font-size:8px;color:#9fbccc}
html body.role-admin .sidebar .admin-tool-search-result i{font-style:normal;color:#91b7ca}
html body.role-admin .sidebar .admin-tool-result-icon{width:26px;height:26px;display:grid;place-items:center;border-radius:8px;background:rgba(255,255,255,.06);color:#ffe19a}
html body.role-admin .sidebar .admin-tool-search-empty{padding:12px;color:#a9c2d0;font-size:10px;text-align:center}
html body.role-admin .sidebar .admin-tool-featured{display:grid;grid-template-columns:28px 1fr auto;grid-template-rows:auto auto;align-items:center;gap:0 8px;margin-top:7px;padding:8px 9px;border-radius:11px;background:linear-gradient(100deg,rgba(56,189,248,.13),rgba(99,102,241,.10));border:1px solid rgba(125,211,252,.13);color:#f8fcff}
html body.role-admin .sidebar .admin-tool-featured>span{grid-row:1/3;width:28px;height:28px;display:grid;place-items:center;color:#ccefff}
html body.role-admin .sidebar .admin-tool-featured svg{width:14px!important;height:14px!important}
html body.role-admin .sidebar .admin-tool-featured b{font-size:10.5px}
html body.role-admin .sidebar .admin-tool-featured small{font-size:7.5px;color:#a9c8d8}
html body.role-admin .sidebar .admin-tool-featured i{grid-column:3;grid-row:1/3;font-style:normal;color:#9bd5ec}