:root {
  --blue: #1a73e8;
  --blue-dark: #1557b0;
  --mine: #1a73e8;
  --line: #dadce0;
  --text: #3c4043;
  --bg: #f8f9fa;
  --hour-h: 44px;     /* высота одного часа */
  --row-min: 30;      /* шаг сетки в минутах */
}

* { box-sizing: border-box; }

/* Важно: атрибут hidden должен скрывать элемент даже у блоков с display:flex.
   Без !important правило .modal{display:flex} перебивает hidden, и окно висит постоянно. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: "Google Sans", Roboto, Arial, "Segoe UI", sans-serif;
  color: var(--text);
  background: var(--bg);
}

/* ---------- Верхняя панель ---------- */
.topbar {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  padding: 16px 24px;
  background: #fff;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.event-block { flex: 1 1 380px; min-width: 280px; }
.event-title {
  width: 100%;
  font-size: 22px;
  font-weight: 600;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 4px 2px;
  outline: none;
}
.event-title:enabled { border-bottom-color: var(--line); }
.event-title:enabled:focus { border-bottom-color: var(--blue); }
.event-desc {
  width: 100%;
  margin-top: 6px;
  font-size: 14px;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 6px 2px;
  resize: vertical;
  outline: none;
  font-family: inherit;
  color: var(--text);
}
.event-desc:enabled { border-color: var(--line); padding: 6px 8px; }
.event-desc:enabled:focus { border-color: var(--blue); }
.event-title:disabled, .event-desc:disabled { background: #fff; color: var(--text); opacity: 1; }
.admin-hint {
  display: inline-block;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #b06000;
  background: #fef7e0;
  padding: 2px 8px;
  border-radius: 10px;
}

.weekstart-block {
  margin-top: 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: #fef7e0; border: 1px solid #fde293; border-radius: 8px; padding: 8px 10px;
}
.weekstart-block label { font-size: 13px; color: #7a5b00; font-weight: 600; }
.weekstart-block input[type="date"] {
  padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; font-size: 14px;
}
.weekstart-block button { padding: 6px 12px; font-size: 13px; }

.user-block { flex: 0 0 auto; }
.user-block label { font-size: 12px; color: #5f6368; display: block; margin-bottom: 4px; }
.user-row { display: flex; gap: 8px; }
.user-row input {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 14px;
  min-width: 180px;
}
.current-user { margin-top: 8px; font-size: 13px; color: #5f6368; }
.current-user b { color: var(--text); }

button {
  background: var(--blue);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 8px 16px;
  font-size: 14px;
  cursor: pointer;
}
button:hover { background: var(--blue-dark); }
button.ghost { background: #fff; color: var(--blue); border: 1px solid var(--line); }
button.ghost:hover { background: #f1f3f4; }
button.danger { background: #d93025; }
button.danger:hover { background: #b3271c; }

/* ---------- Панель длительности ---------- */
.duration-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 24px;
  background: #fff;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  flex-wrap: wrap;
}
.duration-bar select {
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 14px;
}
.duration-bar .hint { color: #5f6368; font-size: 12px; }

/* ---------- Основная раскладка ---------- */
.app-main {
  display: flex;
  gap: 16px;
  padding: 16px 24px;
  align-items: flex-start;
}
.calendar-wrap {
  flex: 1 1 auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: auto;
  max-height: calc(100vh - 220px);
}

/* ---------- Календарь ---------- */
.calendar {
  display: grid;
  /* столбец времени + 7 дней; строки задаются в JS */
  grid-template-columns: 56px repeat(7, 1fr);
  position: relative;
  min-width: 760px;
}
.cal-corner {
  position: sticky; top: 0; left: 0; z-index: 4;
  background: #fff; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line);
}
.cal-dayhead {
  position: sticky; top: 0; z-index: 3;
  background: #fff;
  text-align: center;
  padding: 8px 4px;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  font-size: 13px;
}
.cal-dayhead .dow { color: #5f6368; text-transform: uppercase; font-size: 11px; }
.cal-dayhead .dnum { font-size: 18px; font-weight: 600; }
.cal-dayhead.today .dnum {
  background: var(--blue); color: #fff; border-radius: 50%;
  width: 28px; height: 28px; line-height: 28px; display: inline-block;
}
.cal-timecol {
  grid-column: 1;
  position: relative;
  border-right: 1px solid var(--line);
}
.cal-timelabel {
  position: absolute;
  right: 6px;
  font-size: 11px;
  color: #5f6368;
  transform: translateY(-50%);
}

.cal-daycol {
  position: relative;
  border-right: 1px solid var(--line);
  user-select: none;
}
/* горизонтальная линия на каждый целый час */
.cal-hourline {
  position: absolute; left: 0; right: 0;
  border-top: 1px solid #eceff1;
}

/* слой подсветки (heatmap + лучшие окна) */
.heat-layer, .slot-layer, .best-layer {
  position: absolute; left: 0; right: 0; top: 0; bottom: 0;
  pointer-events: none;
}
.slot-layer { pointer-events: none; }

.heat-block {
  position: absolute; left: 1px; right: 1px;
  border-radius: 3px;
}
.heat-1 { background: rgba(52,168,83,0.12); }
.heat-2 { background: rgba(52,168,83,0.22); }
.heat-3 { background: rgba(52,168,83,0.34); }
.heat-4 { background: rgba(52,168,83,0.48); }
.heat-5 { background: rgba(52,168,83,0.62); }

.best-block {
  position: absolute; left: 1px; right: 1px;
  border: 2px solid #f9ab00;
  border-radius: 4px;
  background: rgba(249,171,0,0.10);
  box-shadow: 0 0 0 1px rgba(249,171,0,0.35) inset;
}

.slot-block {
  position: absolute; left: 3px; right: 3px;
  background: var(--mine);
  color: #fff;
  border-radius: 5px;
  font-size: 11px;
  padding: 3px 5px;
  overflow: hidden;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.slot-block .slot-time { font-weight: 600; }
.slot-block:hover { filter: brightness(1.05); }

/* временное выделение при перетаскивании */
.drag-ghost {
  position: absolute; left: 3px; right: 3px;
  background: rgba(26,115,232,0.35);
  border: 1px dashed var(--blue);
  border-radius: 5px;
  pointer-events: none;
}

/* ---------- Боковая панель ---------- */
.sidebar {
  flex: 0 0 300px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  max-height: calc(100vh - 220px);
  overflow: auto;
}
.sidebar h2 { font-size: 16px; margin: 0 0 4px; }
.sidebar h3 { font-size: 14px; margin: 18px 0 8px; }
.sidebar-sub { font-size: 12px; color: #5f6368; margin: 0 0 12px; }

.best-item {
  border: 1px solid var(--line);
  border-left: 4px solid #f9ab00;
  border-radius: 6px;
  padding: 8px 10px;
  margin-bottom: 8px;
}
.best-item .bi-when { font-weight: 600; font-size: 14px; }
.best-item .bi-count { font-size: 12px; color: #188038; font-weight: 600; }
.best-item .bi-who { font-size: 12px; color: #5f6368; margin-top: 2px; }
.best-empty { font-size: 13px; color: #5f6368; }

.manage-actions { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.manage-actions button { width: 100%; }

.admin-pwd { margin: 4px 0 8px; }
.admin-pwd label { display: block; font-size: 12px; color: #5f6368; margin-bottom: 4px; }
.admin-pwd-row { display: flex; gap: 6px; }
.admin-pwd-row input {
  flex: 1; min-width: 0; padding: 6px 8px;
  border: 1px solid var(--line); border-radius: 6px; font-size: 13px;
}
.admin-pwd-row button { white-space: nowrap; }

.participant-list { list-style: none; padding: 0; margin: 0; }
.participant-list .p-right { display: inline-flex; align-items: center; gap: 8px; }
.p-del {
  background: #fce8e6; color: #d93025; border: none; border-radius: 50%;
  width: 22px; height: 22px; line-height: 1; padding: 0; font-size: 12px; cursor: pointer;
}
.p-del:hover { background: #d93025; color: #fff; }
.participant-list li {
  font-size: 13px; padding: 4px 0; display: flex; justify-content: space-between;
  border-bottom: 1px solid #f1f3f4;
}
.participant-list li b { font-weight: 600; }
.participant-list .me { color: var(--blue); }

.legend { margin-top: 18px; font-size: 12px; color: #5f6368; }
.legend-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.legend-swatch { width: 18px; height: 14px; border-radius: 3px; display: inline-block; }
.legend-swatch.mine { background: var(--mine); }
.legend-swatch.heat { background: rgba(52,168,83,0.34); }
.legend-swatch.best { border: 2px solid #f9ab00; background: rgba(249,171,0,0.10); }

/* ---------- Приветствие ---------- */
.welcome {
  position: fixed; inset: 0;
  background: rgba(248,249,250,0.96);
  display: flex; align-items: center; justify-content: center;
  z-index: 50;
}
.welcome-card {
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 32px; max-width: 460px; text-align: center;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
.welcome-card h1 { font-size: 26px; margin: 0 0 12px; }
.welcome-card p { color: #5f6368; font-size: 14px; line-height: 1.5; }
.welcome-hint { margin-top: 12px; }
.welcome-form { display: flex; gap: 8px; justify-content: center; margin: 18px 0 6px; }
.welcome-form input {
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px;
  font-size: 15px; min-width: 220px;
}
.welcome-form input:focus { outline: none; border-color: var(--blue); }

/* ---------- Модальное окно ---------- */
.modal {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(0,0,0,0.35);
  display: flex; align-items: center; justify-content: center;
}
.modal-card {
  background: #fff; border-radius: 10px; padding: 20px 22px;
  width: 320px; box-shadow: 0 6px 30px rgba(0,0,0,0.25);
}
.modal-card h3 { margin: 0 0 14px; font-size: 18px; }
.modal-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.modal-row label { font-size: 13px; color: #5f6368; }
.modal-row input, .modal-row select {
  padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; font-size: 14px;
}
.build-badge {
  position: fixed; right: 8px; bottom: 8px; z-index: 100;
  background: #188038; color: #fff; font-size: 11px;
  padding: 3px 8px; border-radius: 10px; opacity: 0.85;
}
.modal-error { color: #d93025; font-size: 13px; min-height: 16px; margin-top: 4px; }
.modal-actions { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.modal-actions .spacer { flex: 1; }