/* ========================================================================== 
   Teachers Live — PHASE 10 FIX8
   Teacher History Mobile Parity + Teacher Live Full Width
   FRONTEND ONLY — no backend/database/route/JaaS/OTP changes.
   Replaces the earlier FIX5 stylesheet intentionally to avoid stacked layers.
   ========================================================================== */

:root{
  --tl10f6-max:1240px;
  --tl10f6-side-desktop:34px;
  --tl10f6-side-tablet:20px;
  --tl10f6-side-mobile:10px;
}

/* --------------------------------------------------------------------------
   Shared portal width: Student + Teacher
   Desktop = clearly centered, tablet = reduced gutters, mobile = near full width.
   -------------------------------------------------------------------------- */
body.tl10-student .tl-portal-body,
body.tl10-teacher .tl-portal-body,
body[data-portal-role="student"] .tl-portal-body,
body[data-portal-role="teacher"] .tl-portal-body{
  overflow-x:clip;
}

body.tl10-student .tl10f6-portal-width,
body.tl10-teacher .tl10f6-portal-width,
body[data-portal-role="student"] .tl10f6-portal-width,
body[data-portal-role="teacher"] .tl10f6-portal-width,
body.tl10-student .tl-portal-body > .container,
body.tl10-student .tl-portal-body > .container-fluid,
body.tl10-student .tl-portal-body > .container-xl,
body.tl10-student .tl-portal-body > .container-xxl,
body.tl10-teacher .tl-portal-body > .container,
body.tl10-teacher .tl-portal-body > .container-fluid,
body.tl10-teacher .tl-portal-body > .container-xl,
body.tl10-teacher .tl-portal-body > .container-xxl{
  width:calc(100% - (var(--tl10f6-side-desktop) * 2))!important;
  max-width:var(--tl10f6-max)!important;
  margin-inline:auto!important;
  padding-inline:0!important;
}

/* Some pages render one extra wrapper under portal-body. Keep it aligned. */
.tl10f6-portal-width > .container,
.tl10f6-portal-width > .container-fluid,
.tl10f6-portal-width > .container-xl,
.tl10f6-portal-width > .container-xxl{
  width:100%!important;
  max-width:100%!important;
  margin-inline:auto!important;
  padding-inline:0!important;
}

/* Header/nav inner rhythm follows the same portal width without shrinking the bar background. */
.tl10f6-nav-inner{
  width:calc(100% - (var(--tl10f6-side-desktop) * 2))!important;
  max-width:var(--tl10f6-max)!important;
  margin-inline:auto!important;
}

/* --------------------------------------------------------------------------
   Teacher Subjects — exactly 3 cards per row on desktop + tablet.
   -------------------------------------------------------------------------- */
body.tl10f6-teacher-subjects .tl10f6-subject-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:1rem!important;
  width:100%!important;
  margin:0!important;
}
body.tl10f6-teacher-subjects .tl10f6-subject-grid > *{
  width:auto!important;
  max-width:none!important;
  min-width:0!important;
  flex:initial!important;
  padding:0!important;
  margin:0!important;
}
body.tl10f6-teacher-subjects .tl-subject-card{
  width:100%!important;
  height:100%!important;
  border-radius:22px!important;
  overflow:hidden!important;
  box-shadow:0 10px 30px rgba(4,23,39,.075)!important;
}
body.tl10f6-teacher-subjects .tl-subject-card img{
  width:100%!important;
  object-fit:contain!important;
  object-position:center!important;
}

/* --------------------------------------------------------------------------
   Teacher History — clean, self-contained table experience.
   -------------------------------------------------------------------------- */
body.tl10f6-teacher-history .tl-page-subtitle{max-width:760px}
body.tl10f6-teacher-history .tl10f6-history-shell{
  width:100%!important;
  min-width:0!important;
}
.tl10f6-history-tools{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  flex-wrap:wrap;
  margin:0 0 .85rem;
}
.tl10f6-history-search{
  position:relative;
  display:block;
  flex:1 1 280px;
  max-width:440px;
  margin:0;
}
.tl10f6-history-search input{
  width:100%;
  min-height:42px;
  border:1px solid rgba(4,31,52,.12);
  border-radius:12px;
  padding:.52rem .8rem;
  background:#fff;
  outline:none;
  font:inherit;
}
.tl10f6-history-search input:focus{
  border-color:rgba(8,123,100,.42);
  box-shadow:0 0 0 3px rgba(8,123,100,.08);
}
.tl10f6-history-size{
  display:flex;
  align-items:center;
  gap:.45rem;
  color:#6d7a88;
  font-size:.78rem;
  font-weight:800;
  margin:0;
}
.tl10f6-history-size select{
  min-height:40px;
  border:1px solid rgba(4,31,52,.12);
  border-radius:11px;
  background:#fff;
  padding:.3rem .6rem;
}
.tl10f6-history-scroll{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.tl10f6-history-table{
  width:100%!important;
  min-width:860px!important;
  margin:0!important;
}
.tl10f6-history-table th[data-tl10f6-sort]{
  cursor:pointer;
  user-select:none;
  white-space:nowrap;
}
.tl10f6-history-table th[data-tl10f6-sort]::after{
  content:"↕";
  margin-inline-start:.35rem;
  color:#a1abb5;
  font-size:.7rem;
}
.tl10f6-history-table th[data-sort-dir="asc"]::after{content:"↑";color:#087b64}
.tl10f6-history-table th[data-sort-dir="desc"]::after{content:"↓";color:#087b64}
.tl10f6-history-pagination{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.7rem;
  padding:.95rem .25rem .1rem;
}
.tl10f6-history-pagination button{
  min-height:36px;
  border:1px solid rgba(4,31,52,.10);
  border-radius:10px;
  background:#fff;
  color:#405064;
  padding:.35rem .78rem;
  font-size:.76rem;
  font-weight:850;
}
.tl10f6-history-pagination button:disabled{opacity:.4;cursor:default}
.tl10f6-history-pagination span{color:#748190;font-size:.76rem;font-weight:850}
.tl10f6-history-empty{padding:1.5rem;text-align:center;color:#7f8b98}

/* --------------------------------------------------------------------------
   Teacher Dashboard — regular/private lesson action is visually identical.
   -------------------------------------------------------------------------- */
body.tl10f6-teacher-dashboard .tl10f6-start-lesson{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:.45rem!important;
  min-width:108px!important;
  min-height:42px!important;
  padding:.5rem .9rem!important;
  border-radius:12px!important;
  color:#fff!important;
  background:linear-gradient(135deg,#087b64,#0aa27f)!important;
  border:0!important;
  box-shadow:0 7px 18px rgba(8,123,100,.18)!important;
  font-size:.8rem!important;
  font-weight:900!important;
  line-height:1.25!important;
  text-decoration:none!important;
  white-space:nowrap!important;
}
body.tl10f6-teacher-dashboard .tl10f6-start-lesson svg{
  width:17px!important;
  height:17px!important;
  flex:0 0 17px!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:1.9!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}

/* Live mode cleanup retained from FIX5. */
.tl10f6-live-hidden{display:none!important}

/* Clear logout icon retained globally. */
.tl10f6-logout-btn,
.tl10f5-logout-btn,
.tl10f4-logout-btn{
  display:inline-grid!important;
  place-items:center!important;
}
.tl10f6-logout-btn svg,
.tl10f5-logout-btn svg,
.tl10f4-logout-btn svg{
  width:21px!important;
  height:21px!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:1.9!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}


/* --------------------------------------------------------------------------
   FIX7 — Teacher History mobile = Student History card language.
   Reuses the exact Student History card classes already shipped in FIX4.
   -------------------------------------------------------------------------- */
.tl10f7-history-mobile{display:none}
.tl10f7-history-mobile .tl8e-history-row[hidden]{display:none!important}
.tl10f7-history-mobile .tl8e-history-row-main{
  min-width:0;
}
.tl10f7-history-mobile .tl8e-history-row-main > div{
  min-width:0;
}
.tl10f7-history-mobile .tl8e-history-row-main strong{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.tl10f7-history-mobile .tl8e-history-row-meta{
  flex-wrap:wrap;
}
.tl10f7-history-mobile .tl8e-history-row-actions{
  flex-wrap:wrap;
}
.tl10f7-history-mobile .tl8e-history-row-actions a,
.tl10f7-history-mobile .tl8e-history-row-actions button{
  text-decoration:none;
}

/* Teacher live is the only teacher page allowed to escape the centered portal max-width. */
body.tl10f7-teacher-live .tl10f6-portal-width,
body.tl10f7-teacher-live .tl-portal-body > .container,
body.tl10f7-teacher-live .tl-portal-body > .container-fluid,
body.tl10f7-teacher-live .tl-portal-body > .container-xl,
body.tl10f7-teacher-live .tl-portal-body > .container-xxl{
  width:100%!important;
  max-width:none!important;
  margin-inline:0!important;
  padding-inline:0!important;
}
body.tl10f7-teacher-live .tl10f6-portal-width > .container,
body.tl10f7-teacher-live .tl10f6-portal-width > .container-fluid,
body.tl10f7-teacher-live .tl10f6-portal-width > .container-xl,
body.tl10f7-teacher-live .tl10f6-portal-width > .container-xxl{
  width:100%!important;
  max-width:none!important;
  margin-inline:0!important;
  padding-inline:0!important;
}
body.tl10f7-teacher-live .tl-teacher-classroom,
body.tl10f7-teacher-live .tl-student-classroom,
body.tl10f7-teacher-live .tl-jaas-frame{
  width:100%!important;
  max-width:none!important;
}

@media(max-width:1199.98px){
  body.tl10-student .tl10f6-portal-width,
  body.tl10-teacher .tl10f6-portal-width,
  body[data-portal-role="student"] .tl10f6-portal-width,
  body[data-portal-role="teacher"] .tl10f6-portal-width,
  body.tl10-student .tl-portal-body > .container,
  body.tl10-student .tl-portal-body > .container-fluid,
  body.tl10-student .tl-portal-body > .container-xl,
  body.tl10-student .tl-portal-body > .container-xxl,
  body.tl10-teacher .tl-portal-body > .container,
  body.tl10-teacher .tl-portal-body > .container-fluid,
  body.tl10-teacher .tl-portal-body > .container-xl,
  body.tl10-teacher .tl-portal-body > .container-xxl,
  .tl10f6-nav-inner{
    width:calc(100% - (var(--tl10f6-side-tablet) * 2))!important;
  }
}

@media(min-width:768px) and (max-width:1199.98px){
  body.tl10f6-teacher-subjects .tl10f6-subject-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:.8rem!important;
  }
}

@media(max-width:767.98px){
  body.tl10-student .tl10f6-portal-width,
  body.tl10-teacher .tl10f6-portal-width,
  body[data-portal-role="student"] .tl10f6-portal-width,
  body[data-portal-role="teacher"] .tl10f6-portal-width,
  body.tl10-student .tl-portal-body > .container,
  body.tl10-student .tl-portal-body > .container-fluid,
  body.tl10-student .tl-portal-body > .container-xl,
  body.tl10-student .tl-portal-body > .container-xxl,
  body.tl10-teacher .tl-portal-body > .container,
  body.tl10-teacher .tl-portal-body > .container-fluid,
  body.tl10-teacher .tl-portal-body > .container-xl,
  body.tl10-teacher .tl-portal-body > .container-xxl,
  .tl10f6-nav-inner{
    width:calc(100% - (var(--tl10f6-side-mobile) * 2))!important;
    max-width:none!important;
  }

  body.tl10f6-teacher-subjects .tl10f6-subject-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:.65rem!important;
  }

  /* History header: intentionally compact and calm on phone. */
  body.tl10f6-teacher-history .tl-page-subtitle{display:none!important}
  body.tl10f6-teacher-history .tl-hero{
    min-height:0!important;
    padding:.9rem 1rem!important;
    margin-bottom:.75rem!important;
    border-radius:18px!important;
  }
  body.tl10f6-teacher-history .tl-hero h1,
  body.tl10f6-teacher-history .tl-hero h2{
    margin:0!important;
    font-size:1.28rem!important;
    line-height:1.3!important;
  }
  body.tl10f6-teacher-history .tl-hero .btn,
  body.tl10f6-teacher-history .tl-hero .badge,
  body.tl10f6-teacher-history .tl-hero small:not(:first-child){
    display:none!important;
  }

  /* FIX7: Teacher History uses real Student-style mobile cards instead of
     forcing table cells into cards. */
  body.tl10f6-teacher-history .tl10f6-history-tools{
    align-items:stretch;
    gap:.55rem;
  }
  body.tl10f6-teacher-history .tl10f6-history-search{
    max-width:none;
    flex-basis:100%;
  }
  body.tl10f6-teacher-history .tl10f6-history-size{
    margin-inline-start:auto;
  }
  body.tl10f6-teacher-history .tl10f6-history-scroll{
    display:none!important;
  }
  body.tl10f6-teacher-history .tl10f7-history-mobile{
    display:grid!important;
    gap:.65rem;
  }
  body.tl10f6-teacher-history .tl10f6-history-pagination{
    padding-top:.75rem;
  }
}

@media(max-width:420px){
  body.tl10f6-teacher-subjects .tl10f6-subject-grid{
    grid-template-columns:1fr!important;
  }
}


/* --------------------------------------------------------------------------
   PHASE 10 FIX8 — Teacher History exact Student/History visual parity
   -------------------------------------------------------------------------- */
body.tl10f8-teacher-history-parity .tl10f8-old-history-hidden,
body.tl10f8-teacher-history-parity .tl10f8-history-source-shell{
  display:none!important;
}
body.tl10f8-teacher-history-parity .tl10f8-teacher-history-parity{
  display:block!important;
}
body.tl10f8-teacher-history-parity .tl10f4-history-table-wrap{
  overflow-x:auto;
}
body.tl10f8-teacher-history-parity .tl10f4-history-mobile{
  display:none;
}
body.tl10f8-teacher-history-parity .tl10f4-history-mobile .tl8e-history-row{
  width:100%;
}
body.tl10f8-teacher-history-parity .tl10f4-history-mobile .tl8e-history-row-main > div{
  min-width:0;
}
body.tl10f8-teacher-history-parity .tl10f4-history-mobile .tl8e-history-row-main strong{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
body.tl10f8-teacher-history-parity .tl10f4-history-mobile .tl8e-history-row-meta,
body.tl10f8-teacher-history-parity .tl10f4-history-mobile .tl8e-history-row-actions{
  flex-wrap:wrap;
}
body.tl10f8-teacher-history-parity .tl10f4-history-mobile .tl8e-history-row-actions a,
body.tl10f8-teacher-history-parity .tl10f4-history-mobile .tl8e-history-row-actions button{
  text-decoration:none;
}
@media(max-width:575.98px){
  body.tl10f8-teacher-history-parity .tl10f4-student-page{
    padding:.9rem .85rem 118px!important;
  }
  body.tl10f8-teacher-history-parity .tl10f4-history-mobile{
    display:grid!important;
    gap:.65rem;
    padding:.75rem;
  }
  body.tl10f8-teacher-history-parity .tl10f4-history-mobile .tl8e-history-row{
    margin:0!important;
  }
}