/* SIMHSYNC interface refinements */
.stage9-full-stack{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:18px!important;align-items:start!important}
.stage9-full-stack>*{min-width:0!important;width:100%!important}
body.role-admin.page-settings .config-grid,
body.role-admin.page-settings .stage9-config-form,
body.role-admin.page-settings .config-stack{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:20px!important;width:100%!important;max-width:none!important}
body.role-admin.page-settings .configuration-section,
body.role-admin.page-settings .stage9-brand-preview{width:100%!important;max-width:none!important}
body.role-admin.page-settings .preview-card{position:static!important}
.stage9-color-control{display:grid;grid-template-columns:72px minmax(0,1fr);gap:10px;align-items:center}
.stage9-color-control input[type=color]{width:72px!important;height:48px!important;padding:4px!important;cursor:pointer}
.stage9-preview-shell{overflow:hidden;border:1px solid var(--simh-border);border-radius:18px;background:var(--preview-surface,#fff);color:var(--preview-text,#17324d);box-shadow:var(--simh-shadow-sm)}
.stage9-preview-header{min-height:64px;padding:14px 18px;display:flex;align-items:center;gap:12px;color:#fff;background:linear-gradient(135deg,var(--preview-header,#145a70),var(--preview-primary,#0f8f87))}
.stage9-preview-header img{width:38px;height:38px;border-radius:10px;object-fit:contain;background:#fff;padding:3px}
.stage9-preview-body{padding:22px}.stage9-preview-body h3{margin:6px 0 8px;color:inherit}.stage9-preview-body p{color:var(--simh-muted)}.stage9-preview-body button{border:0;border-radius:12px;padding:10px 15px;color:#fff;background:var(--preview-primary,#0f8f87);font-weight:800}
.stage9-save-bar{position:sticky;bottom:12px;z-index:20;padding:12px;border:1px solid var(--simh-border);border-radius:15px;background:color-mix(in srgb,var(--simh-surface) 92%,transparent);box-shadow:var(--simh-shadow-sm);backdrop-filter:blur(14px)}
.pagination-size-field{display:flex!important;align-items:center;gap:9px;font-size:12px;font-weight:800;color:var(--simh-muted)}
.pagination-size-field select{min-width:150px}
.dashboard-recent-table-scroll{border:1px solid var(--simh-border);border-radius:16px}.dashboard-recent-table{min-width:980px!important}.dashboard-recent-table code{white-space:nowrap}
.health-card-icon svg,.flow-card-icon svg{width:24px!important;height:24px!important;display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.flow-card-icon{display:inline-flex!important;width:46px!important;height:46px!important;align-items:center!important;justify-content:center!important;border-radius:14px!important;color:#fff!important;background:linear-gradient(135deg,var(--simh-primary),var(--simh-accent))!important}
.site-footer{background:var(--simh-stage9-footer,var(--simh-sidebar))!important;color:rgba(255,255,255,.84)!important}
.playground-grid{grid-template-columns:minmax(0,1fr)!important}
body.role-admin.page-settings .stage6-form-grid{grid-template-columns:minmax(0,1fr)!important}
body.role-admin.page-settings .stage6-field.is-wide{grid-column:1/-1}

/* The fixed desktop bar is the sole visible horizontal scrollbar. The table
   wrappers remain programmatically scrollable and retain normal scrollbars on
   tablets and phones where the fixed bar is disabled. */
@media (min-width:1161px){
  .native-table-scroll,.table-scroll-wrapper,.table-responsive,.responsive-table{scrollbar-width:none!important;-ms-overflow-style:none!important}
  .native-table-scroll::-webkit-scrollbar,.table-scroll-wrapper::-webkit-scrollbar,.table-responsive::-webkit-scrollbar,.responsive-table::-webkit-scrollbar{height:0!important;display:none!important}
}

@media(max-width:760px){
  body.role-admin.page-settings .stage6-form-grid{grid-template-columns:1fr!important}
  .stage9-color-control{grid-template-columns:58px minmax(0,1fr)}
  .stage9-color-control input[type=color]{width:58px!important}
  .stage9-save-bar .btn{width:100%!important}
  .dashboard-recent-table{min-width:860px!important}
}

html[data-theme="dark"] .stage9-preview-shell{border-color:var(--simh-border)}
html[data-theme="dark"] .stage9-save-bar{background:rgba(17,27,45,.92)}


/* Stage 9 Stage 3: dark-mode contrast and cloud navigation polish. */
html[data-theme="dark"] body.simh-app,
html[data-theme="dark"] body.simh-app .app-main,
html[data-theme="dark"] body.simh-app .content-wrap { background:#0b1322!important; color:#eaf2ff!important; }
html[data-theme="dark"] body.simh-app .card,
html[data-theme="dark"] body.simh-app section[class*="panel"],
html[data-theme="dark"] body.simh-app section[class*="control"],
html[data-theme="dark"] body.simh-app .fintech-table-panel,
html[data-theme="dark"] body.simh-app .fintech-table-toolbar { background:#121d31!important; border-color:#2c3d57!important; color:#eaf2ff!important; }
html[data-theme="dark"] body.simh-app input,
html[data-theme="dark"] body.simh-app select,
html[data-theme="dark"] body.simh-app textarea { background:#152238!important; color:#eef5ff!important; border-color:#3b506e!important; }
html[data-theme="dark"] body.simh-app table td,
html[data-theme="dark"] body.simh-app table th { color:#e8f0fc!important; border-color:#2b3c55!important; }
html[data-theme="dark"] body.simh-app table th { background:#17243a!important; }
html[data-theme="dark"] body.simh-app table td { background:#111c2f!important; }
html[data-theme="dark"] body.simh-app .muted,
html[data-theme="dark"] body.simh-app small { color:#aebbd0!important; }
html[data-theme="dark"] body.auth-page .auth-card,
html[data-theme="dark"] body.auth-page .login-card,
html[data-theme="dark"] body.auth-page .customer-auth-card { background:#121d31!important; color:#eef5ff!important; border-color:#2c3d57!important; }
html[data-theme="dark"] body.auth-page label,
html[data-theme="dark"] body.auth-page h1,
html[data-theme="dark"] body.auth-page h2,
html[data-theme="dark"] body.auth-page p { color:#eef5ff!important; }

.side-network-mark{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;flex:0 0 24px;border-radius:50%;font-size:8px;font-weight:900;letter-spacing:-.02em;box-shadow:0 0 0 2px rgba(255,255,255,.13);overflow:hidden}
.side-network-mark.mtn{background:#ffcc00;color:#111}.side-network-mark.glo{background:#159447;color:#fff}.side-network-mark.airtel{background:#e60012;color:#fff}.side-network-mark.t2{background:#84bd00;color:#fff}
.side-nav-tree-nested>.side-nav-tree-toggle{position:relative;overflow:hidden}
.side-nav-tree-nested.is-open>.side-nav-tree-toggle:before{content:"";position:absolute;left:0;top:7px;bottom:7px;width:3px;border-radius:0 4px 4px 0;background:#40d3c7;animation:simhNavGlow .28s ease-out}
.side-nav-tree-category.is-open>.side-nav-tree-toggle{background:rgba(255,255,255,.075)!important;transform:translateX(2px)}
.side-nav-tree-panel{transition:max-height .28s ease,opacity .24s ease,transform .24s ease;transform-origin:top}
.side-nav-tree:not(.is-open)>.side-nav-tree-panel{opacity:0;transform:translateY(-4px)}
.side-nav-tree.is-open>.side-nav-tree-panel{opacity:1;transform:none}
@keyframes simhNavGlow{from{transform:scaleY(.2);opacity:.2}to{transform:scaleY(1);opacity:1}}

/* Stage 3C: small true-circle network marks. */
.app-sidebar .side-network-mark{width:20px!important;height:20px!important;flex:0 0 20px!important;min-width:20px!important;max-width:20px!important;border-radius:50%!important;padding:0!important;font-size:6.5px!important;line-height:20px!important;letter-spacing:-.02em!important;box-shadow:0 0 0 1px rgba(255,255,255,.25)!important}
.app-sidebar .side-network-mark.mtn{font-size:6px!important}
.app-sidebar .side-network-mark.glo{font-size:6px!important}
/* High-contrast dark surfaces across authentication and cloud pages. */
html[data-theme="dark"] .auth-card,html[data-theme="dark"] .login-card,html[data-theme="dark"] .customer-auth-card,
html[data-theme="dark"] .cloud-card,html[data-theme="dark"] .fintech-table-panel,html[data-theme="dark"] .native-panel,
html[data-theme="dark"] .card{color:#eef4ff}
html[data-theme="dark"] .auth-card input,html[data-theme="dark"] .auth-card select,
html[data-theme="dark"] .login-card input,html[data-theme="dark"] .customer-auth-card input,
html[data-theme="dark"] .cloud-card input,html[data-theme="dark"] .cloud-card select{background:#16243a!important;color:#eef4ff!important;border-color:#415878!important}
html[data-theme="dark"] .auth-card label,html[data-theme="dark"] .login-card label,
html[data-theme="dark"] .customer-auth-card label,html[data-theme="dark"] .cloud-card label,
html[data-theme="dark"] .card h1,html[data-theme="dark"] .card h2,html[data-theme="dark"] .card h3,
html[data-theme="dark"] .card strong{color:#eef4ff!important}
html[data-theme="dark"] .muted,html[data-theme="dark"] .card small,html[data-theme="dark"] .card p{color:#b9c6d8!important}


/* Stage 3C final: compact true-circle network logos. */
.app-sidebar .side-nav-tree-toggle .side-network-mark{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  width:22px!important;height:22px!important;min-width:22px!important;max-width:22px!important;
  flex:0 0 22px!important;aspect-ratio:1/1!important;padding:0!important;margin:0 7px 0 0!important;
  border:1px solid rgba(255,255,255,.28)!important;border-radius:50%!important;overflow:hidden!important;
  background:transparent!important;box-shadow:0 2px 7px rgba(0,0,0,.18)!important;
}
.app-sidebar .side-network-mark img{display:block!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:center!important;border-radius:50%!important}

/* Prevent pale decorative cards from hiding text in dark mode. */
html[data-theme="dark"] body.simh-app .auth-form-card,
html[data-theme="dark"] body.simh-app .login-card,
html[data-theme="dark"] body.simh-app .native-panel,
html[data-theme="dark"] body.simh-app .native-panel-head,
html[data-theme="dark"] body.simh-app .fintech-table-panel,
html[data-theme="dark"] body.simh-app .fintech-table-toolbar,
html[data-theme="dark"] body.simh-app [class*="workspace"],
html[data-theme="dark"] body.simh-app [class*="overview"]{
  background-color:#111c2f!important;color:#eef5ff!important;border-color:#30435e!important;
}
html[data-theme="dark"] body.simh-app .auth-form-card h1,
html[data-theme="dark"] body.simh-app .auth-form-card h2,
html[data-theme="dark"] body.simh-app .auth-form-card p,
html[data-theme="dark"] body.simh-app .auth-form-card label,
html[data-theme="dark"] body.simh-app .native-panel h1,
html[data-theme="dark"] body.simh-app .native-panel h2,
html[data-theme="dark"] body.simh-app .native-panel h3,
html[data-theme="dark"] body.simh-app .native-panel td,
html[data-theme="dark"] body.simh-app .native-panel th{color:#eef5ff!important}
html[data-theme="dark"] body.simh-app .native-panel .muted,
html[data-theme="dark"] body.simh-app .auth-form-note{color:#b8c6da!important}

/* Production preference: top-level client workspaces use sharp-edged parent containers.
   Nested action cards keep their own component styling. */
body.simh-app:not(.auth-page) .content-area > .page-title,
body.simh-app:not(.auth-page) .content-area > .card,
body.simh-app:not(.auth-page) .content-area > section.card,
body.simh-app:not(.auth-page) .content-area > .native-panel,
body.simh-app:not(.auth-page) .content-area > section[class*="workspace"],
body.simh-app:not(.auth-page) .content-area > section[class*="overview"],
body.simh-app:not(.auth-page) .content-area > section[class*="status-hero"],
body.simh-app:not(.auth-page) .content-area > section[class*="activation-shell"] > article,
body.simh-app:not(.auth-page) .content-area > section[class*="activation-shell"] > div {
  border-radius: 0 !important;
}