/* ============================================================
   КУРСЫ ФМБА и ЦИФРОВАЯ ГРАМОТНОСТЬ (portal-v419).
   Свой слой, подключается последним; классы fm- и sp-.
   ============================================================ */

:root {
  --fm-good: #13795b; --fm-good-bg: #e3f5ee;
  --fm-bad: #b4233c; --fm-bad-bg: #fde8ec;
  --fm-warn: #9a5b00; --fm-warn-bg: #fff3d6; --fm-warn-line: #f0c36a;
  --fm-new: #1f6fd1; --fm-new-bg: #e6f0fd;
  --fm-last: #6b43c4; --fm-last-bg: #efe8fd;
  --fm-soft: var(--surface-card-2, #f7f9fc);
}
[data-theme=dark] {
  --fm-good: #6fd6ae; --fm-good-bg: rgba(64, 190, 142, .16);
  --fm-bad: #f59aab; --fm-bad-bg: rgba(233, 94, 120, .16);
  --fm-warn: #f2c15c; --fm-warn-bg: rgba(231, 170, 50, .16); --fm-warn-line: rgba(242, 193, 92, .45);
  --fm-new: #8ec0ff; --fm-new-bg: rgba(84, 150, 240, .18);
  --fm-last: #c3aefc; --fm-last-bg: rgba(139, 92, 246, .2);
  --fm-soft: rgba(255, 255, 255, .04);
}

.fm-ico { display: inline-flex; flex: none; width: 15px; height: 15px; }
.fm-ico svg, .fmba-field-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fm-dot { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--course-color, #7f1438); }
.fm-empty { margin: 0; padding: 18px 8px; text-align: center; color: var(--muted); font-size: 12.5px; }

/* ---- Панель инструментов: линейные значки вместо эмодзи ---- */
.fm-toolbar .schedule-desktop-centers button { display: inline-flex; align-items: center; gap: 6px; }
.fm-toolbar .schedule-desktop-centers button .fm-ico { width: 14px; height: 14px; opacity: .75; }
/* display не трогаем: на экранах от 721px старый слой прячет значок у списка
   курсов — поле не оставляет под него места, и значок ложился на «Все курсы». */
.fm-toolbar .fmba-field-icon { width: 15px; height: 15px; font-size: 0; }
.fm-toolbar .fmba-field-icon svg { display: block; }
.fm-toolbar .fmba-period-control b { display: inline-flex; align-items: center; gap: 7px; }
.fm-toolbar .fmba-period-control b .fm-ico { color: var(--muted); }

/* ---- Сводка над расписанием ---- */
.fm-summary {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  margin: 0 0 14px; padding: 12px 16px;
  border: 1px solid var(--line); border-radius: var(--r-card, 14px); background: var(--panel); box-shadow: var(--shadow);
}
.fm-sum-parts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-size: 13px; color: var(--text-soft, var(--muted)); }
.fm-sum-parts > span { display: inline-flex; align-items: center; gap: 6px; }
.fm-sum-parts b { color: var(--text); font-size: 15px; }
.fm-sum-new { color: var(--fm-new); font-weight: 700; }
.fm-sum-last { color: var(--fm-last); font-weight: 700; }
.fm-unmarked-btn {
  display: inline-flex; align-items: center; gap: 8px; margin-left: auto;
  padding: 7px 12px; border: 1px solid var(--fm-warn-line); border-radius: 999px;
  background: var(--fm-warn-bg); color: var(--fm-warn); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
}
.fm-unmarked-btn b { font-size: 14px; }
.fm-unmarked-btn small { font-weight: 600; opacity: .8; }
.fm-unmarked-btn:hover { filter: brightness(.97); }
.fm-fresh { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.fm-fresh.is-error { color: var(--fm-bad); font-weight: 700; }
.fm-summary > .fm-fresh:first-child { margin-left: auto; }
.fm-sum-parts + .fm-fresh { margin-left: auto; }
.fm-loading { margin: 0 0 10px; }

/* ---- Доска ---- */
.fm-board.fmba-board { padding: 16px; }
.fm-board.fm-board-day { padding: 0; background: transparent; border: 0; box-shadow: none; }

/* День: колонки центров со строками-записями. */
.fm-day-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 14px; align-items: start; }
.fm-day-col { border: 1px solid var(--line); border-radius: var(--r-card, 14px); background: var(--panel); box-shadow: var(--shadow); overflow: hidden; }
.fm-day-col > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 14px 16px 10px; }
.fm-day-col > header h3 { margin: 0; font-size: 15px; }
.fm-day-col > header small { display: block; margin-top: 3px; font-size: 11.5px; color: var(--muted); }
.fm-day-col > header em { flex: none; font-style: normal; font-size: 11.5px; font-weight: 800; color: var(--muted); padding: 2px 9px; border-radius: 999px; background: var(--fm-soft); }
.fm-rows { display: grid; }
.fm-row {
  display: grid; grid-template-columns: 50px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 10px 16px 10px 13px; border-top: 1px solid var(--line); border-left: 3px solid var(--course-color, #7f1438);
  cursor: pointer; transition: background .12s;
}
.fm-row:hover { background: var(--fm-soft); }
.fm-row:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.fm-time { font-size: 15px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.fm-who { display: grid; gap: 3px; min-width: 0; }
.fm-name {
  justify-self: start; max-width: 100%; padding: 0; border: 0; background: none; color: var(--text);
  font: inherit; font-size: 13.5px; font-weight: 700; text-align: left; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fm-name:hover { color: var(--brand); text-decoration: underline; }
[data-theme=dark] .fm-name:hover { color: #f09bba; }
.fm-who small { display: block; font-size: 11.5px; line-height: 1.55; color: var(--muted); }
.fm-who small .fm-dot { margin-right: 5px; vertical-align: 1px; }
.fm-who b { font-size: 13.5px; }
.fm-mark { display: inline-block; margin-left: 6px; font-style: normal; font-size: 10.5px; line-height: 1.5; font-weight: 800; padding: 0 7px; border-radius: 999px; }
.fm-mark.is-new { color: var(--fm-new); background: var(--fm-new-bg); }
.fm-mark.is-last { color: var(--fm-last); background: var(--fm-last-bg); }

.fm-state {
  display: inline-flex; align-items: center; gap: 4px; flex: none; justify-self: end;
  padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 800; white-space: nowrap; text-decoration: none;
  color: var(--muted); background: var(--fm-soft);
}
.fm-state .fm-ico { width: 13px; height: 13px; }
.fm-state.is-attended { color: var(--fm-good); background: var(--fm-good-bg); }
.fm-state.is-missed { color: var(--fm-bad); background: var(--fm-bad-bg); }
.fm-state.is-unmarked { color: var(--fm-warn); background: var(--fm-warn-bg); }
a.fm-state.is-unmarked:hover { text-decoration: underline; }
.fm-state.is-booked { color: var(--text-soft, var(--muted)); }

/* Неделя: семь колонок, в плашке — время и фамилия с инициалами. */
.fm-week-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.fm-week-col { min-width: 0; display: grid; align-content: start; gap: 6px; }
.fm-week-head {
  display: flex; align-items: baseline; gap: 6px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--fm-soft); color: var(--text); font: inherit; cursor: pointer; text-align: left;
}
.fm-week-head b { font-size: 11.5px; color: var(--muted); text-transform: uppercase; }
.fm-week-head span { font-size: 16px; font-weight: 800; }
.fm-week-head em { margin-left: auto; font-style: normal; font-size: 11px; font-weight: 800; color: var(--muted); }
.fm-week-col.is-today .fm-week-head { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 8%, var(--panel)); }
.fm-week-col.is-today .fm-week-head b, .fm-week-col.is-today .fm-week-head span { color: var(--brand); }
[data-theme=dark] .fm-week-col.is-today .fm-week-head b, [data-theme=dark] .fm-week-col.is-today .fm-week-head span { color: #f09bba; }
.fm-week-body { display: grid; gap: 5px; }
.fm-week-body .fm-empty { padding: 8px 0; }
.fm-week-item {
  position: relative; display: grid; gap: 1px; min-width: 0; padding: 6px 8px 6px 9px; text-align: left;
  border: 1px solid var(--line); border-left: 3px solid var(--course-color, #7f1438); border-radius: 8px;
  background: color-mix(in srgb, var(--course-color, #7f1438) 6%, var(--panel)); color: var(--text); font: inherit; cursor: pointer;
}
.fm-week-item:hover { border-color: color-mix(in srgb, var(--course-color, #7f1438) 45%, var(--line)); }
.fm-week-item b { font-size: 12px; font-variant-numeric: tabular-nums; }
.fm-week-item span { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 14px; }
.fm-week-item small { font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fm-week-mark { position: absolute; top: 6px; right: 6px; display: inline-flex; }
.fm-week-mark .fm-ico { width: 13px; height: 13px; }
.fm-week-item.is-attended .fm-week-mark { color: var(--fm-good); }
.fm-week-item.is-missed .fm-week-mark { color: var(--fm-bad); }
.fm-week-item.is-unmarked .fm-week-mark, .fm-week-item.is-missing .fm-week-mark { color: var(--fm-warn); }
.fm-week-col.is-past .fm-week-item { background: var(--panel); }

/* Месяц: число записей и точки курсов. */
.fm-month-weekdays, .fm-month-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.fm-month-weekdays span { padding: 0 8px 6px; font-size: 11px; font-weight: 800; color: var(--muted); text-transform: uppercase; }
.fm-month-cell {
  position: relative; display: grid; align-content: start; gap: 6px; min-height: 86px; padding: 8px 9px; text-align: left;
  border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--text); font: inherit; cursor: pointer;
}
.fm-month-cell b { font-size: 13px; }
.fm-month-cell em { position: absolute; top: 8px; right: 9px; font-style: normal; font-size: 12px; font-weight: 800; color: var(--text); }
.fm-month-cell.has-data { background: var(--fm-soft); }
.fm-month-cell.is-past:not(.has-data) b { color: var(--muted); }
.fm-month-cell.is-today { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.fm-month-cell:hover { border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); }
.fm-month-dots { display: flex; flex-wrap: wrap; gap: 3px 8px; font-size: 11px; font-weight: 700; color: var(--text-soft, var(--muted)); }
.fm-month-dots span { display: inline-flex; align-items: center; gap: 4px; }
.fm-month-warn { display: inline-flex; align-items: center; gap: 3px; justify-self: start; font-size: 10.5px; font-weight: 800; color: var(--fm-warn); }
.fm-month-warn .fm-ico { width: 12px; height: 12px; }

.fm-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 14px; font-size: 11.5px; color: var(--muted); }
.fm-legend span { display: inline-flex; align-items: center; gap: 6px; }

/* ---- Итоги месяца ---- */
.fm-totals { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.fm-totals > * { min-width: 0; }
.fm-totals > .fm-fresh { justify-self: start; }
.fm-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.fm-tile { display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--fm-soft); }
.fm-tile span { font-size: 11.5px; font-weight: 700; color: var(--muted); }
.fm-tile b { font-size: 24px; line-height: 1.15; color: var(--text); font-variant-numeric: tabular-nums; }
.fm-tile small { font-size: 11px; color: var(--muted); }
.fm-tile.is-good b { color: var(--fm-good); }
.fm-tile.is-bad b { color: var(--fm-bad); }
.fm-tile.is-warn { background: var(--fm-warn-bg); border-color: var(--fm-warn-line); }
.fm-tile.is-warn b, .fm-tile.is-warn small { color: var(--fm-warn); }
.fm-total-block h3 { margin: 0 0 8px; font-size: 14px; }
.fm-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.fm-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.fm-table th, .fm-table td { padding: 9px 12px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fm-table thead th { font-size: 11px; font-weight: 800; color: var(--muted); background: var(--fm-soft); }
.fm-table tbody th { text-align: left; font-weight: 700; }
.fm-table tr:last-child th, .fm-table tr:last-child td { border-bottom: 0; }
.fm-table tr.is-total th, .fm-table tr.is-total td { font-weight: 800; background: var(--fm-soft); }
.fm-table td.is-warn { color: var(--fm-warn); font-weight: 800; }
.fm-table td.is-bad { color: var(--fm-bad); font-weight: 700; }
.fm-zero { color: var(--muted); opacity: .6; }
.fm-course-cell { display: inline-flex; align-items: center; gap: 7px; }
.fm-note { margin: 0; font-size: 11.5px; line-height: 1.5; color: var(--muted); }

/* ---- Панель «Нет отметки в CRM» ---- */
.fm-panel header small { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); }
.fm-panel-hint { margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: var(--fm-warn-bg); color: var(--fm-warn); font-size: 12px; line-height: 1.45; }
.fm-un-day { margin-bottom: 14px; }
.fm-un-day h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 12.5px; color: var(--text-soft, var(--muted)); }
.fm-un-day h4 em { font-style: normal; font-size: 11px; font-weight: 800; color: var(--muted); padding: 0 7px; border-radius: 999px; background: var(--fm-soft); }
.fm-un-row {
  display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 10px;
  padding: 8px 10px; border: 1px solid var(--line); border-left: 3px solid var(--course-color, #7f1438); border-radius: 10px; margin-bottom: 6px;
}
.fm-un-row .fm-time { font-size: 13px; }
.fm-crm-link {
  display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--brand); font-size: 12px; font-weight: 700; text-decoration: none; white-space: nowrap;
}
.fm-crm-link:hover { border-color: var(--brand); }
[data-theme=dark] .fm-crm-link { color: #f09bba; }

/* ---- Окно записи ---- */
.fm-dialog { max-width: 460px; }
.fm-dialog-course { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 12.5px; font-weight: 700; color: var(--text-soft, var(--muted)); }
.fm-dialog h2 { margin: 0; }
.fm-dialog-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; margin: 4px 0 0; }
.fm-dialog-grid div { display: grid; gap: 3px; min-width: 0; }
.fm-dialog-grid dt { font-size: 11px; font-weight: 700; color: var(--muted); }
.fm-dialog-grid dd { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; font-size: 13.5px; font-weight: 600; }
.fm-dialog-hint { display: flex; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--fm-warn-bg); color: var(--fm-warn); font-size: 12.5px; line-height: 1.4; }
.fm-dialog .dialog-actions { flex-wrap: wrap; }
.fm-crm-btn {
  display: inline-flex; align-items: center; gap: 6px; margin-right: auto; padding: 8px 14px; border-radius: 10px;
  border: 1px solid var(--line); color: var(--brand); font-weight: 700; text-decoration: none;
}
[data-theme=dark] .fm-crm-btn { color: #f09bba; }

/* ---- Цифровая грамотность ---- */
.sp-weeks { display: flex; gap: 8px; overflow-x: auto; margin: 0 0 14px; padding-bottom: 2px; scrollbar-width: none; }
.sp-weeks::-webkit-scrollbar { display: none; }
.sp-week {
  flex: 0 0 auto; display: grid; gap: 3px; min-width: 150px; padding: 9px 12px; text-align: left;
  border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--text); font: inherit; cursor: pointer; box-shadow: var(--shadow);
}
.sp-week strong { font-size: 13.5px; }
.sp-week span { display: flex; justify-content: space-between; gap: 10px; font-size: 11.5px; color: var(--muted); }
.sp-week span b { color: var(--fm-good); font-variant-numeric: tabular-nums; }
.sp-week span.is-full b { color: var(--fm-bad); }
.sp-week span.is-empty b { color: var(--muted); }
.sp-week.is-on { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.sp-week:hover { border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); }

.sp-page .fmba-board-special { padding: 0; background: transparent; border: 0; box-shadow: none; }
.sp-board { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 14px; align-items: start; }
.sp-card { border: 1px solid var(--line); border-radius: var(--r-card, 14px); background: var(--panel); box-shadow: var(--shadow); overflow: hidden; }
.sp-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 14px 16px 10px; }
.sp-card > header h3 { margin: 0; font-size: 15px; }
.sp-card > header p { margin: 4px 0 0; font-size: 11.5px; color: var(--muted); }
.sp-count { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.sp-count b { font-size: 22px; line-height: 1; color: var(--fm-good); font-variant-numeric: tabular-nums; }
.sp-count.is-full b { color: var(--fm-bad); }
.sp-count span { font-size: 12px; color: var(--muted); font-weight: 700; }
.sp-edit { display: inline-flex; align-self: center; padding: 4px; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; }
.sp-edit:hover { color: var(--brand); background: var(--fm-soft); }
.sp-list { list-style: none; margin: 0; padding: 0; }
.sp-list > li { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 10px; padding: 9px 16px; border-top: 1px solid var(--line); }
.sp-slots > li { grid-template-columns: 50px minmax(0, 1fr); }
.sp-num { font-size: 12px; font-weight: 800; color: var(--muted); text-align: right; }
.sp-time { font-size: 13.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.sp-list > li.is-free .sp-time, .sp-list > li.is-free .sp-num { color: var(--muted); font-weight: 600; }
.sp-free { display: block; padding: 5px 10px; border: 1px dashed var(--line); border-radius: 8px; font-size: 12px; color: var(--muted); }
.sp-list > li.is-free > .sp-free:only-child { grid-column: 1 / -1; text-align: center; border: 0; }
.sp-slot-body { display: grid; gap: 6px; min-width: 0; }
.sp-person { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
.sp-person-main { display: grid; gap: 2px; min-width: 0; }
.sp-person-main b { font-size: 13.5px; overflow-wrap: anywhere; }
.sp-person-main small { font-size: 11.5px; color: var(--muted); }
.sp-phone { color: var(--muted); text-decoration: none; white-space: nowrap; }
.sp-phone:hover { color: var(--brand); text-decoration: underline; }
.sp-crm { display: inline-flex; flex: none; padding: 6px; border-radius: 8px; color: var(--muted); }
.sp-crm:hover { color: var(--brand); background: var(--fm-soft); }
[data-theme=dark] .sp-crm:hover, [data-theme=dark] .sp-edit:hover, [data-theme=dark] .sp-phone:hover { color: #f09bba; }
.sp-card .fmba-special-waiting, .sp-card .fmba-special-warn { margin: 10px 16px 14px; }
.sp-page .fmba-special-waiting { margin-top: 14px; }
.sp-none { display: flex; gap: 14px; align-items: flex-start; padding: 22px; border: 1px dashed var(--line); border-radius: var(--r-card, 14px); background: var(--panel); color: var(--muted); }
.sp-none .fm-ico { width: 26px; height: 26px; }
.sp-none b { display: block; color: var(--text); font-size: 14px; }
.sp-none p { margin: 6px 0 0; font-size: 12.5px; }

/* ---- Узкие экраны ---- */
@media (max-width: 1100px) {
  .sp-board { grid-template-columns: minmax(0, 1fr); }
  .fm-week-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .fm-summary { padding: 10px 12px; }
  .fm-unmarked-btn { margin-left: 0; }
  .fm-fresh, .fm-sum-parts + .fm-fresh, .fm-summary > .fm-fresh:first-child { margin-left: 0; }
  .fm-day-grid { grid-template-columns: minmax(0, 1fr); }
  .fm-week-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .fm-week-col { grid-template-columns: 64px minmax(0, 1fr); align-items: start; }
  .fm-week-head { flex-direction: column; gap: 0; align-items: flex-start; }
  .fm-week-body { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
  .fm-week-item { padding: 5px 7px 5px 8px; }
  .fm-week-item span { font-size: 11.5px; padding-right: 12px; }
  .fm-month-days, .fm-month-weekdays { gap: 3px; }
  .fm-month-cell { min-height: 58px; padding: 5px; }
  .fm-month-cell em { top: 5px; right: 6px; font-size: 11px; }
  .fm-month-dots span { font-size: 0; }
  .fm-month-dots .fm-dot { width: 6px; height: 6px; }
  .fm-month-warn { font-size: 0; }
  .fm-dialog-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .fm-row { grid-template-columns: 44px minmax(0, 1fr); padding: 10px 12px 10px 10px; }
  .fm-row .fm-state { grid-column: 2; justify-self: start; }
  .fm-time { font-size: 14px; }
  .fm-un-row { grid-template-columns: 40px minmax(0, 1fr); }
  .fm-un-row .fm-crm-link { grid-column: 2; justify-self: start; }
  .fm-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-list > li { padding: 9px 12px; }
  .sp-week { min-width: 136px; }
}