:root{--b:#071b46;--b2:#0b3d91;--g:#f9b233;--bg:#eef4ff}
*{box-sizing:border-box} body{margin:0;font-family:Inter,system-ui,Segoe UI,Arial;background:linear-gradient(135deg,#06183f 0,#0b3d91 310px,#eef4ff 310px);min-height:100vh;color:#101828}
.top{min-height:76px;background:linear-gradient(135deg,var(--b),var(--b2));display:flex;align-items:center;gap:15px;padding:10px 22px;position:sticky;top:0;z-index:9;box-shadow:0 15px 40px #0003}
.brand{display:flex;align-items:center;gap:13px;color:#fff;text-decoration:none;margin-right:auto}.brand img{width:56px;height:56px;object-fit:contain;background:#fff;border-radius:18px;padding:5px}.brand b{font-size:1.25rem}.brand small{display:block;color:#dbeafe;font-size:.78rem}
.top nav{display:flex;gap:8px;flex-wrap:wrap}.top nav a{color:#fff;text-decoration:none;background:#ffffff1c;border:1px solid #ffffff30;padding:9px 13px;border-radius:999px;font-weight:800;font-size:.88rem}.top nav a:hover{background:#fff;color:var(--b)}.top nav a.logout{background:var(--g);color:#14213d}
.menubtn{display:none;background:#fff;color:var(--b);border:0;border-radius:14px;width:44px;height:44px;font-size:1.5rem}
.wrap{display:grid;grid-template-columns:250px 1fr;gap:20px;padding:20px}.side{background:#ffffff22;border:1px solid #ffffff40;border-radius:26px;padding:14px;min-height:calc(100vh - 116px)}.side a{display:block;color:#fff;text-decoration:none;padding:12px;border-radius:15px;font-weight:800;margin-bottom:7px}.side a:hover{background:#ffffff25}
.cardx{background:#fff;border-radius:28px;padding:22px;box-shadow:0 20px 50px #0920441c;border:1px solid #e6edf8}.hero{background:linear-gradient(135deg,var(--b),var(--b2));color:#fff;border-radius:30px;padding:26px;box-shadow:0 20px 50px #071b4650}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin:18px 0}.kpi{background:#fff;border-radius:22px;padding:16px;box-shadow:0 10px 25px #09204415}.kpi b{font-size:1.7rem;color:var(--b)}
.btnx{background:linear-gradient(135deg,var(--b),var(--b2));color:#fff!important;border:0;border-radius:15px;padding:10px 16px;font-weight:900;text-decoration:none;display:inline-block}.btng{background:linear-gradient(135deg,#ffd166,var(--g));color:#14213d!important;border:0;border-radius:15px;padding:10px 16px;font-weight:900;text-decoration:none;display:inline-block}
.form-control,.form-select{border-radius:15px;padding:11px}.avatar{width:58px;height:58px;border-radius:20px;object-fit:cover;background:#fff;border:3px solid #fff;box-shadow:0 8px 20px #0002}.online{width:12px;height:12px;background:#aaa;border-radius:50%;display:inline-block}.online.on{background:#18b26b;box-shadow:0 0 0 5px #18b26b22}
.profile{display:flex;gap:14px;background:#fff;border:1px solid #e6edf8;border-radius:24px;padding:15px;box-shadow:0 10px 25px #09204414;height:100%}
.auth{max-width:980px;margin:35px auto;background:#fff;border-radius:34px;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;box-shadow:0 30px 70px #0004}.authleft{background:linear-gradient(135deg,var(--b),var(--b2));color:#fff;padding:40px;display:flex;flex-direction:column;justify-content:center}.authright{padding:34px}
.chat{height:calc(100vh - 116px);display:grid;grid-template-columns:310px 1fr;gap:16px}.chatlist,.chatwin{background:#fff;border-radius:28px;overflow:hidden;box-shadow:0 18px 42px #09204420}.chathead{background:linear-gradient(135deg,var(--b),var(--b2));color:#fff;padding:15px;display:flex;gap:12px;align-items:center}.person{display:flex;gap:12px;padding:13px;color:#111;text-decoration:none;border-bottom:1px solid #eef2f7}.unread{margin-left:auto;background:var(--g);border-radius:999px;min-width:24px;height:24px;display:grid;place-items:center;font-weight:900}.chatbody{height:calc(100vh - 265px);overflow:auto;background:#eef4ff;padding:18px}.msg{max-width:75%;background:#fff;margin:8px 0;padding:10px 13px;border-radius:19px;box-shadow:0 6px 15px #09204415}.msg.me{margin-left:auto;background:#dcf8c6}.mtime{display:block;text-align:right;font-size:.72rem;color:#667085}.compose{display:flex;gap:9px;padding:11px;border-top:1px solid #eee}.compose input[type=text]{flex:1}
.foot{padding:18px 22px 28px;background:#eef4ff}.footbox{background:linear-gradient(135deg,var(--b),var(--b2));border-radius:30px;color:#fff;padding:22px;display:grid;grid-template-columns:1.1fr repeat(3,1fr);gap:14px;box-shadow:0 20px 50px #071b4630}.footbrand{display:flex;gap:13px;align-items:center}.footbrand img{width:80px;height:80px;object-fit:contain;background:#fff;border-radius:23px;padding:8px}.fitem{background:#ffffff18;border:1px solid #ffffff24;border-radius:22px;padding:15px}.fitem i{background:var(--g);color:#102044;border-radius:14px;padding:10px;margin-right:8px}.fitem span{display:block;color:#dbeafe;font-size:.82rem;margin-top:10px}.fitem b{font-size:.9rem}
@media(max-width:900px){.top{flex-wrap:wrap}.menubtn{display:block}.top nav{display:none;width:100%}body.open .top nav{display:flex}.wrap{grid-template-columns:1fr;padding:12px}.side{min-height:auto;display:flex;overflow:auto}.side a{white-space:nowrap}.grid{grid-template-columns:repeat(2,1fr)}.auth{grid-template-columns:1fr;margin:12px}.authleft{display:none}.chat{grid-template-columns:1fr;height:auto}.chatbody{height:60vh}.footbox{grid-template-columns:1fr}.msg{max-width:88%}}



/* ===== Profile photo upload and teacher profile popup ===== */

.profile-edit-card {
    max-width: 980px;
}

.profile-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
}

.profile-photo-preview {
    position: relative;
}

.profile-photo-preview img {
    width: 96px;
    height: 96px;
    border-radius: 30px;
    object-fit: cover;
    background: #fff;
    border: 4px solid #fff;
    box-shadow: 0 12px 32px rgba(7,27,70,.25);
}

.profile-photo-preview .online {
    position: absolute;
    right: 4px;
    bottom: 8px;
}

.teacher-page-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.teacher-card {
    position: relative;
    background: #fff;
    border-radius: 28px;
    overflow: hidden;
    border: 1px solid #e6edf8;
    box-shadow: 0 15px 38px rgba(9,32,68,.13);
    height: 100%;
}

.teacher-cover {
    height: 82px;
    background: linear-gradient(135deg, #071b46, #0b3d91);
}

.teacher-photo-wrap {
    position: relative;
    margin-top: -44px;
    padding-left: 18px;
}

.teacher-photo {
    width: 88px;
    height: 88px;
    border-radius: 28px;
    object-fit: cover;
    background: #fff;
    border: 5px solid #fff;
    box-shadow: 0 10px 28px rgba(0,0,0,.22);
}

.teacher-online {
    position: absolute;
    left: 88px;
    bottom: 8px;
}

.teacher-info {
    padding: 12px 18px 18px;
}

.teacher-info h5 {
    margin: 0;
    font-weight: 900;
    color: #071b46;
}

.teacher-qual {
    color: #667085;
    margin: 4px 0 8px;
    min-height: 22px;
}

.teacher-meta {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin: 8px 0;
}

.teacher-meta span {
    background: #eef4ff;
    color: #0b3d91;
    border-radius: 999px;
    padding: 6px 10px;
    font-size: .82rem;
    font-weight: 800;
}

.teacher-short {
    color: #475467;
    min-height: 48px;
    font-size: .92rem;
}

.teacher-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.teacher-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(4, 18, 46, .72);
    z-index: 9999;
    padding: 18px;
    overflow-y: auto;
}

.teacher-modal.show {
    display: grid;
    place-items: center;
}

.teacher-modal-box {
    width: min(720px, 96vw);
    background: #fff;
    border-radius: 32px;
    padding: 24px;
    position: relative;
    box-shadow: 0 35px 90px rgba(0,0,0,.35);
}

.modal-close {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 38px;
    height: 38px;
    border: 0;
    background: #eef4ff;
    color: #071b46;
    font-size: 1.6rem;
    border-radius: 50%;
}

.modal-profile-head {
    display: flex;
    gap: 16px;
    align-items: center;
    padding-bottom: 16px;
    border-bottom: 1px solid #e6edf8;
}

.modal-profile-head img {
    width: 110px;
    height: 110px;
    border-radius: 34px;
    object-fit: cover;
    box-shadow: 0 15px 35px rgba(7,27,70,.2);
}

.modal-profile-head h3 {
    margin: 0;
    color: #071b46;
    font-weight: 950;
}

.modal-profile-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin: 18px 0;
}

.modal-profile-grid div {
    background: #eef4ff;
    border-radius: 18px;
    padding: 12px;
}

.modal-profile-grid b {
    display: block;
    color: #071b46;
    font-size: .82rem;
}

.modal-profile-grid span {
    color: #475467;
    font-size: .9rem;
}

.modal-bio {
    background: #f8fbff;
    border: 1px solid #e6edf8;
    border-radius: 22px;
    padding: 16px;
}

.modal-bio b {
    color: #071b46;
}

.modal-bio p {
    margin: 8px 0 0;
    color: #344054;
}

.modal-actions {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}

/* ===== WhatsApp-like chat ===== */

.wa-chat-shell {
    height: calc(100vh - 118px);
    display: grid;
    grid-template-columns: 330px 1fr;
    gap: 16px;
}

.wa-left,
.wa-window {
    background: #fff;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 18px 42px rgba(9,32,68,.18);
    border: 1px solid #e6edf8;
}

.wa-left-head {
    padding: 18px;
    color: #fff;
    background: linear-gradient(135deg, #071b46, #0b3d91);
}

.wa-left-head h5 {
    margin: 0;
    font-weight: 900;
}

.wa-person {
    display: flex;
    gap: 12px;
    padding: 16px;
    align-items: center;
    border-bottom: 1px solid #eef2f7;
}

.wa-person img {
    width: 58px;
    height: 58px;
    border-radius: 20px;
    object-fit: cover;
}

.wa-person small {
    display: block;
    color: #667085;
}

.wa-note {
    margin: 16px;
    padding: 14px;
    border-radius: 20px;
    background: #eef4ff;
    color: #0b3d91;
    display: flex;
    gap: 10px;
    font-weight: 700;
}

.wa-window {
    display: flex;
    flex-direction: column;
}

.wa-head {
    min-height: 76px;
    background: linear-gradient(135deg, #071b46, #0b3d91);
    color: #fff;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.wa-head img {
    width: 52px;
    height: 52px;
    border-radius: 18px;
    object-fit: cover;
    background: #fff;
}

.wa-head small {
    display: block;
    color: #dbeafe;
}

.wa-head-actions {
    margin-left: auto;
    display: flex;
    gap: 14px;
    font-size: 1.2rem;
}

.wa-body {
    flex: 1;
    overflow-y: auto;
    padding: 18px;
    background:
        linear-gradient(rgba(238,244,255,.90), rgba(238,244,255,.90)),
        radial-gradient(circle at 10px 10px, #c7d7f8 2px, transparent 2px);
    background-size: auto, 34px 34px;
}

.wa-msg {
    max-width: 72%;
    margin: 8px 0;
    padding: 10px 13px;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 6px 16px rgba(9,32,68,.10);
    word-break: break-word;
}

.wa-msg.other {
    border-bottom-left-radius: 5px;
}

.wa-msg.me {
    margin-left: auto;
    background: #dcf8c6;
    border-bottom-right-radius: 5px;
}

.wa-msg small {
    display: block;
    text-align: right;
    color: #667085;
    font-size: .72rem;
    margin-top: 4px;
}

.wa-msg .seen {
    color: #0b77ff;
    font-weight: 800;
}

.chat-img {
    max-width: 240px;
    border-radius: 16px;
    margin-top: 8px;
    box-shadow: 0 8px 22px rgba(0,0,0,.15);
}

.doc-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 8px;
    padding: 9px 12px;
    border-radius: 14px;
    background: #eef4ff;
    color: #071b46;
    text-decoration: none;
    font-weight: 800;
}

.wa-compose {
    position: relative;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px;
    background: #fff;
    border-top: 1px solid #e6edf8;
}

.wa-compose input[type="text"] {
    flex: 1;
}

.wa-icon-btn {
    width: 43px;
    height: 43px;
    border: 0;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: #eef4ff;
    color: #071b46;
    font-size: 1.1rem;
    cursor: pointer;
}

.wa-send {
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, #071b46, #0b3d91);
    color: #fff;
    font-size: 1.1rem;
}

.emoji-box {
    display: none;
    position: absolute;
    bottom: 66px;
    left: 12px;
    background: #fff;
    border-radius: 18px;
    padding: 10px;
    box-shadow: 0 20px 50px rgba(0,0,0,.22);
    border: 1px solid #e6edf8;
    z-index: 5;
}

.emoji-box.show {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    max-width: 230px;
}

.emoji-box button {
    border: 0;
    background: #eef4ff;
    border-radius: 12px;
    font-size: 1.2rem;
    padding: 7px;
}

.file-preview {
    background: #fff8e1;
    color: #7a4b00;
    padding: 8px 14px;
    font-weight: 800;
    border-top: 1px solid #ffe0a3;
}

.admin-readonly-note {
    padding: 12px;
    background: #fff8e1;
    color: #7a4b00;
    font-weight: 800;
}

/* ===== Admin chat cards ===== */

.admin-chat-list {
    display: grid;
    gap: 14px;
}

.admin-chat-card {
    background: #fff;
    border: 1px solid #e6edf8;
    border-radius: 24px;
    padding: 16px;
    box-shadow: 0 10px 28px rgba(9,32,68,.10);
}

.admin-chat-users {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 12px;
    align-items: center;
}

.admin-chat-user {
    display: flex;
    gap: 12px;
    align-items: center;
}

.admin-chat-user img {
    width: 58px;
    height: 58px;
    border-radius: 20px;
    object-fit: cover;
}

.admin-chat-user small,
.admin-chat-user span {
    display: block;
    color: #667085;
    font-size: .82rem;
}

.chat-arrow {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #eef4ff;
    color: #0b3d91;
    font-weight: 900;
}

.admin-last-msg {
    margin-top: 12px;
    background: #f8fbff;
    border-radius: 16px;
    padding: 10px;
    color: #344054;
}

.admin-chat-footer {
    margin-top: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ===== Mobile ===== */

@media(max-width: 900px) {
    .profile-title-row {
        flex-direction: column;
        align-items: flex-start;
    }

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

    .wa-chat-shell {
        grid-template-columns: 1fr;
        height: auto;
    }

    .wa-left {
        display: none;
    }

    .wa-window {
        height: 74vh;
    }

    .wa-msg {
        max-width: 88%;
    }

    .admin-chat-users {
        grid-template-columns: 1fr;
    }

    .chat-arrow {
        display: none;
    }

    .admin-chat-footer {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }
}
/* ===== FIX ADMIN SIDE MENU VISIBILITY ===== */

.side {
    background: linear-gradient(180deg, #071b46 0%, #0b3d91 100%) !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    border-radius: 26px !important;
    padding: 16px !important;
    min-height: calc(100vh - 116px);
    box-shadow: 0 18px 45px rgba(7, 27, 70, .28) !important;
}

.side a {
    display: flex !important;
    align-items: center;
    gap: 10px;
    color: #ffffff !important;
    text-decoration: none !important;
    padding: 13px 16px !important;
    border-radius: 16px !important;
    font-weight: 900 !important;
    margin-bottom: 9px !important;
    background: rgba(255,255,255,.10) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    letter-spacing: .2px;
}

.side a:hover {
    background: #ffffff !important;
    color: #071b46 !important;
    transform: translateX(3px);
}

.side a::before {
    font-family: "bootstrap-icons";
    font-size: 1rem;
    opacity: .95;
}

.side a[href*="admin.php"]::before {
    content: "\F3FD";
}

.side a[href*="users.php?role=teacher"]::before {
    content: "\F4D8";
}

.side a[href*="users.php?role=student"]::before {
    content: "\F4CF";
}

.side a[href*="categories.php"]::before {
    content: "\F3F6";
}

.side a[href*="payments.php"]::before {
    content: "\F572";
}

.side a[href*="admin_chats.php"]::before,
.side a[href*="my_chats.php"]::before {
    content: "\F268";
}

.side a[href*="reports.php"]::before {
    content: "\F17A";
}

/* mobile side menu */
@media(max-width:900px) {
    .side {
        min-height: auto !important;
        display: flex !important;
        overflow-x: auto !important;
        gap: 8px;
        border-radius: 20px !important;
        padding: 10px !important;
    }

    .side a {
        white-space: nowrap !important;
        margin-bottom: 0 !important;
        min-width: max-content;
    }
}
/* Force left side menu dark blue and clear */
.wrap > aside,
.side,
.sidebar {
    background: #06183f !important;
    color: #ffffff !important;
}

.wrap > aside a,
.side a,
.sidebar a {
    color: #ffffff !important;
    background: rgba(255,255,255,.11) !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    font-weight: 900 !important;
}

.wrap > aside a:hover,
.side a:hover,
.sidebar a:hover {
    background: #0b3d91 !important;
    color: #ffffff !important;
}