/* =========================================================================
   Blatt-Picker (App-weit): Auswahlfelder als Knopf + Blatt (mobil) / Popover (Desktop).
   Server-gerendert: Buchhaltung/_account_picker.php, _year_picker.php, _select_picker.php (Klassen acp-*).
   Automatisch aufgewertet: jedes <select> per public/assets/js/app-picker.js (Klassen pk-*).
   Regel: CLAUDE.md „Auswahl-Filter als Blatt-Picker“. Farben nur über Tokens.
   ========================================================================= */
.acp { position: relative; display: inline-flex; min-width: 0; }
.acp-native { position: absolute; width: 1px !important; min-width: 0 !important; max-width: 1px !important; height: 1px !important; min-height: 0 !important; opacity: 0; pointer-events: none; overflow: hidden; clip-path: inset(50%); }
.acp-btn { display: inline-flex; align-items: center; gap: .45rem; min-height: 40px; min-width: 210px; max-width: 100%; padding: 0 .75rem; border: 1px solid var(--border); border-radius: var(--radius-md, 12px);
  background: var(--panel); color: var(--text); font: inherit; font-size: .88rem; cursor: pointer; text-align: left; }
.acp-btn.is-set { border-color: var(--accent-fill); }
.acp-btn:focus-visible { outline: 2px solid var(--accent-ring, var(--accent-fill)); outline-offset: 1px; }
.acp-cur { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.acp-ic { display: inline-flex; color: var(--wc-gold); } .acp-ic[hidden] { display: none; }
.acp-ic svg, .acp-dd svg, .acp-hint svg { width: 1em; height: 1em; }
.acp-dd { display: inline-flex; color: var(--text-muted); }
.acp-sheet .app-sheet-body { padding-bottom: 1rem; }
.acp-grp { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin: .9rem .2rem .3rem; }
.acp-row { display: flex; align-items: stretch; gap: .35rem; margin-bottom: .35rem; }
.acp-opt { display: flex; align-items: center; gap: .65rem; flex: 1 1 0; min-width: 0; min-height: 56px; padding: .5rem .75rem; border: 1px solid var(--border); border-radius: var(--radius-md, 12px);
  background: var(--panel); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.acp-opt.acp-big { width: 100%; margin-bottom: .35rem; }
.acp-opt.is-sel { border-color: var(--accent-fill); background: var(--accent-soft); }
.acp-kind { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 34px; inline-size: 34px; block-size: 34px; border-radius: 10px; background: var(--inset); color: var(--text-muted); }
.acp-kind svg { width: 18px; height: 18px; }
.acp-kind.is-fav { background: color-mix(in srgb, var(--wc-gold) 22%, transparent); color: var(--wc-gold); }
.acp-txt { display: flex; flex-direction: column; flex: 1 1 0; min-width: 0; line-height: 1.25; }
.acp-txt b { font-weight: 700; font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acp-txt small { font-size: .82rem; font-variant-numeric: tabular-nums; color: var(--text-muted); }
.acp-txt small.is-neg { color: var(--bad); }
.acp-chk { display: inline-flex; color: var(--accent-text); visibility: hidden; }
.acp-chk svg { width: 18px; height: 18px; }
.acp-opt.is-sel .acp-chk { visibility: visible; }
.acp-star { flex: 0 0 48px; inline-size: 48px; border: 1px solid var(--border); border-radius: var(--radius-md, 12px); background: var(--panel); color: var(--text-muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.acp-star svg { width: 22px; height: 22px; }
.acp-star.is-on { color: var(--wc-gold); border-color: color-mix(in srgb, var(--wc-gold) 55%, var(--border)); background: color-mix(in srgb, var(--wc-gold) 14%, var(--panel)); }
.acp-star.is-on svg, .acp-star.is-on svg * { fill: currentColor; }
.acp-star:disabled { opacity: .5; }
.acp-hint { display: flex; gap: .4rem; align-items: flex-start; margin: 1rem .2rem 0; font-size: .78rem; color: var(--text-muted); }
@media (max-width: 768px) {
  .wcs-filter:has(.wcs-search):not(.is-open) .acp { display: none; }
  .acp, .acp-btn { width: 100%; }
}
.acp-year .acp-btn { min-width: 130px; }
.acp-year .acp-sheet .acp-apply { width: 100%; margin-top: .75rem; min-height: 46px; }
.acp-year .acp-opt[aria-pressed="true"] { border-color: var(--accent-fill); background: var(--accent-soft); }
@media (max-width: 768px) { .acp-year .acp-btn { min-width: 0; } }

.acp-wide .acp-btn { min-width: 260px; }
@media (max-width: 768px) { .acp-wide .acp-btn { min-width: 0; } }
.acp-search { display: flex; align-items: center; gap: .5rem; min-height: 44px; padding: 0 .75rem; margin-bottom: .6rem; border: 1px solid var(--border); border-radius: var(--radius-md, 12px); background: var(--inset); position: sticky; top: 0; z-index: 1; }
.acp-search svg { width: 1em; height: 1em; color: var(--text-muted); }
.acp-search input { flex: 1 1 0; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; font-size: 16px; }
.acp-opt[hidden] { display: none; }

/* ---- Aufgewertete <select> (app-picker.js) ----------------------------------------------------------------------------- */
select.pk-native { position: absolute !important; width: 1px !important; min-width: 0 !important; max-width: 1px !important; height: 1px !important; min-height: 0 !important; max-height: 1px !important; opacity: 0; pointer-events: none; overflow: hidden; margin: 0 !important; padding: 0 !important; border: 0 !important; clip-path: inset(50%); }
.pk-btn { display: inline-flex; align-items: center; gap: .45rem; min-height: 40px; min-width: 0; max-width: 100%; padding: 0 .7rem; border: 1px solid var(--border); border-radius: var(--radius-md, 12px);
  background: var(--panel); color: var(--text); font: inherit; font-size: .9rem; cursor: pointer; text-align: left; vertical-align: middle; box-sizing: border-box; }
.pk-btn[hidden] { display: none; }
.pk-btn:disabled { opacity: .55; cursor: not-allowed; }
.pk-btn:focus-visible { outline: 2px solid var(--accent-ring, var(--accent-fill)); outline-offset: 1px; }
.pk-btn.is-set { border-color: var(--accent-fill); }
.pk-btn.pk-block { display: flex; width: 100%; }
.pk-btn.pk-sm { min-height: 34px; padding: 0 .5rem; font-size: .82rem; border-radius: 10px; }
.pk-btn.is-empty .pk-cur { color: var(--text-muted); font-weight: 500; }
.pk-cur { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: .3rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 600; }
.pk-dd { display: inline-flex; color: var(--text-muted); flex: 0 0 auto; }
.pk-dd svg { width: 1em; height: 1em; }
.pk-chip { display: inline-flex; align-items: center; max-width: 11em; padding: .1rem .5rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent-text); font-size: .78rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-more { font-size: .78rem; font-weight: 700; color: var(--text-muted); }
.pk-sheet .pk-list { display: block; }
.pk-sheet .acp-opt { margin-bottom: .3rem; }
.pk-sheet .acp-opt:disabled { opacity: .45; cursor: not-allowed; }
.pk-sheet.pk-multi .acp-chk { display: none; }
.pk-box { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 22px; inline-size: 22px; block-size: 22px; border: 2px solid var(--border-strong, var(--border)); border-radius: 7px; color: var(--on-accent); background: transparent; }
.pk-box svg { width: 14px; height: 14px; opacity: 0; }
.pk-opt.is-sel .pk-box { background: var(--accent-fill); border-color: var(--accent-fill); }
.pk-opt.is-sel .pk-box svg { opacity: 1; }
.pk-tools { display: none; gap: .5rem; margin-bottom: .6rem; }
.pk-sheet.pk-multi .pk-tools { display: flex; }
.pk-tools button { flex: 1 1 0; min-height: 38px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); color: var(--text); font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; }
.pk-apply { display: none; width: 100%; margin-top: .75rem; min-height: 46px; }
.pk-sheet.pk-multi .pk-apply { display: block; }
.pk-empty { padding: 1rem .5rem; text-align: center; color: var(--text-muted); font-size: .88rem; }

/* ---- Desktop: Popover statt Dialog (Blatt bleibt mobil Bottom-Sheet) -------------------------------------------------- */
.app-sheet.is-pop { position: fixed !important; left: var(--pk-l, 0) !important; top: var(--pk-t, 0) !important; right: auto !important; bottom: auto !important;
  width: var(--pk-w, 320px) !important; max-height: var(--pk-h, 380px) !important; transform: none !important; transition: none !important; padding-bottom: 0 !important;
  display: flex !important; flex-direction: column; border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-lg, 0 18px 48px rgba(15,23,42,.28)); z-index: calc(var(--z-sheet, 10000) + 2); }
.app-sheet.is-pop .app-sheet-grip, .app-sheet.is-pop .app-sheet-head { display: none; }
.app-sheet.is-pop .app-sheet-body { padding: .6rem; }
.app-sheet.is-pop .acp-opt { min-height: 46px; padding: .35rem .6rem; }
.app-sheet.is-pop .acp-opt.acp-big { margin-bottom: .2rem; }
.app-sheet.is-pop .acp-search { margin-bottom: .45rem; }
.app-sheet.is-pop .acp-kind { flex-basis: 30px; inline-size: 30px; block-size: 30px; }

/* Filterleisten: Picker teilen sich die Zeile wie die übrigen Filterfelder */
.wcs-filter .pk-btn.pk-filter { min-width: 150px; }
@media (max-width: 768px) {
  .wcs-filter .pk-btn.pk-filter { flex: 1 1 calc(50% - .4rem); min-height: 44px; font-size: 16px; }
  .wcs-filter:has(.wcs-search):not(.is-open) .pk-btn { display: none; }
  .pk-btn { min-height: 44px; font-size: 16px; }
  .pk-btn.pk-sm { min-height: 40px; font-size: 15px; }
}
@media (max-width: 768px) {
  .wcs-filter .pk-btn.pk-filter, .rp-f .pk-btn { min-width: 0 !important; width: 100%; box-sizing: border-box; }
}
@media (max-width: 768px) { .acp-btn { min-width: 0 !important; } .acp { min-width: 0; max-width: 100%; } }

/* Picker in Scroll-Containern: Bezugsrahmen für das versteckte Original-<select> (sonst verbreitert es die Seite) */
.table-responsive, .tbl-scroll { position: relative; }