/** * TAMS auth pages (login, register, password reset) — dark theme. * Scoped to .app-auth on . */ .app-auth { --au-font: "Inter", "Noto Sans Arabic", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --au-radius-sm: 8px; --au-radius: 12px; --au-radius-lg: 16px; --au-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.32), 0 2px 6px rgba(0, 0, 0, 0.2); --au-shadow-md: 0 4px 14px rgba(0, 0, 0, 0.38), 0 14px 36px rgba(0, 0, 0, 0.3); --au-shadow-lg: 0 8px 22px rgba(0, 0, 0, 0.42), 0 22px 50px rgba(0, 0, 0, 0.35); --au-border-color: rgba(148, 163, 184, 0.18); --au-border: 1px solid var(--au-border-color); --au-input-border-color: rgba(203, 213, 225, 0.38); --au-input-border: 1px solid var(--au-input-border-color); --au-input-bg: rgba(15, 23, 42, 0.52); --au-panel-bg: rgba(6, 10, 18, 0.58); --au-bg: #0a0e14; --au-bg-top: #0c1222; --au-bg-bottom: #111827; --au-surface: #1e293b; --au-surface-muted: #273449; --au-text: #f1f5f9; --au-muted: #94a3b8; --au-text-secondary: #cbd5e1; --au-accent: #60a5fa; --au-accent-bright: #3b82f6; --au-accent-hover: #93c5fd; --au-accent-soft: rgba(59, 130, 246, 0.18); --au-accent-glow: rgba(59, 130, 246, 0.28); --au-danger: #f87171; --au-success: #34d399; --au-success-soft: rgba(52, 211, 153, 0.16); font-family: var(--au-font); color: var(--au-text); background: var(--au-bg); min-height: 100vh; -webkit-font-smoothing: antialiased; } /* Full-viewport background with forms overlaid on the inline-start (left in LTR) */ .app-auth .au-auth-layout { position: relative; min-height: 100vh; isolation: isolate; } .app-auth .au-auth-layout__visual { position: fixed; inset: 0; z-index: 0; background-color: var(--au-bg); background-image: url("../images/auth-bg.png"); background-repeat: no-repeat; background-position: center center; background-size: cover; pointer-events: none; } .app-auth .au-auth-layout__main { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; align-items: stretch; min-height: 100vh; width: clamp(16rem, 22vw, 22rem); max-width: 100%; margin-inline-end: auto; padding: max(1.75rem, env(safe-area-inset-top, 0px)) max(1.75rem, env(safe-area-inset-right, 0px)) max(1.75rem, env(safe-area-inset-bottom, 0px)) max(1.75rem, env(safe-area-inset-left, 0px)); background: var(--au-panel-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-inline-end: 1px solid rgba(148, 163, 184, 0.14); box-shadow: 8px 0 32px rgba(0, 0, 0, 0.28); } html[dir="rtl"] .app-auth .au-auth-layout__main { margin-inline-end: 0; margin-inline-start: auto; border-inline-end: none; border-inline-start: 1px solid rgba(148, 163, 184, 0.14); box-shadow: -8px 0 32px rgba(0, 0, 0, 0.28); } .app-auth .au-auth-page { width: 100%; max-width: 20rem; } @media (max-width: 575.98px) { .app-auth .au-auth-layout__main { width: 100%; background: color-mix(in srgb, var(--au-panel-bg) 92%, var(--au-bg)); border-inline: none; box-shadow: none; } } .app-auth .authentication-bg { background: transparent !important; background-image: none !important; } .app-auth .authentication-bg>.bg-overlay { display: none; } .app-auth .text-muted { color: var(--au-text-secondary) !important; } .app-auth .text-primary { color: var(--au-accent) !important; } .app-auth .text-danger { color: var(--au-danger) !important; } .app-auth h1, .app-auth h2, .app-auth h3, .app-auth h4, .app-auth h5, .app-auth h6, .app-auth p, .app-auth label, .app-auth .form-label, .app-auth .form-check-label { color: var(--au-text); } .app-auth .card, .app-auth .au-auth-panel { background: transparent; border: none; border-radius: 0; box-shadow: none; color: var(--au-text); } .app-auth .card-body, .app-auth .au-auth-panel__body { padding: 0; color: var(--au-text); } .app-auth .form-label { font-size: 0.9375rem; font-weight: 500; letter-spacing: 0.01em; margin-bottom: 0.45rem; color: var(--au-text); } .app-auth .form-control { background-color: var(--au-input-bg); border: var(--au-input-border); color: var(--au-text); border-radius: 6px; min-height: 2.75rem; padding: 0.6rem 0.85rem; font-size: 0.9375rem; transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease; } .app-auth .au-auth-field .form-control, .app-auth .au-auth-pass-field .form-control { padding-inline-start: 2.5rem !important; } .app-auth .form-control::placeholder { color: var(--au-muted); opacity: 1; } .app-auth .form-control:focus { background-color: var(--au-input-bg); border-color: var(--au-accent-bright); color: var(--au-text); box-shadow: 0 0 0 3px var(--au-accent-soft); } .app-auth .form-control.is-invalid { border-color: var(--au-danger); } .app-auth .invalid-feedback { color: var(--au-danger); } .app-auth .form-check-input { background-color: var(--au-input-bg); border-color: var(--au-input-border-color); } .app-auth .form-check-input:checked { background-color: var(--au-accent-bright); border-color: var(--au-accent-bright); } .app-auth .form-check-input:focus { box-shadow: 0 0 0 3px var(--au-accent-soft); } .app-auth .btn-primary { border: 1px solid rgba(147, 197, 253, 0.35); font-weight: 600; border-radius: 6px; min-height: 2.75rem; background: linear-gradient(180deg, rgba(59, 130, 246, 0.95) 0%, rgba(37, 99, 235, 0.92) 100%); box-shadow: var(--au-shadow-sm), 0 4px 18px var(--au-accent-glow); transition: filter 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease; } .app-auth .btn-primary:hover, .app-auth .btn-primary:focus { filter: brightness(1.06); background: linear-gradient(180deg, var(--au-accent-bright) 0%, var(--au-accent) 100%); box-shadow: var(--au-shadow-md), 0 8px 24px var(--au-accent-glow); } .app-auth .btn-link { color: var(--au-accent); } .app-auth .btn-link:hover { color: var(--au-accent-hover); } .app-auth .au-auth-brand { display: flex; justify-content: flex-start; width: 100%; margin-bottom: 1.5rem; text-align: start; } .app-auth .au-auth-brand__link { display: flex; justify-content: flex-start; width: 100%; text-decoration: none; color: inherit; } .app-auth .au-auth-brand__link:hover .au-page-head__heading { color: var(--au-accent-hover); } .app-auth .au-auth-brand .au-page-head__brand { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 0.85rem; margin: 0; min-width: 0; max-width: 100%; text-align: start; } .app-auth .au-auth-brand .au-page-head__logo { width: 70px; height: 55px; object-fit: contain; flex-shrink: 0; } .app-auth .au-auth-brand .au-page-head__title-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 0.2rem; min-width: 0; max-width: 100%; text-align: start; } .app-auth .au-auth-brand .au-page-head__heading { margin: 0; font-size: clamp(1.05rem, 2.5vw, 1.25rem); font-weight: 700; line-height: 1.25; letter-spacing: -0.02em; color: var(--au-text); text-align: start; } .app-auth .au-auth-brand .au-page-head__heading--tagline { font-size: clamp(0.85rem, 2vw, 1rem); font-weight: 500; color: var(--au-muted); text-align: start; } .app-auth .au-auth-otp-input.form-control { padding-inline: 0.85rem !important; text-align: center; letter-spacing: 0.35em; font-variant-numeric: tabular-nums; } /* Icon inputs (email, name, password) */ .app-auth .au-auth-field, .app-auth .au-auth-pass-field { position: relative; display: block; } .app-auth .au-auth-field .form-control, .app-auth .au-auth-pass-field .form-control { width: 100%; } .app-auth .au-auth-pass-field .form-control { padding-inline-end: 2.75rem !important; } .app-auth .au-auth-field__icon, .app-auth .au-auth-pass-icon { position: absolute; inset-inline-start: 0; top: 0; bottom: 0; z-index: 2; width: 2.5rem; display: flex; align-items: center; justify-content: center; font-size: 1.05rem; color: rgba(241, 245, 249, 0.88); pointer-events: none; } .app-auth .au-auth-pass-toggle { position: absolute; inset-inline-end: 0; top: 0; bottom: 0; z-index: 3; width: 2.75rem; margin: 0; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: none; background: transparent; color: var(--au-muted); line-height: 1; cursor: pointer; text-decoration: none; box-shadow: none; } .app-auth .au-auth-pass-toggle:hover, .app-auth .au-auth-pass-toggle:focus { color: var(--au-accent); background: transparent; box-shadow: none; } .app-auth .au-auth-pass-toggle i { font-size: 1.125rem; line-height: 1; } html[dir="ltr"] .app-auth .au-auth-pass-field .form-control { direction: ltr; text-align: start; } html[dir="rtl"] .app-auth .au-auth-pass-field .form-control { direction: ltr; text-align: end; } .app-auth .bg-light { background-color: var(--au-surface-muted) !important; color: var(--au-text); border-color: var(--au-border-color) !important; } .app-auth .au-auth-support { background: rgba(30, 41, 59, 0.45); border: var(--au-border); border-radius: var(--au-radius); color: var(--au-text); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .app-auth textarea.form-control { min-height: 5.5rem; resize: vertical; } .app-auth .au-auth-support h6 { color: var(--au-accent); font-weight: 600; } .app-auth .au-auth-support p { color: var(--au-text-secondary); margin-bottom: 0.35rem; } .app-auth .au-auth-support strong { color: var(--au-text); font-weight: 600; } .app-auth .au-auth-support .text-muted { color: var(--au-muted) !important; } .app-auth a { color: var(--au-accent); } .app-auth a:hover { color: var(--au-accent-hover); } /* Language switcher — auth pages */ .app-auth .au-lang-switcher--auth { position: fixed; top: max(0.75rem, env(safe-area-inset-top, 0px)); inset-inline-end: max(0.75rem, env(safe-area-inset-right, 0px)); z-index: 1050; max-width: calc(100vw - 1.5rem); } .app-auth .au-auth-lang-toggle { display: inline-flex; align-items: center; gap: 0.45rem; max-width: min(14rem, calc(100vw - 1.5rem)); padding: 0.45rem 0.7rem; font-size: 0.8125rem; font-weight: 600; line-height: 1.2; color: var(--au-text-secondary); background: var(--au-surface); border: var(--au-border); border-radius: 999px; box-shadow: var(--au-shadow-md); cursor: pointer; transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; } .app-auth .au-auth-lang-toggle:hover, .app-auth .au-auth-lang-toggle:focus, .app-auth .au-auth-lang-toggle.show { color: var(--au-text); background: var(--au-surface-muted); box-shadow: var(--au-shadow-lg); } .app-auth .au-auth-lang-toggle__flag { border-radius: 2px; object-fit: cover; flex-shrink: 0; } .app-auth .au-auth-lang-toggle__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .app-auth .au-auth-lang-toggle__chevron { flex-shrink: 0; font-size: 1.125rem; line-height: 1; opacity: 0.75; } .app-auth .au-lang-switcher--auth .dropdown-menu { --bs-dropdown-bg: var(--au-surface); --bs-dropdown-border-color: var(--au-border-color); --bs-dropdown-link-color: var(--au-text); --bs-dropdown-link-hover-color: var(--au-text); --bs-dropdown-link-hover-bg: var(--au-accent-soft); --bs-dropdown-link-active-color: var(--au-text); --bs-dropdown-link-active-bg: var(--au-accent-soft); min-width: min(18rem, calc(100vw - 2rem)); max-width: min(20rem, calc(100vw - 2rem)); border: var(--au-border); border-radius: var(--au-radius); box-shadow: var(--au-shadow-lg); background: var(--au-surface); padding: 0; overflow: hidden; } .app-auth .au-lang-switcher__menu { margin-top: 0.35rem; } .app-auth .au-lang-switcher__search-wrap { position: sticky; top: 0; z-index: 1; background: var(--au-surface); border-color: var(--au-border-color) !important; } .app-auth .au-lang-switcher__list { max-height: min(18rem, 50vh); overflow-y: auto; -webkit-overflow-scrolling: touch; } .app-auth .au-lang-switcher__list--modal { max-height: none; } .app-auth .au-lang-switcher__item { display: flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.85rem; font-size: 0.875rem; font-weight: 500; color: var(--au-text); text-decoration: none; transition: background 0.15s ease; } .app-auth .au-lang-switcher__item:hover, .app-auth .au-lang-switcher__item:focus, .app-auth .au-lang-switcher__item.active { background: var(--au-accent-soft); color: var(--au-text); } .app-auth .au-lang-switcher__flag { border-radius: 2px; object-fit: cover; flex-shrink: 0; } .app-auth .au-lang-switcher__empty { color: var(--au-muted) !important; } /* Modal must sit above backdrop and fixed language toggle */ body.app-auth .au-lang-switcher__modal { --bs-modal-zindex: 1060; z-index: 1060; } body.app-auth.modal-open .au-lang-switcher--auth { z-index: 1040; } body.app-auth .modal-backdrop { --bs-backdrop-zindex: 1055; z-index: 1055; } .app-auth .au-lang-switcher__modal .modal-dialog { margin: 0.75rem; max-width: min(24rem, calc(100vw - 1.5rem)); } @media (min-width: 576px) { .app-auth .au-lang-switcher__list--modal { max-height: min(22rem, 55vh); overflow-y: auto; -webkit-overflow-scrolling: touch; } } .app-auth .au-lang-switcher__modal-content { background: var(--au-surface); border: var(--au-border); color: var(--au-text); } .app-auth .au-lang-switcher__modal-header { border-bottom: var(--au-border); background: var(--au-surface); color: var(--au-text); } .app-auth .au-lang-switcher__modal-header .modal-title { color: var(--au-text); font-weight: 600; } .app-auth .au-lang-switcher__modal-header .btn-close { filter: invert(1) grayscale(100%) brightness(200%); opacity: 0.7; } .app-auth .au-lang-switcher__modal-body { background: var(--au-surface); } html[dir="rtl"] .app-auth .form-control[type="email"], html[dir="rtl"] .app-auth .form-control[type="password"], html[dir="rtl"] .app-auth .form-control[type="text"]:not(.au-lang-switcher__search) { direction: ltr; text-align: start; } .app-auth .au-auth-card-heading { margin: 0 0 0.25rem; font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; color: var(--au-text); } .app-auth .au-auth-page .text-center.mt-2 { text-align: start !important; margin-top: 0 !important; } .app-auth .au-auth-form-block { margin-top: 1.5rem; } .app-auth .alert-success { background: color-mix(in srgb, var(--au-success) 18%, var(--au-surface)); border: 1px solid color-mix(in srgb, var(--au-success) 45%, transparent); border-radius: var(--au-radius); color: var(--au-text); } .app-auth .au-auth-notice { display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 1rem; padding: 1rem 1.1rem; border-radius: var(--au-radius); font-size: 0.9375rem; font-weight: 500; line-height: 1.5; text-align: start; } .app-auth .au-auth-notice__icon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; margin-top: 0.1rem; border-radius: 50%; font-size: 1.1rem; } .app-auth .au-auth-notice__text { flex: 1; min-width: 0; color: var(--au-text); } .app-auth .au-auth-notice--success { background: linear-gradient(135deg, color-mix(in srgb, var(--au-success) 22%, var(--au-surface)) 0%, color-mix(in srgb, var(--au-success) 12%, var(--au-surface-muted)) 100%); border: 1px solid color-mix(in srgb, var(--au-success) 50%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--au-success) 12%, transparent), var(--au-shadow-sm); } .app-auth .au-auth-notice--success .au-auth-notice__icon { color: var(--au-success); background: var(--au-success-soft); } .app-auth .form-text { color: var(--au-text-secondary); } /* ——— RTL / logical layout (Bootstrap LTR build + theme auth inputs) ——— */ html[dir="rtl"] .app-auth { direction: rtl; text-align: start; } html[dir="ltr"] .app-auth { direction: ltr; text-align: start; } .app-auth .au-auth-forgot-wrap { float: inline-end; margin-bottom: 0.35rem; } .app-auth .form-check { padding-inline-start: 1.75em; padding-inline-end: 0; } .app-auth .form-check .form-check-input { float: inline-start; margin-inline-start: -1.75em; margin-inline-end: 0; } .app-auth .invalid-feedback { text-align: start; } html[dir="rtl"] .app-auth input[type="email"], html[dir="rtl"] .app-auth input[type="text"], html[dir="rtl"] .app-auth textarea { direction: ltr; text-align: end; } html[dir="rtl"] .app-auth .form-check-input { float: inline-start; } html[dir="rtl"] .app-auth .text-start { text-align: start !important; } html[dir="rtl"] .app-auth .float-end { float: inline-end !important; }