/* Marivya Lesson Planner – Student portal UI */
/* minimalist, clean, responsive */

:root{
  --marivya-lp-bg:#ffffff;
  --marivya-lp-border:#e5e7eb;
  --marivya-lp-muted:#6b7280;
  --marivya-lp-text:#111827;
  --marivya-lp-primary:#2563eb;
  --marivya-lp-primary-ghost:#eff6ff;
  --marivya-lp-done:#059669;
  --marivya-lp-planned:#2563eb;
  --marivya-lp-cancel:#dc2626;
}

*{box-sizing:border-box}

body.marivya-lp-portal-blank{margin:0;background:var(--marivya-lp-bg)}



.marivya-lp-container{max-width:960px;margin:0 auto;padding:24px 16px;color:var(--marivya-lp-text)}

/* HERO  */
.marivya-lp-hero{margin:0 0 10px}
.marivya-lp-hero__meta{display:flex;gap:8px;flex-wrap:wrap}
.marivya-lp-pill{display:inline-block;background:var(--marivya-lp-primary-ghost);color:#1f2937;border:1px solid #dbeafe;padding:6px 10px;border-radius:999px;font-size:13px}

/* NAV */
.marivya-lp-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 12px}
.marivya-lp-tabs a{display:inline-block;padding:6px 10px;border:1px solid var(--marivya-lp-border);border-radius:999px;background:#fff;text-decoration:none;color:var(--marivya-lp-text);font-weight:600}
.marivya-lp-tabs a.active{background:var(--marivya-lp-primary);border-color:var(--marivya-lp-primary);color:#fff}
.marivya-lp-tab-sep{color:var(--marivya-lp-muted);align-self:center}

/* SECTIONS */
.marivya-lp-section{margin:18px 0}
.marivya-lp-section__title{font-size:18px;margin:0 0 10px;font-weight:700}
.marivya-lp-empty{padding:14px;border:1px dashed var(--marivya-lp-border);border-radius:12px;background:#fff;color:var(--marivya-lp-muted)}

/* CARDS */
.marivya-lp-list{list-style:none;padding:0;margin:0}
.marivya-lp-list--cards{display:grid;gap:10px}
.marivya-lp-card{background:#fff;border:1px solid var(--marivya-lp-border);border-radius:12px;padding:14px;box-shadow:0 1px 0 rgba(0,0,0,.04)}
.marivya-lp-card__row{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap}
.marivya-lp-card__main{min-width:220px}
.marivya-lp-card__title{font-weight:700;margin-bottom:4px}
.marivya-lp-card__meta{color:var(--marivya-lp-muted);font-size:14px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.marivya-lp-card__actions{display:flex;gap:8px;align-items:center}

.marivya-lp-btn{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:10px;border:1px solid var(--marivya-lp-border);background:#fff;color:var(--marivya-lp-text);text-decoration:none;font-weight:600;transition:.15s ease-in-out}
.marivya-lp-btn:hover{transform:translateY(-1px)}
.marivya-lp-btn--primary{background:var(--marivya-lp-primary);border-color:var(--marivya-lp-primary);color:#fff}
.marivya-lp-btn--ghost{background:#fff;border-color:var(--marivya-lp-border);color:var(--marivya-lp-text)}
.marivya-lp-chip{display:inline-block;padding:2px 8px;border-radius:999px;background:#eef2f7;color:#374151;font-size:12px;border:1px solid #e5e7eb}

/* Status badges */
.marivya-lp-badge{display:inline-block;padding:4px 10px;border-radius:999px;font-size:12px;color:#fff}
.marivya-lp-badge--planned{background:var(--marivya-lp-planned)}
.marivya-lp-badge--done{background:var(--marivya-lp-done)}
.marivya-lp-badge--cancelled{background:var(--marivya-lp-cancel)}

/* Gate form (PIN) */
.marivya-lp-box{background:#fff;border:1px solid var(--marivya-lp-border);border-radius:12px;padding:12px;margin:10px 0}
.marivya-lp-warn{background:#fff8e1;border-color:#ffe8a1}
.marivya-lp-form{background:#fff;border:1px solid var(--marivya-lp-border);border-radius:12px;padding:16px;max-width:520px;margin:12px 0}
.marivya-lp-form__row{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.marivya-lp-form__row input{padding:10px;border:1px solid var(--marivya-lp-border);border-radius:10px}
.marivya-lp-form__actions{display:flex;gap:8px}

/* Timeline */
.marivya-lp-timeline{position:relative;margin:10px 0}
.marivya-lp-timeline::before{content:'';position:absolute;left:10px;top:0;bottom:0;width:2px;background:#e5e7eb}
.marivya-lp-timeline__item{position:relative;padding-left:28px;margin:14px 0}
.marivya-lp-timeline__dot{position:absolute;left:5px;top:12px;width:12px;height:12px;border-radius:50%;background:#9ca3af;border:2px solid #fff;box-shadow:0 0 0 2px #e5e7eb}
.marivya-lp-timeline__item--future .marivya-lp-timeline__dot{background:var(--marivya-lp-primary)}
.marivya-lp-timeline__content .marivya-lp-card{margin:0}

/* Small screens */
@media (max-width:720px){
  .marivya-lp-tabs{gap:6px}
  .marivya-lp-card__row{flex-direction:column;align-items:flex-start}
}