/* Council 4229 Member Portal — UI v2 Phase 1
   Load AFTER the existing portal.css. */

.portal-app-shell {
  font-size: 16px;
}

.portal-content {
  scroll-behavior: smooth;
}

.portal-page {
  width: min(100%, 1680px);
  margin: 0 auto;
  animation: portalPageIn .18s ease-out;
}

@keyframes portalPageIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Make legacy page headings breathe without forcing every section into a card. */
.portal-page > h1,
.portal-page > h2 {
  margin-top: 0;
  margin-bottom: .55rem;
  line-height: 1.18;
}

.portal-page > p:first-of-type {
  max-width: 760px;
  line-height: 1.7;
  margin-bottom: 1.75rem;
}

/* Comfortable controls across legacy components. Inline styles still control colors. */
.portal-page input:not([type="checkbox"]):not([type="radio"]),
.portal-page select,
.portal-page textarea {
  min-height: 46px;
  border-radius: 8px !important;
  line-height: 1.45;
}

.portal-page textarea { min-height: 96px; }
.portal-page button, .portal-page a { border-radius: 8px; }
.portal-page button { min-height: 40px; }

/* Dashboard */
.portal-dashboard-modern {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.portal-welcome-card {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  min-height: 150px;
  background: linear-gradient(135deg, var(--navy), #0b4a9a);
  box-shadow: 0 16px 38px rgba(0,40,104,.13);
}
.portal-welcome-pattern { position:absolute; inset:0; opacity:.13; background-image: linear-gradient(45deg, transparent 46%, rgba(255,255,255,.22) 48%, rgba(255,255,255,.22) 50%, transparent 52%); background-size:48px 48px; }
.portal-welcome-content { position:relative; z-index:1; display:flex; align-items:center; gap:1.25rem; padding:2rem; min-height:150px; }
.portal-welcome-emblem { width:64px; height:64px; border-radius:16px; display:grid; place-items:center; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2); flex:0 0 auto; }
.portal-welcome-emblem img { width:48px; height:48px; object-fit:contain; }
.portal-eyebrow { color:var(--gold); text-transform:uppercase; letter-spacing:.14em; font-size:.72rem; font-weight:800; margin-bottom:.25rem; }
.portal-welcome-name { color:#fff; font-family:var(--serif); font-size:clamp(1.55rem,2.2vw,2.15rem); font-weight:700; line-height:1.1; }
.portal-welcome-date { color:rgba(255,255,255,.72); margin-top:.4rem; line-height:1.5; }
.portal-degree-row { display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.75rem; }
.portal-degree-chip,.portal-sir-knight-chip { border-radius:999px; padding:.28rem .65rem; font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
.portal-degree-chip { color:#fff; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18); }
.portal-sir-knight-chip { color:var(--navy); background:var(--gold); }

.portal-card-grid { display:grid; gap:1rem; }
.portal-dashboard-stats { grid-template-columns:repeat(4,minmax(0,1fr)); }
.portal-stat-card { background:var(--white); border:1px solid rgba(0,40,104,.08); border-top:3px solid var(--gold); border-radius:14px; padding:1.35rem 1.4rem; box-shadow:0 8px 24px rgba(0,40,104,.045); min-height:118px; }
.portal-stat-value { font-family:var(--serif); color:var(--navy); font-size:1.8rem; font-weight:700; line-height:1; }
.portal-stat-label { margin-top:.5rem; color:var(--navy); font-weight:700; }
.portal-stat-sub { margin-top:.2rem; color:var(--text-muted); font-size:.86rem; }
.portal-stat-card.is-alert { border-top-color:var(--red); }

.portal-dashboard-columns { display:grid; grid-template-columns:minmax(0,1fr) minmax(420px,.82fr); gap:1.5rem; align-items:start; }
.portal-section-kicker { margin:0 0 .65rem .15rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.15em; font-size:.7rem; font-weight:800; }
.portal-panel-card,.portal-empty-card,.portal-event-card { background:var(--white); border:1px solid rgba(0,40,104,.08); border-radius:14px; box-shadow:0 7px 22px rgba(0,40,104,.04); }
.portal-panel-card { padding:1.5rem; }
.portal-panel-accent-gold { border-left:4px solid var(--gold); }
.portal-panel-title { color:var(--navy); font-family:var(--serif); font-size:1.2rem; font-weight:700; margin-bottom:.55rem; }
.portal-panel-body { color:var(--text); line-height:1.7; white-space:pre-wrap; }
.portal-empty-card { padding:1.35rem 1.5rem; color:var(--text-muted); line-height:1.55; }
.portal-event-card { display:flex; align-items:center; gap:1rem; padding:1rem 1.15rem; }
.portal-event-date { width:54px; height:54px; border-radius:12px; background:var(--navy); color:#fff; display:grid; place-content:center; text-align:center; flex:0 0 auto; text-transform:uppercase; font-size:.64rem; letter-spacing:.06em; }
.portal-event-date strong { display:block; font-family:var(--serif); font-size:1.2rem; line-height:1.1; }
.portal-event-title { color:var(--navy); font-weight:750; margin-bottom:.2rem; }
.portal-event-meta { color:var(--text-muted); font-size:.88rem; line-height:1.45; }

/* Sidebar refinement: keep the structure the user likes, improve scanability. */
.portal-sidebar button { border-radius:0 !important; }
.portal-sidebar-link,.portal-sidebar-signout { line-height:1.5; }

@media (max-width: 1180px) {
  .portal-dashboard-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .portal-dashboard-columns { grid-template-columns:1fr; }
}
@media (max-width: 760px) {
  .portal-content { padding:1.35rem 1rem 3rem !important; }
  .portal-dashboard-stats { grid-template-columns:1fr; }
  .portal-welcome-content { padding:1.4rem; align-items:flex-start; }
  .portal-welcome-emblem { width:52px; height:52px; }
  .portal-welcome-emblem img { width:38px; height:38px; }
  .portal-dashboard-columns { display:block; }
  .portal-dashboard-columns > div + div { margin-top:1.5rem; }
}