/* Admin auth pages: login, forgot password, reset password */
    :root{
        --primary:#003d7a;
        --secondary:#6ba539;
        --primary-light:#0056a8;
        --secondary-dark:#548629;
        --radius:18px;
    }

    *{margin:0;padding:0;box-sizing:border-box;}
    body{
        font-family:'Cairo',sans-serif;
        background:linear-gradient(135deg, #003d7a 0%, #0056a8 50%, #6ba539 100%);
        min-height:100vh;
        display:flex;
        align-items:center;
        justify-content:center;
        padding:20px;
    }

    /* Tenant logo watermark (behind the card) */
    .tenant-watermark{
        position:fixed;
        inset:0;
        z-index:5; /* above the card, below the lang switcher (10) */
        display:flex;
        align-items:center;
        justify-content:center;
        pointer-events:none;
        overflow:hidden;
    }
    .tenant-watermark img{
        width:min(80vw, 700px);
        height:min(80vh, 700px);
        object-fit:contain;
        opacity:.07;
        transform:rotate(-12deg);
        user-select:none;
    }
    /* Phones: let the logo fill the width so it isn't lost over the card. */
    @media(max-width:768px){
        .tenant-watermark img{
            width:110vw;
            height:70vh;
            opacity:.1;
        }
    }

    /* ---------------- MOBILE FIRST ---------------- */
    .login-container{
        position:relative;
        z-index:1;
        width:100%;
        max-width:380px;
        background:#fff;
        border-radius:var(--radius);
        padding:25px 22px;
        box-shadow:0 25px 60px rgba(0,0,0,.25);
        animation:fadeUp .6s ease-out;
    }

    @keyframes fadeUp{
        from{opacity:0;transform:translateY(40px);}
        to{opacity:1;transform:translateY(0);}
    }

    .logo-box{
        text-align:center;
        margin-bottom:25px;
    }

    .logo-box img{
        width:180px;
        height:180px;
        object-fit:contain;
        border-radius:12px;
        background:linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
        padding:20px;
        border:2px solid #e5e7eb;
        box-shadow:0 4px 12px rgba(0,0,0,.08);
    }

    .logo-box h2{
        margin-top:12px;
        font-size:20px;
        font-weight:800;
        color:#1f2937;
    }

    .header-title{
        text-align:center;
        margin-bottom:25px;
    }

    .header-title h3{
        font-size:20px;
        font-weight:700;
        margin-bottom:6px;
    }

    .header-title p{
        font-size:14px;
        color:#6b7280;
    }

    .form-group{
        margin-bottom:18px;
    }

    .input-wrapper{
        position:relative;
    }

    .input-wrapper i{
        position:absolute;
        top:50%;
        transform:translateY(-50%);
        font-size:18px;
        color:#9ca3af;
        pointer-events:none;
    }

    [dir="rtl"] .input-wrapper i{right:14px;}
    [dir="ltr"] .input-wrapper i{left:14px;}

    .form-control{
        padding:14px 15px;
        font-size:15px;
        border:2px solid #e5e7eb;
        border-radius:var(--radius);
        background:#fff;
        transition:.25s;
    }

    [dir="rtl"] .form-control{padding-right:45px;}
    [dir="ltr"] .form-control{padding-left:45px;}

    .form-control:focus{
        border-color:var(--primary);
        box-shadow:0 0 0 4px rgba(0,61,122,.18);
    }

    .btn-login{
        width:100%;
        padding:15px;
        background:linear-gradient(135deg, #003d7a 0%, #0056a8 50%, #6ba539 100%);
        border:none;
        border-radius:var(--radius);
        color:#fff;
        font-size:16px;
        font-weight:700;
        margin-top:5px;
        transition:.25s;
        cursor:pointer;
        box-shadow:0 8px 20px rgba(0,61,122,.35);
    }
    .btn-login:hover{
        transform:translateY(-3px);
        box-shadow:0 12px 30px rgba(0,61,122,.48);
        background:linear-gradient(135deg, #002952 0%, #003d7a 50%, #548629 100%);
    }

    .footer-text{
        text-align:center;
        margin-top:18px;
        font-size:12px;
        color:#6b7280;
    }
    .footer-text a{
        color:var(--primary);
        font-weight:600;
        text-decoration:none;
    }

    .alert-error{
        background:#fef2f2;
        border:1.5px solid #fca5a5;
        border-radius:12px;
        color:#b91c1c;
        padding:12px 16px;
        font-size:14px;
        font-weight:600;
        margin-bottom:18px;
        display:flex;
        align-items:center;
        gap:8px;
    }

    /* Language Switcher */
    .lang-switcher{
        position:absolute;
        top:20px;
        z-index:10;
        display:flex;
        gap:8px;
    }
    
    [dir="rtl"] .lang-switcher{left:20px;}
    [dir="ltr"] .lang-switcher{right:20px;}

    .lang-btn{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        width:45px;
        height:45px;
        background:rgba(255,255,255,.95);
        border:2px solid rgba(255,255,255,.3);
        border-radius:12px;
        color:#003d7a;
        font-weight:700;
        font-size:14px;
        text-decoration:none;
        transition:.25s;
        box-shadow:0 4px 12px rgba(0,0,0,.1);
    }

    .lang-btn:hover{
        background:#fff;
        transform:translateY(-2px);
        box-shadow:0 6px 20px rgba(0,0,0,.15);
        color:#6ba539;
    }

    .lang-btn.active{
        background:linear-gradient(135deg, #003d7a 0%, #6ba539 100%);
        color:#fff;
        border-color:transparent;
    }

    /* ---------------- DESKTOP MODE ---------------- */
    @media(min-width:850px){
        .login-container{
            display:flex;
            flex-direction:row;
            max-width:820px;
            padding:0;
            overflow:hidden;
        }

        .left-side{
            flex:1;
            padding:40px 30px;
            background:linear-gradient(135deg, #003d7a 0%, #0056a8 50%, #6ba539 100%);
            color:#fff;
            display:flex;
            flex-direction:column;
            justify-content:center;
        }

        .left-side h1{
            font-size:32px;
            font-weight:800;
            line-height:1.3;
            margin-bottom:14px;
        }

        .left-side p{
            font-size:16px;
            opacity:.95;
        }

        .right-side{
            flex:1;
            padding:40px 30px;
            background:#fff;
        }

        .logo-box{margin-bottom:10px;}
    }

/* Forgot / reset password */
.forgot-link {
    display: block;
    margin: -6px 0 14px;
    text-align: end;
    font-size: 14px;
    color: #003d7a;
    text-decoration: none;
}

.forgot-link:hover {
    text-decoration: underline;
}

.alert-success-auth {
    background: #ecfdf5;
    color: #047857;
    padding: 12px 14px;
    border-radius: 10px;
    margin-bottom: 16px;
    font-size: 14px;
}

.code-input {
    letter-spacing: 0.4em;
    text-align: center;
    direction: ltr;
}