/* routine-widget.css — "Hôm nay" study-routine panel on the student hub.
   Uses theme.css vars (--surf/--surf2/--border/--accent/--grad/--text/--dim)
   with the same fallbacks as onboarding.js so it degrades gracefully. */

.lgrt-panel { margin-bottom: 26px; }

.lgrt-rest-msg { color: var(--dim, #8b93a7); font-size: .92rem; margin-top: 4px; }
.lgrt-err { color: #ff7b7b; font-size: .88rem; margin-top: 8px; }

.lgrt-card {
  background: var(--surf, #131b2e);
  border: 1px solid var(--border, rgba(255,255,255,.1));
  border-radius: 16px;
  padding: 18px 20px;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  position: relative;
}
.lgrt-card::before {
  content: '';
  position: absolute; inset: 0 auto 0 0; width: 4px;
  border-radius: 16px 0 0 16px;
  background: var(--grad, linear-gradient(135deg, #7C5CBF, #20B9B9));
}

/* ── Header ── */
.lgrt-head { display: flex; align-items: center; gap: 14px; }
.lgrt-head-text { flex: 1; min-width: 0; }
.lgrt-title { font-size: 1.05rem; font-weight: 800; color: var(--text, #e2e8f0); }
.lgrt-note-hw { margin-top: 4px; font-size: .78rem; color: var(--dim, #94a3b8); }
.lgrt-time-note { margin-top: 4px; font-size: .78rem; color: var(--dim, #94a3b8); }

.lgrt-ring { width: 52px; height: 52px; flex-shrink: 0; }
.lgrt-ring-track { fill: none; stroke: var(--border, rgba(255,255,255,.12)); stroke-width: 5; }
.lgrt-ring-bar {
  fill: none; stroke: var(--accent, #20B9B9); stroke-width: 5;
  stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%;
  transition: stroke-dashoffset .4s ease;
}
.lgrt-ring-text {
  fill: var(--text, #e2e8f0); font-size: 12px; font-weight: 700;
  text-anchor: middle; dominant-baseline: middle;
}

/* ── Pause control ── */
.lgrt-pause-wrap { position: relative; flex-shrink: 0; }
.lgrt-pause-btn {
  background: transparent; border: 1px solid var(--border, rgba(255,255,255,.12));
  color: var(--dim, #7880a0); border-radius: 9px; width: 34px; height: 34px;
  cursor: pointer; font-size: .85rem; font-family: inherit;
  transition: border-color .15s, color .15s;
}
.lgrt-pause-btn:hover { border-color: var(--accent, #20B9B9); color: var(--text, #e2e8f0); }
.lgrt-pause-menu {
  display: none; position: absolute; right: 0; top: 40px; z-index: 20;
  background: var(--surf, #131b2e); border: 1px solid var(--border, rgba(255,255,255,.12));
  border-radius: 11px; padding: 6px; min-width: 210px;
  box-shadow: 0 12px 34px rgba(0,0,0,.45);
}
.lgrt-pause-menu.open { display: block; }
.lgrt-pause-opt {
  display: block; width: 100%; text-align: left; background: none; border: none;
  color: var(--text, #e2e8f0); font-family: inherit; font-size: .82rem; font-weight: 600;
  padding: 9px 11px; border-radius: 8px; cursor: pointer;
}
.lgrt-pause-opt:hover { background: var(--surf2, rgba(255,255,255,.05)); }

/* ── Banners / celebration ── */
.lgrt-banner {
  margin-top: 12px; font-size: .82rem; line-height: 1.5;
  color: var(--text, #e2e8f0); background: var(--surf2, rgba(255,255,255,.04));
  border: 1px solid var(--border, rgba(255,255,255,.1));
  border-radius: 11px; padding: 10px 13px;
}
.lgrt-alldone {
  margin-top: 12px; font-size: .92rem; font-weight: 800; text-align: center;
  color: var(--accent, #20B9B9);
  background: rgba(32,185,185,.08); border: 1px solid rgba(32,185,185,.3);
  border-radius: 11px; padding: 11px;
}

/* ── Checklist ── */
.lgrt-list { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.lgrt-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; border-radius: 10px; text-decoration: none;
  border: 1px solid transparent;
  transition: border-color .15s, background .15s;
}
.lgrt-row:hover { border-color: var(--accent, #20B9B9); background: var(--surf2, rgba(255,255,255,.03)); }
.lgrt-row-check { font-size: .85rem; flex-shrink: 0; }
.lgrt-row-emoji { font-size: 1rem; flex-shrink: 0; }
.lgrt-row-label {
  flex: 1; min-width: 0; font-size: .86rem; font-weight: 600;
  color: var(--text, #e2e8f0); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lgrt-row-prog {
  font-size: .78rem; font-weight: 700; color: var(--dim, #7880a0); flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
/* Duration estimate — deliberately quieter than the x/y counter next to it. */
.lgrt-row-time {
  font-size: .72rem; font-weight: 600; color: var(--dim, #7880a0); flex-shrink: 0;
  opacity: .8; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.lgrt-row.done .lgrt-row-label { opacity: .55; text-decoration: line-through; }
.lgrt-row.optional { opacity: .55; }
/* Submitted-but-not-graded homework: muted like done, but no strikethrough
   — the student handed it in, it's just not "finished" (graded) yet. */
.lgrt-row.lgrt-hw-submitted .lgrt-row-label { opacity: .7; }
.lgrt-row.lgrt-hw-submitted .lgrt-row-prog { color: var(--accent, #20B9B9); }
.lgrt-hw-head {
  margin-top: 14px; font-size: .68rem; text-transform: uppercase;
  letter-spacing: 1.4px; font-weight: 700; color: var(--dim, #7880a0);
}

/* ── "Tạo lộ trình" (status none) + paused ── */
.lgrt-none-head { font-size: 1rem; font-weight: 800; color: var(--text, #e2e8f0); }
.lgrt-none-sub { margin: 6px 0 12px; font-size: .84rem; color: var(--dim, #94a3b8); line-height: 1.5; }
.lgrt-btn-primary {
  border: none; background: var(--grad, linear-gradient(135deg, #7C5CBF, #20B9B9));
  color: #fff; border-radius: 10px; padding: 10px 18px; cursor: pointer;
  font-family: inherit; font-size: .86rem; font-weight: 800;
  transition: opacity .15s, transform .12s;
}
.lgrt-btn-primary:hover { opacity: .92; transform: translateY(-1px); }
.lgrt-btn-primary:disabled { opacity: .6; cursor: default; transform: none; }
.lgrt-paused { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.lgrt-paused-text { flex: 1; min-width: 200px; font-size: .9rem; font-weight: 700; color: var(--text, #e2e8f0); }

/* ── Shared goals form (also used inside the onboarding modal) ── */
.lgrt-goals-form { margin-top: 4px; }
.lgrt-form-holder .lgrt-btn-primary { margin-top: 12px; width: 100%; }
.lgrt-goals-row { margin-bottom: 14px; }
.lgrt-goals-label {
  font-size: .78rem; font-weight: 700; color: var(--dim, #94a3b8); margin-bottom: 7px;
}
/* Warning when the chosen band needs a skill the chosen budget can't hold
   (band ≥6.0 + 10 phút → Writing alone is ~15 phút). */
.lgrt-goals-note {
  margin: -4px 0 14px; padding: 9px 11px; border-radius: 9px;
  border: 1px dashed var(--border, rgba(255,255,255,.18));
  background: var(--surf, rgba(255,255,255,.03));
  font-size: .76rem; line-height: 1.45; color: var(--dim, #94a3b8);
}
.lgrt-chip-row { display: flex; gap: 8px; flex-wrap: wrap; }
.lgrt-chip {
  border: 1px solid var(--border, rgba(255,255,255,.14)); background: transparent;
  color: var(--text, #e2e8f0); border-radius: 999px; padding: 7px 14px;
  font-family: inherit; font-size: .84rem; font-weight: 700; cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.lgrt-chip:hover { border-color: var(--accent, #20B9B9); }
.lgrt-chip.on {
  border-color: var(--accent, #20B9B9); background: rgba(32,185,185,.14);
  color: var(--accent, #20B9B9);
}
.lgrt-date-input {
  width: 100%; box-sizing: border-box;
  background: var(--surf2, rgba(255,255,255,.04));
  border: 1px solid var(--border, rgba(255,255,255,.12));
  color: var(--text, #e2e8f0); border-radius: 10px; padding: 9px 12px;
  font-family: inherit; font-size: .86rem;
  color-scheme: dark;
}

@media (max-width: 480px) {
  .lgrt-card { padding: 15px 15px; }
  .lgrt-row-label { white-space: normal; }
}

/* ── Entry-test nudge chip (routine-widget.js maybeEntryChip) ── */
.lgrt-et-chip{display:flex;align-items:center;gap:8px;margin-top:8px;padding:8px 12px;border:1px dashed var(--border,rgba(255,255,255,.18));border-radius:10px;background:var(--surf,rgba(255,255,255,.03))}
.lgrt-et-link{flex:1;font-size:.8rem;font-weight:600;color:var(--accent,#20B9B9);text-decoration:none;line-height:1.4}
.lgrt-et-link:hover{text-decoration:underline}
.lgrt-et-dismiss{background:none;border:none;color:var(--dim,#7880a0);font-size:1rem;line-height:1;cursor:pointer;padding:2px 6px;font-family:inherit}
.lgrt-et-dismiss:hover{color:var(--text,#e2e8f0)}

/* ── Shadow-assessment reveal card (routine-widget.js maybeShadowCard) ── */
.lgrt-shadow-card{position:relative;margin-bottom:12px;border-color:var(--accent,#20B9B9)}
.lgrt-shadow-card .lgrt-et-dismiss{position:absolute;top:8px;right:10px}
.lgrt-shadow-level{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px solid var(--border,rgba(255,255,255,.08))}
.lgrt-shadow-level:last-of-type{border-bottom:none}
.lgrt-shadow-name{font-size:.86rem;color:var(--text,#e2e8f0)}
.lgrt-shadow-badge{font-size:.8rem;font-weight:800;color:var(--accent,#20B9B9);background:rgba(32,185,185,.12);border-radius:8px;padding:3px 10px;white-space:nowrap}
.lgrt-shadow-caveat{margin:8px 0 12px;font-size:.76rem;color:var(--dim,#94a3b8);line-height:1.5}

/* ── Auto-adaptation banners (routine-widget.js appendAdaptNotices) ── */
.lgrt-banner-up{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.lgrt-up-btn{border:none;background:var(--grad,linear-gradient(135deg,#7C5CBF,#20B9B9));color:#fff;border-radius:8px;padding:6px 12px;cursor:pointer;font-family:inherit;font-size:.78rem;font-weight:800}
.lgrt-up-dismiss{background:none;border:1px solid var(--border,rgba(255,255,255,.18));color:var(--dim,#94a3b8);border-radius:8px;padding:6px 10px;cursor:pointer;font-family:inherit;font-size:.78rem}
.lgrt-up-dismiss:hover{color:var(--text,#e2e8f0)}

/* ── Teacher-assigned tasks: LIVE session group + hide-done toggle
   (routine-widget.js appendHwList/hideDoneControl) ── */
.lgrt-hidedone-wrap { margin-top: 14px; }
.lgrt-hidedone-btn {
  background: none; border: 1px solid var(--border, rgba(255,255,255,.14));
  color: var(--dim, #94a3b8); border-radius: 999px; padding: 5px 12px;
  font-family: inherit; font-size: .74rem; font-weight: 700; cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.lgrt-hidedone-btn:hover { border-color: var(--accent, #20B9B9); color: var(--text, #e2e8f0); }
.lgrt-hidedone-btn.on {
  border-color: var(--accent, #20B9B9); color: var(--accent, #20B9B9);
  background: rgba(32,185,185,.1);
}

.lgrt-live-head {
  margin-top: 14px; font-size: .68rem; text-transform: uppercase;
  letter-spacing: 1.4px; font-weight: 700; color: #ff6b6b;
}
.lgrt-row.lgrt-live-row { border-color: rgba(255,107,107,.35); background: rgba(255,107,107,.06); }
.lgrt-row.lgrt-live-row:hover { border-color: #ff6b6b; }
.lgrt-live-dot {
  width: 9px; height: 9px; border-radius: 50%; background: #ff6b6b; flex-shrink: 0;
  animation: lgrt-pulse 1.6s ease-out infinite;
}
@keyframes lgrt-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,107,107,.55); }
  70%  { box-shadow: 0 0 0 7px rgba(255,107,107,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,107,107,0); }
}
.lgrt-live-time { color: #ff6b6b; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Overdue homework — same coral as the entry-test/save-error text elsewhere
   in this file, kept distinct from the (unrelated) done/submitted greys. */
.lgrt-hw-overdue-txt { color: #ff7b7b; }
.lgrt-row.lgrt-hw-overdue { border-color: rgba(255,123,123,.3); }

/* "MỚI" — homework the student hasn't opened/started yet, assigned
   recently (routine-widget.js hwIsNew). Sits right after the title label,
   before the due-date text — see appendHwList(). Same red as rl/index.js's
   .rl-new-badge so the same concept reads identically on both surfaces. */
.lgrt-new-badge {
  display: inline-flex; align-items: center; flex-shrink: 0;
  font-size: .64rem; font-weight: 800; letter-spacing: .3px;
  padding: 2px 7px; border-radius: 999px; white-space: nowrap;
  color: #fff; background: #e0475c;
}