/* ===== PARENT PORTAL RESPONSIVE STYLES ===== */
/* Mobile-first: all layouts single-column by default, desktop gets side-by-side where needed */
/* CRITICAL: No horizontal scroll on any screen, especially 375px (iPhone SE) */

/* ===== MOBILE (< 768px) ===== */
@media (max-width: 767px) {
    /* App layout — stack vertically */
    .app {
        flex-direction: column;
    }

    /* Sidebar hidden on mobile */
    .sidebar {
        display: none !important;
    }

    /* Main content takes full width */
    .main {
        width: 100%;
    }

    /* Content padding reduced on mobile */
    .content {
        padding: var(--spacing-md);
    }

    /* Topbar single row on mobile */
    .topbar {
        padding: var(--spacing-sm) var(--spacing-md);
        min-height: 56px;
    }

    .topbar-title {
        font-size: 1rem;
    }

    .topbar-logo {
        height: 32px;
    }

    /* Bottom nav visible on mobile */
    .bottom-nav {
        display: flex !important;
    }

    /* Mobile-only display */
    .mobile-only {
        display: flex !important;
    }

    .desktop-only {
        display: none !important;
    }

    /* Cards — full width with appropriate padding */
    .card {
        padding: var(--spacing-md);
        border-radius: var(--radius);
    }

    /* Player cards — full width */
    .player-card {
        margin-left: 0;
        margin-right: 0;
    }

    /* Match cards — full width */
    .match-card {
        margin-left: 0;
        margin-right: 0;
    }

    /* Match teams — stack vertically on mobile */
    .match-teams {
        flex-direction: column;
        gap: var(--spacing-lg);
    }

    .team-column {
        flex: 1 0 100%;
    }

    /* Buttons — full width on mobile */
    .btn {
        width: 100%;
        max-width: none;
        margin: 0 auto var(--spacing-md) auto;
    }

    /* Forms — full width */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    textarea,
    select {
        width: 100%;
    }

    /* Auth container — reduced padding */
    .auth-container {
        padding: var(--spacing-md);
    }

    .auth-card {
        max-width: 100%;
    }

    /* Headings — larger for outdoor readability on sideline */
    h1 {
        font-size: 1.75rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    h3 {
        font-size: 1.25rem;
    }

    /* Body text — minimum 14px for outdoor readability */
    body, p, span, a, li {
        font-size: 14px;
    }

    label {
        font-size: 14px;
    }

    /* Touch targets — minimum 44px height */
    .btn,
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    textarea,
    select,
    .btn-primary,
    .btn-secondary,
    .btn-outline {
        min-height: 44px;
        min-width: 44px;
    }

    /* Child filter — scroll horizontally if needed */
    .child-filter {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .child-filter-chip {
        flex-shrink: 0;
    }

    /* Flex utilities on mobile */
    .flex-between {
        flex-direction: column;
        align-items: flex-start;
    }

    .gap-1, .gap-2, .gap-3 {
        gap: var(--spacing-sm);
    }

    /* Hero card — smaller padding on mobile */
    .hero-card {
        padding: var(--spacing-lg);
    }

    .hero-card h1 {
        font-size: 1.5rem;
    }

    /* Status messages — full width */
    .status-message {
        margin-left: 0;
        margin-right: 0;
    }

    /* Tables (if used) — scroll horizontally */
    table {
        font-size: 0.9rem;
    }

    /* Links in text — easier to tap */
    a {
        padding: 0.25rem;
    }

    /* Empty state — adjusted for mobile */
    .empty-state {
        padding: var(--spacing-lg) var(--spacing-md);
    }

    .empty-state-icon {
        font-size: 2rem;
    }
}

/* ===== TABLET (768px - 1023px) ===== */
@media (min-width: 768px) and (max-width: 1023px) {
    /* Sidebar hidden on tablet (bottom nav still hidden) */
    .sidebar {
        display: none !important;
    }

    /* Bottom nav hidden on tablet */
    .bottom-nav {
        display: none !important;
    }

    .mobile-only {
        display: none !important;
    }

    /* Main content takes full width */
    .main {
        width: 100%;
    }

    .content {
        padding: var(--spacing-lg);
    }

    /* Buttons — slightly narrower on tablet */
    .btn {
        max-width: 500px;
    }

    /* Cards — wider on tablet */
    .card {
        padding: var(--spacing-lg);
    }

    /* Heading sizes appropriate for tablet */
    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.75rem;
    }

    /* Touch targets still 44px minimum */
    .btn,
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    textarea,
    select {
        min-height: 44px;
    }

    /* Match teams can be side-by-side on larger tablets */
    .match-teams {
        flex-direction: row;
    }
}

/* ===== DESKTOP (1024px+) ===== */
@media (min-width: 1024px) {
    /* App layout — sidebar + main */
    .app {
        flex-direction: row;
    }

    /* Sidebar visible on desktop */
    .sidebar {
        display: flex !important;
        width: 250px;
        flex-direction: column;
        background-color: var(--parent-green-dark);
        color: white;
        padding: var(--spacing-lg);
        box-shadow: var(--shadow-md);
        position: sticky;
        top: 0;
        max-height: 100vh;
        overflow-y: auto;
    }

    /* Bottom nav hidden on desktop */
    .bottom-nav {
        display: none !important;
    }

    .mobile-only {
        display: none !important;
    }

    .desktop-only {
        display: block !important;
    }

    /* Main content takes remaining space */
    .main {
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    .content {
        flex: 1;
        padding: var(--spacing-xl);
    }

    /* Cards — normal width with max constraint */
    .card {
        padding: var(--spacing-lg);
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
    }

    /* Player cards — can be 2-up if desired (but MVP uses single column per spec) */
    .player-card {
        margin-left: auto;
        margin-right: auto;
        max-width: 600px;
    }

    /* Match cards — reasonable width */
    .match-card {
        margin-left: auto;
        margin-right: auto;
        max-width: 800px;
    }

    /* Buttons — normal width */
    .btn {
        max-width: none;
        display: inline-block;
    }

    /* Auth container — centered and constrained */
    .auth-container {
        padding: var(--spacing-2xl);
    }

    .auth-card {
        max-width: 450px;
    }

    /* Headings — normal size */
    h1 {
        font-size: 2.5rem;
    }

    h2 {
        font-size: 2rem;
    }

    /* Sidebar nav items */
    .nav-item {
        padding: var(--spacing-md);
        margin-bottom: var(--spacing-sm);
        border-radius: var(--radius);
        cursor: pointer;
        transition: all 0.2s ease;
        display: flex;
        align-items: center;
        gap: var(--spacing-md);
    }

    .nav-item:hover {
        background-color: rgba(255, 255, 255, 0.1);
    }

    .nav-item.active {
        background-color: var(--parent-green);
        font-weight: 600;
    }

    .nav-item a {
        color: inherit;
        text-decoration: none;
        width: 100%;
    }

    /* Match teams side-by-side */
    .match-teams {
        flex-direction: row;
        justify-content: space-around;
        gap: var(--spacing-lg);
    }

    .team-column {
        flex: 0 1 200px;
    }

    /* Flex utilities */
    .flex-between {
        flex-direction: row;
        gap: var(--spacing-lg);
    }

    /* Topbar on desktop */
    .topbar {
        min-height: 64px;
        padding: var(--spacing-md) var(--spacing-lg);
    }
}

/* ===== LARGE DESKTOP (1400px+) ===== */
@media (min-width: 1400px) {
    /* Wider content area */
    .content {
        padding: var(--spacing-2xl);
    }

    /* Cards — more spacious */
    .card {
        padding: var(--spacing-xl);
    }

    .auth-card {
        max-width: 500px;
    }

    /* Sidebar wider */
    .sidebar {
        width: 280px;
    }
}

/* ===== PRINTING ===== */
@media print {
    .sidebar,
    .bottom-nav,
    .topbar-actions,
    .btn {
        display: none;
    }

    body {
        background: white;
    }

    .card {
        page-break-inside: avoid;
    }
}