/* Teacher Shell uses rc-theme.css as base — aliases for backward compat */
:root{
  --tc-topbar-h:56px;
  --tc-rail-w:64px;
  --tc-side-w:260px;

  /* Aliases to rc-theme tokens */
  --tc-text: var(--rc-ink);
  --tc-muted: var(--rc-ink-dim);
  --tc-border: var(--rc-border);
  --tc-glass: var(--rc-glass);

  /* Emerald accent at 70% opacity for active nav left border */
  --tc-nav-active-accent: rgba(34, 197, 94, 0.7);
}

.tc-app{min-height:100vh;display:flex;flex-direction:column}

.tc-topbar{
  height:var(--tc-topbar-h);
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 12px;
  position:sticky;
  top:0;
  z-index:50;

  color: var(--tc-text);
  background: rgba(14,18,20,.88);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--tc-border);
}

.tc-topbar .tc-btn{
  border:0;
  background:transparent;
  color: var(--tc-text);
  font-size:18px;
  cursor:pointer;
  padding:8px;
  border-radius:10px;
}

.tc-topbar .tc-btn:hover{background:rgba(255,255,255,.08)}
.tc-topbar .tc-title{
  font-weight:800;
  letter-spacing:.2px;
  opacity:.98;
}

.tc-shell{
  display:flex;
  min-height:calc(100vh - var(--tc-topbar-h));
}

.tc-sidebar{
  width:var(--tc-side-w);
  border-right:1px solid var(--tc-border);
  background: rgba(10,12,16,.66);
  backdrop-filter: blur(10px);
  transition: width 0.2s ease, transform 0.25s ease;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: calc(100vh - var(--tc-topbar-h));
  overflow-y: auto;
  position: sticky;
  top: var(--tc-topbar-h);
}

.tc-sidebar::-webkit-scrollbar{width:4px}
.tc-sidebar::-webkit-scrollbar-track{background:transparent}
.tc-sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:4px}
.tc-sidebar::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.28)}

.tc-nav{display:flex;flex-direction:column;padding:10px;gap:6px}
.tc-nav a{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px;
  border-radius:12px;
  color:var(--tc-text);
  text-decoration:none;
  opacity:.92;
  border-left:2px solid transparent;
  transition: background 0.2s ease, transform 0.15s ease, opacity 0.15s ease, border-color 0.2s ease;
}
.tc-nav a:hover{background:rgba(255,255,255,.07);transform:translateX(2px);opacity:1}
.tc-nav a[aria-current="page"]{
  background:rgba(255,255,255,.10);
  border-left-color:var(--tc-nav-active-accent);
  opacity:1;
}
.tc-icon{width:28px;display:inline-flex;justify-content:center;flex-shrink:0}

/* Section divider before utility/data pages */
.tc-nav a[data-href="/teacher/data/"]{
  margin-top:8px;
  position:relative;
}
.tc-nav a[data-href="/teacher/data/"]::before{
  content:'';
  position:absolute;
  top:-7px;
  left:6px;
  right:6px;
  height:1px;
  background:rgba(255,255,255,.10);
  pointer-events:none;
}

.tc-main{
  flex:1;
  margin:16px;
  padding:18px;
  border-radius:18px;
  background: var(--tc-glass);
  border:1px solid var(--tc-border);
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
}

.tc-main h1{
  margin:0 0 10px;
  font-size:38px;
  line-height:1.05;
  letter-spacing:-0.02em;
  font-weight:850;
  color: var(--tc-text);
}

.tc-main p{
  margin:0;
  max-width:72ch;
  line-height:1.45;
  color: var(--tc-muted);
}

html.tc-collapsed .tc-sidebar{width:var(--tc-rail-w)}
html.tc-collapsed .tc-label{display:none}
html.tc-collapsed .tc-nav a{justify-content:center;border-left-color:transparent}
html.tc-collapsed .tc-nav a:hover{transform:none}
html.tc-collapsed .tc-nav a[data-href="/teacher/data/"]{margin-top:8px}
html.tc-collapsed .tc-nav a[data-href="/teacher/data/"]::before{display:none}


/* SAFETY: hide stray file inputs */
.tc-shell input[type="file"]{
  position: fixed !important;
  left: -9999px !important;
  top: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}



/* --- Teacher Shell: UI patches --- */

/* Deploy Preview annoyance: hide Netlify/app iframe injected by extensions (CSP-blocked -> white box) */
iframe[src*="app.netlify.com"]{
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}


/* Teacher: Students module */
.tc-card{
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  background: rgba(0,0,0,.25);
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
}
.tc-students{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:14px;
  min-height: calc(100vh - 110px);
}
.tc-students__toolbar{
  display:flex;
  gap:12px;
  align-items:end;
  justify-content:space-between;
  padding:14px 14px 10px;
}
.tc-field__label{ font-size:12px; opacity:.85; display:block; margin:0 0 6px; }
.tc-input{
  width:320px;
  max-width:52vw;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  color: var(--tc-text);
  outline:none;
}
.tc-table-wrap{ overflow:auto; border-top: 1px solid rgba(255,255,255,.06); }
.tc-table{ width:100%; border-collapse:collapse; }
.tc-table th, .tc-table td{ padding:11px 14px; text-align:left; }
.tc-table thead th{
  position:sticky; top:0;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.10);
  font-size:12px;
  letter-spacing:.02em;
  text-transform:uppercase;
  color: rgba(255,255,255,.78);
}
.tc-table tbody tr{ cursor:pointer; border-bottom: 1px solid rgba(255,255,255,.06); }
.tc-table tbody tr:hover{ background: rgba(255,255,255,.04); }
.tc-row--active{ background: rgba(56,255,166,.08); }
.tc-h2{ margin:6px 0 10px; font-size:22px; letter-spacing:-0.01em; }
.tc-kicker{ font-size:12px; opacity:.75; letter-spacing:.06em; text-transform:uppercase; }
.tc-label-sm{ font-size:12px; opacity:.75; margin-bottom:4px; }
.tc-value{ font-size:14px; }
.tc-detail-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:12px 18px; margin-top:10px; }
.tc-divider{ height:1px; background: rgba(255,255,255,.08); margin:14px 0; }
@media (max-width:1100px){
  .tc-students{ grid-template-columns:1fr; }
  .tc-input{ width:100%; max-width:100%; }
}

/* ---- RC: allow visible file inputs where explicitly opted-in ---- */
.tc-shell input[type="file"].tc-file-input{
  opacity: 1 !important;
  display: block !important;
  position: static !important;
  width: 100% !important;
  height: auto !important;
  clip: auto !important;
  clip-path: none !important;
  pointer-events: auto !important;
}

/* ── Ungraded submissions badge on Review nav link ── */
.tc-badge {
  background: #ef4444;
  color: white;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 10px;
  margin-left: auto;
  line-height: 1.4;
  flex-shrink: 0;
}

/* ── Mobile responsive: sidebar becomes off-canvas overlay ── */
/* Note: breakpoint matches MOBILE_BREAKPOINT in public-shell.js */
@media (max-width: 768px) {
  .tc-sidebar {
    position: fixed;
    top: var(--tc-topbar-h);
    left: 0;
    bottom: 0;
    z-index: 40;
    width: var(--tc-side-w);
    transform: translateX(-100%);
    transition: transform 0.25s ease;
  }

  /* Sidebar visible when html does NOT have tc-collapsed */
  html:not(.tc-collapsed) .tc-sidebar {
    transform: translateX(0);
  }

  /* Keep labels visible when sidebar is open on mobile */
  html:not(.tc-collapsed) .tc-label {
    display: inline;
  }

  /* tc-collapsed state on mobile: fully hidden off-screen */
  html.tc-collapsed .tc-sidebar {
    transform: translateX(-100%);
    width: var(--tc-side-w);
  }

  /* Main content takes full width on mobile regardless of sidebar state */
  .tc-main {
    margin-left: 0 !important;
    width: 100%;
  }

  /* Overlay backdrop when sidebar is open on mobile */
  html:not(.tc-collapsed) .tc-shell::before {
    content: '';
    position: fixed;
    inset: 0;
    top: var(--tc-topbar-h);
    background: rgba(0, 0, 0, 0.5);
    z-index: 35;
    pointer-events: auto;
  }
}