:root {
  --auth-bg-1: #0f172a;
  --auth-bg-2: #172554;
  --auth-bg-3: #4338ca;
  --auth-accent: #4f46e5;
  --auth-accent-2: #2563eb;
  --auth-violet: #7c3aed;
  --auth-green: #10b981;
  --auth-amber: #f59e0b;
  --auth-rose: #f43f5e;
  --auth-sky: #0ea5e9;
  --auth-card: rgba(255,255,255,0.94);
  --auth-text: #0f172a;
  --auth-muted: #64748b;
  --auth-border: #e2e8f0;
  --auth-shadow: 0 30px 80px rgba(2, 6, 23, 0.28);
  --auth-shadow-soft: 0 16px 38px rgba(15, 23, 42, 0.10);
  --auth-radius-xl: 32px;
  --auth-radius-lg: 22px;
  --auth-radius-md: 16px;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body.auth-page-body {
  min-height: 100vh;
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--auth-text);
  background: linear-gradient(135deg, #dbeafe 0%, #f5f3ff 52%, #ecfdf5 100%);
}
a { color: inherit; }
.auth-shell { position: relative; min-height: 100vh; overflow: hidden; }
.auth-shell__bg { position: absolute; inset: 0; pointer-events: none; }
.auth-shell__bg--one { background: radial-gradient(circle at 14% 14%, rgba(37,99,235,.28), transparent 24%), radial-gradient(circle at 86% 18%, rgba(124,58,237,.22), transparent 26%), radial-gradient(circle at 15% 82%, rgba(16,185,129,.16), transparent 22%); }
.auth-shell__bg--two { backdrop-filter: blur(2px); }
.auth-shell__bg--grid { background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px); background-size: 32px 32px; mask-image: radial-gradient(circle at center, black 48%, transparent 100%); }
.auth-layout {
  position: relative; z-index: 1; min-height: 100vh; padding: 32px;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 0;
  max-width: 1380px; margin: 0 auto;
}
.auth-brand-panel, .auth-content-panel {
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: var(--auth-shadow);
}
.auth-brand-panel {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, rgba(15,23,42,.96), rgba(30,41,59,.94));
  border-radius: var(--auth-radius-xl) 0 0 var(--auth-radius-xl);
  color: #fff; padding: 36px 38px; display: flex; flex-direction: column; min-height: 760px;
}
.auth-content-panel {
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,252,.94));
  border-left: 0; border-radius: 0 var(--auth-radius-xl) var(--auth-radius-xl) 0;
  padding: 42px 42px 38px; display: flex; align-items: center; justify-content: center;
}
.auth-brand-top, .auth-brand-footer { display:flex; align-items:center; justify-content:space-between; gap:18px; }
.auth-brand { display:inline-flex; align-items:center; gap:16px; text-decoration:none; }
.auth-brand__logo {
  width: 58px; height: 58px; border-radius: 20px; display:inline-flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, #38bdf8, #4f46e5 55%, #7c3aed); color:#fff; font-size: 1.35rem; font-weight: 900;
  box-shadow: 0 18px 40px rgba(79,70,229,.34), inset 0 1px 0 rgba(255,255,255,.18);
}
.auth-brand__title, .auth-brand__subtitle { display:block; }
.auth-brand__title { font-size: 1.55rem; font-weight: 900; letter-spacing: -.03em; }
.auth-brand__subtitle { font-size: .92rem; color: rgba(255,255,255,.72); margin-top: 2px; }
.auth-lang-switch { display:inline-flex; align-items:center; gap:8px; padding: 7px; border-radius: 18px; background: rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.10); backdrop-filter: blur(14px); }
.auth-lang-pill { display:inline-flex; align-items:center; gap:8px; padding:10px 12px; border-radius: 14px; text-decoration:none; color: rgba(255,255,255,.86); font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; transition: .22s ease; }
.auth-lang-pill:hover { background: rgba(255,255,255,.08); color: #fff; }
.auth-lang-pill.is-active { background: #fff; color: #1e293b; box-shadow: 0 10px 22px rgba(15,23,42,.16); }
.auth-lang-pill.is-active.is-sw { color: #0f766e; }
.auth-lang-pill__flag { width: 16px; height: 16px; border-radius: 999px; object-fit: cover; }
.auth-brand-copy { margin-top: auto; padding-top: 48px; max-width: 620px; }
.auth-eyebrow { display:inline-flex; align-items:center; gap:8px; border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.06); padding:10px 16px; border-radius:999px; font-size:.74rem; font-weight: 800; text-transform: uppercase; letter-spacing:.16em; color: rgba(255,255,255,.86); }
.auth-eyebrow::before { content:""; width:10px; height:10px; border-radius:999px; background: #34d399; box-shadow: 0 0 0 6px rgba(52,211,153,.12); }
.auth-brand-copy h1 { margin: 20px 0 0; font-size: clamp(2.6rem, 4vw, 4.7rem); line-height: 1.02; letter-spacing: -.05em; font-weight: 900; }
.auth-brand-copy p { margin: 20px 0 0; max-width: 560px; font-size: 1.08rem; line-height: 1.8; color: rgba(255,255,255,.74); }
.auth-feature-list { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:16px; margin-top: 38px; }
.auth-feature-card { border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.06); padding: 18px; border-radius: 22px; backdrop-filter: blur(10px); }
.auth-feature-card strong { display:block; font-size: 1.7rem; font-weight: 900; color:#fff; }
.auth-feature-card span { display:block; margin-top: 6px; font-size:.92rem; line-height:1.5; color: rgba(255,255,255,.72); }
.auth-brand-footer { margin-top: auto; padding-top: 26px; color: rgba(255,255,255,.56); font-size: .86rem; border-top: 1px solid rgba(255,255,255,.10); }
.auth-mobile-top { display:none; width:100%; align-items:center; justify-content:space-between; gap:18px; margin-bottom: 24px; }
.auth-brand--light .auth-brand__title { color: var(--auth-text); }
.auth-brand--light .auth-brand__subtitle { color: var(--auth-muted); }
.auth-card-wrap { width: 100%; max-width: 560px; }
.auth-page-intro { margin-bottom: 24px; }
.auth-page-chip { display:inline-flex; align-items:center; padding:10px 15px; border-radius:999px; font-size: .74rem; font-weight: 800; letter-spacing:.16em; text-transform: uppercase; }
.auth-page-chip--indigo { background:#eef2ff; color:#4338ca; }
.auth-page-chip--green { background:#ecfdf5; color:#047857; }
.auth-page-chip--amber { background:#fffbeb; color:#b45309; }
.auth-page-chip--violet { background:#f5f3ff; color:#6d28d9; }
.auth-page-chip--rose { background:#fff1f2; color:#be123c; }
.auth-page-chip--sky { background:#f0f9ff; color:#0369a1; }
.auth-page-intro h2 { margin: 16px 0 0; font-size: clamp(2rem, 3vw, 2.7rem); line-height:1.08; letter-spacing:-.04em; font-weight:900; color:var(--auth-text); }
.auth-page-intro p { margin: 12px 0 0; color: var(--auth-muted); font-size: 1rem; line-height: 1.75; }
.auth-form-card {
  padding: 32px; border-radius: 28px; background: var(--auth-card);
  border:1px solid rgba(226,232,240,.95); box-shadow: var(--auth-shadow-soft);
}
.auth-field + .auth-field, .auth-form-card > .auth-grid-2, .auth-form-card > .auth-info-box, .auth-form-card > .auth-form-meta, .auth-form-card > .auth-form-actions, .auth-form-card > .auth-btn { margin-top: 20px; }
.auth-grid-2 { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:18px; }
.auth-field-head { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.auth-label { display:block; font-size:.88rem; font-weight:700; color:#334155; margin-bottom:10px; }
.auth-input {
  width:100%; height: 56px; border-radius: 18px; border:1px solid var(--auth-border);
  background: #f8fafc; padding: 0 16px; outline: none; transition: .2s ease; color: var(--auth-text);
  font-size: .98rem; box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
}
.auth-input::placeholder { color:#94a3b8; }
.auth-input:focus { border-color: rgba(79,70,229,.42); background:#fff; box-shadow: 0 0 0 4px rgba(79,70,229,.10); }
.auth-password-wrap { position: relative; }
.auth-password-wrap .auth-input { padding-right: 86px; }
.auth-toggle-password {
  position:absolute; right:10px; top:50%; transform:translateY(-50%); border:0; cursor:pointer;
  height:38px; min-width:62px; padding:0 12px; border-radius: 12px; background:#e2e8f0; color:#334155; font-weight:700;
}
.auth-toggle-password:hover { background:#cbd5e1; }
.auth-help { margin-top: 8px; font-size: .78rem; line-height: 1.55; color:#94a3b8; }
.auth-error { margin-top: 8px; font-size: .82rem; color: #dc2626; }
.auth-status {
  margin: 0 0 18px; padding: 14px 16px; border-radius: 18px; font-size: .92rem; font-weight: 600;
  border:1px solid transparent;
}
.auth-status--success { background:#ecfdf5; color:#047857; border-color:#a7f3d0; }
.auth-info-box { padding: 16px 18px; border-radius: 18px; background:#f8fafc; border:1px solid #e2e8f0; color:#64748b; line-height:1.7; font-size:.92rem; }
.auth-form-meta { display:flex; align-items:center; justify-content:space-between; gap:18px; padding-top: 16px; border-top:1px solid #edf2f7; }
.auth-checkbox { display:inline-flex; align-items:center; gap:10px; font-size: .92rem; color:#475569; cursor:pointer; }
.auth-checkbox input { width: 16px; height: 16px; accent-color: var(--auth-accent); }
.auth-form-note { color:#94a3b8; font-size: .78rem; font-weight:600; }
.auth-btn {
  width:100%; min-height:56px; border:0; border-radius:18px; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; text-decoration:none;
  font-size:.92rem; font-weight:800; letter-spacing:.10em; text-transform:uppercase;
}
.auth-btn--primary {
  color:#fff; background: linear-gradient(135deg, var(--auth-accent-2), var(--auth-accent) 50%, var(--auth-violet));
  box-shadow: 0 18px 34px rgba(79,70,229,.24); transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.auth-btn--primary:hover { transform: translateY(-1px); filter: brightness(1.03); box-shadow: 0 24px 40px rgba(79,70,229,.28); }
.auth-btn--auto { width:auto; min-width: 170px; padding: 0 24px; }
.auth-form-actions { display:flex; align-items:center; justify-content:space-between; gap:16px; padding-top: 16px; border-top:1px solid #edf2f7; }
.auth-form-actions--stack { align-items:flex-start; }
.auth-link { color: var(--auth-accent); text-decoration:none; font-weight:700; }
.auth-link:hover { color:#3730a3; }
.auth-link--button { background:none; border:0; cursor:pointer; padding:0; font:inherit; }
/* Breeze component compatibility */
.auth-form-card .block { display:block; }
.auth-form-card .w-full { width:100%; }
.auth-form-card .mt-2 { margin-top:8px; }
.auth-form-card .rounded-md { border-radius: 18px; }
.auth-form-card .border-gray-300 { border-color: var(--auth-border); }
.auth-form-card .shadow-sm { box-shadow: none; }
.auth-form-card .focus\:border-indigo-500:focus { border-color: rgba(79,70,229,.42); }
.auth-form-card .focus\:ring-indigo-500:focus { box-shadow: 0 0 0 4px rgba(79,70,229,.10); }
.auth-form-card input[type="email"], .auth-form-card input[type="password"], .auth-form-card input[type="text"] {
  width:100%; height:56px; border-radius:18px; border:1px solid var(--auth-border); background:#f8fafc; padding:0 16px; outline:none; transition:.2s ease; color:var(--auth-text); font-size:.98rem;
}
.auth-form-card input[type="email"]:focus, .auth-form-card input[type="password"]:focus, .auth-form-card input[type="text"]:focus { border-color: rgba(79,70,229,.42); background:#fff; box-shadow: 0 0 0 4px rgba(79,70,229,.10); }
.auth-form-card label { display:block; font-size:.88rem; font-weight:700; color:#334155; }
.auth-form-card .text-red-600 { color:#dc2626; }
.auth-form-card .text-sm { font-size:.88rem; }
.auth-form-card .mt-2.text-sm { margin-top:8px; }
.auth-form-card button[type="submit"] { font-family: inherit; }
@media (max-width: 1100px) {
  .auth-layout { grid-template-columns: 1fr; padding: 18px; }
  .auth-brand-panel { display:none; }
  .auth-content-panel { border-radius: 28px; border-left:1px solid rgba(255,255,255,.10); min-height: calc(100vh - 36px); padding: 26px; }
  .auth-mobile-top { display:flex; }
}
@media (max-width: 680px) {
  .auth-content-panel { padding: 18px; }
  .auth-form-card { padding: 22px; border-radius: 24px; }
  .auth-grid-2, .auth-feature-list { grid-template-columns: 1fr; }
  .auth-form-meta, .auth-form-actions, .auth-mobile-top { flex-direction: column; align-items: stretch; }
  .auth-lang-switch { width:100%; justify-content:center; }
  .auth-form-actions--stack form { width:100%; }
  .auth-btn--auto, .auth-btn { width:100%; }
}
/* PAGE LOADER */
.page-loader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(6px);
    transition: opacity 0.35s ease, visibility 0.35s ease;
}

.page-loader--auth {
    background: rgba(15, 23, 42, 0.78);
}

.page-loader.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.page-loader-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
}

.page-loader-text {
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #334155;
}

.page-loader--auth .page-loader-text {
    color: #fff;
}

/* HTML: <div class="loader"></div> */
.loader {
    width: 40px;
    height: 20px;
    --c: no-repeat radial-gradient(farthest-side, #4f46e5 93%, #0000);
    background:
        var(--c) 0 0,
        var(--c) 50% 0;
    background-size: 8px 8px;
    position: relative;
    clip-path: inset(-200% -100% 0 0);
    animation: l6-0 1.5s linear infinite;
}

.loader:before {
    content: "";
    position: absolute;
    width: 8px;
    height: 12px;
    background: #4f46e5;
    left: -16px;
    top: 0;
    animation:
        l6-1 1.5s linear infinite,
        l6-2 0.5s cubic-bezier(0, 200, .8, 200) infinite;
}

.loader:after {
    content: "";
    position: absolute;
    inset: 0 0 auto auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4f46e5;
    animation: l6-3 1.5s linear infinite;
}

.page-loader--auth .loader {
    --c: no-repeat radial-gradient(farthest-side, #ffffff 93%, #0000);
}

.page-loader--auth .loader:before,
.page-loader--auth .loader:after {
    background: #ffffff;
}

@keyframes l6-0 {
    0%, 30%   { background-position: 0 0, 50% 0; }
    33%       { background-position: 0 100%, 50% 0; }
    41%, 63%  { background-position: 0 0, 50% 0; }
    66%       { background-position: 0 0, 50% 100%; }
    74%, 100% { background-position: 0 0, 50% 0; }
}

@keyframes l6-1 {
    90%  { transform: translateY(0); }
    95%  { transform: translateY(15px); }
    100% { transform: translateY(15px); left: calc(100% - 8px); }
}

@keyframes l6-2 {
    100% { top: -0.1px; }
}

@keyframes l6-3 {
    0%, 80%, 100% { transform: translate(0); }
    90%           { transform: translate(26px); }
}


.auth-brand__logo-img {
    width: 58px;
    height: 58px;
    object-fit: contain;
    border-radius: 18px;
    display: inline-flex;
    flex: 0 0 auto;
    background: rgba(255,255,255,.08);
    padding: 6px;
}

/* Mobile & responsive fixes */
@media (max-width: 1100px) {
    body.auth-page-body {
        min-height: 100dvh;
        overflow-x: hidden;
    }

    .auth-shell {
        min-height: 100dvh;
        overflow-y: auto;
    }

    .auth-layout {
        min-height: 100dvh;
        padding: 14px;
        display: block;
    }

    .auth-content-panel {
        width: 100%;
        min-height: calc(100dvh - 28px);
        border-radius: 26px;
        padding: 22px;
        display: block;
    }

    .auth-mobile-top {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

    .auth-mobile-top .auth-brand {
        min-width: 0;
        flex: 1;
    }

    .auth-mobile-top .auth-brand > span:last-child {
        min-width: 0;
    }

    .auth-mobile-top .auth-brand__title,
    .auth-mobile-top .auth-brand__subtitle {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .auth-card-wrap {
        max-width: 100%;
        margin: 0 auto;
    }
}

@media (max-width: 680px) {
    .auth-layout {
        padding: 10px;
    }

    .auth-content-panel {
        min-height: calc(100dvh - 20px);
        padding: 16px;
        border-radius: 22px;
    }

    .auth-mobile-top {
        flex-direction: column;
        align-items: stretch;
        margin-bottom: 18px;
    }

    .auth-mobile-top .auth-brand {
        justify-content: center;
        text-align: left;
    }

    .auth-mobile-top .auth-lang-switch {
        width: 100%;
        justify-content: center;
    }

    .auth-brand__logo,
    .auth-brand__logo-img {
        width: 44px;
        height: 44px;
        border-radius: 14px;
    }

    .auth-brand__title {
        font-size: 1.05rem;
    }

    .auth-brand__subtitle {
        font-size: .74rem;
    }

    .auth-page-intro {
        text-align: center;
        margin-bottom: 18px;
    }

    .auth-page-chip {
        padding: 8px 12px;
        font-size: .65rem;
        letter-spacing: .10em;
    }

    .auth-page-intro h2 {
        font-size: 1.8rem;
    }

    .auth-page-intro p {
        font-size: .9rem;
        line-height: 1.55;
    }

    .auth-form-card {
        padding: 18px;
        border-radius: 22px;
    }

    .auth-input,
    .auth-form-card input[type="email"],
    .auth-form-card input[type="password"],
    .auth-form-card input[type="text"] {
        height: 52px;
        border-radius: 16px;
        font-size: .92rem;
    }

    .auth-password-wrap .auth-input {
        padding-right: 78px;
    }

    .auth-toggle-password {
        height: 34px;
        min-width: 58px;
        font-size: .78rem;
    }

    .auth-form-meta,
    .auth-form-actions {
        gap: 12px;
    }

    .auth-form-note {
        text-align: center;
    }

    .auth-btn {
        min-height: 52px;
        border-radius: 16px;
    }

    .swal2-popup {
        width: calc(100% - 24px) !important;
        border-radius: 18px !important;
    }
}

@media (max-width: 380px) {
    .auth-content-panel {
        padding: 12px;
    }

    .auth-form-card {
        padding: 15px;
    }

    .auth-brand {
        gap: 10px;
    }

    .auth-brand__title {
        font-size: .96rem;
    }

    .auth-brand__subtitle {
        font-size: .68rem;
    }
}/* ==========================================================
   Clean Login Layout
   Removes extra brand text/features and improves logo display.
   ========================================================== */

.auth-page-clean .auth-brand-panel-clean {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.auth-page-clean .auth-brand-top-clean {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.auth-page-clean .auth-brand-logo-only {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.auth-page-clean .auth-login-logo-img {
    width: 132px !important;
    height: 76px !important;
    max-width: 132px !important;
    max-height: 76px !important;
    object-fit: contain !important;
    border-radius: 14px;
    background: #ffffff;
    padding: .45rem;
    box-shadow: 0 12px 26px rgba(0, 0, 0, .18);
}

.auth-page-clean .auth-login-logo-fallback {
    width: 86px !important;
    height: 86px !important;
    font-size: 2rem;
}

.auth-page-clean .auth-brand-copy-clean {
    text-align: left;
}

.auth-page-clean .auth-brand-copy-clean p,
.auth-page-clean .auth-feature-list,
.auth-page-clean .auth-brand__title,
.auth-page-clean .auth-brand__subtitle {
    display: none !important;
}

.auth-page-clean .auth-brand-copy-clean h1 {
    margin-top: 1rem;
    max-width: 480px;
}

.auth-page-clean .auth-brand-footer-clean {
    justify-content: flex-start;
}

.auth-page-clean .auth-brand-footer-clean span:last-child {
    display: none !important;
}

/* Mobile login top */
.auth-page-clean .auth-mobile-top-clean {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .9rem;
    text-align: center;
}

.auth-page-clean .auth-brand-logo-only-mobile {
    justify-content: center;
}

.auth-page-clean .auth-login-mobile-logo-img {
    width: 150px !important;
    height: 82px !important;
    max-width: 150px !important;
    max-height: 82px !important;
    object-fit: contain !important;
    border-radius: 16px;
    background: #ffffff;
    padding: .45rem;
    box-shadow: 0 12px 26px rgba(15, 23, 42, .12);
}

/* Make login card cleaner on mobile */
@media (max-width: 991.98px) {
    .auth-page-clean .auth-brand-panel-clean {
        display: none !important;
    }

    .auth-page-clean .auth-content-panel {
        padding-top: 1.25rem;
    }
}

@media (max-width: 576px) {
    .auth-page-clean .auth-login-mobile-logo-img {
        width: 135px !important;
        height: 74px !important;
    }
}