/* ReMind — Cổng "Quy trình" cho member. Dùng biến theme của app (styles.css)
   nên tự theo Light/Dark. */

body.member-portal #app { display: none !important; }
body.member-portal #modal,
body.member-portal #contextMenu,
body.member-portal #edgeMenu,
body.member-portal #mapTabs { display: none !important; }
body.member-portal { overflow: hidden; }

#memberPortal.portal {
  position: fixed; inset: 0; z-index: 500;
  display: flex; flex-direction: column;
  background: var(--bg, #f6f4ef);
  color: var(--text, #2c2a26);
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}
#memberPortal[hidden] { display: none; }

.portal-top {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; height: 56px; padding: 0 18px;
  background: var(--panel, #fff); border-bottom: 1px solid var(--border, #e4ddd0);
}
.portal-brand { font-weight: 800; font-size: 16px; color: var(--text, #2c2a26); letter-spacing: .01em; }
.portal-brand-view { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portal-user { display: flex; align-items: center; gap: 12px; }
.portal-uname { font-size: 13px; color: var(--text-soft, #6f6a61); font-weight: 600; }
.portal-logout {
  padding: 8px 14px; border: 1px solid var(--border, #d8d0c1); border-radius: 9px;
  background: var(--panel, #fff); color: var(--text, #2c2a26); cursor: pointer;
  font-size: 13px; font-weight: 600; font-family: inherit;
}
.portal-logout:hover { background: var(--panel-hover, #f0ece3); }
.portal-back {
  padding: 8px 14px; border: 1px solid var(--border, #d8d0c1); border-radius: 9px;
  background: var(--panel, #fff); color: var(--text, #2c2a26); cursor: pointer;
  font-size: 13px; font-weight: 600; font-family: inherit;
}
.portal-back:hover { background: var(--panel-hover, #f0ece3); }

.portal-body { flex: 1 1 auto; overflow-y: auto; padding: 30px 28px 60px; }
.portal-h1 { font-size: 22px; margin: 0 0 20px; color: var(--text, #2c2a26); }
.portal-status { color: var(--text-soft, #6f6a61); font-size: 14px; padding: 30px 4px; }
.portal-empty { max-width: 460px; margin: 8vh auto; text-align: center; color: var(--text-soft, #6f6a61); }
.portal-empty h2 { color: var(--text, #2c2a26); margin: 0 0 8px; }

.portal-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px;
  max-width: 1100px;
}
.portal-card {
  text-align: left; cursor: pointer; font-family: inherit;
  background: var(--panel, #fff); border: 1px solid var(--border, #e4ddd0);
  border-radius: 14px; padding: 18px 18px 16px; position: relative;
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(60,50,35,.08));
  transition: box-shadow .15s, transform .05s, border-color .15s;
  display: flex; flex-direction: column; gap: 10px;
}
.portal-card:hover { box-shadow: var(--shadow, 0 8px 24px rgba(60,50,35,.16)); border-color: var(--accent, #6b5e4b); transform: translateY(-1px); }
.portal-card-title { font-size: 16px; font-weight: 700; color: var(--text, #2c2a26); line-height: 1.35; }
.portal-card-meta { font-size: 12.5px; color: var(--text-soft, #6f6a61); }
.portal-bar { height: 7px; background: var(--panel-2, #e8e2d5); border-radius: 999px; overflow: hidden; }
.portal-bar i { display: block; height: 100%; background: var(--accent, #6b5e4b); transition: width .3s; }
.portal-card.portal-done .portal-bar i { background: #3f8f52; }
.portal-card-go { font-size: 12px; font-weight: 700; color: var(--accent, #b4482e); align-self: flex-end; }
.portal-card.portal-done .portal-card-go::before { content: '✓ '; color: #3f8f52; }

.portal-viewer-wrap { flex: 1 1 auto; min-height: 0; position: relative; display: flex; }
.portal-viewer-mount { flex: 1 1 auto; min-width: 0; position: relative; }

@media (max-width: 560px) {
  .portal-body { padding: 20px 14px 50px; }
  .portal-grid { grid-template-columns: 1fr; }
}

.portal-lang { display: inline-flex; align-items: center; }
.portal-lang-inner { display: inline-flex; }