/* =====================================================================
   THEME: WAYPOINT  (css/themes/waypoint.css)
   Phong cách lấy cảm hứng từ waypoint-puce-seven.vercel.app: nền ấm, khung trắng, viền rất nhạt,
   nút chính xanh chanh chữ đen, tím cho biểu đồ, bo góc lớn, phông Geist + Bricolage Grotesque,
   hiệu ứng trượt lên / thẻ nổi / nhãn khu vực.
   File này chỉ được nạp khi chọn theme Waypoint ở Cài đặt → Giao diện (xem js/21-settings.js).
   ===================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,700&display=swap");

/* Biến màu cho các thành phần dùng chung */
:root{
  --tint: #ecfcca; --surface-soft: #f7f6f5; --line-soft: #f1f0ef; --toggle-off: #e9e8e7;
  --chart-ok: #98e561; --chart-in: #fcbb00; --chart-in-soft: #fee685; --chart-bad: #ff667f; --chart-bad-bg: #fff1f2; --chart-bad-line: #ffa2ae;
  --chart-bar: #c4b4ff; --chart-bar-strong: #a685ff; --chart-bar-hover: #7008e7;
  --status-pending: #fcbb00; --status-processing: #a685ff; --status-done: #98e561; --status-cancelled: #ff667f; --status-other: #00bcfe;
}

/* =====================================================================
   GIAO DIỆN THEO PHONG CÁCH WAYPOINT (chỉ màu sắc, viền, bo góc, nút, icon, phông chữ — không đổi logic)
   Thông số lấy từ waypoint-puce-seven.vercel.app: nền ấm #fdfcfc/#f7f6f5, khung trắng, viền rất nhạt,
   nút chính xanh chanh #98e561 chữ đen, tím phụ #7008e7/#a685ff, bo góc lớn, phông Geist + Bricolage Grotesque.
   Muốn quay lại giao diện cũ: xoá toàn bộ khối này (và đổi lại link Google Fonts trong index.html).
   ===================================================================== */
:root{
  --font-family-primary: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-family-mono: "Geist Mono", ui-monospace, SFMono-Regular, monospace;
  --font-family-heading: "Bricolage Grotesque", "Geist", sans-serif;

  --color-text-primary: #1b1a18;
  --color-text-secondary: #4a4743;
  --color-text-muted: #6a6662;
  --color-surface-muted: #ffffff;
  --color-surface-raised: #f7f6f5;
  --border: #f1f0ef;
  --border-strong: #d8d6d4;

  /* Màu thương hiệu dạng "mực" (chữ, icon, viền focus) — xanh lá đậm của Waypoint, đủ tương phản trên nền trắng.
     Màu "lấp đầy" cho nút chính / mục đang chọn là xanh chanh --primary-fill (chữ đen). */
  --accent: #3d6321; --accent-rgb: 61,99,33; --accent-hover: #2f4d19; --accent-bg: #ecfcca;
  --primary-fill: #98e561; --primary-fill-hover: #8bd954; --primary-ink: #1b1a18;

  --danger: #a52f27; --danger-bg: #fff1f2;
  --success: #007956; --success-bg: #ecfdf5;
  --warning: #b75000; --warning-bg: #fffbeb;
  --purple: #7008e7; --purple-bg: #f5f3ff;

  --radius-md: 12px; --radius-xl: 24px;
  --shadow-card: 0 1px 2px rgba(27,26,24,0.04), 0 0 0 1px rgba(27,26,24,0.02);
}
body{ background: #f7f6f5; font-family: var(--font-family-primary); -webkit-font-smoothing: antialiased; }
input, select, textarea, button{ font-family: var(--font-family-primary); }
.sku-mono, .preview-box b{ font-family: var(--font-family-mono); }

/* Tiêu đề: Bricolage Grotesque, chữ khít như Waypoint */
h1, .section-head h2, .app-modal h3{ font-family: var(--font-family-heading); letter-spacing: -0.02em; }
h1{ font-weight: 700; }
.panel-title{ letter-spacing: -0.005em; }

/* Khung chính, khung nội dung, thẻ KPI: nền trắng, viền rất nhạt, bóng nhẹ */
.main-panel{ border-color: var(--border); box-shadow: 0 1px 2px rgba(27,26,24,0.04); border-radius: 24px; background: #fdfcfc; }
.view{ background: #fdfcfc; }
.panel, .kpi-card, .op-section, .table-wrap, .kv-block{ border-color: var(--border); box-shadow: var(--shadow-card); }
.kpi-card, .op-section{ background: #fff; }
.table-wrap{ background: #fff; }
thead th{ background: #f7f6f5; color: var(--text-muted); font-weight: 600; letter-spacing: .01em; }
tbody tr:hover td{ background: #fbfaf9; }

/* Nút chính: xanh chanh chữ đen (như "Browse courses" / "Continue") */
button.primary, .btn-primary-pill, .btn-zap{ background: var(--primary-fill); border-color: var(--primary-fill); color: var(--primary-ink); font-weight: 600; }
button.primary:hover, .btn-primary-pill:hover, .btn-zap:hover{ background: var(--primary-fill-hover); border-color: var(--primary-fill-hover); }
button.primary:disabled, .btn-primary-pill:disabled{ background: #eeedec; border-color: #eeedec; color: #a8a4a0; }
button.primary i, .btn-primary-pill i{ color: inherit; }
/* Nút phụ: nền trắng, viền nhạt, hover nền ấm */
button{ border-color: var(--border-strong); border-radius: 12px; }
button:not(.primary):not(.danger-outline):not(.inc-icon):not(.edit-icon):hover{ background: #f7f6f5; border-color: #c9c6c3; }
button.danger-outline{ border-color: #ffccd3; color: var(--danger); }
button.danger-outline:hover{ background: var(--danger-bg); }
.btn-primary-pill{ border-radius: 12px; }

/* Ô nhập / select: viền #d8d6d4, focus viền xanh chanh + vầng sáng nhẹ */
input[type="text"], input[type="number"], input[type="email"], input[type="date"], select, textarea, input[type="month"]{ border-color: var(--border-strong); border-radius: 12px; background-color: #fff; }
input[type="date"], input[type="month"]{ padding: 7px 10px; border: 1px solid var(--border-strong); color: var(--text-primary); font-size: var(--font-size-xl); }
input:focus, select:focus, textarea:focus, select.cs-open{ border-color: #7cc84a; box-shadow: 0 0 0 3px rgba(152,229,97,0.35); }
.tag-select{ border-color: var(--border-strong); border-radius: 12px; }
.tag-select:focus-within{ border-color: #7cc84a; box-shadow: 0 0 0 3px rgba(152,229,97,0.35); }

/* Menu trái: mục đang chọn là xanh chanh chữ đen; icon nét mảnh cùng màu chữ */
.sidebar-item{ border-radius: 12px; }
.sidebar-item.active{ background: var(--primary-fill); color: var(--primary-ink); }
.sidebar-item.active .ic{ color: var(--primary-ink); }
.sidebar-item:not(.active):hover{ background: #f1f0ef; }
.sidebar-item .ic i{ font-size: 18px; }
.sidebar-group-label{ font-family: var(--font-family-mono); letter-spacing: .1em; }

/* Phân trang, nút chọn kỳ, bước, công tắc: trạng thái chọn = xanh chanh chữ đen */
.page-btn.active, .period-toggle button.active, .step-dot.cur{ background: var(--primary-fill); border-color: var(--primary-fill); color: var(--primary-ink); }

/* Nhãn trạng thái / pill: bo tròn, nền rất nhạt */
.status-pill{ border-radius: 999px; }
.pill{ border-radius: 999px; }

/* Avatar thanh trên: nền xanh chanh nhạt chữ xanh đậm (như avatar "JE" của Waypoint) */
.topbar-avatar{ background: #ecfcca; color: var(--accent); }

/* Popup: bo góc lớn, bóng mềm */
.app-modal{ border-radius: 24px; box-shadow: 0 24px 48px rgba(27,26,24,0.18); }
.modal-overlay{ background: rgba(27,26,24,0.35); }

/* Thông báo (toast): nền xanh chanh chữ đen */
.app-toast{ background: var(--primary-fill); color: var(--primary-ink); border-radius: 12px; }

/* Icon lịch nhập / chỉnh sửa / dropdown tự vẽ: đồng bộ bo góc 12px */
.inc-icon, .edit-icon{ border-radius: 10px; }
.cs-panel{ border-radius: 16px; }
.cs-item{ border-radius: 10px; }
.cs-item.cs-selected{ background: #ecfcca; color: var(--accent); }
.cs-item.cs-selected .cs-dot{ border-color: var(--accent); }
/* Ô chỉ đọc giữ nền xám để phân biệt với ô nhập được; khung dashboard nền trắng; nhãn nhóm menu giãn chữ vừa phải cho tiếng Việt */
input[readonly], input:disabled, select:disabled{ background-color: #f7f6f5; color: var(--text-muted); }
.dash-card{ background: #fff; }
.sidebar-group-label{ letter-spacing: .06em; }

/* =====================================================================
   PHONG CÁCH & HIỆU ỨNG THEO WAYPOINT (chỉ giao diện — không đổi logic)
   ===================================================================== */
:root{
  --ease-out-soft: cubic-bezier(.22,1,.36,1);
  --shadow-soft: 0 0 0 1px #1b1a1804, 0 2px 6px -2px #1b1a180d, 0 6px 16px -6px #1b1a180f;
  --shadow-soft-lg: 0 0 0 1px #1b1a1804, 0 8px 24px -6px #1b1a1814, 0 24px 48px -24px #1b1a181a;
}
@keyframes rise-in{ 0%{ opacity: 0; transform: translateY(8px); } 100%{ opacity: 1; transform: none; } }
@keyframes modal-in{ 0%{ opacity: 0; transform: translateY(10px) scale(.98); } 100%{ opacity: 1; transform: none; } }
@keyframes fade-in{ from{ opacity: 0; } to{ opacity: 1; } }

/* 1. Nội dung trang trượt nhẹ từ dưới lên khi mở trang, lần lượt từng khối */
.view.active > *{ animation: rise-in .45s var(--ease-out-soft) both; }
.view.active > *:nth-child(2){ animation-delay: .04s; }
.view.active > *:nth-child(3){ animation-delay: .08s; }
.view.active > *:nth-child(4){ animation-delay: .12s; }
.view.active > *:nth-child(5){ animation-delay: .16s; }
.view.active > *:nth-child(n+6){ animation-delay: .2s; }
.kpi-grid > *{ animation: rise-in .45s var(--ease-out-soft) both; }
.kpi-grid > *:nth-child(2){ animation-delay: .05s; } .kpi-grid > *:nth-child(3){ animation-delay: .1s; }
.kpi-grid > *:nth-child(4){ animation-delay: .15s; } .kpi-grid > *:nth-child(5){ animation-delay: .2s; }

/* 2. Thẻ: bóng mềm, rê chuột thì nổi lên (bóng đậm hơn + nhấc 2px) */
.kpi-card, .dash-card, .op-section, .panel{ box-shadow: var(--shadow-soft); transition: box-shadow .3s var(--ease-out-soft), transform .3s var(--ease-out-soft); }
.kpi-card:hover, .dash-card:hover{ box-shadow: var(--shadow-soft-lg); transform: translateY(-2px); }
.op-section:hover{ box-shadow: var(--shadow-soft-lg); }
.table-wrap{ box-shadow: var(--shadow-soft); }
.kpi-card{ border-radius: 20px; }
.kpi-value{ font-family: var(--font-family-heading); letter-spacing: -0.02em; font-size: 22px; }

/* 3. Nút: chuyển động mềm, nhấn xuống 1px; icon mũi tên/chevron nhích sang phải khi rê chuột */
button, .btn-primary-pill, .btn-zap{ transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .15s ease; }
button:active:not(:disabled), .btn-primary-pill:active:not(:disabled){ transform: translateY(1px); }
button.primary:hover:not(:disabled), .btn-primary-pill:hover:not(:disabled){ box-shadow: 0 6px 16px -6px rgba(61,99,33,.45); }
button i.ti-arrow-right, button i.ti-chevron-right, a i.ti-arrow-right{ display: inline-block; transition: transform .2s var(--ease-out-soft); }
button:hover i.ti-arrow-right, button:hover i.ti-chevron-right, a:hover i.ti-arrow-right{ transform: translateX(2px); }
button i.ti-plus{ display: inline-block; transition: transform .25s var(--ease-out-soft); }
button:hover i.ti-plus{ transform: rotate(90deg); }

/* 4. Menu trái: icon phóng nhẹ khi rê chuột, chuyển nền mềm */
.sidebar-item{ transition: background .2s ease, color .2s ease; }
.sidebar-item .ic{ transition: transform .25s var(--ease-out-soft); }
.sidebar-item:hover .ic{ transform: scale(1.08); }

/* 5. Icon nhỏ (xem, sửa, lịch nhập, mở chi tiết): phóng nhẹ khi rê chuột */
.thumb-toggle, .icon-edit-btn, .inc-icon, .edit-icon{ transition: transform .2s var(--ease-out-soft), background .2s ease, border-color .2s ease, box-shadow .2s ease; }
.thumb-toggle:hover, .icon-edit-btn:hover, .inc-icon:hover, .edit-icon:hover{ transform: scale(1.08); box-shadow: var(--shadow-soft); }
.thumb-toggle{ border-radius: 10px; border-color: var(--border-strong); }

/* 6. Bảng: hàng sáng dần khi rê chuột */
tbody td{ transition: background .15s ease; }

/* 7. Nhóm nút chọn kỳ (Tháng/Quý/Năm): kiểu segmented như tab của Waypoint */
.period-toggle{ background: #f1f0ef; border-color: transparent; padding: 3px; }
.period-toggle button{ transition: background .2s ease, color .2s ease, box-shadow .2s ease; }
.period-toggle button.active{ background: #fff; color: var(--text-primary); box-shadow: 0 1px 3px rgba(27,26,24,.12); }

/* 8. Nhãn khu vực phía trên tiêu đề trang (● QUẢN LÝ KHO) — chữ lấy từ nhóm menu đang chọn (js/19-ui-effects.js) */
h1[data-eyebrow]::before{
  content: attr(data-eyebrow); display: table; margin-bottom: 8px;
  font-family: var(--font-family-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent); background: #ecfcca; padding: 3px 10px 3px 20px; border-radius: 999px;
  background-image: radial-gradient(circle at 10px 50%, var(--accent) 2.5px, transparent 3px);
}

/* 9. Popup và thông báo: hiện ra mềm */
.modal-overlay.show{ animation: fade-in .2s ease both; }
.modal-overlay.show .app-modal{ animation: modal-in .3s var(--ease-out-soft) both; }
.app-toast{ transition: opacity .3s var(--ease-out-soft), transform .3s var(--ease-out-soft); box-shadow: var(--shadow-soft-lg); }

/* 10. Ô nhập: viền đậm dần khi rê chuột */
input[type="text"]:hover:not([readonly]):not(:disabled):not(:focus), input[type="number"]:hover:not(:focus), input[type="email"]:hover:not(:focus), input[type="date"]:hover:not(:focus), textarea:hover:not(:focus), input[type="month"]:hover:not(:focus){ border-color: #b9b5b1; }
input, textarea{ transition: border-color .2s ease, box-shadow .2s ease; }

/* Tôn trọng cài đặt "giảm chuyển động" của hệ điều hành */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
}


/* Nét gạch chân vẽ tay dưới chữ (tiêu đề Dashboard) — tự "vẽ" ra khi mở trang */
.scribble{ position: relative; white-space: nowrap; }
.scribble::after{
  content: ""; position: absolute; left: -2%; right: -2%; bottom: -8px; height: 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 7 C 40 2, 90 2, 130 5 S 185 9, 198 4' fill='none' stroke='%2398e561' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M18 10 C 70 7, 120 7, 176 9' fill='none' stroke='%2398e561' stroke-width='1.6' stroke-linecap='round' opacity='.8'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  clip-path: inset(0 100% 0 0); animation: scribble-draw .9s .25s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes scribble-draw{ to{ clip-path: inset(0 0 0 0); } }


/* Biểu đồ doanh thu trong tháng: đường chính tím theo bảng màu biểu đồ của Waypoint */
:root{ --mc-cur: #7008e7; }
.mc-point{ box-shadow: 0 0 0 4px rgba(112,8,231,.15); }

/* Ô tích / ô chọn theo màu chủ đạo của giao diện (thay màu xanh dương mặc định của trình duyệt) */
input[type="checkbox"], input[type="radio"]{ accent-color: #6cbf3a; }