/* V93 unified dashboard/sidebar styling
   Purpose: investor dashboard should not use the older dark sidebar when admin/fundraiser use the newer light enterprise shell. */

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

/* Password fixes for old login screens */
input[type="password"],
input[data-password-field]{
  padding-right:54px !important;
}
.password-field,
.password-wrapper,
.pp-password-wrap,
.input-group{
  position:relative;
}
.toggle-password,
.password-toggle,
.show-password,
.eye,
.eye-icon,
[class*="eye"]{
  cursor:pointer !important;
  pointer-events:auto !important;
}

/* Investor dashboard light shell normalization */
body.investor-dashboard,
body.dashboard-investor,
body.user-dashboard,
.investor-dashboard-page,
.investor-shell,
.user-dashboard-shell{
  background:#f5f8fc !important;
  color:var(--pp-ink) !important;
}

.investor-sidebar,
.user-sidebar,
.dashboard-sidebar,
.sidebar.investor,
.sidebar-user,
aside.investor-sidebar,
aside.user-sidebar{
  background:#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;
}

.investor-sidebar a,
.user-sidebar a,
.dashboard-sidebar a,
.sidebar.investor a,
.sidebar-user a,
aside.investor-sidebar a,
aside.user-sidebar a,
.investor-sidebar .nav-link,
.user-sidebar .nav-link,
.dashboard-sidebar .nav-link{
  color:var(--pp-ink) !important;
  background:transparent !important;
  border-radius:14px !important;
  font-weight:800 !important;
}

.investor-sidebar a:hover,
.user-sidebar a:hover,
.dashboard-sidebar a:hover,
.sidebar.investor a:hover,
.sidebar-user a:hover,
.investor-sidebar a.active,
.user-sidebar a.active,
.dashboard-sidebar a.active,
.sidebar.investor a.active,
.sidebar-user a.active,
.investor-sidebar .active,
.user-sidebar .active,
.dashboard-sidebar .active{
  background:#eef4ff !important;
  color:var(--pp-navy) !important;
}

.investor-sidebar .logo,
.user-sidebar .logo,
.dashboard-sidebar .logo,
.investor-sidebar .brand,
.user-sidebar .brand,
.dashboard-sidebar .brand,
.investor-sidebar h1,
.user-sidebar h1,
.dashboard-sidebar h1{
  color:var(--pp-navy) !important;
}

.investor-dashboard main,
.user-dashboard main,
.dashboard-content,
.investor-main,
.user-main{
  background:#f5f8fc !important;
}

/* Cards/dashboard widgets shared enterprise appearance */
.investor-dashboard .card,
.user-dashboard .card,
.investor-card,
.dashboard-card,
.stat-card,
.kpi-card{
  background:#fff !important;
  border:1px solid var(--pp-line) !important;
  border-radius:22px !important;
  box-shadow:0 18px 50px rgba(7,27,103,.07) !important;
}

@media(max-width:980px){
  .investor-sidebar,
  .user-sidebar,
  .dashboard-sidebar,
  .sidebar.investor,
  .sidebar-user{
    position:relative !important;
    width:100% !important;
    min-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);}
}