/* ============================================
   Casa Organizada — Mobile Responsive Styles
   ============================================ */

/* ---- Topbar Mobile ---- */
@media (max-width: 768px) {
    .topbar {
        padding: 0 0.75rem;
    }
    .topbar-inner {
        height: 56px;
        gap: 0.5rem;
    }

    /* Hide desktop nav links, show mobile menu button */
    .topbar-nav {
        display: none;
    }
    .mobile-menu-btn {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Logo smaller */
    .logo {
        font-size: 0.95rem;
        flex-shrink: 0;
    }
    .logo-icon { font-size: 1.1rem; }
    .logo-text { display: none; } /* Hide text, keep icon on very small screens */

    /* User area compact */
    .user-name { display: none; }
    .user-menu-trigger {
        padding: 0.25rem 0.5rem;
    }
    .user-avatar {
        width: 30px;
        height: 30px;
        font-size: 0.75rem;
    }

    /* Mobile menu */
    .mobile-menu {
        display: none;
        flex-direction: column;
        background: var(--bg-primary);
        padding: 0.5rem;
        border-radius: 0 0 var(--radius-lg) var(--radius-lg);
        box-shadow: var(--shadow-card);
        max-height: 70vh;
        overflow-y: auto;
    }
    .mobile-menu a {
        padding: 0.85rem 1rem;
        border-radius: var(--radius-md);
        font-size: 0.95rem;
        font-weight: 500;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    .mobile-menu a:active {
        background: var(--bg-secondary);
        box-shadow: var(--shadow-inset-sm);
    }

    /* Main content */
    .main-content {
        padding: 0.75rem;
    }

    /* Section header stacks on mobile */
    .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
        margin-bottom: 1rem;
    }
    .section-actions {
        width: 100%;
        flex-wrap: wrap;
    }
    .section-actions .btn {
        flex: 1;
        min-width: 0;
        font-size: 0.85rem;
        padding: 0.6rem 0.75rem;
    }

    /* ---- Stats Grid ---- */
    .dashboard-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    .widget-stat {
        padding: 0.75rem;
    }
    .widget-stat-value {
        font-size: 1.8rem;
    }
    .widget-stat-label {
        font-size: 0.75rem;
    }

    /* ---- Dashboard Grid ---- */
    .dashboard-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    /* ---- Cards ---- */
    .card {
        padding: 1rem;
        border-radius: var(--radius-md);
    }

    /* ---- Tables: Horizontal Scroll ---- */
    .table-container {
        border-radius: var(--radius-md);
        margin: 0 -0.75rem;
        width: calc(100% + 1.5rem);
    }
    table {
        font-size: 0.82rem;
    }
    th, td {
        padding: 0.6rem 0.75rem;
        white-space: nowrap;
    }
    th {
        font-size: 0.7rem;
    }

    /* ---- Responsive Table Cards (alternative) ---- */
    @supports (display: grid) {
        .table-cards thead { display: none; }
        .table-cards tr {
            display: block;
            margin-bottom: 0.75rem;
            border-radius: var(--radius-md);
            box-shadow: var(--shadow-elevated);
            background: var(--bg-card);
        }
        .table-cards td {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.5rem 1rem;
            border-bottom: 1px solid var(--neu-shadow-dark);
            white-space: normal;
        }
        .table-cards td:last-child { border-bottom: none; }
        .table-cards td::before {
            content: attr(data-label);
            font-weight: 600;
            font-size: 0.75rem;
            color: var(--text-muted);
            margin-right: 1rem;
            flex-shrink: 0;
        }
    }

    /* ---- Filters Bar ---- */
    .filters-bar {
        flex-direction: column;
        gap: 0.5rem;
    }
    .filters-bar .form-group {
        width: 100%;
        min-width: 0;
    }
    .filters-bar select,
    .filters-bar input {
        font-size: 0.85rem;
        padding: 0.6rem 0.75rem;
    }

    /* ---- Modals Full Screen ---- */
    .modal {
        max-width: 100%;
        width: 100%;
        max-height: 100vh;
        height: 100vh;
        border-radius: 0;
        padding: 1.25rem;
    }
    .modal-header h2 {
        font-size: 1.15rem;
    }

    /* ---- Forms ---- */
    .form-group label {
        font-size: 0.8rem;
    }
    input, select, textarea {
        font-size: 0.9rem;
        padding: 0.65rem 0.85rem;
    }

    /* ---- Tabs Scrollable ---- */
    .tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .tabs::-webkit-scrollbar { display: none; }
    .tab {
        flex: none;
        white-space: nowrap;
        font-size: 0.85rem;
        padding: 0.5rem 0.85rem;
    }

    /* ---- Settings Grid ---- */
    .settings-grid {
        grid-template-columns: 1fr;
    }
    .settings-sidebar {
        flex-direction: row;
        overflow-x: auto;
        padding-bottom: 0.5rem;
        gap: 0.25rem;
    }
    .settings-nav-item {
        flex: none;
        white-space: nowrap;
        font-size: 0.82rem;
        padding: 0.5rem 0.85rem;
    }

    /* ---- Auth Page ---- */
    .auth-page {
        grid-template-columns: 1fr;
    }
    .auth-hero {
        display: none;
    }
    .auth-card {
        padding: 1.5rem 1rem;
    }
    .auth-form {
        padding: 1.25rem;
    }

    /* ---- Footer ---- */
    .footer {
        padding: 1rem;
        margin-top: 2rem;
    }
    .footer-inner {
        flex-direction: column;
        text-align: center;
        gap: 0.75rem;
        font-size: 0.8rem;
    }
    .footer-links {
        justify-content: center;
        gap: 1rem;
    }
    .footer-copy {
        text-align: center;
    }

    /* ---- Large touch targets ---- */
    .btn {
        min-height: 40px;
        font-size: 0.9rem;
        padding: 0.65rem 1rem;
    }
    .btn-icon {
        min-width: 40px;
        min-height: 40px;
    }
    .btn-sm {
        min-height: 34px;
        padding: 0.35rem 0.75rem;
        font-size: 0.8rem;
    }

    /* ---- Action Icons ---- */
    .action-icons {
        gap: 0.5rem;
    }
    .action-icons .btn-icon {
        width: 36px;
        height: 36px;
    }

    /* ---- Member Cards Grid ---- */
    .grid-3 {
        grid-template-columns: 1fr;
    }
    .grid-2 {
        grid-template-columns: 1fr;
    }
    .member-card {
        flex-direction: column;
        text-align: center;
        gap: 0.5rem;
    }

    /* ---- Plan Cards ---- */
    .plan-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    .plan-card {
        padding: 1rem;
    }
    .plan-price {
        font-size: 1.5rem;
    }

    /* ---- Toast ---- */
    .toast {
        max-width: 90vw;
        font-size: 0.85rem;
    }

    /* ---- User Dropdown full width ---- */
    .user-menu-dropdown {
        position: fixed;
        top: 56px;
        left: 0;
        right: 0;
        min-width: unset;
        border-radius: 0 0 var(--radius-lg) var(--radius-lg);
        box-shadow: 0 12px 32px rgba(0,0,0,0.15);
    }
}

/* ---- Extra Small (phones < 400px) ---- */
@media (max-width: 400px) {
    .dashboard-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }
    .widget-stat-value {
        font-size: 1.5rem;
    }
    .section-actions .btn {
        font-size: 0.8rem;
    }
    .btn {
        min-height: 36px;
        font-size: 0.85rem;
    }
}

/* ---- Prevent zoom on input focus (iOS) ---- */
@media screen and (max-width: 768px) {
    input, select, textarea {
        font-size: 16px !important; /* Prevents iOS zoom */
    }
}

/* ---- PWA Standalone adjustments ---- */
@media (display-mode: standalone) {
    .topbar {
        padding-top: env(safe-area-inset-top, 0px);
    }
    .main-content {
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
}