/* ============================================================
   BEATS IN BLOOM — Portal Styles
   Additive. Inherits tokens from ../css/style.css
   ============================================================ */

.login-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-bg-alt);
  padding: var(--sp-md);
}

.login-card {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-lg);
  max-width: 380px;
  width: 100%;
}

.login-card__logo {
  height: 56px;
  width: auto;
  margin: 0 auto var(--sp-sm);
  border-radius: 8px;
}

/* ---------- Portal nav (shown to logged-in clients) ---------- */
.portal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-sm) 0;
  border-bottom: 1px solid var(--c-border);
  margin-bottom: var(--sp-lg);
}
.portal-nav__brand { display: flex; align-items: center; gap: 0.6rem; }
.portal-nav__brand img { height: 30px; border-radius: 6px; }
.portal-nav__brand span { font-family: var(--f-display); font-size: var(--sz-md); }
.portal-nav__right { display: flex; align-items: center; gap: var(--sp-md); }
.portal-nav__greeting { font-size: var(--sz-sm); color: var(--c-ink-soft); }
.portal-nav__logout { font-size: var(--sz-sm); font-weight: 600; color: var(--c-ink-soft); }
.portal-nav__logout:hover { color: var(--c-ink); }

/* ---------- Dashboard lesson list ---------- */
.lesson-list { display: flex; flex-direction: column; gap: 0.75rem; }
.lesson-list__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-sm);
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  padding: var(--sp-sm) var(--sp-md);
  transition: box-shadow var(--transition), transform var(--transition);
}
.lesson-list__item:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.lesson-list__title { font-family: var(--f-display); font-size: var(--sz-lg); }
.lesson-list__meta { font-size: var(--sz-xs); color: var(--c-ink-soft); }

/* ---------- Progress stats ---------- */
.stat-row { display: flex; gap: 0.75rem; flex-wrap: wrap; margin: var(--sp-sm) 0 var(--sp-md); }
.stat-card {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  padding: 0.75rem 1.25rem;
  min-width: 130px;
}
.stat-card__num { font-family: var(--f-display); font-size: var(--sz-xl); line-height: 1.15; }
.stat-card__of { font-size: var(--sz-md); color: var(--c-ink-soft); }
.stat-card__label { font-size: var(--sz-xs); color: var(--c-ink-soft); }

.lesson-list__done { color: var(--c-accent); font-weight: 600; font-size: var(--sz-sm); white-space: nowrap; }

/* ---------- Practice diary ---------- */
.diary-form {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  padding: var(--sp-sm) var(--sp-md) var(--sp-md);
  margin-bottom: var(--sp-md);
}
.diary-form__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-sm); }
@media (max-width: 640px) { .diary-form__grid { grid-template-columns: 1fr; } }

.diary-list { border-top: 1px solid var(--c-border); }
.diary-entry {
  display: flex;
  align-items: baseline;
  gap: var(--sp-sm);
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--c-border);
}
.diary-entry__date { font-weight: 600; font-size: var(--sz-sm); white-space: nowrap; min-width: 92px; }
.diary-entry__body { flex: 1; display: flex; flex-wrap: wrap; gap: 0.35rem 0.75rem; }
.diary-entry__facts { font-size: var(--sz-sm); }
.diary-entry__note { font-size: var(--sz-sm); color: var(--c-ink-soft); }
.diary-entry__delete {
  background: none; border: none; cursor: pointer;
  color: var(--c-ink-soft); font-size: var(--sz-xs); padding: 0.2rem 0.4rem;
}
.diary-entry__delete:hover { color: var(--c-ink); }

/* Button inside lesson pages */
.mark-complete { margin-top: var(--sp-lg); }

/* ---------- Admin table ---------- */
.admin-table { width: 100%; border-collapse: collapse; font-size: var(--sz-sm); }
.admin-table th, .admin-table td { text-align: left; padding: 0.65rem 0.75rem; border-bottom: 1px solid var(--c-border); }
.admin-table th { font-size: var(--sz-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-ink-soft); }
.admin-status { display:inline-flex; align-items:center; gap:0.35rem; font-size:var(--sz-xs); font-weight:600; }
.admin-status__dot { width:7px; height:7px; border-radius:50%; }
.admin-status--active .admin-status__dot { background: var(--c-accent); }
.admin-status--inactive .admin-status__dot { background: var(--c-ink-soft); }