/* Giao diện chung app quản lý JEJU — phong cách gần với Lark (Sếp chọn 24/10/2026) cho nhân viên dễ làm quen:
   nền xám rất nhạt, thẻ trắng viền mảnh, một màu chính xanh dương, phông hệ thống của máy, chữ 14px.
   Chỉ học bố cục + cảm giác; KHÔNG dùng logo / biểu tượng / tên Lark. Logo Jeju giữ nguyên. */
:root {
  /* Màu chính (xanh dương) */
  --primary: #3370ff; --primary-hover: #4e83fd; --primary-active: #245bdb; --primary-soft: #e1eaff; --primary-text: #245bdb;
  /* Nền, chữ, viền */
  --bg: #f5f6f7; --card: #ffffff; --hover: #f2f3f5; --line: #dee0e3; --line-strong: #d0d3d6;
  --text: #1f2329; --muted: #646a73; --faint: #8f959e;
  /* Màu trạng thái */
  --green: #2ea121; --green-soft: #d9f5d6; --amber: #de7802; --amber-soft: #feead2; --red: #d83931; --red-soft: #fde2e2;
  --blue: #245bdb; --blue-soft: #e1eaff; --purple: #6425d0; --purple-soft: #ece2fe;
  /* Tên cũ (các trang còn dùng) → trỏ sang màu mới */
  --rose: var(--primary); --rose-soft: var(--primary-soft);
  --radius: 8px; --radius-lg: 12px;
  --shadow: 0 1px 2px rgba(31, 35, 41, .04);
  --shadow-pop: 0 6px 24px rgba(31, 35, 41, .12), 0 0 1px rgba(31, 35, 41, .2);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--text); font: 14px/1.57 var(--font); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
a { color: var(--primary); text-decoration: none; } a:hover { text-decoration: underline; }
h1, h2, h3 { margin: 0; line-height: 1.4; font-weight: 600; }
h1 { font-size: 20px; } h2 { font-size: 16px; } h3 { font-size: 14px; }
.muted { color: var(--muted); } .faint { color: var(--faint); } .small { font-size: 13px; } .tiny { font-size: 12px; }
.num { font-variant-numeric: tabular-nums; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.hidden { display: none !important; }

/* Đầu trang (thanh trên trắng, cao 52px) */
.top { position: sticky; top: 0; z-index: 10; background: #fff; border-bottom: 1px solid var(--line); }
.top .in { max-width: 1180px; margin: 0 auto; padding: 0 16px; height: 52px; display: flex; align-items: center; gap: 12px; }
.top img { height: 26px; }
.top .who { margin-left: auto; text-align: right; font-size: 13px; line-height: 1.3; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 16px; }
.narrow { max-width: 560px; }

/* Ảnh đại diện chữ cái (giống Lark) */
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; flex: none; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 16px; }
.card + .card, .stack > * + * { margin-top: 12px; }

/* Nút: cao 32, bo 6, viền xám — nút chính xanh đặc */
button, .btn { font: inherit; font-size: 14px; border: 1px solid var(--line-strong); background: #fff; color: var(--text); border-radius: 6px; padding: 4px 12px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; line-height: 22px; text-decoration: none; transition: background .15s, border-color .15s, color .15s; }
button:hover, .btn:hover { background: var(--hover); text-decoration: none; }
button:active { background: #e8e9eb; }
button:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn-primary:active { background: var(--primary-active); border-color: var(--primary-active); }
.btn-green { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-green:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn-ghost:hover { background: var(--hover); }
.btn-danger { color: var(--red); }
.btn-danger.btn-primary, .btn-primary.btn-danger { background: var(--red); border-color: var(--red); color: #fff; }
.btn-sm { min-height: 28px; padding: 2px 10px; font-size: 13px; }
.btn-big { width: 100%; min-height: 48px; font-size: 16px; font-weight: 600; border-radius: 8px; }

/* Ô nhập: cao 32, bo 6, viền xám, viền xanh khi đang gõ */
label.f { display: block; font-size: 13px; color: var(--muted); margin-bottom: 12px; }
label.f > span { display: block; margin-bottom: 4px; color: var(--text); }
input, select, textarea { font: inherit; font-size: 14px; color: var(--text); width: 100%; padding: 4px 10px; border: 1px solid var(--line-strong); border-radius: 6px; background: #fff; min-height: 32px; transition: border-color .15s, box-shadow .15s; }
textarea { padding: 6px 10px; }
input:hover, select:hover, textarea:hover { border-color: var(--primary); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px rgba(51, 112, 255, .2); }
input:disabled, select:disabled { background: var(--hover); color: var(--faint); border-color: var(--line); }
input[type=checkbox] { width: 16px; height: 16px; min-height: 0; accent-color: var(--primary); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 12px; }
@media (max-width: 560px) { .grid3 { grid-template-columns: 1fr 1fr; } }

/* Nhãn trạng thái: chữ nhỏ, bo 4 */
.tag { display: inline-block; padding: 0 6px; border-radius: 4px; font-size: 12px; line-height: 20px; font-weight: 500; white-space: nowrap; background: #eff0f1; color: var(--muted); }
.t-green { background: var(--green-soft); color: var(--green); }
.t-amber { background: var(--amber-soft); color: var(--amber); }
.t-red { background: var(--red-soft); color: var(--red); }
.t-blue, .t-rose { background: var(--primary-soft); color: var(--primary-text); }
.t-purple { background: var(--purple-soft); color: var(--purple); }

/* Thẻ tab */
.tabs { display: flex; gap: 24px; overflow-x: auto; border-bottom: 1px solid var(--line); margin-bottom: 16px; scrollbar-width: none; }
.tabs button { border: 0; background: none; border-radius: 0; border-bottom: 2px solid transparent; color: var(--muted); padding: 10px 0; white-space: nowrap; min-height: 0; }
.tabs button.on { color: var(--primary); border-bottom-color: var(--primary); font-weight: 500; }
.badge { background: var(--red); color: #fff; border-radius: 999px; font-size: 11px; line-height: 16px; padding: 0 5px; margin-left: 4px; font-weight: 500; }

/* Bảng: đầu bảng xám nhạt, dòng kẻ mảnh, rê chuột nổi nền */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 8px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
th { background: #f5f6f7; font-weight: 500; color: var(--muted); font-size: 13px; white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
td.r, th.r { text-align: right; }
tbody tr:hover td { background: #f8f9fa; }
tr.click { cursor: pointer; }
tfoot td { font-weight: 600; background: #f5f6f7; }

/* Thông báo nổi (giống thông báo của Lark: nền trắng, ở trên) */
#toast { position: fixed; left: 50%; top: 64px; transform: translateX(-50%); max-width: calc(100% - 32px); z-index: 100; background: #fff; color: var(--text); padding: 10px 16px 10px 14px; border-radius: 8px; font-size: 14px; box-shadow: var(--shadow-pop); border-left: 3px solid var(--green); opacity: 0; pointer-events: none; transition: opacity .2s; }
#toast.show { opacity: 1; }
#toast.err { border-left-color: var(--red); }

/* Hộp thoại */
dialog { border: 0; border-radius: var(--radius-lg); padding: 0; width: min(520px, calc(100% - 24px)); box-shadow: var(--shadow-pop); color: var(--text); }
dialog::backdrop { background: rgba(31, 35, 41, .45); }
dialog .dh { padding: 16px 20px 4px; display: flex; align-items: center; gap: 8px; }
dialog .dh h2 { font-size: 16px; }
dialog .db { padding: 12px 20px; max-height: 70vh; overflow: auto; }
dialog .df { padding: 4px 20px 16px; display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.err-text { color: var(--red); font-size: 13px; min-height: 18px; }
.empty { text-align: center; color: var(--faint); padding: 32px 12px; }