/* TOÁN TIN 3.2 — System-wide responsive UX foundation.
 * Presentation only: no business/auth/data semantics live in this layer.
 */
:root{
  --tt-touch-min:44px;
  --tt-space-1:.375rem;
  --tt-space-2:.625rem;
  --tt-space-3:1rem;
  --tt-card-radius:.9rem;
}

:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:3px solid rgba(13,110,253,.28);
  outline-offset:2px;
}

.tt-page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.tt-page-actions,.tt-action-group{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap}
.tt-filter-toolbar{display:flex;align-items:flex-end;gap:.65rem;flex-wrap:wrap}
.tt-filter-toolbar .tt-filter-grow{flex:1 1 18rem;min-width:min(100%,14rem)}
.tt-filter-toolbar .form-control,.tt-filter-toolbar .form-select{min-height:40px}

/* Tỷ lệ chuẩn cho toolbar 2 control: giữ tìm kiếm là control chính, filter là control phụ. */
.tt-filter-toolbar.tt-filter-ratio-70-30{display:grid;grid-template-columns:minmax(0,7fr) minmax(11rem,3fr);align-items:end}
.tt-filter-toolbar.tt-filter-ratio-70-30>.tt-filter-primary,.tt-filter-toolbar.tt-filter-ratio-70-30>.tt-filter-secondary{width:100%;min-width:0}
.tt-filter-status{min-height:1.35rem;margin-top:.35rem;font-size:.82rem;color:#64748b}
.tt-filter-error{margin-top:.5rem}
.tt-loading{position:relative;opacity:.58;pointer-events:none;min-height:4rem}
.tt-loading::after{content:"";position:absolute;top:1rem;right:1rem;width:1.35rem;height:1.35rem;border:.18rem solid rgba(13,110,253,.22);border-top-color:#0d6efd;border-radius:50%;animation:tt-spin .7s linear infinite}
@keyframes tt-spin{to{transform:rotate(360deg)}}

.tt-responsive-pagination{display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap;margin-top:1rem}
.tt-responsive-pagination .pagination{margin-bottom:0;flex-wrap:wrap}
.tt-responsive-pagination .page-link{min-width:36px;text-align:center}

.tt-action-overflow{position:relative;display:inline-block}
.tt-action-overflow>summary{list-style:none;cursor:pointer;min-height:34px;display:inline-flex;align-items:center;gap:.3rem}
.tt-action-overflow>summary::-webkit-details-marker{display:none}
.tt-action-overflow-menu{position:absolute;right:0;z-index:20;min-width:11rem;margin-top:.3rem;padding:.45rem;background:#fff;border:1px solid #dee2e6;border-radius:.7rem;box-shadow:0 .65rem 1.5rem rgba(15,23,42,.14);display:grid;gap:.35rem}
.tt-action-overflow-menu form,.tt-action-overflow-menu .btn,.tt-action-overflow-menu a{width:100%;text-align:left}

.tt-mobile-only{display:none!important}
.tt-card-meta{display:flex;flex-wrap:wrap;gap:.35rem .8rem;color:#64748b;font-size:.875rem}
.tt-card-meta>*{min-width:0}
.tt-primary-action{font-weight:650}
.tt-wrap-safe{overflow-wrap:anywhere;word-break:normal}

/* Tables explicitly opted into this class become semantic cards on small screens.
 * JS copies header labels into data-label so server markup remains reusable/AJAX-safe.
 */
.tt-responsive-table td,.tt-responsive-table th{vertical-align:middle}
.tt-responsive-table .tt-cell-actions{white-space:nowrap}
.tt-responsive-table .tt-secondary-meta{color:#64748b;font-size:.875rem}

.tt-assignment-readiness{border-left:4px solid #ffc107}
.tt-score-missing{border-color:#ffc107!important;background:#fff9e8}
.tt-score-missing .q-points{border-color:#e0a800;background:#fff}
.tt-assignment-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem;margin-bottom:1rem}
.tt-assignment-summary .card{height:100%}
.tt-assignment-attention{border-left:4px solid #0d6efd}

.tt-heatmap-mobile{display:none}
.tt-heatmap-cell{border:1px solid #e2e8f0;border-radius:.65rem;padding:.65rem .75rem;background:#fff}
.tt-heatmap-cell-head{display:flex;justify-content:space-between;gap:.75rem;align-items:baseline}

@media(max-width:991.98px){
  .tt-priority-low{display:none!important}
  .tt-page-actions .btn{white-space:nowrap}
  .app-topbar .topbar-context-links{display:none}
}

@media(max-width:767.98px){
  .page-wrap{overflow-x:clip}
  .tt-mobile-only{display:initial!important}
  .tt-mobile-hide{display:none!important}
  .tt-page-head{align-items:stretch}
  .tt-page-actions{width:100%}
  .tt-page-actions>.btn,.tt-page-actions>a.btn{flex:1 1 auto;justify-content:center}
  .tt-filter-toolbar{display:grid;grid-template-columns:1fr;width:100%}

  .tt-filter-toolbar.tt-filter-ratio-70-30{grid-template-columns:1fr}
  .tt-filter-toolbar>*{width:100%!important;max-width:none!important;min-width:0!important}
  .tt-responsive-pagination{align-items:flex-start}
  .tt-responsive-pagination .pagination{width:100%;overflow:auto;padding-bottom:.2rem}
  .tt-responsive-pagination .pagination .page-item{flex:0 0 auto}

  .btn:not(.btn-close),button:not(.btn-close),input.form-control,select.form-select,textarea.form-control,summary{min-height:var(--tt-touch-min)}
  .btn-sm{min-height:40px;padding-block:.45rem}
  .dropdown-menu .dropdown-item{min-height:var(--tt-touch-min);display:flex;align-items:center}

  .tt-responsive-table{display:block;border-collapse:separate!important}
  .tt-responsive-table thead{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
  .tt-responsive-table tbody{display:grid;gap:.75rem;padding:.75rem}
  .tt-responsive-table tbody tr{display:block;border:1px solid #e2e8f0;border-radius:var(--tt-card-radius);background:#fff;padding:.4rem .75rem;box-shadow:0 .18rem .7rem rgba(15,23,42,.045)}
  .tt-responsive-table tbody tr:hover{background:#fff}
  .tt-responsive-table tbody td{display:grid;grid-template-columns:minmax(7.5rem,38%) minmax(0,1fr);gap:.65rem;border:0!important;border-bottom:1px dashed #e2e8f0!important;padding:.62rem 0!important;text-align:left!important;white-space:normal!important;min-width:0!important;width:auto!important;max-width:none!important}
  .tt-responsive-table tbody td:last-child{border-bottom:0!important}
  .tt-responsive-table tbody td::before{content:attr(data-label);font-size:.75rem;text-transform:uppercase;letter-spacing:.035em;color:#64748b;font-weight:750;align-self:start}
  .tt-responsive-table tbody td[data-label=""],.tt-responsive-table tbody td.tt-card-primary{grid-template-columns:1fr}
  .tt-responsive-table tbody td[data-label=""]::before,.tt-responsive-table tbody td.tt-card-primary::before{display:none}
  .tt-responsive-table tbody td[colspan]{display:block!important;text-align:center!important;padding:1.5rem .75rem!important}
  .tt-responsive-table tbody td[colspan]::before{display:none}
  .tt-responsive-table .tt-cell-actions,.tt-responsive-table .tt-col-actions{display:block!important;padding-top:.7rem!important}
  .tt-responsive-table .tt-cell-actions::before,.tt-responsive-table td.tt-col-actions::before{display:block;margin-bottom:.45rem;content:"Thao tác"}
  .tt-responsive-table .tt-action-group,.tt-responsive-table .tt-row-actions{display:flex;gap:.4rem;flex-wrap:wrap;justify-content:flex-start!important}
  .tt-responsive-table .tt-action-group>.btn,.tt-responsive-table .tt-row-actions>.btn,.tt-responsive-table .tt-row-actions>a{flex:1 1 7rem;text-align:center}
  .tt-responsive-table .tt-priority-mobile-hide{display:none!important}

  .tt-assignment-summary{grid-template-columns:1fr}
  .student-assignment-card .student-assignment-actions{display:grid;grid-template-columns:1fr}
  .student-assignment-card .student-assignment-actions>*{width:100%!important}
  .student-assignment-card .student-assignment-actions .btn{width:100%;min-height:44px}
  .student-assignment-card.is-complete{opacity:.9}
  .student-assignment-card.is-attention{border:1px solid rgba(13,110,253,.2)}

  .tt-heatmap-desktop{display:none!important}
  .tt-heatmap-mobile{display:grid;gap:.75rem}
  .tt-heatmap-student{border:1px solid #e2e8f0;border-radius:1rem;background:#fff;padding:1rem;box-shadow:0 .18rem .7rem rgba(15,23,42,.04)}
  .tt-heatmap-grid{display:grid;gap:.5rem;margin-top:.75rem}

  .exam-composition{grid-template-columns:2.5rem minmax(0,1fr)!important;gap:.55rem!important}
  .exam-composition .q-order{grid-row:1/4}
  .exam-composition .exam-q-content{grid-column:2}
  .exam-composition>div:has(.q-points){grid-column:2}
  .exam-composition .exam-q-sort,.exam-composition .exam-q-actions{grid-column:2!important}
  .exam-q-actions .btn{flex:1 1 7rem;min-height:40px}

  .app-topbar .container-fluid{padding-inline:.65rem!important}
  .app-topbar .btn{padding-inline:.65rem}
  .app-topbar .topbar-title-copy .small{display:none}
  .alert.d-flex.justify-content-between{align-items:flex-start!important;gap:.65rem;flex-wrap:wrap}
}

@media(max-width:420px){
  .tt-responsive-table tbody{padding:.55rem 0}
  .tt-responsive-table tbody tr{border-radius:.8rem}
  .tt-responsive-table tbody td{grid-template-columns:6.8rem minmax(0,1fr);font-size:.9rem}
  .topbar-title-copy .fw-bold{font-size:.9rem;line-height:1.15}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

@media(max-width:767.98px){
  /* Existing compact live-filter bars should not preserve desktop fixed widths on phones. */
  form.d-flex[data-live-filter],form.tt-filterbar[data-live-filter]{display:grid!important;grid-template-columns:1fr;align-items:stretch!important;width:100%}
  form.d-flex[data-live-filter]>*:not(input[type="hidden"]),form.tt-filterbar[data-live-filter]>*:not(input[type="hidden"]){width:100%!important;max-width:none!important;min-width:0!important;margin:0!important}
}


/* Responsive Owner Findings Follow-up R1
 * Shared presentation utilities for management surfaces confirmed FAIL by Owner.
 * Business/auth/route/AJAX contracts remain server-owned and unchanged.
 */
.tt-mobile-meta-block{display:none}
.tt-filter-stack-mobile .row{align-items:end}
.tt-management-primary{min-width:0}
.tt-management-primary .fw-semibold,.tt-management-primary b{overflow-wrap:anywhere;word-break:normal}
.tt-overflow-secondary .tt-action-overflow-menu{min-width:13rem}
.tt-overflow-secondary .tt-action-overflow-menu .btn{justify-content:flex-start}
.tt-mobile-action-toolbar{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap}

@media(max-width:767.98px){
  .tt-filter-stack-mobile.row>[class*="col"],
  .tt-filter-stack-mobile .row>[class*="col"],
  .tt-filter-stack-mobile>.row>[class*="col"]{flex:0 0 100%;width:100%;max-width:100%}
  .tt-filter-stack-mobile .form-control,.tt-filter-stack-mobile .form-select{width:100%;min-width:0}
  .tt-mobile-meta-block{display:grid;gap:.2rem;margin-top:.45rem;color:#64748b;font-size:.8rem;line-height:1.35}
  .tt-mobile-meta-block>span{min-width:0;overflow-wrap:anywhere}
  .tt-mobile-action-toolbar{align-items:stretch}
  .tt-mobile-action-toolbar>.btn,.tt-mobile-action-toolbar>form,.tt-mobile-action-toolbar>.tt-action-overflow{flex:1 1 9rem}
  .tt-mobile-action-toolbar>form>.btn,.tt-mobile-action-toolbar>.tt-action-overflow>summary{width:100%;justify-content:center}
  .tt-action-overflow{max-width:100%}
  .tt-action-overflow>summary{justify-content:center;white-space:nowrap}
  .tt-action-overflow-menu{position:static;min-width:0;width:100%;margin-top:.35rem;box-shadow:none}
  .tt-responsive-table tbody td.tt-management-primary{grid-template-columns:1fr}
  .tt-responsive-table tbody td.tt-management-primary::before{display:none}
  .tt-responsive-table .tt-cell-actions .tt-action-overflow{width:100%}
  .tt-responsive-table .tt-cell-actions .tt-action-overflow>summary{width:100%}
  .tt-responsive-table .tt-cell-actions .tt-action-overflow-menu{width:100%}
  .tt-trash-toolbar{display:grid!important;grid-template-columns:1fr 1fr;white-space:normal!important}
  .tt-trash-toolbar>span{grid-column:1/-1}
  .tt-trash-toolbar .ms-auto{margin-left:0!important}
  .tt-trash-toolbar .tt-action{width:100%}
  .tt-interactive-authoring-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));width:100%!important;min-width:0!important;max-width:none!important;margin-left:0!important}
  .tt-interactive-authoring-actions .btn{width:100%;white-space:normal!important;line-height:1.15!important}
}
@media(max-width:420px){
  .tt-interactive-authoring-actions{grid-template-columns:1fr}
  .tt-trash-toolbar{grid-template-columns:1fr}
}