/* ──────────────────────────────────────────────────────────────
   JBlock SourceBans - Responsive Fixes
   Loaded AFTER main.css. Only touches layout/sizing, not colors.
   Safe to remove: delete the <link> line in core/header.tpl.
   ────────────────────────────────────────────────────────────── */

/* ── 1. Fluid containers (was: fixed 1100px) ─────────────────── */
#admin-top-bar-inner,
#header,
#wrapper,
#container,
#main,
#content-wrapper {
    width: 100% !important;
    max-width: 1100px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 16px;
    padding-right: 16px;
}

/* Never let anything push the page wider than the viewport */
html, body { max-width: 100%; overflow-x: hidden; }

/* ── 2. Admin top bar: wrap instead of overflowing ───────────── */
#admin-top-bar-inner,
#admin-top-bar-inner > div {
    flex-wrap: wrap !important;
    height: auto !important;
    min-height: 32px;
}
#admin-top-bar-inner a,
#admin-top-bar .nav_link {
    line-height: 32px !important;
    white-space: nowrap;
}

/* ── 3. Main nav: wrap, don't clip ───────────────────────────── */
#nav, #navigation, #tabs, #cpanel {
    flex-wrap: wrap !important;
    height: auto !important;
    overflow: visible !important;
}
#tabs ul, #cpanel ul, #navigation ul {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding-left: 0;
    margin: 0;
}
#tabs ul li, #cpanel ul li, #navigation ul li {
    float: none !important;
}

/* ── 4. Ban list header: 50% + 60% = 110% overflow. Fixed. ──── */
#banlisttitle {
    width: auto !important;
    float: none !important;
    flex: 1 1 auto;
    min-width: 0;
}
#banlist-nav {
    width: auto !important;
    float: none !important;
    flex: 0 1 auto;
    text-align: right;
}
/* Wrap them in a flex row so they share space properly */
#banlisttitle, #banlist-nav { display: inline-block; vertical-align: middle; }
#banlist { width: 100% !important; float: none !important; clear: both; }

/* ── 5. Tables: scroll horizontally rather than blow out ─────── */
table.listtable, table.listtable2, table.listtable3 {
    width: 100% !important;
    min-width: 0;
}
/* Wrapper added by JS below, or apply to common table parents */
.table-scroll,
#banlist,
#content {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
/* Keep long steamids/reasons from forcing width */
table.listtable td, table.listtable2 td, table.listtable3 td {
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* ── 6. Fixed-width panels become fluid ──────────────────────── */
#permis-drop,
.permis-container,
.front-module,
#singleserver,
#singleoverview,
#login,
#lostpassword,
.dialog-holder,
.tool-tip,
.perm-tip {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
}
#login, #lostpassword { max-width: 380px !important; }
.dialog-holder { max-width: 500px !important; }
.tool-tip { max-width: 220px !important; }
.perm-tip  { max-width: 260px !important; }

/* Two-column areas: side by side when there's room, stacked when not */
#singleserver, #singleoverview { display: inline-block; vertical-align: top; }
@media (min-width: 900px) {
    #singleserver   { width: 58% !important; }
    #singleoverview { width: 40% !important; }
}
.front-module { display: inline-block; vertical-align: top; }
@media (min-width: 900px) {
    .front-module { width: 48% !important; }
}

/* ── 7. Message boxes: the position:fixed margin bug ─────────── */
.msgbox-border {
    position: fixed !important;
    top: 90px !important;
    left: 50% !important;
    transform: translateX(-50%);
    margin: 0 !important;
    width: auto !important;
    max-width: min(560px, calc(100vw - 32px)) !important;
    z-index: 12000;
}
#msg-red, #msg-green, #msg-blue {
    width: 100% !important;
    max-width: 100% !important;
}

/* ── 8. Admin panel: menu + content stack on narrow screens ──── */
#admin-page-menu,
#admin-page-content {
    float: none !important;
    width: 100% !important;
}
@media (min-width: 900px) {
    #admin-page-menu    { float: left !important;  width: 22% !important; }
    #admin-page-content { float: right !important; width: 76% !important; }
}

/* ── 9. Header: logo + search stack cleanly ──────────────────── */
#header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
#head-logo img { max-width: 100%; height: auto; }
#search {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}
#search form { display: flex; gap: 6px; }
.searchbox { max-width: 100%; min-width: 0; }

@media (max-width: 700px) {
    #header { justify-content: center; text-align: center; }
    #search { justify-content: center; width: 100%; }
    #search form { flex: 1 1 100%; }
    .searchbox { flex: 1 1 auto; width: auto !important; }
}

/* ── 10. Breakpoints ─────────────────────────────────────────── */
@media (max-width: 1140px) {
    #admin-top-bar-inner, #header { padding-left: 12px; padding-right: 12px; }
}

@media (max-width: 900px) {
    body { font-size: 14px; }
    #permis-drop { padding: 10px !important; }
    .permis-container ul li a { width: auto !important; min-width: 88px; }
}

@media (max-width: 600px) {
    body { font-size: 13px; }
    #admin-top-bar-inner a,
    #admin-top-bar .nav_link {
        padding: 0 8px !important;
        font-size: 0.55rem !important;
        letter-spacing: 2px !important;
    }
    table.listtable, table.listtable2, table.listtable3 { font-size: 12px; }
    #cpanel ul li a { padding: 6px 10px !important; font-size: 0.58rem !important; }
    .msgbox-border { top: 70px !important; }
}

/* ── 11. Buttons never get clipped ───────────────────────────── */
.button, .login, input[type="submit"], input[type="button"] {
    max-width: 100%;
    white-space: normal;
}

/* ══════════════════════════════════════════════════════════════
   ROUND 2 FIXES
   ══════════════════════════════════════════════════════════════ */

/* ── A. Header stacking: stop search from colliding with nav ─── */
#header {
    position: relative;
    z-index: 2;
    padding-top: 12px;
    padding-bottom: 12px;
}
#search { position: static !important; float: none !important; }
#search form { align-items: center; }

/* The nav row sits below the header, never overlapped */
#navigation, #tabs, #nav {
    position: relative;
    z-index: 1;
    clear: both;
}

@media (max-width: 1000px) {
    #header {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }
    #head-logo { order: 1; }
    #search    { order: 2; width: 100%; justify-content: center; }
    #search form { flex: 0 1 auto; }
    .searchbox { width: 180px !important; }
}

@media (max-width: 620px) {
    #search { flex-direction: column; align-items: stretch; }
    #search form { flex: 1 1 100%; }
    .searchbox { width: 100% !important; }
}

/* ── B. Map / hostname columns: wrap on words, not letters ───── */
table.listtable td, table.listtable2 td, table.listtable3 td {
    overflow-wrap: normal;          /* was: anywhere - caused jb_m/ario/worl */
    word-break: normal;
}
/* Only break truly unbreakable strings (long steamids), and only as a last resort */
table.listtable td, table.listtable2 td {
    word-break: break-word;
}
/* Give the map column room so names like jb_marioworld_rsc_v3f fit */
table.listtable td:last-child,
table.listtable2 td:last-child {
    white-space: nowrap;
    min-width: 150px;
}

/* ── C. Use the full window on wide screens ──────────────────── */
@media (min-width: 1300px) {
    #admin-top-bar-inner,
    #header,
    #wrapper,
    #container,
    #main,
    #content-wrapper {
        max-width: 1400px !important;
    }
}
@media (min-width: 1700px) {
    #admin-top-bar-inner,
    #header,
    #wrapper,
    #container,
    #main,
    #content-wrapper {
        max-width: 1600px !important;
    }
}

/* ── D. Nav row spacing so links breathe ─────────────────────── */
#navigation, #tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    padding: 6px 0;
    height: auto !important;
    min-height: 0;
}

/* ══════════════════════════════════════════════════════════════
   ROUND 3 - stop horizontal overflow clipping the page
   ══════════════════════════════════════════════════════════════ */

/* Don't hide overflow on body: it clips content instead of wrapping.
   Let the page be honest about its width, then fix the real culprits. */
html, body {
    overflow-x: visible !important;
    max-width: none !important;
    width: auto !important;
}

/* Nothing may exceed the viewport */
* { max-width: 100%; }

/* Tables are the usual offender: let THEM scroll, not the page */
table.listtable, table.listtable2, table.listtable3 {
    display: block;
    overflow-x: auto;
    white-space: normal;
    -webkit-overflow-scrolling: touch;
}
/* Keep table semantics while scrolling */
table.listtable tbody, table.listtable2 tbody, table.listtable3 tbody,
table.listtable thead, table.listtable2 thead, table.listtable3 thead {
    display: table;
    width: 100%;
    table-layout: auto;
}

/* ── NAV: force wrapping, never clip ─────────────────────────── */
#navigation, #tabs, #nav, #cpanel,
#navigation ul, #tabs ul, #cpanel ul {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    white-space: normal !important;
    row-gap: 2px;
}
#navigation li, #tabs li, #cpanel li,
#navigation a, #tabs a {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* Logout button: keep it in the flow so it wraps with the rest */
#navigation .logout, #tabs .logout,
a[href*="logout"] {
    margin-left: auto;
}
@media (max-width: 1000px) {
    #navigation .logout, #tabs .logout, a[href*="logout"] {
        margin-left: 0;
    }
}

/* ── Header: fully stacked and centered under 1100px ─────────── */
@media (max-width: 1100px) {
    #header {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center;
    }
    #search {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
    }
    #search form { flex: 0 1 auto; max-width: 100%; }
    .searchbox { width: 160px !important; max-width: 100%; }
}

@media (max-width: 700px) {
    #search form { flex: 1 1 100%; justify-content: center; }
    .searchbox { width: 100% !important; }
}

/* ── Content containers must not exceed viewport ─────────────── */
#content, #main, #wrapper, #container, #content-wrapper,
#banlist, #admin-page-content, .front-module {
    max-width: 100% !important;
    box-sizing: border-box;
}

/* ══════════════════════════════════════════════════════════════
   ROUND 4 - navbar (works with the patched navbar.tpl classes)
   ══════════════════════════════════════════════════════════════ */

#tabsWrapper { width: 100%; max-width: 100%; overflow: visible; }

.jb-nav-outer { flex-wrap: wrap !important; }
.jb-nav-scroll { overflow: visible !important; min-width: 0 !important; }
.jb-nav-row {
    flex-wrap: wrap !important;
    min-width: 0 !important;
    row-gap: 0;
}
.jb-nav-row a { line-height: 44px !important; }

/* Login/logout: right-aligned when there's room, full row when narrow */
.jb-nav-outer > div:last-child { margin-left: auto; }

@media (max-width: 900px) {
    .jb-nav-outer > div:last-child {
        margin-left: 0;
        width: 100%;
        justify-content: center;
        height: auto !important;
        padding: 8px 10px !important;
        border-top: 1px solid var(--border2);
    }
    .jb-nav-row { justify-content: center; padding-left: 0 !important; }
    .jb-nav-row a { padding: 0 9px !important; font-size: 0.92rem !important; line-height: 38px !important; }
}

@media (max-width: 600px) {
    .jb-nav-row a { padding: 0 7px !important; font-size: 0.85rem !important; line-height: 34px !important; }
}