/* 
 * ARBkoora Mobile Stylesheet
 * This file contains overrides specifically for mobile devices.
 * It will not affect the desktop layout.
 */

/* Hide mobile-specific elements on desktop by default */
.mobile-only-btn {
    display: none;
}

/* Force forum icon to be same size as homepage */
a[href^="index.php?mode=finfo"] img {
    width: 28px !important;
    height: 28px !important;
    border-radius: 4px;
}

/* Remove small gaps in the height of login fields */
form[action="index.php?method=login"] {
    margin: 0 !important;
    padding: 0 !important;
}

form[action="index.php?method=login"] input[type="text"],
form[action="index.php?method=login"] input[type="password"] {
    margin: 0 !important;
    padding: 2px 4px !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
}

@media screen and (max-width: 768px) {
    
    /* 1. Hide non-essential columns marked with hide-mobile */
    .hide-mobile {
        display: none !important;
    }

    /* 2. Ensure main layout tables don't exceed screen width */
    table {
        max-width: 100% !important;
    }

    /* 3. Adjust forum row to stack cells if needed */
    td.f1 {
        box-sizing: border-box;
    }

    /* 4. Category headers adjustments */
    td.cat {
        font-size: 14px !important;
        padding: 5px !important;
    }

    /* 5. Make the main layout container responsive */
    body {
        margin: 0;
        padding: 0;
    }

    table[width="95%"], table[width="100%"], table[width="98%"] {
        width: 100% !important;
    }

    /* 6. Last post column should align nicely */
    td.f2ts {
        white-space: normal !important;
        word-wrap: break-word;
    }

    /* 7. Mobile Menu Button & Dropdown Styles */
    .mobile-only-btn {
        display: block !important;
        background-color: #2c3e50;
        color: #fff;
        border: none;
        padding: 8px 15px;
        border-radius: 5px;
        font-weight: bold;
        font-size: 14px;
        cursor: pointer;
    }

    table.menubar tr td.stats_menu,
    tr.mobile-collapsible {
        display: none !important;
    }

    /* Links Section (4 items per row) */
    table#topHolderTable.show-mobile-menu table.menubar {
        background-color: #f8f9fa;
        border-radius: 8px;
        margin-top: 10px;
        padding: 10px 5px;
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    table#topHolderTable.show-mobile-menu table.menubar tr {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 100%;
    }

    table#topHolderTable.show-mobile-menu table.menubar tr td.stats_menu {
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 25% !important; /* 4 items per row */
        padding: 10px 2px !important;
        border-bottom: none; /* Removed borders for a cleaner grid */
        text-align: center !important;
        box-sizing: border-box;
        font-size: 11px;
    }

    table#topHolderTable.show-mobile-menu table.menubar tr td.stats_menu br {
        display: block; /* Restore line break between icon and text */
        margin-bottom: 5px;
    }

    table#topHolderTable.show-mobile-menu table.menubar tr td.stats_menu img {
        margin-left: 0;
        margin-bottom: 5px;
        width: 28px;
        height: 28px;
    }

    /* User & Stats Cards */
    table#topHolderTable.show-mobile-menu tr.mobile-collapsible {
        display: flex !important;
        flex-direction: column;
        width: 100%;
        gap: 8px; /* reduced gap */
        margin-top: 10px;
    }

    /* Flatten main structure so we can order */
    table#topHolderTable.show-mobile-menu tr.mobile-collapsible > td,
    table#topHolderTable.show-mobile-menu tr.mobile-collapsible > td > table,
    table#topHolderTable.show-mobile-menu tr.mobile-collapsible > td > table > tbody,
    table#topHolderTable.show-mobile-menu tr.mobile-collapsible > td > table > tbody > tr,
    table#topHolderTable.show-mobile-menu tr.mobile-collapsible > td > table > tr {
        display: contents !important;
    }

    /* 1. Userbar wrapper */
    table#topHolderTable.show-mobile-menu tr.mobile-collapsible > td > table > tbody > tr > td:nth-child(1),
    table#topHolderTable.show-mobile-menu tr.mobile-collapsible > td > table > tr > td:nth-child(1) {
        order: 1;
        display: block;
        width: 100% !important;
    }
    table#topHolderTable.show-mobile-menu table.userbar {
        background-color: #fff;
        border: 1px solid #ddd;
        border-radius: 5px;
        padding: 5px 10px; /* reduced padding */
        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
        display: block;
        width: 100% !important;
        box-sizing: border-box;
    }
    table#topHolderTable.show-mobile-menu table.userbar tr {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        border-bottom: 1px solid #f0f0f0;
        padding: 5px 0; /* reduced padding */
    }
    table#topHolderTable.show-mobile-menu table.userbar tr:last-child {
        border-bottom: none;
    }
    table#topHolderTable.show-mobile-menu table.userbar td {
        display: block;
        width: auto !important;
        padding: 0;
        text-align: right !important;
        font-size: 13px; /* smaller font */
    }

    /* 2. Flatten Chatusers Wrapper TD */
    table#topHolderTable.show-mobile-menu tr.mobile-collapsible > td > table > tbody > tr > td:nth-child(2),
    table#topHolderTable.show-mobile-menu tr.mobile-collapsible > td > table > tr > td:nth-child(2),
    table#topHolderTable.show-mobile-menu table.chatusers,
    table#topHolderTable.show-mobile-menu table.chatusers > tbody,
    table#topHolderTable.show-mobile-menu table.chatusers > tbody > tr,
    table#topHolderTable.show-mobile-menu table.chatusers > tr {
        display: contents !important;
    }

    /* Matches (صالات نقاش) -> order 2 */
    table#topHolderTable.show-mobile-menu table.chatusers td:nth-child(2) {
        order: 2;
        display: flex !important;
        flex-direction: column;
        align-items: flex-start;
        width: 100% !important;
        background: #f9f9f9;
        padding: 8px !important;
        border-radius: 5px;
        box-sizing: border-box;
        border: 1px solid #eee;
    }

    /* 3. Admin Wrapper (Mod options) -> order 3 */
    table#topHolderTable.show-mobile-menu tr.mobile-collapsible > td > table > tbody > tr > td:nth-child(3),
    table#topHolderTable.show-mobile-menu tr.mobile-collapsible > td > table > tr > td:nth-child(3) {
        order: 3;
        display: block;
        width: 100% !important;
        background-color: #fff;
        border: 1px solid #ddd;
        border-radius: 5px;
        padding: 8px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
        box-sizing: border-box;
    }
    table#topHolderTable.show-mobile-menu tr.mobile-collapsible > td > table > tbody > tr > td:nth-child(3) table,
    table#topHolderTable.show-mobile-menu tr.mobile-collapsible > td > table > tr > td:nth-child(3) table {
        width: 100% !important;
        display: block;
    }

    /* Online (المتواجدين) -> order 4 */
    table#topHolderTable.show-mobile-menu table.chatusers td:nth-child(1) {
        order: 4;
        display: flex !important;
        flex-direction: column;
        align-items: flex-start;
        width: 100% !important;
        background: #f9f9f9;
        padding: 8px !important;
        border-radius: 5px;
        box-sizing: border-box;
        border: 1px solid #eee;
    }

    /* Forum Online (في المنتدى) -> order 5 */
    table#topHolderTable.show-mobile-menu table.chatusers td:nth-child(3) {
        order: 5;
        display: flex !important;
        flex-direction: column;
        align-items: flex-start;
        width: 100% !important;
        background: #f9f9f9;
        padding: 8px !important;
        border-radius: 5px;
        box-sizing: border-box;
        border: 1px solid #eee;
    }

    table#topHolderTable.show-mobile-menu table.chatusers td br {
        display: none;
    }

    table#topHolderTable.show-mobile-menu table.chatusers td a {
        display: inline-block;
        margin-bottom: 5px;
        font-size: 13px;
    }

    /* Home Dropdowns */
    table#homeDropdowns {
        display: none !important;
    }

    table#homeDropdowns.show-mobile-menu {
        display: block !important;
        width: 100%;
        background-color: transparent;
        padding: 0;
        margin-top: 8px; /* tight spacing */
    }

    table#homeDropdowns.show-mobile-menu tr {
        display: flex;
        flex-direction: column;
        gap: 5px;
    }

    table#homeDropdowns.show-mobile-menu td {
        display: none !important; /* Hide spacers */
    }

    table#homeDropdowns.show-mobile-menu form td {
        display: block !important;
        width: 100% !important;
        text-align: right !important;
    }

    table#homeDropdowns.show-mobile-menu select {
        width: 100% !important;
        padding: 6px;
        border-radius: 4px;
        border: 1px solid #ccc;
        font-size: 12px;
        background-color: #fff;
        margin-bottom: 2px;
    }

    /* Hide extra columns in the classic forum topics list */
    form[action^="index.php?mode=moderate"] table tr td.cat:not(:first-child),
    form[action^="index.php?mode=moderate"] table tr td.list_small {
        display: none !important;
    }

    /* Clean up the forum topics page and topic page (hide header, tools, stats, and mod options) */
    body.page-mode-f table.mods, body.page-mode-t table.mods,
    body.page-mode-f td.stats_menu, body.page-mode-t td.stats_menu,
    body.page-mode-f td.main, body.page-mode-t td.main,
    body.page-mode-f form[name="mod_op"], body.page-mode-t form[name="mod_op"],
    body.page-mode-f form[name="reload_frm"], body.page-mode-t form[name="reload_frm"],
    body.page-mode-f select.forumSelect, body.page-mode-t select.forumSelect,
    body.page-mode-f select.insidetitle, body.page-mode-t select.insidetitle,
    body.page-mode-f input[name^="sub"], body.page-mode-t input[name^="sub"],
    body.page-mode-f input[type="button"], body.page-mode-t input[type="button"],
    body.page-mode-f td[bgcolor="white"][colspan="8"], body.page-mode-t td[bgcolor="white"][colspan="8"],
    body.page-mode-t td[bgcolor="gray"] {
        display: none !important;
    }

    /* Hide folder icons next to topic titles */
    body.page-mode-t img[src*="folders/folder"],
    body.page-mode-f img[src*="folders/folder"] {
        display: none !important;
    }

    /* Stack author info and post content vertically for responsive reading safely */
    body.page-mode-t table.grid table[cellSpacing="1"][cellPadding="4"],
    body.page-mode-t table.grid table[cellSpacing="1"][cellPadding="4"] > tbody,
    body.page-mode-t table.grid table[cellSpacing="1"][cellPadding="4"] > tbody > tr,
    body.page-mode-t table.grid table[cellSpacing="1"][cellPadding="4"] > tr {
        display: block !important;
        width: 100% !important;
    }

    body.page-mode-t table.grid td[width="12%"][vAlign="top"] {
        display: block !important;
        width: 100% !important;
        border-bottom: 2px solid #ececec;
        padding-bottom: 10px;
        text-align: center;
    }
    
    body.page-mode-t table.grid td[width="100%"][vAlign="top"] {
        display: block !important;
        width: 100% !important;
        padding-top: 10px;
        box-sizing: border-box;
        overflow-x: auto;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        white-space: normal !important;
    }

    body.page-mode-t table.grid td[width="100%"][vAlign="top"] img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Force all structural tables to respect mobile screen width and prevent horizontal scrolling */
    body.page-mode-t,
    body.page-mode-t table, 
    body.page-mode-t tbody, 
    body.page-mode-t td, 
    body.page-mode-t th {
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }

    body.page-mode-t table.optionsbar, 
    body.page-mode-t table.grid,
    body.page-mode-t table.topholder {
        width: 100% !important;
        table-layout: fixed !important;
    }
}