/* ==========================================================================
   SỔ THU CHI - DESIGN SYSTEM & STYLESHEET
   Offline-First PWA | Responsive Desktop & Mobile | High Aesthetic Theme
   ========================================================================== */

:root {
  /* Color Palette - Dark Theme Default */
  --bg-main: #0a0f1d;
  --bg-surface: #111827;
  --bg-card: #1e293b;
  --bg-card-hover: #26354a;
  --bg-glass: rgba(30, 41, 59, 0.75);
  --bg-modal: rgba(15, 23, 42, 0.85);

  --border-color: rgba(255, 255, 255, 0.08);
  --border-focus: #14b8a6;

  --text-primary: #f8fafc;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;

  /* Vibrant Accents - Màu chủ đạo Xanh Ngọc (Emerald / Teal) */
  --primary: #0d9488;
  --primary-hover: #0f766e;
  --primary-light: rgba(13, 148, 136, 0.15);

  --income: #10b981;
  --income-bg: rgba(16, 185, 129, 0.12);
  --income-hover: #059669;

  --expense: #f43f5e;
  --expense-bg: rgba(244, 63, 94, 0.12);
  --expense-hover: #e11d48;

  --transfer: #0ea5e9;
  --transfer-bg: rgba(14, 165, 233, 0.12);

  --debt-lend: #10b981; /* Cho vay (nợ cần thu) */
  --debt-borrow: #f59e0b; /* Đi vay (nợ cần trả) */
  --debt-bg: rgba(245, 158, 11, 0.12);

  --warning: #f59e0b;
  --warning-bg: rgba(245, 158, 11, 0.12);
  --info: #38bdf8;

  /* Shadows & Glassmorphism */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.25);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.3);
  --shadow-glow: 0 0 20px rgba(13, 148, 136, 0.35);

  --backdrop-blur: blur(16px);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-full: 9999px;

  /* Layout dimensions */
  --sidebar-width: 260px;
  --header-height: 54px;
  --bottom-nav-height: 64px;
}

[data-theme="light"] {
  --bg-main: #f1f5f9;
  --bg-surface: #ffffff;
  --bg-card: #ffffff;
  --bg-card-hover: #f8fafc;
  --bg-glass: rgba(255, 255, 255, 0.85);
  --bg-modal: rgba(241, 245, 249, 0.9);

  --border-color: rgba(0, 0, 0, 0.08);
  --border-focus: #0d9488;

  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #94a3b8;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 10px 20px -3px rgba(0, 0, 0, 0.08);
  --shadow-glow: 0 0 20px rgba(13, 148, 136, 0.15);
}

/* Reset & Base */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: clip;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background-color: var(--bg-main);
  color: var(--text-primary);
  line-height: 1.5;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
}

input, textarea, select, button {
  font-family: inherit;
  font-size: inherit;
  user-select: auto;
  -webkit-user-select: auto;
}

/* App Container */
#app-container {
  display: flex;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  position: relative;
  background-color: var(--bg-main);
}

/* Desktop Sidebar */
.app-sidebar {
  width: var(--sidebar-width);
  background: var(--bg-surface);
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 40;
  transition: transform 0.25s ease;
}

.brand-section {
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--border-color);
}

.brand-logo {
  width: 42px;
  height: 42px;
  object-fit: contain;
  filter: drop-shadow(0 4px 14px rgba(13, 148, 136, 0.45));
}

.brand-info h1 {
  font-size: 1.15rem;
  font-weight: 700;
  background: linear-gradient(135deg, #2dd4bf 0%, #0d9488 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.brand-badge {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--income-bg);
  color: var(--income);
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 600;
}

.nav-links {
  list-style: none;
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  overflow-y: auto;
}

.nav-item a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  color: var(--text-secondary);
  text-decoration: none;
  border-radius: var(--radius-md);
  font-weight: 500;
  font-size: 0.95rem;
  transition: all 0.2s ease;
  position: relative;
}

.nav-item a:hover {
  background: var(--bg-card);
  color: var(--text-primary);
}

.nav-item.active a {
  background: var(--primary);
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(13, 148, 136, 0.4);
}

.sidebar-footer {
  padding: 16px;
  border-top: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sync-status-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--text-muted);
  padding: 8px 10px;
  background: var(--bg-card);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  cursor: pointer;
  transition: all 0.2s;
}

.sync-status-indicator:hover {
  border-color: var(--primary);
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
}

.status-dot.syncing {
  background: #f59e0b;
  animation: pulse 1.5s infinite;
}

.status-dot.error {
  background: #ef4444;
}

/* Main Content Area */
.main-wrapper {
  flex: 1;
  margin-left: var(--sidebar-width);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background-color: var(--bg-main);
  padding-bottom: 24px;
}

/* Top App Header */
.app-header {
  min-height: calc(var(--header-height) + env(safe-area-inset-top, 0px));
  padding-top: max(8px, env(safe-area-inset-top, 0px));
  padding-bottom: 8px;
  padding-left: max(7px, env(safe-area-inset-left, 7px));
  padding-right: max(7px, env(safe-area-inset-right, 7px));
  /* Solid background — NO backdrop-filter to avoid iOS GPU compositing layer cache issues */
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-color);
  position: sticky;
  top: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
}

body.view-new-transaction .app-header,
body.view-category-picker .app-header,
body.view-borrow-select .app-header,
body.view-account-form .app-header,
body.view-account-provider .app-header,
body.view-budget-form .app-header,
body.view-budget-category-form .app-header,
body:has(#view-budget-form.active) .app-header,
body:has(#view-budget-category-form.active) .app-header,
body:has(#view-new-transaction.active) .app-header,
body:has(#view-category-picker.active) .app-header,
body:has(#view-borrow-select.active) .app-header,
body:has(#view-account-form.active) .app-header,
body:has(#view-account-provider.active) .app-header {
  /* iOS 27 fix: clear ALL compositing properties before hiding
     backdrop-filter creates a GPU layer that persists even with display:none */
  display: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-brand-logo-btn {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  border-radius: 6px;
  flex-shrink: 0;
  outline: none;
  transition: transform 0.2s ease;
  min-width: 44px;
  max-width: 88px;
  height: 40px;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.header-brand-logo-btn:hover {
  transform: translateY(-1px);
  background: transparent;
  border: none;
}

.header-brand-logo-btn:active {
  transform: scale(0.95);
}

.header-brand-logo-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  transition: transform 0.2s ease, margin 0.2s ease;
}

/* Nâng logo cao lên để có chỗ hiển thị thông tin sổ */
.header-brand-logo-btn.has-vault-name .header-brand-logo-wrap,
.header-brand-logo-btn.has-multi-vaults .header-brand-logo-wrap {
  transform: translateY(-2px);
  margin-top: -1px;
}

.header-brand-logo {
  width: 28px;
  height: 28px;
  display: block !important;
  flex-shrink: 0;
  object-fit: contain;
  transition: all 0.2s ease;
}

.header-brand-logo.is-app-logo {
  filter: drop-shadow(0 2px 5px rgba(16, 185, 129, 0.3));
}

.header-brand-logo.is-google-avatar {
  border-radius: 50%;
  border: 1.5px solid var(--primary, #10b981);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.22);
}

.header-brand-logo.is-dropbox-avatar {
  border-radius: 6px;
  border: 1.5px solid #0061ff;
  box-shadow: 0 2px 6px rgba(0, 97, 255, 0.25);
  background: #0061ff;
  padding: 2px;
}

.header-brand-logo-wrap .sync-status-dot,
.header-brand-logo-btn .sync-status-dot {
  position: absolute;
  bottom: -1px;
  right: -1px;
  top: auto;
  left: auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 2px solid var(--bg-surface, #ffffff);
  box-sizing: content-box;
  z-index: 3;
  pointer-events: none;
}

body.dark .header-brand-logo-wrap .sync-status-dot,
[data-theme="dark"] .header-brand-logo-wrap .sync-status-dot,
body.dark .header-brand-logo-btn .sync-status-dot,
[data-theme="dark"] .header-brand-logo-btn .sync-status-dot {
  border-color: #1e293b;
}

/* Thông tin sổ đặt bên dưới logo: hiển thị gọn, thu nhỏ chữ theo chiều dài, dài quá thì ẩn, xoá bỏ icon */
.header-vault-subtext {
  display: block;
  width: 100%;
  max-width: 50px;
  font-size: 0.58rem;
  font-weight: 700;
  color: #10b981;
  text-align: center;
  overflow: hidden;
  text-overflow: clip; /* Bỏ dấu "..." để tăng diện tích hiển thị */
  white-space: nowrap;
  line-height: 1.1;
  margin-top: 0px;
  letter-spacing: -0.25px;
  pointer-events: none;
  transition: color 0.15s ease;
}

.vault-subtext-name {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: clip; /* Bỏ dấu "..." để tăng diện tích hiển thị */
  white-space: nowrap;
}

.header-brand-logo-btn:hover .header-vault-subtext {
  color: #34d399;
}

[data-theme="light"] .header-vault-subtext,
body.light .header-vault-subtext {
  color: #059669;
}

[data-theme="light"] .header-brand-logo-btn:hover .header-vault-subtext,
body.light .header-brand-logo-btn:hover .header-vault-subtext {
  color: #047857;
}


/* Màu tên sổ theo quyền sổ (Chủ sổ: Xanh lục, Chỉnh sửa: Xanh dương, Chỉ xem: Vàng) */
.header-vault-subtext.role-owner,
[data-role="owner"] .header-vault-subtext,
.header-brand-logo-btn.role-owner .header-vault-subtext {
  color: #10b981;
}

.header-vault-subtext.role-editor,
[data-role="editor"] .header-vault-subtext,
.header-brand-logo-btn.role-editor .header-vault-subtext {
  color: #3b82f6 !important;
}

.header-vault-subtext.role-viewer,
[data-role="viewer"] .header-vault-subtext,
.header-brand-logo-btn.role-viewer .header-vault-subtext {
  color: #f59e0b !important;
}

.header-brand-logo-btn:hover .header-vault-subtext.role-owner,
.header-brand-logo-btn.role-owner:hover .header-vault-subtext {
  color: #34d399;
}
.header-brand-logo-btn:hover .header-vault-subtext.role-editor,
.header-brand-logo-btn.role-editor:hover .header-vault-subtext {
  color: #60a5fa !important;
}
.header-brand-logo-btn:hover .header-vault-subtext.role-viewer,
.header-brand-logo-btn.role-viewer:hover .header-vault-subtext {
  color: #fbbf24 !important;
}

[data-theme="light"] .header-vault-subtext.role-owner,
body.light .header-vault-subtext.role-owner,
[data-theme="light"] .header-brand-logo-btn.role-owner .header-vault-subtext,
body.light .header-brand-logo-btn.role-owner .header-vault-subtext {
  color: #059669;
}
[data-theme="light"] .header-vault-subtext.role-editor,
body.light .header-vault-subtext.role-editor,
[data-theme="light"] .header-brand-logo-btn.role-editor .header-vault-subtext,
body.light .header-brand-logo-btn.role-editor .header-vault-subtext {
  color: #2563eb !important;
}
[data-theme="light"] .header-vault-subtext.role-viewer,
body.light .header-vault-subtext.role-viewer,
[data-theme="light"] .header-brand-logo-btn.role-viewer .header-vault-subtext,
body.light .header-brand-logo-btn.role-viewer .header-vault-subtext {
  color: #d97706 !important;
}

.header-brand-logo-btn.role-owner .header-brand-logo.is-google-avatar {
  border-color: #10b981;
}
.header-brand-logo-btn.role-editor .header-brand-logo.is-google-avatar {
  border-color: #3b82f6;
}
.header-brand-logo-btn.role-viewer .header-brand-logo.is-google-avatar {
  border-color: #f59e0b;
}

/* Centered Header Title for all pages */
.app-header-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: calc(100% - 150px);
  z-index: 50;
  pointer-events: none;
  text-align: center;
}

.page-title-badge {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.2px;
  line-height: 1.2;
  margin: 0;
  padding: 0;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Header Buttons */
.btn-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-icon:hover {
  background: var(--bg-card);
  color: var(--text-primary);
  border-color: var(--border-focus);
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);
  color: #ffffff;
  padding: 10px 18px;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 0.95rem;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(13, 148, 136, 0.35);
  transition: all 0.2s ease;
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(13, 148, 136, 0.45);
}

.header-add-icon-btn {
  width: 40px;
  height: 40px;
  padding: 0 !important;
  justify-content: center;
  border-radius: 50% !important; /* Nút hình tròn */
}

.tx-submit-bottom-btn {
  min-width: 0;
  width: auto;
  padding: 13px 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 1rem;
  font-weight: 700;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(13, 148, 136, 0.35);
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.tx-submit-bottom-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(13, 148, 136, 0.45);
}

.tx-submit-bottom-btn:active {
  transform: translateY(0);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-card);
  color: var(--text-primary);
  padding: 9px 16px;
  border-radius: var(--radius-md);
  font-weight: 500;
  font-size: 0.9rem;
  border: 1px solid var(--border-color);
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-secondary:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-focus);
}

.btn-danger {
  background: var(--expense);
  color: #ffffff;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  border: none;
  font-weight: 600;
  cursor: pointer;
}

.btn-danger-subtle,
.btn-danger-outline {
  background: rgba(244, 63, 94, 0.12) !important;
  color: #fb7185 !important;
  border: 1px solid rgba(244, 63, 94, 0.35) !important;
  border-radius: var(--radius-md) !important;
  font-size: 0.95rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-danger-subtle:hover,
.btn-danger-outline:hover,
.btn-danger-subtle:active,
.btn-danger-outline:active {
  background: rgba(244, 63, 94, 0.22) !important;
  border-color: rgba(244, 63, 94, 0.55) !important;
  color: #fda4af !important;
}

/* Solid Emerald and Danger Action Buttons (App Design Standard) */
.btn-emerald {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #ffffff !important;
  height: 42px;
  padding: 0 16px;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 0.88rem;
  border: none;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(16, 185, 129, 0.3);
  transition: all 0.2s ease;
  width: 100%;
}

.btn-emerald:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 15px rgba(16, 185, 129, 0.45);
}

.btn-emerald:active {
  transform: translateY(1px);
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.25);
}

.btn-danger-solid {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%);
  color: #ffffff !important;
  height: 42px;
  padding: 0 16px;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 0.88rem;
  border: none;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(244, 63, 94, 0.3);
  transition: all 0.2s ease;
  width: 100%;
}

.btn-danger-solid:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 15px rgba(244, 63, 94, 0.45);
}

.btn-danger-solid:active {
  transform: translateY(1px);
  box-shadow: 0 2px 6px rgba(244, 63, 94, 0.25);
}

/* Page Views Container */
.page-view {
  padding: 24px;
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  display: none;
  animation: fadeIn 0.2s ease-in-out;
}

.page-view.active {
  display: block;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Stat Cards (Net Worth, Income, Expense, Debt) */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s, box-shadow 0.2s;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: rgba(255, 255, 255, 0.15);
}

.stat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.stat-title {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.stat-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
}

.stat-icon.net-worth { background: rgba(13, 148, 136, 0.15); color: #2dd4bf; }
.stat-icon.income { background: var(--income-bg); color: var(--income); }
.stat-icon.expense { background: var(--expense-bg); color: var(--expense); }
.stat-icon.debt { background: var(--debt-bg); color: var(--warning); }

.stat-amount {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  font-feature-settings: "tnum";
}

.stat-amount.income-text { color: var(--income); }
.stat-amount.expense-text { color: var(--expense); }
.stat-amount.debt-text { color: var(--warning); }

.stat-subtext {
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* ==========================================================================
   ACCOUNTS LIST (LIST NGANG & SẮP XẾP VỊ TRÍ)
   ========================================================================== */
.accounts-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 800px;
  box-sizing: border-box;
  margin-bottom: 24px;
}

.account-list-item {
  display: flex;
  align-items: center;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  gap: 8px;
  transition: border-color 0.15s, background-color 0.15s, transform 0.15s;
  user-select: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  position: relative;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: visible;
}

.account-list-item.archived {
  opacity: 0.72;
  border-style: dashed;
}

.account-list-item:hover {
  border-color: rgba(255, 255, 255, 0.18);
  background: var(--bg-card-hover);
}

.account-list-item.dragging {
  opacity: 0.35;
  transform: scale(0.98);
}

.account-list-item.drag-over {
  border-top: 2px solid var(--primary);
}

.account-drag-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  cursor: grab;
  padding: 4px;
  border-radius: 4px;
  flex-shrink: 0;
  touch-action: none;
  transition: color 0.15s;
}

.account-drag-handle:hover {
  color: var(--text-primary);
}

.account-drag-handle:active {
  cursor: grabbing;
}

.account-item-main {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  gap: 12px;
  cursor: pointer;
  overflow: visible;
}

.account-icon-bubble {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: visible;
}

.account-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.account-name {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.account-sub-row {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  white-space: nowrap;
}

.account-default-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.3);
  padding: 2px 5px;
  border-radius: var(--radius-full);
  line-height: 1;
  flex-shrink: 0;
}

.account-type-label {
  font-size: 0.76rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.account-balance-wrapper {
  text-align: right;
  flex-shrink: 0;
  margin-left: auto;
  min-width: 0;
}

.account-balance {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* 3-dots Menu for Accounts */
.account-menu-wrapper {
  position: relative;
  flex-shrink: 0;
}

.account-menu-btn {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  padding: 0;
}

.account-menu-btn:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--border-color);
}

.account-menu-btn:active {
  transform: scale(0.95);
}

.account-dropdown-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.4);
  min-width: 195px;
  z-index: 1050;
  padding: 6px 0;
  display: none;
  backdrop-filter: blur(10px);
}

.account-dropdown-menu.open {
  display: block;
  animation: menuDropFade 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes menuDropFade {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.account-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  font-size: 0.86rem;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  user-select: none;
}

.account-dropdown-item:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
}

.account-dropdown-item.danger {
  color: #f43f5e;
}

.account-dropdown-item.danger:hover {
  background: rgba(244, 63, 94, 0.12);
  color: #fb7185;
}

.account-dropdown-divider {
  height: 1px;
  background: var(--border-color);
  margin: 4px 0;
}

.account-archived-badge {
  display: inline-flex;
  align-items: center;
  background: rgba(148, 163, 184, 0.14);
  color: var(--text-muted);
  border: 1px solid rgba(148, 163, 184, 0.25);
  font-size: 0.68rem;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 4px;
  line-height: 1.2;
}

/* Transaction List Account Filter Banner */
.tx-account-filter-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(79, 70, 229, 0.12);
  border: 1px solid rgba(79, 70, 229, 0.25);
  border-radius: var(--radius-md);
  padding: 8px 14px;
  margin-bottom: 14px;
  gap: 10px;
}

.tx-account-filter-content {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}

.tx-account-filter-text {
  font-size: 0.88rem;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tx-account-filter-clear-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s;
}

.tx-account-filter-clear-btn:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.16);
}

/* Dashboard Grid (Charts & Recent Transactions) */
.dashboard-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 20px;
  margin-bottom: 24px;
}

.card-panel {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 20px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.panel-title {
  font-size: 1.05rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.chart-container {
  position: relative;
  width: 100%;
  height: 280px;
}

/* Quick Filter Pills */
.filter-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 8px;
  margin-bottom: 16px;
}

.filter-pill {
  padding: 6px 14px;
  border-radius: var(--radius-full);
  font-size: 0.85rem;
  font-weight: 500;
  background: var(--bg-surface);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
}

.filter-pill.active {
  background: var(--primary);
  color: #ffffff;
  border-color: var(--primary);
}

/* Transaction List & Item */
.transaction-group {
  margin-bottom: 18px;
}

.transaction-date-header {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
}

.tx-items-wrapper {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tx-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.tx-card:hover {
  background: var(--bg-card-hover);
  border-color: rgba(255, 255, 255, 0.12);
  transform: translateX(2px);
}

.tx-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
}

.tx-icon-box {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tx-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
  overflow: hidden;
}

.tx-title {
  font-size: 0.95rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.tx-meta {
  font-size: 0.78rem;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.tx-meta-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--text-muted);
}

.tx-right {
  text-align: right;
  flex-shrink: 0;
}

.tx-amount {
  font-size: 1.05rem;
  font-weight: 700;
  font-feature-settings: "tnum";
}

.tx-amount.expense { color: var(--expense); }
.tx-amount.income { color: var(--income); }
.tx-amount.transfer { color: var(--transfer); }

/* Vay Nợ (Debts & Loans) Component Styles */
.debt-tabs {
  display: flex;
  background: var(--bg-surface);
  padding: 4px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  margin-bottom: 20px;
}

.debt-tab-btn {
  flex: 1;
  padding: 8px 16px;
  text-align: center;
  font-weight: 600;
  font-size: 0.9rem;
  border-radius: var(--radius-sm);
  background: transparent;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s;
}

.debt-tab-btn.active {
  background: var(--primary);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.3);
}

.debt-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 12px;
}

.debt-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.debt-person {
  display: flex;
  align-items: center;
  gap: 10px;
}

.debt-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4f46e5, #06b6d4);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
}

.debt-name {
  font-size: 1rem;
  font-weight: 600;
}

.debt-status-badge {
  font-size: 0.75rem;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-weight: 600;
}

.debt-status-badge.active { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
.debt-status-badge.settled { background: var(--income-bg); color: var(--income); }
.debt-status-badge.overdue { background: var(--expense-bg); color: var(--expense); }

.debt-progress-bar {
  width: 100%;
  height: 8px;
  background: var(--bg-surface);
  border-radius: var(--radius-full);
  overflow: hidden;
  position: relative;
}

.debt-progress-fill {
  height: 100%;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, #10b981, #38bdf8);
  transition: width 0.3s ease;
}

.debt-amounts {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.debt-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  border-top: 1px solid var(--border-color);
  padding-top: 12px;
}

/* Modal & Bottom Sheet Dialogs */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg-modal);
  /* No backdrop-filter — causes iOS GPU layer artifacts */
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease;

  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.modal-overlay.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.modal-dialog {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
  transform: scale(0.96);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;

  cursor: default;
  position: relative;
  z-index: 1;
}

.modal-overlay.open .modal-dialog {
  transform: scale(1);
}

.modal-header {
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-color);
}

.modal-title {
  font-size: 1.15rem;
  font-weight: 700;
}

.modal-body {
  padding: 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.modal-footer {
  padding: 16px 20px;
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* Forms & Inputs */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.form-control {
  width: 100%;
  padding: 11px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: 16px; /* 16px prevents iOS Safari from auto-zooming and displacing viewport */
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.form-control:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

/* Money Input with Big Digits & Quick Calculator */
.money-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.money-currency-tag {
  position: absolute;
  right: 14px;
  font-weight: 700;
  color: var(--text-muted);
  font-size: 1.2rem;
  pointer-events: none;
}

.money-input-lg {
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: -0.02em;
  padding-right: 48px;
}

.quick-amount-buttons {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.quick-chip {
  font-size: 0.75rem;
  padding: 4px 8px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  cursor: pointer;
}

.quick-chip:hover {
  background: var(--primary-light);
  color: var(--primary);
  border-color: var(--primary);
}

/* Type Toggle Buttons (Expense / Income / Transfer) */
.type-toggle-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}

.type-toggle-btn {
  padding: 10px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s;
}

.type-toggle-btn.active.expense {
  background: var(--expense-bg);
  color: var(--expense);
  border-color: var(--expense);
}

.type-toggle-btn.active.income {
  background: var(--income-bg);
  color: var(--income);
  border-color: var(--income);
}

.type-toggle-grid-5 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.type-toggle-grid-5 .type-toggle-btn {
  flex: 1 1 calc(33.333% - 6px);
  min-width: 95px;
  padding: 8px 6px;
  font-size: 0.8rem;
}

.type-toggle-btn.active.lend {
  background: var(--income-bg);
  color: var(--income);
  border-color: var(--income);
}

.type-toggle-btn.active.borrow {
  background: var(--debt-bg);
  color: var(--warning);
  border-color: var(--warning);
}

/* Toast Notifications (Modern Compact Dynamic Pill) */
#toast-container {
  position: fixed;
  top: max(12px, env(safe-area-inset-top, 12px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  pointer-events: none;
  width: max-content;
  max-width: calc(100vw - 24px);
}

.toast {
  position: relative;
  min-width: 0;
  max-width: min(420px, calc(100vw - 28px));
  padding: 7px 14px;
  border-radius: 9999px;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.22), 0 2px 6px rgba(0, 0, 0, 0.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.3;
  pointer-events: auto;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-x pan-y;
  animation: toastSlideDown 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
}

.toast i {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
}

.toast span {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: calc(100vw - 72px);
}

.toast.success {
  border-color: rgba(16, 185, 129, 0.35);
}
.toast.success i {
  color: var(--income);
}

.toast.error {
  border-color: rgba(244, 63, 94, 0.35);
}
.toast.error i {
  color: var(--expense);
}

.toast.info {
  border-color: rgba(13, 148, 136, 0.35);
}
.toast.info i {
  color: var(--primary);
}

@keyframes toastSlideDown {
  from {
    transform: translateY(-20px) scale(0.92);
    opacity: 0;
  }
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

/* Mobile Bottom Navigation Bar & FAB */
.mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  padding-top: 6px;
  padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
  padding-left: 8px;
  padding-right: max(8px, env(safe-area-inset-right, 0px));
  background: var(--bg-surface);
  border-top: 1px solid var(--border-color);
  z-index: 50;
  justify-content: space-around;
  align-items: center;
  box-sizing: border-box;
}

.mobile-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.72rem;
  font-weight: 500;
  flex: 1;
  padding: 4px 0;
  transition: color 0.2s;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

.mobile-nav-item.active {
  color: var(--primary);
}

.mobile-fab-center {
  position: relative;
  top: -8px;
  width: 50px;
  height: 50px;
  border-radius: 50% !important; /* Nút hình tròn */
  background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(13, 148, 136, 0.45);
  border: 3px solid var(--bg-surface);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.mobile-fab-center:active {
  transform: scale(0.92);
}

/* Custom In-App Numeric Keypad for Mobile & Desktop */
.custom-keypad-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--bg-card);
  padding: 10px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  margin-top: 8px;
}

.keypad-quick-row {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.keypad-quick-row::-webkit-scrollbar {
  display: none;
}

.keypad-chip {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: var(--radius-full);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
  touch-action: manipulation;
}
.keypad-chip:hover, .keypad-chip:active, .keypad-chip.pressed {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  transform: scale(0.96);
}

.keypad-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(5, minmax(36px, 40px));
  gap: 5px;
}

.keypad-btn {
  height: 40px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  color: var(--text-primary);
  font-size: 1.15rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.05s ease, background 0.05s ease;
  user-select: none;
  -webkit-user-select: none;
  /* Ngăn delay 300ms và double-tap zoom - cho phép multi-touch hoạt động đúng */
  touch-action: manipulation;
}

.keypad-btn:active,
.keypad-btn.pressed {
  background: var(--bg-card-hover);
  transform: scale(0.94);
  border-color: var(--border-focus);
}

.keypad-btn.action {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-secondary);
  font-size: 1.1rem;
  font-weight: 600;
}

[data-theme="light"] .keypad-btn.action {
  background: #f1f5f9;
  color: #334155;
}

.keypad-btn.action-primary,
.keypad-btn-done {
  background: var(--primary);
  color: #ffffff !important;
  font-weight: 700;
}

.keypad-btn-done {
  grid-column: 4;
  grid-row: 4 / 6;
  height: 100% !important;
  font-size: 1.05rem;
  box-shadow: 0 2px 8px rgba(13, 148, 136, 0.4);
}

.keypad-btn.action-primary:active,
.keypad-btn.action-primary.pressed,
.keypad-btn-done:active,
.keypad-btn-done.pressed {
  background: var(--primary-hover) !important;
  transform: scale(0.96);
}


/* Privacy Mode Mask: Zero Eye Strain (Mask with asterisks, NO blur) */
.privacy-masked {
  filter: none !important;
  font-family: monospace;
  letter-spacing: 2px;
  user-select: none;
}

/* Responsive Media Queries */
@media (max-width: 900px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  :root {
    --sidebar-width: 0px;
    --header-height: 52px;
    --bottom-nav-height: 64px;
  }

  /* Khóa cứng cửa sổ trên mobile như Native App: không bao giờ cuộn cửa sổ chính */
  html, body {
    height: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    overscroll-behavior: none !important;
  }

  #app-container {
    height: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .app-sidebar {
    display: none !important;
  }

  /* Khung nội dung chính nằm trọn giữa Header và Bottom Menu */
  .main-wrapper {
    flex: 1 1 0% !important;
    min-height: 0 !important;
    height: 0 !important;
    margin-left: 0 !important;
    padding-bottom: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    position: relative !important;
  }

  /* Header luôn ghim đỉnh, không bao giờ bị cuộn trôi */
  .app-header {
    flex-shrink: 0 !important;
    position: relative !important;
    top: auto !important;
    z-index: 40 !important;
    width: 100% !important;
    min-height: calc(52px + env(safe-area-inset-top, 0px)) !important;
    padding-top: max(8px, env(safe-area-inset-top, 0px)) !important;
    padding-bottom: 8px !important;
    padding-left: max(7px, env(safe-area-inset-left, 7px)) !important;
    padding-right: max(7px, env(safe-area-inset-right, 7px)) !important;
    box-sizing: border-box !important;
  }

  /* Tất cả các tab chính đều cuộn độc lập bên trên thanh menu dưới */
  .page-view.active:not(.tx-page-view) {
    display: block !important;
    flex: 1 1 0% !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: none !important;
    padding: 12px 7px 20px 7px !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Tab ghi chép (new-transaction) ghim Header & nút Lưu Lại, chỉ cuộn nội dung giữa */
  #view-new-transaction.page-view.active {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 0% !important;
    min-height: 0 !important;
    height: 100% !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    max-height: none !important;
    overflow: hidden !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
    width: 100% !important;
    z-index: 10 !important;
  }

  #view-new-transaction .tx-page-card-wrapper {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 0% !important;
    min-height: 0 !important;
    height: 100% !important;
    border: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    overflow: hidden !important;
  }

  #view-new-transaction #transaction-form {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 0% !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
    margin: 0 !important;
  }

    #view-new-transaction .tx-page-body {
    flex: 1 1 0% !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: none !important;
    padding: 12px 7px 8px 7px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  #view-new-transaction .tx-bottom-action-row {
    flex-shrink: 0 !important;
    margin-top: auto !important;
    padding: 8px 7px 10px 7px !important;
    display: flex !important;
    gap: 10px !important;
    align-items: center !important;
    background: var(--bg-base) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
  }

  .tx-page-header {
    min-height: calc(52px + env(safe-area-inset-top, 0px)) !important;
    padding-top: max(8px, env(safe-area-inset-top, 0px)) !important;
    padding-bottom: 8px !important;
    padding-left: max(7px, env(safe-area-inset-left, 7px)) !important;
    padding-right: max(7px, env(safe-area-inset-right, 7px)) !important;
    gap: 8px !important;
    background: var(--bg-surface) !important;
    border-bottom: 1px solid var(--border-color) !important;
    box-sizing: border-box !important;
  }

  .tx-header-left,
  .header-left {
    gap: 6px !important;
  }

  #tx-brand-logo-btn,
  #header-brand-logo-btn {
    min-width: 36px !important;
    max-width: 52px !important;
    margin-left: 0 !important;
  }

  #tx-brand-logo-btn .header-vault-subtext,
  #header-brand-logo-btn .header-vault-subtext {
    max-width: 50px !important;
    font-size: 0.54rem !important;
  }

  #tx-header-history-btn {
    width: 36px !important;
    height: 36px !important;
  }

  .tx-header-right,
  .header-actions {
    gap: 6px !important;
    min-width: 36px !important;
  }

  .tx-header-done-btn {
    width: 36px !important;
    height: 36px !important;
  }

  .tx-type-dropdown-btn {
    max-width: 132px !important;
    padding: 4px 8px !important;
    gap: 4px !important;
    font-size: 0.82rem !important;
  }

  #tx-type-current-label {
    max-width: 74px !important;
    font-size: 0.82rem !important;
  }

  /* Ẩn nút thêm trên thanh tiêu đề trên điện thoại */
  #header-add-btn {
    display: none !important;
  }

  /* Menu dưới luôn ghim đáy, thanh cuộn KHÔNG bao giờ lấn qua menu */
  .mobile-bottom-nav {
    display: flex !important;
    flex-shrink: 0 !important;
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    z-index: 50 !important;
  }

  /* Force 16px font size on inputs to prevent iOS auto-zoom displacement */
  input, select, textarea, .form-control {
    font-size: 16px !important;
  }

  .page-view {
    padding: 14px 12px;
  }

  .accounts-group-container {
    padding: 14px 12px;
    margin-top: 18px;
    border-radius: var(--radius-md);
  }

  .asset-type-group {
    padding: 10px 10px 8px;
  }

  .stats-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .stat-card {
    padding: 12px;
  }

  .stat-amount {
    font-size: 1.2rem;
  }

  .mobile-bottom-nav {
    display: flex;
    z-index: 120;
  }

    /* Modal on mobile - Mở rộng sát viền, căn giữa màn hình */
  .modal-overlay {
    align-items: center;
    justify-content: center;
    padding: 8px 6px max(8px, env(safe-area-inset-bottom, 0px));
  }

  .modal-dialog {
    max-width: 100%;
    width: 100%;
    border-radius: 18px;
    max-height: 90dvh;
    padding-bottom: 0;
    animation: none;
    transform: scale(0.96);
  }

  /* Mở rộng sát viền cho Modal Tùy chọn Còn lại & Cân đối Ngân sách */
  #modal-budget-avail-options,
  #modal-budget-rebalance {
    padding: 8px 6px max(8px, env(safe-area-inset-bottom, 0px)) !important;
  }

  #modal-budget-avail-options .modal-dialog,
  #modal-budget-rebalance .modal-dialog {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 18px;
    margin: 0 auto;
  }

  #modal-budget-avail-options .modal-header,
  #modal-budget-rebalance .modal-header {
    padding: 14px 14px;
  }

  #modal-budget-avail-options .modal-body {
    padding: 12px 10px 14px 10px !important;
    gap: 8px;
  }

  .avail-option-card {
    padding: 12px 12px;
    gap: 10px;
  }

  #modal-budget-rebalance .modal-body {
    padding: 12px 10px !important;
    gap: 10px;
  }

  .rebalance-cat-item,
  .rebalance-source-item {
    padding: 10px 12px;
  }

  .rebalance-modal-footer {
    padding: 10px 12px;
  }

  .rebalance-amount-box {
    padding: 10px 12px;
  }

  .modal-overlay.open .modal-dialog {
    transform: scale(1);
  }

  /* Dedicated Transaction View styling for Mobile */
  body.view-new-transaction,
  body.view-category-picker,
  body.view-borrow-select,
  body.view-budget-form,
  body.view-budget-category-form,
  body.view-budget-cat-history {
    height: 100dvh !important;
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
    top: 0 !important;
    left: 0 !important;
  }

  /* Ẩn Bottom Nav trên các trang biểu mẫu / danh mục phụ */
  body.view-category-picker .mobile-bottom-nav,
  body.view-borrow-select .mobile-bottom-nav,
  body.view-budget-form .mobile-bottom-nav,
  body.view-budget-category-form .mobile-bottom-nav,
  body.view-account-form .mobile-bottom-nav,
  body.view-account-provider .mobile-bottom-nav,
  body.view-savings-form .mobile-bottom-nav,
  body.view-accumulation-form .mobile-bottom-nav,
  body.view-loan-form .mobile-bottom-nav,
  body.view-asset-form .mobile-bottom-nav,
  body:has(#view-category-picker.active) .mobile-bottom-nav,
  body:has(#view-borrow-select.active) .mobile-bottom-nav,
  body:has(#view-budget-form.active) .mobile-bottom-nav,
  body:has(#view-budget-category-form.active) .mobile-bottom-nav,
  body:has(#view-account-form.active) .mobile-bottom-nav,
  body:has(#view-account-provider.active) .mobile-bottom-nav,
  body:has(#view-savings-form.active) .mobile-bottom-nav,
  body:has(#view-accumulation-form.active) .mobile-bottom-nav,
  body:has(#view-loan-form.active) .mobile-bottom-nav,
  body:has(#view-asset-form.active) .mobile-bottom-nav {
    display: none !important;
  }

  /* Mẫu ghi chép: luôn hiển thị thanh menu dưới cố định */
  body.view-template-manager .mobile-bottom-nav,
  body.view-template-editor .mobile-bottom-nav,
  body:has(#view-template-manager.active) .mobile-bottom-nav,
  body:has(#view-template-editor.active) .mobile-bottom-nav {
    display: flex !important;
  }

  /* Mẫu ghi chép: khớp chuẩn trên thanh menu dưới, không cuộn tràn ngầm và không sinh thanh cuộn khi danh sách ít */
  body.view-template-manager #view-template-manager,
  body.view-template-editor #view-template-editor,
  body:has(#view-template-manager.active) #view-template-manager,
  body:has(#view-template-editor.active) #view-template-editor {
    bottom: calc(65px + max(16px, env(safe-area-inset-bottom, 0px))) !important;
    height: calc(100dvh - 65px - max(16px, env(safe-area-inset-bottom, 0px))) !important;
    max-height: calc(100dvh - 65px - max(16px, env(safe-area-inset-bottom, 0px))) !important;
    padding-bottom: 0 !important;
  }

  body.view-template-manager #view-template-manager .tx-page-card-wrapper,
  body.view-template-editor #view-template-editor .tx-page-card-wrapper,
  body:has(#view-template-manager.active) #view-template-manager .tx-page-card-wrapper,
  body:has(#view-template-editor.active) #view-template-editor .tx-page-card-wrapper {
    min-height: auto !important;
  }

  body.view-template-manager #view-template-manager .tx-page-body,
  body:has(#view-template-manager.active) #view-template-manager .tx-page-body {
    padding-bottom: 80px !important;
  }

  body.view-budget-form .tx-page-view,
  body.view-budget-category-form .tx-page-view,
  body:has(#view-budget-form.active) .tx-page-view,
  body:has(#view-budget-category-form.active) .tx-page-view {
    padding-bottom: max(24px, env(safe-area-inset-bottom, 24px)) !important;
  }

  body.view-new-transaction .app-header,
  body.view-category-picker .app-header,
  body.view-borrow-select .app-header,
  body.view-budget-form .app-header,
  body.view-budget-category-form .app-header,
  body.view-template-manager .app-header,
  body.view-template-editor .app-header,
  body:has(#view-template-manager.active) .app-header,
  body:has(#view-template-editor.active) .app-header {
    display: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
  }

  .tx-page-view:not(#view-new-transaction) {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100dvh;
    max-height: 100dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    padding: 0 0 max(24px, env(safe-area-inset-bottom, 24px)) 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box;
    background: var(--bg-base) !important;
    animation: none !important;
    z-index: 45;
  }

  .tx-page-card-wrapper {
    border: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    overflow: visible !important;
  }

  /* Compact accounts list on mobile to prevent overflow */
  .accounts-list {
    gap: 8px;
    width: 100%;
    max-width: 100%;
  }

  .account-list-item {
    padding: 8px 8px;
    gap: 6px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .account-drag-handle {
    padding: 2px;
  }

  .account-drag-handle i {
    width: 15px !important;
    height: 15px !important;
  }

  .account-item-main {
    gap: 8px;
    min-width: 0;
  }

  .account-icon-bubble {
    width: 36px;
    height: 36px;
  }

  .account-icon-bubble i {
    width: 17px !important;
    height: 17px !important;
  }

  .account-name {
    font-size: 0.88rem;
  }

  .account-type-label {
    font-size: 0.72rem;
  }

  .account-default-badge {
    padding: 2px 4px;
  }

  .account-balance {
    font-size: 0.9rem;
  }

  .account-item-actions {
    gap: 2px;
  }

  .account-move-btn {
    width: 24px;
    height: 24px;
  }

  .account-move-btn i {
    width: 13px !important;
    height: 13px !important;
  }
}

/* Desktop Scroll Restoration: Đảm bảo body và mọi view luôn cuộn chuột bằng con lăn bình thường trên màn hình máy tính (> 768px) */
@media (min-width: 769px) {
  html, body {
    height: auto !important;
    min-height: 100vh !important;
    overflow-y: auto !important;
    overflow-x: clip !important;
    position: static !important;
    touch-action: auto !important;
    overscroll-behavior: auto !important;
  }

  body.view-new-transaction,
  body.view-category-picker,
  body.view-borrow-select,
  body.view-budget-form,
  body.view-budget-category-form,
  body.view-budget-cat-history {
    height: auto !important;
    overflow-y: auto !important;
    overflow-x: clip !important;
    position: static !important;
    width: 100% !important;
    top: auto !important;
    left: auto !important;
    touch-action: auto !important;
  }

  #app-container {
    height: auto !important;
    min-height: 100vh !important;
    overflow: visible !important;
    position: static !important;
  }

  .main-wrapper {
    height: auto !important;
    min-height: 100vh !important;
    overflow: visible !important;
    position: static !important;
  }

  .page-view {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    touch-action: auto !important;
  }

  .page-view.active:not(.tx-page-view) {
    height: auto !important;
    overflow: visible !important;
    touch-action: auto !important;
  }

  .tx-page-view {
    height: auto !important;
    overflow: visible !important;
    touch-action: auto !important;
  }

  #view-new-transaction.page-view.active {
    height: auto !important;
    overflow: visible !important;
  }

  #view-new-transaction .tx-page-card-wrapper {
    height: auto !important;
    overflow: visible !important;
  }

  #view-new-transaction #transaction-form {
    height: auto !important;
    overflow: visible !important;
  }

  #view-new-transaction .tx-page-body {
    height: auto !important;
    overflow: visible !important;
  }
}

/* Scrollbar Customization */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* ==========================================================================
   ADVANCED TRANSACTION UI & QUICK CATEGORY SYSTEM
   ========================================================================== */

/* Trang Ghi Chép Mới (Official Dedicated View) */
.tx-page-view {
  padding: 16px 20px calc(var(--bottom-nav-height) + 60px);
  max-width: 640px;
  width: 100%;
  margin: 0 auto;
  position: relative;
  /* Solid background prevents iOS from showing any blur artifact from layers below */
  background: var(--bg-base);
  /* isolation:isolate creates a new stacking context, blocking compositing bleed-through */
  isolation: isolate;
  touch-action: pan-y;
  user-select: none;
  box-sizing: border-box;
  animation: none !important;
}

.tx-page-view.swiping {
  will-change: transform;
  transition: none !important;
}

.tx-page-card-wrapper {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
}

/* Header of Transaction Page View & Modals */
.tx-modal-header, .tx-page-header {
  min-height: calc(var(--header-height) + env(safe-area-inset-top, 0px));
  padding-top: max(8px, env(safe-area-inset-top, 0px));
  padding-bottom: 8px;
  padding-left: max(7px, env(safe-area-inset-left, 7px));
  padding-right: max(7px, env(safe-area-inset-right, 7px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-color);
  gap: 8px;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 20;
  box-sizing: border-box;
  /* iOS 27: prevent backdrop-filter ghost by using solid opaque background.
     No backdrop-filter here — solid color only. */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.tx-header-left {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  min-width: 0;
}

#tx-brand-logo-btn {
  min-width: 36px;
  max-width: 52px;
  margin-left: 0;
}

#tx-brand-logo-btn .header-vault-subtext {
  max-width: 50px;
  font-size: 0.54rem;
  overflow: hidden;
  text-overflow: clip;
  letter-spacing: -0.3px;
}

#tx-brand-logo-btn .vault-subtext-name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: clip;
}

#tx-header-history-btn {
  width: 36px;
  height: 36px;
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

.tx-header-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex: 0 0 auto;
  width: auto;
  min-width: 36px;
}

.tx-header-center {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 0;
  text-align: center;
}

.tx-header-btn {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s;
}

.tx-header-btn:hover {
  background: var(--bg-card-hover);
  border-color: var(--primary);
}

.tx-header-done-btn {
  background: var(--primary);
  color: #ffffff;
  border-color: var(--primary);
  flex-shrink: 0;
}

.tx-header-done-btn:hover {
  background: var(--primary-hover);
}

/* Custom Type Pill Dropdown with Icons */
.tx-type-dropdown-wrapper {
  position: relative;
  display: inline-block;
  max-width: 100%;
}

.tx-type-dropdown-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  padding: 5px 10px;
  color: var(--text-primary);
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  max-width: 146px;
  line-height: 1.15;
}

#tx-type-current-label {
  display: inline-block;
  max-width: 82px;
  white-space: normal;
  text-align: center;
  line-height: 1.15;
  word-break: normal;
  overflow-wrap: break-word;
}

.tx-type-dropdown-btn:hover, .tx-type-dropdown-btn:focus {
  border-color: var(--primary);
}

.tx-type-badge-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.tx-type-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  min-width: 190px;
  z-index: 60;
  overflow: hidden;
  padding: 5px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  /* No animation - appear instantly */
}

.tx-type-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-primary);
  transition: background 0.15s;
}

.tx-type-option:hover, .tx-type-option.active {
  background: rgba(255, 255, 255, 0.08);
}

.tx-type-option i {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Date & Time Split Layout */
.tx-datetime-split-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  position: relative;
}

.tx-date-text {
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--text-primary);
}

.tx-time-badge,
.tx-time-text {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-primary);
  background: transparent;
  border: none;
  padding: 0;
  font-variant-numeric: tabular-nums;
  margin-right: 4px;
}

/* Clickable Fee Field */
.tx-fee-clickable-field {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: 4px;
  transition: border-color 0.15s;
}

.tx-fee-clickable-field:hover, .tx-fee-clickable-field:active {
  border-color: var(--primary);
}

.tx-fee-display-val {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.tx-fee-display-cur {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
}

/* Borrow Select Row & Sub-page */
.tx-borrow-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
}

.tx-borrow-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.3);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: 0.78rem;
  font-weight: 600;
}

.borrow-people-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 50vh;
  overflow-y: auto;
}

.borrow-person-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.15s;
}

.borrow-person-item:hover, .borrow-person-item:active {
  border-color: var(--primary);
  background: var(--bg-card-hover);
}

/* Form and Modal Body Scrolling */
#transaction-form {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

.tx-modal-body, .tx-page-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  overscroll-behavior-y: contain;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 3 Visual Section Cards */
.tx-section-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

/* Ô 1: SỐ TIỀN Ở GIỮA */
.tx-amount-card {
  padding: 12px 14px;
  text-align: center;
  cursor: pointer;
  background: linear-gradient(180deg, var(--bg-card) 0%, rgba(255, 255, 255, 0.02) 100%);
  user-select: none;
}

.tx-amount-card:hover, .tx-amount-card:active {
  border-color: var(--primary);
}

.tx-amount-centered-display {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
}

.tx-amount-val {
  font-size: 2.2rem;
  font-weight: 800;
  color: #f43f5e;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  transition: color 0.2s ease;
}

.tx-amount-cur {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-muted);
}

/* Ô 2: DANH MỤC & HAY DÙNG */
.tx-category-card {
  gap: 8px;
}

.tx-category-card .category-selected-row {
  margin: 0;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.03);
}

.tx-category-card .tx-category-debt-person-row {
  border-top: 1px solid var(--border-color);
  border-bottom: none;
  padding: 8px 10px;
  cursor: pointer;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.03);
  transition: all 0.15s ease;
}
.tx-category-card .tx-category-debt-person-row:hover,
.tx-category-card .tx-category-debt-person-row:active {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--primary);
}

.tx-haydung-container {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 1px solid var(--border-color);
  padding-top: 8px;
}

.tx-haydung-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tx-haydung-toggle-btn {
  background: transparent;
  border: none;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 2px 4px;
}

/* Ô 3: THÔNG TIN TÀI KHOẢN - NGÀY GIỜ - GHI CHÚ */
.tx-details-card {
  gap: 0;
  padding: 4px 12px;
}

.tx-info-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.tx-info-row:last-of-type {
  border-bottom: none;
}

.tx-info-icon-bubble {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(79, 70, 229, 0.15);
  color: var(--primary);
  transition: all 0.2s ease;
}

.tx-info-content {
  flex: 1;
  min-width: 0;
  position: relative;
}

.tx-clean-select, .tx-clean-input {
  width: 100%;
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-size: 0.9rem;
  font-weight: 500;
  outline: none;
  padding: 0;
  cursor: pointer;
}

.tx-clean-input {
  cursor: text;
}

.tx-clean-select option {
  background: var(--bg-surface);
  color: var(--text-primary);
}

/* Custom Account Dropdown */
.tx-account-dropdown-wrapper {
  cursor: pointer;
  user-select: none;
}

#tx-account-dropdown-menu,
#tx-to-account-dropdown-menu,
.tx-account-dropdown-menu {
  border-top: 1px solid var(--border-color);
  padding: 4px 0;
}

/* Direction Tags for Transfers */
.tx-transfer-dir-tag {
  display: inline-flex;
  align-items: center;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  flex-shrink: 0;
  line-height: 1.4;
}

.tx-transfer-dir-tag.from {
  background: rgba(244, 63, 94, 0.14);
  color: #f43f5e;
  border: 1px solid rgba(244, 63, 94, 0.25);
}

.tx-transfer-dir-tag.to {
  background: rgba(16, 185, 129, 0.14);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.25);
}

/* Divider with Swap Button */
.tx-transfer-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 16px;
  position: relative;
  z-index: 2;
}

.tx-transfer-divider-line {
  flex: 1;
  height: 1px;
  background: var(--border-color);
}

.tx-transfer-swap-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.tx-transfer-swap-btn:hover {
  color: #0ea5e9;
  border-color: #0ea5e9;
  transform: rotate(180deg);
  background: rgba(14, 165, 233, 0.1);
}

.tx-transfer-swap-btn:active {
  transform: rotate(180deg) scale(0.92);
}

#tx-to-account-chevron {
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.tx-account-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 8px;
}

.tx-account-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.12s;
}

.tx-account-option:hover,
.tx-account-option:active {
  background: rgba(255, 255, 255, 0.07);
}

#tx-account-chevron {
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.tx-datetime-display {
  display: block;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
}

.tx-datetime-native-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.tx-info-chevron {
  width: 16px;
  height: 16px;
  color: var(--text-muted);
  flex-shrink: 0;
}

/* Keypad Trigger Button in Money Input */
.keypad-trigger-btn {
  position: absolute;
  right: 36px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: background 0.2s;
}
.keypad-trigger-btn:hover {
  background: var(--primary-light);
}

/* Selected Category Row */
.category-selected-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s ease;
}
.category-selected-row:hover, .category-selected-row:active {
  border-color: var(--primary);
  background: var(--bg-card-hover);
}
.category-selected-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.category-icon-bubble {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Quick Category Grid (2x4 Fixed Grid) */
.quick-category-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(2, 64px);
  gap: 8px;
}
@media (max-width: 480px) {
  .quick-category-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(2, 62px);
    gap: 6px;
  }
}
.quick-cat-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6px 4px;
  border-radius: var(--radius-md);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  cursor: pointer;
  gap: 4px;
  transition: all 0.15s ease;
  user-select: none;
  min-width: 0; /* Crucial for text-overflow ellipsis inside CSS Grid columns */
  overflow: hidden;
  height: 100%;
  box-sizing: border-box;
}
.quick-cat-chip:hover {
  border-color: var(--primary);
  transform: translateY(-1px);
}
.quick-cat-chip.active {
  border-color: var(--primary);
  background: var(--primary-light);
  box-shadow: 0 0 0 1px var(--primary);
}
.quick-cat-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.quick-cat-name {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-primary);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  max-width: 100%;
  padding: 0 2px;
  display: block;
}
.quick-cat-chip.manage-btn {
  border-style: dashed;
  border-color: var(--text-muted);
  color: var(--text-secondary);
}
.quick-cat-chip.manage-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* Collapsible "Thêm chi tiết" Section */
.collapsible-section {
  margin-top: 10px;
  border-top: 1px dashed var(--border-color);
  padding-top: 10px;
}
.collapsible-header-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 6px 0;
  transition: color 0.15s;
}
.collapsible-header-btn:hover {
  color: var(--primary);
}
.borrow-checkbox-box {
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.2);
  border-radius: var(--radius-md);
  padding: 10px 12px;
}
.btn-text-action {
  background: transparent;
  border: none;
  color: var(--primary);
  font-size: 0.75rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: background 0.15s;
}
.btn-text-action:hover {
  background: var(--primary-light);
}

/* ==========================================================================
   POPUP NUMERIC KEYPAD BOTTOM SHEET
   ========================================================================== */
.keypad-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100000 !important;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  overflow: hidden !important;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  pointer-events: none;

  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.keypad-popup-overlay.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.keypad-popup-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  /* No backdrop-filter — causes iOS GPU layer artifacts */
}
.keypad-popup-sheet {
  position: relative;
  width: 100%;
  max-width: 480px;
  background: var(--bg-surface);
  border-radius: 20px 20px 18px 18px;
  border: 1px solid var(--border-color);
  padding: 10px 14px 12px 14px;
  margin-bottom: var(--bottom-nav-height, 64px);
  box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.45);
  transform: translateY(100%);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: default;
}
.keypad-popup-overlay.open .keypad-popup-sheet {
  transform: translateY(0);
}
/* Trên màn hình di động: Giữ phần hở đệm 64px bên dưới bàn phím để không chạm sát màn hình */
@media (max-width: 768px) {
  .keypad-popup-sheet {
    margin-bottom: var(--bottom-nav-height, 64px);
    border-radius: 20px 20px 18px 18px;
    max-width: 100%;
    padding: 10px 12px 12px 12px;
  }
}
.keypad-popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 6px;
  gap: 8px;
}
.keypad-live-display {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
#keypad-live-val {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: -0.02em;
  padding: 2px 4px;
  border-radius: 6px;
  transition: all 0.15s ease;
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.keypad-mode-bar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 2px 0 4px 0;
}
#keypad-live-val.is-selected {
  background: var(--primary);
  color: #ffffff !important;
  box-shadow: 0 0 0 2px rgba(13, 148, 136, 0.4);
}
.keypad-live-cur {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-muted);
}

/* Nút chế độ Ghi chép mẫu (Pill button - IMG_0015 & IMG_0017) */
.keypad-mode-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.keypad-mode-pill:hover {
  border-color: var(--primary);
}
.keypad-mode-pill:active {
  transform: scale(0.95);
}
.keypad-mode-pill.active {
  background: var(--primary);
  color: #ffffff;
  border-color: var(--primary);
  box-shadow: 0 2px 8px rgba(13, 148, 136, 0.4);
}
.keypad-mode-pill.active i,
.keypad-mode-pill.active svg {
  color: #ffffff;
  stroke: #ffffff;
}

/* Panel Ghi chép mẫu (IMG_0017) */
.keypad-templates-panel {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 200px;
  max-height: 225px;
  animation: fadeIn 0.18s ease-out;
}
/* Hỗ trợ hiển thị 4x2 cố định và kéo ngang mượt mà */
.keypad-templates-grid {
  display: grid;
  grid-template-rows: repeat(2, auto);
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 18px) / 4);
  gap: 8px 6px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 4px 2px 6px 2px;
  scrollbar-width: none;
}
.keypad-templates-grid::-webkit-scrollbar {
  display: none;
}
.keypad-template-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  padding: 4px 2px;
  border-radius: var(--radius-md);
  transition: transform 0.1s ease, background 0.1s ease;
  user-select: none;
  text-align: center;
  scroll-snap-align: start;
}
.keypad-template-item:active {
  transform: scale(0.92);
  background: rgba(255, 255, 255, 0.05);
}
.keypad-template-icon-bubble {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  position: relative;
}
/* Giá đè trực tiếp lên icon tinh gọn, hiện đại (Màu đỏ cho chi tiền, nền giữ nguyên) */
.keypad-template-price-tag {
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  color: var(--expense, #f43f5e);
  font-size: 0.65rem;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: var(--radius-full);
  white-space: nowrap;
  line-height: 1.15;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  letter-spacing: -0.01em;
  pointer-events: none;
}
.keypad-template-price-tag.expense {
  color: var(--expense, #f43f5e);
}
.keypad-template-price-tag.income {
  color: var(--income, #10b981);
}
[data-theme="light"] .keypad-template-price-tag {
  background: #ffffff;
  border-color: rgba(244, 63, 94, 0.25);
}
[data-theme="light"] .keypad-template-price-tag.income {
  border-color: rgba(16, 185, 129, 0.25);
}
.keypad-template-title {
  font-size: 0.73rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.18;
  max-width: 76px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.keypad-templates-bottom {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid var(--border-color);
  padding: 6px 0 2px 0;
  margin-top: auto;
  min-height: 40px;
  width: 100%;
}
.keypad-template-pencil-btn {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
}
.keypad-template-pencil-btn:hover {
  color: var(--primary);
  border-color: var(--primary);
}
.keypad-template-tabs {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: var(--bg-surface);
  padding: 3px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-color);
  margin: 0 auto;
}
.keypad-template-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 84px;
  padding: 5px 16px;
  font-size: 0.8rem;
  font-weight: 600;
  text-align: center;
  border-radius: var(--radius-full);
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
  -webkit-user-select: none;
}
.keypad-template-tab.active {
  background: var(--bg-card);
  color: var(--text-primary);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Template Manager Dedicated Sub-Page & Rows */
.template-manager-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 8px;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md, 12px);
  gap: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  transition: border-color 0.15s, background-color 0.15s, transform 0.15s;
  user-select: none;
  -webkit-user-select: none;
}
.template-manager-row.dragging {
  opacity: 0.35;
  transform: scale(0.98);
}
.template-manager-row.drag-over {
  border-top: 2px solid var(--primary);
}
.template-drag-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  cursor: grab;
  padding: 8px 4px;
  border-radius: 4px;
  flex-shrink: 0;
  touch-action: none;
  transition: color 0.15s;
  user-select: none;
  -webkit-user-select: none;
}
.template-drag-handle:hover {
  color: var(--text-primary);
}
.template-drag-handle:active {
  cursor: grabbing;
}
.template-drag-handle i,
.template-drag-handle svg {
  width: 16px;
  height: 16px;
}
.template-reorder-btns {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.template-reorder-btn {
  width: 24px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0;
  transition: all 0.12s ease;
}
.template-reorder-btn:hover {
  background: var(--bg-card-hover);
  color: var(--primary);
  border-color: var(--primary);
}
.template-reorder-btn:active {
  transform: scale(0.9);
}
.template-reorder-btn:disabled {
  opacity: 0.25;
  cursor: default;
  pointer-events: none;
}
.template-manager-info {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}
.template-manager-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* Nút tròn nổi FAB (+) góc phải bên dưới trang Quản lý mẫu */
.template-fab-btn {
  display: none !important;
  position: fixed;
  right: 20px;
  bottom: calc(65px + max(16px, env(safe-area-inset-bottom, 0px)) + 18px);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--primary);
  color: #ffffff;
  border: none;
  box-shadow: 0 4px 18px rgba(13, 148, 136, 0.45);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 999;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s ease, background 0.15s ease;
}
body.view-template-manager .template-fab-btn,
body:has(#view-template-manager.active) .template-fab-btn {
  display: flex !important;
}
@media (min-width: 769px) {
  .template-fab-btn {
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  }
}
.template-fab-btn:active {
  transform: scale(0.92);
  background: var(--primary-hover);
}
.keypad-done-pill {
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-full);
  padding: 8px 18px;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(13, 148, 136, 0.4);
  transition: transform 0.15s;
}
.keypad-done-pill:active {
  transform: scale(0.95);
}

/* ==========================================================================
   FULL CATEGORY PICKER (4 TABS) & CATEGORY MANAGER
   ========================================================================== */
.modal-category-picker-dialog {
  max-width: 560px;
}
.cat-picker-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 10px 14px 0;
  border-bottom: 1px solid var(--border-color);
}
.cat-tab-btn {
  padding: 10px 4px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  font-size: 0.88rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  transition: all 0.2s;
}
.cat-tab-btn[data-tab="expense"].active {
  color: #f43f5e;
  border-bottom-color: #f43f5e;
  background: rgba(244, 63, 94, 0.08);
}
.cat-tab-btn[data-tab="expense"] i {
  color: #f43f5e;
}
.cat-tab-btn[data-tab="income"].active {
  color: #10b981;
  border-bottom-color: #10b981;
  background: rgba(16, 185, 129, 0.08);
}
.cat-tab-btn[data-tab="income"] i {
  color: #10b981;
}
.cat-tab-btn[data-tab="debt"].active {
  color: #f59e0b;
  border-bottom-color: #f59e0b;
  background: rgba(245, 158, 11, 0.08);
}
.cat-tab-btn[data-tab="debt"] i {
  color: #f59e0b;
}
.cat-grid-full {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
@media (max-width: 480px) {
  .cat-grid-full {
    grid-template-columns: repeat(2, 1fr);
  }
}
.cat-picker-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.15s;
}
.cat-picker-item:hover, .cat-picker-item:active {
  border-color: var(--primary);
  background: var(--bg-card-hover);
}
.debt-actions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.debt-action-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.15s;
}
.debt-action-card:hover {
  border-color: var(--primary);
  transform: translateY(-1px);
}
.debt-action-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.debt-action-icon.lend {
  background: rgba(16, 185, 129, 0.15);
  color: var(--income);
}
.debt-action-icon.borrow {
  background: rgba(245, 158, 11, 0.15);
  color: var(--warning);
}
.debt-quick-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.debt-quick-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.15s;
}
.debt-quick-item:hover {
  border-color: var(--primary);
  background: var(--bg-card-hover);
}
.transfer-action-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.15s;
}
.transfer-action-card:hover {
  border-color: var(--primary);
}
.cat-manager-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cat-manager-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
}

/* ==========================================================================
   CUSTOM CALENDAR & DATETIME PICKER (MONEY LOVER / SO THU CHI STYLE)
   ========================================================================== */
.custom-cal-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 100010 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.22s ease, visibility 0.22s ease;

  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.custom-cal-overlay.open {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.custom-cal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.55);
}

.custom-cal-container {
  position: relative;
  width: 100%;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 2;
  transform: scale(0.95);
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);

  cursor: default;
  position: relative;
  z-index: 1;
}

.custom-cal-overlay.open .custom-cal-container {
  transform: scale(1);
}

/* Top Bar: Date | Time */
.custom-cal-topbar {
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12);
  border: 1px solid rgba(0, 0, 0, 0.07);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 12px 16px;
  margin-bottom: 8px;
  position: relative;
}

[data-theme="dark"] .custom-cal-topbar {
  background: #1e293b;
  border-color: #334155;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
}

/* Connectors between Topbar and Card as seen in screenshot */
.custom-cal-topbar::after,
.custom-cal-topbar::before {
  content: '';
  position: absolute;
  bottom: -10px;
  width: 7px;
  height: 14px;
  background: #cbd5e1;
  border-radius: 4px;
  z-index: 10;
}
.custom-cal-topbar::before {
  left: 55px;
}
.custom-cal-topbar::after {
  right: 55px;
}
[data-theme="dark"] .custom-cal-topbar::after,
[data-theme="dark"] .custom-cal-topbar::before {
  background: #475569;
}

.custom-cal-top-item {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px 12px;
  border-radius: 8px;
  font-size: 1.25rem;
  font-weight: 700;
  color: #94a3b8;
  transition: color 0.15s, background 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.custom-cal-top-item.active {
  color: var(--primary);
}

[data-theme="dark"] .custom-cal-top-item.active {
  color: #14b8a6;
}

.custom-cal-top-divider {
  width: 1.5px;
  height: 24px;
  background: #e2e8f0;
}

[data-theme="dark"] .custom-cal-top-divider {
  background: #334155;
}

/* Main Card */
.custom-cal-card {
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16);
  border: 1px solid rgba(0, 0, 0, 0.08);
  width: 100%;
  padding: 16px 16px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  z-index: 5;
}

[data-theme="dark"] .custom-cal-card {
  background: #1e293b;
  border-color: #334155;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* Header */
.custom-cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 4px 6px 4px;
}

.custom-cal-nav-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  color: #334155;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  transition: background 0.15s, transform 0.1s;
}

[data-theme="dark"] .custom-cal-nav-btn {
  color: #cbd5e1;
}

.custom-cal-nav-btn:hover {
  background: rgba(0, 0, 0, 0.06);
}

[data-theme="dark"] .custom-cal-nav-btn:hover {
  background: rgba(255, 255, 255, 0.08);
}

.custom-cal-nav-btn:active {
  transform: scale(0.92);
}

.custom-cal-month-pill {
  background: var(--primary);
  color: #ffffff;
  border: none;
  cursor: pointer;
  border-radius: 24px;
  padding: 6px 18px;
  font-size: 0.95rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  box-shadow: 0 2px 8px rgba(13, 148, 136, 0.35);
  transition: opacity 0.15s, transform 0.1s;
}

.custom-cal-month-pill:hover {
  opacity: 0.92;
}

.custom-cal-month-pill:active {
  transform: scale(0.96);
}

/* Weekdays Row: T2 -> CN */
.custom-cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  color: #64748b;
  font-size: 0.88rem;
  font-weight: 500;
  padding: 4px 0;
  user-select: none;
}

[data-theme="dark"] .custom-cal-weekdays {
  color: #94a3b8;
}

/* Days Grid */
.custom-cal-days-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  row-gap: 6px;
  justify-items: center;
  align-items: center;
  user-select: none;
}

.custom-cal-day {
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  border-radius: 50%;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  padding: 0;
}

.custom-cal-day.current-month {
  color: #1e293b;
}

[data-theme="dark"] .custom-cal-day.current-month {
  color: #f1f5f9;
}

.custom-cal-day.other-month {
  color: #94a3b8;
  font-weight: 400;
}

[data-theme="dark"] .custom-cal-day.other-month {
  color: #64748b;
}

.custom-cal-day:hover:not(.selected) {
  background: rgba(0, 0, 0, 0.05);
}

[data-theme="dark"] .custom-cal-day:hover:not(.selected) {
  background: rgba(255, 255, 255, 0.08);
}

/* Selected Day Circle: Emerald Green Badge */
.custom-cal-day.selected {
  background: var(--primary) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  box-shadow: 0 3px 10px rgba(13, 148, 136, 0.42);
  transform: scale(1.04);
}

.custom-cal-day.today:not(.selected) {
  position: relative;
}

.custom-cal-day.today:not(.selected)::after {
  content: '';
  position: absolute;
  bottom: 3px;
  width: 4px;
  height: 4px;
  background: var(--primary);
  border-radius: 50%;
}

/* Month Selector Panel */
.custom-cal-month-selector {
  padding: 6px 0;
}

.custom-cal-year-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-bottom: 12px;
}

.custom-cal-year-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--primary);
}

[data-theme="dark"] .custom-cal-year-title {
  color: #14b8a6;
}

.custom-cal-months-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.custom-cal-month-item {
  height: 38px;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  color: var(--text-primary);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.custom-cal-month-item:hover {
  border-color: var(--primary);
  background: rgba(13, 148, 136, 0.1);
}

.custom-cal-month-item.selected {
  background: var(--primary);
  color: #ffffff;
  border-color: var(--primary);
}

/* Time Picker View */
.custom-cal-time-view {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  padding: 4px 0;
}

.custom-cal-time-header {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-muted);
}

.custom-cal-time-display-box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 8px 16px;
  background: rgba(13, 148, 136, 0.1);
  border-radius: 14px;
  border: 1px solid rgba(13, 148, 136, 0.25);
}

.custom-cal-time-field {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.custom-cal-time-val {
  font-size: 2rem;
  font-weight: 800;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

[data-theme="dark"] .custom-cal-time-val {
  color: #14b8a6;
}

.custom-cal-time-label {
  font-size: 0.72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  font-weight: 600;
}

.custom-cal-time-colon {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--primary);
  margin-top: -6px;
}

.custom-cal-time-columns {
  display: flex;
  gap: 14px;
  width: 100%;
  justify-content: center;
}

.custom-cal-time-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.custom-cal-time-col-title {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
}

.custom-cal-time-list {
  width: 100%;
  height: 120px;
  overflow-y: auto;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--bg-card);
  scrollbar-width: thin;
}

.custom-cal-time-item {
  width: 100%;
  height: 30px;
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-size: 0.92rem;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.12s;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.custom-cal-time-item:hover {
  background: rgba(0, 0, 0, 0.06);
}

.custom-cal-time-item.active {
  background: var(--primary);
  color: #ffffff;
}

.custom-cal-time-presets {
  display: flex;
  gap: 6px;
  width: 100%;
  justify-content: center;
  flex-wrap: wrap;
}

.cal-time-preset-btn {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
}

.cal-time-preset-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* Bottom Action Buttons: Hôm nay & Xong */
.custom-cal-actions {
  display: flex;
  gap: 12px;
  margin-top: 4px;
}

.custom-cal-btn-today {
  flex: 1;
  height: 44px;
  background: transparent;
  border: 1.5px solid var(--primary);
  color: var(--primary);
  border-radius: 12px;
  font-weight: 600;
  font-size: 0.98rem;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  display: flex;
  align-items: center;
  justify-content: center;
}

[data-theme="dark"] .custom-cal-btn-today {
  border-color: #14b8a6;
  color: #14b8a6;
}

.custom-cal-btn-today:hover {
  background: rgba(13, 148, 136, 0.1);
}

.custom-cal-btn-today:active {
  transform: scale(0.97);
}

.custom-cal-btn-done {
  flex: 1;
  height: 44px;
  background: var(--primary);
  border: none;
  color: #ffffff;
  border-radius: 12px;
  font-weight: 600;
  font-size: 0.98rem;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(13, 148, 136, 0.35);
  transition: opacity 0.15s, transform 0.1s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.custom-cal-btn-done:hover {
  opacity: 0.92;
}

.custom-cal-btn-done:active {
  transform: scale(0.97);
}


#view-accounts {
  padding-bottom: 96px;
}

/* ==================== ACTION SHEET (BOTTOM SHEET FOR ACCOUNTS) ==================== */
.action-sheet-dialog {
  max-width: 440px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.6);
}

.action-sheet-header {
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-card);
}

.action-sheet-icon {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.action-sheet-info {
  flex: 1;
  min-width: 0;
}

.action-sheet-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 2px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.action-sheet-subtitle {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.action-sheet-body {
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 60vh;
  overflow-y: auto;
}

.action-sheet-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background 0.15s ease, transform 0.1s ease;
  user-select: none;
}

.action-sheet-item:hover, .action-sheet-item:active {
  background: rgba(255, 255, 255, 0.08);
}

.action-sheet-item.danger:hover, .action-sheet-item.danger:active {
  background: rgba(244, 63, 94, 0.12);
}

.action-sheet-item-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.action-sheet-item-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.action-sheet-item-title {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
}

.action-sheet-item.danger .action-sheet-item-title {
  color: #f43f5e;
}

.action-sheet-item-desc {
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.3;
  margin-top: 1px;
}

.action-sheet-chevron {
  width: 16px;
  height: 16px;
  color: var(--text-muted);
  opacity: 0.6;
  flex-shrink: 0;
}

.action-sheet-footer {
  padding: 12px 16px;
  border-top: 1px solid var(--border-color);
  background: var(--bg-card);
}

/* ==================== STATEMENT PREVIEW STYLES ==================== */
.statement-preview-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 14px;
  margin-bottom: 16px;
}

.statement-preview-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 10px;
}

.statement-preview-stat {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
}

.statement-preview-stat-label {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-bottom: 2px;
}

.statement-preview-stat-val {
  font-size: 0.95rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.statement-preview-table-wrap {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  overflow-x: auto;
  max-height: 180px;
  margin-top: 12px;
}

.statement-preview-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
  text-align: left;
}

.statement-preview-table th {
  background: var(--bg-card);
  padding: 6px 10px;
  color: var(--text-secondary);
  font-weight: 600;
  border-bottom: 1px solid var(--border-color);
  white-space: nowrap;
}

.statement-preview-table td {
  padding: 6px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  white-space: nowrap;
}


/* ==================== ARCHIVED ACCOUNTS COLLAPSIBLE LISTDOWN ==================== */
.archived-accounts-section {
  margin-top: 24px;
  border-top: 1px dashed var(--border-color);
  padding-top: 16px;
}

.archived-accounts-toggle-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

.archived-accounts-toggle-btn:hover {
  background: var(--bg-card-hover);
  color: var(--text-secondary);
  border-color: rgba(255, 255, 255, 0.15);
}

.archived-toggle-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.archived-toggle-chevron {
  width: 16px;
  height: 16px;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.archived-toggle-chevron.rotated {
  transform: rotate(180deg);
}

.archived-accounts-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}

/* FAB button touch optimizations to prevent 300ms zoom delay */
#fab-add-tx, .fab-btn, .mobile-fab-center {
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* ==================== ACCOUNT EDIT & FORM ENHANCEMENTS ==================== */
.acc-exclude-report-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  margin-top: 4px;
}

.acc-exclude-report-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}

.acc-exclude-report-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
}

.acc-exclude-report-desc {
  font-size: 0.76rem;
  color: var(--text-muted);
  line-height: 1.35;
}

/* Modern Toggle Switch (Đồng bộ app-switch và switch trên mọi thiết bị và nền) */
.app-switch,
.switch {
  position: relative !important;
  display: inline-block !important;
  width: 44px !important;
  height: 24px !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent !important;
  user-select: none !important;
  vertical-align: middle !important;
}

.app-switch input,
.switch input {
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  position: absolute !important;
  pointer-events: none !important;
}

.app-switch-slider,
.switch .slider {
  position: absolute !important;
  cursor: pointer !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background-color: #cbd5e1 !important;
  border: 2px solid #94a3b8 !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  border-radius: 24px !important;
  box-sizing: border-box !important;
}

[data-theme="dark"] .app-switch-slider,
[data-theme="dark"] .switch .slider,
.dark-theme .app-switch-slider,
.dark-theme .switch .slider,
body.dark .app-switch-slider,
body.dark .switch .slider {
  background-color: rgba(255, 255, 255, 0.15) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
}

.app-switch-slider.round,
.switch .slider.round {
  border-radius: 24px !important;
}

.app-switch-slider::before,
.app-switch-slider:before,
.switch .slider::before,
.switch .slider:before {
  position: absolute !important;
  content: "" !important;
  height: 16px !important;
  width: 16px !important;
  left: 2px !important;
  top: 2px !important;
  background-color: #ffffff !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  border-radius: 50% !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

.app-switch input:checked + .app-switch-slider,
.app-switch input:checked + .slider,
.switch input:checked + .app-switch-slider,
.switch input:checked + .slider {
  background-color: var(--primary, #10b981) !important;
  border-color: var(--primary, #10b981) !important;
}

.app-switch input:checked + .app-switch-slider::before,
.app-switch input:checked + .app-switch-slider:before,
.switch input:checked + .slider::before,
.switch input:checked + .slider:before {
  transform: translateX(20px) !important;
  background-color: #ffffff !important;
}

.account-badge.exclude {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--text-muted);
  background: rgba(148, 163, 184, 0.12);
  border: 1px solid rgba(148, 163, 184, 0.2);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
}

.account-currency-tag {
  display: inline-flex;
  align-items: center;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--primary);
  background: rgba(79, 70, 229, 0.12);
  border: 1px solid rgba(79, 70, 229, 0.2);
  padding: 1px 5px;
  border-radius: 4px;
}

.account-desc-label {
  font-size: 0.72rem;
  color: var(--text-muted);
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Account Form View - Phong cách trang ghi chép thu chi & ảnh tham khảo */
.acc-amount-card {
  padding: 18px 14px;
  text-align: center;
  background: linear-gradient(180deg, var(--bg-card) 0%, rgba(255, 255, 255, 0.02) 100%);
  cursor: pointer;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  transition: all 0.2s ease;
  user-select: none;
  -webkit-user-select: none;
}

.acc-amount-card:hover,
.acc-amount-card:active {
  border-color: var(--primary);
  background: linear-gradient(180deg, var(--bg-card) 0%, rgba(79, 70, 229, 0.05) 100%);
  box-shadow: 0 0 0 1px rgba(79, 70, 229, 0.25);
}

.acc-amount-val {
  font-size: 2.1rem;
  font-weight: 800;
  color: var(--primary);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.acc-amount-cur {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-muted);
  margin-left: 6px;
  vertical-align: middle;
}

/* Nút X xóa nhanh ghi chú trên toàn app */
.input-clearable-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.input-clearable-wrapper input {
  padding-right: 32px !important;
}

.btn-clear-input {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(148, 163, 184, 0.2);
  color: var(--text-muted);
  border: none;
  padding: 0;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  z-index: 3;
  -webkit-tap-highlight-color: transparent;
}

.btn-clear-input i,
.btn-clear-input svg {
  width: 12px;
  height: 12px;
  stroke-width: 2.5;
  pointer-events: none;
}

.btn-clear-input:hover,
.btn-clear-input:active {
  background: var(--text-muted);
  color: var(--bg-card);
  transform: translateY(-50%) scale(1.08);
}

.acc-styled-select {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 6px 0;
  font-family: inherit;
}

.acc-styled-select option {
  background: var(--bg-card);
  color: var(--text-primary);
}

.acc-exclude-info-row {
  transition: background 0.15s ease;
}

/* ==================== BANK & E-WALLET LOGOS ==================== */
.bank-logo-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
  user-select: none;
  -webkit-user-select: none;
  box-sizing: border-box;
}

.bank-logo-badge img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 1px;
  box-sizing: border-box;
}

.account-icon-bubble .bank-logo-badge,
.tx-info-icon-bubble .bank-logo-badge {
  max-width: 100%;
  max-height: 100%;
}

.bank-provider-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px;
  background: var(--bg-hover);
  border-radius: var(--radius-md);
  margin-bottom: 12px;
  overflow-x: auto;
  scrollbar-width: none;
}
.bank-provider-tabs::-webkit-scrollbar {
  display: none;
}

.bank-provider-tab-btn {
  flex: 1;
  min-width: 75px;
  padding: 6px 10px;
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  text-align: center;
}

.bank-provider-tab-btn.active {
  background: var(--bg-card);
  color: var(--primary);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.bank-provider-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  padding-bottom: 24px;
}

@media (max-width: 330px) {
  .bank-provider-grid {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 600px) {
  .bank-provider-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.bank-provider-card {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 10px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.18s ease;
  text-align: left;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

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

.bank-provider-card:hover {
  border-color: var(--primary);
  background: var(--bg-hover);
}

.bank-provider-card.selected {
  border-color: var(--primary);
  background: rgba(99, 102, 241, 0.08);
}

.bank-provider-card-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.bank-provider-card-name {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bank-provider-card-sub {
  font-size: 0.7rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* ==========================================================================
   ACCOUNTS TAB ENHANCEMENTS - NET WORTH, SAVINGS, ACCUMULATIONS, ASSETS
   ========================================================================== */

/* 1. Net Worth Header Card */
.account-networth-card {
  background: linear-gradient(135deg, rgba(13, 148, 136, 0.16) 0%, rgba(79, 70, 229, 0.14) 100%);
  border: 1px solid rgba(13, 148, 136, 0.28);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  margin-bottom: 22px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

[data-theme="dark"] .account-networth-card {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
}

.networth-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.networth-label-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.networth-label {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.networth-privacy-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 3px 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  transition: all 0.15s ease;
}

.networth-privacy-btn:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.08);
}

.networth-add-circle-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--primary);
  color: #ffffff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(13, 148, 136, 0.35);
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.18s ease;
  touch-action: manipulation;
}

.networth-add-circle-btn:hover {
  transform: scale(1.06);
  box-shadow: 0 4px 14px rgba(13, 148, 136, 0.5);
}

.networth-add-circle-btn:active {
  transform: scale(0.95);
}

.networth-amount-row {
  margin: 4px 0 14px 0;
}

.networth-big-val {
  font-size: 2.15rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  display: block;
}

.networth-breakdown-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 10px;
  padding-top: 12px;
  border-top: 1px dashed rgba(255, 255, 255, 0.12);
  width: 100%;
  box-sizing: border-box;
}

[data-theme="light"] .networth-breakdown-row {
  border-top-color: rgba(0, 0, 0, 0.1);
}

.networth-mini-pill {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  gap: 5px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  padding: 4px 8px;
  font-size: 0.74rem;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  white-space: nowrap;
}

.mini-pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.mini-pill-label {
  color: var(--text-muted);
  font-weight: 500;
  font-size: 0.73rem;
  flex-shrink: 0;
  white-space: nowrap;
  text-align: left;
}

.mini-pill-val {
  font-weight: 600;
  font-size: 0.74rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  letter-spacing: -0.01em;
  text-align: left;
  flex-shrink: 0;
  min-width: 0;
}

/* 2. Group Sections - Vùng bao quanh rõ ràng cho từng nhóm tài sản */
.accounts-group-container {
  margin-top: 22px;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

[data-theme="light"] .accounts-group-container {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.accounts-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-color);
  flex-wrap: wrap;
  gap: 12px;
}

[data-theme="light"] .accounts-group-header {
  border-bottom-color: rgba(0, 0, 0, 0.06);
}

.accounts-group-title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.accounts-group-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.accounts-group-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: -0.01em;
}

.accounts-group-subtitle {
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--text-primary);
  display: block;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

.group-count-badge {
  font-size: 0.72rem;
  background: var(--bg-hover);
  padding: 2px 8px;
  border-radius: 10px;
  color: var(--text-muted);
  font-weight: 600;
  border: 1px solid var(--border-color);
}

/* Nút tròn dấu cộng góc phải gọn gàng cho từng nhóm */
.btn-group-circle-add {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg-hover);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.btn-group-circle-add i,
.btn-group-circle-add svg {
  width: 16px;
  height: 16px;
  stroke-width: 2.2;
}

.btn-group-circle-add:hover {
  background: var(--primary);
  color: #ffffff !important;
  border-color: var(--primary);
  transform: scale(1.08);
  box-shadow: 0 3px 8px rgba(79, 70, 229, 0.3);
}

.btn-group-circle-add:active {
  transform: scale(0.94);
}

[data-theme="light"] .btn-group-circle-add {
  background: #f1f5f9;
  border-color: rgba(0, 0, 0, 0.1);
  color: var(--text-secondary);
}

[data-theme="light"] .btn-group-circle-add:hover {
  background: var(--primary);
  color: #ffffff !important;
  border-color: var(--primary);
}

/* Light mode adjustments for inner cards inside group container */
[data-theme="light"] .accounts-group-container .account-list-item,
[data-theme="light"] .accounts-group-container .group-item-card {
  background: #f8fafc;
  border: 1px solid rgba(0, 0, 0, 0.07);
}

[data-theme="light"] .accounts-group-container .account-list-item:hover,
[data-theme="light"] .accounts-group-container .group-item-card:hover {
  background: #f1f5f9;
  border-color: rgba(0, 0, 0, 0.15);
}

/* Empty State inside Group Containers */
.accounts-empty-card,
.accounts-group-empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  text-align: center;
}

.accounts-empty-card .empty-text,
.accounts-group-empty-state .empty-text {
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.4;
}

/* 4. Asset Types Sub-Grouping (BĐS, Kim loại quý, Ngoại tệ, Crypto, Khác) */
.assets-cards-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.asset-type-group {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

[data-theme="light"] .asset-type-group {
  background: #f8fafc;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.asset-type-group:hover {
  border-color: rgba(255, 255, 255, 0.16);
}

[data-theme="light"] .asset-type-group:hover {
  border-color: rgba(0, 0, 0, 0.12);
}

.asset-type-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--border-color);
  flex-wrap: wrap;
  gap: 8px;
}

[data-theme="light"] .asset-type-header {
  border-bottom-color: rgba(0, 0, 0, 0.06);
}

.asset-type-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.asset-type-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.asset-type-name-info {
  display: flex;
  align-items: center;
  gap: 6px;
}

.asset-type-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-primary);
}

.asset-type-header-stats {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.asset-type-subtotal {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.asset-type-pnl {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 6px;
  font-variant-numeric: tabular-nums;
}

.asset-type-pnl.profit {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.25);
}

.asset-type-pnl.loss {
  background: rgba(244, 63, 94, 0.15);
  color: #f43f5e;
  border: 1px solid rgba(244, 63, 94, 0.25);
}

.asset-type-items-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

[data-theme="light"] .asset-type-group .group-item-card {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .asset-type-group .group-item-card:hover {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.15);
}

.badge-beta {
  font-size: 0.65rem;
  background: linear-gradient(135deg, #8b5cf6, #ec4899);
  color: #ffffff;
  padding: 2px 7px;
  border-radius: 6px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.btn-group-action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.btn-group-action:hover {
  border-color: var(--primary);
  background: var(--bg-hover);
  color: var(--primary);
}

/* 3. Cards Lists */
.savings-cards-list,
.accumulations-cards-list,
.assets-cards-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Common Card Item */
.group-item-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  transition: all 0.2s ease;
  position: relative;
  cursor: pointer;
}

.group-item-card:hover {
  border-color: rgba(255, 255, 255, 0.2);
  background: var(--bg-card-hover);
}

.group-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.group-card-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.group-card-icon-wrap {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.group-card-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.group-card-sub {
  font-size: 0.74rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}

.group-card-body {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: 6px;
}

.group-card-amount {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.group-card-stat {
  font-size: 0.76rem;
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.group-card-stat-val {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Badge Tags */
.term-badge {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 6px;
  background: rgba(14, 165, 233, 0.12);
  color: #0ea5e9;
  border: 1px solid rgba(14, 165, 233, 0.2);
}

.rate-badge {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 6px;
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.2);
}

.pnl-badge {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
  font-variant-numeric: tabular-nums;
}

.pnl-badge.profit {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.pnl-badge.loss {
  background: rgba(244, 63, 94, 0.15);
  color: #f43f5e;
  border: 1px solid rgba(244, 63, 94, 0.3);
}

.pnl-badge.neutral {
  background: rgba(148, 163, 184, 0.15);
  color: var(--text-muted);
}

/* Accumulation Progress Bar */
.acc-progress-wrap {
  width: 100%;
  margin: 10px 0 6px 0;
}

.acc-progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.75rem;
  margin-bottom: 4px;
}

.acc-progress-percent {
  font-weight: 700;
  color: #f59e0b;
}

.acc-progress-track {
  width: 100%;
  height: 7px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}

[data-theme="light"] .acc-progress-track {
  background: rgba(0, 0, 0, 0.08);
}

.acc-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #f59e0b, #10b981);
  border-radius: 10px;
  transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Calculation Highlight Card */
.savings-calc-preview-card {
  background: rgba(245, 158, 11, 0.06);
  border: 1px dashed rgba(245, 158, 11, 0.35);
  border-radius: var(--radius-md);
  padding: 12px 14px;
}

.calc-preview-header {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 10px;
}

.calc-preview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.calc-preview-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.calc-preview-item.full-width {
  grid-column: span 2;
  padding-top: 6px;
  margin-top: 4px;
  border-top: 1px dashed rgba(255, 255, 255, 0.08);
}

[data-theme="light"] .calc-preview-item.full-width {
  border-top-color: rgba(0, 0, 0, 0.08);
}

.calc-item-label {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.calc-item-val {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.calc-item-val.highlight {
  font-size: 1.05rem;
  color: var(--primary);
  font-weight: 800;
}

/* Animation xoay icon làm mới live price */
@keyframes spin-anim {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.rotating {
  animation: spin-anim 0.8s linear infinite !important;
}


/* ==================== SOURCE ACCOUNT PICKER (NGUỒN TIỀN CÓ LOGO) ==================== */
.source-acc-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  border: 1.5px solid var(--border-color);
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.source-acc-item:hover {
  border-color: var(--primary);
  background: rgba(79, 70, 229, 0.05);
}

.source-acc-item:active {
  transform: scale(0.99);
}

.source-acc-item.active {
  background: rgba(79, 70, 229, 0.08);
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary);
}


/* Modal Backdrop for Full Dimmed Area */
.modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}


/* ==========================================================================
   ACCOUNTS TAB - COMPACT & OVERFLOW-PROOF RESPONSIVE LAYOUT
   ========================================================================== */

#view-accounts {
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}

.accounts-group-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.accounts-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-color);
  gap: 8px;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

.accounts-group-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
  overflow: hidden;
}

.accounts-group-title-wrap > div:nth-child(2) {
  min-width: 0;
  flex: 1;
  overflow: hidden;
}

.accounts-group-title {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.accounts-group-subtitle {
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--text-primary);
  display: block;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Asset Sub-Group (Khung lồng cấp 2) */
.asset-type-group {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 10px 10px 8px;
  margin-bottom: 10px;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.asset-type-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px dashed var(--border-color);
  gap: 6px;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

.asset-type-title-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 1;
  overflow: hidden;
}

.asset-type-name-info {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  overflow: hidden;
}

.asset-type-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.asset-type-header-stats {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.asset-type-subtotal {
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.asset-type-pnl {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 5px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Thẻ chi tiết tài sản / sổ tiết kiệm (Khung bên trong cùng) */
.assets-cards-list,
.savings-cards-list,
.accumulations-cards-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
}

.group-item-card {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 11px 12px;
  box-sizing: border-box;
  overflow: hidden;
  border-radius: var(--radius-md);
}

.group-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.group-card-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 0%;
  min-width: 0;
  max-width: calc(100% - 36px);
  overflow: hidden;
}

.group-card-info-wrap {
  min-width: 0;
  flex: 1 1 0%;
  max-width: 100%;
  overflow: hidden;
}

.group-card-name {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  width: 100%;
  max-width: 100%;
}

.group-card-sub {
  font-size: 0.72rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Nút tùy chọn 3 chấm gọn gàng không chiếm diện tích */
.group-card-more-btn {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  border-radius: 50% !important;
  border: none !important;
  background: transparent !important;
  color: var(--text-muted) !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
}

.group-card-more-btn:hover {
  background: var(--bg-hover) !important;
  color: var(--text-primary) !important;
}

.group-card-body {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 6px;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

.group-card-body > div:first-child {
  min-width: 0;
  flex: 1;
  overflow: hidden;
}

.group-card-amount {
  font-size: 1.08rem;
  font-weight: 800;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.group-card-stat {
  font-size: 0.74rem;
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
  max-width: 100%;
}

.pnl-badge {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 6px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  display: inline-block;
}

/* ==========================================================================
   MOBILE SCREEN TUNING: THU GỌN KHUNG VIỀN & CHỐNG TRÀN TOÀN DIỆN (< 768px)
   ========================================================================== */
@media (max-width: 768px) {
  /* Bóp lề ngoài sát gần mép màn hình hơn */
  #view-accounts.page-view {
    padding: 12px 7px 20px 7px !important;
  }

  /* Khung bao ngoài của từng nhóm tài sản */
  .accounts-group-container {
    padding: 12px 12px !important; /* Bóp nhỏ lề 2 bên sát viền */
    margin-top: 14px !important;
    border-radius: 14px !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
  }

  .accounts-group-icon {
    width: 34px !important;
    height: 34px !important;
    border-radius: 10px !important;
  }

  .accounts-group-title {
    font-size: 0.95rem !important;
  }

  .accounts-group-subtitle {
    font-size: 0.86rem !important;
  }

  /* Khung lồng nhau cấp 2 (Kim loại quý, BĐS, Ngoại tệ...) -> Thu hẹp khoảng cách */
  .asset-type-group {
    padding: 8px 7px 6px !important;
    border-radius: 10px !important;
    margin-bottom: 8px !important;
    background: rgba(255, 255, 255, 0.015) !important;
  }

  .asset-type-icon {
    width: 24px !important;
    height: 24px !important;
    border-radius: 6px !important;
  }

  .asset-type-title {
    font-size: 0.84rem !important;
  }

  .asset-type-subtotal {
    font-size: 0.86rem !important;
  }

  .asset-type-pnl {
    font-size: 0.65rem !important;
    padding: 1px 5px !important;
  }

  /* Thẻ chi tiết con bên trong cùng */
  .asset-type-group .group-item-card,
  .accounts-group-container .group-item-card {
    padding: 9px 8px !important;
    border-radius: 8px !important;
  }

  .group-card-icon-wrap {
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
  }

  .group-card-name {
    font-size: 0.88rem !important;
  }

  .group-card-amount {
    font-size: 0.98rem !important;
  }

  .pnl-badge {
    font-size: 0.66rem !important;
    padding: 2px 5px !important;
  }

  .btn-group-circle-add {
    width: 30px !important;
    height: 30px !important;
  }
}

/* Lock all account & asset containers to 100% viewport width and clamp overflow */
html, body {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: clip !important;
  box-sizing: border-box !important;
}

#app-container {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: clip !important;
  box-sizing: border-box !important;
}

.main-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: clip !important;
  box-sizing: border-box !important;
}

.page-view {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: clip !important;
  box-sizing: border-box !important;
}

#view-accounts {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

.accounts-group-container {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.accounts-group-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.accounts-group-title-wrap {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  max-width: calc(100% - 75px) !important;
  overflow: hidden !important;
}

.accounts-group-title-wrap > div:nth-child(2) {
  min-width: 0 !important;
  flex: 1 1 0% !important;
  overflow: hidden !important;
}

.accounts-group-title {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
}

.accounts-group-subtitle {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
}

.accounts-group-actions {
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.assets-cards-list,
.savings-cards-list,
.accumulations-cards-list {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.asset-type-group {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.asset-type-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.asset-type-title-wrap {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  max-width: calc(100% - 100px) !important;
  overflow: hidden !important;
}

.asset-type-title {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
}

.asset-type-header-stats {
  flex-shrink: 0 !important;
  max-width: 95px !important;
  overflow: hidden !important;
  text-align: right !important;
  white-space: nowrap !important;
}

.asset-type-subtotal {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: inline-block !important;
  max-width: 100% !important;
}

.asset-type-items-list {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.group-item-card {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.group-card-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.group-card-title-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex: 1 1 0% !important;
  min-width: 0 !important;
  max-width: calc(100% - 36px) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.group-card-info-wrap {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  width: 0 !important; /* CRITICAL FOR WEBKIT: eliminates intrinsic min-content push */
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.group-card-name {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  box-sizing: border-box !important;
}

.group-card-sub {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}

.group-card-more-btn {
  flex-shrink: 0 !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.group-card-body {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-end !important;
  margin-top: 6px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.group-card-stat {
  max-width: 55% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  text-align: right !important;
}

.pnl-badge {
  display: inline-block !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Right-align asset unit select and wrapper */
#asset-unit-wrapper {
  text-align: right !important;
  max-width: 140px;
}
#asset-quantity-row .tx-info-content {
  min-width: 0;
}
#asset-quantity-row .tx-info-content > div:first-child {
  min-width: 0;
  flex: 1;
}

#asset-unit-select {
  text-align: right !important;
  text-align-last: right !important;
  direction: rtl !important;
}

#asset-unit-select option {
  direction: ltr !important;
  text-align: right !important;
}

#asset-unit-input {
  text-align: right !important;
}

/* ==========================================================================
   TRANSACTIONS VIEW MODERNIZATION (LỊCH SỬ GHI CHÉP & BỘ LỌC TÀI KHOẢN/THỜI GIAN)
   ========================================================================== */

/* Header Center: Centered Account Filter Button (Căn giữa) */
.tx-header-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: calc(100% - 130px);
  z-index: 60;
  pointer-events: auto;
}

.tx-header-acc-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  padding: 5px 12px 5px 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  max-width: 100%;
  box-shadow: var(--shadow-sm);
}

.tx-header-acc-btn:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-focus);
}

.tx-header-acc-icon-badge {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  flex-shrink: 0;
}

.tx-header-acc-name {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
}

.tx-header-acc-chevron {
  width: 14px;
  height: 14px;
  color: var(--text-muted);
  flex-shrink: 0;
}

/* Header Account Filter Dropdown Menu (Sổ xuống tương tự bên Thêm thu chi) */
.tx-header-account-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  min-width: 250px;
  max-width: 320px;
  max-height: 60vh;
  overflow-y: auto;
  z-index: 100;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.tx-header-acc-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s ease;
}

.tx-header-acc-option:hover,
.tx-header-acc-option.active {
  background: rgba(255, 255, 255, 0.08);
}

.tx-header-acc-option-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

.tx-header-acc-option-icon {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tx-header-acc-option-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.tx-header-acc-option-name {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tx-header-acc-option-balance {
  font-size: 0.74rem;
  color: var(--text-muted);
}

/* Header Search Overlay: Mở trực tiếp trên thanh tiêu đề */
.tx-header-search-bar {
  position: absolute;
  inset: 0;
  background: var(--bg-surface);
  z-index: 100;
  display: flex;
  align-items: center;
  padding: 0 14px;
  gap: 10px;
  animation: fadeIn 0.15s ease;
}

.tx-header-search-bar .tx-search-input-icon {
  position: absolute;
  left: 26px;
  width: 16px;
  height: 16px;
  color: var(--text-muted);
  pointer-events: none;
}

.tx-search-header-input {
  flex: 1;
  height: 38px;
  background: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-md) !important;
  padding-left: 36px !important;
  padding-right: 32px !important;
  font-size: 0.9rem !important;
  color: var(--text-primary) !important;
  outline: none;
  box-sizing: border-box;
}

.tx-search-header-input:focus {
  border-color: var(--border-focus) !important;
  box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.25) !important;
}

.tx-search-cancel-btn {
  background: transparent;
  border: none;
  color: var(--primary);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  padding: 6px 4px;
  white-space: nowrap;
}

/* Right Search Icon Button in .header-actions */
.tx-header-search-btn {
  color: var(--text-secondary);
  cursor: pointer;
}

.tx-header-search-btn:hover {
  color: var(--primary);
}

/* Time Filter Card */
.tx-time-filter-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 12px 14px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-sm);
}

.tx-time-navigator {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 8px;
  margin-bottom: 10px;
}

.btn-time-nav {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.btn-time-nav:hover {
  background: var(--bg-card-hover);
  color: var(--text-primary);
  border-color: var(--border-focus);
}

.btn-time-display {
  flex: 1;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 0 12px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.15s ease;
  min-width: 0;
}

.btn-time-display:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-focus);
}

.btn-time-display span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tx-time-summary-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 10px 14px;
  background: var(--bg-card);
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.04);
  margin-bottom: 10px;
}

.tx-time-summary-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  text-align: center;
}

.tx-summary-label {
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.82rem;
}

.tx-summary-val {
  font-weight: 700;
  font-size: 1.05rem;
  font-feature-settings: "tnum";
}

.tx-summary-val.income-text {
  color: var(--income);
}

.tx-summary-val.expense-text {
  color: var(--expense);
}

.tx-time-summary-divider {
  width: 1px;
  height: 26px;
  background: var(--border-color);
}

/* Type Filter Bar: Ép không tràn viền màn hình và đồng bộ màu với mục Thêm Ghi Chép */
.tx-type-filter-bar {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 6px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.tx-type-filter-bar .tx-filter-pill {
  width: 100% !important;
  height: 34px !important;
  padding: 0 2px !important;
  border-radius: var(--radius-md) !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  text-align: center !important;
  justify-content: center !important;
  display: flex !important;
  align-items: center !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
  border: 1px solid var(--border-color) !important;
  background: var(--bg-card) !important;
  color: var(--text-secondary) !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.tx-type-filter-bar .tx-filter-pill:hover {
  background: var(--bg-card-hover) !important;
  color: var(--text-primary) !important;
}

/* Active states đồng bộ màu */
.tx-type-filter-bar .tx-filter-pill[data-type="all"].active {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(13, 148, 136, 0.35) !important;
}

.tx-type-filter-bar .tx-filter-pill[data-type="expense"].active {
  background: #f43f5e !important;
  border-color: #f43f5e !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(244, 63, 94, 0.35) !important;
}

.tx-type-filter-bar .tx-filter-pill[data-type="income"].active {
  background: #10b981 !important;
  border-color: #10b981 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.35) !important;
}

.tx-type-filter-bar .tx-filter-pill[data-type="transfer"].active {
  background: #0ea5e9 !important;
  border-color: #0ea5e9 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(14, 165, 233, 0.35) !important;
}

/* UICalendar Filter Modes (Theo Tháng / Theo Ngày / Ngày tuỳ chỉnh / Tất cả) */
.custom-cal-filter-modes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--bg-card);
  padding: 4px;
  border-radius: var(--radius-md);
  margin-bottom: 12px;
  border: 1px solid var(--border-color);
  gap: 4px;
  width: 100%;
  box-sizing: border-box;
}

.cal-filter-mode-btn {
  padding: 8px 2px;
  font-size: 0.74rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cal-filter-mode-btn:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.04);
}

.cal-filter-mode-btn.active {
  background: var(--primary);
  color: #ffffff;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(13, 148, 136, 0.35);
}

/* Custom Range Bar (Từ ngày -> Đến ngày) */
.cal-custom-range-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 8px 12px;
  margin-bottom: 12px;
}

.cal-range-field {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 6px 6px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: all 0.15s ease;
  background: var(--bg-surface);
}

.cal-range-field:hover {
  background: var(--bg-card-hover);
}

.cal-range-field.active {
  background: rgba(13, 148, 136, 0.12);
  border-color: var(--primary);
}

.cal-range-sublabel {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 500;
}

.cal-range-val {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--text-primary);
  font-feature-settings: "tnum";
}

.cal-range-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  flex-shrink: 0;
}

/* Range Highlighting on Day Cells */
.custom-cal-day.range-start {
  background: var(--primary) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border-radius: 50% 0 0 50% !important;
}

.custom-cal-day.range-end {
  background: var(--primary) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border-radius: 0 50% 50% 0 !important;
}

.custom-cal-day.range-start.range-end {
  border-radius: 50% !important;
}

.custom-cal-day.range-in-between {
  background: rgba(13, 148, 136, 0.22) !important;
  color: var(--text-primary) !important;
  border-radius: 0 !important;
  font-weight: 600 !important;
}

/* Transactions Full List: Sát lề tương tự như Tài khoản */
#view-transactions.page-view {
  padding: 16px 16px 40px;
  max-width: 900px;
  margin: 0 auto;
  box-sizing: border-box;
}

.transactions-full-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
}

#view-transactions .transaction-group {
  margin-bottom: 16px;
}

#view-transactions .transaction-date-header {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.02em;
  margin-bottom: 6px;
  padding: 0 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#view-transactions .tx-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  transition: all 0.15s ease;
}

#view-transactions .tx-card:hover {
  background: var(--bg-card-hover);
  border-color: rgba(255, 255, 255, 0.12);
}

/* Mobile Screen Tuning for Transactions View (< 768px): Sát lề như Tài khoản */
@media (max-width: 768px) {
  #view-transactions.page-view {
    padding: 12px 7px 20px 7px !important;
  }

  .tx-header-acc-btn {
    padding: 4px 10px 4px 6px;
    gap: 6px;
  }

  .tx-header-acc-name {
    font-size: 0.85rem;
    max-width: 125px;
  }

  .tx-type-filter-bar {
    gap: 4px !important;
  }

  .tx-type-filter-bar .tx-filter-pill {
    height: 32px !important;
    font-size: 0.74rem !important;
    border-radius: 8px !important;
  }

  #view-transactions .tx-card {
    padding: 10px 8px !important;
    gap: 8px !important;
    border-radius: 10px !important;
  }

  #view-transactions .tx-left {
    gap: 8px !important;
    min-width: 0;
  }

  #view-transactions .tx-icon-box {
    width: 34px !important;
    height: 34px !important;
    border-radius: 8px !important;
  }

  #view-transactions .tx-title {
    font-size: 0.88rem !important;
  }

  #view-transactions .tx-meta {
    font-size: 0.72rem !important;
  }

  #view-transactions .tx-amount {
    font-size: 0.9rem !important;
  }
}

/* ==================== BUDGETS MODULE ENHANCEMENTS ==================== */

/* 1. Top Toolbar: [Sao Chép] < Tháng mm/yyyy > [Cài đặt / Thao tác] */
.budget-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.budget-toolbar-left {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.budget-toolbar-right {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.budget-copy-btn {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  font-size: 0.84rem;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: all 0.15s ease;
  white-space: nowrap;
}

.budget-copy-btn:hover {
  background: var(--primary-light);
  color: var(--primary);
  border-color: var(--primary);
}

.budget-month-nav {
  display: inline-flex;
  align-items: center;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 2px;
  box-shadow: var(--shadow-sm);
}

.budget-month-btn {
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-weight: 700;
  font-size: 0.88rem;
  padding: 5px 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background 0.15s ease;
  white-space: nowrap;
}

.budget-month-btn:hover {
  background: rgba(255, 255, 255, 0.05);
}

.budget-toolbar-chip {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: all 0.15s ease;
  white-space: nowrap;
}

.budget-toolbar-chip:hover {
  background: var(--primary-light);
  border-color: var(--primary);
  color: var(--primary);
}

.budget-scope-bar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--primary);
  background: var(--primary-light);
  border: 1px solid rgba(13, 148, 136, 0.25);
  padding: 5px 11px;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: opacity 0.15s ease;
  white-space: nowrap;
}

.budget-scope-bar:hover {
  opacity: 0.85;
}

.budget-action-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 0.84rem;
  font-weight: 600;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.budget-action-pill:active {
  transform: scale(0.97);
}

/* 2. Settings Modal */
#modal-budget-settings .modal-dialog {
  max-width: 480px;
  width: 100%;
}

#modal-budget-settings .modal-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px 20px;
}

#modal-budget-settings .modal-title {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 auto;
  font-size: 1.15rem;
  font-weight: 700;
  text-align: center;
}

#modal-budget-settings .modal-header .btn-icon {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
}

.budget-setting-mode-card,
.budget-wallet-scope-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 15px;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  margin-bottom: 10px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.02);
  transition: all 0.2s ease;
  user-select: none;
}

.budget-setting-mode-card:hover,
.budget-wallet-scope-card:hover {
  border-color: rgba(13, 148, 136, 0.45);
  background: rgba(13, 148, 136, 0.04);
}

.budget-setting-mode-card.active,
.budget-wallet-scope-card.active {
  border-color: var(--primary) !important;
  background: rgba(13, 148, 136, 0.1) !important;
  box-shadow: 0 0 0 1px rgba(13, 148, 136, 0.25);
}

.budget-setting-mode-card input[type="radio"] {
  display: none !important;
}

.budget-wallet-scope-card input[type="radio"] {
  accent-color: var(--primary);
  margin-top: 3px;
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.budget-setting-mode-content {
  flex: 1;
  width: 100%;
}

.budget-setting-mode-title {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.budget-setting-mode-desc {
  font-size: 0.77rem;
  color: var(--text-muted);
  margin-top: 4px;
  line-height: 1.4;
}

.budget-setting-rollover-nested {
  display: none;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed rgba(13, 148, 136, 0.25);
  cursor: default;
}

#setting-mode-detailed-card.active .budget-setting-rollover-nested {
  display: block;
}

.budget-settings-wallet-list {
  max-height: 190px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 2px 2px 2px;
  border-top: 1px dashed var(--border-color);
}

.budget-wallet-check-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  cursor: pointer;
  transition: background 0.15s ease;
}

.budget-wallet-check-item:hover {
  background: rgba(255, 255, 255, 0.04);
}

.budget-wallet-check-item input[type="checkbox"] {
  accent-color: var(--primary);
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* 3. Mode 1: Ngân sách Tổng */
.budget-hero-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}

.budget-hero-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  gap: 10px;
  flex-wrap: wrap;
}

.budget-hero-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.budget-hero-badge {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--primary);
  background: var(--primary-light);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}

.budget-hero-month {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
}

.budget-status-pill {
  font-size: 0.74rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.budget-status-pill.safe {
  background: rgba(16, 185, 129, 0.15);
  color: var(--income);
}

.budget-status-pill.warning {
  background: rgba(245, 158, 11, 0.15);
  color: var(--warning);
}

.budget-status-pill.danger {
  background: rgba(244, 63, 94, 0.15);
  color: var(--expense);
}

.budget-hero-edit-btn {
  font-size: 0.78rem;
  padding: 5px 11px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.budget-hero-main-stat {
  margin-bottom: 14px;
}

.budget-hero-rem-label {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 2px;
}

.budget-hero-rem-val {
  font-size: 1.85rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}

.budget-progress-wrap {
  margin-bottom: 14px;
}

.budget-progress-track {
  height: 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
  position: relative;
}

.budget-progress-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.budget-progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 6px;
}

.budget-hero-kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--border-color);
}

.budget-hero-kpi-item {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 9px 12px;
}

.budget-hero-kpi-label {
  font-size: 0.7rem;
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 2px;
}

.budget-hero-kpi-val {
  font-size: 1.05rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

.budget-hero-empty {
  text-align: center;
  padding: 32px 16px;
}

.budget-hero-empty-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--primary-light);
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.budget-hero-empty h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.budget-hero-empty p {
  font-size: 0.84rem;
  color: var(--text-muted);
  max-width: 420px;
  margin: 0 auto 16px auto;
  line-height: 1.45;
}

/* Locked Categories Section */
.budget-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  gap: 8px;
}

.budget-section-title {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 7px;
}

.budget-count-pill {
  font-size: 0.72rem;
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
  padding: 1px 7px;
  border-radius: 10px;
  font-weight: 700;
}

.budget-locked-empty {
  background: var(--bg-card);
  border: 1px dashed var(--border-color);
  border-radius: var(--radius-md);
  padding: 24px;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.85rem;
  margin-bottom: 20px;
}

.budget-locked-empty i {
  margin-bottom: 6px;
  color: #f59e0b;
}

.budget-locked-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 24px;
}

.budget-locked-item {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.budget-locked-item:hover {
  border-color: rgba(255, 255, 255, 0.15);
}

.budget-locked-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  gap: 10px;
}

.budget-locked-item-cat {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.budget-locked-item-name {
  font-weight: 700;
  color: var(--text-primary);
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.budget-locked-item-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.budget-locked-item-actions .btn-icon {
  width: 28px;
  height: 28px;
  color: var(--text-muted);
}

.budget-locked-item-actions .btn-icon:hover {
  color: var(--text-primary);
}

.budget-locked-item-body {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 0.82rem;
  flex-wrap: wrap;
}

.budget-locked-metric {
  display: flex;
  align-items: center;
  gap: 6px;
}

.budget-locked-metric-label {
  color: var(--text-muted);
  font-size: 0.74rem;
}

.budget-locked-metric-val {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

/* 4. Mode 2: Actual Budget Spreadsheet Table */
.actual-budget-top-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 16px 14px 12px 14px;
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.actual-to-budget-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-bottom: 12px;
  width: 100%;
}

.actual-to-budget-amount-wrapper {
  position: relative;
  display: inline-block;
}

.actual-to-budget-amount {
  font-size: 1.85rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  text-align: center;
  letter-spacing: -0.02em;
}

.actual-budget-actions-corner {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 5;
}

.actual-budget-corner-btn {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-secondary);
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: all 0.15s ease;
  -webkit-tap-highlight-color: rgba(45, 212, 191, 0.2);
}

.actual-budget-corner-btn i,
.actual-budget-corner-btn svg {
  width: 14px;
  height: 14px;
}

.actual-budget-corner-btn.copy-btn {
  background: rgba(45, 212, 191, 0.1);
  color: #2dd4bf;
  border-color: rgba(45, 212, 191, 0.3);
}

.actual-budget-corner-btn.copy-btn:hover,
.actual-budget-corner-btn.copy-btn:active {
  background: var(--primary);
  color: #ffffff;
  border-color: var(--primary);
  transform: scale(1.06);
  box-shadow: 0 2px 8px rgba(13, 148, 136, 0.35);
}

.actual-budget-corner-btn.delete-btn {
  background: rgba(244, 63, 94, 0.08);
  color: var(--expense);
  border-color: rgba(244, 63, 94, 0.25);
}

.actual-budget-corner-btn.delete-btn:hover,
.actual-budget-corner-btn.delete-btn:active {
  background: var(--expense);
  color: #ffffff;
  border-color: var(--expense);
  transform: scale(1.06);
  box-shadow: 0 2px 8px rgba(244, 63, 94, 0.35);
}

.actual-to-budget-caption {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 4px;
  text-align: center;
}

.actual-to-budget-rollover-sub {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: none;
  background: transparent;
  padding: 0;
}

.actual-to-budget-meta {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  width: 100% !important;
  gap: 4px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding-top: 10px !important;
}

.actual-to-budget-meta-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  min-width: 0 !important;
}

.actual-to-budget-meta-label {
  font-size: 0.65rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  margin-bottom: 2px;
}

.actual-to-budget-meta-val {
  font-weight: 700;
  font-size: clamp(0.72rem, 3.2vw, 0.88rem);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

.actual-table-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  gap: 10px;
  flex-wrap: wrap;
}

.actual-table-search-box {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 6px 12px;
  min-width: 220px;
  box-shadow: var(--shadow-sm);
}

.actual-table-search-box input {
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-size: 0.82rem;
  outline: none;
  width: 100%;
}

.actual-table-meta-hint {
  font-size: 0.76rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

.actual-table-container {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow-x: hidden;
  margin-bottom: 0px;
  box-shadow: var(--shadow-sm);
  width: 100%;
  box-sizing: border-box;
}

.actual-budget-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  min-width: 0;
  table-layout: fixed;
}

.actual-budget-table thead th {
  background: var(--bg-surface);
  color: var(--text-muted);
  font-size: 0.71rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 8px 3px;
  border-bottom: 1px solid var(--border-color);
  white-space: nowrap;
}

.actual-budget-table tbody td {
  padding: 6px 3px;
  font-size: 0.74rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  vertical-align: middle;
  overflow: hidden;
}

.actual-budget-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.025);
}

.actual-cat-cell {
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 600;
  color: var(--text-primary);
  min-width: 0;
  overflow: hidden;
}

.actual-cat-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.74rem;
}

.actual-cat-icon {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.7rem;
}

.actual-cat-icon i,
.actual-cat-icon svg {
  width: 12px !important;
  height: 12px !important;
}

.actual-budget-cell {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  padding: 2px 5px;
  border-radius: var(--radius-sm);
  border: 1px dashed rgba(255, 255, 255, 0.22);
  cursor: pointer;
  font-weight: 700;
  font-size: 0.76rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  transition: all 0.15s ease;
  min-width: 0;
  max-width: 100%;
  white-space: nowrap;
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(45, 212, 191, 0.2);
  user-select: none;
  touch-action: manipulation;
}

.actual-budget-cell.has-budget {
  border-color: rgba(45, 212, 191, 0.45);
  background: rgba(45, 212, 191, 0.08);
  color: #2dd4bf;
}

.actual-budget-cell.is-zero {
  border-color: rgba(255, 255, 255, 0.22);
  background: transparent;
  color: rgba(255, 255, 255, 0.45);
  font-weight: 500;
}

.actual-budget-cell:hover,
.actual-budget-cell:active {
  border-color: var(--primary) !important;
  background: rgba(13, 148, 136, 0.22) !important;
  color: var(--primary) !important;
}


/* Dynamic typography scaling for very long numbers in tables (>= 100 triệu) */
.font-len-sm {
  font-size: 0.70rem !important;
  letter-spacing: -0.025em !important;
}

.font-len-xs {
  font-size: 0.64rem !important;
  letter-spacing: -0.035em !important;
}

.actual-spent-cell {
  font-weight: 600;
  font-size: 0.76rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--text-secondary);
  white-space: nowrap;
  display: inline-block;
  max-width: 100%;
}

.actual-avail-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 3px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  white-space: nowrap;
  max-width: 100%;
}

.actual-avail-badge.positive {
  background: rgba(16, 185, 129, 0.15);
  color: var(--income);
}

.actual-avail-badge.zero {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-muted);
}

.actual-avail-badge.negative {
  background: rgba(244, 63, 94, 0.15);
  color: var(--expense);
}

.actual-budget-table tfoot td {
  background: var(--bg-surface);
  font-weight: 800;
  font-size: 0.73rem;
  letter-spacing: -0.02em;
  border-top: 2px solid var(--border-color);
  padding: 8px 3px;
  white-space: nowrap;
}

@media (max-width: 380px) {
  .actual-budget-table thead th {
    font-size: 0.67rem;
    padding: 6px 2px;
  }
  .actual-budget-table tbody td,
  .actual-budget-table tfoot td {
    padding: 5px 2px;
    font-size: 0.7rem;
  }
  .actual-cat-name {
    font-size: 0.7rem;
  }
  .actual-budget-cell {
    font-size: 0.69rem;
    padding: 1px 2px;
  }
  .actual-spent-cell {
    font-size: 0.69rem;
  }
  .actual-avail-badge {
    font-size: 0.68rem;
    padding: 1px 2px;
  }
}

/* 5. Alert Banner & Presets & Copy Options */
.budget-alert-banner {
  background: linear-gradient(90deg, rgba(244, 63, 94, 0.14) 0%, rgba(245, 158, 11, 0.1) 100%);
  border: 1px solid rgba(244, 63, 94, 0.4);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-sizing: border-box;
  width: 100%;
  flex-shrink: 0 !important;
  min-height: fit-content;
  overflow: hidden;
  transition: opacity 0.25s ease, max-height 0.3s ease, margin 0.3s ease, padding 0.3s ease;
  box-shadow: 0 4px 12px rgba(244, 63, 94, 0.1);
}

#dashboard-budget-alert {
  margin-bottom: 16px;
}

#tx-budget-alert-banner {
  margin-bottom: 4px;
}

.budget-alert-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(244, 63, 94, 0.2);
  color: #f43f5e;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.budget-alert-content {
  flex: 1;
  min-width: 0;
}

.budget-alert-title {
  font-size: 0.86rem;
  font-weight: 700;
  color: #fca5a5;
  line-height: 1.25;
}

.budget-alert-desc {
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.35;
  margin-top: 2px;
  word-break: break-word;
}

.budget-alert-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.budget-alert-view-btn {
  background: rgba(244, 63, 94, 0.2);
  border: 1px solid rgba(244, 63, 94, 0.4);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 5px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease;
}

.budget-alert-view-btn:hover {
  background: rgba(244, 63, 94, 0.35);
}

.budget-alert-close-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.15s ease, background 0.15s ease;
}

.budget-alert-close-btn:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.08);
}

.budget-presets-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.budget-preset-chip {
  padding: 5px 11px;
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}

.budget-preset-chip:hover {
  background: var(--primary-light);
  border-color: var(--primary);
  color: var(--primary);
}

.budget-copy-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  background: rgba(255, 255, 255, 0.02);
  cursor: pointer;
  margin-bottom: 8px;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.budget-copy-option:hover {
  border-color: rgba(13, 148, 136, 0.4);
  background: rgba(13, 148, 136, 0.05);
}

.budget-copy-option.active {
  border-color: var(--primary);
  background: rgba(13, 148, 136, 0.1);
}


.budget-avg-btn {
  flex: 1;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 0.78rem;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: center;
}

.budget-avg-btn:hover {
  background: rgba(13, 148, 136, 0.12);
  border-color: var(--primary);
  color: var(--primary);
}

.budget-avg-btn.active {
  background: rgba(13, 148, 136, 0.22);
  border-color: var(--primary);
  color: #2dd4bf;
  font-weight: 700;
  box-shadow: 0 0 0 1px var(--primary);
}


.budget-copy-footer-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
  width: 100% !important;
  padding: 12px 16px !important;
  box-sizing: border-box !important;
}

.budget-copy-footer-grid button {
  width: 100% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  padding: 9px 4px !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  text-align: center !important;
}

.budget-modal-btn-del {
  color: var(--expense) !important;
  border-color: rgba(244, 63, 94, 0.35) !important;
  background: rgba(244, 63, 94, 0.08) !important;
}

.budget-modal-btn-del:hover,
.budget-modal-btn-del:active {
  background: rgba(244, 63, 94, 0.18) !important;
  border-color: var(--expense) !important;
}

.budget-copy-option input[type="radio"] {
  accent-color: var(--primary);
  margin-top: 3px;
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* 6. Responsive Adjustments */
@media (max-width: 768px) {
  .budget-toolbar {
    gap: 8px;
    margin-bottom: 12px;
  }

  .budget-toolbar-left {
    width: 100%;
    justify-content: flex-start;
  }

  .budget-toolbar-right {
    width: 100%;
    justify-content: space-between;
  }

  .budget-hero-kpi-grid {
    gap: 6px;
  }

  .budget-hero-kpi-item {
    padding: 8px 10px;
  }

  .budget-hero-kpi-val {
    font-size: 0.95rem;
  }

  /* Tràn viền và tối ưu chiều cao cho ngân sách chi tiết trên màn hình điện thoại */
  #view-budgets.page-view {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  #view-budgets.page-view::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  .actual-budget-top-card {
    margin-left: -10px !important;
    margin-right: -10px !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    width: calc(100% + 20px) !important;
    max-width: calc(100% + 20px) !important;
    box-sizing: border-box !important;
    padding: 10px 10px 8px 10px !important;
    margin-bottom: 6px !important;
  }

  .actual-to-budget-center {
    margin-bottom: 6px !important;
  }

  .actual-to-budget-amount {
    font-size: 1.55rem !important;
    line-height: 1.1 !important;
  }

  .actual-to-budget-caption {
    font-size: 0.74rem !important;
    margin-top: 2px !important;
  }

  .actual-to-budget-meta {
    padding-top: 6px !important;
  }

  .actual-table-container {
    margin-left: -10px !important;
    margin-right: -10px !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    width: calc(100% + 20px) !important;
    max-width: calc(100% + 20px) !important;
    box-sizing: border-box !important;
    margin-bottom: 0 !important;
  }

  .actual-budget-table thead th {
    padding: 6px 3px !important;
    font-size: 0.71rem !important;
  }

  .actual-budget-table tbody td {
    padding: 5px 3px !important;
    font-size: 0.75rem !important;
  }

  .actual-budget-table tfoot td {
    padding: 6px 3px !important;
    font-size: 0.75rem !important;
  }

  .actual-cat-icon {
    width: 18px !important;
    height: 18px !important;
    border-radius: 4px !important;
    font-size: 0.68rem !important;
  }

  .actual-cat-icon i,
  .actual-cat-icon svg {
    width: 11px !important;
    height: 11px !important;
  }

  .actual-budget-table thead th:first-child,
  .actual-budget-table tbody td:first-child,
  .actual-budget-table tfoot td:first-child {
    padding-left: 8px !important;
  }

  .actual-budget-table thead th:last-child,
  .actual-budget-table tbody td:last-child,
  .actual-budget-table tfoot td:last-child {
    padding-right: 8px !important;
  }

  .actual-table-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .actual-table-search-box {
    width: 100%;
  }
}


/* ==================== BUDGET ENHANCEMENTS: HEADER & MINIMAL HERO ==================== */

/* Centered Header Navigation for Budgets */
.budget-header-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 60;
  pointer-events: auto;
  gap: 2px;
  max-width: calc(100% - 130px);
}

.budget-header-month-nav {
  display: inline-flex;
  align-items: center;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  padding: 1px 4px;
  gap: 4px;
  box-shadow: var(--shadow-sm);
}

.budget-header-month-nav .btn-time-nav {
  background: transparent;
  border: none;
  color: var(--text-muted);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  padding: 0;
  flex-shrink: 0;
}

.budget-header-month-nav .btn-time-nav:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
}

.budget-header-month-nav .budget-month-btn {
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 3px 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  white-space: nowrap;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

.budget-header-subtitle {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--primary);
  letter-spacing: 0.01em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 8px;
  border-radius: 10px;
  background: var(--primary-light);
  transition: opacity 0.15s ease;
  line-height: 1.2;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

.budget-header-subtitle:hover {
  opacity: 0.85;
}

/* Minimalist Centered Hero Card */
#view-budgets.page-view {
  max-width: 680px;
  margin: 0 auto;
  padding: 12px 14px 40px;
}

@media (max-width: 768px) {
  #view-budgets.page-view {
    padding: 10px 7px 4px 7px !important;
  }
}

.budget-hero-clickable {
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.budget-hero-clickable:hover {
  border-color: rgba(13, 148, 136, 0.45);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

.budget-hero-center-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2px 0;
  width: 100%;
}

.budget-hero-center-box .budget-hero-rem-label {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.budget-hero-center-box .budget-hero-rem-val {
  font-size: 1.65rem;
  font-weight: 800;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  margin-bottom: 8px;
}

.budget-hero-bar-meta {
  width: 100%;
  max-width: 440px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.78rem;
  font-weight: 700;
  margin-bottom: 4px;
  padding: 0 2px;
}

.budget-bar-spent {
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.budget-bar-limit {
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}

.budget-hero-progress {
  width: 100%;
  max-width: 440px;
  margin: 0 auto 4px auto;
  height: 6px;
  border-radius: var(--radius-full);
}

.budget-hero-limit-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0.88rem;
  color: var(--text-secondary);
  flex-wrap: wrap;
}

.budget-meta-dot {
  opacity: 0.4;
  font-size: 0.8rem;
}

.budget-hero-click-hint {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.68rem;
  color: var(--primary);
  opacity: 0.85;
  margin-top: 4px;
  font-weight: 600;
}

.budget-hero-empty-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--primary-light);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 8px auto;
}

.budget-locked-item {
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease;
  padding: 10px 12px;
}

.budget-locked-item:hover {
  border-color: rgba(245, 158, 11, 0.4);
}

/* Account budget badge & switch */
.account-budget-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-light);
  color: var(--primary);
  border: 1px solid rgba(13, 148, 136, 0.3);
  padding: 2px 5px;
  border-radius: var(--radius-full);
  line-height: 1;
  flex-shrink: 0;
}

.account-badge.budget {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--primary);
  background: var(--primary-light);
  border: 1px solid rgba(13, 148, 136, 0.25);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.action-sheet-budget-badge {
  font-size: 0.76rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: var(--radius-full);
  margin-left: auto;
}

.action-sheet-budget-badge.active {
  background: var(--primary-light);
  color: var(--primary);
}

.action-sheet-budget-badge.inactive {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-muted);
}

.action-sheet-share-badge {
  font-size: 0.76rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: var(--radius-full);
  margin-left: auto;
}

.action-sheet-share-badge.active {
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
}

.action-sheet-share-badge.inactive {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-muted);
}

.account-share-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
  border: 1px solid rgba(59, 130, 246, 0.3);
  padding: 2px 5px;
  border-radius: var(--radius-full);
  line-height: 1;
  flex-shrink: 0;
}

/* Custom Category Dropdown in Budget Modals */
.budget-cat-dropdown {
  position: relative;
  width: 100%;
}

.budget-cat-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  min-height: 52px;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.15s ease;
  color: var(--text-primary);
  box-sizing: border-box;
}

.budget-cat-trigger:hover, .budget-cat-trigger:focus {
  border-color: var(--primary);
}

.budget-cat-trigger-content {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
}

.budget-cat-trigger-text {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}

.budget-cat-trigger-arrow {
  width: 18px;
  height: 18px;
  color: var(--text-muted);
  flex-shrink: 0;
}

.budget-cat-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: min(480px, 65vh);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55);
  z-index: 1000;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

#modal-budget-cat-list {
  max-height: 68vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

#modal-budget-cat-list .budget-cat-item {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 12px 14px !important;
  border-radius: var(--radius-md) !important;
  cursor: pointer;
  transition: background 0.12s ease;
  user-select: none;
  min-height: 52px;
  box-sizing: border-box;
}

#modal-budget-cat-list .budget-cat-item:hover,
#modal-budget-cat-list .budget-cat-item:active {
  background: var(--bg-card-hover, rgba(255, 255, 255, 0.08)) !important;
}

#modal-budget-cat-list .budget-cat-item.selected {
  background: var(--primary-light, rgba(13, 148, 136, 0.15)) !important;
  border: 1px solid rgba(13, 148, 136, 0.3) !important;
}

.budget-cat-item,
.budget-cat-option {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 0.12s ease;
  user-select: none;
  min-height: 48px;
  box-sizing: border-box;
}

.budget-cat-item:hover,
.budget-cat-option:hover {
  background: var(--bg-card-hover, rgba(255, 255, 255, 0.08));
}

.budget-cat-item.selected,
.budget-cat-option.selected {
  background: var(--primary-light, rgba(13, 148, 136, 0.15));
  border: 1px solid rgba(13, 148, 136, 0.3);
}

.budget-cat-item .category-icon-bubble,
.budget-cat-option .category-icon-bubble {
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
}

.budget-cat-item-name,
.budget-cat-option-name {
  flex: 1 !important;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}

.budget-cat-check {
  width: 18px;
  height: 18px;
  color: var(--primary);
  flex-shrink: 0;
  margin-left: auto;
}

.budget-locked-item-remaining {
  font-size: 0.92rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}


/* ==========================================================================
   POPUP NUMERIC KEYPAD - BUDGET QUICK EDIT PANEL
   ========================================================================== */
#keypad-budget-quick-panel {
  padding: 10px 14px 6px 14px;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-card, rgba(255, 255, 255, 0.02));
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.keypad-budget-top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.keypad-budget-bubble {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  flex-shrink: 0;
}

.keypad-budget-info {
  flex: 1;
  min-width: 0;
  text-align: left;
}

.keypad-budget-cat-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.keypad-budget-cat-spent {
  font-size: 0.74rem;
  color: var(--text-muted);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.keypad-budget-presets {
  display: flex;
  align-items: center;
  gap: 8px;
}

.keypad-budget-presets .budget-preset-chip {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 10px;
  font-size: 0.82rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  transition: all 0.15s ease;
  white-space: nowrap;
}

.keypad-budget-presets .budget-preset-match {
  color: var(--primary);
  border-color: rgba(13, 148, 136, 0.35);
  background: var(--primary-light, rgba(13, 148, 136, 0.1));
}

.keypad-budget-presets .budget-preset-match:hover,
.keypad-budget-presets .budget-preset-match:active {
  background: var(--primary);
  color: #fff;
}

.keypad-budget-presets .budget-preset-clear {
  color: var(--expense);
  border-color: rgba(244, 63, 94, 0.35);
  background: rgba(244, 63, 94, 0.08);
}

.keypad-budget-presets .budget-preset-clear:hover,
.keypad-budget-presets .budget-preset-clear:active {
  background: var(--expense);
  color: #fff;
}

.keypad-budget-presets .budget-preset-save {
  color: #fff;
  border-color: var(--primary);
  background: var(--primary);
  font-weight: 700;
}

.keypad-budget-presets .budget-preset-save:hover,
.keypad-budget-presets .budget-preset-save:active {
  opacity: 0.9;
}

/* Thanh mũi tên bên dưới chỉ xuống */
.keypad-budget-expand-bar {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 0;
  margin-top: 2px;
  cursor: pointer;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  background: transparent;
  border: none;
  outline: none;
  transition: all 0.2s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.keypad-budget-expand-bar:hover,
.keypad-budget-expand-bar:active {
  color: var(--primary);
  background: rgba(255, 255, 255, 0.05);
}

.keypad-budget-expand-bar.active {
  color: var(--primary);
  background: rgba(13, 148, 136, 0.08);
}

.keypad-budget-expand-icon {
  width: 22px;
  height: 22px;
  pointer-events: none;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.keypad-budget-expand-bar.active .keypad-budget-expand-icon {
  transform: rotate(180deg);
}

/* Advanced Subpanel */
.keypad-budget-adv-panel {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 8px 10px;
  background: var(--bg-surface);
  border-radius: var(--radius-md);
  border: 1px dashed var(--border-color);
  animation: fadeIn 0.15s ease-out;
}

.keypad-budget-adv-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.keypad-budget-adv-title {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text-muted);
  min-width: 95px;
  flex-shrink: 0;
}

.keypad-budget-adv-chips {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  flex: 1;
}

.budget-adv-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  font-size: 0.72rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  background: var(--bg-card, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.budget-adv-chip:hover,
.budget-adv-chip:active {
  background: var(--primary-light, rgba(13, 148, 136, 0.15));
  border-color: var(--primary);
  color: var(--primary);
}

.budget-adv-chip.disabled {
  pointer-events: none;
  opacity: 0.5;
}

.budget-adv-loading,
.budget-adv-empty {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-style: italic;
}

/* Switch toggle unified in .app-switch, .switch */
/* Thanh cảnh báo vượt ngân sách phía trên bảng chi tiết */
.budget-overspent-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(244, 63, 94, 0.1);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  margin-bottom: 12px;
  border: none;
}

.budget-overspent-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.budget-overspent-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(244, 63, 94, 0.2);
  color: var(--expense);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.budget-overspent-info {
  min-width: 0;
}

.budget-overspent-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--expense);
  line-height: 1.3;
}

.budget-overspent-sub {
  font-size: 0.74rem;
  color: var(--text-muted);
  line-height: 1.3;
  margin-top: 2px;
}

.budget-rebalance-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--expense);
  color: #ffffff;
  border: none;
  border-radius: var(--radius-full);
  padding: 6px 14px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.budget-rebalance-btn:hover {
  opacity: 0.92;
  transform: translateY(-1px);
}

.budget-rebalance-btn:active {
  transform: scale(0.96);
}

.actual-budget-table tbody td:nth-child(3):hover .actual-spent-cell {
  text-decoration: underline;
}

/* Budget Avail Options & Rebalance Modal Dialogs */
.modal-dialog-avail-options {
  max-width: 440px;
  width: 100%;
}
.modal-dialog-rebalance {
  max-width: 480px;
  width: 100%;
  max-height: 88dvh;
}

/* Rebalance Modal 2-Step Styles */
.rebalance-step-view {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  flex: 1;
}

.rebalance-cat-item,
.rebalance-source-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.rebalance-cat-item:hover,
.rebalance-source-item:hover {
  background: var(--bg-hover);
  border-color: var(--primary);
}

.rebalance-cat-item:active,
.rebalance-source-item:active {
  transform: scale(0.98);
}

.rebalance-source-item.selected {
  background: rgba(13, 148, 136, 0.08);
  border-color: var(--primary);
  box-shadow: 0 0 0 1.5px var(--primary);
}

.rebalance-item-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.rebalance-item-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.rebalance-item-name {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rebalance-item-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.rebalance-amount-badge {
  font-weight: 700;
  font-size: 0.88rem;
}
.rebalance-amount-badge.deficit {
  color: var(--expense);
}
.rebalance-amount-badge.surplus {
  color: var(--income);
}
.rebalance-amount-badge.zero {
  color: var(--text-muted);
}

/* Mode toggle buttons (Chuyển đi / Bù vào) */
.rebalance-mode-toggle {
  display: flex;
  background: var(--bg-hover);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 3px;
  gap: 4px;
}

.rebalance-mode-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  font-size: 0.82rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}

.rebalance-mode-btn:hover {
  color: var(--text-primary);
}

.rebalance-mode-btn.active {
  background: var(--bg-card);
  color: var(--primary);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.rebalance-amount-box {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
  background: var(--bg-hover);
  padding: 12px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
}

.rebalance-modal-footer {
  padding: 12px 16px;
  border-top: 1px solid var(--border-color);
  display: flex;
  gap: 10px;
  flex-shrink: 0;
  background: var(--bg-surface);
}

.rebalance-modal-footer .btn-secondary,
.rebalance-modal-footer .btn-primary {
  flex: 1;
  min-width: 0;
  justify-content: center;
  padding: 11px 12px;
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;
}

/* Shift overspent to next month arrow button */
.actual-avail-cell-box {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  position: relative;
  line-height: 1;
}

.avail-shift-arrow-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  cursor: pointer;
  margin-top: 2px;
  padding: 0;
  border: none;
  background: transparent;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
}

.avail-shift-arrow-wrap i,
.avail-shift-arrow-wrap svg {
  width: 10px;
  height: 10px;
  color: var(--expense);
  transition: transform 0.15s ease, color 0.15s ease;
}

.avail-shift-arrow-wrap:hover i,
.avail-shift-arrow-wrap:hover svg {
  transform: translateX(1.5px);
}

.avail-shift-arrow-wrap.shifted i,
.avail-shift-arrow-wrap.shifted svg {
  color: #3b82f6;
}

/* Tùy chọn Còn lại Modal Cards */
.avail-option-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.avail-option-card:hover {
  background: var(--bg-hover);
  border-color: var(--primary);
  transform: translateY(-1px);
}

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

.avail-option-icon {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.avail-option-icon i,
.avail-option-icon svg {
  width: 20px;
  height: 20px;
}

.avail-option-info {
  flex: 1;
  min-width: 0;
}

.avail-option-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.avail-option-desc {
  font-size: 0.76rem;
  color: var(--text-muted);
  line-height: 1.35;
}

.avail-option-arrow {
  width: 18px;
  height: 18px;
  color: var(--text-muted);
  flex-shrink: 0;
}

.badge-shifted {
  display: inline-block;
  padding: 1px 7px;
  border-radius: var(--radius-full);
  font-size: 0.68rem;
  font-weight: 700;
  background: rgba(59, 130, 246, 0.18);
  color: #3b82f6;
  border: 1px solid rgba(59, 130, 246, 0.35);
}

.badge-auto {
  display: inline-block;
  padding: 1px 7px;
  border-radius: var(--radius-full);
  font-size: 0.68rem;
  font-weight: 700;
  background: rgba(16, 185, 129, 0.15);
  color: var(--income);
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.actual-avail-badge.negative.shifted {
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
  border: 1px solid rgba(59, 130, 246, 0.3);
}

/* Shift Overspent Corner Arrow on Amount Badge */
.actual-avail-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
}

.avail-shift-corner-arrow {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 15px;
  height: 15px;
  background: #3b82f6;
  color: #ffffff;
  border: 1.5px solid var(--bg-surface, #ffffff);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  z-index: 2;
  pointer-events: none;
}

.avail-shift-corner-arrow i,
.avail-shift-corner-arrow svg {
  width: 9px;
  height: 9px;
  stroke-width: 2.5;
}


/* Dashboard Expense Breakdown (Donut + Side Legend matching reference) */
.expense-breakdown-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 4px;
}

.expense-breakdown-chart-box {
  position: relative;
  width: 146px;
  height: 146px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.expense-breakdown-chart-box canvas {
  width: 100% !important;
  height: 100% !important;
}

.expense-breakdown-legend {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
}

.expense-legend-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.88rem;
  cursor: pointer;
  padding: 3px 6px;
  border-radius: var(--radius-sm);
  transition: background-color 0.15s ease, opacity 0.15s ease;
}

.expense-legend-row:hover {
  background-color: var(--bg-hover);
}

.expense-legend-left {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  flex: 1;
}

.expense-legend-dot {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  flex-shrink: 0;
}

.expense-legend-name {
  color: var(--text-secondary);
  font-weight: 500;
  font-size: 0.88rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.expense-legend-pct {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  text-align: right;
  margin-left: auto;
}

@media (max-width: 380px) {
  .expense-breakdown-wrapper {
    gap: 10px;
  }
  .expense-breakdown-chart-box {
    width: 124px;
    height: 124px;
  }
  .expense-legend-name {
    font-size: 0.82rem;
  }
  .expense-legend-pct {
    font-size: 0.88rem;
  }
}


/* =========================================================
   DASHBOARD RECENT TRANSACTIONS: SÁT VIỀN & NHỎ GỌN (IMG_9902)
   ========================================================= */
.card-panel-recent-tx {
  padding: 16px 14px;
}

.page-view.swiping,
.tx-page-view.swiping {
  will-change: transform, opacity;
  transition: none !important;
  touch-action: pan-y !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  box-shadow: -8px 0 25px rgba(0, 0, 0, 0.25) !important;
}

@media (max-width: 768px) {
  #view-dashboard.page-view {
    padding: 12px 7px 24px 7px !important;
  }

  .card-panel-recent-tx {
    padding: 12px 10px 10px 10px !important; /* Thu hẹp padding của panel để tận dụng tối đa chiều rộng */
  }

  .card-panel-recent-tx .panel-header {
    padding: 0 4px;
    margin-bottom: 10px;
  }

  #transactions-list-container .transaction-group {
    margin-bottom: 12px;
  }

  #transactions-list-container .transaction-date-header {
    padding: 0 4px;
    font-size: 0.76rem !important;
    margin-bottom: 6px;
  }

  #transactions-list-container .tx-card {
    padding: 8px 8px !important;
    gap: 7px !important;
    border-radius: 10px !important;
  }

  #transactions-list-container .tx-left {
    gap: 7px !important;
    min-width: 0;
  }

  #transactions-list-container .tx-icon-box {
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    flex-shrink: 0;
  }

  #transactions-list-container .tx-icon-box i,
  #transactions-list-container .tx-icon-box svg {
    width: 16px !important;
    height: 16px !important;
  }

  #transactions-list-container .tx-info {
    min-width: 0;
    flex: 1;
  }

  #transactions-list-container .tx-title {
    font-size: 0.84rem !important; /* Bóp font chữ nhỏ hơn 1 chút để hiển thị tên trọn vẹn */
    font-weight: 600;
    line-height: 1.25;
  }

  #transactions-list-container .tx-meta {
    font-size: 0.72rem !important;
    gap: 4px;
    margin-top: 2px;
  }

  #transactions-list-container .tx-right {
    flex-shrink: 0;
  }

  #transactions-list-container .tx-amount {
    font-size: 0.90rem !important;
    font-weight: 700;
  }
}

/* ==========================================================================
   MICRO SYNC & BACKUP STATUS INDICATOR & POPOVER (v2.2.5)
   ========================================================================== */

.sync-indicator-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.header-sync-btn {
  position: relative;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 0;
}

.header-sync-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
  border-color: var(--border-color);
}

.sync-status-dot {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-muted);
  transition: all 0.3s ease;
  pointer-events: none;
}

.sync-status-dot.idle {
  background: #94a3b8;
}

.sync-status-dot.synced {
  background: #10b981;
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.6);
}

.sync-status-dot.synced.quiet {
  opacity: 0.55;
  box-shadow: none;
}

.sync-status-dot.syncing {
  background: #3b82f6;
  box-shadow: 0 0 8px rgba(59, 130, 246, 0.8);
  animation: syncPulse 1.2s infinite ease-in-out;
}

.sync-status-dot.pending {
  background: #f59e0b;
  box-shadow: 0 0 6px rgba(245, 158, 11, 0.7);
}

.sync-status-dot.error {
  background: #f43f5e;
  box-shadow: 0 0 8px rgba(244, 63, 94, 0.85);
  animation: syncPulse 1.5s infinite;
}

@keyframes syncPulse {
  0% { transform: scale(0.9); opacity: 0.7; }
  50% { transform: scale(1.25); opacity: 1; }
  100% { transform: scale(0.9); opacity: 0.7; }
}

@keyframes spinSync {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.spin-animation {
  animation: spinSync 0.9s linear infinite;
}

/* Micro Popover Backdrop (Catch outside taps anywhere on mobile & desktop) */
/* Micro Popover Backdrop (Làm tối nền và làm mờ để popup nổi bật) */
.sync-popover-backdrop {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 100045;
  background: rgba(0, 0, 0, 0.65) !important;
  backdrop-filter: blur(3px) !important;
  -webkit-backdrop-filter: blur(3px) !important;
  -webkit-tap-highlight-color: transparent;
  touch-action: auto;
  animation: popoverBackdropFadeIn 0.2s ease-out;
}

@keyframes popoverBackdropFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Micro Popover */
.sync-popover {
  position: fixed;
  top: 60px;
  left: 16px;
  width: 290px;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.1) !important;
  z-index: 100050;
  padding: 12px 14px;
  animation: popoverFadeIn 0.18s ease-out;
}

@keyframes popoverFadeIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.sync-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 10px;
}

.sync-popover-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-primary);
}

.sync-popover-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-muted);
}

.sync-popover-dot.synced { background: #10b981; }
.sync-popover-dot.syncing { background: #3b82f6; animation: syncPulse 1.2s infinite; }
.sync-popover-dot.pending { background: #f59e0b; }
.sync-popover-dot.error { background: #f43f5e; }

.sync-popover-close {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sync-popover-close:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.sync-popover-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

.sync-popover-detail {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  font-size: 0.78rem;
  gap: 8px;
}

.sync-detail-label {
  color: var(--text-muted);
  white-space: nowrap;
}

.sync-detail-value {
  color: var(--text-secondary);
  font-weight: 600;
  text-align: right;
  word-break: break-word;
}

.sync-popover-error {
  margin-top: 4px;
  padding: 6px 8px;
  background: rgba(244, 63, 94, 0.12);
  border-left: 3px solid #f43f5e;
  border-radius: 4px;
  font-size: 0.75rem;
  color: #f43f5e;
  line-height: 1.35;
}

.sync-popover-actions {
  display: flex;
  gap: 8px;
}

.sync-popover-actions button {
  flex: 1;
  font-size: 0.8rem;
  padding: 6px 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

/* Multi-Vault Badges and Header Pill */
.header-vault-badge-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--primary, #0ea5e9);
  color: #ffffff;
  font-size: 0.65rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--bg-surface, #1e293b);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  pointer-events: none;
  z-index: 4;
}

/* Tương thích ngược: ẩn .header-vault-pill vì đã tích hợp thành subtext dưới logo */
.header-vault-pill {
  display: none !important;
}

/* Quick Vault Switcher in Sync Popover (Tông màu xanh lục chủ đạo) */
.sync-popover-vault-container {
  margin-bottom: 12px;
  padding: 8px 10px;
  background: var(--bg-card, #1e293b);
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
  border-radius: var(--radius-md, 10px);
}

.sync-popover-vault-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-secondary, #cbd5e1);
}

.sync-popover-vault-title {
  display: flex;
  align-items: center;
  gap: 6px;
}

.sync-popover-vault-count {
  font-size: 0.68rem;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.16);
  color: #10b981;
}

.sync-popover-vault-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 190px;
  overflow-y: auto;
  padding-right: 2px;
}

.sync-popover-vault-list::-webkit-scrollbar {
  width: 4px;
}
.sync-popover-vault-list::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 4px;
}

.sync-vault-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 9px;
  border-radius: 8px;
  background: var(--bg-surface, #0f172a);
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
  cursor: pointer;
  transition: all 0.18s ease;
  user-select: none;
  gap: 8px;
}

.sync-vault-item:hover {
  background: var(--bg-hover, #1e293b);
  border-color: rgba(16, 185, 129, 0.35);
  transform: translateY(-1px);
}

.sync-vault-item.active {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.5);
  cursor: default;
}

.sync-vault-item.active:hover {
  transform: none;
}

.sync-vault-item.is-switching {
  opacity: 0.7;
  pointer-events: none;
}

.sync-vault-item-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}

.sync-vault-item-icon {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted, #94a3b8);
  flex-shrink: 0;
}

.sync-vault-item.active .sync-vault-item-icon {
  background: rgba(16, 185, 129, 0.2);
  color: #10b981;
}

.sync-vault-item-info {
  min-width: 0;
  flex: 1;
}

.sync-vault-item-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-primary, #f8fafc);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
}

.sync-vault-item-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
}

/* Role Pills: Chủ sổ (Xanh lục), Chỉ xem (Vàng), Chỉnh sửa (Xanh dương) */
.sync-vault-role-pill {
  font-size: 0.68rem !important;
  font-weight: 600 !important;
  padding: 1px 6px !important;
  border-radius: 4px !important;
  line-height: 1.35 !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* 1. Chủ sổ: Màu xanh lục */
.sync-vault-role-pill.owner {
  background: rgba(16, 185, 129, 0.16) !important;
  color: #34d399 !important;
  border: 1px solid rgba(16, 185, 129, 0.28) !important;
}

body:not(.dark):not([data-theme="dark"]) .sync-vault-role-pill.owner {
  color: #059669 !important;
}

/* 2. Chỉnh sửa: Màu xanh dương */
.sync-vault-role-pill.editor {
  background: rgba(59, 130, 246, 0.16) !important;
  color: #60a5fa !important;
  border: 1px solid rgba(59, 130, 246, 0.28) !important;
}

body:not(.dark):not([data-theme="dark"]) .sync-vault-role-pill.editor {
  color: #2563eb !important;
}

/* 3. Chỉ xem: Màu vàng */
.sync-vault-role-pill.viewer {
  background: rgba(245, 158, 11, 0.16) !important;
  color: #fbbf24 !important;
  border: 1px solid rgba(245, 158, 11, 0.28) !important;
}

body:not(.dark):not([data-theme="dark"]) .sync-vault-role-pill.viewer {
  color: #d97706 !important;
}

.sync-vault-item-right {
  flex-shrink: 0;
}

.sync-vault-active-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.7rem;
  font-weight: 600;
  color: #10b981;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(16, 185, 129, 0.16);
}

.sync-vault-switch-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-muted, #94a3b8);
  padding: 3px 6px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: all 0.15s ease;
}

.sync-vault-item:hover .sync-vault-switch-btn {
  background: var(--primary, #0ea5e9);
  border-color: var(--primary, #0ea5e9);
  color: #ffffff;
}

.vault-item-switching-text {
  font-size: 0.7rem;
  color: #10b981;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.sync-vault-quick-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px dashed var(--border-color, rgba(255, 255, 255, 0.08));
}

.sync-vault-quick-actions button {
  flex: 1;
  font-size: 0.72rem;
  padding: 4px 6px;
  border-radius: 6px;
  background: transparent;
  border: 1px dashed var(--border-color, rgba(255, 255, 255, 0.15));
  color: var(--text-muted, #94a3b8);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: all 0.15s ease;
}

.sync-vault-quick-actions button:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary, #f8fafc);
  border-color: var(--primary, #0ea5e9);
}

/* Settings Storage Location Cards */
.storage-loc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 8px;
  margin-bottom: 12px;
}

@media (max-width: 600px) {
  .storage-loc-grid {
    grid-template-columns: 1fr;
  }
}

.storage-loc-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: var(--bg-card);
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.18s ease;
}

.storage-loc-card:hover {
  background: var(--bg-hover);
  border-color: rgba(20, 184, 166, 0.5);
}

.storage-loc-card.active {
  border-color: var(--primary);
  background: rgba(20, 184, 166, 0.08);
}

.storage-loc-card input[type="radio"] {
 margin-top: 3px;
 accent-color: var(--primary);
}

.storage-loc-info {
 display: flex;
 flex-direction: column;
 gap: 3px;
}

.storage-loc-title {
 font-size: 0.88rem;
 font-weight: 700;
 color: var(--text-primary);
 display: flex;
 align-items: center;
 gap: 6px;
}

.storage-loc-desc {
 font-size: 0.76rem;
 color: var(--text-muted);
 line-height: 1.35;
}

/* User Google Profile Banner */
.google-user-banner {
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 12px 16px;
 background: rgba(20, 184, 166, 0.08);
 border: 1px solid rgba(20, 184, 166, 0.25);
 border-radius: var(--radius-md);
 margin-bottom: 16px;
 gap: 12px;
}

.google-user-info {
 display: flex;
 align-items: center;
 gap: 10px;
 min-width: 0;
}

.google-user-avatar {
 width: 38px;
 height: 38px;
 border-radius: 50%;
 border: 2px solid var(--primary);
 object-fit: cover;
 flex-shrink: 0;
}

.google-user-name {
 font-size: 0.9rem;
 font-weight: 700;
 color: var(--text-primary);
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}

.google-user-email {
 font-size: 0.76rem;
 color: var(--text-muted);
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}

.google-role-badge {
 font-size: 0.7rem;
 font-weight: 700;
 padding: 2px 8px;
 border-radius: 9999px;
 background: rgba(16, 185, 129, 0.15);
 color: #10b981;
 text-transform: uppercase;
}

.google-role-badge.member {
 background: rgba(59, 130, 246, 0.15);
 color: #3b82f6;
}

/* Local Folder Connection Card */
.local-folder-card {
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 12px 16px;
 background: var(--bg-card);
 border: 1px solid var(--border-color);
 border-radius: var(--radius-md);
 margin-bottom: 12px;
 gap: 12px;
}

.local-folder-left {
 display: flex;
 align-items: center;
 gap: 12px;
 min-width: 0;
}

.local-folder-icon {
 width: 36px;
 height: 36px;
 border-radius: var(--radius-sm);
 background: rgba(245, 158, 11, 0.12);
 color: #f59e0b;
 display: flex;
 align-items: center;
 justify-content: center;
 flex-shrink: 0;
}

.local-folder-title {
 font-size: 0.88rem;
 font-weight: 700;
 color: var(--text-primary);
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}

.local-folder-desc {
 font-size: 0.76rem;
 color: var(--text-muted);
}

/* Dedicated Sync Server Styles */
.badge-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  border: 1px solid transparent;
  transition: all 0.2s ease;
}

.badge-connected {
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
  border-color: rgba(16, 185, 129, 0.3);
}

.badge-disconnected {
  background: rgba(100, 116, 139, 0.12);
  color: #64748b;
  border-color: rgba(100, 116, 139, 0.3);
}

.badge-checking {
  background: rgba(245, 158, 11, 0.12);
  color: #f59e0b;
  border-color: rgba(245, 158, 11, 0.3);
}

.badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: currentColor;
}

.server-share-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  transition: all 0.2s ease;
}

.server-share-item:hover {
  background: var(--bg-hover);
}

.server-share-info {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.server-share-email {
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ==========================================================================
   OPTIMIZED SETTINGS REDESIGN (v2.5.2)
   Modern Grouped Hub & Focused Sub-Views with Collapsible Advanced Sections
   ========================================================================== */

#view-settings.page-view {
  padding: 10px 7px 8px 7px !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.settings-container {
  max-width: 720px;
  margin: 0 auto;
  padding: 2px 2px 4px 2px !important;
  width: 100%;
  box-sizing: border-box;
}

/* Settings Group */
.settings-group {
  margin-bottom: 12px;
}

.settings-group-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
  margin-bottom: 6px;
  padding-left: 6px;
}

.settings-nav-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

/* Settings Nav Item - Maximized width & edge-to-edge content */
.settings-nav-item.is-hidden,
.settings-nav-item[style*="display: none"],
.settings-nav-item[style*="display:none"] {
  display: none !important;
}

.settings-nav-item {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px 8px 12px 8px !important;
  cursor: pointer;
  border-bottom: 1px solid var(--border-color);
  transition: all 0.15s ease;
  user-select: none;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  width: 100%;
  box-sizing: border-box;
}

.settings-nav-item:last-child {
  border-bottom: none !important;
}

.settings-nav-item:hover {
  background: var(--bg-card-hover);
}

.settings-nav-item:active {
  background: var(--bg-hover);
  transform: scale(0.995);
}

/* Icon Boxes - Push tight to left edge */
.settings-item-icon-box {
  width: 36px !important;
  height: 36px !important;
  border-radius: 9px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  margin-left: 0 !important;
  transition: transform 0.2s ease;
}

.settings-item-icon-box svg,
.settings-item-icon-box i {
  width: 19px !important;
  height: 19px !important;
}

.settings-nav-item:hover .settings-item-icon-box {
  transform: scale(1.05);
}

.settings-item-icon-box.icon-gdrive {
  background: rgba(66, 133, 244, 0.12) !important;
  color: #4285f4 !important;
}

.settings-item-icon-box.icon-dropbox {
  background: rgba(0, 97, 255, 0.14) !important;
  color: #0061ff !important;
}

.settings-item-icon-box.icon-server {
  background: rgba(139, 92, 246, 0.14) !important;
  color: #a855f7 !important;
}

.settings-item-icon-box.icon-folder {
  background: rgba(245, 158, 11, 0.14) !important;
  color: #f59e0b !important;
}

.settings-item-icon-box.icon-database {
  background: rgba(236, 72, 153, 0.14) !important;
  color: #ec4899 !important;
}

.settings-item-icon-box.icon-csv {
  background: rgba(16, 185, 129, 0.14) !important;
  color: #10b981 !important;
}

.settings-item-icon-box.icon-palette {
  background: rgba(99, 102, 241, 0.14) !important;
  color: #6366f1 !important;
}

/* Item Content - Maximized middle area */
.settings-item-content {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.settings-item-title-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important;
}

.settings-item-title {
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.settings-item-desc {
  font-size: 0.75rem !important;
  color: var(--text-muted) !important;
  margin-top: 2px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Arrow - Push tight to right edge */
.settings-item-arrow {
  width: 16px !important;
  height: 16px !important;
  color: var(--text-muted) !important;
  flex-shrink: 0 !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  transition: transform 0.2s ease, color 0.2s ease;
}

.settings-nav-item:hover .settings-item-arrow {
  transform: translateX(3px);
  color: var(--text-secondary);
}

/* Status Pills */
.settings-status-pill {
  font-size: 0.68rem !important;
  font-weight: 600 !important;
  padding: 2px 7px !important;
  border-radius: 9999px !important;
  white-space: nowrap !important;
  border: 1px solid transparent !important;
  line-height: 1.2 !important;
  flex-shrink: 0 !important;
}

.settings-status-pill.pill-green {
  background: rgba(16, 185, 129, 0.14) !important;
  color: #10b981 !important;
  border-color: rgba(16, 185, 129, 0.25) !important;
}

.settings-status-pill.pill-gray {
  background: rgba(148, 163, 184, 0.12) !important;
  color: var(--text-muted) !important;
  border-color: rgba(148, 163, 184, 0.2) !important;
}

.settings-status-pill.pill-blue {
  background: rgba(59, 130, 246, 0.14) !important;
  color: #3b82f6 !important;
  border-color: rgba(59, 130, 246, 0.25) !important;
}

.settings-status-pill.pill-amber {
  background: rgba(245, 158, 11, 0.14) !important;
  color: #f59e0b !important;
  border-color: rgba(245, 158, 11, 0.25) !important;
}

.settings-status-pill.pill-red {
  background: rgba(244, 63, 94, 0.14) !important;
  color: #f43f5e !important;
  border-color: rgba(244, 63, 94, 0.3) !important;
}

/* Minimal Hub Footer - Version with GitHub link only */
.settings-hub-footer {
  text-align: center;
  padding: 14px 8px 6px;
  color: var(--text-muted);
}

.settings-version-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--text-muted);
  text-decoration: none;
  padding: 5px 12px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-color);
  transition: all 0.2s ease;
  user-select: none;
}

.settings-version-link:hover {
  color: var(--primary);
  border-color: rgba(20, 184, 166, 0.4);
  background: rgba(20, 184, 166, 0.08);
}

/* Sub-page Detail View */
.settings-detail-view {
  animation: settingsFadeIn 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  padding-bottom: 24px;
}

@keyframes settingsFadeIn {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.settings-detail-topbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 12px !important;
  padding: 2px 2px 8px !important;
  border-bottom: 1px solid var(--border-color) !important;
}

.settings-back-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  background: transparent !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-primary) !important;
  padding: 0 !important;
  border-radius: var(--radius-sm, 8px) !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  flex-shrink: 0 !important;
}

.settings-back-btn:hover {
  background: var(--bg-card-hover) !important;
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}

.settings-detail-header-title {
  font-size: 0.96rem !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  flex: 1 !important;
  text-align: center !important;
}

.settings-detail-panel {
  display: none !important;
}

.settings-detail-panel.active {
  display: block !important;
}

/* Section Cards & Panels */
.settings-card-clean {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 14px 12px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-sm);
}

.settings-lead-text {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 12px;
}

/* Accordion for Advanced Settings */
.settings-accordion {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  margin-top: 12px;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.settings-accordion.expanded {
  border-color: rgba(20, 184, 166, 0.4);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.settings-accordion-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 10px !important;
  cursor: pointer !important;
  user-select: none !important;
  background: rgba(255, 255, 255, 0.02) !important;
  transition: background 0.15s ease !important;
}

.settings-accordion-header:hover {
  background: var(--bg-hover) !important;
}

.settings-accordion-title {
  font-size: 0.86rem !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.settings-accordion-title svg,
.settings-accordion-title i {
  color: var(--primary) !important;
  width: 16px !important;
  height: 16px !important;
}

.settings-accordion-arrow {
  width: 18px !important;
  height: 18px !important;
  color: var(--text-muted) !important;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s ease !important;
}

.settings-accordion.expanded .settings-accordion-arrow {
  transform: rotate(180deg) !important;
  color: var(--primary) !important;
}

.settings-accordion-content {
  display: none !important;
  padding: 14px 10px 16px !important;
  border-top: 1px solid var(--border-color) !important;
  background: var(--bg-surface) !important;
}

.settings-accordion.expanded .settings-accordion-content {
  display: block !important;
  animation: accordionOpen 0.2s ease-out !important;
}


/* ==========================================================================
   UNIVERSAL SHARE & PERMISSION MANAGER MODAL STYLES
   ========================================================================== */
.share-item-preview-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  margin-bottom: 16px;
}

.share-item-icon-bubble {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-md);
  background: rgba(59, 130, 246, 0.12);
  color: #3b82f6;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.share-item-info {
  flex: 1;
  min-width: 0;
}

.share-item-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.share-item-name {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.share-item-type-badge {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 6px;
  background: rgba(99, 102, 241, 0.12);
  color: var(--primary);
}

.share-section-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 14px 0 8px 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.share-services-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.share-service-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg-card);
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s ease;
}

.share-service-card:hover {
  border-color: var(--primary);
  background: rgba(99, 102, 241, 0.03);
}

.share-service-card.selected {
  border-color: var(--primary);
  background: rgba(99, 102, 241, 0.08);
  box-shadow: 0 0 0 1px var(--primary);
}

.share-service-icon-wrap {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.share-service-icon-wrap.server {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
}

.share-service-icon-wrap.google-drive {
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
}

.share-service-icon-wrap.dropbox {
  background: rgba(14, 165, 233, 0.15);
  color: #0ea5e9;
}

.share-service-body {
  flex: 1;
  min-width: 0;
}

.share-service-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 3px;
}

.share-service-name {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-primary);
}

.share-service-status-badge {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 6px;
}

.share-service-status-badge.connected {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
}

.share-service-status-badge.not-connected {
  background: rgba(148, 163, 184, 0.15);
  color: var(--text-muted);
}

.share-service-status-badge.planned {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
}

.share-service-desc {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.4;
  margin: 0;
}

.share-tabs-nav {
  display: flex;
  gap: 6px;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 14px;
}

.share-tab-btn {
  padding: 8px 14px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.share-tab-btn:hover {
  color: var(--text-primary);
}

.share-tab-btn.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

.share-form-box {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 14px;
  margin-bottom: 14px;
}

.share-form-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.share-role-select {
  padding: 8px 10px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  color: var(--text-primary);
  font-size: 0.85rem;
  font-weight: 500;
}

.share-member-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  margin-bottom: 6px;
  gap: 8px;
}

.share-member-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

.share-member-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.share-member-avatar-placeholder {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(99, 102, 241, 0.12);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.share-member-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.share-member-email {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.share-member-name {
  font-size: 0.74rem;
  color: var(--text-muted);
}

.share-member-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.share-role-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
}

.share-role-badge.editor {
  background: rgba(99, 102, 241, 0.12);
  color: var(--primary);
}

.share-role-badge.viewer {
  background: rgba(14, 165, 233, 0.12);
  color: #0ea5e9;
}

.btn-revoke-share {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.2);
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s ease;
}

.btn-revoke-share:hover {
  background: #ef4444;
  color: #ffffff;
}

.share-link-row {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-bottom: 8px;
}

.share-link-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.share-link-date {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.share-link-input-group {
  display: flex;
  gap: 6px;
}

.share-link-url-input {
  flex: 1;
  font-size: 0.78rem;
  padding: 6px 10px;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-family: monospace;
}

.btn-copy-link {
  background: var(--primary);
  color: #ffffff;
  border: none;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.btn-copy-link:hover {
  filter: brightness(1.1);
}

.share-empty-box {
  text-align: center;
  padding: 24px 16px;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.share-cloud-notice-box {
  background: var(--bg-card);
  border: 1px dashed var(--border-color);
  border-radius: var(--radius-md);
  padding: 20px;
  text-align: center;
}

.share-cloud-notice-box .share-notice-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(59, 130, 246, 0.12);
  color: #3b82f6;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
}

.share-cloud-notice-box h4 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.share-cloud-notice-box p {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
}

/* ==========================================================================
   ACCOUNTS FILTER & SHARED ITEMS DISPLAY HIGHLIGHTS
   ========================================================================== */

.accounts-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.accounts-segmented-tabs {
  display: inline-flex;
  align-items: center;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  padding: 4px;
  gap: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.accounts-seg-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
}

.accounts-seg-tab:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.04);
}

.accounts-seg-tab.active {
  background: var(--primary);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(13, 148, 136, 0.35);
}

.accounts-seg-tab .seg-count-badge {
  background: rgba(59, 130, 246, 0.2);
  color: #3b82f6;
  font-size: 0.7rem;
  font-weight: 800;
  padding: 1px 7px;
  border-radius: 10px;
  line-height: 1.2;
}

.accounts-seg-tab.active .seg-count-badge {
  background: rgba(255, 255, 255, 0.28);
  color: #ffffff;
}

.accounts-display-mode-wrap {
  display: inline-flex;
  align-items: center;
}

.btn-toggle-view-mode {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.btn-toggle-view-mode:hover {
  background: var(--bg-card-hover);
  border-color: var(--primary);
  color: var(--primary);
}

.btn-toggle-view-mode.mode-grouped {
  border-color: rgba(59, 130, 246, 0.3);
  color: #3b82f6;
}

/* TRƯỜNG RIÊNG: Nhóm tài khoản & sổ được chia sẻ */
.shared-highlight-section {
  border: 1.5px solid rgba(59, 130, 246, 0.45) !important;
  background: linear-gradient(180deg, rgba(59, 130, 246, 0.06) 0%, rgba(99, 102, 241, 0.02) 100%) !important;
  box-shadow: 0 4px 20px rgba(59, 130, 246, 0.1) !important;
  border-radius: var(--radius-lg);
  margin-bottom: 24px;
}

[data-theme="dark"] .shared-highlight-section {
  border-color: rgba(96, 165, 250, 0.45) !important;
  background: linear-gradient(180deg, rgba(37, 99, 235, 0.14) 0%, rgba(99, 102, 241, 0.05) 100%) !important;
  box-shadow: 0 4px 24px rgba(37, 99, 235, 0.2) !important;
}

/* THẺ TÀI KHOẢN/SỔ ĐƯỢC CHIA SẺ - LÀM NỔI BẬT ĐẶC BIỆT KHI HIỂN THỊ CHUNG & RIÊNG */
.account-list-item.shared-item-card,
.group-item-card.shared-item-card {
  border: 1.5px solid #3b82f6 !important;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, var(--bg-card) 100%) !important;
  box-shadow: 0 3px 12px rgba(59, 130, 246, 0.16) !important;
  position: relative;
  overflow: visible;
}

[data-theme="dark"] .account-list-item.shared-item-card,
[data-theme="dark"] .group-item-card.shared-item-card {
  border-color: #60a5fa !important;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.18) 0%, var(--bg-card) 100%) !important;
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.25) !important;
}

/* Dải Ribbon/Banner hiển thị thông tin chia sẻ trên từng thẻ */
.shared-item-highlight-ribbon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  margin-bottom: 6px;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  background: rgba(59, 130, 246, 0.12);
  border: 1px solid rgba(59, 130, 246, 0.25);
  box-sizing: border-box;
}

.shared-from-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.73rem;
  color: #2563eb;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

[data-theme="dark"] .shared-from-pill {
  color: #93c5fd;
}

.shared-from-pill strong {
  font-weight: 700;
  color: var(--text-primary);
}

.shared-role-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 0.69rem;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}

.shared-role-pill.viewer {
  background: rgba(59, 130, 246, 0.18);
  color: #2563eb;
}

[data-theme="dark"] .shared-role-pill.viewer {
  background: rgba(96, 165, 250, 0.22);
  color: #60a5fa;
}

.shared-role-pill.editor {
  background: rgba(16, 185, 129, 0.18);
  color: #10b981;
}

[data-theme="dark"] .shared-role-pill.editor {
  background: rgba(52, 211, 153, 0.22);
  color: #34d399;
}

/* Mini indicator icon on account avatar */
.account-icon-bubble.with-share-badge {
  position: relative;
}

.mini-share-indicator {
  position: absolute;
  bottom: -3px;
  right: -3px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #3b82f6;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--bg-card);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  pointer-events: none;
}

/* Category header inside Shared Group */
.shared-group-category-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 14px 0 8px 4px;
}

.shared-group-category-title:first-child {
  margin-top: 4px;
}


/* ==========================================================================
   ACCOUNTS FILTER & SHARED ITEMS - DARK THEME DESIGN
   ========================================================================== */
.accounts-filter-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 10px 0 16px 0 !important;
  padding: 2px 2px 8px 2px !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}
.accounts-filter-bar::-webkit-scrollbar {
  display: none !important;
}

.accounts-seg-tab {
  appearance: none !important;
  -webkit-appearance: none !important;
  background: var(--bg-surface, rgba(255, 255, 255, 0.05)) !important;
  border: 1px solid var(--border-color) !important;
  outline: none !important;
  color: var(--text-secondary) !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  padding: 7px 13px !important;
  border-radius: 9999px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  line-height: 1.2 !important;
  font-family: inherit !important;
  user-select: none !important;
}

.accounts-seg-tab:hover {
  color: var(--text-primary) !important;
  background: var(--bg-hover, rgba(255, 255, 255, 0.08)) !important;
}

.accounts-seg-tab.active {
  background: var(--primary, #0d9488) !important;
  border-color: var(--primary, #0d9488) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(13, 148, 136, 0.35) !important;
}

.accounts-seg-tab .seg-count-badge {
  background: rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  padding: 1px 6px !important;
  border-radius: 9999px !important;
  line-height: 1.2 !important;
}

.accounts-display-mode-wrap {
  display: inline-flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
}

.btn-toggle-view-mode {
  appearance: none !important;
  -webkit-appearance: none !important;
  background: var(--bg-surface, rgba(255, 255, 255, 0.05)) !important;
  border: 1px solid var(--border-color) !important;
  outline: none !important;
  color: var(--text-secondary) !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  padding: 7px 13px !important;
  border-radius: 9999px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  line-height: 1.2 !important;
  font-family: inherit !important;
  user-select: none !important;
}

.btn-toggle-view-mode:hover {
  background: var(--bg-hover, rgba(255, 255, 255, 0.08)) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

.btn-toggle-view-mode.mode-grouped {
  color: #38bdf8 !important;
  background: rgba(56, 189, 248, 0.12) !important;
  border-color: rgba(56, 189, 248, 0.35) !important;
}

.btn-toggle-view-mode.mode-unified {
  color: #a78bfa !important;
  background: rgba(167, 139, 250, 0.12) !important;
  border-color: rgba(167, 139, 250, 0.35) !important;
}

/* UNIVERSAL SHARE SERVICES & CARDS - DARK THEME */
.share-item-preview-card {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  background: rgba(30, 41, 59, 0.65) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 14px !important;
  padding: 12px 14px !important;
  margin-bottom: 16px !important;
}

.share-item-icon-bubble {
  width: 42px !important;
  height: 42px !important;
  border-radius: 12px !important;
  background: rgba(13, 148, 136, 0.15) !important;
  color: var(--primary, #0d9488) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.share-services-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin-bottom: 16px !important;
}

.share-service-card {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  background: rgba(30, 41, 59, 0.5) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  padding: 11px 13px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box !important;
}

.share-service-card:hover {
  background: rgba(30, 41, 59, 0.8) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

.share-service-card.selected {
  background: rgba(13, 148, 136, 0.1) !important;
  border-color: var(--primary, #0d9488) !important;
  box-shadow: 0 0 0 1px var(--primary, #0d9488) !important;
}

.share-service-card.disabled {
  opacity: 0.65 !important;
}

.share-service-icon-wrap {
  width: 36px !important;
  height: 36px !important;
  border-radius: 9px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.share-service-icon-wrap.server {
  background: rgba(168, 85, 247, 0.15) !important;
  color: #c084fc !important;
}

.share-service-icon-wrap.google-drive {
  background: rgba(59, 130, 246, 0.15) !important;
  color: #60a5fa !important;
}

.share-service-icon-wrap.dropbox {
  background: rgba(0, 97, 255, 0.15) !important;
  color: #38bdf8 !important;
}

.share-service-body {
  flex: 1 !important;
  min-width: 0 !important;
}

.share-service-top-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin-bottom: 2px !important;
}

.share-service-name {
  font-size: 0.86rem !important;
  font-weight: 700 !important;
  color: #f8fafc !important;
}

.share-service-desc {
  font-size: 0.75rem !important;
  color: #94a3b8 !important;
  line-height: 1.4 !important;
  margin: 0 !important;
}

.share-service-status-badge {
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  padding: 2px 8px !important;
  border-radius: 9999px !important;
  white-space: nowrap !important;
}

.share-service-status-badge.connected {
  background: rgba(16, 185, 129, 0.15) !important;
  color: #34d399 !important;
}

.share-service-status-badge.ready {
  background: rgba(59, 130, 246, 0.15) !important;
  color: #60a5fa !important;
}

.share-service-status-badge.not-connected {
  background: rgba(239, 68, 68, 0.15) !important;
  color: #f87171 !important;
}

.share-service-status-badge.planned {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #64748b !important;
}

/* SMART AUTH PROMPT CARD IN SHARE MODAL */
.share-auth-prompt-card {
  background: rgba(30, 41, 59, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 14px !important;
  padding: 16px !important;
  text-align: center !important;
}

.share-server-status-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: rgba(16, 185, 129, 0.12) !important;
  border: 1px solid rgba(16, 185, 129, 0.25) !important;
  color: #34d399 !important;
  font-size: 0.74rem !important;
  font-weight: 600 !important;
  padding: 4px 10px !important;
  border-radius: 9999px !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.share-server-status-pill .status-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #10b981 !important;
  box-shadow: 0 0 6px #10b981 !important;
  flex-shrink: 0 !important;
}


.share-active-user-banner {
  background: rgba(30, 41, 59, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 10px !important;
  padding: 8px 12px !important;
  margin-bottom: 12px !important;
}

.user-avatar-mini {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: var(--primary, #0d9488) !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.76rem !important;
  font-weight: 700 !important;
  flex-shrink: 0 !important;
}


/* ==========================================================================
   UNIVERSAL SHARE MODAL - TABS, FORMS & LISTS (DARK THEME NATIVE)
   ========================================================================== */

/* 1. Modal Navigation Tabs */
.share-tabs-nav {
  display: flex !important;
  align-items: center !important;
  background: rgba(15, 23, 42, 0.7) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  padding: 4px !important;
  gap: 4px !important;
  margin: 16px 0 14px 0 !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

.share-tab-btn {
  flex: 1 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  color: #94a3b8 !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  padding: 8px 12px !important;
  border-radius: 9px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
  font-family: inherit !important;
}

.share-tab-btn:hover {
  color: #f8fafc !important;
  background: rgba(255, 255, 255, 0.04) !important;
}

.share-tab-btn.active {
  background: var(--primary, #0d9488) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(13, 148, 136, 0.35) !important;
}

/* 2. Share Form Box & Rows */
.share-form-box {
  background: rgba(30, 41, 59, 0.45) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 14px !important;
  padding: 14px !important;
  margin-bottom: 16px !important;
  box-sizing: border-box !important;
}

.share-form-box label {
  color: #cbd5e1 !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  margin-bottom: 8px !important;
}

.share-form-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

@media (min-width: 480px) {
  .share-form-row {
    flex-wrap: nowrap !important;
  }
}

/* 3. Role Select Dropdown (Viewer / Editor) */
.share-role-select {
  appearance: none !important;
  -webkit-appearance: none !important;
  background-color: rgba(15, 23, 42, 0.8) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 9px !important;
  color: #f8fafc !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  padding: 8px 30px 8px 12px !important;
  outline: none !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  font-family: inherit !important;
  min-height: 38px !important;
}

.share-role-select:focus {
  border-color: var(--primary, #0d9488) !important;
  box-shadow: 0 0 0 2px rgba(13, 148, 136, 0.2) !important;
}

.share-role-select option {
  background: #0f172a !important;
  color: #f8fafc !important;
}

/* 4. Section Title */
.share-section-title {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  color: #94a3b8 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  margin: 14px 0 10px 0 !important;
}

/* 5. Empty State Box */
.share-empty-box {
  background: rgba(15, 23, 42, 0.35) !important;
  border: 1px dashed rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px !important;
  padding: 24px 16px !important;
  text-align: center !important;
  margin: 6px 0 14px 0 !important;
}

.share-empty-box i,
.share-empty-box svg {
  color: #64748b !important;
  margin: 0 auto 8px auto !important;
  display: block !important;
}

.share-empty-box p {
  color: #94a3b8 !important;
  font-size: 0.82rem !important;
  margin: 0 0 4px 0 !important;
  font-weight: 500 !important;
}

.share-empty-box span {
  color: #64748b !important;
  font-size: 0.75rem !important;
}

/* 6. Members List & Rows */
#share-email-members-list,
#share-active-links-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin-bottom: 14px !important;
}

.share-member-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: rgba(30, 41, 59, 0.45) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 11px !important;
  padding: 9px 12px !important;
  gap: 10px !important;
}

.share-member-left {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
  flex: 1 !important;
}

.share-member-avatar {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.share-member-avatar-placeholder {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: rgba(59, 130, 246, 0.15) !important;
  color: #60a5fa !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.share-member-info {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
}

.share-member-email {
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  color: #f8fafc !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.share-member-name {
  font-size: 0.72rem !important;
  color: #94a3b8 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.share-member-right {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
}

.share-role-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  white-space: nowrap !important;
}

.share-role-badge.viewer {
  background: rgba(59, 130, 246, 0.15) !important;
  color: #60a5fa !important;
}

.share-role-badge.editor {
  background: rgba(16, 185, 129, 0.15) !important;
  color: #34d399 !important;
}

.btn-revoke-share {
  appearance: none !important;
  -webkit-appearance: none !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  color: #f87171 !important;
  padding: 4px 8px !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  transition: all 0.2s ease !important;
  font-family: inherit !important;
}

.btn-revoke-share:hover {
  background: rgba(239, 68, 68, 0.12) !important;
  color: #ef4444 !important;
}

/* 7. Share Links Rows & Groups */
.share-link-row {
  background: rgba(30, 41, 59, 0.45) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  padding: 10px 12px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.share-link-header-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
}

.share-link-date {
  font-size: 0.72rem !important;
  color: #94a3b8 !important;
}

.share-link-input-group {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.share-link-url-input {
  flex: 1 !important;
  background: rgba(15, 23, 42, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 8px !important;
  padding: 6px 10px !important;
  color: #e2e8f0 !important;
  font-size: 0.76rem !important;
  font-family: monospace !important;
  outline: none !important;
}

.btn-copy-link {
  appearance: none !important;
  -webkit-appearance: none !important;
  background: rgba(59, 130, 246, 0.15) !important;
  border: 1px solid rgba(59, 130, 246, 0.3) !important;
  color: #60a5fa !important;
  border-radius: 8px !important;
  padding: 6px 12px !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  white-space: nowrap !important;
  transition: all 0.2s ease !important;
  font-family: inherit !important;
}

.btn-copy-link:hover {
  background: rgba(59, 130, 246, 0.25) !important;
  color: #93c5fd !important;
}

.share-loading-spinner {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 16px !important;
  color: #94a3b8 !important;
  font-size: 0.8rem !important;
}


/* ==========================================================================
   PULL TO REFRESH COMPONENT (VÒNG TRÒN CÁC CHẤM MÔ PHỎNG KÉO TAY - APPLE STYLE)
   ========================================================================== */
.ptr-indicator {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  height: auto;
  z-index: 38;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translate3d(0, 0, 0);
  will-change: transform, opacity;
}

@media (min-width: 769px) {
  .ptr-indicator {
    left: var(--sidebar-width, 260px);
  }
}

.ptr-circle-badge {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  color: var(--text-muted, #94a3b8);
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: color 0.2s ease, transform 0.15s ease;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  flex-shrink: 0;
}

body.light .ptr-circle-badge,
[data-theme="light"] .ptr-circle-badge {
  background: transparent !important;
  color: #64748b;
  border: none !important;
  box-shadow: none !important;
}

.ptr-indicator.ready .ptr-circle-badge {
  border: none !important;
  color: #10b981 !important;
  box-shadow: none !important;
  transform: scale(1.15);
}

.ptr-dots-spinner {
  width: 22px;
  height: 22px;
  display: block;
  transform-origin: center center;
  transition: transform 0.05s linear;
}

.ptr-dot {
  transition: opacity 0.1s ease;
}


/* Server Auth Modals (Logout & Login Sync Strategy) */
.auth-action-card,
.login-sync-opt-card {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding: 14px !important;
  border: 1.5px solid var(--border-color, #e2e8f0) !important;
  border-radius: var(--radius-md, 12px) !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  background: var(--bg-card, #ffffff) !important;
}

.auth-action-card:hover,
.login-sync-opt-card:hover {
  border-color: var(--primary, #0d9488) !important;
  background: var(--bg-hover, rgba(13, 148, 136, 0.04)) !important;
}

.login-sync-opt-card.selected {
  border-color: var(--primary, #0d9488) !important;
  background: rgba(13, 148, 136, 0.07) !important;
  box-shadow: 0 0 0 1px var(--primary, #0d9488) !important;
}

/* ==========================================================================
   SERVER SYNC & MULTI-VAULT REDESIGN
   ========================================================================== */
.server-user-header-card {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 4px 2px 14px 2px !important;
  margin-bottom: 2px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.server-user-header-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  width: 100% !important;
  min-width: 0 !important;
  flex-wrap: nowrap !important;
}

.server-avatar-wrapper {
  position: relative !important;
  width: 34px !important;
  height: 34px !important;
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.server-user-avatar-round {
  width: 34px !important;
  height: 34px !important;
  max-width: 34px !important;
  max-height: 34px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: block !important;
  border: 1.5px solid var(--primary, #0d9488) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15) !important;
}

.server-reauth-badge-btn {
  position: absolute !important;
  bottom: -3px !important;
  right: -3px !important;
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  background: #2563eb !important;
  border: 1.5px solid var(--bg-surface, #ffffff) !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  padding: 0 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
  transition: transform 0.15s ease, background-color 0.15s ease !important;
  z-index: 2 !important;
}

.server-reauth-badge-btn:hover {
  transform: scale(1.15) !important;
  background: #1d4ed8 !important;
}

.server-reauth-badge-btn i,
.server-reauth-badge-btn svg {
  width: 9px !important;
  height: 9px !important;
  stroke-width: 2.5 !important;
}

.server-user-meta {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  overflow: hidden !important;
}

.server-user-name {
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.25 !important;
}

.server-user-email {
  font-size: 0.72rem !important;
  color: var(--text-muted) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.25 !important;
}

.btn-server-logout-compact {
  width: 28px !important;
  height: 28px !important;
  border-radius: 7px !important;
  border: 1px solid rgba(239, 68, 68, 0.25) !important;
  background: rgba(239, 68, 68, 0.1) !important;
  color: #ef4444 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
  transition: all 0.15s ease !important;
}

.btn-server-logout-compact:hover {
  background: rgba(239, 68, 68, 0.22) !important;
  transform: scale(1.06) !important;
}

.server-url-line-box {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border-color, #e2e8f0);
}

.server-url-caption {
  color: var(--text-muted);
  font-size: 0.74rem;
  margin-top: 5px;
  line-height: 1.35;
}

/* Small Switch Variant for List Items */
.app-switch.switch-sm,
.switch.switch-sm {
  width: 34px !important;
  height: 18px !important;
}

.app-switch.switch-sm .app-switch-slider,
.switch.switch-sm .slider {
  border-radius: 18px !important;
}

.app-switch.switch-sm .app-switch-slider::before,
.switch.switch-sm .slider::before {
  width: 12px !important;
  height: 12px !important;
  left: 1px !important;
  top: 1px !important;
}

.app-switch.switch-sm input:checked + .app-switch-slider::before,
.switch.switch-sm input:checked + .slider::before {
  transform: translateX(16px) !important;
}

/* Multi-Vault List Styles */
.server-vault-section-box {
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: var(--radius-md, 12px);
  padding: 12px;
  margin-bottom: 14px;
}

.server-vaults-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.server-vault-row {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  padding: 9px 12px !important;
  background: var(--bg-surface, rgba(255, 255, 255, 0.03)) !important;
  border: 1px solid var(--border-color, #e2e8f0) !important;
  border-radius: var(--radius-md, 10px) !important;
  cursor: pointer !important;
  user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
  transition: all 0.18s ease !important;
}

.server-vault-row:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(13, 148, 136, 0.35) !important;
}

.server-vault-row.is-active {
  border-color: var(--primary, #0d9488) !important;
  background: rgba(13, 148, 136, 0.08) !important;
  box-shadow: 0 0 0 1px rgba(13, 148, 136, 0.25) !important;
}

.server-vault-row-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  width: 100% !important;
}

.server-vault-row-bottom {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  width: 100% !important;
}

.server-vault-caption-text {
  font-size: 0.74rem !important;
  color: var(--text-muted) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  flex: 1 !important;
  min-width: 0 !important;
  line-height: 1.3 !important;
}

.server-vault-left-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.server-vault-icon-actions {
  display: flex;
  align-items: center;
  gap: 3px;
}

/* Các nút hành động trên mỗi sổ có MÀU SẮC NỔI BẬT & ĐỒNG BỘ */
.btn-vault-icon {
  width: 26px !important;
  height: 26px !important;
  border-radius: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  padding: 0 !important;
  transition: all 0.15s ease !important;
  border: 1px solid transparent !important;
}

/* Chia sẻ sổ: Xanh lục (Emerald Green) */
.btn-vault-icon.btn-vault-share {
  color: #059669 !important;
  background: rgba(16, 185, 129, 0.12) !important;
  border-color: rgba(16, 185, 129, 0.25) !important;
}
.btn-vault-icon.btn-vault-share:hover {
  background: rgba(16, 185, 129, 0.22) !important;
  transform: scale(1.08) !important;
}

/* Đổi tên: Xanh dương (Blue) */
.btn-vault-icon.btn-vault-rename {
  color: #2563eb !important;
  background: rgba(37, 99, 235, 0.12) !important;
  border-color: rgba(37, 99, 235, 0.25) !important;
}
.btn-vault-icon.btn-vault-rename:hover {
  background: rgba(37, 99, 235, 0.22) !important;
  transform: scale(1.08) !important;
}

/* Sao chép: Xanh ngọc (Emerald Green) */
.btn-vault-icon.btn-vault-copy {
  color: #059669 !important;
  background: rgba(5, 150, 105, 0.12) !important;
  border-color: rgba(5, 150, 105, 0.25) !important;
}
.btn-vault-icon.btn-vault-copy:hover {
  background: rgba(5, 150, 105, 0.22) !important;
  transform: scale(1.08) !important;
}

/* Lịch sử: Tím (Purple / Violet) */
.btn-vault-icon.btn-vault-history {
  color: #7c3aed !important;
  background: rgba(124, 58, 237, 0.12) !important;
  border-color: rgba(124, 58, 237, 0.25) !important;
}
.btn-vault-icon.btn-vault-history:hover {
  background: rgba(124, 58, 237, 0.22) !important;
  transform: scale(1.08) !important;
}

/* Xóa sổ: Đỏ (Red) */
.btn-vault-icon.btn-vault-delete {
  color: #dc2626 !important;
  background: rgba(220, 38, 38, 0.12) !important;
  border-color: rgba(220, 38, 38, 0.25) !important;
}
.btn-vault-icon.btn-vault-delete:hover {
  background: rgba(220, 38, 38, 0.22) !important;
  transform: scale(1.08) !important;
}

.server-vault-center-info {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.server-vault-name-text {
  font-size: 0.86rem;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.server-vault-name-text.active-name {
  font-weight: 700;
  color: var(--primary, #0d9488);
}

.vault-pill-active {
  font-size: 0.68rem;
  padding: 1px 7px;
  border-radius: 9999px;
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}

.server-vault-perm-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--bg-hover, rgba(0, 0, 0, 0.05));
  flex-shrink: 0;
}

.server-vault-owner-line {
  font-size: 0.72rem;
  color: var(--text-muted);
  line-height: 1.2;
}

.server-vaults-empty {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-style: italic;
  padding: 10px;
  text-align: center;
}

.btn-icon-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.btn-icon-circle:hover {
  transform: scale(1.08);
}

/* Nút thêm mới sổ (+) có màu sắc đồng bộ */
.btn-icon-circle.btn-primary#btn-server-create-vault {
  width: 28px !important;
  height: 28px !important;
  border-radius: 7px !important;
  background: var(--primary, #0d9488) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 2px 6px rgba(13, 148, 136, 0.35) !important;
}

/* Cụm chọn quyền chia sẻ bằng icon gọn gàng: Bút (Ghi chép) / Mắt (Chỉ xem) */
.share-role-icon-segmented {
  display: inline-flex;
  align-items: center;
  background: var(--bg-surface, rgba(0, 0, 0, 0.05));
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 8px;
  padding: 2px;
  gap: 2px;
  flex-shrink: 0;
}

.btn-share-role-icon {
  width: 28px !important;
  height: 28px !important;
  border-radius: 6px !important;
  border: none !important;
  background: transparent;
  color: var(--text-muted);
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  padding: 0 !important;
}

.btn-share-role-icon:hover {
  color: var(--text-primary) !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

.btn-share-role-icon.role-btn-editor.active,
.btn-share-role-icon.active[data-role="editor"] {
  background: #2563eb !important;
  color: #ffffff !important;
  box-shadow: 0 1px 4px rgba(37, 99, 235, 0.35) !important;
}

.btn-share-role-icon.role-btn-viewer.active,
.btn-share-role-icon.active[data-role="viewer"] {
  background: #d97706 !important;
  color: #ffffff !important;
  box-shadow: 0 1px 4px rgba(217, 119, 6, 0.35) !important;
}

/* Viền bao sát màn hình trên di động */
@media (max-width: 768px) {
  #view-settings.page-view {
    padding: 10px 7px 8px 7px !important;
  }
  .settings-container {
    padding: 0 4px 4px 4px !important;
  }
  .settings-card-clean {
    padding: 14px 12px !important;
    border-radius: var(--radius-md) !important;
  }
  .server-vault-section-box {
    padding: 12px 10px !important;
  }

  /* Mở rộng các vòng bao xát viền màn hình trong modal chia sẻ & cài đặt */
  #modal-server-vault-share .modal-dialog,
  #modal-server-vault-history .modal-dialog,
  #modal-budget-settings .modal-dialog,
  #modal-universal-share .modal-dialog {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: var(--radius-md) !important;
  }
  #modal-server-vault-share .modal-body,
  #modal-server-vault-history .modal-body,
  #modal-budget-settings .modal-body {
    padding: 14px 10px !important;
  }
  #modal-server-vault-share .modal-header,
  #modal-server-vault-history .modal-header,
  #modal-budget-settings .modal-header {
    padding: 14px 12px !important;
  }
  #modal-budget-settings .modal-header .btn-icon {
    right: 12px !important;
  }
  #modal-server-vault-share .modal-footer,
  #modal-server-vault-history .modal-footer,
  #modal-budget-settings .modal-footer {
    padding: 12px 10px !important;
  }
  #modal-server-vault-share.modal-overlay,
  #modal-server-vault-history.modal-overlay,
  #modal-budget-settings.modal-overlay,
  #modal-universal-share.modal-overlay {
    padding: 6px 4px max(8px, env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* Server Share User Suggestion Dropdown & Form Wrap */
.server-share-email-wrapper {
  position: relative;
  flex: 1;
  min-width: 0;
}

.server-share-user-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--bg-surface, #0f172a);
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.15));
  border-radius: var(--radius-md, 10px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  max-height: 220px;
  overflow-y: auto;
  z-index: 100;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.server-share-user-dropdown-header {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-muted, #94a3b8);
  padding: 5px 8px 3px 8px;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.server-share-user-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s ease;
  user-select: none;
}

.server-share-user-item:hover,
.server-share-user-item.is-selected {
  background: rgba(16, 185, 129, 0.14);
}

.server-share-user-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.server-share-user-avatar-fallback {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(16, 185, 129, 0.2);
  color: #10b981;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  font-weight: 700;
  flex-shrink: 0;
}

.server-share-user-info {
  flex: 1;
  min-width: 0;
}

.server-share-user-name {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-primary, #f8fafc);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.2;
}

.server-share-user-email {
  font-size: 0.70rem;
  color: var(--text-muted, #94a3b8);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.2;
}

.server-share-user-empty {
  padding: 10px;
  text-align: center;
  font-size: 0.74rem;
  color: var(--text-muted);
  font-style: italic;
}
/* ==========================================================================
   CUSTOM DIALOGS & POPUPS (showConfirm, showPrompt, showAlert)
   ========================================================================== */
#modal-custom-dialog.modal-overlay {
  z-index: 100050 !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding: 16px;
}

#modal-custom-dialog .custom-dialog-box {
  max-width: 440px !important;
  width: 100% !important;
  border-radius: var(--radius-lg, 16px) !important;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.45) !important;
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.12)) !important;
  background: var(--bg-surface, #0f172a) !important;
  overflow: hidden;
  animation: customDialogPopIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes customDialogPopIn {
  from {
    opacity: 0;
    transform: scale(0.93) translateY(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.custom-dialog-header {
  padding: 16px 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.08)) !important;
  background: var(--bg-card, rgba(255, 255, 255, 0.03)) !important;
}

.custom-dialog-title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.custom-dialog-icon-badge {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(20, 184, 166, 0.12);
  color: var(--primary, #14b8a6);
  transition: all 0.2s ease;
}

.custom-dialog-icon-badge.danger {
  background: rgba(239, 68, 68, 0.14) !important;
  color: #ef4444 !important;
}

.custom-dialog-icon-badge.warning {
  background: rgba(245, 158, 11, 0.14) !important;
  color: #f59e0b !important;
}

.custom-dialog-icon-badge.info {
  background: rgba(59, 130, 246, 0.14) !important;
  color: #3b82f6 !important;
}

.custom-dialog-icon-badge.success {
  background: rgba(16, 185, 129, 0.14) !important;
  color: #10b981 !important;
}

.custom-dialog-title-text {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  margin: 0 !important;
  line-height: 1.3;
}

.custom-dialog-body {
  padding: 20px 22px !important;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.custom-dialog-message {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--text-secondary);
  word-break: break-word;
}

.custom-dialog-message strong,
.custom-dialog-message b {
  color: var(--text-primary);
  font-weight: 600;
}

.custom-dialog-input-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.custom-dialog-input {
  width: 100%;
  padding: 12px 14px;
  font-size: 15px;
  color: var(--text-primary);
  background: var(--bg-card);
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md, 10px);
  outline: none;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.custom-dialog-input:focus {
  border-color: var(--primary, #14b8a6);
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.2);
}

.custom-dialog-input-hint {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.4;
}

/* Nút Hủy và Xác nhận trong Cài đặt & Hộp thoại xác nhận: chia đôi và căn đều */
.custom-dialog-footer,
#modal-server-logout .modal-footer,
#modal-server-login-sync .modal-footer,
#modal-receive-share .modal-footer,
#modal-budget-settings .modal-footer {
  padding: 14px 18px !important;
  border-top: 1px solid var(--border-color, rgba(255, 255, 255, 0.08)) !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 12px !important;
  background: var(--bg-card, rgba(255, 255, 255, 0.02)) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.custom-dialog-footer button,
#modal-server-logout .modal-footer button,
#modal-server-login-sync .modal-footer button,
#modal-receive-share .modal-footer button,
#modal-budget-settings .modal-footer button {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  width: 100% !important;
  justify-content: center !important;
  text-align: center !important;
  margin: 0 !important;
  padding: 11px 14px !important;
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  border-radius: var(--radius-md) !important;
}

#server-admin-card {
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
#server-admin-card:hover {
  transform: translateY(-1px);
  border-color: var(--primary) !important;
  box-shadow: 0 4px 14px rgba(13, 148, 136, 0.2);
}

/* Toast Warning & Multi-line Support */
.toast.warning {
  border-color: rgba(245, 158, 11, 0.45);
}
.toast.warning i {
  color: #f59e0b;
}

.toast.multi-line {
  border-radius: 14px;
  padding: 9px 16px;
  align-items: flex-start;
  gap: 10px;
}
.toast.multi-line span {
  white-space: pre-line;
  text-align: left;
  line-height: 1.5;
  display: block;
}

/* Local-only status dots */
.sync-status-dot.local {
  background: #64748b;
  box-shadow: none;
}
.sync-popover-dot.local {
  background: #64748b;
}

/* ==================== TEMPLATE EDITOR PAGE ==================== */
.tpl-editor-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 4px;
}

.tpl-editor-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 12px;
  font-size: 0.92rem;
  font-weight: 600;
  border-radius: var(--radius-md, 10px);
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s ease;
}

.tpl-editor-tab[data-type="expense"].active {
  background: rgba(244, 63, 94, 0.12);
  color: #f43f5e;
  border-color: rgba(244, 63, 94, 0.4);
}

.tpl-editor-tab[data-type="expense"] i {
  color: #f43f5e;
}

.tpl-editor-tab[data-type="income"].active {
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
  border-color: rgba(16, 185, 129, 0.4);
}

.tpl-editor-tab[data-type="income"] i {
  color: #10b981;
}

/* Template Variables Formula Help Panel */
.tpl-variables-help-panel {
  border-radius: 12px;
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
  animation: fadeIn 0.18s ease;
}

.tpl-var-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-color);
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.tpl-var-row:hover,
.tpl-var-row:active {
  background: rgba(13, 148, 136, 0.12);
  border-color: var(--primary);
  transform: translateY(-1px);
}

.tpl-var-badge {
  font-family: var(--font-mono, monospace);
  font-weight: 700;
  font-size: 0.78rem;
  background: rgba(13, 148, 136, 0.18);
  color: var(--primary);
  padding: 3px 7px;
  border-radius: 5px;
  letter-spacing: 0.3px;
  flex-shrink: 0;
}

.tpl-var-desc {
  font-size: 0.76rem;
  color: var(--text-secondary);
  line-height: 1.25;
}

.tpl-var-val {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  font-family: var(--font-mono, monospace);
  flex-shrink: 0;
  margin-left: 8px;
}


/* ==================== TEMPLATE MANAGER TABS (CĂNG ĐỀU, ĐỎ - XANH) ==================== */
.tpl-manager-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  background: var(--bg-surface);
  padding: 4px;
  border-radius: var(--radius-md, 12px);
  border: 1px solid var(--border-color);
}

.tpl-manager-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: calc(var(--radius-md, 12px) - 2px);
  font-size: 0.95rem;
  font-weight: 700;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s ease;
}

.tpl-manager-tab:hover {
  color: var(--text-primary);
}

.tpl-manager-tab[data-type="expense"] i,
.tpl-manager-tab[data-type="expense"] svg {
  color: #f43f5e;
  width: 18px;
  height: 18px;
}

.tpl-manager-tab[data-type="income"] i,
.tpl-manager-tab[data-type="income"] svg {
  color: #10b981;
  width: 18px;
  height: 18px;
}

.tpl-manager-tab[data-type="expense"].active {
  background: rgba(244, 63, 94, 0.14);
  color: #f43f5e;
  border-color: rgba(244, 63, 94, 0.35);
  box-shadow: 0 2px 8px rgba(244, 63, 94, 0.12);
}

.tpl-manager-tab[data-type="income"].active {
  background: rgba(16, 185, 129, 0.14);
  color: #10b981;
  border-color: rgba(16, 185, 129, 0.35);
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.12);
}

/* ==================== BORDERED INPUT CHO GHI CHÚ VÀ TÊN MẪU ==================== */
.tpl-bordered-input {
  width: 100%;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md, 10px);
  padding: 10px 34px 10px 12px;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text-primary);
  outline: none;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.tpl-bordered-input::placeholder {
  color: var(--text-muted);
  font-weight: 400;
  opacity: 0.75;
}

.tpl-bordered-input:focus {
  border-color: var(--primary);
  background: var(--bg-card);
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.15);
}


/* ==================== UNIVERSAL SHARE MODAL - EDGE-TO-EDGE & DROPDOWN ==================== */
/* Mở rộng toàn bộ modal Chia Sẻ & Phân Quyền sát viền màn hình để tăng diện tích hiển thị */
#modal-universal-share {
  padding: 6px 4px max(8px, env(safe-area-inset-bottom, 0px)) !important;
}

#modal-universal-share .modal-dialog {
  width: 100% !important;
  max-width: 560px !important;
  min-height: 480px !important;
  margin: 0 auto !important;
  border-radius: 18px !important;
}

#modal-universal-share .modal-header {
  padding: 14px 14px 12px 14px !important;
}

#modal-universal-share .modal-body {
  padding: 14px 12px !important;
  min-height: 420px !important;
  position: relative !important;
}

#modal-universal-share .modal-footer {
  padding: 12px 12px !important;
}

@media (max-width: 640px) {
  #modal-universal-share {
    padding: 6px 3px max(6px, env(safe-area-inset-bottom, 0px)) !important;
  }
  #modal-universal-share .modal-dialog {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 460px !important;
    margin: 0 !important;
    border-radius: 16px !important;
  }
  #modal-universal-share .modal-body {
    padding: 12px 10px !important;
    min-height: 400px !important;
    position: relative !important;
  }
  #modal-universal-share .modal-header {
    padding: 12px 10px !important;
  }
  #modal-universal-share .modal-footer {
    padding: 10px 10px !important;
  }
}

/* Dropdown Dịch Vụ Sao Lưu & Chia Sẻ - Phong cách nút Thu/Chi kèm icon */
.share-service-dropdown-wrap {
  margin-bottom: 16px !important;
  position: relative !important;
}

.share-service-dropdown-wrapper {
  position: relative !important;
  width: 100% !important;
}

.share-service-dropdown-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  gap: 8px !important;
  background: var(--bg-card, #1e293b) !important;
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.14)) !important;
  border-radius: var(--radius-full, 9999px) !important;
  padding: 7px 14px !important;
  color: var(--text-primary, #f8fafc) !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  width: 100% !important;
  box-sizing: border-box !important;
  text-align: left !important;
}

.share-service-dropdown-btn:hover,
.share-service-dropdown-btn:focus {
  border-color: var(--primary, #0d9488) !important;
  box-shadow: 0 0 0 2px rgba(13, 148, 136, 0.25) !important;
}

.share-service-badge-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px !important;
  height: 22px !important;
  flex-shrink: 0 !important;
}

#share-service-current-label {
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  color: var(--text-primary, #f8fafc) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.share-service-status-pill {
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  padding: 2px 8px !important;
  border-radius: 9999px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

.share-service-status-pill.connected {
  background: rgba(16, 185, 129, 0.16) !important;
  color: #10b981 !important;
  border: 1px solid rgba(16, 185, 129, 0.3) !important;
}

.share-service-status-pill.ready {
  background: rgba(59, 130, 246, 0.16) !important;
  color: #3b82f6 !important;
  border: 1px solid rgba(59, 130, 246, 0.3) !important;
}

.share-service-status-pill.not-connected {
  background: rgba(239, 68, 68, 0.16) !important;
  color: #ef4444 !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
}

.share-service-status-pill.planned {
  background: rgba(148, 163, 184, 0.16) !important;
  color: #94a3b8 !important;
  border: 1px solid rgba(148, 163, 184, 0.25) !important;
}

.share-service-chevron {
  flex-shrink: 0 !important;
}

.share-service-btn-left {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
  flex: 1 !important;
}

.share-service-btn-right {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
}

.share-service-chevron {
  flex-shrink: 0 !important;
  transition: transform 0.2s ease !important;
}

.share-service-dropdown-btn.active .share-service-chevron,
.share-service-dropdown-btn.open .share-service-chevron {
  transform: rotate(180deg) !important;
}

.share-service-dropdown-menu {
  position: absolute !important;
  top: calc(100% + 6px) !important;
  left: 0 !important;
  right: 0 !important;
  background: var(--bg-surface, #0f172a) !important;
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.16)) !important;
  border-radius: var(--radius-md, 12px) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55) !important;
  z-index: 100 !important;
  overflow: hidden !important;
  padding: 6px !important;
  display: none !important;
  flex-direction: column !important;
  gap: 3px !important;
}

.share-service-dropdown-menu.show,
.share-service-dropdown-menu.open {
  display: flex !important;
}

@media (max-width: 480px) {
  .share-service-dropdown-btn {
    padding: 6px 10px !important;
    gap: 6px !important;
  }
  #share-service-current-label {
    font-size: 0.82rem !important;
  }
  .share-service-status-pill {
    font-size: 0.65rem !important;
    padding: 2px 6px !important;
  }
  .share-service-option {
    padding: 8px 10px !important;
    font-size: 0.84rem !important;
  }
  .share-service-option-title {
    font-size: 0.84rem !important;
  }
}

.share-service-option {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 10px 12px !important;
  border-radius: var(--radius-sm, 8px) !important;
  cursor: pointer !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  color: var(--text-primary, #f8fafc) !important;
  transition: background 0.15s ease !important;
}

.share-service-option-info {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.share-service-option-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px !important;
  height: 22px !important;
  flex-shrink: 0 !important;
}

.share-service-option:hover,
.share-service-option.active {
  background: rgba(255, 255, 255, 0.08) !important;
}

.share-service-option.active {
  border-left: 3px solid var(--primary, #0d9488) !important;
}