/* --------------------------------------------------------------
   Properties Module Stylesheet (Refactored 2025-10-18 Phase 3)
   Scope: Property-specific refinements built atop module.primitives.css
   Prefix: .properties-*, .property-*
   NOTE: Generic patterns promoted to module.primitives.css
   
   MIGRATION NOTES:
   - .property-header → use .module-header (primitives)
   - .property-title → use .module-title (primitives)
   - .property-subtitle → use .module-subtitle (primitives)
   - .property-header-actions .action-btn → use .module-action-btn (primitives)
   - .properties-dark-wrap → use .module-dark-wrap (primitives)
   - .property-overview-panels → use .module-overview-grid (primitives)
   - .property-separator → use .module-separator (primitives)
   - .property-metric-card → use .module-metric-card (primitives)
--------------------------------------------------------------- */

/* Container for property view pages - module-specific variable overrides */
.property-container {
  --action-btn-height: 40px;
}

.property-container [data-module-layout] {
  --module-col-gap: 2.25rem;
}

@media (max-width:1100px) {
  .property-container [data-module-layout] {
    --module-col-gap: 1.25rem;
  }
}

/* --------------------------------------------------------------
  Backward Compatibility Aliases (Remove after 1 release cycle)
--------------------------------------------------------------- */

/* Header aliases → module-header (primitives) */
.property-header {
  display: contents;
  /* Backward compat hook */
}

.property-header-left {
  display: contents;
  /* Backward compat hook */
}

/* Typography aliases → module-title/subtitle (primitives) */
.property-title {
  line-height: 1.2;
  font-weight: 600;
}

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

/* Action button alias → module-action-btn (primitives) */
.property-header-actions .action-btn {
  --mud-button-height: var(--action-btn-height);
  height: var(--action-btn-height);
  padding: 0 .9rem;
  font-weight: 500;
  line-height: 1.1;
  border-radius: var(--radius-12);
  backdrop-filter: blur(2px);
}

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

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

/* Promoted pattern aliases (backward compatibility) */
.properties-dark-wrap {
  /* DEPRECATED: Use .module-dark-wrap instead */
  background: #1E2129;
  padding: 1.25rem;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

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

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

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

.property-separator {
  /* DEPRECATED: Use .module-separator instead */
  height: 1px;
  background: var(--mud-palette-lines-default);
  margin: .75rem 0;
}

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

.property-metric-card {
  /* DEPRECATED: Use .module-metric-card instead */
  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;
}

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

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

/* --------------------------------------------------------------
  Property-Specific Patterns (Keep)
--------------------------------------------------------------- */

/* Property expansion panels styling */
.property-container .mud-expansion-panels {
  gap: .4rem;
  display: flex;
  flex-direction: column;
}

.property-container .mud-expansion-panels>.mud-expansion-panel {
  border-radius: var(--radius-12);
}

.property-container .mud-expansion-panels>.mud-expansion-panel+.mud-expansion-panel {
  margin-top: .15rem;
}

.property-container .overview-panels,
.property-container .overview-panels .mud-paper {
  border-radius: var(--radius-12);
}

/* Professional content wrapper (property-specific) */
.professional-content {
  border-radius: var(--detail-radius, 16px);
}

/* Vertical rail tiles (property-specific alternative to module-rail) */
.properties-rail-tiles {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

/* --------------------------------------------------------------
  Deal Information Header Fields - Comprehensive Styling Fix
  OVERRIDES ALL GLOBAL app.css RULES
  MUST BE LOADED AFTER app.css TO OVERRIDE
--------------------------------------------------------------- */

/* CRITICAL: Override app.css line 3776-3783 FIRST - this sets transparent but gets overridden */
html body .deal-info-header .deal-header-field .mud-input-slot:not([style*="border: none"]),
html body .deal-info-header .deal-header-field .mud-select:not(.mud-select-filled) .mud-input-slot:not([style*="border: none"]),
html body .deal-info-header .deal-header-field .mud-autocomplete:not(.mud-autocomplete-filled) .mud-input-slot:not([style*="border: none"]) {
  background-color: transparent !important;
  background: transparent !important;
}

/* 1. REMOVE ALL WHITE BACKGROUNDS - Override ALL app.css background rules */
/* Override app.css line 5808-5815: background-grey on input elements */
html body .deal-info-header .deal-header-field .mud-input-root.mud-input-outlined:not(.mud-disabled) .mud-input-slot input,
html body .deal-info-header .deal-header-field .mud-input-root.mud-input-outlined:not(.mud-disabled) .mud-input-slot textarea,
html body .deal-info-header .deal-header-field .mud-input-root.mud-select-outlined:not(.mud-disabled) .mud-input-slot input,
html body .deal-info-header .deal-header-field .mud-input-root.mud-autocomplete-outlined:not(.mud-disabled) .mud-input-slot input,
html body .deal-info-header .deal-header-field .mud-input-root.mud-numeric-field-outlined:not(.mud-disabled) .mud-input-slot input {
  background: transparent !important;
  background-color: transparent !important;
}

/* Override app.css line 5834-5841: background-grey on focus-within */
html body .deal-info-header .deal-header-field .mud-input-root.mud-input-outlined:not(.mud-disabled):focus-within .mud-input-slot,
html body .deal-info-header .deal-header-field .mud-input-root.mud-select-outlined:not(.mud-disabled):focus-within .mud-input-slot,
html body .deal-info-header .deal-header-field .mud-input-root.mud-autocomplete-outlined:not(.mud-disabled):focus-within .mud-input-slot,
html body .deal-info-header .deal-header-field .mud-input-root.mud-numeric-field-outlined:not(.mud-disabled):focus-within .mud-input-slot,
html body .deal-info-header .deal-header-field .mud-input-root.mud-picker-outlined:not(.mud-disabled):focus-within .mud-input-slot {
  background: transparent !important;
  background-color: transparent !important;
}

/* Override app.css line 5824-5830: background on hover */
html body .deal-info-header .deal-header-field .mud-input-root.mud-input-outlined:not(.mud-disabled):hover .mud-input-slot,
html body .deal-info-header .deal-header-field .mud-input-root.mud-select-outlined:not(.mud-disabled):hover .mud-input-slot,
html body .deal-info-header .deal-header-field .mud-input-root.mud-autocomplete-outlined:not(.mud-disabled):hover .mud-input-slot,
html body .deal-info-header .deal-header-field .mud-input-root.mud-numeric-field-outlined:not(.mud-disabled):hover .mud-input-slot {
  background: transparent !important;
  background-color: transparent !important;
}

/* Override app.css line 5784-5795: #f5f5f5 background in property-edit-mode */
html body .property-edit-mode .deal-info-header .deal-header-field .mud-input-root.mud-input-outlined:not(.mud-disabled) .mud-input-slot,
html body .property-edit-mode .deal-info-header .deal-header-field .mud-input-root.mud-select-outlined:not(.mud-disabled) .mud-input-slot,
html body .property-edit-mode .deal-info-header .deal-header-field .mud-input-root.mud-autocomplete-outlined:not(.mud-disabled) .mud-input-slot {
  background: transparent !important;
  background-color: transparent !important;
}

/* Override app.css line 5818-5821: surface background on picker */
html body .deal-info-header .deal-header-field .mud-picker-outlined:not(.mud-disabled) input,
html body .deal-info-header .deal-header-field .mud-date-picker-outlined:not(.mud-disabled) input {
  background: transparent !important;
  background-color: transparent !important;
}

/* Target ALL possible background elements at every level - MAXIMUM SPECIFICITY */
html body .deal-info-header .deal-header-field .mud-input-root,
html body .deal-info-header .deal-header-field .mud-input-root .mud-input-control,
html body .deal-info-header .deal-header-field .mud-input-root .mud-input-control .mud-input,
html body .deal-info-header .deal-header-field .mud-input-root .mud-input-control .mud-input-slot,
html body .deal-info-header .deal-header-field .mud-input-root.mud-input-outlined .mud-input-slot,
html body .deal-info-header .deal-header-field .mud-input-root.mud-select-outlined .mud-input-slot,
html body .deal-info-header .deal-header-field .mud-input-root.mud-autocomplete-outlined .mud-input-slot,
html body .deal-info-header .deal-header-field .mud-input-root.mud-input-outlined:not(.mud-disabled) .mud-input-slot,
html body .deal-info-header .deal-header-field .mud-input-root.mud-select-outlined:not(.mud-disabled) .mud-input-slot,
html body .deal-info-header .deal-header-field .mud-input-root.mud-autocomplete-outlined:not(.mud-disabled) .mud-input-slot,
html body .deal-info-header .deal-header-field .mud-input-slot input,
html body .deal-info-header .deal-header-field .mud-input-slot .mud-select-input,
html body .deal-info-header .deal-header-field .mud-input-slot textarea,
html body .deal-info-header .deal-header-field .mud-input-control .mud-input-slot,
html body .deal-info-header .deal-header-field .mud-input-control.mud-input-outlined .mud-input-slot,
html body .deal-info-header .deal-header-field .mud-input-control.mud-select-outlined .mud-input-slot,
html body .deal-info-header .deal-header-field .mud-input-control.mud-autocomplete-outlined .mud-input-slot {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* Override inline styles - use attribute selector */
html body .deal-info-header .deal-header-field [style*="background"],
html body .deal-info-header .deal-header-field [style*="background-color"] {
  background: transparent !important;
  background-color: transparent !important;
}

/* 2. REMOVE MULTIPLE BORDERS - Only keep fieldset border */
/* Target ALL possible elements that could have borders in the select structure */
/* CRITICAL: The .mud-input div itself often has a border from MudBlazor defaults */
html body .deal-info-header .deal-header-field .mud-input-root,
html body .deal-info-header .deal-header-field .mud-input-control,
html body .deal-info-header .deal-header-field .mud-input-control-input-container,
html body .deal-info-header .deal-header-field .mud-input,
html body .deal-info-header .deal-header-field .mud-input.mud-input-outlined,
html body .deal-info-header .deal-header-field .mud-input.mud-select-input,
html body .deal-info-header .deal-header-field .mud-input-slot,
html body .deal-info-header .deal-header-field .mud-select,
html body .deal-info-header .deal-header-field .mud-select-input,
html body .deal-info-header .deal-header-field .mud-input-root .mud-input-control,
html body .deal-info-header .deal-header-field .mud-input-root .mud-input-control .mud-input,
html body .deal-info-header .deal-header-field .mud-input-root .mud-input-control .mud-input-slot,
html body .deal-info-header .deal-header-field .mud-input-control .mud-input,
html body .deal-info-header .deal-header-field .mud-input-control .mud-input-control-input-container,
html body .deal-info-header .deal-header-field .mud-input-control .mud-input-control-input-container .mud-input,
html body .deal-info-header .deal-header-field .mud-input-control .mud-input-control-input-container .mud-input.mud-input-outlined,
html body .deal-info-header .deal-header-field .mud-input-control .mud-input-control-input-container .mud-input.mud-select-input,
html body .deal-info-header .deal-header-field .mud-input-control .mud-input-control-input-container .mud-input-slot,
html body .deal-info-header .deal-header-field .mud-input .mud-input-slot,
html body .deal-info-header .deal-header-field input,
html body .deal-info-header .deal-header-field div[class*="mud-input"] {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Ensure fieldset is the ONLY border - Maximum specificity to override everything */
html body .deal-info-header .deal-header-field fieldset.mud-input-outlined-border,
html body .deal-info-header .deal-header-field .mud-input-control fieldset.mud-input-outlined-border,
html body .deal-info-header .deal-header-field .mud-input-control-input-container fieldset.mud-input-outlined-border,
html body .deal-info-header .deal-header-field .mud-input fieldset.mud-input-outlined-border {
  border: 1px solid var(--mud-palette-lines-inputs) !important;
  border-radius: 4px !important;
  border-width: 1px !important;
}

html body .deal-info-header .deal-header-field:hover fieldset.mud-input-outlined-border {
  border-color: var(--mud-palette-lines-default) !important;
}

html body .deal-info-header .deal-header-field:focus-within fieldset.mud-input-outlined-border {
  border-color: var(--mud-palette-primary) !important;
  border-width: 2px !important;
}

/* 3. FIX DOUBLE SCROLLBARS IN DROPDOWN - Remove popover scrollbar, keep list scrollbar */
/* Target ALL popover containers (MudSelect, MudAutocomplete/UserPicker) - remove their scrollbars */
html body .deal-info-header .deal-header-field .mud-popover-paper,
html body .deal-info-header .deal-header-field .mud-select-popover,
html body .deal-info-header .deal-header-field .mud-menu-paper,
html body .deal-info-header .deal-header-field .deal-select-popover,
html body .deal-info-header .deal-header-field .mud-select .mud-popover-paper,
html body .deal-info-header .deal-header-field .mud-autocomplete .mud-popover-paper,
html body .deal-info-header .deal-header-field .mud-select .mud-popover-provider .mud-popover-paper,
html body .deal-info-header .deal-header-field .mud-autocomplete .mud-popover-provider .mud-popover-paper,
html body .deal-info-header .deal-header-field .mud-select .mud-popover-provider .mud-popover-paper .mud-popover-content,
html body .deal-info-header .deal-header-field .mud-autocomplete .mud-popover-provider .mud-popover-paper .mud-popover-content {
  overflow: visible !important;
  max-height: none !important;
  overflow-y: visible !important;
  overflow-x: visible !important;
}

/* Only the inner mud-list should scroll */
html body .deal-info-header .deal-header-field .mud-popover-paper .mud-list,
html body .deal-info-header .deal-header-field .mud-select-popover .mud-list,
html body .deal-info-header .deal-header-field .mud-menu-paper .mud-list,
html body .deal-info-header .deal-header-field .deal-select-popover .mud-list,
html body .deal-info-header .deal-header-field .mud-select .mud-popover-paper .mud-list,
html body .deal-info-header .deal-header-field .mud-autocomplete .mud-popover-paper .mud-list,
html body .deal-info-header .deal-header-field .mud-select .mud-popover-provider .mud-popover-paper .mud-list,
html body .deal-info-header .deal-header-field .mud-autocomplete .mud-popover-provider .mud-popover-paper .mud-list {
  overflow-y: auto !important;
  max-height: 300px !important;
  overflow-x: hidden !important;
}

/* Hide ALL outer container scrollbars completely - multiple selectors for different browsers */
html body .deal-info-header .deal-header-field .mud-popover-paper::-webkit-scrollbar,
html body .deal-info-header .deal-header-field .mud-select-popover::-webkit-scrollbar,
html body .deal-info-header .deal-header-field .mud-menu-paper::-webkit-scrollbar,
html body .deal-info-header .deal-header-field .deal-select-popover::-webkit-scrollbar,
html body .deal-info-header .deal-header-field .mud-select .mud-popover-paper::-webkit-scrollbar,
html body .deal-info-header .deal-header-field .mud-autocomplete .mud-popover-paper::-webkit-scrollbar,
html body .deal-info-header .deal-header-field .mud-select .mud-popover-provider .mud-popover-paper::-webkit-scrollbar,
html body .deal-info-header .deal-header-field .mud-autocomplete .mud-popover-provider .mud-popover-paper::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

html body .deal-info-header .deal-header-field .mud-popover-paper,
html body .deal-info-header .deal-header-field .mud-select-popover,
html body .deal-info-header .deal-header-field .mud-menu-paper,
html body .deal-info-header .deal-header-field .deal-select-popover {
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
}

/* 4. REMOVE ALL VERTICAL SPACING - Zero margins and padding */
.deal-info-header {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.deal-info-header .mud-grid {
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
}

.deal-info-header .mud-item {
  margin: 0 !important;
  padding: 0 !important;
}

/* Remove spacing from input root and control */
.deal-info-header .deal-header-field .mud-input-root {
  margin: 0 !important;
  padding: 0 !important;
}

.deal-info-header .deal-header-field .mud-input-control {
  margin: 0 !important;
  padding: 0 !important;
}

/* Reduce label spacing */
.deal-info-header .deal-header-field .mud-input-label {
  margin-bottom: 2px !important;
  margin-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Remove helper text spacing if any */
.deal-info-header .deal-header-field .mud-input-helper-text {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  height: 0 !important;
  display: none !important;
}

/* 5. REDUCE PADDING - Override app.css line 5750-5752 global padding rule */
html body .deal-info-header .deal-header-field .mud-input-root,
html body .deal-info-header .deal-header-field .mud-input-slot {
  padding-top: 0.3rem !important;
  padding-bottom: 0.3rem !important;
  padding-left: 0.75rem !important;
  padding-right: 0.75rem !important;
  min-height: auto !important;
  height: auto !important;
}

/* Override MudBlazor default min-height that adds vertical space */
html body .deal-info-header .deal-header-field .mud-input-root.mud-input-outlined,
html body .deal-info-header .deal-header-field .mud-input-root.mud-select-outlined,
html body .deal-info-header .deal-header-field .mud-input-root.mud-autocomplete-outlined {
  min-height: auto !important;
  height: auto !important;
}

/* --------------------------------------------------------------
  Module Header Fields - Comprehensive Styling Fix
  Same fixes as deal-info-header but for .module-header inputs
  OVERRIDES ALL GLOBAL app.css RULES
  MUST BE LOADED AFTER app.css TO OVERRIDE
--------------------------------------------------------------- */

/* CRITICAL: Override app.css - set transparent backgrounds */
html body .module-header .mud-input-slot:not([style*="border: none"]),
html body .module-header .mud-select:not(.mud-select-filled) .mud-input-slot:not([style*="border: none"]),
html body .module-header .mud-autocomplete:not(.mud-autocomplete-filled) .mud-input-slot:not([style*="border: none"]) {
  background-color: transparent !important;
  background: transparent !important;
}

/* 1. REMOVE ALL WHITE BACKGROUNDS - Override ALL app.css background rules */
html body .module-header .mud-input-root.mud-input-outlined:not(.mud-disabled) .mud-input-slot input,
html body .module-header .mud-input-root.mud-input-outlined:not(.mud-disabled) .mud-input-slot textarea,
html body .module-header .mud-input-root.mud-select-outlined:not(.mud-disabled) .mud-input-slot input,
html body .module-header .mud-input-root.mud-autocomplete-outlined:not(.mud-disabled) .mud-input-slot input,
html body .module-header .mud-input-root.mud-numeric-field-outlined:not(.mud-disabled) .mud-input-slot input {
  background: transparent !important;
  background-color: transparent !important;
}

html body .module-header .mud-input-root.mud-input-outlined:not(.mud-disabled):focus-within .mud-input-slot,
html body .module-header .mud-input-root.mud-select-outlined:not(.mud-disabled):focus-within .mud-input-slot,
html body .module-header .mud-input-root.mud-autocomplete-outlined:not(.mud-disabled):focus-within .mud-input-slot,
html body .module-header .mud-input-root.mud-numeric-field-outlined:not(.mud-disabled):focus-within .mud-input-slot,
html body .module-header .mud-input-root.mud-picker-outlined:not(.mud-disabled):focus-within .mud-input-slot {
  background: transparent !important;
  background-color: transparent !important;
}

html body .module-header .mud-input-root.mud-input-outlined:not(.mud-disabled):hover .mud-input-slot,
html body .module-header .mud-input-root.mud-select-outlined:not(.mud-disabled):hover .mud-input-slot,
html body .module-header .mud-input-root.mud-autocomplete-outlined:not(.mud-disabled):hover .mud-input-slot,
html body .module-header .mud-input-root.mud-numeric-field-outlined:not(.mud-disabled):hover .mud-input-slot {
  background: transparent !important;
  background-color: transparent !important;
}

html body .module-header .mud-input-root.mud-input-outlined .mud-input-slot,
html body .module-header .mud-input-root.mud-select-outlined .mud-input-slot,
html body .module-header .mud-input-root.mud-autocomplete-outlined .mud-input-slot,
html body .module-header .mud-input-root.mud-input-outlined:not(.mud-disabled) .mud-input-slot,
html body .module-header .mud-input-root.mud-select-outlined:not(.mud-disabled) .mud-input-slot,
html body .module-header .mud-input-root.mud-autocomplete-outlined:not(.mud-disabled) .mud-input-slot,
html body .module-header .mud-input-slot input,
html body .module-header .mud-input-slot .mud-select-input,
html body .module-header .mud-input-slot textarea,
html body .module-header .mud-input-control .mud-input-slot,
html body .module-header .mud-input-control.mud-input-outlined .mud-input-slot,
html body .module-header .mud-input-control.mud-select-outlined .mud-input-slot,
html body .module-header .mud-input-control.mud-autocomplete-outlined .mud-input-slot {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* Override inline styles - use attribute selector */
html body .module-header [style*="background"],
html body .module-header [style*="background-color"] {
  background: transparent !important;
  background-color: transparent !important;
}

/* 2. REMOVE MULTIPLE BORDERS - Only keep fieldset border */
/* Target ALL possible elements that could have borders in the select structure */
/* CRITICAL: The .mud-input div itself often has a border from MudBlazor defaults */
html body .module-header .mud-input-root,
html body .module-header .mud-input-control,
html body .module-header .mud-input-control-input-container,
html body .module-header .mud-input,
html body .module-header .mud-input.mud-input-outlined,
html body .module-header .mud-input.mud-select-input,
html body .module-header .mud-input-slot,
html body .module-header .mud-select,
html body .module-header .mud-select-input,
html body .module-header .mud-input-root .mud-input-control,
html body .module-header .mud-input-root .mud-input-control .mud-input,
html body .module-header .mud-input-root .mud-input-control .mud-input-slot,
html body .module-header .mud-input-control .mud-input,
html body .module-header .mud-input-control .mud-input-control-input-container,
html body .module-header .mud-input-control .mud-input-control-input-container .mud-input,
html body .module-header .mud-input-control .mud-input-control-input-container .mud-input.mud-input-outlined,
html body .module-header .mud-input-control .mud-input-control-input-container .mud-input.mud-select-input,
html body .module-header .mud-input-control .mud-input-control-input-container .mud-input-slot,
html body .module-header .mud-input .mud-input-slot,
html body .module-header input,
html body .module-header div[class*="mud-input"] {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Ensure fieldset is the ONLY border - Maximum specificity to override everything */
html body .module-header fieldset.mud-input-outlined-border,
html body .module-header .mud-input-control fieldset.mud-input-outlined-border,
html body .module-header .mud-input-control-input-container fieldset.mud-input-outlined-border,
html body .module-header .mud-input fieldset.mud-input-outlined-border {
  border: 1px solid var(--mud-palette-lines-inputs) !important;
  border-radius: 4px !important;
  border-width: 1px !important;
}

html body .module-header:hover fieldset.mud-input-outlined-border {
  border-color: var(--mud-palette-lines-default) !important;
}

html body .module-header:focus-within fieldset.mud-input-outlined-border {
  border-color: var(--mud-palette-primary) !important;
  border-width: 2px !important;
}

/* 3. REDUCE PADDING - Override app.css global padding rule */
html body .module-header .mud-input-root,
html body .module-header .mud-input-slot {
  padding-top: 0.3rem !important;
  padding-bottom: 0.3rem !important;
  padding-left: 0.75rem !important;
  padding-right: 0.75rem !important;
  min-height: auto !important;
  height: auto !important;
}

/* Override MudBlazor default min-height that adds vertical space */
html body .module-header .mud-input-root.mud-input-outlined,
html body .module-header .mud-input-root.mud-select-outlined,
html body .module-header .mud-input-root.mud-autocomplete-outlined {
  min-height: auto !important;
  height: auto !important;
}

/* Remove label margin that adds vertical space */
html body .module-header .mud-input-label {
  margin-bottom: 2px !important;
  margin-top: 0 !important;
  line-height: 1.2 !important;
  transform: translateY(0) scale(0.75) !important;
}

/* Remove extra spacing from input control wrapper */
html body .module-header .mud-input-control {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* --------------------------------------------------------------
  Header Dropdown Select Styling - Aligned with Tab Design Pattern
  Uses MudSelect with Filled variant, styled to match tab field pattern
  Labels above, values below, left-aligned
--------------------------------------------------------------- */

/* Header menu buttons - transparent/background matching, no borders */
/* Override MudBlazor's default filled button border (1px solid transparent) and app.css rules */
/* Must override app.css line 6447: .mud-button-filled { border: 1px solid transparent !important; } */
/* Target all possible button element combinations - MudButton structure is different from MudAutocomplete */
html body .header-menu-button .mud-button-filled,
html body .header-menu-button.mud-button-filled,
html body .header-menu-button .mud-button-root.mud-button-filled,
html body .header-menu-button.mud-button-root.mud-button-filled,
html body .header-menu-button.mud-button.mud-button-filled,
html body .header-menu-button .mud-button.mud-button-filled,
html body .header-menu-button.mud-button-root.mud-button-filled.mud-button,
html body .header-menu-button .mud-button-root.mud-button-filled.mud-button,
html body div.header-menu-button .mud-button-filled,
html body div.header-menu-button.mud-button-filled,
html body .header-menu-button button.mud-button-filled,
html body .header-menu-button button.mud-button-root.mud-button-filled {
  background-color: var(--mud-palette-background) !important;
  background: var(--mud-palette-background) !important;
  color: var(--mud-palette-text-primary) !important;
  box-shadow: none !important;
  border: none !important;
  border-width: 0 !important;
  border-color: transparent !important;
  border-style: none !important;
  border-bottom: none !important;
  text-transform: none !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  outline: none !important;
}

/* CRITICAL: Override app.css .mud-button-filled border rule with maximum specificity */
/* app.css line 6447: .mud-button-filled { border: 1px solid transparent !important; } */
/* Must have higher specificity than that rule - target the actual button element */
html body .header-menu-button button.mud-button-filled.mud-button-root,
html body .header-menu-button .mud-button.mud-button-filled.mud-button-root,
html body .header-menu-button.mud-button.mud-button-filled.mud-button-root,
html body .header-menu-button button.mud-button-filled,
html body .header-menu-button button.mud-button-root.mud-button-filled.mud-button,
html body .header-menu-button .mud-button-root.mud-button-filled.mud-button-default.mud-button,
html body .header-menu-button button.mud-button-filled.mud-button-root.mud-button,
html body .header-menu-button button.mud-button.mud-button-filled.mud-button-root {
  border: none !important;
  border-width: 0 !important;
  border-color: transparent !important;
  border-style: none !important;
}

/* Also target any wrapper divs that might have borders */
html body .header-menu-button > div,
html body .header-menu-button > div > button,
html body .header-menu-button .mud-menu-activator,
html body .header-menu-button .mud-menu-activator button {
  border: none !important;
  border-width: 0 !important;
  border-color: transparent !important;
  border-style: none !important;
}

/* Remove all borders from button root and all nested elements - highest specificity to override app.css */
/* Target all possible button element combinations - must override app.css .mud-button-filled rule */
html body .header-menu-button .mud-button-root,
html body .header-menu-button.mud-button-root,
html body .header-menu-button .mud-button-filled .mud-button-root,
html body .header-menu-button .mud-button-filled *,
html body .header-menu-button.mud-button-filled.mud-button-root,
html body .header-menu-button .mud-button-root.mud-button-filled,
html body .header-menu-button.mud-button.mud-button-filled.mud-button-root,
html body .header-menu-button.mud-button-root.mud-button-filled.mud-button,
html body .header-menu-button button.mud-button-filled,
html body .header-menu-button button.mud-button-root.mud-button-filled,
html body .header-menu-button .mud-button-root.mud-button-filled.mud-button-default,
html body .header-menu-button button.mud-button-filled.mud-button-root,
html body .header-menu-button .mud-button.mud-button-filled.mud-button-root {
  border: none !important;
  border-width: 0 !important;
  border-color: transparent !important;
  border-style: none !important;
  box-shadow: none !important;
  outline: none !important;
}

html body .header-menu-button .mud-button-filled:hover,
html body .header-menu-button.mud-button-filled:hover,
html body .header-menu-button .mud-button-root.mud-button-filled:hover {
  background-color: var(--mud-palette-background) !important;
  background: var(--mud-palette-background) !important;
  border: none !important;
  border-width: 0 !important;
  border-color: transparent !important;
  border-bottom: none !important;
  box-shadow: none !important;
  outline: none !important;
}

html body .header-menu-button .mud-button-filled:focus,
html body .header-menu-button.mud-button-filled:focus,
html body .header-menu-button .mud-button-filled:focus-visible,
html body .header-menu-button .mud-button-root.mud-button-filled:focus,
html body .header-menu-button .mud-button-root.mud-button-filled:focus-visible {
  background-color: var(--mud-palette-background) !important;
  background: var(--mud-palette-background) !important;
  border: none !important;
  border-width: 0 !important;
  border-color: transparent !important;
  border-bottom: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Remove borders from MudMenu component and its activator */
html body .header-menu-button.mud-menu,
html body .header-menu-button .mud-menu,
html body .header-menu-button .mud-menu-activator,
html body .header-menu-button .mud-menu-activator > div,
html body .header-menu-button .mud-menu-activator > button {
  border: none !important;
  border-width: 0 !important;
  border-color: transparent !important;
  border-style: none !important;
  border-bottom: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Remove borders from menu items */
html body .header-menu-button .mud-menu-item,
html body .mud-menu .mud-menu-item {
  border: none !important;
  box-shadow: none !important;
}

/* Header dropdown selects - visual styling only, let MudBlazor handle spacing */
html body .header-dropdown-select .mud-select.mud-select-filled,
html body .header-dropdown-select .mud-input-root.mud-select-filled,
html body .header-dropdown-select .mud-input-root.mud-select-filled .mud-input-slot,
html body .header-dropdown-select .mud-input-root.mud-select-filled .mud-input-control-input-container,
html body .header-dropdown-select .mud-input-root.mud-select-filled .mud-input-control,
html body .header-dropdown-select .mud-input-control.mud-select-filled {
  background-color: var(--mud-palette-background) !important;
  background: var(--mud-palette-background) !important;
  border-bottom: 1px solid var(--mud-palette-divider) !important;
}

/* Target the input element itself - ensure left alignment */
html body .header-dropdown-select .mud-select-filled input,
html body .header-dropdown-select .mud-select-filled .mud-select-input,
html body .header-dropdown-select .mud-input-root.mud-select-filled input {
  background-color: var(--mud-palette-background) !important;
  background: var(--mud-palette-background) !important;
  color: var(--mud-palette-text-primary) !important;
}

/* Remove borders from filled variant - match tab field style */
html body .header-dropdown-select .mud-select-filled fieldset,
html body .header-dropdown-select .mud-select-filled .mud-input-outlined-border {
  border: none !important;
  display: none !important;
}

/* Remove any box shadows and borders */
html body .header-dropdown-select .mud-select-filled,
html body .header-dropdown-select .mud-input-root.mud-select-filled {
  box-shadow: none !important;
  border: none !important;
}

/* Hover state - keep background consistent */
html body .header-dropdown-select .mud-select.mud-select-filled:hover,
html body .header-dropdown-select .mud-input-root.mud-select-filled:hover,
html body .header-dropdown-select .mud-input-control.mud-select-filled:hover,
html body .header-dropdown-select .mud-select-filled:hover .mud-input-slot,
html body .header-dropdown-select .mud-select-filled:hover input {
  background-color: var(--mud-palette-background) !important;
  background: var(--mud-palette-background) !important;
  border: none !important;
  border-bottom: 1px solid var(--mud-palette-divider) !important;
}

/* Focus state - subtle highlight */
html body .header-dropdown-select .mud-select-filled:focus-within,
html body .header-dropdown-select .mud-input-root.mud-select-filled:focus-within,
html body .header-dropdown-select .mud-select-filled:focus-within .mud-input-slot,
html body .header-dropdown-select .mud-select-filled:focus-within input {
  background-color: var(--mud-palette-background) !important;
  background: var(--mud-palette-background) !important;
  border-bottom: 1px solid var(--mud-palette-divider) !important;
}

/* Disabled state */
html body .header-dropdown-select .mud-select-filled.mud-disabled,
html body .header-dropdown-select .mud-input-root.mud-select-filled.mud-disabled,
html body .header-dropdown-select .mud-select-filled.mud-disabled .mud-input-slot,
html body .header-dropdown-select .mud-select-filled.mud-disabled input {
  background-color: var(--mud-palette-background) !important;
  background: var(--mud-palette-background) !important;
  opacity: 0.6;
}

/* UserPicker in header - same styling */
html body .header-dropdown-select .mud-autocomplete.mud-autocomplete-filled,
html body .header-dropdown-select .mud-input-root.mud-autocomplete-filled,
html body .header-dropdown-select .mud-input-root.mud-autocomplete-filled .mud-input-slot,
html body .header-dropdown-select .mud-autocomplete-filled input {
  background-color: var(--mud-palette-background) !important;
  background: var(--mud-palette-background) !important;
  border-bottom: 1px solid var(--mud-palette-divider) !important;
}

html body .header-dropdown-select .mud-autocomplete-filled fieldset {
  border: none !important;
  display: none !important;
}min-height: auto !important;
  height: auto !important;
}

/* Remove label margin that adds vertical space */
html body .deal-info-header .deal-header-field .mud-input-label {
  margin-bottom: 2px !important;
  margin-top: 0 !important;
  line-height: 1.2 !important;
  transform: translateY(0) scale(0.75) !important;
}

/* Remove extra spacing from input control wrapper */
html body .deal-info-header .deal-header-field .mud-input-control {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* --------------------------------------------------------------
  Responsive Overrides (Property-specific breakpoints)
--------------------------------------------------------------- */

@media (max-width:1100px) {
  .property-header {
    grid-template-columns: 1fr;
    row-gap: 1rem;
  }

  .property-header-actions {
    width: 100%;
    justify-content: flex-start;
    padding-left: 0;
    border-left: none;
  }

  .property-header-actions .action-btn {
    flex: 1 1 auto;
    min-width: 120px;
  }
}

/* Edit Property: calculated/derived fields read-only appearance (greyed when Use calculated is on) */
.mud-grid-item.calculated-field-readonly .mud-input-slot,
.calculated-field-readonly .mud-numeric-field .mud-input-slot {
  background-color: var(--mud-palette-action-default-hover) !important;
  cursor: not-allowed;
  pointer-events: none;
}
.mud-grid-item.calculated-field-readonly .mud-input-root.mud-input-outlined.mud-input-disabled .mud-input-slot,
.mud-grid-item.calculated-field-readonly .mud-numeric-field .mud-input-root .mud-input-slot {
  background-color: rgba(0, 0, 0, 0.04) !important;
}
.dark .mud-grid-item.calculated-field-readonly .mud-input-slot,
.dark .calculated-field-readonly .mud-numeric-field .mud-input-slot {
  background-color: var(--mud-palette-background-gray-dark) !important;
}
.dark .mud-grid-item.calculated-field-readonly .mud-input-root.mud-input-outlined.mud-input-disabled .mud-input-slot {
  background-color: rgba(255, 255, 255, 0.05) !important;
}

/* Edit Property Financial tab: label rows identical height, no extra padding from icon/checkbox; all labels same font (not bold/darker) */
.edit-property-financial-grid .financial-label-row,
.edit-property-financial-grid .calculated-field-label-row {
  height: 2.25rem;
  min-height: 2.25rem;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  padding: 0;
  line-height: 1.25;
}
.edit-property-financial-grid .financial-label-row .form-label,
.edit-property-financial-grid .calculated-field-label-row .form-label,
.edit-property-financial-grid .form-label {
  margin: 0;
  font-weight: 500;
  color: var(--mud-palette-text-primary);
}
.edit-property-financial-grid .calculated-field-label-row .calculated-field-label-left {
  gap: 4px;
}
.edit-property-financial-grid .calculated-field-label-row .calculated-field-tooltip-icon {
  font-size: 0.875rem;
  width: 1rem;
  height: 1rem;
  margin: 0;
  padding: 0;
}
.edit-property-financial-grid .calculated-field-label-row .calculated-field-label-right .mud-checkbox,
.edit-property-financial-grid .calculated-field-label-row .calculated-field-label-right .calculated-field-checkbox,
.edit-property-financial-grid .calculated-field-label-row .calculated-field-label-right .mud-input-control {
  margin: 0;
  padding: 0;
  min-height: auto;
}