* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: #f4f6fa;
  color: #222;
  -webkit-text-size-adjust: 100%;
}
.hidden { display: none !important; }
.error { color: #c0392b; min-height: 1.2em; margin: 6px 0; }
.muted { color: #888; font-weight: normal; font-size: 0.85em; }
button { font: inherit; padding: 6px 12px; border: 1px solid #b9c3d3; border-radius: 6px; background: #fff; cursor: pointer; }
button:hover { background: #eef2f8; }
button.primary { background: #3b6fd4; border-color: #3b6fd4; color: #fff; }
button.primary:hover { background: #2f5cb5; }
button.danger { background: #fff; border-color: #d9534f; color: #d9534f; }
button.danger:hover { background: #fdeceb; }

/* --- Вход --- */
#login-screen { display: flex; min-height: 100vh; align-items: center; justify-content: center; }
.login-card { width: 320px; display: flex; flex-direction: column; gap: 12px; }
.login-card h1 { margin: 0 0 8px; font-size: 1.3em; text-align: center; }
label { display: block; line-height: 1.5; }
label.inline { display: inline-flex; gap: 6px; align-items: center; margin-right: 14px; font-weight: normal; }
input, select {
  font: inherit; padding: 6px 8px; border: 1px solid #b9c3d3; border-radius: 6px; width: 100%;
}
.card {
  background: #fff; border-radius: 10px; padding: 24px;
  box-shadow: 0 4px 20px rgba(30, 40, 70, 0.12);
}

/* --- Шапка --- */
header {
  display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center;
  background: #fff; padding: 10px 16px; border-bottom: 1px solid #dde3ee;
}
header h1 { font-size: 1.15em; margin: 0; }
.week-nav { display: flex; align-items: center; gap: 6px; }
#today-btn { min-width: 132px; font-weight: 600; }
#today-btn.current { background: #e8f0fd; border-color: #3b6fd4; color: #2b57a8; }
.header-right { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#who { font-weight: 600; color: #445; }

main { padding: 14px 16px 30px; }
.hint { color: #8892a4; font-size: 0.85em; margin: 10px 2px; }

/* --- Переключатель участников --- */
.member-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.member-tabs button {
  border-radius: 999px; padding: 6px 14px; display: inline-flex;
  align-items: center; gap: 7px; font-weight: 500;
}
.member-tabs button.active {
  background: #3b6fd4; border-color: #3b6fd4; color: #fff;
}
.member-tabs .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.member-tabs button.active .dot { outline: 1px solid rgba(255,255,255,0.7); }

/* --- Сетка недели: столбцы — дни, строки — люди --- */
.grid-wrap { overflow-x: auto; }
#week-grid {
  border-collapse: collapse; background: #fff; min-width: 100%;
  box-shadow: 0 2px 10px rgba(30, 40, 70, 0.08); border-radius: 8px; overflow: hidden;
}
#week-grid th, #week-grid td {
  border: 1px solid #dde3ee; padding: 0; vertical-align: top;
}
#week-grid thead th { padding: 6px 4px; text-align: center; font-size: 0.88em; background: #f0f3f9; }
#week-grid thead th .day-date { display: block; font-weight: normal; color: #7a8394; font-size: 0.9em; }
#week-grid thead th.today-col { background: #fff3c9; }
#week-grid th.member-col, #week-grid td.member-name { width: 110px; }
#week-grid td.member-name {
  padding: 8px 10px; font-weight: 600; font-size: 0.9em; background: #fafbfd;
  overflow-wrap: break-word;
}
#week-grid td.today-col { background: #fffdf3; }
#week-grid td.cell { min-width: 108px; cursor: pointer; }
#week-grid td.cell .cell-add { color: #b6c0d4; text-align: center; padding: 14px 0; font-size: 1.3em; line-height: 1; user-select: none; }
#week-grid td.cell:hover .cell-add { color: #3b6fd4; }

.event {
  display: block; margin: 4px; padding: 4px 6px; border-radius: 6px;
  border-left: 4px solid var(--color, #999); background: #f6f8fc;
  cursor: pointer; font-size: 0.88em; overflow-wrap: break-word;
}
.event:hover { filter: brightness(0.96); }
.event .time { font-weight: 700; color: #33517a; margin-right: 4px; white-space: nowrap; }
.event .place { color: #7a8394; display: block; font-size: 0.9em; }
.event.cancelled { text-decoration: line-through; opacity: 0.55; }

/* --- Диалоги --- */
dialog {
  border: none; border-radius: 12px; padding: 22px 24px; width: min(480px, 94vw);
  box-shadow: 0 10px 40px rgba(20, 30, 60, 0.25);
}
dialog::backdrop { background: rgba(20, 30, 50, 0.4); }
dialog h2 { margin-top: 0; font-size: 1.15em; }
dialog form, dialog fieldset { display: flex; flex-direction: column; gap: 10px; }
fieldset { border: 1px solid #d5dcea; border-radius: 8px; }
legend { font-weight: 600; padding: 0 6px; }
.two-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dialog-actions { display: flex; gap: 8px; align-items: center; margin-top: 6px; }
.dialog-actions .spacer { flex: 1; }
.weekday-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.weekday-chips label {
  border: 1px solid #b9c3d3; border-radius: 6px; padding: 4px 9px; cursor: pointer; user-select: none;
}
.weekday-chips label.on { background: #3b6fd4; border-color: #3b6fd4; color: #fff; }
.weekday-chips input { display: none; }

/* --- Участники --- */
.users-dialog-body { display: flex; flex-direction: column; gap: 12px; }
.users-table { border-collapse: collapse; width: 100%; }
.users-table th, .users-table td { border-bottom: 1px solid #e3e8f2; padding: 6px 8px; text-align: left; font-size: 0.92em; }
.users-table th { color: #7a8394; font-weight: 600; }
.color-dot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; vertical-align: -2px; }

/* --- Мобильная вёрстка: карточки по дням вместо таблицы --- */
#mobile-days { display: none; }
@media (max-width: 720px) {
  /* Шапка в две строки: заголовок + действия, ниже — навигация по неделям */
  header {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 8px;
    padding-left: calc(8px + env(safe-area-inset-left));
    padding-right: calc(8px + env(safe-area-inset-right));
    padding-top: calc(8px + env(safe-area-inset-top));
  }
  header h1 { font-size: 1em; grid-column: 1; }
  .header-right { grid-column: 2; margin-left: 0; gap: 6px; }
  .header-right #who { display: none; }
  .header-right button { padding: 5px 8px; font-size: 0.85em; }
  .week-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    display: flex;
    width: 100%;
  }
  .week-nav #today-btn { flex: 1; min-width: 0; }

  main {
    padding: 8px;
    padding-left: calc(8px + env(safe-area-inset-left));
    padding-right: calc(8px + env(safe-area-inset-right));
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
  }

  /* Вкладки участников — одна прокручиваемая строка */
  .member-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-bottom: 8px;
    padding-bottom: 2px;
  }
  .member-tabs::-webkit-scrollbar { display: none; }
  .member-tabs button { padding: 6px 12px; flex: none; font-size: 0.9em; }

  .grid-wrap { display: none; }
  #mobile-days { display: flex; flex-direction: column; gap: 10px; }
  .day-card {
    background: #fff; border-radius: 12px; padding: 8px 12px 10px;
    box-shadow: 0 2px 8px rgba(30, 40, 70, 0.08);
  }
  .day-card.today { outline: 2px solid #f0c542; }
  .day-card-head {
    display: flex; justify-content: space-between; align-items: baseline;
    font-weight: 700; padding-bottom: 6px; margin-bottom: 4px;
    border-bottom: 1px solid #eef1f7;
  }
  .day-card-head .day-date { color: #7a8394; font-weight: normal; font-size: 0.85em; }
  .mobile-event { font-size: 0.95em; margin: 4px 0; }
  .mobile-event .time { display: inline-block; min-width: 4.2em; }
  .event .who { display: block; font-size: 0.8em; color: #7a8394; margin-top: 2px; }
  .empty-day { padding: 6px 0 2px; font-size: 0.9em; }
  .hint { font-size: 0.8em; }

  /* Диалоги — почти на весь экран, без обрезки */
  dialog {
    width: calc(100vw - 16px);
    max-width: 480px;
    max-height: calc(100vh - 24px);
    overflow-y: auto;
    padding: 16px 14px;
    -webkit-overflow-scrolling: touch;
  }
  dialog form { gap: 8px; }
  .two-cols { gap: 8px; }
  .login-card { padding: 18px; }
  .users-table { font-size: 0.85em; }
  .users-table th, .users-table td { padding: 4px 4px; }
  .users-table button { padding: 4px 7px; font-size: 0.9em; }
  .users-dialog-body { gap: 8px; }
}

/* Очень узкие экраны (iPhone SE / маленькие Android) */
@media (max-width: 360px) {
  .header-right button { padding: 5px 6px; font-size: 0.8em; }
  .two-cols { grid-template-columns: 1fr; }
  .weekday-chips label { padding: 4px 7px; }
}

/* --- Печать: A4 альбомная --- */
@media print {
  @page { size: A4 landscape; margin: 10mm; }
  body { background: #fff; }
  header, .hint, .cell-add, #print-btn, .member-tabs { display: none !important; }
  .grid-wrap { overflow: visible; }
  #week-grid { box-shadow: none; border-radius: 0; width: 100%; }
  #week-grid td.cell { min-width: 0; cursor: default; }
  #week-grid thead th.today-col, #week-grid td.today-col { background: #f2f2f2; }
  .event { border: none; border-left: 3pt solid var(--color, #999); background: none; break-inside: avoid; font-size: 9pt; }
  .event .time { color: #000; }
  .event .place { color: #444; }
  dialog { display: none !important; }
}