/* ========================================
   EasyFile Connector — Login Page
   Follows EasyFile Design System v1
   ======================================== */

*, *::before, *::after {
    box-sizing: border-box;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--ef-bg);
    font-family: var(--ef-font);
    font-size: var(--ef-text-14);
    color: var(--ef-text);
    line-height: 1.5;
}

/* ── Layout ─────────────────────────────── */

.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    padding: var(--ef-space-24);
}

.login-card {
    background: var(--ef-surface);
    border: 1px solid #e8e8e8;
    border-radius: var(--ef-radius-14);
    padding: var(--ef-space-32);
    width: 100%;
    max-width: 400px;
    box-shadow: none;
    overflow: hidden;
}

/* ── Logo ────────────────────────────────── */

.logo-section {
    text-align: center;
    margin-bottom: var(--ef-space-32);
}

.logo-image {
    max-width: 150px;
    height: auto;
    margin: 0 auto var(--ef-space-12);
    display: block;
}

.logo-subtitle {
    color: #555;
    font-size: 17px;
    font-weight: 400;
    margin: 0;
    text-transform: none !important;
    opacity: 1;
    letter-spacing: 0.5px;
}

.logo-divider {
    border: none;
    border-top: 1px solid #e8e8e8;
    margin: var(--ef-space-24) calc(-1 * var(--ef-space-32)) 0 calc(-1 * var(--ef-space-32));
}

/* ── Header ──────────────────────────────── */

.login-header {
    margin-bottom: var(--ef-space-24);
    padding-bottom: var(--ef-space-16);
    text-align: left;
}

.login-header h2 {
    color: #444;
    font-size: var(--ef-text-18);
    font-weight: 600;
    margin: 0;
}

/* ── Alerts ──────────────────────────────── */

.ef-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--ef-space-8);
    padding: var(--ef-space-12);
    border-radius: var(--ef-radius-6);
    font-size: var(--ef-text-13);
    margin-bottom: var(--ef-space-16);
    border: 1px solid;
}

.ef-alert svg {
    flex-shrink: 0;
    margin-top: 1px;
}

.ef-alert-error {
    background: var(--ef-red-bg);
    border-color: rgba(220, 38, 38, 0.2);
    color: var(--ef-red-text);
}

.ef-alert-success {
    background: var(--ef-green-bg);
    border-color: rgba(22, 163, 74, 0.2);
    color: var(--ef-green-text);
}

/* ── Form — Design System classes ──────── */
/* .fg = form group, .fl = form label, .fi = form input, .f-err = error text */

.fg {
    margin-bottom: var(--ef-space-16);
}

.fl {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.fi {
    display: block;
    width: 100%;
    box-sizing: border-box;
    height: 44px;
    padding: 0 var(--ef-space-16);
    border: 1px solid var(--ef-border);
    border-radius: var(--ef-radius-6);
    background: var(--ef-surface-2);
    color: var(--ef-text);
    font-size: var(--ef-text-14);
    font-family: var(--ef-font);
    transition: border-color 150ms, box-shadow 150ms;
}

.fi:focus {
    outline: none;
    border-color: var(--ef-color-primary);
    box-shadow: 0 0 0 2px var(--ef-color-focus);
    background: var(--ef-surface);
}

.fi::placeholder {
    color: var(--ef-text-muted);
    opacity: 0.6;
}


.f-err {
    display: block;
    font-size: var(--ef-text-11);
    color: var(--ef-red-text);
    margin-top: var(--ef-space-4);
}

/* ── Remember Me ─────────────────────────── */

.remember-row {
    margin: var(--ef-space-16) 0 var(--ef-space-24) 0;
}

.remember-label {
    display: flex;
    align-items: center;
    gap: var(--ef-space-8);
    font-size: var(--ef-text-13);
    color: var(--ef-text-muted);
    cursor: pointer;
    user-select: none;
}

/* Custom checkbox — .cb class from design system */
.cb {
    width: 15px;
    height: 15px;
    border: 1px solid var(--ef-border);
    border-radius: var(--ef-radius-4);
    cursor: pointer;
    flex-shrink: 0;
    accent-color: var(--ef-color-primary);
}


/* ── Buttons ─────────────────────────────── */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ef-space-8);
    border: none;
    border-radius: var(--ef-radius-6);
    font-family: var(--ef-font);
    font-weight: 500;
    cursor: pointer;
    transition: background-color 150ms, border-color 150ms;
    text-decoration: none;
}

.btn:focus-visible {
    outline: 2px solid var(--ef-color-focus);
    outline-offset: 2px;
}

.btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Sizes */
.btn-lg {
    height: 42px;
    padding: 0 var(--ef-space-16);
    font-size: var(--ef-text-14);
}

/* Variants */
.btn-primary {
    background: var(--ef-color-primary);
    color: #fff;
}

.btn-primary:hover {
    background: var(--ef-color-primary-hover);
}

.btn-danger {
    background: var(--ef-color-danger);
    color: #fff;
}

.btn-danger:hover {
    background: var(--ef-color-danger-hover);
}

/* Full-width modifier */
.btn-full {
    width: 100%;
}

/* ── SSO Section ─────────────────────────── */

.sso-divider {
    text-align: center;
    margin: var(--ef-space-24) 0 var(--ef-space-16) 0;
    position: relative;
}

.sso-divider::before,
.sso-divider::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 35%;
    height: 1px;
    background: var(--ef-border);
}

.sso-divider::before { left: 0; }
.sso-divider::after  { right: 0; }

.sso-divider span {
    color: var(--ef-text-muted);
    font-size: var(--ef-text-12);
    background: var(--ef-surface);
    padding: 0 var(--ef-space-12);
}

.sso-buttons {
    display: flex;
    flex-direction: column;
    gap: var(--ef-space-8);
}

.btn-sso {
    width: 100%;
    height: 42px;
    padding: 0 var(--ef-space-16);
    border: 1px solid var(--ef-border);
    border-radius: var(--ef-radius-6);
    background: var(--ef-surface);
    color: var(--ef-text);
    font-size: var(--ef-text-13);
    font-weight: 500;
    font-family: var(--ef-font);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--ef-space-8);
    cursor: pointer;
    transition: background-color 150ms, border-color 150ms;
}

.btn-sso:hover {
    background: var(--ef-surface-2);
    border-color: var(--ef-text-muted);
}

.btn-sso:focus-visible {
    outline: 2px solid var(--ef-color-focus);
    outline-offset: 2px;
}

.sso-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* ── Profile / Authenticated State ──────── */

.profile-section {
    padding-top: var(--ef-space-8);
}

.profile-row {
    display: flex;
    align-items: center;
    gap: var(--ef-space-12);
    padding: var(--ef-space-16);
    background: var(--ef-surface-2);
    border: 1px solid var(--ef-border);
    border-radius: var(--ef-radius-6);
}

/* Avatar — design system component */
.avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--ef-color-primary);
    color: #fff;
    font-size: var(--ef-text-13);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.profile-info {
    min-width: 0;
}

.profile-name {
    font-size: var(--ef-text-14);
    font-weight: 600;
    color: var(--ef-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-userid {
    font-size: var(--ef-text-12);
    color: var(--ef-text-muted);
    margin-top: var(--ef-space-4);
}

/* ── Footer ──────────────────────────────── */

.login-footer {
    text-align: center;
    padding: var(--ef-space-16) var(--ef-space-24);
    color: var(--ef-text-muted);
    font-size: var(--ef-text-11);
    border-top: 1px solid var(--ef-border);
    background: var(--ef-surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--ef-space-8);
    flex-wrap: wrap;
}

.footer-divider {
    color: var(--ef-border);
}

/* ── Responsive ──────────────────────────── */

@media (max-width: 480px) {
    .login-container {
        padding: var(--ef-space-16);
        align-items: flex-start;
        padding-top: var(--ef-space-24);
    }

    .login-card {
        padding: var(--ef-space-24) var(--ef-space-16);
        box-shadow: var(--ef-shadow-1);
    }

    .logo-divider {
        display: none;
    }

    /* Prevent iOS input zoom */
    .fi {
        font-size: 16px !important;
    }

    .btn-sso {
        font-size: 16px !important;
    }

    .btn-lg {
        height: 48px;
        font-size: 16px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    * { transition-duration: 0.01ms !important; }
}