/* Flamingo Portal compatibility layer: keeps portal functionality while using the Recruitment Portal UI language. */
.public-portal {
  margin: 0;
  background: var(--warm-white);
  font-family: 'Instrument Sans', 'Outfit', 'Segoe UI', system-ui, sans-serif
}

.public-portal>.alert {
  position: fixed;
  top: 88px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  width: min(760px, calc(100% - 32px));
  box-shadow: var(--shadow-hover)
}

.portal-body .content {
  min-height: calc(100vh - 104px)
}

.portal-body .panel,
.portal-body .login-card,
.portal-body .scanner-card,
.portal-body .scan-result,
.portal-body .rules-card,
.portal-body .station-card,
.portal-body .service-summary,
.portal-body .attendance-card,
.portal-body .executive-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 21px;
  margin-bottom: 20px
}

.portal-body .panel:hover,
.portal-body .station-card:hover {
  box-shadow: var(--shadow-hover)
}

.panel h1,
.panel h2,
.panel h3,
.panel h4,
.scanner-card h3,
.rules-card h3,
.station-card h3 {
  font-family: 'Outfit', sans-serif;
  color: var(--primary)
}

.panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px
}

.panel-head h2,
.panel-head h3 {
  margin: 0
}

.panel-head p {
  margin: 5px 0 0;
  color: var(--muted)
}

.page-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 18px
}

.page-actions .btn {
  margin: 0
}

.btn.primary {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff
}

.btn.secondary {
  background: var(--primary-light);
  border-color: #dce4ed;
  color: var(--primary)
}

.btn.secondary:hover {
  background: var(--primary);
  color: #fff
}

.btn.success {
  background: var(--success);
  color: #fff
}

.btn.warning {
  background: var(--secondary);
  color: #fff
}

.btn.danger {
  background: var(--danger);
  color: #fff
}

.btn.small {
  padding: 7px 10px;
  font-size: 13px
}

.btn.wide {
  width: 100%;
  text-align: center
}

button.link-button {
  border: 0;
  background: transparent;
  font: inherit;
  cursor: pointer
}

.sidebar-signout-form {
  margin: 0
}

.sidebar-signout-form .sidebar-signout {
  border: 0;
  background: transparent;
  font: inherit;
  cursor: pointer;
  width: 100%
}

.tag,
.status-pill,
.role-chip,
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  border-radius: 6px;
  background: var(--primary-light);
  color: var(--primary);
  font-size: 12px;
  font-weight: 700
}

.tag.success,
.status-pill.success,
.badge.success {
  background: #e7f3eb;
  color: var(--success)
}

.tag.blocked,
.badge.off {
  background: #fee4e2;
  color: var(--danger)
}

.tag.warning {
  background: #fff3e2;
  color: var(--secondary)
}

.stat-grid,
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 20px
}

.stat-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 21px;
  box-shadow: var(--shadow);
  border-top: 4px solid var(--primary)
}

.stat-card:nth-child(2) {
  border-top-color: var(--secondary)
}

.stat-card:nth-child(3) {
  border-top-color: var(--accent)
}

.stat-card:nth-child(4) {
  border-top-color: var(--success)
}

.stat-card span {
  display: block;
  color: var(--muted)
}

.stat-card strong {
  display: block;
  font-size: 31px;
  color: var(--primary);
  margin-top: 5px
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px
}

.station-card {
  margin: 0
}

.station-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 15px
}

.station-actions form {
  margin: 0
}

.role-subtabs,
.subtabs,
.tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 10px
}

.role-subtabs a,
.subtabs a,
.tabs a {
  padding: 10px 15px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--primary);
  font-weight: 700;
  background: #fff;
  border: 1px solid var(--border)
}

.role-subtabs a.active,
.subtabs a.active,
.tabs a.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary)
}

.form-stack {
  display: grid;
  gap: 16px
}

.form-stack>label {
  display: grid;
  gap: 7px
}

.form-grid>label {
  display: grid;
  gap: 7px
}

.form-grid .span-2,
.span-2 {
  grid-column: 1/-1
}

.form-stack small,
label small {
  color: var(--muted);
  font-weight: 400
}

.switch-row {
  display: flex !important;
  align-items: flex-start;
  gap: 12px
}

.switch-row input {
  width: auto;
  margin-top: 4px
}

.filters {
  align-items: end
}

.filters label {
  display: grid;
  gap: 7px
}

.filters .btn {
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center
}

.table-wrap {
  max-width: 100%;
  overflow: auto
}

.table-wrap table {
  white-space: normal
}

.table-wrap th {
  position: sticky;
  top: 0;
  z-index: 1
}

.table-wrap tbody tr {
  transition: .15s
}

.table-wrap td .btn {
  white-space: nowrap
}

.table-actions,
.inline-actions {
  display: flex;
  gap: 7px;
  flex-wrap: wrap
}

.table-actions form,
.inline-actions form {
  margin: 0
}

.pagination,
.pager {
  display: flex;
  gap: 6px;
  margin-top: 15px;
  flex-wrap: wrap
}

.pagination a,
.pagination span,
.pager a {
  padding: 8px 11px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 7px;
  text-decoration: none;
  color: var(--primary)
}

.pagination .active,
.pager .active {
  background: var(--primary);
  color: #fff
}

.warning {
  padding: 13px 15px;
  border-radius: 8px;
  margin-bottom: 18px;
  background: #fff6e6;
  color: #7a4b00;
  border-left: 4px solid var(--secondary)
}

.flash {
  padding: 13px 15px;
  border-radius: 8px;
  margin: 0 34px 18px;
  background: #e8f4ec;
  color: #245d3b;
  border-left: 4px solid var(--success)
}

.flash.error {
  background: #fee9e7;
  color: #9d1d14;
  border-left-color: #d74a3a
}

.narrow {
  max-width: 980px
}

.split {
  align-items: start
}

dialog {
  border: 0;
  border-radius: 16px;
  padding: 0;
  box-shadow: 0 25px 80px rgba(0, 0, 0, .3);
  width: min(760px, calc(100% - 28px));
  color: var(--text)
}

dialog::backdrop {
  background: rgba(6, 18, 34, .66)
}

.modal-form,
.confirm-box {
  padding: 24px;
  background: #fff;
  display: grid;
  gap: 16px
}

.modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px
}

.modal-head h3 {
  margin: 0;
  color: var(--primary);
  font-family: 'Outfit', sans-serif
}

.modal-head [data-close] {
  border: 0;
  background: var(--primary-light);
  color: var(--primary);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  font-size: 24px;
  cursor: pointer
}

.confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px
}

.scanner-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
  gap: 20px;
  align-items: start
}

.scanner-controls,
.manual-entry {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px
}

.manual-entry {
  display: grid
}

.scan-result {
  position: sticky;
  top: 20px
}

.qr-box {
  box-shadow: none;
  background: #fff
}

.attendance-code-card {
  background: var(--primary-light);
  border: 1px solid #dce4ed;
  border-radius: 10px;
  padding: 16px;
  text-align: center
}

.attendance-code-card strong {
  font: 800 28px ui-monospace, monospace;
  letter-spacing: 3px;
  color: var(--primary)
}

.profile-card {
  display: flex;
  align-items: center;
  gap: 20px
}

.profile-photo {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid #fff;
  box-shadow: 0 0 0 1px var(--border)
}

.profile-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.login-remember {
  margin-top: -6px
}

.login-remember input {
  width: auto
}

.recruiter-register-link {
  margin-top: 22px;
  text-align: center;
  display: grid;
  gap: 8px
}

.recruiter-register-link p {
  margin: 0
}

.recruiter-register-link small {
  display: block
}

.public-register-link {
  display: inline-flex
}

.scout-register-card {
  max-width: 850px
}

.registration-approval-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--border)
}

.registration-approval-note .step-number {
  width: 32px;
  height: 32px;
  font-size: 13px;
  margin: 0
}

/* Dashboard and portal content keep the recruitment table/card rhythm. */
.dashboard-grid,
.dashboard-sections,
.service-layout,
.notification-layout,
.executive-grid {
  gap: 20px
}

.chart-card,
.summary-card,
.activity-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow)
}

/* SMS Centre embedded page helpers */
.sms-portal-shell {
  display: flex;
  min-height: 100vh
}

.sms-portal-main {
  margin-left: 282px;
  width: calc(100% - 282px);
  padding: 0
}

.sms-portal-main .content {
  padding: 28px 34px
}

.sms-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 10px
}

.sms-tabs a {
  padding: 10px 15px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--primary);
  font-weight: 700;
  background: #fff;
  border: 1px solid var(--border)
}

.sms-tabs a.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary)
}

@media(max-width:1050px), (max-device-width: 1050px) {

  .stat-grid,
  .stats-grid {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media(max-width:760px), (max-device-width: 760px) {

  .stat-grid,
  .stats-grid,
  .scanner-layout {
    grid-template-columns: 1fr
  }

  .flash {
    margin: 0 18px 18px
  }

  .public-register-link {
    display: none
  }

  .profile-card {
    align-items: flex-start
  }

  .sms-portal-main {
    margin: 0;
    width: 100%
  }
}

/* Public landing exact Recruitment UI reset.
   Flamingo Portal's legacy landing declarations load before the Recruitment stylesheet;
   explicitly reset properties not redeclared by the recruitment UI. */
.public-portal .landing {
  width: 100%;
  max-width: none;
  margin: 0;
  overflow-x: hidden;
  background: var(--warm-white)
}

.public-portal .landing-nav {
  width: 100%;
  max-width: none;
  margin: 0;
  box-sizing: border-box;
  min-height: 76px;
  padding: 10px 5vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  background: var(--primary)
}

.public-portal .landing-brand {
  margin: 0;
  min-width: 0;
  flex: 0 1 auto
}

.public-portal .landing-actions {
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex: 0 0 auto
}

.public-portal .landing-actions .btn {
  margin: 0;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap
}

.public-portal .media-hero {
  width: 100%;
  max-width: none;
  margin: 0
}

.public-portal .landing-section,
.public-portal .steps,
.public-portal .landing-footer {
  box-sizing: border-box
}

@media(max-width:760px), (max-device-width: 760px) {
  .public-portal .landing-nav {
    min-height: 70px;
    padding: 8px 16px;
    gap: 10px
  }

  .public-portal .landing-actions {
    margin: 0
  }
}

/* Flamingo Portal: birthday month tabs + separate attendance QR actions */
.qr-action-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 14px 0
}

.birthday-month-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 8px;
  scrollbar-width: thin
}

.birthday-month-tabs a {
  flex: 0 0 auto;
  white-space: nowrap
}

@media(max-width:640px), (max-device-width: 640px) {
  .qr-action-buttons {
    grid-template-columns: 1fr
  }

  .birthday-month-tabs {
    margin-left: -4px;
    margin-right: -4px
  }
}

/* Flamingo Portal checkbox alignment */
.portal-body .consent,
.portal-body .checkbox-field,
.login-page .consent,
.public .consent {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  text-align: left !important;
  line-height: 1.35 !important
}

.portal-body .consent input,
.portal-body .checkbox-field input,
.login-page .consent input,
.public .consent input {
  flex: 0 0 auto !important;
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
  position: static !important;
  transform: none !important
}

.portal-body .permission-toggle {
  align-items: flex-start !important;
  padding: 10px 0
}

.portal-body .permission-toggle input {
  margin-top: 3px !important
}

.portal-body .permission-toggle span {
  display: grid;
  gap: 2px
}

.portal-body .permission-toggle small {
  color: var(--muted);
  font-weight: 400
}

.login-page .login-remember {
  margin-top: 0 !important
}

.portal-body .form-section-title {
  font-weight: 700;
  color: var(--primary);
  padding-top: 6px;
  border-top: 1px solid var(--border);
  margin-top: 2px
}

/* Flamingo operational dashboard + standalone birthdays */
.flamingo-core-stats {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  align-items: stretch
}

.flamingo-core-stats .mini-stat {
  min-height: 92px
}

.flamingo-core-stats .service-leader-stat strong {
  font-size: 18px;
  line-height: 1.2;
  white-space: normal;
  overflow-wrap: anywhere
}

.flamingo-core-stats .service-leader-stat small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-weight: 700
}

.birthday-overview {
  grid-template-columns: repeat(2, minmax(180px, 260px));
  margin-bottom: 18px
}

@media(max-width:640px), (max-device-width: 640px) {
  .birthday-overview {
    grid-template-columns: 1fr
  }

  .flamingo-core-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}


/* Flamingo Portal compact metric system + crews */
.metric-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
  margin: 0 0 20px
}

.metric-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  align-items: flex-start;
  gap: 13px;
  min-height: 112px;
  box-shadow: 0 5px 16px rgba(16, 42, 67, .045);
  position: relative;
  overflow: hidden
}

.metric-card:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--primary)
}

.metric-card:nth-child(3n+2):after {
  background: var(--secondary)
}

.metric-card:nth-child(3n):after {
  background: var(--success)
}

.metric-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  background: var(--primary-light);
  color: var(--primary);
  font: 800 18px 'Outfit', sans-serif
}

.metric-card small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .035em
}

.metric-card strong {
  display: block;
  margin: 4px 0 2px;
  color: var(--primary);
  font: 700 26px 'Outfit', sans-serif;
  line-height: 1.08
}

.metric-card p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35
}

.metric-card .metric-name {
  font-size: 18px;
  white-space: normal;
  overflow-wrap: anywhere
}

.service-metric-cards {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 1080px
}

.service-metric-cards .metric-card {
  min-height: 122px
}

.crew-tabs {
  margin-bottom: 16px
}

.crew-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 15px
}

.crew-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px;
  box-shadow: var(--shadow);
  min-height: 230px
}

.crew-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--border)
}

.crew-card-head h3 {
  margin: 0;
  color: var(--primary);
  font-family: 'Outfit', sans-serif;
  font-size: 20px
}

.crew-card-head p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12px
}

.crew-mark {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--primary);
  color: #fff;
  display: grid;
  place-items: center;
  font: 800 20px 'Outfit', sans-serif
}

.crew-card-metrics {
  display: flex;
  gap: 8px;
  margin: 13px 0
}

.crew-card-metrics span {
  flex: 1;
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 9px;
  color: var(--muted);
  font-size: 11px
}

.crew-card-metrics b {
  display: block;
  color: var(--primary);
  font-size: 17px
}

.crew-member-preview {
  display: grid;
  gap: 7px
}

.crew-member-preview>div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  font-size: 12px
}

.crew-member-preview small {
  color: var(--muted);
  font-size: 11px
}

.crew-more,
.empty-inline {
  color: var(--muted);
  font-size: 12px;
  margin: 3px 0
}

.crew-pill {
  display: inline-flex;
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--primary-light);
  color: var(--primary);
  font-weight: 700
}

.crew-assignment-form {
  display: grid;
  grid-template-columns: minmax(220px, 2fr) minmax(150px, 1fr) minmax(150px, 1fr) auto;
  gap: 12px;
  align-items: end
}

.crew-assignment-form .btn {
  height: 44px
}

.crew-peacock .crew-mark {
  background: #275f8f
}

.crew-cranes .crew-mark {
  background: #b86a24
}

.crew-eagles .crew-mark {
  background: #76532f
}

.crew-falcon .crew-mark {
  background: #4f6579
}

.crew-phoenix .crew-mark {
  background: #9b3e36
}

/* Global crew themed tags and badges matching crew color palette */
.device-crew-tag,
.crew-badge-themed {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 3px 9px !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  background: color-mix(in srgb, var(--crew-c, #64748b) 12%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--crew-c, #64748b) 28%, transparent) !important;
  color: var(--crew-c, #64748b) !important;
  max-width: 170px !important;
  text-decoration: none !important;
  vertical-align: middle !important;
}

.crew-color-pip {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  flex: 0 0 7px !important;
  display: inline-block !important;
}

.crew-tag-name {
  font-weight: 700 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

@media(max-width:850px), (max-device-width: 850px) {
  .service-metric-cards {
    grid-template-columns: 1fr
  }

  .crew-assignment-form {
    grid-template-columns: 1fr 1fr
  }

  .crew-assignment-form .btn {
    grid-column: 1/-1
  }
}

@media(max-width:560px), (max-device-width: 560px) {
  .metric-cards {
    grid-template-columns: 1fr
  }

  .crew-assignment-form {
    grid-template-columns: 1fr
  }
}

/* Flamingo Portal: compact Scouts directory, designed to fit desktop width without sideways scrolling. */
.scouts-filter-grid {
  display: grid !important;
  grid-template-columns: minmax(220px, 1.5fr) repeat(3, minmax(120px, .65fr));
  gap: 9px !important;
  align-items: end !important
}

.scouts-filter-grid label {
  display: grid;
  gap: 5px;
  min-width: 0
}

.scouts-filter-grid label>span {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em
}

.scouts-filter-grid input,
.scouts-filter-grid select {
  min-width: 0;
  padding: 9px 10px;
  font-size: 13px
}

.scouts-filter-grid .filter-buttons {
  display: flex;
  gap: 7px;
  align-items: end
}

.scouts-filter-grid .filter-buttons .btn {
  min-height: 39px;
  padding: 8px 12px;
  white-space: nowrap
}

.scouts-fit-wrap {
  overflow-x: hidden !important;
  width: 100%
}

.scouts-fit-table {
  width: 100% !important;
  min-width: 0 !important;
  table-layout: fixed;
  font-size: 12.5px
}

.scouts-fit-table th,
.scouts-fit-table td {
  padding: 9px 7px !important;
  vertical-align: middle;
  overflow-wrap: anywhere;
  word-break: normal
}

.scouts-fit-table th {
  font-size: 10.5px;
  line-height: 1.2;
  white-space: normal
}

.scouts-fit-table td strong {
  font-size: 12.5px;
  line-height: 1.25
}

.scouts-fit-table td small {
  font-size: 10.5px;
  line-height: 1.25;
  margin-top: 2px
}

.scouts-fit-table .username-note {
  color: var(--muted)
}

.scouts-fit-table .tag {
  font-size: 10.5px;
  padding: 4px 6px;
  white-space: normal
}

.scouts-fit-table .action-tabs {
  gap: 4px;
  flex-wrap: wrap
}

.scouts-fit-table .action-tabs .btn {
  font-size: 10.5px;
  padding: 6px 7px;
  min-width: 0
}

.scouts-fit-table input[type=checkbox] {
  width: 17px;
  height: 17px
}

.scouts-fit-table .c-check {
  width: 3%
}

.scouts-fit-table .c-no {
  width: 4%
}

.scouts-fit-table .c-scout {
  width: 16%
}

.scouts-fit-table .c-role {
  width: 9%
}

.scouts-fit-table .c-reg {
  width: 12%
}

.scouts-fit-table .c-phone {
  width: 10%
}

.scouts-fit-table .c-school {
  width: 22%
}

.scouts-fit-table .c-approval {
  width: 9%
}

.scouts-fit-table .c-account {
  width: 7%
}

.scouts-fit-table .c-actions {
  width: 8%
}

.scouts-fit-readonly .c-no {
  width: 4%
}

.scouts-fit-readonly .c-scout {
  width: 20%
}

.scouts-fit-readonly .c-role {
  width: 10%
}

.scouts-fit-readonly .c-reg {
  width: 14%
}

.scouts-fit-readonly .c-phone {
  width: 11%
}

.scouts-fit-readonly .c-school {
  width: 25%
}

.scouts-fit-readonly .c-approval {
  width: 9%
}

.scouts-fit-readonly .c-account {
  width: 7%
}

.scouts-pagination {
  align-items: center
}

.scouts-pagination a.active {
  background: var(--primary) !important;
  color: #fff !important;
  border-color: var(--primary) !important
}

@media(max-width:1250px), (max-device-width: 1250px) {
  .scouts-filter-grid {
    grid-template-columns: repeat(3, minmax(150px, 1fr))
  }

  .scouts-fit-table {
    font-size: 11.5px
  }

  .scouts-fit-table th,
  .scouts-fit-table td {
    padding: 8px 5px !important
  }

  .scouts-fit-table td strong {
    font-size: 11.5px
  }

  .scouts-fit-table td small {
    font-size: 9.8px
  }

  .scouts-fit-table .action-tabs .btn {
    font-size: 9.8px;
    padding: 5px
  }
}

@media(max-width:820px), (max-device-width: 820px) {
  .scouts-filter-grid {
    grid-template-columns: 1fr 1fr
  }

  .scouts-fit-wrap {
    overflow-x: auto !important
  }

  .scouts-fit-table {
    min-width: 980px !important
  }
}

/* Scout view/edit popups and dense row actions */
.detail-modal {
  width: min(920px, calc(100% - 28px))
}

.scout-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px
}

.scout-detail-grid>div {
  border: 1px solid var(--border);
  background: var(--warm-white);
  border-radius: 9px;
  padding: 10px;
  min-width: 0
}

.scout-detail-grid small {
  display: block;
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 3px
}

.scout-detail-grid strong {
  display: block;
  color: var(--primary);
  font-size: 13px;
  overflow-wrap: anywhere
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px
}

.scout-row-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px !important
}

.scout-row-actions .btn {
  width: 100%;
  justify-content: center
}

.scouts-fit-table .c-actions {
  width: 12%
}

.scouts-fit-table .c-school {
  width: 18%
}

.scouts-fit-table .c-scout {
  width: 15%
}

.scouts-fit-table .c-role {
  width: 8%
}

@media(max-width:760px), (max-device-width: 760px) {
  .scout-detail-grid {
    grid-template-columns: 1fr 1fr
  }
}

@media(max-width:520px), (max-device-width: 520px) {
  .scout-detail-grid {
    grid-template-columns: 1fr
  }
}

/* Flamingo Portal 2026-09-01: one-glance tables across the portal.
   Desktop tables use content-aware column sizing, small type and tight cells so
   the full table is visible without wasted inter-column space. */
@media(min-width:821px) {

  .portal-body .table-wrap,
  .portal-body .compact-table-wrap {
    overflow-x: hidden !important;
    max-width: 100% !important
  }

  .portal-body .table-wrap>table,
  .portal-body table.compact-table,
  .portal-body .scouts-fit-table {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    table-layout: auto !important;
    border-collapse: collapse !important;
    font-size: 11px !important
  }

  .portal-body .table-wrap>table th,
  .portal-body .table-wrap>table td,
  .portal-body table.compact-table th,
  .portal-body table.compact-table td,
  .portal-body .scouts-fit-table th,
  .portal-body .scouts-fit-table td {
    padding: 6px 5px !important;
    line-height: 1.22 !important;
    vertical-align: middle !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important
  }

  .portal-body .table-wrap>table th,
  .portal-body table.compact-table th,
  .portal-body .scouts-fit-table th {
    font-size: 9.8px !important;
    letter-spacing: .015em !important
  }

  .portal-body .table-wrap>table td strong,
  .portal-body .scouts-fit-table td strong {
    font-size: 11px !important;
    line-height: 1.2 !important
  }

  .portal-body .table-wrap>table td small,
  .portal-body .scouts-fit-table td small {
    font-size: 9.3px !important;
    line-height: 1.15 !important;
    margin-top: 1px !important
  }

  .portal-body .table-wrap .btn,
  .portal-body .table-wrap button,
  .portal-body .scouts-fit-table .btn {
    font-size: 9.8px !important;
    padding: 5px 7px !important;
    min-height: 29px !important;
    line-height: 1.05 !important
  }

  .portal-body .table-wrap .action-tabs,
  .portal-body .table-wrap .table-actions,
  .portal-body .table-wrap .inline-actions {
    gap: 3px !important;
    flex-wrap: wrap !important
  }

  .portal-body .table-wrap .tag {
    font-size: 9.4px !important;
    padding: 3px 5px !important;
    white-space: normal !important
  }

  .portal-body .table-wrap input[type=checkbox] {
    width: 15px !important;
    height: 15px !important
  }

  /* Remove the old fixed percentage widths so actual content controls the space. */
  .portal-body .scouts-fit-table .c-check,
  .portal-body .scouts-fit-table .c-no,
  .portal-body .scouts-fit-table .c-scout,
  .portal-body .scouts-fit-table .c-role,
  .portal-body .scouts-fit-table .c-reg,
  .portal-body .scouts-fit-table .c-phone,
  .portal-body .scouts-fit-table .c-school,
  .portal-body .scouts-fit-table .c-approval,
  .portal-body .scouts-fit-table .c-account,
  .portal-body .scouts-fit-table .c-actions {
    width: auto !important
  }

  .portal-body .scouts-fit-table .c-check,
  .portal-body .scouts-fit-table .c-no {
    white-space: nowrap !important
  }

  .portal-body .scouts-fit-table .c-actions {
    max-width: 150px !important
  }
}

@media(max-width:820px), (max-device-width: 820px) {
  .portal-body .table-wrap {
    overflow-x: auto !important
  }

  .portal-body .table-wrap>table {
    font-size: 11px !important
  }
}

/* Flamingo Portal 2026-09-01: content-sized one-glance tables. */
@media(min-width:821px) {

  .portal-body .table-wrap,
  .portal-body .compact-table-wrap,
  .portal-body .scouts-fit-wrap {
    overflow-x: visible !important;
    max-width: 100% !important
  }

  .portal-body .table-wrap>table,
  .portal-body table.compact-table,
  .portal-body .scouts-fit-table {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    table-layout: auto !important;
    margin: 0 !important;
    font-size: 10.6px !important
  }

  .portal-body .table-wrap>table th,
  .portal-body .table-wrap>table td,
  .portal-body table.compact-table th,
  .portal-body table.compact-table td,
  .portal-body .scouts-fit-table th,
  .portal-body .scouts-fit-table td {
    padding: 5px 6px !important;
    line-height: 1.18 !important;
    vertical-align: middle !important
  }

  .portal-body .table-wrap>table th,
  .portal-body table.compact-table th,
  .portal-body .scouts-fit-table th {
    font-size: 9.5px !important;
    white-space: nowrap !important;
    width: 1% !important
  }

  .portal-body .table-wrap>table td,
  .portal-body table.compact-table td,
  .portal-body .scouts-fit-table td {
    white-space: normal !important;
    max-width: 220px !important;
    overflow-wrap: anywhere !important;
    width: auto !important
  }

  .portal-body .table-wrap>table td:has(.tag),
  .portal-body .table-wrap>table td:has(.btn),
  .portal-body .scouts-fit-table td.c-approval,
  .portal-body .scouts-fit-table td.c-actions {
    white-space: nowrap !important;
    width: 1% !important;
    max-width: none !important
  }

  .portal-body .table-wrap .action-tabs,
  .portal-body .table-wrap .table-actions,
  .portal-body .table-wrap .inline-actions,
  .portal-body .scout-row-actions {
    display: flex !important;
    grid-template-columns: none !important;
    flex-wrap: nowrap !important;
    gap: 3px !important;
    align-items: center !important;
    white-space: nowrap !important
  }

  .portal-body .table-wrap .btn,
  .portal-body .table-wrap button,
  .portal-body .scouts-fit-table .btn {
    font-size: 9px !important;
    padding: 4px 6px !important;
    min-height: 25px !important;
    height: auto !important;
    line-height: 1 !important;
    width: auto !important
  }

  .portal-body .scouts-fit-table .c-check,
  .portal-body .scouts-fit-table .c-no,
  .portal-body .scouts-fit-table .c-scout,
  .portal-body .scouts-fit-table .c-role,
  .portal-body .scouts-fit-table .c-reg,
  .portal-body .scouts-fit-table .c-phone,
  .portal-body .scouts-fit-table .c-school,
  .portal-body .scouts-fit-table .c-approval,
  .portal-body .scouts-fit-table .c-actions {
    width: auto !important
  }

  .portal-body .scouts-fit-table .c-school {
    max-width: 260px !important
  }

  .portal-body .scouts-fit-table .c-scout {
    max-width: 190px !important
  }

  .portal-body .scouts-fit-table .c-reg {
    max-width: 150px !important
  }

  .portal-body .scouts-fit-table .c-actions {
    max-width: none !important
  }
}

.hidden-form {
  display: none !important
}

.auto-crew-form {
  display: grid;
  grid-template-columns: minmax(220px, 320px) 1fr;
  gap: 16px;
  align-items: start
}

.auto-crew-form fieldset {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px
}

.auto-crew-form fieldset legend {
  font-weight: 700;
  color: var(--primary);
  padding: 0 5px
}

.auto-crew-form fieldset label {
  display: flex;
  align-items: center;
  gap: 6px
}

.auto-crew-form>p,
.auto-crew-form>.btn {
  grid-column: 1/-1
}

.crew-balance-cards {
  grid-template-columns: repeat(5, minmax(120px, 1fr))
}

.report-kpis,
.renewal-metrics {
  grid-template-columns: repeat(4, minmax(180px, 1fr))
}

.report-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px
}

.report-grid .panel {
  margin: 0
}

.report-bars {
  display: grid;
  gap: 8px
}

.report-bar-row {
  display: grid;
  grid-template-columns: minmax(90px, 160px) 1fr auto;
  gap: 8px;
  align-items: center;
  font-size: 11px
}

.report-bar-row>span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.report-bar-row>div {
  height: 8px;
  background: var(--warm-white);
  border-radius: 999px;
  overflow: hidden
}

.report-bar-row i {
  display: block;
  height: 100%;
  background: var(--primary);
  border-radius: 999px
}

.report-bar-row b {
  font-size: 10px;
  color: var(--muted)
}

.inline-filter {
  display: flex;
  gap: 8px;
  align-items: end;
  flex-wrap: wrap
}

.inline-filter label {
  display: grid;
  gap: 4px
}

.renewal-table td small,
.crew-card td small {
  display: block;
  color: var(--muted);
  margin-top: 2px
}

.compact-settings {
  max-width: 760px
}

@media(max-width:1000px), (max-device-width: 1000px) {

  .report-kpis,
  .renewal-metrics {
    grid-template-columns: repeat(2, minmax(160px, 1fr))
  }

  .crew-balance-cards {
    grid-template-columns: repeat(3, 1fr)
  }
}

@media(max-width:760px), (max-device-width: 760px) {
  .report-grid {
    grid-template-columns: 1fr
  }

  .auto-crew-form {
    grid-template-columns: 1fr
  }

  .crew-balance-cards,
  .report-kpis,
  .renewal-metrics {
    grid-template-columns: 1fr 1fr
  }

  .report-bar-row {
    grid-template-columns: 110px 1fr auto
  }
}

@media(max-width:520px), (max-device-width: 520px) {

  .crew-balance-cards,
  .report-kpis,
  .renewal-metrics {
    grid-template-columns: 1fr
  }
}

/* Flamingo Portal 2026-09-01: true content-proportional tables.
   Do not stretch short columns just to fill the panel. Long text may wrap,
   while compact fields keep only the width they actually need. */
@media (min-width:821px) {

  .portal-body .table-wrap,
  .portal-body .compact-table-wrap,
  .portal-body .scouts-fit-wrap {
    overflow-x: hidden !important;
    overflow-y: visible !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .portal-body .table-wrap>table,
  .portal-body table.compact-table,
  .portal-body .scouts-fit-table {
    display: inline-table !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    table-layout: auto !important;
    border-collapse: collapse !important;
    margin: 0 !important;
  }

  /* Every ordinary column starts at its intrinsic/content width. */
  .portal-body .table-wrap>table th,
  .portal-body .table-wrap>table td,
  .portal-body table.compact-table th,
  .portal-body table.compact-table td,
  .portal-body .scouts-fit-table th,
  .portal-body .scouts-fit-table td {
    width: 1% !important;
    max-width: none !important;
    padding: 5px 7px !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
    line-height: 1.16 !important;
  }

  /* Long secondary content gets a controlled wrapping width instead of
     forcing the whole table wide. */
  .portal-body .table-wrap td small,
  .portal-body .scouts-fit-table td small {
    display: block !important;
    width: max-content !important;
    max-width: 190px !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    line-height: 1.14 !important;
    margin-top: 2px !important;
  }

  .portal-body .table-wrap td strong,
  .portal-body .scouts-fit-table td strong {
    display: block !important;
    width: max-content !important;
    max-width: 190px !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    line-height: 1.16 !important;
  }

  /* Known descriptive columns are allowed to use more room, but only when
     their content actually needs it. */
  .portal-body .scouts-fit-table td:nth-child(3),
  .portal-body .scouts-fit-table td:nth-child(7) {
    width: auto !important;
    max-width: 230px !important;
    white-space: normal !important;
  }

  .portal-body .scouts-fit-table td:nth-child(3) strong,
  .portal-body .scouts-fit-table td:nth-child(3) small {
    max-width: 165px !important
  }

  .portal-body .scouts-fit-table td:nth-child(7) strong,
  .portal-body .scouts-fit-table td:nth-child(7) small {
    max-width: 230px !important
  }

  /* Compact controls/status/action columns must never expand. */
  .portal-body .table-wrap td:has(.tag),
  .portal-body .table-wrap td:has(.btn),
  .portal-body .table-wrap td:has(.action-tabs),
  .portal-body .table-wrap td:has(.table-actions),
  .portal-body .scouts-fit-table td.c-approval,
  .portal-body .scouts-fit-table td.c-actions {
    width: 1% !important;
    max-width: none !important;
    white-space: nowrap !important;
  }

  .portal-body .table-wrap .action-tabs,
  .portal-body .table-wrap .table-actions,
  .portal-body .table-wrap .inline-actions,
  .portal-body .scout-row-actions {
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    gap: 3px !important;
    width: max-content !important;
    white-space: nowrap !important;
  }

  .portal-body .table-wrap .btn,
  .portal-body .table-wrap button,
  .portal-body .scouts-fit-table .btn {
    width: auto !important;
    min-width: 0 !important;
    min-height: 24px !important;
    padding: 4px 6px !important;
    font-size: 9px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  /* Colgroup percentages from older patches must not reserve dead space. */
  .portal-body .scouts-fit-table col {
    width: auto !important
  }
}

/* ================================================================
   Flamingo Portal unified table system — 2026-09-01
   One font/size/row rhythm for every portal table. Columns use their
   intrinsic content width; only genuinely long text columns may wrap.
   ================================================================ */
.portal-body table,
.portal-body table * {
  font-family: 'Instrument Sans', Arial, sans-serif !important;
}

.portal-body .table-wrap,
.portal-body .compact-table-wrap,
.portal-body .scouts-fit-wrap {
  width: 100% !important;
  max-width: 100% !important;
}

@media (min-width:821px) {

  .portal-body .table-wrap,
  .portal-body .compact-table-wrap,
  .portal-body .scouts-fit-wrap {
    overflow-x: hidden !important;
  }

  /* Intrinsic width first: short columns remain short. */
  .portal-body .table-wrap>table,
  .portal-body table.compact-table,
  .portal-body .scouts-fit-table,
  .portal-body .panel table,
  .portal-body .card table {
    display: table !important;
    width: max-content !important;
    min-width: 0 !important;
    max-width: 100% !important;
    table-layout: auto !important;
    border-collapse: collapse !important;
    margin: 0 !important;
  }

  /* One typography scale across ALL table content. */
  .portal-body table th,
  .portal-body table td,
  .portal-body table td strong,
  .portal-body table td small,
  .portal-body table .tag,
  .portal-body table .badge,
  .portal-body table .pill {
    font-size: 12px !important;
    line-height: 1.25 !important;
    font-weight: 400 !important;
  }

  .portal-body table th {
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
  }

  .portal-body table td strong {
    font-weight: 500 !important
  }

  .portal-body table td small {
    display: block !important;
    color: var(--muted) !important;
    margin-top: 2px !important;
  }

  .portal-body table th,
  .portal-body table td {
    padding: 7px 8px !important;
    height: auto !important;
    min-height: 0 !important;
    vertical-align: middle !important;
    width: 1% !important;
    max-width: none !important;
    white-space: nowrap !important;
    overflow: visible !important;
  }

  /* Long human-readable fields may expand/wrap, but do not reserve space
     when their content is short. */
  .portal-body table td strong,
  .portal-body table td small {
    width: auto !important;
    max-width: 230px !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }

  .portal-body .scouts-fit-table .c-scout,
  .portal-body .scouts-fit-table .c-school,
  .portal-body table td[data-col="name"],
  .portal-body table td[data-col="school"],
  .portal-body table td[data-col="course"],
  .portal-body table td[data-col="description"] {
    width: auto !important;
    max-width: 260px !important;
    white-space: normal !important;
  }

  /* Remove every old fixed column reservation. */
  .portal-body .scouts-fit-table col,
  .portal-body .scouts-fit-table .c-check,
  .portal-body .scouts-fit-table .c-no,
  .portal-body .scouts-fit-table .c-scout,
  .portal-body .scouts-fit-table .c-role,
  .portal-body .scouts-fit-table .c-reg,
  .portal-body .scouts-fit-table .c-phone,
  .portal-body .scouts-fit-table .c-school,
  .portal-body .scouts-fit-table .c-approval,
  .portal-body .scouts-fit-table .c-account,
  .portal-body .scouts-fit-table .c-actions {
    width: auto !important;
  }

  /* Status/control cells stay genuinely compact. */
  .portal-body table td:has(input[type="checkbox"]),
  .portal-body table td:has(.tag),
  .portal-body table td:has(.badge),
  .portal-body table td:has(.action-tabs),
  .portal-body table td:has(.table-actions),
  .portal-body table td:has(.scout-row-actions) {
    width: 1% !important;
    white-space: nowrap !important;
    max-width: none !important;
  }

  .portal-body table .action-tabs,
  .portal-body table .table-actions,
  .portal-body table .inline-actions,
  .portal-body table .scout-row-actions {
    display: inline-flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    width: max-content !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .portal-body table .btn,
  .portal-body table button,
  .portal-body table a.btn {
    width: auto !important;
    min-width: 0 !important;
    min-height: 28px !important;
    height: 28px !important;
    padding: 5px 8px !important;
    font-size: 11px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    border-radius: 7px !important;
  }

  .portal-body table input[type="checkbox"] {
    width: 15px !important;
    height: 15px !important;
    margin: 0 !important;
  }
}

/* Phone/tablet: same typography, horizontal scroll only when physically needed. */
@media (max-width:820px),
(max-device-width: 820px) {

  .portal-body .table-wrap,
  .portal-body .compact-table-wrap,
  .portal-body .scouts-fit-wrap {
    overflow-x: auto !important
  }

  .portal-body table,
  .portal-body table th,
  .portal-body table td,
  .portal-body table td strong,
  .portal-body table td small,
  .portal-body table .tag,
  .portal-body table .badge {
    font-size: 12px !important;
    line-height: 1.25 !important;
  }

  .portal-body table th,
  .portal-body table td {
    padding: 7px 8px !important
  }
}

/* ========================================================================
   FINAL TABLE LAYOUT — one proportional, page-filling table system
   ======================================================================== */
.portal-body .table-wrap,
.portal-body .compact-table-wrap,
.portal-body .scouts-fit-wrap {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

.portal-body table,
.portal-body .table-wrap>table,
.portal-body table.compact-table,
.portal-body .scouts-fit-table {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  table-layout: auto !important;
  border-collapse: collapse !important;
  margin: 0 !important;
  font-family: "Instrument Sans", Arial, sans-serif !important;
  font-size: 11.5px !important;
  line-height: 1.22 !important;
}

.portal-body table th,
.portal-body table td,
.portal-body table td strong,
.portal-body table td small,
.portal-body table .tag,
.portal-body table .badge,
.portal-body table .btn,
.portal-body table button,
.portal-body table a.btn {
  font-family: "Instrument Sans", Arial, sans-serif !important;
  font-size: 11.5px !important;
  line-height: 1.22 !important;
}

.portal-body table th,
.portal-body table td {
  width: auto !important;
  max-width: none !important;
  padding: 6px 7px !important;
  height: auto !important;
  min-height: 0 !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

.portal-body table th {
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.portal-body table td strong,
.portal-body table td small {
  display: block !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

.portal-body table td small {
  color: var(--muted) !important
}

/* Long descriptive cells are the ones allowed to consume remaining width. */
.portal-body .scouts-fit-table .c-scout,
.portal-body .scouts-fit-table .c-school,
.portal-body table td[data-col="name"],
.portal-body table td[data-col="school"],
.portal-body table td[data-col="course"],
.portal-body table td[data-col="description"] {
  white-space: normal !important;
  width: auto !important;
}

.portal-body .scouts-fit-table .c-scout {
  max-width: 210px !important
}

.portal-body .scouts-fit-table .c-school {
  max-width: 300px !important
}

/* Compact cells never receive large empty reservations. */
.portal-body table td:has(input[type="checkbox"]),
.portal-body table td:has(.tag),
.portal-body table td:has(.badge),
.portal-body table td:has(.action-tabs),
.portal-body table td:has(.table-actions),
.portal-body table td:has(.scout-row-actions),
.portal-body .scouts-fit-table .c-check,
.portal-body .scouts-fit-table .c-no,
.portal-body .scouts-fit-table .c-role,
.portal-body .scouts-fit-table .c-phone,
.portal-body .scouts-fit-table .c-approval,
.portal-body .scouts-fit-table .c-actions {
  width: 1% !important;
  white-space: nowrap !important;
}

.portal-body .scouts-fit-table col,
.portal-body .scouts-fit-table .c-check,
.portal-body .scouts-fit-table .c-no,
.portal-body .scouts-fit-table .c-scout,
.portal-body .scouts-fit-table .c-role,
.portal-body .scouts-fit-table .c-reg,
.portal-body .scouts-fit-table .c-phone,
.portal-body .scouts-fit-table .c-school,
.portal-body .scouts-fit-table .c-approval,
.portal-body .scouts-fit-table .c-account,
.portal-body .scouts-fit-table .c-actions {
  width: auto !important
}

.portal-body table .action-tabs,
.portal-body table .table-actions,
.portal-body table .inline-actions,
.portal-body table .scout-row-actions {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  flex-wrap: nowrap !important;
  width: auto !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.portal-body table .btn,
.portal-body table button,
.portal-body table a.btn {
  width: auto !important;
  min-width: 0 !important;
  min-height: 27px !important;
  height: 27px !important;
  padding: 4px 7px !important;
  white-space: nowrap !important;
  border-radius: 7px !important;
}

.portal-body table input[type="checkbox"] {
  width: 15px !important;
  height: 15px !important;
  margin: 0 !important
}

@media(max-width:820px), (max-device-width: 820px) {

  .portal-body .table-wrap,
  .portal-body .compact-table-wrap,
  .portal-body .scouts-fit-wrap {
    overflow-x: auto !important
  }

  .portal-body table,
  .portal-body .table-wrap>table,
  .portal-body table.compact-table,
  .portal-body .scouts-fit-table {
    width: max-content !important;
    min-width: 100% !important
  }
}

/* 2026-09-01 typography pass: clean sans-serif portal typography, larger and uniform. */
:root {
  --portal-font-size: 14px;
  --portal-font-family: Arial, "Helvetica Neue", Helvetica, sans-serif
}

html,
body,
.public-portal,
.portal-body,
.portal-shell,
.portal-main,
.portal-sidebar,
.portal-body input,
.portal-body select,
.portal-body textarea,
.portal-body button,
.portal-body .btn,
.portal-body table,
.portal-body table th,
.portal-body table td,
.portal-body table strong,
.portal-body table small,
.portal-body .tag,
.portal-body .badge,
.portal-body .status-pill,
.portal-body .role-chip,
.portal-body .metric-card small,
.portal-body .metric-card p,
.portal-body .crew-card-head p,
.portal-body .crew-card-metrics span,
.portal-body .crew-member-preview>div,
.portal-body .crew-member-preview small,
.portal-body .scouts-filter-grid label>span,
.portal-body .scout-detail-grid small,
.portal-body .scout-detail-grid strong {
  font-family: var(--portal-font-family) !important;
}

.portal-body,
.portal-sidebar {
  font-size: var(--portal-font-size) !important
}

.portal-body p,
.portal-body a,
.portal-body label,
.portal-body input,
.portal-body select,
.portal-body textarea,
.portal-body .btn,
.portal-body button,
.portal-body table,
.portal-body table th,
.portal-body table td,
.portal-body table td strong,
.portal-body table td small,
.portal-body .tag,
.portal-body .badge,
.portal-body .status-pill,
.portal-body .role-chip,
.portal-sidebar,
.portal-sidebar a,
.portal-sidebar span,
.portal-sidebar small {
  font-size: 14px !important;
  line-height: 1.35 !important;
}

.portal-body table th {
  font-weight: 600 !important
}

.portal-body table td strong {
  font-weight: 500 !important
}

.portal-body table td small {
  font-size: 13px !important
}

.portal-body .tag,
.portal-body .badge,
.portal-body .status-pill,
.portal-body .role-chip {
  font-size: 13px !important;
  white-space: nowrap !important
}

.portal-body table .btn,
.portal-body table button,
.portal-body table a.btn {
  font-size: 13px !important;
  min-height: 31px !important;
  height: 31px !important;
  padding: 5px 9px !important
}

.portal-body h1 {
  font-family: var(--portal-font-family) !important;
  font-size: 30px !important
}

.portal-body h2 {
  font-family: var(--portal-font-family) !important;
  font-size: 24px !important
}

.portal-body h3 {
  font-family: var(--portal-font-family) !important;
  font-size: 19px !important
}

.portal-body h4 {
  font-family: var(--portal-font-family) !important;
  font-size: 16px !important
}

.portal-body .metric-card small {
  font-size: 13px !important
}

.portal-body .metric-card p {
  font-size: 13px !important
}

.portal-body .metric-card strong {
  font-family: var(--portal-font-family) !important
}

@media(max-width:1250px), (max-device-width: 1250px) {

  .portal-body table,
  .portal-body table th,
  .portal-body table td,
  .portal-body table td strong {
    font-size: 14px !important
  }

  .portal-body table td small {
    font-size: 13px !important
  }
}

/* ========================================================================
   2026-09-01 — EXACT TYPOGRAPHY + TABLE SYSTEM FROM admin(3).zip
   Source reference: assets/style.css in the user-supplied admin system.
   Instrument Sans = interface/body. Outfit = headings/titles.
   ======================================================================== */


:root {
  --flamingo-ui-font: 'Instrument Sans', 'Outfit', 'Segoe UI', system-ui, sans-serif;
  --flamingo-heading-font: 'Outfit', 'Instrument Sans', 'Segoe UI', system-ui, sans-serif;
  --flamingo-ui-text: #2c2a27;
  --flamingo-ui-muted: #747167;
  --flamingo-ui-border: #e8e4d8;
  --flamingo-ui-primary: #1e3a5f;
  --flamingo-ui-primary-light: #eef2f6;
  --flamingo-ui-success: #287548;
  --flamingo-ui-danger: #b42318;
}

html,
body,
.public-portal,
.portal-body,
.portal-shell,
.portal-main,
.portal-sidebar {
  font-family: var(--flamingo-ui-font) !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  -webkit-font-smoothing: antialiased !important;
  text-rendering: optimizeLegibility;
}

/* Same typography categories as the supplied system. */
.portal-body p,
.portal-body a,
.portal-body label,
.portal-body span,
.portal-body input,
.portal-body select,
.portal-body textarea,
.portal-body button,
.portal-body .btn,
.portal-sidebar,
.portal-sidebar a,
.portal-sidebar span,
.portal-body table,
.portal-body table td,
.portal-body table td strong,
.portal-body table td small {
  font-family: var(--flamingo-ui-font) !important;
}

.portal-body h1,
.portal-body h2,
.portal-body h3,
.portal-body h4,
.portal-body h5,
.portal-body h6,
.portal-body .page-title,
.portal-body .section-title,
.portal-body .card h2,
.portal-body .card h3,
.portal-body .metric-card strong,
.portal-body .panel-title {
  font-family: var(--flamingo-heading-font) !important;
}

.portal-body h1,
.portal-body .page-title {
  font-size: 26px !important;
  line-height: 1.2 !important;
  font-weight: 600 !important
}

.portal-body h2,
.portal-body .card h2,
.portal-body .section-title {
  font-size: 19px !important;
  line-height: 1.3 !important;
  font-weight: 600 !important
}

.portal-body h3,
.portal-body .card h3 {
  font-size: 17px !important;
  line-height: 1.35 !important;
  font-weight: 600 !important
}

.portal-body h4,
.portal-body h5,
.portal-body h6 {
  font-size: 15px !important;
  line-height: 1.45 !important;
  font-weight: 650 !important
}

.portal-body p,
.portal-body label,
.portal-body a,
.portal-body input,
.portal-body select,
.portal-body textarea,
.portal-sidebar,
.portal-sidebar a {
  font-size: 15px !important;
  line-height: 1.55 !important
}

.portal-body small,
.portal-sidebar small,
.portal-body .muted {
  font-size: 13px !important;
  line-height: 1.4 !important;
  color: var(--flamingo-ui-muted) !important
}

/* Exact table geometry from admin(3): full width, natural columns, scroll only if required. */
.portal-body .table-wrap,
.portal-body .compact-table-wrap,
.portal-body .scouts-fit-wrap,
.portal-body .permission-wrap,
.portal-body .data-table-wrap {
  width: 100% !important;
  max-width: 100% !important;
  overflow: auto !important;
  background: #fff !important;
  border: 1px solid var(--flamingo-ui-border) !important;
  border-radius: 14px !important;
}

.portal-body table,
.portal-body .table-wrap>table,
.portal-body table.compact-table,
.portal-body .scouts-fit-table {
  border-collapse: collapse !important;
  width: 100% !important;
  min-width: 760px !important;
  max-width: none !important;
  table-layout: auto !important;
  margin: 0 !important;
  font-family: var(--flamingo-ui-font) !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
}

.portal-body table col,
.portal-body .scouts-fit-table col {
  width: auto !important
}

.portal-body table th,
.portal-body table td {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  text-align: left !important;
  padding: 13px 14px !important;
  border-bottom: 1px solid var(--flamingo-ui-border) !important;
  vertical-align: middle !important;
  height: auto !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  font-family: var(--flamingo-ui-font) !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
}

.portal-body table th {
  background: #f8f7f2 !important;
  color: var(--flamingo-ui-primary) !important;
  font-size: 13px !important;
  font-weight: 750 !important;
  text-transform: uppercase !important;
  letter-spacing: 0 !important;
  border-bottom: 2px solid var(--flamingo-ui-border) !important;
  white-space: nowrap !important;
}

.portal-body table tr:last-child td {
  border-bottom: 0 !important
}

.portal-body table tbody tr:hover td {
  background: rgba(30, 58, 95, .02) !important
}

.portal-body table td strong,
.portal-body table td b {
  display: inline !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  font-weight: 650 !important;
  white-space: normal !important;
}

.portal-body table td small {
  display: inline !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  color: var(--flamingo-ui-muted) !important;
  white-space: normal !important;
}

.portal-body table td br+small {
  display: inline !important
}

/* Do not artificially reserve or collapse table columns. */
.portal-body table td:has(input[type="checkbox"]),
.portal-body table td:has(.tag),
.portal-body table td:has(.badge),
.portal-body table td:has(.action-tabs),
.portal-body table td:has(.table-actions),
.portal-body table td:has(.scout-row-actions),
.portal-body .scouts-fit-table .c-check,
.portal-body .scouts-fit-table .c-no,
.portal-body .scouts-fit-table .c-role,
.portal-body .scouts-fit-table .c-phone,
.portal-body .scouts-fit-table .c-approval,
.portal-body .scouts-fit-table .c-actions {
  width: auto !important;
  white-space: normal !important;
}

/* Badges exactly follow the supplied system's scale. */
.portal-body .badge,
.portal-body .tag,
.portal-body .status-pill,
.portal-body .role-chip,
.portal-body table .badge,
.portal-body table .tag {
  display: inline-block !important;
  padding: 5px 9px !important;
  border-radius: 6px !important;
  font-family: var(--flamingo-ui-font) !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}

/* Buttons use the same visual category and scale as admin(3). */
.portal-body .btn,
.portal-body button {
  font-family: var(--flamingo-ui-font) !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
  font-weight: 650 !important;
  border-radius: 8px !important;
  padding: 10px 16px !important;
  min-height: 0 !important;
  height: auto !important;
}

.portal-body table .btn,
.portal-body table button,
.portal-body table a.btn {
  display: inline-block !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 10px 16px !important;
  border-radius: 8px !important;
  font-family: var(--flamingo-ui-font) !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
  font-weight: 650 !important;
  white-space: nowrap !important;
}

.portal-body table .action-tabs,
.portal-body table .table-actions,
.portal-body table .inline-actions,
.portal-body table .scout-row-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  width: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Inputs/selects from the same design system. */
.portal-body input,
.portal-body select,
.portal-body textarea {
  font: inherit !important;
  font-family: var(--flamingo-ui-font) !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  padding: 11px 13px !important;
  border-radius: 8px !important;
}

@media(max-width:820px), (max-device-width: 820px) {

  .portal-body .table-wrap,
  .portal-body .compact-table-wrap,
  .portal-body .scouts-fit-wrap {
    overflow-x: auto !important
  }

  .portal-body table,
  .portal-body .table-wrap>table,
  .portal-body table.compact-table,
  .portal-body .scouts-fit-table {
    width: 100% !important;
    min-width: 760px !important;
  }
}


/* 2026-09-01 focused readability/layout repair: roles, executive permissions, sessions, sidebar. */
/* Sidebar: requested +1px only. */
.portal-sidebar,
.portal-sidebar a,
.portal-sidebar .side-link,
.portal-sidebar .side-link span,
.portal-sidebar .nav-section,
.portal-sidebar .account-copy b,
.portal-sidebar .theme-copy b {
  font-size: 16px !important;
}

.portal-sidebar small,
.portal-sidebar .account-copy small,
.portal-sidebar .theme-copy small,
.portal-sidebar .sidebar-copyright {
  font-size: 14px !important;
}

/* User Roles: readable 15px text without the excessive vertical gaps. */
body .portal-body .panel .table-wrap table th,
body .portal-body .panel .table-wrap table td {
  vertical-align: middle !important;
}

body .portal-body .role-subtabs,
body .portal-body .role-edit-form,
body .portal-body [id="roleModal"] {
  font-size: 15px !important;
}

body .portal-body .panel .table-wrap table td strong {
  font-size: 15px !important;
  line-height: 1.35 !important;
}

body .portal-body .panel .table-wrap table td small {
  font-size: 13px !important;
  line-height: 1.3 !important;
}

/* Roles list uses a compact row rhythm while preserving the admin(3) typography. */
body .portal-body .role-subtabs+.panel .table-wrap table th,
body .portal-body .role-subtabs+.panel .table-wrap table td {
  padding: 8px 10px !important;
  font-size: 15px !important;
  line-height: 1.35 !important;
}

body .portal-body .role-subtabs+.panel .table-wrap table th {
  font-size: 13px !important;
}

body .portal-body .role-subtabs+.panel .table-wrap table .action-tabs {
  gap: 5px !important;
  flex-wrap: nowrap !important;
}

body .portal-body .role-subtabs+.panel .table-wrap table .action-tabs form {
  margin: 0 !important;
}

body .portal-body .role-subtabs+.panel .table-wrap table .btn,
body .portal-body .role-subtabs+.panel .table-wrap table button,
body .portal-body .role-subtabs+.panel .table-wrap table a.btn {
  padding: 7px 10px !important;
  font-size: 13px !important;
  line-height: 1.15 !important;
  border-radius: 7px !important;
}

body .portal-body .role-subtabs+.panel .table-wrap table .tag {
  padding: 4px 7px !important;
  font-size: 12px !important;
}

/* Executive permission matrix: balanced columns instead of huge random spaces. */
body .portal-body #executiveForm .permission-grid,
body .portal-body .role-edit-form .permission-grid {
  width: 100% !important;
  overflow: auto !important;
  border-radius: 12px !important;
}

body .portal-body #executiveForm .permission-grid table,
body .portal-body .role-edit-form .permission-grid table {
  width: 100% !important;
  min-width: 720px !important;
  table-layout: fixed !important;
  font-size: 15px !important;
}

body .portal-body #executiveForm .permission-grid th,
body .portal-body #executiveForm .permission-grid td,
body .portal-body .role-edit-form .permission-grid th,
body .portal-body .role-edit-form .permission-grid td {
  padding: 8px 10px !important;
  line-height: 1.3 !important;
}

body .portal-body #executiveForm .permission-grid th:first-child,
body .portal-body #executiveForm .permission-grid td:first-child,
body .portal-body .role-edit-form .permission-grid th:first-child,
body .portal-body .role-edit-form .permission-grid td:first-child {
  width: 38% !important;
  text-align: left !important;
}

body .portal-body #executiveForm .permission-grid th:not(:first-child),
body .portal-body #executiveForm .permission-grid td:not(:first-child),
body .portal-body .role-edit-form .permission-grid th:not(:first-child),
body .portal-body .role-edit-form .permission-grid td:not(:first-child) {
  width: 12.4% !important;
  text-align: center !important;
}

body .portal-body #executiveForm .permission-grid td:first-child strong,
body .portal-body .role-edit-form .permission-grid td:first-child strong {
  display: block !important;
  font-size: 15px !important;
  line-height: 1.25 !important;
}

body .portal-body #executiveForm .permission-grid td:first-child small,
body .portal-body .role-edit-form .permission-grid td:first-child small {
  display: block !important;
  margin-top: 2px !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
}

body .portal-body #executiveForm .permission-grid .check-cell,
body .portal-body .role-edit-form .permission-grid .check-cell {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

/* Executive save action belongs to the form; avoid a second oversized-looking footer bar. */
body .portal-body #executiveForm>form.form-stack>.btn.primary {
  width: auto !important;
  min-width: 220px !important;
  align-self: flex-start !important;
  margin-top: 12px !important;
}

/* User Sessions table uses the same readable typography and compact row spacing. */
body .portal-body .compact-table-wrap .compact-table th,
body .portal-body .compact-table-wrap .compact-table td {
  padding: 8px 10px !important;
  font-size: 15px !important;
  line-height: 1.35 !important;
}

body .portal-body .compact-table-wrap .compact-table th {
  font-size: 13px !important;
}

body .portal-body .compact-table-wrap .compact-table .btn,
body .portal-body .compact-table-wrap .compact-table button {
  padding: 7px 10px !important;
  font-size: 13px !important;
}


/* 2026-09-01 dashboard + manage users readability refinement. */
.dashboard-quick-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin: 0 0 16px !important;
}

.dashboard-quick-actions .btn {
  min-height: 42px !important;
  padding: 10px 16px !important;
  border-radius: 10px !important;
  font-family: 'Instrument Sans', Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 650 !important;
}

.dashboard-metric-cards {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin-bottom: 18px !important;
}

.dashboard-metric-cards .metric-card {
  min-height: 118px !important;
  padding: 16px 17px !important;
  gap: 13px !important;
  border-radius: 14px !important;
  border: 1px solid #dde4ea !important;
  box-shadow: 0 4px 14px rgba(18, 42, 67, .045) !important;
  align-items: center !important;
  background: #fff !important;
}

.dashboard-metric-cards .metric-card:after {
  width: 4px !important;
  border-radius: 0 4px 4px 0 !important;
}

.dashboard-metric-cards .metric-icon {
  width: 42px !important;
  height: 42px !important;
  flex: 0 0 42px !important;
  border-radius: 11px !important;
  font-family: 'Outfit', 'Instrument Sans', Arial, sans-serif !important;
  font-size: 18px !important;
  font-weight: 650 !important;
}

.dashboard-metric-cards .metric-card>div {
  min-width: 0 !important
}

.dashboard-metric-cards .metric-card small {
  margin: 0 0 4px !important;
  color: #596b79 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-family: 'Instrument Sans', Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
}

.dashboard-metric-cards .metric-card strong {
  margin: 0 0 3px !important;
  color: #0f355c !important;
  font-family: 'Outfit', 'Instrument Sans', Arial, sans-serif !important;
  font-size: 29px !important;
  font-weight: 600 !important;
  line-height: 1.05 !important;
}

.dashboard-metric-cards .metric-card strong.metric-name {
  font-size: 20px !important;
  line-height: 1.1 !important;
}

.dashboard-metric-cards .metric-card p {
  color: #667783 !important;
  font-family: 'Instrument Sans', Arial, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.32 !important;
}

.dashboard-metric-note {
  font-size: 14px !important;
  line-height: 1.45 !important;
  margin: 0 0 18px !important
}

@media(max-width:1200px), (max-device-width: 1200px) {
  .dashboard-metric-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important
  }
}

@media(max-width:900px), (max-device-width: 900px) {
  .dashboard-metric-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important
  }
}

@media(max-width:560px), (max-device-width: 560px) {
  .dashboard-metric-cards {
    grid-template-columns: 1fr !important
  }
}

/* Manage Users table: no attendance-collection column; larger readable text and balanced auto columns. */
.users-table-wrap {
  overflow-x: auto !important
}

.users-table {
  width: 100% !important;
  min-width: 980px !important;
  table-layout: auto !important;
  font-family: 'Instrument Sans', Arial, sans-serif !important;
}

.users-table th {
  padding: 10px 11px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

.users-table td {
  padding: 10px 11px !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
  vertical-align: middle !important;
}

.users-table td strong {
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important
}

.users-table td small {
  display: block !important;
  font-size: 13.5px !important;
  line-height: 1.25 !important;
  margin-top: 2px !important
}

.users-table .tag {
  font-size: 13px !important;
  white-space: nowrap !important
}

.users-table .action-tabs {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important
}

.users-table .action-tabs form {
  margin: 0 !important
}

.users-table .action-tabs .btn {
  font-size: 13px !important;
  padding: 7px 9px !important;
  line-height: 1.1 !important
}

.users-table th:nth-child(4),
.users-table td:nth-child(4),
.users-table th:nth-child(5),
.users-table td:nth-child(5),
.users-table th:nth-child(6),
.users-table td:nth-child(6),
.users-table th:nth-child(7),
.users-table td:nth-child(7) {
  white-space: nowrap !important;
  width: 1% !important
}

.users-table th:last-child,
.users-table td:last-child {
  white-space: nowrap !important;
  width: 1% !important
}

/* 2026-09-01: dashboard analytics, real SVG icons, crew auto assignment, compact member tables. */
.dashboard-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 14px
}

.dashboard-kpi {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 112px;
  padding: 18px;
  background: #fff;
  border: 1px solid #dfe6ec;
  border-radius: 14px;
  box-shadow: 0 3px 12px rgba(20, 44, 67, .045)
}

.dashboard-kpi-icon,
.dashboard-card-icon,
.mini-icon {
  display: grid;
  place-items: center;
  color: #17446f;
  background: #eef4f8;
  border-radius: 10px;
  flex: none
}

.dashboard-kpi-icon {
  width: 44px;
  height: 44px
}

.dashboard-card-icon {
  width: 38px;
  height: 38px
}

.mini-icon {
  width: 32px;
  height: 32px
}

.dashboard-kpi-icon svg,
.dashboard-card-icon svg,
.mini-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round
}

.dashboard-kpi small {
  display: block;
  color: #5d6e7c;
  font-size: 14px;
  font-weight: 650;
  margin-bottom: 3px
}

.dashboard-kpi strong {
  display: block;
  color: #102f50;
  font-family: 'Outfit', 'Instrument Sans', Arial, sans-serif;
  font-size: 27px;
  line-height: 1.05;
  font-weight: 650
}

.dashboard-kpi p {
  margin: 4px 0 0;
  color: #6b7a86;
  font-size: 13px
}

.dashboard-analytics-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr 1.25fr;
  gap: 14px;
  margin-bottom: 16px
}

.dashboard-analytics-card {
  background: #fff;
  border: 1px solid #dfe6ec;
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 3px 12px rgba(20, 44, 67, .04);
  min-width: 0
}

.dashboard-card-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 16px
}

.dashboard-card-head h3 {
  margin: 0;
  font-size: 17px
}

.dashboard-card-head p {
  margin: 3px 0 0;
  color: #74818b;
  font-size: 13px
}

.renewal-progress {
  height: 10px;
  border-radius: 999px;
  background: #edf1f4;
  overflow: hidden;
  margin: 4px 0 18px
}

.renewal-progress-fill {
  height: 100%;
  border-radius: inherit;
  background: #15915b
}

.dashboard-split-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px
}

.dashboard-split-stats>div {
  padding: 10px;
  border: 1px solid #e6ebef;
  border-radius: 10px;
  background: #fbfcfd
}

.dashboard-split-stats span {
  display: block;
  color: #6a7984;
  font-size: 12px
}

.dashboard-split-stats strong {
  display: block;
  margin-top: 3px;
  color: #173b60;
  font-size: 20px
}

.crew-mini-chart {
  display: grid;
  gap: 10px
}

.crew-mini-row {
  display: grid;
  grid-template-columns: 88px minmax(80px, 1fr) 28px;
  align-items: center;
  gap: 8px;
  font-size: 13px
}

.crew-mini-row>span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.crew-mini-row>div {
  height: 8px;
  border-radius: 999px;
  background: #edf1f4;
  overflow: hidden
}

.crew-mini-row i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #1f8c63
}

.crew-mini-row strong {
  text-align: right;
  color: #183d62
}

.dashboard-mini-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px
}

.dashboard-mini-grid>div {
  position: relative;
  min-height: 98px;
  padding: 11px 11px 10px 48px;
  border: 1px solid #e4e9ed;
  border-radius: 11px;
  background: #fcfdfd
}

.dashboard-mini-grid .mini-icon {
  position: absolute;
  left: 10px;
  top: 10px
}

.dashboard-mini-grid small {
  display: block;
  color: #6c7b87;
  font-size: 12px
}

.dashboard-mini-grid strong {
  display: block;
  color: #14395f;
  font-size: 21px;
  margin-top: 3px
}

.dashboard-mini-grid strong.mini-person {
  font-size: 15px;
  line-height: 1.2
}

.dashboard-mini-grid p {
  margin: 2px 0 0;
  color: #6a7883;
  font-size: 12px
}

.dashboard-recent {
  margin-top: 0
}

.auto-crew-form {
  display: grid;
  grid-template-columns: minmax(260px, 365px) minmax(0, 1fr);
  gap: 16px;
  align-items: start
}

.auto-crew-form>p,
.auto-crew-form>button {
  grid-column: 1/-1
}

.balance-using {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px 16px !important;
  min-height: 74px
}

.balance-using legend {
  padding: 0 6px
}

.balance-using label {
  display: inline-flex !important;
  align-items: center;
  gap: 7px !important;
  margin: 0 !important;
  white-space: nowrap;
  cursor: pointer
}

.balance-using input {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important
}

.balance-check {
  width: 19px;
  height: 19px;
  border: 2px solid #b9c7d2;
  border-radius: 5px;
  background: #fff;
  display: inline-grid;
  place-items: center;
  flex: none
}

.balance-using input:checked+.balance-check {
  border-color: #1877d3;
  background: #1877d3
}

.balance-using input:checked+.balance-check:after {
  content: "";
  width: 8px;
  height: 4px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translateY(-1px)
}

/* Manage Users: give names room; keep role, crew, status and actions narrow. */
.users-table {
  min-width: 0 !important;
  table-layout: auto !important
}

.users-table th,
.users-table td {
  padding: 8px 9px !important
}

.users-table th:first-child,
.users-table td:first-child {
  width: 24% !important
}

.users-table td:first-child strong {
  font-size: 16.5px !important
}

.users-table th:nth-child(5),
.users-table td:nth-child(5),
.users-table th:nth-child(6),
.users-table td:nth-child(6),
.users-table th:nth-child(7),
.users-table td:nth-child(7),
.users-table th:nth-child(8),
.users-table td:nth-child(8) {
  width: 1% !important;
  white-space: nowrap !important
}

.users-table .action-tabs {
  gap: 3px !important
}

.users-table .action-tabs .btn {
  padding: 5px 7px !important;
  font-size: 12px !important;
  border-radius: 7px !important
}

/* Scouts: add a compact Crew column and make row actions much narrower. */
.scouts-fit-table .c-scout {
  width: 25% !important
}

.scouts-fit-table .c-role,
.scouts-fit-table .c-crew,
.scouts-fit-table .c-approval,
.scouts-fit-table .c-actions {
  width: 1% !important
}

.scouts-fit-table th:nth-child(4),
.scouts-fit-table td:nth-child(4),
.scouts-fit-table th:nth-child(5),
.scouts-fit-table td:nth-child(5) {
  white-space: nowrap !important
}

.scouts-fit-table td:nth-child(3) strong {
  font-size: 16px !important
}

.scout-row-actions {
  gap: 2px !important;
  flex-wrap: nowrap !important
}

.scout-row-actions .btn {
  padding: 4px 6px !important;
  min-height: 26px !important;
  font-size: 11px !important;
  border-radius: 6px !important
}

.scouts-actions {
  gap: 6px !important
}

.scouts-actions .btn {
  padding: 7px 10px !important;
  font-size: 13px !important
}

@media(max-width:1180px), (max-device-width: 1180px) {
  .dashboard-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .dashboard-analytics-grid {
    grid-template-columns: 1fr 1fr
  }

  .dashboard-activity-card {
    grid-column: 1/-1
  }
}

@media(max-width:760px), (max-device-width: 760px) {

  .dashboard-kpi-grid,
  .dashboard-analytics-grid {
    grid-template-columns: 1fr
  }

  .dashboard-activity-card {
    grid-column: auto
  }

  .auto-crew-form {
    grid-template-columns: 1fr
  }

  .dashboard-split-stats {
    grid-template-columns: 1fr
  }

  .dashboard-mini-grid {
    grid-template-columns: 1fr
  }

  .users-table {
    min-width: 860px !important
  }
}

/* 2026-09-01: final proportional member tables + attendance cleanup. */
/* Manage Users: wider names, compact role/crew/status/actions, genuinely small action tabs. */
body .portal-body .users-table th:first-child,
body .portal-body .users-table td:first-child {
  width: 30% !important;
  min-width: 240px !important
}

body .portal-body .users-table td:first-child strong {
  font-size: 17px !important;
  line-height: 1.18 !important
}

body .portal-body .users-table td:first-child small {
  font-size: 13px !important;
  line-height: 1.18 !important
}

body .portal-body .users-table th:nth-child(5),
body .portal-body .users-table td:nth-child(5),
body .portal-body .users-table th:nth-child(6),
body .portal-body .users-table td:nth-child(6),
body .portal-body .users-table th:nth-child(7),
body .portal-body .users-table td:nth-child(7),
body .portal-body .users-table th:last-child,
body .portal-body .users-table td:last-child {
  width: 1% !important;
  white-space: nowrap !important
}

body .portal-body .users-table .action-tabs {
  gap: 3px !important;
  justify-content: flex-start !important
}

body .portal-body .users-table .action-tabs .btn,
body .portal-body .users-table .action-tabs button {
  padding: 4px 6px !important;
  min-height: 25px !important;
  font-size: 11px !important;
  line-height: 1 !important;
  border-radius: 6px !important
}

/* Scouts: same proportions and same compact action treatment. */
body .portal-body .scouts-fit-table .c-scout {
  width: 30% !important;
  min-width: 240px !important
}

body .portal-body .scouts-fit-table .c-role,
body .portal-body .scouts-fit-table .c-crew,
body .portal-body .scouts-fit-table .c-approval,
body .portal-body .scouts-fit-table .c-actions {
  width: 1% !important;
  white-space: nowrap !important
}

body .portal-body .scouts-fit-table td:nth-child(3) strong {
  font-size: 17px !important;
  line-height: 1.18 !important
}

body .portal-body .scout-row-actions {
  gap: 2px !important;
  justify-content: flex-start !important
}

body .portal-body .scout-row-actions .btn,
body .portal-body .scout-row-actions button {
  padding: 4px 6px !important;
  min-height: 25px !important;
  font-size: 11px !important;
  line-height: 1 !important;
  border-radius: 6px !important
}

/* Role Simulation: body content uses the same 16px size as the sidebar labels. */
body .portal-body .simulation-panel+.panel .table-wrap table td,
body .portal-body .simulation-panel+.panel .table-wrap table td strong,
body .portal-body .simulation-panel+.panel .table-wrap table td .tag {
  font-size: 16px !important;
  line-height: 1.25 !important
}

body .portal-body .simulation-panel+.panel .table-wrap table td small {
  font-size: 14px !important;
  line-height: 1.2 !important
}

body .portal-body .simulation-panel+.panel .table-wrap table th {
  font-size: 14px !important
}

/* Attendance: no station column, date only in Attendance In, Attendance Out is time only. */
body .portal-body .attendance-records-table {
  width: 100% !important;
  table-layout: auto !important
}

body .portal-body .attendance-records-table th,
body .portal-body .attendance-records-table td {
  padding: 8px 9px !important;
  vertical-align: middle !important
}

body .portal-body .attendance-records-table th:first-child,
body .portal-body .attendance-records-table td:first-child,
body .portal-body .attendance-records-table th:last-child,
body .portal-body .attendance-records-table td:last-child {
  width: 1% !important;
  white-space: nowrap !important
}

body .portal-body #attendanceTable th:nth-child(2),
body .portal-body #attendanceTable td:nth-child(2) {
  width: 17% !important;
  min-width: 170px !important
}

body .portal-body #attendanceTable td:nth-child(2) strong {
  font-size: 16px !important;
  line-height: 1.2 !important
}

body .portal-body #attendanceTable th:nth-child(3),
body .portal-body #attendanceTable td:nth-child(3),
body .portal-body #attendanceTable th:nth-child(5),
body .portal-body #attendanceTable td:nth-child(5),
body .portal-body #attendanceTable th:nth-child(6),
body .portal-body #attendanceTable td:nth-child(6),
body .portal-body #attendanceTable th:nth-child(7),
body .portal-body #attendanceTable td:nth-child(7) {
  white-space: nowrap !important;
  width: 1% !important
}

body .portal-body #attendanceTable .action-tabs {
  gap: 2px !important;
  flex-wrap: nowrap !important
}

body .portal-body #attendanceTable .action-tabs .btn {
  padding: 4px 6px !important;
  min-height: 25px !important;
  font-size: 11px !important;
  border-radius: 6px !important
}


/* 2026-09-01 Leadership + COH */
.leadership-tabs {
  margin-bottom: 14px
}

.leadership-five-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px
}

.leadership-role-card {
  display: flex;
  flex-direction: column;
  min-height: 190px;
  cursor: default
}

.leadership-role-card>strong {
  font-size: 17px;
  line-height: 1.25
}

.leadership-holder {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-height: 48px
}

.leadership-holder b {
  font-size: 15px
}

.leadership-holder small {
  font-size: 13px;
  color: var(--muted, #667085)
}

.empty-holder b {
  color: var(--muted, #667085)
}

.leadership-card-foot {
  margin-top: auto;
  padding-top: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px
}

.leadership-card-foot .btn {
  padding: 5px 10px !important;
  font-size: 13px !important;
  min-height: 30px !important
}

.leadership-coh-table table {
  table-layout: auto !important
}

.leadership-coh-table th:first-child,
.leadership-coh-table td:first-child {
  width: 28%
}

.leadership-coh-table th:nth-child(2),
.leadership-coh-table td:nth-child(2) {
  width: 34%
}

.modal-backdrop[hidden] {
  display: none !important
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .46);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px
}

.leadership-modal {
  width: min(760px, 96vw);
  max-height: 90vh;
  overflow: auto;
  background: var(--panel, #fff);
  border-radius: 18px;
  box-shadow: 0 24px 70px rgba(15, 23, 42, .25);
  padding: 22px
}

.modal-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 16px
}

.modal-close {
  border: 0;
  background: transparent;
  font-size: 30px;
  line-height: 1;
  cursor: pointer
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px
}

.modal-open {
  overflow: hidden
}

@media(max-width:1100px), (max-device-width: 1100px) {
  .leadership-five-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

@media(max-width:650px), (max-device-width: 650px) {
  .leadership-five-grid {
    grid-template-columns: 1fr
  }
}


/* ==========================================================================
   V7 — UNIFORM TABLE SYSTEM
   Applies the approved compact data-grid look to every portal table.
   Body text is +2px larger than the previous compact version.
   ========================================================================== */

:root {
  --portal-table-font-size: 15px;
  --portal-table-header-size: 13px;
  --portal-table-sub-size: 12px;
  --portal-table-cell-x: 8px;
  --portal-table-cell-y: 8px;
}

/* Global table foundation */
table:not(.calendar-table):not(.qr-table),
.table,
.data-table,
.admin-table,
.portal-table,
.users-table,
.scouts-fit-table {
  width: 100% !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  table-layout: auto !important;
  font-family: 'Instrument Sans', Arial, sans-serif !important;
  font-size: var(--portal-table-font-size) !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  color: var(--text, #1f2937) !important;
}

/* Uniform cells */
table:not(.calendar-table):not(.qr-table) th,
table:not(.calendar-table):not(.qr-table) td,
.table th,
.table td,
.data-table th,
.data-table td,
.admin-table th,
.admin-table td,
.portal-table th,
.portal-table td,
.users-table th,
.users-table td,
.scouts-fit-table th,
.scouts-fit-table td {
  padding: var(--portal-table-cell-y) var(--portal-table-cell-x) !important;
  margin: 0 !important;
  vertical-align: middle !important;
  text-align: left !important;
  border: 1px solid rgba(148, 163, 184, .28) !important;
  font-size: var(--portal-table-font-size) !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

/* Headers remain clear, but not oversized/heavy */
table:not(.calendar-table):not(.qr-table) th,
.table th,
.data-table th,
.admin-table th,
.portal-table th,
.users-table th,
.scouts-fit-table th {
  font-size: var(--portal-table-header-size) !important;
  font-weight: 600 !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  background: rgba(248, 250, 252, .92) !important;
}

/* Remove mixed typography inside cells */
table:not(.calendar-table):not(.qr-table) td strong,
table:not(.calendar-table):not(.qr-table) td b,
.table td strong,
.table td b,
.data-table td strong,
.data-table td b,
.admin-table td strong,
.admin-table td b,
.portal-table td strong,
.portal-table td b,
.users-table td strong,
.users-table td b,
.scouts-fit-table td strong,
.scouts-fit-table td b {
  display: inline !important;
  font-size: inherit !important;
  font-weight: 400 !important;
  line-height: inherit !important;
  color: inherit !important;
}

table:not(.calendar-table):not(.qr-table) td small,
table:not(.calendar-table):not(.qr-table) td .muted,
table:not(.calendar-table):not(.qr-table) td .subtext,
.table td small,
.data-table td small,
.admin-table td small,
.portal-table td small,
.users-table td small,
.scouts-fit-table td small {
  display: block !important;
  margin-top: 2px !important;
  font-size: var(--portal-table-sub-size) !important;
  font-weight: 400 !important;
  line-height: 1.15 !important;
  color: var(--muted, #6b7280) !important;
}

/* Alternate row treatment like the supplied reference */
table:not(.calendar-table):not(.qr-table) tbody tr:nth-child(even),
.table tbody tr:nth-child(even),
.data-table tbody tr:nth-child(even),
.admin-table tbody tr:nth-child(even),
.portal-table tbody tr:nth-child(even),
.users-table tbody tr:nth-child(even),
.scouts-fit-table tbody tr:nth-child(even) {
  background: rgba(248, 250, 252, .55) !important;
}

table:not(.calendar-table):not(.qr-table) tbody tr:hover,
.table tbody tr:hover,
.data-table tbody tr:hover,
.admin-table tbody tr:hover,
.portal-table tbody tr:hover,
.users-table tbody tr:hover,
.scouts-fit-table tbody tr:hover {
  background: rgba(254, 243, 199, .45) !important;
}

/* Keep common identifiers tidy */
table:not(.calendar-table):not(.qr-table) td[data-label*="Phone"],
table:not(.calendar-table):not(.qr-table) td[data-label*="Registration"],
table:not(.calendar-table):not(.qr-table) td[data-label*="Username"],
.users-table td:nth-child(2),
.users-table td:nth-child(3),
.scouts-fit-table td:nth-child(6),
.scouts-fit-table td:nth-child(7) {
  white-space: nowrap !important;
}

/* Badges: readable and proportional to the new +2px table text */
table:not(.calendar-table):not(.qr-table) .tag,
table:not(.calendar-table):not(.qr-table) .badge,
table:not(.calendar-table):not(.qr-table) .status,
.table .tag,
.data-table .tag,
.admin-table .tag,
.portal-table .tag,
.users-table .tag,
.scouts-fit-table .tag {
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  padding: 4px 7px !important;
  white-space: nowrap !important;
}

/* Actions remain compact and aligned */
table:not(.calendar-table):not(.qr-table) .action-tabs,
table:not(.calendar-table):not(.qr-table) .scout-row-actions,
.table .action-tabs,
.data-table .action-tabs,
.admin-table .action-tabs,
.portal-table .action-tabs,
.users-table .action-tabs,
.scouts-fit-table .action-tabs,
.scouts-fit-table .scout-row-actions {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 4px !important;
  white-space: nowrap !important;
}

table:not(.calendar-table):not(.qr-table) .btn,
.users-table .btn,
.scouts-fit-table .btn {
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
}

/* Avoid artificial gaps before/after columns */
.table-wrap,
.users-table-wrap,
.scouts-fit-wrap {
  width: 100% !important;
  max-width: 100% !important;
}

.table-wrap table,
.users-table,
.scouts-fit-table {
  margin: 0 !important;
}

/* Tablet */
@media (min-width:701px) and (max-width:1100px) {
  :root {
    --portal-table-font-size: 14px;
    --portal-table-header-size: 12px;
    --portal-table-sub-size: 11px;
    --portal-table-cell-x: 6px;
    --portal-table-cell-y: 7px;
  }
}

/* Phone: retain existing responsive/card systems where present */
@media (max-width:700px),
(max-device-width: 700px) {
  :root {
    --portal-table-font-size: 14px;
    --portal-table-header-size: 12px;
    --portal-table-sub-size: 11px;
  }
}


/* ==========================================================================\n   V8 — ACTIONS ALWAYS ONE LINE\n   ========================================================================== */
.action-tabs,
.scout-row-actions,
.table-actions,
.row-actions,
.actions-wrap,
td .action-tabs,
td .scout-row-actions {
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 5px !important;
  width: max-content !important;
  max-width: none !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
}

.action-tabs form,
.scout-row-actions form,
.table-actions form,
.row-actions form,
.actions-wrap form {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

.action-tabs .btn,
.scout-row-actions .btn,
.table-actions .btn,
.row-actions .btn,
.actions-wrap .btn {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  margin: 0 !important;
}

/* Action cells may grow to the actual controls but must never stack them. */
table:not(.calendar-table):not(.qr-table) th:last-child,
table:not(.calendar-table):not(.qr-table) td:last-child,
.users-table th:last-child,
.users-table td:last-child,
.scouts-fit-table .c-actions {
  white-space: nowrap !important;
  overflow: visible !important;
}

/* If a narrow viewport cannot hold the complete row, scroll the table rather\n   than stacking action buttons vertically. */
.table-wrap,
.users-table-wrap,
.scouts-fit-wrap {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* ========================================================================
   V9 CHAT + SCOUTS PAGE STABILITY
   Page-specific rules intentionally live in the final loaded portal CSS so
   generic table/UI rules cannot break these layouts.
   ======================================================================== */

/* --- Chat: self-contained two-pane application --- */
.portal-body .chat-app {
  display: grid !important;
  grid-template-columns: 320px minmax(0, 1fr) !important;
  width: 100% !important;
  height: calc(100dvh - 190px) !important;
  min-height: 560px !important;
  max-height: calc(100dvh - 190px) !important;
  margin: 0 !important;
  overflow: hidden !important;
  border: 1px solid var(--line, #d9e1ea) !important;
  border-radius: 12px !important;
  background: var(--card, #fff) !important;
}

.portal-body .chat-sidebar {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
  border-right: 1px solid var(--line, #d9e1ea) !important;
  background: var(--card, #fff) !important;
}

.portal-body .chat-sidebar-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 16px !important;
}

.portal-body .chat-sidebar-head h2 {
  margin: 0 !important;
  font-size: 20px !important;
  font-weight: 600 !important
}

.portal-body .chat-sidebar-head p {
  margin: 3px 0 0 !important;
  font-size: 13px !important;
  color: var(--muted) !important
}

.portal-body .chat-online-dot {
  display: block !important;
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background: #1f9d65 !important
}

.portal-body .chat-search {
  display: block !important;
  position: relative !important;
  padding: 0 12px 12px !important
}

.portal-body .chat-search>span {
  position: absolute !important;
  left: 24px !important;
  top: 10px !important;
  z-index: 2 !important;
  color: var(--muted) !important
}

.portal-body .chat-search input {
  display: block !important;
  width: 100% !important;
  height: 40px !important;
  margin: 0 !important;
  padding: 8px 12px 8px 36px !important;
  border: 1px solid var(--line, #d9e1ea) !important;
  border-radius: 8px !important;
  background: var(--card, #fff) !important;
  font-size: 14px !important
}

.portal-body .chat-contact-list {
  display: block !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  padding: 0 8px 12px !important
}

.portal-body .chat-contact {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 10px !important;
  margin: 0 0 2px !important;
  border-radius: 8px !important;
  color: var(--ink, #17324d) !important;
  text-decoration: none !important;
  font-weight: 400 !important;
}

.portal-body .chat-contact:hover,
.portal-body .chat-contact.active {
  background: #edf3f8 !important;
  text-decoration: none !important
}

.portal-body .chat-avatar {
  display: grid !important;
  place-items: center !important;
  flex: 0 0 38px !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background: #e8eef4 !important;
  color: #17324d !important;
  font-size: 14px !important;
  font-weight: 600 !important
}

.portal-body .chat-contact-copy {
  display: block !important;
  min-width: 0 !important;
  flex: 1 1 auto !important
}

.portal-body .chat-contact-copy strong,
.portal-body .chat-contact-copy small {
  display: block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important
}

.portal-body .chat-contact-copy strong {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--ink, #17324d) !important
}

.portal-body .chat-contact-copy small {
  margin-top: 2px !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  color: var(--muted) !important
}

.portal-body .chat-unread {
  display: grid !important;
  place-items: center !important;
  min-width: 20px !important;
  height: 20px !important;
  padding: 0 6px !important;
  border-radius: 999px !important;
  background: #168b60 !important;
  color: #fff !important;
  font-size: 11px !important
}

.portal-body .chat-conversation {
  display: grid !important;
  grid-template-rows: 64px auto minmax(0, 1fr) 64px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
  background: #f5f6f4 !important
}

.portal-body .chat-conversation-head {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
  padding: 10px 16px !important;
  border-bottom: 1px solid var(--line, #d9e1ea) !important;
  background: var(--card, #fff) !important
}

.portal-body .chat-conversation-head h3 {
  margin: 0 !important;
  font-size: 16px !important;
  font-weight: 600 !important
}

.portal-body .chat-conversation-head p {
  margin: 2px 0 0 !important;
  font-size: 12px !important;
  color: var(--muted) !important
}

.portal-body .chat-live-status {
  margin-left: auto !important;
  font-size: 12px !important;
  color: #168b60 !important;
  white-space: nowrap !important
}

.portal-body .chat-live-status.is-error {
  color: #c62828 !important
}

.portal-body .chat-pinned {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 7px 14px !important;
  border-bottom: 1px solid var(--line, #d9e1ea) !important;
  background: #fff !important
}

.portal-body .chat-pinned[hidden] {
  display: none !important
}

.portal-body .chat-pinned button {
  min-width: 0 !important;
  flex: 1 !important;
  border: 0 !important;
  background: transparent !important;
  text-align: left !important
}

.portal-body .chat-pinned strong,
.portal-body .chat-pinned small {
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 12px !important
}

.portal-body .chat-messages {
  display: block !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  padding: 18px 5% !important
}

.portal-body .chat-loading,
.portal-body .chat-empty {
  display: grid !important;
  place-items: center !important;
  align-content: center !important;
  min-height: 100% !important;
  color: var(--muted) !important;
  text-align: center !important
}

.portal-body .chat-message {
  display: flex !important;
  width: 100% !important;
  margin: 4px 0 !important
}

.portal-body .chat-message.own {
  justify-content: flex-end !important
}

.portal-body .chat-bubble {
  max-width: min(74%, 650px) !important;
  padding: 8px 10px !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .10) !important
}

.portal-body .chat-message.own .chat-bubble {
  background: #d9fdd3 !important;
  color: #0f172a !important;
  border: 1px solid rgba(134, 239, 172, .6) !important
}

.portal-body .chat-message.own .chat-bubble p {
  color: #0f172a !important;
  font-weight: 500 !important
}

.portal-body .chat-message.own .chat-bubble footer time {
  color: #355e43 !important
}

.portal-body .chat-bubble p {
  margin: 2px 0 4px !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  font-weight: 400 !important;
  overflow-wrap: anywhere !important
}

.portal-body .chat-sender {
  display: block !important;
  margin-bottom: 3px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #177851 !important
}

.portal-body .chat-bubble footer {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 6px !important;
  color: var(--muted) !important
}

.portal-body .chat-bubble footer time,
.portal-body .chat-bubble footer span,
.portal-body .chat-bubble footer button {
  font-size: 11px !important
}

.portal-body .chat-composer {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  width: 100% !important;
  height: 64px !important;
  padding: 9px 12px !important;
  margin: 0 !important;
  border-top: 1px solid var(--line, #d9e1ea) !important;
  background: var(--card, #fff) !important
}

.portal-body .chat-composer textarea {
  display: block !important;
  flex: 1 1 auto !important;
  width: auto !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  margin: 0 !important;
  padding: 10px 14px !important;
  border: 1px solid var(--line, #cbd5df) !important;
  border-radius: 21px !important;
  background: #f6f8fa !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  resize: none !important
}

.portal-body .chat-send {
  display: grid !important;
  place-items: center !important;
  flex: 0 0 42px !important;
  width: 42px !important;
  height: 42px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: #168b60 !important;
  color: #fff !important;
  font-size: 18px !important
}

/* --- Scouts filters: contained, balanced, never spill outside the panel --- */
.portal-body .scouts-filter-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  width: 100% !important;
  max-width: 100% !important;
  gap: 10px !important;
  align-items: end !important;
  margin: 0 !important;
  padding: 0 !important;
}

.portal-body .scouts-filter-grid .filter-search {
  grid-column: span 2 !important
}

.portal-body .scouts-filter-grid label {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 5px !important;
  min-width: 0 !important;
  width: 100% !important;
  margin: 0 !important
}

.portal-body .scouts-filter-grid label>span {
  display: block !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--muted) !important
}

.portal-body .scouts-filter-grid input,
.portal-body .scouts-filter-grid select {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 40px !important;
  margin: 0 !important;
  padding: 7px 10px !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  box-sizing: border-box !important
}

.portal-body .scouts-filter-grid .filter-buttons {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  min-width: 0 !important;
  margin: 0 !important
}

.portal-body .scouts-filter-grid .filter-buttons .btn {
  height: 40px !important;
  min-height: 40px !important;
  margin: 0 !important;
  padding: 7px 12px !important;
  white-space: nowrap !important
}

.portal-body #scoutBulkForm .bulk-actions {
  display: grid !important;
  grid-template-columns: minmax(220px, 1fr) auto auto !important;
  gap: 8px !important;
  align-items: center !important;
  width: 100% !important;
  margin-top: 12px !important
}

.portal-body #scoutBulkForm .bulk-actions select {
  width: 100% !important;
  min-width: 0 !important;
  height: 40px !important;
  margin: 0 !important
}

@media(max-width:1180px), (max-device-width: 1180px) {
  .portal-body .chat-app {
    grid-template-columns: 280px minmax(0, 1fr) !important
  }

  .portal-body .scouts-filter-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important
  }

  .portal-body .scouts-filter-grid .filter-search {
    grid-column: span 2 !important
  }
}

@media(max-width:820px), (max-device-width: 820px) {
  .portal-body .chat-app {
    display: grid !important;
    grid-template-columns: 1fr !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important
  }

  .portal-body .chat-sidebar {
    height: 300px !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--line, #d9e1ea) !important
  }

  .portal-body .chat-conversation {
    height: calc(100dvh - 145px) !important;
    min-height: 520px !important
  }

  .portal-body .chat-bubble {
    max-width: 88% !important
  }

  .portal-body .scouts-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important
  }

  .portal-body .scouts-filter-grid .filter-search {
    grid-column: 1/-1 !important
  }

  .portal-body #scoutBulkForm .bulk-actions {
    grid-template-columns: 1fr 1fr !important
  }

  .portal-body #scoutBulkForm .bulk-actions select {
    grid-column: 1/-1 !important
  }
}

@media(max-width:520px), (max-device-width: 520px) {
  .portal-body .scouts-filter-grid {
    grid-template-columns: 1fr !important
  }

  .portal-body .scouts-filter-grid .filter-search {
    grid-column: auto !important
  }

  .portal-body .scouts-filter-grid .filter-buttons {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important
  }

  .portal-body #scoutBulkForm .bulk-actions {
    grid-template-columns: 1fr !important
  }

  .portal-body #scoutBulkForm .bulk-actions select {
    grid-column: auto !important
  }
}

/* ========================================================================
   V10 — Scouts containment + Band module
   ======================================================================== */

/* Scouts: keep every control inside the content card. */
.portal-body .content {
  min-width: 0 !important;
  overflow-x: hidden !important
}

.portal-body .scouts-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  max-width: 100% !important
}

.portal-body .scout-summary-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 12px !important;
}

.portal-body .scout-summary-card {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-width: 0 !important;
  padding: 10px 12px !important;
  border: 1px solid var(--line) !important;
  border-radius: 9px !important;
  background: var(--card) !important;
  color: var(--text) !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
}

.portal-body .scout-summary-card span {
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--muted) !important;
  white-space: normal !important
}

.portal-body .scout-summary-card strong {
  font-size: 17px !important;
  font-weight: 500 !important;
  line-height: 1 !important
}

.portal-body .scout-summary-card.active {
  box-shadow: inset 0 -2px 0 var(--brand, #0f3b68) !important;
  outline: 0 !important
}

.portal-body .panel:has(.scouts-filter-grid) {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important
}

.portal-body .panel:has(.scouts-filter-grid) .panel-head {
  min-width: 0 !important
}

.portal-body .panel:has(.scouts-filter-grid) .panel-head>div {
  min-width: 0 !important;
  max-width: 100% !important
}

.portal-body .panel:has(.scouts-filter-grid) .panel-head p {
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  max-width: 100% !important
}

.portal-body .scouts-filter-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 9px !important;
  align-items: end !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.portal-body .scouts-filter-grid .filter-search {
  grid-column: span 2 !important
}

.portal-body .scouts-filter-grid label,
.portal-body .scouts-filter-grid .filter-buttons {
  min-width: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important
}

.portal-body .scouts-filter-grid input,
.portal-body .scouts-filter-grid select {
  min-width: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important
}

.portal-body #scoutBulkForm {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important
}

.portal-body #scoutBulkForm .bulk-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
  max-width: 100% !important
}

.portal-body #scoutBulkForm .bulk-actions select {
  flex: 1 1 260px !important;
  min-width: 180px !important;
  max-width: 100% !important
}

@media(max-width:1400px), (max-device-width: 1400px) {
  .portal-body .scout-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important
  }

  .portal-body .scouts-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important
  }

  .portal-body .scouts-filter-grid .filter-search {
    grid-column: 1/-1 !important
  }
}

@media(max-width:760px), (max-device-width: 760px) {
  .portal-body .scout-summary-grid {
    grid-template-columns: 1fr 1fr !important
  }

  .portal-body .scouts-filter-grid {
    grid-template-columns: 1fr !important
  }

  .portal-body .scouts-filter-grid .filter-search {
    grid-column: auto !important
  }

  .portal-body .scouts-filter-grid .filter-buttons {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important
  }
}

/* Band */
.portal-body .band-tabs {
  margin-bottom: 12px !important
}

.portal-body .band-panel,
.portal-body .band-attendance-panel {
  min-width: 0 !important;
  overflow: hidden !important
}

.portal-body .band-leadership-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px
}

.portal-body .band-leader-card {
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: 10px;
  padding: 15px;
  display: grid;
  gap: 7px;
  min-width: 0
}

.portal-body .band-leader-card>span {
  font-size: 13px;
  color: var(--muted);
  font-weight: 500
}

.portal-body .band-leader-card>strong {
  font-size: 18px;
  font-weight: 500
}

.portal-body .band-leader-card>small {
  font-size: 13px;
  color: var(--muted)
}

.portal-body .band-leader-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
  margin-top: 5px
}

.portal-body .band-leader-form select {
  min-width: 0;
  width: 100%
}

.portal-body .band-add-member {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 8px;
  margin-bottom: 12px
}

.portal-body .band-add-member label {
  display: grid;
  gap: 5px;
  min-width: 0
}

.portal-body .band-add-member select {
  width: 100%;
  min-width: 0
}

.portal-body .band-create-event {
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--card);
  margin-bottom: 12px;
  padding: 0
}

.portal-body .band-create-event summary {
  cursor: pointer;
  padding: 11px 13px;
  font-weight: 500
}

.portal-body .band-event-form {
  padding: 0 13px 13px
}

.portal-body .band-table-wrap {
  max-width: 100%;
  overflow-x: auto !important
}

.portal-body .band-table {
  min-width: 760px
}

.portal-body .band-table .action-tabs {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 4px !important;
  white-space: nowrap !important
}

.portal-body .band-table .action-tabs form {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 4px !important;
  margin: 0 !important
}

@media(max-width:760px), (max-device-width: 760px) {
  .portal-body .band-leadership-grid {
    grid-template-columns: 1fr
  }

  .portal-body .band-leader-form,
  .portal-body .band-add-member {
    grid-template-columns: 1fr
  }
}

.portal-body .scouts-list-panel {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important
}

.portal-body .scouts-list-panel>* {
  max-width: 100% !important;
  box-sizing: border-box !important
}

/* ========================================================================== 
   V11 — Attendance hub + Band recovery
   ========================================================================== */
.attendance-hub-panel {
  overflow: hidden !important
}

.attendance-main-tabs {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
  margin: 0 0 14px !important;
  padding: 0 0 10px !important;
  border-bottom: 1px solid var(--border) !important
}

.attendance-main-tabs a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 38px !important;
  padding: 8px 14px !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: var(--primary) !important;
  text-decoration: none !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1 !important
}

.attendance-main-tabs a.active {
  background: var(--primary) !important;
  color: #fff !important;
  border-color: var(--primary) !important
}

.attendance-secondary-tabs {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  flex-wrap: nowrap !important;
  margin: 0 0 14px !important;
  padding: 4px !important;
  width: max-content !important;
  max-width: 100% !important;
  background: var(--soft, #eef3f8) !important;
  border: 1px solid var(--border) !important;
  border-radius: 9px !important
}

.attendance-secondary-tabs a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 88px !important;
  min-height: 34px !important;
  padding: 7px 13px !important;
  border-radius: 7px !important;
  color: var(--primary) !important;
  text-decoration: none !important;
  font-size: 14px !important;
  font-weight: 500 !important
}

.attendance-secondary-tabs a.active {
  background: #fff !important;
  color: var(--primary) !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .10) !important
}

.attendance-scope-filters {
  display: grid !important;
  grid-template-columns: minmax(180px, 1fr) minmax(240px, 2fr) auto !important;
  gap: 10px !important;
  align-items: end !important;
  margin-bottom: 14px !important
}

.attendance-scope-filters label {
  display: grid !important;
  gap: 5px !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  min-width: 0 !important
}

.attendance-scope-filters select,
.attendance-scope-filters input {
  width: 100% !important;
  min-width: 0 !important
}

.attendance-context {
  display: flex !important;
  align-items: baseline !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  margin: 2px 0 12px !important
}

.attendance-context strong,
.attendance-context span {
  font-weight: 400 !important
}

.band-schema-warning {
  max-width: 760px !important
}

@media(max-width:900px), (max-device-width: 900px) {
  .attendance-scope-filters {
    grid-template-columns: 1fr 1fr !important
  }

  .attendance-scope-filters .btn {
    width: max-content !important
  }
}

@media(max-width:640px), (max-device-width: 640px) {
  .attendance-main-tabs {
    display: grid !important;
    grid-template-columns: 1fr !important
  }

  .attendance-main-tabs a {
    width: 100% !important
  }

  .attendance-secondary-tabs {
    width: 100% !important
  }

  .attendance-secondary-tabs a {
    flex: 1 !important;
    min-width: 0 !important
  }

  .attendance-scope-filters {
    grid-template-columns: 1fr !important
  }

  .attendance-scope-filters .btn {
    width: 100% !important
  }
}


/* ========================================================================== 
   V12 — Leadership cards, SMS Centre and System Logs repair
   ========================================================================== */

/* Executive leadership must render as actual cards, not one long raw column. */
.executive-five-grid,
.leadership-five-grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 14px !important;
  width: 100% !important;
}

.executive-role-card,
.leadership-role-card {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  min-height: 205px !important;
  padding: 18px !important;
  background: var(--panel, #fff) !important;
  border: 1px solid var(--border, #dfe5ec) !important;
  border-radius: 12px !important;
  box-shadow: 0 3px 12px rgba(15, 23, 42, .05) !important;
}

.leadership-role-card>span {
  font-size: 12px !important;
  color: var(--muted, #667085) !important;
  margin-bottom: 6px !important
}

.leadership-role-card>strong {
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important
}

.leadership-holder {
  margin-top: 18px !important;
  display: grid !important;
  gap: 3px !important
}

.leadership-holder b {
  font-size: 14px !important;
  font-weight: 600 !important
}

.leadership-holder small {
  font-size: 12px !important;
  font-weight: 400 !important
}

.leadership-card-foot {
  margin-top: auto !important;
  padding-top: 14px !important;
  border-top: 1px solid var(--border, #e5e7eb) !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 8px !important
}

@media(max-width:1250px), (max-device-width: 1250px) {

  .executive-five-grid,
  .leadership-five-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important
  }
}

@media(max-width:850px), (max-device-width: 850px) {

  .executive-five-grid,
  .leadership-five-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important
  }
}

@media(max-width:560px), (max-device-width: 560px) {

  .executive-five-grid,
  .leadership-five-grid {
    grid-template-columns: 1fr !important
  }
}

/* SMS Centre uses the normal fixed portal sidebar exactly once. */
.portal-body .sms-portal-shell {
  display: flex !important;
  min-height: 100vh !important;
  width: 100% !important
}

.portal-body .sms-portal-main {
  display: block !important;
  margin: 0 0 0 282px !important;
  width: calc(100% - 282px) !important;
  max-width: none !important;
  min-width: 0 !important;
  padding: 0 !important;
}

.portal-body .sms-portal-main>.topbar {
  margin: 0 !important;
  width: 100% !important
}

.portal-body .sms-portal-main>.content {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 26px 30px !important
}

.portal-body .sms-portal-main .hero {
  display: flex !important;
  margin: 0 0 18px !important;
  width: 100% !important
}

.portal-body .sms-portal-main .sms-tabs {
  display: flex !important;
  visibility: visible !important
}

.portal-body .sms-portal-main .card {
  visibility: visible !important
}

@media(max-width:760px), (max-device-width: 760px) {
  .portal-body .sms-portal-main {
    margin: 0 !important;
    width: 100% !important
  }

  .portal-body .sms-portal-main>.content {
    padding: 18px !important
  }
}

/* System Logs — restore the designed audit trail instead of raw text. */
.audit-hero {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px !important;
  padding: 20px 22px !important;
  margin-bottom: 16px !important;
  background: var(--panel, #fff) !important;
  border: 1px solid var(--border, #e1e7ef) !important;
  border-radius: 12px !important
}

.audit-hero h2 {
  margin: 4px 0 5px !important;
  font-size: 21px !important
}

.audit-hero p {
  margin: 0 !important;
  color: var(--muted, #667085) !important
}

.audit-hero-date {
  display: grid !important;
  gap: 2px !important;
  text-align: right !important;
  font-weight: 600 !important
}

.audit-hero-date small {
  font-weight: 400 !important;
  color: var(--muted, #667085) !important
}

.audit-stats {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin-bottom: 16px !important
}

.audit-stats .stat-card {
  padding: 15px 17px !important;
  background: #fff !important;
  border: 1px solid var(--border, #e1e7ef) !important;
  border-radius: 10px !important
}

.audit-stats .stat-card span {
  display: block !important;
  font-size: 12px !important;
  color: var(--muted, #667085) !important
}

.audit-stats .stat-card strong {
  display: block !important;
  margin-top: 4px !important;
  font-size: 22px !important;
  font-weight: 600 !important
}

.audit-panel {
  padding: 18px !important
}

.audit-filters {
  display: grid !important;
  grid-template-columns: 2fr repeat(5, minmax(130px, 1fr)) auto !important;
  gap: 10px !important;
  align-items: end !important;
  margin-bottom: 15px !important
}

.audit-filters label {
  display: grid !important;
  gap: 5px !important;
  font-size: 12px !important;
  color: var(--muted, #667085) !important
}

.audit-filters input,
.audit-filters select {
  width: 100% !important;
  min-width: 0 !important;
  height: 38px !important;
  padding: 0 9px !important;
  border: 1px solid var(--border, #dbe2ea) !important;
  border-radius: 7px !important;
  background: #fff !important
}

.audit-filter-actions {
  display: flex !important;
  gap: 6px !important;
  white-space: nowrap !important
}

.audit-result-bar {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 9px 0 12px !important;
  border-bottom: 1px solid var(--border, #e5e7eb) !important;
  color: var(--muted, #667085) !important
}

.audit-list {
  display: grid !important
}

.audit-entry {
  display: grid !important;
  grid-template-columns: 105px minmax(180px, 1.1fr) minmax(170px, .9fr) minmax(260px, 2fr) minmax(115px, .7fr) !important;
  gap: 14px !important;
  align-items: center !important;
  padding: 13px 4px !important;
  border-bottom: 1px solid var(--border, #e5e7eb) !important
}

.audit-time,
.audit-actor>div,
.audit-action,
.audit-ip {
  display: grid !important;
  gap: 2px !important
}

.audit-time strong,
.audit-actor strong {
  font-size: 13px !important;
  font-weight: 600 !important
}

.audit-time span,
.audit-actor small,
.audit-action small,
.audit-ip small {
  font-size: 11px !important;
  color: var(--muted, #667085) !important
}

.audit-actor {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important
}

.audit-avatar {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center !important;
  background: #eef3f8 !important;
  color: var(--primary, #173f6b) !important;
  font-size: 12px !important;
  font-weight: 600 !important
}

.audit-action-pill {
  display: inline-flex !important;
  width: max-content !important;
  max-width: 100% !important;
  padding: 4px 7px !important;
  border-radius: 999px !important;
  background: #eef3f8 !important;
  font-size: 11px !important;
  font-weight: 500 !important
}

.audit-details {
  min-width: 0 !important
}

.audit-details details summary {
  cursor: pointer !important;
  color: var(--primary, #173f6b) !important
}

.no-details {
  color: var(--muted, #667085) !important;
  font-size: 12px !important
}

.change-list {
  display: grid !important;
  gap: 6px !important;
  margin-top: 8px !important
}

.change-list>div {
  display: flex !important;
  gap: 7px !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  font-size: 12px !important
}

.audit-ip code {
  font-size: 11px !important;
  overflow-wrap: anywhere !important
}

@media(max-width:1200px), (max-device-width: 1200px) {
  .audit-filters {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important
  }

  .audit-filter-actions {
    grid-column: 1/-1 !important
  }

  .audit-entry {
    grid-template-columns: 100px 1fr 1fr !important
  }

  .audit-details {
    grid-column: 2/4 !important
  }

  .audit-ip {
    grid-column: 2/4 !important
  }
}

@media(max-width:700px), (max-device-width: 700px) {
  .audit-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important
  }

  .audit-filters {
    grid-template-columns: 1fr !important
  }

  .audit-entry {
    grid-template-columns: 1fr !important
  }

  .audit-details,
  .audit-ip {
    grid-column: auto !important
  }

  .audit-hero {
    align-items: flex-start !important
  }

  .audit-hero-date {
    display: none !important
  }
}


/* ==========================================================================
   V13 — compact reports, maintenance table and redesigned crew overview
   ========================================================================== */
.reports-toolbar {
  display: flex;
  align-items: end;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 14px
}

.reports-year-form {
  margin: 0
}

.reports-year-form label {
  display: grid;
  gap: 4px
}

.reports-year-form label>span {
  font-size: 12px;
  color: var(--muted)
}

.reports-year-form select {
  width: 112px;
  min-height: 38px;
  padding: 6px 10px
}

.reports-pdf-btn {
  width: auto !important;
  min-width: 0 !important;
  min-height: 38px !important;
  height: 38px !important;
  padding: 8px 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important
}

.report-kpis {
  margin-bottom: 14px !important
}

.report-kpis .metric-card {
  min-height: 86px !important;
  padding: 12px !important
}

.report-kpis .metric-card strong {
  font-size: 22px !important
}

.report-grid {
  gap: 12px !important
}

.report-grid .panel {
  padding: 14px !important
}

.report-grid .panel-head {
  margin-bottom: 10px !important
}

.maintenance-table-wrap {
  margin-top: 12px !important
}

.maintenance-table {
  table-layout: auto !important
}

.maintenance-table th:nth-child(1) {
  width: 22%
}

.maintenance-table th:nth-child(2) {
  width: auto
}

.maintenance-table th:nth-child(3) {
  width: 220px
}

.maintenance-table td {
  vertical-align: middle !important
}

.maintenance-row-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap
}

.maintenance-row-toggle input {
  width: 17px;
  height: 17px
}

.maintenance-row-toggle span {
  font-size: 13px;
  font-weight: 400
}

.maintenance-selection-tools {
  display: flex !important;
  gap: 8px !important;
  margin: 10px 0 !important
}

.maintenance-save-bar {
  position: sticky !important;
  bottom: 0 !important;
  z-index: 5 !important;
  background: rgba(255, 255, 255, .96) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  padding: 10px 12px !important;
  margin-top: 12px !important;
  box-shadow: 0 -4px 16px rgba(16, 42, 67, .06) !important
}

.crew-overview-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px
}

.crew-overview-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  min-width: 0;
  box-shadow: 0 4px 14px rgba(16, 42, 67, .04)
}

.crew-overview-card header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border)
}

.crew-overview-card header h3 {
  margin: 0;
  font-family: 'Instrument Sans', Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--primary)
}

.crew-overview-card header p {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--muted)
}

.crew-overview-card .crew-mark {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 9px;
  font-size: 16px
}

.crew-leadership-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  margin: 10px 0
}

.crew-leadership-strip span {
  padding: 7px 5px;
  border: 1px solid var(--border);
  border-radius: 7px;
  font-size: 10.5px;
  line-height: 1.2;
  color: var(--muted);
  text-align: center
}

.crew-leadership-strip b {
  display: block;
  margin-bottom: 2px;
  font-size: 15px;
  font-weight: 600;
  color: var(--primary)
}

.crew-leaders {
  display: grid;
  gap: 5px
}

.crew-leaders>div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px dashed var(--border);
  font-size: 12px
}

.crew-leaders>div:last-child {
  border-bottom: 0
}

.crew-leaders span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.crew-leaders small,
.crew-leaders p {
  font-size: 10.5px;
  color: var(--muted);
  white-space: nowrap;
  margin: 0
}

.crew-regular-preview {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--muted)
}

.crew-regular-preview strong {
  font-size: 14px;
  color: var(--primary)
}

@media(max-width:1450px), (max-device-width: 1450px) {
  .crew-overview-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }
}

@media(max-width:980px), (max-device-width: 980px) {
  .crew-overview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

@media(max-width:620px), (max-device-width: 620px) {
  .crew-overview-grid {
    grid-template-columns: 1fr
  }

  .reports-toolbar {
    align-items: stretch
  }

  .reports-year-form select,
  .reports-pdf-btn {
    width: 100% !important
  }

  .maintenance-table th:nth-child(3) {
    width: auto
  }
}


/* Password reset */
.login-forgot-row {
  display: flex;
  justify-content: flex-end;
  margin: -2px 0 12px
}

.login-forgot-row a {
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  color: var(--brand, #173f70)
}

.login-forgot-row a:hover {
  text-decoration: underline
}

.forgot-shell {
  max-width: 720px !important;
  grid-template-columns: 1fr !important
}

.forgot-panel {
  min-height: 520px !important;
  border-radius: 18px !important
}

.forgot-panel .login-form-wrap {
  max-width: 480px !important;
  margin: auto !important
}

.forgot-resend {
  margin-top: 10px
}


/* ==========================================================================
   V15 — Password recovery page
   ========================================================================== */
.forgot-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  background:
    radial-gradient(circle at 12% 10%, rgba(23, 63, 112, .08), transparent 30%),
    linear-gradient(135deg, #f5f7fa 0%, #fffaf1 100%);
}

.forgot-card {
  width: min(1080px, 100%);
  min-height: 650px;
  display: grid;
  grid-template-columns: minmax(340px, .9fr) minmax(420px, 1.1fr);
  overflow: hidden;
  border: 1px solid #dde5ef;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(15, 35, 60, .12);
}

.forgot-brand {
  position: relative;
  display: flex;
  align-items: center;
  padding: 54px 48px;
  color: #fff;
  background: linear-gradient(155deg, #0f315d 0%, #173f70 55%, #255789 100%);
}

.forgot-brand:after {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  right: -100px;
  bottom: -100px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .06);
}

.forgot-brand-inner {
  position: relative;
  z-index: 1;
  width: 100%
}

.forgot-logo {
  width: 92px;
  height: 92px;
  object-fit: contain;
  margin-bottom: 24px
}

.forgot-eyebrow,
.forgot-kicker {
  margin: 0 0 10px;
  color: #e97900;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.forgot-brand .forgot-eyebrow {
  color: #ffd29b
}

.forgot-brand h1 {
  margin: 0 0 14px;
  font-size: 34px;
  line-height: 1.1;
  color: #fff
}

.forgot-brand>div>p:not(.forgot-eyebrow) {
  max-width: 410px;
  margin: 0;
  color: rgba(255, 255, 255, .8);
  font-size: 15px;
  line-height: 1.55
}

.forgot-steps {
  display: grid;
  gap: 20px;
  margin-top: 48px
}

.forgot-step {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 13px;
  align-items: center;
  opacity: .58
}

.forgot-step>span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
}

.forgot-step strong {
  display: block;
  color: #fff;
  font-size: 14px
}

.forgot-step small {
  display: block;
  margin-top: 3px;
  color: rgba(255, 255, 255, .65);
  font-size: 12px;
  line-height: 1.3
}

.forgot-step.active,
.forgot-step.done {
  opacity: 1
}

.forgot-step.active>span {
  background: #fff;
  color: #173f70;
  border-color: #fff
}

.forgot-step.done>span {
  background: #e97900;
  border-color: #e97900
}

.forgot-form-panel {
  display: flex;
  align-items: center;
  padding: 58px 64px;
  background: #fff
}

.forgot-form-inner {
  width: 100%;
  max-width: 510px;
  margin: auto
}

.forgot-back {
  display: inline-flex;
  margin-bottom: 44px;
  color: #173f70;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600
}

.forgot-back:hover {
  text-decoration: underline
}

.forgot-form-panel h2 {
  margin: 0;
  color: #15375f;
  font-size: 34px;
  line-height: 1.12
}

.forgot-copy {
  margin: 14px 0 30px;
  color: #68778a;
  font-size: 15px;
  line-height: 1.6
}

.forgot-form {
  display: grid;
  gap: 18px
}

.forgot-form .field {
  margin: 0
}

.forgot-form .field label {
  display: block;
  margin-bottom: 8px;
  color: #27364a;
  font-size: 14px;
  font-weight: 600
}

.forgot-form input {
  width: 100%;
  height: 50px;
  box-sizing: border-box;
  border: 1px solid #d6dee8;
  border-radius: 10px;
  padding: 0 14px;
  background: #fff;
  color: #172b45;
  font-size: 15px;
  outline: none;
}

.forgot-form input:focus {
  border-color: #2d6199;
  box-shadow: 0 0 0 3px rgba(45, 97, 153, .1)
}

.forgot-primary {
  width: 100%;
  min-height: 50px;
  border-radius: 10px !important;
  background: #173f70 !important;
  border-color: #173f70 !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 650 !important;
}

.forgot-primary:hover {
  background: #102f57 !important
}

.forgot-code-input {
  text-align: center !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  letter-spacing: .42em !important;
  padding-left: calc(14px + .42em) !important;
}

.forgot-resend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-top: 20px;
  color: #68778a;
  font-size: 13px;
}

.forgot-link-button {
  padding: 0;
  border: 0;
  background: transparent;
  color: #173f70;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
}

.forgot-help {
  margin-top: 34px;
  padding-top: 20px;
  border-top: 1px solid #edf1f5;
  color: #8491a1;
  font-size: 12px;
  line-height: 1.5;
}

.forgot-form .password-field {
  position: relative
}

.forgot-form .password-field input {
  padding-right: 70px
}

.forgot-form .password-field button {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  color: #173f70;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer
}

@media(max-width:820px), (max-device-width: 820px) {
  .forgot-page {
    align-items: flex-start;
    padding: 16px
  }

  .forgot-card {
    display: block;
    min-height: 0;
    border-radius: 18px
  }

  .forgot-brand {
    padding: 26px 24px
  }

  .forgot-logo {
    width: 62px;
    height: 62px;
    margin-bottom: 12px
  }

  .forgot-brand h1 {
    font-size: 25px
  }

  .forgot-brand>div>p:not(.forgot-eyebrow) {
    font-size: 13px
  }

  .forgot-steps {
    display: none
  }

  .forgot-form-panel {
    padding: 34px 24px 40px
  }

  .forgot-back {
    margin-bottom: 28px
  }

  .forgot-form-panel h2 {
    font-size: 28px
  }
}

@media(max-width:480px), (max-device-width: 480px) {
  .forgot-page {
    padding: 0;
    background: #fff
  }

  .forgot-card {
    border: 0;
    border-radius: 0;
    box-shadow: none
  }

  .forgot-brand {
    border-radius: 0
  }

  .forgot-form-panel {
    padding: 30px 20px 40px
  }
}


/* ==========================================================================
   V17 — Login flash messages belong to the form panel only
   ========================================================================== */

/* The global flash/toast can span the whole login shell in older rules.
   On login/recovery pages keep it inside the right-hand form area. */
.login-page .flash,
.login-page .alert,
.login-page .notice,
.login-page .toast,
.login-page [class*="flash-"],
.login-page [class*="alert-"] {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* When the login form uses the two-column desktop shell, offset the message
   into the form column instead of letting it cross over the image panel. */
@media (min-width:821px) {

  .login-page>.flash,
  .login-page>.alert,
  .login-page>.notice,
  .login-page>.toast {
    width: min(560px, calc(50% - 48px)) !important;
    max-width: min(560px, calc(50% - 48px)) !important;
    margin-left: auto !important;
    margin-right: 48px !important;
  }

  .login-shell>.flash,
  .login-shell>.alert,
  .login-shell>.notice,
  .login-shell>.toast {
    grid-column: 2 !important;
    width: auto !important;
    max-width: none !important;
    margin: 18px 32px 0 !important;
  }

  .login-panel .flash,
  .login-panel .alert,
  .login-panel .notice,
  .login-panel .toast,
  .login-form-wrap .flash,
  .login-form-wrap .alert,
  .login-form-wrap .notice,
  .login-form-wrap .toast {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* Success/error messages should sit above the form, not float over artwork. */
.login-form-wrap .flash,
.login-form-wrap .alert,
.login-form-wrap .notice {
  position: relative !important;
  inset: auto !important;
  transform: none !important;
  margin: 0 0 18px !important;
  z-index: 2 !important;
}

/* Mobile naturally uses the full content width. */
@media (max-width:820px),
(max-device-width: 820px) {

  .login-page>.flash,
  .login-page>.alert,
  .login-page>.notice,
  .login-page>.toast,
  .login-shell>.flash,
  .login-shell>.alert,
  .login-shell>.notice,
  .login-shell>.toast {
    width: auto !important;
    max-width: none !important;
    margin: 12px 16px !important;
  }
}


/* V19 — email notifications + renewal receipts */
.notification-user-picker {
  border: 1px solid var(--line, #dce3eb);
  border-radius: 10px;
  overflow: hidden;
  background: var(--card, #fff)
}

.notification-picker-head {
  display: grid;
  grid-template-columns: 1fr minmax(220px, 320px);
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line, #dce3eb)
}

.notification-picker-head input {
  min-width: 0
}

.notification-picker-list {
  max-height: 310px;
  overflow: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 6px
}

.notification-user-option {
  display: grid !important;
  grid-template-columns: auto 1fr;
  gap: 9px;
  align-items: start;
  padding: 9px !important;
  border-radius: 8px;
  cursor: pointer
}

.notification-user-option:hover {
  background: rgba(23, 63, 112, .05)
}

.notification-user-option input {
  margin-top: 3px
}

.notification-user-option b,
.notification-user-option small {
  display: block;
  font-weight: 400
}

.notification-user-option small {
  font-size: 12px;
  color: var(--muted)
}

.renewal-settings-panel .form-grid {
  max-width: 850px
}

.receipt-preview {
  width: min(620px, 94vw) !important
}

.receipt-sheet {
  border: 1px solid var(--line, #dce3eb);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  color: #26384e
}

.receipt-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  background: #173f70;
  color: #fff
}

.receipt-brand img {
  width: 64px;
  height: 64px;
  object-fit: contain
}

.receipt-brand b,
.receipt-brand small {
  display: block
}

.receipt-brand small {
  margin-top: 3px;
  color: #dce7f4
}

.receipt-number {
  padding: 14px 20px;
  text-align: right;
  font-size: 13px;
  color: #66788b;
  border-bottom: 1px solid #e5eaf0
}

.receipt-sheet dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0;
  padding: 20px
}

.receipt-sheet dt,
.receipt-sheet dd {
  margin: 0;
  padding: 7px 0;
  border-bottom: 1px solid #edf1f5
}

.receipt-sheet dt {
  color: #718096
}

.receipt-sheet dd {
  text-align: right
}

.receipt-total {
  margin: 0 20px 22px;
  padding: 16px;
  border-radius: 10px;
  background: #eef6f0;
  text-align: center
}

.receipt-total span,
.receipt-total strong {
  display: block
}

.receipt-total span {
  font-size: 12px;
  color: #5b7462
}

.receipt-total strong {
  margin-top: 4px;
  font-size: 24px;
  color: #17633a
}

@media(max-width:760px), (max-device-width: 760px) {
  .notification-picker-head {
    grid-template-columns: 1fr
  }

  .notification-picker-list {
    grid-template-columns: 1fr
  }
}


/* V20 — Integrated SMS Centre + recipient groups */
.notification-sms-subtabs {
  margin-bottom: 14px
}

.sms-centre-layout {
  align-items: start
}

.sms-centre-layout .notification-composer {
  min-width: 0
}

.sms-centre-layout .delivery-guide {
  position: sticky;
  top: 92px
}

.sms-delivery-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 14px
}

.sms-delivery-summary article {
  border: 1px solid var(--border, #dce3eb);
  border-radius: 12px;
  background: var(--surface, #fff);
  padding: 14px 16px
}

.sms-delivery-summary strong {
  display: block;
  color: var(--brand, #173f70);
  font-size: 24px;
  line-height: 1
}

.sms-delivery-summary span {
  display: block;
  margin-top: 6px;
  color: var(--muted, #6b7280);
  font-size: 12px
}

#smsManualWrap label {
  display: block
}

#smsManualWrap input {
  width: 100%
}

@media(max-width:900px), (max-device-width: 900px) {
  .sms-delivery-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .sms-centre-layout .delivery-guide {
    position: static
  }
}


/* ==========================================================================
   V21 - Renewal receipt sample + receipts redesign
   ========================================================================== */
.renewal-receipt-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 0 0 14px;
  padding: 18px 20px;
  border: 1px solid var(--border, #dce3eb);
  border-radius: 14px;
  background: var(--surface, #fff);
}

.renewal-receipt-toolbar-copy {
  min-width: 0
}

.renewal-receipt-toolbar-copy .section-kicker {
  margin: 0 0 4px;
  color: #e97900;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.renewal-receipt-toolbar-copy h3 {
  margin: 0;
  color: var(--brand, #173f70);
  font-size: 20px
}

.renewal-receipt-toolbar-copy p:last-child {
  margin: 6px 0 0;
  color: var(--muted, #6b7280);
  font-size: 13px;
  line-height: 1.45
}

.renewal-receipt-toolbar-actions {
  display: flex;
  align-items: end;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.renewal-receipt-toolbar-actions .inline-filter {
  margin: 0
}

.renewal-receipt-toolbar-actions .inline-filter label {
  margin: 0
}

.renewal-receipt-toolbar-actions select {
  min-width: 92px
}

.renewal-receipt-sample-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin: 0 0 14px;
  padding: 13px 16px;
  border: 1px solid #dce4ed;
  border-radius: 12px;
  background: #f8fafc;
}

.renewal-receipt-sample-mark {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #173f70;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
}

.renewal-receipt-sample-card strong {
  display: block;
  color: #19385f;
  font-size: 14px
}

.renewal-receipt-sample-card p {
  margin: 4px 0 0;
  color: #6b7788;
  font-size: 12px;
  line-height: 1.4
}

.renewal-receipts-panel .panel-head {
  margin-bottom: 8px
}

.renewal-receipts-panel table th,
.renewal-receipts-panel table td {
  vertical-align: middle !important
}

@media(max-width:900px), (max-device-width: 900px) {
  .renewal-receipt-toolbar {
    display: block
  }

  .renewal-receipt-toolbar-actions {
    justify-content: flex-start;
    margin-top: 14px
  }
}

@media(max-width:620px), (max-device-width: 620px) {
  .renewal-receipt-toolbar {
    padding: 15px
  }

  .renewal-receipt-toolbar-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch
  }

  .renewal-receipt-toolbar-actions .btn,
  .renewal-receipt-toolbar-actions .inline-filter,
  .renewal-receipt-toolbar-actions .tag {
    width: 100%;
    box-sizing: border-box
  }

  .renewal-receipt-toolbar-actions .inline-filter label,
  .renewal-receipt-toolbar-actions select {
    width: 100%
  }

  .renewal-receipt-sample-card {
    grid-template-columns: 42px minmax(0, 1fr)
  }

  .renewal-receipt-sample-card>a {
    grid-column: 1/-1;
    width: 100%;
    box-sizing: border-box
  }
}


/* ========================================================================
   V22 - Payments module
   ======================================================================== */
.payments-tabs {
  margin-bottom: 14px
}

.payment-context-bar {
  display: grid;
  grid-template-columns: repeat(3, minmax(130px, .65fr)) minmax(360px, 1.8fr);
  gap: 10px;
  align-items: end;
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid var(--border, #dce3eb);
  border-radius: 12px;
  background: var(--surface, #fff)
}

.payment-context-bar>div {
  padding: 5px 8px;
  border-right: 1px solid var(--border, #e4e9ef)
}

.payment-context-bar>div:last-of-type {
  border-right: 0
}

.payment-context-bar span {
  display: block;
  color: var(--muted, #6b7280);
  font-size: 11px
}

.payment-context-bar strong {
  display: block;
  margin-top: 3px;
  color: var(--brand, #173f70);
  font-size: 15px;
  font-weight: 600
}

.payment-context-bar form {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 7px;
  align-items: end
}

.payment-context-bar label {
  font-size: 11px;
  color: var(--muted, #6b7280)
}

.payment-context-bar select {
  width: 100%;
  min-height: 36px
}

.payment-item-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px
}

.payment-item-card {
  display: block;
  min-width: 0;
  padding: 13px 14px;
  border: 1px solid var(--border, #dce3eb);
  border-radius: 11px;
  background: #fff;
  color: inherit;
  text-decoration: none
}

.payment-item-card:hover,
.payment-item-card.active {
  border-color: #8aa5c3;
  background: #f7faff
}

.payment-item-card span {
  display: block;
  color: #e97900;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em
}

.payment-item-card strong {
  display: block;
  margin-top: 5px;
  color: #173f70;
  font-size: 14px;
  font-weight: 600
}

.payment-item-card small {
  display: block;
  margin-top: 4px;
  color: #6b7280;
  font-size: 12px
}

.payment-members-panel {
  margin-top: 14px
}

.payment-mini-stats {
  display: flex;
  gap: 8px;
  flex-wrap: wrap
}

.payment-mini-stats span {
  padding: 7px 10px;
  border: 1px solid var(--border, #dce3eb);
  border-radius: 9px;
  background: #f8fafc;
  color: #6b7280;
  font-size: 11px
}

.payment-mini-stats b {
  color: #173f70;
  font-size: 13px;
  font-weight: 600
}

.payment-item-builder {
  margin-bottom: 14px
}

.payment-receipt-preview {
  max-width: 650px !important
}

.payment-receipt-sheet {
  position: relative;
  overflow: hidden;
  padding: 22px;
  border: 1px solid #d9e2ec;
  border-radius: 12px;
  background: #fff
}

.payment-receipt-watermark {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  width: 230px;
  max-height: 230px;
  object-fit: contain;
  transform: translate(-50%, -48%);
  opacity: .055;
  filter: grayscale(1)
}

.payment-receipt-sheet>*:not(.payment-receipt-watermark) {
  position: relative;
  z-index: 1
}

.payment-receipt-head {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 2px solid #173f70
}

.payment-receipt-head img {
  width: 50px;
  height: 50px;
  object-fit: contain;
  opacity: .86
}

.payment-receipt-head b {
  display: block;
  color: #173f70;
  font-size: 14px
}

.payment-receipt-head small {
  display: block;
  margin-top: 2px;
  color: #6b7280;
  font-size: 10px
}

.payment-receipt-head>strong {
  color: #173f70;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap
}

.payment-receipt-sheet dl {
  display: grid;
  grid-template-columns: 135px 1fr;
  gap: 8px 14px;
  margin: 18px 0
}

.payment-receipt-sheet dt {
  color: #6b7280;
  font-size: 11px
}

.payment-receipt-sheet dd {
  margin: 0;
  color: #1f2937;
  font-size: 12px
}

.payment-receipt-sheet .receipt-total {
  padding: 13px 15px;
  border-radius: 9px;
  background: #eef7f1
}

.payment-receipt-sheet .receipt-total span {
  font-size: 10px;
  color: #56705f
}

.payment-receipt-sheet .receipt-total strong {
  font-size: 21px;
  color: #137b42
}

.payment-receipt-toolbar .btn {
  min-height: 36px !important;
  padding: 7px 11px !important
}

.payment-receipt-toolbar .renewal-receipt-toolbar-copy h3 {
  font-size: 18px
}

.payment-receipt-sample-card {
  background: #fbfcfe
}

@media(max-width:1100px), (max-device-width: 1100px) {
  .payment-context-bar {
    grid-template-columns: repeat(3, 1fr)
  }

  .payment-context-bar form {
    grid-column: 1/-1
  }

  .payment-item-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

@media(max-width:700px), (max-device-width: 700px) {
  .payment-context-bar {
    grid-template-columns: 1fr 1fr
  }

  .payment-context-bar form {
    grid-template-columns: 1fr 1fr;
    grid-column: 1/-1
  }

  .payment-context-bar form .btn {
    grid-column: 1/-1
  }

  .payment-item-grid {
    grid-template-columns: 1fr
  }

  .payment-receipt-head {
    grid-template-columns: 44px 1fr
  }

  .payment-receipt-head>strong {
    grid-column: 1/-1
  }

  .payment-receipt-sheet dl {
    grid-template-columns: 1fr;
    gap: 3px
  }

  .payment-receipt-sheet dd {
    margin-bottom: 8px
  }
}


/* V23 - Non-student movement leadership */
.payment-members-panel .panel-head small.muted {
  display: block;
  margin-top: 5px;
  max-width: 760px;
  font-size: 11px;
  line-height: 1.35;
  font-weight: 400;
}


/* ==========================================================================
   V24 — Profile photos: correct aspect ratio + crop editor + table avatars
   ========================================================================== */

/* Never stretch profile images. */
.profile-photo {
  width: 128px !important;
  height: 128px !important;
  flex: 0 0 128px !important;
  overflow: hidden !important;
  border-radius: 50% !important;
  background: #f4f7fa !important;
}

.profile-photo img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  aspect-ratio: 1/1 !important;
}

/* Upload preview */
.profile-photo-upload>label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
}

.profile-photo-upload-row {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: 14px;
  border: 1px solid var(--border, #dce3eb);
  border-radius: 12px;
  background: #f8fafc;
}

.profile-upload-preview {
  width: 104px;
  height: 104px;
  overflow: hidden;
  border: 1px solid #dce3eb;
  border-radius: 50%;
  background: #fff;
}

.profile-upload-preview img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

.profile-upload-controls {
  min-width: 0;
}

.profile-upload-controls input[type="file"] {
  width: 100%;
}

.profile-upload-controls p {
  margin: 7px 0 10px;
  color: var(--muted, #6b7280);
  font-size: 12px;
  line-height: 1.4;
}

/* Crop/edit dialog */
.profile-photo-editor {
  width: min(600px, calc(100% - 24px));
  max-width: 600px;
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(15, 35, 60, .22);
}

.profile-photo-editor::backdrop {
  background: rgba(8, 22, 39, .68);
}

.profile-editor-shell {
  padding: 18px;
}

.profile-editor-canvas-wrap {
  position: relative;
  width: min(420px, 100%);
  aspect-ratio: 1/1;
  margin: 16px auto;
  overflow: hidden;
  border-radius: 12px;
  background: #e9eef4;
  touch-action: none;
}

.profile-editor-canvas-wrap canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
}

.profile-editor-canvas-wrap canvas:active {
  cursor: grabbing;
}

.profile-editor-guide {
  position: absolute;
  inset: 6%;
  border: 2px solid rgba(255, 255, 255, .9);
  border-radius: 50%;
  box-shadow: 0 0 0 999px rgba(0, 0, 0, .26);
  pointer-events: none;
}

.profile-editor-controls {
  display: grid;
  gap: 12px;
}

.profile-editor-controls>label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  font-size: 13px;
  font-weight: 600;
}

.profile-editor-controls input[type="range"] {
  width: 100%;
}

.profile-editor-buttons,
.profile-editor-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}

.profile-editor-actions {
  justify-content: flex-end;
  padding-top: 14px;
  margin-top: 14px;
  border-top: 1px solid #e5eaf0;
}

/* User/Scout table profile photos */
.member-name-cell {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.member-name-copy {
  min-width: 0;
  display: block;
}

.member-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: 50%;
  border: 1px solid #d8e0e9;
  background: #edf2f7;
  color: #173f70;
  font-weight: 600;
  line-height: 1;
}

.member-avatar-table {
  width: 36px;
  height: 36px;
  font-size: 11px;
}

.member-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

.member-avatar-fallback {
  background: #edf3f9;
}

.users-table .member-name-copy strong,
.scouts-fit-table .member-name-copy strong {
  white-space: normal !important;
}

@media(max-width:700px), (max-device-width: 700px) {
  .profile-photo {
    width: 104px !important;
    height: 104px !important;
    flex-basis: 104px !important;
  }

  .profile-photo-upload-row {
    grid-template-columns: 82px minmax(0, 1fr);
  }

  .profile-upload-preview {
    width: 82px;
    height: 82px;
  }

  .profile-editor-shell {
    padding: 14px;
  }

  .profile-editor-buttons .btn {
    flex: 1 1 calc(50% - 7px);
  }
}


/* ==========================================================================
   V25 — Themed system messages for profile editor
   ========================================================================== */
.system-message-dialog {
  width: min(430px, calc(100% - 28px));
  max-width: 430px;
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: transparent;
  box-shadow: none;
}

.system-message-dialog::backdrop {
  background: rgba(10, 24, 42, .55);
  backdrop-filter: blur(2px);
}

.system-message-card {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 14px;
  padding: 20px;
  border: 1px solid #dce4ed;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 22px 60px rgba(15, 35, 60, .24);
}

.system-message-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff2e2;
  color: #c55c00;
  font-size: 22px;
  font-weight: 700;
}

.system-message-content h3 {
  margin: 2px 0 6px;
  color: #173f70;
  font-size: 18px;
}

.system-message-content p {
  margin: 0;
  color: #66778a;
  font-size: 13px;
  line-height: 1.5;
}

.system-message-actions {
  grid-column: 1/-1;
  display: flex;
  justify-content: flex-end;
  padding-top: 4px;
}

.system-message-actions .btn {
  min-width: 92px;
}


/* ==========================================================================
   V26 — Scouts tabs + Birthday/Leadership profile photos
   ========================================================================== */

/* Scouts registration-state tabs: compact segmented navigation */
.scout-status-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  margin: 12px 0 14px;
  padding: 5px;
  border: 1px solid #d9e1ea;
  border-radius: 12px;
  background: #f7f9fb;
  overflow-x: auto;
  scrollbar-width: none;
}

.scout-status-tabs::-webkit-scrollbar {
  display: none
}

.scout-status-tabs a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #526176;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.scout-status-tabs a b {
  min-width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  padding: 0 6px;
  border-radius: 999px;
  background: #e8edf3;
  color: #173f70;
  font-size: 12px;
  font-weight: 600;
  box-sizing: border-box;
}

.scout-status-tabs a:hover {
  background: #fff;
  color: #173f70;
}

.scout-status-tabs a.active {
  background: #173f70;
  border-color: #173f70;
  color: #fff;
  box-shadow: 0 2px 5px rgba(23, 63, 112, .14);
}

.scout-status-tabs a.active b {
  background: #fff;
  color: #173f70;
}

/* Detail modal avatar */
.scout-view-head {
  align-items: center !important;
}

.scout-view-identity {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.member-avatar-detail {
  width: 64px;
  height: 64px;
  font-size: 17px;
}

.scout-view-identity h3 {
  margin: 0 0 3px !important;
}

.scout-view-identity p {
  margin: 0 !important;
}

/* Birthday table */
.birthday-table td {
  vertical-align: middle !important;
}

.birthday-table .member-name-cell {
  min-width: 190px;
}

.birthday-table .action-tabs {
  justify-content: flex-start;
}

/* Leadership cards */
.leadership-holder-person {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.leadership-holder-person+.leadership-holder-person {
  margin-top: 8px;
}

.leadership-holder-person>span {
  display: block;
  min-width: 0;
}

.leadership-holder-person b,
.leadership-holder-person small {
  display: block;
}

.member-avatar-leadership {
  width: 44px;
  height: 44px;
  font-size: 12px;
}

.leadership-coh-table .member-name-cell {
  min-width: 170px;
}

@media(max-width:700px), (max-device-width: 700px) {
  .scout-status-tabs {
    width: 100%;
    box-sizing: border-box;
  }

  .scout-status-tabs a {
    flex: 0 0 auto;
  }

  .member-avatar-detail {
    width: 54px;
    height: 54px;
  }
}

/* ==========================================================================\n   Flamingo Portal dark-theme completion — 2026-09-03\n   Keep this block last: portal-compat contains newer light-only component\n   rules, so dark overrides must come after them in the cascade.\n   ========================================================================== */
html[data-portal-theme="dark"] .portal-body {
  --dark-bg: #0d141c;
  --dark-surface: #17212b;
  --dark-surface-2: #1d2935;
  --dark-surface-3: #111a23;
  --dark-border: #2d3945;
  --dark-border-soft: #26323e;
  --dark-text: #e8edf3;
  --dark-muted: #9eabb8;
  --dark-heading: #dce8f4;
}

/* Core surfaces */
html[data-portal-theme="dark"] .portal-body .content,
html[data-portal-theme="dark"] .portal-body main {
  background: var(--dark-bg);
  color: var(--dark-text)
}

html[data-portal-theme="dark"] .portal-body .panel,
html[data-portal-theme="dark"] .portal-body .card,
html[data-portal-theme="dark"] .portal-body .stat-card,
html[data-portal-theme="dark"] .portal-body .metric-card,
html[data-portal-theme="dark"] .portal-body .crew-card,
html[data-portal-theme="dark"] .portal-body .crew-overview-card,
html[data-portal-theme="dark"] .portal-body .chart-card,
html[data-portal-theme="dark"] .portal-body .summary-card,
html[data-portal-theme="dark"] .portal-body .activity-card,
html[data-portal-theme="dark"] .portal-body .scanner-card,
html[data-portal-theme="dark"] .portal-body .scan-result,
html[data-portal-theme="dark"] .portal-body .rules-card,
html[data-portal-theme="dark"] .portal-body .station-card,
html[data-portal-theme="dark"] .portal-body .service-summary,
html[data-portal-theme="dark"] .portal-body .attendance-card,
html[data-portal-theme="dark"] .portal-body .executive-card {
  background: var(--dark-surface) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .16) !important;
}

/* Dashboard cards were added after the original dark-theme rules. */
html[data-portal-theme="dark"] .portal-body .dashboard-kpi,
html[data-portal-theme="dark"] .portal-body .dashboard-analytics-card {
  background: var(--dark-surface) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text) !important;
  box-shadow: 0 5px 18px rgba(0, 0, 0, .18) !important;
}

html[data-portal-theme="dark"] .portal-body .dashboard-kpi-icon,
html[data-portal-theme="dark"] .portal-body .dashboard-card-icon,
html[data-portal-theme="dark"] .portal-body .mini-icon {
  background: #203247 !important;
  color: #8fb9e1 !important;
}

html[data-portal-theme="dark"] .portal-body .dashboard-kpi small,
html[data-portal-theme="dark"] .portal-body .dashboard-kpi p,
html[data-portal-theme="dark"] .portal-body .dashboard-card-head p,
html[data-portal-theme="dark"] .portal-body .dashboard-split-stats span,
html[data-portal-theme="dark"] .portal-body .dashboard-mini-grid small,
html[data-portal-theme="dark"] .portal-body .dashboard-mini-grid p,
html[data-portal-theme="dark"] .portal-body .crew-mini-row>span {
  color: var(--dark-muted) !important
}

html[data-portal-theme="dark"] .portal-body .dashboard-kpi strong,
html[data-portal-theme="dark"] .portal-body .dashboard-card-head h3,
html[data-portal-theme="dark"] .portal-body .dashboard-split-stats strong,
html[data-portal-theme="dark"] .portal-body .dashboard-mini-grid strong,
html[data-portal-theme="dark"] .portal-body .crew-mini-row strong {
  color: var(--dark-heading) !important
}

html[data-portal-theme="dark"] .portal-body .dashboard-split-stats>div,
html[data-portal-theme="dark"] .portal-body .dashboard-mini-grid>div {
  background: var(--dark-surface-2) !important;
  border-color: #34414e !important;
}

html[data-portal-theme="dark"] .portal-body .renewal-progress,
html[data-portal-theme="dark"] .portal-body .crew-mini-row>div {
  background: #2b3743 !important
}

/* Tables: prevent the white table/very-faint text combination visible on dashboard. */
html[data-portal-theme="dark"] .portal-body .table-wrap,
html[data-portal-theme="dark"] .portal-body .compact-table-wrap {
  background: var(--dark-surface) !important;
  border-color: var(--dark-border) !important;
}

html[data-portal-theme="dark"] .portal-body table {
  color: var(--dark-text) !important
}

html[data-portal-theme="dark"] .portal-body table th {
  background: var(--dark-surface-2) !important;
  color: var(--dark-heading) !important;
  border-color: #34414e !important;
}

html[data-portal-theme="dark"] .portal-body table td {
  background: var(--dark-surface) !important;
  color: #d9e2eb !important;
  border-color: var(--dark-border) !important;
}

html[data-portal-theme="dark"] .portal-body table tbody tr:hover td {
  background: #1b2834 !important
}

html[data-portal-theme="dark"] .portal-body table td small {
  color: var(--dark-muted) !important
}

html[data-portal-theme="dark"] .portal-body .recruiter-group td {
  background: #1b3045 !important;
  color: #e5eff9 !important
}

/* Forms, filters, tabs, pagination and modals. */
html[data-portal-theme="dark"] .portal-body input,
html[data-portal-theme="dark"] .portal-body select,
html[data-portal-theme="dark"] .portal-body textarea,
html[data-portal-theme="dark"] .portal-body .audit-filters input,
html[data-portal-theme="dark"] .portal-body .audit-filters select {
  background: var(--dark-surface-3) !important;
  border-color: #34414e !important;
  color: var(--dark-text) !important;
}

html[data-portal-theme="dark"] .portal-body input::placeholder,
html[data-portal-theme="dark"] .portal-body textarea::placeholder {
  color: #758391 !important
}

html[data-portal-theme="dark"] .portal-body label,
html[data-portal-theme="dark"] .portal-body .field label {
  color: #d7e0e9 !important
}

html[data-portal-theme="dark"] .portal-body .role-subtabs a,
html[data-portal-theme="dark"] .portal-body .subtabs a,
html[data-portal-theme="dark"] .portal-body .tabs a,
html[data-portal-theme="dark"] .portal-body .sms-tabs a,
html[data-portal-theme="dark"] .portal-body .pagination a,
html[data-portal-theme="dark"] .portal-body .pagination span,
html[data-portal-theme="dark"] .portal-body .pager a,
html[data-portal-theme="dark"] .portal-body .attendance-secondary-tabs a {
  background: var(--dark-surface) !important;
  border-color: var(--dark-border) !important;
  color: #b9c9d9 !important;
}

html[data-portal-theme="dark"] .portal-body .role-subtabs a.active,
html[data-portal-theme="dark"] .portal-body .subtabs a.active,
html[data-portal-theme="dark"] .portal-body .tabs a.active,
html[data-portal-theme="dark"] .portal-body .sms-tabs a.active,
html[data-portal-theme="dark"] .portal-body .pagination .active,
html[data-portal-theme="dark"] .portal-body .pager .active,
html[data-portal-theme="dark"] .portal-body .attendance-secondary-tabs a.active {
  background: #315d8f !important;
  border-color: #4f83b9 !important;
  color: #fff !important;
}

html[data-portal-theme="dark"] .portal-body .modal-form,
html[data-portal-theme="dark"] .portal-body .confirm-box,
html[data-portal-theme="dark"] .portal-body dialog {
  background: var(--dark-surface) !important;
  color: var(--dark-text) !important;
  border-color: var(--dark-border) !important;
}

html[data-portal-theme="dark"] .portal-body .scout-detail-grid>div,
html[data-portal-theme="dark"] .portal-body .attendance-code-card {
  background: var(--dark-surface-2) !important;
  border-color: #34414e !important;
}

html[data-portal-theme="dark"] .portal-body .scout-detail-grid strong,
html[data-portal-theme="dark"] .portal-body .attendance-code-card strong {
  color: #cfe2f5 !important
}

html[data-portal-theme="dark"] .portal-body .balance-check {
  background: var(--dark-surface-3) !important;
  border-color: #52606d !important
}

html[data-portal-theme="dark"] .portal-body .balance-using input:checked+.balance-check {
  background: #1877d3 !important;
  border-color: #1877d3 !important
}

/* Compact cards used by crews, reports, payments and audit pages. */
html[data-portal-theme="dark"] .portal-body .crew-card-metrics span,
html[data-portal-theme="dark"] .portal-body .crew-leadership-strip span,
html[data-portal-theme="dark"] .portal-body .audit-stats .stat-card,
html[data-portal-theme="dark"] .portal-body .payment-item-card,
html[data-portal-theme="dark"] .portal-body .renewal-receipt-sample-card {
  background: var(--dark-surface-2) !important;
  border-color: #34414e !important;
  color: var(--dark-text) !important;
}

html[data-portal-theme="dark"] .portal-body .metric-card strong,
html[data-portal-theme="dark"] .portal-body .crew-card-head h3,
html[data-portal-theme="dark"] .portal-body .crew-card-metrics b,
html[data-portal-theme="dark"] .portal-body .crew-overview-card header h3,
html[data-portal-theme="dark"] .portal-body .crew-leadership-strip b,
html[data-portal-theme="dark"] .portal-body .crew-regular-preview strong,
html[data-portal-theme="dark"] .portal-body .payment-item-card strong,
html[data-portal-theme="dark"] .portal-body .payment-mini-stats b {
  color: var(--dark-heading) !important
}

html[data-portal-theme="dark"] .portal-body .metric-card small,
html[data-portal-theme="dark"] .portal-body .metric-card p,
html[data-portal-theme="dark"] .portal-body .crew-card-head p,
html[data-portal-theme="dark"] .portal-body .crew-card-metrics span,
html[data-portal-theme="dark"] .portal-body .crew-member-preview small,
html[data-portal-theme="dark"] .portal-body .crew-overview-card header p,
html[data-portal-theme="dark"] .portal-body .crew-leadership-strip span,
html[data-portal-theme="dark"] .portal-body .crew-regular-preview {
  color: var(--dark-muted) !important
}

/* Chat surfaces that had forced white backgrounds. */
html[data-portal-theme="dark"] .portal-body .chat-pinned,
html[data-portal-theme="dark"] .portal-body .chat-bubble {
  background: var(--dark-surface-2) !important;
  color: var(--dark-text) !important;
  border-color: #34414e !important;
}

html[data-portal-theme="dark"] .portal-body .chat-avatar {
  background: #26394b !important;
  color: #d9e8f6 !important
}

/* Status colours retain meaning but are tuned for dark backgrounds. */
html[data-portal-theme="dark"] .portal-body .tag,
html[data-portal-theme="dark"] .portal-body .status-pill,
html[data-portal-theme="dark"] .portal-body .role-chip,
html[data-portal-theme="dark"] .portal-body .badge {
  background: #203247;
  color: #9dcaef
}

html[data-portal-theme="dark"] .portal-body .tag.success,
html[data-portal-theme="dark"] .portal-body .status-pill.success,
html[data-portal-theme="dark"] .portal-body .badge.success {
  background: #153626;
  color: #8ed6ad
}

html[data-portal-theme="dark"] .portal-body .tag.blocked,
html[data-portal-theme="dark"] .portal-body .badge.off {
  background: #3a201e;
  color: #ffb8b1
}

html[data-portal-theme="dark"] .portal-body .tag.warning {
  background: #3a2c18;
  color: #f7c777
}

/* Scrollbars should not flash light inside a dark portal. */
html[data-portal-theme="dark"] {
  scrollbar-color: #40505f #111a23
}

html[data-portal-theme="dark"] .portal-body ::-webkit-scrollbar-track {
  background: #111a23
}

html[data-portal-theme="dark"] .portal-body ::-webkit-scrollbar-thumb {
  background: #40505f
}

/* My Attendance / attendance apologies */
.my-attendance-panel {
  display: grid;
  gap: 18px
}

.my-attendance-tabs {
  margin-bottom: 2px
}

.apology-grid {
  display: grid;
  grid-template-columns: minmax(320px, .8fr) minmax(0, 1.2fr);
  gap: 18px;
  align-items: start
}

.apology-form-card {
  min-width: 0
}

.apology-history {
  min-width: 0;
  margin: 0
}

.apology-location-status {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 14px;
  border: 1px solid #dbe4ec;
  border-radius: 12px;
  background: #f7fafc
}

.apology-location-status strong {
  font-size: 14px
}

.apology-location-status span {
  font-size: 12px;
  color: #6b7785
}

.apology-review-form {
  display: grid;
  gap: 8px;
  min-width: 190px
}

.apology-review-form input {
  width: 100%
}

.attendance-records-table td small {
  display: block;
  margin-top: 4px
}

.attendance-records-table td {
  vertical-align: top
}

.attendance-main-tabs {
  flex-wrap: wrap
}

@media(max-width:980px), (max-device-width: 980px) {
  .apology-grid {
    grid-template-columns: 1fr
  }
}

html[data-portal-theme="dark"] .portal-body .apology-form-card,
html[data-portal-theme="dark"] .portal-body .apology-history,
html[data-portal-theme="dark"] .portal-body .my-attendance-panel {
  background: var(--dark-surface) !important;
  border-color: #34414e !important;
  color: var(--dark-text) !important
}

html[data-portal-theme="dark"] .portal-body .apology-location-status {
  background: var(--dark-surface-2) !important;
  border-color: #34414e !important;
  color: var(--dark-text) !important
}

html[data-portal-theme="dark"] .portal-body .apology-location-status span {
  color: var(--dark-muted) !important
}

/* V32: unified Attendances hub */
.attendance-hub-tabs {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin: 0 0 18px;
  padding: 6px;
  border: 1px solid var(--line, #dfe7ee);
  border-radius: 14px;
  background: var(--soft, #f6f8fa)
}

.attendance-hub-tabs a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 9px 16px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 600;
  color: var(--muted, #607080)
}

.attendance-hub-tabs a.active {
  background: var(--primary, #123a2b);
  color: #fff;
  box-shadow: 0 5px 14px rgba(0, 0, 0, .08)
}

.attendance-record-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  align-items: start
}

.attendance-record-grid.has-two-tools {
  grid-template-columns: repeat(2, minmax(0, 1fr))
}

.attendance-tool-card {
  min-width: 0;
  height: 100%
}

.inline-scan-result {
  margin-top: 16px;
  min-height: 0
}

.dated-record-list {
  display: grid;
  gap: 18px;
  margin-top: 12px
}

.dated-record-group {
  border: 1px solid var(--line, #dfe7ee);
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface, #fff)
}

.dated-record-heading {
  text-align: center;
  padding: 10px 14px;
  font-weight: 700;
  letter-spacing: .01em;
  background: var(--soft, #f6f8fa);
  border-bottom: 1px solid var(--line, #dfe7ee);
  color: var(--text, #183047)
}

.dated-record-row {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line, #e5ebf0)
}

.dated-record-row:last-child {
  border-bottom: 0
}

.dated-record-row>div:first-child {
  display: grid;
  gap: 5px;
  min-width: 0
}

.dated-record-row small {
  display: block;
  color: var(--muted, #728092)
}

.dated-record-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  text-align: right
}

.my-record-heading {
  margin: 18px 0 8px
}

.my-record-heading h3 {
  margin: 0 0 4px
}

.my-record-heading p {
  margin: 0;
  color: var(--muted, #728092)
}

@media(max-width:980px), (max-device-width: 980px) {
  .attendance-record-grid.has-two-tools {
    grid-template-columns: 1fr
  }
}

@media(max-width:640px), (max-device-width: 640px) {
  .attendance-hub-tabs {
    display: grid;
    grid-template-columns: 1fr
  }

  .attendance-hub-tabs a {
    width: 100%
  }

  .dated-record-row {
    align-items: flex-start;
    flex-direction: column
  }

  .dated-record-meta {
    justify-content: flex-start;
    text-align: left
  }
}

html[data-theme="dark"] .attendance-hub-tabs,
body.dark-mode .attendance-hub-tabs {
  background: #111d27;
  border-color: #2b3b47
}

html[data-theme="dark"] .attendance-hub-tabs a,
body.dark-mode .attendance-hub-tabs a {
  color: #b9c6d2
}

html[data-theme="dark"] .attendance-hub-tabs a.active,
body.dark-mode .attendance-hub-tabs a.active {
  background: #1c6f50;
  color: #fff
}

html[data-theme="dark"] .dated-record-group,
body.dark-mode .dated-record-group {
  background: #101a23;
  border-color: #2b3b47
}

html[data-theme="dark"] .dated-record-heading,
body.dark-mode .dated-record-heading {
  background: #16232e;
  border-color: #2b3b47;
  color: #e7eef5
}

html[data-theme="dark"] .dated-record-row,
body.dark-mode .dated-record-row {
  border-color: #2b3b47
}

/* V33 — cleaner member tabs and private self-service views */
.portal-body .attendance-hub-tabs,
.portal-body .subtabs,
.portal-body .role-subtabs {
  display: flex;
  align-items: center;
  gap: 6px;
  width: max-content;
  max-width: 100%;
  margin: 0 0 20px;
  padding: 5px;
  border: 1px solid #dce5ec;
  border-radius: 13px;
  background: #f3f6f8;
  box-shadow: none;
}

.portal-body .attendance-hub-tabs a,
.portal-body .subtabs a,
.portal-body .role-subtabs a {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 15px;
  border: 0 !important;
  border-radius: 9px;
  background: transparent !important;
  color: #607080 !important;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  box-shadow: none !important;
}

.portal-body .attendance-hub-tabs a:hover,
.portal-body .subtabs a:hover,
.portal-body .role-subtabs a:hover {
  background: #e8eef3 !important;
  color: var(--primary) !important
}

.portal-body .attendance-hub-tabs a.active,
.portal-body .subtabs a.active,
.portal-body .role-subtabs a.active {
  background: #fff !important;
  color: var(--primary) !important;
  box-shadow: 0 2px 7px rgba(15, 42, 67, .10) !important;
}

.portal-body .attendance-hub-tabs a.active:before,
.portal-body .subtabs a.active:before,
.portal-body .role-subtabs a.active:before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 99px;
  background: var(--secondary, #ef7d00);
  margin-right: 8px;
}

.portal-body .attendance-main-tabs {
  margin-top: 4px
}

.personal-scope-banner {
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid #dce6ec;
  border-radius: 12px;
  background: #f8fafb
}

.personal-scope-banner>div {
  display: flex;
  align-items: center;
  gap: 11px
}

.personal-scope-banner .scope-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  border-radius: 10px;
  background: #e9f5ef;
  color: #19734f;
  font-weight: 900
}

.personal-scope-banner strong {
  display: block;
  color: var(--primary);
  font-size: 14px
}

.personal-scope-banner p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35
}

.my-crew-summary {
  display: grid;
  gap: 5px;
  padding: 16px 2px 2px
}

.my-crew-summary .my-crew-role {
  width: max-content;
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--primary-light);
  color: var(--primary);
  font-size: 11px;
  font-weight: 800
}

.my-crew-summary strong {
  font-size: 17px;
  color: var(--primary)
}

.my-crew-summary small {
  color: var(--muted)
}

.personal-empty-panel .empty-state {
  text-align: center;
  padding: 34px 18px
}

.welcome .btn.light {
  border: 1px solid #d7e1e8 !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: var(--primary) !important;
  box-shadow: 0 2px 7px rgba(15, 42, 67, .07) !important;
  padding: 10px 14px !important;
  font-weight: 700 !important
}

.welcome .btn.light:hover {
  background: #f6f8fa !important;
  border-color: #c7d4dd !important
}

@media(max-width:680px), (max-device-width: 680px) {

  .portal-body .attendance-hub-tabs,
  .portal-body .subtabs,
  .portal-body .role-subtabs {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr;
    margin-bottom: 15px
  }

  .portal-body .attendance-hub-tabs a,
  .portal-body .subtabs a,
  .portal-body .role-subtabs a {
    width: 100%
  }
}

html[data-portal-theme="dark"] .portal-body .attendance-hub-tabs,
html[data-portal-theme="dark"] .portal-body .subtabs,
html[data-portal-theme="dark"] .portal-body .role-subtabs,
html[data-theme="dark"] .portal-body .attendance-hub-tabs,
html[data-theme="dark"] .portal-body .subtabs,
html[data-theme="dark"] .portal-body .role-subtabs,
body.dark-mode .portal-body .attendance-hub-tabs,
body.dark-mode .portal-body .subtabs,
body.dark-mode .portal-body .role-subtabs {
  background: #121d26 !important;
  border-color: #30414e !important
}

html[data-portal-theme="dark"] .portal-body .attendance-hub-tabs a,
html[data-portal-theme="dark"] .portal-body .subtabs a,
html[data-portal-theme="dark"] .portal-body .role-subtabs a,
html[data-theme="dark"] .portal-body .attendance-hub-tabs a,
html[data-theme="dark"] .portal-body .subtabs a,
html[data-theme="dark"] .portal-body .role-subtabs a {
  color: #b9c6d2 !important
}

html[data-portal-theme="dark"] .portal-body .attendance-hub-tabs a.active,
html[data-portal-theme="dark"] .portal-body .subtabs a.active,
html[data-portal-theme="dark"] .portal-body .role-subtabs a.active,
html[data-theme="dark"] .portal-body .attendance-hub-tabs a.active,
html[data-theme="dark"] .portal-body .subtabs a.active,
html[data-theme="dark"] .portal-body .role-subtabs a.active {
  background: #22313e !important;
  color: #fff !important
}

html[data-portal-theme="dark"] .personal-scope-banner,
html[data-theme="dark"] .personal-scope-banner,
body.dark-mode .personal-scope-banner {
  background: #14212a !important;
  border-color: #30414e !important
}

html[data-portal-theme="dark"] .personal-scope-banner strong,
html[data-theme="dark"] .personal-scope-banner strong,
body.dark-mode .personal-scope-banner strong {
  color: #f3f7fa !important
}

html[data-portal-theme="dark"] .welcome .btn.light,
html[data-theme="dark"] .welcome .btn.light,
body.dark-mode .welcome .btn.light {
  background: #1b2934 !important;
  border-color: #344654 !important;
  color: #fff !important
}

/* V34 — strict Scout privacy + refined member navigation */
.portal-body .attendance-hub-panel>.attendance-hub-tabs {
  width: 100%;
  max-width: 760px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 6px;
  margin: 0 0 22px;
  border: 1px solid #dfe7ed;
  border-radius: 16px;
  background: #f6f8fa;
}

.portal-body .attendance-hub-panel>.attendance-hub-tabs a {
  position: relative;
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 11px !important;
  font-size: 13px;
  font-weight: 750;
  color: #5f6f7e !important;
  background: transparent !important;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.portal-body .attendance-hub-panel>.attendance-hub-tabs a:before {
  display: none !important
}

.portal-body .attendance-hub-panel>.attendance-hub-tabs a:hover {
  background: #edf2f5 !important;
  color: var(--primary) !important
}

.portal-body .attendance-hub-panel>.attendance-hub-tabs a.active {
  background: #fff !important;
  color: var(--primary) !important;
  box-shadow: 0 3px 12px rgba(19, 48, 72, .11) !important;
}

.portal-body .attendance-hub-panel>.attendance-hub-tabs a.active:after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 5px;
  width: 22px;
  height: 3px;
  transform: translateX(-50%);
  border-radius: 99px;
  background: var(--secondary, #ef7d00);
}

.member-dashboard-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 16px;
  padding: 22px 24px;
  border: 1px solid #dde6ed;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(18, 48, 73, .055)
}

.member-dashboard-hero h2 {
  margin: 5px 0 6px;
  font-size: 25px;
  line-height: 1.2;
  color: var(--primary)
}

.member-dashboard-hero p {
  margin: 0;
  color: var(--muted)
}

.member-primary-action {
  display: grid;
  grid-template-columns: 40px 1fr;
  column-gap: 10px;
  align-items: center;
  min-width: 245px;
  padding: 13px 15px;
  border-radius: 14px;
  background: var(--primary);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 8px 18px rgba(17, 55, 84, .14)
}

.member-primary-action>span {
  grid-row: 1/3;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: rgba(255, 255, 255, .13)
}

.member-primary-action svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8
}

.member-primary-action b {
  font-size: 14px;
  line-height: 1.15
}

.member-primary-action small {
  font-size: 10.5px;
  opacity: .77
}

.member-home-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 16px
}

.member-home-tabs a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 11px 13px;
  border: 1px solid #dfe7ed;
  border-radius: 14px;
  background: #fff;
  color: var(--primary);
  text-decoration: none;
  font-size: 13px;
  font-weight: 750;
  box-shadow: 0 4px 14px rgba(18, 48, 73, .035);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease
}

.member-home-tabs a:hover {
  transform: translateY(-1px);
  border-color: #c9d6df;
  box-shadow: 0 7px 17px rgba(18, 48, 73, .07)
}

.member-home-tabs span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  border-radius: 10px;
  background: #eef4f7;
  color: var(--primary)
}

.member-home-tabs svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8
}

.member-dashboard-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 12px
}

.member-dashboard-summary article {
  min-width: 0;
  padding: 16px 17px;
  border: 1px solid #e0e7ed;
  border-radius: 15px;
  background: #fff
}

.member-dashboard-summary small {
  display: block;
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 650
}

.member-dashboard-summary strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 21px;
  line-height: 1.12;
  color: var(--primary)
}

.member-dashboard-summary p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 10.5px
}

.member-status-strip {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  overflow: hidden;
  border: 1px solid #e0e7ed;
  border-radius: 14px;
  background: #e0e7ed
}

.member-status-strip>div {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  background: #fff
}

.member-status-strip small {
  display: block;
  color: var(--muted);
  font-size: 10.5px
}

.member-status-strip strong {
  font-size: 13px;
  color: var(--primary)
}

.member-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #98a4ae;
  box-shadow: 0 0 0 4px rgba(152, 164, 174, .13)
}

.member-status-dot.is-open {
  background: #1f9b68;
  box-shadow: 0 0 0 4px rgba(31, 155, 104, .13)
}

.member-status-dot.is-closed {
  background: #c86b57;
  box-shadow: 0 0 0 4px rgba(200, 107, 87, .12)
}

@media(max-width:900px), (max-device-width: 900px) {

  .member-home-tabs,
  .member-dashboard-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .member-dashboard-hero {
    align-items: flex-start;
    flex-direction: column
  }

  .member-primary-action {
    width: 100%;
    min-width: 0
  }
}

@media(max-width:620px), (max-device-width: 620px) {
  .portal-body .attendance-hub-panel>.attendance-hub-tabs {
    grid-template-columns: 1fr;
    padding: 5px
  }

  .portal-body .attendance-hub-panel>.attendance-hub-tabs a {
    min-height: 40px
  }

  .portal-body .attendance-hub-panel>.attendance-hub-tabs a.active:after {
    display: none
  }

  .member-home-tabs,
  .member-dashboard-summary,
  .member-status-strip {
    grid-template-columns: 1fr
  }

  .member-dashboard-hero {
    padding: 18px
  }

  .member-home-tabs a {
    min-height: 52px
  }
}

html[data-portal-theme="dark"] .portal-body .attendance-hub-panel>.attendance-hub-tabs,
html[data-theme="dark"] .portal-body .attendance-hub-panel>.attendance-hub-tabs,
body.dark-mode .portal-body .attendance-hub-panel>.attendance-hub-tabs {
  background: #111c25 !important;
  border-color: #30404d !important
}

html[data-portal-theme="dark"] .portal-body .attendance-hub-panel>.attendance-hub-tabs a.active,
html[data-theme="dark"] .portal-body .attendance-hub-panel>.attendance-hub-tabs a.active,
body.dark-mode .portal-body .attendance-hub-panel>.attendance-hub-tabs a.active {
  background: #22313c !important;
  color: #fff !important
}

html[data-portal-theme="dark"] .member-dashboard-hero,
html[data-portal-theme="dark"] .member-home-tabs a,
html[data-portal-theme="dark"] .member-dashboard-summary article,
html[data-portal-theme="dark"] .member-status-strip>div,
html[data-theme="dark"] .member-dashboard-hero,
html[data-theme="dark"] .member-home-tabs a,
html[data-theme="dark"] .member-dashboard-summary article,
html[data-theme="dark"] .member-status-strip>div,
body.dark-mode .member-dashboard-hero,
body.dark-mode .member-home-tabs a,
body.dark-mode .member-dashboard-summary article,
body.dark-mode .member-status-strip>div {
  background: #14212a !important;
  border-color: #30414e !important;
  color: #e9f0f5 !important
}

html[data-portal-theme="dark"] .member-dashboard-hero h2,
html[data-portal-theme="dark"] .member-home-tabs a,
html[data-portal-theme="dark"] .member-dashboard-summary strong,
html[data-portal-theme="dark"] .member-status-strip strong,
html[data-theme="dark"] .member-dashboard-hero h2,
html[data-theme="dark"] .member-home-tabs a,
html[data-theme="dark"] .member-dashboard-summary strong,
html[data-theme="dark"] .member-status-strip strong,
body.dark-mode .member-dashboard-hero h2,
body.dark-mode .member-home-tabs a,
body.dark-mode .member-dashboard-summary strong,
body.dark-mode .member-status-strip strong {
  color: #f2f6f9 !important
}

html[data-portal-theme="dark"] .member-home-tabs span,
html[data-theme="dark"] .member-home-tabs span,
body.dark-mode .member-home-tabs span {
  background: #20323f;
  color: #cde0eb
}

html[data-portal-theme="dark"] .member-status-strip,
html[data-theme="dark"] .member-status-strip,
body.dark-mode .member-status-strip {
  background: #30414e;
  border-color: #30414e
}

/* v36 attendance event analytics + richer report visualizations */
.event-analytics-shell {
  margin: 18px 0 22px;
  padding: 18px;
  border: 1px solid var(--line, #dfe6ee);
  border-radius: 18px;
  background: linear-gradient(180deg, #fbfdff, #f6f9fc)
}

.event-analytics-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px
}

.event-analytics-head h3 {
  margin: 4px 0 5px;
  font-size: 18px
}

.event-analytics-head p {
  margin: 0;
  color: var(--muted, #667085);
  font-size: 13px
}

.event-chart-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px
}

.analytics-card {
  min-width: 0;
  padding: 16px;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(20, 42, 72, .05)
}

.analytics-card h4 {
  margin: 0 0 3px;
  font-size: 15px
}

.analytics-card>p {
  margin: 0 0 14px;
  color: #667085;
  font-size: 12px
}

.analytics-bars {
  display: grid;
  gap: 10px
}

.analytics-bar-row>div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px
}

.analytics-bar-row small {
  display: block;
  margin-top: 3px;
  text-align: right;
  color: #667085;
  font-size: 10px
}

.analytics-track {
  height: 8px;
  border-radius: 999px;
  background: #edf2f7;
  overflow: hidden
}

.analytics-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #1f416a, #168c55)
}

.donut-wrap {
  display: flex;
  align-items: center;
  gap: 22px;
  min-height: 180px
}

.analytics-donut {
  width: 150px;
  aspect-ratio: 1;
  border-radius: 50%;
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 auto
}

.analytics-donut:after {
  content: "";
  position: absolute;
  inset: 28px;
  border-radius: 50%;
  background: #fff
}

.analytics-donut span {
  position: relative;
  z-index: 1;
  text-align: center;
  font-weight: 800;
  font-size: 23px;
  color: #102a4c
}

.analytics-donut span small {
  display: block;
  font-size: 10px;
  font-weight: 600;
  color: #667085
}

.donut-legend {
  display: grid;
  gap: 8px;
  min-width: 0;
  flex: 1
}

.donut-legend>div {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  font-size: 11px
}

.donut-legend i {
  width: 9px;
  height: 9px;
  border-radius: 50%
}

.donut-legend b {
  font-size: 11px
}

.analytics-columns,
.report-columns {
  height: 190px;
  display: flex;
  align-items: flex-end;
  gap: 9px;
  padding-top: 15px
}

.analytics-column,
.report-columns>div {
  height: 100%;
  flex: 1;
  min-width: 34px;
  display: grid;
  grid-template-rows: 1fr auto auto auto;
  align-items: end;
  text-align: center;
  gap: 3px
}

.analytics-column>div,
.report-columns>div>div {
  height: 130px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: linear-gradient(180deg, #f8fafc, #edf2f7);
  border-radius: 9px 9px 4px 4px;
  overflow: hidden
}

.analytics-column i,
.report-columns i {
  display: block;
  width: 66%;
  min-height: 4px;
  border-radius: 7px 7px 0 0;
  background: linear-gradient(180deg, #168c55, #1f416a)
}

.analytics-column span,
.report-columns span {
  font-size: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 80px
}

.analytics-column small {
  font-size: 9px;
  color: #667085
}

.analytics-column b,
.report-columns b {
  font-size: 10px
}

.leadership-stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px
}

.leadership-stat-grid>div {
  padding: 14px;
  border-radius: 13px;
  background: #f7f9fc;
  border: 1px solid #e5eaf1
}

.leadership-stat-grid span {
  font-size: 11px;
  color: #667085
}

.leadership-stat-grid strong {
  display: block;
  font-size: 24px;
  margin: 3px 0
}

.leadership-stat-grid small {
  display: block;
  margin-bottom: 9px;
  color: #667085;
  font-size: 10px
}

.report-visual-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr))
}

.report-visual-card {
  min-height: 300px
}

.chart-type-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 5px 9px;
  border-radius: 999px;
  background: #edf4fb;
  color: #1f416a;
  border: 1px solid #dbe8f5
}

.report-donut {
  padding: 6px 5px
}

.report-line-chart {
  height: 220px;
  padding: 10px 4px 0
}

.report-line-chart svg {
  width: 100%;
  height: 185px;
  overflow: visible
}

.report-line-chart .axis {
  stroke: #d5dde8;
  stroke-width: .7
}

.report-line-chart .trend {
  fill: none;
  stroke: #1f416a;
  stroke-width: 2;
  vector-effect: non-scaling-stroke
}

.report-line-chart .point {
  fill: #168c55;
  stroke: #fff;
  stroke-width: .8;
  vector-effect: non-scaling-stroke
}

.line-labels {
  display: flex;
  justify-content: space-between;
  color: #667085;
  font-size: 10px
}

.report-columns {
  height: 220px
}

.report-columns>div>div {
  height: 150px
}

[data-theme="dark"] .event-analytics-shell {
  background: linear-gradient(180deg, #122235, #0e1c2c);
  border-color: #294057
}

[data-theme="dark"] .analytics-card,
[data-theme="dark"] .analytics-donut:after {
  background: #142638;
  border-color: #294057
}

[data-theme="dark"] .analytics-card>p,
[data-theme="dark"] .event-analytics-head p,
[data-theme="dark"] .analytics-donut span small,
[data-theme="dark"] .analytics-bar-row small,
[data-theme="dark"] .leadership-stat-grid span,
[data-theme="dark"] .leadership-stat-grid small,
[data-theme="dark"] .line-labels {
  color: #9fb0c3
}

[data-theme="dark"] .analytics-donut span {
  color: #edf5ff
}

[data-theme="dark"] .analytics-track,
[data-theme="dark"] .analytics-column>div,
[data-theme="dark"] .report-columns>div>div {
  background: #22364a
}

[data-theme="dark"] .leadership-stat-grid>div {
  background: #172b3e;
  border-color: #294057
}

@media(max-width:920px), (max-device-width: 920px) {

  .event-chart-grid,
  .report-visual-grid {
    grid-template-columns: 1fr
  }

  .donut-wrap {
    flex-direction: column;
    align-items: flex-start
  }

  .analytics-donut {
    align-self: center
  }

  .leadership-stat-grid {
    grid-template-columns: 1fr
  }

  .event-analytics-head {
    flex-direction: column
  }

  .analytics-columns,
  .report-columns {
    overflow-x: auto
  }

  .analytics-column,
  .report-columns>div {
    min-width: 58px
  }
}

/* v37 richer report visuals + restrained dashboard charts */
.report-gallery {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px
}

.report-gallery .report-wide {
  grid-column: 1/-1
}

.report-bars-colour .report-bar-row>div {
  height: 10px;
  background: color-mix(in srgb, var(--warm-white) 84%, transparent)
}

.report-bars-colour .report-bar-row i {
  box-shadow: 0 3px 10px rgba(15, 23, 42, .12)
}

.report-columns-colour>div>div {
  background: linear-gradient(180deg, #f8fafc, #eef2f7)
}

.report-columns-colour i {
  width: 68%;
  border-radius: 8px 8px 0 0;
  box-shadow: 0 5px 12px rgba(15, 23, 42, .12)
}

.report-area-chart .trend-purple {
  stroke: #8b5cf6;
  stroke-width: 2.3
}

.report-area-chart .point-pink {
  fill: #ec4899
}

.report-area-chart {
  background: linear-gradient(180deg, rgba(139, 92, 246, .035), transparent);
  border-radius: 12px
}

.report-bubbles {
  min-height: 220px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 13px;
  padding: 10px
}

.report-bubble {
  width: var(--bubble-size);
  height: var(--bubble-size);
  max-width: 112px;
  max-height: 112px;
  min-width: 52px;
  min-height: 52px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--bubble-color) 88%, white 12%);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 7px;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--bubble-color) 24%, transparent);
  border: 4px solid color-mix(in srgb, var(--bubble-color) 24%, white 76%)
}

.report-bubble b {
  font-size: 14px
}

.report-bubble span {
  font-size: 8.5px;
  line-height: 1.1;
  max-width: 92%;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical
}

.report-lollipop {
  display: grid;
  gap: 12px;
  padding: 8px 2px
}

.report-lollipop>div {
  display: grid;
  grid-template-columns: minmax(110px, 150px) 1fr 42px;
  gap: 10px;
  align-items: center;
  font-size: 11px
}

.report-lollipop>div>span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.report-lollipop>div>div {
  height: 3px;
  background: #e5e7eb;
  position: relative;
  border-radius: 999px
}

.report-lollipop i {
  position: absolute;
  left: 0;
  top: 0;
  height: 3px;
  border-radius: 999px
}

.report-lollipop em {
  position: absolute;
  right: -6px;
  top: -5px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  box-shadow: 0 0 0 4px #fff
}

.report-lollipop b {
  text-align: right;
  font-size: 10px;
  color: var(--muted)
}

.dashboard-chart-strip {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 0 0 16px
}

.dashboard-chart-card {
  min-height: 250px
}

.dashboard-chart-card .dashboard-card-head a {
  font-size: 11px;
  font-weight: 700;
  color: var(--primary);
  text-decoration: none
}

.dashboard-colour-columns {
  height: 170px;
  display: flex;
  gap: 12px;
  align-items: flex-end;
  padding: 8px 6px 0
}

.dashboard-colour-columns>div {
  height: 100%;
  flex: 1;
  min-width: 50px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 5px;
  text-align: center;
  align-items: end
}

.dashboard-colour-columns>div>div {
  height: 125px;
  background: linear-gradient(180deg, #f8fafc, #edf2f7);
  border-radius: 8px 8px 4px 4px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden
}

.dashboard-colour-columns i {
  display: block;
  width: 64%;
  min-height: 5px;
  border-radius: 7px 7px 0 0
}

.dashboard-colour-columns b {
  font-size: 10px
}

.dashboard-colour-columns span {
  font-size: 9px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.dashboard-mini-line {
  height: 170px;
  padding: 5px
}

.dashboard-mini-line svg {
  width: 100%;
  height: 140px;
  overflow: visible
}

.dashboard-mini-line polyline {
  fill: none;
  stroke: #2563eb;
  stroke-width: 2.4;
  vector-effect: non-scaling-stroke
}

.dashboard-mini-line circle {
  fill: #ec4899;
  stroke: #fff;
  stroke-width: 1;
  vector-effect: non-scaling-stroke
}

.dashboard-mini-line>div {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  font-size: 9px;
  color: var(--muted)
}

.dashboard-mini-line>div span:last-child {
  text-align: right
}

.dashboard-mini-line>div b {
  font-size: 10px;
  color: var(--ink)
}

[data-theme="dark"] .report-columns-colour>div>div,
[data-theme="dark"] .dashboard-colour-columns>div>div {
  background: #22364a
}

[data-theme="dark"] .report-lollipop>div>div {
  background: #294057
}

[data-theme="dark"] .report-lollipop em {
  box-shadow: 0 0 0 4px #142638
}

[data-theme="dark"] .dashboard-mini-line>div b {
  color: #edf5ff
}

@media(max-width:920px), (max-device-width: 920px) {

  .report-gallery,
  .dashboard-chart-strip {
    grid-template-columns: 1fr
  }

  .report-gallery .report-wide {
    grid-column: auto
  }

  .report-lollipop>div {
    grid-template-columns: minmax(90px, 120px) 1fr 38px
  }

  .dashboard-colour-columns {
    overflow-x: auto
  }

  .dashboard-colour-columns>div {
    min-width: 62px
  }
}

/* V40 clean navigation, academic cycle and investiture */
.side-link {
  border-radius: 12px;
  transition: background .16s ease, color .16s ease, transform .16s ease, border-color .16s ease
}

.side-link:hover {
  transform: translateX(2px);
  background: rgba(30, 58, 95, .07)
}

.side-link.active {
  box-shadow: inset 3px 0 0 #f08a00;
  background: linear-gradient(90deg, rgba(240, 138, 0, .11), rgba(30, 58, 95, .06))
}

.academic-cycle-panel {
  padding: 20px 22px
}

.academic-cycle-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 16px
}

.academic-cycle-head h3 {
  margin: 3px 0 4px
}

.academic-cycle-head p {
  margin: 0;
  color: var(--muted, #667085)
}

.academic-cycle-badge {
  display: inline-flex;
  padding: 7px 11px;
  border-radius: 999px;
  background: #fff3df;
  color: #a65300;
  font-weight: 700;
  white-space: nowrap
}

.academic-cycle-form {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) auto;
  gap: 12px;
  align-items: end
}

.academic-cycle-form label {
  display: grid;
  gap: 6px;
  font-weight: 600
}

.investiture-subtabs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 14px 0 18px
}

.investiture-subtabs a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid #d8e0e8;
  border-radius: 12px;
  text-decoration: none;
  color: #183b63;
  background: #fff;
  font-weight: 700
}

.investiture-subtabs a b {
  min-width: 24px;
  text-align: center;
  padding: 2px 7px;
  border-radius: 999px;
  background: #edf3f8
}

.investiture-subtabs a.active {
  border-color: #f08a00;
  box-shadow: 0 5px 16px rgba(30, 58, 95, .08)
}

[data-portal-theme="dark"] .academic-cycle-badge {
  background: #3a2b17;
  color: #ffc36b
}

[data-portal-theme="dark"] .investiture-subtabs a {
  background: #152231;
  border-color: #314255;
  color: #e7eef7
}

[data-portal-theme="dark"] .investiture-subtabs a b {
  background: #223449
}

@media(max-width:760px), (max-device-width: 760px) {
  .academic-cycle-panel {
    padding: 16px
  }

  .academic-cycle-head {
    gap: 10px
  }

  .academic-cycle-form {
    grid-template-columns: 1fr
  }

  .academic-cycle-form .btn {
    width: 100%
  }

  .investiture-subtabs {
    display: grid;
    grid-template-columns: 1fr 1fr
  }

  .investiture-subtabs a {
    justify-content: space-between
  }

  .side-link:hover {
    transform: none
  }
}

.dashboard-admin-tabs {
  display: flex;
  gap: 8px;
  margin: 0 0 14px;
  padding: 5px;
  width: max-content;
  max-width: 100%;
  border: 1px solid #dbe3eb;
  border-radius: 13px;
  background: #f5f8fb
}

.dashboard-admin-tabs a {
  padding: 8px 13px;
  border-radius: 9px;
  text-decoration: none;
  color: #52677d;
  font-weight: 700
}

.dashboard-admin-tabs a:hover,
.dashboard-admin-tabs a.active {
  background: #fff;
  color: #173b64;
  box-shadow: 0 3px 10px rgba(16, 42, 67, .08)
}

[data-portal-theme="dark"] .dashboard-admin-tabs {
  background: #101b29;
  border-color: #2b3d50
}

[data-portal-theme="dark"] .dashboard-admin-tabs a {
  color: #aebed0
}

[data-portal-theme="dark"] .dashboard-admin-tabs a:hover,
[data-portal-theme="dark"] .dashboard-admin-tabs a.active {
  background: #1b2b3d;
  color: #fff
}

@media(max-width:760px), (max-device-width: 760px) {
  .dashboard-admin-tabs {
    width: 100%
  }

  .dashboard-admin-tabs a {
    flex: 1;
    text-align: center
  }
}


/* V41 scouts filters: compact, useful controls only */
.portal-body .scouts-filter-grid {
  display: grid !important;
  grid-template-columns: minmax(210px, 1.35fr) repeat(5, minmax(118px, .72fr)) auto !important;
  gap: 8px !important;
  align-items: end !important;
  margin-bottom: 14px !important;
}

.portal-body .scouts-filter-grid .filter-search {
  grid-column: auto !important;
  max-width: 330px !important
}

.portal-body .scouts-filter-grid .filter-rows {
  max-width: 105px !important
}

.portal-body .scouts-filter-grid label>span {
  font-size: 11px !important;
  margin: 0 0 2px !important
}

.portal-body .scouts-filter-grid input,
.portal-body .scouts-filter-grid select {
  height: 36px !important;
  min-height: 36px !important;
  padding: 6px 9px !important;
  font-size: 12.5px !important;
  border-radius: 8px !important
}

.portal-body .scouts-filter-grid .filter-buttons {
  width: auto !important;
  display: flex !important;
  gap: 6px !important
}

.portal-body .scouts-filter-grid .filter-buttons .btn {
  height: 36px !important;
  min-height: 36px !important;
  padding: 6px 10px !important;
  font-size: 12px !important
}

.portal-body .scouts-fit-table .c-year {
  width: 1% !important;
  white-space: nowrap !important;
  text-align: center !important
}

.portal-body .scouts-fit-table th:nth-child(8),
.portal-body .scouts-fit-table td[data-label="Year of study"] {
  white-space: nowrap !important;
  width: 1% !important
}

@media(max-width:1280px), (max-device-width: 1280px) {
  .portal-body .scouts-filter-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important
  }

  .portal-body .scouts-filter-grid .filter-search {
    max-width: none !important;
    grid-column: span 2 !important
  }

  .portal-body .scouts-filter-grid .filter-rows {
    max-width: none !important
  }
}

@media(max-width:820px), (max-device-width: 820px) {
  .portal-body .scouts-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important
  }

  .portal-body .scouts-filter-grid .filter-search {
    grid-column: 1/-1 !important
  }

  .portal-body .scouts-filter-grid .filter-buttons {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important
  }
}

@media(max-width:520px), (max-device-width: 520px) {
  .portal-body .scouts-filter-grid {
    grid-template-columns: 1fr !important
  }

  .portal-body .scouts-filter-grid .filter-search {
    grid-column: auto !important
  }
}


/* V42: collapsible academic cycle + limited admin-style Scout Leader */
.academic-cycle-disclosure {
  padding: 0 !important;
  overflow: hidden
}

.academic-cycle-disclosure>summary {
  list-style: none
}

.academic-cycle-disclosure>summary::-webkit-details-marker {
  display: none
}

.academic-cycle-toggle {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 15px 18px;
  cursor: pointer;
  background: var(--panel, #fff);
  border-radius: inherit;
  user-select: none
}

.academic-cycle-toggle:hover {
  background: color-mix(in srgb, var(--panel, #fff) 94%, #1e3a5f 6%)
}

.academic-cycle-toggle-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: #eaf1f8;
  color: #173b67;
  font-weight: 900;
  transition: transform .2s ease
}

.academic-cycle-disclosure[open] .academic-cycle-toggle-icon {
  transform: rotate(180deg)
}

.academic-cycle-toggle>span:nth-child(2) {
  display: flex;
  align-items: baseline;
  gap: 9px;
  min-width: 0;
  flex-wrap: wrap
}

.academic-cycle-toggle small {
  color: var(--muted, #667085);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em
}

.academic-cycle-toggle strong {
  font-size: 1rem;
  color: var(--text, #0f2f57)
}

.academic-cycle-toggle em {
  font-style: normal;
  color: var(--muted, #667085);
  font-size: .88rem
}

.academic-cycle-content {
  padding: 18px 20px 20px;
  border-top: 1px solid var(--border, #dfe6ee)
}

.scout-leader-admin-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 14px;
  padding: 11px 14px;
  border: 1px solid #c9d8ea;
  border-radius: 12px;
  background: #f4f8fc;
  color: #173b67
}

.scout-leader-admin-banner span {
  padding: 5px 8px;
  border-radius: 999px;
  background: #173b67;
  color: #fff;
  font-size: .75rem;
  font-weight: 800
}

.scout-leader-admin-banner strong {
  font-size: .95rem
}

.scout-leader-admin-banner small {
  color: #63758a
}

[data-portal-theme="dark"] .academic-cycle-toggle {
  background: #111d29
}

[data-portal-theme="dark"] .academic-cycle-toggle:hover {
  background: #162534
}

[data-portal-theme="dark"] .academic-cycle-toggle-icon {
  background: #203449;
  color: #d7e8fb
}

[data-portal-theme="dark"] .academic-cycle-toggle strong {
  color: #eef6ff
}

[data-portal-theme="dark"] .academic-cycle-content {
  border-top-color: #293b4c
}

[data-portal-theme="dark"] .scout-leader-admin-banner {
  background: #132334;
  border-color: #2c4861;
  color: #e5f1ff
}

[data-portal-theme="dark"] .scout-leader-admin-banner span {
  background: #315d8b
}

[data-portal-theme="dark"] .scout-leader-admin-banner small {
  color: #a9bbcd
}

@media(max-width:700px), (max-device-width: 700px) {
  .academic-cycle-toggle {
    grid-template-columns: auto 1fr;
    padding: 13px 14px
  }

  .academic-cycle-toggle .academic-cycle-badge {
    display: none
  }

  .academic-cycle-toggle>span:nth-child(2) {
    display: grid;
    gap: 2px
  }

  .academic-cycle-content {
    padding: 14px
  }

  .scout-leader-admin-banner {
    align-items: flex-start
  }

  .scout-leader-admin-banner small {
    width: 100%
  }
}

/* V44 crew profile pictures */
.crew-photo-mark {
  overflow: hidden;
  position: relative
}

.crew-photo-mark img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover
}

.crew-overview-card header {
  position: relative
}

.crew-photo-editor {
  margin-left: auto;
  position: relative
}

.crew-photo-editor>summary {
  list-style: none;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface, #fff);
  cursor: pointer;
  font-size: 14px
}

.crew-photo-editor>summary::-webkit-details-marker {
  display: none
}

.crew-photo-editor form {
  position: absolute;
  right: 0;
  top: 36px;
  z-index: 20;
  width: 250px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 14px 30px rgba(16, 42, 67, .18)
}

.crew-photo-editor form label {
  display: grid;
  gap: 6px;
  font-size: 12px
}

.crew-photo-editor form input[type=file] {
  width: 100%;
  font-size: 11px
}

.crew-photo-editor form>div {
  display: flex;
  gap: 7px;
  margin-top: 10px
}

.crew-overview-card .crew-photo-mark {
  width: 44px;
  height: 44px;
  flex-basis: 44px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .8), 0 0 0 3px var(--border)
}

html[data-portal-theme="dark"] .portal-body .crew-photo-editor form,
html[data-portal-theme="dark"] .portal-body .crew-photo-editor>summary {
  background: #172432;
  color: #e9f0f7
}

@media(max-width:620px), (max-device-width: 620px) {
  .crew-overview-card .crew-photo-mark {
    width: 48px;
    height: 48px;
    flex-basis: 48px
  }

  .crew-photo-editor form {
    right: -6px;
    width: min(260px, calc(100vw - 70px))
  }
}

/* V45 compact Landing Page > Pictures & video editor */
.portal-body .settings-media-login-preview {
  width: min(360px, 100%);
  height: 160px;
  max-width: 360px;
  margin: 10px 0 14px;
  overflow: hidden;
  border: 1px solid var(--border, #d7dee6);
  border-radius: 12px;
  background: #eef2f6;
  box-shadow: none;
}

.portal-body .settings-media-login-preview img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center
}

.portal-body .homepage-media-panel {
  max-width: 1180px
}

.portal-body .homepage-media-grid {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px
}

.portal-body .homepage-media-card {
  border-radius: 12px;
  box-shadow: none
}

.portal-body .homepage-media-card .homepage-media-preview {
  height: 118px;
  min-height: 118px;
  max-height: 118px
}

.portal-body .homepage-media-card .homepage-media-preview img,
.portal-body .homepage-media-card .homepage-media-preview video {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.portal-body .homepage-media-info {
  padding: 11px;
  gap: 8px
}

.portal-body .homepage-media-info h3 {
  font-size: 13px;
  margin: 5px 0 2px;
  line-height: 1.3
}

.portal-body .homepage-media-info p {
  font-size: 10px
}

.portal-body .media-upload-form {
  padding-top: 8px;
  grid-template-columns: minmax(240px, 520px) auto;
  gap: 10px;
  align-items: end
}

.portal-body .media-upload-form .btn {
  min-height: 40px
}

.portal-body .homepage-selected-media {
  max-width: 520px
}

@media(max-width:760px), (max-device-width: 760px) {
  .portal-body .settings-media-login-preview {
    width: 100%;
    max-width: none;
    height: 140px
  }

  .portal-body .homepage-media-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px
  }

  .portal-body .homepage-media-card .homepage-media-preview {
    height: 96px;
    min-height: 96px;
    max-height: 96px
  }

  .portal-body .homepage-media-info {
    padding: 9px
  }

  .portal-body .media-upload-form {
    grid-template-columns: 1fr
  }
}

@media(max-width:430px), (max-device-width: 430px) {
  .portal-body .homepage-media-grid {
    grid-template-columns: 1fr
  }

  .portal-body .homepage-media-card .homepage-media-preview {
    height: 130px;
    min-height: 130px;
    max-height: 130px
  }
}

html[data-portal-theme="dark"] .portal-body .settings-media-login-preview {
  background: #111b25;
  border-color: #33485c
}

/* V46 finance ledger */
.finance-tabs {
  display: inline-flex;
  gap: 6px;
  padding: 5px;
  margin: 0 0 18px;
  background: var(--panel-soft, #edf2f7);
  border: 1px solid var(--line, #d9e1ea);
  border-radius: 14px
}

.finance-tabs a {
  min-width: 120px;
  padding: 10px 18px;
  text-align: center;
  text-decoration: none;
  color: var(--text-muted, #53657a);
  font-weight: 700;
  border-radius: 10px
}

.finance-tabs a.active {
  background: var(--panel, #fff);
  color: var(--navy, #12375f);
  box-shadow: 0 3px 12px rgba(20, 42, 72, .09)
}

.finance-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px
}

.finance-form label {
  display: grid;
  gap: 6px
}

.finance-form label>span {
  font-size: .82rem;
  font-weight: 600;
  color: var(--text-muted, #56677b)
}

.finance-form input,
.finance-form select,
.finance-form textarea {
  width: 100%
}

.finance-wide {
  grid-column: 1/-1
}

.finance-evidence-message {
  display: block;
  max-width: 330px;
  white-space: pre-wrap;
  word-break: break-word
}

.finance-kpis {
  margin-bottom: 18px
}

.finance-deficit {
  font-weight: 800;
  color: #b42318
}

.finance-report-toolbar {
  align-items: end
}

.finance-report-toolbar form {
  display: flex;
  align-items: end;
  gap: 10px
}

.finance-report-toolbar label {
  display: grid;
  gap: 5px
}

.finance-report-toolbar select {
  min-width: 120px
}

.tag.income {
  background: #e8f7ef;
  color: #087443
}

.tag.expense {
  background: #fff0ee;
  color: #b42318
}

.table-wrap td small {
  display: block;
  margin-top: 3px;
  color: var(--text-muted, #66778b)
}

@media(max-width:900px), (max-device-width: 900px) {
  .finance-form {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

@media(max-width:620px), (max-device-width: 620px) {
  .finance-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 100%
  }

  .finance-tabs a {
    min-width: 0;
    padding: 9px 7px;
    font-size: .82rem
  }

  .finance-form {
    grid-template-columns: 1fr
  }

  .finance-wide {
    grid-column: auto
  }

  .finance-report-toolbar {
    display: grid !important;
    grid-template-columns: 1fr
  }

  .finance-report-toolbar form,
  .finance-report-toolbar .btn {
    width: 100%
  }

  .finance-report-toolbar select {
    width: 100%
  }
}

html[data-portal-theme="dark"] .finance-tabs {
  background: #111d29;
  border-color: #2a3949
}

html[data-portal-theme="dark"] .finance-tabs a.active {
  background: #1a2a3a;
  color: #fff
}

html[data-portal-theme="dark"] .finance-deficit {
  color: #ff8b84
}

/* V49 executive workspace sub-tabs: polished segmented navigation */
.portal-body .workspace-tab-shell {
  width: 100%;
  margin: 0 0 18px;
  padding: 6px;
  border: 1px solid var(--border, #d9e1ea);
  border-radius: 16px;
  background: linear-gradient(180deg, #f7f9fc 0%, #eef3f8 100%);
  box-shadow: 0 3px 12px rgba(15, 38, 66, .04);
}

.portal-body .workspace-tabs {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  gap: 7px !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.portal-body .workspace-tabs>a {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 11px !important;
  min-width: 0 !important;
  min-height: 58px !important;
  padding: 9px 13px !important;
  border: 1px solid transparent !important;
  border-radius: 11px !important;
  background: transparent !important;
  color: #52677c !important;
  text-align: left !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease !important;
}

.portal-body .workspace-tabs>a:hover {
  background: rgba(255, 255, 255, .68) !important;
  border-color: #dce5ee !important;
  transform: translateY(-1px) !important;
}

.portal-body .workspace-tabs>a.active {
  background: #fff !important;
  border-color: #d7e1ec !important;
  color: #12375f !important;
  box-shadow: 0 5px 15px rgba(20, 48, 78, .09) !important;
}

.portal-body .workspace-tabs>a.active::after {
  content: "";
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: -1px;
  height: 3px;
  border-radius: 999px 999px 0 0;
  background: #ef8b00;
}

.portal-body .workspace-tab-icon {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #e8eef5;
  color: #234c78;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

.portal-body .workspace-tabs>a.active .workspace-tab-icon {
  background: #173f6c;
  color: #fff;
}

.portal-body .workspace-tab-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.portal-body .workspace-tab-copy strong {
  margin: 0;
  color: inherit;
  font-size: 13.5px;
  line-height: 1.2;
  font-weight: 700;
}

.portal-body .workspace-tab-copy small {
  color: #7b8998;
  font-size: 10.5px;
  line-height: 1.2;
  font-weight: 500;
}

.portal-body .workspace-tabs>a.active .workspace-tab-copy small {
  color: #60768e
}

html[data-portal-theme="dark"] .portal-body .workspace-tab-shell {
  background: linear-gradient(180deg, #111d29 0%, #0e1823 100%);
  border-color: #2d3e50;
  box-shadow: none;
}

html[data-portal-theme="dark"] .portal-body .workspace-tabs>a {
  color: #aebdcb !important
}

html[data-portal-theme="dark"] .portal-body .workspace-tabs>a:hover {
  background: #172636 !important;
  border-color: #2d4257 !important;
}

html[data-portal-theme="dark"] .portal-body .workspace-tabs>a.active {
  background: #1a2b3c !important;
  border-color: #36516a !important;
  color: #fff !important;
  box-shadow: 0 5px 15px rgba(0, 0, 0, .18) !important;
}

html[data-portal-theme="dark"] .portal-body .workspace-tab-icon {
  background: #223549;
  color: #bed2e7
}

html[data-portal-theme="dark"] .portal-body .workspace-tabs>a.active .workspace-tab-icon {
  background: #315f8e;
  color: #fff
}

html[data-portal-theme="dark"] .portal-body .workspace-tab-copy small {
  color: #8fa2b6
}

html[data-portal-theme="dark"] .portal-body .workspace-tabs>a.active .workspace-tab-copy small {
  color: #b4c4d4
}

@media(max-width:720px), (max-device-width: 720px) {
  .portal-body .workspace-tab-shell {
    padding: 5px;
    border-radius: 14px
  }

  .portal-body .workspace-tabs {
    grid-template-columns: 1fr !important;
    gap: 5px !important
  }

  .portal-body .workspace-tabs>a {
    min-height: 52px !important;
    padding: 8px 10px !important
  }

  .portal-body .workspace-tab-icon {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
    border-radius: 9px
  }

  .portal-body .workspace-tab-copy strong {
    font-size: 13px
  }

  .portal-body .workspace-tab-copy small {
    font-size: 10px
  }

  .portal-body .workspace-tabs>a.active::after {
    left: 10px;
    right: auto;
    top: 9px;
    bottom: 9px;
    width: 3px;
    height: auto;
    border-radius: 999px
  }
}

/* V50: executive workspace tabs match Finance; official documentation cards */
.portal-body .workspace-finance-tabs {
  margin: 0 0 18px !important
}

.portal-body .workspace-finance-tabs>a {
  display: flex;
  align-items: center;
  justify-content: center
}

.portal-body .workspace-official-records {
  margin: 0 0 16px
}

.portal-body .workspace-official-card {
  border-color: #cbd9e8;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%)
}

.portal-body .workspace-document-list-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 18px 0 10px;
  padding: 0 2px;
  color: var(--navy, #12375f)
}

.portal-body .workspace-document-list-head strong {
  font-size: 1rem
}

.portal-body .workspace-document-list-head span {
  font-size: .82rem;
  color: var(--text-muted, #66778b)
}

html[data-portal-theme="dark"] .portal-body .workspace-official-card {
  background: #152333;
  border-color: #2b3a4c
}

html[data-portal-theme="dark"] .portal-body .workspace-document-list-head {
  color: #e7eef6
}

@media(max-width:620px), (max-device-width: 620px) {
  .portal-body .workspace-finance-tabs {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: 100% !important
  }

  .portal-body .workspace-finance-tabs>a {
    min-width: 0 !important;
    padding: 9px 7px !important
  }

  .portal-body .workspace-document-list-head {
    display: grid;
    gap: 2px
  }
}

/* V56 payment entry + installment ledger */
.payment-entry-card {
  margin: 14px 0 16px;
  padding: 16px;
  border: 1px solid var(--border, #dce3eb);
  border-radius: 14px;
  background: linear-gradient(180deg, #fbfdff, #f6f9fc);
  display: grid;
  grid-template-columns: minmax(220px, .8fr) minmax(0, 2fr);
  gap: 18px;
  align-items: start
}

.payment-entry-card h4 {
  margin: 2px 0 5px;
  color: #173f70;
  font-size: 16px
}

.payment-entry-card p {
  margin: 0;
  color: #66788b
}

.payment-entry-form {
  margin: 0
}

.payment-history-summary {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 12px
}

.payment-history-summary span {
  padding: 9px 12px;
  border: 1px solid var(--border, #dce3eb);
  border-radius: 10px;
  background: #f8fafc
}

.payment-history-summary strong {
  margin-left: 6px;
  color: #173f70
}

.payment-ledger-panel .table-wrap table th,
.payment-ledger-panel .table-wrap table td {
  white-space: nowrap
}

.payment-ledger-panel .table-wrap table td:first-child {
  white-space: normal
}

html[data-portal-theme="dark"] .payment-entry-card {
  background: linear-gradient(180deg, #162333, #111b28);
  border-color: #314258
}

html[data-portal-theme="dark"] .payment-entry-card h4,
html[data-portal-theme="dark"] .payment-history-summary strong {
  color: var(--dark-heading, #eef5ff)
}

html[data-portal-theme="dark"] .payment-entry-card p {
  color: #aebdce
}

html[data-portal-theme="dark"] .payment-history-summary span {
  background: #162333;
  border-color: #314258
}

@media(max-width:800px), (max-device-width: 800px) {
  .payment-entry-card {
    grid-template-columns: 1fr
  }

  .payment-ledger-panel .payment-mini-stats {
    width: 100%
  }

  .payment-entry-form .span-2 {
    grid-column: auto
  }
}

/* V58 bulk registration/renewal payment entry */
.payment-bulk-toolbar {
  margin: 10px 0 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap
}

.payment-bulk-toolbar span {
  font-size: 13px;
  color: #66788b
}

.bulk-payment-dialog {
  width: min(1500px, 96vw);
  max-width: none
}

.bulk-payment-form {
  padding: 0
}

.bulk-payment-form .modal-head {
  padding: 18px 20px;
  border-bottom: 1px solid var(--border, #dce3eb)
}

.bulk-payment-head,
.bulk-payment-row {
  display: grid;
  grid-template-columns: minmax(240px, 1.7fr) minmax(110px, .7fr) minmax(180px, 1fr) minmax(180px, 1fr) minmax(170px, 1fr) 42px;
  gap: 10px;
  align-items: end
}

.bulk-payment-head {
  padding: 12px 20px 6px;
  font-size: 12px;
  font-weight: 700;
  color: #5e7186
}

.bulk-payment-rows {
  padding: 0 20px;
  max-height: 58vh;
  overflow: auto
}

.bulk-payment-row {
  padding: 10px 0;
  border-bottom: 1px solid var(--border, #e2e8f0)
}

.bulk-payment-row label {
  display: block
}

.bulk-payment-row label>span {
  display: none
}

.bulk-payment-row input,
.bulk-payment-row select {
  width: 100%;
  min-width: 0
}

.bulk-payment-actions {
  padding: 15px 20px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  border-top: 1px solid var(--border, #dce3eb)
}

.bulk-payment-actions .btn.primary:last-child {
  margin-left: auto
}

.bulk-remove-row {
  height: 42px;
  min-width: 42px;
  padding: 0;
  font-size: 20px
}

html[data-portal-theme="dark"] .payment-bulk-toolbar span {
  color: #aebdce
}

html[data-portal-theme="dark"] .bulk-payment-head {
  color: #aebdce
}

@media(max-width:1000px), (max-device-width: 1000px) {
  .bulk-payment-head {
    display: none
  }

  .bulk-payment-row {
    grid-template-columns: 1fr 1fr
  }

  .bulk-payment-row label>span {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: #66788b;
    margin-bottom: 4px
  }

  .bulk-payment-row label:first-child {
    grid-column: 1/-1
  }

  .bulk-remove-row {
    align-self: end
  }

  .bulk-payment-actions .btn.primary:last-child {
    margin-left: 0
  }
}

@media(max-width:620px), (max-device-width: 620px) {
  .bulk-payment-dialog {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    border-radius: 0
  }

  .bulk-payment-row {
    grid-template-columns: 1fr
  }

  .bulk-payment-row label:first-child {
    grid-column: auto
  }

  .bulk-payment-rows {
    max-height: 67vh
  }

  .bulk-payment-actions {
    position: sticky;
    bottom: 0;
    background: var(--surface, #fff)
  }

  .bulk-payment-actions .btn {
    width: 100%
  }
}

/* V59 visible multi-member payment recorder */
.payment-multi-entry {
  margin: 14px 0 18px;
  border: 1px solid var(--border, #dce3eb);
  border-radius: 16px;
  background: var(--surface, #fff);
  overflow: hidden
}

.payment-multi-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 18px;
  padding: 18px 18px 14px;
  background: linear-gradient(180deg, rgba(17, 65, 110, .045), rgba(255, 255, 255, 0));
  border-bottom: 1px solid var(--border, #e1e7ee)
}

.payment-multi-head h4 {
  margin: 2px 0 4px;
  font-size: 18px
}

.payment-multi-head p {
  margin: 0;
  color: #66788b
}

.payment-multi-tools {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap
}

.payment-multi-tools input[type=search] {
  width: 260px;
  min-width: 180px
}

.payment-multi-table-wrap {
  max-height: 430px;
  overflow: auto
}

.payment-multi-table {
  margin: 0
}

.payment-multi-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface-soft, #f5f8fb)
}

.payment-multi-table td,
.payment-multi-table th {
  vertical-align: middle
}

.payment-check-col {
  width: 66px;
  text-align: center
}

.payment-multi-check {
  width: 18px;
  height: 18px;
  accent-color: #123f6d
}

.payment-multi-row {
  transition: background .15s ease
}

.payment-multi-row.selected {
  background: rgba(20, 75, 125, .055)
}

.payment-multi-row input[type=text],
.payment-multi-row input[type=number],
.payment-multi-row input[type=datetime-local],
.payment-multi-row input:not([type]) {
  min-width: 135px;
  height: 38px;
  padding: 8px 9px
}

.payment-multi-row input:disabled {
  opacity: .5;
  background: #f4f6f8
}

.payment-multi-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-top: 1px solid var(--border, #e1e7ee);
  background: var(--surface-soft, #f8fafc)
}

.payment-multi-footer span {
  margin-right: auto;
  font-weight: 700;
  color: #40566e
}

html[data-portal-theme="dark"] .payment-multi-entry {
  background: #111c28;
  border-color: #2a3b4d
}

html[data-portal-theme="dark"] .payment-multi-head {
  background: linear-gradient(180deg, rgba(69, 135, 197, .09), rgba(17, 28, 40, 0));
  border-color: #2a3b4d
}

html[data-portal-theme="dark"] .payment-multi-head p {
  color: #aebdce
}

html[data-portal-theme="dark"] .payment-multi-table th,
html[data-portal-theme="dark"] .payment-multi-footer {
  background: #162330
}

html[data-portal-theme="dark"] .payment-multi-row.selected {
  background: rgba(66, 139, 202, .12)
}

html[data-portal-theme="dark"] .payment-multi-row input:disabled {
  background: #182431
}

@media(max-width:900px), (max-device-width: 900px) {
  .payment-multi-head {
    align-items: stretch;
    flex-direction: column
  }

  .payment-multi-tools input[type=search] {
    width: 100%
  }

  .payment-multi-table-wrap {
    max-height: 56vh
  }

  .payment-multi-table {
    min-width: 1050px
  }
}

@media(max-width:620px), (max-device-width: 620px) {
  .payment-multi-entry {
    border-radius: 12px
  }

  .payment-multi-head {
    padding: 14px
  }

  .payment-multi-tools .btn {
    flex: 1
  }

  .payment-multi-footer {
    position: sticky;
    bottom: 0;
    z-index: 4
  }

  .payment-multi-footer .btn {
    flex: 1
  }
}

/* V61 — Saved SMS contact groups */
.sms-groups-shell {
  display: grid;
  grid-template-columns: minmax(260px, 330px) minmax(0, 1fr);
  gap: 18px;
  align-items: start
}

.sms-groups-sidebar,
.sms-group-detail {
  min-width: 0
}

.sms-group-create {
  padding-top: 8px;
  border-top: 1px solid var(--line, #e4e8ee)
}

.sms-group-list {
  display: grid;
  gap: 8px;
  margin-top: 16px;
  max-height: 560px;
  overflow: auto;
  padding-right: 3px
}

.sms-group-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--line, #e4e8ee);
  border-radius: 13px;
  padding: 12px 13px;
  background: var(--panel, #fff);
  transition: .18s ease
}

.sms-group-list-item:hover {
  border-color: #9eb4cf;
  transform: translateY(-1px)
}

.sms-group-list-item.active {
  border-color: #234b7d;
  box-shadow: 0 0 0 2px rgba(35, 75, 125, .08);
  background: #f6f9fc
}

.sms-group-list-item span {
  display: grid;
  gap: 3px;
  min-width: 0
}

.sms-group-list-item strong {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.sms-group-list-item small {
  color: var(--muted, #6b7280)
}

.sms-group-list-item b {
  min-width: 32px;
  height: 32px;
  border-radius: 10px;
  background: #eef3f8;
  display: grid;
  place-items: center;
  color: #183f70
}

.sms-group-add-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 14px 0 18px
}

.sms-group-add-card {
  border: 1px solid var(--line, #e4e8ee);
  border-radius: 16px;
  background: #fafbfd;
  padding: 16px
}

.sms-group-add-card>div:first-child {
  display: grid;
  gap: 3px
}

.sms-group-add-card>div:first-child small {
  color: var(--muted, #6b7280)
}

.sms-group-send-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  margin: 0 0 16px;
  border-radius: 14px;
  background: #eef4fb;
  border: 1px solid #dbe6f2
}

.sms-group-send-strip>div {
  display: grid;
  gap: 3px
}

.sms-group-send-strip span {
  color: var(--muted, #6b7280);
  font-size: .9rem
}

.field-help {
  display: block;
  margin-top: 6px;
  color: var(--muted, #6b7280)
}

.optional {
  font-weight: 400;
  color: var(--muted, #6b7280);
  font-size: .85em
}

.btn.disabled {
  pointer-events: none;
  opacity: .5
}

html[data-theme="dark"] .sms-group-list-item.active,
body.dark-mode .sms-group-list-item.active {
  background: #172536
}

html[data-theme="dark"] .sms-group-add-card,
body.dark-mode .sms-group-add-card {
  background: #101b28
}

html[data-theme="dark"] .sms-group-send-strip,
body.dark-mode .sms-group-send-strip {
  background: #132235;
  border-color: #263a50
}

html[data-theme="dark"] .sms-group-list-item b,
body.dark-mode .sms-group-list-item b {
  background: #1b2d40;
  color: #d8e8fb
}

@media(max-width:900px), (max-device-width: 900px) {
  .sms-groups-shell {
    grid-template-columns: 1fr
  }

  .sms-group-list {
    max-height: 280px
  }

  .sms-group-add-grid {
    grid-template-columns: 1fr
  }
}

@media(max-width:560px), (max-device-width: 560px) {
  .sms-group-send-strip {
    align-items: stretch;
    flex-direction: column
  }

  .sms-group-send-strip .btn {
    width: 100%;
    text-align: center
  }

  .sms-group-add-card {
    padding: 13px
  }
}

/* 2026-09-05 Edit Role permissions modal viewport/scroll fix */
.portal-body dialog.role-permission-dialog {
  width: min(1260px, calc(100vw - 40px)) !important;
  max-width: none !important;
  height: min(860px, calc(100dvh - 40px)) !important;
  max-height: calc(100dvh - 40px) !important;
  margin: auto !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 16px !important;
  box-sizing: border-box !important;
}

.portal-body .role-permission-dialog .role-edit-form {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.portal-body .role-permission-dialog .role-permission-head {
  flex: 0 0 auto;
  margin: 0 !important;
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--border, #dfe5eb);
  background: var(--white, #fff);
  z-index: 3;
}

.portal-body .role-permission-dialog .role-permission-head p {
  margin: 3px 0 0;
  color: var(--muted, #687582);
  font-size: 12px;
}

.portal-body .role-permission-dialog .role-permission-scroll {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  padding: 18px 22px 24px;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  box-sizing: border-box;
}

.portal-body .role-permission-dialog .role-permission-scroll>* {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.portal-body .role-permission-dialog .permission-card-shell,
.portal-body .role-permission-dialog .permission-category,
.portal-body .role-permission-dialog .permission-module-grid,
.portal-body .role-permission-dialog .permission-module-card,
.portal-body .role-permission-dialog .permission-action-grid {
  min-width: 0;
  max-width: 100%;
}

.portal-body .role-permission-dialog .permission-module-title>div,
.portal-body .role-permission-dialog .permission-action>span:last-child {
  min-width: 0;
  overflow-wrap: anywhere;
}

.portal-body .role-permission-dialog .role-permission-footer {
  position: static !important;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  margin: 0 !important;
  padding: 13px 22px 15px !important;
  border-top: 1px solid var(--border, #dfe5eb);
  background: var(--white, #fff) !important;
  box-shadow: 0 -7px 18px rgba(15, 35, 60, .06);
  z-index: 4;
}

html[data-portal-theme="dark"] .portal-body .role-permission-dialog .role-permission-head,
html[data-portal-theme="dark"] .portal-body .role-permission-dialog .role-permission-footer {
  background: var(--dark-surface, #17212b) !important;
  border-color: var(--dark-border, #2d3945) !important;
}

@media(max-width:540px), (max-device-width: 540px) {
  .portal-body .role-permission-dialog .permission-module-grid {
    grid-template-columns: 1fr !important
  }
}

@media(max-width:640px), (max-device-width: 640px) {
  .portal-body dialog.role-permission-dialog {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }

  .portal-body .role-permission-dialog .role-permission-head {
    padding: 14px 14px 12px
  }

  .portal-body .role-permission-dialog .role-permission-scroll {
    padding: 14px 14px 20px;
    scrollbar-gutter: auto
  }

  .portal-body .role-permission-dialog .permission-popup-toolbar {
    align-items: flex-start;
    flex-direction: column
  }

  .portal-body .role-permission-dialog .permission-popup-toolbar>div {
    width: 100%
  }

  .portal-body .role-permission-dialog .permission-popup-toolbar .btn {
    flex: 1
  }

  .portal-body .role-permission-dialog .role-permission-footer {
    padding: 10px 14px 12px !important
  }

  .portal-body .role-permission-dialog .role-permission-footer .btn {
    flex: 1
  }
}

/* 2026-09-05 stable Edit Role overlay — avoids native dialog repaint/blanking */
.role-permission-overlay[hidden] {
  display: none !important
}

.role-permission-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10050 !important;
  display: grid !important;
  place-items: center !important;
  padding: 18px !important;
  background: rgba(6, 18, 34, .66) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

html.role-permission-modal-open,
body.role-permission-modal-open {
  overflow: hidden !important
}

.role-permission-overlay>.role-permission-dialog {
  position: relative !important;
  width: min(1260px, calc(100vw - 36px)) !important;
  max-width: 1260px !important;
  height: auto !important;
  max-height: calc(100dvh - 36px) !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 16px !important;
  background: var(--white, #fff) !important;
  color: var(--text, #26313b) !important;
  box-shadow: 0 25px 80px rgba(0, 0, 0, .3) !important;
  box-sizing: border-box !important;
}

.role-permission-overlay .role-edit-form {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  gap: 0 !important;
  width: 100% !important;
  height: auto !important;
  max-height: calc(100dvh - 36px) !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: var(--white, #fff) !important;
  box-sizing: border-box !important;
}

.role-permission-overlay .role-permission-head {
  position: relative !important;
  margin: 0 !important;
  padding: 18px 22px 14px !important;
  border-bottom: 1px solid var(--border, #dfe5eb) !important;
  background: var(--white, #fff) !important;
  z-index: 2 !important;
}

.role-permission-overlay .role-permission-scroll {
  min-height: 0 !important;
  max-height: calc(100dvh - 174px) !important;
  width: 100% !important;
  padding: 18px 22px 24px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  box-sizing: border-box !important;
  background: var(--white, #fff) !important;
}

.role-permission-overlay .role-permission-footer {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 9px !important;
  margin: 0 !important;
  padding: 13px 22px 15px !important;
  border-top: 1px solid var(--border, #dfe5eb) !important;
  background: var(--white, #fff) !important;
  box-shadow: 0 -7px 18px rgba(15, 35, 60, .06) !important;
  z-index: 2 !important;
}

html[data-portal-theme="dark"] .role-permission-overlay>.role-permission-dialog,
html[data-portal-theme="dark"] .role-permission-overlay .role-edit-form,
html[data-portal-theme="dark"] .role-permission-overlay .role-permission-head,
html[data-portal-theme="dark"] .role-permission-overlay .role-permission-scroll,
html[data-portal-theme="dark"] .role-permission-overlay .role-permission-footer {
  background: var(--dark-surface, #17212b) !important;
  color: #edf3f8 !important;
  border-color: var(--dark-border, #2d3945) !important;
}

@media(max-width:540px), (max-device-width: 540px) {
  .role-permission-overlay .permission-module-grid {
    grid-template-columns: 1fr !important
  }
}

@media(max-width:640px), (max-device-width: 640px) {
  .role-permission-overlay {
    padding: 0 !important
  }

  .role-permission-overlay>.role-permission-dialog {
    width: 100vw !important;
    max-width: 100vw !important;
    max-height: 100dvh !important;
    border-radius: 0 !important
  }

  .role-permission-overlay .role-edit-form {
    max-height: 100dvh !important
  }

  .role-permission-overlay .role-permission-head {
    padding: 14px 14px 12px !important
  }

  .role-permission-overlay .role-permission-scroll {
    max-height: calc(100dvh - 150px) !important;
    padding: 14px 14px 20px !important
  }

  .role-permission-overlay .role-permission-footer {
    padding: 10px 14px 12px !important
  }

  .role-permission-overlay .role-permission-footer .btn {
    flex: 1 !important
  }
}


/* 2026-09-05 merged after stable Edit Role overlay; keep this block last. */
/* ========================================================================
   V45 — Dark theme gap fixes (chat, profile upload, scouts tabs, leadership,
   activities/events alerts, payments summary surfaces, file inputs)
   ======================================================================== */
html[data-portal-theme="dark"] .portal-body,
html[data-theme="dark"] .portal-body,
body.dark-mode .portal-body {
  --surface: var(--dark-surface) !important;
  --panel: var(--dark-surface) !important;
  --card: var(--dark-surface) !important;
  --soft: var(--dark-surface-2) !important;
  --border: var(--dark-border) !important;
  --line: var(--dark-border) !important;
  --text: var(--dark-text) !important;
  --ink: var(--dark-text) !important;
  --muted: var(--dark-muted) !important;
  --brand: var(--dark-heading) !important;
}

/* Generic file inputs inside the portal */
html[data-portal-theme="dark"] .portal-body input[type="file"],
html[data-theme="dark"] .portal-body input[type="file"],
body.dark-mode .portal-body input[type="file"] {
  background: var(--dark-surface-3) !important;
  border: 1px solid #34414e !important;
  color: var(--dark-text) !important;
  border-radius: 12px !important;
  padding: 10px 12px !important;
}

html[data-portal-theme="dark"] .portal-body input[type="file"]::file-selector-button,
html[data-theme="dark"] .portal-body input[type="file"]::file-selector-button,
body.dark-mode .portal-body input[type="file"]::file-selector-button {
  margin-right: 12px !important;
  border: 1px solid #486178 !important;
  background: #223244 !important;
  color: #eef5fb !important;
  border-radius: 9px !important;
  padding: 8px 12px !important;
  cursor: pointer !important;
}

/* Chat */
html[data-portal-theme="dark"] .portal-body .chat-app,
html[data-theme="dark"] .portal-body .chat-app,
body.dark-mode .portal-body .chat-app,
html[data-portal-theme="dark"] .portal-body .chat-sidebar,
html[data-theme="dark"] .portal-body .chat-sidebar,
body.dark-mode .portal-body .chat-sidebar,
html[data-portal-theme="dark"] .portal-body .chat-conversation,
html[data-theme="dark"] .portal-body .chat-conversation,
body.dark-mode .portal-body .chat-conversation {
  background: var(--dark-surface) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text) !important;
}

html[data-portal-theme="dark"] .portal-body .chat-sidebar-head,
html[data-theme="dark"] .portal-body .chat-sidebar-head,
body.dark-mode .portal-body .chat-sidebar-head,
html[data-portal-theme="dark"] .portal-body .chat-conversation-head,
html[data-theme="dark"] .portal-body .chat-conversation-head,
body.dark-mode .portal-body .chat-conversation-head,
html[data-portal-theme="dark"] .portal-body .chat-composer,
html[data-theme="dark"] .portal-body .chat-composer,
body.dark-mode .portal-body .chat-composer,
html[data-portal-theme="dark"] .portal-body .chat-pinned,
html[data-theme="dark"] .portal-body .chat-pinned,
body.dark-mode .portal-body .chat-pinned {
  background: var(--dark-surface-2) !important;
  border-color: #34414e !important;
  color: var(--dark-text) !important;
}

html[data-portal-theme="dark"] .portal-body .chat-search input,
html[data-theme="dark"] .portal-body .chat-search input,
body.dark-mode .portal-body .chat-search input,
html[data-portal-theme="dark"] .portal-body .chat-composer textarea,
html[data-theme="dark"] .portal-body .chat-composer textarea,
body.dark-mode .portal-body .chat-composer textarea {
  background: var(--dark-surface-3) !important;
  border-color: #34414e !important;
  color: var(--dark-text) !important;
}

html[data-portal-theme="dark"] .portal-body .chat-contact,
html[data-theme="dark"] .portal-body .chat-contact,
body.dark-mode .portal-body .chat-contact {
  color: #dbe6f0 !important
}

html[data-portal-theme="dark"] .portal-body .chat-contact:hover,
html[data-portal-theme="dark"] .portal-body .chat-contact.active,
html[data-theme="dark"] .portal-body .chat-contact:hover,
html[data-theme="dark"] .portal-body .chat-contact.active,
body.dark-mode .portal-body .chat-contact:hover,
body.dark-mode .portal-body .chat-contact.active {
  background: #22313e !important
}

html[data-portal-theme="dark"] .portal-body .chat-contact-copy strong,
html[data-theme="dark"] .portal-body .chat-contact-copy strong,
body.dark-mode .portal-body .chat-contact-copy strong,
html[data-portal-theme="dark"] .portal-body .chat-conversation-head h3,
html[data-theme="dark"] .portal-body .chat-conversation-head h3,
body.dark-mode .portal-body .chat-conversation-head h3 {
  color: var(--dark-heading) !important
}

html[data-portal-theme="dark"] .portal-body .chat-contact-copy small,
html[data-theme="dark"] .portal-body .chat-contact-copy small,
body.dark-mode .portal-body .chat-contact-copy small,
html[data-portal-theme="dark"] .portal-body .chat-sidebar-head p,
html[data-theme="dark"] .portal-body .chat-sidebar-head p,
body.dark-mode .portal-body .chat-sidebar-head p,
html[data-portal-theme="dark"] .portal-body .chat-conversation-head p,
html[data-theme="dark"] .portal-body .chat-conversation-head p,
body.dark-mode .portal-body .chat-conversation-head p,
html[data-portal-theme="dark"] .portal-body .chat-loading,
html[data-theme="dark"] .portal-body .chat-loading,
body.dark-mode .portal-body .chat-loading,
html[data-portal-theme="dark"] .portal-body .chat-empty,
html[data-theme="dark"] .portal-body .chat-empty,
body.dark-mode .portal-body .chat-empty {
  color: var(--dark-muted) !important
}

html[data-portal-theme="dark"] .portal-body .chat-bubble,
html[data-theme="dark"] .portal-body .chat-bubble,
body.dark-mode .portal-body .chat-bubble {
  background: #1a2835 !important;
  color: var(--dark-text) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .24) !important
}

html[data-portal-theme="dark"] .portal-body .chat-message.own .chat-bubble,
html[data-theme="dark"] .portal-body .chat-message.own .chat-bubble,
body.dark-mode .portal-body .chat-message.own .chat-bubble {
  background: #005c4b !important;
  color: #e9edef !important;
  border: 1px solid rgba(0, 168, 132, .3) !important
}

html[data-portal-theme="dark"] .portal-body .chat-message.own .chat-bubble p,
html[data-theme="dark"] .portal-body .chat-message.own .chat-bubble p,
body.dark-mode .portal-body .chat-message.own .chat-bubble p {
  color: #e9edef !important
}

html[data-portal-theme="dark"] .portal-body .chat-message.own .chat-bubble footer time,
html[data-theme="dark"] .portal-body .chat-message.own .chat-bubble footer time,
body.dark-mode .portal-body .chat-message.own .chat-bubble footer time {
  color: rgba(233, 237, 239, .75) !important
}

html[data-portal-theme="dark"] .portal-body .chat-bubble p,
html[data-theme="dark"] .portal-body .chat-bubble p,
body.dark-mode .portal-body .chat-bubble p,
html[data-portal-theme="dark"] .portal-body .chat-bubble footer,
html[data-theme="dark"] .portal-body .chat-bubble footer,
body.dark-mode .portal-body .chat-bubble footer {
  color: #cdd7e1 !important
}

html[data-portal-theme="dark"] .portal-body .chat-forward-dialog .modal-form,
html[data-theme="dark"] .portal-body .chat-forward-dialog .modal-form,
body.dark-mode .portal-body .chat-forward-dialog .modal-form {
  background: var(--dark-surface) !important;
  color: var(--dark-text) !important;
  border-color: var(--dark-border) !important
}

/* Profile picture/upload editor */
html[data-portal-theme="dark"] .portal-body .profile-photo,
html[data-theme="dark"] .portal-body .profile-photo,
body.dark-mode .portal-body .profile-photo,
html[data-portal-theme="dark"] .portal-body .profile-upload-preview,
html[data-theme="dark"] .portal-body .profile-upload-preview,
body.dark-mode .portal-body .profile-upload-preview {
  background: #20303d !important;
  border-color: #34414e !important
}

html[data-portal-theme="dark"] .portal-body .profile-photo-upload-row,
html[data-theme="dark"] .portal-body .profile-photo-upload-row,
body.dark-mode .portal-body .profile-photo-upload-row {
  background: var(--dark-surface) !important;
  border-color: var(--dark-border) !important;
}

html[data-portal-theme="dark"] .portal-body .profile-upload-controls p,
html[data-theme="dark"] .portal-body .profile-upload-controls p,
body.dark-mode .portal-body .profile-upload-controls p {
  color: var(--dark-muted) !important
}

html[data-portal-theme="dark"] .portal-body .profile-photo-editor,
html[data-theme="dark"] .portal-body .profile-photo-editor,
body.dark-mode .portal-body .profile-photo-editor {
  background: var(--dark-surface) !important;
  color: var(--dark-text) !important
}

html[data-portal-theme="dark"] .portal-body .profile-editor-canvas-wrap,
html[data-theme="dark"] .portal-body .profile-editor-canvas-wrap,
body.dark-mode .portal-body .profile-editor-canvas-wrap {
  background: #111a23 !important
}

html[data-portal-theme="dark"] .portal-body .profile-editor-actions,
html[data-theme="dark"] .portal-body .profile-editor-actions,
body.dark-mode .portal-body .profile-editor-actions {
  border-color: #34414e !important
}

/* Scouts status tabs */
html[data-portal-theme="dark"] .portal-body .scout-status-tabs,
html[data-theme="dark"] .portal-body .scout-status-tabs,
body.dark-mode .portal-body .scout-status-tabs {
  background: #121d26 !important;
  border-color: #30414e !important;
}

html[data-portal-theme="dark"] .portal-body .scout-status-tabs a,
html[data-theme="dark"] .portal-body .scout-status-tabs a,
body.dark-mode .portal-body .scout-status-tabs a {
  color: #b9c6d2 !important
}

html[data-portal-theme="dark"] .portal-body .scout-status-tabs a b,
html[data-theme="dark"] .portal-body .scout-status-tabs a b,
body.dark-mode .portal-body .scout-status-tabs a b {
  background: #223449 !important;
  color: #e8eff6 !important
}

html[data-portal-theme="dark"] .portal-body .scout-status-tabs a:hover,
html[data-theme="dark"] .portal-body .scout-status-tabs a:hover,
body.dark-mode .portal-body .scout-status-tabs a:hover {
  background: #1b2935 !important;
  color: #fff !important
}

html[data-portal-theme="dark"] .portal-body .scout-status-tabs a.active,
html[data-theme="dark"] .portal-body .scout-status-tabs a.active,
body.dark-mode .portal-body .scout-status-tabs a.active {
  background: #22313e !important;
  border-color: #3a5268 !important;
  color: #fff !important
}

html[data-portal-theme="dark"] .portal-body .scout-status-tabs a.active b,
html[data-theme="dark"] .portal-body .scout-status-tabs a.active b,
body.dark-mode .portal-body .scout-status-tabs a.active b {
  background: #0f1d2b !important;
  color: #fff !important
}

/* Leadership cards */
html[data-portal-theme="dark"] .portal-body .executive-role-card,
html[data-portal-theme="dark"] .portal-body .leadership-role-card,
html[data-theme="dark"] .portal-body .executive-role-card,
html[data-theme="dark"] .portal-body .leadership-role-card,
body.dark-mode .portal-body .executive-role-card,
body.dark-mode .portal-body .leadership-role-card {
  background: var(--dark-surface) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .16) !important;
}

html[data-portal-theme="dark"] .portal-body .leadership-role-card>span,
html[data-theme="dark"] .portal-body .leadership-role-card>span,
body.dark-mode .portal-body .leadership-role-card>span,
html[data-portal-theme="dark"] .portal-body .leadership-holder small,
html[data-theme="dark"] .portal-body .leadership-holder small,
body.dark-mode .portal-body .leadership-holder small,
html[data-portal-theme="dark"] .portal-body .leadership-card-foot small,
html[data-theme="dark"] .portal-body .leadership-card-foot small,
body.dark-mode .portal-body .leadership-card-foot small {
  color: var(--dark-muted) !important
}

html[data-portal-theme="dark"] .portal-body .leadership-role-card>strong,
html[data-theme="dark"] .portal-body .leadership-role-card>strong,
body.dark-mode .portal-body .leadership-role-card>strong,
html[data-portal-theme="dark"] .portal-body .leadership-holder b,
html[data-theme="dark"] .portal-body .leadership-holder b,
body.dark-mode .portal-body .leadership-holder b {
  color: var(--dark-heading) !important
}

html[data-portal-theme="dark"] .portal-body .leadership-card-foot,
html[data-theme="dark"] .portal-body .leadership-card-foot,
body.dark-mode .portal-body .leadership-card-foot {
  border-color: #34414e !important
}

html[data-portal-theme="dark"] .portal-body .leadership-holder-person .member-avatar,
html[data-theme="dark"] .portal-body .leadership-holder-person .member-avatar,
body.dark-mode .portal-body .leadership-holder-person .member-avatar {
  background: #20303d !important;
  border-color: #34414e !important;
  color: #e6eff8 !important
}

/* Warnings and notices */
html[data-portal-theme="dark"] .portal-body .warning,
html[data-portal-theme="dark"] .portal-body .notice.warning,
html[data-theme="dark"] .portal-body .warning,
html[data-theme="dark"] .portal-body .notice.warning,
body.dark-mode .portal-body .warning,
body.dark-mode .portal-body .notice.warning {
  background: #2a2415 !important;
  border: 1px solid #5b4b20 !important;
  border-left: 4px solid #c88917 !important;
  color: #f5d879 !important;
}

html[data-portal-theme="dark"] .portal-body .warning p,
html[data-portal-theme="dark"] .portal-body .notice.warning p,
html[data-theme="dark"] .portal-body .warning p,
html[data-theme="dark"] .portal-body .notice.warning p,
body.dark-mode .portal-body .warning p,
body.dark-mode .portal-body .notice.warning p {
  color: #dac98f !important
}

/* Payments */
html[data-portal-theme="dark"] .portal-body .payment-context-bar,
html[data-theme="dark"] .portal-body .payment-context-bar,
body.dark-mode .portal-body .payment-context-bar,
html[data-portal-theme="dark"] .portal-body .renewal-receipt-toolbar,
html[data-theme="dark"] .portal-body .renewal-receipt-toolbar,
body.dark-mode .portal-body .renewal-receipt-toolbar,
html[data-portal-theme="dark"] .portal-body .renewal-receipt-sample-card,
html[data-theme="dark"] .portal-body .renewal-receipt-sample-card,
body.dark-mode .portal-body .renewal-receipt-sample-card {
  background: var(--dark-surface) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text) !important;
}

html[data-portal-theme="dark"] .portal-body .payment-context-bar>div,
html[data-theme="dark"] .portal-body .payment-context-bar>div,
body.dark-mode .portal-body .payment-context-bar>div {
  border-color: #34414e !important
}

html[data-portal-theme="dark"] .portal-body .payment-context-bar span,
html[data-theme="dark"] .portal-body .payment-context-bar span,
body.dark-mode .portal-body .payment-context-bar span,
html[data-portal-theme="dark"] .portal-body .payment-context-bar label,
html[data-theme="dark"] .portal-body .payment-context-bar label,
body.dark-mode .portal-body .payment-context-bar label,
html[data-portal-theme="dark"] .portal-body .renewal-receipt-toolbar-copy p:last-child,
html[data-theme="dark"] .portal-body .renewal-receipt-toolbar-copy p:last-child,
body.dark-mode .portal-body .renewal-receipt-toolbar-copy p:last-child,
html[data-portal-theme="dark"] .portal-body .renewal-receipt-sample-card p,
html[data-theme="dark"] .portal-body .renewal-receipt-sample-card p,
body.dark-mode .portal-body .renewal-receipt-sample-card p {
  color: var(--dark-muted) !important
}

html[data-portal-theme="dark"] .portal-body .payment-context-bar strong,
html[data-theme="dark"] .portal-body .payment-context-bar strong,
body.dark-mode .portal-body .payment-context-bar strong,
html[data-portal-theme="dark"] .portal-body .renewal-receipt-toolbar-copy h3,
html[data-theme="dark"] .portal-body .renewal-receipt-toolbar-copy h3,
body.dark-mode .portal-body .renewal-receipt-toolbar-copy h3,
html[data-portal-theme="dark"] .portal-body .renewal-receipt-sample-card strong,
html[data-theme="dark"] .portal-body .renewal-receipt-sample-card strong,
body.dark-mode .portal-body .renewal-receipt-sample-card strong {
  color: var(--dark-heading) !important
}

html[data-portal-theme="dark"] .portal-body .payment-mini-stats span,
html[data-theme="dark"] .portal-body .payment-mini-stats span,
body.dark-mode .portal-body .payment-mini-stats span {
  background: var(--dark-surface-2) !important;
  border-color: #34414e !important;
  color: var(--dark-muted) !important;
}

html[data-portal-theme="dark"] .portal-body .renewal-receipt-sample-mark,
html[data-theme="dark"] .portal-body .renewal-receipt-sample-mark,
body.dark-mode .portal-body .renewal-receipt-sample-mark {
  background: #223244 !important;
  color: #9dc3ea !important
}

html[data-portal-theme="dark"] .portal-body .payment-item-card:hover,
html[data-portal-theme="dark"] .portal-body .payment-item-card.active,
html[data-theme="dark"] .portal-body .payment-item-card:hover,
html[data-theme="dark"] .portal-body .payment-item-card.active,
body.dark-mode .portal-body .payment-item-card:hover,
body.dark-mode .portal-body .payment-item-card.active {
  background: #22313e !important;
  border-color: #4a6278 !important
}

/* Light buttons inside dark cards */
html[data-portal-theme="dark"] .portal-body .btn.light,
html[data-theme="dark"] .portal-body .btn.light,
body.dark-mode .portal-body .btn.light {
  background: #1b2934 !important;
  border-color: #344654 !important;
  color: #eef5fb !important
}

html[data-portal-theme="dark"] .portal-body .btn.light:hover,
html[data-theme="dark"] .portal-body .btn.light:hover,
body.dark-mode .portal-body .btn.light:hover {
  background: #223748 !important
}

/* ========================================================================
   Attendance analytics: clean Year of Study chart — 2026-09-06
   ======================================================================== */
.portal-body .study-year-analytics-card {
  overflow: hidden
}

.portal-body .study-year-chart {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(76px, 1fr));
  gap: 12px;
  align-items: end;
  width: 100%;
  padding: 8px 0 2px;
}

.portal-body .study-year-item {
  min-width: 0;
  display: grid;
  grid-template-rows: 138px auto;
  gap: 9px;
  align-items: end;
  text-align: center;
}

.portal-body .study-year-bar-track {
  width: 100%;
  height: 138px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 12px;
  background: linear-gradient(180deg, #f8fafc, #edf2f7);
  border-radius: 10px 10px 5px 5px;
  overflow: hidden;
}

.portal-body .study-year-bar-track i {
  display: block;
  width: min(48px, 72%);
  min-height: 4px;
  border-radius: 8px 8px 0 0;
  background: linear-gradient(180deg, #168c55, #1f416a);
}

.portal-body .study-year-meta {
  display: grid;
  gap: 2px;
  min-height: 48px;
  align-content: start;
}

.portal-body .study-year-meta strong {
  color: var(--ink, #17324d);
  font-size: 12px;
  line-height: 1.15;
}

.portal-body .study-year-meta span {
  display: block;
  color: var(--ink, #17324d);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  white-space: normal;
  overflow-wrap: anywhere;
}

.portal-body .study-year-meta small {
  color: var(--muted, #667085);
  font-size: 9px;
  line-height: 1.2;
}

html[data-portal-theme="dark"] .portal-body .study-year-bar-track,
html[data-theme="dark"] .portal-body .study-year-bar-track,
body.dark-mode .portal-body .study-year-bar-track {
  background: #22364a
}

html[data-portal-theme="dark"] .portal-body .study-year-meta strong,
html[data-portal-theme="dark"] .portal-body .study-year-meta span,
html[data-theme="dark"] .portal-body .study-year-meta strong,
html[data-theme="dark"] .portal-body .study-year-meta span,
body.dark-mode .portal-body .study-year-meta strong,
body.dark-mode .portal-body .study-year-meta span {
  color: #edf5ff
}

html[data-portal-theme="dark"] .portal-body .study-year-meta small,
html[data-theme="dark"] .portal-body .study-year-meta small,
body.dark-mode .portal-body .study-year-meta small {
  color: #9fb0c3
}

@media(max-width:760px), (max-device-width: 760px) {
  .portal-body .study-year-chart {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 8px 2px 8px;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
  }

  .portal-body .study-year-item {
    flex: 0 0 76px;
    scroll-snap-align: start
  }

  .portal-body .study-year-bar-track {
    padding: 0 9px
  }
}


/* Keep every apology-review field visible and prevent long reasons from crowding the action controls. */
body.portal-body .apology-review-table {
  width: 100% !important;
  min-width: 1220px !important;
  max-width: none !important;
  table-layout: fixed !important
}

body.portal-body .apology-review-table .col-no {
  width: 3% !important
}

body.portal-body .apology-review-table .col-scout {
  width: 16% !important
}

body.portal-body .apology-review-table .col-event {
  width: 14% !important
}

body.portal-body .apology-review-table .col-reason {
  width: 27% !important
}

body.portal-body .apology-review-table .col-evidence {
  width: 7% !important
}

body.portal-body .apology-review-table .col-location {
  width: 12% !important
}

body.portal-body .apology-review-table .col-submitted {
  width: 10% !important
}

body.portal-body .apology-review-table .col-action {
  width: 11% !important
}

body.portal-body .apology-review-table th:first-child,
body.portal-body .apology-review-table td:first-child {
  width: 3% !important;
  white-space: normal !important;
  padding-left: 4px !important;
  padding-right: 4px !important
}

body.portal-body .apology-review-table th:last-child,
body.portal-body .apology-review-table td:last-child {
  width: 11% !important;
  white-space: normal !important
}

body.portal-body .apology-review-table th,
body.portal-body .apology-review-table td {
  padding: 7px 7px !important;
  vertical-align: middle !important
}

body.portal-body .apology-review-table th:nth-child(4),
body.portal-body .apology-review-table td:nth-child(4) {
  width: 27% !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  line-height: 1.42
}

body.portal-body .apology-review-table td:nth-child(2) {
  font-size: 13px
}

body.portal-body .apology-review-table td:nth-child(5),
body.portal-body .apology-review-table td:nth-child(8) {
  white-space: normal !important
}

body.portal-body .apology-review-table .apology-action-buttons {
  gap: 4px !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  white-space: nowrap !important
}

body.portal-body .apology-review-table .btn.small {
  padding: 5px 6px !important;
  font-size: 11px !important
}

/* Important notification banner, inspired by compact yellow IMPORTANT service cards. */
.portal-important-banner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  padding: 12px 16px;
  border: 1px solid #e6b934;
  border-radius: 13px;
  background: linear-gradient(135deg, #ffe36b, #f4c83d);
  color: #16243a;
  box-shadow: 0 7px 18px rgba(118, 88, 0, .12)
}

.portal-important-banner .important-bolt {
  font-size: 20px;
  line-height: 1;
  flex: 0 0 auto
}

.portal-important-banner .important-copy {
  min-width: 0;
  flex: 1
}

.portal-important-banner strong {
  display: block;
  font-size: 15px;
  line-height: 1.2
}

.portal-important-banner p {
  margin: 3px 0 0;
  font-size: 12.5px;
  line-height: 1.35;
  color: #303c4e
}

.portal-important-banner .important-pill {
  position: absolute;
  right: 10px;
  top: -9px;
  padding: 3px 7px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .04em;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .15)
}

.important-banner-preview {
  max-width: 620px;
  margin-top: 12px
}

.important-recipient-picker {
  max-height: 240px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px
}

.important-recipient-picker label {
  display: flex;
  gap: 9px;
  align-items: center;
  padding: 7px 8px;
  border-bottom: 1px solid var(--line)
}

.important-recipient-picker label:last-child {
  border-bottom: 0
}

.payment-csv-import {
  margin: 12px 0 16px;
  padding: 12px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  background: var(--surface-soft, #f7f9fb)
}

.payment-csv-import .payment-csv-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 10px;
  align-items: end
}

.payment-csv-import input[type=file] {
  width: 100%
}

@media(max-width:760px), (max-device-width: 760px) {
  .payment-csv-import .payment-csv-row {
    grid-template-columns: 1fr
  }

  .portal-important-banner {
    padding-right: 16px
  }
}

.payment-period-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  margin: 0 0 14px;
  padding: 13px 16px;
  border: 1px solid var(--border, #dce3eb);
  border-radius: 12px;
  background: var(--surface, #fff)
}

.payment-period-toolbar>div {
  display: grid;
  gap: 3px;
  min-width: 180px
}

.payment-period-toolbar>div strong {
  color: var(--brand, #173f70);
  font-size: 14px
}

.payment-period-toolbar>div span {
  color: var(--muted, #6b7280);
  font-size: 12px
}

.payment-period-toolbar form {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(140px, 1fr) auto;
  gap: 10px;
  align-items: end
}

.payment-period-toolbar label {
  display: grid;
  gap: 5px;
  color: var(--muted, #6b7280);
  font-size: 11px
}

.payment-period-toolbar select {
  width: 100%;
  min-height: 38px
}

.payment-amount-tools,
.payment-csv-import,
.payment-multi-entry,
.payment-event-creator {
  border: 1px solid var(--border, #dce3eb);
  border-radius: 12px;
  background: var(--surface, #fff);
  overflow: hidden
}

.payment-amount-tools {
  margin: 0 0 12px
}

.payment-event-creator {
  margin: 0 0 14px
}

.payment-amount-tools>summary,
.payment-csv-import>summary,
.payment-multi-entry>summary,
.payment-event-creator>summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  color: var(--brand, #173f70);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  list-style: none
}

.payment-amount-tools>summary::-webkit-details-marker,
.payment-csv-import>summary::-webkit-details-marker,
.payment-multi-entry>summary::-webkit-details-marker,
.payment-event-creator>summary::-webkit-details-marker {
  display: none
}

.payment-amount-tools>summary::after,
.payment-csv-import>summary::after,
.payment-multi-entry>summary::after,
.payment-event-creator>summary::after {
  content: '+';
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border-radius: 7px;
  background: var(--surface-soft, #f1f5f9);
  color: var(--brand, #173f70);
  font-size: 17px;
  line-height: 1
}

.payment-amount-tools[open]>summary::after,
.payment-csv-import[open]>summary::after,
.payment-multi-entry[open]>summary::after,
.payment-event-creator[open]>summary::after {
  content: '−'
}

.payment-amount-tools[open]>summary,
.payment-csv-import[open]>summary,
.payment-multi-entry[open]>summary,
.payment-event-creator[open]>summary {
  border-bottom: 1px solid var(--border, #e1e7ee)
}

.payment-event-creator .payment-item-builder {
  margin: 0;
  border: 0;
  border-radius: 0
}

.payment-amount-tools .payment-amount-update {
  margin: 0;
  padding: 12px 14px;
  display: flex;
  align-items: end;
  gap: 10px
}

.payment-amount-tools .payment-amount-update label {
  max-width: 220px
}

.payment-csv-import {
  margin: 0 0 12px;
  padding: 0;
  border-style: solid
}

.payment-csv-import .payment-csv-content {
  padding: 12px 14px
}

.payment-csv-import .panel-head {
  margin: 0 0 10px;
  padding: 0;
  border: 0;
  background: transparent
}

.payment-csv-import .panel-head h4 {
  margin: 0 0 4px
}

.payment-csv-import .panel-head p {
  margin: 0
}

.payment-multi-entry {
  margin: 0 0 16px
}

.payment-multi-entry>summary span {
  margin-left: auto;
  color: var(--muted, #6b7280);
  font-size: 11px;
  font-weight: 500
}

.payment-multi-entry .payment-multi-content {
  padding: 0
}

.payment-multi-entry .payment-multi-head {
  padding: 14px 16px
}

.payment-multi-entry .payment-multi-head h4 {
  font-size: 15px
}

.payment-multi-entry .payment-multi-table-wrap {
  max-height: 360px
}

@media(max-width:700px), (max-device-width:700px) {
  .payment-period-toolbar {
    align-items: stretch;
    flex-direction: column;
    gap: 10px
  }

  .payment-period-toolbar form {
    grid-template-columns: 1fr 1fr
  }

  .payment-period-toolbar form .btn {
    grid-column: 1/-1
  }

  .payment-amount-tools .payment-amount-update {
    align-items: stretch;
    flex-direction: column
  }

  .payment-amount-tools .payment-amount-update label {
    max-width: none
  }

  .payment-multi-entry>summary {
    align-items: flex-start
  }

  .payment-multi-entry>summary span {
    margin-left: 0
  }
}

/* Compact portal IMPORTANT tag (managed from Notifications > Important). */
.portal-important-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  max-width: 100%;
  margin: 0 0 8px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: .045em;
  text-transform: uppercase;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .16);
  position: relative;
  z-index: 2
}

.portal-important-tag.important-tag-inline {
  display: inline-flex;
  margin: 3px 0 0 7px;
  vertical-align: middle;
  padding: 3px 7px;
  font-size: 8px
}

.important-tag-preview {
  margin-top: 14px;
  padding: 16px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  background: var(--surface-soft, #f8fafc)
}

/* Multi-location raised IMPORTANT tags */
.portal-important-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 20px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff;
  box-shadow: 0 4px 10px rgba(15, 23, 42, .16);
  white-space: nowrap;
  width: max-content
}

.important-tag-red {
  background: #ef4444
}

.important-tag-orange {
  background: #f97316
}

.important-tag-yellow {
  background: #eab308;
  color: #422006
}

.important-tag-green {
  background: #16a34a
}

.important-tag-blue {
  background: #2563eb
}

.important-tag-purple {
  background: #7c3aed
}

.important-tag-pink {
  background: #db2777
}

.important-tag-gray {
  background: #64748b
}

.sidebar-important-wrap {
  display: block;
  margin: 7px 12px -3px 46px;
  line-height: 1
}

.sidebar-important-wrap .portal-important-tag {
  font-size: 9px;
  padding: 3px 8px;
  box-shadow: 0 3px 8px rgba(15, 23, 42, .18)
}

/* Scout-table tags sit immediately after the member name, slightly raised like a badge. */
.member-name-copy .scout-name-line {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  flex-wrap: wrap
}

.member-name-copy .scout-name-line>strong {
  display: inline;
  min-width: 0
}

.member-name-copy .important-tag-row.scout-name-tag {
  display: inline-flex;
  margin: 0;
  vertical-align: super;
  transform: translateY(-5px);
  font-size: 8px;
  line-height: 1;
  padding: 3px 7px;
  white-space: nowrap;
  flex: 0 0 auto
}

.member-name-copy>.important-tag-row {
  display: flex;
  margin: 0 0 5px 0;
  font-size: 9px;
  padding: 3px 7px
}

.important-tag-inline {
  margin-left: 7px;
  vertical-align: middle
}

.important-tag-list {
  display: grid;
  gap: 9px;
  margin: 14px 0 20px
}

.important-tag-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 13px;
  border: 1px solid var(--border, #dbe3ec);
  border-radius: 12px;
  background: var(--panel-soft, #f8fafc)
}

.important-tag-list-item>div:first-child {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0
}

.important-tag-list-item small {
  color: var(--muted, #64748b)
}

.important-form-actions {
  display: flex;
  gap: 10px;
  align-items: center
}

.panel-divider {
  border: 0;
  border-top: 1px solid var(--border, #e2e8f0);
  margin: 18px 0
}

@media(max-width:760px), (max-device-width: 760px) {
  .important-tag-list-item {
    align-items: flex-start;
    flex-direction: column
  }

  .sidebar-important-wrap {
    margin-left: 48px
  }

  .important-form-actions {
    flex-wrap: wrap
  }
}

/* Sidebar IMPORTANT tags & badge layout: never clip or overflow */
.sidebar .side-link {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 7px 10px !important;
  box-sizing: border-box !important;
  width: 100% !important;
  overflow: hidden !important
}

.sidebar .side-link .side-link-label {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important
}

.sidebar .side-link .side-link-meta {
  margin-left: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 4px !important;
  flex-shrink: 0 !important;
  max-width: 55% !important
}

.sidebar .side-link .side-link-tags {
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 3px !important;
  flex-shrink: 1 !important;
  min-width: 0 !important;
  overflow: hidden !important
}

.sidebar .side-link .sidebar-nav-tag,
.sidebar .side-link .portal-important-tag {
  margin: 0 !important;
  padding: 1px 5px !important;
  min-height: 16px !important;
  height: 16px !important;
  max-height: 16px !important;
  font-size: 8px !important;
  line-height: 14px !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 54px !important
}

.sidebar .side-link .side-link-tags+.maintenance-lock,
.sidebar .side-link .side-link-tags+.nav-badge {
  margin-left: 2px
}

.sidebar .side-link .nav-badge,
.sidebar .nav-badge {
  margin: 0 !important;
  flex-shrink: 0 !important;
  min-width: 18px !important;
  height: 18px !important;
  padding: 0 5px !important;
  font-size: 10.5px !important;
  font-weight: 750 !important;
  line-height: 18px !important;
  border-radius: 999px !important;
  background: #dc2626 !important;
  color: #fff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important
}

/* Old above-tab wrapper intentionally hidden for installations with cached markup. */
.sidebar .sidebar-important-wrap {
  display: none !important
}

@media(max-width:760px), (max-device-width: 760px) {
  .sidebar .side-link .side-link-tags {
    max-width: 42%
  }

  .sidebar .side-link .sidebar-nav-tag {
    font-size: 7px !important;
    padding: 2px 4px !important
  }
}

/* V47 — Crew identity theme, crew-colour avatars and faster attendance location UX */
.crew-overview-card {
  border-top: 4px solid var(--crew-color, var(--primary));
}

.crew-overview-card .crew-photo-mark {
  background: var(--crew-color, var(--primary)) !important;
  border: 3px solid var(--crew-color, var(--primary)) !important;
  color: #fff !important;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px color-mix(in srgb, var(--crew-color, var(--primary)) 45%, transparent) !important;
}

.crew-overview-card .crew-photo-mark img {
  background: var(--crew-color, var(--primary));
}

.crew-overview-card header h3,
.crew-overview-card .crew-leadership-strip b {
  color: var(--crew-color, var(--primary)) !important;
}

.crew-themed-profile {
  border-top: 5px solid var(--crew-color, var(--primary)) !important;
}

.crew-themed-profile .profile-photo {
  border: 5px solid var(--crew-color, var(--primary)) !important;
  background: var(--crew-color, var(--primary)) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--crew-color, var(--primary)) 16%, transparent) !important;
}

.crew-themed-profile .profile-upload-preview {
  border: 3px solid var(--crew-color, var(--primary)) !important;
}

.crew-themed-profile .profile-crew-label {
  color: var(--crew-color, var(--primary)) !important;
  font-weight: 800;
}

.crew-themed-profile .profile-crew-label i {
  background: var(--crew-color, var(--primary)) !important;
}

.crew-colour-avatar {
  border: 2px solid var(--crew-color, #64748b) !important;
  background: var(--crew-color, #64748b) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--crew-color, #64748b) 18%, transparent) !important;
}

.crew-colour-avatar img {
  background: var(--crew-color, #64748b) !important;
}

.crew-dashboard-theme {
  --dashboard-accent: var(--crew-color, #1e3a5f);
}

.crew-dashboard-theme .member-dashboard-hero,
.crew-dashboard-theme .dashboard-kpi,
.crew-dashboard-theme .dashboard-analytics-card,
.crew-dashboard-theme .member-dashboard-summary article,
.crew-dashboard-theme .member-status-strip>div {
  border-color: color-mix(in srgb, var(--dashboard-accent) 26%, #dfe7ee) !important;
}

.crew-dashboard-theme .member-dashboard-hero {
  border-top: 5px solid var(--dashboard-accent) !important;
  background: linear-gradient(135deg, color-mix(in srgb, var(--dashboard-accent) 9%, #fff), #fff 48%) !important;
}

.crew-dashboard-theme .member-dashboard-hero h2,
.crew-dashboard-theme .member-dashboard-summary strong,
.crew-dashboard-theme .member-status-strip strong,
.crew-dashboard-theme .dashboard-kpi strong,
.crew-dashboard-theme .dashboard-card-head h3 {
  color: var(--dashboard-accent) !important;
}

.crew-dashboard-theme .member-primary-action,
.crew-dashboard-theme .dashboard-quick-actions .btn.primary {
  background: var(--dashboard-accent) !important;
  border-color: var(--dashboard-accent) !important;
}

.crew-dashboard-theme .member-home-tabs a.active,
.crew-dashboard-theme .member-home-tabs a:hover {
  border-color: var(--dashboard-accent) !important;
  color: var(--dashboard-accent) !important;
}

.crew-dashboard-theme .dashboard-kpi:before,
.crew-dashboard-theme .dashboard-kpi:after {
  background: var(--dashboard-accent) !important;
}

.crew-dashboard-theme .dashboard-kpi-icon,
.crew-dashboard-theme .dashboard-card-icon {
  color: var(--dashboard-accent) !important;
  background: color-mix(in srgb, var(--dashboard-accent) 11%, #fff) !important;
}

.crew-dashboard-theme .renewal-progress-fill {
  background: var(--dashboard-accent) !important;
}

.crew-dashboard-theme .dashboard-mini-line polyline {
  stroke: var(--dashboard-accent) !important;
}

.crew-dashboard-theme .dashboard-mini-line circle {
  fill: var(--dashboard-accent) !important;
}

.location-permission-help {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid #f0b9b9;
  border-left: 4px solid #b42318;
  border-radius: 12px;
  background: #fff5f5;
  color: #7a271a;
}

.location-permission-help>div {
  display: grid;
  gap: 3px
}

.location-permission-help strong {
  font-size: 13px
}

.location-permission-help span {
  font-size: 11px;
  line-height: 1.45
}

@media(max-width:680px), (max-device-width: 680px) {
  .location-permission-help {
    align-items: stretch;
    flex-direction: column
  }

  .location-permission-help .btn {
    width: 100%
  }
}

html[data-portal-theme="dark"] .crew-dashboard-theme .member-dashboard-hero {
  background: linear-gradient(135deg, color-mix(in srgb, var(--dashboard-accent) 20%, #14212a), #14212a 52%) !important;
}

html[data-portal-theme="dark"] .location-permission-help {
  background: #321b1c;
  color: #ffd9d6;
  border-color: #6e3133;
}

/* 2026-09-15 viewport containment fix.
   Prevent the document itself from scrolling into empty horizontal space.
   Wide content must scroll only inside its own table/tab wrapper. */
html {
  max-width: 100%;
  overflow-x: hidden
}

body.portal-body {
  max-width: 100%;
  overflow-x: hidden
}

.portal-body .shell {
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden
}

.portal-body main {
  min-width: 0
}

.portal-body .topbar,
.portal-body .content {
  min-width: 0;
  max-width: 100%
}

.portal-body .table-wrap {
  max-width: 100%;
  overflow-x: auto
}

.portal-body img,
.portal-body video,
.portal-body canvas,
.portal-body iframe {
  max-width: 100%
}

/* ========================================================================
   V48 — FINAL MOBILE TABLE STANDARD
   Match the compact Dashboard "Recent attendance" table on every phone page.
   Keep real table columns, compact spacing, readable words, horizontal table
   scrolling only. This block is intentionally last so older table rules cannot
   squeeze names/emails into vertical characters.
   ======================================================================== */
@media (max-width: 820px),
(max-device-width: 820px) {

  html,
  body,
  body.portal-body {
    max-width: 100% !important;
    overflow-x: hidden !important
  }

  .portal-body .content,
  .portal-body .panel,
  .portal-body .card {
    min-width: 0 !important;
    max-width: 100% !important
  }

  .portal-body .table-wrap,
  .portal-body .scouts-fit-wrap,
  .portal-body .maintenance-table-wrap,
  .portal-body .users-table-wrap {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-x: contain !important;
    border: 1px solid var(--border, #dbe3ec) !important;
    border-radius: 10px !important;
    background: var(--theme-panel, #fff) !important;
    scrollbar-width: thin;
  }

  .portal-body .table-wrap>table,
  .portal-body .scouts-fit-wrap>table,
  .portal-body table.compact-table,
  .portal-body table.scouts-fit-table,
  .portal-body table.users-table,
  .portal-body table.attendance-records-table,
  .portal-body table.maintenance-table {
    display: table !important;
    width: max-content !important;
    min-width: 100% !important;
    max-width: none !important;
    table-layout: auto !important;
    border-collapse: collapse !important;
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
  }

  .portal-body .table-wrap table thead,
  .portal-body .scouts-fit-wrap table thead {
    display: table-header-group !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    clip: auto !important;
    overflow: visible !important
  }

  .portal-body .table-wrap table tbody,
  .portal-body .scouts-fit-wrap table tbody {
    display: table-row-group !important
  }

  .portal-body .table-wrap table tr,
  .portal-body .scouts-fit-wrap table tr {
    display: table-row !important;
    height: auto !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important
  }

  .portal-body .table-wrap table th,
  .portal-body .table-wrap table td,
  .portal-body .scouts-fit-wrap table th,
  .portal-body .scouts-fit-wrap table td,
  .portal-body table.compact-table th,
  .portal-body table.compact-table td,
  .portal-body table.scouts-fit-table th,
  .portal-body table.scouts-fit-table td,
  .portal-body table.users-table th,
  .portal-body table.users-table td {
    display: table-cell !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    min-width: 88px !important;
    max-width: 280px !important;
    padding: 8px 9px !important;
    border-bottom: 1px solid var(--border, #e1e7ee) !important;
    vertical-align: middle !important;
    text-align: left !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
  }

  .portal-body .table-wrap table th,
  .portal-body .scouts-fit-wrap table th,
  .portal-body table.compact-table th,
  .portal-body table.scouts-fit-table th,
  .portal-body table.users-table th {
    min-width: 76px !important;
    padding-top: 9px !important;
    padding-bottom: 9px !important;
    white-space: nowrap !important;
    font-size: 12px !important;
    font-weight: 400 !important;
  }

  .portal-body .table-wrap table td::before,
  .portal-body .table-wrap.mobile-card-table td::before {
    display: none !important;
    content: none !important
  }

  /* Compact utility columns: checkbox and row number. */
  .portal-body .scouts-table-v5 th:nth-child(1),
  .portal-body .scouts-table-v5 td:nth-child(1) {
    min-width: 38px !important;
    width: 38px !important;
    max-width: 38px !important;
    text-align: center !important;
    padding-left: 6px !important;
    padding-right: 6px !important
  }

  .portal-body .scouts-table-v5 th:nth-child(2),
  .portal-body .scouts-table-v5 td:nth-child(2) {
    min-width: 42px !important;
    width: 42px !important;
    max-width: 42px !important;
    text-align: center !important;
    padding-left: 5px !important;
    padding-right: 5px !important
  }

  /* Scout/name column gets enough room to read naturally, like dashboard rows. */
  .portal-body .scouts-table-v5 th:nth-child(3),
  .portal-body .scouts-table-v5 td:nth-child(3) {
    min-width: 245px !important;
    width: 245px !important;
    max-width: 245px !important
  }

  .portal-body .member-name-cell {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: 225px !important;
    min-width: 225px !important;
    max-width: 225px !important
  }

  .portal-body .member-name-copy {
    display: block !important;
    width: 178px !important;
    min-width: 0 !important;
    max-width: 178px !important
  }

  .portal-body .member-name-copy .scout-name-line,
  .portal-body .member-name-copy strong,
  .portal-body .member-name-copy small {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    hyphens: none !important;
  }

  .portal-body .member-name-copy strong {
    font-size: 13px !important;
    line-height: 1.25 !important;
    font-weight: 400 !important
  }

  .portal-body .member-name-copy small {
    font-size: 11px !important;
    line-height: 1.25 !important;
    margin-top: 2px !important
  }

  /* Common identity/data columns: compact, no artificial gaps. */
  .portal-body .scouts-table-v5 th:nth-child(4),
  .portal-body .scouts-table-v5 td:nth-child(4) {
    min-width: 105px !important;
    max-width: 135px !important
  }

  .portal-body .scouts-table-v5 th:nth-child(5),
  .portal-body .scouts-table-v5 td:nth-child(5) {
    min-width: 125px !important;
    max-width: 145px !important
  }

  .portal-body .scouts-table-v5 th:nth-child(6),
  .portal-body .scouts-table-v5 td:nth-child(6) {
    min-width: 115px !important;
    max-width: 125px !important;
    white-space: nowrap !important
  }

  .portal-body .scouts-table-v5 th:nth-child(7),
  .portal-body .scouts-table-v5 td:nth-child(7) {
    min-width: 190px !important;
    max-width: 230px !important
  }

  /* Long semantic fields get a readable lane instead of letter-by-letter wrapping. */
  .portal-body .table-wrap td[data-label*="Name"],
  .portal-body .table-wrap td[data-label="Scout"],
  .portal-body .table-wrap td[data-label*="Reason"],
  .portal-body .table-wrap td[data-label*="Apology"],
  .portal-body .table-wrap td[data-label*="Location"],
  .portal-body .table-wrap td[data-label*="Description"],
  .portal-body .table-wrap td[data-label*="Message"] {
    min-width: 210px !important;
    max-width: 300px !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important
  }

  .portal-body .table-wrap td[data-label*="Registration"],
  .portal-body .table-wrap td[data-label*="Phone"],
  .portal-body .table-wrap td[data-label*="Date"],
  .portal-body .table-wrap td[data-label*="Time"] {
    white-space: nowrap !important;
    min-width: 112px !important;
    max-width: 155px !important
  }

  .portal-body .table-wrap td strong,
  .portal-body .scouts-fit-table td strong {
    font-size: 13px !important;
    line-height: 1.25 !important;
    font-weight: 400 !important
  }

  .portal-body .table-wrap td small,
  .portal-body .scouts-fit-table td small {
    font-size: 11px !important;
    line-height: 1.25 !important;
    margin-top: 2px !important
  }

  .portal-body .table-wrap .tag,
  .portal-body .scouts-fit-table .tag {
    font-size: 11px !important;
    padding: 4px 7px !important;
    white-space: nowrap !important
  }

  .portal-body .table-wrap .btn,
  .portal-body .table-wrap button,
  .portal-body .scouts-fit-table .btn {
    min-height: 30px !important;
    width: auto !important;
    padding: 5px 8px !important;
    font-size: 11px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important
  }

  .portal-body .table-wrap .action-tabs,
  .portal-body .scouts-fit-table .action-tabs,
  .portal-body .scout-row-actions {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    width: max-content !important;
    min-width: max-content !important
  }
}

@media (max-width:390px),
(max-device-width: 390px) {

  .portal-body .table-wrap table th,
  .portal-body .table-wrap table td,
  .portal-body .scouts-fit-wrap table th,
  .portal-body .scouts-fit-wrap table td {
    padding: 7px 8px !important
  }
}

/* Grouped sidebar navigation */
.grouped-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 7px
}

.grouped-sidebar-nav>.side-link {
  margin-bottom: 3px
}

.side-nav-group {
  border-top: 1px solid var(--portal-border, #e5e7eb);
  padding-top: 7px
}

.side-group-toggle {
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 22px;
  align-items: center;
  gap: 9px;
  padding: 10px 11px;
  border-radius: 12px;
  font: inherit;
  font-weight: 650;
  text-align: left;
  cursor: pointer
}

.side-group-toggle:hover,
.side-nav-group.open>.side-group-toggle {
  background: rgba(30, 58, 95, .07)
}

.side-group-toggle svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8
}

.side-group-chevron {
  font-size: 17px;
  line-height: 1;
  text-align: center;
  transition: transform .18s ease;
  color: #8290a4
}

.side-nav-group.open .side-group-chevron {
  transform: rotate(180deg)
}

.side-group-items {
  display: none;
  padding: 3px 0 4px 13px
}

.side-nav-group.open .side-group-items {
  display: block
}

.side-group-items .side-link {
  min-height: 39px;
  margin: 2px 0;
  padding-top: 8px;
  padding-bottom: 8px
}

.side-group-items .side-link svg {
  width: 17px;
  height: 17px
}

.sidebar-collapsed .side-group-toggle {
  grid-template-columns: 1fr;
  padding: 10px;
  justify-items: center
}

.sidebar-collapsed .side-group-toggle span,
.sidebar-collapsed .side-group-chevron,
.sidebar-collapsed .side-group-items {
  display: none !important
}

@media(max-width:760px), (max-device-width: 760px) {
  .side-group-toggle {
    min-height: 48px
  }

  .side-group-items {
    padding-left: 10px
  }

  .side-group-items .side-link {
    min-height: 44px
  }
}

/* Update 7: Kisii digital-service inspired navigation rhythm and typography */
:root {
  --portal-ui-font: Inter, "Segoe UI", Roboto, Arial, sans-serif
}

html,
body,
button,
input,
select,
textarea,
.sidebar,
.topbar,
.content {
  font-family: var(--portal-ui-font) !important
}

.grouped-sidebar-nav {
  gap: 8px !important;
  padding: 4px 8px 10px !important
}

.side-nav-group {
  border-bottom: 1px solid rgba(148, 163, 184, .18);
  padding: 0 0 8px;
  margin: 0 0 1px
}

.side-group-toggle {
  min-height: 54px !important;
  grid-template-columns: 42px minmax(0, 1fr) 22px !important;
  gap: 10px !important;
  padding: 7px 10px !important;
  border-radius: 12px !important;
  font-size: 15px !important;
  font-weight: 650 !important;
  color: #415675 !important;
  transition: background .16s ease, color .16s ease !important
}

.side-group-toggle>svg:first-child {
  width: 42px !important;
  height: 42px !important;
  padding: 11px !important;
  box-sizing: border-box !important;
  border-radius: 11px !important;
  background: #f5f7fa !important;
  stroke: #74839a !important
}

.side-group-toggle:hover {
  background: #f7f9fb !important
}

.side-nav-group.open>.side-group-toggle {
  background: #f3f7fb !important;
  color: #123f70 !important
}

.side-group-chevron {
  width: 20px !important;
  height: 20px !important;
  padding: 0 !important;
  background: transparent !important;
  stroke: #94a3b8 !important;
  transition: transform .18s ease !important
}

.side-nav-group.open .side-group-chevron {
  transform: rotate(180deg) !important;
  stroke: #123f70 !important
}

.side-group-items {
  padding: 4px 0 2px 8px !important
}

.side-group-items .side-link {
  min-height: 40px !important;
  border-radius: 10px !important;
  margin: 2px 0 !important;
  padding: 8px 10px !important;
  font-size: 13.5px !important
}

.side-group-items .side-link svg {
  width: 16px !important;
  height: 16px !important
}

.side-group-items .side-link.active {
  background: #eaf3fb !important;
  color: #0b4c82 !important;
  box-shadow: inset 3px 0 0 #0b4c82 !important
}

.sidebar>.brand {
  border-bottom: 1px solid rgba(148, 163, 184, .16)
}

@media(max-width:760px), (max-device-width: 760px) {
  .grouped-sidebar-nav {
    padding-left: 6px !important;
    padding-right: 6px !important
  }

  .side-group-toggle {
    min-height: 56px !important
  }

  .side-group-items {
    padding-left: 8px !important
  }

  .side-group-items .side-link {
    min-height: 44px !important;
    font-size: 14px !important
  }
}

/* ========================================================================== 
   2026-09-27: University-service typography + multi-step profile centre
   The whole portal now uses one restrained Inter hierarchy instead of mixing
   Outfit / Instrument Sans / legacy heavy weights.
   ========================================================================== */
html,
body,
button,
input,
select,
textarea,
table,
.portal-body,
.public-portal,
.portal-body .panel h1,
.portal-body .panel h2,
.portal-body .panel h3,
.portal-body .panel h4,
.modal-head h3,
.topbar h1,
.brand,
.brand small,
.btn,
.tag,
.status-pill {
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif !important;
}

body {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5
}

h1,
.topbar h1 {
  font-size: 25px !important;
  line-height: 1.22 !important;
  font-weight: 600 !important;
  letter-spacing: -.02em !important
}

h2,
.profile-card h2 {
  font-size: 21px !important;
  line-height: 1.3 !important;
  font-weight: 600 !important;
  letter-spacing: -.015em !important
}

h3,
.panel h3,
.modal-head h3 {
  font-size: 16px !important;
  line-height: 1.35 !important;
  font-weight: 600 !important;
  letter-spacing: -.005em !important
}

h4 {
  font-size: 14px !important;
  font-weight: 600 !important
}

p,
li,
td,
input,
select,
textarea {
  font-weight: 400 !important
}

strong,
b {
  font-weight: 600 !important
}

label,
th,
.btn,
.tag,
.status-pill,
.role-chip,
.badge {
  font-weight: 500 !important
}

.sidebar .brand-copy b,
.topbar-user b,
.account-copy b {
  font-weight: 600 !important
}

.sidebar .brand-copy small,
.topbar-user small,
.account-copy small {
  font-weight: 400 !important
}

.side-group-toggle {
  font-weight: 600 !important
}

.side-link {
  font-weight: 500 !important
}

.side-group-chevron {
  width: 16px !important;
  height: 16px !important;
  transition: transform .18s ease !important
}

.side-nav-group.open>.side-group-toggle .side-group-chevron {
  transform: rotate(180deg) !important
}

.profile-wizard-shell {
  display: grid;
  gap: 18px;
  max-width: 1440px;
  margin: 0 auto
}

.profile-wizard-summary {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-top: 4px solid var(--crew-color, var(--primary)) !important;
  margin: 0 !important
}

.profile-wizard-identity {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0
}

.profile-wizard-identity .profile-photo {
  width: 78px;
  height: 78px;
  flex: 0 0 78px;
  border-width: 3px
}

.profile-wizard-identity h2 {
  margin: 2px 0 4px !important
}

.profile-wizard-identity p {
  margin: 0 !important;
  color: var(--muted);
  text-transform: none !important
}

.profile-wizard-kicker,
.profile-step-count {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase
}

.profile-completion-card {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 230px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-soft, #f8fafc)
}

.profile-completion-card>div:last-child {
  display: grid;
  gap: 2px
}

.profile-completion-card small {
  color: var(--muted);
  font-size: 12px
}

.profile-completion-ring {
  --progress: 0;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  position: relative;
  flex: 0 0 auto;
  background: conic-gradient(var(--crew-color, var(--primary)) calc(var(--progress)*1%), #e9eef4 0)
}

.profile-completion-ring:after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: var(--theme-panel, #fff)
}

.profile-completion-ring strong {
  position: relative;
  z-index: 1;
  font-size: 13px;
  color: var(--text)
}

.profile-inline-alert {
  position: static !important;
  transform: none !important;
  max-width: none !important;
  width: auto !important;
  margin: 0 !important
}

.profile-wizard-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 18px;
  align-items: start
}

.profile-step-nav {
  position: sticky;
  top: 18px;
  display: grid;
  gap: 6px;
  padding: 10px;
  background: var(--theme-panel, #fff);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow)
}

.profile-step-link {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  text-decoration: none;
  color: var(--text);
  padding: 10px;
  border-radius: 10px;
  border: 1px solid transparent;
  transition: .15s ease
}

.profile-step-link:hover {
  background: var(--primary-light);
  border-color: var(--border)
}

.profile-step-link.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary)
}

.profile-step-link .profile-step-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #edf2f7;
  color: var(--primary);
  font-size: 12px;
  font-weight: 600
}

.profile-step-link.complete:not(.active) .profile-step-dot {
  background: #e8f6ed;
  color: #247047
}

.profile-step-link.active .profile-step-dot {
  background: #fff;
  color: var(--primary)
}

.profile-step-link b {
  display: block;
  font-size: 13px
}

.profile-step-link small {
  display: block;
  font-size: 10px;
  line-height: 1.35;
  color: var(--muted);
  margin-top: 2px
}

.profile-step-link.active small {
  color: rgba(255, 255, 255, .76)
}

.profile-step-panel {
  margin: 0 !important;
  min-width: 0
}

.profile-step-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 16px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--border)
}

.profile-step-head h2 {
  margin: 3px 0 4px !important
}

.profile-step-head p {
  margin: 0;
  color: var(--muted)
}

.profile-saved-time {
  color: var(--muted);
  white-space: nowrap;
  font-size: 11px
}

.profile-step-form {
  display: grid;
  gap: 18px
}

.profile-section-block {
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--theme-panel, #fff)
}

.profile-section-block>h3 {
  margin: 0 0 14px !important
}

.profile-section-block>p {
  margin: -7px 0 14px;
  color: var(--muted);
  font-size: 12px
}

.profile-section-block .form-grid {
  gap: 14px 16px
}

.profile-section-block label {
  font-size: 12px;
  font-weight: 500 !important;
  color: var(--text)
}

.profile-section-block input,
.profile-section-block select,
.profile-section-block textarea {
  min-height: 43px;
  border-radius: 9px;
  padding: 10px 11px;
  font-size: 13px
}

.profile-section-block textarea {
  min-height: 82px
}

.required-dot {
  color: #c0392b;
  font-weight: 600
}

.profile-step-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 9px;
  padding-top: 2px;
  flex-wrap: wrap
}

.profile-step-actions .btn {
  min-width: 112px
}

.profile-photo-upload-row {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  gap: 18px;
  align-items: center
}

.profile-upload-preview {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--crew-color, var(--primary));
  background: #f3f6f9
}

.profile-upload-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block
}

.profile-upload-controls {
  display: grid;
  gap: 8px;
  align-content: start
}

.profile-upload-controls p {
  margin: 0;
  color: var(--muted);
  font-size: 12px
}

.profile-upload-controls .btn {
  justify-self: start
}

.profile-section-title-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 14px
}

.profile-section-title-row h3 {
  margin: 0 0 4px !important
}

.profile-section-title-row p {
  margin: 0;
  color: var(--muted);
  font-size: 12px
}

.investiture-evidence-block {
  margin-top: 18px
}

.document-upload-inline,
.document-upload-form {
  display: grid;
  grid-template-columns: minmax(150px, .8fr) minmax(220px, 1.4fr) auto;
  gap: 10px;
  align-items: end
}

.document-upload-form {
  grid-template-columns: minmax(160px, .75fr) minmax(190px, 1fr) minmax(240px, 1.3fr) auto
}

.document-upload-inline label,
.document-upload-form label {
  display: grid;
  gap: 6px;
  margin: 0
}

.document-upload-inline .btn,
.document-upload-form .btn {
  height: 43px;
  white-space: nowrap
}

.upload-limit-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 9px;
  border-radius: 999px;
  background: var(--primary-light);
  color: var(--primary);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap
}

.document-category-groups {
  display: grid;
  gap: 12px;
  margin-top: 18px
}

.document-category {
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--theme-panel, #fff)
}

.document-category-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--surface-soft, #f8fafc);
  border-bottom: 1px solid var(--border)
}

.document-category-head h3 {
  margin: 0 !important
}

.document-category-head span {
  font-size: 11px;
  color: var(--muted)
}

.document-list {
  display: grid
}

.profile-document-card {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border)
}

.profile-document-card:last-child {
  border-bottom: 0
}

.document-type-icon {
  width: 42px;
  height: 42px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: var(--primary-light);
  color: var(--primary);
  font-size: 10px;
  font-weight: 600
}

.document-card-copy {
  min-width: 0
}

.document-card-copy b {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.document-card-copy small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 2px 0 5px
}

.document-card-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end
}

.document-card-actions form {
  margin: 0
}

.empty-mini {
  padding: 18px 14px !important;
  margin: 0 !important;
  color: var(--muted) !important
}

.legacy-document-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding: 12px;
  border: 1px dashed var(--border);
  border-radius: 10px
}

.legacy-document-row div {
  display: grid
}

.legacy-document-row small {
  color: var(--muted)
}

.profile-privacy-note {
  padding: 10px 12px;
  border-radius: 9px;
  background: #fff8e8;
  color: #6e5a24 !important;
  border: 1px solid #f3dfaa
}

.profile-review-grid {
  display: grid;
  gap: 9px
}

.profile-review-card {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 10px
}

.profile-review-card>span {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff0ed;
  color: #b43b30;
  font-weight: 600
}

.profile-review-card.complete>span {
  background: #e8f6ed;
  color: #247047
}

.profile-review-card div {
  display: grid
}

.profile-review-card small {
  color: var(--muted);
  font-size: 11px
}

.profile-review-card>a {
  font-size: 12px;
  font-weight: 600;
  color: var(--primary)
}

.profile-review-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 18px 0
}

.profile-review-summary>div {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-soft, #f8fafc)
}

.profile-review-summary span {
  display: block;
  color: var(--muted);
  font-size: 11px
}

.profile-review-summary strong {
  display: block;
  font-size: 20px;
  margin-top: 3px;
  color: var(--text)
}

.profile-complete-banner {
  padding: 18px;
  border: 1px solid #cde8d6;
  border-left: 4px solid #2e8b57;
  border-radius: 10px;
  background: #eff9f3
}

.profile-complete-banner strong {
  font-size: 16px
}

.profile-complete-banner p {
  margin: 4px 0 12px;
  color: #416d50
}

html[data-portal-theme="dark"] .profile-step-nav,
html[data-portal-theme="dark"] .profile-section-block,
html[data-portal-theme="dark"] .document-category,
html[data-portal-theme="dark"] .profile-completion-card,
html[data-theme="dark"] .profile-step-nav,
html[data-theme="dark"] .profile-section-block,
html[data-theme="dark"] .document-category,
html[data-theme="dark"] .profile-completion-card {
  background: #171f29 !important;
  border-color: #33404d !important
}

html[data-portal-theme="dark"] .document-category-head,
html[data-theme="dark"] .document-category-head {
  background: #111923 !important;
  border-color: #33404d !important
}

@media(max-width:1050px), (max-device-width: 1050px) {
  .profile-wizard-layout {
    grid-template-columns: 230px minmax(0, 1fr)
  }

  .document-upload-form {
    grid-template-columns: 1fr 1fr
  }

  .document-upload-form .btn {
    grid-column: 1/-1
  }

  .document-upload-inline {
    grid-template-columns: 1fr 1fr
  }

  .document-upload-inline .btn {
    grid-column: 1/-1
  }
}

@media(max-width:760px), (max-device-width: 760px) {
  .profile-wizard-summary {
    align-items: flex-start !important;
    flex-direction: column
  }

  .profile-completion-card {
    width: 100%
  }

  .profile-wizard-layout {
    grid-template-columns: 1fr
  }

  .profile-step-nav {
    position: static;
    display: flex;
    overflow-x: auto;
    padding: 7px;
    gap: 5px;
    scroll-snap-type: x proximity
  }

  .profile-step-link {
    flex: 0 0 185px;
    scroll-snap-align: start
  }

  .profile-step-link small {
    display: none
  }

  .profile-step-panel {
    padding: 15px !important
  }

  .profile-step-head {
    display: block
  }

  .profile-saved-time {
    display: block;
    margin-top: 8px
  }

  .profile-section-block {
    padding: 14px
  }

  .profile-section-block .form-grid {
    grid-template-columns: 1fr !important
  }

  .profile-section-block .span-2 {
    grid-column: auto !important
  }

  .profile-photo-upload-row {
    grid-template-columns: 92px minmax(0, 1fr)
  }

  .profile-upload-preview {
    width: 88px;
    height: 88px
  }

  .document-upload-inline,
  .document-upload-form {
    grid-template-columns: 1fr
  }

  .document-upload-inline .btn,
  .document-upload-form .btn {
    grid-column: auto;
    width: 100%
  }

  .profile-section-title-row {
    display: block
  }

  .upload-limit-chip {
    margin-top: 8px
  }

  .profile-document-card {
    grid-template-columns: 38px minmax(0, 1fr)
  }

  .document-type-icon {
    width: 36px;
    height: 36px
  }

  .document-card-actions {
    grid-column: 1/-1;
    justify-content: flex-start
  }

  .document-card-actions .btn {
    flex: 1 1 auto
  }

  .document-card-actions form {
    flex: 1 1 auto
  }

  .document-card-actions form .btn {
    width: 100%
  }

  .profile-step-actions {
    display: grid;
    grid-template-columns: 1fr 1fr
  }

  .profile-step-actions .btn {
    min-width: 0;
    width: 100%
  }

  .profile-step-actions .btn.primary:last-child {
    grid-column: 1/-1
  }

  .profile-review-summary {
    grid-template-columns: 1fr
  }

  .legacy-document-row {
    align-items: flex-start;
    flex-direction: column
  }
}

@media(max-width:420px), (max-device-width: 420px) {
  .profile-wizard-identity .profile-photo {
    width: 64px;
    height: 64px;
    flex-basis: 64px
  }

  .profile-step-link {
    flex-basis: 162px
  }

  .profile-step-actions {
    grid-template-columns: 1fr
  }

  .profile-step-actions .btn.primary:last-child {
    grid-column: auto
  }
}

.document-replace-form {
  margin: 0
}

.document-replace-button {
  cursor: pointer;
  margin: 0 !important
}

.document-replace-button input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none
}

/* 2026-09-29: stronger typography across the complete portal. */
html body,
html body.portal-body,
html body.auth-shell,
html body .public,
html body .landing {
  font-weight: 600
}

html body p,
html body li,
html body td,
html body label,
html body input,
html body select,
html body textarea,
html body button,
html body a,
html body span,
html body small {
  font-weight: 600 !important
}

html body strong,
html body b {
  font-weight: 700 !important
}

html body h1,
html body h2,
html body h3,
html body h4,
html body h5,
html body h6,
html body .topbar h1,
html body .panel-head h3,
html body .dashboard-card-head h3,
html body .member-dashboard-hero h2,
html body .login-panel h2,
html body .login-story h1 {
  font-family: 'Outfit', 'Instrument Sans', sans-serif;
  font-weight: 800 !important
}

html body th,
html body .eyebrow,
html body .btn {
  font-weight: 700 !important
}

/* Home-screen notification banner based on the supplied black rounded banner reference. */
.home-notification-stack {
  display: grid;
  gap: 12px;
  margin: 0 0 18px;
  max-width: 980px
}

.home-notification-banner {
  position: relative;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 36px;
  align-items: start;
  gap: 14px;
  padding: 18px 18px 18px 16px;
  border-radius: 20px;
  background: #050505;
  color: #fff;
  box-shadow: 0 16px 36px rgba(0, 0, 0, .18);
  overflow: hidden
}

.home-notification-banner:after {
  content: "";
  position: absolute;
  inset: auto -45px -60px auto;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .035);
  pointer-events: none
}

.home-notification-mark {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #fff;
  color: #111;
  font-size: 23px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08)
}

.home-notification-copy {
  min-width: 0;
  position: relative;
  z-index: 1
}

.home-notification-copy h3 {
  margin: 1px 0 5px !important;
  color: #fff !important;
  font-size: 19px !important;
  line-height: 1.2
}

.home-notification-copy p {
  margin: 0;
  color: #f1f1f1 !important;
  font-size: 14px;
  line-height: 1.45;
  max-width: 760px
}

.home-notification-copy a {
  display: inline-block;
  margin-top: 8px;
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 700 !important
}

.home-notification-close {
  margin: 0;
  position: relative;
  z-index: 2
}

.home-notification-close button {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%
}

.home-notification-close button:hover {
  background: rgba(255, 255, 255, .12)
}

@media(max-width:620px), (max-device-width: 620px) {
  .home-notification-banner {
    grid-template-columns: 42px minmax(0, 1fr) 30px;
    padding: 14px;
    gap: 10px;
    border-radius: 16px
  }

  .home-notification-mark {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    font-size: 19px
  }

  .home-notification-copy h3 {
    font-size: 16px !important
  }

  .home-notification-copy p {
    font-size: 12px
  }

  .home-notification-close button {
    width: 30px;
    height: 30px;
    font-size: 25px
  }
}

/* 2026-09-29: dedicated Notification Banner studio + crew/analytics targeting. */
.home-notification-banner {
  background: var(--banner-bg, #050505) !important;
  color: var(--banner-fg, #fff) !important;
  transition: background .18s ease, color .18s ease
}

.home-notification-banner .home-notification-copy h3,
.home-notification-banner .home-notification-copy p,
.home-notification-banner .home-notification-copy a,
.home-notification-banner .home-notification-close button {
  color: var(--banner-fg, #fff) !important
}

.home-notification-banner .home-notification-mark {
  background: color-mix(in srgb, var(--banner-fg, #fff) 92%, transparent) !important;
  color: var(--banner-bg, #050505) !important
}

.home-notification-banner:after {
  background: color-mix(in srgb, var(--banner-fg, #fff) 5%, transparent) !important
}

.notification-banner-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, .8fr);
  gap: 16px;
  align-items: start
}

.notification-banner-composer {
  min-width: 0
}

.notification-banner-side {
  display: grid;
  gap: 16px;
  position: sticky;
  top: 86px
}

.banner-heading-grid {
  grid-template-columns: minmax(0, 1fr) minmax(150px, .32fr) !important
}

.banner-rule-card,
.banner-design-card {
  display: grid;
  gap: 12px;
  padding: 15px;
  border: 1px solid var(--line, #dbe3ed);
  border-radius: 15px;
  background: color-mix(in srgb, var(--surface, #fff) 92%, #103b7a 8%)
}

.banner-rule-card>div:first-child,
.banner-design-card>div:first-child {
  display: grid;
  gap: 3px
}

.banner-rule-card>div:first-child small,
.banner-design-card>div:first-child small {
  color: var(--muted, #64748b)
}

.banner-analytics-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px
}

.banner-preview-panel {
  overflow: hidden
}

.banner-live-preview {
  margin: 4px 0 2px;
  grid-template-columns: 52px minmax(0, 1fr) 34px;
  box-shadow: none
}

.banner-live-preview .home-notification-copy p {
  white-space: pre-line
}

.banner-preview-close {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--banner-fg, #fff);
  font-size: 28px;
  line-height: 1;
  cursor: default
}

.banner-target-guide ul {
  margin: 0;
  padding-left: 19px;
  display: grid;
  gap: 10px;
  color: var(--text, #1f2937)
}

.banner-target-guide li {
  line-height: 1.45
}

.banner-target-guide li strong {
  color: var(--text, #0f172a)
}

.banner-history {
  margin-top: 16px
}

.banner-history td small {
  display: block;
  color: var(--muted, #64748b);
  margin-top: 3px;
  max-width: 420px
}

.banner-colour-swatch {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 5px;
  background: var(--swatch, #050505);
  vertical-align: -3px;
  margin-right: 7px;
  border: 1px solid rgba(15, 23, 42, .12)
}

.notification-picker-list .notification-user-option small {
  line-height: 1.35
}

@media(max-width:1050px), (max-device-width: 1050px) {
  .notification-banner-workspace {
    grid-template-columns: 1fr
  }

  .notification-banner-side {
    position: static;
    grid-template-columns: 1fr 1fr
  }
}

@media(max-width:720px), (max-device-width: 720px) {
  .notification-banner-side {
    grid-template-columns: 1fr
  }

  .banner-heading-grid,
  .banner-analytics-grid {
    grid-template-columns: 1fr !important
  }

  .banner-live-preview {
    grid-template-columns: 42px minmax(0, 1fr) 30px
  }
}

/* 2026-09-29 refinement: dependent Notification Banner fields must truly disappear. */
.notification-banner-composer [hidden],
.notification-banner-composer .banner-field-hidden,
#smsCentreForm [hidden] {
  display: none !important
}

.banner-form-actions,
.banner-row-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap
}

.banner-form-actions .btn {
  min-width: 150px
}

.banner-row-actions form {
  margin: 0
}

.banner-row-actions .btn {
  white-space: nowrap
}

#notificationComposer [hidden] {
  display: none !important
}

/* Approved apologies: keep identity and event columns readable in the records view. */
html body.portal-body #apologyAttendanceTable {
  width: 100% !important;
  min-width: 1400px !important;
  max-width: none !important;
  table-layout: fixed !important
}

html body.portal-body #apologyAttendanceTable col.apology-no {
  width: 4% !important
}

html body.portal-body #apologyAttendanceTable col.apology-name {
  width: 18% !important
}

html body.portal-body #apologyAttendanceTable col.apology-reg {
  width: 14% !important
}

html body.portal-body #apologyAttendanceTable col.apology-session {
  width: 22% !important
}

html body.portal-body #apologyAttendanceTable col.apology-reason {
  width: 34% !important
}

html body.portal-body #apologyAttendanceTable col.apology-action {
  width: 8% !important
}

html body.portal-body #apologyAttendanceTable th,
html body.portal-body #apologyAttendanceTable td {
  vertical-align: middle
}

html body.portal-body #apologyAttendanceTable th:nth-child(2),
html body.portal-body #apologyAttendanceTable td:nth-child(2),
html body.portal-body #apologyAttendanceTable th:nth-child(3),
html body.portal-body #apologyAttendanceTable td:nth-child(3),
html body.portal-body #apologyAttendanceTable th:nth-child(4),
html body.portal-body #apologyAttendanceTable td:nth-child(4) {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  overflow-wrap: normal !important;
  word-break: keep-all !important
}

html body.portal-body #apologyAttendanceTable td:nth-child(2) strong,
html body.portal-body #apologyAttendanceTable td:nth-child(4) strong {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

html body.portal-body #apologyAttendanceTable td:nth-child(4) small {
  display: block;
  margin-top: 4px
}

html body.portal-body #apologyAttendanceTable td:nth-child(5) {
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  line-height: 1.5
}

.apology-evidence-action {
  display: inline-grid !important;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0 !important
}

.apology-evidence-action svg {
  width: 18px;
  height: 18px
}

.approved-apology-evidence-dialog {
  width: min(92vw, 860px);
  max-width: 860px;
  max-height: 90vh;
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(15, 34, 58, .28);
  overflow: hidden
}

.approved-apology-evidence-dialog::backdrop {
  background: rgba(13, 28, 45, .68);
  backdrop-filter: blur(2px)
}

.approved-apology-evidence-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  padding: 20px 24px;
  border-bottom: 1px solid #e5eaf0
}

.approved-apology-evidence-head h3 {
  margin: 3px 0 4px;
  color: #173c63;
  font-size: 1.15rem
}

.approved-apology-evidence-head p {
  margin: 0;
  color: #64748b;
  font-size: .9rem
}

.approved-apology-evidence-head [data-close] {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 10px;
  background: #f3f5f7;
  color: #173c63;
  font-size: 22px;
  cursor: pointer
}

.approved-apology-evidence-body {
  display: grid;
  place-items: center;
  max-height: calc(90vh - 100px);
  min-height: 160px;
  padding: 16px;
  background: #f3f6f9;
  overflow: auto
}

.approved-apology-evidence-body img {
  display: block;
  max-width: 100%;
  max-height: calc(90vh - 140px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 8px
}

@media(max-width:600px) {
  .approved-apology-evidence-head {
    padding: 16px
  }

  .approved-apology-evidence-body {
    padding: 10px
  }
}

/* Keep apology status tabs on one consistent, readable column layout. */
html body.portal-body .apology-review-table-wrap {
  overflow-x: auto !important
}

html body.portal-body .apology-review-table {
  width: 100% !important;
  min-width: 1296px !important;
  max-width: none !important;
  table-layout: fixed !important
}

html body.portal-body .apology-review-table .col-no {
  width: 36px !important
}

html body.portal-body .apology-review-table .col-name {
  width: 150px !important
}

html body.portal-body .apology-review-table .col-reg {
  width: 120px !important
}

html body.portal-body .apology-review-table .col-session {
  width: 170px !important
}

html body.portal-body .apology-review-table .col-reason {
  width: 300px !important
}

html body.portal-body .apology-review-table .col-evidence {
  width: 60px !important
}

html body.portal-body .apology-review-table .col-location {
  width: 110px !important
}

html body.portal-body .apology-review-table .col-submitted {
  width: 130px !important
}

html body.portal-body .apology-review-table .col-status {
  width: 80px !important
}

html body.portal-body .apology-review-table .col-action {
  width: 140px !important
}

html body.portal-body .apology-review-table th,
html body.portal-body .apology-review-table td {
  padding: 10px 9px !important;
  vertical-align: middle !important
}

html body.portal-body .apology-review-table th:first-child,
html body.portal-body .apology-review-table td:first-child {
  width: 36px !important
}

html body.portal-body .apology-review-table td:nth-child(4).apology-session-name {
  width: 170px !important;
  white-space: nowrap !important
}

html body.portal-body .apology-review-table td:nth-child(5).apology-reason-text {
  width: 300px !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important
}

html body.portal-body .apology-review-table th:nth-child(9),
html body.portal-body .apology-review-table td:nth-child(9) {
  width: 80px !important;
  max-width: 80px !important
}

html body.portal-body .apology-review-table th:last-child,
html body.portal-body .apology-review-table td:last-child {
  width: 140px !important
}

html body.portal-body .apology-review-table td.apology-status-cell {
  white-space: normal !important
}

html body.portal-body .apology-review-table td.apology-status-cell .review-meta,
html body.portal-body .apology-review-table td.apology-status-cell .review-note {
  display: block !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  line-height: 1.25;
  font-size: 10px
}

html body.portal-body .apology-review-table td.apology-actions-cell {
  white-space: nowrap !important
}

html body.portal-body .apology-review-table td.apology-scout-name,
html body.portal-body .apology-review-table td.apology-reg-number,
html body.portal-body .apology-review-table td.apology-session-name {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  overflow-wrap: normal !important;
  word-break: keep-all !important
}

html body.portal-body .apology-review-table td.apology-scout-name strong,
html body.portal-body .apology-review-table td.apology-session-name strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

html body.portal-body .apology-review-table td.apology-scout-name small,
html body.portal-body .apology-review-table td.apology-session-name small {
  display: block;
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

html body.portal-body .apology-review-table td.apology-reason-text {
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  line-height: 1.45
}

html body.portal-body .apology-review-table .apology-action-buttons {
  gap: 6px !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  white-space: nowrap !important
}

html body.portal-body .apology-review-table .apology-action-buttons .btn {
  padding: 6px 9px !important;
  font-size: 12px !important
}

/* Use unmistakable solid colors for confirm and destructive actions throughout the portal. */
html body .btn.success,
html body button.btn.primary[name="action"][value^="approve"],
html body button.btn.primary[name="action"][value="review_apology"],
html body button.btn.primary[name="decision"][value="approve"] {
  background: #16834a !important;
  border: 1px solid #16834a !important;
  color: #fff !important;
  box-shadow: 0 2px 5px rgba(22, 131, 74, .2) !important
}

html body .btn.success:hover,
html body button.btn.primary[name="action"][value^="approve"]:hover,
html body button.btn.primary[name="action"][value="review_apology"]:hover,
html body button.btn.primary[name="decision"][value="approve"]:hover {
  background: #116b3b !important;
  border-color: #116b3b !important;
  color: #fff !important
}

html body .btn.danger {
  background: #d92d20 !important;
  border: 1px solid #d92d20 !important;
  color: #fff !important;
  box-shadow: 0 2px 5px rgba(217, 45, 32, .18) !important
}

html body .btn.danger:hover {
  background: #b42318 !important;
  border-color: #b42318 !important;
  color: #fff !important
}

html body .btn.success:focus-visible,
html body .btn.danger:focus-visible,
html body button.btn.primary[name="action"][value^="approve"]:focus-visible,
html body button.btn.primary[name="action"][value="review_apology"]:focus-visible,
html body button.btn.primary[name="decision"][value="approve"]:focus-visible {
  outline: 3px solid rgba(59, 130, 246, .42) !important;
  outline-offset: 2px
}

/* Keep the live date and clock together in the portal header. */
html body.portal-body .topbar-meta .header-date-time {
  display: flex !important;
  position: static !important;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 1px;
  white-space: nowrap;
  line-height: 1.2
}

html body.portal-body .topbar-meta .header-calendar-date {
  display: block !important;
  color: var(--fl-ink, var(--primary, #1e3a5f)) !important;
  font-size: 12px !important;
  font-weight: 600 !important
}

html body.portal-body .topbar-meta .header-centre-time {
  position: static !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  color: var(--fl-muted, var(--muted, #667085)) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important
}

@media(max-width:600px) {
  html body.portal-body .topbar-meta .header-date-time {
    display: flex !important
  }

  html body.portal-body .topbar-meta .header-calendar-date {
    display: block !important
  }
}

/* Dashboard analytics: compact monthly comparisons and membership mix. */
.dashboard-chart-strip-secondary {
  margin-top: 14px
}

.dashboard-month-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin: -2px 0 8px;
  color: var(--muted, #74818b);
  font-size: 11px
}

.dashboard-month-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px
}

.dashboard-month-legend i,
.dashboard-membership-legend i {
  display: inline-block;
  width: 9px;
  height: 9px;
  flex: none;
  border-radius: 3px
}

.attendance-legend,
.attendance-bar {
  background: #2f73d9
}

.sessions-legend {
  background: #f0a522
}

.dashboard-month-bars {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 7px;
  height: 154px;
  align-items: end;
  padding: 5px 0 0
}

.dashboard-month-column {
  min-width: 0;
  height: 100%;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 6px;
  align-items: end;
  text-align: center
}

.dashboard-month-pair {
  height: 128px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
  border-bottom: 1px solid var(--border, #e3e8ee)
}

.dashboard-month-pair i {
  display: block;
  flex: 0 0 40%;
  min-height: 2px;
  border-radius: 4px 4px 0 0;
  transition: height .25s ease
}

.dashboard-month-pair .sessions-bar {
  background: #f0a522
}

.dashboard-month-column small {
  color: var(--muted, #74818b);
  font-size: 9px
}

.dashboard-membership-mix {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  min-height: 165px
}

.dashboard-membership-donut {
  width: 154px;
  height: 154px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  position: relative
}

.dashboard-membership-donut>div {
  width: 68%;
  height: 68%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--white, #fff)
}

.dashboard-membership-donut strong {
  font-size: 25px;
  color: var(--primary, #1e3a5f)
}

.dashboard-membership-donut small {
  font-size: 10px;
  color: var(--muted, #74818b)
}

.dashboard-membership-legend {
  display: grid;
  gap: 10px;
  min-width: 140px
}

.dashboard-membership-legend>div {
  display: grid;
  grid-template-columns: 10px 1fr auto;
  gap: 8px;
  align-items: center;
  font-size: 12px
}

.dashboard-membership-legend strong {
  color: var(--primary, #1e3a5f);
  font-size: 12px
}

.member-active {
  background: #1c9b62
}

.member-inactive {
  background: #e59b18
}

.member-pending {
  background: #356fbd
}

.member-rejected {
  background: #d94b4b
}

@media(max-width:760px) {
  .dashboard-month-bars {
    grid-template-columns: repeat(12, minmax(20px, 1fr));
    gap: 5px;
    overflow-x: auto
  }

  .dashboard-membership-mix {
    gap: 16px
  }

  .dashboard-membership-donut {
    width: 128px;
    height: 128px
  }

  .dashboard-membership-legend {
    min-width: 115px
  }
}

@media(max-width:420px) {
  .dashboard-month-bars {
    grid-template-columns: repeat(12, minmax(24px, 1fr))
  }

  .dashboard-membership-mix {
    justify-content: space-between;
    gap: 10px
  }

  .dashboard-membership-donut {
    width: 112px;
    height: 112px
  }
}

/* Keep scout filters and bulk actions together in a single responsive row. */
.portal-body .scouts-controls-row {
  display: grid !important;
  grid-template-columns: minmax(170px, 1.45fr) minmax(125px, .9fr) minmax(145px, 1.05fr) minmax(145px, 1.05fr) minmax(130px, .95fr) minmax(82px, .55fr) auto minmax(175px, 1.15fr) auto;
  gap: 8px !important;
  align-items: end !important;
  margin: 0 0 14px !important
}

.portal-body .scouts-controls-row>form.scouts-filter-grid,
.portal-body .scouts-controls-row>form.scout-bulk-inline {
  display: contents !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important
}

.portal-body .scouts-controls-row .scouts-filter-grid .filter-search {
  max-width: none !important;
  grid-column: auto !important
}

.portal-body .scouts-controls-row .scouts-filter-grid .filter-rows {
  max-width: none !important
}

.portal-body .scouts-controls-row .scouts-filter-grid .filter-buttons {
  align-self: end !important
}

.portal-body .scouts-controls-row .bulk-operation-select {
  display: grid !important;
  gap: 5px !important;
  min-width: 0 !important;
  margin: 0 !important
}

.portal-body .scouts-controls-row .bulk-operation-select>span {
  font-size: 11px !important;
  line-height: 1.2 !important;
  color: var(--muted, #667085) !important
}

.portal-body .scouts-controls-row .bulk-operation-select select {
  height: 36px !important;
  min-width: 0 !important;
  width: 100% !important;
  padding: 6px 9px !important;
  font-size: 12.5px !important;
  border: 1px solid var(--border, #ccd6e0) !important;
  border-radius: 8px !important;
  background: var(--surface, #fff) !important;
  color: var(--text, #17324d) !important
}

.portal-body .scouts-controls-row .bulk-apply-button {
  width: 38px !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  font-size: 19px !important;
  line-height: 1 !important
}

.portal-body .scouts-controls-row .bulk-approve-all {
  height: 36px !important;
  min-height: 36px !important;
  padding: 6px 10px !important;
  white-space: nowrap !important;
  font-size: 12px !important
}

@media(max-width:1450px) {
  .portal-body .scouts-controls-row {
    grid-template-columns: minmax(165px, 1.4fr) repeat(3, minmax(125px, 1fr)) minmax(120px, .9fr) minmax(78px, .6fr) auto minmax(165px, 1.1fr) auto !important
  }
}

@media(max-width:1180px) {
  .portal-body .scouts-controls-row {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important
  }

  .portal-body .scouts-controls-row .filter-search {
    grid-column: span 2 !important
  }

  .portal-body .scouts-controls-row .bulk-operation-select {
    grid-column: span 2 !important
  }

  .portal-body .scouts-controls-row .filter-rows {
    max-width: none !important
  }
}

@media(max-width:820px) {
  .portal-body .scouts-controls-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important
  }

  .portal-body .scouts-controls-row .filter-search {
    grid-column: 1/-1 !important
  }

  .portal-body .scouts-controls-row .bulk-operation-select {
    grid-column: auto !important
  }

  .portal-body .scouts-controls-row .bulk-approve-all {
    grid-column: 1/-1 !important
  }
}

@media(max-width:520px) {
  .portal-body .scouts-controls-row {
    grid-template-columns: 1fr !important
  }

  .portal-body .scouts-controls-row .filter-search,
  .portal-body .scouts-controls-row .bulk-operation-select,
  .portal-body .scouts-controls-row .bulk-approve-all {
    grid-column: auto !important
  }

  .portal-body .scouts-controls-row .filter-buttons {
    width: 100% !important;
    display: flex !important
  }

  .portal-body .scouts-controls-row .filter-buttons .btn {
    flex: 1
  }
}

/* Show scout status, list, and investiture tabs together on one horizontal line. */
.portal-body .scout-tabs-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 12px 0 16px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  white-space: nowrap !important;
  scrollbar-width: thin
}

.portal-body .scout-tabs-row>.scout-status-tabs,
.portal-body .scout-tabs-row>.scout-duplicate-tabs,
.portal-body .scout-tabs-row>.investiture-subtabs {
  display: flex !important;
  flex: 0 0 auto !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  width: max-content !important;
  max-width: none !important;
  margin: 0 !important;
  white-space: nowrap !important
}

.portal-body .scout-tabs-row>.scout-status-tabs {
  overflow: visible !important
}

.portal-body .scout-tabs-row>.scout-duplicate-tabs a,
.portal-body .scout-tabs-row>.investiture-subtabs a {
  flex: 0 0 auto !important;
  white-space: nowrap !important
}

.portal-body .scout-tabs-row::-webkit-scrollbar {
  height: 5px
}

.portal-body .scout-tabs-row::-webkit-scrollbar-thumb {
  background: rgba(91, 112, 134, .35);
  border-radius: 5px
}

/* Fill the remaining dashboard chart columns with service and participation analytics. */
.crew-dashboard-theme .dashboard-chart-strip,
.crew-dashboard-theme .dashboard-chart-strip-secondary {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: stretch
}

.crew-dashboard-theme .dashboard-trend-card {
  order: 1
}

.crew-dashboard-theme .dashboard-crew-snapshot {
  order: 2
}

.crew-dashboard-theme .dashboard-service-card {
  order: 3
}

.dashboard-service-total {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: -5px 0 3px;
  color: var(--muted, #74818b);
  font-size: 11px
}

.dashboard-service-total strong {
  color: var(--primary, #1e3a5f);
  font-size: 20px
}

.dashboard-service-bars {
  height: 150px;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 5px;
  align-items: end;
  padding: 4px 0 0
}

.dashboard-service-bars>div {
  height: 100%;
  min-width: 0;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 5px;
  align-items: end;
  text-align: center
}

.dashboard-service-bars i {
  align-self: end;
  display: block;
  width: 72%;
  min-height: 2px;
  justify-self: center;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, #13a878, #2f73d9)
}

.dashboard-service-bars small {
  font-size: 9px;
  color: var(--muted, #74818b)
}

.dashboard-participation-mix {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-height: 165px
}

.dashboard-participation-donut {
  width: 132px;
  height: 132px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%
}

.dashboard-participation-donut>div {
  width: 68%;
  height: 68%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--white, #fff)
}

.dashboard-participation-donut strong {
  font-size: 22px;
  color: var(--primary, #1e3a5f)
}

.dashboard-participation-donut small {
  font-size: 10px;
  color: var(--muted, #74818b)
}

.dashboard-participation-legend {
  display: grid;
  gap: 12px;
  min-width: 120px
}

.dashboard-participation-legend>div {
  display: grid;
  grid-template-columns: 10px 1fr auto;
  gap: 7px;
  align-items: center;
  font-size: 11px
}

.dashboard-participation-legend>div i {
  width: 9px;
  height: 9px;
  border-radius: 3px
}

.participation-attended {
  background: #2f73d9
}

.participation-apology {
  background: #f0a522
}

@media(max-width:1180px) {

  .crew-dashboard-theme .dashboard-chart-strip,
  .crew-dashboard-theme .dashboard-chart-strip-secondary {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important
  }
}

@media(max-width:760px) {

  .crew-dashboard-theme .dashboard-chart-strip,
  .crew-dashboard-theme .dashboard-chart-strip-secondary {
    grid-template-columns: 1fr !important
  }

  .dashboard-participation-mix {
    justify-content: flex-start
  }
}

/* Dedicated User View Profile Dialog */
dialog.user-view-modal-dialog {
  max-width: 700px !important;
  width: 95% !important;
  border-radius: 16px !important;
  padding: 0 !important;
  border: 1px solid var(--theme-line, #cbd5e1) !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.32) !important;
  overflow: hidden !important;
  background: var(--theme-panel, #ffffff) !important;
  color: var(--theme-ink, #0f172a) !important;
}

dialog.user-view-modal-dialog::backdrop {
  background: rgba(15, 23, 42, 0.65) !important;
  backdrop-filter: blur(4px) !important;
}

.user-view-wrapper {
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  overflow-y: auto;
}

.user-view-header {
  background: linear-gradient(135deg, #093322 0%, #115e3b 50%, #0d3824 100%);
  color: #ffffff;
  padding: 22px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  position: relative;
}

.user-view-header-left {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
  flex: 1 1 auto;
}

.user-view-photo-container {
  position: relative;
  flex-shrink: 0;
  width: 86px;
  height: 86px;
}

.user-view-photo-img {
  width: 86px !important;
  height: 86px !important;
  min-width: 86px !important;
  min-height: 86px !important;
  max-width: 86px !important;
  max-height: 86px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: block !important;
  border: 3.5px solid #ffffff !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25) !important;
  background: #e2e8f0;
}

.user-view-photo-fallback {
  width: 86px !important;
  height: 86px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 28px !important;
  font-weight: 800 !important;
  border: 3.5px solid #ffffff !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25) !important;
}

.user-view-content {
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: var(--theme-panel, #ffffff);
}