/* Sarabun Font */
  @import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@400;500;600;700&display=swap');
  /* New Fonts for Themes */
  @import url('https://fonts.googleapis.com/css2?family=Sriracha&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=Mali:wght@400;600&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;700&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=Prompt:wght@400;500;700&display=swap');

  /* 
    =================================================================
    THEME & VARIABLES
    =================================================================
  */
  :root {
    /* Default Theme (Cosmic) */
    --font-main: 'Sarabun', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans Thai', 'Thonburi', sans-serif;

    --primary-color: #696cff;
    --primary-hover-color: #6a489a;
    --sidebar-bg: rgba(255, 255, 255, 1);
    --main-bg: #f8f9fa;
    --text-color: #212529;
    --text-muted-color: #8c97a1;
    --card-bg: rgba(255, 255, 255, 0.8);
    --card-border-color: #e9ecef;
    --glass-bg: rgba(221, 220, 220, 0.7);
    --shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
    --border-radius: 12px;
    --sidebar-width: 260px;
    --header-height: 60px;

    /* Pastel Colors */
    --income-color: #2eb375;
    --expense-color: #fd8080;
    --balance-color: #67e6ff;
    --net-worth-color: #e3c389;
    --savings-rate-color: #d1c4e9;
    --text-shadow: 0px 1px 2px rgb(0 0 0 / 0.1), 0px 3px 2px rgb(0 0 0 / 0.1), 0px 4px 8px rgb(0 0 0 / 0.1);

    /*--box-shadow: 20px 20px 35px 11px rgba(0,0,0,0.1),15px 10px 15px -10px rgba(0,0,0,0.1),-9px 10px 15px -3px rgba(0,0,0,0.1),0px -6px 15px -3px rgba(0,0,0,0.1),21px 19px 100px 14px rgba(0,0,0,0.1); */

    /* ใช้สีหลักมาทำเป็นเงาแบบโปร่งใส 15% */
    /*--box-shadow: 0 10px 25px color-mix(in srgb, var(--primary-color) 15%, transparent); */
    /* สไตล์นี้เงาจะฟุ้งออกไปรอบๆ แบบบางเบา ทำให้กล่องดูนุ่มนวลและไม่แข็งจนเกินไป เหมาะกับดีไซน์แนวมินิมอล */
    --box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);

    --bs-border-radius: 1.25rem;
    --blur: blur(5px);
  }

  body.dark-mode {
    /* Default Dark Mode */
    --font-main: 'Sarabun', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans Thai', 'Thonburi', sans-serif;
    --primary-color: #7b7eff;
    --primary-hover-color: #bca6dd;
    --sidebar-bg: rgba(33, 33, 33, 1);
    --main-bg: #121212;
    --text-color: #e4e6eb;
    --text-muted-color: #a8abaf;
    --card-bg: rgba(44, 44, 46, 0.8);
    --card-border-color: #4f5152;
    --glass-bg: rgba(44, 44, 46, 0.7);
    --shadow: 0 4px 20px rgba(0, 0, 0, 0.25);

    /* Dark Pastel Colors */
    --income-color: #2e7d32;
    --expense-color: #c62828;
    --balance-color: #1565c0;
    --net-worth-color: #b38e4c;
    --savings-rate-color: #7e6c9f;
  }

  /* --- Theme Overrides --- */

  /* 1. Vintage Theme */
  body[data-theme="vintage"] {
    --font-main: "Sriracha", 'Noto Sans Thai', 'Thonburi', cursive;
    --primary-color: #cd853f;
    /* Peru */
    --primary-hover-color: #a0522d;
    --main-bg: #f3cf8c;
    --card-bg: #f3cf8cda;
    --card-border-color: #e0bf81da;
    --glass-bg: #f5deb366;
    --bs-border-color: #d3b379da;
    --text-muted-color: #775523;
    --shadow: 5px 5px 15px rgba(0, 0, 0, 0.25), inset 0 0 60px rgba(230, 210, 180, 0.5);
    --text-shadow: #5c555544 1px 1px 0, 2px 2px 2px rgba(206, 90, 55, 0.048);
  }

  body[data-theme="vintage"][data-mode="dark"] {
    --card-bg: rgba(60, 40, 30, 0.85);
    --card-border-color: rgba(60, 40, 30, 1);
    --glass-bg: rgba(60, 40, 30, 0.8);
    --main-bg: rgba(60, 40, 30, 1);
    --bs-border-color: rgba(85, 55, 41, 0.8);
    --shadow: 5px 5px 15px rgba(0, 0, 0, 0.25), inset 0 0 60px rgba(71, 62, 48, 0.5);
  }

  /* 2. Minimal Theme */
  body[data-theme="minimal"] {
    --font-main: "Prompt", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans Thai', 'Thonburi', sans-serif;
    --primary-color: #534e4e;
    --primary-hover-color: #000000;
    --card-bg: rgba(255, 255, 255, 0.8);
    --card-border-color: #adadad87;
    --main-bg: rgba(255, 255, 255, 1);
    --glass-bg: rgba(255, 255, 255, 0.85);
    --bs-border-color: rgba(207, 205, 205, 0.8);
    --shadow: rgba(0, 0, 0, 0.3) 0px 2px 8px;
    --box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.2), inset 0 1px 3px rgba(0, 0, 0, 0.1);
    --text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
  }

  body[data-theme="minimal"][data-mode="dark"] {
    --card-bg: rgba(24, 25, 26, 0.85);
    --primary-hover-color: #fff;
    --main-bg: rgba(24, 25, 26, 1);
    --glass-bg: rgba(24, 25, 26, 0.9);
    --card-border-color: rgba(65, 67, 70, 0.85);
    --shadow: rgba(255, 255, 255, 0.3) 0px 2px 8px;
  }

  body[data-theme="minimal"] .table-active {
    --bs-table-bg-state: var(--bs-border-color);
  }

  /* 3. Sakura Theme */
  body[data-theme="sakura"] {
    --font-main: "Mali", 'Noto Sans Thai', 'Thonburi', cursive;
    --primary-color: #ffb6c1;
    /* LightPink */
    --primary-hover-color: #ff99ac;
    --shadow: rgb(74, 38, 77) 0px 20px 30px -10px;
    --text-shadow: 1px 1px 3px rgba(255, 182, 193, 0.5);
  }

  body[data-theme="sakura"][data-mode="dark"] {
    --card-bg: rgba(60, 40, 50, 0.7);
    --main-bg: rgba(60, 40, 50, 1);
    --glass-bg: rgba(60, 40, 50, 0.8);
    --shadow: rgb(41, 25, 46) 0px 20px 30px -10px;
  }

  /* 4. Matrix Theme */
  body[data-theme="matrix"] {
    --font-main: "Source Code Pro", ui-monospace, 'Cascadia Mono', 'SFMono-Regular', Consolas, monospace;
    --primary-color: #00ff00;
    /* Green */
    --primary-hover-color: #39ff14;
    --text-color: #00ff00;
    --text-muted-color: #82ec82;
    --card-bg: rgba(0, 20, 0, 0.85);
    --glass-bg: rgba(0, 20, 0, 0.9);
    --card-border-color: #005d00;
    --shadow: rgba(0, 255, 0, 0.4) 0px 0px 10px, rgba(0, 255, 0, 0.2) 0px 0px 20px;
    --text-shadow: 0 0 5px #00ff00, 0 0 10px #00ff00;
    --income-color: #00ff00;
    --expense-color: #00ff00;
    --balance-color: #00ff00;
    --net-worth-color: #00ff00;
  }

  body[data-theme="matrix"] .btn-outline-primary {
    color: var(--primary-color);
    border-color: var(--primary-color);
  }

  body[data-theme="matrix"] .btn-outline-primary:hover {
    color: #000;
    background-color: var(--primary-color);
    border-color: var(--primary-color);
  }

  body[data-theme="matrix"][data-mode="dark"] {
    --shadow: rgba(34, 109, 34, 0.4) 0px 0px 10px, #025e0233 0px 0px 20px;
    --main-bg: #000;
  }

  /* 5. Timber Theme (Carved Wood) */
  body[data-theme="wood"] {
    --font-main: "Prompt", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans Thai', 'Thonburi', sans-serif;
    --primary-color: #a67c52;
    /* Polished Walnut */
    --primary-hover-color: #8c6a40;
    --main-bg: #3d2b1f;
    /* Dark wood base */
    --card-bg: rgba(0, 0, 0, 0.3);
    /* Embedded/Hole effect */
    --card-border-color: rgba(255, 255, 255, 0.05);
    --glass-bg: rgba(0, 0, 0, 0.2);
    --text-color: #f3e5ab;
    /* Aged paper / Light grain color */
    --text-muted-color: #c19a6b;
    --shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
    /* Inner shadows create the "carved into wood" depth */
    --box-shadow: inset 8px 8px 16px rgba(0, 0, 0, 0.6), inset -2px -2px 8px rgba(255, 255, 255, 0.05);
    --text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);

    --income-color: #97c1a9;
    --expense-color: #ff9a8d;
    --balance-color: #8fcaca;
    --net-worth-color: #fbc4ab;
    --blur: blur(0px);
  }

  body[data-theme="wood"] .table-active {
    --bs-table-color-state: #fff;
    --bs-table-bg-state: rgb(219 209 209 / 10%);
  }

  body[data-theme="wood"] .data-card,
  body[data-theme="wood"] .bento-content,
  body[data-theme="wood"] .inset-card-style,
  body[data-theme="wood"] .modal-content,
  body[data-theme="wood"] .form-control,
  body[data-theme="wood"] .form-select {
    background-color: rgba(0, 0, 0, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.03) !important;
    box-shadow: var(--box-shadow) !important;
    color: var(--text-color) !important;
  }

  body[data-theme="wood"] .modal-content {
    backdrop-filter: blur(5px);
  }

  body[data-theme="wood"] .bento-title {
    color: var(--primary-color);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
  }

  body[data-theme="wood"] .sidebar {
    background: linear-gradient(to right, #2d1e16, #3d2b1f);
    border-right: 2px solid #2d1e16;
  }

  /* body[data-theme="wood"] .pseudo-background {
      filter: sepia(0.3) brightness(0.6) contrast(1.2);
  } */

  /* 1. ตั้งค่าภาพพื้นหลังและการทำซ้ำที่ตัวคอนเทนเนอร์หลัก */
  body[data-theme="wood"] #main-view-container {
    background-image: url('https://lh3.googleusercontent.com/d/1KKm0CuQ17ZlLejJKqr2ZMdR1mYh01pnK');
    background-repeat: repeat;
    background-position: top center;
    background-size: auto;
    position: relative;
  }

  /* 2. สร้างชั้นฟิลเตอร์ทับ (โหมดปกติ) */
  body[data-theme="wood"] #main-view-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    filter: sepia(0.3) brightness(0.6) contrast(1.2);
    pointer-events: none;
    z-index: 0;
  }

  /* 3. ฟิลเตอร์สำหรับโหมดมืด (ปิดปีกกา } ให้ครบถ้วน) */
  body[data-theme="wood"] #main-view-container[data-mode="dark"]::before,
  body[data-theme="wood"].dark-mode #main-view-container::before {
    filter: brightness(0.4) contrast(1.1) !important;
  }

  /* 4. ดันเนื้อหาทั้งหมดด้านในให้อยู่เหนือชั้นฟิลเตอร์ */
  body[data-theme="wood"] #main-view-container>* {
    position: relative;
    z-index: 1;
  }

  body[data-theme="wood"] .bento-content {
    backdrop-filter: none;
  }

  body[data-theme="wood"] .theme-option.active {
    border-color: #fff !important;
  }

  /* --- Sky Pastel Theme --- */
  body[data-theme="sky"] {
    --font-main: "Mali", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans Thai', 'Thonburi', sans-serif;
    --primary-color: #0fbcf9;
    /* Vibrant Sky Blue */
    --primary-hover-color: #0984e3;
    --main-bg: #bbd7f8;
    --card-bg: rgba(255, 255, 255, 0.25);
    /* Clearer Glass */
    --card-border-color: rgba(255, 255, 255, 0.45);
    /* White glass border */
    --glass-bg: rgba(255, 255, 255, 0.35);
    --text-color: #1e3799;
    /* Deep blue for readability */
    --text-muted-color: #4a69bd;
    --shadow: rgb(38, 44, 77) 0px 20px 30px -10px;
    /* 0 10px 30px rgba(0, 0, 0, 0.08) */
    --text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.65);
    /* Light glow behind text */

    /* Vibrant Pastel Accents */
    --income-color: #05c46b;
    /* Fresh Green */
    --expense-color: #ff5e57;
    /* Soft Red */
    --balance-color: #4bc0c0;
    /* Turquoise */
    --net-worth-color: #ffc048;
    /* Sunny Gold */
  }

  body[data-theme="sky"][data-mode="dark"] {
    --main-bg: #0f172a;
    --card-bg: rgba(30, 41, 59, 0.6);
    --card-border-color: rgba(255, 255, 255, 0.1);
    --glass-bg: rgba(15, 23, 42, 0.8);
    --text-color: #f1f5f9;
    --text-muted-color: #94a3b8;
    --shadow: rgb(25, 26, 46) 0px 20px 30px -10px;
    /* 0 10px 20px rgba(0, 0, 0, 0.4) */
    --text-shadow: none;
  }

  /* Special for Sky Theme: Make Bento Boxes less dark */
  body[data-theme="sky"] .bento-income,
  body[data-theme="sky"] .bento-expense,
  body[data-theme="sky"] .bento-cashflow,
  body[data-theme="sky"] .bento-networth,
  body[data-theme="sky"] .bento-savings-rate {
    background-color: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px) saturate(150%);
    -webkit-backdrop-filter: blur(10px) saturate(150%);
  }

  body[data-theme="sky"] .bento-content {
    box-shadow: 0 4px 14px rgba(38, 44, 77, 0.22);
    transition: background-color 0.2s ease, border-color 0.2s ease;
  }

  body[data-theme="sky"] .table-active {
    --bs-table-bg-state: #7987aa73;
  }

  body[data-theme="sky"] .pseudo-background {
    filter: blur(5px);
  }

  body[data-theme="sky"][data-mode="dark"] .pseudo-background {
    filter: blur(5px) brightness(0.8) contrast(1.2);
  }

  /* General Dark Mode Overrides for Backgrounds */
  body[data-mode="dark"] .pseudo-background {
    filter: brightness(0.5) contrast(1.1);
  }

  body[data-theme="matrix"] .pseudo-background,
  body[data-theme="matrix"][data-mode="dark"] .pseudo-background {
    filter: brightness(0.8) contrast(1.2);
  }

  /* --- Midnight Forest Theme --- */
  body[data-theme="forest"] {
    --font-main: "Sriracha", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans Thai', 'Thonburi', sans-serif;
    --primary-color: #4a7c59;
    /* Deep Forest Green */
    --primary-hover-color: #3a6347;
    --main-bg: #f4f7f5;
    --card-bg: rgba(255, 255, 255, 0.85);
    --card-border-color: #d8e2dc;
    --glass-bg: rgba(235, 240, 237, 0.7);
    --text-color: #2d3a35;
    --text-muted-color: #6a7b74;
    --shadow: 0 8px 20px rgba(74, 124, 89, 0.15);
    --text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1);

    /* Pastel Accents for Forest */
    --income-color: #88b04b;
    --expense-color: #d98888;
    --balance-color: #5e8c6d;
    --net-worth-color: #c5a059;
    /* Muted Gold */
  }

  body[data-theme="forest"][data-mode="dark"] {
    --main-bg: #0d1311;
    --card-bg: rgba(20, 30, 26, 0.85);
    --card-border-color: #2d4037;
    --glass-bg: rgba(20, 30, 26, 0.9);
    --text-color: #d1d9d5;
    --text-muted-color: #7a8c84;
    --shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
  }

  /* --- 5. Midnight Gold (Luxury) --- */
  body[data-theme="luxury"] {
    --font-main: "Prompt", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans Thai', 'Thonburi', sans-serif;
    --primary-color: #d4af37;
    /* Gold */
    --primary-hover-color: #b8952e;
    --main-bg: #1a1c23;
    /* Dark Charcoal (slightly lighter for Light Mode feel) */
    --card-bg: rgba(255, 255, 255, 0.05);
    /* Very subtle white glass */
    --card-border-color: rgba(212, 175, 55, 0.3);
    /* Gold border */
    --glass-bg: rgba(26, 28, 35, 0.8);
    --text-color: #f0f0f0;
    --text-muted-color: #a0a0a0;
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    --text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.8);

    /* Luxury Accents */
    --income-color: #10b981;
    /* Emerald */
    --expense-color: #ef4444;
    /* Ruby */
    --balance-color: #3b82f6;
    /* Sapphire */
    --net-worth-color: #fbbf24;
    /* Amber Gold */
    --savings-rate-color: #a855f7;
    /* Amethyst */
  }

  body[data-theme="luxury"][data-mode="dark"] {
    --main-bg: #050505;
    /* Pitch Black */
    --card-bg: rgba(20, 20, 20, 0.8);
    --card-border-color: rgba(212, 175, 55, 0.15);
    --glass-bg: rgba(0, 0, 0, 0.9);
    --text-color: #e5e7eb;
    --text-muted-color: #9ca3af;
    --shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
  }

  body[data-theme="luxury"] .bento-title {
    color: var(--primary-color);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 0.75rem;
    font-weight: 700;
  }

  body[data-theme="luxury"] .bento-content {
    /* border: 1px solid var(--card-border-color); */
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.05) 0%, rgba(0, 0, 0, 0) 100%);
  }

  body[data-theme="luxury"] .table-active {
    --bs-table-bg-state: #7c7c7cb5;
  }

  /* --- 6. Ocean / Deep Sea Theme --- */
  body[data-theme="ocean"] {
    --font-main: "Prompt", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans Thai', 'Thonburi', sans-serif;
    --primary-color: #0abab5;
    /* Seafoam Teal */
    --primary-hover-color: #08918e;
    --main-bg: #e8f5f7;
    --card-bg: rgba(255, 255, 255, 0.72);
    --card-border-color: rgba(10, 186, 181, 0.22);
    --glass-bg: rgba(224, 244, 247, 0.7);
    --text-color: #0e3a44;
    --text-muted-color: #577b84;
    --shadow: 0 10px 30px rgba(10, 74, 88, 0.2);
    --box-shadow: 0 8px 26px rgba(10, 74, 88, 0.16);
    --text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.12);

    /* Aquatic Accents */
    --income-color: #0aa874;
    /* Seagrass */
    --expense-color: #ff6f61;
    /* Coral */
    --balance-color: #1e88c9;
    /* Ocean Blue */
    --net-worth-color: #f5b34c;
    /* Sand Gold */
    --savings-rate-color: #7d6bb0;
    /* Kelp Violet */
    --blur: blur(8px);
  }

  body[data-theme="ocean"][data-mode="dark"] {
    --main-bg: #031820;
    --card-bg: rgba(6, 32, 40, 0.85);
    --card-border-color: rgba(64, 200, 210, 0.2);
    --glass-bg: rgba(4, 26, 33, 0.85);
    --text-color: #d8f3f7;
    --text-muted-color: #7ea6af;
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
    --box-shadow: 0 8px 26px rgba(0, 0, 0, 0.45);
    --text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.6);

    --income-color: #2bb673;
    --expense-color: #ff7768;
    --balance-color: #38a9e0;
    --net-worth-color: #e8b34a;
    --savings-rate-color: #8f7fc9;
  }

  /* Ocean background = CSS gradient (ไม่มีภาพภายนอก) */
  body[data-theme="ocean"] .pseudo-background {
    background-image: radial-gradient(ellipse at 50% -10%, rgba(64, 200, 210, 0.35), transparent 60%),
      linear-gradient(180deg, #bfe6ee 0%, #d9f1f4 40%, #eef8f9 100%);
  }

  body[data-theme="ocean"][data-mode="dark"] .pseudo-background {
    background-image: radial-gradient(ellipse at 50% -10%, rgba(43, 204, 219, 0.22), transparent 60%),
      linear-gradient(180deg, #05222c 0%, #03151c 55%, #010b10 100%);
  }

  /* Make Bento boxes extra glassy for Ocean */
  body[data-theme="ocean"] .bento-income,
  body[data-theme="ocean"] .bento-expense,
  body[data-theme="ocean"] .bento-cashflow,
  body[data-theme="ocean"] .bento-networth,
  body[data-theme="ocean"] .bento-savings-rate {
    background-color: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
  }

  body[data-theme="ocean"] .bento-content {
    box-shadow: 0 4px 14px rgba(12, 84, 98, 0.18);
    transition: background-color 0.2s ease, border-color 0.2s ease;
  }

  body[data-theme="ocean"] .table-active {
    --bs-table-bg-state: #9dd8df66;
  }

  body[data-theme="ocean"] .theme-option.active {
    border-color: var(--primary-color) !important;
  }

  .pseudo-background {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    transition: filter 0.5s ease, background-image 0.5s ease;
  }

  /* New: Styles for background preview in settings */
  .background-preview-box {
    width: 100%;
    height: 150px;
    border-radius: var(--border-radius);
    background-color: var(--main-bg);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--card-border-color);
  }

  /* New: Styles for predefined theme options */
  .theme-option {
    width: 120px;
    /* Adjust as needed */
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid transparent;
    /* Default border */
  }

  .theme-option.active {
    border-color: var(--primary-color);
    /* Highlight active theme */
    box-shadow: 0 0 0 3px rgba(105, 108, 255, 0.5);
    /* Using a fixed primary color for shadow for consistency */
  }

  .theme-option:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
  }

  .theme-option-thumb {
    width: 100%;
    height: 80px;
    background-size: cover;
    background-position: center;
    border-radius: var(--border-radius);
    border: 1px solid var(--card-border-color);
  }

  .text-shadow {
    text-shadow: var(--text-shadow);
  }

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

  html,
  body {
    scrollbar-width: none;
    height: 100%;
    margin: 0;
    padding: 0;
  }

  /* Base Styles */
  body {
    font-family: var(--font-main);
    background-color: var(--main-bg);
    color: var(--text-color);
    margin: 0;
    overflow-x: hidden;
    isolation: isolate;
    transition: background-color 0.2s ease, color 0.2s ease;
    text-shadow: var(--text-shadow);
    /* Crisper glyph edges (esp. Thai) on retina / subpixel screens */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }

  .page-wrapper {
    display: flex;
    min-height: 100vh;
    position: relative;
  }

  .accordion {
    --bs-accordion-color: var(--text-color);
    --bs-accordion-bg: var(--card-bg);
  }

  .accordion-button {
    color: var(--text-color);
    background-color: var(--card-bg);
  }

  .input-group-text {
    color: var(--text-color);
    background-color: var(--card-bg);
    border: var(--bs-border-width) solid var(--card-border-color);
  }

  .list-group {
    --bs-list-group-border-color: var(--card-border-color);
  }

  .list-group-item {
    color: var(--text-color);
    background-color: transparent;
  }

  .list-group-item-action:focus,
  .list-group-item-action:hover {
    color: #000;
    background-color: color-mix(in srgb, var(--primary-color) 50%, #ffffff00);
    backdrop-filter: var(--blur);
  }

  .card-body {
    color: var(--text-color);
    /* backdrop-filter: var(--blur); */
  }

  .btn-close {
    /* ใช้สีตัวหนังสือเป็นสีหลักของปุ่ม */
    --bs-btn-close-color: var(--text-color);
    /* ใช้ filter เพื่อเปลี่ยนสี SVG ให้เป็นสีเดียวกับ --text-color */
    /* หมายเหตุ: วิธีนี้จะทำให้ไอคอนเปลี่ยนสีตามตัวหนังสือได้โดยไม่ต้องแก้ไฟล์ SVG */
    filter: brightness(0) saturate(100%) invert(var(--btn-close-invert, 0));
    opacity: var(--bs-btn-close-opacity);
  }

  /* ปรับค่า invert สำหรับโหมดมืดหรือธีมที่มีพื้นหลังเข้ม */
  body.dark-mode,
  body[data-mode="dark"] {
    --btn-close-invert: 1;
    /* ทำให้ไอคอนเป็นสีขาวในโหมดมืด */
  }

  .pagination {
    --bs-pagination-bg: var(--glass-bg);
    --bs-pagination-disabled-bg: #b7b7b70f;
  }

  .btn-close:hover {
    opacity: var(--bs-btn-close-hover-opacity);
  }

  .sidebar {
    width: var(--sidebar-width);
    background: var(--glass-bg);
    box-shadow: -10px 0px 13px -7px #000000, 10px 0px 13px -7px #000000, 5px 5px 15px 5px rgba(0, 0, 0, 0);
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    z-index: 1000;
    transition: transform 0.3s ease-in-out, background-color 0.2s ease;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--card-border-color);
    padding-bottom: 1rem;
    border-radius: 0 1rem 1rem 0;
    backdrop-filter: var(--blur);
  }

  .sidebar.collapsed {
    transform: translateX(calc(-1 * var(--sidebar-width)));
  }

  .sidebar-content {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .sidebar-header {
    padding: 1.2rem 1.5rem;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--card-border-color);
  }

  .sidebar-header h4 {
    margin: 0;
    font-weight: 700;
    color: var(--primary-color);
  }

  .sidebar-menu {
    list-style: none;
    padding: 1rem 0;
    flex-grow: 1;
  }

  /* --- NEW: Sidebar Link Styling --- */
  .sidebar-menu .nav-link {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1.5rem;
    color: var(--text-muted-color);
    text-decoration: none;
    transition: all 0.2s ease;
    border-radius: 8px;
    font-family: var(--font-main);
  }

  .sidebar-menu .nav-link:hover {
    background-color: color-mix(in srgb, var(--primary-color) 15%, transparent);
  }

  .sidebar-menu .nav-link.active {
    color: var(--primary-color);
    font-weight: 600;
    /* ใช้ inset ร่วมกับเงา 2 ชั้น เพื่อให้มิติความลึกดูสมจริงและนุ่มนวลขึ้น */
    box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.2),
      inset 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--card-border-color);
    transform: translateY(2px);
    /* ขยับลง */
  }

  .sidebar-menu .nav-link.active i {
    color: var(--primary-color);
  }

  .sidebar-menu .nav-link i {
    margin-right: 1rem;
    font-size: 1.2rem;
  }

  .sidebar-footer {
    margin-top: auto;
    padding: 1rem 1.5rem;
    color: var(--text-muted-color);
  }

  .main-content {
    flex-grow: 1;
    min-width: 0;
    margin-left: var(--sidebar-width);
    transition: margin-left 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
  }

  .main-content.collapsed {
    margin-left: 0;
  }

  .header {
    height: var(--header-height);
    background: color-mix(in srgb, var(--primary-color) 95%, transparent);
    box-shadow: 0px 10px 13px -7px #000000, 5px 5px 15px 5px rgba(0, 0, 0, 0);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--sidebar-width);
    position: sticky;
    top: 0;
    z-index: 999;
    transition: transform 0.3s ease-in-out;
    margin-left: calc(var(--sidebar-width) * -1);
  }

  .header.header-hidden {
    transform: translateY(-100%);
  }

  main {
    flex-grow: 1;
    min-width: 0;
    padding: 1.5rem;
    padding-top: 1rem;
  }

  #pagination-container {
    height: 2.5rem;
  }

  .summary-card,
  .data-card,
  .modal-content {
    background: var(--card-bg);
    border-radius: var(--border-radius);
    border: 1px solid var(--card-border-color);
    box-shadow: var(--shadow);
    /* padding: 0.2rem; */
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  }

  /* Blur is expensive when applied to every card. Keep it for focused
     dashboard Bento cards and modals; regular data cards stay translucent. */
  .summary-card,
  .data-card:not(.bento-box) {
    /* backdrop-filter: none; */
    /* -webkit-backdrop-filter: none; */
  }

  .bento-box {
    /* backdrop-filter: blur(6px); */
    /* -webkit-backdrop-filter: blur(6px); */
  }

  .modal-content {
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
  }

  @media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      scroll-behavior: auto !important;
      transition-duration: 0.01ms !important;
    }
  }

  .modal-header {
    border-top-left-radius: var(--bs-border-radius);
    border-top-right-radius: var(--bs-border-radius);
  }

  .modal-content {
    overflow: hidden;
  }

  .card {
    background-color: var(--card-bg);
    border: 1px solid var(--card-border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    --bs-card-title-color: var(--text-color);
    color: var(--text-color);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
  }

  .table {
    --bs-table-color: var(--text-color);
    --bs-table-border-color: var(--card-border-color);
    --bs-table-hover-color: var(--text-color);
    --bs-table-bg: var(--bs-table-bg);
    border-color: var(--card-border-color);
  }

  .table-responsive {
    max-height: 75vh;
    scrollbar-width: none;
  }

  .table thead {
    position: sticky;
    top: 0;
    background: color-mix(in srgb, var(--main-bg) 50%, var(--glass-bg));
    z-index: 9999;
    backdrop-filter: blur(10px);
  }

  .table-responsive tbody tr:hover {
    transform: scale(1.005);
    transition: all 0.2s ease-in-out;
  }

  .table th.sortable {
    cursor: pointer;
    position: relative;
    padding-right: 20px;
  }

  .table th.sortable:hover {
    background-color: color-mix(in srgb, var(--primary-color) 10%, transparent);
  }

  .table th.sortable::after {
    content: ' \2195';
    font-size: 0.8em;
    color: #ccc;
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
  }

  .table th.sort-asc::after {
    content: ' \25B2';
    color: var(--primary-color);
  }

  .table th.sort-desc::after {
    content: ' \25BC';
    color: var(--primary-color);
  }

  .table-active {
    --bs-table-color-state: var(--text-color);
    --bs-table-bg-state: color-mix(in srgb, var(--primary-color) 35%, transparent);
  }

  #filter-row th {
    padding: 0.5rem;
  }

  .btn-action {
    padding: 0.2rem 0.5rem;
    font-size: 0.9rem;
  }

  .master-img-sm {
    /* width: 32px; */
    height: 32px;
    object-fit: cover;
    border-radius: 5px;
    margin-right: 10px;
    filter: drop-shadow(0px 1px 2px rgb(0 0 0 / 0.7));
  }

  #loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.3s;
  }

  #theme-toggle-btn {
    background: transparent;
    border: 1px solid var(--card-border-color);
    color: var(--text-muted-color);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  @media (max-width: 768px) {
    .sidebar {
      transform: translateX(calc(-1 * var(--sidebar-width)));
    }

    .sidebar.collapsed {
      transform: translateX(0);
    }

    .main-content {
      margin-left: 0;
    }

    .main-content.collapsed {
      margin-left: 0;
    }

    .header {
      display: none;
    }

    main {
      padding: 1rem;
      padding-bottom: 80px;
    }

    .sidebar-header h4 span {
      display: none;
    }
  }

  .progress {
    box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.2), inset 0 1px 3px rgba(0, 0, 0, 0.1);
  }

  /* Wizard & Tabs */
  .progress-container {
    margin-bottom: 30px;
  }

  .wizard-step {
    display: none;
  }

  .wizard-step.active {
    display: block;
    animation: fadeIn 0.5s;
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  /* --- NEW: Chip Style Tabs (for Reports, CC Details, etc.) --- */
  .nav-tabs {
    border-bottom: none;
    /* Remove default Bootstrap border */
    display: flex;
    flex-wrap: nowrap;
    /* Prevent wrapping to a new line */
    overflow-x: auto;
    /* Enable horizontal scrolling */
    gap: 0.5rem;
    /* Space between chips */
    padding-bottom: 0.5rem;
    /* Add space for the scrollbar (even if hidden) */
    padding-top: 0.5rem;
    -webkit-overflow-scrolling: touch;
    /* Smooth scrolling on iOS */
    scrollbar-width: none;
    /* Hide scrollbar for Firefox */
  }


  .nav-tabs .nav-item {
    margin-bottom: 0;
    /* Override Bootstrap's margin */
  }

  .nav-tabs .nav-link {
    border: 1px solid var(--card-border-color);
    background-color: var(--glass-bg);
    color: var(--text-muted-color);
    border-radius: 50rem;
    /* Pill shape */
    padding: 0.5rem 1.25rem;
    font-weight: 500;
    font-family: var(--font-main);
    transition: all 0.2s ease-in-out;
    white-space: nowrap;
    /* Prevent text inside the chip from wrapping */
    box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.2), inset 0 1px 3px rgba(0, 0, 0, 0.1);
  }

  /* Hover state for non-active tabs */
  .nav-tabs .nav-link:not(.active):hover {
    border-color: color-mix(in srgb, var(--primary-color) 50%, transparent);
    color: var(--primary-color);
    background-color: color-mix(in srgb, var(--primary-color) 10%, transparent);
  }

  /* Active tab style */
  .nav-tabs .nav-link.active,
  .nav-tabs .nav-item.show .nav-link {
    background-color: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
    box-shadow: 0 4px 8px color-mix(in srgb, var(--primary-color) 40%, transparent);
    transform: translateY(-2px);
  }

  /* Hide scrollbar for Chrome, Safari, and Opera */
  .nav-tabs::-webkit-scrollbar {
    display: none;
  }

  .bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100dvw;
    background-color: var(--glass-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 -2px 15px rgba(0, 0, 0, 0.1);
    justify-content: space-around;
    align-items: center;
    z-index: 1000;
    border-top: 1px solid var(--card-border-color);
    padding: 0.4rem 0.25rem;
    /* env() is dead inside Google's iframe; use a safe fixed value instead */
    padding-bottom: 0.7rem;
  }

  .bottom-nav-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    flex-grow: 1;
    transition: color 0.2s ease, opacity 0.2s ease;
    font-family: var(--font-main);
    color: var(--text-muted-color);
    opacity: 0.7;
    padding: 0.15rem 0;
    position: relative;
    min-height: 44px;
    /* Apple HIG touch target */
  }

  .bottom-nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 30px;
    border-radius: 999px;
    transition: background-color 0.25s ease, transform 0.2s ease;
    position: relative;
  }

  .bottom-nav-link i {
    font-size: 1.35rem;
  }

  .bottom-nav-link span:last-child {
    font-size: 0.65rem;
    margin-top: 1px;
  }

  @media (max-width: 768px) {
    .bottom-nav {
      display: flex;
    }

    .sidebar {
      display: none;
    }

    .header {
      display: flex;
    }
  }

  .bottom-nav-link {
    transition: all 0.2s ease-in-out;
    opacity: 0.7;
  }

  .bottom-nav-link:hover {
    color: var(--text-color) !important;
  }

  .bottom-nav-link.active {
    color: var(--primary-color) !important;
    opacity: 1;
    transform: translateY(-2px);
    /* Slightly more pop */
  }

  .bottom-nav-link.active .bottom-nav-icon {
    background: color-mix(in srgb, var(--primary-color) 16%, transparent);
    /* iOS-like spring: the pill settles softly after tapping */
    transition: background-color 0.25s ease, transform 0.35s cubic-bezier(.34, 1.56, .64, 1);
  }

  .bottom-nav-link.active i {
    filter: drop-shadow(0 3px 5px color-mix(in srgb, var(--primary-color) 40%, transparent));
  }

  /* Pull-to-refresh indicator (mobile) */
  .ptr-indicator {
    display: none;
    position: fixed;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--card-bg);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
    z-index: 1200;
    align-items: center;
    justify-content: center;
  }

  .ptr-indicator.show {
    display: flex;
  }

  .ptr-indicator i {
    font-size: 1.35rem;
    color: var(--primary-color);
    transition: transform 0.1s linear;
  }

  .ptr-indicator.spinning i {
    animation: ptr-spin 0.7s linear infinite;
  }

  @keyframes ptr-spin {
    from {
      transform: rotate(0deg);
    }

    to {
      transform: rotate(360deg);
    }
  }

  /* Offline banner: fixed at top, above everything */
  .offline-banner {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #ffc107;
    color: #212529;
    z-index: 2100;
    padding: 0.4rem 0.8rem;
    font-size: 0.85rem;
    font-weight: 600;
    box-shadow: 0 2px 12px rgba(0,0,0,0.18);
    justify-content: center;
  }
  .offline-banner.show { display: flex; }
  .offline-banner-inner {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .pending-ops-pill {
    background: #212529;
    color: #ffc107;
    border-radius: 999px;
    padding: 0 0.5rem;
    font-size: 0.72rem;
    line-height: 1.4;
    min-width: 1.5rem;
    text-align: center;
  }

  .mobile-more-menu {
    height: auto;
    max-height: min(48vh, 430px);
    border: 0;
    border-radius: 1.25rem 1.25rem 0 0;
    background: var(--card-bg);
    color: var(--text-color);
    box-shadow: 0 -0.75rem 2rem rgba(0, 0, 0, 0.2);
  }

  .mobile-more-menu .offcanvas-header {
    border-bottom: 1px solid var(--card-border-color);
  }

  .offcanvas.offcanvas-bottom {
    height: 40vh;
  }

  .mobile-more-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
  }

  .mobile-more-item {
    display: flex;
    min-height: 78px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    border: 1px solid var(--card-border-color);
    border-radius: 1rem;
    background: var(--glass-bg);
    color: var(--text-color);
    font: inherit;
    font-size: 0.78rem;
    transition: transform 0.18s ease, border-color 0.18s ease;
  }

  .mobile-more-item i {
    color: var(--primary-color);
    font-size: 1.35rem;
  }

  .mobile-more-item:active,
  .mobile-more-item:hover {
    border-color: var(--primary-color);
    transform: translateY(-2px);
  }

  @media (min-width: 769px) {
    .mobile-more-menu {
      display: none !important;
    }
  }

  /* Bento Grid Layout */
  .bento-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: minmax(50px, auto);
  }

  .bento-box {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-shadow: var(--text-shadow);
  }

  .bento-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--primary-hover-color);
    margin-bottom: 1rem;
    white-space: nowrap;
  }

  .bento-value {
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
    white-space: nowrap;
  }

  .bento-comparison {
    font-size: 0.85rem;
    font-weight: 500;
    margin-top: 0.5rem;
    margin-bottom: 0;
    opacity: 0.8;
  }

  .bento-comparison .positive {
    color: var(--income-color);
  }

  .bento-comparison .negative {
    color: var(--expense-color);
  }

  /* Grid Area Assignments */
  .bento-networth {
    grid-column: 4 / 6;
    grid-row: 3 / 5;
    background-color: color-mix(in srgb, var(--net-worth-color) 50%, #000000ed);
  }

  .bento-networth .bento-value {
    color: var(--net-worth-color);
    font-size: 1.7rem;
  }

  .bento-income {
    grid-column: 1 / 5;
    grid-row: 1 / 3;
    background-color: color-mix(in srgb, var(--income-color) 50%, #000000ed);
  }

  .bento-income .bento-value {
    color: var(--income-color);
  }

  .bento-expense {
    grid-column: 5 / 9;
    grid-row: 1 / 3;
    background-color: color-mix(in srgb, var(--expense-color) 50%, #000000ed);
  }

  .bento-expense .bento-value {
    color: var(--expense-color);
  }

  .bento-cashflow {
    grid-column: 9 / 13;
    grid-row: 1 / 3;
    background-color: color-mix(in srgb, var(--balance-color) 50%, #000000ed);
  }

  .bento-savings-rate {
    background-color: color-mix(in srgb, var(--savings-rate-color) 50%, #000000ed);
    grid-column: 4 / 6;
    grid-row: 5 / 7;
  }

  .bento-savings-rate .bento-value {
    color: var(--savings-rate-color);
  }

  .bento-top-payees {
    grid-column: 6 / 10;
    grid-row: 3 / 7;
  }

  .bento-asset-allocation {
    grid-column: 1 / 4;
    grid-row: 3 / 7;
  }

  .bento-cc-debt {
    grid-column: 10 / 13;
    grid-row: 3 / 7;
  }

  .bento-cashflow .bento-value {
    color: var(--balance-color);
    font-size: 1.7rem;
  }

  .bento-top-expenses {
    grid-column: 5 / 9;
    grid-row: 12 / 20;
  }

  .bento-monthly-summary {
    grid-column: 1 / 9;
    grid-row: 7 / 12;
  }

  .bento-balances {
    grid-column: 1 / 5;
    grid-row: 12 / 20;
  }

  .bento-recent-transactions {
    grid-column: 9 / 13;
    grid-row: 12 / 20;
  }

  .bento-budgeting {
    grid-column: 9 / 13;
    grid-row: 7 / 12;
  }

  .recent-tx-icon {
    width: 20px;
    height: 20px;
    object-fit: cover;
    border-radius: 50%;
    border: 1px solid var(--card-border-color);
    filter: drop-shadow(0px 1px 1px rgb(0 0 0 / 0.5));
  }

  .bento-calendar {
    grid-column: 1 / 13;
    grid-row: 20 / 29;
    z-index: 1;
  }

  .bento-waterfall {
    grid-column: 1 / 13;
    grid-row: 29 / 34;
  }

  /* Other bento box colors are handled inline in the HTML for simplicity now */

  /* Detail Modal */
  .detail-account-item .info .label {
    color: var(--text-muted-color);
  }

  .tag-item {
    display: inline-flex;
    align-items: center;
    background-color: color-mix(in srgb, var(--primary-color) 30%, transparent);
    color: var(--primary-color);
    padding: 0.25rem 0.75rem;
    border-radius: 50px;
    font-size: 0.85rem;
    text-decoration: none;
    transition: background-color 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2),
      0 1px 2px rgba(0, 0, 0, 0.4);
  }

  .tag-item:hover {
    background-color: color-mix(in srgb, var(--primary-color) 20%, transparent);
  }

  .tag-item-img {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 0.5rem;
  }

  #detail-accounts-info {
    display: flex;
    flex-direction: row;
    column-gap: 2rem;
    padding: 0.5rem 2rem 0.5rem 2rem;
  }

  .detail-account-item {
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .fancybox__container {
    z-index: 1060;
  }

  .drilldown-link {
    cursor: pointer;
    color: var(--text-color) !important;
    text-decoration: none !important;
  }

  .list-group-item.drilldown-link {
    cursor: pointer;
    transition: all 0.2s ease-in-out;
  }

  .list-group-item.drilldown-link:hover {
    background-color: color-mix(in srgb, var(--primary-color) 10%, transparent);
    padding-left: 1.5rem !important;
  }

  .fab {
    position: fixed;
    bottom: 80px;
    right: 20px;
    width: 60px;
    height: 60px;
    background-color: var(--primary-color);
    color: white;
    border-radius: 50%;
    border: none;
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.5);
    font-size: 2rem;
    z-index: 1030;
    cursor: pointer;
  }

  /* เพิ่ม transition ให้ปุ่มหลักเพื่อให้การเปลี่ยนแปลงนุ่มนวล */
  .fab {
    transition: all 0.3s ease;
  }

  /* New: Hide FAB on scroll down (mobile) */
  .fab.fab-hidden {
    transform: translateY(150%);
    opacity: 0;
    pointer-events: none;
    /* Prevent clicks when hidden */
  }

  /* สร้าง Keyframes สำหรับอนิเมชันกระเพื่อม โดยใช้ --primary-color */
  @keyframes pulse {
    0% {
      /* ใช้ color-mix เพื่อผสมสีหลัก 70% เข้ากับสีโปร่งใส (เทียบเท่า opacity 0.7) */
      box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary-color) 70%, transparent);
    }

    70% {
      /* จังหวะที่กระจายออกกว้างสุด ให้โปร่งใส 0% */
      box-shadow: 0 0 0 15px color-mix(in srgb, var(--primary-color) 0%, transparent);
    }

    100% {
      /* กลับมาจุดเริ่มต้นแบบโปร่งใส */
      box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary-color) 0%, transparent);
    }
  }

  /* นำมาใส่ในคลาส .fab */
  .fab {
    animation: pulse 2s infinite;
    /* เล่นอนิเมชันวนซ้ำทุก 2 วินาที */
  }

  /* เมื่อเอาเมาส์ชี้ปุ่ม */
  .fab:hover {
    transform: scale(1.1);
    /* ขยายปุ่ม 10% */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    /* เงาเข้มและกว้างขึ้น */
  }

  /* ทำให้ไอคอนหมุนเมื่อเอาเมาส์ชี้ที่ปุ่ม */
  .fab i {
    transition: transform 0.3s ease;
    display: inline-block;
  }

  .fab:hover i {
    transform: rotate(90deg);
    /* หมุนเครื่องหมายบวก 90 องศา */
  }

  .fab:active {
    transform: scale(0.95);
    /* หดปุ่มลง 5% ตอนกด */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    /* ลดเงาลงให้ดูเหมือนถูกกดติดพื้น */
  }

  /* Custom Radio Button Group */
  #transaction-type-group .btn-check:checked+.btn-outline-primary {
    color: #fff;
  }

  #transaction-type-group .btn-check[value="Expense"]:checked+.btn {
    background-color: var(--expense-color);
    border-color: var(--expense-color);
  }

  #transaction-type-group .btn-check[value="Income"]:checked+.btn {
    background-color: var(--income-color);
    border-color: var(--income-color);
  }

  #transaction-type-group .btn-check[value="Transfer"]:checked+.btn {
    background-color: var(--balance-color);
    border-color: var(--balance-color);
  }

  /* Status Indicator */
  .status-indicator {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: flex;
    align-items: center;
    background-color: var(--card-bg);
    color: var(--text-color);
    padding: 0.5rem 1rem;
    border-radius: 50px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
    z-index: 9999;
  }

  .status-indicator.show {
    opacity: 1;
    transform: translateY(0);
  }

  .status-indicator .status-icon {
    margin-right: 0.75rem;
  }

  .status-indicator .spinner-border-sm {
    width: 1rem;
    height: 1rem;
  }

  .status-indicator.success .status-icon {
    color: var(--income-color);
  }

  .status-indicator.error .status-icon {
    color: var(--expense-color);
  }

  .status-indicator.syncing .status-icon {
    color: var(--primary-color);
  }

  @media (max-width: 768px) {
    .status-indicator {
      bottom: 80px;
      /* Adjust to be above the bottom nav */
      right: 15px;
    }
  }

  /* Star Rating */
  .rating {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-evenly;
    width: 400px;
    padding-right: 1.5rem;
  }

  .rating>input {
    display: none;
  }

  .rating>label {
    position: relative;
    width: 1.2em;
    font-size: 1.8rem;
    /* ลดขนาดดาวลงเล็กน้อย */
    color: #FFD600;
    cursor: pointer;
  }

  .rating>label::before {
    content: "\2605";
    position: absolute;
    top: 0;
    /* จัดตำแหน่งให้อยู่ในขอบเขตของ label */
    opacity: 0.5;
    text-shadow: none;
    color: #6c6a61;
  }

  .rating>label:hover:before,
  .rating>label:hover~label:before,
  .rating>input:checked~label:before {
    opacity: 1;
    text-shadow: 0px 0px 2px rgb(76 79 11 / 80%);
    color: #FFD600;
  }

  /* Expense Item Progress Bar */
  .expense-item-progress {
    height: 8px;
    border-radius: 4px;
  }

  .expense-item-progress .progress-bar {
    border-radius: 4px;
  }

  .progress-bar {
    box-shadow: 1px 1px 10px #0000009e;
    border-radius: 4px;
  }


  /* File Drop Zone */
  .file-drop-zone {
    border: 2px dashed var(--card-border-color);
    border-radius: var(--border-radius);
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--text-muted-color);
  }

  .file-drop-zone:hover,
  .file-drop-zone.dragover {
    background-color: rgba(var(--primary-color), 0.1);
    border-color: var(--primary-color);
    color: var(--primary-color);
  }

  .file-drop-zone i {
    font-size: 3rem;
    display: block;
    margin-bottom: 0.5rem;
  }

  .file-preview-item {
    display: flex;
    align-items: center;
    padding: 0.5rem;
    background-color: var(--main-bg);
    border-radius: 8px;
    margin-bottom: 0.5rem;
  }

  .file-preview-item img,
  .file-preview-item i {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 4px;
    margin-right: 10px;
    flex-shrink: 0;
  }

  .file-preview-item .file-name {
    flex-grow: 1;
    font-size: 0.9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-right: 0.5rem;
    color: var(--text-muted-color);
    text-decoration: none;
  }

  .file-preview-item .file-name:hover {
    text-decoration: underline;
  }

  .file-preview-item .btn-close {
    margin-left: auto;
    flex-shrink: 0;
  }

  .form-control,
  .form-select {
    color: var(--text-color);
    background-color: var(--card-bg);
  }

  .form-control::placeholder {
    color: var(--text-muted-color);
  }

  .fc-theme-standard .fc-list-day-cushion {
    background-color: var(--card-bg);
  }

  .fc .fc-list-event:hover td {
    background-color: var(--primary-color);
  }

  /* --- Custom Financial Calendar (Grid Based) --- */
  .mywealth-calendar-card {
    border-radius: var(--bs-border-radius);
    background: var(--card-bg);
  }

  .calendar-grid-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background: rgba(0, 0, 0, 0.02);
    text-align: center;
    font-weight: bold;
    padding: 10px 0;
    border-bottom: 1px solid var(--card-border-color);
  }

  .calendar-grid-body {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-auto-rows: 1fr;
  }

  .calendar-day {
    min-height: 110px;
    padding: 8px;
    border-right: 1px solid var(--card-border-color);
    border-bottom: 1px solid var(--card-border-color);
    transition: all 0.2s ease;
    cursor: pointer;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: transparent;
  }

  .calendar-day:nth-child(7n) {
    border-right: none;
  }

  .calendar-day:hover {
    background: rgba(var(--primary-color-rgb), 0.05);
  }

  [data-mode="dark"] .calendar-day:hover {
    background: rgba(255, 255, 255, 0.03);
  }

  .calendar-day.not-current-month {
    opacity: 0.3;
    background: rgba(0, 0, 0, 0.02);
    cursor: default;
  }

  .calendar-day.is-today {
    background: color-mix(in srgb, var(--primary-color) 10%, transparent);
  }

  .calendar-day.is-today .day-number {
    background: var(--primary-color);
    color: white;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  }

  .day-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 4px;
  }

  .day-number {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text-color);
  }

  /* Financial Labels */
  .day-income {
    color: var(--income-color);
    font-size: 0.75rem;
    font-weight: bold;
    text-align: right;
  }

  .day-expense {
    color: var(--expense-color);
    font-size: 0.75rem;
    font-weight: bold;
    text-align: right;
  }

  /* Indicator Dots */
  .indicator-container {
    display: flex;
    gap: 2px;
    margin-top: auto;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
  }

  .dot-income {
    background: var(--income-color);
  }

  .dot-expense {
    background: var(--expense-color);
  }

  .dot-transfer {
    background: var(--balance-color);
  }

  /* Calendar Event Icons (per-day strip: payee/category master images) */
  .cal-event-icons {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-top: 4px;
    min-height: 20px;
  }

  .cal-event-icon {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    object-fit: cover;
    background-color: var(--card-bg);
    border: 1.5px solid var(--card-border-color);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  }

  .cal-icon-income {
    border-color: var(--income-color);
  }

  .cal-icon-expense {
    border-color: var(--expense-color);
  }

  .cal-icon-transfer {
    border-color: var(--balance-color);
  }

  .cal-icon-more {
    font-size: 0.6rem;
    font-weight: 700;
    line-height: 1;
    color: var(--primary-color);
    background-color: color-mix(in srgb, var(--primary-color) 20%, transparent);
    border-radius: 50rem;
    padding: 2px 2px;
  }

  /* Calendar Day Hover Tooltip (breakdown of the day's spending) */
  .calendar-day.active-day[data-tooltip] {
    position: relative;
  }

  .calendar-day.active-day[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 170px;
    max-width: 240px;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.88);
    color: #fff;
    font-size: 0.7rem;
    line-height: 1.5;
    white-space: pre-line;
    text-align: left;
    text-shadow: none;
    z-index: 50;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
    pointer-events: none;
  }

  /* Responsive Calendar */
  @media (max-width: 768px) {
    .calendar-day {
      min-height: 85px;
      padding: 4px;
      gap: 2px;
    }

    .day-income,
    .day-expense {
      font-size: 0.65rem;
    }

    .cal-event-icons {
      gap: 2px;
      margin-top: 2px;
      min-height: 16px;
    }

    .cal-event-icon {
      width: 12px;
      height: 12px;
    }

    .calendar-grid-header {
      font-size: 0.75rem;
    }

    .day-number {
      font-size: 0.8rem;
    }
  }

  /* Skeleton Loading */
  .skeleton-row .skeleton-text {
    height: 1.2em;
    background-color: var(--card-border-color);
    border-radius: 4px;
    animation: skeleton-loading 1.5s infinite ease-in-out;
  }

  .skeleton-box {
    background-color: var(--card-border-color);
    border-radius: var(--border-radius);
    animation: skeleton-loading 1.5s infinite ease-in-out;
  }

  .summary-card.skeleton .skeleton-text {
    height: 1.2em;
    background-color: var(--card-border-color);
    border-radius: 4px;
    animation: skeleton-loading 1.5s infinite ease-in-out;
  }

  .skeleton-row td:nth-child(1) .skeleton-text {
    width: 60%;
  }

  .skeleton-row td:nth-child(2) .skeleton-text {
    width: 90%;
  }

  .skeleton-row td:nth-child(3) .skeleton-text {
    width: 50%;
    float: right;
  }

  .summary-card.skeleton .skeleton-text.short {
    width: 40%;
    margin-bottom: 0.75rem;
    height: 1em;
  }

  .summary-card.skeleton .skeleton-text.long {
    width: 70%;
  }


  @keyframes skeleton-loading {
    0% {
      opacity: 0.6;
    }

    50% {
      opacity: 1;
    }

    100% {
      opacity: 0.6;
    }
  }

  .select2-container--bootstrap-5 .select2-selection {
    min-height: calc(2em + .75rem + 2px);
  }

  .select2-container--bootstrap-5 .select2-selection {
    background-color: var(--glass-bg) !important;
    border: 1px solid var(--card-border-color) !important;
    color: var(--text-color) !important;
    border-radius: 25px !important;
    box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.2), inset 0 1px 3px rgba(0, 0, 0, 0.1);
  }

  .select2-container--bootstrap-5 .select2-selection__rendered,
  .select2-container--bootstrap-5 .select2-search__field {
    color: var(--text-color) !important;
  }

  .select2-container--bootstrap-5 .select2-dropdown {
    background-color: var(--main-bg) !important;
    border: 1px solid var(--card-border-color) !important;
    box-shadow: var(--shadow) !important;
    z-index: 9999 !important;
    /* Increased for mobile stability */
  }

  /* --- Select2 Mobile & Bottom Sheet Fixes --- */
  .select2-container--open {
    z-index: 2001 !important;
  }

  .select2-container--bootstrap-5 .select2-selection {
    font-size: 16px !important;
    /* Prevents auto-zoom on iOS */
  }

  .select2-results__options {
    -webkit-overflow-scrolling: touch;
  }

  .select2-results__option {
    color: var(--text-color) !important;
  }

  .select2-results__option--highlighted {
    background-color: var(--primary-color) !important;
    color: #fff !important;
  }

  .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice {
    background-color: var(--primary-color) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 2.5rem !important;
  }

  .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove {
    color: #fff !important;
  }

  /* Credit Card Detail Redesign */
  .cc-summary-highlight-card {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover-color));
    color: white;
    border-radius: var(--border-radius);
    padding: 1.5rem;
    box-shadow: var(--shadow);
  }

  .cc-summary-highlight-card .label {
    opacity: 0.8;
    font-size: 0.9rem;
  }

  .cc-summary-highlight-card .amount {
    font-size: 2.5rem;
    font-weight: 700;
  }

  .cc-limit-progress {
    height: 10px;
    border-radius: 5px;
  }

  .cc-limit-progress .progress-bar {
    border-radius: 5px;
  }

  .padding-text-table {
    padding-left: 42px;
  }

  /* Mobile Transaction List Redesign */
  @media (max-width: 767.98px) {

    /* --- NEW: Base font size for mobile --- */
    body {
      font-size: 14px;
      /* Fallback */
      font-size: clamp(13px, 4.5vw, 15px);
      /* Fluid, native-app-like 13-15px on phones */
    }

    /* Keep the Lottie splash from filling small screens */
    #lottie-loading {
      width: min(300px, 55vw) !important;
      height: min(300px, 55vw) !important;
    }

    /* iOS auto-zoom prevention: any focused control must be >=16px,
       otherwise Safari zooms into the field on tap (we lowered body
       font below 16px, which 1rem-based form controls inherit). */
    input, select, textarea, .flatpickr-input {
      font-size: 16px !important;
    }
    /* Stop iOS text inflation on rotation / pinch */
    html, body {
      -webkit-text-size-adjust: 100%;
      text-size-adjust: 100%;
    }

    :root {
      /* This doesn't work inside media query, but keeping for context */
      --header-height: 30px;
    }

    h5 {
      font-size: 1.1rem;
      padding: 0.5rem;
    }

    .table-responsive {
      font-size: 0.7rem;
      max-height: calc(96vh - 6rem) !important
    }

    .padding-text-table {
      padding-left: 15px;
    }

    #drilldown-modal .master-img-sm,
    #ld-repayment-history-body .master-img-sm {
      height: 14px;
      margin-right: 1px;
    }

    #transactions-view .table-responsive {
      display: none;
      /* Hide the table on mobile */
    }

    #mobile-transaction-list {
      display: block !important;
      /* Show the new card list on mobile */
    }

    /* --- NEW: Full-Screen Modals on Mobile --- */
    .modal {
      padding: 0 !important;
      /* Override Bootstrap's default padding */
    }

    .modal-dialog {
      width: 100%;
      max-width: 100%;
      height: 100dvh;
      /* Use dynamic viewport height for better mobile support */
      max-height: 100dvh;
      margin: 0;
    }

    .modal-content {
      height: 100%;
      border-radius: 0;
      border: none;
      box-shadow: none;
      display: flex;
      /* Ensure flex layout for body scrolling */
      flex-direction: column;
    }

    .modal-body {
      overflow-y: auto;
      /* Make only the body scrollable */
      flex-grow: 1;
      /* Allow body to take up remaining space */
      padding: 0.2rem;
    }

    #transaction-detail-modal .modal-footer,
    #transaction-detail-modal .modal-header {
      box-shadow: 0px 1px 10px 0px #0000007a;
    }

    .card {
      --bs-card-spacer-y: 0.1rem;
      --bs-card-spacer-x: 0.1rem;
    }

    .container-fluid {
      padding: 0.1rem;
      width: 100dvw;
      margin: 0 auto;
      overflow-x: hidden;
      margin-bottom: 65px;
      max-width: 100%;
    }

    /* --- REFINED: iOS-like Transaction Card --- */
    .tx-card-wrap {
      position: relative;
      overflow: hidden;
      border-radius: var(--border-radius);
      margin-bottom: 1rem;
    }

    .tx-card {
      background-color: var(--card-bg);
      border: 1px solid var(--card-border-color);
      border-radius: var(--border-radius);
      padding: 0.8rem 1rem;
      /* Adjusted padding */
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
      /* More subtle shadow */
      cursor: pointer;
      transition: transform 0.22s cubic-bezier(.34, 1.56, .64, 1);
      color: var(--text-color);
      position: relative;
      z-index: 1;
      touch-action: pan-y;
    }

    .tx-card:active {
      transform: scale(0.98);
    }

    /* Revealed behind the card while swiping (left = edit, right = delete) */
    .tx-card-action {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 82px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0.25rem;
      color: #fff;
      font-size: 0.7rem;
      font-weight: 600;
      visibility: hidden;
      transition: visibility 0s 0.25s;
      border-radius: var(--border-radius);
    }

    .tx-card-action i {
      font-size: 1.2rem;
    }

    .tx-card-edit-action {
      right: 0;
      background: linear-gradient(180deg, #4d90fe, #0d6efd);
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }

    .tx-card-delete-action {
      left: 0;
      background: linear-gradient(180deg, #f87272, #dc3545);
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }

    .tx-card-wrap.swiping .tx-card-action {
      visibility: visible;
      transition: none;
    }

    .tx-card-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 0.75rem;
    }

    /* Main item name (Payee/Description) */
    .tx-card-main {
      font-size: 1rem;
      /* Slightly smaller */
      font-weight: 600;
      align-items: flex-start;
      margin-bottom: 0.25rem;
      flex-direction: column;
    }

    .tx-card-main .master-img-sm,
    #pl-drilldown-transaction-list .master-img-sm,
    #tag-drilldown-transaction-list .master-img-sm,
    .pivot-drilldown-row .master-img-sm {
      width: 28px;
      height: 28px;
    }

    /* Sub-description text */
    .tx-card-description {
      font-size: 0.85rem;
      color: var(--text-muted-color);
      padding-left: 38px;
      /* Align with text in tx-card-main */
    }

    /* Tags container */
    .tx-card-tags {
      padding-left: 38px;
      /* Align with description */
      margin-top: 0.5rem;
    }

    .tx-tag-img-mobile {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      object-fit: cover;
      margin-right: 4px;
      vertical-align: middle;
    }

    /* Footer with account info and actions */
    .tx-card-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 1rem;
      padding-top: 0.75rem;
      border-top: 1px solid var(--card-border-color);
    }

    .tx-card-footer .account-info {
      font-size: 0.75rem;
    }

    .bento-box {
      padding: 0.2rem !important;
      padding-bottom: 1rem !important;
    }

    /* Responsive Bento Grid */
    .bento-grid {
      /* เปลี่ยนจาก 1fr เป็น 2 คอลัมน์แบ่งครึ่งเท่าๆ กัน */
      grid-template-columns: repeat(2, 1fr) !important;
      grid-template-rows: auto;
    }

    /* ปล่อยให้ 4 กล่องบนจัดเรียงอัตโนมัติ (มันจะสลับซ้าย-ขวา กลายเป็น 2x2 เอง) */
    .bento-networth,
    .bento-income,
    .bento-expense,
    .bento-savings-rate,
    .bento-asset-allocation,
    .bento-cc-debt {
      grid-column: auto;
      grid-row: auto;
    }

    .bento-top-payees,
    .bento-cashflow {
      grid-column: 1 / 3;
      grid-row: auto;
    }

    /* สำหรับกล่องข้อมูลอื่นๆ ด้านล่าง ถ้าอยากให้มันกว้างเต็มจอ (ไม่โดนบีบเป็น 2 ช่อง) ให้ตั้งค่าแบบนี้ครับ */
    .bento-balances,
    .bento-top-expenses,
    .bento-recent-transactions,
    .bento-monthly-summary,
    .bento-calendar,
    .bento-waterfall,
    .bento-budgeting {
      grid-column: 1 / -1;
      /* สั่งให้กินพื้นที่ตั้งแต่คอลัมน์แรกสุดไปจนถึงท้ายสุด */
      grid-row: auto;
    }

    .bento-value {
      font-size: 1.5rem;
      /* Make values in bento a bit bigger */
      text-align: center;
    }

    /* New: Hide text in drilldown modal on mobile */
    #drilldown-modal .drilldown-item-name {
      display: none;
    }

    #drilldown-modal .tx-tag-img {
      width: 14px;
      height: 14px;
    }

    #drilldown-modal .modal-title {
      font-size: 0.8rem;
    }

    .fs-5 {
      font-size: 0.8rem !important;
    }

    .pivot-row-toggle {
      font-size: 1.2rem;
    }

    #sidebar-toggle {
      display: none;
    }

    .theme-option {
      width: 110px;
    }
  }

  /* Investment Portfolio Styles */
  .pl-positive {
    color: var(--income-color) !important;
  }

  .pl-negative {
    color: var(--expense-color) !important;
  }

  .apexcharts-legend-text {
    color: var(--text-color) !important;
  }

  .tx-tag-img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 2px;
    border: 1px solid var(--card-border-color);
  }

  .tx-tag-more {
    display: inline-block;
    width: 24px;
    height: 24px;
    line-height: 22px;
    border-radius: 50%;
    background-color: var(--card-border-color);
    color: var(--text-muted-color);
    font-size: 0.7rem;
    text-align: center;
    vertical-align: middle;
  }

  /* Keep the report card within the viewport while allowing many periods to scroll. */
  #pivot-table-container {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: visible;
    overscroll-behavior-x: contain;
  }

  #reports-view,
  #reports-view>.data-card,
  #reports-view .card-body,
  #report-tabs-content,
  #pivot-content {
    min-width: 0;
    max-width: 100%;
  }

  #pivot-content {
    overflow: hidden;
  }

  #pivot-table-container .pivot-report-table {
    width: max-content;
    min-width: 100%;
    table-layout: fixed;
    white-space: nowrap;
  }

  #pivot-table-container .pivot-label-cell {
    position: sticky;
    left: 0;
    z-index: 2;
    width: 250px;
    min-width: 250px;
    max-width: 250px;
    background-color: var(--card-bg);
    box-shadow: 4px 0 8px -6px rgba(0, 0, 0, 0.35);
  }

  #pivot-table-container thead .pivot-label-cell {
    z-index: 4;
  }

  #pivot-table-container tfoot .pivot-label-cell {
    z-index: 3;
  }

  @media (max-width: 768px) {
    #pivot-table-container .pivot-label-cell {
      width: 180px;
      min-width: 180px;
      max-width: 180px;
    }
  }

  /* ===============================================================
     Responsive Bento Grid & Layout - Tablet / iPad (768px - 1200px)
     =============================================================== */
  @media (max-width: 1200px) and (min-width: 768px) {

    /* 1. จัดสัดส่วนความกว้างกล่อง Muuri สำหรับจอ iPad / Tablet (2 คอลัมน์สมดุล) */
    .bento-w-2,
    .bento-w-3 {
      width: 50% !important;
      /* การ์ด 5 ใบแรก (รายรับ, รายจ่าย ฯลฯ) จัดเรียง 2 คอลัมน์ */
    }

    .bento-w-4 {
      width: 50% !important;
      /* ชาร์ต/ตารางขนาดกลางแบ่งครึ่งจอ */
    }

    .bento-w-6,
    .bento-w-8,
    .bento-w-9,
    .bento-w-12 {
      width: 100% !important;
      /* กราฟแท่ง/ปฏิทิน/Waterfall กินเต็มแถว */
    }

    /* 2. ปรับความสูงของกล่องให้พอดีกับสัดส่วน iPad */
    .bento-h-sm {
      height: 160px;
    }

    .bento-h-ms {
      height: 260px;
    }

    .bento-h-md {
      height: 360px;
    }

    .bento-h-lg {
      height: 460px;
    }

    .bento-h-lgx {
      height: 600px;
    }

    /* 3. คืนค่า Modal บน iPad ให้เป็น Pop-up สวยงามตรงกลาง (ไม่ใช่ Full Screen แบบมือถือ) */
    .modal {
      padding: 1.5rem !important;
    }

    .modal-dialog {
      width: auto !important;
      max-width: 650px !important;
      height: auto !important;
      max-height: 90vh !important;
      margin: 1.75rem auto !important;
      display: block !important;
    }

    .modal-content {
      height: auto !important;
      border-radius: var(--border-radius) !important;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3) !important;
      border: 1px solid var(--card-border-color) !important;
    }

    .modal-body {
      overflow-y: auto;
      max-height: calc(90vh - 130px);
      padding: 1.25rem !important;
    }
  }

  /* New: Styles for Cash Flow Waterfall Tooltip */
  .waterfall-total {
    color: var(--primary-color);
  }

  .waterfall-positive {
    color: var(--income-color);
  }

  .waterfall-negative {
    color: var(--expense-color);
  }

  .fancybox__container {
    z-index: 1090;
  }

  .img-fluid {
    max-width: 100%;
    object-fit: cover;
    width: 300px;
    height: 300px;
    border: 1px solid var(--card-border-color);
    border-radius: 8px;
    overflow: hidden;
    background-color: var(--main-bg);
  }

  .btn {
    /* color: var(--text-muted-color); */
    text-shadow: var(--text-shadow);
    box-shadow: var(--box-shadow)
      /* border: 1px solid var(--card-border-color); */
  }

  /* New: Button Loading State */
  .btn-loading {
    position: relative !important;
    cursor: wait !important;
    color: transparent !important;
    /* Hide original text/icon color */
    text-shadow: none !important;
    pointer-events: none;
    /* Prevent further clicks while loading */
  }

  .btn-loading>* {
    visibility: hidden;
    /* Hide original content like text and icons */
  }

  .btn-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.2rem;
    /* Adjust spinner size as needed */
    height: 1.2rem;
    margin-top: -0.6rem;
    margin-left: -0.6rem;
    border: 2px solid var(--bs-btn-color);
    /* Use button's text color for spinner */
    border-right-color: transparent;
    border-radius: 50%;
    animation: btn-spinner 0.75s linear infinite;
  }

  @keyframes btn-spinner {
    to {
      transform: rotate(360deg);
    }
  }

  .inset-card-style {
    background-color: var(--main-bg);
    /* ใช้ inset ร่วมกับเงา 2 ชั้น เพื่อให้มิติความลึกดูสมจริงและนุ่มนวลขึ้น */
    box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.2),
      inset 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--card-border-color);
  }

  /* --- Native Mobile Feel Enhancements --- */
  @media (max-width: 768px) {
    .modal-dialog {
      margin: 0;
      display: flex;
      align-items: flex-end;
      /* Bottom Sheet style */
      min-height: 100%;
    }

    .modal-content {
      border-radius: 25px 25px 0 0 !important;
      /* Rounded top corners only */
      max-height: 94vh;
      border: none;
      box-shadow: 0 -5px 25px rgba(0, 0, 0, 0.2);
    }

    /* Handle bar at the top of bottom sheet */
    .modal-content::before {
      content: "";
      width: 40px;
      height: 4px;
      background: rgba(var(--text-muted-color), 0.3);
      background-color: #ccc;
      border-radius: 10px;
      position: absolute;
      top: 10px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 10;
    }

    .modal-header {
      padding-top: 1.5rem !important;
    }
  }

  /* Smooth View Transitions */
  #main-view-container {
    position: relative;
    /* overflow-x: hidden; */
    min-height: calc(100vh - 120px);
  }

  .main-view {
    width: 100%;
  }

  /* Budgeting Progress Bar - Premium Style */
  .budget-item {
    transition: all 0.3s ease;
    border-radius: 12px;
    padding: 8px;
  }

  .budget-item:hover {
    background-color: var(--glass-bg);
    transform: translateX(5px);
  }

  .budget-icon-wrapper {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    /* background: var(--card-bg); */
    box-shadow: var(--shadow);
    /* border: 1px solid var(--card-border-color); */
  }

  .budget-icon-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .budget-progress-container {
    height: 8px;
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 10px;
    margin-top: 6px;
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
  }

  .budget-progress-bar {
    height: 100%;
    border-radius: 10px;
    position: relative;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }

  /* Glow effects for warnings */
  .bg-glow-danger {
    background: linear-gradient(90deg, #ff4c51, #ff8a8d);
    box-shadow: 0 0 12px rgba(255, 76, 81, 0.4);
  }

  .bg-glow-warning {
    background: linear-gradient(90deg, #ffab00, #ffcf52);
    box-shadow: 0 0 12px rgba(255, 171, 0, 0.3);
  }

  .bg-glow-success {
    background: linear-gradient(90deg, #56ca00, #8df142);
    box-shadow: 0 0 12px rgba(86, 202, 0, 0.3);
  }

  /* Year in Review Enhancement */
  .comparison-card {
    border-left: 5px solid var(--primary-color);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }

  .comparison-card:hover {
    transform: scale(1.02);
  }

  #yearly-comparison-view .yearly-kpi-card {
    min-height: 104px;
    border-top: 3px solid var(--primary-color);
  }

  #yearly-comparison-view .yearly-cashflow-kpis .yearly-kpi-card {
    border-top-color: var(--balance-color);
  }

  #yearly-comparison-view .yearly-kpi-card h3,
  #yearly-comparison-view .yearly-kpi-card h4 {
    margin-bottom: 0;
    word-break: break-word;
  }

  #yearly-comparison-view .table-responsive {
    -webkit-overflow-scrolling: touch;
  }

  @media (prefers-reduced-motion: reduce) {

    #yearly-comparison-view .comparison-card,
    #yearly-comparison-view .yearly-kpi-card {
      transition: none;
    }
  }

  /* Disable selection for native app feel */
  body {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    overscroll-behavior-y: none;
    /* No bounce/chaining outside the app container */
  }

  /* Kill the 300ms tap delay / double-tap zoom on interactive elements (native feel) */
  html,
  body,
  button,
  a,
  label,
  input,
  select,
  textarea,
  .bottom-nav-link,
  .list-group-item,
  .btn,
  .nav-link,
  .table {
    touch-action: manipulation;
    -ms-touch-action: manipulation;
  }

  /* The swipeable transaction cards handle horizontal gestures themselves
     while still letting the page scroll vertically */
  .tx-card-wrap {
    touch-action: pan-y;
  }

  input,
  textarea,
  [contenteditable="true"] {
    -webkit-user-select: text;
    user-select: text;
  }

  .form-check-input {
    box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.2),
      inset 0 1px 3px rgba(0, 0, 0, 0.1);
  }

  /* เพิ่มเติมใน Style.html */
  #drilldown-modal .table-responsive {
    -webkit-overflow-scrolling: touch;
    /* สำหรับความลื่นไหลบน iOS */
  }

  #drilldown-modal thead th {
    position: sticky;
    top: 0;
    background-color: var(--glass-bg) !important;
    box-shadow: 0 1px 0 var(--card-border-color);
    z-index: 10;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  #drilldown-modal tfoot td {
    position: sticky;
    bottom: 0;
    background-color: var(--glass-bg) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 2px solid var(--card-border-color) !important;
    z-index: 10;
  }

  /* ป้องกันแถวตารางกระพริบตอนทยอยเรนเดอร์ */
  .drilldown-item {
    animation: fadeIn 0.3s ease-in-out;
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(5px);
    }

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

  /* --- Muuri Dashboard Grid --- */
  .bento-grid {
    position: relative;
    display: block;
    margin-bottom: 3rem;
    min-height: 500px;
  }

  .bento-box {
    position: absolute;
    z-index: 1;
    padding: 10px;
    /* ระยะห่างระหว่างกล่อง */
  }

  .bento-content {
    position: relative;
    width: 100%;
    height: 100%;
    backdrop-filter: var(--blur);
    box-shadow: var(--box-shadow);
    /* Managed by Muuri */
  }

  .bento-box.muuri-item-dragging {
    z-index: 1000;
  }

  .bento-box.muuri-item-dragging .card {
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5) !important;
    cursor: grabbing;
    transform: scale(1.02);
  }

  /* คอลัมน์ (12-column system) */
  .bento-w-2 {
    width: 16.66%;
  }

  .bento-w-3 {
    width: 20%;
  }

  .bento-w-4 {
    width: 33.333%;
  }

  .bento-w-6 {
    width: 50%;
  }

  .bento-w-8 {
    width: 66.666%;
  }

  .bento-w-9 {
    width: 75%;
  }

  .bento-w-12 {
    width: 100%;
  }

  /* ความสูง (ปรับให้เหมาะสมกับเนื้อหา) */
  .bento-h-sm {
    height: 180px;
  }

  .bento-h-ms {
    height: 280px;
  }

  .bento-h-md {
    height: 380px;
  }

  .bento-h-lg {
    height: 500px;
  }

  .bento-h-lgx {
    height: 750px;
  }

  .bento-h-xl {
    height: 900px;
  }

  @media (max-width: 768px) {
    .bento-box {
      /* width: 100% !important; */
      /* position: relative !important; */
      /* left: 0 !important; */
      /* top: 0 !important; */
      /* height: auto !important; */
      /* transform: none !important; */
    }

    .bento-grid {
      /* display: flex !important; */
      /* flex-direction: column; */
      /* height: auto !important; */
      gap: 0.25rem;
    }

    .bento-w-2,
    .bento-w-3 {
      width: 50% !important;
      /* การ์ด 5 ใบแรก (รายรับ, รายจ่าย ฯลฯ) จัดเรียง 2 คอลัมน์ */
    }

    .bento-w-4 {
      width: 100% !important;
      /* ชาร์ต/ตารางขนาดกลางแบ่งครึ่งจอ */
    }

    .bento-w-6,
    .bento-w-8,
    .bento-w-9,
    .bento-w-12 {
      width: 100% !important;
      /* กราฟแท่ง/ปฏิทิน/Waterfall กินเต็มแถว */
    }

    .bento-h-sm {
      height: auto;
      min-height: 100px;
    }

    .bento-h-ms {
      height: auto;
      min-height: 260px;
    }

    .bento-h-md {
      height: auto;
      min-height: 320px;
    }

    .bento-h-lg {
      height: auto;
      min-height: 460px;
    }

    .bento-h-lgx {
      height: auto;
      min-height: 500px;
    }
    
    .bento-h-xl {
      height: auto;
    }
    
    .calendar-grid-body {
      grid-auto-rows: 80px;
    }
  }

  /* --- Vanilla Tilt 3D & Parallax Layering --- */
  .tilt-card,
  .tilt-card.card,
  .tilt-card .card-body {
    transform-style: preserve-3d !important;
  }

  .tilt-card {
    perspective: 1000px !important;
    /* เพิ่มความลึกของมิติการมองเห็น */
    will-change: transform;
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
    overflow: visible !important;
    /* สำคัญ: เพื่อให้เลเยอร์พุ่งออกมานอกขอบได้ */
    backdrop-filter: none !important;
    /* สำคัญมาก: backdrop-filter จะทำให้ preserve-3d ใช้งานไม่ได้ */
    -webkit-backdrop-filter: none !important;
    border-radius: var(--border-radius);
  }

  .tilt-card .card-body {
    overflow: visible !important;
    transform-style: preserve-3d !important;
  }

  .tilt-card:hover {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.45) !important;
  }

  /* เลเยอร์ 1: หัวข้อ + เปอร์เซ็นต์ ลอยขึ้นมา 40px */
  .tilt-card .tilt-depth-sm,
  .tilt-card .bento-title,
  .tilt-card .bento-comparison {
    transform: translateZ(10px) !important;
    display: inline-block;
    transition: transform 0.25s ease-out;
    transform-style: preserve-3d !important;
    /* รองรับไอคอนที่อยู่ข้างใน */
    /* filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.5)); */
  }

  /* เลเยอร์ 2: ไอคอน ลอยขึ้นมา 65px (ต้องพุ่งกว่าข้อความ) */
  .tilt-card .apexcharts-canvas,
  .tilt-card img {
    display: inline-block;
    transform: translateZ(40px) !important;
    filter: drop-shadow(0 18px 35px rgba(0, 0, 0, 0.4));
    transition: transform 0.25s ease-out;
  }

  /* เลเยอร์ 3: ตัวเลขยอดเงิน ลอยพุ่งขึ้นมา 90px พร้อมเงาตกกระทบที่ชัดมาก */
  .tilt-card .tilt-depth-md,
  .tilt-card .bento-value,
  .tilt-card .bento-title i,
  .tilt-card .card-title i {
    transform: translateZ(20px) !important;
    display: inline-block;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.4));
    transition: transform 0.25s ease-out;
    /* font-size: 2.2rem !important; /* ขยายตัวเลขให้เด่นขึ้น */
  }

  .tilt-card .tilt-depth-lg {
    transform: translateZ(30px) !important;
    display: inline-block;
    filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.4));
    transition: transform 0.25s ease-out;
  }

  /* Glare container & inner border-radius inheritance */
  .js-tilt-glare {
    border-radius: inherit !important;
    overflow: hidden !important;
  }

  .js-tilt-glare-inner {
    border-radius: inherit !important;
  }

  /* Disable tilt transforms on touch/mobile devices for native touch behavior */
  @media (hover: none) and (pointer: coarse) and (max-width: 1200px) {
    /* Motion/rasterization on touch: naive transforms during a press
       re-rasterize text and make Thai glyphs look blurry. Kill them. */
    .tilt-card {
      transform: none !important;
      perspective: none !important;
    }

    .tilt-card .tilt-depth-sm,
    .tilt-card .tilt-depth-md,
    .tilt-card .tilt-depth-lg {
      transform: none !important;
    }

    .tx-card:active {
      transform: none !important;
    }

    .bottom-nav-link.active {
      transform: none;
    }

    .bottom-nav-link.active .bottom-nav-icon {
      transform: none;
    }
  }

  .map-report-card {
    min-height: calc(100vh - 8rem);
  }

  .map-report-layout {
    display: grid;
    grid-template-columns: minmax(260px, 34%) minmax(0, 1fr);
    gap: 1rem;
    min-height: 62vh;
    height: calc(100vh - var(--header-height) - 14rem);
  }

  .map-report-list-panel,
  .map-report-map-panel {
    min-width: 0;
    border: 1px solid var(--card-border-color);
    border-radius: var(--bs-border-radius);
    background: var(--card-bg);
  }

  .map-report-list-panel {
    padding: .75rem;
    max-height: 100%;
    overflow-y: auto;
  }

  .map-report-map-panel {
    position: relative;
    min-height: 420px;
    max-height: 100%;
    overflow: hidden;
  }

  #map-report-map {
    width: 100%;
    height: 100%;
    min-height: 420px;
  }

  .map-report-legend {
    position: absolute;
    bottom: 10px;
    left: 10px;
    z-index: 450;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    padding: 6px 10px;
    border-radius: 10px;
    background: var(--glass-bg);
    border: 1px solid var(--card-border-color);
    box-shadow: 0 1px 6px rgba(0, 0, 0, .15);
    font-size: .72rem;
    color: var(--text-color);
    pointer-events: none;
  }

  .map-report-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
  }

  .map-report-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--card-bg);
    color: var(--text-muted-color);
    z-index: 500;
  }

  .yearly-heatmap-grid {
    display: grid;
    grid-template-columns: repeat(31, minmax(5px, 1fr));
    grid-auto-rows: 12px;
    gap: 3px;
    max-height: 190px;
    overflow: hidden;
  }

  .yearly-heat-cell {
    display: block;
    border-radius: 3px;
    background: rgba(133, 146, 163, 0.2);
  }

  .yearly-heat-cell.level-1 {
    background: rgba(255, 62, 29, 0.25);
  }

  .yearly-heat-cell.level-2 {
    background: rgba(255, 62, 29, 0.45);
  }

  .yearly-heat-cell.level-3 {
    background: rgba(255, 62, 29, 0.7);
  }

  .yearly-heat-cell.level-4 {
    background: rgba(255, 62, 29, 0.95);
  }

  .report-filter-row .form-label {
    margin-bottom: 0.45rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-muted-color);
  }

  .report-filter-row .btn {
    min-height: 42px;
    border-radius: 0.85rem;
    font-weight: 700;
  }

  .date-range-presets {
    flex: 0 0 auto;
    align-items: center;
    padding: 0 0.45rem 0 0.2rem;
    margin: 0;
    white-space: nowrap;
  }

  #dashboard-view .date-range-presets {
    background-color: var(--main-bg);
    box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.2), inset 0 1px 3px rgba(0, 0, 0, 0.1);
  }

  .date-range-presets button {
    border-radius: 999px;
    padding: 0.25rem 0.55rem !important;
    color: var(--text-color) !important;
    background: var(--glass-bg);
    font-size: 0.72rem;
    line-height: 1.2;
    transition: all 0.18s ease;
    background-color: var(--main-bg);
    /* ใช้ inset ร่วมกับเงา 2 ชั้น เพื่อให้มิติความลึกดูสมจริงและนุ่มนวลขึ้น */
    box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.2),
      inset 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--card-border-color);
  }

  .date-range-host:not(.input-group) {
    display: flex;
    align-items: center;
    gap: 0.35rem;
  }

  .date-range-host:not(.input-group)>input {
    flex: 1 1 auto;
    min-width: 0;
  }

  .date-range-host:not(.input-group) .date-range-presets {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .date-range-host:not(.input-group) .date-range-presets::-webkit-scrollbar {
    display: none;
  }

  .date-range-host.input-group>input {
    min-width: 0;
  }

  .date-range-host.input-group .flatpickr-input {
    min-width: 0;
  }

  .date-range-host.input-group .date-range-presets {
    order: 2;
  }

  .date-range-host.input-group>button {
    order: 3;
  }

  .date-range-presets button:hover,
  .date-range-presets button:focus-visible {
    color: var(--primary-color) !important;
    border-color: var(--primary-color);
    background: rgba(105, 108, 255, 0.1);
    transform: translateY(-1px);
  }

  .flatpickr-calendar .flatpickr-monthSelect-months {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.35rem;
    padding: 0.35rem;
  }

  .flatpickr-calendar {
    z-index: 1100;
  }

  .flatpickr-calendar:has(.flatpickr-monthSelect-months) {
    width: 280px;
    padding: 0.45rem;
    border: 1px solid var(--card-border-color);
    border-radius: 1rem;
    box-shadow: 0 0.75rem 2rem rgba(67, 89, 113, 0.2);
    background: var(--card-bg);
  }

  .flatpickr-calendar.monthSelect .flatpickr-months {
    margin-bottom: 0.35rem;
  }

  .flatpickr-calendar .flatpickr-monthSelect-month {
    display: block;
    width: auto;
    height: 34px;
    line-height: 34px;
    border-radius: 0.65rem;
    color: var(--text-color);
    font-size: 0.78rem;
    transition: all 0.15s ease;
  }

  .flatpickr-calendar.monthSelect .flatpickr-monthSelect-month:hover,
  .flatpickr-calendar.monthSelect .flatpickr-monthSelect-month.selected {
    color: #fff;
    background: var(--primary-color);
  }

  @media (max-width: 767.98px) {
    #date-range-picker {
      flex: 1 0 100%;
      width: 100%;
      max-width: 100%;
    }

    .date-range-host.input-group:has(#date-range-picker) .altInput {
      grid-column: 1 / -1;
      width: 100%;
      min-width: 0;
    }

    #date-range-picker~.date-range-presets {
      flex: 1 1 auto;
      order: 2;
    }

    #date-range-picker~button {
      order: 3;
    }

    .date-range-host.input-group:has(#date-range-picker) {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto auto;
      flex-wrap: unset;
    }

    .report-filter-row .btn {
      margin-top: 0.25rem;
    }

    .date-range-host:not(.input-group) {
      display: block;
    }

    .date-range-host:not(.input-group) .date-range-presets {
      margin-top: 0.35rem;
      padding-left: 0;
    }
  }

  @media (max-width: 1200px) {
    .date-range-host .date-range-presets {
      display: none !important;
    }
  }



  .map-report-item {
    display: flex;
    align-items: center;
    gap: .7rem;
    cursor: pointer;
    border: 1px solid var(--card-border-color);
    border-radius: .75rem;
    padding: .65rem;
    margin-bottom: .5rem;
    transition: border-color .2s ease, background-color .2s ease;
  }

  .map-report-item-image {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    object-fit: cover;
    border-radius: 12px;
    border: 1px solid var(--card-border-color);
    background: var(--glass-bg);
  }

  .map-report-item-body {
    min-width: 0;
    flex: 1;
  }

  .map-report-item-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    font-size: .72rem;
  }

  .map-report-item-date,
  .map-report-item-meta {
    color: var(--text-muted-color);
  }

  .map-report-item-type {
    color: var(--primary-color);
    font-weight: 700;
  }

  .map-report-item-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 700;
  }

  .map-report-item-meta {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .78rem;
  }

  .map-report-item-amount {
    color: var(--primary-color);
    font-size: .85rem;
    font-weight: 800;
  }

  .map-report-info-card {
    min-width: 220px;
    padding: .25rem .15rem;
    color: #202124;
    font-family: var(--font-main);
  }

  .map-report-tag-images {
    display: flex;
    gap: 3px;
    margin-top: 3px;
  }

  .map-report-tag-image {
    width: 18px;
    height: 18px;
    object-fit: cover;
    border-radius: 50%;
    border: 1px solid var(--card-border-color);
  }

  .map-report-info-card * {
    box-sizing: border-box;
  }

  .map-report-info-details-btn {
    width: 100%;
    margin-top: 10px;
    padding: 7px 10px;
    border: 0;
    border-radius: 8px;
    background: var(--primary-color);
    color: #fff;
    font: inherit;
    cursor: pointer;
  }

  .map-report-info-details-btn:hover {
    filter: brightness(0.92);
  }

  .map-report-info-header {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-bottom: .55rem;
  }

  .map-report-info-header img {
    width: 42px;
    height: 42px;
    object-fit: cover;
    border-radius: 11px;
  }

  .map-report-info-date {
    color: #6b7280;
    font-size: .78rem;
  }

  .map-report-info-type {
    color: #2563eb;
    font-size: .78rem;
    font-weight: 700;
  }

  .map-report-info-title {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
  }

  .map-report-info-meta {
    color: #6b7280;
    font-size: .8rem;
    margin-top: .2rem;
  }

  .map-report-info-amount {
    color: #2563eb;
    font-size: 1.05rem;
    font-weight: 800;
    margin-top: .35rem;
  }

  .map-report-item:hover,
  .map-report-item.active {
    border-color: var(--primary-color);
    background: var(--glass-bg);
  }

  @media (max-width: 900px) {
    .map-report-layout {
      grid-template-columns: 1fr;
    }

    .map-report-list-panel {
      height: 35vh;
    }
  }

  /* ===============================================================
     มือถือ (≤767.98px): ใช้ CSS Grid จัดเรียงจริงๆ (ไม่ต้องพึ่ง Muuri)
     สลับกลับจาก .bento-box { position:absolute } ของ Muuri ที่ "ชนะ" กฎ
     grid มือถือเดิม (เพราะมาทีหลัง) ให้กลับเป็น flow layout ตาม design 2416
     =============================================================== */
  @media (max-width: 767.98px) {
    #dashboard-bento-container.bento-grid {
      display: grid !important;
      min-height: 0;
      max-width: 100%;
    }

    #dashboard-bento-container .bento-box {
      position: relative !important;
      width: auto !important;
      min-width: 0;
      z-index: auto;
      padding: 0.2rem !important;
    }

    #dashboard-bento-container .bento-content {
      height: auto;
      min-width: 0;
      /* overflow-x: auto; */
    }

    #dashboard-bento-container .bento-box.muuri-item-dragging {
      z-index: 1;
    }
  }