/* 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}
}

/* MOBILE UX REGRESSION FIX — shared patterns for dense management surfaces.
 * Chỉ điều chỉnh presentation/responsive; route, quyền và business action vẫn do server sở hữu.
 */
.tt-curriculum-content-cell{min-width:20rem}
.tt-curriculum-table-cell{min-width:11rem;max-width:19rem;white-space:normal;overflow-wrap:anywhere;word-break:normal}
.tt-curriculum-mobile-meta{display:none}
.tt-relation-editor{border:1px solid var(--bs-border-color);border-radius:.85rem;padding:.75rem .85rem;background:var(--bs-tertiary-bg)}
.tt-relation-editor>legend{float:none;width:auto;margin:0 0 .55rem;padding:0 .25rem;font-size:.8rem;font-weight:750;color:var(--bs-secondary-color)}
.tt-relation-grid{display:grid;grid-template-columns:minmax(7.5rem,.8fr) minmax(10rem,1.15fr) minmax(12rem,1.8fr);gap:.65rem;align-items:end}
.tt-relation-step-label{display:none}
.tt-subject-parent-controls{display:grid;gap:.35rem}

@media(max-width:767.98px){
  /* Chương/Bài nằm trong primary card content để không bị bó vào cột nhãn 38%. */
  .tt-curriculum-content-cell{min-width:0!important;width:100%!important;max-width:none!important}
  .tt-curriculum-mobile-meta{display:grid;gap:.32rem;margin-top:.55rem;padding:.55rem .65rem;border:1px solid #e2e8f0;border-radius:.65rem;background:#f8fafc;color:#475569;font-size:.82rem;line-height:1.35}
  .tt-curriculum-mobile-meta>div{display:grid;grid-template-columns:4.4rem minmax(0,1fr);gap:.45rem;min-width:0}
  .tt-curriculum-mobile-meta b{color:#334155}
  .tt-curriculum-mobile-meta span,.tt-curriculum-mobile-meta div{overflow-wrap:anywhere;word-break:normal}

  /* Primary action luôn hiện; thao tác phụ hiếm/destructive thu vào nút ba chấm. */
  .tt-mobile-action-compact{display:grid!important;grid-template-columns:minmax(0,1fr) 44px;gap:.5rem;align-items:start;width:100%;max-width:none!important}
  .tt-mobile-action-compact>.tt-primary-action{width:100%;min-width:0;min-height:44px;justify-content:center;text-align:center}
  .tt-mobile-action-compact>.tt-action-status{grid-column:1/-1;min-width:0}
  .tt-mobile-action-compact>.tt-action-overflow{width:44px!important;max-width:44px!important;min-width:44px!important}
  .tt-mobile-action-compact>.tt-action-overflow>summary{width:44px!important;min-width:44px!important;height:44px;padding:0!important;justify-content:center}
  .tt-mobile-action-compact>.tt-action-overflow[open]{grid-column:1/-1;width:100%!important;max-width:none!important}
  .tt-mobile-action-compact>.tt-action-overflow[open]>summary{margin-left:auto}
  .tt-mobile-action-compact>.tt-action-overflow .tt-action-overflow-menu{width:100%;min-width:0}

  /* Cặp CTA protected workflow ưu tiên cùng hàng; chỉ rơi xuống một cột ở màn hình thật hẹp. */
  .tt-interactive-authoring-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;width:100%!important;min-width:0!important;max-width:none!important;margin-left:0!important}
  .tt-interactive-authoring-actions .btn{width:100%;min-width:0;min-height:44px;white-space:normal!important;line-height:1.18!important;display:inline-flex;align-items:center;justify-content:center;text-align:center}

  /* Quan hệ Cấp/Môn cha → Môn: gom cùng một cụm, ưu tiên chiều ngang hữu ích trên mobile. */
  .tt-relation-editor{padding:.7rem}
  .tt-relation-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem}
  .tt-relation-grid>.tt-relation-child{grid-column:1/-1}
  .tt-relation-step-label{display:flex;align-items:center;gap:.4rem;margin-bottom:.35rem;font-size:.76rem;font-weight:750;color:#475569}
  .tt-relation-step-label>span{display:inline-grid;place-items:center;width:1.35rem;height:1.35rem;border-radius:50%;background:#e7f1ff;color:#0d6efd;font-size:.72rem}
  .tt-subject-row{display:grid!important;gap:0!important}
  .tt-subject-row>td{width:100%!important;max-width:none!important}
  .tt-subject-row>.tt-subject-parent-cell{order:-2;display:block!important;padding:.7rem 0 .95rem!important;position:relative;border-bottom:0!important}
  .tt-subject-row>.tt-subject-parent-cell::before{display:none!important}
  .tt-subject-row>.tt-subject-parent-cell::after{content:"↓";position:absolute;left:50%;bottom:-.55rem;transform:translateX(-50%);display:grid;place-items:center;width:1.45rem;height:1.45rem;border-radius:50%;background:#fff;border:1px solid #cbd5e1;color:#64748b;font-weight:800;z-index:1}
  .tt-subject-row>.tt-subject-name-cell{order:-1;display:block!important;padding:.95rem 0 .7rem!important;border-top:1px solid #e2e8f0!important}
  .tt-subject-row>.tt-subject-name-cell::before{display:none!important}
  .tt-subject-parent-controls{grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}
}

@media(max-width:359.98px){
  .tt-interactive-authoring-actions{grid-template-columns:1fr}
  .tt-relation-grid,.tt-subject-parent-controls{grid-template-columns:1fr}
}

/* MOBILE UX CONSOLIDATED FIX — shared action/header/filter patterns for current management pages. */
.tt-mobile-paired-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:.45rem;
  flex-wrap:wrap;
}
.tt-mobile-paired-actions>form{display:inline-flex;margin:0}
.tt-status-tabs{min-width:0}
.tt-status-tabs .btn{white-space:nowrap}
.tt-comment-filter-grid{min-width:0}

@media(max-width:767.98px){
  /* Sửa/Xóa (và action cùng cấp) giữ cùng hàng khi đủ chỗ, không làm card cao bất thường. */
  .tt-responsive-table .tt-mobile-paired-actions{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:.5rem;
    width:100%;
  }
  .tt-responsive-table .tt-mobile-paired-actions>.btn,
  .tt-responsive-table .tt-mobile-paired-actions>a.btn,
  .tt-responsive-table .tt-mobile-paired-actions>form{
    width:100%;
    min-width:0;
    margin:0!important;
  }
  .tt-responsive-table .tt-mobile-paired-actions>form>.btn{
    width:100%;
    min-width:0;
    min-height:44px;
  }
  .tt-responsive-table .tt-mobile-paired-actions>.btn,
  .tt-responsive-table .tt-mobile-paired-actions>a.btn{
    min-height:44px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  .tt-responsive-table .tt-mobile-paired-actions>span{
    grid-column:1/-1;
  }

  /* Tab trạng thái có thể cuộn ngang nội bộ; không tạo overflow cho toàn trang. */
  .tt-status-tabs{
    flex-wrap:nowrap!important;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scrollbar-width:thin;
    padding-bottom:.2rem;
  }
  .tt-status-tabs>.btn{flex:0 0 auto}

  /* Filter comment: mỗi control có chiều rộng hữu dụng, không tạo "ô trống" do col-auto desktop. */
  .tt-filter-stack-mobile .row{
    display:grid;
    grid-template-columns:1fr;
    gap:.6rem;
  }
  .tt-filter-stack-mobile .row>[class*="col"]{
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
  }
  .tt-filter-stack-mobile .form-control,
  .tt-filter-stack-mobile .form-select{
    width:100%;
    min-width:0;
  }

  /* Shared File/Media có thể có action thứ ba; vẫn ưu tiên 2 cột cân đối, phần lẻ sang hàng sau. */
  #mediaResults .tt-mobile-paired-actions{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  #mediaResults .tt-mobile-paired-actions>.edit-media{grid-column:1;grid-row:1}
  #mediaResults .tt-mobile-paired-actions>.act-media[data-action="trash"]{grid-column:2;grid-row:1}
  #mediaResults .tt-mobile-paired-actions>.replace-media{grid-column:1/-1;grid-row:2}
}

@media(max-width:359.98px){
  .tt-responsive-table .tt-mobile-paired-actions{
    grid-template-columns:1fr;
  }
}