/* V94 investor dashboard light sidebar + link safety */

:root{
  --pp-navy:#071B67;
  --pp-gold:#E5A800;
  --pp-ink:#00164f;
  --pp-muted:#5f6b8a;
  --pp-line:#dbe4f2;
  --pp-bg:#f5f8fc;
  --pp-card:#ffffff;
}

/* Force the investor/user dashboard sidebar to the same light direction as admin/fundraiser. */
body:has(.investor-dashboard),
body:has(.investor-shell),
body:has(.investor-main),
body:has(.user-dashboard),
body:has(.portfolio-dashboard){
  background:#f5f8fc !important;
}

/* Actual sidebar selectors from the current investor dashboard screenshot and common variants */
body:not(.admin) aside,
body:not(.admin) .sidebar,
body:not(.admin) .dashboard-sidebar,
body:not(.admin) .investor-sidebar,
body:not(.admin) .user-sidebar,
body:not(.admin) .side-nav,
body:not(.admin) .sidenav,
body:not(.admin) .dashboard-nav,
body:not(.admin) nav.sidebar,
body:not(.admin) .app-sidebar,
body:not(.admin) .left-sidebar {
  background:#ffffff !important;
  background-color:#ffffff !important;
  color:var(--pp-ink) !important;
  border-right:1px solid var(--pp-line) !important;
  box-shadow:8px 0 34px rgba(7,27,103,.06) !important;
}

/* Do not damage public page normal nav/footer */
body:not(.admin) .public-header,
body:not(.admin) .site-header,
body:not(.admin) header:not(.dashboard-header):not(.topbar):not(.top-bar) {
  background:inherit;
}

/* Logo area */
body:not(.admin) aside .logo,
body:not(.admin) aside .brand,
body:not(.admin) .sidebar .logo,
body:not(.admin) .sidebar .brand,
body:not(.admin) .dashboard-sidebar .logo,
body:not(.admin) .dashboard-sidebar .brand {
  background:#ffffff !important;
  color:var(--pp-navy) !important;
  border-color:var(--pp-line) !important;
}

/* Sidebar text */
body:not(.admin) aside *,
body:not(.admin) .sidebar *,
body:not(.admin) .dashboard-sidebar *,
body:not(.admin) .investor-sidebar *,
body:not(.admin) .user-sidebar *,
body:not(.admin) .side-nav *,
body:not(.admin) .sidenav *,
body:not(.admin) .dashboard-nav *,
body:not(.admin) .app-sidebar * {
  color:var(--pp-ink) !important;
  border-color:transparent !important;
}

/* Sidebar links */
body:not(.admin) aside a,
body:not(.admin) .sidebar a,
body:not(.admin) .dashboard-sidebar a,
body:not(.admin) .investor-sidebar a,
body:not(.admin) .user-sidebar a,
body:not(.admin) .side-nav a,
body:not(.admin) .sidenav a,
body:not(.admin) .dashboard-nav a,
body:not(.admin) .app-sidebar a,
body:not(.admin) aside button,
body:not(.admin) .sidebar button,
body:not(.admin) .dashboard-sidebar button {
  color:var(--pp-ink) !important;
  background:transparent !important;
  border-radius:14px !important;
  font-weight:850 !important;
  text-decoration:none !important;
}

/* Active/hover states */
body:not(.admin) aside a:hover,
body:not(.admin) .sidebar a:hover,
body:not(.admin) .dashboard-sidebar a:hover,
body:not(.admin) .investor-sidebar a:hover,
body:not(.admin) .user-sidebar a:hover,
body:not(.admin) aside a.active,
body:not(.admin) .sidebar a.active,
body:not(.admin) .dashboard-sidebar a.active,
body:not(.admin) .investor-sidebar a.active,
body:not(.admin) .user-sidebar a.active,
body:not(.admin) aside .active,
body:not(.admin) .sidebar .active,
body:not(.admin) .dashboard-sidebar .active,
body:not(.admin) .investor-sidebar .active,
body:not(.admin) .user-sidebar .active {
  background:#eef4ff !important;
  color:var(--pp-navy) !important;
}

/* If the active item had blue filled background, make it a soft light active state */
body:not(.admin) aside a[style*="background"],
body:not(.admin) .sidebar a[style*="background"],
body:not(.admin) .dashboard-sidebar a[style*="background"] {
  background:#eef4ff !important;
  color:var(--pp-navy) !important;
}

/* Top dashboard header link/button consistency */
.dashboard-header a[href="#"],
.topbar a[href="#"],
.top-bar a[href="#"],
.dashboard-topbar a[href="#"],
header a[href="#"] {
  cursor:pointer;
}

/* Main dashboard surface */
body:not(.admin) .dashboard-main,
body:not(.admin) .main-content,
body:not(.admin) .content,
body:not(.admin) .investor-main,
body:not(.admin) .user-main {
  background:#f5f8fc !important;
}

/* Mobile */
@media(max-width:980px){
  body:not(.admin) aside,
  body:not(.admin) .sidebar,
  body:not(.admin) .dashboard-sidebar,
  body:not(.admin) .investor-sidebar,
  body:not(.admin) .user-sidebar {
    position:relative !important;
    width:100% !important;
    min-height:auto !important;
    height:auto !important;
  }
}


/* Phase 5AC: global mobile width expansion
   Goal: stop mobile pages/cards/forms from rendering as narrow center columns after login.
   Scope: mobile/tablet only; desktop layout is untouched. */
@media (max-width: 768px){
  :root{--pp-mobile-gutter:12px;--pp-mobile-page-width:calc(100vw - 24px);}
  html,body{width:100%!important;max-width:100%!important;overflow-x:hidden!important;}

  /* Public and shared page containers */
  body .wide,
  body .container,
  body .site-container,
  body .page-container,
  body .section-container,
  body .content-container,
  body .public-page,
  body .public-shell,
  body .main-shell,
  body main,
  body .main,
  body .page-main{
    width:var(--pp-mobile-page-width)!important;
    max-width:var(--pp-mobile-page-width)!important;
    margin-left:auto!important;
    margin-right:auto!important;
    padding-left:0!important;
    padding-right:0!important;
    box-sizing:border-box!important;
  }

  /* Auth/login/register/reset cards across all roles */
  body .auth-wrap,
  body .auth-shell,
  body .login-wrap,
  body .register-wrap,
  body .password-wrap,
  body .auth-container,
  body .login-container,
  body .register-container,
  body .auth-card,
  body .login-card,
  body .register-card,
  body .password-card,
  body .reset-card,
  body .mfa-card,
  body .admin-login-card,
  body .pp-auth-card,
  body .pp-login-card,
  body .auth-panel,
  body .login-panel{
    width:var(--pp-mobile-page-width)!important;
    max-width:480px!important;
    min-width:0!important;
    margin-left:auto!important;
    margin-right:auto!important;
    box-sizing:border-box!important;
  }

  body .auth-card,
  body .login-card,
  body .register-card,
  body .password-card,
  body .reset-card,
  body .mfa-card,
  body .admin-login-card,
  body .pp-auth-card,
  body .pp-login-card,
  body .auth-panel,
  body .login-panel{
    padding-left:clamp(18px,5vw,26px)!important;
    padding-right:clamp(18px,5vw,26px)!important;
  }

  /* Logged-in role shells: investor, fundraiser, issuer, admin and admin-role screens */
  body .role-shell,
  body .investor-shell,
  body .fundraiser-enterprise-shell,
  body .ppx-role-shell-fundraiser,
  body .admin-shell,
  body .enterprise-shell{
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    box-sizing:border-box!important;
  }

  body .role-main,
  body .investor-main,
  body .issuer-main,
  body .ppx-main,
  body .ppx-role-main-fundraiser,
  body .admin-main,
  body .admin-content,
  body .admin-page,
  body .dashboard-main,
  body .dashboard-content,
  body .account-main,
  body .account-content,
  body .workspace-main,
  body .workspace-content{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    padding-left:var(--pp-mobile-gutter)!important;
    padding-right:var(--pp-mobile-gutter)!important;
    box-sizing:border-box!important;
    margin-left:0!important;
    margin-right:0!important;
  }

  /* Common dashboard cards/sections should use available width instead of narrow caps */
  body .dashboard-card,
  body .metric-card,
  body .kpi-card,
  body .module-card,
  body .panel,
  body .card,
  body .section-card,
  body .form-card,
  body .table-card,
  body .command-card,
  body .fse-card,
  body .fcb-card,
  body .investor-card,
  body .admin-card{
    max-width:100%!important;
    box-sizing:border-box!important;
  }

  /* Forms and inputs should be comfortably full width on phones */
  body form,
  body .form-grid,
  body .input-group,
  body .field,
  body label,
  body input,
  body select,
  body textarea,
  body button[type="submit"]{
    max-width:100%!important;
    box-sizing:border-box!important;
  }
  body input,
  body select,
  body textarea{
    width:100%!important;
    min-height:48px;
    font-size:16px!important;
  }

  /* Prevent nested grids from creating narrow columns on mobile */
  body .grid,
  body .cards-grid,
  body .stats-grid,
  body .kpi-grid,
  body .dashboard-grid,
  body .content-grid,
  body .form-grid,
  body .two-col,
  body .three-col,
  body .four-col{
    min-width:0!important;
  }
}

@media (min-width: 390px) and (max-width: 768px){
  :root{--pp-mobile-gutter:14px;--pp-mobile-page-width:calc(100vw - 28px);}
}

@media (max-width: 380px){
  :root{--pp-mobile-gutter:10px;--pp-mobile-page-width:calc(100vw - 20px);}
}