* {
    box-sizing: border-box;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

body {
    margin: 0;
    background: #f2f4f7;
    color: #222;
}

#app {
    max-width: 1200px;
    margin: 0 auto;
    padding: 16px;
}

h2 {
    margin-top: 0;
}

#loginPanel {
    max-width: 320px;
    margin: 80px auto;
    padding: 24px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

#loginPanel input {
    width: 100%;
    padding: 8px 10px;
    margin-top: 4px;
    margin-bottom: 12px;
    border: 1px solid #d0d7de;
    border-radius: 6px;
}

button {
    cursor: pointer;
    padding: 8px 16px;
    border-radius: 8px;
    border: none;
    background: #2563eb;
    color: #fff;
    font-weight: 500;
}

button:hover {
    background: #1d4ed8;
}

button:disabled {
    opacity: 0.6;
    cursor: default;
}

.error {
    color: #b91c1c;
    margin-top: 8px;
    font-size: 13px;
}

.top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding: 8px 12px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(15,23,42,0.06);
}

.tabs {
    margin-top: 12px;
    display: flex;
    gap: 8px;
}

.tab-button {
    background: #e5e7eb;
    color: #111827;
}

.tab-button.active {
    background: #2563eb;
    color: #fff;
}

.tab-content {
    display: none;
    margin-top: 12px;
}

.tab-content.active {
    display: block;
}

.filters, .actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 12px;
    padding: 8px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(15,23,42,0.04);
}

.filters label {
    font-size: 14px;
}

.filters select {
    margin-left: 4px;
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid #d1d5db;
}

.actions {
    justify-content: flex-end;
}

#scheduleContainer, #tabelContainer {
    margin-top: 12px;
}

/* ================= РАСПИСАНИЕ ================= */

.day-block {
    background: #fff;
    border-radius: 12px;
    padding: 8px;
    margin-bottom: 12px;
    box-shadow: 0 1px 4px rgba(15,23,42,0.04);
}

.day-header {
    font-weight: 600;
    margin-bottom: 8px;
    font-size: 14px;
}

.schedule-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.schedule-table th,
.schedule-table td {
    border: 1px solid #e5e7eb;
    padding: 4px 6px;
    vertical-align: top;
}

.slots-cell {
    max-width: 100%;
}

/* контейнер для шапки часов + слотов */
.slots-time-wrapper {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* строка с подписями часов */
.hours-header-row {
    display: grid;
    grid-template-columns: repeat(24, minmax(20px, 1fr));
    gap: 2px;
    margin-bottom: 2px;
}

.hour-label-cell {
    font-size: 10px;
    text-align: center;
    border: 1px solid #d1d5db;
    background: #f3f4f6;
    padding: 2px 0;
}

/* слоты — 48 штук, по 2 на каждый час */
.slots-wrapper {
    display: grid;
    grid-template-columns: repeat(48, minmax(8px, 1fr));
    gap: 2px;
    padding: 2px 0;
}

.slot-cell {
    min-width: 8px;
    height: 18px;
    border-radius: 3px;
    border: 1px solid #d1d5db;
    background: #f9fafb;
    cursor: pointer;
}
/* цвет смен Я/РВ и фоны для ОТ/НН/Б в расписании */
.schedule-table tbody tr.status-rv .slot-cell.active {
    background: #fecaca;      /* мягкий красный как РВ в табеле */
    border-color: #fca5a5;
}

.schedule-table tbody tr.status-rv1 .slot-cell.active {
    background: #fecaca;
    border-color: #fca5a5;
}

.schedule-table tbody tr.status-ot .slots-cell,
.schedule-table tbody tr.status-nn .slots-cell,
.schedule-table tbody tr.status-b .slots-cell {
    background: #f9fafb;
}

.schedule-table tbody tr.status-ot .slot-cell {
    background: #dbeafe;      /* как .tabel-status-ot */
    border-color: #bfdbfe;
}

.schedule-table tbody tr.status-ov .slot-cell {
    background: #e0e7ff;      /* оплачиваемый выходной */
    border-color: #c7d2fe;
}

.schedule-table tbody tr.status-ov .slot-cell {
    background: #e0e7ff;      /* оплачиваемый выходной */
    border-color: #c7d2fe;
}

.schedule-table tbody tr.status-nn .slot-cell {
    background: #fef3c7;      /* как .tabel-status-nn */
    border-color: #fde68a;
}

.schedule-table tbody tr.status-b .slot-cell {
    background: #e0f2fe;      /* как .tabel-status-b */
    border-color: #bae6fd;
}


.slot-cell.active {
    background: #4ade80;
    border-color: #16a34a;
}

/* ячейки часов за день/неделю/месяц */
.day-hours-cell,
.week-hours-cell,
.month-hours-cell {
    text-align: center;
    font-weight: 500;
}

/* ================= ТАБЕЛЬ ================= */

.tabel-info {
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 500;
}

.tabel-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(15,23,42,0.04);
}

.tabel-table th,
.tabel-table td {
    border: 1px solid #e5e7eb;
    padding: 4px 6px;
    text-align: center;
}

.tabel-table th:first-child,
.tabel-table td:first-child {
    text-align: left;
    min-width: 160px;
}

/* заголовки для выходных/праздников (дата и день недели) */
.tabel-weekend-header {
    background: #fecaca; /* красноватый как для РВ */
}

/* фон ячеек статусов/часов для выходных/праздников */
.tabel-weekend-cell {
    background: #fee2e2;
}

/* раскраска статусов в табеле */
.tabel-status-cell,
.tabel-hours-cell {
    /* базовый фон — белый, дальше заливаем по статусу */
}

.tabel-status-v {
    background: #e5e7eb;   /* светло-серый для В */
}

.tabel-status-ot {
    background: #dbeafe;   /* голубой для ОТ */
}

.tabel-status-ov {
    background: #e0e7ff;   /* оплачиваемый выходной */
}

.tabel-status-rv {
    background: #fecaca;   /* красный/розовый для РВ */
}

.tabel-status-rv1 {
    background: #fecaca;   /* как РВ */
}

.tabel-status-nn {
    background: #fef3c7;   /* желтоватый для НН */
}

.tabel-status-b {
    background: #e0f2fe;   /* голубоватый для Б */
}

/* ================ ЛИЧНЫЙ КАБИНЕТ ================= */

.profile-admin-panel {
    margin-top: 8px;
    margin-bottom: 12px;
    padding: 8px 12px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(15,23,42,0.04);
    font-size: 14px;
}

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

.profile-admin-row label {
    font-size: 14px;
}

.profile-admin-row input[type="file"] {
    font-size: 13px;
}

.profile-image-container {
    background: #fff;
    border-radius: 12px;
    padding: 12px;
    box-shadow: 0 2px 8px rgba(15,23,42,0.04);
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-image {
    max-width: 100%;
    max-height: 480px;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(15,23,42,0.18);
}

.small-info {
    font-size: 13px;
    color: #6b7280;
}

@media (max-width: 768px) {
    #app {
        padding: 8px;
    }
    .top-bar {
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
    }
    .filters, .actions {
        flex-direction: column;
        align-items: stretch;
    }
}


/* Top-bar admin button */
#adminLink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid rgba(0,0,0,.18);
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  background: rgba(255,255,255,.7);
  transition: transform .05s ease, background .15s ease;
}

#adminLink:hover {
  background: rgba(255,255,255,.95);
}

#adminLink:active {
  transform: translateY(1px);
}

/* ===== LAYOUT CONTAINER ===== */

body {
  background: #f4f6f8;
}

.app-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 16px;
  box-sizing: border-box;
}

.app-container.narrow {
  max-width: 420px;
  margin-top: 80px;
}

/* верхняя панель */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.topbar-actions {
  display: flex;
  gap: 8px;
}

/* горизонтальный скролл для широких таблиц */
.content-scroll {
  overflow-x: auto;
  padding-bottom: 8px;
}

/* чтобы таблицы не растягивали контейнер */
#scheduleContainer,
#tabelContainer {
  min-width: 1100px;
}

/* фильтры аккуратнее */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

/* ===== Day schedule modal (ds-namespace, NO conflicts) ===== */

#dayScheduleModal .modal-card,
#dayScheduleModal .daymodal-card{
  width: min(1500px, 98vw);
  max-height: 86vh;
  overflow: auto;
  background: #fff;
  border-radius: 14px;
  padding: 14px;
}

/* состояния */
#dayScheduleModal .ds-loading,
#dayScheduleModal .ds-empty{
  padding: 10px;
}
#dayScheduleModal .ds-error{
  padding: 10px;
  color: #b00;
}

/* таблица */
#dayScheduleModal .ds-tbl{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: auto;
}

#dayScheduleModal .ds-tbl th,
#dayScheduleModal .ds-tbl td{
  text-align: left !important;
}

#dayScheduleModal .ds-tbl thead th{
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 2;
  border-bottom: 1px solid #e5e5e5;
  padding: 8px 10px;
  font-weight: 700;
}

#dayScheduleModal .ds-tbl td{
  border-bottom: 1px solid #f0f0f0;
  padding: 6px 10px;
  vertical-align: middle;
}

/* колонки */
#dayScheduleModal .ds-col-emp{ width: 320px; }
#dayScheduleModal .ds-col-status{ width: 80px; }
#dayScheduleModal .ds-col-hours{
  width: 120px;
  text-align: right !important;
  white-space: nowrap;
}
#dayScheduleModal .ds-col-time{ width: 860px; }

/* шапка времени */
#dayScheduleModal .ds-timehead-title{
  margin-bottom: 4px;
}

/* единый скролл для времени */
#dayScheduleModal .ds-timewrap{
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 860px;
  padding-bottom: 4px;
}

/* ===== Сетка (hourbox) ===== */
/* Размер клетки: делай 12 если хочешь “пожирнее” визуально */
#dayScheduleModal .ds-line{
  --cell: 12px;
  --h: 12px;
  display: inline-block;
  width: max-content;   /* важно: ширина по контенту */
}

/* ===== часы в шапке: 24 блока по часу ===== */
#dayScheduleModal .ds-hourlabels{
  display: grid;
  grid-template-columns: repeat(24, calc(var(--cell) * 2));
  gap: 0;
}

#dayScheduleModal .ds-hourlabel{
  width: calc(var(--cell) * 2);
  height: 16px;
  line-height: 16px;
  text-align: center;
  font-size: 11px;
  font-weight: 400; /* НЕ жирно */
  color: #333;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  border: 1px solid #bdbdbd;  /* рамка часа */
  box-sizing: border-box;
  background: #fafafa;
}

/* ===== строки: 24 hourbox, внутри 2 клетки ===== */
#dayScheduleModal .ds-hourboxes{
  display: grid;
  grid-template-columns: repeat(24, calc(var(--cell) * 2));
  gap: 0;
}

#dayScheduleModal .ds-hourbox{
  display: grid;
  grid-template-columns: repeat(2, var(--cell));
  border: 1px solid #bdbdbd;    /* рамка часа как в шапке */
  box-sizing: border-box;
  background: #fff;
}

/* клетки по 30 минут */
#dayScheduleModal .ds-cell{
  width: var(--cell);
  height: var(--h);
  border: 1px solid #d6d6d6;
  background: #fff;
  box-sizing: border-box;
}

/* чтобы не было двойной линии в середине часа */
#dayScheduleModal .ds-cell + .ds-cell{
  border-left: none;
}

#dayScheduleModal .ds-cell.is-work{
  background: #f3a3a3;
}

/* Вертикальные линии по часам (поверх и шапки, и строк) */
#dayScheduleModal .ds-timewrap{
  position: relative;
}

/* применяем и к часам, и к клеткам */
#dayScheduleModal .ds-timewrap .ds-line{
  position: relative;
}

/* Рисуем линии: каждые 2 клетки = 1 час */
#dayScheduleModal .ds-timewrap .ds-line::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  /* каждая полоса шириной 1px, повтор каждые 2*cell */
  background-image: repeating-linear-gradient(
    to right,
    rgba(0,0,0,0.35) 0px,
    rgba(0,0,0,0.35) 1px,
    transparent 1px,
    transparent calc(var(--cell) * 2)
  );
}

/* ===== Center overlay + fixed modal size (force) ===== */
#dayScheduleModal{
  display:none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,.35);

  display: flex;
  justify-content: center;   /* центр по горизонтали */
  align-items: flex-start;   /* НЕ центр по вертикали */

  padding-top: 10vh;         /* ← ВОТ ЭТО регулирует "выше" */
  box-sizing: border-box;
}

/* Если показываешь через JS: modal.style.display='flex' — ок */

/* Карточка модалки: НЕ растягивать */
#dayScheduleModal .modal-card,
#dayScheduleModal .daymodal-card{
  flex: 0 0 auto !important;    /* запрещаем растяжение */
  width: min(1500px, 98vw) !important;
  height: auto !important;
  max-height: 86vh !important;

  overflow: auto !important;
  background: #fff;
  border-radius: 14px;
  padding: 14px;

  margin: 0 !important;         /* в центре flex’ом margin не нужен */
  position: relative;
}
#dayScheduleModal .modal-card > div:first-child{
  display: flex;
  align-items: center;
}

#dayScheduleClose{
  margin-left: auto;
}
/* шапка модалки */
#dayScheduleModal .daymodal-head{
  position: relative;
  padding-right: 46px; /* место под кнопку, чтобы заголовок не залезал */
  display: block;      /* даже если flex сломан — всё равно ок */
}

/* кнопка закрытия всегда справа сверху внутри шапки */
#dayScheduleModal #dayScheduleClose{
  position: absolute !important;
  right: 0 !important;
  top: 0 !important;

  /* чтобы была аккуратная кнопка */
  width: 36px;
  height: 36px;
  line-height: 36px;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  border-radius: 10px;
}