/* ============================================================
   Mitra Parent Portal — sidebar shell + nav styles
   Mirrors org.css patterns so the parent portal feels like the
   same product family as the org portal, while keeping a
   separate stylesheet so each portal can evolve independently.
   ============================================================ */

/* ---------- Shell: sidebar + content ---------- */
.parent-shell {
  display: grid;
  grid-template-columns: 248px 1fr;
  gap: 28px;
  align-items: start;
}
@media (max-width: 991px) {
  .parent-shell { grid-template-columns: 1fr; gap: 16px; }
}

.parent-sidebar {
  position: sticky;
  top: 16px;
  background: var(--bg-card, #fff);
  border: 1px solid var(--border, #e6e1d6);
  border-radius: 16px;
  padding: 20px 16px;
  box-shadow: 0 1px 3px rgba(27, 58, 92, 0.05);
}
@media (max-width: 991px) {
  .parent-sidebar { position: static; padding: 14px; }
}

/* min-width:0 lets the content column shrink so wide tables/cards
   scroll inside it instead of blowing out the grid. */
.parent-content { min-width: 0; }

/* ---------- Brand block (parent identity at top) ---------- */
.parent-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px 16px 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border, #e6e1d6);
}
.parent-brand-mark {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, #2e6e6e 0%, #1a3a3a 130%);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: 'DM Sans', sans-serif;
  font-weight: 700; font-size: 1.05rem;
  flex-shrink: 0;
}
.parent-brand-text { min-width: 0; }
.parent-brand-name {
  font-family: 'DM Sans', sans-serif;
  font-weight: 700; font-size: 0.98rem;
  color: var(--text, #1a3a3a); line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.parent-brand-kind {
  font-size: 0.72rem; color: var(--text-light, #6c7676);
  text-transform: uppercase; letter-spacing: 0.05em;
}

/* ---------- Child selector (single button → switcher modal) ---------- */
.parent-child-selector {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 12px;
  background: var(--bg, #faf7f0);
  border: 1px solid var(--border, #e6e1d6);
  border-radius: 12px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: background 0.12s, border-color 0.12s;
}
.parent-child-selector:hover { background: #f3efe5; border-color: #d6cdb8; }
.parent-child-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--accent-soft, #d8eaea);
  color: var(--accent, #2e6e6e);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.parent-child-avatar svg { width: 18px; height: 18px; }
.parent-child-text { flex: 1; min-width: 0; }
.parent-child-name {
  display: block;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--text, #1a3a3a);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.parent-child-meta {
  display: block;
  font-size: 0.72rem;
  color: var(--text-light, #6c7676);
}
.parent-child-caret { width: 16px; height: 16px; color: var(--text-light, #6c7676); flex-shrink: 0; }

/* ---------- Sidebar nav ---------- */
.parent-nav { display: flex; flex-direction: column; gap: 2px; }
@media (max-width: 991px) {
  .parent-nav {
    flex-direction: row; overflow-x: auto; gap: 4px;
    padding-bottom: 4px; -webkit-overflow-scrolling: touch;
  }
}
.parent-nav a {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--text-muted, #6c7676);
  font-weight: 500; font-size: 0.95rem;
  text-decoration: none;
  white-space: nowrap;
  border-left: 3px solid transparent;
  transition: background 0.12s, color 0.12s;
}
.parent-nav a:hover { background: var(--bg, #faf7f0); color: var(--accent, #2e6e6e); }
.parent-nav a.active {
  background: var(--accent-soft, #d8eaea);
  color: var(--accent, #2e6e6e);
  font-weight: 700;
  border-left-color: var(--accent, #2e6e6e);
}
@media (max-width: 991px) {
  .parent-nav a { border-left: none; border-bottom: 3px solid transparent; }
  .parent-nav a.active { border-left: none; border-bottom-color: var(--accent, #2e6e6e); }
}
.parent-nav a svg { width: 18px; height: 18px; flex-shrink: 0; }
.parent-nav-sep {
  height: 1px; background: var(--border, #e6e1d6);
  margin: 8px 4px;
}
@media (max-width: 991px) { .parent-nav-sep { display: none; } }
.parent-nav a.parent-nav-signout { color: var(--text-light, #6c7676); }
.parent-nav a.parent-nav-signout:hover { background: #fdecec; color: #c0392b; }

/* ---------- Coming-soon style (used for grayed features e.g. Parent Chat) ---------- */
.parent-coming-soon {
  opacity: 0.55;
  pointer-events: none;
  position: relative;
}
.parent-coming-soon::after {
  content: "Coming soon";
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--bg, #faf7f0);
  border: 1px solid var(--border, #e6e1d6);
  padding: 2px 6px;
  border-radius: 999px;
  color: var(--text-light, #6c7676);
}