/* 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) {
    /* 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;
    }
}