/* Shared small-screen rules for the admin, member, public and quiz layouts. */
.sm-admin-shell { overflow-x: hidden; }
.sm-admin-shell .main-body,
.sm-admin-shell .white-wrap,
.sm-admin-shell .row > [class*="col"],
.sm-member-shell .sm-member-main,
.sm-member-shell .sm-member-main .flex > *,
.sm-member-shell .sm-member-main .grid > *,
.sm-quiz-shell .contentBox {
    min-width: 0;
}
.sm-scroll-table {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.sm-scroll-table:focus-visible { outline: 2px solid #5b93d3; outline-offset: 2px; }
.sm-admin-shell .main-body > main { padding-top: 84px !important; }
.sm-admin-shell .breadcrumb-wrap { margin-top: 0; }
.sm-admin-shell .main-body .form-control,
.sm-member-shell main .form-control { max-width: 100%; min-width: 0; }
/* Keep ordinary form controls at a consistent tap height across each dashboard. */
.sm-admin-shell .main-body input.form-control:not([type="checkbox"]):not([type="radio"]),
.sm-admin-shell .main-body select.form-control:not([size]):not([multiple]),
.sm-admin-shell .main-body .custom-select,
.sm-admin-shell .main-body .dataTables_filter input {
    min-height: 44px;
    border-radius: 10px;
}
.sm-admin-shell .main-body select.form-control:not([size]):not([multiple]) { height: 44px; }
.sm-admin-shell .main-body textarea.form-control { min-height: 96px; border-radius: 10px; }
/* Settings controls wrap before the fixed admin sidebar makes a row too narrow. */
.sm-admin-shell .sm-withdrawal-settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
    gap: 16px;
}
.sm-admin-shell .sm-withdrawal-setting-field { min-width: 0; }
.sm-admin-shell .sm-withdrawal-setting-field label { display: block; margin-bottom: 6px; }
.sm-admin-shell .sm-withdrawal-setting-action { align-self: end; }
.sm-member-shell .sm-member-main form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="file"]):not([type="submit"]),
.sm-member-shell .sm-member-main form select { min-height: 44px; max-width: 100%; }
.sm-member-shell .sm-member-main form textarea { max-width: 100%; }
.sm-member-shell .sm-member-main select.form-control + .nice-select { min-height: 44px; width: 100%; }
.sm-admin-shell .main-body .alert,
.sm-admin-shell .main-body label,
.sm-admin-shell .main-body .page-title,
.sm-member-shell .sm-member-main p,
.sm-member-shell .sm-member-main h1,
.sm-member-shell .sm-member-main h2,
.sm-member-shell .sm-game-terms-copy { overflow-wrap: anywhere; }
.sm-admin-shell .main-body img,
.sm-member-shell main video,
.sm-member-shell main audio,
.sm-public-shell main video,
.sm-member-shell main iframe { max-width: 100%; }
.sm-admin-shell .pagination { flex-wrap: wrap; gap: 4px; }
.sm-admin-shell .modal-dialog { margin: 12px; width: auto; }
.sm-admin-shell .modal-content { overflow-wrap: anywhere; }
.sm-admin-shell .modal-dialog-scrollable .modal-content { max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); }
.sm-admin-shell .modal-dialog-scrollable .modal-body { overflow-y: auto; }
.sm-admin-shell .modal-dialog-scrollable .modal-header,
.sm-admin-shell .modal-dialog-scrollable .modal-footer { flex-shrink: 0; }
.sm-admin-shell .modal-title { min-width: 0; }
.sm-admin-shell .modal-body { min-width: 0; overflow-x: hidden; }
.sm-admin-shell .modal-header .close { flex-shrink: 0; }
.sm-admin-shell .main-body .btn,
.sm-admin-shell .modal .btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 14px;
    line-height: 1.3;
    text-align: center;
    vertical-align: middle;
    white-space: normal;
}
.sm-member-shell .sm-game-milestone { flex-wrap: wrap; }
.sm-member-shell .sm-game-milestone > * { min-width: 0; overflow-wrap: anywhere; }
.sm-member-shell .sm-puzzle-grid { width: 100%; gap: clamp(3px, 1.5vw, 8px); }
.sm-member-shell .sm-puzzle-grid .sm-puzzle-button { min-width: 0; padding: .5rem 0; }
@media (min-width: 576px) {
    .sm-admin-shell .modal-dialog { margin: 30px auto; max-width: calc(100% - 32px); width: 500px; }
    .sm-admin-shell .modal-dialog.modal-lg { width: 800px; }
}
@media (max-width: 767px) {
  html, body.sm-admin-shell { max-width: 100%; overflow-x: hidden; }
  .sm-admin-shell .main-body,
  .sm-admin-shell .main-body.wide-main-body { margin-left: 0 !important; width: 100%; min-width: 0; }
  .sm-admin-shell .header { left: 0 !important; width: 100%; }
  .sm-admin-shell .sidebar-admin { width: min(280px, calc(100vw - 44px)); left: -290px; }
  .sm-admin-shell .sidebar-admin.pull-sidebar { left: 0; box-shadow: 12px 0 35px rgba(0,0,0,.28); }
  .sm-admin-shell .container-fluid { padding-left: 12px; padding-right: 12px; }
  .sm-admin-shell .btn,
  .sm-admin-shell button,
  .sm-admin-shell input[type="submit"] { line-height: 1.2; }
    .sm-admin-shell .main-body > main { padding-top: 61px !important; }
    .sm-admin-shell .header-title .row { row-gap: 12px; }
    .sm-admin-shell .dataTables_filter input { max-width: 100%; }
    .sm-admin-shell .dataTables_filter label { white-space: normal; }
    .sm-admin-shell .allNotifications .row { row-gap: 8px; }
    .sm-admin-shell .allNotifications .col { flex: 0 0 100%; max-width: 100%; }
}
@media (max-width: 575px) {
    .sm-admin-shell .header-title .row > .col { flex: 0 0 100%; max-width: 100%; text-align: left !important; }
    .sm-admin-shell .main-body input:not([type="checkbox"]):not([type="radio"]),
    .sm-admin-shell .main-body select,
    .sm-admin-shell .main-body textarea,
    .sm-member-shell main input,
    .sm-member-shell main select,
    .sm-member-shell main textarea,
    .sm-quiz-shell input,
    .sm-quiz-shell select { font-size: 16px; }

    /* Member history tables become readable cards instead of clipped rows. */
    .sm-member-shell .sm-member-main .table-responsive {
        overflow: visible;
    }
    .sm-member-shell .sm-member-main .dataTables_wrapper table.dataTable {
        min-width: 0 !important;
    }
    .sm-member-shell .sm-member-main table.dataTable thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
    .sm-member-shell .sm-member-main table.dataTable tbody,
    .sm-member-shell .sm-member-main table.dataTable tr,
    .sm-member-shell .sm-member-main table.dataTable td {
        display: block;
        width: 100% !important;
    }
    .sm-member-shell .sm-member-main table.dataTable tbody tr {
        margin-bottom: 0.8rem;
        padding: 0.35rem 0.8rem;
        border: 1px solid var(--sm-border);
        border-radius: 0.9rem;
        background: rgba(255,255,255,.025);
    }
    .sm-member-shell .sm-member-main table.dataTable tbody td {
        display: grid;
        grid-template-columns: minmax(86px,.42fr) minmax(0,1fr);
        gap: 0.7rem;
        align-items: start;
        padding: 0.55rem 0 !important;
        border: 0 !important;
        text-align: left !important;
        overflow-wrap: anywhere;
    }
    .sm-member-shell .sm-member-main table.dataTable tbody td + td {
        border-top: 1px solid var(--sm-border) !important;
    }
    .sm-member-shell .sm-member-main table.dataTable tbody td::before {
        content: attr(data-label);
        color: var(--sm-muted);
        font-size: 0.7rem;
        font-weight: 700;
    }
    .sm-member-shell .sm-member-main table.dataTable tbody td.dataTables_empty {
        display: block;
        padding: 1rem 0 !important;
    }
    .sm-member-shell .sm-member-main table.dataTable tbody td.dataTables_empty::before {
        content: none;
    }
}

/* Empty rows stay centered in desktop tables and mobile history cards. */
table.dataTable tbody td.dataTables_empty,
table.dataTable tbody td.dt-empty,
.sm-member-shell .sm-member-main table.dataTable tbody td.dataTables_empty {
    text-align: center !important;
    vertical-align: middle !important;
    padding: 3rem 1rem !important;
    color: var(--sm-muted, #6b7280);
}
table.dataTable tbody td.dataTables_empty::before,
table.dataTable tbody td.dt-empty::before { content: none !important; }