/* ManbiTech Support Portal - customer interface after login (white + soft blue) */
@font-face{font-family:'MTX Poppins';font-weight:400;font-display:swap;src:url('poppins-400.woff') format('woff')}
@font-face{font-family:'MTX Poppins';font-weight:500;font-display:swap;src:url('poppins-500.woff') format('woff')}
@font-face{font-family:'MTX Poppins';font-weight:600;font-display:swap;src:url('poppins-600.woff') format('woff')}
@font-face{font-family:'MTX Poppins';font-weight:700;font-display:swap;src:url('poppins-700.woff') format('woff')}

:root{
  --b-50:#f0f5ff; --b-100:#e2ecff; --b-150:#d0e0ff; --b-200:#b1caf7; --b-300:#7ba4ec;
  --b-500:#0d4fd6; --b-600:#0a3fb2; --b-700:#082f86;
  --ink:#0b1d48; --ink-2:#344769; --ink-3:#6b7b98; --line:#d6e1f1; --line-2:#e6edf8; --page:#e9f0fa;
  --c-side:248px; --c-mini:68px; --c-top:60px;
  --head:'MTX Poppins','Poppins','Inter',sans-serif;
  --card:0 1px 2px rgba(11,29,72,.05),0 10px 24px -18px rgba(11,29,72,.34);
}
html.mtx-c{
  --primary-color:var(--b-500); --primary-color-darker:var(--b-600); --primary-color-rgb:rgba(13,79,214,.14); --primary-color-calendar:var(--b-100);
  --secondary-color:var(--ink); --black:var(--ink); --border-color:var(--line);
  --table-th-bg:var(--b-50); --table-td-even-bg:#fff; --table-text-color:var(--ink);
}
html[data-mtx-theme="orange"]{--b-50:#fff5ec;--b-100:#ffe8d6;--b-150:#ffd9bd;--b-200:#fbc39b;--b-300:#f39b5f;--b-500:#ea6a1f;--b-600:#d2560f;--b-700:#ad430a;
  --ink:#2c1d13;--ink-2:#56463a;--ink-3:#8a7666;--line:#ecdccd;--line-2:#f4e9df;--page:#f6eee6}
html[data-mtx-theme="teal"]{--b-50:#eefaf8;--b-100:#d8f2ee;--b-150:#c1eae4;--b-200:#9cdcd2;--b-300:#5fc2b5;--b-500:#0f8f84;--b-600:#0b766d;--b-700:#085e57;
  --ink:#10292a;--ink-2:#3c5354;--ink-3:#6f8586;--line:#d4e6e3;--line-2:#e5f1ef;--page:#ecf5f3}
html[data-mtx-theme="purple"]{--b-50:#f6f3ff;--b-100:#ebe4ff;--b-150:#ddd2ff;--b-200:#c6b5fa;--b-300:#a48af1;--b-500:#6a45d6;--b-600:#5633bd;--b-700:#43269c;
  --ink:#1f1838;--ink-2:#4a4366;--ink-3:#7c7598;--line:#e1dbf3;--line-2:#eeeafa;--page:#f1eefa}
html[data-mtx-theme="graphite"]{--b-50:#f4f6f8;--b-100:#e7ebf0;--b-150:#d9dfe7;--b-200:#c3cbd6;--b-300:#9aa5b4;--b-500:#3d4a5e;--b-600:#2d3848;--b-700:#202936;
  --ink:#161c26;--ink-2:#434c5a;--ink-3:#77808e;--line:#dde1e7;--line-2:#eceff3;--page:#eef0f3}
html.mtx-c body{background:var(--page)!important;color:var(--ink);font-family:var(--head)!important;transition:padding-left .22s ease}
html.mtx-cpre body > *{visibility:hidden!important}
html.mtx-cpre,html.mtx-cpre body{background:var(--page)!important}
html.mtx-c #Footer{display:none!important}

/* ---------- layout ---------- */
#mtx-cside{display:none}
@media (min-width:1025px){
  html.mtx-c body{padding-left:var(--c-side)!important}
  html.mtx-c.mtx-cmini body{padding-left:var(--c-mini)!important}
  html.mtx-c #Navigation,html.mtx-c #Header #Logo,html.mtx-c .LastViewMenuBar{display:none!important}
  #mtx-cside{display:flex}
}
html.mtx-c #Header{position:sticky!important;top:0;z-index:4000;height:var(--c-top)!important;min-height:var(--c-top)!important;padding:0 20px 0 24px!important;
  display:flex!important;align-items:center!important;justify-content:space-between!important;background:#fff!important;border:0!important;
  border-bottom:1px solid var(--line)!important;box-shadow:0 2px 10px -8px rgba(30,50,90,.25)!important}
html.mtx-c #Header .info-wrapper{display:flex;align-items:center;gap:12px}
html.mtx-c #Header .CompanyName,html.mtx-c #Header .CompanyName a{font:600 17px var(--head)!important;color:var(--ink)!important;text-decoration:none!important;margin:0!important}
html.mtx-c #HeaderToolBar{display:flex!important;align-items:center;gap:10px;margin:0!important;list-style:none}
html.mtx-c #HeaderToolBar .UserAvatar{position:relative}
html.mtx-c #HeaderToolBar .UserAvatar > a{width:38px;height:38px;border-radius:50%!important;display:flex!important;align-items:center;justify-content:center;
  background:var(--b-150)!important;box-shadow:inset 0 0 0 1px var(--b-200);text-decoration:none!important}
html.mtx-c #HeaderToolBar .UserAvatar .Initials{color:var(--b-700)!important;font:600 13.5px var(--head)!important;background:transparent!important}
html.mtx-c #HeaderToolBar .UserAvatar_submenu{position:absolute!important;right:0!important;left:auto!important;top:48px!important;width:250px!important;background:#fff!important;
  border:1px solid var(--line)!important;border-radius:12px!important;box-shadow:0 16px 36px -18px rgba(30,50,90,.45)!important;padding:8px!important;z-index:5000}
html.mtx-c #HeaderToolBar .UserAvatar_submenu ul{list-style:none;margin:0;padding:0}
html.mtx-c #HeaderToolBar .UserAvatar_submenu label{display:block;margin:6px 8px 4px;font-size:10.5px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--ink-3)!important}
html.mtx-c #HeaderToolBar .UserAvatar_submenu a{display:flex!important;align-items:center;gap:10px;padding:9px 10px!important;border-radius:8px;color:var(--ink)!important;
  text-decoration:none!important;font:500 13.8px var(--head)!important;background:transparent!important}
html.mtx-c #HeaderToolBar .UserAvatar_submenu a *{color:inherit!important}
html.mtx-c #HeaderToolBar .UserAvatar_submenu a i{color:#8a97ad!important;width:16px;text-align:center}
html.mtx-c #HeaderToolBar .UserAvatar_submenu a:hover{background:var(--b-50)!important;color:var(--b-700)!important}

/* ---------- rail ---------- */
#mtx-cside{position:fixed;left:0;top:0;bottom:0;width:var(--c-side);z-index:4100;flex-direction:column;background:#fff;border-right:1px solid var(--line);
  font-family:var(--head);transition:width .22s ease;overflow:hidden}
html.mtx-cmini #mtx-cside{width:var(--c-mini)}
#mtx-cside .s-top{flex:none;display:flex;align-items:center;gap:6px;height:var(--c-top);padding:0 10px 0 12px;border-bottom:1px solid var(--line-2)}
#mtx-cside .s-burger{flex:none;width:42px;height:42px;border:0;border-radius:11px;background:transparent;color:var(--ink-2);cursor:pointer;display:grid;place-items:center;font-size:17px}
#mtx-cside .s-burger:hover{background:var(--b-100);color:var(--b-700)}
#mtx-cside .s-logo{display:flex;align-items:center;gap:9px;min-width:0;text-decoration:none!important;transition:opacity .15s}
#mtx-cside .s-logo img{height:26px;width:auto;flex:none}
#mtx-cside .s-logo .bt{display:flex;flex-direction:column;line-height:1;white-space:nowrap}
#mtx-cside .s-logo .bt b{font:700 18px/1 var(--head);color:var(--ink);letter-spacing:-.3px}
#mtx-cside .s-logo .bt b em{font-style:normal;color:var(--b-600)}
#mtx-cside .s-logo .bt small{font:500 10.5px/1 var(--head);color:var(--ink-3);margin-top:4px}
#mtx-cside .s-new{flex:none;display:flex;align-items:center;gap:10px;margin:14px 12px 8px;height:42px;padding:0 14px;border-radius:12px;white-space:nowrap;overflow:hidden;
  background:var(--b-500);color:#fff!important;text-decoration:none!important;font:600 14px var(--head);box-shadow:0 6px 14px -10px rgba(47,107,199,.9);transition:background .15s}
#mtx-cside .s-new:hover{background:var(--b-600)}
#mtx-cside .s-new i{width:18px;text-align:center;flex:none}
#mtx-cside nav{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding:4px 10px 12px}
#mtx-cside .s-sec{font:600 10.5px var(--head);letter-spacing:1.1px;text-transform:uppercase;color:#9aa6b8;margin:16px 10px 6px;white-space:nowrap}
#mtx-cside a.s-item{position:relative;display:flex;align-items:center;gap:13px;height:40px;padding:0 12px;margin:2px 0;border-radius:10px;white-space:nowrap;
  color:var(--ink-2)!important;text-decoration:none!important;font-size:13.8px;font-weight:500;transition:background .15s,color .15s}
#mtx-cside a.s-item i{width:20px;text-align:center;font-size:15.5px;color:#93a1b7;flex:none}
#mtx-cside a.s-item:hover{background:var(--b-50);color:var(--ink)!important}
#mtx-cside a.s-item:hover i{color:var(--b-600)}
#mtx-cside a.s-item.on{background:var(--b-100);color:var(--b-700)!important;font-weight:600}
#mtx-cside a.s-item.on::before{content:"";position:absolute;left:-10px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--b-500)}
#mtx-cside a.s-item.on i{color:var(--b-600)}
#mtx-cside .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;transition:opacity .15s}
#mtx-cside .s-foot{flex:none;display:flex;align-items:center;gap:12px;height:48px;padding:0 22px;border-top:1px solid var(--line-2);font-size:12px;color:var(--ink-3);white-space:nowrap}
#mtx-cside .s-foot i{color:#3aa57a;width:20px;text-align:center;flex:none}
html.mtx-cmini #mtx-cside .s-logo,html.mtx-cmini #mtx-cside .t{opacity:0;pointer-events:none}
html.mtx-cmini #mtx-cside .s-logo{width:0}
html.mtx-cmini #mtx-cside .s-sec{opacity:0;height:1px;margin:10px 8px;background:var(--line)}
html.mtx-cmini #mtx-cside .s-new{padding:0 12px;width:44px}
html.mtx-cmini #mtx-cside a.s-item{padding:0 12px;width:44px}
#mtx-ctip{position:fixed;z-index:6000;transform:translateY(-50%);padding:6px 10px;border-radius:7px;background:#1f2a3d;color:#fff;font:500 12.5px var(--head);
  white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .1s}
#mtx-ctip.on{opacity:1}

/* ---------- content ---------- */
html.mtx-c #MainBox{max-width:1280px;margin:0 auto!important;padding:26px 28px 40px!important;background:transparent!important}
html.mtx-c .PageTitle,html.mtx-c #MainBox h1{font:700 24px var(--head)!important;color:var(--ink)!important;margin:0 0 16px!important}
html.mtx-c .ContentWrapper > .Content,html.mtx-c .card-item,html.mtx-c .section-block,html.mtx-c .outerTable,html.mtx-c #MainBox form > .Content{
  background:#fff!important;border:1px solid var(--line)!important;border-radius:14px!important;box-shadow:var(--card)!important}
html.mtx-c .card-title,html.mtx-c #MainBox h2,html.mtx-c #MainBox h3{font:600 16px var(--head)!important;color:var(--ink)!important}
html.mtx-c label,html.mtx-c .label-wrapper label{font:500 13px var(--head)!important;color:var(--ink-2)!important}
html.mtx-c input[type=text],html.mtx-c input[type=email],html.mtx-c input[type=password],html.mtx-c input[type=number],html.mtx-c select,html.mtx-c textarea,
html.mtx-c .InputField_InputContainer{border:1px solid var(--line)!important;border-radius:10px!important;background:#fff!important;font-family:var(--head)!important;color:var(--ink)!important;box-shadow:none!important}
html.mtx-c input:focus,html.mtx-c select:focus,html.mtx-c textarea:focus{outline:none!important;border-color:var(--b-300)!important;box-shadow:0 0 0 3px rgba(13,79,214,.12)!important}
html.mtx-c .btn-primary,html.mtx-c button.Primary,html.mtx-c .CallForAction{background:var(--b-500)!important;border:0!important;color:#fff!important;border-radius:10px!important;font:600 14px var(--head)!important}
html.mtx-c .btn-primary:hover,html.mtx-c button.Primary:hover{background:var(--b-600)!important}
html.mtx-c .btn-secondary,html.mtx-c .btn-cancel-ghost{border-radius:10px!important;font-family:var(--head)!important}
html.mtx-c input[type=radio],html.mtx-c input[type=checkbox]{accent-color:var(--b-500)}

/* tables */
html.mtx-c table.Overview{width:100%;border-collapse:separate!important;border-spacing:0;background:#fff;border-radius:12px;overflow:hidden}
html.mtx-c table.Overview thead th{background:#f6f9fd!important;color:var(--ink-3)!important;font:600 12px var(--head)!important;letter-spacing:.2px;border-bottom:1px solid var(--line)!important}
html.mtx-c table.Overview thead th a{color:inherit!important}
html.mtx-c table.Overview tbody td{border-bottom:1px solid var(--line-2)!important;color:var(--ink)!important;font-family:var(--head)}
html.mtx-c table.Overview tbody tr:hover td{background:var(--b-50)!important}
html.mtx-c table.Overview tbody td a{color:var(--ink)!important;font-weight:500}
html.mtx-c table.Overview tbody td a:hover{color:var(--b-700)!important}
html.mtx-c .Filter.Tabs a,html.mtx-c ul.Tabs li a{border-radius:999px!important;font-family:var(--head)!important}
html.mtx-c .Filter.Tabs a.Selected,html.mtx-c .Filter.Tabs a.Active,html.mtx-c ul.Tabs li.Active a{background:var(--b-100)!important;color:var(--b-700)!important}

/* state pills (added by JS) */
.mtx-st{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:7px;font-size:12px;font-weight:600;white-space:nowrap}
.mtx-st::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.mtx-st.s-new{background:#eef4fd;color:#3b6fc4}.mtx-st.s-open{background:#f4effc;color:#7a55c4}
.mtx-st.s-pending{background:#fdf4e2;color:#a8700f}.mtx-st.s-closed{background:#eaf6f0;color:#2f8a5e}.mtx-st.s-other{background:#f0f2f6;color:#56627a}

/* welcome strip */
#mtx-chello{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 18px;padding:18px 22px;border-radius:14px;background:linear-gradient(90deg,#fff 0%,var(--b-50) 100%);
  border:1px solid var(--line);box-shadow:var(--card)}
#mtx-chello b{display:block;font:700 19px var(--head);color:var(--ink)}
#mtx-chello span{font-size:13.5px;color:var(--ink-3)}
#mtx-chello a{flex:none;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:10px;background:var(--b-500);color:#fff!important;font:600 14px var(--head);text-decoration:none!important}
#mtx-chello a:hover{background:var(--b-600)}

/* ---------- theme picker ---------- */
html.mtx-c #mtx-theme{position:relative;display:flex;align-items:center;margin-right:6px}
html.mtx-c #mtx-theme > a{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;color:var(--ink-2)!important;text-decoration:none!important;font-size:16px}
html.mtx-c #mtx-theme > a:hover{background:var(--b-50)}
html.mtx-c #mtx-theme .mtx-dd{display:none;position:absolute;top:calc(100% + 8px);right:0;min-width:210px;background:#fff;border:1px solid var(--line);border-radius:12px;
  box-shadow:0 18px 40px -16px rgba(11,29,72,.35);padding:6px;z-index:5000}
html.mtx-c #mtx-theme.open .mtx-dd{display:block}
html.mtx-c #mtx-theme .mtx-dd a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;font:500 13.5px var(--head);color:var(--ink)!important;text-decoration:none!important}
html.mtx-c #mtx-theme .mtx-dd a:hover{background:var(--b-50)}
html.mtx-c #mtx-theme .mtx-dd a.sel{background:var(--b-100);color:var(--b-700)!important;font-weight:600}
html.mtx-c #mtx-theme .mtx-dd-h{padding:6px 12px 4px;font:600 10.5px var(--head);letter-spacing:1px;text-transform:uppercase;color:var(--ink-3)}
.mtx-sw{width:16px;height:16px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
/* no stray colours */
html.mtx-c input:focus,html.mtx-c select:focus,html.mtx-c textarea:focus{background:#fff!important;color:var(--ink)!important;border-color:var(--b-300)!important;box-shadow:0 0 0 3px rgba(13,79,214,.12)!important;outline:none!important}
html.mtx-c ::selection{background:var(--b-150);color:var(--ink)}
html.mtx-c .WidgetAction.Toggle,html.mtx-c .WidgetAction.Toggle a{background:transparent!important}

html.mtx-theme-open .UserAvatar_submenu,html.mtx-theme-open #HeaderToolBar .mtx-dd{display:none!important}
#mtx-theme .mtx-dd{z-index:6000!important}
html.mtx-c #HeaderToolBar .mtx-theme-li{display:flex;align-items:center;list-style:none;margin:0;padding:0}
html.mtx-c:not(.mtx-ready) *,html.mtx-c:not(.mtx-ready) *::before,html.mtx-c:not(.mtx-ready) *::after{transition:none!important}
@keyframes mtx-cin{from{opacity:0}to{opacity:1}}
html.mtx-c:not(.mtx-cpre) #mtx-cside,html.mtx-c:not(.mtx-cpre) #Header,html.mtx-c:not(.mtx-cpre) #MainBox{animation:mtx-cin .14s ease-out}