/* Phone / small tablet layout (loaded last). The desktop layout above 820px is not touched. */
@media (max-width: 820px) {
    html, body { max-width: 100%; overflow-x: hidden; }
    body { overflow-y: auto; }

    /* ---- Login ---- */
    #login-overlay { height: 100dvh; overflow-y: auto; padding: 16px; box-sizing: border-box; justify-content: flex-start; }
    #login-overlay .login-box { width: 100%; max-width: 100%; box-sizing: border-box; padding: 24px 18px; margin: auto 0; }
    .login-input { font-size: 16px; }   /* no zoom-in on iPhone */

    /* ---- Dashboards without sidebar (admin overview, My channels) ---- */
    .admin-dashboard, #freelancer-dashboard { padding: 16px 14px 90px !important; box-sizing: border-box; max-width: 100vw; overflow-x: hidden; }
    .admin-dashboard h1, #freelancer-dashboard h1 { font-size: 24px !important; }
    #admin-dashboard > div:first-child, #freelancer-dashboard > div:first-child { flex-wrap: wrap; gap: 12px !important; }
    #admin-dashboard > div:first-child > div { flex-wrap: wrap; gap: 12px !important; min-width: 0; }
    .sc-tabs { max-width: 100%; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
    .sc-tab { white-space: nowrap; }
    #admin-tab-agency > div[style*="display: flex"] { flex-direction: column !important; gap: 20px !important; }
    #admin-tab-agency > div > div[style*="max-width: 450px"] { max-width: 100% !important; }
    #freelancer-clients-list { max-width: 100% !important; }
    .client-card { flex-wrap: wrap; gap: 12px; padding: 14px !important; min-width: 0; }
    .client-card > div { min-width: 0; }
    .client-card h3 { white-space: normal; overflow-wrap: anywhere; }
    .client-card .btn { flex: 0 0 auto; }
    #env-float { left: 10px; bottom: 10px; transform: scale(.92); transform-origin: left bottom; }

    /* ---- Channel workspace: the sidebar becomes a bar on top ---- */
    #main-app.app-container, .app-container { flex-direction: column; height: 100dvh; width: 100%; }
    .sidebar { width: 100% !important; flex-direction: row !important; align-items: center; flex-wrap: wrap; gap: 6px 10px; padding: 8px 12px !important; border-right: 0 !important; border-bottom: 1px solid var(--border-subtle); box-sizing: border-box; }
    .sidebar-logo { padding: 0 !important; margin: 0 !important; height: auto !important; }
    .sidebar-logo span { font-size: 14px !important; }
    .sidebar-nav { flex-direction: row !important; padding: 0 !important; gap: 6px !important; flex: 1 1 100%; order: 3; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .nav-btn { white-space: nowrap; padding: 8px 14px !important; flex: 0 0 auto; }
    .sidebar > div[style*="margin-top: auto"] { margin: 0 0 0 auto !important; padding: 0 !important; display: flex; flex-direction: row; gap: 6px; align-items: center; order: 2; }
    .sidebar > div[style*="margin-top: auto"] .btn { width: auto !important; margin: 0 !important; padding: 6px 10px !important; font-size: 12px; }
    #sidebar-env { display: none; }
    .main-content { min-height: 0; }
    .top-header { padding: 10px 14px !important; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
    .header-title { flex-wrap: wrap; min-width: 0; }
    .header-title h1 { font-size: 20px !important; }
    #current-client-name { margin-left: 0 !important; }
    .header-actions { flex-wrap: wrap; gap: 8px !important; width: 100%; }
    .header-actions .btn { padding: 8px 12px; font-size: 13px; }
    .view-content { padding: 12px 14px !important; }

    /* Board: swipe sideways, one column nearly full width */
    #main-app #view-pipeline .kanban-board, #main-app #view-pipeline .kanban-board.six { display: flex !important; grid-template-columns: none !important; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding-bottom: 14px; -webkit-overflow-scrolling: touch; }
    #main-app #view-pipeline .kanban-column { flex: 0 0 84vw !important; min-width: 84vw !important; max-width: 84vw !important; scroll-snap-align: start; }

    /* Overview panels */
    .ov-wrap { gap: 14px; }
    .ov-row { grid-template-columns: 1fr !important; display: grid !important; }
    .ov-kpis, .ov-kpis-3, .ov-kpis-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .ov-stages { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
    .yt-list { grid-template-columns: 1fr !important; }
    .yt-head { flex-wrap: wrap; gap: 8px; }

    /* ---- Video card + all pop-ups full screen ---- */
    .modal, .modal-large { width: 100vw !important; max-width: 100vw !important; height: 100dvh !important; max-height: 100dvh !important; top: 0 !important; left: 0 !important; transform: none !important; border-radius: 0 !important; }
    .modal .modal-header { padding: 12px 14px !important; gap: 8px; }
    .modal .modal-header input[placeholder*="Video Title"] { font-size: 16px !important; min-width: 0; }
    .modal .modal-body { display: flex !important; flex-direction: column !important; gap: 22px !important; padding: 14px !important; overflow-y: auto; min-height: 0; }
    .modal .modal-body > div { flex: none !important; width: 100% !important; min-width: 0 !important; max-width: 100%; box-sizing: border-box; }
    .modal .modal-body input, .modal .modal-body select, .modal .modal-body textarea { max-width: 100%; box-sizing: border-box; font-size: 16px; }
    .modal .modal-body .form-group { min-width: 0; }
    .modal-body > div[style*="flex: 1"] { order: -1; }   /* stage / review / dates on top of the long form */
    .modal .modal-footer { padding: 10px 14px !important; flex-wrap: wrap; gap: 8px; }
    .pr-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sl-modal-bg { padding: 0 !important; align-items: flex-end; }
    .sl-modal, .sl-modal.pr-modal, .sl-modal.pr-modal.wide { width: 100vw !important; max-width: 100vw !important; max-height: 94dvh !important; border-radius: 18px 18px 0 0 !important; }
    .pr-form, .fl-form { grid-template-columns: 1fr !important; }
    .pr-scroll, .tm-wrap { overflow-x: auto; }
    .sf-card { width: 92vw; padding: 20px; }

    /* ---- Production tab ---- */
    .pr-wrap { overflow-x: hidden; }
    .pr-top { flex-wrap: wrap; gap: 10px; }
    .pr-filters { flex-wrap: wrap; width: 100%; }
    .pr-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .pr-panel table, .pr-table { min-width: 640px; }
    .pr-panel { overflow-x: auto; }

    /* ---- Studio + other tabs ---- */
    .st-wrap { padding: 0; }
    .st-row { flex-wrap: wrap; }
    .st-cardrow { flex-wrap: wrap; gap: 8px; }
    .st-cardrow b { flex: 1 1 100%; }
    .st-card-h, .st-tools { flex-wrap: wrap; gap: 8px; }
    .st-comp-h { flex-wrap: wrap; gap: 6px; }
    .st-comp-h b { flex: 1 1 100%; white-space: normal !important; }
    .st-ord { flex-wrap: wrap; }
    .st-top { overflow-x: auto; }
    .st-tiles { grid-template-columns: repeat(2, 1fr); }
    #admin-tab-research, #admin-tab-styles { overflow-x: hidden; }
}
@media (max-width: 480px) {
    .pr-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #main-app #view-pipeline .kanban-column { flex-basis: 88vw !important; min-width: 88vw !important; max-width: 88vw !important; }
}