/* =========================================================
   LOGOVARO
   Main application stylesheet
   ========================================================= */


/* ---------- GLOBAL RESET ---------- */

/* Make element sizing predictable */
* {
    box-sizing: border-box;
}

/* Remove default browser spacing */
html,
body {
    margin: 0;
    padding: 0;
}


/* ---------- BODY ---------- */

body {
    /* Modern system font stack */
    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    /* Soft application background */
    background: #f7f9fc;

    /* Main text colour */
    color: #172033;

    /* Improve readability */
    line-height: 1.6;
}


/* ---------- LINKS ---------- */

a {
    /* Remove standard underline */
    text-decoration: none;

    /* Use surrounding text colour by default */
    color: inherit;
}


/* ---------- HEADER ---------- */

.site-header {
    /* White navigation bar */
    background: #ffffff;

    /* Subtle divider */
    border-bottom: 1px solid #e7ebf2;
}


/* Container for logo and navigation */
.nav-container {
    /* Maximum width of page content */
    max-width: 1200px;

    /* Centre it */
    margin: 0 auto;

    /* Space inside header */
    padding: 18px 24px;

    /* Horizontal layout */
    display: flex;

    /* Logo left, navigation right */
    justify-content: space-between;

    /* Vertically align items */
    align-items: center;
}


/* ---------- LOGOVARO BRAND ---------- */

.brand {
    font-size: 1.55rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #111827;
}

/* Accent part of the logo */
.brand-accent {
    color: #635bff;
}


/* ---------- NAVIGATION ---------- */

.main-nav {
    display: flex;
    align-items: center;
    gap: 28px;
}

.main-nav a {
    color: #596176;
    font-size: 0.95rem;
    font-weight: 600;

    /* Smooth hover transition */
    transition: color 0.2s ease;
}

.main-nav a:hover {
    color: #111827;
}


/* ---------- GET STARTED BUTTON ---------- */

.nav-button {
    padding: 10px 18px;

    border-radius: 10px;

    background: #111827;

    color: #ffffff !important;

    transition:
        transform 0.2s ease,
        opacity 0.2s ease;
}

.nav-button:hover {
    /* Small premium-looking movement */
    transform: translateY(-1px);

    opacity: 0.9;
}


/* ---------- MAIN CONTENT ---------- */

.site-main {
    max-width: 1200px;

    margin: 0 auto;

    padding: 64px 24px;
}


/* ---------- FOOTER ---------- */

.site-footer {
    border-top: 1px solid #e7ebf2;

    background: #ffffff;

    color: #72798b;

    text-align: center;

    padding: 28px 24px;

    font-size: 0.9rem;
}

/* =========================================================
   10. HOMEPAGE HERO
   ========================================================= */

.hero {
    min-height: 560px;

    display: grid;

    grid-template-columns: 1.05fr 0.95fr;

    align-items: center;

    gap: 70px;
}


/* ---------- HERO TEXT ---------- */

.hero-content {
    max-width: 650px;
}


.hero-badge {
    display: inline-block;

    margin-bottom: 22px;

    padding: 7px 13px;

    border: 1px solid #dddffd;

    border-radius: 999px;

    background: #f0efff;

    color: #635bff;

    font-size: 0.8rem;

    font-weight: 700;

    letter-spacing: 0.04em;
}


.hero-title {
    margin: 0 0 24px;

    font-size: clamp(3rem, 6vw, 5.4rem);

    line-height: 0.98;

    letter-spacing: -0.055em;

    color: #111827;
}


.hero-title span {
    color: #635bff;
}


.hero-description {
    max-width: 590px;

    margin: 0 0 32px;

    color: #667085;

    font-size: 1.15rem;

    line-height: 1.8;
}


/* ---------- HERO BUTTONS ---------- */

.hero-actions {
    display: flex;

    gap: 14px;

    align-items: center;
}


.button {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 48px;

    padding: 0 22px;

    border-radius: 11px;

    font-weight: 700;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


.button:hover {
    transform: translateY(-2px);
}


.button-primary {
    background: #635bff;

    color: #ffffff;

    box-shadow: 0 10px 30px rgba(99, 91, 255, 0.23);
}


.button-secondary {
    border: 1px solid #d9dee9;

    background: #ffffff;

    color: #202939;
}


/* ---------- HERO VISUAL ---------- */

.hero-visual {
    display: flex;

    justify-content: center;

    align-items: center;
}


.hero-card {
    width: 100%;

    max-width: 500px;

    overflow: hidden;

    border: 1px solid #e3e7ef;

    border-radius: 24px;

    background: #ffffff;

    box-shadow:
        0 30px 70px rgba(15, 23, 42, 0.10);
}


.hero-card-top {
    display: flex;

    gap: 7px;

    padding: 18px;

    border-bottom: 1px solid #edf0f5;

    background: #fafbfc;
}


.hero-card-top span {
    width: 10px;

    height: 10px;

    border-radius: 50%;

    background: #d7dce5;
}


.hero-card-content {
    padding: 42px;
}


.hero-icon {
    width: 54px;

    height: 54px;

    display: grid;

    place-items: center;

    margin-bottom: 25px;

    border-radius: 15px;

    background: #635bff;

    color: #ffffff;

    font-size: 1.5rem;
}


.hero-card-content h2 {
    margin: 0 0 12px;

    font-size: 1.65rem;

    letter-spacing: -0.03em;
}


.hero-card-content > p {
    margin: 0 0 30px;

    color: #70798d;
}


.hero-stats {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 10px;
}


.hero-stats div {
    padding: 16px;

    border-radius: 13px;

    background: #f7f8fb;
}


.hero-stats strong,
.hero-stats span {
    display: block;
}


.hero-stats strong {
    margin-bottom: 3px;

    font-size: 0.9rem;
}


.hero-stats span {
    color: #8a92a3;

    font-size: 0.75rem;
}


/* =========================================================
   11. RESPONSIVE HERO
   ========================================================= */

@media (max-width: 850px) {

    .hero {
        grid-template-columns: 1fr;

        padding-top: 30px;

        padding-bottom: 30px;
    }


    .hero-title {
        font-size: clamp(2.7rem, 12vw, 4.5rem);
    }


    .hero-visual {
        margin-top: 15px;
    }

}


@media (max-width: 600px) {

    .main-nav {
        gap: 14px;
    }


    .main-nav > a:first-child {
        display: none;
    }


    .hero-actions {
        align-items: stretch;

        flex-direction: column;
    }


    .button {
        width: 100%;
    }


    .hero-card-content {
        padding: 28px;
    }


    .hero-stats {
        grid-template-columns: 1fr;
    }

}

/* =========================================================
   12. FEATURES SECTION
   ========================================================= */

.features {

    /*
       Give the section breathing room.
    */
    padding: 100px 0 40px;
}


/* ---------- FEATURES INTRODUCTION ---------- */

.features-heading {

    /*
       Limit text width so long sentences
       remain easy to read.
    */
    max-width: 720px;

    /*
       Space underneath before the cards.
    */
    margin-bottom: 48px;
}


.section-label {

    display: inline-block;

    margin-bottom: 16px;

    color: #635bff;

    font-size: 0.8rem;

    font-weight: 800;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}


.features-heading h2 {

    margin: 0 0 18px;

    color: #111827;

    font-size: clamp(2rem, 4vw, 3.3rem);

    line-height: 1.1;

    letter-spacing: -0.045em;
}


.features-heading p {

    margin: 0;

    color: #697386;

    font-size: 1.05rem;

    line-height: 1.8;
}


/* ---------- FEATURE GRID ---------- */

.feature-grid {

    /*
       Three equal columns on desktop.
    */
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 22px;
}


/* ---------- INDIVIDUAL FEATURE CARD ---------- */

.feature-card {

    position: relative;

    padding: 32px;

    border: 1px solid #e4e8f0;

    border-radius: 20px;

    background: #ffffff;

    /*
       Smooth movement when hovering.
    */
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}


.feature-card:hover {

    /*
       Lift the card slightly.
    */
    transform: translateY(-5px);

    border-color: #d9d6ff;

    box-shadow:
        0 24px 50px rgba(15, 23, 42, 0.08);
}


/* ---------- FEATURE ICON ---------- */

.feature-icon {

    width: 48px;

    height: 48px;

    display: grid;

    place-items: center;

    margin-bottom: 28px;

    border-radius: 13px;

    background: #f0efff;

    color: #635bff;

    font-size: 1.1rem;

    font-weight: 800;
}


/* ---------- FEATURE TEXT ---------- */

.feature-card h3 {

    margin: 0 0 12px;

    color: #111827;

    font-size: 1.35rem;

    letter-spacing: -0.025em;
}


.feature-card p {

    margin: 0 0 26px;

    color: #70798d;

    line-height: 1.75;
}


.feature-link {

    color: #635bff;

    font-size: 0.86rem;

    font-weight: 700;
}


/* =========================================================
   13. RESPONSIVE FEATURES
   ========================================================= */

@media (max-width: 850px) {

    /*
       Change from three columns to one
       on tablets and smaller screens.
    */
    .feature-grid {
        grid-template-columns: 1fr;
    }


    .features {
        padding-top: 70px;
    }

}

/* =========================================================
   14. AUTHENTICATION PAGES
   ========================================================= */

.auth-page {
    min-height: 620px;

    display: flex;

    justify-content: center;

    align-items: center;
}


.auth-card {
    width: 100%;

    max-width: 480px;

    padding: 42px;

    border: 1px solid #e4e8f0;

    border-radius: 22px;

    background: #ffffff;

    box-shadow:
        0 30px 70px rgba(15, 23, 42, 0.08);
}


.auth-header {
    margin-bottom: 32px;
}


.auth-header h1 {
    margin: 0 0 12px;

    color: #111827;

    font-size: 2rem;

    letter-spacing: -0.035em;
}


.auth-header p {
    margin: 0;

    color: #70798d;

    line-height: 1.7;
}


/* ---------- FORM ---------- */

.auth-form {
    display: flex;

    flex-direction: column;

    gap: 20px;
}


.form-group {
    display: flex;

    flex-direction: column;

    gap: 8px;
}


.form-group label {
    color: #263041;

    font-size: 0.9rem;

    font-weight: 700;
}


.form-group input {
    width: 100%;

    padding: 14px 15px;

    border: 1px solid #d9dee9;

    border-radius: 10px;

    background: #ffffff;

    color: #172033;

    font: inherit;

    outline: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


.form-group input:focus {
    border-color: #635bff;

    box-shadow:
        0 0 0 4px rgba(99, 91, 255, 0.10);
}


.auth-submit {
    width: 100%;

    border: 0;

    cursor: pointer;

    font: inherit;
}


/* ---------- AUTH FOOTER ---------- */

.auth-footer {
    margin-top: 26px;

    padding-top: 22px;

    border-top: 1px solid #edf0f5;

    text-align: center;
}


.auth-footer p {
    margin: 0;

    color: #72798b;

    font-size: 0.9rem;
}


.auth-footer a {
    color: #635bff;

    font-weight: 700;
}

/* =========================================================
   15. APPLICATION DASHBOARDS
   ========================================================= */

/*
    Shared design for the authenticated areas:

    Student
    Teacher
    Manager
    Owner
*/
.dashboard,
.teacher-dashboard,
.manager-dashboard,
.owner-dashboard {
    width: 100%;

    padding: 38px;

    border: 1px solid #e4e8f0;

    border-radius: 24px;

    background: #ffffff;

    box-shadow:
        0 24px 60px rgba(15, 23, 42, 0.06);
}


/* ---------- DASHBOARD HEADINGS ---------- */

.dashboard h1,
.teacher-dashboard h1,
.manager-dashboard h1,
.owner-dashboard h1 {
    margin: 0 0 28px;

    color: #111827;

    font-size: clamp(2rem, 4vw, 2.8rem);

    line-height: 1.1;

    letter-spacing: -0.04em;
}


/* ---------- DASHBOARD TEXT ---------- */

.dashboard > p,
.teacher-dashboard > p,
.manager-dashboard > p,
.owner-dashboard > p {
    margin: 0 0 14px;

    color: #596176;

    font-size: 1rem;
}


/* =========================================================
   16. OWNER SUCCESS MESSAGE
   ========================================================= */

/*
    When a flash success message exists,
    it becomes the first item inside
    the Owner Dashboard.
*/
.owner-dashboard > p:first-child {
    margin: 0 0 30px;

    padding: 14px 16px;

    border: 1px solid #b7e4c7;

    border-radius: 12px;

    background: #eefbf3;

    color: #166534;

    font-weight: 700;
}


/* =========================================================
   17. OWNER USER MANAGEMENT
   ========================================================= */

.user-management {
    margin-top: 40px;

    padding-top: 32px;

    border-top: 1px solid #edf0f5;
}


.user-management h2 {
    margin: 0 0 8px;

    color: #111827;

    font-size: 1.6rem;

    letter-spacing: -0.03em;
}


.user-management > p {
    margin: 0 0 24px;

    color: #72798b;
}


/* =========================================================
   18. USER MANAGEMENT TABLE
   ========================================================= */

.user-management table {
    width: 100%;

    border-collapse: separate;

    border-spacing: 0;

    overflow: hidden;

    border: 1px solid #e4e8f0;

    border-radius: 16px;

    background: #ffffff;
}


/* Table heading */

.user-management thead {
    background: #f7f8fb;
}


.user-management th {
    padding: 14px 18px;

    border-bottom: 1px solid #e4e8f0;

    color: #596176;

    text-align: left;

    font-size: 0.78rem;

    font-weight: 800;

    letter-spacing: 0.05em;

    text-transform: uppercase;
}


/* Table data */

.user-management td {
    padding: 17px 18px;

    border-bottom: 1px solid #edf0f5;

    color: #263041;

    vertical-align: middle;

    font-size: 0.94rem;
}


.user-management tbody tr:last-child td {
    border-bottom: 0;
}


/* Highlight a user row slightly on hover */

.user-management tbody tr {
    transition: background 0.2s ease;
}


.user-management tbody tr:hover {
    background: #fafbff;
}


/* =========================================================
   19. ROLE MANAGEMENT
   ========================================================= */

/*
    Keep the role dropdown and button
    neatly aligned.
*/
.user-management td form {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin: 0;
}


/* Role dropdown */

.user-management select {
    min-width: 120px;

    height: 39px;

    padding: 0 34px 0 11px;

    border: 1px solid #d9dee9;

    border-radius: 9px;

    background: #ffffff;

    color: #263041;

    font: inherit;

    font-size: 0.88rem;

    font-weight: 600;

    outline: none;

    cursor: pointer;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


.user-management select:hover {
    border-color: #bfc6d4;
}


.user-management select:focus {
    border-color: #635bff;

    box-shadow:
        0 0 0 4px rgba(99, 91, 255, 0.10);
}


/* =========================================================
   20. USER MANAGEMENT BUTTONS
   ========================================================= */

.user-management button {
    min-height: 39px;

    padding: 0 14px;

    border: 0;

    border-radius: 9px;

    background: #111827;

    color: #ffffff;

    font: inherit;

    font-size: 0.84rem;

    font-weight: 700;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        opacity 0.2s ease,
        box-shadow 0.2s ease;
}


.user-management button:hover {
    transform: translateY(-1px);

    opacity: 0.92;

    box-shadow:
        0 8px 18px rgba(17, 24, 39, 0.14);
}


/* =========================================================
   21. ACCOUNT STATUS
   ========================================================= */

/*
    Current status text:
    Active / Inactive
*/
.user-management td:nth-child(4) > p {
    display: inline-flex;

    align-items: center;

    margin: 0 0 9px;

    padding: 5px 10px;

    border-radius: 999px;

    font-size: 0.78rem;

    font-weight: 800;
}


/*
    If the form contains:

    is_active = 0

    then the user is currently ACTIVE
    because pressing the button will
    change them to inactive.
*/
.user-management td:nth-child(4):has(
    input[name="is_active"][value="0"]
) > p {
    background: #eefbf3;

    color: #166534;
}


/*
    If the form contains:

    is_active = 1

    then the user is currently INACTIVE
    because pressing the button will
    reactivate them.
*/
.user-management td:nth-child(4):has(
    input[name="is_active"][value="1"]
) > p {
    background: #fff1f2;

    color: #be123c;
}


/* ---------- DEACTIVATE BUTTON ---------- */

.user-management td:nth-child(4):has(
    input[name="is_active"][value="0"]
) button {
    border: 1px solid #fecdd3;

    background: #fff1f2;

    color: #be123c;
}


/* ---------- ACTIVATE BUTTON ---------- */

.user-management td:nth-child(4):has(
    input[name="is_active"][value="1"]
) button {
    border: 1px solid #bbf7d0;

    background: #eefbf3;

    color: #166534;
}


/* =========================================================
   22. OWNER LABEL
   ========================================================= */

.user-management strong {
    color: #635bff;

    font-size: 0.84rem;
}


/* =========================================================
   23. DASHBOARD RESPONSIVE DESIGN
   ========================================================= */

@media (max-width: 900px) {

    .dashboard,
    .teacher-dashboard,
    .manager-dashboard,
    .owner-dashboard {
        padding: 28px;
    }


    /*
        Allow the table to scroll sideways
        instead of destroying the mobile layout.
    */
    .user-management {
        overflow-x: auto;
    }


    .user-management table {
        min-width: 820px;
    }

}


@media (max-width: 600px) {

    .site-main {
        padding: 36px 16px;
    }


    .dashboard,
    .teacher-dashboard,
    .manager-dashboard,
    .owner-dashboard {
        padding: 22px;

        border-radius: 18px;
    }


    .dashboard h1,
    .teacher-dashboard h1,
    .manager-dashboard h1,
    .owner-dashboard h1 {
        font-size: 1.9rem;
    }


    .user-management {
        margin-top: 30px;

        padding-top: 26px;
    }


    .user-management th,
    .user-management td {
        padding: 13px 14px;
    }

}


/* =========================================================
   24. ACCESSIBILITY
   ========================================================= */

/*
    Clear keyboard-focus indicator.
*/
a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible {
    outline: 3px solid rgba(99, 91, 255, 0.28);

    outline-offset: 3px;
}


/*
    Reduce animations for users who
    request reduced motion.
*/
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;

        transition-duration: 0.01ms !important;

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;
    }

}