/* ============================================================
   MAGIC APPLE — NetSapiens Classic Portal  v7.0
   Injection: Platform Settings > Custom CSS
   ============================================================
   Editable values marked  ← EDIT HERE
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* Hide page until JS sidebar is ready — prevents flash of NS portal layout.
   JS sets visibility:'' on documentElement once the sidebar is injected.
   The 500ms JS fallback ensures this never gets stuck.                    */
html:not(.ma-ready) body {
  visibility: hidden !important;
}

/* ============================================================
   VARIABLES  ← EDIT HERE
   ============================================================ */
:root {
  /* ── Magic Apple Brand Colors (Pantone → Hex) ─────────────
     PMS 376C  → #72b626  Brand green (logo ribbon/banner)
     PMS 5463C → #1e4f64  Dark petrol teal (sidebar)
     PMS 187C  → #c41e3a  Crimson red (danger/alerts)
     PMS 7421C → #6b2737  Burgundy (darker accents)
     PMS 7458C → #5bb8d4  Sky blue (accent / badges)
  ── EDIT HERE ──────────────────────────────────────────── */

  --ma-primary:      #5e9b20;   /* PMS 376C green — darkened for button/UI contrast */
  --ma-primary-hov:  #4a7c10;   /* darker on hover */
  --ma-primary-lt:   #ecf5d4;   /* pale green tint for backgrounds */
  --ma-primary-brand:#72b626;   /* full PMS 376C — use for logos/decorative only */
  --ma-accent:       #5bb8d4;   /* PMS 7458C — sky blue badges */
  --ma-danger:       #c41e3a;   /* PMS 187C  — crimson */

  --ma-font:         'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ma-font-mono:    'JetBrains Mono', monospace;

  /* Keep in sync with JS CFG values */
  --ma-db-h:    41px;  /* domain manage bar height — matches .fixed-container min-height */
  --ma-sb-col:  54px;
  --ma-hd-h:    50px;

  --ma-r-sm: 6px;
  --ma-r-md: 10px;
  --ma-r-lg: 14px;
  --ma-t:    0.2s cubic-bezier(0.4,0,0.2,1);

  /* Surfaces */
  --ma-bg-page:   #f4f7f2;   /* very light warm neutral */
  --ma-bg-sb:     #1e4f64;   /* PMS 5463C — dark teal sidebar */
  --ma-bg-hd:     #ffffff;
  --ma-bg-card:   #ffffff;
  --ma-bg-alt:    #f4f7f2;
  --ma-bg-hov:    #ecf5d4;   /* light green hover */
  --ma-bg-active: #dff0c2;   /* slightly deeper green active */
  --ma-bg-input:  #ffffff;

  /* Text */
  --ma-text:       #1a2e1d;   /* very dark green-tinted */
  --ma-text-soft:  #445a48;
  --ma-text-muted: #7a9480;
  --ma-text-nav:   #374151;   /* used outside sidebar */
  --ma-text-nav-on:#4a7c10;   /* active nav text (content area) */
  --ma-text-on-p:  #ffffff;
  --ma-text-link:  #3d6e0a;   /* dark green — 5:1+ contrast on white backgrounds */

  /* Borders */
  --ma-border:    #d8e4da;
  --ma-border-in: #c0d4c4;
  --ma-border-foc:#72b626;

  /* Shadows */
  --ma-sh-sm: 0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
  --ma-sh-md: 0 4px 12px rgba(0,0,0,.07);
  --ma-sh-lg: 0 10px 28px rgba(0,0,0,.09);
  --ma-sh-sb: 2px 0 20px rgba(0,0,0,.18);   /* deeper shadow for dark sidebar */
}

/* ============================================================
   BASE
   ============================================================ */
/* Scope box-sizing to our own injected elements only —
   the broad * rule was interfering with NS portal icon fonts */
#ma-sidebar *, #ma-sidebar *::before, #ma-sidebar *::after,
#ma-classic-restore *, #ma-classic-restore *::before {
  box-sizing: border-box !important;
}

/* Ensure position:fixed works — overflow:hidden on html or body
   creates a scroll container that breaks fixed positioning.
   Override any values NS portal may set on these elements.     */
html {
  font-size: 13.5px !important;
  overflow: visible !important;
}

body {
  background:             var(--ma-bg-page) !important;
  color:                  var(--ma-text) !important;
  -webkit-font-smoothing: antialiased !important;
  margin:   0 !important;
  padding:  0 !important;
  overflow: visible !important;
}

/* NS portal wrapper divs — must not clip or scroll or they break position:fixed */
body:not(.ma-classic) #wrap,
body:not(.ma-classic) #page-wrap,
body:not(.ma-classic) #app,
body:not(.ma-classic) #main {
  overflow: visible !important;
  transform: none !important;
}

/* ============================================================
   CLASSIC MODE
   body.ma-classic is added by JS when user chooses classic view.
   On page reload in classic mode, JS re-adds this class AND
   uses sp() to show the nav elements. These CSS rules are a
   belt-and-suspenders backup.
   ============================================================ */
body.ma-classic #ma-sidebar,
body.ma-classic #ma-classic-restore-placeholder { display: none !important; }

body.ma-classic #navigation        { display: block !important; }
body.ma-classic #navigation-subbar { display: block !important; }
body.ma-classic #header-logo       { display: block !important; }
body.ma-classic #header-user       { margin-left: 0 !important; }

/* ============================================================
   #header — NEW VIEW ONLY
   ============================================================ */
body:not(.ma-classic) #header {
  background:    var(--ma-bg-hd) !important;
  border-bottom: 1px solid var(--ma-border) !important;
  box-shadow:    var(--ma-sh-sm) !important;
  display:       flex !important;
  align-items:   center !important;
  padding:       0 16px !important;
  overflow:      visible !important;
  position:      fixed !important;
  top:           0 !important;           /* JS overrides to dbH when domain bar present */
  right:         0 !important;
  z-index:       955 !important;
}

/* When domain manage bar is present, shift header below it as a CSS fallback.
   JS (layoutFix) overrides this with the precisely measured height.           */
body:not(.ma-classic):has(.fixed-container) #header {
  top: var(--ma-db-h) !important;
}

/* Classic view — restore header to normal document flow */
body.ma-classic #header {
  position:   relative !important;
  top:        auto !important;
  left:       auto !important;
  right:      auto !important;
  z-index:    auto !important;
  overflow:   hidden !important;
}

/* ============================================================
   #header-logo and #navigation — hidden in new view
   ============================================================ */
body:not(.ma-classic) #header-logo,
body:not(.ma-classic) #navigation { display: none !important; }

/* ============================================================
   #navigation-subbar — fixed bar in new view, in-flow in classic
   ============================================================ */
body:not(.ma-classic) #navigation-subbar {
  display:       flex !important;
  align-items:   center !important;
  position:      fixed !important;
  right:         0 !important;
  z-index:       940 !important;
  height:        36px !important;
  padding:       0 12px !important;
  background:    #e8eae7 !important;
  border-bottom: 1px solid #d0d4ce !important;
  box-sizing:    border-box !important;
}

body:not(.ma-classic) #navigation-subbar .navigation-title,
body:not(.ma-classic) #navigation-subbar a.navigation-title {
  font-size:       13px !important;
  font-weight:     600 !important;
  color:           var(--ma-text) !important;
  flex:            1 !important;
  text-decoration: none !important;
}

body:not(.ma-classic) #navigation-subbar .subbar-btn,
body:not(.ma-classic) #navigation-subbar a.btn {
  color:      var(--ma-text-muted) !important;
  background: transparent !important;
  border:     none !important;
}

body:not(.ma-classic) #navigation-subbar .subbar-btn:hover,
body:not(.ma-classic) #navigation-subbar a.btn:hover {
  color: var(--ma-text) !important;
}

body.ma-classic #navigation-subbar {
  display:    none !important;   /* NS portal renders page title inline; avoid duplicate bar */
}

body.ma-classic .fixed-container {
  position:   fixed !important;   /* keep domain bar pinned at top when scrolling */
  top:        0 !important;
  left:       0 !important;
  right:      0 !important;
  z-index:    960 !important;
}

/* Classic view body padding handled by JS (dynamic, based on .fixed-container height) */

body:not(.ma-classic) .fixed-container {
  position:      fixed !important;
  top:           0 !important;           /* JS overrides with measured value */
  left:          var(--ma-sb-w) !important;
  right:         0 !important;
  width:         auto !important;
  z-index:       960 !important;
  background:    var(--ma-bg-alt) !important;
  border-bottom: 1px solid var(--ma-border) !important;
  overflow:      visible !important;
  box-sizing:    border-box !important;
  display:       flex !important;
  align-items:   center !important;
  flex-wrap:     nowrap !important;
  gap:           4px !important;
}

body:not(.ma-classic).ma-collapsed .fixed-container {
  left: var(--ma-sb-col) !important;
}

/* Center domain text — truncates on narrow windows */
body:not(.ma-classic) .fixed-container .fixed-container-text,
body:not(.ma-classic) .fixed-container > span:not(.btn),
body:not(.ma-classic) .fixed-container > div.text-center {
  flex:          1 1 auto !important;
  min-width:     0 !important;
  overflow:      hidden !important;
  text-overflow: ellipsis !important;
  white-space:   nowrap !important;
  text-align:    center !important;
}

/* Left buttons never shrink */
body:not(.ma-classic) .fixed-container > a.btn,
body:not(.ma-classic) .fixed-container .btn-group:first-child {
  flex-shrink: 0 !important;
}

/* Right buttons stay right */
.fixed-container .pull-right,
.fixed-container .btn-group.pull-right,
body:not(.ma-classic) .fixed-container > a.btn:last-of-type,
body:not(.ma-classic) .fixed-container > .btn-group:last-child {
  margin-left: auto !important;
  flex-shrink: 0 !important;
}

/* Domain manage bar — #domain-message fills the full fixed-container width */
body:not(.ma-classic) .fixed-container #domain-message {
  width:      100% !important;
  margin:     0 !important;
  padding:    0 !important;
  border:     none !important;
  background: transparent !important;
  box-shadow: none !important;
}
body:not(.ma-classic) .fixed-container .domain-message-container {
  display:     flex !important;
  align-items: center !important;
  flex-wrap:   nowrap !important;
  gap:         4px !important;
  width:       100% !important;
  padding:     0 8px !important;
  min-height:  41px !important;
}
body:not(.ma-classic) .fixed-container .domain-message-text {
  flex:          1 1 auto !important;
  min-width:     0 !important;
  overflow:      hidden !important;
  text-align:    center !important;
}
body:not(.ma-classic) .fixed-container .domain-message-text h5 {
  margin:        0 !important;
  white-space:   nowrap !important;
  overflow:      hidden !important;
  text-overflow: ellipsis !important;
  font-size:     13px !important;
  color:         var(--ma-text) !important;
}
body:not(.ma-classic) .fixed-container .domain-message-buttons {
  flex-shrink: 0 !important;
  display:     flex !important;
  gap:         4px !important;
}
body:not(.ma-classic) .fixed-container .clearfix {
  display: none !important;
}

/* ============================================================
   USER TOOLBAR
   NS portal structure:
     <li>
       <span class="dropdown language-dropdown">
         <i class="icon icon-th"></i>  ← sibling icon, NOT inside <a>
         <a class="dropdown-toggle">Apps</a>
       </span>
     </li>
   The span needs inline-flex so icon + text are side-by-side.
   ============================================================ */
#header-user {
  display:     flex !important;
  align-items: center !important;
  margin-left: auto !important;
  height:      100% !important;
  position:    relative !important;
}

.user-toolbar {
  display:     flex !important;
  align-items: center !important;
  list-style:  none !important;
  margin:      0 !important;
  padding:     0 !important;
  gap:         2px !important;
}

.user-toolbar > li { position: relative !important; }

/* Span wrapping icon + link — must be flex for side-by-side */
.user-toolbar .dropdown,
.user-toolbar .language-dropdown,
.user-toolbar span.dropdown {
  display:     inline-flex !important;
  align-items: center !important;
  gap:         4px !important;
}

/* Icons in toolbar */
.user-toolbar i.icon,
.user-toolbar .icon-th,
.user-toolbar .nsicon,
.user-toolbar i[class*="icon"],
.user-toolbar i[class*="nsicon"] {
  flex-shrink: 0 !important;
  opacity:     0.75 !important;
  font-size:   14px !important;
  color:       var(--ma-text-soft) !important;
}

/* Contain the user icon + badge inline, no overlap */
#header-user li.dropdown {
  display:     inline-flex !important;
  align-items: center !important;
  gap:         4px !important;
  position:    relative !important;
}

/* Message count badge — moved after account link by JS */
#header-user .dropdown-msg-count {
  position:    static !important;
  font-size:   9px !important;
  min-width:   16px !important;
  height:      16px !important;
  padding:     0 4px !important;
  line-height: 16px !important;
  border-radius: 8px !important;
  flex-shrink: 0 !important;
}

/* Links and dropdown toggles */
.user-toolbar a,
.user-toolbar .dropdown-toggle,
.user-toolbar .account-dropdown {
  color:          var(--ma-text-soft) !important;
  font-size:      13px !important;
  font-weight:    500 !important;
  padding:        6px 10px !important;
  border-radius:  var(--ma-r-sm) !important;
  display:        inline-flex !important;
  align-items:    center !important;
  gap:            4px !important;
  text-decoration:none !important;
  cursor:         pointer !important;
  transition:     background var(--ma-t), color var(--ma-t) !important;
  white-space:    nowrap !important;
}

.user-toolbar a:hover,
.user-toolbar .dropdown-toggle:hover {
  background: var(--ma-bg-hov) !important;
  color:      var(--ma-primary) !important;
}

.user-toolbar .badge {
  background:   var(--ma-accent) !important;
  color:        #fff !important;
  font-size:    10px !important;
  font-weight:  700 !important;
  border-radius:99px !important;
  padding:      2px 6px !important;
  line-height:  1.4 !important;
}

/* ============================================================
   DROPDOWNS — must appear above everything
   ============================================================ */
.user-toolbar .dropdown-menu,
#header .dropdown-menu,
#app-menu-list {
  position:     absolute !important;
  top:          100% !important;
  right:        0 !important;
  left:         auto !important;
  z-index:      99999 !important;
  background:   var(--ma-bg-card) !important;
  border:       1px solid var(--ma-border) !important;
  border-radius:var(--ma-r-md) !important;
  box-shadow:   var(--ma-sh-lg) !important;
  padding:      6px !important;
  min-width:    170px !important;
  margin-top:   4px !important;
}

.user-toolbar .dropdown-menu li a {
  color:          var(--ma-text) !important;
  font-size:      13px !important;
  font-weight:    500 !important;
  padding:        8px 14px !important;
  border-radius:  var(--ma-r-sm) !important;
  display:        flex !important;
  align-items:    center !important;
  gap:            8px !important;
  text-decoration:none !important;
  white-space:    nowrap !important;
  transition:     background var(--ma-t), color var(--ma-t) !important;
}

.user-toolbar .dropdown-menu li a:hover {
  background: var(--ma-bg-hov) !important;
  color:      var(--ma-primary) !important;
}

/* All other dropdowns on the page */
.dropdown-menu {
  background:   var(--ma-bg-card) !important;
  border:       1px solid var(--ma-border) !important;
  border-radius:var(--ma-r-md) !important;
  box-shadow:   var(--ma-sh-lg) !important;
  padding:      6px !important;
  z-index:      9000 !important;
}

.dropdown-menu li a {
  color:          var(--ma-text) !important;
  font-size:      13px !important;
  font-weight:    500 !important;
  padding:        7px 12px !important;
  border-radius:  var(--ma-r-sm) !important;
  display:        block !important;
  text-decoration:none !important;
  transition:     background var(--ma-t), color var(--ma-t) !important;
}

.dropdown-menu li a:hover { background:var(--ma-bg-hov) !important; color:var(--ma-primary) !important; }
.dropdown-menu .divider   { border-color:var(--ma-border) !important; margin:4px 0 !important; }

/* ============================================================
   SIDEBAR — #ma-sidebar
   JS sets width dynamically.
   ============================================================ */
#ma-sidebar {
  position:       fixed !important;
  top:            0 !important;
  left:           0 !important;
  bottom:         0 !important;
  background:     var(--ma-bg-sb) !important;
  border-right:   1px solid var(--ma-border) !important;
  box-shadow:     var(--ma-sh-sb) !important;
  z-index:        1000 !important;
  display:        flex !important;
  flex-direction: column !important;
  overflow:       hidden !important;
  transition:     width var(--ma-t) !important;
}

/* Sidebar header: logo + collapse toggle.
   JS sets height to match total fixed area (domain bar + header). */
#ma-sb-hd {
  display:         flex !important;
  align-items:     center !important;
  justify-content: space-between !important;
  padding:         0 10px 0 14px !important;
  border-bottom:   1px solid var(--ma-border) !important;
  flex-shrink:     0 !important;
  overflow:        hidden !important;
  min-height:      var(--ma-hd-h) !important;
  transition:      height var(--ma-t) !important;
}

#ma-logo-wrap {
  display:flex !important; align-items:center !important;
  flex:1 !important; overflow:hidden !important;
}

#ma-logo-wrap img {
  max-width:160px !important; max-height:36px !important;
  object-fit:contain !important; flex-shrink:0 !important;
  transition:opacity var(--ma-t) !important;
}

body.ma-collapsed #ma-logo-wrap img { opacity:0 !important; pointer-events:none !important; }

/* Collapse toggle */
#ma-toggle {
  flex-shrink:0 !important; width:28px !important; height:28px !important;
  border:none !important; border-radius:var(--ma-r-sm) !important;
  background:transparent !important; cursor:pointer !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  color:var(--ma-text-soft) !important; padding:0 !important;
  transition:background var(--ma-t), color var(--ma-t) !important;
}
#ma-toggle:hover { background:var(--ma-bg-hov) !important; color:var(--ma-primary) !important; }
#ma-toggle svg   { width:17px !important; height:17px !important; transition:transform var(--ma-t) !important; }
body.ma-collapsed #ma-toggle svg { transform:rotate(180deg) !important; }

/* Nav area */
#ma-nav { flex:1 !important; overflow-y:auto !important; overflow-x:hidden !important; padding:6px 0 !important; }
#ma-nav::-webkit-scrollbar       { width:4px !important; }
#ma-nav::-webkit-scrollbar-thumb { background:var(--ma-border) !important; border-radius:99px !important; }

/* Nav item */
.ma-item {
  display:flex !important; align-items:center !important; gap:10px !important;
  padding:8px 11px 8px 13px !important; margin:1px 7px !important;
  border-radius:var(--ma-r-sm) !important; text-decoration:none !important;
  color:var(--ma-text-nav) !important; font-size:13.5px !important; font-weight:500 !important;
  white-space:nowrap !important; overflow:hidden !important;
  position:relative !important; cursor:pointer !important;
  transition:background var(--ma-t), color var(--ma-t) !important;
}
.ma-item:hover     { background:var(--ma-bg-hov) !important; color:var(--ma-text-nav-on) !important; text-decoration:none !important; }
.ma-item.ma-active { background:var(--ma-bg-active) !important; color:var(--ma-text-nav-on) !important; font-weight:600 !important; }

.ma-item.ma-active::before {
  content:'' !important; position:absolute !important;
  left:0 !important; top:18% !important; height:64% !important; width:3px !important;
  background:var(--ma-primary) !important; border-radius:0 3px 3px 0 !important;
}

.ma-icon { width:20px !important; height:20px !important; flex-shrink:0 !important; display:flex !important; align-items:center !important; justify-content:center !important; opacity:.6 !important; transition:opacity var(--ma-t) !important; }
.ma-item:hover .ma-icon, .ma-item.ma-active .ma-icon { opacity:1 !important; }
.ma-icon svg { width:16px !important; height:16px !important; }

.ma-lbl { overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important; max-width:180px !important; transition:opacity var(--ma-t),max-width var(--ma-t) !important; }
body.ma-collapsed .ma-lbl { opacity:0 !important; max-width:0 !important; }

.ma-badge { margin-left:auto !important; background:var(--ma-accent) !important; color:#fff !important; font-size:10px !important; font-weight:700 !important; padding:2px 6px !important; border-radius:99px !important; flex-shrink:0 !important; min-width:18px !important; text-align:center !important; transition:opacity var(--ma-t) !important; }
body.ma-collapsed .ma-badge { opacity:0 !important; }

/* Collapsed: centered icons with hover tooltip */
body.ma-collapsed .ma-item { justify-content:center !important; }

body.ma-collapsed .ma-item::after {
  content:attr(data-tip) !important; position:absolute !important;
  left:calc(var(--ma-sb-col) + 6px) !important; top:50% !important; transform:translateY(-50%) !important;
  background:var(--ma-text) !important; color:var(--ma-bg-page) !important;
  padding:5px 10px !important; border-radius:var(--ma-r-sm) !important;
  font-size:12px !important; font-weight:600 !important; white-space:nowrap !important;
  pointer-events:none !important; opacity:0 !important; z-index:9999 !important;
  box-shadow:var(--ma-sh-md) !important; transition:opacity .12s ease !important;
}
body.ma-collapsed .ma-item:hover::after { opacity:1 !important; }

/* Sidebar footer (Classic View button only) */
#ma-sb-ft {
  border-top:1px solid var(--ma-border) !important;
  padding:7px !important; flex-shrink:0 !important;
}

.ma-ft-btn {
  display:flex !important; align-items:center !important; gap:10px !important;
  padding:8px 11px 8px 13px !important; border-radius:var(--ma-r-sm) !important;
  background:transparent !important; border:none !important; cursor:pointer !important;
  color:var(--ma-text-soft) !important; font-family:var(--ma-font) !important;
  font-size:13px !important; font-weight:500 !important;
  width:100% !important; text-align:left !important;
  white-space:nowrap !important; overflow:hidden !important;
  transition:background var(--ma-t), color var(--ma-t) !important;
}
.ma-ft-btn:hover { background:var(--ma-bg-hov) !important; color:var(--ma-primary) !important; }
.ma-ft-btn .ma-icon { opacity:.65 !important; flex-shrink:0 !important; }
.ma-ft-btn:hover .ma-icon { opacity:1 !important; }

.ma-ft-lbl { max-width:160px !important; overflow:hidden !important; transition:opacity var(--ma-t),max-width var(--ma-t) !important; }
body.ma-collapsed .ma-ft-lbl { opacity:0 !important; max-width:0 !important; }
body.ma-collapsed .ma-ft-btn { justify-content:center !important; }

/* "New View" restore button (shown in classic mode) */
#ma-classic-restore {
  position:fixed !important; bottom:16px !important; right:16px !important; z-index:99999 !important;
  background:var(--ma-primary) !important; color:#fff !important;
  border:none !important; border-radius:var(--ma-r-lg) !important;
  padding:10px 18px !important; font-family:var(--ma-font) !important;
  font-size:13px !important; font-weight:600 !important; cursor:pointer !important;
  box-shadow:var(--ma-sh-lg) !important;
  display:flex !important; align-items:center !important; gap:8px !important;
  transition:background var(--ma-t) !important;
}
#ma-classic-restore:hover { background:var(--ma-primary-hov) !important; }
#ma-classic-restore svg { width:16px !important; height:16px !important; }

/* ============================================================
   SUB-NAV (tabs shown as child items below active sidebar item)
   ============================================================ */

.ma-sub-nav {
  overflow: hidden !important;
  padding-bottom: 4px !important;
}

/* Hide sub-nav when sidebar is collapsed — main item tooltip still works */
body.ma-collapsed .ma-sub-nav { display: none !important; }

.ma-sub-item {
  display:        block !important;
  padding:        6px 12px 6px 40px !important;  /* left-indent to align under label */
  margin:         1px 7px !important;
  border-radius:  var(--ma-r-sm) !important;
  text-decoration:none !important;
  color:          rgba(255,255,255,0.5) !important;
  font-size:      12.5px !important;
  font-weight:    400 !important;
  white-space:    nowrap !important;
  overflow:       hidden !important;
  text-overflow:  ellipsis !important;
  position:       relative !important;
  transition:     background var(--ma-t), color var(--ma-t) !important;
}

.ma-sub-item:hover {
  background: rgba(255,255,255,0.07) !important;
  color:      rgba(255,255,255,0.9) !important;
}

.ma-sub-item.ma-sub-active {
  color:       #ffffff !important;
  font-weight: 500 !important;
}

/* Small green dot marks the active sub-item */
.ma-sub-item.ma-sub-active::before {
  content:      '' !important;
  position:     absolute !important;
  left:         26px !important;
  top:          50% !important;
  transform:    translateY(-50%) !important;
  width:        5px !important;
  height:       5px !important;
  border-radius:50% !important;
  background:   #72b626 !important;   /* full brand green — decorative */
}

/* Parent item styling when sub-nav is open */
.ma-item.ma-has-sub {
  background: rgba(255,255,255,0.08) !important;
  color:      rgba(255,255,255,0.95) !important;
  font-weight: 500 !important;
}

.ma-item.ma-has-sub::before {
  content:          '' !important;
  position:         absolute !important;
  left:             0 !important;
  top:              0 !important;
  bottom:           0 !important;
  width:            3px !important;
  background:       rgba(255,255,255,0.3) !important;
  border-radius:    0 2px 2px 0 !important;
}

.ma-item.ma-has-sub .ma-icon { opacity: 0.9 !important; }

/* ============================================================
   DARK SIDEBAR OVERRIDES
   The sidebar background is PMS 5463C dark teal (#1e4f64).
   All text, borders, and hover states inside it need to be
   light-on-dark rather than the page's dark-on-light scheme.
   ============================================================ */

/* Sidebar header bottom border */
#ma-sb-hd { border-bottom-color: rgba(255,255,255,0.12) !important; }

/* Sidebar footer top border */
#ma-sb-ft { border-top-color: rgba(255,255,255,0.12) !important; }

/* Sidebar right border — blend with dark bg */
#ma-sidebar { border-right-color: rgba(0,0,0,0.2) !important; }

/* Collapse toggle */
#ma-toggle { color: rgba(255,255,255,0.6) !important; }
#ma-toggle:hover { background: rgba(255,255,255,0.1) !important; color: #ffffff !important; }

/* Logo — displays its natural colors on the dark teal sidebar.
   If the logo appears too dark, upload a white/light version
   and set the logoUrl in the JS config to point to it. */
/* #ma-logo-wrap img { filter: brightness(0) invert(1) !important; } */

/* Section label */
.ma-sec { color: rgba(255,255,255,0.35) !important; }

/* Scrollbar on dark bg */
#ma-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15) !important; }

/* Nav items — light text on dark */
.ma-item { color: rgba(255,255,255,0.85) !important; }
.ma-item:hover {
  background: rgba(255,255,255,0.08) !important;
  color: #ffffff !important;
}
.ma-item.ma-active {
  background: rgba(114,182,38,0.18) !important;   /* subtle green tint background */
  color: #ffffff !important;                       /* white — max contrast on dark teal */
  font-weight: 600 !important;
}
.ma-item.ma-active::before { background: #72b626 !important; }  /* full brand green for decorative bar */

/* Icon opacity on dark bg */
.ma-icon { opacity: 0.65 !important; }
.ma-item:hover .ma-icon,
.ma-item.ma-active .ma-icon { opacity: 1 !important; }

/* Collapsed tooltip — invert since sidebar is now dark */
body.ma-collapsed .ma-item::after {
  background: #1e4f64 !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
}

/* Footer buttons */
.ma-ft-btn { color: rgba(255,255,255,0.6) !important; }
.ma-ft-btn:hover { background: rgba(255,255,255,0.08) !important; color: #ffffff !important; }
.ma-ft-btn .ma-icon { opacity: 0.65 !important; }
.ma-ft-btn:hover .ma-icon { opacity: 1 !important; }


.box,.card,.panel,.well,.info-box,.small-box {
  background:var(--ma-bg-card) !important; border:1px solid var(--ma-border) !important;
  border-radius:var(--ma-r-md) !important; box-shadow:var(--ma-sh-sm) !important; color:var(--ma-text) !important;
}
.box-header,.card-header,.panel-heading {
  background:var(--ma-bg-card) !important; border-bottom:1px solid var(--ma-border) !important;
  color:var(--ma-text) !important; font-weight:600 !important;
  padding:12px 16px !important; border-radius:var(--ma-r-md) var(--ma-r-md) 0 0 !important;
}
.box-body,.card-body,.panel-body { background:var(--ma-bg-card) !important; padding:16px !important; }

/* ============================================================
   TABLES
   ============================================================ */
.table, table { color:var(--ma-text) !important; font-size:13px !important; }

.table th, thead th, .table thead tr th {
  background:var(--ma-bg-alt) !important; color:var(--ma-text-soft) !important;
  font-size:11px !important; font-weight:700 !important; letter-spacing:.06em !important;
  text-transform:uppercase !important; padding:9px 13px !important;
  border-bottom:2px solid var(--ma-border) !important;
}

.table td, tbody td, .table tbody tr td {
  background:var(--ma-bg-card) !important; border-bottom:1px solid var(--ma-border) !important;
  padding:9px 13px !important; vertical-align:middle !important; color:var(--ma-text) !important;
}

tbody tr:nth-child(even) td { background:var(--ma-bg-alt) !important; }
tbody tr:hover td           { background:var(--ma-bg-hov) !important; }
.dataTables_empty { text-align:center !important; color:var(--ma-text-muted) !important; padding:28px 0 !important; }

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  background:var(--ma-bg-input) !important; border:1px solid var(--ma-border-in) !important;
  border-radius:var(--ma-r-sm) !important; color:var(--ma-text) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background:var(--ma-primary) !important; border-color:var(--ma-primary) !important; color:#fff !important;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn-primary,.btn-success { background:var(--ma-primary) !important; border-color:var(--ma-primary) !important; color:var(--ma-text-on-p) !important; font-weight:600 !important; border-radius:var(--ma-r-sm) !important; }
.btn-primary:hover,.btn-success:hover { background:var(--ma-primary-hov) !important; border-color:var(--ma-primary-hov) !important; box-shadow:0 3px 10px rgba(22,163,74,.25) !important; }
.btn-default { background:var(--ma-bg-card) !important; border:1px solid var(--ma-border) !important; color:var(--ma-text) !important; border-radius:var(--ma-r-sm) !important; }
.btn-default:hover { background:var(--ma-bg-hov) !important; border-color:var(--ma-primary) !important; color:var(--ma-primary) !important; }

/* ============================================================
   FORMS
   ============================================================ */
input[type="text"],input[type="email"],input[type="password"],
input[type="number"],input[type="search"],input[type="tel"],
select,textarea,.form-control {
  background:var(--ma-bg-input) !important; border:1px solid var(--ma-border-in) !important;
  border-radius:var(--ma-r-sm) !important; color:var(--ma-text) !important;
  font-family:var(--ma-font) !important; font-size:13.5px !important; padding:6px 11px !important;
}
input:focus,select:focus,textarea:focus,.form-control:focus { border-color:var(--ma-border-foc) !important; box-shadow:0 0 0 3px rgba(22,163,74,.12) !important; outline:none !important; }
input::placeholder,textarea::placeholder { color:var(--ma-text-muted) !important; }
label,.control-label { color:var(--ma-text-soft) !important; font-size:12px !important; font-weight:600 !important; }

/* ============================================================
   MODALS
   ============================================================ */
.modal-content { background:var(--ma-bg-card) !important; border:1px solid var(--ma-border) !important; border-radius:var(--ma-r-lg) !important; box-shadow:var(--ma-sh-lg) !important; color:var(--ma-text) !important; }
.modal-header { background:var(--ma-bg-card) !important; border-bottom:1px solid var(--ma-border) !important; padding:14px 18px !important; }
.modal-title,.modal-header h3,.modal-header h4 { font-weight:700 !important; color:var(--ma-text) !important; }
.modal-footer { background:var(--ma-bg-alt) !important; border-top:1px solid var(--ma-border) !important; padding:12px 18px !important; }
.modal-backdrop { background:rgba(0,0,0,.5) !important; }

/* ============================================================
   MISC
   ============================================================ */
.nav-tabs { border-bottom:1px solid var(--ma-border) !important; }
.nav-tabs > li > a { color:var(--ma-text-soft) !important; font-weight:500 !important; border:none !important; padding:8px 14px !important; }
.nav-tabs > li.active > a { color:var(--ma-primary) !important; background:var(--ma-bg-card) !important; border-bottom:2px solid var(--ma-primary) !important; }

.alert { border-radius:var(--ma-r-md) !important; border:none !important; font-size:13px !important; }
.alert-success { background:var(--ma-primary-lt) !important; color:#2a4f0a !important; }
.alert-info    { background:#e8f4f8 !important; color:#1e4f64 !important; }
.alert-warning { background:#fff8e6 !important; color:#7a5200 !important; }
.alert-danger  { background:#fde8ec !important; color:#c41e3a !important; }

/* Kill any slide/fade animation on the domain manage bar */
.fixed-container #domain-message,
.fixed-container .domain-message-container,
.fixed-container .domain-message-buttons,
.fixed-container .domain-message-text {
  animation:  none !important;
  transition: none !important;
  transform:  none !important;
  opacity:    1 !important;
}

/* Override jQuery slideDown inline styles — NS portal animates this on AJAX nav */
.fixed-container #domain-message {
  display:  block !important;
  height:   auto !important;
  overflow: visible !important;
}

/* Scope link/heading overrides to content area — avoids hitting NS portal icon-font links */
#content a, .content a, #page-content a,
.box a, .card a, .panel a, .well a,
.table a, .dataTables_wrapper a {
  color:var(--ma-text-link) !important;
}
#content a:hover, .content a:hover, #page-content a:hover,
.box a:hover, .card a:hover, .panel a:hover,
.table a:hover {
  color:var(--ma-primary-hov) !important; text-decoration:none !important;
}

/* ── Date range / filter bar reset ────────────────────────────
   Our dark green link color is unreadable when the NS portal
   renders date range pickers / filter buttons with their own
   colored backgrounds. Reset these elements to inherit the
   portal's own text color so they remain readable.
   ──────────────────────────────────────────────────────────── */
[class*="daterange"] a, [class*="daterange"] span, [class*="daterange"] input,
[id*="daterange"] a,   [id*="daterange"] span,
[class*="date-range"] a, [class*="date-range"] span,
[class*="filter"] a,  [class*="filter"] span,
[class*="datepicker"] *, [class*="date-picker"] *,
.input-daterange *, .input-daterange input,
.drp-selected, .ranges a, .ranges li {
  color: inherit !important;
}

/* NS portal Bootstrap .label badges (e.g. Call History date range display,
   "Password Required", "Setup Required") have their own colored backgrounds.
   Our #content a rule (specificity 1,0,1) forces dark green onto them.
   These selectors all use #content prefix to reach specificity 2,0,0+ and win. */
#content a.label,
#content a.label-info,
#content a.label-success,
#content a.label-warning,
#content a.label-danger,
#content a.label-primary,
#content a.label-default,
#content #filter-date,
#content a.set-filters,
#content span.label-info,
#content span.label-success,
#content span.label-warning,
#content span.label-danger {
  color: #ffffff !important;
}

/* NS portal <a class="btn"> elements — let their own button CSS handle text color.
   Our .btn-primary / .btn-default rules still apply via the button class rules above. */
#content a.btn { color: inherit !important; }

/* NS portal's own colored button classes need explicit white text */
#content a.color-primary,
#content a.btn-hello,
#content a[class*="color-"],
#content a.btn-info,
#content a.btn-warning,
#content a.btn-danger {
  color: #ffffff !important;
}

#content h1,#content h2,#content h3,#content h4,#content h5,#content h6,
.box h1,.box h2,.box h3,.box h4,
.card h1,.card h2,.card h3,.card h4,
.panel h1,.panel h2,.panel h3,.panel h4 {
  color:var(--ma-text) !important; font-family:var(--ma-font) !important; letter-spacing:-.02em !important;
}
#content hr, .box hr, .card hr, .panel hr { border-color:var(--ma-border) !important; opacity:1 !important; }

.badge { font-family:var(--ma-font) !important; font-size:10px !important; border-radius:99px !important; }
.badge-important,.badge-danger { background:#c41e3a !important; }  /* PMS 187C crimson */
.badge-success { background:var(--ma-primary) !important; }
.badge-warning { background:var(--ma-accent) !important; }

#content code, #content pre, #content kbd,
.box code, .box pre, .card code, .card pre {
  font-family:var(--ma-font-mono) !important; background:var(--ma-bg-alt) !important;
  border:1px solid var(--ma-border) !important; border-radius:var(--ma-r-sm) !important;
  color:var(--ma-primary) !important; font-size:12px !important;
}

/* NS portal uses <code> inside table cells for values like MAC addresses.
   Strip our code styling so they match the surrounding cell text. */
#content td code, #content td pre, #content td kbd,
#content th code, #content th pre {
  font-family: inherit !important;
  background:  transparent !important;
  border:      none !important;
  border-radius: 0 !important;
  color:       inherit !important;
  font-size:   inherit !important;
  padding:     0 !important;
}

.progress-bar { background-color:var(--ma-primary) !important; }
input[type="checkbox"],input[type="radio"] { accent-color:var(--ma-primary) !important; }

::-webkit-scrollbar               { width:5px !important; height:5px !important; }
::-webkit-scrollbar-track         { background:transparent !important; }
::-webkit-scrollbar-thumb         { background:var(--ma-border) !important; border-radius:99px !important; }
::-webkit-scrollbar-thumb:hover   { background:var(--ma-text-muted) !important; }

::selection { background:var(--ma-primary-lt) !important; color:var(--ma-primary-hov) !important; }
:focus-visible { outline:2px solid var(--ma-primary) !important; outline-offset:2px !important; }

/* ============================================================
   REAL-TIME DOMAIN SEARCH — /portal/domains
   ============================================================ */

#ma-domain-count,
#ma-reseller-count {
  display:      inline-block !important;
  font-size:    11.5px !important;
  font-weight:  500 !important;
  color:        var(--ma-text-muted) !important;
  margin-top:   6px !important;
  margin-left:  12px !important;
  font-family:  var(--ma-font) !important;
}

#domains {
  width:        320px !important;
  font-size:    13.5px !important;
  padding:      8px 14px !important;
  border-radius:var(--ma-r-sm) !important;
  border:       1px solid var(--ma-border-in) !important;
  transition:   border-color var(--ma-t), box-shadow var(--ma-t) !important;
}

#domains:focus {
  border-color: var(--ma-border-foc) !important;
  box-shadow:   0 0 0 3px rgba(94,155,32,.12) !important;
  outline:      none !important;
}

/* ── Domain search pagination ────────────────────────────── */
#ma-domain-pager { margin-top: 16px !important; }

.ma-pager {
  display:     flex !important;
  align-items: center !important;
  gap:         4px !important;
  flex-wrap:   wrap !important;
  padding:     4px 0 !important;
}

.ma-pager-btn {
  min-width:    34px !important;
  height:       32px !important;
  padding:      0 10px !important;
  border:       1px solid var(--ma-border) !important;
  border-radius:var(--ma-r-sm) !important;
  background:   var(--ma-bg-card) !important;
  color:        var(--ma-text) !important;
  font-family:  var(--ma-font) !important;
  font-size:    13px !important;
  cursor:       pointer !important;
  transition:   background var(--ma-t), color var(--ma-t), border-color var(--ma-t) !important;
}

.ma-pager-btn:hover:not([disabled]) {
  background:   var(--ma-bg-hov) !important;
  border-color: var(--ma-primary) !important;
  color:        var(--ma-primary) !important;
}

.ma-pager-btn.ma-pager-active {
  background:   var(--ma-primary) !important;
  border-color: var(--ma-primary) !important;
  color:        #fff !important;
  font-weight:  600 !important;
  cursor:       default !important;
}

.ma-pager-btn[disabled] { opacity:.4 !important; cursor:default !important; }

.ma-pager-ellipsis {
  padding:   0 4px !important;
  color:     var(--ma-text-muted) !important;
  font-size: 13px !important;
}

.ma-pager-info {
  margin-left:  8px !important;
  font-size:    12px !important;
  color:        var(--ma-text-muted) !important;
  font-family:  var(--ma-font) !important;
}

/* ── Reseller filter dropdown ──────────────────────────────── */
#ma-reseller-wrap {
  display:        inline-block !important;
  vertical-align: middle !important;
  margin-left:    10px !important;
}

#ma-reseller-filter {
  height:       34px !important;
  padding:      0 28px 0 10px !important;
  font-size:    13px !important;
  font-family:  var(--ma-font) !important;
  color:        var(--ma-text) !important;
  background:   var(--ma-bg-input) !important;
  border:       1px solid var(--ma-border-in) !important;
  border-radius:var(--ma-r-sm) !important;
  appearance:   none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 8px center !important;
  cursor:       pointer !important;
  transition:   border-color var(--ma-t), box-shadow var(--ma-t) !important;
  min-width:    160px !important;
}

#ma-reseller-filter:focus {
  border-color: var(--ma-border-foc) !important;
  box-shadow:   0 0 0 3px rgba(94,155,32,.12) !important;
  outline:      none !important;
}

/* ── Pager layout: per-page left, nav right ────────────────── */
.ma-pager {
  display:         flex !important;
  align-items:     center !important;
  justify-content: space-between !important;
  flex-wrap:       wrap !important;
  gap:             8px !important;
  padding:         10px 0 !important;
}

.ma-pager-perpage {
  display:     flex !important;
  align-items: center !important;
  gap:         4px !important;
}

.ma-pager-nav {
  display:     flex !important;
  align-items: center !important;
  gap:         4px !important;
}

.ma-pager-label {
  font-size:   12px !important;
  color:       var(--ma-text-muted) !important;
  margin-right:4px !important;
  font-family: var(--ma-font) !important;
}

.ma-perpage-btn {
  min-width: 40px !important;
}

/* MAC address cells — linked ones green monospace, plain spans normal black monospace */
#content a.mac-cell,
#content td a.mac-cell:link,
#content td a.mac-cell:visited {
  color:           var(--ma-primary) !important;
  font-family:     var(--ma-font-mono) !important;
  font-size:       12px !important;
  text-decoration: none !important;
}

#content a.mac-cell:hover {
  text-decoration: underline !important;
  color:           var(--ma-primary-hov) !important;
}

#content span.mac-cell,
#content td span.mac-cell {
  color:       var(--ma-text) !important;
  font-family: var(--ma-font-mono) !important;
  font-size:   12px !important;
}

/* ── Sortable domain table headers ────────────────────────── */
th.ma-sortable-th {
  cursor:         pointer !important;
  user-select:    none !important;
  white-space:    nowrap !important;
  transition:     background var(--ma-t) !important;
}

th.ma-sortable-th:hover {
  background: var(--ma-bg-hov) !important;
  color:      var(--ma-primary) !important;
}

.ma-sort-arrow {
  font-size:   10px !important;
  margin-left: 4px !important;
  opacity:     1 !important;
  color:       var(--ma-primary) !important;
}

.ma-sort-idle {
  opacity:  0.3 !important;
  color:    var(--ma-text-muted) !important;
}

/* ── Domains refresh button ────────────────────────────────── */
#ma-domain-refresh {
  margin-right:   8px !important;
  vertical-align: middle !important;
}

@keyframes ma-spin { to { transform: rotate(360deg); } }
.ma-spin { display: inline-block !important; animation: ma-spin 0.8s linear infinite !important; }

/* ── Extra nav items divider + external badge ──────────────── */
.ma-nav-divider {
  height:     1px !important;
  background: rgba(255,255,255,0.1) !important;
  margin:     8px 12px !important;
}

.ma-ext-badge {
  margin-left:  auto !important;
  opacity:      0.5 !important;
  display:      flex !important;
  align-items:  center !important;
  flex-shrink:  0 !important;
}

.ma-item:hover .ma-ext-badge { opacity: 0.9 !important; }

/* ── Suppress NS portal floating table header on domains page ──
   Our code owns the thead and rewrites it; the floating clone
   clone fights with scroll events causing a bounce loop.      */
.domains-panel-main thead.tableFloatingHeader {
  display: none !important;
}

/* ── Stable domain table column layout ────────────────────────
   table-layout:fixed locks column widths to the thead so the
   browser doesn't recalculate them as different rows scroll
   into view (which causes columns to shift mid-scroll).      */
.domains-panel-main table {
  table-layout: fixed !important;
  width:        100% !important;
}

.domains-panel-main th[data-sort="domain"]        { width: 17% !important; }
.domains-panel-main th[data-sort="territory"]     { width: 15% !important; }
.domains-panel-main th[data-sort="description"]   { width: 22% !important; }
.domains-panel-main th[data-sort="activeCalls"]   { width: 9% !important; }
.domains-panel-main th[data-sort="externalCalls"] { width: 9% !important; }
.domains-panel-main th[data-sort="users"]         { width: 7% !important; }
.domains-panel-main th[data-sort="video"]         { width: 10% !important; }
.domains-panel-main th:last-child                 { width: 11% !important; min-width: 90px !important; }

/* Clip long text cleanly — no hover reflow exception */
.domains-panel-main td {
  overflow:      hidden !important;
  text-overflow: ellipsis !important;
  white-space:   nowrap !important;
}

/* Action buttons column — always reserve space so icons
   don't shift the layout when they appear on row hover  */
.domains-panel-main td.action-buttons {
  overflow:   visible !important;
  white-space:nowrap !important;
  text-align: right !important;
}

/* Ensure action icons are always visible (not opacity:0 until hover) */
.domains-panel-main td.action-buttons a.manage,
.domains-panel-main td.action-buttons a.edit,
.domains-panel-main td.action-buttons a.delete {
  opacity: 1 !important;
}


/* Ensure all user-toolbar list items are visible — the Admin/Update
   dropdown and any other items the portal adds must not be hidden */
.user-toolbar > li,
.user-toolbar > li.dropdown,
#header-user > ul > li {
  display:    inline-flex !important;
  align-items:center !important;
  visibility: visible !important;
  opacity:    1 !important;
}

/* ── Inventory phones — factory mode icon ─────────────────────
   data-value="no"  → green  (factory mode not set, normal)
   data-value="yes" → red    (factory mode active, caution)  */
#content a[data-icon-type="factory-mode"][data-value="no"] {
  color: var(--ma-primary) !important;
  opacity: 1 !important;
}

#content a[data-icon-type="factory-mode"][data-value="yes"] {
  color: var(--ma-danger) !important;
  opacity: 1 !important;
}

/* ============================================================
   LOGIN PAGE
   Two-panel split: left = white login card, right = brand panel
   CSS-only — no JS available on the login page
   ============================================================ */

/* Detect login page by presence of #login-container */
.page-container:has(#login-container) {
  display:         flex !important;
  flex-direction:  row !important;
  min-height:      100vh !important;
  background:      #fff !important;
  margin:          0 !important;
  padding:         0 !important;
}

/* Left panel — white, vertically centered */
#login-container {
  flex:            0 0 50% !important;
  max-width:       50% !important;
  min-height:      100vh !important;
  display:         flex !important;
  flex-direction:  column !important;
  justify-content: center !important;
  align-items:     center !important;
  padding:         48px 40px !important;
  background:      #fff !important;
  box-sizing:      border-box !important;
}

/* Right brand panel via ::after on .page-container */
.page-container:has(#login-container)::after {
  content:             '' !important;
  flex:                0 0 50% !important;
  min-height:          100vh !important;
  background-color:    var(--ma-bg-sb) !important;
  background-image:    url('https://portal.magicapple.tech/ns-api/?object=image&action=read&server=portal.magicapple.tech&filename=portal_landing.png&server=portal.magicapple.tech') !important;
  background-repeat:   no-repeat !important;
  background-position: center center !important;
  background-size:     55% auto !important;
}

/* Login box — remove card chrome, it lives in the white panel now */
#login-box {
  width:         100% !important;
  max-width:     380px !important;
  background:    transparent !important;
  box-shadow:    none !important;
  border:        none !important;
  padding:       0 !important;
}

/* Logo — centered, reasonable size */
#login-logo {
  text-align:    center !important;
  margin-bottom: 32px !important;
}
#login-logo img {
  max-width:     180px !important;
  height:        auto !important;
}

/* Welcome heading — inject via the login-logo area */
#login-group::before {
  content:     'Welcome back!' !important;
  display:     block !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size:   22px !important;
  font-weight: 600 !important;
  color:       #1a2b35 !important;
  text-align:  center !important;
  margin-bottom: 24px !important;
  max-width:   380px !important;
  width:       100% !important;
}

/* Form field labels */
#login-fields label {
  font-family:   'DM Sans', sans-serif !important;
  font-size:     13px !important;
  font-weight:   500 !important;
  color:         #4a5568 !important;
  margin-bottom: 4px !important;
  display:       block !important;
}

/* Form inputs */
#login-fields input[type="text"],
#login-fields input[type="password"] {
  width:         100% !important;
  padding:       10px 14px !important;
  border:        1px solid #d1d5db !important;
  border-radius: 6px !important;
  font-size:     14px !important;
  font-family:   'DM Sans', sans-serif !important;
  background:    #fff !important;
  color:         #1a2b35 !important;
  box-sizing:    border-box !important;
  margin-bottom: 14px !important;
  transition:    border-color 0.15s !important;
}
#login-fields input[type="text"]:focus,
#login-fields input[type="password"]:focus {
  border-color:  var(--ma-accent) !important;
  outline:       none !important;
  box-shadow:    0 0 0 3px rgba(91,184,212,0.15) !important;
}

/* Log In button */
#login-submit .btn {
  width:         100% !important;
  padding:       11px 0 !important;
  background:    var(--ma-primary) !important;
  border:        none !important;
  border-radius: 6px !important;
  color:         #fff !important;
  font-family:   'DM Sans', sans-serif !important;
  font-size:     15px !important;
  font-weight:   600 !important;
  cursor:        pointer !important;
  transition:    background 0.15s !important;
}
#login-submit .btn:hover {
  background:    var(--ma-primary-hov) !important;
}

/* Forgot links */
#reset-links {
  text-align:  center !important;
  margin-top:  4px !important;
}
#reset-links a {
  color:       var(--ma-text-link) !important;
  font-size:   13px !important;
  font-family: 'DM Sans', sans-serif !important;
}
#reset-links a:hover {
  color:       var(--ma-primary) !important;
}

/* OR separator */
.separator {
  margin: 18px 0 !important;
  color:  #9ca3af !important;
}

/* SSO buttons */
.ssoLoginBtn {
  width:         100% !important;
  border:        1px solid #d1d5db !important;
  border-radius: 6px !important;
  background:    #fff !important;
  color:         #374151 !important;
  font-family:   'DM Sans', sans-serif !important;
  font-size:     14px !important;
  margin-bottom: 10px !important;
  padding:       10px 0 !important;
  text-align:    center !important;
  cursor:        pointer !important;
  transition:    border-color 0.15s, box-shadow 0.15s !important;
}
.ssoLoginBtn:hover {
  border-color:  var(--ma-accent) !important;
  box-shadow:    0 1px 4px rgba(0,0,0,0.08) !important;
}

/* New user + language links */
.new-user-container,
.login-language-container {
  text-align:  center !important;
  margin-top:  14px !important;
}
.new-user-container a {
  color:       var(--ma-text-link) !important;
  font-size:   13px !important;
  font-family: 'DM Sans', sans-serif !important;
}

/* Footer */
#footer {
  text-align:  center !important;
  margin-top:  32px !important;
  color:       #9ca3af !important;
  font-size:   12px !important;
  font-family: 'DM Sans', sans-serif !important;
}
#footer p { margin: 2px 0 !important; }

/* Responsive — stack on small screens */
@media (max-width: 768px) {
  .page-container:has(#login-container) {
    flex-direction: column !important;
  }
  #login-container {
    flex:      1 1 auto !important;
    max-width: 100% !important;
    min-height: auto !important;
  }
  .page-container:has(#login-container)::after {
    display: none !important;
  }
}
