/* Mobile-first responsive overrides for Bootstrap 2 layout */

/* =========================================================
   NAVBAR
   ========================================================= */
@media (max-width: 767px) {
    /* робимо контейнер гумовим, щоб не було горизонтального скролу */
    .container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 10px;
        padding-right: 10px;
        box-sizing: border-box;
    }

    #logo img {
        max-width: 100%;
        height: auto;
    }

    .navbar-fixed-top .navbar-inner {
        padding: 0 10px;
    }

    /* Stack nav links vertically on small screens */
    .navbar .nav,
    .navbar .nav.pull-right {
        float: none !important;
        display: block;
    }

    .navbar .nav > li {
        display: inline-block;
    }

    #avatar {
        height: 28px !important;
        margin-top: -4px !important;
    }
}

/* =========================================================
   MAIN CLIENT LAYOUT: sidebar + torrent list
   ========================================================= */
@media (max-width: 767px) {
    /* PMUX-B1: BS2 .row uses margin-left:-20px to balance the +20px margin
       on .span*. With the reset below, .span* margins are 0, so .row's -20
       leaks 10px past the .container's 10px padding-left and pushes every
       descendant 10px off the viewport's left edge — surfaces as
       #quick-add-url-input rendering at left=-10 on a 390px viewport. */
    .row {
        margin-left: 0 !important;
    }

    /* Bootstrap 2 span* don't stack — force it */
    .row .span2,
    .row .span10,
    .row .span10.offset2 {
        float: none !important;
        width: 100% !important;
        margin-left: 0 !important;
    }

    /* Sidebar groups: horizontal scrollable strip */
    #torrent-groups {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        padding: 6px 0 !important;
        margin-bottom: 10px !important;
        gap: 4px;
    }

    #torrent-groups li {
        flex-shrink: 0;
    }

    #torrent-groups li a {
        white-space: nowrap;
        padding: 4px 10px !important;
        border-radius: 20px !important;
        font-size: 13px;
    }

    #torrent-groups li.divider {
        display: none;
    }

    /* список загрузок не вылезает за экран по ширине */
    #torrent-list table {
        width: 100% !important;
        table-layout: fixed;
    }

    #torrent-list th,
    #torrent-list td {
        word-wrap: break-word;
        white-space: normal;
    }

    /* ── Торрент-рядок: заголовок + посилання у стовпчик ── */
    .torrent-info tr:first-child td {
        display: block;
    }

    /* назва зліва — знімаємо float, повна ширина */
    h5.torrent-title.pull-left {
        float: none !important;
        width: 100%;
        white-space: normal;
        word-break: break-word;
        font-size: 13px;
        margin-bottom: 2px;
        line-height: 1.4;
    }

    /* Download/Zip — знімаємо pull-right, показуємо під назвою */
    h5.torrent-speed.pull-right,
    h5.torrent-progress.pull-right {
        float: none !important;
        width: 100%;
        margin: 0 0 4px 0;
        font-size: 12px;
    }

    /* прогрес-бар: 100% ширини */
    .torrent-info tr:last-child td:first-child {
        width: 100% !important;
        display: block;
    }

    /* кнопки (info/pause/remove) — поруч праворуч від прогрес-бару */
    .torrent-info tr:last-child td:last-child {
        width: 100% !important;
        display: block;
        text-align: right;
    }

    .torrent-info tr:last-child td:last-child .btn-group {
        float: none !important;
    }

    /* прибираємо зайві відступи у рядку */
    .torrent-row td {
        padding: 4px 6px !important;
    }

    /* більш виразне підсвічування при наведенні/виділенні */
    .torrent-row:hover td {
        background-color: #d0ebff !important;
        box-shadow: inset 0 0 0 1px #2d6cdf;
    }

    .torrent-row.info td {
        background-color: #bcdfff !important;
        box-shadow: inset 0 0 0 1px #1a55c4;
    }

    /* ── Хедер: Switch User форма під назвою групи ── */
    .row .span10.offset2 {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
    }

    .row .span10.offset2 h3 {
        flex: 1 1 100%;
        margin: 0 0 4px 0;
        font-size: 18px;
    }

    .row .span10.offset2 .form-inline {
        float: none !important;
        display: flex;
        gap: 6px;
        align-items: center;
    }

    .row .span10.offset2 select {
        font-size: 13px;
        padding: 2px 4px;
    }

    /* ── Статистика внизу: переносимо текст ── */
    #torrent-list h5 small {
        font-size: 11px;
        display: block;
        white-space: normal;
        word-break: break-all;
    }

    /* pull-left/pull-right в статистиці — в стовпчик */
    #torrent-list .pull-left,
    #torrent-list .pull-right {
        float: none !important;
        display: block;
    }
}

/* =========================================================
   TORRENT LIST
   ========================================================= */
@media (max-width: 767px) {
    /* "With Selected" and "Add Torrent" buttons */
    .btn-group.pull-left,
    .btn-group.pull-right {
        float: none !important;
        display: inline-block;
        margin-bottom: 6px;
    }

    /* Torrent name — allow wrapping, no hard truncation */
    .torrent-title {
        white-space: normal !important;
        word-break: break-word;
    }

    /* Speed info — always visible on mobile (no hover) */
    .torrent-progress.hide,
    .torrent-speed.hide {
        display: block !important;
    }

    /* Action buttons column: don't shrink below minimum */
    .torrent-info td:last-child {
        white-space: nowrap;
    }

    /* Stats row at the bottom */
    #torrent-list h5 small {
        font-size: 11px;
    }
}

/* =========================================================
   MODALS — fix fixed px widths
   ========================================================= */
@media (max-width: 767px) {
    .modal {
        position: fixed !important;
        top: 5% !important;
        left: 2% !important;
        right: 2% !important;
        width: auto !important;
        margin: 0 !important;
        max-height: 90vh;
        overflow-y: auto;
    }

    /* Override inline styles on specific modals */
    #torrent-info-modal,
    #torrent-download-modal {
        width: auto !important;
        margin-left: 0 !important;
    }

    #hls-player-modal {
        width: auto !important;
        margin-left: 0 !important;
    }

    #hls-player-modal .modal-body {
        max-height: 60vh !important;
    }

    #hls-player-frame {
        height: 56vw !important;
        min-height: 200px !important;
    }

    /* URL/Magnet textarea */
    .modal textarea {
        width: 100% !important;
        box-sizing: border-box;
    }
}

/* =========================================================
   AUTH PAGES
   ========================================================= */
@media (max-width: 480px) {
    .auth-container,
    .password-form {
        padding: 10px;
    }

    .auth-section {
        padding: 14px;
    }

    .auth-container .btn,
    .password-form .btn {
        display: block;
        width: 100%;
        margin-left: 0 !important;
        margin-bottom: 8px;
        text-align: center;
        box-sizing: border-box;
    }
}

/* =========================================================
   ACCOUNT SECTION
   ========================================================= */
@media (max-width: 767px) {
    /* Sidebar nav in account section */
    .account-nav,
    .nav-pills.nav-stacked {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 4px;
        margin-bottom: 16px !important;
    }

    .account-nav li,
    .nav-pills.nav-stacked li {
        flex: 1 1 auto;
        text-align: center;
    }
}

/* =========================================================
   ONBOARDING PAGE
   ========================================================= */
@media (max-width: 480px) {
    .onboarding {
        padding: 0 10px;
    }

    .step {
        flex-direction: column;
        gap: 10px;
    }

    .onboarding-cta .btn-start {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }
}

/* =========================================================
   ERROR PAGES
   ========================================================= */
@media (max-width: 480px) {
    .error-code {
        font-size: 80px !important;
    }

    .error-title {
        font-size: 22px !important;
    }

    .error-actions a {
        display: block;
        margin: 0 0 8px 0 !important;
    }
}

/* =========================================================
   QUICK-ADD URL INPUT (PMUX-Q1, PMUX-B1)
   - PMUX-Q1: font-size must be >= 16px on mobile to suppress
     iOS Safari focus-zoom.
   - PMUX-B1: input was rendered with bounding-rect.left ≈ -40px
     on a 390px viewport because the wrapper kept its desktop
     `float:right` + inline `width:240px`, and Bootstrap 2's
     `.input-append` puts the input next to a button so the
     input itself can never reach `viewportW - 32`. On phones
     we stack: input on its own row at full width, the `+`
     button drops onto the next line.
   ========================================================= */
@media (max-width: 767px) {
    /* The toolbar wrapper is inline-styled
       `<div style="float:right; display:flex; gap:8px;">`
       in app/views/client/index.html — neutralise the float and
       stretch full-width with column wrap so children stack. */
    .span10 > div[style*="float:right"] {
        float: none !important;
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 8px;
        align-items: stretch;
        margin-top: 6px;
    }

    /* Form fills the wrapper width. */
    #quick-add-url-form {
        float: none !important;
        width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box;
    }

    /* Bootstrap 2's `.input-append` is inline-block by default and
       puts input + button on one line. Switch to wrapping flex so
       the input takes the whole row (PMUX-B1 needs `width >=
       viewportW - 32`) and the `+` button drops onto the next line. */
    #quick-add-url-form .input-append {
        display: flex !important;
        flex-wrap: wrap;
        width: 100% !important;
        box-sizing: border-box;
        margin: 0 !important;
    }

    #quick-add-url-input {
        /* PMUX-Q1: 16px disables iOS Safari focus-zoom. */
        font-size: 16px !important;
        /* PMUX-B1: drop the inline 240px, fill the row. */
        width: 100% !important;
        min-width: 0;
        margin: 0 !important;
        box-sizing: border-box;
    }

    #quick-add-url-btn {
        flex: 0 0 auto;
        margin: 4px 0 0 0 !important;
        font-size: 16px !important;
        align-self: flex-start;
    }
}