/* =====================================================================
   Bills Manager — Modern Indigo SaaS theme
   Sidebar app layout + refined components, layered on Bootstrap 5.
   ===================================================================== */

:root {
    --mm-primary:        #6366f1;   /* indigo-500 */
    --mm-primary-dark:   #4f46e5;   /* indigo-600 */
    --mm-primary-darker: #4338ca;
    --mm-primary-soft:   #eef2ff;   /* indigo-50 */
    --mm-accent:         #8b5cf6;   /* violet */
    --mm-success:        #10b981;
    --mm-success-soft:   #d1fae5;
    --mm-danger:         #ef4444;
    --mm-danger-soft:    #fee2e2;
    /* Màu "tiền": dương (đã thu) / âm (còn phải thu). Mọi theme đặt riêng cặp
       này -> số xanh/đỏ luôn rõ & nhất quán cùng cơ chế. .text-success/.text-danger
       dùng 2 token này (xem rule bên dưới). */
    --mm-pos:            var(--mm-success);
    --mm-neg:            var(--mm-danger);
    --mm-warning:        #f59e0b;
    --mm-warning-soft:   #fef3c7;
    --mm-info:           #0ea5e9;
    --mm-info-soft:      #e0f2fe;

    --mm-bg:        #f6f7fb;
    --mm-surface:   #ffffff;
    --mm-soft:      #f8fafc;
    --mm-ink:       #1e293b;        /* slate-800 */
    --mm-muted:     #64748b;        /* slate-500 */
    --mm-muted-2:   #475569;        /* slate-600 */
    --mm-border:    #e7e9f2;

    /* ---- Typography tokens (DÙNG CHUNG cho mọi theme) ----------------
       Font chữ, cỡ chữ, độ đậm khai báo Ở ĐÂY và chỉ ở đây. Theme chỉ được
       đổi MÀU, tuyệt đối không override mấy token này -> chữ/cỡ luôn đồng
       nhất khi switch giao diện. Xem Tests\Unit\ThemeTokenConsistencyTest. */
    --mm-font-family: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --mm-fs-xs:   .75rem;    /* 12px */
    --mm-fs-sm:   .875rem;   /* 14px */
    --mm-fs-base: 1rem;      /* 16px */
    --mm-fs-lg:   1.125rem;  /* 18px */
    --mm-fs-xl:   1.25rem;   /* 20px */
    --mm-fw-normal:   400;
    --mm-fw-medium:   500;
    --mm-fw-semibold: 600;
    --mm-fw-bold:     700;

    --mm-sidebar-w: 264px;
    --mm-topbar-h:  64px;

    --mm-radius-lg: 16px;
    --mm-radius-md: 12px;
    --mm-radius-sm: 9px;
    --mm-shadow-card:  0 1px 2px rgba(16, 24, 40, .04), 0 4px 16px rgba(16, 24, 40, .05);
    --mm-shadow-hover: 0 8px 28px rgba(79, 70, 229, .15);

    --bs-body-bg: var(--mm-bg);
    --bs-body-color: var(--mm-ink);
    --bs-link-color: var(--mm-primary-dark);
    --bs-link-hover-color: var(--mm-primary-darker);
    --bs-border-color: var(--mm-border);
    --bs-offcanvas-width: var(--mm-sidebar-w);
}

body {
    background-color: var(--mm-bg);
    color: var(--mm-ink);
    font-family: var(--mm-font-family);
    font-size: var(--mm-fs-base);
    -webkit-font-smoothing: antialiased;
}

/* Subtle fixed background watermark behind the whole app (mobile-safe:
   uses a fixed pseudo-element instead of background-attachment:fixed). */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(rgba(246, 247, 251, .62), rgba(246, 247, 251, .72)),
        url('/images/background.png') center center / cover no-repeat;
}

/* Mobile: use the portrait background image (watermark behind the app) */
@media (max-width: 767.98px) {
    body::before {
        background-image:
            linear-gradient(rgba(246, 247, 251, .62), rgba(246, 247, 251, .72)),
            url('/images/background_mb.png');
    }

}

h1,
h2,
h3,
h4,
h5,
h6 { color: var(--mm-ink); font-weight: 700; letter-spacing: -.01em; }

/* =====================================================================
   App shell: sidebar + main
   ===================================================================== */
.mm-app { display: flex; min-height: 100vh; }

.mm-sidebar {
    width: var(--mm-sidebar-w);
    flex-shrink: 0;
    background: linear-gradient(185deg, rgba(49, 46, 129, .68) 0%, rgba(30, 27, 75, .74) 100%);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    color: rgba(255, 255, 255, .85);
    border-right: 1px solid rgba(255, 255, 255, .1);
    display: flex;
    flex-direction: column;
}

@media (min-width: 992px) {
    .mm-sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; }

}

.mm-sidebar__brand {
    display: flex; align-items: center; gap: .6rem;
    padding: 18px 20px;
    color: #fff; font-weight: 800; font-size: 1.08rem; letter-spacing: .2px;
    white-space: nowrap;          /* tên thương hiệu luôn nằm trên 1 dòng */
}
.mm-sidebar__brand > a { min-width: 0; flex: 0 1 auto; }
.mm-sidebar__brand > a > span:last-child { white-space: nowrap; }
.mm-sidebar__brand .mm-logo { width: 34px; height: 34px; }   /* nhỏ hơn để tên đủ chỗ 1 dòng */

.mm-logo {
    width: 40px; height: 40px;
    display: grid; place-items: center;
    flex-shrink: 0;
}

.mm-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }

.mm-sidebar__nav { padding: 8px 12px 20px; display: flex; flex-direction: column; gap: 3px; }

.mm-nav-label {
    font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: rgba(255, 255, 255, .38);
    padding: 16px 12px 6px;
}

.mm-nav-link {
    display: flex; align-items: center; gap: .7rem;
    padding: .58rem .8rem;
    border-radius: 11px;
    color: rgba(255, 255, 255, .72);
    font-weight: 500; font-size: .94rem;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
    white-space: nowrap;
}

.mm-nav-link i { font-size: 1.1rem; width: 22px; text-align: center; opacity: .85; }

.mm-nav-link:hover { background: rgba(255, 255, 255, .08); color: #fff; }

.mm-nav-link.active {
    background: linear-gradient(135deg, rgba(129,140,248,.95), rgba(139,92,246,.95));
    color: #fff; font-weight: 600;
    box-shadow: 0 6px 16px rgba(99, 102, 241, .35);
}

.mm-nav-link.active i { opacity: 1; }

.mm-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.mm-topbar {
    height: var(--mm-topbar-h);
    background: rgba(255, 255, 255, .85);
    backdrop-filter: saturate(180%) blur(8px);
    /* border-bottom: 1px solid var(--mm-border); */
    display: flex; align-items: center; gap: .6rem;
    padding: 0 20px;
    position: sticky; top: 0; z-index: 1020;
}

.mm-burger {
    border: 1px solid var(--mm-border); background: #fff;
    width: 40px; height: 40px; border-radius: 10px;
    display: grid; place-items: center; font-size: 1.2rem; color: var(--mm-ink);
    cursor: pointer;
}

/* Nút MỞ LẠI sidebar ở topbar — chỉ hiện trên desktop KHI sidebar đang thu gọn. */
.mm-sidebar-toggle { display: none; }
@media (min-width: 992px) {
    html.mm-sidebar-collapsed .mm-sidebar-toggle { display: grid; }
    /* Khi thu gọn: ẩn sidebar, phần nội dung (.mm-main flex:1) tự giãn full. */
    html.mm-sidebar-collapsed .mm-sidebar { display: none; }
}

/* Nút thu gọn (mũi tên) nằm trong header sidebar. */
.mm-sidebar-collapse-btn {
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .25);
    color: #fff; width: 32px; height: 32px; border-radius: 8px;
    place-items: center; cursor: pointer; padding: 0; font-size: 1rem;
}
.mm-sidebar-collapse-btn:hover { background: rgba(255, 255, 255, .26); }

.mm-topbar__brand { font-weight: 800; color: var(--mm-ink); font-size: 1.05rem; }

.mm-page { padding: 24px; width: 100%; max-width: 1320px; margin: 0 auto; }

@media (max-width: 575.98px) {
    .mm-page { padding: 16px; }

    .mm-stat { padding: 14px; gap: 10px; }

    .mm-stat__icon { width: 42px; height: 42px; font-size: 19px; }

    .mm-stat__value { font-size: 1.2rem; }

}

/* User dropdown in topbar */
.mm-userbox {
    display: inline-flex; align-items: center; gap: .55rem;
    border-radius: 999px; padding: .25rem .8rem .25rem .3rem;
    background: var(--mm-soft); border: 1px solid var(--mm-border);
    color: var(--mm-ink); text-decoration: none;
}

.mm-userbox:hover { background: var(--mm-primary-soft); color: var(--mm-ink); }

.mm-avatar {
    width: 32px; height: 32px; border-radius: 50%;
    display: grid; place-items: center;
    background: linear-gradient(135deg, var(--mm-primary), var(--mm-accent));
    color: #fff; font-weight: 800; font-size: .85rem; flex: 0 0 auto;
}

/* VIP: viền vàng quanh vòng tròn chữ cái đầu. Dùng box-shadow chứ KHÔNG dùng
   border — border sẽ ăn vào 32px cố định làm méo vòng tròn và lệch hàng. */
.mm-avatar.is-vip {
    box-shadow: 0 0 0 2px rgba(245, 184, 37, .95), 0 0 0 3px rgba(217, 143, 22, .55), 0 0 8px rgba(245, 184, 37, .5);
}

.mm-userbox__name { font-weight: 600; font-size: .92rem; }

.dropdown-menu { border: 1px solid var(--mm-border); border-radius: 14px; box-shadow: var(--mm-shadow-hover); padding: .35rem; }

.dropdown-item { border-radius: 9px; font-weight: 500; }

.dropdown-item.active,
.dropdown-item:active { background: var(--mm-primary); }

.mm-theme-opt { display: flex; align-items: center; }

.mm-theme-opt .mm-theme-check { margin-left: auto; opacity: 0; transition: opacity .12s ease; }

.mm-theme-opt.is-active .mm-theme-check { opacity: 1; color: var(--mm-primary-dark); }

/* Guest layout (login/register) — image used as a full hero background */
.mm-guest {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background:
        linear-gradient(135deg, rgba(49, 46, 129, .55), rgba(124, 58, 237, .42)),
        url('/images/background.png') center center / cover no-repeat;
}

.mm-guest__bar { height: 64px; display: flex; align-items: center; padding: 0 24px; background: transparent; }

.mm-guest__bar .mm-topbar__brand { color: #fff; font-weight: 700; text-shadow: 0 1px 6px rgba(0, 0, 0, .35); }

/* padding-bottom lớn -> card căn giữa bị đẩy LÊN một chút, để lộ ảnh nền (3 người) ở đáy. */
.mm-guest__body { flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px 24px 140px; }

/* Thẻ login: tối trong mờ + blur rất nhẹ (giống theme 18+) để nhìn xuyên thấy ảnh nền. */
.mm-guest .card {
    background: rgba(22, 16, 45, .28) !important;
    backdrop-filter: blur(3px) saturate(130%);
    -webkit-backdrop-filter: blur(3px) saturate(130%);
    border: 1px solid rgba(255, 255, 255, .25) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 18px 50px rgba(0, 0, 0, .4) !important;
    color: rgba(255, 255, 255, .92) !important; /* chữ thường trong thẻ sáng cho dễ đọc */
}

/* Nền thẻ đã trong suốt -> chữ sáng lên cho dễ đọc (input giữ nền trắng nên không đổi). */
.mm-guest .card h1,
.mm-guest .card h2,
.mm-guest .card h3,
.mm-guest .card h4,
.mm-guest .card h5,
.mm-guest .card .form-label,
.mm-guest .card label { color: #fff !important; }

.mm-guest .card .text-muted,
.mm-guest .card p { color: rgba(255, 255, 255, .85) !important; }

.mm-guest .card a { color: #fde68a !important; font-weight: 700; text-decoration: underline; }

.mm-guest .card a:hover { color: #fff !important; }

/* Mobile: portrait hero image for guest pages (placed AFTER .mm-guest so it wins) */
@media (max-width: 767.98px) {
    .mm-guest {
        background-image:
            linear-gradient(135deg, rgba(49, 46, 129, .55), rgba(124, 58, 237, .42)),
            url('/images/background_mb.png');
    }

}

/* =====================================================================
   Cards
   ===================================================================== */
.card {
    border: 1px solid rgba(255, 255, 255, .55) !important;
    border-radius: var(--mm-radius-lg) !important;
    box-shadow: var(--mm-shadow-card) !important;
    /* Nền gần đục: bỏ backdrop-filter (blur kính) ở theme mặc định vì nó khiến
       Chrome desktop vẽ lại nền mờ liên tục -> giật khi có biểu đồ. Theme
       "Thẻ trong suốt"/18+ vẫn bật blur riêng ở khối bên dưới. */
    background: rgba(255, 255, 255, .82) !important;
}

.card-header {
    background: transparent;
    border-bottom: 1px solid var(--mm-border);
    border-top-left-radius: var(--mm-radius-lg) !important;
    border-top-right-radius: var(--mm-radius-lg) !important;
    font-weight: 700;
}

/* =====================================================================
   Stat cards
   ===================================================================== */
.mm-stat-link { display: block; height: 100%; text-decoration: none; color: inherit; }

.mm-stat {
    display: flex; align-items: center; gap: 14px; height: 100%;
    background: rgba(255, 255, 255, .82);
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: var(--mm-radius-lg);
    padding: 18px;
    box-shadow: var(--mm-shadow-card);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.mm-stat-link:hover .mm-stat,
.mm-stat:hover {
    transform: translateY(-3px);
    box-shadow: var(--mm-shadow-hover);
    border-color: #d7d9ec;
}

.mm-stat__icon {
    flex: 0 0 auto; width: 48px; height: 48px; border-radius: 13px;
    display: grid; place-items: center; font-size: 22px;
    background: var(--mm-primary-soft); color: var(--mm-primary-dark);
}

.mm-stat__body { min-width: 0; }

.mm-stat__label { margin: 0 0 3px; font-size: .82rem; font-weight: 500; color: var(--mm-muted); }

.mm-stat__value { margin: 0; font-size: 1.5rem; font-weight: 800; line-height: 1.1; color: var(--mm-ink); word-break: break-word; }

.mm-stat--indigo .mm-stat__icon { background: var(--mm-primary-soft); color: var(--mm-primary-dark); }

.mm-stat--violet .mm-stat__icon { background: #f3e8ff; color: #7c3aed; }

.mm-stat--amber  .mm-stat__icon { background: var(--mm-warning-soft); color: #b45309; }

.mm-stat--green  .mm-stat__icon { background: var(--mm-success-soft); color: var(--mm-pos); }

.mm-stat--green  .mm-stat__value { color: var(--mm-pos); }

.mm-stat--red    .mm-stat__icon { background: var(--mm-danger-soft); color: var(--mm-neg); }

.mm-stat--red    .mm-stat__value { color: var(--mm-neg); }

.mm-stat--sky    .mm-stat__icon { background: var(--mm-info-soft); color: #0369a1; }

.mm-stat--slate  .mm-stat__icon { background: #f1f5f9; color: var(--mm-muted-2); }

/* Thẻ "Tổng nợ còn lại" khi vẫn còn nợ: viền đỏ phát sáng pulse + icon rung +
   dòng nhắc vui. Mục đích: nhắc nhở "ngầu ngầu" mỗi khi vào trang. */
/* Banner cảnh báo nắng nóng Hà Nội (đầu dashboard, chỉ hiện khi > ngưỡng). */
.mm-weather-alert {
    border: none;
    /* Nền gradient cam→đỏ đậm + chữ trắng: nổi bật trên nền tối, dễ đọc hơn
       hẳn so với chữ cam trên nền sáng. */
    background: linear-gradient(90deg, var(--mm-warning), var(--mm-danger));
    color: #fff;
    border-radius: 12px;
    padding: 12px 16px;
    box-shadow: 0 6px 18px rgba(239, 68, 68, .28);
}

.mm-weather-alert__temp {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: var(--mm-fw-bold, 700);
    font-size: var(--mm-fs-lg, 1.2rem);
    color: #fff;
    white-space: nowrap;
}

.mm-weather-alert__temp i {
    font-size: 1.6rem;
    animation: mm-owe-shake 1.4s ease-in-out .3s infinite;
    transform-origin: 50% 60%;
    will-change: transform;
}

.mm-weather-alert strong { color: #fff; }

.mm-weather-alert p {
    margin: 2px 0 0;
    font-size: .82rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .95);
    line-height: 1.2;
    /* Khoá đúng 2 dòng: câu random dài/ngắn khác nhau cũng không làm banner
       cao lên/nhảy. Quá 2 dòng thì cắt bớt (…) thay vì đẩy div rộng ra. */
    height: 2.4em;             /* 2 dòng × line-height 1.2 */
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Banner "Sổ nợ trà đá" — nổi bật như banner thời tiết, gradient đỏ→tím */
.mm-debt-banner {
    background: linear-gradient(90deg, var(--mm-danger), #7c3aed);
    color: #fff;
    border-radius: 12px;
    padding: 12px 16px;
    box-shadow: 0 6px 18px rgba(124, 58, 237, .3);
}

.mm-debt-banner__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    font-size: 1.5rem;
    transform-origin: 50% 60%;
    animation: mm-owe-shake 1.4s ease-in-out .3s infinite;
    will-change: transform;
}

.mm-debt-banner strong { color: #fff; font-size: 1.02rem; }

.mm-debt-banner p {
    margin: 2px 0 0;
    font-size: .85rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .97);
    line-height: 1.25;
    height: 3.75em;            /* 3 dòng × line-height 1.25 */
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

/* Khối "Sổ nợ trà đá": banner gradient làm header + bảng top nợ bên dưới,
   bấm cả khối để sang trang công nợ. */
.mm-debt-card {
    color: var(--mm-ink);
    transition: transform .12s ease, box-shadow .12s ease;
}

.mm-debt-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(124, 58, 237, .25);
}

.mm-debt-card .mm-debt-banner {
    border-radius: 0;
    box-shadow: none;
}

.mm-debt-card__chevron {
    color: #fff;
    font-size: 1.3rem;
    opacity: .85;
    flex: 0 0 auto;
}

.mm-stat--owe {
    border-color: rgba(239, 68, 68, .55);
    animation: mm-owe-glow 0.8s ease-in-out infinite;
}

.mm-stat--owe .mm-stat__icon {
    transform-origin: 50% 60%;
    animation: mm-owe-shake 1.4s ease-in-out .3s infinite;
    /* Đẩy icon sang layer GPU riêng: transform animation được composite, không
       bắt thẻ cha (có backdrop-filter blur) repaint -> rung mà không lag Chrome. */
    will-change: transform;
    backface-visibility: hidden;
}

.mm-stat__nudge {
    margin: 4px 0 0;
    font-size: .74rem;
    font-weight: 600;
    color: var(--mm-neg);
    line-height: 1.15;
    /* Chừa sẵn chỗ đúng 2 dòng để chiều cao thẻ không nhảy khi câu nhắc
       (xoay vòng mỗi 5s) dài/ngắn khác nhau — phần dưới không bị đẩy xuống. */
    min-height: 2.3em;        /* 2 dòng × line-height 1.15 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@keyframes mm-owe-glow {
    0%,
100% { box-shadow: var(--mm-shadow-card); }

    50% { box-shadow: 0 0 0 3px rgba(239, 68, 68, .22), 0 8px 22px rgba(239, 68, 68, .35); }

}

/* Rung rõ: nghỉ ~0.5s rồi rung mạnh ~0.9s, lặp liên tục mỗi 1.4s. */
@keyframes mm-owe-shake {
    0%,
35%,
100% { transform: rotate(0); }

    45% { transform: rotate(-14deg); }

    55% { transform: rotate(13deg); }

    65% { transform: rotate(-11deg); }

    75% { transform: rotate(9deg); }

    85% { transform: rotate(-5deg); }

    95% { transform: rotate(3deg); }

}

/* =====================================================================
   Charts
   ===================================================================== */
.mm-chart-card { background: rgba(255, 255, 255, .82); border: 1px solid rgba(255, 255, 255, .55); border-radius: var(--mm-radius-lg); box-shadow: var(--mm-shadow-card); padding: 20px; height: 100%; }

.mm-chart-card h5 { font-size: 1rem; margin-bottom: 14px; }

.mm-chart-wrap { position: relative; height: 240px; }

/* =====================================================================
   Progress
   ===================================================================== */
.mm-progress { height: 14px; border-radius: 999px; background: #ebedf6; overflow: hidden; }

.mm-progress__bar { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #6366f1, #8b5cf6); transition: width .6s ease; min-width: 2px; }

.mm-progress__bar--low { background: linear-gradient(90deg, #f59e0b, #ef4444); }

.mm-progress__bar--done { background: linear-gradient(90deg, #34d399, #10b981); }

/* Bootstrap .progress used inside .mm-progress: keep our rounded slim look */
.mm-progress.progress { height: 12px; }

.mm-progress.progress .progress-bar { border-radius: 999px; }

.mm-progress--mini.progress { height: 5px; }

/* =====================================================================
   Buttons
   ===================================================================== */
.btn { border-radius: 10px; font-weight: 600; }

.btn-sm { border-radius: 8px; }

.btn-primary { background-color: var(--mm-primary-dark) !important; border-color: var(--mm-primary-dark) !important; color: #fff !important; }

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active { background-color: var(--mm-primary-darker) !important; border-color: var(--mm-primary-darker) !important; box-shadow: 0 0 0 .2rem rgba(99, 102, 241, .25) !important; }

.btn-success { background-color: var(--mm-success) !important; border-color: var(--mm-success) !important; }

.btn-success:hover { background-color: #059669 !important; border-color: #059669 !important; }

.btn-danger { background-color: var(--mm-danger) !important; border-color: var(--mm-danger) !important; }

.btn-danger:hover { background-color: #dc2626 !important; border-color: #dc2626 !important; }

.btn-warning { background-color: var(--mm-warning) !important; border-color: var(--mm-warning) !important; color: #3a2a10 !important; }

.btn-warning:hover { background-color: #d97706 !important; border-color: #d97706 !important; }

.btn-info { background-color: var(--mm-info) !important; border-color: var(--mm-info) !important; color: #fff !important; }

.btn-info:hover { background-color: #0284c7 !important; border-color: #0284c7 !important; }

.btn-secondary { background-color: #64748b !important; border-color: #64748b !important; }

.btn-secondary:hover { background-color: #475569 !important; border-color: #475569 !important; }

.btn-outline-primary { color: var(--mm-primary-dark) !important; border-color: var(--mm-primary) !important; }

.btn-outline-primary:hover { background-color: var(--mm-primary-dark) !important; border-color: var(--mm-primary-dark) !important; color: #fff !important; }

.btn-outline-secondary { color: var(--mm-muted-2) !important; border-color: #cbd5e1 !important; }

.btn-outline-secondary:hover { background-color: #64748b !important; border-color: #64748b !important; color: #fff !important; }

.btn-outline-success { color: #059669 !important; border-color: var(--mm-success) !important; }

.btn-outline-success:hover { background-color: var(--mm-success) !important; color: #fff !important; }

.btn-outline-danger { color: var(--mm-danger) !important; border-color: var(--mm-danger) !important; }

.btn-outline-danger:hover { background-color: var(--mm-danger) !important; color: #fff !important; }

.btn-outline-warning { color: #b45309 !important; border-color: var(--mm-warning) !important; }

.btn-outline-warning:hover { background-color: var(--mm-warning) !important; color: #3a2a10 !important; }

/* =====================================================================
   Background utilities (card headers / fills)
   ===================================================================== */
.bg-primary { background-color: var(--mm-primary-dark) !important; }

.bg-success { background-color: var(--mm-success) !important; }

.bg-danger { background-color: var(--mm-danger) !important; }

.bg-warning { background-color: var(--mm-warning) !important; }

.bg-secondary { background-color: #64748b !important; }

.bg-info { background-color: var(--mm-info) !important; }

.bg-dark { background-color: #1e293b !important; }

/* =====================================================================
   Badges
   ===================================================================== */
.badge { border-radius: 999px; font-weight: 600; padding: .4em .7em; }

.badge.bg-primary { background-color: var(--mm-primary-soft) !important; color: var(--mm-primary-darker) !important; }

.badge.bg-success { background-color: var(--mm-success-soft) !important; color: var(--mm-pos) !important; }

.badge.bg-danger { background-color: var(--mm-danger-soft) !important; color: var(--mm-neg) !important; }

.badge.bg-warning { background-color: var(--mm-warning-soft) !important; color: #b45309 !important; }

.badge.bg-secondary { background-color: #f1f5f9 !important; color: var(--mm-muted-2) !important; }

.badge.bg-info { background-color: var(--mm-info-soft) !important; color: #0369a1 !important; }

.badge.bg-dark { background-color: #e2e8f0 !important; color: #334155 !important; }

/* =====================================================================
   Tables
   ===================================================================== */
.table { --bs-table-hover-bg: #f5f6fd; --bs-table-bg: transparent; margin-bottom: 0; }

.table > thead th,
.table > thead.table-light th {
    background: var(--mm-soft) !important;
    color: var(--mm-muted) !important;
    text-transform: uppercase; font-size: .73rem; letter-spacing: .04em; font-weight: 700;
    border-bottom: 1px solid var(--mm-border); white-space: nowrap;
}

.table > tbody > tr { border-color: #eef0f6; }

.table tfoot td { border-top: 1px solid var(--mm-border); background: var(--mm-soft); }

/* Action button group inside tables */
.mm-actions { display: flex; flex-wrap: wrap; gap: .35rem; }

.mm-actions form { display: inline; margin: 0; }

/* ---- Responsive: turn data tables into stacked cards on mobile ---- */
@media (max-width: 767.98px) {
    table.mm-table,
table.mm-table tbody,
table.mm-table tr,
table.mm-table td { display: block; width: 100%; }

    table.mm-table thead { display: none; }

    table.mm-table > tbody > tr {
        border: 1px solid rgba(255, 255, 255, .45);
        border-radius: var(--mm-radius-md);
        background: transparent;
        padding: 6px 14px;
        margin-bottom: 12px;
    }

    table.mm-table > tbody > tr:last-child { margin-bottom: 0; }

    table.mm-table > tbody > td,
table.mm-table > tbody > tr > td {
        border: 0 !important;
        padding: 7px 0 !important;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        text-align: right !important;
        min-height: 0;
        border-bottom: 1px solid #f1f3f9 !important;
    }

    table.mm-table > tbody > tr > td:last-child { border-bottom: 0 !important; }

    table.mm-table > tbody > tr > td::before {
        content: attr(data-label);
        flex: 0 0 40%;
        text-align: left;
        font-size: .78rem;
        font-weight: 600;
        color: var(--mm-muted);
        text-transform: uppercase;
        letter-spacing: .02em;
    }

    /* Cells with no label (e.g. action cells) */
    table.mm-table > tbody > tr > td[data-label=""]::before { content: none; }

    /* Action cell: stack full-width buttons */
    table.mm-table td.mm-actions-cell {
        flex-direction: column;
        align-items: stretch;
        text-align: left !important;
        gap: 8px;
        padding-top: 12px !important;
    }

    table.mm-table td.mm-actions-cell .mm-actions { flex-direction: column; }

    table.mm-table td.mm-actions-cell form { display: block; }

    table.mm-table td.mm-actions-cell .btn { width: 100%; }

    /* Footer (Tổng cộng) on mobile: gắn nhãn cho từng số để không bị "số trơ" */
    table.mm-table tfoot,
table.mm-table tfoot tr { display: block; width: 100%; }

    table.mm-table tfoot tr { border-top: 2px solid var(--mm-border); margin-top: 6px; padding-top: 4px; }

    table.mm-table tfoot td {
        display: flex; justify-content: space-between; align-items: center; gap: 14px;
        width: 100%; text-align: right !important; padding: 6px 14px !important;
    }

    table.mm-table tfoot td::before {
        content: attr(data-label);
        font-weight: 600; color: var(--mm-muted); text-align: left; white-space: nowrap;
    }

    /* Ô tiêu đề "Tổng cộng" trải đủ chiều ngang, in đậm */
    table.mm-table tfoot td.mm-foot-title { justify-content: flex-start; font-weight: 800; color: var(--mm-ink); }

    table.mm-table tfoot td.mm-foot-title::before { content: none; }

    /* Bảng công nợ: thẻ người phải trả (đỏ) / được nhận (xanh) nổi bật trên mobile */
    table.mm-standings > tbody > tr.mm-standing-debt {
        border-color: var(--mm-danger);
        border-left: 4px solid var(--mm-danger);
        background: var(--mm-danger-soft);
    }

    table.mm-standings > tbody > tr.mm-standing-credit {
        border-left: 4px solid var(--mm-success);
        background: var(--mm-success-soft);
    }

    /* Thẻ công nợ gọn 2 dòng: tên + net (dòng 1), meta + Chi tiết (dòng 2) */
    table.mm-standings > tbody > tr {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "name net"
            "meta act";
        column-gap: 12px;
        row-gap: 4px;
        align-items: start;
        padding: 10px 14px;
    }

    table.mm-standings > tbody > tr > td {
        display: block;
        padding: 0 !important;
        border: 0 !important;
        border-bottom: 0 !important;
        text-align: left !important;
        min-height: 0;
    }

    table.mm-standings > tbody > tr > td::before { content: none !important; }

    table.mm-standings td.mm-cell-name { grid-area: name; font-weight: 700; font-size: .98rem; min-width: 0; overflow-wrap: anywhere; }

    table.mm-standings td.mm-cell-net { grid-area: net; text-align: right !important; white-space: nowrap; }

    table.mm-standings td.mm-cell-meta { grid-area: meta; font-size: .82rem; color: var(--mm-muted); }

    table.mm-standings td.mm-actions-cell {
        grid-area: act;
        flex-direction: row !important;
        align-items: center !important;
        text-align: right !important;
        padding-top: 0 !important;
    }

    table.mm-standings td.mm-actions-cell .btn {
        width: auto;
        padding: .25rem .6rem;
        font-size: .8rem;
    }

    /* Empty-state row should not look like a card */
    table.mm-table > tbody > tr.mm-row-plain { border: 0; box-shadow: none; background: transparent; padding: 0; }

    table.mm-table > tbody > tr.mm-row-plain > td { border-bottom: 0 !important; display: block; }

    table.mm-table > tbody > tr.mm-row-plain > td::before { content: none; }

    /* ---- Compact participant cards: name+amount on one line, badges below ---- */
    table.mm-participants > tbody > tr {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "name amount"
            "join pay"
            "act  act";
        column-gap: 12px;
        row-gap: 4px;
        align-items: center;
        padding: 10px 14px;
        margin-bottom: 10px;
        background: rgba(255, 255, 255, .35);
    }

    table.mm-participants > tbody > tr > td {
        display: block;
        padding: 0 !important;
        border: 0 !important;
        text-align: left !important;
        min-height: 0;
    }

    /* Labels are redundant in the compact grid */
    table.mm-participants > tbody > tr > td::before { content: none !important; }

    table.mm-participants td.mm-cell-name { grid-area: name; font-weight: 700; font-size: .98rem; }

    table.mm-participants td.mm-cell-amount { grid-area: amount; text-align: right !important; color: var(--mm-primary); }

    table.mm-participants td.mm-cell-join { grid-area: join; }

    table.mm-participants td.mm-cell-pay { grid-area: pay; text-align: right !important; }

    /* Action row spans full width; hidden entirely when there is nothing to do */
    table.mm-participants td.mm-actions-cell { grid-area: act; padding-top: 6px !important; }

    table.mm-participants td.mm-actions-empty { display: none !important; }

    /* Buttons share one row (2 or 3 side by side) instead of stacking */
    table.mm-participants td.mm-actions-cell .mm-actions {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 6px;
    }

    table.mm-participants td.mm-actions-cell .mm-actions > form,
table.mm-participants td.mm-actions-cell .mm-actions > .btn { flex: 1 1 0; min-width: 0; }

    table.mm-participants td.mm-actions-cell .mm-actions > form { display: flex; }

    table.mm-participants td.mm-actions-cell .mm-actions > form > .btn { width: 100%; }

    table.mm-participants td.mm-actions-cell .mm-actions .btn {
        white-space: normal;
        line-height: 1.15;
        font-size: .82rem;
        padding: .4rem .35rem;
    }

    /* ---- Compact invitation cards: title+amount on one line, meta + actions below ---- */
    table.mm-invites > tbody > tr {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "title  amount"
            "date   creator"
            "act    act";
        column-gap: 12px;
        row-gap: 2px;
        align-items: baseline;
        padding: 10px 14px;
        margin-bottom: 10px;
        background: rgba(255, 255, 255, .35);
    }

    table.mm-invites > tbody > tr > td {
        display: block;
        padding: 0 !important;
        border: 0 !important;
        text-align: left !important;
        min-height: 0;
    }

    table.mm-invites > tbody > tr > td::before { content: none !important; }

    table.mm-invites td.mm-cell-title { grid-area: title; font-weight: 700; font-size: 1rem; }

    table.mm-invites td.mm-cell-amount { grid-area: amount; text-align: right !important; color: var(--mm-primary); font-size: 1rem; }

    table.mm-invites td.mm-cell-date { grid-area: date; font-size: .8rem; color: var(--mm-muted); }

    table.mm-invites td.mm-cell-creator { grid-area: creator; text-align: right !important; font-size: .8rem; color: var(--mm-muted); }

    /* Buttons side by side instead of stacked full-width */
    table.mm-invites td.mm-actions-cell { grid-area: act; padding-top: 8px !important; }

    table.mm-invites td.mm-actions-cell .mm-actions { flex-direction: row; gap: 8px; }

    table.mm-invites td.mm-actions-cell form { flex: 1; }

    table.mm-invites td.mm-actions-cell .btn { width: 100%; }

    /* ---- Compact report cards: period header + 3 amounts in a row ---- */
    table.mm-report > tbody > tr {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-areas:
            "period period period"
            "total  paid   out";
        column-gap: 10px;
        row-gap: 8px;
        padding: 12px 14px;
        margin-bottom: 10px;
        background: rgba(255, 255, 255, .35);
    }

    table.mm-report > tbody > tr > td {
        display: block;
        padding: 0 !important;
        border: 0 !important;
        text-align: left !important;
        min-height: 0;
    }

    table.mm-report > tbody > tr > td::before {
        display: block;
        content: attr(data-label);
        font-size: .68rem;
        font-weight: 600;
        color: var(--mm-muted);
        text-transform: uppercase;
        letter-spacing: .02em;
        margin-bottom: 1px;
    }

    table.mm-report td.mm-cell-period { grid-area: period; }

    table.mm-report td.mm-cell-period::before { content: none; }

    table.mm-report td[data-label="Tổng"] { grid-area: total; }

    table.mm-report td[data-label="Đã trả"] { grid-area: paid; }

    table.mm-report td[data-label="Còn lại"] { grid-area: out; text-align: right !important; }

    /* Totals are already shown in the KPI cards above — drop the redundant footer */
    table.mm-report tfoot { display: none; }

}

.btn { white-space: nowrap; }

.mm-legend-dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; vertical-align: middle; }

.mm-legend-dot--paid { background: var(--mm-success); }

.mm-legend-dot--unpaid { background: var(--mm-danger); }
.mm-legend-dot--pending { background: var(--mm-warning); }
.mm-legend-dot--info { background: var(--mm-info); }

/* Chú thích "Đã trả / Chưa trả" kiêm nút lọc nhanh danh sách bill. */
.mm-legend { display: flex; flex-wrap: wrap; gap: 8px; }

.mm-legend-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 12px; border-radius: 999px;
    border: 1px solid var(--mm-border); background: transparent;
    font-size: .85rem; color: var(--mm-muted); cursor: pointer;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.mm-legend-btn:hover { border-color: var(--mm-primary); color: var(--mm-ink); }

/* Bỏ ring xanh khi bấm chuột; chỉ giữ viền focus khi dùng bàn phím (a11y). */
.mm-legend-btn:focus { outline: none; }

.mm-legend-btn:focus-visible { outline: 2px solid var(--mm-primary); outline-offset: 2px; }

.mm-legend-btn.is-active {
    border-color: var(--mm-primary);
    background: color-mix(in srgb, var(--mm-primary) 12%, transparent);
    color: var(--mm-ink); font-weight: 600;
}

/* Dropdown gợi ý tên người trả (autocomplete) trên ô tìm /my/created. */
.mm-suggest {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1050;
    margin-top: 4px;
    max-height: 260px;
    overflow-y: auto;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .14);
}
.mm-suggest__item { cursor: pointer; }

/* Thanh phân trang client-side cho danh sách bill. */
.mm-pager {
    display: flex; align-items: center; justify-content: center; gap: 14px;
    margin-top: 12px; padding-top: 12px;
    border-top: 1px solid var(--mm-border);
}

.mm-pager__btn {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 5px 14px; border-radius: var(--mm-radius-md);
    border: 1px solid var(--mm-border); background: transparent;
    color: var(--mm-ink); font-size: .88rem; cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

.mm-pager__btn:hover:not(:disabled) { border-color: var(--mm-primary); }

.mm-pager__btn:focus { outline: none; }

.mm-pager__btn:focus-visible { outline: 2px solid var(--mm-primary); outline-offset: 2px; }

.mm-pager__btn:disabled { opacity: .45; cursor: default; }

.mm-pager__info { font-size: .85rem; color: var(--mm-muted); min-width: 84px; text-align: center; }

/* "Tất cả bill của bạn" — clean clickable cards, colour-coded by status */
.mm-bill-list { display: flex; flex-direction: column; gap: 10px; }

.mm-bill {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid var(--mm-border);
    border-left-width: 5px;
    border-radius: var(--mm-radius-md);
    text-decoration: none;
    color: inherit;
    transition: box-shadow .15s ease, transform .15s ease;
}

.mm-bill:hover,
.mm-bill:focus,
.mm-bill:active,
.mm-bill:visited {
    color: inherit;
    text-decoration: none;
}

.mm-bill:hover { box-shadow: 0 6px 18px rgba(30, 41, 59, .08); transform: translateY(-1px); }

/* Thẻ tĩnh (không phải link): chứa nút thao tác, canh trên, không hiệu ứng nhấc. */
.mm-bill--static { align-items: flex-start; cursor: default; }
.mm-bill--static:hover { box-shadow: none; transform: none; }

/* Thẻ "Tổng cộng" trong báo cáo: nhấn mạnh nhẹ. */
.mm-bill--total { background: var(--mm-surface-2, #f8fafc); border-left-color: var(--mm-primary); }
.mm-bill--total .mm-bill__title { font-weight: 700; }

/* Báo cáo: mỗi chỉ số (Đã thu / Còn) nằm 1 dòng riêng, không xuống dòng giữa số
   -> mọi thẻ cao bằng nhau (tiêu đề + 2 dòng), không bị cái 2 dòng cái 3 dòng. */
.mm-bill__meta .mm-report-fig { display: block; white-space: nowrap; font-size: .9rem; }
/* Số xanh/đỏ trong thẻ mobile in đậm + dùng đúng token màu như desktop
   -> mobile & desktop không lệch (cùng cỡ tương đối, cùng màu, cùng độ đậm). */
.mm-bill__meta .mm-report-fig .text-success,
.mm-bill__meta .mm-report-fig .text-danger { font-weight: 700; }

.mm-bill.is-paid { border-left-color: var(--mm-success); }

.mm-bill.is-unpaid { border-left-color: var(--mm-danger); }

.mm-bill__main { flex: 1 1 auto; min-width: 0; }

.mm-bill__title {
    font-weight: 600; color: var(--mm-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.mm-bill__meta { font-size: .82rem; color: var(--mm-muted); margin-top: 2px; }

.mm-bill__right { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex: 0 0 auto; }

.mm-bill__amount { font-weight: 700; color: var(--mm-ink); white-space: nowrap; }

.mm-bill__right .badge { font-weight: 600; }

.mm-bill__chevron { color: var(--mm-muted); font-size: 1.1rem; flex: 0 0 auto; }

.mm-bill-total {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 6px; padding: 12px 14px;
    border-top: 1px solid var(--mm-border);
    color: var(--mm-ink);
}

@media (max-width: 575.98px) {
    .mm-bill { padding: 11px 12px; gap: 8px; }

}

/* Thẻ "Cần xử lý" (admin): gọn ngang như .mm-bill — nội dung bên trái, nút
   thao tác nhỏ bên phải (không thể bọc cả thẻ trong 1 link như .mm-bill). */
.mm-task-list { display: flex; flex-direction: column; gap: 10px; }

.mm-task {
    display: flex; align-items: center; gap: 12px;
    background: #fff;
    border: 1px solid var(--mm-border);
    border-left: 5px solid var(--mm-warning);
    border-radius: var(--mm-radius-md);
    padding: 12px 14px;
}

.mm-task__main { flex: 1 1 auto; min-width: 0; }

.mm-task__title {
    font-weight: 600; color: var(--mm-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.mm-task__meta {
    font-size: .82rem; color: var(--mm-muted); margin-top: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.mm-task__meta i { margin-right: 3px; }

.mm-task__amount { font-weight: 700; color: var(--mm-ink); }

.mm-task__actions { display: flex; flex-direction: column; gap: 6px; flex: 0 0 auto; }

.mm-task__actions form { margin: 0; }

.mm-task__actions .btn { width: 100%; white-space: nowrap; }

/* Biến thể card duyệt thanh toán (/payments mobile): xếp DỌC, nút nằm ngang cùng
   hàng số tiền để card thấp & gọn thay vì nút xếp chồng bên phải. */
.mm-task--pay { flex-direction: column; align-items: stretch; gap: 5px; }

.mm-task--pay .mm-task__row { display: flex; align-items: center; gap: 8px; }

.mm-task--pay .mm-task__title {
    flex: 1 1 auto; min-width: 0;
    color: var(--mm-primary); text-decoration: none;
}

.mm-task--pay .mm-task__row .badge { flex: 0 0 auto; }

.mm-task--pay .mm-task__foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; flex-wrap: wrap;
}

.mm-task--pay .mm-task__actions { flex-direction: row; gap: 6px; }

.mm-task--pay .mm-task__actions .btn { width: auto; }

.mm-task--pay .mm-task__foot > .text-truncate { min-width: 0; }

@media (max-width: 575.98px) {
    .mm-task { padding: 11px 12px; gap: 8px; }

    .mm-task--pay { gap: 5px; }
}

/* "Top chi tiêu" leaderboard — compact one-line rows: medal · name · amount */
.mm-rank-list { display: flex; flex-direction: column; }

.mm-rank {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 8px;
    border-bottom: 1px solid var(--mm-border);
}

.mm-rank:last-child { border-bottom: 0; }

.mm-rank.is-me { background: var(--mm-primary-soft); border-radius: var(--mm-radius-sm); border-bottom-color: transparent; }
/* Hàng của VIP: nền vàng loang nhẹ + vạch vàng bên trái, nổi cả dòng chứ không
   chỉ mỗi cái badge. Vàng hard-code (như .mm-vip) để đọc rõ trên cả 3 theme.
   Khi vừa là mình vừa là VIP thì nền "bạn" thắng — tránh 2 lớp nền chồng nhau,
   nhưng vạch vàng bên trái vẫn giữ để không mất dấu VIP. */
.mm-rank.is-vip {
    background: linear-gradient(90deg, rgba(245, 184, 37, .18), rgba(245, 184, 37, .04) 60%, transparent);
    border-radius: var(--mm-radius-sm); border-bottom-color: transparent;
    box-shadow: inset 3px 0 0 rgba(217, 143, 22, .85);
}
.mm-rank.is-vip.is-me { background: var(--mm-primary-soft); }

.mm-rank__pos { flex: 0 0 1.8rem; text-align: center; font-size: 1.05rem; font-weight: 700; color: var(--mm-muted); }

.mm-rank__name {
    flex: 1 1 auto; min-width: 0; font-weight: 600; color: var(--mm-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.mm-rank__amount { flex: 0 0 auto; font-weight: 700; color: var(--mm-ink); white-space: nowrap; }

/* Dòng tổng cộng dưới cùng bảng xếp hạng chi tiêu. Đồng bộ với tfoot bảng
   "Chi tiêu theo từng User": chữ đậm, màu mực (không nhuộm màu riêng). */
.mm-rank--total { border-top: 2px solid var(--mm-border); border-bottom: 0; margin-top: 2px; }
.mm-rank--total .mm-rank__name { font-weight: 800; color: var(--mm-ink); }
.mm-rank--total .mm-rank__amount { color: var(--mm-ink); font-weight: 800; }

/* Số tiền trong bảng báo cáo (.mm-table, cột canh phải) đậm cho dễ đọc &
   "to đẹp" như số ở danh sách bill / bảng xếp hạng phía trên.
   Khớp font-weight với .mm-rank__amount (700) của "Top chi tiêu". */
.mm-table td.text-end { font-weight: 700; }

/* Đồng nhất CỠ CHỮ nội dung 4 khối báo cáo: hàng "Top chi tiêu", ô bảng
   "Chi tiêu theo từng User"/"Chi tiêu theo tháng", và dòng "Tất cả bill".
   Tất cả về 1 cỡ var(--mm-fs-base) để nhìn không lệch nhau. */
.mm-rank__name, .mm-rank__amount,
.mm-bill__title, .mm-bill__amount,
.mm-table tbody td, .mm-table tfoot td { font-size: var(--mm-fs-base); }

/* Dòng "Tổng cộng" của bảng "Chi tiêu theo từng User" phải giống hệt dòng
   tổng của "Top chi tiêu" (.mm-rank--total): nền trong suốt, viền trên 2px,
   chữ màu mực đậm 800 — không để dải nền --mm-soft làm chữ bị tối/mờ. */
.mm-table tfoot td {
    font-weight: 800;
    background: transparent;
    border-top: 2px solid var(--mm-border);
    color: var(--mm-ink);
}

/* =====================================================================
   Forms
   ===================================================================== */
.form-control,
.form-select { border-radius: var(--mm-radius-sm); border-color: rgba(120, 110, 170, .35); background-color: rgba(255, 255, 255, .55); }

.form-control:focus,
.form-select:focus { border-color: #a5b4fc; background-color: rgba(255, 255, 255, .92); box-shadow: 0 0 0 .2rem rgba(99, 102, 241, .18); }

.form-control::placeholder { color: #8b86a8; }

.form-check-input:checked { background-color: var(--mm-primary); border-color: var(--mm-primary); }

.form-check-input:focus { border-color: #a5b4fc; box-shadow: 0 0 0 .2rem rgba(99, 102, 241, .18); }

.form-label { font-weight: 600; color: var(--mm-muted-2); }

/* Chữ gợi ý dưới ô nhập (vd "Ví dụ: Trà đá phòng IT"): dùng token muted theo
   theme để luôn đủ tương phản — mặc định Bootstrap để màu tối, chìm trên nền tối. */
.form-text { color: var(--mm-muted); }

/* =====================================================================
   Nav pills (filters/tabs)
   ===================================================================== */
.nav-pills .nav-link { color: var(--mm-primary-dark); border-radius: 999px; font-weight: 600; padding: .35rem .9rem; }

.nav-pills .nav-link:hover { background: var(--mm-primary-soft); }

.nav-pills .nav-link.active { background: var(--mm-primary-dark); color: #fff; }

/* =====================================================================
   Misc
   ===================================================================== */
.alert { border-radius: var(--mm-radius-md); border: 1px solid transparent; }

.modal-content { border-radius: var(--mm-radius-lg); border: 1px solid var(--mm-border); box-shadow: var(--mm-shadow-hover); }

.modal-header,
.modal-footer { border-color: var(--mm-border); }

.list-group-item { border-color: var(--mm-border); }

.page-link { color: var(--mm-primary-dark); border-radius: 8px; margin: 0 2px; border-color: var(--mm-border); }

.page-item.active .page-link { background: var(--mm-primary-dark); border-color: var(--mm-primary-dark); }

.mm-content a:not(.btn):not(.nav-link):not(.dropdown-item):not(.mm-stat-link):not(.page-link):not(.mm-nav-link) { color: var(--mm-primary-dark); text-decoration: none; font-weight: 500; }

.mm-content a:not(.btn):not(.nav-link):not(.dropdown-item):not(.mm-stat-link):not(.page-link):not(.mm-nav-link):hover { text-decoration: underline; }

/* Danh sách thu gọn: ẩn các dòng .mm-extra khi container đang .mm-collapsed
   (nút "Xem thêm" toggle class này — xem partials/collapse-script). */
.mm-collapsed .mm-extra { display: none !important; }

.mm-empty { text-align: center; color: var(--mm-muted); padding: 30px 12px; }

.mm-empty__emoji { font-size: 1.7rem; display: block; margin-bottom: 6px; }

/* <details> thu gọn: summary là 1 nút, ẩn mũi tên mặc định của trình duyệt. */
.mm-proof > summary { list-style: none; cursor: pointer; }

.mm-proof > summary::-webkit-details-marker { display: none; }

/* Danh sách label–value gọn cho "Thông tin bill" (đỡ tốn chiều cao trên mobile). */
.mm-info { display: grid; grid-template-columns: auto 1fr; gap: 7px 12px; align-items: start; }

.mm-info dt { font-weight: 700; color: var(--mm-ink); white-space: nowrap; }

.mm-info dt::after { content: ':'; }

.mm-info dd { margin: 0; color: var(--mm-ink); min-width: 0; word-break: break-word; }

.mm-info dd.mm-info__full { grid-column: 1 / -1; }

.mm-info dd.mm-info__title { font-size: 1.15rem; font-weight: 700; line-height: 1.25; }

/* Danh sách nạp AJAX: mờ nhẹ + chặn bấm trong lúc tải trang mới. */
.mm-list-loading { opacity: .5; pointer-events: none; transition: opacity .12s ease; }

/* Lớp loading che TOÀN màn hình khi nạp AJAX (phân trang/lọc). Spinner ăn theo
   var(--mm-primary) nên tự đổi màu theo từng theme. */
.mm-loading {
    position: fixed; inset: 0; z-index: 1090;
    display: none; place-items: center;
    background: rgba(15, 23, 42, .35);
    backdrop-filter: blur(2px) saturate(120%);
    -webkit-backdrop-filter: blur(2px) saturate(120%);
}
.mm-loading.is-open { display: grid; animation: mm-fade-in .12s ease; }
body.mm-loading-on { overflow: hidden; }
.mm-loading__spinner {
    width: 46px; height: 46px; border-radius: 50%;
    border: 4px solid rgba(255, 255, 255, .35);
    border-top-color: var(--mm-primary);
    box-shadow: 0 4px 18px rgba(0, 0, 0, .25);
    animation: mm-spin .7s linear infinite;
}
@keyframes mm-spin { to { transform: rotate(360deg); } }
@keyframes mm-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* Thẻ tóm tắt nhanh trên mobile (Tổng bill / Đã thu / Còn lại): số tiền co theo
   bề ngang, KHÔNG vỡ dòng (chữ "đ" không bị rớt xuống dòng dưới). */
.mm-sum__label { white-space: nowrap; }
.mm-sum__val {
    white-space: nowrap;
    font-size: clamp(.68rem, 3.2vw, .95rem);
    line-height: 1.2;
}

/* Phân trang tùy biến — nút vuông bo góc, có số trên cả mobile, hợp theme. */
/* LUÔN 1 dòng: không xuống dòng; nếu quá dài (rất hiếm) thì cuộn ngang gọn. */
.mm-pagination .pagination {
    display: flex; flex-wrap: nowrap; gap: 6px; margin: 0;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding-bottom: 2px;
}

.mm-pagination .pagination::-webkit-scrollbar { display: none; }

.mm-pagination .page-item { flex: 0 0 auto; }

.mm-pagination .page-link {
    margin: 0; /* bỏ margin âm nối viền của Bootstrap để dùng gap */
    min-width: 40px; height: 40px; padding: 0 10px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--mm-border); border-radius: 10px;
    background: #fff; color: var(--mm-ink); font-weight: 600;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.mm-pagination .page-link:hover { border-color: var(--mm-primary); color: var(--mm-primary); }

.mm-pagination .page-link:focus { outline: none; box-shadow: none; }

.mm-pagination .page-link:focus-visible { outline: 2px solid var(--mm-primary); outline-offset: 2px; }

.mm-pagination .page-item.active .page-link {
    background: var(--mm-primary); border-color: var(--mm-primary); color: #fff;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--mm-primary) 35%, transparent);
}

.mm-pagination .page-item.disabled .page-link { opacity: .4; background: #fff; color: var(--mm-muted); }

@media (max-width: 575.98px) {
    .mm-pagination .pagination { gap: 4px; }
    .mm-pagination .page-link { min-width: 34px; height: 34px; padding: 0 7px; font-size: .9rem; }

}

@media (max-width: 575.98px) {
    .mm-info { gap: 6px 10px; }

}

/* Tiêu đề 4 khối báo cáo (Top chi tiêu, Chi tiêu theo từng User, Chi tiêu
   theo tháng, Tất cả bill của bạn...). Cố định cỡ/đậm chữ để 4 khối LUÔN
   đồng nhất, không phụ thuộc cỡ <h4> mặc định của Bootstrap hay theme. */
.mm-section-title {
    display: flex; align-items: center; gap: .5rem; margin: 0;
    font-size: var(--mm-fs-xl); font-weight: 700; line-height: 1.3;
}

.mm-group-title {
    display: flex; align-items: center; gap: .45rem;
    font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    color: var(--mm-muted); margin: 0 0 .6rem;
    padding-bottom: .4rem; border-bottom: 1px solid rgba(99,102,241,.14);
}

.mm-group-title i { color: var(--mm-primary, #6366f1); }

/* Pretty file upload control */
.mm-upload {
    display: flex; align-items: center; gap: 12px; width: 100%;
    padding: 13px 16px; cursor: pointer; margin: 0;
    border: 1.5px dashed #c7cad6; border-radius: 12px;
    background: #f8f9ff; transition: border-color .15s ease, background .15s ease;
}

.mm-upload:hover { border-color: var(--mm-primary, #6366f1); background: #f1f2ff; }

.mm-upload.has-file { border-style: solid; border-color: var(--mm-success, #10b981); background: #f0fdf6; }

.mm-upload__icon { font-size: 1.7rem; line-height: 1; color: var(--mm-primary, #6366f1); flex: 0 0 auto; }

.mm-upload.has-file .mm-upload__icon { color: var(--mm-success, #10b981); }

.mm-upload__body { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }

.mm-upload__title { font-weight: 600; color: var(--mm-ink, #1e293b); }

.mm-upload__hint { font-size: .75rem; color: var(--mm-muted, #64748b); }

.mm-upload__name { margin-left: auto; font-size: .82rem; font-weight: 600; color: var(--mm-success, #10b981); text-align: right; word-break: break-all; max-width: 45%; }

.mm-page-head { margin-bottom: 22px; }

.mm-page-head .mm-sub { color: var(--mm-muted); margin: 4px 0 0; }

/* Nút "Quay lại" toàn cục (mọi trang trừ Dashboard) */
.mm-pageback { margin-bottom: 14px; }

.mm-back-btn { display: inline-flex; align-items: center; gap: .35rem; }

.mm-money-up { color: var(--mm-pos); font-weight: 700; }

.mm-money-due { color: var(--mm-neg); font-weight: 700; }

.text-primary { color: var(--mm-primary-dark) !important; }

/* Màu tiền xanh (đã thu) / đỏ (còn phải thu) — DÙNG TOKEN, mọi theme nhất quán.
   Đây là nguồn duy nhất; mỗi theme chỉ đổi --mm-pos / --mm-neg. */
.text-success { color: var(--mm-pos) !important; }

.text-danger { color: var(--mm-neg) !important; }

.text-warning { color: #b45309 !important; }

.text-info { color: #0369a1 !important; }

.text-muted { color: var(--mm-muted) !important; }

/* =====================================================================
   Hiệu ứng tải trang: nội dung trượt mờ lên lần lượt.
   - Tôn trọng prefers-reduced-motion (tắt hết ở cuối khối).
   ===================================================================== */
/* Nội dung trượt mờ lên lần lượt khi tải trang */
.mm-content > * { animation: mm-rise .32s ease both; }

.mm-content > *:nth-child(1) { animation-delay: .02s; }

.mm-content > *:nth-child(2) { animation-delay: .06s; }

.mm-content > *:nth-child(3) { animation-delay: .10s; }

.mm-content > *:nth-child(4) { animation-delay: .14s; }

.mm-content > *:nth-child(5) { animation-delay: .18s; }

.mm-content > *:nth-child(6) { animation-delay: .22s; }

.mm-content > *:nth-child(7) { animation-delay: .26s; }

.mm-content > *:nth-child(n+8) { animation-delay: .30s; }

@keyframes mm-rise {
    from { opacity: 0; transform: translateY(16px); }

    to { opacity: 1; transform: translateY(0); }

}

@media (prefers-reduced-motion: reduce) {
    .mm-content > * { animation: none !important; }

    /* CỐ Ý giữ rung + glow cho thẻ "Tổng nợ" kể cả khi bật Reduce Motion:
       đây là lời nhắc nợ vui, người dùng muốn luôn thấy. */
    .mm-stat--owe { border-color: rgba(239, 68, 68, .55); }

}

#recoveryChart {
    margin: 0 auto;
}

/* ===== Hộp xác nhận (mm-confirm) — thay confirm() mặc định, theo theme ===== */
.mm-confirm { position: fixed; inset: 0; z-index: 1080; display: none; }

.mm-confirm.is-open { display: grid; place-items: center; padding: 16px; }

body.mm-confirm-open { overflow: hidden; }

.mm-confirm__backdrop {
    position: absolute; inset: 0;
    background: rgba(15, 23, 42, .55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.mm-confirm__dialog {
    position: relative;
    width: 100%; max-width: 360px;
    background: var(--mm-surface);
    color: var(--mm-ink);
    border: 1px solid var(--mm-border);
    border-radius: var(--mm-radius-lg);
    box-shadow: 0 24px 60px rgba(15, 23, 42, .35);
    padding: 22px 20px 18px;
    text-align: center;
    animation: mmConfirmPop .16s ease-out;
}

@keyframes mmConfirmPop {
    from { opacity: 0; transform: translateY(8px) scale(.97); }

    to { opacity: 1; transform: translateY(0) scale(1); }

}

.mm-confirm__icon {
    width: 54px; height: 54px; margin: 0 auto 12px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--mm-primary-soft);
    color: var(--mm-primary-dark);
    font-size: 1.6rem;
}

.mm-confirm__title { font-size: 1.1rem; font-weight: 700; margin: 0 0 6px; color: var(--mm-ink); }

.mm-confirm__msg { font-size: .95rem; color: var(--mm-muted); margin: 0 0 18px; line-height: 1.45; }

.mm-confirm__actions { display: flex; gap: 10px; }

.mm-confirm__actions .btn { flex: 1 1 0; font-weight: 600; padding: 9px 12px; }

/* =====================================================================
   Toast thông báo (component <x-toast>) — màu lấy hoàn toàn từ design-token
   nên đổi theme vẫn đồng nhất; font/cỡ chữ dùng token chung.
   ===================================================================== */
.mm-toast-stack {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 1080;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: min(360px, calc(100vw - 32px));
}
.mm-toast {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: var(--mm-surface);
    color: var(--mm-ink);
    font-family: var(--mm-font-family);
    font-size: var(--mm-fs-sm);
    font-weight: var(--mm-fw-medium);
    border: 1px solid var(--mm-border);
    border-left: 4px solid var(--mm-muted);
    border-radius: var(--mm-radius-md);
    box-shadow: var(--mm-shadow-card);
    animation: mm-toast-in .25s ease;
}
.mm-toast.is-leaving { animation: mm-toast-out .25s ease forwards; }
.mm-toast__icon { font-size: 1.1rem; line-height: 1.4; }
.mm-toast__msg { flex: 1 1 auto; line-height: 1.4; }
.mm-toast__close {
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    color: var(--mm-muted);
    cursor: pointer;
    padding: 0;
    font-size: .8rem;
    line-height: 1.4;
}
.mm-toast__close:hover { color: var(--mm-ink); }
.mm-toast--success { border-left-color: var(--mm-success); }
.mm-toast--success .mm-toast__icon { color: var(--mm-success); }
.mm-toast--error { border-left-color: var(--mm-danger); }
.mm-toast--error .mm-toast__icon { color: var(--mm-danger); }
.mm-toast--info { border-left-color: var(--mm-info); }
.mm-toast--info .mm-toast__icon { color: var(--mm-info); }
@keyframes mm-toast-in  { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@keyframes mm-toast-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(16px); } }
@media (max-width: 575.98px) {
    .mm-toast-stack { top: auto; bottom: 16px; left: 16px; right: 16px; max-width: none; }
}

/* ===== Notification bell (navbar) ===== */
.mm-notif { position: relative; }
.mm-notif__toggle {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 50%;
    /* Topbar nền sáng → icon dùng màu mực, KHÔNG để trắng (sẽ tàng hình). */
    color: var(--mm-ink); text-decoration: none; font-size: 1.3rem;
    transition: background-color .15s ease;
}
.mm-notif__toggle:hover { background: rgba(0, 0, 0, .06); }
.mm-notif__badge {
    position: absolute; top: 2px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .7rem; font-weight: 700; line-height: 1; color: #fff;
    background: var(--mm-danger, #dc3545); border-radius: 999px;
}
/* data-bs-display="static" → menu định vị bằng CSS (không để popper kéo lệch). */
.mm-notif__menu { width: 340px; max-width: 92vw; padding: 0; overflow: hidden; right: 0; left: auto; }
/* Màn hẹp: trải đều 2 mép, không tràn ra ngoài viewport. */
@media (max-width: 575.98px) {
    .mm-notif { position: static; }
    .mm-notif__menu {
        position: absolute; left: 8px; right: 8px; width: auto; max-width: none;
    }
}
.mm-notif__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: .6rem .85rem; border-bottom: 1px solid var(--mm-border, #e5e7eb);
    font-weight: 600;
}
.mm-notif__readall {
    border: 0; background: none; padding: 0; cursor: pointer;
    color: var(--mm-primary, #2563eb); font-size: .8rem; font-weight: 500;
}
.mm-notif__close {
    border: 0; background: none; padding: 0; cursor: pointer; line-height: 1;
    color: var(--mm-muted); font-size: 1rem; display: inline-flex;
}
.mm-notif__close:hover { color: var(--mm-ink); }
.mm-notif__list { max-height: 60vh; overflow-y: auto; }
.mm-notif__item {
    display: flex; gap: .65rem; align-items: flex-start;
    padding: .65rem .85rem; text-decoration: none;
    /* Dùng token themed để đọc được trên cả 3 theme (sáng / glass / 18+). */
    color: var(--mm-ink); border-bottom: 1px solid var(--mm-border);
}
.mm-notif__item:hover { background: rgba(128, 128, 128, .14); color: var(--mm-ink); }
.mm-notif__item.is-unread { background: rgba(99, 102, 241, .14); }
.mm-notif__item i { font-size: 1.05rem; color: var(--mm-primary); margin-top: 2px; }
.mm-notif__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
/* Tiêu đề LOẠI thông báo — đồng nhất, nổi bật ở trên. */
.mm-notif__label {
    font-size: .7rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
    color: var(--mm-primary);
}
/* Nội dung chi tiết — phần quan trọng (tên bữa, số tiền, người gửi). */
.mm-notif__title { font-size: .86rem; font-weight: 600; color: var(--mm-ink); line-height: 1.35; }
/* Tên người / tên bữa / số tiền — màu nhấn KHÁC tiêu đề loại (label=primary). */
.mm-notif__hl { color: var(--mm-success); font-weight: 800; }
.mm-notif__text small { color: var(--mm-muted); font-size: .7rem; }
.mm-notif__empty { padding: 1.2rem; text-align: center; color: var(--mm-muted); font-size: .85rem; }



/* Popup "Điểm tin ngày": lời nhắn dạng văn xuôi, cần thở cho dễ đọc. */
#dailyDigestModal .modal-body { padding: 1.25rem 1.5rem; }
.mm-digest__body {
    margin: 0;
    white-space: pre-line;
    font-size: 1.05rem;
    line-height: 2;
    letter-spacing: .1px;
}

/* ============================================================
   Vòng quay may mắn (icon topbar + modal 16 ô lưới 5×5)
   Màu qua biến --mm-wheel-* để 3 theme chỉ đổi MÀU (typography giữ token).
   ============================================================ */
:root {
    /* Default → accent modal INDIGO/VIOLET (hợp tông default). Glass/adult override
       tông riêng ở themes/*.css. --mm-wheel-gold = màu nhấn (tab active, +xu, jackpot). */
    --mm-wheel-panel:   #211d40;   /* nền game (tím indigo đậm) */
    --mm-wheel-panel-2: #2e2960;
    --mm-wheel-cell:    rgba(255,255,255,.04);
    --mm-wheel-border:  rgba(255,255,255,.10);
    --mm-wheel-gold:    #a78bfa;   /* violet-300 (màu nhấn) */
    --mm-wheel-lit:     #c4b5fd;
    --mm-wheel-win:     #8b5cf6;   /* violet-500 */
    --mm-wheel-text:    #f8fafc;
    --mm-wheel-muted:   rgba(248,250,252,.6);
}

/* Brand mobile không xuống dòng khi topbar chật (thêm icon vòng quay). */
.mm-topbar__brand { white-space: nowrap; }

/* --- Trigger ở topbar: chip kiểu ô JACKPOT (viền vàng + chữ/sao vàng sáng).
   Màu chip đổi theo theme qua --mm-coin-chip-* (mặc định = topbar SÁNG). --- */
:root {
    /* Default → chip TÍM INDIGO (đồng bộ avatar tím) + sao vàng. Mỗi theme 1 tông
       riêng (glass = kính mờ, adult = vàng kim tối) — override ở themes/*.css. */
    --mm-coin-chip-bg:     linear-gradient(135deg, #6366f1, #8b5cf6);
    --mm-coin-chip-border: transparent;
    --mm-coin-chip-text:   #ffffff;
    --mm-coin-chip-star:   #ffe08a;
    --mm-coin-chip-glow:   rgba(99,102,241,.45);
}
.mm-wheel-trigger {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; gap: .35rem;
    height: 34px; padding: 0 .7rem;
    border: 1px solid var(--mm-coin-chip-border); border-radius: 999px; line-height: 1;
    background: var(--mm-coin-chip-bg);
    color: var(--mm-coin-chip-text);
    font-size: var(--mm-fs-sm); font-weight: var(--mm-fw-bold);
    cursor: pointer; transition: box-shadow .15s, filter .15s;
    box-shadow: 0 0 8px var(--mm-coin-chip-glow);
}
.mm-wheel-trigger:hover { filter: brightness(.97); }
/* Ngôi sao sáng/glow như cái cúp. */
.mm-wheel-trigger .bi {
    font-size: 1rem; line-height: 1; color: var(--mm-coin-chip-star);
    filter: drop-shadow(0 0 3px var(--mm-coin-chip-glow));
}
.mm-wheel-trigger__coins { font-variant-numeric: tabular-nums; }

/* --- Modal --- */
.mm-wheel {
    background: radial-gradient(120% 100% at 50% 0%, var(--mm-wheel-panel-2), var(--mm-wheel-panel));
    color: var(--mm-wheel-text);
    border: 1px solid var(--mm-wheel-border);
    border-radius: var(--mm-radius-lg);
    overflow: hidden;
}
.mm-wheel__header {
    border-bottom: 1px solid var(--mm-wheel-border);
    color: var(--mm-wheel-text);
    gap: .5rem; flex-wrap: nowrap;
}
/* Ép màu sáng: h5.modal-title mặc định ăn màu --mm-ink (đậm) của theme → mờ trên nền tối.
   flex 0 1 + ellipsis: khi chật (mobile) title co lại/… thay vì đẩy nút X ra ngoài. */
.mm-wheel__header .modal-title {
    color: var(--mm-wheel-text); font-weight: var(--mm-fw-bold);
    font-size: var(--mm-fs-lg); white-space: nowrap;
    flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
.mm-wheel__info-wrap { flex: 0 0 auto; }
.mm-wheel__balance {
    margin-left: auto; flex: 0 0 auto;
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .25rem .55rem; border-radius: 999px;
    background: rgba(245,196,81,.15); color: var(--mm-wheel-gold);
    font-weight: var(--mm-fw-bold); font-size: var(--mm-fs-sm); white-space: nowrap;
}
/* Nút X luôn hiện, không bị bo góc/overflow cắt. */
.mm-wheel__header .btn-close { flex: 0 0 auto; margin: 0; }

/* --- Tabs --- */
.mm-wheel__tabs { display: flex; gap: .35rem; margin-bottom: 1rem; }
.mm-wheel__tab {
    flex: 1; border: 0; background: var(--mm-wheel-cell);
    color: var(--mm-wheel-muted); padding: .5rem;
    border-radius: var(--mm-radius-sm);
    font-size: var(--mm-fs-sm); font-weight: var(--mm-fw-medium); cursor: pointer;
}
.mm-wheel__tab.is-active { background: var(--mm-wheel-gold); color: #1a1530; font-weight: var(--mm-fw-bold); }
/* Giữ chiều cao ổn định giữa 3 tab (không co lại khi xem Lịch sử / Đổi quà). */
.mm-wheel__body { min-height: 500px; }
.mm-wheel__pane { display: none; }
.mm-wheel__pane.is-active { display: block; }

/* --- Hũ Jackpot cộng dồn --- */
.mm-wheel__jackpot {
    display: flex; flex-direction: column; align-items: center; gap: 1px;
    margin: 0 auto .9rem; padding: .5rem 1rem; max-width: 300px;
    border: 1px solid var(--mm-wheel-gold); border-radius: 999px;
    background: rgba(245,196,81,.10);
    box-shadow: 0 0 12px rgba(245,196,81,.2);
}
.mm-wheel__jackpot-label {
    font-size: var(--mm-fs-xs); letter-spacing: .04em;
    color: var(--mm-wheel-gold); font-weight: var(--mm-fw-semibold);
}
.mm-wheel__jackpot-amount {
    font-size: var(--mm-fs-lg); font-weight: var(--mm-fw-bold); color: var(--mm-wheel-text);
    font-variant-numeric: tabular-nums;
}
.mm-wheel__jackpot-amount b { color: var(--mm-wheel-gold); }
.mm-wheel__jackpot-winner { font-size: 10px; color: var(--mm-wheel-muted); margin-top: 1px; }
.mm-wheel__jackpot-winner[hidden] { display: none; }

/* --- Lưới 5×5 --- */
.mm-wheel__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(5, 1fr);
    gap: 6px;
    aspect-ratio: 1 / 1;
    max-width: 380px; margin: 0 auto;
}
.mm-wheel__cell {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 5px; padding: 4px 3px;
    background: var(--mm-wheel-cell);
    border: 1px solid var(--mm-wheel-border);
    border-radius: var(--mm-radius-sm);
    text-align: center; overflow: hidden;
    transition: transform .08s, box-shadow .08s, background .08s;
}
.mm-wheel__cell-emoji { font-size: 1.35rem; line-height: 1; }
.mm-wheel__cell-label {
    font-size: 9px; line-height: 1.2; color: var(--mm-wheel-muted);
    font-weight: var(--mm-fw-medium);
}
.mm-wheel__cell--jackpot { border-color: var(--mm-wheel-gold); background: rgba(245,196,81,.12); }
.mm-wheel__cell--jackpot .mm-wheel__cell-label { color: var(--mm-wheel-gold); }
.mm-wheel__cell.is-lit {
    background: var(--mm-wheel-lit); transform: scale(1.05);
    box-shadow: 0 0 14px 2px rgba(253,230,138,.7);
}
.mm-wheel__cell.is-lit .mm-wheel__cell-label { color: #4a3a10; }
.mm-wheel__cell.is-win {
    background: var(--mm-wheel-win);
    box-shadow: 0 0 20px 4px rgba(245,158,11,.8);
    transform: scale(1.06);
}
.mm-wheel__cell.is-win .mm-wheel__cell-label { color: #fff; }

/* --- Ô giữa (nút quay) --- */
.mm-wheel__center {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .5rem; position: relative;
    background: radial-gradient(circle at 50% 40%, rgba(245,196,81,.12), transparent 70%);
    border-radius: var(--mm-radius-md);
}
.mm-wheel__result { display: flex; flex-direction: column; align-items: center; gap: .15rem; }
.mm-wheel__gift { font-size: 2rem; line-height: 1; }
.mm-wheel__result-text {
    font-size: var(--mm-fs-sm); font-weight: var(--mm-fw-semibold);
    color: var(--mm-wheel-text); text-align: center; min-height: 1.1em;
    white-space: nowrap;
}
.mm-wheel__result-text.is-win  { color: var(--mm-wheel-gold); }
.mm-wheel__result-text.is-lose { color: #ff8b8b; }
.mm-wheel__result-text.mm-pop  { animation: mm-result-pop .35s ease; }
@keyframes mm-result-pop { 0%{transform:scale(.7);opacity:.4} 60%{transform:scale(1.12)} 100%{transform:scale(1)} }
@media (prefers-reduced-motion: reduce){ .mm-wheel__result-text.mm-pop{ animation:none } }
.mm-wheel .mm-wheel__spin { min-width: 96px; }
.mm-wheel__hint {
    margin: 1rem 0 0; text-align: center;
    font-size: var(--mm-fs-sm); color: var(--mm-wheel-muted);
}

/* --- Double-or-Nothing (dưới vòng quay) --- */
.mm-wheel__double {
    margin: .9rem auto 0; max-width: 320px; padding: .7rem .8rem;
    text-align: center; border-radius: var(--mm-radius-md);
    background: rgba(245,196,81,.10); border: 1px solid var(--mm-wheel-gold);
    box-shadow: 0 0 12px rgba(245,196,81,.2);
}
.mm-wheel__double[hidden] { display: none; }
.mm-wheel__double-text { margin: 0 0 .7rem; font-size: var(--mm-fs-xs); color: var(--mm-wheel-text); line-height: 1.4; }
.mm-wheel__double-text b { color: var(--mm-wheel-gold); }
.mm-wheel__double-win { color: #7ee7a6 !important; }
.mm-wheel__double-lose { color: #ff8b8b !important; }
.mm-wheel__double-actions { display: flex; gap: .5rem; justify-content: center; }
/* Nút "Chốt" hợp cả 3 theme (dùng biến wheel thay btn-light trắng lạc tông). */
.btn.mm-wheel__keep {
    background: var(--mm-wheel-cell); border: 1px solid var(--mm-wheel-border);
    color: var(--mm-wheel-text);
}
.btn.mm-wheel__keep:hover, .btn.mm-wheel__keep:focus {
    background: rgba(255,255,255,.12); border-color: var(--mm-wheel-gold); color: var(--mm-wheel-text);
}
.mm-wheel__expiry {
    margin: .35rem 0 0; text-align: center;
    font-size: var(--mm-fs-sm); font-weight: var(--mm-fw-semibold); color: var(--mm-wheel-win);
}
.mm-wheel__expiry[hidden] { display: none; }

/* Icon "?" + tooltip luật nhận lượt (ở header). */
.mm-wheel__header { position: relative; }
.mm-wheel__info-wrap { margin-left: .5rem; }
.mm-wheel__info {
    width: 26px; height: 26px; padding: 0; border: 1px solid var(--mm-wheel-border);
    background: var(--mm-wheel-cell); color: var(--mm-wheel-text);
    border-radius: 50%; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
    font-size: .9rem; line-height: 1;
}
.mm-wheel__info:hover { background: rgba(255,255,255,.1); }
/* Neo theo HEADER (không theo icon) + inset 2 bên → luôn nằm trong modal. */
.mm-wheel__info-pop {
    position: absolute; top: calc(100% + 6px); left: 12px; right: 12px; z-index: 5;
    padding: .75rem .85rem;
    background: var(--mm-wheel-panel-2); color: var(--mm-wheel-text);
    border: 1px solid var(--mm-wheel-border); border-radius: var(--mm-radius-md);
    box-shadow: 0 10px 30px rgba(0,0,0,.45);
}
.mm-wheel__info-pop[hidden] { display: none; }
.mm-wheel__info-title { margin: 0 0 .4rem; font-weight: var(--mm-fw-bold); font-size: var(--mm-fs-sm); }
.mm-wheel__info-pop ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .35rem; }
.mm-wheel__info-pop li { font-size: var(--mm-fs-xs); color: var(--mm-wheel-muted); line-height: 1.35; }
.mm-wheel__info-pop b { color: var(--mm-wheel-gold); }

/* --- Lịch sử quay --- */
.mm-wheel__history { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.mm-wheel__history-item {
    display: flex; align-items: center; gap: .6rem;
    padding: .55rem .75rem; border-radius: var(--mm-radius-sm);
    background: var(--mm-wheel-cell); border: 1px solid var(--mm-wheel-border);
}
.mm-wheel__history-emoji { font-size: 1.2rem; }
.mm-wheel__history-date { color: var(--mm-wheel-muted); font-size: var(--mm-fs-sm); }
.mm-wheel__history-win { margin-left: auto; color: var(--mm-wheel-gold); font-weight: var(--mm-fw-bold); }
.mm-wheel__history-miss { margin-left: auto; color: var(--mm-wheel-muted); font-size: var(--mm-fs-sm); }
/* Số âm (mua VIP, gấp thếp thua) — nay là cột số chính nên đẩy phải như .win */
.mm-wheel__history-lost { margin-left: auto; color: var(--mm-danger); font-weight: var(--mm-fw-bold); }
/* Chú thích nguồn gốc: tên bữa đã ứng, số ngày VIP, nhãn ô trúng… */
.mm-wheel__history-note { flex: 1 1 auto; min-width: 0; color: var(--mm-wheel-muted); font-size: var(--mm-fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-wheel__history-empty { color: var(--mm-wheel-muted); text-align: center; padding: 1.5rem 0; }

/* Phân trang lịch sử — giữ chiều cao ổn định (6 mục/trang). */
.mm-wheel__pager { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1rem; }
.mm-wheel__pager[hidden] { display: none; }
.mm-wheel__pager-btn {
    width: 34px; height: 34px; border: 1px solid var(--mm-wheel-border);
    background: var(--mm-wheel-cell); color: var(--mm-wheel-text);
    border-radius: 50%; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.mm-wheel__pager-btn:disabled { opacity: .4; cursor: default; }
.mm-wheel__pager-info { color: var(--mm-wheel-muted); font-size: var(--mm-fs-sm); font-weight: var(--mm-fw-semibold); min-width: 42px; text-align: center; }

/* --- Đổi quà (coming soon) --- */
.mm-wheel__soon { text-align: center; padding: 1.5rem .5rem; }
.mm-wheel__soon-emoji { font-size: 2.6rem; }
.mm-wheel__soon-title { margin: .6rem 0 .25rem; font-weight: var(--mm-fw-bold); font-size: var(--mm-fs-lg); }
.mm-wheel__soon-sub { color: var(--mm-wheel-muted); font-size: var(--mm-fs-sm); margin-bottom: 1rem; }

/* --- Đổi quà: danh sách món (thêm dần) --- */
.mm-wheel__shop { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.mm-wheel__shop-item {
    display: flex; align-items: center; gap: .7rem;
    padding: .6rem .75rem; border-radius: var(--mm-radius-sm);
    background: var(--mm-wheel-cell); border: 1px solid var(--mm-wheel-border);
}
.mm-wheel__shop-ico { font-size: 1.5rem; flex: 0 0 auto; }
.mm-wheel__shop-info { flex: 1 1 auto; min-width: 0; }
.mm-wheel__shop-name {
    margin: 0; font-weight: var(--mm-fw-bold); font-size: var(--mm-fs-sm); color: var(--mm-wheel-text);
    display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
}
.mm-wheel__shop-tag { font-size: 10px; font-weight: var(--mm-fw-medium); color: var(--mm-wheel-gold); }
.mm-wheel__shop-desc { margin: 1px 0 0; font-size: 11px; color: var(--mm-wheel-muted); line-height: 1.25; }
.mm-wheel__shop-item .btn { flex: 0 0 auto; white-space: nowrap; }
.mm-wheel__shop-item.is-soon { opacity: .55; }
.mm-wheel__shop-soon {
    flex: 0 0 auto; font-size: 11px; color: var(--mm-wheel-muted);
    border: 1px dashed var(--mm-wheel-border); border-radius: 999px; padding: 3px 9px;
}
.mm-wheel__vip-msg { margin: .8rem 0 0; text-align: center; font-size: var(--mm-fs-sm); font-weight: var(--mm-fw-semibold); color: var(--mm-wheel-gold); }
.mm-wheel__vip-msg.is-error { color: #ff9b9b; }
.mm-wheel__vip-msg[hidden] { display: none; }

/* --- Confetti --- */
.mm-wheel__confetti { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.mm-wheel__confetti i {
    position: absolute; top: 40%; width: 7px; height: 12px; border-radius: 2px;
    animation: mm-wheel-confetti 1.2s ease-out forwards;
}
@keyframes mm-wheel-confetti {
    0%   { transform: translateY(0) rotate(0); opacity: 1; }
    100% { transform: translateY(-120px) rotate(360deg); opacity: 0; }
}

@media (max-width: 480px) {
    .mm-wheel__grid { max-width: 320px; gap: 4px; }
    .mm-wheel__cell-emoji { font-size: 1.15rem; }
    .mm-wheel__cell-label { font-size: 8px; }
    /* Topbar chật trên mobile → pill xu nhỏ lại. */
    .mm-wheel-trigger { height: 30px; padding: 0 .5rem; font-size: var(--mm-fs-xs); }
    /* Ẩn chữ "Bills Manager" (giữ logo) để nhường chỗ cho pill xu + chuông + avatar. */
    .mm-topbar__brand-text { display: none; }
    /* Header chật → title + balance nhỏ lại để nút X không bị đẩy ra ngoài. */
    .mm-wheel__header { gap: .35rem; }
    .mm-wheel__header .modal-title { font-size: var(--mm-fs-base); }
    .mm-wheel__balance { padding: .2rem .45rem; font-size: var(--mm-fs-xs); }
    .mm-wheel__result-text { font-size: var(--mm-fs-xs); }
    .mm-wheel__gift { font-size: 1.6rem; }
    .mm-wheel__body { min-height: 440px; }
}

/* ============================================================
   Thẻ VIP (<x-vip-badge>) — chip vàng + vương miện + loé sáng.
   Nền vàng đặc → đọc rõ trên cả nền sáng (bảng xếp hạng) lẫn tối (modal).
   ============================================================ */
.mm-vip {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 1px 7px 1px 5px; border-radius: 999px;
    font-size: 10px; font-weight: var(--mm-fw-bold); letter-spacing: .04em;
    line-height: 1.5; vertical-align: middle; white-space: nowrap;
    color: #4a3000; background: linear-gradient(135deg, #ffe083, #f5b825 55%, #d98f16);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 1px 3px rgba(160,110,0,.35);
    position: relative; overflow: hidden;
}
.mm-vip__ico { width: 11px; height: 11px; fill: #5a3d00; flex: 0 0 auto; }
.mm-vip::after {
    content: ""; position: absolute; top: 0; left: -60%; width: 38%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.85), transparent);
    transform: skewX(-18deg); animation: mm-vip-sheen 3.5s ease-in-out infinite;
}
@keyframes mm-vip-sheen { 0%,60%{left:-60%} 82%,100%{left:130%} }
@media (prefers-reduced-motion: reduce){ .mm-vip::after{ animation:none; display:none } }