/* V4-only visual overrides loaded after the app stylesheet. */

/* Pending reservations: the whole calendar bar is amber, not the apartment color. */
[class*="xl:grid-cols-[minmax(0,2fr)_minmax(360px,0.9fr)]"] > div > section:first-child button[style*="border-style: dashed"],
[class*="xl:grid-cols-[minmax(0,2fr)_minmax(360px,0.9fr)]"] > section:first-child button[style*="border-style: dashed"] {
  background-color: #fef3c7 !important;
  border-color: #fcd34d !important;
  border-style: solid !important;
  color: #92400e !important;
}

[class*="xl:grid-cols-[minmax(0,2fr)_minmax(360px,0.9fr)]"] > div > section:first-child button[style*="border-style: dashed"] > span:first-child,
[class*="xl:grid-cols-[minmax(0,2fr)_minmax(360px,0.9fr)]"] > section:first-child button[style*="border-style: dashed"] > span:first-child {
  background-color: #f59e0b !important;
}

/* Upcoming reservations: compact list like the dashboard reference, no action buttons. */
[class*="xl:grid-cols-[minmax(0,2fr)_minmax(360px,0.9fr)]"] > div > section:nth-child(2) > div:first-child p,
[class*="xl:grid-cols-[minmax(0,2fr)_minmax(360px,0.9fr)]"] > section:nth-child(2) > div:first-child p {
  display: none !important;
}

[class*="xl:grid-cols-[minmax(0,2fr)_minmax(360px,0.9fr)]"] > div > section:nth-child(2) > div:nth-child(2),
[class*="xl:grid-cols-[minmax(0,2fr)_minmax(360px,0.9fr)]"] > section:nth-child(2) > div:nth-child(2) {
  padding: 0.35rem 0.8rem 0.6rem !important;
  gap: 0 !important;
}

/* Narrow/container layout: source, details and price; remove the third action row. */
[class*="xl:grid-cols-[minmax(0,2fr)_minmax(360px,0.9fr)]"] > div > section:nth-child(2) > div:nth-child(2) > div[class*="grid-cols-[42px_minmax(0,1fr)_auto]"],
[class*="xl:grid-cols-[minmax(0,2fr)_minmax(360px,0.9fr)]"] > section:nth-child(2) > div:nth-child(2) > div[class*="grid-cols-[42px_minmax(0,1fr)_auto]"] {
  grid-template-rows: auto auto !important;
  column-gap: 0.75rem !important;
  row-gap: 0.15rem !important;
  padding: 0.7rem 0.25rem !important;
  border-width: 0 0 1px 0 !important;
  border-color: rgba(15, 23, 42, 0.06) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

[class*="xl:grid-cols-[minmax(0,2fr)_minmax(360px,0.9fr)]"] > div > section:nth-child(2) > div:nth-child(2) > div[class*="grid-cols-[42px_minmax(0,1fr)_auto]"]:last-child,
[class*="xl:grid-cols-[minmax(0,2fr)_minmax(360px,0.9fr)]"] > section:nth-child(2) > div:nth-child(2) > div[class*="grid-cols-[42px_minmax(0,1fr)_auto]"]:last-child {
  border-bottom-width: 0 !important;
}

[class*="xl:grid-cols-[minmax(0,2fr)_minmax(360px,0.9fr)]"] > div > section:nth-child(2) > div:nth-child(2) > div[class*="grid-cols-[42px_minmax(0,1fr)_auto]"] > div:nth-child(5),
[class*="xl:grid-cols-[minmax(0,2fr)_minmax(360px,0.9fr)]"] > section:nth-child(2) > div:nth-child(2) > div[class*="grid-cols-[42px_minmax(0,1fr)_auto]"] > div:nth-child(5) {
  display: none !important;
}

/* Wide layout: collapse the two action columns and keep price/night at the far right. */
[class*="xl:grid-cols-[minmax(0,2fr)_minmax(360px,0.9fr)]"] > div > section:nth-child(2) > div:nth-child(2) > div[class*="grid-cols-[44px_minmax(0,1fr)_70px_76px_auto]"],
[class*="xl:grid-cols-[minmax(0,2fr)_minmax(360px,0.9fr)]"] > section:nth-child(2) > div:nth-child(2) > div[class*="grid-cols-[44px_minmax(0,1fr)_70px_76px_auto]"] {
  grid-template-columns: 44px minmax(0, 1fr) auto !important;
  gap: 0.75rem !important;
  padding: 0.7rem 0.25rem !important;
  border-width: 0 0 1px 0 !important;
  border-color: rgba(15, 23, 42, 0.06) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

[class*="xl:grid-cols-[minmax(0,2fr)_minmax(360px,0.9fr)]"] > div > section:nth-child(2) > div:nth-child(2) > div[class*="grid-cols-[44px_minmax(0,1fr)_70px_76px_auto]"] > div:nth-child(3),
[class*="xl:grid-cols-[minmax(0,2fr)_minmax(360px,0.9fr)]"] > div > section:nth-child(2) > div:nth-child(2) > div[class*="grid-cols-[44px_minmax(0,1fr)_70px_76px_auto]"] > div:nth-child(4),
[class*="xl:grid-cols-[minmax(0,2fr)_minmax(360px,0.9fr)]"] > section:nth-child(2) > div:nth-child(2) > div[class*="grid-cols-[44px_minmax(0,1fr)_70px_76px_auto]"] > div:nth-child(3),
[class*="xl:grid-cols-[minmax(0,2fr)_minmax(360px,0.9fr)]"] > section:nth-child(2) > div:nth-child(2) > div[class*="grid-cols-[44px_minmax(0,1fr)_70px_76px_auto]"] > div:nth-child(4) {
  display: none !important;
}

[class*="xl:grid-cols-[minmax(0,2fr)_minmax(360px,0.9fr)]"] > div > section:nth-child(2) > div:nth-child(2) > div[class*="grid-cols-[44px_minmax(0,1fr)_70px_76px_auto]"] > div:nth-child(5),
[class*="xl:grid-cols-[minmax(0,2fr)_minmax(360px,0.9fr)]"] > section:nth-child(2) > div:nth-child(2) > div[class*="grid-cols-[44px_minmax(0,1fr)_70px_76px_auto]"] > div:nth-child(5) {
  grid-column: 3 !important;
}

/* V4 performance: compact rows ordered Total -> YTD -> Month, without section titles. */
.v4-home-grid > div:nth-child(2) > section:nth-child(2) {
  display: flex !important;
  flex-direction: column !important;
  padding: 0.75rem !important;
}

.v4-home-grid > div:nth-child(2) > section:nth-child(2) > div:first-child {
  display: none !important;
}

/* Total and YTD block first. */
.v4-home-grid > div:nth-child(2) > section:nth-child(2) > div:nth-child(3) {
  order: 1 !important;
  display: grid !important;
  gap: 0.3rem !important;
  margin-top: 0 !important;
}

.v4-home-grid > div:nth-child(2) > section:nth-child(2) > div:nth-child(3) > div {
  display: grid !important;
  grid-template-columns: 42px repeat(3, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: 0.35rem !important;
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
}

.v4-home-grid > div:nth-child(2) > section:nth-child(2) > div:nth-child(3) > div > div:first-child {
  display: flex !important;
  align-items: center !important;
  padding-left: 0.1rem !important;
  color: #64748b !important;
  font-size: 0 !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-align: left !important;
}

.v4-home-grid > div:nth-child(2) > section:nth-child(2) > div:nth-child(3) > div:first-child > div:first-child::after {
  content: 'Total';
  font-size: 9px;
}

.v4-home-grid > div:nth-child(2) > section:nth-child(2) > div:nth-child(3) > div:nth-child(2) > div:first-child::after {
  content: 'YTD';
  font-size: 9px;
}

.v4-home-grid > div:nth-child(2) > section:nth-child(2) > div:nth-child(3) > div > div:nth-child(n + 2),
.v4-home-grid > div:nth-child(2) > section:nth-child(2) > div:nth-child(2) > div {
  min-width: 0 !important;
  min-height: 2.7rem !important;
  border: 1px solid !important;
  border-radius: 0.7rem !important;
  padding: 0.35rem 0.5rem !important;
  text-align: left !important;
}

.v4-home-grid > div:nth-child(2) > section:nth-child(2) > div:nth-child(3) > div > div:nth-child(n + 2) > div:first-child,
.v4-home-grid > div:nth-child(2) > section:nth-child(2) > div:nth-child(2) > div > div:first-child {
  font-size: 8px !important;
  font-weight: 600 !important;
  opacity: 0.72 !important;
  line-height: 1 !important;
}

.v4-home-grid > div:nth-child(2) > section:nth-child(2) > div:nth-child(3) > div > div:nth-child(n + 2) > div:last-child,
.v4-home-grid > div:nth-child(2) > section:nth-child(2) > div:nth-child(2) > div > div:nth-child(2) {
  margin-top: 0.2rem !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-align: left !important;
}

/* Same color system in every row. */
.v4-home-grid > div:nth-child(2) > section:nth-child(2) > div:nth-child(3) > div > div:nth-child(2),
.v4-home-grid > div:nth-child(2) > section:nth-child(2) > div:nth-child(2) > div:nth-child(1) {
  border-color: #dbeafe !important;
  background: rgba(239, 246, 255, 0.72) !important;
  color: #1d4ed8 !important;
}

.v4-home-grid > div:nth-child(2) > section:nth-child(2) > div:nth-child(3) > div > div:nth-child(3),
.v4-home-grid > div:nth-child(2) > section:nth-child(2) > div:nth-child(2) > div:nth-child(2) {
  border-color: #ffe4e6 !important;
  background: rgba(255, 241, 242, 0.72) !important;
  color: #be123c !important;
}

.v4-home-grid > div:nth-child(2) > section:nth-child(2) > div:nth-child(3) > div > div:nth-child(4),
.v4-home-grid > div:nth-child(2) > section:nth-child(2) > div:nth-child(2) > div:nth-child(3) {
  border-color: #d1fae5 !important;
  background: rgba(236, 253, 245, 0.72) !important;
  color: #047857 !important;
}

/* Month row last, using the same compact four-column geometry. */
.v4-home-grid > div:nth-child(2) > section:nth-child(2) > div:nth-child(2) {
  order: 2 !important;
  display: grid !important;
  grid-template-columns: 42px repeat(3, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: 0.35rem !important;
  margin-top: 0.3rem !important;
}

.v4-home-grid > div:nth-child(2) > section:nth-child(2) > div:nth-child(2)::before {
  content: 'Mes';
  display: flex !important;
  align-items: center !important;
  padding-left: 0.1rem !important;
  color: #64748b !important;
  font-size: 9px !important;
  font-weight: 700 !important;
}

.v4-home-grid > div:nth-child(2) > section:nth-child(2) > div:nth-child(2) > div:nth-child(4),
.v4-home-grid > div:nth-child(2) > section:nth-child(2) > div:nth-child(2) > div > div:nth-child(3) {
  display: none !important;
}

/* Chart and legend follow the three metric rows. */
.v4-home-grid > div:nth-child(2) > section:nth-child(2) > div:nth-child(4) {
  order: 3 !important;
  margin-top: 0.55rem !important;
}

.v4-home-grid > div:nth-child(2) > section:nth-child(2) > div:nth-child(5) {
  order: 4 !important;
  margin-top: 0.25rem !important;
}

/* Keep the three top-level V4 sections flush at the same vertical start. */
.v4-home-masonry,
.v4-home-masonry > div,
.v4-home-grid,
.v4-home-grid > *,
.v4-home-masonry + div,
.v4-home-masonry + div > :first-child {
  margin-top: 0 !important;
  align-self: start !important;
}

@media (min-width: 1280px) {
  div:has(> .v4-home-masonry) {
    align-items: start !important;
  }
}