/* PHASE 8D — Student/Teacher UX, subject images, errors */

/* All explicit error messages */
.alert-danger,.tl8e-login-message.alert-danger{
  background:#fff0f1!important;
  color:#a31322!important;
  border:1px solid #f2b9c0!important;
  font-weight:700
}
.tl8e-flash-wrap{
  position:fixed;
  top:1rem;
  left:50%;
  transform:translateX(-50%);
  width:min(680px,calc(100vw - 2rem));
  z-index:2500
}
.tl8e-flash{margin:0;border-radius:14px}

/* Navigation action buttons */
.tl8e-page-action{
  display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  min-height:42px;padding:.55rem .85rem;border:1px solid var(--tl-border);
  border-radius:13px;background:#fff;color:var(--tl-green);text-decoration:none;
  font-size:.82rem;box-shadow:0 4px 14px rgba(15,95,74,.04)
}
.tl8e-page-action:hover{background:#f5faf7;color:var(--tl-green)}
.tl8e-page-action span{width:24px;height:24px;display:grid;place-items:center;border-radius:8px;background:#eef7f3}
.tl8e-page-action-sm{min-height:36px;padding:.38rem .65rem;font-size:.75rem}
.tl8e-history-actions{display:flex;gap:.55rem;flex-wrap:wrap}

/* Subject images */
.tl8e-admin-subject-thumb,.tl8e-teacher-subject-thumb{
  width:54px;height:54px;object-fit:cover;border-radius:14px;border:1px solid var(--tl-border);background:#f5f7f5
}
.tl8e-admin-subject-placeholder,.tl8e-teacher-subject-placeholder,.tl8e-subject-placeholder,.tl8e-subject-image-placeholder{
  display:grid;place-items:center;background:linear-gradient(135deg,#eef7f3,#fff2c8);
  color:var(--tl-green);font-weight:900;border:1px solid var(--tl-border)
}
.tl8e-admin-subject-placeholder,.tl8e-teacher-subject-placeholder{width:54px;height:54px;border-radius:14px}
.tl8e-dashboard-subjects{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem!important}
.tl8e-dashboard-subject{
  min-width:0;display:flex;align-items:center;gap:.6rem;padding:.65rem;
  border:1px solid var(--tl-border);border-radius:14px;text-decoration:none;background:#fff;color:var(--tl-green)
}
.tl8e-dashboard-subject img,.tl8e-subject-placeholder{width:44px;height:44px;border-radius:11px;object-fit:cover;flex:0 0 auto}
.tl8e-dashboard-subject strong{min-width:0;font-size:.82rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tl8e-subject-card{padding:.8rem!important;display:flex!important;flex-direction:column!important;gap:.55rem!important}
.tl8e-subject-main-link{display:block;text-decoration:none}
.tl8e-subject-image,.tl8e-subject-image-placeholder{width:100%;aspect-ratio:16/10;border-radius:14px;object-fit:cover}
.tl8e-subject-actions{margin-top:auto}
.tl8e-small-link{
  display:inline-flex;justify-content:center;align-items:center;width:100%;
  min-height:34px;padding:.35rem .55rem;border:1px solid var(--tl-green);
  border-radius:10px;color:var(--tl-green);text-decoration:none;font-size:.72rem;font-weight:700
}

/* Four KPI cards on one mobile row */
.tl8e-history-stats>.col-3{min-width:0}
.tl8e-history-stats .tl-stat{min-height:102px!important;padding:.75rem!important}
.tl8e-history-stats .tl-stat .value{font-size:1.45rem!important;max-width:100%!important}
.tl8e-history-stats .tl-stat .label{font-size:.66rem!important;line-height:1.35!important}
.tl8e-history-stats .tl-stat .icon{display:none!important}

/* Student mobile history: no giant horizontal table */
.tl8e-history-list{display:grid;gap:.7rem;padding:1rem}
.tl8e-history-row{
  border:1px solid var(--tl-border);border-radius:15px;background:#fff;padding:.85rem
}
.tl8e-history-row-main{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem}
.tl8e-history-row-main strong,.tl8e-history-row-main small{display:block}
.tl8e-history-row-main strong{color:var(--tl-green)}
.tl8e-history-row-main small{color:var(--tl-muted);font-size:.7rem;margin-top:.15rem}
.tl8e-history-row-meta{display:flex;gap:.45rem;flex-wrap:wrap;margin-top:.65rem}
.tl8e-history-row-meta span{background:#f5f7f5;border-radius:999px;padding:.25rem .5rem;font-size:.68rem;color:var(--tl-muted)}
.tl8e-history-row-actions{display:flex;gap:.5rem;margin-top:.65rem}
.tl8e-history-row-actions a{flex:1;text-align:center;padding:.35rem;border:1px solid var(--tl-green);border-radius:9px;text-decoration:none;color:var(--tl-green);font-size:.72rem;font-weight:700}

/* Teacher today's classes compact on phones */
.tl8e-teacher-class-title{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap}
.tl8e-teacher-class-title strong{color:var(--tl-green);font-size:1rem}
.tl8e-teacher-class-title span{font-size:.72rem;color:var(--tl-muted);background:#f5f7f5;border-radius:999px;padding:.2rem .45rem}

@media(max-width:575.98px){
  .tl-page-head .tl8e-history-actions{display:grid!important;grid-template-columns:1fr 1fr!important;width:100%}
  .tl-page-head .tl8e-history-actions .tl8e-page-action{width:100%}
  .tl8e-page-action{min-height:38px;padding:.45rem .6rem}
  .tl8e-page-action-sm{width:auto!important}

  .tl8e-dashboard-subjects{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tl8e-dashboard-subject{padding:.5rem;gap:.4rem}
  .tl8e-dashboard-subject img,.tl8e-subject-placeholder{width:34px;height:34px}
  .tl8e-dashboard-subject strong{font-size:.72rem}

  .tl8e-subject-card{padding:.6rem!important;border-radius:16px!important}
  .tl8e-subject-card h3{font-size:.88rem!important}
  .tl8e-subject-card .text-secondary{font-size:.7rem!important;margin-bottom:.45rem!important}
  .tl8e-subject-image,.tl8e-subject-image-placeholder{aspect-ratio:1/1}
  .tl8e-small-link{font-size:.66rem;padding:.3rem}

  .tl8e-history-stats{flex-wrap:nowrap!important}
  .tl8e-history-stats>.col-3{width:25%!important;flex:0 0 25%!important;padding-inline:.22rem!important}
  .tl8e-history-stats .tl-stat{min-height:88px!important;padding:.5rem .3rem!important;border-radius:15px!important}
  .tl8e-history-stats .tl-stat .value{font-size:1.2rem!important}
  .tl8e-history-stats .tl-stat .label{font-size:.56rem!important}

  .tl8e-teacher-today{
    grid-template-columns:84px minmax(0,1fr) auto!important;
    gap:.4rem .55rem!important;
    padding:.7rem!important
  }
  .tl8e-teacher-today .tl-time{font-size:.72rem!important}
  .tl8e-teacher-today>div:nth-child(4){grid-column:1/-1!important}
  .tl8e-teacher-today>div:nth-child(4) .btn,.tl8e-teacher-today>div:nth-child(4) form{flex:1 1 auto}
  .tl8e-teacher-today>div:nth-child(4) form .btn{width:100%}
}