/* ===== Material Design 3 — светлая тема ===== */
:root{
  --md-primary:#be0f34;
  --md-on-primary:#ffffff;
  --md-primary-hover:#a20d2c;
  --md-primary-pressed:#870b25;
  --md-primary-container:#f9d8e0;
  --md-on-primary-container:#5c0719;
  --md-surface:#ffffff;
  --md-surface-container-low:#f8f9fa;
  --md-surface-container:#f1f3f4;
  --md-surface-container-high:#e8eaed;
  --md-outline:#dadce0;
  --md-outline-strong:#bdc1c6;
  --md-on-surface:#202124;
  --md-on-surface-variant:#5f6368;
  --md-error:#d93025;
  --md-error-container:#fce8e6;
  --md-on-error-container:#5f1a15;
  --md-success:#188038;
  --md-success-container:#e6f4ea;
  --md-warning:#a05000;
  --md-warning-container:#fef7e0;
  --md-elevation-1:0 1px 2px 0 rgba(60,64,67,.30), 0 1px 3px 1px rgba(60,64,67,.15);
  --md-elevation-2:0 1px 2px 0 rgba(60,64,67,.30), 0 2px 6px 2px rgba(60,64,67,.15);
  --md-elevation-3:0 4px 8px 3px rgba(60,64,67,.15), 0 1px 3px 0 rgba(60,64,67,.30);
  --md-font:Roboto, Helvetica, Arial, sans-serif;
  --md-radius:12px;
  --md-radius-sm:8px;
  --md-radius-pill:100px;
}

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

body{
  font-family:var(--md-font);
  font-size:14px;
  line-height:1.45;
  color:var(--md-on-surface);
  background:var(--md-surface-container-low);
  -webkit-font-smoothing:antialiased;
}

a{color:var(--md-primary);text-decoration:none}
a:hover{text-decoration:underline}

/* --- верхняя панель --- */
.topbar{
  display:flex;align-items:center;gap:24px;
  padding:0 24px;min-height:64px;
  background:var(--md-surface);
  border-bottom:1px solid var(--md-outline);
  box-shadow:var(--md-elevation-1);
  position:sticky;top:0;z-index:10;
}
.brand{font-size:18px;font-weight:500;letter-spacing:.15px;white-space:nowrap}
.topbar nav{display:flex;gap:4px;flex:1;overflow-x:auto}
.topbar nav a{
  padding:8px 14px;border-radius:var(--md-radius-pill);
  color:var(--md-on-surface-variant);font-weight:500;font-size:14px;white-space:nowrap;
}
.topbar nav a:hover{background:var(--md-surface-container);text-decoration:none}
.topbar nav a.active{background:var(--md-primary-container);color:var(--md-on-primary-container)}

.who{display:flex;align-items:center;gap:12px;color:var(--md-on-surface-variant);font-size:13px;white-space:nowrap}
.who form{margin:0}

.container{max-width:1180px;margin:0 auto;padding:24px}
/* для широких матричных отчётов */
.container-wide{max-width:1700px}

h1{font-size:24px;font-weight:400;letter-spacing:.2px;margin:0 0 4px}
h2{font-size:18px;font-weight:500;margin:24px 0 12px}
h3{font-size:15px;font-weight:500;margin:18px 0 8px}
.muted{color:var(--md-on-surface-variant)}

.page-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.page-head h1{margin:0}

/* --- карточки --- */
.card{background:var(--md-surface);border:1px solid var(--md-outline);border-radius:var(--md-radius);padding:20px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.card-label{color:var(--md-on-surface-variant);font-size:13px;margin-bottom:8px}
.card-value{font-size:26px;font-weight:500;letter-spacing:.2px}

/* --- кнопки: как в Bootstrap (скругление 6px, а не «таблетка») --- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:6px 12px;
  font-family:var(--md-font);font-size:14px;font-weight:400;line-height:1.5;
  text-align:center;vertical-align:middle;white-space:nowrap;
  background-color:transparent;
  border:1px solid var(--md-outline-strong);border-radius:6px;
  color:var(--md-on-surface-variant);
  cursor:pointer;user-select:none;text-decoration:none;
  transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.btn:hover{
  text-decoration:none;
  background-color:var(--md-on-surface-variant);
  border-color:var(--md-on-surface-variant);
  color:#fff;
}
.btn:focus-visible{outline:0;box-shadow:0 0 0 3px rgba(190,15,52,.25)}
.btn[disabled]{opacity:.65;pointer-events:none}

/* залитая основная */
.btn-primary{background-color:var(--md-primary);border-color:var(--md-primary);color:#fff}
.btn-primary:hover{background-color:var(--md-primary-hover);border-color:var(--md-primary-hover);color:#fff}
.btn-primary:active{background-color:var(--md-primary-pressed);border-color:var(--md-primary-pressed);color:#fff}

/* контурная основная */
.btn-outlined{background-color:transparent;border-color:var(--md-primary);color:var(--md-primary)}
.btn-outlined:hover{background-color:var(--md-primary-hover);border-color:var(--md-primary-hover);color:#fff}

/* контурная опасная */
.btn-danger{background-color:transparent;border-color:var(--md-error);color:var(--md-error)}
.btn-danger:hover{background-color:var(--md-error);border-color:var(--md-error);color:#fff}

/* нейтральная компактная (шапка) */
.btn-ghost{padding:4px 10px;border-color:var(--md-outline-strong);color:var(--md-on-surface-variant)}

/* размеры */
.btn-sm{padding:3px 8px;font-size:13px;border-radius:5px}

/* --- поля ввода --- */
.field{margin-bottom:16px}
.field > label{display:block;font-size:12px;font-weight:500;letter-spacing:.4px;color:var(--md-on-surface-variant);margin-bottom:6px}
.field input,.field select,.field textarea{
  width:100%;font-family:var(--md-font);font-size:14px;color:var(--md-on-surface);
  background:var(--md-surface);border:1px solid var(--md-outline-strong);
  border-radius:var(--md-radius-sm);padding:11px 14px;outline:none;
  transition:border-color .15s,box-shadow .15s;
}
.field textarea{min-height:96px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--md-primary);box-shadow:0 0 0 1px var(--md-primary);
}
.field input[type=file]{padding:8px 12px;background:var(--md-surface-container-low)}
.field .hint{font-size:12px;color:var(--md-on-surface-variant);margin-top:6px}
.field.checkbox{display:flex;align-items:center;gap:10px;margin-top:4px}
.field.checkbox input{width:18px;height:18px;margin:0;accent-color:var(--md-primary)}
.field.checkbox label{margin:0;font-size:14px;color:var(--md-on-surface);letter-spacing:0}

.form-actions{display:flex;gap:12px;margin-top:24px;flex-wrap:wrap}

/* --- сообщения --- */
.alert,.flash{
  display:flex;gap:10px;align-items:flex-start;padding:14px 16px;
  border-radius:var(--md-radius-sm);margin-bottom:16px;font-size:14px;
}
.alert{background:var(--md-error-container);color:var(--md-on-error-container);border:1px solid rgba(217,48,37,.25)}
.flash{background:var(--md-success-container);color:#0d5223;border:1px solid rgba(24,128,56,.25)}

/* --- таблицы --- */
.table-wrap{background:var(--md-surface);border:1px solid var(--md-outline);border-radius:var(--md-radius);overflow-x:auto}
.table{width:100%;border-collapse:collapse}
.table th{
  text-align:left;font-size:12px;font-weight:500;letter-spacing:.5px;color:var(--md-on-surface-variant);
  padding:12px 16px;border-bottom:1px solid var(--md-outline);background:var(--md-surface-container-low);
}
.table td{padding:12px 16px;border-bottom:1px solid var(--md-outline);font-size:14px;vertical-align:middle}
.table tbody tr:last-child td{border-bottom:none}
.table tbody tr:hover{background:var(--md-surface-container-low)}

/* широкие таблицы: компактный режим и закреплённая первая колонка */
.table-compact th,.table-compact td{padding:8px 10px;font-size:13px}
.table-sticky th:first-child,.table-sticky td:first-child{
  position:sticky;left:0;z-index:1;
  background:var(--md-surface);
  box-shadow:1px 0 0 0 var(--md-outline);
}
.table-sticky thead th:first-child{background:var(--md-surface-container-low)}
.table-sticky tfoot th:first-child{background:var(--md-surface)}

/* Шапка широких таблиц остаётся на виду при прокрутке: строка с месяцами
   едет вместе с экраном. Отступ сверху считает скрипт раскладки — он равен
   высоте верхней панели, поэтому шапка встаёт ровно под неё. */
.table-sticky thead th{position:sticky;top:var(--thead-top,0px);z-index:2;background:var(--md-surface-container-low)}
.table-sticky thead th:first-child{z-index:3}

/* --- график динамики приходов и расходов --- */
.chart{display:block;width:100%;height:auto}
.chart-grid{stroke:var(--md-outline);stroke-width:1;opacity:.75}
.chart-line{fill:none;stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.chart-label{fill:var(--md-on-surface-variant)}
.chart-dot{stroke:var(--md-surface);stroke-width:1.5}
.chart-legend{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:16px}
.chart-legend-item{display:inline-flex;align-items:center;gap:8px;font-size:13px}
.chart-swatch{width:16px;height:4px;border-radius:2px;flex:none}

/* На телефоне показываем отдельный, крупный вариант графика: уменьшенный нечитаем. */
.chart-narrow{display:none}
@media (max-width:560px){
  .chart-wide{display:none}
  .chart-narrow{display:block}
}

/* поля ручного заполнения таблицы взносов */
.mark-input{
  width:96px;padding:6px 8px;font:inherit;font-size:13px;text-align:right;
  color:inherit;background:var(--md-surface);
  border:1px solid var(--md-outline);border-radius:8px;
}
.mark-input:focus{outline:2px solid var(--md-primary);outline-offset:-1px}

.badge{display:inline-block;padding:3px 10px;border-radius:var(--md-radius-pill);font-size:12px;font-weight:500}
.badge-ok{background:var(--md-success-container);color:#0d5223}
.badge-off{background:var(--md-surface-container-high);color:var(--md-on-surface-variant)}
.badge-in{background:var(--md-success-container);color:#0d5223}
.badge-out{background:var(--md-error-container);color:var(--md-on-error-container)}
.badge-draft{background:var(--md-warning-container);color:var(--md-warning)}

.amount{font-variant-numeric:tabular-nums;white-space:nowrap}
.amount-in{color:var(--md-success);font-weight:500}
.amount-out{color:var(--md-error);font-weight:500}
.amount-partial{color:var(--md-warning);font-weight:500}

/* раскраска ячеек таблицы взносов */
.cell-paid{background:var(--md-success-container)}
.cell-partial{background:var(--md-warning-container)}
.cell-unpaid{background:var(--md-error-container)}
.cell-none{color:var(--md-on-surface-variant)}

.pagination{display:flex;gap:16px;align-items:center;margin-top:18px;color:var(--md-on-surface-variant);font-size:14px}
.empty{padding:32px;text-align:center;color:var(--md-on-surface-variant)}

/* --- вход --- */
.auth-body{display:flex;align-items:center;justify-content:center;min-height:100vh;background:var(--md-surface-container-low);padding:24px}
.auth-card{
  width:100%;max-width:400px;background:var(--md-surface);border:1px solid var(--md-outline);
  border-radius:18px;padding:32px;box-shadow:var(--md-elevation-2);
}
.auth-card h1{font-size:22px;margin-bottom:6px}
.auth-card form{margin-top:24px}
.auth-card .btn{width:100%;margin-top:8px}
.auth-card .field.checkbox{margin-bottom:20px}

/* --- прочее --- */
.stack{display:flex;flex-direction:column;gap:16px}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.tag{font-size:12px;color:var(--md-on-surface-variant)}
.hint{font-size:12px;line-height:1.6;color:var(--md-on-surface-variant)}

/* ===== Кнопка меню для планшета и телефона ===== */
.nav-toggle{
  display:none;align-items:center;justify-content:center;
  width:42px;height:42px;padding:0;flex:none;
  color:var(--md-on-surface-variant);background:transparent;
  border:1px solid var(--md-outline-strong);border-radius:var(--md-radius-sm);
  cursor:pointer;
}
.nav-toggle:hover{background:var(--md-surface-container)}
.nav-toggle-bar{position:relative;display:block;width:18px;height:2px;background:currentColor;border-radius:2px}
.nav-toggle-bar::before,.nav-toggle-bar::after{
  content:"";position:absolute;left:0;width:18px;height:2px;background:currentColor;border-radius:2px;
}
.nav-toggle-bar::before{top:-6px}
.nav-toggle-bar::after{top:6px}

/* =========================================================================
   Адаптация под устройства.
   База — ПК (≥1201). Ступени: 1024 (ноутбук и планшет альбомный),
   900 (планшет), 560 (телефон), 400 (узкий телефон).
   Классы приоритета колонок: прячем второстепенное, чтобы таблицы
   не уезжали в горизонтальную прокрутку раньше времени.
   ========================================================================= */

html{-webkit-text-size-adjust:100%}

/* --- ноутбук и планшет альбомный --- */
@media (max-width:1024px){
  .container{padding:20px 18px}
  .topbar{gap:16px;padding:0 18px}
  .topbar nav a{padding:8px 10px}
  .table th,.table td{padding:10px 12px}
  .c-laptop{display:none}
}

/* --- планшет (в том числе iPad 768–834): меню складывается в кнопку --- */
@media (max-width:900px){
  .container{padding:16px}
  .topbar{flex-wrap:wrap;gap:10px;padding:10px 16px;min-height:56px}
  .brand{flex:1;min-width:0;font-size:16px;overflow:hidden;text-overflow:ellipsis}
  .nav-toggle{display:inline-flex}

  .topbar nav{order:3;flex-basis:100%;flex-direction:column;align-items:stretch;gap:2px;overflow:visible}
  .topbar nav a{padding:12px 14px;border-radius:var(--md-radius-sm)}
  .who{order:4;flex-basis:100%;justify-content:space-between;padding-top:10px;border-top:1px solid var(--md-outline)}

  /* Меню и данные пользователя прячутся только при работающем JS:
     без скриптов навигация остаётся доступной. */
  html.js .topbar nav,
  html.js .who{display:none}
  html.js .topbar.nav-open nav{display:flex}
  html.js .topbar.nav-open .who{display:flex}

  h1{font-size:21px}
  .card{padding:16px}
  /* планшет тоже сенсорный — кнопки крупнее */
  .btn{padding:8px 14px}
  .btn-sm{padding:5px 10px}
  .grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
  .card-value{font-size:22px}
  .table th,.table td{padding:9px 11px;font-size:13px}
  .c-tablet{display:none}
}

/* --- телефон --- */
@media (max-width:560px){
  .container{padding:12px}
  h1{font-size:19px}
  h2{font-size:16px;margin:18px 0 10px}
  .card{padding:14px;border-radius:10px}
  .grid{grid-template-columns:1fr 1fr;gap:10px}
  .card-value{font-size:20px}

  /* фильтры и поля — во всю ширину (перебиваем inline min-width) */
  .row > .field{min-width:0 !important;flex:1 1 100%}
  .row > select,.row > .btn{flex:1 1 100%}

  /* кнопки в шапке и под формой — на всю ширину, под палец */
  .page-head{align-items:stretch}
  .page-head .row{width:100%}
  .page-head .row .btn{flex:1 1 auto}
  .form-actions{flex-direction:column}
  .form-actions .btn{width:100%}
  .btn{padding:9px 14px}

  .table th,.table td{padding:8px 10px}
  .table-compact th,.table-compact td{padding:6px 8px;font-size:12px}
  .table-sticky th:first-child,.table-sticky td:first-child{max-width:150px}
  .mark-input{width:74px;padding:7px 6px}
  .c-phone{display:none}

  .pagination{gap:10px;font-size:13px;flex-wrap:wrap}
  .alert,.flash{padding:12px 14px}
  .auth-body{padding:12px}
  .auth-card{padding:20px;border-radius:14px}
}

/* --- узкий телефон --- */
@media (max-width:400px){
  .container{padding:10px}
  .grid{grid-template-columns:1fr}
  .brand{font-size:15px}
  .card-value{font-size:19px}
  .table th,.table td{padding:7px 8px;font-size:12.5px}
}