/* ════════════════════════════════════════════════
   E-Flight v2 — Custom Styles
   Extends Framework7 CSS (iOS only)
   ════════════════════════════════════════════════ */

/* ─── F7 CSS Variables ────────────────────────── */
/* These are normally set by F7 JavaScript.       */
/* Without JS, we must define them manually.        */
:root {
    /* Safe areas */
    --ef-safe-bottom: env(safe-area-inset-bottom, 0px);

    /* ── Theme Color (--f7-ios-primary is set by color-presets.js) ── */
    --f7-theme-color: #007AFF;
    --f7-theme-color-rgb: 0,122,255;
    --f7-theme-color-shade: #0066D6;
    --f7-theme-color-tint: #4090FF;

    /* ── Text ── */
    --f7-text-color: #000;

    /* ── Page ── */
    --f7-page-bg-color: #EFEFF4;

    /* ── Bars (Navbar, Toolbar, Tabbar) ── */
    --f7-bars-bg-color: #EFEFF4;
    --f7-bars-bg-color-rgb: 239,239,244;
    --f7-bars-text-color: #000;
    --f7-bars-link-color: var(--f7-theme-color);
    --f7-bars-border-color: transparent;

    /* ── Navbar ── */
    --f7-navbar-bg-color: var(--f7-bars-bg-color);
    --f7-navbar-text-color: var(--f7-bars-text-color);
    --f7-navbar-link-color: var(--f7-theme-color);

    /* ── Toolbar / Tabbar ── */
    --f7-toolbar-bg-color: var(--f7-bars-bg-color);
    --f7-toolbar-text-color: var(--f7-bars-text-color);
    --f7-toolbar-link-color: var(--f7-theme-color);
    --f7-tabbar-link-active-color: var(--f7-theme-color);
    --f7-tabbar-link-inactive-color: rgba(0,0,0,0.45);

    /* ── Buttons ── */
    --f7-button-fill-bg-color: var(--f7-theme-color);
    --f7-button-fill-text-color: #fff;
    --f7-button-fill-pressed-bg-color: var(--f7-theme-color-shade);
    --f7-button-outline-border-color: var(--f7-theme-color);
    --f7-button-outline-text-color: var(--f7-theme-color);

    /* ── List View ── */
    --f7-list-strong-bg-color: #fff;
    --f7-list-inset-side-margin: 16px;
    --f7-list-item-border-color: rgba(0,0,0,0.22);
    --f7-list-item-after-text-color: rgba(0,0,0,0.45);
    --f7-list-chevron-icon-color: rgba(0,0,0,0.2);
    --f7-list-link-pressed-bg-color: rgba(0,0,0,0.15);
    --f7-list-group-title-bg-color: #F7F7F7;
    --f7-list-group-title-text-color: rgba(0,0,0,0.45);

    /* ── Cards ── */
    --f7-card-bg-color: #fff;
    --f7-card-outline-border-color: rgba(0,0,0,0.12);
    --f7-card-header-border-color: rgba(0,0,0,0.1);
    --f7-card-footer-border-color: rgba(0,0,0,0.1);
    --f7-card-footer-text-color: rgba(0,0,0,0.45);

    /* ── Inputs ── */
    --f7-input-text-color: #000;
    --f7-input-placeholder-color: #A9A9A9;
    --f7-input-bg-color: transparent;
    --f7-input-clear-button-color: rgba(0,0,0,0.45);
    --f7-label-text-color: inherit;

    /* ── Toggle ── */
    --f7-toggle-bg-color: rgba(0,0,0,0.15);
    --f7-toggle-active-bg-color: var(--f7-theme-color);

    /* ── Link ── */
    --f7-link-color: var(--f7-theme-color);
    --f7-link-highlight-color: rgba(var(--f7-theme-color-rgb),0.15);

    /* ── Preloader ── */
    --f7-preloader-color: var(--f7-theme-color);

    /* ── Badge ── */
    --f7-badge-bg-color: var(--f7-theme-color);
    --f7-badge-text-color: #fff;

    /* ── Block ── */
    --f7-block-strong-bg-color: #fff;
}

/* ── Dark Mode ── */
.dark {
    --f7-text-color: #fff;
    --f7-page-bg-color: #000;
    --f7-bars-bg-color: #1C1C1D;
    --f7-bars-bg-color-rgb: 28,28,29;
    --f7-bars-text-color: #fff;
    --f7-navbar-bg-color: var(--f7-bars-bg-color);
    --f7-navbar-text-color: var(--f7-bars-text-color);
    --f7-toolbar-bg-color: var(--f7-bars-bg-color);
    --f7-toolbar-text-color: var(--f7-bars-text-color);
    --f7-tabbar-link-inactive-color: rgba(255,255,255,0.55);
    --f7-list-strong-bg-color: #1C1C1D;
    --f7-list-item-border-color: rgba(255,255,255,0.15);
    --f7-list-item-after-text-color: rgba(255,255,255,0.55);
    --f7-list-chevron-icon-color: rgba(255,255,255,0.3);
    --f7-list-link-pressed-bg-color: rgba(255,255,255,0.08);
    --f7-list-group-title-bg-color: #232323;
    --f7-list-group-title-text-color: rgba(255,255,255,0.55);
    --f7-card-bg-color: #1C1C1D;
    --f7-card-outline-border-color: rgba(255,255,255,0.15);
    --f7-card-header-border-color: rgba(255,255,255,0.15);
    --f7-card-footer-border-color: rgba(255,255,255,0.15);
    --f7-card-footer-text-color: rgba(255,255,255,0.55);
    --f7-input-text-color: #fff;
    --f7-input-clear-button-color: rgba(255,255,255,0.5);
    --f7-toggle-bg-color: rgba(255,255,255,0.3);
    --f7-block-strong-bg-color: #1C1C1D;
}

/* ─── Typography ───────────────────────────────── */
.text-color-gray { color: #8E8E93; }
.text-color-red   { color: #FF3B30; }
.text-align-center { text-align: center; }

/* Red outline button (for remove/danger actions) */
.button.button-outline.color-red {
    color: #FF3B30;
    border-color: #FF3B30;
    --f7-button-outline-border-color: #FF3B30;
    --f7-button-outline-text-color: #FF3B30;
}
.button.button-outline.color-red:active {
    background: rgba(255,59,48,0.1);
}

/* ─── Layout ───────────────────────────────────── */
.page-with-tabbar {
    padding-bottom: calc(50px + var(--ef-safe-bottom));
}

/* Uniform side padding across all pages */
.page-content {
    padding-left: 16px;
    padding-right: 16px;
}

/* Remove redundant side padding from F7 .block/.block-header */
.block {
    padding-left: 0;
    padding-right: 0;
}
.block-header {
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
}

/* ─── Desktop Constraint ──────────────────────── */
@media (min-width: 768px) {
    .page-content {
        max-width: 600px;
        margin: 0 auto;
    }
}

/* ─── Input Fix ───────────────────────────────── */
.item-input .item-input-wrap input,
.item-input .item-input-wrap textarea,
.item-input .item-input-wrap select {
    position: relative;
    z-index: 1;
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    font-size: 16px;
    -webkit-appearance: none;
    appearance: none;
}

/* Focus outline — contorno visível quando o campo está ativo (mobile-first) */
.item-input .item-input-wrap input:focus,
.item-input .item-input-wrap textarea:focus,
.item-input .item-input-wrap select:focus {
    outline: none;
    border-radius: 8px;
    box-shadow: 0 0 0 2px var(--f7-theme-color, #007AFF);
}

/* ─── Card Enhancements ───────────────────────── */
.card-header-pilot {
    display: flex;
    align-items: center;
    gap: 12px;
}
.card-header-pilot img {
    width: 40px; height: 40px;
    border-radius: 50%;
    object-fit: cover;
}
.card-header-pilot .pilot-info {
    flex: 1;
}
.card-header-pilot .pilot-name {
    font-weight: 600;
    font-size: 15px;
}
.card-header-pilot .pilot-meta {
    font-size: 13px;
    color: #8E8E93;
}

/* ─── Post Card ────────────────────────────────── */
.post-actions {
    display: flex;
    gap: 24px;
    padding: 8px 0;
}
.post-action {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    color: #8E8E93;
    cursor: pointer;
    background: none;
    border: none;
}
.post-action.liked { color: var(--f7-ios-primary); }
.post-action i { font-size: 20px; }

/* ─── Flight Card ──────────────────────────────── */
.flight-route {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
}
.flight-route .route-point {
    flex: 1;
    text-align: center;
}
.flight-route .route-point .code {
    font-size: 24px;
    font-weight: 700;
}
.flight-route .route-point .name {
    font-size: 13px;
    color: #8E8E93;
}
.flight-route .route-arrow {
    font-size: 24px;
    color: var(--f7-ios-primary);
}

/* ─── Visibility Toggle ────────────────────────── */
.visibility-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid var(--f7-list-border-color, #E5E5EA);
}
.visibility-row:last-child { border-bottom: none; }
.visibility-row .vis-label { flex: 1; }
.visibility-row .vis-description {
    font-size: 12px;
    color: #8E8E93;
}

/* ─── Color Swatches ───────────────────────────── */
.color-swatch-list {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding: 8px 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.color-swatch-list::-webkit-scrollbar { display: none; }
.color-swatch {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    flex-shrink: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s;
}
.color-swatch:active { transform: scale(0.9); }
.color-swatch.active {
    box-shadow: 0 0 0 3px rgba(0,0,0,0.2);
}
.color-swatch.active::after {
    content: '✓';
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* ─── Skeleton Loading ─────────────────────────── */
.skeleton-text {
    background: linear-gradient(90deg, #E5E5EA 25%, #F2F2F7 50%, #E5E5EA 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s infinite;
    border-radius: 4px;
    height: 14px;
    margin: 6px 0;
}
.skeleton-text.w-60 { width: 60%; }
.skeleton-text.w-80 { width: 80%; }
.skeleton-text.w-40 { width: 40%; }
.skeleton-avatar {
    width: 48px; height: 48px;
    border-radius: 50%;
    background: linear-gradient(90deg, #E5E5EA 25%, #F2F2F7 50%, #E5E5EA 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s infinite;
}

@keyframes skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ─── Toast (custom, F7 CSS-only doesn't have) ─── */
.toast {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.85);
    color: #fff;
    padding: 10px 20px;
    border-radius: 20px;
    font-size: 14px;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}
.toast.show { opacity: 1; }

/* ─── Empty State ──────────────────────────────── */
.empty-state {
    text-align: center;
    padding: 40px 20px;
}
.empty-state i {
    font-size: 48px;
    color: #C7C7CC;
}
.empty-state p {
    color: #8E8E93;
    margin-top: 12px;
}

/* ─── Post Creation Modal ─────────────────────── */
/* Centered overlay, no animation, margins on all sides */
#post-sheet-backdrop.sheet-backdrop {
    position: fixed !important; z-index: 8000 !important;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.4);
    opacity: 0; pointer-events: none;
    transition: opacity 0.15s;
}
#post-sheet-backdrop.sheet-backdrop.backdrop-in {
    opacity: 1; pointer-events: auto;
}

#post-sheet {
    position: fixed !important; z-index: 8001 !important;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100vw - 48px); max-width: 420px; max-height: 80vh;
    background: var(--f7-page-bg-color, #EFEFF4);
    border-radius: 20px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.2);
    overflow-y: auto;
    opacity: 0; pointer-events: none;
    transition: opacity 0.15s;
}
.dark #post-sheet { background: var(--f7-page-bg-color, #1C1C1E); box-shadow: 0 8px 40px rgba(0,0,0,0.5); }
#post-sheet.modal-in { opacity: 1; pointer-events: auto; }

#post-sheet .post-modal-content {
    padding: 24px 20px 20px;
}
#post-sheet .post-modal-content textarea {
    width: 100%; border: none; background: transparent;
    font-size: 16px; font-family: inherit; line-height: 1.4;
    resize: none; outline: none; color: inherit;
    min-height: 100px;
}
#post-sheet .post-modal-content textarea::placeholder { color: #8E8E93; }
#post-sheet .post-modal-actions {
    display: flex; gap: 10px; justify-content: center;
    padding: 0 20px 20px;
}

/* ─── Panel Navigation ────────────────────────── */
/* Navbar menu trigger + side panel + dialog are in partials/navbar.php + floating-nav.php */

/* Menu trigger (navbar right) — F7 native button-fill button-round.
   Width/height set inline for the circle shape. */
#ef-menu-trigger {
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

/* Panel close button (top-right of panel header) */
.ef-panel-close-btn {
    flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
    border: none; background: rgba(0,0,0,0.08);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; padding: 0;
    -webkit-tap-highlight-color: transparent;
}
.ef-panel-close-btn i { font-size: 16px; color: #8E8E93; }
.dark .ef-panel-close-btn { background: rgba(255,255,255,0.12); }
.dark .ef-panel-close-btn i { color: #AEAEB2; }

/* Panel: override F7's position:absolute → fixed (panel lives inside .page, not app root).
   F7's --f7-panel-bg-color relies on --f7-glass-bg-color which we don't define,
   so the panel background is transparent. We set bg + dimensions explicitly.
   F7's .panel-right.panel-floating sets translateX(100%) with spec 0,3,0
   which beats .panel-in (spec 0,1,0) — so the panel never slides in.
   We fix all 3 issues here. */
#ef-panel.panel {
    position: fixed; z-index: 6001;
    top: 12px; right: 8px; bottom: 12px;
    width: 300px; max-width: 85vw;
    height: auto;
    background: var(--f7-page-bg-color, #EFEFF4);
    border-radius: 24px;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    transform: translateX(calc(100% + 16px));
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: flex; flex-direction: column;
}
#ef-panel.panel.panel-in { transform: translateX(0); }
.dark #ef-panel.panel { background: var(--f7-page-bg-color, #000); }
#ef-panel-backdrop.panel-backdrop { position: fixed; z-index: 6000; }

/* Panel menu-list: transparent items floating on panel background.
   flex:1 pushes logout to bottom. */
#ef-panel #ef-menu-list { background: transparent; flex: 1; }
#ef-panel #ef-menu-list ul { background: transparent; }
#ef-panel #ef-menu-list .item-content {
    background: transparent;
    margin: 2px 8px;
    border-radius: 14px;
}
#ef-panel #ef-menu-list .item-content.item-link:active {
    background: rgba(0,0,0,0.06);
}
.dark #ef-panel #ef-menu-list .item-content.item-link:active {
    background: rgba(255,255,255,0.1);
}

/* Dialog: F7's .dialog uses position:absolute + opacity:0 hidden, .modal-in shows it.
   Inside .page, everything breaks. We take full control: fixed position + explicit visibility. */
#ef-logout-backdrop.dialog-backdrop {
    position: fixed !important;
    z-index: 7000 !important;
}
#ef-logout-dialog.dialog {
    position: fixed !important;
    z-index: 7001 !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    display: block;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
#ef-logout-dialog.dialog.modal-in {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* ─── Registration Multi-Step ─────────────────── */
/* Uses F7 native .progressbar for step progress.
   Only layout helpers for step nav and panel transitions. */

/* Step Navigation Buttons */
.ef-step-nav {
    display: flex;
    gap: 12px;
    padding: 8px 16px 12px;
}
.ef-step-btn {
    flex: 1;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
.ef-step-btn:disabled {
    opacity: 0.35;
}

/* Step Panel fade-in transition */
.ef-step-panel {
    animation: ef-fadein 0.2s ease;
}
@keyframes ef-fadein {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ─── Shared Utility Classes ──────────────────── */
.ef-section-header {
    margin: 12px 16px 4px;
    font-size: 13px;
    color: #8E8E93;
    text-transform: uppercase;
    font-weight: 600;
}

/* Panel nav: F7 menu-list handles icon colors natively */

/* Post cards (shared by home + feed) */
.ef-post-card .card-header { padding-bottom: 8px; }
.ef-post-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.ef-post-author { font-weight: 600; font-size: 14px; }
.ef-post-time { font-size: 11px; color: #8E8E93; }
.ef-post-body { font-size: 14px; line-height: 1.4; margin: 0; }
.ef-post-like { display: flex; align-items: center; gap: 4px; font-size: 13px; }
.ef-post-like i { font-size: 18px; }
.ef-post-like.liked { color: var(--f7-theme-color); }

/* Flight cards (shared by home + flights list) */
.ef-flight-card { display: block; margin-bottom: 8px; text-decoration: none; color: inherit; }
.ef-flight-card .card-content-padding { padding: 12px 16px; }
.ef-flight-date { font-weight: 600; font-size: 14px; }
.ef-flight-meta { font-size: 13px; color: #8E8E93; margin-top: 2px; }

/* Flight grouped cards (home) */
.ef-flight-group-header {
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 700;
    color: #8E8E93;
    padding: 8px 0 4px;
    letter-spacing: 0.5px;
}
.ef-flight-group-header:first-child {
    padding-top: 0;
}
.ef-flight-compact {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 10px;
    background: var(--f7-card-bg-color, #fff);
    margin-bottom: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.ef-flight-compact-date {
    text-align: center;
    min-width: 38px;
    line-height: 1.2;
}
.ef-flight-compact-date .ef-day {
    font-size: 18px;
    font-weight: 700;
}
.ef-flight-compact-date .ef-wkday {
    font-size: 10px;
    color: #8E8E93;
    text-transform: uppercase;
}
.ef-flight-compact-info {
    flex: 1;
    min-width: 0;
}
.ef-flight-compact-info .ef-route {
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ef-flight-compact-info .ef-sub {
    font-size: 12px;
    color: #8E8E93;
    margin-top: 1px;
}
.ef-flight-compact-time {
    text-align: right;
    font-size: 13px;
    font-weight: 500;
}

/* Flight full detail */
.ef-flight-hero {
    background: var(--f7-card-bg-color, #fff);
    border-radius: 13px;
    padding: 20px 16px;
    margin-bottom: 12px;
    text-align: center;
}
.ef-flight-hero .ef-route-large {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
}
.ef-flight-hero .ef-subtitle {
    font-size: 13px;
    color: #8E8E93;
    margin-top: 4px;
}
.ef-flight-stat-row {
    display: flex;
    justify-content: space-around;
    padding: 12px 0;
    border-top: 1px solid var(--f7-list-item-border-color, #e5e5ea);
    margin-top: 12px;
}
.ef-flight-stat {
    text-align: center;
}
.ef-flight-stat .ef-stat-value {
    font-size: 18px;
    font-weight: 700;
}
.ef-flight-stat .ef-stat-label {
    font-size: 11px;
    color: #8E8E93;
    margin-top: 2px;
}

/* Panel header */
.ef-panel-name { font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ef-panel-email { font-size: 12px; color: #8E8E93; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ─── Dark Mode Overrides ─────────────────────── */
.dark .text-color-gray { color: #8E8E93; }
.dark .text-color-red   { color: #FF453A; }
.dark .ef-panel { background: #000; }