:root { --open-dark: #2e7d32; --open-light: #a5d6a7; --close-light: #ef9a9a; --close-dark: #c62828; --clean: #2980b9; --blue: #004581; --purple: #8e44ad; --warning: #f39c12; --warning-light: #fef5e7; --danger-light: #fadbd8;}

/* =====================================================================
   DARK MODE: Die semantischen Theme-Variablen (--bg, --surface, --text,
   --border, --accent …) sowie der Apariencia-Schalter sind ausgelagert
   nach css/theme.css (Single Source of Truth, wird auf ALLEN Seiten vor
   main.css geladen). Die festen Farben in dieser Datei wurden auf diese
   Variablen umgestellt. Marken-/Statusfarben (oben) bleiben unverändert.
   ===================================================================== */

html {
    overflow-x: clip;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', sans-serif;
    background: var(--bg);
    padding: 20px;
    margin-bottom: 50px;
    color: var(--text);
    overflow-x: clip;
    max-width: 100vw;
    box-sizing: border-box;
}

/* Task Manager — Tarjetas: acciones sin desbordamiento horizontal */
#mod_tickets,
#tickets_container {
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
}

.ticket-card {
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
}

/* Deep-Link Highlight: pulso azul al llegar desde una push-notification. */
@keyframes ticket-card-pulse {
    0%, 100% { box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08); }
    50%      { box-shadow: 0 0 0 4px rgba(52, 152, 219, 0.55), 0 3px 14px rgba(52, 152, 219, 0.35); }
}
.ticket-card--pulse {
    animation: ticket-card-pulse 0.7s ease-in-out 3;
}

/* Highlight persistente: marca el ticket al que se ha llegado por deep-link
   o por click en una notificación. Se quita al clicar dentro de la tarjeta. */
.ticket-card--highlighted {
    outline: 3px solid rgba(52, 152, 219, 0.75);
    outline-offset: 2px;
}

.ticket-card-header-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    align-items: flex-start;
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: bold;
}

.ticket-card-header-left {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    min-width: 0;
}

.ticket-card-recipients {
    flex: 1 1 200px;
    min-width: 0;
    color: var(--text-muted);
    font-weight: 600;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.ticket-card-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: space-between;
    align-items: flex-start;
    border-top: 1px solid var(--border);
    padding-top: 12px;
    margin-top: 15px;
}

.ticket-card-footer-meta {
    flex: 0 1 auto;
    min-width: 0;
    font-size: 11px;
    color: var(--text-muted);
}

.ticket-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-start;
    flex: 1 1 240px;
    min-width: 0;
}

@media (min-width: 720px) {
    .ticket-card-actions {
        justify-content: flex-end;
    }
}

/* AUTH LOADING SPLASH */
@keyframes benisol-spin { to { transform: rotate(360deg); } }

/* LOGIN */
#login-screen { position: fixed; top:0; left:0; width:100%; height:100%; background: var(--blue); z-index: 9999; display: flex; flex-direction: column; align-items: center; justify-content: center; color: white; }
.login-box { background: var(--surface); padding: 40px; border-radius: 12px; text-align: center; color: var(--text); box-shadow: 0 10px 30px rgba(0,0,0,0.3); width: 300px;}
.login-box input { width: 100%; padding: 15px; margin-bottom: 15px; border: 1px solid var(--border); border-radius: 5px; font-size: 16px; box-sizing: border-box;}
.login-box button { background: var(--blue); color: white; padding: 15px; width: 100%; border: none; border-radius: 5px; font-size: 18px; cursor: pointer; font-weight: bold;}

h1 { color: var(--blue); text-align: center; display: flex; justify-content: center; align-items: center; gap: 20px;}
.card { background: var(--surface); border-radius: 12px; padding: 20px; margin-bottom: 20px; box-shadow: 0 4px 10px rgba(0,0,0,0.05); }
h2 { border-bottom: 2px solid var(--border); padding-bottom: 10px; color: var(--blue); margin-top: 0; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 15px; min-width: 0; }
.grid > * { min-width: 0; }

/* DASHBOARD OS NAVIGATION */
.dashboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 20px; padding: 10px 0; width: 100%; max-width: 100%; box-sizing: border-box; min-width: 0; }
/* Defensa (igual que `.grid > *`): ningún hijo —ni los widgets a ancho completo
   (#dashboard_cockpit, #citas_hoy_widget) con un título de cita largo— puede
   imponer su min-content y ensanchar las pistas auto-fit, lo que rompería el
   reflujo responsive de las kacheln/tiles de abajo. */
.dashboard-grid > * { min-width: 0; }
.dash-tile { background: var(--surface); border-radius: 12px; padding: 20px; text-align: center; cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,0.05); transition: transform 0.2s, box-shadow 0.2s; border-bottom: 5px solid var(--border); display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 160px; position: relative; min-width: 0; max-width: 100%; box-sizing: border-box; overflow-wrap: anywhere; word-break: break-word;}
.dash-tile:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0,0,0,0.12); }
.dash-tile h3 { margin: 10px 0 5px 0; color: var(--blue); font-size: 1.2em; max-width: 100%; overflow-wrap: anywhere;}
.dash-tile p { font-size: 12px; color: var(--text-muted); margin: 0 0 15px 0; max-width: 100%; overflow-wrap: anywhere;}
.dash-tile .dash-live { max-width: 100%; overflow-wrap: anywhere; word-break: break-word; box-sizing: border-box;}
.dash-tile.dash-search-hidden { display: none !important; }

.dash-global-search { grid-column: 1 / -1; position: relative; }

.dash-module-suggestions {
    border: 1px solid #d6dbdf;
    border-radius: 8px;
    background: var(--surface);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}
.dash-module-suggestions .dash-suggest-hint {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 8px 12px 4px;
    background: var(--surface-2);
}
.dash-module-suggestions .dash-suggest-row {
    display: block;
    width: 100%;
    text-align: left;
    padding: 10px 14px;
    border: none;
    border-top: 1px solid var(--border);
    background: var(--surface);
    font-size: 14px;
    cursor: pointer;
    color: var(--blue);
}
.dash-module-suggestions .dash-suggest-row:hover {
    background: #e3f2fd;
}

/* ===================================================================
   Customer 360 — Result Cards (GET /api/search)
   =================================================================== */
#dash_search_results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 500;
    background: var(--bg);
    border-radius: 0 0 12px 12px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
    padding: 0;
    box-sizing: border-box;
}
#dash_search_results .c360-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    gap: 16px;
    padding: 16px 18px 18px;
    max-height: min(75vh, 560px);
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
}

/* ---------- Result Card ---------- */
#dash_search_results .c360-card {
    position: relative;
    display: block;
    width: 100%;
    text-align: left;
    margin: 0;
    padding: 18px 18px 16px 20px;
    border: none;
    border-radius: 14px;
    background: var(--surface);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.07);
    cursor: pointer;
    border-left: 5px solid var(--c360-accent, #bdc3c7);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    font-family: inherit;
}
#dash_search_results .c360-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.13);
}
#dash_search_results .c360-card:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.10);
}

/* Top row: big plaza number + status badge */
#dash_search_results .c360-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}
#dash_search_results .c360-plaza {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--blue, #004581);
    letter-spacing: 0.03em;
    line-height: 1.1;
}
#dash_search_results .c360-badge {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

/* Customer name + Kundennummer */
#dash_search_results .c360-name-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 10px;
    margin-bottom: 8px;
    line-height: 1.35;
}
#dash_search_results .c360-name {
    font-size: 15px;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 0;
    line-height: 1.3;
}
#dash_search_results .c360-kunden-nr {
    font-size: 12px;
    font-weight: 500;
    color: #95a5a6;
}

#dash_search_results .c360-arr-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 6px;
    background: #ecf0f1;
    color: #34495e;
    margin-bottom: 8px;
    letter-spacing: 0.04em;
}

#dash_search_results .c360-matricula {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 6px;
    background: #eaf4fb;
    color: #1a5276;
    margin-bottom: 8px;
    letter-spacing: 0.05em;
    border: 1px solid #aed6f1;
}

#dash_search_results .c360-details-btn {
    display: block;
    width: 100%;
    margin-top: 12px;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 600;
    color: #004581;
    background: #f4f8fb;
    border: 1px dashed #b8c9d9;
    border-radius: 8px;
    cursor: default;
    font-family: inherit;
    box-sizing: border-box;
}
#dash_search_results .c360-details-btn:hover {
    background: #e8f2f8;
}

/* Date range */
#dash_search_results .c360-dates {
    font-size: 13px;
    color: #5d6d7e;
    margin-bottom: 4px;
}

/* Booking nr */
#dash_search_results .c360-meta {
    font-size: 11px;
    color: #95a5a6;
    margin-top: 8px;
    letter-spacing: 0.02em;
}

#dash_search_results .c360-live-banner {
    display: none;
}

/* Live-Fokus: Such-Ergebnis-Karten (Customer 360) */
#dash_search_results .c360-card.card-live {
    border: 3px solid #27ae60;
    background: #f0fdf4;
    box-shadow: 0 4px 16px rgba(39, 174, 96, 0.18);
}
#dash_search_results .c360-card.card-live .c360-live-banner {
    display: block;
    font-weight: 800;
    font-size: 12px;
    color: #14532d;
    margin: -6px 0 10px 0;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
#dash_search_results .c360-card.card-future {
    border: 2px solid #3498db;
    background: var(--surface);
    box-shadow: 0 4px 14px rgba(52, 152, 219, 0.12);
}
#dash_search_results .c360-card.card-history {
    opacity: 0.7;
    border: 1px solid #bdc3c7;
    background: var(--surface-2);
}

/* Reservas-Tabelle: gleiche Hierarchie bei Server-Suche */
#mod_reservas tbody tr.card-live td {
    background: #f0fdf4;
    border-top: 2px solid #27ae60;
    border-bottom: 2px solid #27ae60;
    font-weight: 600;
}
#mod_reservas tbody tr.card-live td:first-child {
    border-left: 3px solid #27ae60;
}
#mod_reservas tbody tr.card-live td:last-child {
    border-right: 3px solid #27ae60;
}
#mod_reservas tbody tr.card-future td {
    background: #f7fbff;
    border-left: 3px solid #3498db;
}
#mod_reservas tbody tr.card-history td {
    opacity: 0.75;
    color: #5d6d7e;
    border-left: 2px solid #bdc3c7;
}

/* Reservas: Namen umbrechen, nicht abschneiden */
.reservas-cliente-name,
#mod_reservas .reservas-cliente-name,
#dash_search_results .c360-name {
    white-space: normal;
    word-break: break-word;
    max-width: 280px;
}

/* Reservas: Omni-Suche Dropdown */
.reservas-search-wrap {
    position: relative;
    min-width: 220px;
}
.omni-dropdown {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin-top: 4px;
    z-index: 1000;
    background: var(--surface);
    border: 1px solid #d6eaf8;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(30, 58, 95, 0.15);
    max-height: 400px;
    overflow-y: auto;
    text-align: left;
}
.omni-dropdown-item {
    display: block;
    width: 100%;
    padding: 10px 12px;
    border: none;
    border-bottom: 1px solid #eef2f7;
    background: var(--surface);
    cursor: pointer;
    font-size: 13px;
    text-align: left;
    color: #2c3e50;
}
.omni-dropdown-item:hover,
.omni-dropdown-item:focus {
    background: #f0f7fc;
    outline: none;
}
.omni-dropdown-item:last-child {
    border-bottom: none;
}
.omni-dropdown .omni-dropdown-line1 {
    font-weight: 600;
    color: #1f618d;
}
.omni-dropdown .omni-dropdown-line2 {
    font-size: 12px;
    color: #5d6d7e;
    margin-top: 2px;
    white-space: normal;
    word-break: break-word;
}
.omni-dropdown-status {
    padding: 12px;
    font-size: 13px;
    color: var(--text-muted);
}
.omni-dropdown-details {
    margin-top: 8px;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid #2980b9;
    background: #ebf5fb;
    color: #1f618d;
    cursor: pointer;
    font-family: inherit;
}
.omni-dropdown-details:hover {
    background: #d6eaf8;
}

/* Rezeptions-Control-Center: 3-Spalten-Grid, alle Widgets sichtbar */
.reservas-dash-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    align-items: start;
    margin-bottom: 16px;
}
@media (max-width: 1200px) {
    .reservas-dash-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 768px) {
    .reservas-dash-grid {
        grid-template-columns: 1fr;
    }
}
.reservas-dash-loading {
    grid-column: 1 / -1;
    padding: 20px;
    color: var(--text-muted);
    text-align: center;
}
.dash-widget {
    background: var(--surface);
    border: 1px solid #d6eaf8;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(41, 128, 185, 0.08);
    min-height: 80px;
    overflow: hidden;
}
.dash-widget-title {
    font-size: 13px;
    font-weight: 800;
    color: #1f618d;
    padding: 10px 12px;
    background: linear-gradient(180deg, #f0f7fc 0%, #e8f4fb 100%);
    border-bottom: 1px solid #d6eaf8;
    letter-spacing: 0.02em;
}
.dash-widget-body {
    padding: 0;
}
.dash-widget-row {
    cursor: pointer;
}
.dash-widget-row:hover {
    background: #f8fcff;
}
.dash-widget-details-btn {
    font-size: 11px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid #2980b9;
    background: var(--surface);
    color: #1f618d;
    cursor: pointer;
    font-family: inherit;
}
.dash-widget-details-btn:hover {
    background: #ebf5fb;
}

.reservas-fd-table-wrap {
    overflow: auto;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}
.reservas-fd-table-wrap table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.reservas-fd-table-wrap th {
    text-align: left;
    padding: 8px;
    background: #ecf5fc;
    border-bottom: 1px solid #d6eaf8;
}
.reservas-fd-table-wrap td {
    padding: 8px;
    border-bottom: 1px solid #eef2f7;
    vertical-align: top;
}
.reservas-fd-empty {
    padding: 16px;
    color: var(--text-muted);
    font-size: 14px;
}

/* Buchungs-Tab: datendichte Detailansicht */
.tab-panel-scroll .booking-detail-host {
    padding: 16px 18px 24px;
    max-width: 1100px;
}
.booking-detail-loading,
.booking-detail-error {
    padding: 24px;
    font-size: 14px;
    color: var(--text-muted);
}
.booking-detail-error {
    color: #c0392b;
    font-weight: 600;
}
.booking-detail-top {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 24px;
    margin-bottom: 20px;
}
@media (max-width: 720px) {
    .booking-detail-top {
        grid-template-columns: 1fr;
    }
}
.booking-detail-block {
    border: 1px solid #dceaf5;
    border-radius: 8px;
    padding: 12px 14px;
    background: #fafdff;
    font-size: 13px;
    line-height: 1.45;
}
.bd-block-title {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #2980b9;
    margin-bottom: 10px;
}
.bd-name {
    font-size: 16px;
    font-weight: 700;
    color: #1a252f;
    margin-bottom: 6px;
}
.bd-name b {
    font-weight: 800;
}
.bd-meta {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 8px;
}
.bd-buch-nr {
    font-size: 15px;
    font-weight: 800;
    color: #1f618d;
    margin-bottom: 8px;
}
.bd-line {
    font-size: 12px;
    margin-bottom: 4px;
    color: #34495e;
}
.bd-lab {
    display: inline-block;
    min-width: 72px;
    color: var(--text-muted);
    font-weight: 600;
}
.booking-detail-plaetze {
    border: 1px solid #dceaf5;
    border-radius: 8px;
    padding: 12px 14px;
    background: var(--surface);
}
.bd-platz-empty {
    margin: 8px 0 0;
    font-size: 13px;
    color: #95a5a6;
}
.bd-platz-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    margin-top: 8px;
}
.bd-platz-table th {
    text-align: left;
    padding: 6px 8px;
    background: #ecf5fc;
    border-bottom: 1px solid #d6eaf8;
    color: #2c3e50;
}
.bd-platz-table td {
    padding: 6px 8px;
    border-bottom: 1px solid #eef2f7;
}

/* Buchungs-Tab: Classic Mode */
.booking-detail-classic {
    box-sizing: border-box;
    border-radius: 4px;
    width: 100%;
    outline: none;
    background: #f0f4f8;
    padding: 12px;
    font-size: 14px;
    line-height: 1.5;
    color: #2c3e50;
}

/* Header bar */
.bdq-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 10px 14px;
    margin-bottom: 8px;
}
.bdq-header-nr { font-weight: 800; font-size: 1.15rem; color: #2c3e50; }
.bdq-header-arr { font-size: 0.85rem; color: var(--text-muted); margin-left: 6px; }
.bdq-header-dates { font-size: 0.85rem; color: var(--text-muted); margin-left: 8px; }
.bdq-header-kunde { font-size: 0.95rem; color: var(--text); }
.bdq-header-kunde small { color: var(--text-muted); }

/* Tab navigation */
.bdq-tab-nav {
    display: flex;
    gap: 0;
    border-bottom: 2px solid #2980b9;
    margin-bottom: 10px;
    overflow-x: auto;
}
.bdq-tab-btn {
    background: #e8e8e8;
    border: 1px solid var(--border);
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    padding: 8px 18px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--text-muted);
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}
.bdq-tab-btn:hover { background: #dbeafe; color: #1565c0; }
.bdq-tab-btn.bdq-tab-active {
    background: var(--surface);
    color: #2980b9;
    border-color: #2980b9;
    border-bottom: 2px solid #fff;
    margin-bottom: -2px;
    position: relative;
}
.bdq-tab-key {
    display: inline-block;
    background: #00000015;
    border-radius: 3px;
    padding: 0 4px;
    font-size: 0.7rem;
    font-weight: 700;
    vertical-align: middle;
    margin-right: 2px;
}
.bdq-tab-active .bdq-tab-key { background: #2980b920; color: #1565c0; }

/* Resumen 2-column grid */
.bdq-resumen-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
@media (max-width: 900px) {
    .bdq-resumen-grid { grid-template-columns: 1fr; }
    .bdq-tab-btn { padding: 6px 12px; font-size: 0.8rem; }
}
.booking-detail-classic .bdq {
    border: 1px solid var(--border);
    border-radius: 2px;
    background: var(--surface);
    min-width: 0;
}
.booking-detail-classic .bdq-head {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text);
    padding: 6px 10px;
    background: linear-gradient(180deg, #f0f0f0 0%, #e4e4e4 100%);
    border-bottom: 1px solid var(--border);
}
.booking-detail-classic .bdq-body {
    padding: 10px 12px;
    line-height: 1.35;
    color: #222;
}
.booking-detail-classic .bdq-gast-name {
    font-size: 14px;
    margin-bottom: 8px;
    color: #111;
}
.booking-detail-classic .bdq-line {
    font-size: 12px;
    margin-bottom: 3px;
}
.booking-detail-classic .bdq-lab {
    color: var(--text-muted);
    font-weight: 600;
    margin-right: 4px;
}
.booking-detail-classic .bdq-buch-nr {
    font-size: 15px;
    font-weight: 800;
    color: #1a5276;
    margin-bottom: 6px;
}
.booking-detail-classic .bdq-status-badge {
    display: inline-block;
    padding: 2px 10px;
    font-size: 11px;
    font-weight: 700;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 2px;
}
.booking-detail-classic .bdq-status-badge.bdq-st-a {
    background: #27ae60;
    color: #fff;
    border-color: #1e8449;
}
.booking-detail-classic .bdq-status-badge.bdq-st-f {
    background: #2980b9;
    color: #fff;
    border-color: #1f618d;
}
.booking-detail-classic .bdq-status-badge.bdq-st-v {
    background: #f1c40f;
    color: #1a1a1a;
    border-color: #d4ac0d;
}
.booking-detail-classic .bdq-status-badge.bdq-st-re,
.booking-detail-classic .bdq-status-badge.bdq-st-def {
    background: #95a5a6;
    color: #fff;
    border-color: #7f8c8d;
}
.booking-detail-classic .bdq-status-badge.bdq-st-s {
    background: #c0392b;
    color: #fff;
    border-color: #922b21;
}
.booking-detail-classic .bdq-status-badge.bdq-st-i {
    background: #95a5a6;
    color: #fff;
    border-color: #7f8c8d;
}
.booking-detail-classic .bdq-status-badge.bdq-st-o {
    background: #5dade2;
    color: #fff;
    border-color: #2e86c1;
}
.booking-detail-classic .bdq-head-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
.booking-detail-classic .bdq-head-title {
    flex: 1;
    min-width: 0;
}
.booking-detail-classic .bdq-edit-btn {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border: 1px solid #bbb;
    border-radius: 3px;
    background: var(--surface);
    color: var(--text);
    cursor: default;
    font-family: inherit;
}
.booking-detail-classic .bdq-mini-empty {
    margin: 6px 0 0;
    font-size: 11px;
    color: var(--text-muted);
}
.booking-detail-classic .bdq-mini-platz {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
    margin-top: 4px;
}
.booking-detail-classic .bdq-mini-platz th,
.booking-detail-classic .bdq-mini-platz td {
    border: 1px solid var(--border);
    padding: 3px 6px;
    text-align: left;
}
.booking-detail-classic .bdq-mini-platz th {
    background: var(--surface-2);
    font-weight: 700;
}
.booking-detail-classic .bdq-konto-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.booking-detail-classic .bdq-konto-table th,
.booking-detail-classic .bdq-konto-table td {
    border: 1px solid var(--border);
    padding: 4px 8px;
    vertical-align: top;
}
.booking-detail-classic .bdq-konto-table th {
    background: #ececec;
    font-weight: 700;
    text-align: left;
}
.booking-detail-classic .bdq-konto-table .bdq-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.booking-detail-classic .bdq-konto-table tfoot td {
    background: var(--surface-2);
}
.booking-detail-classic .bdq-num-foot {
    font-weight: 700;
}
.booking-detail-classic .bdq-empty-row {
    color: var(--text-muted);
    font-style: italic;
    text-align: center;
}
.booking-detail-classic .bdq-saldo-row td {
    background: #fff8e6;
    border-top: 2px solid #c9a227;
}
.booking-detail-classic tr.bdq-leist-credit td {
    color: #c0392b;
}
.booking-detail-classic tr.bdq-leist-expired td {
    opacity: 0.7;
}
.booking-detail-classic .bdq-leist-table .bdq-akz-th,
.booking-detail-classic .bdq-leist-table .bdq-akz {
    width: 2rem;
    text-align: center;
    vertical-align: middle;
}
.booking-detail-classic .bdq-mit-empty {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-style: italic;
    font-size: 12px;
}
.booking-detail-classic .bdq-mit-sep {
    margin-top: 8px;
}
.booking-detail-classic .bdq-mit-active {
    background: #e8f8ee;
    border-radius: 4px;
    padding: 2px 4px;
    margin: 2px 0;
}
.booking-detail-classic .bdq-subblock {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid #e0e0e0;
    font-size: 0.88rem;
}
.booking-detail-classic .bdq-subblock h4 {
    margin: 0 0 6px;
    font-size: 0.95rem;
    color: #2c3e50;
}
.booking-detail-classic .bdq-mini-link {
    background: none;
    border: none;
    color: #2980b9;
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
    font-size: inherit;
}
.booking-detail-classic .bdq-mini-link:hover {
    color: #1f618d;
}
.booking-detail-classic .bdq-btyp {
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
}
.booking-detail-classic .bdq-saldo-label-cell {
    vertical-align: middle;
}
.booking-detail-classic .bdq-saldo-hint {
    font-weight: 400;
    font-size: 0.82em;
    color: var(--text-muted);
}
.booking-detail-classic .bdq-saldo-amount {
    font-size: 1.5rem;
    font-weight: 900;
    line-height: 1.25;
    vertical-align: middle;
}
.booking-detail-classic .bdq-saldo-due {
    color: #c0392b;
}
.booking-detail-classic .bdq-saldo-ok {
    color: #27ae60;
}
.booking-detail-classic .bdq-pay-tabwrap {
    margin-top: 2px;
}
.booking-detail-classic .bdq-pay-radio {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
.booking-detail-classic .bdq-pay-t {
    display: inline-block;
    padding: 7px 14px;
    margin: 0 4px 0 0;
    cursor: pointer;
    font-size: 0.82rem;
    color: var(--text-muted);
    background: #e9ecef;
    border: 1px solid var(--border);
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    user-select: none;
}
.booking-detail-classic .bdq-pay-pane-all,
.booking-detail-classic .bdq-pay-pane-re {
    display: none;
    padding: 10px 0 0;
    border-top: 1px solid var(--border);
    margin-top: -1px;
}
.booking-detail-classic .bdq-pay-radio:checked + .bdq-pay-t {
    background: var(--surface);
    color: #1f618d;
    font-weight: 700;
    border-color: #bbb;
    position: relative;
    z-index: 1;
}
.booking-detail-classic .bdq-re-card {
    margin-bottom: 12px;
    padding: 10px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 6px;
}
.booking-detail-classic .bdq-re-head {
    font-size: 0.88rem;
    margin-bottom: 8px;
    color: #2c3e50;
}
.booking-detail-classic .bdq-re-zahl-sub {
    font-size: 0.82rem;
    margin-bottom: 8px;
}
.booking-detail-classic .bdq-re-pdf-line {
    font-size: 0.78rem;
    color: var(--text-muted);
}
.booking-detail-classic .bdq-re-pdf-line code {
    font-size: 0.85em;
    background: var(--border);
    padding: 1px 4px;
    border-radius: 3px;
}
.booking-detail-classic .bdq-pdf-ok {
    color: #27ae60;
    font-weight: 600;
}
.booking-detail-classic .bdq-pdf-miss {
    color: var(--text-muted);
}

/* ===================================================================
   Buchungs-Detail Premium-UX (Hero / KPI / Quick-Actions / Akkordeon)
   =================================================================== */

/* Hero-Header (sticky oben) */
.booking-detail-classic .bdq-hero {
    background: linear-gradient(180deg, #ffffff 0%, #f8fbfd 100%);
    border: 1px solid #e8eef3;
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 10px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.06);
}
.booking-detail-classic .bdq-hero-row1 {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}
.booking-detail-classic .bdq-hero-nr {
    font-size: 22px;
    font-weight: 800;
    color: #1a5276;
    letter-spacing: 0.01em;
}
.booking-detail-classic .bdq-hero-status {
    font-size: 12px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 12px;
}
.booking-detail-classic .bdq-hero-flag {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.booking-detail-classic .bdq-hero-flag-resident {
    background: rgba(142, 68, 173, 0.12);
    color: #6c3483;
}
.booking-detail-classic .bdq-hero-row2 {
    font-size: 16px;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 4px;
    line-height: 1.3;
}
.booking-detail-classic .bdq-hero-clientenr {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    margin-left: 4px;
}
.booking-detail-classic .bdq-hero-meta {
    font-size: 13px;
    color: #5d6d7e;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.booking-detail-classic .bdq-hero-sep {
    color: #bdc3c7;
}

/* KPI-Strip */
.booking-detail-classic .bdq-kpis {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    margin-bottom: 10px;
}
.booking-detail-classic .bdq-kpi {
    background: var(--surface);
    border: 1px solid #e8eef3;
    border-radius: 8px;
    padding: 8px 10px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
    min-width: 0;
}
.booking-detail-classic .bdq-kpi-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.booking-detail-classic .bdq-kpi-value {
    font-size: 14px;
    font-weight: 700;
    color: #2c3e50;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.booking-detail-classic .bdq-kpi-saldo-debe {
    background: #fff5f5;
    border-color: #fadbd8;
}
.booking-detail-classic .bdq-kpi-saldo-debe .bdq-kpi-value {
    color: #c0392b;
}
.booking-detail-classic .bdq-kpi-saldo-afavor {
    background: #f0f7fc;
    border-color: #d6eaf8;
}
.booking-detail-classic .bdq-kpi-saldo-afavor .bdq-kpi-value {
    color: #1f618d;
}
.booking-detail-classic .bdq-kpi-saldo-saldado {
    background: #f0fbf4;
    border-color: #cdebd6;
}
.booking-detail-classic .bdq-kpi-saldo-saldado .bdq-kpi-value {
    color: #1d8348;
}

/* Quick-Actions */
.booking-detail-classic .bdq-quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}
.booking-detail-classic .bdq-quick-btn {
    min-height: 40px;
    padding: 9px 16px;
    font-size: 14px;
    font-weight: 700;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    font-family: inherit;
    transition: transform 0.05s ease, box-shadow 0.15s ease, background 0.15s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
    white-space: nowrap;
}
.booking-detail-classic .bdq-quick-btn:hover {
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}
.booking-detail-classic .bdq-quick-btn:active {
    transform: translateY(1px);
}
.booking-detail-classic .bdq-quick-btn-primary {
    background: #27ae60;
    color: #fff;
}
.booking-detail-classic .bdq-quick-btn-primary:hover {
    background: #229954;
}
.booking-detail-classic .bdq-quick-btn-secondary {
    background: var(--surface);
    color: #1f618d;
    border: 1px solid #d6eaf8;
}
.booking-detail-classic .bdq-quick-btn-secondary:hover {
    background: #ebf5fb;
}

/* Status-Flow Stepper + CTA */
.booking-detail-classic .bdq-status-flow-wrap {
    display: flex;
    align-items: stretch;
    gap: 8px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.booking-detail-classic .bdq-status-flow {
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--surface);
    border: 1px solid #e8eef3;
    border-radius: 8px;
    padding: 8px 12px;
    overflow-x: auto;
    flex: 1 1 auto;
    min-width: 0;
}
.booking-detail-classic .bdq-status-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    min-height: 40px;
    font-size: 13px;
    font-weight: 700;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    color: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08);
    transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
    white-space: nowrap;
}
.booking-detail-classic .bdq-status-cta:hover {
    box-shadow: 0 3px 8px rgba(0,0,0,0.14);
}
.booking-detail-classic .bdq-status-cta:active {
    transform: translateY(1px);
}
.booking-detail-classic .bdq-status-cta-primary {
    background: #27ae60;
}
.booking-detail-classic .bdq-status-cta-primary:hover {
    background: #229954;
}
.booking-detail-classic .bdq-status-cta-warning {
    background: #e67e22;
}
.booking-detail-classic .bdq-status-cta-warning:hover {
    background: #ca6f1e;
}
.booking-detail-classic .bdq-status-step {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #95a5a6;
    white-space: nowrap;
}
.booking-detail-classic .bdq-status-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #d5dbdb;
    flex-shrink: 0;
}
.booking-detail-classic .bdq-status-step-done {
    color: #27ae60;
}
.booking-detail-classic .bdq-status-step-done .bdq-status-dot {
    background: #27ae60;
}
.booking-detail-classic .bdq-status-step-active {
    color: #1f618d;
    font-weight: 700;
}
.booking-detail-classic .bdq-status-step-active .bdq-status-dot {
    background: #2980b9;
    box-shadow: 0 0 0 4px rgba(41, 128, 185, 0.18);
}
.booking-detail-classic .bdq-status-link {
    flex: 1;
    height: 2px;
    background: #ecf0f1;
    min-width: 12px;
    max-width: 40px;
}

/* Notiz-Banner */
.booking-detail-classic .bdq-nota-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #fff8e1;
    border: 1px solid #f9a825;
    border-left: 4px solid #f9a825;
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 10px;
    font-size: 13px;
    line-height: 1.5;
    color: #5d4e1d;
    cursor: pointer;
}
.booking-detail-classic .bdq-nota-banner:hover {
    background: #fff3c1;
}
.booking-detail-classic .bdq-nota-icon {
    font-size: 16px;
    line-height: 1.2;
    flex-shrink: 0;
}
.booking-detail-classic .bdq-nota-text {
    word-break: break-word;
}

/* Akkordeon-Sektionen */
.booking-detail-classic details.bdq-section {
    background: var(--surface);
    border: 1px solid #e8eef3;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.04);
    overflow: hidden;
}
.booking-detail-classic details.bdq-section > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: linear-gradient(180deg, #fbfdff 0%, #f4f8fb 100%);
    border-bottom: 1px solid #e8eef3;
    font-weight: 700;
    font-size: 14px;
    color: #1f618d;
    min-height: 44px;
    user-select: none;
}
.booking-detail-classic details.bdq-section > summary::-webkit-details-marker {
    display: none;
}
.booking-detail-classic details.bdq-section > summary::after {
    content: "▸";
    margin-left: auto;
    color: #2980b9;
    font-size: 14px;
    transition: transform 0.15s ease;
}
.booking-detail-classic details.bdq-section[open] > summary::after {
    transform: rotate(90deg);
}
.booking-detail-classic details.bdq-section > summary:hover {
    background: linear-gradient(180deg, #f4f8fb 0%, #ebf2f7 100%);
}
@keyframes bdq-section-reveal {
    from { opacity: 0; transform: translateY(-3px); }
    to   { opacity: 1; transform: translateY(0); }
}
.booking-detail-classic .bdq-section-icon {
    font-size: 18px;
    line-height: 1;
}
.booking-detail-classic .bdq-section-title {
    flex: 0 0 auto;
}
.booking-detail-classic .bdq-section-hint {
    margin-left: auto;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 10px;
    background: #ecf5fc;
    color: #1f618d;
    white-space: nowrap;
}
.booking-detail-classic .bdq-section-hint + ::after,
.booking-detail-classic .bdq-section-hint ~ * {
    margin-left: 0;
}
.booking-detail-classic details.bdq-section > summary > .bdq-section-hint {
    margin-right: 8px;
}
.booking-detail-classic .bdq-hint-default {
    background: #ecf0f1;
    color: #5d6d7e;
}
.booking-detail-classic .bdq-hint-warning {
    background: rgba(230, 126, 34, 0.14);
    color: #b9651b;
}
.booking-detail-classic .bdq-hint-danger {
    background: rgba(192, 57, 43, 0.14);
    color: #a93226;
}
.booking-detail-classic .bdq-hint-success {
    background: rgba(39, 174, 96, 0.14);
    color: #1d8348;
}
.booking-detail-classic .bdq-section-body {
    padding: 0;
}
.booking-detail-classic .bdq-section .bdq {
    border: none;
    background: transparent;
}
.booking-detail-classic .bdq-section .bdq > .bdq-head {
    display: none;
}
.booking-detail-classic .bdq-section .bdq-body {
    padding: 12px 14px;
}

/* Main-Grid (2 Spalten Desktop, 1 Spalte Mobil) */
.booking-detail-classic .bdq-main-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 6px;
}
.booking-detail-classic .bdq-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

/* Desktop (≥ 641 px): Akkordeon-Header verstecken, alle Inhalte sichtbar */
@media (min-width: 641px) {
    .booking-detail-classic details.bdq-section > summary {
        display: none;
    }
    .booking-detail-classic details.bdq-section {
        border-radius: 10px;
    }
    .booking-detail-classic details.bdq-section:not([open]) > .bdq-section-body {
        display: block;
    }
    .booking-detail-classic .bdq-kpi-plaza-desktop {
        display: block;
    }
}

/* Mobile (≤ 640 px): Stack, sticky-Hero, Akkordeon aktiv, Touch-Targets */
@media (max-width: 640px) {
    .booking-detail-classic {
        padding: 8px;
        font-size: 14px;
    }
    .booking-detail-classic .bdq-status-flow-wrap {
        flex-direction: column;
        gap: 6px;
    }
    .booking-detail-classic .bdq-status-cta {
        min-height: 44px;
        font-size: 14px;
        width: 100%;
    }
    .booking-detail-classic details.bdq-section[open] > .bdq-section-body {
        animation: bdq-section-reveal 0.16s ease-out;
    }
    .booking-detail-classic .bdq-hero {
        padding: 12px 14px;
    }
    .booking-detail-classic .bdq-hero-nr {
        font-size: 20px;
    }
    .booking-detail-classic .bdq-hero-row2 {
        font-size: 15px;
    }
    .booking-detail-classic .bdq-kpis {
        grid-template-columns: repeat(3, 1fr);
    }
    .booking-detail-classic .bdq-kpi-plaza-desktop {
        display: none;
    }
    .booking-detail-classic .bdq-quick-actions {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        padding-bottom: 4px;
    }
    .booking-detail-classic .bdq-quick-btn {
        min-height: 44px;
        padding: 10px 16px;
        flex-shrink: 0;
    }
    .booking-detail-classic .bdq-main-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .booking-detail-classic .bdq-col {
        display: contents;
    }
    .booking-detail-classic .bdq-col-left  > details.bdq-section:nth-of-type(1) { order: 1; }  /* Datos huésped */
    .booking-detail-classic .bdq-col-right > details.bdq-section:nth-of-type(1) { order: 2; }  /* Reserva */
    .booking-detail-classic .bdq-col-right > details.bdq-section:nth-of-type(2) { order: 3; }  /* Servicios */
    .booking-detail-classic .bdq-col-right > details.bdq-section:nth-of-type(3) { order: 4; }  /* Pagos */
    .booking-detail-classic .bdq-col-left  > details.bdq-section:nth-of-type(2) { order: 5; }  /* Personas */
    .booking-detail-classic .bdq-col-left  > details.bdq-section:nth-of-type(3) { order: 6; }  /* Facturación */

    /* Tabellen lesbarer + horizontal scrollbar innerhalb des Section-Body */
    .booking-detail-classic .bdq-section-body .bdq-body {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .booking-detail-classic .bdq-mini-platz,
    .booking-detail-classic .bdq-konto-table,
    .booking-detail-classic .bdq-leist-table {
        font-size: 13px;
    }
    .booking-detail-classic .bdq-konto-table,
    .booking-detail-classic .bdq-leist-table {
        min-width: 480px;
    }
    .booking-detail-classic .bdq-mini-platz th,
    .booking-detail-classic .bdq-mini-platz td,
    .booking-detail-classic .bdq-konto-table th,
    .booking-detail-classic .bdq-konto-table td {
        padding: 6px 8px;
    }
    .booking-detail-classic .bdq-status-flow {
        font-size: 11px;
    }
    .booking-detail-classic .bdq-status-link {
        max-width: 16px;
    }
}

/* ===================================================================
   Ende Buchungs-Detail Premium-UX
   =================================================================== */

#dash_search_results .c360-empty {
    padding: 18px 20px;
    font-size: 14px;
    color: var(--text-muted);
    text-align: center;
}
#dash_search_results .c360-err {
    color: #c0392b;
    font-weight: 600;
}
.dash-icon { font-size: 45px; }
.dash-live { background: var(--surface-2); width: 100%; padding: 8px; border-radius: 6px; font-size: 12px; font-weight: bold; color: var(--text); border: 1px solid var(--border); box-sizing: border-box; margin-top: auto;}

.tile-prov { border-color: var(--blue); } .tile-pool { border-color: var(--open-dark); } .tile-san { border-color: var(--clean); } .tile-anim { border-color: var(--warning); } .tile-xibo { border-color: var(--purple); } .tile-bus { border-color: #d35400; } .tile-gen { border-color: #7f8c8d; } .tile-calidad { border-color: #0097a7; }

.app-module { display: none; }

/* Larga estancia — filas de documentos alineadas (estado + enlace + editar) */
.le-doc-block { font-size: 12px; margin-top: 10px; border-top: 1px solid var(--border); padding-top: 10px; }
.le-doc-status-row {
    display: grid;
    grid-template-columns: minmax(96px, 30%) minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    margin-bottom: 6px;
}
.le-doc-label { color: var(--text-muted); }
.le-doc-status { text-align: right; min-width: 0; word-break: break-word; }
.le-doc-actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.le-doc-actions .le-doc-link-slot {
    display: inline-flex;
    width: 1.75rem;
    justify-content: center;
}
.le-doc-edit-btn {
    padding: 2px 8px !important;
    font-size: 12px !important;
    width: auto !important;
    min-width: 2.25rem;
}

.app-nav { display: none; margin-bottom: 20px; background: var(--surface); padding: 15px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); align-items: center; justify-content: flex-start; gap: 20px;}
.btn-back { background: var(--border); color: var(--text); border: none; padding: 10px 20px; border-radius: 5px; font-weight: bold; cursor: pointer; display: flex; align-items: center; gap: 8px; font-size: 14px; transition: 0.2s; width: auto;}
.btn-back:hover { background: var(--border); }

/* GENERAL FORMS & BUTTONS */
.form-control { width: 100%; padding: 10px; margin-bottom: 10px; border: 1px solid var(--border); border-radius: 5px; box-sizing: border-box; font-size: 14px; background: var(--surface); color:var(--text); transition: border 0.3s;}
.form-control:focus { border-color: var(--blue); outline: none; box-shadow: 0 0 5px rgba(0,69,129,0.2); }

button { cursor: pointer; border: none; border-radius: 6px; padding: 12px; font-weight: bold; transition: 0.3s; width: 100%; font-size: 14px;}
.btn-blue { background: var(--blue); color:white;} .btn-blue:hover { background: #003366; }
.btn-green { background: var(--open-dark); color:white;} .btn-green:hover { background: #1b5e20; }
.btn-red { background: var(--close-dark); color:white;} .btn-red:hover { background: #b71c1c; }
.btn-purple { background: var(--purple); color:white;} .btn-purple:hover { background: #732d91; }
.btn-warning { background: var(--warning); color: white;} .btn-warning:hover { background: #e67e22; }
.btn-outline { background: var(--surface); color: var(--blue); border: 2px solid var(--blue); } .btn-outline:hover { background: var(--bg); }
.btn-auto { width: auto; padding: 10px 20px; }

/* ITEM BLOCKS */
.item { padding: 15px; border-radius: 8px; border: 2px solid var(--border); transition: 0.3s; position: relative; }
.item label, .item h4 { font-weight: bold; display: block; margin-bottom: 5px; color: inherit; margin-top: 5px; }
.item select, .item input, .item textarea { color: var(--text); width: 100%; padding: 8px; border: 1px solid var(--border); border-radius: 5px; box-sizing: border-box; margin-bottom: 8px; background: var(--surface); }

.bg-open-dark { background-color: var(--open-dark); border-color: #1b5e20; color: #fff; } 
.bg-open-light { background-color: var(--open-light); border-color: #4caf50; color: #000; }
.bg-close-light { background-color: var(--close-light); border-color: #f44336; color: #000; } 
.bg-close-dark, .bg-mantenimiento { background-color: var(--close-dark); border-color: #b71c1c; color: #fff; } 
.bg-limpieza { background-color: var(--clean); border-color: #1f618d; color: #fff; }

.blink-red { background-color: var(--close-dark) !important; color: white !important; animation: blinker 1.5s linear infinite; } 
@keyframes blinker { 50% { opacity: 0.6; } }

.date-group { display: flex; gap: 5px; background: rgba(255,255,255,0.2); padding: 10px; border-radius: 5px; margin-bottom: 10px; border: 1px solid rgba(0,0,0,0.1); align-items: center;}
.date-group div { flex-grow: 1; } .date-group label { font-size: 0.85em; }
.btn-clear { background: rgba(0,0,0,0.2); color: white; border: none; border-radius: 3px; cursor: pointer; padding: 8px; height: 35px; margin-top: 15px; font-weight: bold;} 
.btn-maint { background: #d35400; color: white; margin-bottom: 15px; } 
.btn-override { background: #f39c12; color: white; margin-bottom: 5px; font-size: 16px; border: 2px solid #e67e22;} 
.alert-error { background: #ffebee; color: #c62828; border-left: 5px solid #c62828; padding: 15px; border-radius: 5px; margin-bottom: 15px; display: none; font-weight: bold; font-size: 1.1em; }
.live-status { font-size:1.1em; padding:8px; border-radius:5px; background:rgba(0,0,0,0.2); font-weight:bold; margin-bottom:10px; } 
.live-sanitary { font-size:0.9em; font-weight:bold; margin-bottom:8px; opacity:0.9; min-height:18px; }

/* MODALS & TABLES */
.modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 1000; justify-content: center; align-items: center; padding: 12px; box-sizing: border-box; overflow-y: auto;}
.modal { background: var(--surface); padding: 30px; border-radius: 12px; width: 500px; max-width: min(500px, calc(100vw - 24px)); color: var(--text); max-height: calc(100vh - 24px); overflow-y: auto; box-shadow: 0 15px 30px rgba(0,0,0,0.2); box-sizing: border-box;}
table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 0.9em; } 
th, td { padding: 10px; border: 1px solid var(--border); text-align: left; } 
th { background: var(--blue); color: white; position: sticky; top: 0; z-index: 1;}

/* WIDGETS */
.ticker-grid { display: grid; grid-template-columns: 1fr; gap: 10px; } 
.ticker-grid textarea { height: 60px; resize: vertical; }
.weather-widget { background: #e0f7fa; color: #006064; padding: 15px; border-radius: 8px; border-left: 5px solid #00bcd4; font-size: 14px; position:relative; height: 100%; box-sizing: border-box;}
.weather-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid rgba(0,0,0,0.1); flex-wrap: wrap; gap: 6px 12px;}
.weather-row > * { min-width: 0; }

/* General-Modul: Mobile-Anpassungen (#mod_gen: WiFi + Wetter + Ticker) */
@media (max-width: 640px) {
    #mod_gen .grid > .item[style*="grid-column: span 2"],
    #mod_gen .grid > .item[style*="grid-column:span 2"] {
        grid-column: 1 / -1 !important;
    }
    #mod_gen .weather-widget { padding: 12px; font-size: 13px; }
    #mod_gen .weather-row { justify-content: flex-start; }
    /* "Ahora"-Zeile (1. weather-row mit großer Temperatur) auf Mobile gestapelt */
    #mod_gen .weather-row:first-of-type > div { flex: 1 1 100%; }
    #mod_gen .weather-row:first-of-type > div:nth-child(2) { font-size: 22px !important; }
    #mod_gen .weather-row:first-of-type > div:nth-child(3) { text-align: left !important; }
    #mod_gen .weather-row:first-of-type > div:nth-child(3) > div:first-child { justify-content: flex-start !important; }
    /* 3h / Noche / Mañana-Zeilen sauber 2-spaltig nebeneinander */
    #mod_gen .weather-row:not(:first-of-type) > div { flex: 1 1 auto; }
    /* Wifi-Box: Select volle Breite */
    #mod_gen #box_wifi select { width: 100%; box-sizing: border-box; }
    /* Ticker-Textareas etwas niedriger auf Mobile */
    #mod_gen .ticker-grid textarea { height: 50px; font-size: 13px; }
}
#toast { visibility: hidden; min-width: 250px; background-color: #333; color: #fff; text-align: center; border-radius: 5px; padding: 16px; position: fixed; z-index: 10000; left: 50%; bottom: 30px; transform: translateX(-50%); transition: opacity 0.3s; opacity: 0; } 
#toast.show { visibility: visible; opacity: 1; }
.monitor-box { display: flex; gap: 15px; margin-top: 10px;} 
.monitor-item { flex: 1; padding: 10px; border-radius: 5px; background: var(--border); font-weight: bold; text-align: center; border: 2px solid var(--border); font-size: 15px; }

/* ANIMATION MODAL: Custom-Option-Row (Eingabe + Plus-Button neben Dropdown) */
.custom-option-row { display: flex; gap: 6px; align-items: center; margin-top: 4px; margin-bottom: 10px; }
.custom-option-row .form-control { margin-bottom: 0; flex: 1; font-size: 13px; padding: 6px 10px; }
.btn-add-opt { background: var(--blue); color: white; border: none; border-radius: 6px; width: 32px; height: 32px; font-size: 18px; line-height: 1; cursor: pointer; flex-shrink: 0; transition: background 0.2s; }
.btn-add-opt:hover { background: var(--blue-dark, #0055aa); }

/* ANIMATION MODAL: Días de la semana checkboxes */
.dia-check { display: inline-flex; align-items: center; gap: 4px; background: #f0f4f8; border: 1px solid #d0d7e2; border-radius: 6px; padding: 4px 9px; font-size: 13px; cursor: pointer; user-select: none; }
.dia-check input[type=checkbox] { cursor: pointer; }
.dia-check:has(input:checked) { background: var(--blue); color: white; border-color: var(--blue); }

/* EVENTS */
.event-day { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; margin-bottom: 15px; overflow: hidden; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
.event-day-header { background: #004581; color: white; padding: 10px 15px; font-weight: bold; font-size: 1.1em; word-break: break-word; }
.event-card { padding: 15px; border-bottom: 1px solid var(--border); display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 15px; align-items: center; min-width: 0;}
.event-card > div { min-width: 0; }
.event-card label { display: block; font-size: 12px; color: var(--text-muted); font-weight: 600; margin-bottom: 4px; }
.event-card .form-control { width: 100%; box-sizing: border-box; min-width: 0; }
.event-card:last-child { border-bottom: none; }
.bg-ev-upcoming { background-color: #e8f5e9; border-left: 6px solid #4caf50; } .bg-ev-running { background-color: #e3f2fd; border-left: 6px solid #03a9f4; } .bg-ev-finished { background-color: var(--surface-2); border-left: 6px solid #9e9e9e; opacity: 0.75; } .bg-ev-cancelled { background-color: #ffebee; border-left: 6px solid #f44336; opacity: 0.8; }
.event-btn { background: #e74c3c; color: white; padding: 8px; height: 100%; font-weight: bold; font-size:12px; cursor:pointer; border-radius:5px;} .event-btn-ok { background: #2ecc71; color: white; padding: 8px; height: 100%; font-weight: bold; font-size:12px; cursor:pointer; border-radius:5px;}
.toggle-btn { background: #004581; color: white; padding: 12px; font-weight: bold; border-radius: 5px; text-align: center; cursor: pointer; transition: 0.3s; display: block; width: 100%; box-sizing: border-box; border: none; font-family: inherit; font-size: 14px; }
.toggle-btn:hover { background: #003366; }
.toggle-btn[disabled] { background: #95a5a6; cursor: not-allowed; opacity: 0.7; }

@media (max-width: 720px) {
    .event-card { grid-template-columns: 1fr; gap: 10px; padding: 12px; }
    .event-card > div:last-child { margin-top: 4px; }
    .event-day-header { font-size: 0.95em; padding: 9px 12px; }
    .event-btn, .event-btn-ok { width: 100%; padding: 12px 8px; }
}

/* BUS */
.transit-widget { position: relative; width: 100%; height: 95px; background-color: var(--surface); border-radius: 12px; box-shadow: 0 4px 10px rgba(0,0,0,0.05); overflow: hidden; border: 1px solid rgba(0,0,0,0.1); margin-bottom: 20px; color: var(--text); }
.track-line { position: absolute; left: 5%; right: 5%; height: 4px; background: #e0e0e0; border-radius: 2px; bottom: 30px; z-index: 1; }
.station { position: absolute; bottom: 30px; width: 2px; height: 4px; display: flex; justify-content: center; z-index: 5; }
.station-label { position: absolute; bottom: 18px; font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; white-space: nowrap; }
.station-logo { position: absolute; bottom: 12px; height: 24px; background: var(--surface); padding: 3px 6px; border-radius: 6px; border: 2px solid #2ecc71; box-shadow: 0 2px 5px rgba(0,0,0,0.15); z-index: 20; }
.station-dot { position: absolute; top: -5px; width: 10px; height: 10px; background-color: var(--surface); border-radius: 50%; border: 3px solid; box-sizing: border-box; }
.bus-capsule { position: absolute; bottom: 30px; transform: translate(-50%, 50%); display: flex; align-items: center; gap: 5px; padding: 3px 8px 3px 6px; border-radius: 12px; font-size: 12px; font-weight: bold; box-shadow: 0 3px 6px rgba(0,0,0,0.15); transition: left 1s ease-in-out; white-space: nowrap; z-index: 10; }
.bus-capsule svg { width: 14px; height: 14px; fill: currentColor; }
.bus-divider { width: 1px; height: 12px; background: currentColor; opacity: 0.4; }
.dir-arrow { font-size: 10px; opacity: 0.9; }
.bus-000 { background: #7f8c8d; color: #fff; border: 1px solid #95a5a6; } .bus-010-altea { background: #2980b9; color: #fff; border: 1px solid #3498db; } .bus-050-albir { background: #8e44ad; color: #fff; border: 1px solid #9b59b6; } .bus-benidorm { background: #d35400; color: #fff; border: 1px solid #e67e22; } 
@keyframes bus-blink { 0%, 100% { filter: brightness(1); box-shadow: 0 3px 6px rgba(0,0,0,0.15); } 50% { filter: brightness(1.1); box-shadow: 0 0 10px rgba(231, 76, 60, 0.7); } }
.urgent { animation: bus-blink 1s infinite; z-index: 15; }
.footer-bus { position: absolute; bottom: 4px; width: 100%; display: flex; justify-content: space-between; padding: 0 15px; box-sizing: border-box; font-size: 10px; color: var(--text-muted); font-weight: 600; }

/* PROVEEDORES & AUTORIZACIONES */
.badge { display: inline-block; padding: 6px 10px; border-radius: 4px; font-size: 12px; font-weight: bold; text-transform: uppercase; color: white; }
.badge-partner { background: var(--blue); } .badge-ext { background: #7f8c8d; }
.badge-unpaid { background: #e67e22; border: 2px solid #d35400; padding: 4px 8px; font-size:11px; animation: pulse 2s infinite;}
@keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.7; } 100% { opacity: 1; } }

.auth-box-ok { background: #e8f5e9; border: 2px solid var(--open-dark); padding: 10px; border-radius: 5px; margin-top: 10px; }
.auth-box-fail { background: var(--danger-light); border: 2px dashed var(--close-dark); padding: 10px; border-radius: 5px; margin-top: 10px; }
.auth-box-warn { background: #fff3cd; border: 2px solid #ffecb5; padding: 10px; border-radius: 5px; margin-top: 10px; color: #856404; }

.easycamp-alert { background: #fdedec; border-left: 6px solid var(--close-dark); padding: 15px; margin-bottom: 20px; border-radius: 8px; display: flex; align-items: center; gap: 15px; }
.search-box { display: flex; gap: 10px; align-items: center; background: #e8f4f8; padding: 15px; border-radius: 8px; border: 1px solid #b3e5fc; margin-bottom: 15px;}
.live-card { border: 2px solid var(--border); border-radius: 8px; padding: 15px; position: relative; background: var(--surface); }
.live-card.partner { border-left: 8px solid var(--blue); } .live-card.external { border-left: 8px solid #95a5a6; }
.tag-list { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.tag-item { background: var(--border); padding: 5px 10px; border-radius: 15px; font-size: 12px; display: flex; align-items: center; gap: 5px; border: 1px solid var(--border); }
.tag-item span { cursor: pointer; color: red; font-weight: bold; }
.doc-row { display: flex; align-items: center; gap: 10px; padding: 8px; border-bottom: 1px solid var(--border); }
.doc-name { flex: 2; font-weight: bold; font-size: 13px; } .doc-date { flex: 1; margin-bottom: 0; }
.status-ok { background: #e8f5e9; border-left: 5px solid var(--open-dark); } .status-warn { background: var(--warning-light); border-left: 5px solid var(--warning); } .status-danger { background: var(--danger-light); border-left: 5px solid var(--close-dark); }
.override-warn { background-color: #fff3cd !important; border: 2px solid #ffecb5 !important; color: #856404 !important; font-weight: bold;}
.danger-data { background: var(--danger-light); border: 2px dashed var(--close-dark); color: var(--close-dark); padding: 10px; border-radius: 5px; margin-bottom:15px; font-weight: bold; display: flex; justify-content: space-between; align-items: center;}
.missing-data { background: var(--warning-light); border: 2px dashed var(--warning); padding: 10px; border-radius: 5px; margin-bottom:15px; font-weight: bold; color: #8a6d3b; display: flex; justify-content: space-between; align-items: center; }
@keyframes blink-red {
    0% { background-color: #fadbd8; }
    50% { background-color: #f5b7b1; border-color: #900C3F; }
    100% { background-color: #fadbd8; }
}

/* ===================================================================
   CONTRATISTAS — Responsive (Mobile)
   =================================================================== */

/* Live-Karten: Touch-freundlicher Mindestabstand */
.live-card { box-sizing: border-box; }
.live-card .btn-red { width: 100%; }

@media (max-width: 640px) {

    /* --- Modul-Header: Titel + Buttons untereinander --- */
    #mod_prov > div:first-child {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px;
    }
    #mod_prov > div:first-child > div {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        gap: 8px;
    }
    #mod_prov > div:first-child > div > button {
        flex: 1 1 auto;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* --- Search-Box: Suche oben, Buttons darunter gestapelt --- */
    .search-box {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .search-box > div:last-child {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        width: 100%;
    }
    .search-box > div:last-child > button {
        flex: 1 1 auto;
        min-width: 0;
    }

    /* --- Entry-Form Header: Firmenname + Badge/Button untereinander --- */
    #entry_form > div:first-child {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px;
    }
    #entry_form > div:first-child > div {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        align-items: center;
    }

    /* --- Live-Karten: 1-Spalten-Layout auf Mobilgeräten --- */
    #active_list.grid {
        grid-template-columns: 1fr !important;
    }

    /* --- Auth-Listen-Modal --- */
    #auth-list-modal > .modal > div:first-child {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px;
    }
    #auth-list-modal > .modal > div:first-child > button {
        width: 100%;
    }

    /* Auth-Tabs umbrechen */
    #auth-list-modal > .modal > div:nth-child(2) {
        flex-wrap: wrap !important;
    }
    #auth-list-modal > .modal > div:nth-child(2) > button {
        flex: 1 1 auto;
    }

    /* Auth-Suche + Toggle-Button stapeln */
    #auth_normal_section > div:first-child {
        flex-wrap: wrap !important;
    }
    #auth_normal_section > div:first-child > button {
        width: 100%;
    }

    /* --- Finance-Modal: Filter stapeln --- */
    #finance-list-modal > .modal > div:nth-child(2) {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    #finance-list-modal > .modal > div:nth-child(2) > div,
    #finance-list-modal > .modal > div:nth-child(2) > button {
        width: 100% !important;
        flex: none !important;
    }
    #finance-list-modal > .modal > div:nth-child(2) > div > input {
        width: 100%;
    }

    /* --- Prov-Modal (Ficha Contratista): Header sichern --- */
    #prov-modal > .modal > div:first-child {
        flex-wrap: wrap;
        gap: 8px;
    }

    /* --- Exit-Modal: Buttons immer volle Breite --- */
    #exit_buttons_box > button {
        width: 100% !important;
    }

    /* --- All-Prov-Modal: maximale Breite & scrollen --- */
    #all-prov-modal > .modal {
        max-height: 85vh;
        overflow-y: auto;
    }
    #all-prov-modal > .modal > div:nth-child(2) {
        max-height: 60vh;
        overflow-x: auto;
    }

    /* --- Danger/Missing-Data Boxen: Stack auf Mobil --- */
    .danger-data,
    .missing-data {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px;
    }
    .danger-data > button,
    .missing-data > button {
        width: 100%;
    }

    /* --- Auth-Detect-Box: besser lesbar --- */
    .auth-box-ok,
    .auth-box-fail,
    .auth-box-warn {
        font-size: 13px;
        line-height: 1.5;
    }

    /* --- Doc-Row in Ficha: Elemente untereinander --- */
    .doc-row {
        flex-wrap: wrap;
    }
    .doc-row .doc-name {
        flex: 1 1 100%;
    }
    .doc-row .doc-date {
        flex: 1 1 auto;
        min-width: 120px;
    }
}

/* ===================================================================
   Dashboard — chrome (Top-Bar + greeting): eigene Stack-Ebene über Tab-Inhalt
   =================================================================== */
.dashboard-chrome,
#dashboard-chrome {
  position: relative;
  z-index: 900;
}

.app-top-bar {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-width: 0;
  padding: 10px 14px;
  background-color: var(--surface);
  border-radius: 14px 14px 0 0;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
  box-sizing: border-box;
}

.top-bar-left {
  flex: 1 1 auto;
  min-width: 0;
  overflow: visible;
}

.header-logo {
  display: block;
  width: min(132px, 42vw);
  height: auto !important;
  max-height: 38px !important;
  object-fit: contain;
  object-position: left center;
}

.top-bar-right {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
}

.user-menu-wrapper {
  position: relative;
  z-index: 960;
}

.user-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 42px;
  min-width: 64px;
  background: #f8fbfd;
  border: 1px solid #b7d2e5;
  border-radius: 999px;
  padding: 6px 14px;
  font-weight: 700;
  color: #003366;
  cursor: pointer;
  touch-action: manipulation;
  box-shadow: 0 1px 4px rgba(0, 69, 129, 0.10);
  transition: background 120ms, border-color 120ms, transform 120ms;
}

.user-dropdown-trigger:hover,
.user-dropdown-trigger:focus-visible {
  background: #e7f1f9;
  border-color: #7fb1d6;
  outline: none;
  transform: translateY(-1px);
}

.user-dropdown-trigger:active {
  transform: translateY(0);
  background: #d8e8f3;
}

.user-trigger-gear {
  flex: 0 0 auto;
  font-size: 22px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.header-user-firstname {
  font-weight: 700;
  font-size: 14px;
  line-height: 1.2;
  min-width: 0;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-trigger-caret {
  flex: 0 0 auto;
  font-size: 13px;
  opacity: 0.7;
}

/* Dropdown öffnet als position: fixed (relativ zum Viewport, nicht zum Header).
   Top & Left werden in dashboard-header-shim.js dynamisch berechnet — so kann
   das Menü nie von Tab-Bar / Kacheln verdeckt werden und braucht keinen Scroll.
   Bei sehr engem Viewport (< Dropdown-Höhe + Trigger) öffnet es sich nach oben. */
.dropdown-content {
  position: fixed;
  top: 0;
  left: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 14px 34px var(--shadow);
  display: flex;
  flex-direction: column;
  min-width: 250px;
  width: min(320px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  z-index: 99999;
}

.dropdown-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
  padding: 13px 15px;
  border: none;
  background: var(--surface);
  text-align: left;
  font-size: 14px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  color: var(--text);
  font-family: inherit;
}

.dropdown-item:hover,
.dropdown-item:focus-visible {
  background: var(--surface-2);
  outline: none;
}

.dropdown-item--notif {
  background: var(--surface-2);
}

.dropdown-item-title {
  font-weight: 750;
  line-height: 1.2;
}

.dropdown-item-meta {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.35;
  font-weight: normal;
}

.dropdown-item--logout {
  background: var(--surface);
}

.dropdown-divider {
  margin: 0;
  border: none;
  border-top: 1px solid var(--border);
}

.text-danger { color: #dc3545; font-weight: bold; }

.greeting-section {
  padding: 12px 16px 14px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--surface);
  border-radius: 0 0 14px 14px;
  box-sizing: border-box;
  margin-bottom: 10px;
}

#greeting-title { margin: 0; font-size: 22px; color: var(--text); min-width: 0; border-bottom: none; padding-bottom: 0; }

.action-btn-flat {
  background: var(--surface-2);
  border: none;
  color: var(--text);
  padding: 8px 16px;
  border-radius: 20px;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
  flex: 0 0 auto;
}

.employee-panel-roadmap {
    font-size: 13px; color: var(--text-muted); background: #f0f7ff; border-left: 4px solid var(--blue);
    padding: 10px 12px; border-radius: 6px; margin: 0 0 16px 0; line-height: 1.4;
}
.employee-panel-section {
    border: 1px solid #e0e0e0; border-radius: 10px; padding: 14px; margin-bottom: 14px; background: var(--surface-2);
}
.employee-panel-h3 { margin: 0 0 8px 0; font-size: 15px; color: var(--text); }
.employee-panel-p { margin: 0; font-size: 13px; color: var(--text-muted); line-height: 1.45; }
.employee-panel-status { margin-top: 8px; font-size: 12px; min-height: 1.2em; }

/* Push preferences toggles (v3.7.9) ---------------------------------- */
.push-prefs-list { display: flex; flex-direction: column; gap: 6px; }
.push-prefs-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 10px; background: var(--surface); border: 1px solid #e3e6ea;
    border-radius: 8px; font-size: 13px; color: var(--text);
}
.push-prefs-row.is-master {
    background: #f0f7ff; border-color: #b6d4ff; font-weight: 600;
}
.push-prefs-row .push-prefs-label { flex: 1; line-height: 1.35; }
.push-prefs-row .push-prefs-label small { display: block; font-weight: 400; color: #7a8290; font-size: 11px; margin-top: 2px; }
.push-prefs-row.is-disabled { opacity: 0.55; }
.push-prefs-switch {
    position: relative; width: 42px; height: 24px; flex-shrink: 0;
    background: #c5ccd4; border-radius: 12px; cursor: pointer;
    transition: background 0.18s ease;
}
.push-prefs-switch::after {
    content: ""; position: absolute; top: 2px; left: 2px;
    width: 20px; height: 20px; background: var(--surface); border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25); transition: left 0.18s ease;
}
.push-prefs-switch.is-on { background: #27ae60; }
.push-prefs-switch.is-on::after { left: 20px; }
.push-prefs-switch.is-busy { opacity: 0.55; cursor: wait; }

@media (max-width: 640px) {
    body {
        padding: 8px;
    }

    #app,
    #dashboard-chrome,
    #tab-content-area,
    #tab-panel-home,
    #home_dashboard {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow-x: hidden;
    }

    .app-top-bar {
        padding: 8px 10px;
        gap: 6px;
        border-radius: 12px 12px 0 0;
    }

    .top-bar-right {
        gap: 4px;
    }

    .header-logo {
        width: min(108px, 36vw);
        max-height: 32px !important;
    }

    .notif-bell-btn {
        padding: 6px 6px;
        min-width: 38px;
        min-height: 38px;
    }
    .notif-bell-icon {
        font-size: 1.2rem;
    }

    .user-dropdown-trigger {
        min-height: 38px;
        min-width: 44px;
        padding: 6px 8px;
        gap: 3px;
    }

    .user-trigger-gear {
        font-size: 19px;
    }
    .user-trigger-caret {
        display: none;
    }

    .header-user-firstname {
        max-width: 26vw;
        font-size: 13px;
    }

    .dropdown-content {
        right: 0;
        width: min(320px, calc(100vw - 16px));
        max-width: calc(100vw - 16px);
    }
    .dropdown-item {
        padding: 14px 14px;
        min-height: 48px;
    }
    .dropdown-item--logout {
        background: #fff2f2;
    }

    .greeting-section {
        align-items: flex-start;
        padding: 10px 10px 12px;
    }

    #greeting-title {
        font-size: 18px;
        line-height: 1.25;
    }

    .action-btn-flat {
        padding: 7px 10px;
        font-size: 12px;
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 8px 0;
    }

    .dash-global-search {
        padding: 12px !important;
        align-items: stretch !important;
    }

    #dash_app_search {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        flex-basis: 100% !important;
    }

    #dash_search_results {
        max-width: 100%;
        overflow-x: hidden;
    }

    /* Tab-Bar (offene Buchungs-Tabs): kürzere Tabs, kleinerer Padding */
    .tab-bar {
        padding: 6px 2px 0 2px;
        gap: 2px;
    }
    .tab-item {
        padding: 9px 8px 9px 10px;
        font-size: 12px;
        max-width: 140px;
    }
    .tab-item-close {
        width: 28px;
        padding: 0 6px;
        font-size: 16px;
    }

    /* "Volver al Panel Principal" Button + Modul-Titel kompakter */
    #app_nav {
        gap: 8px;
    }
    .btn-back {
        padding: 8px 12px;
        font-size: 13px;
    }
    #app_nav_title {
        font-size: 1.05rem;
    }

    /* Dashboard-Tiles (Home): kompakter padding, kleinere Höhe → mehr Tiles sichtbar */
    .dash-tile {
        padding: 14px 14px 12px;
        min-height: 0;
    }
    .dash-icon {
        font-size: 34px;
    }
    .dash-tile h3 {
        font-size: 1.05rem;
        margin: 4px 0 2px;
    }
    .dash-tile p {
        font-size: 12px;
        margin: 0 0 6px;
    }
    .dash-live {
        font-size: 11px;
        padding: 6px;
    }
}

/* ===================================================================
   Multi-Tasking Tab-Leiste (SPA)
   =================================================================== */
#tab-content-area {
    position: relative;
    z-index: 1;
    min-height: 120px;
}
.tab-panel {
    display: none;
}
.tab-panel.is-active {
    display: block;
}
.tab-panel-scroll {
    min-height: 200px;
}

#tab-content-area > #app_nav {
    width: 100%;
    box-sizing: border-box;
}

.tab-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 2px 4px;
    padding: 8px 4px 0 4px;
    margin: 0 0 12px 0;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px 10px 0 0;
    border-bottom: 1px solid var(--border);
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}

.tab-item-wrap {
    display: inline-flex;
    align-items: stretch;
    margin-bottom: -1px;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    background: transparent;
    transition: background 0.15s ease;
}
.tab-item-wrap.active {
    background: var(--surface);
    border-color: var(--border);
    border-bottom-color: var(--surface);
    box-shadow: 0 -2px 8px var(--shadow);
    z-index: 2;
    position: relative;
}

.tab-item {
    appearance: none;
    border: none;
    background: transparent;
    padding: 10px 14px 10px 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    font-family: inherit;
    border-radius: 8px 0 0 0;
    max-width: 220px;
    text-align: left;
}
.tab-item-wrap:not(.active) .tab-item:hover {
    background: var(--surface);
    color: var(--blue, #004581);
}
.tab-item.active,
.tab-item-wrap.active .tab-item {
    color: var(--blue, #004581);
}
.tab-item-label {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tab-item-close {
    flex-shrink: 0;
    width: 32px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    border-radius: 0 8px 0 0;
    padding: 0 8px;
    font-family: inherit;
}
.tab-item-close:hover {
    background: rgba(192, 57, 43, 0.12);
    color: #c0392b;
}
.tab-item-wrap.active .tab-item-close:hover {
    background: rgba(192, 57, 43, 0.1);
}

/* ============================================================
   CENTRO DE NOTIFICACIONES — Campana en el Header
   ============================================================ */
.notif-bell-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    margin-right: 8px;
}
.notif-bell-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: background 0.15s;
}
.notif-bell-btn:hover {
    background: rgba(255, 255, 255, 0.15);
}
.notif-bell-icon {
    font-size: 1.35rem;
    line-height: 1;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25));
}
.notif-bell-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    background: #e74c3c;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    pointer-events: none;
    box-shadow: 0 1px 4px rgba(231,76,60,0.5);
}
.notif-panel {
    position: fixed;
    top: 0;
    left: 0;
    width: 340px;
    max-width: calc(100vw - 16px);
    background: var(--surface);
    border: 1px solid #dde3ea;
    border-radius: 12px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.16);
    z-index: 99999;
    overflow: hidden;
    animation: notif-slide-in 0.18s ease;
}
@keyframes notif-slide-in {
    from { opacity: 0; transform: translateY(-6px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0)    scale(1);    }
}
.notif-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid #eef0f3;
    background: #f7f9fc;
}
.notif-panel-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--blue, #004581);
    letter-spacing: 0.02em;
}
.notif-leer-todas-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 0.75rem;
    color: #2980b9;
    padding: 2px 4px;
    border-radius: 4px;
    transition: background 0.12s;
    white-space: nowrap;
}
.notif-leer-todas-btn:hover {
    background: rgba(41,128,185,0.1);
}
.notif-panel-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 380px;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.notif-panel-empty {
    padding: 32px 16px;
    text-align: center;
    color: #95a5a6;
    font-size: 0.85rem;
}
.notif-panel-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--bg);
    cursor: pointer;
    transition: background 0.12s;
    position: relative;
}
.notif-panel-item:last-child { border-bottom: none; }
.notif-panel-item:hover      { background: #f5f8fc; }
.notif-panel-item:focus      { outline: 2px solid var(--blue, #004581); outline-offset: -2px; }
.notif-nueva  { background: #f0f6ff; }
.notif-leida  { opacity: 0.72; }
.notif-item-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
    margin-top: 2px;
}
.notif-item-body {
    flex: 1;
    min-width: 0;
}
.notif-item-titulo {
    margin: 0 0 2px 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: #1a252f;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.notif-item-cuerpo {
    margin: 0 0 4px 0;
    font-size: 0.78rem;
    color: #566573;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.notif-item-time {
    font-size: 0.72rem;
    color: #95a5a6;
}
.notif-item-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #2980b9;
    flex-shrink: 0;
    margin-top: 6px;
    box-shadow: 0 0 0 2px rgba(41,128,185,0.2);
}

/* ===================================================================
   Larga Estancia — Modal responsive
   =================================================================== */
@media (max-width: 640px) {
    #le-form-modal > .modal {
        padding: 16px;
    }
    #le-form-modal .grid[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }
    #le-form-modal > .modal > div[style*="display:flex"],
    #le-form-modal > .modal > div[style*="display: flex"] {
        flex-wrap: wrap;
    }
    #le-form-modal > .modal > div[style*="justify-content:space-between"],
    #le-form-modal > .modal > div[style*="justify-content: space-between"] {
        flex-direction: column-reverse;
        gap: 10px;
    }
    #le-form-modal > .modal > div[style*="justify-content:space-between"] > div,
    #le-form-modal > .modal > div[style*="justify-content: space-between"] > div {
        display: flex;
        flex-direction: column;
        gap: 8px;
        width: 100%;
    }
    #le-form-modal button.btn-auto {
        width: 100%;
        box-sizing: border-box;
    }
}

/* ===== LLAVES: RESPONSIVE SUBKEY ROWS & CARD BUTTONS ===== */
.llave-subkey-row { flex-wrap: wrap; }
.llave-subkey-row .sk-tipo,
.llave-subkey-row .sk-desc { min-width: 0; }
.llave-card-actions { flex-wrap: wrap; }
.llave-card-actions .llave-card-btn { min-width: 0; }

@media (max-width: 640px) {
    /* Llaves-Cards: 1 Spalte auf Mobile */
    #llaves_container.grid { grid-template-columns: 1fr !important; }

    /* Subkey-Zeile umbrechen, Select volle Breite */
    .llave-subkey-row {
        gap: 6px !important;
        padding: 10px !important;
        align-items: stretch !important;
    }
    .llave-subkey-row .sk-tipo {
        width: 100% !important;
        flex: 1 1 100% !important;
    }
    .llave-subkey-row .sk-desc {
        width: 100% !important;
        flex: 1 1 100% !important;
    }
    .llave-subkey-row .sk-add-backup {
        flex: 1 1 auto !important;
    }

    /* Card-Buttons: 2 pro Reihe statt 6 in einer Linie */
    .llave-card-actions .llave-card-btn {
        flex: 1 1 calc(50% - 8px) !important;
        padding: 8px 4px !important;
    }

    /* Llave-Form-Modal & Trans-Modal: Padding reduzieren */
    #llave-form-modal > .modal,
    #llave-trans-modal > .modal,
    #llave-loss-modal > .modal {
        width: 96vw !important;
        max-width: 96vw !important;
        padding: 14px !important;
        max-height: 92vh;
        overflow-y: auto;
    }
    #llave-form-modal .grid,
    #llave-trans-modal .grid {
        grid-template-columns: 1fr !important;
    }
    /* Signatur-Canvas auf Mobile flexibel */
    #sig_canvas { width: 100% !important; height: 130px !important; }
}

/* ===================================================================
   VISITAS — Mobile Responsiveness
   =================================================================== */
@media (max-width: 640px) {
    /* Modals: weniger Padding, kleinere Titel */
    #visita-checkin-modal .modal,
    #visita-checkout-modal .modal,
    #visita-settings-modal .modal {
        padding: 16px;
    }
    #visita-checkin-modal h3,
    #visita-checkout-modal h3,
    #visita-settings-modal h3 {
        font-size: 17px;
    }

    /* Pax-Felder (Adultos/Niños/Bebés): 3-Spalten -> 2-Spalten */
    #visita-checkin-modal .grid[style*="1fr 1fr 1fr"] {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px;
    }

    /* Chip-Reihen im Check-In: Label oben, Inputs voll breit darunter */
    .chip-row {
        flex-wrap: wrap;
    }
    .chip-row label {
        flex: 0 0 100% !important;
        width: 100% !important;
    }
    .chip-row .v-chip-id,
    .chip-row .v-chip-name {
        flex: 1 1 100% !important;
    }

    /* Header-Buttons im Visitas-Modul (Archivo / Tarifas / Check-In) */
    #mod_visitas > div:first-child {
        flex-wrap: wrap;
        gap: 8px;
    }
    #mod_visitas > div:first-child > div:last-child {
        flex-wrap: wrap;
        gap: 6px;
        width: 100%;
    }
    #mod_visitas > div:first-child > div:last-child > button {
        flex: 1 1 calc(50% - 3px);
        font-size: 12px;
        min-width: 0;
    }

    /* Karten-Header (Titel + Eintrittszeit) untereinander */
    #visitas_container > div > div:first-child {
        flex-direction: column;
        gap: 4px;
    }

    /* Karten-Action-Buttons (Editar / Check-Out / Bon): je 100% Breite */
    .visit-card-actions {
        flex-wrap: wrap;
    }
    .visit-card-actions > button {
        flex: 1 1 100% !important;
    }

    /* Check-Out: Importe-Final-Input voll breit */
    #co_importe_final {
        width: 100% !important;
    }

    /* Tarifen-Konfig: Datumsbereich (von / hasta / bis / ✖) vertikal stacken */
    .visit-period-row {
        flex-wrap: wrap;
    }
    .visit-period-row > input {
        flex: 1 1 100% !important;
        min-width: 0 !important;
    }
    .visit-period-row > span {
        flex: 0 0 auto;
    }
}

/* ===================================================================
   SCHICHT-COCKPIT — modules/dashboard_cockpit.js
   Prominentes Stempel-/To-Do-Widget ganz oben im Dashboard.
   Dark-Mode-kompatibel über die Theme-Variablen (--surface, --text …).
   =================================================================== */
#dashboard_cockpit { width: 100%; }

.cockpit-card {
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e0e4e8);
    border-left: 5px solid #d35400;
    border-radius: 14px;
    box-shadow: 0 6px 22px var(--shadow, rgba(0,0,0,0.08));
    padding: 18px 22px;
}

/* ── Phase A: vor dem Einstempeln ──────────────────────────────── */
.cockpit-pre {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}
.cockpit-pre-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text, #2c3e50);
}
.cockpit-turno-line {
    font-size: 0.95rem;
    color: var(--text-muted, #667);
    margin-top: 4px;
}

/* ── Phase B: zweigeteilt ──────────────────────────────────────── */
.cockpit-split {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) 1px minmax(260px, 1.2fr);
    gap: 22px;
    align-items: stretch;
}
.cockpit-divider { background: var(--border, #e6e9ec); width: 1px; }

.cockpit-left { display: flex; flex-direction: column; gap: 10px; }

.cockpit-badge {
    align-self: flex-start;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 999px;
    letter-spacing: 0.3px;
}
.cockpit-badge-work  { background: #eafaf1; color: #1e8449; }
.cockpit-badge-pause { background: #fef5e7; color: #b9770e; }
.cockpit-badge-done  { background: #eaf2fb; color: #2471a3; }
.cockpit-badge-auto  { background: #fdecea; color: #b03a2e; }

.cockpit-timer {
    font-size: 2.8rem;
    font-weight: 700;
    color: var(--text, #2c3e50);
    font-variant-numeric: tabular-nums;
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    line-height: 1.05;
}
.cockpit-timer-sm { font-size: 1.8rem; }
.cockpit-timer-sub { font-size: 0.82rem; color: var(--text-muted, #7f8c8d); margin-top: -2px; }

.cockpit-auto-note {
    font-size: 0.9rem;
    color: var(--text-muted, #667);
    line-height: 1.4;
}

.cockpit-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }

/* ── Buttons ──────────────────────────────────────────────────── */
.cockpit-btn {
    border: none;
    border-radius: 10px;
    padding: 12px 20px;
    font-size: 0.98rem;
    font-weight: 700;
    cursor: pointer;
    color: #fff;
    transition: transform 0.06s ease, filter 0.15s ease;
}
.cockpit-btn:hover:not(:disabled) { filter: brightness(1.06); }
.cockpit-btn:active:not(:disabled) { transform: translateY(1px); }
.cockpit-btn:disabled { cursor: default; }
.cockpit-btn-entrada { background: #27ae60; font-size: 1.1rem; padding: 14px 30px; box-shadow: 0 4px 14px rgba(39,174,96,0.35); }
.cockpit-btn-ok      { background: #27ae60; }
.cockpit-btn-warn    { background: #e67e22; }
.cockpit-btn-danger  { background: #c0392b; }

/* ── To-Do-Panel (rechts) ─────────────────────────────────────── */
.cockpit-todo {
    background: var(--surface-2, #f7f9ff);
    border: 1px solid var(--border, #e6e9ec);
    border-radius: 12px;
    padding: 14px 16px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: box-shadow 0.15s ease;
}
.cockpit-todo:hover { box-shadow: 0 4px 16px var(--shadow, rgba(0,0,0,0.10)); }
.cockpit-todo-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 700;
    color: var(--text, #2c3e50);
    font-size: 0.98rem;
}
.cockpit-overdue {
    background: #fdecea;
    color: #c0392b;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
}

.cockpit-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cockpit-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e0e4e8);
    border-left: 3px solid var(--chip, #888);
    border-radius: 8px;
    padding: 5px 10px;
    min-width: 64px;
}
.cockpit-chip.is-zero { opacity: 0.45; }
.cockpit-chip-dot { font-size: 0.7rem; }
.cockpit-chip-num { font-weight: 800; font-size: 1.05rem; color: var(--text, #2c3e50); }
.cockpit-chip-lbl { font-size: 0.78rem; color: var(--text-muted, #7f8c8d); }

.cockpit-wip { border-top: 1px dashed var(--border, #e0e4e8); padding-top: 10px; }
.cockpit-wip-head { font-size: 0.85rem; font-weight: 700; color: var(--text-muted, #667); margin-bottom: 6px; }
.cockpit-wip-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.cockpit-wip-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: var(--text, #2c3e50);
    padding: 4px 6px;
    border-radius: 6px;
}
.cockpit-wip-item:hover { background: var(--surface, #fff); }
.cockpit-wip-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.cockpit-wip-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cockpit-wip-more { font-size: 0.82rem; color: var(--text-muted, #7f8c8d); padding-left: 6px; }

.cockpit-todo-empty { font-size: 0.95rem; color: #1e8449; font-weight: 600; }
.cockpit-todo-foot { font-size: 0.8rem; color: var(--accent, #2980b9); font-weight: 600; text-align: right; }

/* ── Mobile: eine Spalte ──────────────────────────────────────── */
@media (max-width: 720px) {
    .cockpit-split { grid-template-columns: 1fr; gap: 16px; }
    .cockpit-divider { display: none; }
    .cockpit-pre { flex-direction: column; align-items: stretch; }
    .cockpit-btn-entrada { width: 100%; }
}

/* ── PWA Update-Toast (dezent, nicht-blockierend, responsive) ──── */
#pwa-update-banner {
    position: fixed;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99999;
    display: none;                 /* JS schaltet auf flex */
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 12px;
    max-width: 94vw;
    padding: 11px 14px;
    background: var(--blue, #004581);
    color: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
    box-sizing: border-box;
}
.pwa-update-text {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.25;
}
#pwa-update-title { font-size: 0.9rem; font-weight: 700; }
#pwa-update-body  { font-size: 0.76rem; opacity: 0.82; }
#pwa-update-btn {
    flex: 0 0 auto;
    background: #fff;
    color: var(--blue, #004581);
    border: none;
    padding: 9px 18px;
    border-radius: 8px;
    font-size: 0.86rem;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.2s;
}
#pwa-update-btn:hover { opacity: 0.85; }
#pwa-update-later {
    flex: 0 0 auto;
    background: none;
    border: none;
    color: #fff;
    opacity: 0.7;
    font-size: 0.8rem;
    cursor: pointer;
    padding: 6px 4px;
    text-decoration: underline;
    transition: opacity 0.2s;
}
#pwa-update-later:hover { opacity: 1; }

/* Schmale Screens: volle Breite unten, Buttons umbrechen unter den Text. */
@media (max-width: 560px) {
    #pwa-update-banner {
        left: 12px;
        right: 12px;
        bottom: 12px;
        max-width: none;
        transform: none;
    }
    .pwa-update-text { flex: 1 1 100%; }
    #pwa-update-btn  { flex: 1 1 auto; padding: 11px 16px; }  /* leichter zu treffen */
    #pwa-update-later { margin-left: auto; }
}