/* ============ Screen styles (basic CSS, no framework) ============ */
* { box-sizing: border-box; }
body { margin: 0; font-family: Arial, Helvetica, sans-serif; background: #f1f5f9; color: #0f172a; }

.topbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  background: #0f766e; color: #fff; padding: 16px 22px; }
.topbar h1 { margin: 0; font-size: 24px; }
.topbar p { margin: 4px 0 0; opacity: .9; font-size: 13px; }
.top-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.btn { border: 1px solid #cbd5e1; background: #fff; color: #0f172a; padding: 9px 14px; border-radius: 8px; cursor: pointer; font-size: 14px; }
.btn:hover { background: #f8fafc; }
.btn-primary { background: #f59e0b; border-color: #f59e0b; color: #111827; font-weight: 700; }
.btn-small { padding: 6px 10px; font-size: 13px; }

.status { padding: 9px 22px; font-size: 13px; background: #ecfdf5; color: #065f46; border-bottom: 1px solid #d1fae5; }
.status.error { background: #fef2f2; color: #991b1b; border-color: #fecaca; }
.status.demo { background: #fffbeb; color: #92400e; border-color: #fde68a; }

.controls { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; padding: 14px 22px 4px; }
.controls input[type="search"] { flex: 1 1 280px; }
.controls input, .controls select, .settings input[type="url"] {
  padding: 9px 11px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 14px; background: #fff; }
.selected-info { font-weight: 700; color: #0f766e; }

.settings { margin: 10px 22px 0; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 10px 14px; }
.settings summary { cursor: pointer; font-weight: 700; }
.settings-grid { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px; font-size: 14px; align-items: center; }
.api-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.api-row input { flex: 1 1 320px; }
.hint { font-size: 12.5px; color: #64748b; margin: 10px 0 4px; }

.layout { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 16px 22px; align-items: start; }
@media (max-width: 980px) { .layout { grid-template-columns: 1fr; } }
.panel { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 14px; }
.panel h2 { margin: 2px 0 12px; font-size: 16px; }
.table-wrap { overflow: auto; max-height: 72vh; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { border-bottom: 1px solid #e2e8f0; padding: 7px 8px; text-align: left; vertical-align: top; }
thead th { position: sticky; top: 0; background: #f8fafc; z-index: 1; }
tbody tr { cursor: pointer; }
tbody tr.selected { background: #f0fdfa; }
.empty { color: #64748b; padding: 16px 4px; }
footer { padding: 4px 22px 22px; color: #64748b; font-size: 12.5px; }

/* ============ A4 preview (screen) ============ */
.preview-wrap { overflow: auto; max-height: 78vh; background: #e2e8f0; border-radius: 8px; padding: 14px; }
#previewPages { display: flex; flex-direction: column; align-items: center; gap: 18px; }

/* One A4 page: 210mm x 297mm = 794 x 1123 px at 96dpi. Zoom scales it visually. */
.a4-page {
  width: 794px; height: 1123px; flex: none;
  background: #fff; box-shadow: 0 2px 14px rgba(0,0,0,.18);
  padding: 38px; /* ~10mm */
  display: grid;
  grid-template-columns: 1fr 1fr;      /* 2 side by side */
  grid-template-rows: repeat(5, 1fr);  /* 5 rows = 10 stickers */
  gap: 15px; /* ~4mm */
  transform-origin: top center;
}
.page-scaler { overflow: hidden; } /* height set by JS so scaled page takes correct space */

/* One sticker — every info on a NEW LINE, empty info is never rendered */
.sticker {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 14px 12px; border-radius: 10px;
  font-size: calc(15px * var(--fs, 1));
}
.sticker.bordered { border: 1.5px dashed #94a3b8; }
.sticker:not(.bordered) { border: 1.5px solid #e2e8f0; }
.sticker.empty-slot { border: none !important; }
.sticker .sl { position: absolute; top: 7px; left: 10px; font-size: calc(11px * var(--fs, 1)); color: #64748b; font-weight: 700; }
.sticker .line { width: 100%; line-height: 1.35; overflow-wrap: anywhere; }
.sticker .name { font-size: calc(20px * var(--fs, 1)); font-weight: 800; text-transform: uppercase; }
.sticker .designation { font-size: calc(15px * var(--fs, 1)); font-weight: 600; color: #1e293b; }
.sticker .department { font-size: calc(14px * var(--fs, 1)); color: #334155; }
.sticker .mobile { font-size: calc(15px * var(--fs, 1)); font-weight: 700; color: #0f766e; }
.sticker .address { font-size: calc(12.5px * var(--fs, 1)); color: #475569; }

/* ============ Print: ONLY the A4 sticker pages ============ */
#printArea { display: none; }
@page { size: A4; margin: 0; }
@media print {
  .no-print, .topbar, .controls, .settings, .layout, footer, .status { display: none !important; }
  body { background: #fff; }
  #printArea { display: block; }
  #printArea .a4-page {
    width: 210mm; height: 297mm; padding: 10mm; gap: 4mm;
    box-shadow: none; transform: none !important;
    page-break-after: always; break-after: page;
  }
  #printArea .a4-page:last-child { page-break-after: auto; break-after: auto; }
}