/* ── CSS Custom Properties ───────────────────────────────────────────────── */
:root {
    --primary-color:       #2E7D32;
    --primary-color-dark:  #1B5E20;
    --primary-color-light: #E8F5E9;

    --secondary-color: #424242;
    --accent-color:    #66BB6A;

    --success-color: #2E7D32;
    --warning-color: #F9A825;
    --danger-color:  #D32F2F;
    --info-color:    #388E3C;

    --dark-color:    #121212;
    --light-bg:      #F4F7F4;
    --body-color:    #F1F5F1;
    --sidebar-color: #FFFFFF;

    --text-color:  #5F6F64;
    --text-dark:   #1C1C1C;
    --text-muted:  #7A8A7F;
    --border-color:#E0E6E0;

    --card-shadow:       0 2px 8px  rgba(46,125,50,.08);
    --card-shadow-hover: 0 4px 16px rgba(46,125,50,.12);
    --shadow-sm:         0 1px 4px  rgba(0,0,0,.05);
    --shadow-lg:         0 8px 24px rgba(0,0,0,.12);

    --border-radius:     12px;
    --border-radius-sm:   8px;
    --border-radius-lg:  16px;
    --border-radius-pill:24px;

    --spacing-xs: .5rem;
    --spacing-sm: .75rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;

    --trans-02: all .2s ease;
    --trans-03: all .3s ease;
    --trans-04: all .4s ease;
    --trans-05: all .5s ease;
}

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

html, body { height: 100%; }

.login-body {
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
    background: #f5f6fa;
    margin: 0;
    padding: 0;
}

/* ── Left branding panel ─────────────────────────────────────────────────── */
.login-left-panel {
    position: relative;
    background: url("/static/images/school_bg.c5a242722629.png") center/cover no-repeat;
    background-color: #1a3d1f;   /* fallback if image missing */
    min-height: 100vh;
    overflow: hidden;
}

.login-left-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        160deg,
        rgba(27, 94, 32, .88) 0%,
        rgba(46, 125, 50, .78) 50%,
        rgba(27, 94, 32, .92) 100%
    );
    z-index: 0;
}

.login-left-logo {
    height: 56px;
    width: auto;
    object-fit: contain;
    background: rgba(255,255,255,.12);
    border-radius: 10px;
    padding: 6px 12px;
    backdrop-filter: blur(4px);
}

.login-left-heading {
    font-size: 2rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.25;
    letter-spacing: -.5px;
    margin-bottom: .75rem;
}

.login-left-sub {
    color: rgba(255,255,255,.78);
    font-size: .95rem;
    line-height: 1.6;
}

.login-feature-list li {
    color: rgba(255,255,255,.88);
    font-size: .9rem;
    margin-bottom: .6rem;
    display: flex;
    align-items: center;
}

.login-feature-list li i {
    color: #a5d6a7;
    font-size: 1rem;
    flex-shrink: 0;
}

/* ── Right form panel ────────────────────────────────────────────────────── */
.login-right-panel {
    background: #ffffff;
    min-height: 100vh;
    padding: 2rem 1rem;
}

.login-form-box {
    max-width: 420px;
    padding: 2rem 2.5rem;
}

.login-form-title {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--text-dark);
    letter-spacing: -.4px;
    margin-bottom: .4rem;
}

.login-form-subtitle {
    color: var(--text-muted);
    font-size: .9rem;
    margin-bottom: 1.75rem;
}

/* ── Input rows with icon + floating label ───────────────────────────────── */
.login-field {}

.login-input-wrap {
    display: flex;
    align-items: stretch;
    border: 1.5px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background: #fff;
    transition: border-color .2s ease, box-shadow .2s ease;
    overflow: hidden;
}

.login-input-wrap:focus-within {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(46,125,50,.12);
}

.login-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    min-width: 44px;
    color: var(--text-muted);
    font-size: 1rem;
    background: #fafafa;
    border-right: 1.5px solid var(--border-color);
    transition: color .2s ease, background .2s ease;
}

.login-input-wrap:focus-within .login-icon {
    color: var(--primary-color);
    background: var(--primary-color-light);
    border-right-color: var(--primary-color);
}

/* Floating label inside .login-input-wrap */
.login-input-wrap .form-floating {
    flex: 1;
}

.login-input-wrap .form-floating > .form-control,
.login-input-wrap .form-floating > .form-control:focus {
    border: none !important;
    box-shadow: none !important;
    border-radius: 0;
    padding-left: .85rem;
    font-size: .9375rem;
    background: transparent;
}

.login-input-wrap .form-floating > label {
    padding-left: .85rem;
    color: var(--text-muted);
    font-size: .875rem;
}

/* Fix browser autofill background */
.login-input-wrap input:-webkit-autofill,
.login-input-wrap input:-webkit-autofill:hover,
.login-input-wrap input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
    box-shadow: 0 0 0 1000px #fff inset !important;
    -webkit-text-fill-color: var(--text-dark) !important;
    transition: background-color 9999s ease-in-out 0s;
}

/* Password toggle button */
.login-pw-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    min-width: 44px;
    background: none;
    border: none;
    border-left: 1.5px solid var(--border-color);
    color: var(--text-muted);
    font-size: 1rem;
    cursor: pointer;
    transition: color .2s ease, background .2s ease;
    padding: 0;
}

.login-pw-toggle:hover {
    color: var(--primary-color);
    background: var(--primary-color-light);
}

/* ── Remember me + Forgot link ───────────────────────────────────────────── */
.form-check-input:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.login-forgot-link {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
    transition: color .2s ease;
}

.login-forgot-link:hover {
    color: var(--primary-color-dark);
    text-decoration: underline;
}

/* ── Submit button ───────────────────────────────────────────────────────── */
.login-submit-btn {
    background: var(--primary-color);
    color: #fff;
    border: none;
    border-radius: var(--border-radius-sm);
    padding: .8rem 1.5rem;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .02em;
    transition: background .2s ease, transform .15s ease, box-shadow .2s ease;
}

.login-submit-btn:hover {
    background: var(--primary-color-dark);
    transform: scale(1.02);
    box-shadow: 0 4px 14px rgba(46,125,50,.3);
    color: #fff;
}

.login-submit-btn:active {
    transform: scale(.99);
}

.login-submit-btn:disabled {
    opacity: .7;
    cursor: not-allowed;
    transform: none;
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.login-form-footer {
    border-top: 1px solid var(--border-color);
    padding-top: 1rem;
}

.login-register-link {
    color: var(--primary-color);
    font-weight: 600;
    text-decoration: none;
    transition: color .2s ease;
}

.login-register-link:hover {
    color: var(--primary-color-dark);
    text-decoration: underline;
}

/* ── Mobile logo ─────────────────────────────────────────────────────────── */
.login-mobile-logo {
    height: 48px;
    width: auto;
    object-fit: contain;
}

/* ── Modal ───────────────────────────────────────────────────────────────── */
.modal-content {
    border-radius: var(--border-radius);
    border: none;
    box-shadow: var(--card-shadow-hover);
}

.modal-header {
    padding: 1.25rem 1.5rem .75rem;
}

.modal-body {
    padding: .75rem 1.5rem 1.5rem;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
    /* Right panel becomes full-width; give it a soft bg like the old card */
    .login-right-panel {
        background: #f5f6fa;
    }

    .login-form-box {
        background: #ffffff;
        border-radius: var(--border-radius-lg);
        box-shadow: var(--card-shadow);
        padding: 2rem 1.75rem;
    }
}

@media (max-width: 575.98px) {
    .login-form-box {
        padding: 1.5rem 1.25rem;
        border-radius: var(--border-radius);
    }

    .login-form-title {
        font-size: 1.4rem;
    }
}