/**
 * ============================================================================
 * 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;
}

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

.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;
    }
}

/* ================================================================
   SIDEBAR REDESIGN — grouped Vendor/Customer sections for any role
   with both capabilities, icon tiles with per-item color, and a
   refined avatar/role pill. Fully hardened, light + dark mode both
   considered for every color used, not just the base state.
   ================================================================ */

/* ---- Icon tiles — every nav icon now sits on its own colored
   background, driven by inline CSS custom properties set per item
   from PHP, so this stylesheet doesn't need to know which role or
   section each icon belongs to. ---- */
.p9-nav-tile {
    width: 30px !important; height: 30px !important; min-width: 30px !important;
    border-radius: 9px !important; background: var(--p9-tile-bg, transparent) !important; color: var(--p9-tile-fg, inherit) !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    font-size: 16px !important; transition: background .15s ease, color .15s ease !important;
}
body.portalcloud9-dark .p9-nav-tile {
    background: var(--p9-tile-bg-dark, transparent) !important; color: var(--p9-tile-fg-dark, inherit) !important;
}
/* Active state always wins over the tile's own resting color — the
   whole pill goes to the theme gradient, so the tile becomes a
   translucent chip on top of it instead, in both modes. */
.portalcloud9-nav-item.active .p9-nav-tile {
    background: rgba(255,255,255,.18) !important; color: #fff !important;
}
body.portalcloud9-dark .portalcloud9-nav-item.active .p9-nav-tile {
    background: rgba(255,255,255,.18) !important; color: #fff !important;
}
.p9-nav-tile svg { stroke: currentColor !important; fill: none !important; color: inherit !important; }

/* ---- Grouped sections — Vendor and Customer, each its own soft
   tinted card, fading toward the bottom rather than a hard box. ---- */
.p9-nav-grouped { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.p9-nav-section { list-style: none !important; border-radius: 14px !important; padding: 8px 6px 10px !important; margin-bottom: 10px !important; }
.p9-nav-section.vendor { background: linear-gradient(180deg, rgba(30,144,255,.10) 0%, rgba(30,144,255,.02) 100%) !important; }
.p9-nav-section.customer { background: linear-gradient(180deg, rgba(124,92,219,.10) 0%, rgba(124,92,219,.02) 100%) !important; }
body.portalcloud9-dark .p9-nav-section.vendor { background: linear-gradient(180deg, rgba(30,144,255,.14) 0%, rgba(30,144,255,.02) 100%) !important; }
body.portalcloud9-dark .p9-nav-section.customer { background: linear-gradient(180deg, rgba(124,92,219,.16) 0%, rgba(124,92,219,.02) 100%) !important; }

.p9-nav-section-label {
    display: flex !important; align-items: center !important; gap: 6px !important;
    font-size: 10px !important; font-weight: 800 !important; letter-spacing: .07em !important; text-transform: uppercase !important;
    padding: 2px 8px 8px !important;
}
.p9-nav-section-label.vendor { color: #1E70DB !important; }
.p9-nav-section-label.customer { color: #6B46C1 !important; }
body.portalcloud9-dark .p9-nav-section-label.vendor { color: #6FB6FF !important; }
body.portalcloud9-dark .p9-nav-section-label.customer { color: #B79CF0 !important; }
.p9-nav-dot { width: 6px !important; height: 6px !important; border-radius: 50% !important; display: inline-block !important; }
.p9-nav-section-label.vendor .p9-nav-dot { background: #1E90FF !important; }
.p9-nav-section-label.customer .p9-nav-dot { background: #7C5CDB !important; }

.p9-nav-section-list { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.p9-nav-utility { list-style: none !important; margin-top: 6px !important; padding-top: 10px !important; border-top: 1px solid var(--p9-border, #F1F5F9) !important; }
body.portalcloud9-dark .p9-nav-utility { border-top-color: rgba(255,255,255,.08) !important; }

/* ---- Avatar ring + role pill polish ---- */
.portalcloud9-avatar-ring {
    position: relative !important; border-radius: 50% !important; padding: 2px !important;
    background: linear-gradient(135deg, var(--p9-gradient-start, #1E90FF), #7C5CDB) !important;
    display: inline-flex !important;
}
.portalcloud9-avatar-ring img { border-radius: 50% !important; display: block !important; }