/* ============================================================
   OfficeAI — Layout kit dùng chung (al-*)
   Nguồn: docs/plans/34-css-layout-unification-plan.md (contract v1 §1.3)
   Nạp SAU app-chrome.css ở _Layout/_LayoutPublic (OA), _Layout (HRM),
   Default (ISIGN). Đổi file → bump ?v= ở cả 4 layout.

   Phạm vi: CHỈ khung trang + hành vi responsive. Không styling
   component (nút/input/bảng vẫn theo theme cũ). Giá trị lấy từ
   theme-tokens.css, luôn kèm fallback.

   Breakpoint chuẩn (§1.1 — @media không nhận var() nên là convention):
     sm     = max-width: 576px   (điện thoại nhỏ)
     md     = max-width: 640px   (điện thoại)
     mobile = max-width: 767px   (ranh mobile DUY NHẤT, khớp app-chrome)
     lg     = max-width: 992px   (tablet / desktop hẹp)
   Cấm mốc khác trong file này.
   ============================================================ */

/* ---- Khoảng thở quanh vùng nội dung -------------------------
   (yêu cầu 2026-07-17) Main cách topbar/sidebar 10px — áp lên shell
   chung `page-container > page-content > content-wrapper > content`
   của 3 app. Ngoại lệ duy nhất kit đụng class cũ (ghi ở doc 34). */
.content-wrapper { padding: 10px; min-height: 100%;}

/* ---- .al-app-bg — nền app thống nhất ------------------------
   Dùng khi page/layout cần tự cấp nền, không đụng body toàn cục. */
.al-app-bg {
    /*background: var(--surface-page, #f4f6fa);*/
    min-height: 100%;
}

/* .al-app-bg chỉ cấp nền trang. Nền trắng phải được chọn rõ ràng:
   - .al-shell-surface: trắng cả legacy .content shell
   - .al-page--surface: trắng đúng vùng .al-page, tránh mảng trắng quá lớn
   - .al-shell-plain / mặc định: không bọc trắng ở shell */
.content:has(> .al-app-bg) {
    background: transparent;
    border-radius: 0;
    overflow: visible;
}

.content:has(> .al-app-bg.al-shell-surface),
.content:has(> .al-content-surface) {
    /*background: var(--surface, #ffffff);*/
    border-radius: var(--radius-lg, 16px);
    overflow: hidden;
}

/* ---- .al-app-plain — biến thể không nền (yêu cầu 2026-07-17) ----
   Giống .al-app-bg nhưng KHÔNG cấp --surface-page, dùng cho các trang
   muốn bỏ hẳn mảng nền xám/trắng (Dashboard, Payment, Settings...).
   Không đổi .al-app-bg dùng chung toàn app để tránh ảnh hưởng các
   trang khác đang dựa vào nền mặc định. */
.al-app-plain {
    min-height: 100%;
}

.content:has(> .al-app-plain) {
    background: transparent;
    border-radius: 0;
    overflow: visible;
}

.content:has(> .al-app-bg.al-shell-surface) > .al-app-bg,
.content:has(> .al-content-surface) > .al-app-bg {
    /*background: var(--surface, #ffffff);*/
}

.content:has(> .al-app-bg.al-shell-plain),
.content:has(> .al-content-plain) {
    background: transparent;
    border-radius: 0;
    overflow: visible;
}

/* ---- .al-page — vùng nội dung trang -------------------------
   Mặc định: padding chuẩn + max-width 1200px căn giữa.
   Modifier: .al-page--wide / --medium / --narrow / --full. */
.al-page {
    box-sizing: border-box;
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
    padding: var(--space-5, 24px);
}

.al-page--wide { max-width: 1280px; }
.al-page--medium { max-width: 1000px; }
.al-page--narrow { max-width: 760px; }
.al-page--full { max-width: none; }
.al-page--plain { background: transparent; }
.al-page--surface {
    /*background: var(--surface, #ffffff);*/
    border: 1px solid var(--border, #e5e7eb);
    border-radius: var(--radius-lg, 16px);
    box-shadow: var(--shadow-sm, 0 4px 6px -1px rgba(0, 0, 0, .03));
}
.al-page--surface-compact {
    padding: var(--space-4, 16px);
    border-radius: var(--radius-md, 12px);
}

/* ---- .al-page-head — hàng tiêu đề trang ---------------------
   Title bên trái + .al-page-actions bên phải; tự wrap khi hẹp. */
.al-page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3, 12px);
    margin-bottom: var(--space-5, 24px);
}

.al-page-title {
    margin: 0;
    color: var(--color-ink, #0f172a);
    font-size: 28px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: 0;
}

.al-page-subtitle {
    margin: var(--space-1, 4px) 0 0;
    color: var(--color-text-muted, #6b7280);
    font-size: 14px;
    line-height: 1.5;
}

.al-page-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2, 8px);
    margin-left: auto;
}

/* ---- .al-card — surface/card chuẩn -------------------------- */
.al-card {
    box-sizing: border-box;
    background: var(--surface, #ffffff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: var(--radius-lg, 16px);
    box-shadow: var(--shadow-sm, 0 4px 6px -1px rgba(0, 0, 0, .03));
}

.al-card--compact { border-radius: var(--radius-md, 12px); }

.al-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3, 12px);
    padding: var(--space-5, 24px);
    border-bottom: 1px solid var(--border-subtle, #f3f4f6);
}

.al-card-body { padding: var(--space-5, 24px); }

.al-card-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--space-3, 12px);
    padding: var(--space-4, 16px) var(--space-5, 24px);
    border-top: 1px solid var(--border-subtle, #f3f4f6);
}

.al-section + .al-section,
.al-card + .al-card {
    margin-top: var(--space-4, 16px);
}

.al-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-4, 16px);
}

/* ---- .al-grid — grid thẻ tự co ------------------------------
   Số cột tự tính theo --al-card-min (mặc định 280px), không cần
   media query; min() chống tràn khi card-min > viewport. */
.al-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(var(--al-card-min, 280px), 100%), 1fr));
    gap: var(--space-4, 16px);
}

/* ---- .al-form-grid — form nhiều cột -------------------------
   Số cột chỉnh bằng --al-form-cols (mặc định 2). Field muốn chiếm
   cả hàng: thêm .al-span-all. */
.al-form-grid {
    display: grid;
    grid-template-columns: repeat(var(--al-form-cols, 2), minmax(0, 1fr));
    gap: var(--space-4, 16px) var(--space-5, 24px);
}

.al-span-all { grid-column: 1 / -1; }

/* ---- .al-table-wrap — bọc bảng thường -----------------------
   Bảng giữ min-width của nó và cuộn ngang TRONG khung này;
   trang không bao giờ tràn ngang. (advanceGrid KHÔNG dùng cái này
   — đã có shim riêng ở HRM.) */
.al-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ---- .al-actions — hàng nút hành động ---------------------- */
.al-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3, 12px);
}

/* ---- Type scale mobile — chữ TOÀN APP nhỏ lại một nấc --------
   (yêu cầu 2026-07-17, áp cho mọi trang của 3 app qua layout).
   Theme chỉ đặt px tường minh ở body/.btn/.btn-lg/heading/.panel-title —
   phần còn lại (form, bảng, dropdown, nav) inherit từ body nên tự nhỏ theo.
   Trang nào cần giữ/chỉnh riêng: override trong pages/*.css (nạp sau kit). */
/* mobile (<=767px, khớp app-chrome) */
@media (max-width: 767px) {
    body { font-size: 12px; }

    .btn { font-size: 12px; }
    .btn-lg { font-size: 13px; }

    h1, .h1 { font-size: 22px; }
    h2, .h2 { font-size: 20px; }
    h3, .h3 { font-size: 18px; }
    h4, .h4 { font-size: 17px; }
    h5, .h5 { font-size: 15px; }
    h6, .h6 { font-size: 14px; }

    .panel-title { font-size: 14px; }
}

/* ---- Toolbar (.heading-elements) luôn hiện nút ở mobile ------
   (yêu cầu 2026-07-17) Theme Limitless mặc định thu toolbar vào nút
   "…" (.heading-elements-toggle) ở <=768px. Bỏ hành vi đó toàn app:
   nút hiện thẳng, wrap xuống dòng khi hẹp.
   Mốc 768 CỐ Ý ≠ 767: phải trùng mốc collapse của theme để override đủ. */
@media (max-width: 768px) {
    .heading-elements-toggle { display: none !important; }

    .heading-elements:not(.visible-elements) { display: block; }

    .heading-elements {
        position: static;
        height: auto;
        margin-top: 0;
    }

    .heading-elements .nav.navbar-nav {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
        margin: 0;
        padding-left: 0;
        width: 100%;
    }

    .heading-elements .nav.navbar-nav > li {
        float: none;
        margin: 0;
    }
}

/* ---- Tiện ích hiển thị theo ranh mobile (767) --------------- */
/* mobile (<=767px, khớp app-chrome) */
@media (max-width: 767px) {
    .al-page { padding: 10px; }

    .al-page-head {
        gap: var(--space-2, 8px);
        margin-bottom: var(--space-4, 16px);
    }

    .al-page-title {
        font-size: 22px;
        line-height: 1.25;
    }

    .al-page-subtitle {
        font-size: 13.5px;
    }

    .al-card {
        border-radius: 14px;
    }

    .al-card-head,
    .al-card-body {
        padding: 14px;
    }

    .al-card-footer {
        padding: 12px 14px 14px;
    }

    .al-form-grid { grid-template-columns: 1fr; }

    .al-hide-mobile { display: none !important; }

    .al-stack-mobile {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }
}

/* desktop (>=768px) */
@media (min-width: 768px) {
    .al-hide-desktop { display: none !important; }
}

/* sm (<=576px) */
@media (max-width: 576px) {
    /* nút ở header trang: xuống hàng riêng, chia đều bề ngang */
    .al-page-head { align-items: stretch; }

    .al-page-actions {
        width: 100%;
        margin-left: 0;
    }

    .al-page-actions > * { flex: 1 1 auto; }

    .al-actions--stack-sm {
        flex-direction: column;
        align-items: stretch;
    }

    .al-actions--stack-sm > * { width: 100%; }
}