/*
 * MUFIN Family Portal
 * FP-UX.2 visual enhancement layer
 *
 * Visual-only overrides layered after app-v1.20.css.
 * Functional IDs, JavaScript hooks and application behavior remain unchanged.
 */

:root{
  --mufin-blue:#087cf0;
  --mufin-blue-dark:#004184;
  --mufin-teal:#20d7b0;
  --mufin-ink:#18202a;
  --mufin-muted:#5f6b78;
  --mufin-surface:#ffffff;
  --mufin-border:#e7edf3;
  --mufin-soft-blue:#f4f9ff;

  --portal-header-height:76px;
  --portal-sidebar-width:244px;
  --portal-content-max:1220px;

  --portal-radius-sm:10px;
  --portal-radius-md:16px;
  --portal-radius-lg:22px;
  --portal-radius-pill:999px;

  --portal-shadow-soft:0 10px 30px rgba(24,32,42,.07);
  --portal-shadow-card:0 12px 34px rgba(24,65,100,.08);
  --portal-shadow-hover:0 16px 40px rgba(24,65,100,.12);
}

/* ------------------------------------------------
   BASE
------------------------------------------------ */

html{
  background:#f6f9fc;
}

body.portal-body{
  background:
    radial-gradient(circle at 90% 5%,rgba(32,215,176,.07),transparent 24rem),
    radial-gradient(circle at 30% 0%,rgba(8,124,240,.055),transparent 28rem),
    #f6f9fc;
  color:var(--mufin-ink);
  min-height:100vh;
}

/* ------------------------------------------------
   TOP HEADER
------------------------------------------------ */

.portal-topbar.portal-topbar-themed{
  min-height:var(--portal-header-height);
  padding:0 26px;
  background:rgba(255,255,255,.97);
  border-bottom:1px solid var(--mufin-border);
  box-shadow:0 3px 18px rgba(24,65,100,.055);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

.portal-topbar-themed::after{
  height:2px;
  background:linear-gradient(
    90deg,
    var(--mufin-blue),
    var(--mufin-teal)
  );
  opacity:.78;
}

.portal-topbar-themed .brand{
  padding:5px 8px 5px 0;
  background:transparent;
  backdrop-filter:none;
}

.portal-topbar .brand img{
  object-fit:contain;
}

.portal-topbar .brand-title{
  color:var(--mufin-blue-dark);
  font-weight:800;
  letter-spacing:-.015em;
}

.portal-topbar .brand-sub{
  color:var(--mufin-muted);
  font-weight:500;
}

.topbar-motto{
  color:var(--mufin-blue-dark);
  text-shadow:none;
}

.notifications-menu summary{
  border:1px solid var(--mufin-border);
  background:#fff;
  box-shadow:none;
  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
}

.notifications-menu summary:hover{
  border-color:#c9d9e8;
  box-shadow:0 7px 20px rgba(24,65,100,.08);
  transform:translateY(-1px);
}

.notification-dot{
  background:var(--mufin-teal);
}

.notification-popover,
.user-menu-popover{
  border:1px solid var(--mufin-border);
  border-radius:var(--portal-radius-md);
  box-shadow:0 20px 55px rgba(24,65,100,.15);
}

.user-menu summary{
  border-radius:var(--portal-radius-md);
  transition:background .18s ease;
}

.user-menu summary:hover{
  background:var(--mufin-soft-blue);
}

.user-avatar{
  background:linear-gradient(
    135deg,
    var(--mufin-blue),
    var(--mufin-blue-dark)
  );
  color:#fff;
  box-shadow:0 5px 14px rgba(8,124,240,.18);
}

/* ------------------------------------------------
   PORTAL SIDEBAR
------------------------------------------------ */

.portal-sidebar.portal-sidebar-dark{
  width:var(--portal-sidebar-width);
  background:
    linear-gradient(
      180deg,
      #064b8f 0%,
      #003c75 52%,
      #00315f 100%
    );
  border-right:0;
  box-shadow:8px 0 30px rgba(0,49,95,.09);
}

.portal-nav{
  padding:24px 14px;
  gap:7px;
}

.portal-nav-link{
  min-height:46px;
  padding:10px 13px;
  border-radius:12px;
  border:1px solid transparent;
  color:rgba(255,255,255,.8);
  font-weight:600;
  transition:
    background .18s ease,
    color .18s ease,
    transform .18s ease,
    border-color .18s ease;
}

.portal-nav-link img{
  opacity:.82;
  transition:opacity .18s ease;
}

.portal-nav-link:hover:not(.locked){
  background:rgba(255,255,255,.09);
  color:#fff;
  transform:translateX(2px);
}

.portal-nav-link:hover:not(.locked) img{
  opacity:1;
}

.portal-nav-link.active{
  background:#fff;
  color:var(--mufin-blue-dark);
  border-color:rgba(255,255,255,.85);
  box-shadow:0 8px 22px rgba(0,31,64,.17);
}

.portal-nav-link.active img{
  opacity:1;
}

.portal-nav-link.locked{
  opacity:.5;
}

.sidebar-bottom-brand{
  padding:18px 14px 22px;
}

.sidebar-brand-box{
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.07);
  border-radius:var(--portal-radius-md);
  color:#fff;
}

.sidebar-brand-box span{
  color:rgba(255,255,255,.67);
}

/* ------------------------------------------------
   MAIN CONTENT CANVAS
------------------------------------------------ */

.portal-main.dashboard{
  margin-left:var(--portal-sidebar-width);
  width:calc(100% - var(--portal-sidebar-width));
  padding:32px clamp(22px,3vw,42px) 64px;
  background:transparent;
}

.portal-main > *{
  max-width:var(--portal-content-max);
  margin-left:auto;
  margin-right:auto;
}

/* ------------------------------------------------
   PAGE INTRO / WELCOME
------------------------------------------------ */

.dashboard-themed .welcome{
  position:relative;
  overflow:hidden;
  margin-bottom:24px;
  padding:27px 30px;
  border:1px solid #dcebf8;
  border-radius:var(--portal-radius-lg);
  background:
    linear-gradient(
      110deg,
      rgba(255,255,255,.99),
      rgba(244,249,255,.98)
    );
  box-shadow:var(--portal-shadow-soft);
}

.dashboard-themed .welcome::after{
  content:"";
  position:absolute;
  width:180px;
  height:180px;
  right:-60px;
  top:-90px;
  border-radius:50%;
  background:rgba(32,215,176,.10);
  pointer-events:none;
}

.welcome-copy{
  position:relative;
  z-index:1;
}

.welcome h1{
  margin-top:4px;
  margin-bottom:7px;
  color:var(--mufin-ink);
  letter-spacing:-.025em;
  line-height:1.13;
}

.welcome p{
  color:var(--mufin-muted);
  line-height:1.6;
}

.eyebrow,
.section-kicker{
  color:var(--mufin-blue);
  font-weight:800;
  letter-spacing:.075em;
  text-transform:uppercase;
}

.page-icon{
  background:linear-gradient(
    145deg,
    rgba(8,124,240,.10),
    rgba(32,215,176,.12)
  );
  border:1px solid rgba(8,124,240,.10);
  border-radius:15px;
}

/* ------------------------------------------------
   CARDS / SECTIONS
------------------------------------------------ */

.dashboard-themed .card,
.portal-main .card{
  border:1px solid var(--mufin-border);
  border-radius:var(--portal-radius-lg);
  background:var(--mufin-surface);
  box-shadow:var(--portal-shadow-card);
}

.dashboard-section{
  margin-top:20px;
  padding:26px;
}

.dashboard-section-head{
  padding-bottom:18px;
  margin-bottom:18px;
  border-bottom:1px solid #edf2f6;
}

.dashboard-section-head h2{
  color:var(--mufin-ink);
  letter-spacing:-.02em;
}

.muted{
  color:var(--mufin-muted);
}

/* ------------------------------------------------
   BUTTONS
------------------------------------------------ */

.portal-main .btn,
.portal-layout .btn{
  min-height:42px;
  border-radius:var(--portal-radius-pill);
  padding:10px 18px;
  font-weight:700;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background .18s ease,
    border-color .18s ease;
}

.portal-main .btn:hover,
.portal-layout .btn:hover{
  transform:translateY(-1px);
}

.portal-main .btn-blue,
.portal-main .btn-primary,
.portal-layout .btn-blue,
.portal-layout .btn-primary{
  border-color:var(--mufin-blue);
  background:var(--mufin-blue);
  color:#fff;
  box-shadow:0 7px 18px rgba(8,124,240,.17);
}

.portal-main .btn-blue:hover,
.portal-main .btn-primary:hover,
.portal-layout .btn-blue:hover,
.portal-layout .btn-primary:hover{
  background:#0571dc;
  border-color:#0571dc;
  box-shadow:0 10px 24px rgba(8,124,240,.22);
}

.portal-main .btn-secondary,
.portal-layout .btn-secondary{
  background:#fff;
  border-color:#cfdae5;
  color:var(--mufin-blue-dark);
}

/* ------------------------------------------------
   FORM ELEMENTS
------------------------------------------------ */

.portal-main input,
.portal-main select,
.portal-main textarea,
.portal-layout input,
.portal-layout select,
.portal-layout textarea{
  border-color:#d8e2eb;
  border-radius:var(--portal-radius-sm);
  transition:
    border-color .18s ease,
    box-shadow .18s ease;
}

.portal-main input:focus,
.portal-main select:focus,
.portal-main textarea:focus,
.portal-layout input:focus,
.portal-layout select:focus,
.portal-layout textarea:focus{
  border-color:rgba(8,124,240,.65);
  box-shadow:0 0 0 3px rgba(8,124,240,.10);
  outline:none;
}

/* ------------------------------------------------
   PAYMENTS
------------------------------------------------ */

.payments-page .payment-action-card,
.payments-page .payment-security-card{
  transition:
    transform .18s ease,
    box-shadow .18s ease;
}

.payments-page .payment-action-card:hover,
.payments-page .payment-security-card:hover{
  transform:translateY(-2px);
  box-shadow:var(--portal-shadow-hover);
}

/* ------------------------------------------------
   REGISTRATION SHELL
------------------------------------------------ */

.portal-layout .registration-shell{
  max-width:var(--portal-content-max);
}

.portal-layout .registration-shell .card{
  border-color:var(--mufin-border);
  border-radius:var(--portal-radius-lg);
  box-shadow:var(--portal-shadow-card);
}

/* ------------------------------------------------
   ACCESSIBILITY
------------------------------------------------ */

.portal-nav-link:focus-visible,
.btn:focus-visible,
.notifications-menu summary:focus-visible,
.user-menu summary:focus-visible{
  outline:3px solid rgba(32,215,176,.42);
  outline-offset:2px;
}

/* ------------------------------------------------
   RESPONSIVE
------------------------------------------------ */

@media (max-width:1000px){
  :root{
    --portal-sidebar-width:220px;
  }

  .portal-main.dashboard{
    padding-left:24px;
    padding-right:24px;
  }

  .topbar-motto{
    display:none;
  }
}

@media (max-width:800px){
  :root{
    --portal-header-height:70px;
  }

  .portal-topbar.portal-topbar-themed{
    min-height:var(--portal-header-height);
    padding:0 14px;
  }

  .portal-sidebar.portal-sidebar-dark{
    width:min(286px,84vw);
    top:var(--portal-header-height);
    height:calc(100vh - var(--portal-header-height));
    z-index:60;
  }

  .portal-main.dashboard{
    width:100%;
    margin-left:0;
    padding:22px 16px 54px;
  }

  .dashboard-themed .welcome{
    padding:22px;
    border-radius:18px;
  }

  .dashboard-section{
    padding:21px;
  }

  .portal-body.nav-open .sidebar-scrim{
    inset:var(--portal-header-height) 0 0;
  }
}

@media (max-width:560px){
  .portal-topbar .brand-sub{
    display:none;
  }

  .portal-topbar .brand-title{
    font-size:14px;
  }

  .portal-main.dashboard{
    padding:18px 12px 46px;
  }

  .dashboard-themed .welcome{
    padding:19px;
  }

  .dashboard-section{
    padding:18px;
  }

  .dashboard-section-head{
    align-items:flex-start;
  }

  .portal-main .btn,
  .portal-layout .btn{
    min-height:44px;
  }
}

@media (prefers-reduced-motion:reduce){
  .portal-nav-link,
  .btn,
  .notifications-menu summary,
  .payments-page .payment-action-card,
  .payments-page .payment-security-card{
    transition:none !important;
  }
}

/* ================================================================
   FP-UX.2F DASHBOARD SHELL REFINEMENT START
   Visual refinement after first rendered Dashboard review.
   ================================================================ */

/*
 * HEADER
 * Reduce the visual weight of the legacy decorative header while
 * preserving all existing branding and functional controls.
 */

.portal-topbar.portal-topbar-themed{
  min-height:72px;
  padding:0 24px;
  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,.985) 0%,
      rgba(248,252,255,.985) 72%,
      rgba(242,252,250,.985) 100%
    );
  border-bottom:1px solid #dce8f2;
  box-shadow:0 4px 20px rgba(24,65,100,.055);
}

/*
 * Existing wave/header artwork is retained but visually subdued.
 * This keeps MUFIN identity without competing with portal content.
 */
.portal-topbar-themed::before{
  opacity:.28;
  filter:saturate(.78);
}

.portal-topbar-themed::after{
  height:2px;
  opacity:.9;
  background:linear-gradient(
    90deg,
    var(--mufin-blue) 0%,
    var(--mufin-blue) 55%,
    var(--mufin-teal) 100%
  );
}

.portal-topbar .brand-title{
  color:var(--mufin-blue-dark);
  font-weight:800;
}

.portal-topbar .brand-sub{
  color:#536779;
  font-weight:500;
}

.topbar-motto{
  color:var(--mufin-blue-dark);
  font-size:.84rem;
  line-height:1.18;
  font-weight:700;
  opacity:.88;
}

/* ------------------------------------------------
   SIDEBAR REFINEMENT
------------------------------------------------ */

.portal-sidebar.portal-sidebar-dark{
  background:
    linear-gradient(
      180deg,
      #07549a 0%,
      var(--mufin-blue-dark) 44%,
      #003766 100%
    );
  box-shadow:7px 0 26px rgba(0,49,95,.08);
}

.portal-nav{
  padding:22px 16px;
  gap:6px;
}

.portal-nav-link{
  min-height:44px;
  border-radius:12px;
  color:rgba(255,255,255,.84);
}

.portal-nav-link:hover:not(.locked){
  background:rgba(255,255,255,.09);
  color:#fff;
}

/*
 * Active navigation now uses the primary MUFIN blue family rather
 * than introducing a separate bright cyan visual language.
 */
.portal-nav-link.active{
  position:relative;
  background:rgba(255,255,255,.12);
  color:#fff;
  border-color:rgba(255,255,255,.16);
  box-shadow:none;
}

.portal-nav-link.active::before{
  content:"";
  position:absolute;
  left:0;
  top:10px;
  bottom:10px;
  width:3px;
  border-radius:0 4px 4px 0;
  background:var(--mufin-teal);
}

.sidebar-bottom-brand{
  padding-bottom:18px;
}

.sidebar-brand-box{
  background:rgba(0,36,70,.22);
  border-color:rgba(92,213,204,.30);
}

.sidebar-bottom-brand img,
.portal-sidebar .music-notes,
.portal-sidebar .sidebar-music{
  max-height:112px;
  object-fit:contain;
  opacity:.88;
}

/* ------------------------------------------------
   DESKTOP CONTENT UTILIZATION
------------------------------------------------ */

:root{
  --portal-content-max:1320px;
}

.portal-main.dashboard{
  padding:
    28px
    clamp(24px,2.4vw,38px)
    60px;
}

/*
 * Keep breathing room after the sidebar without wasting a large
 * portion of desktop width.
 */
.portal-main > *{
  width:100%;
  max-width:var(--portal-content-max);
}

/* ------------------------------------------------
   WELCOME / PAGE INTRO
------------------------------------------------ */

.dashboard-themed .welcome{
  min-height:150px;
  margin-bottom:22px;
  padding:25px 30px;
  border-color:#dce8f2;
  border-radius:20px;
  box-shadow:0 9px 28px rgba(24,65,100,.065);
  background:
    linear-gradient(
      108deg,
      #fff 0%,
      #fff 72%,
      #f3fbfa 100%
    );
}

/* Make the decorative circle less dominant. */
.dashboard-themed .welcome::after{
  width:150px;
  height:150px;
  right:-48px;
  top:-76px;
  background:rgba(32,215,176,.075);
}

.welcome h1{
  font-size:clamp(2rem,2.45vw,2.7rem);
  letter-spacing:-.035em;
}

.welcome p{
  margin-top:4px;
  font-size:1rem;
  color:#596979;
}

.welcome .page-icon,
.dashboard-themed .welcome .page-icon{
  width:50px;
  height:50px;
  border-radius:14px;
  background:linear-gradient(
    145deg,
    rgba(8,124,240,.075),
    rgba(32,215,176,.095)
  );
  border-color:rgba(8,124,240,.11);
}

.eyebrow,
.section-kicker{
  color:var(--mufin-blue);
  letter-spacing:.08em;
}

/* ------------------------------------------------
   PRIMARY CTA CONSISTENCY
------------------------------------------------ */

.portal-main .btn-blue,
.portal-main .btn-primary,
.portal-layout .btn-blue,
.portal-layout .btn-primary{
  background:var(--mufin-blue);
  border-color:var(--mufin-blue);
  box-shadow:0 7px 18px rgba(8,124,240,.16);
}

.portal-main .btn-blue:hover,
.portal-main .btn-primary:hover,
.portal-layout .btn-blue:hover,
.portal-layout .btn-primary:hover{
  background:var(--mufin-blue-dark);
  border-color:var(--mufin-blue-dark);
}

/* ------------------------------------------------
   DASHBOARD KPI CARDS
------------------------------------------------ */

/*
 * Existing markup determines the actual KPI selectors. These
 * declarations intentionally target the common dashboard stat
 * containers without altering markup or JS.
 */

.dashboard-themed .stats-grid,
.dashboard-themed .overview-grid,
.dashboard-themed .summary-grid{
  gap:16px;
  margin-bottom:22px;
}

.dashboard-themed .stat-card,
.dashboard-themed .summary-card,
.dashboard-themed .overview-card{
  min-height:112px;
  padding:22px 24px;
  border:1px solid var(--mufin-border);
  border-radius:18px;
  background:#fff;
  box-shadow:0 8px 24px rgba(24,65,100,.055);
}

.dashboard-themed .stat-card strong,
.dashboard-themed .stat-card .value,
.dashboard-themed .summary-card strong,
.dashboard-themed .summary-card .value,
.dashboard-themed .overview-card strong,
.dashboard-themed .overview-card .value{
  color:var(--mufin-blue-dark);
  font-size:1.9rem;
  line-height:1;
  font-weight:800;
}

/*
 * Preserve existing colored top accents but make them consistent
 * in weight and radius.
 */
.dashboard-themed .stat-card,
.dashboard-themed .summary-card,
.dashboard-themed .overview-card{
  border-top-width:3px;
}

/* ------------------------------------------------
   CONTENT CARDS
------------------------------------------------ */

.dashboard-section{
  margin-top:18px;
  padding:25px 28px;
  border-radius:20px;
}

.dashboard-section-head{
  padding-bottom:16px;
  margin-bottom:17px;
}

.dashboard-section-head h2{
  font-size:clamp(1.4rem,1.7vw,1.75rem);
  line-height:1.18;
}

.dashboard-section-head p{
  color:var(--mufin-muted);
  line-height:1.5;
}

/* ------------------------------------------------
   RESPONSIVE REFINEMENT
------------------------------------------------ */

@media (max-width:1000px){
  :root{
    --portal-content-max:100%;
  }

  .portal-main.dashboard{
    padding:24px 22px 52px;
  }

  .dashboard-themed .welcome{
    min-height:auto;
  }
}

@media (max-width:800px){
  .portal-topbar.portal-topbar-themed{
    min-height:68px;
    padding:0 14px;
  }

  .dashboard-themed .welcome{
    padding:21px;
  }

  .portal-main.dashboard{
    padding:20px 15px 48px;
  }

  .dashboard-section{
    padding:20px;
  }
}

@media (max-width:560px){
  .dashboard-themed .welcome::after{
    width:110px;
    height:110px;
    right:-45px;
    top:-55px;
  }

  .welcome h1{
    font-size:1.85rem;
  }

  .dashboard-section{
    border-radius:17px;
  }
}

/* ================================================================
   FP-UX.2F DASHBOARD SHELL REFINEMENT END
   ================================================================ */

/* ================================================================
   FP-UX.2G FINAL SHELL POLISH START
   Final shell checkpoint before Dashboard content redesign.
   ================================================================ */

/* ------------------------------------------------
   COMPACT APPLICATION HEADER
------------------------------------------------ */

:root{
  --portal-header-height:64px;
  --portal-content-max:1380px;
}

.portal-topbar.portal-topbar-themed{
  min-height:64px;
  height:64px;
  padding:0 22px;
}

/*
 * Keep the existing MUFIN artwork, but treat it as background
 * branding rather than the primary visual element.
 */
.portal-topbar-themed::before{
  opacity:.20;
  background-position:center 44%;
  background-size:cover;
}

.portal-topbar .brand{
  padding-top:3px;
  padding-bottom:3px;
}

.portal-topbar .brand img{
  max-height:42px;
}

.portal-topbar .brand-title{
  line-height:1.08;
}

.portal-topbar .brand-sub{
  line-height:1.08;
  font-size:.82rem;
}

.topbar-motto{
  font-size:.78rem;
  line-height:1.12;
}

.notifications-menu summary{
  min-width:42px;
  min-height:42px;
}

.user-avatar{
  width:42px;
  height:42px;
}

/* ------------------------------------------------
   WIDER DESKTOP CONTENT CANVAS
------------------------------------------------ */

/*
 * Reduce unused space between sidebar and content while allowing
 * cards to use more of large desktop screens.
 */
.portal-main.dashboard{
  padding-top:24px;
  padding-left:clamp(18px,1.8vw,28px);
  padding-right:clamp(18px,2vw,32px);
}

.portal-main > *{
  width:100%;
  max-width:var(--portal-content-max);
}

/*
 * The original layout may apply additional internal horizontal
 * spacing. Normalize the principal dashboard containers.
 */
.dashboard-themed .welcome,
.dashboard-themed .stats-grid,
.dashboard-themed .overview-grid,
.dashboard-themed .summary-grid,
.dashboard-themed .dashboard-section{
  max-width:none;
}

/* ------------------------------------------------
   COMPACT WELCOME
------------------------------------------------ */

.dashboard-themed .welcome{
  min-height:132px;
  padding:22px 27px;
  margin-bottom:18px;
}

.welcome h1{
  font-size:clamp(1.95rem,2.25vw,2.5rem);
}

.welcome p{
  line-height:1.45;
}

.welcome .page-icon,
.dashboard-themed .welcome .page-icon{
  width:46px;
  height:46px;
}

/* ------------------------------------------------
   COMPACT KPI / SUMMARY CARDS
------------------------------------------------ */

.dashboard-themed .stats-grid,
.dashboard-themed .overview-grid,
.dashboard-themed .summary-grid{
  gap:14px;
  margin-bottom:18px;
}

.dashboard-themed .stat-card,
.dashboard-themed .summary-card,
.dashboard-themed .overview-card{
  min-height:94px;
  padding:17px 21px;
  border-radius:17px;
  box-shadow:0 7px 20px rgba(24,65,100,.05);
}

.dashboard-themed .stat-card strong,
.dashboard-themed .stat-card .value,
.dashboard-themed .summary-card strong,
.dashboard-themed .summary-card .value,
.dashboard-themed .overview-card strong,
.dashboard-themed .overview-card .value{
  display:block;
  margin-top:8px;
  font-size:2rem;
  line-height:.95;
  color:var(--mufin-blue-dark);
  font-weight:800;
  letter-spacing:-.035em;
}

.dashboard-themed .stat-card .label,
.dashboard-themed .summary-card .label,
.dashboard-themed .overview-card .label{
  color:#5b6e80;
  font-size:.92rem;
  line-height:1.25;
  font-weight:700;
}

/* ------------------------------------------------
   CONTENT SECTION DENSITY
------------------------------------------------ */

.dashboard-section{
  margin-top:16px;
  padding:23px 26px;
}

.dashboard-section-head{
  padding-bottom:14px;
  margin-bottom:15px;
}

/* ------------------------------------------------
   RESPONSIVE HEADER / CONTENT
------------------------------------------------ */

@media (max-width:1000px){
  :root{
    --portal-content-max:100%;
  }

  .portal-main.dashboard{
    padding-left:18px;
    padding-right:18px;
  }
}

@media (max-width:800px){
  :root{
    --portal-header-height:64px;
  }

  .portal-topbar.portal-topbar-themed{
    height:64px;
    min-height:64px;
  }

  .portal-sidebar.portal-sidebar-dark{
    top:64px;
    height:calc(100vh - 64px);
  }

  .portal-body.nav-open .sidebar-scrim{
    inset:64px 0 0;
  }

  .portal-main.dashboard{
    padding:18px 14px 46px;
  }

  .dashboard-themed .welcome{
    min-height:auto;
  }
}

@media (max-width:560px){
  .portal-topbar .brand img{
    max-height:38px;
  }

  .dashboard-themed .welcome{
    padding:19px;
  }

  .dashboard-themed .stat-card,
  .dashboard-themed .summary-card,
  .dashboard-themed .overview-card{
    min-height:88px;
  }
}

/* ================================================================
   FP-UX.2G FINAL SHELL POLISH END
   ================================================================ */

/* ================================================================
   FP-UX.3B DASHBOARD CONTENT EXPERIENCE START

   Presentation-only enhancement of populated dashboard content.
   Existing IDs, JS hooks and data attributes remain unchanged.
   ================================================================ */

/* ------------------------------------------------
   DASHBOARD CONTENT SECTIONS
------------------------------------------------ */

.dashboard-themed .family-card,
.dashboard-themed .billing-information-card,
.dashboard-themed #available-programs,
.dashboard-themed #courses{
  border:1px solid var(--mufin-border);
  border-radius:20px;
  background:rgba(255,255,255,.98);
  box-shadow:0 8px 24px rgba(24,65,100,.055);
}

.dashboard-themed .family-card{
  padding:24px 26px;
}

.dashboard-themed .family-card .section-head,
.dashboard-themed #available-programs .section-head,
.dashboard-themed #courses .section-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  margin-bottom:18px;
}

.dashboard-themed .section-kicker{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:4px 9px;
  border-radius:999px;
  background:#edf7ff;
  color:var(--mufin-blue-dark);
  font-size:.7rem;
  line-height:1;
  font-weight:800;
  letter-spacing:.065em;
  text-transform:uppercase;
}

.dashboard-themed .family-card h2,
.dashboard-themed #available-programs h2,
.dashboard-themed #courses h2{
  margin:0;
  color:var(--mufin-ink);
  font-size:1.35rem;
  letter-spacing:-.025em;
}

/* ------------------------------------------------
   FAMILY MEMBERS
------------------------------------------------ */

.dashboard-themed .family-list{
  display:grid;
  gap:10px;
  margin-top:14px;
}

.dashboard-themed .family-person-row{
  position:relative;
  grid-template-columns:
    minmax(190px,1.35fr)
    minmax(190px,1fr)
    minmax(190px,1fr)
    auto;
  gap:18px;
  align-items:center;
  min-height:84px;
  padding:16px 18px;
  border:1px solid #e4edf4;
  border-radius:16px;
  background:linear-gradient(135deg,#fff 0%,#fbfdff 100%);
  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
}

.dashboard-themed .family-person-row:hover{
  border-color:#cbddeb;
  box-shadow:0 7px 18px rgba(24,65,100,.07);
  transform:translateY(-1px);
}

.dashboard-themed .family-person-row > div:first-child b{
  display:block;
  color:var(--mufin-ink);
  font-size:1rem;
  line-height:1.25;
}

.dashboard-themed .family-person-row .small{
  font-size:.79rem;
  line-height:1.4;
}

.dashboard-themed .family-person-row .pill{
  padding:5px 9px;
  border-radius:999px;
  font-size:.69rem;
  font-weight:800;
  letter-spacing:.01em;
}

.dashboard-themed .family-person-row .pill:not(.blue){
  background:#eaf9f5;
  color:#08745e;
}

.dashboard-themed .family-person-row .pill.blue{
  background:#eaf4ff;
  color:#075eae;
}

.dashboard-themed .portal-access-line{
  margin-top:7px;
  color:#70808e;
}

.dashboard-themed .family-row-actions .btn-small{
  min-height:34px;
  padding:7px 13px;
  border-radius:10px;
  background:#fff;
  color:var(--mufin-blue-dark);
  border:1px solid #cfdde8;
  box-shadow:none;
}

.dashboard-themed .family-row-actions .btn-small:hover{
  border-color:#9fc1dd;
  background:#f5faff;
}

.dashboard-themed #addFamilyMember{
  border-radius:11px;
  min-height:39px;
}

/* ------------------------------------------------
   BILLING
------------------------------------------------ */

.dashboard-themed .billing-information-card{
  padding:23px 26px;
}

.dashboard-themed .billing-info-grid{
  grid-template-columns:
    minmax(210px,.9fr)
    minmax(270px,1.25fr)
    auto;
  gap:14px;
}

.dashboard-themed .billing-readonly{
  min-height:67px;
  padding:11px 14px;
  border:1px solid #e0eaf1;
  border-radius:13px;
  background:#f8fbfd;
}

.dashboard-themed .billing-readonly label{
  color:#6d7d89;
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.06em;
}

.dashboard-themed .billing-readonly b{
  color:var(--mufin-ink);
}

.dashboard-themed .billing-info-grid input{
  min-height:44px;
  border-color:#cfdee8;
  border-radius:11px;
  background:#fff;
}

.dashboard-themed .billing-save .btn{
  min-height:44px;
  white-space:nowrap;
}

/* ------------------------------------------------
   PERFORMANCE PROGRAMS
------------------------------------------------ */

.dashboard-themed #available-programs{
  padding:24px 26px;
}

.dashboard-themed .available-program-grid{
  gap:14px;
}

.dashboard-themed .available-program-card{
  grid-template-columns:125px minmax(0,1fr);
  gap:18px;
  padding:16px;
  border:1px solid #e1eaf1;
  border-radius:17px;
  background:linear-gradient(145deg,#fff,#f8fbff);
  box-shadow:none;
}

.dashboard-themed .family-flyer-thumb img{
  height:160px;
  border-radius:11px;
  background:#f6f9fb;
}

.dashboard-themed .family-flyer-thumb span{
  color:#738391;
  font-size:.66rem;
}

.dashboard-themed .available-program-copy h3{
  margin:7px 0 4px;
  color:var(--mufin-ink);
  font-size:1.08rem;
  line-height:1.25;
}

.dashboard-themed .program-event-name{
  color:var(--mufin-blue-dark);
}

.dashboard-themed .available-program-meta{
  padding:10px 12px;
  border-radius:11px;
  background:#f4f8fb;
  color:#536b7b;
}

.dashboard-themed .program-enroll-btn{
  min-height:38px;
  padding:9px 14px;
  border-radius:10px;
}

/* ------------------------------------------------
   COURSES
------------------------------------------------ */

.dashboard-themed #courses{
  padding:24px 26px;
}

.dashboard-themed #courseList{
  display:grid;
  gap:10px;
}

.dashboard-themed #courseList .person-row,
.dashboard-themed #courseList .course-row,
.dashboard-themed #courseList .course-card{
  border:1px solid #e2ebf2;
  border-radius:15px;
  background:linear-gradient(135deg,#fff,#fbfdff);
}

.dashboard-themed #courseList .person-row{
  min-height:72px;
  padding:14px 17px;
}

/* ------------------------------------------------
   EMPTY STATES
------------------------------------------------ */

.dashboard-themed .empty-state{
  min-height:110px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:5px;
  padding:22px;
  border:1px dashed #cddde8;
  border-radius:15px;
  background:#f9fcfe;
  color:#6c7e8c;
}

.dashboard-themed .empty-state b{
  color:#314c61;
}

.dashboard-themed .empty-state span{
  font-size:.85rem;
  line-height:1.5;
}

/* ------------------------------------------------
   MODALS — VISUAL ALIGNMENT ONLY
------------------------------------------------ */

.dashboard-themed .family-member-modal,
.dashboard-themed .program-enroll-modal{
  border:1px solid rgba(255,255,255,.7);
  border-radius:20px;
  box-shadow:0 24px 65px rgba(10,42,66,.24);
}

.dashboard-themed .program-student-choice{
  border-color:#dfe9f0;
  border-radius:12px;
}

.dashboard-themed .program-student-choice:hover:not(.already-enrolled){
  border-color:#b8d2e5;
  background:#f8fbff;
}

/* ------------------------------------------------
   RESPONSIVE CONTENT
------------------------------------------------ */

@media(max-width:1050px){
  .dashboard-themed .family-person-row{
    grid-template-columns:minmax(170px,1.2fr) minmax(170px,1fr);
  }

  .dashboard-themed .family-row-actions{
    justify-content:flex-start;
  }
}

@media(max-width:800px){
  .dashboard-themed .family-card,
  .dashboard-themed .billing-information-card,
  .dashboard-themed #available-programs,
  .dashboard-themed #courses{
    padding:20px;
  }

  .dashboard-themed .family-person-row{
    grid-template-columns:1fr;
    gap:9px;
  }

  .dashboard-themed .billing-info-grid{
    grid-template-columns:1fr;
  }

  .dashboard-themed .billing-save .btn{
    width:100%;
  }
}

@media(max-width:620px){
  .dashboard-themed .family-card .section-head,
  .dashboard-themed #available-programs .section-head,
  .dashboard-themed #courses .section-head{
    flex-direction:column;
  }

  .dashboard-themed #addFamilyMember{
    width:100%;
  }

  .dashboard-themed .available-program-card{
    grid-template-columns:1fr;
  }

  .dashboard-themed .family-flyer-thumb{
    max-width:220px;
  }

  .dashboard-themed .family-flyer-thumb img{
    height:250px;
  }
}

/* ================================================================
   FP-UX.3B DASHBOARD CONTENT EXPERIENCE END
   ================================================================ */

/* ================================================================
   FP-UX.3B.2 DESKTOP SHELL SPACING FIX START

   Root cause:
   app-v1.20.css constrains .portal-layout .dashboard-themed to
   max-width:1220px and centers it inside the grid content column.

   On wide desktop screens that creates artificial whitespace between
   the 232px sidebar and the dashboard.

   Keep the grid/sidebar architecture intact. Allow the dashboard to
   occupy its full grid column and use normal dashboard padding for
   the intentional sidebar-to-content spacing.
   ================================================================ */

@media (min-width:1001px){

  .portal-layout > .portal-main.dashboard.dashboard-themed{
    width:100%;
    max-width:none;
    margin-left:0;
    margin-right:0;

    padding-left:24px;
    padding-right:28px;
  }

  .portal-layout > .portal-main.dashboard.dashboard-themed > *{
    width:100%;
    max-width:none;
  }

}

/* ================================================================
   FP-UX.3B.2 DESKTOP SHELL SPACING FIX END
   ================================================================ */

/* ================================================================
   FP-UX.3B.3 HEADER WORKSPACE ALIGNMENT START

   Desktop portal workspace should begin directly below the themed
   header divider.

   Sidebar begins at the workspace boundary.
   Dashboard keeps its own internal top padding so the Welcome card
   retains intentional breathing room.
   ================================================================ */

@media (min-width:801px){

  /*
   * Remove any desktop separation above the portal grid itself.
   * The header provides the visual boundary.
   */
  .portal-body .portal-layout{
    margin-top:0;
    padding-top:0;
  }

  /*
   * Sticky sidebar belongs directly against the bottom edge of
   * the 64px portal header.
   */
  .portal-layout > .portal-sidebar.portal-sidebar-dark{
    top:var(--portal-header-height,64px);
    height:calc(100vh - var(--portal-header-height,64px));
    margin-top:0;
    align-self:start;
  }

  /*
   * Do NOT remove the dashboard's internal breathing room.
   * Only the sidebar should visually touch the header boundary.
   */
  .portal-layout > .portal-main.dashboard.dashboard-themed{
    margin-top:0;
    padding-top:24px;
  }

}

/* ================================================================
   FP-UX.3B.3 HEADER WORKSPACE ALIGNMENT END
   ================================================================ */

/* ================================================================
   FP-UX.3C PORTAL BUTTON NORMALIZATION START

   Standard MUFIN authenticated-portal action geometry.

   Intent:
   - application actions use rounded rectangles, not capsules
   - primary and secondary actions share consistent geometry
   - small actions remain compact
   - status pills remain pills
   - sidebar navigation remains unchanged
   ================================================================ */

:root{
  --portal-btn-radius:11px;
  --portal-btn-small-radius:9px;
  --portal-btn-height:44px;
  --portal-btn-small-height:36px;
}

/* ------------------------------------------------
   STANDARD ACTION BUTTON
------------------------------------------------ */

.portal-main .btn,
.registration-shell .btn{
  min-height:var(--portal-btn-height);
  padding:10px 17px;
  border-radius:var(--portal-btn-radius);
  font-size:14px;
  font-weight:750;
  line-height:1.2;
  letter-spacing:-.005em;
  transition:
    background-color .16s ease,
    border-color .16s ease,
    box-shadow .16s ease,
    transform .16s ease;
}

/* ------------------------------------------------
   PRIMARY ACTIONS
------------------------------------------------ */

.portal-main .btn-primary,
.portal-main .btn-blue,
.registration-shell .btn-primary,
.registration-shell .btn-blue{
  border-radius:var(--portal-btn-radius);
  box-shadow:0 6px 16px rgba(8,124,240,.14);
}

.portal-main .btn-primary:hover:not(:disabled),
.portal-main .btn-blue:hover:not(:disabled),
.registration-shell .btn-primary:hover:not(:disabled),
.registration-shell .btn-blue:hover:not(:disabled){
  transform:translateY(-1px);
  box-shadow:0 8px 19px rgba(8,124,240,.18);
}

.portal-main .btn-primary:active:not(:disabled),
.portal-main .btn-blue:active:not(:disabled),
.registration-shell .btn-primary:active:not(:disabled),
.registration-shell .btn-blue:active:not(:disabled){
  transform:translateY(0);
  box-shadow:0 4px 10px rgba(8,124,240,.13);
}

/* ------------------------------------------------
   SECONDARY ACTIONS
------------------------------------------------ */

.portal-main .btn-secondary,
.registration-shell .btn-secondary{
  border-radius:var(--portal-btn-radius);
  border:1px solid #cadbe7;
  background:#fff;
  box-shadow:0 2px 6px rgba(24,65,100,.035);
}

.portal-main .btn-secondary:hover:not(:disabled),
.registration-shell .btn-secondary:hover:not(:disabled){
  background:#f5faff;
  border-color:#a9c8dd;
  transform:translateY(-1px);
}

/* ------------------------------------------------
   SMALL / ROW ACTIONS
------------------------------------------------ */

.portal-main .btn-small,
.portal-main .family-row-actions .btn-small,
.registration-shell .btn-small{
  min-height:var(--portal-btn-small-height);
  padding:7px 13px;
  border-radius:var(--portal-btn-small-radius);
  font-size:.84rem;
  font-weight:750;
}

/* ------------------------------------------------
   DASHBOARD-SPECIFIC ACTION CONSISTENCY
------------------------------------------------ */

/* Welcome CTA */
.dashboard-themed .welcome .btn,
.dashboard-themed .welcome .btn-primary,
.dashboard-themed .welcome .btn-blue{
  min-height:44px;
  border-radius:11px;
  padding-left:20px;
  padding-right:20px;
}

/* Add Family Member */
.dashboard-themed #addFamilyMember{
  min-height:42px;
  border-radius:11px;
  padding-left:17px;
  padding-right:17px;
}

/* Program enrollment */
.dashboard-themed .program-enroll-btn{
  min-height:40px;
  border-radius:10px;
  padding:9px 15px;
}

/* Family edit action */
.dashboard-themed .family-row-actions .btn-small{
  min-height:36px;
  border-radius:9px;
  padding:7px 13px;
}

/* ------------------------------------------------
   ACCESSIBILITY / DISABLED STATE
------------------------------------------------ */

.portal-main .btn:focus-visible,
.registration-shell .btn:focus-visible{
  outline:3px solid rgba(8,124,240,.20);
  outline-offset:2px;
}

.portal-main .btn:disabled,
.registration-shell .btn:disabled{
  transform:none;
  box-shadow:none;
  cursor:not-allowed;
}

/*
 * Deliberately NOT normalized here:
 *
 * .portal-nav-link  — navigation, not an action button
 * .pill             — semantic/status chip
 * notification/user-menu controls
 */

/* ================================================================
   FP-UX.3C PORTAL BUTTON NORMALIZATION END
   ================================================================ */

/* ================================================================
   FP-UX.3C.1 FAMILY ROW COLUMN ALIGNMENT START

   Family rows can contain different numbers of role badges.
   Align information columns to a common top baseline rather than
   independently centering each variable-height content block.
   ================================================================ */

@media (min-width:801px){

  .dashboard-themed .family-person-row{
    align-items:start;
  }

  .dashboard-themed .family-person-row > div{
    min-width:0;
    align-self:start;
  }

  /*
   * Keep the row action vertically balanced while informational
   * columns share the same top baseline.
   */
  .dashboard-themed .family-person-row > .family-row-actions{
    align-self:center;
  }

}

/* ================================================================
   FP-UX.3C.1 FAMILY ROW COLUMN ALIGNMENT END
   ================================================================ */

/* ================================================================
   FP-UX.3C.3 LOCK FAMILY ROW COLUMNS START

   Maintain identical information-column positions across every
   family row, including the account-owner row which has no Edit
   action.

   Column model:
   1. Member
   2. Role / portal access
   3. Courses
   4. Action
   ================================================================ */

@media (min-width:981px){

  .dashboard-themed .family-person-row{
    grid-template-columns:
      minmax(250px,1.35fr)
      minmax(260px,1fr)
      minmax(210px,.9fr)
      72px;

    column-gap:24px;
    align-items:start;
  }

  /* Explicitly lock each generated child into its logical column. */

  .dashboard-themed .family-person-row > div:nth-child(1){
    grid-column:1;
  }

  .dashboard-themed .family-person-row > div:nth-child(2){
    grid-column:2;
  }

  .dashboard-themed .family-person-row > div:nth-child(3){
    grid-column:3;
  }

  .dashboard-themed .family-person-row > .family-row-actions{
    grid-column:4;
    justify-self:end;
    align-self:center;
  }

  /*
   * The account-owner row has only three generated children.
   * The explicit four-track grid still reserves column 4, so its
   * first three columns remain identical to rows containing Edit.
   */
}

/* Preserve existing responsive stacking behavior. */

@media (max-width:980px) and (min-width:801px){

  .dashboard-themed .family-person-row{
    grid-template-columns:
      minmax(170px,1.2fr)
      minmax(170px,1fr);
  }

  .dashboard-themed .family-person-row > div:nth-child(1),
  .dashboard-themed .family-person-row > div:nth-child(2),
  .dashboard-themed .family-person-row > div:nth-child(3),
  .dashboard-themed .family-person-row > .family-row-actions{
    grid-column:auto;
  }

}

@media (max-width:800px){

  .dashboard-themed .family-person-row{
    grid-template-columns:1fr;
  }

  .dashboard-themed .family-person-row > div:nth-child(1),
  .dashboard-themed .family-person-row > div:nth-child(2),
  .dashboard-themed .family-person-row > div:nth-child(3),
  .dashboard-themed .family-person-row > .family-row-actions{
    grid-column:1;
  }

}

/* ================================================================
   FP-UX.3C.3 LOCK FAMILY ROW COLUMNS END
   ================================================================ */

/* ================================================================
   FP-UX.3D HEADER BRAND CLEANUP START

   MUFIN logo is the authenticated portal-home affordance.
   The redundant portal title/subtitle beside the logo is removed.
   ================================================================ */

.portal-topbar .portal-home-brand{
  display:inline-flex;
  align-items:center;
  flex:none;
  text-decoration:none;
  border-radius:8px;
}

.portal-topbar .portal-home-brand:focus-visible{
  outline:3px solid rgba(8,124,240,.20);
  outline-offset:3px;
}

.portal-topbar .portal-home-brand img{
  display:block;
}

/* ================================================================
   FP-UX.3D HEADER BRAND CLEANUP END
   ================================================================ */

/* ================================================================
   FP-UX.3D.3 HEADER LOGO VISIBILITY START

   Increase logo visibility without changing the approved
   64px application header geometry.
   ================================================================ */

.portal-topbar .portal-home-brand img{
  width:auto;
  height:48px;
  max-height:48px;
  object-fit:contain;
}

@media (max-width:800px){
  .portal-topbar .portal-home-brand img{
    height:44px;
    max-height:44px;
  }
}

/* ================================================================
   FP-UX.3D.3 HEADER LOGO VISIBILITY END
   ================================================================ */

/* ================================================================
   FP-UX.3D.7 HEADER LOGO READABILITY START

   Give the complete MUFIN logo more horizontal display area so the
   Music & Fine Arts Academy line remains visible, while preserving
   the approved 64px application-header geometry.
   ================================================================ */

.portal-topbar .portal-home-brand{
  width:160px;
  height:60px;
  padding:0;
  justify-content:flex-start;
  overflow:visible;
  background:transparent;
  backdrop-filter:none;
}

.portal-topbar .portal-home-brand img{
  width:160px;
  height:58px;
  max-width:160px;
  max-height:58px;
  object-fit:contain;
  object-position:left center;
}

@media (max-width:800px){
  .portal-topbar .portal-home-brand{
    width:145px;
    height:58px;
  }

  .portal-topbar .portal-home-brand img{
    width:145px;
    height:56px;
    max-width:145px;
    max-height:56px;
  }
}

@media (max-width:520px){
  .portal-topbar .portal-home-brand{
    width:126px;
  }

  .portal-topbar .portal-home-brand img{
    width:126px;
    max-width:126px;
  }
}

/* ================================================================
   FP-UX.3D.7 HEADER LOGO READABILITY END
   ================================================================ */

/* ================================================================
   FP-UX.3E BILLING INFORMATION REFINEMENT START

   Visual-only refinement of the Dashboard billing section.
   Functional billing IDs and Firestore behavior remain unchanged.
   ================================================================ */

.dashboard-themed .billing-information-card{
  scroll-margin-top:88px;
}

.dashboard-themed .billing-info-grid{
  display:grid;
  grid-template-columns:
    minmax(250px,.9fr)
    minmax(360px,1.35fr)
    auto;
  gap:18px;
  align-items:start;
  margin-top:18px;
}

.dashboard-themed .billing-readonly{
  min-height:94px;
  padding:14px 16px;
  display:grid;
  align-content:center;
  gap:5px;
  border:1px solid var(--mufin-border);
  border-radius:12px;
  background:var(--mufin-soft-blue);
  box-shadow:none;
}

.dashboard-themed .billing-readonly label{
  margin:0;
  font-size:11px;
  line-height:1.25;
  font-weight:800;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--mufin-muted);
}

.dashboard-themed #portalLoginEmail{
  display:block;
  min-width:0;
  overflow-wrap:anywhere;
  font-size:14px;
  line-height:1.4;
  font-weight:750;
  color:var(--mufin-ink);
}

.dashboard-themed .billing-readonly small{
  font-size:12px;
  line-height:1.4;
  color:var(--mufin-muted);
}

.dashboard-themed .billing-info-grid > .field{
  margin:0;
  gap:7px;
}

.dashboard-themed .billing-info-grid > .field label{
  margin:0;
}

.dashboard-themed #billingEmail{
  min-height:44px;
  border-radius:11px;
}

.dashboard-themed .billing-info-grid > .field small{
  margin-top:1px;
  line-height:1.4;
}

/*
 * Align the action with the input rather than with the helper
 * text underneath the input.
 */
.dashboard-themed .billing-save{
  display:flex;
  align-items:flex-start;
  padding:26px 0 0;
}

.dashboard-themed #saveBillingEmail{
  min-height:44px;
  white-space:nowrap;
}

/* Tablet/mobile: stack naturally and remove desktop alignment offset. */
@media (max-width:900px){
  .dashboard-themed .billing-info-grid{
    grid-template-columns:1fr;
    gap:14px;
  }

  .dashboard-themed .billing-readonly{
    min-height:0;
  }

  .dashboard-themed .billing-save{
    padding-top:0;
  }

  .dashboard-themed #saveBillingEmail{
    width:100%;
  }
}

/* ================================================================
   FP-UX.3E BILLING INFORMATION REFINEMENT END
   ================================================================ */

/* ================================================================
   FP-UX.3F UPCOMING PERFORMANCE PROGRAMS START

   Dashboard-only visual refinement.
   Existing program renderer and enrollment behavior are untouched.
   ================================================================ */

.dashboard-themed #available-programs{
  scroll-margin-top:88px;
}

.dashboard-themed #available-programs .section-head,
.dashboard-themed .programs-section .section-head{
  align-items:flex-start;
  gap:16px;
}

.dashboard-themed .program-list,
.dashboard-themed .programs-list,
.dashboard-themed .performance-program-list{
  gap:14px;
}

/*
 * Existing program cards/rows retain their renderer-defined classes.
 * These selectors intentionally support the established program
 * naming variants without altering markup or JavaScript.
 */
.dashboard-themed .program-card,
.dashboard-themed .program-row,
.dashboard-themed .performance-program-card{
  position:relative;
  border:1px solid var(--mufin-border);
  border-radius:16px;
  background:var(--mufin-surface);
  box-shadow:0 5px 18px rgba(24,32,42,.055);
  overflow:hidden;
}

.dashboard-themed .program-card::before,
.dashboard-themed .program-row::before,
.dashboard-themed .performance-program-card::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  width:4px;
  background:linear-gradient(
    180deg,
    var(--mufin-blue),
    var(--mufin-teal)
  );
}

.dashboard-themed .program-card,
.dashboard-themed .performance-program-card{
  padding:18px 20px 18px 22px;
}

.dashboard-themed .program-row{
  padding:16px 18px 16px 21px;
}

.dashboard-themed .program-card h3,
.dashboard-themed .program-card h4,
.dashboard-themed .program-row h3,
.dashboard-themed .program-row h4,
.dashboard-themed .performance-program-card h3,
.dashboard-themed .performance-program-card h4{
  margin-top:0;
  color:var(--mufin-ink);
  letter-spacing:-.015em;
}

.dashboard-themed .program-meta,
.dashboard-themed .program-details,
.dashboard-themed .performance-program-meta{
  color:var(--mufin-muted);
  line-height:1.5;
}

.dashboard-themed .program-meta{
  display:flex;
  flex-wrap:wrap;
  gap:7px 16px;
}

.dashboard-themed .program-meta > span{
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.dashboard-themed .program-status,
.dashboard-themed .program-badge{
  display:inline-flex;
  align-items:center;
  width:max-content;
  min-height:28px;
  padding:5px 10px;
  border-radius:999px;
  background:var(--mufin-soft-blue);
  border:1px solid rgba(8,124,240,.14);
  color:var(--mufin-blue-dark);
  font-size:11px;
  line-height:1;
  font-weight:800;
  letter-spacing:.025em;
}

.dashboard-themed .program-actions,
.dashboard-themed .program-action{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
}

.dashboard-themed .program-enroll-btn{
  white-space:nowrap;
}

/* Keep empty/loading states intentional rather than oversized. */
.dashboard-themed #available-programs .empty-state,
.dashboard-themed #available-programs .loading-state{
  min-height:96px;
  display:grid;
  place-items:center;
  padding:20px;
  border:1px dashed #d6e3ed;
  border-radius:14px;
  background:#fbfdff;
  color:var(--mufin-muted);
  text-align:center;
}

/* Tablet */
@media (max-width:980px){
  .dashboard-themed .program-card,
  .dashboard-themed .performance-program-card{
    padding:17px 18px 17px 21px;
  }

  .dashboard-themed .program-actions,
  .dashboard-themed .program-action{
    justify-content:flex-start;
  }
}

/* Mobile */
@media (max-width:800px){
  .dashboard-themed .program-card,
  .dashboard-themed .program-row,
  .dashboard-themed .performance-program-card{
    border-radius:14px;
  }

  .dashboard-themed .program-meta{
    display:grid;
    gap:6px;
  }

  .dashboard-themed .program-actions,
  .dashboard-themed .program-action{
    width:100%;
  }

  .dashboard-themed .program-enroll-btn{
    width:100%;
  }
}

/* ================================================================
   FP-UX.3F UPCOMING PERFORMANCE PROGRAMS END
   ================================================================ */

/* =================================================================
   FP-UX.4 COMPLETE PORTAL VISUAL EXPERIENCE START

   Final Phase-A visual layer for:
   - My Courses
   - Payments
   - Registration / Enrollment
   - Login
   - Privacy / supporting pages
   - Responsive behavior
   - Accessibility / interaction consistency

   Existing application behavior is intentionally preserved.
   ================================================================= */


/* ================================================================
   FP-UX.4A — MY COURSES
   ================================================================ */

.dashboard-themed #courseList{
  display:grid;
  gap:12px;
  margin-top:16px;
}

.dashboard-themed .course-summary-row,
.dashboard-themed .course-card,
.dashboard-themed .family-course-card{
  position:relative;
  padding:16px 18px;
  border:1px solid var(--mufin-border);
  border-radius:14px;
  background:var(--mufin-surface);
  box-shadow:0 4px 15px rgba(24,32,42,.045);
}

.dashboard-themed .course-summary-row{
  gap:14px;
}

.dashboard-themed .course-summary-row::before,
.dashboard-themed .course-card::before{
  content:"";
  position:absolute;
  left:0;
  top:14px;
  bottom:14px;
  width:3px;
  border-radius:0 3px 3px 0;
  background:var(--mufin-teal);
}

.dashboard-themed .course-summary-row h3,
.dashboard-themed .course-summary-row h4,
.dashboard-themed .course-card h3,
.dashboard-themed .course-card h4{
  margin-top:0;
  color:var(--mufin-ink);
}

.dashboard-themed .course-summary-status{
  align-self:center;
}

.dashboard-themed #courseList > .muted,
.dashboard-themed #courseList > .empty-state{
  padding:20px;
  border:1px dashed #d6e3ed;
  border-radius:14px;
  background:#fbfdff;
  text-align:center;
}


/* ================================================================
   FP-UX.4B — PAYMENTS
   ================================================================ */

.portal-main #invoiceList,
.portal-main #paymentHistory{
  display:grid;
  gap:12px;
}

.portal-main .invoice-card,
.portal-main .payment-card,
.portal-main .payment-history-row,
.portal-main .invoice-row{
  border:1px solid var(--mufin-border);
  border-radius:14px;
  background:var(--mufin-surface);
  box-shadow:0 4px 16px rgba(24,32,42,.045);
}

.portal-main .invoice-card,
.portal-main .payment-card{
  padding:18px;
}

.portal-main .invoice-row,
.portal-main .payment-history-row{
  padding:14px 16px;
}

.portal-main .invoice-card h3,
.portal-main .payment-card h3,
.portal-main .invoice-row h3{
  color:var(--mufin-ink);
}

.portal-main .invoice-meta,
.portal-main .payment-meta,
.portal-main .payment-date{
  color:var(--mufin-muted);
}

.portal-main .payment-status,
.portal-main .invoice-status{
  display:inline-flex;
  align-items:center;
  width:max-content;
  min-height:27px;
  padding:5px 9px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  background:var(--mufin-soft-blue);
  color:var(--mufin-blue-dark);
  border:1px solid rgba(8,124,240,.14);
}

.portal-main #invoiceList > .muted,
.portal-main #paymentHistory > .muted,
.portal-main #invoiceList > .empty-state,
.portal-main #paymentHistory > .empty-state{
  padding:22px;
  border:1px dashed #d6e3ed;
  border-radius:14px;
  background:#fbfdff;
  text-align:center;
}


/* ================================================================
   FP-UX.4C — REGISTRATION / ENROLLMENT
   ================================================================ */

.portal-layout .registration-shell{
  width:100%;
  max-width:1240px;
  margin:0 auto;
  padding:24px 28px 64px;
}

.registration-shell .registration-card{
  border:1px solid var(--mufin-border);
  border-radius:20px;
  background:var(--mufin-surface);
  box-shadow:var(--mufin-shadow-soft);
}

.registration-shell .registration-head{
  padding:26px 28px 22px;
  border-bottom:1px solid var(--mufin-border);
}

.registration-shell .registration-head h1{
  color:var(--mufin-ink);
  letter-spacing:-.035em;
}

.registration-shell .signed-in-mini{
  border:1px solid var(--mufin-border);
  border-radius:13px;
  background:var(--mufin-soft-blue);
}

.registration-shell .wizard-progress{
  background:#fbfdff;
  border-bottom:1px solid var(--mufin-border);
}

.registration-shell .wizard-step{
  min-height:62px;
}

.registration-shell .wizard-step span{
  transition:
    background .16s ease,
    border-color .16s ease,
    color .16s ease;
}

.registration-shell .wizard-step.active{
  color:var(--mufin-blue-dark);
}

.registration-shell .wizard-step.active span,
.registration-shell .wizard-step.done span{
  border-color:rgba(32,215,176,.55);
  background:rgba(32,215,176,.13);
  color:#087b6a;
}

.registration-shell .wizard-panel{
  padding:28px;
}

.registration-shell .panel-title{
  margin-bottom:22px;
}

.registration-shell .panel-title h2{
  color:var(--mufin-ink);
}

.registration-shell .soft-panel,
.registration-shell .student-course-card,
.registration-shell .student-schedule-card,
.registration-shell .review-card,
.registration-shell .enrollment-card{
  border:1px solid var(--mufin-border);
  border-radius:15px;
  background:#fff;
  box-shadow:none;
}

.registration-shell .choice-card,
.registration-shell .course-option{
  border:1px solid #d9e5ec;
  border-radius:12px;
  background:#fff;
  transition:
    border-color .15s ease,
    box-shadow .15s ease,
    background .15s ease;
}

.registration-shell .choice-card:hover,
.registration-shell .course-option:hover{
  border-color:#9fc9e8;
  background:#fbfdff;
}

.registration-shell .course-option:has(input:checked){
  border-color:var(--mufin-blue);
  background:var(--mufin-soft-blue);
  box-shadow:0 0 0 2px rgba(8,124,240,.07);
}

.registration-shell .field input,
.registration-shell .field select,
.registration-shell .field textarea,
.registration-shell .preference-row select{
  min-height:44px;
  border:1px solid #ccdce7;
  border-radius:11px;
  background:#fff;
}

.registration-shell .field input:focus,
.registration-shell .field select:focus,
.registration-shell .field textarea:focus,
.registration-shell .preference-row select:focus{
  border-color:var(--mufin-blue);
  box-shadow:0 0 0 3px rgba(8,124,240,.10);
}

.registration-shell .wizard-actions{
  padding-top:4px;
}


/* ================================================================
   FP-UX.4D — PERFORMANCE ENROLLMENT MODALS
   ================================================================ */

.dashboard-themed .program-enroll-backdrop{
  backdrop-filter:blur(3px);
}

.dashboard-themed .program-enroll-modal{
  border:1px solid rgba(255,255,255,.6);
  border-radius:18px;
  padding:22px;
  box-shadow:0 26px 70px rgba(8,31,48,.26);
}

.dashboard-themed .program-enroll-head{
  padding-bottom:14px;
  border-bottom:1px solid var(--mufin-border);
}

.dashboard-themed .program-enroll-close{
  flex:none;
  width:38px;
  height:38px;
  border:1px solid var(--mufin-border);
  border-radius:10px;
  background:#f7fafc;
  color:var(--mufin-ink);
}

.dashboard-themed .program-enroll-details,
.dashboard-themed .program-guidelines-box{
  border:1px solid var(--mufin-border);
  border-radius:13px;
}

.dashboard-themed .program-enroll-details{
  background:var(--mufin-soft-blue);
}

.dashboard-themed .program-guidelines-box{
  background:#fbfefd;
}

.dashboard-themed .program-student-choice{
  border:1px solid var(--mufin-border);
  border-radius:11px;
}

.dashboard-themed .program-student-choice:hover:not(.already-enrolled){
  border-color:#9fc9e8;
  background:#fbfdff;
}


/* ================================================================
   FP-UX.4E — LOGIN
   ================================================================ */

body:not(.portal-body) .login-card{
  width:min(470px,calc(100% - 32px));
  margin:64px auto;
  padding:30px;
  border:1px solid var(--mufin-border);
  border-radius:20px;
  background:var(--mufin-surface);
  box-shadow:var(--mufin-shadow-soft);
}

body:not(.portal-body) .login-card .logo-center img{
  width:190px;
  height:auto;
  max-height:105px;
  object-fit:contain;
}

body:not(.portal-body) .login-card h1{
  color:var(--mufin-ink);
  letter-spacing:-.035em;
}

body:not(.portal-body) .login-card .lead{
  color:var(--mufin-muted);
  line-height:1.55;
}

body:not(.portal-body) .login-card .field input{
  min-height:46px;
  border:1px solid #ccdce7;
  border-radius:11px;
}

body:not(.portal-body) .login-card .field input:focus{
  border-color:var(--mufin-blue);
  box-shadow:0 0 0 3px rgba(8,124,240,.10);
}


/* ================================================================
   FP-UX.4F — PRIVACY / SUPPORTING CONTENT
   ================================================================ */

body:not(.portal-body) .section{
  width:min(var(--mufin-content-max),100%);
}

body:not(.portal-body) .section > .card{
  border:1px solid var(--mufin-border);
  border-radius:18px;
  box-shadow:var(--mufin-shadow-soft);
}

body:not(.portal-body) .section h1,
body:not(.portal-body) .section h2{
  color:var(--mufin-ink);
}

body:not(.portal-body) .section p,
body:not(.portal-body) .section li{
  line-height:1.65;
}


/* ================================================================
   FP-UX.4G — ACCESSIBILITY / INTERACTION CONSISTENCY
   ================================================================ */

.portal-body a:focus-visible,
.portal-body button:focus-visible,
.portal-body input:focus-visible,
.portal-body select:focus-visible,
.portal-body textarea:focus-visible,
body:not(.portal-body) a:focus-visible,
body:not(.portal-body) button:focus-visible,
body:not(.portal-body) input:focus-visible,
body:not(.portal-body) select:focus-visible,
body:not(.portal-body) textarea:focus-visible{
  outline:3px solid rgba(8,124,240,.20);
  outline-offset:2px;
}

.portal-body button:disabled,
.portal-body .btn:disabled,
body:not(.portal-body) button:disabled,
body:not(.portal-body) .btn:disabled{
  opacity:.58;
  cursor:not-allowed;
  box-shadow:none;
}


/* ================================================================
   FP-UX.4H — TABLET
   ================================================================ */

@media (max-width:980px){

  .portal-layout .registration-shell{
    padding:22px 20px 56px;
  }

  .registration-shell .registration-head{
    gap:18px;
  }

  .dashboard-themed .course-summary-row{
    grid-template-columns:1fr;
  }

  .dashboard-themed .course-summary-status{
    justify-self:start;
  }
}


/* ================================================================
   FP-UX.4I — MOBILE
   ================================================================ */

@media (max-width:800px){

  .portal-layout .registration-shell{
    padding:18px 14px 50px;
  }

  .registration-shell .registration-card{
    border-radius:16px;
  }

  .registration-shell .registration-head{
    padding:22px 20px 18px;
  }

  .registration-shell .wizard-panel{
    padding:22px 20px;
  }

  .registration-shell .wizard-progress{
    padding-left:8px;
    padding-right:8px;
  }

  .dashboard-themed #courseList{
    gap:10px;
  }

  .dashboard-themed .course-summary-row,
  .dashboard-themed .course-card,
  .dashboard-themed .family-course-card{
    padding:14px 15px;
  }

  .portal-main .invoice-card,
  .portal-main .payment-card{
    padding:15px;
  }
}


/* ================================================================
   FP-UX.4J — SMALL MOBILE
   ================================================================ */

@media (max-width:520px){

  .portal-layout .registration-shell{
    padding-left:8px;
    padding-right:8px;
  }

  .registration-shell .registration-head{
    padding-left:16px;
    padding-right:16px;
  }

  .registration-shell .wizard-panel{
    padding-left:16px;
    padding-right:16px;
  }

  body:not(.portal-body) .login-card{
    margin:28px auto;
    padding:22px 18px;
  }
}


/* ================================================================
   FP-UX.4 COMPLETE PORTAL VISUAL EXPERIENCE END
   ================================================================ */

/* ================================================================
   FP-UX.4L LOGIN PAGE REDESIGN START
   ================================================================ */

/* ---------- Page ---------- */

body:not(.portal-body){
  min-height:100vh;
  background:
    radial-gradient(
      circle at 12% 20%,
      rgba(8,124,240,.07),
      transparent 31%
    ),
    radial-gradient(
      circle at 88% 72%,
      rgba(32,215,176,.08),
      transparent 30%
    ),
    #f7faff;
}


/* ---------- Header ---------- */

body:not(.portal-body) .login-topbar{
  position:relative;
  top:auto;
  z-index:5;
  height:72px;
  padding:0 max(24px,calc((100vw - 1240px)/2));
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--mufin-border);
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(12px);
}

body:not(.portal-body) .login-home-brand{
  display:inline-flex;
  align-items:center;
  width:166px;
  height:64px;
  border-radius:9px;
  text-decoration:none;
}

body:not(.portal-body) .login-home-brand img{
  width:166px;
  height:60px;
  max-width:166px;
  max-height:60px;
  object-fit:contain;
  object-position:left center;
}

body:not(.portal-body) .login-header-label{
  display:inline-flex;
  align-items:center;
  min-height:32px;
  padding:6px 12px;
  border:1px solid rgba(8,124,240,.12);
  border-radius:999px;
  background:var(--mufin-soft-blue);
  color:var(--mufin-blue-dark);
  font-size:12px;
  line-height:1;
  font-weight:800;
}


/* ---------- Main two-column experience ---------- */

body:not(.portal-body) .login-shell{
  width:min(1180px,calc(100% - 48px));
  max-width:none;
  min-height:calc(100vh - 72px);
  margin:0 auto;
  padding:54px 0 64px;
  display:grid;
  grid-template-columns:minmax(0,1.04fr) minmax(390px,.96fr);
  gap:34px;
  align-items:stretch;
}


/* ---------- Welcome panel ---------- */

body:not(.portal-body) .login-intro{
  position:relative;
  min-height:540px;
  padding:52px 48px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  overflow:hidden;
  border:1px solid rgba(8,124,240,.10);
  border-radius:24px;
  background:
    linear-gradient(
      145deg,
      #eef7ff 0%,
      #f6fbff 45%,
      #effcf8 100%
    );
  box-shadow:0 16px 42px rgba(24,32,42,.065);
}

body:not(.portal-body) .login-intro::before{
  content:"";
  position:absolute;
  width:290px;
  height:290px;
  right:-105px;
  top:-110px;
  border-radius:50%;
  background:rgba(8,124,240,.065);
}

body:not(.portal-body) .login-intro::after{
  content:"♪  ♫";
  right:34px;
  bottom:26px;
  font-size:72px;
  letter-spacing:10px;
  color:rgba(8,124,240,.075);
}

body:not(.portal-body) .login-intro > *{
  position:relative;
  z-index:1;
}

body:not(.portal-body) .login-intro .page-icon{
  width:58px;
  height:58px;
  margin-bottom:20px;
  display:grid;
  place-items:center;
  border:1px solid rgba(8,124,240,.12);
  border-radius:16px;
  background:#fff;
  box-shadow:0 8px 22px rgba(24,32,42,.06);
}

body:not(.portal-body) .login-intro .page-icon img{
  width:34px;
  height:34px;
}

body:not(.portal-body) .login-intro .eyebrow{
  width:max-content;
  padding:7px 11px;
  background:rgba(32,215,176,.12);
  color:#087b6a;
  font-size:11px;
  letter-spacing:.045em;
  text-transform:uppercase;
}

body:not(.portal-body) .login-intro h1{
  max-width:560px;
  margin:17px 0 14px;
  font-size:clamp(36px,4vw,50px);
  line-height:1.04;
  letter-spacing:-.045em;
  color:var(--mufin-ink);
}

body:not(.portal-body) .login-intro > p{
  max-width:570px;
  margin:0;
  font-size:16px;
  line-height:1.65;
  color:var(--mufin-muted);
}

body:not(.portal-body) .login-highlights{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:30px;
}

body:not(.portal-body) .login-highlights span{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:7px 11px;
  border:1px solid rgba(8,124,240,.10);
  border-radius:999px;
  background:rgba(255,255,255,.72);
  color:#36566b !important;
  font-size:12px;
  font-weight:750;
}


/* ---------- Authentication card ---------- */

body:not(.portal-body) .login-shell .auth-choice-card{
  width:100%;
  max-width:none;
  min-height:540px;
  margin:0;
  padding:38px 40px;
  align-self:stretch;
  display:flex;
  flex-direction:column;
  justify-content:center;
  border:1px solid var(--mufin-border);
  border-radius:24px;
  background:#fff;
  box-shadow:0 16px 42px rgba(24,32,42,.075);
}

body:not(.portal-body) .auth-choice-card .logo-center{
  margin-bottom:6px;
}

body:not(.portal-body) .auth-choice-card .logo-center img{
  width:176px;
  height:88px;
  max-height:88px;
  object-fit:contain;
}

body:not(.portal-body) .auth-choice-card > h1{
  margin:0 !important;
  font-size:27px;
  line-height:1.18;
  letter-spacing:-.035em;
  color:var(--mufin-ink);
}

body:not(.portal-body) .auth-choice-card > .muted.center{
  max-width:390px;
  margin:10px auto 24px;
  font-size:13px;
  line-height:1.55;
  color:var(--mufin-muted);
}


/* ---------- Google ---------- */

body:not(.portal-body) .auth-provider-btn{
  position:relative;
  min-height:48px;
  border:1px solid #ccdce7;
  border-radius:11px;
  background:#fff;
  color:var(--mufin-ink);
  box-shadow:0 3px 10px rgba(24,32,42,.035);
}

body:not(.portal-body) .auth-provider-btn:hover{
  border-color:#a9c9df;
  background:#fbfdff;
}

body:not(.portal-body) .provider-icon{
  position:absolute;
  left:15px;
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border:1px solid #dce7ee;
  border-radius:8px;
  background:#fff;
  color:var(--mufin-blue);
  font-size:14px;
  font-weight:900;
}


/* ---------- Divider ---------- */

body:not(.portal-body) .auth-divider{
  display:flex;
  align-items:center;
  gap:12px;
  margin:22px 0;
  color:#8996a3;
  font-size:11px;
  font-weight:750;
  text-transform:uppercase;
  letter-spacing:.08em;
}

body:not(.portal-body) .auth-divider::before,
body:not(.portal-body) .auth-divider::after{
  content:"";
  height:1px;
  flex:1;
  background:var(--mufin-border);
}


/* ---------- Mobile / OTP ---------- */

body:not(.portal-body) .auth-choice-card .field{
  margin-bottom:14px;
  gap:7px;
}

body:not(.portal-body) .auth-choice-card .field label{
  color:var(--mufin-ink);
  font-size:12px;
  font-weight:800;
}

body:not(.portal-body) .auth-choice-card .field input{
  min-height:48px;
  padding:12px 14px;
  border:1px solid #ccdce7;
  border-radius:11px;
  background:#fff;
}

body:not(.portal-body) .auth-choice-card .field input:focus{
  border-color:var(--mufin-blue);
  box-shadow:0 0 0 3px rgba(8,124,240,.10);
}

body:not(.portal-body) .auth-choice-card .field-help{
  margin-top:1px;
  color:var(--mufin-muted);
  font-size:11px;
  line-height:1.4;
}

body:not(.portal-body) .auth-choice-card #sendCode,
body:not(.portal-body) .auth-choice-card #verifyCode{
  min-height:48px;
  border-radius:11px;
  background:var(--mufin-blue);
  color:#fff;
  box-shadow:0 8px 20px rgba(8,124,240,.17);
}

body:not(.portal-body) .auth-choice-card #sendCode:hover,
body:not(.portal-body) .auth-choice-card #verifyCode:hover{
  filter:brightness(.97);
}

body:not(.portal-body) .auth-choice-card .notice{
  padding:11px 13px;
  border:1px solid rgba(8,124,240,.12);
  border-radius:10px;
  background:var(--mufin-soft-blue);
  color:var(--mufin-blue-dark);
  font-size:12px;
}

body:not(.portal-body) .auth-choice-card .small{
  font-size:11px;
  line-height:1.45;
}


/* ---------- Tablet ---------- */

@media (max-width:900px){

  body:not(.portal-body) .login-shell{
    width:min(680px,calc(100% - 36px));
    min-height:auto;
    padding:32px 0 54px;
    grid-template-columns:1fr;
    gap:18px;
  }

  body:not(.portal-body) .login-intro{
    min-height:auto;
    padding:34px 32px;
  }

  body:not(.portal-body) .login-intro h1{
    font-size:34px;
  }

  body:not(.portal-body) .login-shell .auth-choice-card{
    min-height:auto;
  }
}


/* ---------- Mobile ---------- */

@media (max-width:600px){

  body:not(.portal-body) .login-topbar{
    height:64px;
    padding:0 16px;
  }

  body:not(.portal-body) .login-home-brand{
    width:138px;
    height:58px;
  }

  body:not(.portal-body) .login-home-brand img{
    width:138px;
    height:54px;
    max-width:138px;
    max-height:54px;
  }

  body:not(.portal-body) .login-header-label{
    padding:6px 9px;
    font-size:10px;
  }

  body:not(.portal-body) .login-shell{
    width:calc(100% - 24px);
    padding:20px 0 36px;
  }

  body:not(.portal-body) .login-intro{
    padding:26px 22px;
    border-radius:18px;
  }

  body:not(.portal-body) .login-intro h1{
    font-size:30px;
  }

  body:not(.portal-body) .login-intro > p{
    font-size:14px;
  }

  body:not(.portal-body) .login-highlights{
    display:grid;
    gap:7px;
    margin-top:22px;
  }

  body:not(.portal-body) .login-shell .auth-choice-card{
    padding:28px 22px;
    border-radius:18px;
  }

  body:not(.portal-body) .auth-choice-card > h1{
    font-size:24px;
  }
}


/* ================================================================
   FP-UX.4L LOGIN PAGE REDESIGN END
   ================================================================ */

/* ================================================================
   FP-UX.4M PRIVACY PAGE REFINEMENT START
   ================================================================ */

/* Header */

body:not(.portal-body) .privacy-topbar{
  position:relative;
  top:auto;
  height:72px;
  padding:0 max(24px,calc((100vw - 1180px)/2));
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--mufin-border);
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(12px);
}

body:not(.portal-body) .privacy-home-brand{
  display:inline-flex;
  align-items:center;
  width:166px;
  height:64px;
  border-radius:9px;
  text-decoration:none;
}

body:not(.portal-body) .privacy-home-brand img{
  width:166px;
  height:60px;
  max-width:166px;
  max-height:60px;
  object-fit:contain;
  object-position:left center;
}

body:not(.portal-body) .privacy-header-label{
  display:inline-flex;
  align-items:center;
  min-height:32px;
  padding:6px 12px;
  border:1px solid rgba(8,124,240,.12);
  border-radius:999px;
  background:var(--mufin-soft-blue);
  color:var(--mufin-blue-dark);
  font-size:12px;
  line-height:1;
  font-weight:800;
}


/* Privacy document */

body:not(.portal-body) main.section{
  width:min(960px,calc(100% - 40px));
  max-width:960px;
  margin:38px auto 64px;
  padding:0;
}

body:not(.portal-body) main.section > .card,
body:not(.portal-body) .section > .card{
  padding:38px 40px;
  border:1px solid var(--mufin-border);
  border-radius:20px;
  background:#fff;
  box-shadow:0 14px 38px rgba(24,32,42,.065);
}


/* Strong document hierarchy */

body:not(.portal-body) main.section h1,
body:not(.portal-body) .section h1{
  margin-top:0;
  margin-bottom:12px;
  color:var(--mufin-ink);
  font-size:clamp(30px,4vw,40px);
  line-height:1.1;
  letter-spacing:-.04em;
}

body:not(.portal-body) main.section h2,
body:not(.portal-body) .section h2{
  margin-top:30px;
  margin-bottom:9px;
  color:var(--mufin-ink);
  font-size:19px;
  line-height:1.3;
  letter-spacing:-.015em;
}

body:not(.portal-body) main.section p,
body:not(.portal-body) .section p{
  color:#536b80;
  font-size:15px;
  line-height:1.7;
}

body:not(.portal-body) main.section ul,
body:not(.portal-body) .section ul{
  color:#536b80;
  line-height:1.7;
}


/* Privacy links */

body:not(.portal-body) main.section a,
body:not(.portal-body) .section a{
  color:#075f9e;
  text-underline-offset:3px;
}


/* Internal/legal review callout remains unchanged in wording */

body:not(.portal-body) main.section .notice,
body:not(.portal-body) .section .notice{
  margin-top:22px;
  padding:16px 18px;
  border:1px solid rgba(8,124,240,.14);
  border-radius:13px;
  background:#f5faff;
  color:#315d7c;
  box-shadow:none;
}

body:not(.portal-body) main.section .notice strong,
body:not(.portal-body) .section .notice strong{
  color:#174f76;
}


/* Back action */

body:not(.portal-body) main.section .btn,
body:not(.portal-body) .section .btn{
  min-height:42px;
  margin-top:4px;
  padding:10px 16px;
  border-radius:10px;
}


/* Tablet/mobile */

@media (max-width:700px){

  body:not(.portal-body) .privacy-topbar{
    height:64px;
    padding:0 16px;
  }

  body:not(.portal-body) .privacy-home-brand{
    width:138px;
    height:58px;
  }

  body:not(.portal-body) .privacy-home-brand img{
    width:138px;
    height:54px;
    max-width:138px;
    max-height:54px;
  }

  body:not(.portal-body) .privacy-header-label{
    padding:6px 9px;
    font-size:10px;
  }

  body:not(.portal-body) main.section{
    width:calc(100% - 24px);
    margin-top:22px;
    margin-bottom:38px;
  }

  body:not(.portal-body) main.section > .card,
  body:not(.portal-body) .section > .card{
    padding:26px 20px;
    border-radius:16px;
  }

  body:not(.portal-body) main.section h2,
  body:not(.portal-body) .section h2{
    margin-top:25px;
  }
}


/* ================================================================
   FP-UX.4M PRIVACY PAGE REFINEMENT END
   ================================================================ */

/* ================================================================
   FP-UX.6 PHASE-A FINAL VISUAL NORMALIZATION
   Approved final visual corrections
   ================================================================ */

/* ------------------------------------------------
   Primary CTA language
   MUFIN teal = actions
   Blue remains navigation / selection / structure
   ------------------------------------------------ */

:root{
  --portal-cta:#35ddbb;
  --portal-cta-hover:#27cfad;
  --portal-cta-active:#1fc09f;
  --portal-cta-ink:#083d3a;
}

/*
 * Scope only real action buttons.
 * Do not alter sidebar navigation, wizard navigation,
 * checkboxes, radio buttons or selection outlines.
 */
.portal-main .btn.btn-blue:not(:disabled),
.portal-main button.btn-blue:not(:disabled),
.portal-main a.btn-blue,
.portal-main .btn-primary:not(:disabled),
.portal-main button.btn-primary:not(:disabled),
.portal-main a.btn-primary,
.portal-main #addFamilyMember:not(:disabled),
.portal-main .program-enroll-btn:not(:disabled),
.portal-main .invoice-card .btn:not(:disabled),
.portal-main .welcome-actions .btn:not(:disabled),
.portal-main .billing-actions .btn:not(:disabled),
.registration-shell .wizard-actions .btn-primary:not(:disabled),
.registration-shell .wizard-actions .btn-blue:not(:disabled){
  background:var(--portal-cta);
  border-color:var(--portal-cta);
  color:var(--portal-cta-ink);
  box-shadow:0 8px 18px rgba(32,215,176,.18);
}

.portal-main .btn.btn-blue:not(:disabled):hover,
.portal-main button.btn-blue:not(:disabled):hover,
.portal-main a.btn-blue:hover,
.portal-main .btn-primary:not(:disabled):hover,
.portal-main button.btn-primary:not(:disabled):hover,
.portal-main a.btn-primary:hover,
.portal-main #addFamilyMember:not(:disabled):hover,
.portal-main .program-enroll-btn:not(:disabled):hover,
.portal-main .invoice-card .btn:not(:disabled):hover,
.registration-shell .wizard-actions .btn-primary:not(:disabled):hover,
.registration-shell .wizard-actions .btn-blue:not(:disabled):hover{
  background:var(--portal-cta-hover);
  border-color:var(--portal-cta-hover);
  color:var(--portal-cta-ink);
}

.portal-main .btn.btn-blue:not(:disabled):active,
.portal-main button.btn-blue:not(:disabled):active,
.portal-main .btn-primary:not(:disabled):active,
.portal-main button.btn-primary:not(:disabled):active{
  background:var(--portal-cta-active);
  border-color:var(--portal-cta-active);
}

/* Disabled actions remain deliberately muted. */
.portal-main .btn:disabled,
.registration-shell .btn:disabled{
  box-shadow:none;
}

/* ------------------------------------------------
   My Courses
   Preserve columns, reduce unnecessary vertical space.
   ------------------------------------------------ */

.dashboard-themed #courseList .course-summary-row{
  min-height:0;
  padding-top:18px;
  padding-bottom:18px;
}

.dashboard-themed #courseList .course-summary-row h3{
  margin-bottom:8px;
}

.dashboard-themed #courseList .course-summary-status{
  align-self:center;
}

/* Generic semantic status treatment. */
.dashboard-themed #courseList .status-pill,
.payment-status{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:max-content;
  min-height:28px;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid rgba(32,215,176,.30);
  background:rgba(32,215,176,.10);
  color:#087566;
  font-size:12px;
  line-height:1;
  font-weight:800;
}

/* Invoice due state remains semantic and distinct from CTA. */
.invoice-status{
  box-shadow:none;
}

/* ------------------------------------------------
   Compact authenticated portal footer
   ------------------------------------------------ */

.portal-footer{
  width:100%;
  margin-top:24px;
  padding:18px 0 4px;
  border-top:1px solid var(--mufin-border);
}

.portal-footer-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  width:100%;
  color:var(--mufin-muted);
  font-size:12px;
  line-height:1.5;
}

.portal-footer-copy{
  font-weight:650;
}

.portal-footer-links{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:6px 18px;
}

.portal-footer-links a{
  color:var(--mufin-muted);
  font-weight:700;
  text-decoration:none;
}

.portal-footer-links a:hover{
  color:var(--mufin-blue-dark);
  text-decoration:underline;
  text-underline-offset:3px;
}

.portal-footer-links a:focus-visible{
  outline:3px solid rgba(8,124,240,.18);
  outline-offset:3px;
  border-radius:4px;
}

/* Privacy is not inside the authenticated dashboard shell. */
body:not(.portal-body) .portal-footer{
  max-width:960px;
  margin-left:auto;
  margin-right:auto;
  padding-left:0;
  padding-right:0;
}

/* Registration footer belongs to the content workspace. */
.registration-shell .portal-footer{
  margin-top:26px;
}

@media (max-width:700px){
  .portal-footer{
    margin-top:20px;
    padding-top:16px;
  }

  .portal-footer-inner{
    align-items:flex-start;
    flex-direction:column;
    gap:8px;
  }

  .portal-footer-links{
    justify-content:flex-start;
  }

  .dashboard-themed #courseList .course-summary-row{
    padding-top:16px;
    padding-bottom:16px;
  }
}

/* ================================================================
   FP-UX.6 PHASE-A FINAL VISUAL NORMALIZATION END
   ================================================================ */

/* ================================================================
   FP-UX.6D COURSE STATUS + FOOTER POLISH START
   Evidence-based final polish.
   ================================================================ */

/*
 * dashboard.js renders Active / Approved without the .blue class.
 * Therefore the existing plain pill inside course-summary-status
 * is the semantic success state.
 */
.dashboard-themed #courseList .course-summary-status > .pill:not(.blue){
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:max-content;
  min-height:28px;
  padding:4px 10px;
  border:1px solid rgba(32,215,176,.30);
  border-radius:999px;
  background:rgba(32,215,176,.10);
  color:#087566;
  font-size:12px;
  line-height:1;
  font-weight:800;
}

/*
 * Keep the compact portal footer visually connected to the
 * workspace without changing its markup or links.
 */
.portal-footer{
  margin-top:16px;
  padding-top:12px;
  padding-bottom:2px;
}

.registration-shell .portal-footer{
  margin-top:18px;
}

@media (max-width:700px){
  .portal-footer{
    margin-top:16px;
    padding-top:12px;
  }
}

/* ================================================================
   FP-UX.6D COURSE STATUS + FOOTER POLISH END
   ================================================================ */

/* =========================================================
   FP-UX.10C — Family Portal landing-page brand enhancement
   Uses the actual index.html markup.
   Visual treatment only.
   ========================================================= */

/* ---------------------------------------------------------
   Public landing header
   --------------------------------------------------------- */

body:has(.portal-hero) .topbar {
  position: relative;
  background: rgba(255,255,255,.96);
  border-bottom-color: transparent;
  box-shadow: 0 8px 28px rgba(0,65,132,.07);
}

body:has(.portal-hero) .topbar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    #35ddbb 0%,
    #20d7b0 32%,
    #087cf0 100%
  );
}

body:has(.portal-hero) .topbar .btn-secondary {
  color: #005ba8;
  background: #f2f8ff;
  border-color: rgba(8,124,240,.30);
  box-shadow: 0 5px 16px rgba(8,124,240,.08);
}

body:has(.portal-hero) .topbar .btn-secondary:hover {
  color: #004184;
  background: #e8f4ff;
  border-color: rgba(8,124,240,.42);
}

/* ---------------------------------------------------------
   Main branded landing canvas
   --------------------------------------------------------- */

body:has(.portal-hero) {
  background:
    radial-gradient(
      circle at 9% 24%,
      rgba(53,221,187,.18),
      transparent 30rem
    ),
    radial-gradient(
      circle at 92% 18%,
      rgba(8,124,240,.17),
      transparent 36rem
    ),
    linear-gradient(
      135deg,
      #effdf9 0%,
      #f1f8ff 48%,
      #e8f4ff 100%
    );
}

body:has(.portal-hero) .portal-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 12% 36%,
      rgba(53,221,187,.15),
      transparent 26rem
    ),
    radial-gradient(
      circle at 82% 22%,
      rgba(8,124,240,.15),
      transparent 32rem
    ),
    linear-gradient(
      120deg,
      rgba(239,253,249,.98) 0%,
      rgba(241,248,255,.98) 52%,
      rgba(232,244,255,.98) 100%
    );
}

body:has(.portal-hero) .portal-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 30rem;
  height: 30rem;
  left: -12rem;
  bottom: -17rem;
  border-radius: 50%;
  background: rgba(53,221,187,.13);
}

body:has(.portal-hero) .portal-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 36rem;
  height: 36rem;
  right: -15rem;
  top: -19rem;
  border-radius: 50%;
  background: rgba(8,124,240,.11);
}

/* ---------------------------------------------------------
   Hero identity
   --------------------------------------------------------- */

body:has(.portal-hero) .hero-icon {
  background:
    linear-gradient(
      145deg,
      rgba(225,250,244,.96),
      rgba(232,244,255,.96)
    );
  border-color: rgba(8,124,240,.18);
  box-shadow: 0 10px 28px rgba(0,65,132,.08);
}

body:has(.portal-hero) .eyebrow {
  color: #087c70;
  background: rgba(255,255,255,.78);
  border-color: rgba(8,124,240,.18);
  box-shadow: 0 6px 18px rgba(8,124,240,.07);
  backdrop-filter: blur(8px);
}

body:has(.portal-hero) .hero-copy h1 {
  color: #102f4d;
}

body:has(.portal-hero) .gradient-text {
  background: linear-gradient(
    100deg,
    #16a982 0%,
    #0ba8ad 44%,
    #087cf0 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------------------------------------------------------
   Primary portal CTA
   --------------------------------------------------------- */

body:has(.portal-hero) .hero-actions .btn-primary {
  background: linear-gradient(
    100deg,
    #20cfa9 0%,
    #24c5bc 44%,
    #087cf0 100%
  );
  border-color: transparent;
  box-shadow: 0 13px 28px rgba(8,124,240,.18);
}

body:has(.portal-hero) .hero-actions .btn-primary:hover {
  background: linear-gradient(
    100deg,
    #1fc09f 0%,
    #20b9b0 44%,
    #006ed8 100%
  );
  transform: translateY(-1px);
  box-shadow: 0 16px 32px rgba(8,124,240,.22);
}

/* ---------------------------------------------------------
   Trust indicators below CTA
   --------------------------------------------------------- */

body:has(.portal-hero) .trust-row {
  gap: 8px;
  flex-wrap: wrap;
}

body:has(.portal-hero) .trust-row > span {
  padding: 6px 10px;
  border: 1px solid rgba(8,124,240,.12);
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  box-shadow: 0 4px 12px rgba(24,32,42,.04);
}

/* ---------------------------------------------------------
   Family information panel
   --------------------------------------------------------- */

body:has(.portal-hero) .hero-card {
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.96),
      rgba(236,247,255,.97)
    );
  border-color: rgba(8,124,240,.22);
  box-shadow:
    0 24px 56px rgba(0,65,132,.13),
    inset 0 1px 0 rgba(255,255,255,.95);
}

body:has(.portal-hero) .hero-card::before {
  background: linear-gradient(
    90deg,
    #20d7b0 0%,
    #087cf0 72%,
    #f1b739 100%
  );
}

body:has(.portal-hero) .hero-card h2 {
  color: #123654;
}

/* ---------------------------------------------------------
   Four family feature cards
   --------------------------------------------------------- */

body:has(.portal-hero) .mini-grid .mini {
  border-width: 1px;
  box-shadow: 0 7px 18px rgba(0,65,132,.055);
}

body:has(.portal-hero) .mini-grid .mini:nth-child(1),
body:has(.portal-hero) .mini-grid .mini:nth-child(3) {
  background:
    linear-gradient(
      145deg,
      #dff8f1 0%,
      #ecfbf7 100%
    );
  border-color: rgba(32,215,176,.27);
}

body:has(.portal-hero) .mini-grid .mini:nth-child(2),
body:has(.portal-hero) .mini-grid .mini:nth-child(4) {
  background:
    linear-gradient(
      145deg,
      #e1f0ff 0%,
      #edf6ff 100%
    );
  border-color: rgba(8,124,240,.22);
}

body:has(.portal-hero) .mini-grid .mini b {
  color: #123f61;
}

body:has(.portal-hero) .mini-grid .mini span {
  color: #58708a;
}

/* ---------------------------------------------------------
   Landing footer transition
   --------------------------------------------------------- */

body:has(.portal-hero) .footer {
  background: rgba(255,255,255,.80);
  border-top-color: rgba(8,124,240,.10);
  backdrop-filter: blur(10px);
}

/* ---------------------------------------------------------
   Responsive landing treatment
   --------------------------------------------------------- */

@media (max-width: 760px) {
  body:has(.portal-hero) {
    background:
      linear-gradient(
        160deg,
        #effdf9 0%,
        #eaf5ff 100%
      );
  }

  body:has(.portal-hero) .portal-hero {
    background:
      radial-gradient(
        circle at 18% 10%,
        rgba(53,221,187,.15),
        transparent 20rem
      ),
      linear-gradient(
        160deg,
        #effdf9 0%,
        #eaf5ff 100%
      );
  }

  body:has(.portal-hero) .hero-card {
    box-shadow: 0 16px 38px rgba(0,65,132,.11);
  }

  body:has(.portal-hero) .trust-row > span {
    padding: 5px 9px;
  }
}

/* =========================================================
   FP-UX.10G — Strong MUFIN blue + teal landing identity
   Landing page only.
   ========================================================= */

/*
 * Stronger visual relationship with the authenticated portal.
 * Structure and content remain unchanged.
 */

body:has(.portal-hero) .topbar {
  border-top: 4px solid #20d7b0;
  border-bottom: 0;
  background: #ffffff;
  box-shadow: 0 8px 26px rgba(0,65,132,.09);
}

body:has(.portal-hero) .topbar::after {
  height: 4px;
  bottom: -4px;
  opacity: 1;
  background:
    linear-gradient(
      90deg,
      #20d7b0 0%,
      #16c9bb 34%,
      #087cf0 68%,
      #004184 100%
    );
}

body:has(.portal-hero) .topbar .brand {
  text-decoration: none;
  cursor: default;
}

body:has(.portal-hero) .topbar .brand-title {
  color: #075a9f;
  text-decoration: none;
}

body:has(.portal-hero) .topbar .brand-sub {
  color: #087c70;
  text-decoration: none;
}

/* Main branded canvas */
body:has(.portal-hero) {
  background: #eef8ff;
}

body:has(.portal-hero) .portal-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  background:
    linear-gradient(
      118deg,
      #dff8f1 0%,
      #e8f8f8 28%,
      #e2f2ff 62%,
      #d8ebff 100%
    );
}

/*
 * Clearly visible MUFIN brand framing.
 * These sit behind the content.
 */
body:has(.portal-hero) .portal-hero::before {
  content: "";
  position: absolute;
  z-index: -1;

  width: 62rem;
  height: 15rem;

  left: -13rem;
  bottom: -8rem;

  border-radius: 50% 70% 0 0;

  background:
    linear-gradient(
      100deg,
      #20d7b0 0%,
      #18c5bd 38%,
      #087cf0 76%,
      #0066c7 100%
    );

  opacity: .82;
  transform: rotate(3deg);
}

body:has(.portal-hero) .portal-hero::after {
  content: "";
  position: absolute;
  z-index: -1;

  width: 34rem;
  height: 34rem;

  right: -15rem;
  top: -17rem;

  border-radius: 50%;

  background:
    linear-gradient(
      145deg,
      rgba(8,124,240,.42),
      rgba(32,215,176,.28)
    );
}

/* Portal identity elements */
body:has(.portal-hero) .hero-icon {
  background: #ffffff;
  border: 1px solid rgba(8,124,240,.24);
  box-shadow: 0 10px 26px rgba(0,65,132,.10);
}

body:has(.portal-hero) .eyebrow {
  color: #087c70;

  background:
    linear-gradient(
      100deg,
      #ffffff 0%,
      #eefaff 100%
    );

  border: 1px solid rgba(8,124,240,.24);
  box-shadow: 0 6px 18px rgba(0,65,132,.07);
}

body:has(.portal-hero) .hero-copy h1 {
  color: #102f4d;
}

body:has(.portal-hero) .gradient-text {
  background:
    linear-gradient(
      100deg,
      #159f7c 0%,
      #0aa6ad 40%,
      #087cf0 100%
    );

  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Main CTA */
body:has(.portal-hero) .hero-actions .btn-primary {
  background:
    linear-gradient(
      100deg,
      #19caa5 0%,
      #16bdb9 43%,
      #087cf0 100%
    );

  border-color: transparent;

  box-shadow:
    0 13px 30px rgba(8,124,240,.23);
}

body:has(.portal-hero) .hero-actions .btn-primary:hover {
  background:
    linear-gradient(
      100deg,
      #13b996 0%,
      #10aca9 43%,
      #006ed8 100%
    );

  transform: translateY(-1px);
}

/* Access indicators — clearly visible white pills */
body:has(.portal-hero) .trust-row {
  margin-top: 16px;
  gap: 9px;
  flex-wrap: wrap;
}

body:has(.portal-hero) .trust-row > span {
  display: inline-flex;
  align-items: center;

  min-height: 34px;
  padding: 6px 13px;

  background: #ffffff;

  border:
    1px solid rgba(8,124,240,.20);

  border-radius: 999px;

  box-shadow:
    0 7px 18px rgba(0,65,132,.09);
}

/* Family information panel */
body:has(.portal-hero) .hero-card {
  background:
    linear-gradient(
      145deg,
      #ffffff 0%,
      #f3f9ff 100%
    );

  border:
    2px solid rgba(8,124,240,.26);

  box-shadow:
    0 26px 60px rgba(0,65,132,.17),
    inset 0 1px 0 rgba(255,255,255,.96);
}

body:has(.portal-hero) .hero-card::before {
  width: 72px;
  height: 6px;

  background:
    linear-gradient(
      90deg,
      #20d7b0 0%,
      #087cf0 100%
    );
}

body:has(.portal-hero) .hero-card h2 {
  color: #123654;
}

/* Feature tiles */
body:has(.portal-hero) .mini-grid .mini {
  border-width: 1px;

  box-shadow:
    0 8px 20px rgba(0,65,132,.07);
}

body:has(.portal-hero) .mini-grid .mini:nth-child(1),
body:has(.portal-hero) .mini-grid .mini:nth-child(4) {
  background:
    linear-gradient(
      145deg,
      #d7f7ef 0%,
      #e6faf5 100%
    );

  border-color:
    rgba(24,190,157,.35);
}

body:has(.portal-hero) .mini-grid .mini:nth-child(2),
body:has(.portal-hero) .mini-grid .mini:nth-child(3) {
  background:
    linear-gradient(
      145deg,
      #d9ebff 0%,
      #e9f4ff 100%
    );

  border-color:
    rgba(8,124,240,.30);
}

body:has(.portal-hero) .mini-grid .mini b {
  color: #123f61;
}

body:has(.portal-hero) .mini-grid .mini span {
  color: #526d87;
}

/* Footer transition */
body:has(.portal-hero) .footer {
  background: #ffffff;
  border-top:
    1px solid rgba(8,124,240,.13);
}

/* Desktop vertical balance */
@media (min-width: 901px) {
  body:has(.portal-hero) .portal-hero {
    min-height: calc(100vh - 145px);
    display: grid;
    align-items: center;
  }
}

/* Mobile */
@media (max-width: 900px) {
  body:has(.portal-hero) .topbar {
    border-top-width: 3px;
  }

  body:has(.portal-hero) .portal-hero {
    background:
      linear-gradient(
        160deg,
        #dff8f1 0%,
        #dfefff 100%
      );
  }

  body:has(.portal-hero) .portal-hero::before {
    width: 30rem;
    height: 9rem;
    left: -10rem;
    bottom: -6rem;
    opacity: .62;
  }

  body:has(.portal-hero) .portal-hero::after {
    width: 22rem;
    height: 22rem;
    right: -12rem;
    top: -10rem;
  }

  body:has(.portal-hero) .trust-row {
    gap: 7px;
  }

  body:has(.portal-hero) .trust-row > span {
    min-height: 31px;
    padding: 5px 10px;
  }
}

/* =========================================================
   FP-UX.10G END
   ========================================================= */

/* ==========================================================
   FP-UX.10H — Final landing-page spacing polish
   Scope: public Family Portal landing page only
   ========================================================== */

body:has(.portal-hero) .portal-hero {
  padding-top: 48px;
  padding-bottom: 72px;
  align-items: center;
}

body:has(.portal-hero) .hero-copy {
  align-self: center;
}

body:has(.portal-hero) .hero-card {
  align-self: center;
  transform: translateY(-8px);
}

body:has(.portal-hero) .hero-actions {
  margin-top: 26px;
  margin-bottom: 18px;
}

body:has(.portal-hero) .trust-row {
  margin-top: 14px;
  position: relative;
  z-index: 3;
}

body:has(.portal-hero) .portal-hero::before {
  height: 118px;
  bottom: -62px;
  opacity: .68;
}

body:has(.portal-hero) .portal-hero::after {
  transform: translate(22%, -18%);
  opacity: .16;
}

@media (max-width: 900px) {
  body:has(.portal-hero) .portal-hero {
    padding-top: 34px;
    padding-bottom: 54px;
  }

  body:has(.portal-hero) .hero-card {
    transform: none;
  }

  body:has(.portal-hero) .hero-actions {
    margin-top: 22px;
    margin-bottom: 14px;
  }

  body:has(.portal-hero) .trust-row {
    margin-top: 12px;
  }

  body:has(.portal-hero) .portal-hero::before {
    height: 92px;
    bottom: -52px;
  }
}

/* FP-UX.10H END */

/* ==========================================================
   FP-UX.10I — Logo link + desktop single-viewport landing fit
   Scope: public Family Portal landing page only
   ========================================================== */

body:has(.portal-hero) .portal-logo-link {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  text-decoration: none;
  border-radius: 10px;
}

body:has(.portal-hero) .portal-logo-link:focus-visible {
  outline: 3px solid rgba(8, 124, 240, .28);
  outline-offset: 4px;
}

/*
 * Desktop landing-page vertical fit.
 * Preserve typography/card sizing while reclaiming unused vertical space.
 */
@media (min-width: 901px) and (min-height: 700px) {
  body:has(.portal-hero) {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }

  body:has(.portal-hero) .topbar {
    flex: 0 0 auto;
  }

  body:has(.portal-hero) .portal-hero {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    padding-top: 30px;
    padding-bottom: 32px;
    align-items: center;
  }

  body:has(.portal-hero) .hero-copy {
    align-self: center;
  }

  body:has(.portal-hero) .hero-icon {
    margin-bottom: 14px;
  }

  body:has(.portal-hero) .eyebrow {
    margin-bottom: 18px;
  }

  body:has(.portal-hero) .hero-copy h1 {
    margin-bottom: 18px;
  }

  body:has(.portal-hero) .hero-copy > p {
    margin-bottom: 0;
  }

  body:has(.portal-hero) .hero-actions {
    margin-top: 20px;
    margin-bottom: 10px;
  }

  body:has(.portal-hero) .trust-row {
    margin-top: 10px;
  }

  body:has(.portal-hero) .hero-card {
    transform: translateY(-4px);
  }

  body:has(.portal-hero) .portal-hero::before {
    height: 88px;
    bottom: -54px;
  }

  body:has(.portal-hero) .footer {
    flex: 0 0 auto;
    margin-top: 0;
  }
}

/*
 * Slightly shorter laptop displays:
 * tighten spacing only; do not reduce core typography.
 */
@media (min-width: 901px) and (max-height: 820px) {
  body:has(.portal-hero) .portal-hero {
    padding-top: 22px;
    padding-bottom: 24px;
  }

  body:has(.portal-hero) .hero-icon {
    margin-bottom: 10px;
  }

  body:has(.portal-hero) .eyebrow {
    margin-bottom: 12px;
  }

  body:has(.portal-hero) .hero-copy h1 {
    margin-bottom: 12px;
  }

  body:has(.portal-hero) .hero-actions {
    margin-top: 14px;
    margin-bottom: 8px;
  }

  body:has(.portal-hero) .trust-row {
    margin-top: 8px;
  }

  body:has(.portal-hero) .hero-card {
    transform: none;
  }

  body:has(.portal-hero) .portal-hero::before {
    height: 72px;
    bottom: -48px;
  }
}

/* FP-UX.10I END */

/* ==========================================================
   FP-PE.6B — Registration path selection
   Scoped to the new registration entry screen only.
   ========================================================== */

.registration-path-step{
  padding:8px 0 2px;
}

.registration-path-intro{
  max-width:760px;
  margin:0 auto 30px;
  text-align:center;
}

.registration-path-intro .step-kicker{
  display:inline-block;
  margin-bottom:8px;
}

.registration-path-intro h2{
  margin:0;
  font-size:clamp(26px,3vw,36px);
  line-height:1.15;
  color:var(--portal-ink,#18202a);
}

.registration-path-intro p{
  max-width:650px;
  margin:12px auto 0;
  color:#667383;
  line-height:1.6;
}

.registration-path-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  max-width:1040px;
  margin:0 auto;
}

.registration-path-card{
  position:relative;
  display:flex;
  flex-direction:column;
  min-height:230px;
  padding:26px 24px 24px;
  border:2px solid #e2eaf2;
  border-radius:22px;
  background:#fff;
  cursor:pointer;
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease,background .18s ease;
}

.registration-path-card:hover{
  border-color:#9bcaf7;
  box-shadow:0 12px 28px rgba(24,32,42,.09);
  transform:translateY(-2px);
}

.registration-path-card.selected{
  border-color:#087cf0;
  background:#f4f9ff;
  box-shadow:0 14px 30px rgba(8,124,240,.13);
}

.registration-path-card input{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  margin:0;
  opacity:0;
  cursor:pointer;
}

.registration-path-radio{
  position:absolute;
  top:20px;
  right:20px;
  width:22px;
  height:22px;
  border:2px solid #b8c6d4;
  border-radius:50%;
  background:#fff;
}

.registration-path-card.selected .registration-path-radio{
  border:6px solid #087cf0;
}

.registration-path-icon{
  display:grid;
  place-items:center;
  width:54px;
  height:54px;
  margin-bottom:24px;
  border-radius:16px;
  background:#eaf5ff;
  color:#087cf0;
  font-size:27px;
  font-weight:800;
}

.registration-path-card:nth-child(2) .registration-path-icon{
  background:#eafbf7;
  color:#19b997;
}

.registration-path-card:nth-child(3) .registration-path-icon{
  background:linear-gradient(135deg,#eaf5ff,#eafbf7);
  color:#087cf0;
}

.registration-path-copy{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.registration-path-copy b{
  font-size:19px;
  line-height:1.25;
  color:#18202a;
}

.registration-path-copy small{
  font-size:14px;
  line-height:1.55;
  color:#667383;
}

.registration-path-actions{
  max-width:1040px;
  margin:28px auto 0;
}

#registrationPathContinue:disabled{
  opacity:.48;
  cursor:not-allowed;
  transform:none;
}

@media (max-width:900px){
  .registration-path-grid{
    grid-template-columns:1fr;
    max-width:620px;
  }

  .registration-path-card{
    min-height:0;
  }

  .registration-path-actions{
    max-width:620px;
  }
}


/* FP-PE MUFIN-assigned training information */
.performance-training-info{
  margin-top:14px;
  padding:14px;
  border:1px solid var(--portal-border,#dfe7ef);
  border-radius:14px;
  background:var(--portal-soft-blue,#f4f9ff);
}
.performance-training-info p{
  margin:4px 0 0;
  color:var(--portal-muted,#667482);
  font-size:.9rem;
  line-height:1.5;
}


/* PHASE 3B - two-step participant-specific Performance Item enrollment */

.program-enrollment-steps{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin:18px 0 14px;
}

.program-enrollment-step{
  display:flex;
  align-items:center;
  gap:9px;
  padding:10px 12px;
  border:1px solid var(--mufin-border);
  border-radius:11px;
  background:#f8fafc;
  color:var(--mufin-muted);
  font-size:.86rem;
}

.program-enrollment-step span{
  width:25px;
  height:25px;
  display:grid;
  place-items:center;
  flex:0 0 25px;
  border-radius:50%;
  background:#e8eef3;
  font-weight:800;
}

.program-enrollment-step.active{
  border-color:#9fc9e8;
  background:var(--mufin-soft-blue);
  color:var(--mufin-ink);
}

.program-enrollment-step.active span,
.program-enrollment-step.complete span{
  background:var(--mufin-blue);
  color:#fff;
}

.program-participant-performance-items{
  display:grid;
  gap:14px;
  margin-top:12px;
}

.program-participant-item-card{
  border:1px solid var(--mufin-border);
  border-radius:14px;
  padding:15px;
  background:#fbfdff;
}

.program-participant-item-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  padding-bottom:11px;
  margin-bottom:10px;
  border-bottom:1px solid var(--mufin-border);
}

.program-participant-item-head > div{
  display:grid;
  gap:3px;
}

.program-participant-item-head small{
  color:var(--mufin-muted);
}

.program-performance-item-list{
  display:grid;
  gap:8px;
}

.program-performance-item-choice{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:11px 12px;
  border:1px solid var(--mufin-border);
  border-radius:11px;
  background:#fff;
  cursor:pointer;
}

.program-performance-item-choice > span{
  display:grid;
  gap:3px;
}

.program-performance-item-choice small{
  color:var(--mufin-muted);
  line-height:1.4;
}

.program-performance-item-select-all{
  display:flex;
  align-items:center;
  gap:7px;
  white-space:nowrap;
  cursor:pointer;
  font-size:.82rem;
  font-weight:750;
}

@media(max-width:620px){
  .program-enrollment-steps{
    grid-template-columns:1fr;
  }

  .program-participant-item-head{
    flex-direction:column;
  }
}

/* PHASE 3C - read-only Performance Program enrollment summary */

.program-enrollment-summary-modal{
  max-width:760px;
}

.program-enrollment-summary-meta{
  margin:0 0 18px;
  padding:14px 16px;
  border:1px solid #e1eaf1;
  border-radius:14px;
  background:#f8fbfd;
}

.program-summary-event{
  display:grid;
  gap:4px;
}

.program-summary-event > b{
  font-size:1rem;
}

.program-summary-event > span:not(.section-kicker){
  font-size:.88rem;
  color:#607483;
}

.program-enrollment-summary-body{
  display:grid;
  gap:14px;
}

.program-summary-participant{
  padding:16px;
  border:1px solid #e1eaf1;
  border-radius:15px;
  background:#fff;
}

.program-summary-participant-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding-bottom:12px;
  border-bottom:1px solid #edf2f5;
}

.program-summary-participant-head h3{
  margin:3px 0 0;
}

.program-summary-section{
  display:grid;
  gap:8px;
  padding-top:14px;
}

.program-summary-items{
  display:grid;
  gap:8px;
  margin:0;
  padding-left:24px;
}

.program-summary-item-copy{
  display:grid;
  gap:2px;
}

.program-summary-item-copy small{
  color:#667985;
}

.program-summary-guidelines{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:14px;
  padding:11px 12px;
  border-radius:11px;
  background:#f4f8fb;
}

.program-summary-guidelines > span:last-child{
  display:grid;
  gap:2px;
}

.program-summary-guidelines small{
  color:#607483;
}

@media(max-width:700px){
  .program-summary-participant-head{
    flex-direction:column;
  }
}


/* PHASE 3D.1 - Performance enrollment management */

.program-participation-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
}

.program-enrollment-summary-modal{
  width:min(900px,calc(100vw - 32px));
  max-width:900px;
}

.program-enrollment-summary-meta{
  padding:18px 20px;
  border-radius:16px;
}

.program-summary-event{
  position:relative;
  gap:6px;
}

.program-summary-count{
  display:flex;
  align-items:baseline;
  gap:7px;
  margin-top:8px;
}

.program-summary-count b{
  font-size:1.35rem;
}

.program-summary-count span{
  color:#607483;
  font-size:.88rem;
}

.program-enrollment-summary-body{
  gap:18px;
}

.program-summary-participant{
  padding:0;
  overflow:hidden;
  border-radius:18px;
}

.program-summary-participant-head{
  padding:18px 20px;
  background:#f8fbfd;
}

.program-summary-person{
  display:flex;
  align-items:center;
  gap:12px;
}

.program-summary-avatar{
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  flex:0 0 42px;
  border-radius:50%;
  background:#e8f3fb;
  font-weight:800;
  font-size:1rem;
}

.program-summary-section{
  padding:18px 20px 4px;
}

.program-summary-section-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}

.program-summary-section-head > span{
  font-size:.78rem;
  color:#607483;
}

.program-summary-items{
  display:grid;
  gap:9px;
  margin:0;
  padding:0;
}

.program-summary-item{
  display:flex;
  align-items:flex-start;
  gap:11px;
  padding:11px 12px;
  border:1px solid #e6edf2;
  border-radius:12px;
  background:#fff;
}

.program-summary-item-number{
  display:grid;
  place-items:center;
  width:24px;
  height:24px;
  flex:0 0 24px;
  border-radius:50%;
  background:#eef5fa;
  font-size:.76rem;
  font-weight:800;
}

.program-summary-item-copy small{
  line-height:1.4;
}

.program-summary-legacy-note{
  display:grid;
  gap:4px;
  padding:12px 14px;
  border:1px solid #e6edf2;
  border-radius:12px;
  background:#fafcfd;
}

.program-summary-legacy-note span{
  color:#607483;
  font-size:.86rem;
  line-height:1.45;
}

.program-summary-guidelines{
  margin:14px 20px 0;
}

.program-summary-participant-actions{
  display:flex;
  justify-content:flex-end;
  padding:14px 20px 18px;
}

.program-performance-edit-modal{
  max-width:720px;
}

.program-performance-edit-intro{
  margin-bottom:14px;
  color:#607483;
}

@media(max-width:700px){
  .program-participation-actions{
    flex-direction:column;
  }

  .program-participation-actions .btn{
    width:100%;
  }

  .program-summary-participant-head{
    gap:12px;
  }

  .program-summary-participant-actions{
    justify-content:stretch;
  }

  .program-summary-participant-actions .btn{
    width:100%;
  }
}

/* PHASE 3D.2 - simple enrollment summary + participant withdrawal */

.program-enrollment-summary-modal{
  width:min(760px,calc(100vw - 28px));
  max-width:760px;
}

.program-enrollment-summary-meta{
  padding:0;
  margin:0 0 14px;
  background:transparent;
  border:0;
  box-shadow:none;
}

.simple-summary-event{
  display:grid;
  gap:4px;
  padding:0 2px 14px;
  border-bottom:1px solid #e6edf2;
}

.simple-summary-event > b{
  font-size:1rem;
}

.simple-summary-event > span{
  color:#607483;
  font-size:.86rem;
  line-height:1.45;
}

.simple-summary-event > small{
  margin-top:3px;
  color:#607483;
  font-size:.8rem;
}

.simple-enrollment-list{
  display:grid;
  gap:12px;
}

.simple-enrollment-card{
  padding:16px 18px;
  border:1px solid #e2e9ee;
  border-radius:14px;
  background:#fff;
}

.simple-enrollment-card-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom:12px;
}

.simple-enrollment-card h3{
  margin:0 0 5px;
  font-size:1rem;
}

.simple-enrollment-status{
  display:inline-flex;
  align-items:center;
  padding:3px 8px;
  border-radius:999px;
  background:#eef6fb;
  font-size:.72rem;
  font-weight:700;
}

.simple-enrollment-items{
  display:grid;
  gap:7px;
}

.simple-enrollment-items > b{
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:#607483;
}

.simple-summary-items{
  margin:0;
  padding-left:21px;
}

.simple-summary-items li{
  padding:2px 0;
  line-height:1.45;
}

.simple-summary-legacy{
  margin:0;
  color:#607483;
  font-size:.84rem;
  line-height:1.5;
}

.simple-enrollment-guidelines{
  display:flex;
  align-items:center;
  gap:7px;
  margin-top:12px;
  padding-top:11px;
  border-top:1px solid #edf1f4;
  color:#4d6573;
  font-size:.8rem;
}

.simple-enrollment-guidelines > span:first-child{
  font-weight:800;
}

.simple-enrollment-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:13px;
}

.withdraw-participant-btn{
  color:#9a2e2e;
}

.withdraw-performance-modal{
  max-width:560px;
}

.withdraw-performance-copy{
  display:grid;
  gap:10px;
}

.withdraw-performance-copy p{
  margin:0;
  line-height:1.55;
}

.withdraw-performance-program{
  padding:11px 13px;
  border-radius:10px;
  background:#f6f9fb;
  font-weight:700;
}

.btn-danger{
  border-color:#b73a3a;
  background:#b73a3a;
  color:#fff;
}

.btn-danger:hover{
  filter:brightness(.96);
}

@media(max-width:620px){
  .simple-enrollment-actions{
    flex-direction:column;
  }

  .simple-enrollment-actions .btn{
    width:100%;
  }
}

/* PHASE 3D.2A - Enrollment Summary visual refinement */

#programEnrollmentSummaryModal .program-enroll-modal{
  width:min(760px,calc(100vw - 32px));
  max-height:calc(100vh - 40px);
  overflow:auto;
}

#programEnrollmentSummaryModal .program-enroll-modal-head{
  position:relative;
  align-items:flex-start;
  padding-right:46px;
}

#programEnrollmentSummaryModal .modal-close{
  position:absolute;
  top:0;
  right:0;
}

#programEnrollmentSummaryTitle{
  margin:0;
}

#programEnrollmentSummaryMeta{
  margin-top:2px;
}

.simple-summary-event{
  padding:13px 15px;
  margin-bottom:14px;
  border:0;
  border-radius:12px;
  background:var(--surface-soft,#f5f9fb);
}

.simple-summary-event > b{
  display:block;
  font-size:.98rem;
  line-height:1.35;
}

.simple-summary-event > span{
  display:block;
  margin-top:3px;
  font-size:.82rem;
  line-height:1.45;
}

.simple-summary-event > small{
  display:block;
  margin-top:5px;
  font-size:.76rem;
  font-weight:700;
}

.simple-enrollment-list{
  display:grid;
  gap:12px;
}

#programEnrollmentSummaryModal .simple-enrollment-card{
  display:block;
  width:100%;
  padding:15px 16px;
  margin:0;
  border-radius:12px;
}

/*
 * The card also carries:
 *   program-family-member is-enrolled
 *
 * Therefore its base background/border treatment comes directly
 * from the existing My Courses participant design.
 */

.simple-enrollment-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin:0 0 12px;
}

.simple-enrollment-person{
  display:flex;
  align-items:center;
  gap:9px;
  min-width:0;
}

.simple-enrollment-check{
  flex:0 0 auto;
}

.simple-enrollment-person > div{
  min-width:0;
}

.simple-enrollment-person h3{
  margin:0;
  font-size:.98rem;
  line-height:1.3;
}

.simple-enrollment-person small{
  display:block;
  margin-top:2px;
  font-size:.74rem;
  opacity:.72;
}

.simple-enrollment-status{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  padding:4px 9px;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  font-size:.7rem;
  font-weight:800;
  line-height:1.2;
}

.simple-enrollment-items{
  display:grid;
  gap:6px;
  padding:10px 12px;
  border-radius:9px;
  background:rgba(255,255,255,.62);
}

.simple-enrollment-items > b{
  font-size:.74rem;
  line-height:1.2;
}

.simple-summary-items{
  margin:0;
  padding-left:19px;
}

.simple-summary-items li{
  padding:1px 0;
  font-size:.84rem;
  line-height:1.45;
}

.simple-summary-legacy{
  margin:0;
  font-size:.8rem;
  line-height:1.45;
  opacity:.76;
}

.simple-enrollment-guidelines{
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:10px;
  padding:0;
  border:0;
  font-size:.78rem;
}

.simple-enrollment-actions{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:8px;
  margin-top:10px;
}

#programEnrollmentSummaryModal
.simple-enrollment-actions .btn{
  min-height:34px;
  padding:6px 12px;
  font-size:.78rem;
}

#programEnrollmentSummaryModal
.withdraw-participant-btn{
  background:#fff;
}

@media(max-width:620px){
  #programEnrollmentSummaryModal .program-enroll-modal{
    width:calc(100vw - 18px);
  }

  .simple-enrollment-card-head{
    gap:8px;
  }

  .simple-enrollment-actions{
    flex-direction:row;
  }

  .simple-enrollment-actions .btn{
    width:auto;
  }
}

/* PHASE 3D.2B - participant table-row summary */

#programEnrollmentSummaryModal .simple-enrollment-list{
  display:grid;
  gap:10px;
}

/*
 * Each enrollment is one complete participant row.
 * Alternating subtle colors make participant boundaries obvious.
 */
#programEnrollmentSummaryModal .simple-enrollment-card{
  display:grid;
  grid-template-columns:
    minmax(190px,1.05fr)
    minmax(220px,1.25fr)
    minmax(180px,.9fr)
    auto;
  align-items:center;
  column-gap:22px;
  row-gap:8px;

  width:100%;
  margin:0;
  padding:17px 18px;

  border:1px solid rgba(41,105,145,.12);
  border-radius:12px;

  box-shadow:none;
}

/* Light blue participant row */
#programEnrollmentSummaryModal
.simple-enrollment-card:nth-child(odd){
  background:#f0f7fc;
}

/* Light teal participant row */
#programEnrollmentSummaryModal
.simple-enrollment-card:nth-child(even){
  background:#eef9f7;
}

#programEnrollmentSummaryModal
.simple-enrollment-card-head{
  display:block;
  margin:0;
  min-width:0;
}

#programEnrollmentSummaryModal
.simple-enrollment-person{
  display:flex;
  align-items:flex-start;
  gap:9px;
}

#programEnrollmentSummaryModal
.simple-enrollment-check{
  margin-top:2px;
}

#programEnrollmentSummaryModal
.simple-enrollment-person h3{
  margin:0;
  font-size:.96rem;
  line-height:1.35;
}

#programEnrollmentSummaryModal
.simple-enrollment-person small{
  margin-top:4px;
  font-size:.76rem;
  font-weight:600;
}

#programEnrollmentSummaryModal
.simple-enrollment-status{
  margin-top:7px;
  margin-left:31px;

  padding:0;

  border:0;
  background:transparent;

  font-size:.78rem;
  font-weight:600;
}

#programEnrollmentSummaryModal
.simple-enrollment-items{
  align-self:stretch;

  display:block;

  padding:0;

  border:0;
  border-radius:0;
  background:transparent;
}

#programEnrollmentSummaryModal
.simple-enrollment-items > b{
  display:block;
  margin-bottom:7px;

  font-size:.78rem;
  font-weight:800;
  text-transform:none;
  letter-spacing:0;
}

#programEnrollmentSummaryModal
.simple-summary-items{
  margin:0;
  padding-left:20px;
}

#programEnrollmentSummaryModal
.simple-summary-items li{
  padding:1px 0;
  font-size:.82rem;
  line-height:1.4;
}

#programEnrollmentSummaryModal
.simple-summary-legacy{
  margin:0;
  font-size:.79rem;
  line-height:1.45;
}

#programEnrollmentSummaryModal
.simple-enrollment-guidelines{
  align-self:center;

  display:flex;
  align-items:flex-start;
  gap:7px;

  margin:0;
  padding:0;

  border:0;

  font-size:.79rem;
  line-height:1.4;
}

#programEnrollmentSummaryModal
.simple-enrollment-guidelines > span:first-child{
  flex:0 0 auto;
  font-weight:800;
}

#programEnrollmentSummaryModal
.simple-enrollment-actions{
  align-self:center;

  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:center;

  gap:7px;

  margin:0;
}

#programEnrollmentSummaryModal
.simple-enrollment-actions .btn{
  width:100%;
  min-width:94px;
  min-height:34px;

  padding:6px 11px;

  font-size:.76rem;
  white-space:nowrap;
}

/*
 * Keep event information visually separate from participant rows.
 */
#programEnrollmentSummaryModal
.simple-summary-event{
  margin-bottom:14px;
  padding:12px 15px;

  border-radius:10px;
  background:#f7f9fb;
}

/*
 * Tablet layout:
 * participant | items
 * guidelines  | actions
 */
@media(max-width:900px){

  #programEnrollmentSummaryModal
  .simple-enrollment-card{
    grid-template-columns:
      minmax(180px,1fr)
      minmax(220px,1.25fr);
  }

  #programEnrollmentSummaryModal
  .simple-enrollment-guidelines{
    grid-column:1;
  }

  #programEnrollmentSummaryModal
  .simple-enrollment-actions{
    grid-column:2;

    flex-direction:row;
    justify-content:flex-end;
  }

  #programEnrollmentSummaryModal
  .simple-enrollment-actions .btn{
    width:auto;
  }
}

/*
 * Mobile: each participant remains one colored row/card,
 * but its contents stack vertically.
 */
@media(max-width:620px){

  #programEnrollmentSummaryModal
  .simple-enrollment-card{
    grid-template-columns:1fr;
    gap:11px;
    padding:15px;
  }

  #programEnrollmentSummaryModal
  .simple-enrollment-guidelines,
  #programEnrollmentSummaryModal
  .simple-enrollment-actions{
    grid-column:1;
  }

  #programEnrollmentSummaryModal
  .simple-enrollment-actions{
    flex-direction:row;
    justify-content:flex-start;
  }
}

/* ==========================================================
   PHASE 3D.2C
   Enrollment Summary - exact approved mockup treatment
   ========================================================== */

#programEnrollmentSummaryModal .program-enroll-modal{
  width:min(1180px,calc(100vw - 40px));
  max-width:1180px;
  max-height:calc(100vh - 36px);
  padding:0;
  overflow:auto;
  border-radius:22px;
  background:#fff;
}

#programEnrollmentSummaryModal .program-enroll-modal-head{
  position:relative;
  display:block;
  padding:28px 32px 12px;
}

#programEnrollmentSummaryModal .program-enroll-modal-head .eyebrow{
  display:block;
  margin-bottom:14px;
  font-size:.76rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}

#programEnrollmentSummaryTitle{
  margin:0;
  font-size:2rem;
  line-height:1.15;
}

#programEnrollmentSummaryModal .modal-close{
  position:absolute;
  top:24px;
  right:28px;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  margin:0;
  border-radius:10px;
}

#programEnrollmentSummaryMeta{
  margin:0;
  padding:8px 32px 16px;
}

#programEnrollmentSummaryModal .simple-summary-event{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:24px;

  margin:0;
  padding:18px 22px;

  border:0;
  border-radius:14px;
  background:#f1f7fc;
}

#programEnrollmentSummaryModal .simple-summary-event > b{
  grid-column:1;
  margin:0;
  font-size:1rem;
  line-height:1.3;
}

#programEnrollmentSummaryModal .simple-summary-event > span{
  grid-column:1;
  margin-top:-18px;
  padding-top:22px;
  font-size:.82rem;
}

#programEnrollmentSummaryModal .simple-summary-event > small{
  grid-column:2;
  grid-row:1 / span 2;

  margin:0;
  padding-left:22px;

  border-left:1px solid rgba(65,95,120,.16);

  font-size:.84rem;
  font-weight:600;
  white-space:nowrap;
}

#programEnrollmentSummaryBody{
  padding:0 32px 28px;
}

.enrollment-summary-table{
  width:100%;
}

.enrollment-summary-columns{
  display:grid;
  grid-template-columns:
    minmax(220px,1.2fr)
    minmax(250px,1.25fr)
    minmax(220px,.95fr)
    132px;

  gap:22px;

  padding:10px 18px 9px;

  font-size:.76rem;
  font-weight:800;
  color:#566779;
}

.simple-enrollment-list{
  display:grid;
  gap:12px;
}

#programEnrollmentSummaryModal .simple-enrollment-card{
  display:grid;

  grid-template-columns:
    minmax(220px,1.2fr)
    minmax(250px,1.25fr)
    minmax(220px,.95fr)
    132px;

  align-items:center;
  gap:22px;

  width:100%;
  margin:0;
  padding:18px 20px;

  border:0;
  border-radius:14px;
  box-shadow:none;
}

#programEnrollmentSummaryModal
.simple-enrollment-card:nth-child(odd){
  background:#edf7ff;
}

#programEnrollmentSummaryModal
.simple-enrollment-card:nth-child(even){
  background:#edf9f7;
}

#programEnrollmentSummaryModal .simple-enrollment-card-head{
  display:block;
  margin:0;
  padding:0;
}

#programEnrollmentSummaryModal .simple-enrollment-person{
  display:grid;
  grid-template-columns:40px 1fr;
  align-items:start;
  column-gap:11px;
}

#programEnrollmentSummaryModal .simple-enrollment-check{
  grid-column:1;
  grid-row:1 / span 3;

  width:36px;
  height:36px;

  display:grid;
  place-items:center;

  margin:0;

  border-radius:50%;
  background:#c9f4e2;
  color:#008e68;

  font-size:1.1rem;
  font-weight:900;
}

#programEnrollmentSummaryModal
.simple-enrollment-person > div{
  grid-column:2;
}

#programEnrollmentSummaryModal
.simple-enrollment-person h3{
  margin:0;
  font-size:.96rem;
  line-height:1.35;
}

#programEnrollmentSummaryModal
.simple-enrollment-person small{
  display:block;
  margin-top:6px;

  color:#008e68;

  font-size:.77rem;
  font-weight:600;
}

#programEnrollmentSummaryModal .simple-enrollment-status{
  display:block;

  margin:3px 0 0 51px;
  padding:0;

  border:0;
  background:transparent;

  font-size:.77rem;
  font-weight:500;
  color:#506173;
}

#programEnrollmentSummaryModal .simple-enrollment-items{
  display:block;
  align-self:center;

  margin:0;
  padding:0;

  border:0;
  background:transparent;
}

#programEnrollmentSummaryModal
.simple-enrollment-items > b{
  display:none;
}

#programEnrollmentSummaryModal .simple-summary-items{
  margin:0;
  padding-left:22px;
}

#programEnrollmentSummaryModal .simple-summary-items li{
  padding:2px 0;
  font-size:.84rem;
  line-height:1.4;
}

#programEnrollmentSummaryModal .simple-summary-legacy{
  margin:0;
  font-size:.8rem;
  line-height:1.45;
  color:#566779;
}

#programEnrollmentSummaryModal
.simple-enrollment-guidelines{
  display:grid;
  grid-template-columns:24px 1fr;
  align-items:start;
  gap:8px;

  margin:0;
  padding:0;

  border:0;

  font-size:.82rem;
  line-height:1.4;
}

#programEnrollmentSummaryModal
.simple-enrollment-guidelines > span:first-child{
  color:#008e68;
  font-size:1.1rem;
  font-weight:900;
  line-height:1;
}

#programEnrollmentSummaryModal
.simple-enrollment-actions{
  display:grid;
  gap:8px;

  margin:0;
  padding:0;
}

#programEnrollmentSummaryModal
.simple-enrollment-actions .btn{
  width:100%;
  min-width:0;
  min-height:40px;

  margin:0;
  padding:7px 10px;

  border-radius:10px;

  font-size:.78rem;
  font-weight:700;
}

#programEnrollmentSummaryModal
.withdraw-participant-btn{
  background:#fff;
}

#programEnrollmentSummaryModal
.program-enroll-actions{
  margin:0;
  padding:20px 32px 24px;

  border-top:1px solid #e7edf2;

  display:flex;
  justify-content:flex-end;
}

#programEnrollmentSummaryModal
.program-enroll-actions .btn{
  min-width:110px;
}

@media(max-width:900px){

  .enrollment-summary-columns{
    display:none;
  }

  #programEnrollmentSummaryModal .simple-enrollment-card{
    grid-template-columns:1fr 1fr;
  }

  #programEnrollmentSummaryModal
  .simple-enrollment-actions{
    display:flex;
    justify-content:flex-end;
  }

  #programEnrollmentSummaryModal
  .simple-enrollment-actions .btn{
    width:auto;
    min-width:96px;
  }
}

@media(max-width:620px){

  #programEnrollmentSummaryModal .program-enroll-modal{
    width:calc(100vw - 18px);
    border-radius:16px;
  }

  #programEnrollmentSummaryModal .program-enroll-modal-head,
  #programEnrollmentSummaryMeta,
  #programEnrollmentSummaryBody{
    padding-left:18px;
    padding-right:18px;
  }

  #programEnrollmentSummaryModal .simple-summary-event{
    grid-template-columns:1fr;
  }

  #programEnrollmentSummaryModal
  .simple-summary-event > small{
    grid-column:1;
    grid-row:auto;

    padding:7px 0 0;

    border-left:0;
    border-top:1px solid rgba(65,95,120,.14);
  }

  #programEnrollmentSummaryModal .simple-enrollment-card{
    grid-template-columns:1fr;
    gap:14px;
  }

  #programEnrollmentSummaryModal
  .simple-enrollment-actions{
    justify-content:flex-start;
  }
}

/* ==========================================================
   PHASE 3D.2D
   Enrollment Summary - approved mockup final polish
   Presentation only
   ========================================================== */

#programEnrollmentSummaryModal .program-enroll-modal{
  width:min(1120px,calc(100vw - 48px));
  max-width:1120px;
  border-radius:20px;
}

#programEnrollmentSummaryModal .program-enroll-modal-head{
  padding:25px 30px 10px;
}

#programEnrollmentSummaryModal .program-enroll-modal-head .section-kicker{
  margin-bottom:10px;
  font-size:.72rem;
  letter-spacing:.12em;
}

#programEnrollmentSummaryTitle{
  font-size:1.78rem;
  line-height:1.15;
}

#programEnrollmentSummaryModal .modal-close{
  top:20px;
  right:24px;
  width:38px;
  height:38px;
  border-radius:9px;
  font-size:1.35rem;
}

#programEnrollmentSummaryMeta{
  padding:8px 30px 17px;
}

/* Approved mockup event banner */

#programEnrollmentSummaryModal .simple-summary-event{
  display:grid;
  grid-template-columns:50px minmax(0,1fr) auto;
  align-items:center;
  gap:15px;

  min-height:78px;
  padding:15px 20px;

  border-radius:13px;
  background:#f1f7fc;
}

#programEnrollmentSummaryModal .summary-event-icon{
  width:42px;
  height:42px;

  display:grid;
  place-items:center;

  border-radius:10px;
  background:#dcecf8;
}

/* CSS calendar icon so no new asset dependency is introduced */

#programEnrollmentSummaryModal .summary-calendar-icon{
  position:relative;

  width:25px;
  height:24px;

  display:block;

  border:2px solid #2377a8;
  border-radius:5px;
  background:#fff;
}

#programEnrollmentSummaryModal .summary-calendar-icon::before{
  content:"";

  position:absolute;
  left:-2px;
  right:-2px;
  top:6px;

  border-top:2px solid #2377a8;
}

#programEnrollmentSummaryModal .summary-calendar-rings::before,
#programEnrollmentSummaryModal .summary-calendar-rings::after{
  content:"";

  position:absolute;
  top:-5px;

  width:3px;
  height:7px;

  border-radius:2px;
  background:#2377a8;
}

#programEnrollmentSummaryModal .summary-calendar-rings::before{
  left:5px;
}

#programEnrollmentSummaryModal .summary-calendar-rings::after{
  right:5px;
}

#programEnrollmentSummaryModal .summary-calendar-mark{
  position:absolute;
  left:6px;
  top:12px;

  width:10px;
  height:6px;

  border-left:2px solid #2377a8;
  border-bottom:2px solid #2377a8;
  transform:rotate(-45deg);
}

#programEnrollmentSummaryModal .summary-event-copy{
  min-width:0;
}

#programEnrollmentSummaryModal .summary-event-copy > b{
  display:block;
  margin:0 0 5px;

  color:#142d40;

  font-size:.96rem;
  font-weight:800;
  line-height:1.3;
}

#programEnrollmentSummaryModal .summary-event-copy > span{
  display:block;
  margin:0;

  color:#526779;

  font-size:.79rem;
  line-height:1.4;
}

#programEnrollmentSummaryModal .summary-participant-count{
  min-height:42px;

  display:flex;
  align-items:center;
  gap:9px;

  padding-left:20px;

  border-left:1px solid rgba(65,95,120,.15);
}

#programEnrollmentSummaryModal .summary-participant-count small{
  color:#43596a;

  font-size:.8rem;
  font-weight:650;
  white-space:nowrap;
}

/* CSS participants icon */

#programEnrollmentSummaryModal .summary-people-icon{
  position:relative;

  width:28px;
  height:25px;

  display:block;
}

#programEnrollmentSummaryModal .summary-people-icon::before,
#programEnrollmentSummaryModal .summary-people-icon::after{
  content:"";

  position:absolute;

  width:8px;
  height:8px;

  border:2px solid #2377a8;
  border-radius:50%;
  background:#fff;
}

#programEnrollmentSummaryModal .summary-people-icon::before{
  left:3px;
  top:1px;
}

#programEnrollmentSummaryModal .summary-people-icon::after{
  right:2px;
  top:4px;
}

#programEnrollmentSummaryModal .summary-people-icon > span:first-child,
#programEnrollmentSummaryModal .summary-people-icon > span:last-child{
  position:absolute;
  bottom:1px;

  height:10px;

  border:2px solid #2377a8;
  border-bottom:0;
  border-radius:9px 9px 0 0;
}

#programEnrollmentSummaryModal .summary-people-icon > span:first-child{
  left:0;
  width:15px;
}

#programEnrollmentSummaryModal .summary-people-icon > span:last-child{
  right:0;
  width:13px;
}

/* Table proportions from approved mockup */

#programEnrollmentSummaryBody{
  padding:0 30px 24px;
}

#programEnrollmentSummaryModal .enrollment-summary-columns,
#programEnrollmentSummaryModal .simple-enrollment-card{
  grid-template-columns:
    minmax(205px,1.16fr)
    minmax(250px,1.32fr)
    minmax(205px,.98fr)
    116px;

  column-gap:20px;
}

#programEnrollmentSummaryModal .enrollment-summary-columns{
  padding:9px 17px 8px;

  color:#506274;

  font-size:.73rem;
}

#programEnrollmentSummaryModal .simple-enrollment-list{
  gap:10px;
}

#programEnrollmentSummaryModal .simple-enrollment-card{
  min-height:112px;
  padding:15px 17px;

  border-radius:12px;
}

/* Preserve approved alternating full-row backgrounds */

#programEnrollmentSummaryModal
.simple-enrollment-card:nth-child(odd){
  background:#edf7ff;
}

#programEnrollmentSummaryModal
.simple-enrollment-card:nth-child(even){
  background:#edf9f7;
}

/* Participant column */

#programEnrollmentSummaryModal .simple-enrollment-person{
  grid-template-columns:36px 1fr;
  column-gap:10px;
  align-items:start;
}

#programEnrollmentSummaryModal .simple-enrollment-check{
  width:32px;
  height:32px;

  background:#c9f4e2;
  color:#008e68;

  font-size:1rem;
}

#programEnrollmentSummaryModal .simple-enrollment-person h3{
  font-size:.91rem;
  line-height:1.3;
}

#programEnrollmentSummaryModal .simple-enrollment-person small{
  margin-top:4px;

  font-size:.73rem;
}

#programEnrollmentSummaryModal .simple-enrollment-status{
  margin:2px 0 0 46px;

  font-size:.73rem;
}

/* Performance Item column */

#programEnrollmentSummaryModal .simple-summary-items{
  padding-left:20px;
}

#programEnrollmentSummaryModal .simple-summary-items li{
  padding:1px 0;

  font-size:.8rem;
  line-height:1.35;
}

#programEnrollmentSummaryModal .simple-summary-legacy{
  max-width:225px;

  color:#536779;

  font-size:.76rem;
  line-height:1.4;
}

/* Guidelines column */

#programEnrollmentSummaryModal .simple-enrollment-guidelines{
  grid-template-columns:20px 1fr;
  gap:6px;

  font-size:.77rem;
  line-height:1.35;
}

#programEnrollmentSummaryModal
.simple-enrollment-guidelines > span:first-child{
  font-size:1rem;
}

/* Actions match approved mockup */

#programEnrollmentSummaryModal .simple-enrollment-actions{
  display:grid;
  align-content:center;
  gap:7px;
}

#programEnrollmentSummaryModal .simple-enrollment-actions .btn{
  width:100%;
  min-height:37px;

  padding:6px 9px;

  border:1px solid #8fb5d0;
  border-radius:9px;

  background:#fff;
  color:#276b98;

  font-size:.75rem;
  font-weight:700;
}

#programEnrollmentSummaryModal
.simple-enrollment-actions .btn:hover{
  background:#f6fbff;
  border-color:#6c9fbe;
}

#programEnrollmentSummaryModal .withdraw-participant-btn{
  background:#fff;
  color:#276b98;
}

/* Bottom Close area */

#programEnrollmentSummaryModal .program-enroll-actions{
  padding:17px 30px 20px;

  border-top:1px solid #e6edf2;
}

#programEnrollmentSummaryModal .program-enroll-actions .btn{
  min-width:100px;
  min-height:38px;

  border-radius:9px;
}

/* Responsive behavior retained */

@media(max-width:900px){

  #programEnrollmentSummaryModal
  .summary-participant-count{
    padding-left:12px;
  }

  #programEnrollmentSummaryModal .simple-enrollment-card{
    min-height:0;
  }
}

@media(max-width:620px){

  #programEnrollmentSummaryModal .program-enroll-modal{
    width:calc(100vw - 18px);
  }

  #programEnrollmentSummaryModal .simple-summary-event{
    grid-template-columns:42px 1fr;
    gap:12px;
  }

  #programEnrollmentSummaryModal
  .summary-participant-count{
    grid-column:1 / -1;

    padding:10px 0 0 54px;

    border-left:0;
    border-top:1px solid rgba(65,95,120,.14);
  }
}

/* Task 25E.3: Regular Course enrollment preview */
.regular-course-enroll-actions{display:flex;justify-content:flex-end;margin:0 0 1rem}
#regularCourseModal .field{margin:1rem 0}
#regularCourseModal .field select,#regularCourseModal .field textarea{width:100%}

/* Task 25E.4: Regular Course scheduling preferences */
.regular-preference{margin:12px 0;padding:12px;border:1px solid var(--border,#d9e5e8);border-radius:10px}
.regular-preference>label{display:block;font-weight:600;margin-bottom:8px}
.regular-preference-controls{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.regular-preference-controls select{width:100%;min-width:0;padding:10px;border:1px solid #b7cbd0;border-radius:8px;background:white}
@media(max-width:560px){.regular-preference-controls{grid-template-columns:1fr}}