/* Shared theme CSS for LittleSaving
 * Import this in every HTML page after Tailwind CSS
 */

/* Trang không "nảy" khi kéo quá đầu / cuối — trên iPhone cú nảy kéo cả thanh
   menu dưới cùng lên, trông như menu lơ lửng (28/09). Đánh đổi: mất kéo-để-tải-lại
   trong trình duyệt (app mở từ màn hình chính vốn không có). */
html,
body {
  overscroll-behavior-y: none;
}

/* Thanh menu (js/components/nav.js): lớp vẽ riêng để iOS không vẽ lại cùng nội
   dung khi cuộn — thanh bám đáy màn hình thay vì trễ theo. */
.app-nav {
  transform: translateZ(0);
  /* Hiệu ứng chuyển trang: menu là một nhóm riêng, giống hệt giữa hai trang
     nên đứng yên; chỉ nội dung mờ chuyển (Chrome 126+, Safari 18.2+). */
  view-transition-name: app-nav;
}

@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 150ms;
}

/* ===========================
   Core Reusable Components
   =========================== */

/* Primary CTA Button */
.btn-primary {
  background: rgb(var(--c-primary));
  transition: all 0.3s ease;
}
.btn-primary:hover {
  background: rgb(var(--c-primary-hover));
  box-shadow: 0 0 20px rgba(56, 102, 65, 0.4);
  transform: translateY(-1px);
}

/* Social Login Button */
.social-btn {
  transition: all 0.3s ease;
  border: 1px solid rgb(var(--c-border));
}
.social-btn:hover {
  border-color: rgb(var(--c-primary));
  background: rgba(56, 102, 65, 0.08);
  transform: translateY(-1px);
}

/* Input Field */
.input-field {
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.input-field:focus {
  border-color: rgb(var(--c-primary));
  box-shadow: 0 0 0 3px rgba(56, 102, 65, 0.15);
  outline: none;
}

/* Viền lỗi validation — màu error. Đặt sau :focus để thắng cả khi đang
   gõ. Trước đây class này được dùng ở mọi trang auth nhưng chưa từng
   được định nghĩa, nên register/join/reset-password không có viền đỏ. */
.error-border,
.error-border:focus {
  /* !important: Tailwind CDN chèn CSS sau file này, border-* utility
     cùng độ ưu tiên sẽ thắng nếu không có. */
  border-color: rgb(var(--c-error)) !important;
  box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.15);
}

/* Ô chưa chắc sau khi đọc hóa đơn (độ tin cậy < 90%) — màu warning.
   Không phải lỗi, nên không dùng màu error. Gắn bằng classList trong
   js/components/quick-add.js (WORKFLOW mục 15). */
.field-uncertain,
.field-uncertain:focus {
  border-color: rgb(var(--c-warning)) !important;
  box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.35);
}

/* Tour hướng dẫn (js/components/tour.js): ô sáng khoét trong lớp phủ — bóng đổ cực lớn
   màu --c-overlay (cùng màu nền mờ sau sheet, đổi theo giao diện) + viền accent. */
.tour-spotlight {
  position: fixed;
  z-index: 70;
  border-radius: 0.75rem;
  pointer-events: none;
  box-shadow: 0 0 0 9999px var(--c-overlay), 0 0 0 2px rgb(var(--c-accent));
  transition: top 0.2s, left 0.2s, width 0.2s, height 0.2s;
}
@media (prefers-reduced-motion: reduce) {
  .tour-spotlight { transition: none; }
}

/* Hàng chip cuộn ngang (Quick Add: danh mục, ví) — ẩn thanh cuộn, vẫn vuốt / cuộn được. */
.scrollbar-none {
  scrollbar-width: none;
}
.scrollbar-none::-webkit-scrollbar {
  display: none;
}

/* Banner mất mạng (js/lib/pwa.js) — dính trên cùng, đẩy nội dung xuống
   thay vì che header. Màu warning: không phải lỗi, là trạng thái. */
.offline-banner {
  position: sticky;
  top: 0;
  z-index: 45;
  padding: 0.5rem 1rem;
  background: rgb(var(--c-surface-raised));
  border-bottom: 1px solid rgb(var(--c-warning));
  color: rgb(var(--c-warning));
  font-size: 0.8125rem;
  text-align: center;
}
.offline-banner[hidden] { display: none; }

/* Chọn quốc gia (js/components/country-picker.js) — dựng bằng JS nên
   style ở đây thay vì Tailwind (WORKFLOW mục 15). */
.flag-img {
  width: 1.5rem;
  height: 1.125rem;
  flex-shrink: 0;
  border-radius: 2px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgb(var(--c-border-strong));
}
.country-option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  border-radius: 0.75rem;
  color: rgb(var(--c-fg));
  font-size: 0.875rem;
  text-align: left;
}
.country-option:hover,
.country-option:focus-visible { background: rgb(var(--c-surface-raised)); outline: none; }
.country-option[aria-selected="true"] { background: rgba(56, 102, 65, 0.25); color: rgb(var(--c-accent)); }
.country-list { max-height: 55vh; overflow-y: auto; margin-top: 0.75rem; }

/* Dòng gợi ý dưới ô Gõ nhanh — màu theo kết quả. */
.hint-success { color: rgb(var(--c-accent)); }
.hint-error { color: rgb(var(--c-error)); }
.hint-warning { color: rgb(var(--c-warning)); }

/* Link Hover */
.link-hover:hover {
  color: rgb(var(--c-accent));
}

/* Card with Shadow */
.card-glow {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

/* ===========================
   Checkboxes (Context-Specific)
   =========================== */

/* Base Checkbox */
.checkbox-custom {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

/* Login Page: White bg, black tick */
#loginForm .checkbox-custom {
  background-color: #ffffff;
  border: 1px solid #ffffff;
}
#loginForm .checkbox-custom:checked {
  background-color: #ffffff;
  border-color: #ffffff;
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='black' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

/* Register Page: Green bg, white tick */
#registerForm .checkbox-custom {
  background-color: #0A0A0A;
  border: 1px solid #1F2226;
  transition: all 0.2s ease;
}
#registerForm .checkbox-custom:checked {
  background-color: #386641;
  border-color: #386641;
}

/* ===========================
   Animations
   =========================== */

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

.animate-in {
  animation: fadeInUp 0.5s ease both;
}

/* ===========================
   Dashboard & Reports Components
   =========================== */

/* KPI Card */
.kpi-card {
  background: rgb(var(--c-surface));
  border: 1px solid rgb(var(--c-border));
  border-radius: 1rem;
  transition: all 0.3s ease;
}
.kpi-card:hover {
  border-color: rgb(var(--c-primary));
  box-shadow: 0 0 24px rgba(56, 102, 65, 0.1);
  transform: translateY(-2px);
  position: relative;
  z-index: 10;
}

/* Pending Row — dòng trong khối "Cần xử lý" và danh sách chính trên bills.html.
   Bỏ viền/nền riêng; phân cách bằng kẻ dưới; dòng cuối không kẻ. */
.pending-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0.5rem;
  border-bottom: 1px solid rgb(var(--c-border));
}
.pending-row:last-child {
  border-bottom: 0;
}
/* Dòng trong danh sách chính bọc nội dung trong một flex cha duy nhất —
   dàn full width để icon/info/right xếp đúng. Selector chỉ trúng khi
   phần tử con đầu và duy nhất là một flex row. */
.pending-row > .pending-row-inner {
  flex: 1 1 auto;
  min-width: 0;
}

/* Status Badges */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 9999px;
  font-size: 0.7rem;
  font-weight: 600;
}
.badge-success {
  background: rgba(34, 197, 94, 0.15);
  color: rgb(var(--c-accent));
}
.badge-warning {
  background: rgba(234, 179, 8, 0.15);
  color: rgb(var(--c-warning));
}
.badge-danger {
  background: rgba(239, 68, 68, 0.15);
  color: rgb(var(--c-expense));
}
.badge-info {
  background: rgba(59, 130, 246, 0.15);
  color: rgb(var(--c-info));
}
.badge-muted {
  background: rgba(107, 114, 128, 0.15);
  color: rgb(var(--c-muted));
}

/* Navigation Link */
.nav-link {
  color: rgb(var(--c-muted));
  transition: all 0.2s ease;
  border-radius: 0.5rem;
  padding: 6px 12px;
  font-size: 0.8rem;
}
.nav-link:hover {
  color: rgb(var(--c-fg));
  background: rgba(56, 102, 65, 0.1);
}
.nav-link.active {
  color: rgb(var(--c-accent));
  background: rgba(56, 102, 65, 0.12);
}
/* Thanh dưới trên điện thoại (03/10): ô chỉ ~77px — lề 12px làm "Tổng quan" / "Giao dịch" xuống 2 dòng và
   bóp icon 20×20 thành 20×12. Lề nhỏ + chữ 11px một dòng (dài quá thì "…" — js/components/nav.js). */
@media (max-width: 639.98px) {
  .app-nav .nav-link {
    padding: 4px 2px;
    font-size: 0.6875rem;
  }
  /* Đáy thanh dưới (03/10): iPhone có thanh vuốt Home để vùng an toàn 34px — để đủ thì dưới chữ trống
     nhiều. Bớt 18px (iPhone còn 16px): đã tính với góc bo màn hình 55pt — chữ / icon không bị che, cách
     thanh vuốt ~10px; chỉ góc nền ô đang chọn chạm nhẹ phần bo. Máy không có vùng an toàn: 0 như cũ. */
  .app-nav {
    padding-bottom: var(--nav-safe-bottom);
  }
}
/* Toast (js/lib/toast.js) đặt ngay trên thanh dưới — dùng chung biến để luôn khớp. */
:root {
  --nav-safe-bottom: max(0px, calc(env(safe-area-inset-bottom) - 18px));
}

/* Data Table */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}
.data-table th {
  text-align: left;
  padding: 10px 16px;
  font-size: 0.7rem;
  font-weight: 600;
  color: rgb(var(--c-muted));
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid rgb(var(--c-border));
}
.data-table td {
  padding: 12px 16px;
  color: rgb(var(--c-fg-soft));
  border-bottom: 1px solid rgba(31, 34, 38, 0.8);
}
.data-table tbody tr:hover td {
  background-color: rgba(56, 102, 65, 0.06);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: rgb(var(--c-bg));
}
::-webkit-scrollbar-thumb {
  background: rgb(var(--c-border));
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgb(var(--c-primary));
}

/* Tab Navigation */
.tab-btn {
  color: rgb(var(--c-muted));
  border-bottom: 2px solid transparent;
  transition: all 0.2s ease;
  padding: 8px 16px;
  /* Vùng chạm 44px (quy tắc giao diện; rà 01/10: trước đây 37px). */
  min-height: 44px;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  background: none;
  white-space: nowrap;
}
.tab-btn:hover {
  color: rgb(var(--c-fg));
}
.tab-btn.active {
  color: rgb(var(--c-accent));
  border-bottom-color: rgb(var(--c-accent));
}

/* Tab Panel */
.tab-panel {
  display: none;
}
.tab-panel.active {
  display: block;
}

/* Avatar Circle */
.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  flex-shrink: 0;
}

/* Chart Container */
.chart-container {
  position: relative;
  height: 280px;
}

/* ===========================
   Autofill Fix
   =========================== */

input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px rgb(var(--c-surface)) inset;
  -webkit-text-fill-color: rgb(var(--c-fg));
}

/* Date picker icon hiện đúng màu theo giao diện: color-scheme đặt ở :root (tối /
   sáng — tailwind.config.cjs), ô ngày kế thừa. Thiếu color-scheme thì Chrome tự ẩn
   indicator (opacity: 0). */
input[type='date'],
input[type='time'] {
  color-scheme: inherit;
}


/* Nền sau bottom sheet / hộp thoại (29/09): nền trang gần như cùng màu lớp phủ
   (rgb(var(--c-bg))) nên chỉ tối đi thì gần như không thấy — thêm làm mờ. Khi còn một
   lớp phủ đang hiện, trang bên dưới không cuộn được. Gắn data-backdrop cho
   mọi lớp phủ mới. */
[data-backdrop] {
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

html:has([data-backdrop]:not(.hidden)),
html:has([data-backdrop]:not(.hidden)) body {
  overflow: hidden;
}

/* iPhone tự phóng to khi bấm vào ô nhập có chữ < 16px (29/09: ô Gõ nhanh 14px).
   Trên màn hình nhỏ, ô nhập dùng 16px. Không chặn zoom bằng maximum-scale —
   Android sẽ chặn luôn người dùng tự phóng to. Trừ login / register (quy tắc 6:
   không đổi style hai trang đó) — nhận ra bằng #loginForm / #registerForm. */
@media (max-width: 639px) {
  html:not(:has(#loginForm, #registerForm)) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) {
    font-size: 16px;
  }
}

/* Dải "chỉ xem" cho thành viên không có ghế (js/components/paywall.js). Cùng
   kiểu .offline-banner; chừa chỗ thanh bên trên máy tính (sm:pl-56). */
.plan-banner {
  position: sticky;
  top: 0;
  z-index: 45;
  display: block;
  padding: 0.625rem 1rem;
  background: rgb(var(--c-surface-raised));
  border-bottom: 1px solid rgb(var(--c-info));
  color: rgb(var(--c-info));
  font-size: 0.8125rem;
  text-align: center;
}
.plan-banner:hover { text-decoration: underline; }
.plan-banner:focus-visible { outline: 2px solid rgb(var(--c-info)); outline-offset: -2px; }
@media (min-width: 640px) {
  .plan-banner { padding-left: 15rem; }
}

/* ===========================
   Giao diện sáng — điều chỉnh riêng (01/10, WORKFLOW 38)
   Màu đã theo biến --c-*; ở đây chỉ những thứ chỉ hợp nền tối: bóng đổ đen
   đậm, kẻ dòng viết cứng. Giao diện tối không bị ảnh hưởng.
   =========================== */
:root[data-theme="light"] .card-glow {
  box-shadow: 0 8px 24px rgba(20, 32, 26, 0.08);
}
/* Thẻ trắng trên nền trắng ngà: bóng rất nhẹ để tách lớp. */
:root[data-theme="light"] .kpi-card {
  box-shadow: 0 1px 2px rgba(20, 32, 26, 0.05);
}
:root[data-theme="light"] .kpi-card:hover {
  box-shadow: 0 4px 16px rgba(56, 102, 65, 0.12);
}
:root[data-theme="light"] .btn-primary:hover {
  box-shadow: 0 4px 14px rgba(56, 102, 65, 0.28);
}
:root[data-theme="light"] .data-table td {
  border-bottom-color: rgb(var(--c-border));
}
:root[data-theme="light"] .nav-link.active {
  background: rgba(56, 102, 65, 0.10);
}
/* Huy hiệu: nền 10% cùng màu chữ — 15% làm chữ màu trên nền màu thiếu tương phản. */
:root[data-theme="light"] .badge-success { background: rgb(var(--c-income) / 0.10); }
:root[data-theme="light"] .badge-warning { background: rgb(var(--c-warning) / 0.10); }
:root[data-theme="light"] .badge-danger { background: rgb(var(--c-expense) / 0.10); }
:root[data-theme="light"] .badge-info { background: rgb(var(--c-info) / 0.10); }
:root[data-theme="light"] .badge-muted { background: rgb(var(--c-muted) / 0.10); }
/* Quốc gia đang chọn (chọn quốc gia lúc tạo hộ): nền xanh nhạt hơn trên nền sáng. */
:root[data-theme="light"] .country-option[aria-selected="true"] {
  background: rgba(56, 102, 65, 0.12);
}