/* TeachersLiveV2 — PHASE 8E Premium UI
   Pure presentation layer. No workflow/business logic changes. */

:root{
  --tlp-navy:#081b33;
  --tlp-navy-2:#0d2a4d;
  --tlp-green:#0d6b50;
  --tlp-green-2:#0a5a43;
  --tlp-gold:#d3aa3f;
  --tlp-gold-2:#b98b1d;
  --tlp-surface:#ffffff;
  --tlp-bg:#f5f7f9;
  --tlp-text:#132033;
  --tlp-muted:#748094;
  --tlp-border:#e5e9ee;
  --tlp-shadow:0 12px 36px rgba(8,27,51,.08);
  --tlp-shadow-lg:0 24px 65px rgba(8,27,51,.14);
  --tlp-radius:20px;
  --tlp-ease:cubic-bezier(.2,.8,.2,1);
}

html{scroll-behavior:smooth}
body.tl-body{
  background:
    radial-gradient(circle at 88% -12%,rgba(211,170,63,.09),transparent 28rem),
    linear-gradient(180deg,#f9fbfc 0,#f4f7f8 100%);
  color:var(--tlp-text);
}

/* ---------- ICON SYSTEM ---------- */
.tl-icon-svg{
  width:1.05rem;height:1.05rem;display:inline-block;flex:0 0 auto;
  stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;
  fill:none;vertical-align:-.15em;
}
.tl-nav-glyph .tl-icon-svg{width:17px;height:17px}
.tl8f-chevron .tl-icon-svg{width:15px;height:15px}
.tl-btn-icon{display:inline-grid;place-items:center;flex:0 0 auto}
.tl-btn-icon .tl-icon-svg{width:16px;height:16px}
.tl-stat .icon .tl-icon-svg{width:18px;height:18px}

/* ---------- CARDS / SURFACES ---------- */
.tl-card,.tl-stat,.tl-class-card,.tl-subject-card{
  border-color:rgba(8,27,51,.075)!important;
  box-shadow:0 8px 30px rgba(8,27,51,.055)!important;
  transition:transform .24s var(--tlp-ease),box-shadow .24s var(--tlp-ease),border-color .24s ease;
}
.tl-card{
  border-radius:22px!important;
  overflow:hidden;
  background:rgba(255,255,255,.96)!important;
}
.tl-card:hover{box-shadow:0 14px 38px rgba(8,27,51,.075)!important}
.tl-card-header{
  background:linear-gradient(180deg,#fff,#fcfdfd);
  border-bottom-color:#edf0f3!important;
}
.tl-card-header strong,.text-navy{letter-spacing:-.01em}

.tl-stat{
  min-height:116px;
  border-radius:20px!important;
  background:
    radial-gradient(circle at 8% 10%,rgba(211,170,63,.12),transparent 35%),
    #fff!important;
}
.tl-stat:before{
  content:"";position:absolute;inset-inline-start:0;top:18px;bottom:18px;width:3px;
  border-radius:5px;background:linear-gradient(180deg,var(--tlp-gold),rgba(211,170,63,.15));
}
.tl-stat:after{opacity:.58}
.tl-stat .value{font-variant-numeric:tabular-nums;letter-spacing:-.04em}
.tl-stat .icon{
  color:var(--tlp-green)!important;background:#edf7f3!important;
  border:1px solid #dcefe8;
}

.tl-class-card{border-radius:20px!important}
.tl-class-card:hover,.tl-subject-card:hover{
  transform:translateY(-2px);
  border-color:rgba(211,170,63,.5)!important;
  box-shadow:0 16px 38px rgba(8,27,51,.085)!important;
}

/* ---------- PAGE HEADINGS ---------- */
.tl-page-head{margin-bottom:1.65rem!important}
.tl-page-title{
  letter-spacing:-.035em;
  font-weight:900!important;
  color:var(--tlp-navy)!important;
}
.tl-page-subtitle{max-width:780px;line-height:1.85}
.tl-kicker{
  display:inline-flex;align-items:center;gap:.45rem;
  color:var(--tlp-green)!important;font-weight:800!important;letter-spacing:.04em!important;
}
.tl-kicker:before{
  content:"";width:18px;height:3px;border-radius:99px;background:var(--tlp-gold);
}

/* ---------- BUTTONS ---------- */
.btn,.tl8e-page-action,.tl8e-small-link{
  border-radius:12px!important;
  font-weight:750;
  transition:
    transform .16s var(--tlp-ease),
    box-shadow .18s ease,
    background-color .18s ease,
    border-color .18s ease,
    color .18s ease!important;
}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem}
.btn:hover,.tl8e-page-action:hover,.tl8e-small-link:hover{transform:translateY(-1px)}
.btn:active,.tl8e-page-action:active,.tl8e-small-link:active{transform:translateY(0) scale(.985)}

.btn-primary{
  --bs-btn-bg:var(--tlp-green);
  --bs-btn-border-color:var(--tlp-green);
  --bs-btn-hover-bg:var(--tlp-green-2);
  --bs-btn-hover-border-color:var(--tlp-green-2);
  --bs-btn-active-bg:#084f3b;
  box-shadow:0 7px 18px rgba(13,107,80,.18);
}
.btn-primary:hover{box-shadow:0 11px 25px rgba(13,107,80,.24)}
.btn-success{box-shadow:0 7px 18px rgba(25,135,84,.14)}
.btn-danger,.btn-outline-danger:hover{box-shadow:0 6px 16px rgba(190,44,58,.10)}
.btn-warning{color:#4b3700!important;font-weight:800}
.btn-light{
  background:#fff!important;border-color:#e3e8ed!important;color:#314054!important;
}
.btn-light:hover{background:#f8fafb!important;border-color:#d7dde4!important}

.tl8e-page-action{
  min-height:42px!important;padding:.55rem .85rem!important;
  box-shadow:0 5px 16px rgba(8,27,51,.05)!important;
}
.tl8e-page-action>span:first-child{
  background:#edf7f3!important;color:var(--tlp-green)!important;
}

/* ---------- FORMS ---------- */
.form-control,.form-select{
  border-radius:13px!important;
  border-color:#dfe5ea!important;
  background-color:#fff;
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.form-control:hover,.form-select:hover{border-color:#cbd4dd!important}
.form-control:focus,.form-select:focus{
  border-color:rgba(13,107,80,.58)!important;
  box-shadow:0 0 0 .23rem rgba(13,107,80,.095)!important;
}
.form-label{color:#3b4858;font-size:.82rem}
.input-group>.btn{border-radius:12px}

/* ---------- TABLES ---------- */
.table thead th{
  background:#f7f9fa!important;
  color:#667286!important;
  text-transform:none;
  font-weight:800;
  padding-top:.8rem;padding-bottom:.8rem;
}
.table tbody td{padding-top:.78rem;padding-bottom:.78rem}
.table-hover tbody tr{transition:background-color .16s ease}
.table-hover tbody tr:hover>*{--bs-table-bg-state:#f7faf9!important}
.table-responsive{scrollbar-width:thin;scrollbar-color:#ccd5dd transparent}

/* ---------- BADGES / STATUS ---------- */
.badge{font-weight:750;letter-spacing:0;border-radius:999px!important}
.tl-status-live{
  background:#e7f8ef!important;color:#087447!important;
  box-shadow:inset 0 0 0 1px rgba(8,116,71,.08);
}
.tl-status-live:before{
  content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:#19a765;margin-inline-end:.35rem;
  box-shadow:0 0 0 4px rgba(25,167,101,.10);
}

/* ---------- ADMIN ---------- */
.tl-sidebar{
  background:
    radial-gradient(circle at 20% 0,rgba(211,170,63,.17),transparent 22rem),
    linear-gradient(180deg,#0a213a 0%,#07182c 62%,#061523 100%)!important;
  box-shadow:-8px 0 35px rgba(4,18,33,.08);
}
.tl-sidebar-brand{padding-top:.45rem!important}
.tl-sidebar-label{
  color:rgba(255,255,255,.42)!important;
  text-transform:uppercase;letter-spacing:.08em
}
.tl8f-nav-group{
  border-color:rgba(255,255,255,.07)!important;
  background:rgba(255,255,255,.025)!important;
  transition:border-color .18s ease,background .18s ease;
}
.tl8f-nav-group[open]{
  border-color:rgba(211,170,63,.18)!important;
  background:rgba(255,255,255,.035)!important;
}
.tl8f-nav-group>summary{border-radius:13px}
.tl-sidebar-nav .nav-link{
  position:relative;
  border-radius:11px!important;
  transition:background .18s ease,color .18s ease,transform .18s ease!important;
}
.tl-sidebar-nav .nav-link:hover{transform:translateX(-2px)}
.tl-sidebar-nav .nav-link.active{
  background:linear-gradient(90deg,rgba(211,170,63,.16),rgba(255,255,255,.07))!important;
  box-shadow:inset -3px 0 0 var(--tlp-gold),0 5px 16px rgba(0,0,0,.08)!important;
}
.tl-nav-glyph{
  display:grid!important;place-items:center!important;
  width:32px!important;height:32px!important;min-width:32px!important;
  border-radius:10px!important;
  background:rgba(255,255,255,.06)!important;
  color:rgba(255,255,255,.82)!important;
}
.nav-link.active .tl-nav-glyph,
.tl8f-nav-group[data-active="1"]>summary .tl-nav-glyph{
  color:#ffe99b!important;background:rgba(211,170,63,.12)!important;
}
.tl8f-chevron{font-size:0!important}
.tl-topbar{
  height:76px!important;
  background:rgba(255,255,255,.86)!important;
  backdrop-filter:blur(20px) saturate(1.2)!important;
  border-bottom-color:rgba(8,27,51,.07)!important;
  box-shadow:0 3px 20px rgba(8,27,51,.035);
}
.tl-topbar-kicker{color:var(--tlp-green)!important;font-weight:800}
.tl-online-dot{
  box-shadow:0 0 0 5px rgba(25,167,101,.10);
}

/* ---------- ADMIN DASHBOARD QUICK LINKS ---------- */
.tl-quick-link{
  min-height:58px;
  border-radius:16px!important;
  box-shadow:0 5px 18px rgba(8,27,51,.035);
  transition:transform .2s var(--tlp-ease),box-shadow .2s ease,border-color .2s ease!important;
}
.tl-quick-link:hover{
  transform:translateY(-2px)!important;
  box-shadow:0 12px 28px rgba(8,27,51,.08)!important;
  border-color:rgba(211,170,63,.42)!important;
}
.tl-quick-link .arrow{font-size:0!important}
.tl-quick-link .arrow .tl-icon-svg{width:18px;height:18px;color:var(--tlp-gold)}

/* ---------- PORTAL NAV ---------- */
.tl-portal-nav{
  background:rgba(255,255,255,.87)!important;
  backdrop-filter:blur(20px) saturate(1.15);
  border-bottom-color:rgba(8,27,51,.07)!important;
  box-shadow:0 5px 24px rgba(8,27,51,.045)!important;
}
.tl8d-desktop-links .nav-link{
  border-radius:11px!important;
  padding:.55rem .8rem!important;
  display:flex;align-items:center;gap:.4rem;
}
.tl8d-desktop-links .nav-link.active{
  color:var(--tlp-green)!important;
  background:#edf7f3!important;
  box-shadow:inset 0 0 0 1px rgba(13,107,80,.08);
}
.tl8d-mobile-menu summary{
  border:1px solid #e2e7eb;
  background:#fff;
  border-radius:12px!important;
  box-shadow:0 5px 16px rgba(8,27,51,.055);
}
.tl8d-mobile-links a{
  display:flex!important;align-items:center;gap:.65rem;
  border-radius:12px!important;
}

/* ---------- HERO / PORTAL ---------- */
.tl-hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:
    radial-gradient(circle at 12% 12%,rgba(255,225,137,.18),transparent 25rem),
    radial-gradient(circle at 90% 90%,rgba(13,107,80,.32),transparent 28rem),
    linear-gradient(135deg,#081b33 0%,#0e3152 100%)!important;
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 18px 44px rgba(8,27,51,.15)!important;
}
.tl-hero:after{
  content:"";position:absolute;inset:auto -70px -95px auto;
  width:250px;height:250px;border-radius:50%;
  border:1px solid rgba(255,255,255,.08);z-index:-1;
}
.tl-hero h1,.tl-hero .display-5{letter-spacing:-.04em}
.tl-subject-card{
  background:linear-gradient(180deg,#fff,#fbfcfc)!important;
}

/* ---------- AUTH ---------- */
.tl-auth-layout{
  background:
    radial-gradient(circle at 78% 10%,rgba(211,170,63,.08),transparent 24rem),
    #f6f8f9!important;
}
.tl-auth-visual{
  background:
    radial-gradient(circle at 20% 20%,rgba(211,170,63,.20),transparent 18rem),
    radial-gradient(circle at 85% 80%,rgba(13,107,80,.35),transparent 24rem),
    linear-gradient(145deg,#07182c,#0b2b4d)!important;
}
.tl-auth-card{
  border-radius:26px!important;
  border:1px solid rgba(8,27,51,.07)!important;
  box-shadow:var(--tlp-shadow-lg)!important;
}
.tl-auth-title{letter-spacing:-.035em}
.tl-auth-copy h1{letter-spacing:-.05em}
.tl-orbit{
  border-color:rgba(255,255,255,.09)!important;
  animation:tlp-float 8s ease-in-out infinite;
}
.tl-orbit-2{animation-delay:-2.5s}
.tl-orbit-3{animation-delay:-5s}

/* ---------- EMPTY STATES / ALERTS ---------- */
.tl-empty{
  border-radius:18px;
  background:linear-gradient(180deg,#fbfcfd,#f7f9fa);
}
.tl-empty-icon{
  color:var(--tlp-green)!important;
  background:#edf7f3!important;
  border:1px solid #d9ece5;
}
.alert{
  border-radius:14px!important;
  border-width:1px!important;
  box-shadow:0 5px 20px rgba(8,27,51,.04);
}
.alert-danger{background:#fff2f3!important;border-color:#f5c9cf!important}
.alert-success{background:#ecf8f2!important;border-color:#ccebdd!important}
.alert-warning{background:#fff8e5!important;border-color:#f1dfaa!important}

/* ---------- SUBJECT IMAGES ---------- */
.tl8e-subject-image,.tl8e-admin-subject-thumb,.tl8e-teacher-subject-thumb{
  transition:transform .3s var(--tlp-ease),filter .3s ease;
}
.tl8e-subject-card:hover .tl8e-subject-image{transform:scale(1.025)}
.tl8e-subject-main-link{overflow:hidden;border-radius:14px}

/* ---------- MOTION ---------- */
html.tl-motion-ready .tl-reveal{
  opacity:0;
  transform:translateY(12px);
}
html.tl-motion-ready .tl-reveal.tl-visible{
  opacity:1;
  transform:none;
  transition:opacity .42s var(--tlp-ease),transform .42s var(--tlp-ease);
}
.tl-ripple-host{position:relative;overflow:hidden}
.tl-ripple{
  position:absolute;border-radius:50%;pointer-events:none;
  background:rgba(255,255,255,.45);
  transform:translate(-50%,-50%) scale(0);
  animation:tlp-ripple .48s ease-out forwards;
}
.btn-light .tl-ripple,.btn-outline-primary .tl-ripple,.tl8e-page-action .tl-ripple{
  background:rgba(13,107,80,.12);
}
@keyframes tlp-ripple{to{transform:translate(-50%,-50%) scale(1);opacity:0}}
@keyframes tlp-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

/* ---------- MOBILE ---------- */
@media(max-width:767.98px){
  .tl-page-title{font-size:1.55rem!important}
  .tl-page-head{gap:.8rem!important}
  .tl-card{border-radius:18px!important}
  .tl-stat{border-radius:16px!important}
  .tl-hero{border-radius:20px!important;padding:1.15rem!important}
  .tl-topbar{height:66px!important}
  .btn{min-height:38px}
  .tl8d-mobile-panel{
    border:1px solid rgba(8,27,51,.08);
    box-shadow:0 18px 45px rgba(8,27,51,.14)!important;
    border-radius:18px!important;
  }
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    scroll-behavior:auto!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  html.tl-motion-ready .tl-reveal{opacity:1!important;transform:none!important}
}