/* Generic "swipe to see more" hint for horizontally-scrollable tables.
   Hidden on desktop; shown on tablet/mobile; auto-hidden after first scroll
   by the global script in layouts/app.blade.php. */
.mobile-scroll-hint {
    display: none;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .03em;
    color: #58a6ff;
    background: #eef6ff;
    border: 1px solid #cfe4fb;
    border-radius: 6px;
    padding: 6px 12px;
    margin: 0 0 8px;
    text-align: center;
}
[data-bs-theme="dark"] .mobile-scroll-hint {
    background: #16233a;
    border-color: #2a3a55;
    color: #79c0ff;
}

@media (max-width: 1024px) {
    .mobile-scroll-hint {
        display: block;
    }
}

/* MOBILE DEVICES (phones) */
@media (max-width: 1024px) {
    .section .form-select{
        width: 100% !important;
    }
    .section-title{
        flex-wrap:wrap;
    }
    .section .section-header{
        flex-wrap: wrap;
    }
    .dashboard-activity-filter-wrapper{
        flex-wrap: wrap;
    }
    .notification-item {
        flex-wrap: wrap;
    }
    .notification-text {
        font-size: 0.7rem;
    }
    .notification-time {
        font-size: 0.7rem;
    }
    .notification-title {
        font-size: 0.9rem;
    }
    .activities-filter-container{
        flex-wrap: wrap;
    }
    #activities-filter-search-input{
        width: 100% !important;
    }
    .tabs-setting-wrappper{
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
    }
    .tabs-setting-wrappper .tab {
        white-space: nowrap;
        font-size: 15px;
    }
    #eventTabs{
        display: flex;

        overflow-x: auto;
        overflow-y: hidden;

    }
    #eventTabs .tab {
        white-space: nowrap;
        font-size: 16px;
    }
    .dashboard_hero_section{
        grid-template-columns: 1fr !important;
    }
    .container {
        padding: 0 1rem !important;
    }
    .pg-board-name {
        font-size: 1rem !important;
    }
    .pg-titlebar {
        flex-wrap: wrap;
    }
    .pg-selector {
        flex-wrap: wrap;
    }
    .pg-grp td{
        font-size: 1.2rem !important;
    }
    .modal-content {
        padding: 0.5rem !important  ;
    }
    .modal-dialog {
        margin: 0.5rem auto;
        max-height: calc(100vh - 1rem);
        display: flex;
        align-items: center;
    }
    .modal-dialog .modal-content {
        max-height: calc(100vh - 1rem);
        display: flex;
        flex-direction: column;
        overflow: hidden !important;
    }
    .modal-dialog .modal-header,
    .modal-dialog .modal-footer {
        flex-shrink: 0;
    }
    .modal-dialog .modal-body {
        overflow-y: auto;
        flex: 1 1 auto;
        min-height: 0;
    }
    .evm-tabs {
        overflow-x:auto ;
    }
    .evm-stats-row {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .evm-info-grid {
        grid-template-columns: 1fr !important;
    }
    .evm-tournament-grid {
        grid-template-columns: 1fr !important;

    }
    .bm-pill {font-size: 0.8rem !important;}
    .bm-reinit-btn {font-size: 0.8rem;}
    .bm-pod-tab {
        font-size: 0.8rem !important;
    }
    .bm-pod-badge {font-size: 0.7rem !important;}
    .bm-round-label {font-size: 0.8rem !important;}
    .bm-tname {font-size: 0.8rem !important;}
    .bm-champion-name {font-size: 0.8rem !important;}
    .bm-champion-label {font-size: 1rem !important;}
    .lb-legend-dot {
        font-size: 0.7rem !important;
    }
    .lb-legend-dot span {
        height: 10px !important;
        width: 10px !important;
    }
    #selectEvent{
        font-size: 0.7rem !important;
    }
    #lb-table thead tr.row-cols th {
        font-size: 0.8rem !important;
    }
    #lb-table thead tr.row-cols th {
        font-size: 0.9rem !important;
    }
    #lb-table tbody td {
        font-size: 0.8rem !important;
    }
    #lb-table tbody tr.tr-student td {
        font-size: 0.8rem !important;
    }
}