/* ===== Punjab Voter Search — Master Stylesheet ===== */
:root {
  --paper:#F2F1E9; --ink:#182635; --maroon:#7A1F2B; --maroon-dark:#5C1620;
  --mustard:#CE9A2E; --teal:#1F6F63; --line:#CBCABB; --card:#FBFAF5; --white:#fff;
}
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:'IBM Plex Sans',sans-serif; line-height:1.55; }
.font-mono, .cell-mono { font-family:'IBM Plex Mono',monospace; }
.text-center { text-align:center; }

/* ---------- Header ---------- */
.top { background:var(--ink); color:#fff; padding:22px 28px; }
.top-inner { max-width:1100px; margin:0 auto; display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; }
.brand-mark { display:flex; align-items:center; gap:16px; }
.brand-diamond { width:34px; height:34px; background:var(--mustard); transform:rotate(45deg); position:relative; flex-shrink:0; }
.brand-diamond::after { content:""; position:absolute; inset:7px; background:var(--maroon); }
.top h1 { font-family:'Newsreader',serif; margin:0; font-size:26px; letter-spacing:.3px; }
.gurmukhi { font-size:13px; color:var(--mustard); margin-top:2px; }
.top-right { text-align:right; }
.disclaimer { font-size:12px; color:#cfd6dd; border:1px solid rgba(206,154,46,.45); padding:6px 12px; border-radius:4px; display:inline-block; }
.admin-link { display:inline-block; margin-top:8px; font-size:12.5px; color:var(--mustard); text-decoration:none; font-weight:600; }
.admin-link:hover { text-decoration:underline; }
.phulkari-rule { height:8px; background:repeating-linear-gradient(90deg,var(--maroon) 0 26px,var(--mustard) 26px 52px,var(--teal) 52px 78px,var(--ink) 78px 104px); }

.install-banner { max-width:1100px; margin:18px auto 0; background:#fff7e0; border:1px solid var(--mustard); color:#7a5b12; padding:12px 18px; border-radius:6px; font-size:14px; }
.install-banner a { color:var(--maroon); font-weight:700; }

/* ---------- Panel & Tabs ---------- */
main { max-width:1100px; margin:34px auto; padding:0 20px; }
.panel { background:var(--card); border:1px solid var(--line); border-radius:8px; box-shadow:0 6px 22px rgba(24,38,53,.09); overflow:hidden; }
.tabs { display:flex; border-bottom:2px solid var(--line); background:#EFEEE3; }
.tab-btn { flex:1; padding:16px 10px; font-size:15px; font-weight:600; background:transparent; border:none; cursor:pointer; color:#66707b; border-bottom:3px solid transparent; margin-bottom:-2px; }
.tab-btn.active { color:var(--maroon); border-bottom-color:var(--maroon); background:var(--card); }
.tab-panel { display:none; padding:28px 30px 10px; }
.tab-panel.active { display:block; }

/* ---------- Forms ---------- */
.field-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px 18px; }
.field label { display:block; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; margin-bottom:6px; }
.req { color:var(--maroon); }
.field input, .field select { width:100%; padding:11px 13px; border:1px solid var(--line); border-radius:4px; background:var(--white); font-size:14px; font-family:inherit; }
.field input:focus, .field select:focus { outline:none; border-color:var(--teal); box-shadow:0 0 0 3px rgba(31,111,99,.16); }
.field.full { grid-column:1 / -1; }
.hint { font-size:12px; color:#7d8590; margin-top:5px; }
.sample-pills-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:20px 0 6px; }
.sample-label { font-size:12.5px; color:#66707b; font-weight:600; }
.sample-pill { background:#fff; border:1px solid var(--mustard); color:#7a5b12; border-radius:99px; padding:5px 14px; font-size:12.5px; cursor:pointer; transition:.15s; }
.sample-pill:hover { background:var(--mustard); color:#fff; }
.actions { display:flex; gap:12px; margin:20px 0 26px; }
.search-btn { background:var(--maroon); color:#fff; border:none; padding:12px 34px; border-radius:4px; font-size:15px; font-weight:600; cursor:pointer; }
.search-btn:hover { background:var(--maroon-dark); }
.clear-btn { background:transparent; border:1px solid var(--line); color:#555; padding:12px 22px; border-radius:4px; font-size:14px; cursor:pointer; }
.clear-btn:hover { border-color:var(--ink); color:var(--ink); }

/* ---------- Results ---------- */
.results { border-top:1px solid var(--line); padding:22px 30px 30px; }
.results-count-bar { display:flex; justify-content:space-between; align-items:center; background:#fff; border:1px solid var(--line); border-radius:6px; padding:10px 16px; margin-bottom:16px; font-size:14px; }
.btn-sm { background:var(--teal); color:#fff; border:none; border-radius:4px; padding:7px 14px; font-size:12.5px; font-weight:600; cursor:pointer; margin-left:6px; }
.btn-sm:hover { filter:brightness(1.1); }
.results-table-wrap { overflow-x:auto; }
.voters-table { width:100%; border-collapse:collapse; font-size:13.5px; background:#fff; }
.voters-table th { background:var(--ink); color:#fff; text-align:left; padding:11px 12px; font-size:12px; text-transform:uppercase; letter-spacing:.5px; white-space:nowrap; }
.voters-table th.sortable { cursor:pointer; user-select:none; }
.voters-table th.sortable:hover { background:#24384e; }
.sort-arrow { opacity:.55; font-size:11px; }
.voters-table td { padding:11px 12px; border-bottom:1px solid var(--line); vertical-align:top; }
.voters-table tbody tr:hover { background:#F7F6EE; }
.epic-badge { font-family:'IBM Plex Mono',monospace; background:#FDF6E3; border:1px solid var(--mustard); color:#7a5b12; padding:3px 8px; border-radius:4px; font-size:12.5px; font-weight:600; }
.name-primary { font-weight:600; font-size:14px; }
.name-secondary { color:#66707b; font-size:12.5px; }
.rel-meta { font-size:12.5px; color:#66707b; }
.rel-tag { background:#E8F0EE; color:var(--teal); border-radius:3px; padding:1px 7px; font-size:11px; font-weight:700; text-transform:uppercase; margin-right:5px; }
.gender-pill { display:inline-block; padding:4px 10px; border-radius:99px; font-size:11.5px; font-weight:600; white-space:nowrap; }
.tag-male { background:#E3ECF5; color:#1d4e79; }
.tag-female { background:#F9E3E6; color:#8c2735; }
.tag-other { background:#EFE7F7; color:#5b3a86; }
.cell-location { font-size:12.5px; }
.part-text { color:#66707b; font-size:12px; }
.btn-slip { display:inline-flex; align-items:center; gap:6px; background:#fff; border:1px solid var(--teal); color:var(--teal); padding:7px 12px; border-radius:4px; font-size:12.5px; font-weight:600; cursor:pointer; white-space:nowrap; }
.btn-slip:hover { background:var(--teal); color:#fff; }
.results-empty { text-align:center; padding:44px 20px; color:#66707b; }
.results-empty .icon { font-size:40px; margin-bottom:8px; }
.results-empty h3 { font-family:'Newsreader',serif; color:var(--ink); margin:6px 0; }
.results-empty code { background:#fff; border:1px solid var(--line); padding:2px 7px; border-radius:4px; font-family:'IBM Plex Mono',monospace; }

/* ---------- Modal / Voter Slip ---------- */
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(18,26,35,.62); z-index:900; align-items:flex-start; justify-content:center; padding:40px 16px; overflow:auto; }
.modal-overlay.open { display:flex; }
.modal-card { background:var(--card); width:100%; max-width:640px; border-radius:8px; border-top:6px solid var(--maroon); box-shadow:0 20px 60px rgba(0,0,0,.35); }
.modal-header { display:flex; justify-content:space-between; align-items:center; padding:18px 24px; border-bottom:1px solid var(--line); }
.modal-header h3 { margin:0; font-family:'Newsreader',serif; font-size:19px; }
.modal-close-btn { background:none; border:none; font-size:26px; cursor:pointer; color:#777; line-height:1; }
.modal-body { padding:24px; }
.slip-emblem { text-align:center; margin-bottom:8px; }
.slip-title { text-align:center; font-family:'Newsreader',serif; font-size:18px; font-weight:700; }
.slip-sub { text-align:center; font-size:12.5px; color:#66707b; margin-bottom:16px; }
.slip-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px 18px; border:1px solid var(--line); border-radius:6px; padding:16px 18px; background:#fff; }
.slip-item .k { font-size:10.5px; text-transform:uppercase; letter-spacing:.6px; color:#7d8590; font-weight:700; }
.slip-item .v { font-size:14px; font-weight:600; }
.slip-item.wide { grid-column:1 / -1; }
.slip-actions { display:flex; gap:10px; justify-content:flex-end; margin-top:18px; }

/* ---------- Footer ---------- */
footer { max-width:1100px; margin:0 auto 40px; padding:16px 20px 0; font-size:12px; color:#7d8590; text-align:center; }
footer a { color:var(--teal); }

/* ---------- Print (slip only) ---------- */
@media print {
  body * { visibility:hidden; }
  .modal-overlay { position:absolute; inset:0; background:#fff; padding:0; display:block; }
  .modal-card, .modal-card * { visibility:visible; }
  .modal-card { box-shadow:none; max-width:100%; }
  .modal-close-btn, .slip-actions { display:none !important; }
}

/* ---------- Responsive ---------- */
@media (max-width:820px) {
  .field-grid { grid-template-columns:1fr 1fr; }
  .voters-table { font-size:12.5px; }
}
@media (max-width:560px) {
  .field-grid { grid-template-columns:1fr; }
  .top-inner { justify-content:center; text-align:center; }
  .top-right { text-align:center; }
  .slip-grid { grid-template-columns:1fr; }
}