/* ============================================
   IQAC Audit System — Login Page Premium UI
   ============================================ */
:root {
    --primary:       #4f46e5;
    --primary-dark:  #4338ca;
    --primary-glow:  rgba(79, 70, 229, 0.22);
    --text:          #1f2937;
    --text-light:    #6b7280;
    --border:        #e5e7eb;
    --bg-input:      #f9fafb;
    --white:         #ffffff;
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', system-ui, sans-serif; }

body {
    background: linear-gradient(145deg, #eef2ff 0%, #e8eeff 50%, #f5f3ff 100%);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ─── Unified top header block ─── */
.site-header {
    width: 100%;
    background: #ffffff;
    box-shadow: 0 2px 12px rgba(79, 70, 229, 0.10);
    flex-shrink: 0;
    display: block;
}

.page-header {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 0 0 0;
    background: #ffffff;
}

.page-header img {
    width: 100%;
    max-width: 1400px;
    height: auto;
    max-height: 150px;
    object-fit: contain;
    display: block;
}

/* ─── Sub-header strip ─── */
.sub-header {
    width: 100%;
    display: block;
    background: #ffffff;
    border-bottom: 3px solid var(--primary);
    padding: 7px 0;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--primary);
    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: center;
}

/* ─── Main content wrapper ─── */
.main-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.5rem;
}

/* ─── Login card ─── */
.login-container {
    display: flex;
    width: 100%;
    max-width: 900px;
    min-height: 530px;
    background: var(--white);
    border-radius: 22px;
    box-shadow: 0 24px 64px -10px var(--primary-glow), 0 8px 24px rgba(0,0,0,0.07);
    overflow: hidden;
    animation: fadeUp 0.5s cubic-bezier(0.16,1,0.3,1) both;
}

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

/* ─── Left image panel ─── */
.image-section {
    flex: 1.05;
    display: none;
    background: url('audit_image.jpg') center/cover no-repeat;
    position: relative;
}
@media (min-width: 800px) { .image-section { display: block; } }

.image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(150deg, rgba(30,27,75,0.92) 0%, rgba(79,70,229,0.82) 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 3rem 2.5rem;
    color: #ffffff;
}

.overlay-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.22);
    backdrop-filter: blur(6px);
    padding: 0.38rem 1rem;
    border-radius: 99px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #c7d2fe;
    margin-bottom: 1.6rem;
    width: fit-content;
}

.image-overlay h2 {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.5px;
    margin-bottom: 0.9rem;
}

.image-overlay > p {
    font-size: 0.9rem;
    line-height: 1.65;
    color: rgba(255,255,255,0.75);
    margin-bottom: 2rem;
}

.overlay-features { display: flex; flex-direction: column; gap: 0.65rem; }

.overlay-feature {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.85);
    font-weight: 500;
}

.overlay-feature .feat-icon {
    width: 26px; height: 26px;
    border-radius: 7px;
    background: rgba(255,255,255,0.15);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.72rem;
    flex-shrink: 0;
}

/* ─── Right form panel ─── */
.form-section {
    flex: 1;
    padding: 3rem 2.8rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--white);
}

/* ─── Form header ─── */
.form-header { margin-bottom: 1.6rem; text-align: center; }

.portal-icon-wrap {
    width: 56px; height: 56px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--primary), #818cf8);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 1rem;
    box-shadow: 0 8px 22px var(--primary-glow);
}
.portal-icon-wrap i { font-size: 1.4rem; color: #ffffff; }

.portal-label {
    font-size: 1.55rem;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.4px;
    margin-bottom: 0.25rem;
}

.form-header p { color: var(--text-light); font-size: 0.87rem; font-weight: 500; }

.form-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border), transparent);
    margin: 0 0 1.7rem;
}

/* ─── Form ─── */
form { display: flex; flex-direction: column; gap: 1.1rem; }

.input-group label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

/* Icon-inside-field wrapper */
.field-wrap {
    position: relative;
    display: block;
}

.field-wrap .field-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    font-size: 0.85rem;
    pointer-events: none;
    z-index: 2;
}

.field-wrap input,
.field-wrap select {
    display: block;
    width: 100%;
    padding: 0.82rem 1rem 0.82rem 2.55rem;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    font-size: 0.93rem;
    font-family: 'Inter', sans-serif;
    color: var(--text);
    background: var(--bg-input);
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.field-wrap input:hover,
.field-wrap select:hover { border-color: #c7d2fe; background: #f5f7ff; }

.field-wrap input:focus,
.field-wrap select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(79,70,229,0.08);
    background: var(--white);
}

.field-wrap input:focus ~ .field-icon,
.field-wrap:focus-within .field-icon { color: var(--primary); }

/* Select chevron */
.select-chevron {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--text-light);
    font-size: 0.75rem;
    z-index: 2;
}

/* ─── Options row ─── */
.options {
    font-size: 0.84rem;
    color: var(--text-light);
}
.options label {
    display: flex; align-items: center; gap: 0.5rem;
    cursor: pointer; user-select: none;
}
.options input[type="checkbox"] {
    width: 1rem; height: 1rem;
    accent-color: var(--primary); cursor: pointer;
}

/* ─── Submit button ─── */
.btn-submit {
    width: 100%;
    padding: 0.9rem 1rem;
    background: linear-gradient(135deg, var(--primary) 0%, #6366f1 100%);
    color: #ffffff;
    border: none;
    border-radius: 10px;
    font-size: 0.97rem;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    letter-spacing: 0.2px;
    margin-top: 0.3rem;
    box-shadow: 0 6px 20px var(--primary-glow);
    transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
}
.btn-submit:hover {
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
    transform: translateY(-2px);
    box-shadow: 0 10px 28px var(--primary-glow);
}
.btn-submit:active { transform: translateY(0); }
.btn-submit.loading { opacity: 0.8; pointer-events: none; cursor: not-allowed; }

/* ─── Alerts ─── */
.alert {
    display: flex; align-items: center; gap: 8px;
    padding: 0.78rem 1rem;
    border-radius: 10px;
    font-size: 0.87rem;
    font-weight: 500;
    margin-bottom: 0.4rem;
}
.alert-error   { background: #fef2f2; color: #b91c1c; border: 1.5px solid #fecaca; }
.alert-success { background: #f0fdf4; color: #15803d; border: 1.5px solid #bbf7d0; }