:root {
  --bg: #f4f6f8; --c: #fff; --t: #1d2433; --m: #6b7588; 
  --p: #2563eb; --ok: #16a34a; --no: #dc2626; --wa: #d97706; 
  --b: #e3e7ee;
}

* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.5 system-ui, -apple-system, Segoe UI, Roboto, sans-serif; background: var(--bg); color: var(--t); overflow-x: hidden; }

/* Шапка */
header {
  background: var(--c); border-bottom: 1px solid var(--b); padding: 12px 24px;
  display: flex; justify-content: space-between; align-items: center;
  position: sticky; top: 0; z-index: 10; gap: 12px; flex-wrap: wrap;
}
header b { font-size: 18px; font-weight: 600; }
header nav { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
header nav a { color: var(--p); text-decoration: none; font-size: 14px; font-weight: 500; }

.mobile-menu-btn { display: none; background: none; border: none; font-size: 24px; cursor: pointer; color: var(--t); padding: 0; line-height: 1; }

/* Основной контейнер */
main { max-width: 1100px; margin: 0 auto; padding: 24px 16px 60px; }

/* Карточки */
.card { background: var(--c); border: 1px solid var(--b); border-radius: 14px; padding: 24px; margin-bottom: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.02); }
.box { border: 1px solid var(--b); border-radius: 10px; padding: 16px; margin-top: 12px; background: #fafbfc; }

/* Заголовки */
h1 { font-size: 24px; margin: 0 0 20px; font-weight: 700; letter-spacing: -0.02em; }
h2 { margin: 0 0 16px; font-size: 18px; font-weight: 600; }
h3 { margin: 0 0 12px; font-size: 16px; font-weight: 600; }

/* Формы */
label { display: block; font-size: 13px; font-weight: 500; color: var(--m); margin: 16px 0 6px; }
input, select, textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--b); border-radius: 8px; font: inherit; background: #fff; color: var(--t); transition: border-color 0.2s; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--p); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); }
input[type=checkbox], input[type=radio] { width: auto; margin-right: 8px; cursor: pointer; }

/* Сетки */
.row { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.row > * { flex: 1 1 180px; min-width: 0; }

/* Кнопки */
button, .btn { display: inline-flex; align-items: center; justify-content: center; padding: 12px 20px; border: 0; border-radius: 8px; background: var(--p); color: #fff; font: inherit; font-weight: 500; cursor: pointer; text-decoration: none; transition: background 0.2s; }
button:hover, .btn:hover { opacity: 0.9; }
button.sec, .btn.sec { background: #e8ecf3; color: var(--t); }
button.ok, .btn.ok { background: var(--ok); }
button.no, .btn.no { background: var(--no); }
button.wa, .btn.wa { background: var(--wa); }
button.sm, .btn.sm { padding: 8px 14px; font-size: 13px; }

/* Ссылки и мелкий текст */
a.lnk { color: var(--p); text-decoration: none; font-size: 13px; font-weight: 500; }
.muted { color: var(--m); font-size: 13px; }

/* Таблицы */
table { width: 100%; border-collapse: collapse; margin-top: 8px; }
th, td { text-align: left; padding: 12px 8px; border-bottom: 1px solid var(--b); font-size: 14px; vertical-align: middle; }
th { color: var(--m); font-weight: 500; font-size: 12px; text-transform: uppercase; }

/* Теги */
.tag { display: inline-flex; padding: 4px 10px; border-radius: 20px; font-size: 12px; font-weight: 500; color: #fff; white-space: nowrap; }
.tag.pending, .tag.new { background: var(--wa); }
.tag.approved { background: var(--ok); }
.tag.rejected { background: var(--no); }
.tag.docs { background: #7c3aed; }
.tag.cancelled { background: #94a3b8; }
.tag.active { background: var(--p); }

/* Вкладки */
.tabs { display: flex; gap: 8px; margin-bottom: 24px; flex-wrap: wrap; }
.tabs a, .tabs button { background: #e8ecf3; color: var(--t); padding: 10px 16px; border-radius: 8px; text-decoration: none; font-size: 14px; border: 0; cursor: pointer; white-space: nowrap; }
.tabs a.on { background: var(--p); color: #fff; }

/* Сообщения */
.msg { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; font-size: 14px; }
.msg.err { background: #fde8e8; color: var(--no); }
.msg.good { background: #e6f6ec; color: #116b33; }
.msg.warn { background: #fff4e0; color: #8a5200; }

/* =========================================
   МОБИЛЬНАЯ ВЕРСИЯ
   ========================================= */
@media (max-width: 768px) {
  header { padding: 12px 16px; flex-wrap: wrap; position: relative; align-items: center; }
  .mobile-menu-btn { display: block; margin-left: 0; margin-right: 10px; order: -1; }
  
  /* Прячем навигацию в бургер */
  header nav, header .tabs {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    background: #fff; flex-direction: column; gap: 0;
    border-bottom: 1px solid var(--b); box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    padding: 10px 0; z-index: 20;
  }
  header nav.open, header .tabs.open { display: flex; }
  header nav a, header .tabs a {
    padding: 12px 20px; width: 100%; text-align: left; border-radius: 0; border-bottom: 1px solid #f0f0f0;
  }
  header .tabs a.on { background: #e8ecf3; color: var(--p); font-weight: 600; border-bottom: 1px solid var(--b); }

  main { padding: 16px 12px 40px; }
  .card { padding: 16px; margin-bottom: 16px; }
  .row { flex-direction: column; gap: 10px; margin-bottom: 10px; }
  .row > * { flex: 1 1 100%; }
  form button[type="submit"] { width: 100%; margin-top: 10px; }
  
  /* Таблицы: горизонтальный скролл вместо схлопывания */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; margin-bottom: 16px; border: 1px solid var(--b); border-radius: 8px; }
  .table-wrap table { margin: 0; min-width: 600px; }
  .table-wrap th, .table-wrap td { padding: 10px; font-size: 13px; white-space: nowrap; }
}

/* Выравнивание логотипа и бургера */
.header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
@media (max-width: 768px) {
  header { padding: 10px 16px; }
  .header-left { width: 100%; justify-content: space-between; }
  .mobile-menu-btn { display: block; order: 2; margin-left: auto; margin-right: 0; }
  /* Принудительно ставим логотип первым */
  .header-left b { order: 1; }
}