/*
File: mobile.css — CHUẨN BỐ CỤC ĐIỆN THOẠI của panel (task-48). Nạp ở layouts/head-style.php SAU theme.css (mọi trang). Chỉ có luật cho màn < 992 px (máy tính giữ nguyên);
màu chỉ qua biến (--bs-* / --kp-*), không màu cứng (luật theme.md). Chuẩn kỹ thuật (không cuộn ngang, chạm ≥ 44 px, ô nhập 16 px, chữ ≥ 12 px) ở panel.css; file này là chuẩn BỐ CỤC
"gọn, dễ đọc" — 5 khối dùng chung, màn mới ghép từ chúng thay vì tự dựng (luật ui-mobile.md mục "Chuẩn bố cục điện thoại"):
  1. .kp-kv / .kp-kv-item   lưới "nhãn trái — số phải" 2 ô / hàng cho các BỘ ĐẾM (Tổng, Còn hạn, Hết hạn…): nhãn không bao giờ bị bó (rộng ~150 px / ô ở 390), số thẳng hàng bên phải,
                            ô cao 44 px (cả ô là vùng chạm khi số là link); .kp-tiles / .kp-tile = ô "nhãn nhỏ trên, số LỚN dưới" cho 1–3 con số quan trọng (Số dư, Lượt)
  (1c. .kp-chips / .kp-chip = hàng 5 ô nhỏ "ngày trên, giá dưới")
  2. .kp-card-head          đầu thẻ 1 hàng: tên / đối tượng bên trái, huy hiệu trạng thái bên phải (không nhãn "App", không dòng riêng cho trạng thái)
  3. .kp-meta               dòng thông tin phụ: chữ nhỏ, màu phụ, các mục cách nhau dấu chấm giữa (thay cho dòng "nhãn: giá trị" của thông tin KHÔNG cần nhãn)
  4. .kp-fold               bộ lọc / phần phụ gập được (mặc định gập ở điện thoại, mở sẵn ở máy tính) — nút mở ".kp-fold-btn"
  5. .kp-actions            nhóm nút dưới thẻ: tối đa 2 nút / hàng, nút chính trước (bổ sung cho .key-edit-actions của panel.css)
*/
@media (max-width: 991.98px) {
    /* ---- 1a. bộ đếm "nhãn trái — số phải" ---- */
    .kp-kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin: 0; padding: 0; list-style: none; }
    .kp-kv-item {
        display: flex; align-items: center; justify-content: space-between; gap: .375rem; min-width: 0; min-height: 44px; padding: 0 0 0 .625rem;
        border: 1px solid var(--bs-border-color); border-radius: .5rem; background: var(--bs-secondary-bg); box-shadow: var(--kp-card-shadow, none);
    }
    .kp-kv-item.kp-flat { border-color: transparent; background: var(--bs-tertiary-bg); box-shadow: none; }
    .kp-kv-label { flex: 1 1 auto; min-width: 0; font-size: .8125rem; line-height: 1.25; font-weight: 500; color: var(--bs-secondary-color); overflow-wrap: anywhere; }
    .kp-kv-num { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: flex-end; min-width: 44px; min-height: 44px; padding: 0 .625rem 0 .125rem; font-size: 1.25rem; font-weight: 600; line-height: 1.25; }
    .kp-kv-num > a { display: inline-flex; align-items: center; justify-content: flex-end; min-width: 44px; min-height: 44px; color: inherit; }

    /* ---- 1b. ô "nhãn nhỏ trên, số lớn dưới" ---- */
    .kp-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin: 0; padding: 0; list-style: none; }
    .kp-tile {
        display: flex; flex-direction: column; justify-content: space-between; gap: .125rem; min-width: 0; padding: .5rem .625rem;
        border: 1px solid var(--bs-border-color); border-radius: .5rem; background: var(--bs-secondary-bg); box-shadow: var(--kp-card-shadow, none);
    }
    .kp-tile.kp-flat { border-color: transparent; background: var(--bs-tertiary-bg); box-shadow: none; }
    .kp-tile-label { display: block; font-size: .75rem; line-height: 1.25; font-weight: 500; color: var(--bs-secondary-color); overflow-wrap: anywhere; }
    .kp-tile-num { display: block; font-size: 1.375rem; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }

    /* ---- 1c. hàng ô nhỏ (vd. giá 5 gói): ô "nhãn nhỏ trên, giá trị dưới", đều nhau, cùng 1 hàng ---- */
    .kp-chips { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .25rem; }
    .kp-chip { display: flex; flex-direction: column; align-items: center; gap: .0625rem; min-width: 0; padding: .375rem 0; border: 1px solid var(--bs-border-color); border-radius: .5rem; background: var(--bs-secondary-bg); text-align: center; }
    .kp-chip-days { font-size: .75rem; line-height: 1.25; color: var(--bs-secondary-color); white-space: nowrap; }   /* "365 ngày" không rớt "ngày" xuống dòng (task-52) */
    .kp-chip-price { font-size: .9375rem; font-weight: 600; line-height: 1.25; white-space: nowrap; font-variant-numeric: tabular-nums; }   /* task-54: số KHÔNG BAO GIỜ ngắt giữa ("10.000 / .000") — giá dài thì xếp lại lưới (.kp-chips[data-fit]), không bẻ chữ số */
    .kp-chips[data-fit] { grid-template-columns: repeat(auto-fit, minmax(min(var(--kp-chip-min), 100%), 1fr)); }   /* --kp-chip-min do PHP tính từ giá dài nhất (cr_chips_fit_attr) — hẹp thì 3 + 2 ô, 2 + 2 + 1 ô */

    /* ---- 2. đầu thẻ ---- */
    .kp-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; min-width: 0; }
    .kp-card-head > .kp-card-title { flex: 1 1 auto; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
    .kp-card-head > .badge { flex: 0 0 auto; }

    /* ---- 3. dòng thông tin phụ ---- */
    .kp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .125rem .625rem; margin: 0; padding: 0; list-style: none; font-size: .8125rem; color: var(--bs-secondary-color); overflow-wrap: anywhere; }
    .kp-meta > * { min-width: 0; }
    .kp-meta strong, .kp-meta b { color: var(--bs-body-color); font-weight: 600; }

    /* ---- 4. phần gập được (bộ lọc nhiều ô) ---- */
    .kp-fold-btn { display: flex; align-items: center; justify-content: space-between; gap: .5rem; width: 100%; min-height: 44px; padding: .5rem .75rem; text-align: left; }
    .btn.kp-fold-btn:not(.d-block):not(.d-none):not(.header-item) { display: flex; justify-content: space-between; }   /* task-78: panel.css đặt mọi .btn "inline-flex + căn giữa" bằng bộ chọn (0,4,0) nên dòng trên chưa bao giờ có hiệu lực — Nhật ký / Sổ credit / Giao dịch / Doanh thu hiện "Bộ lọc ▾" ở GIỮA, khác Danh sách key (chữ trái, mũi tên phải) */
    .kp-fold-btn .kp-fold-caret { flex: 0 0 auto; transition: transform .15s ease; }
    .kp-fold-btn[aria-expanded="true"] .kp-fold-caret { transform: rotate(180deg); }
    .kp-fold-body.collapse:not(.show):not(.collapsing) { display: none !important; } /* ô lọc có d-flex (!important) — gập phải thắng */
    .kp-fold-body { padding-top: .25rem; }
    .kp-fold-half { flex: 1 1 calc(50% - .25rem); max-width: calc(50% - .25rem); }

    /* ---- 5. nhóm nút dưới thẻ ---- */
    .kp-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin-top: .75rem; }
    .kp-actions > .btn, .kp-actions > form > .btn { width: 100%; white-space: normal; }
    .kp-actions > .kp-wide { grid-column: 1 / -1; }
    .kp-actions > form { margin: 0; min-width: 0; }
}
@media (min-width: 992px) {
    /* máy tính: phần gập luôn mở, nút mở ẩn đi */
    .kp-fold-btn { display: none; }
    .kp-fold-body.collapse:not(.show) { display: block; }
}
/* ---- task-64 mục 2: ô NGÀY (Từ ngày / Đến ngày — Doanh thu, Nhật ký, Giao dịch ngân hàng, Sổ credit) không cắt chữ ở điện thoại, nhất là Safari iPhone ----
   Gốc (Owner 11/10, iPhone 16 Pro): Safari hiện ngày theo ngôn ngữ máy ("ngày 1 thg 10, 2026" ~ 20 ký tự) trong ô chỉ nửa hàng (~150 px) nên xuống 2 dòng và dòng dưới bị cắt;
   Samsung / Chrome hiện dạng ngắn nên "hên xui". Chuẩn mới: (1) dưới 576 px mỗi ô ngày ĐỦ HÀNG (2 ô xếp dọc — chữ dài nhất vẫn vừa 1 dòng ở 320 px); (2) ô ngày LUÔN 1 dòng, không cắt,
   cao bằng ô nhập khác (44 px cảm ứng); (3) Safari: bỏ kiểu gốc của hệ điều hành (nó đặt chiều cao / căn chữ riêng) rồi vẽ lại như ô nhập thường. Chưa thử Safari thật (không tải WebKit — Owner chốt) —
   thử bằng Chrome khổ iPhone (dpr 3) + CSS theo tài liệu WebKit (`::-webkit-date-and-time-value`, `::-webkit-datetime-edit`). */
/* Từ 576 px (máy tính bảng / máy tính, iPad cũng hiện ngày dài kiểu Safari): ô ngày không co dưới 14rem — hàng bộ lọc xuống dòng thay vì ép ô làm chuỗi ngày bị cắt (bài quét `o-ngay-cat`). */
@media (min-width: 576px) {
    .ledger-filter .ledger-filter-field.kp-date-field, .kp-date-field { min-width: 14rem; }   /* chọn theo 3 lớp: ledger.css đặt `.ledger-filter .ledger-filter-field { min-width: 0 }` */
}
@media (max-width: 575.98px) {
    .kp-date-field, #rv-custom-form .rv-date.kp-date-field { flex: 1 1 100%; max-width: 100%; }
    #rv-custom-form .key-edit-actions { flex: 1 1 100%; }
    #rv-custom-form .key-edit-actions .btn { flex: 1 1 100%; width: 100%; }   /* nút "Xem khoảng tuỳ chọn" rộng đúng hàng, không co theo chữ */
}
@media (max-width: 991.98px), (pointer: coarse) {
    input[type="date"].form-control { display: block; width: 100%; min-width: 0; max-width: 100%; min-height: 44px; -webkit-appearance: none; appearance: none; line-height: 1.5; }
    input[type="date"].form-control::-webkit-date-and-time-value { text-align: left; min-height: 1.5em; margin: 0; white-space: nowrap; }
    input[type="date"].form-control::-webkit-datetime-edit { padding: 0; white-space: nowrap; overflow: visible; }
    input[type="date"].form-control::-webkit-calendar-picker-indicator { margin-left: auto; }
}