/* NANNM Member Portal UI Enhancement
   Visual layer only: business/application/payment logic remains in existing PHP files. */
:root {
  --nannm-primary: #087f5b;
  --nannm-primary-dark: #075f47;
  --nannm-primary-deep: #064b3a;
  --nannm-secondary: #0b4f6c;
  --nannm-accent: #d9a62e;
  --nannm-danger: #c23b4a;
  --nannm-bg: #f4f8f7;
  --nannm-surface: #ffffff;
  --nannm-soft: #eaf6f1;
  --nannm-soft-blue: #edf6f9;
  --nannm-text: #17352d;
  --nannm-muted: #6c7d77;
  --nannm-border: #dce9e4;
  --nannm-shadow: 0 12px 34px rgba(7, 95, 71, .10);
  --nannm-shadow-sm: 0 6px 18px rgba(7, 95, 71, .08);
  --nannm-radius: 18px;
}

html { scroll-behavior: smooth; }
body.app,
body.bg-img {
  background-color: var(--nannm-bg) !important;
  color: var(--nannm-text);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}
body.app { min-height: 100vh; }
body.app::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(circle at 85% 8%, rgba(8,127,91,.08), transparent 27rem),
    radial-gradient(circle at 5% 75%, rgba(11,79,108,.05), transparent 24rem);
}

a { color: var(--nannm-primary); }
a:hover { color: var(--nannm-primary-dark); }

/* Header */
.app-header {
  background: rgba(255,255,255,.95) !important;
  border-bottom: 1px solid rgba(220,233,228,.95);
  box-shadow: 0 4px 18px rgba(6,75,58,.05);
  backdrop-filter: blur(14px);
}
.app-header-inner { background: transparent !important; }
.sidepanel-toggler { color: var(--nannm-primary) !important; }
.app-utilities .app-utility-item > a,
.app-utilities .app-user-dropdown > a {
  border-radius: 12px;
  transition: background-color .2s ease, transform .2s ease;
}
.app-utilities .app-utility-item > a:hover { background: var(--nannm-soft); }
.app-user-dropdown img {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  object-fit: cover;
  border: 2px solid rgba(8,127,91,.16);
}
.icon-badge {
  background: var(--nannm-danger) !important;
  box-shadow: 0 0 0 3px #fff;
}
.dropdown-menu {
  border: 1px solid var(--nannm-border) !important;
  border-radius: 16px !important;
  box-shadow: var(--nannm-shadow) !important;
  overflow: hidden;
}
.dropdown-menu-header { background: var(--nannm-soft); }

/* Side navigation */
.app-sidepanel { box-shadow: 8px 0 30px rgba(6,75,58,.09) !important; }
.app-sidepanel .sidepanel-inner {
  background: linear-gradient(180deg, #073f33 0%, #075f47 55%, #064b3a 100%) !important;
  border-right: 0 !important;
}
.app-branding {
  min-height: 78px;
  padding: 14px 18px !important;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.app-branding .app-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.app-branding .logo-icon {
  width: 46px !important;
  height: 46px !important;
  object-fit: cover;
  border-radius: 14px;
  padding: 3px;
  background: #fff;
  box-shadow: 0 6px 16px rgba(0,0,0,.14);
}
.app-branding .logo-text { color: #fff !important; font-weight: 800 !important; letter-spacing: .04em; }
.app-branding .logo-text::after {
  content: "Member Portal";
  display: block;
  margin-top: 1px;
  font-size: 10px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: .07em;
  color: rgba(255,255,255,.68);
}
.app-nav .nav-link,
.app-nav .submenu-link {
  color: rgba(255,255,255,.80) !important;
  border-radius: 12px;
  margin: 3px 10px;
  transition: all .18s ease;
}
.app-nav .nav-link:hover,
.app-nav .submenu-link:hover {
  color: #fff !important;
  background: rgba(255,255,255,.09) !important;
}
.app-nav .nav-link.active,
.app-nav .nav-item.active > .nav-link,
.app-nav .nav-link.nannm-active {
  color: #fff !important;
  background: rgba(255,255,255,.15) !important;
  box-shadow: inset 3px 0 0 var(--nannm-accent);
}
.app-nav .nav-icon { color: #b7f2dd !important; }
.app-nav .nav-link.active .nav-icon,
.app-nav .nav-link.nannm-active .nav-icon { color: #fff !important; }
.app-nav .submenu { background: rgba(0,0,0,.08) !important; margin: 0 10px 6px; border-radius: 12px; }
.app-nav .submenu-link { padding-left: 42px !important; font-size: 13px; }
.app-sidepanel-footer { border-top: 1px solid rgba(255,255,255,.10) !important; }
.sidepanel-close { color: #fff !important; }
.nannm-renew-lock {
  font-size: 10px;
  margin-left: auto;
  color: rgba(255,255,255,.6);
}

/* Main content */
.app-wrapper { background: transparent !important; }
.app-content { padding-top: 28px !important; }
.container-xl { max-width: 1280px; }
.app-page-title {
  color: var(--nannm-text) !important;
  font-size: clamp(1.45rem, 2.5vw, 2rem) !important;
  font-weight: 800 !important;
  letter-spacing: -.025em;
  margin-bottom: 1.25rem !important;
}
.app-page-title::after {
  content: "";
  display: block;
  width: 48px;
  height: 4px;
  margin-top: 8px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--nannm-primary), var(--nannm-accent));
}

/* Dashboard hero */
.nannm-hero {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  padding: clamp(20px, 4vw, 34px);
  margin-bottom: 24px;
  color: #fff;
  background: linear-gradient(125deg, var(--nannm-primary-deep) 0%, var(--nannm-primary) 62%, #159d78 100%);
  box-shadow: 0 18px 42px rgba(7,95,71,.20);
}
.nannm-hero::after {
  content: "✚";
  position: absolute;
  right: -12px;
  bottom: -78px;
  font-size: 230px;
  line-height: 1;
  font-weight: 900;
  color: rgba(255,255,255,.07);
  transform: rotate(-8deg);
}
.nannm-hero > * { position: relative; z-index: 1; }
.nannm-hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.13);
  border: 1px solid rgba(255,255,255,.15);
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 12px;
}
.nannm-hero h2 { color: #fff; font-weight: 800; margin-bottom: 7px; }
.nannm-hero p { color: rgba(255,255,255,.82); margin-bottom: 18px; max-width: 690px; }
.nannm-hero-meta { display: flex; flex-wrap: wrap; gap: 10px; }
.nannm-hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 11px;
  border-radius: 11px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.12);
  font-size: 12px;
}
.nannm-quick-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 17px; }
.nannm-quick-actions a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 700;
  font-size: 13px;
  color: var(--nannm-primary-deep);
  background: #fff;
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
}
.nannm-quick-actions a.nannm-secondary-action { color: #fff; background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.22); }

/* Cards */
.app-card,
.card {
  border: 1px solid var(--nannm-border) !important;
  border-radius: var(--nannm-radius) !important;
  box-shadow: var(--nannm-shadow-sm) !important;
  background: var(--nannm-surface) !important;
}
.app-card:hover { box-shadow: var(--nannm-shadow) !important; }
.app-card-header { border-color: var(--nannm-border) !important; }
.app-card-title { color: var(--nannm-text) !important; font-weight: 750 !important; }
.app-card-stat { overflow: hidden; position: relative; }
.app-card-stat::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--nannm-primary), #48b895);
}
.app-card-stat .stats-type { color: var(--nannm-muted) !important; font-weight: 650 !important; }
.app-card-stat .stats-figure { color: var(--nannm-primary-deep) !important; font-weight: 800 !important; }
.app-icon-holder {
  background: var(--nannm-soft) !important;
  color: var(--nannm-primary) !important;
  border-radius: 12px !important;
}

/* Forms */
.form-control,
.form-select,
.textarea-control,
select,
textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="tel"],
input[type="number"],
input[type="file"] {
  min-height: 46px;
  border-radius: 12px !important;
  border-color: #cfdfd9 !important;
  background-color: #fff;
  box-shadow: none !important;
}
textarea.form-control,
textarea.textarea-control { min-height: 110px; }
.form-control:focus,
.form-select:focus,
.textarea-control:focus,
select:focus,
textarea:focus,
input:focus {
  border-color: rgba(8,127,91,.65) !important;
  box-shadow: 0 0 0 .2rem rgba(8,127,91,.11) !important;
}
label,
.fieldlabels { color: #35564c !important; font-weight: 650 !important; margin-top: 7px; }
#msform .form-card {
  background: #fff;
  border: 1px solid var(--nannm-border);
  border-radius: 16px;
  padding: clamp(16px, 3vw, 28px);
}
#msform .fs-title { color: var(--nannm-primary-deep); font-weight: 800; }
#msform .steps {
  display: inline-flex;
  float: right;
  align-items: center;
  min-height: 32px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--nannm-soft);
  color: var(--nannm-primary-dark) !important;
  font-size: 12px !important;
  font-weight: 800;
}
.progress-bar {
  overflow: hidden;
  background: #e4efeb !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.04);
}
.progress-bar .progress,
#progress {
  background: linear-gradient(90deg, var(--nannm-primary), #43b98f) !important;
}
.settings-section .app-card-settings { padding: clamp(14px, 3vw, 26px) !important; }

/* Buttons */
.btn,
.app-btn-primary,
.app-btn-secondary,
.action-button,
.action-button-previous {
  border-radius: 11px !important;
  font-weight: 700 !important;
  min-height: 40px;
}
.btn-primary,
.app-btn-primary,
.action-button {
  background: var(--nannm-primary) !important;
  border-color: var(--nannm-primary) !important;
  color: #fff !important;
}
.btn-primary:hover,
.app-btn-primary:hover,
.action-button:hover {
  background: var(--nannm-primary-dark) !important;
  border-color: var(--nannm-primary-dark) !important;
}
.btn-success { background: #168963 !important; border-color: #168963 !important; }
.btn-warning { background: var(--nannm-accent) !important; border-color: var(--nannm-accent) !important; color: #2c250f !important; }
.app-btn-secondary { border-color: #bdd3cb !important; color: var(--nannm-primary-dark) !important; }

/* Alerts/status */
.alert { border: 0 !important; border-radius: 14px !important; }
.alert-success { background: #e7f8f0 !important; color: #0b6548 !important; }
.alert-warning { background: #fff6db !important; color: #765b0a !important; }
.alert-danger { background: #fcecef !important; color: #923443 !important; }
.badge { border-radius: 999px; padding: .48em .72em; }

/* Account/profile */
.profile-image {
  width: 86px !important;
  height: 86px !important;
  object-fit: cover;
  border-radius: 22px !important;
  border: 4px solid #fff;
  box-shadow: 0 8px 20px rgba(7,95,71,.15);
}
.app-card-account .item { border-color: var(--nannm-border) !important; }

/* Tables */
.table { --bs-table-bg: transparent; color: var(--nannm-text); }
.table thead th { color: #48675e; font-size: 12px; text-transform: uppercase; letter-spacing: .035em; border-color: var(--nannm-border); }
.table td { border-color: #edf3f1; vertical-align: middle; }

/* Footer */
.app-footer { background: transparent !important; color: var(--nannm-muted); }
.app-footer .copyright { color: var(--nannm-muted); }

/* PWA mobile bottom navigation */
.nannm-mobile-nav {
  display: none;
  position: fixed;
  left: 10px;
  right: 10px;
  bottom: calc(10px + env(safe-area-inset-bottom));
  z-index: 1090;
  min-height: 66px;
  padding: 7px 6px;
  border: 1px solid rgba(207,223,217,.94);
  border-radius: 20px;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(16px);
  box-shadow: 0 15px 35px rgba(6,75,58,.18);
}
.nannm-mobile-nav a {
  flex: 1 1 20%;
  min-width: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 2px;
  color: #74857f;
  text-decoration: none;
  border-radius: 14px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.05;
}
.nannm-mobile-nav a i,
.nannm-mobile-nav a svg { font-size: 18px; }
.nannm-mobile-nav a.active,
.nannm-mobile-nav a.nannm-active {
  color: var(--nannm-primary);
  background: var(--nannm-soft);
}
.nannm-mobile-nav a.is-locked { color: #99a6a2; }
.nannm-mobile-nav .nav-badge {
  position: absolute;
  top: 1px;
  right: 17%;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--nannm-danger);
  color: #fff;
  font-size: 9px;
  line-height: 16px;
}

/* PWA install UI */
.nannm-install-card {
  position: fixed;
  right: 16px;
  bottom: 18px;
  z-index: 1200;
  width: min(360px, calc(100vw - 32px));
  padding: 14px;
  border: 1px solid var(--nannm-border);
  border-radius: 18px;
  background: rgba(255,255,255,.98);
  box-shadow: 0 20px 48px rgba(6,75,58,.22);
  animation: nannmSlideUp .28s ease-out both;
}
.nannm-install-card .nannm-install-icon {
  width: 42px; height: 42px; border-radius: 13px;
  display: grid; place-items: center;
  color: #fff; background: var(--nannm-primary);
}
.nannm-install-card h6 { margin: 0; color: var(--nannm-text); font-weight: 800; }
.nannm-install-card p { margin: 3px 0 0; color: var(--nannm-muted); font-size: 12px; }
.nannm-install-actions { display: flex; gap: 8px; margin-top: 11px; }
.nannm-install-actions .btn { min-height: 36px; font-size: 12px; }

/* Processing overlay */
.nannm-processing {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(4,35,28,.46);
  backdrop-filter: blur(4px);
}
.nannm-processing.show { display: flex; }
.nannm-processing-card {
  width: min(330px, 92vw);
  text-align: center;
  padding: 24px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 22px 55px rgba(0,0,0,.22);
}
.nannm-processing-spinner {
  width: 44px; height: 44px; margin: 0 auto 14px;
  border: 4px solid #dfece7;
  border-top-color: var(--nannm-primary);
  border-radius: 50%;
  animation: nannmSpin .8s linear infinite;
}
.nannm-processing-card strong { display: block; color: var(--nannm-text); }
.nannm-processing-card span { display: block; margin-top: 4px; color: var(--nannm-muted); font-size: 12px; }

/* Small app toast */
.nannm-app-toast {
  position: fixed;
  left: 50%;
  bottom: 98px;
  z-index: 1300;
  transform: translateX(-50%) translateY(20px);
  width: max-content;
  max-width: calc(100vw - 30px);
  padding: 10px 14px;
  border-radius: 12px;
  color: #fff;
  background: #17352d;
  box-shadow: 0 10px 28px rgba(0,0,0,.18);
  font-size: 12px;
  opacity: 0;
  pointer-events: none;
  transition: .2s ease;
}
.nannm-app-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Auth pages */
body.bg-img {
  position: relative;
  min-height: 100vh;
  background-position: center !important;
  background-size: cover !important;
  background-attachment: fixed;
}
body.bg-img::before {
  content: "";
  position: fixed;
  inset: 0;
  background: linear-gradient(135deg, rgba(3,51,39,.88), rgba(8,127,91,.63));
  z-index: -1;
}
body.bg-img .content-wrapper { min-height: 100vh; display: flex; align-items: center; padding: 24px 0; }
body.bg-img .container-p-y { padding-top: 0 !important; padding-bottom: 0 !important; }
body.bg-img .container-p-y > br { display: none; }
body.bg-img .row.justify-content-center > [class*="col-md-"] { width: min(100%, 470px); }
body.bg-img .card {
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.25) !important;
  box-shadow: 0 26px 70px rgba(0,0,0,.23) !important;
}
body.bg-img .card-header { padding: 18px 22px; background: #f5fbf8; border-color: var(--nannm-border); }
body.bg-img .card-body { padding: 22px; }
.nannm-auth-brand {
  padding: 22px 22px 12px;
  text-align: center;
  background: #fff;
}
.nannm-auth-brand img { width: 72px; height: 72px; border-radius: 18px; object-fit: contain; box-shadow: 0 8px 22px rgba(7,95,71,.12); }
.nannm-auth-brand h4 { margin: 12px 0 3px; color: var(--nannm-primary-deep); font-weight: 850; }
.nannm-auth-brand p { margin: 0; color: var(--nannm-muted); font-size: 12px; }

@keyframes nannmSpin { to { transform: rotate(360deg); } }
@keyframes nannmSlideUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 1199.98px) {
  .nannm-mobile-nav { display: flex; }
  body.app .app-wrapper { padding-bottom: 86px; }
  body.app .app-footer { padding-bottom: 72px; }
  .nannm-install-card { bottom: 92px; }
  .app-content { padding-left: 12px !important; padding-right: 12px !important; }
}

@media (max-width: 575.98px) {
  .app-content { padding-top: 18px !important; }
  .app-page-title { font-size: 1.45rem !important; }
  .app-card { border-radius: 15px !important; }
  .nannm-hero { border-radius: 19px; padding: 19px; }
  .nannm-hero h2 { font-size: 1.35rem; }
  .nannm-hero::after { font-size: 175px; right: -20px; }
  .settings-section .app-card-settings { padding: 10px !important; }
  #msform .form-card { padding: 14px; }
  #msform .fs-title { font-size: 1.05rem !important; }
  #msform .steps { font-size: 10px !important; }
  .nannm-mobile-nav { left: 7px; right: 7px; bottom: calc(7px + env(safe-area-inset-bottom)); }
  .nannm-mobile-nav a { font-size: 9px; }
}

@media (display-mode: standalone) {
  .nannm-install-card { display: none !important; }
  body.app { overscroll-behavior-y: contain; }
}

/* Membership application journey */
.nannm-app-stepper {
  display: grid;
  grid-template-columns: repeat(5, minmax(118px, 1fr));
  gap: 8px;
  margin: -4px 0 20px;
  padding: 12px;
  overflow-x: auto;
  border: 1px solid var(--nannm-border);
  border-radius: 16px;
  background: rgba(255,255,255,.82);
  box-shadow: 0 6px 20px rgba(7,95,71,.05);
}
.nannm-step {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 118px;
  padding: 9px;
  border-radius: 12px;
  color: #7a8984;
}
.nannm-step-icon {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #edf3f1;
  color: #7a8984;
  font-size: 13px;
}
.nannm-step-copy { line-height: 1.15; }
.nannm-step-copy small { display: block; font-size: 9px; text-transform: uppercase; letter-spacing: .05em; opacity: .75; }
.nannm-step-copy strong { display: block; margin-top: 2px; font-size: 11px; font-weight: 800; }
.nannm-step.done { color: var(--nannm-primary-dark); }
.nannm-step.done .nannm-step-icon { color: #fff; background: #42a882; }
.nannm-step.current { color: var(--nannm-primary-deep); background: var(--nannm-soft); }
.nannm-step.current .nannm-step-icon { color: #fff; background: var(--nannm-primary); box-shadow: 0 0 0 4px rgba(8,127,91,.10); }
@media (max-width: 767.98px) {
  .nannm-app-stepper { grid-template-columns: repeat(5, 126px); margin-left: -2px; margin-right: -2px; scroll-snap-type: x proximity; }
  .nannm-step { scroll-snap-align: start; }
}

/* No search box is currently implemented in the member header; hide the legacy trigger. */
.search-mobile-trigger { display: none !important; }

/* ==========================================================
   Mobile navigation + application-flow refinement (v2)
   Keeps the existing portal logic intact; visual overrides only.
   ========================================================== */

/* The legacy portal.css paints each side-nav item white. On the dark NANNM
   sidepanel that made the labels effectively disappear. Keep the full menu
   on the clinical-green surface and make labels explicit. */
.app-sidepanel .app-nav,
.app-sidepanel .app-nav-main,
.app-sidepanel .app-menu,
.app-sidepanel .app-nav .nav-item,
.app-sidepanel .app-nav .submenu,
.app-sidepanel .app-nav .submenu-item,
.app-sidepanel .app-nav-footer {
  background: transparent !important;
}
.app-sidepanel .app-nav .nav-item {
  color: rgba(255,255,255,.86) !important;
}
.app-sidepanel .app-nav .nav-link {
  display: flex !important;
  align-items: center;
  min-height: 50px;
  padding: 12px 42px 12px 48px !important;
  border-left: 0 !important;
  color: rgba(255,255,255,.86) !important;
}
.app-sidepanel .app-nav .nav-link-text {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: inherit !important;
  font-size: 14px !important;
  line-height: 1.25;
  font-weight: 650;
  white-space: normal;
}
.app-sidepanel .app-nav .nav-icon {
  top: 50% !important;
  left: 16px !important;
  width: 22px;
  transform: translateY(-50%);
  text-align: center;
}
.app-sidepanel .app-nav .submenu-arrow {
  top: 50% !important;
  right: 14px !important;
  transform: translateY(-50%);
  color: rgba(255,255,255,.64) !important;
}
.app-sidepanel .app-nav .submenu-toggle[aria-expanded="true"] .submenu-arrow {
  color: #fff !important;
}
.app-sidepanel .app-nav .submenu-toggle[aria-expanded="true"] .submenu-arrow svg {
  transform: rotate(180deg) !important;
}
.app-sidepanel .app-nav .submenu {
  margin: 2px 10px 8px !important;
  padding: 5px 0;
  background: rgba(0,0,0,.10) !important;
}
.app-sidepanel .app-nav .submenu-link {
  margin: 0 !important;
  padding: 10px 14px 10px 42px !important;
  border-radius: 10px;
  color: rgba(255,255,255,.76) !important;
  font-size: 13px !important;
}
.app-sidepanel .app-nav .submenu-link::before { display: none !important; }
.app-sidepanel .app-nav .submenu-link:hover,
.app-sidepanel .app-nav .submenu-link.active {
  color: #fff !important;
  background: rgba(255,255,255,.08) !important;
}
.app-sidepanel .app-sidepanel-footer {
  background: rgba(0,0,0,.09) !important;
}

/* Application pages: remove the card-inside-card effect. The page shell is
   transparent and each step gets one clean working surface on larger screens. */
body.nannm-application-page .settings-section {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
body.nannm-application-page .settings-section > [class*="col-"] {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
body.nannm-application-page .settings-section .app-card-settings {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
body.nannm-application-page .settings-section .app-card-settings > .app-card-body,
body.nannm-application-page .settings-section .app-card-settings .container-fluid {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
body.nannm-application-page .row.justify-content-center {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
body.nannm-application-page #heading {
  margin: 0 0 4px;
  color: var(--nannm-primary-deep) !important;
  font-size: clamp(1.3rem, 2.4vw, 1.75rem);
  line-height: 1.2;
  font-weight: 800 !important;
  text-transform: none !important;
}
body.nannm-application-page .row.justify-content-center > p {
  margin-bottom: 14px;
  color: var(--nannm-muted) !important;
  font-size: .98rem;
}
body.nannm-application-page #msform {
  width: 100%;
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}
body.nannm-application-page .form-card {
  width: 100%;
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
  padding: clamp(20px, 3vw, 30px) !important;
  border: 1px solid var(--nannm-border) !important;
  border-radius: 18px !important;
  background: #fff !important;
  box-shadow: 0 7px 22px rgba(7,95,71,.06) !important;
}
body.nannm-application-page #msform .fs-title {
  margin-bottom: 18px !important;
  color: var(--nannm-primary-deep) !important;
  font-size: clamp(1.2rem, 2vw, 1.45rem) !important;
  line-height: 1.25;
  font-weight: 800 !important;
}
body.nannm-application-page #msform .steps {
  margin-bottom: 18px !important;
  color: var(--nannm-primary-dark) !important;
}
body.nannm-application-page #msform .fieldlabels,
body.nannm-application-page #msform label {
  display: block;
  margin: 16px 0 7px !important;
  color: #284b41 !important;
  font-size: .98rem !important;
  line-height: 1.35;
  font-weight: 750 !important;
}
body.nannm-application-page #msform .form-control,
body.nannm-application-page #msform .form-select,
body.nannm-application-page #msform .textarea-control,
body.nannm-application-page #msform select,
body.nannm-application-page #msform textarea,
body.nannm-application-page #msform input[type="text"],
body.nannm-application-page #msform input[type="email"],
body.nannm-application-page #msform input[type="password"],
body.nannm-application-page #msform input[type="date"],
body.nannm-application-page #msform input[type="tel"],
body.nannm-application-page #msform input[type="number"],
body.nannm-application-page #msform input[type="file"] {
  min-height: 54px !important;
  margin-bottom: 4px !important;
  padding: 12px 14px !important;
  border-radius: 12px !important;
  font-size: 16px !important;
  line-height: 1.35;
}
body.nannm-application-page #msform textarea.form-control,
body.nannm-application-page #msform textarea.textarea-control {
  min-height: 132px !important;
  resize: vertical;
}
body.nannm-application-page #msform small {
  display: block;
  margin-top: 5px;
  line-height: 1.35;
}
body.nannm-application-page #msform > .btn,
body.nannm-application-page #msform > input[type="submit"] {
  min-height: 48px;
  padding: 11px 18px !important;
  font-size: .95rem;
}

/* Preview: use roomy information sections rather than nested cards. */
body.nannm-application-preview-page .form-card {
  box-shadow: none !important;
}
body.nannm-application-preview-page #preview-container {
  width: 100%;
  max-width: 940px;
  margin: 18px auto 0;
}
body.nannm-application-preview-page #preview-container .preview-section {
  margin: 0 0 28px !important;
  padding: 0 0 26px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--nannm-border) !important;
  background: transparent !important;
}
body.nannm-application-preview-page #preview-container .preview-section:last-child {
  border-bottom: 0 !important;
}
body.nannm-application-preview-page #preview-container .preview-section h3 {
  margin: 0 0 11px !important;
  color: var(--nannm-primary-deep) !important;
  font-size: 1.25rem !important;
  line-height: 1.25;
  font-weight: 800 !important;
}
body.nannm-application-preview-page #preview-container table {
  width: 100% !important;
  margin: 0 !important;
  table-layout: fixed;
  border-collapse: separate !important;
  border-spacing: 0;
  border: 1px solid var(--nannm-border) !important;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}
body.nannm-application-preview-page #preview-container th,
body.nannm-application-preview-page #preview-container td {
  padding: 11px 12px !important;
  border: 0 !important;
  border-right: 1px solid #e7efec !important;
  border-bottom: 1px solid #e7efec !important;
  color: #28453c;
  font-size: .96rem;
  line-height: 1.4;
  vertical-align: middle;
  overflow-wrap: anywhere;
}
body.nannm-application-preview-page #preview-container tr:last-child > * {
  border-bottom: 0 !important;
}
body.nannm-application-preview-page #preview-container tr > *:last-child {
  border-right: 0 !important;
}
body.nannm-application-preview-page #preview-container td:first-child {
  width: 36%;
  color: #183c32;
  font-weight: 750;
  background: #f7fbf9;
}
body.nannm-application-preview-page #preview-container th {
  background: #f0f8f5 !important;
  color: var(--nannm-primary-deep) !important;
  font-weight: 800;
}
body.nannm-application-preview-page #preview-container img {
  max-width: 88px !important;
  max-height: 88px !important;
  object-fit: cover;
}

@media (max-width: 575.98px) {
  /* Give application content the width of the phone instead of nesting it in
     several padded surfaces. */
  body.nannm-application-page .app-content {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  body.nannm-application-page .container-xl {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  body.nannm-application-page .app-page-title {
    margin-bottom: 12px !important;
  }
  body.nannm-application-page .app-page-title + hr,
  body.nannm-application-page hr.mb-4 {
    display: none;
  }
  body.nannm-application-page .settings-section {
    margin-top: 12px !important;
  }
  body.nannm-application-page .form-card {
    padding: 4px 0 8px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  body.nannm-application-page #heading {
    margin-top: 2px;
    font-size: 1.25rem !important;
  }
  body.nannm-application-page #msform .fs-title {
    font-size: 1.16rem !important;
  }
  body.nannm-application-page #msform .steps {
    padding: 5px 8px;
    font-size: .72rem !important;
  }
  body.nannm-application-page #msform .fieldlabels,
  body.nannm-application-page #msform label {
    margin-top: 17px !important;
    font-size: 1rem !important;
  }
  body.nannm-application-page #msform .form-control,
  body.nannm-application-page #msform .form-select,
  body.nannm-application-page #msform .textarea-control,
  body.nannm-application-page #msform select,
  body.nannm-application-page #msform textarea,
  body.nannm-application-page #msform input[type="text"],
  body.nannm-application-page #msform input[type="email"],
  body.nannm-application-page #msform input[type="password"],
  body.nannm-application-page #msform input[type="date"],
  body.nannm-application-page #msform input[type="tel"],
  body.nannm-application-page #msform input[type="number"],
  body.nannm-application-page #msform input[type="file"] {
    min-height: 56px !important;
    padding: 13px 14px !important;
    font-size: 16px !important;
  }
  body.nannm-application-page #msform > .btn,
  body.nannm-application-page #msform > input[type="submit"] {
    width: 100% !important;
    float: none !important;
    margin: 10px 0 0 !important;
  }

  body.nannm-application-preview-page .form-card {
    padding-top: 0 !important;
  }
  body.nannm-application-preview-page .form-card > .row:first-child h5 {
    margin: 0 0 18px;
    font-size: 1rem !important;
    line-height: 1.45;
  }
  body.nannm-application-preview-page #preview-container .preview-section {
    margin-bottom: 24px !important;
    padding-bottom: 22px !important;
  }
  body.nannm-application-preview-page #preview-container .preview-section h3 {
    font-size: 1.15rem !important;
  }
  body.nannm-application-preview-page #preview-container th,
  body.nannm-application-preview-page #preview-container td {
    padding: 12px 9px !important;
    font-size: 15px !important;
    line-height: 1.42;
  }
  body.nannm-application-preview-page #preview-container td:first-child {
    width: 39%;
  }
  body.nannm-application-preview-page #preview-container img {
    max-width: 78px !important;
    max-height: 78px !important;
  }
}

/* ================================================================
   NANNM v4 — Application surface + mobile header refinement
   UI only. No form, application, query, payment or renewal logic.
   ================================================================ */

/*
 * Application screens currently have an outer app-card-settings shell and an
 * inner form-card. Flatten the OUTER shell whenever it contains the membership
 * form so the member gets one clean card, similar to the Profile page.
 *
 * The body.nannm-application-page selector remains for browsers using app.js;
 * :has(#msform) is a direct markup fallback so the visual fix is not dependent
 * on the page-class JavaScript having run first.
 */
body.nannm-application-page .settings-section .app-card-settings,
.settings-section .app-card-settings:has(#msform) {
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body.nannm-application-page .settings-section .app-card-settings > .app-card-body,
body.nannm-application-page .settings-section .app-card-settings > .app-card-body > .container-fluid,
.settings-section .app-card-settings:has(#msform) > .app-card-body,
.settings-section .app-card-settings:has(#msform) > .app-card-body > .container-fluid {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* The remaining form-card becomes the single application surface. */
body.nannm-application-page #msform .form-card,
.settings-section .app-card-settings:has(#msform) #msform .form-card {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

/* Give the heading/progress area room without putting another card around it. */
body.nannm-application-page .row.justify-content-center,
.settings-section .app-card-settings:has(#msform) .row.justify-content-center {
  width: 100%;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

@media (max-width: 575.98px) {
  /* Mobile header: keep notification, settings and profile as distinct targets. */
  .app-header .container-fluid {
    padding-left: 16px !important;
    padding-right: 12px !important;
  }

  .app-header-content > .row {
    flex-wrap: nowrap !important;
  }

  .app-header .app-utilities {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    margin-left: auto !important;
    padding-left: 0 !important;
    white-space: nowrap;
  }

  .app-header .app-utilities .app-utility-item {
    flex: 0 0 auto;
    margin-right: 0 !important;
  }

  .app-header .app-utilities .app-utility-item > a:not(.dropdown-item) {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 38px;
    min-width: 38px;
    height: 38px;
    padding: 0 !important;
    border-radius: 11px;
  }

  .app-header .app-utilities .app-utility-item .icon {
    width: 23px !important;
    height: 23px !important;
    font-size: 23px !important;
  }

  .app-header .app-notifications-dropdown .icon-badge {
    top: -5px !important;
    right: -5px !important;
    z-index: 2;
  }

  /* The profile target needs a little extra width for Bootstrap's arrow. */
  .app-header .app-user-dropdown > a.dropdown-toggle {
    width: 52px !important;
    min-width: 52px !important;
    justify-content: flex-start !important;
    gap: 4px;
  }

  .app-header .app-user-dropdown img {
    width: 38px !important;
    height: 38px !important;
    flex: 0 0 38px;
  }

  .app-header .app-user-dropdown .dropdown-toggle::after {
    margin-left: 2px !important;
  }

  /* With the outer card gone, use the reclaimed width for the actual form. */
  body.nannm-application-page .settings-section,
  .settings-section:has(#msform) {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  body.nannm-application-page .settings-section > [class*="col-"],
  .settings-section:has(#msform) > [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body.nannm-application-page #msform .form-card,
  .settings-section .app-card-settings:has(#msform) #msform .form-card {
    padding: 18px 16px 20px !important;
    border-radius: 17px !important;
  }

  body.nannm-application-page #heading,
  .settings-section .app-card-settings:has(#msform) #heading {
    margin-top: 0 !important;
  }
}

/* Very narrow phones: preserve separation rather than letting utility icons collide. */
@media (max-width: 374.98px) {
  .app-header .app-utilities { gap: 6px !important; }
  .app-header .app-utilities .app-utility-item > a:not(.dropdown-item) {
    width: 36px;
    min-width: 36px;
    height: 36px;
  }
  .app-header .app-user-dropdown > a.dropdown-toggle {
    width: 48px !important;
    min-width: 48px !important;
  }
  .app-header .app-user-dropdown img {
    width: 36px !important;
    height: 36px !important;
    flex-basis: 36px;
  }
}

/* ================================================================
   NANNM v5 — Direct single-card application layout
   The outer application wrapper is now physically non-card in PHP.
   Keep exactly one form surface, including on mobile.
   ================================================================ */
body.nannm-application-page .nannm-application-shell {
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
body.nannm-application-page .nannm-application-shell > .app-card-body,
body.nannm-application-page .nannm-application-shell > .app-card-body > .container-fluid {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
body.nannm-application-page #msform .form-card {
  width: 100% !important;
  max-width: 100% !important;
  background: #fff !important;
  border: 1px solid var(--nannm-border) !important;
  border-radius: 18px !important;
  box-shadow: 0 8px 24px rgba(7,95,71,.07) !important;
  box-sizing: border-box;
}

@media (max-width: 575.98px) {
  body.nannm-application-page .nannm-application-shell .container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  body.nannm-application-page #msform .form-card {
    padding: 18px 16px 20px !important;
    border: 1px solid var(--nannm-border) !important;
    border-radius: 17px !important;
    background: #fff !important;
    box-shadow: 0 8px 22px rgba(7,95,71,.07) !important;
  }
  body.nannm-application-page #msform {
    margin-top: 14px !important;
  }
}