/* ============================================================
   Spectre Mobile / Responsive Overrides
   Loaded last to override layout rules from skin.css and Tailwind.
   ============================================================ */

/* ---------- Tablet (≤ 1024px) ---------- */
@media (max-width: 1024px) {
    /* Admin sidebar — collapse into top accordion */
    .admin-shell {
        grid-template-columns: 1fr !important;
        display: block !important;
    }
    .admin-sidebar {
        position: static !important;
        width: 100% !important;
        min-height: 0 !important;
        border-right: none !important;
        border-bottom: 1px solid rgba(168,85,247,0.2);
    }
    .admin-sidebar nav {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 4px;
        padding: 8px !important;
    }
    .admin-sidebar nav a, .admin-sidebar nav h4 {
        padding: 6px 8px !important;
        font-size: 0.75rem !important;
    }

    /* Cards reduce padding */
    .card .card-body, .card-body { padding: 14px !important; }
}

/* ---------- Phone (≤ 640px) ---------- */
@media (max-width: 640px) {
    body { font-size: 15px; }

    /* Stop containers from clipping wider than viewport */
    .max-w-6xl, .max-w-5xl, .max-w-4xl, .max-w-3xl {
        max-width: 100% !important;
    }

    /* Page padding tighter */
    main, .content, [role="main"] {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* Headings smaller */
    h1 { font-size: 1.4rem !important; line-height: 1.2 !important; }
    h2 { font-size: 1.2rem !important; }
    h3 { font-size: 1.05rem !important; }

    /* Form inputs full width */
    input[type="text"], input[type="email"], input[type="password"],
    input[type="number"], input[type="url"], input[type="date"],
    select, textarea {
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box;
    }
    textarea { min-height: 100px; }

    /* kbd-style labels stack instead of side-by-side */
    p > kbd {
        display: block !important;
        margin-bottom: 6px !important;
        min-width: 0 !important;
        width: auto !important;
        padding: 4px 0 !important;
        background: none !important;
        border: none !important;
        box-shadow: none !important;
        font-family: 'Cinzel', serif !important;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: #c084fc !important;
        font-size: 0.75rem;
    }
    p > kbd + input,
    p > kbd + select,
    p > kbd + textarea {
        display: block !important;
        width: 100% !important;
        margin-top: 4px !important;
    }
    .img-picker-btn {
        margin-left: 0 !important;
        margin-top: 6px !important;
        display: inline-block;
    }

    /* Tables: horizontal scroll wrapper */
    .card { overflow-x: auto; }
    table {
        display: block !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch;
        font-size: 0.85rem;
    }
    table th, table td { padding: 6px 8px !important; }

    /* Cards stacking */
    .card .card-body, .card-body { padding: 12px !important; }
    .card { margin-bottom: 10px !important; }

    /* Grids collapse to single column */
    .grid-2, .grid-3, .grid-4,
    .grid.grid-cols-2, .grid.grid-cols-3, .grid.grid-cols-4 {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* Manifest crew grid 1-2 cards per row */
    .cards-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
        gap: 10px !important;
    }
    .crew-card-img, .crew-card-placeholder { height: 140px !important; }

    /* Posts list */
    .post-meta-bar {
        display: block !important;
    }
    .post-meta-bar > div {
        display: block !important;
        margin-bottom: 4px;
    }

    /* Featuring banner scrolls horizontally */
    .featuring-portraits {
        display: flex !important;
        overflow-x: auto !important;
        gap: 10px !important;
        padding-bottom: 6px;
        -webkit-overflow-scrolling: touch;
    }
    .portrait-wrap { flex-shrink: 0; width: 90px; }

    /* Featuring mission image */
    .featuring-mission-img { max-width: 100% !important; max-height: 200px !important; }

    /* Welcome page mission banner shorter */
    .main-mission-banner img { max-height: 180px !important; }

    /* Buttons stack better */
    .btn-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }
    .btn-row .btn { width: 100% !important; }

    /* Modal goes near full screen */
    #image-picker-modal > div {
        max-height: 95vh !important;
        margin: 8px !important;
    }
    #image-picker-grid {
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)) !important;
        gap: 8px !important;
        padding: 10px !important;
    }

    /* Wiki + news + general list items more compact */
    .welcome-list-item, .list-item, .news-item {
        padding: 10px !important;
    }
    .welcome-list-item h4, .news-item h4 { font-size: 0.95rem !important; }

    /* Media library tiles smaller */
    .upload-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
        gap: 10px !important;
    }
    .upload-tile-img { height: 110px !important; }

    /* Filter row wraps */
    .filter-row { flex-direction: column !important; align-items: stretch !important; }
    .filter-row > div { width: 100%; }

    /* Footer */
    footer .grid { grid-template-columns: 1fr !important; gap: 16px !important; }
}

/* ---------- Very small phones (≤ 380px) ---------- */
@media (max-width: 380px) {
    body { font-size: 14px; }
    h1 { font-size: 1.25rem !important; }
    .cards-grid { grid-template-columns: 1fr !important; }
    .upload-grid { grid-template-columns: 1fr 1fr !important; }
}

/* ---------- Admin-specific (uses #admin-sidebar) ---------- */
@media (max-width: 1024px) {
    .admin-shell {
        display: block !important;
    }
    #admin-sidebar {
        position: static !important;
        width: 100% !important;
        min-height: 0 !important;
        max-height: 60px;
        overflow: hidden;
        border-right: none !important;
        border-bottom: 1px solid rgba(168,85,247,0.2);
        transition: max-height 0.25s;
    }
    #admin-sidebar.expanded { max-height: 100vh; overflow-y: auto; }
    #admin-sidebar .brand {
        position: relative;
        cursor: pointer;
    }
    #admin-sidebar .brand::after {
        content: '☰';
        position: absolute;
        right: 16px;
        top: 50%;
        transform: translateY(-50%);
        color: #c084fc;
        font-size: 1.2rem;
    }
    #admin-sidebar .nav-section { padding-bottom: 8px; }
    #admin-sidebar nav {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 2px;
    }
    #admin-sidebar nav a { padding: 6px 10px !important; font-size: 0.78rem !important; }
}

@media (max-width: 640px) {
    /* Admin tables especially need horizontal scroll */
    .admin-shell main, .admin-shell .content {
        padding: 12px !important;
    }
}

/* ============================================================
   Mobile Hamburger Navigation (≤ 768px)
   Overrides the responsive.css "stack at bottom" treatment.
   ============================================================ */

/* Hamburger button — hidden on desktop */
#nav-hamburger {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9998;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2d0a4e, #6b21a8);
    border: 2px solid #a855f7;
    color: #f0f0ff;
    font-size: 1.4rem;
    cursor: pointer;
    box-shadow: 0 0 20px rgba(168,85,247,0.5);
    transition: box-shadow 0.2s;
    line-height: 1;
}
#nav-hamburger:hover { box-shadow: 0 0 28px rgba(168,85,247,0.8); }

/* Backdrop overlay */
#nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 9997;
}

@media (max-width: 768px) {

    /* Show hamburger button */
    #nav-hamburger { display: flex; align-items: center; justify-content: center; }

    /* Sidebar: slide-out drawer from right, hidden by default */
    .nav-sub {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 280px !important;
        max-width: 85vw !important;
        height: 100vh !important;
        float: none !important;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 9999 !important;
        background: rgba(8,8,18,0.98) !important;
        border-left: 2px solid rgba(168,85,247,0.4) !important;
        border-radius: 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        transform: translateX(100%);
        transition: transform 0.28s cubic-bezier(0.4,0,0.2,1);
        box-shadow: -8px 0 40px rgba(0,0,0,0.6);
    }

    /* Open state */
    .nav-sub.mobile-open {
        transform: translateX(0);
    }

    /* Show overlay when open */
    #nav-overlay.mobile-open {
        display: block;
    }

    /* Change hamburger to X when open */
    #nav-hamburger.mobile-open::before { content: '\00D7'; font-size: 1.6rem; }
    #nav-hamburger.mobile-open { content: ''; }

    /* Nav list — vertical stack, not grid */
    .nav-sub ul {
        display: block !important;
        padding: 12px 0 80px 0 !important;
        margin: 0 !important;
    }
    .nav-sub ul li {
        border-bottom: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .nav-sub ul li a {
        display: block !important;
        padding: 11px 20px !important;
        font-size: 0.85rem !important;
        text-align: right !important;
        color: #c8c8d8 !important;
        border-bottom: 1px solid rgba(168,85,247,0.08) !important;
    }
    .nav-sub ul li a:hover, .nav-sub ul li a.active {
        background: rgba(168,85,247,0.1) !important;
        color: #c084fc !important;
    }
    .nav-sub ul li.spacer {
        display: block !important;
        height: 1px !important;
        background: rgba(168,85,247,0.2) !important;
        margin: 6px 12px !important;
    }
    .nav-sub .nav-label {
        padding: 12px 20px 4px !important;
        font-size: 0.65rem !important;
    }

    /* Content: full width, no right margin */
    .content {
        width: 100% !important;
        margin-right: 0 !important;
        padding: 0.8em !important;
        box-sizing: border-box !important;
    }

    /* Top nav: scrollable row, no wrap */
    #menu .nav-main ul {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px !important;
        scrollbar-width: none;
    }
    #menu .nav-main ul::-webkit-scrollbar { display: none; }
    #menu .nav-main ul li {
        flex-shrink: 0 !important;
        flex: 0 0 auto !important;
    }
}

/* ============================================================
   Mobile Nav Scroll Arrows
   ============================================================ */
.nav-scroll-wrap {
    position: relative;
    display: flex;
    align-items: stretch;
}
.nav-scroll-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    flex-shrink: 0;
    background: rgba(14,14,28,0.95);
    border: none;
    color: #a855f7;
    font-size: 1.2rem;
    cursor: pointer;
    z-index: 10;
    padding: 0;
    border-bottom: 2px solid transparent;
    transition: color 0.15s;
}
.nav-scroll-btn:hover { color: #c084fc; }
.nav-scroll-btn.nav-scroll-left { border-right: 1px solid rgba(168,85,247,0.2); }
.nav-scroll-btn.nav-scroll-right { border-left: 1px solid rgba(168,85,247,0.2); }
.nav-scroll-btn.hidden { opacity: 0; pointer-events: none; }

/* Gradient fade on edges */
.nav-scroll-wrap::before,
.nav-scroll-wrap::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    width: 24px;
    pointer-events: none;
    z-index: 5;
    transition: opacity 0.2s;
}
.nav-scroll-wrap::before {
    left: 32px;
    background: linear-gradient(to right, rgba(14,14,28,0.9), transparent);
}
.nav-scroll-wrap::after {
    right: 32px;
    background: linear-gradient(to left, rgba(14,14,28,0.9), transparent);
}
.nav-scroll-wrap.at-start::before { opacity: 0; }
.nav-scroll-wrap.at-end::after { opacity: 0; }


/* ============================================================
   Top Nav Hamburger — fixed position, no parent dependency
   ============================================================ */
#nav-top-hamburger {
    display: none;
    position: fixed;
    top: 12px;
    right: 60px;        /* left of the sidebar hamburger which is bottom-right */
    width: 36px;
    height: 36px;
    z-index: 9996;
    background: rgba(107,33,168,0.85);
    border: 1px solid #a855f7;
    border-radius: 4px;
    color: #f0f0ff;
    font-size: 1.1rem;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-shadow: 0 0 12px rgba(168,85,247,0.4);
}
#nav-top-hamburger:hover { background: rgba(107,33,168,1); }

#nav-top-dropdown {
    display: none;
    position: fixed;
    top: 54px;
    right: 8px;
    min-width: 200px;
    background: rgba(8,8,18,0.99);
    border: 1px solid rgba(168,85,247,0.4);
    border-radius: 6px;
    z-index: 9995;
    flex-direction: column;
    box-shadow: 0 8px 24px rgba(0,0,0,0.7);
}
#nav-top-dropdown.open { display: flex; }
#nav-top-dropdown a {
    display: block;
    padding: 11px 18px;
    color: #c8c8d8;
    text-decoration: none;
    font-family: 'Cinzel', serif;
    font-size: 0.82rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(168,85,247,0.1);
}
#nav-top-dropdown a:hover,
#nav-top-dropdown a.active { background: rgba(168,85,247,0.15); color: #c084fc; }
#nav-top-dropdown a:last-child { border-bottom: none; }

@media (max-width: 640px) {
    #nav-top-hamburger { display: flex; }
}