/*
 * Login screen restyle — matches design-files/login.png exactly: a light
 * grey page, a centred white card, the brand mark above a "Welcome Back"
 * heading, icon-prefixed fields, and a solid accent button.
 *
 * Same fixed literal palette as the rest of the chrome this session
 * (public/theme/css/chrome-nav-v2.css, leads-redesign.css) — --login-accent
 * below is the same teal already used everywhere else, not re-derived from
 * Settings > Theme.
 *
 * layouts/header.blade.php's body class carries .form-signin-wrapper on
 * this route and paints it with the configured theme colour — neutralised
 * here so this page's own light-grey background isn't fought by that.
 */
:root {
    --login-bg: #F3F1EA;
    --login-panel: #FFFFFF;
    --login-line: #E7E3D8;
    --login-ink: #1F2430;
    --login-muted: #7A7466;
    --login-accent: #E7B001;
    --login-accent-deep: #0B6E64;
    --login-danger: #C43D3D;
}

body.form-signin-wrapper {
    background: var(--login-bg) !important;
    margin: 0;
}
body.form-signin-wrapper .navbar,
body.form-signin-wrapper .container-fluid.mimin-wrapper,
body.form-signin-wrapper #left-menu {
    display: none !important;
}

.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 16px;
    background: var(--login-bg);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.login-card {
    width: 100%;
    max-width: 440px;
    background: var(--login-panel);
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(30, 30, 20, .08);
    padding: 40px 40px 34px;
    text-align: center;
}

.login-logo {
    width: 64px;
    height: auto;
    margin-bottom: 18px;
}

.login-title {
    margin: 0 0 8px;
    font-size: 24px;
    font-weight: 800;
    color: var(--login-ink);
    letter-spacing: -.3px;
}

.login-subtitle {
    margin: 0 0 28px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--login-muted);
}

.login-form { text-align: left; }

.login-field {
    position: relative;
    margin-bottom: 14px;
}
.login-field-icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--login-muted);
    font-size: 15px;
    pointer-events: none;
}
.login-page input.login-input {
    /* !important + box-sizing pinned explicitly: some global input[type=...]
       rules elsewhere in the theme have higher specificity than a bare
       class for one type but not another (an attribute+element selector
       like input[type="password"] outranks a single class), so padding
       could differ between the password/text states this field toggles
       between — pinning it here keeps the icon clear of the text either
       way. */
    box-sizing: border-box !important;
    width: 100% !important;
    height: 48px !important;
    padding: 0 44px !important;
    border: 1px solid var(--login-line);
    border-radius: 10px;
    background: var(--login-panel);
    font-size: 13.5px;
    color: var(--login-ink);
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.login-input::placeholder { color: var(--login-muted); opacity: 1; }
.login-input:focus {
    border-color: var(--login-accent);
    box-shadow: 0 0 0 3px rgba(15, 143, 130, .14);
}
.login-field-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border: none;
    background: none;
    color: var(--login-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.login-field-toggle:hover { color: var(--login-ink); }

.login-error {
    display: block;
    margin: -8px 0 12px 2px;
    font-size: 11.5px;
    font-style: normal;
    color: var(--login-danger);
}

.login-remember {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 4px 0 22px;
}
.login-remember-check {
    display: flex;
    align-items: center;
    gap: 8px;
}
.login-checkbox {
    width: 16px;
    height: 16px;
    accent-color: var(--login-accent);
    margin: 0;
}
.login-remember-check label {
    font-size: 12.5px;
    color: var(--login-ink);
    margin: 0;
    cursor: pointer;
}
.login-forgot {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--login-accent);
}

.login-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 48px;
    border: none;
    border-radius: 10px;
    background: var(--login-accent);
    color: #fff;
    font-size: 14.5px;
    font-weight: 700;
    cursor: pointer;
    transition: filter .15s ease;
}
.login-submit:hover,
.login-submit:focus { filter: brightness(.95); color: #fff; }
.login-submit i { font-size: 13px; }

.login-divider {
    position: relative;
    text-align: center;
    margin: 22px 0 16px;
}
.login-divider::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: var(--login-line);
}
.login-divider span {
    position: relative;
    padding: 0 12px;
    background: var(--login-panel);
    color: var(--login-muted);
    font-size: 11.5px;
}

.login-help {
    padding: 12px 16px;
    border-radius: 10px;
    background: #F4F3EF;
    color: var(--login-muted);
    font-size: 12px;
    text-align: center;
}

@media (max-width: 480px) {
    .login-card { padding: 32px 24px 26px; }
}