/* ============================================================
   vth-access-blocked.css — Login-gate right-section states
   Renders inside the LOGIN page's right column (replacing the
   form, or as a banner above it) for the Disable Login / Access
   Control module. Three states: maintenance (full lock), role
   restricted, account restricted (banner). Everything is scoped
   under `.vth-lg` so it never touches the existing login form.
   ------------------------------------------------------------
   Palette literals below come from the imported VTH login design
   (project b3ede0e4). They are NOT in the LMS vth token file, so
   they are declared once here as scoped local variables — the
   only place raw values live, documented per the vth-reskin rule.
   Icons use Material Symbols Rounded (loaded on the login view),
   ligatures pulled from config/icons.php.
   ============================================================ */

.vth-lg {
  --lg-red: #ed4444;
  --lg-red-600: #d63333;
  --lg-red-50: #fdeded;
  --lg-red-100: #f7c9c9;
  /* Blue comes from the VTH reskin theme (vth-tokens.css), not the old navy.
     Fallbacks keep the panel styled if the token file isn't present. */
  --lg-navy: var(--vth-blue, #192AC1);
  --lg-navy-hover: var(--vth-blue-hover, #1A2CE8);
  --lg-blue-50: var(--surface-blue-soft, #EAF3FF);
  --lg-yellow-600: #c98a1e;
  --lg-green: #15a51b;
  --lg-ink: #181925;
  --lg-text-2: #5a5f6e;
  --lg-muted: #8a8f9c;
  --lg-card: #ffffff;
  --lg-border: #e2e6ec;

  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--lg-ink);
  box-sizing: border-box;
  width: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 32px 40px 48px;
}
.vth-lg *, .vth-lg *::before, .vth-lg *::after { box-sizing: border-box; }

.vth-lg .vth-icon {
  font-family: "Material Symbols Rounded", "Material Icons";
  font-weight: normal; font-style: normal;
  line-height: 1; letter-spacing: normal; text-transform: none;
  display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr;
  -webkit-font-feature-settings: "liga"; -webkit-font-smoothing: antialiased;
}

.vth-lg-inner { width: 100%; max-width: 460px; margin: 0 auto; animation: vthLgFade .35s ease both; }
@keyframes vthLgFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---- Shared pill / title / text ---- */
.vth-lg-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 999px;
  background: var(--lg-red-50); color: var(--lg-red);
  font-weight: 600; font-size: 11px; line-height: 1;
  letter-spacing: .06em; text-transform: uppercase;
  margin-bottom: 14px;
}
.vth-lg-pill .vth-icon { font-size: 14px; }
.vth-lg-title { margin: 0 0 10px; font-weight: 600; font-size: 30px; line-height: 1.15; color: var(--lg-ink); }
.vth-lg-text { margin: 0 auto; max-width: 400px; font-weight: 400; font-size: 15px; line-height: 1.6; color: var(--lg-text-2); }
.vth-lg-center { text-align: center; }

/* ---- State 1: Full lock (maintenance) ---- */
.vth-lg-lockbadge { position: relative; width: 116px; height: 116px; margin: 0 auto 24px; }
.vth-lg-lockbadge-ring { position: absolute; inset: 0; border-radius: 50%; border: 1px dashed var(--lg-red-100); }
.vth-lg-lockbadge-fill { position: absolute; inset: 12px; border-radius: 50%; background: var(--lg-red-50); display: grid; place-items: center; }
.vth-lg-lockbadge-fill .vth-icon { font-size: 46px; color: var(--lg-red); }
.vth-lg-eta {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 22px auto 14px; padding: 11px 20px; border-radius: 999px;
  background: var(--lg-blue-50);
}
.vth-lg-eta .vth-icon { font-size: 20px; color: var(--lg-navy); }
.vth-lg-eta-label { font-weight: 400; font-size: 14px; color: var(--lg-text-2); }
.vth-lg-eta-value { font-weight: 600; font-size: 14px; color: var(--lg-ink); }
.vth-lg-support { font-weight: 400; font-size: 13.5px; line-height: 1.6; color: var(--lg-muted); }
.vth-lg-support a { color: var(--lg-navy); font-weight: 600; text-decoration: none; }

/* ---- State 2: Role restricted ---- */
.vth-lg-badge { position: relative; width: 84px; height: 84px; margin: 0 auto 20px; }
.vth-lg-badge-outer { position: absolute; inset: 0; border-radius: 50%; background: var(--lg-red-50); }
.vth-lg-badge-inner { position: absolute; inset: 10px; border-radius: 50%; background: var(--lg-red); display: grid; place-items: center; box-shadow: 0 6px 16px rgba(237,68,68,.32); }
.vth-lg-badge-inner .vth-icon { font-size: 34px; color: #fff; }
.vth-lg-rows { display: flex; flex-direction: column; gap: 14px; max-width: 380px; margin: 24px auto 26px; }
.vth-lg-row { display: flex; align-items: center; gap: 12px; }
.vth-lg-row .vth-icon { font-size: 22px; flex-shrink: 0; }
.vth-lg-row-text { font-weight: 400; font-size: 14px; line-height: 1.45; color: var(--lg-text-2); }
.vth-lg-ico-navy { color: var(--lg-navy); }
.vth-lg-ico-green { color: var(--lg-green); }
.vth-lg-ico-amber { color: var(--lg-yellow-600); }
.vth-lg-btn {
  width: 100%; padding: 15px; border: none; cursor: pointer;
  border-radius: 999px; background: var(--lg-navy); color: #fff;
  font-weight: 600; font-size: 15px; line-height: 1;
  box-shadow: 0 6px 16px rgba(25,42,193,.24);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  text-decoration: none;
  transition: background .15s ease;
}
.vth-lg-btn:hover { background: var(--lg-navy-hover); }
.vth-lg-btn .vth-icon { font-size: 20px; }

/* ---- State 3: Account restricted — banner above the login form ---- */
.vth-lg-banner {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px; margin: 0 0 22px;
  border-radius: 12px;
  background: var(--lg-red-50); border: 1px solid var(--lg-red);
  font-family: "Poppins", system-ui, sans-serif;
}
/* Banner host — rendered INSIDE the login form (under the "Login" heading),
   full width of the form column so it aligns with the fields below. */
.vth-lg.vth-lg--banner { display: block; min-height: 0; justify-content: initial; padding: 0; margin: 0 0 20px; }
.vth-lg--banner .vth-lg-banner { max-width: none; margin: 0; }
.vth-lg-banner .vth-icon { font-size: 24px; color: var(--lg-red); flex-shrink: 0; }
.vth-lg-banner-title { font-weight: 600; font-size: 14.5px; line-height: 1.3; color: var(--lg-ink); margin-bottom: 3px; }
.vth-lg-banner-text { font-weight: 400; font-size: 13px; line-height: 1.55; color: var(--lg-text-2); }
.vth-lg-banner-text a { color: var(--lg-red); font-weight: 600; text-decoration: none; }

/* ---- Responsive ---- */
@media (max-width: 640px) {
  .vth-lg { padding: 24px 20px 32px; }
  .vth-lg-title { font-size: 24px; }
}