/**
 * FluxCP Default Theme - Responsive Overrides
 * Mobile-first responsive adjustments for the modern layout
 */

/* Ensure tables don't overflow on small screens */
table {
    max-width: 100%;
    overflow-x: auto;
    word-wrap: break-word;
}

/* Sidebar horizontal strip on mobile */
@media (max-width: 900px) {
    .sidebar-menu {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        padding: 8px 0;
    }

    .sidebar-menu .menuitem {
        display: inline-block;
        margin: 2px;
    }

    .sidebar-menu .menuitem a {
        display: inline-block;
        padding: 6px 12px;
        background: #e8f0f8;
        border: 1px solid #c0d8f0;
        border-radius: 4px;
        font-size: 11px;
        white-space: nowrap;
    }

    /* Login box */
    .loginbox {
        width: 100% !important;
        box-sizing: border-box;
    }

    .loginbox table {
        width: 100% !important;
    }

    .loginbox input[type="text"],
    .loginbox input[type="password"] {
        width: 100% !important;
        box-sizing: border-box;
    }
}

/* Pagination responsive */
@media (max-width: 768px) {
    .paging {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        justify-content: center;
    }

    .paging a,
    .paging .current {
        padding: 4px 8px;
        font-size: 11px;
    }
}

/* Very small screens */
@media (max-width: 480px) {
    #copyright,
    #info {
        text-align: center !important;
        padding: 8px !important;
        font-size: 11px;
    }

    #copyright p,
    #info p {
        margin: 4px 0;
    }
}