/* components.css — component dùng chung (sinh từ 05-DESIGN-SYSTEM / mockup.css). */

/* ---------- BUTTONS ---------- */
.oq-btn{
  --h:40px; height:var(--h); display:inline-flex; align-items:center; justify-content:center;
  gap:var(--oq-sp-2); padding:0 var(--oq-sp-4); font:inherit; font-weight:500;
  border:1px solid transparent; border-radius:var(--oq-radius); cursor:pointer;
  background:var(--oq-surface-2); color:var(--oq-text-1); transition:.12s;
  white-space:nowrap;
}
.oq-btn--sm{--h:32px; font-size:var(--oq-fs-12); padding:0 var(--oq-sp-3)}
.oq-btn--lg{--h:48px; font-size:var(--oq-fs-16); padding:0 var(--oq-sp-6)}
.oq-btn--primary{background:var(--oq-accent); color:var(--oq-accent-ink)}
.oq-btn--primary:hover{background:var(--oq-accent-hover)}
.oq-btn--secondary{background:var(--oq-surface); border-color:var(--oq-border-strong); color:var(--oq-text-1)}
.oq-btn--secondary:hover{background:var(--oq-surface-2)}
.oq-btn--danger{background:var(--oq-danger); color:#fff}
.oq-btn--danger:hover{filter:brightness(.94)}
.oq-btn--ghost{background:transparent; color:var(--oq-text-2)}
.oq-btn--ghost:hover{background:var(--oq-surface-2); color:var(--oq-text-1)}
.oq-btn:active{transform:translateY(1px)}
.oq-btn[disabled],.oq-btn--disabled{opacity:.5; cursor:not-allowed}
.oq-btn--loading{position:relative; color:transparent !important}
.oq-btn--loading::after{
  content:""; position:absolute; width:14px; height:14px; border-radius:50%;
  border:2px solid currentColor; border-top-color:transparent;
  color:var(--oq-accent-ink); animation:oq-spin .8s linear infinite;
}
@keyframes oq-spin{to{transform:rotate(360deg)}}

/* ---------- CARD / SURFACE ---------- */
.oq-card{background:var(--oq-surface); border:1px solid var(--oq-border); border-radius:var(--oq-radius-lg); box-shadow:var(--oq-shadow-sm)}
.oq-card__pad{padding:var(--oq-sp-6)}

/* ---------- BADGE (map state machine 02) ---------- */
.oq-badge{display:inline-flex; align-items:center; gap:4px; padding:2px 10px; border-radius:var(--oq-radius-pill); font-size:var(--oq-fs-12); font-weight:600}
.oq-badge--ok{background:var(--oq-ok-bg); color:var(--oq-ok)}
.oq-badge--warn{background:var(--oq-warn-bg); color:var(--oq-warn)}
.oq-badge--danger{background:var(--oq-danger-bg); color:var(--oq-danger)}
.oq-badge--info{background:var(--oq-info-bg); color:var(--oq-info)}
.oq-badge--muted{background:var(--oq-surface-2); color:var(--oq-text-3)}

/* difficulty chips */
.oq-diff{font-size:var(--oq-fs-12); font-weight:600; padding:1px 8px; border-radius:var(--oq-radius-sm)}
.oq-diff--1{background:var(--oq-ok-bg); color:var(--oq-ok)}
.oq-diff--2{background:var(--oq-warn-bg); color:var(--oq-warn)}
.oq-diff--3{background:var(--oq-danger-bg); color:var(--oq-danger)}

/* ---------- FIELD / INPUT ---------- */
.oq-field{display:flex; flex-direction:column; gap:var(--oq-sp-2); margin-bottom:var(--oq-sp-4)}
.oq-field__label{font-size:var(--oq-fs-14); font-weight:500; color:var(--oq-text-2)}
.oq-input,.oq-select,.oq-textarea{
  height:40px; padding:0 var(--oq-sp-3); font:inherit; color:var(--oq-text-1);
  background:var(--oq-surface); border:1px solid var(--oq-border); border-radius:var(--oq-radius); width:100%;
}
.oq-textarea{height:auto; min-height:96px; padding:var(--oq-sp-3); resize:vertical}
.oq-input::placeholder,.oq-textarea::placeholder{color:var(--oq-text-3)}
.oq-input:focus,.oq-select:focus,.oq-textarea:focus{outline:none; border-color:var(--oq-accent); box-shadow:0 0 0 3px rgba(37,99,235,.25)}
.oq-input--error{border-color:var(--oq-danger)}
.oq-input--error:focus{box-shadow:0 0 0 3px rgba(220,38,38,.2)}
.oq-field__err{font-size:var(--oq-fs-12); color:var(--oq-danger)}
.oq-field__hint{font-size:var(--oq-fs-12); color:var(--oq-text-3)}

/* ---------- TABLE ---------- */
.oq-table{width:100%; border-collapse:collapse; background:var(--oq-surface)}
.oq-table th,.oq-table td{padding:var(--oq-sp-3) var(--oq-sp-4); text-align:left; border-bottom:1px solid var(--oq-border); font-size:var(--oq-fs-14); vertical-align:middle}
.oq-table thead th{position:sticky; top:0; background:var(--oq-surface-2); color:var(--oq-text-2); font-size:var(--oq-fs-12); font-weight:600; text-transform:none; cursor:default; z-index:1}
.oq-table th[data-sort]{cursor:pointer; user-select:none}
.oq-table tbody tr:hover{background:var(--oq-surface-2)}
.oq-table__row--selected{background:rgba(37,99,235,.06)}
.oq-table__actions{text-align:right; white-space:nowrap}
.oq-table__check{width:36px}

/* ---------- TOOLBAR (list page) ---------- */
.oq-toolbar{display:flex; flex-wrap:wrap; gap:var(--oq-sp-3); align-items:center; padding:var(--oq-sp-3) 0; min-height:48px}
.oq-toolbar__search{flex:1 1 220px; max-width:320px}
.oq-toolbar__spacer{flex:1 1 auto}

/* ---------- PAGER ---------- */
.oq-pager{display:flex; align-items:center; gap:var(--oq-sp-2); padding:var(--oq-sp-4) 0; justify-content:flex-end}
.oq-pager__btn{min-width:32px; height:32px; padding:0 var(--oq-sp-2); border:1px solid var(--oq-border); background:var(--oq-surface); border-radius:var(--oq-radius-sm); cursor:pointer; color:var(--oq-text-2)}
.oq-pager__btn--active{background:var(--oq-accent); color:#fff; border-color:var(--oq-accent)}
.oq-pager__btn[disabled]{opacity:.45; cursor:not-allowed}
.oq-pager__size{height:32px; width:auto; padding:0 var(--oq-sp-2); margin-left:var(--oq-sp-3)}

/* ---------- EMPTY / SKELETON ---------- */
.oq-empty{display:flex; flex-direction:column; align-items:center; gap:var(--oq-sp-3); padding:var(--oq-sp-10) var(--oq-sp-4); text-align:center}
.oq-empty__icon{font-size:40px}
.oq-empty__text{color:var(--oq-text-2)}
.oq-skel{background:var(--oq-surface-2); border-radius:var(--oq-radius-sm); animation:oq-pulse 1.2s ease-in-out infinite}
@keyframes oq-pulse{0%,100%{opacity:1}50%{opacity:.55}}
.oq-skel-row{height:16px; margin:var(--oq-sp-3) 0}

/* ---------- TOAST ---------- */
.oq-toast-wrap{position:fixed; top:16px; right:16px; z-index:var(--oq-z-toast); display:flex; flex-direction:column; gap:var(--oq-sp-2)}
.oq-toast{display:flex; align-items:center; gap:var(--oq-sp-2); padding:var(--oq-sp-3) var(--oq-sp-4); border-radius:var(--oq-radius); box-shadow:var(--oq-shadow-lg); background:var(--oq-surface); border-left:4px solid var(--oq-text-3); min-width:240px}
.oq-toast--ok{border-left-color:var(--oq-ok)}
.oq-toast--info{border-left-color:var(--oq-info)}
.oq-toast--warn{border-left-color:var(--oq-warn)}
.oq-toast--error{border-left-color:var(--oq-danger)}

/* ---------- MODAL ---------- */
.oq-modal{position:fixed; inset:0; z-index:var(--oq-z-modal); display:flex; align-items:center; justify-content:center}
.oq-modal[hidden]{display:none}
.oq-modal__backdrop{position:absolute; inset:0; background:rgba(0,0,0,.45)}
.oq-modal__panel{position:relative; background:var(--oq-surface); border-radius:var(--oq-radius-lg); box-shadow:var(--oq-shadow-lg); width:min(520px,92vw); max-height:88vh; overflow:auto}
.oq-modal__head{display:flex; align-items:center; justify-content:space-between; padding:var(--oq-sp-4) var(--oq-sp-5); border-bottom:1px solid var(--oq-border); font-weight:600}
.oq-modal__body{padding:var(--oq-sp-5)}
.oq-modal__foot{display:flex; justify-content:flex-end; gap:var(--oq-sp-3); padding:var(--oq-sp-4) var(--oq-sp-5); border-top:1px solid var(--oq-border)}

/* ---------- USER MENU (header dropdown) ---------- */
.oq-menu{position:relative}
.oq-menu__trigger{font-weight:500}
.oq-menu__list{position:absolute; right:0; top:calc(100% + 6px); min-width:184px; background:var(--oq-surface); border:1px solid var(--oq-border); border-radius:var(--oq-radius); box-shadow:var(--oq-shadow-lg); padding:var(--oq-sp-1); z-index:var(--oq-z-sticky)}
.oq-menu__list[hidden]{display:none}
.oq-menu__item{display:block; width:100%; text-align:left; padding:var(--oq-sp-2) var(--oq-sp-3); background:transparent; border:none; border-radius:var(--oq-radius-sm); font:inherit; color:var(--oq-text-1); cursor:pointer}
.oq-menu__item:hover{background:var(--oq-surface-2)}

/* ---------- PROGRESS / METER ---------- */
.oq-meter{height:8px; background:var(--oq-surface-2); border-radius:var(--oq-radius-pill); overflow:hidden}
.oq-meter__fill{height:100%; background:var(--oq-accent); border-radius:var(--oq-radius-pill)}

/* ---------- QUIZ specific ---------- */
.oq-quizbar{position:sticky; top:0; z-index:var(--oq-z-sticky); background:var(--oq-surface); border-bottom:1px solid var(--oq-border)}
.oq-quizbar__inner{display:flex; align-items:center; gap:var(--oq-sp-4); height:56px}
.oq-timer{font-family:var(--oq-font-mono); font-weight:600; font-size:var(--oq-fs-18); padding:2px 10px; border-radius:var(--oq-radius); background:var(--oq-surface-2)}
.oq-timer--warn{background:var(--oq-warn-bg); color:var(--oq-warn)}
.oq-opt{display:flex; gap:var(--oq-sp-3); align-items:flex-start; padding:var(--oq-sp-4); border:1px solid var(--oq-border); border-radius:var(--oq-radius); margin-bottom:var(--oq-sp-3); cursor:pointer; background:var(--oq-surface); transition:.12s}
.oq-opt:hover{border-color:var(--oq-border-strong); background:var(--oq-surface-2)}
.oq-opt--selected{border-color:var(--oq-accent); background:rgba(37,99,235,.05)}
.oq-opt--correct{border-color:var(--oq-ok); background:var(--oq-ok-bg)}
.oq-opt--wrong{border-color:var(--oq-danger); background:var(--oq-danger-bg)}
.oq-opt__mark{flex:0 0 22px; height:22px; border-radius:50%; border:2px solid var(--oq-border-strong); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; margin-top:1px}
.oq-opt--selected .oq-opt__mark{border-color:var(--oq-accent); color:var(--oq-accent)}
.oq-opt--correct .oq-opt__mark{border-color:var(--oq-ok); background:var(--oq-ok); color:#fff}
.oq-opt--wrong .oq-opt__mark{border-color:var(--oq-danger); background:var(--oq-danger); color:#fff}
.oq-opt__body{flex:1}
.oq-explain{margin-top:var(--oq-sp-3); padding:var(--oq-sp-4); background:var(--oq-info-bg); border-radius:var(--oq-radius); border-left:4px solid var(--oq-info)}
.oq-qnav{display:flex; flex-wrap:wrap; gap:var(--oq-sp-2)}
.oq-qnav__cell{width:36px; height:36px; border-radius:var(--oq-radius-sm); border:1px solid var(--oq-border); background:var(--oq-surface); display:flex; align-items:center; justify-content:center; font-size:var(--oq-fs-12); font-weight:600; cursor:pointer; color:var(--oq-text-2)}
.oq-qnav__cell--done{background:var(--oq-accent); color:#fff; border-color:var(--oq-accent)}
.oq-qnav__cell--current{outline:2px solid var(--oq-accent); outline-offset:1px}

/* ---------- GRID helpers ---------- */
.oq-grid{display:grid; gap:var(--oq-sp-4)}
.oq-grid--cards{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.oq-stat{display:flex; flex-direction:column; gap:var(--oq-sp-1)}
.oq-stat__num{font-size:var(--oq-fs-24); font-weight:600}
.oq-stat__label{font-size:var(--oq-fs-12); color:var(--oq-text-3)}

/* ---------- BREADCRUMB ---------- */
.oq-breadcrumb{font-size:var(--oq-fs-14); color:var(--oq-text-2)}
.oq-breadcrumb b{color:var(--oq-text-1); font-weight:600}

/* ---------- responsive ---------- */
@media(max-width:640px){
  .oq-toolbar__search{max-width:none}
  .oq-quizbar__inner{gap:var(--oq-sp-2)}
}

/* ============================================================
 * Tabs (05 §2.7) — bổ sung cho M08 Báo cáo. Tab active: gạch chân 2px accent + chữ text-1.
 * ============================================================ */
.oq-tabs{display:flex; gap:var(--oq-sp-5); border-bottom:1px solid var(--oq-border); margin-bottom:var(--oq-sp-5)}
.oq-tab{padding:var(--oq-sp-3) 0; border:none; background:none; font:inherit; font-weight:500; color:var(--oq-text-2); cursor:pointer; border-bottom:2px solid transparent}
.oq-tab:hover{color:var(--oq-text-1)}
.oq-tab--active{color:var(--oq-text-1); border-bottom-color:var(--oq-accent)}