/*
| Thu nhỏ đồng bộ theo bề ngang màn hình (SIS).
|
| Vì sao có tệp này: giao diện được dựng cho màn rộng, nên ở laptop 13-14" hoặc
| khi thu cửa sổ thì bảng tràn ra ngoài, cột co không đều, nút rớt xuống dòng và
| chữ vẫn giữ nguyên cỡ. Thay vì sửa từng màn, tệp này khai một HỆ SỐ theo
| breakpoint rồi neo cỡ chữ, khoảng đệm và bề rộng tối thiểu vào hệ số đó — mọi
| phần tử giữ nguyên bố cục, chỉ nhỏ lại theo tỉ lệ.
|
| Nạp SAU cùng trong partials/styles.blade.php.
|
| Vì sao bọc @layer base: bộ CSS gốc có nhiều khai báo !important nằm trong
| cascade layer. Với khai báo !important thì thứ tự lớp ĐẢO NGƯỢC — lớp khai
| trước thắng, còn !important không thuộc lớp nào lại yếu nhất. Đặt trong
| @layer base (khai trước 'components' của bộ gốc) thì rule ở đây mới đè được.
*/

@layer base {
    :root {
        /* Hệ số dùng chung cho chữ, khoảng đệm và chiều cao ô nhập/nút. */
        --sis-ui-scale: 1;
    }

    /* Laptop 15" trở xuống bắt đầu thu nhẹ, mỗi nấc khoảng 4%. */
    @media (max-width: 1600px) { :root { --sis-ui-scale: .96; } }
    @media (max-width: 1440px) { :root { --sis-ui-scale: .93; } }
    @media (max-width: 1366px) { :root { --sis-ui-scale: .90; } }
    @media (max-width: 1280px) { :root { --sis-ui-scale: .87; } }
    @media (max-width: 1152px) { :root { --sis-ui-scale: .84; } }
    @media (max-width: 1024px) { :root { --sis-ui-scale: .82; } }
    @media (max-width: 900px)  { :root { --sis-ui-scale: .80; } }

    /* Thang chữ chung đã có sẵn biến riêng; nhân thêm hệ số màn hình vào đó để
       toàn bộ chữ (nền trang, bảng, nhãn, ô nhập, nút, chú thích) cùng nhỏ lại
       theo một tỉ lệ, không lệch nhau. 1.17 là giá trị đang dùng của hệ thống. */
    @media (max-width: 1600px) {
        :root { --sis-font-scale: calc(1.17 * var(--sis-ui-scale, 1)); }
    }

    /* ── Không cho phần tử con đẩy rộng khung cha ─────────────────────────────
       Đây là nguyên nhân phổ biến nhất của "bể layout": một ô flex/grid có nội
       dung dài (mã lớp, email, URL) mặc định lấy min-width:auto nên không chịu
       co, đẩy cả hàng tràn ra ngoài và sinh cuộn ngang. */
    .app-content .d-flex > *,
    .app-content .row > [class*="col-"],
    .app-content .wq-page > *,
    .app-content .hf-fields > *,
    .portal-content .d-flex > *,
    .fp-content .d-flex > * {
        min-width: 0;
    }

    /* Chuỗi dài không có dấu cách (mã, email, đường dẫn) phải được xuống dòng. */
    .app-content td,
    .app-content th,
    .app-content .card-body,
    .portal-content td,
    .portal-content th {
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    /* Ảnh và khung nhúng không vượt khung. */
    img, svg, video, canvas, iframe, embed, object { max-width: 100%; }

    /* ── Bảng ────────────────────────────────────────────────────────────────
       Giữ nguyên số cột, chỉ thu khoảng đệm và cỡ chữ. Khung bảng luôn có cuộn
       ngang RIÊNG để trang không bao giờ cuộn ngang theo. */
    .app-content .table-responsive,
    .app-content .wq-table-wrap,
    .app-content .ops-table-wrap,
    .app-content .sis-table-wrap {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    @media (max-width: 1366px) {
        .app-content table th,
        .app-content table td {
            padding: calc(9px * var(--sis-ui-scale, 1)) calc(11px * var(--sis-ui-scale, 1)) !important;
        }
    }

    @media (max-width: 1152px) {
        .app-content table th,
        .app-content table td {
            padding: calc(8px * var(--sis-ui-scale, 1)) calc(8px * var(--sis-ui-scale, 1)) !important;
        }
    }

    /* ── Nút ─────────────────────────────────────────────────────────────────
       Nút không được rộng hơn khung chứa và không tự cắt chữ; ở màn hẹp thì
       giảm khoảng đệm trước, giữ nguyên nhãn để người dùng vẫn đọc được. */
    .app-content .btn,
    .portal-content .btn {
        max-width: 100%;
    }

    @media (max-width: 1280px) {
        .app-content .btn,
        .portal-content .btn {
            padding: calc(6px * var(--sis-ui-scale, 1)) calc(10px * var(--sis-ui-scale, 1)) !important;
        }
        .app-content .btn i { margin-right: 3px !important; }
    }

    /* Hàng nút/thanh công cụ luôn được phép xuống dòng thay vì tràn ngang. */
    .app-content .btn-group,
    .app-content .wq-actions,
    .app-content .ops-actions,
    .app-content .sis-toolbar-row,
    .app-content .handover-filterbar,
    .app-content .wq-toolbar {
        flex-wrap: wrap;
    }

    /* ── Ô nhập ──────────────────────────────────────────────────────────────
       Chiều cao ô nhập của theme chốt 42px !important; kéo theo hệ số để ở màn
       hẹp ô và nút cùng thấp xuống, không lệch nhau một nhịp. */
    .app-content .form-control,
    .app-content .form-select,
    .portal-content .form-control {
        max-width: 100%;
    }

    @media (max-width: 1280px) {
        .app-content .handover-filterbar .form-control,
        .app-content .handover-filterbar .btn,
        .app-content .wq-toolbar .form-control,
        .app-content .wq-toolbar .btn {
            height: calc(42px * var(--sis-ui-scale, 1)) !important;
            min-height: calc(42px * var(--sis-ui-scale, 1)) !important;
        }
    }

    /* ── Lưới thẻ / KPI ──────────────────────────────────────────────────────
       Các dải thẻ dùng grid cố định số cột sẽ vỡ ở màn hẹp; đổi sang auto-fit
       để tự bớt cột thay vì bóp méo từng thẻ. */
    @media (max-width: 1280px) {
        .app-content .ops-kpis,
        .app-content .reconciliation-summary,
        .app-content .module-function-grid,
        .app-content .dashboard-grid {
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
        }
    }

    @media (max-width: 768px) {
        .app-content .ops-kpis,
        .app-content .reconciliation-summary,
        .app-content .module-function-grid,
        .app-content .dashboard-grid {
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
        }
    }

    /* ── Ô chọn trong hộp thoại ──────────────────────────────────────────────
       Select2 gắn khung xổ vào <body> với z-index mặc định 1051, trong khi hộp
       thoại của hệ thống nằm ở 1080-2050 — nên bấm vào ô chọn thì danh sách bị
       khuất SAU hộp thoại. Nâng hẳn khung xổ lên trên mọi lớp phủ.
       Kèm theo: bỏ cắt nội dung ở thân hộp thoại, nếu không danh sách xổ ra
       vẫn bị xén đúng mép khung. */
    /* CHỈ nâng khung xổ đang mở — nếu nâng cả .select2-container thì mọi ô
       chọn của trang nền (hàng lọc) cũng trèo lên trên hộp thoại, nhìn như có
       thêm mấy ô "Tất cả" lạ chen vào giữa modal. */
    .select2-container--open,
    .select2-dropdown,
    .select2-container--default .select2-dropdown,
    .ts-dropdown,
    .choices__list--dropdown,
    .flatpickr-calendar {
        z-index: 3000 !important;
    }

    .ops-modal-panel,
    .ops-modal-body,
    .modal-content,
    .modal-body,
    .fac-confirm__panel {
        overflow: visible !important;
    }

    /* Thân hộp thoại vẫn phải cuộn được khi form dài: cho lớp phủ cuộn thay vì
       cắt nội dung bên trong. */
    .ops-modal { overflow: auto !important; }

    /* ── Thứ tự lớp khi mở hộp thoại ─────────────────────────────────────────
       Ô chọn Select2 của trang nền (hàng lọc) đang nổi lên trên hộp thoại: nhìn
       như trong modal tự nhiên mọc thêm mấy ô "Tất cả". Chốt lại thứ tự lớp:
       hộp thoại luôn ở trên cùng, và trong lúc hộp thoại mở thì ô chọn của hàng
       lọc phía sau được ẩn hẳn, không thể chen vào. */
    .ops-modal.is-open { z-index: 4000 !important; }
    .ops-modal.is-open .ops-modal-panel { position: relative; z-index: 1; }
    .select2-container--open,
    .select2-dropdown { z-index: 4100 !important; }

    body:has(.ops-modal.is-open) .handover-filterbar .select2-container,
    body:has(.ops-modal.is-open) .wq-toolbar .select2-container,
    body:has(.modal.show) .handover-filterbar .select2-container {
        visibility: hidden;
    }

    /* Ô chọn nằm TRONG hộp thoại thì vẫn hiện bình thường. */
    body:has(.ops-modal.is-open) .ops-modal .select2-container,
    body:has(.modal.show) .modal .select2-container {
        visibility: visible;
    }

    /* ── Khung trang ─────────────────────────────────────────────────────────
       Chặn cuộn ngang ở cấp trang: mọi thứ rộng quá phải cuộn trong khung của
       chính nó (bảng, biểu đồ), không kéo cả trang lệch sang phải. */
    .app-wrapper,
    .app-content,
    .app-main,
    .portal-content {
        max-width: 100%;
        min-width: 0;
    }
}