.site-main {
    min-width: 0;
}

.record-expand,
.record-date-short {
    display: none;
}

/* Inner pages sit inside the main column, not the full viewport. */
.site-main .container {
    width: 100%;
    max-width: 100%;
}

.site-main img,
.site-main video,
.site-main canvas,
.site-main iframe {
    max-width: 100%;
}

.site-main .input-group,
.site-main .form-control,
.site-main .table-responsive {
    max-width: 100%;
    min-width: 0;
}

.site-main .table-responsive {
    width: 100%;
    overflow-x: auto;
}

.site-main p,
.site-main label,
.site-main h1,
.site-main h2,
.site-main h3,
.site-main h4,
.site-main td,
.site-main a {
    overflow-wrap: anywhere;
}

.site-main .btn {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
}

.site-main .input-group-btn .btn {
    max-width: none;
    white-space: nowrap;
}

.site-main .service-search-panel .container {
    padding-left: 0;
    padding-right: 0;
}

@media (min-width: 768px) {
    .site-main .mobile-records th,
    .site-main .mobile-records td[data-field="id"],
    .site-main .mobile-records td[data-field="quantity"],
    .site-main .mobile-records td[data-field="start"],
    .site-main .mobile-records td[data-field="remains"],
    .site-main .mobile-records td[data-field="charge"],
    .site-main .mobile-records td[data-field="date"],
    .site-main .mobile-records td[data-field="status"],
    .site-main .mobile-records td[data-field="action"],
    .site-main .mobile-records td[data-field="refresh"],
    .site-main .mobile-records td[data-field="likes"],
    .site-main .mobile-records td[data-field="posts"],
    .site-main .mobile-records td[data-field="followings"],
    .site-main .mobile-records td[data-field="followers"],
    .site-main .mobile-records td[data-field="stock"] {
        white-space: nowrap;
        overflow-wrap: normal;
    }

    .site-main .mobile-records [data-field="service"],
    .site-main .mobile-records [data-field="link"] {
        min-width: 120px;
    }
}

@media (max-width: 991px) {
    .site-sidebar {
        width: 100% !important;
        float: none;
    }

    .site-main {
        width: 100%;
        clear: both;
    }

    .site-sidebar h3:empty {
        display: none;
    }

    .site-sidebar .nav-stacked {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2px 8px;
        margin-bottom: 16px;
    }

    .site-sidebar .nav-stacked > li {
        min-width: 0;
        margin: 0;
    }

    .site-sidebar .nav-stacked::before,
    .site-sidebar .nav-stacked::after {
        display: none;
    }

    .site-sidebar .nav-link {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 40px;
        margin: 0;
        padding: 8px 6px;
        text-align: center;
        overflow-wrap: anywhere;
    }
}

@media (min-width: 600px) and (max-width: 991px) {
    .site-sidebar .nav-stacked {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .site-main .main {
        width: 100%;
        margin-left: 0;
    }

    .site-main > .container,
    .site-main > .container-fluid {
        padding-left: 0;
        padding-right: 0;
    }

    .site-main select {
        max-width: 100%;
    }

    .order-history .nav-tabs {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .order-history .nav-tabs > li {
        display: block;
        min-width: 0;
    }

    .order-history .nav-tabs::before,
    .order-history .nav-tabs::after {
        display: none;
    }

    .order-history .nav-tabs > li > a {
        margin-right: 0;
        white-space: normal;
    }

    /* The native header appears once; each detail uses a compact grid. */
    .site-main table.mobile-records,
    .site-main .mobile-records thead,
    .site-main .mobile-records tbody {
        display: block;
        width: 100%;
        min-width: 0;
    }

    .site-main .mobile-records thead > tr,
    .site-main .mobile-records tbody > tr {
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        grid-template-areas: var(--record-areas);
        align-items: start;
        gap: 4px 0;
        width: 100%;
        min-width: 0;
        padding: 8px 4px;
        border-bottom: 1px solid #ddd;
    }

    .site-main .mobile-records thead > tr {
        background: #f4f4f4;
        border-bottom-width: 2px;
    }

    .site-main .mobile-records thead > tr > th,
    .site-main .mobile-records tbody > tr > td {
        display: block;
        width: auto;
        min-width: 0;
        max-width: none !important;
        padding: 0 4px;
        border: 0;
        font-size: 12px;
        line-height: 20px;
        white-space: normal;
        text-align: left;
    }

    .site-main .mobile-records thead > tr > th {
        color: #555;
        font-size: 11px;
        line-height: 18px;
    }

    .site-main .mobile-records .record-value {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .site-main .mobile-records .status {
        display: inline-block;
        max-width: 100%;
        padding: 0 2px;
        font-size: 11px;
        line-height: 20px;
        white-space: normal;
    }

    .site-main .mobile-records [data-field="action"] .btn,
    .site-main .mobile-records [data-field="refresh"] .link {
        padding: 0 2px;
        font-size: 11px;
        line-height: 20px;
    }

    .site-main .mobile-records [data-field="date"] {
        font-size: 11px;
        white-space: nowrap;
    }

    .site-main .mobile-records th.mobile-empty,
    .site-main .mobile-records td.mobile-empty {
        display: none;
    }

    .site-main .mobile-records td.mobile-message {
        grid-column: 1 / -1;
    }

    .site-main .mobile-records .record-full-text,
    .site-main .mobile-records .record-date-full {
        display: none;
    }

    .site-main .mobile-records .record-expand,
    .site-main .mobile-records .record-date-short {
        display: block;
    }

    .site-main .mobile-records .record-expand > summary {
        display: list-item;
        min-width: 0;
        overflow-wrap: anywhere;
        cursor: pointer;
        list-style-position: inside;
    }

    .site-main .mobile-records .record-expand:not([open]) > summary {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-records[data-mobile-layout="orders"] {
        --record-areas:
            "id id service service service service service service service service service service"
            "link link link link link link link link link link link link"
            "quantity quantity quantity start start start remains remains remains charge charge charge"
            "date date date date date status status status status status action action";
    }

    .mobile-records[data-mobile-layout="suborders"] {
        --record-areas:
            "id id service service service service service service service service service service"
            "account account account account likes likes likes likes posts posts posts posts"
            "date date date date date date status status status status status status"
            "action action action refresh refresh refresh remark remark remark remark remark remark";
    }

    .mobile-records[data-mobile-layout="oldsuborders"] {
        --record-areas:
            "id id service service service service service service service service service service"
            "account account account account likes likes likes likes posts posts posts posts"
            "date date date date date date status status status status action action"
            "remark remark remark remark remark remark remark remark remark remark remark remark";
    }

    .mobile-records[data-mobile-layout="finance"] {
        --record-areas:
            "id id id id id id type type type charge charge charge"
            "service service service service service service link link link link link link"
            "order order order order order order external external external external external external"
            "date date date date date date status status status status status status";
    }

    .mobile-records[data-mobile-layout="task_list"] {
        --record-areas:
            "id id type type type type status status status result result result"
            "content content content content content content content content content content content content"
            "charge charge charge charge date date date date date date date date";
    }

    .mobile-records[data-mobile-layout="task_result"] {
        --record-areas:
            "account account account account account account name name name name name name"
            "followings followings followings followings followings followings followers followers followers followers followers followers"
            "link link link link link link date date date date date date";
    }

    .mobile-records[data-mobile-layout="ticket"] {
        --record-areas:
            "id id id date date date date date date date date date"
            "title title title title title title title title title title title title";
    }

    .mobile-records[data-mobile-layout="acc_services"] {
        --record-areas:
            "service service service service service service service service service service service service"
            "charge charge charge charge charge charge stock stock stock stock stock stock";
    }

    .mobile-records [data-field="id"] { grid-area: id; }
    .mobile-records [data-field="service"] { grid-area: service; }
    .mobile-records [data-field="link"] { grid-area: link; }
    .mobile-records [data-field="quantity"] { grid-area: quantity; }
    .mobile-records [data-field="start"] { grid-area: start; }
    .mobile-records [data-field="remains"] { grid-area: remains; }
    .mobile-records [data-field="charge"] { grid-area: charge; }
    .mobile-records [data-field="date"] { grid-area: date; }
    .mobile-records [data-field="status"] { grid-area: status; }
    .mobile-records [data-field="action"] { grid-area: action; }
    .mobile-records [data-field="account"] { grid-area: account; }
    .mobile-records [data-field="likes"] { grid-area: likes; }
    .mobile-records [data-field="posts"] { grid-area: posts; }
    .mobile-records [data-field="remark"] { grid-area: remark; }
    .mobile-records [data-field="refresh"] { grid-area: refresh; }
    .mobile-records [data-field="type"] { grid-area: type; }
    .mobile-records [data-field="order"] { grid-area: order; }
    .mobile-records [data-field="external"] { grid-area: external; }
    .mobile-records [data-field="result"] { grid-area: result; }
    .mobile-records [data-field="content"] { grid-area: content; }
    .mobile-records [data-field="followings"] { grid-area: followings; }
    .mobile-records [data-field="followers"] { grid-area: followers; }
    .mobile-records [data-field="name"] { grid-area: name; }
    .mobile-records [data-field="title"] { grid-area: title; }
    .mobile-records [data-field="stock"] { grid-area: stock; }

    .site-main #radio_wrap {
        max-width: 100%;
    }

    .site-main #radio_wrap ul {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 4px;
    }

    .site-main #radio_wrap li {
        display: block;
        width: auto;
        height: auto;
        min-width: 0;
        margin: 0;
        aspect-ratio: 1;
    }

    .site-main #radio_wrap li label,
    .site-main #radio_wrap li img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}