:root {
  --easyhoa-primary: #0d5295;
  --easyhoa-primary-hover: #0a3d70;
  --easyhoa-primary-soft: #6994bd;
  --easyhoa-secondary: #f5b034;
  --easyhoa-secondary-hover: #d99412;
  --easyhoa-secondary-soft: #f8c467;
  --easyhoa-secondary-soft-bg: #fef6e7;
  --easyhoa-accent: var(--easyhoa-secondary);
  --easyhoa-hover-bg: #e9eff5;
  --easyhoa-primary-soft-bg: #dbe5f0;
  --easyhoa-primary-soft-bg-hover: #cddbeb;
  --easyhoa-danger-text: #b81800;
  --easyhoa-danger-bg: #ffe0db;
  --easyhoa-table-stripe-bg: rgba(159, 166, 188, 0.06);
  --easyhoa-table-head-bg: #eef0f4;
  --easyhoa-soft-gray-bg: #f5f7fa;
  --phoenix-navbar-vertical-link-hover-color: var(--easyhoa-secondary);
  --phoenix-navbar-vertical-link-active-color: var(--easyhoa-secondary);
  --phoenix-navbar-vertical-link-hover-bg: var(--easyhoa-hover-bg);
  /* Soft yellow chip fill; body text for contrast (logo yellow / secondary-hover fail WCAG on this bg). */
  --phoenix-choices-item-bg: var(--easyhoa-secondary-soft-bg);
  --phoenix-choices-item-color: var(--phoenix-body-color, #31374a);
  --easyhoa-teal-text-emphasis: #0f6e66;
  --easyhoa-teal-bg-subtle: #d0f4f0;
  --easyhoa-teal-border-subtle: #5dcdc0;
  --phoenix-tooltip-bg: #ffffff;
  --phoenix-tooltip-color: #31374a;
  --phoenix-tooltip-opacity: 1;
  --phoenix-tooltip-padding-x: 0.75rem;
  --phoenix-tooltip-padding-y: 0.55rem;
  --phoenix-tooltip-font-size: 0.8rem;
  --phoenix-tooltip-border-radius: 0.5rem;
  --phoenix-tooltip-max-width: 16rem;
}

/* White page background (business decision). Phoenix paints the page with
   --phoenix-body-bg; inset gray panels use --easyhoa-soft-gray-bg instead. */
:root,
[data-bs-theme=light] {
  --phoenix-body-bg: #fff;
  --phoenix-body-bg-rgb: 255, 255, 255;
  /* --phoenix-body-bg: #f5f7fa; --phoenix-body-bg-rgb: 245, 247, 250; Phoenix default page gray — restore both (and drop the two lines above) to roll back */
  --phoenix-calendar-border-color: var(--easyhoa-soft-gray-bg);
}

/* `bg-body` marks inset panels inside white forms; keep them gray */
.bg-body {
  --phoenix-body-bg-rgb: 245, 247, 250;
}

[data-bs-theme=dark] {
  --easyhoa-teal-text-emphasis: #6ed9cb;
  --easyhoa-teal-bg-subtle: #1a2a2a;
  --easyhoa-teal-border-subtle: #2d5550;
}

/* Falcon leftover used by searchable account/vendor/category dropdowns */
.max-vh-50 {
  max-height: 50vh;
}

/* Falcon soft badges → Phoenix contrast (email groups column, etc.) */
.badge-soft-primary {
  color: var(--easyhoa-primary) !important;
  background-color: var(--easyhoa-hover-bg) !important;
}

.badge-soft-secondary {
  color: var(--phoenix-body-color, #31374a) !important;
  background-color: var(--easyhoa-secondary-soft-bg) !important;
}

.badge-soft-success {
  color: #00864e !important;
  background-color: #ccf6e4 !important;
}

.badge-soft-danger {
  color: var(--easyhoa-danger-text) !important;
  background-color: var(--easyhoa-danger-bg) !important;
}

.modal .dropdown-menu .max-vh-50 {
  max-height: min(16rem, 40vh);
}

.badge-phoenix-teal {
  --phoenix-badge-bg: var(--easyhoa-teal-bg-subtle);
  --phoenix-badge-color: var(--easyhoa-teal-text-emphasis);
  --phoenix-badge-border-color: var(--easyhoa-teal-border-subtle);
}

.navbar-vertical .navbar-vertical-content .navbar-nav .nav-link.active,
.navbar-vertical .navbar-vertical-content .navbar-nav .nav-link.active .nav-link-text,
.navbar-vertical .navbar-vertical-content .navbar-nav .nav-link.active .nav-link-icon {
  color: var(--easyhoa-accent);
}

.navbar-vertical .navbar-vertical-content .navbar-nav .nav-link.active svg {
  stroke: var(--easyhoa-accent);
}

.nav-underline {
  --phoenix-nav-underline-link-active-color: var(--easyhoa-primary);
}

.nav-underline .nav-link {
  color: var(--phoenix-body-color, #31374a);
}

.nav-underline .nav-link.active,
.nav-underline .show > .nav-link {
  color: var(--easyhoa-primary);
}

.modal-content {
  border-color: var(--phoenix-border-color-translucent, rgba(46, 54, 80, 0.12));
}

.modal-footer {
  background-color: var(--phoenix-emphasis-bg, #fff);
  border-color: var(--phoenix-border-color-translucent, rgba(46, 54, 80, 0.12));
}

/* Modal headers are the section-card header band (business standard): tinted fill,
   translucent divider, bold primary title, soft controls on white. Beats the
   `bg-body-emphasis` / `easyhoa-bg-header` utilities on existing markup. Phoenix keeps the
   top corners on the modal-content radius (square on fullscreen). Footers stay white.
   No :is() so older Android WebViews keep the rules. */
.modal .modal-header {
  --phoenix-modal-header-padding-x: 1.5rem;
  --phoenix-modal-header-padding-y: 1rem;
  --easyhoa-band-control-border: #c3d3e5;
  padding: 1rem 1.5rem;
  background-color: var(--easyhoa-hover-bg, #e9eff5) !important;
  border-bottom: 1px solid var(--phoenix-border-color-translucent, rgba(46, 54, 80, 0.12)) !important;
}

.modal .modal-header .modal-title,
.modal .modal-header .easyhoa-modal-title,
.modal .modal-header h5,
.modal .modal-header .h5 {
  color: var(--easyhoa-primary) !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  line-height: 1.2;
}

.modal .modal-header .text-body-tertiary:not(.btn):not(.badge),
.modal .modal-header .text-body-secondary:not(.btn):not(.badge),
.modal .modal-header .text-muted:not(.btn):not(.badge) {
  color: var(--phoenix-secondary-color, #525b75) !important;
}

.modal .modal-header .easyhoa-btn-primary:not(.easyhoa-btn-solid):not(:hover):not(:focus):not(:active):not(.active):not(.show):not(:disabled):not(.disabled) {
  --phoenix-btn-bg: #fff;
  --phoenix-btn-border-color: var(--easyhoa-band-control-border, #c3d3e5);
  color: var(--easyhoa-primary) !important;
  background-color: #fff !important;
  border-color: var(--easyhoa-band-control-border, #c3d3e5) !important;
}

.modal .modal-header .easyhoa-btn-secondary-soft:not(:hover):not(:focus):not(:active):not(.active):not(:disabled):not(.disabled) {
  background-color: #fff !important;
  border-color: var(--easyhoa-secondary-soft) !important;
}

.modal .modal-header .btn-phoenix-secondary:not(:hover):not(:focus):not(:active):not(.show) {
  --phoenix-btn-bg: #fff;
  background-color: #fff !important;
  border-color: var(--easyhoa-band-control-border, #c3d3e5) !important;
}

.modal .modal-header .form-control:not(:disabled),
.modal .modal-header .form-select:not(:disabled) {
  background-color: #fff;
}

/* Light tooltips — match Phoenix cards instead of charcoal.
   theme.css redeclares --phoenix-tooltip-* on .tooltip itself, so :root alone loses; set both Phoenix and Bootstrap names here. */
.tooltip {
  --phoenix-tooltip-bg: #ffffff;
  --phoenix-tooltip-color: #31374a;
  --phoenix-tooltip-opacity: 1;
  --phoenix-tooltip-padding-x: 0.75rem;
  --phoenix-tooltip-padding-y: 0.55rem;
  --phoenix-tooltip-font-size: 0.8rem;
  --phoenix-tooltip-border-radius: 0.5rem;
  --phoenix-tooltip-max-width: 16rem;
  --bs-tooltip-bg: #ffffff;
  --bs-tooltip-color: #31374a;
  --bs-tooltip-opacity: 1;
  --bs-tooltip-padding-x: 0.75rem;
  --bs-tooltip-padding-y: 0.55rem;
  --bs-tooltip-font-size: 0.8rem;
  --bs-tooltip-border-radius: 0.5rem;
  --bs-tooltip-max-width: 16rem;
  --easyhoa-tooltip-border: rgba(46, 54, 80, 0.16);
  filter: drop-shadow(0 0.35rem 0.75rem rgba(46, 54, 80, 0.14));
}

.tooltip.show {
  opacity: 1;
}

.tooltip .tooltip-inner {
  color: #31374a;
  background-color: #ffffff;
  border: 1px solid var(--easyhoa-tooltip-border);
  border-radius: 0.5rem;
  padding: 0.55rem 0.75rem;
  max-width: 16rem;
  text-align: start;
  font-weight: 600;
  line-height: 1.35;
}

/* Arrow: border-colored triangle with a white one 1px inside, so it matches the bordered card */
.tooltip .tooltip-arrow::after {
  position: absolute;
  content: "";
  border-color: transparent;
  border-style: solid;
}

.bs-tooltip-top .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before {
  border-top-color: var(--easyhoa-tooltip-border);
}

.bs-tooltip-top .tooltip-arrow::after,
.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::after {
  top: -2px;
  border-width: 0.4rem 0.4rem 0;
  border-top-color: #ffffff;
}

.bs-tooltip-bottom .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before {
  border-bottom-color: var(--easyhoa-tooltip-border);
}

.bs-tooltip-bottom .tooltip-arrow::after,
.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::after {
  bottom: -2px;
  border-width: 0 0.4rem 0.4rem;
  border-bottom-color: #ffffff;
}

.bs-tooltip-start .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before {
  border-left-color: var(--easyhoa-tooltip-border);
}

.bs-tooltip-start .tooltip-arrow::after,
.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::after {
  left: -2px;
  border-width: 0.4rem 0 0.4rem 0.4rem;
  border-left-color: #ffffff;
}

.bs-tooltip-end .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before {
  border-right-color: var(--easyhoa-tooltip-border);
}

.bs-tooltip-end .tooltip-arrow::after,
.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::after {
  right: -2px;
  border-width: 0.4rem 0.4rem 0.4rem 0;
  border-right-color: #ffffff;
}

.easyhoa-tooltip-meta {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 8rem;
}

.easyhoa-tooltip-meta-label {
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--phoenix-tertiary-color, #6e7891);
}

.easyhoa-tooltip-meta-name {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--phoenix-emphasis-color, #141824);
}

.easyhoa-tooltip-meta-date {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--phoenix-tertiary-color, #6e7891);
}

/* Title and actions share a row when they fit; otherwise the actions wrap to their own row.
   The title block never shrinks below the h2's one-line width (capped at the container), so it is never squeezed mid-word. */
.easyhoa-page-header {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  column-gap: 1.5rem;
  row-gap: 1rem;
}

.easyhoa-page-header-copy {
  flex: 1 0 auto;
  min-width: 0;
  max-width: 100%;
}

.easyhoa-page-header-copy h2 {
  word-break: normal;
  overflow-wrap: break-word;
}

/* Subtitle wraps to the title block's width and adds nothing to its intrinsic width. */
.easyhoa-page-header-copy > p {
  contain: inline-size;
}

.easyhoa-page-header-actions {
  flex: 0 1 auto;
  max-width: 100%;
  margin-left: auto;
  justify-content: flex-end;
}

/* Title-row actions are always Phoenix .btn-sm size, incl. dropdown toggles, btn-groups and super-admin buttons.
   Sizes are set directly as well as through the theme.css .btn-sm variables so role classes cannot resize them. */
.easyhoa-page-header .easyhoa-page-header-actions .btn {
  --phoenix-btn-padding-y: 0.5rem;
  --phoenix-btn-padding-x: 1rem;
  --phoenix-btn-font-size: 0.8rem;
  --phoenix-btn-border-radius: 0.375rem;
  font-size: 0.8rem;
  line-height: var(--phoenix-btn-line-height, 1.2);
  flex: 0 0 auto;
  align-self: flex-start;
  height: auto;
}

.easyhoa-page-header .easyhoa-page-header-actions > .btn {
  border-radius: 0.375rem;
}

.easyhoa-page-header .easyhoa-page-header-actions .btn:not(.btn-icon):not(.dropdown-toggle-split) {
  padding: 0.5rem 1rem;
}

.easyhoa-page-header .easyhoa-page-header-actions .btn.dropdown-toggle-split {
  padding: 0.5rem 0.75rem;
}

.easyhoa-page-header-actions .btn-group {
  flex: 0 0 auto;
}

.easyhoa-page-header .easyhoa-page-header-actions .btn-group > .btn {
  align-self: stretch;
}

@media (min-width: 576px) {
  .easyhoa-page-header-actions .btn .me-sm-2 {
    margin-right: 0.375rem !important;
  }
}

.form-check-input:checked {
  background-color: var(--easyhoa-primary);
  border-color: var(--easyhoa-primary);
}

@media (min-width: 992px) {
  .navbar-vertical.navbar-expand-lg .navbar-vertical-content .navbar-nav .nav-link.active {
    background-color: var(--easyhoa-hover-bg);
    color: var(--easyhoa-accent);
  }
}

.navbar-vertical .navbar-vertical-content .navbar-nav .nav-link.active .nav-link-badge,
.navbar-vertical .navbar-vertical-content .navbar-nav .nav-link.active .badge-phoenix-danger {
  color: var(--phoenix-badge-color);
}

.easyhoa-email-page .email-sidebar .nav-link.active,
.easyhoa-email-page .email-sidebar .nav-link.active .nav-item-count,
.easyhoa-email-page .email-sidebar .email-label-filter.active,
.easyhoa-phone-page .email-sidebar .nav-link.active,
.easyhoa-phone-page .email-sidebar .nav-link.active .nav-item-count {
  color: var(--easyhoa-primary);
}

.easyhoa-email-page > .row > [class*="col-"],
.easyhoa-phone-page > .row > [class*="col-"] {
  min-width: 0;
}

/* Voicemails not heard yet: blue dot + bold From / Date + "New" badge + primary left edge; cleared when the recording plays */
.easyhoa-dt tr.is-unread .from_label,
.easyhoa-dt tr.is-unread > td.dt {
  font-weight: 700;
  color: var(--phoenix-emphasis-color);
}

.easyhoa-dt tr.is-unread > td:first-child {
  background-image: linear-gradient(var(--easyhoa-primary), var(--easyhoa-primary));
  background-size: 3px 100%;
  background-repeat: no-repeat;
}

.easyhoa-vm-dot {
  display: inline-block;
  flex-shrink: 0;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--easyhoa-primary);
}

/* min-width: 0 lets nested email/phone columns shrink. Do not set
   max-width: 100% on .content > .row — that clips Phoenix’s negative
   gutters and insets #main_content under the page title. */
.content > .row,
#main_content {
  min-width: 0;
}

#main_content {
  overflow-x: clip;
}

@media (max-width: 991.98px) {
  .easyhoa-email-page .email-sidebar.phoenix-offcanvas,
  .easyhoa-phone-page .email-sidebar.phoenix-offcanvas {
    z-index: 1035;
    box-shadow: var(--phoenix-box-shadow-sm);
  }

  .easyhoa-email-page .phoenix-offcanvas.show ~ .phoenix-offcanvas-backdrop,
  .easyhoa-phone-page .phoenix-offcanvas.show ~ .phoenix-offcanvas-backdrop {
    position: fixed;
    top: var(--phoenix-navbar-top-height) !important;
    left: 0;
    height: 100vh;
    width: 100vw;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1030;
  }
}

@media (min-width: 992px) {
  .easyhoa-email-page > .row,
  .easyhoa-phone-page > .row {
    flex-wrap: nowrap;
  }

  .easyhoa-email-page .email-sidebar.phoenix-offcanvas,
  .easyhoa-email-page .email-sidebar.phoenix-offcanvas-fixed,
  .easyhoa-phone-page .email-sidebar.phoenix-offcanvas,
  .easyhoa-phone-page .email-sidebar.phoenix-offcanvas-fixed {
    position: sticky !important;
    left: auto !important;
    top: calc(var(--phoenix-navbar-top-height) + 1.25rem) !important;
    bottom: auto !important;
    transform: none !important;
    height: auto !important;
    padding: 0 !important;
    z-index: auto !important;
    box-shadow: none !important;
    overflow: visible;
  }

  .easyhoa-email-page .email-sidebar-width,
  .easyhoa-phone-page .email-sidebar-width {
    width: 220px;
  }

  .easyhoa-email-page .email-sidebar .email-content,
  .easyhoa-phone-page .email-sidebar .email-content {
    height: auto !important;
    overflow: visible;
  }
}

.easyhoa-phone-page .easyhoa-dt,
.easyhoa-phone-page .easyhoa-dt .table-responsive {
  overflow: visible;
}

.easyhoa-phone-actions-menu,
.easyhoa-actions-menu {
  min-width: 12.5rem;
}

.easyhoa-phone-actions-menu .dropdown-item,
.easyhoa-actions-menu .dropdown-item {
  display: flex;
  align-items: center;
  width: 100%;
  color: var(--phoenix-body-color, #31374a);
}

.easyhoa-phone-actions-menu .dropdown-item:hover,
.easyhoa-phone-actions-menu .dropdown-item:focus,
.easyhoa-actions-menu .dropdown-item:hover,
.easyhoa-actions-menu .dropdown-item:focus {
  background-color: var(--easyhoa-hover-bg);
  color: var(--phoenix-body-color, #31374a);
}

.easyhoa-phone-actions-menu .dropdown-item.text-danger,
.easyhoa-phone-actions-menu .dropdown-item .text-danger,
.easyhoa-actions-menu .dropdown-item.text-danger,
.easyhoa-actions-menu .dropdown-item .text-danger {
  color: var(--easyhoa-danger-text) !important;
}

.easyhoa-phone-actions-menu .dropdown-item.text-danger:hover,
.easyhoa-phone-actions-menu .dropdown-item.text-danger:focus,
.easyhoa-actions-menu .dropdown-item.text-danger:hover,
.easyhoa-actions-menu .dropdown-item.text-danger:focus {
  background-color: var(--easyhoa-danger-bg);
  color: var(--easyhoa-danger-text) !important;
}

.breadcrumb-item.active {
  color: var(--easyhoa-accent) !important;
}

.content > #breadcrumb_container h2.text-body-emphasis,
#breadcrumb_container h2.text-body-emphasis {
  color: var(--phoenix-emphasis-color, #141824) !important;
}

/*
 * EasyHOA buttons
 * - .easyhoa-btn-primary = soft light-blue fill (View, Print, Edit, etc.)
 * - .easyhoa-btn-primary.easyhoa-btn-solid = solid blue (Save, Submit, New)
 * - .easyhoa-btn-outline-primary = main EasyHOA blue outline
 * - .easyhoa-btn-outline-primary-soft = softer blue outline
 * - .easyhoa-btn-secondary = white fill, #c3d3e5 border, primary text (Print / PDF / CSV)
 * - .easyhoa-btn-secondary-soft = soft light-yellow fill (Filter, etc.)
 * - .easyhoa-btn-secondary.easyhoa-btn-solid = solid yellow
 * - .easyhoa-btn-success = soft green (Approvals Approve check)
 * - .easyhoa-btn-delete = soft red (Delete / Archive / Deny)
 */

.easyhoa-btn-primary {
  --phoenix-btn-color: var(--easyhoa-primary);
  --phoenix-btn-bg: var(--easyhoa-primary-soft-bg);
  --phoenix-btn-border-color: var(--easyhoa-primary-soft-bg);
  --phoenix-btn-hover-color: #fff;
  --phoenix-btn-hover-bg: var(--easyhoa-primary);
  --phoenix-btn-hover-border-color: var(--easyhoa-primary);
  --phoenix-btn-active-color: #fff;
  --phoenix-btn-active-bg: var(--easyhoa-primary);
  --phoenix-btn-active-border-color: var(--easyhoa-primary);
  color: var(--easyhoa-primary);
  background-color: var(--easyhoa-primary-soft-bg);
  border: 1px solid var(--easyhoa-primary-soft-bg);
  font-weight: 600;
}

.easyhoa-btn-primary:hover,
.easyhoa-btn-primary:focus,
.easyhoa-btn-primary:active,
.easyhoa-btn-primary.active {
  color: #fff;
  background-color: var(--easyhoa-primary);
  border-color: var(--easyhoa-primary);
}

.dt-container .easyhoa-btn-primary:not(.easyhoa-btn-solid),
.easyhoa-dt .easyhoa-btn-primary:not(.easyhoa-btn-solid),
.easyhoa-report-toolbar .easyhoa-btn-primary:not(.easyhoa-btn-solid) {
  --phoenix-btn-color: var(--easyhoa-primary);
  --phoenix-btn-bg: var(--easyhoa-primary-soft-bg);
  --phoenix-btn-border-color: var(--easyhoa-primary-soft-bg);
  color: var(--easyhoa-primary) !important;
  background-color: var(--easyhoa-primary-soft-bg) !important;
  border-color: var(--easyhoa-primary-soft-bg) !important;
}

.dt-container .easyhoa-btn-primary:not(.easyhoa-btn-solid):hover,
.dt-container .easyhoa-btn-primary:not(.easyhoa-btn-solid):focus,
.dt-container .easyhoa-btn-primary:not(.easyhoa-btn-solid):active,
.easyhoa-dt .easyhoa-btn-primary:not(.easyhoa-btn-solid):hover,
.easyhoa-dt .easyhoa-btn-primary:not(.easyhoa-btn-solid):focus,
.easyhoa-dt .easyhoa-btn-primary:not(.easyhoa-btn-solid):active,
.easyhoa-report-toolbar .easyhoa-btn-primary:not(.easyhoa-btn-solid):hover,
.easyhoa-report-toolbar .easyhoa-btn-primary:not(.easyhoa-btn-solid):focus,
.easyhoa-report-toolbar .easyhoa-btn-primary:not(.easyhoa-btn-solid):active {
  color: #fff !important;
  background-color: var(--easyhoa-primary) !important;
  border-color: var(--easyhoa-primary) !important;
}

.easyhoa-report-toolbar .easyhoa-btn-primary:not(.easyhoa-btn-solid).show,
.easyhoa-report-toolbar .easyhoa-btn-primary:not(.easyhoa-btn-solid)[aria-expanded="true"] {
  color: var(--easyhoa-primary) !important;
  background-color: var(--easyhoa-primary-soft-bg-hover) !important;
  border-color: var(--easyhoa-primary) !important;
}

.dt-buttons:empty {
  display: none !important;
}

.easyhoa-notification-detail > tbody > tr > th {
  width: 10rem;
  white-space: nowrap;
  font-weight: 600;
  color: var(--phoenix-body-color, #31374a);
}

.easyhoa-summary-detail {
  width: 100%;
}

.easyhoa-summary-detail > tbody > tr > th {
  width: 1%;
  white-space: nowrap;
  text-align: left;
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: normal;
  text-transform: none !important;
  color: var(--phoenix-body-color, #31374a);
  padding: 0.5rem 1.25rem 0.5rem 0;
  vertical-align: top;
}

.easyhoa-summary-detail > tbody > tr > th.form-label {
  margin-bottom: 0;
  text-transform: none !important;
  letter-spacing: normal;
  font-size: 0.8rem;
}

.easyhoa-summary-detail > tbody > tr > td {
  width: 99%;
  padding: 0.5rem 0;
  vertical-align: middle;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--phoenix-secondary-color, #525b75);
}

.easyhoa-summary-detail > tbody > tr:first-child > th,
.easyhoa-summary-detail > tbody > tr:first-child > td {
  padding-top: 0.25rem;
}

.easyhoa-summary-detail > tbody > tr:last-child > th,
.easyhoa-summary-detail > tbody > tr:last-child > td {
  border-bottom: 0;
  padding-bottom: 0.25rem;
}

.easyhoa-unit-thumb {
  position: relative;
  width: 3.25rem;
  height: 3.25rem;
  flex: 0 0 3.25rem;
  border-radius: 0.5rem;
  overflow: hidden;
  background: var(--easyhoa-hover-bg);
  color: var(--easyhoa-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.easyhoa-hoa-logo-thumb {
  width: 5.5rem;
  height: 5.5rem;
  flex-basis: 5.5rem;
}

.easyhoa-unit-thumb.easyhoa-unit-photo {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  flex: none;
}

.easyhoa-unit-photo .easyhoa-unit-thumb-placeholder {
  font-size: 2.5rem;
}

.easyhoa-unit-photo .easyhoa-unit-thumb-edit .fs-10 {
  font-size: 0.8rem !important;
}

.easyhoa-unit-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Logos are never cropped: contain-fit on white inside the thumb */
.easyhoa-unit-thumb.easyhoa-hoa-logo-thumb,
.easyhoa-unit-thumb.easyhoa-logo-fit {
  border: 1px solid var(--phoenix-border-color-translucent, rgba(20, 24, 36, 0.08));
}

.easyhoa-hoa-logo-thumb img,
.easyhoa-logo-fit img {
  object-fit: contain;
  padding: 0.375rem;
  background: #fff;
}

.easyhoa-unit-photo.easyhoa-logo-fit img {
  padding: 1.25rem;
}

.easyhoa-unit-thumb-placeholder {
  font-size: 1.1rem;
  line-height: 1;
}

.easyhoa-unit-thumb-edit {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  margin: 0;
  background: rgba(20, 24, 36, 0.55);
  color: #fff;
  opacity: 0;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.easyhoa-unit-thumb:hover .easyhoa-unit-thumb-edit,
.easyhoa-unit-thumb:focus-within .easyhoa-unit-thumb-edit {
  opacity: 1;
}

/* Touch screens have no hover: keep a camera strip on the bottom of the thumb */
@media (hover: none) {
  .easyhoa-unit-thumb-edit {
    inset: auto 0 0 0;
    height: 40%;
    opacity: 1;
  }

  .easyhoa-unit-thumb-edit .fs-10:not(.fas) {
    display: none;
  }

  .easyhoa-unit-photo .easyhoa-unit-thumb-edit {
    height: 25%;
  }
}

/* Unit overview info: two summary tables side by side from lg; stacked below lg they read as one table */
@media (max-width: 991.98px) {
  .easyhoa-summary-columns > div:not(:last-child) .easyhoa-summary-detail > tbody > tr:last-child > * {
    border-bottom: 1px solid var(--phoenix-border-color-translucent, rgba(20, 24, 36, 0.08));
    padding-bottom: 0.75rem;
  }
}

/* Unit overview Billing card: four label / tinted value stats, then Auto Pay + actions under a divider */
.easyhoa-billing-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  container-type: inline-size;
}

.easyhoa-billing-stat {
  min-width: 0;
}

.easyhoa-billing-stat-label {
  margin-bottom: 0.375rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--phoenix-tertiary-color, #525b75);
}

.easyhoa-billing-pill {
  display: inline-block;
  max-width: 100%;
  padding: 0.25rem 0.625rem;
  border-radius: 0.375rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--phoenix-emphasis-color);
}

.easyhoa-billing-pill.is-positive {
  background: var(--phoenix-success-bg-subtle, #d9fbd0);
  color: var(--phoenix-success-text-emphasis, #1c6c09);
}

.easyhoa-billing-pill.is-due {
  background: var(--easyhoa-danger-bg);
}

.easyhoa-billing-pill.is-credit {
  background: var(--easyhoa-teal-bg-subtle);
}

.easyhoa-billing-pill.is-late {
  background: var(--easyhoa-secondary-soft-bg);
  color: var(--easyhoa-secondary-hover);
}

@media (max-width: 575.98px) {
  .easyhoa-billing-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Unit overview Owners card: avatar initials, name + role badges, email / phone, ellipsis menu */
.easyhoa-unit-owner .easyhoa-avatar-initials {
  background: var(--easyhoa-hover-bg);
  color: var(--easyhoa-primary);
  font-weight: 700;
}

.easyhoa-unit-owner .easyhoa-avatar-initials span {
  font-size: 0.875rem;
}


/* Button-row section tabs (unit page); same look as the Email / Text folder rows */
@media (max-width: 575.98px) {
  .easyhoa-button-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    padding-bottom: 0.25rem;
    -webkit-overflow-scrolling: touch;
  }

  .easyhoa-button-tabs .btn {
    flex: 0 0 auto;
  }
}

.easyhoa-summary-inline-control {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.5rem;
  max-width: 100%;
}

.easyhoa-summary-detail .easyhoa-summary-inline-control > .form-control {
  width: 11rem;
  max-width: 11rem;
  flex: 0 0 11rem;
}

.easyhoa-summary-inline-control > .btn {
  flex: 0 0 auto;
}

.easyhoa-summary-input-group {
  max-width: 18rem;
  width: 100%;
}

.easyhoa-summary-input-group > .form-control {
  min-width: 0;
}

.easyhoa-summary-input-group > .btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

.easyhoa-summary-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.5rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--phoenix-border-color-translucent, #e3e6ed);
}

@media (max-width: 575.98px) {
  .easyhoa-summary-meta {
    grid-template-columns: 1fr;
  }
}

.easyhoa-summary-meta-label {
  margin-bottom: 0.35rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--phoenix-body-color, #31374a);
}

.easyhoa-summary-meta-value {
  margin-bottom: 0.5rem;
}

.easyhoa-notification-content {
  word-break: break-word;
}

.easyhoa-notification-content img {
  max-width: 100%;
  height: auto;
}

.easyhoa-btn-outline-primary {
  color: var(--easyhoa-primary);
  background-color: transparent;
  border: 1px solid var(--easyhoa-primary);
  font-weight: 600;
}

.easyhoa-btn-outline-primary:hover,
.easyhoa-btn-outline-primary:focus,
.easyhoa-btn-outline-primary:active,
.easyhoa-btn-outline-primary.active {
  color: #fff;
  background-color: var(--easyhoa-primary);
  border-color: var(--easyhoa-primary);
}

.easyhoa-btn-outline-primary-soft {
  color: var(--easyhoa-primary-soft);
  background-color: transparent;
  border: 1px solid var(--easyhoa-primary-soft);
  font-weight: 600;
}

.easyhoa-btn-outline-primary-soft:hover,
.easyhoa-btn-outline-primary-soft:focus,
.easyhoa-btn-outline-primary-soft:active,
.easyhoa-btn-outline-primary-soft.active {
  color: #fff;
  background-color: var(--easyhoa-primary);
  border-color: var(--easyhoa-primary);
}

/* White outline (Print / PDF / CSV / Receipt): same look as a soft button on a section-card band */
.easyhoa-btn-secondary:not(.easyhoa-btn-solid) {
  --phoenix-btn-color: var(--easyhoa-primary);
  --phoenix-btn-bg: #fff;
  --phoenix-btn-border-color: #c3d3e5;
  --phoenix-btn-hover-color: #fff;
  --phoenix-btn-hover-bg: var(--easyhoa-primary);
  --phoenix-btn-hover-border-color: var(--easyhoa-primary);
  --phoenix-btn-active-color: #fff;
  --phoenix-btn-active-bg: var(--easyhoa-primary);
  --phoenix-btn-active-border-color: var(--easyhoa-primary);
  color: var(--easyhoa-primary);
  background-color: #fff;
  border: 1px solid #c3d3e5;
  font-weight: 600;
}

.easyhoa-btn-secondary:not(.easyhoa-btn-solid):hover,
.easyhoa-btn-secondary:not(.easyhoa-btn-solid):focus,
.easyhoa-btn-secondary:not(.easyhoa-btn-solid):active,
.easyhoa-btn-secondary:not(.easyhoa-btn-solid).active,
.easyhoa-btn-secondary:not(.easyhoa-btn-solid).show {
  color: #fff;
  background-color: var(--easyhoa-primary);
  border-color: var(--easyhoa-primary);
}

.easyhoa-btn-secondary-soft {
  color: var(--easyhoa-secondary);
  background-color: var(--easyhoa-secondary-soft-bg);
  border: 1px solid var(--easyhoa-secondary-soft-bg);
  font-weight: 600;
}

.easyhoa-btn-secondary-soft:hover,
.easyhoa-btn-secondary-soft:focus,
.easyhoa-btn-secondary-soft:active,
.easyhoa-btn-secondary-soft.active {
  color: #fff;
  background-color: var(--easyhoa-secondary);
  border-color: var(--easyhoa-secondary);
}

.easyhoa-btn-primary.easyhoa-btn-solid,
.easyhoa-btn-primary-solid {
  --phoenix-btn-color: #fff;
  --phoenix-btn-bg: var(--easyhoa-primary);
  --phoenix-btn-border-color: var(--easyhoa-primary);
  --phoenix-btn-hover-color: #fff;
  --phoenix-btn-hover-bg: var(--easyhoa-primary-hover);
  --phoenix-btn-hover-border-color: var(--easyhoa-primary-hover);
  color: #fff;
  background-color: var(--easyhoa-primary);
  border-color: var(--easyhoa-primary);
}

.easyhoa-btn-primary.easyhoa-btn-solid:hover,
.easyhoa-btn-primary.easyhoa-btn-solid:focus,
.easyhoa-btn-primary.easyhoa-btn-solid:active,
.easyhoa-btn-primary-solid:hover,
.easyhoa-btn-primary-solid:focus,
.easyhoa-btn-primary-solid:active {
  color: #fff;
  background-color: var(--easyhoa-primary-hover);
  border-color: var(--easyhoa-primary-hover);
}

/* Active button-row tab: older page <style> blocks recolor .easyhoa-btn-primary.active / :hover. */
.easyhoa-button-tabs .btn.easyhoa-btn-primary.easyhoa-btn-solid,
.easyhoa-button-tabs .btn.easyhoa-btn-primary.easyhoa-btn-solid:hover,
.easyhoa-button-tabs .btn.easyhoa-btn-primary.easyhoa-btn-solid:focus,
.easyhoa-button-tabs .btn.easyhoa-btn-primary.easyhoa-btn-solid:active,
.easyhoa-button-tabs .btn.easyhoa-btn-primary.easyhoa-btn-solid.active {
  color: #fff;
}

.easyhoa-btn-secondary.easyhoa-btn-solid,
.easyhoa-btn-secondary-solid {
  color: #fff;
  background-color: var(--easyhoa-secondary);
  border-color: var(--easyhoa-secondary);
}

.easyhoa-btn-secondary.easyhoa-btn-solid:hover,
.easyhoa-btn-secondary.easyhoa-btn-solid:focus,
.easyhoa-btn-secondary.easyhoa-btn-solid:active,
.easyhoa-btn-secondary-solid:hover,
.easyhoa-btn-secondary-solid:focus,
.easyhoa-btn-secondary-solid:active {
  color: #fff;
  background-color: var(--easyhoa-secondary-hover);
  border-color: var(--easyhoa-secondary-hover);
}

.btn-primary {
  --phoenix-btn-color: #fff;
  --phoenix-btn-bg: var(--easyhoa-primary);
  --phoenix-btn-border-color: var(--easyhoa-primary);
  --phoenix-btn-hover-color: #fff;
  --phoenix-btn-hover-bg: var(--easyhoa-primary-hover);
  --phoenix-btn-hover-border-color: var(--easyhoa-primary-hover);
  --phoenix-btn-active-color: #fff;
  --phoenix-btn-active-bg: var(--easyhoa-primary-hover);
  --phoenix-btn-active-border-color: var(--easyhoa-primary-hover);
  color: #fff;
  background-color: var(--easyhoa-primary);
  border-color: var(--easyhoa-primary);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
  color: #fff;
  background-color: var(--easyhoa-primary-hover);
  border-color: var(--easyhoa-primary-hover);
}

.btn-outline-primary {
  --phoenix-btn-color: var(--easyhoa-primary);
  --phoenix-btn-border-color: var(--easyhoa-primary);
  --phoenix-btn-hover-color: #fff;
  --phoenix-btn-hover-bg: var(--easyhoa-primary);
  --phoenix-btn-hover-border-color: var(--easyhoa-primary);
  color: var(--easyhoa-primary);
  background-color: transparent;
  border-color: var(--easyhoa-primary);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary.active {
  color: #fff;
  background-color: var(--easyhoa-primary);
  border-color: var(--easyhoa-primary);
}

.btn-secondary {
  --phoenix-btn-color: #fff;
  --phoenix-btn-bg: var(--easyhoa-secondary);
  --phoenix-btn-border-color: var(--easyhoa-secondary);
  --phoenix-btn-hover-color: #fff;
  --phoenix-btn-hover-bg: var(--easyhoa-secondary-hover);
  --phoenix-btn-hover-border-color: var(--easyhoa-secondary-hover);
  --phoenix-btn-active-color: #fff;
  --phoenix-btn-active-bg: var(--easyhoa-secondary-hover);
  --phoenix-btn-active-border-color: var(--easyhoa-secondary-hover);
  color: #fff;
  background-color: var(--easyhoa-secondary);
  border-color: var(--easyhoa-secondary);
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active,
.btn-secondary.active {
  color: #fff;
  background-color: var(--easyhoa-secondary-hover);
  border-color: var(--easyhoa-secondary-hover);
}

.btn-outline-secondary {
  --phoenix-btn-color: var(--easyhoa-secondary-soft);
  --phoenix-btn-border-color: var(--easyhoa-secondary-soft);
  --phoenix-btn-hover-color: #fff;
  --phoenix-btn-hover-bg: var(--easyhoa-secondary);
  --phoenix-btn-hover-border-color: var(--easyhoa-secondary);
  color: var(--easyhoa-secondary-soft);
  background-color: transparent;
  border-color: var(--easyhoa-secondary-soft);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active,
.btn-outline-secondary.active {
  color: #fff;
  background-color: var(--easyhoa-secondary);
  border-color: var(--easyhoa-secondary);
}

.easyhoa-btn-back {
  --phoenix-btn-color: var(--phoenix-secondary, #31374a);
  --phoenix-btn-bg: transparent;
  --phoenix-btn-border-color: var(--phoenix-secondary, #31374a);
  --phoenix-btn-hover-color: #fff;
  --phoenix-btn-hover-bg: var(--phoenix-secondary, #31374a);
  --phoenix-btn-hover-border-color: var(--phoenix-secondary, #31374a);
  color: var(--phoenix-secondary, #31374a);
  background-color: transparent;
  border: 1px solid var(--phoenix-secondary, #31374a);
  font-weight: 600;
}

.easyhoa-btn-back:hover,
.easyhoa-btn-back:focus,
.easyhoa-btn-back:active,
.easyhoa-btn-back.active {
  color: #fff;
  background-color: var(--phoenix-secondary, #31374a);
  border-color: var(--phoenix-secondary, #31374a);
}

/* Searchable form pickers (not Back / Cancel) — keep form-select chrome on hover/open */
.btn.easyhoa-form-dropdown-toggle,
.btn.easyhoa-btn-back.dropdown-toggle.w-100 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-height: calc(1.5em + 1rem + 2px);
  padding: 0.5rem 2.25rem 0.5rem 1rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  color: var(--phoenix-body-color, #31374a);
  background-color: var(--phoenix-emphasis-bg, #fff);
  border: 1px solid var(--phoenix-input-border-color, var(--phoenix-border-color, #d8e2ef));
  border-radius: var(--phoenix-border-radius, 0.375rem);
  box-shadow: none;
}

.btn.easyhoa-form-dropdown-toggle:hover,
.btn.easyhoa-form-dropdown-toggle:focus,
.btn.easyhoa-form-dropdown-toggle:active,
.btn.easyhoa-form-dropdown-toggle.active,
.btn.easyhoa-form-dropdown-toggle.show,
.btn.easyhoa-btn-back.dropdown-toggle.w-100:hover,
.btn.easyhoa-btn-back.dropdown-toggle.w-100:focus,
.btn.easyhoa-btn-back.dropdown-toggle.w-100:active,
.btn.easyhoa-btn-back.dropdown-toggle.w-100.active,
.btn.easyhoa-btn-back.dropdown-toggle.w-100.show {
  color: var(--phoenix-body-color, #31374a) !important;
  background-color: var(--phoenix-emphasis-bg, #fff) !important;
  border-color: var(--easyhoa-primary) !important;
  box-shadow: none !important;
}

.btn.easyhoa-form-dropdown-toggle .float-start,
.btn.easyhoa-btn-back.dropdown-toggle.w-100 .float-start {
  float: none !important;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}

.btn.easyhoa-form-dropdown-toggle:empty::before,
.btn.easyhoa-form-dropdown-toggle .float-start:empty::before,
.btn.easyhoa-btn-back.dropdown-toggle.w-100 .float-start:empty::before {
  content: attr(data-placeholder);
  color: var(--phoenix-tertiary-color, #6e7891);
  font-weight: 400;
}

.easyhoa-form-dropdown-menu {
  max-height: 16rem;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Searchable form pickers — menu must read as a panel on white form chrome */
.dropdown-menu.easyhoa-form-dropdown,
.btn.easyhoa-form-dropdown-toggle + .dropdown-menu,
.btn.easyhoa-btn-back.dropdown-toggle.w-100 + .dropdown-menu {
  border: 1px solid var(--phoenix-border-color, #d8e2ef) !important;
  border-radius: var(--phoenix-border-radius, 0.375rem);
  background-color: var(--phoenix-emphasis-bg, #fff);
  box-shadow: 0 0.5rem 1.25rem rgba(20, 24, 36, 0.12);
  padding-top: 0;
  padding-bottom: 0;
}

.btn.btn-sm.easyhoa-form-dropdown-toggle {
  min-height: calc(1.5em + 0.5rem + 2px);
  padding: 0.25rem 2rem 0.25rem 0.75rem;
  font-size: 0.8rem;
}

.dropdown-menu.easyhoa-form-dropdown .dropdown-item,
.btn.easyhoa-form-dropdown-toggle + .dropdown-menu .dropdown-item,
.btn.easyhoa-btn-back.dropdown-toggle.w-100 + .dropdown-menu .dropdown-item {
  font-size: 0.8rem;
  padding: 0.45rem 1rem;
}

.dropdown-menu.easyhoa-form-dropdown .dropdown-item:hover,
.dropdown-menu.easyhoa-form-dropdown .dropdown-item:focus,
.dropdown-menu.easyhoa-form-dropdown .dropdown-item.active,
.btn.easyhoa-form-dropdown-toggle + .dropdown-menu .dropdown-item:hover,
.btn.easyhoa-form-dropdown-toggle + .dropdown-menu .dropdown-item:focus,
.btn.easyhoa-form-dropdown-toggle + .dropdown-menu .dropdown-item.active,
.btn.easyhoa-btn-back.dropdown-toggle.w-100 + .dropdown-menu .dropdown-item:hover,
.btn.easyhoa-btn-back.dropdown-toggle.w-100 + .dropdown-menu .dropdown-item:focus,
.btn.easyhoa-btn-back.dropdown-toggle.w-100 + .dropdown-menu .dropdown-item.active {
  background-color: var(--easyhoa-hover-bg);
  color: var(--easyhoa-primary);
}

.easyhoa-btn-delete {
  color: var(--easyhoa-danger-text);
  background-color: var(--easyhoa-danger-bg);
  border: 1px solid var(--easyhoa-danger-bg);
  font-weight: 600;
}

.easyhoa-btn-delete:hover,
.easyhoa-btn-delete:focus {
  color: var(--easyhoa-danger-text);
  background-color: var(--phoenix-danger-lighter, #ffe8e4);
  border-color: #ffe3df;
}

.easyhoa-btn-delete:active,
.easyhoa-btn-delete.active {
  color: #000;
  background-color: #ffe6e2;
  border-color: #ffe3df;
}

/* Soft green Approve (pair with easyhoa-btn-delete Deny) — Phoenix success tokens. */
.easyhoa-btn-success {
  --phoenix-btn-color: var(--phoenix-success-text-emphasis, #1c6c09);
  --phoenix-btn-bg: var(--phoenix-success-bg-subtle, #d9fbd0);
  --phoenix-btn-border-color: var(--phoenix-success-bg-subtle, #d9fbd0);
  --phoenix-btn-hover-color: #fff;
  --phoenix-btn-hover-bg: var(--phoenix-success, #25b003);
  --phoenix-btn-hover-border-color: var(--phoenix-success, #25b003);
  --phoenix-btn-active-color: #fff;
  --phoenix-btn-active-bg: var(--phoenix-success-dark, #23890b);
  --phoenix-btn-active-border-color: var(--phoenix-success-dark, #23890b);
  color: var(--phoenix-success-text-emphasis, #1c6c09);
  background-color: var(--phoenix-success-bg-subtle, #d9fbd0);
  border: 1px solid var(--phoenix-success-bg-subtle, #d9fbd0);
  font-weight: 600;
}

.easyhoa-btn-success:hover,
.easyhoa-btn-success:focus,
.easyhoa-btn-success:active,
.easyhoa-btn-success.active {
  color: #fff;
  background-color: var(--phoenix-success, #25b003);
  border-color: var(--phoenix-success, #25b003);
}

[data-bs-theme="dark"] .easyhoa-btn-delete {
  color: #f48270;
  background-color: rgba(250, 59, 29, 0.14);
  border-color: rgba(250, 59, 29, 0.14);
}

[data-bs-theme="dark"] .easyhoa-btn-delete:hover,
[data-bs-theme="dark"] .easyhoa-btn-delete:focus {
  color: #f48270;
  background-color: rgba(250, 59, 29, 0.2);
  border-color: rgba(253, 176, 164, 0.226);
}

[data-bs-theme="dark"] .easyhoa-btn-delete:active,
[data-bs-theme="dark"] .easyhoa-btn-delete.active {
  color: #000;
  background-color: rgba(254, 210, 203, 0.312);
  border-color: rgba(253, 176, 164, 0.226);
}

.btn.btn-icon.easyhoa-btn-primary,
.btn.btn-icon.easyhoa-btn-delete {
  padding: 0;
  flex-shrink: 0;
}

.btn.btn-icon.easyhoa-btn-primary .fas,
.btn.btn-icon.easyhoa-btn-primary .fa-solid,
.btn.btn-icon.easyhoa-btn-delete .fas,
.btn.btn-icon.easyhoa-btn-delete .fa-solid {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1;
}

.btn.btn-icon.easyhoa-btn-icon-inline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  min-height: 0;
  border-radius: 0.375rem;
}

.btn.btn-icon.easyhoa-btn-icon-inline .fas,
.btn.btn-icon.easyhoa-btn-icon-inline .fa-solid {
  font-size: 0.65rem;
}

.btn.easyhoa-btn-primary:disabled,
.btn.easyhoa-btn-primary.disabled,
.btn.easyhoa-btn-delete:disabled,
.btn.easyhoa-btn-delete.disabled,
.btn.easyhoa-btn-secondary:disabled,
.btn.easyhoa-btn-secondary.disabled,
.btn.easyhoa-btn-back:disabled,
.btn.easyhoa-btn-back.disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
  color: var(--phoenix-secondary-color, #6e7891) !important;
  background-color: var(--phoenix-gray-100, #eff2f6) !important;
  border-color: var(--phoenix-gray-200, #e3e6ed) !important;
}

.btn.easyhoa-btn-primary:disabled:hover,
.btn.easyhoa-btn-primary.disabled:hover,
.btn.easyhoa-btn-delete:disabled:hover,
.btn.easyhoa-btn-delete.disabled:hover {
  color: var(--phoenix-secondary-color, #6e7891) !important;
  background-color: var(--phoenix-gray-100, #eff2f6) !important;
  border-color: var(--phoenix-gray-200, #e3e6ed) !important;
}

.easyhoa-dt {
  width: 100%;
  overflow-x: auto;
}

.easyhoa-dt:has(.easyhoa-actions-menu),
.easyhoa-dt:has(.easyhoa-phone-actions-menu) {
  overflow: visible;
}

.easyhoa-dt .table > :not(caption) > * > * {
  border-left: 0;
  border-right: 0;
  vertical-align: middle;
}

/*
 * AMIV Users stripe: odd rows = cool gray band, even rows = transparent
 * (the white card / page shows through).
 * DataTables paints every cell var(--bs-table-bg) (white); clear that or
 * even rows stay solid white.
 */
.easyhoa-dt table.table,
table.table.dataTable {
  --bs-table-bg: transparent;
  --phoenix-table-bg: transparent;
  background-color: transparent !important;
}

.easyhoa-dt table.table > :not(caption) > * > *,
table.table.dataTable > :not(caption) > * > * {
  background-color: transparent;
}

.easyhoa-dt table.table-striped > tbody > tr:nth-of-type(odd) > *,
table.table.dataTable.table-striped > tbody > tr:nth-of-type(odd) > * {
  --phoenix-table-bg-type: var(--phoenix-table-striped-bg);
  background-color: transparent !important;
  box-shadow: inset 0 0 0 9999px var(--easyhoa-table-stripe-bg) !important;
  color: var(--phoenix-body-color, #31374a);
}

.easyhoa-dt table.table-striped > tbody > tr:nth-of-type(even) > *,
table.table.dataTable.table-striped > tbody > tr:nth-of-type(even) > * {
  --phoenix-table-bg-type: transparent;
  background-color: transparent !important;
  box-shadow: none !important;
  color: var(--phoenix-body-color, #31374a);
}

/* Keep pills above the inset stripe shadow on odd rows */
.easyhoa-dt table.table-striped > tbody > tr > * .badge,
.easyhoa-dt table.table-striped > tbody > tr > * .badge-phoenix {
  position: relative;
  z-index: 1;
}

/* HOA groups: Premium + Bookkeeping share one stripe and one identity block */
.easyhoa-dt table.easyhoa-assoc-table.table-striped > tbody > tr:nth-of-type(odd) > *,
.easyhoa-dt table.easyhoa-assoc-table.table-striped > tbody > tr:nth-of-type(even) > * {
  box-shadow: none !important;
}

.easyhoa-dt table.easyhoa-assoc-table.table-striped > tbody > tr.easyhoa-assoc-group-odd > *,
.easyhoa-dt table.easyhoa-assoc-table.table-striped > tbody > tr.easyhoa-assoc-cont-odd > * {
  box-shadow: inset 0 0 0 9999px var(--easyhoa-table-stripe-bg) !important;
}

.easyhoa-dt table.easyhoa-assoc-table.table-striped > tbody > tr.easyhoa-assoc-group-even > *,
.easyhoa-dt table.easyhoa-assoc-table.table-striped > tbody > tr.easyhoa-assoc-cont-even > * {
  box-shadow: none !important;
}

.easyhoa-dt table.easyhoa-assoc-table > tbody > tr.easyhoa-assoc-group:has(+ tr.easyhoa-assoc-cont) > td {
  border-bottom: 0;
}

.easyhoa-dt table.easyhoa-assoc-table > tbody > tr.easyhoa-assoc-cont > td {
  border-top: 0;
}

.easyhoa-dt table.easyhoa-assoc-table > tbody > tr.easyhoa-assoc-cont > td.easyhoa-assoc-service,
.easyhoa-dt table.easyhoa-assoc-table > tbody > tr.easyhoa-assoc-cont > td.easyhoa-assoc-billing {
  border-top: 1px solid var(--phoenix-border-color-translucent, #e3e6ed);
}

.easyhoa-assoc-member + .easyhoa-assoc-member {
  padding-top: 0.5rem;
  border-top: 1px solid var(--phoenix-border-color-translucent, #e3e6ed);
}

/* In-table value links (name, invoice, dashboard) — logo blue, not body text */
.easyhoa-table-link,
.easyhoa-dt tbody a:not(.btn):not(.dropdown-item) {
  color: var(--easyhoa-primary) !important;
  font-weight: 600;
  text-decoration: none;
}

.easyhoa-table-link:hover,
.easyhoa-dt tbody a:not(.btn):not(.dropdown-item):hover {
  color: var(--easyhoa-primary-hover) !important;
  text-decoration: underline;
}

.easyhoa-dt .table-sticky-wrap {
  max-height: calc(100vh - 22rem);
  overflow: auto;
  position: relative;
}

.easyhoa-dt table.table-sticky thead th {
  position: sticky;
  top: 0;
  z-index: 4;
  background-color: var(--easyhoa-table-head-bg) !important;
}

.easyhoa-dt table.table-sticky th.sticky-select,
.easyhoa-dt table.table-sticky td.sticky-select {
  position: sticky;
  left: 0;
  z-index: 3;
  width: 2.85rem;
}

.easyhoa-dt table.table-sticky th.sticky-hoa,
.easyhoa-dt table.table-sticky td.sticky-hoa {
  position: sticky;
  left: 2.85rem;
  z-index: 3;
}

.easyhoa-dt table.table-sticky thead th.sticky-select,
.easyhoa-dt table.table-sticky thead th.sticky-hoa {
  z-index: 6;
}

.easyhoa-dt table.table-striped > tbody > tr:nth-of-type(even) > td.sticky-select,
.easyhoa-dt table.table-striped > tbody > tr:nth-of-type(even) > td.sticky-hoa,
.easyhoa-dt table.table-striped > tbody > tr:nth-of-type(odd) > td.sticky-select,
.easyhoa-dt table.table-striped > tbody > tr:nth-of-type(odd) > td.sticky-hoa {
  /* opaque white under the inset stripe shadow so scrolled cells stay hidden */
  background-color: var(--phoenix-emphasis-bg, #fff) !important;
}

.easyhoa-dt table.table-striped > tbody > tr.retention-customer-row {
  cursor: pointer;
}

.easyhoa-dt table.table-striped > tbody > tr.retention-customer-row:hover > td {
  background-color: var(--easyhoa-hover-bg) !important;
  box-shadow: none !important;
}

.easyhoa-dt table.table-striped > tbody > tr.retention-notes-row > td {
  background-color: var(--phoenix-emphasis-bg, #fff) !important;
  box-shadow: none !important;
  cursor: default;
}

.retention-note-text {
  white-space: pre-wrap;
}

.retention-notes-table-wrap {
  max-height: 280px;
  overflow: auto;
}

.easyhoa-dt table.table-striped > tbody > tr.easyhoa-fee-group-selected > * {
  box-shadow: inset 0 0 0 9999px var(--easyhoa-hover-bg);
  font-weight: 600;
}

.easyhoa-dt thead th,
.easyhoa-dt table.dataTable thead > tr > th {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--phoenix-body-color, #31374a) !important;
  background-color: var(--easyhoa-table-head-bg) !important;
  border-bottom-color: var(--phoenix-border-color-translucent, #e3e6ed) !important;
}

/* Header band on every other table head (master's gray thead). Label / value
   tables (summary, billing) have no thead; Budget vs Actuals, Profit & Loss,
   Balance Sheet and General Ledger keep their dark head; borderless meta tables
   and hidden PDF templates stay plain. */
.table:not(.easyhoa-budget-report .table):not(.easyhoa-pl-report .table):not(.easyhoa-bs-report .table):not(.easyhoa-gl-report .table):not(.table-borderless):not(.easyhoa-summary-detail) > thead > tr > th {
  background-color: var(--easyhoa-table-head-bg);
}

#hidden_html_pdf .table > thead > tr > th,
#hidden_pdf_html .table > thead > tr > th {
  background-color: transparent !important;
}

/* Header band reaches the card's rounded top corners when the table is the
   first thing in a headerless section card (the card cannot clip: menus). */
.card > .card-body.p-0:first-child > table.table:first-child > thead:first-child > tr:first-child > th:first-child,
.card > .card-body.p-0:first-child > .table-responsive:first-child > table.table:first-child > thead:first-child > tr:first-child > th:first-child,
.card > .card-body.p-0:first-child > .easyhoa-dt:first-child > table.table:first-child > thead:first-child > tr:first-child > th:first-child,
.card > .card-body.p-0:first-child > .easyhoa-dt:first-child > .table-responsive:first-child > table.table:first-child > thead:first-child > tr:first-child > th:first-child,
.card > .card-body.p-0:first-child > .easyhoa-dt:first-child > .dt-container > .dt-layout-table:first-child table.table > thead:first-child > tr:first-child > th:first-child {
  clip-path: inset(0 0 -2px 0 round var(--phoenix-card-inner-border-radius, 0.4375rem) 0 0 0);
}

.card > .card-body.p-0:first-child > table.table:first-child > thead:first-child > tr:first-child > th:last-child,
.card > .card-body.p-0:first-child > .table-responsive:first-child > table.table:first-child > thead:first-child > tr:first-child > th:last-child,
.card > .card-body.p-0:first-child > .easyhoa-dt:first-child > table.table:first-child > thead:first-child > tr:first-child > th:last-child,
.card > .card-body.p-0:first-child > .easyhoa-dt:first-child > .table-responsive:first-child > table.table:first-child > thead:first-child > tr:first-child > th:last-child,
.card > .card-body.p-0:first-child > .easyhoa-dt:first-child > .dt-container > .dt-layout-table:first-child table.table > thead:first-child > tr:first-child > th:last-child {
  clip-path: inset(0 0 -2px 0 round 0 var(--phoenix-card-inner-border-radius, 0.4375rem) 0 0);
}

/* Board notifications matrix: name once, Email/Text as channel columns */
.easyhoa-board-notify thead th.easyhoa-board-notify-member,
.easyhoa-board-notify thead th.easyhoa-board-notify-channel,
.easyhoa-board-notify thead th.easyhoa-board-notify-type {
  text-transform: none;
  letter-spacing: normal;
}

.easyhoa-board-notify thead th.easyhoa-board-notify-member {
  font-size: 0.8rem;
  font-weight: 700;
  vertical-align: bottom;
  min-width: 9.5rem;
  padding-bottom: 0.35rem;
}

.easyhoa-board-notify .easyhoa-board-notify-name {
  color: var(--phoenix-emphasis-color, #141824);
  line-height: 1.25;
  margin-bottom: 0.2rem;
}

.easyhoa-board-notify .easyhoa-board-notify-meta {
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--phoenix-body-tertiary-color, #6e7891);
  max-width: 11rem;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.35;
}

.easyhoa-board-notify thead th.easyhoa-board-notify-channel {
  font-size: 0.7rem;
  font-weight: 600;
  text-align: center;
  width: 4.75rem;
  white-space: nowrap;
  color: var(--phoenix-body-secondary-color, #525b75) !important;
}

.easyhoa-board-notify thead th.easyhoa-board-notify-type,
.easyhoa-board-notify tbody td.easyhoa-board-notify-type {
  min-width: 9rem;
  white-space: nowrap;
}

.easyhoa-board-notify tbody td.easyhoa-board-notify-check {
  text-align: center;
  width: 4.75rem;
  vertical-align: middle;
}

.easyhoa-board-notify tbody td.easyhoa-board-notify-check .form-check-input {
  margin-top: 0;
}

/* Committee notifications: accordion members + activity tiles */
.easyhoa-committee-notify .accordion-item {
  border: 1px solid var(--phoenix-border-color-translucent, rgba(0, 0, 0, 0.08));
  border-radius: 0.5rem;
  overflow: hidden;
  background: #fff;
}

.easyhoa-committee-notify .accordion-item + .accordion-item {
  margin-top: 0.5rem;
  border-top: 1px solid var(--phoenix-border-color-translucent, rgba(0, 0, 0, 0.08));
}

.easyhoa-committee-notify .accordion-button {
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
  background-color: #fff;
  color: var(--phoenix-emphasis-color, #141824);
  box-shadow: none;
}

.easyhoa-committee-notify .accordion-button:not(.collapsed) {
  background-color: var(--easyhoa-hover-bg, #e9eff5);
  color: var(--phoenix-emphasis-color, #141824);
  box-shadow: none;
}

.easyhoa-committee-notify .accordion-button:focus {
  box-shadow: none;
  border-color: transparent;
}

.easyhoa-committee-notify .accordion-button::after {
  background-size: 0.9rem;
  width: 0.9rem;
  height: 0.9rem;
  flex-shrink: 0;
}

.easyhoa-committee-notify-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.75rem;
  row-gap: 0.15rem;
  min-width: 0;
  padding-right: 0.75rem;
  text-align: left;
}

.easyhoa-committee-notify-name {
  font-weight: 700;
  line-height: 1.25;
  color: var(--phoenix-emphasis-color, #141824);
}

.easyhoa-committee-notify .accordion-button:not(.collapsed) .easyhoa-committee-notify-name {
  color: var(--easyhoa-primary, #0d5295);
}

.easyhoa-committee-notify-meta {
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1.25;
  color: var(--phoenix-body-tertiary-color, #6e7891);
}

.easyhoa-committee-notify .accordion-body {
  padding: 1rem;
  background: #fff;
  border-top: 1px solid var(--phoenix-border-color-translucent, rgba(0, 0, 0, 0.08));
}

.easyhoa-committee-notify-item {
  padding: 1rem 1.1rem;
  border: 1px solid var(--phoenix-border-color-translucent, #e3e6ed);
  border-radius: 0.5rem;
  background-color: var(--easyhoa-soft-gray-bg);
}

.easyhoa-committee-notify-title {
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--easyhoa-primary, #0d5295);
}

.easyhoa-committee-notify-item .form-label {
  color: var(--phoenix-body-secondary-color, #525b75);
}

.easyhoa-committee-notify-item .form-check-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--phoenix-body-color, #31374a);
}

/* Trailing action / History columns stay right-aligned in every list table.
 * Phoenix `.btn-icon` is `display: flex` (block-level), so plain text-align
 * alone does not push it — force inline-flex + right-align the cell. */
.easyhoa-dt table > thead > tr > th.text-end,
.easyhoa-dt table > tbody > tr > td.text-end,
.easyhoa-dt table > thead > tr > th.easyhoa-actions-cell,
.easyhoa-dt table > tbody > tr > td.easyhoa-actions-cell {
  text-align: right !important;
  white-space: nowrap;
  width: 1%;
}

.easyhoa-dt table > tbody > tr > td.text-end > .btn,
.easyhoa-dt table > tbody > tr > td.easyhoa-actions-cell > .btn,
.easyhoa-dt table > tbody > tr > td.text-end > .btn-group,
.easyhoa-dt table > tbody > tr > td.easyhoa-actions-cell > .btn-group,
.easyhoa-dt table > tbody > tr > td.text-end > .dropdown,
.easyhoa-dt table > tbody > tr > td.easyhoa-actions-cell > .dropdown,
.easyhoa-dt table > tbody > tr > td.text-end > .d-inline-flex,
.easyhoa-dt table > tbody > tr > td.easyhoa-actions-cell > .d-inline-flex,
.easyhoa-dt table > tbody > tr > td.text-end > .d-flex,
.easyhoa-dt table > tbody > tr > td.easyhoa-actions-cell > .d-flex {
  display: inline-flex !important;
  vertical-align: middle;
  justify-content: center;
  align-items: center;
}

.easyhoa-dt table > tbody > tr > td.text-end > .btn + .btn,
.easyhoa-dt table > tbody > tr > td.easyhoa-actions-cell > .btn + .btn,
.easyhoa-dt table > tbody > tr > td.text-end > .btn + a.btn,
.easyhoa-dt table > tbody > tr > td.easyhoa-actions-cell > .btn + a.btn,
.easyhoa-dt table > tbody > tr > td.text-end > a.btn + .btn,
.easyhoa-dt table > tbody > tr > td.easyhoa-actions-cell > a.btn + .btn,
.easyhoa-dt table > tbody > tr > td.text-end > a.btn + a.btn,
.easyhoa-dt table > tbody > tr > td.easyhoa-actions-cell > a.btn + a.btn,
.easyhoa-dt table > tbody > tr > td.text-end > .btn + .dropdown,
.easyhoa-dt table > tbody > tr > td.easyhoa-actions-cell > .btn + .dropdown,
.easyhoa-dt table > tbody > tr > td.text-end > a.btn + .dropdown,
.easyhoa-dt table > tbody > tr > td.easyhoa-actions-cell > a.btn + .dropdown {
  margin-left: 0.35rem;
}

.easyhoa-dt table > tbody > tr > td.text-end > .d-inline-flex,
.easyhoa-dt table > tbody > tr > td.easyhoa-actions-cell > .d-inline-flex,
.easyhoa-dt table > tbody > tr > td.text-end > .d-flex,
.easyhoa-dt table > tbody > tr > td.easyhoa-actions-cell > .d-flex {
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: 0.35rem;
  width: auto;
  max-width: none;
}

.easyhoa-dt table > tbody > tr > td.text-end .btn-icon,
.easyhoa-dt table > tbody > tr > td.easyhoa-actions-cell .btn-icon {
  display: inline-flex !important;
  flex: 0 0 auto;
}

.easyhoa-dt thead.bg-light,
.easyhoa-dt thead .bg-light,
.easyhoa-dt thead tr.bg-light {
  background-color: transparent !important;
}

.easyhoa-dt thead th .btn,
.easyhoa-dt thead th .form-control,
.easyhoa-dt thead th input {
  text-transform: none;
  letter-spacing: normal;
}

.easyhoa-dt .dt-buttons,
.easyhoa-report-toolbar-start {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.5rem;
}

.easyhoa-dt .dt-buttons .btn,
.dt-buttons .btn.btn-secondary,
.dt-buttons .easyhoa-btn-secondary,
.easyhoa-report-toolbar-start .btn {
  margin: 0;
  color: var(--easyhoa-primary);
  background-color: #fff;
  border: 1px solid #c3d3e5;
  font-weight: 600;
}

.easyhoa-dt .dt-buttons .btn:hover,
.easyhoa-dt .dt-buttons .btn:focus,
.easyhoa-dt .dt-buttons .btn:active,
.dt-buttons .btn.btn-secondary:hover,
.dt-buttons .btn.btn-secondary:focus,
.dt-buttons .btn.btn-secondary:active,
.dt-buttons .easyhoa-btn-secondary:hover,
.dt-buttons .easyhoa-btn-secondary:focus,
.dt-buttons .easyhoa-btn-secondary:active,
.easyhoa-report-toolbar-start .btn:hover,
.easyhoa-report-toolbar-start .btn:focus,
.easyhoa-report-toolbar-start .btn:active {
  color: #fff;
  background-color: var(--easyhoa-primary);
  border-color: var(--easyhoa-primary);
}

table.dataTable {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  width: 100% !important;
}

table.dataTable thead > tr > th.sorting,
table.dataTable thead > tr > th.sorting_asc,
table.dataTable thead > tr > th.sorting_desc,
table.dataTable thead > tr > th.sorting_asc_disabled,
table.dataTable thead > tr > th.sorting_desc_disabled {
  padding-right: 1.75rem;
}

.dataTables_wrapper .row,
.dt-container .row,
.dt-container .dt-layout-row {
  --phoenix-gutter-x: 0;
  margin-left: 0;
  margin-right: 0;
}

.dataTables_wrapper .dataTables_filter,
.dt-container .dt-search {
  padding: 0.75rem 0;
  text-align: right !important;
}

.dataTables_wrapper .dataTables_filter label,
.dt-container .dt-search label {
  display: inline-flex;
  width: auto;
  margin-bottom: 0;
  align-items: center;
}

.dataTables_wrapper .dataTables_filter input,
.dt-container .dt-search input {
  margin-left: 0 !important;
  width: 280px !important;
  max-width: 100%;
  display: inline-block;
  padding: 0.5rem 0.75rem;
  font-size: 0.8rem;
  color: var(--phoenix-body-color, #31374a);
  background-color: transparent;
  border: 1px solid var(--phoenix-border-color, #d8e2ef);
  border-radius: 0.375rem;
}

.dataTables_wrapper .dataTables_filter input:focus,
.dt-container .dt-search input:focus {
  background-color: transparent;
  border-color: var(--easyhoa-primary);
  outline: 0;
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--easyhoa-primary) 20%, transparent);
}

.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate,
.dt-container .dt-info,
.dt-container .dt-paging {
  padding-top: 1rem;
  padding-bottom: 0.25rem;
}

.dataTables_wrapper .dataTables_info,
.dt-container .dt-info {
  color: var(--phoenix-body-tertiary-color, #6e7891);
  font-size: 0.8rem;
}

.dt-container .dt-paging,
.dataTables_wrapper .dataTables_paginate {
  text-align: right !important;
}

.dataTables_wrapper .dataTables_paginate .pagination,
.dt-container .dt-paging .pagination,
.easyhoa-list-pager .pagination {
  justify-content: flex-end;
  --phoenix-pagination-padding-x: 0.5rem;
  --phoenix-pagination-padding-y: 0.35rem;
  --phoenix-pagination-font-size: 0.8rem;
  --phoenix-pagination-color: var(--phoenix-secondary-color, #6e7891);
  --phoenix-pagination-bg: transparent;
  --phoenix-pagination-border-width: 0;
  --phoenix-pagination-hover-color: var(--easyhoa-primary);
  --phoenix-pagination-hover-bg: var(--easyhoa-hover-bg);
  --phoenix-pagination-hover-border-color: transparent;
  --phoenix-pagination-active-color: #fff;
  --phoenix-pagination-active-bg: var(--easyhoa-primary);
  --phoenix-pagination-active-border-color: var(--easyhoa-primary);
  --phoenix-pagination-disabled-color: var(--phoenix-secondary-color, #6e7891);
  --phoenix-pagination-disabled-bg: transparent;
  margin-bottom: 0;
  gap: 0.15rem;
}

.dataTables_wrapper .dataTables_paginate .page-item,
.dt-container .dt-paging .page-item,
.easyhoa-list-pager .page-item {
  margin: 0;
}

.dataTables_wrapper .dataTables_paginate .page-link,
.dt-container .dt-paging .page-link,
.dt-container .dt-paging-button,
.easyhoa-list-pager .page-link {
  min-width: 1.75rem;
  height: 1.75rem;
  padding: 0 0.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--phoenix-secondary-color, #6e7891);
  background-color: transparent;
  border: 0;
  border-radius: 0.375rem;
  font-size: 0.8rem;
  line-height: 1;
}

.dataTables_wrapper .dataTables_paginate .page-item.active .page-link,
.dt-container .dt-paging .page-item.active .page-link,
.dt-container .dt-paging-button.current,
.easyhoa-list-pager .page-item.active .page-link {
  background-color: var(--easyhoa-primary);
  border: 0;
  color: #fff;
}

.dataTables_wrapper .dataTables_paginate .page-item.disabled .page-link,
.dt-container .dt-paging .page-item.disabled .page-link,
.easyhoa-list-pager .page-item.disabled .page-link {
  color: var(--phoenix-secondary-color, #6e7891);
  background-color: transparent;
  opacity: 0.55;
}

.dataTables_wrapper .dataTables_paginate .page-link:hover,
.dt-container .dt-paging .page-link:hover,
.dt-container .dt-paging-button:hover,
.easyhoa-list-pager .page-link:hover {
  background-color: var(--easyhoa-hover-bg);
  border: 0;
  color: var(--easyhoa-primary);
}

.dataTables_wrapper .dataTables_paginate .page-item.active .page-link:hover,
.dt-container .dt-paging .page-item.active .page-link:hover,
.easyhoa-list-pager .page-item.active .page-link:hover {
  background-color: var(--easyhoa-primary);
  color: #fff;
}

.easyhoa-list-pager {
  gap: 0.15rem;
}

.easyhoa-list-pager .btn,
.easyhoa-list-pager .btn.easyhoa-btn-back {
  min-width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  color: var(--phoenix-secondary-color, #6e7891);
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.easyhoa-list-pager .btn:hover,
.easyhoa-list-pager .btn:focus,
.easyhoa-list-pager .btn.easyhoa-btn-back:hover,
.easyhoa-list-pager .btn.easyhoa-btn-back:focus {
  color: var(--easyhoa-primary) !important;
  background-color: var(--easyhoa-hover-bg) !important;
}

.easyhoa-list-pager .pagination > li,
.easyhoa-list-pager .pagination .page-item {
  margin: 0;
}

.easyhoa-list-pager .pagination a.page,
.easyhoa-list-pager .pagination > li > a {
  min-width: 1.75rem;
  height: 1.75rem;
  padding: 0 0.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--phoenix-secondary-color, #6e7891);
  background-color: transparent;
  border: 0;
  border-radius: 0.375rem;
  font-size: 0.8rem;
  line-height: 1;
  text-decoration: none;
}

.easyhoa-list-pager .pagination > li.active > a,
.easyhoa-list-pager .pagination > li.active > a.page {
  background-color: var(--easyhoa-primary);
  color: #fff;
}

.easyhoa-list-pager .pagination a.page:hover,
.easyhoa-list-pager .pagination > li > a:hover {
  background-color: var(--easyhoa-hover-bg);
  color: var(--easyhoa-primary);
}

.easyhoa-list-pager .pagination > li.active > a:hover,
.easyhoa-list-pager .pagination > li.active > a.page:hover {
  background-color: var(--easyhoa-primary);
  color: #fff;
}

.easyhoa-list-info {
  color: var(--phoenix-body-tertiary-color, #6e7891);
  font-size: 0.8rem;
}

/* Section cards: every list / table / row list sits in a white
 * `card border border-translucent mb-5`. Tables go in `card-body p-0`
 * (cells keep the global 1rem first / last padding); the pager sits at the
 * bottom of the card under a translucent top border. */
.card > .card-body.p-0 .easyhoa-dt table.table,
.card > .card-body.p-0 > .table-responsive > table.table,
.card > .card-body.p-0 > table.table {
  margin-bottom: 0;
}

.card > .card-body.p-0 .easyhoa-list-pager {
  margin: 0 !important;
  padding: 0.75rem 1rem !important;
  border-top: 1px solid var(--phoenix-border-color-translucent, rgba(0, 0, 0, 0.08));
}

.card > .card-body.p-0 .dt-container > .dt-layout-row:not(.dt-layout-table) {
  margin: 0;
  padding: 0 1rem;
}

.card > .card-body.p-0 .dt-container > .dt-layout-row:not(.dt-layout-table):last-child {
  border-top: 1px solid var(--phoenix-border-color-translucent, rgba(0, 0, 0, 0.08));
}

.card > .card-body.p-0 .dt-container .dt-info,
.card > .card-body.p-0 .dt-container .dt-paging {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.card > .card-body.p-0 .dt-container > .dt-layout-row.dt-layout-table {
  margin: 0;
}

.card > .card-body.p-0 .easyhoa-dt:has(.easyhoa-actions-menu),
.card > .card-body.p-0 .easyhoa-dt:has(.easyhoa-phone-actions-menu),
.card > .card-body.p-0 .easyhoa-dt:has(.easyhoa-actions-menu) .table-responsive,
.card > .card-body.p-0 .easyhoa-dt:has(.easyhoa-phone-actions-menu) .table-responsive {
  overflow: visible;
}

/* Row lists (news, announcements, …) inside a section card */
.easyhoa-card-list > * {
  padding: 1rem 1.25rem;
}

.easyhoa-card-list > * + * {
  border-top: 1px solid var(--phoenix-border-color-translucent, rgba(0, 0, 0, 0.08));
}

/* Accounting Transactions: the scrolling row list is the card's last child, so it follows
   the card's bottom corners (rows scroll under them instead of poking out square). */
.card > .table_body_scrollable_container:last-child {
  border-bottom-left-radius: var(--phoenix-card-inner-border-radius);
  border-bottom-right-radius: var(--phoenix-card-inner-border-radius);
}

/* Empty message inside a section card (no card-in-card) */
.easyhoa-card-empty {
  padding: 3rem 1rem;
  text-align: center;
}

.dropdown-profile .nav .nav-link {
  color: var(--phoenix-body-color) !important;
}

.dropdown-profile .nav .nav-link .text-body {
  color: var(--phoenix-body-color) !important;
}

.dropdown-profile .nav .nav-link:hover,
.dropdown-profile .nav .nav-link:focus {
  background: var(--easyhoa-hover-bg) !important;
  background-color: var(--easyhoa-hover-bg) !important;
  color: var(--easyhoa-accent) !important;
}

.dropdown-profile .nav .nav-link:hover .text-body,
.dropdown-profile .nav .nav-link:focus .text-body {
  color: var(--easyhoa-accent) !important;
}

.table > :not(caption) > * > :first-child {
  padding-left: 1rem !important;
}

.table > :not(caption) > * > :last-child {
  padding-right: 1rem !important;
}

/* Section cards: every bordered section card header is a tinted band (style guide Option C).
   Modals, offcanvas, dropdowns, accordions, chat panes, the email thread and the report
   catalogs keep their own headers. Non-card panels use .easyhoa-section-header. */
.card > .card-header h4,
.card > .card-header h5,
.card > .card-header h6,
.card > .card-header .h4,
.card > .card-header .h5,
.card > .card-header .h6,
.card > .card-header h4.text-body-emphasis,
.card > .card-header h5.text-body-emphasis,
.card > .card-header h6.text-body-emphasis {
  color: var(--easyhoa-primary) !important;
}

.card.border-translucent:not(.easyhoa-reports-list):not(.easyhoa-email-detail):not(.easyhoa-chat-pane):not(.chat-sidebar):not(.modal *):not(.offcanvas *):not(.dropdown-menu *) > .card-header:not(.accordion-header):not(.easyhoa-chat-header):not(.easyhoa-coa-group-header):not(.easyhoa-bg-secondary-header),
.easyhoa-section-header {
  --phoenix-card-cap-padding-y: 1rem;
  --phoenix-card-cap-padding-x: 1.5rem;
  background-color: var(--easyhoa-hover-bg) !important;
  border-bottom: 1px solid var(--phoenix-border-color-translucent) !important;
}

.card.border-translucent:not(.easyhoa-reports-list):not(.easyhoa-email-detail):not(.easyhoa-chat-pane):not(.chat-sidebar):not(.modal *):not(.offcanvas *):not(.dropdown-menu *) > .card-header:not(.accordion-header):not(.easyhoa-chat-header):not(.easyhoa-coa-group-header):not(.easyhoa-bg-secondary-header):first-child {
  border-top-left-radius: var(--phoenix-card-inner-border-radius);
  border-top-right-radius: var(--phoenix-card-inner-border-radius);
}

.card.border-translucent:not(.easyhoa-reports-list):not(.easyhoa-email-detail):not(.easyhoa-chat-pane):not(.chat-sidebar):not(.modal *):not(.offcanvas *):not(.dropdown-menu *) > .card-header:not(.accordion-header):not(.easyhoa-chat-header):not(.easyhoa-coa-group-header):not(.easyhoa-bg-secondary-header) :is(h5, .h5, .card-title, .easyhoa-header-title),
.easyhoa-section-header :is(h5, .h5, .card-title, .easyhoa-header-title) {
  color: var(--easyhoa-primary) !important;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.2;
}

.card.border-translucent:not(.easyhoa-reports-list):not(.easyhoa-email-detail):not(.easyhoa-chat-pane):not(.chat-sidebar):not(.modal *):not(.offcanvas *):not(.dropdown-menu *) > .card-header:not(.accordion-header):not(.easyhoa-chat-header):not(.easyhoa-coa-group-header):not(.easyhoa-bg-secondary-header) :is(.text-body-tertiary, .text-body-secondary, .text-muted):not(.btn):not(.badge),
.easyhoa-section-header :is(.text-body-tertiary, .text-body-secondary, .text-muted):not(.btn):not(.badge) {
  color: var(--phoenix-secondary-color, #525b75) !important;
}

/* Band header inside a padded non-card panel (p-4 default, p-3 tighter) */
.easyhoa-section-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin: -1.5rem -1.5rem 1.5rem;
  padding: 1rem 1.5rem;
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}

.p-3 > .easyhoa-section-header {
  margin: -1rem -1rem 1rem;
  padding: 0.75rem 1rem;
}

/* Collapsible section cards: the card-header itself is the collapse toggle. Closed, the
   band is the whole card, so drop its bottom divider (the card border already closes it). */
.card.border-translucent > .card-header[data-bs-toggle="collapse"] {
  cursor: pointer;
}

.card.border-translucent > .card-header.accordion-button {
  width: 100%;
  text-align: left;
  border-width: 0;
  border-radius: 0;
}

.card.border-translucent > .card-header.collapsed[data-bs-toggle="collapse"] {
  border-bottom-color: transparent !important;
}

/* Soft controls on the band: the soft fills (#dbe5f0, #fef6e7) wash out on #e9eff5, so
   they sit on white with a subtle border. Hover / focus / active keep the solid fill. */
.card.border-translucent:not(.easyhoa-reports-list):not(.easyhoa-email-detail):not(.easyhoa-chat-pane):not(.chat-sidebar):not(.modal *):not(.offcanvas *):not(.dropdown-menu *) > .card-header:not(.accordion-header):not(.easyhoa-chat-header):not(.easyhoa-coa-group-header):not(.easyhoa-bg-secondary-header),
.easyhoa-section-header {
  --easyhoa-band-control-border: #c3d3e5;
}

:is(.card.border-translucent > .card-header, .easyhoa-section-header) .easyhoa-btn-primary:not(.easyhoa-btn-solid):not(:hover):not(:focus):not(:active):not(.active):not(.show):not(:disabled):not(.disabled) {
  --phoenix-btn-bg: #fff;
  --phoenix-btn-border-color: var(--easyhoa-band-control-border, #c3d3e5);
  color: var(--easyhoa-primary) !important;
  background-color: #fff !important;
  border-color: var(--easyhoa-band-control-border, #c3d3e5) !important;
}

/* Icon-only soft buttons on the band: keep the glyph primary blue and full size on the white fill */
:is(.card.border-translucent > .card-header, .easyhoa-section-header) .btn.btn-icon.easyhoa-btn-primary:not(.easyhoa-btn-solid):not(:hover):not(:focus):not(:active):not(.active):not(.show) :is(.fas, .fa-solid, .svg-inline--fa) {
  color: var(--easyhoa-primary);
  font-size: 0.875rem;
}

:is(.card.border-translucent > .card-header, .easyhoa-section-header) .easyhoa-btn-secondary-soft:not(:hover):not(:focus):not(:active):not(.active):not(:disabled):not(.disabled) {
  background-color: #fff !important;
  border-color: var(--easyhoa-secondary-soft) !important;
}

:is(.card.border-translucent > .card-header, .easyhoa-section-header) .btn-phoenix-secondary:not(:hover):not(:focus):not(:active):not(.show) {
  --phoenix-btn-bg: #fff;
  background-color: #fff !important;
  border-color: var(--easyhoa-band-control-border, #c3d3e5) !important;
}

:is(.card.border-translucent > .card-header, .easyhoa-section-header) :is(.form-control, .form-select, .easyhoa-form-dropdown-toggle):not(:disabled) {
  background-color: #fff;
}

.easyhoa-footer-copy {
  color: var(--easyhoa-accent) !important;
}

.easyhoa-env-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.2;
  border-radius: 999px;
  padding: 0.28rem 0.7rem;
}

.easyhoa-env-badge--local {
  background: var(--easyhoa-danger-bg);
  color: var(--easyhoa-danger-text);
}

.easyhoa-env-badge--staging {
  background: var(--easyhoa-secondary-soft-bg);
  color: var(--easyhoa-secondary-hover);
}

#top_nav .easyhoa-env-badge {
  flex-shrink: 0;
  white-space: nowrap;
}

#top_nav_announcements {
  min-width: 2.25rem;
}

#top_nav_announcements_count:not(.d-none) {
  position: absolute;
  top: 0.2rem;
  right: 0;
  min-width: 1rem;
  height: 1rem;
  padding: 0 0.28rem;
  font-size: 0.55rem;
  line-height: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#announcementsOffcanvas {
  --phoenix-offcanvas-width: 28rem;
}

#announcementsOffcanvas .easyhoa-news-item:last-child {
  margin-bottom: 0;
}

.content {
  padding-bottom: 9rem;
}

@media (min-width: 576px) {
  .content {
    padding-bottom: 7rem;
  }
}

.easyhoa-customers-map {
  height: calc(100vh - 16rem);
  min-height: 420px;
  width: 100%;
}

.easyhoa-hq-alert-bar {
  background: var(--easyhoa-danger-bg);
  color: var(--easyhoa-danger-text);
  border-bottom-color: color-mix(in srgb, var(--easyhoa-danger-text) 16%, transparent);
}

.easyhoa-hq-alert-bar--staging {
  background: var(--easyhoa-secondary-soft-bg);
  color: var(--easyhoa-secondary-hover);
  border-bottom-color: color-mix(in srgb, var(--easyhoa-secondary) 28%, transparent);
}

.easyhoa-hq-alert-bar .easyhoa-hq-alert-label {
  color: inherit;
  background: transparent;
  padding: 0;
}

.easyhoa-reports-list .easyhoa-report-category-title,
.easyhoa-reports-list h2.easyhoa-report-category-title {
  display: block;
  background-color: var(--easyhoa-hover-bg) !important;
  color: var(--easyhoa-primary) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  margin: 0 !important;
  padding: 0.9rem 1rem;
}

.easyhoa-reports-list .easyhoa-report-row h5 {
  font-size: 0.9rem !important;
}

.easyhoa-reports-list .easyhoa-report-category-header {
  background-color: var(--easyhoa-hover-bg);
  padding: 0.85rem 1rem 1rem;
}

.easyhoa-reports-list .easyhoa-report-category-header .easyhoa-report-category-title {
  padding: 0 !important;
  background: transparent !important;
}

/* Chart of Accounts: each account group is a soft blue band above its sub-account rows */
.card-header.easyhoa-coa-group-header {
  background-color: var(--easyhoa-hover-bg) !important;
  border-top: 1px solid var(--phoenix-border-color-translucent);
  border-bottom: 1px solid var(--phoenix-border-color-translucent) !important;
  padding: 0.75rem 1rem;
  min-height: 3.25rem;
}

.card-header.easyhoa-coa-group-header:first-child {
  border-top: 0;
}

.easyhoa-coa-group-header .easyhoa-coa-group-title {
  color: var(--easyhoa-primary);
  font-size: 0.9rem;
  font-weight: 700;
}

.easyhoa-reports-list .easyhoa-report-category-desc {
  margin-top: 0.4rem;
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1.45;
  color: var(--phoenix-secondary-color, #525b75);
}

/* Descriptions wrap; the text column may shrink (flex items default to
   min-width: auto) so Run report always stays inside the card. */
.easyhoa-reports-list .easyhoa-report-row > :first-child,
.easyhoa-reports-list .easyhoa-report-row > :first-child > div {
  min-width: 0;
}

.easyhoa-report-icon {
  width: 2.25rem !important;
  height: 2.25rem !important;
  min-width: 2.25rem;
  border-radius: 0.5rem;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background-color: var(--easyhoa-hover-bg) !important;
  color: var(--easyhoa-primary) !important;
  font-size: 0.85rem !important;
}

.easyhoa-report-icon svg,
.easyhoa-report-icon .svg-inline--fa {
  width: 0.85rem !important;
  height: 0.85rem !important;
  color: inherit !important;
}

/* Rows carry their own horizontal padding (px-3 px-md-4) and sit directly in
   the category section, so the hover fill and dividers run edge to edge like
   the category header bands. Do not pad the row wrapper. */
.easyhoa-report-row:hover {
  background-color: rgba(233, 239, 245, 0.55);
}

.easyhoa-rules-list .easyhoa-report-category-header .easyhoa-btn-primary {
  margin-top: 0.1rem;
}

.easyhoa-rules-list .easyhoa-report-row {
  width: 100%;
}

/* Additional Late: logo yellow */
.easyhoa-rules-list .easyhoa-rules-section--additional .easyhoa-report-category-header {
  background-color: var(--easyhoa-secondary-soft-bg);
}

.easyhoa-rules-list .easyhoa-rules-section--additional .easyhoa-report-category-title {
  color: var(--easyhoa-secondary-hover) !important;
}

.easyhoa-rules-list .easyhoa-rules-section--additional .easyhoa-report-icon {
  background-color: var(--easyhoa-secondary-soft-bg) !important;
  color: var(--easyhoa-secondary-hover) !important;
}

.easyhoa-rules-list .easyhoa-rules-section--additional .easyhoa-report-row:hover {
  background-color: rgba(254, 246, 231, 0.7);
}

/* Violation Late Fee: teal */
.easyhoa-rules-list .easyhoa-rules-section--violation .easyhoa-report-category-header {
  background-color: var(--easyhoa-teal-bg-subtle);
}

.easyhoa-rules-list .easyhoa-rules-section--violation .easyhoa-report-category-title {
  color: var(--easyhoa-teal-text-emphasis) !important;
}

.easyhoa-rules-list .easyhoa-rules-section--violation .easyhoa-report-icon {
  background-color: var(--easyhoa-teal-bg-subtle) !important;
  color: var(--easyhoa-teal-text-emphasis) !important;
}

.easyhoa-rules-list .easyhoa-rules-section--violation .easyhoa-report-row:hover {
  background-color: rgba(208, 244, 240, 0.55);
}

/* Style guide kit */
.easyhoa-sg-swatch {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  border-radius: 0.375rem;
  flex-shrink: 0;
}

.easyhoa-sg-nav {
  max-width: 18rem;
  background: var(--phoenix-emphasis-bg, #fff);
  border: 1px solid var(--phoenix-border-color-translucent);
  border-radius: 0.5rem;
  padding: 0.75rem 0;
  position: relative;
}

.easyhoa-sg-nav-label {
  text-transform: uppercase;
  font-weight: 700;
  font-size: 0.64rem;
  color: var(--phoenix-navbar-vertical-label-color, #6e7891);
  margin: 0.5rem 0 0.5rem;
  padding-left: 1.5rem;
}

.easyhoa-sg-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.4rem 1.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--phoenix-navbar-vertical-link-color, #31374a);
  text-decoration: none;
  border-radius: 0.375rem;
  margin: 0 0.5rem;
}

.easyhoa-sg-link svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.easyhoa-sg-link.demo-hover,
.easyhoa-sg-link:hover {
  color: var(--easyhoa-accent);
  background-color: var(--easyhoa-hover-bg);
}

.easyhoa-sg-link.demo-hover svg,
.easyhoa-sg-link:hover svg {
  stroke: var(--easyhoa-accent);
}

.easyhoa-sg-link.demo-focus {
  outline: 2px solid var(--easyhoa-primary);
  outline-offset: 2px;
}

.easyhoa-sg-link.active {
  color: var(--easyhoa-accent);
  background-color: var(--easyhoa-hover-bg);
}

.easyhoa-sg-link.active svg {
  stroke: var(--easyhoa-accent);
}

.easyhoa-sg-btn-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.easyhoa-sg-demo-frame {
  background: var(--easyhoa-soft-gray-bg);
  border: 1px dashed var(--phoenix-border-color-translucent);
  border-radius: 0.5rem;
  padding: 1.25rem;
}

.easyhoa-report-toolbar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0 0.75rem;
}

.easyhoa-report-toolbar-start,
.easyhoa-report-toolbar-end {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.5rem;
  width: auto;
  flex: 0 0 auto;
}

.easyhoa-report-toolbar-end {
  margin-left: auto;
}

.easyhoa-report-toolbar-end .dropdown {
  display: inline-block;
  flex: 0 0 auto;
}

.dropdown-menu.easyhoa-columns-menu,
#filter_dropdown.easyhoa-columns-menu {
  --easyhoa-columns-menu-max-height: 18rem;
  min-width: 16.5rem;
  max-height: min(var(--easyhoa-columns-menu-max-height), calc(100vh - 14rem)) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  padding: 0.5rem 0;
}

.easyhoa-columns-menu .dropdown-item {
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--phoenix-body-color, #31374a);
  white-space: nowrap;
  text-transform: capitalize;
  padding: 0.55rem 1rem;
}

.easyhoa-columns-menu .dropdown-item:hover,
.easyhoa-columns-menu .dropdown-item:focus,
.easyhoa-columns-menu .dropdown-item:active {
  background-color: var(--easyhoa-hover-bg);
  color: var(--easyhoa-primary);
}

.easyhoa-columns-menu .form-check-input {
  width: 1.05rem;
  height: 1.05rem;
  margin: 0;
  cursor: pointer;
  border-color: var(--phoenix-border-color, #d8e2ef);
  flex-shrink: 0;
}

.easyhoa-columns-menu .form-check-input:checked {
  background-color: var(--easyhoa-primary);
  border-color: var(--easyhoa-primary);
}

.easyhoa-list-length {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0;
  font-size: 0.8rem;
  font-weight: 400;
  white-space: nowrap;
  color: var(--phoenix-body-tertiary-color, #6e7891);
}

.easyhoa-list-length .form-select,
.easyhoa-report-toolbar-start .form-select {
  width: auto !important;
  min-width: 4.75rem;
  display: inline-block;
  background-color: transparent;
  font-size: 0.8rem;
  padding: 0.35rem 1.75rem 0.35rem 0.65rem;
}

.easyhoa-report-toolbar .search,
.easyhoa-report-toolbar .search.form-control {
  display: inline-block;
  width: 16rem !important;
  max-width: 16rem;
  flex: 0 0 16rem;
  margin-left: 0;
  background-color: transparent;
}

.flatpickr-calendar {
  width: 22.5rem !important;
  padding: 1.15rem 1.2rem 1.2rem;
  overflow: visible;
  background-color: var(--phoenix-emphasis-bg, #fff) !important;
  border: 1px solid var(--phoenix-border-color-translucent, #e3e6ed) !important;
  border-radius: 0.5rem;
  box-shadow: 0 0.5rem 1.5rem rgba(20, 24, 36, 0.12) !important;
}

.flatpickr-calendar,
.flatpickr-months,
.flatpickr-months .flatpickr-month,
.flatpickr-innerContainer,
.flatpickr-rContainer,
.flatpickr-weekdays,
.flatpickr-days {
  background-color: var(--phoenix-emphasis-bg, #fff) !important;
}

.flatpickr-calendar.arrowTop:after,
.flatpickr-calendar.arrowBottom:after {
  border-bottom-color: var(--phoenix-emphasis-bg, #fff) !important;
  border-top-color: var(--phoenix-emphasis-bg, #fff) !important;
}

.flatpickr-months {
  display: flex;
  align-items: center;
  height: 2.85rem !important;
  min-height: 2.85rem;
  padding: 0.25rem 0 0.35rem;
  overflow: visible;
}

.flatpickr-months .flatpickr-month {
  height: 100% !important;
  padding-top: 0 !important;
  overflow: visible;
  background-color: transparent !important;
}

.flatpickr-months .flatpickr-month .flatpickr-current-month {
  position: static !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: auto !important;
  left: auto !important;
  height: auto !important;
  padding: 0.4rem 2.85rem !important;
  font-size: 1rem !important;
  font-weight: 700;
  line-height: 1.5 !important;
  overflow: visible;
  color: var(--phoenix-heading-color, #141824);
  background-color: transparent !important;
}

.flatpickr-months .flatpickr-month .flatpickr-current-month .cur-month,
.flatpickr-months .flatpickr-month .flatpickr-current-month .cur-year,
.flatpickr-months .flatpickr-month .flatpickr-current-month .flatpickr-monthDropdown-months {
  display: inline-block;
  font-size: 1rem !important;
  font-weight: 700;
  line-height: 1.5 !important;
  height: auto !important;
  padding: 0.1rem 0;
  margin: 0;
  overflow: visible;
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0.35rem;
}

.flatpickr-months .flatpickr-prev-month {
  left: 0.45rem !important;
}

.flatpickr-months .flatpickr-next-month {
  right: 0.45rem !important;
}

.flatpickr-weekdays {
  height: auto;
  padding: 0.15rem 0 0.35rem;
}

span.flatpickr-weekday,
.flatpickr-weekdaycontainer,
.flatpickr-months .flatpickr-month {
  background-color: transparent !important;
}

span.flatpickr-weekday {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--phoenix-body-tertiary-color, #6e7891) !important;
}

.flatpickr-innerContainer {
  padding: 0.15rem 0.1rem 0.35rem !important;
}

.flatpickr-innerContainer .flatpickr-rContainer,
.flatpickr-innerContainer .flatpickr-rContainer .flatpickr-days,
.flatpickr-innerContainer .flatpickr-rContainer .flatpickr-days .dayContainer {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
}

.flatpickr-day {
  margin: 0.18rem !important;
  height: 2.15rem !important;
  width: 2.15rem !important;
  max-width: 2.15rem !important;
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: 0.375rem;
}

.flatpickr-day.today {
  background: var(--easyhoa-primary) !important;
  color: #fff !important;
  border-radius: 50%;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background: var(--easyhoa-primary) !important;
  color: #fff !important;
  border: 0;
}

.flatpickr-day.inRange {
  background: var(--easyhoa-hover-bg) !important;
  box-shadow: none !important;
  border-radius: 0;
}

.tox-promotion,
.tox .tox-promotion,
.tox-promotion-link {
  display: none !important;
}

.tox.tox-tinymce {
  margin-top: 0.15rem;
}

.easyhoa-notice {
  background-color: var(--easyhoa-secondary-soft-bg);
  /* Body text on soft yellow — secondary / secondary-hover were unreadable (~1.8–2.4:1). */
  color: var(--phoenix-body-color, #31374a);
  border: 1px solid var(--easyhoa-secondary-soft);
  border-left: 3px solid var(--easyhoa-secondary);
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  font-size: 0.8rem;
  font-weight: 600;
}

/* Tagify chips — same soft yellow + readable body text as Choices. */
.easyhoa-tagify .tagify,
.tagify.easyhoa-tagify {
  --tag-bg: var(--easyhoa-secondary-soft-bg);
  --tag-text-color: var(--phoenix-body-color, #31374a);
  --tag-hover: var(--easyhoa-secondary-soft);
  --tag-remove-btn-color: var(--phoenix-body-color, #31374a);
}

.tagify__tag {
  --tag-bg: var(--easyhoa-secondary-soft-bg);
  --tag-text-color: var(--phoenix-body-color, #31374a);
  --tag-hover: var(--easyhoa-secondary-soft);
}

.easyhoa-notice .easyhoa-table-link {
  color: var(--easyhoa-primary);
}

.easyhoa-input_file-button {
  background-color: var(--easyhoa-hover-bg) !important;
  color: var(--easyhoa-primary) !important;
  font-weight: 600;
  cursor: pointer;
}

.easyhoa-fiscal-year-control {
  width: 100%;
  max-width: 22rem;
}

.easyhoa-fiscal-year-control > .form-select {
  min-width: 0;
}

.easyhoa-fiscal-year-control > .btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

.easyhoa-board-name-control {
  width: 100%;
  max-width: 32rem;
}

.easyhoa-board-name-control > .form-control {
  min-width: 0;
}

.easyhoa-board-name-control > .btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

.easyhoa-board-visibility {
  display: flex;
  align-items: center;
  min-height: 3rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--phoenix-border-color-translucent, rgba(0, 0, 0, 0.08));
  border-radius: 0.5rem;
  background-color: var(--easyhoa-soft-gray-bg);
}

.easyhoa-board-visibility .form-check-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--phoenix-body-color, #31374a);
}

.easyhoa-bank-thumb {
  width: 2.5rem;
  height: 2.5rem;
  flex: 0 0 2.5rem;
  border-radius: 0.5rem;
  overflow: hidden;
  background: var(--easyhoa-hover-bg);
  color: var(--easyhoa-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
}

.easyhoa-bank-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.easyhoa-bank-account-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.2fr) auto auto;
  gap: 0.75rem 1rem;
  align-items: center;
  padding: 0.85rem 0.9rem;
  border: 1px solid var(--phoenix-border-color-translucent, rgba(0, 0, 0, 0.08));
  border-radius: 0.5rem;
  background: #fff;
}

.easyhoa-bank-account-row + .easyhoa-bank-account-row {
  margin-top: 0.5rem;
}

.easyhoa-bank-nickname:empty::before {
  content: "None";
  font-weight: 400;
  color: var(--phoenix-secondary-color, #525b75);
}

/* Email / Phone / Text HOA meta section card (banded header is the collapse toggle, key fact in the helper line) */
.easyhoa-comms-meta-accordion .card-header.accordion-button,
.easyhoa-comms-meta-accordion .card-header.accordion-button:not(.collapsed),
.easyhoa-comms-meta-accordion .card-header.accordion-button:focus {
  color: inherit;
  box-shadow: none;
}

.easyhoa-comms-meta-accordion .card-header.accordion-button::after {
  background-size: 0.9rem;
  width: 0.9rem;
  height: 0.9rem;
  margin-left: 0.75rem;
  flex-shrink: 0;
}

.easyhoa-comms-meta-summary {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
}

.easyhoa-comms-meta-summary .fw-semibold,
.easyhoa-comms-meta-summary .text-body {
  color: var(--phoenix-body-color, #31374a);
}

.easyhoa-comms-meta-accordion .collapse > .card-body {
  font-size: 0.8rem;
  color: var(--phoenix-secondary-color, #525b75);
}

.easyhoa-chat .conversation-filters {
  padding-bottom: 0.85rem;
  margin-bottom: 0.85rem;
  min-width: 0;
  max-width: 100%;
}

.easyhoa-chat .conversation-filters .d-flex {
  min-width: 0;
  max-width: 100%;
}

.easyhoa-chat .conversation-filters .conversation-filter {
  line-height: 1.2;
  max-width: 100%;
}

.easyhoa-settings-help .accordion-item {
  border: 1px solid var(--phoenix-border-color-translucent, rgba(0, 0, 0, 0.08));
  border-radius: 0.5rem;
  overflow: hidden;
  background: #fff;
}

.easyhoa-settings-help .accordion-item + .accordion-item {
  margin-top: 0.5rem;
}

.easyhoa-settings-help .accordion-button {
  padding: 0.7rem 0.9rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--phoenix-emphasis-color, #141824);
  background: #fff;
  box-shadow: none;
}

.easyhoa-settings-help .accordion-button:not(.collapsed) {
  color: var(--easyhoa-primary);
  background: var(--easyhoa-hover-bg);
  box-shadow: none;
}

.easyhoa-settings-help .accordion-button:focus {
  box-shadow: none;
  border-color: transparent;
}

.easyhoa-settings-help .accordion-button::after {
  background-size: 0.9rem;
  width: 0.9rem;
  height: 0.9rem;
}

.easyhoa-settings-help .accordion-body {
  padding: 0.75rem 0.9rem 0.9rem;
  font-size: 0.8rem;
  color: var(--phoenix-secondary-color, #525b75);
  background: #fff;
}

@media (max-width: 767.98px) {
  .easyhoa-bank-account-row {
    grid-template-columns: 1fr auto;
  }

  .easyhoa-bank-account-row > :nth-child(2) {
    grid-column: 1 / -1;
  }

  .easyhoa-bank-account-row > :nth-child(3) {
    justify-self: start;
  }
}

.bank_account_card {
  min-height: 8.5rem;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

/* d-flex !important otherwise beats Bootstrap .collapse display:none */
.bank_account_card.collapse:not(.show) {
  display: none !important;
}

.easyhoa-recon-summary .progress {
  background-color: var(--easyhoa-hover-bg);
}

.easyhoa-recon-summary .progress-bar {
  background-color: var(--easyhoa-primary);
}

/* Budget vs Actuals — legacy-style banded separation (not zebra list chrome).
   Profit & Loss (.easyhoa-pl-report), Balance Sheet (.easyhoa-bs-report) and
   General Ledger (.easyhoa-gl-report) share the table rules: dark head and the
   section / group / subtotal / total / spacer row classes. */
.easyhoa-budget-report {
  --bs-table-bg: transparent;
  border: 1px solid var(--phoenix-border-color, rgba(0, 0, 0, 0.08));
  border-radius: 0.5rem;
  overflow: hidden;
  background: #fff;
}

:is(.easyhoa-budget-report, .easyhoa-pl-report, .easyhoa-bs-report, .easyhoa-gl-report) .table {
  --bs-table-bg: transparent;
  margin-bottom: 0;
}

:is(.easyhoa-budget-report, .easyhoa-pl-report, .easyhoa-bs-report, .easyhoa-gl-report) .table > :not(caption) > * > * {
  border-left: 0;
  border-right: 0;
  border-top-color: transparent;
  border-bottom-color: rgba(159, 166, 188, 0.18);
  padding: 0.45rem 0.75rem;
  vertical-align: middle;
  background-color: transparent;
  box-shadow: none;
}

:is(.easyhoa-budget-report, .easyhoa-pl-report, .easyhoa-bs-report, .easyhoa-gl-report) thead th {
  background-color: #5e6e82 !important;
  color: #fff !important;
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border-bottom: 0 !important;
  white-space: nowrap;
}

:is(.easyhoa-budget-report, .easyhoa-pl-report, .easyhoa-bs-report, .easyhoa-gl-report) tbody tr:not(.easyhoa-budget-section):not(.easyhoa-budget-group):not(.easyhoa-budget-subtotal):not(.easyhoa-budget-total):not(.easyhoa-budget-spacer):not(.easyhoa-pl-account):not(.easyhoa-gl-change):nth-child(even) > * {
  background-color: rgba(159, 166, 188, 0.1) !important;
}

:is(.easyhoa-budget-report, .easyhoa-pl-report, .easyhoa-bs-report, .easyhoa-gl-report) .easyhoa-budget-section > * {
  padding-top: 0.7rem !important;
  padding-bottom: 0.7rem !important;
  font-size: 1rem;
  font-weight: 700;
  color: var(--phoenix-emphasis-color, #141824);
  background-color: #e9eff5 !important;
  border-bottom-color: transparent !important;
}

:is(.easyhoa-budget-report, .easyhoa-pl-report, .easyhoa-bs-report, .easyhoa-gl-report) .easyhoa-budget-group > * {
  font-weight: 700;
  color: var(--phoenix-body-color, #31374a);
  background-color: rgba(159, 166, 188, 0.28) !important;
  border-bottom-color: transparent !important;
}

:is(.easyhoa-budget-report, .easyhoa-pl-report, .easyhoa-bs-report, .easyhoa-gl-report) .easyhoa-budget-subtotal > *,
:is(.easyhoa-budget-report, .easyhoa-pl-report, .easyhoa-bs-report, .easyhoa-gl-report) .easyhoa-budget-total > * {
  font-weight: 700;
  color: var(--phoenix-emphasis-color, #141824);
  background-color: rgba(159, 166, 188, 0.35) !important;
  border-bottom-color: transparent !important;
}

:is(.easyhoa-budget-report, .easyhoa-pl-report, .easyhoa-bs-report, .easyhoa-gl-report) .easyhoa-budget-total > * {
  background-color: rgba(159, 166, 188, 0.45) !important;
}

/* Amounts never break mid-number ("-\n$38,056.30"); names indent under their group. */
:is(.easyhoa-budget-report, .easyhoa-pl-report, .easyhoa-bs-report, .easyhoa-gl-report) td.text-end {
  white-space: nowrap;
}

.easyhoa-budget-report .easyhoa-budget-line > td.easyhoa-budget-name {
  padding-left: 1.5rem !important;
  min-width: 12rem;
}

:is(.easyhoa-budget-report, .easyhoa-pl-report, .easyhoa-bs-report, .easyhoa-gl-report) .easyhoa-budget-spacer > td {
  padding: 0.35rem !important;
  background-color: transparent !important;
  border-bottom-color: transparent !important;
}

/* Profit & Loss, Balance Sheet, General Ledger — full card width like the other
   reports (wide tables scroll inside .table-responsive); slightly larger text from
   md up. Head and row bands come from the Budget vs Actuals rules above; account
   header rows (P&L / Balance Sheet Details, each General Ledger account) sit on
   the table-head gray. */
:is(.easyhoa-pl-report, .easyhoa-bs-report, .easyhoa-gl-report) .easyhoa-pl-account > * {
  font-weight: 600;
  color: var(--phoenix-emphasis-color, #141824);
  background-color: var(--easyhoa-table-head-bg) !important;
  border-bottom-color: transparent !important;
}

@media (min-width: 768px) {
  :is(.easyhoa-pl-report, .easyhoa-bs-report, .easyhoa-gl-report) .table {
    font-size: 0.875rem !important;
  }
}

.reconciliation-transaction-row[data-transaction_matched="1"] .reconciliation-match-btn {
  color: #fff !important;
  background-color: var(--phoenix-success, #25b003) !important;
  border-color: var(--phoenix-success, #25b003) !important;
}

.reconciliation-transaction-row[data-transaction_matched="0"] .reconciliation-match-btn {
  color: var(--phoenix-secondary-color, #6e7891) !important;
  background-color: transparent !important;
  border-color: var(--phoenix-gray-300, #cbd0dd) !important;
}

.bank_account_card:hover {
  border-color: var(--easyhoa-primary-soft) !important;
}

.bank_account_card.bank_selected {
  border-color: var(--easyhoa-primary) !important;
  background-color: var(--easyhoa-hover-bg) !important;
  box-shadow: inset 0 0 0 1px var(--easyhoa-primary);
}

.easyhoa-transactions-thead {
  background: var(--easyhoa-table-head-bg);
}

.easyhoa-outstanding {
  color: var(--easyhoa-danger-text);
}

.easyhoa-credit {
  color: var(--easyhoa-teal-text-emphasis, #0f6e66);
}

.easyhoa-kpi-icon {
  min-width: 0;
  color: inherit;
}

.easyhoa-kpi-icon:hover,
.easyhoa-kpi-icon:focus {
  color: inherit;
}

.easyhoa-kpi-icon:hover .fa-stack {
  opacity: 0.85;
}

.easyhoa-kpi-icon h2 {
  color: var(--phoenix-emphasis-color, #141824);
}

.easyhoa-dt.easyhoa-dashboard-widget {
  max-height: 18rem;
  overflow: auto;
}

@media print {
  .content {
    padding-bottom: 0 !important;
  }
}

/*
 * Falcon leftovers still used by unmigrated dashboard screens.
 * Map those utilities and btn-falcon-* to EasyHOA / Phoenix so 331
 * screens keep painting until each module is restyled.
 */
:root {
  --falcon-white: #fff;
  --falcon-light: var(--phoenix-gray-100, #eff2f6);
  --falcon-500: var(--phoenix-gray-500, #8a94ad);
  --falcon-900: var(--phoenix-gray-dark, #141824);
  --falcon-success: #25b003;
  --falcon-warning: #e5780b;
  --falcon-danger: #fa3b1d;
  --falcon-input-border-color: var(--phoenix-border-color, #cbd0dd);
  --falcon-input-focus-border-color: var(--easyhoa-primary);
  --falcon-input-color: var(--phoenix-body-color, #31374a);
  --falcon-input-bg: #fff;
  --falcon-form-check-input-border-color: var(--phoenix-border-color, #cbd0dd);
  --falcon-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);
}

.fs--1 {
  font-size: 0.8rem !important;
}
.fs--2 {
  font-size: 0.64rem !important;
}
.text-600 {
  color: var(--phoenix-gray, #6e7891) !important;
}
.text-800,
.text-900,
.text-1000 {
  color: var(--phoenix-emphasis-color, #141824) !important;
}
.bg-200 {
  background-color: var(--phoenix-gray-200, #e3e6ed) !important;
}
.dark__bg-1000 {
  background-color: var(--phoenix-emphasis-bg, #fff);
}

.btn-falcon-primary {
  color: var(--easyhoa-primary);
  background-color: var(--easyhoa-primary-soft-bg);
  border: 1px solid var(--easyhoa-primary-soft-bg);
  font-weight: 600;
}
.btn-falcon-primary:hover,
.btn-falcon-primary:focus,
.btn-falcon-primary:active,
.btn-falcon-primary.active {
  color: #fff;
  background-color: var(--easyhoa-primary);
  border-color: var(--easyhoa-primary);
}
.btn-falcon-default {
  color: var(--phoenix-secondary, #31374a);
  background-color: transparent;
  border: 1px solid var(--phoenix-secondary, #31374a);
  font-weight: 600;
}
.btn-falcon-default:hover,
.btn-falcon-default:focus,
.btn-falcon-default:active,
.btn-falcon-default.active {
  color: #fff;
  background-color: var(--phoenix-secondary, #31374a);
  border-color: var(--phoenix-secondary, #31374a);
}
.btn-falcon-secondary {
  color: var(--easyhoa-secondary);
  background-color: var(--easyhoa-secondary-soft-bg);
  border: 1px solid var(--easyhoa-secondary-soft-bg);
  font-weight: 600;
}
.btn-falcon-secondary:hover,
.btn-falcon-secondary:focus,
.btn-falcon-secondary:active,
.btn-falcon-secondary.active {
  color: #fff;
  background-color: var(--easyhoa-secondary);
  border-color: var(--easyhoa-secondary);
}
.btn-falcon-danger {
  color: var(--easyhoa-danger-text);
  background-color: var(--easyhoa-danger-bg);
  border: 1px solid var(--easyhoa-danger-bg);
  font-weight: 600;
}
.btn-falcon-danger:hover,
.btn-falcon-danger:focus,
.btn-falcon-danger:active,
.btn-falcon-danger.active {
  color: #fff;
  background-color: var(--easyhoa-danger-text);
  border-color: var(--easyhoa-danger-text);
}

.firebaseui-container {
  max-width: 100%;
  box-shadow: none;
  margin: 0;
  background: transparent;
}

.firebaseui-card-content {
  padding: 0;
}

.firebaseui-idp-list {
  margin: 0;
}

.firebaseui-list-item {
  margin-bottom: 0.75rem;
}

.firebaseui-idp-button {
  max-width: 100%;
  border-radius: 0.5rem;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.08);
  display: flex !important;
  align-items: center;
  justify-content: center;
  position: relative;
}

.firebaseui-idp-icon-wrapper {
  position: absolute;
  left: 16px;
  margin: 0 !important;
}

.firebaseui-idp-text {
  padding-left: 0 !important;
  margin: 0 !important;
  text-align: center;
}

.firebaseui-tos {
  color: var(--phoenix-body-tertiary-color, #6e7891);
  padding-top: 1rem;
}

.easyhoa-event-item:last-child {
  border-bottom: 0 !important;
}

.easyhoa-event-list-card .easyhoa-event-item {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  border-bottom-style: solid !important;
}

.easyhoa-event-list-card .easyhoa-board-task:hover {
  background-color: var(--easyhoa-hover-bg);
}

.easyhoa-event-list-card .easyhoa-event-item:last-child {
  border-bottom-left-radius: var(--phoenix-card-inner-border-radius, 0.5rem);
  border-bottom-right-radius: var(--phoenix-card-inner-border-radius, 0.5rem);
}

.easyhoa-event-when {
  color: var(--easyhoa-secondary-hover);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.easyhoa-event-title {
  color: var(--phoenix-emphasis-color, #141824);
  font-weight: 700;
  text-decoration: none;
}

.easyhoa-board-task {
  cursor: pointer;
}

.easyhoa-board-task:hover .easyhoa-event-title {
  color: var(--easyhoa-primary);
  text-decoration: underline;
}

.easyhoa-event-organizer {
  color: var(--easyhoa-primary);
  font-weight: 700;
}

.easyhoa-event-copy,
.easyhoa-event-copy p {
  color: var(--phoenix-tertiary-color, #525b75);
  overflow-wrap: break-word;
}

.easyhoa-board-task-handle {
  cursor: grab;
  color: var(--phoenix-body-tertiary-color, #6e7891);
  padding-top: 0.15rem;
}

.easyhoa-board-task-actions {
  max-width: 100%;
}

.easyhoa-board-task-dot {
  display: inline-block;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 999px;
  flex: 0 0 auto;
}

.easyhoa-board-task-dot--pending {
  background-color: #f59e0b;
}

.easyhoa-board-task-dot--completed {
  background-color: #9ca3af;
}

.easyhoa-board-task-dot--public {
  background-color: #10b981;
}

.easyhoa-board-task-dot--private {
  background-color: #3b82f6;
}

/* Filled calendar chips (Calendar / Events, Board Tasks). Phoenix paints day-grid chips white with !important
   while FullCalendar keeps the white event text, so all-day chips were blank. easyhoaPaintCalendarChip()
   (assets/js/easyhoa-calendar-chips.js) sets the legend color on each chip from eventDidMount. */
.easyhoa-calendar-chips .fc-daygrid-event,
.easyhoa-calendar-chips .fc-timegrid-event {
  background-color: var(--easyhoa-chip-bg, var(--easyhoa-primary)) !important;
  border-color: var(--easyhoa-chip-bg, var(--easyhoa-primary)) !important;
  color: var(--easyhoa-chip-fg, #fff) !important;
}

.easyhoa-calendar-chips .fc-daygrid-event .fc-event-main,
.easyhoa-calendar-chips .fc-daygrid-event .fc-event-title,
.easyhoa-calendar-chips .fc-daygrid-event .fc-event-time,
.easyhoa-calendar-chips .fc-timegrid-event .fc-event-main,
.easyhoa-calendar-chips .fc-timegrid-event .fc-event-title,
.easyhoa-calendar-chips .fc-timegrid-event .fc-event-time {
  color: inherit !important;
}

.easyhoa-calendar-chips .fc-daygrid-event .fc-event-main {
  padding-left: 0;
}

.easyhoa-calendar-chips .fc-event-main::after,
.easyhoa-calendar-chips .fc-daygrid-event-dot {
  display: none !important;
}

.easyhoa-calendar-chips .fc-list-event-dot {
  border-color: var(--easyhoa-chip-bg, var(--easyhoa-primary)) !important;
}

@media (max-width: 575.98px) {
  .easyhoa-board-task-actions {
    width: 100%;
    justify-content: flex-start !important;
  }
}

.easyhoa-news-item:last-child {
  margin-bottom: 0 !important;
}

.easyhoa-news-thumb {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 12rem;
  padding: 0;
  border: 0;
  background: var(--easyhoa-hover-bg);
  overflow: hidden;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.easyhoa-news-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.easyhoa-news-copy,
.easyhoa-news-copy p {
  color: var(--phoenix-tertiary-color, #525b75);
  overflow-wrap: break-word;
}

.easyhoa-news-copy p {
  margin-bottom: 0.75rem;
}

.easyhoa-news-copy p:last-child {
  margin-bottom: 0;
}

.easyhoa-news-copy ul,
.easyhoa-news-copy ol {
  margin-bottom: 0.75rem;
  padding-left: 1.25rem;
}

.easyhoa-news-copy img {
  max-width: 100%;
  height: auto;
  border-radius: 0.5rem;
  cursor: pointer;
}

#pop_images img {
  max-height: min(70vh, 36rem);
  width: auto;
  max-width: 100%;
}

.easyhoa-forum-post .avatar-name {
  background-color: var(--easyhoa-hover-bg);
  color: var(--easyhoa-primary);
}

.easyhoa-forum-post:last-child {
  margin-bottom: 0 !important;
}

.easyhoa-forum-copy,
.easyhoa-forum-copy p {
  color: var(--phoenix-tertiary-color, #525b75);
  overflow-wrap: break-word;
}

.easyhoa-forum-copy img {
  max-width: 100%;
  height: auto;
  border-radius: 0.5rem;
  cursor: pointer;
}

.easyhoa-forum-photo {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: var(--easyhoa-hover-bg);
  border-radius: 0.5rem;
  overflow: hidden;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.easyhoa-forum-photo img {
  width: 100%;
  height: 10rem;
  object-fit: cover;
}

.easyhoa-forum-count {
  color: var(--easyhoa-primary);
}

.easyhoa-forum-comment {
  background: var(--easyhoa-soft-gray-bg);
}

.easyhoa-forum-comments {
  max-height: min(22rem, 50vh);
  overflow-y: auto;
  overflow-x: hidden;
  margin-bottom: 0.75rem;
  padding-right: 0.35rem;
}

.easyhoa-forum-comments-toggle {
  display: inline-block;
  margin-bottom: 0.75rem;
  text-decoration: none;
  box-shadow: none;
}

.easyhoa-forum-comments-toggle:hover,
.easyhoa-forum-comments-toggle:focus-visible {
  text-decoration: underline;
}

.easyhoa-email-list {
  background: transparent;
  overflow-x: hidden;
}

.easyhoa-email-item {
  position: relative;
  padding: 1rem 0.75rem;
  border-bottom: 1px solid var(--phoenix-border-color-translucent, #e3e6ed);
  background: transparent;
}

.easyhoa-email-item:hover {
  background-color: var(--phoenix-emphasis-bg, #fff);
}

.easyhoa-email-item .hover-actions {
  top: 0.85rem;
  right: 0.75rem;
  z-index: 3;
}

.easyhoa-email-item:hover .easyhoa-email-meta {
  visibility: hidden;
}

.easyhoa-email-toolbar {
  padding: 0.25rem 0 0.75rem;
}

.easyhoa-email-item .avatar-name {
  background-color: var(--easyhoa-hover-bg);
  color: var(--easyhoa-primary);
}

.easyhoa-email-sender {
  display: block;
  font-weight: 600;
  color: var(--phoenix-body-color, #31374a);
  text-decoration: none;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}

.easyhoa-email-subject {
  font-size: 0.8rem;
  font-weight: 600;
  margin-top: 0.15rem;
}

.easyhoa-email-subject a {
  color: var(--phoenix-emphasis-color, #141824);
  text-decoration: none;
}

.easyhoa-email-preview {
  font-size: 0.8rem;
  color: var(--phoenix-tertiary-color, #525b75);
  margin-top: 0.15rem;
}

.easyhoa-email-item.is-unread .easyhoa-email-sender,
.easyhoa-email-item.is-unread .easyhoa-email-subject a {
  font-weight: 700;
  color: var(--phoenix-emphasis-color, #141824);
}

.easyhoa-email-sender:hover,
.easyhoa-email-subject a:hover {
  text-decoration: underline;
}

.easyhoa-email-time {
  font-size: 0.64rem;
  color: var(--phoenix-tertiary-color, #525b75);
  white-space: nowrap;
}

.easyhoa-email-meta .badge {
  display: inline-block;
  margin-bottom: 0.35rem;
}

.easyhoa-email-item .easyhoa-email-attach,
.easyhoa-email-item a.rounded-pill {
  font-size: 0.64rem;
  color: var(--phoenix-body-color, #31374a);
  background-color: var(--easyhoa-soft-gray-bg);
  border: 1px solid var(--phoenix-border-color-translucent, #e3e6ed);
  text-decoration: none;
}

.easyhoa-email-item a.rounded-pill:hover {
  background-color: var(--easyhoa-hover-bg);
  color: var(--easyhoa-primary);
}

.easyhoa-chat.chat {
  height: calc(100vh - (var(--phoenix-navbar-top-height, 4rem) + 16rem));
  min-height: 32rem;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
}

.easyhoa-chat.phoenix-offcanvas-container {
  overflow: hidden;
}

.easyhoa-chat .chat-sidebar {
  display: flex;
  flex-direction: column;
  flex: 0 1 26rem;
  width: 26rem;
  min-width: 0;
  max-width: 26rem;
  overflow-x: hidden;
  background-color: var(--phoenix-emphasis-bg, #fff) !important;
  border: 1px solid var(--phoenix-border-color-translucent, #e3e6ed) !important;
}

.easyhoa-chat .easyhoa-chat-contacts {
  overflow-x: hidden;
  overflow-y: auto;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
}

.easyhoa-chat .chat-thread-tab.nav {
  width: 100%;
  max-width: 100%;
  flex-wrap: nowrap;
}

.easyhoa-chat .chat-contact.nav-item,
.easyhoa-chat .easyhoa-chat-contact {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.easyhoa-chat #chat-sidebar-spinner {
  color: var(--easyhoa-secondary);
}

.easyhoa-chat .chat-thread-tab .nav-link {
  cursor: pointer;
  color: inherit;
  border-radius: 6px;
  display: flex !important;
  align-items: center;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
  padding: 0.5rem !important;
}

.easyhoa-chat .chat-thread-tab .nav-link:hover {
  background: var(--easyhoa-hover-bg);
}

.easyhoa-chat .chat-thread-tab .name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1 1 auto;
}

.easyhoa-chat .chat-thread-tab .message-time {
  flex: 0 0 auto;
  max-width: 45%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.easyhoa-chat .chat-thread-tab .chat-contact-content {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.easyhoa-chat .chat-thread-tab .unread-badge {
  flex: 0 0 auto;
}

.easyhoa-chat .chat-thread-tab .nav-item.active .nav-link,
.easyhoa-chat .chat-thread-tab .nav-item .nav-link.active {
  background: var(--easyhoa-hover-bg);
  border-radius: 6px;
}

.easyhoa-chat .avatar-name {
  background-color: var(--easyhoa-hover-bg);
  color: var(--easyhoa-primary);
}

.easyhoa-chat .nav-item.active .avatar-name {
  background-color: var(--easyhoa-primary);
  color: #fff;
}

.easyhoa-chat-search .form-control,
.easyhoa-chat-composer .form-control {
  background-color: transparent;
}

.easyhoa-chat-composer .form-control {
  flex: 1 1 auto;
  min-width: 0;
}

.easyhoa-chat-pane {
  display: flex;
  flex-direction: column;
  flex: 1 1 0% !important;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  background: var(--phoenix-emphasis-bg, #fff);
}

.easyhoa-chat-pane > .tab-pane,
.easyhoa-chat-pane .d-flex.flex-column.h-100 {
  flex: 1 1 auto;
  min-height: 0;
}

.easyhoa-chat-pane > .tab-pane > .d-flex.flex-column > .card-header,
.easyhoa-chat-pane > .tab-pane > .d-flex.flex-column > .card-footer {
  flex-shrink: 0;
}

.easyhoa-chat-pane > .tab-pane > .d-flex.flex-column > .card-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.easyhoa-chat-header {
  background: var(--phoenix-emphasis-bg, #fff);
}

.easyhoa-chat-messages {
  min-height: 100%;
}

.easyhoa-chat-composer {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Flat bubbles — hide Phoenix speech-bubble carets (wrong color / position) */
.chat.easyhoa-chat .chat-message .sent-message-content:before,
.chat.easyhoa-chat .chat-message .sent-message-content:after,
.chat.easyhoa-chat .chat-message .sent-message-content:not(.gallery):after,
.chat.easyhoa-chat .chat-message .received-message-content:before,
.chat.easyhoa-chat .chat-message .received-message-content:after,
.chat.easyhoa-chat .chat-message .received-message-content:not(.gallery):before,
.chat.easyhoa-chat .chat-message .received-message-content:not(.gallery):after,
.chat.easyhoa-chat .chat-message .automated-message-content:before,
.chat.easyhoa-chat .chat-message .automated-message-content:after {
  content: none !important;
  display: none !important;
  border: 0 !important;
  width: 0 !important;
  height: 0 !important;
}

.chat.easyhoa-chat .chat-message .sent-message-content.bg-primary {
  background-color: var(--easyhoa-primary) !important;
}

.easyhoa-chat-empty {
  min-height: 18rem;
}

.easyhoa-owner-text-thread .chat-content-scroll-area {
  height: 20rem;
  min-height: 20rem;
  max-height: 28rem;
  overflow-y: auto;
}

@media (max-width: 991.98px) {
  .easyhoa-chat.chat {
    height: calc(100vh - 16rem);
  }

  .easyhoa-chat .chat-sidebar.phoenix-offcanvas,
  .easyhoa-chat .chat-sidebar.phoenix-offcanvas-start {
    position: fixed !important;
    left: 0;
    z-index: 1035;
    width: min(26rem, 100vw);
    min-width: min(26rem, 100vw);
    max-width: min(26rem, 100vw);
    height: calc(100vh - var(--phoenix-navbar-top-height, 4rem));
    top: var(--phoenix-navbar-top-height, 4rem);
    transform: translateX(-100%) !important;
    box-shadow: var(--phoenix-box-shadow-sm);
    --phoenix-card-border-radius: 0;
    border-radius: 0 !important;
    border-left: 0;
    border-top: 0;
    border-bottom: 0;
  }

  .easyhoa-chat .chat-sidebar.phoenix-offcanvas.show,
  .easyhoa-chat .chat-sidebar.phoenix-offcanvas.active,
  .easyhoa-chat .chat-sidebar.phoenix-offcanvas-start.show,
  .easyhoa-chat .chat-sidebar.phoenix-offcanvas-start.active {
    transform: none !important;
  }

  .easyhoa-chat .phoenix-offcanvas.show ~ .phoenix-offcanvas-backdrop,
  .easyhoa-chat .phoenix-offcanvas.active ~ .phoenix-offcanvas-backdrop {
    position: fixed;
    top: var(--phoenix-navbar-top-height) !important;
    left: 0;
    height: 100vh;
    width: 100vw;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1030;
  }
}

@media (min-width: 992px) {
  .easyhoa-chat.chat {
    gap: 1rem;
  }

  .easyhoa-chat .chat-sidebar.phoenix-offcanvas,
  .easyhoa-chat .chat-sidebar.phoenix-offcanvas-start {
    position: static !important;
    left: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    height: auto;
    box-shadow: none !important;
    overflow: hidden;
  }
}

.easyhoa-email-detail {
  min-height: 0;
}

.easyhoa-email-detail-scroll--with-footer {
  padding-bottom: 4.5rem;
}

.easyhoa-email-detail-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  width: 100%;
  padding: 0.65rem 1rem;
  display: flex;
  align-items: center;
  background-color: var(--phoenix-emphasis-bg, #fff);
  border-top: 1px solid var(--phoenix-border-color-translucent, #e3e6ed);
}

.easyhoa-email-detail-bar--compose {
  justify-content: space-between;
}

.easyhoa-quill-field .quill-section {
  border: 1px solid var(--bs-border-color-translucent, rgba(0, 0, 0, 0.09));
  border-radius: 0.5rem;
  overflow: hidden;
  background: var(--phoenix-emphasis-bg, #fff);
}

.easyhoa-quill-field .quill-custom-menubar.btn-group {
  flex-wrap: wrap;
  border-bottom: 1px solid var(--bs-border-color-translucent, rgba(0, 0, 0, 0.09));
  background: var(--phoenix-emphasis-bg, #fff);
}

.easyhoa-quill-field .ql-toolbar.ql-snow {
  border: 0;
  border-bottom: 1px solid var(--bs-border-color-translucent, rgba(0, 0, 0, 0.09));
}

.easyhoa-quill-field .ql-container.ql-snow {
  border: 0;
}

.easyhoa-board-event-quill .ql-editor {
  min-height: 8rem;
  max-height: 14rem;
  overflow-y: auto;
}

.easyhoa-board-task-quill .ql-editor {
  min-height: 5.5rem;
  max-height: 9rem;
  overflow-y: auto;
}

#newEventModal #due_date,
#newEventModal #events_input_image {
  min-height: calc(1.5em + 0.75rem + 2px);
}

#composeEmailModal .modal-body,
#detailEmailModal .modal-body {
  background: var(--phoenix-emphasis-bg, #fff);
}

.batch-check-entry-table {
  overflow: visible;
}

.batch-check-entry-table .charge-detail-row > td,
.easyhoa-batch-check-charges {
  --bs-table-bg-type: transparent;
  box-shadow: none !important;
  background-color: var(--easyhoa-hover-bg) !important;
}

.easyhoa-batch-check-charges .table {
  --bs-table-bg: transparent;
  background-color: transparent;
}

.easyhoa-batch-check-charges .table > :not(caption) > * > * {
  background-color: transparent;
  box-shadow: none;
}

#batch_unit_suggestions_dropdown {
  position: fixed;
  z-index: 1080;
  max-height: 240px;
  overflow-y: auto;
  min-width: 220px;
  background: var(--phoenix-emphasis-bg, #fff);
  border: 1px solid var(--bs-border-color-translucent, rgba(0, 0, 0, 0.09));
  border-radius: 0.5rem;
  box-shadow: 0 0.5rem 1.25rem rgba(20, 24, 36, 0.12);
}

#batch_unit_suggestions_dropdown .list-group-item {
  border-color: var(--bs-border-color-translucent, rgba(0, 0, 0, 0.09));
}

#batch_unit_suggestions_dropdown .list-group-item-action:hover,
#batch_unit_suggestions_dropdown .list-group-item-action:focus {
  background-color: var(--easyhoa-hover-bg);
  color: var(--easyhoa-primary);
}

.batch-check-entry-table .form-icon-container .form-icon {
  font-size: 0.75rem;
}

.easyhoa-print-list-menu {
  min-width: 18.5rem;
  max-height: min(18rem, calc(100vh - 14rem));
  overflow-y: auto;
  overflow-x: hidden;
}

.easyhoa-print-list-menu .dropdown-item {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--phoenix-body-color, #31374a);
  white-space: normal;
}

.easyhoa-print-list-menu .dropdown-item .btn-icon {
  width: 1.75rem;
  height: 1.75rem;
}

.easyhoa-print-orientation {
  min-height: calc(1.5em + 1rem + 2px);
}

/* Banking (mockup) — account picker cards on Accounts & Activity */
.easyhoa-banking-account-card {
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.easyhoa-banking-account-card:hover {
  border-color: var(--easyhoa-primary-soft) !important;
}
.easyhoa-banking-account-card.is-selected {
  border-color: var(--easyhoa-primary) !important;
  box-shadow: 0 0 0 1px var(--easyhoa-primary);
}