/* === lesticom skin: backend/themes/lesticom-default/login.css === */
/*!
 * Lesticom Default Login Skin — Smart School fork
 * Copyright (c) 2026 Lesticom (https://lesticom.africa)
 * Licensed under GPLv2 — see licensing/GPL.txt
 *
 * This stylesheet is layered LAST in the login page (after Bootstrap 3,
 * FontAwesome 4, and the legacy usertemplate CSS), so it wins on every
 * selector conflict. It is served by application/controllers/Theme.php
 * at /login.css, with the school's custom_login_css appended.
 *
 * Used by:
 *   application/views/admin/login.php    (admin sign-in)
 *   application/views/userlogin.php      (parent / student / staff sign-in)
 *
 * Override order (later wins):
 *   1. Bootstrap 3.3.5                              (usertemplate/assets/bootstrap)
 *   2. FontAwesome 4.5                             (usertemplate/assets/font-awesome)
 *   3. Legacy QDOCS form-elements.css + style.css   (usertemplate/assets/css)
 *   4. Lesticom Default Login Skin                 (this file, served at /login.css)
 *   5. Per-school custom_login_css                 (Theme controller appends)
 */

/* ============================================================
   Brand tokens (Lesticom default)
   ============================================================ */
:root {
    --lesticom-primary:        #384BFF;
    --lesticom-primary-hover:  #2A38D9;
    --lesticom-secondary:      #18185E;
    --lesticom-accent:         #F98600;
    --lesticom-header:         #0F0D1D;
    --lesticom-text:           #585858;
    --lesticom-text-muted:     #8A8A95;
    --lesticom-border:         #E3E3E3;
    --lesticom-surface:        #FFFFFF;
    --lesticom-radius:         10px;
    --lesticom-radius-lg:      14px;
    --lesticom-shadow:         0 10px 30px rgba(15, 13, 29, 0.12);
    --lesticom-font-heading:   'Rajdhani', 'Helvetica Neue', sans-serif;
    --lesticom-font-body:      'Plus Jakarta Sans', 'Source Sans Pro', sans-serif;
}

/* ============================================================
   Page background — Lesticom gradient
   ============================================================ */
body {
    font-family: var(--lesticom-font-body);
    color: var(--lesticom-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.top-content {
    min-height: 100vh;
    width: 100%;
    background:
        radial-gradient(ellipse at top right, rgba(56, 75, 255, 0.40) 0%, transparent 50%),
        radial-gradient(ellipse at bottom left, rgba(249, 134, 0, 0.20) 0%, transparent 50%),
        linear-gradient(135deg, #18185E 0%, #0F0D1D 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.top-content .inner-bg {
    width: 100%;
    max-width: 1100px;
}

/* ============================================================
   Login card (left column)
   ============================================================ */
.loginbg {
    max-width: 420px;
    margin: 0 auto;
    background: var(--lesticom-surface);
    border-radius: var(--lesticom-radius-lg);
    box-shadow: var(--lesticom-shadow);
    overflow: hidden;
}

.form-top {
    background: var(--lesticom-surface);
    padding: 32px 32px 12px;
    text-align: left;
}
.form-top-left {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 0 12px 0;
}
.form-top-left img {
    max-width: 180px;
    max-height: 60px;
    width: auto;
    height: auto;
}

.form-bottom {
    background: var(--lesticom-surface);
    padding: 12px 32px 32px;
    text-align: left;
}

.font-white {
    color: var(--lesticom-header);
    font-family: var(--lesticom-font-heading);
    font-weight: 700;
    font-size: 22px;
    margin: 0 0 20px;
    text-align: center;
}

/* ============================================================
   Form fields (override form-elements.css completely)
   ============================================================ */
.form-bottom .form-group {
    margin-bottom: 16px;
    position: relative;
}
.form-control,
input[type="text"],
input[type="password"] {
    height: 50px;
    margin: 0;
    padding: 0 20px 0 48px;
    background: #fff;
    border: 1px solid var(--lesticom-border) !important;
    border-radius: var(--lesticom-radius);
    font-family: var(--lesticom-font-body);
    font-size: 15px;
    font-weight: 400;
    color: var(--lesticom-text);
    box-shadow: none;
    -webkit-transition: border-color 0.2s, box-shadow 0.2s;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.form-control::-webkit-input-placeholder,
input[type="text"]::-webkit-input-placeholder,
input[type="password"]::-webkit-input-placeholder {
    color: var(--lesticom-text-muted);
}
.form-control:focus,
input[type="text"]:focus,
input[type="password"]:focus {
    background: #fff;
    border-color: var(--lesticom-primary) !important;
    box-shadow: 0 0 0 4px rgba(56, 75, 255, 0.12);
    outline: 0;
}
.has-feedback .form-control {
    padding-right: 20px;
}

/* Floating feedback icon (envelope / lock) */
.form-control-feedback {
    position: absolute;
    top: 0;
    left: 0;
    width: 48px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    pointer-events: none;
    color: var(--lesticom-text-muted);
    z-index: 2;
}
.has-feedback:focus .form-control-feedback {
    color: var(--lesticom-primary);
}

/* ============================================================
   Submit button
   ============================================================ */
button.btn,
.form-bottom form button.btn {
    width: 100%;
    height: 50px;
    line-height: 50px;
    background: var(--lesticom-primary);
    color: #fff;
    border: 0;
    border-radius: var(--lesticom-radius);
    font-family: var(--lesticom-font-body);
    font-weight: 600;
    font-size: 15px;
    text-transform: none;
    box-shadow: 0 6px 18px rgba(56, 75, 255, 0.30);
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    margin-top: 8px;
}
button.btn:hover,
button.btn:focus,
.form-bottom form button.btn:hover,
.form-bottom form button.btn:focus {
    background: var(--lesticom-primary-hover);
    color: #fff;
    box-shadow: 0 8px 22px rgba(56, 75, 255, 0.40);
    opacity: 1;
    outline: 0;
}
button.btn:active {
    transform: translateY(1px);
    box-shadow: 0 4px 14px rgba(56, 75, 255, 0.25);
}

/* ============================================================
   Forgot password link
   ============================================================ */
a.forgot {
    display: block;
    text-align: center;
    color: var(--lesticom-text-muted);
    font-size: 13px;
    font-weight: 500;
    margin-top: 16px;
    text-decoration: none;
    transition: color 0.2s;
}
a.forgot i { margin-right: 4px; }
a.forgot:hover {
    color: var(--lesticom-primary);
    text-decoration: none;
}

/* ============================================================
   Alerts
   ============================================================ */
.loginbg .alert {
    border-radius: var(--lesticom-radius);
    padding: 10px 16px;
    font-size: 13px;
    margin-bottom: 16px;
    border: 1px solid transparent;
}
.loginbg .alert-danger {
    background: rgba(220, 38, 38, 0.08);
    color: #7F1D1D;
    border-color: rgba(220, 38, 38, 0.30);
}
.loginbg .alert-success {
    background: rgba(22, 163, 74, 0.10);
    color: #14532D;
    border-color: rgba(22, 163, 74, 0.30);
}
.loginbg .text-danger {
    color: var(--lesticom-danger, #DC2626);
    font-size: 12px;
    margin-top: 4px;
    display: block;
}

/* ============================================================
   Captcha block
   ============================================================ */
.catpcha {
    cursor: pointer;
    color: var(--lesticom-primary);
    margin-left: 8px;
    font-size: 18px;
    line-height: 50px;
    transition: color 0.2s;
}
.catpcha:hover { color: var(--lesticom-primary-hover); }
#captcha_image img { border-radius: var(--lesticom-radius-sm, 4px); }

/* ============================================================
   Right column (hero / branding) — Lesticom-styled
   ============================================================ */
.text-wrap {
    height: 100%;
    min-height: 480px;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 0 60px;
    background:
        radial-gradient(ellipse at center, rgba(56, 75, 255, 0.20) 0%, transparent 60%);
    position: relative;
}
.text-wrap h1,
.text-wrap h2,
.text-wrap h3 {
    color: #fff;
    font-family: var(--lesticom-font-heading);
    font-weight: 700;
    text-align: left;
    margin-bottom: 16px;
}
.text-wrap h1 { font-size: 36px; line-height: 1.2; }
.text-wrap h2 { font-size: 26px; line-height: 1.3; }
.text-wrap h3 { font-size: 18px; line-height: 1.4; font-weight: 500; }
.text-wrap p {
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
    line-height: 1.7;
    text-align: left;
    word-break: normal;
}
.text-wrap .logdivider {
    background: rgba(255, 255, 255, 0.30);
    width: 60px;
    height: 3px;
    margin: 18px 0;
    border: 0;
    border-radius: 2px;
}

.loginright {
    background: rgba(15, 13, 29, 0.30);
    border-radius: var(--lesticom-radius-lg);
    padding: 24px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.loginright h3 { color: #fff; font-family: var(--lesticom-font-heading); }
.loginright h4 { color: rgba(255, 255, 255, 0.85); font-weight: 400; }
.loginright p { color: rgba(255, 255, 255, 0.75); }

a.more {
    color: var(--lesticom-accent) !important;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    margin-top: 8px;
}
a.more:hover { color: #fff !important; }

.bg-shadow-remove::after {
    background: rgba(15, 13, 29, 0.40);
}

/* ============================================================
   Background image (if school uploads one in Custom Branding v2)
   ============================================================ */
.bg-position-lg-center,
.bg-position-sm-left {
    background-size: cover;
    background-position: center;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 991px) {
    .text-wrap {
        padding: 40px 30px;
        min-height: 280px;
    }
    .text-wrap h1 { font-size: 28px; }
    .text-wrap h2 { font-size: 22px; }
}
@media (max-width: 767px) {
    .top-content { padding: 16px; }
    .loginbg { max-width: 100%; }
    .form-top, .form-bottom { padding-left: 22px; padding-right: 22px; }
    .text-wrap { padding: 30px 22px; min-height: 220px; }
    .text-wrap h1 { font-size: 24px; }
}

:root {
    --bs-primary: #7367f0;
    --bs-btn-border-color: #7367f0;
    --bs-primary-hover: #7367f0;
    --bs-hover-color: #7367f0;
    --bs-alert-bg: #7367f0;
    --custom-hover-theme: #7367f0;
    --bs-primary-contrast: #fff;
    --lesticom-primary: #384BFF;
    --lesticom-primary-hover: #384BFF;
    --lesticom-secondary: #18185E;
    --lesticom-secondary-hover: #18185E;
    --lesticom-accent: #F98600;
    --lesticom-accent-hover: #F98600;
    --lesticom-bg: #F3F7FB;
    --brand-name: "Reekworth Schools";
}