/*
    Mobile usability layer for admin.carbase.my
    All rules are scoped to small screens / touch devices — desktop is untouched.
    Wide tables are wrapped in .table-responsive by apps.js (handleResponsiveTables).
*/

.table-responsive { -webkit-overflow-scrolling: touch; }

/* THE unlock: style.css forces #page-container { min-width: 980px }, which makes
   iOS expand its layout viewport to ~1000px to fit the overflow — so the desktop
   grid renders and none of the phone rules below ever match. Release it below
   desktop width and the real device width takes over. */
@media (max-width: 991px) {
    #page-container { min-width: 0; }
    #search-input { min-width: 0 !important; } /* theme sets min-width:240px on navbar inputs */
    .form-container { width: auto; }           /* theme hard-codes width:980px on ALL form pages */

    /* THE root cause: style.css re-declares Bootstrap's whole col-md grid UNSCOPED
       (float + percentage widths + push/pull, lines ~706-750) — so desktop columns
       rendered at every screen width. Restore stack-below-992px behaviour. */
    [class*="col-md-"] {
        float: none !important;
        width: auto !important;
        left: auto !important;
        right: auto !important;
    }
}

@media (max-width: 767px) {
    .content .container-fluid { padding-left: 10px; padding-right: 10px; }
    h1.page-header { font-size: 20px; }
    .breadcrumb { font-size: 11px; padding: 6px 10px; }

    /* header: compact search, no session timer; results panel spans the screen */
    .navbar-timer { display: none; }
    #search-input { width: 130px !important; }
    #catalog-search-results { width: auto !important; left: 8px; right: 8px !important; }

    /* flash messages are absolutely positioned inline next to the title on desktop */
    .page-header .alert { position: static !important; display: block !important; margin: 10px 0 0 !important; }
    /* header buttons (Back / View on site / Approve all) wrap below the title */
    h1.page-header .btn { margin-bottom: 5px; }

    /* list thumbnails: 200px images eat half the phone width */
    .content td img { max-width: 110px; height: auto; }
    .content td .empty-image { width: 110px !important; height: 62px !important; line-height: 62px !important; font-size: 18px !important; }

    /* quick-link grid + dashboard shortcut buttons */
    .quick-link-bar > li { margin-right: 10px; margin-bottom: 10px; }
    .home-panel-right .btn-lg { padding: 8px 12px; font-size: 14px; margin-bottom: 6px; }
    /* home shortcut panels: fixed 216px icon column + 140px-min buttons overflow a phone */
    .home-panel-left { float: none; width: auto; padding: 15px 15px 0; border-right: none; }
    .home-panel-right { margin-left: 0; padding: 10px 15px; border-left: none; }
    .home-panel .btn { min-width: 0 !important; }

    /* variant form: the make/model/generation/variant/nvic row uses inline width:20% columns */
    .form-container .row > div[style*="20%"] { width: 100% !important; }
    .form-container { padding: 15px; }

    /* nothing renders wider than the screen */
    .content img { max-width: 100%; height: auto; }
    .content select, .content input[type="text"], .content textarea { max-width: 100%; }

    /* variant form comfort bar + copy-specs panel */
    #vform-bar { padding: 6px 8px; }
    #vform-bar #vform-jump { max-width: 42vw; }
    #vcopy-panel { width: auto !important; left: 8px; right: 8px; }

    /* login */
    .login-inner-container { width: auto !important; margin: 0 15px; }
    .login-message-container { width: auto !important; margin: 20px 15px; }

    /* gallery page: the 4-slot cover strip scales to the screen (tiles themselves
       are 200px floats — ~2 per row landscape, 1 portrait, which reads fine) */
    .gallery-cover .cover-list { height: auto; overflow: hidden; }
    .gallery-cover .cover-list > li { max-width: 22%; }
    .gallery-cover .cover-list > li img { max-width: 100%; height: auto; }
    .gallery-cover .cover-list > li.empty { width: 22%; height: 60px; }
}

/* touch devices (any width): hover-revealed controls must always be visible,
   and tap targets need a little more meat */
@media (hover: none), (pointer: coarse) {
    .g-actions { display: block !important; }
    .btn-xs { padding: 4px 9px; font-size: 12px; }
    .btn-table-action { margin-bottom: 4px; }
}