/* =========================================================
   Grundlayout
========================================================= */

*,
*::before,
*::after { box-sizing: border-box; }

:root{
  --bg-body:#f5f7fb;
  --bg-card:#ffffff;
  --bg-header:#ffffffcc;

  --border-subtle:#e5e7eb;

  --accent:#2563eb;
  --accent-light:#eff6ff;
  --accent-hover:#1d4ed8;

  --text-main:#1f2937;
  --text-soft:#4b5563;
  --text-strong:#111827;

  --success:#16a34a;
  --danger:#dc2626;

  --btn:#3ea536;
  --btn-hover:#35902f;

  --radius-lg:12px;
  --radius-full:999px;

  --shadow-soft:0 4px 16px rgba(0,0,0,0.06);
  --shadow-medium:0 8px 22px rgba(0,0,0,0.08);

  --transition-fast:0.18s ease-out;

  --font-body:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

html, body{
  margin:0;
  padding:0;
  background:var(--bg-body);
  font-family:var(--font-body);
  color:var(--text-main);
}

/* Container */
body > header,
body > main{
  max-width:1100px;
  margin:0 auto;
  padding:16px;
}

main{
  padding-top:40px;
  padding-bottom:32px;
}

/* =========================================================
   Header / Navigation + Logo
========================================================= */

.header-left{
  display:flex;
  align-items:center;
  gap:12px;
}

.header-logo{
  width:100px;
  height:auto;
  display:block;
}

@media (max-width:480px){
  .header-logo{ width:70px; }
}

header{
  position:sticky;
  top:20px;
  z-index:50;
  background:var(--bg-header);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border-subtle);
  padding:20px 22px;
  margin-bottom:20px;
  border-radius:16px;
  box-shadow:0 4px 20px rgba(0,0,0,0.08);
}

header h1{
  margin:0;
  font-size:20px;
  color:var(--text-strong);
  letter-spacing:0.04em;
}

nav{
  margin-top:6px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

nav a{
  display:inline-block;
  padding:7px 14px;
  font-size:14px;
  color:var(--text-soft);
  background:#f0f2f8;
  border-radius:var(--radius-full);
  border:1px solid transparent;
  text-decoration:none;
  transition:var(--transition-fast);
}

nav a:hover{
  background:var(--accent-light);
  color:var(--accent);
  border-color:var(--accent);
}

/* Aktiver Menüpunkt (du setzt im HTML class="active") */
nav a.active{
  background:var(--accent-light);
  color:var(--accent);
  border-color:var(--accent);
  font-weight:700;
}

/* =========================================================
   Cards
========================================================= */

.card{
  background:var(--bg-card);
  border-radius:var(--radius-lg);
  padding:18px 20px;
  margin:18px 0;
  border:1px solid var(--border-subtle);
  box-shadow:var(--shadow-soft);
}

.card h2{
  margin:0 0 12px 0;
  font-size:18px;
  color:var(--text-strong);
}

.card p{
  margin:6px 0;
  color:var(--text-soft);
}

/* =========================================================
   Dashboard Cards
========================================================= */

.dashboard-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:16px;
  margin-bottom:24px;
}

.dashboard-card{
  background:#ffffff;
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:16px;
  box-shadow:0 6px 20px rgba(0,0,0,0.06);
}

.dashboard-card h3{
  margin:0 0 8px;
  font-size:16px;
  color:#374151;
}

.dashboard-card p{
  font-size:22px;
  font-weight:800;
  margin:0;
}

.dashboard-card small{ color:#6b7280; }

.dashboard-card.danger{
  background:#fff1f2;
  border-color:#fecdd3;
}

/* =========================================================
   Buttons / Links
========================================================= */

button,
input[type="submit"],
input[type="button"],
a.btn{
  display:inline-block;
  padding:8px 16px;
  font-size:14px;
  border-radius:var(--radius-full);
  border:1px solid rgba(0,0,0,0.08);
  background:var(--btn);
  color:#fff;
  cursor:pointer;
  text-decoration:none;
  transition:var(--transition-fast);
}

button:hover,
input[type="submit"]:hover,
a.btn:hover{
  background:var(--btn-hover);
  transform:translateY(-1px);
}

button:active,
input[type="submit"]:active,
a.btn:active{
  transform:translateY(0);
}

a{ color:var(--accent); }

/* Klarer Fokus (Keyboard / Barrierefreiheit) */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible{
  outline:3px solid rgba(37,99,235,0.35);
  outline-offset:2px;
}

/* =========================================================
   Formulare
========================================================= */

label{
  display:block;
  margin-bottom:6px;
  color:var(--text-main);
  font-size:14px;
}

input[type="text"],
input[type="number"],
input[type="date"],
input[type="password"],
select{
  width:100%;
  max-width:340px;
  padding:8px 10px;
  border-radius:10px;
  border:1px solid var(--border-subtle);
  font-size:14px;
  background:#fff;
  color:var(--text-main);
  outline:none;
  transition:var(--transition-fast);
}

input[type="text"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="password"]:focus,
select:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-light);
}

input[type="file"]{
  font-size:14px;
  color:var(--text-soft);
}

/* Form Grid (wie rechnungen.php) */
.form-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:16px 24px;
  margin-top:12px;
}

.form-grid p{ margin:0; }

.form-grid label{
  font-weight:700;
  color:var(--text-strong);
}

/* In form-grid sollen Felder die Spalte füllen */
.form-grid input[type="text"],
.form-grid input[type="number"],
.form-grid input[type="date"],
.form-grid input[type="password"],
.form-grid select{
  max-width:100% !important;
  width:100% !important;
}

.form-grid .full{ grid-column:1 / -1; }

.form-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:14px;
  align-items:center;
}

.grid-2{ grid-template-columns:repeat(2, 1fr); }
.grid-3{ grid-template-columns:repeat(3, 1fr); }

/* =========================================================
   Tabellen
========================================================= */

table{
  width:100%;
  border-collapse:collapse;
  background:#fff;
  border-radius:12px;
  overflow:hidden;
  box-shadow:var(--shadow-soft);
}

th{
  background:#f0f2f8;
  padding:10px;
  font-size:13px;
  text-align:left;
  color:var(--text-strong);
  border-bottom:1px solid var(--border-subtle);
}

td{
  padding:10px;
  border-bottom:1px solid var(--border-subtle);
  font-size:14px;
}

tr:hover td{ background:#f9fafb; }

/* In Cards: keine doppelte Schatten-Optik */
.card table{
  box-shadow:none;
  border:1px solid var(--border-subtle);
}

/* Lesbarkeit allgemein */
table th:nth-child(1),
table td:nth-child(1){ white-space:nowrap; }

table th:nth-child(5),
table td:nth-child(5){
  text-align:right;
  white-space:nowrap;
}

table td:nth-child(4){
  white-space:normal;
  line-height:1.35;
}

/* Ruhigere Zebra-Optik */
table tbody tr:nth-child(even) td{ background:#fbfcff; }
table tr:hover td{ background:#f3f6ff; }

/* Optional: Sticky Kopfzeile in Cards */
.card table th{
  position:sticky;
  top:0;
  z-index:1;
}

/* Mobile Scroll Wrapper */
.table-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border-radius:12px;
}
.table-wrap table{ min-width:900px; }

/* =========================================================
   Status / Farben
========================================================= */

.pos{ color:var(--success); font-weight:700; }
.neg{ color:var(--danger);  font-weight:700; }

.info{
  color:#166534;
  background:#dcfce7;
  border:1px solid #bbf7d0;
  border-radius:8px;
  padding:6px 10px;
  margin:8px 0;
}

/* Überfällige Rechnungen */
.overdue td{
  background:#fee2e2 !important;
  color:#991b1b;
  font-weight:700;
}

/* =========================================================
   Aktionen / Icons / Rechnungen Pay-Form
========================================================= */

.actions{
  text-align:center;
  white-space:nowrap;
}

.actions a{
  display:inline-block;
  margin:0 6px;
  font-size:18px;
  text-decoration:none;
  cursor:pointer;
  transition:transform 0.15s ease, opacity 0.15s ease;
}

.actions a:hover{
  transform:scale(1.15);
  opacity:0.85;
}

.iconlink{
  font-size:18px;
  text-decoration:none;
}

.pay-form{
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.pay-form select{ max-width:180px; }

.pay-form button{
  padding:6px 10px;
  border-radius:999px;
  font-size:16px;
}

/* =========================================================
   Listen
========================================================= */

ul{
  padding-left:20px;
  margin:8px 0;
}

/* =========================================================
   Responsive
========================================================= */

@media (max-width:720px){
  header{ padding:10px 14px; }

  table td,
  table th{
    font-size:12px;
    padding:8px;
  }
}