/* ════════════════════════════════════════════════════════════════════════════
   Admin sign-in pages — admin/login.php, forgot-password.php, reset-password.php
   (+ the brand panel, admin/_auth-brand.php).

   The dashboard's look on a page without the dashboard's stylesheet stack:
   its tokens are copied here, light by default and dark when the browser chose
   dark in the admin (localStorage cms_admin_theme, applied before paint by the
   page's head script, as admin/_layout.php does). Values are the dashboard's own:
     light — assets/admin/css/demo/dashboard-light-theme.css (:root[data-theme=light])
     dark  — assets/admin/css/demo/shared-dark-theme.css
     brand panel — the sidebar (assets/admin/css/workspace.css, .ws-shell .sidebar),
                   dark in both themes, as the sidebar is
     orbit — the dashboard hero's (assets/admin/css/demo/business-overview.css)
   Input borders are darker than the dashboard's so a field's edge keeps 3:1.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Tokens ───────────────────────────────────────────────────────────────── */
:root{
  color-scheme:dark;
  --bg:#0a0b0f; --panel:#111318; --raised:#1d2028; --field:#0b0d12;
  --ink:#eeebf3; --muted:#ada7b8; --label:#aaa5b6; --icon:#8f8a9c; --placeholder:#8a8597;
  --line:#ffffff24; --field-line:#ffffff5c;
  --accent:#c2a7e2; --accent-hover:#d3bcec; --soft:#c2a7e212; --ring:rgba(194,167,226,.28);
  --control-ink:#30253e;
  --card-shadow:0 .25rem 1.125rem rgba(0,0,0,.34);
  --btn-shadow:0 2px .625rem rgba(194,167,226,.16);
  --chip-on-bg:rgba(194,167,226,.16); --chip-on-line:rgba(194,167,226,.45); --chip-on-ink:#c2a7e2;
  --danger-ink:#f87171; --danger-bg:rgba(239,68,68,.08); --danger-line:rgba(239,68,68,.22);
  --ok-ink:#9bc9b2; --ok-bg:rgba(155,201,178,.08); --ok-line:rgba(155,201,178,.24);
  /* password strength, weakest → strongest: danger → amber → the dashboard's --green (the dark dashboard has no amber; this one is the light amber's hue, lightened) */
  --meter-1:#f87171; --meter-2:#ea9478; --meter-3:#d8b27a; --meter-4:#6b897c; --meter-5:#9bc9b2;
  --backdrop:radial-gradient(70% 55% at 100% 0%,#9a78c414 0%,transparent 70%);
  --font:'DM Sans','Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --radius:.625rem; --radius-card:1.0625rem;

  /* the sidebar's palette (workspace.css), the same in both themes */
  --brand-ink:#eeedf5; --brand-muted:#aaa8bb; --brand-accent:#c5aff0; --brand-line:#ffffff16;
  --brand-focus:#d5bbff;
}
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#f8f7f4; --panel:#fffefd; --raised:#eceefa; --field:#fff;
  --ink:#202438; --muted:#606477; --label:#374151; --icon:#7c8091; --placeholder:var(--muted);
  --line:#dddde6; --field-line:#8f93a6;
  --accent:#4658b8; --accent-hover:#39499e; --soft:#4658b812; --ring:rgba(70,88,184,.22);
  --control-ink:#fff;
  --card-shadow:0 1px .1875rem rgba(15,23,42,.08),0 1.125rem 3.125rem rgba(41,33,63,.08);
  --btn-shadow:0 2px .625rem rgba(99,102,241,.35);
  --chip-on-bg:#e8ecfc; --chip-on-line:#bbc4ec; --chip-on-ink:#35469a;
  --danger-ink:#b91c1c; --danger-bg:rgba(239,68,68,.08); --danger-line:rgba(239,68,68,.2);
  --ok-ink:#216847; --ok-bg:rgba(33,104,71,.07); --ok-line:rgba(33,104,71,.2);
  /* danger → the dashboard's --amber #80551d → its --green #216847 (2 and 4 are the steps between) */
  --meter-1:#b91c1c; --meter-2:#9d391d; --meter-3:#80551d; --meter-4:#6f9d87; --meter-5:#216847;
  --backdrop:radial-gradient(70% 55% at 100% 0%,#eef0fc 0%,transparent 70%);
}

/* ── Page ─────────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
/* Big screens: every length in this file is in rem (px / 16), and the root size grows with the window past
   1920 wide and 960 high (a maximised browser on a 1080p screen) — by its width or its height, whichever
   allows less — so a 1440p or 4K screen shows this same layout larger, filling the screen, instead of a small
   card in empty space. A browser window 1920 wide or less, or 960 high or less, keeps the root at 16px, the
   size everything was drawn at. Content never takes a bigger share of the height than at 1920×960.
   The rem floor and cap follow the browser's own font-size setting (16px unless the user changed it). Browser
   zoom on a big screen still enlarges the page, but less than usual until the root is back at its floor:
   only the .25rem part grows with zoom. Hairlines (1–2px) and the media/container conditions stay in px. */
html{
  font-size:clamp(1rem,.25rem + min(100vw / 160, 100vh / 80),1.75rem);
  -webkit-text-size-adjust:100%;text-size-adjust:100%;
}
body.auth-page{
  margin:0;min-height:100vh;min-height:100dvh;
  display:grid;grid-template-columns:clamp(23.75rem,42vw,max(38.75rem,25vw)) minmax(0,1fr); /* a quarter of an ultrawide */
  font-family:var(--font);font-size:.9375rem;line-height:1.5;
  color:var(--ink);background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
.auth-page svg{flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ── Brand panel: the dashboard sidebar ───────────────────────────────────── */
.auth-brand{
  position:relative;isolation:isolate;
  display:flex;flex-direction:column;min-width:0;
  padding:2.25rem 2.75rem 1.875rem;
  color:var(--brand-ink);
  background:
    radial-gradient(120% 70% at 0% 0%,#241f38 0%,transparent 60%),
    radial-gradient(90% 60% at 100% 100%,#1b2340 0%,transparent 62%),
    #101117;
  border-right:1px solid #ffffff12;
  border-radius:0 1rem 1rem 0;
  box-shadow:.375rem 0 1.5rem rgba(0,0,0,.20);
}
.auth-brand a{color:inherit;text-decoration:none}
.auth-brand a:focus-visible{outline:2px solid var(--brand-focus);outline-offset:2px}

.auth-brand__logo{
  display:inline-flex;align-items:center;gap:.6875rem;align-self:flex-start;max-width:100%;
  margin:-.375rem 0 0 -.375rem;padding:.375rem .75rem .375rem .375rem;
  border:1px solid transparent;border-radius:.75rem;
  transition:background .15s,border-color .15s;
}
.auth-brand__logo:hover{background:#ffffff08;border-color:var(--brand-line)}
.auth-brand__mark{
  width:2.375rem;height:2.375rem;flex:none;border-radius:.625rem;
  display:grid;place-items:center;
  background:#ffffff0d;border:1px solid var(--brand-line);
}
.auth-brand__mark img{width:1.625rem;height:1.625rem;object-fit:contain;display:block}
.auth-brand__name{font-size:1rem;font-weight:650;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Its size follows the room the panel has left (container units), so a short window never pushes it onto the title. */
.auth-brand__art{flex:1;min-height:0;display:grid;place-items:center;padding:1.5rem 0;container-type:size}
.auth-brand__body{min-width:0}
.auth-brand__title{
  margin:0 0 1.375rem;max-width:16ch;
  font-size:clamp(2rem,2.9vw,2.75rem);font-weight:500;line-height:1.14;letter-spacing:-.035em;
  color:var(--brand-ink);
}
.auth-brand__title span{display:block;color:var(--brand-accent)}

/* The site it signs in to — the sidebar header's card */
.auth-site{
  display:inline-flex;align-items:center;gap:.6875rem;max-width:100%;
  padding:.5rem 1rem .5rem .5rem;border-radius:.75rem;
  background:#ffffff08;border:1px solid var(--brand-line);
}
.auth-site__mark{
  width:2.375rem;height:2.375rem;flex:none;border-radius:.625rem;overflow:hidden;
  display:grid;place-items:center;
  background:#b99ae514;border:1px solid var(--brand-line);
  color:var(--brand-accent);font-size:1rem;font-weight:700;
}
.auth-site__mark img{width:1.5rem;height:1.5rem;object-fit:contain;display:block}
.auth-site__mark:has(img) .auth-site__initial{display:none}
.auth-site__text{display:flex;flex-direction:column;min-width:0}
.auth-site__text strong,.auth-site__text small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.auth-site__text strong{font-size:.90625rem;font-weight:650;line-height:1.3}
.auth-site__text small{font-size:.75rem;color:var(--brand-muted);letter-spacing:.01em}

.auth-brand__foot{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  margin-top:2rem;padding-top:1.125rem;border-top:1px solid var(--brand-line);
  font-size:.8125rem;color:var(--brand-muted);
}
.auth-brand .auth-brand__view{display:inline-flex;align-items:center;gap:.375rem;font-weight:600;color:#cfcbdc;border-radius:.375rem}
.auth-brand .auth-brand__view:hover{color:#fff}
.auth-brand__view svg{width:.875rem;height:.875rem}

/* ── The orbit (dashboard hero art), decorative ───────────────────────────── */
.auth-orbit{position:relative;width:min(21.25rem,86%);width:min(21.25rem,86cqw,100cqh);aspect-ratio:1;pointer-events:none}
.auth-orbit__glow{position:absolute;inset:6%;border-radius:50%;background:radial-gradient(circle,#9a78c42e 0%,transparent 66%)}
.auth-orbit__ring{position:absolute;inset:7%;border:1px solid #c8b3e428;border-radius:50%;transform:rotate(-32deg) scaleY(.65)}
.auth-orbit__ring--inner{inset:0;transform:rotate(40deg) scaleY(.65);border-color:#c8b3e416}
.auth-orbit__core{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.auth-orbit__spin{isolation:isolate}
.auth-orbit__spin path{fill:none;stroke-opacity:.34;stroke-linejoin:round;vector-effect:non-scaling-stroke;mix-blend-mode:screen}
.auth-orbit__sparks{stroke:none}
.auth-orbit__sparks circle{fill:#cdc0ff}
.auth-orbit__point{position:absolute;top:24%;right:17%;width:.4375rem;height:.4375rem;border-radius:50%;background:#d7c4ef;box-shadow:0 0 1.125rem #c7a6ec80}
/* Too little room (a landscape phone, a short window): no orbit rather than a stray dot; the space stays. */
@container (max-height:150px){.auth-orbit{display:none}}

/* ── Form side ────────────────────────────────────────────────────────────── */
.auth-main{
  display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;
  padding:3rem 2rem;background:var(--backdrop);
}
.auth-card{
  width:100%;max-width:26.75rem;
  padding:2.125rem 2.125rem 1.5rem;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-card);
  box-shadow:var(--card-shadow);
}
.auth-title{margin:0 0 .375rem;font-size:1.625rem;font-weight:600;line-height:1.2;letter-spacing:-.025em;color:var(--ink)}
.auth-sub{margin:0 0 1.625rem;font-size:.90625rem;line-height:1.55;color:var(--muted)}
.auth-copy{display:none}

/* Alerts */
.auth-alert{
  display:flex;align-items:flex-start;gap:.625rem;margin:0 0 1.25rem;padding:.75rem .875rem;
  border:1px solid var(--danger-line);border-radius:var(--radius);background:var(--danger-bg);
  color:var(--danger-ink);font-size:.875rem;font-weight:500;line-height:1.5;
}
.auth-alert svg{width:1.125rem;height:1.125rem;margin-top:.0625rem}
.auth-title + .auth-alert{margin-top:1.125rem}

/* Fields */
.auth-field{margin:0 0 1.125rem}
.auth-field label{display:block;margin:0 0 .4375rem;font-size:.8125rem;font-weight:600;color:var(--label)}
.auth-label-row{display:flex;align-items:baseline;justify-content:space-between;gap:.75rem;margin:0 0 .4375rem}
.auth-label-row label{margin:0}
.auth-link{margin:-.125rem -.25rem;padding:.125rem .25rem;font-size:.8125rem;font-weight:600;color:var(--accent);text-decoration:none;border-radius:.375rem}
.auth-link:hover{text-decoration:underline;text-underline-offset:.1875rem}

.auth-input{position:relative}
.auth-input input{
  display:block;width:100%;height:3rem;margin:0;padding:0 .875rem 0 2.6875rem;
  border:1px solid var(--field-line);border-radius:var(--radius);
  background:var(--field);color:var(--ink);
  font:inherit;font-size:1rem;
  transition:border-color .15s,box-shadow .15s;
}
.auth-input--toggle input{padding-right:3.125rem}
.auth-input input::placeholder{color:var(--placeholder);opacity:1}
.auth-input input:hover{border-color:var(--muted)}
.auth-input input:focus{outline:2px solid transparent;border-color:var(--accent);box-shadow:0 0 0 .1875rem var(--ring)}
.auth-ico{position:absolute;left:.875rem;top:50%;width:1.125rem;height:1.125rem;transform:translateY(-50%);color:var(--icon);pointer-events:none;transition:color .15s}
.auth-input:focus-within .auth-ico{color:var(--accent)}
.auth-eye{
  position:absolute;right:.375rem;top:50%;transform:translateY(-50%);
  width:2.375rem;height:2.375rem;padding:0;display:grid;place-items:center;
  border:0;border-radius:.5rem;background:transparent;color:var(--icon);cursor:pointer;
  transition:color .15s,background .15s;
}
.auth-eye:hover{color:var(--ink);background:var(--soft)}
.auth-eye[aria-pressed="true"]{color:var(--accent)}
.auth-eye svg{width:1.125rem;height:1.125rem;display:block}

/* Strength meter (reset-password) */
.auth-strength{height:.25rem;margin-top:.625rem;border-radius:6.1875rem;background:var(--line);overflow:hidden}
.auth-strength__bar{width:0;height:100%;border-radius:inherit;background:var(--meter-1);transition:width .3s,background-color .3s}
.auth-strength__bar[data-level="1"]{width:20%;background:var(--meter-1)}
.auth-strength__bar[data-level="2"]{width:40%;background:var(--meter-2)}
.auth-strength__bar[data-level="3"]{width:60%;background:var(--meter-3)}
.auth-strength__bar[data-level="4"]{width:80%;background:var(--meter-4)}
.auth-strength__bar[data-level="5"]{width:100%;background:var(--meter-5)}
.auth-strength__label{min-height:1.125rem;margin-top:.375rem;font-size:.78125rem;color:var(--muted)}

/* The primary button */
.auth-btn{
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  width:100%;min-height:3rem;margin:.5rem 0 0;padding:.6875rem 1.375rem;
  border:0;border-radius:var(--radius);
  background:var(--accent);color:var(--control-ink);box-shadow:var(--btn-shadow);
  font:inherit;font-size:.9375rem;font-weight:600;text-decoration:none;cursor:pointer;
  transition:background .15s,transform .15s;
}
.auth-btn:hover{background:var(--accent-hover)}
.auth-btn:active{transform:translateY(.0625rem)}
.auth-btn svg{width:1.0625rem;height:1.0625rem}

.auth-card a:focus-visible,.auth-card button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* The sign-in fields; disabled while locked out, when only the "Forgot password?" link stays usable */
.auth-fieldset{min-width:0;margin:0;padding:0;border:0}
.auth-fieldset:disabled label,.auth-fieldset:disabled .auth-input,.auth-fieldset:disabled .auth-btn{opacity:.5}
.auth-fieldset:disabled .auth-btn,.auth-fieldset:disabled input{cursor:not-allowed}
.auth-fieldset:disabled .auth-btn:hover{background:var(--accent)}

/* Done states */
.auth-done{text-align:center;padding-top:.25rem}
.auth-done__icon{
  width:3.375rem;height:3.375rem;margin:0 auto 1.125rem;border-radius:50%;
  display:grid;place-items:center;
  background:var(--ok-bg);border:1px solid var(--ok-line);color:var(--ok-ink);
}
.auth-done__icon svg{width:1.5rem;height:1.5rem;stroke-width:2.4}
.auth-done .auth-title{margin-bottom:.625rem}
.auth-done__text{margin:0 0 .375rem;font-size:.90625rem;line-height:1.6;color:var(--muted)}
.auth-done .auth-btn{margin-top:1.375rem}

/* Card footer: back link + interface language */
.auth-card__foot{
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap;
  margin-top:1.625rem;padding-top:1.125rem;border-top:1px solid var(--line);
}
.auth-back{display:inline-flex;align-items:center;gap:.375rem;min-height:2rem;font-size:.84375rem;font-weight:500;color:var(--muted);text-decoration:none;border-radius:.375rem}
.auth-back:hover{color:var(--ink)}
.auth-back svg{width:.9375rem;height:.9375rem}
.auth-langs{display:flex;flex-wrap:wrap;gap:.375rem}
.auth-lang{
  display:inline-flex;align-items:center;gap:.375rem;min-height:2rem;padding:.25rem .6875rem .25rem .5625rem;
  border:1px solid var(--line);border-radius:62.4375rem;background:var(--panel);
  color:var(--muted);font-size:.78125rem;font-weight:600;letter-spacing:.02em;text-decoration:none;
  transition:color .15s,border-color .15s,background .15s;
}
.auth-lang:hover{color:var(--ink);border-color:var(--chip-on-line)}
.auth-lang[aria-current="true"]{background:var(--chip-on-bg);border-color:var(--chip-on-line);color:var(--chip-on-ink)}
/* The flag's size is inline (lang_flag_img(…, 14) in core/helpers.php: 19×14px); in rem it grows with the page. */
.auth-lang img{width:1.1875rem!important;height:.875rem!important}

/* ── Motion: only for those who have not asked for less ───────────────────── */
@media (prefers-reduced-motion:no-preference){
  .auth-card{animation:auth-rise .55s cubic-bezier(.16,1,.3,1) both}
  .auth-orbit{animation:auth-arrive 1.6s cubic-bezier(.22,1,.36,1) both}
  .auth-orbit__ring--outer{animation:auth-drift 18s ease-in-out infinite alternate}
  .auth-orbit__point{animation:auth-spark 4s ease-in-out infinite}
  .auth-orbit__spin{animation:auth-spin 90s linear infinite}
  .auth-orbit__sparks{animation:auth-spin 140s linear infinite}
}
@keyframes auth-rise{from{opacity:0;transform:translateY(.75rem)}to{opacity:1;transform:none}}
@keyframes auth-arrive{from{opacity:0;filter:blur(.75rem)}to{opacity:1;filter:blur(0)}}
@keyframes auth-drift{to{transform:rotate(-12deg) scaleY(.75)}}
@keyframes auth-spark{50%{opacity:.35;box-shadow:0 0 1.5625rem #c7a6ec40}}
@keyframes auth-spin{to{transform:rotate(360deg)}}

/* ── Narrower screens: a compact brand header above the card ──────────────── */
@media (max-width:1100px){
  .auth-brand{padding:2rem 2rem 1.625rem}
}
@media (max-width:860px){
  body.auth-page{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr}
  /* The header's content lines up with the card column (428px, centred; 16px gutters on a phone). */
  .auth-brand{
    --col-inset:max(1rem, calc((100% - 26.75rem) / 2));
    overflow:hidden;padding:1.125rem var(--col-inset) 1.375rem;
    border-right:0;border-bottom:1px solid #ffffff12;border-radius:0 0 1.25rem 1.25rem;box-shadow:0 .375rem 1.5rem rgba(0,0,0,.18);
  }
  .auth-brand__logo{position:relative;z-index:1}
  .auth-brand__mark{width:2.125rem;height:2.125rem}
  .auth-brand__mark img{width:1.375rem;height:1.375rem}
  .auth-brand__name{font-size:.9375rem}
  .auth-brand__art{position:absolute;z-index:-1;top:-2.125rem;right:calc(var(--col-inset) - 4.625rem);width:13.125rem;height:13.125rem;padding:0;opacity:.7}
  .auth-orbit{width:100%}
  .auth-brand__body{position:relative;margin-top:1.375rem}
  .auth-brand__title{margin-bottom:1rem;font-size:1.6875rem;max-width:14ch}
  .auth-site{padding:.375rem .875rem .375rem .375rem}
  .auth-site__mark{width:2rem;height:2rem;font-size:.875rem}
  .auth-site__mark img{width:1.25rem;height:1.25rem}
  .auth-brand__foot{display:none}
  .auth-main{justify-content:flex-start;padding:1.25rem 1rem 1.75rem}
  .auth-card{padding:1.625rem 1.25rem 1.125rem}
  .auth-title{font-size:1.4375rem}
  .auth-sub{margin-bottom:1.375rem}
  .auth-copy{display:block;margin:1.25rem 0 0;font-size:.78125rem;color:var(--muted);text-align:center}

  /* Touch targets of at least 2.75rem. The forgot link's box reaches 1rem up into the gap above its row and
     .5rem down, exactly the row's bottom margin, so it never covers either field; the top padding keeps
     its text level with the label. */
  .auth-label-row{align-items:center;margin-bottom:.5rem}
  .auth-field > label{margin-bottom:.5rem}
  .auth-link{display:inline-flex;align-items:center;min-height:2.75rem;margin:-1rem -.5rem -.5rem;padding:.5rem .5rem 0}
  .auth-eye{right:2px;width:2.75rem;height:2.75rem}
  .auth-back{min-height:2.75rem}
  .auth-lang{min-height:2.75rem;padding-inline:.75rem .8125rem}
}
/* A tall tablet: the card sits in the middle of the room below the header, not at its top. */
@media (min-width:600px) and (max-width:860px) and (min-height:900px){
  .auth-main{justify-content:center;padding-bottom:4rem}
}

@media (forced-colors:active){
  .auth-input input:focus{outline:2px solid CanvasText;outline-offset:1px}
  .auth-btn{border:1px solid ButtonText}
}