/* === Core variables & reset (unchanged) === */
:root{--bg:#fff;--text:#111;--card:#fff;--border:#e5e7eb;--subtle:#f8fafc;--muted:#cbd5e1;--link:#2563eb;--ok:#06b6d4;--warn-bg:#fffbeb;--warn-border:#f59e0b;--warn-text:#1f2937}
.dark{--bg:#0b0f14;--text:#e5e7eb;--card:#0f1620;--border:#1f2937;--subtle:#0c121b;--muted:#334155;--link:#60a5fa;--ok:#22d3ee;--warn-bg:#3a2a00;--warn-border:#fbbf24;--warn-text:#fde68a}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.5 system-ui,Arial}
a{color:var(--link);text-decoration:none}

/* === Buttons look & submit normalization === */
.btn,button,input[type=submit]{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--link); color:#fff;
  height:36px; padding:0 14px;
  border-radius:10px; border:1px solid transparent;
  font-size:14px; line-height:1; gap:8px;
  transition:transform .02s ease, box-shadow .2s ease; cursor:pointer;
  max-width:100%; white-space:nowrap; text-decoration:none;
}
.btn:hover,button:hover,input[type=submit]:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,0,0,.15)}
.btn.secondary{background:#64748b}
.btn.danger{background:#ef4444}

/* === Layout === */
.container{max-width:1100px;margin:24px auto;padding:0 16px}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--border)}
.brand a{font-weight:800}
.topbar nav a{display:inline-block;margin:0 6px;padding:8px 12px;border-radius:10px;border:1px solid var(--border);background:var(--card);color:var(--text)}
.topbar nav a:hover{box-shadow:0 4px 12px rgba(0,0,0,.12)}
.dark .topbar nav a{background:#0c131c;border-color:#233044}
.card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:12px;margin:12px 0}

/* === Tables === */
.table{width:100%;border-collapse:collapse}
.table th,.table td{border-top:1px solid var(--border);padding:8px;vertical-align:top}
.table .btn{white-space:nowrap}
.table th{ text-align:left }

/* === Form controls === */
input,select,textarea{width:100%;padding:8px;border:1px solid var(--muted);border-radius:10px;background:var(--bg);color:var(--text)}
.row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:start}
.row>*{min-width:0} /* prevent overflow so elements don't overlap */
@media(max-width:900px){.row{grid-template-columns:1fr}}
.row.single {
  grid-template-columns: 1fr;
}

/* buttons inside grid rows should sit below labels/fields */
.row .btn,.row button,.row input[type=submit]{margin-top:24px}

/* === Flash / messages === */
.flash{background:#ecfeff;border:1px solid var(--ok);padding:8px;border-radius:10px;margin:8px 0}
.flash.info{background:#ecfeff;border-color:var(--ok);color:#064e3b}
.flash.warn{background:var(--warn-bg);border-color:var(--warn-border);color:var(--warn-text)}
.dark .flash{background:#07212a;border-color:#155e75;color:#e0f2fe}
.dark .flash.warn{background:var(--warn-bg);border-color:var(--warn-border);color:var(--warn-text)}

/* === Misc === */
.muted{color:#667085}
.foot{padding:16px;text-align:center;border-top:1px solid var(--border);margin-top:24px}
.wrap{white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere}
.actions{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-start}
.actions form{display:inline}

/* === Collapsible new invoice === */
.new-invoice summary{cursor:pointer;list-style:none;font-weight:700;margin:-6px -6px 8px -6px;padding:6px;border-radius:8px}
.new-invoice[open] summary{background:var(--subtle)}
.new-invoice .ni-body{margin-top:6px}

/* === Searchable dropdown === */
.picker{position:relative}
.picker-btn{border:1px solid var(--muted);background:var(--bg);color:var(--text);padding:10px;border-radius:10px;cursor:pointer}
.picker-panel{position:absolute;left:0;right:0;top:calc(100% + 4px);background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.15);z-index:10000;padding:8px}
.picker-search{width:100%;padding:8px;border:1px solid var(--muted);border-radius:8px;background:var(--bg);color:var(--text)}
.picker-list{max-height:220px;overflow:auto;margin-top:6px}
.picker-item{padding:8px;border-radius:8px;cursor:pointer}
.picker-item:hover{background:var(--subtle)}


/* === Layout Enhancement for Invoice List === */
.card {
  max-width: 100%;
  width: 100%;
}

.table {
  width: 100%;
  table-layout: auto;
}

.table td .actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  justify-content: flex-start;
  flex-shrink: 0;
}

.table td .actions .btn {
  white-space: nowrap;
}

.table td {
  white-space: nowrap;
}
/* === End Layout Enhancement === */


/* === Wider container for desktop screens === */
@media (min-width: 1200px){
  .container{max-width: 1400px;}
}
@media (min-width: 1600px){
  .container{max-width: 1560px;}
}

.table td .actions{flex-wrap:nowrap}


/* === Layout Optimization: wide but responsive === */

/* Container nutzt mehr Platz auf großen Screens */
@media (min-width: 1200px){
  .container{ max-width: 1400px; }
}
@media (min-width: 1600px){
  .container{ max-width: 1560px; }
}

/* Tabellenbreite bleibt flexibel */
.table {
  width: 100%;
  table-layout: auto;
}

/* Aktionen sollen umbrechen, aber mit schönem Abstand */
.table td .actions {
  display: flex;
  flex-wrap: wrap;           /* erlaubt Zeilenumbruch */
  gap: 8px;                  /* gleichmäßiger Abstand */
  justify-content: flex-start;
  align-items: flex-start;
}

/* Buttons passen sich natürlich an */
.table td .actions .btn {
  white-space: nowrap;
  flex: 0 0 auto;
}
/* === End of layout optimization === */
.button-actions button,
.button-actions .btn {
  margin-top: 12px;
}
.calendar {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed; /* alle Spalten gleich breit */
}
.calendar th,
.calendar td {
  height: 130px; /* höhere Zeilen */
}
.topbar {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
}

.brand a {
  font-weight: 600;
  font-size: 18px;
  color: var(--text);
}

/* WICHTIG: Bezugspunkt für das Dropdown */
.main-nav {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav-links a {
  margin-left: 12px;
}

/* Burger-Button */
.nav-toggle {
  display: inline-flex;
  margin-left: 12px;
}

.mobile-nav {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
  z-index: 1000;
  min-width: 220px;
  /* kein padding hier */
}

.mobile-nav.open {
  display: block;
}

.mobile-nav-inner {
  padding: 4px 8px;  /* Innenabstand, damit die Items Luft haben */
}


/* Dropdown-Einträge im Burger-Menü (Links + Button) */
.mobile-nav .dropdown-item {
  display: block;
  width: 100%;
  padding: 10px 12px;
  margin: 4px 0;                /* KEINE horizontale Margin mehr */
  border-radius: 8px;
  border: 1px solid var(--border);
  background: none;
  color: var(--text);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
}

.mobile-nav .dropdown-item:hover {
  background: var(--subtle);
}


/* Desktop: mobile-main-links ausblenden */
.mobile-main-links {
  display: none;
}

/* Mobile: Desktop-links aus, mobile-links an */
@media (max-width: 900px) {
  .nav-links {
    display: none;
  }
  .mobile-main-links {
    display: block;
  }
}

/* Tabellen auf Mobile scrollbar (falls noch nicht) */
@media (max-width: 900px) {
  .table {
    display: block;
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
  }
}