/* Vivacloud WHMCS Theme — vivacloud.css (unified)
   FlameNetworks S.r.l. — Design System 2026
   ========================================= */

/* ── Design Tokens 2026 ──────────────────────────────────────────────────── */
:root {
  --brand:#2b6fc4; --brand-dark:#1c5fb3; --brand-light:#3a85e0;
  --brand-bg:rgba(43,111,196,.08); --brand-bg2:rgba(43,111,196,.14);
  --accent:#e63a77; --accent-dark:#c2185b;
  --accent-bg:rgba(230,58,119,.10);

  --bg:#f6f7fb;
  --surface:#ffffff;
  --surface2:#fbfcfe;
  --fg:#0b1530;
  --fg2:#1e2a44;
  --muted:#6b7990;
  --muted2:#9aa6bd;
  --border:#e7ecf3;
  --border-dk:#dde5f1;

  --sb-w:260px;
  --sb-bg:#ffffff;
  --sb-border:#e7ecf3;
  --sb-text:#475569;
  --sb-text-strong:#1e293b;
  --sb-text-muted:#94a3b8;
  --sb-icon:#9aa6bd;
  --sb-hover-bg:#f1f5f9;
  --sb-active-bg:var(--brand);
  --sb-active-color:#fff;
  --sb-section:#9aa6bd;
  --sb-scrollbar:rgba(0,0,0,.06);

  --tb-h:60px;
  --tb-bg:rgba(255,255,255,.85);
  --tb-border:#e7ecf3;

  --r-xs:6px; --r-sm:10px; --r:14px; --r-lg:20px; --r-xl:24px;

  --shadow-xs:0 1px 2px rgba(16,30,68,.04);
  --shadow-sm:0 4px 18px rgba(16,30,68,.06);
  --shadow:0 12px 36px rgba(16,30,68,.08);
  --shadow-lg:0 24px 60px rgba(16,30,68,.14);

  --success:#22c55e;
  --success-bg:#f0fdf4;
  --warning:#f59e0b;
  --warning-bg:#fffbeb;
  --danger:#ef4444;
  --danger-bg:#fef2f2;
  --info:#3b82f6;
  --info-bg:#eff6ff;
  --hover-bg:#f1f5f9;
  --t:.2s cubic-bezier(.23,1,.32,1);

  --t-fast:.13s cubic-bezier(.23,1,.32,1);

  --warn:var(--warning);
  --warn-bg:var(--warning-bg);
}

html[data-vc-dark] .vc-overlay,
.vc-dark {
  --bg:#0a1224;
  --surface:#121c33;
  --surface2:#17223b;
  --fg:#f1f5f9;
  --fg2:#cbd5e1;
  --muted:#94a3b8;
  --muted2:#64748b;
  --border:#22304d;
  --border-dk:#2d3f55;
  --brand-bg:rgba(58,133,224,.16);
  --brand-bg2:rgba(58,133,224,.24);
  --accent-bg:rgba(230,58,119,.16);

  --tb-bg:rgba(18,28,51,.82);
  --tb-border:#22304d;

  --sb-bg:#0d1627;
  --sb-border:rgba(255,255,255,.07);
  --sb-text:rgba(255,255,255,.55);
  --sb-text-strong:#ffffff;
  --sb-text-muted:rgba(255,255,255,.3);
  --sb-icon:rgba(255,255,255,.35);
  --sb-hover-bg:rgba(255,255,255,.05);
  --sb-active-bg:var(--brand);
  --sb-active-color:#ffffff;
  --sb-section:rgba(255,255,255,.25);
  --sb-scrollbar:rgba(255,255,255,.06);
  --hover-bg:rgba(255,255,255,.07);

  --shadow-xs:0 1px 3px rgba(0,0,0,.3);
  --shadow-sm:0 2px 8px rgba(0,0,0,.4);
  --shadow:0 4px 16px rgba(0,0,0,.5);
  --shadow-lg:0 8px 32px rgba(0,0,0,.6);

  --success-bg:#052e16;
  --warning-bg:#1c1408;
  --danger-bg:#1a0a0a;
  --info-bg:#1e3a5f;
}

/* ── Reset & Base ───────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;}

body {
  margin:0;padding:0;
  font-family:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
  font-size:14px;line-height:1.6;
  background:var(--bg);
  color:var(--fg);
  -webkit-font-smoothing:antialiased;
}

a{color:var(--brand);text-decoration:none;transition:color var(--t-fast);}
a:hover{color:var(--brand-dark);}

img{max-width:100%;height:auto;}

/* ── Page Loader ────────────────────────────────────────────────────────── */
.vc-page-loader {
  position:fixed;inset:0;z-index:9999;
  background:linear-gradient(135deg,var(--surface),var(--surface2),var(--surface));
  background-size:400% 400%;
  display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:16px;
  transition:opacity .35s,visibility .35s;
  animation:vc-loader-bg 6s ease-in-out infinite;
}
@keyframes vc-loader-bg{50%{background-position:100% center;}}
.vc-page-loader.hidden{opacity:0;visibility:hidden;pointer-events:none;}
.vc-page-loader .spinner {
  width:44px;height:44px;
  border:3px solid var(--border);
  border-top-color:var(--brand);
  border-radius:50%;
  animation:vc-spin .7s linear infinite;
}
@keyframes vc-spin{to{transform:rotate(360deg);}}
.vc-page-loader .loader-logo {
  font-size:22px;font-weight:800;
  letter-spacing:-.5px;
  background:linear-gradient(135deg,var(--brand),var(--accent),var(--brand));
  background-size:200% auto;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:vc-grad-drift 2.5s ease-in-out infinite;
}
@keyframes vc-grad-drift{50%{background-position:100% center;}}

/* Sidebar: keep menu labels stable on hover/favorite reveal */
.vc-sidebar .vc-sb-item {
  min-width: 0;
}

.vc-sidebar .vc-sb-item > span:not(.vc-sb-hint):not(.vc-sb-badge) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vc-sidebar .vc-sb-item.sub {
  padding-right: 46px !important;
}

.vc-sidebar .vc-sb-li:hover > .vc-sb-item,
.vc-sidebar .vc-sb-li:hover > .vc-sb-item.sub {
  padding-right: 46px !important;
}

.vc-sidebar .vc-sb-hint {
  flex: 0 0 auto;
  margin-left: auto;
  white-space: nowrap;
}

.vc-sidebar .vc-sb-star {
  right: 8px !important;
}

/* ── App Shell ──────────────────────────────────────────────────────────── */
.vc-overlay {
  min-height:100vh;
  display:flex;
  background:var(--bg);
  transition:background var(--t),color var(--t);
}

.vc-auth-shell {
  min-height:100vh;width:100%;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#0b1530 0%,#1d3b73 60%,#2b6fc4 100%);
  padding:24px;
}
.vc-dark .vc-auth-shell {
  background:linear-gradient(135deg,#060e20 0%,#0d1a38 100%);
}
.vc-auth-card {
  width:100%;max-width:420px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  box-shadow:var(--shadow-lg);
  padding:40px 36px;
}
.vc-auth-logo {
  text-align:center;margin-bottom:28px;
}
.vc-auth-logo-text {
  font-size:26px;font-weight:800;
  letter-spacing:-.8px;
  background:linear-gradient(135deg,var(--brand),var(--accent));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}
.vc-auth-title{font-size:20px;font-weight:700;color:var(--fg);margin-bottom:6px;text-align:center;}
.vc-auth-sub{font-size:13px;color:var(--muted);text-align:center;margin-bottom:28px;}

.vc-auth-card .btn{width:100%;justify-content:center;}
.vc-auth-links{
  margin-top:20px;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  font-size:13px;color:var(--muted);
}
.vc-auth-links a{color:var(--brand);font-weight:500;}
.vc-auth-links a:hover{color:var(--brand-dark);}
.vc-auth-divider{width:100%;border:none;border-top:1px solid var(--border);margin:18px 0;}

/* Login split layout (restyle 2026) */
.vc-auth-shell.split{
  padding:0;
  align-items:stretch;
}
.vc-auth-shell.split .vc-auth-card{
  width:100%;max-width:none;
  border-radius:0;padding:0;
  background:transparent;
  border:none;box-shadow:none;
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:100vh;
}
@media (max-width:900px){
  .vc-auth-shell.split .vc-auth-card{ grid-template-columns:1fr; }
  .vc-auth-art{ display:none; }
}
.vc-auth-art{
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,#0b1530,#1d3b73 60%,#2b6fc4);
  color:#fff;
  padding:48px;
  display:flex;flex-direction:column;justify-content:space-between;
}
.vc-auth-art::before{
  content:'';position:absolute;left:-100px;top:-100px;
  width:380px;height:380px;border-radius:50%;
  background:radial-gradient(circle,rgba(230,58,119,.45),transparent 65%);
  pointer-events:none;
}
.vc-auth-art::after{
  content:'';position:absolute;right:-120px;bottom:-120px;
  width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle,rgba(66,133,244,.40),transparent 65%);
  pointer-events:none;
}
.vc-auth-art-top{position:relative;display:flex;align-items:center;gap:10px;}
.vc-auth-art-mid{position:relative;max-width:380px;}
.vc-auth-art-mid h2{
  font-size:38px;font-weight:800;
  letter-spacing:-1px;line-height:1.1;margin:0 0 14px;
  color:#fff;
}
.vc-auth-art-mid p{
  font-size:15px;opacity:.78;
  line-height:1.55;margin:0;
  color:#fff;
}
.vc-auth-feats{position:relative;display:grid;gap:12px;}
.vc-auth-feat{display:flex;align-items:center;gap:12px;font-size:13px;opacity:.9;}
.vc-auth-feat i{
  width:32px;height:32px;border-radius:9px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16);
  display:flex;align-items:center;justify-content:center;
}
.vc-auth-form{
  background:var(--surface);
  display:flex;flex-direction:column;justify-content:center;
  padding:48px 64px;
}
@media (max-width:600px){ .vc-auth-form{ padding:32px 24px; } }

/* ── Sidebar ────────────────────────────────────────────────────────────── */
.vc-sidebar {
  width:var(--sb-w);
  min-width:var(--sb-w);
  height:100vh;
  position:sticky;top:0;
  background:var(--sb-bg);
  border-right:1px solid var(--sb-border);
  display:flex;flex-direction:column;
  overflow:hidden;
  transition:width var(--t),min-width var(--t),transform var(--t),background var(--t),border-color var(--t);
  z-index:200;
  padding:14px 12px;
}
.vc-sb-logo-wrap {
  display:flex;align-items:center;
  padding:6px 10px 14px;
  border-bottom:1px solid var(--sb-border);
  flex-shrink:0;text-decoration:none;
  margin-bottom:10px;
  transition:opacity var(--t-fast);
}
.vc-sb-logo-wrap:hover{opacity:.85;}

.vc-sb-user {
  display:flex;align-items:center;gap:11px;
  padding:10px;
  margin:0 0 14px;
  background:var(--surface2);
  border:1px solid var(--sb-border);
  border-radius:var(--r);
  flex-shrink:0;
}
.vc-sb-avatar {
  width:36px;height:36px;border-radius:11px;
  background:linear-gradient(135deg,var(--brand),var(--accent));
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:700;color:#fff;
  flex-shrink:0;text-transform:uppercase;
}
.vc-sb-avatar img{width:36px;height:36px;border-radius:11px;object-fit:cover;}
.vc-sb-user-info{flex:1;min-width:0;}
.vc-sb-user-name{font-size:13px;font-weight:600;color:var(--sb-text-strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.vc-sb-user-sub{font-size:11px;color:var(--sb-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.vc-sb-user-edit {
  width:28px;height:28px;border-radius:var(--r-xs);flex-shrink:0;
  background:transparent;border:1px solid var(--sb-border);
  display:flex;align-items:center;justify-content:center;
  color:var(--sb-text-muted);font-size:11px;cursor:pointer;
  text-decoration:none;transition:background var(--t-fast),color var(--t-fast);
}
.vc-sb-user-edit:hover{background:var(--sb-hover-bg);color:var(--brand);}

.vc-sb-nav {
  flex:1;overflow-y:auto;overflow-x:hidden;
  padding:0;
  display:flex;flex-direction:column;gap:1px;
  scrollbar-width:thin;
  scrollbar-color:var(--sb-scrollbar) transparent;
}
.vc-sb-nav::-webkit-scrollbar{width:4px;}
.vc-sb-nav::-webkit-scrollbar-track{background:transparent;}
.vc-sb-nav::-webkit-scrollbar-thumb{background:var(--sb-scrollbar);border-radius:4px;}

.vc-sb-section-label {
  padding:14px 14px 6px;
  font-size:10px;font-weight:700;
  letter-spacing:1.4px;
  text-transform:uppercase;
  color:var(--sb-section);
}

.vc-sb-ul {list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:1px;}

.vc-sb-item {
  position:relative;
  display:flex;align-items:center;gap:11px;
  padding:9px 12px;
  font-size:13.5px;font-weight:500;
  color:#4d5a73;
  border-radius:10px;
  text-decoration:none;
  margin:0;
  transition:background .18s, color .18s, box-shadow .18s;
}
.vc-sb-item > .vc-sb-icon{
  width:18px;text-align:center;
  font-size:14px;
  color:var(--sb-icon);
  transition:color .18s, transform .18s;
  flex-shrink:0;
}
.vc-sb-item:hover{
  background:var(--sb-hover-bg);
  color:var(--sb-text-strong);
}
.vc-sb-item:hover > .vc-sb-icon{ color:var(--brand); }

.vc-sb-item.active{
  background:linear-gradient(135deg,var(--brand) 0%,var(--brand-light) 100%);
  color:#fff;
  font-weight:600;
  box-shadow:
    inset 4px 0 0 0 var(--accent),
    0 6px 16px rgba(43,111,196,.28);
}
.vc-sb-item.active > .vc-sb-icon{ color:#fff; }

.vc-sb-hint{
  margin-left:auto;
  font-size:10.5px;
  color:var(--muted2);
  font-weight:600;
  font-variant-numeric:tabular-nums;
  padding-left:8px;
  flex-shrink:0;
  white-space:nowrap;
  transition:color .15s, opacity .15s;
}
.vc-sb-item.active .vc-sb-hint{ color:rgba(255,255,255,.85); }
.vc-sb-item.sub.active .vc-sb-hint{ color:var(--brand); }

/* ── Sidebar groups ──────────────────────────────────────────────────────── */
.vc-sb-group{display:flex;flex-direction:column;}
.vc-sb-group-hdr{
  position:relative;
  display:flex;align-items:center;gap:11px;
  padding:9px 12px;
  font-size:13.5px;font-weight:500;
  color:#4d5a73;
  border-radius:10px;
  cursor:pointer;user-select:none;
  transition:background .18s, color .18s;
}
.vc-sb-group-hdr > .vc-sb-icon{
  width:18px;text-align:center;
  font-size:14px;
  color:var(--sb-icon);
  transition:color .18s;
  flex-shrink:0;
}
.vc-sb-group-hdr:hover{
  background:var(--sb-hover-bg);
  color:var(--sb-text-strong);
}
.vc-sb-group-hdr:hover > .vc-sb-icon{ color:var(--brand); }

.vc-sb-group-arrow{
  margin-left:8px;
  font-size:10px;
  color:#cbd5e1;
  transition:transform .28s cubic-bezier(.4,0,.2,1), color .18s;
}
.vc-sb-group.open > .vc-sb-group-hdr > .vc-sb-group-arrow{
  transform:rotate(90deg);
  color:var(--brand);
}
.vc-sb-group:has(.vc-sb-item.sub.active) > .vc-sb-group-hdr{
  color:var(--brand);
  font-weight:600;
}
.vc-sb-group:has(.vc-sb-item.sub.active) > .vc-sb-group-hdr > .vc-sb-icon{ color:var(--brand); }
.vc-sb-group:not(.open):has(.vc-sb-item.sub.active) > .vc-sb-group-hdr > .vc-sb-group-arrow{
  color:transparent;
  position:relative;
}
.vc-sb-group:not(.open):has(.vc-sb-item.sub.active) > .vc-sb-group-hdr > .vc-sb-group-arrow::before{
  content:'';
  position:absolute;
  left:50%;top:50%;
  width:6px;height:6px;border-radius:50%;
  background:var(--accent);
  transform:translate(-50%,-50%);
  box-shadow:0 0 8px rgba(230,58,119,.7);
  animation:vc-sb-pulse 1.8s ease-in-out infinite;
}
@keyframes vc-sb-pulse{
  0%,100%{ opacity:.6; transform:translate(-50%,-50%) scale(1); }
  50%    { opacity:1;  transform:translate(-50%,-50%) scale(1.3); }
}

.vc-sb-group-items{
  list-style:none;padding:0;margin:0;
  overflow:hidden;
  max-height:0;
  transition:max-height .38s cubic-bezier(.4,0,.2,1);
}
.vc-sb-group.open .vc-sb-group-items{ max-height:900px; }
.vc-sb-group-items > li{list-style:none;margin:0;padding:0;}

.vc-sb-item.sub{
  position:relative !important;
  padding:8px 12px 8px 38px !important;
  font-size:12.5px !important;font-weight:500 !important;
  color:#6b7990 !important;
  border-radius:8px !important;
  background:transparent !important;
  box-shadow:none !important;
  margin:1px 0 !important;
  transition:background .15s, color .15s, padding-left .15s, box-shadow .15s !important;
  background-image:
    linear-gradient(to bottom, var(--border-dk) 0%, var(--border-dk) 100%) !important;
  background-position:21px 0 !important;
  background-size:1.5px 100% !important;
  background-repeat:no-repeat !important;
  opacity:0;
  transform:translateX(-6px);
}
.vc-sb-group.open .vc-sb-item.sub{
  animation:vc-sb-sub-in .32s cubic-bezier(.4,0,.2,1) forwards !important;
}
.vc-sb-group.open .vc-sb-group-items > li:nth-child(1) > .vc-sb-item.sub{ animation-delay:.03s !important; }
.vc-sb-group.open .vc-sb-group-items > li:nth-child(2) > .vc-sb-item.sub{ animation-delay:.07s !important; }
.vc-sb-group.open .vc-sb-group-items > li:nth-child(3) > .vc-sb-item.sub{ animation-delay:.11s !important; }
.vc-sb-group.open .vc-sb-group-items > li:nth-child(4) > .vc-sb-item.sub{ animation-delay:.15s !important; }
.vc-sb-group.open .vc-sb-group-items > li:nth-child(5) > .vc-sb-item.sub{ animation-delay:.19s !important; }
.vc-sb-group.open .vc-sb-group-items > li:nth-child(6) > .vc-sb-item.sub{ animation-delay:.23s !important; }
.vc-sb-group.open .vc-sb-group-items > li:nth-child(7) > .vc-sb-item.sub{ animation-delay:.27s !important; }
.vc-sb-group.open .vc-sb-group-items > li:nth-child(8) > .vc-sb-item.sub{ animation-delay:.31s !important; }
@keyframes vc-sb-sub-in{
  to{ opacity:1; transform:translateX(0); }
}
.vc-sb-group.open > .vc-sb-group-items > li:first-child > .vc-sb-item.sub{
  background-image:
    linear-gradient(to bottom,
      transparent 0%, transparent 50%,
      var(--border-dk) 50%, var(--border-dk) 100%) !important;
}
.vc-sb-group.open > .vc-sb-group-items > li:last-child > .vc-sb-item.sub{
  background-image:
    linear-gradient(to bottom,
      var(--border-dk) 0%, var(--border-dk) 50%,
      transparent 50%, transparent 100%) !important;
}
.vc-sb-group.open > .vc-sb-group-items > li:only-child > .vc-sb-item.sub{
  background-image:none !important;
}

.vc-sb-item.sub::before{
  content:'' !important;
  position:absolute !important;
  left:22px !important;top:50% !important;
  width:11px !important;height:1.5px !important;
  background:var(--border-dk) !important;
  border-radius:0 !important;
  transform:translateY(-50%) !important;
  transition:background .15s, width .15s !important;
}
.vc-sb-item.sub > .vc-sb-icon{
  width:16px !important;
  font-size:12.5px !important;
  color:#9aa6bd !important;
  transition:color .15s, transform .15s !important;
}
.vc-sb-item.sub:hover{
  background-color:var(--sb-hover-bg) !important;
  color:var(--sb-text-strong) !important;
  padding-left:40px !important;
}
.vc-sb-item.sub:hover > .vc-sb-icon{
  color:var(--brand) !important;
  transform:translateX(1px) !important;
}
.vc-sb-item.sub:hover::before{
  background:var(--brand) !important;
  width:15px !important;
}
.vc-sb-item.sub.active{
  background-color:var(--brand-bg) !important;
  color:var(--brand) !important;
  font-weight:600 !important;
  box-shadow:inset 3px 0 0 var(--brand) !important;
}
.vc-sb-item.sub.active > .vc-sb-icon{ color:var(--brand) !important; }
.vc-sb-item.sub.active::before{
  background:var(--brand) !important;
  width:15px !important;height:2px !important;
}

a.vc-sb-item.sub.logout,
.vc-sb-group-items a.vc-sb-item.sub.logout{ color:#dc2626; }
a.vc-sb-item.sub.logout > .vc-sb-icon,
.vc-sb-group-items a.vc-sb-item.sub.logout > .vc-sb-icon{ color:#dc2626; }
a.vc-sb-item.sub.logout:hover{
  background-color:rgba(220,38,38,.08);
  color:#b91c1c;
}
a.vc-sb-item.sub.logout:hover > .vc-sb-icon{ color:#b91c1c; }
a.vc-sb-item.sub.logout:hover::before{ background:#dc2626; }

.vc-sb-badge {
  margin-left:auto;
  font-size:10.5px;font-weight:700;
  padding:1px 8px;border-radius:999px;
  min-width:20px;text-align:center;
  line-height:1.5;
  font-variant-numeric:tabular-nums;
}
.vc-sb-badge.danger{ background:rgba(225,29,72,.10);color:#b91c1c; }
.vc-sb-item.active .vc-sb-badge{ background:rgba(255,255,255,.22);color:#fff; }

.vc-sb-divider{height:1px;background:var(--sb-border);margin:8px 8px;}


/* Admin masquerade bar */
.vc-sb-masq {
  margin:8px 12px;padding:8px 12px;
  background:rgba(249,115,22,.1);border:1px solid rgba(249,115,22,.25);
  border-radius:var(--r-sm);
  font-size:12px;font-weight:500;
  color:#f97316;
  display:flex;align-items:center;gap:8px;
  flex-shrink:0;
}
.vc-dark .vc-sb-masq{background:rgba(249,115,22,.12);border-color:rgba(249,115,22,.2);}
.vc-dark .vc-sb-help-btn{background:rgba(255,255,255,.12)!important;color:#fff!important;}
.vc-dark .vc-sb-help-btn:hover{background:rgba(255,255,255,.2)!important;color:#fff!important;}
.vc-sb-masq-icon{flex-shrink:0;}
.vc-sb-masq-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.vc-sb-masq-link{
  color:#f97316;text-decoration:none;
  display:flex;align-items:center;gap:4px;
  flex-shrink:0;font-size:11px;
}
.vc-sb-masq-link:hover{color:var(--accent-dark);}

/* Help card */
.vc-sb-help{
  margin:12px 10px;
  padding:14px;
  border-radius:var(--r);
  background:linear-gradient(135deg,#0b1530,#1e2a44);
  color:#fff;
  position:relative;
  overflow:hidden;
}
.vc-sb-help:hover,
.vc-sb-help:focus{
  color:#fff!important;
  text-decoration:none!important;
  background:linear-gradient(135deg,#0b1530,#1e2a44)!important;
}
.vc-sb-help:hover .vc-sb-help-title,
.vc-sb-help:focus .vc-sb-help-title,
.vc-sb-help:hover .vc-sb-help-text,
.vc-sb-help:focus .vc-sb-help-text{
  color:#fff!important;
}
.vc-sb-help::after{
  content:'';position:absolute;
  right:-30px;bottom:-30px;
  width:120px;height:120px;border-radius:50%;
  background:radial-gradient(circle,rgba(230,58,119,.5),transparent 70%);
  pointer-events:none;
}
.vc-sb-help-title{position:relative;font-size:13px;font-weight:700;margin-bottom:4px;}
.vc-sb-help-text{position:relative;font-size:11.5px;opacity:.7;margin-bottom:10px;line-height:1.4;}
.vc-sb-help-btn{
  position:relative;display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;
  background:#fff;color:var(--fg);
  font-size:11.5px;font-weight:700;
  border-radius:7px;
  text-decoration:none;
}
.vc-sb-help:hover .vc-sb-help-btn,
.vc-sb-help:focus .vc-sb-help-btn,
.vc-sb-help-btn:hover{
  color:var(--fg)!important;
  background:#fff!important;
  text-decoration:none!important;
  transform:translateX(2px);
}

.vc-sb-footer-bottom {
  margin-top:auto;
  padding:10px 12px;
  font-size:10.5px;
  color:var(--muted2);
  border-top:1px solid var(--sb-border);
  display:flex;
  align-items:center;
  gap:8px;
}
.vc-sb-footer-ver {
  margin-left:auto;
  font-size:10px;
  font-weight:600;
  color:var(--muted2);
  opacity:.6;
  letter-spacing:.04em;
}

/* WHMCS injected sidebar panels */
.vc-sb-whmcs-panel{
  margin:12px 0 0;
  padding:12px 16px;
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:var(--r-sm);
}
.vc-sb-whmcs-panel-title{
  font-size:10px;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.6px;
  margin-bottom:10px;
  display:flex;align-items:center;gap:6px;
}
.vc-sb-whmcs-panel-title::before{
  content:'';display:block;width:3px;height:12px;
  background:var(--brand);border-radius:2px;
}
.vc-sb-whmcs-panel-body{font-size:13px;color:var(--fg);}
.vc-sb-whmcs-panel-body a{color:var(--brand);text-decoration:none;}
.vc-sb-whmcs-panel-body a:hover{text-decoration:underline;}
.vc-sb-whmcs-panel-body img{
  width:48px;height:48px;border-radius:50%;
  object-fit:cover;display:block;margin:0 auto 8px;
}
.vc-sb-whmcs-panel-body table{width:100%;font-size:12px;}
.vc-sb-whmcs-panel-body td{padding:2px 0;vertical-align:top;}
.vc-sb-whmcs-panel-body strong{color:var(--fg);}
.vc-dark .vc-sb-whmcs-panel{background:rgba(255,255,255,.04);}

/* ── Main area ──────────────────────────────────────────────────────────── */
.vc-main {
  flex:1;min-width:0;
  display:flex;flex-direction:column;
  overflow:hidden;
}

/* Topbar with glass effect */
.vc-topbar {
  height:var(--tb-h);
  min-height:var(--tb-h);
  background:var(--tb-bg);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--tb-border);
  display:flex;align-items:center;
  padding:0 28px;gap:14px;
  position:sticky;top:0;z-index:100;
  transition:background var(--t),border-color var(--t);
}
.vc-tb-hamburger {
  display:none;
  width:36px;height:36px;border-radius:var(--r-sm);
  background:transparent;border:1px solid var(--border);
  align-items:center;justify-content:center;
  cursor:pointer;color:var(--muted);font-size:15px;
  flex-shrink:0;transition:background var(--t-fast),color var(--t-fast);
}
.vc-tb-hamburger:hover{background:var(--brand-bg);color:var(--brand);}
.vc-tb-title { display:none; }
.vc-tb-right {display:flex;align-items:center;gap:6px;flex-shrink:0;}

/* Topbar search */
.vc-tb-search{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  flex:1;
  max-width:440px;
  min-width:0;
  height:38px;
  padding:0 14px;
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:10px;
  color:var(--muted);
  font-size:13px;
  cursor:text;
}
.vc-tb-search i{ color:var(--muted2); }
#vc-search-input{
  flex:1;
  min-width:0;
  background:transparent;
  border:none;
  outline:none;
  color:var(--fg);
  font-size:13.5px;
  padding:0 8px;
  line-height:1;
  height:100%;
}
#vc-search-input::placeholder{ color:var(--muted2); }
#vc-search-input::-webkit-search-cancel-button{ display:none; }
.vc-tb-search .kbd{
  margin-left:auto; font-size:10.5px; color:var(--muted2);
  background:var(--surface); border:1px solid var(--border);
  padding:1px 6px; border-radius:5px; font-weight:600;
}
.vc-tb-spacer{ flex:1; }

.vc-tb-btn {
  width:38px;height:38px;border-radius:var(--r-sm);
  background:transparent;
  border:1px solid transparent;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--muted);font-size:15px;
  transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast);
  position:relative;text-decoration:none;
}
.vc-tb-btn:hover{background:var(--surface2);color:var(--fg);border-color:var(--border);}
.vc-tb-btn .bell-dot {
  position:absolute;top:7px;right:7px;
  width:7px;height:7px;border-radius:50%;
  background:var(--accent);border:2px solid var(--tb-bg);
}
.vc-tb-btn .cart-count {
  position:absolute;top:5px;right:5px;
  min-width:15px;height:15px;border-radius:8px;
  background:var(--accent);color:#fff;
  font-size:9px;font-weight:700;line-height:15px;text-align:center;
  padding:0 3px;
}

/* Search dropdown panel */
.vc-search-dropdown{
  display:none;
  position:absolute;
  top:calc(100% + 8px);
  left:-14px;
  right:-14px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:var(--shadow-lg);
  z-index:9999;
  overflow:hidden;
  max-height:440px;
  overflow-y:auto;
}
.vc-search-dropdown.open{ display:block; }
.vc-dark .vc-search-dropdown,
html[data-vc-dark] .vc-search-dropdown{ box-shadow:0 8px 32px rgba(0,0,0,.4); }

.vc-search-section-label{
  font-size:10.5px;font-weight:700;
  letter-spacing:.6px;text-transform:uppercase;
  color:var(--muted);
  padding:4px 16px 4px;
}
.vc-search-result{
  display:flex;align-items:center;gap:10px;
  padding:9px 16px;
  text-decoration:none;color:var(--fg);font-size:13px;
  transition:background .1s;
  cursor:pointer;border:none;background:none;width:100%;text-align:left;
}
.vc-search-result:hover,
.vc-search-result.focused{
  background:var(--surface2);
  color:var(--fg);text-decoration:none;
}
.vc-search-result-icon{
  width:30px;height:30px;border-radius:8px;
  background:var(--brand-bg);color:var(--brand);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;flex-shrink:0;
}
.vc-search-result-icon.green{ background:rgba(22,163,74,.10);color:#16a34a; }
.vc-search-result-icon.cyan{ background:rgba(2,132,199,.10);color:#0284c7; }
.vc-search-result-icon.amber{ background:var(--warn-bg);color:var(--warn); }
.vc-search-result-icon.red{ background:var(--danger-bg);color:var(--danger); }
.vc-search-result-body{ flex:1;min-width:0; }
.vc-search-result-title{ font-size:13px;font-weight:600;color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.vc-search-result-sub{ font-size:11px;color:var(--muted);margin-top:1px; }
.vc-search-divider{ height:1px;background:var(--border);margin:4px 0; }
.vc-search-empty{ padding:28px 16px;text-align:center;color:var(--muted);font-size:13px; }
.vc-search-empty i{ font-size:24px;display:block;margin-bottom:8px;color:var(--muted2); }

/* Notifications popover */
.vc-notif-wrap{position:relative;}
.vc-notif-popover {
  position:absolute;top:calc(100% + 10px);right:0;
  width:300px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r);
  box-shadow:var(--shadow-lg);
  z-index:300;
  display:none;
  overflow:hidden;
}
.vc-notif-popover.open{display:block;}
.vc-notif-header{
  padding:12px 16px;border-bottom:1px solid var(--border);
  font-size:13px;font-weight:700;color:var(--fg);
}
.vc-notif-list{max-height:260px;overflow-y:auto;}
.vc-notif-item{
  display:flex;align-items:flex-start;gap:10px;
  padding:10px 16px;border-bottom:1px solid var(--border);
  font-size:13px;color:var(--fg2);
  text-decoration:none;transition:background var(--t-fast);
}
.vc-notif-item:hover{background:var(--surface2);}
.vc-notif-item:last-child{border-bottom:none;}
.vc-notif-icon{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:13px;}
.vc-notif-icon.danger{background:var(--danger-bg);color:var(--danger);}
.vc-notif-icon.warning{background:var(--warning-bg);color:var(--warning);}
.vc-notif-icon.info{background:var(--info-bg);color:var(--info);}
.vc-notif-icon.success{background:var(--success-bg);color:var(--success);}
.vc-notif-empty{padding:24px;text-align:center;color:var(--muted);font-size:13px;}

/* Scroll content */
.vc-scroll {
  flex:1;overflow-y:auto;overflow-x:hidden;
  scrollbar-width:thin;
  scrollbar-color:var(--border) transparent;
}
.vc-scroll::-webkit-scrollbar{width:6px;}
.vc-scroll::-webkit-scrollbar-track{background:transparent;}
.vc-scroll::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px;}

.vc-content {
  padding:28px 32px 40px;
  max-width:1280px;
  margin:0 auto;
  width:100%;
}

.vc-page-header {
  margin-bottom:22px;
}
.vc-page-header h1 {
  font-size:26px;font-weight:800;letter-spacing:-.6px;
  color:var(--fg);margin:0 0 2px;
}
.vc-page-header p {
  font-size:13.5px;color:var(--muted);margin:0;
}

/* Flash messages */
.vc-flash {
  padding:12px 28px 0;
  display:flex;flex-direction:column;gap:8px;
}
.vc-flash .alert{margin:0;}

/* Mobile overlay */
.vc-mob-overlay {
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,.5);z-index:190;
  opacity:0;transition:opacity var(--t);
}
.vc-mob-overlay.open{display:block;opacity:1;}

/* ── Dashboard Hero ──────────────────────────────────────────────────────── */
.vc-hero{
  position:relative;overflow:hidden;
  border-radius:var(--r-lg);
  padding:28px 32px;
  color:#fff;
  margin-bottom:22px;
  background:linear-gradient(120deg,#0b1530 0%,#1d3b73 55%,#2b6fc4 100%);
}
.vc-hero::before{
  content:'';position:absolute;right:-60px;top:-60px;
  width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,rgba(230,58,119,.55),transparent 65%);
  pointer-events:none;
}
.vc-hero::after{
  content:'';position:absolute;right:80px;bottom:-100px;
  width:260px;height:260px;border-radius:50%;
  background:radial-gradient(circle,rgba(66,133,244,.55),transparent 65%);
  pointer-events:none;
}
.vc-hero-inner{
  position:relative;
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:24px;flex-wrap:wrap;
}
.vc-hero-eyebrow{
  font-size:11.5px;font-weight:600;
  letter-spacing:1.3px;text-transform:uppercase;
  opacity:.7;margin-bottom:6px;
}
.vc-hero h1{
  font-size:30px;font-weight:800;
  letter-spacing:-.7px;margin:0 0 8px;
  line-height:1.15;
  color:#fff;
}
.vc-hero h1 span{
  background:linear-gradient(135deg,#fff,#fbcfe8);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.vc-hero p{
  font-size:14px;opacity:.78;
  margin:0;max-width:540px;line-height:1.55;
  color:#fff;
}
.vc-hero-cta{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap;}
.vc-hero .btn-primary{
  background:#fff !important;color:var(--fg) !important;
  border-color:#fff !important;
}
.vc-hero .btn-primary:hover{
  background:#f1f5f9 !important;color:var(--fg) !important;
  transform:translateY(-1px);
  box-shadow:0 8px 20px rgba(255,255,255,.25) !important;
}
.vc-hero .btn-ghost{
  background:rgba(255,255,255,.12);
  color:#fff;
  border:1px solid rgba(255,255,255,.18);
}
.vc-hero .btn-ghost:hover{ background:rgba(255,255,255,.2);color:#fff; }
/* Dark mode: hero primary button — glass instead of harsh white */
.vc-dark .vc-hero .btn-primary{
  background:rgba(255,255,255,.14) !important;
  color:#fff !important;
  border-color:rgba(255,255,255,.28) !important;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.vc-dark .vc-hero .btn-primary:hover{
  background:rgba(255,255,255,.22) !important;
  color:#fff !important;
  box-shadow:0 8px 20px rgba(255,255,255,.1) !important;
}
.vc-hero-side{
  position:relative;text-align:right;
  font-variant-numeric:tabular-nums;min-width:220px;
}
.vc-hero-side-label{ font-size:11.5px;opacity:.7;letter-spacing:1px;text-transform:uppercase; }
.vc-hero-side-val{ font-size:36px;font-weight:800;letter-spacing:-1px;margin:4px 0 2px; }
.vc-hero-side-sub{ font-size:12px;opacity:.7; }
.vc-hero-side-bar{
  margin-top:12px;width:220px;height:6px;
  background:rgba(255,255,255,.18);border-radius:999px;overflow:hidden;
  margin-left:auto;
}
.vc-hero-side-bar > div{
  height:100%;
  background:linear-gradient(90deg,#fbcfe8,#e63a77);
  border-radius:999px;
}

/* ── Dashboard Tiles ────────────────────────────────────────────────────── */
.vc-tiles {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:16px;
  margin-bottom:24px;
}
.vc-tile {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:20px;
  display:flex;align-items:center;gap:14px;
  text-decoration:none;
  cursor:pointer;
  transition:box-shadow var(--t),transform var(--t),border-color var(--t),background var(--t);
  box-shadow:var(--shadow-xs);
}
.vc-tile:hover{
  box-shadow:var(--shadow);
  transform:translateY(-1px);
  border-color:var(--brand-bg2);
  text-decoration:none;
}
.vc-tile-icon {
  width:46px;height:46px;border-radius:var(--r-sm);
  display:flex;align-items:center;justify-content:center;
  font-size:20px;flex-shrink:0;
}
.vc-tile-icon.blue{background:#eff6ff;color:#3b82f6;}
.vc-tile-icon.green{background:#f0fdf4;color:#22c55e;}
.vc-tile-icon.orange{background:#fff7ed;color:#f97316;}
.vc-tile-icon.purple{background:#faf5ff;color:#a855f7;}
.vc-tile-icon.pink{background:#fff0f6;color:var(--accent);}
.vc-tile-icon.teal{background:#f0fdfa;color:#14b8a6;}
.vc-dark .vc-tile-icon.blue{background:rgba(59,130,246,.15);}
.vc-dark .vc-tile-icon.green{background:rgba(34,197,94,.12);}
.vc-dark .vc-tile-icon.orange{background:rgba(249,115,22,.12);}
.vc-dark .vc-tile-icon.purple{background:rgba(168,85,247,.12);}
.vc-dark .vc-tile-icon.pink{background:rgba(233,30,140,.12);}
.vc-dark .vc-tile-icon.teal{background:rgba(20,184,166,.12);}
.vc-tile-body{min-width:0;}
.vc-tile-num{font-size:22px;font-weight:800;color:var(--fg);letter-spacing:-.5px;line-height:1;}
.vc-tile-label{font-size:12px;font-weight:500;color:var(--muted);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* ── Home Shortcuts ─────────────────────────────────────────────────────── */
.vc-shortcuts {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:12px;
}
.vc-shortcut {
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r);padding:18px 14px;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  text-decoration:none;
  transition:box-shadow var(--t),transform var(--t),border-color var(--t);
  box-shadow:var(--shadow-xs);
  text-align:center;
}
.vc-shortcut:hover{
  box-shadow:var(--shadow-sm);transform:translateY(-1px);
  border-color:var(--brand-bg2);text-decoration:none;
}
.vc-shortcut-icon{
  width:44px;height:44px;border-radius:var(--r-sm);
  background:var(--brand-bg);color:var(--brand);
  display:flex;align-items:center;justify-content:center;font-size:18px;
}
.vc-shortcut-label{font-size:13px;font-weight:600;color:var(--fg);}

/* ── Stat Cards (modern) ────────────────────────────────────────────────── */
.vc-stat-cards {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:16px;
  margin-bottom:24px;
  align-items:stretch;
}
@media (max-width:560px){ .vc-stat-cards{grid-template-columns:1fr;} }

.vc-stat-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:18px;
  padding:20px 48px 18px 18px;
  box-shadow:0 10px 28px rgba(16,30,68,.05);
  position:relative;
  text-decoration:none;
  color:inherit;
  transition:box-shadow .15s, transform .15s, border-color .15s;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height:148px;
  overflow:hidden;
  isolation:isolate;
}
.vc-stat-card::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:3px;
  background:linear-gradient(90deg,var(--brand),rgba(230,58,119,.74));
  opacity:0;
  transition:opacity .15s;
}
.vc-stat-card:hover{
  box-shadow:var(--shadow-sm);
  transform:translateY(-1px);
  border-color:var(--border-dk);
  text-decoration:none;color:inherit;
}
.vc-stat-card:hover::before{opacity:1;}
.vc-stat-card-row{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.vc-stat-icon{
  width:34px;height:34px;
  border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;
}
.vc-stat-label{font-size:12px;color:var(--muted);font-weight:500;}
.vc-stat-val{
  font-size:30px;font-weight:800;
  letter-spacing:-1px;line-height:1;
  color:var(--fg);
  font-variant-numeric:tabular-nums;
}
.vc-stat-trend{
  margin-top:8px;
  display:inline-flex;align-items:center;gap:5px;
  font-size:11.5px;font-weight:600;
  color:var(--success);
}
.vc-stat-trend.down{color:var(--danger);}
.vc-stat-trend.flat{color:var(--muted);}
.vc-stat-spark{
  position:absolute;right:18px;bottom:16px;
  opacity:.55;
  pointer-events:none;
}

/* ── Quick Actions (modern) ──────────────────────────────────────────────── */
.vc-quick-actions{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:14px;
  margin-bottom:24px;
  align-items:stretch;
}
@media (max-width:480px){ .vc-quick-actions{grid-template-columns:1fr;} }

.vc-qa-item{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:18px;
  padding:18px 52px 18px 18px;
  display:flex;
  align-items:center;gap:14px;
  text-decoration:none;
  color:var(--fg);
  transition:box-shadow .15s, transform .15s, border-color .15s;
  position:relative;
  min-height:88px;
  box-shadow:0 10px 28px rgba(16,30,68,.045);
}
.vc-qa-item:hover{
  box-shadow:var(--shadow-sm);
  transform:translateY(-1px);
  border-color:var(--border-dk);
  text-decoration:none;
}
.vc-qa-item > i{
  width:42px;height:42px;
  border-radius:12px;
  background:var(--brand-bg);color:var(--brand);
  display:flex;align-items:center;justify-content:center;
  font-size:17px;flex-shrink:0;
}
.vc-qa-item > i.qa-green{ background:rgba(22,163,74,.10);color:#16a34a; }
.vc-qa-item > i.qa-pink { background:var(--accent-bg);color:var(--accent); }
.vc-qa-item > i.qa-cyan { background:rgba(14,165,233,.10);color:#0ea5e9; }
.vc-qa-item > i.qa-amber{ background:rgba(217,119,6,.10);color:#d97706; }
.vc-qa-body{flex:1;min-width:0;}
.vc-qa-name{font-size:13.5px;font-weight:600;color:var(--fg);line-height:1.2;}
.vc-qa-desc{font-size:11.5px;color:var(--muted);margin-top:2px;}
.vc-qa-arr{margin-left:auto;color:#cbd5e1;transition:transform .15s,color .15s;}
.vc-qa-item:hover .vc-qa-arr{color:var(--brand);transform:translateX(2px);}

/* ── Status Pill ─────────────────────────────────────────────────────────── */
.vc-status{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px;border-radius:999px;
  font-size:11px;font-weight:600;
}
.vc-status .dotIco{ width:6px;height:6px;border-radius:50%;background:currentColor; }
.vc-status.ok    { background:rgba(22,163,74,.10);color:#15803d; }
.vc-status.warn  { background:rgba(217,119,6,.12);color:#b45309; }
.vc-status.danger{ background:rgba(225,29,72,.10);color:#b91c1c; }
.vc-dark .vc-status.ok{ color:#86efac; }
.vc-dark .vc-status.warn{ color:#fcd34d; }
.vc-dark .vc-status.danger{ color:#fca5a5; }

/* ── Dashboard Panels ───────────────────────────────────────────────────── */
.vc-dash-panels{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(360px,1fr));
  gap:18px;
  align-items:start;
}
@media (max-width:560px){ .vc-dash-panels{grid-template-columns:1fr;} }
.vc-dash-panels .card{
  border-radius:18px;
  box-shadow:0 10px 30px rgba(16,30,68,.045);
  overflow:hidden;
}
.vc-dash-panels .card-header{
  min-height:62px;
  padding-right:58px;
}
.vc-dash-panels .card-title{
  flex:1;
}
.vc-renewals .card-header{
  padding-right:58px;
}
.vc-renewals .card-title{
  flex:1;
}
.vc-dash-panels .vc-card-link,
.vc-renewals .vc-card-link{
  margin-right:28px;
}

.vc-panel-list{ display:flex;flex-direction:column; }
.vc-panel-row{
  display:flex;align-items:center;gap:14px;
  padding:14px 20px;
  border-top:1px solid var(--border);
  text-decoration:none;
  color:inherit;
  transition:background .12s;
}
.vc-panel-row:first-child{ border-top:none; }
.vc-panel-row:hover{ background:var(--surface2);text-decoration:none;color:inherit; }
.vc-panel-row-icon{
  width:38px;height:38px;
  border-radius:10px;
  background:var(--brand-bg);color:var(--brand);
  display:flex;align-items:center;justify-content:center;
  font-size:14px;flex-shrink:0;
}
.vc-panel-row .badge{ margin-left:auto !important; }
.vc-panel-row-label{ flex:1;min-width:0;font-size:13.5px;font-weight:600;color:var(--fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.vc-panel-row-meta{ font-size:11.5px;color:var(--muted);margin-top:2px; }

/* ── Invoice Alert ──────────────────────────────────────────────────────── */
.vc-inv-alert{
  display:flex;align-items:center;gap:14px;
  padding:14px 18px;
  background:#fff7ed;border:1px solid #fed7aa;
  border-radius:var(--r);
  color:#9a3412;font-size:13.5px;
  margin-bottom:20px;
}
.vc-dark .vc-inv-alert{ background:rgba(249,115,22,.12);border-color:rgba(249,115,22,.25);color:#fdba74; }
.vc-inv-alert > i{
  width:32px;height:32px;border-radius:9px;
  background:#f97316;color:#fff;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;font-size:14px;
}
.vc-inv-alert-text{flex:1;}
.vc-inv-alert-text a{font-weight:700;}
.vc-inv-alert-close{
  background:transparent;border:none;color:inherit;
  opacity:.6;cursor:pointer;padding:4px;
}
.vc-inv-alert-close:hover{opacity:1;}

/* ── Cards / Panels ─────────────────────────────────────────────────────── */
.card {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r);
  box-shadow:var(--shadow-xs);
  padding:20px;
  overflow:visible;
  transition:background var(--t),border-color var(--t);
}
.card:has(> .card-header),
.card:has(> .card-title:first-child),
.card:has(> .vc-panel-list),
.card:has(> form),
.card:has(> .vc-announcement),
.card:has(> .vc-empty-state){ padding:0; }

.card-header{
  padding:16px 20px 14px;
  display:flex;align-items:center;gap:12px;
  border-bottom:1px solid var(--border);
  background:transparent;
  position:relative;
  min-width:0;
}
.card-title{
  font-size:14.5px;font-weight:700;letter-spacing:-.2px;
  display:flex;align-items:center;gap:9px;
  margin:0;
  min-width:0;
}
.card-title .icon{
  width:26px;height:26px;
  border-radius:8px;
  background:var(--brand-bg);color:var(--brand);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;
}
.card-body{ padding:18px 20px; }
.card > .card-title{ padding:16px 20px 0; }
.card > .card-title:first-child{
  padding:16px 20px;
  border-bottom:1px solid var(--border);
  margin:0;
}
.card > .vc-shortcuts,
.card > .vc-quick-actions,
.card > .vc-panel-list{ padding:0; }

/* Card link button */
.vc-card-link{
  margin-left:auto;
  font-size:12.5px;color:var(--brand);
  font-weight:600;
  display:inline-flex;align-items:center;gap:6px;
  text-decoration:none;
  white-space:nowrap;
  flex-shrink:0;
  padding:6px 10px;
  border-radius:8px;
  line-height:1;
  transition:background .15s, color .15s;
}
.vc-card-link i{
  font-size:11px;display:inline-block;
  transition:transform .15s;line-height:1;vertical-align:middle;
}
.vc-card-link:hover{
  background:var(--brand-bg);
  color:var(--brand-dark);
}
.vc-card-link:hover i{ transform:translateX(2px); }

/* Wdes-block */
.wdes-block {
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r);padding:22px;margin-bottom:16px;
  box-shadow:var(--shadow-xs);
}
.wdes-block .section-title {
  font-size:15px;font-weight:700;color:var(--fg);
  margin-bottom:16px;padding-bottom:12px;
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:8px;
}

/* ── Product Detail / Utilities ─────────────────────────────────────────── */
.vc-product-detail-hero{
  background:
    radial-gradient(circle at 88% 32%, rgba(230,58,119,.55), transparent 26%),
    linear-gradient(135deg,#0f2248 0%, #173b78 54%, #315fc0 100%);
  color:#fff;
  border-radius:22px;
  padding:24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  box-shadow:0 18px 45px rgba(22,51,112,.22);
  overflow:hidden;
  position:relative;
  margin-bottom:18px;
}
.vc-product-detail-hero:after{
  content:"";
  position:absolute;
  right:24px;
  bottom:20px;
  width:160px;
  height:5px;
  border-radius:999px;
  background:linear-gradient(90deg,rgba(255,255,255,.55),rgba(230,58,119,.9));
}
.vc-product-detail-hero-left{
  display:flex;
  align-items:center;
  gap:16px;
  min-width:0;
  position:relative;
  z-index:1;
}
.vc-product-detail-hero-icon{
  width:58px;
  height:58px;
  border-radius:18px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.18);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.15);
  flex-shrink:0;
}
.vc-product-detail-kicker{
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.12em;
  opacity:.78;
  margin-bottom:4px;
}
.vc-product-detail-hero h2{
  margin:0;
  font-size:25px;
  line-height:1.1;
  letter-spacing:-.5px;
  color:#fff;
}
.vc-product-detail-hero p{
  margin:7px 0 0;
  max-width:720px;
  font-size:13px;
  line-height:1.55;
  color:rgba(255,255,255,.86);
}
.vc-product-module-panel{
  overflow:hidden;
}
.vc-product-module-panel > .panel-body{
  padding:20px;
}
.vc-product-alert{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:12px 14px 12px 16px !important;
  margin:0 0 18px !important;
}
.alert-dismissible.vc-product-alert{
  padding-right:14px !important;
}
.vc-product-alert-main{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  line-height:1.45;
}
.vc-product-alert-main > i{
  flex-shrink:0;
  font-size:15px;
}
.vc-product-alert-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;
  position:relative;
  z-index:2;
}
.vc-product-alert .btn{
  min-height:34px;
  white-space:nowrap;
  position:relative;
  z-index:1;
}
.vc-product-alert .btn-close,
.alert-dismissible.vc-product-alert .vc-alert-close{
  position:static !important;
  inset:auto !important;
  transform:none !important;
  width:34px;
  height:34px;
  min-width:34px;
  padding:0 !important;
  margin:0 !important;
  border:1px solid rgba(148,163,184,.35) !important;
  border-radius:10px !important;
  background-color:rgba(255,255,255,.55) !important;
  opacity:.72;
  flex-shrink:0;
}
.vc-product-alert .btn-close:hover,
.alert-dismissible.vc-product-alert .vc-alert-close:hover{
  opacity:1;
  background-color:#fff !important;
}
.vc-product-notes{
  margin-top:20px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r);
  box-shadow:var(--shadow-xs);
  overflow:hidden;
}
.vc-product-notes-head{
  display:flex;
  align-items:center;
  gap:14px;
  padding:18px 20px;
  background:linear-gradient(180deg,var(--surface),var(--surface2));
  border-bottom:1px solid var(--border);
}
.vc-product-notes-icon{
  width:48px;
  height:48px;
  border-radius:15px;
  background:var(--brand-bg);
  color:var(--brand);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  flex-shrink:0;
}
.vc-product-notes-kicker{
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:var(--muted);
  margin-bottom:3px;
}
.vc-product-notes h3{
  margin:0;
  font-size:18px;
  line-height:1.15;
  color:var(--fg);
  letter-spacing:-.2px;
}
.vc-product-notes p{
  margin:5px 0 0;
  color:var(--muted);
  font-size:13px;
  line-height:1.4;
}
.vc-product-notes-form{
  padding:18px 20px 20px;
}
.vc-product-notes textarea.form-control{
  min-height:132px;
  resize:vertical;
  line-height:1.55;
}
.vc-product-notes-actions{
  display:flex;
  justify-content:flex-end;
  margin-top:12px;
}
.vc-product-notes-saved{
  margin:16px 20px 0 !important;
}
@media (max-width:600px){
  .vc-product-detail-hero{
    padding:20px;
    border-radius:20px;
  }
  .vc-product-detail-hero-left{
    align-items:flex-start;
  }
  .vc-product-detail-hero-icon{
    width:50px;
    height:50px;
    border-radius:16px;
    font-size:21px;
  }
  .vc-product-detail-hero h2{
    font-size:22px;
  }
  .vc-product-detail-hero:after{
    right:20px;
    bottom:16px;
    width:120px;
  }
  .vc-product-alert{
    align-items:flex-start;
    flex-direction:column;
  }
  .vc-product-alert-actions{
    width:100%;
    justify-content:flex-end;
  }
  .vc-product-notes-head{
    align-items:flex-start;
  }
}

.grid-2{display:grid;grid-template-columns:1.6fr 1fr;gap:18px;}
@media (max-width:900px){.grid-2{grid-template-columns:1fr;}}

.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 24px;}
@media (max-width:600px){.detail-grid{grid-template-columns:1fr;}}
.info-label{font-size:11px;font-weight:600;color:var(--muted2);text-transform:uppercase;letter-spacing:.4px;margin-bottom:2px;}
.info-value{font-size:14px;font-weight:600;color:var(--fg);margin-top:4px;}

.action-bar{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px;padding-top:16px;border-top:1px solid var(--border);}
.action-column{display:flex;flex-direction:column;gap:9px;}

.section-block{margin-top:18px;padding-top:16px;border-top:1px solid var(--border);}
.section-label{font-size:11.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin-bottom:8px;}
.section-inner{font-size:14px;;}

.panel-title-icon{width:20px;text-align:center;margin-right:6px;font-size:15px;color:var(--brand);}

.module-client-area{padding:4px 0;}
.module-client-area a:not(.btn){color:var(--brand);}
.module-client-area a:not(.btn):hover{text-decoration:underline;}
.module-client-area .btn{margin:4px 4px 4px 0;}
.module-client-area table{width:100%;font-size:13px;color:var(--fg);}
.module-client-area table td{padding:6px 0;border-bottom:1px solid var(--border);}
.module-client-area h1,.module-client-area h2,.module-client-area h3,
.module-client-area h4,.module-client-area h5,.module-client-area h6{color:var(--fg);font-weight:700;margin:16px 0 8px;}
.module-client-area p{margin:0 0 10px;}

.gap-14{gap:14px;}
.gap-8{gap:8px;}
.gap-24{gap:24px;}
.pb-16{padding-bottom:16px;}
.bb{border-bottom:1px solid var(--border);}
.mb-20{margin-bottom:20px;}
.mb-8{margin-bottom:8px;}
.mt-4{margin-top:4px;}
.mt-8{margin-top:8px;}
.mt-12{margin-top:12px;}
.mt-16{margin-top:16px;}
.fs-18{font-size:18px;}
.fs-14{font-size:14px;}
.fs-13{font-size:13px;}
.fs-12{font-size:12px;}
.fw-700{font-weight:700;}
.fw-600{font-weight:600;}
.fw-500{font-weight:500;}
.text-fg{color:var(--fg);}

/* ── Renewals Widget ────────────────────────────────────────────────────── */
.vc-renewals{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r);
  overflow:hidden;
  box-shadow:var(--shadow-xs);
  margin-bottom:22px;
}
.vc-renewals-hdr{
  display:flex;align-items:center;gap:12px;
  padding:16px 20px 14px;
  border-bottom:1px solid var(--border);
}
.vc-renewals-hdr .icon{
  width:28px;height:28px;border-radius:8px;
  background:linear-gradient(135deg,var(--accent),#f472b6);
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;flex-shrink:0;
  box-shadow:0 4px 10px rgba(230,58,119,.25);
}
.vc-renewals-hdr .title{font-size:14.5px;font-weight:700;letter-spacing:-.2px;color:var(--fg);margin:0;}
.vc-renewals-hdr .subtitle{font-size:11px;color:var(--muted);font-weight:500;margin-top:2px;}
.vc-renewals-list{display:grid;grid-template-columns:repeat(2,1fr);}
@media (max-width:900px){ .vc-renewals-list{grid-template-columns:1fr;} }
.vc-renewal-item{
  display:flex;align-items:center;gap:12px;
  padding:14px 20px;
  border-top:1px solid var(--border);
  text-decoration:none;color:inherit;
  transition:background .12s;position:relative;
}
.vc-renewal-item:nth-child(even){border-left:1px solid var(--border);}
@media (max-width:900px){ .vc-renewal-item:nth-child(even){border-left:none;} }
.vc-renewal-item:hover{background:var(--surface2);text-decoration:none;color:inherit;}
.vc-renewal-item:only-child{grid-column:1/-1;}
.vc-renewal-icon{
  width:38px;height:38px;border-radius:11px;
  background:var(--brand-bg);color:var(--brand);
  display:flex;align-items:center;justify-content:center;
  font-size:14px;flex-shrink:0;
}
.vc-renewal-icon.domain{background:rgba(14,165,233,.10);color:#0ea5e9;}
.vc-renewal-icon.warn{background:var(--warn-bg);color:var(--warn);}
.vc-renewal-icon.danger{background:var(--danger-bg);color:var(--danger);}
.vc-renewal-body{flex:1;min-width:0;}
.vc-renewal-name{font-size:13px;font-weight:600;color:var(--fg);line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.vc-renewal-meta{display:flex;align-items:center;gap:8px;margin-top:4px;font-size:11.5px;color:var(--muted);}
.vc-renewal-meta .sep{color:var(--border-dk);}
.vc-renewal-meta b{color:var(--fg);font-weight:600;font-variant-numeric:tabular-nums;}
.vc-renewal-due{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 9px;border-radius:999px;
  font-size:11px;font-weight:700;
  background:var(--surface2);color:var(--muted);
  font-variant-numeric:tabular-nums;
  flex-shrink:0;margin-left:auto;
}
.vc-renewal-due.warn{background:var(--warn-bg);color:#b45309;}
.vc-renewal-due.danger{background:var(--danger-bg);color:#b91c1c;}
.vc-renewal-due i{font-size:9px;}
.vc-renewals-empty{padding:50px 20px;text-align:center;color:var(--muted);font-size:13px;}
.vc-renewals-empty > i{font-size:34px;color:#16a34a;display:block;margin-bottom:12px;}
.vc-renewals-empty .t{font-size:14px;font-weight:600;color:var(--fg);margin-bottom:4px;}

/* ── Announcements ───────────────────────────────────────────────────────── */
.vc-announcement{
  display:flex;gap:12px;
  padding:14px 20px;
  border-top:1px solid var(--border);
}
.vc-announcement:first-child{border-top:none;}
.vc-ann-date{
  width:48px;flex-shrink:0;text-align:center;
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:10px;
  padding:6px 0;
  height:fit-content;
}
.vc-ann-date .d{font-size:18px;font-weight:800;line-height:1;color:var(--fg);}
.vc-ann-date .m{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);margin-top:3px;}
.vc-announcement h4{font-size:13.5px;font-weight:600;margin:0 0 4px;}
.vc-announcement h4 a{color:var(--fg);}
.vc-announcement h4 a:hover{color:var(--brand);}
.vc-announcement p{font-size:12.5px;color:var(--muted);line-height:1.5;margin:0;}

/* ── Domain Search (homepage) ────────────────────────────────────────────── */
.vc-domain-search{
  position:relative;overflow:hidden;
  border-radius:var(--r-lg);
  padding:52px 32px 44px;
  text-align:center;color:#fff;
  margin-bottom:22px;
  background:
    radial-gradient(circle at 20% 30%,#3a7dd7 0%,transparent 55%),
    radial-gradient(circle at 80% 70%,#e63a77 0%,transparent 50%),
    linear-gradient(135deg,#0b1530,#1d3b73);
}
.vc-domain-search h2{
  font-size:34px;font-weight:800;
  margin:0 0 8px;letter-spacing:-.8px;line-height:1.1;
  color:#fff;
}
.vc-domain-search h2 em{
  font-style:normal;
  background:linear-gradient(135deg,#fff,#fbcfe8);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.vc-domain-search .sub{
  font-size:14.5px;opacity:.78;
  margin:0 auto 28px;max-width:520px;
  color:#fff;
}
.vc-domain-form{
  position:relative;z-index:1;
  max-width:620px;margin:0 auto;
  display:flex;gap:8px;
  background:#fff;
  padding:8px;border-radius:14px;
  box-shadow:0 24px 60px rgba(0,0,0,.35);
}
.vc-domain-form input.form-control{
  flex:1;border:none;background:transparent;
  font-size:15.5px;color:var(--fg);
  padding:0 14px;
  height:46px;
  box-shadow:none;
}
.vc-domain-form .btn{
  height:46px;
  padding:0 22px;
  border-radius:10px;
  font-size:13.5px;font-weight:700;
}
.vc-domain-form .btn-primary{
  background:linear-gradient(135deg,var(--brand),var(--brand-dark));
  border-color:transparent;color:#fff;
}
.vc-domain-form .btn-default{
  background:#f1f5f9;color:var(--fg);
  border-color:transparent;
}
.vc-tld-chips{
  position:relative;
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:8px;margin-top:18px;
}
.vc-tld-chips span{
  padding:5px 12px;border-radius:999px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16);
  font-size:12px;color:#fff;font-weight:600;
}
.vc-tld-chips span b{color:#fbcfe8;font-weight:700;margin-left:6px;}

/* ── Service Card (custom widget) ───────────────────────────────────────── */
.vc-svc-widget{
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:16px;
  margin-bottom:16px;
}
@media (max-width:1000px){ .vc-svc-widget{grid-template-columns:1fr;} }

.vc-svc-card{
  position:relative;
  border-radius:var(--r);padding:24px;
  color:#fff;overflow:hidden;
  background:linear-gradient(135deg,#1b3a6b 0%,#2b6fc4 100%);
  display:flex;align-items:center;gap:20px;
  text-decoration:none;
  transition:transform .15s,box-shadow .15s;
}
.vc-svc-card:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 32px rgba(43,111,196,.30);
  color:#fff;
}
.vc-svc-card::after{
  content:'';position:absolute;right:-40px;bottom:-40px;
  width:160px;height:160px;border-radius:50%;
  background:radial-gradient(circle,rgba(230,58,119,.45),transparent 65%);
  pointer-events:none;
}
.vc-svc-card-icon{
  position:relative;
  width:60px;height:60px;flex-shrink:0;
  border-radius:16px;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.20);
  display:flex;align-items:center;justify-content:center;
  font-size:24px;
}
.vc-svc-card-body{position:relative;flex:1;min-width:0;}
.vc-svc-card-num{
  font-size:42px;font-weight:800;line-height:1;
  letter-spacing:-1.5px;
  font-variant-numeric:tabular-nums;
}
.vc-svc-card-label{font-size:13px;opacity:.85;margin-top:6px;}
.vc-svc-card-cta{
  position:relative;
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 14px;
  background:#fff;color:#0b1530;
  border-radius:9px;
  font-size:12.5px;font-weight:700;
  text-decoration:none;flex-shrink:0;
}
.vc-svc-card-cta i{font-size:10px;}

.vc-svc-side{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r);padding:20px;
  display:flex;flex-direction:column;gap:12px;
  box-shadow:var(--shadow-xs);
}
.vc-svc-side-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--muted);}
.vc-svc-side-row{
  display:flex;align-items:center;gap:10px;
  padding:8px 0;border-bottom:1px solid var(--border);
  font-size:13.5px;color:var(--fg);
}
.vc-svc-side-row:last-child{border-bottom:none;}
.vc-svc-side-row i{
  width:32px;height:32px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;flex-shrink:0;
}
.vc-svc-side-row strong{font-weight:600;flex:1;min-width:0;}
.vc-svc-side-row .val{font-weight:700;color:var(--fg);font-variant-numeric:tabular-nums;}

/* ── Service Grid & Cards ───────────────────────────────────────────────── */
.svc-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:16px;
}
.svc-card {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:20px;
  box-shadow:var(--shadow-xs);
  display:flex;flex-direction:column;gap:16px;
  transition:box-shadow var(--t),border-color var(--t),transform var(--t);
}
.svc-card:hover{box-shadow:var(--shadow);transform:translateY(-1px);border-color:var(--brand-bg2);}
.svc-card-top{display:flex;align-items:center;gap:12px;}
.svc-icon {
  width:46px;height:46px;border-radius:var(--r-sm);
  background:var(--brand-bg);color:var(--brand);
  display:flex;align-items:center;justify-content:center;
  font-size:20px;flex-shrink:0;
}
.svc-meta{flex:1;min-width:0;}
.svc-name{font-size:14px;font-weight:700;color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.svc-plan{font-size:12px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.svc-info-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.svc-info-label{font-size:11px;font-weight:600;color:var(--muted2);text-transform:uppercase;letter-spacing:.4px;margin-bottom:2px;}
.svc-info-val{font-size:13.5px;font-weight:600;color:var(--fg);}
.svc-bar-track{height:5px;background:var(--border);border-radius:100px;overflow:hidden;}
.svc-bar-fill{height:5px;background:var(--brand);border-radius:100px;transition:width .5s cubic-bezier(.23,1,.32,1);}
.svc-bar-fill.warn{background:var(--warning);}
.svc-bar-fill.danger{background:var(--danger);}
.svc-actions{display:flex;gap:8px;flex-wrap:wrap;}
.svc-actions .btn{flex:1;justify-content:center;}

/* ── Table Wrapper ───────────────────────────────────────────────────────── */
.table-wrap {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r);
  overflow:hidden;
  box-shadow:var(--shadow-xs);
  overflow-x:auto;
}
.vc-table {
  width:100%;
  border-collapse:collapse;
  font-size:13.5px;
  color:var(--fg);
}
.vc-table thead th {
  background:var(--surface2);
  color:var(--muted);
  font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  padding:10px 16px;
  border-bottom:1px solid var(--border);
  white-space:nowrap;
  text-align:left;
}
.vc-table tbody td {
  padding:12px 16px;
  border-bottom:1px solid var(--border);
  vertical-align:middle;
  color:var(--fg);
}
.vc-table tbody tr:last-child td{border-bottom:none;}
.vc-table tbody tr:hover td{background:var(--surface2);}
.dom-name{font-weight:600;color:var(--fg);}
.dom-expiry{color:var(--muted);font-size:13px;}
.dom-expiry.expiring-soon{color:var(--warning);font-weight:600;}
.ticket-subject{font-weight:600;color:var(--fg);max-width:320px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ticket-dept{font-size:12px;color:var(--muted);}

/* ── Form inputs (native) ────────────────────────────────────────────────── */
.form-input,.form-select,.form-textarea {
  width:100%;
  padding:9px 12px;
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  background:var(--surface);
  color:var(--fg);
  font-size:13.5px;
  transition:border-color var(--t-fast),box-shadow var(--t-fast);
  font-family:inherit;
}
.form-input:focus,.form-select:focus,.form-textarea:focus{
  outline:none;
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(43,111,196,.15);
  background:var(--surface);
}
.form-input::placeholder,.form-textarea::placeholder{color:var(--muted2);}
.form-textarea{min-height:90px;resize:vertical;}
.form-label{font-size:12px;font-weight:600;color:var(--fg2);display:block;margin-bottom:5px;}
.form-group{margin-bottom:16px;}

/* ── Empty States ────────────────────────────────────────────────────────── */
.empty-state, .vc-empty-state {
  text-align:center;
  padding:64px 20px;
  color:var(--muted);
}
.empty-state i, .vc-empty-state > i{font-size:40px;display:block;margin-bottom:16px;color:var(--muted2);}
.empty-state h3, .vc-empty-state h3{font-size:17px;font-weight:700;color:var(--fg);margin:0 0 8px;}
.empty-state p, .vc-empty-state p{font-size:14px;color:var(--muted);margin:0;}
.vc-empty-state{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r);
}

/* ── Utility ─────────────────────────────────────────────────────────────── */
.vc-separator{height:1px;background:var(--border);margin:16px 0;}
.wdes-loading{display:none;}

/* ── Ticket Thread ────────────────────────────────────────────────────────── */
.vct-thread{ margin:6px 0 24px; }
.vct-msg{ animation:vct-fadein .25s ease-out; }
@keyframes vct-fadein{ from{ opacity:0;transform:translateY(4px); }to{ opacity:1;transform:none; } }
.vct-bubble{ transition:box-shadow .15s; }
.vct-bubble:hover{ box-shadow:var(--shadow-sm); }
.vc-dept-card:focus-visible{ outline:2px solid var(--brand);outline-offset:2px; }
.card > form{ padding:20px; }
.card > form .form-group:last-of-type{ margin-bottom:0; }

/* ── Search bar (page-level) ─────────────────────────────────────────────── */
.search-wrap {
  position:relative;margin-bottom:18px;
}
.search-wrap i {
  position:absolute;left:12px;top:50%;transform:translateY(-50%);
  color:var(--muted);font-size:13px;pointer-events:none;
}
.search-input {
  width:100%;
  padding:9px 12px 9px 34px;
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  background:var(--surface);
  color:var(--fg);
  font-size:13.5px;
  transition:border-color var(--t-fast),box-shadow var(--t-fast);
}
.search-input:focus{
  outline:none;
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(66,133,244,.15);
}
.search-input::placeholder{color:var(--muted2);}

/* ── Filter bar ──────────────────────────────────────────────────────────── */
.filter-bar {
  display:flex;flex-wrap:wrap;gap:6px;
  margin-bottom:18px;
}
.filter-tab {
  display:inline-flex;align-items:center;
  padding:6px 14px;
  border-radius:100px;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--muted);
  font-size:12px;font-weight:600;
  cursor:pointer;
  transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast);
  user-select:none;
}
.filter-tab:hover{background:var(--surface2);color:var(--fg);border-color:var(--border-dk);}
.filter-tab.active{background:var(--brand);color:#fff;border-color:var(--brand);}

/* ═══════════════════════════════════════════════════════════════════════════
   BS3→BS5 COMPATIBILITY LAYER (needs !important to override WHMCS core)
   ═══════════════════════════════════════════════════════════════════════════ */

.btn {
  border-radius:var(--r-sm) !important;
  font-size:13px !important;font-weight:600 !important;
  padding:8px 16px !important;
  border-width:1px !important;
  transition:all .15s !important;
  cursor:pointer;display:inline-flex;align-items:center;gap:6px;
}
.btn:focus{outline:none;box-shadow:0 0 0 3px rgba(43,111,196,.2) !important;}
.btn-xs{padding:4px 10px !important;font-size:11px !important;}
.btn-sm{padding:6px 12px !important;font-size:12px !important;}
.btn-lg{padding:11px 22px !important;font-size:15px !important;}

.btn-primary{background:var(--brand) !important;border-color:var(--brand) !important;color:#fff !important;}
.btn-primary:hover{background:var(--brand-dark) !important;border-color:var(--brand-dark) !important;transform:translateY(-1px);box-shadow:0 6px 16px rgba(43,111,196,.28) !important;}

.btn-default{background:var(--surface) !important;border-color:var(--border) !important;color:var(--fg) !important;}
.btn-default:hover{background:var(--surface2) !important;border-color:var(--border-dk) !important;color:var(--fg) !important;}

.btn-success{background:var(--success) !important;border-color:var(--success) !important;color:#fff !important;}
.btn-success:hover{background:#16a34a !important;border-color:#16a34a !important;color:#fff !important;}
.btn-danger{background:var(--danger) !important;border-color:var(--danger) !important;color:#fff !important;}
.btn-danger:hover{background:#dc2626 !important;border-color:#dc2626 !important;color:#fff !important;}
.btn-warning{background:var(--warning) !important;border-color:var(--warning) !important;color:#fff !important;}
.btn-warning:hover{background:#d97706 !important;border-color:#d97706 !important;color:#fff !important;}
.btn-info{background:var(--info) !important;border-color:var(--info) !important;color:#fff !important;}
.btn-info:hover{background:#2563eb !important;border-color:#2563eb !important;color:#fff !important;}

.btn-link{
  background:transparent !important;border-color:transparent !important;
  color:var(--brand) !important;padding-left:0 !important;padding-right:0 !important;
}
.btn-link:hover{color:var(--brand-dark) !important;text-decoration:underline;}

.btn-secondary{background:var(--surface) !important;border-color:var(--border) !important;color:var(--fg) !important;}
.btn-secondary:hover{background:var(--surface2) !important;border-color:var(--border-dk) !important;color:var(--fg) !important;}
.btn-ghost{background:transparent;border-color:var(--border);color:var(--fg2);}
.btn-ghost:hover{background:var(--surface2);border-color:var(--border-dk);color:var(--fg);}
.btn-brand{background:var(--brand);border-color:var(--brand);color:#fff;}
.btn-brand:hover{background:var(--brand-dark);border-color:var(--brand-dark);color:#fff;}
.btn-xs.btn-ghost{
  background:transparent;border:none;
  color:var(--brand);padding:6px 8px;font-weight:600;
}
.btn-xs.btn-ghost:hover{ background:var(--brand-bg); }

.panel {
  background:var(--surface) !important;
  border:1px solid var(--border) !important;
  border-radius:var(--r) !important;
  box-shadow:var(--shadow-xs) !important;
  margin-bottom:16px;
}
.panel-heading {
  background:var(--surface2) !important;
  border-bottom:1px solid var(--border) !important;
  border-radius:calc(var(--r) - 1px) calc(var(--r) - 1px) 0 0 !important;
  padding:14px 18px !important;
  font-weight:700;color:var(--fg) !important;font-size:14px !important;
}
.panel-body{padding:18px !important;color:var(--fg);}
.panel-footer{
  background:var(--surface2) !important;
  border-top:1px solid var(--border) !important;
  border-radius:0 0 calc(var(--r) - 1px) calc(var(--r) - 1px) !important;
  padding:12px 18px !important;
}
.panel-primary>.panel-heading{background:var(--brand) !important;border-color:var(--brand) !important;color:#fff !important;}
.panel-success>.panel-heading{background:var(--success) !important;border-color:var(--success) !important;color:#fff !important;}
.panel-warning>.panel-heading{background:var(--warning) !important;border-color:var(--warning) !important;color:#fff !important;}
.panel-danger>.panel-heading{background:var(--danger) !important;border-color:var(--danger) !important;color:#fff !important;}
.panel-info>.panel-heading{background:var(--info) !important;border-color:var(--info) !important;color:#fff !important;}

.form-control {
  background:var(--surface) !important;
  border:1px solid var(--border) !important;
  border-radius:10px !important;
  color:var(--fg) !important;
  padding:8px 12px !important;
  font-size:14px !important;
  height:auto !important;
  box-shadow:none !important;
  transition:border-color var(--t-fast),box-shadow var(--t-fast) !important;
}
.form-control:focus{
  border-color:var(--brand) !important;
  box-shadow:0 0 0 4px rgba(43,111,196,.12) !important;
  outline:none !important;background:var(--surface) !important;color:var(--fg) !important;
}
.form-control::placeholder{color:var(--muted2) !important;}
.form-control[disabled],.form-control[readonly]{
  background:var(--surface2) !important;color:var(--muted) !important;cursor:not-allowed;
}
select.form-control{appearance:auto;}
textarea.form-control{height:auto !important;min-height:90px;resize:vertical;}
.control-label{font-size:13px;font-weight:600;color:var(--fg2);margin-bottom:5px;}
.help-block{font-size:12px;color:var(--muted);margin-top:4px;}
.input-group-btn .btn{border-radius:0 var(--r-sm) var(--r-sm) 0 !important;height:100%;}
.input-group .form-control:first-child{border-radius:var(--r-sm) 0 0 var(--r-sm) !important;}
.input-group-addon{
  background:var(--surface2) !important;border-color:var(--border) !important;
  color:var(--muted) !important;
}

.table {
  color:var(--fg) !important;
  border-color:var(--border) !important;
  font-size:13.5px;
}
.table>thead>tr>th {
  background:var(--surface2) !important;
  color:var(--muted) !important;
  font-size:11px !important;font-weight:700 !important;letter-spacing:.5px !important;
  text-transform:uppercase !important;
  border-bottom:1px solid var(--border) !important;
  padding:10px 14px !important;white-space:nowrap;
}
.table>tbody>tr>td{
  padding:12px 14px !important;border-color:var(--border) !important;
  vertical-align:middle !important;color:var(--fg) !important;
}
.table>tbody>tr:hover>td{background:var(--surface2) !important;}
.table-bordered{border:1px solid var(--border) !important;}
.table-bordered>thead>tr>th,.table-bordered>tbody>tr>td{border:1px solid var(--border) !important;}
.table-striped>tbody>tr:nth-of-type(odd)>td{background:var(--surface2) !important;}
.table-responsive{border:none !important;}

.alert{
  border-radius:var(--r-sm) !important;
  border:1px solid !important;
  padding:12px 16px !important;
  font-size:13.5px !important;
}
.alert-success{background:var(--success-bg) !important;border-color:rgba(34,197,94,.3) !important;color:#15803d !important;}
.vc-dark .alert-success{color:#86efac !important;}
.alert-warning{background:var(--warning-bg) !important;border-color:rgba(245,158,11,.3) !important;color:#b45309 !important;}
.vc-dark .alert-warning{color:#fcd34d !important;}
.alert-danger{background:var(--danger-bg) !important;border-color:rgba(239,68,68,.3) !important;color:#b91c1c !important;}
.vc-dark .alert-danger{color:#fca5a5 !important;}
.alert-info{background:var(--info-bg) !important;border-color:rgba(59,130,246,.3) !important;color:#1d4ed8 !important;}
.vc-dark .alert-info{color:#93c5fd !important;}

.badge {
  border-radius:10px !important;font-size:10px !important;font-weight:700 !important;
  padding:3px 7px !important;line-height:1.2 !important;
  background:var(--brand) !important;color:#fff !important;
}
.label{border-radius:var(--r-xs) !important;font-size:11px !important;padding:3px 7px !important;font-weight:600 !important;}
.label-default{background:var(--muted2) !important;}
.label-primary{background:var(--brand) !important;}
.label-success{background:var(--success) !important;}
.label-warning{background:var(--warning) !important;}
.label-danger{background:var(--danger) !important;}
.label-info{background:var(--info) !important;}

.badge-success{background:var(--success) !important;color:#fff !important;}
.badge-warn,.badge-warning{background:var(--warning) !important;color:#fff !important;}
.badge-danger{background:var(--danger) !important;color:#fff !important;}
.badge-info{background:var(--info) !important;color:#fff !important;}
.badge-muted{background:var(--muted2) !important;color:#fff !important;}
.badge-brand{background:var(--brand) !important;color:#fff !important;}
.badge-brand-outline{background:transparent !important;color:var(--brand) !important;border:1px solid var(--brand);}

.list-group{border-radius:var(--r) !important;overflow:hidden;border:1px solid var(--border) !important;box-shadow:var(--shadow-xs);}
.list-group-item {
  background:var(--surface) !important;
  border-color:var(--border) !important;
  color:var(--fg) !important;
  padding:12px 16px !important;
  font-size:13.5px !important;
  transition:background var(--t-fast) !important;
}
.list-group-item:hover,.list-group-item:focus,
.list-group-item.active,.list-group-item.active:hover,.list-group-item.active:focus{
  background:var(--brand-bg) !important;
  border-color:var(--border) !important;
  color:var(--brand) !important;
}
.list-group-item+.list-group-item{border-top:1px solid var(--border) !important;}
.list-group-item .badge{float:right;}

.nav-tabs {
  border-bottom:1px solid var(--border) !important;
  margin-bottom:16px;
}
.nav-tabs>li>a {
  color:var(--muted) !important;
  border-radius:var(--r-sm) var(--r-sm) 0 0 !important;
  border:1px solid transparent !important;
  padding:9px 16px !important;
  font-size:13px !important;font-weight:500 !important;
  transition:color var(--t-fast),background var(--t-fast) !important;
}
.nav-tabs>li>a:hover{
  background:var(--surface2) !important;
  border-color:var(--border) !important;
  color:var(--fg) !important;text-decoration:none;
}
.nav-tabs>li.active>a,
.nav-tabs>li.active>a:hover,
.nav-tabs>li.active>a:focus {
  background:var(--surface) !important;
  border:1px solid var(--border) !important;
  border-bottom-color:var(--surface) !important;
  color:var(--brand) !important;font-weight:600 !important;
}
.nav-pills>li>a{
  border-radius:var(--r-sm) !important;
  color:var(--muted) !important;font-size:13px !important;
  transition:background var(--t-fast),color var(--t-fast) !important;
}
.nav-pills>li.active>a,.nav-pills>li.active>a:hover{background:var(--brand) !important;color:#fff !important;}
.nav-pills>li>a:hover{background:var(--surface2) !important;color:var(--fg) !important;}
.tab-content{color:var(--fg);}

.modal-content {
  background:var(--surface) !important;
  border:1px solid var(--border) !important;
  border-radius:var(--r-lg) !important;
  box-shadow:var(--shadow-lg) !important;
  color:var(--fg) !important;
}
.modal-header {
  border-bottom:1px solid var(--border) !important;
  padding:18px 22px !important;
}
.modal-header h4,.modal-title{font-size:16px !important;font-weight:700 !important;color:var(--fg) !important;}
.modal-body{padding:22px !important;color:var(--fg);}
.modal-footer{
  border-top:1px solid var(--border) !important;
  padding:14px 22px !important;background:var(--surface2) !important;
  border-radius:0 0 calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) !important;
}
.modal-backdrop{z-index:399 !important;}
.modal{z-index:400 !important;}

.dropdown-menu {
  background:var(--surface) !important;
  border:1px solid var(--border) !important;
  border-radius:var(--r) !important;
  box-shadow:var(--shadow-lg) !important;
  padding:6px !important;min-width:160px;
}
.dropdown-menu>li>a {
  color:var(--fg) !important;font-size:13px !important;
  padding:8px 12px !important;border-radius:var(--r-sm) !important;
  transition:background var(--t-fast) !important;
}
.dropdown-menu>li>a:hover,.dropdown-menu>li>a:focus{background:var(--surface2) !important;color:var(--fg) !important;}
.dropdown-menu>.active>a,.dropdown-menu>.active>a:hover{background:var(--brand) !important;color:#fff !important;}
.dropdown-menu .divider{background:var(--border) !important;margin:4px 0 !important;}

.pagination>li>a,.pagination>li>span {
  background:var(--surface) !important;border-color:var(--border) !important;
  color:var(--fg) !important;font-size:13px !important;
  transition:background var(--t-fast) !important;
}
.pagination>li>a:hover{background:var(--surface2) !important;border-color:var(--border-dk) !important;}
.pagination>.active>a,.pagination>.active>a:hover,.pagination>.active>span {
  background:var(--brand) !important;border-color:var(--brand) !important;color:#fff !important;
}
.pagination>li:first-child>a,.pagination>li:first-child>span{border-radius:var(--r-sm) 0 0 var(--r-sm) !important;}
.pagination>li:last-child>a,.pagination>li:last-child>span{border-radius:0 var(--r-sm) var(--r-sm) 0 !important;}
.pagination>.disabled>a,.pagination>.disabled>span{color:var(--muted2) !important;background:var(--surface2) !important;}

.breadcrumb {
  background:transparent !important;padding:0 !important;margin:0 0 16px !important;font-size:12px !important;
}
.breadcrumb>li+li::before{color:var(--muted2) !important;}
.breadcrumb>.active{color:var(--muted) !important;}
.breadcrumb a{color:var(--brand) !important;}

.well{
  background:var(--surface2) !important;border:1px solid var(--border) !important;
  border-radius:var(--r) !important;box-shadow:none !important;
  padding:18px !important;color:var(--fg) !important;
}
.progress{background:var(--border) !important;border-radius:100px !important;height:8px !important;box-shadow:none !important;}
.progress-bar{border-radius:100px !important;}
.progress-bar-success{background:var(--success) !important;}
.progress-bar-warning{background:var(--warning) !important;}
.progress-bar-danger{background:var(--danger) !important;}
.progress-bar-info{background:var(--info) !important;}

.checkbox label,.radio label{font-size:13.5px;color:var(--fg);cursor:pointer;}

.text-muted{color:var(--muted) !important;}
.text-primary{color:var(--brand) !important;}
.text-success{color:var(--success) !important;}
.text-warning{color:var(--warning) !important;}
.text-danger{color:var(--danger) !important;}
.text-info{color:var(--info) !important;}
h1,h2,h3,h4,h5,h6{color:var(--fg);font-weight:700;}
hr{border-color:var(--border) !important;}

.header-lined {
  padding:0 0 18px;margin-bottom:22px;
  border-bottom:1px solid var(--border);
}
.header-lined h1 {
  font-size:22px;font-weight:800;letter-spacing:-.5px;color:var(--fg);margin:0;
}
.header-lined small{font-size:13px;color:var(--muted);font-weight:400;}

.dataTables_wrapper .dataTables_filter input{
  border:1px solid var(--border) !important;background:var(--surface) !important;
  color:var(--fg) !important;border-radius:var(--r-sm) !important;padding:6px 10px !important;
}
.dataTables_wrapper .dataTables_length select{
  border:1px solid var(--border) !important;background:var(--surface) !important;
  color:var(--fg) !important;border-radius:var(--r-sm) !important;
}
.dataTables_info{color:var(--muted) !important;font-size:12px !important;}

/* ── Page Entry Animations ─────────────────────────────────────────────── */
@keyframes vc-fade-up{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}
@keyframes vc-fade-in{from{opacity:0;}to{opacity:1;}}
@keyframes vc-scale-in{from{opacity:0;transform:scale(.94);}to{opacity:1;transform:scale(1);}}

.vc-hero,.vc-ticket-hero,.vc-services-hero,.vc-profile-hero{animation:vc-fade-up .5s cubic-bezier(.23,1,.32,1) both;}
.vc-tiles .vc-tile{animation:vc-fade-up .45s cubic-bezier(.23,1,.32,1) both;}
.vc-tiles .vc-tile:nth-child(1){animation-delay:.04s;}
.vc-tiles .vc-tile:nth-child(2){animation-delay:.09s;}
.vc-tiles .vc-tile:nth-child(3){animation-delay:.14s;}
.vc-tiles .vc-tile:nth-child(4){animation-delay:.19s;}
.vc-tiles .vc-tile:nth-child(5){animation-delay:.24s;}
.vc-tiles .vc-tile:nth-child(6){animation-delay:.29s;}

.vc-shortcuts .vc-shortcut{animation:vc-fade-up .4s cubic-bezier(.23,1,.32,1) both;}
.vc-shortcuts .vc-shortcut:nth-child(1){animation-delay:.05s;}
.vc-shortcuts .vc-shortcut:nth-child(2){animation-delay:.10s;}
.vc-shortcuts .vc-shortcut:nth-child(3){animation-delay:.15s;}
.vc-shortcuts .vc-shortcut:nth-child(4){animation-delay:.20s;}
.vc-shortcuts .vc-shortcut:nth-child(5){animation-delay:.25s;}
.vc-shortcuts .vc-shortcut:nth-child(6){animation-delay:.30s;}

.vc-quick-actions .vc-qa-item{animation:vc-fade-up .4s cubic-bezier(.23,1,.32,1) both;}
.vc-quick-actions .vc-qa-item:nth-child(1){animation-delay:.06s;}
.vc-quick-actions .vc-qa-item:nth-child(2){animation-delay:.12s;}
.vc-quick-actions .vc-qa-item:nth-child(3){animation-delay:.18s;}
.vc-quick-actions .vc-qa-item:nth-child(4){animation-delay:.24s;}

.vc-stat-cards .vc-stat-card{animation:vc-fade-up .45s cubic-bezier(.23,1,.32,1) both;}
.vc-stat-cards .vc-stat-card:nth-child(1){animation-delay:.04s;}
.vc-stat-cards .vc-stat-card:nth-child(2){animation-delay:.10s;}
.vc-stat-cards .vc-stat-card:nth-child(3){animation-delay:.16s;}
.vc-stat-cards .vc-stat-card:nth-child(4){animation-delay:.22s;}

.vc-renewals,.vc-dash-panels .card{animation:vc-fade-up .5s cubic-bezier(.23,1,.32,1) both;}
.vc-dash-panels .card:nth-child(2){animation-delay:.12s;}

.vc-svc-list .vc-svc-card{animation:vc-fade-up .4s cubic-bezier(.23,1,.32,1) both;}
.vc-svc-list .vc-svc-card:nth-child(1){animation-delay:.03s;}
.vc-svc-list .vc-svc-card:nth-child(2){animation-delay:.07s;}
.vc-svc-list .vc-svc-card:nth-child(3){animation-delay:.11s;}
.vc-svc-list .vc-svc-card:nth-child(4){animation-delay:.15s;}
.vc-svc-list .vc-svc-card:nth-child(5){animation-delay:.19s;}
.vc-svc-list .vc-svc-card:nth-child(6){animation-delay:.23s;}
.vc-svc-list .vc-svc-card:nth-child(7){animation-delay:.27s;}
.vc-svc-list .vc-svc-card:nth-child(8){animation-delay:.31s;}

.vc-ticket-summary .vc-ticket-summary-item{animation:vc-fade-up .4s cubic-bezier(.23,1,.32,1) both;}
.vc-ticket-summary .vc-ticket-summary-item:nth-child(1){animation-delay:.05s;}
.vc-ticket-summary .vc-ticket-summary-item:nth-child(2){animation-delay:.10s;}
.vc-ticket-summary .vc-ticket-summary-item:nth-child(3){animation-delay:.15s;}
.vc-ticket-summary .vc-ticket-summary-item:nth-child(4){animation-delay:.20s;}

.vc-ticket-reply-card,.vc-ticket-thread .vc-ticket-message{animation:vc-fade-up .45s cubic-bezier(.23,1,.32,1) both;}
.vc-ticket-thread .vc-ticket-message:nth-child(1){animation-delay:.06s;}
.vc-ticket-thread .vc-ticket-message:nth-child(2){animation-delay:.12s;}
.vc-ticket-thread .vc-ticket-message:nth-child(3){animation-delay:.18s;}
.vc-ticket-thread .vc-ticket-message:nth-child(4){animation-delay:.24s;}
.vc-ticket-thread .vc-ticket-message:nth-child(5){animation-delay:.30s;}
.vc-ticket-thread .vc-ticket-message:nth-child(6){animation-delay:.36s;}

.vc-profile-grid .vc-profile-card{animation:vc-fade-up .45s cubic-bezier(.23,1,.32,1) both;}
.vc-profile-grid .vc-profile-card:nth-child(1){animation-delay:.05s;}
.vc-profile-grid .vc-profile-card:nth-child(2){animation-delay:.12s;}
.vc-profile-grid .vc-profile-card:nth-child(3){animation-delay:.19s;}
.vc-profile-grid .vc-profile-card:nth-child(4){animation-delay:.26s;}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .vc-sidebar *{ animation:none;transition:none; }
  .vc-sidebar .vc-sb-item.sub{ opacity:1;transform:none; }
  *{ animation-duration:0s!important;transition-duration:0s!important; }
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width:991px) {
  .vc-sidebar {
    position:fixed;top:0;left:0;height:100vh;
    transform:translateX(-100%);z-index:200;
    box-shadow:var(--shadow-lg);
  }
  .vc-sidebar.open{transform:translateX(0);}
  .vc-tb-hamburger{display:flex;}
  .vc-content{padding:18px 16px 32px;}
  .vc-flash{padding:12px 16px 0;}
  .vc-topbar{padding:0 16px;}
  .vc-tiles{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;}
  .vc-shortcuts{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));}
}

@media (max-width:576px) {
  .vc-tiles{grid-template-columns:1fr 1fr;gap:10px;}
  .vc-tile{padding:14px 12px;gap:10px;}
  .vc-tile-icon{width:38px;height:38px;font-size:16px;}
  .vc-tile-num{font-size:18px;}
  .vc-shortcuts{grid-template-columns:1fr 1fr;gap:10px;}
  .vc-shortcut{padding:14px 10px;}
  .vc-shortcut-icon{width:36px;height:36px;font-size:15px;}
  .vc-shortcut-label{font-size:12px;}
  .vc-auth-card{padding:28px 20px;}
  .vc-content{padding:14px 12px 28px;}
  .vc-topbar{padding:0 12px;gap:10px;}
  .vc-domain-form{flex-direction:column;}
  .vc-domain-form .form-control,.vc-domain-form .btn{width:100%;}
  .table-responsive{overflow-x:auto;}
  .vc-quick-actions{gap:8px;}
  .vc-qa-item{font-size:12px;padding:12px 44px 12px 12px;}
}

@media (min-width:1400px) {
  .vc-content{padding:32px 36px 48px;}
}

/* ══════════════════════════════════════════════════════════════════════════
   SIDEBAR COLLAPSE
   ══════════════════════════════════════════════════════════════════════════ */

.vc-sb-footer-bottom {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.vc-sb-footer-copy { flex: 1; min-width: 0; }

/* Sidebar collapse tab — fuori dal div sidebar, position:fixed */
.vc-sb-collapse-btn {
  position: fixed;
  left: var(--sb-w);
  top: 50vh;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 52px;
  border-radius: 0 10px 10px 0;
  background: var(--sb-bg);
  border: 1px solid var(--sb-border);
  border-left: none;
  color: var(--sb-text-muted);
  cursor: pointer;
  font-size: 9px;
  z-index: 201;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), width var(--t-fast), left var(--t);
  box-shadow: 3px 0 10px rgba(0,0,0,.10);
}
.vc-sb-collapse-btn:hover {
  background: var(--brand-bg);
  color: var(--brand);
  border-color: var(--brand);
  width: 22px;
}
.vc-sb-collapse-btn i {
  transition: transform var(--t);
}
/* Quando collassato: sposta il bottone a 64px e ruota l'icona */
.vc-sidebar.vc-sb-collapsed ~ .vc-sb-collapse-btn {
  left: 64px;
}
.vc-sidebar.vc-sb-collapsed ~ .vc-sb-collapse-btn i {
  transform: rotate(180deg);
}
/* Nascondi su mobile — il sidebar ha già il comportamento slide */
@media (max-width: 768px) {
  .vc-sb-collapse-btn { display: none !important; }
}

@media (min-width: 769px) {
  .vc-sidebar.vc-sb-collapsed {
    width: 64px;
    min-width: 64px;
    overflow: visible;
    padding: 14px 8px;
  }
  .vc-sidebar.vc-sb-collapsed .vc-sb-logo-wrap {
    justify-content: center;
    padding: 6px 8px 14px;
  }
  .vc-sidebar.vc-sb-collapsed .vc-sb-logo-wrap svg {
    max-width: 36px !important;
    height: 22px !important;
  }
  .vc-sidebar.vc-sb-collapsed .vc-sb-user {
    justify-content: center;
    padding: 10px 4px;
    gap: 0;
  }
  .vc-sidebar.vc-sb-collapsed .vc-sb-user-info,
  .vc-sidebar.vc-sb-collapsed .vc-sb-user-edit,
  .vc-sidebar.vc-sb-collapsed .vc-sb-masq-text,
  .vc-sidebar.vc-sb-collapsed .vc-sb-masq-link,
  .vc-sidebar.vc-sb-collapsed .vc-sb-section-label,
  .vc-sidebar.vc-sb-collapsed .vc-sb-group-arrow,
  .vc-sidebar.vc-sb-collapsed .vc-sb-help,
  .vc-sidebar.vc-sb-collapsed .vc-sb-whmcs-panel,
  .vc-sidebar.vc-sb-collapsed .vc-sb-badge,
  .vc-sidebar.vc-sb-collapsed .vc-sb-hint,
  .vc-sidebar.vc-sb-collapsed .vc-sb-divider,
  .vc-sidebar.vc-sb-collapsed .vc-fav-section,
  .vc-sidebar.vc-sb-collapsed .vc-sb-footer-copy,
  .vc-sidebar.vc-sb-collapsed .vc-sb-footer-ver,
  .vc-sidebar.vc-sb-collapsed .vc-sb-star { display: none !important; }

  .vc-sidebar.vc-sb-collapsed .vc-sb-item span,
  .vc-sidebar.vc-sb-collapsed .vc-sb-group-hdr > span { display: none !important; }

  .vc-sidebar.vc-sb-collapsed .vc-sb-item,
  .vc-sidebar.vc-sb-collapsed .vc-sb-group-hdr {
    justify-content: center !important;
    padding: 10px !important;
  }
  .vc-sidebar.vc-sb-collapsed .vc-sb-item.sub {
    padding: 10px !important;
    padding-left: 10px !important;
  }
  .vc-sidebar.vc-sb-collapsed .vc-sb-item.sub::before { display: none !important; }
  .vc-sidebar.vc-sb-collapsed .vc-sb-group-items { max-height: 0 !important; }
  .vc-sidebar.vc-sb-collapsed .vc-sb-nav { overflow: visible; }
  .vc-sidebar.vc-sb-collapsed .vc-sb-footer-bottom {
    justify-content: center;
    padding: 10px 4px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   SIDEBAR FAVORITES
   ══════════════════════════════════════════════════════════════════════════ */

.vc-sb-li {
  position: relative !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}

.vc-sb-star {
  position: absolute !important;
  right: 6px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 20px !important;
  height: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  cursor: pointer !important;
  color: var(--muted2) !important;
  font-size: 11px !important;
  border-radius: 5px !important;
  opacity: 0 !important;
  pointer-events: auto !important;
  transition: opacity .15s, color .15s, background .15s !important;
  z-index: 3 !important;
  padding: 0 !important;
  line-height: 1 !important;
}
.vc-sb-li:hover .vc-sb-star { opacity: 1 !important; }
.vc-sb-star.is-fav { opacity: 1 !important; color: #f59e0b !important; }
.vc-sb-star:hover { color: #f59e0b !important; background: var(--sb-hover-bg) !important; }
.vc-sb-star:focus { outline: none !important; box-shadow: none !important; }
/* Push content left on hover to make room for the star */
.vc-sb-li:hover > .vc-sb-item { padding-right: 28px !important; }
.vc-sb-li:hover > .vc-sb-item.sub { padding-right: 28px !important; }

.vc-fav-section { display: none; }

/* ══════════════════════════════════════════════════════════════════════════
   DARK MODE IMPROVEMENTS
   ══════════════════════════════════════════════════════════════════════════ */

/* Select option backgrounds in dark mode */
.vc-dark select.form-control option,
.vc-dark select option {
  background: #121c33;
  color: #f1f5f9;
}

/* Checkboxes & radios */
.vc-dark input[type=checkbox],
.vc-dark input[type=radio] {
  accent-color: var(--brand);
}

/* Progress bar */
.vc-dark .progress { background: rgba(255,255,255,.08) !important; }

/* Scrollbar colors in dark mode */
.vc-dark { scrollbar-color: rgba(255,255,255,.12) transparent; }
.vc-dark ::-webkit-scrollbar-track { background: transparent; }
.vc-dark ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); }
.vc-dark ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.2); }

/* Bootstrap modal backdrop in dark mode */
.vc-dark .modal-backdrop { background: rgba(0,0,0,.7); }

/* Tooltip */
.tooltip-inner { background: var(--fg) !important; color: var(--bg) !important; }
.tooltip.top .tooltip-arrow { border-top-color: var(--fg) !important; }
.tooltip.bottom .tooltip-arrow { border-bottom-color: var(--fg) !important; }

/* WHMCS-generated fieldset/legend */
.vc-dark fieldset { border-color: var(--border) !important; }
.vc-dark legend { color: var(--fg) !important; }

/* Zebra table rows in dark mode */
.vc-dark .table-striped > tbody > tr:nth-of-type(odd) > td {
  background: rgba(255,255,255,.03) !important;
}
.vc-dark .table > tbody > tr:hover > td {
  background: rgba(255,255,255,.05) !important;
}

/* Input autofill override in dark mode */
.vc-dark input:-webkit-autofill,
.vc-dark input:-webkit-autofill:hover,
.vc-dark input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 30px #121c33 inset !important;
  -webkit-text-fill-color: #f1f5f9 !important;
}

/* hr separators */
.vc-dark hr { border-color: var(--border); }

/* Pre/code blocks */
.vc-dark pre, .vc-dark code {
  background: rgba(255,255,255,.05) !important;
  color: #cbd5e1 !important;
  border-color: var(--border) !important;
}

/* Breadcrumb separator */
.vc-dark .breadcrumb > li + li::before { color: var(--muted2) !important; }

/* ══════════════════════════════════════════════════════════════════════════
   DASHBOARD DRAG & DROP
   ══════════════════════════════════════════════════════════════════════════ */
#vc-db-grid {
  display: flex;
  flex-direction: column;
}
.vc-db-section {
  position: relative;
  min-width:0;
}
/* Handle — grip icon top-right, visibile solo su hover della sezione */
.vc-db-handle {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 10;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--muted2);
  cursor: grab;
  font-size: 12px;
  line-height: 1;
  padding: 0;
  opacity: .42;
  transition: opacity var(--t-fast), background var(--t-fast), color var(--t-fast);
  -webkit-appearance: none;
  appearance: none;
}
#vc-db-quick > .vc-db-handle,
#vc-db-stats > .vc-db-handle {
  display:none !important;
}
.vc-db-section:hover .vc-db-handle { opacity: .95; }
.vc-db-section:has(.vc-db-card-wrap:hover) > .vc-db-handle { opacity: .95; }
.vc-db-handle:hover { background: var(--hover-bg); color: var(--brand); }
.vc-db-handle:active { cursor: grabbing; }
/* Sezione in fase di drag */
.vc-db-section.vc-db-dragging {
  opacity: 0.35;
}
/* Placeholder che mostra dove verrà rilasciato il widget */
.vc-db-placeholder {
  border: 2px dashed var(--brand);
  border-radius: 16px;
  background: rgba(43, 111, 196, 0.05);
  transition: height 0.1s;
  flex-shrink: 0;
}
.vc-dark .vc-db-placeholder {
  background: rgba(43, 111, 196, 0.10);
}

/* ── Card-level drag wrap (singole card dentro quick-actions e stat-cards) ── */
.vc-db-card-wrap {
  position: relative;
  display:flex;
  min-width:0;
  min-height:100%;
}
.vc-db-card-wrap > .vc-qa-item,
.vc-db-card-wrap > .vc-stat-card {
  width: 100%;
  height: 100%;
  min-width:0;
}
.vc-db-card-wrap > .card {
  width:100%;
  min-width:0;
}
.vc-db-card-handle {
  position: absolute;
  top: 12px;
  right: 12px;
  left: auto;
  transform: none;
  z-index: 10;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--muted2);
  cursor: grab;
  font-size: 11px;
  line-height: 1;
  padding: 0;
  opacity: .42;
  transition: opacity var(--t-fast), background var(--t-fast), color var(--t-fast);
  -webkit-appearance: none;
  appearance: none;
}
.vc-db-card-wrap:hover .vc-db-card-handle { opacity: .95; }
.vc-db-card-wrap:hover .vc-qa-arr { opacity: .3; }
.vc-db-card-handle:hover { background: var(--hover-bg); color: var(--brand); }
.vc-db-card-handle:active { cursor: grabbing; }
.vc-db-card-wrap.vc-db-dragging { opacity: 0.45; }

/* Handle inline — usato dentro card-header come flex item (non absolute) */
.vc-db-handle-inline {
  position:absolute;
  top:50%;
  right:16px;
  transform:translateY(-50%);
  z-index:12;
  flex-shrink: 0;
  order: initial;
  width: 26px;
  height: 26px;
  opacity: .42;
  transition: opacity var(--t-fast), background var(--t-fast), color var(--t-fast);
  margin:0;
  background:color-mix(in srgb, var(--surface) 92%, transparent);
  border:1px solid var(--border);
  border-radius:6px;
  color:var(--muted2);
}
.vc-db-section:hover .vc-db-handle-inline,
.vc-db-card-wrap:hover .vc-db-handle-inline,
.card:hover .vc-db-handle-inline { opacity: .95; }

/* =========================================================
   Vivacloud cautious polish: dashboard stability + product notes
========================================================= */
.vc-quick-actions,
.vc-stat-cards{
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
  gap:18px;
}

.vc-quick-actions .vc-db-card-wrap,
.vc-stat-cards .vc-db-card-wrap{
  min-width:0;
}

.vc-qa-item,
.vc-stat-card{
  border-radius:20px;
  border-color:#dfe7f3;
  box-shadow:0 14px 34px rgba(15,34,72,.06);
}

.vc-qa-item{
  min-height:96px;
  padding:20px 56px 20px 20px;
}

.vc-stat-card{
  min-height:160px;
  padding:22px 54px 20px 20px;
}

.vc-qa-name,
.vc-stat-label,
.vc-panel-row-label{
  overflow-wrap:anywhere;
}

.vc-db-card-handle,
.vc-db-handle,
.vc-db-handle-inline{
  border-radius:8px;
  box-shadow:0 6px 14px rgba(15,34,72,.08);
}

.vc-db-card-handle{
  top:14px;
  right:14px;
}

/* Keep dashboard drag grips visually centred in card headers. */
.vc-db-card-handle.vc-db-handle-inline,
.vc-db-handle.vc-db-handle-inline{
  top:50% !important;
  right:18px !important;
  transform:translateY(-50%) !important;
}

.vc-dash-panels .card-header,
.vc-renewals .card-header{
  position:relative;
  padding-right:68px;
}

.vc-dash-panels .vc-card-link,
.vc-renewals .vc-card-link{
  margin-right:34px;
}

.vc-dash-panels{
  grid-template-columns:repeat(auto-fit,minmax(min(100%,430px),1fr));
}

.vc-dash-panels .card,
.vc-renewals,
.vc-product-notes{
  border-color:#dfe7f3;
  box-shadow:0 16px 38px rgba(15,34,72,.065);
}

.vc-dash-panels .card-header,
.vc-renewals .card-header{
  min-height:70px;
  align-items:center;
}

.vc-dash-panels .card-title,
.vc-renewals .card-title{
  min-width:0;
  line-height:1.25;
}

.vc-panel-row{
  min-height:62px;
}

.vc-product-notes-head{
  background:
    radial-gradient(circle at 92% 20%, rgba(43,111,196,.11), transparent 26%),
    linear-gradient(180deg,#fff,#f8fbff);
}

.vc-product-notes textarea.form-control{
  border-radius:16px;
  background:#fbfdff;
}

.vc-dark .vc-qa-item,
.vc-dark .vc-stat-card,
.vc-dark .vc-dash-panels .card,
.vc-dark .vc-renewals,
.vc-dark .vc-product-notes{
  border-color:rgba(148,163,184,.22);
  box-shadow:0 18px 42px rgba(0,0,0,.24);
}

.vc-dark .vc-qa-item:hover,
.vc-dark .vc-stat-card:hover,
.vc-dark .vc-dash-panels .card:hover,
.vc-dark .vc-renewals:hover{
  border-color:rgba(148,163,184,.34);
}

.vc-dark .vc-dash-panels .card-header,
.vc-dark .vc-renewals .card-header,
.vc-dark .vc-panel-row,
.vc-dark .vc-renewal-item{
  border-color:rgba(148,163,184,.16);
}

.vc-dark .vc-dash-panels .card-title,
.vc-dark .vc-renewals .card-title,
.vc-dark .vc-renewals-hdr .title{
  color:var(--fg);
}

.vc-sb-help,
.vc-sb-help:hover,
.vc-sb-help:focus{
  color:#fff !important;
}

.vc-sb-help-title,
.vc-sb-help-text,
.vc-sb-help:hover .vc-sb-help-title,
.vc-sb-help:hover .vc-sb-help-text{
  color:#fff !important;
}

@media (max-width:720px){
  .vc-quick-actions,
  .vc-stat-cards,
  .vc-dash-panels{
    grid-template-columns:1fr;
  }
  .vc-qa-item,
  .vc-stat-card{
    padding-right:48px;
  }
}