/**
 * 窄屏体验。全部规则都在 max-width: 767.98px 里，桌面不读这些声明。
 */
@media (max-width: 767.98px) {
    .cpc-nav-toggle {
        width: auto;
        padding: 0 0.55rem;
        gap: 0.35rem;
    }

    .cpc-nav-toggle::after {
        content: "菜单";
        color: #fff;
        font-size: 0.8rem;
        line-height: 1;
        letter-spacing: 0.02em;
    }

    #sidebar_div.sidebar.show {
        flex-wrap: nowrap;
    }

    #sidebar_div.sidebar.show > #menu_container,
    #sidebar_div.sidebar.show > #hidden_user_panel,
    #sidebar_div.sidebar.show > #user_panel {
        width: 100%;
        max-width: 100%;
        flex: 0 0 auto;
        align-self: stretch;
        min-width: 0;
    }

    #sidebar_div.sidebar.show > #menu_container {
        order: 1;
    }

    #sidebar_div.sidebar.show > #hidden_user_panel {
        order: 8;
        margin-top: 0.35rem;
    }

    #sidebar_div.sidebar.show > #user_panel {
        order: 9;
    }

    #sidebar_div .login_div,
    #sidebar_div .logout_div {
        margin: 0.35rem 0.5rem 0.6rem;
        padding: 0.45rem 0.5rem;
        max-width: 100%;
        box-sizing: border-box;
    }

    #sidebar_div .login_div .d-flex {
        width: 100%;
        min-width: 0;
    }

    #sidebar_div .login_div .d-flex > .flex-fill,
    #sidebar_div .login_div .d-flex > a.flex-fill {
        flex: 1 1 0;
        min-width: 0;
    }

    #sidebar_div .login_div .form-control {
        font-size: 16px;
    }

    #sidebar_div .nav-link {
        padding: 0.7rem 0.9rem;
        margin: 0.05rem 0.35rem;
    }

    main {
        padding: 0.75rem 0.65rem 1.5rem;
        max-width: 100%;
        overflow-x: hidden;
    }

    main .bootstrap-table,
    main .fixed-table-body {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .page-title-container .page-title {
        font-size: 1.35rem;
    }

    .page-title-container.faq-title-row .page-title-actions,
    .faq-lang-switcher {
        width: 100%;
        justify-content: flex-start;
    }

    .faq-lang-switcher {
        flex-wrap: nowrap;
        align-items: center;
    }

    .faq-lang-switcher .btn-group {
        flex-direction: row;
        width: auto;
        flex: 1 1 auto;
        min-width: 0;
    }

    .faq-lang-switcher .btn-group .btn {
        width: auto;
        flex: 1 1 0;
        margin-bottom: 0;
    }

    .pagination {
        flex-wrap: wrap;
        row-gap: 0.35rem;
    }

    .bootstrap-table .fixed-table-toolbar .bs-bars,
    .bootstrap-table .fixed-table-toolbar .bs-bars.float-start,
    .bootstrap-table .fixed-table-toolbar .bs-bars.float-left,
    .bootstrap-table .fixed-table-toolbar .bs-bars.pull-left {
        float: none;
        width: 100%;
        max-width: 100%;
    }

    .table-toolbar .d-flex {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-end;
        gap: 0.45rem 0.5rem;
    }

    .table-toolbar .d-flex > .toolbar-btn {
        flex: 0 0 auto;
        align-self: flex-end;
    }

    .table-toolbar .toolbar-group {
        flex: 1 1 9rem;
        min-width: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0.15rem;
    }

    .table-toolbar .toolbar-group:has(input) {
        flex-basis: 100%;
    }

    .table-toolbar .toolbar-label-inline {
        font-size: 0.75rem;
        line-height: 1.15;
    }

    #contest_list_table.contest-list-public thead,
    .bootstrap-table:has(#contest_list_table.contest-list-public) .fixed-table-header {
        display: none !important;
    }

    #contest_list_table.contest-list-public,
    #contest_list_table.contest-list-public tbody {
        display: block;
        width: 100%;
    }

    #contest_list_table.contest-list-public tr {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas:
            "title title title"
            "id status type"
            "start start end";
        gap: 0.2rem 0.5rem;
        align-items: center;
        margin: 0 0 0.5rem;
        padding: 0.65rem 0.75rem;
        border: 1px solid rgba(15, 23, 42, 0.08);
        border-radius: 8px;
        background: #fff;
    }

    #contest_list_table.contest-list-public td {
        display: block;
        width: auto !important;
        max-width: none;
        border: 0;
        padding: 0;
        text-align: left !important;
        overflow: visible;
        white-space: normal;
    }

    #contest_list_table.contest-list-public td:nth-child(1) { grid-area: id; color: #64748b; font-size: 0.8rem; }
    #contest_list_table.contest-list-public td:nth-child(2) { grid-area: title; }
    #contest_list_table.contest-list-public td:nth-child(3) { grid-area: status; }
    #contest_list_table.contest-list-public td:nth-child(4) { grid-area: start; font-size: 0.78rem; }
    #contest_list_table.contest-list-public td:nth-child(5) { grid-area: end; font-size: 0.78rem; justify-self: end; text-align: right !important; }
    #contest_list_table.contest-list-public td:nth-child(6) { grid-area: type; justify-self: end; }

    #contest_list_table.contest-list-public td:has(> .csg-ellipsis-title) {
        max-width: none;
        overflow: visible;
    }

    #contest_list_table.contest-list-public .csg-ellipsis-title {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        white-space: normal;
        overflow: hidden;
        line-height: 1.35;
        font-weight: 600;
    }

    #contest_list_table.contest-list-public td:nth-child(4) > div,
    #contest_list_table.contest-list-public td:nth-child(5) > div {
        display: flex;
        flex-wrap: wrap;
        gap: 0.1rem 0.3rem;
        align-items: baseline;
    }

    #contest_list_table.contest-list-public td:nth-child(5) > div {
        justify-content: flex-end;
    }

    #contest_list_table.contest-list-public td:nth-child(6) .en-text {
        display: none !important;
    }
}