/* Dashboard responsive overrides
 * Loaded after dashboard.css, so keep this file as the single source
 * for mobile/tablet layout corrections.
 */

@media (max-width: 1200px) {
    .flex-grow-1 .main-content-wrapper-inner {
        padding: 24px;
        max-width: 100%;
    }
}

@media (max-width: 991px) {
    :root {
        --dashboard-sidebar-width: 100%;
    }

    .flex-box-container.d-flex.gap-xxl {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        align-items: stretch;
    }

    .sidebar_wrapper {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        bottom: auto !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: none !important;
        border-radius: 12px;
        margin: 0;
        z-index: 3;
    }

    .sidebar_wrapper .sidebar-navbar-header {
        padding: 0px !important;
    }

    .sidebar_wrapper .sidebar-navbar-header .nav-sidebar {
        display: flex;
        flex-direction: row !important;
        flex-wrap: nowrap;
        gap: 8px;
        overflow-x: auto;
        padding-bottom: 4px;
    }

    .sidebar_wrapper .sidebar-navbar-header .nav-sidebar li {
        flex: 0 0 auto;
    }

    .sidebar_wrapper .sidebar-navbar-header .nav-sidebar li a {
        padding: 10px 12px !important;
        border-radius: 8px;
        white-space: nowrap;
        font-size: 13px;
    }

    .main-content-wrapper,
    .main-content-wrapper.w-100,
    .main-content-wrapper.w-100.flex-grow-1 {
        margin-left: 0 !important;
        width: 100% !important;
        min-width: 0 !important;
        padding: 16px !important;
        gap: 16px !important;
    }

    .main-content-wrapper.w-100.flex-grow-1 {
        flex-direction: column;
    }

    .flex-grow-1 .main-content-wrapper-inner,
    #full-grid-container .flex-grow-1 .main-content-wrapper-inner {
        padding: 0 !important;
        max-width: 100% !important;
        width: 100%;
    }

    .dashboard-container,
    .quiz-container,
    .events-container,
    .upcoming-webinars-container,
    .latest-news-container {
        width: 100%;
    }

    .dashboard-container .background-widget-white,
    .dashboard-container .rewards-status-container,
    .dashboard-container .recent-activities-container,
    .dashboard-container .activity-feed-container,
    .dashboard-container .upcoming-events-container,
    .dashboard-container .available-rewards-container,
    .quiz-container.background-widget-white,
    .events-container.background-widget-white {
        padding: 16px !important;
        border-radius: 12px;
    }

    .welcome-card {
        padding: 18px !important;
        border-radius: 14px;
    }

    .welcome-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }

    .welcome-title {
        font-size: 28px;
        line-height: 1.2;
        margin-bottom: 10px;
    }

    .welcome-content p.welcome-subtitle {
        font-size: 14px;
        line-height: 1.45;
    }

    .right-welcome-content,
    .badges-card {
        width: 100%;
        min-width: 0;
    }

    .badges-card__inner {
        gap: 14px;
    }

    .badges-card__list {
        gap: 40px;
        justify-content: flex-start;
    }
    .dashboard-container .widget-header h3 {
        font-size: 18px;
        line-height: 1.3;
    }

    .events-grid,
    .dashboard-container .events-grid,
    .dashboard-container .full-grid-widget {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .dashboard-container .events-grid .event-card,
    .dashboard-container .full-grid-widget .event-card,
    .dashboard-container .full-grid-widget .dash-hackathon-card,
    .dashboard-container .full-grid-widget .featured-event-card {
        width: 100%;
        max-width: 100%;
    }

    .dashboard-container .event-title {
        font-size: 18px;
        line-height: 1.35;
    }

    .dashboard-container .event-description {
        font-size: 13px;
        line-height: 1.45;
    }

    .custom-webinar-slider {
        padding: 0 0px !important;
    }

    .custom-webinar-slider__arrow--prev {
        right: auto;
    }

    .custom-webinar-slider__arrow--next {
        right: 0px;
    }

    .dashboard-right-sidebar {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        border-left: 0;
    }

    /* Featured section mobile/tablet flow */
    .custom-featured-slider,
    .custom-featured-slider__viewport,
    .custom-featured-slider__track {
        width: 100%;
    }

    .custom-featured-slider__slide,
    .dashboard-container .full-grid-widget .featured-event-card,
    .dashboard-container .full-grid-widget .featured-event-card__image-link,
    .dashboard-container .full-grid-widget .featured-event-card__image-wrap {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        height: 100%;
    }

    .dashboard-container .full-grid-widget .dash-hackathon-card__body{
        padding: 20px 20px;
    }

    .quiz-card__skills {
        flex-wrap: wrap;
    }  

    .dashboard-container .full-grid-widget .featured-event-card__image {
        width: 100%;
        height: 260px;
        object-fit: cover;
        display: block;
    }

    .dashboard-container .full-grid-widget .featured-event-card__content {
        padding-top: 10px;
    }

    .dashboard-container .full-grid-widget .featured-event-card__title {
        font-size: 18px !important;
        line-height: 1.35;
        margin: 8px 0 0;
    }

    /* Sponsored hackathon card: neutralize oversized tablet fonts from dashboard.css */
    .sponsored-hackathon-card__hero {
        padding: 20px 18px;
    }

    .sponsored-hackathon-card__hero-title {
        font-size: 20px !important;
        line-height: 1.25;
    }

    .sponsored-hackathon-card__hero-subtitle {
        font-size: 13px !important;
        line-height: 1.35;
    }

    .sponsored-hackathon-card__hero-meta {
        font-size: 14px !important;
        gap: 8px;
    }

    .sponsored-hackathon-card__title {
        font-size: 22px !important;
        line-height: 1.25;
    }

    .sponsored-hackathon-card__subtitle {
        font-size: 14px !important;
        line-height: 1.4;
    }

    .sponsored-hackathon-card__rounds-title {
        font-size: 20px !important;
    }

    .sponsored-hackathon-card__round-name {
        font-size: 16px !important;
        line-height: 1.3;
    }

    .sponsored-hackathon-card__round-desc,
    .sponsored-hackathon-card__round-date {
        font-size: 13px !important;
        line-height: 1.35;
    }

    /* Leaderboard page responsive flow */
    .leaderboard-container.background-widget-white {
        padding: 16px !important;
    }

    .leaderboard-container .page-title {
        font-size: 32px;
        line-height: 1.2;
        margin-bottom: 10px;
    }

    .leaderboard-container .leaderboard-disclaimer {
        max-width: 100%;
        font-size: 14px;
        line-height: 1.45;
        margin-bottom: 14px;
    }

    .leaderboard-container .leaderboard-header {
        gap: 10px;
        margin-bottom: 12px;
        align-items: flex-start;
    }

    .leaderboard-container .leaderboard-header .refresh-timer {
        font-size: 14px;
    }

    .leaderboard-container .leaderboard-header .search-container,
    .leaderboard-container .leaderboard-header .search-container input {
        width: 100%;
        max-width: 100%;
    }

    .leaderboard-container .leaderboard-header .search-container input {
        height: 48px;
        font-size: 14px;
        padding: 10px 38px 10px 14px;
    }

    .leaderboard-container .leaderboard-table-container .leaderboard-table th,
    .leaderboard-container .leaderboard-table-container .leaderboard-table td {
        padding: 14px 12px;
    }

    .leaderboard-container .leaderboard-table-container .leaderboard-table th {
        font-size: 13px;
        white-space: nowrap;
    }

    .leaderboard-container .leaderboard-table-container .leaderboard-table .rank-column {
        width: 70px;
    }

    .leaderboard-container .leaderboard-table-container .leaderboard-table .location-column,
    .leaderboard-container .leaderboard-table-container .leaderboard-table .score-column {
        width: 130px;
    }

    .leaderboard-container .leaderboard-table-container .leaderboard-table .winner-info {
        gap: 10px;
    }

    .leaderboard-container .leaderboard-table-container .leaderboard-table .winner-info .winner-avatar {
        width: 42px;
        height: 42px;
        min-width: 42px;
        min-height: 42px;
    }

    .leaderboard-container .leaderboard-table-container .leaderboard-table .winner-info .winner-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .leaderboard-container .leaderboard-table-container .leaderboard-table .winner-info .winner-details .winner-name {
        font-size: 14px;
        line-height: 1.25;
        word-break: break-word;
    }

    .leaderboard-container .leaderboard-table-container .leaderboard-table .winner-info .winner-details .winner-designation,
    .leaderboard-container .leaderboard-table-container .leaderboard-table .winner-info .winner-details .winner-company {
        font-size: 13px;
        line-height: 1.3;
    }

    .leaderboard-container .leaderboard-table-container .leaderboard-table .score-column {
        font-size: 14px;
        font-weight: 600;
    }

    .leaderboard-container .leaderboard-footer {
        gap: 10px;
        align-items: center;
    }

    .leaderboard-container .leaderboard-footer .entries-selector {
        font-size: 13px;
    }

    .leaderboard-container .leaderboard-footer .pagination {
        gap: 8px;
    }

    .leaderboard-container .leaderboard-footer .pagination .pagination-btn {
        min-width: 42px;
        height: 42px;
        font-size: 13px;
        border-radius: 10px;
    }
}

@media (max-width: 767px) {
    .main-content-wrapper,
    .main-content-wrapper.w-100,
    .main-content-wrapper.w-100.flex-grow-1 {
        padding: 12px !important;
        gap: 12px !important;
        box-sizing: border-box;
    }

    .sidebar_wrapper .sidebar-header {
        padding: 17px 12px;
    }

    .sidebar_wrapper .sidebar-header img {
        height: 30px;
        max-width: 120px;
    }

    .sidebar_wrapper .sidebar-navbar-header .nav-sidebar li a {
        font-size: 12px;
        padding: 8px 10px !important;
    }

    .sidebar_wrapper .nav-icon {
        width: 16px;
        height: 16px;
        margin-right: 3px;
    }

    .sidebar_wrapper .nav-icon svg {
        width: 16px;
        height: 16px;
    }

    .welcome-card {
        padding: 20px !important;
        border-radius: 10px;
    }

    .welcome-title {
        font-size: 24px;
    }

    .welcome-content p.welcome-subtitle {
        font-size: 13px;
    }

    .badges-card__header {
        gap: 10px;
    }

    .badges-card__title {
        font-size: 13px;
    }

    .badges-card__count {
        font-size: 9px;
        padding: 3px 8px;
    }

    .badge-item__icon {
        width: 36px;
        height: 36px;
    }

    .badge-item__label {
        font-size: 9px;
    }

    .dashboard-container .background-widget-white,
    .dashboard-container .rewards-status-container,
    .dashboard-container .recent-activities-container,
    .dashboard-container .activity-feed-container,
    .dashboard-container .upcoming-events-container,
    .dashboard-container .available-rewards-container,
    .quiz-container.background-widget-white,
    .events-container.background-widget-white {
        padding: 12px !important;
    }

    .dashboard-container .widget-header h3 {
        font-size: 16px;
    }

    .dashboard-container .event-title {
        font-size: 16px;
    }

    .dashboard-container .event-description {
        font-size: 12px;
    }

    .custom-featured-slider {
        margin-top: 4px;
    }

    .custom-featured-slider__track {
        gap: 10px;
        padding-bottom: 4px;
        will-change: auto;
    }

    .custom-featured-slider__viewport {
        overflow: hidden;
    }

    .custom-featured-slider__track {
        will-change: transform;
    }

    .custom-featured-slider__slide {
        min-width: 60% !important;
        max-width: 60% !important;
        flex: 0 0 auto;
    }

    .dashboard-container .full-grid-widget .featured-event-card {
        padding: 0;
    }

    .dashboard-container .full-grid-widget .featured-event-card__image-wrap {
        border-radius: 12px;
    }

    .dashboard-container .full-grid-widget .featured-event-card__image {
        height: 380px;
    }

    .dashboard-container .full-grid-widget .featured-event-card__cta {
        height: 26px;
        padding: 0 9px;
        font-size: 10px;
    }

    .dashboard-container .full-grid-widget .featured-event-card__title {
        font-size: 14px !important;
        line-height: 1.3;
        margin-bottom: 10px;
    }

    .dashboard-container .full-grid-widget .dash-hackathon-card__cta {
        padding: 7px 22px;
        font-size: 12px !important;
        font-weight: 400;
    }

    /* Sponsored hackathon card mobile layout */
    .sponsored-hackathon-card__hero {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 14px 12px;
    }

    .sponsored-hackathon-card__hero-left {
        gap: 10px;
        width: 100%;
    }

    .sponsored-hackathon-card__hero-left img {
        width: 44px;
    }

    .sponsored-hackathon-card__hero-title {
        font-size: 18px !important;
    }

    .sponsored-hackathon-card__hero-subtitle {
        margin-top: 4px;
        font-size: 12px !important;
    }

    .sponsored-hackathon-card__hero-meta {
        width: 100%;
        text-align: left;
        font-size: 12px !important;
    }

    .sponsored-hackathon-card__hero-prize-icon,
    .sponsored-hackathon-card__hero-participants .overlap-speaker {
        justify-content: flex-start;
    }

    .sponsored-hackathon-card__hero-participants {
        gap: 8px;
        font-size: 12px !important;
        justify-content: flex-start;
    }

    .sponsored-hackathon-card__hero-participants img,
    .sponsored-hackathon-card__hero-participants span {
        width: 24px;
        height: 24px;
    }

    .sponsored-hackathon-card__summary {
        gap: 12px;
    }
    .dashboard-container .full-grid-widget .dash-hackathon-card__audience-title {
        font-size: 13px;
    }

    .dashboard-container .full-grid-widget .dash-hackathon-card__audience-title {
        font-size: 13px;
    }
    
    .sponsored-hackathon-card__round-date {
        position: absolute;
        right: 0px;
        font-style: italic;
    }
    
    .sponsored-hackathon-card__round {
        position: relative;
        align-items: center !important;
    }
    
    section.sponsored-hackathon-card__rounds {
        padding: 0px;
    }
    
    .sponsored-hackathon-card__round-date img {
        width: 15px;
    }

    .sponsored-hackathon-card__title {
        font-size: 15px !important;
        line-height: 1.35;
    }

    .sponsored-hackathon-card__subtitle {
        margin-top: 6px;
        font-size: 12px !important;
    }

    .sponsored-hackathon-card .activity-container-wrapper {
        margin-top: 10px !important;
        gap: 4px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    .sponsored-hackathon-card .activity-container-wrapper .event-datetime {
        font-size: 11px;
        line-height: 1.35;
    }

    .sponsored-hackathon-card .activity-container-wrapper .separator {
        margin: 0 2px;
    }

    .sponsored-hackathon-card .dash-hackathon-card__audience-title {
        font-size: 13px;
        margin-bottom: 8px;
    }

    .sponsored-hackathon-card .quiz-card__skills {
        gap: 6px;
    }

    .sponsored-hackathon-card .quiz-card__skills .quiz__skill {
        font-size: 10px;
        padding: 4px 8px;
        line-height: 1.25;
    }

    a.sponsored-hackathon-card__cta {
        min-height: 35px;
        padding: 0 12px;
        font-size: 11px !important;
        border-radius: 6px;
    }

    .sponsored-hackathon-card__rounds-list {
        padding-left: 12px;
    }

    .sponsored-hackathon-card__round-list,
    .sponsored-hackathon-card__leaderboard-list {
        padding: 0 12px;
    }

    .sponsored-hackathon-card__round {
        grid-template-columns: 26px 1fr;
        gap: 8px;
        padding: 12px 0;
        align-items: flex-start;
    }

    .sponsored-hackathon-card__round-index {
        width: 24px;
        height: 24px;
        font-size: 12px;
    }

    .sponsored-hackathon-card__round-name {
        font-size: 12px !important;
    }

    .sponsored-hackathon-card__round-desc,
    .sponsored-hackathon-card__round-date {
        font-size: 11px !important;
        justify-content: flex-start;
    }
    h6.sponsored-hackathon-card__rounds-title {
        font-size: 16px !important;
    }
    

    .sponsored-hackathon-card__leader {
        gap: 8px;
        padding: 10px 0;
    }

    .sponsored-hackathon-card__leader-left {
        gap: 8px;
    }

    .sponsored-hackathon-card__leader-image {
        width: 33px;
        height: 33px;
        font-size: 12px;
    }

    .et_techmonk .ai-playbook-section__container {
        grid-template-columns: repeat(1, 1fr);
    }

    div#completed {
        padding: 0px 20px;
    }
    .dashboard-container .full-grid-widget .dash-hackathon-card__media-img {
        max-height: 200px;
        object-fit: cover;
    }
    .other-section-container {
        display: none;
    }
    .speaker-listing-wrapper-list {
        flex-wrap: wrap;
    }    

    .sponsored-hackathon-card__leader-name {
        font-size: 12px;
    }

    .sponsored-hackathon-card__leader-designation {
        font-size: 10px;
    }

    .sponsored-hackathon-card__leader-score {
        font-size: 12px;
        white-space: nowrap;
    }

    /* Leaderboard mobile fixes */
    .leaderboard-container.background-widget-white {
        padding: 12px !important;
        border-radius: 10px;
    }

    .leaderboard-container .page-title {
        font-size: 30px;
        line-height: 1.2;
        margin-bottom: 8px;
    }

    .leaderboard-container .leaderboard-disclaimer {
        font-size: 13px;
        line-height: 1.35;
        margin-bottom: 10px;
    }

    .leaderboard-container .leaderboard-header {
        margin-bottom: 10px;
    }

    .leaderboard-container .leaderboard-header .refresh-timer {
        width: 100%;
        text-align: center;
        font-size: 16px;
    }

    .leaderboard-container .leaderboard-header .search-container input {
        height: 40px;
        font-size: 14px;
        padding: 8px 34px 8px 12px;
        border-radius: 22px;
    }

    .leaderboard-container .leaderboard-header .search-container .search-icon {
        right: 12px;
        font-size: 13px;
    }

    .leaderboard-container .leaderboard-table-container .leaderboard-table th,
    .leaderboard-container .leaderboard-table-container .leaderboard-table td {
        padding: 10px 8px;
    }

    .leaderboard-container .leaderboard-table-container .leaderboard-table th {
        font-size: 12px;
        letter-spacing: 0.02em;
    }

    .leaderboard-container .leaderboard-table-container .leaderboard-table .rank-column {
        width: 44px;
        min-width: 44px;
        text-align: center;
    }

    .leaderboard-container .leaderboard-table-container .leaderboard-table .winners-column {
        min-width: 160px;
    }

    .leaderboard-container .leaderboard-table-container .leaderboard-table .location-column,
    .leaderboard-container .leaderboard-table-container .leaderboard-table .score-column {
        width: 72px;
        min-width: 72px;
        text-align: right;
    }

    .leaderboard-container .leaderboard-table-container .leaderboard-table .winner-info {
        align-items: center;
        gap: 8px;
    }

    .leaderboard-container .leaderboard-table-container .leaderboard-table .winner-info .winner-avatar {
        width: 30px;
        height: 30px;
        min-width: 30px;
        min-height: 30px;
    }

    .leaderboard-container .leaderboard-table-container .leaderboard-table .winner-info .winner-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .avatar-initial {
        width: 30px !important;
        height: 30px !important;
        font-size: 13px !important;
    }

    .leaderboard-container .leaderboard-table-container .leaderboard-table .winner-info .winner-details .winner-name {
        font-size: 11px;
        line-height: 1.25;
    }

    .leaderboard-container .leaderboard-table-container .leaderboard-table .winner-info .winner-details .winner-designation,
    .leaderboard-container .leaderboard-table-container .leaderboard-table .winner-info .winner-details .winner-company {
        font-size: 10px;
        line-height: 1.25;
    }

    .leaderboard-container .leaderboard-table-container .leaderboard-table .score-column {
        font-size: 10px;
        font-weight: 600;
    }

    .leaderboard-container .leaderboard-footer {
        margin-top: 10px;
        flex-direction: column;
        gap: 8px;
        align-items: center;
    }

    .leaderboard-container .leaderboard-footer .entries-selector {
        justify-content: center;
        font-size: 12px;
    }

    .leaderboard-container .leaderboard-footer .entries-selector select {
        min-width: 54px;
        height: 28px;
        font-size: 12px;
    }

    .leaderboard-container .leaderboard-footer .pagination {
        justify-content: center;
        flex-wrap: wrap;
        gap: 6px;
    }

    .leaderboard-container .leaderboard-footer .pagination .pagination-btn {
        min-width: 30px;
        height: 30px;
        font-size: 11px;
        border-radius: 8px;
        padding: 0 6px;
    }
}


@media (max-width: 1200px) {
    .quiz-container.background-widget-white {
        padding: 0px !important;
    }
    .et_techmonk .contest-discovery-panel__toolbar.toolbar .toolbar__search, .et_techgig .contest-discovery-panel__toolbar.toolbar .toolbar__search {
        min-height: auto;
    }
    button.toolbar__filters {
        display: none !important;
    }
    #id_dashboard_rev_quiz .rev-quiz-category-strip__viewport .contest-discovery-panel__categories > button{
            min-width: 60vw;
            min-height: auto !important;
        }

        .dash-hackathon-card__media {
            width: 100% !important;
            flex: unset !important;
        }
        
        img.dash-hackathon-card__media-img {
            max-width: 100% !important;
        }
        
        .dash-hackathon-card__body {
            padding: 20px 20px !important;
            gap: 20px !important;
        }
        .dashboard-container .full-grid-widget .dash-hackathon-card__main {
            flex: auto;
        }
        .dash-hackathon-card__header .dash-hackathon-card__stats {
            flex-direction: unset !important;
            gap: 15px !important;
        }
        section.contest-discovery-panel {
            padding-top: 0px !important;
        }
        .dash-hackathon-card__main {
            flex: unset !important;
        }
        .speaker-listing-wrapper-list {
            flex-direction: column;
        }
        dd.dash-value.dash-value--multiline {
            width: 100% !important;
        }
        
        .dash-hackathon-card__header {
            padding: 20px !important;
            gap: 12px !important;
        }
        
        p.dash-hackathon-card__subtitle {
            -webkit-line-clamp: 2 !important;
            font-size: 13px !important;
            font-weight: 500 !important;
        }
        
        h4.dash-hackathon-card__title {
            font-size: 16px !important;
        }

        .dash-hackathon-card__stats {
            display: flex;
            gap: 10px;
            font-size: 13px !important;
        }
        
        span.dash-label {
            font-size: 13px !important;
        }
        
        span.dash-value {
            font-size: 13px !important;
            font-weight: 500 !important;
        }
        .dash-hackathon-card__body {
            flex-direction: column-reverse;
        }
        .dash-hackathon-card__footer {
            padding: 20px !important;
        }

        .sponsored-hackathon-card .activity-container-wrapper .event-datetime {
            margin: 0px;
        }

        span.dash-label-text {
            display: none;
        }
        
        .mobile-icon {
            display: block;
        }
        .site-header__logo {
            display: inline-block !important;
        }
        section.site-header.site-header-sticky {
            box-shadow: none !important;
        }
        
        .clearfix.container.site-header__inner.techmonk {
            padding: 0px !important;
        }  
        .section-header__cta-container {
            display: none;
        }
        
        .section-header__title-container {
            width: 100%;
            padding: 0px;
            box-sizing: border-box;
        }
        
        .events-container.background-widget-white {
            box-sizing: border-box;
        }      
    }

@media (min-width: 1201px) {
    .mobile-icon {
        display: none;
    }

    
    span.dash-label-text {
        display: block;
    }

    .dash-label svg.bi.bi-calendar {
        display: none;
    }
    .dash-hackathon-card__stat {
        display: flex;
        gap: 5px;
    }
    
}