/* admin/admin.css */
:root{ --bg:#0b1220; --panel:#ffffff; --line:#e5e7eb; --muted:#6b7280; --ink:#111827; }
*{ box-sizing:border-box; }
body{ margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:var(--ink); background:#f6f8fb; }
.admHeader{ height:44px; display:flex; align-items:center; justify-content:space-between; padding:0 12px; background:var(--bg); color:#fff; }
.admHeaderLeft{ display:flex; align-items:center; gap:10px; }
.admBrand{ font-size:13px; letter-spacing:.3px; }
.admHeaderLink{ color:#fff; font-size:12px; text-decoration:none; opacity:.85; }
.admHeaderRight{ display:flex; align-items:center; gap:10px; }
.admWho{ font-size:12px; opacity:.9; max-width:380px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.admLogout{ height:30px; border-radius:10px; border:1px solid rgba(255,255,255,.35); background:transparent; color:#fff; padding:0 10px; cursor:pointer; }

.admFrame{ max-width:1200px; margin:0 auto; display:flex; gap:12px; padding:12px; }
.admMenu{ width:220px; flex:0 0 220px; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:10px; display:flex; flex-direction:column; gap:6px; }
.admMenuTitle{ font-size:12px; color:var(--muted); padding:4px 6px 6px; }
.menuBtn{ height:36px; border-radius:10px; border:1px solid var(--line); background:#fff; text-align:left; padding:0 10px; cursor:pointer; font-size:13px; }
.menuBtn.active{ border-color:#111827; }
.admContent{ flex:1; min-height:640px; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:12px; }

.card{ border:1px solid var(--line); border-radius:12px; padding:12px; background:#fff; }
.hRow{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.hTitle{ font-size:15px; font-weight:700; }
.hSub{ font-size:12px; color:var(--muted); }

/* common UI helpers (used by pages/*) */
.pageHead{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:12px; }
.hRight{ display:flex; align-items:center; gap:8px; }

.btn{
  height:34px;
  border-radius:10px;
  border:1px solid var(--line);
  background:#fff;
  padding:0 12px;
  cursor:pointer;
  font-size:13px;
}
.btn:hover{ border-color:#111827; }

.grid2{ display:grid; }

.chip{ display:inline-flex; align-items:center; gap:6px; }

.formRow{ display:flex; flex-direction:column; gap:6px; margin-bottom:10px; }
.formRow label{ font-size:12px; color:#374151; }
.formRow input,
.formRow textarea,
.formRow select{
  width:100%;
  min-height:34px;
  border-radius:10px;
  border:1px solid #cbd5e1;
  padding:6px 10px;
  font-size:13px;
}
.formRow textarea{ min-height:72px; resize:vertical; }

.kvTable{ width:100%; border-collapse:separate; border-spacing:0; }
.kvTable td{ border-top:1px solid var(--line); padding:8px 6px; vertical-align:top; }
.kvTable tr:first-child td{ border-top:none; }
.kvKey{ font-size:12px; color:#374151; width:42%; }
.kvVal input{ width:100%; }

/* login */
.loginWrap{ max-width:420px; margin:24px auto; }
.loginTitle{ font-size:16px; font-weight:800; margin-bottom:6px; }
.loginDesc{ font-size:12px; color:var(--muted); margin-bottom:12px; line-height:1.4; }
.loginRow{ display:flex; flex-direction:column; gap:6px; margin-bottom:10px; }
.loginRow label{ font-size:12px; color:#374151; }
.loginRow input{ height:36px; border-radius:10px; border:1px solid #cbd5e1; padding:0 10px; }
.loginBtn{ height:38px; border-radius:12px; border:1px solid #111827; background:#111827; color:#fff; cursor:pointer; width:100%; }
.loginErr{ margin-top:10px; font-size:12px; color:#b91c1c; white-space:pre-line; }

/* villages */
.villagesLayout{ display:grid; grid-template-columns: 420px 1fr; gap:16px; align-items:start; }
@media (max-width: 980px){
  .villagesLayout{ grid-template-columns: 1fr; }
}

.villageGrid{
  display:grid;
  grid-template-columns: repeat(7, 44px);
  grid-auto-rows: 44px;
  gap: 6px;
}
.villageCell{
  border: 1px solid var(--tBorder, var(--line));
  border-radius: 12px;
  background: var(--tBg, #fff);
  color: var(--tText, inherit);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  user-select:none;
  padding:0;
  position: relative;
  overflow:hidden;
}

.villageCell::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:6px;
  background: var(--tBand, transparent);
}
.villageCell:hover{ border-color: var(--tBorder, #111827); }
.villageCell.active{ outline: 2px solid #111827; outline-offset: 1px; }
.villageCell.empty{ background:#fafafa; color:#9ca3af; }
.villageCell.inactive{ opacity:.65; }
.villageCell .vName{
  font-size:11px;
  line-height:1.15;
  padding:0 6px;
  text-align:center;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
}

/* villages - flags (compact) */
.flagGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:8px;
}
.flagItem{
  border:1px solid var(--line);
  border-radius:10px;
  padding:8px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
  background:#fff;
}
.flagItem span{ font-size:12px; color:#111827; line-height:1; }
.flagItem small{ font-size:11px; color:var(--muted); line-height:1; }
.flagItem input[type="checkbox"]{
  width:16px;
  height:16px;
}

/* villages - theme select */
.themeSelectRow{
  display:flex;
  align-items:center;
  gap:10px;
}
.themeSwatch{
  width:22px;
  height:22px;
  border-radius:6px;
  border:1px solid var(--line);
  background:#e5e7eb;
  flex: 0 0 auto;
}
select.themeSelect{
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}