/* Quang Châu — lớp áp dụng Design System cho app Lương (nạp SAU mọi CSS khác).
   Token: design-tokens.css (bản sao từ cungung/public). Quy ước: design-system/MASTER.md (repo cungung).
   Màu/cỡ chữ/khoảng cách/bo góc của từng thành phần nằm ở style.css (đã trỏ về token);
   file này chỉ chứa quy tắc dùng chung mới: focus, chuyển động, tab menu, thanh đỏ tiêu đề thẻ, khóa cuộn modal. */

/* Focus nhìn thấy được trên mọi điều khiển khi dùng bàn phím */
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--qc-red-600);
  outline-offset: 2px;
}
.input:focus, .select:focus, .login-card input:focus, .input-grid input:focus {
  outline: 0;
  border-color: var(--qc-red-600);
  box-shadow: var(--qc-ring);
}
/* nút trên nền đỏ (menu): vòng trắng để đủ tương phản */
.sidebar :where(a, button, [tabindex]):focus-visible { outline-color: #fff; }

/* Vùng bấm được luôn có con trỏ tay */
button:not(:disabled), [role="button"], label[for], .nav-item, .clickable { cursor: pointer; }

/* Tôn trọng giảm chuyển động */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Tiêu đề thẻ: thanh đỏ 4px phía trước (thay cho icon lạ) */
.panel-head h2::before, .panel-head h3::before, .form-section h3::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 1em;
  margin-right: 8px;
  border-radius: 2px;
  background: var(--qc-red-600);
  vertical-align: -2px;
}

/* Số tiền: chữ số đều nét, không xuống dòng */
.input.money, .table td.num, .mini-card strong, .salary-main strong, .salary-stat b { font-variant-numeric: tabular-nums; }

/* Khóa cuộn trang nền khi mở modal (chỉ 1 thanh cuộn) */
body.qc-modal-open { overflow: hidden; }

/* Desktop: mục menu đang chọn là tab liền với nền trang — nền = --qc-bg, bo trái 25px, hai mép cong ngược nối vào nội dung */
@media (min-width: 821px) {
  #nav { overflow: visible; padding-right: 0; }
  .nav-item { margin-right: 0; border-radius: var(--qc-r-md) 0 0 var(--qc-r-md); }
  .nav-item.active {
    position: relative;
    background: var(--qc-bg);
    color: var(--qc-red-700);
    border-radius: 25px 0 0 25px;
    box-shadow: none;
  }
  .nav-item.active::before, .nav-item.active::after {
    content: '';
    position: absolute;
    right: 0;
    width: 25px;
    height: 25px;
    pointer-events: none;
  }
  .nav-item.active::before {
    top: -25px;
    background: radial-gradient(circle at 0 0, transparent 24.5px, var(--qc-bg) 25px);
  }
  .nav-item.active::after {
    bottom: -25px;
    background: radial-gradient(circle at 0 100%, transparent 24.5px, var(--qc-bg) 25px);
  }
  /* dải tên mục cùng nền trang để tab menu nối liền, không còn khối trắng kề bên */
  .section-tab { background: transparent; }
}

/* Điện thoại: vùng chạm >= 44px */
@media (max-width: 820px) {
  .btn, .input, .select, .icon-close, .filter-chip { min-height: var(--qc-h-touch); }
  .btn.small { min-height: var(--qc-h-touch); }
  .input-grid input { height: var(--qc-h-touch); }
}