/* ===================================================
   Login Page - Modern Redesign
   Color palette: matches main app (_Layout.cshtml)
   Primary:  #F99E21 (orange)
   Dark bg:  #0f172a / #1e293b
   Slate:    #334155 / #475569 / #94a3b8
   =================================================== */

/* ---- Reset / Full-page layout ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    height: 100%;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
}

/* ---- Background ---- */
.login-bg {
    min-height: 100vh;
    background-image: url('../Content/img/Kapturrit_HomepageV5.jpg');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 24px;
    position: relative;
}

/* subtle dark overlay so text always reads well */
.login-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(10, 16, 35, 0.82) 0%,
        rgba(10, 16, 35, 0.45) 55%,
        rgba(10, 16, 35, 0.15) 100%
    );
    pointer-events: none;
}

/* ---- Card ---- */
.login-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 400px;
    margin-left: 48px;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(20px) saturate(1.6);
    -webkit-backdrop-filter: blur(20px) saturate(1.6);
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 20px;
    box-shadow:
        0 8px 32px rgba(0,0,0,0.22),
        0 2px 8px rgba(0,0,0,0.12),
        inset 0 1px 0 rgba(255,255,255,0.80);
    overflow: hidden;
    animation: cardSlideIn 0.45s cubic-bezier(.22,.68,0,1.2) both;
}

@keyframes cardSlideIn {
    from { opacity: 0; transform: translateY(28px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0)   scale(1);    }
}

/* ---- Card header (logo band) ---- */
.login-card-header {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    padding: 28px 32px 24px;
    border-bottom: 1px solid rgba(255,255,255,0.12);
    display: flex;
    align-items: center;
    gap: 14px;
}

.login-logo-svg {
    width: 160px;
    height: auto;
    flex-shrink: 0;
}

/* ---- Card body ---- */
.login-card-body {
    padding: 32px 32px 28px;
}

.login-title {
    font-size: 22px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 6px;
    letter-spacing: -0.3px;
}

.login-subtitle {
    font-size: 13px;
    color: #64748b;
    margin-bottom: 28px;
}

/* ---- Validation summary ---- */
.login-card-body .validation-summary-errors {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.35);
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 18px;
    color: #fca5a5;
    font-size: 13px;
}

.login-card-body .validation-summary-errors ul { padding-left: 16px; }

/* ---- Input group ---- */
.login-input-group {
    position: relative;
    margin-bottom: 20px;
}

.login-input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 15px;
    pointer-events: none;
    transition: color 0.2s;
    z-index: 2;
}

.login-input {
    width: 100%;
    padding: 13px 14px 13px 42px;
    background: rgba(255,255,255,0.70);
    border: 1px solid rgba(100,116,139,0.25);
    border-radius: 10px;
    color: #0f172a;
    font-size: 14px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
    -webkit-appearance: none;
}

.login-input::placeholder { color: #94a3b8; }

.login-input:focus {
    border-color: #F99E21;
    background: rgba(255,255,255,0.90);
    box-shadow: 0 0 0 3px rgba(249,158,33,0.18);
}

.login-input-group:focus-within .login-input-icon {
    color: #F99E21;
}

/* auto-fill override */
.login-input:-webkit-autofill,
.login-input:-webkit-autofill:hover,
.login-input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 40px rgba(255,255,255,0.92) inset !important;
    -webkit-text-fill-color: #0f172a !important;
    border-color: rgba(100,116,139,0.25) !important;
}

.field-validation-error {
    display: block;
    color: #fca5a5;
    font-size: 12px;
    margin-top: 5px;
    padding-left: 4px;
}

/* ---- Remember me ---- */
.login-remember {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
    cursor: pointer;
    color: #475569;
    font-size: 13px;
    user-select: none;
}

.login-remember input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #F99E21;
    cursor: pointer;
    flex-shrink: 0;
}

/* ---- Submit button ---- */
.login-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 13px 20px;
    background: linear-gradient(135deg, #F99E21 0%, #e8870a 100%);
    color: #0f172a;
    font-size: 15px;
    font-weight: 700;
    font-family: inherit;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    letter-spacing: 0.4px;
    transition: transform 0.15s, box-shadow 0.15s, filter 0.15s;
    box-shadow: 0 4px 16px rgba(249,158,33,0.30);
}

.login-btn:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(249,158,33,0.40);
}

.login-btn:active {
    transform: translateY(0);
    filter: brightness(0.96);
}

/* ---- Divider ---- */
.login-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 22px 0 18px;
    color: #94a3b8;
    font-size: 12px;
}

.login-divider::before,
.login-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(100,116,139,0.20);
}

/* ---- Links row ---- */
.login-links {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.login-link {
    color: #64748b;
    font-size: 13px;
    text-decoration: none;
    transition: color 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.login-link:hover { color: #F99E21; text-decoration: none; }

/* ---- Card footer ---- */
.login-card-footer {
    padding: 14px 32px;
    border-top: 1px solid rgba(100,116,139,0.15);
    background: rgba(248,250,252,0.60);
    text-align: center;
    color: #94a3b8;
    font-size: 12px;
    letter-spacing: 0.3px;
}

/* ---- Responsive ---- */
@media (max-width: 540px) {
    .login-bg { justify-content: center; padding: 16px; }
    .login-card { margin-left: 0; }
    .login-card-header { padding: 20px 22px 18px; }
    .login-card-body { padding: 24px 22px 20px; }
    .login-card-footer { padding: 12px 22px; }
}