* { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-size: 14px; color: #1f2933; background: #f3f5f8; }
a { color: #1d5fbf; text-decoration: none; }
a:hover { text-decoration: underline; }
header.top { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; background: #1e3a5f; color: #fff; padding: 10px 20px; }
header.top .brand { font-weight: 700; font-size: 16px; }
header.top .brand span { font-weight: 400; opacity: .7; }
header.top nav { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; }
header.top nav a { color: #dbe6f5; padding: 6px 10px; border-radius: 5px; }
header.top nav a.on, header.top nav a:hover { background: rgba(255,255,255,.15); color: #fff; text-decoration: none; }
header.top .user { font-size: 13px; opacity: .9; }
header.top .user a { color: #fff; }
main { max-width: 1200px; margin: 0 auto; padding: 20px; }
h1 { font-size: 22px; margin: 4px 0 16px; }
h2 { font-size: 17px; margin: 22px 0 10px; }
.card { background: #fff; border: 1px solid #dde3ea; border-radius: 8px; padding: 16px 18px; margin-bottom: 16px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px 18px; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 16px; }
.stat { background: #fff; border: 1px solid #dde3ea; border-radius: 8px; padding: 14px; }
.stat b { display: block; font-size: 22px; margin-top: 4px; }
label { display: block; font-size: 12px; color: #52606d; margin-bottom: 3px; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], select, textarea {
  width: 100%; padding: 7px 9px; border: 1px solid #c3ccd6; border-radius: 5px; font: inherit; background: #fff; }
textarea { min-height: 90px; }
input:focus, select:focus, textarea:focus { outline: 2px solid #9cc0f0; border-color: #4a86d8; }
.check { display: flex; align-items: center; gap: 6px; font-size: 14px; color: inherit; }
.btn { display: inline-block; padding: 8px 14px; border: 1px solid #1d5fbf; background: #1d5fbf; color: #fff; border-radius: 5px; font: inherit; cursor: pointer; }
.btn:hover { background: #174f9f; text-decoration: none; }
.btn.light { background: #fff; color: #1d5fbf; }
.btn.light:hover { background: #eef4fc; }
.btn.danger { background: #c53030; border-color: #c53030; }
.btn.small { padding: 4px 9px; font-size: 13px; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
table.list { width: 100%; border-collapse: collapse; background: #fff; }
table.list th, table.list td { padding: 7px 9px; border-bottom: 1px solid #e4e8ee; text-align: left; vertical-align: top; }
table.list th { background: #f0f3f7; font-size: 12px; color: #52606d; font-weight: 600; white-space: nowrap; }
table.list tr:hover td { background: #fafcff; }
table.list td.r, table.list th.r { text-align: right; }
table.list .muted td { color: #9aa5b1; }
.table-wrap { overflow-x: auto; border: 1px solid #dde3ea; border-radius: 8px; }
.flash { padding: 10px 14px; border-radius: 6px; margin-bottom: 14px; border: 1px solid; }
.flash.ok { background: #e6f6ea; border-color: #9fd8ac; }
.flash.err { background: #fdecec; border-color: #f0a8a8; }
.flash.warn { background: #fff7e0; border-color: #f0d080; }
.badge { display: inline-block; padding: 1px 7px; border-radius: 10px; font-size: 12px; background: #e4e8ee; color: #52606d; }
.badge.ok { background: #d5f0dc; color: #1f6b35; }
.badge.err { background: #fbd5d5; color: #9b1c1c; }
.badge.warn { background: #fdefc5; color: #7a5a00; }
.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 12px; }
.filters > div { min-width: 140px; }
.hint { font-size: 12px; color: #7b8794; margin-top: 4px; }
.items-edit td { padding: 4px; }
.items-edit input, .items-edit select { padding: 5px 6px; }
.login { max-width: 360px; margin: 80px auto; }
code, pre { background: #f0f3f7; padding: 2px 5px; border-radius: 4px; font-size: 13px; }
pre { padding: 10px; overflow-x: auto; white-space: pre-wrap; word-break: break-all; }
.tabs { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.tabs a { padding: 6px 12px; border-radius: 5px; background: #e4e8ee; color: #1f2933; }
.tabs a.on { background: #1d5fbf; color: #fff; }
.pager { margin-top: 12px; display: flex; gap: 6px; }
#items td:nth-child(2) input, #lines td:nth-child(2) input { min-width: 300px; }
.menu-btn { display: none; background: none; border: 1px solid rgba(255,255,255,.4); color: #fff; font-size: 20px; border-radius: 5px; padding: 2px 10px; cursor: pointer; }

/* Мобилни устройства */
@media (max-width: 760px) {
  body { font-size: 15px; }
  main { padding: 12px; }
  h1 { font-size: 19px; }
  header.top { padding: 10px 12px; gap: 8px; }
  header.top .brand { flex: 1; font-size: 15px; }
  .menu-btn { display: block; }
  header.top nav, header.top .user { display: none; flex: 1 1 100%; }
  body.nav-open header.top nav { display: flex; flex-direction: column; }
  body.nav-open header.top .user { display: block; padding: 6px 10px; }
  header.top nav a { padding: 10px; font-size: 16px; }
  input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], select, textarea { font-size: 16px; }
  .grid { grid-template-columns: 1fr; }
  .grid > div { grid-column: auto !important; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stat b { font-size: 18px; }
  .filters > div { flex: 1 1 100%; min-width: 0; }
  .filters .btn { width: 100%; text-align: center; }
  .card { padding: 12px; }
  .btn { padding: 10px 14px; }
  .actions .btn { flex: 1 1 auto; text-align: center; }

  /* Таблиците стават карти: всеки ред е блок, всяка клетка има етикет от заглавието */
  .table-wrap { border: 0; overflow: visible; }
  table.list:not(.no-stack), table.list:not(.no-stack) tbody, table.list:not(.no-stack) tr, table.list:not(.no-stack) td { display: block; width: 100%; }
  table.list:not(.no-stack) tr.head, table.list:not(.no-stack) thead { display: none; }
  table.list:not(.no-stack) tr { background: #fff; border: 1px solid #dde3ea; border-radius: 8px; margin-bottom: 10px; padding: 6px 0; }
  table.list:not(.no-stack) td { border: 0; padding: 4px 12px; display: flex; gap: 10px; justify-content: space-between; align-items: center; text-align: right; }
  table.list:not(.no-stack) td::before { content: attr(data-label); color: #7b8794; font-size: 13px; text-align: left; flex: 0 0 auto; }
  table.list:not(.no-stack) td[data-label=""]::before { display: none; }
  table.list:not(.no-stack) td.r { text-align: right; }
  table.list:not(.no-stack) td > form, table.list:not(.no-stack) td > input, table.list:not(.no-stack) td > select { flex: 1; }
  .items-edit td input, .items-edit td select { width: 100% !important; min-width: 0 !important; }
  .items-edit td { justify-content: flex-start; }
  .items-edit td::before { min-width: 90px; }
  .table-wrap > table.no-stack { display: block; overflow-x: auto; }
  .pager { flex-wrap: wrap; }
}