/* ===================================================
   Gradie School Dashboard (greens/greys/black palette)
   =================================================== */
:root{
  --bg: #f5f7f6;
  --card:#ffffff;
  --border:#e7ece9;
  --text:#111415;
  --muted:#6d7673;
  --accent:#2f7d59;     /* chalkboard green */
  --accent-2:#3c916a;   /* lighter green */
  --chip:#eef4f1;
  --chip-text:#2f7d59;
  --radius:14px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--text);
}
a{color:inherit;text-decoration:none}

/* Sidebar */
.sidebar{
  position:fixed; left:0; top:0; bottom:0; width:260px;
  background:#ffffff; border-right:1px solid var(--border);
  display:flex; flex-direction:column; gap:18px; padding:18px;
}
.brand{
  width:44px;height:44px;border-radius:12px;
  display:grid;place-items:center;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#fff;font-weight:800;font-size:20px;
}
.menu{display:flex;flex-direction:column;gap:4px}
.menu-item{
  padding:10px 12px;border-radius:10px;color:#222;display:flex;gap:10px;align-items:center
}
.menu-item:hover{background:#f0f3f2}
.menu-item.active{background:var(--chip);color:var(--chip-text);font-weight:700}
.sidebar hr{border:none;border-top:1px solid var(--border);margin:10px 0}
.me{margin-top:auto;display:flex;gap:10px;align-items:center}
.avatar{width:36px;height:36px;border-radius:10px;background:var(--accent);color:#fff;display:grid;place-items:center;font-weight:800}
.meta small{color:var(--muted)}

/* Main */
.app{margin-left:260px;min-height:100vh;display:flex;flex-direction:column}

/* Topbar */
.topbar{
  height:72px; display:flex;align-items:center;justify-content:space-between;
  padding:0 22px; border-bottom:1px solid var(--border); background:#fff;
  position:sticky; top:0; z-index:10;
}
.topbar h1{font-size:22px;margin:0}
.topbar h1 span{color:var(--accent)}
.tools{display:flex;gap:10px;align-items:center}
.search input{
  background:#f3f6f4;border:1px solid var(--border);padding:10px 12px;border-radius:999px;min-width:240px
}

/* Buttons */
.btn{
  border:1px solid var(--border);
  background:#fff;
  border-radius:10px;
  padding:10px 12px;
  font-weight:600;
  cursor:pointer;
}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.ghost{background:#f7faf8}
.btn.small{padding:8px 10px; border-radius:10px; font-size:0.92rem;}

.btn.danger{background:#b23b3b;border-color:#b23b3b;color:#fff}
.btn.danger:hover{background:#9c2f2f;border-color:#9c2f2f}

.icon{width:40px;height:40px;border:1px solid var(--border);border-radius:10px;display:grid;place-items:center;background:#fff}

/* KPI row */
.kpis{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  padding:18px;
}

.kpi{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px;

  display:grid;
  grid-template-columns:40px 1fr;
  grid-template-rows:auto auto;
  column-gap:14px;
  align-items:center;
}


/* NUMBER */
.kpi .v{
  font-size:26px;
  font-weight:700;
  line-height:1.1;
  color:#111827;
}

/* LABEL */
.kpi .t{
  grid-column:2;
  font-size:0.85rem;
  font-weight:500;
  color:#6b7280;
  letter-spacing:0.02em;
  margin-top:2px;
}

/* subtle hover */
.kpi:hover{
  background:#f9fafb;
}

/* Grid */
.grid{display:grid; grid-template-columns:repeat(12,1fr); gap:16px; padding:0 18px 22px}
.span-12{grid-column:span 12}
.span-8{grid-column:span 8}
.span-6{grid-column:span 6}
.span-4{grid-column:span 4}
.col{display:flex;flex-direction:column;gap:16px}

/* Cards */
.card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  padding:14px; display:flex;flex-direction:column; gap:12px;
}
.card-head{display:flex; align-items:center; gap:10px; justify-content:space-between}
.card-head h3{margin:0}
small{color:var(--muted)}

/* Chips */
.chip{border:1px solid var(--border);padding:8px 10px;border-radius:999px;background:#fff;color:#333}
.chip.active{background:var(--chip);color:var(--chip-text);border-color:transparent}

/* Task list */
.task-list{display:flex;flex-direction:column;gap:10px}
.task-list li{
  display:grid; grid-template-columns: 1.2fr 1fr 1fr 120px 120px 38px; gap:10px;
  border:1px solid var(--border); border-radius:12px; padding:10px; align-items:center;
}
.task-list .title{font-weight:600}
.task-list .teacher{color:var(--muted)}
.progress{height:10px;background:#eef2ef;border-radius:999px;overflow:hidden}
.progress span{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2))}
.pill{padding:6px 10px;border-radius:999px;background:#f1f6f3;border:1px solid var(--border)}
.action-sm{border:1px solid var(--border);padding:8px 10px;border-radius:10px;background:#fff}
.action-sm.primary{background:var(--accent);border-color:var(--accent);color:#fff}

/* Schedule */
.days{display:flex;gap:8px;flex-wrap:wrap}
.day{border:1px solid var(--border);padding:8px 10px;border-radius:10px;background:#fff;color:#333}
.day.active{background:var(--chip);color:var(--chip-text);border-color:transparent}
.slots{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.slot{
  border:1px solid var(--border);border-radius:12px;padding:10px;display:flex;gap:10px;align-items:center;background:#fff
}
.badge{width:10px;height:10px;border-radius:50%}
.badge.green{background:#6ec28f}
.badge.yellow{background:#e7c766}
.badge.purple{background:#b19ae0}
.badge.gray{background:#bfc6c2}

/* Upload */
.dropzone{
  border:2px dashed var(--border); border-radius:12px; padding:16px; text-align:center; background:#fbfdfc
}
.dropzone.drag{background:#f0faf5;border-color:var(--accent)}
.link{color:var(--accent);background:transparent;border:0;padding:0}
progress{width:100%;height:8px}
.hidden{display:none}

/* Output blocks */
.result{
  background:#f7faf8;
  border:1px solid var(--border);
  padding:8px;
  border-radius:8px;
  max-height:240px;
  overflow:auto;
  white-space:pre-wrap;
}

/* Sparks */
.spark-form{display:flex;gap:10px}
.input{border:1px solid var(--border);border-radius:10px;padding:10px 12px;width:100%}
.spark-list{display:flex;flex-direction:column;gap:8px;max-height:240px;overflow:auto}
.spark-list li{border:1px dashed var(--border);border-radius:10px;padding:8px 10px;display:flex;gap:10px;align-items:center;justify-content:space-between;background:#fbfdfc}
.tag{background:var(--chip);color:var(--chip-text);border-radius:999px;padding:4px 8px}

/* Course builder */
.course{display:flex;flex-direction:column;gap:12px}
.course-drop{
  min-height:120px;border:2px dashed var(--accent);border-radius:12px;display:grid;place-items:center;background:#f0faf5;color:#225840
}
.course-drop.drag{background:#e7f7ef}
.course-actions{display:flex;gap:10px;align-items:center;justify-content:flex-end}

/* LOGO DIV */
.sidebar-logo {
  text-align: center;
  margin: 1.5rem 0;
  font-family: "Baskerville", "Times New Roman", serif;
}
.gradie-logo {
  font-family: "Baskerville", system-ui, sans-serif;
  font-size: 2.9rem;
  font-weight: 500;
  letter-spacing: -0.02em;

  color: #1f2933;
  background: #f3f4f6;   /* light neutral gray */
  padding: 0.4rem 0.9rem;
  border-radius: 8px;
}

/* Bottom-left user card */
.user-card {
  display:flex; align-items:center; gap:.75rem;
  border:1px solid #e7ece9; background:#fff; border-radius:.9rem;
  padding:.75rem 1rem; margin:1rem; position:relative;
}
.user-card .avatar.small {
  width:32px; height:32px; border-radius:50%; background:#204d36; color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700;
  font-family: "Baskerville", serif;
}
.user-card .user-meta small { color:#6b7280; }
.ghost-link {
  margin-left:auto; border:none; background:transparent; color:#1f5f3f;
  font-weight:600; cursor:pointer; padding:.25rem .5rem; border-radius:.5rem;
}
.ghost-link:hover { background:#e9f2ec; }

/* Modal (shared logout modal, etc.) */
.modal {
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:.2s ease; z-index:1000;
}
.modal.show { opacity:1; pointer-events:auto; }
.modal-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.35); }
.modal-card {
  position:relative; z-index:1; width:min(420px, 92vw);
  background:#fff; border:1px solid #e6ebe8; border-radius:1rem; padding:1.25rem 1.25rem 1rem;
  box-shadow:0 12px 40px rgba(0,0,0,.12);
}
.modal-card h3 { margin:0 0 .5rem 0; font-size:1.15rem; }
.modal-card p  { margin:0 0 1rem 0; color:#4b5563; }
.modal-actions { display:flex; justify-content:flex-end; gap:.5rem; }

/* Sidebar layout fix */
.sidebar{ display:flex; flex-direction:column; height:100vh; }
.menu{ flex:1; overflow:auto; }
.user-card{ margin-top:auto; }

/* ===== Classroom-only lesson fullscreen modal ===== */
.page-classroom .lesson-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: none;
  z-index: 1000;
}

.page-classroom .lesson-modal-card {
  background: #fff;
  width: min(960px, 92vw);
  height: 92vh;
  margin: 4vh auto;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
}

.page-classroom .lesson-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #e5e7eb;
}

.page-classroom .lesson-modal-body {
  padding: 20px;
  overflow-y: auto;
}

.page-classroom .lesson-modal-body h2,
.page-classroom .lesson-modal-body h3 {
  margin-top: 24px;
}

/* Responsive */
@media (max-width: 1100px){
  .kpis{grid-template-columns:repeat(2,1fr)}
  .grid{grid-template-columns:repeat(8,1fr)}
  .span-8{grid-column:span 8}
  .span-6{grid-column:span 8}
  .span-4{grid-column:span 8}
  .span-12{grid-column:span 8}
}
@media (max-width: 760px){
  .sidebar{position:static;width:auto;height:auto;border:0}
  .app{margin-left:0}
  .task-list li{grid-template-columns:1fr 1fr 100px 100px}
}

.page-classroom .lesson-modal-body {
  flex: 1;
  overflow: auto;
}

.page-classroom #lessonModalContent .result,
.page-classroom #lessonModalContent pre,
.page-classroom #lessonModalContent {
  max-height: none;
  height: auto;
  overflow: visible;
  white-space: normal;
}

.btn.disabled {
  opacity: 0.5;
  pointer-events: none;
}