/* ============================================================
   v13 global-alignment-fix
   Жёсткая правка глобальной сетки: правый край, одинаковые блоки,
   нормальные отступы между секциями, без горизонтального съезда.
   Загружается самым последним.
   ============================================================ */

:root{
  --v13-nav:252px;
  --v13-max:1160px;
  --v13-gap:22px;
  --v13-page-pad-x:28px;
  --v13-page-pad-y:24px;
  --v13-card-radius:22px;
}

/* 1. Убираем общий горизонтальный съезд */
html,
body{
  max-width:100%!important;
  overflow-x:hidden!important;
}

body.has-app,
body{
  min-width:0!important;
}

/* 2. Жёсткая сетка: сайдбар + ровный контент */
.app{
  width:100%!important;
  max-width:100vw!important;
  min-width:0!important;
  overflow-x:hidden!important;
  display:grid!important;
  grid-template-columns:var(--nav-w, var(--v13-nav)) minmax(0, 1fr)!important;
  align-items:stretch!important;
}

.sidebar{
  width:var(--nav-w, var(--v13-nav))!important;
  min-width:var(--nav-w, var(--v13-nav))!important;
  max-width:var(--nav-w, var(--v13-nav))!important;
  overflow-x:hidden!important;
}

.main{
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  margin:0!important;
  padding:var(--v13-page-pad-y) var(--v13-page-pad-x) 64px!important;
  overflow-x:hidden!important;
  box-sizing:border-box!important;
}

/* 3. Заголовок и контент держим в одной центральной колонке */
.topbar,
#pageContent{
  width:100%!important;
  max-width:var(--v13-max)!important;
  min-width:0!important;
  margin-left:auto!important;
  margin-right:auto!important;
  box-sizing:border-box!important;
}

.topbar{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:16px!important;
  padding-left:0!important;
  padding-right:0!important;
}

/* ПК: кнопку меню убираем окончательно */
@media(min-width:981px){
  .mobile-menu-btn,
  button.mobile-menu-btn,
  .topbar .mobile-menu-btn{
    display:none!important;
  }
}

#pageContent{
  display:grid!important;
  gap:var(--v13-gap)!important;
  align-items:start!important;
}

#pageContent > *{
  min-width:0!important;
  max-width:100%!important;
  width:100%!important;
  margin:0!important;
  box-sizing:border-box!important;
}

/* 4. Все сетки ровные: без слипания и без выезда правой части */
.grid,
.quick-grid,
.salary-summary,
.calendar-shell,
.toolbar,
.toolbar-compact{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  gap:var(--v13-gap)!important;
  box-sizing:border-box!important;
}

.grid{
  display:grid!important;
  align-items:stretch!important;
}

.grid-2{
  grid-template-columns:repeat(2, minmax(0, 1fr))!important;
}

.grid-3{
  grid-template-columns:repeat(3, minmax(0, 1fr))!important;
}

.grid-4{
  grid-template-columns:repeat(4, minmax(0, 1fr))!important;
}

.quick-grid{
  display:grid!important;
  grid-template-columns:repeat(2, minmax(0, 1fr))!important;
}

/* 5. Карточки одинаково ведут себя внутри колонок */
.card,
.metric,
.quick-card,
.hero-card,
.calendar-panel,
.salary-v5-card,
.salary-v5-metric,
.content-card{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
  border-radius:var(--v13-card-radius)!important;
}

.card,
.hero-card,
.calendar-panel,
.content-card{
  padding:22px!important;
}

.card + .card,
.card + .grid,
.grid + .card,
.grid + .grid,
section + section{
  margin-top:0!important;
}

/* 6. Правая часть в двухколоночных блоках больше не уезжает */
.grid-2 > *,
.grid-3 > *,
.grid-4 > *,
.quick-grid > *,
.salary-summary > *,
.calendar-shell > *{
  min-width:0!important;
  max-width:100%!important;
  width:100%!important;
  box-sizing:border-box!important;
}

/* 7. Главная сотрудника: ровная сетка без выезда справа */
#employeeHero,
#nextShiftCard{
  min-height:0!important;
}

#employeeHero .quick-grid{
  grid-template-columns:repeat(2, minmax(0, 1fr))!important;
  gap:14px!important;
}

#employeeHero .quick-card{
  min-height:92px!important;
}

/* 8. График/календарь: внутри блока, с нормальными зазорами */
.calendar-shell{
  display:grid!important;
  grid-template-columns:1fr!important;
  align-items:start!important;
  overflow:hidden!important;
}

.calendar-panel{
  overflow:hidden!important;
}

.calendar-filters{
  display:grid!important;
  grid-template-columns:repeat(4, minmax(0, 1fr))!important;
  gap:16px!important;
  margin-bottom:22px!important;
}

.calendar-head{
  margin-bottom:18px!important;
}

.calendar-grid{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  display:grid!important;
  grid-template-columns:repeat(7, minmax(0, 1fr))!important;
  gap:8px!important;
  overflow:hidden!important;
}

.calendar-day{
  min-width:0!important;
  min-height:92px!important;
  max-width:100%!important;
  padding:8px!important;
  overflow:hidden!important;
}

.calendar-event{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  padding:4px 6px!important;
  overflow:hidden!important;
  white-space:nowrap!important;
  text-overflow:ellipsis!important;
}

.calendar-event b,
.calendar-event small{
  max-width:100%!important;
  overflow:hidden!important;
  white-space:nowrap!important;
  text-overflow:ellipsis!important;
}

/* 9. Мои смены / мини-календарь */
.mini-calendar{
  width:100%!important;
  max-width:100%!important;
  display:grid!important;
  grid-template-columns:repeat(7, minmax(0, 1fr))!important;
  gap:8px!important;
}

.mini-calendar > *{
  min-width:0!important;
  max-width:100%!important;
}

/* 10. Зарплата: верхний блок компактнее, без съезда вправо */
.salary-v5,
.salary-v5-main,
.salary-v5-summary,
.salary-v5-controls,
.salary-v5-actions{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
}

.salary-v5{
  display:grid!important;
  gap:18px!important;
}

.salary-v5-hero{
  width:100%!important;
  max-width:100%!important;
  overflow:hidden!important;
}

.salary-v5-hero__top{
  padding:18px 18px 12px!important;
}

.salary-v5-controls{
  display:grid!important;
  grid-template-columns:repeat(4, minmax(0, 1fr))!important;
  gap:12px!important;
  padding:14px 18px 18px!important;
}

.salary-v5-actions{
  grid-column:1 / -1!important;
  display:flex!important;
  flex-wrap:wrap!important;
  gap:10px!important;
}

.salary-v5-summary{
  display:grid!important;
  grid-template-columns:repeat(4, minmax(0, 1fr))!important;
  gap:14px!important;
}

.salary-v5-main{
  display:grid!important;
  grid-template-columns:minmax(0, 1fr)!important;
  gap:18px!important;
}

.salary-v5-card__body{
  overflow:auto!important;
}

/* 11. Формы, поля и кастомные списки не должны раздвигать страницу */
.field,
.input,
.textarea,
.custom-select,
.custom-select__trigger,
.select,
.v12-file-control{
  max-width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
}

.custom-select__value{
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}

/* 12. Таблицы — только внутренний скролл, не страница */
.table-wrap{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  overflow:auto!important;
}

table{
  max-width:100%!important;
}

/* 13. Модалки: не ломают страницу и не сдвигают контент */
html.modal-is-open,
body.modal-is-open,
body.lock-scroll{
  overflow:hidden!important;
}

.modal-backdrop,
.salary-v5-modal-backdrop{
  overflow:auto!important;
  padding:22px!important;
}

.modal,
.salary-v5-modal,
.modal-card{
  max-width:min(860px, calc(100vw - 36px))!important;
  max-height:min(88vh, 900px)!important;
  overflow:auto!important;
  box-sizing:border-box!important;
}

/* 14. Ноутбуки: всё ещё ровно и без правого съезда */
@media(max-width:1280px){
  :root{
    --v13-max:1040px;
    --v13-page-pad-x:24px;
    --v13-gap:18px;
  }

  .grid-4{
    grid-template-columns:repeat(2, minmax(0, 1fr))!important;
  }

  .grid-3{
    grid-template-columns:repeat(2, minmax(0, 1fr))!important;
  }

  .calendar-filters{
    grid-template-columns:repeat(3, minmax(0, 1fr))!important;
  }

  .calendar-day{
    min-height:86px!important;
  }

  .salary-v5-controls{
    grid-template-columns:repeat(2, minmax(0, 1fr))!important;
  }

  .salary-v5-summary{
    grid-template-columns:repeat(2, minmax(0, 1fr))!important;
  }
}

/* 15. Узкие ноутбуки / планшеты */
@media(max-width:1080px){
  :root{
    --v13-max:100%;
  }

  .calendar-filters{
    grid-template-columns:repeat(2, minmax(0, 1fr))!important;
  }

  .grid-2,
  .grid-3,
  .grid-4,
  .quick-grid{
    grid-template-columns:1fr!important;
  }
}

/* 16. Мобильная версия */
@media(max-width:980px){
  .app{
    grid-template-columns:1fr!important;
  }

  .sidebar{
    width:min(318px, calc(100vw - 28px))!important;
    min-width:0!important;
    max-width:min(318px, calc(100vw - 28px))!important;
  }

  .main{
    width:100%!important;
    max-width:100%!important;
    padding:14px 14px 96px!important;
  }

  .topbar,
  #pageContent{
    width:100%!important;
    max-width:100%!important;
  }
}

@media(max-width:760px){
  :root{
    --v13-gap:16px;
  }

  .card,
  .hero-card,
  .calendar-panel,
  .content-card{
    padding:16px!important;
    border-radius:20px!important;
  }

  .calendar-filters,
  .salary-v5-controls,
  .salary-v5-summary{
    grid-template-columns:1fr!important;
  }

  .calendar-grid{
    gap:5px!important;
  }

  .calendar-day{
    min-height:72px!important;
    padding:6px!important;
  }

  .calendar-event{
    font-size:8.5px!important;
  }

  .salary-v5-actions{
    display:grid!important;
    grid-template-columns:1fr!important;
  }
}