/* bm — chỉ những gì theme Paces chưa có; phần còn lại dùng app.min.css + jira-skin.min.css */

/* CKEditor 5 trong khung soạn thư của theme */
.bm-editor-host { display: flex; flex-direction: column; min-height: 320px; }
.bm-editor-host .ck.ck-editor { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.bm-editor-host .ck.ck-editor__main { flex: 1; min-height: 0; overflow-y: auto; }
.bm-editor-host .ck.ck-editor__editable_inline {
    min-height: 260px; border: 0 !important; box-shadow: none !important; padding: 12px 20px;
}
.bm-editor-host .ck.ck-toolbar {
    border: 0; border-bottom: 1px solid var(--color-default-300, #E4E6EA);
    background: transparent; border-radius: 0;
}
/* CKEditor trong hộp trả lời (details) */
.bm-reply-host .ck.ck-editor__editable_inline {
    min-height: 120px; max-height: 260px; overflow-y: auto;
    border: 0 !important; box-shadow: none !important; padding: 10px 14px;
}
.bm-reply-host .ck.ck-toolbar { border: 0; border-bottom: 1px solid var(--color-default-300, #E4E6EA); background: transparent; }

/* ── Khung chính ────────────────────────────────────────────────────────────
   Theme khoá chiều cao theo 100vh trừ hằng số (h-[calc(100vh-360px)]).
   Trên màn thấp (vd 800x453) khung danh sách bị bóp còn 93px — chỉ thấy 2 dòng.
   Thay bằng: co giãn theo viewport NHƯNG có sàn tối thiểu. */
.bm-shell { min-height: 480px; }
.bm-list-scroll {
    height: auto !important;
    min-height: 320px;
    max-height: calc(100vh - 260px);
    overflow-y: auto;
}
@media (min-width: 1024px) {
    /* App-shell: cả trang khít đúng viewport, chỉ danh sách/nội dung cuộn — không
       bao giờ cuộn cả trang (đúng kiểu ứng dụng email, không phải trang tài liệu). */
    html, body { height: 100%; overflow: hidden; }
    .wrapper { height: 100vh; display: flex; flex-direction: column; }
    .page-content { flex: 1; min-height: 0; display: flex; flex-direction: column; }
    /* main có min-height của theme (806px) nhưng nội dung chỉ 695px -> 111px trống chết
       phía trên footer. Cho khung TỰ LẤP ĐẦY main thay vì tính cứng theo 100vh. */
    main { flex: 1; min-height: 0; display: flex; flex-direction: column; }
    main > .container-fluid { flex: 1; min-height: 0; display: flex; flex-direction: column; }
    .bm-shell { flex: 1; height: auto !important; min-height: 420px; }
    /* cột nội dung cao bằng sidebar -> hai card thẳng đáy, không lệch */
    .bm-shell > .w-full { display: flex; }
    .bm-shell > .w-full > .card { display: flex; flex-direction: column; flex: 1; min-height: 0; }
    .bm-list-scroll { flex: 1; min-height: 0; max-height: none; }
}
/* Dưới lg sidebar chạy offcanvas. KHÔNG được display:none thẻ bọc — #emailSidebaroffcanvas
   nằm BÊN TRONG nó, ẩn cha là giết luôn sidebar mobile (mất Soạn thư + thư mục + nhãn).
   Chỉ cần bỏ viền/nền của thẻ bọc, để panel offcanvas tự lo hiển thị. */
@media (max-width: 1023.98px) {
    .bm-sidecard { background: transparent; border: 0; box-shadow: none; margin: 0; }
}

/* Sidebar email: nội dung dài hơn khung -> phải cuộn TRONG card, không tràn ra ngoài
   (đo được: content 664px / khung 520px, mục Nhãn + Quản trị bị rơi ra ngoài) */
#emailSidebaroffcanvas { display: flex; flex-direction: column; }
#emailSidebaroffcanvas > .card-body {
    display: flex; flex-direction: column; min-height: 0; overflow: hidden;
}
#emailSidebaroffcanvas > .card-body > .mt-5 {
    flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
}
/* thanh cuộn mảnh cho khớp jira-skin */
#emailSidebaroffcanvas > .card-body > .mt-5::-webkit-scrollbar { width: 6px; }
#emailSidebaroffcanvas > .card-body > .mt-5::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, .18); border-radius: 3px;
}

/* Nút gắn sao phải nằm TRÊN link phủ toàn dòng (after:inset-0), nếu không bấm sao = mở thư */
#email-list-body [data-star] { position: relative; z-index: 10; }

/* Logo BMail: theme ẩn .logo-topbar ở desktop vì logo vốn nằm trên app-menu —
   bm đã bỏ app-menu nên phải hiện lại, không thì mất thương hiệu trên topbar. */
.logo-topbar { display: flex !important; align-items: center; }
.logo-topbar .logo-box { display: flex !important; align-items: center; }

/* Ô tìm kiếm topbar. Lưu ý: app.min.css là bản BUILD SẴN nên class Tailwind
   tuỳ biến (max-w-[560px]) KHÔNG tồn tại -> phải đặt bề rộng ở đây. */
.app-header .input-icon-group { width: 100%; max-width: 560px; }
#bm-topsearch { width: 100% !important; }

/* Mật độ dòng thư — căn theo số đo Gmail (docs/research/gmail/DIFF.md §1):
   Gmail 40px/dòng, bm từng 57px -> mất >200px nội dung. Đặt ~46px:
   nhỉnh hơn Gmail vì Atlassian Sans cao hơn Google Sans. */
#email-list-body td { padding-top: 9px !important; padding-bottom: 9px !important; }

/* Phân biệt chưa đọc / đã đọc (DIFF §2) — Gmail: chưa đọc 700 đậm, đã đọc 400 nhạt.
   bm trước đây để cả hai cùng 500 cùng màu nên nhìn không ra thư chưa đọc. */
#email-list-body tr h5,
#email-list-body tr .bm-subject { font-weight: 400; color: var(--color-default-700, #55555f); }
#email-list-body tr.bm-unread h5,
#email-list-body tr.bm-unread .bm-subject { font-weight: 700; color: var(--color-default-900, #1e1f21); }

/* Phản hồi khi chọn dòng (DIFF §3) — Gmail tô rgb(210,227,252) */
#email-list-body tr:has(input[data-check]:checked) { background: #D2E3FC !important; }
#email-list-body tr:has(input[data-check]:checked) td { border-color: transparent; }

/* ═══ ĐỘ MƯỢT — số đo lấy từ Gmail (xem DIFF.md) ═══════════════════════════
   Gmail dùng easing chuẩn Material `cubic-bezier(.4,0,.2,1)` @150ms cho chuyển
   trạng thái, và `box-shadow .08s linear` cho nút. Đó là thứ tạo cảm giác mượt,
   không phải hiệu ứng cầu kỳ. */
:root {
    --bm-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --bm-dur: 150ms;
    --bm-dur-fast: 80ms;
}

/* Dòng thư: đổi nền/chữ có chuyển tiếp thay vì nhảy khựng */
#email-list-body tr,
#email-list-body tr h5,
#email-list-body tr .bm-subject {
    transition: background-color var(--bm-dur) var(--bm-ease),
                color var(--bm-dur) var(--bm-ease),
                box-shadow var(--bm-dur-fast) linear;
}
/* hover: nền nhạt + vạch chỉ báo bên trái (Gmail dùng elevation, bm dùng vạch ADS) */
#email-list-body tr:hover { background: rgba(32, 33, 36, .045); }
#email-list-body tr:hover:not(:has(input[data-check]:checked)) {
    box-shadow: inset 3px 0 0 var(--color-primary, #1868DB);
}

/* Nút: Gmail transition box-shadow .08s linear + bo 16px (dạng viên thuốc) */
.btn, .btn-icon, [data-bulk], .jira-create-btn {
    transition: background-color var(--bm-dur) var(--bm-ease),
                color var(--bm-dur) var(--bm-ease),
                box-shadow var(--bm-dur-fast) linear,
                border-color var(--bm-dur) var(--bm-ease);
}
/* Nút chính (Soạn thư) — độ nổi đúng công thức Gmail */
#emailSidebaroffcanvas .btn.bg-danger,
#email-send, .btn.bg-primary {
    box-shadow: rgba(60, 64, 67, .3) 0 1px 2px 0, rgba(60, 64, 67, .15) 0 1px 3px 1px;
}
#emailSidebaroffcanvas .btn.bg-danger:hover,
#email-send:hover, .btn.bg-primary:hover {
    box-shadow: rgba(60, 64, 67, .3) 0 1px 3px 0, rgba(60, 64, 67, .15) 0 4px 8px 3px;
}

/* Mục thư mục trong rail: Gmail bo 16px, cao 32px, chuyển tiếp mượt */
#emailSidebaroffcanvas nav a,
#emailSidebaroffcanvas .flex.flex-col > a {
    transition: background-color var(--bm-dur) var(--bm-ease), color var(--bm-dur) var(--bm-ease);
}

/* Vòng focus bàn phím (Gmail: viền 1px inset) — trước đây bm không có gì */
.btn:focus-visible, [data-bulk]:focus-visible, .form-input:focus-visible,
#email-list-body a:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--color-primary, #1868DB), 0 0 0 4px rgba(24, 104, 219, .2);
    border-radius: 6px;
}

/* Danh sách hiện ra êm thay vì nhảy phịch khi API trả về */
#email-list-body tr { animation: bm-row-in 180ms var(--bm-ease) both; }
@keyframes bm-row-in { from { opacity: 0; transform: translateY(-2px); } }

/* Cuộn mượt + không kéo theo trang cha */
.bm-list-scroll, #emailSidebaroffcanvas > .card-body > .mt-5 {
    scroll-behavior: smooth;
    overscroll-behavior: contain;
}

/* Tôn trọng người dùng tắt hiệu ứng */
@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* dòng thư chưa đọc trong bảng inbox */
tr.bm-unread h5, tr.bm-unread .bm-subject { font-weight: 700; }
tr.bm-unread { background: color-mix(in srgb, var(--color-primary, #1868DB) 4%, transparent); }

/* vacation off -> làm mờ nhóm field */
#s-vacay-fields.bm-off { opacity: .45; pointer-events: none; }