/* =========================================================
   ABRECHNUNG – Tabellenoptik
   (setzt auf css/global.css Komponenten)
   ========================================================= */

/* Kleine Hervorhebung für "Was-wäre-wenn" Sprung */


@keyframes spPulse{
  0%{ transform: translateY(0); box-shadow: 0 0 0 rgba(0,0,0,0); }
  30%{ transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,0.12); }
  100%{ transform: translateY(0); box-shadow: 0 0 0 rgba(0,0,0,0); }
}

.header-actions { display:flex; gap:10px; }

.controls { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.select { padding:10px 12px; border:1px solid var(--border); border-radius:12px; background:var(--card); color:var(--text); }

.hint { margin-top:10px; font-size:13px; color:var(--muted); line-height:1.35; }

.grid-2 { display:grid; grid-template-columns: 1fr 1fr; gap:16px; }







.pill { padding:12px 14px; border:1px solid var(--border); border-radius:999px; }
.pill .label { font-size:12px; color:var(--muted); }
.pill .value { font-size:14px; font-weight:800; margin-top:4px; }

.table-wrap { width:100%; overflow:auto; }
table { width:100%; border-collapse:separate; border-spacing:0; }
th, td { text-align:left; padding:10px 12px; border-bottom:1px solid var(--border); vertical-align:top; }
th { position:sticky; top:0; background:var(--card); z-index:2; font-size:12px; color:var(--muted); }
.mini-table th { position:static; }
.mini-table td { font-size:13px; }

.big-table td { font-size:13px; }
.big-table tbody tr:hover td { background: rgba(87,6,140,0.04); }
.sum td { font-weight:800; }
.sum td { border-top:2px solid var(--border); }

.section { margin-top:14px; font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:0.06em; }


.muted { color: var(--muted); }


details.details { margin-top:14px; border:1px solid var(--border); border-radius:16px; padding:10px 12px; background: var(--card-2); }
details.details summary { cursor:pointer; font-weight:700; }
.details-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap:12px; margin-top:12px; }
.detailbox { border:1px solid var(--border); border-radius:14px; padding:12px; }
.detailbox .h { font-weight:800; margin-bottom:6px; }
.detailbox .line { font-size:14px; font-weight:800; }
.detailbox .sub { font-size:12px; color:var(--muted); margin-top:6px; line-height:1.35; }

@media (max-width: 980px) {
  .grid-2 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
  .details-grid { grid-template-columns: 1fr; }
  th { position:static; }
}

@media print {
  header.app-header, .controls, #hintTaxRule, details.details { display:none !important; }
  body { background:#fff; color:#000; }
  .card { box-shadow:none; border:1px solid #ddd; }
  th { background:#fff; position:static; }
}


/* Einmalzahlungen Inputs */



.sub{ font-size:12px; color:var(--muted); margin-left:10px; font-weight:600; }


/* kompakte Tabellen in Detailboxen */
.tbl.mini th, .tbl.mini td { padding: 6px; font-size: 12px; }
.muted { color: var(--muted); font-size: 12px; }


/* =========================================================
   V18 – UI polish (ohne Logikänderungen)
   ========================================================= */

/* Cards: etwas klarere Trennung */
.card-header{
  padding-bottom:10px;
  border-bottom:1px solid rgba(0,0,0,0.06);
}
.card-header h2{
  font-size:16px;
  font-weight:900;
  letter-spacing:0.2px;
}
.card-header h3{
  font-size:14px;
  font-weight:900;
}

/* Key/Value Grid: auto-fit für bessere Optik */







/* Pills (Schnellübersicht) */
.pill{
  background: linear-gradient(180deg, var(--card-2), #fff);
  border:1px solid rgba(0,0,0,0.08);
  box-shadow: 0 6px 18px rgba(0,0,0,0.03);
  min-width: 180px;
}
.pill .value{ font-size:15px; }

/* Table wrapper: einheitlicher Rahmen + Radius */
.table-wrap{
  border:1px solid rgba(0,0,0,0.08);
  border-radius:16px;
  background:var(--card);
}
table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
}
th, td{ border-bottom:1px solid rgba(0,0,0,0.08); }
thead th{
  background: var(--card-2);
}
tbody tr:nth-child(even) td{
  background: rgba(0,0,0,0.015);
}
tbody tr:hover td{
  background: rgba(87,6,140,0.045);
}

/* Zahlen rechtsbündig */
.big-table th:nth-child(4), .big-table td:nth-child(4),
.big-table th:nth-child(5), .big-table td:nth-child(5){ text-align:right; }
.big-table th:nth-child(2), .big-table td:nth-child(2){ color:var(--muted); }

.mini-table th:not(:first-child), .mini-table td:not(:first-child){ text-align:right; }

/* SV Tabelle: Bemessung/Satz/Abzug rechts */
table.tbl th:nth-child(2), table.tbl td:nth-child(2),
table.tbl th:nth-child(3), table.tbl td:nth-child(3),
table.tbl th:nth-child(4), table.tbl td:nth-child(4){
  text-align:right;
}

/* SFN Detail: alles außer 'Art' rechts */
.tbl.mini th:not(:first-child), .tbl.mini td:not(:first-child){ text-align:right; }

/* Summenzeilen deutlich */
tfoot tr.sum td{
  background: rgba(87,6,140,0.06);
}
tfoot tr.sum td{ border-top:2px solid rgba(0,0,0,0.10); }

/* Inputs */

@media (max-width: 540px){
  .input-money{ width: 100%; }
  .pill{ min-width: 0; flex: 1 1 180px; }
}

/* Details: etwas luftiger */
details.details{
  background: linear-gradient(180deg, var(--card-2), #fff);
}
.detailbox{
  background: linear-gradient(180deg, var(--card-2), #fff);
  border:1px solid rgba(0,0,0,0.08);
  box-shadow: 0 6px 18px rgba(0,0,0,0.03);
}


/* =========================================================
   V20 – Abrechnung kompakter (Abstände reduziert)
   ========================================================= */

.page-abrechnung .header-inner{
  padding:12px 14px;
}

.page-abrechnung .container{
  padding:12px;
}

.page-abrechnung .card{
  padding:12px;
}

.page-abrechnung .card-header{
  padding-bottom:8px;
  margin-bottom:10px;
}

.page-abrechnung .controls{ gap:8px; }
.page-abrechnung .hint{ margin-top:6px; }







.page-abrechnung .pill{
  padding:10px 12px;
}

.page-abrechnung .table-wrap{
  border-radius:14px;
}

.page-abrechnung th,
.page-abrechnung td{
  padding:9px 10px;
}

.page-abrechnung details.details{
  padding:10px 12px;
}

.page-abrechnung .detailbox{
  padding:10px 12px;
}

@media (max-width: 900px){
  .page-abrechnung .container{ padding:10px; }
  .page-abrechnung .card{ padding:10px; }
  .page-abrechnung th, .page-abrechnung td{ padding:8px 9px; }
}

@media (max-width: 520px){
  .page-abrechnung .grid-2,
  .page-abrechnung .grid-3{
    gap:10px;
  }
  .page-abrechnung .kv{ padding:9px; }
}


/* =========================================================
   V21 – Druckansicht
   - nur Zeilen mit Beträgen (Bezüge/Abzüge Tabelle)
   - UI-Controls ausblenden
   ========================================================= */
@media print{
  body{ background:#fff !important; }
  .topbar, .nav, .nav-actions, .controls, .hint, .btn, button, select, .print-hide{ display:none !important; }
  .container{ padding:0 !important; max-width:none !important; }
  .card{ box-shadow:none !important; border:1px solid rgba(0,0,0,0.18) !important; page-break-inside:avoid; }
  .table-wrap{ box-shadow:none !important; }
  /* Nur Zeilen mit Beträgen drucken */
  .big-table tr.empty{ display:none !important; }
  /* Tabellen kompakter im Druck */
  th, td{ padding:6px 8px !important; }
  h1,h2,h3{ page-break-after:avoid; }
  details{ display:none !important; }
}

/* =========================================================
   V20260201 – Abrechnung-Layout Neuaufbau (kompakt)
   ========================================================= */

.h2-compact {
  font-size: 15px;
  letter-spacing: .2px;
}

.monthbar-controls {
  display:flex;
  gap: 8px;
  align-items:center;
  flex-wrap: nowrap;
}

.btn.btn-sm {
  padding: 8px 10px;
  border-radius: 12px;
  height: 34px;
  min-height: 34px;
  font-size: 13px;
}

.select.select-sm {
  padding: 7px 10px;
  border-radius: 12px;
  height: 34px;
  min-height: 34px;
  font-size: 13px;
}

.hint-details summary {
  cursor: pointer;
  font-size: 13px;
  color: var(--muted);
}








.deductions-summary {
  display:grid;
  gap: 6px;
  margin-bottom: 10px;
}
.deductions-summary .line {
  font-size: 14px;
}

.payout {
  display:flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: stretch;
}

.payout .label {
  font-size: 12px;
  color: var(--muted);
}
.payout-big .value {
  margin-top: 6px;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: .2px;
}


@media (max-width: 860px) {
  .grid-2 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
  .monthbar-controls { flex-wrap: wrap; }
}

/* =========================================================
   V20260201 – Feinschliff: kompakter & "aus einem Guss"
   (YTD-Summen entfernt)
   ========================================================= */



.page-abrechnung .card {
  border-radius: 16px;
}

.page-abrechnung .card-header {
  padding: 12px 14px 8px;
}

.page-abrechnung .card > :not(.card-header) {
  padding-left: 14px;
  padding-right: 14px;
}









.monthbar {
  padding-bottom: 0;
}

.monthbar .card-header {
  padding: 12px 14px;
}

.monthbar-controls {
  gap: 6px;
}

.btn.btn-sm, .select.select-sm {
  height: 32px;
  min-height: 32px;
  font-size: 12.5px;
  border-radius: 12px;
}

.h2-compact {
  font-size: 14px;
}

.deductions-summary .line {
  font-size: 13px;
}

.details-grid {
  gap: 10px;
}

.table {
  font-size: 13px;
}

.payout-big {
  padding: 12px;
}

.payout-big .value {
  font-size: 26px;
}

.hint {
  font-size: 12.5px;
}

/* =========================================================
   V20260201 – Aggressiv kompakt: Alles vor Brutto in ein Raster
   ========================================================= */

.pre-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}



.pre-grid .card {
  margin: 0;
  border-radius: 14px;
}

.pre-grid .card-header {
  padding: 8px 10px 6px;
}

.pre-grid .card > :not(.card-header):not(details) {
  padding-left: 10px;
  padding-right: 10px;
}

.pre-grid .h2-compact {
  font-size: 12px;
  letter-spacing: .1px;
}









.pre-grid .hint {
  font-size: 11.5px;
  padding: 8px 10px;
}

.pre-grid .table {
  font-size: 12px;
}

.pre-grid .monthbar .card-header {
  padding: 8px 10px;
}

.pre-grid .monthbar-controls {
  gap: 5px;
}

.pre-grid .btn.btn-sm, .pre-grid .select.select-sm {
  height: 28px;
  min-height: 28px;
  font-size: 11.5px;
  padding: 6px 8px;
  border-radius: 11px;
}

.pre-grid .hint-details summary {
  font-size: 11.5px;
}









@media (max-width: 520px) {
  .pre-grid { grid-template-columns: 1fr; }
}



/* ===== Zusätzliche Bezüge/Abzüge (einseitig) ===== */
.extras-card .extras-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 860px){
  .extras-card .extras-grid{ grid-template-columns: 1fr 1fr; }
}
.extras-title{ font-weight: 700; margin-bottom: 6px; }
.extras-help{ font-size: 12px; opacity: .8; margin-bottom: 8px; }
.extras-list{ display:flex; flex-direction:column; gap:8px; }
.extras-head{
  display:grid;
  grid-template-columns: 1.45fr .75fr 1fr .55fr auto;
  gap:6px;
  font-size:10px;
  opacity:.75;
  padding: 2px 2px 6px;
}
.extras-head span{ white-space:nowrap; }

.extra-line{
  display:grid;
  grid-template-columns: 1.45fr .75fr 1fr .55fr auto;
  gap:6px;
  align-items:center;
}

/* Manuelle Buchungen (Code + Betrag + Hinweis) */
.extras-head.manual-head{
  grid-template-columns: .95fr .75fr 1.55fr auto;
}
.manual-line{
  display:grid;
  grid-template-columns: .95fr .75fr 1.55fr auto;
  gap:6px;
  align-items:center;
}
.manual-line .in,
.manual-line .sel{
  width:100%;
  padding:6px 8px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  color: inherit;
  border-radius: 10px;
  font-size:12px;
}
.manual-line .in.amount{ text-align:right; }

.extra-line .in,
.extra-line .sel{
  width:100%;
  padding:6px 8px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  color: inherit;
  border-radius: 10px;
  font-size:12px;
}
.extra-line .in.amount{ text-align:right; }

.extra-line .sel{
  appearance:none;
}

.extra-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
}

.mini-check{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:10px;
  opacity:.9;
  white-space:nowrap;
}
.mini-check input[type="checkbox"]{
  width:12px;
  height:12px;
  margin:0;
}

.extra-del{
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: inherit;
  border-radius: 10px;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  cursor:pointer;
}
.extra-del:hover{ background: rgba(255,255,255,.10); }

@media (max-width: 720px){
  .extras-head{
    display:none;
  }
  .extra-line{
    grid-template-columns: 1fr .8fr;
    grid-auto-rows: auto;
  }
  .extra-line .sel.effect{ grid-column: 1 / -1; }
  .extra-line .sel.method{ grid-column: 1 / -1; }
  .extra-actions{
    grid-column: 1 / -1;
    justify-content:space-between;
  }
}

@media (max-width: 720px){
  .manual-line{ grid-template-columns: 1fr .8fr; grid-auto-rows:auto; }
  .manual-line .in.note{ grid-column: 1 / -1; }
  .manual-line .extra-actions{ grid-column: 1 / -1; justify-content:space-between; }
}

.extra-del{
  width: 24px;
  height: 24px;
  border-radius: 7px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.12);
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: .85;
}
.extra-del:active{ transform: scale(.98); }
.extra-del:hover{ opacity: 1; }
.extras-hint{ font-size:12px; opacity:.85; margin-top:10px; }


/* ===== Inline Extras (in Abrechnung) ===== */
.extras-inline{
  margin: 8px 0 10px;
  padding: 8px 10px;
  border: 1px dashed rgba(255,255,255,.16);
  border-radius: 10px;
  background: rgba(0,0,0,.10);
}
.extras-inline .extras-title{
  font-weight: 800;
  margin: 0 0 4px;
  font-size: 13px;
}
.extras-inline .extras-help{
  font-size: 11px;
  opacity: .82;
  margin: 0 0 6px;
  line-height: 1.25;
}
.extras-inline .extras-list{
  display: grid;
  gap: 6px;
}
.extras-inline .row, 
.extras-inline input,
.extras-inline select{
  font-size: 13px;
}


.payout-split{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 12px;
}
@media (min-width: 860px){
  .payout-split{ grid-template-columns: 1fr 1fr; }
}
.payout-final{ border-left: none; }
@media (min-width: 860px){
  .payout-final{
    border-left: 1px solid rgba(255,255,255,.12);
    padding-left: 12px;
  }
}
.subcard{
  margin: 10px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid rgba(0,0,0,0.10);
  background: transparent;
}
.subhead{ font-weight: 800; margin-bottom: 8px; }
.tbl.small-table td:first-child{ opacity:.9; }
.tbl.small-table td:last-child{ text-align:right; font-variant-numeric: tabular-nums; }

.payout{display:block;}

/* Mini-Checkbox zum Ausblenden einzelner Einträge (pro Monat) */
.row-label{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.mini-toggle{display:inline-flex; align-items:center; gap:6px; font-size:11px; opacity:.85; user-select:none;}
.mini-toggle input{width:14px; height:14px;}


.extras-inline-top{ margin-top: 0; margin-bottom: 10px; }
.extras-master-toggle{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  font-weight:700;
  margin-top:6px;
}
.extras-master-toggle input[type="checkbox"]{
  width:12px;
  height:12px;
}
.is-hidden{ display:none !important; }



/* =========================================================
   Header (kompakt) + Monatsbar (modern)
   ========================================================= */

.app-header .subtitle{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:4px;
}
.meta-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  font-size:12px;
}
.btn-xs{
  padding:6px 10px;
  border-radius:10px;
  font-size:12px;
}
.btn-ghost{
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
}
.btn-ghost:hover{ background: rgba(255,255,255,.10); }

.monthbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.monthbar-left{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.monthbar-kicker{
  font-size:11px;
  opacity:.8;
}
.monthbar-title{
  font-size:18px;
  font-weight:900;
  letter-spacing:.2px;
}
.monthbar-hint{
  font-size:12px;
  opacity:.75;
}
.monthbar-right{
  display:flex;
  align-items:center;
  gap:8px;
}
.select-group{
  display:flex;
  gap:6px;
  align-items:center;
}

.icon-btn{
  width:36px;
  height:36px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: inherit;
  cursor:pointer;
  display:grid;
  place-items:center;
}
.icon-btn:hover{ background: rgba(255,255,255,.10); }

@media (max-width: 720px){
  .monthbar{
    flex-direction:column;
    align-items:stretch;
  }
  .monthbar-right{
    justify-content:space-between;
  }
  .select-group{
    flex:1;
    justify-content:center;
  }
  .header-actions{
    flex-wrap:nowrap;
    overflow:auto;
    padding-bottom:4px;
    -webkit-overflow-scrolling:touch;
  }
}

/* =========================================================
   V19 – Vereinheitlichte Abzüge-Ansicht (Baustein Optik)
   ========================================================= */

.h3-compact{
  margin: 6px 0 10px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .2px;
}

.deductions-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 12px;
}

.deductions-block{
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 12px;
  background: var(--card-2);
}

@media (max-width: 980px){
  .deductions-grid{ grid-template-columns: 1fr; }
}


/* Layout-Feinschliff: Abrechnung (DATEV) */
body.layout-datev .payout-final{ border-left:none !important; padding-left:0 !important; }
body.layout-datev .subcard{ border-top:1px solid rgba(0,0,0,0.10); background:transparent; margin:10px 0 0; padding:12px 0 0; }

/* Zusätzliche Eingaben am Seitenende */
.inputs-card .inputs-stack{ display:block; }
.inputs-card .extras-inline{ margin: 0 0 12px; }
.inputs-card .extras-inline:last-child{ margin-bottom: 0; }