/* LOP Streak 2.8.756 — learner workflow UX. Presentation only. */

/* One-click navigation across the six Học tập destinations. */
.lopsp-dashboard-learning-nav.lopsp-learning-quicknav{
  width:min(1180px,calc(100% - 24px));
  margin:10px auto 16px;
  gap:7px;
}
.lopsp-dashboard-learning-nav.lopsp-learning-quicknav a{
  min-height:50px;
  padding:8px 9px;
  border-radius:13px;
  background:#fff;
}
.lopsp-dashboard-learning-nav.lopsp-learning-quicknav a strong{font-size:12px;white-space:normal}
.lopsp-dashboard-learning-nav.lopsp-learning-quicknav a.is-current{box-shadow:inset 0 0 0 1px rgba(79,70,229,.08)}
#lop-learning-goals,#lop-learning-schedule,.lop-progress-hero,.lop-assessment-main,.lopsp-student-report-shell{scroll-margin-top:112px}

/* Goal creation: essential fields first, advanced measurement settings on demand. */
.lopsp-learning-form-intro{margin:5px 0 0;color:#64748b;font-size:12.5px;line-height:1.45;font-weight:650}
.lopsp-learning-fast-form{gap:12px!important}
.lopsp-learning-core-fields{padding:15px!important}
.lopsp-learning-core-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(180px,.72fr);gap:10px}
.lopsp-learning-advanced-options{
  border:1px solid #dbe3ee;
  border-radius:16px;
  background:#f8fafc;
  overflow:hidden;
}
.lopsp-learning-advanced-options>summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:50px;
  padding:11px 14px;
  color:#1e293b;
  font-weight:900;
}
.lopsp-learning-advanced-options>summary::-webkit-details-marker{display:none}
.lopsp-learning-advanced-options>summary span{font-size:13px}
.lopsp-learning-advanced-options>summary small{color:#64748b;font-size:11.5px;font-weight:700;text-align:right}
.lopsp-learning-advanced-options>summary:after{content:'⌄';color:#64748b;font-size:17px;transition:transform .16s ease}
.lopsp-learning-advanced-options[open]>summary:after{transform:rotate(180deg)}
.lopsp-learning-advanced-body{display:grid;gap:12px;padding:0 12px 12px}
.lopsp-learning-result-note{margin:0!important;box-shadow:none!important}
.lopsp-learning-next-step{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-top:14px;
  padding:13px 15px;
  border:1px solid #c7d2fe;
  border-radius:16px;
  background:linear-gradient(135deg,#f8faff,#eef6ff);
}
.lopsp-learning-next-step span,.lopsp-learning-next-step strong{display:block}
.lopsp-learning-next-step span{color:#64748b;font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.05em}
.lopsp-learning-next-step strong{margin-top:2px;color:#172554;font-size:13.5px}
.lopsp-learning-next-step a,.lopsp-learning-section-actions a,.lopsp-learning-section-actions button{
  display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:9px 13px;border-radius:11px;border:1px solid #c7d2fe;background:#fff;color:#3730a3;text-decoration:none;font-size:12.5px;font-weight:900;cursor:pointer
}
.lopsp-learning-section-actions{display:flex;justify-content:flex-end;gap:8px;margin:0 0 10px}
.lopsp-learning-section-actions button{background:#4f46e5;border-color:#4f46e5;color:#fff}

/* Faster schedule entry. */
.lopsp-remind-quick-presets{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:2px 0 10px}
.lopsp-remind-quick-presets>span{margin-right:2px;color:#64748b;font-size:11.5px;font-weight:900}
.lopsp-remind-quick-presets button,.lop-progress-period-presets button,.lopsp-report-range-presets button{
  min-height:34px;padding:6px 10px;border:1px solid #cbd5e1;border-radius:999px;background:#fff;color:#334155;font:inherit;font-size:11.5px;font-weight:850;cursor:pointer
}
.lopsp-remind-quick-presets button:hover,.lopsp-remind-quick-presets button:focus-visible,
.lop-progress-period-presets button:hover,.lop-progress-period-presets button:focus-visible,
.lopsp-report-range-presets button:hover,.lopsp-report-range-presets button:focus-visible,
.lopsp-report-range-presets button.is-active{border-color:#6366f1;background:#eef2ff;color:#3730a3;outline:none}
.lopsp-remind-advanced-time{margin-top:2px;border-top:1px dashed #cbd5e1;padding-top:4px}
.lopsp-remind-advanced-time>summary{cursor:pointer;color:#475569;font-size:12px;font-weight:850;padding:7px 2px}
.lopsp-remind-advanced-time>.lopsp-field-grid{margin-top:7px}
.lopsp-remind-popup-form-v410 textarea[name="content"]{min-height:92px!important}

/* Report filters: common periods become one-click; custom dates only show when requested. */
.lopsp-report-filter.lopsp-report-filter-advanced{align-items:end}
.lopsp-report-range-presets{grid-column:1/-1;display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:-2px 0 1px}
.lopsp-report-range-presets>span{color:#64748b;font-size:11.5px;font-weight:900;margin-right:2px}
.lopsp-report-date-cluster[hidden]{display:none!important}

/* Progress filter presets. */
.lop-progress-period-filter form[data-lop-progress-period-filter]{display:flex;align-items:end;gap:8px;flex-wrap:wrap}
.lop-progress-period-presets{display:flex;align-items:center;gap:6px;flex-wrap:wrap;width:100%;margin-bottom:2px}
.lop-progress-period-presets>span{color:#64748b;font-size:11px;font-weight:900;margin-right:2px}

/* Keep the whole learning workspace compact and touch-friendly. */
.lopsp-goal-schedule-flow-two{margin-bottom:14px!important}
.lopsp-settings-card-goals-v3,.lopsp-unified-schedule-workspace{scroll-margin-top:112px}
@media(max-width:900px){
  .lopsp-dashboard-learning-nav.lopsp-learning-quicknav{grid-template-columns:repeat(3,minmax(0,1fr));width:min(760px,calc(100% - 20px))}
  .lopsp-learning-core-grid{grid-template-columns:1fr}
}
@media(max-width:620px){
  .lopsp-dashboard-learning-nav.lopsp-learning-quicknav{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:7px;margin-bottom:11px;width:calc(100% - 14px)}
  .lopsp-dashboard-learning-nav.lopsp-learning-quicknav a{min-height:46px;padding:7px 6px}
  .lopsp-dashboard-learning-nav.lopsp-learning-quicknav a span{font-size:16px}
  .lopsp-dashboard-learning-nav.lopsp-learning-quicknav a strong{font-size:11.5px}
  .lopsp-learning-next-step{align-items:stretch;flex-direction:column}
  .lopsp-learning-next-step a{width:100%;box-sizing:border-box}
  .lopsp-learning-section-actions{display:grid;grid-template-columns:1fr 1fr}
  .lopsp-learning-section-actions>*{width:100%;box-sizing:border-box}
  .lopsp-learning-advanced-options>summary{align-items:flex-start;flex-direction:column;gap:3px;padding-right:36px;position:relative}
  .lopsp-learning-advanced-options>summary:after{position:absolute;right:13px;top:15px}
  .lopsp-learning-advanced-options>summary small{text-align:left}
  .lopsp-remind-quick-presets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .lopsp-remind-quick-presets>span{grid-column:1/-1}
  .lopsp-remind-quick-presets button{width:100%}
  .lopsp-report-range-presets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%}
  .lopsp-report-range-presets>span{grid-column:1/-1}
  .lopsp-report-range-presets button{width:100%;padding-inline:5px}
  .lop-progress-period-presets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  .lop-progress-period-presets>span{grid-column:1/-1}
  .lop-progress-period-presets button{width:100%}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  .lopsp-learning-advanced-options>summary:after{transition:none}
}
@media(prefers-reduced-motion:no-preference){
  html.lopsp-learning-ux-active{scroll-behavior:smooth}
}