/**
 * ============================================================================
 * Portal Cloud 9 - Desktop Dashboard Styles
 * ============================================================================
 * 
 * Version: 8.3.6
 * Author: Brian Agoi (Gradyzer)
 * Company: Gradyzer
 * License: GPL-2.0+
 * ============================================================================
 */

/**
 * ============================================================================
 * Portal Cloud 9 - Desktop Dashboard Layout
 * ============================================================================
 * Version: 8.3.5
 * Author: Brian Agoi (Gradyzer)
 * Company: Gradyzer
 * ============================================================================
 */

/* ── CSS custom properties ───────────────────────────────────────── */
:root {
    --p9-sidebar-w:280px;
    --p9-topbar-h:76px;
    --p9-accent-1:var(--p9-accent-1, #008CFF);
    --p9-accent-2:#000000;
    --p9-bg-light:#f1f5f9;
    --p9-panel-light:rgba(255,255,255,.85);
    --p9-border-light:rgba(0,0,0,.08);
    --p9-text-light:var(--p9-panel-dark, rgba(74,74,74,.95));
    --p9-muted-light:#64748b;
    --p9-ring-light:rgba(0, 140, 255, 0.3);
    --p9-bg-dark:#0f172a;
    --p9-panel-dark:rgba(15,23,42,.85);
    --p9-border-dark:rgba(255,255,255,.08);
    --p9-text-dark:#e2e8f0;
    --p9-muted-dark:#94a3b8;
    --p9-ring-dark:rgba(0, 140, 255, 0.4);
    --p9-radius:16px;
    --p9-shadow:0 8px 32px rgba(0,0,0,.15);
    --p9-gradient:linear-gradient(135deg, var(--p9-accent-1, #008CFF) 0%, #000000 100%);
    --p9-gradient-hover:linear-gradient(135deg, #0077E6 0%, #1a1a1a 100%)}

html, body { overflow-x: hidden; margin: 0; padding: 0; }

body {
    --p9-bg:var(--p9-bg-light);
    --p9-panel:var(--p9-panel-light);
    --p9-border:var(--p9-border-light);
    --p9-text:var(--p9-text-light);
    --p9-muted:var(--p9-muted-light);
    --p9-ring:var(--p9-ring-light)}

body.portalcloud9-user-card-glass .portalcloud9-user-details {
    text-align:center}


/* ── Sidebar collapse button — gradient theme, glow, white icon ─── */
.portcld9-sidebar-collapse-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 52px;
    background: var(--p9-gradient, linear-gradient(135deg,#008CFF 0%,#000 30%));
    border: none;
    cursor: pointer;
    color: #ffffff;
    transition: all .25s ease;
    flex-shrink: 0;
    box-shadow: 0 -2px 16px rgba(0,0,0,.18), 0 0 20px var(--p9-ring-30, rgba(0,140,255,.3));
    position: relative;
}

.portcld9-sidebar-collapse-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,.08);
    opacity: 0;
    transition: opacity .2s;
}

.portcld9-sidebar-collapse-btn:hover::after { opacity: 1; }

.portcld9-sidebar-collapse-btn:hover {
    box-shadow: 0 -2px 20px rgba(0,0,0,.25), 0 0 28px var(--p9-ring-40, rgba(0,140,255,.4));
}

.portcld9-sidebar-collapse-btn svg {
    stroke: #ffffff;
    filter: drop-shadow(0 0 4px rgba(255,255,255,.5));
}

body.portalcloud9-dark .portcld9-sidebar-collapse-btn {
    box-shadow: 0 -2px 20px rgba(0,0,0,.4), 0 0 24px var(--p9-ring-40, rgba(0,140,255,.35));
}

/* Show/hide the correct chevron based on state */
.portcld9-chevron-expand  { display: none; }
.portcld9-chevron-collapse { display: block; }

.portalcloud9-sidebar-desktop.collapsed .portcld9-chevron-collapse { display: none; }
.portalcloud9-sidebar-desktop.collapsed .portcld9-chevron-expand   { display: block; }
.portalcloud9-sidebar-desktop.collapsed .portcld9-chevron-expand  { display: block; }

/* ── Collapsed sidebar state ────────────────────────────────────── */
.portalcloud9-sidebar-desktop {
    transition: width .3s cubic-bezier(.4,0,.2,1);
}

.portalcloud9-sidebar-desktop.collapsed {
    width: 72px;
}

.portalcloud9-sidebar-desktop.collapsed .portalcloud9-user-card-glass {
    padding: 16px 10px;
}

.portalcloud9-sidebar-desktop.collapsed .portalcloud9-user-details,
.portalcloud9-sidebar-desktop.collapsed .portalcloud9-theme-toggle,
.portalcloud9-sidebar-desktop.collapsed .portalcloud9-nav-label,
.portalcloud9-sidebar-desktop.collapsed .portcld9-nav-lock-badge,
.portalcloud9-sidebar-desktop.collapsed .portalcloud9-counter {
    display: none;
}

.portalcloud9-sidebar-desktop.collapsed .portalcloud9-nav-link,
.portalcloud9-sidebar-desktop.collapsed .portcld9-nav-link-locked {
    justify-content: center;
    padding: 12px 0;
}

.portalcloud9-sidebar-desktop.collapsed .portalcloud9-sidebar-header {
    padding: 20px 10px;
}

.portalcloud9-sidebar-desktop.collapsed .portalcloud9-avatar-ring {
    width: 40px;
    height: 40px;
}

/* Main content shifts smoothly */
.portalcloud9-main-content-desktop {
    transition: margin-left .3s cubic-bezier(.4,0,.2,1);
}

.portalcloud9-main-content-desktop.expanded {
    margin-left: 72px;
}

/* ── Full-page loading overlay ──────────────────────────────────── */
.portalcloud9-loading {
    display:flex;
    align-items:center;
    justify-content:center;
    padding:40px;
    color:var(--p9-muted)}

.portalcloud9-loading::before {
    content:'';
    width:20px;
    height:20px;
    border:3px solid var(--p9-border);
    border-top-color:var(--p9-accent-1);
    border-radius:50%;
    margin-right:12px;
    animation:spin 1s linear infinite}

@keyframes spin {
    to {
    transform:rotate(360deg)}

}

/* ── Focus and accessibility styles ─────────────────────────────── */
.portalcloud9-nav-link:focus,#portalcloud9-theme-btn:focus {
    outline:2px solid var(--p9-accent-1);
    outline-offset:2px}

* {
    transition:background-color 0.3s ease,border-color 0.3s ease,color 0.3s ease}

body.portalcloud9-dark {
    --p9-bg:var(--p9-bg-dark);
    --p9-panel:var(--p9-panel-dark);
    --p9-border:var(--p9-border-dark);
    --p9-text:var(--p9-text-dark);
    --p9-muted:var(--p9-muted-dark);
    --p9-ring:var(--p9-ring-dark);
    background:var(--p9-bg-dark, #0f172a);}

/* ── Main dashboard wrapper: sidebar + content grid ─────────────── */
.portalcloud9-dashboard-wrapper {
    background:var(--p9-bg);
    min-height:100vh;
    padding:0;
    margin:0;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}

/* ── Sidebar panel ──────────────────────────────────────────────── */
.portalcloud9-sidebar-desktop {
    width:var(--p9-sidebar-w);
    height:100vh;
    position:fixed;
    top:0;
    left:0;
    display:flex;
    flex-direction:column;
    z-index:100;
    background:var(--p9-panel);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    box-shadow:var(--p9-shadow);
    transition:width .3s cubic-bezier(.4,0,.2,1);
    overflow:hidden;
}

.portalcloud9-main-content-desktop {
    margin-left:var(--p9-sidebar-w);
    min-height:100vh;
    display:flex;
    flex-direction:column;
    background:var(--p9-bg);
    transition:margin-left .3s cubic-bezier(.4,0,.2,1);
}

/* ── Reset theme-inherited body/page spacing ──────────────────────
   wp_head()/wp_footer() still run on this standalone page, which
   means the active theme's global stylesheet (body, html, #page,
   .site, etc.) loads too — and many themes apply top padding/margin
   on body or their page wrapper to clear a sticky header that does
   not exist here (admin bar is force-disabled). Reset the box model
   on the root elements so the plugin wrapper starts at the true top
   of the viewport with zero inherited offset. */
body.portalcloud9-portal-page,
html:has(body.portalcloud9-portal-page) {
    margin: 0 !important;
    padding: 0 !important;
}

body.portalcloud9-portal-page .portalcloud9-dashboard-wrapper {
    margin: 0 !important;
    padding: 0 !important;
}

body.portalcloud9-portal-page .portalcloud9-dashboard-wrapper,
body.portalcloud9-portal-page .portalcloud9-main-content-desktop,
body.portalcloud9-portal-page .portalcloud9-sidebar-desktop {
    box-sizing: border-box;
}

.portalcloud9-sidebar-header {
    padding:32px 24px 24px;
    text-align:center;
    /* border-bottom removed */
    margin-bottom:20px}

.portalcloud9-user-info {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px}

.portalcloud9-avatar-ring {
    width:80px;
    height:80px;
    margin:0 auto;
    position:relative;
    border-radius:50%;
    background:var(--p9-panel);
    padding:4px;
    box-shadow:0 0 0 3px var(--p9-ring),var(--p9-shadow);
    transition:all 0.3s ease}

.portalcloud9-avatar-ring:hover {
    transform:scale(1.05);
    box-shadow:0 0 0 3px var(--p9-accent-1),0 8px 25px rgb(0 0 0 / .2)}

.portalcloud9-avatar-ring img {
    width:100%;
    height:100%;
    border-radius:50%;
    object-fit:cover}

.portalcloud9-user-details h3 {
    margin:0 0 4px;
    font-size:20px;
    font-weight:700;
    color:var(--p9-text)}

.portalcloud9-user-details p {
    margin:0;
    font-size:14px;
    color:var(--p9-muted)}

/* ── Sidebar navigation list ────────────────────────────────────── */
.portalcloud9-sidebar-nav {
    flex: 1;
    padding: 0 12px;
    overflow-y: auto;
    overflow-x: hidden;
    /* Ensure last nav item has breathing room above the collapse button */
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    min-height: 0;
}

.portalcloud9-sidebar-nav ul {
    list-style:none;
    margin:0;
    padding:0}

.portalcloud9-nav-item {
    margin:0 0 8px 0}

.portalcloud9-nav-link {
    display:flex;
    align-items:center;
    gap:14px;
    padding:14px 20px;
    color:var(--p9-muted);
    text-decoration:none;
    border-radius:var(--p9-radius);
    transition:all .3s ease;
    font-weight:500;
    position:relative;
    overflow:hidden}

.portalcloud9-nav-link::before {
    content:'';
    position:absolute;
    top:0;
    left:-100%;
    width:100%;
    height:100%;
    background:var(--p9-gradient);
    opacity:.1;
    transition:left 0.3s ease}

.portalcloud9-nav-link:hover {
    background:rgb(0 140 255 / .1);
    color:var(--p9-text);
}

.portalcloud9-nav-link:hover::before {
    left:0}

.portalcloud9-nav-item.active .portalcloud9-nav-link {
    background:var(--p9-gradient);
    color:#fff;
    box-shadow:0 4px 20px rgb(0 140 255 / .35);
}

.portalcloud9-nav-item.active .portalcloud9-nav-link::before {
    display:none}

.portalcloud9-nav-icon {
    font-size:18px;
    width:24px;
    text-align:center;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    color: var(--p9-text);
}

/* Ensure SVG nav icons inherit the link color in all states */
.portalcloud9-nav-link .portalcloud9-nav-icon svg,
.portcld9-nav-link-locked .portalcloud9-nav-icon svg {
    stroke: currentColor;
    fill: none;
    color: inherit;
}

body.portalcloud9-dark .portalcloud9-nav-link .portalcloud9-nav-icon,
body.portalcloud9-dark .portcld9-nav-link-locked .portalcloud9-nav-icon {
    color: rgba(255,255,255,.75);
}

body.portalcloud9-dark .portalcloud9-nav-link:hover .portalcloud9-nav-icon,
body.portalcloud9-dark .portalcloud9-nav-item.active .portalcloud9-nav-link .portalcloud9-nav-icon {
    color: #ffffff;
}

.portalcloud9-nav-label {
    flex:1}

/* ── Nav item counter and badge ─────────────────────────────────── */
.portalcloud9-counter {
    margin-left:auto}

.portalcloud9-counter-badge {
    background:#ef4444;
    color:#fff;
    font-size:11px;
    padding:2px 6px;
    border-radius:10px;
    min-width:18px;
    text-align:center;
    font-weight:600}

/* ── Dark/light mode toggle button ──────────────────────────────── */
.portalcloud9-theme-toggle {
    display:flex;
    justify-content:center;
    padding:20px 0}

#portalcloud9-theme-btn {
    width:48px;
    height:48px;
    border-radius:50%;
    background:var(--p9-panel);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border: none;
    cursor:pointer;
    box-shadow:var(--p9-shadow);
    position:relative;
    overflow:hidden;
    transition:all 0.3s ease}

#portalcloud9-theme-btn:hover {
    transform:scale(1.1);
    border-color:var(--p9-accent-1);
    box-shadow:0 0 0 3px rgb(0 140 255 / .2),var(--p9-shadow)}

.portalcloud9-theme-icon {
    position:absolute;
    inset:0;
    display:grid;
    place-items:center;
    font-size:20px;
    transition:all .3s ease}

.portalcloud9-theme-icon svg {
    width:22px;
    height:22px}

.portalcloud9-theme-icon.sun {
    opacity:1;
    transform:rotate(0deg)}

.portalcloud9-theme-icon.sun svg {
    color:#fbbf24;
    stroke:#fbbf24}

.portalcloud9-theme-icon.moon {
    opacity:0;
    transform:rotate(180deg)}

.portalcloud9-theme-icon.moon svg {
    color:#ffffff;
    stroke:#ffffff}

/* ── Dark mode theme icon visibility ────────────────────────────── */
body.portalcloud9-dark .portalcloud9-theme-icon.sun {
    opacity:0;
    transform:rotate(-180deg)}

body.portalcloud9-dark .portalcloud9-theme-icon.moon {
    opacity:1;
    transform:rotate(0deg)}

/* ── Desktop top bar ────────────────────────────────────────────── */
.portalcloud9-topbar-desktop {
    height:var(--p9-topbar-h);
    padding:0 32px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    background:var(--p9-panel);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    box-shadow: 0 2px 16px rgba(0,0,0,.07);
    position:sticky;
    top:0;
    z-index:50}

.portalcloud9-topbar-left {
    flex:1}

.portalcloud9-topbar-actions {
    display:flex;
    align-items:center;
    gap:20px}

/* ── Notification bubble in top bar ─────────────────────────────── */
.portalcloud9-notification-bubble {
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:6px 14px;
    background:var(--p9-gradient);
    color:#fff;
    text-decoration:none;
    border-radius:22px;
    font-size:13px;
    font-weight:500;
    box-shadow:0 4px 15px rgb(0 140 255 / .3);
    transition:all 0.3s ease}

.portalcloud9-notification-bubble:hover {
    transform:translateY(-2px);
    box-shadow:0 6px 20px rgb(0 140 255 / .4)}

.portalcloud9-bubble-icon {
    font-size:15px}

.portalcloud9-bubble-icon svg {
    width:16px;
    height:16px;
    stroke:#fff}

.portalcloud9-bubble-count {
    background:rgb(255 255 255 / .3);
    padding:2px 7px;
    border-radius:11px;
    font-size:11px;
    font-weight:600;
    min-width:18px;
    text-align:center}

/* ── Top bar user menu avatar ───────────────────────────────────── */
.portalcloud9-user-menu {
    width:44px;
    height:44px;
    border-radius:50%;
    background:var(--p9-panel);
    padding:2px;
    box-shadow:0 0 0 2px var(--p9-ring),var(--p9-shadow);
    transition:all 0.3s ease;
    cursor:pointer}

.portalcloud9-user-menu:hover {
    transform:scale(1.05);
    box-shadow:0 0 0 2px var(--p9-accent-1),0 4px 15px rgb(0 0 0 / .15)}

.portalcloud9-user-menu img {
    width:100%;
    height:100%;
    border-radius:50%;
    object-fit:cover}

/* ── Page title and icon ────────────────────────────────────────── */
.portalcloud9-page-title {
    margin:0;
    font-size:28px;
    font-weight:700;
    color:var(--p9-text);
    display:flex;
    align-items:center;
    gap:12px}

.portalcloud9-page-icon {
    font-size:32px}

.portalcloud9-page-icon svg {
    width:32px;
    height:32px;
    stroke-width:2}

/* ── Main content area ──────────────────────────────────────────── */
.portalcloud9-content {
    flex:1;
    padding:32px;
    color:var(--p9-text);
    background:var(--p9-bg);
    min-height:calc(100vh - var(--p9-topbar-h))}

/* ── Responsive: tablet breakpoint ──────────────────────────────── */
@media (max-width:1024px) {
    .portalcloud9-sidebar-desktop {
    transform:translateX(-100%);
    transition:transform .3s ease}

.portalcloud9-sidebar-desktop.open {
    transform:translateX(0)}

.portalcloud9-main-content-desktop {
    margin-left:0}

.portalcloud9-topbar-desktop {
    padding:0 20px}

.portalcloud9-page-title {
    font-size:24px}

}

/* ── Responsive: mobile breakpoint ──────────────────────────────── */
@media (max-width:768px) {
    .portalcloud9-content {
    padding:20px}

.portalcloud9-topbar-desktop {
    height:64px;
    padding:0 16px}

.portalcloud9-page-title {
    font-size:20px}

.portalcloud9-sidebar-desktop {
    width:100%}

}

.portalcloud9-user-card-glass {
    margin:0 16px 24px;
    padding:24px 20px;
    background:var(--p9-panel);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    border: none;
    border-radius:var(--p9-radius);
    box-shadow:var(--p9-shadow);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
    position:relative;
    transition:all 0.3s ease}

.portalcloud9-user-card-glass:hover {
    transform:translateY(-2px);
    box-shadow:0 12px 40px rgb(0 0 0 / .2)}

.portalcloud9-user-card-glass .portalcloud9-avatar-ring {
    width:64px;
    height:64px;
    margin:0}



/* ==========================================================================
   INBOX FULLSCREEN MODE
   The theme header/footer are bypassed via PHP (dashboard.php outputs its
   own HTML shell). These rules lock the height chain so the inbox fills
   exactly the viewport with no overflow at the bottom.
   ========================================================================== */

/* 1. Root — no body scroll, fills 100% */
/* ── Inbox fullscreen overlay mode ──────────────────────────────── */
html:has(body.p9-inbox-fullscreen) {
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    height: 100vh !important;
    height: 100dvh !important;
    width: 100% !important;
}

body.p9-inbox-fullscreen {
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    height: 100vh !important;
    height: 100dvh !important;
    width: 100% !important;
}

/* 2. Portal wrapper — full viewport */
body.p9-inbox-fullscreen .portalcloud9-dashboard-wrapper {
    height: 100vh !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 3. Main column — strict 100vh flex column, nothing can escape */
body.p9-inbox-fullscreen .portalcloud9-main-content-desktop {
    height: 100vh !important;
    min-height: 0 !important;
    max-height: 100vh !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

/* 4. Content area — take whatever is left after the topbar (76px).
      padding:0 so there's no gap around the inbox panel.
      height:0 + flex:1 is the standard trick to make a flex child
      fill remaining space without pushing past it.               */
body.p9-inbox-fullscreen .portalcloud9-content {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* 5. Inbox wrapper — fill its parent exactly (parent is now bounded) */
body.p9-inbox-fullscreen .p9-inbox-wrapper {
    height: 100% !important;
    max-height: 100% !important;
}

/* 6. Remove rounded corners — inbox fills the full viewport on desktop */
body.p9-inbox-fullscreen .p9-inbox-wrapper,
body.p9-inbox-fullscreen .p9-inbox-layout {
    border-radius: 0 !important;
}

/* 7. Topbar — the page never scrolls in fullscreen mode, so the
      sticky positioning is unnecessary. The combination of
      position:sticky + backdrop-filter:blur() on the topbar was
      bleeding/smearing the area above it into a visible gradient
      strip. Switching to static flow removes that artefact while
      the topbar still sits flush at the top of the flex column. */
body.p9-inbox-fullscreen .portalcloud9-topbar-desktop {
    position: static !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    background: var(--p9-panel) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   Desktop sidebar — slimmer nav items, subtle separator shadows,
   extra breathing room above the first item.
   This file is desktop-only; mobile-dashboard.css is not affected.
   ═══════════════════════════════════════════════════════════════════ */

.portalcloud9-sidebar-nav ul {
    padding-top: 16px;
}

.portalcloud9-nav-item {
    margin: 0;
    box-shadow: 0 1px 0 rgba(0,0,0,.22);
}

.portalcloud9-nav-link {
    padding: 9px 20px;
}

.portalcloud9-nav-item.active {
    box-shadow: 0 3px 10px rgba(0,0,0,.30);
}


/* ═══════════════════════════════════════════════════════════════
   BELL NOTIFICATION BUTTON + DRAWER
   ═══════════════════════════════════════════════════════════════ */

/* ── Bell wrap (positioning context for drawer) ── */
.p9-bell-wrap {
    position: relative;
    flex-shrink: 0;
}

/* ── Bell button ── */
.p9-bell-btn {
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--p9-panel);
    border: 1px solid rgba(0,0,0,.13);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .2s, border-color .2s;
    flex-shrink: 0;
}

body.portalcloud9-dark .p9-bell-btn {
    border-color: rgba(255,255,255,.12);
}

.p9-bell-btn svg {
    width: 35px;
    height: 35px;
    stroke: var(--p9-text);
    stroke-width: 1px;
    transition: stroke .2s;
    overflow: visible;
}

.p9-bell-btn:hover,
.p9-bell-btn[aria-expanded="true"] {
    background: rgba(0,140,255,.1);
    border-color: rgba(0,140,255,.35);
}

body.portalcloud9-dark .p9-bell-btn:hover,
body.portalcloud9-dark .p9-bell-btn[aria-expanded="true"] {
    background: rgba(0,140,255,.18);
    border-color: rgba(0,140,255,.4);
}

.p9-bell-btn:hover svg,
.p9-bell-btn[aria-expanded="true"] svg {
    stroke: #008CFF;
}

body.portalcloud9-dark .p9-bell-btn:hover svg,
body.portalcloud9-dark .p9-bell-btn[aria-expanded="true"] svg {
    stroke: #60b4ff;
}

/* ── Bell badge ── */
.p9-bell-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 20px;
    height: 20px;
    font-size: 10px;
    border-radius: 99px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 800;
    color: #fff !important;
    padding: 0 4px;
    line-height: 1;
    border: 2px solid var(--p9-bg, #f0f4fa);
    pointer-events: none;
    transition: background .2s;
}

body.portalcloud9-dark .p9-bell-badge {
    border-color: #000;
}

.p9-bell-badge--green { background: #16a34a; }
.p9-bell-badge--red   { background: #dc2626; }

/* ── Nav counter badge ── */
.portalcloud9-counter {
    margin-left: auto;
}

.portalcloud9-counter-badge {
    min-width: 20px;
    height: 20px;
    border-radius: 99px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 800;
    color: #fff !important;
    padding: 0 5px;
    line-height: 1;
    transition: background .2s;
}

.portalcloud9-counter-badge.p9-count--green { background: #16a34a; }
.portalcloud9-counter-badge.p9-count--red   { background: #dc2626; }
/* Fallback if no class set yet */
.portalcloud9-counter-badge:not(.p9-count--green):not(.p9-count--red) { background: #dc2626; }

/* ── Bell drawer ── */
.p9-bell-drawer {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 310px;
    background: var(--p9-panel);
    border-radius: 14px;
    border: 0.5px solid rgba(0,0,0,.1);
    box-shadow: 0 12px 40px rgba(0,0,0,.15), 0 2px 8px rgba(0,0,0,.08);
    z-index: 9999;
    overflow: hidden;
    /* animate in */
    transform-origin: top right;
    animation: p9DrawerIn .18s ease-out;
}

body.portalcloud9-dark .p9-bell-drawer {
    background: rgba(8,8,20,.96);
    border-color: rgba(255,255,255,.1);
    box-shadow: 0 12px 50px rgba(0,0,0,.6), 0 2px 8px rgba(0,0,0,.3);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

.p9-bell-drawer[hidden] {
    display: none;
}

@keyframes p9DrawerIn {
    from { opacity: 0; transform: scale(.95) translateY(-6px); }
    to   { opacity: 1; transform: scale(1)  translateY(0); }
}

/* Drawer header */
.p9-bell-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 16px;
    background: var(--p9-gradient-30, linear-gradient(135deg, var(--p9-accent-1, #008CFF) 0%, #000 30%));
}

.p9-bell-drawer-title {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
}

.p9-bell-mark-all {
    font-size: 11px;
    color: rgba(255,255,255,.75);
    font-weight: 500;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: color .15s;
}

.p9-bell-mark-all:hover {
    color: #fff;
}

/* Drawer list */
.p9-bell-drawer-list {
    max-height: 280px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Drawer item — anchor tag, opens exact thread */
.p9-bell-drawer-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border-bottom: 0.5px solid rgba(0,0,0,.07);
    cursor: pointer;
    text-decoration: none;
    transition: background .15s;
}

body.portalcloud9-dark .p9-bell-drawer-item {
    border-color: rgba(255,255,255,.05);
}

.p9-bell-drawer-item:last-child {
    border-bottom: none;
}

.p9-bell-drawer-item.is-unread {
    background: rgba(0,140,255,.07);
}

body.portalcloud9-dark .p9-bell-drawer-item.is-unread {
    background: rgba(0,140,255,.18);
}

.p9-bell-drawer-item:hover {
    background: rgba(0,140,255,.1);
}

body.portalcloud9-dark .p9-bell-drawer-item:hover {
    background: rgba(0,140,255,.24);
}

/* Item avatar */
.p9-bell-item-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--p9-gradient, linear-gradient(135deg,#008CFF,#000));
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    overflow: hidden;
}

.p9-bell-item-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

/* Item body */
.p9-bell-item-body {
    flex: 1;
    min-width: 0;
}

.p9-bell-item-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--p9-text);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.p9-bell-item-preview {
    font-size: 11px;
    color: var(--p9-text-muted, #64748b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.portalcloud9-dark .p9-bell-item-preview {
    color: rgba(255,255,255,.5);
}

/* Item meta */
.p9-bell-item-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
    flex-shrink: 0;
}

.p9-bell-item-time {
    font-size: 10px;
    color: var(--p9-text-muted, #94a3b8);
}

body.portalcloud9-dark .p9-bell-item-time {
    color: rgba(255,255,255,.35);
}

.p9-bell-item-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #008CFF;
    flex-shrink: 0;
}

/* Empty state */
.p9-bell-drawer-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 28px 16px;
    color: var(--p9-text-muted, #94a3b8);
    font-size: 12px;
}

body.portalcloud9-dark .p9-bell-drawer-empty {
    color: rgba(255,255,255,.35);
}

.p9-bell-drawer-empty svg {
    width: 32px;
    height: 32px;
    stroke: currentColor;
    opacity: .4;
}

/* Drawer footer */
.p9-bell-drawer-foot {
    padding: 11px 14px;
    text-align: center;
    border-top: 0.5px solid rgba(0,0,0,.07);
}

body.portalcloud9-dark .p9-bell-drawer-foot {
    border-color: rgba(255,255,255,.07);
}

.p9-bell-view-all {
    font-size: 12px;
    font-weight: 600;
    color: #008CFF;
    text-decoration: none;
    transition: opacity .15s;
}

body.portalcloud9-dark .p9-bell-view-all {
    color: #60b4ff;
}

.p9-bell-view-all:hover {
    opacity: .8;
}

/* ── Mobile bell: same button, no drawer (drawer lives in the topbar area) ── */
@media (max-width: 768px) {
    .p9-bell-drawer {
        position: fixed;
        top: 60px;
        right: 8px;
        left: 8px;
        width: auto;
        border-radius: 12px;
    }
}