/**
 * ============================================================================
 * 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:#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:#1e293b;
    --p9-muted-light:#64748b;
    --p9-ring-light:rgba(0, 140, 255, 0.3);
    --p9-bg-dark:#0f172a;
    --p9-panel-dark:rgba(30,41,59,.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, #008CFF 0%, #000000 100%);
    --p9-gradient-hover:linear-gradient(135deg, #0077E6 0%, #1a1a1a 100%)}

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 ────────────────────────────────────── */
.portalcloud9-collapse-btn {
    position:absolute;
    right:-20px;
    top:50%;
    transform:translateY(-50%);
    width:40px;
    height:40px;
    border-radius:50%;
    background:var(--p9-panel);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border:2px solid var(--p9-border);
    cursor:pointer;
    box-shadow:var(--p9-shadow);
    display:grid;
    place-items:center;
    font-size:18px;
    color:var(--p9-text);
    transition:all .3s ease}

.portalcloud9-collapse-btn:hover {
    background:var(--p9-gradient);
    color:#fff;
    transform:translateY(-50%) scale(1.1);
    border-color:var(--p9-accent-1)}

/* ── Collapsed sidebar state ────────────────────────────────────── */
.portalcloud9-sidebar-desktop.collapsed {
    width:80px}

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

.portalcloud9-sidebar-desktop.collapsed .portalcloud9-user-details,.portalcloud9-sidebar-desktop.collapsed .portalcloud9-nav-label {
    display:none}

.portalcloud9-sidebar-desktop.collapsed .portalcloud9-nav-link {
    justify-content:center;
    padding:14px}

.portalcloud9-sidebar-desktop.collapsed /* ── Sidebar header: avatar, user info ───────────────────────────── */
.portalcloud9-sidebar-header {
    padding:20px 10px}

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

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

/* ── 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,

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

cloud9-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)}

/* ── 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);
    border-right:1px solid var(--p9-border);
    box-shadow:var(--p9-shadow);
    transition:all 0.3s ease}

.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 0.3s ease}

.portalcloud9-sidebar-header {
    padding:32px 24px 24px;
    text-align:center;
    border-bottom:1px solid var(--p9-border);
    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 16px;
    overflow-y:auto}

.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);
    transform:translateX(4px)}

.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);
    transform:translateX(4px)}

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

.portalcloud9-nav-icon {
    font-size:18px;
    width:24px;
    text-align:center}

.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 ──────────────────────────────── */


















/* ── Dark mode theme icon visibility ────────────────────────────── */


/* ── 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);
    border-bottom:1px solid var(--p9-border);
    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);
    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:1px solid var(--p9-border);
    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 ──────────────────────────────── */
body.p9-inbox-fullscreen {
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    height: 100% !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;
}

/* 2b. Topbar — hidden in inbox fullscreen, inbox has its own header */
body.p9-inbox-fullscreen .portalcloud9-topbar-desktop {
    display: none !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 — override the base 100vh/100dvh so it fits inside
      the already-bounded content area instead of re-expanding to viewport. */
body.p9-inbox-fullscreen .p9-inbox-wrapper {
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

/* 6. Remove rounded corners */
body.p9-inbox-fullscreen .p9-inbox-wrapper,
body.p9-inbox-fullscreen .p9-inbox-layout {
    border-radius: 0 !important;
}

/* 7. Layout grid — single explicit row fills the container height.
      Without grid-template-rows the row auto-expands to content,
      causing the reply section to overflow below the viewport. */
body.p9-inbox-fullscreen .p9-inbox-layout {
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    grid-template-rows: 100% !important;
}

/* 8. Inbox main column — grid cell must declare min-height:0 so it
      can shrink inside the grid row, and overflow:hidden so children
      that exceed its height are clipped rather than pushed out. */
body.p9-inbox-fullscreen .p9-inbox-main {
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

/* 9. Thread view — fills inbox-main, contains the scroll+reply stack. */
body.p9-inbox-fullscreen .p9-thread-view {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

/* 10. Messages scroller — takes all remaining height above reply bar. */
body.p9-inbox-fullscreen .p9-messages-wrapper {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
}

/* 11. Reply section — always fully visible, never compressed. */
body.p9-inbox-fullscreen .p9-reply-section {
    flex-shrink: 0 !important;
    padding-bottom: 14px !important;
}

/* 12. Product context bar — also fixed height, never compressed. */
body.p9-inbox-fullscreen .p9-product-context {
    flex-shrink: 0 !important;
}