/* ============================================================
   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(var(--pp-rgb,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: var(--pp-lt,#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(var(--pp-rgb,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: var(--pp-lt,#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, var(--pp-bg,#2d0a4e), var(--pp-dk,#6b21a8));
    border: 2px solid var(--pp,#a855f7);
    color: #f0f0ff;
    font-size: 1.4rem;
    cursor: pointer;
    box-shadow: 0 0 20px rgba(var(--pp-rgb,168,85,247),0.5);
    transition: box-shadow 0.2s;
    line-height: 1;
}
#nav-hamburger:hover { box-shadow: 0 0 28px rgba(var(--pp-rgb,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(var(--pp-rgb,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(var(--pp-rgb,168,85,247),0.08) !important;
    }
    .nav-sub ul li a:hover, .nav-sub ul li a.active {
        background: rgba(var(--pp-rgb,168,85,247),0.1) !important;
        color: var(--pp-lt,#c084fc) !important;
    }
    .nav-sub ul li.spacer {
        display: block !important;
        height: 1px !important;
        background: rgba(var(--pp-rgb,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: var(--pp,#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: var(--pp-lt,#c084fc); }
.nav-scroll-btn.nav-scroll-left { border-right: 1px solid rgba(var(--pp-rgb,168,85,247),0.2); }
.nav-scroll-btn.nav-scroll-right { border-left: 1px solid rgba(var(--pp-rgb,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(var(--pp-dk-rgb,107,33,168),0.85);
    border: 1px solid var(--pp,#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(var(--pp-rgb,168,85,247),0.4);
}
#nav-top-hamburger:hover { background: rgba(var(--pp-dk-rgb,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(var(--pp-rgb,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(var(--pp-rgb,168,85,247),0.1);
}
#nav-top-dropdown a:hover,
#nav-top-dropdown a.active { background: rgba(var(--pp-rgb,168,85,247),0.15); color: var(--pp-lt,#c084fc); }
#nav-top-dropdown a:last-child { border-bottom: none; }

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


/* ============================================================
   Admin Dashboard responsive (added 2026-06-11)
   These target inline-styled grids that the generic .grid-* rules
   can't reach. Desktop is UNAFFECTED — rules only apply <= 640px.
   ============================================================ */
@media (max-width: 640px) {
    /* Stat cards: 4-across -> 2-across (override inline repeat(4,1fr)) */
    .stat-grid { grid-template-columns: 1fr 1fr !important; gap: 0.6em !important; }
    /* Content + Quick Links: side-by-side -> stacked */
    .admin-content-grid { grid-template-columns: 1fr !important; }
    /* Tab strip: wrap-to-multiple-rows -> single horizontal scroll strip */
    .dash-tabs { flex-wrap: nowrap !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
    .dash-tabs::-webkit-scrollbar { height: 3px; }
    .dash-tabs::-webkit-scrollbar-thumb { background: rgba(var(--pp-rgb,168,85,247),0.4); border-radius: 3px; }
    .dash-tab { white-space: nowrap; }
}


/* Missions: shrink the per-mission Edit button on phones (was 1.44rem, bigger
   than the heading itself). Desktop unaffected. Added 2026-06-11. */
@media (max-width: 640px) {
    .mission-edit-btn { font-size: 0.8rem !important; padding: 2px 10px !important; }
}


/* Top nav strip: right-edge fade hint that it scrolls sideways (phones).
   pointer-events:none so taps pass through. Added 2026-06-11. */
@media (max-width: 640px) {
    #menu .nav-main { position: relative; }
    #menu .nav-main::after {
        content: '';
        position: absolute;
        top: 0; right: 0; bottom: 0;
        width: 30px;
        pointer-events: none;
        background: linear-gradient(to right, rgba(10,10,18,0), rgba(10,10,18,0.92));
    }
}


/* ============================================================
   Compact masthead on phones (added 2026-06-11) - first pass.
   1) single hamburger (drop redundant top-nav dropdown)
   2) show the WHOLE banner band (ship + name), not a cropped slice
   3) legibility for Logout + nav labels over the image
   All reversible (CSS only). Desktop unaffected.
   ============================================================ */
@media (max-width: 640px) {
    #nav-top-hamburger, #nav-top-dropdown { display: none !important; }

    #upper-body {
        min-height: 150px !important;
        background-size: 100% auto !important;
        background-repeat: no-repeat !important;
        background-position: center center !important;
    }
    .signin-container { text-shadow: 0 1px 4px #000 !important; }

    #menu .nav-main {
        background: linear-gradient(to bottom, rgba(8,8,18,0), rgba(8,8,18,0.9)) !important;
    }
}


/* Player dashboard stat bar: it is display:flex; height:80px; overflow:hidden on
   desktop, so extra items get clipped on phones. Wrap to 2-up instead.
   Added 2026-06-11. Desktop unaffected. */
@media (max-width: 640px) {
    .stat-bar { flex-wrap: wrap !important; height: auto !important; overflow: visible !important; }
    .stat-item {
        width: 50% !important;
        flex: 1 1 50% !important;
        box-sizing: border-box !important;
        padding: 12px 4px !important;
        border-bottom: 1px solid rgba(var(--pp-rgb,168,85,247),0.15) !important;
    }
    .stat-item.stat-mission { width: 100% !important; flex: 1 1 100% !important; }
}


/* Login form: it is a layout <table> (email/password side-by-side). On phones
   the generic table->scroll rule pushed the password field off-screen. Stack it.
   Added 2026-06-11. Desktop unaffected. */
@media (max-width: 640px) {
    table.login-table, table.login-table tbody, table.login-table tr, table.login-table td {
        display: block !important;
        width: 100% !important;
        overflow: visible !important;
        white-space: normal !important;
        text-align: left !important;
        box-sizing: border-box !important;
    }
    table.login-table td { padding: 8px 0 !important; }
    table.login-table input[type=email], table.login-table input[type=password] {
        width: 100% !important;
        display: block;
        margin-top: 5px;
    }
}


/* Apply form: the two character-name fields are a 2-col grid; stack on phones.
   Added 2026-06-11. Desktop unaffected. */
@media (max-width: 640px) {
    .apply-name-grid { grid-template-columns: 1fr !important; }
}


/* Header auth buttons (Logout, or Apply+Login): keep at top, push to far right
   on phones (responsive.css centered them). Added 2026-06-11. */
@media (max-width: 768px) {
    .signin-container {
        display: flex !important;
        justify-content: flex-end !important;
        align-items: center !important;
        position: static !important;
        width: 100% !important;
        height: auto !important;
        padding: 8px 10px 4px 0 !important;
        margin: 0 !important;
        text-align: right !important;
    }
    .signin-container .signin { float: none !important; display: inline-block !important; margin: 0 0 0 6px !important; }
}


/* Apply form (application/form.blade.php): roomier multi-column rows on phones.
   3-up name row -> stacked; 4-up physical details -> 2-up. 2-up pairs left as-is.
   Added 2026-06-11. Desktop unaffected. */
@media (max-width: 640px) {
    .form-grid-3 { grid-template-columns: 1fr !important; }
    .form-grid-4 { grid-template-columns: 1fr 1fr !important; }
}


/* ROOT FIX: app.blade.php sets #upper-body{margin-right:196px} for the desktop
   sidebar; never reset on mobile, so the banner+buttons were squished into the
   left ~half. Reset it so the masthead is full width on phones/tablets.
   Added 2026-06-11. */
@media (max-width: 768px) {
    #upper-body { margin-right: 0 !important; }
}