/* =============================================================
   SHOPREME LOGIN PAGE — ERPNext v15 / Frappe Website
   Migrated from Website Theme > Stylesheet to app CSS file
   File: shopreme_theme/public/css/shopreme_login.css
   Hook: web_include_css in hooks.py
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&display=swap');

/* ── Page layout — split screen ──────────────────────────── */
div#page-login[data-path="login"],
body[data-path="/login"] {
    display: flex !important;
    flex-direction: row !important;
    height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    position: relative !important;
    font-family: 'Lato', -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif !important;
}

div#page-login[data-path="login"] *,
body[data-path="login"] * {
    font-family: 'Lato', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

/* RTL support */
[dir="rtl"] div#page-login[data-path="login"] {
    flex-direction: row-reverse !important;
}

/* ── Right side visual panel (pseudo-element) ─────────────── */
div#page-login[data-path="login"]::before {
    content: "" !important;
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    width: 50% !important;
    height: 100vh !important;
    background-color: #549cdc !important;
    background-image: url('/assets/shopreme_theme/images/channels-01.svg') !important;
    background-size: contain !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    z-index: 0 !important;
}

[dir="rtl"] div#page-login[data-path="login"]::before {
    right: auto !important;
    left: 0 !important;
}

/* ── Left side content wrapper ────────────────────────────── */
div#page-login[data-path="login"] .page-content-wrapper,
div#page-login[data-path="login"] main.container.my-4,
div#page-login[data-path="login"] .page_content {
    flex: 0 0 50% !important;
    width: 50% !important;
    max-width: 50% !important;
    background-color: #f5f5f5 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 !important;
    position: relative !important;
    z-index: 1 !important;
    min-height: 100vh !important;
    margin: 0 !important;
}

[dir="rtl"] div#page-login[data-path="login"] .page-content-wrapper,
[dir="rtl"] div#page-login[data-path="login"] main.container.my-4,
[dir="rtl"] div#page-login[data-path="login"] .page_content {
    flex: 0 0 50% !important;
    width: 50% !important;
}

/* ── Page card head — overlaps card top ───────────────────── */
div#page-login[data-path="login"] .page-card-head {
    width: 596.57px !important;
    max-width: 596.57px !important;
    margin: 0 auto -3.5rem auto !important;
    padding: 0 2rem !important;
    position: relative !important;
    z-index: 10 !important;
    text-align: left !important;
    pointer-events: none;
}

div#page-login[data-path="login"] .page-card-head h4 {
    pointer-events: auto;
    color: #1a1a1a !important;
    margin-top: 0.5rem !important;
    margin-bottom: 0 !important;
}

/* ── Login card ───────────────────────────────────────────── */
div#page-login[data-path="login"] .login-content.page-card,
div#page-login[data-path="login"] section.for-login .page-card {
    background: #ffffff !important;
    border-radius: 12px !important;
    padding: 3.5rem 2rem 1.5rem 2rem !important;
    width: 596.57px !important;
    max-width: 596.57px !important;
    min-height: 430.55px !important;
    height: auto !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
    border: none !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    margin: auto !important;
}

/* ── Headings ─────────────────────────────────────────────── */
div#page-login[data-path="login"] .page-card-head h1,
div#page-login[data-path="login"] .page-card-head h2,
div#page-login[data-path="login"] h1,
div#page-login[data-path="login"] h2,
div#page-login[data-path="login"] h4 {
    font-family: 'Lato', sans-serif !important;
    font-size: 1.75rem !important;
    font-weight: 600 !important;
    color: #1a1a1a !important;
    margin-bottom: 0.5rem !important;
    margin-top: 0 !important;
    text-align: start !important;
    line-height: 1.3 !important;
}

div#page-login[data-path="login"] .page-card-head .subtitle,
div#page-login[data-path="login"] .subtitle {
    font-family: 'Lato', sans-serif !important;
    color: #1a1a1a !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    margin-bottom: 2rem !important;
    text-align: start !important;
}

/* ── Logo — hardcoded top left corner ────────────────────── */
div#page-login[data-path="login"] .app-logo,
div#page-login[data-path="login"] .page-card-head .text-center,
div#page-login[data-path="login"] .page-card-head > a,
div#page-login[data-path="login"] .page-card-head img {
    position: fixed !important;
    top: 2rem !important;
    left: 2rem !important;
    z-index: 100 !important;
    margin: 0 !important;
}

div#page-login[data-path="login"] .page-card-head .text-center {
    position: fixed !important;
    text-align: left !important;
}

/* Logo rendered correctly by Frappe from Website Settings — no CSS override needed */

/* ── Labels ───────────────────────────────────────────────── */
div#page-login[data-path="login"] label {
    font-family: 'Lato', sans-serif !important;
    color: #000000 !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    margin-bottom: 0.5rem !important;
    display: block !important;
    text-align: start !important;
    width: 100% !important;
}

div#page-login[data-path="login"] .form-label.sr-only,
div#page-login[data-path="login"] label.sr-only {
    position: relative !important;
    width: auto !important;
    height: auto !important;
    margin-bottom: 0.5rem !important;
    clip: auto !important;
    clip-path: none !important;
    overflow: visible !important;
    display: block !important;
    font-family: 'Lato', sans-serif !important;
    color: #000000 !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    text-align: start !important;
}

/* Replace "Email" label with "Username" */
div#page-login[data-path="login"] label[for="login_email"] {
    visibility: hidden !important;
    position: relative !important;
}
div#page-login[data-path="login"] label[for="login_email"]::after {
    content: "Username" !important;
    visibility: visible !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    font-family: 'Lato', sans-serif !important;
    color: #000000 !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    display: block !important;
}
[dir="rtl"] div#page-login[data-path="login"] label[for="login_email"]::after {
    left: auto !important;
    right: 0 !important;
}

/* ── Input fields ─────────────────────────────────────────── */
div#page-login[data-path="login"] .form-control,
div#page-login[data-path="login"] input[type="email"],
div#page-login[data-path="login"] input[type="password"],
div#page-login[data-path="login"] input[type="text"],
div#page-login[data-path="login"] .form-group input,
div#page-login[data-path="login"] .form-group .form-control {
    font-family: 'Lato', sans-serif !important;
    background-color: #f8f9fa !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 6px !important;
    width: 532.57px !important;
    max-width: 532.57px !important;
    height: 43.71px !important;
    padding: 0 1.125rem !important;
    font-size: 0.95rem !important;
    margin-bottom: 1.5rem !important;
    margin-top: 0.5rem !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease !important;
    display: block !important;
    color: #333333 !important;
}

div#page-login[data-path="login"] .input-group {
    display: flex !important;
    align-items: stretch !important;
    width: 532.57px !important;
    max-width: 532.57px !important;
    height: 43.71px !important;
}

div#page-login[data-path="login"] .input-group-text {
    background-color: #f8f9fa !important;
    border: 1px solid #e0e0e0 !important;
    border-right: none !important;
    padding: 0.875rem 1rem !important;
    display: flex !important;
    align-items: center !important;
}

div#page-login[data-path="login"] .input-group input {
    border-left: none !important;
    padding-left: 0.75rem !important;
}

div#page-login[data-path="login"] input::placeholder {
    padding-left: 0 !important;
    margin-left: 0 !important;
    color: #9ca3af !important;
}

div#page-login[data-path="login"] .form-control:focus,
div#page-login[data-path="login"] input:focus {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12) !important;
    outline: none !important;
    background-color: #ffffff !important;
}

div#page-login[data-path="login"] .input-group:focus-within .input-group-text {
    border-color: #2563eb !important;
    background-color: #ffffff !important;
}

/* Icon alignment inside fields */
div#page-login[data-path="login"] .email-field,
div#page-login[data-path="login"] .password-field {
    position: relative !important;
}
div#page-login[data-path="login"] .field-icon {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    left: 1rem !important;
    width: 16px !important;
    height: 16px !important;
    z-index: 10 !important;
}
div#page-login[data-path="login"] #login_email,
div#page-login[data-path="login"] #login_password,
div#page-login[data-path="login"] #forgot_email {
    padding-left: 3rem !important;
}
[dir="rtl"] div#page-login[data-path="login"] .field-icon {
    left: auto !important;
    right: 1rem !important;
}
[dir="rtl"] div#page-login[data-path="login"] #login_email,
[dir="rtl"] div#page-login[data-path="login"] #login_password,
[dir="rtl"] div#page-login[data-path="login"] #forgot_email {
    padding-left: 1.125rem !important;
    padding-right: 3rem !important;
}

/* ── Form groups ──────────────────────────────────────────── */
div#page-login[data-path="login"] .form-group {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-bottom: 1rem !important;
}
div#page-login[data-path="login"] .login-content.page-card > *,
div#page-login[data-path="login"] section.for-login .page-card > * {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* ── Forgot password link ─────────────────────────────────── */
div#page-login[data-path="login"] a[href*="forgot"],
div#page-login[data-path="login"] .forgot-password {
    font-family: 'Lato', sans-serif !important;
    color: #1a1a1a !important;
    font-size: 0.95rem !important;
    text-decoration: underline !important;
    text-align: right !important;
    display: block !important;
    margin-bottom: 1.5rem !important;
    margin-top: -0.75rem !important;
    transition: color 0.2s ease !important;
    width: 100% !important;
}
[dir="rtl"] div#page-login[data-path="login"] a[href*="forgot"],
[dir="rtl"] div#page-login[data-path="login"] .forgot-password {
    text-align: left !important;
}
div#page-login[data-path="login"] a[href*="forgot"]:hover,
div#page-login[data-path="login"] .forgot-password:hover {
    color: #049c0c !important;
}

/* ── Login button ─────────────────────────────────────────── */
div#page-login[data-path="login"] .btn-primary,
div#page-login[data-path="login"] button[type="submit"],
div#page-login[data-path="login"] .btn-login {
    font-family: 'Lato', sans-serif !important;
    background-color: #049c0c !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 1rem 1.5rem !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-bottom: 0 !important;
    margin-top: 0.5rem !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    display: block !important;
}
div#page-login[data-path="login"] .btn-primary:hover,
div#page-login[data-path="login"] button[type="submit"]:hover {
    background-color: #037a09 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 16px rgba(4, 156, 12, 0.3) !important;
}


/* ── Logo — hardcoded from public/images/ ────────────────── */
body[data-path="login"]::after {
    content: "" !important;
    display: block !important;
    position: fixed !important;
    top: 1.5rem !important;
    left: 2rem !important;
    width: 180px !important;
    height: 52px !important;
    background-image: url('/assets/shopreme_theme/images/shopreme-logo.png') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: left center !important;
    z-index: 1000 !important;
    pointer-events: none !important;
}

/* ── Hide unnecessary elements ────────────────────────────── */
div#page-login[data-path="login"] .separator,
div#page-login[data-path="login"] .divider,
div#page-login[data-path="login"] section.for-login-with-email-link,
div#page-login[data-path="login"] .btn-secondary[data-label*="Email"],
div#page-login[data-path="login"] .btn-outline,
div#page-login[data-path="login"] a[href*="email-link"],
div#page-login[data-path="login"] button[data-label*="Email Link"],
div#page-login[data-path="login"] .text-muted {
    display: none !important;
    visibility: hidden !important;
}

/* ── Hide navbar on login page ────────────────────────────── */
body[data-path="login"] nav.navbar,
body[data-path="login"] .navbar.navbar-light,
body[data-path="login"] .navbar.navbar-expand-lg,
body[data-path="login"] nav.navbar-light.navbar-expand-lg,
div#page-login nav.navbar,
div#page-login[data-path="login"] nav,
div#page-login[data-path="login"] header,
body[data-path="login"] header,
body[data-path="login"] .container > nav,
nav.navbar.navbar-light.navbar-expand-lg {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    top: -9999px !important;
}

/* ── Forgot password section ──────────────────────────────── */
div#page-login[data-path="login"] section.for-forgot .page-card-head h4 {
    visibility: visible !important;
    font-size: 0 !important;
    line-height: 0 !important;
    margin-bottom: 0 !important;
    position: relative !important;
}
div#page-login[data-path="login"] section.for-forgot .page-card-head h4::after {
    content: "Reset your Shopreme password" !important;
    visibility: visible !important;
    font-size: 1.75rem !important;
    line-height: 1.3 !important;
    font-weight: 600 !important;
    color: #1a1a1a !important;
    display: block !important;
    white-space: normal !important;
}
div#page-login[data-path="login"] section.for-forgot .page-card-body::before {
    content: "Enter your email/username to receive a link by email." !important;
    display: block !important;
    font-family: 'Lato', sans-serif !important;
    color: #000000 !important;
    font-weight: 300 !important;
    font-size: 0.95rem !important;
    margin-bottom: 1.5rem !important;
    text-align: start !important;
}
div#page-login[data-path="login"] label[for="forgot_email"] {
    visibility: hidden !important;
    position: relative !important;
}
div#page-login[data-path="login"] label[for="forgot_email"]::after {
    content: "Username" !important;
    visibility: visible !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    font-family: 'Lato', sans-serif !important;
    color: #000000 !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    display: block !important;
}
[dir="rtl"] div#page-login[data-path="login"] label[for="forgot_email"]::after {
    left: auto !important;
    right: 0 !important;
}

/* Also update focus color to match brand blue (was #6B8EFF in original) */
/* input focus now uses #2563eb to stay consistent with desk theme */

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 768px) {
    div#page-login[data-path="login"] {
        flex-direction: column !important;
    }
    div#page-login[data-path="login"] .page-content-wrapper,
    div#page-login[data-path="login"] main.container.my-4 {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    div#page-login[data-path="login"] .page-card-head {
        width: calc(100% - 40px) !important;
        max-width: calc(100% - 40px) !important;
        min-width: 280px !important;
        margin: 20px 20px 0 20px !important;
    }
    div#page-login[data-path="login"]::before {
        display: none !important;
    }
    div#page-login[data-path="login"] .login-content.page-card,
    div#page-login[data-path="login"] section.for-login .page-card {
        width: calc(100% - 40px) !important;
        max-width: calc(100% - 40px) !important;
        min-width: 280px !important;
        padding: 0 !important;
        min-height: auto !important;
        margin: 20px !important;
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
    }
    div#page-login[data-path="login"] .form-control,
    div#page-login[data-path="login"] input[type="email"],
    div#page-login[data-path="login"] input[type="password"],
    div#page-login[data-path="login"] input[type="text"],
    div#page-login[data-path="login"] .form-group input,
    div#page-login[data-path="login"] .form-group .form-control {
        width: 100% !important;
        max-width: 100% !important;
        height: 60px !important;
        padding: 0 1rem !important;
    }
    div#page-login[data-path="login"] .input-group input {
        padding-left: 0.75rem !important;
    }
}

@media (max-width: 480px) {
    div#page-login[data-path="login"] .login-content.page-card,
    div#page-login[data-path="login"] section.for-login .page-card {
        width: calc(100% - 20px) !important;
        max-width: calc(100% - 20px) !important;
        min-width: 260px !important;
        padding: 1.5rem 1rem !important;
        margin: 10px !important;
    }
    div#page-login[data-path="login"] .page-card-head {
        width: calc(100% - 10px) !important;
        max-width: calc(100% - 10px) !important;
        min-width: 0 !important;
        margin: 10px 5px 0 5px !important;
        padding: 0 2px !important;
    }
    div#page-login[data-path="login"] .form-control,
    div#page-login[data-path="login"] input[type="email"],
    div#page-login[data-path="login"] input[type="password"],
    div#page-login[data-path="login"] input[type="text"],
    div#page-login[data-path="login"] .form-group input,
    div#page-login[data-path="login"] .form-group .form-control {
        height: 50px !important;
        font-size: 0.9rem !important;
    }
    div#page-login[data-path="login"] section.for-forgot .page-card-head h4::after,
    div#page-login[data-path="login"] h4 {
        white-space: nowrap !important;
        font-size: 1.1rem !important;
        line-height: 1.2 !important;
        letter-spacing: -0.02em !important;
        display: block !important;
        width: 100% !important;
    }
    div#page-login[data-path="login"] .page-card-head h4 {
        margin-bottom: 0.5rem !important;
    }
}