/* ══════════════════════════════════════════════════════════════════════════
   app.mobile.css — Design tokens cho Mobile UI (iOS Premium / Glass)
   Nguồn: Mobile.Prototype/styles/tokens.css (giữ giá trị 1:1).
   Chỉ chứa TOKEN dùng chung; style từng trang đặt ở {Page}.mobile.css,
   component dùng chung đặt ở file CSS riêng của component.

   AN TOÀN DESKTOP: các tên biến dưới đây (--color-*, --primary, --surface,
   --radius*, --grad-*, --glass-*, ...) đã được kiểm tra KHÔNG trùng với
   wwwroot/css/app.css và KHÔNG trùng namespace --mud-* của MudBlazor, nên đặt
   ở :root không ảnh hưởng desktop (chỉ có hiệu lực ở nơi .Mobile component
   tham chiếu tới). Giữ đúng tên như prototype để tái dùng được CSS component
   của prototype khi dựng từng trang.
   ══════════════════════════════════════════════════════════════════════════ */
:root {

  /* ── 1. COLOR — Brand ─────────────────────────────────────────────── */
  --color-primary:        #594AE2;   /* Mud Primary (UviWash purple) */
  --color-primary-light:  #7B6BF0;   /* hero gradient start */
  --color-primary-dark:   #4A3BD4;   /* pressed / text on tint */
  --color-primary-soft:   #ECEAFB;   /* tint surface (~8% primary) */
  --color-primary-tint:   rgba(89,74,226,.12);  /* avatar / icon chip tint */
  --color-accent:         #F59E0B;   /* logo amber — use sparingly */

  /* ── COLOR — Semantic / status (color = meaning) ──────────────────── */
  --color-success:        #00C853;   --color-success-soft: #E3F8EC;
  --color-info:           #2196F3;   --color-info-soft:    #E6F2FD;
  --color-warning:        #FB8C00;   --color-warning-soft: #FFF2E0;
  --color-danger:         #F44336;   --color-danger-soft:  #FEEAE9;
  --color-neutral:        #757575;

  /* ── COLOR — Extended accents ─────────────────────────────────────── */
  --color-teal:   #009688;   --color-pink:  #E91E63;   --color-indigo: #3F51B5;
  --color-cyan:   #00BCD4;   --color-amber: #FFB300;

  /* ── COLOR — Surfaces ─────────────────────────────────────────────── */
  --color-background:     #E8E6F4;   /* app backdrop behind phone frame */
  --color-canvas:         #F4F2FB;   /* tonal screen canvas */
  --color-surface-sunken: #FAFAFC;   /* total rows / inset panels */
  --color-card:           #FFFFFF;
  --color-avatar-bg:      #EDEDF4;
  --color-avatar-fg:      #616161;

  /* ── COLOR — Text ─────────────────────────────────────────────────── */
  --color-text-primary:   rgba(0,0,0,.87);
  --color-text-secondary: rgba(0,0,0,.60);
  --color-text-muted:     rgba(0,0,0,.38);
  --color-text-on-brand:  #FFFFFF;

  /* ── COLOR — Lines & borders ──────────────────────────────────────── */
  --color-border:    #E2DFEE;
  --color-line:      #ECEAF3;
  --color-hairline:  rgba(60,60,67,.16);

  /* ── COLOR — Gradients (focal use only) ───────────────────────────── */
  --grad-hero:  linear-gradient(135deg, #7B6BF0 0%, #4A3BD4 100%);
  --grad-blue:  linear-gradient(140deg, #42A5F5 0%, #1E6FE0 100%);
  --grad-green: linear-gradient(140deg, #2BD46E 0%, #00A045 100%);

  /* ── COLOR — Glass (frosted chrome) ───────────────────────────────── */
  --glass-bg:        rgba(255,255,255,.72);
  --glass-bg-strong: rgba(255,255,255,.86);
  --glass-border:    rgba(255,255,255,.55);
  --glass-blur:      blur(22px) saturate(180%);
  --glass-shadow:    0 8px 30px rgba(28,27,46,.16);

  /* ── 2. TYPOGRAPHY ────────────────────────────────────────────────── */
  --font-ui:    "Roboto", sans-serif;
  /* Số/mã đơn dùng chung Roboto với UI (bỏ Roboto Mono) — biến giữ nguyên tên để không phải sửa nơi tham chiếu. */
  --font-mono:  "Roboto", sans-serif;
  --font-brand: "Audiowide", cursive;

  --font-size-xs:      12px;
  --font-size-sm:      14px;
  --font-size-md:      15px;
  --font-size-lg:      17px;
  --font-size-xl:      20px;
  --font-size-2xl:     24px;
  --font-size-3xl:     28px;
  --font-size-display: 33px;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-heavy:    800;

  --lh-tight:  1.15;   --lh-snug: 1.3;   --lh-normal: 1.45;
  --ls-tight: -0.02em; --ls-normal: 0;   --ls-wide: 0.04em;

  /* ── 3. SPACING (4px base) ────────────────────────────────────────── */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;  --space-6: 24px;  --space-8: 32px;  --space-10: 40px;
  --space-12: 48px;

  --pad-card:       14px;
  --pad-screen:     var(--space-4);
  --gap-list:       10px;
  --nav-clearance:  110px;
  --touch-min:      44px;

  /* ── 4. RADIUS ────────────────────────────────────────────────────── */
  --radius-xs:   8px;
  --radius-sm:   10px;
  --radius-md:   14px;
  --radius-lg:   18px;
  --radius-xl:   22px;
  --radius-pill: 999px;

  /* ── 5. SHADOW (soft ink-purple elevation) ────────────────────────── */
  --shadow-sm:  0 4px 16px rgba(46,40,90,.08);
  --shadow-md:  0 8px 28px rgba(46,40,90,.12);
  --shadow-lg:  0 12px 40px rgba(46,40,90,.20);
  --shadow-fab: 0 10px 24px rgba(89,74,226,.40);
  --shadow-hero: inset 0 1px 0 rgba(255,255,255,.28), 0 16px 34px rgba(82,70,224,.34);
  --shadow-appbar-soft: 0 6px 20px rgba(46,40,90,.10);
  --shadow-menu: 0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12);

  /* ── 6. MOTION & Z-INDEX ──────────────────────────────────────────── */
  --ease-ios:  cubic-bezier(.32,.72,.25,1);
  --ease-rise: cubic-bezier(.22,1,.36,1);
  --dur-fast: .14s;  --dur-base: .22s;  --dur-slow: .3s;
  --z-fab: 25;  --z-nav: 26;  --z-header: 30;  --z-sheet: 41;  --z-datepicker: 55;  --z-toast: 60;

  /* ══════════════════════════════════════════════════════════════════
     LEGACY ALIASES — giữ để CSS component copy từ prototype vẫn resolve.
     ══════════════════════════════════════════════════════════════════ */
  --primary:         var(--color-primary);
  --primary-dark:    var(--color-primary-dark);
  --primary-soft:    var(--color-primary-soft);
  --primary-grad:    var(--color-primary);
  --accent:          var(--color-accent);

  --surface:         var(--color-canvas);
  --card:            var(--color-card);
  --text:            var(--color-text-primary);
  --text-2:          var(--color-text-secondary);
  --text-3:          var(--color-text-muted);
  --line:            var(--color-line);
  --border:          var(--color-border);
  --avatar-bg:       var(--color-avatar-bg);
  --avatar-fg:       var(--color-avatar-fg);

  --green:           var(--color-success);   --green-soft:  var(--color-success-soft);
  --blue:            var(--color-info);       --blue-soft:   var(--color-info-soft);
  --orange:          var(--color-warning);    --orange-soft: var(--color-warning-soft);
  --red:             var(--color-danger);     --red-soft:    var(--color-danger-soft);
  --slate:           var(--color-neutral);

  --blue-grad:       var(--grad-blue);

  --r-xl:            var(--radius-xl);
  --radius:          var(--radius-lg);
  --r-md:            var(--radius-md);
  --r-sm:            var(--radius-sm);
  --r-pill:          var(--radius-pill);

  --shadow-card:     var(--shadow-sm);
  --shadow-card2:    var(--shadow-md);
  --shadow-pop:      var(--shadow-lg);
  --shadow-appbar:   var(--glass-shadow);
}

/* ══════════════════════════════════════════════════════════════════════════
   Ẩn/hiện TopNav và BottomNav theo bề rộng màn hình.
   Ngưỡng <= 1280px được coi là mobile, đồng bộ với cơ chế IsSmallDevice của các trang.
   Trên desktop (> 1280px), giao diện giữ nguyên: hiện TopNav, ẩn thanh điều hướng dưới.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1280px) {
  /* Ẩn TopNav của desktop; mobile dùng app bar riêng từng trang kết hợp thanh điều hướng dưới */
  #navbar { display: none !important; }

  /* .main-content là vùng cuộn chính trên mobile: đặt chiều cao cố định 100dvh và tự cuộn.
     Nhờ đó app bar dùng position: sticky bám đúng mép trên, đồng thời tạo một scroll-container
     ổn định để JS lắng nghe sự kiện cuộn. Ghi đè min-height/overflow từ app.css trong phạm vi mobile. */
  .main-content {
    height: 100dvh !important;
    min-height: 0 !important;
    max-height: 100dvh !important;
    overflow-y: auto !important;
    overflow-x: hidden;
  }

  /* Không giới hạn max-width: mỗi trang tự quyết định bố cục theo bề rộng thực tế
     (IsSmallDevice), không cần ép về khung điện thoại cố định. */
  .app-shell-body {
    width: 100%;
    /* Chừa khoảng trống ở đáy cho thanh điều hướng dưới cố định */
    padding-bottom: var(--nav-clearance, 110px);
  }

  /* Trang tự quản chiều cao (shell = 100dvh; overflow:hidden; .list/.cb-scroll cuộn nội bộ) thì
     .app-shell-body KHÔNG được có padding-bottom: nếu còn 110px thì tổng chiều cao trong
     .main-content = 100dvh + 110px -> .main-content sinh scroll ngoài, kéo cả shell (gồm app bar
     .header-zone) trôi lên khi cuộn (app bar không còn dính đỉnh). Khoảng trống cho bottom nav do
     padding-bottom của .list/.cb-scroll từng trang đảm nhận. MỌI shell mới theo pattern này PHẢI
     thêm class vào danh sách :has() dưới đây. */
  .app-shell-body:has(.bills-m, .cashbook-m, .rrd-m, .oinc-m, .oexp-m, .rcv-m, .rpt-m, .fd-m, .ov-m, .ince-m, .inced-m, .cust-m, .debt-m, .pts-m, .custd-m, .svc-m, .imps-m, .svcd-m, .bank-m, .bankd-m, .shop-m, .shopd-m, .unit-m, .unitd-m, .rack-m, .rackd-m, .status-m, .statusd-m, .lyl-m, .log-m, .perm-m, .pt-m, .chpwd-m, .newbill-m) {
    padding-bottom: 0;
  }

  /* NewBill: nội dung form thường ngắn hơn 100dvh (chưa thêm dịch vụ/khách) nên .newbill-scroll
     KHÔNG có gì để cuộn — lúc đó thao tác vuốt/lăn có thể "chain" (dội biên) lên .main-content,
     kéo trôi cả .newbill-m (gồm header-zone, vốn đứng ngoài .newbill-scroll) lên theo dù về lý
     thuyết .main-content không có nội dung tràn. Khoá cứng overflow ở đây để .main-content không
     bao giờ tự cuộn khi NewBill đang active — mọi cuộn chỉ xảy ra trong .newbill-scroll. */
  .main-content:has(.newbill-m) {
    overflow: hidden !important;
  }
}

@media (min-width: 1281px) {
  /* Ẩn thanh điều hướng dưới trên desktop */
  .bottomnav { display: none !important; }

  /* Khôi phục padding của "container-fluid p-2" (Bootstrap) mà MainLayout.razor dùng
     trước khi đổi sang class app-shell-body — thiếu rule này khiến nội dung desktop
     dính sát TopNav và các lưới/table mất padding quanh. */
  .app-shell-body {
    padding: .5rem;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   Các lớp dùng chung cho mọi trang mobile.

   Đặt ở phạm vi toàn cục (không scoped) vì phần lớn các lớp này gắn trên component
   MudBlazor (MudPaper/MudList/MudListItem/MudAvatar/MudIcon); phần tử do MudBlazor
   render không mang scope-attribute nên CSS isolation không áp được trực tiếp. Ở phạm vi
   toàn cục thì lớp áp thẳng, không cần combinator ::deep.

   Toàn bộ bọc trong @media (max-width:1280px) để không ảnh hưởng giao diện desktop.
   File nạp sau bootstrap.min.css nên các rule dưới ghi đè được .card của bootstrap.

   Cách dùng: đặt lớp trực tiếp lên component MudBlazor, ví dụ:
     <MudPaper Class="card card--grouped">
       <MudList Class="settings-list">
         <MudListItem Class="settings-row"><div class="settings-row__content">…
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1280px) {

  /* ── Thẻ (card) và các biến thể ── */
  .card {
    background: var(--color-card);
    border-radius: var(--radius-lg);   /* 18px */
    box-shadow: var(--shadow-sm);
    padding: var(--pad-card);          /* 14px */
  }

  .card--interactive {
    cursor: pointer;
    transition: transform var(--dur-fast) var(--ease-ios), box-shadow var(--dur-fast);
  }
  .card--interactive:active {
    transform: scale(.99);
    box-shadow: var(--shadow-md);
  }

  /* iOS grouped table card: rows bên trong, không padding ngoài */
  .card--grouped {
    padding: 0;
    overflow: hidden;
    box-shadow: var(--shadow-md);
  }

  .card--raised  { box-shadow: var(--shadow-md); }
  .card--compact { border-radius: var(--radius-md); }
  .card--flat    { box-shadow: none; background: var(--color-surface-sunken); }

  /* Hero card (nền gradient tím, chữ trắng) — dùng cho số dư/tổng quan nổi bật
     (vd .cb-balance ở FinancialReport). Tương đương .card--hero của prototype
     (Mobile.Prototype/styles/components/card.css), giữ nguyên hiệu ứng ring + glow góc. */
  .card--hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: var(--radius-xl);
    background: var(--grad-hero);
    color: var(--color-text-on-brand);
    box-shadow: var(--shadow-hero);
  }
  .card--hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background: radial-gradient(140% 120% at 100% 50%, rgba(255,255,255,.18) 0%, transparent 42%);
  }
  .card--hero::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: 50%; right: -34px; transform: translateY(-50%);
    width: 240px; height: 240px; border-radius: 50%;
    pointer-events: none;
    background: repeating-radial-gradient(circle, rgba(255,255,255,.13) 0 1.5px, transparent 1.5px 34px);
    -webkit-mask-image: radial-gradient(circle, #000 58%, transparent 76%);
            mask-image: radial-gradient(circle, #000 58%, transparent 76%);
  }

  /* ── Nhãn nhóm ── */
  .group-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-3);
    letter-spacing: .02em;
    padding: 0 6px 7px;
    margin-top: 4px;
  }

  /* ── Hàng danh sách kiểu grouped list (dùng lại cho: cài đặt, dịch vụ, sổ quỹ, bộ lọc…) ── */
  .settings-list,
  .settings-list .mud-list {
    padding: 0;
    background: transparent;
  }
  /* Loại bỏ padding và min-height mặc định của MudList/MudListItem để kiểm soát chiều cao hàng */
  .settings-list .mud-list-item,
  .settings-list .mud-list-item-gutters {
    min-height: 0;
    padding: 0;
  }
  .settings-list .mud-list-item-text { margin: 0; }

  .settings-row {
    position: relative;
    width: 100%;
    min-height: 0;
    text-decoration: none;
    --list-inset: 53px;
  }
  .settings-row:active { background: rgba(28, 27, 46, .045); }

  /* hairline iOS giữa 2 row liên tiếp. Dùng height:1px + transform:scaleY(.5) thay vì
     height:.5px trực tiếp: ở DPR lẻ (vd 1.75x) một box cao .5px bị làm tròn/anti-alias
     thành vệt mờ loang màu; scaleY sau khi layout xong ở bước compositing nên nét luôn
     sắc dù DPR bao nhiêu -> đúng kiểu "hairline" sắc mảnh của iOS thay vì mờ nhòe. */
  .settings-row + .settings-row::before {
    content: '';
    position: absolute;
    top: 0;
    left: var(--list-inset, 53px);
    right: 0;
    height: 1px;
    background: var(--color-hairline);
    transform: scaleY(.5);
    transform-origin: 0 0;
  }

  .settings-row__content {
    display: flex;
    align-items: center;
    gap: 13px;
    width: 100%;
    padding: 12px 14px;
  }
  .settings-row__content--center {
    justify-content: center;
    gap: 8px;
  }

  .settings-icon {
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: var(--r-sm);   /* 10px */
    display: grid;
    place-items: center;
  }
  .settings-icon .mud-icon-root { font-size: 18px; }

  .settings-label {
    flex: 1;
    min-width: 0;
    font-size: 16px;
    font-weight: 500;
    color: var(--text);
    line-height: 1.3;
  }
  .settings-value {
    flex: none;
    font-size: 14px;
    color: var(--text-3);
    margin-right: 2px;
  }
  .settings-chev {
    flex: none;
    color: var(--text-3);
    font-size: 20px;
  }

  /* ── Ô nền màu cho icon (dùng chung cho hàng danh sách và action sheet) ── */
  .ic-violet { background: rgba(89,74,226,.12);  color: var(--primary); }
  .ic-blue   { background: rgba(33,150,243,.12); color: var(--blue); }
  .ic-green  { background: rgba(0,200,83,.13);   color: var(--green); }
  .ic-teal   { background: rgba(0,150,136,.12);  color: #009688; }
  .ic-orange { background: rgba(251,140,0,.13);  color: var(--orange); }
  .ic-pink   { background: rgba(233,30,99,.12);  color: #E91E63; }
  .ic-indigo { background: rgba(63,81,181,.12);  color: #3F51B5; }
  .ic-red    { background: rgba(244,67,54,.11);  color: var(--red); }
  .ic-gray   { background: rgba(117,117,117,.13); color: var(--slate); }
  .ic-amber  { background: rgba(255,179,0,.16);  color: #FFB300; }
  .ic-cyan   { background: rgba(0,188,212,.12);  color: #00BCD4; }

  /* Màu chữ theo ngữ nghĩa (Index.Mobile.razor's .stat-value đã dùng các tên này nhưng chưa từng
     có CSS định nghĩa — bổ sung tại đây để khớp đúng token đã có, không tạo màu mới). */
  .u-text-primary { color: var(--primary); }
  .u-text-info    { color: var(--blue); }
  .u-text-warning { color: var(--orange); }
  .u-text-success { color: var(--green); }
  .u-text-danger  { color: var(--red); }

  /* Hàng hành động phá hủy (vd "Xoá phiếu") -> nhãn đỏ, icon vẫn giữ nền .ic-red riêng */
  .settings-row.danger .settings-label { color: var(--red); }

  /* MudMenuItem trong dropdown app bar (Bills.razor) render qua MudPopoverProvider,
     portal ra ngoài cây DOM của component -> CSS scoped của Bills.razor.css không
     áp dụng được, phải đặt global ở đây. Reset padding/margin mặc định của
     MudListItem để chiều cao hàng khớp .settings-row__content. */
  .menu-item.mud-list-item { padding: 0; min-height: 0; }
  .menu-item .mud-list-item-text { margin: 0; }
  .menu-item .settings-label { font-size: 14.5px; }

  /* ── App bar (topnav) dùng chung cho mọi trang mobile có header riêng (Bills, FinancialReport…).
     Trang tự bọc trong 1 shell flex-column (vd .bills-m) với height:100dvh;overflow:hidden;
     .header-zone {flex:0 0 auto} để header không co giãn, phần còn lại (.list/.cb-scroll…) tự cuộn. ── */
  .header-zone {
    flex: 0 0 auto;
    z-index: var(--z-header);
    background: transparent;
    padding-bottom: 0;
  }
  .topnav {
    position: relative;
    z-index: 2;
    display: flex; align-items: center; gap: 4px;
    padding: max(env(safe-area-inset-top), 7px) 8px 9px 6px;
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
    color: var(--text);
    border-bottom: 1px solid var(--glass-border);
    box-shadow: 0 6px 20px rgba(46,40,90,.10);
  }
  .topnav-actions { flex: none; display: flex; gap: 2px; align-items: center; }
  .topnav-title.t {
    flex: 1; min-width: 0; margin: 0 0 0 4px;
    font-size: 18px; font-weight: 500; line-height: 1.2; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .nav-icon-btn {
    width: 36px !important; height: 36px !important;
    color: var(--text) !important;
  }
  .nav-icon-btn:active { background: rgba(0,0,0,.06); }
  /* MudMenu Class="nav-icon-btn" đặt class này lên DIV bọc ngoài (.mud-menu), không phải lên chính
     <button> kích hoạt bên trong -> nút thật giữ kích thước mặc định KHÔNG vuông (26×36px) của
     MudBlazor cho icon button Size.Small, border-radius:50% trên khung không vuông thành hình bầu
     dục thay vì tròn khi bấm/hover. Ép lại đúng 36×36 trên chính nút thật. */
  .nav-icon-btn.mud-menu .mud-icon-button-size-small {
    width: 36px !important; height: 36px !important;
  }

  /* ── Bottom sheet dùng chung (overlay + slide từ dưới lên) — Bills, FinancialReport…
     Không dùng MudDrawer vì app không có <MudLayout> -> drawer không position:fixed
     đúng (xem memory mudblazor-mobile-gotchas). Container là phần tử HTML thuần do
     từng trang tự viết -> không cần ::deep dù global. ── */
  .sheet-backdrop {
    position: fixed; inset: 0; background: rgba(18,16,40,.45);
    opacity: 0; pointer-events: none;
    transition: opacity .22s ease; z-index: calc(var(--z-sheet) - 1);
  }
  .sheet-backdrop.open { opacity: 1; pointer-events: auto; }
  .sheet,
  .flt-sheet {
    position: fixed; bottom: 0; left: 0; right: 0;
    transform: translateY(105%);
    background: var(--card);
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    transition: transform .26s cubic-bezier(.32,.72,.25,1); z-index: var(--z-sheet);
    box-shadow: var(--shadow-pop);
  }
  /* Không padding trái/phải: nội dung (sheet-head/sheet-list) tự lo padding riêng, để nền
     trạng thái :active của hàng list vươn tới sát mép thật của sheet (không còn viền chết
     xung quanh không phản hồi khi chạm/rê chuột). */
  .sheet { padding: 8px 0 calc(14px + env(safe-area-inset-bottom)); }
  .flt-sheet {
    padding: 8px 16px calc(24px + env(safe-area-inset-bottom));
    max-height: 92dvh; overflow-y: auto;
  }
  .sheet.open,
  .flt-sheet.open { transform: translateY(0); }
  .sheet-grip {
    width: 38px; height: 4px; border-radius: 2px;
    background: var(--line); margin: 4px auto 10px;
  }

  /* ── MudList dùng trong action sheet (sheet-list/settings-row) — reset padding/min-height
     mặc định của MudListItem để .settings-row__content tự kiểm soát chiều cao hàng. Trước đây
     chỉ định nghĩa scoped trong Bills.razor.css (".bills-m ::deep .sheet-list") nên các trang
     khác dùng lại cùng pattern (Customers, CustomerDebtDetail, IncomeExpense) không thấy reset
     này, khiến padding mặc định của MudListItem cộng dồn với padding của settings-row__content,
     hàng cao hơn hẳn so với Bills. Promote lên global để mọi consumer đều đúng. ── */
  .sheet-list { padding: 0; }
  .sheet-list .mud-list-item,
  .sheet-list .mud-list-item-gutters { min-height: 0; padding: 0; }
  .sheet-list .mud-list-item-text { margin: 0; }
  .sheet-divider { margin: 4px 8px; }

  /* ── avatar tròn dùng chung (thẻ danh sách + sheet-head) — trước đây chỉ định nghĩa shape đầy đủ
     trong Bills.razor.css (".bills-m .avatar"), các trang khác dùng div/MudAvatar Class="avatar"
     trực tiếp nên không thấy shape/nền, chỉ hiện chữ trần không có vòng tròn. ── */
  .avatar {
    flex: none; width: 44px; height: 44px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--avatar-bg); color: var(--avatar-fg);
    font-size: 17px; font-weight: 700;
  }

  /* ── sheet-head (avatar + tên/mã trong action sheet) — dùng chung Bills, IncomeExpense.
     Trước đây scoped trong Bills.razor.css (".bills-m .sheet-head") nên IncomeExpense.razor
     (component khác) không thấy style -> avatar/tên rớt xuống dòng theo block mặc định. ── */
  .sheet-head {
    display: flex; align-items: center; gap: 11px;
    /* padding trái/phải khớp .settings-row__content (14px) để avatar thẳng hàng với icon
       của các hàng bên dưới — cùng 1 mức thụt lề tính từ mép sheet. */
    padding: 2px 14px 12px; border-bottom: 1px solid var(--line); margin-bottom: 6px;
  }
  .sheet-head .avatar { width: 38px; height: 38px; font-size: 15px; }
  .sheet-head .nm { font-size: 15.5px; font-weight: 700; color: var(--text); }
  .sheet-head .cd {
    font-family: var(--font-mono); font-weight: 500;
    font-size: 12.5px; color: var(--text-3); margin-top: 1px;
  }

  /* Pattern dùng chung: MudDatePicker đặt trong 1 sheet có transform (.sheet/.flt-sheet/.bsheet…)
     bị giam overlay dialog vì transform tạo containing block cho position:fixed (CSS spec) —
     dialog co lại đúng bằng kích thước sheet thay vì phủ viewport, ngày cuối tháng bị cắt mất.
     Fix: đặt <MudDatePicker> NGOÀI sheet (vd cuối shell mobile), gắn Class="df-mud" để giấu
     KHUNG INPUT hiển thị (không set opacity:0 lên .mud-picker gốc vì overlay/calendar là con,
     sẽ bị trong suốt theo); z-index cao hơn mọi sheet để overlay luôn nổi lên trên. Trong sheet,
     hiển thị 1 field readonly (button/MudTextField) bấm gọi picker.OpenAsync() qua @ref. */
  .df-mud { position: fixed; top: 0; left: 0; width: 0; height: 0; overflow: visible; z-index: var(--z-datepicker); }
  .df-mud .mud-input-control { display: none; }

  /* Field "Từ ngày/Đến ngày" hiển thị trong sheet filter — card viền tím, label xám nhỏ + giá trị đậm
     bên dưới (không phải MudTextField chuẩn). Đi kèm .df-mud: bấm field gọi picker.OpenAsync() qua @ref.
     Dùng chung cho mọi trang report có filter "Theo tùy chọn" (FinancialChart, RevenueReportDetail,
     OtherIncome, OtherExpenses, FinancialReport…). */
  .daterow { display: flex; gap: 10px; padding: 8px 4px 4px; }
  /* Trong filter sheet, .daterow chứa 2 MudTextField Outlined (không phải card .datefield như
     FinancialChart bsheet). Bỏ padding để 2 field ngày canh đúng mép trái/phải với các control
     full-width khác (Cửa hàng/Thời gian/Nhân viên) và để MudStack gap 4px lo khoảng cách dọc đều
     nhau — padding cũ (8px trên/4px dưới + 4px hai bên) làm dòng ngày thụt vào và lệch nhịp dọc. */
  .flt-sheet .daterow { padding: 0; gap: 8px; }
  .datefield {
    flex: 1; border: 1px solid var(--border); border-radius: var(--r-md); padding: 4px 12px;
    position: relative; cursor: pointer; background: var(--card);
    box-shadow: var(--shadow-card);
    transition: border-color .15s ease, box-shadow .15s ease;
  }
  .datefield .dl { font-size: 12px; color: var(--text-3); }
  .datefield .dv { font-size: 15px; font-weight: 600; margin-top: 2px; color: var(--text); }
  /* Viền chỉ đổi màu primary khi tương tác (hover/nhấn) — giống hệt hover của MudSelect/MudAutocomplete
     bên trên — để field ngày đồng nhất với các control khác lúc nghỉ (trước đây select luôn có
     màu primary do nhầm áp dụng cho mọi trạng thái, khiến field ngày nổi bật khác biệt cả lúc không
     tương tác). */
  .datefield:hover, .datefield:active {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(89,74,226,.14), var(--shadow-card);
  }

  /* MudSelect/MudAutocomplete Variant="Outlined" trong filter sheet (Cửa hàng/Thời gian/Nhân viên/
     Khách hàng) — giữ nguyên cấu trúc mặc định của MudBlazor Outlined (label nổi/notch, bo góc 8px,
     chiều cao 40px) giống Login.razor, chỉ override màu viền: mặc định MudBlazor dùng xám đậm
     rgb(189,189,189) hơi thô, đổi sang var(--border) (cùng tông nhạt với .datefield/.search) cho
     nhẹ nhàng hơn. Hover đổi primary thay vì đen mặc định (--mud-palette-action-default) để không bị
     "gằn" màu khi chạm trên mobile. Không thêm box-shadow/glow — giữ tối giản đúng tinh thần Login. */
  .flt-sheet .mud-input.mud-input-outlined .mud-input-outlined-border {
    border-color: var(--border);
    transition: border-color .15s ease;
  }
  .flt-sheet .mud-input.mud-input-outlined:not(.mud-disabled):not(:focus-within):hover .mud-input-outlined-border {
    border-color: var(--primary);
  }

  /* Nút hành động chính trong filter sheet (vd "LỌC") — gắn lên MudButton, global nên
     không cần ::deep dù component MudBlazor. Mặc định (Bills, ReceivableReport…) vẫn giữ nút
     gradient đậm; riêng trong .flt-sheet đồng bộ về style nhạt giống nút "Áp dụng" (.bsheet-apply)
     vì cùng là hành động xác nhận bộ lọc trong 1 sheet. */
  .btn-primary {
    border-radius: var(--radius) !important;
    background: var(--grad-hero) !important; color: #fff;
    font-size: 15px; font-weight: 600;
    letter-spacing: .04em; text-transform: uppercase; padding: 15px !important;
    box-shadow: 0 8px 20px rgba(74,59,212,.30);
    margin-top: 28px;
  }
  .flt-sheet .btn-primary {
    background: var(--primary-soft) !important;
    color: var(--primary) !important;
    box-shadow: none !important;
    border-radius: var(--r-md) !important;
    padding: 12px !important;
  }
  .flt-sheet .btn-primary:active { background: #DEDCF8 !important; }

  /* MudRadio "Xem chi tiết thu theo…" (RevenueReportDetail) — bootstrap border-1/rounded-3 trên
     component cho border-style mặc định lạ (không phải solid); ép lại solid + đồng bộ màu/bo góc
     với các control khác trong sheet. Viền đổi màu primary khi đang chọn, giống .datefield active.
     MudStack Spacing="1" thực chất tạo gap 4px (class "gap-1" của Bootstrap) giữa các field, KHÔNG
     phải 8px — margin "m-1" (4px mọi phía) của radio cộng dồn 2 chiều giữa 2 radio thành 8px, gấp đôi
     gap chuẩn. Ép lại margin rõ ràng (dưới 4px, item cuối bỏ margin) để khớp đúng nhịp 4px toàn sheet. */
  .flt-sheet .mud-radio.border-1 {
    border-style: solid !important;
    border-width: 1px !important;
    border-color: var(--border) !important;
    border-radius: var(--r-md) !important;
    box-shadow: var(--shadow-card);
    transition: border-color .15s ease, box-shadow .15s ease;
    margin: 0 0 4px !important;
  }
  .flt-sheet .mud-radio.border-1:last-child { margin-bottom: 0 !important; }
  .flt-sheet .mud-radio.border-1:has(.mud-checked) {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(89,74,226,.14), var(--shadow-card);
  }

  /* ── Segment pill (MudToggleGroup) — dùng ở Cashbook (Tất cả/Tiền mặt/Chuyển khoản) và
     RevenueReportDetail. Global nên áp thẳng lên MudToggleGroup/MudToggleItem, không cần ::deep. ── */
  .seg.mud-toggle-group {
    display: flex; gap: 4px; margin: 8px 14px 0; padding: 6px;
    background: var(--surface);
    border-radius: 999px;
  }
  .seg .mud-toggle-item {
    flex: 1; justify-content: center; text-align: center;
    font-size: 13.5px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase;
    color: var(--text-2); padding: 9px 4px !important; margin: 0 !important;
    border-radius: 999px !important;
    transition: background .2s, color .2s, box-shadow .2s;
  }
  .seg .mud-toggle-item.mud-toggle-item-selected {
    background: var(--grad-hero); color: #fff;
    box-shadow: 0 4px 12px rgba(74,59,212,.30);
  }

  /* ── Tab gạch dưới dùng chung (CustomerDebtDetail: Công nợ/Lịch sử; DlgCustomerHistory: 3 tab).
     Trước đây chỉ scoped trong CustomerDebtDetail.razor.css, promote lên global vì đã có consumer
     thứ 2 — dialog không có shell class riêng nên bắt buộc phải global mới dùng lại được. ── */
  .utabs { display: flex; background: var(--card); border-bottom: 1px solid var(--line); }
  .utab {
    flex: 1; position: relative; display: flex; align-items: center; justify-content: center; gap: 7px;
    border: none; background: none; font-family: inherit; font-size: 14px; font-weight: 600;
    letter-spacing: .02em; text-transform: uppercase; color: var(--text-2); padding: 12px 0 13px; cursor: pointer;
  }
  .utab.active { color: var(--primary); }
  .utab.active::after {
    content: ''; position: absolute; left: 50%; bottom: -1px; transform: translateX(-50%);
    width: 80%; height: 3px; border-radius: 3px 3px 0 0; background: var(--primary);
  }

  /* ── FAB (nút "+" nổi góc dưới phải) — dùng chung cho mọi trang danh sách có nút thêm mới
     (Bills, IncomeExpense, Customers...). Trước đây chỉ scoped trong Bills.razor.css nên các trang
     khác dùng lại Class="fab" không có position:fixed -> nút nằm lẫn trong luồng tài liệu, bị đẩy
     xuống cuối danh sách và khuất sau bottom-nav, coi như "biến mất" khỏi màn hình. ── */
  .fab {
    position: fixed; right: 20px;
    bottom: calc(78px + env(safe-area-inset-bottom));
    width: 58px !important; height: 58px !important;
    background: var(--grad-hero) !important; color: #fff;
    box-shadow: var(--shadow-fab); z-index: var(--z-fab);
    transition: transform .14s cubic-bezier(.32,.72,.25,1),
                bottom .25s ease, box-shadow .14s ease;
  }
  .fab:active { transform: scale(.95); }

  /* ── Search xổ xuống dưới app bar (MudTextField Variant.Text, bỏ underline) — dùng ở Bills,
     RevenueReportDetail. Global nên áp thẳng lên MudTextField/MudIconButton, không cần ::deep. ── */
  .search-collapse {
    max-height: 0; overflow: hidden;
    transition: max-height .28s cubic-bezier(.32,.72,.25,1),
                padding .28s cubic-bezier(.32,.72,.25,1);
  }
  .search-collapse.open { max-height: 72px; padding-bottom: 10px; }
  .search {
    margin: 10px 14px 0;
    display: flex; align-items: center; gap: 6px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r-md); padding: 2px 6px 2px 12px;
    box-shadow: var(--shadow-card);
    transition: border-color .15s ease, box-shadow .15s ease;
  }
  .search:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(89,74,226,.14), var(--shadow-card);
  }
  .search-field { flex: 1; min-width: 0; margin: 0; }
  /* Bỏ underline mặc định vì .search đã là pill có viền */
  .search-field .mud-input.mud-input-text::before,
  .search-field .mud-input.mud-input-text::after {
    border: none !important; content: none !important;
  }
  .search-field .mud-input-slot { padding-top: 4px; padding-bottom: 4px; }
  .search-field .mud-input-adornment-start .mud-icon-root { color: var(--text-2); }

  /* ── HeroBalanceCard.Mobile.razor (số dư/tổng quan nổi bật, nền .card--hero) ── */
  .hero-balance { padding: 20px; display: flex; align-items: center; gap: 14px; }
  .hero-balance-ic {
    flex: none; width: 46px; height: 46px; border-radius: 50%;
    background: rgba(255,255,255,.18);
    display: grid; place-items: center;
  }
  .hero-balance-ic .mud-icon-root { width: 24px; height: 24px; font-size: 24px; }
  .hero-balance-label { font-size: 14px; opacity: .9; }
  .hero-balance-value { font-size: 28px; font-weight: 800; letter-spacing: -.02em; margin-top: 5px; line-height: 1; }
  .hero-balance-value .u { font-size: 16px; font-weight: 700; opacity: .85; }

  /* ── 2 mini card song song (vd Tổng thu / Tổng chi trong kỳ) — dùng ở FinancialReport, IncomeExpense.
     .cb-mini PHẢI set flex-direction:row rõ ràng — nếu không, bootstrap .card (flex-direction:column)
     thắng thế (element vẫn khớp cả 2 selector, nhưng chỉ 1 rule set flex-direction) -> icon rớt lên
     trên, chữ xuống dưới, căn giữa (bug, đã sửa — trước đây tưởng nhầm là chủ ý). */
  .cb-duo { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 12px 0 22px; }
  .cb-mini { padding: 13px; display: flex; flex-direction: row; align-items: center; gap: 11px; }
  .cb-mini > div { flex: 1; min-width: 0; }
  .cb-mini-ic {
    flex: none; width: 38px; height: 38px; border-radius: 50%;
    display: grid; place-items: center; color: #fff;
  }
  .cb-mini-ic .mud-icon-root { width: 19px; height: 19px; font-size: 19px; }
  .cb-mini .lbl { font-size: 12.5px; color: var(--text-2); }
  .cb-mini .val { font-size: 17px; font-weight: 800; margin-top: 3px; line-height: 1; }

  /* ── Dòng hiển thị phiên bản ở chân trang ── */
  .app-ver {
    text-align: center;
    font-size: 13px;
    color: var(--text-3);
    margin-top: 16px;
  }

  /* ══════════════════════════════════════════════════════════════════════
     REPORT CARD PRIMITIVES — dùng chung cho nhóm trang báo cáo mobile
     (RevenueReportDetail .rrd-m / ReceivableReport .rcv-m / OtherIncome .oinc-m /
      OtherExpenses .oexp-m). Trước đây port lặp trong từng *.razor.css; đã promote lên
     global sau đợt rà soát vì đủ ≥3–4 trang dùng (xem Plans/ReceivableReport.md mục 12 +
     Plans/MobileLessonsLearned.md mục 10). Global nên áp thẳng, KHÔNG cần ::deep.
     AN TOÀN với Bills/Home: các class ordr- / incd- / pd-row / pts-listhead / day- / cust-
     KHÔNG xuất hiện ở trang khác; .status base trùng y hệt .bills-m .status (Bills thêm
     cursor:pointer + scoped nên vẫn thắng); biến thể màu .status.new/.cash… là dot-chain,
     KHÔNG khớp .status--* (BEM) của Bills/Home. Phần delta riêng trang (màu tiền, accordion,
     hero, skeleton, empty, margin .incd-note, override day-card của rcv) vẫn để scoped.
     ══════════════════════════════════════════════════════════════════════ */

  /* Hiệu ứng zoom-in khi card lọt khung nhìn (JS bindCardReveal gắn class .card-pop). Bills
     giữ keyframe riêng bills-card-in vì skeleton của Bills cũng dùng nó — không gộp vào đây. */
  @keyframes card-in {
    from { opacity: 0; transform: scale(.85); }
    to   { opacity: 1; transform: scale(1); }
  }
  .card-pop { animation: card-in 1.2s cubic-bezier(.34,1.56,.64,1) both; }
  @media (prefers-reduced-motion: reduce) { .card-pop { animation: none; } }

  /* Khối tổng/hero + bộ lọc + dòng đếm phía trên danh sách card — đặt NGOÀI .list (sibling,
     flex:0 0 auto) để đứng yên khi cuộn, chỉ .list (card) cuộn. Padding ngang + top ở đây thay
     cho phần .list từng đảm nhận (nay .list bỏ padding-top, xem override trong từng *.razor.css). */
  .list-subhead { flex: 0 0 auto; padding: 14px 14px 0; }

  /* Tiêu đề nhóm danh sách (Theo ngày / Theo khách hàng…) */
  .pts-listhead { display: flex; align-items: center; gap: 9px; justify-content: flex-start; margin: 2px 0 12px; }
  .pts-listhead .t { font-size: 14px; font-weight: 700; color: var(--text-3); }
  .pts-listhead .cnt { font-size: 14px; color: var(--text-3); font-weight: 600; margin-left: auto; }
  .pts-listhead .cnt-skel { margin-left: auto; border-radius: 5px; }   /* skeleton thay cho số đếm lúc loading */

  /* 3 thẻ lọc tổng theo hình thức (RevenueReportDetail / OtherIncome / OtherExpenses) */
  .incd-filters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
  .incd-filt {
    /* display:block bắt buộc: MudBlazor.min.css có "button{display:inline-flex}" áp lên mọi <button> */
    display: block;
    background: var(--card); border: 2px solid transparent; border-radius: var(--r-md); box-shadow: var(--shadow-card);
    padding: 11px 8px; text-align: center; cursor: pointer; font-family: inherit;
    transition: border-color .15s ease, box-shadow .15s ease, transform .14s cubic-bezier(.32,.72,.25,1);
  }
  .incd-filt:active { transform: scale(.97); }
  .incd-filt.on { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(89,74,226,.12), var(--shadow-card); }
  .incd-filt .l { display: block; font-size: 11.5px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .incd-filt .v { display: block; font-size: 14px; font-weight: 800; margin-top: 5px; letter-spacing: -.01em; }
  .incd-skelv { margin: 5px auto 0; }   /* skeleton số tiền, căn giữa khớp margin-top:5px của .v */
  .incd-filt.all .v  { color: var(--primary); }
  .incd-filt.cash .v { color: var(--green); }
  .incd-filt.bank .v { color: var(--blue); }

  /* Hàng chi tiết trong panel mở rộng (Mã phiếu / Nhân viên / Ngày…) */
  .pd-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 14.5px; color: var(--text-2); padding: 6px 0; }
  .pd-row b { flex: none; color: var(--text); font-weight: 700; text-align: right; }
  .pd-row b.code { font-family: var(--font-mono); font-weight: 700; font-size: 14px; }

  /* Thẻ thông tin phiếu chung (info-card) — dùng ở IncomeExpense, dự phòng SystemLogs sau này
     (Mobile.Prototype/styles.css ghi chú đây là pattern dùng chung 2 màn). Không có accordion/click
     mở rộng — phần .info-card-detail luôn hiển thị sẵn, chỉ nút "..." (.info-card-menu) mở action sheet. */
  .info-card { margin-bottom: 12px; }   /* shell -> .card.card--raised */
  .info-card-top { display: flex; align-items: center; gap: 8px; }
  .info-card-name { flex: 1; min-width: 0; font-size: 17px; font-weight: 800; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .info-card-badge { flex: none; font-size: 10.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; background: var(--surface); color: var(--text-2); }
  .info-card-badge.thu { background: var(--green-soft, rgba(0,200,83,.12)); color: var(--green); }
  .info-card-badge.chi { background: var(--orange-soft, rgba(251,140,0,.13)); color: var(--orange); }
  .info-card-menu { flex: none; width: 30px; height: 30px; margin-right: -6px; border: none; background: none; color: var(--text-3); font-size: 18px; cursor: pointer; border-radius: 8px; display: grid; place-items: center; }
  .info-card-menu:active { background: var(--surface); }
  .info-card-time { display: flex; align-items: center; gap: 6px; margin-top: 11px; font-size: 13px; color: var(--text-2); }
  .info-card-time .mud-icon-root { flex: none; font-size: 14px; }
  .info-card-time span + .mud-icon-root { margin-left: 10px; }   /* khoảng cách giữa người nộp/nhận và icon giờ */
  .info-card-detail { margin-top: 13px; background: var(--surface); border-radius: var(--r-md); padding: 4px 14px; }
  .info-card-detail .pd-row.hl b { color: var(--text); font-size: 15.5px; }
  .info-card-detail .pd-row.hl b.thu { color: var(--green); }
  .info-card-detail .pd-row.hl b.chi { color: var(--orange); }

  /* Chip danh mục "Các khoản Thu/Chi" (lọc = Tất cả) — dùng ở IncomeExpense.
     flex-direction:row PHẢI khai rõ (giống .cb-mini) — nếu không, bootstrap .card
     (flex-direction:column) thắng thế vì .ince-cat chỉ set display:flex. */
  .ince-cat { display: flex; flex-direction: row; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 13px 14px; margin-bottom: 12px; }   /* shell -> .card.card--interactive */
  .ince-cat .ic { flex: none; width: 40px; height: 40px; border-radius: var(--r-sm); background: var(--primary-soft); color: var(--primary); display: grid; place-items: center; }
  .ince-cat .m { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .ince-cat .m .lbl { font-size: 14.5px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ince-cat .m .v { font-size: 12.5px; font-weight: 500; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ince-cat.active { box-shadow: 0 0 0 2px var(--primary), var(--shadow-card); }
  .cb-mini.active { box-shadow: 0 0 0 2px var(--primary), var(--shadow-card); }

  /* Ghi chú / Tặng lần giặt — margin dọc để scoped riêng từng trang (vị trí đặt khác nhau) */
  .incd-note { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; line-height: 1.4; color: var(--text-2); }
  .incd-note svg { flex: none; margin-top: 2px; color: var(--text-3); }
  .incd-note span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .incd-note.is-alert { align-items: center; gap: 5px; font-size: var(--font-size-sm); font-weight: var(--fw-medium); color: var(--text-2); }
  .incd-note.is-alert svg { margin-top: 0; color: var(--red); }

  /* Badge trạng thái — base + biến thể màu. Base trùng .bills-m .status (Bills thêm cursor).
     Màu đơn hàng khớp Tools.cs (_statusColorMap); .cash/.bank là hình thức thanh toán. */
  .status {
    flex: none; font-size: var(--font-size-xs); font-weight: var(--fw-semibold);
    padding: 3px 9px; border-radius: var(--radius-pill);
    display: inline-flex; align-items: center; gap: 3px;
  }
  .status.new       { background: var(--orange-soft);  color: var(--orange); }  /* Đơn mới = Warning */
  .status.washing   { background: var(--primary-soft); color: var(--primary); } /* Đang giặt = Primary */
  .status.done      { background: var(--blue-soft);    color: var(--blue); }    /* Giặt xong = Info */
  .status.delivered { background: var(--green-soft);   color: var(--green); }   /* Giao khách = Success */
  .status.debt      { background: var(--red-soft);     color: var(--red); }     /* Khách nợ = Error */
  .status.cash { background: var(--green-soft); color: var(--green); }          /* Hình thức: Tiền mặt */
  .status.bank { background: var(--blue-soft);  color: var(--blue); }           /* Hình thức: Chuyển khoản */

  /* Order card (RevenueReportDetail + ReceivableReport). Phần accordion day/cust
     (day-chev, .day-card.open, .pr, .cust-card .ordr-detail) chỉ RevenueReportDetail có
     nên để scoped riêng; rcv override day-card sang cursor:default cũng scoped. */
  .ordr-item, .day-card, .cust-card {
    background: var(--color-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
    margin-bottom: var(--gap-list); cursor: pointer; transition: transform var(--dur-fast) var(--ease-ios);
  }
  .ordr-item:active, .day-card:active, .cust-card:active { transform: scale(.99); }
  .ordr-item.collapsible { padding: 0; }
  .ordr-headtop { display: flex; align-items: center; gap: 11px; padding: var(--pad-card) var(--pad-card) 0; }
  .ordr-av { flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--color-avatar-bg); color: var(--color-avatar-fg); display: grid; place-items: center; font-size: 16px; font-weight: 700; }
  .ordr-id { flex: 1; min-width: 0; }
  .ordr-cust { font-size: 14.5px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ordr-phone { font-size: 13px; color: var(--text-3); margin-top: 3px; }
  .ordr-headtop .status { flex: none; }
  .ordr-headbot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-3) var(--pad-card) var(--pad-card); }
  .ordr-due { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: var(--font-size-sm); font-weight: var(--fw-medium); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ordr-due svg { flex: none; color: var(--text-3); }
  .ordr-amt-lg { flex: none; margin-left: auto; font-size: 17px; font-weight: 800; color: var(--text); }
  .ordr-amt-lg.zero { color: var(--text-3); }
  .ordr-detail { background: var(--surface); border-radius: var(--r-md); }
  .ordr-item.collapsible .ordr-detail { margin: 0 var(--pad-card); max-height: 0; opacity: 0; padding: 0 var(--pad-card); overflow: hidden; transition: max-height var(--dur-slow) var(--ease-ios), opacity var(--dur-base) ease, padding var(--dur-slow) ease, margin-top var(--dur-slow) ease; }
  .ordr-item.collapsible.open .ordr-detail { max-height: 320px; opacity: 1; padding: 4px var(--pad-card); margin-top: var(--space-3); }
  .day-card { padding: 0; }
  .day-row-head { display: flex; align-items: center; gap: 10px; padding: var(--pad-card); }
  .day-left { flex: 1; min-width: 0; }
  .day-date { font-size: 14px; font-weight: 700; color: var(--text); }
  .day-sub { font-size: 13px; color: var(--text-3); margin-top: 2px; }
  .day-amt { flex: none; font-size: 16px; font-weight: 800; color: var(--text); }
  .day-amt.zero { color: var(--text-3); font-weight: 500; }
  .cust-card { padding: var(--pad-card); }
  .cust-head { display: flex; align-items: center; gap: 11px; }
  .cust-head .ordr-id { flex: 1; min-width: 0; }
  .cust-money { flex: none; text-align: right; }
  .cust-amt { font-size: 17px; font-weight: 800; color: var(--text); letter-spacing: -.01em; }
  .cust-amt.zero { color: var(--text-3); }
  .cust-cnt { font-size: 13px; color: var(--text-3); margin-top: 3px; }
  .cust-foot { margin-top: 9px; padding-top: 11px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
  .cust-foot .ca { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--text-2); }
  .cust-foot .ca svg { flex: none; color: var(--text-3); }

  /* ── Trang xác thực (Login/ForgotPassword/ResetPassword) — full-bleed kiểu app gốc:
     không thẻ nổi, nội dung nằm trực tiếp trên nền gradient sẵn có của <body> (app.css),
     logo lớn dạng hero, field không viền hộp (MudTextField/MudSelect Variant="Variant.Text").
     Dùng chung cho cả 3 trang nên đặt ở đây thay vì lặp lại trong từng {Page}.razor.css. ── */
  .auth-m {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    padding: max(env(safe-area-inset-top), 24px) 24px calc(20px + env(safe-area-inset-bottom));
  }
  .auth-m.auth-center { align-items: center; justify-content: center; text-align: center; gap: 14px; }

  .auth-topnav { display: flex; align-items: center; gap: 4px; margin: -8px -10px 4px; }
  .auth-topnav .t { font-size: 15px; font-weight: 700; color: var(--text); }

  /* Bố trí logo giữ nguyên như bản gốc: avatar "U" + "viwash" nằm NGANG cùng dòng (không xếp
     dọc), slogan/subtitle xuống dòng dưới — chỉ thêm khoảng cách trên/dưới cho vừa màn hình mobile,
     không đổi kích thước/kiểu chữ so với desktop. */
  .auth-hero { text-align: center; margin: 24px 0 32px; }

  .auth-fields { display: flex; flex-direction: column; gap: 2px; }
  .auth-forgot { display: flex; justify-content: flex-end; margin: 6px 2px 4px; }

  .auth-submit.mud-button-root {
    border-radius: var(--r-pill) !important;
    height: 52px;
    font-size: 15.5px;
    font-weight: 700;
    text-transform: none;
    box-shadow: 0 10px 24px rgba(74,59,212,.28);
    margin-top: 14px;
  }

  .auth-hotline { display: flex; justify-content: center; margin-top: 24px; }

  .auth-note {
    font-size: 13.5px;
    color: var(--text-2);
    line-height: 1.5;
    text-align: center;
    background: var(--surface);
    border-radius: var(--r-md);
    padding: 14px 16px;
  }
}