/* Стили AlIstaff. Основа — копия app.css aliright (шапка семейства, вкладки,
   плотные таблицы, чипы, окна, поля форм); правки alistaff к основе внесены
   в её же правила, ниже — дополнения alistaff.
   Здесь всё, чем пользуются несколько разделов (кнопки, подписи, подсказки,
   пустые блоки, листалка, лента, окна и поля форм). Стили одного раздела —
   свои файлы app/static/<раздел>.css. */

* { box-sizing: border-box; }
body { font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif; color: #222;
       margin: 0; padding: 0 0 90px; background: #eef1f4; }
.app { width: min(1600px, 100% - 32px); margin: 18px auto 0; border: 1px solid #ccc; border-radius: 10px;
       overflow: hidden; background: #fff; box-shadow: 0 2px 10px rgba(20,30,45,.06); }

/* ===== Полоса 1 — брендовая (1:1 как в AlIworks) ===== */
.brandbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
            gap: 18px; padding: 12px 22px; background: #fff; }
.brand-left { display: flex; align-items: center; gap: 13px; justify-self: start; }
.brand-left .orglogo { height: 50px; display: block; }
.company { font-family: Impact, "Haettenschweiler", "Arial Narrow", sans-serif;
           font-size: 31px; color: #003F9E; letter-spacing: .6px; line-height: 1;
           text-transform: uppercase; }
.brand-mid { justify-self: center; text-align: center; max-width: 460px; }
.brand-mid .tl2 { font-size: 17px; font-weight: 600; color: #22303f; letter-spacing: .3px; }
.brand-right { justify-self: end; display: flex; align-items: flex-end; }
.brand-right .prodlogo { height: 50px; display: block; }
.ver { font-size: 10px; color: #9aa2ab; letter-spacing: .3px; margin-left: 1ch; padding-bottom: 1px; }
.accent { height: 3px; background: #2438C8; }

/* ===== Полоса 2 — контекст ===== */
.ctxbar { display: flex; align-items: center; gap: 16px; padding: 8px 22px;
          background: #f7f9fb; border-bottom: 1px solid #e5e8eb; flex-wrap: wrap; }
.crumb { font-size: 13px; color: #566; }
.crumb a { color: #2438C8; text-decoration: none; font-weight: 600; }
.userbox { margin-left: auto; display: flex; align-items: center; gap: 11px; }
.userbox .lbl { font-size: 11px; color: #9aa2ab; }
.userbox .fio { font-weight: 700; color: #22303f; font-size: 14px; }
.userbox .role { border-radius: 11px; padding: 2px 11px; font-size: 11.5px; font-weight: 700; color: #fff; }
.r-dir { background: #2c6fbb; }
.r-law { background: #6b4fa3; }
.userbox .out { font-size: 12px; color: #2438C8; border: 1px solid #cdd3ec;
                border-radius: 6px; padding: 3px 9px; text-decoration: none;
                background: none; font-family: inherit; cursor: pointer; }
/* «выйти» — кнопка формы (R3-08), форма не должна ломать строку шапки */
.userbox .outform { margin: 0; display: inline; }

/* ===== Вкладки ===== */
.tabs { display: flex; gap: 4px; padding: 8px 16px 0; background: #f4f6f8; font-size: 13px; flex-wrap: wrap; }
.tabs .tb { padding: 6px 15px; border: 1px solid #ccd; border-bottom: none;
            border-radius: 6px 6px 0 0; background: #e8ecef; color: #666; text-decoration: none; }
.tabs .tb.on { background: #fff; color: #22303f; font-weight: 700; border-color: #bcc6cf; }

.screen { padding: 14px 18px 30px; border-top: 1px solid #d7dde3; }
.note { font-size: 11.5px; color: #8a929b; margin: 0 0 12px; }
h2.sec { font-size: 14px; margin: 18px 0 8px; color: #22303f; }
h2.sec:first-child { margin-top: 0; }
h2.sec .cnt { font-weight: 400; color: #8a929b; font-size: 12px; }
.muted { color: #8a929b; }

/* ===== Плотные таблицы (как в AlIworks) ===== */
.btab { border-collapse: collapse; width: 100%; font-size: 12.5px; margin-bottom: 14px; }
.btab th, .btab td { border: 1px solid #d7dde3; padding: 5px 7px; text-align: right; overflow-wrap: break-word; }
.btab th { background: #f2f5f8; color: #3a4149; font-weight: 700; text-align: center; font-size: 11.5px; }
.btab td.l, .btab th.l { text-align: left; }
.btab td.c { text-align: center; }
.btab tr.bad  td { background: #fdf1f0; }
.btab tr.warn td { background: #fff8e6; }
.btab tr.hidden-row { display: none; }
.btab a { color: #2438C8; text-decoration: none; font-weight: 600; }
.btab td.calc { color: #566; background: #fbfcfd; }

/* Бейджи и чипы */
.chip { display: inline-block; border-radius: 10px; padding: 1px 9px; font-size: 11px; font-weight: 700;
        white-space: nowrap; }
.ch-red    { background: #c0392b; color: #fff; }
.ch-amber  { background: #c8860a; color: #fff; }
.ch-green  { background: #2f9e52; color: #fff; }
.ch-grey   { background: #e8ecef; color: #566; }
.ch-blue   { background: #2c6fbb; color: #fff; }
.ch-violet { background: #6b4fa3; color: #fff; }
.ch-line   { background: #fff; color: #566; border: 1px solid #c4ccd4; font-weight: 600; }
.stage-chip { display: inline-block; border-radius: 4px; padding: 1px 7px; font-size: 11px;
              font-weight: 700; background: #eaf3ff; color: #1a4d80; border: 1px solid #b9d4ee; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: -1px; }
.dot.red { background: #c0392b; } .dot.amber { background: #c8860a; } .dot.green { background: #2f9e52; }

/* Флажки справочников */
.flag { display: inline-block; border-radius: 4px; padding: 1px 8px; font-size: 11px; font-weight: 700; cursor: pointer; }
.flag.ok  { background: #eafaf1; color: #1e5631; border: 1px solid #bfe8cf; }
.flag.no  { background: #fff8e6; color: #7a5a10; border: 1px solid #ecd9a0; }

/* Лозенджи (стилистика Jira-трекера) */
.k-loz { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase;
         border-radius: 4px; padding: 2px 6px; line-height: 1.3; }
.k-loz.green  { background: #EFFFD6; color: #4C6B1F; }
.k-loz.red    { background: #FFECEB; color: #AE2E24; }
.k-loz.yellow { background: #FFF5DB; color: #9E4C00; }
.k-loz.blue   { background: #E9F2FE; color: #1558BC; }
.k-loz.gray   { background: #0515240F; color: #505258; }
.k-loz.epic   { background: #F3F0FF; color: #5E4DB2; text-transform: none; }

/* KPI */
.kpirow { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.kpi { flex: 1 1 160px; border: 1px solid #d7dde3; border-radius: 8px; padding: 10px 12px; background: #fff; }
.kpi .v { font-size: 22px; font-weight: 700; color: #22303f; }
.kpi .v small { font-size: 12px; color: #8a929b; font-weight: 400; }
.kpi .k { font-size: 11px; color: #8a929b; text-transform: uppercase; letter-spacing: .3px; margin-top: 2px; }
.kpi.neg .v { color: #c0392b; }
.kpi.pos .v { color: #2f9e52; }

/* ===== Панель фильтров ===== */
.filters { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 12px;
           background: #f7f9fb; border: 1px solid #e5e8eb; border-radius: 8px; padding: 10px 12px; }
.filters .fld { display: flex; flex-direction: column; gap: 3px; }
.filters .fld .k { font-size: 10px; color: #9aa2ab; text-transform: uppercase; letter-spacing: .4px; }
.filters select, .filters input { font: inherit; font-size: 13px; padding: 5px 8px;
                                  border: 1px solid #c4ccd4; border-radius: 6px; background: #fff; }
.filters .spacer { margin-left: auto; }

/* Кнопки */
.btn { display: inline-block; font: inherit; font-size: 13px; padding: 6px 14px; border: 1px solid #c4ccd4;
       border-radius: 6px; background: #fff; color: #22303f; font-weight: 600; cursor: pointer;
       text-decoration: none; }
.btn:hover { background: #f0f3f6; }
.btn.primary { background: #2438C8; border-color: #2438C8; color: #fff; }
.btn.primary:hover { background: #1c2da3; }
.btn.sm { font-size: 12px; padding: 4px 10px; }

/* ===== Карточка дела ===== */
.casehead { padding: 2px 0 10px; }
.casehead h3 { margin: 0 0 4px; font-size: 17px; color: #22303f; }
.casehead .sub { font-size: 12.5px; color: #566; }
.casehead .sub b { color: #22303f; }
.headrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.headrow .grow { margin-left: auto; display: flex; gap: 8px; }

/* Маршрут со стадиями (стрелки): этапы человека в карточке, шаги загрузки заявок */
.routebox { border: 1px solid #d7dde3; border-radius: 8px; padding: 10px 14px; margin-bottom: 12px; background: #fbfcfd; }
.routebox .rname { font-size: 11px; color: #8a929b; text-transform: uppercase; letter-spacing: .3px; margin-bottom: 6px; }
.routebox .rname b { color: #22303f; }
.route { display: flex; gap: 0; flex-wrap: wrap; align-items: center; }
.route .step { font: inherit; font-size: 11.5px; padding: 4px 12px 4px 18px; background: #eef1f4; color: #8a929b;
               margin-bottom: 4px; border: 0; cursor: default;
               clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%, 10px 50%); }
.route .step.done { background: #d5f5e3; color: #1e5631; font-weight: 600; }
.route .step.now  { background: #2c6fbb; color: #fff; font-weight: 700; }
.fork { font-size: 11.5px; color: #7a5a10; background: #fff8e6; border: 1px dashed #ecd9a0;
        border-radius: 6px; padding: 3px 10px; margin: 4px 8px 4px 0; display: inline-block; }

/* Суммы: таблица разбивки */
.sums { display: flex; gap: 18px; padding: 8px 0 4px; flex-wrap: wrap; }
.sums div { font-size: 12px; color: #8a929b; }
.sums b { display: block; font-size: 16px; color: #22303f; }
.sums .neg b { color: #c0392b; }

.casecols { display: grid; grid-template-columns: 3fr 2fr; gap: 16px; align-items: start; }

/* Лента событий: одна строка на событие, цвет точки — вид события */
.tl h4, .side h4 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .3px; color: #8a929b; }
.tl ul { list-style: none; margin: 0; padding: 0; }
.tl li { position: relative; padding: 0 0 12px 18px; font-size: 12.5px; }
.tl li::before { content: ""; position: absolute; left: 4px; top: 4px; width: 7px; height: 7px;
                 border-radius: 50%; background: #2c6fbb; }
.tl li.evt-fork::before { background: #c8860a; }
.tl li.evt-money::before { background: #2f9e52; }
.tl li::after { content: ""; position: absolute; left: 7px; top: 14px; bottom: -2px; width: 1px; background: #d7dde3; }
.tl li:last-child::after { display: none; }
.tl .dt { color: #9aa2ab; font-size: 11px; display: block; }
.tl li .dt { display: inline; }
.tl li .ev { color: #8a929b; }
.tl .tag { font-size: 10.5px; color: #8a929b; }
/* Скрытая запись ленты: видна только редактору, приглушённо и с причиной.
   Кнопки «скрыть»/«Вернуть запись» — узел «деньги и лента» аудита 18.09.26. */
.tl li.evt-hidden { color: #9aa2ab; }
.tl li.evt-hidden::before { background: #c4ccd4; }
.tl li.evt-bad::before { background: #c0392b; }
.tl li.evt-ok::before { background: #2f9e52; }
.tl li.evt-sys::before { background: #c8860a; }
.tl li.evt-note::before { background: #8a929b; }
.tl li.evt-stage::before { background: #6b4fa3; }
.ev-x { border: none; background: none; padding: 0; font-size: 10.5px;
        color: #8a929b; text-decoration: underline dotted; cursor: pointer; }
.ev-x:hover { color: #c0392b; }
/* правка «было → стало»: лента, журнал, история заявки */
.was { color: #8c2f27; text-decoration: line-through; }
.now2 { color: #1e5631; font-weight: 700; }

.side .task { border: 1px solid #d7dde3; border-radius: 7px; padding: 7px 10px; margin-bottom: 7px; font-size: 12px; background: #fff; }
.side .task.late { border-color: #e4b1ab; background: #fffafa; }
.pass { border: 1px dashed #c4ccd4; border-radius: 7px; padding: 8px 12px;
        font-size: 11.5px; color: #566; background: #fbfcfd; }
.pass b { color: #22303f; }

/* ===== Модалки: окно поверх экрана и та же форма отдельной страницей (.modal.inpage) ===== */
.overlay { position: fixed; inset: 0; background: rgba(9,30,66,.54); z-index: 120;
           display: none; align-items: flex-start; justify-content: center; padding: 60px 16px; }
.overlay.open { display: flex; }
body.ov-on { overflow: hidden; }
.modal { background: #fff; border-radius: 8px; width: min(640px, 94vw); max-height: 84vh;
         overflow: auto; box-shadow: 0 8px 28px rgba(9,30,66,.35); }
.overlay .modal.narrow { width: min(540px, 94vw); }
.overlay .modal .modal.inpage { width: auto; max-height: none; box-shadow: none; border: 0; margin: 0; overflow: visible; }
.modal.inpage { background: #fff; border: 1px solid #d7dde3; border-radius: 8px; width: min(640px, 100%); margin: 0 auto; }
.m-h { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-bottom: 1px solid #e5e8eb;
       position: sticky; top: 0; background: #fff; z-index: 2; flex-wrap: wrap; }
.m-h b { font-size: 15px; }
.m-h .sub { font-size: 12px; color: #8a929b; }
.m-x { margin-left: auto; border: none; background: none; font-size: 18px; color: #505258;
       cursor: pointer; text-decoration: none; padding: 2px 8px; border-radius: 4px; }
.m-x:hover { background: #F0F1F2; }
.m-b { padding: 14px 18px; }
.m-f { padding: 12px 18px; border-top: 1px solid #e5e8eb; display: flex; gap: 8px; justify-content: flex-end;
       position: sticky; bottom: 0; background: #fff; flex-wrap: wrap; }
.m-f .hint { margin: 0 auto 0 0; align-self: center; }
.frow { margin-bottom: 10px; min-width: 0; }
.frow label { display: block; font-size: 11.5px; color: #667; margin-bottom: 3px; }
.frow label .req { color: #c0392b; }
.frow input, .frow select, .frow textarea { width: 100%; font: inherit; font-size: 13px; padding: 6px 9px;
       border: 1px solid #c4ccd4; border-radius: 6px; background: #fff; }
/* текстовые поля окна — сильнее правил разделов вида «.блок input» (галочки и переключатели не трогаем) */
.frow input:not([type=checkbox]):not([type=radio]) { width: 100%; font: inherit; font-size: 13px; padding: 6px 9px;
       border: 1px solid #c4ccd4; border-radius: 6px; background: #fff; }
.frow textarea { min-height: 56px; resize: vertical; }
.frow .hint { font-size: 11px; color: #8a929b; margin-top: 3px; }
.frow2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.frow3 { display: grid; grid-template-columns: 2fr 2fr 1fr; gap: 10px; }
.frow4 { display: grid; grid-template-columns: 2fr 2fr 1fr 2fr; gap: 8px; }
.mnote { font-size: 11.5px; color: #7a5a10; background: #fff8e6; border: 1px solid #ecd9a0;
         border-radius: 6px; padding: 7px 10px; margin-bottom: 10px; }
.req-mark { color: #c0392b; }
.cf-err { font-size: 12.5px; color: #c0392b; margin-bottom: 8px; font-weight: 600; }
/* выбор одного из списка карточками: причина обезличивания, итог этапа */
.rlist { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.rlist label { display: flex; gap: 8px; align-items: center; padding: 7px 10px; border: 1px solid #d7dde3; border-radius: 6px;
               font-size: 13px; color: #22303f; cursor: pointer; margin: 0; }
.rlist label:has(input:checked) { border-color: #2438C8; background: #E9F2FE; font-weight: 600; }
.rlist .sub { display: block; font-size: 11px; color: #8a929b; font-weight: 400; }
.rlist input { width: auto; flex: none; margin: 0; }

/* Поле «Дело» с поиском в окнах поручения и задачи (_case_pick.html).
   Список идёт в потоке, а не поверх: окно прокручивается само, и выпадашка
   поверх обрезалась бы его краем. */
.cpick-list { max-height: 200px; overflow: auto; margin-top: 3px; border: 1px solid #c4ccd4;
              border-radius: 6px; background: #fff; }
.cpick-opt { padding: 5px 9px; font-size: 13px; cursor: pointer; }
.cpick-opt:hover, .cpick-opt.on { background: #E9F2FF; }
.cpick-new { color: #1558BC; font-weight: 600; border-top: 1px solid #e5e8eb; }
.cpick-none { padding: 5px 9px; font-size: 12px; color: #8a929b; }
.frow .hint.err { color: #c0392b; }

/* ===================== Дополнения alistaff ===================== */
[hidden] { display: none !important; }
.r-director { background: #2c6fbb; }
.r-recruiter { background: #6b4fa3; }
.chip.r-director, .chip.r-recruiter { color: #fff; }

.lnk { border: none; background: none; padding: 0; font: inherit; font-size: 12.5px;
       color: #2438C8; cursor: pointer; text-decoration: none; }
.lnk:hover { text-decoration: underline; }
form.inl { display: inline; margin: 0; }
.btab tr.off td { color: #9aa2ab; background: #fafbfc; }

.tabs .tact { margin-left: auto; display: flex; gap: 6px; padding-bottom: 6px; align-items: center; }

.ok-note { font-size: 13px; color: #216E4E; background: #DCFFF1; border: 1px solid #7EE2B8;
           border-radius: 6px; padding: 9px 12px; margin-bottom: 10px; line-height: 1.6; }
.ok-note .sub { font-size: 12px; color: #2c5d46; }
.err-note { font-size: 13px; color: #8c2f27; background: #fdf1f0; border: 1px solid #e4b1ab;
            border-radius: 6px; padding: 8px 12px; margin-bottom: 12px; }
.temp-pass { font-family: Consolas, "Courier New", monospace; font-size: 16px; font-weight: 700;
             background: #fff; border: 1px solid #7EE2B8; border-radius: 5px; padding: 1px 8px;
             letter-spacing: .5px; color: #22303f; }
.empty { color: #8a929b; font-size: 13px; padding: 10px 0; }

/* кнопки: «+ Контакт» и прочие второстепенные, опасное действие, «вышел» */
.btn.alt { color: #2438C8; border-color: #2438C8; }
.btn.alt:hover { background: #E9F2FE; }
.btn.danger { color: #c0392b; border-color: #e4b1ab; background: #fff; }
.btn.ok-btn { color: #1e7a3c; border-color: #2f9e52; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* подписи, подсказки, строки без переноса */
.nw { white-space: nowrap; }
.btab .sub, .sub { font-size: 11.5px; color: #8a929b; font-weight: 400; }
.hint { font-size: 11px; color: #8a929b; margin-top: 3px; }
.hint a { color: #2438C8; font-weight: 600; }

/* этапы-чипы и архив */
.stage-chip.ok  { background: #eafaf1; color: #1e5631; border-color: #bfe8cf; }
.stage-chip.bad { background: #fdf1f0; color: #8c2f27; border-color: #e4b1ab; }
.stage-chip.off { background: #f4f6f8; color: #566; border-color: #d7dde3; }
.chip.ch-arch { background: #e8ecef; color: #505258; border: 1px solid #c4ccd4; }

/* галочки в панели фильтров; все фильтры — в одну строку, как в макете */
.filters .chk { flex-direction: row; align-items: center; gap: 6px; font-size: 13px; padding-bottom: 6px; }
.filters .chk input { width: auto; padding: 0; margin: 0; }
@media (min-width: 601px) { .filters select { max-width: 160px; } }

/* таблицы: прокрутка вбок в своей рамке (слова не ломаются по буквам), просроченное,
   имя и номер одной строкой; колонки сетки не распирают страницу */
.tw { overflow-x: auto; max-width: 100%; }
.btab .btn, .btab .k-loz { white-space: nowrap; }
.casecols > *, .today-grid > *, .an-grid > * { min-width: 0; }
.btab td.late { color: #c0392b; font-weight: 700; }
.btab td.nm a { white-space: nowrap; }
.btab .dial, .dial { white-space: nowrap; }

/* пустой блок со словами и действием; листалка списка */
.empty-box { border: 1px dashed #c4ccd4; border-radius: 8px; padding: 18px; text-align: center; margin-bottom: 14px; background: #fbfcfd; }
.empty-big { font-size: 15px; font-weight: 700; color: #3a4149; margin: 0 0 10px; }
.pager { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: -4px 0 12px; font-size: 12.5px; }

/* шапка карточки (человек, заявка): кнопки справа переносятся */
.casehead .headrow .grow { flex-wrap: wrap; }

.addform { max-width: 480px; border: 1px solid #e5e8eb; background: #f7f9fb; border-radius: 8px;
           padding: 12px 14px; }
.subtabs { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.subtabs .st { font-size: 12.5px; padding: 5px 14px; border: 1px solid #c4ccd4; border-radius: 16px;
               background: #fff; color: #566; font-weight: 600; text-decoration: none; }
.subtabs .st.on { background: #2438C8; border-color: #2438C8; color: #fff; }
details.edit { display: inline-block; margin-right: 8px; }
details.edit summary { list-style: none; display: inline; }
details.edit summary::-webkit-details-marker { display: none; }
details.edit[open] { display: block; margin-bottom: 6px; }
.editform { margin-top: 6px; padding: 8px 10px; border: 1px solid #e5e8eb; border-radius: 6px;
            background: #fbfcfd; max-width: 440px; }

.soon { text-align: center; padding: 56px 16px 64px; }
.soon h2 { margin: 0 0 6px; font-size: 14px; color: #8a929b; font-weight: 600; }
.soon .soon-big { font-size: 22px; font-weight: 700; color: #22303f; margin: 0 0 8px; }
.errbox { max-width: 520px; margin: 40px auto; text-align: center; }
.errbox h2 { font-size: 20px; color: #22303f; margin: 0 0 10px; }
.errbox .what { font-size: 14px; color: #445; line-height: 1.5; }
.errbox .links { display: flex; gap: 10px; justify-content: center; margin-top: 18px; }

/* Вход и смена пароля — карточка по центру, как в семействе */
body.authpage { min-height: 100vh; display: flex; align-items: center; justify-content: center;
                padding: 16px; }
.card { background: #fff; border: 1px solid #d8dde3; border-radius: 12px; padding: 28px 30px;
        width: 360px; max-width: 100%; box-shadow: 0 6px 24px rgba(20,30,45,.08); }
.card .logo { display: block; margin: 0 auto 6px; height: 46px; }
.card h1 { font-size: 17px; color: #22303f; margin: 0 0 4px; text-align: center; }
.card .sub { font-size: 12px; color: #8a929b; margin-bottom: 18px; text-align: center; }
.card label { display: block; font-size: 12px; color: #667; margin: 10px 0 3px; }
.card input { width: 100%; font-size: 14px; padding: 8px 10px; border: 1px solid #c4ccd4; border-radius: 7px; }
.card .go { display: block; width: 100%; margin-top: 18px; font-size: 14px; font-weight: 700; color: #fff;
            background: #2438C8; border: 0; border-radius: 7px; padding: 10px; cursor: pointer; }
.card .hint { color: #9aa2ab; font-size: 11.5px; margin-top: 14px; line-height: 1.5; text-align: center; }
.card .hint a, .card .hint .lnk { font-size: 11.5px; color: #2438C8; font-weight: 400; }
.card .err { color: #c0392b; font-size: 12.5px; margin: 4px 0 6px; text-align: center; }

@media (max-width: 1100px) {
  .company { font-size: 25px; }
  .brand-mid .tl2 { font-size: 14px; }
  .casecols { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .app { width: 100%; margin: 0; border: 0; border-radius: 0; }
  .brandbar { grid-template-columns: auto 1fr; padding: 8px 12px; gap: 8px; }
  .company, .brand-mid, .ver { display: none; }
  .brand-left .orglogo { height: 34px; }
  .brand-right .prodlogo { height: 30px; }
  .ctxbar { padding: 6px 12px; gap: 8px; }
  .userbox .lbl, .userbox .fio { display: none; }
  .tabs { padding: 6px 8px 0; }
  .tabs .tact { order: -1; width: 100%; margin: 0 0 8px; gap: 8px; }
  .tabs .tact .btn { flex: 1; font-size: 15px; padding: 10px; text-align: center; }
  .tabs .tb { padding: 6px 11px; }
  .screen { padding: 10px 10px 24px; }
  .ph-hide { display: none; }
  .stage-chip { white-space: normal; }
  .btab td.nm a { white-space: normal; }
  .casehead .headrow .grow { margin-left: 0; width: 100%; }
  .casehead .headrow .grow .btn { flex: 1 1 auto; text-align: center; }
}
@media (max-width: 480px) {
  .overlay { padding: 0; }
  .overlay .modal, .overlay .modal.narrow { width: 100vw; max-height: 100vh; height: 100vh; border-radius: 0; }
  .modal.inpage { border-radius: 0; }
  .frow2, .frow3, .frow4, .rlist { grid-template-columns: 1fr; gap: 0 10px; }
  .frow input:not([type=checkbox]):not([type=radio]), .frow select { font-size: 16px; padding: 9px 10px; }
  .m-f .btn { flex: 1; font-size: 16px; padding: 12px; text-align: center; }
  .m-f .hint { display: none; }
}