/* XXX globales UI-System – abgeleitet aus der Flotten-/Bewegungskonsole. */

:root {
    --xxx-ui-bg: #0a0f1c;
    --xxx-ui-surface: rgba(15, 30, 49, .94);
    --xxx-ui-surface-2: rgba(18, 38, 61, .90);
    --xxx-ui-surface-3: rgba(12, 28, 47, .82);
    --xxx-ui-surface-deep: #0b1d2f;
    --xxx-ui-row-alt: rgba(24, 47, 72, .25);
    --xxx-ui-hover: rgba(79, 209, 197, .065);
    --xxx-ui-line: #2a405d;
    --xxx-ui-line-strong: #375777;
    --xxx-ui-text: #dce8f7;
    --xxx-ui-muted: #8fa2ba;
    --xxx-ui-dim: #71839c;
    --xxx-ui-cyan: #4fd1c5;
    --xxx-ui-cyan-strong: #7defd9;
    --xxx-ui-cyan-soft: rgba(79, 209, 197, .12);
    --xxx-ui-red: #fb7185;
    --xxx-ui-red-soft: rgba(251, 113, 133, .11);
    --xxx-ui-amber: #fbbf24;
    --xxx-ui-amber-soft: rgba(251, 191, 36, .10);
    --xxx-ui-green: #46e08a;
    --xxx-ui-control-h: 40px;
    --xxx-ui-control-sm: 32px;
    --xxx-ui-gap: 12px;
    --xxx-ui-pad: 13px;
    --xxx-ui-transition: 120ms ease;
}

/* Seiten- und Panelbausteine */
.xxx-ui-page {
    width: min(100%, var(--xxx-content-max, 1580px));
    min-width: 0;
    margin-inline: auto;
}

.xxx-ui-page-head,
.xxx-ui-panel {
    min-width: 0;
    border: 1px solid var(--xxx-ui-line-strong);
    border-radius: 0 !important;
    background: linear-gradient(135deg, var(--xxx-ui-surface), rgba(10, 25, 43, .94));
    box-shadow: inset 3px 0 0 rgba(79, 209, 197, .34);
}

.xxx-ui-page-head { padding: 15px 17px; }
.xxx-ui-panel { padding: var(--xxx-ui-pad); }
.xxx-ui-panel--flat { background: var(--xxx-ui-surface-3); box-shadow: none; }
.xxx-ui-panel--cyan { box-shadow: inset 3px 0 0 rgba(79, 209, 197, .58); }
.xxx-ui-panel--amber { box-shadow: inset 3px 0 0 rgba(251, 191, 36, .58); }
.xxx-ui-panel--red { box-shadow: inset 3px 0 0 rgba(251, 113, 133, .58); }

.xxx-ui-panel__head,
.xxx-ui-page-head__row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.xxx-ui-panel__head {
    margin-bottom: 11px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--xxx-ui-line);
}

.xxx-ui-kicker {
    color: var(--xxx-ui-cyan);
    font: 900 9px/1.2 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.xxx-ui-title {
    margin: 3px 0 0;
    color: var(--xxx-ui-text) !important;
    font-size: 16px;
    font-weight: 900;
    letter-spacing: .10em;
    text-transform: uppercase;
}

.xxx-ui-description {
    max-width: 920px;
    margin: 4px 0 0;
    color: var(--xxx-ui-dim);
    font-size: 11px;
    line-height: 1.5;
}

/* Buttons */
.xxx-ui-btn,
.xxx-ui-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: var(--xxx-ui-control-h);
    border: 1px solid var(--xxx-ui-line-strong) !important;
    border-radius: 0 !important;
    background: var(--xxx-ui-surface-2) !important;
    color: var(--xxx-ui-muted) !important;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    transition: border-color var(--xxx-ui-transition), background var(--xxx-ui-transition), color var(--xxx-ui-transition);
}

.xxx-ui-btn { padding: 0 13px; }
.xxx-ui-icon-btn { width: var(--xxx-ui-control-h); padding: 0; }
.xxx-ui-btn:hover,
.xxx-ui-icon-btn:hover {
    border-color: var(--xxx-ui-cyan) !important;
    background: var(--xxx-ui-cyan-soft) !important;
    color: var(--xxx-ui-cyan-strong) !important;
}

.xxx-ui-btn--primary {
    border-color: var(--xxx-ui-cyan) !important;
    background: var(--xxx-ui-cyan) !important;
    color: #062018 !important;
}
.xxx-ui-btn--primary:hover { background: var(--xxx-ui-cyan-strong) !important; color: #041915 !important; }
.xxx-ui-btn--danger { border-color: rgba(251, 113, 133, .42) !important; color: #ff93a4 !important; }
.xxx-ui-btn--danger:hover { border-color: var(--xxx-ui-red) !important; background: var(--xxx-ui-red-soft) !important; color: #ffd7de !important; }
.xxx-ui-btn--warning { border-color: rgba(251, 191, 36, .38) !important; color: #e8ca7e !important; }
.xxx-ui-btn--warning:hover { border-color: var(--xxx-ui-amber) !important; background: var(--xxx-ui-amber-soft) !important; color: #ffe39a !important; }
.xxx-ui-btn:disabled,
.xxx-ui-icon-btn:disabled { opacity: .42; pointer-events: none; }

/* Eingaben */
.xxx-ui-field,
.xxx-ui-select,
.xxx-ui-textarea {
    width: 100%;
    min-height: var(--xxx-ui-control-h);
    border: 1px solid var(--xxx-ui-line-strong) !important;
    border-radius: 0 !important;
    background: var(--xxx-ui-surface-deep) !important;
    color: var(--xxx-ui-text) !important;
    box-shadow: none !important;
    outline: 0 !important;
}

.xxx-ui-field,
.xxx-ui-select { height: var(--xxx-ui-control-h); padding: 0 11px; }
.xxx-ui-textarea { padding: 10px 11px; resize: vertical; }
.xxx-ui-field::placeholder,
.xxx-ui-textarea::placeholder { color: var(--xxx-ui-dim) !important; }
.xxx-ui-field:focus,
.xxx-ui-select:focus,
.xxx-ui-textarea:focus {
    border-color: var(--xxx-ui-cyan) !important;
    box-shadow: 0 0 0 1px rgba(79, 209, 197, .34) !important;
}

/* Eine Suchleiste für Header, Karte, Datenbank, Analytik und neue Seiten. */
.xxx-search {
    position: relative !important;
    display: flex;
    width: 100%;
    min-width: 0;
    min-height: var(--xxx-ui-control-h);
    align-items: center;
    overflow: visible !important;
    border: 1px solid var(--xxx-ui-line-strong) !important;
    border-radius: 0 !important;
    background: var(--xxx-ui-surface-deep) !important;
    box-shadow: none !important;
    transition: border-color var(--xxx-ui-transition), box-shadow var(--xxx-ui-transition);
}

.xxx-search:focus-within {
    border-color: var(--xxx-ui-cyan) !important;
    box-shadow: 0 0 0 1px rgba(79, 209, 197, .34) !important;
}

body .xxx-search > :is(input.xxx-search__input, input[data-xxx-search-input]) {
    width: 100% !important;
    min-width: 0 !important;
    height: calc(var(--xxx-ui-control-h) - 2px) !important;
    padding: 0 43px 0 11px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--xxx-ui-text) !important;
    box-shadow: none !important;
    outline: 0 !important;
    font-size: 12px !important;
}

body .xxx-search.xxx-search--has-icon > :is(input.xxx-search__input, input[data-xxx-search-input]) { padding-left: 36px !important; }
body .xxx-search > :is(input.xxx-search__input, input[data-xxx-search-input])::placeholder { color: var(--xxx-ui-dim) !important; }

.xxx-search__icon {
    position: absolute !important;
    left: 11px !important;
    top: 50% !important;
    z-index: 3 !important;
    width: 14px !important;
    height: 14px !important;
    transform: translateY(-50%) !important;
    color: var(--xxx-ui-cyan) !important;
    pointer-events: none !important;
}

body .xxx-search .xxx-search__clear {
    position: absolute !important;
    top: 50% !important;
    right: 5px !important;
    z-index: 35 !important;
    display: grid !important;
    width: 30px !important;
    min-width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 !important;
    place-items: center !important;
    transform: translateY(-50%) !important;
    border: 1px solid transparent !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--xxx-ui-dim) !important;
    box-shadow: none !important;
    font-size: 0 !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

body .xxx-search .xxx-search__clear::before,
body .xxx-search .xxx-search__clear::after {
    content: "" !important;
    position: absolute !important;
    width: 12px !important;
    height: 1.5px !important;
    background: currentColor !important;
}
body .xxx-search .xxx-search__clear::before { transform: rotate(45deg) !important; }
body .xxx-search .xxx-search__clear::after { transform: rotate(-45deg) !important; }
body .xxx-search .xxx-search__clear :is(svg, i) { visibility: hidden !important; }
body .xxx-search .xxx-search__clear:hover {
    border-color: rgba(251, 113, 133, .46) !important;
    background: var(--xxx-ui-red-soft) !important;
    color: #ff9cad !important;
}
body .xxx-search .xxx-search__clear[hidden],
body .xxx-search .xxx-search__clear.xxx-search__clear--hidden { display: none !important; }

.xxx-search__menu {
    border: 1px solid var(--xxx-ui-line-strong) !important;
    border-radius: 0 !important;
    background: #10243a !important;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .30) !important;
    color: var(--xxx-ui-text) !important;
}
.xxx-search__menu :is(button, .select-item) {
    border-radius: 0 !important;
    color: #c9d6e8 !important;
}
.xxx-search__menu :is(button, .select-item):hover,
.xxx-search__menu :is(button, .select-item)[data-active="1"] {
    background: var(--xxx-ui-cyan-soft) !important;
    color: var(--xxx-ui-cyan-strong) !important;
}

/* Tabs, Kennzahlen und Tabellen */
.xxx-ui-tabs {
    display: flex;
    min-width: 0;
    gap: 1px;
    overflow-x: auto;
    border: 1px solid var(--xxx-ui-line-strong);
    background: var(--xxx-ui-line);
}
.xxx-ui-tab {
    min-height: 44px;
    padding: 0 13px;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--xxx-ui-surface-deep) !important;
    color: var(--xxx-ui-dim) !important;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
}
.xxx-ui-tab:hover { background: var(--xxx-ui-surface-2) !important; color: var(--xxx-ui-text) !important; }
.xxx-ui-tab[data-active="1"],
.xxx-ui-tab[aria-selected="true"] {
    background: var(--xxx-ui-cyan-soft) !important;
    color: var(--xxx-ui-cyan-strong) !important;
    box-shadow: inset 0 -3px 0 var(--xxx-ui-cyan) !important;
}

.xxx-ui-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 1px;
    border: 1px solid var(--xxx-ui-line);
    background: var(--xxx-ui-line);
}
.xxx-ui-metric { min-width: 0; min-height: 76px; padding: 10px; background: var(--xxx-ui-surface-2); }
.xxx-ui-metric span { display: block; color: var(--xxx-ui-dim); font-size: 10px; font-weight: 900; text-transform: uppercase; }
.xxx-ui-metric strong { display: block; margin-top: 5px; color: var(--xxx-ui-text); font: 900 21px/1 ui-monospace, monospace; overflow-wrap: anywhere; }
.xxx-ui-metric--cyan strong { color: #76e6dd; }
.xxx-ui-metric--amber strong { color: #ffd268; }
.xxx-ui-metric--red strong { color: #ff8da0; }

.xxx-ui-table-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--xxx-ui-line); background: rgba(11, 29, 47, .52); }
.xxx-ui-table { width: 100%; border-collapse: collapse; text-align: left; }
.xxx-ui-table thead { background: #142a44 !important; }
.xxx-ui-table th { border-bottom: 1px solid var(--xxx-ui-line-strong) !important; color: var(--xxx-ui-muted) !important; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.xxx-ui-table td { border-bottom: 1px solid rgba(42, 64, 93, .68) !important; color: #c9d6e8; }
.xxx-ui-table tbody tr:nth-child(even) { background: var(--xxx-ui-row-alt) !important; }
.xxx-ui-table tbody tr:hover { background: var(--xxx-ui-hover) !important; }

.xxx-ui-badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 3px 7px;
    border: 1px solid var(--xxx-ui-line-strong);
    border-radius: 0 !important;
    background: rgba(83, 98, 120, .12);
    color: var(--xxx-ui-muted);
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}
.xxx-ui-badge--cyan { border-color: rgba(79, 209, 197, .38); background: var(--xxx-ui-cyan-soft); color: #82e7df; }
.xxx-ui-badge--amber { border-color: rgba(251, 191, 36, .38); background: var(--xxx-ui-amber-soft); color: #e8ca7e; }
.xxx-ui-badge--red { border-color: rgba(251, 113, 133, .38); background: var(--xxx-ui-red-soft); color: #ff93a4; }

.xxx-ui-empty {
    padding: 24px 16px;
    border: 1px dashed var(--xxx-ui-line-strong) !important;
    border-radius: 0 !important;
    background: rgba(19, 38, 60, .50) !important;
    color: var(--xxx-ui-dim);
    text-align: center;
}

/* Kompatibilitätsbrücke: vorhandene Seiten übernehmen sofort die Flottenoptik. */
body[data-xxx-route] #view-container :where(
    .home-intel-card,
    .raid-page-head,
    .raid-filter-card,
    .raid-summary-grid article,
    .raid-desktop-table,
    .raid-mobile-card,
    .wanted-card,
    .wanted-overview-card,
    .wanted-info-card,
    .xxx-alliance-card,
    .xxx-alliance-stat,
    #db-filter-content,
    #db-table-container,
    #analytics-player-focus,
    #analytics-overall-stats > div,
    #analytics-overall-stats > section,
    #meteor-workspace > section,
    #drone-center > section,
    #raid-assist-page > header,
    #crew-view-root > section
) {
    border-color: var(--xxx-ui-line-strong) !important;
    background: linear-gradient(135deg, var(--xxx-ui-surface), rgba(10, 25, 43, .94)) !important;
    box-shadow: inset 3px 0 0 rgba(79, 209, 197, .26) !important;
}

body[data-xxx-route] #view-container :where(
    .home-intel-card,
    .raid-page-head,
    .wanted-card,
    .wanted-overview-card,
    #analytics-player-focus,
    #meteor-workspace > section,
    #drone-center > section,
    #raid-assist-page > header
)::before { display: none !important; }

body[data-xxx-route] #view-container table thead { background: #142a44 !important; }
body[data-xxx-route] #view-container table tbody tr { background: transparent !important; }
body[data-xxx-route] #view-container table tbody tr:nth-child(even) { background: var(--xxx-ui-row-alt) !important; }
body[data-xxx-route] #view-container table tbody tr:hover { background: var(--xxx-ui-hover) !important; }
body[data-xxx-route] #view-container table :is(th, td) { border-color: var(--xxx-ui-line) !important; }

/* Bestehende semantisch gefärbte Buttons werden auf dieselben Zustände gezogen. */
body[data-xxx-route] #view-container button[class*="bg-cyan"],
body[data-xxx-route] #view-container button[class*="bg-teal"] {
    border-color: var(--xxx-ui-cyan) !important;
    background: var(--xxx-ui-cyan) !important;
    color: #062018 !important;
}
body[data-xxx-route] #view-container button[class*="border-cyan"]:not([class*="bg-cyan"]),
body[data-xxx-route] #view-container button[class*="text-cyan"]:not([class*="bg-cyan"]) {
    border-color: rgba(79, 209, 197, .48) !important;
    background: var(--xxx-ui-cyan-soft) !important;
    color: var(--xxx-ui-cyan-strong) !important;
}
body[data-xxx-route] #view-container button[class*="text-amber"],
body[data-xxx-route] #view-container button[class*="border-amber"] {
    border-color: rgba(251, 191, 36, .38) !important;
    background: var(--xxx-ui-amber-soft) !important;
    color: #e8ca7e !important;
}
body[data-xxx-route] #view-container button[class*="text-red"],
body[data-xxx-route] #view-container button[class*="border-red"] {
    border-color: rgba(251, 113, 133, .42) !important;
    background: var(--xxx-ui-red-soft) !important;
    color: #ff93a4 !important;
}

@media (max-width: 700px) {
    .xxx-ui-page-head__row,
    .xxx-ui-panel__head { flex-direction: column; align-items: stretch; gap: 8px; }
    .xxx-ui-page-head { padding: 12px; }
    .xxx-ui-panel { padding: 11px; }
    .xxx-ui-metric strong { font-size: 19px; }
}