/* ══════════════════════════════════════════════════════════════════════
   DTSC Engineering Library — Mobile Responsive Stylesheet (v2.1.0)
   - Khung điều hướng (sidebar + thanh trên) nằm ở css/shell.css
   - Lưới lọc dữ liệu compact (2-3 cột/hàng), không chiếm cả dòng
   ══════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════
   @media ≤ 768px — TABLET & SMARTPHONE
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* ── E. Main Container ── */
    .main-container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 0.45rem !important;
        margin: 0.35rem auto !important;
    }

    /* ── F. Page Title Bar ── */
    .page-title-bar {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        margin-bottom: 0.45rem !important;
        gap: 0.4rem !important;
    }

    .page-title-bar h1 {
        font-size: 1rem !important;
        margin: 0 !important;
        line-height: 1.2 !important;
    }

    .page-subtitle {
        display: none !important; /* Ẩn subtitle trên mobile để tiết kiệm diện tích */
    }

    /* ── G. Filter Section: Compact Multi-column Grid ── */
    .filter-section {
        padding: 0.4rem 0.55rem !important;
        margin-bottom: 0.4rem !important;
        border-radius: var(--radius-sm) !important;
    }

    .filter-row {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 4px 6px !important;
        margin-bottom: 0.3rem !important;
        align-items: end !important;
    }

    .filter-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 1px !important;
        min-width: 0 !important;
        width: 100% !important;
        margin: 0 !important;
    }

    .filter-item label {
        font-size: 0.7rem !important;
        font-weight: 600 !important;
        color: #475569 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        line-height: 1.1 !important;
        margin: 0 !important;
    }

    .filter-item select,
    .filter-item input {
        width: 100% !important;
        min-width: 0 !important;
        height: 28px !important;
        padding: 1px 4px !important;
        font-size: 0.78rem !important;
        border: 1px solid #CBD5E1 !important;
        border-radius: 3px !important;
        background-color: #FFFFFF !important;
        box-sizing: border-box !important;
    }

    /* Nút Bỏ lọc và đếm số lượng: Chiếm trọn hàng cuối */
    .filter-item:last-child {
        grid-column: 1 / -1 !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding-top: 2px !important;
        margin-top: 2px !important;
    }

    /* ── H. Form Row: 2-Column Grid thay vì 1 cột dọc ── */
    .form-row {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px !important;
    }

    .form-row > * {
        flex: auto !important;
        min-width: 0 !important;
    }

    .form-group {
        margin-bottom: 0.4rem !important;
    }

    .form-group label,
    .form-label {
        font-size: 0.74rem !important;
        margin-bottom: 0.15rem !important;
    }

    .form-control, .form-select {
        height: 30px !important;
        font-size: 0.8rem !important;
        padding: 2px 6px !important;
    }

    /* ── I. Tab Navigation ── */
    .tab-nav {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin-bottom: 0.6rem !important;
    }

    .tab-nav::-webkit-scrollbar {
        display: none;
    }

    .tab-btn {
        white-space: nowrap;
        font-size: 0.8rem;
        padding: 0.4rem 0.65rem;
    }

    /* ── J. Property Grid ── */
    .prop-grid {
        grid-template-columns: 1fr !important;
        padding: 0.5rem !important;
        gap: 0.35rem !important;
    }

    .prop-item {
        font-size: 0.8rem !important;
        padding-bottom: 0.15rem !important;
    }

    /* ── K. Grid Layouts: Force 1 Column ── */
    .grid-sidebar-main,
    .grid-main-sidebar,
    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr !important;
        gap: 0.65rem !important;
    }

    /* ── L. Modals ── */
    .modal-dialog.xl,
    .modal-dialog.lg,
    .modal-dialog {
        max-width: 95vw !important;
    }

    .modal-backdrop {
        padding: 0.5rem;
    }

    /* ── M. Cards ── */
    .card {
        padding: 0.65rem !important;
        margin-bottom: 0.65rem !important;
        border-radius: var(--radius-sm) !important;
    }

    .card-header {
        margin-bottom: 0.45rem !important;
        padding-bottom: 0.3rem !important;
    }

    .card-header h2,
    .card-header h3 {
        font-size: 0.88rem !important;
    }

    /* ── N. Section Header Bar ── */
    .section-header-bar {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        margin: 0.3rem 0 0.15rem !important;
    }

    .section-header-bar h2 {
        font-size: 0.82rem !important;
    }

    /* ── O. SVG Viewers ── */
    .viewer-container {
        min-height: 180px !important;
        height: 220px !important;
    }

    .svg-viewer-box {
        height: 220px !important;
        min-height: 160px !important;
    }

    /* ── P. Action Bars ── */
    .footer-action-bar,
    .action-bar-flex {
        flex-wrap: wrap !important;
        gap: 0.4rem !important;
        justify-content: center !important;
        font-size: 0.72rem !important;
        padding: 0.35rem 0.5rem !important;
        text-align: center !important;
    }

    /* ══ PAGE-SPECIFIC: PEB Frame ══ */
    .results-table-wrap {
        height: auto !important;
        min-height: 100px !important;
        max-height: 200px !important;
        margin-bottom: 0.3rem !important;
    }

    .comp-table-wrap {
        max-height: 160px !important;
        margin-bottom: 0.3rem !important;
    }

    .viewer-caption {
        font-size: 0.65rem !important;
        line-height: 1.2 !important;
        margin: 0.2rem 0 !important;
    }

    /* ══ PAGE-SPECIFIC: Steel Library ══ */
    #tab-catalog .card .form-row {
        grid-template-columns: 1fr 1fr !important;
    }

    #tab-catalog .card .form-row > div:first-child {
        grid-column: 1 / -1 !important; /* Search box full width */
    }

    #tab-catalog .card .form-row > div:last-child {
        grid-column: 1 / -1 !important;
        text-align: center !important;
    }

    /* ══ PAGE-SPECIFIC: Purlin Library ══ */
    .purlin-top-bar {
        flex-wrap: wrap !important;
        gap: 0.4rem !important;
        margin-bottom: 0.3rem !important;
    }

    .purlin-top-actions {
        width: 100% !important;
        justify-content: space-between !important;
        gap: 0.3rem !important;
    }

    .purlin-title-group h1 {
        font-size: 0.95rem !important;
    }

    .purlin-workspace-grid {
        grid-template-columns: 1fr !important;
        gap: 0.5rem !important;
    }

    .live-plan-card {
        grid-column: span 1 !important;
        min-height: 240px !important;
    }

    .purlin-main-table-wrap {
        height: auto !important;
        max-height: 220px !important;
        margin-bottom: 0.35rem !important;
    }

    .svg-plan-canvas-wrap {
        min-height: 180px !important;
    }

    /* ══ PAGE-SPECIFIC: Floor Beam ══ */
    .fb-workspace-grid {
        grid-template-columns: 1fr !important;
        gap: 0.5rem !important;
    }

    .fb-main-table-wrap {
        height: auto !important;
        max-height: 220px !important;
    }

    .range-box {
        display: flex !important;
        align-items: center !important;
        gap: 2px !important;
        width: 100% !important;
    }

    .range-box input {
        width: calc(50% - 6px) !important;
        height: 26px !important;
        text-align: center !important;
        font-size: 0.75rem !important;
        padding: 1px !important;
    }

    .fb-card {
        height: auto !important;
        min-height: 180px !important;
    }

    .fb-svg-box {
        min-height: 180px !important;
    }

    /* ══ PAGE-SPECIFIC: Budget Estimate ══ */
    #inp-bg-dai, #inp-bg-rong, #inp-bg-caovai, #inp-bg-buoc, #inp-bg-docmai {
        height: 28px !important;
    }

    .spread-grid th,
    .spread-grid td {
        padding: 2px 3px !important;
        font-size: 0.75rem !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   @media (480px ≤ width ≤ 768px) — TABLET PORTRAIT / PHONE LANDSCAPE
   ══════════════════════════════════════════════════════════════════════ */
@media (min-width: 480px) and (max-width: 768px) {
    /* 3-4 cột cho các ô filter */
    .filter-row {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .form-row {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   @media ≤ 380px — SMARTPHONE CỰC NHỎ
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 380px) {
    .filter-item label {
        font-size: 0.65rem !important;
    }

    .filter-item select,
    .filter-item input {
        font-size: 0.72rem !important;
    }
}