/* GENERATED by chrome/generate.mjs — do not edit.
   Sources: ui/LoginCard.css.ts, login/shell.css
   Edit those instead; a change here is overwritten on the next run. */
/* ── LoginCard ── from ui/LoginCard.css.ts, verbatim ── */
.p-login-bg{position:fixed;inset:0;background-size:cover;background-position:center;background-color:var(--p-icon-sidebar)}
.p-login-scrim{position:fixed;inset:0;background:var(--p-scrim-login);pointer-events:none}
.p-login-edge{position:fixed;top:0;left:0;right:0;height:4px;z-index:1;background:var(--p-primary)}
.p-login-card{position:relative;width:100%;max-width:452px;flex-shrink:0;padding:38px clamp(24px,5vw,40px) 30px;border-radius:var(--p-radius-xl);background:rgba(255,255,255,.8);backdrop-filter:var(--p-glass-blur-strong);-webkit-backdrop-filter:var(--p-glass-blur-strong);border:1px solid rgba(255,255,255,.85);box-shadow:var(--p-shadow-login);animation:p-login-in .5s var(--p-ease-enter) both}
.p-login-card .ant-input-affix-wrapper,.p-login-card .ant-input{background:rgba(255,255,255,.7)}
.p-login-mark{font-family:var(--p-font-family);font-weight:var(--p-font-weight-display);font-size:26px;letter-spacing:-0.6px;color:var(--p-icon-sidebar);text-align:center}
.p-login-lbl{font-size:var(--p-font-size-sm);color:var(--p-text-secondary);margin-bottom:6px}
.p-login-cta{width:100%;height:32px;margin-top:4px;border:0;border-radius:var(--p-radius);cursor:pointer;font-family:var(--p-font-family);font-size:var(--p-font-size-body);font-weight:var(--p-font-weight-strong);color:#fff;background:var(--p-primary);box-shadow:inset 0 1px 0 rgba(255,255,255,.34),inset 0 -2px 6px color-mix(in oklab,var(--p-icon-sidebar) 34%,transparent),0 0 0 2px rgba(16,16,22,.09),0 10px 22px -16px color-mix(in oklab,var(--p-primary) 70%,transparent);transition:transform var(--p-motion) var(--p-ease),box-shadow var(--p-motion-slow) var(--p-ease)}
.p-login-cta:hover{transform:translateY(-1px)}
.p-login-cta:active{transform:translateY(0);box-shadow:inset 0 2px 8px color-mix(in oklab,var(--p-icon-sidebar) 48%,transparent)}
.p-login-foot{margin-top:24px;padding-top:16px;border-top:1px solid color-mix(in oklab,var(--p-primary) 12%,transparent);display:flex;gap:16px;flex-wrap:wrap;font-size:var(--p-font-size-sm);color:var(--p-text-tertiary)}
@keyframes p-login-in{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.p-login-card{animation:none}.p-login-cta{transition:none}.p-login-cta:hover{transform:none}}

/* ── login/shell.css ── hand-written: Twig-only markup and static state ── */
/* Hand-written half of login.css. The card itself is generated from ui/LoginCard.css.ts —
   see chrome/generate.mjs. What stays here is everything that styles the CONSUMER SIDE of the
   login page, which no component can own:

     - the Symfony/Bootstrap form markup the Twig template renders (.form-control, .form-group,
       .btn-primary, .form-check, .alert), so legacy mode keeps working untouched
     - the input affordances and page furniture around the card (.p-inp*, .p-login-row,
       .p-login-alt, .p-login-forgot, .p-login-copy)

   A rule belongs here when the markup it targets is rendered by the consumer, not by LoginCard. */

/* ── Restored after the split dropped them ──────────────────────────────────────────────────
   These were in the hand-written login.css and did not survive being generated from the
   component, because the rule that decided ownership looked only at CLASS selectors: anything
   whose classes all belonged to LoginCard was treated as the component's, which silently took
   with it every descendant rule targeting markup only the Twig page renders — its <label>s, the
   <img> in the mark, the links in the footer — plus the positioning the React component sets
   inline instead of in CSS.

   The component does not need any of them. The server-rendered page does. */

/* The card is placed by CSS on the Twig page; LoginCard sets margin inline, so the generated
   half carries nothing and the card stopped being offset inside its row flex container. */
.p-login-card{margin:auto auto auto clamp(24px,8vw,160px)}
@media (max-width:999px){.p-login-card{margin:auto}}

/* The mark is a block with a real logo <img> on the Twig page; in the component it is text. */
.p-login-mark{display:block;margin-bottom:28px}
.p-login-mark img{display:block;max-height:72px;max-width:100%;margin:0 auto}

/* Real <label> elements — the Symfony form renders them; LoginCard uses .p-login-lbl instead. */
.p-login-card label{display:block;font-size:var(--p-font-size-sm);color:var(--p-text-secondary);margin-bottom:6px}

/* Footer links: anchors on the Twig page, and the row that aligns them. */
.p-login-foot{align-items:center}
.p-login-foot a{color:var(--p-primary);font-weight:var(--p-font-weight-strong);text-decoration:none}
.p-login-foot a:hover{color:var(--p-primary-active);text-decoration:underline}

/*
 * @pimcore/portal-ui-kit/login.css — Tier-1 login styling for the SERVER-RENDERED (Twig) login.
 *
 * The portal login (auth/login.html.twig) is a Symfony-form + Bootstrap page shared by BOTH the
 * new studio stack and the legacy stack — NOT a React island. So this mirrors the kit <LoginCard>
 * (the `.p-login-*` structure) AND styles the Bootstrap form markup it renders (.form-control,
 * .btn-primary, .form-check, .alert) to the design. Load AFTER tokens/index.css.
 *
 * KEEP IN SYNC with ui/LoginCard.tsx. Load only on the login page — it does not affect the
 * post-login portal (new or legacy).
 */

/* Full-screen stage */
.p-login{position:fixed;inset:0;z-index:100;display:flex;overflow-y:auto;padding:clamp(16px,4vh,64px) 0;background:var(--p-icon-sidebar);font-family:var(--p-font-family);color:var(--p-text)}
.p-login-card__title{font-size:var(--p-font-size-subtitle);font-weight:var(--p-font-weight-strong);color:var(--p-text);text-align:center;margin:0 0 20px}

/* Symfony-form Bootstrap markup → design inputs (glass) */
.p-login-card .form-group{margin-bottom:16px}
.p-login-card .form-control{width:100%;height:36px;padding:0 12px;border-radius:var(--p-radius);border:1px solid var(--p-border);background:rgba(255,255,255,.7);color:var(--p-text);font-family:var(--p-font-family);font-size:var(--p-font-size-body);transition:border-color var(--p-motion) var(--p-ease),box-shadow var(--p-motion) var(--p-ease)}
.p-login-card .form-control:focus{outline:0;border-color:var(--p-primary);box-shadow:0 0 0 3px color-mix(in oklab,var(--p-primary) 20%,transparent)}
.p-login-card .form-check{display:flex;align-items:center;gap:8px;margin:4px 0 8px}
.p-login-card .form-check-input{width:16px;height:16px;accent-color:var(--p-primary);margin:0}
.p-login-card .form-check-label{margin:0;color:var(--p-text-secondary)}

/* CTA (mirrors .p-login-cta) — the primary submit + guest/oidc buttons */
.p-login-card .btn-primary{display:inline-flex;align-items:center;justify-content:center;width:100%;min-height:36px;margin-top:4px;padding:0 16px;border:0;border-radius:var(--p-radius);cursor:pointer;font-family:var(--p-font-family);font-size:var(--p-font-size-body);font-weight:var(--p-font-weight-strong);color:#fff;background:var(--p-primary);box-shadow:inset 0 1px 0 rgba(255,255,255,.34),inset 0 -2px 6px color-mix(in oklab,var(--p-icon-sidebar) 34%,transparent),0 0 0 2px rgba(16,16,22,.09),0 10px 22px -16px color-mix(in oklab,var(--p-primary) 70%,transparent);transition:transform var(--p-motion) var(--p-ease),box-shadow var(--p-motion-slow) var(--p-ease);text-decoration:none}
.p-login-card .btn-primary:hover{transform:translateY(-1px);color:#fff}
.p-login-card .btn-primary:active{transform:translateY(0)}
.p-login-card .btn-block{width:100%}

.p-login-card .alert-danger{padding:8px 12px;border-radius:var(--p-radius);background:var(--p-error-bg,#fff2f0);color:var(--p-error,#cf1322);font-size:var(--p-font-size-sm);margin-bottom:14px}
/* recover page: the happy path ("reset link sent") is a SUCCESS notification -- Notification::HTML_CLASS_SUCCESS */
.p-login-card .alert-success{padding:8px 12px;border-radius:var(--p-radius);background:var(--p-success-bg,#f6ffed);color:var(--p-success,#389e0d);font-size:var(--p-font-size-sm);margin-bottom:14px}
.p-login-copy{margin-left:auto}

/* Leading icon + trailing action (email icon, password reveal) */
.p-login-card .p-inp{position:relative;display:flex;align-items:center}
.p-login-card .p-inp .form-control{flex:1;width:100%}
.p-login-card .p-inp--lead .form-control{padding-left:38px}
.p-login-card .p-inp--tail .form-control{padding-right:42px}
.p-login-card .p-inp-ico{position:absolute;left:12px;top:50%;transform:translateY(-50%);display:inline-flex;color:var(--p-text-tertiary);pointer-events:none}
.p-login-card .p-inp-ico svg{width:16px;height:16px}
.p-login-card .p-inp-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:0;background:transparent;border-radius:var(--p-radius-sm);color:var(--p-text-tertiary);cursor:pointer;transition:color var(--p-motion) var(--p-ease)}
.p-login-card .p-inp-eye:hover{color:var(--p-text-secondary)}
.p-login-card .p-inp-eye.is-on{color:var(--p-primary)}
.p-login-card .p-inp-eye svg{width:16px;height:16px}

/* Remember me + forgot password on one row */
.p-login-card .p-login-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:2px 0 14px}
.p-login-card .p-login-row .form-check{margin:0;padding:0}
.p-login-card .form-check-input{position:static;float:none;flex:none;margin:0}
.p-login-card .p-login-forgot{margin-left:auto;font-size:var(--p-font-size-sm);color:var(--p-primary);font-weight:var(--p-font-weight-strong);text-decoration:none;white-space:nowrap}
.p-login-card .p-login-forgot:hover{color:var(--p-primary-active);text-decoration:underline}

/* Guest / OIDC alternate actions (secondary, below the primary CTA) */
.p-login-alt{margin-top:14px;padding-top:16px;border-top:1px solid color-mix(in oklab,var(--p-primary) 12%,transparent);display:flex;flex-direction:column;gap:10px}
.p-login-card .btn-secondary{display:inline-flex;align-items:center;justify-content:center;width:100%;min-height:36px;padding:0 16px;border:1px solid var(--p-border);border-radius:var(--p-radius);cursor:pointer;font-family:var(--p-font-family);font-size:var(--p-font-size-body);font-weight:var(--p-font-weight-strong);color:var(--p-text);background:rgba(255,255,255,.6);text-decoration:none;transition:border-color var(--p-motion) var(--p-ease),background var(--p-motion) var(--p-ease)}
.p-login-card .btn-secondary:hover{border-color:var(--p-primary);color:var(--p-primary);background:rgba(255,255,255,.85)}

@keyframes p-login-in{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.p-login-card{animation:none}.p-login-card .btn-primary{transition:none}.p-login-card .btn-primary:hover{transform:none}}