/* Verbatim copy of the SherpaFolio P&L styles from sherpa_app (apps/static/assets/css/sherpafolio.css + the two inline <style> blocks in apps/templates/datatables/pl_reports.html) so the sample renders exactly like the product. Re-copy when those change. */
/* ============================================================
   SherpaFolio shared design tokens & components
   Loaded by apps/templates/datatables/_sherpafolio_shell.html
   for the 5 SherpaFolio pages: P&L, Expense Details,
   Bookings, Expense Transactions, Income Adjustments.
   Page-specific rules (KPI card sizing, category coloring,
   badges) still live in each template's inline <style>.
   ============================================================ */

:root {
  --primary-color: #B226B2;
  --secondary-color: #8A8AB4;
  --success-color: #66BB6A;
  --info-color: #42A5F5;
  --warning-color: #FFA726;
  --danger-color: #EF5350;
  --light-color: #F8F9FA;
  --dark-color: #343A40;
  --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  --border-radius: 12px;
}

body {
  background-color: #f5f7fa;
}

/* -------- Cards -------- */
.card {
  border-radius: var(--border-radius);
  box-shadow: var(--card-shadow);
  transition: all 0.3s ease;
  border: none;
  margin-bottom: 1.5rem;
}

.card:hover {
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
}

.card-header {
  background-color: #f8f9fa;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  padding: 0.75rem 1.25rem;
}

/* -------- Property badge (used in headers across reports) -------- */
.property-badge {
  display: inline-block;
  background-color: var(--primary-color);
  color: white;
  padding: 0.4rem 0.8rem;
  border-radius: 50px;
  font-size: 0.9rem;
  font-weight: 500;
  margin-left: 0.75rem;
}

/* -------- Form controls -------- */
.form-control,
.btn {
  border-radius: 6px;
}

.date-input {
  height: 36px !important;
  font-size: 0.875rem;
}

.input-group-sm .input-group-text {
  height: 36px;
  border-color: #ced4da;
}

/* -------- Filter buttons -------- */
#reset_filter_btn {
  background-color: #f8f9fa;
  border: 1px solid #d1d3e2;
  color: #6e707e;
  margin-right: 0.75rem !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

#reset_filter_btn:hover {
  background-color: #eaecf4;
}

#apply_filter_btn {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

#apply_filter_btn:hover {
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.15);
  transform: translateY(-1px);
}

/* -------- Filter header (collapsible filter sections) -------- */
.filter-header {
  cursor: pointer;
  padding: 0.25rem 0;
  transition: all 0.2s ease;
}

.filter-header:hover {
  background-color: rgba(0, 0, 0, 0.01);
}

.filter-header i.fas.fa-chevron-down {
  transition: transform 0.2s ease;
}

.collapsed .filter-header i.fas.fa-chevron-down {
  transform: rotate(-90deg);
}

/* -------- Select2 overrides -------- */
.select2-container .select2-selection--single {
  height: 36px;
  border-color: #ced4da;
  border-radius: 6px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 36px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 34px;
}

/* -------- Table tools / export bar -------- */
.table-tools {
  padding: 0.75rem 0;
}

.export-btn {
  padding: 0.375rem 0.875rem;
  margin-right: 0.5rem;
  font-size: 0.8125rem;
  color: #555;
  background: white;
  border: 1px solid #e0e0e0;
  transition: all 0.2s;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.export-btn:hover {
  background-color: #f5f5f5;
  border-color: #d0d0d0;
}

.search-box .input-group {
  border-radius: 2rem;
  overflow: hidden;
  border: 1px solid #e0e0e0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.search-box .input-group-text,
.search-box .form-control {
  border-color: transparent;
  font-size: 0.8125rem;
}

.search-box .form-control:focus {
  box-shadow: none;
}

/* -------- Table base (modernized for SherpaFolio suite) -------- */
.table {
  margin-bottom: 0;
  border-collapse: separate;
  border-spacing: 0;
}

.table thead {
  background-color: #fbfbfd;
}

.table thead th {
  font-weight: 600 !important;
  font-size: 0.6875rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: #6c757d !important;
  background-color: #fbfbfd !important;
  border-bottom: 1px solid #ececf1 !important;
  border-top: none !important;
  padding: 0.625rem 0.75rem !important;
  white-space: nowrap;
}

.table tbody tr {
  transition: background-color 0.12s ease;
}

.table tbody tr:hover {
  background-color: rgba(178, 38, 178, 0.04);
}

.table tbody td {
  border-top: none !important;
  border-bottom: 1px solid #f3f3f7 !important;
  padding: 0.75rem !important;
  font-size: 0.875rem;
  color: #2e2f3e;
  vertical-align: middle;
}

.table tbody tr:last-child td {
  border-bottom: none !important;
}

/* Wrap the table in a softer container shell. */
.table-responsive {
  background: white;
  border-radius: 12px;
  border: 1px solid #ececf1 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
  overflow-x: auto;
}

/* Numeric cells — right-aligned tabular monospace (consistent with the
   .currency / .sherpa-kpi__value treatment elsewhere in the suite). */
.table td.numeric-cell,
.table td.month-col,
.table td.ytd-col,
.table td.amount-cell,
.table .currency {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* Soften the existing parent/child category row borders so the brand
   palette comes through but the dividers don't fight the modern feel. */
.parent-category {
  border-left-width: 3px !important;
}

.child-category {
  border-left-width: 2px !important;
}

/* -------- Currency formatting -------- */
.currency {
  font-family: "Consolas", monospace;
  font-weight: 500;
  text-align: right;
}

.positive-amount {
  color: #1cc88a;
}

.negative-amount {
  color: #e74a3b;
}

/* -------- Toggle icon for expandable rows -------- */
.toggle-icon {
  transition: transform 0.2s ease;
  display: inline-block;
  width: 16px;
  margin-right: 5px;
  cursor: pointer;
  color: #666;
}

tr.collapsed .toggle-icon {
  transform: rotate(-90deg);
}

/* -------- Section spacer between table groups -------- */
.section-spacer {
  height: 10px;
  background-color: #f5f7fa;
}

.section-spacer td {
  padding: 0 !important;
  border: none !important;
}

/* -------- Info icon (next to row labels) -------- */
.info-icon {
  color: #6c757d;
  margin-left: 5px;
  cursor: help;
  font-size: 0.75rem;
}

/* -------- Pagination -------- */
.pagination {
  margin-bottom: 0;
}

.page-link {
  border-radius: 50%;
  margin: 0 0.125rem;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-color: #e0e0e0;
  color: #555;
  font-size: 0.875rem;
  transition: all 0.2s ease;
}

.page-link:hover {
  background-color: #f0f0f0;
  border-color: #d0d0d0;
  z-index: 1;
}

.page-item.active .page-link {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  font-weight: 600;
  box-shadow: 0 2px 5px rgba(178, 38, 178, 0.2);
}

.page-item.disabled .page-link {
  color: #aaa;
  background-color: #f8f9fa;
}

.pagination-info {
  color: #6c757d;
  font-size: 0.875rem;
}

.pagination-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.5rem;
  padding: 0.75rem 0;
}

.pagination-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.page-jump {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.page-jump-input {
  width: 50px;
  text-align: center;
  border-radius: 4px;
  border: 1px solid #e0e0e0;
  padding: 0.25rem;
  font-size: 0.875rem;
}

.page-jump-btn {
  border-radius: 4px;
  border: 1px solid #e0e0e0;
  background-color: #f8f9fa;
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.page-jump-btn:hover {
  background-color: #e9ecef;
}

/* -------- Datepicker z-index (Bootstrap datepicker overlay) -------- */
.datepicker,
.datepicker-dropdown {
  z-index: 1050 !important;
}

/* -------- Hide DataTables default Buttons row (custom export bar used) -------- */
.dt-buttons,
.dataTables_wrapper .dt-buttons {
  display: none !important;
}

/* ============================================================
   SherpaFolio sub-tab strip — sits at the top of every
   SherpaFolio page and lets users switch reports without
   leaving the suite. Active state driven by url_name match
   in the shell template.
   ============================================================ */

.sherpafolio-subnav {
  background: white;
  border-bottom: 1px solid #e5e7eb;
  margin-bottom: 1.5rem;
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.sherpafolio-subnav-inner {
  display: flex;
  align-items: stretch;
  gap: 0.25rem;
  padding: 0 1.5rem;
}

.sherpafolio-tabs {
  display: flex;
  align-items: stretch;
  gap: 0.25rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex: 1;
  min-width: 0;
}

.sherpafolio-tabs::-webkit-scrollbar {
  display: none;
}

/* -------- Page-meta bar (property selector + period chip + status) -------- */
.sherpafolio-pagemeta {
  background: #fbfbfd;
  border-bottom: 1px solid #ececf1;
  margin-bottom: 1rem;
}

.sherpafolio-pagemeta__inner {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.5rem 1.5rem;
  flex-wrap: wrap;
}

.sherpafolio-pagemeta__property-form {
  margin: 0;
  display: inline-flex;
  align-items: center;
  min-width: 0;
  flex-shrink: 1;
}

/* Property dropdown — Select2 wrapper width here so the shell render
   doesn't squish on narrow pages. */
.sherpafolio-pagemeta__property-form .select2-container {
  min-width: 240px;
}

.sherpafolio-pagemeta__hint {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: #6c757d;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-left: auto;
}

.sherpafolio-pagemeta__hint i {
  color: var(--primary-color);
  font-size: 0.875rem;
}

.sherpafolio-pagemeta__status {
  font-size: 0.8125rem;
  color: #6c757d;
}

@media (max-width: 768px) {
  .sherpafolio-pagemeta__inner {
    padding: 0.625rem 1rem;
  }
  .sherpafolio-pagemeta__hint {
    margin-left: 0;
  }
  .sherpafolio-pagemeta__status {
    width: 100%;
  }
  .sherpafolio-pagemeta__property-form .select2-container {
    min-width: 0;
    width: 100% !important;
  }
}

.sherpafolio-tab {
  display: inline-flex;
  align-items: center;
  padding: 0.875rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #6c757d;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.sherpafolio-tab:hover {
  color: #2e2f3e;
  text-decoration: none;
}

.sherpafolio-tab.is-active {
  color: var(--primary-color);
  border-bottom-color: var(--primary-color);
  font-weight: 600;
}

.sherpafolio-tab:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: -2px;
  border-radius: 4px;
}

@media (max-width: 768px) {
  .sherpafolio-subnav-inner {
    padding: 0 1rem;
  }
  .sherpafolio-tab {
    padding: 0.75rem 0.75rem;
    font-size: 0.8125rem;
  }
}

/* ============================================================
   SherpaFolio period chip — compact period selector docked at
   the right of the sub-tab strip. Writes to the page's #min /
   #max date inputs (handles both ISO and "MMM yyyy" formats)
   and triggers #apply_filter_btn so the existing server-side
   filter pipeline runs unchanged.
   ============================================================ */

.sherpafolio-period {
  position: relative;
  flex-shrink: 0;
}

.sherpafolio-period__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.875rem;
  background: white;
  border: 1.5px solid var(--primary-color);
  border-radius: 999px;
  color: #2e2f3e;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(178, 38, 178, 0.1);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  min-width: 170px;
  justify-content: space-between;
}

.sherpafolio-period__btn:hover {
  box-shadow: 0 4px 12px rgba(178, 38, 178, 0.2);
  background: #fff8fd;
}

.sherpafolio-period__btn[aria-expanded="true"] {
  background: rgba(178, 38, 178, 0.06);
  box-shadow: 0 4px 12px rgba(178, 38, 178, 0.2);
}

.sherpafolio-period__btn .fa-chevron-down {
  font-size: 0.7rem;
  color: var(--primary-color);
}

.sherpafolio-period__caret {
  transition: transform 0.15s ease;
}

.sherpafolio-period__btn[aria-expanded="true"] .sherpafolio-period__caret {
  transform: rotate(180deg);
}

.sherpafolio-period__menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 260px;
  max-width: calc(100vw - 24px);
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
  padding: 0.5rem;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.sherpafolio-period__menu[hidden] {
  display: none;
}

.sherpafolio-period__preset {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #2e2f3e;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  width: 100%;
}

.sherpafolio-period__preset:hover {
  background: rgba(178, 38, 178, 0.06);
  color: var(--primary-color);
}

.sherpafolio-period__preset-hint {
  font-size: 0.6875rem;
  font-weight: 600;
  color: #b0b0b8;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sherpafolio-period__divider {
  height: 1px;
  background: #ececf1;
  margin: 0.375rem 0;
}

.sherpafolio-period__custom {
  padding: 0.25rem 0.75rem 0.5rem;
}

.sherpafolio-period__custom-label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: #6c757d;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.375rem;
}

.sherpafolio-period__custom-row {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-bottom: 0.5rem;
}

.sherpafolio-period__custom-row input[type="date"],
.sherpafolio-period__custom-row input[type="month"] {
  flex: 1;
  min-width: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 0.8125rem;
  padding: 0.4rem 0.55rem;
  border: 1px solid #d6d8e0;
  border-radius: 8px;
  color: #1a1b25;
  background: white;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.sherpafolio-period__custom-row input[type="date"]:focus,
.sherpafolio-period__custom-row input[type="month"]:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(178, 38, 178, 0.12);
}
.sherpafolio-period__custom-row input[type="month"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.55;
  filter: invert(20%) sepia(70%) saturate(700%) hue-rotate(280deg);
}
.sherpafolio-period__custom-row input[type="month"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

.sherpafolio-period__custom-row span {
  color: #b0b0b8;
  font-size: 0.875rem;
}

.sherpafolio-period__custom-apply {
  width: 100%;
  padding: 0.4rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: white;
  background: var(--primary-color);
  border: 1px solid var(--primary-color);
  border-radius: 6px;
  cursor: pointer;
}

.sherpafolio-period__custom-apply:hover {
  background: #9920A0;
  border-color: #9920A0;
}

@media (max-width: 768px) {
  .sherpafolio-period__btn .sherpafolio-period__label {
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .sherpafolio-period__menu {
    right: -8px;
    min-width: 220px;
  }
}

/* ============================================================
   SherpaFolio KPI card — standardized headline metric tile.
   Replaces the older .metrics-card pattern (which differed
   between pages). Supports an optional YoY change pill and
   a small sparkline below the value.
   ============================================================ */

.sherpa-kpi {
  display: flex;
  align-items: stretch;
  gap: 1rem;
  background: white;
  border-radius: 12px;
  padding: 1.125rem 1.25rem;
  min-height: 116px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  border-left: 4px solid #d8d8e3;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.sherpa-kpi:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

.sherpa-kpi__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0.04);
  color: var(--secondary-color);
  font-size: 1.125rem;
}

.sherpa-kpi__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.sherpa-kpi__label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: #6c757d;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sherpa-kpi__value-row {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.sherpa-kpi__value {
  font-size: 1.625rem;
  font-weight: 700;
  line-height: 1.1;
  color: #2e2f3e;
  margin: 0;
}

.sherpa-kpi__change {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.125rem 0.4rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 6px;
  white-space: nowrap;
}

.sherpa-kpi__change--positive {
  color: #0f7b4d;
  background: rgba(102, 187, 106, 0.18);
}

.sherpa-kpi__change--negative {
  color: #b71c1c;
  background: rgba(239, 83, 80, 0.18);
}

.sherpa-kpi__change--neutral {
  color: #5a5c69;
  background: rgba(108, 117, 125, 0.15);
}

.sherpa-kpi__sub {
  font-size: 0.75rem;
  color: #6c757d;
  margin-top: 0.125rem;
}

.sherpa-kpi__sparkline {
  margin-top: 0.375rem;
  height: 22px;
  display: flex;
  align-items: center;
}

.sherpa-kpi__sparkline svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

/* Color accent variants — apply to .sherpa-kpi to tint the
   left border and icon. Each page picks the variant per metric. */
.sherpa-kpi--primary { border-left-color: var(--primary-color); }
.sherpa-kpi--primary  .sherpa-kpi__icon { color: var(--primary-color); }

.sherpa-kpi--success { border-left-color: var(--success-color); }
.sherpa-kpi--success  .sherpa-kpi__icon { color: var(--success-color); }

.sherpa-kpi--info    { border-left-color: var(--info-color); }
.sherpa-kpi--info     .sherpa-kpi__icon { color: var(--info-color); }

.sherpa-kpi--warning { border-left-color: var(--warning-color); }
.sherpa-kpi--warning  .sherpa-kpi__icon { color: var(--warning-color); }

.sherpa-kpi--danger  { border-left-color: var(--danger-color); }
.sherpa-kpi--danger   .sherpa-kpi__icon { color: var(--danger-color); }

@media (max-width: 768px) {
  .sherpa-kpi {
    padding: 1rem;
    min-height: 100px;
  }
  .sherpa-kpi__value {
    font-size: 1.375rem;
  }
}

/* ============================================================
   SherpaFolio dashboard cards — sectional cards that replace
   the flat KPI strip on inner pages with richer summaries
   (counts + mini lists, donuts, recent items). The full data
   table still lives below for drill-in.
   ============================================================ */

.sf-dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.sf-dash-card {
  background: white;
  border-radius: 14px;
  padding: 1.25rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  border-top: 3px solid var(--primary-color);
}

.sf-dash-card--success { border-top-color: var(--success-color); }
.sf-dash-card--info    { border-top-color: var(--info-color); }
.sf-dash-card--warning { border-top-color: var(--warning-color); }
.sf-dash-card--danger  { border-top-color: var(--danger-color); }

.sf-dash-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.sf-dash-card__title {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  color: #6c757d;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.sf-dash-card__metric {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.sf-dash-card__big {
  font-size: 1.875rem;
  font-weight: 700;
  color: #1a1b25;
  line-height: 1;
}

.sf-dash-card__sub {
  font-size: 0.8125rem;
  color: #6c757d;
}

.sf-dash-card__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border-top: 1px solid #f0f0f4;
  padding-top: 0.625rem;
}

.sf-dash-list-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.8125rem;
  color: #2e2f3e;
}

.sf-dash-list-item__date {
  flex-shrink: 0;
  width: 48px;
  color: #6c757d;
  font-weight: 600;
  font-size: 0.75rem;
}

.sf-dash-list-item__main {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sf-dash-list-item__amount {
  flex-shrink: 0;
  font-weight: 600;
  color: #1a1b25;
  font-variant-numeric: tabular-nums;
}

.sf-dash-list-item__amount--positive { color: #1cc88a; }
.sf-dash-list-item__amount--negative { color: #e74a3b; }

.sf-dash-card__empty {
  padding: 1rem 0;
  text-align: center;
  font-size: 0.8125rem;
  color: #b0b0b8;
  font-style: italic;
}

/* -------- Donut chart (inline SVG) -------- */
.sf-donut {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.sf-donut__svg {
  flex-shrink: 0;
  width: 110px;
  height: 110px;
  position: relative;
}

.sf-donut__svg svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.sf-donut__center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
}

.sf-donut__center-big {
  font-size: 1.125rem;
  font-weight: 700;
  color: #1a1b25;
  line-height: 1;
}

.sf-donut__center-sub {
  font-size: 0.6875rem;
  color: #6c757d;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 0.25rem;
}

.sf-donut__legend {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  font-size: 0.8125rem;
  min-width: 0;
}

.sf-donut__legend-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sf-donut__swatch {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

.sf-donut__legend-name {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #2e2f3e;
}

.sf-donut__legend-pct {
  flex-shrink: 0;
  font-weight: 600;
  color: #1a1b25;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 768px) {
  .sf-donut__svg { width: 96px; height: 96px; }
  .sf-dash-card__big { font-size: 1.5rem; }
}

/* ============================================================
   SherpaFolio inline filter bar — replaces the per-page
   "Advanced Filters" card. Auto-applies on change (no Apply
   button). Date range lives in the period chip up top, so this
   bar only carries page-specific filters (Status, Account).
   ============================================================ */

.sf-filterbar {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
  padding: 0.4rem 0.875rem;
  background: white;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.sf-filterbar__hint {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.6875rem;
  font-weight: 700;
  color: #6c757d;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding-right: 0.5rem;
  border-right: 1px solid #ececf1;
}

.sf-filterbar__hint i {
  color: var(--primary-color);
  font-size: 0.875rem;
}

.sf-filterbar__field {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.sf-filterbar__field-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #6c757d;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0;
}

.sf-filterbar__select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: white;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23B226B2' d='M5 6L0 0h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 10px 6px;
  border: 1.5px solid #e0e0e0;
  border-radius: 999px;
  padding: 0.4rem 2rem 0.4rem 0.875rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #2e2f3e;
  cursor: pointer;
  min-width: 160px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.sf-filterbar__select:hover {
  border-color: var(--primary-color);
  box-shadow: 0 2px 6px rgba(178, 38, 178, 0.12);
}

.sf-filterbar__select:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(178, 38, 178, 0.15);
}

/* Highlight when a non-default value is selected */
.sf-filterbar__select.is-active {
  border-color: var(--primary-color);
  background-color: rgba(178, 38, 178, 0.05);
  color: var(--primary-color);
}

.sf-filterbar__clear {
  margin-left: auto;
  background: transparent;
  border: none;
  color: #6c757d;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  padding: 0.375rem 0.625rem;
  border-radius: 6px;
  transition: color 0.15s ease, background 0.15s ease;
}

.sf-filterbar__clear:hover:not(:disabled) {
  color: var(--primary-color);
  background: rgba(178, 38, 178, 0.06);
}

.sf-filterbar__clear:disabled {
  color: #ccc;
  cursor: default;
}

@media (max-width: 768px) {
  .sf-filterbar {
    padding: 0.625rem 0.875rem;
  }
  .sf-filterbar__clear {
    margin-left: 0;
  }
}

/* ============================================================
   SherpaFolio modern dropdown — overrides for the Select2 chrome
   used by the property selector across the suite. Bigger pill,
   soft border, magenta focus ring on open, custom SVG chevron,
   rounded shadowed dropdown panel with rounded option items.
   Also styles the native <select> equivalents (Expense Details
   and Bookkeepers don't use Select2).

   Scoped via sherpafolio.css which only loads inside the shell,
   so these overrides don't leak to non-SherpaFolio pages.
   ============================================================ */

.select2-container--default .select2-selection--single,
.select2-container--classic .select2-selection--single {
  height: 38px !important;
  border: 1.5px solid #e5e7eb !important;
  border-radius: 10px !important;
  background: white !important;
  background-image: none !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease !important;
}

.select2-container--default .select2-selection--single:hover,
.select2-container--classic .select2-selection--single:hover {
  border-color: var(--primary-color) !important;
  box-shadow: 0 4px 14px rgba(178, 38, 178, 0.14) !important;
}

.select2-container--open.select2-container--default .select2-selection--single,
.select2-container--open.select2-container--classic .select2-selection--single {
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 3px rgba(178, 38, 178, 0.18) !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-container--classic .select2-selection--single .select2-selection__rendered {
  line-height: 36px !important;
  padding-left: 14px !important;
  padding-right: 14px !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  color: #1a1b25 !important;
  letter-spacing: -0.005em;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder,
.select2-container--classic .select2-selection--single .select2-selection__placeholder {
  color: #98a0a8 !important;
  font-weight: 500 !important;
}

/* Hide the dropdown arrow + the allow-clear (×) — minimalist 2026 look. */
.select2-container--default .select2-selection--single .select2-selection__arrow,
.select2-container--classic .select2-selection--single .select2-selection__arrow,
.select2-container--default .select2-selection--single .select2-selection__clear,
.select2-container--classic .select2-selection--single .select2-selection__clear {
  display: none !important;
}

/* Dropdown panel */
.select2-container--default .select2-dropdown,
.select2-container--classic .select2-dropdown {
  border: 1px solid #ececf1 !important;
  border-radius: 14px !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.14) !important;
  margin-top: 8px !important;
  overflow: hidden !important;
  padding: 8px !important;
  background: white !important;
}

/* Search field inside dropdown */
.select2-container--default .select2-search--dropdown,
.select2-container--classic .select2-search--dropdown {
  padding: 4px !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field,
.select2-container--classic .select2-search--dropdown .select2-search__field {
  border: 1.5px solid #ececf1 !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  font-size: 0.875rem !important;
  color: #2e2f3e !important;
  background: #fbfbfd !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus,
.select2-container--classic .select2-search--dropdown .select2-search__field:focus {
  outline: none !important;
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 3px rgba(178, 38, 178, 0.12) !important;
  background: white !important;
}

/* Option items */
.select2-results {
  padding-top: 4px !important;
}

.select2-container--default .select2-results__option,
.select2-container--classic .select2-results__option {
  padding: 10px 14px !important;
  border-radius: 9px !important;
  margin: 2px 0 !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  color: #2e2f3e !important;
  transition: background 0.1s ease, color 0.1s ease !important;
}

.select2-container--default .select2-results__option--highlighted,
.select2-container--classic .select2-results__option--highlighted,
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--classic .select2-results__option--highlighted[aria-selected] {
  background: rgba(178, 38, 178, 0.08) !important;
  color: var(--primary-color) !important;
}

.select2-container--default .select2-results__option[aria-selected=true],
.select2-container--classic .select2-results__option[aria-selected=true] {
  background: rgba(178, 38, 178, 0.14) !important;
  color: var(--primary-color) !important;
  font-weight: 600 !important;
}

.select2-container--default .select2-results__option[aria-disabled=true] {
  color: #b0b0b8 !important;
  background: transparent !important;
}

/* Native <select> on the property-selector form (Expense Details,
   Bookkeepers) — match the Select2 look. No chevron (matches the
   minimalist Select2 treatment). */
#property-selector-form select.form-control,
#property-selector-form select.form-select {
  height: 38px;
  border: 1.5px solid #e5e7eb;
  border-radius: 10px;
  background-color: white;
  background-image: none;
  padding: 0 14px;
  font-size: 0.875rem;
  font-weight: 600;
  color: #1a1b25;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  cursor: pointer;
}

#property-selector-form select.form-control:hover,
#property-selector-form select.form-select:hover {
  border-color: var(--primary-color);
  box-shadow: 0 4px 14px rgba(178, 38, 178, 0.14);
}

#property-selector-form select.form-control:focus,
#property-selector-form select.form-select:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(178, 38, 178, 0.18);
}

/* ============================================================
   SherpaFolio space consolidation — squeeze the page-header
   card (title + property selector) and inter-row gaps so the
   above-the-fold area shows more data, less chrome.
   ============================================================ */

.container-fluid.py-4 {
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
}

.container-fluid.py-3 {
  padding-top: 0.5rem !important;
  padding-bottom: 0.75rem !important;
}

/* Header card with page title + property selector (every SherpaFolio page).
   Subtle gradient backdrop + magenta accent stripe so the inner pages tie
   into the Overview's brand language without going full hero-gradient. */
.container-fluid > .row.mb-4:first-child .card,
.container-fluid > .row.mb-4 .card {
  background: linear-gradient(135deg, #fdfafd 0%, #faf0fa 60%, #f5e6f5 100%);
  border-left: 3px solid var(--primary-color);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}

.container-fluid > .row.mb-4:first-child .card::after,
.container-fluid > .row.mb-4 .card::after {
  content: '';
  position: absolute;
  top: -40px;
  right: -40px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(178, 38, 178, 0.08) 0%, transparent 70%);
  pointer-events: none;
}

.container-fluid > .row.mb-4:first-child .card .card-body,
.container-fluid > .row.mb-4 .card .card-body {
  padding: 0.875rem 1.25rem;
  position: relative;
  z-index: 1;
}

.container-fluid > .row.mb-4:first-child {
  margin-bottom: 0.875rem !important;
}

/* h1 inside the page-header card — keep readable but trim the line-height */
.container-fluid h1.h3 {
  font-size: 1.375rem !important;
  line-height: 1.3 !important;
}

/* Property badge next to the title — slightly smaller */
.property-badge {
  padding: 0.25rem 0.65rem;
  font-size: 0.8125rem;
}

/* Trim the default space below the metrics row + dash grid */
.metrics-row {
  margin-top: 0 !important;
  margin-bottom: 1rem !important;
}

.sf-dash-grid {
  margin-bottom: 1rem;
}

/* ============================================================
   P&L hero card — promotes the closed-month Expected
   Distribution number to the top of the page so the answer to
   "what do I get?" is the first thing the owner sees. The
   existing pivot statement still lives below for the detail.
   ============================================================ */

/* Slim P&L hero — single-row banner so it sits comfortably above the
   KPI strip without competing with it. Big lifetime expected number on
   the left, compact "= NI + Contrib − Paid" math chips on the right. */
.pl-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
  padding: 0.75rem 1rem;
  margin-bottom: 0.75rem;
  background: white;
  border-radius: 12px;
  border-left: 4px solid var(--primary-color);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.pl-hero--negative {
  border-left-color: var(--danger-color);
}

/* Distribution-settled state — the closing month's distribution has
   been recorded and the running balance is ≈$0. Mute the hero
   (neutral border + grey amount + check icon) so the page reads as
   "all good, nothing pending" instead of looking broken. */
.pl-hero--settled {
  border-left-color: #b0b0b8;
  background: #fafafb;
}

.pl-hero__main {
  display: flex;
  align-items: baseline;
  gap: 0.875rem;
  flex-wrap: wrap;
  min-width: 0;
}

.pl-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6c757d;
  white-space: nowrap;
}

.pl-hero__eyebrow i {
  color: var(--primary-color);
  font-size: 0.875rem;
}

.pl-hero--negative .pl-hero__eyebrow i {
  color: var(--danger-color);
}

.pl-hero--settled .pl-hero__eyebrow i {
  color: #6c757d;
}

.pl-hero__amount {
  font-size: 1.625rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--primary-color);
}

.pl-hero--negative .pl-hero__amount {
  color: var(--danger-color);
}

.pl-hero--settled .pl-hero__amount {
  color: #6c757d;
}

.pl-hero__breakdown {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  flex-wrap: wrap;
}

/* Sub-line beneath the headline — shows the most recent payout
   (amount + period) so owners have an at-a-glance answer to
   "what was distributed last?" without having to scan the table. */
.pl-hero__last-dist {
  display: inline-flex;
  align-items: baseline;
  gap: 0.375rem;
  font-size: 0.75rem;
  color: #6c757d;
  margin-left: 0.25rem;
}
.pl-hero__last-dist-label {
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.6875rem;
}
.pl-hero__last-dist-amt {
  font-weight: 700;
  color: #1a1b25;
  font-variant-numeric: tabular-nums;
}
.pl-hero__last-dist-period {
  color: #8a8c9a;
}

.pl-hero__chip {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0.25rem 0.625rem;
  background: #fbfbfd;
  border: 1px solid #ececf1;
  border-radius: 8px;
  line-height: 1.1;
}

.pl-hero__chip-amt {
  font-size: 0.8125rem;
  font-weight: 700;
  color: #1a1b25;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pl-hero__chip-label {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6c757d;
  margin-top: 1px;
}

.pl-hero__op {
  font-weight: 700;
  font-size: 0.875rem;
  color: #b0b0b8;
}

@media (max-width: 768px) {
  .pl-hero {
    flex-direction: column;
    align-items: stretch;
    gap: 0.625rem;
  }
  .pl-hero__amount {
    font-size: 1.5rem;
  }
}

/* ============================================================
   P&L monthly column collapse — default view shows just the
   latest closed month (plus YTD, Last YTD, YoY, sparkline);
   toggle expands to all 12 months for power users.
   ============================================================ */

.pl-month-toggle {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 0.875rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--primary-color);
  background: white;
  border: 1.5px solid var(--primary-color);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
  margin-left: 0.25rem;
}

.pl-month-toggle:hover {
  background: rgba(178, 38, 178, 0.06);
  box-shadow: 0 2px 8px rgba(178, 38, 178, 0.14);
}

.pl-month-toggle.is-active {
  background: var(--primary-color);
  color: white;
}

.pl-month-toggle.is-active:hover {
  background: #9920A0;
}

/* Hide every monthly column when the table is collapsed (default).
   YTD totals, comparison columns, and the sparkline stay visible. */
#revenue_table.pl-collapsed .pl-monthly-cell {
  display: none !important;
}

/* ============================================================
   P&L drill-through modal — opens in-context when a category
   row is clicked. Loads the underlying transactions from the
   existing /datatables/api/expense_data/ endpoint and filters
   client-side. Lifts the user out of the statement without
   yanking them off the page.
   ============================================================ */

.pl-drill {
  position: fixed;
  inset: 0;
  z-index: 1080;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}

.pl-drill.is-open {
  opacity: 1;
  pointer-events: auto;
}

.pl-drill__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 17, 26, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.pl-drill__panel {
  position: relative;
  width: 100%;
  max-width: 880px;
  max-height: calc(100vh - 3rem);
  background: white;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(15, 17, 26, 0.32);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(8px) scale(0.985);
  transition: transform 0.2s cubic-bezier(0.2, 0.9, 0.3, 1);
}

.pl-drill.is-open .pl-drill__panel {
  transform: translateY(0) scale(1);
}

.pl-drill__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.125rem 1.5rem 0.875rem;
  border-bottom: 1px solid #ececf1;
}

.pl-drill__head-text {
  min-width: 0;
}

.pl-drill__eyebrow {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary-color);
  margin-bottom: 0.25rem;
}

.pl-drill__title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #1a1b25;
  word-break: break-word;
}

.pl-drill__close {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: #6c757d;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.pl-drill__close:hover {
  background: rgba(0, 0, 0, 0.05);
  color: #1a1b25;
}

.pl-drill__summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  padding: 0;
  background: #fbfbfd;
  border-bottom: 1px solid #ececf1;
}

.pl-drill__summary-cell {
  padding: 0.875rem 1.5rem;
  border-right: 1px solid #ececf1;
}

.pl-drill__summary-cell:last-child {
  border-right: none;
}

.pl-drill__summary-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6c757d;
  margin-bottom: 0.2rem;
}

.pl-drill__summary-value {
  font-size: 1.125rem;
  font-weight: 700;
  color: #1a1b25;
  font-variant-numeric: tabular-nums;
}

.pl-drill__body {
  flex: 1;
  overflow-y: auto;
  background: white;
}

.pl-drill__loading,
.pl-drill__empty {
  padding: 2.5rem 1.5rem;
  text-align: center;
  color: #6c757d;
  font-size: 0.875rem;
}

.pl-drill__loading i {
  margin-right: 0.4rem;
  color: var(--primary-color);
}

.pl-drill__table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.8125rem;
}

.pl-drill__table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: white;
  font-size: 0.6875rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #6c757d !important;
  padding: 0.625rem 1rem !important;
  border-bottom: 1px solid #ececf1 !important;
  border-top: none !important;
  text-align: left;
}

.pl-drill__table thead th.pl-drill__amount-col {
  text-align: right;
}

.pl-drill__table tbody tr {
  transition: background 0.1s ease;
}

.pl-drill__table tbody tr:hover {
  background: rgba(178, 38, 178, 0.04);
}

.pl-drill__table tbody td {
  padding: 0.625rem 1rem !important;
  border-bottom: 1px solid #f3f3f7 !important;
  border-top: none !important;
  vertical-align: top;
  color: #2e2f3e;
  font-variant-numeric: tabular-nums;
}

.pl-drill__table tbody tr:last-child td {
  border-bottom: none !important;
}

.pl-drill__table .pl-drill__desc {
  color: #6c757d;
  font-size: 0.75rem;
  line-height: 1.4;
  white-space: normal;
  word-break: break-word;
  max-width: 420px;
}

.pl-drill__amount-col {
  text-align: right;
  font-weight: 600;
  white-space: nowrap;
}

/* Two-line date stack for transactions whose accounting period (TRANS_MO)
   differs from when they actually posted (TRANSACTION_DATE / CHECK_IN). */
.pl-drill__date-stack {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.pl-drill__date-primary {
  font-weight: 600;
  color: #1a1b25;
}
.pl-drill__date-sub {
  font-size: 0.6875rem;
  color: #98a0a8;
}

.pl-drill__foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0.875rem 1.5rem;
  border-top: 1px solid #ececf1;
  background: #fbfbfd;
}

.pl-drill__view-all {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--primary-color);
  text-decoration: none;
  transition: color 0.15s ease;
}

.pl-drill__view-all:hover {
  color: #9920A0;
  text-decoration: none;
}

.pl-drill__view-all i {
  font-size: 0.7rem;
}

body.pl-drill-open {
  overflow: hidden;
}

@media (max-width: 768px) {
  .pl-drill {
    padding: 0.75rem;
  }
  .pl-drill__panel {
    max-height: calc(100vh - 1.5rem);
  }
  .pl-drill__summary {
    grid-template-columns: 1fr;
  }
  .pl-drill__summary-cell {
    border-right: none;
    border-bottom: 1px solid #ececf1;
  }
  .pl-drill__summary-cell:last-child {
    border-bottom: none;
  }
  .pl-drill__table .pl-drill__desc {
    max-width: 200px;
  }
}

/* ============================================================
 * Sticky first column for every SherpaFolio table.
 * Row labels stay anchored as the user scrolls horizontally
 * across wide tables. (P&L has its own sticky rules baked
 * into pl_reports.html; this targets the other suite pages.)
 * ============================================================ */
#booking_table tbody td:first-child,
#expense_table tbody td:first-child,
#income_table tbody td:first-child,
#bookkeepers_table tbody td:first-child {
  position: sticky;
  left: 0;
  background: white;
  z-index: 5;
  border-right: 1px solid rgba(0, 0, 0, 0.05);
}
#booking_table thead th:first-child,
#expense_table thead th:first-child,
#income_table thead th:first-child,
#bookkeepers_table thead th:first-child {
  position: sticky;
  left: 0;
  background: white;
  z-index: 11;
  border-right: 1px solid rgba(0, 0, 0, 0.05);
}
/* Opaque hover background so monthly cells sliding behind the
   sticky first column don't bleed through a translucent tint. */
#booking_table tbody tr:hover > td:first-child,
#expense_table tbody tr:hover > td:first-child,
#income_table tbody tr:hover > td:first-child,
#bookkeepers_table tbody tr:hover > td:first-child {
  background: #fafafb;
}

  /* Page-specific styling — shared tokens/components live in sherpafolio.css */

  .card-body {
    padding: 1.5rem;
  }

  .table-card {
    padding: 1.5rem;
  }

  /* Adjust metrics cards to match Expense Transactions */
  .metrics-row {
    margin-top: 1rem;
    margin-bottom: 1.5rem;
  }
  
  .metrics-card {
    display: flex;
    align-items: center;
    background: white;
    border-radius: 12px;
    padding: 0.75rem 1rem; /* Reduced padding */
    height: 80px; /* Fixed height to match expense transactions */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    border-left: 4px solid transparent;
    transition: all 0.2s ease;
  }
  
  .metrics-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px; /* Smaller icon container */
    height: 40px; /* Smaller icon container */
    border-radius: 10px;
    margin-right: 1rem;
    background-color: rgba(0, 0, 0, 0.04);
  }
  
  .metrics-content {
    flex: 1;
  }
  
  .metrics-value {
    font-size: 1.5rem; /* Slightly smaller font */
    font-weight: 700;
    margin: 0;
    line-height: 1.1;
  }
  
  .metrics-label {
    font-size: 0.675rem; /* Smaller font */
    font-weight: 600;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.03rem;
    margin-top: 0.25rem;
  }
  
  /* Card color variations for P&L metrics */
  .metrics-card.revenue-color {
    border-left-color: var(--success-color);
  }
  .metrics-card.revenue-color .metrics-icon {
    color: var(--success-color);
  }
  
  .metrics-card.expense-color {
    border-left-color: var(--danger-color);
  }
  .metrics-card.expense-color .metrics-icon {
    color: var(--danger-color);
  }
  
  .metrics-card.income-color {
    border-left-color: var(--info-color);
  }
  .metrics-card.income-color .metrics-icon {
    color: var(--info-color);
  }
  
  .metrics-card.distribution-color {
    border-left-color: var(--warning-color);
  }
  .metrics-card.distribution-color .metrics-icon {
    color: var(--warning-color);
  }
  
  /* Ensure distribution card has proper spacing */
  .metrics-card.distribution-color .metrics-content {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
  }
  
  /* Property selector + Select2 styling now lives in sherpafolio.css. */

  /* Table Design - Fixed for proper display */
  .report-table-container {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    width: 100%;
  }
  
  /* Table responsive wrapper */
  .table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    min-height: 200px;
    border-radius: 0.5rem;
    border: 1px solid #e0e0e0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    background-color: white;
  }
  
  /* Ensure table wrapper visibility */
  .table-wrapper,
  .revenue-table-wrapper {
    width: 100%;
    background-color: white;
    border-radius: 0.5rem;
    border: 1px solid #e0e0e0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    overflow: hidden;
  }
  
  .table {
    margin-bottom: 0;
    width: 100%;
    background-color: white;
  }
  
  /* Ensure revenue table is visible AND fills its container.
     DataTables (and the responsive extension) sets an inline
     `style="width: XXXpx"` on the table based on computed column
     widths — when monthly detail is collapsed the column content is
     narrow, so the inline width comes in well under the container
     and the table looks like it's floating short of the cards
     above. !important lets the CSS beat the inline style. */
  #revenue_table,
  #revenue_table.dataTable {
    width: 100% !important;
    min-width: 100% !important;
    visibility: visible !important;
    display: table !important;
  }
  
  /* Sticky thead positioning (page-specific override on top of shared bg-color) */
  .table thead {
    position: sticky;
    top: 0;
    z-index: 100;
  }

  .table thead th {
    font-weight: 600;
    color: #444;
    font-size: 0.8125rem;
    text-transform: none;
    padding: 0.75rem 0.5rem;
    border-bottom: 2px solid #e0e0e0;
    white-space: nowrap;
    background-color: #f8f9fa;
  }

  .table tbody td {
    padding: 0.75rem 0.5rem;
    font-size: 0.875rem;
    color: #444;
    border-top: none;
    border-bottom: 1px solid #e0e0e0;
    vertical-align: middle;
  }

  /* Fix the borders for main rows */
  .total-revenue {
    background-color: #f0f8f0 !important;
    border-left: 5px solid #5cb85c !important;
    cursor: pointer;
  }
  
  .total-expense {
    background-color: #fef8f0 !important;
    border-left: 5px solid #f0ad4e !important;
    cursor: pointer;
  }
  
  .net-income {
    background-color: #f0f8ff !important;
    border-left: 5px solid #5bc0de !important;
  }
  
  .contribution {
    background-color: #f8f0ff !important;
    border-left: 5px solid #9b59b6 !important;
  }
  
  .distribution {
    background-color: #f0f8fc !important;
    border-left: 5px solid #3498db !important;
  }
  
  .expected-distribution {
    background-color: #fbfbfb !important;
    border-left: 5px solid #95a5a6 !important;
  }
  
  /* Fix category styling (Admin, Cleaning, Commission, Property) */
  .expense-item.expense-category {
    background-color: rgba(250, 251, 252, 0.8);
    border-top: 1px solid #f0f0f0;
    border-left: 3px solid #8A8AB4 !important;
  }
  
  .expense-item.expense-category td:first-child {
    padding-left: 3.5rem !important; /* Increased indent */
    font-weight: 400 !important; /* Removed bold */
    color: #444;
    font-size: 0.9rem;
  }
  
  .expense-item.expense-category td:first-child::before {
    content: '▸'; /* Right-pointing arrow */
    position: absolute;
    left: 2.75rem;
    color: #6c757d;
    font-size: 0.75rem;
    opacity: 0.9;
  }
  
  /* Fix Operating Expenses styling */
  .operating-expenses {
    background-color: rgba(254, 249, 243, 0.5) !important;
    border-left: 3px solid #e67e22 !important;
    font-weight: 500;
    border-top: 1px solid #e0e0e0;
  }
  
  .operating-expenses td:first-child {
    padding-left: 1.5rem !important; /* Keep at left */
    color: #444;
    font-size: 0.9rem;
    font-weight: 500;
  }
  
  .operating-expenses td:first-child::before {
    content: none !important;
  }
  
  /* Fix Management Fee styling with better arrow */
  .expense-item.management-fee-row {
    background-color: rgba(178, 38, 178, 0.02);
    border-left: 2px solid #B226B2 !important;
  }
  
  .expense-item.management-fee-row td:first-child {
    padding-left: 3.5rem !important; /* Increased indent */
    font-weight: 400;
    color: #555;
    font-size: 0.875rem;
  }
  
  .expense-item.management-fee-row td:first-child::before {
    content: '↳'; /* Downward and right arrow */
    position: absolute;
    left: 2.75rem;
    color: #666;
    font-size: 0.85rem;
  }
  
  /* Fix Reconciliation styling with better arrow and more indent */
  .expense-item.reconciliation-row {
    background-color: rgba(178, 38, 178, 0.02);
    border-left: 2px solid #B226B2 !important;
    font-size: 0.85rem;
  }
  
  .expense-item.reconciliation-row td:first-child {
    padding-left: 4.5rem !important; /* Even more indent */
    font-weight: 400;
    color: #666;
    font-size: 0.825rem;
  }
  
  .expense-item.reconciliation-row td:first-child::before {
    content: '↳'; /* Downward and right arrow */
    position: absolute;
    left: 3.75rem;
    color: #666;
    font-size: 0.85rem;
  }
  
  /* Fix Operating Expenses w. Reconciliation */
  .operating-expenses-reconciliation {
    background-color: rgba(254, 249, 243, 0.6) !important;
    border-left: 3px solid #e67e22 !important;
    font-weight: 500;
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
  }
  
  .operating-expenses-reconciliation td:first-child {
    padding-left: 1.5rem !important;
    color: #444;
    font-size: 0.925rem;
    font-weight: 500;
  }
  
  .operating-expenses-reconciliation td:first-child::before {
    content: none !important;
  }
  
  /* Other existing styles */
  .operating-income-row {
    font-weight: 500;
    color: #2c3e50;
    background-color: rgba(92, 184, 92, 0.05);
    border-top: 1px solid #e0e0e0;
  }
  
  .operating-income-row td:first-child {
    padding-left: 1.5rem !important;
  }
  
  .operating-income-percent {
    font-weight: 400;
    border-top: 1px dotted #ddd;
    border-bottom: 1px dotted #ddd;
    background-color: #fcfcfc;
    font-style: italic;
    color: #666;
  }
  
  .operating-income-percent td:first-child {
    padding-left: 1.5rem !important;
    font-size: 0.85rem;
  }
  
  .non-operating-expenses {
    margin-top: 10px;
    font-weight: 500;
    border-top: 2px solid #e0e0e0;
    color: #2c3e50;
    background-color: rgba(255, 243, 224, 0.3);
  }
  
  .non-operating-expenses td:first-child {
    padding-left: 1.5rem !important;
    font-size: 0.9rem;
  }
  
  /* Revenue section items with borders */
  .revenue-item.booking-channel {
    background-color: rgba(92, 184, 92, 0.02);
    border-left: 2px solid rgba(92, 184, 92, 0.5) !important;
  }
  
  .revenue-item.cleaning-revenue {
    background-color: rgba(91, 192, 222, 0.02);
    border-left: 2px solid rgba(91, 192, 222, 0.5) !important;
  }
  
  .revenue-item.additional-income {
    background-color: rgba(149, 165, 166, 0.02);
    border-left: 2px solid rgba(149, 165, 166, 0.5) !important;
  }
  
  /* YTD Column - keeping your existing style */
  .ytd-total {
    font-weight: 600;
    background-color: rgba(0, 0, 0, 0.02);
  }
  
  /* Management fee and reconciliation styling */
  .management-fee-group {
    background-color: rgba(178, 38, 178, 0.02);
  }

  /* Highlighted closed-out month for Expected Distribution */
  .closed-out-month {
    font-weight: 700 !important;
    background-color: rgba(217, 119, 6, 0.06) !important;   /* Muted amber - lower opacity */
    border: 2px solid rgba(217, 119, 6, 0.2) !important;
    border-radius: 4px;
    position: relative;
  }
  
  .closed-out-month .text-danger {
    color: #dc3545 !important;
    font-weight: 800 !important;
    font-size: 0.95rem !important;
  }
  
  .closed-out-month .text-success {
    color: #28a745 !important;
    font-weight: 800 !important;
    font-size: 0.95rem !important;
  }
  
  /* Historical expected distributions - no coloring */
  .historical-distribution {
    font-style: italic !important;
    color: #666 !important;
    font-weight: 400 !important;
  }
  
  .historical-distribution span {
    color: #666 !important;
    font-weight: 400 !important;
  }
  
  /* Negative values - softer red */
  .text-danger {
    color: #d9534f !important;
    font-weight: 500;
  }
  
  /* Positive values - softer green */
  .text-success {
    color: #5cb85c !important;
    font-weight: 500;
  }
  
  /* Management related rows */
  .management-fee-row {
    background-color: rgba(178, 38, 178, 0.02);
  }
  
  .reconciliation-row {
    background-color: rgba(178, 38, 178, 0.02);
    font-size: 0.85rem;
  }
  
  /* Add this after the other expense category styles */
  .expense-item.adjustment {
      background-color: rgba(250, 251, 252, 0.8);
      border-top: 1px solid #f0f0f0;
      border-left: 3px solid #888888 !important;
  }

  /* Special styling for Adjustment category - negative is good! */
  .expense-item.adjustment td:not(:first-child) {
      /* Will be handled by JavaScript */
  }
  
  .adjustment-negative {
      color: #1cc88a !important; /* Green for negative adjustments */
      font-weight: 500;
  }
  
  /* Operating Income row */
  .operating-income-row td:first-child {
    padding-left: 1.5rem !important;
  }
  
  .operating-income-row td:first-child::before {
    content: none !important;
  }
  
  .operating-income-row {
    font-weight: 500;
    color: #2c3e50;
    background-color: rgba(92, 184, 92, 0.05);
    border-top: 1px solid #e0e0e0;
  }
  
  /* Operating Income % styling */
  .operating-income-percent {
    font-weight: 400;
    border-top: 1px dotted #ddd;
    border-bottom: 1px dotted #ddd;
    background-color: #fcfcfc;
    font-style: italic;
    color: #666;
  }
  
  .operating-income-percent td:first-child {
    padding-left: 1.5rem !important;
    font-size: 0.85rem;
  }
  
  .operating-income-percent td:first-child::before {
    content: none !important;
  }
  
  /* Non-Operating Expenses */
  .non-operating-expenses {
    margin-top: 10px;
    font-weight: 500;
    border-top: 2px solid #e0e0e0;
    color: #2c3e50;
    background-color: rgba(255, 243, 224, 0.3);
  }
  
  .non-operating-expenses td:first-child {
    padding-left: 1.5rem !important;
    font-size: 0.9rem;
  }
  
  .non-operating-expenses td:first-child::before {
    content: none !important;
  }
  
  /* Enterprise Table Styles */
  #revenue_table tr:hover > td {
    background-color: rgba(178, 38, 178, 0.02) !important;
  }
  
  #revenue_table tr.revenue-item td,
  #revenue_table tr.expense-item td {
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
    font-size: 0.85rem;
  }
  
  #revenue_table tr.revenue-item:not(.section-spacer),
  #revenue_table tr.expense-item:not(.section-spacer) {
    border-bottom: 1px solid #f0f0f0;
  }
  
  /* Ensure proper number formatting alignment */
  #revenue_table td:not(:first-child) {
    text-align: right;
    font-family: "Consolas", monospace;
  }
  
  #revenue_table th {
    border-bottom: 2px solid #e0e0e0 !important;
    font-weight: 600;
    color: #444;
    background-color: #f8f9fa !important;
  }
  
  /* Month picker styling */
  .month-picker-container {
    position: relative;
  }
  
  .month-picker {
    cursor: pointer;
    background-color: #fff;
    font-size: 0.875rem;
  }
  
  .month-picker-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    padding: 1rem;
    display: none;
    width: 250px;
  }
  
  .month-picker-dropdown.show {
    display: block;
  }
  
  .month-picker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
  }
  
  .month-picker-year {
    font-weight: 600;
    text-align: center;
    flex-grow: 1;
    color: #2c3e50;
  }
  
  .month-picker-prev, .month-picker-next {
    cursor: pointer;
    padding: 0 10px;
    color: #666;
  }
  
  .month-picker-months {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
  }
  
  .month-picker-month {
    text-align: center;
    padding: 8px;
    cursor: pointer;
    border-radius: 6px;
    font-size: 0.8125rem;
    color: #444;
  }
  
  .month-picker-month:hover {
    background-color: #f0f0f0;
  }
  
  .month-picker-month.selected {
    background-color: var(--primary-color);
    color: white;
  }
  
  /* Property selector styling to match expense transactions */
  .property-selector-container {
    background-color: white;
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    margin-bottom: 1.5rem;
  }
  
  .property-selector-container h1 {
    font-size: 1.75rem;
    font-weight: 600;
    color: #444;
    margin-bottom: 0.25rem;
  }
  
  .property-selector-container p {
    font-size: 0.875rem;
    color: #6c757d;
    margin-bottom: 0;
  }
  
  /* Form control styling to match */
  .form-control, .form-select {
    font-size: 0.875rem;
    border: 1px solid #e0e0e0;
    color: #444;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
  }
  
  .form-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: #6c757d;
    margin-bottom: 0.5rem;
  }
  
  /* Button styling */
  .btn {
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    transition: all 0.2s ease;
  }
  
  .btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
  }
  
  .btn-primary:hover {
    background-color: #9920A0;
    border-color: #9920A0;
  }
  
  .btn-secondary {
    background-color: #6c757d;
    border-color: #6c757d;
  }
  
  .btn-secondary:hover {
    background-color: #5a6268;
    border-color: #545b62;
  }
  
  .btn-light {
    background-color: #f8f9fa;
    border-color: #f8f9fa;
    color: #495057;
  }
  
  .btn-light {
    background-color: #f8f9fa;
    border-color: #f8f9fa;
    color: #495057;
  }
  
  .btn-light:hover {
    background-color: #e2e6ea;
    border-color: #dae0e5;
  }
  
  /* Sparkline graph styling */
  .sparkline-cell {
    text-align: center;
    padding: 0.5rem !important;
  }
  
  .sparkline-cell svg {
    max-width: 80px;
    height: 20px;
  }
  
  /* Last column with sparklines */
  td:last-child {
    text-align: center;
  }

  /* Year Selector - Match Date Range Selector Styling */
  .year-filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }

  .filter-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: #6c757d;
    margin-bottom: 0;
  }

  .filter-label i {
    color: var(--primary-color);
  }

  .year-input-group {
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #ced4da;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  }

  .year-input-group .form-control {
    border: none;
    font-size: 0.875rem;
    padding: 0.375rem 0.75rem;
    min-width: 80px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }

  .year-input-group .form-control:focus {
    box-shadow: none;
    border-color: var(--primary-color);
  }

  .year-input-group .input-group-text {
    background-color: #f8f9fa;
    border: none;
    border-left: 1px solid #ced4da;
    color: #6c757d;
    padding: 0.375rem 0.5rem;
  }

  .year-select {
    cursor: pointer;
    background-color: white;
  }

  /* Year badge in the header */
  .year-badge {
    display: inline-block;
    background: linear-gradient(135deg, var(--primary-color) 0%, #9920A0 100%);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    margin-left: 0.5rem;
    box-shadow: 0 2px 4px rgba(178, 38, 178, 0.2);
  }

  /* Year updating animation */
  .year-updating {
    opacity: 0.7;
    pointer-events: none;
  }

  .metrics-card.updating {
    opacity: 0.6;
    transform: scale(0.98);
  }

  /* === Statement row tone-down ============================================
     Drop the colored row backgrounds; let the left-border + indentation carry
     the visual structure. Subtle gray tint reserved for headline totals so
     they still pop. The hero + donuts above already color-code revenue green
     / expense red at the page level — repeating it on every row was overkill.
     ====================================================================== */
  #revenue_table tr.total-revenue,
  #revenue_table tr.total-expense,
  #revenue_table tr.net-income,
  #revenue_table tr.contribution,
  #revenue_table tr.distribution,
  #revenue_table tr.expected-distribution,
  #revenue_table tr.expense-item.expense-category,
  #revenue_table tr.expense-item.expense-category.administrative,
  #revenue_table tr.expense-item.expense-category.commission,
  #revenue_table tr.expense-item.expense-category.property,
  #revenue_table tr.operating-expenses,
  #revenue_table tr.operating-expenses-reconciliation,
  #revenue_table tr.operating-income-row,
  #revenue_table tr.operating-income-percent,
  #revenue_table tr.non-operating-expenses,
  #revenue_table tr.expense-item.adjustment,
  #revenue_table tr.expense-item.management-fee-row,
  #revenue_table tr.expense-item.reconciliation-row,
  #revenue_table tr.management-fee-row,
  #revenue_table tr.reconciliation-row,
  #revenue_table tr.revenue-item.booking-channel,
  #revenue_table tr.revenue-item.cleaning-revenue,
  #revenue_table tr.revenue-item.additional-income {
    background-color: white !important;
  }

  /* Headline totals + the Distribution forecast band — let these stand out */
  #revenue_table tr.total-revenue,
  #revenue_table tr.total-expense,
  #revenue_table tr.net-income,
  #revenue_table tr.contribution,
  #revenue_table tr.distribution,
  #revenue_table tr.expected-distribution,
  #revenue_table tr.operating-income-row {
    background-color: #fbfbfd !important;
    font-weight: 600;
  }

  /* Hover state — single magenta-tinted hover regardless of row type. */
  #revenue_table tbody tr:hover {
    background-color: rgba(178, 38, 178, 0.04) !important;
  }

  /* Drill-through rows — individual cells route to scoped drill modals.
     The label cell + Year-Total cell open "all transactions in category";
     monthly cells open "category for that month". Last YTD / YoY%
     / sparkline cells are no-ops (no .pl-drillable class). */
  #revenue_table tr.pl-drill-row td.pl-drillable {
    cursor: pointer;
    position: relative;
    transition: background-color 0.12s ease, box-shadow 0.12s ease;
  }
  #revenue_table tr.pl-drill-row td.pl-drillable:hover {
    background-color: rgba(178, 38, 178, 0.10) !important;
    box-shadow: inset 0 0 0 1px rgba(178, 38, 178, 0.25);
  }
  #revenue_table tr.pl-drill-row .pl-drill-arrow {
    opacity: 0.35;
    margin-left: 0.4rem;
    color: var(--primary-color);
    font-size: 0.7rem;
    transition: opacity 0.15s ease, transform 0.15s ease;
  }
  #revenue_table tr.pl-drill-row td.pl-drillable:first-child:hover .pl-drill-arrow {
    opacity: 1;
    transform: translateX(2px);
  }

  /* ============================================================
   * P&L premium refresh — visual layer only. All toggle, drill,
   * filter behaviors stay intact; this just rewrites how the
   * statement reads.
   * ============================================================ */

  .report-table-container {
    background: white;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  }
  .report-table-container .table-responsive {
    border: none;
    box-shadow: none;
    border-radius: 0;
    background: white;
  }
  .report-table-container .table-wrapper,
  .report-table-container .revenue-table-wrapper {
    border: none;
    border-radius: 0;
    box-shadow: none;
  }

  /* Body baseline — tabular figures so digits align column-wise without
     switching to a monospace font. */
  #revenue_table,
  #revenue_table th,
  #revenue_table td {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 13px;
    color: #1a1b25;
  }
  #revenue_table td:not(:first-child),
  #revenue_table th:not(:first-child) {
    text-align: right;
    font-variant-numeric: tabular-nums lining-nums;
    font-feature-settings: 'tnum' 1, 'lnum' 1;
    white-space: nowrap;
  }
  #revenue_table th:first-child,
  #revenue_table td:first-child {
    text-align: left;
    min-width: 240px;
  }

  /* Header — small caps eyebrow, hairline accent underneath */
  #revenue_table thead th {
    background: white !important;
    border: none !important;
    border-bottom: 1px solid rgba(178, 38, 178, 0.2) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #6c757d !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 12px 14px !important;
    position: sticky;
    top: 0;
    z-index: 10;
    white-space: nowrap;
  }
  #revenue_table thead th.ytd-total {
    border-left: 1px solid rgba(0, 0, 0, 0.06) !important;
    color: #1a1b25 !important;
    font-weight: 700 !important;
  }

  /* Body rows — quiet hairlines, no chunky borders or bg tints */
  #revenue_table tbody tr {
    background: transparent !important;
    border: none !important;
    border-left: none !important;
  }
  #revenue_table tbody td {
    padding: 8px 14px !important;
    border: none !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
    color: #495057;
    font-weight: 400;
    background: transparent !important;
    vertical-align: middle;
  }
  #revenue_table tbody td.ytd-total {
    border-left: 1px solid rgba(0, 0, 0, 0.06) !important;
    font-weight: 600;
    color: #1a1b25;
  }

  /* Section totals — bolder type + hairline above to mark the break */
  #revenue_table tr.total-revenue td,
  #revenue_table tr.operating-income-row td,
  #revenue_table tr.net-income td,
  #revenue_table tr.total-expense td,
  #revenue_table tr.operating-expenses-reconciliation td {
    font-weight: 600 !important;
    color: #1a1b25 !important;
    border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
  }

  /* Subtotals — medium weight, muted color */
  #revenue_table tr.operating-expenses td,
  #revenue_table tr.non-operating-expenses td {
    font-weight: 500 !important;
    color: #495057 !important;
  }
  #revenue_table tr.operating-income-percent td {
    font-weight: 500 !important;
    color: #6c757d !important;
  }

  /* Distribution + contribution rows — muted */
  #revenue_table tr.contribution td,
  #revenue_table tr.distribution td,
  #revenue_table tr.expected-distribution td {
    color: #495057 !important;
  }
  #revenue_table tr.expected-distribution td {
    border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
    font-weight: 500 !important;
  }

  /* Indented child rows (revenue channels, expense categories,
     mgmt fee, reconciliation). Each gets the same indent + lighter
     color so the hierarchy reads instantly. */
  #revenue_table tr.revenue-item td:first-child,
  #revenue_table tr.expense-item.expense-category td:first-child,
  #revenue_table tr.expense-item.management-fee-row td:first-child,
  #revenue_table tr.expense-item.reconciliation-row td:first-child {
    padding-left: 32px !important;
    font-weight: 400 !important;
    color: #6c757d !important;
    font-size: 13px !important;
  }
  #revenue_table tr.expense-item.expense-category td:first-child::before {
    content: none !important;
  }
  #revenue_table tr.expense-item.management-fee-row td:first-child::before,
  #revenue_table tr.expense-item.reconciliation-row td:first-child::before {
    content: none !important;
  }

  /* Wipe legacy chunky backgrounds + colored left borders on every
     row class the legacy CSS painted. */
  #revenue_table tr.total-revenue,
  #revenue_table tr.total-expense,
  #revenue_table tr.net-income,
  #revenue_table tr.contribution,
  #revenue_table tr.distribution,
  #revenue_table tr.expected-distribution,
  #revenue_table tr.expense-item.expense-category,
  #revenue_table tr.operating-expenses,
  #revenue_table tr.operating-expenses-reconciliation,
  #revenue_table tr.operating-income-row,
  #revenue_table tr.operating-income-percent,
  #revenue_table tr.non-operating-expenses,
  #revenue_table tr.expense-item.management-fee-row,
  #revenue_table tr.expense-item.reconciliation-row,
  #revenue_table tr.revenue-item.booking-channel,
  #revenue_table tr.revenue-item.cleaning-revenue,
  #revenue_table tr.revenue-item.additional-income {
    background-color: transparent !important;
    border-left: none !important;
  }

  /* Sticky first column — label always visible when the user scrolls
     across the monthly columns horizontally. */
  #revenue_table tbody td:first-child {
    position: sticky;
    left: 0;
    background: white !important;
    z-index: 5;
    border-right: 1px solid rgba(0, 0, 0, 0.05) !important;
    padding-left: 18px !important;
  }
  /* Re-apply sticky to drillable first-cells. The legacy .pl-drillable
     rule sets position: relative (for descendant arrow positioning) at
     higher specificity than #revenue_table tbody td:first-child, which
     would otherwise drop them off the sticky behavior. */
  #revenue_table tr.pl-drill-row td.pl-drillable:first-child {
    position: sticky !important;
    left: 0 !important;
    background: white !important;
    z-index: 5 !important;
  }
  #revenue_table thead th:first-child {
    position: sticky;
    left: 0;
    background: white !important;
    z-index: 11;
    border-right: 1px solid rgba(0, 0, 0, 0.05) !important;
  }

  /* Row hover — very subtle brand tint on the scrolled-month cells.
     The sticky first column needs an OPAQUE equivalent of that tint
     (white blended with 2.5% brand) so monthly cells sliding behind
     it don't bleed through. */
  #revenue_table tbody tr:hover > td {
    background: rgba(178, 38, 178, 0.025) !important;
  }
  #revenue_table tbody tr:hover > td:first-child {
    background: #fdfafd !important;
  }

  /* Toggle chevrons — slim, brand-colored, rotate on open. */
  .toggle-icon {
    display: inline-block;
    width: 12px;
    color: var(--primary-color);
    font-size: 13px;
    font-weight: 700;
    margin-right: 4px;
    transition: transform 0.15s ease;
    line-height: 1;
  }

  /* Sparkline — thinner stroke, fixed column width so it doesn't
     dominate the row. */
  .sparkline-cell {
    width: 80px;
    min-width: 80px;
    max-width: 80px;
  }
  .sparkline-cell svg {
    width: 80px;
    height: 22px;
  }
  .sparkline-cell svg path,
  .sparkline-cell svg polyline,
  .sparkline-cell svg line {
    stroke-width: 1.2 !important;
  }

  /* Drill-through cells — subtle hover + smaller arrow. */
  #revenue_table tr.pl-drill-row td.pl-drillable:hover {
    background: rgba(178, 38, 178, 0.05) !important;
    cursor: pointer;
  }
  /* Opaque equivalent for the sticky first column when it's the
     hovered drill cell — keeps monthly cells from showing through. */
  #revenue_table tr.pl-drill-row td.pl-drillable:first-child:hover {
    background: #fbf4fb !important;
  }
  #revenue_table tr.pl-drill-row .pl-drill-arrow {
    font-size: 9px !important;
    opacity: 0;
    margin-left: 6px;
  }
  #revenue_table tr.pl-drill-row td.pl-drillable:first-child:hover .pl-drill-arrow {
    opacity: 0.65;
    transform: translateX(2px);
  }

  /* Negative numbers — recolor any cell whose text starts with '-'
     or wraps in parens. Pure CSS, no markup change required. */
  #revenue_table tbody td.negative,
  #revenue_table tbody td[data-negative="true"] {
    color: #b91c1c !important;
  }

  /* Give every row a scroll margin so scrollIntoView leaves room for the
     sticky thead instead of slipping under it. */
  #revenue_table tbody tr {
    scroll-margin-top: 80px;
  }

  /* Per-parent expense sub-rows (account_new under each parent_account).
     Indented + muted so they read as detail beneath their bold parent. */
  .exp-sub-toggle {
    display: inline-block;
    width: 14px;
    margin-right: 4px;
    color: var(--primary-color);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    user-select: none;
    line-height: 1;
  }
  .exp-sub-toggle:hover { color: #9920A0; }
  #revenue_table tr.expense-sub > td {
    color: #6c757d !important;
    font-weight: 400 !important;
    font-size: 12.5px !important;
    border-top: none !important;
    background: transparent !important;
  }
  #revenue_table tr.expense-sub > td:first-child {
    padding-left: 44px !important;
    color: #6c757d !important;
  }
  #revenue_table tr.expense-sub:hover > td { background: rgba(178, 38, 178, 0.025) !important; }
  #revenue_table tr.expense-sub:hover > td:first-child { background: #fdfafd !important; }
  .exp-sub__label {
    font-style: normal;
    font-weight: 400;
  }

  /* % of Revenue row — sits between parent total and sub-rows when
     expanded. Tight (no extra vertical padding) so it reads as an
     annotation, not a full data row. Italic + muted to recede. */
  #revenue_table tr.expense-pct-row > td {
    color: #8a8c9a !important;
    font-style: italic;
    font-weight: 400 !important;
    font-size: 10.5px !important;
    line-height: 1.1 !important;
    border-top: none !important;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.05) !important;
    background: transparent !important;
    padding-top: 0 !important;
    padding-bottom: 3px !important;
    letter-spacing: 0.01em;
  }
  #revenue_table tr.expense-pct-row > td:first-child {
    padding-left: 44px !important;
    color: #8a8c9a !important;
    text-transform: uppercase;
    font-size: 9.5px !important;
    letter-spacing: 0.05em;
    /* Override the transparent background set on `> td` above so the
       sticky first column hides scrolled cells behind it instead of
       letting them bleed through. Position + z-index re-asserted in
       case any of the legacy `.pl-drillable` rules (which use
       position: relative) get applied to this cell — sticky needs
       to stay on top of scrolled-into-view siblings. */
    background: white !important;
    position: sticky !important;
    left: 0 !important;
    z-index: 6 !important;
  }
  #revenue_table tr.expense-pct-row:hover > td { background: rgba(178, 38, 178, 0.02) !important; }
  #revenue_table tr.expense-pct-row:hover > td:first-child { background: #fdfafd !important; }

  /* ============================================================
   * Mobile (<= 640px) — the P&L is dense by design; on a phone
   * the goal is to give the table as much screen real estate as
   * possible and keep the surrounding chrome (hero, donut cards,
   * table toolbar) from eating space or crowding.
   * ============================================================ */
  @media (max-width: 640px) {
    .container-fluid.py-4 { padding-left: 0.75rem; padding-right: 0.75rem; }

    /* Hero: tighter, smaller amount, chips wrap on their own row */
    .pl-hero { padding: 0.625rem 0.75rem; border-radius: 10px; }
    .pl-hero__eyebrow { font-size: 0.7rem; }
    .pl-hero__amount { font-size: 1.375rem !important; }
    .pl-hero__breakdown { gap: 0.375rem; flex-wrap: wrap; }
    .pl-hero__chip { font-size: 0.75rem; }
    .pl-hero__chip-amt { font-size: 0.85rem; }
    .pl-hero__chip-label { font-size: 0.65rem; }
    .pl-hero__op { font-size: 0.85rem; }

    /* Donut cards: stack svg above legend so neither gets squeezed */
    .sf-donut { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
    .sf-donut__svg { width: 110px; height: 110px; align-self: center; }
    .sf-donut__legend { width: 100%; }
    .sf-dash-card { padding: 1rem; }
    .sf-dash-card__title { font-size: 0.7rem; }

    /* Table toolbar: stack into two rows, give each the full width */
    .report-table-container .table-tools { padding: 0.75rem 0.875rem !important; }
    .report-table-container .table-tools > .d-flex {
      flex-direction: column;
      align-items: stretch !important;
      gap: 0.625rem;
    }
    .report-table-container .table-tools .export-tools {
      flex-wrap: wrap;
      gap: 0.375rem !important;
      width: 100%;
    }
    .report-table-container .table-tools .export-btn,
    .report-table-container .table-tools .pl-month-toggle {
      flex: 1 1 auto;
      justify-content: center;
      font-size: 0.75rem;
      padding: 0.35rem 0.625rem;
    }
    .year-filter-group { flex-direction: row; align-items: center; gap: 0.5rem; }
    .year-filter-group .filter-label { white-space: nowrap; }
    .year-input-group { flex: 1 1 auto; }

    /* Table itself: shrink first column + cell padding so more
       numeric columns fit on a phone screen. The .table-responsive
       wrapper still scrolls horizontally for the full picture. */
    #revenue_table th:first-child,
    #revenue_table td:first-child { min-width: 170px !important; }
    #revenue_table,
    #revenue_table th,
    #revenue_table td { font-size: 12px !important; }
    #revenue_table thead th { padding: 10px 8px !important; font-size: 10px !important; }
    #revenue_table tbody td { padding: 6px 8px !important; }
    /* The label cell on info-icon rows gets cramped — let it wrap */
    #revenue_table tbody td:first-child { white-space: normal; line-height: 1.25; }
    .info-icon { font-size: 0.75rem; }
    /* Sparkline column gets in the way on phones — kill it */
    #revenue_table .sparkline-cell,
    #revenue_table thead th:last-child:not(.ytd-total),
    #revenue_table tbody td:last-child:not(.ytd-total) {
      display: none !important;
    }
  }


  /* AI closing summary card */
  .ai-summary-card {
    margin: 16px 0;
    padding: 18px 22px;
    background: linear-gradient(135deg, #f5f3ff 0%, #ffffff 60%);
    border: 1px solid #e0d4ff;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(99, 102, 241, 0.05);
  }
  .ai-summary-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 6px;
  }
  .ai-summary-card__title {
    display: flex; align-items: center; gap: 8px;
    font-size: 0.9rem; font-weight: 700;
    color: #4338ca; margin: 0;
  }
  .ai-summary-card__title .ai-spark {
    font-size: 1rem;
  }
  .ai-summary-card__meta {
    font-size: 0.7rem; color: #6b7280; font-weight: 500;
  }
  .ai-summary-card__actions { display:flex; gap:6px; }
  .ai-summary-btn {
    border: 1px solid #6366f1; background: #6366f1; color: #fff;
    border-radius: 999px; padding: 5px 14px;
    font-size: 0.78rem; font-weight: 500; cursor: pointer;
    transition: background 0.12s, transform 0.06s;
  }
  .ai-summary-btn:hover { background: #4f46e5; }
  .ai-summary-btn:active { transform: scale(0.98); }
  .ai-summary-btn.is-secondary { background:#fff; color:#4338ca; }
  .ai-summary-btn.is-secondary:hover { background:#eef2ff; }
  .ai-summary-btn[disabled] { opacity: 0.6; cursor: not-allowed; }
  .ai-summary-card__body {
    font-size: 0.875rem; color: #1f2937; line-height: 1.55;
  }
  .ai-summary-card__body p { margin: 0 0 10px; }
  .ai-summary-card__body p:last-child { margin-bottom: 0; }
  .ai-summary-card__body strong { color: #0f172a; }
  .ai-summary-card__body ul { padding-left: 22px; margin: 4px 0 10px; }
  .ai-summary-card__body li { margin-bottom: 4px; }
  .ai-summary-card__placeholder {
    color: #6b7280; font-style: italic; font-size: 0.85rem;
  }
  .ai-summary-card__error {
    color: #b91c1c; font-size: 0.85rem;
  }
  .ai-summary-card__spinner {
    display: inline-block; width: 12px; height: 12px;
    border: 2px solid #c7d2fe; border-top-color: #6366f1;
    border-radius: 50%; animation: aispin 0.8s linear infinite;
    margin-right: 6px; vertical-align: -2px;
  }
  @keyframes aispin { to { transform: rotate(360deg); } }

  /* ── P&L tooltips ─────────────────────────────────────────────────────
     One shared look for every tooltip on this page (info icons, drill
     hints, mgmt-fee breakdowns). Applied via Bootstrap's customClass. */
  .tooltip.pl-tip { --bs-tooltip-max-width: 320px; }
  .tooltip.pl-tip .tooltip-inner {
    background: #1e293b;
    color: #f1f5f9;
    text-align: left;
    font-size: 12px;
    line-height: 1.5;
    padding: 10px 13px;
    border-radius: 10px;
    max-width: 320px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.38);
  }
  .tooltip.pl-tip.show { opacity: 1; }
  .tooltip.pl-tip.bs-tooltip-top .tooltip-arrow::before,
  .tooltip.pl-tip[data-popper-placement^="top"] .tooltip-arrow::before { border-top-color: #1e293b; }
  .tooltip.pl-tip.bs-tooltip-bottom .tooltip-arrow::before,
  .tooltip.pl-tip[data-popper-placement^="bottom"] .tooltip-arrow::before { border-bottom-color: #1e293b; }
  .tooltip.pl-tip.bs-tooltip-end .tooltip-arrow::before,
  .tooltip.pl-tip[data-popper-placement^="right"] .tooltip-arrow::before { border-right-color: #1e293b; }
  .tooltip.pl-tip.bs-tooltip-start .tooltip-arrow::before,
  .tooltip.pl-tip[data-popper-placement^="left"] .tooltip-arrow::before { border-left-color: #1e293b; }
  /* Structured content inside tooltips */
  .pl-tip-h {
    font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
    opacity: 0.65; margin-bottom: 4px; font-weight: 600;
  }
  .pl-tip-big { font-size: 18px; font-weight: 700; line-height: 1; margin-bottom: 8px; }
  .pl-tip-line { font-size: 11px; opacity: 0.88; margin-bottom: 2px; }
  .pl-tip-note { font-size: 10px; opacity: 0.6; margin-top: 6px; }
  .pl-tip-rule { border-top: 1px solid rgba(255,255,255,0.18); margin-top: 6px; padding-top: 6px; }