/* ========================================================================== Alfa Auth — login / sign-in screen Standalone layer for the auth pages. Reuses the --alfa-* tokens defined in alfa-modern.css and inherits the dark theme from . Bidirectional: logical properties keep ar (RTL) and en (LTR) in sync. ========================================================================== */ /* The auth screen lives inside the dashboard's .dashboard-main-wrapper, which the legacy theme pads by 100px/50px and the old login sheet pushed further with padding-top:10%. That padding is what produced the dead band above the card, and stacking a 100dvh child inside it caused a second scrollbar. Strip it back so .alfa-auth is the only thing sizing the page. The .alfa-auth-page class is set on by the inline script in the view; the :has() selectors are the same rule for engines that support it, so the layout is correct before a single line of JS runs. */ .alfa-auth-page, body:has(.alfa-auth) { /* Clips the decorative glows that bleed past the viewport edge. Applied on so the page keeps a single scrollbar — see the note on .alfa-auth. The legacy theme also leaves a 32px bottom margin on , which is pure overflow on a full-height screen. */ overflow-x: hidden; margin: 0 !important; padding: 0 !important; } .alfa-auth-page .dashboard-main-wrapper, .dashboard-main-wrapper:has(.alfa-auth) { min-height: 0 !important; padding: 0 !important; margin: 0 !important; } .alfa-auth { --auth-field-h: 52px; position: relative; /* border-box so the 20px padding is counted inside the viewport height — otherwise min-height resolves to 100dvh + 40px and the page always scrolls by that much even when the card fits. */ box-sizing: border-box; min-height: 100vh; min-height: 100dvh; display: grid; grid-template-rows: auto 1fr auto; /* Grid items default to min-width:auto, which refuses to shrink below the card's intrinsic width and pushes the page into horizontal overflow on narrow screens. */ grid-template-columns: minmax(0, 1fr); row-gap: 20px; padding: 20px; background: var(--alfa-bg); /* Deliberately NOT overflow-x:hidden. Setting one axis forces the other to compute as `auto` rather than `visible`, which turned this element into a second scroll container nested inside the page's own. The decorative glows are clipped on instead. */ } /* Two soft accent washes behind the card. Purely decorative, and cheap — no blur filter, which is what makes gradient backdrops janky on scroll. These are anchored flush to the edges rather than hanging off them: a negative inset would widen the scrollable area and add a horizontal scrollbar. The gradient fades out well before its own bounding box, so sitting inside the edge looks identical to bleeding past it. */ .alfa-auth::before, .alfa-auth::after { content: ""; position: absolute; z-index: 0; border-radius: 50%; pointer-events: none; /* Never let the decoration drive the layout size */ max-width: 100%; } .alfa-auth::before { inset-block-start: -280px; inset-inline-end: 0; width: min(620px, 100%); height: 620px; background: radial-gradient(circle at center, color-mix(in srgb, var(--alfa-accent) 26%, transparent) 0%, transparent 68%); } .alfa-auth::after { inset-block-end: -320px; inset-inline-start: 0; width: min(680px, 100%); height: 680px; background: radial-gradient(circle at center, color-mix(in srgb, var(--alfa-accent) 16%, transparent) 0%, transparent 68%); } [data-alfa-theme="dark"] .alfa-auth::before { background: radial-gradient(circle at center, color-mix(in srgb, var(--alfa-accent) 32%, transparent) 0%, transparent 70%); } /* -------------------------------------------------------------------------- Top bar — language picker and theme toggle -------------------------------------------------------------------------- */ .alfa-auth-topbar { position: relative; z-index: 2; display: flex; align-items: center; justify-content: flex-end; gap: 10px; min-height: 40px; } .alfa-auth-topbar .dropdown-toggle { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding-inline: 14px; background: var(--alfa-surface); border: 1px solid var(--alfa-border); border-radius: var(--alfa-radius-sm); color: var(--alfa-text-muted); font-size: .875rem; font-weight: 550; box-shadow: var(--alfa-shadow-sm); } .alfa-auth-topbar .dropdown-toggle:hover, .alfa-auth-topbar .dropdown-toggle:focus { background: var(--alfa-surface-2); color: var(--alfa-text); border-color: var(--alfa-border-strong); } .alfa-auth-topbar .dropdown-menu { background: var(--alfa-surface); border: 1px solid var(--alfa-border); border-radius: var(--alfa-radius); box-shadow: var(--alfa-shadow-lg); padding: 6px; min-width: 190px; } .alfa-auth-topbar .dropdown-item { display: flex; align-items: center; gap: 10px; border-radius: var(--alfa-radius-sm); padding: 8px 10px; color: var(--alfa-text); font-size: .875rem; } .alfa-auth-topbar .dropdown-item:hover, .alfa-auth-topbar .dropdown-item:focus { background: var(--alfa-surface-2); color: var(--alfa-text); } /* The shared theme toggle only mounts itself into the dashboard topbar, so the auth screen ships its own button with the same visual language. */ .alfa-auth-theme { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; background: var(--alfa-surface); border: 1px solid var(--alfa-border); border-radius: var(--alfa-radius-sm); color: var(--alfa-text-muted); cursor: pointer; box-shadow: var(--alfa-shadow-sm); transition: background-color .15s ease, color .15s ease, border-color .15s ease; } .alfa-auth-theme:hover { background: var(--alfa-surface-2); color: var(--alfa-text); border-color: var(--alfa-border-strong); } .alfa-auth-theme .alfa-icon-sun { display: none; } [data-alfa-theme="dark"] .alfa-auth-theme .alfa-icon-moon { display: none; } [data-alfa-theme="dark"] .alfa-auth-theme .alfa-icon-sun { display: inline; } /* -------------------------------------------------------------------------- Card -------------------------------------------------------------------------- */ .alfa-auth-main { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; min-width: 0; /* No vertical padding: the 1fr grid row already absorbs the leftover height and centres the card, so padding here is added on top of the row and pushes the page past the viewport. Breathing room when the card is taller than the screen comes from the row gap below. */ min-height: 0; } .alfa-auth-card { width: 100%; max-width: 440px; background: var(--alfa-surface); border: 1px solid var(--alfa-border); border-radius: var(--alfa-radius-lg); box-shadow: var(--alfa-shadow-lg); padding: 40px; } .alfa-auth-brand { display: flex; justify-content: center; margin-block-end: 26px; } .alfa-auth-brand img { max-height: 46px; max-width: 200px; width: auto; object-fit: contain; } .alfa-auth-head { text-align: center; margin-block-end: 28px; } .alfa-auth-title { margin: 0 0 6px; font-size: 1.5rem; font-weight: 650; color: var(--alfa-text); letter-spacing: -0.02em; } [dir="rtl"] .alfa-auth-title { letter-spacing: 0; } .alfa-auth-subtitle { margin: 0; font-size: .9375rem; color: var(--alfa-text-muted); } /* -------------------------------------------------------------------------- Fields — floating label pattern -------------------------------------------------------------------------- */ .alfa-field { position: relative; margin-block-end: 18px; } /* The label starts centred over the input and rises into the border once the field holds a value or takes focus. :placeholder-shown is what detects "empty", so every input below carries placeholder=" ". */ .alfa-field > .form-control, .alfa-field > input, .alfa-field > textarea { width: 100%; height: var(--auth-field-h) !important; padding-block: 18px 6px; padding-inline: 46px 14px; background: var(--alfa-surface) !important; border: 1px solid var(--alfa-border) !important; border-radius: var(--alfa-radius) !important; color: var(--alfa-text) !important; font-size: .9375rem; line-height: 1.3; transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; } .alfa-field.has-toggle > input { padding-inline-end: 48px; } /* Anchored to the top edge and moved with inset-block-start rather than a percentage translate: a translate would be relative to the label's own height, which changes as the font shrinks. Animating font-size also avoids transform-origin, whose logical keywords are not supported. */ .alfa-field > label { position: absolute; inset-block-start: 16px; inset-inline-start: 47px; margin: 0; color: var(--alfa-text-subtle); font-size: .9375rem; font-weight: 400; line-height: 1.3; pointer-events: none; transition: inset-block-start .15s ease, font-size .15s ease, color .15s ease; } .alfa-field > .form-control:focus, .alfa-field > input:focus, .alfa-field > textarea:focus { border-color: var(--alfa-accent) !important; box-shadow: 0 0 0 4px color-mix(in srgb, var(--alfa-accent) 14%, transparent) !important; outline: none; } .alfa-field > input:focus + label, .alfa-field > input:not(:placeholder-shown) + label { inset-block-start: 7px; font-size: .6875rem; font-weight: 500; color: var(--alfa-text-muted); } .alfa-field > input:focus + label { color: var(--alfa-accent); } /* Leading icon */ .alfa-field-icon { position: absolute; inset-block-start: 50%; inset-inline-start: 0; width: 46px; transform: translateY(-50%); text-align: center; color: var(--alfa-text-subtle); font-size: .9375rem; pointer-events: none; transition: color .15s ease; } .alfa-field > input:focus ~ .alfa-field-icon { color: var(--alfa-accent); } /* Password reveal */ .alfa-field-toggle { position: absolute; inset-block-start: 50%; inset-inline-end: 6px; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; background: transparent; border: 0; border-radius: var(--alfa-radius-sm); color: var(--alfa-text-subtle); cursor: pointer; transition: color .15s ease, background-color .15s ease; } .alfa-field-toggle:hover { background: var(--alfa-surface-2); color: var(--alfa-text); } .alfa-field-toggle:focus-visible { outline: 2px solid var(--alfa-accent); outline-offset: 2px; } /* Chrome paints autofilled inputs a hard yellow that ignores background-color. An inset shadow the size of the field is the only reliable repaint. */ .alfa-field > input:-webkit-autofill, .alfa-field > input:-webkit-autofill:hover, .alfa-field > input:-webkit-autofill:focus { -webkit-text-fill-color: var(--alfa-text); -webkit-box-shadow: 0 0 0 1000px var(--alfa-surface) inset; box-shadow: 0 0 0 1000px var(--alfa-surface) inset; caret-color: var(--alfa-text); transition: background-color 9999s ease-in-out 0s; } /* Invalid state */ .alfa-field.is-invalid > input, .alfa-field.is-invalid > textarea, .alfa-field > input.is-invalid { border-color: var(--alfa-danger) !important; } .alfa-field.is-invalid > input:focus, .alfa-field.is-invalid > textarea:focus, .alfa-field > input.is-invalid:focus { box-shadow: 0 0 0 4px color-mix(in srgb, var(--alfa-danger) 14%, transparent) !important; } .alfa-field.is-invalid .alfa-field-icon { color: var(--alfa-danger); } .alfa-field-error { display: block; margin-block-start: 6px; padding-inline-start: 2px; color: var(--alfa-danger); font-size: .8125rem; font-weight: 500; } /* -------------------------------------------------------------------------- Options row -------------------------------------------------------------------------- */ .alfa-auth-options { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-block: 4px 22px; } .alfa-check { display: inline-flex; align-items: center; gap: 9px; margin: 0; color: var(--alfa-text-muted); font-size: .875rem; font-weight: 450; cursor: pointer; user-select: none; } .alfa-check input[type="checkbox"] { appearance: none; -webkit-appearance: none; flex: none; width: 18px; height: 18px; margin: 0; background: var(--alfa-surface); border: 1px solid var(--alfa-border-strong); border-radius: 5px; cursor: pointer; transition: background-color .15s ease, border-color .15s ease; } .alfa-check input[type="checkbox"]:checked { background-color: var(--alfa-accent); border-color: var(--alfa-accent); /* Tick drawn as a background image so it needs no extra element */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 14px; } .alfa-check input[type="checkbox"]:focus-visible { outline: 2px solid var(--alfa-accent); outline-offset: 2px; } .alfa-link { color: var(--alfa-accent); font-size: .875rem; font-weight: 550; } .alfa-link:hover { color: var(--alfa-accent); text-decoration: underline; } /* A link that has to be a