/* broker-radar.ru — общая стилевая система сайта и админки.
   Токены и типографика перенесены из design-прототипа (prototype.html / admin-prototype.html). */

:root{
  --bg:#eef2f1;
  --surface:#ffffff;
  --surface-alt:#f2f4f2;
  --ink:#14212b;
  --text:#33454c;
  --muted:#5b6f77;
  --line:#dde3e0;
  --line-soft:#eaeeec;
  --accent:#a85f22;
  --accent-ink:#7c4517;
  --accent-soft:#f4e7d9;
  --good-bg:#e4f2e6; --good-text:#2f7a44;
  --warn-bg:#fbeed9; --warn-text:#a8681b;
  --bad-bg:#fbe3e0;  --bad-text:#b3402f;
  --sidebar-bg:#14212b;
  --sidebar-active:#232f39;
  --sidebar-text:#a9b8bd;
  --sidebar-muted:#8ba0a8;
}

*{box-sizing:border-box;}
html,body{margin:0; padding:0;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'IBM Plex Sans', -apple-system, 'Segoe UI', sans-serif;
  font-size:14px;
  line-height:1.5;
}
a{color:var(--accent-ink); text-decoration:none;}
a:hover{color:var(--accent);}
h1,h2,h3{font-family:'Source Serif 4', Georgia, serif; color:var(--ink); margin:0;}
.mono{font-family:'IBM Plex Mono', ui-monospace, monospace;}
.num{font-variant-numeric:tabular-nums;}

/* ---------- site header / nav ---------- */
.site-header{
  display:flex; align-items:center; justify-content:space-between;
  height:72px; padding:0 40px; background:var(--surface); border-bottom:1px solid var(--line);
}
.site-header .brand{display:flex; align-items:center; gap:8px; font-family:'Source Serif 4',Georgia,serif; font-size:18px; font-weight:700; color:var(--ink);}
.site-nav{display:flex; align-items:center; gap:20px; font-size:13.5px;}
.site-nav a{color:var(--muted);}
.site-nav a.active{color:var(--ink); font-weight:600;}

/* Мобильное меню — чекбокс-переключатель без JS (сайт нигде не использует
   клиентский JS, см. комментарий про ФТ-18.4 в roundtrip_chart.go). На
   десктопе чекбокс и кнопка-гамбургер скрыты, .site-nav показывается как
   обычно; правила ниже (в media-блоке) переопределяют это для узких экранов. */
.nav-toggle-input{display:none;}
.nav-toggle-btn{display:none;}

.page-head{padding:32px 40px 18px; display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap;}
.page-head h1{font-size:28px; font-weight:700;}
.page-head .sub{margin-top:6px; font-size:13.5px; color:var(--muted);}

.container{max-width:1360px; margin:0 auto;}

/* ---------- catalog ---------- */
.catalog-layout{display:flex; gap:24px; padding:0 40px 56px; align-items:flex-start;}
.filters{width:248px; flex:none; background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:20px 18px; display:flex; flex-direction:column; gap:16px;}
.filters .group-title{font-size:12.5px; font-weight:600; color:var(--ink);}
.broker-list{flex:1; display:flex; flex-direction:column; gap:12px;}
.broker-row{display:flex; align-items:center; padding:16px 20px; background:var(--surface); border:1px solid var(--line); border-radius:10px; gap:12px;}
.broker-row .rank{width:28px; font-family:'IBM Plex Mono',monospace; font-size:12px; color:#c7d0cc;}
.broker-name-block{flex:1;}
/* Подписи колонок для мобильной раскладки (см. media-блок) — на десктопе их
   роль уже играет .broker-list-head, здесь они лишние. Забыл это базовое
   правило при первом добавлении — span без него виден inline по умолчанию
   на всех ширинах, не только на мобиле (поймано 11.09.2026). */
.col-label{display:none;}
.logo-chip{width:36px; height:36px; border-radius:9px; color:#fff; display:flex; align-items:center; justify-content:center; font-family:'Source Serif 4',serif; font-weight:700; font-size:13px; flex:none;}
.broker-row .name{font-size:14.5px; font-weight:600; color:var(--ink);}
.flag-chip{padding:1px 6px; border-radius:4px; background:var(--surface-alt); color:var(--muted); font-size:10px; font-family:'IBM Plex Mono',monospace;}
.col{width:120px;}
.col-sm{width:90px;}
.btn{display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:8px; font-size:13px; font-weight:600; cursor:pointer; border:1px solid transparent;}
.btn-primary{background:var(--ink); color:#fff;}
.btn-secondary{background:var(--surface); color:var(--ink); border-color:var(--line);}
.pill{display:inline-block; padding:3px 10px; border-radius:999px; font-size:11.5px; font-weight:500;}
.pill-good{background:var(--good-bg); color:var(--good-text);}
.pill-warn{background:var(--warn-bg); color:var(--warn-text);}
.pill-bad{background:var(--bad-bg); color:var(--bad-text);}
.pill-neutral{background:var(--surface-alt); color:var(--muted);}

/* ---------- broker profile ---------- */
.profile-head{padding:14px 40px 26px; display:flex; align-items:flex-start; justify-content:space-between; border-bottom:1px solid var(--line); gap:16px; flex-wrap:wrap;}
.profile-body{display:flex; gap:32px; padding:32px 40px 72px; align-items:flex-start; flex-wrap:wrap;}
.profile-main{flex:1; min-width:320px; max-width:800px; display:flex; flex-direction:column; gap:28px;}
.profile-aside{width:300px; flex:none; display:flex; flex-direction:column; gap:14px;}
.card{background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:24px 26px;}
.card h2{font-size:18px; font-weight:700; margin-bottom:12px;}
.card.dark{background:var(--ink); color:#fff;}
.card.dark .label{color:var(--sidebar-muted); text-transform:uppercase; letter-spacing:.05em; font-size:11px;}
.kv-row{display:flex; align-items:center; padding:11px 0; border-bottom:1px solid var(--line-soft); gap:12px;}
.kv-row:last-child{border-bottom:none;}
.kv-row .k{width:210px; flex:none; font-size:12.5px; color:var(--muted);}
.kv-row .v{font-size:13.5px; color:var(--ink); font-weight:500;}
.table-wrap{border:1px solid var(--line-soft); border-radius:8px; overflow-x:auto; -webkit-overflow-scrolling:touch;}
table.data{width:100%; border-collapse:collapse; font-size:13px;}
table.data thead th{text-align:left; padding:9px 14px; background:var(--surface-alt); font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.05em; text-transform:uppercase; color:#8a9a9f; font-weight:500;}
table.data tbody td{padding:11px 14px; border-top:1px solid var(--line-soft);}
.chip-grid{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px 24px;}
.flag-ok{display:flex; align-items:center; gap:8px;}
.flag-dot{width:8px; height:8px; border-radius:999px; background:var(--good-text); flex:none;}
.flag-dot.off{background:var(--line);}

/* ---------- admin shell ---------- */
.admin-shell{display:flex; min-height:100vh;}
.admin-sidebar{width:232px; flex:none; background:var(--sidebar-bg); padding:20px 14px; display:flex; flex-direction:column;}
.admin-sidebar .brand{display:flex; align-items:center; gap:8px; padding:6px 8px 22px; font-family:'Source Serif 4',Georgia,serif; font-size:15.5px; font-weight:700; color:#fff;}
.admin-nav{display:flex; flex-direction:column; gap:2px;}
.admin-nav a{display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:7px; color:var(--sidebar-text); font-size:13px; text-decoration:none;}
.admin-nav a.active{background:var(--sidebar-active); color:#fff; font-weight:500;}
.admin-nav .divider{height:1px; background:#243642; margin:10px 6px;}
.admin-content{flex:1; background:#eef1ef; padding:24px 32px 40px;}
.admin-content .toolbar{display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; gap:16px; flex-wrap:wrap;}
.admin-content h1{font-size:22px;}
.field{display:flex; flex-direction:column; gap:6px;}
.field label{font-size:12px; color:var(--muted);}
.field input, .field select{padding:9px 12px; border:1px solid var(--line); border-radius:7px; font-size:13.5px; font-family:inherit; background:var(--surface); color:var(--ink);}
.login-shell{min-height:100vh; background:var(--sidebar-bg); display:flex; align-items:center; justify-content:center;}
.login-card{width:360px; background:#1a2731; border:1px solid #2a3944; border-radius:12px; padding:36px 32px;}
.login-card .brand{display:flex; align-items:center; gap:8px; margin-bottom:28px; font-family:'Source Serif 4',Georgia,serif; font-size:19px; font-weight:700; color:#fff;}
.login-error{background:#3a2420; color:#f0a89a; border:1px solid #5a332c; border-radius:7px; padding:9px 12px; font-size:12.5px; margin-bottom:14px;}

.note{margin-top:24px; padding:16px 20px; background:var(--surface); border:1px solid var(--line); border-radius:10px; font-size:12.5px; color:var(--muted); max-width:70ch;}

/* ==================== адаптивность: мобила ====================
   До этого блока сайт был исключительно десктопным (фиксированные 40px
   отступы, боковая колонка фильтров, табличные колонки фиксированной
   ширины) — на узком экране это давало горизонтальный скролл и «разъезжание»
   макета. [style*="padding:0 40px"] — намеренный приём: десяток шаблонов
   держат одинаковый инлайновый отступ у панелей под заголовком страницы
   (roundtrip/instruments/calculator/issuer/base_asset/...), заводить под
   каждый отдельный CSS-класс ради одной медиа-переопределения — лишняя
   абстракция; атрибутный селектор ловит их все разом. */
@media (max-width: 760px){
  body{overflow-x:hidden;} /* страховка: если где-то всё же вылезет на пиксель за край, лучше обрезать, чем дать странице «расползтись» горизонтальным скроллом */

  /* --- шапка: гамбургер вместо строки ссылок --- */
  .site-header{height:auto; min-height:60px; padding:0 16px; flex-wrap:wrap; row-gap:0;}
  .nav-toggle-btn{
    display:flex; align-items:center; justify-content:center;
    width:36px; height:36px; margin-left:auto;
    border:1px solid var(--line); border-radius:7px; color:var(--ink); cursor:pointer;
  }
  .site-nav{
    display:none; flex-direction:column; align-items:stretch; gap:0;
    width:100%; padding:6px 0 12px; order:3;
  }
  .site-header:has(.nav-toggle-input:checked) .site-nav{display:flex;}
  .site-nav a{padding:11px 4px; border-top:1px solid var(--line-soft);}

  /* --- общие отступы страниц --- */
  .page-head{padding:20px 16px 14px;}
  .page-head h1{font-size:22px;}
  .catalog-layout{padding:0 16px 40px;}
  .profile-head{padding:14px 16px 20px;}
  .profile-body{padding:20px 16px 56px; gap:20px;}
  .admin-content{padding:16px;}
  [style*="padding:0 40px"]{padding-left:16px !important; padding-right:16px !important;}

  /* --- каталог брокеров: колонка фильтров и строки-«таблица» стекуются --- */
  .catalog-layout{flex-direction:column;}
  .filters{width:auto;}
  .broker-list-head{display:none !important;}
  .broker-row{flex-wrap:wrap; padding:14px 16px;}
  .broker-name-block{flex:1 1 100%; order:1;}
  .col, .col-sm{width:auto; flex:1 1 auto; order:2; font-size:12px;}
  .col-label{display:inline; color:var(--muted); font-family:'IBM Plex Sans',sans-serif; font-weight:400;}

  /* --- профиль брокера / инструмента: боковая колонка вниз, ключ/значение теснее --- */
  .profile-body{flex-direction:column;}
  .profile-main{min-width:0; width:100%; max-width:none;}
  .profile-aside{width:100%; order:3;}
  .kv-row{flex-wrap:wrap;}
  .kv-row .k{width:100%;}
  .chip-grid{grid-template-columns:1fr;}

  /* --- поисковая форма каталога инструментов --- */
  .catalog-search{width:100% !important;}

  /* --- таблицы: не сжимать колонки, дать им скроллиться внутри карточки --- */
  table.data{font-size:12px;}
  table.data thead th, table.data tbody td{padding:8px 10px; white-space:nowrap;}

  /* --- админка: сайдбар сверху, не сбоку --- */
  .admin-shell{flex-direction:column;}
  .admin-sidebar{width:auto;}
}