/*------------------------------------------------------------------
* Pagizz admin — auth pages (login / register / forgot / recovery)
* Split-screen layout (structure inspired by Clockify's login),
* dark palette + typography per docs/style-guide.md.
-------------------------------------------------------------------*/
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/Inter-Variable.woff2") format("woff2");
}

@font-face {
    font-family: "Space Grotesk";
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url("../fonts/SpaceGrotesk-Variable.woff2") format("woff2");
}

:root {
    --fx-bg: #0b0b0f;
    --fx-panel: #131318;
    --fx-panel-2: #1b1b22;
    --fx-border: rgba(255, 255, 255, .08);
    --fx-border-strong: rgba(255, 255, 255, .16);

    --fx-magenta: #ff4fd8;
    --fx-purple: #b44cff;
    --fx-violet: #7a5fff;
    --fx-orange: #ff7a18;

    --fx-gradient: linear-gradient(90deg, var(--fx-magenta), var(--fx-purple), var(--fx-violet));
    --fx-gradient-hover: linear-gradient(90deg, #ff5fe0, #c05bff, #8a6fff);
    --fx-gradient-soft: linear-gradient(135deg, rgba(255, 79, 216, .35), rgba(180, 76, 255, .35), rgba(122, 95, 255, .35));

    --fx-text: #ffffff;
    --fx-text-muted: #cfcfdb;
    --fx-text-dim: #9696a3;
    --fx-success: #34d399;
    --fx-danger: #ff5c7a;
    --fx-info: #4fa8ff;

    --fx-radius-sm: 8px;
    --fx-radius-control: 10px;
    --fx-radius-lg: 16px;
    --fx-shadow-glow: 0 10px 40px rgba(180, 76, 255, .25);
    --fx-shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);

    --fx-font-display: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    --fx-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

    /* Re-point Bootstrap's own global tokens (.text-muted etc.) */
    --bs-body-color: var(--fx-text-muted);
    --bs-body-color-rgb: 180, 180, 192;
    --bs-body-bg: var(--fx-bg);
    --bs-body-bg-rgb: 11, 11, 15;
    --bs-emphasis-color: var(--fx-text);
    --bs-secondary-color: var(--fx-text-muted);
    --bs-secondary-color-rgb: 207, 207, 219;
    --bs-tertiary-color: var(--fx-text-dim);
    --bs-heading-color: var(--fx-text);
    --bs-border-color: var(--fx-border);
    --bs-border-color-translucent: var(--fx-border);
    --bs-secondary-bg: var(--fx-panel-2);
    --bs-tertiary-bg: var(--fx-panel);
    --bs-link-color: var(--fx-purple);
    --bs-link-hover-color: var(--fx-violet);
}

body {
    background: var(--fx-bg);
    font-family: var(--fx-font);
    color: var(--fx-text-muted);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--fx-font-display);
    color: var(--fx-text);
}

::selection { background: rgba(180, 76, 255, .35); }

.wrapper {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-width: 100%;
    min-height: 100vh;
}

@media (max-width: 860px) {
    .wrapper { grid-template-columns: 1fr; }
    .auth-brand { min-height: 220px; }
}

/*------------------------------------------------------------------
[Brand pane]
-------------------------------------------------------------------*/
.auth-brand {
    position: relative;
    overflow: hidden;
    background: var(--fx-panel);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: clamp(28px, 4vw, 56px);
}

.auth-brand::before {
    content: "";
    position: absolute;
    inset: -20% -10% auto -10%;
    height: 130%;
    background: var(--fx-gradient-soft);
    filter: blur(90px);
    opacity: .5;
    animation: fx-drift 18s ease-in-out infinite alternate;
}

@keyframes fx-drift {
    from { transform: translate3d(-3%, -2%, 0) scale(1); }
    to   { transform: translate3d(3%, 4%, 0) scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
    .auth-brand::before { animation: none; }
}

.auth-brand-mark {
    position: relative;
    z-index: 2;
}

.auth-brand-mark img {
    max-width: 150px;
    height: auto;
    display: block;
}

.auth-brand-copy {
    position: relative;
    z-index: 2;
    max-width: 30rem;
}

.auth-eyebrow {
    font-family: var(--fx-font);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--fx-purple);
    margin: 0 0 14px;
}

.auth-brand-copy h1 {
    font-weight: 700;
    font-size: clamp(28px, 3.6vw, 42px);
    line-height: 1.12;
    letter-spacing: -.01em;
    margin: 0 0 16px;
    text-wrap: balance;
}

.auth-brand-copy p {
    font-size: 15px;
    line-height: 1.6;
    color: var(--fx-text-muted);
    margin: 0;
    max-width: 34ch;
}

.auth-brand-foot {
    position: relative;
    z-index: 2;
    font-size: .8rem;
    color: var(--fx-text-dim);
}

/*------------------------------------------------------------------
[Form pane]
-------------------------------------------------------------------*/
.auth-form-pane {
    background: var(--fx-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(28px, 5vw, 56px);
}

/* #body has no explicit width of its own, so without this its flex-item
   size (and therefore the 100%-wide .auth-content inside it) shrinks to
   fit whatever text happens to be on the page — short pages (login)
   would render narrower than pages with a longer paragraph (reset). */
#body {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Bootstrap's .container defaults to shrink-wrapping its content inside
   a non-stretching flex column (same root cause as #body above) — pin it
   to the same width as .auth-content so the flash-message alert lines up
   with the card underneath instead of collapsing to icon+text width. */
#body > .content {
    width: 100%;
}

#body > .content .container {
    width: 100%;
    max-width: 440px;
    padding-left: 15px;
    padding-right: 15px;
}

.auth-content {
    position: relative;
    width: 100%;
    max-width: 440px;
    padding: 15px;
    z-index: 5;
}

.auth-content .card {
    background: var(--fx-panel-2);
    border: 1px solid var(--fx-border);
    border-radius: var(--fx-radius-lg);
}

.auth-content .card .card-block,
.auth-content .card .card-body {
    padding: 36px 32px;
}

.auth-content .brand {
    filter: drop-shadow(0 4px 18px rgba(180, 76, 255, .3));
}

.auth-content h6 {
    font-family: var(--fx-font-display);
    color: var(--fx-text);
    font-weight: 600;
}

p.text-muted { font-size: 13px; }

.wrapper a,
.wrapper p > a {
    color: var(--fx-purple);
    font-weight: 700;
}

/*------------------------------------------------------------------
[Buttons — same theming approach as assets/css/master.css]
-------------------------------------------------------------------*/
.btn {
    --bs-btn-border-radius: var(--fx-radius-control);
    --bs-btn-font-weight: 600;
    padding: .7rem 1.25rem;
    transition: background-position .4s ease, transform .12s ease, background-color .15s ease, border-color .15s ease;
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-border-color: transparent;
    background: var(--fx-gradient);
    background-size: 160% 160%;
    box-shadow: var(--fx-shadow-glow);
}

.btn-primary:hover { background: var(--fx-gradient-hover); }
.btn-primary:active { transform: scale(.99); }

.btn-social {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    background: var(--fx-panel);
    border: 1.5px solid var(--fx-border);
    color: var(--fx-text);
}

.btn-social:hover {
    background: var(--fx-panel-2);
    border-color: var(--fx-border-strong);
    color: var(--fx-text);
}

.btn-social img,
.btn-social svg { width: 18px; height: 18px; }

.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0;
    color: var(--fx-text-dim);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--fx-border);
}

/*------------------------------------------------------------------
[Forms]
-------------------------------------------------------------------*/
.form-control {
    border-radius: var(--fx-radius-control);
    border: 1.5px solid var(--fx-border);
    background-color: var(--fx-panel);
    color: var(--fx-text);
    box-shadow: none !important;
    padding: .6rem .8rem;
}

.form-control::placeholder { color: var(--fx-text-dim); }

.form-control:focus {
    box-shadow: 0 0 0 3px rgba(122, 95, 255, .25) !important;
    border-color: var(--fx-violet);
    background-color: var(--fx-panel);
    color: var(--fx-text);
}

.form-control.is-invalid,
.was-validated .form-control:invalid {
    border-color: var(--fx-danger);
}

.form-check-input {
    background-color: var(--fx-panel);
    border: 1.5px solid var(--fx-border-strong);
}

.form-check-input:checked {
    background-color: var(--fx-violet);
    border-color: var(--fx-violet);
}

/*------------------------------------------------------------------
[Code input - 6 boxos email/2FA kód beviteli komponens]
-------------------------------------------------------------------*/
.code-input-group {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.code-input-box {
    width: 44px;
    height: 52px;
    padding: 0;
    text-align: center;
    font-size: 1.3rem;
    font-weight: 700;
    text-transform: uppercase;
}

/*------------------------------------------------------------------
[Alerts — tinted-transparent for dark surfaces]
-------------------------------------------------------------------*/
.alert {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    border: 1px solid transparent;
    border-left-width: 3px;
    border-radius: var(--fx-radius-control);
    padding: .9rem 1rem;
    font-size: .92rem;
    box-shadow: var(--fx-shadow-sm);
    text-align: left;
}

.alert .alert-icon { flex: none; margin-top: .1rem; }
.alert > div { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; }

.alert .btn-close {
    margin-left: auto;
    filter: invert(1) grayscale(100%) brightness(200%);
    opacity: .5;
}

.alert .btn-close:hover { opacity: .9; }

.alert-success {
    background: rgba(52, 211, 153, .1);
    border-color: rgba(52, 211, 153, .28);
    border-left-color: var(--fx-success);
    color: #8ee9c4;
}

.alert-danger {
    background: rgba(255, 92, 122, .1);
    border-color: rgba(255, 92, 122, .28);
    border-left-color: var(--fx-danger);
    color: #ffa9bb;
}

.alert-info {
    background: rgba(79, 168, 255, .1);
    border-color: rgba(79, 168, 255, .28);
    border-left-color: var(--fx-info);
    color: #a5d0ff;
}

/* Jogi linkek a brand-pane aljában (ÁSZF / adatkezelés). */
.auth-brand-foot a { color: inherit; text-decoration: underline; text-underline-offset: 3px; opacity: .85; }
.auth-brand-foot a:hover { opacity: 1; }