/*
 * /css/performance_stage5.css
 * Stage 5: auth UI, single-sidebar layouts, VM Coins card, realtime/push/performance screens.
 */

/* ===== Single application sidebar: remove legacy per-page left column ===== */
.feed-layout.vm-no-legacy-sidebar,
.vm-feed-page.vm-no-legacy-sidebar,
.vm-profile-page.vm-no-legacy-sidebar,
.vm-group-page.vm-no-legacy-sidebar{
  grid-template-columns:minmax(0,1fr) minmax(220px,280px) !important;
}

/* Generic pages that now contain only <section> + the remaining right <aside>. */
.feed-layout.vm-no-legacy-sidebar > section{
  grid-column:1 !important;
  min-width:0;
  order:1;
}
.feed-layout.vm-no-legacy-sidebar > aside{
  grid-column:2 !important;
  min-width:0;
  order:2;
}

/* Social pages use named columns instead of the older feed-col/feed-right names. */
.vm-feed-page.vm-no-legacy-sidebar > .vm-feed-column,
.vm-profile-page.vm-no-legacy-sidebar > .vm-profile-column,
.vm-group-page.vm-no-legacy-sidebar > .vm-group-column{
  grid-column:1 !important;
  min-width:0;
  order:1;
}
.vm-feed-page.vm-no-legacy-sidebar > .vm-feed-right-rail,
.vm-profile-page.vm-no-legacy-sidebar > .vm-profile-right-rail,
.vm-group-page.vm-no-legacy-sidebar > .vm-group-right-rail{
  grid-column:2 !important;
  min-width:0;
  order:2;
}

/* The former duplicate profile/navigation sidebar is gone. The independent
   left advertisement remains an ad-only rail on very wide desktops. */
.vm-feed-page.vm-no-legacy-sidebar.vm-with-left-ad > .vm-feed-left-ad-rail{
  display:none !important;
}
@media (min-width:1400px){
  .vm-feed-page.vm-no-legacy-sidebar.vm-with-left-ad{
    grid-template-columns:minmax(190px,230px) minmax(0,1fr) minmax(220px,280px) !important;
  }
  .vm-feed-page.vm-no-legacy-sidebar.vm-with-left-ad > .vm-feed-left-ad-rail{
    display:block !important;
    grid-column:1 !important;
    min-width:0;
    order:1;
  }
  .vm-feed-page.vm-no-legacy-sidebar.vm-with-left-ad > .vm-feed-column{
    grid-column:2 !important;
    order:2;
  }
  .vm-feed-page.vm-no-legacy-sidebar.vm-with-left-ad > .vm-feed-right-rail{
    grid-column:3 !important;
    order:3;
  }
}

@media (max-width:991.98px){
  .feed-layout.vm-no-legacy-sidebar,
  .vm-feed-page.vm-no-legacy-sidebar,
  .vm-profile-page.vm-no-legacy-sidebar,
  .vm-group-page.vm-no-legacy-sidebar{
    grid-template-columns:minmax(0,1fr) !important;
  }
  .feed-layout.vm-no-legacy-sidebar > section,
  .vm-feed-page.vm-no-legacy-sidebar > .vm-feed-column,
  .vm-profile-page.vm-no-legacy-sidebar > .vm-profile-column,
  .vm-group-page.vm-no-legacy-sidebar > .vm-group-column{
    grid-column:1 !important;
  }
  .feed-layout.vm-no-legacy-sidebar > aside,
  .vm-feed-page.vm-no-legacy-sidebar > .vm-feed-left-ad-rail,
  .vm-feed-page.vm-no-legacy-sidebar > .vm-feed-right-rail,
  .vm-profile-page.vm-no-legacy-sidebar > .vm-profile-right-rail,
  .vm-group-page.vm-no-legacy-sidebar > .vm-group-right-rail{
    display:none !important;
  }
}

/* ===== VM Coins in the global sidebar ===== */
.vm-sidebar-coins{
  position:relative;
  display:block;
  margin:0 0 13px;
  padding:12px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.18);
  border-radius:17px;
  color:#fff;
  background:linear-gradient(145deg,rgba(255,255,255,.16),rgba(255,255,255,.08));
  text-decoration:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
}
.vm-sidebar-coins::after{
  content:"";
  position:absolute;
  width:86px;
  height:86px;
  right:-30px;
  top:-34px;
  border-radius:50%;
  background:rgba(34,184,207,.22);
}
.vm-sidebar-coins-head{position:relative;z-index:1;display:flex;align-items:center;gap:8px;color:rgba(255,255,255,.76);font-size:.68rem;font-weight:850;text-transform:uppercase;letter-spacing:.08em}
.vm-sidebar-coins-head .vm-ui-icon{width:17px;height:17px}
.vm-sidebar-coins-value{position:relative;z-index:1;display:block;margin-top:5px;font-size:1.55rem;font-weight:950;line-height:1;letter-spacing:-.035em}
.vm-sidebar-coins-foot{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:8px;color:rgba(255,255,255,.68);font-size:.68rem;font-weight:700}
.vm-sidebar-coins:hover{color:#fff;background:linear-gradient(145deg,rgba(255,255,255,.22),rgba(255,255,255,.11));transform:translateY(-1px)}
@media (min-width:992px) and (max-width:1199.98px){
  .vm-app-sidebar:not(:hover):not(:focus-within) .vm-sidebar-coins{width:42px;height:42px;margin-inline:auto;padding:0;display:grid;place-items:center;border-radius:13px}
  .vm-app-sidebar:not(:hover):not(:focus-within) .vm-sidebar-coins-head span,
  .vm-app-sidebar:not(:hover):not(:focus-within) .vm-sidebar-coins-value,
  .vm-app-sidebar:not(:hover):not(:focus-within) .vm-sidebar-coins-foot{display:none}
  .vm-app-sidebar:not(:hover):not(:focus-within) .vm-sidebar-coins-head .vm-ui-icon{width:19px;height:19px}
}
body.vm-sidebar-collapsed .vm-sidebar-coins{width:42px;height:42px;margin-inline:auto;padding:0;display:grid;place-items:center;border-radius:13px}
body.vm-sidebar-collapsed .vm-sidebar-coins-head span,
body.vm-sidebar-collapsed .vm-sidebar-coins-value,
body.vm-sidebar-collapsed .vm-sidebar-coins-foot{display:none}

/* ===== Login / authorization ===== */
.vm-auth-page{width:min(100%,1040px);margin:clamp(18px,5vh,64px) auto;padding:0 4px}
.vm-auth-shell{display:grid;grid-template-columns:minmax(0,.9fr) minmax(360px,1.1fr);overflow:hidden;border:1px solid var(--vm-border);border-radius:28px;background:var(--vm-surface);box-shadow:0 28px 80px rgba(31,39,86,.16)}
.vm-auth-intro{position:relative;display:flex;flex-direction:column;justify-content:space-between;min-height:600px;padding:42px;color:#fff;background:radial-gradient(circle at 20% 12%,rgba(34,211,238,.36),transparent 34%),radial-gradient(circle at 90% 75%,rgba(236,72,153,.28),transparent 34%),linear-gradient(145deg,#192451 0%,#4138a4 58%,#615cf6 100%)}
.vm-auth-intro::after{content:"";position:absolute;inset:auto -90px -100px auto;width:300px;height:300px;border:1px solid rgba(255,255,255,.16);border-radius:50%;box-shadow:0 0 0 34px rgba(255,255,255,.045),0 0 0 70px rgba(255,255,255,.03)}
.vm-auth-brand{position:relative;z-index:1;display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none}
.vm-auth-brand-mark{width:48px;height:48px;display:grid;place-items:center;border-radius:16px;background:rgba(255,255,255,.16);font-size:1.05rem;font-weight:950;box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.vm-auth-brand-copy{display:flex;flex-direction:column;line-height:1.02}.vm-auth-brand-copy strong{font-size:1.05rem;letter-spacing:.04em}.vm-auth-brand-copy small{color:rgba(255,255,255,.68);font-size:.72rem}
.vm-auth-intro-content{position:relative;z-index:1;max-width:420px}.vm-auth-kicker{margin-bottom:12px;color:#a5f3fc;font-size:.75rem;font-weight:900;letter-spacing:.13em;text-transform:uppercase}.vm-auth-intro h2{margin:0 0 14px;font-size:clamp(2rem,4vw,3.15rem);font-weight:950;line-height:1.04;letter-spacing:-.045em}.vm-auth-intro p{margin:0;color:rgba(255,255,255,.74);font-size:1rem;line-height:1.65}
.vm-auth-points{position:relative;z-index:1;display:grid;gap:10px;margin:28px 0 0;padding:0;list-style:none}.vm-auth-points li{display:flex;align-items:center;gap:10px;color:rgba(255,255,255,.84);font-size:.88rem}.vm-auth-points span{width:25px;height:25px;display:grid;place-items:center;flex:0 0 25px;border-radius:9px;background:rgba(255,255,255,.14);font-weight:900}
.vm-auth-form-panel{display:flex;align-items:center;padding:clamp(32px,5vw,64px)}
.vm-auth-form-wrap{width:100%;max-width:470px;margin:auto}.vm-auth-form-wrap h1{margin:0;color:var(--vm-text);font-size:2rem;font-weight:950;letter-spacing:-.035em}.vm-auth-subtitle{margin:8px 0 28px;color:var(--vm-muted);line-height:1.55}
.vm-auth-form{display:grid;gap:18px}.vm-auth-field label{display:block;margin-bottom:8px;color:var(--vm-text-soft);font-size:.84rem;font-weight:850}.vm-auth-input-wrap{position:relative}.vm-auth-input-wrap .vm-ui-icon{position:absolute;left:15px;top:50%;width:19px;height:19px;color:var(--vm-muted);transform:translateY(-50%);pointer-events:none}.vm-auth-input{width:100%;height:54px;padding:0 16px 0 48px;border:1px solid var(--vm-border);border-radius:15px;color:var(--vm-text);background:var(--vm-surface-soft);font-size:1rem;outline:0;transition:.16s ease}.vm-auth-input:focus{border-color:var(--vm-primary);background:var(--vm-surface);box-shadow:var(--vm-focus)}
.vm-auth-submit{min-height:54px;border:0;border-radius:15px;font-size:1rem;font-weight:900;box-shadow:0 14px 30px rgba(91,93,240,.24)}
.vm-auth-links{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:4px;font-size:.88rem}.vm-auth-links a{font-weight:750;text-decoration:none}.vm-auth-register{margin-top:26px;padding-top:22px;border-top:1px solid var(--vm-border);color:var(--vm-muted);font-size:.92rem}.vm-auth-register a{font-weight:850;text-decoration:none}
@media (max-width:820px){.vm-auth-page{margin:18px auto}.vm-auth-shell{grid-template-columns:1fr}.vm-auth-intro{min-height:auto;padding:26px}.vm-auth-intro-content{margin-top:42px}.vm-auth-points{display:none}.vm-auth-form-panel{padding:32px 24px}.vm-auth-form-wrap{max-width:560px}}
@media (max-width:480px){.vm-auth-page{padding:0}.vm-auth-shell{border-radius:20px}.vm-auth-intro{padding:22px}.vm-auth-intro-content{margin-top:28px}.vm-auth-intro h2{font-size:1.7rem}.vm-auth-form-panel{padding:28px 20px}.vm-auth-form-wrap h1{font-size:1.7rem}.vm-auth-links{align-items:flex-start;flex-direction:column}}

/* ===== Stage 5 operations UI ===== */
.vm-stage5-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.vm-stage5-stat{padding:18px;border:1px solid var(--vm-border);border-radius:18px;background:var(--vm-surface);box-shadow:var(--vm-shadow-sm)}.vm-stage5-stat small{display:block;color:var(--vm-muted);font-weight:750}.vm-stage5-stat strong{display:block;margin-top:7px;color:var(--vm-text);font-size:1.75rem;font-weight:950}.vm-stage5-status{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border-radius:999px;font-size:.72rem;font-weight:850}.vm-stage5-status.is-ok{color:#0f766e;background:rgba(20,184,166,.12)}.vm-stage5-status.is-warn{color:#a16207;background:rgba(245,158,11,.13)}.vm-stage5-status.is-bad{color:#b91c1c;background:rgba(239,68,68,.12)}
.vm-push-permission{padding:18px;border:1px solid var(--vm-border);border-radius:18px;background:linear-gradient(135deg,var(--vm-primary-soft),var(--vm-surface))}.vm-quiet-hours{display:grid;grid-template-columns:1fr 150px 150px;gap:14px;align-items:end}
@media(max-width:991.98px){.vm-stage5-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:575.98px){.vm-stage5-grid{grid-template-columns:1fr}.vm-quiet-hours{grid-template-columns:1fr}}