/* ============================================================
   HẢI TRIỀU FP — BRAND IDENTITY (v3 · "Mindful Prosperity")
   Màu sắc, font chữ, bo góc cho web Quản lý Dòng tiền (index.html).
   Đổi ở đây sẽ áp dụng cho toàn bộ giao diện; bố cục từng phần nằm trong index.html.

   Nguồn: HaiTrieuFP_BrandIdentity.pdf (Brand Identity System v2, 2026).
   Quy tắc 60 · 30 · 10:
     60% Cream  #FAF4E8 — nền, không gian thở
     30% Forest #2D4A3E — sidebar, tiêu đề, nút chính
     10% Gold   #C9A84C — chữ "FP", nhãn phân mục trên nền Forest, điểm nhấn — dùng có chủ ý
   Font duy nhất: Plus Jakarta Sans, 4 độ đậm 300/400/500/700.

   Màu trong JS (FLOW_TONES, FLOW_EDGE_COLORS, biểu đồ donut, màu nhóm mặc định)
   dùng cùng các mã này — đổi palette thì cập nhật cả ở đó.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,700;1,400&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  /* Palette gốc của thương hiệu — đúng mã trong bộ nhận diện */
  --forest:#2D4A3E;         /* màu chủ đạo */
  --gold:#C9A84C;           /* màu nhấn */
  --cream:#FAF4E8;          /* nền chính */
  --stone:#8C7B6B;          /* chữ phụ */
  --sand:#DDD1B9;           /* viền, vạch ngăn */

  /* Khung app */
  --nav:var(--forest);--nav-w:220px;
  --on-dark:var(--cream);                  /* chữ chính trên nền Forest */
  --nav-ink2:rgba(250,244,232,0.74);       /* chữ phụ trên nền Forest */
  --nav-line:rgba(250,244,232,0.14);       /* vạch ngăn trên nền Forest */
  --nav-danger:#F2B8AE;

  /* Vai trò — phiên bản đậm/nhạt của Forest và Gold */
  --brown:var(--forest);    /* viền đang chọn, ô nhập khi focus */
  --brown-d:var(--forest);  /* nút chính, hàng tổng kết */
  --brown-dd:#22392F;       /* Forest khi di chuột */
  --brown-l:#F3EBDA;        /* Cream đậm: nền nhấn nhẹ */
  --accent:var(--gold);
  --amber-d:#9C7F2E;        /* Gold đậm: chữ Gold trên nền sáng ở cỡ nhỏ */

  /* Trạng thái — xanh lãi TÁCH BIỆT với Forest để không lẫn trang trí với tín hiệu */
  --teal:#1F7A4D;--teal-l:#E4F1EA;        /* thu nhập, lãi, thành công */
  --teal-on-dark:#9FE0BC;--red-on-dark:#F2A79C; /* số dương/âm trên nền Forest */
  --amber:#E99A25;--amber-l:#FBEEDD;--amber-line:#E3C393;--amber-ink:#7A5200;  /* chi tiêu, cảnh báo */
  --red:#D93D3C;--red-l:#FCEBEB;          /* nợ, lỗ, lỗi */

  /* Màu theo nhóm số liệu */
  --c-income:var(--teal);--c-income-bg:var(--teal-l);
  --c-saving:var(--forest);--c-saving-bg:var(--brown-l);
  --c-expense:var(--amber-ink);--c-expense-bg:var(--amber-l);
  --c-surplus:var(--teal);--c-surplus-bg:var(--teal-l);
  --c-debt:var(--red);--c-debt-bg:var(--red-l);
  --c-net-pos:var(--teal);--c-net-neg:var(--red);

  /* Chữ, nền, viền */
  --ink:#1F2A24;            /* chữ chính: đen ngả Forest */
  --ink2:#6E6053;           /* Stone đậm: đủ tương phản cho chữ nhỏ trong bảng số liệu */
  --ink3:var(--stone);      /* chữ phụ — đúng mã Warm Stone */
  --bg:var(--cream);
  --card:#FFFFFF;
  --border:var(--sand);--border2:var(--sand);

  /* Bo góc, đổ bóng */
  --r:12px;--rs:8px;--radius:var(--rs);
  --shadow:0 1px 4px rgba(45,74,62,0.06);
  --shadow-lg:0 18px 40px -18px rgba(45,74,62,0.28);
}

body{font-family:'Plus Jakarta Sans',sans-serif;background:var(--bg);color:var(--ink)}
/* Trình duyệt mặc định KHÔNG cho nút / ô nhập / ô chọn kế thừa font của trang.
   Cố ý KHÔNG bật tabular-nums: biến thể số đều độ rộng của Plus Jakarta Sans vẽ số "1" có chân đế,
   trông như một font khác hẳn so với chữ số chuẩn của bộ nhận diện. */
button,input,select,textarea{font-family:inherit}

/* Chữ thương hiệu: "Hải Triều" + "FP" luôn màu Gold (quy tắc "FP in Gold") */
.brand-word{font-weight:700;letter-spacing:-0.02em;color:var(--forest)}
.brand-fp{color:var(--gold)}
/* Nhãn kiểu eyebrow: 10px · 700 · in hoa · giãn 3px. Mặc định Gold cho nền Forest;
   trên nền sáng dùng .eyebrow-muted vì Gold cỡ 10px không đủ tương phản. */
.eyebrow{font-size:10px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--gold)}
.eyebrow-muted{font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--ink3)}

/* ============================================================
   TRANG ĐĂNG NHẬP
   Nền Cream phẳng, biểu tượng TAM ỔN + chữ logo, thẻ trắng bo 16px, dải chân trang Forest.
   ============================================================ */
.login-gate{position:fixed;inset:0;z-index:10000;display:flex;flex-direction:column;overflow-y:auto;background:var(--cream)}
.login-main{flex:1 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:36px 16px}
.login-logo{text-align:center;margin-bottom:26px}
.login-logo img{width:72px;height:72px;display:block;margin:0 auto 10px}
.login-logo .brand-word{font-size:1.75rem;line-height:1.2}
.login-slogan{font-size:10px;font-weight:500;letter-spacing:3px;text-transform:uppercase;color:var(--stone);margin-top:6px}
.login-card{width:100%;max-width:400px;background:var(--card);border:1px solid var(--sand);border-radius:16px;box-shadow:var(--shadow-lg);padding:32px;text-align:center}
.login-title{font-size:18px;font-weight:700;color:var(--forest)}
.login-desc{font-size:13px;color:var(--ink2);margin:6px 0 22px}
.login-footer{flex-shrink:0;background:var(--forest);padding:16px max(24px,calc((100vw - 1200px)/2));display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px 16px}
.login-footer-copy{font-size:11px;font-weight:500;letter-spacing:3px;text-transform:uppercase;color:var(--cream)}
.login-footer-copy .brand-fp{font-weight:700}
.login-footer a{font-size:13px;color:var(--sand);text-decoration:none}
.login-footer a:hover{color:var(--gold)}
@media(max-width:600px){.login-footer{justify-content:center;text-align:center}.login-footer-copy{letter-spacing:1.5px}}