/* ==========================================================================
   ILMS v9 — Components
   ប៊ូតុង កាត តារាង ទម្រង់ Modal Toast ។ល។
   ========================================================================== */

/* ---------- Brand mark ---------- */
.brand { display: flex; align-items: center; gap: 12px; padding: 6px 8px 18px; }
/* ឡូហ្គោក្រុមហ៊ុន (v9.6) — ផ្ទុករូបដែលម្ចាស់ប្រព័ន្ធផ្ទុកឡើង
   បើមិនទាន់មានរូប នោះបង្ហាញរូបតំណាងលើផ្ទៃពណ៌ម៉ាក */
.brand-logo {
  width: 52px; height: 52px; flex: none; border-radius: 14px;
  background: linear-gradient(140deg, var(--brand-400), var(--brand-700));
  color: #fff; display: grid; place-items: center;
  padding: 4px; text-align: center; overflow: hidden;
  font-weight: 800; font-size: 18px; line-height: 1.15; letter-spacing: -.1px;
  box-shadow: var(--sh-brand);
}
.brand-logo img { width: 100%; height: 100%; object-fit: contain; border-radius: 10px; }
/* ពេលមានរូបពិត → ផ្ទៃពណ៌សដើម្បីកុំឲ្យជល់នឹងពណ៌ឡូហ្គោ */
.brand-logo.has-img { background: #fff; padding: 3px; box-shadow: var(--sh-xs); }
.brand-text { min-width: 0; }
.brand-name { font-size: 15px; font-weight: 800; letter-spacing: -.2px; }
.brand-sub  { font-size: 11px; color: var(--text-3); font-weight: 600; }
/* ចំណងជើងរងជាភាសាអង់គ្លេស (v9.9.1 · ប្តូរពាក្យ) — តូចជាងខ្មែរ ដើម្បីកុំឲ្យប្រកួតការមើលឃើញ */
.brand-en {
  font-size: 9.5px; font-weight: 600; line-height: 1.3; margin-top: 2px;
  color: var(--text-3); opacity: .85; letter-spacing: .01em;
}
.nav-short { display: none; }

/* ---------- របៀបបង្រួម (icon + ចំណងជើងខ្លីជាភាសាខ្មែរ) ---------- */
.is-collapsed .brand-text,
.is-collapsed .nav-label,
.is-collapsed .side-title,
.is-collapsed .foot-full { display: none; }
.is-collapsed .brand { justify-content: center; padding-inline: 0; padding-bottom: 14px; }
.is-collapsed .sidebar { padding-inline: 8px; }
.is-collapsed .nav-item {
  flex-direction: column; justify-content: center; gap: 4px;
  padding: 10px 2px; text-align: center;
}
.is-collapsed .nav-item i { width: auto; font-size: 17px; }
.is-collapsed .nav-short {
  display: block; font-size: 10px; font-weight: 700; line-height: 1.25;
  letter-spacing: -.01em; white-space: nowrap;
}
.is-collapsed .nav-badge {
  position: absolute; inset-block-start: 5px; inset-inline-end: 5px; margin: 0;
  min-width: 18px; padding: 0 5px; font-size: 9.5px;
}
.is-collapsed .side-foot { padding-top: 10px; }
.is-collapsed #btn-collapse { flex-direction: column; gap: 4px; padding: 10px 2px; }
.is-collapsed #btn-collapse .nav-short { display: block; font-size: 10px; }

/* ---------- Sidebar nav ---------- */
.side-title {
  font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-3); padding: 14px 12px 6px;
}
.nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10.5px 13px; border-radius: var(--r-sm);
  color: var(--text-2); font-weight: 600; font-size: 13.5px;
  width: 100%; text-align: start; position: relative;
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.nav-item i { width: 19px; text-align: center; font-size: 15px; flex: none; }
/* ស្លាកម៉ឺនុយ ២ ជួរ — ខ្មែរខាងលើ អង់គ្លេសខាងក្រោម (v9.9.1 · ប្តូរពាក្យ)
   ប្រើ flex-column ដើម្បីកុំឲ្យ <em> រុញបន្ទាត់ ហើយ nav-badge នៅតែឈរខាងស្តាំ */
.nav-label { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.nav-en {
  font-style: normal; font-size: 9.5px; font-weight: 600; line-height: 1.25;
  color: var(--text-3); opacity: .8; letter-spacing: .01em; margin-top: 1px;
}
.nav-item:hover .nav-en { color: var(--text-2); }
.nav-item.is-active .nav-en { color: #fff; opacity: .75; }
/* ចំណងជើងទំព័រ — ខ្មែរធំ អង់គ្លេសតូចនៅក្រោម */
.page-en {
  display: block; font-style: normal; font-size: 11px; font-weight: 600;
  line-height: 1.3; margin-top: 1px; color: var(--text-3); letter-spacing: .01em;
}
.nav-item:hover { background: var(--surface-3); color: var(--text); }
.nav-item.is-active {
  background: linear-gradient(120deg, var(--brand-600), var(--brand-500));
  color: #fff; box-shadow: var(--sh-brand);
}
.nav-item.is-active i { color: #fff; }
.nav-badge {
  margin-inline-start: auto; min-width: 22px; padding: 1px 7px; border-radius: var(--r-full);
  background: var(--warn); color: #fff; font-size: 10.5px; font-weight: 800; text-align: center;
}
.nav-item.is-active .nav-badge { background: rgba(255, 255, 255, .28); }
.side-foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 9.5px 16px; border-radius: var(--r-sm);
  font-size: 13px; font-weight: 700; white-space: nowrap;
  border: 1px solid var(--line-2); background: var(--surface); color: var(--text);
  box-shadow: var(--sh-xs);
  transition: transform var(--t-fast), box-shadow var(--t-fast),
              background var(--t-fast), border-color var(--t-fast), opacity var(--t-fast);
}
.btn:hover  { box-shadow: var(--sh-sm); transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.985); }
.btn[disabled], .btn.is-disabled { opacity: .45; pointer-events: none; }

.btn-primary {
  background: linear-gradient(120deg, var(--brand-600), var(--brand-500));
  border-color: transparent; color: #fff; box-shadow: var(--sh-brand);
}
.btn-ok   { background: var(--ok);   border-color: transparent; color: #fff; }
.btn-bad  { background: var(--bad);  border-color: transparent; color: #fff; }
.btn-warn { background: var(--warn); border-color: transparent; color: #fff; }
.btn-ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--text-2); }
.btn-ghost:hover { background: var(--surface-3); box-shadow: none; color: var(--text); }
.btn-sm { padding: 6.5px 12px; font-size: 12px; border-radius: var(--r-xs); }
.btn-lg { padding: 13px 22px; font-size: 14.5px; border-radius: var(--r-md); }
.btn-block { width: 100%; }

.icon-btn {
  width: 38px; height: 38px; flex: none; display: grid; place-items: center;
  border-radius: var(--r-sm); color: var(--text-2);
  border: 1px solid transparent; transition: all var(--t-fast);
}
.icon-btn:hover { background: var(--surface-3); color: var(--text); }

/* ---------- Cards ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  overflow: hidden;
}
.card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 17px 20px; border-bottom: 1px solid var(--line); flex-wrap: wrap;
}
.card-title { font-size: 14.5px; font-weight: 800; display: flex; align-items: center; gap: 9px; }
.card-title i { color: var(--brand-500); }
.card-sub  { font-size: 11.5px; color: var(--text-3); font-weight: 600; }
.card-body { padding: 20px; }
.card-body.flush { padding: 0; }

/* ---------- Stat cards ---------- */
.stat {
  position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 19px 20px;
  box-shadow: var(--sh-sm);
  transition: transform var(--t), box-shadow var(--t);
}
.stat:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.stat::after {
  content: ''; position: absolute; inset-inline-end: -32px; top: -32px;
  width: 116px; height: 116px; border-radius: 50%;
  background: var(--accent, var(--brand-500)); opacity: .09;
}
.stat-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.stat-label { font-size: 11.5px; font-weight: 700; color: var(--text-2); letter-spacing: .02em; }
.stat-icon {
  width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent, var(--brand-500)) 14%, transparent);
  color: var(--accent, var(--brand-500)); font-size: 15px;
}
.stat-value {
  font-size: 25px; font-weight: 800; letter-spacing: -.02em;
  margin-top: 9px; line-height: 1.2;
}
.stat-foot { font-size: 11.5px; color: var(--text-3); font-weight: 600; margin-top: 3px; }
.stat.is-clickable { cursor: pointer; }
.stat.is-clickable:active { transform: scale(.99); }

/* ---------- Badges & chips ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: var(--r-full);
  font-size: 10.5px; font-weight: 800; letter-spacing: .04em;
  border: 1px solid transparent; white-space: nowrap;
}
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-approved { background: var(--ok-bg);   color: var(--ok-fg);   border-color: var(--ok-br); }
.badge-pending  { background: var(--warn-bg); color: var(--warn-fg); border-color: var(--warn-br); }
.badge-rejected { background: var(--bad-bg);  color: var(--bad-fg);  border-color: var(--bad-br); }
.badge-neutral  { background: var(--surface-3); color: var(--text-2); border-color: var(--line); }
.badge-plain::before { display: none; }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--r-xs);
  background: var(--surface-3); border: 1px solid var(--line);
  font-size: 11px; font-weight: 700; color: var(--text-2);
}

/* ---------- Forms ---------- */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.label { font-size: 12px; font-weight: 700; color: var(--text-2); display: flex; gap: 5px; align-items: center; }
.label .req { color: var(--bad); }
.hint  { font-size: 11px; color: var(--text-3); }

.input, .select, .textarea {
  width: 100%; padding: 10.5px 13px;
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  font-size: 13.5px; transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.input::placeholder, .textarea::placeholder { color: var(--text-3); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--brand-300); }
.input:focus, .select:focus, .textarea:focus {
  outline: none; background: var(--surface);
  border-color: var(--brand-500);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-500) 16%, transparent);
}
.input.is-error, .select.is-error, .textarea.is-error {
  border-color: var(--bad); box-shadow: 0 0 0 4px color-mix(in srgb, var(--bad) 14%, transparent);
}
.textarea { resize: vertical; min-height: 78px; }
.select {
  appearance: none; padding-inline-end: 36px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 15px;
}
[dir='rtl'] .select { background-position: left 12px center; }

.input-group { position: relative; }
.input-group .input { padding-inline-start: 38px; }
.input-group .ig-icon {
  position: absolute; inset-inline-start: 13px; top: 50%; transform: translateY(-50%);
  color: var(--text-3); font-size: 13px; pointer-events: none;
}
.field-error { font-size: 11.5px; color: var(--bad-fg); font-weight: 600; min-height: 0; }

/* Segmented control */
.segment { display: inline-flex; padding: 4px; gap: 4px; background: var(--surface-3);
           border: 1px solid var(--line); border-radius: var(--r-sm); }
.segment button {
  padding: 7px 15px; border-radius: var(--r-xs); font-size: 12.5px; font-weight: 700;
  color: var(--text-2); transition: all var(--t-fast);
}
.segment button.is-active { background: var(--surface); color: var(--brand-600); box-shadow: var(--sh-xs); }

/* Switch */
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .track {
  width: 42px; height: 24px; border-radius: var(--r-full);
  background: var(--line-2); position: relative; transition: background var(--t);
}
.switch .track::after {
  content: ''; position: absolute; top: 3px; inset-inline-start: 3px;
  width: 18px; height: 18px; border-radius: 50%; background: #fff;
  box-shadow: var(--sh-xs); transition: transform var(--t);
}
.switch input:checked + .track { background: var(--brand-500); }
.switch input:checked + .track::after { transform: translateX(18px); }

/* Checkbox */
.check {
  width: 17px; height: 17px; accent-color: var(--brand-600);
  cursor: pointer; border-radius: 5px;
}

/* ---------- Table ---------- */
.table-wrap { overflow: auto; max-height: 62vh; }
.table { width: 100%; font-size: 12.8px; }
.table thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--surface-2);
  padding: 11px 14px; text-align: start;
  font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-2); border-bottom: 1px solid var(--line); white-space: nowrap;
}
.table thead th.sortable { cursor: pointer; user-select: none; }
.table thead th.sortable:hover { color: var(--brand-600); }
.table thead th .sort-ind { opacity: .35; margin-inline-start: 5px; font-size: 9px; }
.table thead th.is-sorted .sort-ind { opacity: 1; color: var(--brand-500); }
.table tbody td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tbody tr { transition: background var(--t-fast); }
.table tbody tr:hover { background: var(--surface-2); }
.table tbody tr.is-selected { background: var(--info-bg); }
.table tbody tr:last-child td { border-bottom: none; }

/* ---------- តម្រឹមឆ្វេងទាំងអស់ (v9.3) ----------
   ក្បាលជួរឈរ និងទិន្នន័យត្រូវតែឈរលើបន្ទាត់តែមួយ។
   `.table thead th { text-align: start }` ធ្លាប់ឈ្នះលើ `.right` របស់ក្បាល
   តែមិនឈ្នះលើ `td.right` ដូច្នេះលេខរត់ទៅស្តាំ ឯឈ្មោះជួរនៅឆ្វេង។
   ច្បាប់ខាងក្រោមបង្រួបបង្រួមទាំងអស់មកឆ្វេងវិញ។                        */
.table thead th,
.table tbody td,
.table thead th.right,  .table tbody td.right,
.table thead th.center, .table tbody td.center,
.table thead th.num,    .table tbody td.num { text-align: left; }

/* ប៊ូតុងសកម្មភាព និងប្រអប់ធីកក៏តម្រឹមឆ្វេងតាមក្បាលជួរដែរ */
.table .row-actions { justify-content: flex-start; }

/* ប៊ូតុងសកម្មភាពរៀបជាជួរផ្តេកតែមួយបន្ទាត់ (v9.9.1 · បង្រួមកម្ពស់ជួរ)
   មុននេះប្រើ flex-wrap:wrap ដែលធ្វើឲ្យប៊ូតុងធ្លាក់ចុះក្រោម ហើយជួរតារាងខ្ពស់ខ្លាំង។
   ឥឡូវ nowrap + កោសិកាមិនបង្រួម ដូច្នេះជួរនីមួយៗនៅទាបស្មើគ្នា។ */
.row-actions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: nowrap; }
.table td.cell-actions { white-space: nowrap; width: 1%; }

/* ស្លាកវឌ្ឍនភាពសំណើ (v9.9.1) — មិនមែនប៊ូតុងទេ
   ស៊ុមខ្វះៗ និងគ្មានស្រមោល ជាសញ្ញាឲ្យអ្នកប្រើដឹងភ្លាមថាចុចមិនបាន */
.flow-chip {
  height: 30px; padding: 0 11px; border-radius: 9px;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: 11.5px; font-weight: 700; cursor: default;
  border: 1px dashed var(--line-2); background: transparent; color: var(--text-3);
}
.flow-chip i { font-size: 11px; }
/* រូបសោ — បង្ហាញពេលកែ ឬលុបមិនបាន ចង្អុលកណ្តុរឃើញហេតុផល */
.lock-chip { padding: 0 9px; cursor: help; border-style: solid; }
.flow-pending  { color: var(--warn-fg); border-color: var(--warn-br); background: var(--warn-bg); }
.flow-approved { color: var(--ok-fg);   border-color: var(--ok-br);   background: var(--ok-bg); }
.flow-rejected { color: var(--bad-fg);  border-color: var(--bad-br);  background: var(--bad-bg); }
.row-btn {
  height: 30px; padding: 0 11px; border-radius: 9px;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: 11.5px; font-weight: 700;
  border: 1px solid var(--line); background: var(--surface-2);
  color: var(--text-2); transition: all var(--t-fast);
}
.row-btn i { font-size: 11px; }
.row-btn:hover { transform: translateY(-1px); box-shadow: var(--sh-sm); }
.row-btn.v { color: var(--text-2); }
.row-btn.v:hover { background: var(--text-2); color: #fff; border-color: transparent; }
.row-btn.e { color: var(--brand-600); background: var(--info-bg); border-color: var(--info-br); }
.row-btn.e:hover { background: var(--brand-600); color: #fff; border-color: transparent; }
.row-btn.d { color: var(--bad-fg); background: var(--bad-bg); border-color: var(--bad-br); }
.row-btn.d:hover { background: var(--bad); color: #fff; border-color: transparent; }
.row-btn.a { color: var(--ok-fg); background: var(--ok-bg); border-color: var(--ok-br); }
.row-btn.a:hover { background: var(--ok); color: #fff; border-color: transparent; }

/* លាក់អក្សរនៅអេក្រង់តូច ដើម្បីកុំឲ្យតារាងចង្អៀតពេក */
@media (max-width: 720px) {
  .row-btn { padding: 0 9px; }
  .row-btn .lbl { display: none; }
}

/* ---------- រូបថត ---------- */
.cell-photo { width: 64px; }
.cell-photo img {
  width: 46px; height: 46px; object-fit: cover; border-radius: 11px;
  border: 1px solid var(--line); cursor: zoom-in;
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.cell-photo img:hover { transform: scale(1.06); box-shadow: var(--sh-md); }
.photo-none {
  width: 46px; height: 46px; border-radius: 11px; display: grid; place-items: center;
  background: var(--surface-3); border: 1px dashed var(--line-2);
  color: var(--text-3); font-size: 14px;
}
/* រូបអត្តសញ្ញាណ ៤×៦ (សមាមាត្រ ២:៣) */
.cell-photo.portrait img,
.cell-photo.portrait .photo-none { width: 40px; height: 60px; border-radius: 8px; }
/* រូបទេសភាព (សាខា) */
.cell-photo.wide { width: 76px; }
.cell-photo.wide img,
.cell-photo.wide .photo-none { width: 62px; height: 46px; border-radius: 9px; }

.photo-field { display: flex; gap: 14px; align-items: flex-start; }
.photo-preview {
  width: 96px; height: 96px; flex: none; border-radius: var(--r-md);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  background: var(--surface-3); border: 1px dashed var(--line-2);
  color: var(--text-3); font-size: 20px; overflow: hidden; text-align: center;
}
.photo-preview.portrait { width: 96px; height: 144px; }
.photo-preview span { font-size: 10px; font-weight: 600; padding: 0 6px; }
.photo-preview img { width: 100%; height: 100%; object-fit: cover; }

/* ═══════ រូបថតបុគ្គលិក — ទម្រង់រង្វង់មូល (v9.3) ═══════
   រូបអត្តសញ្ញាណ ៤×៦ មានក្បាលនៅផ្នែកខាងលើនៃស៊ុម ដូច្នេះពេលកាត់ជារង្វង់
   យើងខ្ទាស់ស៊ុមទៅ **កំពូល** (`object-position: center top`) ជំនួសកណ្តាល
   ដើម្បីកុំឲ្យដាច់ក្បាល ហើយឃើញមុខពេញ។
   ចំណាំ៖ រូបសាខា (`.cell-photo.wide` និង `#b-photo-preview`) មិនប៉ះទេ។ */

.photo-preview.round {
  width: 116px; height: 116px; border-radius: 50%; border-style: solid;
}
.photo-preview.round img { object-fit: cover; object-position: center top; }

/* រូបក្នុងតារាង — បញ្ជីកំណត់ត្រា និងបញ្ជីបុគ្គលិក */
.cell-photo:not(.wide) img,
.cell-photo:not(.wide) .photo-none { border-radius: 50%; }
.cell-photo:not(.wide) img { object-position: center top; }
.cell-photo.portrait img,
.cell-photo.portrait .photo-none { width: 46px; height: 46px; border-radius: 50%; }

/* រូបក្នុងផ្ទាំងលម្អិត (Drawer) */
.dw-photo {
  display: block; width: 132px; height: 132px; margin: 0 auto 16px;
  border-radius: 50%; object-fit: cover; object-position: center top;
  border: 1px solid var(--line);
}

/* វាលដែលបំពេញស្វ័យប្រវត្តិ — អានតែប៉ុណ្ណោះ */
.input.is-locked {
  background: var(--surface-3); color: var(--text-2);
  border-style: dashed; cursor: default; font-weight: 600;
}
.input.is-locked:hover, .input.is-locked:focus {
  border-color: var(--line-2); box-shadow: none;
}

input[type='file'].input { padding: 8px 10px; font-size: 12px; cursor: pointer; }
input[type='file'].input::file-selector-button {
  margin-inline-end: 10px; padding: 6px 12px; border-radius: var(--r-xs);
  border: 1px solid var(--line-2); background: var(--surface); color: var(--text-2);
  font-weight: 700; font-size: 12px; cursor: pointer; font-family: inherit;
}
input[type='file'].input::file-selector-button:hover { background: var(--surface-3); }

/* Avatar */
.avatar {
  width: 32px; height: 32px; flex: none; border-radius: 50%;
  display: grid; place-items: center; font-size: 11.5px; font-weight: 800;
  background: linear-gradient(140deg, var(--brand-300), var(--brand-600)); color: #fff;
  object-fit: cover; object-position: center top;
}
.avatar-sq { border-radius: 10px; }

/* Empty & loading */
.empty { padding: 54px 20px; text-align: center; color: var(--text-3); }
.empty i { font-size: 36px; opacity: .35; display: block; margin-bottom: 12px; }
.empty-title { font-weight: 700; color: var(--text-2); font-size: 14px; }

.skeleton {
  background: linear-gradient(90deg, var(--surface-3) 25%, var(--surface-2) 50%, var(--surface-3) 75%);
  background-size: 200% 100%; animation: shimmer 1.3s infinite linear;
  border-radius: var(--r-xs); height: 14px;
}
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

.spinner {
  width: 15px; height: 15px; border-radius: 50%;
  border: 2.5px solid color-mix(in srgb, currentColor 25%, transparent);
  border-top-color: currentColor; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Modal ---------- */
.modal {
  position: fixed; inset: 0; z-index: 200;
  display: none; align-items: center; justify-content: center; padding: 20px;
  background: var(--overlay); backdrop-filter: blur(5px);
}
.modal.is-open { display: flex; }
.modal-box {
  width: 100%; max-width: 560px; max-height: 90vh; overflow: auto;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-lg);
  animation: modalIn .28s var(--ease);
}
.modal-box.wide { max-width: 860px; }
@keyframes modalIn { from { opacity: 0; transform: scale(.96) translateY(14px); } to { opacity: 1; transform: none; } }
.modal-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 18px 22px; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; background: var(--surface); z-index: 1;
}
.modal-body { padding: 22px; }
.modal-foot {
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 16px 22px; border-top: 1px solid var(--line);
  background: var(--surface-2); flex-wrap: wrap;
}

/* Drawer (details) */
.drawer {
  position: fixed; inset: 0; z-index: 190; display: none;
  background: var(--overlay); backdrop-filter: blur(4px);
}
.drawer.is-open { display: block; }
.drawer-panel {
  position: absolute; inset-block: 0; inset-inline-end: 0;
  width: min(460px, 100%); background: var(--surface);
  border-inline-start: 1px solid var(--line); box-shadow: var(--sh-lg);
  display: flex; flex-direction: column;
  animation: drawerIn .3s var(--ease);
}
@keyframes drawerIn { from { transform: translateX(100%); } to { transform: none; } }
.drawer-head { padding: 20px 22px; border-bottom: 1px solid var(--line); }
.drawer-body { padding: 22px; overflow: auto; flex: 1; }

/* Definition list */
.dl { display: grid; grid-template-columns: auto 1fr; gap: 10px 18px; align-items: baseline; }
.dl dt { font-size: 11.5px; font-weight: 700; color: var(--text-3); white-space: nowrap; }
.dl dd { margin: 0; font-size: 13px; font-weight: 600; text-align: left; }

/* ---------- Toast ---------- */
.toast-stack {
  position: fixed; inset-block-end: 22px; inset-inline-end: 22px; z-index: 500;
  display: flex; flex-direction: column; gap: 10px; pointer-events: none; max-width: 92vw;
}
.toast {
  pointer-events: auto; min-width: 290px; max-width: 400px;
  display: flex; align-items: flex-start; gap: 11px;
  padding: 13px 16px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--sh-lg); font-size: 13px; font-weight: 600;
  border-inline-start: 4px solid var(--info);
  animation: toastIn .3s var(--ease);
}
.toast.out { animation: toastOut .25s var(--ease) forwards; }
.toast i { font-size: 15px; margin-top: 2px; }
.toast.success { border-inline-start-color: var(--ok); }
.toast.success i { color: var(--ok); }
.toast.error   { border-inline-start-color: var(--bad); }
.toast.error i { color: var(--bad); }
.toast.warning { border-inline-start-color: var(--warn); }
.toast.warning i { color: var(--warn); }
.toast.info i  { color: var(--info); }
@keyframes toastIn  { from { opacity: 0; transform: translateX(110%); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateX(110%) scale(.95); } }

/* ---------- Connection pill ---------- */
.conn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px; border-radius: var(--r-full);
  font-size: 11.5px; font-weight: 700;
  background: var(--surface-3); border: 1px solid var(--line); color: var(--text-2);
}
.conn .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); }
.conn.online  { background: var(--ok-bg);  color: var(--ok-fg);  border-color: var(--ok-br); }
.conn.online .dot  { background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 22%, transparent); }
.conn.offline { background: var(--warn-bg); color: var(--warn-fg); border-color: var(--warn-br); }
.conn.offline .dot { background: var(--warn); }
.conn.error   { background: var(--bad-bg);  color: var(--bad-fg);  border-color: var(--bad-br); }
.conn.error .dot { background: var(--bad); }

/* ---------- Command palette ---------- */
.palette { align-items: flex-start; padding-top: 12vh; }
.palette .modal-box { max-width: 560px; }
.palette-input {
  width: 100%; padding: 17px 20px; border: none; background: transparent;
  font-size: 15.5px; font-weight: 600; outline: none;
}
.palette-list { max-height: 340px; overflow: auto; border-top: 1px solid var(--line); padding: 8px; }
.palette-item {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 11px 14px; border-radius: var(--r-sm); text-align: start;
  font-size: 13.5px; font-weight: 600; color: var(--text-2);
}
.palette-item i { width: 18px; text-align: center; color: var(--brand-500); }
.palette-item:hover, .palette-item.is-cursor { background: var(--surface-3); color: var(--text); }
.kbd {
  display: inline-block; padding: 2px 7px; border-radius: 6px;
  background: var(--surface-3); border: 1px solid var(--line-2);
  border-bottom-width: 2px; font-size: 10.5px; font-weight: 700;
  font-family: ui-monospace, monospace; color: var(--text-2);
}

/* ---------- Chart ---------- */
.chart-box { position: relative; height: 300px; }
.chart-box.tall { height: 350px; }

/* ---------- Preview panel (entry form) ---------- */
.preview {
  border-radius: var(--r-md); padding: 18px;
  background: linear-gradient(140deg, var(--brand-600), var(--brand-800));
  color: #fff; box-shadow: var(--sh-brand);
}
.preview-label { font-size: 11.5px; font-weight: 700; opacity: .78; }
.preview-value { font-size: 27px; font-weight: 800; letter-spacing: -.02em; margin-top: 4px; }
.preview-split { display: flex; gap: 22px; margin-top: 14px; padding-top: 14px;
                 border-top: 1px solid rgba(255, 255, 255, .2); flex-wrap: wrap; }
.preview-split div { font-size: 11.5px; opacity: .85; font-weight: 600; }
.preview-split b { display: block; font-size: 15px; opacity: 1; font-weight: 800; }

/* Schedule list */
.sched { max-height: 250px; overflow: auto; border: 1px solid var(--line); border-radius: var(--r-sm); }
.sched-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 13px; border-bottom: 1px solid var(--line); font-size: 12.5px;
}
.sched-row:last-child { border-bottom: none; }
.sched-row:nth-child(odd) { background: var(--surface-2); }
.sched-row.is-last { background: var(--info-bg); font-weight: 800; color: var(--info-fg); }

/* Toolbar */
.toolbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 13px 18px; background: var(--surface-2); border-bottom: 1px solid var(--line);
}
.toolbar .sep { width: 1px; height: 22px; background: var(--line-2); }

/* Filter grid */
.filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; padding: 16px 18px; }

/* Global busy bar */
#busy-bar {
  position: fixed; inset-block-start: 0; inset-inline: 0; height: 3px;
  z-index: 600; background: color-mix(in srgb, var(--brand-500) 18%, transparent);
  overflow: hidden;
}
#busy-bar > span {
  display: block; height: 100%; width: 38%;
  background: linear-gradient(90deg, transparent, var(--brand-500), transparent);
  animation: busySlide 1.1s var(--ease) infinite;
}
@keyframes busySlide { from { transform: translateX(-100%); } to { transform: translateX(320%); } }

/* Progress bar */
.bar { height: 6px; border-radius: var(--r-full); background: var(--surface-3); overflow: hidden; }
.bar > span { display: block; height: 100%; border-radius: inherit;
              background: linear-gradient(90deg, var(--brand-400), var(--brand-600));
              transition: width .6s var(--ease); }

/* ══════════════════════════════════════════════════════════════════════════
   v9.6 — បញ្ជីសម្ភារៈ (Item Name · Unit) ក្នុងទម្រង់បញ្ចូល
   ══════════════════════════════════════════════════════════════════════════ */
.itemlist {
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface-2); overflow: hidden;
  max-height: 268px; overflow-y: auto;
}
.itemlist-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 8px 12px;
  background: var(--surface-3); border-bottom: 1px solid var(--line);
  font-size: 11px; font-weight: 800; color: var(--text-3);
  letter-spacing: .02em; position: sticky; inset-block-start: 0; z-index: 1;
}
.itemlist-row {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 12px; text-align: start;
  border-bottom: 1px solid var(--line);
  transition: background var(--t-fast);
}
.itemlist-row:last-child { border-bottom: none; }
.itemlist-row:hover  { background: var(--surface-3); }
.itemlist-row:active { background: var(--surface); }
.itemlist-no {
  flex: none; width: 22px; height: 22px; border-radius: var(--r-full);
  display: grid; place-items: center; background: var(--surface-3);
  font-size: 10.5px; font-weight: 800; color: var(--text-3);
}
.itemlist-name { flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 600; color: var(--text); }
.itemlist-unit { flex: none; }
.itemlist-empty {
  padding: 22px 14px; text-align: center; font-size: 12.5px; color: var(--text-3);
}
.itemlist-empty i { margin-inline-end: 6px; }

/* ══════════════════════════════════════════════════════════════════════════
   v9.6 — តារាងរបាយការណ៍រំលស់តាមខែ (រចនាតាមទម្រង់ Pivot)
   ══════════════════════════════════════════════════════════════════════════ */
.report-table { font-size: 12.5px; }
.report-table th, .report-table td { white-space: nowrap; }

/* ជួរ «SUM of Amount / Month» */
.report-table .rep-pivot-label th {
  background: var(--surface-3); color: var(--text-2);
  font-style: italic; font-weight: 700; font-size: 12px;
  border-bottom: 1px solid var(--line);
}

/* ជួរឈ្មោះជួរឈរ — ផ្ទៃងងឹត អក្សរទឹកក្រូច ដូចរូបគំរូ */
.report-table .rep-cols th {
  background: #595959; color: #ED7D31; font-weight: 800;
  border-bottom: 2px solid #404040;
}
.report-table .rep-cols th.rep-dim {
  background: var(--surface-3); color: #C55A11; font-style: italic;
}

.report-table .rep-branch { font-weight: 700; }
/* ស្លាក «... សរុប» តម្រឹមស្តាំ — ឲ្យឃើញច្បាស់ថាជាជួរបូកសរុប (v9.8.2) */
.report-table .rep-branch.right { text-align: end; }

/* ជួរសរុបតាមសាខា */
.report-table .rep-subtotal td {
  background: var(--surface-3); color: #0070C0; font-weight: 800;
  border-block: 1px solid var(--line-2);
}

/* ជួរសរុបរួម — ផ្ទៃរោស និងបន្ទាត់ក្រាស់ពីលើ (v9.8) */
.report-table .rep-grand td {
  background: #E6B8AF; color: #1a1a1a;
  font-weight: 900;
  border-block-end: 1px solid #b08a82;
}
.report-table .rep-grand:first-of-type td { border-block-start: 3px solid #404040; }
.report-table .rep-grand:last-child td { border-block-end: 3px double #404040; }

/* របៀបងងឹត — បន្ទន់ពណ៌ខ្លះ កុំឲ្យចាំងភ្នែក */
[data-theme="dark"] .report-table .rep-cols th { background: #3f3f46; color: #F5A96B; }
[data-theme="dark"] .report-table .rep-cols th.rep-dim { color: #F5A96B; }
[data-theme="dark"] .report-table .rep-subtotal td { color: #6EB8F0; }
[data-theme="dark"] .report-table .rep-grand td { background: #7d5a54; color: #fff; }

@media print {
  .report-table .rep-cols th { background: #595959 !important; color: #ED7D31 !important;
                               -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ══════════════════════════════════════════════════════════════════════════
   v9.9.3 — សៀវភៅណែនាំក្នុងកម្មវិធី
   រចនាដូចឯកសារអាន មិនដូចផ្ទាំងកម្មវិធី — បន្ទាត់មិនវែងពេក ដកឃ្លាធំ
   ══════════════════════════════════════════════════════════════════════════ */
.print-only { display: none; }

.doc-cover { text-align: center; margin-bottom: 18px; }
.doc-cover h1 { font-size: 19px; font-weight: 800; }
.doc-cover p  { font-size: 12px; color: #555; margin-top: 4px; }

.doc-book { border: 1px solid var(--line); border-radius: var(--r-md); margin-bottom: 14px; overflow: hidden; }
.doc-head {
  display: flex; align-items: center; gap: 13px; width: 100%; text-align: start;
  padding: 15px 17px; background: var(--surface-2); color: var(--text);
  transition: background var(--t-fast);
}
.doc-head:hover { background: var(--surface-3); }
.doc-icon { font-size: 17px; color: var(--brand-500); width: 22px; text-align: center; flex: none; }
.doc-head-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.doc-title { font-size: 14px; font-weight: 800; }
.doc-title-en { font-size: 11px; font-weight: 600; color: var(--text-3); }
.doc-caret { margin-inline-start: auto; color: var(--text-3); transition: transform var(--t); flex: none; }
.doc-book.is-open .doc-caret { transform: rotate(180deg); }

.doc-body { display: none; padding: 6px 22px 22px; max-width: 78ch; }
.doc-book.is-open .doc-body { display: block; }

.doc-h {
  font-size: 14.5px; font-weight: 800; color: var(--brand-600);
  margin: 22px 0 9px; padding-bottom: 6px; border-bottom: 2px solid var(--line);
}
.doc-body > .doc-h:first-child { margin-top: 12px; }
.doc-p { font-size: 13px; line-height: 1.85; color: var(--text-2); margin: 9px 0; }
.doc-list { margin: 9px 0 9px 20px; font-size: 13px; line-height: 1.85; color: var(--text-2); }
.doc-list li { margin-bottom: 5px; }
ol.doc-list { list-style: decimal; }
ul.doc-list { list-style: disc; }

.doc-box {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 13px 15px; border-radius: var(--r-sm); margin: 13px 0;
  font-size: 12.5px; line-height: 1.8;
  border: 1px solid; border-inline-start-width: 4px;
}
.doc-box i { font-size: 14px; margin-top: 2px; flex: none; }
.doc-note { background: var(--info-bg); border-color: var(--info-br); color: var(--info-fg); }
.doc-warn { background: var(--warn-bg); border-color: var(--warn-br); color: var(--warn-fg); }

.doc-table-wrap { overflow-x: auto; margin: 13px 0; }
.doc-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.doc-table th, .doc-table td {
  border: 1px solid var(--line); padding: 9px 11px;
  text-align: start; vertical-align: top; line-height: 1.7;
}
.doc-table th { background: var(--surface-3); font-weight: 800; }
.doc-table tbody tr:nth-child(even) { background: var(--surface-2); }

/* ── ការបោះពុម្ព PDF ──
   លាក់សំបករបស់កម្មវិធី ហើយបង្ហាញឯកសារជាទំព័រស្អាត។ `printDoc()` បើក
   សៀវភៅដែលបត់ចូលទាំងអស់ជាមុន ដូច្នេះគ្មានផ្នែកណាបាត់ពីក្រដាសទេ។ */
@media print {
  .print-only { display: block !important; }
  #view-help .card { border: none !important; }
  #view-help .card-body { padding: 0 !important; }
  .doc-book { border: none; margin: 0 0 8mm; break-inside: auto; }
  .doc-body { display: block !important; padding: 0; max-width: none; }
  .doc-print-title { border-bottom: 2px solid #000; margin-bottom: 6mm; padding-bottom: 3mm; }
  .doc-print-title h2 { font-size: 16px; font-weight: 800; }
  .doc-print-title p  { font-size: 11px; color: #555; margin-top: 3px; }
  .doc-h { break-after: avoid; color: #000; border-bottom-color: #999; }
  .doc-p, .doc-list, .doc-box { color: #000; }
  .doc-box, .doc-table-wrap, .doc-list { break-inside: avoid; }
  .doc-table { break-inside: auto; }
  .doc-table th { background: #eee !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .doc-table tbody tr { break-inside: avoid; }
  .doc-book + .doc-book { break-before: page; }
}

/* ══════════════════════════════════════════════════════════════════════════
   v9.8 — ប្រវត្តិរូបអ្នកប្រើក្នុងម៉ឺនុយ
   ══════════════════════════════════════════════════════════════════════════ */
.profile {
  display: flex; align-items: center; gap: 10px;
  padding: 10px; margin-bottom: 12px;
  background: var(--surface-3); border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
.profile-av {
  width: 38px; height: 38px; flex: none; border-radius: 50%;
  display: grid; place-items: center; overflow: hidden;
  background: var(--brand-500); color: #fff;
  font-size: 13px; font-weight: 800; letter-spacing: -.02em;
}
.profile-av img { width: 100%; height: 100%; object-fit: cover; }
.profile-av.has-img { background: var(--surface); }
.profile-text { min-width: 0; }
.profile-name {
  font-size: 12.5px; font-weight: 800; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.profile-sub {
  font-size: 10.5px; font-weight: 600; color: var(--text-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.is-collapsed .profile { justify-content: center; padding: 8px 0; }

/* ══════════════════════════════════════════════════════════════════════════
   v9.8 — ការកំណត់បោះពុម្ព៖ A4 ផ្តេក · គែម ០.៥ ស.ម
   ══════════════════════════════════════════════════════════════════════════ */
@page {
  size: A4 landscape;
  margin: 0.5cm;
}

@media print {
  .no-print, .sidebar, .topbar, .toolbar, .filters,
  .row-actions, .bulk-bar, .modal, .drawer, .toast-stack,
  #busy-bar, .skip-link { display: none !important; }

  .app, .main, .content { display: block !important; margin: 0 !important; padding: 0 !important; }
  .card { box-shadow: none !important; border: none !important; break-inside: auto; }
  .table-wrap { overflow: visible !important; max-height: none !important; }

  /* ក្បាលតារាងដដែលៗលើគ្រប់ទំព័រ */
  thead { display: table-header-group; }
  tr { break-inside: avoid; }

  body { background: #fff !important; }
  .report-table { font-size: 9pt; }
  .report-table .rep-cols th,
  .report-table .rep-grand td,
  .report-table .rep-subtotal td {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   v9.8 — ស្លាកប្រភេទចំណាយមានពណ៌
   ផ្ទៃស្រាល + អក្សរចាស់ = អានច្បាស់ជាងអក្សរពណ៌ភ្លឺលើផ្ទៃស
   ══════════════════════════════════════════════════════════════════════════ */
.cat-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 11px 4px 9px; border-radius: var(--r-full);
  font-size: 12px; font-weight: 700; line-height: 1.5;
  color: color-mix(in srgb, var(--cat) 78%, #000);
  background: color-mix(in srgb, var(--cat) 13%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--cat) 34%, transparent);
  white-space: nowrap;
}
.cat-dot {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--cat);
}
/* របៀបងងឹត — បញ្ច្រាស៖ អក្សរភ្លឺលើផ្ទៃចាស់ */
[data-theme="dark"] .cat-chip {
  color: color-mix(in srgb, var(--cat) 62%, #fff);
  background: color-mix(in srgb, var(--cat) 22%, var(--surface));
  border-color: color-mix(in srgb, var(--cat) 45%, transparent);
}

/* ── រូបប្រវត្តិរូបផ្ទុកឡើងបាន (v9.8.8) ── */
.profile-av { position: relative; cursor: pointer; border: none; padding: 0; }
.profile-av:hover .profile-cam { opacity: 1; }
.profile-ini { line-height: 1; }
.profile-cam {
  position: absolute; inset-block-end: -1px; inset-inline-end: -1px;
  width: 15px; height: 15px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--brand-600); color: #fff;
  font-size: 7px; border: 1.5px solid var(--surface-3);
  opacity: .75; transition: opacity var(--t-fast);
}