/*Written & Copyrighted by DenaCopy.be - Print.Brussels
Copying of the code is not allowed without authorization.
You can contact us on info@print.brussels*/

:root { --bg:grey; --card:rgba(0,0,0,.69); --muted:#94a3b8; --ok:#16a34a; --warn:#dc2626; --accent:#60a5fa; --midwarn:#facc15; --dc-orange:#ff7a00; --dc-orange-dark:#cc5f00; }

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font:14px/1.5 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans";background:var(--bg);color:#e5e7eb}
header{padding:16px 20px;border-bottom:1px solid #1f2937;background: linear-gradient(135deg, var(--dc-orange), var(--dc-orange-dark));position:sticky;top:0;z-index:9999}
h1{margin:0;font-size:18px;letter-spacing:.2px}
.opc-title{z-index:999;}
.opc-title a{color:white !important}
.opc-badge{font-weight:800; top:8px; right:8px; border-radius:999px;position:absolute}
.row{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px}
.card{background:var(--card);border:1px solid #1f2937;border-radius:14px;padding:14px}
#infoSizesList, #BWColorList, #SizeRangesList, #BleedRangesList, #LowDpiRangesList{background:var(--card);border:1px solid #1f2937;border-radius:14px;padding:14px}
label{display:block;font-weight:600;margin-bottom:6px;color:#cbd5e1}
input[type="number"]{width:110px}
input,button,select{background:#0b1220;color:#e5e7eb;border:1px solid #334155;border-radius:10px;padding:10px 12px}
button{cursor:pointer}
button.primary{background:linear-gradient(180deg,#1e293b,#0f172a);border-color:#334155;font-weight:bold;}
button:disabled{opacity:.33;cursor:not-allowed}
.grid{display:grid;grid-template-columns:360px 1fr;gap:16px;padding:16px}
@media (max-width: 900px){ .grid{grid-template-columns:1fr} .hideonmobile{display:none} }
.panel{display:flex;flex-direction:column;gap:12px;z-index:999}
.summary{display:grid;grid-template-columns:1fr auto auto;gap:1px;align-items:center}
.badge{padding:4px 8px;border-radius:999px;font-size:12px;border:1px solid #334155;background:#0c1322;color:#cbd5e1}
.badge.warn{border-color:#7f1d1d;color:#fecaca;background:#2a0b0b}

.badge.mid{border-color:#7a5f00;color:#fef9c3;background:#3a2f00}
.log{font-family:ui-monospace,monospace;background:#0a0f18;border-radius:10px;padding:12px;border:1px dashed #243042;max-height:260px;overflow:auto}
.pageCard{background:#0a1018;border:1px solid #1d2635;border-radius:16px;margin-bottom:14px}
.pageCard > summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:0px solid #152033}
.pageCard > summary::-webkit-details-marker{display:none}
.pageHead h3{margin:0;font-size:18px;font-weight:700}
.pageHead.low150 h3{color:black}
.pageHead.low300 h3{color:black}
.pageCard.low150{background:#dc2626}
.pageCard.low300{background:#facc15}
.pageStats{font-size:12px;color:#fff;font-weight:bold;margin-left:11px;margin-top:-1px}
.pageStats.low150{color:var(--bg)}
.pageStats.low300{color:var(--bg)}

.stageWrap{position:relative;background:#0a1018}
.stage{width:100%;display:block;background:#0b1220;border-bottom-left-radius:16px;border-bottom-right-radius:16px}
/* Ensure overlay sits above canvas; highlights below dotted line; dotted line on top */
.overlay{position:absolute;left:0;top:0;right:0;bottom:0;pointer-events:none;z-index:1}
.hl{position:absolute;border:2px solid var(--warn);background:rgba(220,38,38,.15);backdrop-filter: blur(1px);z-index:10}
.legend{font-size:12px;color:#9fb3ce}
.footer{padding:12px 16px;color:#93a4ba;border-top:1px solid #1f2a3c;background:black;display:flex;gap:10px;flex-wrap:wrap;position:fixed;width:100%;bottom:0;z-index:9999}
.footer2{padding:12px 16px;color:#93a4ba;border-top:1px solid #1f2a3c;background:black;display:flex;gap:10px;flex-wrap:wrap;visibility:hidden}
.pill{padding:6px 10px;border:1px solid #334155;border-radius:999px}
a{color:var(--accent)}
.table{width:100%;border-collapse:collapse;font-size:13px}
.table th,.table td{border-bottom:1px solid #1f2a3c;padding:6px 4px;text-align:left}
.small{font-size:12px;color:#fff}
.smaller{font-size:10px;color:#fff}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 10px;}
.kv dt{color:#fff}
.kv dd{margin:0}
.kvv{padding-left:15px}
.badge-mini{display:inline-block;padding:2px 6px;border:1px solid #334155;border-radius:999px;font-size:11px;background:#cbd5e1;color:#0c1322}

#filter150 {background:var(--warn);color:black;font-size:13px}
#filter300 {background:var(--midwarn);color:black;font-size:13px}

/* Ink badge severity */
.badge-mini.ink-ok    { border-color:#134e1f; background:#062313; color:#bbf7d0; }
.badge-mini.ink-mid   { border-color:#713f12; background:#2a1a05; color:#fde68a; }
.badge-mini.ink-warn  { border-color:#7f1d1d; background:#2a0c0c; color:#fecaca; }

/* TAC overlay boxes (dotted) */
.overlay .tacBox{
  position:absolute;
  border: 2px dotted rgba(255,255,255,0.9);
  border-radius: 4px;
  pointer-events:none;
}

.overlay .tacBox.tac-mid{
  background: rgba(250,204,21,0.10); /* yellow-ish */
  border-color: rgba(250,204,21,0.95);
}

.overlay .tacBox.tac-warn{
  background: rgba(220,38,38,0.10); /* red-ish */
  border-color: rgba(220,38,38,0.95);
}

.overlay .tacBox .tacLbl{
  position:absolute;
  left:0;
  top:-1.2em;
  font-size:11px;
  color:#fff;
  background: rgba(0,0,0,0.6);
  padding:1px 3px;
  border-radius:3px;
  white-space:nowrap;
}



/* Dotted TrimBox overlay (now highest z-index) */
.trimLine{
  position:absolute;
  border:2px dotted rgba(255,255,255,.9);
  border-radius:2px;
  pointer-events:none;
  box-shadow: 0 0 0 1px rgba(0,0,0,.15) inset;
  z-index:9999;
}

/* click-to-filter */
.filter-link { cursor: pointer; text-decoration: underline; font-weight:bold}
.filter-link.active { color: var(--accent); }

/* keeps a text chunk together: either fits on the current line or moves as a whole */
.nowrap-chunk{ display:inline-block; white-space:nowrap; }

/* Welcome panel on the right */
#welcome{max-width:920px;margin:0 auto}

/* Welcome 3-column grid */
#welcome .lang{
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
#welcome .lang > *{ min-width: 0; overflow: hidden; }
#welcome, #welcome * { -webkit-text-size-adjust: 100%; }

@media (min-width: 700px){
  #welcome .lang{grid-template-columns:1fr 1fr 1fr}
}
#welcome h2{margin:0 0 8px 0;font-size:18px}
#welcome h3{margin:8px 0 6px 0;font-size:14px;color:#cbd5e1}
#welcome ul{margin:0 0 8px 16px;padding:0}
#welcome li{margin:0 0 4px 0}
#file {width:330px}

.welcome-features{ display:grid; gap:14px; }
.welcome-features .feat-col ul{ margin:0 0 6px 18px; padding:0; }
.welcome-features .feat-col li{ margin:3px 0; }
.welcome-steps{ margin-top:10px; font-size:13px; opacity:.95; }
.welcome-steps ol{ margin:0 0 0 18px; padding:0; }
@media (min-width: 700px){ .welcome-features{ grid-template-columns:1fr 1fr 1fr; } }

/* Status tints for the DPI Result card */
.card.status-ok   { background:green; border-color:#134e1f; }
.card.status-mid  { background:#3a2f00; border-color:#7a5f00; }
.card.status-warn { background:darkred !important; border-color:#7f1d1d !important; }
.card.status-warn-font { background:darkred !important; border-color:#7f1d1d !important; }

/* shows a visual gap after commas but won't be copied */
.nocopy-gap{
  user-select: none;
  -webkit-user-select: none;
  display: inline-block;
  width: .35em;   /* visual gap size */
}


@media print {
   main {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
	filter: invert(1) saturate(25%) ;
  } 
  .print-hide {display:none}
  .print-display {display:inline !important}
  
  #filter150 {color:white}
  #filter300 {color:white}
  #file {position:absolute;width:82.25%;margin-top:-32px;margin-left:66.9px;background:grey}
  
  input[type="file"]::-webkit-file-upload-button {
  display: none;   /* Chrome, Edge, Safari */}
  
  input[type="file"]::file-selector-button {
  display: none;   /* Newer spec */}
  
  #lowDpiFilters{position:absolute !important;right:40px;margin-top:-40px !important}
  .pageCard.low150, .pageCard.low300, .primary, .card.status-ok, .card.status-mid, .card.status-warn{filter: invert(1) saturate(400%);}
  header {
    position: fixed;
	height:55px;
	width:150% !important;
    top: 0px;
    left: 0;
    right: 0;
	margin-bottom:0px;
    z-index: 9999;
	-webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  .footer {
    position: fixed;
	height:40px;
    bottom: -5px;
    left: 0;
    right: 0;
	margin-top:-33px;
    display: flex !important;
    visibility: visible !important;
    z-index: -9999;
  }
  .footer2 {
    position: sticky;
	height:40px;
    bottom: -5px;
    left: 0;
    right: 0;
	margin-top:-33px;
    display: flex !important;
    visibility: visible !important;
    z-index: -9999;
  }
  #pages {
    margin-top: 0 !important;
    padding-top: 69px !important;
	padding-bottom:69px !important;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }
  main {
    margin-top: 60px;
    margin-bottom: 140px;
  }
  #welcome { display: none !important; }
  video {position:fixed !important; height:100% !important}
  @page { margin: 12mm; }
  .pdfPageBreak {
    page-break-before:always;margin-top:69px !important;
  }
  #infoSizesList {
    margin-top: 0 !important;
    padding-top: 69px !important;
	padding-bottom: 69px !important;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    display: block;
  }
  #infoSizesList table { border-collapse: separate !important; }
  #infoSizesList tr { break-inside: avoid; page-break-inside: avoid; }
  .pageStats .nowrap-chunk { display: block !important; white-space: nowrap; margin-top: 2px; } 
    
  .print-dt-trim {position:absolute !important;margin-top:192px;margin-left:350px !important}
  .print-dd-trim {position:absolute !important;margin-top:192px !important;margin-left:481px !important;}
  .print-dt-rgb {position:absolute !important;margin-top:168px;margin-left:350px !important}
  .print-dd-rgb {position:absolute !important;margin-top:168px !important;margin-left:481px !important;width:150px;max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  
}
  .pageCard.low150 { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  .pageCard.low300 { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  .pill{display:none};