/* ═══════════════════════════════════════════════════════════════════════════════
   PRINT BUTTON (screen only)
   ═══════════════════════════════════════════════════════════════════════════════ */

.print-btn-wrapper {
    position: fixed;
    bottom: 16px;
    right: 16px;
    z-index: 100;
}

.print-btn {
    background: #2c3e50;
    color: #fff;
    border: none;
    font-family: 'Poppins', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.print-btn:hover {
    background: #1c6f75;
    transform: translateY(-1px);
}

@media (max-width: 699px) {
    .print-btn-wrapper {
        display: none;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   PRINT LAYOUT – A4 Landscape
   ═══════════════════════════════════════════════════════════════════════════════
   Berechnung für 12 Standard-Substanzen:
   Seite:  297mm × 210mm  =  1123px × 794px (bei 96dpi)

   ┌──────────────────────────────────────────────────────────────────────────┐
   │  LAYOUT-REGELN  (UNBEDINGT beachten bei Neuberechnung!)                │
   ├──────────────────────────────────────────────────────────────────────────┤
   │                                                                        │
   │  1. KEINE feste width/min-width auf <table> setzen!                    │
   │     Die gerenderte Breite ergibt sich dynamisch aus:                   │
   │       tbody-th-Textbreite (~115px für "BENZODIAZEPINE" 11px Poppins)   │
   │       + 12 × td-width + border-spacing-Lücken                         │
   │     Eine erzwungene Breite führt zu Rendering-Abweichungen.            │
   │                                                                        │
   │  2. KEIN margin-left:auto auf .table-wrapper!                          │
   │     .table-wrapper hat flex-shrink:0 und nimmt seine natürliche        │
   │     Breite ein. margin-left:auto verschiebt Tabelle+Legende            │
   │     zusammen nach rechts AUS dem sichtbaren Bereich.                   │
   │                                                                        │
   │  3. Logo-Bar muss mit Datenzellen fluchten:                            │
   │     JS setzt inline margin-left/width für die Screen-Ansicht.          │
   │     Im Print MÜSSEN diese per !important überschrieben werden:         │
   │       width  = 12 × td-size + 11 × border-spacing (Datenbereich)      │
   │       margin-left: auto  (linksbündig mit erster Datenzelle)           │
   │       margin-right: border-spacing (rechtsbündig mit letzter Zelle)   │
   │     .logo-sonar-link in der Bar AUSBLENDEN – Sonar-Logo ist           │
   │     bereits oben rechts als .deco-sonar-link fixiert.                  │
   │     TripSit-Logo = links, Berlin-Logo = rechts (space-between).       │
   │                                                                        │
   │  4. .table-page-header MUSS sichtbar sein!                            │
   │     Überschrift über der Tabelle. Eigene Grid-Row (auto).             │
   │     Container in zweiter Grid-Row (auto).                              │
   │     align-content:center auf body zentriert BEIDE Rows als Block.     │
   │                                                                        │
   │  5. Legende darf NICHT aus dem Bild ragen!                             │
   │     flex: 0 1 <basis> statt flex-shrink:0, passt sich Restplatz an.   │
   │     align-items:stretch auf .container → Legende nimmt volle          │
   │     Container-Höhe ein; legend-entries nutzt space-between.            │
   │                                                                        │
   │  6. JS setzt inline line-height auf <a> in Zellen (52px für Desktop). │
   │     Im Print mit td a { line-height: <td-height> !important } über-   │
   │     schreiben, sonst ist der Text in den Zellen vertikal verschoben.  │
   │                                                                        │
   └──────────────────────────────────────────────────────────────────────────┘

   BREITE (1123px):
     Deko-Spalte (Grid-Col 1):  145px
     Container (Grid-Col 2–3):  978px  (1123 − 145)
       Padding rechts (6mm):     23px
       Verfügbar für Flex:      955px
         Tabelle (natürlich):   ~631px  (115 + 2 + 12×42 + 13×2)
         Lücke (gap):            14px
         Legende:               ~240px  (flex 0 1 240px, max 250px)
         Reserve:               ~70px

   HÖHE (794px):
     Page-Header (Grid-Row 1):   ~35px  (Titel + Hinweis, auto)
     Container-Padding (3mm+3mm): 23px
     Spaltenheader (thead th):    75px
     12 Zeilen × 42px:          504px
     14 × border-spacing 2px:    28px  (Ränder + 13 Zwischenräume)
     Tabelle gesamt:             607px
     Lücke → Logobar (2mm):       8px
     Logobar (~8mm):              30px
     Container-Inhalt:           668px
     Gesamthöhe:                 703px
     Reserve:                     91px

   LOGO-BAR-BREITE:
     12 × 42px (Zellen)       = 504px
     11 × 2px (Zellabstände)  =  22px
     Gesamt:                    526px
     margin-right:               2px   (= border-spacing → rechte Zellenkante)
     margin-left:              auto    (→ linke Kante der ersten Datenzelle)
   ═══════════════════════════════════════════════════════════════════════════════ */

@page {
    size: A4 landscape;
    margin: 0;
}

@media print {

    /* ── Global reset ────────────────────────────────────────────────────────── */
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    html, body {
        width: 297mm;
        height: 210mm;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background: #f0ebe5 !important;
    }

    body {
        display: grid;
        grid-template-columns: 145px 1fr auto;
        grid-template-rows: auto auto;     /* Row 1 = Header, Row 2 = Container */
        align-content: center;             /* beide Rows als Block vertikal zentrieren */
        min-height: 210mm;
        height: 210mm;
        padding: 0;
        gap: 0;
    }

    /* ── Hide interactive elements ───────────────────────────────────────────── */
    .edit-bar,
    .custom-tooltip,
    #editBar,
    .print-btn-wrapper,
    .language-switcher {
        display: none !important;
    }

    /* ═══════════════════════════════════════════════════
       PAGE HEADER – Überschrift über der Tabelle
       ═══════════════════════════════════════════════════ */

    .table-page-header {
        display: block !important;
        grid-column: 2 / 4;
        grid-row: 1;
        text-align: center;
        padding: 0 6mm 4mm 0;
    }

    .table-page-title {
        font-size: 26px;
        font-weight: 700;
        letter-spacing: 0.5px;
        margin: 0 0 3px;
        text-transform: uppercase;
    }

    .table-page-notice {
        font-size: 12px;
        color: #555;
        margin: 0;
        font-style: italic;
    }

    /* ═══════════════════════════════════════════════════
       LEFT COLUMN – Title blob, deco images, QR code
       ═══════════════════════════════════════════════════ */

    .deco-title-link {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 2;
        display: block;
    }

    .deco-title {
        position: relative;
        pointer-events: none;
    }

    .deco-title img {
        width: 210px;
        display: block;
    }

    .deco-title h1 {
        position: absolute;
        top: 11px;
        left: 12px;
        font-size: 40px;
        line-height: 0.95;
        letter-spacing: -1px;
    }

    .deco-drug2 {
        position: fixed;
        left: 0;
        top: 27%;
        right: auto;
        bottom: auto;
        width: 210px;
        opacity: 0.8;
    }

    .deco-drug1 {
        position: fixed;
        left: 0;
        bottom: 13%;
        right: auto;
        top: auto;
        width: 220px;
        opacity: 0.85;
    }

    .deco-qr-link {
        position: fixed;
        bottom: 4mm;
        left: 5mm;
        z-index: 2;
        display: block;
    }

    .deco-qr img {
        width: 55px;
    }

    /* ═══════════════════════════════════════════════════
       CENTER – Table + Legend container
       ═══════════════════════════════════════════════════ */

    .page-wrapper {
        display: contents;
    }

    .container {
        grid-column: 2 / 4;
        grid-row: 2;
        display: flex;
        gap: 14px;
        align-items: stretch;
        padding: 3mm 6mm 3mm 0;
    }

    .table-wrapper {
        overflow: visible;
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        /* KEIN margin-left:auto! → Regel 2 */
    }

    table {
        border-spacing: 2px;
        /* KEINE feste width/min-width! → Regel 1 */
    }

    thead th {
        height: 75px;
        width: 42px;
        min-width: 42px;
        padding-bottom: 6px;
        font-size: 11px;
        font-weight: 700;
    }

    thead th .col-label {
        font-size: 11px;
        bottom: 8px;
    }

    tbody th {
        font-size: 11px;
        font-weight: 700;
        padding-right: 8px;
        letter-spacing: 0.3px;
    }

    td {
        width: 42px;
        min-width: 42px;
        height: 42px;
        font-size: 20px;
        line-height: 42px;
        border-radius: 5px;
        aspect-ratio: 1 / 1;
    }

    /* JS setzt inline line-height:52px auf <a> → überschreiben (Regel 6) */
    td a {
        line-height: 42px !important;
    }

    td:hover {
        transform: none;
    }

    td.cell-double-warn {
        font-size: 18px;
        letter-spacing: -2px;
    }

    td.cell-same {
        font-size: 15px;
    }

    td.cell-unknown {
        font-size: 12px;
    }

    /* ═══════════════════════════════════════════════════
       RIGHT – Sonar logo + Legend
       ═══════════════════════════════════════════════════ */

    .legend {
        flex: 0 1 240px;       /* Regel 5: flexibel, kein fester Platz */
        min-width: 200px;
        max-width: 250px;
        gap: 0;
        padding: 0;
        padding-top: 65px;
        padding-bottom: 6mm;  /* kompensiert Logo-Bar-Höhe im table-wrapper,
                                  damit legend-entries nicht bis ganz unten reicht */
        display: flex;
        flex-direction: column;
    }

    .deco-sonar-link {
        position: fixed;
        top: 5mm;
        right: 6mm;
        z-index: 2;
        width: 120px;
        display: block;
    }

    .deco-sonar {
        width: 100%;
        display: block;
    }

    .logo-sonar {
        height: 9mm;
        width: auto;
    }

    .legend-entries {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex: 1;
        gap: 0;
    }

    .legend-item {
        gap: 0;
    }

    .legend-item .legend-header {
        gap: 8px;
        margin-bottom: 1px;
    }

    .legend-item .legend-icon {
        font-size: 22px;
        width: 30px;
    }

    .legend-item .legend-icon-double {
        font-size: 22px;
        letter-spacing: -4px;
    }

    .legend-item .legend-title {
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.3px;
    }

    .legend-item .legend-description {
        font-size: 9px;
        line-height: 1.5;
        padding-left: 38px;
        max-width: 210px;
        color: #333;
    }

    .legend-footer {
        font-size: 10px;
        margin-top: 6px;
        font-weight: 700;
        text-transform: uppercase;
        color: #c0392b !important;
        letter-spacing: 0.3px;
        text-align: center;
    }

    /* ═══════════════════════════════════════════════════
       LOGO BAR – unter Tabelle, fluchtend mit Datenzellen
       (siehe Regel 3)
       ═══════════════════════════════════════════════════ */

    .logo-bar {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        margin-top: auto !important;  /* schiebt Bar ans Ende des table-wrapper, unabhängig von Legendenhöhe */
        padding-top: 3mm;
        /* Breite = Datenbereich: 12×42 + 11×2 = 526px */
        width: 526px !important;
        margin-left: auto !important;
        margin-right: 2px !important;  /* = border-spacing → rechte Zellenkante */
    }

    .logo-bar .logo-sonar-link {
        display: block !important;
    }

    .logo-tripsit {
        position: static;
        height: 12mm;
        width: auto;
        opacity: 1;
    }

    .logo-sonar {
        height: 12mm;
        width: auto;
    }

    .logo-berlin {
        position: static;
        height: 11mm;
        width: auto;
        opacity: 1;
    }

    /* ── Misc ────────────────────────────────────────────────────────────────── */
    a {
        text-decoration: none !important;
        color: inherit !important;
    }
}