* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: Arial, sans-serif;
  background: #f5f5f5;
  padding: 10px;
  padding-bottom: 200px;
  color: #333;
  font-size: 12px;
  line-height: 1.4;
}

header {
  background: #1a3a5c;
  color: white;
  padding: 15px 20px;
  margin-bottom: 15px;
  border-radius: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

header h1 { font-size: 20px; }
header .subtitle { font-size: 11px; opacity: 0.9; }

main {
  max-width: 1200px;
  margin: 0 auto;
  background: white;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

footer {
  text-align: center;
  color: #999;
  margin-top: 30px;
  padding: 15px;
  font-size: 11px;
}

/* TABS */
.tabs {
  display: flex;
  gap: 5px;
  margin-bottom: 20px;
  border-bottom: 3px solid #1a3a5c;
  flex-wrap: wrap;
}

.tab-btn {
  padding: 10px 18px;
  border: none;
  background: #e0e0e0;
  cursor: pointer;
  font-weight: bold;
  font-size: 13px;
  border-radius: 4px 4px 0 0;
}

.tab-btn.active {
  background: #1a3a5c;
  color: white;
}

.tab-btn:hover {
  background: #0d1f3f;
  color: white;
}

.tab-content { display: none; }
.tab-content.active { display: block; }

/* SECTIONS */
.section-title {
  background: #1a3a5c;
  color: white;
  padding: 6px 10px;
  margin: 15px 0 8px 0;
  font-weight: bold;
  font-size: 13px;
  border-radius: 3px;
}

.form-header {
  background: #f0f0f0;
  padding: 12px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 3px;
}

.form-header h2 {
  font-size: 16px;
  color: #1a3a5c;
}

/* TABLES */
.form-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 10px;
  font-size: 11px;
}

.form-table td {
  border: 1px solid #999;
  padding: 4px 6px;
  vertical-align: middle;
}

.form-table .label {
  background: #f0f0f0;
  font-weight: bold;
  white-space: nowrap;
}

.form-table input[type="text"],
.form-table input[type="email"],
.form-table input[type="date"],
.form-table input[type="number"],
.form-table select {
  width: 100%;
  border: none;
  background: transparent;
  padding: 2px;
  font-size: 11px;
  font-family: Arial;
}

.form-table input:focus,
.form-table select:focus {
  background: #fff8e0;
  outline: 1px solid #1a3a5c;
}

/* CHECK GRID (i.O./n.i.O. tables) */
.check-grid {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}

.check-grid th {
  background: #1a3a5c;
  color: white;
  padding: 6px;
  border: 1px solid #999;
  font-size: 11px;
}

.check-grid td {
  border: 1px solid #999;
  padding: 4px 6px;
}

.check-grid td.center {
  text-align: center;
  width: 50px;
}

.check-grid input[type="checkbox"] {
  cursor: pointer;
}

/* MEASUREMENT TABLE */
.measurement-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 10px;
  margin-bottom: 10px;
}

.measurement-table th {
  background: #1a3a5c;
  color: white;
  padding: 5px 3px;
  border: 1px solid #999;
  font-size: 10px;
  text-align: center;
}

.measurement-table td {
  border: 1px solid #999;
  padding: 2px;
}

.measurement-table input[type="text"],
.measurement-table input[type="number"],
.measurement-table select {
  width: 100%;
  border: none;
  background: transparent;
  padding: 2px;
  font-size: 10px;
}

.measurement-table input:focus,
.measurement-table select:focus {
  background: #fff8e0;
}

/* INPUTS GENERAL */
input[type="text"],
input[type="email"],
input[type="date"],
input[type="number"],
input[type="tel"],
select,
textarea {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid #ccc;
  border-radius: 3px;
  font-family: Arial;
  font-size: 12px;
}

textarea {
  resize: vertical;
  min-height: 60px;
}

input[type="checkbox"],
input[type="radio"] {
  cursor: pointer;
  margin-right: 4px;
}

label {
  display: inline-block;
  font-weight: bold;
  font-size: 11px;
  margin-bottom: 3px;
  cursor: pointer;
}

label.inline {
  display: inline-flex;
  align-items: center;
  margin-right: 15px;
  font-weight: normal;
}

/* GRID LAYOUTS */
.g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.g3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.g4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 10px; margin-bottom: 10px; }

@media (max-width: 800px) {
  .g2, .g3, .g4 { grid-template-columns: 1fr; }
}

/* CARDS */
.card {
  background: #f9f9f9;
  border: 1px solid #ddd;
  padding: 15px;
  margin-bottom: 15px;
  border-radius: 4px;
}

.card h3 {
  color: #1a3a5c;
  margin-bottom: 10px;
  font-size: 14px;
}

/* BUTTONS */
.btn {
  padding: 8px 16px;
  border: none;
  background: #666;
  color: white;
  border-radius: 3px;
  cursor: pointer;
  font-weight: bold;
  font-size: 12px;
}

.btn:hover { background: #444; }

.btn-primary { background: #1a3a5c; }
.btn-primary:hover { background: #0d1f3f; }

.btn-small { padding: 4px 10px; font-size: 11px; }

.button-area {
  display: flex;
  gap: 10px;
  margin: 20px 0;
}

/* CANVAS - SIGNATURES */
canvas.signature {
  border: 2px solid #1a3a5c;
  background: white;
  display: block;
  cursor: crosshair;
  margin: 8px 0;
  border-radius: 3px;
  touch-action: none;
}

.sig-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 15px 0;
}

@media (max-width: 800px) {
  .sig-section { grid-template-columns: 1fr; }
}

.sig-box {
  background: white;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.sig-box canvas {
  width: 100%;
  height: 100px;
}

.sig-buttons {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.sig-buttons .btn {
  flex: 1;
  padding: 6px;
  font-size: 11px;
}

/* DEVICES LIST */
#devices-list {
  background: white;
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 10px;
  min-height: 80px;
  max-height: 200px;
  overflow-y: auto;
  margin-bottom: 10px;
  font-size: 12px;
}

#devices-list ol {
  margin-left: 20px;
}

#devices-list li {
  padding: 4px 0;
  border-bottom: 1px solid #f0f0f0;
}

/* DROP ZONE */
#drop-zone {
  border: 2px dashed #999;
  padding: 25px;
  text-align: center;
  border-radius: 4px;
  cursor: pointer;
  background: #fafafa;
  font-size: 13px;
  margin: 10px 0;
}

#drop-zone:hover, #drop-zone.dragover {
  border-color: #1a3a5c;
  background: #e8f4ff;
}

/* PRIVACY BANNER */
#privacy-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.95);
  color: white;
  padding: 15px 20px;
  text-align: center;
  font-size: 11px;
  z-index: 9999;
  max-height: 30vh;
  overflow-y: auto;
}

#privacy-banner p { margin: 5px 0; line-height: 1.4; }

#privacy-banner button {
  margin-top: 10px;
  padding: 8px 20px;
  background: #1a3a5c;
  border: none;
  color: white;
  border-radius: 3px;
  cursor: pointer;
  font-weight: bold;
}

/* PRINT */
@media print {
  .tabs, .button-area, #privacy-banner, header, footer, .sig-buttons, #drop-zone { 
    display: none !important; 
  }
  
  body { 
    background: white; 
    padding: 0; 
    margin: 0;
    font-size: 9px;
    line-height: 1.2;
  }
  
  main { 
    box-shadow: none; 
    padding: 0;
    margin: 0;
    max-width: 100%;
    width: 100%;
  }
  
  /* Only show currently active tab when printing */
  .tab-content { 
    display: none !important; 
  }
  .tab-content.print-active { 
    display: block !important; 
  }
  
  /* Hide management/admin sections when printing */
  #tab-stammdaten .card:has(button),
  #tab-stammdaten #devices-list,
  .sig-buttons {
    display: none !important;
  }
  
  /* HIDE NUMBER INPUT SPINNERS in PDF */
  input[type="number"]::-webkit-inner-spin-button,
  input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    appearance: none !important;
    margin: 0 !important;
    display: none !important;
  }
  
  input[type="number"] {
    -moz-appearance: textfield !important;
    appearance: textfield !important;
  }
  
  /* HIDE DATE INPUT CALENDAR ICONS */
  input[type="date"]::-webkit-calendar-picker-indicator,
  input[type="date"]::-webkit-inner-spin-button,
  input[type="date"]::-webkit-clear-button {
    display: none !important;
    -webkit-appearance: none !important;
  }
  
  /* HIDE SELECT DROPDOWN ARROWS */
  select {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: none !important;
    padding-right: 4px !important;
  }
  
  /* INPUT STYLING FOR PRINT */
  input[type="text"],
  input[type="email"],
  input[type="date"],
  input[type="number"],
  input[type="tel"],
  select,
  textarea {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 1px 2px !important;
    font-size: 9px !important;
    color: #000 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* MEASUREMENT TABLE - WIDEST TABLE, NEEDS SPECIAL CARE */
  .measurement-table {
    width: 100% !important;
    font-size: 7px !important;
    table-layout: fixed !important;
    word-wrap: break-word !important;
  }
  
  .measurement-table th,
  .measurement-table td {
    padding: 1px 2px !important;
    font-size: 7px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    word-wrap: break-word !important;
  }
  
  .measurement-table input,
  .measurement-table select {
    font-size: 7px !important;
    padding: 0 1px !important;
  }
  
  /* FORM TABLES */
  .form-table {
    width: 100% !important;
    font-size: 9px !important;
    table-layout: fixed !important;
  }
  
  .form-table td {
    padding: 2px 3px !important;
    font-size: 9px !important;
    word-wrap: break-word !important;
  }
  
  .form-table .label {
    font-size: 9px !important;
    white-space: normal !important;
  }
  
  /* CHECK GRID */
  .check-grid {
    width: 100% !important;
    font-size: 9px !important;
  }
  
  .check-grid th,
  .check-grid td {
    padding: 2px 4px !important;
    font-size: 9px !important;
  }
  
  /* SIGNATURES */
  canvas.signature { 
    border: 1px solid #000 !important;
    max-width: 100% !important;
    height: 70px !important;
  }
  
  .sig-section {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  
  .sig-box {
    background: white !important;
    padding: 5px !important;
    border: 1px solid #999 !important;
    page-break-inside: avoid !important;
  }
  
  /* SECTION TITLES */
  .section-title {
    background: #1a3a5c !important;
    color: white !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    padding: 3px 6px !important;
    font-size: 10px !important;
    margin: 6px 0 4px 0 !important;
  }
  
  /* TABLE HEADERS */
  .check-grid th,
  .measurement-table th {
    background: #1a3a5c !important;
    color: white !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  
  .form-table .label {
    background: #f0f0f0 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  
  /* HEADERS */
  .form-header h2 {
    font-size: 14px !important;
    margin-bottom: 8px !important;
  }
  
  /* CARDS */
  .card {
    padding: 6px !important;
    margin-bottom: 8px !important;
    page-break-inside: avoid !important;
  }
  
  /* TEXTAREA */
  textarea {
    min-height: 40px !important;
    font-size: 9px !important;
  }
  
  /* PAGE SETUP */
  @page {
    margin: 1cm 0.8cm;
    size: A4;
  }
  
  /* Avoid page break inside form sections */
  .section-title,
  .form-header,
  table {
    page-break-inside: avoid;
    break-inside: avoid;
  }
  
  /* Allow page break inside measurement table */
  .measurement-table {
    page-break-inside: auto;
  }
  
  .measurement-table tr {
    page-break-inside: avoid;
    break-inside: avoid;
  }
  
  /* CHECKBOXES STAY VISIBLE */
  input[type="checkbox"],
  input[type="radio"] {
    -webkit-appearance: checkbox !important;
    appearance: auto !important;
    border: 1px solid #000 !important;
  }
}

/* IT-Sicherheitsprotokoll extras */
header { background: #142e60; }
.tab-btn.active { background: #142e60; color: white; }
.tab-btn:hover { background: #0d1f3f; color: white; }
.section-title { background: #142e60; }
.check-grid th { background: #142e60; }
.measurement-table th { background: #142e60; }
.btn-primary { background: #142e60; }
.btn-primary:hover { background: #0d1f3f; }
canvas.signature { border: 2px solid #142e60; }
.form-header h2 { color: #142e60; }
.card h3 { color: #142e60; }
#drop-zone:hover, #drop-zone.dragover { border-color: #142e60; background: #e8f4ff; }
#privacy-banner button { background: #142e60; }
.tabs { border-bottom: 3px solid #142e60; }

/* scan status row colors */
tr.row-ok   td { background: #f0fff4 !important; }
tr.row-warn td { background: #fffbeb !important; }
tr.row-fail td { background: #fff0f0 !important; }
tr.row-info td { background: #eff6ff !important; }

/* protocol select in scan table */
.proto-col { font-family: monospace; font-size: 10px; }