/* Pô iPhone — giao diện theo DESIGN.md (MiniMax design system)
   Canvas trắng, ink đen, nút pill đen, card trắng viền hairline, DM Sans. */
*, *::before, *::after { box-sizing: border-box; }
:root {
  /* colors — DESIGN.md tokens */
  --primary: #0a0a0a; --on-primary: #ffffff; --primary-soft: #181e25;
  --brand-coral: #ff5530; --brand-magenta: #ea5ec1;
  --brand-blue: #1456f0; --brand-blue-deep: #1d4ed8; --brand-blue-200: #bfdbfe;
  --brand-purple: #a855f7;
  --canvas: #ffffff; --surface: #f7f8fa; --surface-soft: #f2f3f5;
  --hairline: #e5e7eb; --hairline-soft: #eaecf0;
  --ink: #0a0a0a; --charcoal: #222222; --slate: #45515e; --steel: #5f5f5f;
  --stone: #8e8e93; --muted: #a8aab2;
  --success-bg: #e8ffea; --success-text: #1ba673;
  --error: #d45656;
  /* rounded */
  --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-full: 9999px;
  /* shadow levels */
  --sh-1: rgba(0,0,0,.04) 0 1px 2px 0;
  --sh-2: rgba(0,0,0,.08) 0 4px 6px 0;
}
html { font-size: 15px; }
body {
  margin: 0;
  font-family: "DM Sans", Inter, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  background: var(--canvas); color: var(--charcoal); min-height: 100vh; line-height: 1.5;
}
a { color: var(--ink); text-decoration: none; font-weight: 500; }
a:hover { text-decoration: underline; }

/* ---------- Layout: sidebar (kiểu docs 3-cột MiniMax, rail trái 220px) ---------- */
.shell { display: flex; min-height: 100vh; }
.sidebar {
  width: 220px; flex-shrink: 0; background: var(--canvas); color: var(--charcoal);
  border-right: 1px solid var(--hairline-soft);
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.sidebar .logo {
  padding: 18px 16px; font-size: 20px; font-weight: 700; letter-spacing: -0.5px;
  color: var(--ink); border-bottom: 1px solid var(--hairline-soft);
  display: flex; align-items: center; gap: 10px;
}
/* Trắng nhãn: logo ảnh thật của từng khách + tên thương hiệu lấy từ settings.
   Tên có thể dài ngắn khác nhau nên cho phép xuống dòng, không cắt chữ. */
.sidebar .logo span {
  color: var(--ink); font-size: 17px; line-height: 1.2;
  overflow-wrap: anywhere; min-width: 0;
}
.sidebar .logo .logo-mark {
  width: 34px; height: 34px; object-fit: contain; flex: 0 0 auto;
}
.topbar .logo { display: flex; align-items: center; gap: 8px; }
.topbar .logo span { font-size: 17px; overflow-wrap: anywhere; min-width: 0; }
.topbar .logo .logo-mark { width: 28px; height: 28px; object-fit: contain; flex: 0 0 auto; }
/* Trắng nhãn: logo khách trên trang đăng nhập (thay chữ cứng "Pô iPhone") */
.login-box .login-logo {
  display: block; width: 64px; height: 64px; object-fit: contain;
  margin: 0 auto 10px;
}
.login-box h1 { overflow-wrap: anywhere; }
.sidebar nav { padding: 8px; flex: 1; }
.sidebar nav a {
  display: block; padding: 8px 12px; margin: 1px 0; color: var(--charcoal);
  font-size: 14px; font-weight: 400; border-radius: var(--r-sm);
}
.sidebar nav a:hover { background: var(--surface); text-decoration: none; }
.sidebar nav a.active { background: var(--surface); color: var(--ink); font-weight: 500; }
.sidebar nav .sep {
  margin: 14px 12px 4px; font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .05em; color: var(--stone);
}
.sidebar .whoami { padding: 14px 16px; border-top: 1px solid var(--hairline-soft); font-size: 13px; color: var(--steel); }
.sidebar .whoami b { color: var(--ink); display: block; font-weight: 600; }
.sidebar .whoami a { color: var(--steel); }

.content { flex: 1; padding: 24px 32px; max-width: 1240px; }
.page-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.page-title h1 { font-size: 24px; font-weight: 600; line-height: 1.3; letter-spacing: -0.3px; margin: 0; color: var(--ink); }

/* ---------- Cards: trắng, viền hairline, bo 16px, phẳng ---------- */
.card { background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-xl); padding: 24px; margin-bottom: 16px; }
.card h2 { font-size: 16px; font-weight: 600; margin: 0 0 14px; color: var(--ink); }

.grid { display: grid; gap: 14px; }
.grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }
.grid.cols-4 { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

.stat { background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-xl); padding: 16px 18px; }
.stat .n { font-size: 32px; font-weight: 600; letter-spacing: -0.5px; line-height: 1.25; color: var(--ink); }
.stat .l { color: var(--steel); font-size: 13px; }

/* ---------- Tables: header surface + caption-bold, hàng hairline-soft ---------- */
.tbl-wrap { overflow-x: auto; border: 1px solid var(--hairline); border-radius: var(--r-md); background: var(--canvas); }
table.tbl { width: 100%; border-collapse: collapse; }
.tbl th, .tbl td { padding: 10px 14px; border-bottom: 1px solid var(--hairline-soft); text-align: left; font-size: 14px; vertical-align: top; }
.tbl th { background: var(--surface); color: var(--steel); font-size: 13px; font-weight: 600; white-space: nowrap; }
.tbl tr:last-child td { border-bottom: none; }
.tbl tr:hover td { background: var(--surface); }
.card .tbl-wrap { border: none; }
.card .tbl th { border-radius: 0; }
.num { text-align: right; white-space: nowrap; }

/* ---------- Forms: input 40px, bo 8px, focus xanh đậm 2px ---------- */
form.std label { display: block; margin: 12px 0 4px; font-size: 13px; color: var(--steel); font-weight: 600; }
form.std input[type=text], form.std input[type=password], form.std input[type=number],
form.std input[type=date], form.std input[type=time], form.std select, form.std textarea {
  width: 100%; padding: 8px 12px; height: 40px; border: 1px solid var(--hairline); border-radius: var(--r-md);
  font: inherit; font-size: 14px; background: var(--canvas); color: var(--ink);
}
form.std textarea { min-height: 72px; height: auto; resize: vertical; }
form.std input:focus, form.std select:focus, form.std textarea:focus,
.filters input:focus, .filters select:focus {
  outline: none; border: 2px solid var(--brand-blue-deep); padding: 7px 11px;
}
form.std .row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 14px; }
.form-narrow { max-width: 680px; }

/* ---------- Buttons: pill đen là CTA chính (chữ ký thương hiệu) ---------- */
.btn {
  display: inline-block; padding: 9px 22px; border-radius: var(--r-full);
  border: 1px solid var(--primary); background: var(--primary); color: var(--on-primary);
  font: inherit; font-size: 14px; font-weight: 600; line-height: 1.4; cursor: pointer;
}
.btn:hover { text-decoration: none; }
.btn:active { background: var(--charcoal); border-color: var(--charcoal); }
.btn:disabled { background: var(--hairline); border-color: var(--hairline); color: var(--muted); cursor: default; }
.btn.secondary { background: var(--canvas); color: var(--ink); border: 1px solid var(--hairline); }
.btn.secondary:hover { background: var(--surface); }
.btn.danger { background: var(--error); border-color: var(--error); color: #fff; }
.btn.green { background: var(--success-text); border-color: var(--success-text); color: #fff; }
.btn.small { padding: 5px 14px; font-size: 13px; }

/* ---------- Badges: pill 13px/600, padding 4px 10px ---------- */
.badge { display: inline-block; padding: 4px 10px; border-radius: var(--r-full); font-size: 13px; font-weight: 600; line-height: 1.5; white-space: nowrap; }
.badge.tiep_nhan { background: var(--brand-blue-200); color: var(--brand-blue-deep); }
.badge.dang_sua { background: #ffe9e2; color: #c93c12; }
.badge.sua_xong { background: var(--success-bg); color: var(--success-text); }
.badge.da_tra { background: var(--surface-soft); color: var(--slate); }
.badge.huy { background: #fdeaea; color: var(--error); }
.badge.paid { background: var(--success-bg); color: var(--success-text); }
.badge.void { background: #fdeaea; color: var(--error); }
.badge.thu { background: var(--success-bg); color: var(--success-text); }
.badge.chi { background: #fdeaea; color: var(--error); }
.badge.low { background: #ffe9e2; color: #c93c12; }

.alert { padding: 10px 16px; border-radius: var(--r-md); margin-bottom: 14px; font-size: 14px; }
.alert.error { background: #fdeaea; color: #a13333; border: 1px solid #f2c6c6; }
.alert.ok { background: var(--success-bg); color: var(--success-text); border: 1px solid #b8ecc8; }

.muted { color: var(--stone); }
.right { text-align: right; }
.mt { margin-top: 14px; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.filters input, .filters select { padding: 8px 12px; height: 40px; border: 1px solid var(--hairline); border-radius: var(--r-md); font: inherit; font-size: 14px; background: var(--canvas); color: var(--ink); }

/* ---------- Timeline ---------- */
.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li { position: relative; padding: 0 0 16px 24px; border-left: 2px solid var(--hairline); margin-left: 8px; font-size: 14px; }
.timeline li::before {
  content: ''; position: absolute; left: -7px; top: 3px; width: 12px; height: 12px;
  border-radius: 50%; background: var(--primary); border: 2px solid var(--canvas);
}
.timeline li:last-child { border-left-color: transparent; }
.timeline .when { font-size: 13px; color: var(--stone); line-height: 1.7; }

/* ---------- POS ---------- */
.pos-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 900px) { .pos-grid { grid-template-columns: 1fr; } }
.search-results { position: relative; }
.search-results > input {
  width: 100%; padding: 9px 14px; height: 40px; border: 1px solid var(--hairline);
  border-radius: var(--r-md); font: inherit; font-size: 14px; background: var(--surface); color: var(--ink);
}
.search-results > input:focus { outline: none; border: 2px solid var(--brand-blue-deep); padding: 8px 13px; background: var(--canvas); }
.search-results .dropdown {
  position: absolute; z-index: 20; left: 0; right: 0; margin-top: 4px; background: var(--canvas);
  border: 1px solid var(--hairline); border-radius: var(--r-md); max-height: 300px; overflow-y: auto;
  box-shadow: var(--sh-2);
}
.search-results .dropdown button {
  display: block; width: 100%; text-align: left; padding: 10px 14px; background: none; border: none;
  border-bottom: 1px solid var(--hairline-soft); font: inherit; font-size: 14px; cursor: pointer; color: var(--charcoal);
}
.search-results .dropdown button:last-child { border-bottom: none; }
.search-results .dropdown button:hover { background: var(--surface); }

/* ---------- Login ---------- */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--surface); }
.login-box { background: var(--canvas); border: 1px solid var(--hairline); border-radius: 24px; padding: 40px 32px; width: 380px; max-width: 92vw; }
.login-box h1 { margin: 0 0 4px; font-size: 32px; font-weight: 600; letter-spacing: -0.5px; color: var(--ink); }
.login-box h1 span { color: var(--brand-coral); }
.login-box .sub { color: var(--steel); margin-bottom: 20px; font-size: 14px; }

/* ---------- Thanh trên + thanh đáy (chỉ hiện trên điện thoại) ---------- */
.topbar { display: none; }
.nav-close { display: none; }
.bottombar { display: none; }

/* ---------- Nút chụp/chọn ảnh ---------- */
.photo-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.photo-btn { cursor: pointer; }

/* ---------- Dòng nhắc dưới ô tiền ---------- */
.money-hint { font-size: 13px; font-weight: 600; color: var(--success-text); min-height: 18px; margin-top: 3px; }

/* ---------- Mobile: app-style (touch 44px, topbar + bottombar, sidebar thành menu trượt) ---------- */
@media (max-width: 760px) {
  .topbar {
    display: flex; align-items: center; justify-content: space-between;
    position: sticky; top: 0; z-index: 40; background: var(--canvas);
    border-bottom: 1px solid var(--hairline-soft); padding: 10px 14px;
  }
  .topbar .logo { font-size: 18px; font-weight: 700; letter-spacing: -0.5px; color: var(--ink); }
  .topbar .logo span { color: var(--brand-coral); }
  .nav-toggle {
    font: inherit; font-size: 14px; font-weight: 600; padding: 9px 18px;
    border-radius: var(--r-full); border: 1px solid var(--hairline); background: var(--canvas); color: var(--ink);
  }

  .shell { flex-direction: column; }
  .sidebar { display: none; }
  body.nav-open .sidebar {
    display: flex; position: fixed; inset: 0; z-index: 60; width: 100%; height: 100vh;
    overflow-y: auto; border-right: none;
  }
  body.nav-open { overflow: hidden; }
  .sidebar .logo { display: flex; justify-content: space-between; align-items: center; }
  .nav-close {
    display: block; font: inherit; font-size: 16px; padding: 8px 14px;
    border-radius: var(--r-full); border: 1px solid var(--hairline); background: var(--canvas);
  }
  .sidebar nav a { padding: 12px 14px; font-size: 15px; }

  .content { padding: 14px 14px 84px; } /* chừa chỗ cho bottombar */
  .btn { padding: 11px 24px; }
  form.std input, form.std select, .filters input, .filters select { height: 44px; }
  .page-title h1 { font-size: 20px; }
  .card { padding: 16px; }

  .bottombar {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
    background: var(--canvas); border-top: 1px solid var(--hairline);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  .bottombar a {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
    font-size: 11px; font-weight: 500; color: var(--steel); padding: 4px 2px; border-radius: var(--r-md);
  }
  .bottombar a span { font-size: 20px; line-height: 1; }
  .bottombar a.active { color: var(--ink); background: var(--surface); font-weight: 600; }
  .bottombar a:hover { text-decoration: none; }
}