/* FairBilanz Clean Business UI – einheitliches Inhaltsdesign
   Ziel: alle Seiten ruhiger, einheitlicher und passend zur Sidebar machen. */
:root{
  --fb-u-bg:#f5f7fb;
  --fb-u-bg2:#eef2f7;
  --fb-u-card:#ffffff;
  --fb-u-soft:#f8fafc;
  --fb-u-soft2:#f1f5f9;
  --fb-u-line:#d9e2ef;
  --fb-u-line2:#e7edf5;
  --fb-u-text:#111827;
  --fb-u-muted:#536273;
  --fb-u-primary:#2563eb;
  --fb-u-primary2:#1d4ed8;
  --fb-u-green:#15803d;
  --fb-u-red:#b91c1c;
  --fb-u-orange:#b45309;
  --fb-u-radius:14px;
  --fb-u-radius-lg:18px;
  --fb-u-shadow:0 8px 22px rgba(15,23,42,.055);
  --fb-u-shadow-soft:0 4px 14px rgba(15,23,42,.04);
}

html,body{
  background:linear-gradient(180deg,var(--fb-u-bg),var(--fb-u-bg2))!important;
  color:var(--fb-u-text)!important;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif!important;
  text-shadow:none!important;
  max-width:100%!important;
  overflow-x:hidden!important;
}
body{min-height:100vh!important;font-size:14px!important;line-height:1.45!important}
*{box-sizing:border-box!important;transition:none!important}
a{color:var(--fb-u-primary)!important;text-decoration:none!important}
a:hover{text-decoration:underline!important}

/* Grundbreite und Seitenabstand */
.wrap,.page,.container,.main,.content,.content-wrap,.lohn-wrap,main:not(.fb-app-nav){
  max-width:1240px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  padding-left:22px!important;
  padding-right:22px!important;
}
.wrap,.page,.container,.main,.content,.content-wrap,.lohn-wrap,main:not(.fb-app-nav){margin-top:24px!important;margin-bottom:46px!important}

/* Typografie */
h1,h2,h3,h4,.title,.section-title{
  color:var(--fb-u-text)!important;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif!important;
  text-shadow:none!important;
  text-transform:none!important;
  letter-spacing:-.025em!important;
  line-height:1.16!important;
}
h1,.title{font-size:clamp(1.9rem,3.2vw,2.9rem)!important;font-weight:850!important;margin:0 0 8px!important}
h2,.section-title{font-size:1.25rem!important;font-weight:820!important;margin:0 0 14px!important}
h3{font-size:1.05rem!important;font-weight:800!important;margin:0 0 10px!important}
p,.muted,.small,.mini,small,.meta,.meta-sub,.help,.hint,.note-text,.subtitle{color:var(--fb-u-muted)!important;line-height:1.48!important;text-shadow:none!important}
strong,.num,.amount{color:var(--fb-u-text)!important}

/* Seitenkopf: überall gleich, nicht mehr verspielt */
.hero,.page-header,.head,.top,.lohn-hero,.header,.main-header,.dashboard-hero{
  background:var(--fb-u-card)!important;
  color:var(--fb-u-text)!important;
  border:1px solid var(--fb-u-line)!important;
  border-left:5px solid var(--fb-u-primary)!important;
  border-radius:var(--fb-u-radius-lg)!important;
  padding:20px 22px!important;
  margin:0 0 18px!important;
  box-shadow:var(--fb-u-shadow)!important;
  text-align:left!important;
}
.hero h1,.page-header h1,.head h1,.top h1,.lohn-hero h1,.header h1,.main-header h1,.dashboard-hero h1,
.hero .title,.page-header .title,.head .title,.top .title{color:var(--fb-u-text)!important;text-shadow:none!important}
.hero p,.page-header p,.head p,.top p,.lohn-hero p,.header p,.main-header p{color:var(--fb-u-muted)!important;margin:6px 0 0!important}

/* Karten und Boxen */
.card,.box,.panel,.content-box,.portal-card,.month-card,.filter-box,.stat-card,.kpi,.lohn-card,
section.card,.list-card,.paid-accordion,.modal,.notice-card,.settings-card,.form-card,.table-card,.row-card,
.tx,.linkcard,.expense-panel,.suggestion,.details,details{
  background:var(--fb-u-card)!important;
  color:var(--fb-u-text)!important;
  border:1px solid var(--fb-u-line)!important;
  border-radius:var(--fb-u-radius-lg)!important;
  box-shadow:var(--fb-u-shadow-soft)!important;
}
.card,.box,.panel,.content-box,.portal-card,.month-card,.filter-box,.lohn-card,.list-card,.settings-card,.form-card,.table-card,
.notice-card,.expense-panel,.suggestion,.details,details{padding:16px!important;margin-bottom:14px!important}

/* Statistik-Karten */
.stat,.stat-card,.lohn-stat,.kpi,.summary-card,.info-card{
  background:var(--fb-u-card)!important;
  border:1px solid var(--fb-u-line)!important;
  border-radius:var(--fb-u-radius)!important;
  box-shadow:var(--fb-u-shadow-soft)!important;
  padding:15px!important;
}
.stat small,.stat-card small,.card .k,.lohn-stat small,label,.label,.field-label{
  color:var(--fb-u-muted)!important;
  font-size:11px!important;
  font-weight:800!important;
  text-transform:uppercase!important;
  letter-spacing:.065em!important;
}
.stat strong,.stat-card strong,.card .v,.lohn-stat strong{font-size:1.35rem!important;color:var(--fb-u-text)!important;font-weight:850!important;letter-spacing:-.03em!important}

/* Formulare */
input,select,textarea,.input,.textarea,.payment-input,.modal .input{
  background:#fff!important;
  color:var(--fb-u-text)!important;
  border:1px solid #cbd5e1!important;
  border-radius:12px!important;
  padding:10px 12px!important;
  box-shadow:none!important;
  max-width:100%!important;
  font:inherit!important;
  min-height:40px!important;
}
textarea{min-height:96px!important}
input::placeholder,textarea::placeholder{color:#8492a6!important}
input:focus,select:focus,textarea:focus,.input:focus,.textarea:focus{
  outline:3px solid rgba(37,99,235,.14)!important;
  border-color:#3b82f6!important;
}
label{margin-bottom:6px!important;display:block!important}

/* Buttons */
.btn,.button,.lohn-btn,.lohn-actions button,button[type=submit],input[type=submit],a.btn,.payment-submit,.pdf-btn,.action-btn{
  border-radius:10px!important;
  min-height:38px!important;
  padding:9px 13px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  background:var(--fb-u-primary)!important;
  color:#fff!important;
  border:1px solid var(--fb-u-primary)!important;
  font-weight:800!important;
  font-size:13px!important;
  text-decoration:none!important;
  box-shadow:none!important;
  cursor:pointer!important;
  text-transform:none!important;
  white-space:nowrap!important;
}
.btn:hover,.button:hover,.lohn-btn:hover,button[type=submit]:hover,a.btn:hover{background:var(--fb-u-primary2)!important;border-color:var(--fb-u-primary2)!important;color:#fff!important;text-decoration:none!important;transform:none!important;filter:none!important}
.btn.secondary,.btn.light,.button.warn,.btn-secondary,.btn.ghost,.lohn-btn.light,.status-btn,.drop-btn,.button.pdf{
  background:#fff!important;
  color:var(--fb-u-text)!important;
  border:1px solid var(--fb-u-line)!important;
}
.btn.secondary:hover,.btn.light:hover,.button.warn:hover,.btn-secondary:hover,.btn.ghost:hover,.status-btn:hover,.button.pdf:hover{background:var(--fb-u-soft)!important;color:var(--fb-u-text)!important;border-color:#cbd5e1!important}
.btn.ok,.btn.okbtn,.lohn-btn.gold,.success,.button.success{background:var(--fb-u-green)!important;border-color:var(--fb-u-green)!important;color:#fff!important}
.btn.warn,.button.danger-warning{background:var(--fb-u-orange)!important;border-color:var(--fb-u-orange)!important;color:#fff!important}
.btn.danger,.btn.red,.lohn-btn.red,.button.delete,.button.danger{background:var(--fb-u-red)!important;border-color:var(--fb-u-red)!important;color:#fff!important}
.toolbar,.actions,.lohn-actions,.inline{gap:8px!important;flex-wrap:wrap!important}

/* Tabellen: mehr echte Software-Optik, weniger Kartenchaos */
.table-wrap,.lohn-table-wrap,.paid-table-wrap{background:transparent!important;border-radius:var(--fb-u-radius-lg)!important;overflow:auto!important}
table,.table,.rp-table,.lohn-table,.mini-table,.paid-table{
  background:#fff!important;
  color:var(--fb-u-text)!important;
  border-collapse:collapse!important;
  border-spacing:0!important;
  width:100%!important;
  border:1px solid var(--fb-u-line)!important;
  border-radius:var(--fb-u-radius-lg)!important;
  overflow:hidden!important;
}
thead th,.table th,.lohn-table th,.mini-table th,.paid-table th{
  background:#f1f5f9!important;
  color:#334155!important;
  border:0!important;
  border-bottom:1px solid var(--fb-u-line)!important;
  padding:11px 12px!important;
  font-size:11px!important;
  font-weight:850!important;
  text-transform:uppercase!important;
  letter-spacing:.065em!important;
  text-align:left!important;
  white-space:nowrap!important;
}
tbody tr{background:#fff!important;border-radius:0!important;box-shadow:none!important}
tbody tr:hover{background:#f8fafc!important}
tbody td,.table td,.lohn-table td,.mini-table td,.paid-table td{
  background:transparent!important;
  color:var(--fb-u-text)!important;
  border:0!important;
  border-bottom:1px solid var(--fb-u-line2)!important;
  padding:12px!important;
  vertical-align:middle!important;
}
tbody td:first-child,.table td:first-child,.lohn-table td:first-child,.mini-table td:first-child,.paid-table td:first-child{border-left:0!important;border-radius:0!important}
tbody td:last-child,.table td:last-child,.lohn-table td:last-child,.mini-table td:last-child,.paid-table td:last-child{border-right:0!important;border-radius:0!important}
tbody tr:last-child td{border-bottom:0!important}

/* Status */
.badge,.pill,.status-pill,.lohn-badge{
  border-radius:999px!important;
  padding:5px 9px!important;
  font-size:11px!important;
  font-weight:850!important;
  display:inline-flex!important;
  align-items:center!important;
  gap:5px!important;
  text-transform:none!important;
  border:1px solid transparent!important;
}
.badge.offen,.pill.open,.status-pill.offen,.open{background:#eef2ff!important;color:#1e3a8a!important;border-color:#dbeafe!important}
.badge.teilbezahlt,.status-pill.teilbezahlt,.teilbezahlt{background:#eff6ff!important;color:#1d4ed8!important;border-color:#bfdbfe!important}
.badge.bezahlt,.pill.paid,.status-pill.bezahlt,.paid{background:#dcfce7!important;color:#166534!important;border-color:#bbf7d0!important}
.badge.ueberfaellig,.status-pill.ueberfaellig,.ueberfaellig{background:#fee2e2!important;color:#991b1b!important;border-color:#fecaca!important}
.badge.locked,.locked,.festgeschrieben{background:#e2e8f0!important;color:#334155!important;border-color:#cbd5e1!important}

/* Hinweise und Dropdowns */
.msg,.notice,.note,.warnbox,.empty,.lohn-notice,.alert{
  border-radius:var(--fb-u-radius)!important;
  box-shadow:none!important;
  padding:12px 14px!important;
  font-weight:750!important;
}
.msg.ok,.notice.ok,.lohn-notice.ok,.alert-success{background:#ecfdf3!important;border:1px solid #bbf7d0!important;color:#166534!important}
.msg.err,.notice.err,.lohn-notice.warn,.alert-error,.error{background:#fef2f2!important;border:1px solid #fecaca!important;color:#991b1b!important}
.notice,.note,.empty{background:#f8fafc!important;border:1px solid var(--fb-u-line)!important;color:var(--fb-u-muted)!important}
.dropdown,.menu-dropdown,.action-menu{
  background:#fff!important;
  color:var(--fb-u-text)!important;
  border:1px solid var(--fb-u-line)!important;
  border-radius:var(--fb-u-radius)!important;
  box-shadow:0 18px 38px rgba(15,23,42,.12)!important;
}
.drop-item,.dropdown a,.dropdown button{color:var(--fb-u-text)!important}
.drop-item:hover,.dropdown a:hover,.dropdown button:hover{background:var(--fb-u-soft)!important;color:var(--fb-u-primary)!important;text-decoration:none!important}
.kebab,.icon-button{
  border:1px solid #cbd5e1!important;
  background:#fff!important;
  color:var(--fb-u-text)!important;
  border-radius:10px!important;
}
.kebab:hover,.icon-button:hover{background:#eff6ff!important;color:var(--fb-u-primary)!important}
summary{color:var(--fb-u-text)!important;font-weight:850!important;cursor:pointer!important}

/* Listen-/Bankkarten */
.tx{overflow:hidden!important;margin-bottom:12px!important}
.tx-head{background:#fff!important;border-bottom:1px solid var(--fb-u-line)!important}
.tx-body{background:#fff!important}
.suggestion{background:#f8fafc!important}

/* Modal neutralisieren */
.modal-backdrop{background:rgba(15,23,42,.58)!important;backdrop-filter:blur(4px)!important}
.modal{background:#fff!important;border:1px solid var(--fb-u-line)!important;text-align:left!important}

/* Lohnbereich angleichen */
.lohn-hero{border-left-color:var(--fb-u-primary)!important}.lohn-card{background:#fff!important}.lohn-table{min-width:860px}

/* Mobile */
@media(max-width:980px){
  .wrap,.page,.container,.main,.content,.content-wrap,.lohn-wrap,main:not(.fb-app-nav){padding-left:12px!important;padding-right:12px!important;margin-top:18px!important}
  .hero,.page-header,.head,.top,.lohn-hero,.header,.main-header{border-radius:16px!important;padding:16px!important}
}
@media(max-width:760px){
  .btn,.button,.lohn-btn,button[type=submit],input[type=submit],a.btn{width:100%!important;white-space:normal!important}
  .card,.box,.panel,.lohn-card,.list-card,.settings-card,.form-card,.table-card{padding:14px!important}
  table:not(.keep-table),thead:not(.keep-table thead),tbody:not(.keep-table tbody),tr:not(.keep-table tr),td:not(.keep-table td){display:block!important;width:100%!important}
  thead{display:none!important}
  tbody tr{border:1px solid var(--fb-u-line)!important;border-radius:14px!important;margin-bottom:12px!important;background:#fff!important;overflow:hidden!important}
  tbody td{display:flex!important;justify-content:space-between!important;align-items:flex-start!important;gap:12px!important;border-bottom:1px solid var(--fb-u-line2)!important;text-align:right!important}
  tbody td::before{content:attr(data-label);font-size:11px;font-weight:850;text-transform:uppercase;letter-spacing:.06em;color:var(--fb-u-muted);text-align:left;min-width:110px}
}
@media print{
  body{background:#fff!important;padding-left:0!important;padding-top:0!important}
  .fb-app-nav{display:none!important}
  .wrap,.page,.container,.main,.content,.content-wrap,.lohn-wrap,main:not(.fb-app-nav){max-width:none!important;margin:0!important;padding:0!important}
  .hero,.page-header,.head,.top,.card,.box,.panel,.lohn-card{box-shadow:none!important;border-radius:0!important}
}