/* 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; }

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

/* 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;
}

/* 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;
}

/* 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; }

/* 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; }