:root { --border:#e5e7eb; --text:#0f172a; --muted:#64748b; }

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", sans-serif;
  color: var(--text);
  background: #fafafa;
}

/* ---------- Top bar ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: white;
  border-bottom: 1px solid var(--border);
  padding: 12px 16px;
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
}

.title { font-weight: 700; font-size: 18px; }

.month-form {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.month-form label {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 13px;
  color: var(--muted);
}

.month-form input {
  width: 90px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: white;
}

.month-form button, .link, button {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: white;
  cursor: pointer;
}

.link { text-decoration: none; color: var(--text); }

/* ---------- Legend ---------- */

.legend {
  padding: 10px 16px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.chip {
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.08);
  font-size: 12px;
}

/* ---------- Table ---------- */

.table-wrap {
  padding: 0 16px 16px;
  overflow: auto;
}

.sched {
  border-collapse: collapse;
  table-layout: fixed;

  /* ключевое: таблица может быть шире экрана, а .table-wrap даст скролл */
  width: max-content;
  min-width: 100%;

  background: white;
  border: 1px solid var(--border);
  font-size: 12px;
}

/* фиксируем ширину колонок дней, чтобы в них влезали кнопки */
.sched thead th:not(.sticky-left),
.sched tbody td:not(.sticky-left) {
  width: 56px;
}


.sched th, .sched td {
  border: 1px solid var(--border);
  text-align: center;
  padding: 2px;
  vertical-align: middle;
}

/* sticky header inside scroll container */
.sched thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: #f8fafc;
}

/* sticky first column */
.sticky-left {
  position: sticky;
  left: 0;
  z-index: 4;
  background: #f8fafc;
  min-width: 58px;
}

.sched thead th.sticky-left {
  z-index: 6; /* top-left cell above all */
}

.th-date { font-weight: 800; font-size: 12px; }
.th-wd   { font-size: 11px; color: var(--muted); }

.time { font-weight: 700; }

/* base backgrounds */
td.cell.on  { background: #ffe4e6; }  /* рабочая зона */
td.cell.off { background: #f1f5f9; }  /* выключено */

/* weekend column shading */
th.wknd { background: #fff7d6; }  
td.cell.wknd.on { background: #fff7d6; }  /* выходные + рабочая зона (чуть отличаем) */
td.cell.wknd.off { background: #f1f5f9; }  /* выключено остаётся серым */

/* when employee selected: paint whole cell by employee color
td.cell.filled {
  background: var(--emp-bg);
} */

/* select styling: transparent so cell bg is visible */
select.slot {
  width: 100%;
  min-width: 0;
  padding: 2px;
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,0.18);
  background: transparent;
  font-weight: 800;
  font-size: 12px;
  text-align: center;
}

select.slot:disabled { opacity: 0.55; cursor: not-allowed; }

/* ---------- Summary ---------- */

.summary { padding: 0 16px 20px; }

.summary-title { font-weight: 800; margin: 8px 0; }

.sumtbl {
  border-collapse: collapse;
  background: white;
  border: 1px solid var(--border);
  min-width: 520px;
}

.sumtbl th, .sumtbl td {
  border: 1px solid var(--border);
  padding: 8px 10px;
  text-align: left;
}

.sumtbl th { background: #f8fafc; }

.hint {
  color: var(--muted);
  font-size: 12px;
  margin-top: 10px;
}

/* ---------- Employees page cards ---------- */

.card {
  margin: 16px;
  padding: 16px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 16px;
}

.card-title { font-weight: 800; margin-bottom: 12px; }

.formrow {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: end;
}

.formrow label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
}

.formrow input {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  min-width: 140px;
}

.swatch {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,0.12);
  vertical-align: middle;
  margin-right: 8px;
}

button.danger { border-color: #fecaca; background: #fff1f2; }

/* Slightly compact on smaller screens */
@media (max-width: 1400px) {
  .th-wd { display: none; }
  .th-date { font-size: 11px; }
  .sticky-left { min-width: 58px; }
}

.block-title{
  padding: 0 16px;
  font-weight: 800;
  margin-top: 10px;
}

.day-actions{
  margin-top: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap; /* разрешаем перенос, если прям совсем узко */
}

.daybtn{
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 8px;
  font-size: 11px;
  line-height: 1;
  border: 1px solid var(--border);
  background: white;
  cursor: pointer;

  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.daybtn:disabled{ opacity: .6; cursor: not-allowed; }

/* на совсем узких экранах — делаем вертикально (точно всё видно) */
@media (max-width: 900px) {
  .day-actions{
    flex-direction: column;
    gap: 3px;
  }
  .daybtn{
    width: 20px;
    height: 20px;
    font-size: 10px;
  }
}


/* ---- emergency row ---- */

.emlabel {
  white-space: nowrap;         /* чтобы "Экстренный выход" не ломался */
  font-weight: 600;
}

.emcell {
  text-align: center;
  vertical-align: middle;
}

.embtn {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.18);
  background: rgba(148, 163, 184, 0.12);
  color: rgba(15, 23, 42, 0.75);
  font-weight: 800;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 80ms ease, background 120ms ease, border-color 120ms ease;
}

.embtn:hover {
  transform: translateY(-1px);
  border-color: rgba(15, 23, 42, 0.28);
}

.embtn.on {
  background: rgba(225, 29, 72, 0.15);
  border-color: rgba(225, 29, 72, 0.45);
  color: rgb(225, 29, 72);
}

.embtn:active {
  transform: translateY(0);
}

.embtn:disabled {
  opacity: 0.6;
  cursor: default;
}


/* левая колонка (Время + Экстренный выход) */
table.sched th.sticky-left,
table.sched td.sticky-left {
  width: 40px;
  min-width: 40px;
}

/* на небольших экранах ещё уже */
@media (max-width: 1100px) {
  table.sched th.sticky-left,
  table.sched td.sticky-left {
    width: 40px;
    min-width: 40px;
  }
}

/* чтобы "Экстренный выход" влезал в узкую колонку */
td.emlabel {
  white-space: normal;   /* разрешаем перенос */
  font-size: 11px;
  line-height: 1.1;
  text-align: left;
  padding-left: 8px;
}


/* выравнивание строки экстренного выхода */
tr.emrow td {
  height: 36px;
}

td.emlabel {
  white-space: nowrap;
  vertical-align: middle;
  text-align: left;
  padding-left: 8px;
}