:root {
  --bg: #e8edf1;
  --panel: #ffffff;
  --ink: #17212b;
  --muted: #5a6a79;
  --line: #d2dbe3;
  --accent: #0e5e6f;
  --accent-hover: #0a4856;
  --danger: #b3261e;
  --ok: #1d6b3a;
  --radius: 10px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.page-header {
  max-width: 1360px;
  margin: 0 auto;
  padding: 32px 20px 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
}

.userbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
  font-size: 0.95rem;
  color: var(--muted);
}
.userbar strong { color: var(--ink); font-weight: 600; }
.userbar a, .link-btn, .banner a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.userbar a:hover, .link-btn:hover, .banner a:hover { color: var(--accent-hover); }
.link-btn { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
a:focus-visible, .link-btn:focus-visible { outline: 3px solid rgba(14, 94, 111, 0.35); outline-offset: 2px; border-radius: 3px; }

.banner {
  grid-column: 1 / -1;
  background: #fff3dc;
  border: 1px solid #e0b35c;
  border-radius: var(--radius);
  color: #5a3c00;
  padding: 12px 16px;
}
.banner a { color: inherit; font-weight: 600; }

h1 { margin: 0; font-size: 1.75rem; font-weight: 650; letter-spacing: -0.01em; }
h2 { margin: 0; font-size: 1.1rem; font-weight: 650; }

.layout {
  max-width: 1360px;
  margin: 0 auto;
  padding: 16px 20px 48px;
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
}

.form-panel { position: sticky; top: 16px; }
.form-panel h2 { margin-bottom: 16px; }

/* ---------- форма ---------- */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; min-width: 0; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

label { font-size: 0.9rem; font-weight: 600; }

input, textarea {
  width: 100%;
  font: inherit;
  color: inherit;
  background: #fff;
  border: 1px solid #b9c5d0;
  border-radius: 7px;
  padding: 9px 10px;
}
textarea { resize: vertical; min-height: 76px; }
input[type="time"] { font-variant-numeric: tabular-nums; font-size: 0.95rem; padding-left: 8px; padding-right: 4px; }

input:focus-visible, textarea:focus-visible, button:focus-visible {
  outline: 3px solid rgba(14, 94, 111, 0.35);
  outline-offset: 1px;
  border-color: var(--accent);
}

.hint { margin: -6px 0 14px; font-size: 0.85rem; color: var(--muted); }

button {
  font: inherit;
  cursor: pointer;
}

.form-actions { display: flex; gap: 10px; }

#submit-btn {
  flex: 1;
  padding: 11px 14px;
  border: 0;
  border-radius: 7px;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
}
#submit-btn:hover { background: var(--accent-hover); }
#submit-btn:disabled { opacity: 0.6; cursor: progress; }

.secondary {
  padding: 11px 14px;
  border: 1px solid #b9c5d0;
  border-radius: 7px;
  background: #fff;
  color: var(--ink);
  font-weight: 600;
}
.secondary:hover { border-color: var(--accent); color: var(--accent); }

.status { min-height: 1.4em; margin: 10px 0 0; font-size: 0.9rem; }
.status.ok { color: var(--ok); }
.status.error { color: var(--danger); }

input:disabled, textarea:disabled { background: #f1f4f7; color: var(--muted); cursor: not-allowed; }

/* ---------- экспорт ---------- */
.main-col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.export-panel h2 { margin-bottom: 12px; }
.export-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; }
.export-form .field { margin: 0; }
.export-form input[type="date"] { width: 11rem; font-variant-numeric: tabular-nums; }
.export-panel .status { margin: 10px 0 0; }

/* ---------- список ---------- */
.list-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.count { color: var(--muted); font-size: 0.9rem; }

.search { margin-bottom: 12px; }
.search input { max-width: 420px; -webkit-appearance: none; appearance: none; }

.empty { padding: 28px 8px; color: var(--muted); text-align: center; }

.table-wrap { position: relative; overflow-x: auto; }

table { width: 100%; border-collapse: collapse; }
th, td { padding: 10px 8px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
th { font-size: 0.85rem; font-weight: 600; color: var(--muted); white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }

.sort-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.sort-btn:hover { color: var(--ink); }
.sort-icon { min-width: 0.9em; font-size: 0.9em; text-align: center; opacity: 0.5; }
.sort-icon::before { content: "\2195"; } /* ↕ — столбец можно сортировать */
th[aria-sort="ascending"] .sort-btn,
th[aria-sort="descending"] .sort-btn { color: var(--ink); }
th[aria-sort="ascending"] .sort-icon,
th[aria-sort="descending"] .sort-icon { color: var(--accent); opacity: 1; }
th[aria-sort="ascending"] .sort-icon::before { content: "\2191"; }  /* ↑ */
th[aria-sort="descending"] .sort-icon::before { content: "\2193"; } /* ↓ */

td.time, td.date { white-space: nowrap; font-variant-numeric: tabular-nums; }
td.name { font-weight: 600; }
td.car { max-width: 11rem; overflow-wrap: anywhere; }
td.comment { color: var(--muted); min-width: 9rem; max-width: 280px; overflow-wrap: anywhere; white-space: pre-wrap; }
.dash { color: var(--muted); }

.row-actions { display: flex; gap: 2px; white-space: nowrap; }

.edit-btn, .delete-btn {
  border: 1px solid transparent;
  background: none;
  color: var(--muted);
  padding: 4px 6px;
  border-radius: 6px;
  font-size: 0.85rem;
}
.edit-btn:hover { color: var(--accent); border-color: var(--accent); }
.delete-btn:hover { color: var(--danger); border-color: var(--danger); }

tr.editing td { background: #e6f1f3; }

[hidden] { display: none !important; }

/* ---------- вход ---------- */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.login-card { width: 100%; max-width: 380px; }
.login-card h1 { font-size: 1.4rem; margin-bottom: 4px; }
.muted { color: var(--muted); margin: 0 0 20px; }

/* ---------- пользователи ---------- */
.field.check { flex-direction: row; align-items: center; gap: 8px; margin-bottom: 4px; }
.field.check label { font-weight: 600; }
input[type="checkbox"] { width: 1.1rem; height: 1.1rem; padding: 0; accent-color: var(--accent); }
.field.check + .hint { margin: 0 0 14px 1.6rem; }

.you { margin-left: 4px; font-size: 0.8rem; font-weight: 500; color: var(--accent); }
.warn { display: block; font-size: 0.8rem; font-weight: 500; color: var(--danger); }
.delete-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.delete-btn:disabled:hover { color: var(--muted); border-color: transparent; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- мобильные ---------- */
/* Ниже ~1180px две колонки слишком тесные для таблицы: форма уходит наверх,
   таблица получает всю ширину. Форма при этом сжимается в компактную сетку,
   чтобы таблица была видна без прокрутки. */
@media (max-width: 1179px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .form-panel { position: static; }

  #entry-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 16px; }
  #entry-form > .field:first-child { grid-column: 1 / span 2; }            /* имя */
  #entry-form > .field:nth-child(2) { grid-column: 3 / span 2; }           /* автомобиль */
  #entry-form > .field-row { grid-column: 1 / span 2; grid-row: 2; }       /* пришёл / ушёл */
  #entry-form > .hint:not(#edit-hint) { grid-column: 1 / span 2; grid-row: 3; }
  #entry-form > .field-comment { grid-column: 3 / span 2; grid-row: 2 / span 2; }
  #entry-form > .field-comment textarea { flex: 1; }
  #entry-form > #edit-hint,
  #entry-form > .form-actions,
  #entry-form > .status { grid-column: 1 / -1; }
  #entry-form > .form-actions { max-width: 360px; }
}

@media (max-width: 800px) {
  #entry-form { display: block; }
  #entry-form > .form-actions { max-width: none; }
  .page-header { padding-top: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}