/* MyAvatar Responsive Design System
   Mobile-first responsive overrides for phone, tablet, and desktop.
   Loaded after myavatar-app.css. */

/* ===== CSS VARIABLES (MOBILE OVERRIDES) ===== */
:root {
    --bottom-nav-height: 60px;
    --mobile-padding: 12px;
    --touch-target: 44px;
}

/* ===== TABLET (max 1024px) ===== */
@media (max-width: 1024px) {
    :root {
        --sidebar-width: 64px;
    }

    .sidebar .nav-link span,
    .sidebar .nav-section-title,
    .sidebar .logo-text,
    .sidebar-left .nav-item span,
    .sidebar-left .nav-section-header {
        display: none !important;
    }

    .sidebar .nav-link,
    .sidebar-left .nav-item {
        justify-content: center !important;
        padding: 12px !important;
    }

    .sidebar .nav-link i,
    .sidebar-left .nav-item i {
        font-size: 1.2rem !important;
        margin: 0 !important;
    }

    .sidebar .sidebar-header {
        padding: 12px 8px !important;
        justify-content: center !important;
    }

    .sidebar .logo img {
        margin: 0 auto !important;
    }

    .main-content {
        margin-left: 64px !important;
        width: calc(100% - 64px) !important;
    }

    /* Grid adjustments */
    .actions-grid,
    .stats-row {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .videos-row {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ===== PHONE (max 768px) ===== */
@media (max-width: 768px) {
    /* Hide sidebar completely */
    .sidebar, .sidebar-left {
        display: none !important;
    }

    /* Show bottom nav */
    .mobile-bottom-nav {
        display: flex !important;
    }

    /* Hide hamburger menu (replaced by bottom nav) */
    .mobile-menu-btn {
        display: none !important;
    }

    /* Main content takes full width */
    .main-content {
        margin-left: 0 !important;
        width: 100% !important;
        padding: var(--mobile-padding) !important;
        padding-bottom: calc(var(--bottom-nav-height) + 16px) !important;
    }

    /* Touch-friendly inputs */
    input, select, textarea, button {
        min-height: var(--touch-target) !important;
        font-size: 16px !important; /* prevents iOS zoom on focus */
    }

    /* Grids become single/double column */
    .actions-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    .videos-row,
    .sr-grid,
    .prod-list {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    /* Cards */
    .action-card {
        padding: 16px 12px !important;
    }

    .action-icon {
        width: 40px !important;
        height: 40px !important;
        font-size: 1rem !important;
    }

    .action-title {
        font-size: 0.8rem !important;
    }

    /* Split action cards */
    .action-card-split {
        min-height: 80px !important;
    }

    /* Typography */
    h1, .welcome-section h1 {
        font-size: 1.3rem !important;
    }

    h2 {
        font-size: 1.1rem !important;
    }

    h3 {
        font-size: 0.95rem !important;
    }

    /* Tables — horizontal scroll */
    table {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        white-space: nowrap !important;
    }

    /* Settings tabs — scrollable */
    .settings-tabs {
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .settings-tab {
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        padding: 8px 12px !important;
        font-size: 0.8rem !important;
    }

    /* Settings cards */
    .settings-card {
        padding: 16px !important;
    }

    .settings-card div[style*="display:flex"] {
        flex-direction: column !important;
        gap: 10px !important;
    }

    /* Banner (copilot/onboarding) */
    .onboarding-banner {
        padding: 16px !important;
        flex-direction: column !important;
        text-align: center !important;
    }

    .banner-right {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .weather-widget, .quote-widget {
        width: 100% !important;
    }

    /* Copilot main */
    .copilot-main {
        padding: 16px 12px 80px !important;
    }

    /* Guide section */
    .guide-input-row {
        flex-direction: column !important;
    }

    /* Opportunities */
    .opp-card {
        flex-wrap: wrap !important;
        gap: 10px !important;
    }

    .opp-right {
        width: 100% !important;
        justify-content: flex-start !important;
    }

    /* Movie Studio tabs */
    .ms-tabs {
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 0 !important;
    }

    .ms-tab {
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        padding: 8px 12px !important;
        font-size: 0.75rem !important;
    }

    /* Movie Studio toolbar */
    .ms-toolbar {
        flex-direction: column !important;
        gap: 8px !important;
        align-items: flex-start !important;
    }

    /* Screenplay editor */
    .sp-editor-wrap {
        flex-direction: column !important;
    }

    .sp-guide {
        display: none !important;
    }

    .sp-editor {
        min-height: 200px !important;
    }

    /* Scene cards */
    .pp-scene-card {
        padding: 10px !important;
    }

    /* Variant grid */
    .sr-variants {
        grid-template-columns: 1fr !important;
    }

    /* Modal/drawer */
    .drawer, #actorDrawer {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Idea generator */
    #sceneCountBtns,
    #styleBtns {
        flex-wrap: wrap !important;
    }

    /* Nav row buttons */
    .nav-row {
        flex-direction: column !important;
        gap: 8px !important;
    }

    /* Form rows */
    .sp-row {
        flex-direction: column !important;
        gap: 10px !important;
    }
}

/* ===== SMALL PHONE (max 480px) ===== */
@media (max-width: 480px) {
    .actions-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
    }

    .action-card {
        padding: 12px 8px !important;
        gap: 6px !important;
    }

    .action-icon {
        width: 36px !important;
        height: 36px !important;
        font-size: 0.9rem !important;
    }

    .action-title {
        font-size: 0.72rem !important;
    }

    .banner-datetime {
        font-size: 1.2rem !important;
    }

    h1, .welcome-section h1 {
        font-size: 1.1rem !important;
    }
}

/* ===== BOTTOM NAVIGATION ===== */
.mobile-bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--bottom-nav-height);
    background: #fff;
    border-top: 1px solid var(--color-border);
    z-index: 9999;
    justify-content: space-around;
    align-items: center;
    padding: 0 4px;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.08);
}

.mobile-bottom-nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #9ca3af;
    font-size: 0.6rem;
    font-weight: 600;
    gap: 2px;
    padding: 6px 0;
    flex: 1;
    min-width: 0;
    transition: color 0.2s;
}

.mobile-bottom-nav a i {
    font-size: 1.1rem;
}

.mobile-bottom-nav a.active,
.mobile-bottom-nav a:hover {
    color: var(--color-accent);
}

.mobile-bottom-nav a span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60px;
}

/* ===== SAFE AREA (iPhone notch) ===== */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .mobile-bottom-nav {
        padding-bottom: env(safe-area-inset-bottom);
        height: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom));
    }

    @media (max-width: 768px) {
        .main-content {
            padding-bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom) + 16px) !important;
        }
    }
}

/* ===== STANDALONE MODE (PWA installed) ===== */
@media (display-mode: standalone) {
    .mobile-bottom-nav {
        padding-bottom: env(safe-area-inset-bottom, 0);
    }
}

/* ===== LANDSCAPE PHONE ===== */
@media (max-width: 768px) and (orientation: landscape) {
    .mobile-bottom-nav {
        height: 48px;
    }

    .mobile-bottom-nav a {
        flex-direction: row;
        gap: 6px;
        font-size: 0.65rem;
    }

    .mobile-bottom-nav a i {
        font-size: 0.9rem;
    }
}

/* ===== CONTENT STUDIO (phone) ===== */
@media (max-width: 768px) {
    /* Content Studio tool grid */
    .engine-tools {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    .tool-card {
        padding: 12px 8px !important;
        font-size: 0.75rem !important;
    }

    .tool-card i {
        font-size: 1.2rem !important;
    }

    /* Engine cards */
    .engine-card {
        padding: 16px !important;
    }

    .engine-header {
        flex-wrap: wrap !important;
        gap: 10px !important;
    }

    .engine-action {
        width: 100% !important;
        text-align: center !important;
    }

    /* Videos grid */
    .video-grid, .video-list {
        grid-template-columns: 1fr !important;
    }

    /* Distribution */
    .dist-grid, .platform-grid {
        grid-template-columns: 1fr !important;
    }

    /* Agents */
    .agent-grid {
        grid-template-columns: 1fr !important;
    }

    .agent-card {
        padding: 12px !important;
    }

    /* Lead generation */
    .lead-grid {
        grid-template-columns: 1fr !important;
    }

    /* Account cards */
    .account-grid {
        grid-template-columns: 1fr !important;
    }

    /* Chart containers */
    .chart-container {
        height: 200px !important;
    }

    /* Modals */
    .modal-content, .modal-dialog {
        width: 95% !important;
        max-width: 95% !important;
        margin: 10px auto !important;
    }

    /* Flex rows → stack */
    .flex-row, [style*="display:flex"][style*="gap"] {
        flex-wrap: wrap !important;
    }

    /* Battle cards */
    .battle-card {
        padding: 12px !important;
    }

    /* Campaign builder */
    .campaign-steps {
        flex-direction: column !important;
    }

    /* Growth dashboard */
    .growth-grid {
        grid-template-columns: 1fr !important;
    }

    /* Signals */
    .signal-card {
        padding: 12px !important;
    }

    /* Avatar studio */
    .avatar-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Playbook */
    .playbook-steps {
        flex-direction: column !important;
    }
}

/* ===== CONTENT STUDIO (small phone) ===== */
@media (max-width: 480px) {
    .engine-tools {
        grid-template-columns: 1fr 1fr !important;
    }

    .avatar-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ===== PRINT ===== */
@media print {
    .sidebar, .mobile-bottom-nav, .mobile-menu-btn {
        display: none !important;
    }

    .main-content {
        margin-left: 0 !important;
        width: 100% !important;
    }
}