/* ===== Responsive layout & sizing ===== */
:root{--gap:12px}
.container{max-width:1200px;margin:0 auto;padding:0 16px}
.card{margin:12px 0;padding:12px 14px;border:1px solid #374151;border-radius:8px;background:#0f172a;overflow-x:auto}
.card h2{margin:0 0 10px}

/* Grid helpers */
.grid1{display:grid;grid-template-columns:1fr;gap:var(--gap)}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap)}
.col-span-2{grid-column:1/-1}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
@media (max-width:900px){.grid3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.grid2,.grid3{grid-template-columns:1fr}}

/* Tables: ensure scroll on mobile and tighter spacing */
#firm_table,#cust_table,#prod_table,#saved_invoices_table,#issued_invoices_table,#items,#flight_table,#passenger_table{min-width:700px}
.table th,.table td,.striped th,.striped td{padding:6px 8px}
@media (max-width:640px){
  .table,.striped{font-size:13px}
  .table th,.table td,.striped th,.striped td{padding:5px 6px}
}

/* Labels & statuses */
label{font-size:14px}
.status,.muted{font-size:12px;color:#94a3b8}
.pill{display:inline-block;padding:2px 6px;border-radius:999px}
.badge{display:inline-block;padding:2px 6px;border-radius:4px;background:#334155;color:#e5e7eb;font-size:11px}
.badge.default{background:#2563eb}

/* Buttons sizes */
.btn{min-height:36px;padding:8px 12px;border-radius:6px}
.btn.sm{min-height:30px;padding:6px 10px;font-size:12px}

/* Inputs: remove native spinners where we handle ourselves */
.no-spin::-webkit-outer-spin-button,.no-spin::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.no-spin{-moz-appearance:textfield}
.no-spin{appearance:textfield;-moz-appearance:textfield}

/* Items area tweaks already present; only small polish */
#items_card .items-controls,#items_card .free-controls{margin-top:6px}
#items_card .qtywrap{display:inline-flex;gap:6px;align-items:center}
#items_card .spinbox{display:flex;flex-direction:column;gap:2px}
#items_card .spin{width:26px;height:16px}

/* Headings */
h1,h2,h3{color:#e5e7eb}

/* Sidebar/content small improvements (non-breaking) */
.sidebar .navlink.active{background:#1f2937;color:#fff}

/* Table row hover contrast boost on dark */
.table tbody tr:hover,.striped tbody tr:hover{background:#1f2937}

:root { --bg:#0b1220; --panel:#121a2b; --muted:#8aa0bf; --text:#e8eef9; --accent:#63b3ed; --ok:#22c55e; --warn:#f59e0b; --err:#ef4444; --focus:#27426f; }
*{box-sizing:border-box}body{font:14px/1.4 system-ui,Segoe UI,Roboto,Arial,sans-serif;margin:0;background:#f6f7fb;color:#111}a{color:#0b62e2;text-decoration:none}
body{margin:0;background:linear-gradient(180deg,#0b1220,#0b1220 30%,#0d1526);color:var(--text);font:15px/1.45 system-ui,Segoe UI,Roboto,Helvetica,Arial}
header{padding:20px 16px;border-bottom:1px solid #1f2a44;background:#0c1323;position:sticky;top:0;z-index:10}
header h1{font-size:20px;margin:0;display:flex;align-items:center;gap:10px}
header small{color:var(--muted)}
.wrap{max-width:1180px;margin:20px auto;padding:0 16px}
.card{background:var(--panel);border:1px solid #1f2a44;border-radius:18px;box-shadow:0 10px 30px -5px rgba(0,0,0,.4);margin:0 0 26px}
.card h2{margin:0;padding:14px 18px;border-bottom:1px solid #1f2a44;font-size:16px;font-weight:600;letter-spacing:.5px;color:#cfe1ff;display:flex;align-items:center;gap:10px}
.card .body{padding:18px}
label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:#374151}
label{display:block;font-size:11px;letter-spacing:.5px;text-transform:uppercase;font-weight:600;color:var(--muted);margin:10px 0 6px}
label .req{color:var(--err);margin-left:2px;font-weight:700}
input,select,textarea,button{font:inherit}
/* Global dark form controls */
input, select, textarea{background:#0b1324;border:1px solid #374151;color:#e5e7eb;border-radius:4px;height:36px;padding:6px 8px;outline:none}
input::placeholder, textarea::placeholder{color:#94a3b8}
select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:none}
input:focus, select:focus, textarea:focus{border-color:#60a5fa;box-shadow:0 0 0 2px rgba(37,99,235,.25)}
input:disabled, select:disabled, textarea:disabled{opacity:.6;cursor:not-allowed;background:#0f172a}
/* Quantity spinner buttons dark */
.qtywrap .spin{background:#0f172a;border:1px solid #374151;color:#e5e7eb;border-radius:3px;line-height:1}
.qtywrap .spin:hover{background:#1f2937}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.row{display:flex;gap:8px}
.row3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.row4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.btn{display:inline-flex;align-items:center;gap:8px;border:1px solid #2a3a5f;background:#0e1730;color:#eaf2ff;padding:10px 16px;border-radius:14px;cursor:pointer;font-weight:500;font-size:14px;line-height:1.1;transition:.15s background,.15s border,.15s transform}
.btn{background:#374151;color:#fff;border:0;border-radius:6px;padding:8px 12px;cursor:pointer}
.btn:active{transform:translateY(1px)}
.btn.primary{background:linear-gradient(180deg,#2563eb,#1d4ed8);border-color:#1e40af}
.btn.ok{background:linear-gradient(180deg,#16a34a,#15803d);border-color:#15803d}
.btn.warn{background:linear-gradient(180deg,#c2410c,#9a3412);border-color:#7c2d12}
.btn.ghost{background:rgba(255,255,255,0.04)}
.btn.alt{background:#13213a}
.btn.disabled{background:#101c33;border-color:#2a3a5f;color:var(--muted);cursor:not-allowed}
.btn.sm{padding:6px 10px;font-size:12px;border-radius:10px}
.muted{color:var(--muted)}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{padding:8px 10px;border-bottom:1px solid #223052;vertical-align:top}
th{font-weight:600;text-align:left;color:#cfe1ff;font-size:12px;letter-spacing:.5px}
tfoot td{font-weight:700}
.drag-handle{cursor:grab;user-select:none;display:inline-block;padding:2px 6px;margin-right:4px;font-size:14px;opacity:.65}
.drag-handle:active{cursor:grabbing;opacity:.9}
tr.dragging{opacity:.5}
tbody#items tr[data-row]{cursor:grab}
tbody#items tr[data-row].dragging{cursor:grabbing}
.right{text-align:right}
.qrbox{display:flex;align-items:center;justify-content:center;background:#0a1120;border:1px dashed #2a385c;border-radius:16px;min-height:260px}
.hint{font-size:12px;color:var(--muted)}
.pill{display:inline-block;padding:2px 8px;border-radius:999px;background:#152443;border:1px solid #28406a;color:#cfe1ff;font-size:11px;font-weight:500}
.danger{color:var(--err)}
.success{color:var(--ok)}
.kv{display:grid;grid-template-columns:160px 1fr;gap:8px;margin-top:8px;font-size:13px}
.hr{height:1px;background:#213053;margin:18px 0}
.inline{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.small{font-size:12px}
.hidden{display:none!important}
.layout{display:flex;min-height:100vh}
.sidebar{width:220px;background:#111827;color:#e5e7eb;padding:14px 10px;position:fixed;left:0;top:0;bottom:0;overflow:auto}
.sidebar .brand{font-weight:700;margin:6px 8px 12px;font-size:16px}
.sidebar .navlink{display:block;color:#e5e7eb;opacity:.9;padding:8px 10px;border-radius:6px;margin:2px 6px}
.sidebar .navlink.active,.sidebar .navlink:hover{background:#374151;opacity:1}
.content{margin-left:220px;padding:16px}

/* ===== Invoice Preview / Print (A4) ===== */
.invoice-preview {position:fixed;inset:0;display:flex;align-items:flex-start;justify-content:center;padding:40px 30px;background:rgba(15,20,30,.85);backdrop-filter:blur(3px);z-index:400;overflow:auto;}
.invoice-preview.hidden {display:none;}
.preview-dialog {background:#fff;color:#222;max-width:980px;width:100%;box-shadow:0 4px 24px rgba(0,0,0,.4);border-radius:8px;display:flex;flex-direction:column;}
.preview-toolbar {display:flex;justify-content:space-between;align-items:center;padding:10px 16px;background:#0f1520;color:#fff;border-radius:8px 8px 0 0;gap:12px;}
.preview-toolbar .btn {margin-right:4px;}
#print_preview {min-width:140px;}
#print_preview, #close_preview {font-weight:500;}
#print_preview.btn.primary {background:#2563eb;}

.print-invoice {padding:28px 36px 48px;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;font-size:13px;line-height:1.35;}
.print-invoice * {box-sizing:border-box;}
.print-invoice h1 {font-size:26px;margin:0 0 4px;font-weight:600;letter-spacing:.5px;}
.print-invoice h2 {font-size:18px;margin:28px 0 8px;font-weight:600;color:#222;}
.print-invoice h3 {font-size:14px;margin:20px 0 6px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:#333;}
.print-invoice .meta-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin:22px 0 6px;}
.print-invoice .panel {padding:10px 14px;border:1px solid #e1e4e8;border-radius:6px;background:#fafbfc;}
.print-invoice .panel.firm {background:#f0f7ff;border-color:#c2ddff;}
.print-invoice .kv {margin:2px 0;font-size:12px;color:#333;}
.print-invoice .kv span {display:inline-block;min-width:72px;color:#555;font-weight:500;}
.print-invoice table {width:100%;border-collapse:collapse;margin-top:8px;font-size:12px;}
.print-invoice table th, .print-invoice table td {padding:6px 8px;border:1px solid #d8dde3;vertical-align:top;}
.print-invoice table thead th {background:#0f1520;color:#fff;font-weight:600;font-size:11px;letter-spacing:.5px;text-transform:uppercase;}
.print-invoice table.striped tbody tr:nth-child(odd){background:#f7f9fb;}
.print-invoice table .right {text-align:right;}
.print-invoice .totals {margin:24px 0 0 auto;max-width:340px;border:1px solid #d8dde3;border-radius:6px;overflow:hidden;}
.print-invoice .totals table {margin:0;border:0;}
.print-invoice .totals table td {border:0;padding:6px 10px;font-size:13px;}
.print-invoice .totals table tr:not(:last-child) td {border-bottom:1px solid #e1e4e8;}
.print-invoice .totals table tr.total td {font-weight:600;font-size:14px;background:#0f1520;color:#fff;}
.print-invoice .note {margin-top:18px;font-size:12px;color:#333;white-space:pre-wrap;}
.print-invoice .ref-box {margin-top:14px;padding:10px 14px;background:#f4f6fa;border:1px solid #d8dde3;border-radius:6px;font-size:12px;}
.print-invoice .ref-box strong {font-weight:600;}
.print-invoice .pay-info {margin-top:22px;padding:12px 16px;background:#eefaf3;border:1px solid #c2ead5;border-radius:6px;font-size:12px;}
.print-invoice .pay-info strong {font-weight:600;}
.print-invoice .footer {margin-top:42px;font-size:11px;color:#555;text-align:center;border-top:1px solid #d8dde3;padding-top:10px;}
.print-invoice .title-row {display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:10px;}
.print-invoice .title-row .doc-id {text-align:right;font-size:12px;color:#555;}
.print-invoice .badge {display:inline-block;padding:2px 8px;font-size:11px;border-radius:12px;background:#0f1520;color:#fff;margin-left:6px;}
.print-invoice .subtle {color:#666;}
.print-invoice .flights-passengers {display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px;margin-top:10px;}
.print-invoice .section-box {border:1px solid #d8dde3;border-radius:6px;padding:10px 12px;background:#fff;}
.print-invoice .section-box h3 {margin-top:0;}
.print-invoice .empty {font-style:italic;color:#777;}
.print-invoice .logo {max-height:70px;max-width:210px;object-fit:contain;margin:0 0 8px;display:block;}
.print-invoice .title-row.with-logo {align-items:flex-start;}
.print-invoice .title-row.with-logo .logo-box {flex:0 0 auto;margin-right:18px;}

@media print {
  body,html {background:#fff;padding:0;margin:0;}
  .invoice-preview {position:static;padding:0;background:#fff;backdrop-filter:none;}
  .preview-dialog {box-shadow:none;border-radius:0;}
  .preview-toolbar {display:none;}
  .print-invoice {padding:10mm 12mm 14mm;}
  @page {size:A4;margin:10mm 10mm 12mm;}
}
@media(max-width:1000px){.row{grid-template-columns:1fr}.row3{grid-template-columns:1fr}.layout{grid-template-columns:1fr}.sidebar{position:static;height:auto;border-right:none;border-bottom:1px solid #1f2a44}.content{padding:12px 12px 40px}}
/* --- Legacy helpers to restore previous look --- */
.hidden{display:none!important}
.success{color:#047857}.danger{color:#b91c1c}
.row3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
/* number input without native spinners */
.no-spin{appearance:textfield;-moz-appearance:textfield}
.no-spin::-webkit-outer-spin-button,.no-spin::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qtywrap{position:relative;display:inline-flex;align-items:stretch}
.qtywrap input{border-top-right-radius:0;border-bottom-right-radius:0}
.spinbox{display:flex;flex-direction:column;border:1px solid #d1d5db;border-left:0;border-top-right-radius:6px;border-bottom-right-radius:6px;overflow:hidden}
.spinbox .spin{line-height:1;padding:0 6px;height:17px;background:#f3f4f6;color:#111;border:0;cursor:pointer}
.spinbox .spin:hover{background:#e5e7eb}
.drag-handle{cursor:grab;color:#6b7280;margin-right:6px}
.default-firm{background:#f9fafb}
.table.small{font-size:12px}
.btn.small{padding:4px 8px;font-size:12px}
.badge{display:inline-block;padding:2px 6px;border-radius:999px;background:#6b7280;color:#fff;font-size:11px}
/* align headers like before */
#items .cell-pos{width:28px}
#items .cell-total{min-width:80px}
/* minor tweaks */
label > input,label > select{margin-top:2px}
/* --- end legacy additions --- */

/* Table readability improvements */
/* Wider content */
.container{max-width:1240px}
/* Allow horizontal scroll when needed */
.card{overflow-x:auto}
/* Base table styles override */
.table{table-layout:auto;border-collapse:separate;border-spacing:0;font-size:14px;line-height:1.4;color:#111;background:#fff;min-width:760px}
.table th,.table td{border:1px solid #d1d5db;padding:8px 10px;vertical-align:middle}
.table th{background:#f8fafc;color:#111;font-weight:600}
.table tbody tr:nth-child(even){background:#fafafa}
.table tbody tr:hover{background:#f3f4f6}
/* Actions column wider */
#saved_invoices_table td:last-child,#issued_invoices_table td:last-child,#prod_table td:last-child,#cust_table td:last-child,#firm_table td:last-child{width:240px}
/* Ensure specific tables don’t get squeezed */
#saved_invoices_table,#issued_invoices_table,#prod_table,#cust_table,#firm_table{min-width:820px}
/* Improve muted contrast */
.muted{color:#4b5563}
/* Slightly larger small buttons */
.btn.sm{font-size:13px}
/* Prevent long text from breaking layout */
.table td,.table th{word-break:break-word}
/* Keep header text centered-left readable */
.table th.left{text-align:left}
.table th.right,.table td.right{text-align:right}

/* --- Dark table theme overrides --- */
.table{background:#111827;color:#e5e7eb}
.table th,.table td{border-color:#374151}
.table th{background:#1f2937;color:#e5e7eb}
.table tbody tr:nth-child(even){background:#0f172a}
.table tbody tr:hover{background:#1f2937}
.table a{color:#93c5fd}
.table .pill{background:#374151;border:1px solid #4b5563;color:#e5e7eb}

/* Dark theme for generic striped tables (previews etc.) */
.striped{background:#111827;color:#e5e7eb;table-layout:auto;min-width:720px}
.striped th,.striped td{border:1px solid #374151;padding:8px 10px;vertical-align:middle}
.striped thead th{background:#1f2937;color:#e5e7eb}
.striped tbody tr:nth-child(even){background:#0f172a}
.striped tbody tr:hover{background:#1f2937}

/* Positionen layout */
#items_card .items-controls,#items_card .free-controls{display:grid;grid-template-columns:1fr 120px auto;gap:10px;align-items:end;margin-bottom:10px}
#items_card .free-controls{grid-template-columns:1fr 120px 140px auto}
#items_card label{display:grid;grid-template-columns:auto 1fr;gap:6px;align-items:center;color:#e5e7eb}
#items_card input,#items_card select{height:36px;padding:6px 8px;border:1px solid #374151;border-radius:4px;background:#0b1324;color:#e5e7eb}
#items_card .btn{height:36px}
#items_card .table-wrap{overflow-x:auto;margin-top:8px}
#items thead th:nth-child(1){width:56px}
#items thead th:nth-child(3){width:110px}
#items thead th:nth-child(4){width:120px}
#items thead th:nth-child(5){width:130px}
#items thead th:last-child{width:76px}
#items_card .totals-panel{max-width:320px;margin-left:auto;margin-top:12px;background:#0b1324;border:1px solid #374151;border-radius:6px;padding:10px 12px;color:#e5e7eb}
#items_card .totals-panel .row{display:flex;justify-content:space-between;align-items:center;padding:4px 0;border-bottom:1px dashed #334155}
#items_card .totals-panel .row:last-child{border-bottom:0}
#items_card .totals-panel .grand{font-size:1.05rem;font-weight:600}
@media (max-width:800px){
  #items_card .items-controls{grid-template-columns:1fr 1fr}
  #items_card .items-controls .btn{grid-column:1/-1}
  #items_card .free-controls{grid-template-columns:1fr 1fr}
  #items_card .free-controls label:nth-child(3){grid-column:auto}
  #items_card .free-controls .btn{grid-column:1/-1}
}

/* Mobile Optimierungen ohne Desktop zu verändern */
@media (max-width: 760px) {
  :root { --sidebar-width: 100%; }
  .layout { display:block; min-height:100vh; }
  .sidebar {
    position:sticky; top:0; left:auto; right:auto; bottom:auto;
    width:auto; height:auto; margin:0 0 10px; padding:12px 12px;
    border-right:none; border-bottom:1px solid #1f2a44; box-shadow:0 2px 8px rgba(0,0,0,.25);
    z-index:50;
  }
  .sidebar .brand { margin:2px 4px 8px; }
  .sidebar nav, .sidebar .side { display:flex; flex-wrap:wrap; gap:6px; }
  .sidebar .navlink { display:inline-block; margin:2px 4px; padding:8px 10px; }

  .content { margin-left:0; padding:12px 12px 28px; }
  .content.container { max-width:none; padding:0 12px; }

  /* Typografie & Spacing etwas kompakter */
  .table { font-size:13px; }
  .table th, .table td { padding:6px 8px; }
  label { font-size:12px; }
  .btn { min-height:34px; padding:8px 10px; }

  /* Grids einkolumnig auf kleinen Screens */
  .grid2, .grid3 { grid-template-columns:1fr; }

  /* Items-Bereich: controls umbrechen */
  #items_card .items-controls { grid-template-columns:1fr 1fr; gap:8px; }
  #items_card .items-controls .btn { grid-column:1/-1; }
  #items_card .free-controls { grid-template-columns:1fr 1fr; gap:8px; }
  #items_card .free-controls .btn { grid-column:1/-1; }

  /* Tabellen horizontal scrollbar in Cards */
  .card { overflow-x:auto; }
}

/* Tablet-Fix: Content nicht nach rechts versetzt, wenn Sidebar oben steht */
@media (max-width:1000px){
  .content{margin-left:0}
}

/* Desktop-Breite beibehalten */
:root{--content-max-width:1240px}

/* Desktop: Sidebar fix links, Inhalt mittig und an Fensterbreite angepasst */
@media (min-width: 1001px) {
  body { padding-left: 220px; }
  .content { margin-left: 0; }
  .content.container { margin-left: auto; margin-right: auto; max-width: 1240px; }
}

/* --- Firm form layout tweaks: place Terms+Logo (left) and Seq+QR (right) --- */
/* Target element IDs added by app.js; only layout/style changes, no DOM or JS modifications */

/* Ensure the form container behaves as a two-column grid where present */
.grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap,12px);
}

/* Positioning: place PLZ (cred_zip) in left col and Ort (cred_city) in right col (if present) */
#cred_zip { grid-column: 1; }
#cred_city { grid-column: 2; }

/* Terms block (injected) should sit in the left column under PLZ */
#firm_terms_row { grid-column: 1; display:block; align-self:start; }
#cred_terms { width:100%; min-height:80px; box-sizing:border-box; }

/* Logo upload and its preview/delete should align under the terms (left column) */
label[for="cred_logo"], #cred_logo, #cred_logo_preview, #cred_logo_delete {
  grid-column: 1 !important;
}
#cred_logo_preview, #cred_qr_preview { display:block; margin-top:8px; max-width:100%; }
#cred_logo_delete, #cred_qr_delete { margin-top:6px; display:inline-block; }

/* Sequence controls and QR upload sit on the right column */
#firm_seq_row { grid-column: 2; display:block; }
#firm_qr_row { grid-column: 2; display:block; }
#cred_seq_year, #cred_seq_counter { box-sizing:border-box; }

/* Place country (cred_country) to the right of the terms if present */
#cred_country { grid-column: 2; }

/* Ensure previews are placed directly under their upload inputs */
#cred_logo + #cred_logo_preview, #cred_logo + #cred_logo_delete, #cred_qr_template + #cred_qr_preview, #cred_qr_template + #cred_qr_delete { margin-top:6px; }

/* Responsive: stack to single column on narrow viewports */
@media (max-width: 800px) {
  .grid2 { grid-template-columns: 1fr; }
  #cred_zip, #cred_city, #firm_terms_row, #firm_seq_row, #firm_qr_row, #cred_country, label[for="cred_logo"], #cred_logo, #cred_logo_preview, #cred_logo_delete, #cred_qr_template, #cred_qr_preview, #cred_qr_delete { grid-column: 1 !important; }
  #cred_terms { min-height:100px; }
}

/* Small spacing polish to keep previews visually tied to inputs */
#cred_logo_preview, #cred_qr_preview { border-radius:6px; }

/* --- Logo-Upload unterhalb von PLZ und Preview direkt darunter --- */
/* Layout: Erste Reihe PLZ (links) + Ort (rechts); Land über dem Logo (links) */
/* Use parent label targeting to reliably place grid items */
.grid2 > label:has(#cred_zip) { grid-column: 1; grid-row: 1; }
.grid2 > label:has(#cred_city) { grid-column: 2; grid-row: 1; }
.grid2 > label:has(#cred_country) { grid-column: 1; grid-row: 2; }

/* Logo-Upload und Preview links unterhalb von Land (dritte Reihe) */
label[for="cred_logo"], #cred_logo, #cred_logo_preview, #cred_logo_delete {
  grid-column: 1 !important;
  grid-row: 3;
}

/* QR-Upload und SVG-Preview in der dritten Reihe rechts */
#firm_qr_row { grid-column: 2; grid-row: 3; }

/* Rechnungsbedingungen unter dem Logo-Preview (links, vierte Reihe) */
#firm_terms_row { grid-column: 1; grid-row: 4; }

/* Rechnungszähler rechts UNTER dem SVG-Preview (vierte Reihe) */
#firm_seq_row { grid-column: 2; grid-row: 4; }

/* Falls ein altes Targeting aktiv ist, neutralisieren wir es (Priorität via :has) */
#cred_country { grid-column: auto; grid-row: auto; }

/* Gleich große Previews für Logo und SVG */
#cred_logo_preview, #cred_qr_preview {
  max-height: 120px !important;
  max-width: 220px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain;
}

/* Responsive: Bei schmalen Bildschirmen alles in eine Spalte */
@media (max-width: 800px) {
  .grid2 { grid-template-columns: 1fr; }
  #cred_zip, #firm_terms_row, label[for="cred_logo"], #cred_logo, #cred_logo_preview, #cred_logo_delete, #firm_seq_row, #firm_qr_row, #cred_city, #cred_country {
    grid-column: 1 !important;
    grid-row: auto; /* Automatische Reihenfolge für mobile */
  }
}

/* Sicherstellen, dass Preview direkt unter Upload erscheint */
#cred_logo_preview { margin-top: 8px; }
#cred_logo_delete { margin-top: 6px; }

/* End Logo-Upload Positionierung */

/* --- Firm form container as grid --- */
#view-firm .card .body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* --- Logo unterhalb von PLZ --- */
#cred_zip { grid-column: 1; grid-row: 1; }
#cred_city { grid-column: 2; grid-row: 1; }
#cred_country { grid-column: 2; grid-row: 2; }

/* Logo-Upload und Preview in linker Spalte unter PLZ */
#cred_logo, label[for="cred_logo"], #cred_logo_preview, #cred_logo_delete {
  grid-column: 1 !important;
  grid-row: 2;
}

/* Rechnungszähler rechts */
#firm_seq_row { grid-column: 2; grid-row: 3; }

/* QR-Upload rechts */
#firm_qr_row { grid-column: 2; grid-row: 4; }

/* Terms links */
#firm_terms_row { grid-column: 1; grid-row: 3; }

/* Responsive: Bei schmalen Bildschirmen alles in eine Spalte */
@media (max-width: 800px) {
  #view-firm .card .body {
    grid-template-columns: 1fr;
  }
  #cred_zip, #cred_city, #cred_country, #cred_logo, label[for="cred_logo"], #cred_logo_preview, #cred_logo_delete, #firm_seq_row, #firm_qr_row, #firm_terms_row {
    grid-column: 1 !important;
    grid-row: auto;
  }
}

/* Sicherstellen, dass Preview direkt unter Upload erscheint */
#cred_logo_preview { margin-top: 8px; }
#cred_logo_delete { margin-top: 6px; }

/* End firm layout */

/* --- Firm form: logical order (Name/IBAN → Adresse → Logo/QR → Bedingungen/Zähler → Land) --- */
/* Row 1: Name | IBAN */
.grid2 > label[for="cred_name"], .grid2 > label:has(#cred_name) { grid-column: 1; grid-row: 1; }
.grid2 > label[for="cred_iban"], .grid2 > label:has(#cred_iban) { grid-column: 2; grid-row: 1; }

/* Row 2: Straße | Nr. */
.grid2 > label[for="cred_street"], .grid2 > label:has(#cred_street) { grid-column: 1; grid-row: 2; }
.grid2 > label[for="cred_no"], .grid2 > label:has(#cred_no) { grid-column: 2; grid-row: 2; }

/* Row 3: PLZ | Ort */
.grid2 > label[for="cred_zip"], .grid2 > label:has(#cred_zip) { grid-column: 1; grid-row: 3; }
.grid2 > label[for="cred_city"], .grid2 > label:has(#cred_city) { grid-column: 2; grid-row: 3; }

/* Row 4: Logo(Upload+Preview) | QR(SVG+Preview) */
/* Use explicit for-attribute selector to avoid :has dependency */
.grid2 > label[for="cred_logo"] { grid-column: 1; grid-row: 4; }
#firm_qr_row { grid-column: 2; grid-row: 4; }

/* Row 5: Bedingungen | Zähler */
#firm_terms_row { grid-column: 1; grid-row: 5; }
#firm_seq_row { grid-column: 2; grid-row: 5; }

/* Row 6: Land (rechts) */
.grid2 > label[for="cred_country"], .grid2 > label:has(#cred_country) { grid-column: 2; grid-row: 6; }

@media (max-width: 800px) {
  .grid2 > label:has(#cred_name),
  .grid2 > label:has(#cred_iban),
  .grid2 > label:has(#cred_street),
  .grid2 > label:has(#cred_no),
  .grid2 > label:has(#cred_zip),
  .grid2 > label:has(#cred_city),
  .grid2 > label:has(#cred_logo),
  .grid2 > label:has(#cred_country),
  .grid2 > label[for="cred_name"],
  .grid2 > label[for="cred_iban"],
  .grid2 > label[for="cred_street"],
  .grid2 > label[for="cred_no"],
  .grid2 > label[for="cred_zip"],
  .grid2 > label[for="cred_city"],
  .grid2 > label[for="cred_logo"],
  .grid2 > label[for="cred_country"],
  #firm_qr_row, #firm_terms_row, #firm_seq_row {
    grid-column: 1 !important;
    grid-row: auto !important;
  }
}

/* Final overrides to ensure correct bottom layout regardless of previous rules */
/* Fix spacing: place Country directly under Ort (right), move QR row down one */
.grid2 > label[for="cred_country"] { grid-column: 2 !important; grid-row: 4 !important; }
label[for="cred_logo"] { grid-column: 1 !important; grid-row: 5 !important; }

.grid2 > label[for="cred_country"] { grid-column: 1 !important; grid-row: 4 !important; }
#firm_qr_row { grid-column: 2 !important; grid-row: 5 !important; }
#firm_terms_row { grid-column: 1 !important; grid-row: 6 !important; }
#firm_seq_row { grid-column: 2 !important; grid-row: 6 !important; }

/* Remove extra vertical spacing added inline by injected rows */
#firm_qr_row, #firm_terms_row, #firm_seq_row { margin-top: 0 !important; }

/* Absolute final, high-specificity placement to remove remaining gaps */
.grid2 { align-items: start; }
/* Unter PLZ: Land (links, Zeile 4) */
.grid2 > label[for="cred_country"] { grid-column: 1 !important; grid-row: 4 !important; margin-top: 0 !important; }
/* Unter Land: Logo (links, Zeile 5) */
.grid2 > label[for="cred_logo"] { grid-column: 1 !important; grid-row: 5 !important; margin-top: 0 !important; }
/* Rechte Seite: unter Ort ZÄHLER (Zeile 4), darunter QR (Zeile 5) */
.grid2 > #firm_seq_row { grid-column: 2 !important; grid-row: 4 !important; margin-top: 0 !important; }
.grid2 > #firm_qr_row { grid-column: 2 !important; grid-row: 5 !important; margin-top: 0 !important; }
/* Bedingungen über ganze Breite darunter (Zeile 6) */
.grid2 > #firm_terms_row { grid-column: 1 / -1 !important; grid-row: 6 !important; margin-top: 0 !important; }

/* Reset previous explicit placements so JS ordering defines flow */
#view-firm .grid2 > label[for="cred_country"],
#view-firm .grid2 > label[for="cred_logo"],
#view-firm .grid2 > #firm_seq_row,
#view-firm .grid2 > #firm_qr_row,
#view-firm .grid2 > #firm_terms_row,
main .grid2 > label[for="cred_country"],
main .grid2 > label[for="cred_logo"],
main .grid2 > #firm_seq_row,
main .grid2 > #firm_qr_row,
main .grid2 > #firm_terms_row{grid-column:auto !important;grid-row:auto !important}