/* Tab-specific watermark styles */

/* Common watermark styles */
.tab-watermark {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none; /* Allow clicking through the watermark */
  opacity: 0.08; /* Very light watermark */
  z-index: 0; /* Ensure watermark stays behind content */
  overflow: hidden;
}

.watermark-icon {
  position: absolute;
  right: 10%;
  bottom: 10%;
  width: 200px;
  height: 200px;
}

/* Sample Preparation Watermark */
.samplePrep-watermark {
  background-color: rgba(200, 230, 255, 0.03);
}

.sample-prep-icon {
  color: var(--sample-prep-color, #2196F3);
}

.watermark-mortar {
  position: absolute;
  bottom: 20px;
  left: 60px;
  width: 80px;
  height: 50px;
  border-radius: 0 0 40px 40px;
  border: 3px solid currentColor;
  border-top: none;
}

.watermark-pestle {
  position: absolute;
  top: 10px;
  left: 90px;
  width: 20px;
  height: 100px;
  border-radius: 10px 10px 5px 5px;
  border: 3px solid currentColor;
  transform: rotate(-30deg);
}

.watermark-flask {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50px;
  height: 80px;
  border: 3px solid currentColor;
  border-radius: 0 0 25px 25px;
}

.watermark-flask::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 30px;
  border: 3px solid currentColor;
  border-bottom: none;
  border-radius: 10px 10px 0 0;
}

.watermark-funnel {
  position: absolute;
  top: 40px;
  right: 20px;
  width: 60px;
  height: 70px;
  border: 3px solid currentColor;
  border-top-width: 10px;
  clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%);
}

/* Instrumentation Watermark */
.instrumentation-watermark {
  background-color: rgba(255, 230, 200, 0.03);
}

.instrumentation-icon {
  color: var(--instrumentation-color, #FF9800);
}

.watermark-hplc {
  position: absolute;
  bottom: 20px;
  left: 10px;
  width: 180px;
  height: 100px;
  border: 3px solid currentColor;
  border-radius: 5px;
}

.watermark-module {
  position: absolute;
  width: 50px;
  height: 70px;
  border: 3px solid currentColor;
  border-radius: 5px;
  top: 15px;
}

.pump-module {
  left: 10px;
}

.column-module {
  left: 65px;
}

.detector-module {
  left: 120px;
}

.watermark-spectrometer {
  position: absolute;
  top: 10px;
  left: 50px;
  width: 100px;
  height: 60px;
  border: 3px solid currentColor;
  border-radius: 10px;
}

.watermark-spectrometer::before {
  content: '';
  position: absolute;
  top: 15px;
  left: 10px;
  width: 80px;
  height: 30px;
  border: 2px solid currentColor;
  border-radius: 5px;
}

/* Reagent Watermark */
.reagent-watermark {
  background-color: rgba(220, 255, 220, 0.03);
}

.reagent-icon {
  color: var(--reagent-color, #4CAF50);
}

.watermark-chemical {
  position: absolute;
  border: 3px solid currentColor;
}

.bottle1 {
  bottom: 20px;
  left: 10px;
  width: 40px;
  height: 80px;
  border-radius: 5px 5px 0 0;
}

.bottle1::before {
  content: '';
  position: absolute;
  top: -15px;
  left: 10px;
  width: 20px;
  height: 15px;
  border: 3px solid currentColor;
  border-bottom: none;
  border-radius: 10px 10px 0 0;
}

.bottle2 {
  bottom: 20px;
  left: 60px;
  width: 30px;
  height: 60px;
  border-radius: 15px 15px 5px 5px;
}

.erlenmeyer {
  bottom: 20px;
  left: 100px;
  width: 60px;
  height: 80px;
  clip-path: polygon(20% 0, 80% 0, 100% 100%, 0% 100%);
}

.volumetric {
  bottom: 20px;
  left: 150px;
  width: 40px;
  height: 100px;
  border-radius: 20px 20px 5px 5px;
}

.watermark-molecule {
  position: absolute;
  top: 10px;
  left: 70px;
  width: 100px;
  height: 100px;
}

.watermark-atom {
  position: absolute;
  width: 20px;
  height: 20px;
  border: 3px solid currentColor;
  border-radius: 50%;
}

.atom-1 { top: 40px; left: 40px; }
.atom-2 { top: 20px; left: 70px; }
.atom-3 { top: 40px; left: 100px; }
.atom-4 { top: 70px; left: 100px; }
.atom-5 { top: 90px; left: 70px; }
.atom-6 { top: 70px; left: 40px; }

.watermark-bond {
  position: absolute;
  width: 30px;
  height: 3px;
  background-color: currentColor;
}

.bond-1 { top: 30px; left: 55px; transform: rotate(45deg); }
.bond-2 { top: 30px; left: 85px; transform: rotate(-45deg); }
.bond-3 { top: 55px; left: 100px; transform: rotate(90deg); }
.bond-4 { top: 80px; left: 85px; transform: rotate(45deg); }
.bond-5 { top: 80px; left: 55px; transform: rotate(-45deg); }

/* Waste Watermark */
.waste-watermark {
  background-color: rgba(255, 220, 220, 0.03);
}

.waste-icon {
  color: var(--waste-color, #F44336);
}

.watermark-treatment {
  position: absolute;
  bottom: 20px;
  left: 30px;
  width: 140px;
  height: 120px;
}

.watermark-waste-container {
  position: absolute;
  bottom: 0;
  left: 10px;
  width: 70px;
  height: 80px;
  border: 3px solid currentColor;
  border-radius: 10px;
}

.watermark-waste-container::before {
  content: '';
  position: absolute;
  top: 10px;
  left: 10px;
  width: 50px;
  height: 20px;
  border-top: 3px dashed currentColor;
}

.watermark-filtration {
  position: absolute;
  bottom: 30px;
  right: 20px;
  width: 60px;
  height: 60px;
  border: 3px solid currentColor;
  border-radius: 50%;
}

.watermark-filtration::before {
  content: '';
  position: absolute;
  top: 15px;
  left: 15px;
  width: 30px;
  height: 30px;
  border: 3px dashed currentColor;
  border-radius: 50%;
}

.watermark-recycling {
  position: absolute;
  top: 20px;
  left: 60px;
  width: 80px;
  height: 80px;
}

.recycling-arrow {
  position: absolute;
  width: 40px;
  height: 40px;
  border: 3px solid currentColor;
  border-left: none;
  border-bottom: none;
  border-radius: 0 8px 0 0;
}

.arrow-1 {
  top: 0;
  left: 40px;
  transform: rotate(0deg);
}

.arrow-2 {
  top: 30px;
  left: 0;
  transform: rotate(120deg);
}

.arrow-3 {
  top: 30px;
  left: 60px;
  transform: rotate(240deg);
}

/* Results Watermark */
.results-watermark {
  background-color: rgba(230, 230, 250, 0.03);
}

.results-icon {
  color: var(--results-color, #9C27B0);
}

.watermark-report {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 100px;
  height: 140px;
  border: 3px solid currentColor;
  border-radius: 5px;
  background: linear-gradient(to bottom, transparent 20px, currentColor 20px, currentColor 21px, transparent 21px);
}

.report-line {
  position: absolute;
  left: 10px;
  height: 3px;
  background-color: currentColor;
}

.line-1 { top: 40px; width: 80px; }
.line-2 { top: 60px; width: 60px; }
.line-3 { top: 80px; width: 80px; }
.line-4 { top: 100px; width: 70px; }
.line-5 { top: 120px; width: 40px; }

.watermark-chart {
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 100px;
  height: 80px;
  border-bottom: 3px solid currentColor;
  border-left: 3px solid currentColor;
}

.chart-bar {
  position: absolute;
  bottom: 0;
  width: 20px;
  background-color: currentColor;
}

.bar-1 { left: 5px; height: 30px; }
.bar-2 { left: 30px; height: 60px; }
.bar-3 { left: 55px; height: 40px; }
.bar-4 { left: 80px; height: 70px; }

/* Saved Calculations Watermark */
.saved-watermark {
  background-color: rgba(240, 240, 240, 0.03);
}

.saved-icon {
  color: var(--saved-color, #607D8B);
}

.watermark-database {
  position: absolute;
  bottom: 20px;
  left: 20px;
  width: 100px;
  height: 80px;
  border: 3px solid currentColor;
  border-radius: 10px 10px 5px 5px;
}

.database-record {
  position: absolute;
  left: 10px;
  width: 80px;
  height: 15px;
  border: 2px solid currentColor;
  border-radius: 3px;
}

.record-1 { top: 15px; }
.record-2 { top: 35px; }
.record-3 { top: 55px; }

.watermark-folder {
  position: absolute;
  top: 30px;
  right: 30px;
  width: 80px;
  height: 60px;
  border: 3px solid currentColor;
  border-radius: 0 5px 5px 5px;
  clip-path: polygon(0 0, 40% 0, 50% 15%, 100% 15%, 100% 100%, 0 100%);
}

.folder-document {
  position: absolute;
  width: 50px;
  height: 40px;
  border: 2px solid currentColor;
  background-color: rgba(255, 255, 255, 0.5);
}

.doc-1 {
  top: 5px;
  left: 15px;
  transform: rotate(-5deg);
}

.doc-2 {
  top: 10px;
  left: 20px;
  transform: rotate(5deg);
}