/*
  CUBE — Profile Page Extras
  Additive only. Loaded AFTER home.css / profile.css / glass-overlay.css.
  Covers: stronger glass profile banner, stylish avatar box,
  collapsible sidebar, logout button.
*/

/* ================================================
   TOP NAVBAR — remove own-profile icon box, make
   header fully transparent (matches page background)
   ================================================ */
.top-navbar,
.top-navbar * {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
}

.top-navbar .navbar-avatar,
.top-navbar .navbar-avatar * {
  display: none !important;
}

/* ================================================
   PROFILE BANNER — heavier glass than other cards
   ================================================ */
.profile-banner {
  background: rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(28px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(160%) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow:
    0 12px 48px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  position: relative;
  overflow: hidden;
}

.profile-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 15% 0%, rgba(227, 17, 54, 0.25), transparent 55%);
  pointer-events: none;
}

/* ================================================
   AVATAR BOX — enhance the existing conic-gradient ring
   from profile.css, don't fight it. profile.css already
   sets a fixed 108px avatar + ring — we just add glow,
   a hover pop, and size it up slightly for more presence.
   ================================================ */
.avatar-ring {
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.08), 0 8px 28px rgba(227, 17, 54, 0.35);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.avatar-ring:hover {
  transform: scale(1.05) rotate(2deg);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.14), 0 14px 40px rgba(227, 17, 54, 0.5);
}

.profile-avatar {
  width: 128px !important;
  height: 128px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

/* ================================================
   LOGOUT BUTTON — sits below Edit Profile
   ================================================ */
.profile-action-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.logout-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 10px;
  background: rgba(227, 17, 54, 0.12);
  border: 1px solid rgba(227, 17, 54, 0.4);
  color: #ff8fa0;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background 0.25s ease, transform 0.2s ease;
}

.logout-btn:hover {
  background: rgba(227, 17, 54, 0.22);
  transform: translateY(-1px);
}

/* ================================================
   SEND MESSAGE BUTTON — admin/CUBE platform
   ================================================ */
.profile-message-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff;
  font-weight: 700;
  font-size: 13.5px;
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background 0.2s ease, transform 0.2s ease;
}

.profile-message-btn:hover {
  background: rgba(255, 255, 255, 0.32);
  transform: translateY(-1px);
}

/* ================================================
   SIDEBAR COLLAPSE TOGGLE
   ================================================ */
.sidebar {
  position: relative;
  transition: width 0.35s ease, min-width 0.35s ease, background 0.35s ease,
              border-color 0.35s ease, box-shadow 0.35s ease, padding 0.35s ease;
}

.sidebar-toggle-btn {
  position: absolute;
  top: 18px;
  left: 18px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #f2e9e9;
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 5;
  transition: background 0.2s ease, transform 0.2s ease;
}

.sidebar-toggle-btn:hover {
  background: rgba(227, 17, 54, 0.25);
  transform: scale(1.08);
}

/* Push logo down a bit so it doesn't collide with the toggle button */
.sidebar .logo {
  margin-top: 34px;
}

/* Collapsed state: keep only logo + full-form title visible, panel goes transparent */
.dashboard.sidebar-collapsed .sidebar {
  width: 230px !important;
  min-width: 230px !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
}

.dashboard.sidebar-collapsed .sidebar nav,
.dashboard.sidebar-collapsed .sidebar .new-project-btn,
.dashboard.sidebar-collapsed .sidebar .cube-card,
.dashboard.sidebar-collapsed .sidebar .sidebar-footer {
  display: none !important;
}

.dashboard.sidebar-collapsed .sidebar .logo,
.dashboard.sidebar-collapsed .sidebar .sidebar-title {
  opacity: 1;
}

/* When sidebar is collapsed, let main content take the freed space
   and re-center itself symmetrically instead of hugging the left edge.
   Using flexbox here instead of plain margin:auto since it does not
   depend on guessing home.css's internal padding values — much more
   reliable. Slight left bias per your request (2% left / auto right
   instead of dead-center auto/auto). */
.dashboard.sidebar-collapsed .main-section {
  display: block !important;
  width: 100% !important;
}

.dashboard.sidebar-collapsed .main-section > .top-navbar {
  width: 100% !important;
}

.dashboard.sidebar-collapsed .main-section > .page-content {
  max-width: 1100px !important;
  width: calc(100% - 40px) !important;
  position: relative !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
  float: none !important;
  transition: left 0.4s ease, max-width 0.4s ease;
}

.page-content {
  transition: max-width 0.4s ease, margin 0.4s ease;
}

/* ==========================================
   COLLABORATION THUMBNAIL — additive, matches
   existing .profile-project-card / .ppc-body styling
========================================== */

.ppc-collab-thumb{
    width:100%;
    height:150px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,var(--primary-soft),rgba(0,0,0,.15));
}

.ppc-collab-thumb i{
    font-size:36px;
    color:var(--primary);
    opacity:.6;
}