/* =========================================================================
   Mega-Search Overlay — globale Live-Suche im SaaS-Stil
   Linkst sich an das vorhandene API-Endpoint /?page=api/live-search.
   ========================================================================= */

/* Popover unter dem Topbar-Suchfeld — wird per JS in das <form> appendiert.
   `form.topbar-search` braucht position: relative (gesetzt im Markup). */
.mega-search {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: auto;
    width: min(1200px, calc(100vw - 32px));
    max-width: 100vw;
    z-index: 1080;
    display: none;
}
.mega-search.is-open { display: block; }

@keyframes msSlideDown { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

.mega-search__panel {
    position: relative;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(15, 23, 42, .18), 0 0 0 1px rgba(15, 23, 42, .04);
    overflow: hidden;
    animation: msSlideDown .15s ease-out;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 100px);
}

/* ---- Body: zwei Spalten (Liste + Detail-Pane) -------------------------- */
.mega-search__body {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 0;
    min-height: 360px;
    overflow: hidden;
}
.mega-search__results {
    overflow-y: auto;
    padding: 1rem 1.25rem 1.5rem;
}
.mega-search__detail {
    border-left: 1px solid #eef0f3;
    background: #fafbfc;
    overflow-y: auto;
    padding: 1.25rem;
    color: #334155;
    opacity: 0;
    transform: translateX(8px);
    transition: opacity .18s ease-out, transform .18s ease-out;
}
.mega-search__detail.is-active {
    opacity: 1;
    transform: translateX(0);
}
.mega-search__detail .ms-detail-empty {
    color: #94a3b8;
    text-align: center;
    margin-top: 4rem;
}

/* ---- Kategorie-Header --------------------------------------------------- */
.ms-group { margin-bottom: 1.5rem; }
.ms-group:last-child { margin-bottom: 0; }

.ms-group__head {
    position: sticky;
    top: 0;
    background: #fff;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem 0 .55rem;
    margin-bottom: .35rem;
    border-bottom: 1px solid #f1f5f9;
    z-index: 1;
}
.ms-group__title {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #64748b;
    font-weight: 600;
}
.ms-group__count {
    color: #94a3b8;
    font-size: .78rem;
}

/* ---- Result-Card (generic) --------------------------------------------- */
.ms-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .85rem 1rem;
    border-radius: 12px;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    transition: background-color .12s ease-out, box-shadow .12s ease-out, transform .08s ease-out;
    border: 1px solid transparent;
    margin-bottom: .35rem;
}
.ms-row:hover {
    background: #f8fafc;
    text-decoration: none;
    color: inherit;
}
.ms-row.is-active {
    background: #eff6ff;
    border-color: #bfdbfe;
    box-shadow: 0 0 0 4px rgba(59,130,246,.12);
}

/* Logo-/Avatar-Block links */
.ms-logo {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    font-weight: 700;
    color: #475569;
    overflow: hidden;
}
.ms-logo img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }

.ms-logo--customer {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    color: #fff;
}

/* Mid-Column */
.ms-mid {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ms-title {
    font-size: 1.02rem;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ms-subtitle {
    font-size: .85rem;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ms-subtitle .sep { color: #cbd5e1; margin: 0 .35rem; }

/* Right-Column */
.ms-right {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-shrink: 0;
}

/* ---- Highlight ---------------------------------------------------------- */
.ms-hl {
    background: rgba(59, 130, 246, .14);
    color: #1e3a8a;
    padding: 1px 3px;
    border-radius: 4px;
    font-weight: 600;
}

/* ---- "Meintest du"-Chips ---------------------------------------------- */
.ms-suggest-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    padding: .75rem 1rem;
    margin-bottom: .75rem;
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border: 1px solid #fde68a;
    border-radius: 12px;
}
.ms-suggest-bar__label {
    color: #92400e;
    font-size: .82rem;
    font-weight: 600;
    margin-right: .25rem;
}
.ms-suggest-chip {
    display: inline-flex;
    align-items: center;
    padding: .35rem .75rem;
    background: #fff;
    border: 1px solid #fcd34d;
    color: #92400e;
    border-radius: 999px;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform .12s ease-out, box-shadow .12s ease-out, background .12s;
}
.ms-suggest-chip:hover {
    background: #fef3c7;
    border-color: #f59e0b;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(245, 158, 11, .25);
}
.ms-suggest-chip:active { transform: translateY(0); }

/* ---- Action-Buttons im Detail-Pane ------------------------------------ */
.ms-detail-actions {
    margin: .5rem 0 1.25rem;
}
.ms-detail-actions .btn-lg {
    padding: .7rem 1rem;
    font-size: .95rem;
    font-weight: 600;
    border-radius: 10px;
    transition: transform .1s ease-out, box-shadow .12s ease-out;
}
.ms-detail-actions .btn-lg:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(37, 99, 235, .22);
}
.ms-detail-actions .btn-lg:active { transform: translateY(0); }

/* ---- Kunden-Buchungen im Detail-Pane — kompakte Tabelle ------------------ */
/* Spalten: Reisebeginn (Datum + kleine Buchungsnr.) · Event · Plate · Chevron */
.ms-cust-bookings { display: flex; flex-direction: column; }
.ms-cust-bookings__head,
.ms-cust-booking {
    display: grid;
    grid-template-columns: minmax(100px, auto) minmax(0, 1.4fr) minmax(0, auto);
    column-gap: .85rem;
    align-items: center;
}
/* Datum-Spalte näher an Event ranziehen — die Buchungs-Übersicht wirkt sonst zerrissen. */
.ms-cust-bookings__head .ms-cust-booking__col--start,
.ms-cust-booking .ms-cust-booking__col--start { margin-right: -.5rem; }
.ms-cust-bookings__head {
    padding: .45rem .55rem;
    color: #94a3b8;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 600;
    border-bottom: 1px solid #e5e7eb;
}
.ms-cust-booking {
    padding: .6rem .55rem;
    text-decoration: none;
    color: #1f2937;
    border-bottom: 1px solid #f1f5f9;
    transition: background-color .12s ease, box-shadow .12s ease;
    outline: none;
    border-radius: 8px;
}
.ms-cust-booking:last-child { border-bottom: 0; }
.ms-cust-booking:hover { background: #f8fafc; }
.ms-cust-booking:focus {
    background: #eff6ff;
    box-shadow: inset 0 0 0 2px #2563eb;
}
.ms-cust-booking__col { min-width: 0; }
.ms-cust-booking__date {
    font-weight: 600;
    color: #0f172a;
    font-size: .95rem;
    line-height: 1.2;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.ms-cust-booking__bno {
    color: #94a3b8;
    font-size: .78rem;
    margin-top: .15rem;
    line-height: 1.1;
}
.ms-cust-booking__col--event {
    color: #1f2937;
    font-size: .9rem;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Storno: Zeile ausgegraut + durchgestrichen — alles inkl. Plate. */
.ms-cust-booking--cancelled { opacity: .55; }
.ms-cust-booking--cancelled .ms-cust-booking__date,
.ms-cust-booking--cancelled .ms-cust-booking__bno,
.ms-cust-booking--cancelled .ms-cust-booking__col--event,
.ms-cust-booking--cancelled .ms-plate__num { text-decoration: line-through; }

/* Kompaktes Plate-Badge — EuroPlate-Font, schmaler EU-Strip ohne Länderkennung. */
.ms-plate {
    display: inline-flex; align-items: stretch;
    background: #fff;
    border: 1.5px solid #0f172a;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .08);
    line-height: 1;
}
.ms-plate__eu {
    background: #1e3a8a;
    width: 8px;
    border-right: 1.5px solid #0f172a;
}
.ms-plate__num {
    font-family: "EuroPlate", "FE-Schrift", "DIN 1451", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: .95rem;
    letter-spacing: .08em;
    padding: .15rem .55rem;
    color: #111827;
    white-space: nowrap;
}

/* Status-Pills (eine pro Buchung) */
.ms-status-pill {
    display: inline-block;
    padding: .15rem .55rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
}
.ms-status-pill--success { background: #dcfce7; color: #166534; }
.ms-status-pill--info    { background: #dbeafe; color: #1e40af; }
.ms-status-pill--warning { background: #fef3c7; color: #92400e; }
.ms-status-pill--danger  { background: #fee2e2; color: #991b1b; }
.ms-status-pill--muted   { background: #f1f5f9; color: #475569; }

/* Responsive — auf engen Breiten Event-Spalte ausblenden, Plate bleibt. */
@media (max-width: 520px) {
    .ms-cust-bookings__head, .ms-cust-booking {
        grid-template-columns: minmax(100px, auto) minmax(0, 1fr);
    }
    .ms-cust-booking__col--event,
    .ms-cust-bookings__head .ms-cust-booking__col--event { display: none; }
}

/* ---- EU-Kennzeichen ---------------------------------------------------- */
.eu-plate {
    display: inline-flex;
    align-items: stretch;
    background: #fff;
    border: 2.5px solid #0f172a;
    border-radius: 7px;
    overflow: hidden;
    box-shadow: 0 3px 8px rgba(15,23,42,.18), inset 0 -1px 0 rgba(15,23,42,.08);
    font-family: "EuroPlate", "Arial Narrow", "Helvetica Neue", sans-serif;
    line-height: 1;
    height: 42px;
}
.eu-plate__eu {
    background: linear-gradient(180deg, #1e3a8a 0%, #1e40af 100%);
    width: 9px;
    flex: 0 0 9px;
    display: block;
}
.eu-plate__num {
    padding: 0 .8rem;
    font-size: 1.3rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: .06em;
    display: flex;
    align-items: center;
    text-transform: uppercase;
}
.eu-plate--lg { height: 52px; border-radius: 8px; }
.eu-plate--lg .eu-plate__num { font-size: 1.6rem; padding: 0 1rem; }

.eu-plate--ghost {
    border: 2px dashed #cbd5e1;
    background: #fff;
    box-shadow: none;
}
.eu-plate--ghost .eu-plate__eu { background: #f1f5f9; color: #94a3b8; }
.eu-plate--ghost .eu-plate__num { color: #94a3b8; }

/* ---- P-Symbol: zeigt direkt das Produkt-Kürzel (H/A/VH/VA/RH/RA) ------- */
.p-symbol {
    position: relative;
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background: #2563eb;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.6rem;
    letter-spacing: .02em;
    line-height: 1;
    box-shadow: 0 4px 12px rgba(37, 99, 235, .25);
}
/* Für 2-Zeichen-Kürzel (VH, VA, RH, RA) etwas kleiner, damit's mittig bleibt. */
.p-symbol[data-len="2"] { font-size: 1.3rem; letter-spacing: 0; }
.p-symbol--halle          { background: #2563eb; box-shadow: 0 4px 12px rgba(37,99,235,.25); }   /* Blau */
.p-symbol--aussen         { background: #f59e0b; box-shadow: 0 4px 12px rgba(245,158,11,.30); }  /* Orange */
.p-symbol--valet-halle    { background: #1e293b; box-shadow: 0 4px 12px rgba(15,23,42,.30); }   /* Slate */
.p-symbol--valet-aussen   { background: #dc2626; box-shadow: 0 4px 12px rgba(220,38,38,.25); }  /* Rot */
.p-symbol--reserve-halle  { background: #0d9488; box-shadow: 0 4px 12px rgba(13,148,136,.30); } /* Teal — Reservierung Halle */
.p-symbol--reserve-aussen { background: #16a34a; box-shadow: 0 4px 12px rgba(22,163,74,.30); }  /* Grün — Reservierung Außen */
.p-symbol--unknown        { background: #94a3b8; }

/* ---- Badges ------------------------------------------------------------ */
.ms-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .72rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid transparent;
    white-space: nowrap;
}
.ms-badge--confirmed { background: #ecfdf5; color: #065f46; border-color: #a7f3d0; }
.ms-badge--paid      { background: #ecfdf5; color: #065f46; border-color: #a7f3d0; }
.ms-badge--open      { background: #fff7ed; color: #9a3412; border-color: #fed7aa; }
.ms-badge--partial   { background: #fef3c7; color: #78350f; border-color: #fcd34d; }
.ms-badge--cancelled { background: #fef2f2; color: #991b1b; border-color: #fecaca; }
.ms-badge--draft     { background: #f1f5f9; color: #475569; border-color: #cbd5e1; }
.ms-badge--checked-in  { background: #eff6ff; color: #1e40af; border-color: #bfdbfe; }
.ms-badge--checked-out { background: #faf5ff; color: #6b21a8; border-color: #e9d5ff; }

/* ---- Empty / Skeleton -------------------------------------------------- */
.ms-empty {
    text-align: center;
    color: #94a3b8;
    padding: 3rem 1rem;
}
.ms-empty__hint { font-size: .82rem; margin-top: .35rem; }
.ms-empty__hint code {
    background: #f1f5f9;
    color: #475569;
    padding: 2px 6px;
    border-radius: 4px;
}

.ms-skel { display: flex; flex-direction: column; gap: .35rem; padding: .25rem 1rem; }
.ms-skel-row {
    display: flex; align-items: center; gap: 1rem;
    padding: .85rem 0; border-bottom: 1px solid #f1f5f9;
}
.ms-skel-box {
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 200% 100%;
    animation: msShimmer 1.4s infinite linear;
    border-radius: 8px;
}
.ms-skel-circle { width: 56px; height: 56px; border-radius: 12px; flex: 0 0 56px; }
.ms-skel-line   { height: 14px; flex: 1; }
.ms-skel-short  { width: 25%; height: 12px; margin-top: 6px; }
@keyframes msShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ---- Footer ------------------------------------------------------------ */
.mega-search__footer {
    border-top: 1px solid #eef0f3;
    background: #fafbfc;
    padding: .65rem 1.25rem;
    font-size: .78rem;
    color: #64748b;
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
}
.mega-search__footer kbd {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    padding: 1px 6px;
    font-size: .75rem;
    color: #475569;
    font-family: ui-sans-serif, system-ui, sans-serif;
    box-shadow: 0 1px 0 rgba(15,23,42,.06);
}
.mega-search__footer .ms-divider {
    width: 1px; background: #e2e8f0;
}

/* ---- Detail-Pane Inhalte ----------------------------------------------- */
.ms-detail-title {
    font-weight: 700; font-size: 1.05rem; margin-bottom: .25rem;
    color: #0f172a;
}
.ms-detail-sub {
    color: #64748b; font-size: .82rem; margin-bottom: 1.1rem;
}
.ms-detail-section {
    margin-top: 1.1rem;
}
.ms-detail-section h6 {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #94a3b8;
    margin-bottom: .35rem;
    font-weight: 700;
}
.ms-detail-grid { display: grid; grid-template-columns: minmax(120px, max-content) 1fr; gap: 6px 16px; font-size: .85rem; }
.ms-detail-grid dt { color: #64748b; }
.ms-detail-grid dd { margin: 0; color: #0f172a; word-break: break-word; }

/* ---- Mobile ------------------------------------------------------------ */
@media (max-width: 991px) {
    .mega-search { padding: 0; }
    .mega-search__panel { max-height: 100vh; border-radius: 0; }
    .mega-search__body { grid-template-columns: 1fr; }
    .mega-search__detail { display: none; }
}