/**
 * Sports Meister Competitions - Frontend Responsive & Media Queries
 * All responsive breakpoints, mobile optimizations, and print styles
 *
 * @package Sports_Meister_Competitions
 * @since 1.0.0
 * @requires frontend-core.css, frontend-components.css, frontend-popups.css, frontend-rounds.css
 */

/* Responsive Design - Tablet (768px) */
@media (max-width: 768px) {
    .smc-competition-results {
        padding: 1rem;
        margin: 1rem;
    }
    .button.smc-round-tab {
        font-size: 14px;
    }

    .smc-round-tab-reset,
    .smc-round-tab-reset:hover {
        background: #dc3545 !important;
        color: #fff !important;
        border-color: #dc3545 !important;
        flex-shrink: 0;
        height: auto !important;
        width: fit-content !important;
        font-size: 12px !important;
    }

    .smc-round-tab-reset:hover {
        background: #c82333 !important;
        border-color: #c82333 !important;
    }

    .smc-competition-status-badge,
    .smc-simple-pdf-download {
        width: 100% !important;
    }

    .smc-standings-winner-badge {
        display: none !important;
    }

    .smc-competition-results h2 {
        font-size: 1.5rem;
    }

    .smc-matches-table {
        font-size: 1rem;
    }

    .smc-matches-table th,
    .smc-matches-table td {
        padding: 0.875rem 0.5rem;
        font-size: 1rem;
    }

    .smc-matches-table th {
        font-size: 1.125rem;
    }

    .smc-match-number {
        font-size: 1.125rem !important;
    }

    .smc-status-badge {
        padding: 0.375rem 1rem;
        font-size: 0.875rem;
    }

    .smc-btn {
        padding: 0.625rem 1.25rem;
        font-size: 1rem;
    }

    .smc-popup-content {
        width: 95%;
        max-width: 95%;
        max-height: 95vh;
    }

    .smc-popup-header {
        padding: 1rem 1.5rem;
        align-items: flex-start;
    }

    .smc-popup-title {
        font-size: 1.25rem !important;
    }

    .smc-competition-meta {
        font-size: 0.875rem;
        gap: 1rem;
    }

    .smc-popup-body {
        padding: 1rem;
    }

    .smc-popup-footer {
        padding: 1rem 1.5rem;
        flex-direction: column;
    }

    .smc-popup-footer .smc-button {
        width: 100%;
    }

    .smc-popup-filters {
        padding: 0.75rem 1rem;
    }

    .smc-header-content {
        padding: 0 !important;
    }

    /* Results Table Mobile — card layout */
    .smc-results-table {
        border: none;
        border-radius: 0;
        display: block;
        background: transparent;
    }
    .smc-results-table thead {
        display: none;
    }
    .smc-results-table tbody {
        display: flex;
        flex-direction: column;
        gap: 0.625rem;
    }
    .smc-results-table .smc-match-row {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
        background: #fff;
        border: 1px solid #e5e5e5;
        border-radius: 12px;
        overflow: hidden;
        padding: 0;
    }
    /* Stage: full-width card header */
    .smc-results-table .smc-col-stage {
        width: 100%;
        order: 1;
        padding: 0.375rem 0.75rem;
        font-size: 0.7rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: var(--smc-primary);
        background: linear-gradient(to right, rgba(59, 130, 246, 0.08), rgba(168, 85, 247, 0.08));
        border-bottom: 1px solid #e5e5e5;
        border-radius: 0 !important;
    }
    /* Team1: left half */
    .smc-results-table .smc-col-team1 {
        flex: 1 1 0;
        order: 2;
        padding: 0.625rem 0.375rem 0.625rem 0.625rem;
        border-bottom: 1px solid #e5e5e5;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        min-width: 0;
    }
    /* Scores: center column */
    .smc-results-table .smc-col-score1 {
        flex: 0 0 auto;
        order: 3;
        padding: 0.625rem 0.25rem;
        border-bottom: 1px solid #e5e5e5;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .smc-results-table .smc-col-score2 {
        flex: 0 0 auto;
        order: 4;
        padding: 0.625rem 0.25rem;
        border-bottom: 1px solid #e5e5e5;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    /* Team2: right half */
    .smc-results-table .smc-col-team2 {
        flex: 1 1 0;
        order: 5;
        padding: 0.625rem 0.625rem 0.625rem 0.375rem;
        border-bottom: 1px solid #e5e5e5;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        min-width: 0;
    }
    /* Status: full-width card footer */
    .smc-results-table .smc-col-status {
        width: 100%;
        order: 6;
        padding: 0.375rem 0.75rem;
        text-align: center;
        border-bottom: none;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    /* Score inputs — smaller on mobile */
    .smc-results-table .smc-score-input {
        width: 52px !important;
        padding: 0.375rem 0.25rem !important;
        font-size: 0.875rem !important;
    }
    /* Team name — smaller + wrap */
    .smc-results-table .smc-team-name {
        font-size: 0.7rem;
        white-space: normal;
        word-break: break-word;
        line-height: 1.3;
    }
    /* Team logos — smaller */
    .smc-results-table .smc-team-logo {
        width: 22px !important;
        height: 22px !important;
        flex-shrink: 0;
    }
    /* Override td backgrounds — set background on tr instead */
    .smc-results-table .smc-match-row > td {
        background-color: transparent !important;
    }
    .smc-results-table .smc-match-row.smc-match-has-result {
        background: #f5f5f5 !important;
    }
    .smc-results-table .smc-match-row.cancelled {
        background: #fff5f5 !important;
    }
    /* Override desktop border-radius on last row tds */
    .smc-results-table tbody tr:last-child td.smc-col-stage,
    .smc-results-table tbody tr:last-child td.smc-col-status {
        border-radius: 0 !important;
    }

    .smc-status-badge {
        font-size: 0.75rem;
        padding: 0.375rem 0.75rem;
    }

    .smc-rounds-toolbar {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "actions filters"
            "progress progress";
        gap: 0.75rem;
        align-items: center;
        margin-top: 1rem;
    }

    .smc-rounds-toolbar-left {
        display: contents;
    }

    .smc-rounds-toolbar .smc-manager-actions {
        grid-area: actions;
        display: flex;
        justify-content: flex-start;
        gap: 0.75rem;
    }

    .smc-rounds-toolbar .smc-manager-actions .smc-button {
        width: auto;
        min-width: 0;
        padding: 6px 10px 6px 10px !important;
        font-size: 14px;
        gap: 4px;
    }

    .smc-rounds-toolbar .smc-progress-container {
        grid-area: progress;
        width: 100%;
    }
    .smc-rounds-toolbar .smc-progress-header {
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
    }
    .smc-rounds-toolbar .smc-filters-header-bar {
        grid-area: filters;
        width: auto;
        justify-content: flex-end;
        gap: 0.75rem;
        margin-left: auto;
        display: flex;
        align-items: center;
    }

    .smc-form-group label {
        font-size: 1.125rem;
    }

    .smc-form-group input,
    .smc-form-group select,
    .smc-form-group textarea {
        font-size: 1rem;
        padding: 0.875rem;
    }
    .smc-progress-bar, .smc-rounds-toolbar .smc-progress-bar {
        width: 100%;
    }
    .smc-score-inputs {
        grid-template-columns: 1fr;
    }

    .smc-form-actions {
        flex-direction: column;
    }

    .smc-form-actions .smc-btn {
        width: 100%;
    }

    .smc-progress-label {
        font-size: 1rem;
    }

    .smc-progress-percentage {
        font-size: 1.125rem;
    }

    .smc-progress-bar {
        height: 24px;
    }

    /* Rounds Mobile Responsive */
    .smc-rounds-container {
        padding: 0;
        margin: 1rem;
        width: 100% !important;
        margin: 0 !important;
    }

    .smc-round-date > span {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
    }

    .smc-venues-header {
        margin: -1rem -1rem 1rem 0rem;
        padding: 0.875rem 1rem;
        flex-direction: column;
        text-align: center;
        gap: 0.5rem;
    }

    .smc-venues-label {
        font-size: 1rem;
    }

    .smc-venues-names {
        font-size: 1rem;
    }

    .smc-round-item {
        flex-direction: column;
        padding: 1rem;
        gap: 0;
        text-align: center;
    }

    .smc-round-number {
        flex: none;
        width: 100%;
    }

    .smc-round-teams {
        flex-direction: column;
        gap: 1rem;
        width: 100%;
    }

    .smc-team-home,
    .smc-team-away {
        justify-content: center;
        text-align: center;
    }

    .smc-round-date {
        flex: none;
        width: 100%;
        text-align: center;
        margin-top: 0.5rem;
    }

    .smc-team-name {
        font-size: 1rem;
        text-align: left;
    }

    .smc-rounds-pagination {
        flex-wrap: wrap;
        gap: 0.25rem;
    }

    .smc-page-link {
        min-width: 36px;
        height: 36px;
        font-size: 0.875rem;
    }

    /* Filters Panel Mobile */
    .smc-filters-panel {
        width: 100%;
        max-width: 100%;
    }

    .smc-filters-panel-header {
        padding: 1rem;
    }

    .smc-filters-panel-title {
        font-size: 1.125rem;
    }

    .smc-filters-panel-body {
        padding: 1rem;
    }

    .smc-filter-group {
        margin-bottom: 1.25rem;
    }

    .smc-filters-panel-footer {
        padding: 1rem;
        flex-direction: column;
        gap: 0.75rem;
    }

    .smc-filters-panel-footer .smc-button {
        width: 100%;
    }

    .smc-filters-toggle-btn {
        padding: 0.5rem 1rem;
        font-size: 14px !important;
        font-weight: 400 !important;
        padding: 6px 10px 6px 10px !important;
    }

    /* Responsive Podium */
    .smc-podium {
        padding: 1.5rem;
    }

    .smc-podium-title {
        font-size: 1.5rem;
    }

    .smc-podium-positions {
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
    }

    .smc-podium-position {
        order: initial !important;
        width: 100%;
        max-width: 300px;
    }

    .smc-podium-position.smc-position-1 {
        flex: initial;
    }

    .smc-position-1::before {
        font-size: 1.75rem;
        top: -18px;
        width: 36px;
        height: 36px;
    }

    .smc-position-2::before,
    .smc-position-3::before {
        font-size: 1.5rem;
    }

    /* Match Details Responsive */
    .smc-match-details-popup .smc-popup-content {
        max-width: 100%;
        max-height: 100vh;
        border-radius: 0;
    }

    .smc-match-info-grid {
        grid-template-columns: 1fr;
    }

    .smc-teams-container {
        flex-direction: column;
        gap: 2rem;
    }

    .smc-vs-separator {
        margin-top: 0;
        padding: 1rem 0;
    }

    .smc-dialog-header {
        padding: 1rem;
    }

    .smc-match-info-section,
    .smc-teams-section,
    .smc-dialog-footer {
        padding: 1rem;
    }
}

/* Responsive Design - Mobile (480px) */
@media (max-width: 480px) {
    .smc-matches-table {
        display: block;
        overflow-x: auto;
    }

    .smc-competition-results h2 {
        font-size: 1.25rem;
    }

    .smc-alert {
        font-size: 1rem;
        padding: 1rem;
    }

    .smc-rounds-container {
        padding: 0;
        margin: 0.5rem;
        padding-bottom: 20px !important;
    }

    .smc-venues-header {
        margin: -0.75rem 0rem 0rem 0rem;
        padding: 0.75rem;
    }

    .smc-venues-label {
        font-size: 0.875rem;
    }

    .smc-venues-names {
        font-size: 0.875rem;
    }

    .smc-rounds-container .smc-team-logo {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        max-width: 36px !important;
    }

    .smc-team-logo-placeholder {
        width: 36px;
        height: 36px;
    }
}
@media (max-width: 1024px) { 
    .smc-standings-table .smc-position {
        font-weight: 600;
        color: var(--smc-primary);
        text-align: center;
        width: 100%;
    }
    .smc-standings-table .smc-logo {
        justify-content: space-between !important;
        width: 100%;
    }
    .smc-standings-table .smc-team-name {
        font-weight: 700;
        color: var(--smc-gray-900);
        justify-content: flex-start !important;
        gap: 0.4rem;
        align-items: center;
    }

    .smc-standings-table td.smc-team-name::before {
        flex: 0 0 auto;
        margin-right: auto;
    }
    .smc-standings-table .smc-played, .smc-standings-table .smc-wins, .smc-standings-table .smc-draws, .smc-standings-table .smc-losses {
        text-align: left;
        width: 100%;
        color: var(--smc-gray-700);
    }
    .smc-standings-table td:last-child {
        border-bottom: 0;
        width: 100%;
    }
    .smc-standings-table tbody tr {
        margin-bottom: 0;
    }

    /* Rounds container — fluid below 1100px */
    .smc-rounds-container {
        width: auto !important;
        max-width: 100% !important;
    }

    /* Round items — vertical stacked card layout (same as mobile) */
    .smc-round-item {
        flex-direction: column;
        padding: 1rem;
        gap: 0;
        text-align: center;
    }

    .smc-round-number {
        flex: none;
        width: 100% !important;
        max-width: 100% !important;
        min-width: unset !important;
        margin-right: 0;
        font-size: inherit;
    }

    .smc-round-teams {
        flex-direction: column;
        gap: 1rem;
        width: 100%;
    }

    .smc-team-home,
    .smc-team-away {
        justify-content: center;
        text-align: center;
    }

    .smc-round-date {
        flex: none !important;
        flex-basis: unset !important;
        width: 100%;
        text-align: center;
        margin-top: 0.5rem;
        font-size: inherit;
    }

    .smc-round-date > span {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
    }

    /* Results table — card layout (same as 768px mobile) */
    .smc-results-table {
        border: none;
        border-radius: 0;
        display: block;
        background: transparent;
    }
    .smc-results-table thead {
        display: none;
    }
    .smc-results-table tbody {
        display: flex;
        flex-direction: column;
        gap: 0.625rem;
    }
    .smc-results-table .smc-match-row {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
        background: #fff;
        border: 1px solid #e5e5e5;
        border-radius: 12px;
        overflow: hidden;
        padding: 0;
    }
    .smc-results-table .smc-col-stage {
        width: 100%;
        order: 1;
        padding: 0.375rem 0.75rem;
        font-size: 0.7rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: var(--smc-primary);
        background: linear-gradient(to right, rgba(59, 130, 246, 0.08), rgba(168, 85, 247, 0.08));
        border-bottom: 1px solid #e5e5e5;
        border-radius: 0 !important;
    }
    .smc-results-table .smc-col-team1 {
        flex: 1 1 0;
        order: 2;
        padding: 0.625rem 0.375rem 0.625rem 0.625rem;
        border-bottom: 1px solid #e5e5e5;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        min-width: 0;
    }
    .smc-results-table .smc-col-score1 {
        flex: 0 0 auto;
        order: 3;
        padding: 0.625rem 0.25rem;
        border-bottom: 1px solid #e5e5e5;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .smc-results-table .smc-col-score2 {
        flex: 0 0 auto;
        order: 4;
        padding: 0.625rem 0.25rem;
        border-bottom: 1px solid #e5e5e5;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .smc-results-table .smc-col-team2 {
        flex: 1 1 0;
        order: 5;
        padding: 0.625rem 0.625rem 0.625rem 0.375rem;
        border-bottom: 1px solid #e5e5e5;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        min-width: 0;
    }
    .smc-results-table .smc-col-status {
        width: 100%;
        order: 6;
        padding: 0.375rem 0.75rem;
        text-align: center;
        border-bottom: none;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .smc-results-table .smc-score-input {
        width: 52px !important;
        padding: 0.375rem 0.25rem !important;
        font-size: 0.875rem !important;
    }
    .smc-results-table .smc-team-name {
        font-size: 0.7rem;
        white-space: normal;
        word-break: break-word;
        line-height: 1.3;
    }
    .smc-results-table .smc-team-logo {
        width: 22px !important;
        height: 22px !important;
        flex-shrink: 0;
    }
    .smc-results-table .smc-match-row > td {
        background-color: transparent !important;
    }
    .smc-results-table .smc-match-row.smc-match-has-result {
        background: #f5f5f5 !important;
    }
    .smc-results-table .smc-match-row.cancelled {
        background: #fff5f5 !important;
    }
    .smc-results-table tbody tr:last-child td.smc-col-stage,
    .smc-results-table tbody tr:last-child td.smc-col-status {
        border-radius: 0 !important;
    }
    .smc-score-inputs {
        grid-template-columns: 1fr;
    }

    /* Toolbar grid layout — matches the 768px block so it also works at 820px–1024px */
    .smc-rounds-toolbar {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "actions filters"
            "progress progress";
        gap: 0.75rem;
        align-items: center;
        max-width: 100%;
    }

    .smc-rounds-toolbar-left {
        display: contents;
    }

    .smc-rounds-toolbar .smc-manager-actions {
        grid-area: actions;
    }

    .smc-rounds-toolbar .smc-progress-container {
        grid-area: progress;
        width: 100%;
    }

    .smc-rounds-toolbar .smc-filters-header-bar {
        grid-area: filters;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }

    .smc-rounds-toolbar .smc-progress-header {
        gap: 10px;
    }
}
/* Print Styles */
@media print {
    .smc-btn,
    .smc-popup-overlay,
    .smc-dialog-overlay,
    .smc-rounds-pagination {
        display: none;
    }

    .smc-competition-results,
    .smc-rounds-container {
        box-shadow: none;
    }

    .smc-podium {
        page-break-inside: avoid;
    }
}