/*
 * ============================================================
 * tablet-responsive.css
 * Konnect System — Tablet-only layout (iPad, Android tablets)
 *
 * Load after mobile-responsive.css. Phone rules stay in
 * mobile-responsive.css; this file adds tablet-range tweaks only.
 *
 * Goals:
 *   - Same header *pattern* as desktop (inline search + icons), but
 *     scaled down — not the magnifier-only mobile pattern.
 *   - Compact Konnect2.ico (WK) mark like phones, not the wide PNG wordmark.
 *
 * Primary band: 721px – 1024px (navbar + pages). Large iPad / touch slates
 * up to 1366px use pointer: coarse so laptop windows are not forced into
 * tablet UI.
 * ============================================================
 */

/* ── Compact WK logo (match phones ≤576px) — tablet widths where PNG was shown ── */
@media (min-width: 577px) and (max-width: 1024px) {
    .main-header .brand-image {
        content: url('../images/Logo/Konnect2.ico');
        width: 32px !important;
        height: 32px !important;
        object-fit: contain;
    }
}

/* Large iPad / tablet landscape (e.g. 12.9" Pro) — still touch, still compact mark */
@media (min-width: 1025px) and (max-width: 1366px) and (pointer: coarse) {
    .main-header .brand-image {
        content: url('../images/Logo/Konnect2.ico');
        width: 32px !important;
        height: 32px !important;
        object-fit: contain;
    }
}

/* ── Header: desktop-style inline search, compact (not icon-only mobile search) ──
   721px+ covers iPad mini portrait (~744) and standard tablets; below that stays phone UI. */
@media (min-width: 721px) and (max-width: 1024px) {
    .main-header.navbar {
        flex-wrap: nowrap !important;
        height: 52px !important;
        min-height: 52px !important;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    /* Left cluster: logo + search shares row; search grows and centers its field */
    .main-header .navbar-nav:first-child {
        flex: 1 1 auto;
        min-width: 0;
        align-items: center;
    }

    .main-header .nav-item-global-search {
        position: static !important;
        margin-left: 0 !important;
        left: auto !important;
        flex: 1 1 auto;
        display: flex !important;
        justify-content: center;
        align-items: center;
        min-width: 0;
        padding-left: 0.35rem;
        padding-right: 0.35rem;
    }

    /* Web layout: full inline bar (below lg Bootstrap hides this — force on tablet) */
    .main-header .nav-item-global-search .d-none.d-lg-flex {
        display: flex !important;
    }

    .main-header .nav-item-global-search .d-block.d-lg-none {
        display: none !important;
    }

    .main-header .nav-item-global-search .input-group {
        width: min(480px, calc(100vw - 260px)) !important;
        max-width: 100%;
    }

    .main-header .nav-item-global-search .form-control {
        font-size: 0.875rem;
    }

    .main-header .nav-link {
        padding-left: 0.4rem !important;
        padding-right: 0.4rem !important;
    }

    .main-header .nav-item .nav-link img {
        width: 28px;
        height: 28px;
    }

    /* Content area: comfortable horizontal padding without crowding */
    .content .container-fluid,
    .content > .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .main-header.navbar .container {
        max-width: 100%;
    }

    /* Profile modules: main column breathing room */
    .page-employer-profile .col-12.col-md-9,
    .page-employee-profile .col-12.col-md-9,
    .page-organization-profile .col-12.col-md-9 {
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
    }

    /* Tab strips: scroll horizontally when many tabs (touch-friendly) */
    .nav-pills.flex-wrap {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 0.5rem;
        padding-bottom: 0.25rem;
    }

    .nav-pills.flex-wrap .nav-item {
        flex-shrink: 0;
    }

    .card {
        margin-bottom: 1rem;
    }

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

/* Large touch tablets: compact bar + centered search (same pattern as 721–1024) */
@media (min-width: 1025px) and (max-width: 1366px) and (pointer: coarse) {
    .main-header.navbar {
        height: 52px !important;
        min-height: 52px !important;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    .main-header .navbar-nav:first-child {
        flex: 1 1 auto;
        min-width: 0;
        align-items: center;
    }

    .main-header .nav-item-global-search {
        position: static !important;
        margin-left: 0 !important;
        left: auto !important;
        flex: 1 1 auto;
        display: flex !important;
        justify-content: center;
        align-items: center;
        min-width: 0;
    }

    .main-header .nav-item-global-search .input-group {
        width: min(560px, calc(100vw - 280px)) !important;
    }

    .main-header .nav-item-global-search .form-control {
        font-size: 0.875rem;
    }
}