/* Program workflow tabs — placement only.
 * Visual language and responsive behavior are owned by ui-tabs-canonical-v1.css.
 * Do not size or stretch tab buttons here; the marketing/CRM pattern is the dashboard base.
 */
.program-workflow-tabs-wrap{
  display:flex;
  justify-content:flex-start;
  width:100%;
  margin:0 0 18px;
}

.program-workflow-tabs__item>i,
.calendar-needs-subtabs__item>i{
  flex:0 0 auto;
}

/* «تقویم و نیاز» stays one top-level workflow destination. Inside that page,
 * these two canonical sub-tabs separate month/holiday setup from shift needs. */
.calendar-needs-sections-shell{
  display:grid;
  gap:12px;
  margin:0 0 14px;
}

.calendar-needs-subtabs-wrap{
  display:flex;
  justify-content:flex-start;
  width:100%;
}

.calendar-needs-section-panels{
  display:grid;
  gap:14px;
}

.calendar-needs-section-panels>[data-calendar-needs-panel][hidden]{
  display:none!important;
}

.calendar-needs-section-panels>.panel.card{
  margin-top:0!important;
}

/* One desktop previous/next navigation row for the whole program workflow.
 * Button visuals are the existing global .btn / .btn--primary styles; this
 * block owns layout only. */
.program-workflow-context-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  width:100%;
  margin:18px 0 4px;
  padding-top:14px;
  border-top:1px solid var(--line);
}

.program-workflow-context-nav__slot{
  display:flex;
  align-items:center;
  min-width:0;
}

.program-workflow-context-nav__slot--next{
  margin-inline-start:auto;
}

@media(max-width:760px){
  .program-workflow-tabs-wrap{
    margin-bottom:12px;
  }

  .calendar-needs-sections-shell{
    gap:10px;
  }

  /* Mobile pages have their own native navigation modules. */
  .program-workflow-context-nav{
    display:none;
  }
}