/* ProActive Radius — Minimal Enterprise design system */
:root{
  --me-bg:#f4f7fb;
  --me-surface:#ffffff;
  --me-surface-soft:#f8fafc;
  --me-text:#10233f;
  --me-muted:#64748b;
  --me-primary:#075ca8;
  --me-primary-hover:#064b89;
  --me-teal:#0fb5ad;
  --me-border:#dfe7f1;
  --me-border-soft:#eaf0f6;
  --me-success:#0f9f6e;
  --me-warning:#e69a17;
  --me-danger:#dc4c4c;
  --me-radius:10px;
  --me-radius-lg:14px;
  --me-shadow:0 6px 20px rgba(22,48,82,.06);
  --bg:var(--me-bg);
  --card:var(--me-surface);
  --text:var(--me-text);
  --muted:var(--me-muted);
  --primary:var(--me-primary);
  --cyan:var(--me-teal);
  --border:var(--me-border);
  --shadow:var(--me-shadow);
}

html{background:var(--me-bg);color-scheme:light}
body,body.admin-shell,body.reseller-shell{
  background:var(--me-bg)!important;
  color:var(--me-text)!important;
  font-family:Inter,"Segoe UI",Roboto,Arial,sans-serif!important;
  letter-spacing:0;
}
::selection{background:#cce8ff;color:#073d70}
:focus-visible{outline:3px solid rgba(7,92,168,.18)!important;outline-offset:2px}

/* App shell */
.sidebar{
  width:244px!important;
  background:var(--me-surface)!important;
  border-right:1px solid var(--me-border)!important;
  box-shadow:none!important;
}
.sidebar.collapsed{width:76px!important}
.main{margin-left:244px!important;background:var(--me-bg)!important}
.main.expanded{margin-left:76px!important}
.logo-area,.reseller-logo{
  height:104px!important;
  border-bottom:1px solid var(--me-border-soft)!important;
  padding:7px 14px!important;
}
.proactive-brand{flex-direction:column!important;justify-content:center!important;gap:0!important}
.proactive-brand-icon,
.proactive-brand-icon.custom-system-logo{width:180px!important;height:86px!important;max-width:180px!important;object-fit:contain!important;border-radius:0!important;filter:none!important}
.sidebar.collapsed .proactive-brand-icon,
.sidebar.collapsed .proactive-brand-icon.custom-system-logo{width:58px!important;height:72px!important;max-width:58px!important}
.proactive-brand-text,.logo-text{
  display:none!important;
}
.collapse-btn{
  top:116px!important;right:12px!important;width:30px!important;height:30px!important;
  border:1px solid var(--me-border)!important;border-radius:8px!important;
  color:var(--me-muted)!important;box-shadow:none!important;background:#fff!important;
}
.sidebar.collapsed .collapse-btn{right:-15px!important}
.menu{padding:14px 12px!important}
.menu-link{
  min-height:42px!important;margin:0 0 4px!important;padding:0 12px!important;
  border-radius:8px!important;color:#43536a!important;font-size:13px!important;font-weight:650!important;
  gap:11px!important;
}
.menu-link i:first-child{color:#52657d!important;font-size:14px!important}
.menu-link:hover{background:#f1f6fb!important;color:var(--me-primary)!important}
.menu-link.active,.menu-item.open>.menu-link{
  background:var(--me-primary)!important;color:#fff!important;box-shadow:0 5px 12px rgba(7,92,168,.16)!important;
}
.menu-link.active i,.menu-item.open>.menu-link i{color:#fff!important}
.submenu{padding:4px 0 8px 43px!important;border-left:1px solid var(--me-border-soft);margin-left:18px}
.submenu a{padding:7px 8px!important;color:var(--me-muted)!important;font-size:12px!important;border-radius:6px!important}
.submenu a:before{display:none!important}
.submenu a:hover{background:#eef5fb!important;color:var(--me-primary)!important}

.topbar{
  min-height:68px!important;height:auto!important;padding:10px 24px!important;
  background:rgba(255,255,255,.96)!important;border-bottom:1px solid var(--me-border)!important;
  box-shadow:none!important;backdrop-filter:blur(12px)!important;
}
.top-icon{
  width:36px!important;height:36px!important;border:1px solid var(--me-border-soft)!important;
  border-radius:9px!important;color:var(--me-primary)!important;background:#fff!important;
}
.info-box{
  min-width:100px!important;background:#fff!important;border:1px solid var(--me-border)!important;
  border-radius:9px!important;padding:8px 11px!important;color:var(--me-muted)!important;
}
.info-box b{color:var(--me-text)!important;font-size:14px!important}
.profile,.profile-trigger{
  background:#fff!important;border:1px solid var(--me-border)!important;border-radius:10px!important;
  box-shadow:none!important;padding:6px 9px!important;
}
.avatar{background:#eaf3fb!important;color:var(--me-primary)!important;border:1px solid #d7e7f5!important}
.profile-dropdown{
  border:1px solid var(--me-border)!important;border-radius:10px!important;
  box-shadow:0 18px 45px rgba(22,48,82,.14)!important;padding:7px!important;
}
.profile-dropdown a{border-radius:7px!important;font-weight:650!important}
.profile-dropdown a:hover{background:#f1f6fb!important}

.content{padding:24px 26px 34px!important;max-width:1680px;margin:0 auto;width:100%}
.page-title,.page-header,.mod-head,.pro-top{margin-bottom:18px!important}
.page-title h2,.page-header h1,.mod-head h2{
  color:var(--me-text)!important;font-size:20px!important;font-weight:800!important;letter-spacing:-.3px!important;
}
.page-title h2:before,.panel-title:before,.pro-title:before{
  background:var(--me-primary)!important;width:3px!important;border-radius:4px!important;
}
.page-header p,.page-title p,.mod-head p{color:var(--me-muted)!important}

/* Cards, panels and metrics */
.card,.panel,.section-card,.dashboard-card,.system-card,.pro-card,.pro-panel,.stat,.stat-card,
.summary-card,.metric-card,.filter-card,.form-card,.table-card,.settings-card,.hero,.bk-card,.bk-panel,
.scan-settings,.wallet-card,.quota-card,.live-card,.chart-card,.widget,.box:not(.swal2-popup){
  background:var(--me-surface)!important;
  border:1px solid var(--me-border)!important;
  border-radius:var(--me-radius-lg)!important;
  box-shadow:var(--me-shadow)!important;
}
.stats-grid,.cards-grid,.dashboard-grid,.summary-grid,.pro-grid,.scan-stats,.bk-grid{gap:14px!important}
.stat-card,.metric-card,.summary-card,.pro-card,.stat{padding:16px!important}
.stat-icon,.metric-icon,.card-icon{
  border-radius:10px!important;background:#e9f3fb!important;color:var(--me-primary)!important;
}
.stat-card strong,.metric-value,.pro-card b,.stat b{color:var(--me-text)!important;font-weight:800!important}
.panel-title,.pro-title,.card-title,.card-header h3{color:var(--me-text)!important;font-weight:800!important}
.card-header{border-bottom:1px solid var(--me-border-soft)!important}

/* Tables */
.table-wrap,.table-responsive,.pro-table-wrap,.tablewrap{border-radius:10px!important;overflow:auto!important}
table{border-collapse:separate!important;border-spacing:0!important;width:100%}
table thead th,table th,.pro-table th{
  background:#f2f6fa!important;color:#52657d!important;border-bottom:1px solid var(--me-border)!important;
  font-size:11px!important;font-weight:800!important;letter-spacing:.025em!important;text-transform:uppercase;
  padding:11px 12px!important;white-space:nowrap;
}
table td,.pro-table td{
  background:#fff!important;color:#233850!important;border-bottom:1px solid var(--me-border-soft)!important;
  padding:11px 12px!important;font-size:12.5px!important;
}
table tbody tr:last-child td{border-bottom:0!important}
table tbody tr:hover td{background:#f8fbfe!important}

/* Inputs and buttons */
input:not([type=checkbox]):not([type=radio]),select,textarea,.form-control,.pro-search{
  background:#fff!important;color:var(--me-text)!important;border:1px solid #cfdae7!important;
  border-radius:8px!important;box-shadow:none!important;min-height:40px;
}
input:focus,select:focus,textarea:focus,.form-control:focus{
  border-color:var(--me-primary)!important;box-shadow:0 0 0 3px rgba(7,92,168,.09)!important;outline:none!important;
}
label,.form-label{color:#43536a!important;font-weight:700!important}
button,.btn,.btnx,.primary-btn,.action-btn,a.btn{
  border-radius:8px!important;font-weight:750!important;box-shadow:none!important;transition:.16s ease!important;
}
.btn-primary,.btnx-primary,.btnx.primary,.primary-btn,.action-btn.primary,button.primary{
  background:var(--me-primary)!important;border-color:var(--me-primary)!important;color:#fff!important;
}
.btn-primary:hover,.btnx-primary:hover,.primary-btn:hover{background:var(--me-primary-hover)!important}
.btn-secondary,.btn-light,.btnx-light,.btnx.secondary{
  background:#fff!important;border:1px solid var(--me-border)!important;color:#43536a!important;
}
button:hover,.btn:hover,.btnx:hover{transform:translateY(-1px)}
button:disabled,.btn:disabled{opacity:.55!important;transform:none!important}

/* Status and utility elements */
.badge,.status-badge,.badge-sw,.pill,.tag{
  border-radius:999px!important;font-weight:750!important;box-shadow:none!important;
}
.success,.badge-success,.status-active{color:#087a55!important}
.error,.danger,.badge-danger{color:#b93838!important}
.alert,.notice,.notification-banner{border-radius:10px!important;box-shadow:none!important}
.modal,.modalx,.modal-backdrop-x{backdrop-filter:blur(3px)}
.modalbox,.modal-box,.modal-box-x,.system-page-modal-box{
  border:1px solid var(--me-border)!important;border-radius:14px!important;box-shadow:0 24px 70px rgba(22,48,82,.18)!important;
}
.modalhead,.modal-head,.modal-head-x,.system-page-modal-head{border-bottom:1px solid var(--me-border)!important}
.modalfoot,.modal-foot,.modal-foot-x{border-top:1px solid var(--me-border)!important}
.footer{color:#8a99ab!important;font-size:11px!important;padding:22px!important}
.swal2-popup{border-radius:14px!important;border:1px solid var(--me-border)!important}
.swal2-confirm{background:var(--me-primary)!important;border-radius:8px!important}

/* Desktop shell: layout.css positions .main with left, so never add a second margin. */
@media(min-width:769px){
  .main{
    position:fixed!important;
    left:244px!important;
    right:0!important;
    margin-left:0!important;
    width:auto!important;
  }
  .main.expanded{left:76px!important;margin-left:0!important}
  .topbar{height:68px!important;min-height:68px!important;flex:0 0 68px!important}
  .content{height:calc(100vh - 68px)!important;max-width:none!important;margin:0!important}
  [dir=rtl] .main{left:0!important;right:244px!important;margin-right:0!important}
  [dir=rtl] .main.expanded{left:0!important;right:76px!important;margin-right:0!important}

  /* Large users table: keep both scrollbars reachable inside the viewport. */
  .users-card:has(#usersTable){
    height:calc(100vh - 188px)!important;
    min-height:460px!important;
    max-width:100%!important;
    min-width:0!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
  }
  .users-card:has(#usersTable)>.table-wrap{
    flex:1 1 auto!important;
    min-height:0!important;
    width:100%!important;
    max-width:100%!important;
    overflow:auto!important;
    padding-bottom:8px!important;
    scrollbar-gutter:stable!important;
  }
  .users-card:has(#usersTable) #usersTable{
    width:max-content!important;
    min-width:100%!important;
    border-collapse:separate!important;
    border-spacing:0!important;
  }
  .users-card:has(#usersTable) #usersTable thead{position:static!important}
  .users-card:has(#usersTable) #usersTable thead tr:first-child th{
    position:sticky!important;
    top:0!important;
    z-index:10!important;
    height:30px!important;
  }
  .users-card:has(#usersTable) #usersTable thead .top-filter-row th{
    position:sticky!important;
    top:30px!important;
    z-index:9!important;
  }
  .users-card:has(#usersTable)>.pagination{
    flex:0 0 auto!important;
    margin-top:8px!important;
    padding-top:10px!important;
    border-top:0!important;
    background:#fff!important;
  }
  .users-card:has(#usersTable) #usersTable tbody tr.data-row td{
    background:#fff!important;
    border-top:1px solid var(--me-border-soft)!important;
    border-bottom:1px solid var(--me-border-soft)!important;
    height:36px!important;
    padding:2px 7px!important;
    line-height:1.15!important;
  }
  .users-card:has(#usersTable) #usersTable tbody tr.data-row td:first-child{
    display:table-cell!important;
    width:52px!important;
    min-width:52px!important;
    padding:2px 5px 2px 9px!important;
    background:#fff!important;
    border-left:1px solid var(--me-border-soft)!important;
    border-radius:0!important;
    vertical-align:middle!important;
    white-space:nowrap!important;
  }
  .users-card:has(#usersTable) #usersTable tbody tr.data-row td:last-child{
    border-right:1px solid var(--me-border-soft)!important;
    border-radius:0!important;
  }
  .users-card:has(#usersTable) .first-cell .row-check{
    display:inline-block!important;
    vertical-align:middle!important;
    margin:0 5px 0 0!important;
  }
  .users-card:has(#usersTable) .first-cell .row-menu-wrap{
    display:inline-block!important;
    vertical-align:middle!important;
  }
  .users-card:has(#usersTable) .first-cell .menu-dot{
    width:22px!important;
    height:28px!important;
    padding:0!important;
  }
  .users-card:has(#usersTable) #usersTable .service-name{
    font-size:11.5px!important;
    line-height:1.1!important;
  }
  .users-card:has(#usersTable) #usersTable .usage-clean-box{
    margin-top:1px!important;
  }
  .users-card:has(#usersTable) #usersTable .usage-clean-text{
    font-size:9px!important;
    line-height:1!important;
  }
  .users-card:has(#usersTable) #usersTable .usage-clean-bar{
    height:2px!important;
    margin-top:2px!important;
  }
  .users-card:has(#usersTable) #usersTable .wireless-signal-badge{
    padding:3px 6px!important;
    font-size:9px!important;
  }
  .users-card:has(#usersTable) #usersTable .fup-health{
    min-width:52px!important;
    padding:3px 7px!important;
    font-size:10px!important;
  }
  .users-card:has(#usersTable) #usersTable .fup-health i{font-size:11px!important}
  .users-card:has(#usersTable) #usersTable .ip-badge,
  .users-card:has(#usersTable) #usersTable .date-badge,
  .users-card:has(#usersTable) #usersTable .expiry-badge{
    padding:3px 6px!important;
    font-size:10px!important;
  }
  .users-card:has(#usersTable) #usersTable td[data-column="balance"]{
    min-width:250px!important;
    white-space:nowrap!important;
  }
  .users-card:has(#usersTable) #usersTable td[data-column="balance"]>.money,
  .users-card:has(#usersTable) #usersTable td[data-column="balance"]>small,
  .users-card:has(#usersTable) #usersTable td[data-column="balance"]>div{
    display:inline-flex!important;
    align-items:center!important;
    vertical-align:middle!important;
    margin:0 5px 0 0!important;
  }
  .users-card:has(#usersTable) #usersTable td[data-column="balance"] button{
    min-height:26px!important;
    height:26px!important;
    padding:3px 8px!important;
    margin:0!important;
    font-size:10px!important;
  }
}

/* Customer portal and legacy standalone pages */
.portal-sidebar{
  width:244px!important;background:#fff!important;border-right:1px solid var(--me-border)!important;
  box-shadow:none!important;
}
.portal-brand{height:84px!important;border-bottom:1px solid var(--me-border-soft)!important;flex-direction:row!important;justify-content:flex-start!important;padding:14px 18px!important}
.portal-brand img{width:38px!important;height:38px!important;border-radius:9px!important}
.portal-brand span{color:var(--me-text)!important;font-size:13px!important;font-weight:800!important}
.portal-main{margin-left:244px!important;background:var(--me-bg)!important}
.portal-menu{padding:14px 12px!important}
.portal-menu a,.portal-logout{border-radius:8px!important;font-weight:650!important;color:#43536a!important}
.portal-menu a:hover{background:#f1f6fb!important;color:var(--me-primary)!important}
.portal-menu a.active{background:var(--me-primary)!important;color:#fff!important;box-shadow:0 5px 12px rgba(7,92,168,.16)!important}
.portal-topbar{min-height:68px!important;height:auto!important;background:rgba(255,255,255,.96)!important;border-color:var(--me-border)!important;box-shadow:none!important}
.portal-content{padding:24px 26px 34px!important;max-width:1680px!important}
.online-badge{background:#edf9f6!important;color:#087a55!important;border-color:#ccece3!important;border-radius:8px!important}
.customer-profile{border-color:var(--me-border)!important;border-radius:10px!important}
.portal-login-card{border:1px solid var(--me-border)!important;border-radius:16px!important;box-shadow:0 20px 55px rgba(22,48,82,.11)!important}
.enterprise-standalone .topbar{background:#fff!important;border-bottom:1px solid var(--me-border)!important;box-shadow:none!important}
.enterprise-standalone .nav a{background:#f2f6fa!important;color:#43536a!important;border:1px solid var(--me-border)!important;border-radius:8px!important}
.enterprise-standalone .nav a.active{background:var(--me-primary)!important;color:#fff!important;border-color:var(--me-primary)!important}
.enterprise-standalone .nav a.logout{background:#fff5f5!important;color:var(--me-danger)!important;border-color:#f3d2d2!important}

/* Auth screens */
body.enterprise-auth{background:var(--me-bg)!important}
body.enterprise-auth:before{content:"";position:fixed;inset:0;background:linear-gradient(135deg,rgba(7,92,168,.045),transparent 42%,rgba(15,181,173,.04));pointer-events:none}
body.enterprise-auth .login-wrap,body.enterprise-auth .box{
  background:#fff!important;border:1px solid var(--me-border)!important;border-radius:16px!important;
  box-shadow:0 20px 55px rgba(22,48,82,.11)!important;
}
body.enterprise-auth .login-btn,body.enterprise-auth button{background:var(--me-primary)!important;border-radius:8px!important}
body.enterprise-auth .input-box{border:1px solid #cfdae7!important;border-radius:9px!important;background:#fff!important}
body.enterprise-auth .live-bg{opacity:.18!important}

/* Responsive */
@media(max-width:1100px){.content{padding:20px!important}}
@media(max-width:768px){
  .sidebar{width:244px!important;transform:translateX(-100%)}
  .sidebar.open{transform:translateX(0)!important}
  .main,.main.expanded{margin-left:0!important}
  .topbar{min-height:62px!important;padding:8px 14px!important}
  .content{padding:14px!important}
  .page-title h2,.page-header h1,.mod-head h2{font-size:18px!important}
  .card,.panel,.section-card,.system-card,.pro-panel{border-radius:11px!important}
  .modalbox,.modal-box,.modal-box-x{border-radius:12px 12px 0 0!important}
  .portal-sidebar{width:244px!important}
  .portal-main{margin-left:0!important}
  .portal-content{padding:14px!important}
}
@media(max-width:480px){
  .content{padding:10px!important}
  table td,table th{padding:10px!important}
  .topbar .info-box{display:none!important}
}

[dir=rtl] .sidebar{left:auto!important;right:0!important;border-right:0!important;border-left:1px solid var(--me-border)!important}
[dir=rtl] .main{margin-left:0!important;margin-right:244px!important}
[dir=rtl] .main.expanded{margin-right:76px!important}
@media(max-width:768px){[dir=rtl] .sidebar{transform:translateX(100%)}[dir=rtl] .sidebar.open{transform:translateX(0)!important}[dir=rtl] .main,[dir=rtl] .main.expanded{margin-right:0!important}}

/* Final sidebar brand sizing: keep wide uploaded logos visibly large. */
@media(min-width:769px){
  .sidebar:not(.collapsed) .logo-area.proactive-brand{
    height:122px!important;
    padding:8px 12px!important;
    align-items:center!important;
    justify-content:center!important;
    overflow:hidden!important;
  }
  .sidebar:not(.collapsed) .logo-area.proactive-brand .proactive-brand-icon,
  .sidebar:not(.collapsed) .logo-area.proactive-brand .proactive-brand-icon.custom-system-logo{
    display:block!important;
    width:210px!important;
    height:92px!important;
    max-width:210px!important;
    max-height:92px!important;
    flex:0 0 auto!important;
    object-fit:contain!important;
  }
  .sidebar:not(.collapsed) .logo-area.proactive-brand .proactive-brand-text,
  .sidebar:not(.collapsed) .logo-area.proactive-brand .logo-text{
    display:none!important;
  }
  .sidebar:not(.collapsed) .collapse-btn{top:130px!important;}
}