/* IS Coach — админка (этап 4). Дизайн 1:1 со скринами Chatium:
   тёмно-синий сайдбар, мятный фон, белые карточки, кнопки-«пилюли». */

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { min-height: 100%; }
body {
  font-family: 'Inter', Arial, sans-serif;
  background: #E8F5F0;
  color: #2D3436;
  font-size: 15px;
}

/* ---------- каркас ---------- */
.adm { display: flex; min-height: 100vh; }
.adm-sidebar {
  width: 232px; flex-shrink: 0;
  background: #17335F; /* тёмно-синий, как в админке Chatium */
  color: #fff;
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}
.adm-brand {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 18px 14px;
}
.adm-brand img { width: 44px; height: 44px; border-radius: 10px; }
.adm-brand span { font-weight: 600; font-size: 17px; }
.adm-menu { list-style: none; padding: 6px 10px; flex: 1; overflow-y: auto; }
.adm-menu a {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 14px; border-radius: 10px;
  color: #C9D8EC; text-decoration: none; font-size: 15px;
  margin-bottom: 2px;
}
.adm-menu a:hover { background: rgba(255,255,255,.08); color: #fff; }
.adm-menu a.active {
  background: #5BA4A4; color: #fff;
  font-weight: 600;
}
.adm-menu .adm-ico { width: 20px; text-align: center; }
.adm-sidebar-bottom { padding: 12px 10px 16px; }
.adm-sidebar-bottom a {
  color: #9DB2CE; text-decoration: none; font-size: 14px;
  display: block; padding: 8px 14px;
}
.adm-sidebar-bottom a:hover { color: #fff; }

.adm-main { flex: 1; min-width: 0; padding: 0 32px 40px; }
.adm-topbar {
  display: flex; align-items: center; justify-content: flex-end; gap: 14px;
  background: #fff; margin: 0 -32px; padding: 14px 32px;
  border-bottom: 1px solid #E3EDE8;
}
.adm-user { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.adm-topbar button {
  border: none; background: none; color: #636E72; cursor: pointer;
  font-family: inherit; font-size: 13px; padding: 6px 10px; border-radius: 8px;
}
.adm-topbar button:hover { background: #F0F5F3; color: #2D3436; }

.adm-title {
  color: #1B3A6B; font-size: 26px; font-weight: 700;
  padding: 22px 0 4px;
}
.adm-subtitle { color: #636E72; font-size: 14px; margin-bottom: 14px; }

/* ---------- карточки/панели ---------- */
.panel {
  background: #fff; border-radius: 16px;
  padding: 18px 20px; margin-top: 16px;
  box-shadow: 0 1px 3px rgba(27,58,107,.06);
}
.panel h3 { color: #1B3A6B; font-size: 16px; margin-bottom: 12px; }
.toolbar { display: flex; gap: 12px; margin: 14px 0; flex-wrap: wrap; align-items: center; }
.grow { flex: 1; }

/* ---------- кнопки ---------- */
.btn {
  display: inline-block; border: none; cursor: pointer; text-decoration: none;
  font-family: inherit; font-size: 14px; font-weight: 600;
  padding: 10px 18px; border-radius: 50px; color: #fff; background: #1B3A6B;
}
.btn:hover { background: #234B8B; }
.btn-teal { background: #5BA4A4; }
.btn-teal:hover { background: #438C8C; }
.btn-mint { background: #7ECDC0; color: #1B3A6B; }
.btn-ghost {
  background: #fff; color: #1B3A6B; border: 1px solid #D5E2DF;
  padding: 9px 18px;
}
.btn-ghost:hover { background: #F4F9F7; }
.btn-danger { background: #E15241; }
.btn-danger:hover { background: #C74332; }
.btn-sm { padding: 7px 14px; font-size: 13px; }
.btn-icon {
  padding: 7px 11px; border-radius: 8px; border: 1px solid #D5E2DF;
  background: #fff; cursor: pointer; text-decoration: none; color: #1B3A6B;
  font-size: 14px; display: inline-block;
}
.btn-icon.red { color: #E15241; border-color: #F2CFC9; }
.btn-icon.red:hover { background: #FDF2F0; }
.btn-icon:hover { background: #F4F9F7; }

/* ---------- таблицы ---------- */
table.adm-table { width: 100%; border-collapse: collapse; background: #fff; }
.adm-table th {
  text-align: left; font-size: 12.5px; color: #636E72; font-weight: 600;
  text-transform: uppercase; letter-spacing: .4px;
  padding: 12px 14px; border-bottom: 1px solid #E3EDE8;
}
.adm-table td {
  padding: 14px; border-bottom: 1px solid #EFF5F2; vertical-align: top;
}
.adm-table tr:last-child td { border-bottom: none; }
.adm-table .cell-title { font-weight: 600; color: #1B3A6B; }
.adm-table .cell-title small { display: block; color: #9AA5A0; font-weight: 400; font-size: 12px; }
.adm-num {
  width: 30px; height: 30px; border-radius: 50%;
  background: #E8F5F0; color: #1B3A6B; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; font-size: 13px;
}

/* ---------- бейджи ---------- */
.badge {
  display: inline-block; padding: 4px 12px; border-radius: 50px;
  font-size: 12.5px; font-weight: 600;
  background: #E1F3EA; color: #177E4D;   /* «Опубликован», «Зачёт», «Одобрен» */
}
.badge-draft { background: #F2F4F5; color: #636E72; }      /* «Черновик» */
.badge-warn { background: #FCF3E3; color: #B26A00; }        /* «На проверке», «Предпросмотр» */
.badge-red { background: #FBEAE7; color: #C74332; }         /* «Незачёт» */
.badge-navy { background: #E6EEF9; color: #1B3A6B; }
.badge-muted { background: #F2F4F5; color: #9AA5A0; }
.badge-sm { padding: 3px 9px; font-size: 11.5px; }

/* ---------- формы ---------- */
.form-card {
  max-width: 660px; margin: 22px auto 0; background: #fff;
  border-radius: 16px; padding: 26px 30px 24px;
  box-shadow: 0 2px 8px rgba(27,58,107,.08);
}
.form-card h2 { color: #1B3A6B; font-size: 20px; margin-bottom: 4px; }
.form-card .form-note { color: #636E72; font-size: 13.5px; margin-bottom: 18px; }
.field label { display: block; font-size: 13.5px; color: #2D3436; font-weight: 600; margin: 14px 0 6px; }
.field input[type=text], .field input[type=password], .field input[type=email],
.field input[type=number], .field select, .field textarea {
  width: 100%; padding: 10px 12px; border: 1px solid #D5E2DF; border-radius: 10px;
  font-family: inherit; font-size: 14.5px; background: #fff;
}
.field textarea { min-height: 90px; resize: vertical; }
.field textarea.tall { min-height: 200px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: #5BA4A4; box-shadow: 0 0 0 3px rgba(91,164,164,.15);
}
.form-actions {
  display: flex; gap: 12px; margin-top: 22px; padding-top: 16px;
  border-top: 1px solid #EFF5F2;
}
.form-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.hint { color: #9AA5A0; font-size: 12.5px; margin-top: 5px; }

/* тумблер */
.switch-row { display: flex; align-items: center; gap: 10px; margin: 12px 0; }
.switch-row input[type=checkbox] {
  appearance: none; width: 42px; height: 24px; border-radius: 24px;
  background: #D5E2DF; position: relative; cursor: pointer; transition: background .2s;
}
.switch-row input[type=checkbox]:before {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px; border-radius: 50%; background: #fff;
  transition: left .2s;
}
.switch-row input[type=checkbox]:checked { background: #5BA4A4; }
.switch-row input[type=checkbox]:checked:before { left: 21px; }
.switch-row .switch-label { font-size: 14px; }

/* файловые плашки */
.fileplate {
  display: inline-flex; align-items: center; gap: 8px;
  background: #F4F9F7; border: 1px solid #D5E2DF; border-radius: 10px;
  padding: 7px 11px; font-size: 13.5px; margin: 4px 8px 4px 0;
}
.fileplate a { color: #1B3A6B; text-decoration: none; font-weight: 500; }
.fileplate .del {
  color: #E15241; cursor: pointer; border: none; background: none;
  font-size: 14px; padding: 0 2px; font-family: inherit;
}
.filelabel {
  display: inline-block; padding: 9px 16px; border: 1px dashed #5BA4A4;
  color: #1B3A6B; border-radius: 10px; cursor: pointer; background: #F4FBFA;
  font-size: 13.5px; font-weight: 600;
}
.filelabel input { display: none; }
.filelabel:hover { background: #E8F5F3; }
.preview-img {
  max-width: 130px; max-height: 90px; border-radius: 8px;
  border: 1px solid #E3EDE8; display: block; margin-bottom: 6px;
}

/* ---------- программа курса ---------- */
.prog-module { border: 1px solid #E3EDE8; border-radius: 14px; margin-top: 14px; background: #fff; }
.prog-head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px; border-bottom: 1px solid #EFF5F2;
}
.prog-head .m-title { font-weight: 700; color: #1B3A6B; }
.prog-head small { color: #9AA5A0; }
.prog-head .grow { flex: 1; }
.prog-actions { display: flex; gap: 6px; }
.prog-lesson {
  display: flex; align-items: center; gap: 12px; padding: 12px 18px;
  border-bottom: 1px solid #F4F8F6;
}
.prog-lesson:last-child { border-bottom: none; }
.prog-lesson .num {
  background: #E8F5F0; color: #1B3A6B; font-weight: 700; font-size: 13px;
  border-radius: 8px; padding: 5px 9px; white-space: nowrap;
}
.prog-lesson .l-title { flex: 1; min-width: 0; }
.prog-lesson .l-meta { color: #9AA5A0; font-size: 12.5px; white-space: nowrap; }

/* ---------- карточки-списки (коучи, группы, задания) ---------- */
.cards { display: flex; gap: 14px; flex-wrap: wrap; }
.adm-card {
  background: #fff; border-radius: 16px; padding: 18px 20px;
  min-width: 260px; max-width: 380px; flex: 1;
  box-shadow: 0 1px 3px rgba(27,58,107,.06);
}
.adm-card h4 { color: #1B3A6B; font-size: 15.5px; margin: 6px 0 8px; }
.adm-card .meta { color: #636E72; font-size: 13.5px; margin: 4px 0; }
.adm-card .card-actions { display: flex; gap: 8px; margin-top: 14px; }

/* журнал: сводка */
.journal-summary { display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 0; }
.journal-summary .badge { font-size: 13px; padding: 7px 16px; }

/* подвал админки */
.adm-footer {
  margin-top: 34px; padding: 14px 20px; border-top: 1px solid #E3EDE8;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  color: #636E72; font-size: 13px;
}
.adm-footer .grow { flex: 1; }

/* логин */
.login-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: #E8F5F0;
}
.msg-ok { color: #177E4D; background: #E1F3EA; padding: 9px 14px; border-radius: 10px; margin: 10px 0; font-size: 14px; }
.msg-err { color: #C74332; background: #FBEAE7; padding: 9px 14px; border-radius: 10px; margin: 10px 0; font-size: 14px; }

@media (max-width: 900px) {
  .adm-sidebar { width: 64px; }
  .adm-brand span, .adm-menu a span, .adm-sidebar-bottom a { display: none; }
  .adm-main { padding: 0 16px 30px; }
  .adm-topbar { margin: 0 -16px; padding: 12px 16px; }
  .form-2col { grid-template-columns: 1fr; }
}
/* 21.10: галерея готовых иконок в форме тренинга */
.icon-gallery { margin-top: 14px; }
.icon-gallery .gallery-title { margin: 0 0 10px; font-size: 13px; color: #56686F; }
.icon-gallery .gallery-grid { display: flex; flex-wrap: wrap; gap: 12px; }
.icon-gallery .gallery-item {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 10px 10px 8px; border: 2px solid #E1E7E5; border-radius: 12px; cursor: pointer;
    background: #fff; transition: border-color .2s, box-shadow .2s;
}
.icon-gallery .gallery-item:hover { border-color: #9CC8BD; }
.icon-gallery .gallery-item input { position: absolute; opacity: 0; pointer-events: none; }
.icon-gallery .gallery-item input:checked + img { outline: 3px solid #2E6B5E; outline-offset: 2px; border-radius: 6px; }
.icon-gallery .gallery-item:has(input:checked) { border-color: #2E6B5E; box-shadow: 0 0 0 3px rgba(46,107,94,.15); }
.icon-gallery .gallery-item img { width: 88px; height: 64px; object-fit: contain; }
.icon-gallery .gallery-label { font-size: 11px; color: #41555C; }

/* 22.10: три колонки (Фамилия/Имя/Отчество) + чекбоксы доступов коуча */
.form-3col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 18px; }
.check-row { display: flex; align-items: center; gap: 8px; padding: 7px 0; font-size: 14px; color: #374151; }
.check-row input { accent-color: #1E6B5C; width: 16px; height: 16px; }
@media (max-width: 900px) { .form-3col { grid-template-columns: 1fr; } }

/* ---------- 31.10.2026 (Ирина): панель коучей — реестр слева, карточка справа ---------- */
.coach-wrap { display: grid; grid-template-columns: 300px 1fr; gap: 20px; align-items: start; }
.coach-side { background: #fff; border-radius: 14px; padding: 14px; box-shadow: 0 2px 10px rgba(37,66,60,.07); }
.coach-actions { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.coach-actions .on { background: #E1F3EA; border-color: #9CC8BD; color: #1E6B5C; }
.coach-list { display: grid; gap: 4px; max-height: 70vh; overflow-y: auto; }
.coach-item {
    display: block; padding: 10px 12px; border-radius: 10px; text-decoration: none;
    color: #25423C; border: 1px solid transparent; transition: background .15s, border-color .15s;
}
.coach-item:hover { background: #F4F9F7; }
.coach-item.active { background: #EAF5F0; border-color: #B9DCCF; }
.coach-name { display: block; font-weight: 600; font-size: 14px; }
.coach-meta { display: block; font-size: 12px; color: #6B7B86; margin-top: 2px; }
.coach-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.coach-tag { font-size: 11px; padding: 2px 8px; border-radius: 999px; }
.tag-off { background: #FBE3DF; color: #A5382A; }
.tag-none { background: #FFF1D8; color: #8A6100; }
.coach-empty { color: #9AA5A0; font-size: 13px; padding: 14px 4px; }

.coach-main { background: #fff; border-radius: 14px; padding: 20px 22px; box-shadow: 0 2px 10px rgba(37,66,60,.07); min-height: 320px; }
.coach-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.coach-title { margin: 0; font-size: 21px; color: #25423C; }
.coach-sub { font-size: 13px; color: #6B7B86; margin-top: 4px; }
.coach-tabs { display: flex; gap: 4px; border-bottom: 1px solid #E1E7E5; margin: 16px 0 18px; }
.coach-tab {
    border: 0; background: none; font-family: inherit; font-size: 15px; color: #6B7B86;
    padding: 10px 14px; cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -1px;
    display: inline-flex; align-items: center; gap: 6px;
}
.coach-tab:hover { color: #1E6B5C; }
.coach-tab.active { color: #1E6B5C; border-bottom-color: #1E6B5C; font-weight: 600; }
.adm-badge { background: #E6F2EC; color: #1E6B5C; border-radius: 10px; padding: 1px 8px; font-size: 12px; font-weight: 600; }
.coach-pane { display: none; }
.coach-pane.active { display: block; }
.coach-form label { display: block; font-size: 13px; color: #41555C; margin-bottom: 12px; }
.coach-form input[type=text], .coach-form input[type=email], .coach-form textarea {
    width: 100%; margin-top: 5px; padding: 9px 11px; border: 1px solid #CBD8D3;
    border-radius: 8px; font-family: inherit; font-size: 14px; box-sizing: border-box;
}
.coach-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.coach-hint { font-size: 12px; color: #8A9A95; margin: 4px 0 14px; }
.coach-access { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 18px; margin-bottom: 12px; }
.coach-check { display: flex; align-items: center; gap: 9px; padding: 8px 0; font-size: 14px; color: #374151; }
.coach-check input { accent-color: #1E6B5C; width: 16px; height: 16px; }
.coach-notes { display: grid; gap: 10px; }
.coach-note { display: flex; align-items: flex-start; gap: 14px; padding: 12px 14px; background: #F7FBF9; border-radius: 10px; border: 1px solid #E6EFEA; }
.coach-note-date { font-size: 12px; color: #1E6B5C; font-weight: 600; white-space: nowrap; padding-top: 2px; }
.coach-note-text { font-size: 14px; color: #25423C; white-space: pre-wrap; }
@media (max-width: 900px) {
    .coach-wrap { grid-template-columns: 1fr; }
    .coach-grid, .coach-access { grid-template-columns: 1fr; }
}

/* ---------- 31.10.2026 (Ирина): подвкладки «Группы / Чаты / Личные» ---------- */
.chat-subtabs { display: flex; gap: 8px; margin: 12px 0 18px; flex-wrap: wrap; }
.chat-subtabs a {
  border: 1px solid #cfe0d9; background: #fff; color: #4a5b56; text-decoration: none;
  border-radius: 999px; padding: 7px 16px; font-size: 14px;
}
.chat-subtabs a:hover { border-color: #9CC8BD; }
.chat-subtabs a.active { background: #1E6B5C; border-color: #1E6B5C; color: #fff; font-weight: 600; }