/* ==========================================================================
   SMART SCHOOL - LOGIN / AUTH PAGES UI (companion to ui-modern.css)
   Visual-only restyle of the usertemplate auth pages. No markup/JS changes.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
    --ss-primary:        #5B9F48;
    --ss-primary-hover:  #4a8840;
    --ss-primary-active: #1A542E;
    --ss-primary-soft:   #eef2ff;
    --ss-primary-border: #c7d2fe;

    --ss-bg-page:        #f1f5f9;
    --ss-bg-card:        #ffffff;
    --ss-bg-subtle:      #f8fafc;

    --ss-text-heading:   #0f172a;
    --ss-text-body:      #334155;
    --ss-text-secondary: #475569;
    --ss-text-muted:     #94a3b8;

    --ss-border:         #e2e8f0;
    --ss-border-input:   #cbd5e1;

    --ss-success:        #10b981;
    --ss-success-soft:   #ecfdf5;
    --ss-success-border: #a7f3d0;
    --ss-success-text:   #065f46;

    --ss-danger:         #ef4444;
    --ss-danger-soft:    #fef2f2;
    --ss-danger-border:  #fecaca;
    --ss-danger-text:    #991b1b;

    --ss-radius-md:      8px;
    --ss-radius-lg:      12px;
    --ss-radius-xl:      16px;

    --ss-shadow-xs:       0 1px 2px 0 rgba(0, 0, 0, 0.04);
    --ss-shadow-card:     0 1px 3px 0 rgba(15, 23, 42, 0.05), 0 1px 2px -1px rgba(15, 23, 42, 0.03);
    --ss-shadow-card-lg:  0 4px 6px -1px rgba(15, 23, 42, 0.07), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
    --ss-shadow-input:    0 1px 2px 0 rgba(15, 23, 42, 0.04);

    --ss-transition:     all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --------------------------------------------------------------------------
   1. BASE
   -------------------------------------------------------------------------- */

body {
    font-family: 'Inter', 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: var(--ss-text-body);
    background-color: var(--ss-bg-page) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::selection { background: var(--ss-primary); color: #ffffff; text-shadow: none; }
::-moz-selection { background: var(--ss-primary); color: #ffffff; text-shadow: none; }

a, a:hover, a:focus { color: var(--ss-primary); }

a:focus-visible,
button:focus-visible,
input:focus-visible {
    outline: 2px solid var(--ss-primary) !important;
    outline-offset: 2px !important;
}

/* --------------------------------------------------------------------------
   2. LOGIN CARD
   -------------------------------------------------------------------------- */

.loginbg {
    background: var(--ss-bg-card) !important;
    border: 1px solid var(--ss-border);
    border-radius: var(--ss-radius-xl);
    box-shadow: var(--ss-shadow-card);
    margin: 24px auto;
    overflow: hidden;
    transition: var(--ss-transition);
}

.loginbg:hover { box-shadow: var(--ss-shadow-card-lg); }

.form-top {
    padding: 28px 28px 8px 28px;
    background: transparent;
}

.logowidth img {
    height: 34px;
    width: auto;
}

.form-bottom {
    padding: 12px 28px 28px 28px;
    background: transparent;
    text-align: left;
}

.form-bottom h3.font-white,
.font-white {
    color: var(--ss-text-heading) !important;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 16px 0;
}

/* Share/certificate pages that use the shadow box */
.shadow_bg {
    background: var(--ss-bg-card) !important;
    border: 1px solid var(--ss-border);
    border-radius: var(--ss-radius-lg) !important;
    box-shadow: var(--ss-shadow-card) !important;
}

/* --------------------------------------------------------------------------
   3. INPUTS
   -------------------------------------------------------------------------- */

input[type="text"],
input[type="password"],
textarea,
textarea.form-control {
    height: 46px !important;
    margin: 0;
    padding: 0 44px 0 14px !important;
    vertical-align: middle;
    background: var(--ss-bg-card) !important;
    border: 1px solid var(--ss-border-input) !important;
    border-radius: var(--ss-radius-md) !important;
    font-family: inherit;
    font-size: 14px !important;
    font-weight: 400;
    line-height: normal;
    color: var(--ss-text-heading) !important;
    box-shadow: var(--ss-shadow-input) !important;
    transition: var(--ss-transition);
}

textarea,
textarea.form-control {
    height: auto !important;
    min-height: 90px;
    padding: 10px 14px !important;
    line-height: 1.5;
}

input[type="text"]:focus,
input[type="password"]:focus,
textarea:focus,
textarea.form-control:focus {
    outline: 0;
    background: var(--ss-bg-card) !important;
    border: 1px solid var(--ss-primary) !important;
    box-shadow: 0 0 0 3px rgba(91, 159, 72, 0.14) !important;
}

input[type="text"]::placeholder,
input[type="password"]::placeholder,
textarea::placeholder {
    color: var(--ss-text-muted) !important;
}

/* Validation error state (client-side .input-error / server form_error) */
.form-bottom form .input-error,
input.input-error {
    border-color: var(--ss-danger) !important;
}

.input-error:focus {
    border-color: var(--ss-danger) !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.14) !important;
}

.loginbg .text-danger {
    color: var(--ss-danger) !important;
    font-size: 12.5px;
    display: inline-block;
    margin-top: 4px;
    text-align: left;
}

/* Envelope / lock icons */
.form-control-feedback {
    color: var(--ss-text-muted);
    width: 44px;
    height: 46px;
    line-height: 46px;
    transition: var(--ss-transition);
}

.form-group:focus-within .form-control-feedback { color: var(--ss-primary); }

/* Captcha block */
#captcha_image img {
    border-radius: 6px;
    border: 1px solid var(--ss-border);
    background: #ffffff;
}

.catpcha {
    cursor: pointer;
    padding-left: 10px;
    color: var(--ss-text-secondary);
    transition: var(--ss-transition);
}

.catpcha:hover { color: var(--ss-primary); }

/* --------------------------------------------------------------------------
   4. PRIMARY BUTTON
   -------------------------------------------------------------------------- */

.form-bottom form button.btn,
button.btn {
    height: 46px;
    line-height: 44px;
    padding: 0 20px;
    background: linear-gradient(180deg, #5B9F48 0%, #4a8840 100%) !important;
    border: 1px solid var(--ss-primary-hover);
    border-radius: var(--ss-radius-md) !important;
    font-family: inherit;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    letter-spacing: 0.1px;
    box-shadow: 0 1px 2px 0 rgba(91, 159, 72, 0.3);
    transition: var(--ss-transition);
}

button.btn:hover,
button.btn:active {
    opacity: 1 !important;
    background: linear-gradient(180deg, #4a8840 0%, #1A542E 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 6px -1px rgba(91, 159, 72, 0.25);
}

button.btn:focus,
button.btn:active:focus,
button.btn.active:focus {
    opacity: 1 !important;
    background: var(--ss-primary-hover) !important;
    color: #ffffff !important;
}

button.btn:disabled,
button.btn.disabled {
    opacity: 0.55;
    cursor: not-allowed;
    box-shadow: none;
}

/* --------------------------------------------------------------------------
   5. ALERTS
   -------------------------------------------------------------------------- */

.loginbg .alert,
.form-bottom .alert {
    border-radius: var(--ss-radius-md) !important;
    font-size: 13px;
    padding: 10px 14px !important;
    border: 1px solid transparent !important;
    text-align: left;
}

.loginbg .alert-danger,
.form-bottom .alert-danger {
    background-color: var(--ss-danger-soft) !important;
    border-color: var(--ss-danger-border) !important;
    color: var(--ss-danger-text) !important;
}

.loginbg .alert-success,
.form-bottom .alert-success {
    background-color: var(--ss-success-soft) !important;
    border-color: var(--ss-success-border) !important;
    color: var(--ss-success-text) !important;
}

/* --------------------------------------------------------------------------
   6. FORGOT PASSWORD LINK
   -------------------------------------------------------------------------- */

a.forgot {
    color: var(--ss-text-secondary) !important;
    font-size: 13px;
    font-weight: 600;
    margin-top: 6px;
}

a.forgot:hover,
a.forgot:focus {
    color: var(--ss-primary) !important;
}

a.forgot i {
    color: var(--ss-primary);
    margin-right: 2px;
}

/* --------------------------------------------------------------------------
   7. DEMO ACCOUNT CHIPS
   (author !important intentionally overrides the inline background colors)
   -------------------------------------------------------------------------- */

.demo-accounts {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--ss-border);
}

.demo-title {
    font-size: 11px;
    color: var(--ss-text-muted);
    margin: 0 0 8px 0;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-weight: 700;
}

.demo-title i {
    margin-right: 6px;
    color: var(--ss-primary);
}

.demo-accounts .btn {
    height: 38px !important;
    line-height: 36px !important;
    padding: 0 10px !important;
    background: var(--ss-bg-subtle) !important;
    border: 1px solid var(--ss-border) !important;
    border-radius: var(--ss-radius-md) !important;
    color: var(--ss-text-secondary) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: var(--ss-transition);
}

.demo-accounts .btn:hover,
.demo-accounts .btn:focus {
    background: var(--ss-primary-soft) !important;
    border-color: var(--ss-primary-border) !important;
    color: var(--ss-primary) !important;
    opacity: 1 !important;
}

.demo-accounts .btn i {
    color: var(--ss-primary);
    margin-right: 4px;
}

/* --------------------------------------------------------------------------
   8. NOTICES PANEL (right side, over the school background image)
   -------------------------------------------------------------------------- */

.h3 {
    color: #ffffff;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: 1.5rem;
}

.loginright {
    background: rgba(15, 23, 42, 0.55);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--ss-radius-lg);
    padding: 28px;
}

.loginright h4 {
    font-weight: 600;
    font-size: 15px;
    color: #ffffff;
}

.loginright p {
    line-height: 1.6;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.82);
    word-break: break-word;
}

.logdivider {
    background: rgba(255, 255, 255, 0.16);
    margin: 14px 0;
}

a.more { color: #a5b4fc; font-size: 12px; font-weight: 600; }
a.more:hover, a.more:focus { color: #ffffff; }

/* Custom scrollbar in the notices box */
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    background: rgba(255, 255, 255, 0.35) !important;
}

/* --------------------------------------------------------------------------
   9. RESPONSIVE
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
    .loginbg {
        margin: 16px 12px;
        max-width: none;
    }

    .form-top { padding: 22px 22px 6px 22px; }
    .form-bottom { padding: 10px 22px 22px 22px; }

    /* The background-image column stacks under the form; let it size to content */
    .text-wrap {
        height: auto;
        min-height: 320px;
        padding: 40px 16px;
    }

    .loginright {
        padding: 20px;
        max-height: 300px;
        height: auto;
    }

    .demo-accounts .btn { font-size: 11px !important; }
}

/* --------------------------------------------------------------------------
   10. REDUCED MOTION
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}