/* ============================================================
   Scutex — Client portal shell v3 (cloud-console / left sidebar).
   Loaded AFTER custom.css (which defines the --sx-* palette + base
   component theming). This file builds the bespoke logged-in layout:
   sidebar nav, topbar, dashboard, server cards, server management.
   ============================================================ */
:root{
  --sx-sb-w:248px;
  --sx-bg:#0A0F1C; --sx-deep:#0C1322; --sx-card:#111827; --sx-raised:#161F30;
  --sx-border:#1F2937; --sx-border2:#2B3648;
  --sx-green:#00D97E; --sx-green-h:#2BE89A; --sx-blue:#2979FF; --sx-amber:#F5A623; --sx-red:#FF5C5C;
  --sx-t1:#F9FAFB; --sx-t2:#C4CBD6; --sx-t3:#9AA3B2; --sx-t4:#6B7280; --sx-ink:#04231A;
}

/* ---------- Layout ---------- */
.sx-portal-body{ background:var(--sx-bg)!important; overflow-x:hidden; }
.sx-layout{ display:flex; min-height:100vh; align-items:stretch; }
.sx-sidebar{ flex:0 0 var(--sx-sb-w); width:var(--sx-sb-w); background:var(--sx-deep);
  border-right:1px solid var(--sx-border); display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh; overflow-y:auto; z-index:1040; }
.sx-content{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }

/* ---------- Sidebar ---------- */
.sx-sb-brand{ display:flex; align-items:center; justify-content:space-between; padding:18px 18px 14px; }
.sx-sb-logo{ display:inline-flex; align-items:center; gap:10px; font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:800; font-size:1.28rem; color:var(--sx-t1)!important; letter-spacing:-.01em; }
.sx-sb-logo img{ width:30px; height:30px; }
.sx-sb-close{ background:none; border:0; color:var(--sx-t3); font-size:1.25rem; line-height:1; }
.sx-sb-nav{ display:flex; flex-direction:column; gap:3px; padding:6px 12px; }
.sx-sb-link{ position:relative; display:flex; align-items:center; gap:12px; padding:10px 12px;
  border-radius:10px; color:var(--sx-t2)!important; font-weight:500; font-size:.95rem; }
.sx-sb-link i{ font-size:1.02rem; color:var(--sx-t3); width:20px; text-align:center; }
.sx-sb-link:hover{ background:var(--sx-raised); color:var(--sx-t1)!important; }
.sx-sb-link.is-active{ background:rgba(0,217,126,.10); color:var(--sx-t1)!important; }
.sx-sb-link.is-active i{ color:var(--sx-green); }
.sx-sb-link.is-active::before{ content:""; position:absolute; left:0; top:9px; bottom:9px; width:3px;
  border-radius:0 3px 3px 0; background:var(--sx-green); }
.sx-sb-deploy{ margin:14px 16px 6px; display:flex; align-items:center; justify-content:center; gap:8px;
  background:var(--sx-green)!important; color:var(--sx-ink)!important; font-weight:700; font-size:.9rem;
  padding:11px; border-radius:10px; }
.sx-sb-deploy:hover{ background:var(--sx-green-h)!important; color:var(--sx-ink)!important;
  box-shadow:0 10px 30px rgba(0,217,126,.22); }
.sx-sb-foot{ margin-top:auto; padding:15px 18px; border-top:1px solid var(--sx-border);
  font-size:.78rem; color:var(--sx-t3); display:flex; align-items:center; gap:8px; }
.sx-dot-on{ width:8px; height:8px; border-radius:50%; background:var(--sx-green); box-shadow:0 0 0 3px rgba(0,217,126,.18); flex:0 0 auto; }

/* ---------- Topbar ---------- */
.sx-topbar{ position:sticky; top:0; z-index:1030; display:flex; align-items:center; gap:12px;
  padding:11px 24px; background:rgba(10,15,28,.86); backdrop-filter:saturate(140%) blur(10px);
  -webkit-backdrop-filter:saturate(140%) blur(10px); border-bottom:1px solid var(--sx-border); min-height:62px; }
.sx-burger{ background:var(--sx-card); border:1px solid var(--sx-border); color:var(--sx-t1);
  width:40px; height:40px; border-radius:10px; font-size:1.1rem; }
.sx-topbar-brand{ display:inline-flex; align-items:center; gap:8px; font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:800; font-size:1.15rem; color:var(--sx-t1)!important; }
.sx-topbar-brand img{ width:26px; height:26px; }
.sx-topbar-title{ font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:1.05rem; color:var(--sx-t1); }
.sx-topbar-right{ margin-left:auto; display:flex; align-items:center; gap:10px; }
.sx-top-deploy{ display:inline-flex; align-items:center; gap:7px; background:rgba(0,217,126,.12);
  border:1px solid rgba(0,217,126,.25); color:var(--sx-green-h)!important; font-weight:600; font-size:.85rem;
  padding:8px 13px; border-radius:9px; }
.sx-top-deploy:hover{ background:rgba(0,217,126,.2); color:var(--sx-green-h)!important; }
.sx-icon-btn{ position:relative; width:40px; height:40px; border-radius:10px; background:var(--sx-card);
  border:1px solid var(--sx-border); color:var(--sx-t2)!important; display:inline-flex; align-items:center;
  justify-content:center; font-size:1.02rem; }
.sx-icon-btn:hover{ border-color:var(--sx-border2); color:var(--sx-t1)!important; }
.sx-notif-badge{ position:absolute; top:-5px; right:-5px; background:var(--sx-green); color:var(--sx-ink);
  font-size:.65rem; font-weight:700; min-width:17px; height:17px; border-radius:9px; display:flex;
  align-items:center; justify-content:center; padding:0 4px; }
.sx-user .sx-user-btn{ display:inline-flex; align-items:center; gap:9px; background:var(--sx-card);
  border:1px solid var(--sx-border); border-radius:10px; padding:5px 11px 5px 5px; color:var(--sx-t1)!important; }
.sx-user .sx-user-btn:hover{ border-color:var(--sx-border2); }
.sx-avatar{ width:30px; height:30px; border-radius:50%; background:rgba(0,217,126,.16); color:var(--sx-green-h);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.8rem; text-transform:uppercase; }
.sx-user-name{ font-size:.85rem; font-weight:600; }
.sx-user-menu{ background:var(--sx-card)!important; border:1px solid var(--sx-border)!important; border-radius:12px;
  padding:6px; box-shadow:0 16px 44px rgba(0,0,0,.55); min-width:210px; }
.sx-user-menu .dropdown-item{ color:var(--sx-t2)!important; border-radius:8px; padding:9px 12px; font-size:.88rem; }
.sx-user-menu .dropdown-item:hover{ background:var(--sx-raised)!important; color:var(--sx-t1)!important; }
.sx-user-menu .dropdown-item i{ color:var(--sx-t3); width:18px; }
.sx-user-menu .dropdown-divider{ border-color:var(--sx-border); margin:5px 4px; }

/* ---------- Main / footer ---------- */
.sx-main{ flex:1 1 auto; }
.sx-inner{ padding:26px 26px 40px; max-width:1240px; margin:0 auto; width:100%; }
.sx-foot{ padding:18px 26px; border-top:1px solid var(--sx-border); color:var(--sx-t4); font-size:.82rem;
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.sx-foot a{ color:var(--sx-t3)!important; }
.sx-foot a:hover{ color:var(--sx-green)!important; }

/* ---------- Account pages: contextual sub-nav ---------- */
.sx-with-sub{ display:grid; grid-template-columns:240px minmax(0,1fr); gap:22px; align-items:start; }
.sx-subnav .panel,.sx-subnav .list-group,.sx-subnav .card{ background:var(--sx-card)!important;
  border:1px solid var(--sx-border)!important; border-radius:14px; overflow:hidden; margin-bottom:16px; box-shadow:none; }
.sx-subnav .panel-heading,.sx-subnav .card-header,.sx-subnav .list-group-item-heading{ background:var(--sx-deep)!important;
  padding:12px 15px; font-weight:700; color:var(--sx-t1)!important; font-family:'Plus Jakarta Sans',sans-serif;
  font-size:.85rem; border-bottom:1px solid var(--sx-border)!important; }
.sx-subnav .list-group-item{ background:transparent!important; border:0!important; border-top:1px solid var(--sx-border)!important;
  padding:11px 15px; color:var(--sx-t2)!important; border-radius:0!important; }
.sx-subnav .list-group-item:first-child{ border-top:0!important; }
.sx-subnav .list-group-item:hover{ background:var(--sx-raised)!important; color:var(--sx-t1)!important; }
.sx-subnav .list-group-item.active{ background:rgba(0,217,126,.12)!important; color:var(--sx-green-h)!important; }
.sx-subnav .list-group-item i{ color:var(--sx-t3); width:18px; }
.sx-subnav .list-group-item.active i{ color:var(--sx-green); }

/* ---------- Page heading (reuses sx-dash-welcome from custom.css) ---------- */
.sx-page-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:14px; margin:0 0 22px; flex-wrap:wrap; }
.sx-page-head h1{ font-family:'Plus Jakarta Sans',sans-serif!important; font-size:1.7rem!important; font-weight:800;
  color:var(--sx-t1)!important; margin:0; letter-spacing:-.02em; }
.sx-page-head p{ color:var(--sx-t3)!important; margin:.25rem 0 0; font-size:.95rem; }
.sx-status-pill{ display:inline-flex; align-items:center; gap:8px; background:rgba(0,217,126,.10);
  border:1px solid rgba(0,217,126,.22); color:var(--sx-green-h); font-size:.78rem; font-weight:600;
  padding:7px 13px; border-radius:999px; }

/* ---------- Stat cards ---------- */
.sx-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px; margin-bottom:22px; }
.sx-stat{ background:var(--sx-card); border:1px solid var(--sx-border); border-radius:14px; padding:16px 18px; position:relative; }
.sx-stat .l{ font-size:.72rem; color:var(--sx-t3); text-transform:uppercase; letter-spacing:.05em; font-weight:600; }
.sx-stat .v{ font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:1.7rem; color:var(--sx-t1); margin-top:5px; line-height:1.1; }
.sx-stat .d{ font-size:.78rem; margin-top:3px; color:var(--sx-t4); }
.sx-stat .si{ position:absolute; top:15px; right:15px; width:34px; height:34px; border-radius:9px;
  background:var(--sx-deep); border:1px solid var(--sx-border); display:flex; align-items:center;
  justify-content:center; color:var(--sx-green); font-size:1rem; }

/* ---------- Two-column dashboard grid ---------- */
.sx-grid{ display:grid; grid-template-columns:minmax(0,1.7fr) minmax(0,1fr); gap:18px; align-items:start; }
.sx-rightcol{ display:flex; flex-direction:column; gap:18px; }

/* ---------- Panel (card) ---------- */
.sx-pcard{ background:var(--sx-card); border:1px solid var(--sx-border); border-radius:16px; overflow:hidden; }
.sx-pcard-h{ display:flex; align-items:center; justify-content:space-between; padding:15px 18px; border-bottom:1px solid var(--sx-border); }
.sx-pcard-t{ font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:.98rem; color:var(--sx-t1);
  display:flex; align-items:center; gap:9px; margin:0; }
.sx-pcard-t i{ color:var(--sx-green); font-size:1.02rem; }
.sx-pcard-link{ color:var(--sx-green-h)!important; font-size:.82rem; font-weight:600; }

/* ---------- Server cards ---------- */
.sx-srvgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(248px,1fr)); gap:14px; padding:16px; }
.sx-srvcard{ display:block; background:var(--sx-deep); border:1px solid var(--sx-border); border-radius:13px;
  padding:15px; color:var(--sx-t2)!important; transition:border-color .14s, transform .14s; }
.sx-srvcard:hover{ border-color:var(--sx-border2); transform:translateY(-2px); color:var(--sx-t2)!important; }
.sx-srvcard-top{ display:flex; align-items:center; gap:9px; margin-bottom:10px; }
.sx-srvcard-name{ font-family:'JetBrains Mono',monospace; font-weight:500; font-size:.86rem; color:var(--sx-t1);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sx-srvcard-top .sx-status{ margin-left:auto; }
.sx-srvcard-meta{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; font-size:.78rem; color:var(--sx-t3); margin-bottom:9px; }
.sx-srvcard-meta i{ font-size:.82rem; color:var(--sx-t4); }
.sx-chip{ background:var(--sx-raised); border:1px solid var(--sx-border); border-radius:7px; padding:2px 8px;
  font-size:.72rem; color:var(--sx-t2); }
.sx-srvcard-ip{ font-family:'JetBrains Mono',monospace; font-size:.8rem; color:var(--sx-t2); display:flex;
  align-items:center; gap:7px; margin-bottom:11px; }
.sx-srvcard-ip i{ color:var(--sx-t4); font-size:.85rem; }
.sx-meter{ margin-bottom:8px; }
.sx-meter-r{ display:flex; justify-content:space-between; font-size:.72rem; color:var(--sx-t3); margin-bottom:4px; }
.sx-bar{ height:5px; border-radius:3px; background:var(--sx-border); overflow:hidden; }
.sx-bar span{ display:block; height:100%; border-radius:3px; background:var(--sx-green); }
.sx-bar.blue span{ background:var(--sx-blue); }
.sx-srvcard-foot{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:12px;
  padding-top:12px; border-top:1px solid var(--sx-border); font-size:.78rem; color:var(--sx-t4); }
.sx-srvcard-go{ display:inline-flex; align-items:center; gap:5px; color:var(--sx-green-h); font-weight:600; }
.sx-dot{ width:9px; height:9px; border-radius:50%; flex:0 0 auto; }
.sx-dot.on{ background:var(--sx-green); box-shadow:0 0 0 3px rgba(0,217,126,.16); }
.sx-dot.off{ background:var(--sx-t4); }
.sx-dot.warn{ background:var(--sx-amber); box-shadow:0 0 0 3px rgba(245,166,35,.16); }

/* ---------- Billing summary + activity feed ---------- */
.sx-bill{ padding:18px; }
.sx-bill-label{ font-size:.72rem; color:var(--sx-t3); text-transform:uppercase; letter-spacing:.05em; font-weight:600; }
.sx-bill-amt{ font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:1.85rem; color:var(--sx-t1); margin-top:4px; }
.sx-bill-sub{ color:var(--sx-t3); font-size:.84rem; margin-top:3px; }
.sx-pay-btn{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%; background:var(--sx-green)!important;
  color:var(--sx-ink)!important; font-weight:700; font-size:.88rem; padding:11px; border-radius:10px; border:0; margin-top:14px; }
.sx-pay-btn:hover{ background:var(--sx-green-h)!important; color:var(--sx-ink)!important; }
.sx-bill-div{ height:1px; background:var(--sx-border); margin:15px 0; }
.sx-kv{ display:flex; justify-content:space-between; align-items:center; font-size:.84rem; padding:5px 0; }
.sx-kv .k{ color:var(--sx-t3); }
.sx-kv .v{ color:var(--sx-t1); font-family:'JetBrains Mono',monospace; }
.sx-feed{ padding:6px; }
.sx-fi{ display:flex; gap:12px; padding:10px 12px; align-items:flex-start; }
.sx-fi>i{ width:30px; height:30px; border-radius:9px; background:var(--sx-deep); border:1px solid var(--sx-border);
  color:var(--sx-green); display:inline-flex; align-items:center; justify-content:center; font-size:.82rem; flex:0 0 auto; }
.sx-fi .ft{ font-size:.84rem; color:var(--sx-t2); }
.sx-fi .fm{ font-size:.72rem; color:var(--sx-t4); margin-top:2px; }

/* ---------- Server management page ---------- */
.sx-note{ display:flex; align-items:flex-start; gap:11px; background:rgba(41,121,255,.10); border:1px solid rgba(41,121,255,.25);
  color:#A9C7FF; border-radius:12px; padding:12px 15px; font-size:.85rem; margin-bottom:18px; }
.sx-note i{ font-size:1.05rem; color:var(--sx-blue); flex:0 0 auto; margin-top:1px; }
.sx-bc{ display:flex; align-items:center; gap:8px; font-size:.84rem; color:var(--sx-t3); margin-bottom:14px; flex-wrap:wrap; }
.sx-bc a{ color:var(--sx-t3)!important; }
.sx-bc a:hover{ color:var(--sx-green)!important; }
.sx-bc b{ color:var(--sx-t1); font-family:'JetBrains Mono',monospace; font-weight:500; }
.sx-mgmt-head{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; background:var(--sx-card);
  border:1px solid var(--sx-border); border-radius:16px; padding:18px; margin-bottom:18px; }
.sx-mgmt-head h1{ font-family:'JetBrains Mono',monospace!important; font-weight:500; font-size:1.3rem!important;
  color:var(--sx-t1)!important; margin:0; }
.sx-mgmt-pills{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.sx-pwr{ margin-left:auto; display:flex; gap:8px; flex-wrap:wrap; }
.sx-pbtn{ display:inline-flex; align-items:center; gap:7px; background:var(--sx-raised); border:1px solid var(--sx-border2);
  color:var(--sx-t1)!important; border-radius:10px; padding:9px 14px; font-size:.84rem; font-weight:600; }
.sx-pbtn:hover{ border-color:var(--sx-green); color:var(--sx-t1)!important; }
.sx-pbtn.green{ background:var(--sx-green)!important; border-color:var(--sx-green)!important; color:var(--sx-ink)!important; }
.sx-pbtn.green:hover{ background:var(--sx-green-h)!important; color:var(--sx-ink)!important; }
.sx-pbtn.disabled{ opacity:.4; pointer-events:none; }
.sx-mgmt-grid{ display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:18px; align-items:start; }
.sx-charts{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.sx-ch{ background:var(--sx-card); border:1px solid var(--sx-border); border-radius:13px; padding:14px; }
.sx-ch-t{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:9px; }
.sx-ch-l{ font-size:.8rem; color:var(--sx-t3); font-weight:600; }
.sx-ch-v{ font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:1.05rem; color:var(--sx-t1); }
.sx-spark{ width:100%; height:42px; display:block; }
.sx-ch-f{ font-size:.72rem; color:var(--sx-t4); margin-top:7px; }
.sx-info-list .sx-kv{ padding:7px 0; border-bottom:1px solid var(--sx-border); }
.sx-info-list .sx-kv:last-child{ border-bottom:0; }
.sx-hw{ display:flex; flex-wrap:wrap; gap:7px; }
.sx-qa-list a{ display:flex; align-items:center; gap:11px; padding:12px 0; border-top:1px solid var(--sx-border);
  font-size:.88rem; color:var(--sx-t2)!important; }
.sx-qa-list a:first-child{ border-top:0; }
.sx-qa-list a:hover{ color:var(--sx-t1)!important; }
.sx-qa-list a>i:first-child{ color:var(--sx-green); width:20px; font-size:.95rem; }
.sx-qa-list a .chev{ margin-left:auto; color:var(--sx-t4); font-size:.8rem; }

/* ---------- Empty state (shared) ---------- */
.sx-empty{ text-align:center; padding:48px 24px; }
.sx-empty-ico{ display:inline-flex; width:60px; height:60px; border-radius:16px; background:var(--sx-deep);
  border:1px solid var(--sx-border); align-items:center; justify-content:center; color:var(--sx-green);
  font-size:1.6rem; margin-bottom:16px; }
.sx-empty h3{ color:var(--sx-t1)!important; font-family:'Plus Jakarta Sans',sans-serif!important; margin:0 0 6px; }
.sx-empty p{ color:var(--sx-t3)!important; margin:0 0 18px; }

/* ---------- Responsive ---------- */
@media (max-width:991.98px){
  .sx-sidebar{ position:fixed; left:0; top:0; bottom:0; height:100%; transform:translateX(-100%);
    transition:transform .25s ease; box-shadow:0 0 60px rgba(0,0,0,.6); }
  .sx-portal-body.sx-nav-open .sx-sidebar{ transform:translateX(0); }
  .sx-sidebar-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.55); opacity:0; visibility:hidden;
    transition:opacity .2s; z-index:1035; }
  .sx-portal-body.sx-nav-open .sx-sidebar-overlay{ opacity:1; visibility:visible; }
  .sx-grid{ grid-template-columns:1fr; }
  .sx-mgmt-grid{ grid-template-columns:1fr; }
  .sx-with-sub{ grid-template-columns:1fr; gap:14px; }
  .sx-inner{ padding:18px 15px 34px; }
  .sx-topbar{ padding:10px 14px; }
  .sx-pwr{ margin-left:0; width:100%; }
}
@media (max-width:575.98px){
  .sx-charts{ grid-template-columns:1fr; }
  .sx-page-head h1{ font-size:1.4rem!important; }
  .sx-mgmt-head h1{ font-size:1.1rem!important; }
  .sx-pbtn{ flex:1 1 auto; justify-content:center; }
  .sx-stat .v{ font-size:1.2rem; letter-spacing:-.01em; }
  .sx-stat{ padding:13px 14px; }
  .sx-stat .si{ top:12px; right:12px; width:26px; height:26px; font-size:.85rem; }
}

/* ---------- Standalone invoice document ---------- */
.sx-inv-bar{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 22px; border-bottom:1px solid var(--sx-border); margin-bottom:26px;
  background:var(--sx-deep); }
.sx-inv-bar .sx-sb-logo{ font-size:1.15rem; }
.sx-inv-back{ display:inline-flex; align-items:center; gap:7px; background:var(--sx-card);
  border:1px solid var(--sx-border2); color:var(--sx-t1)!important; border-radius:9px;
  padding:8px 13px; font-size:.84rem; font-weight:600; }
.sx-inv-back:hover{ border-color:var(--sx-green); color:var(--sx-t1)!important; }
.invoice-container{ max-width:900px; margin:0 auto; padding-bottom:48px; }
.invoice-status .unpaid,.invoice-status .draft{ color:var(--sx-amber)!important; font-weight:700; }
.invoice-status .paid{ color:var(--sx-green-h)!important; font-weight:700; }
.invoice-status .cancelled,.invoice-status .refunded,.invoice-status .collections{ color:#FF8A8A!important; font-weight:700; }
.invoice-container .total-row{ background:rgba(255,255,255,.02)!important; }