/* NetSapiens Portal – Modern Minimal Theme (FULL v2.7.8-1 baseline included) */
:root { --ns-sidebar-width:260px; --ns-sidebar-bg:#0f172a; --ns-sidebar-text:#ffffff; --ns-sidebar-active-bg: rgba(255,255,255,0.06); --ns-divider:#e5e7eb; --ns-page-bg:#ffffff; --ns-page-text:#111827; --ns-muted-text:#6b7280; --ns-input-bg:#ffffff; --ns-input-border:#d1d5db; --ns-input-border-focus:#9ca3af; --ns-button-bg:#ffffff; --ns-button-border:#d1d5db; --ns-button-text:#374151; --ns-hover:#f9fafb; --ns-content-max:1200px; --footer-height:0px; }
html, body { background: var(--ns-page-bg) !important; color: var(--ns-page-text) !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important; font-size:14px; height:100%; }
#wrapper, #portal, #page { min-height:100vh; }
#navigation { position:fixed !important; top:0; left:0; bottom:0; width:var(--ns-sidebar-width) !important; background:var(--ns-sidebar-bg) !important; color:var(--ns-sidebar-text) !important; overflow-y:auto; -webkit-overflow-scrolling:touch; z-index:100; }
#navigation-subbar { height:0 !important; background:transparent !important; border:0 !important; box-shadow:none !important; }
#main, #container, .container, .container-fluid, #content-wrapper { margin-left: var(--ns-sidebar-width) !important; }
.header, .topbar, #header, .portal-header { position:sticky; top:0; z-index:90; background:var(--ns-page-bg) !important; color:var(--ns-page-text) !important; border-bottom:1px solid var(--ns-divider) !important; margin-left: var(--ns-sidebar-width) !important; }
#content { margin-left: var(--ns-sidebar-width) !important; padding: 16px 24px !important; display:block; }
/* Global left alignment */
#content > .ns-centered, #content > .page, #content > .container, #content > .container-fluid, #content > div:first-child { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
#content .container, #content .container-fluid { margin-left: 0 !important; margin-right: 0 !important; }
#navigation::before { content:'Navigation'; display:block; padding:16px 14px 8px 14px; color:#ffffff; font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size:20px; font-weight:600; letter-spacing:0; text-transform:none; opacity:.95; }
.header .logo, .topbar .logo, #header .logo, .portal-header .logo, .header .navbar-brand, .topbar .navbar-brand, #header .navbar-brand, .portal-header .navbar-brand, .header img[src*='netsapiens' i], .topbar img[src*='netsapiens' i], #header img[src*='netsapiens' i], .portal-header img[src*='netsapiens' i] { display:none !important; }
.navigation-title, .page-title, #content h1:first-child, #content h1, #content .page-header h1, .portal-title, #content .title, #content .section-title { color: var(--ns-sidebar-bg) !important; }
.nav-tabs > li.active > a, .tabs > li.active > a, ul.tabs > li.active > a { color: var(--ns-sidebar-bg) !important; }
#nav-buttons { padding:8px 10px 18px 10px !important; }
#navigation .nav-bg-image { display:none !important; }
#nav-buttons a.nav-link { display:flex !important; align-items:center !important; gap:10px !important; color:var(--ns-sidebar-text) !important; text-decoration:none !important; padding:10px 12px !important; border-radius:8px !important; min-height:44px; }
#nav-buttons a.nav-link .nav-text { display:inline-flex !important; align-items:center !important; margin:0 !important; padding:0 !important; line-height:1.2 !important; color:var(--ns-sidebar-text) !important; }
#nav-buttons a.nav-link:hover { background: rgba(255,255,255,0.08) !important; }
#nav-buttons li.nav-link-current > a.nav-link, #nav-buttons a.nav-link.active { background: var(--ns-sidebar-active-bg) !important; }
#navigation .nav-arrow { display:none !important; }
#nav-buttons a.nav-link .nav-button.btn { width:28px !important; height:28px !important; border-radius:0 !important; background:none !important; box-shadow:none !important; border:none !important; display:inline-flex !important; align-items:center; justify-content:center; flex:0 0 28px; }
#nav-home a.nav-link .nav-button.btn, #nav-home-super a.nav-link .nav-button.btn { background-image:url('https://files.sbvoice.com.au/omp/icon-home.jpg') !important; background-repeat:no-repeat !important; background-position:center !important; background-size:20px 20px !important; }
#nav-resellers a.nav-link .nav-button.btn { background:center/20px 20px no-repeat url('https://files.sbvoice.com.au/omp/icon-resellers.jpg') !important; }
#nav-domains a.nav-link .nav-button.btn { background:center/20px 20px no-repeat url('https://files.sbvoice.com.au/omp/icon-domains.jpg') !important; }
#nav-siptrunks a.nav-link .nav-button.btn { background:center/20px 20px no-repeat url('https://files.sbvoice.com.au/omp/icon-siptrunks.jpg') !important; }
#nav-inventory a.nav-link .nav-button.btn { background:center/20px 20px no-repeat url('https://files.sbvoice.com.au/omp/icon-inventory.jpg') !important; }
#nav-callhistory a.nav-link .nav-button.btn { background:center/20px 20px no-repeat url('https://files.sbvoice.com.au/omp/icon-callhistory.jpg') !important; }
#nav-uiconfigs a.nav-link .nav-button.btn { background:center/20px 20px no-repeat url('https://files.sbvoice.com.au/omp/icon-platformsettings.jpg') !important; }
#nav-users a.nav-link .nav-button.btn { background:center/20px 20px no-repeat url('https://files.sbvoice.com.au/omp/icon-users.jpg') !important; }
#nav-autoattendants a.nav-link .nav-button.btn { background:center/20px 20px no-repeat url('https://files.sbvoice.com.au/omp/icon-autoattendants.jpg') !important; }
#nav-callqueues a.nav-link .nav-button.btn { background:center/20px 20px no-repeat url('https://files.sbvoice.com.au/omp/icon-callqueues.jpg') !important; }
#nav-timeframes a.nav-link .nav-button.btn { background:center/20px 20px no-repeat url('https://files.sbvoice.com.au/omp/icon-timeframes.jpg') !important; }
#nav-musiconhold a.nav-link .nav-button.btn { background:center/20px 20px no-repeat url('https://files.sbvoice.com.au/omp/icon-musiconhold.jpg') !important; }
input[type='text'], input[type='search'], input[type='email'], input[type='number'], select, textarea, .form-control { background: var(--ns-input-bg) !important; border:1px solid var(--ns-input-border) !important; color: var(--ns-page-text) !important; border-radius:8px !important; height:36px !important; padding:6px 10px !important; box-shadow:none !important; }
input::placeholder, textarea::placeholder { color: var(--ns-muted-text) !important; }
input:focus, select:focus, textarea:focus, .form-control:focus { outline:none !important; border-color: var(--ns-input-border-focus) !important; box-shadow: 0 0 0 3px rgba(156,163,175,0.25) !important; }
.btn, button, .button { background: var(--ns-button-bg) !important; border:1px solid var(--ns-button-border) !important; color: var(--ns-button-text) !important; border-radius:8px !important; padding:8px 12px !important; line-height:1.2 !important; box-shadow:none !important; }
.btn:hover, button:hover, .button:hover { background: var(--ns-hover) !important; }
.btn-primary, .btn.btn-primary { background:#111827 !important; border-color:#111827 !important; color:#fff !important; }
.btn-primary:hover { background:#0b1220 !important; border-color:#0b1220 !important; }
#content table { width:100%; border-collapse:separate !important; border-spacing:0 !important; }
#content thead th { background:#f7f8fa !important; color: var(--ns-muted-text) !important; font-weight:600 !important; font-size:12px !important; letter-spacing:.02em !important; text-transform:uppercase !important; border-bottom:1px solid var(--ns-divider) !important; padding:10px 12px !important; }
#content tbody td { padding:10px 12px !important; border-bottom:1px solid var(--ns-divider) !important; }
#content tbody tr:hover { background: var(--ns-hover) !important; }
#content td .nsicon, #content td i[class^='nsicon-'] { color:#9aa0a6 !important; opacity:.9 !important; }
#content td .nsicon:hover { color:#6b7280 !important; }
#content { display: block !important; }
.row::after, .row-fluid::after, .dashboard::after, .home-widgets::after, #content > .container::after, #content > .container-fluid::after { content:"" !important; display:block !important; clear:both !important; }
.panel, .card, .box { position:relative !important; display:flow-root !important; margin-bottom:16px !important; overflow:visible !important; margin-top:max(0px, var(--panel-top-offset, 0px)) !important; }
#content svg, #content canvas, #content img.chart, #content .chart, #content .hc-chart, #content .highcharts-container { max-width:100% !important; height:auto !important; display:block !important; }
#content > * + * { margin-top: 12px; }
/* Home-specific rules retained */
.home-panel-main.reseller-home.container-fluid { max-width:none !important; margin-left:0 !important; margin-right:0 !important; display:flow-root !important; position:relative !important; width:100% !important; box-sizing:border-box !important; }
.home-panel-main.reseller-home.container-fluid > .row, .home-panel-main.reseller-home.container-fluid > .panel, .home-panel-main.reseller-home.container-fluid > .card, .home-panel-main.reseller-home.container-fluid > .box, .home-panel-main.reseller-home.container-fluid > div { margin-left:0 !important; margin-right:0 !important; }
.home-panel-main.reseller-home.container-fluid::after { content:"" !important; display:block !important; clear:both !important; }
.home-panel-main.reseller-home.container-fluid .chart-container.google-visualization-atl { position:relative !important; display:block !important; float:none !important; clear:both !important; max-width:100% !important; overflow:visible !important; margin:0 0 16px 0 !important; }
.home-panel-main.reseller-home.container-fluid .chart-container.google-visualization-atl canvas, .home-panel-main.reseller-home.container-fluid .chart-container.google-visualization-atl svg, .home-panel-main.reseller-home.container-fluid .chart-container.google-visualization-atl .highcharts-container, .home-panel-main.reseller-home.container-fluid .chart-container.google-visualization-atl img { max-width:100% !important; height:auto !important; display:block !important; }
.home-panel-main.reseller-home.container-fluid .domain-quick-launch, .home-panel-main.reseller-home.container-fluid .quick-launch, .home-panel-main.reseller-home.container-fluid .panel .quick-launch, .home-panel-main.reseller-home.container-fluid .card .quick-launch { box-sizing:border-box !important; width:100% !important; max-width:100% !important; overflow:hidden !important; }
.home-panel-main.reseller-home.container-fluid .domain-quick-launch input[type='text'], .home-panel-main.reseller-home.container-fluid .quick-launch input[type='text'], .home-panel-main.reseller-home.container-fluid .quick-launch .form-control, .home-panel-main.reseller-home.container-fluid .domain-quick-launch .form-control { box-sizing:border-box !important; width:100% !important; max-width:100% !important; min-width:0 !important; display:block !important; margin:0 !important; }
.home-panel-main.reseller-home.container-fluid .domain-quick-launch .input-group, .home-panel-main.reseller-home.container-fluid .quick-launch .input-group { box-sizing:border-box !important; width:100% !important; max-width:100% !important; }
.home-panel-main.reseller-home.container-fluid .domain-quick-launch .form-group, .home-panel-main.reseller-home.container-fluid .quick-launch .form-group { margin:0 0 8px 0 !important; padding:0 !important; }
/* Modal centering (v2.7.8-1) */
#write-siptrunk.modal { position: fixed !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; margin: 0 !important; z-index: 1050 !important; width: auto !important; max-width: 720px !important; min-width: 320px !important; box-sizing: border-box !important; outline: 0; }
#write-siptrunk.modal .modal-body { max-height: calc(100vh - 200px) !important; overflow: auto !important; }
.modal-backdrop, .modal-backdrop.fade.in { position: fixed !important; left: 0; top: 0; right: 0; bottom: 0; z-index: 1040 !important; }
@media (max-width: 768px) { #write-siptrunk.modal { max-width: 92vw !important; min-width: 0 !important; } #write-siptrunk.modal .modal-body { max-height: calc(100vh - 160px) !important; } }



/* v2.7.8-2 – Robust icon mappings for pages where nav markup differs */
/* HOME – cover .nav-button, .nav-button.btn, and <i> fallbacks */
#nav-home a.nav-link .nav-button, #nav-home-super a.nav-link .nav-button { background-image:url('https://files.sbvoice.com.au/omp/icon-home.jpg') !important; background-repeat:no-repeat !important; background-position:center !important; background-size:20px 20px !important; }
#nav-home a.nav-link i, #nav-home-super a.nav-link i, #nav-home a.nav-link i.nsicon, #nav-home-super a.nav-link i.nsicon { display:inline-block !important; width:20px !important; height:20px !important; background-image:url('https://files.sbvoice.com.au/omp/icon-home.jpg') !important; background-repeat:no-repeat !important; background-position:center !important; background-size:20px 20px !important; color:transparent !important; text-indent:-9999px !important; overflow:hidden !important; }
/* MUSIC ON HOLD – same robustness */
#nav-musiconhold a.nav-link .nav-button { background-image:url('https://files.sbvoice.com.au/omp/icon-musiconhold.jpg') !important; background-repeat:no-repeat !important; background-position:center !important; background-size:20px 20px !important; }
#nav-musiconhold a.nav-link i, #nav-musiconhold a.nav-link i.nsicon { display:inline-block !important; width:20px !important; height:20px !important; background-image:url('https://files.sbvoice.com.au/omp/icon-musiconhold.jpg') !important; background-repeat:no-repeat !important; background-position:center !important; background-size:20px 20px !important; color:transparent !important; text-indent:-9999px !important; overflow:hidden !important; }
/* Keep the icon tile clean */
#nav-home .nav-button, #nav-home-super .nav-button, #nav-musiconhold .nav-button { background-color:transparent !important; border:0 !important; box-shadow:none !important; }


/* DIALIER INPUT FIELD SYLING */
/* Text + background + caret color */
.css-mjtgb4 .dialer-number {
  color: #0d1321 !important;               /* text color */
  background-color: #fff7e6 !important;     /* input background */
  caret-color: #ff9900 !important;          /* cursor color (optional) */
}

/* Placeholder color (if you ever add placeholder to this field) */
.css-mjtgb4 .dialer-number::placeholder {
  color: #b08968 !important;
  opacity: 1; /* Firefox */
}

/* Focus styles (underline is on the root for MuiInput) */
.css-mjtgb4.MuiInput-root::before {
  border-bottom-color: #ffb84d !important;  /* idle underline */
}
.css-mjtgb4.MuiInput-root::after {
  border-bottom-color: #ff8c1a !important;  /* focused underline */
}

/* iOS/Chrome autofill background override */
.css-mjtgb4 .dialer-number:-webkit-autofill {
  -webkit-text-fill-color: #0d1321 !important;
  transition: background-color 5000s ease-in-out 0s; /* prevents yellow flash */
  box-shadow: 0 0 0px 1000px #fff7e6 inset !important; /* mimic background */
}

/* END OF DIALER INPUT FIELD STYLING */