/* Оформление Decoder.

   Набор классов повторяет MDiR Docs: у агентства два сервиса, и они
   должны выглядеть одинаково — шапка, карточки, таблицы, формы и кнопки
   здесь те же. Своё у Decoder только имя, знак и рабочие блоки:
   подборка вариантов, карточки билетов. */

:root { font-family: Arial, Helvetica, sans-serif; color: #17213A; background: #F4F6FB; font-synthesis: none; }
* { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button, a { touch-action: manipulation; }
button { cursor: pointer; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid #edb542; outline-offset: 2px; }

/* ── Шапка ──────────────────────────────────────────────────────────── */
.topbar { min-height: 78px; padding: 0 5%; display: flex; gap: 40px; align-items: center; background: #fff; border-bottom: 1px solid #DFE5F0; }
/* Знак и название набором: в полном логотипе есть подпись «GDS → текст
   для клиента», и в 30 точек высотой она стала бы неразборчивой полоской. */
.wordmark { display: flex; align-items: center; gap: 9px; flex-shrink: 0; }
.wordmark img { height: 29px; width: auto; display: block; }
.wordmark span { font-size: 19px; font-weight: 800; letter-spacing: -.4px; color: #0D1B3D; }
nav { display: flex; gap: 22px; font-size: 14px; flex-wrap: wrap; }
nav a:hover, .text-link:hover { color: #1268F3; }
nav a.active { color: #123DAD; font-weight: 700; }
.profile { margin-left: auto; display: flex; gap: 22px; align-items: center; font-size: 13px; }
.profile small { display: block; color: #6B7A99; font-size: 10px; margin-top: 5px; }
.shell { max-width: 1200px; margin: auto; padding: 36px 28px 60px; min-height: calc(100vh - 140px); }
.app-footer { text-align: center; color: #8FA0BC; font-size: 11px; padding: 20px; }

/* ── Заголовки и текст ──────────────────────────────────────────────── */
h1 { font-size: 30px; letter-spacing: -.7px; margin: 8px 0 10px; font-weight: 600; }
h2 { font-size: 18px; margin: 0 0 22px; font-weight: 600; }
.muted { color: #5F6673; font-size: 14px; line-height: 1.6; margin: 0; }
.eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 2px; color: #6B7A99; }
.page-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 28px; }
.back-link { color: #8494B0; font-size: 11px; }
.hint, small { color: #6B7A99; font-size: 11px; line-height: 1.5; }
.hint { margin-top: 22px; }
.status { color: #6B7A99; font-size: 12px; }
.status.ok { color: #517348; }
.warns { margin-top: 12px; font-size: 12px; color: #8a6b2e; white-space: pre-wrap; line-height: 1.6; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
[hidden] { display: none !important; }

/* ── Карточки и формы ───────────────────────────────────────────────── */
.card { background: #fff; border: 1px solid #DFE5F0; border-radius: 12px; padding: 26px; margin-bottom: 22px; box-shadow: 0 5px 20px #0D1B3D08; }
.form-section { margin: 0; }
.form-section h2 { border-bottom: 1px solid #E8EDF6; padding-bottom: 18px; }
.form-section .fields { margin: 0; }
.form-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
label { display: block; font-size: 12px; color: #3C4A66; font-weight: 600; }
label small { display: block; margin-top: 8px; }
input, select, textarea { width: 100%; display: block; border: 1px solid #D7DFEC; border-radius: 6px; padding: 11px 12px; margin-top: 8px; background: #fff; color: #17213A; line-height: 1.4; font-weight: 400; min-height: 42px; }
textarea { resize: vertical; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 19px 20px; margin-bottom: 22px; }
.fields .wide { grid-column: 1 / -1; }
.required { color: #8FA4C8; }
.field-error { display: block; color: #aa493f; font-size: 11px; margin-top: 7px; }
.stack { display: grid; gap: 20px; margin-top: 28px; }
.checkbox { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; color: #3C4A66; cursor: pointer; }
.checkbox input[type=checkbox] { width: 17px; height: 17px; min-height: 0; margin: 0; flex: 0 0 auto; accent-color: #123DAD; cursor: pointer; }

/* ── Кнопки ─────────────────────────────────────────────────────────── */
.primary, .secondary { display: inline-flex; align-items: center; justify-content: center; border-radius: 7px; padding: 12px 17px; font-size: 13px; font-weight: 600; border: 1px solid transparent; white-space: nowrap; }
.primary { background: #123DAD; color: #fff; }
.primary:hover { background: #1268F3; }
.primary:disabled { background: #C5D0E4; color: #fff; cursor: default; }
.primary.whatsapp { background: #25D366; color: #0B3D22; }
.primary.whatsapp:hover { background: #1da851; color: #fff; }
.primary.whatsapp:disabled { background: #C5D0E4; color: #fff; }
.secondary { border-color: #D7DFEC; background: #fff; color: #1B3A7A; }
.secondary:hover { background: #EEF3FD; }
.secondary:disabled { color: #9AA8C4; background: #fff; cursor: default; }
.link { border: 0; background: none; padding: 0; font-size: 12px; color: #1B57C4; }
/* «PDF готов — Поделиться»: второе нажатие, если меню не открылось с первого */
.share-sheet { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 50; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 16px; background: #fff; border: 1px solid #DFE5F0; border-radius: 12px; box-shadow: 0 10px 30px #0D1B3D2a; font-size: 13px; }
.share-sheet span { flex: 1 1 180px; overflow-wrap: anywhere; }
.link.danger { color: #a2544b; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.actions .push { margin-left: auto; }
.text-link { color: #1B57C4; font-size: 12px; white-space: nowrap; }

/* ── Таблицы, метки, пустые списки ──────────────────────────────────── */
.table-wrap { overflow: auto; }
table { width: 100%; border-collapse: collapse; text-align: left; font-size: 13px; }
th { font-size: 10px; letter-spacing: .7px; text-transform: uppercase; color: #7D8AA6; padding: 14px 12px; background: #F7F9FD; }
td { padding: 20px 12px; border-bottom: 1px solid #E8EDF6; line-height: 1.5; vertical-align: top; }
td small { display: block; margin-top: 4px; }
td strong { font-weight: 600; }
td form { display: inline; }
.row-actions { display: flex; align-items: center; gap: 14px; white-space: nowrap; }
.badge { display: inline-block; padding: 7px 11px; border-radius: 20px; background: #edf4eb; color: #517348; font-size: 11px; white-space: nowrap; }
.badge.inactive { background: #EDF0F6; color: #77829B; }
.badge.warn { background: #fbf3e5; color: #8a6b2e; }
.empty { text-align: center; padding: 45px 20px 60px; }
.empty h2 { margin-bottom: 12px; }
.empty .muted { max-width: 430px; margin: auto; }
.empty-icon { font-size: 36px; color: #8FA4C8; display: block; margin-bottom: 18px; }
.search { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.search input { margin: 0; max-width: 420px; }
.search a { font-size: 12px; color: #6B7A99; }
.pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; font-size: 12px; margin-top: 22px; color: #6B7A99; }
.pagination a, .pagination span { padding: 7px 11px; border-radius: 6px; }
.pagination a { color: #1B57C4; }
.pagination a:hover { background: #EEF3FD; }
.pagination .active { background: #123DAD; color: #fff; font-weight: 600; }
.pagination .disabled { color: #B3BFD6; }

/* ── Сообщения ──────────────────────────────────────────────────────── */
.notice, .errors { padding: 16px 20px; border-radius: 8px; font-size: 13px; margin-bottom: 24px; line-height: 1.6; }
.notice { background: #eaf3e8; color: #496b44; }
.errors { background: #fff0ef; color: #a64b43; }
.errors ul { margin: 8px 0 0; padding-left: 20px; }

/* ── Вход ───────────────────────────────────────────────────────────── */
.login { max-width: 450px; margin: 55px auto; padding: 38px; }
/* На входе сообщение об ошибке встаёт над карточкой и по её ширине,
   иначе оно растягивается на весь экран и выглядит чужим. */
.shell:has(.login) .notice, .shell:has(.login) .errors { max-width: 450px; margin: 55px auto -31px; }
.login h1 { font-size: 27px; }
.login-logo { display: block; width: 100%; max-width: 300px; height: auto; margin: 0 auto 26px; }
.narrow { max-width: 520px; }

/* ── Карточка компании ──────────────────────────────────────────────── */
.logo-box { display: grid; place-items: center; min-height: 120px; margin-bottom: 22px; padding: 18px; background: #F7F9FD; border: 1px dashed #D2DCEC; border-radius: 10px; }
.logo-preview { max-width: 100%; max-height: 96px; display: block; }
.logo-empty { text-align: center; max-width: 320px; }

/* ── Декодер: подборка вариантов ────────────────────────────────────── */
/* Переключатель языка и метки — тумблеры, а не кнопки действия: у них
   свой вид, чтобы не спорить с синей «Добавить вариант». */
.lang-switch { display: inline-flex; border: 1px solid #D7DFEC; border-radius: 20px; overflow: hidden; }
.lang-switch .lang { border: 0; background: #fff; color: #6B7A99; padding: 8px 16px; font-size: 12px; font-weight: 700; letter-spacing: .5px; }
.lang-switch .lang.on { background: #123DAD; color: #fff; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.chip { border: 1px solid #D7DFEC; background: #fff; color: #5F6673; border-radius: 20px; padding: 7px 14px; font-size: 12px; }
.chip:hover { border-color: #1268F3; color: #1268F3; }
.chip.on { background: #123DAD; border-color: #123DAD; color: #fff; }
.chip .x { margin-left: 7px; opacity: .75; }
.chip.tag-add { width: 150px; min-height: 0; margin: 0; padding: 7px 14px; font-size: 12px; }
.doc-head { font-weight: 700; font-size: 15px; margin-bottom: 14px; }
.variant { border: 1px solid #E3E9F4; border-radius: 10px; padding: 16px 18px; margin-bottom: 14px; background: #F9FBFE; position: relative; }
.variant .num { font-size: 12px; font-weight: 700; color: #123DAD; margin-bottom: 8px; letter-spacing: .3px; }
.variant .body, .variant .extras { white-space: pre-wrap; font-size: 14px; line-height: 1.65; }
.variant .extras:not(:empty) { margin-top: 6px; color: #3C4A66; }
.variant .del { position: absolute; top: 10px; right: 12px; border: 0; background: none; color: #8FA4C8; font-size: 18px; line-height: 1; padding: 2px 6px; }
.variant .del:hover { color: #a2544b; }
.variant .controls { border-top: 1px solid #E3E9F4; margin-top: 14px; padding-top: 14px; }
.variant .price-row { display: flex; align-items: center; gap: 9px; margin-top: 10px; font-size: 12px; color: #3C4A66; flex-wrap: wrap; }
.variant .price-row input { width: 130px; margin: 0; }
.variant .price-row select { width: auto; margin: 0; }

/* ── Билеты ─────────────────────────────────────────────────────────── */
/* Выдача терминала и маршрут — моноширинные: в них важны колонки. */
.terminal { font-family: "SF Mono", Menlo, Consolas, monospace; font-size: 13px; min-height: 200px; }
.ticket { border: 1px solid #E3E9F4; border-radius: 10px; padding: 18px 20px; margin-bottom: 16px; background: #F9FBFE; }
.ticket .name { font-weight: 700; font-size: 15px; }
.ticket .meta { font-size: 12px; color: #6B7A99; margin-top: 4px; }
.ticket .meta:empty { display: none; }
.ticket .route { white-space: pre; overflow-x: auto; font-size: 12px; line-height: 1.7; margin: 12px 0; font-family: "SF Mono", Menlo, Consolas, monospace; }
.ticket .sum { font-size: 14px; }
.ticket .actions { margin-top: 16px; }
.settings { border-top: 1px solid #E3E9F4; margin-top: 14px; padding-top: 14px; display: grid; gap: 12px; }
.opt-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px; color: #3C4A66; }
.opt-row input[type=text] { width: 140px; margin: 0; }
.opt-row select { width: auto; margin: 0; }
.opt-label { min-width: 150px; font-weight: 600; }
.opt-note { font-size: 12px; color: #6B7A99; }
.file-drop { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 20px; padding: 16px 18px; border: 1px dashed #D2DCEC; border-radius: 10px; background: #F7F9FD; font-size: 13px; }
.file-drop .opt-note { margin: 4px 0 0; max-width: 640px; line-height: 1.5; }
.file-drop.over { border-color: #1268F3; background: #EEF3FD; }
.file-drop.loaded { border-style: solid; border-color: #CFE0C9; background: #F3F8F1; }
.emd { border: 1px solid #E3E9F4; border-radius: 10px; padding: 14px 16px; background: #fff; display: grid; gap: 10px; }
.pen-grid { display: grid; grid-template-columns: 150px 1fr 1fr; gap: 8px 12px; align-items: center; font-size: 12px; margin-top: 12px; }
.pen-grid input[type=text] { margin: 0; }
summary { cursor: pointer; font-size: 13px; color: #1B57C4; }
details pre { white-space: pre-wrap; font-size: 12px; line-height: 1.6; background: #F9FBFE; border: 1px solid #E3E9F4; border-radius: 8px; padding: 12px; }

/* ── Разобранные данные билета ──────────────────────────────────────── */
/* Поля стоят плотнее обычной формы: их много, и агент пробегает их глазами. */
.editor { border-top: 1px solid #E3E9F4; margin-top: 14px; padding-top: 12px; }
.editor > summary { font-size: 13px; color: #1B57C4; }
.editor-body { margin-top: 14px; }
.editor-body .hint { margin: 0 0 16px; }
.editor-body .fields { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px 14px; margin-bottom: 16px; }
.editor-body label { font-size: 11px; font-weight: 600; color: #6B7A99; }
.editor-body input, .editor-body textarea { margin-top: 5px; padding: 8px 10px; min-height: 0; font-size: 13px; }
.editor-heading { font-size: 12px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: #7D8AA6; margin: 0 0 10px; }
/* правленое поле видно сразу: дальше печатается именно оно */
.editor-body input.edited, .editor-body textarea.edited { background: #fbf7ef; border-color: #e6d3ac; }

/* ── Строчные формы ─────────────────────────────────────────────────── */
/* Словари правятся прямо в таблице, поэтому поля и кнопка стоят в строку. */
.row-form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row-form input, .row-form select { margin: 0; width: auto; flex: 1 1 170px; min-width: 110px; }
.row-form .code { flex: 0 0 96px; text-transform: uppercase; }
.row-form button { flex: 0 0 auto; }

@media (max-width: 900px) {
  .form-columns { grid-template-columns: 1fr; }
  .topbar { gap: 20px; padding: 0 20px; }
  .profile { gap: 12px; }
  .profile small { display: none; }
  .shell { padding: 25px 16px; }
}
@media (max-width: 600px) {
  .fields, .pen-grid { grid-template-columns: 1fr; }
  .page-heading { align-items: flex-start; flex-direction: column; }
  .topbar { height: auto; padding: 15px; flex-wrap: wrap; gap: 16px; }
  .profile { margin-left: 0; }
  .profile a, .profile span { font-size: 11px; }
  nav { margin-left: auto; font-size: 12px; gap: 14px; }
  .card { padding: 20px; }
  .login { margin: 25px auto; }
  .opt-label { min-width: 0; width: 100%; }
}

/* Тариф и остатки */
.usage-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px 24px; }
.usage-grid strong { display: block; font-size: 20px; margin-top: 6px; line-height: 1.25; overflow-wrap: anywhere; }
.usage-grid small { display: block; margin-top: 6px; }
.usage-bars { display: grid; gap: 20px; }
.usage-bar-head { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; margin-bottom: 8px; }
.usage-bar .bar { height: 10px; border-radius: 5px; background: #EDF0F6; overflow: hidden; }
.usage-bar .bar i { display: block; height: 100%; border-radius: 5px; background: #123DAD; transition: width .3s; }
.usage-bar.warn .bar i { background: #e2a93b; }
.usage-bar.full .bar i { background: #c9453a; }
.usage-bar small { display: block; margin-top: 8px; }
.warn-text { color: #8a6b2e; font-weight: 600; }
.danger-text { color: #a64b43; font-weight: 600; }
.usage-filter-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.usage-filter-head h2 { margin: 0; }
.usage-filter { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.usage-filter label { margin: 0; }
.usage-filter input { margin-top: 6px; min-width: 150px; }
@media (max-width: 600px) { .usage-filter { width: 100%; } .usage-filter label { flex: 1 1 130px; } .usage-filter button { width: 100%; } }

.renewal { border-color: #e6d3ac; background: #fffaf0; }
.renewal--over { border-color: #f1c4bf; background: #fff5f4; }
.renewal__form { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.renewal__form label { margin: 0; min-width: 220px; }
.renewal__form select { margin-top: 6px; }
@media (max-width: 600px) { .renewal__form label, .renewal__form button { width: 100%; } }

/* Аналитика компании: фильтр периода, график и таблица */
.analytics-filter form { display: grid; gap: 16px; }
.segmented { display: flex; flex-wrap: wrap; gap: 6px; border: 0; padding: 0; margin: 0; }
.segmented legend { margin-bottom: 8px; }
.segmented label { margin: 0; position: relative; }
.segmented input { position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.segmented span { display: inline-block; padding: 9px 14px; border: 1px solid #DFE5F0; border-radius: 20px; font-size: 13px; font-weight: 600; color: #4A5570; background: #fff; cursor: pointer; }
.segmented input:checked + span { background: #123DAD; border-color: #123DAD; color: #fff; }
.segmented input:focus-visible + span { outline: 2px solid #5B86F7; outline-offset: 2px; }
.analytics-filter__fields { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.analytics-filter__fields label { margin: 0; min-width: 140px; }
.analytics-filter__fields select, .analytics-filter__fields input { margin-top: 6px; width: 100%; }
.analytics-filter__fields [hidden] { display: none; }
.chart { position: relative; touch-action: pan-y; margin-top: 8px; }
.chart svg { display: block; width: 100%; height: 220px; }
.chart [data-tip] { cursor: pointer; outline: none; }
.chart [data-tip]:focus-visible rect:first-child, .chart [data-tip].is-active rect:first-child { fill: rgba(91, 134, 247, .14); }
.chart__axis { display: flex; justify-content: space-between; gap: 12px; margin-top: 6px; font-size: 12px; color: #6B7A99; }
.chart__max { position: absolute; top: 0; left: 4px; font-size: 12px; color: #6B7A99; pointer-events: none; }
.chart__legend { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 13px; }
.chart__legend span { display: inline-flex; align-items: center; gap: 6px; }
.chart__legend .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.chart__tip { position: absolute; top: 8px; z-index: 2; max-width: calc(100% - 8px); pointer-events: none; padding: 8px 10px; border-radius: 8px; background: #0D1B3D; color: #fff; font-size: 12px; line-height: 1.5; white-space: nowrap; transform: translateX(-50%); opacity: 0; transition: opacity .1s; }
.chart__tip.is-visible { opacity: 1; }
.analytics-table td:not(:first-child), .analytics-table th:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.analytics-table td { padding: 12px; }
.analytics-table td:first-child { white-space: nowrap; }
.analytics-subtotal td { background: #F4F6FB; font-weight: 600; }
.analytics-total td { font-weight: 700; border-top: 2px solid #DFE5F0; }
@media (max-width: 600px) {
  .chart svg { height: 180px; }
  .analytics-filter__fields label, .analytics-filter__fields button { width: 100%; min-width: 0; }
  .page-heading > a { align-self: flex-start; }
}

/* Plan change uses the existing field grid and label/control spacing. */
.plan-change > .muted { margin-bottom: 20px; }
.plan-change__form { display: grid; gap: 20px; max-width: 760px; margin-top: 24px; }
.plan-change__form .fields { margin-bottom: 0; }
.plan-change__form .hint { margin: 0; }
.plan-change__quote { margin: 0; padding: 14px 16px; border: 1px solid #DFE5F0; border-radius: 8px; background: #F7F9FD; font-size: 13px; line-height: 1.6; }
.plan-change__form > .primary { justify-self: start; }
.plan-change > .notice { margin: 24px 0 0; }
@media (max-width: 600px) { .plan-change__form > .primary { width: 100%; white-space: normal; } }

.saved-filters { flex-wrap: wrap; }
.saved-filters select { width: auto; max-width: 260px; margin: 0; }
@media (max-width: 600px) { .saved-filters input, .saved-filters select { width: 100%; max-width: none; } }