:root {
  --pn-blue: #1174b6;
  --pn-green: #38b54a;
  --pn-orange: #ff5733;
  --pn-bg: #edf2f9;
  --pn-text: #344050;
  --pn-muted: #748194;
}

html, body { min-height: 100%; }
body {
  min-height: 100vh;
  font-family: Poppins, Arial, sans-serif;
  background:
    radial-gradient(circle at 8% 10%, rgba(17,116,182,.10), transparent 30%),
    radial-gradient(circle at 92% 88%, rgba(56,181,74,.09), transparent 28%),
    var(--pn-bg);
  color: var(--pn-text);
}

.pn-page { min-height: 100vh; position: relative; overflow-x: hidden; }
.pn-page::before,
.pn-page::after {
  content: "";
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.pn-page::before { width: 380px; height: 380px; top: -190px; right: -120px; background: rgba(17,116,182,.08); }
.pn-page::after { width: 320px; height: 320px; bottom: -170px; left: -110px; background: rgba(56,181,74,.07); }
.pn-layer { position: relative; z-index: 1; }

.pn-auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; }
.pn-auth-card,
.pn-card {
  border: 0;
  border-radius: 1rem;
  background: rgba(255,255,255,.985);
  box-shadow: 0 1.5rem 4rem rgba(31,46,69,.12);
  overflow: hidden;
}
.pn-auth-card { width: 100%; max-width: 780px; }
.pn-card { box-shadow: 0 .75rem 2rem rgba(31,46,69,.08); }
.pn-brand-accent { height: 5px; display: grid; grid-template-columns: 1fr 1fr; }
.pn-brand-accent span:first-child { background: var(--pn-blue); }
.pn-brand-accent span:last-child { background: var(--pn-green); }
.pn-auth-body { padding: 2.5rem 3rem 2rem; }
.pn-logo-link { text-decoration: none; }
.pn-logo { width: min(260px, 78vw); height: auto; display: block; margin: 0 auto; }
.pn-auth-logo { margin-bottom: 1.5rem; text-align: center; }

.pn-icon-circle {
  width: 62px; height: 62px; border-radius: 50%; margin: 0 auto 1rem;
  display: flex; align-items: center; justify-content: center;
  background: rgba(17,116,182,.10); color: var(--pn-blue); font-size: 1.45rem;
}
.pn-title { color: var(--pn-text); font-weight: 700; letter-spacing: -.02em; }
.pn-subtitle { color: var(--pn-muted); line-height: 1.7; }
.pn-help-box { background: #f9fafd; border: 1px solid #e6eaf0; border-radius: .75rem; padding: 1rem; }
.pn-divider { display:flex; align-items:center; gap:.8rem; color:#9aa7b8; font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; }
.pn-divider::before,.pn-divider::after { content:""; flex:1; border-top:1px solid #e6eaf0; }

.form-label { font-weight: 600; color: #5e6e82; }
.form-control, .form-select { border-color: #d8e0eb; }
.form-control:focus, .form-select:focus { border-color: rgba(17,116,182,.55); box-shadow: 0 0 0 .2rem rgba(17,116,182,.12); }
.input-group-text { border-color: #d8e0eb; background: #f5f7fa; }
.btn-pn-primary { background: var(--pn-blue); border-color: var(--pn-blue); color: #fff; }
.btn-pn-primary:hover, .btn-pn-primary:focus { background: #0d629b; border-color: #0d629b; color:#fff; }
.btn-pn-green { background: var(--pn-green); border-color: var(--pn-green); color:#fff; }
.btn-pn-green:hover { background:#2f9e3f; border-color:#2f9e3f; color:#fff; }
.pn-link { color: var(--pn-blue); font-weight: 600; text-decoration: none; }
.pn-link:hover { color: #0d629b; text-decoration: underline; }

.pn-footer {
  margin-top:1.5rem;
  padding:1rem 1.5rem;
  border-top:1px solid #edf0f5;
  background:#f9fafd;
  color:#9da9bb;
  font-size:.72rem;
  text-align:center;
}
.pn-footer strong { color:#5e6e82; font-weight:600; }

/* On login-style cards, let the footer background reach the card edges,
   matching the Under Construction page footer. */
.pn-auth-body > .pn-footer { margin:1.5rem -3rem -2rem; }

.pn-topbar {
  position: relative;
  margin: 1.25rem auto 1rem;
  max-width: 1440px;
  padding: .85rem 1.15rem;
  border-radius: .9rem;
  background: rgba(255,255,255,.96);
  box-shadow: 0 .5rem 1.5rem rgba(31,46,69,.07);
  display:flex; align-items:center; justify-content:flex-end; gap:1rem;
  min-height: 68px;
}
.pn-topbar > .pn-logo-link { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); }
.pn-topbar .pn-logo { width: 180px; margin:0; }
.pn-main { max-width: 1440px; margin: 0 auto; padding: 0 1rem 2rem; }
.pn-section-title { font-weight:700; margin-bottom:.25rem; }
.pn-section-copy { color:var(--pn-muted); margin-bottom:0; }
.pn-readonly { background:#f8f9fb; color:#44546a; }

.pn-company-badge { font-size:.72rem; border-radius:999px; padding:.4rem .65rem; background:rgba(17,116,182,.1); color:var(--pn-blue); font-weight:700; }
.pn-status-badge { border-radius:999px; font-size:.72rem; padding:.35rem .6rem; font-weight:700; }
.pn-status-open { background:#e7f5ea; color:#238636; }
.pn-status-locked { background:#f1f3f5; color:#687386; }
.pn-dependent-card { height:100%; border:1px solid #e6eaf0; border-radius:.8rem; background:#fff; padding:1rem; }
.pn-dependent-card h6 { margin-bottom:.75rem; }
.pn-detail-label { font-size:.7rem; color:#8b9bb0; text-transform:uppercase; letter-spacing:.05em; margin-bottom:.15rem; }
.pn-detail-value { color:#425466; font-weight:600; word-break:break-word; }
.pn-legacy { background:#fffaf0; border-color:#ffe4a8; }

.pn-filter-panel { border:1px solid #e6eaf0; background:#f9fafd; border-radius:.8rem; padding:1rem; }
.pn-table-card .card-body { padding: 1rem; }
#adminMembers_wrapper .dataTables_filter { margin-bottom:.75rem; }
#adminMembers_wrapper .dataTables_filter input { margin-left:.5rem; }
#adminMembers { width:100% !important; white-space:nowrap; }
.table thead th { font-size:.73rem; text-transform:uppercase; letter-spacing:.03em; color:#5e6e82; }

.pn-kpi { border:1px solid #e6eaf0; border-radius:.8rem; background:#fff; padding:1rem; height:100%; }
.pn-kpi-label { color:#8b9bb0; font-size:.75rem; text-transform:uppercase; letter-spacing:.05em; }
.pn-kpi-value { font-size:1.55rem; font-weight:700; margin-top:.15rem; }

.pn-date-hint { font-size:.72rem; color:#8b9bb0; margin-top:.35rem; }
.pn-required { color:#e63757; }
.pn-form-section { border:1px solid #e6eaf0; border-radius:.85rem; padding:1.15rem; background:#fff; }
.pn-form-section + .pn-form-section { margin-top:1rem; }
.pn-form-section-title { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1rem; }


/* jQuery Validation */
.pn-validation-error {
  display:block;
  width:100%;
  margin-top:.35rem;
  color:#e63757;
  font-size:.72rem;
  font-weight:500;
}
.form-control.is-invalid, .form-select.is-invalid {
  border-color:#e63757;
  background-image:none;
}
.form-control.is-invalid:focus, .form-select.is-invalid:focus {
  border-color:#e63757;
  box-shadow:0 0 0 .2rem rgba(230,55,87,.10);
}
.input-group.pn-has-validation-error .input-group-text {
  border-color:#e63757;
}

@media (max-width: 767.98px) {
  .pn-auth-body { padding:2rem 1.25rem 1.5rem; }
  .pn-auth-body > .pn-footer { margin:1.5rem -1.25rem -1.5rem; }
  .pn-topbar { margin:.75rem; flex-direction:column; align-items:stretch; justify-content:center; padding-top:1rem; }
  .pn-topbar > .pn-logo-link { position:static; transform:none; align-self:center; margin-bottom:.35rem; }
  .pn-topbar > div { justify-content:center; }
  .pn-main { padding:0 .75rem 1.5rem; }
  .pn-topbar .pn-logo { width:165px; }
  .pn-auth-wrap { align-items:flex-start; padding-top:1rem; }
}

/* ===== August 2026 portal refinements ===== */
.pn-logo-link {
  align-items: center;
  justify-content: center;
}
.pn-brand-lockup {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  line-height: 1;
}
.pn-logo-mark {
  width: 31px;
  height: 31px;
  object-fit: contain;
  flex: 0 0 auto;
}
.pn-logo {
  width: min(205px, 66vw);
  max-height: 52px;
  object-fit: contain;
  margin: 0;
}
.pn-auth-logo .pn-brand-lockup { gap: .6rem; }
.pn-auth-logo .pn-logo-mark { width: 34px; height: 34px; }
.pn-auth-logo .pn-logo { width: min(215px, 64vw); }
.pn-topbar .pn-logo { width: 150px; }
.pn-topbar .pn-logo-mark { width: 27px; height: 27px; }
.pn-admin-login-card { max-width: 620px; }

/* Full-width admin workspace after login. */
.pn-main-admin {
  max-width: none;
  width: 100%;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.pn-topbar-admin {
  max-width: none;
  margin-left: 1.25rem;
  margin-right: 1.25rem;
}

/* Cleaner, faster-scanning DataTable styling. */
.pn-admin-table-wrap {
  width: 100%;
  overflow: auto;
  border: 1px solid #e6eaf0;
  border-radius: .75rem;
  background: #fff;
}
#adminMembers,
#adminMembers_wrapper,
#adminMembers_wrapper input,
#adminMembers_wrapper select,
#adminMembers_wrapper .dataTables_info,
#adminMembers_wrapper .dataTables_length,
#adminMembers_wrapper .pagination {
  font-family: Poppins, Arial, sans-serif !important;
}
#adminMembers {
  white-space: nowrap;
  margin: 0 !important;
  font-size: .78rem;
}
#adminMembers thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #f6f8fb;
  color: #52647a;
  border-bottom: 1px solid #dfe5ed;
  padding: .75rem .65rem;
  font-size: .69rem;
  font-weight: 700;
  letter-spacing: .035em;
  text-transform: uppercase;
  vertical-align: middle;
}
#adminMembers tbody td {
  padding: .62rem .65rem;
  border-color: #edf0f5;
  color: #425466;
  vertical-align: middle;
}
#adminMembers tbody tr:nth-child(even) td { background: #fbfcfe; }
#adminMembers tbody tr:hover td { background: #f2f7fb; }
#adminMembers .pn-status-badge { font-size: .65rem; padding: .28rem .5rem; }
#adminMembers .pn-dep-summary {
  display: inline-block;
  padding: .25rem .5rem;
  border-radius: 999px;
  background: #f1f5f9;
  color: #5e6e82;
  font-size: .68rem;
  font-weight: 600;
}
#adminMembers .pn-view-btn { font-size: .7rem; }
.pn-dt-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1rem;
  padding: .85rem .25rem 0;
  font-size: .75rem;
  color: #748194;
}
#adminMembers_wrapper .dataTables_length,
#adminMembers_wrapper .dataTables_info,
#adminMembers_wrapper .dataTables_paginate { margin: 0; }
#adminMembers_wrapper .dataTables_length select {
  min-width: 72px;
  border-color: #d8e0eb;
  border-radius: .5rem;
  padding: .28rem 1.8rem .28rem .5rem;
  font-size: .72rem;
}
#adminMembers_wrapper .pagination { margin-bottom: 0; }
#adminMembers_wrapper .page-link {
  border-radius: .45rem;
  margin: 0 .1rem;
  font-size: .7rem;
}
.pn-filter-panel .form-control,
.pn-filter-panel .form-select,
.pn-filter-panel .input-group-text {
  font-family: Poppins, Arial, sans-serif;
}
.pn-export-group .btn { min-width: 76px; }
.pn-audit-table { font-family: Poppins, Arial, sans-serif; font-size: .75rem; }
.pn-audit-json { display:block; max-width: 360px; white-space: pre-wrap; overflow-wrap:anywhere; font-size:.68rem; }

@media (max-width: 767.98px) {
  .pn-logo-mark { width: 27px; height: 27px; }
  .pn-logo { width: min(175px, 62vw); }
  .pn-auth-logo .pn-logo-mark { width: 29px; height: 29px; }
  .pn-auth-logo .pn-logo { width: min(185px, 60vw); }
  .pn-topbar .pn-logo { width: 145px; }
  .pn-main-admin { padding-left: .75rem; padding-right: .75rem; }
  .pn-topbar-admin { margin-left: .75rem; margin-right: .75rem; }
  .pn-dt-footer { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   Datepicker - Option C: DOB-friendly month/year selectors
   ============================================================ */
.flatpickr-calendar.pn-datepicker-option-c {
  width: 328px;
  border: 1px solid #d8e2ef;
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(52, 64, 80, .16);
  font-family: Poppins, Arial, sans-serif;
  overflow: hidden;
}
.flatpickr-calendar.pn-datepicker-option-c::before,
.flatpickr-calendar.pn-datepicker-option-c::after {
  display: none;
}
.pn-datepicker-option-c .flatpickr-months {
  min-height: 58px;
  padding: 11px 10px 9px;
  border-bottom: 1px solid #edf0f5;
  background: #fff;
  align-items: center;
}
.pn-datepicker-option-c .flatpickr-months .flatpickr-month {
  height: 36px;
  overflow: visible;
}
.pn-datepicker-option-c .flatpickr-current-month {
  position: absolute;
  top: 0;
  left: 42px;
  right: 42px;
  width: auto;
  height: 36px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: .8rem;
}
.pn-datepicker-option-c .flatpickr-current-month .flatpickr-monthDropdown-months,
.pn-datepicker-option-c .pn-flatpickr-year-select {
  height: 34px;
  margin: 0;
  padding: 0 30px 0 10px;
  border: 1px solid #d8e2ef;
  border-radius: 7px;
  background-color: #fff;
  color: #344050;
  font-family: Poppins, Arial, sans-serif;
  font-size: .76rem;
  font-weight: 600;
  line-height: 34px;
  cursor: pointer;
  outline: none;
  box-shadow: none;
}
.pn-datepicker-option-c .flatpickr-current-month .flatpickr-monthDropdown-months {
  width: 142px;
  appearance: auto;
  -webkit-appearance: menulist;
}
.pn-datepicker-option-c .pn-flatpickr-year-select {
  width: 92px;
  appearance: auto;
  -webkit-appearance: menulist;
}
.pn-datepicker-option-c .flatpickr-current-month .flatpickr-monthDropdown-months:hover,
.pn-datepicker-option-c .flatpickr-current-month .flatpickr-monthDropdown-months:focus,
.pn-datepicker-option-c .pn-flatpickr-year-select:hover,
.pn-datepicker-option-c .pn-flatpickr-year-select:focus {
  border-color: #9ec9e4;
  background: #f9fbfd;
}
.pn-datepicker-option-c .pn-flatpickr-native-year {
  display: none !important;
}
.pn-datepicker-option-c .flatpickr-prev-month,
.pn-datepicker-option-c .flatpickr-next-month {
  top: 10px;
  width: 36px;
  height: 36px;
  padding: 10px;
  border-radius: 7px;
  color: #748194;
  fill: #748194;
}
.pn-datepicker-option-c .flatpickr-prev-month:hover,
.pn-datepicker-option-c .flatpickr-next-month:hover {
  background: #f1f5f9;
  color: #1174b6;
  fill: #1174b6;
}
.pn-datepicker-option-c .flatpickr-innerContainer {
  padding: 8px 10px 10px;
}
.pn-datepicker-option-c .flatpickr-rContainer,
.pn-datepicker-option-c .flatpickr-days,
.pn-datepicker-option-c .dayContainer {
  width: 306px;
  min-width: 306px;
  max-width: 306px;
}
.pn-datepicker-option-c .flatpickr-weekdays {
  height: 30px;
}
.pn-datepicker-option-c span.flatpickr-weekday {
  color: #8a98a8;
  font-size: .64rem;
  font-weight: 700;
}
.pn-datepicker-option-c .flatpickr-day {
  width: 38px;
  max-width: 38px;
  height: 38px;
  line-height: 38px;
  margin: 1px 2.7px;
  border-radius: 7px;
  color: #4c5c6d;
  font-size: .72rem;
  font-weight: 500;
}
.pn-datepicker-option-c .flatpickr-day:hover,
.pn-datepicker-option-c .flatpickr-day:focus {
  border-color: #e7f1f8;
  background: #eef6fb;
  color: #1174b6;
}
.pn-datepicker-option-c .flatpickr-day.today {
  border-color: #1174b6;
  color: #1174b6;
  font-weight: 700;
}
.pn-datepicker-option-c .flatpickr-day.selected,
.pn-datepicker-option-c .flatpickr-day.startRange,
.pn-datepicker-option-c .flatpickr-day.endRange,
.pn-datepicker-option-c .flatpickr-day.selected:hover,
.pn-datepicker-option-c .flatpickr-day.selected:focus {
  border-color: #1174b6;
  background: #1174b6;
  color: #fff;
  font-weight: 700;
}
.pn-datepicker-option-c .flatpickr-day.flatpickr-disabled,
.pn-datepicker-option-c .flatpickr-day.flatpickr-disabled:hover {
  color: #c4ccd6;
  background: transparent;
}

@media (max-width: 420px) {
  .flatpickr-calendar.pn-datepicker-option-c {
    width: 306px;
  }
  .pn-datepicker-option-c .flatpickr-current-month {
    left: 36px;
    right: 36px;
    gap: 5px;
  }
  .pn-datepicker-option-c .flatpickr-current-month .flatpickr-monthDropdown-months {
    width: 126px;
  }
  .pn-datepicker-option-c .pn-flatpickr-year-select {
    width: 82px;
  }
  .pn-datepicker-option-c .flatpickr-rContainer,
  .pn-datepicker-option-c .flatpickr-days,
  .pn-datepicker-option-c .dayContainer {
    width: 284px;
    min-width: 284px;
    max-width: 284px;
  }
  .pn-datepicker-option-c .flatpickr-day {
    width: 36px;
    max-width: 36px;
    height: 36px;
    line-height: 36px;
    margin: 1px 2.28px;
  }
}