/* =========================
   AG CLAIMSWORKS – FINAL CSS
   PRINT-SAFE / PDF-SAFE
   ========================= */

:root{
  --bg:#0a0a10;
  --card:#15151f;
  --border:#2a2a3a;
  --text:#f5f6ff;
  --muted:#b7b9d6;
  --gold:#d7b24c;
  --blue:#1f6feb;
  --danger:#b00020;
  --success:#1db954;
  --radius:14px;
}

/* RESET */
*{
  box-sizing:border-box;
  -webkit-print-color-adjust: exact !important;
  print-color-adjust: exact !important;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, Helvetica, sans-serif;
  line-height:1.5;
}

/* LAYOUT */
.wrap{
  max-width:960px;
  margin:0 auto;
  padding:20px;
}

.stack{
  display:flex;
  flex-direction:column;
  gap:16px;
}

/* PROGRESS BAR */
.progress-bar-wrap{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:12px 18px;
  margin-bottom:16px;
  position:sticky;
  top:10px;
  z-index:50;
}

.progress-label{
  font-size:12px;
  color:var(--muted);
  margin-bottom:6px;
  letter-spacing:.05em;
  text-transform:uppercase;
}

.progress-label span{
  color:var(--gold);
  font-weight:700;
}

.progress-track{
  height:6px;
  border-radius:3px;
  background:#1a1a2a;
  overflow:hidden;
}

.progress-fill{
  height:100%;
  border-radius:3px;
  background:linear-gradient(90deg, var(--blue), var(--gold));
  transition:width .4s ease;
}

/* CARDS */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px;
}

.card.title{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  flex-wrap:wrap;
}

.brand{
  display:flex;
  gap:12px;
  align-items:center;
}

.brand-logo{
  width:72px;
  height:72px;
  border-radius:50%;
  object-fit:contain;
  flex-shrink:0;
}

.badge{
  background:var(--blue);
  color:#fff;
  padding:8px 12px;
  border-radius:999px;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  white-space:nowrap;
}

.titles h1{
  margin:0;
  font-size:22px;
}

.sub{
  margin-top:6px;
  color:var(--muted);
  font-size:13px;
  max-width:520px;
}

/* BUTTONS */
.actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.btn{
  border:none;
  border-radius:10px;
  padding:10px 14px;
  font-weight:700;
  cursor:pointer;
  font-size:13px;
  transition:opacity .15s, transform .1s;
}

.btn:hover{
  opacity:.88;
}

.btn:active{
  transform:scale(.97);
}

.btn.primary{
  background:var(--gold);
  color:#111;
}

.btn.secondary{
  background:#2a2a3a;
  color:#fff;
  border:1px solid #3a3a52;
}

.btn-sm{
  padding:6px 12px;
  font-size:12px;
  margin-top:10px;
}

/* HEADERS */
h2{
  margin:0 0 10px;
  font-size:14px;
  letter-spacing:.08em;
  text-transform:uppercase;
  border-left:4px solid var(--gold);
  padding-left:10px;
}

/* TEXT */
.p{ margin:0 0 10px; }
.note{
  font-size:13px;
  color:var(--muted);
  font-style:italic;
  margin-bottom:10px;
}

/* REQUIRED FIELD INDICATOR */
.req{
  color:var(--danger);
  font-weight:700;
}

/* FIELD HELP TEXT */
.field-help{
  display:block;
  font-size:11px;
  color:#7f82a8;
  margin-top:3px;
  font-weight:400;
}

/* RADIO LABEL */
.radio-label{
  font-size:12px;
  color:var(--muted);
  margin-right:8px;
  text-transform:uppercase;
  letter-spacing:.05em;
}

/* VALIDATION SUMMARY */
.validation-summary{
  border:2px solid var(--danger);
  background:#1a0a0f;
}

.validation-summary h2{
  color:var(--danger);
  border-left-color:var(--danger);
}

.validation-summary ul{
  margin:0;
  padding-left:20px;
}

.validation-summary li{
  font-size:13px;
  color:#ff6b6b;
  margin:4px 0;
  cursor:pointer;
}

.validation-summary li:hover{
  text-decoration:underline;
}

/* INPUT VALIDATION STATES */
input:invalid:not(:placeholder-shown):not(:focus),
select:invalid:not(:focus),
textarea:invalid:not(:placeholder-shown):not(:focus){
  border-color:var(--danger);
}

input.field-error,
select.field-error,
textarea.field-error{
  border-color:var(--danger) !important;
  box-shadow:0 0 0 2px rgba(176,0,32,.25);
}

/* LISTS */
.ul{
  margin:8px 0 0 18px;
}
.ul li{
  margin:6px 0;
}

/* GRIDS */
.grid2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.grid3{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:12px;
}

.span2{ grid-column:span 2; }

/* FORMS */
label{
  font-size:13px;
  color:var(--muted);
  display:block;
}

input, select, textarea{
  width:100%;
  margin-top:6px;
  padding:12px;
  border-radius:10px;
  border:1px solid #3a3a52;
  background:#0f0f18;
  color:#fff;
  font-family:inherit;
  font-size:14px;
  transition:border-color .2s, box-shadow .2s;
}

input:focus, select:focus, textarea:focus{
  outline:none;
  border-color:var(--gold);
  box-shadow:0 0 0 2px rgba(215,178,76,.2);
}

textarea{
  resize:vertical;
}

.full-width-textarea{
  width:100%;
}

input::placeholder, textarea::placeholder{
  color:#7f82a8;
}

.checks, .radios{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  padding:10px;
  border-radius:10px;
  border:1px solid #3a3a52;
  background:#0f0f18;
  align-items:center;
}

.check, .radio{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
}

/* ACKNOWLEDGMENT CHECKBOX */
.ack{
  padding:12px;
  border-radius:10px;
  border:1px solid #3a3a52;
  background:#0f0f18;
}

/* DISCLAIMER */
.card.danger{
  border:2px solid var(--danger);
}

/* PHOTO UPLOAD */
.photo-upload-area{
  margin-bottom:12px;
}

.upload-trigger{
  cursor:pointer;
}

.upload-placeholder{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:30px;
  border:2px dashed #3a3a52;
  border-radius:var(--radius);
  color:var(--muted);
  font-size:14px;
  transition:border-color .2s, background .2s;
}

.upload-placeholder:hover{
  border-color:var(--gold);
  background:rgba(215,178,76,.04);
}

.upload-icon{
  font-size:28px;
  font-weight:700;
  color:var(--gold);
  line-height:1;
}

.photo-gallery{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));
  gap:10px;
}

.photo-thumb{
  position:relative;
  border-radius:10px;
  overflow:hidden;
  border:1px solid var(--border);
  aspect-ratio:1;
}

.photo-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.photo-thumb .photo-remove{
  position:absolute;
  top:4px;
  right:4px;
  background:rgba(0,0,0,.7);
  color:#fff;
  border:none;
  border-radius:50%;
  width:24px;
  height:24px;
  font-size:14px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}

.photo-thumb .photo-remove:hover{
  background:var(--danger);
}

.photo-thumb .photo-caption{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  background:rgba(0,0,0,.65);
  color:#fff;
  font-size:10px;
  padding:4px 6px;
  text-align:center;
}

/* COMPARABLE PRODUCTS */
.comparable-row{
  margin-bottom:8px;
}

.comparable-row .remove-comparable{
  background:none;
  border:none;
  color:var(--danger);
  cursor:pointer;
  font-size:18px;
  padding:0 4px;
  line-height:1;
}

/* MODAL OVERLAY */
.modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.8);
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  overflow-y:auto;
}

.modal-content{
  background:#fff;
  color:#111;
  border-radius:var(--radius);
  max-width:850px;
  width:100%;
  max-height:90vh;
  overflow-y:auto;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
}

.modal-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:16px 24px;
  border-bottom:1px solid #ddd;
  position:sticky;
  top:0;
  background:#fff;
  z-index:10;
}

.modal-header h2{
  color:#111;
  font-size:16px;
}

.modal-actions{
  display:flex;
  gap:8px;
}

/* PREVIEW BODY */
.preview-body{
  padding:32px;
  font-size:13px;
  line-height:1.65;
}

.preview-body .report-header{
  text-align:center;
  border-bottom:3px solid #111;
  padding-bottom:16px;
  margin-bottom:24px;
}

.preview-body .report-header .report-logo{
  width:100px;
  height:100px;
  object-fit:contain;
  margin:0 auto 10px;
  display:block;
}

.preview-body .report-header h1{
  font-size:20px;
  margin:0 0 4px;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.preview-body .report-header .report-subtitle{
  font-size:12px;
  color:#666;
  text-transform:uppercase;
  letter-spacing:.1em;
}

.preview-body .report-header .report-meta{
  margin-top:8px;
  font-size:12px;
  color:#444;
}

.preview-body .report-section{
  margin-bottom:20px;
}

.preview-body .report-section h3{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
  border-bottom:2px solid #333;
  padding-bottom:4px;
  margin:0 0 10px;
  color:#111;
}

.preview-body .report-table{
  width:100%;
  border-collapse:collapse;
  margin-bottom:8px;
}

.preview-body .report-table td{
  padding:5px 8px;
  border:1px solid #ddd;
  font-size:12px;
  vertical-align:top;
}

.preview-body .report-table td:first-child{
  font-weight:600;
  width:40%;
  background:#f5f5f5;
  color:#333;
}

.preview-body .report-table td:last-child{
  color:#111;
}

.preview-body .report-disclaimer{
  background:#fff5f5;
  border:1px solid #e0b0b0;
  border-radius:6px;
  padding:12px;
  margin:16px 0;
  font-size:11px;
  color:#800;
}

.preview-body .report-footer{
  text-align:center;
  border-top:none;
  padding-top:12px;
  margin-top:24px;
}

.preview-body .report-footer .report-footer-img{
  width:100%;
  height:auto;
  display:block;
}

.preview-body .report-photos{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));
  gap:10px;
  margin-top:10px;
}

.preview-body .report-photos img{
  width:100%;
  border-radius:4px;
  border:1px solid #ddd;
}

.preview-body .report-photos .photo-cap{
  font-size:10px;
  color:#666;
  text-align:center;
  margin-top:2px;
}

.preview-body .result-badge{
  display:inline-block;
  padding:4px 12px;
  border-radius:4px;
  font-weight:700;
  font-size:13px;
}

.preview-body .result-badge.positive{
  background:#e6f4ea;
  color:#137333;
}

.preview-body .result-badge.inconclusive{
  background:#fef7e0;
  color:#7f6003;
}

.preview-body .methodology-list{
  list-style:none;
  padding:0;
  margin:4px 0;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.preview-body .methodology-list li{
  background:#eef;
  padding:2px 10px;
  border-radius:3px;
  font-size:11px;
}

/* FOOTER */
.foot{
  text-align:center;
  font-size:12px;
  color:var(--muted);
  line-height:1.8;
}

.footer-img{
  width:100%;
  max-width:700px;
  height:auto;
  margin:0 auto 6px;
  display:block;
  opacity:.7;
}

/* PDF FIXED HEADER & FOOTER (hidden on screen, visible on print) */
.pdf-fixed-header,
.pdf-fixed-footer{
  display:none;
}

/* On-screen preview: show a stylized version of the header/footer so user sees what will print */
.preview-body .pdf-fixed-header{
  display:flex !important;
  align-items:center;
  gap:10px;
  background:#f8f8f8;
  border-bottom:2px solid #222;
  padding:10px 12px;
  margin:-32px -32px 20px -32px;
  border-radius:14px 14px 0 0;
}

.preview-body .pdf-header-logo{
  width:36px;
  height:36px;
  object-fit:contain;
  flex-shrink:0;
}

.preview-body .pdf-header-text{
  flex:1;
  font-size:11px;
  color:#333;
}

.preview-body .pdf-header-company{
  font-weight:800;
  text-transform:uppercase;
  font-size:13px;
  color:#111;
  letter-spacing:.05em;
}

.preview-body .pdf-header-sep{
  margin:0 5px;
  color:#999;
}

.preview-body .pdf-header-title{
  font-size:10px;
  color:#555;
  text-transform:uppercase;
  letter-spacing:.05em;
}

.preview-body .pdf-header-meta{
  font-size:9px;
  color:#888;
  white-space:nowrap;
}

.preview-body .pdf-fixed-footer{
  display:block !important;
  background:#fff;
  padding:0;
  margin:20px -32px -32px -32px;
  border-radius:0 0 14px 14px;
}

.preview-body .pdf-fixed-footer .pdf-footer-img{
  width:100%;
  height:auto;
  display:block;
  border-radius:0 0 14px 14px;
}

/* HTML-based footer in preview */
.preview-body .pdf-footer-html{
  padding:8px 24px 12px 24px;
}

.preview-body .pdf-footer-line{
  border-top:2px solid #1a5c6b;
  margin-bottom:6px;
}

.preview-body .pdf-footer-body{
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}

.preview-body .pdf-footer-text{
  text-align:center;
  flex:1;
}

.preview-body .pdf-footer-copyright{
  font-size:10px;
  color:#333;
  letter-spacing:.02em;
}

.preview-body .pdf-footer-page{
  font-size:9px;
  color:#555;
  margin-top:2px;
}

.preview-body .pdf-footer-seal{
  width:60px;
  height:60px;
  object-fit:contain;
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
}

/* Page number placeholders in preview show sample numbers */
.preview-body .page-num::after{
  content:"1";
}
.preview-body .page-total::after{
  content:"1";
}

.preview-body .pdf-footer-left{
  display:none;
}

.preview-body .pdf-footer-center{
  display:none;
}

.preview-body .pdf-footer-right{
  display:none;
}

/* TOAST NOTIFICATIONS */
.toast{
  position:fixed;
  bottom:24px;
  right:24px;
  background:var(--card);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:10px;
  padding:12px 20px;
  font-size:13px;
  z-index:2000;
  box-shadow:0 8px 30px rgba(0,0,0,.4);
  animation:slideIn .3s ease;
}

.toast.success{
  border-left:4px solid var(--success);
}

.toast.error{
  border-left:4px solid var(--danger);
}

@keyframes slideIn{
  from{ opacity:0; transform:translateY(20px); }
  to{ opacity:1; transform:translateY(0); }
}

/* MOBILE */
@media(max-width:820px){
  .card.title{ flex-direction:column; }
  .actions{ justify-content:flex-start; }
  .grid2,.grid3{ grid-template-columns:1fr; }
  .span2{ grid-column:auto; }
  .progress-bar-wrap{ position:static; }
  .modal-content{ max-height:100vh; border-radius:0; }
  .preview-body{ padding:16px; }
  .preview-body .pdf-fixed-header{ margin:-16px -16px 16px -16px; border-radius:0; }
  .preview-body .pdf-fixed-footer{ margin:16px -16px -16px -16px; border-radius:0; }
  .preview-body .pdf-footer-html{ padding:8px 12px 10px 12px; }
  .preview-body .pdf-header-text{ flex-direction:column; }
}

/* =========================
   PRINT / PDF – PROFESSIONAL
   ========================= */
@media print{
  body{
    background:#ffffff !important;
    color:#111 !important;
    font-size:11px !important;
  }

  .wrap{
    max-width:100% !important;
    padding:0 !important;
  }

  .progress-bar-wrap,
  .btn, .actions,
  .upload-trigger,
  .photo-remove,
  .btn-sm,
  #btnAddComparable,
  .field-help,
  .req,
  .validation-summary{
    display:none !important;
  }

  .card{
    background:#fff !important;
    color:#111 !important;
    border:1px solid #ccc !important;
    border-radius:6px !important;
    padding:12px !important;
    page-break-inside:avoid;
    break-inside:avoid;
  }

  .card.title{
    border:none !important;
    padding:0 !important;
    text-align:center;
    display:block !important;
  }

  .brand{
    justify-content:center;
    flex-direction:column;
    align-items:center;
  }

  .brand-logo{
    width:80px !important;
    height:80px !important;
    margin-bottom:6px;
  }

  .badge{
    background:#111 !important;
    color:#fff !important;
  }

  .titles h1{
    font-size:18px !important;
  }

  h2{
    color:#111 !important;
    border-left:3px solid #111 !important;
    font-size:11px !important;
    margin-bottom:6px !important;
  }

  label{
    color:#555 !important;
    font-size:10px !important;
  }

  input, select, textarea{
    background:#fff !important;
    color:#111 !important;
    border:1px solid #bbb !important;
    padding:6px 8px !important;
    font-size:11px !important;
    border-radius:4px !important;
  }

  .checks, .radios{
    background:#fff !important;
    border:1px solid #bbb !important;
    padding:6px !important;
  }

  .card.danger{
    border:2px solid #b00020 !important;
  }

  .note{
    color:#666 !important;
  }

  .foot{
    color:#999 !important;
    font-size:9px !important;
  }

  .footer-img{
    width:100% !important;
    max-width:100% !important;
    opacity:1 !important;
  }

  /* Photo gallery in print */
  .photo-gallery{
    grid-template-columns:repeat(3, 1fr) !important;
  }

  .photo-thumb{
    break-inside:avoid;
  }

  .stack{
    gap:10px !important;
  }

  .grid2{
    grid-template-columns:1fr 1fr !important;
    gap:8px !important;
  }

  .grid3{
    grid-template-columns:1fr 1fr 1fr !important;
    gap:8px !important;
  }
}

/* PRINT-ONLY: Preview modal print */
@media print{
  @page{
    margin: 100px 40px 80px 40px;
  }

  .modal-overlay{
    position:static !important;
    background:none !important;
    padding:0 !important;
  }

  .modal-content{
    box-shadow:none !important;
    max-height:none !important;
    overflow:visible !important;
  }

  .modal-header{
    display:none !important;
  }

  .preview-body{
    padding:0 !important;
  }

  /* Ensure report sections don't break awkwardly */
  .preview-body .report-section{
    page-break-inside:avoid;
    break-inside:avoid;
  }

  /* The on-screen preview margins need to be reset for print */
  .preview-body .pdf-fixed-header{
    margin:0 !important;
    border-radius:0 !important;
    padding:0 8px 6px 8px !important;
    background:#fff !important;
  }

  .preview-body .pdf-fixed-footer{
    margin:0 !important;
    border-radius:0 !important;
    background:#fff !important;
    padding:0 !important;
  }

  /* ========================================
     REPEATING PDF HEADER – appears on every page
     ======================================== */
  .pdf-fixed-header{
    display:flex !important;
    align-items:center;
    gap:10px;
    position:fixed;
    top:0;
    left:0;
    right:0;
    height:60px;
    background:#fff !important;
    border-bottom:2px solid #222;
    padding:0 8px 6px 8px;
    z-index:9999;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .pdf-header-logo{
    width:40px;
    height:40px;
    object-fit:contain;
    flex-shrink:0;
  }

  .pdf-header-text{
    flex:1;
    font-size:10px;
    color:#333;
    letter-spacing:.03em;
  }

  .pdf-header-company{
    font-weight:800;
    text-transform:uppercase;
    font-size:12px;
    color:#111;
    letter-spacing:.06em;
  }

  .pdf-header-sep{
    margin:0 5px;
    color:#999;
  }

  .pdf-header-title{
    font-size:9px;
    color:#555;
    text-transform:uppercase;
    letter-spacing:.05em;
  }

  .pdf-header-meta{
    font-size:8px;
    color:#888;
    white-space:nowrap;
  }

  /* ========================================
     REPEATING PDF FOOTER – appears on every page
     ======================================== */
  .pdf-fixed-footer{
    display:block !important;
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    height:auto;
    max-height:70px;
    background:#fff !important;
    padding:0;
    z-index:9999;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .pdf-footer-html{
    padding:4px 20px 6px 20px;
  }

  .pdf-footer-line{
    border-top:2px solid #1a5c6b;
    margin-bottom:4px;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .pdf-footer-body{
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
  }

  .pdf-footer-text{
    text-align:center;
    flex:1;
  }

  .pdf-footer-copyright{
    font-size:8px;
    color:#333;
    letter-spacing:.02em;
  }

  .pdf-footer-page{
    font-size:7px;
    color:#555;
    margin-top:1px;
  }

  .pdf-footer-seal{
    width:50px;
    height:50px;
    object-fit:contain;
    position:absolute;
    right:0;
    top:50%;
    transform:translateY(-50%);
  }

  /* Page numbers via CSS counters for print */
  .page-num::after{
    content: counter(page) !important;
  }

  .page-total::after{
    content: counter(pages) !important;
  }

  .pdf-footer-img{
    display:none !important;
  }

  .pdf-footer-left{
    display:none;
  }

  .pdf-footer-center{
    display:none;
  }

  .pdf-footer-right{
    display:none;
  }
}