/* Modul "Apps" (js/apps.mjs, js/app-detail.mjs, js/app-prices.mjs) */

.apps-kopf-knoepfe { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.apps-zeitraum { display: inline-flex; gap: 2px; margin-bottom: 16px; flex-wrap: wrap; background: #e6ebf3; padding: 3px; border-radius: var(--r-s); }
.apps-zeitraum-knopf { border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: 6px; cursor: pointer; transition: background var(--t), color var(--t); }
.apps-zeitraum-knopf:hover { color: var(--text); }
.apps-zeitraum-knopf:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.apps-zeitraum-knopf.active { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.apps-monat { border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 12.5px; font-weight: 600; padding: 6px 8px; border-radius: 6px; cursor: pointer; }
.apps-monat:hover { color: var(--text); }
.apps-monat:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.apps-monat.active { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.apps-projektliste { max-height: 168px; overflow-y: auto; border: 1px solid var(--border, #e2e8f0); border-radius: var(--r-s); padding: 6px 8px; background: var(--surface); }
.field .apps-projekt { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text); padding: 3px 0; cursor: pointer; }
.field .apps-projekt input { width: auto; margin: 0; padding: 0; flex: none; accent-color: var(--accent); }
.field .apps-projekt[hidden] { display: none; }
.field .apps-projekt-belegt { color: var(--muted); cursor: not-allowed; }
.field .apps-projekt .apps-sub { margin-left: auto; }
.field .apps-projektsuche { margin-bottom: 6px; padding: 7px 10px; font-size: 13px; }
.apps-projekt-leer { padding: 6px 0; }
.apps-kpis { grid-template-columns: repeat(4, 1fr); margin-bottom: 16px; }
.apps-kpis-3 { grid-template-columns: repeat(3, 1fr); }
.apps-laden, .chart-leer { color: var(--muted); font-size: 13px; padding: 24px 0; text-align: center; }

.apps-table td.num, .apps-table th.num, .apps-mini td.num, .apps-mini th.num { text-align: right; font-variant-numeric: tabular-nums; }
.apps-table td { vertical-align: top; }
.apps-table th.sortable { cursor: pointer; user-select: none; }
.apps-table th.sortable:hover { color: var(--accent); }
.apps-name { font-weight: 600; }
.apps-sub { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.apps-flags { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.apps-flag { font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 999px; }
.apps-flag-schlaf { background: #f3f4f6; color: #4b5563; }
.apps-flag-warn { background: #fef3c7; color: #92400e; }
.apps-negativ { color: #b91c1c; font-weight: 600; }
.apps-hinweis { font-size: 11px; color: #92400e; font-weight: 600; }

.apps-messart { font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.apps-messart-server { background: #ecfdf5; color: #047857; }
.apps-messart-kunde_lokal { background: #eff6ff; color: #1d4ed8; }
.apps-messart-keine { background: #f3f4f6; color: #6b7280; }

.apps-leer { display: flex; flex-direction: column; gap: 12px; align-items: center; padding: 40px 0; }
.apps-fehler { background: #fef2f2; color: #991b1b; border-radius: var(--r-s); padding: 10px 14px; margin-bottom: 14px; font-size: 13px; }
.apps-hinweisbox { background: #f8fafc; border: 1px solid var(--border); border-radius: var(--r-s); padding: 10px 14px; margin-bottom: 14px; font-size: 13px; line-height: 1.5; }
.apps-hinweisbox code, .apps-key code { background: #eef2f7; padding: 1px 5px; border-radius: 4px; font-size: 12px; word-break: break-all; }

.apps-detail-kopf { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.apps-panel { background: var(--surface); border-radius: var(--r-m); box-shadow: var(--shadow); padding: 16px 18px; margin-bottom: 16px; }
.apps-panel-titel { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 10px; }
.apps-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.apps-zwei .apps-panel { margin-bottom: 0; }
.apps-zwei { margin-bottom: 16px; }
.apps-aktionen { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.apps-schluessel { display: inline-flex; gap: 8px; align-items: center; }
.apps-key { display: flex; gap: 8px; align-items: center; margin-top: 8px; flex-wrap: wrap; }

.chart { display: block; max-height: 180px; }
.chart .bar { cursor: default; }
.chart g:hover path { opacity: .8; }
.sparkline { display: block; }

.apps-mini { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.apps-mini th { text-align: left; color: var(--muted); font-weight: 600; padding: 4px 6px; border-bottom: 1px solid var(--border); }
.apps-mini td { padding: 6px; border-bottom: 1px solid var(--border); vertical-align: top; }

.hbalken { display: flex; flex-direction: column; gap: 8px; }
.hbalken-zeile { display: grid; grid-template-columns: minmax(90px, 38%) 1fr auto; gap: 10px; align-items: center; font-size: 12.5px; }
.hbalken-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbalken-spur { height: 10px; background: #f1f4f9; border-radius: 4px; overflow: hidden; }
.hbalken-wert { display: block; height: 100%; border-radius: 0 4px 4px 0; min-width: 2px; }
.hbalken-zahl { font-variant-numeric: tabular-nums; color: var(--text); min-width: 36px; text-align: right; }

@media (max-width: 760px) {
  .apps-kpis, .apps-kpis-3 { grid-template-columns: 1fr 1fr; }
  .apps-zwei { grid-template-columns: 1fr; }
  .apps-table th:nth-child(4), .apps-table td:nth-child(4) { display: none; }
}

.apps-monatspanel { margin-top: 16px; }
.apps-monatswrap { overflow-x: auto; }
.apps-monatstabelle { min-width: 760px; font-size: 12.5px; }
.crm-table.apps-monatstabelle thead th, .crm-table.apps-monatstabelle td { white-space: nowrap; padding: 8px 6px; }
.crm-table.apps-monatstabelle thead th:first-child, .crm-table.apps-monatstabelle td:first-child { padding-left: 14px; }
.apps-monatstabelle td:first-child, .apps-monatstabelle th:first-child { position: sticky; left: 0; background: var(--surface); }
.apps-monatstabelle tbody tr { cursor: default; }
.apps-monatstabelle tfoot td { font-weight: 700; border-top: 1.5px solid var(--border); }
.apps-monatstabelle .apps-summe { font-weight: 700; }
.apps-leerzelle { color: var(--muted); }