.print-header { display: none; }


/* Minimal overlay style for Pumpendruck info */
.map-overlay {
  position: absolute;
  right: 12px;
  top: 12px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: saturate(1.2) blur(2px);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.10);
  z-index: 1001;
}
.map-overlay h4 {
  margin: 0 0 4px 0;
  font-size: 14px;
  font-weight: 700;
}
.map-overlay .kv { display: grid; grid-template-columns: auto auto; gap: 2px 10px; align-items: baseline; }
.map-overlay .kv .k { color: #374151; }
.map-overlay .kv .v { font-weight: 700; }
.map-overlay.warn { border-color: #fecaca; background: rgba(255, 241, 241, 0.96); }

#pumpOverlay{display:none !important;}


.leaflet-control.pump-ov{
  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 14px;
  line-height: 1.2;
  box-shadow: 0 6px 18px rgba(0,0,0,0.10);
  color: #111827;
  min-width: 160px;
  text-align: right;
  user-select: none;
}
.leaflet-control.pump-ov strong{font-weight:700;}


/* Emphasize pump target value */
.leaflet-control.pump-ov .po-label{ font-size: 12px; color: #374151; margin-bottom: 2px; }
.leaflet-control.pump-ov .po-value{ font-size: 28px; font-weight: 900; color: #b71c1c; line-height: 1.05; }
@media (min-width: 800px){
  .leaflet-control.pump-ov .po-value{ font-size: 32px; }
}


.leaflet-control.pump-ov .po-sub{ font-size: 12px; color: #4b5563; margin-top: 4px; }


/* === Viewport-fit layout & sections-only scroll (minimal, non-breaking) === */
html, body { height: 100%; overflow: hidden; }
#appRoot { height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
.app-header, .toolbar, .basemap { flex: 0 0 auto; }
.content-split { flex: 1 1 auto; display: grid; grid-template-columns: minmax(0,1fr) 380px; gap: 12px; min-height: 0; }
#map { height: 100%; min-height: 0; }

/* Right pane: equal 1/3 height distribution for all three sections */
.sidepanes { 
  display: grid; 
  grid-template-rows: 1fr 1fr 1fr; 
  gap: 8px; 
  padding: 8px; 
  min-height: 0; 
}

/* All sections get equal space and flex layout */
.profile-section { 
  display: flex; 
  flex-direction: column; 
  min-height: 0; 
  overflow: hidden;
}

.table-section { 
  display: flex; 
  flex-direction: column; 
  min-height: 0; 
  overflow: hidden;
}

.gps-section { 
  display: flex; 
  flex-direction: column; 
  min-height: 0; 
  overflow: hidden;
}
.table-section h2 { 
  flex: 0 0 auto; 
  margin: 4px 0 6px; 
  font-size: 12px; 
}
#segmentsTable { 
  flex: 1 1 auto; 
  overflow: auto; 
  /* Remove max-height to allow flexible sizing */ 
}
#segmentsTable table { table-layout: fixed; }
#segmentsTable th, 
#segmentsTable td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Prevent map from shrinking when right pane scrolls */
.leaflet-container, #map { contain: size layout paint; }


/* === Abschnitte: bessere Lesbarkeit + optimized for 4 pumps === */
#segmentsTable{
  font-size:10px; /* Smaller font for more content */
  line-height:1.1; /* Tighter line spacing */
}
#segmentsTable table{
  width:100%;
  table-layout:fixed;
  border-collapse:collapse;
}
#segmentsTable th,
#segmentsTable td{
  padding:2px 4px; /* Smaller padding */
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:10px; /* Ensure consistent small font */
}
#segmentsTable th{
  position:sticky;
  top:0;
  z-index:1;
  background:#ffffff;
  border-bottom:1px solid #e5e7eb; /* light gray */
  font-weight:600;
}
#segmentsTable tbody tr:nth-child(odd){
  background:#fafafa; /* zebra */
}
#segmentsTable tbody tr:hover{
  background:#f1f5f9; /* subtle hover */
}
/* Erste Spalte (Index/Name) linksbündig, andere i. d. R. numerisch: rechtsbündig + tabellarische Ziffern */
#segmentsTable td:first-child,
#segmentsTable th:first-child{
  text-align:left;
}
#segmentsTable td:not(:first-child),
#segmentsTable th:not(:first-child){
  text-align:right;
  font-variant-numeric: tabular-nums;
}



/* === Settings overlay (WTA enabled) === */
.icon-btn { 
  border: 1px solid rgba(0,0,0,0.1); 
  background: #fff; 
  border-radius: 10px; 
  padding: 6px 10px; 
  cursor: pointer; 
  font-size: 16px; 
  line-height: 1; 
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
  margin-left: 8px;
}
.icon-btn:hover { background: #f5f5f5; }
.params .settings-btn { align-self: end; }

.overlay-page {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 9999;
  display: none;
}
.overlay-card {
  background: white;
  max-width: 520px;
  margin: 8vh auto;
  padding: 16px 18px;
  border-radius: 14px;
  box-shadow: 0 15px 50px rgba(0,0,0,0.25);
}
.overlay-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.overlay-body label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 8px 0;
  gap: 12px;
}
.overlay-body input {
  width: 180px;
}
.overlay-actions {
  text-align: right;
  margin-top: 12px;
}


/* === RW Header (Red/White) redesign === */
.app-header.rw-header{
  background:#c40000;
  color:#fff;
  padding:10px 12px;
  border-bottom:1px solid rgba(255,255,255,.25);
  box-shadow:0 2px 6px rgba(0,0,0,.15);
}
.rw-header-row{display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
.rw-header-top{justify-content:space-between;}
.rw-left{display:flex; align-items:center; gap:12px; min-width:240px;}
.app-header .logo{height:42px; width:auto; border-radius:6px; background:#fff; padding:4px;}
.rw-titles h1{margin:0; font-size:20px; line-height:1.2;}
.rw-titles .subline{font-size:12px; opacity:.95; margin-top:2px;}
.rw-right{ display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
.app-header .icon-btn, .app-header .pdf-btn{
  cursor:pointer;
  border:1px solid #fff;
  background:#fff;
  color:#000;
  border-radius:8px;
  padding:6px 10px;
  font-weight:600;
  line-height:1;
}
.app-header .pdf-btn.one-line{white-space:nowrap; display:inline-flex; align-items:center; gap:6px; padding:6px 12px;}
.app-header .params{padding-top:8px; border-top:1px dashed rgba(255,255,255,.35);}
.app-header .params label{display:inline-flex; align-items:center; gap:6px; margin-right:14px; color:#fff;}
.app-header .params select, .app-header .params input{
  height:28px; border-radius:6px; border:1px solid #fff; background:#fff; color:#000; padding:0 8px;
}
@media (max-width:920px){
  .rw-titles h1{font-size:18px;}
  .app-header .logo{height:36px;}
  .app-header .params label{margin-right:10px;}
}
/* Thin divider below header to content */
.main-divider{height:1px; background:rgba(255,255,255,.25);}

/* Snap toggle inside header */
.rw-toggle{ display:inline-flex; align-items:center; gap:6px; padding:0 6px; border:1px solid #fff; border-radius:8px; background:#fff; color:#000; height:24px; }
.rw-toggle input{accent-color:#c40000; width:16px; height:16px;}
.rw-toggle span{ font-weight:600; font-size:12px; line-height:1; color:#000; }


/* === Single-line controls with wrap & vertical separators === */
.app-header.rw-header{ background:#c40000; color:#fff; padding:10px 12px; box-shadow:0 2px 6px rgba(0,0,0,.15); }
.rw-header-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.rw-left{ display:flex; align-items:center; gap:12px; min-width:260px; }
.app-header .logo{ height:42px; width:auto; border-radius:6px; background:#fff; padding:4px; }
.rw-titles h1{ margin:0; font-size:20px; line-height:1.2; }
.rw-titles .subline{ font-size:12px; opacity:.95; margin-top:2px; }

.rw-controls{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.rw-controls .icon-btn, .rw-controls .pdf-btn, .rw-controls select, .rw-controls input, .rw-search button{
  border:1px solid #fff; background:#fff; color:#000; border-radius:8px; height:30px; padding:0 10px; font-weight:600; line-height:1;
}
.rw-controls label{ display:inline-flex; align-items:center; gap:6px; color:#fff; }
.rw-controls input[type="number"], .rw-controls select{ font-weight:500; }

/* Search compact */
.rw-search{ display:inline-flex; align-items:center; gap:6px; }
.rw-search input{ width:90px; padding:0 8px; }
.rw-search button{ padding:0 10px; }

/* Toggle */
.rw-toggle{ display:inline-flex; align-items:center; gap:6px; padding:0 6px; border:1px solid #fff; border-radius:8px; background:#fff; color:#000; height:24px; }
.rw-toggle input{ accent-color:#c40000; width:16px; height:16px; }
.rw-toggle span{ font-weight:600; font-size:12px; line-height:1; color:#000; }

/* Vertical separators */
.v-sep{ display:inline-block; width:1px; height:22px; background:rgba(255,255,255,.6); margin:0 4px; }

/* Remove old horizontal divider */
.main-divider, .app-header .params{ display:none !important; }

@media (max-width:920px){
  .rw-titles h1{ font-size:18px; }
  .app-header .logo{ height:36px; }
}


/* === Two-row right controls, aligned with logo, compact header === */
.app-header.rw-header.two-rows{
  background:#c40000; color:#fff;
  padding:8px 12px;
  box-shadow:0 2px 6px rgba(0,0,0,.15);
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.rw-left{ display:flex; align-items:center; gap:12px; }
.app-header .logo{ height:48px; width:auto; border-radius:6px; background:#fff; padding:4px; }
.rw-titles h1{ margin:0; font-size:20px; line-height:1.15; }
.rw-titles .subline{ font-size:12px; opacity:.95; margin-top:2px; }

.rw-right{ display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
.rw-row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

/* Compact inputs/buttons for two-row fit */
.rw-row select, .rw-row input[type="number"] {
  width:80px;
}
.rw-row select, .rw-row input, .rw-row .icon-btn, .rw-row .pdf-btn, .rw-search button{
  height:24px; border:1px solid #fff; background:#fff; color:#000; border-radius:8px;
  padding:0 8px; font-size:13px; line-height:1; font-weight:600;
}
.rw-row label{ display:inline-flex; align-items:center; gap:6px; color:#fff; }
@media (max-width: 900px){
  .app-header .logo{ height:44px; }
  .rw-titles h1{ font-size:18px; }
}

#startType{ width:120px; }

.rw-toggle input{ accent-color:#c40000; width:14px; height:14px; }

/* Help button same styling as icon/pdf buttons */
.help-btn{ white-space:nowrap; }


/* === Druck-Layout: Karte + rechte Spalte auf A4 Querformat === */
@media print {

  .print-header {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    background: #cc0000;
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    padding: 4mm 8mm;
    margin-bottom: 3mm;
  }
  .print-header-title {
    letter-spacing: 0.5px;
  }
  .print-header-datetime {
    font-size: 13px;
    font-weight: 500;
  }
  @page {
    size: A4 landscape;
    margin: 5mm;
  }

  body {
    margin: 0;
    background: #ffffff !important;
  }
  /* Für den Druck: volle Höhe & kein Abschneiden */
  html, body {
    height: auto !important;
    overflow: visible !important;
  }
  #appRoot {
    overflow: visible !important;
  }


  /* Alles ausser dem App-Container ausblenden */
  body > * {
    display: none !important;
  }
  #appRoot {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    border: none !important;
  }

  /* Header, Toolbar, Footer, Overlays, Hinweise nicht drucken */
  header.app-header,
  .toolbar,
  footer.app-footer,
  .overlay-page,
  .map-overlay,
  .map-qr-overlay,
  .leaflet-control.pump-ov,
  .legend,
  #individualQROverlays,
  .qr-overlay-controls {
    display: none !important;
  }

  /* Layout Karte + rechte Spalte */
  .content-split {
    display: grid !important;
    grid-template-columns: 3fr 1.3fr;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    gap: 0 !important;
  }

  .content-split .map-pane,
  .content-split .sidepanes {
    height: auto !important;
    overflow: visible !important;
  }

  .sidepanes {
    display: flex !important;
    flex-direction: column !important;
  }

  .profile-section,
  .table-section,
  .gps-section {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
  }

  /* Rote Rahmen für Profil / Abschnitte / GPS im Druck */
  .profile-section,
  .table-section,
  .gps-section {
    border: 2px solid #cc0000 !important;
    border-radius: 3px;
    padding: 3mm;
  }

  /* Abschnitte-Tabelle im Druck vollständig anzeigen */
  #segmentsTable,
  #segmentsTable > div,
  #segmentsTable table {
    max-height: none !important;
    overflow: visible !important;
  }
  #segmentsTable table {
    table-layout: auto !important;
  }
  #segmentsTable th,
  #segmentsTable td {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  /* GPS-Tabelle im Druck vollständig anzeigen */
  #gpsCoordinates {
    max-height: none !important;
    overflow: visible !important;
  }
  .gps-coordinates-table {
    table-layout: auto !important;
    width: 100% !important;
  }
  .gps-coordinates-table th,
  .gps-coordinates-table td {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  /* QR-Liste im Druck anzeigen (unterhalb des Inhaltsbereichs) */
  .print-qr-list {
    grid-area: qr;
    display: block !important;
    margin-top: 2mm !important;
    border: 2px solid #cc0000 !important;
    border-radius: 3px;
    padding: 4mm;
  }
  .print-qr-list-inner {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6mm !important;
  }
  .print-qr-item {
    break-inside: avoid;
  }
  /* Info-Blöcke im Druck einblenden */
  .print-info-section {
    display: block !important;
    margin-bottom: 4mm;
  }
  /* Zwei-Seiten-Aufteilung: Seite 1 Karte, Seite 2 Inhalte */
  .content-split {
    display: block !important;
    width: 100% !important;
  }
  .content-split .map-pane {
    width: 100% !important;
    height: 160mm !important;
  }

  /* Seitenumbruch-Element zwischen Karte und Inhalten */
  .print-page-break {
    display: block !important;
    height: 0;
    margin: 0;
    padding: 0;
    page-break-before: always;
    break-before: page;
  }

  /* Seite 2: Matrix-Layout mit Grid-Areas */
  .sidepanes {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto auto;
    grid-auto-rows: auto;
    grid-template-areas:
      "info info"
      "profile table"
      "profile gps"
      "qr qr";
    column-gap: 8mm;
    row-gap: 4mm;
    align-items: start;
    margin-top: 0 !important;
  }

  /* Kopfzeile: Hydrantennummer (links) + Pumpendruck (rechts) */
  .print-info-section {
    grid-area: info;
    margin: 0 0 2mm 0 !important;
    padding: 0 !important;
    font-size: 11px;
    line-height: 1.2;
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    column-gap: 8mm;
  }
  #printHydrantInfo,
  #printPumpInfo {
    border: 2px solid #cc0000 !important;
    border-radius: 3px;
    padding: 3mm;
    font-size: 150%;
    font-weight: 700;
    width: 100%;
    box-sizing: border-box;
  }
  #printHydrantInfo {
    justify-self: start;
  }
  #printPumpInfo {
    justify-self: end;
  }

  /* Höhenprofil links oben */
  .profile-section {
    grid-area: profile;
    margin: 0 !important;
  }

  /* Abschnitte rechts oben, dynamische Höhe */
  .table-section {
    grid-area: table;
    margin: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
  #segmentsTable {
    max-height: none !important;
  }

  /* GPS-Koordinaten unterhalb der Abschnitte (rechte Spalte) */
  .gps-section {
    grid-area: gps;
    margin: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  /* QR-Codes unten über die gesamte Breite */
  .print-qr-list {
    grid-area: qr;
    display: block !important;
    margin-top: 2mm !important;
    border: 2px solid #cc0000 !important;
    border-radius: 3px;
    padding: 4mm;
  }
}


.print-page-break { display: none; }

@media print {
  .print-qr-item-label {
    font-size: 120% !important;
    font-weight: 600 !important;
  }
}

/* =========================================
   Mobile-optimiertes Layout (Smartphones)
   ========================================= */
@media (max-width: 768px) {

  html, body {
    height: auto;
    overflow: auto;
  }

  /* Root-Layout: Flex aufheben, damit die Seite wachsen und scrollen kann */
  #appRoot {
    display: block;
    min-height: 0;
  }

  /* Header kompakter, Inhalt darf umbrechen */
  .app-header.rw-header {
    padding: 8px 10px;
  }

  .rw-header-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .rw-left {
    width: 100%;
  }

  .rw-controls {
    width: 100%;
  }

  .rw-controls > * {
    margin-bottom: 4px;
  }

  .rw-titles h1 {
    font-size: 17px;
  }

  /* Toolbar untereinander, volle Breite */
  .toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .toolbar > * {
    width: 100%;
  }

  .toolbar button,
  .toolbar select {
    width: 100%;
    text-align: left;
  }

  /* Inhalt: Karte oben, alles andere darunter – normales Block-Layout */
  .content-split {
    display: block;
  }

  .map-pane {
    min-height: 320px;
    margin-bottom: 12px;
  }

  .sidepanes {
    display: block;
    padding: 8px;
    border-left: none;
    border-top: 1px solid #eee;
  }

  .sidepanes .profile-section,
  .sidepanes .table-section,
  .sidepanes .gps-section {
    display: block;
    min-height: auto;
    margin-bottom: 16px;
  }

  #elevContainer {
    display: block;
    height: auto;
    overflow: visible;
  }

  #segmentsTable {
    max-height: none;
  }

  /* Overlays näher an den Rand, damit sie die Karte nicht zu stark überdecken */
  .map-overlay {
    right: 8px;
    top: 8px;
    left: auto;
    max-width: 80%;
  }
}


/* Mobile Pumpen-Ausgangsdruck-Anzeige oberhalb der Karte */
#pumpInfoBar {
  display: none;
}

@media (max-width: 768px) {
  #pumpInfoBar.has-content {
    display: block;
    margin: 8px 0;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.96);
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    font-size: 14px;
    line-height: 1.3;
  }

  #pumpInfoBar .po-label {
    font-size: 12px;
    color: #374151;
    margin-bottom: 2px;
    font-weight: 600;
  }

  #pumpInfoBar .po-value {
    font-size: 22px;
    font-weight: 800;
    color: #b71c1c;
    line-height: 1.1;
  }
}