/* --------------------------------------------------------------
   Module Primitives Stylesheet
   Scope: Cross-module structural & reusable presentation patterns.
   DO NOT include business/entity semantics here.
   Naming: .module-* only (no .accounts-, .properties-, etc.)
   Tokens: rely on existing Mud variables & custom CSS vars.
   Promotion Rule: Only add a primitive after ≥2 modules use it.
--------------------------------------------------------------- */

:root {
  /* Shared layout tokens - OPTIMIZED FOR INFORMATION DENSITY */
  --module-col-gap: 1.25rem;        /* Reduced from 2rem (32px) to 1.25rem (20px) - saves ~40% horizontal space */
  --module-aside-width: 360px;      /* Reduced from 380px for tighter layouts */
  --module-header-actions-gap: .5rem;
  --module-action-btn-height: 40px;

  /* Enterprise Card Layout System - spacing rhythm (non-negotiable across modules) */
  --module-section-gap: 20px;      /* Between stacked section cards (16-24px) */
  --module-card-header-gap: 14px;   /* Header to content (12-16px) */
  --module-grid-row-gap: 10px;      /* Key/value grid row spacing (8-12px) */
  --module-grid-col-gap: 24px;      /* Key/value grid column gap */
}

/* Layout wrapper attribute hook (applied by ModuleLayout component) */
[data-module-layout] {
  display: block;
  width: 100%;
}

/* Constrained variant centers within available viewport and limits max width for large monitors */
.module-layout.constrained {
  --module-max-width: 1680px;
  margin-inline: auto;
  padding-inline: 2.25rem;
  width: 100%;
  max-width: var(--module-max-width);
  box-sizing: border-box;
}

@media (max-width:1400px) {
  .module-layout.constrained {
    --module-max-width: 1480px;
  }
}

@media (max-width:1200px) {
  .module-layout.constrained {
    padding-inline: 1.5rem;
  }
}

@media (max-width:900px) {
  .module-layout.constrained {
    padding-inline: 1rem;
  }
}

/* 2025-09-20 FIX: Removed redundant root grid (header + inner grid) which caused perceived overlap and wasted second column. Two-column behavior now solely controlled by .module-body-grid (+ force-two-col modifier). */

/* Header (single-row primary layout; stacks on narrow) */
.module-header {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: .85rem;
  padding-block-end: .25rem;
}

/* Hard override to ensure horizontal row layout wins over any later component-scoped styles */
.module-layout .module-header {
  flex-direction: row !important;
}

.module-header-left {
  display: flex;
  flex-direction: column;
  min-width: 260px;
}

.module-header-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-left: auto;
}

/* Ensure actions don't collapse below title until needed */
@media (max-width:900px) {
  .module-header {
    align-items: flex-start;
  }

  .module-header-actions {
    margin-left: 0;
  }
}

/* Subtle divider below header region for visual anchoring */
.module-header {
  border-bottom: 1px solid var(--mud-palette-lines-default);
  margin-bottom: .5rem;
}

body.theme-dark .module-header {
  border-color: rgba(255, 255, 255, 0.08);
}

/* Body grid (main + aside) utility wrapper inside layout if needed by pages */
/* Updated 2025-09-20: Remove hard min widths (260px/220px) so ultra-collapsed 44px tools rail can render.
  We now trust the caller (ModuleLayout via --module-aside-width) to set appropriate width.
  Expanded state still typically supplies something like 120px–380px; collapsed sets 44px. */
.module-body-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--module-aside-width);
  gap: var(--module-col-gap);
  align-items: start;
  margin-top: .75rem;
}

/* Force two column variant honors same variable; pages wanting min width can wrap aside content themselves. */
.force-two-col .module-body-grid {
  grid-template-columns: minmax(0, 1fr) var(--module-aside-width);
}

@media (max-width:900px) {
  .module-body-grid:not(.force-two-col) {
    grid-template-columns: 1fr;
    row-gap: 1.25rem;
  }
}

/* Align aside scroll top with main after header divider */
.module-aside-scroll {
  padding-top: .25rem;
}

/* RATIONALE (2025-09-20): Original breakpoint at 1100px caused premature single-column collapse when users zoomed out (reduces effective CSS px width). Adjusted breakpoint to 900px and added .force-two-col override + minmax() with clamp() to keep aside present while shrinking gracefully. */

/* Title / subtitle semantics (modules can add weight tweaks) */
.module-title {
  line-height: 1.2;
  font-weight: 600;
}

.module-subtitle {
  letter-spacing: .25px;
}

/* Dark mode - module titles */
body.theme-dark .module-title {
  color: #E2E8F0;
  /* Bright text for dark mode */
}

body.theme-dark .module-subtitle {
  color: #94A3B8;
  /* Medium gray for subtitles */
}

/* Action buttons baseline */
.module-header-actions .module-action-btn {
  --mud-button-height: var(--module-action-btn-height);
  height: var(--module-action-btn-height);
  padding: 0 .9rem;
  font-weight: 500;
  line-height: 1.05;
  border-radius: 8px;
  backdrop-filter: blur(2px);
}

.module-header-actions .module-action-btn:hover {
  box-shadow: var(--mud-elevation-3);
}

.module-header-actions .module-action-btn:focus-visible {
  box-shadow: 0 0 0 2px var(--mud-palette-primary);
}

/* Horizontal tab pills (equal width variant) */
.module-tabs-strip.equal-tabs>div[role="tablist"],
.module-tabs-strip.equal-tabs[role="tablist"] {
  display: flex;
  gap: .75rem;
  width: 100%;
}

.module-tabs-strip.equal-tabs [role="tab"] {
  flex: 1 1 0;
  text-align: center;
  padding: .8rem .5rem .55rem;
  font-weight: 500;
  cursor: pointer;
  border-radius: var(--mud-default-borderradius);
  transition: background .18s, color .18s;
  background: var(--mud-palette-surface);
  border: 1px solid var(--mud-palette-lines-default);
}

.module-tabs-strip.equal-tabs [role="tab"].active {
  background: var(--mud-palette-primary);
  color: var(--mud-palette-primary-contrast-text);
  border-color: var(--mud-palette-primary);
}

.module-tabs-strip.equal-tabs [role="tab"]:not(.active):hover {
  background: var(--mud-palette-background-grey);
}

.module-tabs-strip.equal-tabs [role="tab"]:focus-visible {
  outline: 2px solid var(--mud-palette-primary);
  outline-offset: 2px;
}

@media (max-width:600px) {
  .module-tabs-strip.equal-tabs [role="tab"] {
    flex: 1 1 calc(50% - .75rem);
  }
}

/* Vertical rail (aside navigation cards) */
.module-rail {
  display: flex;
  flex-direction: column;
  gap: .55rem;
}

.module-rail-card {
  padding: .9rem .95rem;
  border-radius: 10px;
  background: var(--mud-palette-surface);
  border: 1px solid var(--mud-palette-lines-default);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
  transition: background .18s, box-shadow .18s, border-color .18s;
}

.module-rail-card:hover {
  box-shadow: var(--mud-elevation-3);
}

.module-rail-card.active {
  background: linear-gradient(90deg, rgba(var(--mud-palette-primary-rgb), 0.15) 0%, rgba(var(--mud-palette-primary-rgb), 0.05) 70%);
  border-color: var(--mud-palette-primary);
}

.module-rail-card .rail-title {
  font-weight: 600;
  line-height: 1.15;
}

.module-rail-card .rail-badge {
  font-weight: 600;
  color: var(--mud-palette-primary);
}

body.theme-dark .module-rail-card {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}

body.theme-dark .module-rail-card.active {
  background: linear-gradient(90deg, rgba(var(--mud-palette-primary-rgb), 0.25) 0%, rgba(var(--mud-palette-primary-rgb), 0.08) 70%);
}

/* Tools group wrapper (prominent grouping for cross-module utilities) */
.module-tools-group {
  position: relative;
  padding: 1.1rem 1.15rem 1.25rem;
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: linear-gradient(135deg, rgba(var(--mud-palette-primary-rgb), 0.10) 0%, rgba(var(--mud-palette-primary-rgb), 0.25) 55%, rgba(var(--mud-palette-primary-rgb), 0.35) 100%);
  border: 1px solid rgba(var(--mud-palette-primary-rgb), 0.35);
  box-shadow: 0 4px 14px -6px rgba(var(--mud-palette-primary-rgb), 0.35);
  backdrop-filter: blur(4px);
}

.module-tools-group>.tools-heading,
.module-tools-group>h6.tools-heading {
  margin: 0;
  font-size: .70rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 600;
  opacity: .9;
  color: var(--mud-palette-primary-darken);
}

/* Light mode title fallback if theme lacks primary-darken token */
.module-tools-group>.tools-heading {
  color: var(--mud-palette-primary-text, var(--mud-palette-primary-darken));
}

/* Provide stronger readable color on darker base palettes */
body.theme-dark .module-tools-group {
  background: linear-gradient(135deg, rgba(var(--mud-palette-primary-rgb), 0.35) 0%, rgba(var(--mud-palette-primary-rgb), 0.20) 65%, rgba(var(--mud-palette-primary-rgb), 0.15) 100%);
  border-color: rgba(var(--mud-palette-primary-rgb), 0.55);
  box-shadow: 0 4px 18px -4px rgba(var(--mud-palette-primary-rgb), 0.50);
}

body.theme-dark .module-tools-group>.tools-heading {
  color: var(--mud-palette-primary-contrast-text);
  opacity: .85;
}

/* Neutralize rail card surfaces inside group for contrast */
.module-tools-group .module-rail-card {
  background: rgba(255, 255, 255, 0.55);
  border-color: rgba(255, 255, 255, 0.65);
}

.module-tools-group .module-rail-card:hover {
  background: rgba(255, 255, 255, 0.75);
}

.module-tools-group .module-rail-card.active {
  background: linear-gradient(90deg, rgba(var(--mud-palette-primary-rgb), 0.25) 0%, rgba(var(--mud-palette-primary-rgb), 0.10) 70%);
  border-color: var(--mud-palette-primary);
}

body.theme-dark .module-tools-group .module-rail-card {
  background: rgba(0, 0, 0, 0.25);
  border-color: rgba(255, 255, 255, 0.15);
}

body.theme-dark .module-tools-group .module-rail-card:hover {
  background: rgba(0, 0, 0, 0.35);
}

body.theme-dark .module-tools-group .module-rail-card.active {
  background: linear-gradient(90deg, rgba(var(--mud-palette-primary-rgb), 0.45) 0%, rgba(var(--mud-palette-primary-rgb), 0.20) 70%);
  border-color: var(--mud-palette-primary);
}

/* Strengthen title & badge contrast inside group */
.module-tools-group .module-rail-card .rail-title {
  color: #111;
}

.module-tools-group .module-rail-card .rail-badge {
  color: var(--mud-palette-primary);
}

body.theme-dark .module-tools-group .module-rail-card .rail-title {
  color: var(--mud-palette-primary-contrast-text);
}

body.theme-dark .module-tools-group .module-rail-card .rail-badge {
  color: var(--mud-palette-primary-lighten);
}

/* Tile buttons (horizontal tabs style alternative) */
.module-tile-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

.module-tile-btn {
  position: relative;
  min-width: 96px;
  height: 40px;
  border-radius: 8px;
  font-weight: 500;
  text-transform: none;
  padding: 0 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--mud-palette-surface);
  border: 1px solid var(--mud-palette-lines-default);
  cursor: pointer;
  transition: transform .18s, box-shadow .18s, background .18s, border-color .18s;
}

.module-tile-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--mud-elevation-3);
}

.module-tile-btn.active {
  background: var(--mud-palette-primary);
  color: var(--mud-palette-primary-contrast-text);
  border-color: var(--mud-palette-primary);
  box-shadow: var(--mud-elevation-6);
}

.module-tile-btn:focus-visible {
  outline: 2px solid var(--mud-palette-primary);
  outline-offset: 2px;
}

body.theme-dark .module-tile-btn {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.08);
}

body.theme-dark .module-tile-btn.active {
  background: linear-gradient(135deg, rgba(var(--mud-palette-primary-rgb), 0.85) 0%, rgba(var(--mud-palette-primary-rgb), 0.70) 100%);
}

/* Sidebar tile buttons (vertical) */
.module-rail-btn {
  width: 100%;
  min-height: 48px;
  border-radius: 8px;
  font-weight: 500;
  text-transform: none;
  justify-content: flex-start;
  padding: 0 .85rem;
  background: var(--mud-palette-surface);
  border: 1px solid var(--mud-palette-lines-default);
  display: flex;
  align-items: center;
  gap: .65rem;
  transition: transform .18s, box-shadow .18s, background .18s, border-color .18s;
}

.module-rail-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--mud-elevation-3);
  background: var(--mud-palette-background-grey);
}

.module-rail-btn.active {
  border-color: var(--mud-palette-primary);
  background: linear-gradient(90deg, rgba(var(--mud-palette-primary-rgb), 0.15) 0%, rgba(var(--mud-palette-primary-rgb), 0.05) 70%);
}

body.theme-dark .module-rail-btn {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.08);
}

body.theme-dark .module-rail-btn:hover {
  background: rgba(255, 255, 255, 0.08);
}

body.theme-dark .module-rail-btn.active {
  background: linear-gradient(135deg, rgba(var(--mud-palette-primary-rgb), 0.30) 0%, rgba(var(--mud-palette-primary-rgb), 0.15) 70%);
}

/* Panel hover (for active interactive paper panels if needed) */
.module-hover-panel {
  transition: transform .18s, box-shadow .18s, background .18s;
  border-radius: 8px;
}

.module-hover-panel:hover {
  transform: translateY(-2px);
  box-shadow: var(--mud-elevation-6);
}

/* Core details table (neutral) */
.module-details-table {
  width: 100%;
  border-collapse: collapse;
}

.module-details-table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--mud-palette-lines-default);
  vertical-align: top;
}

.module-details-table .label {
  font-weight: 500;
  opacity: .75;
  width: 42%;
  min-width: 120px;
}

.module-details-table .value {
  text-align: right;
}

@media (max-width:960px) {
  .module-details-table td {
    padding: 6px 8px;
  }

  .module-details-table .label {
    width: 50%;
    min-width: 90px;
    font-size: .8125rem;
  }

  .module-details-table .value {
    font-size: .8125rem;
  }
}

/* --------------------------------------------------------------
  Detail Component Layouts (2025-10-06)
  For consistent detail view layouts across modules
--------------------------------------------------------------- */

/* Detail component wrapper - main container for detail pages */
.detail-component-wrapper {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 1rem;
}

/* Detail component header - title + actions */
.detail-component-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
}

.detail-component-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* Metric cards grid */
.detail-metrics-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1rem 0;
}

/* Info sections */
.detail-info-section {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.detail-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.detail-info-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.detail-info-label {
  font-size: 0.75rem;
  opacity: 0.7;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.detail-info-value {
  font-weight: 500;
}

/* Detail rows (for two-column key-value layouts) */
.detail-row {
  display: flex;
  justify-content: space-between;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--mud-palette-divider);
}

.detail-row:last-child {
  border-bottom: none;
}

/* Loading states */
.detail-loading-container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  min-height: 200px;
}

/* Error states */
.detail-error-container {
  padding: 2rem;
}

/* Metric card hover effects */
.metric-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.metric-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--mud-elevation-4);
}

/* Responsive adjustments for detail components */
@media (max-width: 960px) {
  .detail-component-wrapper {
    padding: 0.75rem;
    gap: 1rem;
  }

  .detail-metrics-grid {
    gap: 0.5rem;
  }

  .detail-info-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .detail-component-header {
    flex-direction: column;
    align-items: stretch;
  }

  .detail-component-actions {
    width: 100%;
    justify-content: stretch;
  }

  .detail-component-actions>* {
    flex: 1;
  }
}

/* Media / imagery */
.module-image {
  width: 100%;
  border-radius: 8px;
  display: block;
  object-fit: cover;
  transition: transform .2s ease;
}

.module-image:hover {
  transform: scale(1.02);
}

/* Dark background container variant (optional) */
.module-dark-surface {
  background: #1E2129;
  color: var(--mud-palette-text-primary);
}

body.theme-dark .module-dark-surface {
  background: #1E2129;
}

/* --------------------------------------------------------------
  Temporary Aliases (2025-09-20) for migration
  These map legacy class names to new primitive structures.
  Remove after all modules updated & references purged.
--------------------------------------------------------------- */
/* Legacy alias selectors (non-destructive). We simply restyle legacy classes
  to mirror primitive structures so existing markup doesn't break mid-migration. */
.right-rail {
  display: flex;
  flex-direction: column;
  gap: .55rem;
}

.right-rail-card {
  padding: .9rem .95rem;
  border-radius: 10px;
  background: var(--mud-palette-surface);
  border: 1px solid var(--mud-palette-lines-default);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
  transition: background .18s, box-shadow .18s, border-color .18s;
}

.right-rail-card:hover {
  box-shadow: var(--mud-elevation-3);
}

.right-rail-card.active {
  background: linear-gradient(90deg, rgba(var(--mud-palette-primary-rgb), 0.15) 0%, rgba(var(--mud-palette-primary-rgb), 0.05) 70%);
  border-color: var(--mud-palette-primary);
}

.equal-tabs {
  /* legacy wrapper */
  isolation: isolate;
}

/* Expansion panels grouping (shared) */
.module-expansion-group .mud-expansion-panels {
  gap: .4rem;
  display: flex;
  flex-direction: column;
}

.module-expansion-group .mud-expansion-panels>.mud-expansion-panel {
  border-radius: 4px;
}

/* Embedded empty state */
.module-empty-state {
  padding: 2rem;
  border: 1px dashed var(--mud-palette-divider);
  border-radius: var(--mud-default-borderradius);
}

/* --------------------------------------------------------------
  Promoted Patterns from Properties Module (2025-10-18 Phase 3)
  These patterns proved reusable across multiple modules
--------------------------------------------------------------- */

/* Module dark wrapper - prominent dark background for grouping panels */
.module-dark-wrap {
  background: #1E2129;
  padding: 1.25rem;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

body.theme-dark .module-dark-wrap {
  background: #1E2129;
}

/* Module overview grid - responsive grid for overview panels */
.module-overview-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  align-items: start;
}

@media (min-width:1600px) {
  .module-overview-grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }
}

/* Module separator - subtle horizontal divider */
.module-separator {
  height: 1px;
  background: var(--mud-palette-lines-default);
  margin: .75rem 0;
}

body.theme-dark .module-separator {
  background: rgba(255, 255, 255, 0.10);
}

/* Module metric card - interactive card for displaying metrics */
.module-metric-card {
  position: relative;
  border-radius: 14px;
  padding: 1rem 1.1rem;
  background: var(--mud-palette-surface);
  display: flex;
  flex-direction: column;
  gap: .4rem;
  transition: box-shadow .18s, background .18s;
}

.module-metric-card:hover {
  box-shadow: var(--mud-elevation-6);
}

body.theme-dark .module-metric-card {
  background: rgba(255, 255, 255, 0.05);
}

/* --------------------------------------------------------------
  End Promoted Patterns
--------------------------------------------------------------- */

/* Detail section field grid: responsive 3/2/1 columns. Wide (≥960px): 3 cols; medium (601–959px): 2 cols; small (≤600px): 1 col.
   Use on entity detail pages (Contacts, Accounts, Properties, Vehicles, Portfolios) for uniform spacing.
   Single vertical spacing source = grid gap; field margin zeroed when inside this grid. */
.detail-section-field-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-xl, 20px) var(--module-grid-col-gap, 24px);
}
.detail-section-field-grid .modern-field-display {
  margin-bottom: 0;
}
.detail-section-field-grid .detail-section-field-full-width {
  grid-column: 1 / -1;
}
.detail-section-field-grid .key-value-item {
  margin-bottom: 0;
}
@media (min-width: 960px) {
  .detail-section-field-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .detail-section-field-grid {
    grid-template-columns: 1fr;
  }
}

/* Subgroup title: single pattern for "Entry Capital", "Exit Yield", "Valuation", etc. Use with MudText Typo="Typo.caption" Color="Color.Secondary" Class="detail-subgroup-title mb-2" (first) or "detail-subgroup-title mt-2 mb-2" (subsequent). */
.detail-subgroup-title {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* Layout-driven grids (Asset Type layout editor): explicit column count wins over responsive defaults */
.detail-section-field-grid.layout-cols-explicit {
  grid-template-columns: repeat(var(--layout-cols, 2), 1fr) !important;
}

/* Quick Actions panel (ViewV2 sidebar): buttons with white fill, primary border and text */
.quick-actions-panel .quick-actions-btn {
  background-color: #fff !important;
}

/* Property/Asset module: single spacing scale (card system) */
.asset-section-card {
  margin-bottom: 24px;
}
.asset-section-card:last-child {
  margin-bottom: 0;
}
.asset-detail-page .detail-section-field-grid {
  gap: 12px 24px;
}
/* Overview tab (Assets V2): use asset spacing; stronger panel titles */
.overview-section-card {
  margin-bottom: 24px;
}
.overview-section-card:last-child {
  margin-bottom: 0;
}
.overview-panel-title {
  font-size: 1.125rem !important;
  font-weight: 600 !important;
}
/* Notes / Map cards on the V2 overview keep a clear framed boundary (each
   note/insight is an individual content object; the map benefits from a defined
   visual area), but use a subtle border and no shadow so they read as
   lightweight panels rather than heavy cards. */
.overview-card-panel.mud-expansion-panels {
  border: 1px solid var(--mud-palette-lines-default, #e5e7eb);
  border-radius: 8px;
  background-color: var(--mud-palette-background-paper, #fff);
  box-shadow: none;
  overflow: hidden;
}

/* Property Assets Detail V2 – compact Notes and Insights panel.
   Keeps a light frame, but strips MudExpansionPanel's default header/content
   padding so the entity content list sits directly under the header (separated
   only by a subtle divider provided by EntityContentPanel compact body) instead
   of being centred in a tall empty body. The compact list owns its own row
   padding; the panel just contributes a light outer frame. */
.assets-v2-notes-panel.mud-expansion-panels .mud-expand-panel-header {
  min-height: 0;
  padding: 0;
}
.assets-v2-notes-panel.mud-expansion-panels .mud-expand-panel-content {
  padding: 0;
}
.assets-v2-notes-panel.mud-expansion-panels .mud-expand-panel-text {
  margin: 0;
}
/* Reuse the subtitle1 typography for the section title in compact mode so the
   header is consistent with other Property Detail V2 panels (smaller than h6
   used when the panel renders heavy cards). */
.assets-v2-notes-panel .overview-panel-title {
  font-size: 1rem !important;
}

/* Lightweight detail section: title + divider + field grid, no card chrome.
   Use on overview-style pages where field groups should read as part of one
   detail document rather than as independent bordered cards. */
.overview-detail-section {
  margin-bottom: 32px;
  padding: 0 4px;
}
.overview-detail-section:last-child {
  margin-bottom: 0;
}
.overview-detail-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
  min-width: 0;
}
.overview-detail-section__title {
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  color: var(--mud-palette-text-primary);
  margin-bottom: 0;
  line-height: 1.4;
}
.overview-detail-section__divider.mud-divider {
  margin-bottom: 18px;
  border-color: var(--mud-palette-lines-default, #e5e7eb);
}

/* Polished label/value hierarchy inside a clean detail section: tighter rows,
   wider column gap so values read in well-aligned pairs; muted uppercase
   labels and slightly stronger values without resorting to cards. */
.overview-detail-section .detail-section-field-grid {
  gap: 18px 32px;
}
.overview-detail-section .detail-section-field-grid .modern-field-display {
  margin-bottom: 0;
}
.overview-detail-section .detail-section-field-grid .modern-field-label {
  font-size: 0.7rem !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600 !important;
  color: var(--mud-palette-text-secondary) !important;
}
.overview-detail-section .detail-section-field-grid .modern-field-value,
.overview-detail-section .detail-section-field-grid .modern-field-display .mud-link {
  font-weight: 500 !important;
  font-size: 0.9375rem !important;
}

/* Section header edit (icon-only): neutral icon, hover darker. Use class section-header-edit-icon on MudIconButton. */
.section-header-edit-icon {
  color: rgb(156, 163, 175);
}
.section-header-edit-icon:hover {
  color: rgb(75, 85, 99);
}

/* Utilities */
.fw-medium {
  font-weight: 500 !important;
}

.fw-semibold {
  font-weight: 600 !important;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.focus-ring:focus-visible {
  outline: 2px solid var(--mud-palette-primary);
  outline-offset: 2px;
}

/* Entity detail: consistent section spacing (use instead of ad-hoc mb-4 on cards) */
.section-gap {
  margin-bottom: var(--space-xl, 20px);
}

/* Card-style expansion panel (border, radius, shadow) - use on MudExpansionPanels for Notes/accordion sections */
.expansion-panel-card {
  border-radius: 8px;
  border: 1px solid var(--mud-palette-lines-default);
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.06);
  overflow: hidden;
}

/* Rounded bordered tile/panel for inner cards (e.g. location tiles, domain rows) - no shadow */
.tile-card {
  border-radius: 8px;
  border: 1px solid var(--mud-palette-divider);
}

/* Entity detail right column: consistent gap between sidebar cards (Tickets, Key Metrics, Domains, etc.) */
.entity-view-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

/* --------------------------------------------------------------
   Sidebar compact list primitives
   Used inside relationship/summary cards (Portfolios & Vehicles,
   Introductions, Contacts) when their Compact mode is enabled —
   single-row entries with optional muted metadata line and a
   trailing kebab/menu aligned to the title row.
--------------------------------------------------------------- */
.sidebar-compact-list {
  display: flex;
  flex-direction: column;
}

.sidebar-compact-list .sidebar-compact-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 4px;
  border-bottom: 1px solid var(--mud-palette-divider);
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.15s ease;
}

.sidebar-compact-list .sidebar-compact-row:last-child {
  border-bottom: 0;
}

.sidebar-compact-list .sidebar-compact-row:hover {
  background-color: var(--mud-palette-action-hover);
}

.sidebar-compact-list .sidebar-compact-row:focus-visible {
  outline: 2px solid var(--mud-palette-primary);
  outline-offset: -2px;
}

/* When only one item exists, drop the divider for a quieter look. */
.sidebar-compact-list .sidebar-compact-row:only-child {
  border-bottom: 0;
}

.sidebar-compact-list .sidebar-compact-row-main {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  min-width: 0;
  line-height: 1.35;
}

.sidebar-compact-list .sidebar-compact-row-title {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--mud-palette-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-compact-list .sidebar-compact-row[role="button"]:hover .sidebar-compact-row-title {
  text-decoration: underline;
}

/* Static (non-clickable) variant for rows like Introductions where the title
   isn't linked. Keep the same dense layout but remove the cursor/hover affordance. */
.sidebar-compact-list .sidebar-compact-row--static {
  cursor: default;
}

.sidebar-compact-list .sidebar-compact-row--static:hover {
  background-color: transparent;
}

.sidebar-compact-list .sidebar-compact-row-title--plain {
  color: var(--mud-palette-text-primary);
}

.sidebar-compact-list .sidebar-compact-row-meta {
  font-size: 0.75rem;
  color: var(--mud-palette-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-compact-list .sidebar-compact-row-action {
  flex-shrink: 0;
  margin-left: 4px;
}

.sidebar-compact-list .sidebar-compact-row-action .mud-icon-button {
  padding: 2px;
}

/* Section headers inside compact cards: a touch denser action row. */
.portfolio-vehicles-card--compact .mud-icon-button,
.introductions-card--compact .mud-icon-button,
.contacts-card--compact .mud-icon-button {
  padding: 4px;
}