/* =========================================================
   Vrienda v5.2.1 Sidebar Balance Tuning
   Patch for v5.1/v5.1.1/v5.2
   Goal: sidebar less cramped, fewer wrapped labels.
   Place AFTER unified-social-surface.css.
   ========================================================= */

:root{
  --vf-left-width:260px;
  --vf-feed-width:760px;
  --vf-right-width:270px;
  --vf-gap:18px;
}

/* Desktop balance */
@media(min-width:1051px){
  .container,
  .wrapper,
  .page,
  .page-wrap,
  .page-wrapper,
  .site,
  .site-wrap,
  .app,
  .app-wrap,
  .content-wrap,
  .main-wrap,
  .layout,
  .dashboard{
    max-width:1350px !important;
  }

  @supports (grid-template-columns: 1fr){
    .layout,
    .dashboard,
    .app-layout,
    .social-layout,
    .main-layout,
    .page-grid,
    .content-grid{
      grid-template-columns:260px minmax(0,760px) 270px !important;
      gap:18px !important;
      justify-content:center !important;
    }
  }

  .leftbar,
  .left-sidebar,
  .sidebar-left,
  nav.sidebar,
  .layout > aside:first-child{
    width:260px !important;
    min-width:260px !important;
    max-width:260px !important;
  }

  .rightbar,
  .right-sidebar,
  .sidebar-right,
  .layout > aside:last-child{
    width:270px !important;
    min-width:270px !important;
    max-width:270px !important;
  }

  main,
  .main,
  .feed-column,
  .content,
  .main-content,
  .center,
  .timeline,
  .timeline-wrap,
  .feed,
  .posts,
  .krabbels{
    max-width:760px !important;
  }
}

/* Sidebar cards slightly wider-feeling */
.leftbar,
.left-sidebar,
.sidebar-left,
nav.sidebar,
.widget,
.side-card,
.trending-card,
.menu-card{
  box-sizing:border-box !important;
}

/* Menu item breathing room */
.sidebar a,
.leftbar a,
nav.sidebar a,
.menu a,
.side-menu a,
.leftbar .nav-link,
.sidebar .nav-link,
nav.sidebar .nav-link{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  min-height:42px !important;
  padding:9px 14px !important;
  border-radius:15px !important;
  line-height:1.22 !important;
  white-space:normal !important;
  word-break:normal !important;
  overflow-wrap:normal !important;
}

/* Icon column consistent */
.sidebar a > :first-child,
.leftbar a > :first-child,
nav.sidebar a > :first-child,
.menu a > :first-child,
.side-menu a > :first-child{
  flex:0 0 24px !important;
  width:24px !important;
  min-width:24px !important;
  text-align:center !important;
}

/* Text part may use available width */
.sidebar a span,
.leftbar a span,
nav.sidebar a span,
.menu a span,
.side-menu a span{
  min-width:0 !important;
}

/* Reduce wrapping on common menu labels */
.sidebar a,
.leftbar a,
nav.sidebar a{
  font-size:15px !important;
  font-weight:760 !important;
}

/* Top trending card balance */
.trending-card,
.side-card:first-child,
.leftbar .widget:first-child,
.sidebar-left .widget:first-child{
  padding:18px !important;
  border-radius:26px !important;
}

.trending-card h2,
.trending-card h3,
.side-card:first-child h2,
.side-card:first-child h3{
  font-size:22px !important;
  line-height:1.15 !important;
}

.trending-card .btn,
.trending-card button,
.side-card:first-child .btn,
.side-card:first-child button,
.trending-card a.btn,
.side-card:first-child a.btn{
  width:100% !important;
  min-height:44px !important;
  justify-content:center !important;
  font-size:16px !important;
}

/* On medium desktop use a still comfortable sidebar */
@media(min-width:1051px) and (max-width:1250px){
  :root{
    --vf-left-width:245px;
    --vf-feed-width:720px;
    --vf-right-width:250px;
    --vf-gap:14px;
  }

  .container,
  .wrapper,
  .page,
  .page-wrap,
  .page-wrapper,
  .site,
  .site-wrap,
  .app,
  .app-wrap,
  .content-wrap,
  .main-wrap,
  .layout,
  .dashboard{
    max-width:1230px !important;
  }

  @supports (grid-template-columns: 1fr){
    .layout,
    .dashboard,
    .app-layout,
    .social-layout,
    .main-layout,
    .page-grid,
    .content-grid{
      grid-template-columns:245px minmax(0,720px) 250px !important;
      gap:14px !important;
    }
  }

  .leftbar,
  .left-sidebar,
  .sidebar-left,
  nav.sidebar,
  .layout > aside:first-child{
    width:245px !important;
    min-width:245px !important;
    max-width:245px !important;
  }

  .rightbar,
  .right-sidebar,
  .sidebar-right,
  .layout > aside:last-child{
    width:250px !important;
    min-width:250px !important;
    max-width:250px !important;
  }

  main,
  .main,
  .feed-column,
  .content,
  .main-content,
  .center,
  .timeline,
  .timeline-wrap,
  .feed,
  .posts,
  .krabbels{
    max-width:720px !important;
  }
}

/* Tablet/mobile: do not force sidebar width */
@media(max-width:1050px){
  .leftbar,
  .left-sidebar,
  .sidebar-left,
  nav.sidebar,
  .rightbar,
  .right-sidebar,
  .sidebar-right{
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
  }

  .sidebar a,
  .leftbar a,
  nav.sidebar a,
  .menu a,
  .side-menu a{
    min-height:40px !important;
    padding:8px 12px !important;
  }
}