/* =====================================================================
   Gemeinsames Design (aus dem Arbeitsprogramm übernommen)
   Alle neuen Module binden diese Datei ein – Änderungen gelten überall.
   ===================================================================== */
body { background-color: #f8fafc; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; margin: 0; padding: 0; }
.app-wrapper { display: block; min-height: 100vh; }
.topbar { background-color: #1e293b; color: #f1f5f9; display: flex; align-items: center; gap: 24px; padding: 0 24px; height: 52px; position: sticky; top: 0; z-index: 100; }
.topbar .brand { font-size: 14px; font-weight: 600; line-height: 1.15; white-space: nowrap; color: inherit; text-decoration: none; }
.topbar .brand span { display: block; font-size: 11px; font-weight: normal; color: #94a3b8; }
.topnav { display: flex; align-self: stretch; flex-grow: 1; }
.topnav a { display: flex; align-items: center; padding: 0 18px; color: #94a3b8; text-decoration: none; font-size: 14px; border-bottom: 3px solid transparent; transition: background 0.15s, color 0.15s; }
.topnav a:hover, .topnav a.active { background-color: #334155; color: #ffffff; }
.topnav a.active { border-bottom-color: #94a3b8; }
.topright { display: flex; align-items: center; gap: 18px; font-size: 13px; white-space: nowrap; }
.topright a { color: #94a3b8; text-decoration: none; }
.topright a:hover { color: #ffffff; }
.city-logo { font-size: 13px; color: #cbd5e1; font-weight: 500; }
.main-content { flex-grow: 1; display: flex; flex-direction: column; min-width: 0; }
.content-body { padding: 20px 24px; }
.card { border: 1px solid #e2e8f0 !important; border-radius: 4px; }
.card-header { background-color: #1e293b !important; color: #ffffff !important; font-weight: 500; border-bottom: none !important; }
.table-custom { background: white; border-radius: 4px; overflow: hidden; }
.table-custom thead th { background-color: #1e293b; color: white; border: none; font-weight: 500; font-size: 14px; padding: 10px 14px; }
.table-custom tbody td { padding: 10px 14px; vertical-align: middle; border-bottom: 1px solid #e2e8f0; font-size: 14px; }
.table-custom tbody tr:hover { background-color: #f1f5f9; }
.kpi { background: #fff; border: 1px solid #e2e8f0; border-radius: 4px; padding: 14px 18px; height: 100%; }
.kpi .lbl { font-size: 12px; color: #64748b; text-transform: uppercase; letter-spacing: .03em; }
.kpi .val { font-size: 22px; font-weight: 600; color: #1e293b; font-variant-numeric: tabular-nums; }
.kpi .sub { font-size: 12px; color: #64748b; }
.modal-header { background-color: #1e293b; color: #fff; border-bottom: none; }
.modal-header .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }

/* Portal-Kacheln */
.tile { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid #e2e8f0; border-radius: 4px; padding: 18px 20px; color: #1e293b; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
a.tile:hover { border-color: #94a3b8; box-shadow: 0 2px 10px rgba(15, 23, 42, .08); color: #1e293b; }
.tile .sym { width: 38px; height: 38px; border-radius: 4px; background: #1e293b; color: #f1f5f9; display: flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: 12px; }
.tile .ttl { font-size: 16px; font-weight: 600; }
.tile .txt { font-size: 13px; color: #64748b; margin-top: 4px; flex-grow: 1; }
.tile .tag { align-self: flex-start; margin-top: 12px; font-size: 11.5px; padding: 1px 8px; border-radius: 10px; background: #e2e8f0; color: #475569; }
.tile-off { opacity: .6; }
.tile-off .sym { background: #94a3b8; }

/* Status als Auswahlfeld (Klick öffnet die Liste der Status) */
.status-sel { appearance: auto; border: 0; border-radius: 10px; padding: 2px 4px; font-size: 12px; cursor: pointer; width: auto; max-width: 140px; }
.status-sel:focus { outline: 2px solid #94a3b8; outline-offset: 1px; }
.status-beauftragt { background: #6c757d; color: #fff; }
.status-ausfuehrung { background: #0d6efd; color: #fff; }
.status-abgeschlossen { background: #198754; color: #fff; }
.status-abgerechnet { background: #212529; color: #fff; }
.status-storniert { background: #f8f9fa; color: #212529; border: 1px solid #dee2e6; }
.status-sel option { background: #fff; color: #212529; }

@media print {
    .topbar, .no-print, .modal { display: none !important; }
    .content-body { padding: 0; }
    .card { break-inside: avoid; }
}