/* styles-roster.css — лист «График смен» (Отчёт сотрудников → кнопка «График смен»).
   Тулбар — общие .plan-toolbar/.plan-btn; лист — .plan-sheet. Своё здесь: выбор
   графика, всплывающие формы, сетка сотрудники × дни, плашки смен, календарь. */

/* ── тулбар ─────────────────────────────────────────────────────────────── */
.roster-toolbar { row-gap: 6px; }

.roster-picker {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.roster-pick {
  min-height: 29px;
  min-width: 260px;
  max-width: 380px;
  border: 1px solid rgba(125, 158, 209, 0.4);
  border-radius: 10px;
  background: rgba(10, 28, 52, 0.62);
  color: #dce8fb;
  font-family: "Manrope", "Segoe UI", sans-serif;
  font-size: 10px;
  font-weight: 700;
  padding: 0 8px;
}

.roster-nav-btn { min-width: 26px; }

.roster-views { margin-left: 2px; }

.roster-view-btn { text-transform: none; }

.roster-toolbar-right {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.roster-status-pill { font-size: 10px; }

.roster-status-meta {
  font-size: 10px;
  color: #9fb3d1;
  max-width: 420px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── всплывающие формы (новый график / шаблон / замечание) ─────────────── */
.roster-pop {
  border: 1px solid #7ea2c4;
  border-radius: 10px;
  background: linear-gradient(180deg, #f6f9fd, #edf3fa);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
  padding: 8px 10px;
  margin-bottom: 8px;
  display: grid;
  gap: 6px;
}

.roster-pop-title {
  font-size: 11px;
  font-weight: 800;
  color: #1f3f63;
}

.roster-pop-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.roster-pop-row .report-acc-date select,
.roster-pop-row .report-acc-date input[type="number"] {
  min-height: 24px;
  border: 1px solid #b6c9df;
  border-radius: 7px;
  background: #fff;
  color: #1d3553;
  font-size: 10px;
  padding: 0 6px;
}

.roster-pop-row-wide { align-items: flex-start; }

/* Поля «свой шаблон» показываются только при выборе «Свой»: у .report-acc-date
   display:inline-flex, и атрибут hidden без этого правила не работает. */
.roster-pop .roster-pat-custom[hidden] { display: none; }

.roster-textarea {
  flex: 1 1 360px;
  min-height: 54px;
  border: 1px solid #b6c9df;
  border-radius: 8px;
  padding: 6px 8px;
  font: inherit;
  font-size: 11px;
  color: #1d3553;
  resize: vertical;
}

.roster-pop-hint {
  font-size: 10px;
  color: #4d6a8c;
}

/* Кнопки внутри светлой формы — ярче, как «Найти» в фильтрах: на светлом фоне
   тёмно-прозрачный .plan-btn читается тусклым и «выключенным». */
.roster-pop .plan-btn.green,
.roster-grid-tools .plan-btn.green {
  border-color: rgba(96, 201, 128, 0.68);
  background: rgba(50, 146, 84, 0.72);
  color: #f1fff7;
}

.roster-pop .plan-btn.red {
  border-color: rgba(221, 172, 196, 0.66);
  background: rgba(134, 82, 109, 0.65);
  color: #fff2f8;
}

.roster-pop .plan-btn:not(.green):not(.red),
.roster-grid-tools .plan-btn:not(.green):not(.violet) {
  border-color: rgba(110, 145, 185, 0.65);
  background: rgba(42, 68, 108, 0.58);
  color: #c4dcf2;
}

.roster-grid-tools .plan-btn.violet {
  border-color: rgba(139, 112, 230, 0.7);
  background: rgba(96, 76, 170, 0.72);
  color: #f1ecff;
}

/* ── плашки состояния ──────────────────────────────────────────────────── */
.roster-banner {
  border-radius: 8px;
  padding: 6px 10px;
  margin-bottom: 8px;
  font-size: 11px;
  line-height: 1.35;
}

.roster-banner.is-info { background: #dbeafe; color: #1e3a8a; border: 1px solid #93c5fd; }
.roster-banner.is-warn { background: #fef3c7; color: #78350f; border: 1px solid #fcd34d; }
.roster-banner.is-error { background: #fee2e2; color: #7f1d1d; border: 1px solid #fca5a5; }

.roster-empty {
  padding: 28px 16px;
  text-align: center;
  color: #4d6a8c;
  font-size: 12px;
}

/* ── сетка ─────────────────────────────────────────────────────────────── */
.roster-sheet { background: #e8edf5; }

.roster-grid-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 6px 8px;
  border-bottom: 1px solid #c6d2df;
  background: #f1f5fa;
  flex: 0 0 auto;
}

.roster-search {
  min-height: 26px;
  min-width: 200px;
  border: 1px solid #b6c9df;
  border-radius: 8px;
  background: #fff;
  color: #1d3553;
  font-size: 11px;
  padding: 0 8px;
}

.roster-grid-tools .plan-btn { min-width: 0; }

.roster-readonly-note { font-size: 10px; color: #4d6a8c; }

.rg-legend {
  margin-left: auto;
  display: inline-flex;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 10px;
  color: #2a4768;
}

.rg-legend-item { display: inline-flex; align-items: center; gap: 4px; }

.roster-grid-wrap {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  position: relative;
  transform: translateZ(0);
}

.roster-grid {
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  width: max-content;
  min-width: 100%;
  font-family: "Manrope", "Segoe UI", sans-serif;
  font-size: 10px;
  color: #1d2a3b;
}

.roster-grid th,
.roster-grid td {
  border-right: 1px solid #c6d2df;
  border-bottom: 1px solid #c6d2df;
  padding: 0;
  height: 26px;
  text-align: center;
  vertical-align: middle;
  background: #f9fbfe;
}

.roster-grid thead th {
  position: sticky;
  top: 0;
  z-index: 5;
  background: linear-gradient(180deg, #2f5f8a, #284d72);
  color: #ebf3ff;
  font-weight: 650;
  width: 34px;
  min-width: 34px;
  height: 34px;
  line-height: 1.1;
}

.roster-grid thead th .rg-wd { display: block; font-size: 9px; opacity: 0.85; }
.roster-grid thead th .rg-dn { display: block; font-size: 11px; font-weight: 800; }
.roster-grid thead th.is-weekend { background: linear-gradient(180deg, #4b5f7a, #3d4f66); }
.roster-grid thead th.is-today { box-shadow: inset 0 -3px 0 #f59e0b; }

.roster-grid .rg-emp {
  position: sticky;
  left: 0;
  z-index: 4;
  width: 210px;
  min-width: 210px;
  max-width: 210px;
  text-align: left;
  padding: 0 6px;
  background: #eef3f9;
  font-weight: 600;
  overflow: hidden;
}

.roster-grid thead .rg-corner { z-index: 6; background: linear-gradient(180deg, #2f5f8a, #284d72); }
.rg-corner-n { font-weight: 500; opacity: 0.8; }

.rg-emp-label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: default;
  min-width: 0;
}

.rg-emp-label input { margin: 0; flex: 0 0 auto; }

.rg-emp-name {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rg-emp-meta {
  flex: 0 1 auto;
  color: #6b8bb0;
  font-weight: 500;
  font-size: 9px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 45%;
}

.roster-grid tbody tr:nth-child(even) td { background: #f2f6fb; }
.roster-grid tbody tr:nth-child(even) .rg-emp { background: #e6edf6; }
.roster-grid tbody tr.is-selected .rg-emp { background: #dbeafe; }
.roster-grid td.is-weekend { background: #eceff4 !important; }
.roster-grid td.is-today { box-shadow: inset 2px 0 0 #f59e0b, inset -2px 0 0 #f59e0b; }
.roster-grid tbody tr:hover td { background: #e4edf8 !important; }

.roster-grid-wrap.is-editable td.rg-cell { cursor: pointer; }
.roster-grid-wrap.is-editable td.rg-cell:hover { outline: 2px solid #60a5fa; outline-offset: -2px; }

.roster-grid tfoot th,
.roster-grid tfoot td {
  position: sticky;
  bottom: 0;
  z-index: 5;
  background: #dfe7f1;
  font-weight: 800;
  color: #1f3f63;
  border-top: 2px solid #9db6d0;
}

.roster-grid tfoot .rg-foot-label { z-index: 6; }

/* Плашка смены — общая для сетки, списка и календаря. Цвет = порядок смены в
   «Режиме работы» (первая — дневная синяя, вторая — ночная индиго и т.д.). */
.rg-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 18px;
  padding: 0 5px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  border: 1px solid transparent;
  white-space: nowrap;
}

.rg-m0 { background: #dbeafe; color: #1e40af; border-color: #93c5fd; }
.rg-m1 { background: #e0e7ff; color: #3730a3; border-color: #a5b4fc; }
.rg-m2 { background: #ccfbf1; color: #115e59; border-color: #5eead4; }
.rg-m3 { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
.rg-m4 { background: #fce7f3; color: #9d174d; border-color: #f9a8d4; }
.rg-m5 { background: #ecfccb; color: #3f6212; border-color: #bef264; }

/* ── список ────────────────────────────────────────────────────────────── */
.roster-list-wrap { flex: 1 1 auto; }
.roster-list td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.roster-list-weekend { color: #b91c1c; font-weight: 700; }
.roster-list-custom { color: #92400e; font-weight: 800; }
.roster-list-foot { flex: 0 0 auto; }

/* ── календарь ─────────────────────────────────────────────────────────── */
.roster-calendar-wrap {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 8px;
  display: grid;
  gap: 12px;
  align-content: start;
}

.rc-title {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 800;
  color: #1f3f63;
}

.rc-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(120px, 1fr));
  gap: 3px;
}

.rc-wd {
  font-size: 10px;
  font-weight: 800;
  color: #2a4768;
  text-align: center;
  padding: 2px 0 4px;
}

.rc-wd.is-weekend { color: #b91c1c; }

.rc-day {
  min-height: 92px;
  border: 1px solid #c6d2df;
  border-radius: 8px;
  background: #fff;
  padding: 4px 6px;
  font-size: 10px;
  color: #1d2a3b;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.rc-day.is-out { opacity: 0.45; }
.rc-day:not(.is-period) { background: #eef1f6; }
.rc-day.is-weekend.is-period { background: #fbf8f2; }
.rc-day.is-today { border-color: #f59e0b; box-shadow: inset 0 0 0 1px #f59e0b; }
.rc-day.is-open { grid-row: span 2; }
.rc-day:hover { border-color: #60a5fa; }

.rc-head { display: flex; justify-content: space-between; align-items: baseline; }
.rc-num { font-size: 12px; font-weight: 800; }
.rc-total { font-size: 9px; color: #4d6a8c; font-weight: 700; }
.rc-sums { display: flex; flex-wrap: wrap; gap: 3px; }
.rc-names { display: grid; gap: 1px; }

.rc-name {
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rc-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: 0 0 auto;
  border: 1px solid transparent;
}

.rc-more { color: #4d6a8c; font-style: italic; }

/* Точка у имени — насыщенный цвет смены (светлая заливка плашки для 7px не видна). */
.rc-dot.rg-m0 { background: #3b82f6; }
.rc-dot.rg-m1 { background: #6366f1; }
.rc-dot.rg-m2 { background: #14b8a6; }
.rc-dot.rg-m3 { background: #f59e0b; }
.rc-dot.rg-m4 { background: #ec4899; }
.rc-dot.rg-m5 { background: #84cc16; }

/* ── отпрашивания (блок 5): метки в клетках, вид «Запросы», меню клетки ─── */
.rg-chip.is-custom { border-style: dashed; border-width: 1.5px; }

/* Точка-метка позиционируется от клетки — клетке нужен свой контекст. */
.roster-grid td.rg-cell { position: relative; }

.rg-mark {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.15);
}

.rg-mark-pending { background: #f59e0b; box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.25); }
.rg-mark-rejected { background: #9ca3af; }

.rg-legend-item .rg-mark { position: static; display: inline-block; }

.rg-off {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 5px;
  border-radius: 6px;
  background: #e5e7eb;
  color: #4b5563;
  font-size: 9px;
  font-weight: 800;
  border: 1px solid #d1d5db;
}

.roster-req-badge {
  display: inline-block;
  min-width: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: #f59e0b;
  color: #1f2937;
  font-size: 10px;
  text-align: center;
  line-height: 15px;
}

.roster-req-tools .report-acc-date input[type="date"],
.roster-req-tools .report-acc-date select {
  min-height: 24px;
  border: 1px solid #b6c9df;
  border-radius: 7px;
  background: #fff;
  color: #1d3553;
  font-size: 10px;
  padding: 0 6px;
}

.roster-req-table td.roster-req-reason {
  white-space: normal;
  line-height: 1.25;
}

.roster-req-table tr.roster-req-pending td { background: #fff8e6 !important; }

.roster-req-actions { white-space: nowrap; }

.roster-req-btn {
  min-width: 0;
  min-height: 22px;
  padding: 2px 8px;
  margin-right: 4px;
  font-size: 10px;
}

.roster-req-table .plan-btn.green { border-color: rgba(96, 201, 128, 0.68); background: rgba(50, 146, 84, 0.72); color: #f1fff7; }
.roster-req-table .plan-btn.red { border-color: rgba(221, 172, 196, 0.66); background: rgba(134, 82, 109, 0.65); color: #fff2f8; }

.roster-req-origin {
  margin-left: 6px;
  font-size: 9px;
  color: #6b7280;
  font-style: italic;
}

.roster-req-foot { flex: 0 0 auto; }

.roster-textline {
  flex: 1 1 320px;
  min-height: 26px;
  border: 1px solid #b6c9df;
  border-radius: 8px;
  padding: 0 8px;
  font: inherit;
  font-size: 11px;
  color: #1d3553;
}

.roster-pop .roster-nreq-time[hidden] { display: none; }

.roster-pop-row .report-acc-date input[type="time"] {
  min-height: 24px;
  border: 1px solid #b6c9df;
  border-radius: 7px;
  background: #fff;
  color: #1d3553;
  font-size: 10px;
  padding: 0 6px;
}

/* Меню клетки — всплывашка у клетки внутри прокручиваемой сетки */
.roster-cell-menu {
  position: absolute;
  z-index: 20;
  width: 260px;
  padding: 8px 10px;
  border: 1px solid #7ea2c4;
  border-radius: 10px;
  background: linear-gradient(180deg, #f6f9fd, #edf3fa);
  box-shadow: 0 10px 24px rgba(15, 23, 32, 0.28);
  display: grid;
  gap: 6px;
  font-size: 10px;
  color: #1d3553;
}

.roster-cell-menu-title { font-weight: 800; color: #1f3f63; }

.roster-cell-menu-req {
  padding: 4px 6px;
  border-radius: 6px;
  background: #fef3c7;
  color: #78350f;
  line-height: 1.3;
}

.roster-cell-menu-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.roster-cell-menu-row input[type="time"] {
  min-height: 24px;
  border: 1px solid #b6c9df;
  border-radius: 7px;
  background: #fff;
  color: #1d3553;
  font-size: 10px;
  padding: 0 6px;
}

.roster-cell-menu .plan-btn { min-width: 0; padding: 4px 8px; min-height: 24px; }
.roster-cell-menu .plan-btn.green { border-color: rgba(96, 201, 128, 0.68); background: rgba(50, 146, 84, 0.72); color: #f1fff7; }
.roster-cell-menu .plan-btn:not(.green):not(.yellow) { border-color: rgba(110, 145, 185, 0.65); background: rgba(42, 68, 108, 0.58); color: #c4dcf2; }
.roster-cell-custom { color: #92400e; font-weight: 700; }
.roster-cell-mode { color: #4d6a8c; }