:root {
    --maroon: #7b1113;
    --maroon-dark: #5d0c0e;
    --gold: #f2c94c;
    --light-bg: #f7f3f3;
    --text: #2f2323;
    /* Grace period the mega-menu lingers after the pointer/focus leaves on the
       pure-hover path. The guaranteed 3-second stay after a CLICK is driven by
       the small JS snippet (it holds the .mega-open class for 3000ms), so this
       CSS value is only a short close delay and must NOT also be 3s or the two
       delays would stack. */
    --mega-hold: 1s;
}
body {
    margin: 0;
    background: var(--light-bg);
    color: var(--text);
    font-family: Arial, Helvetica, sans-serif;
}
.hero-header {
    background: linear-gradient(rgba(123,17,19,0.78), rgba(123,17,19,0.78)), url('https://www.upou.edu.ph/wp-content/uploads/2021/03/upou-oblation-and-hq-scaled.jpg') center/cover no-repeat;
    color: #fff;
    padding: 28px 16px;
}
.hero-inner {
    max-width: 1200px;
    margin: 0 auto;
}
.hero-title {
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 8px;
}
.hero-subtitle {
    margin: 0;
    opacity: 0.95;
}
#megaNav {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--maroon);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.nav-wrap {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: 10px 16px;
}
.nav-wrap a, .nav-wrap .nav-label {
    color: #fff;
    text-decoration: none;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 14px;
}
.nav-wrap a:hover {
    background: rgba(255,255,255,0.12);
}
.main-container {
    max-width: 1200px;
    margin: 24px auto;
    padding: 0 16px;
}
.card {
    border-radius: 12px;
    border: 1px solid #e3d8d8;
}
.section-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    border: 1px solid #eadfdf;
}
.footer {
    background: var(--maroon-dark);
    color: #fff;
    margin-top: 40px;
    padding: 24px 16px;
}
.footer-inner {
    max-width: 1200px;
    margin: 0 auto;
}
.star-rating { display: flex; gap: 4px; }
.star-btn {
    border: none; background: transparent; font-size: 28px; line-height: 1; color: #c7c7c7; cursor: pointer; padding: 0;
}
.star-btn.active { color: #ffc107; }
.reaction-bar { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.reaction-btn {
    border: 1px solid #ced4da; background: #ffffff; border-radius: 999px; padding: 8px 14px; cursor: pointer; font-size: 14px;
}
.reaction-btn.active { border-color: var(--maroon); background: #f9ecec; color: var(--maroon); font-weight: 600; }
.reaction-note, .comment-meta { font-size: 13px; color: #6c757d; }
.comment-box { border-left: 3px solid #dee2e6; padding-left: 12px; margin-top: 16px; }
.reply-box { margin-left: 24px; }
.comment-actions { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.comment-link-btn { border: none; background: transparent; color: var(--maroon); padding: 0; font-size: 13px; cursor: pointer; }
.comment-hidden { color: #6c757d; font-style: italic; }
.comment-reaction-bar { margin-top: 8px; gap: 6px; }
.comment-reaction-bar .reaction-btn { padding: 3px 10px; font-size: 12px; }
.comment-reaction-note { margin-top: 4px; }
.reaction-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.google-card {
    max-width: 560px; margin: 40px auto; background: #fff; border: 1px solid #dadce0; border-radius: 28px; padding: 40px 36px; box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.google-logo { font-size: 28px; font-weight: 700; letter-spacing: -1px; }
.google-logo span:nth-child(1) { color: #4285f4; }
.google-logo span:nth-child(2) { color: #ea4335; }
.google-logo span:nth-child(3) { color: #fbbc05; }
.google-logo span:nth-child(4) { color: #4285f4; }
.google-logo span:nth-child(5) { color: #34a853; }
.google-logo span:nth-child(6) { color: #ea4335; }
.dashboard-cards { display: none; }
.mobile-record { background: #fff; border: 1px solid #e1dada; border-radius: 10px; padding: 14px; margin-bottom: 12px; }
.mobile-record .label { font-weight: 700; color: var(--maroon); display: block; }
#topBtn {
    display: none; position: fixed; bottom: 20px; right: 20px; z-index: 99; border: none; outline: none; background-color: #04AA6D; color: #fff; cursor: pointer; padding: 12px 16px; border-radius: 8px; font-size: 14px;
}
#topBtn:hover { background-color: #038a58; }
@media (max-width: 767px) {
    .nav-wrap { flex-direction: column; align-items: stretch; }
    .table-responsive.desktop-table { display: none; }
    .dashboard-cards { display: block; }
    .reply-box { margin-left: 14px; }
    .hero-title { font-size: 22px; }
}
@media (min-width: 768px) {
    .dashboard-cards { display: none; }
}

.nav-main { justify-content: space-between; }
.nav-left, .nav-right { display: flex; align-items: center; gap: 8px; }
.dropdown-hover { position: relative; display: inline-block; }
.dropbtn-link { display: inline-block; }

/* ==========================================================================
   Dashboard mega-menu dropdown
   --------------------------------------------------------------------------
   PROBLEM: The dropdown used `display: none` -> `display: block` on :hover only.
   `display` cannot be transitioned, so the menu vanished the instant the
   pointer/focus left the trigger, giving the user no chance to move down to a
   sub-item after clicking "Dashboard".

   FIX (desktop): The dropdown is now shown via `visibility`/`opacity` instead
   of `display`, which CAN be transitioned. It is revealed on hover, on
   keyboard focus (:focus-within), and whenever the wrapper carries the
   `.mega-open` class. On CLICK, the small JS snippet (see bottom of file /
   handoff notes) prevents the immediate navigation and holds `.mega-open`
   for exactly 3000ms, so the menu stays open a full 3 seconds and the user can
   pick "Login to open dashboard" or "About this platform". On plain hover the
   menu also lingers a short grace period (var(--mega-hold)) before fading.
   ========================================================================== */
.dropdown-content-card {
    /* Shown/hidden via visibility+opacity so it can be time-delayed. */
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 220px;
    background: #ffffff;
    border: 1px solid #e2d7d7;
    border-radius: 14px;
    box-shadow: 0 14px 30px rgba(0,0,0,0.12);
    overflow: hidden;
    z-index: 1100;
    /* HIDE transition: wait the full hold time, then fade out.
       This is what keeps the menu on screen for 3 seconds. */
    transition: visibility 0s linear var(--mega-hold),
                opacity 0.2s ease var(--mega-hold);
}
.dropdown-content-card a {
    color: #3a2a2a;
    display: block;
    padding: 12px 16px;
    text-decoration: none;
    font-size: 14px;
}
.dropdown-content-card a:hover { background: #f8eeee; color: var(--maroon); }

/* SHOW: on hover, on keyboard focus, or when JS adds .mega-open on click.
   No delay here, so it opens instantly; the delay only applies when hiding. */
.dropdown-hover:hover .dropdown-content-card,
.dropdown-hover:focus-within .dropdown-content-card,
.dropdown-hover.mega-open .dropdown-content-card {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition: visibility 0s linear 0s,
                opacity 0.15s ease 0s;
}
.avatar-trigger {
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
}
.avatar-circle, .account-avatar-large {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    background: #04AA6D;
    border: 1px solid #04AA6D;
    font-weight: 700;
}
.avatar-circle {
    width: 40px;
    height: 40px;
    font-size: 14px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.18);
}
.account-popover {
    border: none;
    padding: 0;
    background: transparent;
}
.account-popover:popover-open {
    inset: 88px 18px auto auto;
}
.account-card {
    width: min(340px, calc(100vw - 32px));
    background: #fff;
    border: 1px solid #e4dada;
    border-radius: 22px;
    box-shadow: 0 18px 45px rgba(0,0,0,0.18);
    padding: 22px;
}
.account-avatar-large {
    width: 72px;
    height: 72px;
    margin: 0 auto 12px;
    font-size: 24px;
}
.account-name {
    text-align: center;
    font-weight: 700;
    color: #352828;
}
.account-email {
    text-align: center;
    color: #6d5b5b;
    font-size: 14px;
    margin-top: 4px;
    word-break: break-word;
}
.account-links {
    margin-top: 16px;
    display: grid;
    gap: 8px;
}
.account-links a {
    display: block;
    padding: 12px 14px;
    border-radius: 12px;
    text-decoration: none;
    color: #3a2a2a;
    background: #faf6f6;
    border: 1px solid #ece0e0;
}
.account-links a:hover { background: #f3e7e7; color: var(--maroon); }
@media (max-width: 767px) {
    .nav-main { align-items: stretch; }
    .nav-left, .nav-right { width: 100%; justify-content: space-between; }
    .account-popover:popover-open { inset: 120px 12px auto 12px; }

    /* On mobile the dropdown is a static, always-visible block (no hover). */
    .dropdown-content-card {
        position: static;
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
        margin-top: 6px;
        transition: none;
    }
    .dropdown-hover:hover .dropdown-content-card,
    .dropdown-hover:focus-within .dropdown-content-card,
    .dropdown-hover.mega-open .dropdown-content-card {
        visibility: visible;
        opacity: 1;
    }
}

.floating-avatar-wrap {
    position: fixed;
    top: 14px;
    right: 18px;
    z-index: 1400;
}
.fixed-avatar-trigger {
    position: relative;
    display: inline-flex;
}
.fixed-avatar-trigger .avatar-circle {
    width: 46px;
    height: 46px;
    font-size: 15px;
    background: #04AA6D;
    border: 1px solid #04AA6D;
    color: #fff;
}
.fixed-avatar-trigger:hover .avatar-circle { background: #038a58; border-color: #038a58; }
.floating-avatar-wrap .account-popover:popover-open {
    inset: 64px 0 auto auto;
}
@media (max-width: 767px) {
    .floating-avatar-wrap {
        top: 12px;
        right: 12px;
    }
    .fixed-avatar-trigger .avatar-circle {
        width: 42px;
        height: 42px;
        font-size: 14px;
    }
    .floating-avatar-wrap .account-popover:popover-open {
        inset: 58px 0 auto auto;
    }
}
.nav-force-left { justify-content: flex-start !important; }
.nav-left-full { width: 100%; justify-content: flex-start !important; }
.nav-left-full a, .nav-left-full .dropbtn-link { text-align: left; }
#megaNav { overflow: visible; }
.dropdown-hover { position: relative; }

/* --------------------------------------------------------------------------
   Desktop refinement of the mega-menu box (larger min-width, higher z-index).
   Same visibility/opacity + 3s hold model as above so both rule blocks agree.
   -------------------------------------------------------------------------- */

.dropdown-content-card {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 240px;
    background: #ffffff;
    border: 1px solid #e4d9d9;
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(0,0,0,0.14);
    z-index: 1200;
    transition: visibility 0s linear var(--mega-hold),
                opacity 0.2s ease var(--mega-hold);
}

.dropdown-hover:hover .dropdown-content-card,
.dropdown-hover:focus-within .dropdown-content-card,
.dropdown-hover.mega-open .dropdown-content-card {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition: visibility 0s linear 0s,
                opacity 0.15s ease 0s;
}
@media (max-width: 767px) {
    .nav-force-left, .nav-left-full, .nav-left { justify-content: flex-start !important; align-items: flex-start !important; }
    .nav-wrap { flex-direction: row !important; }
    .dropdown-content-card {
        position: absolute;
        left: 0;
        top: calc(100% + 4px);
        min-width: 220px;
    }
}

/* Rich text editor (Quill) */
/* Height is controlled on .ql-editor (the scrollable content area), not on the
   outer .ql-container, because Quill's own CSS sets .ql-editor { height: 100% }.
   Putting min-height on the container instead causes the box to render taller
   than intended and visually overlap the form field that follows it. */
.richtext-editor { background: #fff; height: auto; }
#abstract-editor { height: auto; }
#abstract-editor .ql-editor { min-height: 160px; max-height: 320px; height: auto; overflow-y: auto; }
.comment-editor { height: auto; }
.comment-editor .ql-editor { min-height: 70px; max-height: 220px; height: auto; overflow-y: auto; }
.comment-content a, .abstract-content a { color: #8f1d21; text-decoration: underline; word-break: break-word; }
.abstract-content { line-height: 1.6; }

/* Engagement summary line under titles */
.engagement-line { font-size: 12px; color: #6d5b5b; margin-top: 4px; display: flex; flex-wrap: wrap; gap: 10px; }
.engagement-line .eng-stat { white-space: nowrap; }

/* w3schools-style rounded, hoverable pagination */
.pagination-w3 { display: inline-flex; flex-wrap: wrap; gap: 4px; padding-left: 0; list-style: none; }
.pagination-w3 a, .pagination-w3 span {
    color: #04AA6D;
    padding: 8px 14px;
    text-decoration: none;
    transition: background-color .3s;
    border-radius: 8px;
    border: 1px solid #ddd;
    display: inline-block;
}
.pagination-w3 a:hover { background-color: #ddd; }
.pagination-w3 .active { background-color: #04AA6D; color: #fff; border: 1px solid #04AA6D; }
.pagination-w3 .disabled { color: #bbb; pointer-events: none; }
.rows-per-page { display: flex; align-items: center; gap: 8px; }

/* Printer-friendly layout */
.print-only { display: none; }
@media print {
    #megaNav, .floating-avatar-wrap, .footer, #topBtn, .no-print { display: none !important; }
    body { background: #fff; }
    .main-container { margin: 0; padding: 0; }
    .print-table { width: 100%; border-collapse: collapse; font-size: 12px; }
    .print-table th, .print-table td { border: 1px solid #000; padding: 6px 8px; }
    a { color: #000; text-decoration: none; }
}