/* ─────────────────────────────────────────────────────────────────────────────
   Florunner UI — общий стиль пяти порталов (NEO, Payments, FX Desk, OCR, Reco).

   МАСТЕР: florunner-neo/static/florunner.css. В остальных приложениях — копия
   байт в байт, как fr_login.html и florunner-logo.jpg; правка только в NEO,
   затем cmp в каждом портале.

   Брендбук Florunner 2025 v.1:
     Brand Blue       #217FA8  (Pantone 7691 C) — основной
     Brand Turquoise  #5EBEBD  (Pantone 3255 C) — вторичный
     Secondary White  #FFFFFF
     Secondary Black  #000000
     Шрифт Poppins: Regular — логотип и основной текст, SemiBold — подзаголовки
     и акценты, Bold — главные заголовки. Высокий контраст обязателен, тёмное
     на тёмном запрещено.

   Расширения брендбука для интерфейса (брендбук их не описывает):
   1. У Poppins нет кириллицы, а интерфейс русский. Poppins остаётся на
      бренд-слое (логотип, название приложения, заголовок входа, подпись внизу),
      русский интерфейс набирается Onest — он сделан под кириллицу.
   2. Цвета состояний. «Принято / ок» — тёмная бирюза из брендовой семьи,
      «внимание» — янтарный, «ошибка» — кирпичный: без них таблица платежей
      не читается. Синий и янтарный различимы при дальтонизме и в ч/б печати.
   3. Тёмная тема. Брендбука на неё нет: синий осветляется, бирюза остаётся,
      текст светлый на тёмном (тёмное на тёмном брендбук запрещает).
   ───────────────────────────────────────────────────────────────────────── */

/* ── Шрифты (self-hosted: CSP портала разрешает только font-src 'self') ──── */

@font-face { font-family: 'Onest'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(fonts/onest-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(fonts/onest-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(fonts/onest-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
                 U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113,
                 U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(fonts/onest-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
                 U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/poppins-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
                 U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113,
                 U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/poppins-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
                 U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap;
  src: url(fonts/poppins-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
                 U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113,
                 U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap;
  src: url(fonts/poppins-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
                 U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(fonts/poppins-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
                 U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113,
                 U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(fonts/poppins-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
                 U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ── Токены ──────────────────────────────────────────────────────────────── */

:root {
    --font-ui: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-brand: 'Poppins', 'Onest', -apple-system, BlinkMacSystemFont, sans-serif;

    --brand: #217FA8;          /* Brand Blue — брендбук */
    --turq: #5EBEBD;           /* Brand Turquoise — брендбук */

    --r-sm: 7px; --r-md: 9px; --r-lg: 12px; --r-pill: 999px;
    --shadow-pop: 0 10px 30px rgba(16, 34, 44, .14);
}

:root[data-theme="light"] {
    color-scheme: light;
    --bg: #F2F5F7; --card: #FFFFFF; --border: #DCE4E8;
    --text: #10222C; --text-dim: #4F626B; --text-soft: #66787F;
    --input-bg: #FFFFFF; --input-bd: #CDD8DE;
    --accent: #217FA8; --accent-hover: #1A6588; --accent-fg: #FFFFFF;
    --brand-soft: #E8F2F7; --turq-ink: #15716E; --turq-soft: #E9F6F5;
    --row-hover: #F4F8FA; --head-bg: #F5F8FA;
    --topbar-bg: #217FA8; --topbar-fg: #FFFFFF; --topbar-dim: #CBE2EE; --topbar-line: #3C94BA;
    --ok-bg: #E9F6F5; --ok-fg: #15716E; --ok-bd: #B9E0DE;
    --warn-bg: #FBF1E3; --warn-fg: #8A4D12; --warn-bd: #EBD2AE;
    --err-bg: #FCEEEC; --err-fg: #A5331F; --err-bd: #EFC6BE;
    --info-bg: #E8F2F7; --info-fg: #1A6588; --info-bd: #BBD8E6;
}

:root[data-theme="dark"] {
    color-scheme: dark;          /* нативные поля даты и выбора файла — тоже тёмные */
    --bg: #0B1A22; --card: #12242E; --border: #22404E;
    --text: #E6EEF2; --text-dim: #9FB3BC; --text-soft: #7E949E;
    --input-bg: #0E1F28; --input-bd: #2A4654;
    --accent: #4FA6CC; --accent-hover: #6FBADB; --accent-fg: #06151D;
    --brand-soft: #15303E; --turq-ink: #7FD3D1; --turq-soft: #0F2E2D;
    --row-hover: #17303C; --head-bg: #102029;
    --topbar-bg: #11303F; --topbar-fg: #FFFFFF; --topbar-dim: #A9C7D6; --topbar-line: #1E4A5F;
    --ok-bg: #0F2E2D; --ok-fg: #76CFCB; --ok-bd: #1C4C4A;
    --warn-bg: #30230F; --warn-fg: #E6B069; --warn-bd: #5C431C;
    --err-bg: #30170F; --err-fg: #F0978A; --err-bd: #5E2A20;
    --info-bg: #11293A; --info-fg: #7FC0E0; --info-bd: #244C66;
}

/* ── Основа ──────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    min-height: 100vh; background: var(--bg); color: var(--text);
    font-family: var(--font-ui); font-size: 14px; line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    transition: background .2s, color .2s;
}

a { color: var(--accent); }
a:hover { color: var(--accent-hover); }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm);
}

h1 { font-size: 22px; font-weight: 700; letter-spacing: -.5px; }
h2 { font-size: 16px; font-weight: 700; letter-spacing: -.2px; margin-bottom: 12px; }
h3 { font-size: 14px; font-weight: 700; }

/* Poppins — только бренд-слой: название приложения, заголовок входа, подпись внизу.
   Кириллицы в Poppins нет, поэтому русский текст сюда не ставим. */
.brand-type { font-family: var(--font-brand); font-weight: 600; letter-spacing: -.2px; }

.eyebrow { font-size: 10.5px; font-weight: 600; letter-spacing: 1.3px;
           text-transform: uppercase; color: var(--text-dim); }
.dim { color: var(--text-dim); }
.soft { color: var(--text-soft); font-size: 12px; }
.spacer { flex: 1; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Деньги, даты и номера — табличными цифрами той же гарнитуры (Onest умеет tnum) */
.tnum { font-variant-numeric: tabular-nums; }

/* ── Шапка ───────────────────────────────────────────────────────────────── */

.topbar {
    background: var(--topbar-bg); color: var(--topbar-fg);
    padding: 0 24px; display: flex; align-items: center; gap: 20px;
    min-height: 58px; position: sticky; top: 0; z-index: 20;
}
.brand {
    display: flex; align-items: center; gap: 11px; text-decoration: none;
    color: var(--topbar-fg); font-family: var(--font-brand); font-weight: 600;
    font-size: 15.5px; letter-spacing: -.2px; white-space: nowrap; flex-shrink: 0;
}
.brand:hover { color: var(--topbar-fg); opacity: .85; }
/* Брендбук: на синем — белый знак без плашки (вторичное применение логотипа).
   Файл — static/florunner-mark-white.png, вырезан из florunner-logo.jpg. */
.brand-mark { width: 30px; height: 30px; flex-shrink: 0; display: block; }
.brand-img {
    width: 32px; height: 32px; border-radius: 8px; object-fit: cover; flex-shrink: 0;
    background: #fff; display: block;
}
.topbar nav { display: flex; gap: 4px; flex: 1; }
.topbar nav a {
    color: var(--topbar-dim); text-decoration: none; padding: 7px 13px;
    border-radius: var(--r-pill); font-size: 13.5px; font-weight: 500; white-space: nowrap;
}
.topbar nav a:hover { color: var(--topbar-fg); background: rgba(255, 255, 255, .12); }
.topbar nav a.active { background: #FFFFFF; color: var(--brand); font-weight: 600; }
:root[data-theme="dark"] .topbar nav a.active { background: var(--accent); color: var(--accent-fg); }
.who { color: var(--topbar-dim); font-size: 12.5px; text-align: right; white-space: nowrap; line-height: 1.35; }
.who b { display: block; color: var(--topbar-fg); font-weight: 600; font-size: 13px; }
.icon-btn {
    background: transparent; border: 1px solid var(--topbar-line); border-radius: var(--r-sm);
    padding: 6px 11px; cursor: pointer; color: var(--topbar-dim); font-size: 13px;
    font-family: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
}
.icon-btn:hover { color: var(--topbar-fg); background: rgba(255, 255, 255, .12); }
.icon-btn svg { display: block; }
.icon-btn .ti-sun { display: none; }
:root[data-theme="dark"] .icon-btn .ti-sun { display: block; }
:root[data-theme="dark"] .icon-btn .ti-moon { display: none; }

main { max-width: 1280px; margin: 0 auto; padding: 24px 20px 40px; }
main.narrow { max-width: 860px; }
.page-head { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }

/* ── Панели и таблицы ────────────────────────────────────────────────────── */

.panel {
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--r-lg); padding: 20px 22px; margin-bottom: 16px;
}
.panel-flush { padding: 0; overflow: hidden; }

table { width: 100%; border-collapse: collapse; }
thead th {
    background: var(--head-bg); text-align: left; font-size: 10.5px;
    text-transform: uppercase; letter-spacing: 1.2px; color: var(--text-dim);
    padding: 10px 14px; border-bottom: 1px solid var(--border); font-weight: 600; white-space: nowrap;
}
tbody td { padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: top; }
tbody tr:last-child td { border-bottom: none; }
tbody tr.clickable { cursor: pointer; }
tbody tr.clickable:hover { background: var(--row-hover); }

/* ── Пилюли состояния ────────────────────────────────────────────────────── */

.tag {
    display: inline-block; padding: 3px 10px; border-radius: var(--r-pill);
    font-size: 12.5px; font-weight: 600; white-space: nowrap; border: 1px solid transparent;
}
.tag-ok   { background: var(--ok-bg);   color: var(--ok-fg);   border-color: var(--ok-bd); }
.tag-warn { background: var(--warn-bg); color: var(--warn-fg); border-color: var(--warn-bd); }
.tag-err  { background: var(--err-bg);  color: var(--err-fg);  border-color: var(--err-bd); }
.tag-info { background: var(--info-bg); color: var(--info-fg); border-color: var(--info-bd); }
.tag-dim  { background: var(--head-bg); color: var(--text-dim); border-color: var(--border); }

/* Точка «что дальше»: один сигнал на строку, не пять */
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.dot-act  { background: var(--warn-fg); }
.dot-wait { background: var(--text-soft); }
.dot-move { background: var(--brand); }
.dot-done { background: var(--turq-ink); }
.next { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; }
.next-act { font-weight: 600; color: var(--warn-fg); }

/* ── Кнопки ──────────────────────────────────────────────────────────────── */

.btn {
    display: inline-flex; align-items: center; gap: 7px; padding: 8px 15px;
    border: 1px solid var(--input-bd); border-radius: var(--r-md); background: var(--card);
    color: var(--text); font-size: 13.5px; font-weight: 500; cursor: pointer;
    text-decoration: none; font-family: inherit; white-space: nowrap;
}
.btn:hover { background: var(--row-hover); color: var(--text); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); font-weight: 600; }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-fg); }
.btn-danger { color: var(--err-fg); border-color: var(--err-bd); background: var(--card); }
.btn-danger:hover { background: var(--err-bg); color: var(--err-fg); }
.btn-ok { color: var(--ok-fg); border-color: var(--ok-bd); background: var(--ok-bg); }
.btn-sm { padding: 6px 12px; font-size: 13px; }
.btn-xs { padding: 3px 10px; font-size: 12px; line-height: 18px; }
.btn[disabled], .btn[disabled]:hover {
    opacity: 1; cursor: not-allowed; background: var(--head-bg);
    border-color: var(--border); color: var(--text-soft);
}
/* Запрет объясняется рядом с кнопкой, а не только в title */
.why { font-size: 12.5px; color: var(--warn-fg); }

/* ── Поля ────────────────────────────────────────────────────────────────── */

input[type=text], input[type=email], input[type=password], input[type=tel], input[type=date],
input[type=number], input[type=search], select, textarea {
    padding: 9px 12px; border: 1px solid var(--input-bd); border-radius: var(--r-md);
    background: var(--input-bg); color: var(--text); font-size: 13.5px;
    font-family: inherit; outline: none; width: 100%;
}
input[disabled], select[disabled], textarea[disabled] { color: var(--text-dim); cursor: not-allowed; background: var(--head-bg); }
input:focus, select:focus, textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}
label.fld { display: block; font-size: 10.5px; font-weight: 600; color: var(--text-dim);
            text-transform: uppercase; letter-spacing: 1.2px; margin-bottom: 6px; }

/* ── Сообщения ───────────────────────────────────────────────────────────── */

.flash {
    background: var(--info-bg); border: 1px solid var(--info-bd); color: var(--info-fg);
    border-radius: var(--r-md); padding: 11px 15px; margin-bottom: 16px;
}
.note { border-radius: var(--r-md); padding: 12px 15px; font-size: 13px; }
.note-ok   { background: var(--ok-bg);   border: 1px solid var(--ok-bd);   color: var(--ok-fg); }
.note-warn { background: var(--warn-bg); border: 1px solid var(--warn-bd); color: var(--warn-fg); }
.note-err  { background: var(--err-bg);  border: 1px solid var(--err-bd);  color: var(--err-fg); }
.note-info { background: var(--info-bg); border: 1px solid var(--info-bd); color: var(--info-fg); }

.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.row > * { flex: 1 1 160px; }
.row > .fixed { flex: 0 0 auto; }

/* ── Переключатель разделов и месяцев ────────────────────────────────────── */

.seg { display: flex; gap: 3px; background: var(--head-bg); border: 1px solid var(--border);
       border-radius: var(--r-pill); padding: 3px; }
.seg a, .seg button {
    padding: 7px 14px; border: 0; border-radius: var(--r-pill); background: transparent;
    color: var(--text); font-size: 13px; cursor: pointer; font-family: inherit; text-decoration: none;
    white-space: nowrap;
}
.seg a:hover, .seg button:hover { background: var(--row-hover); color: var(--text); }
.seg .on, .seg a.on:hover { background: var(--text); color: var(--card); font-weight: 600; }

.stepper { display: inline-flex; align-items: center; border: 1px solid var(--border);
           border-radius: var(--r-md); background: var(--card); overflow: hidden; }
.stepper a, .stepper button {
    padding: 8px 11px; border: 0; background: transparent; color: var(--text-dim);
    cursor: pointer; font-family: inherit; font-size: 13px; text-decoration: none;
}
.stepper a:hover, .stepper button:hover { color: var(--text); background: var(--row-hover); }
.stepper .cur { padding: 8px 6px; font-size: 13px; font-weight: 600; min-width: 112px; text-align: center; }

.chip {
    padding: 6px 13px; border-radius: var(--r-pill); border: 1px solid var(--border);
    background: var(--card); color: var(--text-dim); text-decoration: none; font-size: 13px;
    display: inline-block;
}
.chip:hover { color: var(--text); }
.chip.on { background: var(--text); color: var(--card); border-color: var(--text); font-weight: 600; }

/* ── Трек платежа: Pay → FX Desk → Invoice Ninja ─────────────────────────────
   Подпись дизайна Florunner: один элемент вместо трёх отдельных пилюль.
   Разметка: .track > (.st[.is-done] и .ln[.is-done] вперемежку). */

.track { display: flex; align-items: center; width: 108px; }
.track .st { width: 9px; height: 9px; border-radius: 50%; flex: none;
             border: 2px solid var(--border); background: var(--card); box-sizing: border-box; }
.track .st.is-done { background: var(--brand); border-color: var(--brand); }
.track .ln { flex: 1; height: 2px; background: var(--border); }
.track .ln.is-done { background: var(--brand); }
.track-lg { width: 100%; }
.track-lg .st { width: 14px; height: 14px; border-width: 3px; }
.track-lg .ln { height: 3px; }
.track-cap { display: flex; margin-top: 8px; font-size: 11.5px; color: var(--text-dim); }
.track-cap > * { flex: 1; }
.track-cap > :nth-child(2) { text-align: center; }
.track-cap > :last-child { text-align: right; }

/* ── Подвал ──────────────────────────────────────────────────────────────── */

.app-footer {
    text-align: center; font-size: 11px; color: var(--text-soft);
    padding: 14px 0 18px; letter-spacing: .2px; font-family: var(--font-brand);
}

/* ── Телефоны (общий стандарт florunner-neo/docs/09-apps-standard.md §8) ──── */

.panel:has(> table) { overflow-x: auto; }

@media (max-width: 760px) {
    .topbar { flex-wrap: wrap; min-height: 0; padding: 8px 12px 0; gap: 6px 10px; position: static; }
    .topbar .brand { flex: 1 1 auto; min-width: 0; }
    .topbar nav { order: 5; flex: 1 1 100%; overflow-x: auto; white-space: nowrap;
                  scrollbar-width: none; margin: 0 -12px; padding: 0 8px 8px; }
    .topbar nav::-webkit-scrollbar { display: none; }
    .topbar nav a { flex: 0 0 auto; }
    .who { display: none; }
    main { padding: 16px 12px 28px; }
    .app-footer { position: static; }
    /* поля не меньше 16px — иначе iPhone увеличивает страницу при нажатии */
    input[type=text], input[type=email], input[type=password], input[type=tel], input[type=date],
    input[type=number], input[type=search], input:not([type]), select, textarea { font-size: 16px; }
    /* таблица-список → карточки: class="t-cards"; порядок ячеек — в CSS страницы */
    table.t-cards, table.t-cards > tbody { display: block; width: 100%; }
    table.t-cards > thead { display: none; }
    table.t-cards > tbody > tr { display: grid; grid-template-columns: minmax(0, 1fr) auto;
                                 gap: 4px 10px; padding: 12px 14px;
                                 border-bottom: 1px solid var(--border); align-items: start; }
    table.t-cards > tbody > tr:last-child { border-bottom: 0; }
    table.t-cards > tbody > tr > td { display: block; padding: 0; border: 0; min-width: 0; width: auto; }
    table.t-cards > tbody > tr > td[colspan] { grid-column: 1 / -1; }
    table.t-cards > tbody > tr > td[data-label]::before {
        content: attr(data-label) ": "; color: var(--text-dim); font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .01ms !important; animation-iteration-count: 1 !important;
        transition-duration: .01ms !important; }
}