/* ═══════════════════════════════════════════════════════
   GEMEINSAME BAUSTEINE — Modal, Tabelle, Leer-/Ladezustand
   Genutzt von Admin und Funk (Kopie per npm run sync-shared).
   Wird NACH allen Tab-CSS geladen und vereinheitlicht die
   Optik der Tab-Varianten. Layout (Breite, Spalten) bleibt im Tab.
═══════════════════════════════════════════════════════ */

/* ── MODAL: Hintergrund ── */
.modal-bg, #permModal, .kal-modal-back, .sm-modal-bg, .mpr-overlay, .ruf-overlay {
    background: rgba(0,0,0,0.65);
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}

/* ── MODAL: Karte ── */
.modal-card, .modal-box-so, .acc-modal-card, .dev-modal-card, .kal-modal,
.perm-modal-inner, .sm-modal-card, .mpr-panel, .ruf-karte {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-2);
}
/* Leuchtlinie oben: nur Modals + Login */
.modal-card::before, .modal-box-so::before, .acc-modal-card::after, .dev-modal-card::before,
.kal-modal::before, .perm-modal-inner::before, .sm-modal-card::before, .mpr-panel::before, .ruf-karte::before {
    content: ''; position: absolute; top: 0; left: 15%; right: 15%; height: 2px; z-index: 2;
    background: linear-gradient(90deg, transparent, var(--red), transparent);
    pointer-events: none;
}
.perm-modal-header { border-radius: var(--radius-lg) var(--radius-lg) 0 0; background: var(--surface); }

/* ── MODAL: Titel ── */
.modal-title, .modal-title-so, .dev-modal-title, .kal-modal-title, .sm-modal-title {
    font-family: var(--cond); font-weight: 900; font-size: var(--fs-md);
    text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.15;
}

/* ── MODAL: Schließen ── */
.modal-close, .acc-modal-close, .dev-modal-close, .kal-modal-x {
    width: 30px; height: 30px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--radius-sm);
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border);
    color: var(--text-dim); cursor: pointer;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.modal-close:hover, .acc-modal-close:hover, .dev-modal-close:hover, .kal-modal-x:hover {
    color: var(--text); background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.14);
}

/* ── MODAL: Aktionen ── */
.modal-actions, .dev-modal-actions, .kal-modal-actions, .sm-modal-actions, .perm-modal-footer {
    display: flex; gap: 0.5rem; justify-content: flex-end; flex-wrap: wrap;
}

/* ── MODAL: Handy = Bottom-Sheet ── */
@media (max-width: 560px) {
    .modal-bg, #permModal, .kal-modal-back, .sm-modal-bg, .mpr-overlay, .ruf-overlay {
        align-items: flex-end !important; padding: 0 !important;
    }
    .modal-card, .modal-box-so, .acc-modal-card, .dev-modal-card, .kal-modal,
    .perm-modal-inner, .sm-modal-card, .mpr-panel, .ruf-karte {
        width: 100% !important; max-width: none !important;
        max-height: 92dvh; overflow-y: auto;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        border-bottom: none;
        padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
    }
    .modal-actions, .dev-modal-actions, .kal-modal-actions, .sm-modal-actions, .perm-modal-footer {
        flex-direction: column-reverse;
    }
    .modal-actions > .btn, .dev-modal-actions > .btn, .kal-modal-actions > .btn,
    .sm-modal-actions > .btn, .perm-modal-footer > .btn { width: 100%; justify-content: center; }
}

/* ══════════════════════════════════════════
   TABELLE — .tbl (+ bestehende Tab-Tabellen)
   Handy: Zeilen als Karten, Beschriftung aus data-label
   (setzt js/panel-ux.js automatisch aus dem <thead>)
══════════════════════════════════════════ */
.tbl, .acc-table, .sb-table, .as-route-table {
    width: 100%; border-collapse: collapse;
    font-size: var(--fs-xs);
    font-variant-numeric: tabular-nums;
}
.tbl th, .acc-table th, .sb-table th, .as-route-table th, .dbg-tbl th {
    position: sticky; top: 0; z-index: 1;
    background: var(--surface);
    font-family: var(--cond); font-weight: 700; font-size: var(--fs-2xs);
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--text-dim); text-align: left;
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.tbl td, .acc-table td, .sb-table td, .as-route-table td {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.dbg-tbl { font-variant-numeric: tabular-nums; }
.tbl tr:last-child td, .acc-table tr:last-child td, .sb-table tr:last-child td, .as-route-table tr:last-child td { border-bottom: none; }
.tbl tbody tr:hover td, .acc-table tbody tr:hover td, .sb-table tbody tr:hover td,
.as-route-table tbody tr:hover td, .dbg-tbl tbody tr:hover td { background: var(--hover); }

@media (max-width: 560px) {
    .tbl.tbl-karten thead { display: none; }
    .tbl.tbl-karten, .tbl.tbl-karten tbody, .tbl.tbl-karten tr, .tbl.tbl-karten td { display: block; width: 100%; }
    .tbl.tbl-karten tr {
        background: var(--surface); border: 1px solid var(--border);
        border-radius: var(--radius); padding: 0.5rem 0.75rem; margin-bottom: 0.6rem;
    }
    .tbl.tbl-karten td {
        display: flex; justify-content: space-between; gap: 1rem;
        border-bottom: 1px solid var(--border); padding: 0.45rem 0; text-align: right;
    }
    .tbl.tbl-karten td:last-child { border-bottom: none; }
    .tbl.tbl-karten td[data-label]::before {
        content: attr(data-label); text-align: left;
        font-family: var(--cond); font-weight: 700; font-size: var(--fs-3xs);
        letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim);
    }
}

/* ══════════════════════════════════════════
   LEER- / LADEZUSTAND
   Neu: <div class="state"><i class="fa fa-…"></i><b>Titel</b><span>Text</span>[<button class="btn …">]</div>
   Bestehende *-empty / *-loading bekommen denselben Look.
══════════════════════════════════════════ */
.state, .apps-empty, .aud-empty, .dbg-empty, .fz-empty, .kal-empty, .lf-empty,
.nlp-empty, .sl-empty, .stg-loading, .sess-empty-state, .chart-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 0.45rem; text-align: center;
    padding: 2.5rem 1rem;
    color: var(--text-dim); font-size: var(--fs-sm);
}
.state > i, .apps-empty-icon, .fz-empty-icon, .aud-empty > i, .dbg-empty > i,
.kal-empty > i, .nlp-empty > i, .sl-empty > i, .sess-empty-state > i {
    font-size: 1.6rem; opacity: 0.35; margin-bottom: 0.2rem;
}
.state > b, .fz-empty-text { color: var(--text-mid); font-weight: 600; font-size: var(--fs-base); }
.state > .btn { margin-top: 0.5rem; }

/* Developer-Board: Ziehgriff im Bottom-Sheet statt Leuchtlinie */
@media (max-width: 560px) {
    #devCardModal .dev-modal-card::before { position: static; background: var(--border); height: 4px; }
}