/* =====================================================================
   Sign-in pages (Assets + Helpdesk) — split screen: a brand-blue panel on the
   left, the form on white where the full logo sits.
   Loaded by includes/layout/auth_head.php.
   ===================================================================== */
  :root{
    --accent: #1b46a2;          /* logo blue */
    --accent-deep: #102d6b;
    --gold: #e9df28;            /* logo yellow */
    --ink: #0f172a;
    --ink-2: #3f434a;
    --ink-dim: #6b7280;
    --ink-faint: #9aa1ad;
    --line: #e6e8ec;
    --line-soft: #f1f3f6;
    --ground: #f4f6f9;
    --panel: #ffffff;
    --rail: #0b1f4b;
    --ok: #12b76a;
    --star: #f5b301;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{height:100%}
  body{
    font-family:'Inter','IBM Plex Sans Arabic',system-ui,-apple-system,'Segoe UI',sans-serif;
    color:var(--ink);
    background:var(--ground);
    min-height:100dvh; display:flex; align-items:center; justify-content:center;
    padding:1.5rem; line-height:1.55; -webkit-font-smoothing:antialiased;
    position:relative; overflow:hidden;
  }

  /* ================= animated background =================
     Layered light, not floating circles. Four fixed layers, each animating
     transform/opacity only so it stays on the compositor:
       .bg-wash    slow-shifting colour ground
       .bg-grid    faint lattice, drifts exactly one cell (seamless loop)
       .bg-beam    wide angular light shafts crossing at different speeds
       .bg-noise   fine grain, kills gradient banding (static)
     Four moving layers total, all transform-only. Deliberately kept low: an
     earlier version animated 16 separate SVG symbols here and that was enough
     to drop frames, so per-element animation counts stay small.
     A vignette keeps the middle calm so the card always reads first. */
  .bg{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;
      contain:strict;              /* nothing in here can affect page layout */
      --mx:0; --my:0}
  .bg span{position:absolute;display:block}
  /* Parallax wrappers. The keyframe animation lives on the child, the pointer
     offset on the parent, so the two never fight over `transform`. --d is the
     layer's depth: bigger = moves further with the cursor. */
  .par{position:absolute;inset:0;
    transform:translate3d(calc(var(--mx) * var(--d) * 1px), calc(var(--my) * var(--d) * 1px), 0);
    transition:transform .5s cubic-bezier(.16,1,.3,1)}

  .bg-wash{inset:-20%;
    background:
      radial-gradient(58% 48% at 16% 10%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 70%),
      radial-gradient(52% 44% at 86% 88%, rgba(140,155,200,.16), transparent 70%),
      radial-gradient(40% 60% at 62% 20%, rgba(255,255,255,.55), transparent 65%),
      linear-gradient(180deg,#fbfcfd 0%, #f4f6f9 52%, #e7ebf2 100%);
    will-change:transform;
    animation:washDrift 28s ease-in-out infinite alternate}
  /* translate only — scaling a layer painted from four gradients re-rasterises
     it at every step, which is far more expensive than moving it. */
  @keyframes washDrift{to{transform:translate3d(-3%, -2.5%, 0)}}

  /* Film grain. NOTE: no mix-blend-mode here on purpose — a blend mode on a
     full-viewport layer forces the compositor to re-blend everything beneath it
     on every frame the layers below animate, which tanked the frame rate. Plain
     opacity gives nearly the same look for none of the cost. */
  .bg-noise{inset:0;opacity:.22;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E");
    background-size:160px 160px}


  /* Grid lattice removed — no square pattern in the background. */
  .bg-gridmask{display:none}


  /* No filter:blur() — blurring a layer this size while it animates forces a
     re-raster every frame. The gradient is already soft enough on its own. */
  .bg-beam{top:-70%;height:240%;width:46%;opacity:.55;will-change:transform;
    background:linear-gradient(90deg, transparent, rgba(120,140,190,.20) 50%, transparent);
    background:linear-gradient(90deg, transparent,
               color-mix(in srgb, var(--accent) 16%, transparent) 50%, transparent)}
  .bg-beam.b1{left:-50%;transform:rotate(16deg);animation:beam1 19s ease-in-out infinite}
  .bg-beam.b2{left:-40%;width:30%;opacity:.4;animation:beam2 27s ease-in-out infinite}
  @keyframes beam1{
    0%,100%{transform:rotate(16deg) translate3d(0,0,0);opacity:.25}
    50%    {transform:rotate(16deg) translate3d(210%,0,0);opacity:.7}}
  @keyframes beam2{
    0%,100%{transform:rotate(-11deg) translate3d(260%,0,0);opacity:.15}
    50%    {transform:rotate(-11deg) translate3d(0,0,0);opacity:.55}}

  .bg-vig{inset:0;
    background:radial-gradient(58% 48% at 50% 48%, rgba(255,255,255,.75), transparent 70%)}

  /* ---------- shell ---------- */
  .auth{
    position:relative; z-index:1;          /* sits above the background lattice */
    width:100%; max-width:1000px; display:grid; grid-template-columns:1.05fr 1fr;
    background:var(--panel); border:1px solid var(--line); border-radius:22px; overflow:hidden;
    box-shadow:0 1px 2px rgba(23,25,28,.04), 0 30px 70px -30px rgba(23,25,28,.32);
    opacity:0; transform:translateY(12px); animation:authRise .7s cubic-bezier(.16,1,.3,1) forwards;
  }
  @keyframes authRise{to{opacity:1;transform:none}}

  /* ---------- left panel: brand blue fade, one icon, one line ---------- */
  .rail{
    position:relative; color:#fff; overflow:hidden;
    background:linear-gradient(155deg, #0b1f4b 0%, var(--accent-deep) 38%, var(--accent) 78%, #3f74d6 100%);
    padding:2.4rem 2.4rem 2rem; display:flex; flex-direction:column;
  }
  /* soft light from the top corner — no grid, no shapes */
  .rail::after{
    content:""; position:absolute; inset:0; pointer-events:none;
    background:radial-gradient(90% 60% at 100% 0%, rgba(255,255,255,.14), transparent 60%);
  }
  .rail > *{position:relative;z-index:1}

  .rail-top{display:flex;align-items:center;gap:.6rem}
  .rail-mark{width:34px;height:34px;border-radius:9px;background:#fff;display:grid;place-items:center;flex:0 0 auto}
  .rail-mark img{width:26px;height:26px;display:block}
  .rail-tag{font-size:.8rem;font-weight:600;letter-spacing:.01em;color:rgba(255,255,255,.88)}

  .rail-mid{margin:1.6rem 0 0;
    opacity:0;transform:translateY(8px);animation:statIn .6s cubic-bezier(.16,1,.3,1) .15s forwards}
  .rail-icon{width:60px;height:60px;border-radius:16px;display:grid;place-items:center;margin-bottom:1.1rem;
    background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
  .rail-icon svg{width:28px;height:28px;color:#fff}
  .rail-mid h1{font-size:1.9rem;font-weight:700;letter-spacing:-.03em;line-height:1.15;color:#fff}
  @keyframes statIn{to{opacity:1;transform:none}}

  /* Live figures — real numbers, plain labels (no marketing copy). */
  .rail-stats{margin-top:auto;padding-top:1.6rem;
    opacity:0;transform:translateY(8px);animation:statIn .6s cubic-bezier(.16,1,.3,1) .3s forwards}
  .rs-lead{display:flex;flex-direction:column}
  .rs-n{font-size:3rem;font-weight:700;line-height:1;letter-spacing:-.045em;color:#fff;font-variant-numeric:tabular-nums}
  .rs-l{font-size:.72rem;color:rgba(255,255,255,.6);margin-top:.35rem;text-transform:uppercase;letter-spacing:.07em}
  .rs-row{display:flex;margin-top:1.4rem;padding-top:1.2rem;border-top:1px solid rgba(255,255,255,.12)}
  .rs-row > div{flex:1}
  .rs-row > div + div{border-inline-start:1px solid rgba(255,255,255,.12);padding-inline-start:1.2rem}
  .rs-n2{font-size:1.5rem;font-weight:700;color:#fff;display:flex;align-items:center;gap:.45rem;font-variant-numeric:tabular-nums;line-height:1}
  .rs-dot{width:8px;height:8px;flex:0 0 auto;border-radius:50%;background:#34d399;box-shadow:0 0 0 3px rgba(52,211,153,.22)}

  .rail-foot{margin-top:1.6rem;font-size:.74rem;color:rgba(255,255,255,.55)}

  /* ---------- right: the form ---------- */
  .form-side{padding:2.6rem 2.5rem;display:flex;flex-direction:column;justify-content:center}
  .brand{display:flex;align-items:center;gap:.7rem;margin-bottom:1.8rem}
  .brand img{height:42px;width:auto;max-width:100%;display:block;object-fit:contain}

  .switcher{position:relative;display:flex;background:var(--line-soft);border:1px solid var(--line);
    border-radius:11px;padding:4px;margin-bottom:1.8rem}
  .switch-pill{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:8px;
    background:var(--panel);border:1px solid var(--line);
    box-shadow:0 1px 2px rgba(23,25,28,.07);
    transition:transform .32s cubic-bezier(.16,1,.3,1);z-index:0}
  .switcher.on-second .switch-pill{transform:translateX(100%)}
  .switch-opt{position:relative;z-index:1;flex:1;display:inline-flex;align-items:center;justify-content:center;
    gap:.4rem;padding:.52rem;border-radius:8px;font-size:.82rem;font-weight:500;
    text-decoration:none;color:var(--ink-dim);transition:color .2s}
  .switch-opt.active{color:var(--ink);font-weight:600}
  .switch-opt svg{width:14px;height:14px}

  h2{font-size:1.45rem;font-weight:600;letter-spacing:-.025em;margin-bottom:.3rem}
  .sub{color:var(--ink-dim);font-size:.87rem;margin-bottom:1.7rem}

  .alert-err{display:flex;align-items:flex-start;gap:.55rem;background:#fef3f2;border:1px solid #fecdca;
    color:#b42318;border-radius:9px;padding:.7rem .85rem;font-size:.83rem;margin-bottom:1.3rem}
  .alert-err svg{flex:0 0 auto;margin-top:1px}

  .field{margin-bottom:1rem;display:flex;flex-direction:column;gap:.4rem}
  .field label{font-size:.79rem;font-weight:500;color:var(--ink-2)}
  .fbox{display:flex;align-items:center;background:var(--panel);border:1px solid var(--line);
    border-radius:10px;transition:border-color .18s, box-shadow .18s}
  .fbox:focus-within{border-color:var(--accent);
    box-shadow:0 0 0 3px rgba(120,130,150,.18);
    box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent)}
  .fbox svg{margin-left:.8rem;color:var(--ink-faint);transition:color .18s;flex:0 0 auto}
  .fbox:focus-within svg{color:var(--accent)}
  .fbox input{flex:1;min-width:0;border:none;outline:none;background:transparent;font-family:inherit;
    font-size:.94rem;padding:.78rem .8rem;color:var(--ink)}
  .fbox input::placeholder{color:var(--ink-faint)}
  .toggle{background:none;border:none;cursor:pointer;color:var(--ink-faint);padding:0 .85rem;
    display:flex;align-items:center;transition:color .18s}
  .toggle:hover{color:var(--ink-2)}

  /* Caps Lock warning — a common, quietly frustrating cause of failed logins */
  .caps{display:none;align-items:center;gap:.4rem;margin-top:.1rem;
    font-size:.75rem;color:#b54708}
  .caps.on{display:flex}

  .submit{width:100%;margin-top:.8rem;border:none;border-radius:10px;padding:.85rem 1rem;
    font-family:inherit;font-weight:600;font-size:.92rem;color:#fff;background:var(--accent);
    cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(23,25,28,.12);
    transition:background .18s, transform .12s}
  .submit:hover{background:var(--accent-deep)}
  .submit:active{transform:scale(.985)}
  .submit svg{transition:transform .18s}
  .submit:hover svg{transform:translateX(2px)}

  .help{margin-top:1.4rem;padding-top:1.2rem;border-top:1px solid var(--line-soft);
    display:flex;align-items:center;gap:.5rem;font-size:.78rem;color:var(--ink-dim)}
  .help svg{color:var(--ink-faint);flex:0 0 auto}

  @media (max-width:880px){
    .auth{grid-template-columns:1fr;max-width:430px}
    .rail{padding:2rem 1.75rem;order:2}
    .rail-mid{padding:1.6rem 0}
    .rail-mid h1{font-size:1.5rem}
    .form-side{padding:2rem 1.75rem;order:1}
  }
  @media (max-width:479px){
    body{padding:0;align-items:flex-start}
    .auth{border:none;border-radius:0;min-height:100dvh;box-shadow:none}
  }
  @media (prefers-reduced-motion:reduce){
    *{animation:none !important;transition:none !important}
    .auth,.rail-mid{opacity:1;transform:none}
    /* keep the layered look, drop all drift */
    .bg-beam.b1{transform:rotate(16deg) translate3d(120%,0,0);opacity:.45}
    .bg-beam.b2{transform:rotate(-11deg) translate3d(120%,0,0);opacity:.3}
    .par{transform:none}
  }

/* ---------- dark theme (set on <html> by the script in auth_head.php) ---------- */
:root[data-theme="dark"]{
  color-scheme:dark;
  --accent:#5b8def; --accent-deep:#3d72db;
  --ink:#e6ebf4; --ink-2:#c3cbd9; --ink-dim:#94a0b5; --ink-faint:#6b778c;
  --line:#2a3446; --line-soft:#1a2230; --ground:#0d131d; --panel:#151c28; --rail:#0a1630;
}
:root[data-theme="dark"] .bg-wash{background:
  radial-gradient(58% 48% at 16% 10%, rgba(91,141,239,.16), transparent 70%),
  radial-gradient(52% 44% at 86% 88%, rgba(60,80,130,.22), transparent 70%),
  linear-gradient(180deg,#101826 0%, #0d131d 52%, #0a0f18 100%)}
:root[data-theme="dark"] .bg-vig{background:radial-gradient(58% 48% at 50% 48%, rgba(13,19,29,.7), transparent 70%)}
:root[data-theme="dark"] .bg-noise{opacity:.08}
:root[data-theme="dark"] .auth{box-shadow:0 1px 2px rgba(0,0,0,.4), 0 30px 70px -30px rgba(0,0,0,.8)}
:root[data-theme="dark"] .brand img{filter:brightness(1.55) saturate(1.1)}
:root[data-theme="dark"] .submit{color:#0b1422}
:root[data-theme="dark"] .alert-err{background:#2e1517;border-color:#5b2328;color:#fecaca}
:root[data-theme="dark"] .caps{color:#fbbf24}
:root[data-theme="dark"] .rail{background:linear-gradient(155deg, #071330 0%, #0f2559 45%, #15407f 100%)}