/* base.css — design tokens chung 6 app (Điện Việt) */
:root {
  /* Màu thương hiệu + ngữ nghĩa */
  --brand: #0f6b3e;          /* xanh két — tiền/thành công */
  --brand-ink: #0a4a2b;
  --accent: #f59e0b;         /* cam — hành động phụ, cảnh báo nhẹ */
  /* ⚠️ `ketoan.html` dùng `var(--amber)` ở 5 chỗ mà biến này chưa bao giờ tồn
     tại (bắt được lúc tổng kiểm tra 15/09/2026). CSS không báo lỗi khi biến
     thiếu — nó lặng lẽ trả về giá trị THỪA KẾ, nên dòng cảnh báo "⚠ Phân bổ
     vượt nguồn sẵn có" (`ketoan.html:2214`) hiện ra ĐÚNG MÀU CHỮ THƯỜNG. Một
     cảnh báo không khác gì chữ thường là một cảnh báo không ai thấy.
     Giữ tên `--amber` làm bí danh thay vì sửa 5 chỗ gọi: ít rủi ro hơn. */
  --amber: #f59e0b;
  --danger: #dc2626;
  --info: #2563eb;
  --ink: #16211b;            /* chữ chính */
  --ink-2: #5b6b62;          /* chữ phụ */
  --line: #dbe4de;
  --bg: #f3f6f4;
  --card: #ffffff;
  --radius: 14px;
  --shadow: 0 1px 3px rgba(22,33,27,.08), 0 4px 14px rgba(22,33,27,.06);
  --font: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html { font-size: 16px; }
body { font-family: var(--font); background: var(--bg); color: var(--ink); line-height: 1.45; }
button { font-family: inherit; cursor: pointer; border: 0; }
input, select, textarea { font-family: inherit; font-size: 1rem; }

/* Nút chuẩn — kích thước lớn, dễ bấm */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 20px; border-radius: 12px; font-weight: 700; font-size: 1rem;
  transition: transform .06s, filter .15s; }
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { filter: brightness(1.08); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-warn { background: var(--accent); color: #fff; }
.btn-ghost { background: transparent; color: var(--ink-2); border: 2px solid var(--line); }
.btn-xl { min-height: 60px; font-size: 1.15rem; border-radius: 16px; width: 100%; }
.btn[disabled] { opacity: .45; pointer-events: none; }

.card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  border: 1px solid var(--line); }
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px;
  border-radius: 999px; font-size: .78rem; font-weight: 700; }
.badge-green { background: #e7f5ec; color: var(--brand-ink); }
.badge-amber { background: #fef3c7; color: #92400e; }
.badge-red   { background: #fee2e2; color: #991b1b; }
.badge-blue  { background: #dbeafe; color: #1e40af; }
.money { font-variant-numeric: tabular-nums; font-weight: 800; }
.mono { font-family: var(--mono); }
.muted { color: var(--ink-2); }
.hidden { display: none !important; }

/* Login chung */
.login-wrap { min-height: 100dvh; display: grid; place-items: center; padding: 24px;
  background: linear-gradient(160deg, #0f6b3e 0%, #0a4a2b 60%, #093f25 100%); }
.login-card { width: min(400px, 100%); background: #fff; border-radius: 20px; padding: 28px;
  box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.login-card h1 { font-size: 1.3rem; margin-bottom: 2px; }
.login-card .sub { color: var(--ink-2); font-size: .9rem; margin-bottom: 20px; }
.login-card label { display: block; font-weight: 700; font-size: .85rem; margin: 14px 0 6px; }
.login-card input { width: 100%; min-height: 52px; padding: 0 16px; font-size: 1.1rem;
  border: 2px solid var(--line); border-radius: 12px; }
.login-card input:focus { outline: none; border-color: var(--brand); }
.login-err { color: var(--danger); font-weight: 600; font-size: .9rem; min-height: 22px; margin-top: 10px; }

/* Toast */
#toast { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%);
  background: var(--ink); color: #fff; padding: 12px 20px; border-radius: 12px;
  font-weight: 600; box-shadow: var(--shadow); z-index: 999; opacity: 0;
  transition: opacity .2s; pointer-events: none; max-width: 90vw; text-align: center; }
#toast.show { opacity: 1; }

/* Modal đáy (mobile) / giữa (desktop) */
.sheet { position: fixed; inset: 0; background: rgba(10,20,14,.5); z-index: 100;
  display: flex; align-items: flex-end; justify-content: center; }
.sheet-body { background: #fff; width: 100%; max-width: 560px; max-height: 92dvh;
  border-radius: 22px 22px 0 0; overflow-y: auto; padding: 20px 18px
  calc(20px + env(safe-area-inset-bottom)); }
@media (min-width: 700px) {
  .sheet { align-items: center; }
  .sheet-body { border-radius: 22px; }
}
.sheet-grab { width: 44px; height: 5px; border-radius: 3px; background: var(--line); margin: 0 auto 14px; }

/* Mã đơn BẤM ĐƯỢC → mở chi tiết đơn (dùng chung mọi app) */
.oidlink { cursor: pointer; color: #1e40af; font-weight: 800;
  border-bottom: 1.5px dotted #1e40af88; }
.oidlink::after { content: ' 🔎'; font-size: .82em; opacity: .8; }
.oidlink:hover { background: #eff6ff; }

/* ═══ KHỐI MÀU — bộ nhận diện DÙNG CHUNG mọi app (chuyển từ sale_don 19/09) ═══
   Quy chuẩn mobile (ui-ux-pro-max): app dùng ngoài trời nắng → NỀN TRẮNG +
   CHỮ ĐẬM + MÀU ĐẶC ở viền và thanh tiêu đề; nút chạm ≥44px; chữ ≥16px;
   không tràn ngang; MÀU không bao giờ là chỉ báo duy nhất (kèm chữ/biểu
   tượng). Mỗi mảng nghiệp vụ MỘT màu, mọi app dùng đúng một bảng:
   KHÁCH xanh dương · HÀNG xanh lá · BẢO HÀNH cam · TIỀN tím · GHI CHÚ xám.
   ⚠️ Sửa Ở ĐÂY, đừng chép về từng app — chép là hai bản, bản bị quên lệch màu.
   ⚠️ .khoi KHÔNG overflow:hidden (từng cắt cụt dropdown absolute bên trong —
   ảnh máy thật 19/09); bo góc giao cho .kb/.kt. */
.khoi { border-radius: 14px; border: 2px solid; background: #fff; }
.khoi > .kb { border-radius: 11px 11px 0 0; }
.khoi > .kt { border-radius: 0 0 11px 11px; }
.khoi > .kb { display: flex; align-items: center; gap: 8px; color: #fff;
  font-weight: 800; font-size: .84rem; letter-spacing: .02em; padding: 8px 12px;
  min-height: 38px; }
.khoi > .kt { padding: 10px; display: grid; gap: 8px; }
.k-kh { border-color: #1d4ed8; } .k-kh > .kb { background: #1d4ed8; }
.k-hh { border-color: #0f6b3e; } .k-hh > .kb { background: #0f6b3e; }
.k-bh { border-color: #b45309; } .k-bh > .kb { background: #b45309; }
.k-ck { border-color: #7c2d92; } .k-ck > .kb { background: #7c2d92; }
.k-gc { border-color: #4b5563; } .k-gc > .kb { background: #4b5563; }
.kb .phai { margin-left: auto; font-weight: 700; font-size: .78rem; opacity: .95; }
.kb .btn-bar { margin-left: auto; background: rgba(255,255,255,.22); color: #fff;
  min-height: 34px; padding: 0 12px; border-radius: 9px; font-weight: 800;
  font-size: .82rem; }

/* Gạt chọn 2 phương án (segmented) — DÙNG CHUNG. Trước 19/09 class này KHÔNG
   có CSS ở đâu cả: nút hiện thành chữ trần, sale không biết là nút (ảnh máy
   thật). Nút ≥46px, trạng thái chọn = viền + nền + chữ đậm (không chỉ màu). */
.gat2 { display: flex; gap: 6px; }
.gat2 button { flex: 1; min-height: 46px; border: 2px solid var(--line);
  border-radius: 11px; background: #fff; font-weight: 800; font-size: .9rem;
  color: #4b5563; padding: 6px 8px; cursor: pointer; line-height: 1.25; }
.gat2 button small { display: block; font-weight: 600; font-size: .7rem;
  color: #6b7280; margin-top: 2px; line-height: 1.3; }
.gat2 button.on { border-color: #1d4ed8; background: #eff6ff; color: #1e40af; }
.gat2 button.on small { color: #1e40af; }
.gat2 button.on.g-cam { border-color: #b45309; background: #fff7ed; color: #92400e; }
.gat2 button.on.g-cam small { color: #92400e; }

/* Chip MÃ HÀNG — nổi bật, dùng chung (giám đốc yêu cầu 19/09: dòng mã hàng
   phải nhận diện được ngay). Xanh lá = mảng HÀNG HOÁ trong bảng màu chung. */
.ma-chip { display: inline-block; font-family: var(--mono); font-weight: 800;
  font-size: .82rem; background: #ecfdf5; color: #065f46;
  border: 1.5px solid #6ee7b7; padding: 1px 8px; border-radius: 7px;
  overflow-wrap: anywhere; }

/* ═══ [29/09] CHỐNG TRÀN NGANG + CHỐNG XUỐNG DÒNG VÔ LÝ — dùng chung mọi app ═══
   Đo bằng Chromium thật trên dữ liệu thật (scripts/soi_giao_dien.mjs, 390 / 1366px).
   ① App Điều hành trên điện thoại từng rộng 694px (trang tràn ngang): khung lưới
     .wrap bị một phần tử con kéo giãn. Con của khung chính không được ép cha rộng
     hơn màn hình.
   ② Chữ NGẮN (nhãn, mã, số, ngày) không bẻ giữa chừng — việc này làm bằng JS ở
     shared/api.js (API.chongBeDong): CSS không phân biệt được "badge ngắn" với
     "badge chứa cả câu ghi chú" (đặt nowrap cho mọi .badge thì badge ghi chú dài
     kéo cả trang Soạn đơn rộng 1022px — đã đo). */
.wrap, main, #content { min-width: 0; }
.wrap > * { min-width: 0; }
.nw { white-space: nowrap; }
/* Thanh tiêu đề mục (tiêu đề + nút): hết chỗ thì nút xuống hàng NGUYÊN CỤM,
   không bóp tiêu đề / nút thành 3–4 dòng chữ. */
.sec-h { flex-wrap: wrap; row-gap: 6px; }

/* [29/09] Số điện thoại bấm để gọi (API.lienKetSdt) — giữ màu chữ quanh nó, gạch chân chấm */
a.tel { color: inherit; text-decoration: underline dotted; text-underline-offset: 3px; white-space: nowrap; cursor: pointer; }
a.tel:hover { color: var(--brand); }
@media print { a.tel { text-decoration: none; color: inherit; } }