/* =========================
   Mobile & Responsive Styles
   All @media queries and mobile overrides
   ========================= */

/* =========================
   Base Mobile Optimizations
   ========================= */

@media (max-width: 768px) {
    .card-body {
        padding: 0.75rem;
    }

    .btn-group .btn {
        padding: 0.375rem 0.75rem;
        font-size: 0.875rem;
    }
}

/* =========================
   Pagination Mobile
   ========================= */

@media (max-width: 768px) {
    .pagination {
        flex-wrap: wrap;
        gap: 0.25rem;
    }

    .pagination .page-item {
        margin: 0;
    }

    .pagination .page-link {
        padding: 0.4rem 0.6rem;
        font-size: 0.85rem;
        min-width: auto;
    }
}

/* Extra small screens - hide First/Last buttons */
@media (max-width: 576px) {
    .pagination .page-item:first-child,
    .pagination .page-item:last-child {
        display: none;
    }
}

/* =========================
   Team Details Mobile
   ========================= */

@media (max-width: 768px) {
    /* Team header - more compact */
    .team-header-gradient .card-body {
        padding: 1rem;
    }

    .team-header-gradient h1 {
        font-size: 1.5rem;
    }

    /* Quick actions - more compact */
    .quick-actions {
        gap: 0.4rem;
    }

    .quick-action-btn {
        padding: 0.5rem 0.75rem;
        font-size: 0.85rem;
    }

    .quick-action-btn i {
        font-size: 0.9rem;
    }

    /* Tab content wrapper - reduce padding */
    .tab-container {
        padding: 0.75rem;
    }

    /* Service cards - more compact */
    .service-card {
        padding: 0.75rem;
    }

    .service-card h6 {
        font-size: 0.9rem;
    }

    /* Stats and cards */
    .row.g-3, .row.g-4 {
        gap: 0.5rem;
    }

    /* Badge minimal - smaller */
    .badge-minimal {
        font-size: 0.7rem;
        padding: 0.15rem 0.4rem;
    }

    /* Card bodies - reduce padding */
    .card-body {
        padding: 0.75rem;
    }
}

/* Extra small mobile - even more compact */
@media (max-width: 576px) {
    .team-header-gradient h1 {
        font-size: 1.25rem;
    }

    .quick-action-btn span {
        font-size: 0.8rem;
    }
}

/* =========================
   League Details Mobile
   ========================= */

@media (max-width: 768px) {
    /* Simplified league grid - more compact */
    .league-grid {
        gap: 1rem;
        padding: 0.75rem;
    }

    .league-grid h6 {
        font-size: 0.75rem;
        margin-bottom: 0.75rem;
    }

    .league-grid a {
        font-size: 0.85rem;
    }

    .league-grid .py-1 {
        padding-top: 0.25rem;
        padding-bottom: 0.25rem;
    }

    .league-grid .btn-minimal {
        width: 20px;
        height: 20px;
        font-size: 0.75rem;
    }

    /* NCAAF conference sections - more compact */
    .conference-teams .col-6 {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .conference-teams a {
        font-size: 0.8rem;
    }

    .conference-teams .py-1 {
        padding-top: 0.15rem;
        padding-bottom: 0.15rem;
    }
}

/* Extra small mobile - even more compact */
@media (max-width: 576px) {
    .league-grid {
        gap: 0.75rem;
        padding: 0.5rem;
    }

    .conference-teams {
        margin-top: 0.5rem;
    }

    .row.g-4 {
        gap: 0.5rem;
    }
}

/* League grid responsive breakpoints */
@media (max-width: 992px) {
    .league-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .league-grid {
        grid-template-columns: repeat(1, 1fr);
    }
}

/* =========================
   Services List Mobile
   ========================= */

@media (max-width: 768px) {
    /* Dashboard stats compact */
    .dashboard-stats {
        gap: 0.4rem;
    }

    .stat-card {
        padding: 0.5rem;
        min-width: auto;
    }

    .stat-value {
        font-size: 1rem;
    }

    .stat-label {
        font-size: 0.7rem;
    }

    /* Service list items */
    .service-list-item {
        padding: 1rem;
    }

    .service-list-item h5 {
        font-size: 1rem;
    }

    .service-overview {
        font-size: 0.8rem;
    }

    /* Search bar */
    .minimalist-search input,
    .minimalist-search button,
    .minimalist-search a {
        padding: 0.4rem 0.75rem;
        font-size: 0.9rem;
    }
}

/* =========================
   Service Details Mobile
   ========================= */

@media (max-width: 768px) {
    /* Tighter spacing for device/format rows */
    .card .row.g-3 {
        gap: 0.5rem !important;
    }

    /* More compact device items on mobile */
    .device-item {
        padding: 0.4rem;
        font-size: 0.85rem;
    }

    /* Reduce icon size on mobile */
    .device-item .bi {
        font-size: 0.875rem;
    }

    /* Ensure 2-column layout works properly */
    .device-item-link {
        display: block;
        width: 100%;
    }

    /* Reduce card padding on mobile for these sections */
    .card.card-dark-bg.p-4 {
        padding: 1rem !important;
    }
}