/* =========================================================
   views_new — responsive desktop/tablet shell for auth pages
   Path: application/mvc/views_new/assets/css/auth-shell.css

   Structure (all 4 pages: login, forgot, change_pass, registration):
     .vshell
       .mlogin__topbar / .mauth__topbar   <- ONE shared topbar, full width,
                                              never split, same on every page
       .vshell__body
         .vshell__panel                   <- only present + rendered on
                                              login.php / registration.php
         .vshell__content

   .vshell__body only becomes a two-column grid when it carries the
   .vshell__body--split modifier (login + registration). Without it
   (forgot, change_pass) .vshell__content simply takes the full width —
   there is no left/right split on those pages at all.

   Mobile-first: below the breakpoint this file barely touches anything —
   the page looks and behaves like application/mvc/mobileviews, whose
   auth.css / login.css / mobile-dark.css are loaded unchanged alongside
   this file.
   ========================================================= */

/* -------- Topbar: logo (and back-arrow, where present) grouped on the
   left; language selector grouped with the dark-mode toggle on the
   right (all widths) -------- */
.vshell .mlogin__topbar,
.vshell .mauth__topbar {
  justify-content: flex-start;
  gap: 14px;
}
.vshell .mlogin__lang,
.vshell .mauth__lang,
.vshell .mauth__topbar-right {
  margin-inline-start: auto;
}

.vshell__panel {
  display: none;
}

@media (min-width: 900px) {
  /* The mobile decorative layers (login.css/auth.css body::before/::after)
     are unscoped so they also work standalone on phones without this file.
     On desktop .vshell::before/::after replace them — without this, both
     sets rendered at once (doubled/misaligned blobs + watermark + grain). */
  body.mlogin::before,
  body.mlogin::after,
  body.mauth::before,
  body.mauth::after {
    display: none;
  }

  body.mlogin,
  body.mauth {
    background: linear-gradient(180deg, #f8fafc 0%, #eef1f8 100%);
  }

  .vshell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding: 0 24px;
    position: relative;
    overflow: hidden;
  }
  /* Layered mesh-gradient glow, slowly drifting for a "living" premium feel. */
  .vshell::before {
    content: "";
    position: absolute;
    inset: -10%;
    z-index: 0;
    pointer-events: none;
    background:
      radial-gradient(30% 40% at 8% 0%, rgba(37, 99, 235, 0.32), transparent 68%),
      radial-gradient(26% 36% at 100% 10%, rgba(56, 189, 248, 0.24), transparent 68%),
      radial-gradient(28% 38% at 14% 100%, rgba(139, 92, 246, 0.22), transparent 68%),
      radial-gradient(22% 30% at 96% 96%, rgba(236, 72, 153, 0.13), transparent 68%);
    filter: blur(60px);
    animation: vshell-drift 28s ease-in-out infinite alternate;
    will-change: transform;
  }
  /* Crisp foreground motif: an ascending trading-chart watermark (bottom
     corner, with a symbol + %-change tag) + a tiled pattern of currency/
     commodity ticker symbols with mini sparklines + fine grain — same
     custom properties as login.css/auth.css, scaled up for the larger
     desktop canvas. Reads as a deliberate trading-platform illustration. */
  .vshell::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-repeat: no-repeat, repeat, repeat;
    background-position: 100% 100%, 0% 0%, 0 0;
    background-size: 760px 475px, 460px 460px, 140px 140px;
    background-image: var(--auth-chart-svg), var(--auth-tickers-svg), var(--auth-grain-svg);
  }
  @keyframes vshell-drift {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    50%  { transform: translate3d(-1.5%, 1%, 0) scale(1.03); }
    100% { transform: translate3d(1%, -1%, 0) scale(1); }
  }
  @media (prefers-reduced-motion: reduce) {
    .vshell::before { animation: none; }
  }

  /* -------- Shared topbar: one bar, full width, never split -------- */
  .vshell > .mlogin__topbar,
  .vshell > .mauth__topbar {
    position: relative;
    z-index: 10;
    padding: 22px 0 0;
    flex-shrink: 0;
  }

  /* -------- Body: fills the remaining height below the topbar -------- */
  .vshell__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
  }
  .vshell__body--split {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  /* -------- Marketing panel: centered text, no background of its own
       (only rendered on login / registration, inside .vshell__body--split).
       backdrop-filter blurs the chart/ticker watermark directly behind the
       panel so its own text doesn't visually mix with it; text-shadow is
       the universal fallback for browsers without backdrop-filter support. -------- */
  .vshell__panel {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    text-align: start;
    gap: 35px;
    padding: 0;
    color: #0c1f54;
    position: relative;
  }
  .vshell__panel-title,
  .vshell__panel-sub,
  .vshell__panel-cta,
  .vshell__panel-risk {
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.7), 0 0 26px rgba(255, 255, 255, 0.55);
  }

  .vshell__panel-mid,
  .vshell__panel-bottom {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 35px;
    backdrop-filter: blur(1.5px)
  }

  .vshell__panel-title {
    margin: 0;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.25;
  }
  .vshell__panel-sub {
    margin: 0;
    font-size: 15px;
    line-height: 1.65;
    color: rgba(12, 31, 84, 0.65);
    max-width: 360px;
  }
  .vshell__panel-cta {
    display: inline-block;
    padding: 12px 22px;
    border-radius: 12px;
    background: rgba(12, 31, 84, 0.07);
    border: 1px solid rgba(12, 31, 84, 0.2);
    color: #0c1f54;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    transition:
      background 0.15s,
      border-color 0.15s;
  }
  .vshell__panel-cta:hover {
    background: rgba(12, 31, 84, 0.13);
    border-color: rgba(12, 31, 84, 0.35);
  }
  .vshell__panel-bottom {
    max-width: 420px;
  }
  .vshell__panel-risk {
    font-size: 13px;
    line-height: 1.6;
    color: rgba(12, 31, 84, 0.5);
    border-top: 1px solid rgba(12, 31, 84, 0.12);
    padding-top: 18px;
  }

  /* -------- Content column -------- */
  .vshell__content {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .vshell__content .mlogin__main,
  .vshell__content .mauth__main {
    align-items: center;
    padding: 0;
  }

  /* Login only: push the card toward the outer edge, away from the
     marketing panel on its left. Registration/forgot/change_pass have
     no panel to counterbalance, so their .mauth__main stays centered. */
  .vshell__content .mlogin__main {
    justify-content: flex-end;
  }

  .vshell__content .mlogin__card,
  .vshell__content .mauth__card {
    width: 70%;
    max-width: 550px;
    padding: 40px 36px 34px;
    box-shadow:
      0 2px 4px rgba(16, 24, 40, 0.04),
      0 24px 60px rgba(16, 24, 40, 0.1);
  }
  .vshell__content .mlogin__title,
  .vshell__content .mauth__title {
    font-size: 26px;
  }

  .vshell__content .mlogin__footer,
  .vshell__content .mauth__footer {
    padding: 14px 0 28px;
  }

  /* Risk text is already shown in the marketing panel on desktop —
       avoid repeating it under the card too (login / registration only). */
  .vshell__body--split .mlogin__footer .mlogin__risk,
  .vshell__body--split .mauth__footer .mauth__risk {
    display: none;
  }

  /* Footer / "view classic site" link — dark text on the light background */
  .vshell__content .mlogin__desktop-link,
  .vshell__content .mauth__desktop-link {
    color: rgba(12, 31, 84, 0.55);
  }
  .vshell__content .mlogin__desktop-link:hover,
  .vshell__content .mauth__desktop-link:hover {
    color: #0c1f54;
  }

  /* -------- Dark mode: restore the original navy gradient + white text -------- */
  [data-theme="dark"] body.mlogin,
  [data-theme="dark"] body.mauth {
    background: linear-gradient(160deg, #0a1330 0%, #070d24 60%, #05081a 100%);
  }
  [data-theme="dark"] .vshell::before {
    background:
      radial-gradient(30% 40% at 8% 0%, rgba(96, 165, 250, 0.22), transparent 68%),
      radial-gradient(26% 36% at 100% 10%, rgba(56, 189, 248, 0.16), transparent 68%),
      radial-gradient(28% 38% at 14% 100%, rgba(167, 139, 250, 0.18), transparent 68%),
      radial-gradient(22% 30% at 96% 96%, rgba(236, 72, 153, 0.10), transparent 68%);
  }
  [data-theme="dark"] .vshell__panel {
    color: #ffffff;
  }
  [data-theme="dark"] .vshell__panel-title,
  [data-theme="dark"] .vshell__panel-sub,
  [data-theme="dark"] .vshell__panel-cta,
  [data-theme="dark"] .vshell__panel-risk {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 0 26px rgba(0, 0, 0, 0.45);
  }
  [data-theme="dark"] .vshell__panel-sub {
    color: rgba(255, 255, 255, 0.72);
  }
  [data-theme="dark"] .vshell__panel-cta {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.28);
    color: #ffffff;
  }
  [data-theme="dark"] .vshell__panel-cta:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
  }
  [data-theme="dark"] .vshell__panel-risk {
    color: rgba(255, 255, 255, 0.55);
    border-top-color: rgba(255, 255, 255, 0.14);
  }
  [data-theme="dark"] .vshell__content .mlogin__desktop-link,
  [data-theme="dark"] .vshell__content .mauth__desktop-link {
    color: rgba(255, 255, 255, 0.6);
  }
  [data-theme="dark"] .vshell__content .mlogin__desktop-link:hover,
  [data-theme="dark"] .vshell__content .mauth__desktop-link:hover {
    color: #ffffff;
  }
}

/* Defined (non-auto) side margin for .vshell — grows in fixed steps on
   larger screens instead of centering with an auto-computed gutter. */
@media (min-width: 1200px) {
  .vshell {
    padding: 0 10%;
  }
}
@media (min-width: 1600px) {
  .vshell {
    padding: 0 15%;
  }
}