/* PCB X-Ray Inspector - theme on top of Bootstrap 5.3 */

:root {
  --px-accent: #0891b2;
  --px-grad: linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%);
  --px-red: #ef4444;
  --px-green: #16a34a;
  --px-radius: 16px;
  --px-border: #e3e8f0;
  --px-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 10px 30px rgba(15, 23, 42, .07);
  --px-viewer-bg: #05080f;
  --bs-body-color: #1e293b;
}

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  min-height: 100vh;
  background:
    radial-gradient(900px 420px at 50% -120px, rgba(34, 211, 238, .14), transparent 70%),
    #f3f6fb;
}
.min-w-0 { min-width: 0; }
.link-accent { color: var(--px-accent); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- navbar ---------- */
.app-navbar { background: #0a1224; box-shadow: 0 1px 0 rgba(255, 255, 255, .06); }
.brand-logo { width: 34px; height: 34px; filter: drop-shadow(0 4px 12px rgba(34, 211, 238, .35)); }
.brand-title { color: #fff; font-size: 1.02rem; letter-spacing: .2px; }
.brand-sub { color: #8aa0c4; font-size: .72rem; margin-top: 3px; }

/* ---------- cards ---------- */
.app-card {
  background: #fff;
  border: 1px solid var(--px-border);
  border-radius: var(--px-radius);
  box-shadow: var(--px-shadow);
  padding: 1.25rem;
}
.card-title-bar { padding: .85rem 1.15rem; font-weight: 600; border-bottom: 1px solid var(--px-border); }

/* ---------- upload page ---------- */
.upload-container { max-width: 680px; }
.page-title { font-weight: 800; font-size: clamp(1.7rem, 3.2vw, 2.3rem); color: #0f172a; }
.page-lead { color: #5b6b82; font-size: 1.05rem; margin: 0; }

.dropzone {
  display: block; cursor: pointer; border-radius: 13px; overflow: hidden;
  border: 2px dashed rgba(8, 145, 178, .45); background: rgba(8, 145, 178, .04);
  transition: background .15s ease, border-color .15s ease;
}
.dropzone:hover, .dropzone.dragover { background: rgba(8, 145, 178, .1); border-color: var(--px-accent); }
.dropzone-empty { display: block; text-align: center; padding: 3.2rem 1rem; }
.drop-icon {
  display: inline-grid; place-items: center; width: 72px; height: 72px; border-radius: 20px;
  background: var(--px-grad); color: #fff; font-size: 2rem; box-shadow: 0 10px 24px rgba(37, 99, 235, .28);
}
.dropzone-preview { display: block; position: relative; background: var(--px-viewer-bg); }
.dropzone-preview img { display: block; width: 100%; max-height: 460px; object-fit: contain; }
.preview-bar {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; padding: .6rem .9rem; color: #e2e8f0; font-size: .88rem; font-weight: 600;
  background: linear-gradient(0deg, rgba(0, 0, 0, .82), transparent);
}
.change-link { flex: none; color: #67e8f9; }

.btn-detect {
  background: var(--px-grad); color: #fff; border: 0; font-weight: 700; border-radius: 12px;
  box-shadow: 0 10px 24px rgba(37, 99, 235, .28); transition: filter .12s ease, transform .12s ease;
}
.btn-detect:hover, .btn-detect:focus-visible { color: #fff; filter: brightness(1.08); transform: translateY(-1px); }
.btn-detect:disabled { background: #e2e8f0; color: #94a3b8; box-shadow: none; }

/* ---------- result page ---------- */
.result-container { max-width: 1140px; }
.verdict {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.1rem 1.4rem;
  padding: 1.25rem 1.4rem; border-radius: var(--px-radius); background: #fff;
  border: 1px solid var(--px-border); box-shadow: var(--px-shadow); border-left: 7px solid;
}
.verdict.is-bad { border-left-color: var(--px-red); }
.verdict.is-good { border-left-color: var(--px-green); }
.verdict-icon {
  width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; flex: none;
  font-size: 2rem; color: #fff;
}
.is-bad .verdict-icon { background: linear-gradient(135deg, #f87171, #dc2626); box-shadow: 0 10px 24px rgba(239, 68, 68, .35); }
.is-good .verdict-icon { background: linear-gradient(135deg, #4ade80, #16a34a); box-shadow: 0 10px 24px rgba(34, 197, 94, .3); }
.verdict-title { font-size: 1.9rem; font-weight: 900; letter-spacing: .02em; line-height: 1.1; }
.is-bad .verdict-title { color: #dc2626; }
.is-good .verdict-title { color: var(--px-green); }
.verdict-text { color: #475569; margin-top: .2rem; }
.verdict-file { font-family: SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; color: #0f172a; word-break: break-all; }
.verdict-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.verdict-actions .btn { border-radius: 11px; font-weight: 600; }

.result-image { background: var(--px-viewer-bg); }
.result-image img { display: block; width: 100%; max-width: 760px; margin: 0 auto; }

.defect-item { display: flex; align-items: center; gap: .9rem; padding: .7rem; border-radius: 13px; background: #f8fafc; border: 1px solid var(--px-border); }
.defect-item + .defect-item { margin-top: .75rem; }
.defect-crop { width: 104px; height: 104px; border-radius: 10px; object-fit: cover; background: var(--px-viewer-bg); flex: none; }
.defect-title { font-weight: 700; margin-bottom: .25rem; }
.defect-num { display: inline-block; min-width: 2rem; padding: .05rem .4rem; border-radius: 7px; background: var(--px-red); color: #fff; font-size: .82rem; text-align: center; }
.defect-meta { font-size: .85rem; color: #5b6b82; }

/* ---------- loading overlay ---------- */
.loading-overlay {
  position: fixed; inset: 0; z-index: 2000; display: none; flex-direction: column; align-items: center; justify-content: center;
  background: rgba(5, 9, 20, .8); backdrop-filter: blur(6px); color: #e2e8f0;
}
.loading-overlay.show { display: flex; }
.scanner {
  position: relative; width: 104px; height: 104px; border-radius: 22px; overflow: hidden;
  display: grid; place-items: center; font-size: 2.5rem; color: #22d3ee;
  background: radial-gradient(circle at 50% 50%, #12203d, #070d1c); border: 1px solid rgba(34, 211, 238, .35);
  box-shadow: 0 0 40px rgba(34, 211, 238, .25);
}
.scanner-beam {
  position: absolute; left: 0; right: 0; height: 34%; top: -34%;
  background: linear-gradient(180deg, transparent, rgba(34, 211, 238, .45), transparent);
  animation: scan 1.3s ease-in-out infinite;
}
@keyframes scan { 0% { top: -34%; } 100% { top: 100%; } }

@media (max-width: 575.98px) {
  .verdict-actions, .verdict-actions .btn { width: 100%; }
  .dropzone-empty { padding: 2.4rem 1rem; }
}