/* ==========================================================
   Харчування — сторінка класного керівника
   ========================================================== */

.ssm{
    /**
     * Палітра — та сама, що в розкладі: змінні --ssch- на
     * публічній частині і --ssa- в панелі керування.
     *
     * ──────────────────────────────────────────────────────
     * ЧОМУ ЗНАЧЕННЯ ПЕРЕПИСАНІ, А НЕ ПІДІБРАНІ ЗАНОВО
     *
     * Тут були свої відтінки синього й сірого — дуже близькі
     * до розкладових, але не ті самі. На окремій сторінці це
     * непомітно, а коли людина за хвилину переходить з розкладу
     * на харчування, різниця читається як «інший сайт»: той
     * самий синій, але трохи інший.
     *
     * Тому значення взяті з розкладу дослівно. Імена змінних
     * лишились свої (--ssm-*) навмисно: перейменування зачепило
     * б кожне правило у трьох файлах заради нуля користі, а
     * префікс ще й захищає від зіткнення, якщо харчування й
     * розклад опиняться на одній сторінці.
     *
     * Коли модулів стане більше — винесемо цей блок в окремий
     * спільний файл. Поки їх три, копія в кожному дешевша за
     * ще одну залежність між ними.
     */
    --ssm-ink:#0A2647;          /* найтемніший — заголовки */
    --ssm-accent:#1B4B8F;       /* фірмовий синій */
    --ssm-accent-2:#2563AF;     /* світліший, для наведення */
    --ssm-gold:#F2B705;
    --ssm-text:#2F3A45;
    --ssm-muted:#6B7A88;
    --ssm-border:#E1E6EC;
    --ssm-surface:#fff;
    --ssm-soft:#F5F8FB;
    --ssm-absent:#C1121F;
    --ssm-absent-soft:#FDE7E7;
    --ssm-nomeal:#8A6100;
    --ssm-nomeal-soft:#FEF3D0;
    --ssm-ok:#15803D;
    --ssm-ok-soft:#E4F6EB;

    /* Радіус і тінь — теж із розкладу: округлення 14 на
       зовнішніх картках, 12 на внутрішніх, тінь ледь помітна
       й у два шари, щоб картка «лежала» на фоні, а не була
       обведена рамкою */
    --ssm-r:14px;
    --ssm-r-sm:10px;
    --ssm-shadow:0 1px 3px rgba(6,32,47,.06),0 8px 24px rgba(6,32,47,.05);

    /**
     * Ширина сторінки.
     *
     * ──────────────────────────────────────────────────────
     * ЧОМУ 1180, А НЕ 760, І ЧОМУ З !important
     *
     * 760px закладались під один вузький список учнів. Але на
     * цій же розмітці живе звіт із таблицями на сім стовпців —
     * і там така ширина означає перенос у кожній комірці.
     *
     * 1180 — та сама межа, що в розкладі й на сторінці «Моє
     * харчування»: три модулі на одному сайті мають ставати в
     * один край, інакше сторінки виглядають як з різних сайтів.
     *
     * !important тут із тієї ж причини, що описана в me.css:
     * Elementor і шаблон теми нав'язують ширину дітям своїх
     * контейнерів. Саме через це «зняти позиціювання по центру»
     * робило блок ширшим, але зсунутим убік, а віджет із
     * шорткодом — центрованим, але вужчим: ширину визначав
     * батьківський контейнер, а не наш блок. Тепер визначає наш.
     */
    box-sizing:border-box !important;
    width:100% !important;
    max-width:1180px !important;
    margin:0 auto !important;

    color:var(--ssm-text);
    font-size:15px;
    line-height:1.5;
}

.ssm *{box-sizing:border-box}

/**
 * Розтискаємо обгортки Elementor навколо нашого блоку.
 *
 * Той самий прийом, що вже працює в розкладі (public.css):
 * :has() дозволяє дістати саме ту обгортку, всередині якої
 * лежить харчування, і не чіпати жодну іншу на сторінці.
 * Браузери без :has() просто проігнорують правило — там
 * лишається max-width вище, і сторінка буде вужчою, але
 * цілою.
 */
.elementor-widget-container:has(> .ssm),
.elementor-widget:has(.ssm),
.elementor-shortcode:has(.ssm){
    width:100% !important;
    max-width:100% !important;
}

.ssm-loading,
.ssm-muted{color:var(--ssm-muted);font-size:14px}

.ssm-note{
    padding:16px 18px;
    background:var(--ssm-soft);
    border:1px solid var(--ssm-border);
    border-radius:12px;
}

.ssm-note p{margin:0 0 10px}
.ssm-note p:last-child{margin:0}

/* ── Заголовок: клас і дата ─────────────────────────────── */

.ssm-heading{
    display:flex;
    flex-wrap:wrap;
    align-items:baseline;
    gap:8px;
    margin-bottom:10px;
}

.ssm-heading-class{
    font-size:20px;
    font-weight:700;
    color:var(--ssm-accent);
}

.ssm-heading-date{
    font-size:14px;
    color:var(--ssm-muted);
}

/**
 * Заголовок сторінки класу — по центру й великий.
 *
 * Дата тут не довідкова дрібниця, а головне питання сторінки:
 * вчитель має бачити, ЗА ЯКИЙ ДЕНЬ він зараз ставить відмітки,
 * ще до того як гляне на таблицю. Дрібний сірий рядок збоку
 * цього не давав — його просто не помічали, і був ризик
 * проставити вчорашній день, не зрозумівши цього.
 */
.ssm-heading--big{
    display:block;
    text-align:center;
    padding:18px 20px 20px;
    margin-bottom:16px;
    background:var(--ssm-surface);
    border:1px solid var(--ssm-border);
    border-radius:var(--ssm-r);
    box-shadow:var(--ssm-shadow);
}

/* Тонка золота риска під номером класу — той самий акцент,
   що в шапці розкладу. Він же відділяє «який клас» від
   «який день»: два різні питання, які раніше зливались у
   два рядки однакового вигляду. */
.ssm-heading--big .ssm-heading-class{
    position:relative;
    display:inline-block;
    padding-bottom:8px;
    font-size:26px;
    line-height:1.2;
    color:var(--ssm-ink);
}

.ssm-heading--big .ssm-heading-class::after{
    content:'';
    position:absolute;left:50%;bottom:0;
    width:38px;height:3px;margin-left:-19px;
    background:var(--ssm-gold);border-radius:2px;
}

.ssm-heading--big .ssm-heading-date{
    margin-top:2px;
    font-size:19px;
    font-weight:700;
    color:var(--ssm-text);
}

/* ── Панель зверху: клас і дата ─────────────────────────── */

.ssm-bar{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:12px;
    margin-bottom:16px;
}

.ssm-bar label{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:14px;
    color:var(--ssm-muted);
}

.ssm-bar select,
.ssm-bar input[type="date"]{
    padding:8px 10px;
    border:1px solid var(--ssm-border);
    border-radius:8px;
    background:var(--ssm-surface);
    color:var(--ssm-text);
    font-size:15px;
}

/* ── Підсумок ───────────────────────────────────────────── */

.ssm-summary{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:18px;
}

.ssm-stat{
    flex:1 1 120px;
    padding:14px 16px;
    background:var(--ssm-surface);
    border:1px solid var(--ssm-border);
    border-radius:var(--ssm-r);
    box-shadow:var(--ssm-shadow);
}

.ssm-stat b{color:var(--ssm-ink)}

.ssm-stat b{
    display:block;
    font-size:26px;
    line-height:1.1;
    font-weight:700;
}

.ssm-stat span{font-size:13px;color:var(--ssm-muted)}

/**
 * Порції виділені навмисно: це єдине число на сторінці, заради
 * якого кухня її й відкриває. Решта — довідкові.
 */
/* Ключова картка — суцільна заливка фірмовим синім. Градієнт
   узятий із шапки розкладу, щоб два модулі виділяли головне
   однаково */
.ssm-stat--meals{
    background:linear-gradient(135deg,var(--ssm-accent) 0%,var(--ssm-ink) 100%);
    border-color:var(--ssm-accent);
}

.ssm-stat--meals b,
.ssm-stat--meals span{color:#fff}

/* ── Список учнів: таблиця, компактно й звично ─────────────
   Раніше тут був <ul> із кнопками-пігулками «Відсутній» /
   «Не їсть» — на 25-30 рядків це виглядало важко й займало
   багато місця. Таблиця з чекбоксами читається так само, як
   Excel чи Google Таблиця, до яких учитель звик. */

.ssm-table-wrap{
    margin-bottom:18px;
    border:1px solid var(--ssm-border);
    border-radius:var(--ssm-r);
    overflow:hidden;
    background:var(--ssm-surface);
    box-shadow:var(--ssm-shadow);
}

.ssm-table{
    width:100%;
    border-collapse:collapse;
    font-size:14px;
}

/* Шапка липка: у класі на 30 учнів і у звіті на 24 вчителі
   при прокрутці зникали підписи стовпців, і галочку ставили
   навмання. sticky тут коштує один рядок і знімає всю
   проблему — прокрутка сторінки, а не окремого блоку, тому
   працює й на телефоні. */
.ssm-table thead th{
    position:sticky;
    top:0;
    z-index:2;
    padding:10px;
    background:var(--ssm-soft);
    border-bottom:1px solid var(--ssm-border);
    color:var(--ssm-muted);
    font-size:12px;
    font-weight:700;
    letter-spacing:.02em;
    text-transform:uppercase;
    text-align:left;
    white-space:nowrap;
}

.ssm-th-num{width:34px;text-align:center}
.ssm-th-flag{width:82px;text-align:center}
.ssm-th-del{width:34px}

.ssm-th-flag small{font-weight:400;font-size:11px}

/**
 * Стовпчик постійної відмітки відділений лінією.
 *
 * Він принципово інший за сусідні: ті описують СЬОГОДНІ, а
 * цей — властивість дитини, що діє на всі майбутні дні. Без
 * візуального розділення вчитель читав би три однакові
 * прапорці підряд і ставив постійний там, де мав на увазі
 * разовий.
 */
.ssm-th-always,
.ssm-cell-always{border-left:2px solid var(--ssm-border)}

.ssm-cell-num{
    text-align:center;
    color:var(--ssm-muted);
    font-size:12.5px;
}

.ssm-table tbody tr:not(:last-child) td{
    border-bottom:1px solid var(--ssm-border);
}

/* Компактний рядок. Раніше велика кнопка видалення (28-30px
   з паддінгами кіту) сама розтягувала висоту рядка — тепер,
   коли вона зафіксована 22px, рядок стискається автоматично. */
.ssm-table td{
    padding:5px 10px;
    vertical-align:middle;
}

.ssm-row--absent{background:var(--ssm-absent-soft)}
.ssm-row--nomeal{background:var(--ssm-nomeal-soft)}

.ssm-cell-name{font-weight:600;min-width:140px}

.ssm-note-text{
    display:block;
    font-weight:400;
    font-size:12.5px;
    color:var(--ssm-muted);
}

.ssm-cell-flag{text-align:center}

/**
 * Чекбокс збільшений відносно браузерного дефолту (14-16px):
 * на телефоні палець мажі повз стандартний розмір частіше, ніж
 * влучає. 20px — компроміс між «займає мало місця, як в Excel»
 * і «реально можна натиснути, не цілячись».
 */
.ssm-check{
    width:20px;
    height:20px;
    cursor:pointer;
    accent-color:var(--ssm-absent);
}

.ssm-check--meal{accent-color:var(--ssm-nomeal)}
.ssm-check--always{accent-color:var(--ssm-accent)}

/**
 * Кнопка відвідування з літерою «н».
 *
 * !important на боксових властивостях — з тієї самої причини,
 * що й у .ssm-del: глобальний стиль Elementor-кіту зачіпає
 * будь-який <button> на сайті власним паддінгом і фоном.
 */
.ssm-absent-btn{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:30px !important;
    height:26px !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
    border:1px solid var(--ssm-border) !important;
    border-radius:5px !important;
    background:var(--ssm-surface) !important;
    color:var(--ssm-absent) !important;
    font:700 15px/1 inherit !important;
    box-shadow:none !important;
    cursor:pointer;
}

.ssm-absent-btn:hover{border-color:var(--ssm-absent) !important}

.ssm-absent-btn.is-absent{
    background:var(--ssm-absent) !important;
    border-color:var(--ssm-absent) !important;
    color:#fff !important;
}

/**
 * Заблокована комірка «Не їсть», коли дитина відсутня.
 *
 * Сіре тло + приглушений чекбокс читаються як «це поле зараз
 * не для тебе» ще до того, як людина спробує його чіпнути —
 * саме та підказка, яка знімає питання «а чому не працює».
 */
.ssm-cell-flag--locked{background:var(--ssm-soft)}

.ssm-check:disabled{
    opacity:.4;
    cursor:not-allowed;
}

.ssm-cell-del{text-align:center}

/**
 * Кнопка видалення — жорсткі розміри під !important.
 *
 * Той самий винуватець, що й з line-height раніше: глобальний
 * стиль Elementor-кіту зачіпає будь-який <button> на сайті —
 * власний padding, background, min-width, часом і border-radius.
 * Специфічність кіту (клас кіту + тег) вища за наш один клас
 * .ssm-del, тому без !important кнопка виходила великою
 * блакитною плямою замість компактного хреста тих самих
 * розмірів, що й сусідній чекбокс.
 */
.ssm-del{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:22px !important;
    height:22px !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
    border:1px solid var(--ssm-absent) !important;
    border-radius:6px !important;
    background:var(--ssm-absent-soft) !important;
    color:var(--ssm-absent) !important;
    box-shadow:none !important;
    line-height:1 !important;
    cursor:pointer;
}

.ssm-del:hover{
    background:var(--ssm-absent) !important;
    color:#fff !important;
}

.ssm-del:focus-visible{outline:2px solid var(--ssm-accent);outline-offset:1px}

.ssm-empty{
    padding:16px !important;
    text-align:center;
    color:var(--ssm-muted);
}

/* ── Масові дії на весь клас ────────────────────────────── */

.ssm-mass{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
    margin-bottom:10px;
}

.ssm-mass-label{font-size:13px;color:var(--ssm-muted)}

/**
 * Навмисно дрібні кнопки. Дії рідкісні (поїздка раз на місяць),
 * і якби вони виглядали як головні на сторінці, у них частіше
 * тикали б випадково — а кожне натискання перезаписує весь клас.
 */
.ssm-mini{
    padding:6px 12px !important;
    border:1px solid var(--ssm-border) !important;
    border-radius:8px !important;
    background:var(--ssm-surface) !important;
    color:var(--ssm-muted) !important;
    font:500 12.5px/1 inherit !important;
    box-shadow:none !important;
    cursor:pointer;
}

.ssm-mini:hover{
    border-color:var(--ssm-accent) !important;
    color:var(--ssm-accent) !important;
}

/* ── Масове додавання ───────────────────────────────────── */

.ssm-bulk{
    margin-bottom:14px;
    padding:12px 14px;
    border:1px dashed var(--ssm-border);
    border-radius:12px;
}

.ssm-bulk summary{
    cursor:pointer;
    font-weight:600;
    font-size:14px;
    color:var(--ssm-accent);
}

.ssm-bulk p{margin:8px 0}

.ssm-bulk-text{
    width:100%;
    padding:10px 12px;
    border:1px solid var(--ssm-border);
    border-radius:8px;
    font:14px/1.4 ui-monospace,Consolas,monospace;
    resize:vertical;
    margin-bottom:8px;
}

/* ── Додавання учня ─────────────────────────────────────── */

.ssm-add{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.ssm-add input{
    flex:1 1 200px;
    padding:9px 12px;
    border:1px solid var(--ssm-border);
    border-radius:8px;
    font-size:15px;
}

.ssm-btn{
    padding:11px 20px;
    border:0;
    border-radius:var(--ssm-r-sm);
    background:var(--ssm-accent);
    color:#fff;
    font:600 14px/1 inherit;
    cursor:pointer;
    transition:background .15s ease;
}

.ssm-btn:hover{background:var(--ssm-accent-2)}
.ssm-btn:disabled{opacity:.55;cursor:default}

/* ── Стан збереження ────────────────────────────────────── */

.ssm-status{
    min-height:20px;
    margin-top:10px;
    font-size:13px;
    color:var(--ssm-muted);
}

.ssm-status--ok{color:var(--ssm-ok)}
.ssm-status--err{color:var(--ssm-absent)}

/* ── Телефон ────────────────────────────────────────────── */

@media (max-width:520px){
    /**
     * Таблиця не ламається переносом рядків, як робив flex-
     * список раніше, — вона просто скролиться вбік. Для
     * чотирьох вузьких колонок (ім'я + дві галочки + хрестик)
     * це звичніше, ніж коли рядок «розсипається» на кілька
     * рядків і губить вирівнювання чекбоксів під заголовками.
     */
    .ssm-table-wrap{overflow-x:auto}
    .ssm-table{min-width:520px}
}

/* ==========================================================
   Звіт для кухні та заступника
   ========================================================== */

/* Звіт успадковує ширину .ssm: власна межа тут була вужча за
   саму таблицю звіту, через що стовпці ламались ще до того,
   як закінчувалось місце на екрані */
.ssm-report{width:100%}

.ssm-table--report td,
.ssm-table--report th{padding:7px 10px}

.ssm-num{text-align:center;width:78px}

/* Назви класів короткі («8», «10(інд)») — широкий стовпець
   лише розганяв таблицю й віддаляв цифри від назви */
.ssm-th-class{width:96px}
.ssm-cell-class{white-space:nowrap}

.ssm-spacer td{
    height:10px;
    padding:0 !important;
    border-bottom:0 !important;
    background:none;
}

/**
 * Колонка «Порцій» виділена: це єдине число, заради якого
 * кухня відкриває сторінку. Решта колонок — довідкові, вони
 * пояснюють, звідки воно взялося.
 */
.ssm-num--key{
    font-weight:700;
    color:var(--ssm-accent);
    background:var(--ssm-soft);
}

.ssm-table--report tfoot td,
.ssm-table tfoot .ssm-row-total td{
    padding:9px 10px;
    border-top:2px solid var(--ssm-border);
    font-weight:700;
    background:var(--ssm-soft);
}

/* Кількість осіб у підсумковому рядку — не назва страви, тому
   без жирного: жирним лишається тільки сума, заради якої цей
   рядок і читають */
.ssm-table tfoot .ssm-row-total .ssm-cell-dishes{font-weight:500}

.ssm-row--empty td{color:var(--ssm-muted)}

.ssm-warn{color:var(--ssm-nomeal);font-size:13px}

.ssm-btn--ghost{
    background:var(--ssm-surface) !important;
    border:1px solid var(--ssm-border) !important;
    color:var(--ssm-accent) !important;
}

.ssm-btn--ghost:hover{background:var(--ssm-soft) !important}

/* ── Друк ───────────────────────────────────────────────────
   Кухні папірець зручніший за екран, до якого треба йти через
   коридор. Прибираємо все, що на папері не має сенсу: форму
   вибору дати, кнопки, пояснення внизу. */

@media print{
    .ssm-noprint{display:none !important}

    .ssm{max-width:none;font-size:12pt;color:#000}

    .ssm-heading-class{font-size:18pt;color:#000}
    .ssm-heading-date{font-size:12pt;color:#000}

    .ssm-table-wrap{border:1px solid #000;border-radius:0}

    .ssm-table th,
    .ssm-table td{border-bottom:1px solid #999}

    .ssm-num--key{background:none;color:#000}

    .ssm-stat{border:1px solid #000}
    .ssm-stat--meals{background:none !important;border:2px solid #000}
    .ssm-stat--meals b,
    .ssm-stat--meals span{color:#000 !important}

    /* Рядок класу не має розриватися між сторінками */
    .ssm-table tr{page-break-inside:avoid}
}

/* ==========================================================
   «Моє харчування» — сторінка вчителя
   ========================================================== */

.ssm-me{max-width:560px}

.ssm-subhead{
    margin:26px 0 10px;
    font-size:19px;
    font-weight:700;
    color:var(--ssm-accent);
}

.ssm-week{
    margin-bottom:22px;
    padding:14px 16px;
    background:var(--ssm-surface);
    border:1px solid var(--ssm-border);
    border-radius:12px;
}

.ssm-week-title{
    margin-bottom:10px;
    font-size:15px;
    font-weight:700;
}

.ssm-week-days{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-bottom:10px;
}

.ssm-week-actions{
    display:flex;
    gap:8px;
    margin-bottom:6px;
}

/**
 * Дні тижня — кнопки-перемикачі, а не прапорці.
 *
 * Тут немає стовпця із заголовком, який пояснював би, що
 * означає позначка, тому підпис має бути на самій кнопці.
 * Натиснутий стан читається кольором, як увімкнений день.
 */
.ssm-day-btn,
.ssm-eat-btn{
    padding:8px 14px !important;
    min-width:0 !important;
    margin:0 !important;
    border:1px solid var(--ssm-border) !important;
    border-radius:8px !important;
    background:var(--ssm-surface) !important;
    color:var(--ssm-muted) !important;
    font:600 14px/1 inherit !important;
    box-shadow:none !important;
    cursor:pointer;
}

.ssm-day-btn:hover,
.ssm-eat-btn:hover{
    border-color:var(--ssm-accent) !important;
    color:var(--ssm-accent) !important;
}

.ssm-day-btn.is-on,
.ssm-eat-btn.is-on{
    background:var(--ssm-accent) !important;
    border-color:var(--ssm-accent) !important;
    color:#fff !important;
}

.ssm-eat-btn{width:82px !important;text-align:center}

.ssm-reset-btn{
    width:28px !important;
    padding:5px 0 !important;
    font-size:14px !important;
}

/* ==========================================================
   ВИБУЛІ УЧНІ
   ==========================================================

   Учень, який вибув, зникає з наступних днів, але лишається
   в тих, коли він ще вчився: без його відміток не зійдеться
   відсоток відвідування за той місяць.

   Сірий колір каже не «редагувати не можна», а «цієї дитини
   вже немає в класі». Галочки в такому рядку працюють, як і
   в решти: виправляти минуле треба вміти й після вибуття.
   ========================================================== */

.ssm-row--left td{background:#FBFCFD}
.ssm-row--left .ssm-cell-name{color:#8A94A0}

/* Хрестик у вибулого видаляє назавжди, а не «ще раз вибуває» —
   тому червоніє на наведення */
.ssm-row--left .ssm-del:hover{color:#C1121F;border-color:#C1121F}

/* ==========================================================
   ПОДАЧА ДАНИХ КУХНІ
   ==========================================================

   Панель не кричить. Її завдання — не змусити натиснути, а
   показати стан: подано чи ні, коли саме і чи не змінилося
   щось після. Запізнення теж без червоного: воно вже
   зафіксоване й видно заступнику у звіті, а лаяти вчителя
   кольором на його ж робочій сторінці — зайве.
   ========================================================== */

.ssm-confirm{margin:0 0 16px}

.ssm-confirm-row{
    display:flex;align-items:center;gap:12px;flex-wrap:wrap;
    padding:12px 15px;
    background:#FFF8E8;border:1px solid #E8D9A8;border-radius:12px;
}

/* Подано — спокійний зелений: справу зроблено, дивитись більше
   нема на що */
.ssm-confirm-row--ok{background:#F1F8F3;border-color:#C6E2CE}

.ssm-confirm-text{flex:1;min-width:0;font-size:14px;line-height:1.45;color:#3C4753}

.ssm-late{color:#8A6100;font-weight:600}

.ssm-confirm-note{
    margin:8px 0 0;padding:9px 15px;
    background:#FFF8E8;border:1px solid #E8D9A8;border-radius:10px;
    font-size:13px;line-height:1.45;color:#6B5A2E;
}

@media (max-width:520px){
    .ssm-confirm-row{padding:11px 12px}
    .ssm-confirm-row .ssm-btn{width:100%}
}

/* Стан подачі у звіті */
.ssm-th-state{width:150px}
.ssm-cell-state{white-space:nowrap}
.ssm-state{font-size:13px;font-weight:700}
.ssm-state--ok{color:#2F7D46}
.ssm-state--late{color:#8A6100}
.ssm-state--none{color:#B32D2E;font-weight:600}
.ssm-state-note{display:block;font-size:11.5px;font-weight:500;color:#8A6100}

@media (max-width:640px){
    .ssm-th-state{width:auto}
    .ssm-state-note{white-space:normal}
}

/* ==========================================================
   ЗВІТ: СТРАВИ ВЧИТЕЛІВ
   ==========================================================

   Раніше звіт віддавав лише список прізвищ, і кухар не міг
   зрозуміти, скільки чого готувати: вчитель бере не «обід», а
   конкретні позиції — один тільки кашу, другий кашу з чаєм.
   Тепер спершу таблиця «скільки порцій кожної страви» (за нею
   і готують), а нижче — хто саме що взяв, для звірки.
   ========================================================== */

.ssm-table--tally .ssm-cell-name{font-weight:600}

/**
 * Стовпець «Сума» не переносимо.
 *
 * «— (4 без ціни)» — це п'ять слів у найвужчій колонці
 * таблиці. Браузер розбивав їх на чотири рядки, і через одну
 * комірку висота всього рядка виростала вчетверо — таблиця з
 * десяти страв ставала на пів екрана.
 *
 * Тому: сама сума в один рядок, а пояснення про страви без
 * ціни — окремим дрібним рядком під нею. Воно другорядне, і
 * читати його разом із цифрою не потрібно.
 */
.ssm-table--tally .ssm-num{
    white-space:nowrap;
    font-variant-numeric:tabular-nums;
}

.ssm-table--tally .ssm-num--sum{min-width:130px}

.ssm-table--tally .ssm-num .ssm-muted{
    display:block;
    font-size:11.5px;
    line-height:1.3;
    white-space:nowrap;
}

/* Перелік страв у рядку вчителя переноситься, а не розтягує
   таблицю: назви тут довгі, і горизонтальна прокрутка заради
   них зробила б звіт непридатним для друку */
.ssm-cell-dishes{
    font-size:13px;line-height:1.45;color:#3C4753;
}

@media print{
    /* На папері кухні потрібні страви й кількість, а суми в
       гривнях — це вже питання бухгалтерії */
    .ssm-noprint{display:none !important}
}

/* ==========================================================
   ХРОНОЛОГІЯ ПІДТВЕРДЖЕНЬ
   ==========================================================

   Блок, який відкривають раз на рік — коли цифра розійшлася з
   фактом і треба відновити, як усе було. Тому згорнутий і
   тихий: щодня він лише заважав би.
   ========================================================== */

.ssm-table--history td{
    padding:7px 8px;border-bottom:1px solid #EDF1F5;
    font-size:13px;color:#3C4753;vertical-align:top;
}

.ssm-hist-when{
    white-space:nowrap;font-weight:600;color:#16324F;
    font-variant-numeric:tabular-nums;
}

/* Дата окремим рядком і дрібним: вона з'являється тільки тоді,
   коли не збігається з днем звіту — тобто саме там, де це
   аномалія, яку треба помітити */
.ssm-hist-day{
    display:block;font-size:11.5px;font-weight:500;color:#B32D2E;
}

.ssm-hist-late{color:#8A6100}
.ssm-hist-who{white-space:nowrap;color:#5C6B78}
.ssm-hist-what{line-height:1.45}

/* Позначка «подано в інший день» у звіті */
.ssm-state-note--warn{color:#B32D2E;font-weight:600}

@media (max-width:520px){
    .ssm-hist-who{white-space:normal}
}