* { box-sizing: border-box; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  margin: 0; background: #f4f5f7; color: #1a1a1a; font-size: 14px;
}
.topbar {
  background: #0f3460; color: #fff;
  padding: 10px 20px; display: flex; align-items: center; gap: 24px;
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.topbar a { color: #fff; text-decoration: none; }
.topbar .brand { font-weight: 700; font-size: 16px; }
.topbar nav { display: flex; gap: 16px; margin-left: 30px; }
.topbar nav a { opacity: .85; }
.topbar nav a:hover { opacity: 1; text-decoration: underline; }

.container { max-width: 1500px; margin: 20px auto; padding: 0 20px; }

h1 { margin: 0 0 16px; font-size: 22px; }
h2 { margin: 24px 0 10px; font-size: 17px; }
h3.bolme-head {
  margin: 20px 0 6px; font-size: 14px; color: #0a1f4a;
  background: #dce5f0; padding: 6px 10px; border-left: 3px solid #0f3460;
  display: flex; align-items: center; gap: 8px;
}
.bolme-head-row h3 { flex: 1; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 20px; }
.card { background: #fff; border-radius: 6px; padding: 14px 16px; border: 1px solid #e2e5ea; }
.card .num { font-size: 24px; font-weight: 700; color: #0f3460; }
.card .lbl { font-size: 12px; color: #666; margin-top: 2px; }
.card.warn { background: #fff6f2; border-color: #f0c5a8; }
.card.warn .num { color: #a83d00; }
.card.big { background: #eef5ff; border-color: #b8ccea; }
.card.big .num { font-size: 28px; }
h2.section-head { margin: 22px 0 10px; font-size: 13px; text-transform: uppercase; letter-spacing: .5px; color: #666; font-weight: 600; border-bottom: 1px solid #d8dce4; padding-bottom: 4px; }
.export-btn {
  display: inline-block; padding: 4px 10px; border-radius: 4px;
  background: #0f3460; color: #fff !important; text-decoration: none;
  font-size: 12px; font-weight: 600; margin-left: 8px;
}
.export-btn:hover { background: #1a4a7c; }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 1000px) { .two-col { grid-template-columns: 1fr; } }

table.grid {
  width: 100%; border-collapse: collapse; background: #fff;
  border: 1px solid #d8dce4; font-size: 13px;
}
table.grid.small { font-size: 12px; }
table.grid th {
  background: #d0d7e3; color: #111; text-align: left; padding: 7px 10px;
  border: 1px solid #b0b8c8; font-weight: 700; white-space: nowrap;
}
table.grid td { padding: 5px 10px; border: 1px solid #e2e5ea; vertical-align: top; }
table.grid tr:nth-child(even) td { background: #fafbfc; }
table.grid td.r, table.grid th.r { text-align: right; font-variant-numeric: tabular-nums; }
table.grid a { color: #0f3460; text-decoration: none; }
table.grid a:hover { text-decoration: underline; }
table.grid tr.total td { background: #fef3c0 !important; font-weight: 700; border-top: 2px solid #c8a800; }
table.grid tr.add-row td { background: #f3f6fa !important; padding: 6px 10px; }
table.grid tr.vakant-row td { background: #fff6f2 !important; }
table.grid tr.edit-row td { background: #eef5ff !important; padding: 10px; }

.filters { display: flex; gap: 10px; align-items: center; margin: 14px 0 18px; flex-wrap: wrap; }
.filters input[type=search], .filters select {
  padding: 7px 10px; border: 1px solid #c9cdd3; border-radius: 4px; font-size: 13px; background: #fff;
}
.filters input[type=search] { min-width: 280px; }
.filters button {
  padding: 7px 14px; background: #0f3460; color: #fff; border: 0; border-radius: 4px; cursor: pointer;
}

.muted { color: #7a7f88; }
.small { font-size: 11.5px; }
.crumbs { margin-top: 10px; }
.crumbs a { color: #0f3460; text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

.pill { display: inline-block; padding: 1px 7px; border-radius: 10px; font-size: 10.5px; margin-left: 4px; vertical-align: middle; }
.pill.warn { background: #fde2d2; color: #a83d00; }
.pill.bad  { background: #fcd7d7; color: #a8000c; border: 1px solid #e99a9a; }
.pill.ok   { background: #d8f0d8; color: #276b27; }
.warn-cell { color: #a83d00; font-weight: 600; }

/* missing data — red emphasis so integrity gaps are visible */
.missing { color: #c0202a; font-weight: 700; background: #fff0f0; padding: 1px 6px; border-radius: 3px; font-size: 12px; }
td.missing, th.missing { background: #fff0f0; color: #c0202a; font-weight: 700; }
.card.bad { background: #fff0f0; border-color: #e99a9a; }
.card.bad .num { color: #c0202a; }
.card.bad .lbl { color: #a83d00; }
tr.row-missing td { background: #fff8f8 !important; }
.diff-bad { color: #c0202a; font-weight: 700; }
.diff-ok  { color: #276b27; }
.integrity-banner {
  background: #fff0f0; border: 1px solid #e99a9a; color: #a8000c;
  padding: 10px 14px; border-radius: 6px; margin: 12px 0; font-size: 13px;
}
.integrity-banner a { color: #a8000c; font-weight: 700; }

/* edit blocks */
.edit-block { background: #fff; border: 1px solid #e2e5ea; border-radius: 6px; padding: 8px 14px; margin-bottom: 10px; }
.edit-block[open] { background: #eef5ff; }
.edit-block summary { cursor: pointer; list-style: none; }
.edit-block summary::-webkit-details-marker { display: none; }

.edit-form {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px; margin-top: 12px;
}
.edit-form label { display: flex; flex-direction: column; font-size: 12px; color: #555; gap: 3px; }
.edit-form label.full { grid-column: 1 / -1; }
.edit-form input, .edit-form select, .edit-form textarea {
  padding: 6px 8px; border: 1px solid #c9cdd3; border-radius: 3px; font-size: 13px; font-family: inherit;
}
.edit-form button {
  grid-column: 1 / -1; justify-self: start;
  padding: 8px 18px; background: #0f3460; color: #fff; border: 0; border-radius: 4px; cursor: pointer;
}

.grid-form {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px;
}
.grid-form label { display: flex; flex-direction: column; font-size: 11px; color: #555; gap: 2px; }
.grid-form label.cb { flex-direction: row; align-items: center; gap: 4px; }
.grid-form input { padding: 5px 7px; border: 1px solid #c9cdd3; border-radius: 3px; font-size: 12.5px; }
.grid-form .btns { grid-column: 1 / -1; display: flex; gap: 8px; margin-top: 6px; }
.grid-form .btns button {
  padding: 6px 14px; background: #0f3460; color: #fff; border: 0; border-radius: 3px; cursor: pointer;
}
.grid-form .btns button[type=button] { background: #999; }

.inline-form { display: inline-flex; gap: 6px; align-items: center; }
.inline-form input { padding: 5px 8px; border: 1px solid #c9cdd3; border-radius: 3px; font-size: 12.5px; }
.inline-form button {
  padding: 5px 11px; background: #0f3460; color: #fff; border: 0; border-radius: 3px; cursor: pointer; font-size: 12px;
}

button.tiny {
  padding: 2px 8px; font-size: 11px; background: #e4e8ee; color: #0f3460;
  border: 1px solid #c9cdd3; border-radius: 3px; cursor: pointer;
}
button.tiny:hover { background: #d0d7e3; }
button.tiny.danger { background: #fde2d2; color: #a83d00; border-color: #f0c5a8; }
button.tiny.danger:hover { background: #f9c9ad; }

.vakant-block { background: #fff6f2; border: 1px solid #f0c5a8; border-radius: 6px; padding: 10px 14px; margin-bottom: 14px; }
.vakant-block summary { cursor: pointer; color: #a83d00; }

.add-bolme { margin: 20px 0; padding: 10px 14px; background: #eef5ff; border-radius: 6px; }
.nk-ref { background: #f4f7fb; border-left: 3px solid #0f3460; padding: 8px 12px; margin: 10px 0; font-size: 13px; border-radius: 0 4px 4px 0; }
.nk-ref a { color: #0f3460; font-weight: 600; }
.right { float: right; margin-top: -28px; }

footer { text-align: center; color: #9aa; padding: 30px 0 20px; }
code { background: #eef1f6; padding: 1px 5px; border-radius: 3px; font-size: 12px; }
kbd { background: #fff; border: 1px solid #c9cdd3; border-bottom-width: 2px; border-radius: 3px; padding: 0 4px; font-size: 11px; font-family: inherit; }

/* ─── Vahid panel ───────────────────────────────────────────────────────── */
.panel-select {
  background: #fff; border: 1px solid #d8dce4; border-radius: 6px;
  padding: 12px 16px; margin: 14px 0; display: flex; gap: 12px; align-items: center;
}
.panel-select label { display: flex; gap: 8px; align-items: center; flex: 1; font-size: 13px; }
.panel-select select {
  flex: 1; padding: 7px 10px; border: 1px solid #c9cdd3; border-radius: 4px;
  font-size: 13px; background: #fff; min-width: 300px;
}

.panel-meta {
  background: #fff; border: 1px solid #d8dce4; border-radius: 6px;
  padding: 14px 18px; margin: 14px 0;
}
.panel-meta-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.panel-meta-head h2 { margin: 0; font-size: 18px; color: #0a1f4a; }

.meta-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px 14px;
}
.meta-grid label { display: flex; flex-direction: column; font-size: 12px; color: #555; gap: 3px; }
.meta-grid label.full { grid-column: 1 / -1; }
.meta-grid label span em { font-style: normal; }
.meta-grid input, .meta-grid select, .meta-grid textarea {
  padding: 6px 8px; border: 1px solid #c9cdd3; border-radius: 3px;
  font-size: 13px; font-family: inherit; background: #fff;
}
.meta-grid input.missing, .meta-grid select.missing, .meta-grid textarea.missing {
  background: #fff0f0; border-color: #e99a9a;
}
.meta-grid button {
  padding: 8px 18px; background: #0f3460; color: #fff;
  border: 0; border-radius: 4px; cursor: pointer; font-size: 13px;
}

.totals {
  background: #fef3c0; border: 1px solid #e5c860; border-radius: 4px;
  padding: 8px 14px; margin: 16px 0 10px; font-size: 13px;
}
.totals em { font-style: normal; color: #7a6300; }

.panel-table-wrap { overflow-x: auto; margin-top: 6px; }
table.panel-table { min-width: 1100px; }
table.panel-table input { width: 100%; border: 1px solid transparent; background: transparent; padding: 3px 5px; font-size: 12px; font-family: inherit; }
table.panel-table input:focus { border-color: #0f3460; background: #fff; outline: none; }
table.panel-table td.missing input { background: #fff0f0; }
table.panel-table tr.bolme-row td {
  background: #dce5f0 !important; padding: 6px 10px; font-size: 12.5px;
  border-top: 2px solid #0f3460;
}
table.panel-table tr.row-missing td { background: #fff8f8 !important; }
table.panel-table tr.row-missing td.missing { background: #ffe5e5 !important; }