/* ============================================================================
   COLOR PALETTE IMPLEMENTATION GUIDE
   ============================================================================
   Strategic application of palette colors throughout the interface.
   All elements maintain theme compatibility (Light/Dark modes).
   
   Palette color is user-selected and changes based on context.
   CSS Variables used:
   - --primary-color: Main palette hex value
   - --primary-dark: Darker shade for hover states
   - --primary-color-rgb: RGB variant for opacity tints
   - --btn-primary-rgb: RGB for subtle backgrounds
   - --bg-card, --text-main, --text-muted: Theme-controlled
   ============================================================================ */

/* ============================================================================
   NAVIGATION BAR: MY PROPERTIES BUTTON
   ============================================================================
   Only nav element with palette color border - signals active state.
   */

/* ============================================================================
   NAVIGATION BUTTONS - ALL NAV ELEMENTS
   ============================================================================
   Default: No border, no background
   Hover: Thin line (2px) at bottom in palette color
   */

.navbar .btn,
.nav .btn,
.my-properties-btn,
.navbar-brand+.nav-link,
.navbar .navbar-toggler,
.navbar .nav-link,
.nav-link,
.navbar-nav .btn-outline-primary,
.navbar-nav .btn-outline-danger,
.navbar-nav .btn-outline-info,
.navbar-nav .btn-outline-secondary {
  background: transparent !important;
  border: none !important;
  position: relative;
  color: var(--text-main) !important;
  font-weight: 600;
  transition: all 0.3s ease;
}

/* Bottom line indicator on hover for all nav elements */
.navbar .btn::after,
.nav .btn::after,
.my-properties-btn::after,
.navbar .navbar-toggler::after,
.navbar .nav-link::after,
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--primary-color);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.navbar .btn:hover::after,
.nav .btn:hover::after,
.my-properties-btn:hover::after,
.navbar .navbar-toggler:hover::after,
.navbar .nav-link:hover::after,
.nav-link:hover::after {
  transform: scaleX(1);
}

.my-properties-btn:focus,
.navbar .nav-link:focus,
.nav-link:focus {
  outline: none !important;
}

/* ============================================================================
   PROPERTY CARDS: OVERALL STRUCTURE & HOVER EFFECTS
   ============================================================================
   No borders on cards. Hover shows palette-colored bottom line.
   */

.property-card {
  background: var(--bg-card) !important;
  border: none !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

/* Hover effect: soft horizontal line at bottom in palette color */
.property-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--primary-color);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.property-card:hover::after {
  transform: scaleX(1);
}

[data-theme="dark"] .property-card {
  background: #1a1a1a !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

[data-theme="dark"] .property-card:hover {
  box-shadow: 0 8px 24px rgba(var(--btn-primary-rgb, 102, 126, 234), 0.15) !important;
}

/* ============================================================================
   PROPERTY CARD: UNIT COUNT BADGE (TOP-LEFT)
   ============================================================================
   Palette-colored background with white text. Replaces price tag position.
   */

.property-card .unit-count-badge,
.property-card .vacancy-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 15;
  background: var(--primary-color) !important;
  color: white !important;
  padding: 0.5rem 0.95rem;
  border-radius: 0;
  font-weight: 700;
  font-size: 0.9rem;
  box-shadow: 0 4px 12px rgba(var(--btn-primary-rgb, 102, 126, 234), 0.3);
}

/* Ensure existing badges follow the same pattern */
.property-card .badge {
  border-radius: 0;
  padding: 0.5rem 0.95rem;
  font-weight: 600;
  font-size: 0.85rem;
}

.property-card .badge.bg-success {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  color: white !important;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.property-card .badge.bg-danger {
  background: linear-gradient(135deg, #ef4444, #dc2626) !important;
  color: white !important;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

/* ============================================================================
   PROPERTY CARD: PRICE TAG (BELOW LOCATION)
   ============================================================================
   Larger, prominent display. Palette color for text or subtle background.
   */

.property-card .property-price,
.property-price {
  font-size: 1.5rem !important;
  font-weight: 800 !important;
  color: var(--primary-color) !important;
  margin-bottom: 0.75rem !important;
  line-height: 1.1 !important;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.property-card .price-prefix {
  font-size: 0.85rem;
  font-weight: 600;
  opacity: 0.8;
}

/* ============================================================================
   PROPERTY CARD: ROOM & OCCUPANCY PILLS
   ============================================================================
   Default: no border. Active/Selected: palette border ONLY (no tint).
   Hover: palette-colored bottom line appears.
   */

.property-info-chip,
.room-type-pill,
.occupancy-pill,
.property-card .chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.9rem;
  background: rgba(0, 0, 0, 0.02);
  border: none;
  border-radius: 18px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-muted);
  transition: all 0.2s ease;
  cursor: pointer;
  position: relative;
}

[data-theme="dark"] .property-info-chip,
[data-theme="dark"] .room-type-pill,
[data-theme="dark"] .occupancy-pill,
[data-theme="dark"] .property-card .chip {
  background: rgba(255, 255, 255, 0.04);
  border: none;
  color: #9ca3af;
}

/* Hover state: palette-colored bottom line */
.property-info-chip::after,
.room-type-pill::after,
.occupancy-pill::after,
.property-card .chip::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--primary-color);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease;
}

.property-info-chip:hover::after,
.room-type-pill:hover::after,
.occupancy-pill:hover::after,
.property-card .chip:hover::after {
  transform: scaleX(1);
}

/* Active/Selected state: palette border ONLY (no background tint) */
.property-info-chip.active,
.room-type-pill.active,
.occupancy-pill.active,
.property-card .chip.active,
.property-info-chip.selected,
.room-type-pill.selected,
.occupancy-pill.selected,
.property-card .chip.selected {
  border: 2px solid var(--primary-color) !important;
  background: rgba(0, 0, 0, 0.02) !important;
  color: var(--text-main) !important;
  font-weight: 600;
}

[data-theme="dark"] .property-info-chip.active,
[data-theme="dark"] .room-type-pill.active,
[data-theme="dark"] .occupancy-pill.active,
[data-theme="dark"] .property-card .chip.active,
[data-theme="dark"] .property-info-chip.selected,
[data-theme="dark"] .room-type-pill.selected,
[data-theme="dark"] .occupancy-pill.selected,
[data-theme="dark"] .property-card .chip.selected {
  background: rgba(var(--btn-primary-rgb, 102, 126, 234), 0.12) !important;
}

/* ============================================================================
   PROPERTY CARD: VIEW DETAILS BUTTON
   ============================================================================
   Palette color border only. No gradient. Consistent light/dark mode.
   Inside color: black in light mode, white in dark mode.
   */

.btn-view-lg,
.property-card .btn-view,
.property-card .btn-accent,
.property-card .btn-primary {
  border: 2px solid var(--primary-color) !important;
  background: transparent !important;
  color: #000000 !important;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.7rem 1.2rem;
  border-radius: 10px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  top: 0;
}

.btn-view-lg:hover,
.property-card .btn-view:hover,
.property-card .btn-accent:hover,
.property-card .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(var(--btn-primary-rgb, 102, 126, 234), 0.2) !important;
}

.btn-view-lg:active,
.property-card .btn-view:active,
.property-card .btn-accent:active,
.property-card .btn-primary:active {
  transform: translateY(0);
}

.btn-view-lg:focus,
.property-card .btn-view:focus,
.property-card .btn-accent:focus,
.property-card .btn-primary:focus {
  box-shadow: 0 0 0 3px rgba(var(--btn-primary-rgb, 102, 126, 234), 0.2) !important;
  outline: none !important;
}

[data-theme="dark"] .btn-view-lg,
[data-theme="dark"] .property-card .btn-view,
[data-theme="dark"] .property-card .btn-accent,
[data-theme="dark"] .property-card .btn-primary {
  background: transparent !important;
  color: #ffffff !important;
  border-color: var(--primary-color) !important;
}

[data-theme="dark"] .btn-view-lg:hover,
[data-theme="dark"] .property-card .btn-view:hover,
[data-theme="dark"] .property-card .btn-accent:hover,
[data-theme="dark"] .property-card .btn-primary:hover {
  box-shadow: 0 4px 12px rgba(var(--btn-primary-rgb, 102, 126, 234), 0.3) !important;
}

/* ============================================================================
   PROPERTY CARDS: SHADOW TREATMENT (LIGHT & DARK MODES)
   ============================================================================
   Soft shadow with subtle palette color tint for premium feel.
   */

.property-card {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
}

.property-card:hover {
  box-shadow: 0 8px 24px rgba(var(--btn-primary-rgb, 102, 126, 234), 0.12) !important;
}

[data-theme="dark"] .property-card {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6) !important;
}

[data-theme="dark"] .property-card:hover {
  box-shadow: 0 8px 24px rgba(var(--btn-primary-rgb, 102, 126, 234), 0.1) !important;
}

/* ============================================================================
   PRICE RANGE SELECTION BUTTONS (FILTER PAGE)
   ============================================================================
   Default: no border. Selected: palette border ONLY (no background tint).
   Hover: palette-colored bottom line appears.
   */

.price-pill,
.price-range-btn,
.filter-chip {
  border: none !important;
  background: var(--bg-card) !important;
  color: var(--text-main) !important;
  transition: all 0.2s ease;
  padding: 0.6rem 1.2rem;
  border-radius: 18px;
  font-weight: 500;
  cursor: pointer;
  position: relative;
}

/* Hover state: palette-colored bottom line */
.price-pill::after,
.price-range-btn::after,
.filter-chip::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--primary-color);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease;
}

.price-pill:hover::after,
.price-range-btn:hover::after,
.filter-chip:hover::after {
  transform: scaleX(0);
}

/* Selected state: palette border ONLY (no background tint) */
.price-pill.active,
.price-range-btn.active,
.filter-chip.active {
  border: 2px solid var(--primary-color) !important;
  background: var(--bg-card) !important;
  color: var(--text-main) !important;
  font-weight: 700;
}

[data-theme="dark"] .price-pill.active,
[data-theme="dark"] .price-range-btn.active,
[data-theme="dark"] .filter-chip.active {
  background: var(--bg-card) !important;
}

/* ============================================================================
   GENERAL BUTTON & LINK STYLING
   ============================================================================
   Primary buttons show palette via gradient and border.
   Outline buttons show palette via border only.
   */

.btn-primary {
  border: 2px solid var(--primary-color) !important;
  background: linear-gradient(135deg, var(--primary-color), var(--primary-dark, #667eea)) !important;
  color: white !important;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
  transition: all 0.2s ease;
}

.btn-primary:hover {
  background: linear-gradient(135deg, var(--primary-dark, #667eea), var(--primary-color)) !important;
  box-shadow: 0 4px 12px rgba(var(--btn-primary-rgb, 102, 126, 234), 0.25) !important;
}

.btn-outline-primary {
  color: var(--primary-color) !important;
  border: 2px solid var(--primary-color) !important;
  background: transparent !important;
}

.btn-outline-primary:hover {
  background: rgba(var(--btn-primary-rgb, 102, 126, 234), 0.08) !important;
  border-color: var(--primary-color) !important;
}

/* ============================================================================
   NAVBAR BUTTONS & ICONS
   ============================================================================
   Nav buttons show palette color for icons and borders.
   */

.nav .btn.btn-outline-primary {
  color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
}

.navbar .btn-outline-danger .bi-heart,
.navbar .btn-outline-danger .bi-heart-fill,
.navbar .btn-outline-info .bi-chat-dots,
.navbar .btn-outline-secondary .bi-clock-history {
  color: var(--primary-color) !important;
}

/* ============================================================================
   FILTER ELEMENTS: HIERARCHICAL ITEMS & TOGGLES
   ============================================================================
   Active items show palette color border and subtle background.
   */

.location-item-hierarchical.active,
.location-item-hierarchical:hover {
  background-color: rgba(var(--btn-primary-rgb, 102, 126, 234), 0.08) !important;
  border-left: 3px solid var(--primary-color) !important;
}

#use-hierarchical-toggle:checked+label.form-check-label {
  color: var(--primary-color) !important;
  font-weight: 700 !important;
  border-left: 3px solid var(--primary-color) !important;
  padding-left: 0.5rem !important;
}

/* ============================================================================
   THEME LABEL & PALETTE SELECTOR
   ============================================================================
   Active theme/palette shows palette-colored border and background tint.
   */

.theme-label {
  padding: 4px 8px;
  border-radius: 8px;
  border: 2px solid transparent;
  transition: all 0.2s ease;
}

.theme-label.active {
  border-color: var(--primary-color) !important;
  color: var(--primary-color) !important;
  background: rgba(var(--btn-primary-rgb, 102, 126, 234), 0.08) !important;
  font-weight: 700;
}

/* Palette card selector */
.palette-card {
  border: 2px solid var(--border-color) !important;
  border-radius: 16px;
  padding: 1.25rem;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background: var(--bg-card);
  position: relative;
  overflow: hidden;
}

.palette-card:hover {
  transform: translateY(-5px);
  border-color: var(--primary-color);
  box-shadow: 0 8px 20px rgba(var(--btn-primary-rgb, 102, 126, 234), 0.15);
}

.palette-card.active {
  border-color: var(--primary-color) !important;
  background: rgba(var(--btn-primary-rgb, 102, 126, 234), 0.08) !important;
  box-shadow: 0 0 0 3px rgba(var(--btn-primary-rgb, 102, 126, 234), 0.1);
}

/* ============================================================================
   ENSURE HEADINGS REMAIN THEME-CONTROLLED
   ============================================================================
   Do NOT apply palette color to headings/titles.
   */

h1,
h2,
h3,
h4,
h5,
h6,
.page-title,
.section-title,
.card-title {
  color: var(--text-main) !important;
}

/* ============================================================================
   ELEMENTS THAT DO NOT USE PALETTE COLOR
   ============================================================================
   Keep these neutral and theme-controlled only.
   */

input[type="text"],
input[type="email"],
input[type="number"],
input[type="search"],
.form-control,
.form-select,
.property-card .location,
.property-location-text,
.star-rating,
.property-status-badge {
  /* Use only theme variables - no palette color */
}