/* Атрибут hidden обязан прятать элемент всегда.
   Браузерное правило [hidden]{display:none} слабее любого авторского
   display: у классов вроде .adm__login{display:flex} элемент с hidden
   оставался на экране. !important нужен, потому что специфичность
   [hidden] и класса одинаковая, и выигрывал бы файл, загруженный позже. */
[hidden]{display:none !important}

/* Общие компоненты обоих кабинетов.
   Подключается и клиентом, и преподавателем: карточки курсов, пары
   «подпись — значение», бейджи статусов. Держать их в двух файлах значило бы
   править каждую мелочь дважды и расходиться в мелочах — что и произошло:
   раздел заявок у преподавателя остался без стилей. */



.course{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-box);
  padding:14px;margin-top:10px;
}

.course__name{font-weight:650;line-height:1.3;margin-bottom:6px}

.course__meta{color:var(--muted);font-size:13px;line-height:1.5}

.course__foot{display:flex;align-items:center;gap:10px;margin-top:12px}

.course__price{font-weight:650;flex:1}

.course__badge{
  display:inline-block;padding:3px 10px;border-radius:var(--r-pill);
  font-size:12px;background:var(--ok-bg);color:var(--ok);font-weight:600;
}

.course .btn{min-height:42px;font-size:14px;padding:0 16px}


.status-line{
  display:flex;align-items:center;gap:8px;
  color:var(--muted);font-size:13px;margin:0 14px 4px;
}


.course__num{color:var(--muted);font-weight:400;font-size:13px}

.course__note{
  max-height:0;overflow:hidden;transition:max-height .25s ease;
  font-size:14px;line-height:1.5;color:var(--ink);
}

.course__note.is-open{max-height:none;margin-top:10px}

.course__note p{margin:0 0 8px}

.course__note a{word-break:break-word}

.facts dt{color:var(--muted);font-size:14px;margin:0}

.facts dd{margin:0;font-size:15px;overflow-wrap:anywhere}

.badge--green {background:var(--ok-bg);  color:var(--ok)}

.badge--red   {background:var(--err-bg); color:var(--err)}

.badge--yellow{background:var(--warn-bg);color:var(--warn)}

.badge--gray  {background:var(--bg);     color:var(--muted)}

@media (max-width:430px){
  .course{margin-left:0;margin-right:0}
  .status-line{margin-left:10px;margin-right:10px}
  /* Подписи и значения в столбик: в две колонки длинные названия
     вроде «Место проведения» рвутся посреди слова */
  .facts{grid-template-columns:1fr;gap:2px 0}
  .facts dt{font-size:13px}
  .facts dd{margin-bottom:6px}
}


/* ---------- Карточка курса: плотнее и ровнее ---------- */

.course__name{
  font-weight:650;font-size:16px;line-height:1.35;margin:0 0 2px;
  overflow-wrap:anywhere;
}
/* Номер курса — служебная деталь, не должен спорить с названием */
.course__num{
  display:inline-block;color:var(--muted);font-weight:400;font-size:13px;
  white-space:nowrap;
}

.facts{
  display:grid;grid-template-columns:minmax(0,38%) minmax(0,1fr);
  gap:4px 14px;margin:12px 0 0;align-items:baseline;
}
.facts dt{color:var(--muted);font-size:13px;margin:0;line-height:1.35}
.facts dd{margin:0;font-size:15px;line-height:1.35;overflow-wrap:anywhere}

.course__foot{
  display:flex;align-items:center;gap:10px;
  margin-top:14px;padding-top:12px;border-top:1px solid var(--line);
}
.course__price{font-weight:650;flex:1;min-width:0}
.course__foot .btn{min-height:40px;font-size:14px;padding:0 18px}
/* Кнопка действия прижата вправо, а не растянута на всю карточку */
.course__foot .btn,.course__foot .badge{margin-left:auto}

.status-line{
  display:block;color:var(--muted);font-size:13px;line-height:1.4;
  margin:14px 14px 2px;
}

@media (max-width:430px){
  .status-line{margin-left:10px;margin-right:10px}
  .course__name{font-size:15px}
  .facts{grid-template-columns:1fr;gap:1px 0}
  .facts dt{font-size:12px}
  .facts dd{margin-bottom:8px}
  .facts dd:last-child{margin-bottom:0}
}


/* ================= Чат ================= */
/* Пузырь называется chatmsg, а не msg: класс .msg занят сообщениями-подсказками
   в формах, у которых display:flex. Из-за совпадения имён автор, вложение,
   текст и время выстраивались в строку вместо столбца. */


.chatlist{padding:6px 0}

.chatrow{
  width:100%;display:flex;align-items:center;gap:12px;
  padding:14px;background:none;border:0;border-bottom:1px solid var(--line);
  text-align:left;color:var(--ink);cursor:pointer;
}

.chatrow:active{background:var(--bg)}

.chatrow__body{flex:1;min-width:0}

.chatrow__title{font-weight:650;font-size:15px;line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.chatrow__last{color:var(--muted);font-size:13px;margin-top:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.chatrow__side{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:6px}

.chatrow__time{color:var(--muted);font-size:12px}

.chatrow__unread{
  min-width:20px;height:20px;padding:0 6px;border-radius:10px;
  background:var(--accent);color:var(--accent-ink);
  font-size:12px;line-height:20px;text-align:center;font-weight:700;
}


.chathead{
  position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:8px;
  padding:10px 12px;background:var(--card);border-bottom:1px solid var(--line);
}

.chathead__back{
  width:40px;height:40px;border:0;background:none;color:var(--accent);
  font-size:28px;line-height:1;cursor:pointer;border-radius:50%;
}

.chathead__back:active{background:var(--bg)}

.chathead__title{font-weight:650;flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}


/* Переписка занимает всё пространство между шапкой и полем ввода.
   max-height по формуле не годился: при разной высоте шапки и клавиатуры
   лента то не доставала до низа, то уезжала под панель вкладок. */
.chatbody{
  padding:12px 12px 16px;display:flex;flex-direction:column;gap:8px;
  overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  min-height:0;flex:1 1 auto;
}

.chatmsg{max-width:82%;align-self:flex-start;background:var(--card);
  border:1px solid var(--line);border-radius:14px 14px 14px 4px;padding:9px 12px}

.chatmsg--mine{align-self:flex-end;background:var(--ok-bg);border-color:var(--ok);
  border-radius:14px 14px 4px 14px}

.chatmsg--pending{opacity:.6}

.chatmsg__author{font-size:12px;font-weight:700;color:var(--accent);margin-bottom:3px}

.chatmsg__body{font-size:15px;line-height:1.4;overflow-wrap:anywhere}

.chatmsg__meta{font-size:11px;color:var(--muted);margin-top:4px;text-align:right}


/* Поле ввода прижато к низу и не уезжает вместе с лентой */
.chatform{
  flex:0 0 auto;
  display:flex;align-items:flex-end;gap:8px;
  padding:10px 12px calc(10px + var(--safe-b));
  border-top:1px solid var(--line);background:var(--card);
}

.chatform textarea{
  flex:1;min-height:44px;max-height:140px;padding:11px 14px;font-size:16px;
  border:1px solid var(--line);border-radius:var(--r-ctl);
  background:var(--bg);color:var(--ink);resize:none;line-height:1.35;
}

.chatform__send{
  flex:0 0 auto;width:44px;height:44px;border:0;border-radius:50%;
  background:var(--accent);color:var(--accent-ink);font-size:18px;cursor:pointer;
}

.chatform__send:active{opacity:.85}

.chatform__clip:active{background:var(--bg)}

.chatform__clip input{display:none}


.chatmsg__img{display:block;margin-bottom:6px;border-radius:var(--r-box);overflow:hidden}

.chatmsg__img img{display:block;max-width:100%;max-height:280px;object-fit:cover}


.chatmsg__file{
  display:flex;align-items:center;gap:8px;margin-bottom:6px;padding:8px 10px;
  border-radius:var(--r-box);background:rgba(127,127,127,.14);
  text-decoration:none;color:inherit;
}

.chatmsg__file-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}

.chatmsg__file-size{flex:0 0 auto;font-size:12px;opacity:.7}


/* ---------- Сообщение с вложением ---------- */

/* Пузырь — столбец: автор, вложения, текст, время */
.chatmsg{display:block;min-width:0}
.chatmsg__body{font-size:15px;line-height:1.4;overflow-wrap:anywhere}
.chatmsg__meta{font-size:11px;color:var(--muted);margin-top:4px;text-align:right}

/* Картинка занимает ширину пузыря, но не растягивает его */
.chatmsg__img{display:block;margin:0 0 6px;border-radius:10px;overflow:hidden;max-width:100%}
.chatmsg__img img{display:block;width:100%;height:auto;max-height:260px;object-fit:cover}

/* Файл: имя сжимается многоточием, размер не переносится.
   min-width:0 обязателен — без него флекс-элемент не сжимается
   и вылезает за пузырь. */
.chatmsg__file{
  display:flex;align-items:center;gap:8px;
  margin:0 0 6px;padding:8px 10px;max-width:100%;min-width:0;
  border-radius:10px;background:rgba(127,127,127,.16);
  text-decoration:none;color:inherit;
}
.chatmsg__file .ico{flex:0 0 auto;width:18px;height:18px;opacity:.75}
.chatmsg__file-name{
  flex:1 1 auto;min-width:0;font-size:14px;line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.chatmsg__file-size{flex:0 0 auto;font-size:12px;opacity:.7;white-space:nowrap}

/* Имя картинки рядом с миниатюрой не нужно: она и так видна */
.chatmsg__img + .chatmsg__body{margin-top:2px}


/* ---------- Открытый чат занимает экран целиком ---------- */
/* Класс ставится на body, пока чат открыт: тогда лента и поле ввода
   делят высоту между шапкой и панелью вкладок, а страница не прокручивается
   целиком — прокручивается только переписка. */
body.chat-open{overflow:hidden}

body.chat-open #view{
  position:fixed;
  left:0;right:0;
  top:var(--chat-top,0px);
  bottom:calc(58px + var(--safe-b));
  max-width:760px;margin:0 auto;
  display:flex;flex-direction:column;
  background:var(--bg);
  z-index:10;
}

/* Чат живёт внутри промежуточного контейнера #chatMount. Без этого правила
   растягивался только #view, а лента и форма оставались высотой по содержимому
   и висели посреди экрана. */
body.chat-open #chatMount{
  display:flex;flex-direction:column;
  flex:1 1 auto;min-height:0;
}

body.chat-open .chathead{position:static;flex:0 0 auto}

/* Панель вкладок остаётся видимой поверх */
body.chat-open .tabbar{z-index:30}

/* ---------- Список чатов: поиск и группы курсов ---------- */

.chatsearch{padding:10px 12px 6px}
.chatsearch input{
  width:100%;min-height:44px;padding:11px 14px;font-size:16px;
  border:1px solid var(--line);border-radius:var(--r-ctl);
  background:var(--card);color:var(--ink);
}

.chatgroup{margin:0 0 4px}
.chatgroup__head{
  width:100%;display:flex;align-items:center;gap:10px;
  padding:12px 14px;background:none;border:0;cursor:pointer;
  color:var(--muted);font-size:13px;font-weight:600;text-align:left;
  text-transform:uppercase;letter-spacing:.03em;
}
.chatgroup__head:active{background:var(--bg)}
.chatgroup__title{
  flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.chatgroup__caret{
  flex:0 0 auto;width:14px;height:14px;fill:currentColor;
  transform:rotate(-90deg);transition:transform .18s;
}
.chatgroup__caret.is-open{transform:rotate(0)}
.chatgroup__unread{
  flex:0 0 auto;min-width:20px;height:20px;padding:0 6px;border-radius:10px;
  background:var(--accent);color:var(--accent-ink);
  font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;
}

/* Заголовок группы: две строки — курс, под ним даты и место */
.chatgroup__text{flex:1;min-width:0;display:block}
.chatgroup__title{
  display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.chatgroup__meta{
  display:block;margin-top:2px;font-size:12px;font-weight:400;
  text-transform:none;letter-spacing:0;color:var(--muted);opacity:.85;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* Когда курс один, заголовок группы не нужен — но место и даты полезны */
.chatgroup__single{
  padding:10px 14px 4px;font-size:13px;font-weight:600;color:var(--muted);
}
.chatgroup__single span{
  display:block;margin-top:2px;font-weight:400;font-size:12px;opacity:.85;
}

/* Экран «вы вошли под другой ролью» */
#wrongRole h1{font-size:19px;margin:0 0 8px;text-align:center}
#wrongRole p{color:var(--muted);text-align:center;margin:0 0 22px;font-size:15px;line-height:1.5}
#wrongRole .btn{text-decoration:none}

/* Список документов для ознакомления */
.doclist{margin:6px 0 14px;border:1px solid var(--line);border-radius:var(--r-box);overflow:hidden}
.doclist__item{
  display:flex;align-items:center;gap:10px;padding:13px 14px;
  text-decoration:none;color:var(--ink);font-size:14px;line-height:1.35;
  border-bottom:1px solid var(--line);
}
.doclist__item:last-child{border-bottom:0}
.doclist__item:active{background:var(--bg)}
.doclist__item span{flex:1;min-width:0}
.doclist__item .ico{flex:0 0 auto;color:var(--muted)}
.doclist__go{width:14px;height:14px}

/* Строка с галочкой согласия */
.checkline{display:flex;align-items:flex-start;gap:10px;cursor:pointer;margin-bottom:6px}
.checkline input{
  flex:0 0 auto;width:22px;height:22px;margin:1px 0 0;accent-color:var(--accent);
}
.checkline span{font-size:14px;line-height:1.4;color:var(--ink)}
.field.has-error .checkline span{color:var(--err)}

/* Оплата в карточке заявки */
.paybox{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:12px;padding-top:12px;border-top:1px solid var(--line);
}
.btn--pay{
  margin-left:auto;min-height:40px;padding:0 20px;font-size:14px;
  text-decoration:none;display:inline-flex;align-items:center;
  border-radius:var(--r-ctl);background:var(--accent);color:var(--accent-ink);font-weight:600;
}

/* Долг рядом с суммой и два бейджа в подвале карточки */
.course__debt{
  display:block;margin-top:2px;font-size:13px;font-weight:600;color:var(--err);
}
.course__badges{
  flex:0 0 auto;display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;
  max-width:62%;
}

/* Блок оплаты: состояние слева, кнопка справа */
.paybox{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:12px;padding-top:12px;border-top:1px solid var(--line);
}
.paybox__state{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.paybox__left{font-size:13px;color:var(--muted)}
.paybox__wait{font-size:13px;color:var(--muted)}
.btn--pay{flex:0 0 auto;min-height:40px;padding:0 20px;font-size:14px}

/* ---------- Сообщение-подсказка в формах ---------- */
/* Базовый стиль держим здесь: он был продублирован в обоих ролевых файлах
   с разными значениями, и тот, что грузился позже, перебивал вариант
   с действиями. */
.msg{
  padding:12px 14px;border-radius:var(--r-box);
  font-size:14px;line-height:1.4;margin-bottom:16px;
}
.msg--err{background:var(--err-bg);color:var(--err)}
.msg--ok{background:var(--ok-bg);color:var(--ok)}
.msg.hidden{display:none}

/* Сообщение с действиями: текст строкой, кнопки под ним */
.msg--rich .msg__text{margin-bottom:12px;font-weight:600}
.msg--rich .msg__acts{display:flex;gap:8px}
/* Кнопки делят строку поровну: на узком экране «Восстановить пароль»
   иначе переносится в две строки и блок становится выше текста */
.msg--rich .msg__acts .btn{flex:1 1 0;min-width:0}

.btn--sm{
  min-height:40px;padding:0 12px;font-size:14px;line-height:1.2;
  background:var(--card);border-color:var(--line);color:var(--accent);
  white-space:normal;
}

/* Поле пароля с кнопкой «показать» (assets/pwd.js) */
.pwd{position:relative;display:block}
.pwd > input{width:100%;padding-right:44px !important;box-sizing:border-box}
.pwd__eye{position:absolute;top:50%;right:6px;transform:translateY(-50%);width:34px;height:34px;
  display:flex;align-items:center;justify-content:center;border:0;background:none;padding:0;
  color:inherit;opacity:.55;cursor:pointer;border-radius:8px}
.pwd__eye:hover,.pwd__eye:focus-visible{opacity:1}