* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Segoe UI", Arial, sans-serif;
    background: #f4f7fb;
    color: #10213f;
}

button,
input {
    font-family: inherit;
}


/* ================================
   MAIN LOGIN PAGE
================================ */

.login-page {
    width: 100%;
    min-height: 100vh;
    display: flex;
    background: #ffffff;
}


/* ================================
   LEFT LOGIN PANEL
================================ */

.login-panel {
    width: 52%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    background: #ffffff;
}

.login-content {
    width: 100%;
    max-width: 430px;
}


/* ================================
   BRAND
================================ */

.brand {
    text-align: center;
    margin-bottom: 35px;
}

.brand-icon {
    width: 75px;
    height: 75px;
    margin: 0 auto 12px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 42px;

    color: #ffffff;
    background: linear-gradient(
        135deg,
        #1268df,
        #0849a9
    );

    border-radius: 18px;

    box-shadow:
        0 12px 30px rgba(18, 104, 223, 0.22);
}

.brand h1 {
    font-size: 31px;
    font-weight: 750;
    color: #102b55;
    letter-spacing: -0.8px;
}

.brand p {
    margin-top: 5px;
    font-size: 13px;
    color: #6d7890;
}


/* ================================
   WELCOME
================================ */

.welcome {
    text-align: center;
    margin-bottom: 25px;
}

.welcome h2 {
    font-size: 21px;
    color: #172b4d;
    margin-bottom: 7px;
}

.welcome p {
    font-size: 13px;
    color: #7a8498;
}


/* ================================
   FORM
================================ */

.input-group {
    margin-bottom: 17px;
}

.input-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #263b5d;
    margin-bottom: 8px;
}

.input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.input-icon {
    position: absolute;
    left: 15px;
    color: #53627a;
    font-size: 15px;
    z-index: 2;
}

.input-wrapper input {
    width: 100%;
    height: 49px;

    border: 1px solid #dbe2ec;
    border-radius: 7px;

    background: #ffffff;

    padding: 0 45px;

    outline: none;

    font-size: 13px;
    color: #172b4d;

    transition: 0.2s;
}

.input-wrapper input::placeholder {
    color: #9aa4b5;
}

.input-wrapper input:focus {
    border-color: #1769df;

    box-shadow:
        0 0 0 3px rgba(23, 105, 223, 0.09);
}

.password-toggle {
    position: absolute;
    right: 13px;

    border: none;
    background: transparent;

    cursor: pointer;

    font-size: 15px;
    color: #66748a;
}


/* ================================
   FORGOT PASSWORD
================================ */

.forgot-row {
    text-align: right;
    margin-top: -5px;
    margin-bottom: 18px;
}

.forgot-row a {
    text-decoration: none;
    color: #145fc4;
    font-size: 12px;
    font-weight: 600;
}

.forgot-row a:hover {
    text-decoration: underline;
}


/* ================================
   SIGN IN
================================ */

.sign-in-btn {
    width: 100%;
    height: 49px;

    border: none;
    border-radius: 7px;

    color: white;

    background: linear-gradient(
        90deg,
        #176be4,
        #0754c9
    );

    font-size: 14px;
    font-weight: 650;

    cursor: pointer;

    box-shadow:
        0 8px 18px rgba(15, 98, 214, 0.18);

    transition: 0.2s;
}

.sign-in-btn:hover {
    transform: translateY(-1px);

    box-shadow:
        0 10px 22px rgba(15, 98, 214, 0.25);
}

.sign-in-btn:active {
    transform: translateY(0);
}


/* ================================
   OR DIVIDER
================================ */

.or-divider {
    display: flex;
    align-items: center;
    gap: 12px;

    margin: 20px 0;
}

.or-divider span {
    flex: 1;
    height: 1px;
    background: #e4e8ef;
}

.or-divider p {
    font-size: 12px;
    color: #8993a5;
}


/* ================================
   GOOGLE BUTTON
================================ */

.google-btn {
    width: 100%;
    height: 47px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    border: 1px solid #dce3ed;
    border-radius: 7px;

    background: #ffffff;

    color: #35445d;

    font-size: 13px;
    font-weight: 600;

    cursor: pointer;

    transition: 0.2s;
}

.google-btn:hover {
    background: #f8fafc;
    border-color: #c9d3e1;
}

.google-icon {
    width: 22px;
    height: 22px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 18px;
    font-weight: 700;

    color: #4285f4;
}


/* ================================
   FOOTER
================================ */

.login-footer {
    text-align: center;

    margin-top: 42px;

    color: #8993a5;
    font-size: 11px;
}


/* ================================
   RIGHT BRANDING PANEL
================================ */

.branding-panel {
    width: 48%;
    min-height: 100vh;

    position: relative;

    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    background: linear-gradient(
        145deg,
        #0758c9,
        #0343a0
    );
}

.branding-content {
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    text-align: center;

    padding: 40px;
}


/* ================================
   BRANDING TEXT
================================ */

.branding-logo {
    width: 65px;
    height: 65px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 38px;

    margin-bottom: 20px;

    background: rgba(255, 255, 255, 0.12);

    border-radius: 16px;
}

.branding-content h2 {
    color: white;
    font-size: 25px;
    font-weight: 700;
    line-height: 1.2;
}

.branding-content p {
    color: rgba(255, 255, 255, 0.82);

    font-size: 13px;

    margin-top: 13px;
}


/* ================================
   SCHOOL ILLUSTRATION
================================ */

.school-building {
    position: relative;

    width: 360px;
    height: 285px;

    margin-top: 45px;
}


/* Roof */

.roof {
    position: absolute;

    left: 35px;
    top: 25px;

    width: 290px;
    height: 85px;

    background: #c86c3a;

    clip-path: polygon(
        50% 0%,
        100% 100%,
        0% 100%
    );
}


/* Main building */

.building {
    position: absolute;

    left: 65px;
    top: 88px;

    width: 230px;
    height: 165px;

    background: #f2b56e;

    border: 5px solid #8b4d2d;
}


/* Building top */

.building-top {
    height: 35px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #f7d394;

    color: #68412d;

    font-size: 11px;
    font-weight: 800;
}


/* Windows */

.windows {
    height: 125px;

    display: grid;

    grid-template-columns:
        1fr 1fr 1fr;

    grid-template-rows:
        1fr 1fr;

    gap: 12px;

    padding: 15px;
}

.window {
    background: #5da3d8;

    border: 4px solid #70452d;

    box-shadow:
        inset 0 0 0 2px #d6e9f7;
}


/* Door */

.door {
    background: #70452d;

    border: 3px solid #563322;

    border-radius: 4px 4px 0 0;
}


/* Ground */

.ground {
    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 20px;

    background: rgba(255, 255, 255, 0.2);

    border-radius: 50%;
}


/* ================================
   RESPONSIVE
================================ */

@media (max-width: 900px) {

    .login-page {
        flex-direction: column;
    }

    .login-panel {
        width: 100%;
        min-height: 100vh;
    }

    .branding-panel {
        display: none;
    }

}

@media (max-width: 500px) {

    .login-panel {
        padding: 25px 20px;
    }

    .brand h1 {
        font-size: 27px;
    }

    .welcome h2 {
        font-size: 19px;
    }

}


/* =========================================================
   SUPER ADMIN DASHBOARD
   ========================================================= */

.dashboard {
    min-height: 100vh;
    display: flex;
    background: #f5f7fb;
}


/* ================= SIDEBAR ================= */

.sidebar {
    width: 235px;
    min-height: 100vh;
    background: linear-gradient(
        180deg,
        #071d43 0%,
        #03142f 100%
    );
    color: white;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 20;
}

.brand {
    height: 76px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 0 20px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.brand-icon {
    width: 38px;
    height: 38px;
    background: #0866d8;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.brand-name {
    font-size: 18px;
    font-weight: 700;
}

.brand-subtitle {
    font-size: 9px;
    opacity: .65;
    margin-top: 2px;
}

.sidebar-menu {
    padding: 20px 12px;
}

.menu-section {
    font-size: 9px;
    letter-spacing: 1px;
    color: #7184a5;
    padding: 12px 12px 8px;
}

.menu-item {
    height: 42px;
    padding: 0 13px;
    margin: 3px 0;
    border-radius: 7px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #d7e1f1;
    text-decoration: none;
    font-size: 12px;
    transition: .2s;
}

.menu-item span {
    width: 18px;
    text-align: center;
}

.menu-item:hover {
    background: rgba(255,255,255,.08);
    color: white;
}

.menu-item.active {
    background: #0866d8;
    color: white;
    box-shadow: 0 5px 15px rgba(0,102,216,.25);
}

.menu-item.logout {
    margin-top: 15px;
    color: #ffb9b9;
}


/* ================= MAIN ================= */

.main-content {
    width: calc(100% - 235px);
    margin-left: 235px;
    padding: 0 25px 35px;
}


/* ================= HEADER ================= */

.dashboard-header {
    height: 76px;
    background: white;
    margin: 0 -25px;
    padding: 0 25px;
    border-bottom: 1px solid #e7ebf2;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 15px;
}

.dashboard-header h1 {
    font-size: 18px;
    color: #17233c;
}

.dashboard-header p {
    font-size: 11px;
    color: #8994a7;
    margin-top: 4px;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 15px;
}

.header-icon {
    width: 35px;
    height: 35px;
    border: none;
    background: transparent;
    cursor: pointer;
    position: relative;
}

.notification span {
    position: absolute;
    width: 7px;
    height: 7px;
    background: #ef4444;
    border: 2px solid white;
    border-radius: 50%;
    right: 5px;
    top: 5px;
}

.admin-profile {
    display: flex;
    align-items: center;
    gap: 9px;
    border-left: 1px solid #e5e9f0;
    padding-left: 15px;
}

.profile-avatar {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: #e7f0ff;
    color: #0866d8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
}

.profile-info {
    display: flex;
    flex-direction: column;
}

.profile-info strong {
    font-size: 11px;
}

.profile-info small {
    font-size: 9px;
    color: #8994a7;
}

.mobile-menu {
    display: none;
}


/* ================= TOOLBAR ================= */

.dashboard-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 22px 0 17px;
}

.welcome-text {
    color: #53627a;
    font-size: 12px;
}

.date-button {
    background: white;
    border: 1px solid #dce2eb;
    border-radius: 6px;
    padding: 9px 13px;
    color: #344054;
    font-size: 11px;
    cursor: pointer;
}

.date-button span {
    margin-left: 15px;
}


/* ================= STAT CARDS ================= */

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-bottom: 15px;
}

.stat-card {
    background: white;
    border: 1px solid #e5eaf1;
    border-radius: 9px;
    padding: 18px;
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 105px;
}

.stat-icon {
    width: 43px;
    height: 43px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.stat-icon.blue,
.ticket-icon.blue,
.quick-icon.blue {
    background: #e8f1ff;
    color: #0866d8;
}

.stat-icon.green,
.ticket-icon.green,
.quick-icon.green {
    background: #e7f8ef;
    color: #12a15a;
}

.stat-icon.purple,
.ticket-icon.purple,
.quick-icon.purple {
    background: #f0eaff;
    color: #7047d9;
}

.stat-icon.orange,
.ticket-icon.orange,
.quick-icon.orange {
    background: #fff1e4;
    color: #ef851d;
}

.stat-content {
    display: flex;
    flex-direction: column;
}

.stat-content span {
    font-size: 10px;
    color: #7c8799;
}

.stat-content strong {
    font-size: 20px;
    margin: 5px 0;
    color: #18243b;
}

.stat-content small {
    font-size: 9px;
}

.positive {
    color: #12a15a;
}


/* ================= DASHBOARD CARDS ================= */

.dashboard-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 15px;
    margin-bottom: 15px;
}

.dashboard-card {
    background: white;
    border: 1px solid #e5eaf1;
    border-radius: 9px;
    padding: 17px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 18px;
}

.card-header h2 {
    font-size: 12px;
    color: #18243b;
}

.card-header p {
    color: #8b95a7;
    font-size: 9px;
    margin-top: 4px;
}

.card-header select {
    border: 1px solid #dce2eb;
    border-radius: 5px;
    padding: 6px 9px;
    font-size: 9px;
    color: #53627a;
}


/* ================= CHART ================= */

.chart {
    height: 190px;
    display: flex;
}

.chart-y {
    width: 42px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-bottom: 23px;
}

.chart-y span {
    font-size: 8px;
    color: #9aa4b4;
}

.chart-area {
    flex: 1;
    position: relative;
    border-left: 1px solid #e9edf3;
    border-bottom: 1px solid #e9edf3;
    background-image:
        linear-gradient(#eef1f5 1px, transparent 1px);
    background-size: 100% 25%;
}

.chart-line {
    position: absolute;
    left: 0;
    right: 0;
    top: 45px;
    height: 80px;
    border-top: 3px solid #1769da;
    transform: skewY(-8deg);
    box-shadow: 0 -25px 25px rgba(23,105,218,.08);
}

.chart-point {
    position: absolute;
    width: 7px;
    height: 7px;
    background: #1769da;
    border: 2px solid white;
    border-radius: 50%;
    z-index: 2;
}

.p1 { left: 4%; top: 105px; }
.p2 { left: 15%; top: 75px; }
.p3 { left: 27%; top: 92px; }
.p4 { left: 39%; top: 60px; }
.p5 { left: 50%; top: 30px; }
.p6 { left: 61%; top: 55px; }
.p7 { left: 72%; top: 35px; }
.p8 { left: 84%; top: 45px; }
.p9 { left: 96%; top: 25px; }

.chart-x {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -20px;
    display: flex;
    justify-content: space-between;
}

.chart-x span {
    font-size: 8px;
    color: #9aa4b4;
}


/* ================= DONUT ================= */

.donut-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 25px;
    min-height: 190px;
}

.donut {
    width: 125px;
    height: 125px;
    border-radius: 50%;
    background:
        conic-gradient(
            #16a866 0deg 260deg,
            #1671db 260deg 325deg,
            #f5a623 325deg 345deg,
            #ef5b5b 345deg 360deg
        );
    display: flex;
    align-items: center;
    justify-content: center;
}

.donut::before {
    content: "";
    position: absolute;
}

.donut > div {
    width: 83px;
    height: 83px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.donut strong {
    font-size: 19px;
}

.donut span {
    font-size: 9px;
    color: #8b95a7;
}

.legend {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.legend div {
    display: grid;
    grid-template-columns: 9px 75px auto;
    gap: 6px;
    align-items: center;
    font-size: 9px;
}

.legend strong {
    font-size: 8px;
    color: #7c8799;
}

.dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.active-dot {
    background: #1671db;
}

.warning-dot {
    background: #f5a623;
}

.danger-dot {
    background: #ef5b5b;
}


/* ================= TABLE ================= */

.bottom-grid {
    grid-template-columns: 2fr 1fr;
}

.view-all {
    border: none;
    background: transparent;
    color: #0866d8;
    font-size: 9px;
    cursor: pointer;
}

.table-wrapper {
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th {
    text-align: left;
    background: #f8f9fb;
    color: #697589;
    font-size: 8px;
    padding: 10px 8px;
    font-weight: 600;
}

td {
    border-bottom: 1px solid #edf0f4;
    padding: 11px 8px;
    font-size: 9px;
    color: #344054;
}

.plan,
.status {
    padding: 4px 7px;
    border-radius: 10px;
    font-size: 7px;
}

.plan.premium {
    background: #eee9ff;
    color: #7047d9;
}

.plan.standard {
    background: #e8f1ff;
    color: #1769da;
}

.plan.basic {
    background: #edf0f4;
    color: #687386;
}

.status.active {
    background: #e7f8ef;
    color: #12a15a;
}

.status.expiring {
    background: #fff3df;
    color: #d9820b;
}

.status.expired {
    background: #ffe8e8;
    color: #e04444;
}


/* ================= TICKETS ================= */

.ticket-list {
    display: flex;
    flex-direction: column;
}

.ticket {
    min-height: 48px;
    border-bottom: 1px solid #edf0f4;
    display: flex;
    align-items: center;
    gap: 10px;
}

.ticket-icon {
    width: 27px;
    height: 27px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.ticket span {
    flex: 1;
    font-size: 9px;
    color: #4d5a70;
}

.ticket strong {
    font-size: 11px;
}


/* ================= QUICK CARDS ================= */

.quick-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-top: 15px;
}

.quick-card {
    background: white;
    border: 1px solid #e5eaf1;
    border-radius: 9px;
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 11px;
}

.quick-icon {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.quick-card div:nth-child(2) {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.quick-card span {
    font-size: 9px;
    color: #7c8799;
}

.quick-card strong {
    font-size: 16px;
    margin-top: 3px;
}

.quick-card small {
    font-size: 9px;
}


/* ================= RESPONSIVE ================= */

@media (max-width: 1100px) {

    .stats-grid,
    .quick-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 750px) {

    .sidebar {
        transform: translateX(-100%);
    }

    .main-content {
        width: 100%;
        margin-left: 0;
    }

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

    .mobile-menu {
        display: block;
        border: none;
        background: transparent;
        font-size: 20px;
    }

    .profile-info {
        display: none;
    }
}


/* =====================================================
   ORGANIZATION REGISTRATION
   ===================================================== */

.form-page {
    padding: 25px 0;
}

.form-header {
    background: white;
    border: 1px solid #e5eaf1;
    border-radius: 9px;
    padding: 18px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.form-header h2 {
    font-size: 16px;
    color: #18243b;
}

.form-header p {
    font-size: 10px;
    color: #8b95a7;
    margin-top: 4px;
}

.back-button {
    text-decoration: none;
    border: 1px solid #dce2eb;
    color: #53627a;
    background: white;
    padding: 9px 14px;
    border-radius: 6px;
    font-size: 10px;
}

.organization-form {
    background: white;
    border: 1px solid #e5eaf1;
    border-radius: 9px;
}

.form-section {
    padding: 22px;
    border-bottom: 1px solid #edf0f4;
}

.form-section h3 {
    font-size: 12px;
    color: #18243b;
}

.form-section > p {
    font-size: 9px;
    color: #8b95a7;
    margin-top: 4px;
    margin-bottom: 18px;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 17px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.form-group label {
    font-size: 10px;
    color: #344054;
    font-weight: 600;
}

.form-group input,
.form-group select {
    height: 40px;
    border: 1px solid #dce2eb;
    border-radius: 6px;
    padding: 0 11px;
    outline: none;
    color: #344054;
    font-size: 10px;
    background: white;
    transition: .2s;
}

.form-group input:focus,
.form-group select:focus {
    border-color: #1769da;
    box-shadow: 0 0 0 3px rgba(23,105,218,.08);
}

.form-group input::placeholder {
    color: #a3acba;
}

.form-actions {
    padding: 17px 22px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.cancel-button,
.save-button {
    height: 38px;
    padding: 0 17px;
    border-radius: 6px;
    font-size: 10px;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cancel-button {
    border: 1px solid #dce2eb;
    background: white;
    color: #53627a;
}

.save-button {
    border: none;
    background: #0866d8;
    color: white;
}

.save-button:hover {
    background: #0758b9;
}

@media (max-width: 750px) {

    .form-grid {
        grid-template-columns: 1fr;
    }

    .form-header {
        align-items: flex-start;
        gap: 15px;
    }

    .form-actions {
        flex-direction: column-reverse;
    }

    .cancel-button,
    .save-button {
        width: 100%;
    }
}


/* =====================================================
   ORGANIZATIONS
   ===================================================== */

.organizations-page {
    padding: 25px 0;
}

.organization-toolbar {
    background: white;
    border: 1px solid #e5eaf1;
    border-radius: 9px;
    padding: 17px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.organization-toolbar h2 {
    font-size: 14px;
    color: #18243b;
}

.organization-toolbar p {
    font-size: 9px;
    color: #8b95a7;
    margin-top: 4px;
}

.organization-table-card {
    padding: 0;
    overflow: hidden;
}

.organization-table-card table {
    min-width: 900px;
}

.organization-table-card td strong {
    color: #18243b;
}