/* ============================================================================
   Lớp responsive dùng chung cho các app quản trị Forsun (Blazor + Radzen).
   Mốc gập: 768px — trùng mốc reflow DataGrid và sidebar của Radzen.

   Quy tắc: chỉ viết ở đây thứ Radzen KHÔNG có sẵn. Cái gì Radzen lo được thì
   dùng utility/parameter của Radzen, không đẻ media query mới.
   ============================================================================ */

:root {
    --app-header-height: 60px;
    --app-sidebar-mobile-width: min(80vw, 280px);
    --app-touch-target: 44px;
}

/* ────────────────────────────────────────────────────────────────────────────
   SIDEBAR — phủ đè thay vì đẩy nội dung

   RadzenLayout là CSS grid "auto 1fr": sidebar chiếm hẳn một cột nên khi mở ra
   nó ĐẨY nội dung. Trên màn hẹp, đẩy 250px là nuốt hơn nửa màn hình.
   Kéo sidebar ra khỏi luồng bằng position:fixed → cột grid co về 0, nội dung
   giữ nguyên bề ngang, sidebar trượt lên trên như ngăn kéo.
   ──────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* Đóng là trạng thái mặc định của màn hẹp — quyết định bằng CSS chứ không
       chờ JS, nên lần vẽ đầu tiên không chớp một nhịp menu mở rồi mới thu. */
    .rz-layout .rz-sidebar {
        position: fixed !important;
        top: var(--app-header-height);
        bottom: 0;
        left: 0;
        z-index: 900;
        width: 0 !important;
        opacity: 0;
        transition: width .25s ease, opacity .25s ease;
    }

    /* MainLayout gắn lớp này khi người dùng bấm mở menu. */
    .rz-layout .rz-sidebar.app-sidebar-open {
        width: var(--app-sidebar-mobile-width) !important;
        opacity: 1;
        box-shadow: 4px 0 24px rgba(0, 0, 0, .28);
    }

    /* Nền mờ sau ngăn kéo — chạm vào là đóng menu (handler nằm ở MainLayout). */
    .app-sidebar-backdrop {
        position: fixed;
        top: var(--app-header-height);
        inset-inline: 0;
        bottom: 0;
        z-index: 899;
        background: rgba(0, 0, 0, .45);
        backdrop-filter: blur(2px);
    }

    /* Mục menu đủ to để chạm bằng ngón tay. */
    .modern-sidebar .rz-navigation-item-link {
        min-height: var(--app-touch-target);
        display: flex;
        align-items: center;
    }
}

/* Nút hamburger là dấu hiệu duy nhất ở góc trái header, hiện ở mọi bề ngang màn hình. */
.app-menu-toggle {
    display: inline-flex;
    width: var(--app-touch-target);
    height: var(--app-touch-target);
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 10px;
    background: rgba(255, 255, 255, .18);
    color: #fff;
    cursor: pointer;
}

.app-menu-toggle:active {
    background: rgba(255, 255, 255, .32);
}

.app-menu-toggle svg {
    width: 24px;
    height: 24px;
}

/* Cụm góc trái bọc hamburger + tên hệ thống thành một ô của RadzenStack.
   Vùng bấm nằm ở nút bên trong, nên cụm này không còn phản hồi khi rê/bấm. */
.header-logo-section {
    margin-left: 0;
    padding-left: 0;
    cursor: default;
}

.header-logo-section:hover {
    background: none;
}

.header-logo-section:active {
    transform: none;
}

/* ────────────────────────────────────────────────────────────────────────────
   HEADER — còn hamburger + logo bên trái, avatar bên phải
   ──────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .modern-header {
        padding: 0 12px !important;
    }

    /* Đồng hồ và chức danh là thông tin phụ, nhường chỗ cho chuông và avatar. */
    .header-clock,
    .user-info-section .user-role {
        display: none !important;
    }

    .user-info-section .user-name {
        max-width: 22vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Màn hẹp chỉ giữ hamburger bên trái. Ô logo là trang trí, nhường chỗ cho
       chuông và avatar — bỏ đi thì header hết chật. Desktop vẫn hiện. */
    .logo-icon {
        display: none !important;
    }

    .custom-dropdown-menu .dropdown-item {
        min-height: var(--app-touch-target);
    }

    /* Bảng thông báo neo mép phải và rộng cố định — màn hẹp hơn nó thì bị cắt mất
       mép trái. Trải hết bề ngang, chừa lề hai bên. */
    /* NotificationBell nạp khối <style> của nó trong body, tức là SAU file này, và
       neo bảng bằng top:calc(100% + 8px). Khi bảng đổi sang position:fixed thì 100%
       tính theo chiều cao MÀN HÌNH — bảng rơi xuống dưới đáy, bấm chuông như không
       có gì hiện ra. Mọi khai báo ở đây phải !important để thắng khối đó. */
    .notif-panel {
        position: fixed !important;
        top: var(--app-header-height) !important;
        inset-inline: 8px !important;
        width: auto !important;
        max-width: none !important;
        max-height: calc(100dvh - var(--app-header-height) - 16px) !important;
        display: flex !important;
        flex-direction: column;
    }

    /* Thân bảng co giãn theo chỗ còn lại, đầu và chân bảng luôn thấy được. */
    .notif-panel-body {
        flex: 1 1 auto;
        max-height: none !important;
    }

    /* Nhãn và ô nhập của trang cấu hình xếp chồng thay vì chia đôi hàng ngang. */
    .set-row {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }

    .set-input {
        width: 100% !important;
        max-width: none !important;
    }
}

/* ────────────────────────────────────────────────────────────────────────────
   BẢNG DỰNG BẰNG THẺ <table> THUẦN

   Radzen gập được lưới của nó vì nó chèn sẵn nhãn tên cột vào từng ô. Bảng
   viết tay không có nhãn đó, nên nhãn phải do chính ô mang theo qua thuộc
   tính data-label. Gắn class app-reflow-table lên thẻ table để bật khối này.
   ──────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .app-reflow-table,
    .app-reflow-table tbody {
        display: block;
    }

    .app-reflow-table thead {
        display: none;
    }

    .app-reflow-table tbody tr {
        display: block;
        margin-bottom: 12px;
        border: 1px solid #e8ecf1;
        border-radius: 10px;
        background: #fff;
        box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
        overflow: hidden;
    }

    .app-reflow-table tbody td {
        display: block;
        width: auto !important;
        border: none !important;
        padding: 8px 14px !important;
    }

    .app-reflow-table tbody td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: .72rem;
        font-weight: 600;
        letter-spacing: .02em;
        text-transform: uppercase;
        color: #8a93a2;
        margin-bottom: 2px;
    }

    /* Cột phụ của bảng viết tay — tương đương Visible="@(!IsMobile)" của lưới Radzen. */
    .app-hide-mobile {
        display: none !important;
    }
}

/* ────────────────────────────────────────────────────────────────────────────
   DANH SÁCH TICK CHỌN (phân quyền)

   Mỗi dòng quyền chỉ cao chừng 28px — nhỏ hơn đầu ngón tay. Nới cao dòng và
   phóng ô tick. Rule của component là CSS scoped (kèm thuộc tính b-xxxx) nên
   specificity cao hơn, phải dùng !important mới đè được.
   ──────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .checkbox-item label,
    .group-select-all {
        min-height: var(--app-touch-target) !important;
        padding: 8px 10px !important;
    }

    .checkbox-item input[type="checkbox"],
    .group-select-all input[type="checkbox"] {
        width: 20px;
        height: 20px;
        flex: 0 0 auto;
    }

    .checkbox-group {
        padding: 14px !important;
    }

    /* Bỏ thụt lề để tên quyền dài không bị bó lại. */
    .group-items {
        padding-left: 0 !important;
    }
}

/* ────────────────────────────────────────────────────────────────────────────
   BỐ CỤC LƯỚI NHIỀU CỘT (dashboard)

   Các khối dashboard khai số cột thẳng trong thuộc tính style. `1fr` là
   `minmax(auto, 1fr)` — cận dưới là min-content, nên thẻ KPI không co xuống
   dưới bề rộng nội dung của nó và lưới đội ra ngoài màn hẹp. Ép về một cột.
   ──────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .app-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ────────────────────────────────────────────────────────────────────────────
   MODAL — tràn kín màn hình

   Call site truyền bề rộng thẳng vào inline style (Style="width:50vw"). 50vw
   trên máy 390px chỉ còn 195px. Inline style thắng CSS thường, nên phải dùng
   !important — declaration !important của stylesheet đứng trên inline.
   ──────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .custom-modal-container {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        border-radius: 0 !important;
    }

    .custom-modal-container.custom-confirm-dialog {
        height: auto !important;
        max-height: 90% !important;
        border-radius: 12px !important;
        margin: 0 16px;
    }

    .custom-modal-overlay {
        align-items: stretch;
    }

    .custom-modal-overlay:has(> .custom-confirm-dialog) {
        align-items: center;
    }

    /* BaseModal nạp khối <style> của nó trong body, tức là SAU file này. Các rule
       dưới đây đè lên kích thước bản desktop của nó nên phải giữ !important. */
    .custom-modal-header {
        padding: 20px 16px 12px !important;
    }

    .custom-modal-title {
        font-size: 1.25rem !important;
    }

    .modal-body {
        padding: 16px !important;
    }

    /* Nút chính nằm dưới cùng, trải hết bề ngang — ngón cái với tới dễ nhất. */
    .modal-sticky-footer,
    .custom-modal-footer {
        padding: 12px 16px !important;
        flex-direction: column-reverse !important;
    }

    .modal-sticky-footer .custom-btn,
    .modal-sticky-footer button,
    .custom-modal-footer .custom-btn,
    .custom-btn {
        width: 100% !important;
        min-height: var(--app-touch-target);
    }
}

/* ────────────────────────────────────────────────────────────────────────────
   TRANG ĐĂNG NHẬP

   .login-wrapper khoá cứng position:fixed + height:100vh + overflow:hidden.
   Trên điện thoại, 100vh cao hơn vùng thật sự nhìn thấy (thanh địa chỉ trình
   duyệt) nên đáy form bị cắt mà không cuộn tới được; bàn phím bật lên còn ép
   thêm một nhịp nữa. Trả lại quyền cuộn và đo bằng 100dvh.
   ──────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .login-wrapper {
        position: relative !important;
        height: auto !important;
        min-height: 100dvh;
        overflow: visible !important;
    }

    /* Khối giới thiệu co lại còn logo + tên, nhường màn hình cho ô nhập. */
    .left-section {
        flex: 0 0 auto !important;
        padding: 24px 20px !important;
    }

    .left-section .welcome-text,
    .left-section .footer {
        display: none;
    }

    .left-section .brand-icon svg {
        width: 44px;
        height: 44px;
    }

    .right-section {
        flex: 1 1 auto !important;
        padding: 28px 20px !important;
    }

    /* Bàn phím điện thoại tự phóng to khi ô nhập nhỏ hơn 16px. */
    .right-section input {
        font-size: 16px !important;
    }
}

/* ────────────────────────────────────────────────────────────────────────────
   DATAGRID — làm đẹp chế độ reflow

   Radzen lo phần gập (AppDataGrid bật sẵn Responsive): thead ẩn, mỗi ô thành
   một dòng "nhãn + giá trị". Phần dưới đây chỉ vẽ lại cho ra hình thẻ.
   ──────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* Trang khai Style="max-height:60vh" để bảng tự cuộn trong khung trên desktop.
       Gập thành thẻ rồi thì khung cao 60vh chỉ còn ~400px — thả cho trang cuộn. */
    /* Khung lưới phải trong suốt thì nền xám của trang mới lọt vào khoảng hở giữa
       các thẻ. Để nguyên nền trắng + viền của Radzen thì thẻ trắng nằm trên khung
       trắng: khoảng hở tuy có thật vẫn không nhìn ra, còn viền khung thành hai
       đường ray dọc nối các thẻ lại thành một khối. */
    .rz-datatable-reflow {
        max-height: none !important;
        background: transparent !important;
        border: 0 !important;
    }

    /* Mỗi bản ghi là một thẻ tách rời. Khoảng hở phải rõ hơn vạch kẻ giữa các ô
       bên trong thẻ, nếu không cả danh sách đọc ra thành một khối liền mạch. */
    .rz-datatable-reflow .rz-data-row {
        margin-bottom: 14px;
        border: 1px solid #e6ebf1;
        border-radius: 14px;
        background: #fff;
        /* Hai lớp bóng: lớp sát tạo mép, lớp toả tạo độ nổi — thẻ bồng lên khỏi
           nền xám mà không cần viền đậm. */
        box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 6px 16px rgba(15, 23, 42, .07);
        overflow: hidden;
    }

    /* Chữ của giá trị đặt ở ô, chữ của nhãn đặt ở span bên trong đè lại —
       hai cỡ chữ khác hẳn nhau thì đọc lướt vẫn tách được nhãn với nội dung. */
    .rz-datatable-reflow .rz-data-row > td {
        padding: 9px 16px !important;
        font-size: .95rem;
        font-weight: 500;
        line-height: 1.35;
        color: #0f172a;
    }

    /* Đã có nhãn phân biệt từng trường, thêm vạch kẻ nữa thì thẻ đọc ra thành
       cái bảng bị bẻ dọc. Giãn cách thay cho kẻ. */
    .rz-datatable-reflow .rz-data-row > td {
        border: none !important;
    }

    .rz-datatable-reflow .rz-data-row > td:first-child {
        padding-top: 12px !important;
    }

    .rz-datatable-reflow .rz-data-row > td:last-child {
        padding-bottom: 12px !important;
    }

    /* Dòng kẻ zebra của Radzen làm thẻ chẵn/lẻ khác màu, trông như hai khối dính nhau. */
    .rz-datatable-reflow .rz-data-row.rz-datatable-odd {
        background: #fff;
    }

    .rz-datatable-reflow .rz-data-row > td .rz-column-title {
        font-size: .68rem;
        font-weight: 600;
        letter-spacing: .07em;
        text-transform: uppercase;
        color: #94a3b8;
        line-height: 1.2;
        margin-bottom: 3px;
    }

    /* Cột ghim chỉ có nghĩa khi bảng còn cuộn ngang. Bảng đã gập thành thẻ thì
       viền và bóng đổ của nó thành vệt kẻ dọc vô nghĩa ở dòng đầu mỗi thẻ. */
    .rz-datatable-reflow .rz-data-row > td.rz-frozen-cell,
    .rz-datatable-reflow .rz-data-row > td[class*="rz-frozen-cell"] {
        position: static !important;
        border-inline-end: none !important;
        box-shadow: none !important;
    }

    /* Cột nút không đặt Title — bỏ dòng nhãn rỗng phía trên nút. */
    .rz-datatable-reflow .rz-data-row > td .rz-column-title:empty {
        display: none;
    }

    /* Nút trong thẻ trải hết bề ngang cho dễ chạm. */
    .rz-datatable-reflow .rz-data-row > td .rz-button {
        min-height: var(--app-touch-target);
    }

    /* Thanh phân trang xuống dòng thay vì tràn ngang. */
    .rz-paginator {
        flex-wrap: wrap;
        gap: 4px;
    }
}