/* Token thiết kế và các lớp dùng chung cho giao diện mobile.
   Style riêng của từng trang đặt trong file CSS của 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);
  /* Viền card, cùng tông với bóng card */
  --color-border-card: rgba(20,30,60,.08);

  /* ── 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ố và mã đơn dùng chung font với phần còn lại của giao diện */
  --font-mono:  "Roboto", sans-serif;
  --font-brand: "Audiowide", cursive;

  /* Thang cỡ chữ dùng chung: 2xs badge · xs chú thích · sm phụ đề · base nội dung ·
     md tên khách và dịch vụ · lg số tiền · xl và 2xl số tổng · display số hiển thị lớn.
     Đổi ở đây là cả giao diện mobile theo. */
  --font-size-2xs:     11px;
  --font-size-xs:      12px;
  --font-size-sm:      13px;
  --font-size-base:    15px;
  --font-size-md:      17px;
  --font-size-lg:      20px;
  --font-size-xl:      22px;
  --font-size-2xl:     28px;
  --font-size-display: 34px;

  --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;
  /* Bo góc card, dùng chung cho mọi loại card để không lệch nhau */
  --radius-card: 16px;

  /* ── 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);
  /* Bóng card: một lớp mảnh sát viền và một lớp lan toả rộng */
  --shadow-card-soft:       0 1px 2px rgba(20,30,60,.04), 0 4px 16px rgba(20,30,60,.06);
  --shadow-card-soft-hover: 0 8px 22px rgba(20,30,60,.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;

  /* Tên gọi cũ, giữ lại cho các style đang tham chiếu */
  --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);
}

/* Từ 1023px trở xuống là mobile: ẩn thanh trên, hiện thanh điều hướng dưới.
   Desktop giữ nguyên như cũ. */
@media (max-width: 1023px) {
  /* Khoá không cho trang gốc cuộn, nếu không thanh trên sẽ trôi theo khi cuộn */
  html, body {
    height: 100%;
    overflow: hidden;
  }

  /* Ẩ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; }

  /* Vùng cuộn chính trên mobile: cao bằng màn hình, tự cuộn, ẩn thanh cuộn
     cho đồng bộ với các vùng cuộn khác trong app */
  .main-content {
    height: 100dvh !important;
    min-height: 0 !important;
    max-height: 100dvh !important;
    overflow-y: auto !important;
    overflow-x: hidden;
    scrollbar-width: none;
  }
  .main-content::-webkit-scrollbar {
    display: none;
  }

  /* Không giới hạn bề rộng, mỗi trang tự quyết định bố cục */
  .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 thì bỏ đệm đáy ở đây, nếu không thanh trên sẽ trôi khi cuộn.
     MỌI trang mới theo kiểu này PHẢI thêm tên lớp vào danh sách 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, .impc-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;
  }

  /* Khung trang tự quản chiều cao: cao bằng màn hình, thanh trên đứng ngoài vùng cuộn */
  .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, .impc-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 {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    overflow: hidden;
  }

  /* Trang lập phiếu: khoá cuộn ở lớp ngoài để vuốt không kéo trôi thanh trên khi form còn ngắn */
  .main-content:has(.newbill-m) {
    overflow: hidden !important;
  }
}

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

  /* Đệm quanh nội dung desktop để không dính sát thanh trên */
  .app-shell-body {
    padding: .5rem;
  }
}

/* Các lớp dùng chung cho mọi trang mobile, gắn trực tiếp lên component.
   Toàn bộ bọc trong media query mobile để không ảnh hưởng desktop. */
@media (max-width: 1023px) {

  /* Thông báo nổi: dạng viên thuốc kính mờ, nằm trên thanh điều hướng dưới.
     Chỉ đặt hình dạng và vị trí, giữ nguyên màu theo mức độ thông báo. */
  #mud-snackbar-container.mud-snackbar-location-bottom-center {
    bottom: calc(var(--nav-clearance, 110px) + env(safe-area-inset-bottom) + 10px);
    margin-top: 0;
  }
  .mud-snackbar-location-bottom-center .mud-snackbar {
    min-width: 0;
    max-width: calc(100vw - 48px);
    width: max-content;
    margin: 6px auto 0;
    border-radius: var(--radius-pill);
    padding: 11px 20px;
    font-size: var(--font-size-sm);
    font-weight: 400;
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  /* Ẩn nút đóng vì thông báo tự tắt */
  .mud-snackbar-location-bottom-center .mud-snackbar-content-action {
    display: none;
  }

  /* ── 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); }

  /* Card nổi bật nền gradient chữ trắng, dùng cho số dư và số tổng quan */
  .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: var(--font-size-base);
    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;
  }
  /* Bỏ đệm mặc định để tự kiểm soát chiều cao hàng, và bỏ vạch chấm kiểu desktop
     vì mobile đã có vạch mảnh riêng */
  .settings-list .mud-list-item,
  .settings-list .mud-list-item-gutters {
    min-height: 0;
    padding: 0;
    border-bottom: none !important;
  }
  .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); }

  /* Vạch mảnh giữa 2 hàng. Thu nhỏ theo chiều dọc thay vì đặt thẳng nửa pixel
     để vạch luôn sắc trên mọi mật độ màn hình. */
  .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: var(--font-size-md);
    font-weight: 500;
    color: var(--text);
    line-height: var(--lh-snug);
  }
  .settings-value {
    flex: none;
    font-size: var(--font-size-base);
    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 */
  .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); }

  /* Hàng không có quyền: vẫn hiện nhưng làm mờ, không bấm được, đổi sang icon ổ khoá */
  .settings-row--locked { pointer-events: none; }
  .settings-row--locked .settings-icon { filter: grayscale(1); opacity: .5; }
  .settings-row--locked .settings-label { color: var(--text-3); font-weight: 400; }
  .settings-row--locked .settings-lock { color: var(--text-3); font-size: 17px; opacity: .85; }

  /* Biến thể hàng danh sách không có icon dẫn đầu. Chỉ gộp phần chung ở đây,
     phần khác biệt của từng trang vẫn để trong CSS riêng của trang. Khai lề trái phải
     tách riêng để không đè lên đệm trên dưới riêng
     từng trang đặt sau, tránh lệ thuộc thứ tự nạp CSS giữa 2 rule. */
  .bank-m .bank-row,
  .rack-m .rack-row,
  .unit-m .unit-row__content,
  .status-m .st-row__content {
    display: flex;
    width: 100%;
    padding-left: 16px;
    padding-right: 16px;
    cursor: pointer;
  }

  /* Menu xổ xuống ở thanh trên: bỏ đệm mặc định cho chiều cao hàng khớp danh sách */
  .menu-item.mud-list-item { padding: 0; min-height: 0; }
  .menu-item .mud-list-item-text { margin: 0; }
  .menu-item .settings-label { font-size: var(--font-size-base); }

  /* Thanh trên dùng chung cho mọi trang mobile có header riêng */
  .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: var(--font-size-lg); font-weight: 500; line-height: var(--lh-tight); 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); }
  /* Ép nút icon về khung vuông để vùng bấm tròn đều, không bị bầu dục */
  .nav-icon-btn.mud-menu .mud-icon-button-size-small {
    width: 36px !important; height: 36px !important;
  }

  /* Bảng chọn trượt lên từ đáy màn hình, dùng chung cho nhiều trang */
  .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;
    /* Đẩy lên bằng chiều cao bàn phím để ô nhập không bị che */
    bottom: var(--kb-inset, 0px); left: 0; right: 0;
    transform: translateY(105%);
    background: var(--card);
    /* Bo góc theo đúng tỷ lệ card chuẩn */
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    transition: transform .26s cubic-bezier(.32,.72,.25,1); z-index: var(--z-sheet);
    box-shadow: var(--shadow-pop);
  }
  /* Không đệm trái phải để hiệu ứng chạm của hàng chạy sát mép bảng */
  .sheet { padding: 8px 0 calc(14px + env(safe-area-inset-bottom)); }
  .flt-sheet {
    padding: 8px 16px calc(24px + env(safe-area-inset-bottom));
    /* Khi bàn phím mở thì siết chiều cao lại để bảng không tràn khỏi màn hình */
    max-height: calc(92dvh - var(--kb-inset, 0px)); 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;
  }

  /* Danh sách trong bảng chọn: bỏ đệm mặc định để hàng tự kiểm soát chiều cao */
  .sheet-list { padding: 0; }
  /* Bỏ vạch chấm kiểu desktop để không bị hai vạch chồng nhau */
  .sheet-list .mud-list-item,
  .sheet-list .mud-list-item-gutters { min-height: 0; padding: 0; border-bottom: none !important; }
  .sheet-list .mud-list-item-text { margin: 0; }
  /* Trong bảng chọn, vạch kẻ trải dưới cả icon thay vì thụt qua icon */
  .sheet-list .settings-row { --list-inset: 14px; }
  /* Vạch ngăn hành động xoá: vẽ lại bằng đúng kỹ thuật vạch mảnh ở trên
     để đậm nhạt khớp với các vạch còn lại */
  .sheet-divider.mud-divider {
    border: none;
    opacity: 1;
    height: 1px;
    background: var(--color-hairline);
    transform: scaleY(.5);
    transform-origin: 0 0;
    margin: 2px 0 2px 14px;
  }

  /* Avatar tròn dùng chung cho thẻ danh sách và đầu bảng chọ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: var(--font-size-lg); font-weight: 700;
  }

  /* Đầu bảng chọn: avatar cùng hàng với tên và mã */
  .sheet-head {
    display: flex; align-items: center; gap: 11px;
    /* Đệm trái phải khớp hàng danh sách để avatar thẳng hàng với icon bên dưới */
    padding: 2px 14px 12px; border-bottom: 1px solid var(--line); margin-bottom: 6px;
  }
  .sheet-head .avatar { width: 38px; height: 38px; font-size: var(--font-size-md); }
  .sheet-head .nm { font-size: var(--font-size-md); font-weight: 700; color: var(--text); }
  .sheet-head .cd {
    font-family: var(--font-mono); font-weight: 500;
    font-size: var(--font-size-xs); color: var(--text-3); margin-top: 1px;
  }

  /* Bộ chọn ngày phải đặt NGOÀI bảng chọn, nếu để bên trong thì lịch bị cắt mất.
     Lớp này giấu khung nhập của nó đi, trong bảng chỉ hiện một ô chỉ đọc để bấm mở lịch. */
  .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ư
     Bỏ đệm để hai ô ngày canh thẳng mép với các ô còn lại trong bảng lọ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: var(--font-size-xs); color: var(--text-3); }
  .datefield .dv { font-size: var(--font-size-md); font-weight: 600; margin-top: 2px; color: var(--text); }
  /* Viền chỉ đổi màu khi chạm vào, để lúc nghỉ trông giống các ô khác */
  .datefield:hover, .datefield:active {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(89,74,226,.14), var(--shadow-card);
  }

  /* Ô nhập trong bảng lọc: nền kính mờ, viền mềm bo tròn, bóng nhẹ, bỏ gạch chân */
  .flt-sheet .mud-input-filled {
    background: transparent !important;
    border: 1px solid #e2dfeecc;
    border-radius: var(--r-md) !important;
    box-shadow: var(--shadow-card);
    transition: border-color .15s ease, box-shadow .15s ease;
  }
  .flt-sheet .mud-input-underline::before,
  .flt-sheet .mud-input-underline::after {
    display: none;
  }
  .flt-sheet .mud-input-control:focus-within .mud-input-filled {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(89,74,226,.14), var(--shadow-card);
  }

  /* Nút chính trong bảng lọc, để nhạt như nút áp dụng vì cùng là xác nhận bộ lọc */
  .btn-primary {
    border-radius: var(--radius) !important;
    background: var(--grad-hero) !important; color: #fff;
    font-size: var(--font-size-md); 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;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease;
  }
  .flt-sheet .btn-primary:active { background: #DEDCF8 !important; }
  /* Có thay đổi so với lúc mở bảng lọc thì nút đậm màu lên để nhắc bấm áp dụng */
  .flt-sheet .btn-primary.active {
    background: var(--grad-hero) !important;
    color: #fff !important;
    box-shadow: 0 8px 20px rgba(74,59,212,.30) !important;
  }
  .flt-sheet .btn-primary.active:active { background: var(--grad-hero) !important; }

  /* Nút lưu chuẩn dùng chung: viên thuốc bo tròn, màu phẳng, không viết hoa */
  .btn-mobile-pill.mud-button-root {
    border-radius: 50rem !important;
  }

  /* Thanh chứa nút lưu ghim đáy các trang biểu mẫu */
  .form-submit-bar {
    position: sticky;
    bottom: 0;
    margin-top: var(--space-8);
    padding: 12px 0 4px;
  }

  /* Ô chọn một lựa chọn trong bảng lọc: viền và bo góc đồng bộ với các ô khác,
     khoảng cách dọc khai rõ để khớp nhịp 4px của cả bảng */
  .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);
  }

  /* Nhóm nút chọn dạng viên thuốc */
  .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: var(--font-size-base); 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 */
  .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: var(--font-size-base); font-weight: 600;
    letter-spacing: .02em; text-transform: uppercase; color: var(--text-2); padding: 12px 0 13px; cursor: pointer;
  }
  /* Cho icon và chữ nằm thẳng trong bố cục của tab, không thêm một tầng bọc */
  .utab .mud-button-label { display: contents; }
  .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);
  }

  /* Bo tròn hộp thoại trên mobile */
  .mud-dialog { border-radius: 20px !important; overflow: hidden; }

  /* Nút thêm mới nổi ở góc dưới phải, dùng chung cho mọi trang danh sách */
  .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); }

  /* Ô tìm kiếm xổ xuống dưới thanh trên */
  .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); }

  /* Thẻ số dư và số tổng quan nổi bật */
  .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: var(--font-size-base); opacity: .9; }
  .hero-balance-value { font-size: var(--font-size-2xl); font-weight: 800; letter-spacing: -.02em; margin-top: 5px; line-height: 1; }
  .hero-balance-value .u { font-size: var(--font-size-md); font-weight: 700; opacity: .85; }
  /* Khối nhãn và giá trị co giãn để chừa chỗ cho badge đếm bên phải */
  .hero-balance-main { flex: 1; min-width: 0; }
  /* Badge đếm số phiếu bên phải thẻ nổi bật */
  .hero-balance-cnt {
    flex: none; align-self: flex-start; font-size: var(--font-size-base); font-weight: 700;
    background: rgba(255,255,255,.16); padding: 5px 11px; border-radius: 999px; color: #fff;
  }
  .hero-balance-skelv { margin-top: 5px; }
  .hero-balance-skelcnt { flex: none; align-self: flex-start; border-radius: 999px; }

  /* Khung chờ trên nền gradient phải là vệt trắng mờ, màu xám mặc định gần như không thấy */
  .card--hero .mud-skeleton { background-color: rgba(255, 255, 255, .22); border-radius: 6px; }
  .card--hero .mud-skeleton-wave::after {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .3), transparent);
  }

  /* Hai thẻ nhỏ song song, ví dụ Tổng thu và Tổng chi trong kỳ.
     PHẢI khai rõ hướng hàng ngang, nếu không icon và chữ sẽ bị xếp dọc. */
  .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: var(--font-size-xs); color: var(--text-2); }
  .cb-mini .val { font-size: var(--font-size-lg); 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: var(--font-size-sm);
    color: var(--text-3);
    margin-top: 16px;
  }

  /* Trạng thái danh sách rỗng, dùng chung cho các trang danh mục */
  .unit-m .unit-empty, .status-m .status-empty, .svc-m .svc-empty, .shop-m .shop-empty,
  .debt-m .cust-empty, .rack-m .rack-empty, .pts-m .cust-empty, .cust-m .cust-empty,
  .bank-m .bank-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    padding: 60px 24px; text-align: center; color: var(--text-3);
  }

  /* Các thành phần thẻ dùng chung cho nhóm trang báo cáo mobile.
     Phần khác biệt riêng của từng trang vẫn để trong CSS của trang đó. */

  /* Hiệu ứng hiện dần khi card lọt vào khung nhìn */
  @keyframes card-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  .card-pop { animation: card-in .8s cubic-bezier(.22,1,.36,1) both; }
  @media (prefers-reduced-motion: reduce) { .card-pop { animation: none; } }

  /* Phần tử mốc để biết khi nào cần nạp thêm. Phải có chiều cao thật, nếu bằng 0 sẽ không nhận ra. */
  .list-more { min-height: 1px; width: 100%; }
  /* Khi dang nap them thi hien chi bao trang thai canh giua */
  .list-more.loading {
    display: flex; align-items: center; justify-content: center;
    padding: 16px 0 24px;
  }

  /* Khối tổng, bộ lọc và dòng đếm phía trên danh sách, đứng yên khi cuộn */
  .list-subhead { flex: 0 0 auto; padding: 14px 14px 0; }

  /* Tiêu đề nhóm danh sách */
  .pts-listhead { display: flex; align-items: center; gap: 9px; justify-content: flex-start; margin: 2px 0 12px; }
  .pts-listhead .t, .cb-note { font-size: var(--font-size-base); font-weight: 700; color: var(--text-3); }
  .pts-listhead .cnt { font-size: var(--font-size-base); 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 {
    /* Phải khai rõ display:block để không bị quy tắc mặc định của thư viện đè lên */
    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: var(--font-size-xs); 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: var(--font-size-base); 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); }
  /* Bỏ viết hoa mặc định của nút */
  .incd-filt { text-transform: none !important; }

  /* 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: var(--font-size-base); color: var(--text-2); padding: 3px 0; }
  /* Khoá nhãn một dòng, phần xuống dòng dành cho giá trị bên phải */
  .pd-row > span:first-child { flex: none; white-space: nowrap; }
  .pd-row b { flex: 1 1 auto; min-width: 0; color: var(--text); font-weight: 700; text-align: right; }
  .pd-row b.code { font-family: var(--font-mono); font-weight: 700; font-size: var(--font-size-base); }

  /* Thẻ thông tin phiếu: phần chi tiết luôn hiện sẵn, chỉ nút ba chấm mở bảng chọn */
  .info-card { margin-bottom: 12px; }
  .info-card-top { display: flex; align-items: center; gap: 8px; }
  /* Kiểu chuẩn cho tiêu đề thẻ thông tin phiếu. Gắn thẳng lớp này vào markup,
     không khai lại font tiêu đề trong CSS riêng của từng trang. */
  .info-card-name { flex: 1; min-width: 0; font-size: var(--font-size-md); font-weight: 800; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* Chip mã phiếu nền tím nhạt, bấm vào để xem chi tiết phiếu */
  .pts-code {
    display: inline-block; font-family: var(--font-mono); font-size: var(--font-size-sm); font-weight: 600;
    color: var(--primary-dark); background: var(--primary-soft); padding: 4px 11px; border-radius: 999px;
    cursor: pointer;
  }
  .info-card-badge { flex: none; font-size: var(--font-size-2xs); 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-2); font-size: 18px; cursor: pointer; border-radius: 8px; display: grid; place-items: center; }
  .info-card-menu:active { background: var(--surface); }
  /* Kiểu chuẩn cho dòng phụ: người tạo, người nhận và thời gian */
  .info-card-time { display: flex; align-items: center; gap: 6px; margin-top: 11px; font-size: var(--font-size-sm); color: var(--text-2); }
  .info-card-time .mud-icon-root { flex: none; font-size: 14px; color: var(--text-3); }
  .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ờ */
  /* Đệm trên rộng hơn cho thoáng */
  .info-card-detail { margin-top: 13px; background: var(--surface); border-radius: var(--r-md); padding: 8px 14px; }
  .info-card-detail .pd-row.hl b { color: var(--text); font-size: var(--font-size-md); }
  .info-card-detail .pd-row.hl b.thu { color: var(--green); }
  .info-card-detail .pd-row.hl b.chi { color: var(--orange); }

  /* Thẻ phiếu thu khác và chi khác, dùng chung một bộ lớp. */
  .oth-item { margin-bottom: var(--gap-list); }
  .oth-top { display: flex; align-items: center; gap: 9px; }
  .oth-top .status { flex: none; margin-left: auto; }
  .oth-meta { display: flex; align-items: center; gap: 6px; margin-top: 11px; font-size: var(--font-size-sm); color: var(--text-2); }
  .oth-meta > svg { flex: none; color: var(--text-3); width: 14px; height: 14px; font-size: 14px; }
  .oth-meta .who { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .oth-meta .when { margin-left: auto; flex: none; display: flex; align-items: center; gap: 5px; color: var(--text-2); font-size: var(--font-size-sm); white-space: nowrap; }
  .oth-meta .when svg { flex: none; color: var(--text-3); width: 14px; height: 14px; font-size: 14px; }
  .oth-detail { margin-top: 11px; background: var(--surface); border-radius: var(--r-md); padding: 4px 14px; }
  .oth-detail .pd-row.hl b.oth-amt { font-family: inherit; }
  .oth-detail .pd-row.hl b.oth-amt.thu { color: var(--green); }
  .oth-detail .pd-row.hl b.oth-amt.chi { color: var(--orange); }
  .oth-skel { cursor: default; }
  .oth-skel:active { transform: none; }
  .oth-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    padding: 60px 24px; text-align: center; color: var(--text-3);
  }

  /* Chip danh mục các khoản thu chi. Phải khai rõ hướng hàng ngang, nếu không sẽ bị xếp dọc. */
  .ince-cat { display: flex; flex-direction: row; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 13px 14px; margin-bottom: 12px; }
  .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: var(--font-size-base); font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ince-cat .m .v { font-size: var(--font-size-xs); 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); }
  /* Cho icon và chữ nằm thẳng trong bố cục của thẻ, không thêm một tầng bọc */
  .ince-cat .mud-button-label,
  .cb-mini .mud-button-label { display: contents; }
  .ince-cat, .cb-mini { text-transform: none !important; }

  /* 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: var(--font-size-base); line-height: 1.4; color: var(--text-2); margin-top: 8px; }
  .incd-note svg, .incd-note .mud-icon-root { 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, .incd-note.is-alert .mud-icon-root { margin-top: 0; color: var(--red); }
  /* Ghi chú ở đáy thẻ: vạch phân cách và đệm đáy */
  .incd-note-bottom { margin: 0 14px; padding: 12px 0 14px; border-top: 1px solid var(--line); }
  /* Ép cỡ icon để mọi icon trong nhóm này bằng nhau */
  .incd-note .mud-icon-root, .ordr-due .mud-icon-root, .ordr-paid .mud-icon-root, .cust-foot .ca .mud-icon-root {
    width: 14px; height: 14px; font-size: 14px;
  }

  /* Chip trạng thái và các biến thể màu. Bấm vào chip mở chi tiết phiếu. */
  .status {
    flex: none; font-size: var(--font-size-xs); font-weight: var(--fw-semibold);
    padding: 3px 9px; border-radius: var(--radius-pill); cursor: pointer;
    display: inline-flex; align-items: center; gap: 3px;
  }
  .status.new       { background: var(--orange-soft);  color: var(--orange); }  /* Đơn mới */
  .status.washing   { background: var(--primary-soft); color: var(--primary); } /* Đang giặt */
  .status.done      { background: var(--blue-soft);    color: var(--blue); }    /* Giặt xong */
  .status.delivered { background: var(--green-soft);   color: var(--green); }   /* Giao khách */
  .status.debt      { background: var(--red-soft);     color: var(--red); }     /* Khách nợ */
  .status.cash { background: var(--green-soft); color: var(--green); }          /* Tiền mặt */
  .status.bank { background: var(--blue-soft);  color: var(--blue); }           /* Chuyển khoản */

  /* Cách đặt tên lớp khác cho cùng bộ màu trên. Sửa màu phải sửa cả hai nơi cho khớp. */
  .status--new       { background: var(--orange-soft);  color: var(--orange); }
  .status--washing   { background: var(--primary-soft); color: var(--primary); }
  .status--done      { background: var(--blue-soft);    color: var(--blue); }
  .status--delivered { background: var(--green-soft);   color: var(--green); }
  .status--debt      { background: var(--red-soft);     color: var(--red); }

  /* Dòng thời gian và hẹn trả, dùng chung */
  .pickup {
    display: flex; align-items: center; gap: 6px; min-width: 0;
    font-size: var(--font-size-sm); font-weight: 600; color: var(--text-2);
  }
  .pickup.urgent { color: var(--red); font-weight: 600; }
  .pickup .mud-icon-root { flex: none; color: var(--text-3); width: 14px; height: 14px; font-size: 14px; }
  .pickup.urgent .mud-icon-root { color: var(--red); }
  .pickup span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* Thẻ đơn hàng trong các trang báo cáo */
  .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: var(--font-size-md); font-weight: 700; }
  .ordr-id { flex: 1; min-width: 0; }
  .ordr-cust { font-size: var(--font-size-base); font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* Số điện thoại để cỡ chữ lớn hơn các dòng phụ khác cho dễ đọc chính xác */
  .ordr-phone { font-size: var(--font-size-base); color: var(--text-3); margin-top: 3px; }
  .ordr-headtop .status { flex: none; }
  /* Số tiền căn đáy để thẳng hàng với dòng cuối của cột trái */
  .ordr-headbot { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-2); padding: var(--space-3) var(--pad-card) var(--pad-card); }
  /* Cột trái hàng đáy đơn: đã thanh toán trước và hạn thu */
  .ordr-leftcol { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
  .ordr-paid { display: inline-flex; align-items: center; gap: 5px; font-size: var(--font-size-sm); font-weight: var(--fw-medium); color: var(--text-2); white-space: nowrap; }
  .ordr-paid svg, .ordr-paid .mud-icon-root { flex: none; color: var(--green); }
  .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, .ordr-due .mud-icon-root { flex: none; color: var(--text-3); }
  /* Địa chỉ khách: một dòng cắt bớt để chiều cao thẻ luôn ổn định.
     Icon ghim để 16px cho cân với icon đồng hồ 14px ngay bên dưới. */
  .ordr-addr { 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-addr svg, .ordr-addr .mud-icon-root { flex: none; color: var(--text-3); width: 16px; height: 16px; font-size: 16px; }
  /* Dòng khuyến mãi: icon quà đỏ, cùng cỡ với icon hẹn lấy */
  .ordr-promo { 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-promo svg, .ordr-promo .mud-icon-root { flex: none; color: var(--red) !important; fill: var(--red) !important; width: 14px; height: 14px; font-size: 14px; }
  .ordr-amt-lg { flex: none; margin-left: auto; font-size: var(--font-size-lg); font-weight: 800; color: var(--text); }
  .ordr-amt-lg.zero { color: var(--text-3); }
  .ordr-detail { background: var(--surface); border-radius: var(--r-md); }
  /* Phần chi tiết đơn: mở ra thì ẩn phần tóm tắt, chỉ giữ tên khách và trạng thái */
  .ordr-item.collapsible .ordr-detail { display: none; margin: var(--space-3) var(--pad-card) 0; padding: 6px 12px; }
  /* Bù đệm đáy khi mở để nội dung không dính sát mép thẻ */
  .ordr-item.collapsible.open { padding-bottom: var(--pad-card); }
  .ordr-item.collapsible.open .ordr-detail { display: block; }
  .ordr-item.collapsible.open .ordr-headbot,
  .ordr-item.collapsible.open .incd-note-bottom { display: none; }
  /* Nội dung phần chi tiết: dòng tổng cộng nổi bật, dòng hẹn gấp tô đỏ, ghi chú */
  .ordr-detail .pd-row.hl { margin-top: 4px; padding-top: 6px; border-top: 1px dashed var(--border); }
  .ordr-detail .pd-row.hl b { color: var(--primary); font-size: var(--font-size-md); }
  .ordr-detail .pd-row.due-urgent b { color: var(--red); }
  /* Dong thanh toan: icon check xanh, can phai */
  .ordr-detail .pd-row b.pay-val { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
  .ordr-detail .pd-row b.pay-val .mud-icon-root { flex: none; width: 16px; height: 16px; font-size: 16px; color: var(--green); }
  .ordr-detail .pd-note { display: flex; align-items: flex-start; gap: 6px; margin-top: 6px; padding-top: 8px; border-top: 1px dashed var(--border); font-size: var(--font-size-base); line-height: var(--lh-normal); color: var(--text-2); }
  .ordr-detail .pd-note svg,
  .ordr-detail .pd-note .mud-icon-root { flex: none; margin-top: 2px; width: 15px; height: 15px; font-size: 15px; color: var(--mud-palette-warning); }
  .ordr-detail .pd-note.is-alert svg,
  .ordr-detail .pd-note.is-alert .mud-icon-root { color: var(--red); }
  .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: var(--font-size-base); font-weight: 700; color: var(--text); }
  .day-sub { font-size: var(--font-size-sm); color: var(--text-3); margin-top: 2px; }
  .day-amt { flex: none; font-size: var(--font-size-md); 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: var(--font-size-lg); font-weight: 800; color: var(--text); letter-spacing: -.01em; }
  .cust-amt.zero { color: var(--text-3); }
  .cust-cnt { font-size: var(--font-size-sm); 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: var(--font-size-base); color: var(--text-2); }
  .cust-foot .ca svg, .cust-foot .ca .mud-icon-root { flex: none; color: var(--text-3); }

  /* Nhóm gập mở theo ngày và theo khách hàng */
  .day-chev { flex: none; color: var(--text-3); transition: transform var(--dur-base) var(--ease-ios); }
  .day-card.open .day-chev { transform: rotate(90deg); }
  .day-card .ordr-detail { margin: 0 var(--pad-card); max-height: 0; opacity: 0; overflow: hidden; padding: 0 12px;
    transition: max-height var(--dur-slow) var(--ease-ios), opacity var(--dur-base) ease, margin-top var(--dur-slow) ease, padding var(--dur-slow) ease; }
  .day-card.open .ordr-detail { max-height: 100px; opacity: 1; margin: 0 var(--pad-card) var(--pad-card); padding: 2px 12px; }
  .day-card .ordr-detail .pr,
  .cust-card .ordr-detail .pr { display: flex; align-items: center; gap: 8px; font-size: var(--font-size-base); color: var(--text-2); padding: 6px 0; }
  .day-card .ordr-detail .pr .l,
  .cust-card .ordr-detail .pr .l { flex: 1; min-width: 0; }
  .day-card .ordr-detail .pr .c,
  .cust-card .ordr-detail .pr .c { flex: none; width: 56px; color: var(--text-3); font-size: var(--font-size-sm); text-align: center; }
  .day-card .ordr-detail .pr b,
  .cust-card .ordr-detail .pr b { flex: none; width: 80px; color: var(--text); font-weight: 700; text-align: right; }
  .cust-card .ordr-detail { margin-top: 0; max-height: 0; opacity: 0; overflow: hidden; padding: 0 12px; border-radius: var(--r-md); background: var(--surface);
    transition: max-height var(--dur-slow) var(--ease-ios), opacity var(--dur-base) ease, margin-top var(--dur-slow) ease, padding var(--dur-slow) ease; }
  .cust-card.open .ordr-detail { max-height: 100px; opacity: 1; margin-top: 9px; padding: 2px 12px; }

  /* Các trang đăng nhập và quên mật khẩu: nội dung nằm trực tiếp trên nền gradient, logo lớn */

  /* Bỏ đệm của khung bao ngoài để trang đăng nhập không sinh thanh cuộn thừa */
  .container-fluid:has(.auth-m) {
    padding: 0 !important;
    min-height: 0 !important;
  }

  .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; }
  /* Màn thông báo: canh giữa ngang nhưng neo lên trên vì nội dung ngắn */
  .auth-m.auth-top { align-items: center; justify-content: flex-start; text-align: center; gap: 14px; }

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

  /* Logo nằm ngang cùng một dòng, dòng giới thiệu xuống dưới */
  .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; }

  /* Ô nhập trang đăng nhập: nền kính mờ thấy được gradient phía sau, viền mềm bo tròn đều,
     bóng nhẹ, bỏ gạch chân mặc định */
  .auth-fields .mud-input-filled {
    background: linear-gradient(180deg, rgba(255,255,255,.32), rgba(255,255,255,.10)) !important;
    border: 1.5px solid rgba(255,255,255,.55);
    border-radius: var(--r-md) !important;
    box-shadow: var(--shadow-card);
    transition: border-color .15s ease, box-shadow .15s ease;
  }
  .auth-fields .mud-input-underline::before,
  .auth-fields .mud-input-underline::after {
    display: none;
  }
  .auth-fields .mud-input-control:focus-within .mud-input-filled {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(89,74,226,.16), var(--shadow-card);
  }

  .auth-submit.mud-button-root {
    border-radius: var(--r-pill) !important;
    height: 52px;
    font-size: var(--font-size-md);
    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: var(--font-size-sm);
    color: var(--text-2);
    line-height: 1.5;
    text-align: center;
    background: var(--surface);
    border-radius: var(--r-md);
    padding: 14px 16px;
  }
}