/* =====================================================
   FSAirlines VA Integration – Frontend Styles
   ===================================================== */

/* --- Kennzahlen-Grid [fsa_stats] --- */
.fsa-stats-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 24px 0;
}

.fsa-stat-box {
    flex: 1 1 calc((100% - 16px * (var(--fsa-stats-cols, 4) - 1)) / var(--fsa-stats-cols, 4));
    min-width: 0;
    background: #1a1a2e;
    border-radius: var(--fsa-radius-lg, 12px);
    padding: 22px 16px;
    text-align: center;
    color: #fff;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    box-sizing: border-box;
}

@media (max-width: 1200px) {
    .fsa-stat-box {
        flex: 1 1 calc((100% - 16px * (min(3, var(--fsa-stats-cols, 4)) - 1)) / min(3, var(--fsa-stats-cols, 4)));
    }
}

@media (max-width: 768px) {
    .fsa-stat-box {
        flex: 1 1 calc((100% - 16px * (min(2, var(--fsa-stats-cols, 4)) - 1)) / min(2, var(--fsa-stats-cols, 4)));
    }
}

@media (max-width: 480px) {
    .fsa-stat-box {
        flex: 1 1 100%;
    }
}

/* Icon background mode: horizontal layout with icon on left */
body.fsa-stat-icon-bg .fsa-stat-box {
    display: flex;
    align-items: center;
    gap: 14px;
    text-align: left;
}

body.fsa-stat-icon-bg .fsa-stat-icon {
    flex-shrink: 0;
    width: var(--fsa-stat-icon-size, 48px);
    height: var(--fsa-stat-icon-size, 48px);
    min-width: var(--fsa-stat-icon-size, 48px);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--fsa-stat-icon-bg, #5865f2);
    border-radius: var(--fsa-stat-icon-radius, 8px);
    color: #fff;
}

body.fsa-stat-icon-bg .fsa-stat-icon i {
    font-size: 1.2em;
}

body.fsa-stat-icon-bg .fsa-stat-number {
    font-size: 1.4em;
    font-weight: 700;
    margin: 0;
}

body.fsa-stat-icon-bg .fsa-stat-label {
    font-size: 0.85em;
    opacity: 0.85;
    margin: 4px 0 0 0;
}

.fsa-stat-box:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.fsa-stat-box--linked {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: inherit;
}

body.fsa-stat-icon-bg .fsa-stat-box--linked {
    flex-direction: row;
}

.fsa-stat-box--linked:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    opacity: 0.92;
}

.fsa-stat-box--active {
    background: #0d3b2e;
    border: 1px solid #2ecc71;
    position: relative;
}

.fsa-stat-box--active .fsa-stat-number {
    color: #2ecc71;
}

/* LIVE badge */
.fsa-live-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: #e74c3c;
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 2px 7px;
    border-radius: var(--fsa-radius-pill, 99px);
    text-transform: uppercase;
    line-height: 1.4;
    display: flex;
    align-items: center;
    gap: 4px;
}

@keyframes fsa-live-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.55; }
}

.fsa-stat-icon {
    display: block;
    font-size: 1.6rem;
    margin-bottom: 8px;
    color: #fff;
    opacity: 0.85;
}

/* Font Awesome utility colors */
.fsa-icon-green { color: #2ecc71; }
.fsa-icon-red   { color: #e74c3c; }
.fsa-pulse      { animation: fsa-live-pulse 2s ease-in-out infinite; }

.fsa-stat-number {
    display: block;
    font-size: 1.75rem;
    font-weight: 700;
    color: #00b4d8;
    line-height: 1.1;
}

.fsa-stat-label {
    display: block;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.65;
    margin-top: 6px;
}

/* --- Pagination (Pilots) --- */
.fsa-perpage-btn,
.fsa-page-btn {
    display: inline-block;
    padding: 4px 12px;
    border: 1px solid #ddd;
    border-radius: var(--fsa-radius-sm, 5px);
    background: #f9f9f9;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    color: #333;
    transition: background 0.15s, border-color 0.15s;
}

.fsa-perpage-btn:hover,
.fsa-page-btn:hover:not(:disabled) {
    background: #1a1a2e;
    color: #fff;
    border-color: #1a1a2e;
}

.fsa-perpage-btn.fsa-perpage--active {
    background: #1a1a2e;
    color: #00b4d8;
    border-color: #1a1a2e;
}

.fsa-page-btn:disabled {
    cursor: default;
}
.fsa-table-wrap {
    overflow-x: auto;
    margin: 24px 0;
    border-radius: var(--fsa-radius-md, 8px);
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

.fsa-table {
    width: 100%;
    /* separate (not collapse) so border-radius on corner cells is honored,
       giving clean rounding on all four corners incl. header + last row */
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.9rem;
    background: #fff;
    border-radius: var(--fsa-radius-md, 8px);
    overflow: hidden;
}

.fsa-table thead tr {
    background: #1a1a2e;
    color: #fff;
}

.fsa-table thead th {
    padding: 12px 16px;
    text-align: left;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

/* Round the top corners on the first/last header cell */
.fsa-table thead th:first-child { border-top-left-radius: var(--fsa-radius-md, 8px); }
.fsa-table thead th:last-child  { border-top-right-radius: var(--fsa-radius-md, 8px); }

/* Round the bottom corners on the first/last cell of the last body row */
.fsa-table tbody tr:last-child td:first-child { border-bottom-left-radius: var(--fsa-radius-md, 8px); }
.fsa-table tbody tr:last-child td:last-child  { border-bottom-right-radius: var(--fsa-radius-md, 8px); }

.fsa-sortable-col { user-select: none; }
.fsa-sortable-col:hover { opacity: 0.8; }
.fsa-sort-asc,
.fsa-sort-desc { opacity: 1 !important; }
.fsa-sort-icon { font-style: normal; margin-left: 2px; }

.fsa-table tbody tr {
    transition: background 0.1s;
}

/* With border-collapse:separate we use a bottom border on cells, not rows,
   to keep row separators crisp without breaking the corner radii */
.fsa-table tbody td {
    padding: 11px 16px;
    vertical-align: middle;
    border-bottom: 1px solid #f0f0f0;
}

.fsa-table tbody tr:last-child td {
    border-bottom: none;
}

.fsa-table tbody tr:hover {
    background: #f0f9ff;
}

/* --- ICAO-Chips --- */
.fsa-icao {
    display: inline-block;
    font-family: monospace;
    font-size: 0.85rem;
    background: #f0f9ff;
    color: #0369a1;
    padding: 2px 8px;
    border-radius: var(--fsa-radius-sm, 5px);
    font-weight: 600;
    letter-spacing: 0.05em;
}

/* --- Status-Badges --- */
.fsa-badge {
    display: inline-block;
    padding: 3px 12px;
    border-radius: var(--fsa-radius-pill, 99px);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.fsa-badge--active {
    background: #d1fae5;
    color: #065f46;
}

.fsa-badge--online {
    background: #d1fae5;
    color: #065f46;
}

.fsa-badge--inactive {
    background: #f3f4f6;
    color: #6b7280;
}

.fsa-badge--inflight {
    background: #dbeafe;
    color: #1e40af;
    font-weight: 700;
}

.fsa-row--inflight {
    background: #eff6ff !important;
}

/* --- Rating-Farben --- */
.fsa-rating--great {
    color: #059669;
    font-weight: 700;
}

.fsa-rating--ok {
    color: #d97706;
    font-weight: 700;
}

.fsa-rating--bad {
    color: #dc2626;
    font-weight: 700;
}

/* --- Fehlermeldung --- */
.fsa-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
    padding: 12px 16px;
    border-radius: var(--fsa-radius-md, 8px);
    font-size: 0.9rem;
    margin: 16px 0;
}

/* --- Responsive: Mobile --- */
@media (max-width: 640px) {

    .fsa-stat-box {
        flex: 1 1 calc(50% - 8px);
    }

    .fsa-table thead {
        display: none;
    }

    .fsa-table tbody tr {
        display: block;
        padding: 12px 0;
        border-bottom: 2px solid #e5e7eb;
    }

    .fsa-table tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 5px 16px;
        border: none;
    }

    .fsa-table tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        color: #6b7280;
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }
}

@media (max-width: 380px) {
    .fsa-stat-box {
        flex: 1 1 100%;
    }
}

/* =====================================================
   Discord Integration
   ===================================================== */

.fsa-discord {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 20px 0;
}

/* ── News Messages ── */
.fsa-discord-msg {
    background: var(--fsa-discord-msg-bg, #2b2d31);
    border-radius: var(--fsa-radius-md, 8px);
    padding: 16px;
    color: var(--fsa-discord-msg-text, #dcddde);
}

.fsa-discord-msg__header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.fsa-discord-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
}

.fsa-discord-msg__meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.fsa-discord-author {
    font-weight: 700;
    color: var(--fsa-discord-msg-author, #fff);
    font-size: 0.95rem;
}

.fsa-discord-date {
    font-size: 0.75rem;
    opacity: 0.55;
}

.fsa-discord-msg__body {
    font-size: 0.9rem;
    line-height: 1.5;
    word-break: break-word;
}

.fsa-discord-msg__body a {
    color: var(--fsa-discord-msg-link, #00b0f4);
    text-decoration: none;
}

.fsa-discord-msg__body a:hover { text-decoration: underline; }

.fsa-discord-code {
    background: #1e1f22;
    border-radius: var(--fsa-radius-sm, 5px);
    padding: 10px 14px;
    font-size: 0.83rem;
    overflow-x: auto;
    margin: 8px 0;
    color: var(--fsa-discord-msg-text, #dcddde);
}

/* ── Embeds ── */
.fsa-discord-embed {
    background: var(--fsa-discord-msg-bg, #2b2d31);
    border-left: 4px solid var(--fsa-discord-embed-border, #5865f2);
    border-radius: 0 var(--fsa-radius-sm, 5px) var(--fsa-radius-sm, 5px) 0;
    padding: 12px 14px;
    margin-top: 8px;
    font-size: 0.88rem;
}

.fsa-discord-embed__author {
    font-size: 0.78rem;
    opacity: 0.75;
    margin-bottom: 4px;
}

.fsa-discord-embed__title {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--fsa-discord-msg-author, #fff);
    margin-bottom: 6px;
}

.fsa-discord-embed__title a { color: var(--fsa-discord-msg-link, #00b0f4); text-decoration: none; }
.fsa-discord-embed__title a:hover { text-decoration: underline; }

.fsa-discord-embed__desc {
    opacity: 0.85;
    line-height: 1.5;
}

.fsa-discord-embed__fields {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 10px;
}

.fsa-discord-embed__field { flex: 1 1 140px; }
.fsa-discord-embed__field--inline { flex: 0 1 140px; }

.fsa-discord-embed__field-name {
    font-weight: 700;
    font-size: 0.82rem;
    color: #fff;
    margin-bottom: 3px;
}

.fsa-discord-embed__field-val { font-size: 0.85rem; opacity: 0.9; }

.fsa-discord-embed__img,
.fsa-discord-attachment {
    max-width: 100%;
    border-radius: var(--fsa-radius-sm, 5px);
    margin-top: 10px;
    display: block;
}

.fsa-discord-embed__thumb {
    float: right;
    max-width: 80px;
    max-height: 80px;
    border-radius: var(--fsa-radius-sm, 5px);
    margin-left: 12px;
}

.fsa-discord-embed__footer {
    font-size: 0.75rem;
    opacity: 0.55;
    margin-top: 10px;
}

.fsa-discord-file {
    display: inline-block;
    margin-top: 8px;
    padding: 4px 10px;
    background: #1e1f22;
    border-radius: var(--fsa-radius-sm, 5px);
    color: var(--fsa-discord-msg-link, #00b0f4);
    font-size: 0.85rem;
    text-decoration: none;
}

/* ── Events ── */
.fsa-discord-event {
    background: var(--fsa-discord-event-bg, #2b2d31);
    border-radius: var(--fsa-radius-md, 8px);
    overflow: hidden;
    color: var(--fsa-discord-event-text, #dcddde);
    transition: box-shadow 0.15s;
}

.fsa-discord-event:hover {
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.fsa-discord-event--live {
    border: 1px solid var(--fsa-discord-event-live, #ed4245);
}

.fsa-discord-event__cover {
    position: relative;
}

.fsa-discord-event__cover img {
    width: 100%;
    max-height: 200px;
    object-fit: cover;
    display: block;
}

.fsa-discord-live-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--fsa-discord-event-live, #ed4245);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: var(--fsa-radius-pill, 99px);
    letter-spacing: 0.05em;
}

.fsa-discord-event__live-bar {
    background: var(--fsa-discord-event-live, #ed4245);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    padding: 6px 16px;
    text-align: center;
}

.fsa-discord-event__body {
    padding: 16px;
}

.fsa-discord-event__title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--fsa-discord-event-title, #fff);
    margin-bottom: 8px;
}

.fsa-discord-event__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 0.83rem;
    opacity: 0.75;
    margin-bottom: 10px;
}

.fsa-discord-event__desc {
    font-size: 0.88rem;
    line-height: 1.55;
    opacity: 0.9;
}

.fsa-discord-empty,
.fsa-empty {
    padding: 20px;
    text-align: center;
    opacity: 0.6;
    font-style: italic;
}

@media (max-width: 640px) {
    .fsa-discord-embed__thumb { display: none; }
    .fsa-discord-embed__fields { flex-direction: column; }
}

/* --- Unified airport markers (both Route Map + Live Map) --- */
/* circleMarker renders as SVG <path>; filter applies the drop shadow */
.fsa-airport-marker--shadow {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}

/* --- Live Map: active flights table --- */
.fsa-livemap-table-wrap {
    margin-top: 16px;
}
.fsa-livemap-table tbody tr {
    cursor: pointer;
}
.fsa-livemap-state-pill {
    display: inline-block;
    padding: 2px 10px;
    border-radius: var(--fsa-radius-pill, 99px);
    background: var(--fsa-accent, #3498db);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}

/* ============================================================
   Optional 3D / Depth effect (frontend only)
   Activated by the `fsa-3d` body class. Layers a subtle gradient
   + shadow (+ bevel on "strong") over existing flat surfaces.
   The configured background colors remain the base; these overlays
   only add depth, so the effect is color-agnostic.
   ============================================================ */
body.fsa-3d .fsa-stat-box,
body.fsa-3d .fsa-stat-box--active,
body.fsa-3d .fsa-table-wrap,
body.fsa-3d .fsa-news-banner,
body.fsa-3d .fsa-credits-box,
body.fsa-3d .fsa-live-badge,
body.fsa-3d .fsa-livemap-state-pill,
body.fsa-3d .fsa-perpage-btn,
body.fsa-3d .fsa-page-btn,
body.fsa-3d .fsa-discord-msg,
body.fsa-3d .fsa-discord-event,
body.fsa-3d .fsa-livemap-bar {
    position: relative;
    box-shadow: var(--fsa-3d-shadow), var(--fsa-3d-bevel, none);
}

/* The gradient is layered via a ::before overlay so it works regardless of how
   the surface sets its background (class, inline style, or shorthand). The
   overlay inherits the element's border-radius and never blocks clicks. */
body.fsa-3d .fsa-stat-box::before,
body.fsa-3d .fsa-stat-box--active::before,
body.fsa-3d .fsa-news-banner::before,
body.fsa-3d .fsa-credits-box::before,
body.fsa-3d .fsa-live-badge::before,
body.fsa-3d .fsa-livemap-state-pill::before,
body.fsa-3d .fsa-perpage-btn::before,
body.fsa-3d .fsa-page-btn::before,
body.fsa-3d .fsa-discord-msg::before,
body.fsa-3d .fsa-discord-event::before,
body.fsa-3d .fsa-livemap-bar::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-image: var(--fsa-3d-gradient);
    pointer-events: none;
    z-index: 0;
}

/* Make sure text/content inside stays above the overlay.
   Exclude the LIVE badge which must keep its absolute positioning. */
body.fsa-3d .fsa-stat-box > *:not(.fsa-live-badge),
body.fsa-3d .fsa-news-banner > *,
body.fsa-3d .fsa-credits-box > *,
body.fsa-3d .fsa-discord-msg > *,
body.fsa-3d .fsa-discord-event > *,
body.fsa-3d .fsa-livemap-bar > * {
    position: relative;
    z-index: 1;
}

/* LIVE badge stays absolute but above the overlay */
body.fsa-3d .fsa-stat-box > .fsa-live-badge {
    z-index: 2;
}

/* Table header gets the gradient via overlay on each header cell */
body.fsa-3d .fsa-table thead tr {
    position: relative;
}
body.fsa-3d .fsa-table thead th {
    position: relative;
    background-image: var(--fsa-3d-gradient);
}

/* Table outer shadow on the wrap, not the inner table */
body.fsa-3d .fsa-table-wrap {
    box-shadow: var(--fsa-3d-shadow), var(--fsa-3d-bevel, none);
}
body.fsa-3d .fsa-table-wrap .fsa-table {
    box-shadow: none;
}

/* Buttons: slight lift on hover feels more tactile with 3D on */
body.fsa-3d .fsa-perpage-btn,
body.fsa-3d .fsa-page-btn {
    transition: box-shadow 0.15s, transform 0.15s;
}
body.fsa-3d .fsa-perpage-btn:hover,
body.fsa-3d .fsa-page-btn:hover:not(:disabled) {
    transform: translateY(-1px);
}

/* --- Inline single stat [fsa_stat] --- */
.fsa-stat-inline {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.fsa-stat-inline-label {
    opacity: 0.7;
    font-size: 0.9em;
}