/* ==========================================================================
   Green Hope University — system brand theme (staff layouts + sign-in pages)
   Same colours as the student portal (student.css). Loaded on every page by
   _HeadIncludes / HeadIncludes.ascx; staff rules only apply to body.ghu-staff.

   Most pages need no edits: the Tailwind config in the head includes remaps
   blue → GHU green and indigo → GHU blue. This file restyles the shared
   layout shell (#topbar, #sidebar, #main) that every staff layout uses.
   Keep identical in UMS_RazorPage_Version/wwwroot/css and GHU_UMS_System/Assets/css.
   ========================================================================== */

:root {
    --ghu-green-700: #1E7B34;
    --ghu-green-500: #3FA34D;
    --ghu-green-50:  #EEF8EF;
    --ghu-blue-900:  #1B2A6B;
    --ghu-blue-600:  #2A4BC4;
    --ghu-sky-200:   #BFDDF5;
    --ghu-gold-400:  #E9C45C;
    --ghu-brand-gradient: linear-gradient(100deg, var(--ghu-green-700) 0%, #17692B 55%, var(--ghu-blue-900) 140%);
}

/* ── Page background: light green (ribbon) → light sky (globe) ─────────── */
body.ghu-staff {
    background:
        radial-gradient(70% 45% at 100% 100%, rgba(191, 221, 245, .55) 0%, transparent 70%),
        linear-gradient(180deg, #E4F1E7 0%, #E9F3EC 40%, #E3EEF8 100%);
    background-attachment: fixed;
}
body.ghu-staff #main { background: transparent; }

/* ── Top bar: brand gradient, white text, gold subtitle ────────────────── */
body.ghu-staff #topbar {
    background: var(--ghu-brand-gradient);
    border-bottom-color: transparent;
    box-shadow: 0 4px 16px -6px rgba(27, 42, 107, .45);
    color: #fff;
}
body.ghu-staff #topbar .brand-title { color: #fff; }
body.ghu-staff #topbar .brand-sub   { color: var(--ghu-gold-400); }
body.ghu-staff #topbar .brand-area img { border-color: rgba(255, 255, 255, .6); }
body.ghu-staff #topbar .brand-icon {
    background: #fff;
    color: var(--ghu-green-700);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
}

/* Mobile menu (hamburger) button */
body.ghu-staff #topbar .brand-area > button { color: rgba(255, 255, 255, .9); }
body.ghu-staff #topbar .brand-area > button:hover { color: #fff; background: rgba(255, 255, 255, .12); }

/* Branch / website / phone summary */
body.ghu-staff #topbar .border-e {
    color: rgba(255, 255, 255, .85);
    border-color: rgba(255, 255, 255, .25);
}
body.ghu-staff #topbar .border-e > .rounded-full {
    color: #fff;
    background: rgba(255, 255, 255, .14);
    border-color: rgba(255, 255, 255, .22);
}
body.ghu-staff #topbar .border-e > a.rounded-full:hover { background: rgba(255, 255, 255, .22); }
body.ghu-staff #topbar .border-e > :not(.rounded-full) { color: rgba(255, 255, 255, .85); }
body.ghu-staff #topbar .border-e i { color: var(--ghu-gold-400); }

/* Profile button (the dropdown card below it stays white with dark text) */
body.ghu-staff #profileBtn:hover { background: rgba(255, 255, 255, .12); }
body.ghu-staff #profileBtn > div:first-child {
    color: #fff;
    background: rgba(255, 255, 255, .16);
    border-color: rgba(255, 255, 255, .3);
}
body.ghu-staff #profileBtn .text-slate-800 { color: #fff; }
body.ghu-staff #profileBtn .text-slate-500,
body.ghu-staff #profileBtn .fa-chevron-down { color: rgba(255, 255, 255, .72); }

/* ── Signed-in user menu (js/ghu-usermenu.js) ──────────────────────────── */
.profile-dropdown { position: relative; }
.ghu-usermenu-chevron { transition: transform .2s ease; }
.profile-dropdown.is-open .ghu-usermenu-chevron { transform: rotate(180deg); }

.ghu-usermenu-panel {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    z-index: 60;
    width: 18.5rem;
    max-width: calc(100vw - 24px);
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 18px;
    box-shadow: 0 24px 48px -16px rgba(15, 23, 42, .35), 0 2px 8px rgba(15, 23, 42, .06);
    overflow: hidden;
    color: #1E293B;
    text-align: left;
}
.profile-dropdown.is-open .ghu-usermenu-panel {
    display: block;
    animation: ghu-menu-in .16s ease-out;
}
@keyframes ghu-menu-in {
    from { opacity: 0; transform: translateY(-6px) scale(.98); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .profile-dropdown.is-open .ghu-usermenu-panel { animation: none; }
    .ghu-usermenu-chevron { transition: none; }
}

.ghu-usermenu-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(233, 196, 92, .25) 0%, transparent 50%),
        linear-gradient(135deg, var(--ghu-green-700) 0%, #17692B 55%, var(--ghu-blue-900) 140%);
    color: #fff;
}
.ghu-usermenu-avatar {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 15px;
    background: rgba(255, 255, 255, .18);
    border: 1px solid rgba(255, 255, 255, .3);
}
.ghu-usermenu-name  { font-size: 14px; font-weight: 800; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ghu-usermenu-email { font-size: 11.5px; color: rgba(255, 255, 255, .78); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ghu-usermenu-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.ghu-usermenu-chips span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .22);
}
.ghu-usermenu-chips .is-role { color: var(--ghu-gold-400); }

.ghu-usermenu-items { padding: 6px; }
.ghu-usermenu-items + .ghu-usermenu-items { border-top: 1px solid #EEF2F0; }
.ghu-usermenu-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    color: #334155;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}
.ghu-usermenu-item i {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: var(--ghu-green-700);
    background: var(--ghu-green-50);
}
.ghu-usermenu-item:hover,
.ghu-usermenu-item:focus-visible { background: #F1F7F2; color: #0F172A; outline: none; }
.ghu-usermenu-item.is-danger { color: #DC2626; }
.ghu-usermenu-item.is-danger i { color: #DC2626; background: #FEF2F2; }
.ghu-usermenu-item.is-danger:hover,
.ghu-usermenu-item.is-danger:focus-visible { background: #FEF2F2; color: #B91C1C; }

/* ── Sidebar: deep GHU navy, green active item ─────────────────────────── */
body.ghu-staff #sidebar {
    background: linear-gradient(180deg, var(--ghu-blue-900) 0%, #16225A 60%, #13294A 100%);
    border-right-color: rgba(255, 255, 255, .06);
}
body.ghu-staff #sidebar .text-slate-500 { color: rgba(191, 221, 245, .62); }   /* section labels, sub-icons */
body.ghu-staff #sidebar .text-slate-400 { color: rgba(226, 236, 248, .72); }
/* …but keep Tailwind's hover:text-white and the active sub-item (text-white) white */
body.ghu-staff #sidebar .text-slate-400:hover,
body.ghu-staff #sidebar .text-slate-400.text-white { color: #fff; }
body.ghu-staff #sidebar .border-slate-800 { border-color: rgba(255, 255, 255, .1); }

/* Hover and the open sub-item: soft white instead of slate */
body.ghu-staff #sidebar a:not(.bg-blue-600):hover,
body.ghu-staff #sidebar summary:hover { background-color: rgba(255, 255, 255, .08); }
body.ghu-staff #sidebar .bg-slate-800\/50 { background-color: rgba(255, 255, 255, .1); }

/* Active main item (bg-blue-600 = GHU green via the Tailwind remap) */
body.ghu-staff #sidebar a.bg-blue-600 {
    background: linear-gradient(135deg, var(--ghu-green-700) 0%, #2E8B45 100%);
    box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .45);
}
body.ghu-staff #sidebar a.bg-blue-600 i { color: #fff; }

/* Signed-in user card at the bottom of the sidebar */
body.ghu-staff #sidebar .bg-slate-800\/50.rounded-2xl {
    background-color: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .1);
}

/* Lecturer: phone bottom navigation bar */
body.ghu-staff .fixed.bottom-0.bg-slate-900\/95 {
    background: rgba(27, 42, 107, .96);
    border-top-color: rgba(255, 255, 255, .08);
}

/* ── Sign-in pages (staff, lecturer; same look as the student sign-in) ─── */
.ghu-auth-bg {
    background:
        radial-gradient(90% 60% at 50% 0%, rgba(191, 221, 245, .55) 0%, transparent 70%),
        linear-gradient(180deg, #1E7B34 0%, #17692B 38%, #EEF8EF 38.1%, #F5F7F6 100%);
}
@media (min-width: 640px) {
    .ghu-auth-bg {
        background:
            radial-gradient(60% 50% at 50% 0%, rgba(191, 221, 245, .45) 0%, transparent 70%),
            linear-gradient(180deg, #1E7B34 0%, #17692B 45%, #EEF8EF 45.1%, #F5F7F6 100%);
    }
}
/* _Layout / old login bodies are dark: keep the page light (no dark strip on over-scroll) */
body:has(.ghu-auth-bg) { background: #F5F7F6 !important; color: #1E293B !important; }

.ghu-btn-primary { background: var(--ghu-green-700); color: #fff; }
.ghu-btn-primary:hover { background: #196A2C; }

/* asp:CheckBox renders <span><input/></span> */
.ghu-check { display: inline-flex; }
.ghu-check input { width: 16px; height: 16px; margin: 0; accent-color: #1E7B34; cursor: pointer; }

/* ── Print: plain white paper ──────────────────────────────────────────── */
@media print {
    body.ghu-staff { background: #fff !important; }
}