/* login.css - Updated for RTL/LTR support */
@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300;14..32,400;14..32,500;14..32,600;14..32,700;14..32,800&display=swap');

/* =====================================================
   DESIGN TOKENS - DARK THEME ONLY
   ===================================================== */
:root {
    /* slate */
    --slate-50:#f8fafc; --slate-100:#f1f5f9; --slate-200:#e2e8f0;
    --slate-300:#cbd5e1; --slate-400:#94a3b8; --slate-500:#64748b;
    --slate-600:#475569; --slate-700:#334155; --slate-800:#1e293b;
    --slate-900:#0f172a;

    /* emerald / green / teal / cyan */
    --emerald-50:#ecfdf5; --emerald-100:#d1fae5; --emerald-300:#6ee7b7;
    --emerald-400:#34d399; --emerald-500:#10b981; --emerald-600:#059669;
    --emerald-700:#047857; --emerald-900:#064e3b;
    --green-100:#dcfce7; --green-600:#16a34a; --green-900:#14532d;
    --teal-50:#f0fdfa;   --teal-100:#ccfbf1;  --teal-400:#2dd4bf;
    --teal-600:#0d9488;  --teal-900:#134e4a;
    --cyan-100:#cffafe;  --cyan-900:#164e63;
    --amber-400:#fbbf24;
    --red-500:#ef4444;
    --orange-400:#fb923c;

    /* surface (dark theme defaults) */
    --bg:            var(--slate-900);
    --fg:            #f1f5f9;
    --card-bg:       rgba(15,23,42,0.85);
    --card-border:   rgba(51,65,85,0.60);
    --feature-bg:    rgba(30,41,59,0.60);
    --feature-border:rgba(51,65,85,0.50);
    --input-bg:      var(--slate-800);
    --input-border:  var(--slate-700);
    --input-focus-border: rgba(74,222,128,0.30);
    --input-focus-bg:     rgba(100,116,139,0.30);
    --input-text:    var(--emerald-500);
    --label:         var(--slate-300);
    --muted:         var(--slate-400);
    --muted-2:       var(--slate-300);
    --placeholder:   var(--slate-400);
    --badge-bg:      rgba(30,41,59,0.50);
    --grid-line:     rgba(255,255,255,0.03);
    --bg-grad:       linear-gradient(to bottom right, var(--slate-900), var(--slate-800), var(--slate-900));
    --glow:          radial-gradient(circle at 70% 30%, rgba(16,185,129,0.30) 0%, rgba(0,0,0,0) 70%);
}

/* =====================================================
   RESET / BASE
   ===================================================== */
*,*::before,*::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background: var(--bg);
    color: var(--fg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow: hidden;
    overflow-x: hidden;
}
button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
input { font-family: inherit; }

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.hidden { display: none !important; }

/* =====================================================
   BACKGROUND LAYERS
   ===================================================== */
.bg-layer { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.bg-gradient, .bg-grid, .bg-glow { position: absolute; inset: 0; }
.bg-gradient { background: var(--bg-grad); }
.bg-grid {
    background-image:
        linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
        linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
    background-size: 40px 40px;
}
.bg-glow { background: var(--glow); }

/* =====================================================
   PAGE LAYOUT
   ===================================================== */
.page {
    position: relative; z-index: 10;
    height: 100vh;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 1rem 1rem;
}
@media (min-width: 640px) { .page { padding: 1.5rem; } }
@media (min-width: 1024px){ .page { padding: 1.5rem 2rem; } }

.page-inner { width: 100%; max-width: 80rem; margin: 0 auto; max-height: 100%; }

.layout-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    align-items: center;
}
@media (min-width: 768px)  { .layout-grid { grid-template-columns: 1fr 1fr; gap: 1rem; } }
@media (min-width: 1024px) { .layout-grid { gap: 2.5rem; } }
@media (min-width: 1280px) { .layout-grid { gap: 4rem; } }

/* =====================================================
   BRANDING (LEFT) — hidden on mobile
   ===================================================== */
.branding { display: none; }
@media (min-width: 768px) {
    .branding {
        display: flex; flex-direction: column; align-items: flex-start;
        text-align: start; gap: 0.75rem;
    }
}
@media (min-width: 1024px) { .branding { gap: 1rem; } }

.brand-logo {
    width: 4rem; height: 4rem;
    border-radius: 0.75rem;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.10), 0 4px 6px -4px rgba(0,0,0,0.10);
}
@media (min-width: 768px) { .brand-logo { width: 5rem; height: 5rem; } }

.brand-headline { display: flex; flex-direction: column; gap: 0.25rem; }

.brand-title {
    font-size: 2.25rem; line-height: 1.25;
    font-weight: 800; font-style: italic;
    letter-spacing: -0.025em;
    margin: 0;
}
.brand-title-grad {
    background: linear-gradient(to right, var(--emerald-600), var(--green-600), var(--teal-600));
    -webkit-background-clip: text; background-clip: text; color: transparent;
    -webkit-text-fill-color: transparent;
}
.brand-title-sub {
    margin-inline-start: 0.5rem;
    font-size: 1.5rem; font-weight: 600; font-style: italic;
    color: #e2e8f0;
}

.brand-tagline {
    margin: 0;
    font-size: 0.875rem;
    color: #e2e8f0;
    max-width: 28rem;
}

/* feature grid */
.features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    width: 100%; max-width: 32rem;
}
.feature-card {
    background: var(--feature-bg);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    padding: 0.75rem;
    border-radius: 1rem;
    border: 1px solid var(--feature-border);
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
@media (min-width: 1024px) { .feature-card { padding: 1rem; } }

.feature-icon {
    width: 2.25rem; height: 2.25rem;
    border-radius: 0.75rem;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 0.5rem;
    font-size: 1rem;
}
.icon-emerald-green { background: linear-gradient(to bottom right, rgba(6,78,59,0.40), rgba(20,83,45,0.40)); color: var(--emerald-400); }
.icon-teal-cyan     { background: linear-gradient(to bottom right, rgba(19,78,74,0.40), rgba(22,78,99,0.40)); color: var(--teal-400); }
.icon-emerald-teal  { background: linear-gradient(to bottom right, rgba(6,78,59,0.40), rgba(19,78,74,0.40)); color: var(--emerald-400); }
.icon-green-emerald { background: linear-gradient(to bottom right, rgba(20,83,45,0.40), rgba(6,78,59,0.40)); color: #4ade80; }

.feature-title { margin: 0; font-size: 0.875rem; font-weight: 600; color: #fff; }
.feature-desc { margin: 0; font-size: 11px; color: var(--slate-300); }

/* trust */
.trust { display: flex; align-items: center; gap: 0.75rem; padding-top: 0.25rem; }
.avatars { display: flex; }
.avatars img {
    width: 2rem; height: 2rem; border-radius: 9999px;
    border: 2px solid var(--slate-800);
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    margin-inline-start: -0.5rem;
}
.avatars img:first-child { margin-inline-start: 0; }
.trust-text { font-size: 0.875rem; color: var(--slate-300); }
.trust-strong { font-weight: 600; color: #fff; }

/* =====================================================
   LOGIN SIDE (RIGHT)
   ===================================================== */
.login-side { display: flex; flex-direction: column; align-items: center; width: 100%; }
.login-wrap { width: 100%; max-width: 28rem; margin: 0 auto; }
@media (min-width: 768px) { .login-wrap { margin: 0; } }

/* mobile-only logo */
.mobile-logo { display: flex; justify-content: center; margin-bottom: 1.5rem; }
@media (min-width: 768px) { .mobile-logo { display: none; } }
.mobile-logo-rel { position: relative; }
.mobile-logo-blur {
    position: absolute; inset: 0;
    background: linear-gradient(to right, var(--emerald-600), var(--green-600));
    border-radius: 1rem; filter: blur(32px); opacity: 0.40;
}
.mobile-logo-frame {
    position: relative; padding: 0.75rem;
    background: rgba(255,255,255,0.05);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border-radius: 1rem;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
    border: 1px solid rgba(255,255,255,0.10);
}
.mobile-logo-inner {
    width: 3.5rem; height: 3.5rem;
    background: linear-gradient(to bottom right, var(--emerald-600), var(--green-600), var(--teal-600));
    border-radius: 0.75rem;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.10);
}
.mobile-logo-inner i { color: #fff; font-size: 1.5rem; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.3)); }

/* card */
.login-card {
    background: var(--card-bg);
    backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    border-radius: 1.5rem;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
    padding: 1.25rem;
    border: 1px solid var(--card-border);
    transition: transform 0.25s ease, box-shadow 0.3s ease;
}
@media (min-width: 640px) { .login-card { padding: 1.5rem; } }
.login-card:hover { transform: translateY(-3px); box-shadow: 0 25px 40px -12px rgba(0,0,0,0.20); }

.card-header { text-align: center; margin-bottom: 1rem; }
.card-header-pill {
    display: inline-flex; padding: 0.5rem;
    background: linear-gradient(to right, rgba(6,78,59,0.30), rgba(20,83,45,0.30));
    border-radius: 1rem; margin-bottom: 0.75rem;
}
.card-header-icon {
    width: 2.5rem; height: 2.5rem;
    background: linear-gradient(to bottom right, var(--emerald-600), var(--green-600));
    border-radius: 0.75rem;
    display: flex; align-items: center; justify-content: center;
}
.card-header-icon i { color: #fff; font-size: 0.875rem; }
.card-title {
    margin: 0; font-size: 1.5rem; font-weight: 700;
    color: #fff;
}
@media (min-width: 640px) { .card-title { font-size: 1.875rem; } }
.card-subtitle {
    margin: 0.25rem 0 0; font-size: 0.875rem; color: var(--slate-400);
}

/* form */
.login-form { display: flex; flex-direction: column; gap: 1rem; margin: 0; }
.field-pb { padding-bottom: 0.5rem; }
.field-pt { padding-top: 0.5rem; }
.field-label {
    display: block; font-size: 0.875rem; font-weight: 600;
    color: var(--label); margin-bottom: 0.375rem;
}
.field-control { position: relative; }
.field-icon {
    position: absolute; top: 0; bottom: 0; inset-inline-start: 0;
    padding-inline-start: 0.875rem;
    display: flex; align-items: center;
    pointer-events: none;
}
.field-icon i { color: var(--slate-400); font-size: 0.875rem; }
.field-input {
    width: 100%; font-size: 0.875rem;
    padding-block: 0.75rem;
    padding-inline: 2.5rem 1rem;
    background: var(--input-bg);
    border: 2px solid var(--input-border);
    border-radius: 0.75rem;
    color: var(--input-text);
    transition: border-color 0.2s ease, background-color 0.2s ease;
    outline: none;
}
.field-input::placeholder { color: var(--placeholder); }
.field-input:focus {
    border-color: var(--input-focus-border);
    background: var(--input-focus-bg);
}
.field-input-pe { padding-inline-end: 3rem; }
.field-toggle {
    position: absolute; top: 0; bottom: 0; inset-inline-end: 0;
    padding-inline-end: 0.75rem;
    display: flex; align-items: center;
    background: none;
}
.field-toggle:focus { outline: none; }
.field-toggle i { color: var(--slate-400); font-size: 0.875rem; cursor: pointer; }
.field-toggle i:hover { color: var(--emerald-400); }

/* error text injected by JS */
.error-text {
    display: block; position: absolute;
    color: var(--red-500); font-size: 0.75rem; margin-top: 0.25rem;
}

/* forgot */
.forgot-row { display: flex; align-items: center; justify-content: flex-end; }
.forgot-link {
    font-size: 0.875rem; font-weight: 500;
    color: var(--emerald-400);
}
.forgot-link:hover { color: var(--emerald-300); }

/* submit */
.submit-wrap { position: relative; }
.submit-btn {
    display: block; width: 100%;
    background: linear-gradient(to right, var(--emerald-600), var(--emerald-700));
    color: #fff;
    padding: 0.875rem 1rem;
    border-radius: 0.75rem;
    font-weight: 700; font-size: 1rem;
    text-align: center;
}
.submit-state { background: linear-gradient(to right, var(--slate-700), var(--slate-700)); }
@media (min-width: 640px) { .submit-btn { font-size: 1.125rem; } }
.submit-btn i { margin-inline-end: 0.5rem; }

[dir="rtl"] .submit-btn i {
    transform: scaleX(-1);
    display: inline-block;   /* required for transform to work on inline elements */
}

/* security badge */
.security-badge {
    margin-top: 1rem;
    display: flex; flex-wrap: wrap;
    align-items: center; justify-content: center;
    gap: 0.5rem;
    font-size: 0.75rem; color: var(--slate-400);
    background: var(--badge-bg);
    padding: 0.5rem 1rem;
    border-radius: 9999px;
}
.security-badge i { color: var(--emerald-500); font-size: 0.75rem; }

/* =====================================================
   TOAST
   ===================================================== */
.toast-container {
    position: fixed; top: 1.25rem; inset-inline-end: 1.25rem; z-index: 50;
    display: flex; flex-direction: column; gap: 0.75rem;
}
.toast {
    width: 20rem;
    border-radius: 4px;
    border-inline-start: 4px solid transparent;
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.10), 0 8px 10px -6px rgba(0,0,0,0.10);
    overflow: hidden;
    background: var(--slate-800);
    color: #f1f5f9;
    transform: translateX(100%);
    opacity: 0;
    transition: transform 0.4s ease-out, opacity 0.4s ease-out;
}
.toast.is-visible { transform: translateX(0); opacity: 1; }
.toast-body {
    display: flex; align-items: flex-start; gap: 0.75rem;
    padding: 0.75rem 1rem; cursor: pointer;
}
.toast-icon {
    font-size: 1.125rem; line-height: 1.25rem;
    flex-shrink: 0; margin-top: 2px;
}
.toast-icon.t-success { color: var(--emerald-500); }
.toast-icon.t-error   { color: var(--red-500); }
.toast-icon.t-warning { color: var(--orange-400); }
.toast-icon.t-info    { color: var(--slate-500); }
.toast-msg {
    flex: 1; font-size: 0.875rem; line-height: 1.5;
    word-break: break-word;
}
.toast-progress { width: 100%; height: 2px; background: var(--slate-700); }
.toast-progress-bar { height: 100%; background: var(--slate-600); width: 100%; }

/* =====================================================
   RESPONSIVE TUNING
   ===================================================== */
@media (max-width: 767px) {
    body { overflow-y: auto; }
    .page { height: auto; min-height: 100vh; padding: 1.5rem 1rem; }
}
@media (max-width: 380px) {
    .toast { width: calc(100vw - 2.5rem); }
}

/* =====================================================
   RTL SPECIFIC OVERRIDES
   ===================================================== */
html[dir="rtl"] .toast {
    transform: translateX(-100%);
}
html[dir="rtl"] .toast.is-visible {
    transform: translateX(0);
}