/* ============================================================
   v12 employee-layout-upload-fix
   Фикс кабинета сотрудника: ровные блоки, отступы, календарь, file upload.
   Загружается самым последним.
   ============================================================ */

:root{
  --v12-page-max:1320px;
  --v12-gap:22px;
  --v12-blue:#2f62d4;
  --v12-blue-soft:#eef4ff;
  --v12-line:#dbe5f2;
  --v12-card:#ffffff;
  --v12-text:#111827;
  --v12-muted:#667085;
  --v12-shadow:0 16px 44px rgba(17,24,39,.065);
}

/* Общая сетка: убираем разъезд блоков и случайные inline margin */
.main{
  overflow-x:hidden!important;
}

#pageContent{
  width:min(100%, var(--v12-page-max))!important;
  max-width:100%!important;
  margin:0 auto!important;
  display:grid!important;
  gap:var(--v12-gap)!important;
  align-items:start!important;
}

#pageContent > .grid,
#pageContent > .card,
#pageContent > .calendar-panel,
#pageContent > section,
#pageContent > form{
  width:100%!important;
  max-width:100%!important;
  margin-top:0!important;
  margin-bottom:0!important;
  min-width:0!important;
}

#pageContent .grid[style*="margin-top"],
#pageContent .card[style*="margin-top"]{
  margin-top:0!important;
}

.grid{
  gap:var(--v12-gap)!important;
  min-width:0!important;
}

.card,
.metric,
.quick-card,
.hero-card,
.salary-card{
  min-width:0!important;
  max-width:100%!important;
  height:auto!important;
  overflow:hidden!important;
  border-radius:24px!important;
  box-shadow:var(--v12-shadow)!important;
}

.card{
  padding:22px!important;
}

.card-head{
  margin-bottom:16px!important;
}

.card-head h2{
  line-height:1.15!important;
}

.card-head p{
  line-height:1.4!important;
}

/* Кабинет сотрудника: верхние блоки и KPI должны быть ровные */
#employeeHero,
#nextShiftCard,
#todayReportCard,
#miniScheduleCard,
#newsPreview,
#instructionsPreview,
#scheduleHero,
#scheduleMini{
  display:flex!important;
  flex-direction:column!important;
  justify-content:flex-start!important;
  gap:14px!important;
  min-height:0!important;
}

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

.quick-card{
  min-height:86px!important;
  padding:14px!important;
  border-radius:18px!important;
}

.metric{
  min-height:108px!important;
  padding:18px!important;
}

.hero-title{
  max-width:100%!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

/* Мини-календарь сотрудника */
.mini-calendar{
  gap:8px!important;
  width:100%!important;
  max-width:100%!important;
  margin-top:12px!important;
}

.mini-calendar > div{
  aspect-ratio:1/1!important;
  min-height:0!important;
  height:auto!important;
  border-radius:14px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  font-weight:850!important;
}

/* Страница "Мои смены": отступы и читаемые строки */
#myScheduleList{
  display:grid!important;
  gap:12px!important;
}

.shift-card,
.mini-row{
  min-width:0!important;
  max-width:100%!important;
  overflow:hidden!important;
  border-radius:18px!important;
}

.shift-card{
  padding:16px!important;
}

.shift-card > div,
.mini-row > div:first-child{
  min-width:0!important;
  display:flex!important;
  flex-direction:column!important;
  gap:4px!important;
}

.shift-card strong,
.shift-card span,
.mini-row strong,
.mini-row span{
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  max-width:100%!important;
}

.salary-list{
  display:grid!important;
  gap:12px!important;
  margin-top:16px!important;
}

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

.salary-summary > div{
  border-radius:18px!important;
  padding:16px!important;
  min-width:0!important;
}

/* График администратора: не слипается и не вылезает */
.calendar-panel{
  overflow:hidden!important;
  padding:24px!important;
}

.calendar-filters{
  gap:18px!important;
  margin-bottom:24px!important;
}

.calendar-shell{
  gap:24px!important;
  overflow:hidden!important;
}

.calendar-grid{
  gap:10px!important;
  min-width:0!important;
  overflow:hidden!important;
}

.calendar-day{
  min-width:0!important;
  overflow:hidden!important;
}

.calendar-event{
  max-width:100%!important;
}

.calendar-event,
.calendar-event small{
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

/* Названия ПВЗ в календаре: без "Новочеркасск..." */
.calendar-event,
.day-detail-item span,
.shift-card span,
.mini-row span{
  word-break:normal!important;
}

/* Форма сдачи отчёта */
#reportForm{
  overflow:visible!important;
}

#reportForm .notice{
  margin-bottom:18px!important;
}

#reportForm .field{
  margin-bottom:16px!important;
}

/* Красивый кастомный upload вместо Choose File */
input[type="file"].file-input.v12-file-native{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  opacity:0!important;
  pointer-events:none!important;
  overflow:hidden!important;
}

.v12-file-control{
  width:100%!important;
  min-height:64px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:14px!important;
  padding:14px 16px!important;
  border:1.5px dashed #b9caf1!important;
  border-radius:20px!important;
  background:linear-gradient(180deg,#f8fbff,#f3f7ff)!important;
  cursor:pointer!important;
  box-shadow:0 10px 28px rgba(47,98,212,.055)!important;
  transition:.16s ease!important;
}

.v12-file-control:hover{
  border-color:var(--v12-blue)!important;
  background:#eef4ff!important;
}

.v12-file-left{
  min-width:0!important;
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
}

.v12-file-icon{
  width:40px!important;
  height:40px!important;
  border-radius:14px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:0 0 auto!important;
  color:#fff!important;
  background:linear-gradient(135deg,#2f62d4,#638ee8)!important;
  box-shadow:0 12px 24px rgba(47,98,212,.18)!important;
}

.v12-file-icon svg{
  width:20px!important;
  height:20px!important;
}

.v12-file-text{
  min-width:0!important;
  display:flex!important;
  flex-direction:column!important;
  gap:3px!important;
}

.v12-file-title{
  color:var(--v12-text)!important;
  font-size:14px!important;
  font-weight:900!important;
  line-height:1.2!important;
}

.v12-file-name{
  color:var(--v12-muted)!important;
  font-size:12px!important;
  line-height:1.25!important;
  overflow:hidden!important;
  white-space:nowrap!important;
  text-overflow:ellipsis!important;
  max-width:320px!important;
}

.v12-file-button{
  flex:0 0 auto!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:38px!important;
  padding:9px 13px!important;
  border-radius:13px!important;
  color:#254fae!important;
  background:#eaf1ff!important;
  font-size:12.5px!important;
  font-weight:950!important;
}

/* Модалки: при открытии страница не должна дёргаться/ломаться */
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(820px,100%)!important;
  max-height:min(88vh,900px)!important;
  overflow:auto!important;
}

/* Адаптация ноутбуков */
@media(max-width:1180px){
  #pageContent{
    --v12-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-panel{
    padding:20px!important;
  }

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

/* Адаптация планшетов и мобильных */
@media(max-width:760px){
  #pageContent{
    --v12-gap:16px;
  }

  .main{
    padding-left:14px!important;
    padding-right:14px!important;
  }

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

  .card{
    padding:16px!important;
    border-radius:20px!important;
  }

  #employeeHero .quick-grid,
  .salary-summary{
    grid-template-columns:1fr!important;
  }

  .calendar-panel{
    padding:16px!important;
  }

  .calendar-filters{
    grid-template-columns:1fr!important;
    gap:12px!important;
  }

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

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

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

  .v12-file-control{
    align-items:flex-start!important;
    flex-direction:column!important;
  }

  .v12-file-button{
    width:100%!important;
  }

  .v12-file-name{
    max-width:100%!important;
  }
}