/* Quang Châu — lớp áp dụng Design System cho app Chấm công (nạp SAU mọi CSS khác).
   Token: design-tokens.css (bản sao từ app Lương). Chỉ chứa quy tắc dùng chung: focus, chuyển động, tab menu. */
:where(button,a,input,select,textarea,[tabindex]):focus-visible{outline:2px solid var(--qc-red-600);outline-offset:2px}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--qc-red-600);box-shadow:var(--qc-ring)}
.sidebar :where(a,button,[tabindex]):focus-visible{outline-color:#fff}
button:not(:disabled),[role="button"],label[for],.nav-item{cursor:pointer}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
.table td.num,.metric strong,.admin-kpi strong{font-variant-numeric:tabular-nums}
@media (min-width:821px){
  .nav{overflow:visible;padding-right:0}
  .nav-item{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)}
  .section-tab{background:transparent}
}
@media (max-width:820px){.btn,input,select{min-height:var(--qc-h-touch)}}