/* ============================================================
   BookPen — fix-idcard.css (task 2-d + task 8)
   Small companion styles for the canvas-based ID card screen
   (assets/js/screens/idcard.js). The card itself is 100% canvas
   (1050×660, ported 1:1 from src/lib/idcard.ts) — only the host
   layout / loading overlay / action grid / manage list live here.
   Loaded from index.php AFTER style.css → cascade wins ties.
   ============================================================ */

/* ---------- card host ---------- */
.bp-idc-host { position: relative; width: 100%; }
.bp-idc-wrap { position: relative; }
.bp-idc-canvas {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 8px 10px -6px rgba(0, 0, 0, 0.2);
}

/* 3D tilt — idcard-screen.tsx: [perspective:1400px] wrapper +
   canvas transition-transform duration-300 rotateX(2deg)→0 on hover */
.bp-idc-persp { perspective: 1400px; }
.bp-idc-tilt { transform: rotateX(2deg); transition: transform 0.3s; }
.bp-idc-tilt:hover { transform: rotateX(0deg); }

/* loading overlay until the async render (logo + photo + QR) settles */
.bp-idc-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: color-mix(in srgb, var(--card) 60%, transparent);
  pointer-events: none;
}
/* border-2 (idcard-screen.tsx: border-2 border-primary border-t-transparent) */
.bp-idc-loading .spinner { width: 32px; height: 32px; border-width: 2px; }

/* ---------- PNG / PDF / Print action grid ---------- */
.bp-idc-actions { margin-top: 4px; }
.bp-idc-actions .btn { justify-content: center; }
.bp-idc-actions .btn svg, .bp-idc-actions .btn [class*="icon"] { width: 16px; height: 16px; flex-shrink: 0; }

/* this screen's primary buttons (Print / Add Student) keep the original
   horizontal 90° emerald→teal gradient (btn-primary default is 135°) */
.btn.bp-idc-grad { background: linear-gradient(90deg, #047857, #0f766e); }
.btn.bp-idc-grad:hover:not(:disabled) { background: linear-gradient(90deg, #065f46, #115e59); }

/* ---------- card details panel (student view) ----------
   grid-cols-2 sm:grid-cols-4 (idcard-screen.tsx mt-2 grid gap-3) */
.bp-idc-details { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 8px; }
@media (min-width: 640px) { .bp-idc-details { grid-template-columns: repeat(4, 1fr); } }

/* ---------- manage: stats grid — grid-cols-2 lg:grid-cols-4 ---------- */
.bp-idc-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 1024px) { .bp-idc-stats { grid-template-columns: repeat(4, 1fr); } }

/* ---------- manage: filters row — flex-col gap-3 sm:flex-row sm:items-center ---------- */
.bp-idc-filters { display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 640px) { .bp-idc-filters { flex-direction: row; align-items: center; } }
.bp-idc-search { position: relative; flex: 1; }
@media (min-width: 640px) { .bp-idc-search { max-width: 320px; } } /* sm:max-w-xs */
.bp-idc-search .ico {
  position: absolute;
  inset-inline-start: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  color: var(--muted-foreground);
  pointer-events: none;
}
.bp-idc-search input { width: 100%; height: 40px; border-radius: 12px; padding-inline-start: 36px; } /* h-10 rounded-xl ps-9 */
.bp-idc-filters .select { height: 40px; border-radius: 12px; }
@media (min-width: 640px) {
  .bp-idc-filters .select.bp-idc-sel-class { width: 176px; }  /* sm:w-44 */
  .bp-idc-filters .select.bp-idc-sel-status { width: 160px; } /* sm:w-40 */
}

/* ---------- manage: student list — grid-cols-1 md:grid-cols-2 xl:grid-cols-3 ---------- */
.bp-idc-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 768px) { .bp-idc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1280px) { .bp-idc-grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- manage: student row card ----------
   flex items-center gap-3 rounded-2xl border bg-card p-3.5 shadow-sm */
.bp-idc-row {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--card);
  padding: 14px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: all 0.2s;
  min-width: 0; /* grid item must be allowed to shrink below nowrap content */
  max-width: 100%;
  overflow: hidden;
}
.bp-idc-row.off {
  border-color: color-mix(in srgb, var(--destructive) 30%, transparent);
  background: color-mix(in srgb, var(--destructive) 3%, var(--card));
}
.bp-idc-row .meta { min-width: 0; flex: 1; }
.bp-idc-row .nm { display: flex; align-items: center; gap: 8px; min-width: 0; }
.bp-idc-row .nm b { font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bp-idc-row .nm .badge { flex-shrink: 0; }
.bp-idc-row .sub {
  margin-top: 2px;
  font-size: 12px;
  color: var(--muted-foreground);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bp-idc-row .sid {
  margin-top: 2px;
  font-size: 11px;
  font-weight: 500;
  color: var(--muted-foreground);
  opacity: 0.8;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* row action buttons — h-8 rounded-lg px-2.5 text-xs, icons h-3.5 w-3.5 */
.bp-idc-btns { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
.bp-idc-btns .btn { height: 32px; border-radius: 8px; padding: 0 10px; font-size: 12px; }
.bp-idc-btns .btn .ico { width: 14px; height: 14px; }

/* unblock (outline emerald) — text-emerald-700 dark:text-emerald-400 */
.bp-idc-unblock { border-color: color-mix(in srgb, #059669 40%, transparent); color: #047857; }
.bp-idc-unblock:hover:not(:disabled) { background: color-mix(in srgb, #059669 10%, transparent); }
html.dark .bp-idc-unblock { color: #34d399; }

/* view modal: solid emerald unblock — bg-emerald-700 hover:bg-emerald-800 */
.btn.bp-idc-unblock-solid { background: var(--emerald-700, #047857); border-color: transparent; color: #fff; }
.btn.bp-idc-unblock-solid:hover:not(:disabled) { background: var(--emerald-800, #065f46); }

/* ---------- add-student modal form — grid-cols-1 gap-4 sm:grid-cols-2 ---------- */
.bp-idc-form-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 640px) { .bp-idc-form-grid { grid-template-columns: repeat(2, 1fr); } }