/* calendar.css — schedule + universalCalendar под текущий сайт (light/dark)
   Консолидировано: без взаимоисключающих правил и “перетираний”
*/

/* =========================================================
   SCHEDULE GRID (layout)
   ========================================================= */
#dsScheduleGrid.ds-schedule-grid{
  --gap: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  align-items: stretch;
}

#dsScheduleGrid .ds-schedule-item{ min-width: 280px; }

#dsScheduleGrid .ds-schedule-item > .ds-card{
  width: 100%;
  display: flex;
  flex-direction: column;
}

#dsScheduleGrid .ds-schedule-calendar{ flex: 0 0 clamp(300px, 34%, 420px); }
#dsScheduleGrid .ds-schedule-list{ flex: 1 1 520px; }

@media (max-width: 991px){
  #dsScheduleGrid.ds-schedule-grid{ --gap: 14px; }
  #dsScheduleGrid .ds-schedule-calendar,
  #dsScheduleGrid .ds-schedule-list{
    flex: 1 1 100%;
  }
}

/* =========================================================
   Sticky calendar (широкие экраны)
   ========================================================= */
@media (min-width: 992px){
  /* sticky делаем на самой колонке — надёжнее всего */
  #about-2 #dsScheduleGrid .ds-schedule-calendar{
    position: sticky;
    top: calc(var(--nav-h, 0px) + 16px);
    align-self: flex-start;
    height: fit-content;
    z-index: 20;
  }

  /* если календарь выше экрана — прокрутка внутри карточки */
  #about-2 #dsScheduleGrid .ds-schedule-calendar .ds-card-body{
    max-height: calc(100vh - (var(--nav-h, 0px) + 32px));
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* убираем hover-transform у карточки календаря (если где-то есть глобально) */
  #about-2 #dsScheduleGrid .ds-schedule-calendar .ds-calendar-card,
  #about-2 #dsScheduleGrid .ds-schedule-calendar .ds-calendar-card:hover{
    transform: none;
  }

  /* sticky иногда ломается из-за overflow у родителей */
  #about-2,
  #about-2 .container,
  #about-2 #dsScheduleGrid{
    overflow: visible;
  }
}

/* =========================================================
   Calendar card head (icon left, text right)
   ========================================================= */
#dsScheduleGrid .ds-calendar-head{
  display: flex;
  align-items: center;
  gap: 12px;
}

#dsScheduleGrid .ds-calendar-icon{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;
  background: rgba(103,157,198,.12);
}

#dsScheduleGrid .ds-calendar-icon .fa{
  font-size: 18px;
  color: var(--brand-primary);
}

#dsScheduleGrid .ds-calendar-meta{
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

#dsScheduleGrid .ds-calendar-title{
  font-weight: 800;
  line-height: 1.1;
  color: var(--text);
}

#dsScheduleGrid .ds-calendar-date{
  font-weight: 800;
  font-size: 18px;
  color: var(--text);
}

/* =========================================================
   UniversalCalendar skin (scoped)
   ========================================================= */
#dsScheduleGrid .calendar-wrapper{
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
}

#dsScheduleGrid .calendar-box{ width: 100%; }

/* верхняя панель (Назад / месяц / Вперёд) */
#dsScheduleGrid .buttons-container{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

#dsScheduleGrid .buttons-container .label-container{
  flex: 1 1 auto;
  text-align: center;
  text-transform: none;
  letter-spacing: .2px;
  font-weight: 800;
  font-size: 14px;
  color: var(--text);
}

/* кнопки */
#dsScheduleGrid .prev-button,
#dsScheduleGrid .next-button,
#dsScheduleGrid .today-button{
  background: rgba(127,127,127,.06);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 14px;
  padding: 6px 12px;
  cursor: pointer;
  font-weight: 700;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}

#dsScheduleGrid .prev-button:hover,
#dsScheduleGrid .next-button:hover,
#dsScheduleGrid .today-button:hover{
  background: rgba(127,127,127,.12);
  border-color: rgba(103,157,198,.45);
  transform: translateY(-1px);
}

/* заголовки дней недели */
#dsScheduleGrid .weeks-wrapper .barfo{
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
  font-weight: 800;
  font-size: 13px;
  color: var(--text);
}

/* недели и дни (flex) — НЕ обрезаем обводку today/selected */
#dsScheduleGrid .week{
  display: flex;
  align-items: center;
  justify-content: space-between;

  overflow: visible;
  padding: 2px 0;      /* чтобы обводке было куда “вылезти” */
  margin: 8px 0;
}


#dsScheduleGrid .day,
#dsScheduleGrid .day-h{
  float: none;
  width: auto;
  flex: 1 1 0;
  display: flex;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
  font-size: 14px;
  color: var(--text);
}

#dsScheduleGrid .day{ cursor: pointer; }

#dsScheduleGrid .day span,
#dsScheduleGrid .day-h span{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  line-height: 44px;
  border-radius: 14px;
  background: transparent;
  font-size: 15px;
  transition: background .12s ease, box-shadow .12s ease, color .12s ease;
}

/* hover */
#dsScheduleGrid .day span:hover{ background: rgba(127,127,127,.10); }

/* дни вне месяца */
#dsScheduleGrid .day.disabled span{ opacity: .35; }

/* реально отключенные */
#dsScheduleGrid .day[disabled="disabled"]{ cursor: not-allowed; }
#dsScheduleGrid .day[disabled="disabled"] span{ opacity: .30; }

/* today (если НЕ выбран) */
#dsScheduleGrid .day.today:not(.selected) span{
  font-weight: 900;
  color: var(--text);
  background: rgba(103,157,198,.16);
  box-shadow: 0 0 0 2px rgba(103,157,198,.48);
  text-shadow: 0 1px 0 rgba(0,0,0,.12);
}

/* подсветка недели */
#dsScheduleGrid .week.highlight{
  border-radius: 12px;
  background: rgba(127,127,127,.06);
}

/* highlight дня — только если НЕ selected */
#dsScheduleGrid .week .day.highlight:not(.selected) span{
  color: var(--brand-primary);
}

/* selected */
#dsScheduleGrid .week .day.selected span{
  background: rgba(103,157,198,.95);
  color: #ffffff;
  font-weight: 900;
  box-shadow: 0 0 0 2px rgba(255,24,255,.18);
  text-shadow: 0 1px 0 rgba(0,0,0,.28);
}
#dsScheduleGrid .week .day.selected.today span{
  box-shadow: 0 0 0 2px rgba(255,24,255,.22);
}

/* выходные (startOnMonday) */
#dsScheduleGrid .week.start-on-monday .day:nth-child(6),
#dsScheduleGrid .week.start-on-monday .day-h:nth-child(6){
  color: var(--brand-warning);
}
#dsScheduleGrid .week.start-on-monday .day:last-child,
#dsScheduleGrid .week.start-on-monday .day-h:last-child{
  color: var(--brand-danger);
}

/* если когда-то будет startOnMonday=false */
#dsScheduleGrid .week:not(.start-on-monday) .day:first-child,
#dsScheduleGrid .week:not(.start-on-monday) .day-h:first-child{
  color: var(--brand-danger);
}
#dsScheduleGrid .week:not(.start-on-monday) .day:last-child,
#dsScheduleGrid .week:not(.start-on-monday) .day-h:last-child{
  color: var(--brand-warning);
}

/* нижняя кнопка "Сегодня" */
#dsScheduleGrid .special-buttons{
  text-align: center;
  border-top: 1px solid var(--border);
  padding-top: 12px;
  margin-top: 8px;
}

/* =========================================================
   Month picker (year view)
   ========================================================= */
#dsScheduleGrid .months-container{
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 2px 2px;
}

#dsScheduleGrid .months-wrapper{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

#dsScheduleGrid .months-container .month{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 8px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(127,127,127,.06);
  color: var(--text);
  font-weight: 800;
  cursor: pointer;
  user-select: none;
  text-align: center;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}

#dsScheduleGrid .months-container .month:hover{
  background: rgba(127,127,127,.12);
  border-color: rgba(103,157,198,.45);
  transform: translateY(-1px);
}
#dsScheduleGrid .months-container .month:active{ transform: translateY(0); }

#dsScheduleGrid .months-container .month span{
  display: inline-block;
  font-size: 13px;
  line-height: 1.15;
}

/* =========================================================
   Studio picker card
   ========================================================= */
#about-2 .ds-schedule-toolbar{
  width: 100%;
  margin: 0 0 18px;
}

#about-2 .ds-studio-card{ width: 100%; }
#about-2 .ds-studio-card-body{ padding: 14px 18px; }

#about-2 select.ds-studio-select{
  width: 100%;
  display: block;
  cursor: pointer;
  border-radius: 14px;

  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 0 0 1px rgba(0,0,0,.08) inset;

  background: var(--surface);
  color: var(--text);

  height: 46px;
  padding: 10px 52px 10px 14px;

  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(-45deg, transparent 50%, currentColor 50%);
  background-position:
    right 18px center,
    right 28px center;
  background-size: 12px 12px, 12px 12px;
  background-repeat: no-repeat;

  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

html.theme-dark #about-2 select.ds-studio-select{
  border-color: rgba(255,255,255,.28);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 0 0 1px rgba(0,0,0,.10);
  color-scheme: dark;
}

html:not(.theme-dark) #about-2 select.ds-studio-select{ color-scheme: light; }

#about-2 select.ds-studio-select:hover{ border-color: rgba(103,157,198,.50); }

#about-2 select.ds-studio-select:focus{
  outline: none;
  border-color: rgba(103,157,198,.55);
  box-shadow: 0 0 0 3px rgba(103,157,198,.18);
}

#about-2 select.ds-studio-select option{
  background: var(--surface);
  color: var(--text);
}

/* =========================================================
   SCHEDULE (30-min blocks like desktop app)
   ========================================================= */
#dela .ds-board{
  position: relative;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* общий отступ шапки */
#dela .ds-board-head{
  margin-bottom: 10px;
}

/* pills (база) */
#dela .ds-pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  font-weight: 900;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
  user-select: none;
}

#dela .ds-pill-hall{
  background: rgba(30,120,210,.22);
  border-color: rgba(30,120,210,.55);
  color: #ffffff;
  text-align: center;
}

#dela .ds-pill-nav{
  background: rgba(229,127,11,.92);
  border-color: rgba(229,127,11,1);
  color: rgba(10,10,10,.95);
  cursor: pointer;
}
#dela .ds-pill-nav:hover{ filter: brightness(1.04); }
#dela .ds-pill-nav:active{ transform: translateY(1px); }

/* тело расписания */
#dela .ds-board-body{
  display: grid;
  column-gap: 12px;
  row-gap: 10px;
}
#dela .ds-board-body.ds-cols-1{ grid-template-columns: 1fr; }
#dela .ds-board-body.ds-cols-2{ grid-template-columns: minmax(0,1fr) minmax(0,1fr); }

/* slot card */
#dela .ds-slot{
  border-radius: 14px;
  padding: 10px 12px;
  min-height: 60px;
  border: 1px solid rgba(255,255,255,.12);
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0,0,0,.22);
}

#dela .ds-slot-time{
  font-weight: 900;
  font-size: 13px;
  color: #e57f0b;
  margin-bottom: 4px;
  letter-spacing: .15px;
}

#dela .ds-slot-title{
  font-weight: 700;
  font-size: 12.5px;
  line-height: 1.25;
  color: rgba(255,255,255,.92);
  opacity: .95;
}

/* DARK THEME — базовые цвета */
#dela .ds-status-free{ background: #24252e; border-color: #2f3039; }
#dela .ds-status-unpaid{ background: #400723; border-color: rgba(255,255,255,.12); }
#dela .ds-status-paid{ background: #092103; border-color: rgba(255,255,255,.12); }
#dela .ds-status-class{ background: #112f4f; border-color: rgba(255,255,255,.12); }
#dela .ds-status-prepare{ background: #0a1c2f; border-color: rgba(255,255,255,.12); }

/* =========================================================
   LIGHT THEME — светлее + "занято" заметнее, чем "свободно"
   ========================================================= */
html:not(.theme-dark) #dela .ds-slot{
  border-color: rgba(0,0,0,.10);
  box-shadow: 0 1px 1px rgba(0,0,0,.10);
  background: rgba(255,255,255,.85);
}

html:not(.theme-dark) #dela .ds-slot-time{ color: rgba(160,85,0,.96); }
html:not(.theme-dark) #dela .ds-slot-title{ color: rgba(18,18,20,.92); }

html:not(.theme-dark) #dela .ds-pill{
  border-color: rgba(0,0,0,.12);
  background: rgba(0,0,0,.03);
}
html:not(.theme-dark) #dela .ds-pill-hall{
  background: rgba(30,120,210,.14);
  border-color: rgba(30,120,210,.35);
  color: rgba(12,18,24,.92);
}
html:not(.theme-dark) #dela .ds-pill-nav{
  background: rgba(229,127,11,.85);
  border-color: rgba(229,127,11,.95);
  color: rgba(10,10,10,.95);
}

/* “Свободно” — нейтральное */
html:not(.theme-dark) #dela .ds-status-free{
  background: rgba(15,18,22,.04);
  border-color: rgba(15,18,22,.12);
}

/* “Занято/занятие/подготовка/оплата” — заметнее: tint + левая полоса */
html:not(.theme-dark) #dela .ds-status-unpaid{
  background: rgba(231,76,60,.14);
  border-color: rgba(231,76,60,.32);
  border-left: 5px solid rgba(231,76,60,.78);
}
html:not(.theme-dark) #dela .ds-status-paid{
  background: rgba(46,204,113,.16);
  border-color: rgba(46,204,113,.34);
  border-left: 5px solid rgba(46,204,113,.78);
}
html:not(.theme-dark) #dela .ds-status-class{
  background: rgba(52,152,219,.14);
  border-color: rgba(52,152,219,.32);
  border-left: 5px solid rgba(52,152,219,.76);
}
html:not(.theme-dark) #dela .ds-status-prepare{
  background: rgba(155,89,182,.14);
  border-color: rgba(155,89,182,.30);
  border-left: 5px solid rgba(155,89,182,.72);
}

html:not(.theme-dark) #dela .ds-status-unpaid .ds-slot-title,
html:not(.theme-dark) #dela .ds-status-paid .ds-slot-title,
html:not(.theme-dark) #dela .ds-status-class .ds-slot-title,
html:not(.theme-dark) #dela .ds-status-prepare .ds-slot-title{
  font-weight: 800;
}

/* =========================================================
   NOW LINE
   ========================================================= */
#dela .ds-now-line{
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  background: #ff3333;
  border-radius: 2px;
  pointer-events: none;
  z-index: 5;
}

#dela .ds-now-line-glow{
  position: absolute;
  left: 0;
  right: 0;
  height: 10px;
  margin-top: -4px;
  background: rgba(255,51,51,.18);
  border-radius: 8px;
  filter: blur(1px);
  pointer-events: none;
  z-index: 4;
}

/* =========================================================
   HALLS BAR (новая разметка): fixed nav width, hall fills the rest
   ========================================================= */
#dela .ds-board-head.ds-hallsbar{
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ширина кнопок назад/вперёд */
#dela .ds-hallsbar{
  --navW: 110px; /* desktop */
}

/* внутренняя связка — на всю ширину, 2 группы 50/50 */
#dela .ds-hallsbar__inner{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: nowrap;
}

#dela .ds-hallsbar__group{
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
}
#dela .ds-hallsbar__group--left{  justify-content: flex-start; }
#dela .ds-hallsbar__group--right{ justify-content: flex-end; }

/* кнопки фикс ширины */
#dela .ds-hallsbar .ds-pill-nav{
  flex: 0 0 var(--navW);
  width: var(--navW);
  justify-content: center;
}

/* ghost не занимает место (зал расширяется) */
#dela .ds-hallsbar .ds-pill-nav--ghost{
  display: none;
}

/* зал занимает остаток группы (если нет кнопки — всю группу) */
#dela .ds-hallsbar .ds-pill-hall{
  flex: 1 1 0;
  width: 100%;
  min-width: 0;
  text-align: center;
}

/* 1 зал: 3 зоны (назад / зал / вперёд) */
#dela .ds-hallsbar__inner--single{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: nowrap;
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 600px){
  /* hallsbar */
  #dela .ds-hallsbar{ --navW: 76px; }

  /* pills / slots */
  #dela .ds-pill{
    padding: 6px 10px;
    border-radius: 12px;
    font-size: 11px;
  }

  #dela .ds-board-body{
    column-gap: 10px;
    row-gap: 8px;
  }

  #dela .ds-slot{
    border-radius: 12px;
    padding: 8px 10px;
    min-height: 54px;
  }
  #dela .ds-slot-time{
    font-size: 12px;
    margin-bottom: 3px;
  }
  #dela .ds-slot-title{
    font-size: 11.5px;
    line-height: 1.2;
  }

  /* calendar small tweaks */
  #dsScheduleGrid .calendar-wrapper{ max-width: 100%; }
  #dsScheduleGrid .week{ margin: 6px 0; }
  #dsScheduleGrid .day span,
  #dsScheduleGrid .day-h span{
    width: 42px;
    height: 42px;
    line-height: 42px;
    border-radius: 12px;
    font-size: 14px;
  }
  #dsScheduleGrid .buttons-container .label-container{ font-size: 13px; }
  #dsScheduleGrid .months-container{ gap: 8px; padding-top: 8px; }
  #dsScheduleGrid .months-wrapper{ gap: 8px; }
  #dsScheduleGrid .months-container .month{ padding: 9px 6px; border-radius: 12px; }
  #dsScheduleGrid .months-container .month span{ font-size: 12px; }
}