/* App shell: top bar, then left nav + right content (not stacked) */
:root {
  --bs-dropdown-zindex: 2000;
  --f21-topbar-height: 3.5rem;
  --f21-sidebar-width: 15.5rem;
  --f21-topbar-bg: linear-gradient(118deg, #152a52 0%, #1e4d6b 52%, #0d6e62 100%);
  --f21-topbar-border: rgba(255, 255, 255, 0.12);
  --f21-sidebar-bg: #121c2e;
  --f21-sidebar-border: rgba(255, 255, 255, 0.07);
  --f21-nav-text: rgba(255, 255, 255, 0.78);
  --f21-nav-muted: rgba(255, 255, 255, 0.42);
  --f21-nav-hover-bg: rgba(255, 255, 255, 0.07);
  --f21-nav-active-bg: rgba(45, 212, 191, 0.16);
  --f21-nav-active-text: #b8fff4;
  --f21-nav-active-accent: #2dd4bf;
  --f21-vault-text: #f5d9a8;
  --f21-vault-active-bg: rgba(240, 198, 116, 0.14);
  --f21-expenses-text: #d4b8f0;
  --f21-expenses-active-bg: rgba(180, 140, 220, 0.16);
  --f21-area-accent: #2dd4bf;
  --f21-area-glow: rgba(45, 212, 191, 0.18);
}

[data-bs-theme="dark"] {
  --f21-topbar-bg: linear-gradient(118deg, #0c1424 0%, #123347 55%, #0a4a42 100%);
  --f21-sidebar-bg: #0a101a;
  --f21-sidebar-border: rgba(255, 255, 255, 0.05);
}

/* Chrome tints by section (body data-nav-area from LayoutControllerAdvice) */
.floor21-body[data-nav-area="overview"] {
  --f21-topbar-bg: linear-gradient(118deg, #152a52 0%, #1e4d6b 52%, #0d6e62 100%);
  --f21-sidebar-bg: linear-gradient(175deg, #1a2a42 0%, #121c2e 62%);
  --f21-area-accent: #2dd4bf;
  --f21-area-glow: rgba(45, 212, 191, 0.22);
}

.floor21-body[data-nav-area="property"] {
  --f21-topbar-bg: linear-gradient(118deg, #1a3352 0%, #2d4a62 48%, #3a5240 100%);
  --f21-sidebar-bg: linear-gradient(175deg, #1b2838 0%, #152218 42%, #121c2e 100%);
  --f21-area-accent: #8fb4d9;
  --f21-area-glow: rgba(143, 180, 217, 0.2);
}

.floor21-body[data-nav-area="sales"] {
  --f21-topbar-bg: linear-gradient(118deg, #1a2f5c 0%, #1e5a7a 55%, #157a7a 100%);
  --f21-sidebar-bg: linear-gradient(175deg, #162238 0%, #12303a 50%, #121c2e 100%);
  --f21-area-accent: #5eb8e8;
  --f21-area-glow: rgba(94, 184, 232, 0.2);
}

.floor21-body[data-nav-area="receipts"] {
  --f21-topbar-bg: linear-gradient(118deg, #152a52 0%, #1a5c48 60%, #0d6e52 100%);
  --f21-sidebar-bg: linear-gradient(175deg, #142a28 0%, #121f2a 55%, #121c2e 100%);
  --f21-area-accent: #6ee7b7;
  --f21-area-glow: rgba(110, 231, 183, 0.18);
}

.floor21-body[data-nav-area="slabs"] {
  --f21-topbar-bg: linear-gradient(118deg, #2a2548 0%, #1e4d6b 50%, #1a5568 100%);
  --f21-sidebar-bg: linear-gradient(175deg, #1e1c32 0%, #152535 55%, #121c2e 100%);
  --f21-area-accent: #a5b4fc;
  --f21-area-glow: rgba(165, 180, 252, 0.18);
}

.floor21-body[data-nav-area="banking"] {
  --f21-topbar-bg: linear-gradient(118deg, #0f1e38 0%, #1a3a5c 55%, #243650 100%);
  --f21-sidebar-bg: linear-gradient(175deg, #121c2e 0%, #0f1a28 100%);
  --f21-area-accent: #94a3b8;
  --f21-area-glow: rgba(148, 163, 184, 0.16);
}

.floor21-body[data-nav-area="vault"] {
  --f21-topbar-bg: linear-gradient(118deg, #2a2010 0%, #4a3a18 45%, #1e4d4a 100%);
  --f21-sidebar-bg: linear-gradient(175deg, #2a2218 0%, #1a2420 50%, #121c2e 100%);
  --f21-area-accent: #f0c674;
  --f21-area-glow: rgba(240, 198, 116, 0.2);
}

.floor21-body[data-nav-area="expenses"] {
  --f21-topbar-bg: linear-gradient(118deg, #2a1a3a 0%, #3d2a5a 50%, #1e3a52 100%);
  --f21-sidebar-bg: linear-gradient(175deg, #221a2e 0%, #1a2230 55%, #121c2e 100%);
  --f21-area-accent: #c4a0e8;
  --f21-area-glow: rgba(196, 160, 232, 0.18);
}

.floor21-body[data-nav-area="platform"] {
  --f21-topbar-bg: linear-gradient(118deg, #1f1838 0%, #2d3a6b 55%, #1a4558 100%);
  --f21-sidebar-bg: linear-gradient(175deg, #1c1830 0%, #152030 55%, #0a101a 100%);
  --f21-area-accent: #818cf8;
  --f21-area-glow: rgba(129, 140, 248, 0.2);
}

[data-bs-theme="dark"] .floor21-body[data-nav-area="overview"] {
  --f21-topbar-bg: linear-gradient(118deg, #0c1424 0%, #123347 55%, #0a4a42 100%);
  --f21-sidebar-bg: linear-gradient(175deg, #101828 0%, #0a101a 100%);
}

[data-bs-theme="dark"] .floor21-body[data-nav-area="property"] {
  --f21-topbar-bg: linear-gradient(118deg, #121f32 0%, #1e3545 50%, #243528 100%);
  --f21-sidebar-bg: linear-gradient(175deg, #141c24 0%, #101a14 55%, #0a101a 100%);
}

[data-bs-theme="dark"] .floor21-body[data-nav-area="sales"] {
  --f21-topbar-bg: linear-gradient(118deg, #101c38 0%, #143848 55%, #0f4040 100%);
}

[data-bs-theme="dark"] .floor21-body[data-nav-area="receipts"] {
  --f21-topbar-bg: linear-gradient(118deg, #0c1424 0%, #123830 60%, #0a4038 100%);
}

[data-bs-theme="dark"] .floor21-body[data-nav-area="slabs"] {
  --f21-topbar-bg: linear-gradient(118deg, #181528 0%, #123040 55%, #103848 100%);
}

[data-bs-theme="dark"] .floor21-body[data-nav-area="vault"] {
  --f21-topbar-bg: linear-gradient(118deg, #1a1408 0%, #322810 45%, #123838 100%);
}

[data-bs-theme="dark"] .floor21-body[data-nav-area="expenses"] {
  --f21-topbar-bg: linear-gradient(118deg, #181020 0%, #281838 50%, #122838 100%);
}

[data-bs-theme="dark"] .floor21-body[data-nav-area="platform"] {
  --f21-topbar-bg: linear-gradient(118deg, #141020 0%, #1e2848 55%, #123040 100%);
}

.floor21-body {
  overflow-x: hidden;
  --f21-page-heading-color: color-mix(in srgb, var(--f21-area-accent) 58%, #1a2332 42%);
  --f21-section-heading-color: color-mix(in srgb, var(--f21-area-accent) 44%, var(--bs-secondary-color) 56%);
  --f21-card-header-color: color-mix(in srgb, var(--f21-area-accent) 52%, var(--bs-body-color) 48%);
}

[data-bs-theme="dark"] .floor21-body {
  --f21-page-heading-color: color-mix(in srgb, var(--f21-area-accent) 84%, #ffffff 16%);
  --f21-section-heading-color: color-mix(in srgb, var(--f21-area-accent) 68%, var(--bs-secondary-color) 32%);
  --f21-card-header-color: color-mix(in srgb, var(--f21-area-accent) 76%, #ffffff 24%);
}

/* Dark theme: deep navy content canvas (menu chrome unchanged) */
[data-bs-theme="dark"] body.floor21-body {
  background-color: #0f1923;
}

[data-bs-theme="dark"] .floor21-panel {
  --f21-content-bg: #0f1923;
  --f21-content-surface: #152035;
  --f21-content-surface-alt: #1a2840;
  --bs-body-bg: var(--f21-content-bg);
  --bs-tertiary-bg: var(--f21-content-bg);
  --bs-secondary-bg: var(--f21-content-surface);
  --bs-card-bg: var(--f21-content-surface);
  --bs-border-color: rgba(100, 130, 175, 0.22);
  background-color: var(--f21-content-bg);
}

.floor21-shell {
  flex: 1 1 auto;
  min-height: 0;
  align-items: stretch;
  position: relative;
  z-index: 1;
}

/* Top bar stays above shell so profile dropdown is not covered by main content */
body > header {
  position: relative;
  z-index: 1040;
  flex-shrink: 0;
}

/* Top menu bar (background textures in floor21-chrome.css) */
.floor21-topbar {
  min-height: var(--f21-topbar-height);
  border-bottom: 1px solid var(--f21-topbar-border);
  box-shadow: 0 4px 18px rgba(8, 20, 40, 0.28);
  overflow: visible;
}

.floor21-topbar .container-fluid {
  position: relative;
  z-index: 2;
  overflow: visible;
}

.floor21-topbar__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.floor21-topbar__logo {
  display: block;
  height: 2.125rem;
  width: auto;
  max-width: min(9.5rem, 42vw);
  border-radius: 0.4rem;
  background: #fff;
  padding: 0.12rem 0.45rem;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 2px 8px rgba(8, 20, 40, 0.2);
}

.floor21-topbar .text-white-50 {
  color: rgba(255, 255, 255, 0.72) !important;
}

.floor21-topbar .btn-outline-light {
  border-color: rgba(255, 255, 255, 0.45);
  color: #fff;
}

.floor21-topbar .btn-outline-light:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.65);
  color: #fff;
}

.floor21-profile-menu__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  max-width: 14rem;
}

.floor21-profile-menu__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 50%;
  font-size: 0.72rem;
  font-weight: 700;
  color: #0f2744;
  background: linear-gradient(145deg, #7eeadb, #c4f0ff);
}

.floor21-profile-menu__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 9rem;
}

.floor21-profile-menu {
  position: relative;
}

.floor21-profile-menu__panel,
.floor21-profile-menu .dropdown-menu,
body > .dropdown-menu.floor21-profile-menu__panel {
  min-width: 12rem;
  z-index: var(--bs-dropdown-zindex, 2000) !important;
  position: fixed !important;
  background-color: var(--bs-dropdown-bg, var(--bs-body-bg)) !important;
  color: var(--bs-dropdown-link-color, var(--bs-body-color));
  border: 1px solid var(--bs-border-color-translucent, rgba(0, 0, 0, 0.15));
  box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.4);
  padding: 0.35rem 0;
  max-height: min(80vh, 24rem);
  overflow-y: auto;
}

.floor21-profile-menu .dropdown-header {
  color: var(--bs-dropdown-header-color, var(--bs-secondary-color));
}

.floor21-profile-menu .dropdown-item {
  font-size: 0.9rem;
  color: var(--bs-dropdown-link-color, inherit);
}

.floor21-profile-menu .dropdown-item:hover,
.floor21-profile-menu .dropdown-item:focus {
  color: var(--bs-dropdown-link-hover-color, var(--bs-emphasis-color));
  background-color: var(--bs-dropdown-link-hover-bg, var(--bs-tertiary-bg));
}

.floor21-profile-menu .dropdown-item.text-danger {
  color: var(--bs-danger) !important;
}

.floor21-profile-menu .dropdown-item.text-danger:hover,
.floor21-profile-menu .dropdown-item.text-danger:focus {
  color: #fff !important;
  background-color: var(--bs-danger);
}

.floor21-profile-menu form .dropdown-item[type="submit"] {
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
}

.floor21-impersonation-banner {
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
  color: #1a1a1a;
  font-weight: 500;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

/* Side menu (textures: floor21-chrome.css) — Ice blue nav palette */
.floor21-sidebar {
  width: var(--f21-sidebar-width);
  max-width: 100%;
  overflow-y: auto;
  position: sticky;
  top: 0;
  align-self: flex-start;
  max-height: calc(100vh - var(--f21-topbar-height));
  border-right: 1px solid rgba(100, 130, 180, 0.18);
  padding: 0.65rem 0.55rem 1rem;
  isolation: isolate;
  --f21-nav-text: #1e3a5f;
  --f21-nav-muted: #5b6f8c;
  --f21-nav-hover-bg: rgba(59, 130, 246, 0.1);
  --f21-nav-active-bg: #d1fae5;
  --f21-nav-active-text: #166534;
  --f21-nav-active-accent: #22c55e;
  --f21-nav-bullet: rgba(100, 130, 180, 0.5);
}

[data-bs-theme="light"] .floor21-sidebar {
  --f21-nav-section-bg: rgba(100, 130, 180, 0.14);
  --f21-nav-section-text: #475569;
  --f21-nav-section-border: #4ade80;
  --f21-nav-section-active-bg: rgba(34, 197, 94, 0.14);
  --f21-vault-text: #9a6700;
  --f21-vault-active-bg: rgba(180, 120, 20, 0.14);
  --f21-expenses-text: #6d28d9;
  --f21-expenses-active-bg: rgba(109, 40, 217, 0.12);
}

[data-bs-theme="dark"] .floor21-sidebar {
  border-right-color: rgba(134, 168, 212, 0.14);
  --f21-nav-text: rgba(226, 232, 240, 0.92);
  --f21-nav-muted: rgba(148, 163, 184, 0.68);
  --f21-nav-hover-bg: rgba(255, 255, 255, 0.07);
  --f21-nav-active-bg: rgba(34, 197, 94, 0.2);
  --f21-nav-active-text: #bbf7d0;
  --f21-nav-active-accent: #4ade80;
  --f21-nav-bullet: rgba(134, 168, 212, 0.55);
  --f21-nav-section-bg: rgba(255, 255, 255, 0.06);
  --f21-nav-section-text: rgba(191, 219, 254, 0.88);
  --f21-nav-section-border: rgba(74, 222, 128, 0.55);
  --f21-nav-section-active-bg: rgba(34, 197, 94, 0.14);
}

.floor21-sidebar::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.floor21-sidebar > * {
  position: relative;
  z-index: 1;
}

.floor21-nav__section {
  margin: 0.85rem 0 0.4rem;
  padding: 0.42rem 0.65rem;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--f21-nav-section-text);
  background: var(--f21-nav-section-bg);
  border-radius: 0.35rem;
  border-left: 3px solid transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: border-color 0.15s ease, background 0.15s ease;
}

[data-bs-theme="light"] .floor21-nav__section {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .floor21-nav__section {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.floor21-nav__section.is-active {
  border-left-color: var(--f21-nav-section-border);
  background: var(--f21-nav-section-active-bg);
}

.floor21-nav__section:first-of-type {
  margin-top: 0.25rem;
}

.floor21-nav__link {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0.14rem 0;
  padding: 0.45rem 0.65rem;
  border-radius: 0.5rem;
  border-left: none;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--f21-nav-text);
  text-decoration: none;
  transition: background 0.12s ease, color 0.12s ease;
}

.floor21-nav__link::before {
  content: "";
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--f21-nav-bullet, rgba(160, 120, 90, 0.55));
}

.floor21-nav__link:hover,
.floor21-nav__link:focus-visible {
  color: var(--f21-nav-active-text);
  background: var(--f21-nav-hover-bg);
  text-decoration: none;
}

.floor21-nav__link.is-active {
  color: var(--f21-nav-active-text);
  background: var(--f21-nav-active-bg);
  font-weight: 600;
}

.floor21-nav__link.is-active::before {
  background: var(--f21-nav-active-accent);
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.45);
}

.floor21-nav__link--vault {
  color: var(--f21-vault-text);
}

.floor21-nav__link--vault:hover,
.floor21-nav__link--vault:focus-visible {
  color: #fff8e8;
  background: var(--f21-vault-active-bg);
}

.floor21-nav__link--vault.is-active {
  color: #fff3d6;
  background: rgba(240, 198, 116, 0.14);
}

.floor21-nav__link--vault.is-active::before {
  background: #f0c674;
  box-shadow: 0 0 8px rgba(240, 198, 116, 0.45);
}

.floor21-nav__link--expenses {
  color: var(--f21-expenses-text);
}

.floor21-nav__link--expenses:hover,
.floor21-nav__link--expenses:focus-visible {
  color: #f3ebff;
  background: var(--f21-expenses-active-bg);
}

.floor21-nav__link--sub {
  font-size: 0.8125rem;
  opacity: 0.92;
  padding-left: 1.35rem !important;
}

.floor21-nav__link--expenses.is-active {
  color: #f3ebff;
  background: rgba(196, 160, 232, 0.14);
}

.floor21-nav__link--expenses.is-active::before {
  background: #c4a0e8;
  box-shadow: 0 0 8px rgba(196, 160, 232, 0.45);
}

[data-bs-theme="light"] .floor21-nav__link--vault:hover,
[data-bs-theme="light"] .floor21-nav__link--vault:focus-visible {
  color: #7c4a03;
}

[data-bs-theme="light"] .floor21-nav__link--vault.is-active {
  color: #7c4a03;
  background: rgba(180, 120, 20, 0.16);
}

[data-bs-theme="light"] .floor21-nav__link--vault.is-active::before {
  background: #b45309;
  box-shadow: 0 0 6px rgba(180, 83, 9, 0.35);
}

[data-bs-theme="light"] .floor21-nav__link--expenses:hover,
[data-bs-theme="light"] .floor21-nav__link--expenses:focus-visible {
  color: #5b21b6;
}

[data-bs-theme="light"] .floor21-nav__link--expenses.is-active {
  color: #5b21b6;
  background: rgba(109, 40, 217, 0.14);
}

[data-bs-theme="light"] .floor21-nav__link--expenses.is-active::before {
  background: #7c3aed;
  box-shadow: 0 0 6px rgba(124, 58, 237, 0.35);
}

.floor21-panel {
  min-width: 0;
  background-color: var(--bs-tertiary-bg);
}

/* Page + section headings: nav-area accent, contrast tuned for light/dark theme */
.floor21-panel h1,
.floor21-panel .h1,
.floor21-panel h1.h3,
.floor21-panel h1.h4,
.modal .modal-title {
  color: var(--f21-page-heading-color);
}

.floor21-panel h2.h6,
.floor21-panel h3.h6,
.floor21-panel .card-header:not([class*="text-bg-"]),
.modal .modal-body h6:not(.small),
.modal .modal-body h6.text-primary {
  color: var(--f21-section-heading-color);
}

.floor21-panel .card-header:not([class*="text-bg-"]) {
  color: var(--f21-card-header-color);
  font-weight: 600;
}

@media (min-width: 768px) {
  .floor21-sidebar {
    min-height: calc(100vh - var(--f21-topbar-height));
    max-height: calc(100vh - var(--f21-topbar-height));
  }
}

#flat-grid {
  overflow: visible;
}

.flat-grid-shell {
  position: relative;
}

.flat-duplex-links-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 0;
}

.flat-duplex-link-outline {
  fill: rgba(111, 66, 193, 0.06);
  stroke: #7e57c2;
  stroke-width: 2.5;
  stroke-dasharray: 7 5;
}

.flat-duplex-link-label {
  fill: #6f42c1;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

[data-bs-theme="dark"] .flat-duplex-link-outline {
  fill: rgba(142, 107, 184, 0.12);
  stroke: #b39ddb;
}

[data-bs-theme="dark"] .flat-duplex-link-label {
  fill: #ce93d8;
}

.flat-grid-shell > .flat-grid-legend,
.flat-grid-shell > .flat-floor-row,
.flat-grid-shell > p {
  position: relative;
  z-index: 1;
}

.flat-grid-legend__dot--duplex {
  background: transparent;
  border: 2px dashed #7e57c2;
  border-radius: 4px;
  width: 0.85rem;
  height: 0.55rem;
}

[data-bs-theme="dark"] .flat-grid-legend__dot--duplex {
  border-color: #b39ddb;
}

.flat-grid-legend__dot--merge {
  background: transparent;
  border: 2px dashed #00897b;
  border-radius: 4px;
  width: 0.85rem;
  height: 0.55rem;
}

[data-bs-theme="dark"] .flat-grid-legend__dot--merge {
  border-color: #4db6ac;
}

.flat-merge-link-outline {
  fill: rgba(0, 137, 123, 0.06);
  stroke: #00897b;
  stroke-width: 2.5;
  stroke-dasharray: 7 5;
}

[data-bs-theme="dark"] .flat-merge-link-outline {
  fill: rgba(77, 182, 172, 0.12);
  stroke: #4db6ac;
}

#flat-grid > .flat-floor-row {
  overflow: visible;
}

.flat-floor-row {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.flat-floor-row__rail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}

.flat-floor-row__divider {
  flex: 1 1 auto;
  height: 1px;
  min-width: 2rem;
  background: rgba(var(--bs-body-color-rgb), 0.14);
}

.flat-grid-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 1.1rem;
  align-items: center;
  padding: 0.35rem 0.1rem 0.15rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--bs-secondary-color);
}

.flat-grid-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.flat-grid-legend__dot {
  width: 0.72rem;
  height: 0.72rem;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.2);
}

.flat-grid-legend__dot--available {
  background: #d1e7dd;
  border-color: #198754;
}

.flat-grid-legend__dot--hold {
  background: #fff3cd;
  border-color: #ffc107;
}

.flat-grid-legend__dot--booked {
  background: #cfe2ff;
  border-color: #0d6efd;
}

.flat-grid-legend__dot--deactivated {
  background: #f8d7da;
  border-color: #dc3545;
}

[data-bs-theme="dark"] .flat-grid-legend__dot {
  border-color: rgba(255, 255, 255, 0.35);
}

[data-bs-theme="dark"] .flat-grid-legend__dot--available {
  background: rgba(25, 135, 84, 0.25);
}

[data-bs-theme="dark"] .flat-grid-legend__dot--hold {
  background: rgba(255, 193, 7, 0.2);
}

[data-bs-theme="dark"] .flat-grid-legend__dot--booked {
  background: rgba(13, 110, 253, 0.28);
}

[data-bs-theme="dark"] .flat-grid-legend__dot--deactivated {
  background: rgba(220, 53, 69, 0.28);
}

.flat-card {
  box-sizing: border-box;
  position: relative;
  overflow: visible;
  width: 14.5rem;
  min-width: 11.5rem;
  max-width: 17rem;
  min-height: 11rem;
  border: none;
  border-radius: 0;
  cursor: pointer;
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  text-align: left;
  padding: 0;
  font-size: 0.9375rem;
  line-height: 1.3;
  background: transparent;
  box-shadow: none;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
  --flat-roof-dark: #1f9d73;
  --flat-roof-light: #5fd4a8;
  --flat-status-bg: #ecfdf5;
  --flat-status-fg: #059669;
}

/* One row per floor: cards shrink to fit — no row scrollbar */
.flat-card-row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: 1.15rem;
  width: 100%;
  min-width: 0;
  overflow: visible;
  padding-top: 0;
  padding-bottom: 2px;
}

.flat-card-row .flat-card {
  flex: 1 1 0;
  width: auto;
  min-width: 11rem;
  max-width: 17rem;
  height: auto;
}

.flat-card-row > .flat-parking-section--split.flat-parking-section--configured,
.flat-card-row > .flat-parking-section--resizable {
  flex: 0 0 auto;
  align-self: flex-start;
  width: fit-content;
  max-width: none;
}

.flat-card:not(.flat-parking):not(.flat-amenity):not(.flat-duplex-part):not(.flat-merge-part) {
  --flat-card-border: #94a3b8;
  min-height: 0;
  height: auto;
  align-self: flex-start;
  border: 2px solid var(--flat-card-border);
  border-radius: 10px;
  overflow: hidden;
}

.flat-card-roof {
  display: none;
}

.flat-card-roof__peak {
  position: relative;
  width: 100%;
  height: 1.55rem;
  flex: 0 0 1.55rem;
}

.flat-card-roof__shape {
  width: 100%;
  height: 100%;
  background: linear-gradient(
    118deg,
    var(--flat-roof-dark) 0%,
    var(--flat-roof-dark) 46%,
    var(--flat-roof-light) 46%,
    var(--flat-roof-light) 100%
  );
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  border-radius: 2px 2px 0 0;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.08);
}

.flat-card-roof__windows {
  position: absolute;
  left: 50%;
  top: 0.68rem;
  transform: translateX(-50%);
  display: flex;
  gap: 0.34rem;
  z-index: 2;
}

.flat-card-roof__windows span {
  display: block;
  width: 1.1rem;
  height: 0.32rem;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.42);
}

.flat-card-roof__bricks {
  display: flex;
  align-items: center;
  gap: 0.28rem;
  width: 100%;
  box-sizing: border-box;
  padding: 0.14rem 0 0.16rem;
}

.flat-card-roof__bricks span {
  display: block;
  flex: 1 1 0;
  height: 0.44rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--flat-roof-light) 68%, #ffffff);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.flat-card-roof__brick-extra {
  display: none;
}

.flat-card-roof__bricks--three .flat-card-roof__brick-extra {
  display: block;
}

.flat-card-body {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 0.65rem 0.65rem 0.5rem;
  flex: 1 1 auto;
  min-height: 7.75rem;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.flat-card:not(.flat-parking):not(.flat-amenity):not(.flat-duplex-part):not(.flat-merge-part) .flat-card-body {
  flex: 0 0 auto;
  height: 7.75rem;
  min-height: 7.75rem;
  max-height: 7.75rem;
  overflow: hidden;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding-bottom: 0.4rem;
}

.flat-card:not(.flat-parking):not(.flat-amenity):not(.flat-duplex-part):not(.flat-merge-part) .flat-card-status {
  border-radius: 0;
  margin-top: 0;
  flex: 0 0 auto;
  padding: 0.28rem 0.5rem;
  min-height: 0;
  line-height: 1.15;
}

.flat-card-inner {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  gap: 0.24rem;
  overflow: hidden;
}

.flat-card-row .flat-card-inner {
  gap: 0.2rem;
}

.flat-card-head {
  display: none;
}

.flat-card-headline {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem;
  min-width: 0;
  flex: 0 0 auto;
}

.flat-card-owner {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0.12rem;
  min-width: 0;
  min-height: 3.45rem;
  max-height: 4.1rem;
  margin-top: 0.12rem;
  padding-top: 0;
  border-top: none;
  text-align: left;
  overflow: hidden;
}

.flat-card-owner.is-blank {
  opacity: 0;
  min-height: 3.45rem;
  max-height: 4.1rem;
  pointer-events: none;
}

.flat-card-status {
  margin-top: auto;
  border-radius: 8px;
  padding: 0.44rem 0.5rem;
  text-align: center;
  background: var(--flat-status-bg);
  flex: 0 0 auto;
  min-height: 1.85rem;
}

.flat-card-status__label {
  display: block;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--flat-status-fg);
  line-height: 1.15;
}

.flat-card-partner {
  display: flex;
  align-items: baseline;
  gap: 0.28rem;
  min-width: 0;
  flex: 0 0 auto;
  margin-top: 0.02rem;
}

.flat-partner-label {
  flex: 0 0 auto;
  font-size: 0.58rem;
  font-weight: 600;
  color: #64748b;
  line-height: 1.2;
  white-space: nowrap;
}

.flat-partner-tag {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.62rem;
  font-weight: 600;
  color: #6366f1;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flat-status-tag {
  display: none;
}

.flat-owner-name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-weight: 700;
  font-size: 0.88rem;
  line-height: 1.28;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  color: #0f172a;
}

.flat-owner-label {
  display: block;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #b45309;
  line-height: 1.2;
  margin-bottom: 0.06rem;
}

.flat-owner-detail {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.28;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  color: #64748b;
}

.flat-number {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 800;
  font-size: 1.18rem;
  letter-spacing: 0.01em;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #0f172a;
}

.flat-type {
  display: block;
  flex: 0 0 auto;
  margin-top: 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: #64748b;
  max-width: 45%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
}

.flat-card-row .flat-number {
  font-size: 1.14rem;
}

.flat-card-row .flat-type {
  font-size: 0.8rem;
}

.flat-card-row .flat-owner-name {
  font-size: 0.86rem;
}

.flat-card-row .flat-owner-detail {
  font-size: 0.78rem;
}

.flat-card-row .flat-card-owner,
.flat-card-row .flat-card-owner.is-blank {
  min-height: 3.35rem;
  max-height: 3.95rem;
}

.flat-floor-plan-link {
  display: inline-block;
  margin-top: 0.18rem;
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--bs-link-color);
  text-decoration: underline;
  cursor: pointer;
}

button.flat-floor-plan-link {
  border: none;
  background: transparent;
  padding: 0;
  font: inherit;
  text-align: center;
}

.flat-floor-plan-link:hover {
  color: var(--bs-link-hover-color);
}

.flat-floor-plan-link--disabled,
.flat-floor-plan-link:disabled {
  color: var(--bs-secondary-color) !important;
  text-decoration: none !important;
  cursor: not-allowed !important;
  opacity: 0.55;
  pointer-events: none;
}

.flat-card--other-partner .flat-floor-plan-link {
  pointer-events: none;
  color: var(--bs-secondary-color) !important;
  text-decoration: none !important;
  cursor: not-allowed !important;
  opacity: 0.55;
}

/* Non-clickable label on restricted flats (not a link — no underline / pointer) */
.flat-floor-plan-muted {
  display: inline-block;
  margin-top: 0.18rem;
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--bs-secondary-color);
  text-decoration: none;
  cursor: default;
  opacity: 0.65;
  pointer-events: none;
  user-select: none;
}

.flat-card-row .flat-floor-plan-link {
  font-size: 0.65rem;
  margin-top: 0.12rem;
}

.flat-quick-link {
  display: inline-block;
  margin-top: 0.2rem;
  padding: 0;
  border: none;
  background: transparent;
  font-size: 0.69rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--bs-link-color);
  text-decoration: underline;
  cursor: pointer;
}

.flat-quick-link--sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.flat-card-row .flat-quick-link {
  font-size: 0.64rem;
}

.flat-quick-link:hover {
  color: var(--bs-link-hover-color);
}

.flat-parking-links-list__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.35rem 0.5rem;
  margin-bottom: 0.25rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 0.35rem;
  background: rgba(var(--bs-body-color-rgb), 0.03);
}

.flat-parking-links-list__item span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flat-details-parking-links h6 {
  font-size: 0.85rem;
  font-weight: 600;
}

.flat-details-type-floor__value {
  min-height: calc(1.5em + 0.5rem + 2px);
  display: flex;
  align-items: center;
  line-height: 1.3;
}

.flat-details-type-floor .admin-edit-field.form-select {
  margin-top: 0;
}

.flat-details-parking-links .flat-parking-links-list__item {
  font-size: 0.875rem;
}

.flat-details-modal-dialog {
  max-width: min(94vw, 680px);
}

.flat-details-client-panel {
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--bs-border-color-translucent, var(--bs-border-color));
  border-left: 3px solid rgba(var(--bs-primary-rgb), 0.35);
  border-radius: 0.375rem;
  background: var(--bs-tertiary-bg);
}

.flat-details-client-panel__name {
  color: var(--bs-emphasis-color, var(--bs-body-color));
  font-weight: 600;
}

.flat-details-client-panel__header .text-muted,
.flat-details-client-panel__meta dt,
#flat-details-modal #panel-client-detail {
  color: var(--bs-secondary-color);
}

.flat-details-client-panel__meta dt {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.1rem;
}

.flat-details-client-panel__meta dd {
  color: var(--bs-body-color);
  font-weight: 500;
}

[data-bs-theme="dark"] .flat-details-client-panel {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
  border-left-color: rgba(var(--bs-primary-rgb), 0.45);
}

[data-bs-theme="dark"] .flat-details-client-panel__meta dd {
  color: rgba(255, 255, 255, 0.88);
}

[data-bs-theme="dark"] .flat-details-client-panel #client-info-btn {
  --bs-btn-color: rgba(var(--bs-primary-rgb), 0.9);
  --bs-btn-border-color: rgba(var(--bs-primary-rgb), 0.45);
  --bs-btn-hover-bg: rgba(var(--bs-primary-rgb), 0.12);
  --bs-btn-hover-border-color: rgba(var(--bs-primary-rgb), 0.65);
}

#flat-details-modal .flat-details-save-notice {
  font-weight: 600;
  border-width: 1px;
}

#column-type-defaults-modal .flat-details-save-notice {
  font-weight: 600;
  border-width: 1px;
}

#unit-type-defaults-modal .flat-details-save-notice {
  font-weight: 600;
  border-width: 1px;
}

#flat-details-modal .modal-body {
  padding-top: 0.65rem;
  padding-bottom: 0.85rem;
}

#flat-details-modal .modal-body > .row.mb-3 {
  margin-bottom: 0.75rem !important;
}

#flat-details-modal #flat-admin-panel > p.text-muted.small {
  line-height: 1.45;
}

.flat-details-area-unit__select {
  width: auto;
  min-width: 9.5rem;
  max-width: 11.5rem;
  flex: 0 1 auto;
}

.floor21-area-unit-toggle {
  display: inline-flex;
  border: 1px solid var(--bs-border-color);
  border-radius: 999px;
  padding: 2px;
  background: var(--bs-body-bg);
  gap: 2px;
  flex-shrink: 0;
}

.floor21-area-unit-toggle__btn {
  border: 0;
  background: transparent;
  color: var(--bs-secondary-color);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  min-width: 3.5rem;
  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.floor21-area-unit-toggle__btn:hover {
  color: var(--bs-body-color);
}

.floor21-area-unit-toggle__btn.is-active {
  background: var(--bs-primary);
  color: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

.floor21-area-alt-hint {
  min-height: 1.1rem;
  line-height: 1.2;
  font-size: 0.75rem;
}

.floor21-area-field .floor21-area-dual-display,
.floor21-area-dual-field .floor21-area-dual-display {
  font-weight: 500;
  line-height: 1.35;
}

.floor21-area-field-edit__row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}

.floor21-area-field-edit__input,
.floor21-area-field-edit__row > input[data-area-input] {
  flex: 0 0 50%;
  width: 50%;
  max-width: 50%;
  min-width: 0;
  font-weight: 600;
  font-size: 0.9375rem;
}

.floor21-area-field-edit__row .floor21-area-unit-toggle {
  flex: 0 0 auto;
  align-self: center;
}

.floor21-area-field .floor21-area-unit-toggle {
  flex-shrink: 0;
}

/* Modals teleported to body in flat-grid.js; keep above shell (z-index 1) and backdrop */
#parking-link-modal.modal.modal--stacked-over-details {
  z-index: 1085;
}

#flat-details-modal.modal,
#floor-plan-modal.modal,
#flat-add-modal.modal,
#unit-type-defaults-modal.modal,
#column-type-defaults-modal.modal,
#parking-config-modal.modal,
#ground-floor-config-modal.modal,
#parking-link-modal.modal,
#building-snapshot-modal.modal,
#project-snapshot-modal.modal {
  z-index: 1060;
  pointer-events: auto;
}

#building-snapshot-modal.modal,
#project-snapshot-modal.modal {
  z-index: 1070;
}

#building-snapshot-modal .modal-content,
#building-snapshot-modal .modal-content button,
#building-snapshot-modal .bld-cell[data-flat-id],
#project-snapshot-modal .modal-content,
#project-snapshot-modal .modal-content button,
#project-snapshot-modal .bld-cell[data-flat-id],
#project-snapshot-modal .parking-plan__slot,
#project-snapshot-modal .shop-plan__slot {
  pointer-events: auto;
}

#unit-type-defaults-modal .modal-content,
#unit-type-defaults-modal .modal-content input,
#unit-type-defaults-modal .modal-content select,
#unit-type-defaults-modal .modal-content button,
#column-type-defaults-modal .modal-content,
#column-type-defaults-modal .modal-content input,
#column-type-defaults-modal .modal-content select,
#column-type-defaults-modal .modal-content button,
#ground-floor-config-modal .modal-content,
#ground-floor-config-modal .modal-content input,
#ground-floor-config-modal .modal-content select,
#ground-floor-config-modal .modal-content button,
#parking-config-modal .modal-content,
#parking-config-modal .modal-content input,
#parking-config-modal .modal-content select,
#parking-config-modal .modal-content button {
  pointer-events: auto;
}

body.modal-open .modal-backdrop {
  z-index: 1055;
}

/* Admin modals moved to body from layout.js (turbo-frame safe) */
body > .modal {
  z-index: 1060;
  pointer-events: auto;
}

body > .modal .modal-content,
body > .modal .modal-content a,
body > .modal .modal-content button {
  pointer-events: auto;
}

.floor-plan-modal-dialog {
  max-width: min(92vw, 560px);
}

.flat-card-buyertip:has(.flat-card-buyertip__row)::before {
  content: none;
  display: none;
}

.flat-card-buyertip__lead {
  display: block;
  margin-bottom: 0.18rem;
  min-width: 0;
}

.flat-card-buyertip__title {
  display: inline;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #b45309;
  margin: 0 0.35rem 0 0;
}

.flat-card-buyertip__title::after {
  content: ":";
}

.flat-card-buyertip__name {
  display: inline;
  font-size: 0.76rem;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.2;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  vertical-align: bottom;
}

.flat-card-buyertip__row {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 0.25rem;
  font-size: 0.62rem;
  line-height: 1.25;
  color: #475569;
  margin: 0;
  min-width: 0;
  max-width: 100%;
  white-space: nowrap;
}

.flat-card-buyertip__row span:first-child {
  flex-shrink: 0;
  opacity: 0.85;
  font-weight: 600;
}

.flat-card-buyertip__row span:first-child::after {
  content: ":";
}

.flat-card-buyertip__row span:last-child {
  text-align: left;
  word-break: normal;
}

.flat-card-buyertip__email {
  font-size: 0.62rem;
  max-width: 5.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.flat-card-buyertip {
  display: block;
  box-sizing: border-box;
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translate(-50%, 8px);
  z-index: 50;
  width: 16rem;
  aspect-ratio: 16 / 9;
  max-width: min(16rem, 92vw);
  min-width: 13rem;
  padding: 0.42rem 0.55rem 0.48rem;
  font-size: 0.74rem;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.01em;
  white-space: normal;
  text-align: left;
  color: #1c1917;
  background: linear-gradient(155deg, #fffbeb 0%, #fef3c7 48%, #fff7ed 100%);
  border: 1px solid rgba(217, 119, 6, 0.35);
  border-left: 4px solid #d97706;
  border-radius: 12px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.85) inset,
    0 10px 28px -8px rgba(180, 83, 9, 0.28),
    0 4px 14px rgba(15, 23, 42, 0.14);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.2s ease,
    transform 0.22s cubic-bezier(0.34, 1.2, 0.64, 1),
    visibility 0.2s;
}

.flat-card-buyertip::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -7px;
  transform: translateX(-50%);
  border-style: solid;
  border-width: 7px 8px 0 8px;
  border-color: #fef3c7 transparent transparent transparent;
  filter: drop-shadow(0 2px 2px rgba(180, 83, 9, 0.18));
}

.flat-card--has-buyer:hover .flat-card-buyertip {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.flat-card--other-partner.flat-card--has-buyer:hover .flat-card-buyertip,
.flat-card[data-bookable="false"]:not(.flat-parking).flat-card--has-buyer:hover .flat-card-buyertip {
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 8px);
}

.flat-card:hover {
  transform: translateY(-2px);
}

.flat-card:not(.flat-parking):not(.flat-amenity):not(.flat-duplex-part):not(.flat-merge-part):hover {
  border-color: #64748b;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.1);
}

.flat-card:hover .flat-card-body {
  box-shadow: none;
}

.flat-card--other-partner:not(.flat-parking),
.flat-card[data-bookable="false"]:not(.flat-parking) {
  pointer-events: none;
}

.flat-card--focused {
  outline: 3px solid var(--bs-warning);
  outline-offset: 2px;
  z-index: 5;
}

.flat-card--focused .flat-card-body {
  box-shadow: 0 0 0 4px rgba(var(--bs-warning-rgb), 0.35);
}

/* Flat chosen in the booking panel */
.flat-card.flat-card--booking-selected {
  background: transparent !important;
}

.flat-card.flat-card--booking-selected {
  border-color: #e8590c !important;
  box-shadow: 0 0 0 2px rgba(232, 89, 12, 0.35);
}

.flat-card.flat-card--booking-selected .flat-card-body {
  box-shadow: none;
}

.flat-card.flat-card--booking-selected .flat-type,
.flat-card.flat-card--booking-selected .flat-owner-detail {
  color: #64748b;
}

.flat-card.flat-card--booking-selected .flat-owner-name {
  color: #0f172a;
}

.flat-available {
  --flat-roof-dark: #1f9d73;
  --flat-roof-light: #5fd4a8;
  --flat-card-fill: #d1e7dd;
  --flat-status-bg: var(--flat-card-fill);
  --flat-status-fg: #0f5132;
}

.flat-card.flat-available:not(.flat-parking):not(.flat-amenity):not(.flat-duplex-part):not(.flat-merge-part) {
  background: var(--flat-card-fill);
  --flat-card-border: #198754;
}

.flat-card.flat-available:not(.flat-parking):not(.flat-amenity):not(.flat-duplex-part):not(.flat-merge-part)
  .flat-card-body {
  background: transparent;
}

.flat-card.flat-available:not(.flat-parking):not(.flat-amenity):not(.flat-duplex-part):not(.flat-merge-part)
  .flat-card-status {
  background: transparent;
  border-top: 1px solid rgba(25, 135, 84, 0.22);
}

.flat-card.flat-available.flat-card--other-partner .flat-card-body,
.flat-card.flat-available[data-bookable="false"]:not(.flat-parking):not(.flat-amenity):not(.flat-duplex-part):not(
    .flat-merge-part
  )
  .flat-card-body {
  background: transparent !important;
}

.flat-booked {
  --flat-roof-dark: #3b82c4;
  --flat-roof-light: #7eb8ea;
  --flat-status-bg: #eff6ff;
  --flat-status-fg: #2563eb;
  cursor: default;
}

.flat-booked .flat-owner-name {
  color: #0f172a;
}

.flat-booked .flat-owner-detail {
  color: #64748b;
}

.flat-hold {
  --flat-roof-dark: #d97706;
  --flat-roof-light: #fbbf24;
  --flat-status-bg: #fffbeb;
  --flat-status-fg: #b45309;
}

.flat-deactivated {
  --flat-roof-dark: #dc2626;
  --flat-roof-light: #f87171;
  --flat-status-bg: #fef2f2;
  --flat-status-fg: #b91c1c;
}

.flat-deactivated .flat-owner-name {
  color: #991b1b;
}

.flat-card.flat-parking,
.flat-card.flat-amenity,
.flat-card.flat-duplex-part,
.flat-card.flat-merge-part {
  min-height: 5.35rem;
  border-radius: 10px;
  border: 2px solid #dee2e6;
  padding: 0.45rem 0.6rem 0.45rem 0.5rem;
  background: #e2e3e5;
}

.flat-card.flat-parking .flat-card-roof,
.flat-card.flat-amenity .flat-card-roof,
.flat-card.flat-duplex-part .flat-card-roof,
.flat-card.flat-merge-part .flat-card-roof,
.flat-card.flat-parking .flat-card-status,
.flat-card.flat-amenity .flat-card-status,
.flat-card.flat-duplex-part .flat-card-status,
.flat-card.flat-merge-part .flat-card-status {
  display: none;
}

.flat-card.flat-parking .flat-card-body,
.flat-card.flat-amenity .flat-card-body,
.flat-card.flat-duplex-part .flat-card-body,
.flat-card.flat-merge-part .flat-card-body {
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  padding: 0;
  min-height: 0;
}

.flat-card.flat-parking .flat-card-inner,
.flat-card.flat-amenity .flat-card-inner,
.flat-card.flat-duplex-part .flat-card-inner,
.flat-card.flat-merge-part .flat-card-inner {
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
}

[data-bs-theme="dark"] .flat-deactivated {
  background: rgba(220, 53, 69, 0.28);
  border-color: #f199a0;
}

[data-bs-theme="dark"] .flat-deactivated .flat-owner-name {
  color: #ffd5d9;
}

.flat-parking {
  background: #e2e3e5;
  border-color: #6c757d;
  cursor: default;
}

.flat-parking-section {
  width: 100%;
  min-height: 5.5rem;
  border: 1px solid #6c757d;
  border-radius: 0.5rem;
  background: #e2e3e5;
  cursor: default;
}

.flat-parking-section--selected {
  box-shadow: inset 0 0 0 2px rgba(13, 110, 253, 0.55);
}

.flat-parking-section--active {
  box-shadow: inset 0 0 0 2px rgba(13, 110, 253, 0.65);
}

.flat-parking-section__layout {
  display: block;
  padding: 0.75rem 1rem;
}

.flat-parking-section--split {
  position: relative;
  width: fit-content;
  max-width: 100%;
}

.flat-parking-section.flat-parking-section--configured,
.flat-parking-section.flat-parking-section--split {
  width: fit-content;
  max-width: 100%;
}

.flat-parking-section--split .flat-parking-section__layout {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 0.75rem;
}

.flat-parking-section__summary {
  min-width: 0;
}

.flat-parking-section--split .flat-parking-section__summary {
  flex: 0 0 11rem;
  max-width: 40%;
}

.flat-parking-section__plan {
  display: none;
  min-width: 0;
}

.flat-parking-section--split .flat-parking-section__plan {
  display: block;
  flex: 0 0 auto;
  width: fit-content;
  max-width: calc(100% - 12rem);
  overflow-x: auto;
}

.flat-parking-section__plan-root {
  width: fit-content;
  max-width: 100%;
  min-width: 0;
}

.flat-parking-section--split .parking-plan__sheet:not(.parking-plan__sheet--grid) .parking-plan__slot {
  min-width: 2.1rem;
  max-width: 3.1rem;
}

.flat-parking-section--split .parking-plan__sheet:not(.parking-plan__sheet--grid) .parking-plan__bay {
  max-width: 2.85rem;
}

.flat-parking-section--split .parking-plan__sheet:not(.parking-plan__sheet--grid) .parking-plan__slot-no {
  font-size: 0.58rem;
}

.flat-parking-configure-link,
.ground-floor-configure-link {
  margin-top: 0.25rem;
  display: inline-block;
  font-size: 0.8125rem;
  text-decoration: none;
  flex-shrink: 0;
}

.flat-parking-layout-upload-link,
.flat-parking-layout-view-link {
  font-size: 0.8125rem;
  text-decoration: none;
}

.flat-parking-section__layout-links {
  margin-top: 0.15rem;
}

.ground-floor-layout-upload-link,
.ground-floor-layout-view-link,
.flat-ground-floor-section__layout-links .btn-link {
  font-size: 0.8125rem;
  text-decoration: none;
}

.flat-ground-floor-section__layout-links {
  margin-top: 0.15rem;
}

.flat-details-layout-links .btn-link {
  font-size: 0.8125rem;
  text-decoration: none;
}

.flat-parking-section__inner {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.75rem 1rem;
  height: 100%;
}

.flat-parking-section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1rem;
}

.flat-parking-section__title {
  font-weight: 600;
  font-size: 1rem;
}

.flat-parking-section__meta {
  color: #495057;
  font-size: 0.875rem;
}

.flat-parking-section__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-top: 0.35rem;
}

.flat-parking-section.flat-parking-section--resizable,
.flat-parking-section--resizable,
.flat-parking-section.floor21-resizable-panel,
.flat-ground-floor-section__panel.floor21-resizable-panel,
.flat-ground-floor-section__panel--resizable {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  vertical-align: top;
  width: auto;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
}

/* One panel: inner plan sheet has no extra border. */
.flat-parking-section--split.flat-parking-section--configured .parking-plan__sheet,
.flat-parking-section--split.flat-parking-section--configured .parking-plan__sheet--grid,
.flat-ground-floor-section__panel--resizable .shop-plan__sheet--grid,
.flat-ground-floor-section__panel.floor21-resizable-panel .shop-plan__sheet--grid {
  border: none;
  background: transparent;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  max-width: none;
}

.floor21-resizable-panel__scaler {
  width: 100%;
  height: 100%;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
}

.floor21-resizable-panel--measuring .floor21-resizable-panel__scaler {
  width: max-content;
  height: auto;
}

.floor21-resizable-panel .flat-parking-section__layout,
.floor21-resizable-panel .flat-ground-floor-section__layout {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
  align-items: stretch;
}

.floor21-resizable-panel .flat-parking-section__plan,
.floor21-resizable-panel .flat-ground-floor-section__plan {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.floor21-resizable-panel .flat-parking-section__plan-root,
.floor21-resizable-panel .flat-ground-floor-section__plan-root {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.floor21-resizable-panel .parking-plan__sheet--grid,
.floor21-resizable-panel .shop-plan__sheet--grid {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: none;
  display: flex;
  flex-direction: column;
}

.floor21-resizable-panel .parking-plan__layout-toolbar,
.floor21-resizable-panel .shop-plan__layout-toolbar {
  flex: 0 0 auto;
}

.floor21-resizable-panel .parking-plan__grid,
.floor21-resizable-panel .shop-plan__grid {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  max-width: none;
  grid-template-columns: repeat(var(--parking-grid-cols, 14), minmax(0, 1fr));
  grid-template-rows: repeat(var(--parking-grid-rows, 8), minmax(2.25rem, 1fr));
}

.floor21-resizable-panel .shop-plan__grid {
  grid-template-columns: repeat(var(--shop-grid-cols, 14), minmax(0, 1fr));
  grid-template-rows: repeat(var(--shop-grid-rows, 8), minmax(2.25rem, 1fr));
}

.floor21-resizable-panel .parking-plan__cell,
.floor21-resizable-panel .shop-plan__cell {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
}

.floor21-resizable-panel .parking-plan__sheet--grid .parking-plan__slot--vertical,
.floor21-resizable-panel .parking-plan__sheet--grid .parking-plan__slot--horizontal,
.floor21-resizable-panel .shop-plan__slot {
  width: 100%;
  height: 100%;
  max-width: none;
}

.floor21-resizable-panel--measuring .parking-plan__grid,
.floor21-resizable-panel--measuring .shop-plan__grid {
  width: fit-content;
  flex: 0 0 auto;
  grid-template-columns: repeat(var(--parking-grid-cols, 14), var(--parking-cell-width, 2.85rem));
  grid-template-rows: repeat(var(--parking-grid-rows, 8), var(--parking-cell-height, 3.5rem));
}

.floor21-resizable-panel--measuring .shop-plan__grid {
  grid-template-columns: repeat(var(--shop-grid-cols, 14), var(--shop-cell-width));
  grid-template-rows: repeat(var(--shop-grid-rows, 8), var(--shop-cell-height));
}

.floor21-resizable-panel--measuring .parking-plan__cell,
.floor21-resizable-panel--measuring .shop-plan__cell {
  width: var(--parking-cell-width, 2.85rem);
  height: var(--parking-cell-height, 3.5rem);
}

.floor21-resizable-panel--measuring .shop-plan__cell {
  width: var(--shop-cell-width);
  height: var(--shop-cell-height);
}

.floor21-resizable-panel--measuring .parking-plan__sheet--grid .parking-plan__slot--vertical {
  width: var(--parking-cell-width, 2.85rem);
  height: var(--parking-cell-height, 3.5rem);
}

.floor21-resizable-panel--measuring .parking-plan__sheet--grid .parking-plan__slot--horizontal {
  width: var(--parking-cell-height, 3.5rem);
  height: var(--parking-cell-width, 2.85rem);
}

.floor21-resizable-panel--measuring .shop-plan__slot {
  width: var(--shop-cell-width);
  height: var(--shop-cell-height);
}

.floor21-resizable-panel__handle {
  position: absolute;
  z-index: 7;
  touch-action: none;
}

.floor21-resizable-panel__handle--edge-right {
  top: 0;
  right: 0;
  width: 8px;
  height: 100%;
  cursor: ew-resize;
}

.floor21-resizable-panel__handle--edge-bottom {
  bottom: 0;
  left: 0;
  width: 100%;
  height: 8px;
  cursor: ns-resize;
}

.floor21-resizable-panel__handle--corner {
  right: 0;
  bottom: 0;
  width: 16px;
  height: 16px;
  cursor: nwse-resize;
  border-right: 2px solid #6c757d;
  border-bottom: 2px solid #6c757d;
  border-radius: 0 0 0.45rem 0;
  opacity: 0.75;
}

.floor21-resizable-panel__handle--corner:hover,
.floor21-resizable-panel--resizing .floor21-resizable-panel__handle--corner {
  opacity: 1;
}

.floor21-resizable-panel--resizing {
  user-select: none;
}

[data-bs-theme="dark"] .floor21-resizable-panel__handle--corner {
  border-right-color: #adb5bd;
  border-bottom-color: #adb5bd;
}

.flat-parking-section--resizable .flat-parking-section__summary,
.flat-ground-floor-section__panel.floor21-resizable-panel .flat-ground-floor-section__summary {
  flex: 0 0 11rem;
  max-width: none;
}

.flat-parking-section--resizable .flat-parking-section__plan,
.flat-ground-floor-section__panel.floor21-resizable-panel .flat-ground-floor-section__plan {
  max-width: none;
  overflow: visible;
}

.flat-parking-section--resizable:not(.floor21-resizable-panel) .flat-parking-section__plan {
  width: fit-content;
}

.flat-parking-section--pending {
  border-style: dashed;
}

.flat-parking-section--resizable .parking-plan__sheet--grid {
  --parking-car-scale: 1;
}

.flat-ground-floor-section__panel.floor21-resizable-panel .shop-plan__sheet--grid {
  --shop-car-scale: 1;
  --shop-parking-car-scale: 1;
}

.flat-parking-section__link {
  text-decoration: none;
}

.flat-parking-section__link:hover {
  text-decoration: underline;
}

.parking-plan__sheet {
  border: 2px solid #333;
  background: #f8f9fa;
  padding: 0.75rem;
  border-radius: 0.25rem;
}

.parking-plan__sheet--grid {
  --parking-cell-base-width: 3.6rem;
  --parking-cell-base-height: 4.75rem;
  --parking-car-scale: 1;
  --parking-cell-width: calc(var(--parking-cell-base-width) * var(--parking-car-scale, 1));
  --parking-cell-height: calc(var(--parking-cell-base-height) * var(--parking-car-scale, 1));
  width: fit-content;
  max-width: 100%;
  padding: 0.55rem;
  overflow: visible;
}

.parking-plan__layout-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.parking-plan__layout-hint {
  flex: 1 1 12rem;
}

.parking-plan__grid-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.parking-plan__row-toolbar {
  flex: 0 0 auto;
}

.parking-plan__col-toolbar {
  flex: 0 0 auto;
}

.parking-plan__grid-btn {
  white-space: nowrap;
}

.parking-plan__grid {
  display: grid;
  width: fit-content;
  max-width: 100%;
  grid-template-columns: repeat(var(--parking-grid-cols, 14), var(--parking-cell-width, 2.85rem));
  grid-template-rows: repeat(var(--parking-grid-rows, 8), var(--parking-cell-height, 3.5rem));
  gap: calc(3px * var(--parking-car-scale, 1));
  overflow: visible;
}

.parking-plan__grid--dragging .parking-plan__slot:not(.parking-plan__slot--dragging) {
  pointer-events: none;
}

.parking-plan__cell {
  border: 1.5px dashed #ced4da;
  border-radius: 0.375rem;
  width: var(--parking-cell-width, 2.85rem);
  height: var(--parking-cell-height, 3.5rem);
  min-height: var(--parking-cell-height, 3.5rem);
  z-index: 1;
  overflow: visible;
  background: transparent;
}

.parking-plan__cell--drag-over {
  background: rgba(13, 110, 253, 0.12);
  border-color: rgba(13, 110, 253, 0.55);
}

.parking-plan__sheet--grid .parking-plan__slot {
  max-width: none;
  min-width: 0;
  z-index: 2;
  align-self: center;
  justify-self: center;
  overflow: visible;
  container-type: size;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 0.0625rem;
  transition: transform 0.12s ease;
}

.parking-plan__sheet--grid .parking-plan__slot--vertical {
  width: var(--parking-cell-width, 2.85rem);
  height: var(--parking-cell-height, 3.5rem);
}

.parking-plan__sheet--grid .parking-plan__slot--horizontal {
  position: relative;
  width: var(--parking-cell-height, 3.5rem);
  height: var(--parking-cell-width, 2.85rem);
  transform: rotate(90deg);
  transform-origin: center center;
}

.parking-plan__sheet--grid .parking-plan__bay {
  max-width: 100%;
  width: 100%;
  flex: 1 1 0;
  min-height: 0;
  overflow: visible;
  border: none;
  border-radius: 0;
  box-sizing: border-box;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.parking-plan__sheet--grid .parking-plan__car-svg {
  display: block;
  width: auto;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  flex-shrink: 0;
  transform: none;
}

.parking-plan__slot--horizontal {
  overflow: visible;
  position: relative;
  container-type: size;
}

.parking-plan__sheet:not(.parking-plan__sheet--grid) .parking-plan__slot--horizontal .parking-plan__bay {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100cqh;
  height: 100cqw;
  min-height: 0;
  max-width: none;
  transform: translate(-50%, -50%) rotate(90deg);
  transform-origin: center center;
}

.parking-plan__sheet--grid .parking-plan__slot--horizontal .parking-plan__bay {
  position: relative;
  left: auto;
  top: auto;
  transform: none;
}

.parking-plan__sheet--grid .parking-plan__slot--horizontal .parking-plan__car-svg {
  transform: none;
}

.parking-plan__sheet--grid .parking-plan__slot-no {
  position: static;
  transform: none;
  flex: 0 0 auto;
  font-size: 0.625rem;
  font-weight: 500;
  color: var(--bs-secondary-color, #6c757d);
  text-shadow: none;
  line-height: 1;
}

.parking-plan__sheet--grid .parking-plan__slot--horizontal.parking-plan__slot--clickable:hover {
  transform: rotate(90deg) scale(1.06);
}

.parking-plan__sheet:not(.parking-plan__sheet--grid) .parking-plan__slot--horizontal .parking-plan__car-svg {
  position: relative;
  left: auto;
  top: auto;
  width: 100%;
  height: 100%;
  transform: scale(var(--parking-car-scale, 1));
  transform-origin: center center;
}

.parking-plan__sheet--grid .parking-plan__slot--horizontal .parking-plan__slot-no {
  transform: none;
}

.parking-plan__sheet:not(.parking-plan__sheet--grid) .parking-plan__slot--horizontal .parking-plan__slot-no {
  transform: translate(-50%, -50%) rotate(-90deg);
}

.parking-plan__slot--horizontal .parking-plan__slot-no {
  z-index: 3;
}

.flat-parking-section--split .parking-plan__slot--horizontal {
  max-width: none;
}

.flat-parking-section--split .parking-plan__slot--horizontal .parking-plan__bay {
  max-width: none;
}

.parking-plan__slot--dragging {
  opacity: 0.55;
}

.parking-plan__row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 0.2rem;
  min-height: 6.25rem;
  padding: 0.35rem 0.15rem;
  align-items: center;
}

.parking-plan__row--top {
  border-bottom: 1px dashed #adb5bd;
}

.parking-plan__row--top .parking-plan__car-svg {
  transform: rotate(180deg) scale(var(--parking-car-scale, 1));
  transform-origin: center center;
}

.parking-plan__slot {
  flex: 1 1 0;
  min-width: 2.5rem;
  max-width: 3.75rem;
  padding: 0;
  border: none;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.125rem;
  transition: transform 0.12s ease;
}

.parking-plan__bay {
  position: relative;
  width: 100%;
  max-width: 3.35rem;
  flex: 1 1 0;
  min-height: 0;
  height: 5.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.parking-plan__car-svg {
  width: auto;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  display: block;
  transform: scale(var(--parking-car-scale, 1));
  transform-origin: center center;
}

/* Top-down parking car (available = blue, booked = green) */
.parking-plan__car-wheel {
  fill: #042c53;
}

.parking-plan__car-shell {
  fill: #185fa5;
}

.parking-plan__car-hood {
  fill: #0c447c;
}

.parking-plan__car-glass-front {
  fill: #b5d4f4;
  opacity: 0.95;
}

.parking-plan__car-cabin {
  fill: #0c447c;
}

.parking-plan__car-glass-rear {
  fill: #b5d4f4;
  opacity: 0.8;
}

.parking-plan__car-light-front {
  fill: #e6f1fb;
}

.parking-plan__car-light-rear {
  fill: #85b7eb;
}

.parking-plan__car-bumper {
  fill: #042c53;
}

.parking-plan__car-label-bg {
  fill: #085041;
  opacity: 0.9;
}

.parking-plan__car-label-text {
  fill: #9fe1cb;
}

.parking-plan__slot-no {
  position: static;
  font-weight: 500;
  font-size: 0.625rem;
  line-height: 1;
  color: var(--bs-secondary-color, #6c757d);
  text-align: center;
  pointer-events: none;
}

.parking-plan__slot-no--booked {
  color: #1d9e75;
  font-weight: 700;
}

.parking-plan__slot--clickable {
  cursor: pointer;
}

/* Partner view: slots linked to another partner or otherwise not manageable. */
.parking-plan__slot--other-partner,
.parking-plan__slot[data-parking-restricted="true"],
.shop-plan__slot--parking.parking-plan__slot--other-partner,
.shop-plan__slot--parking[data-parking-restricted="true"] {
  opacity: 0.46;
  cursor: not-allowed;
  pointer-events: none;
}

.parking-plan__slot--other-partner .parking-plan__car-wheel,
.parking-plan__slot[data-parking-restricted="true"] .parking-plan__car-wheel {
  fill: #3a4652;
}

.parking-plan__slot--other-partner .parking-plan__car-shell,
.parking-plan__slot[data-parking-restricted="true"] .parking-plan__car-shell {
  fill: #5c6b7a;
}

.parking-plan__slot--other-partner .parking-plan__car-hood,
.parking-plan__slot--other-partner .parking-plan__car-cabin,
.parking-plan__slot[data-parking-restricted="true"] .parking-plan__car-hood,
.parking-plan__slot[data-parking-restricted="true"] .parking-plan__car-cabin {
  fill: #4a5662;
}

.parking-plan__slot--other-partner .parking-plan__car-glass-front,
.parking-plan__slot--other-partner .parking-plan__car-glass-rear,
.parking-plan__slot[data-parking-restricted="true"] .parking-plan__car-glass-front,
.parking-plan__slot[data-parking-restricted="true"] .parking-plan__car-glass-rear {
  fill: #8a96a3;
  opacity: 0.72;
}

.parking-plan__slot--other-partner .parking-plan__car-light-front,
.parking-plan__slot[data-parking-restricted="true"] .parking-plan__car-light-front {
  fill: #9aa5b0;
}

.parking-plan__slot--other-partner .parking-plan__car-light-rear,
.parking-plan__slot[data-parking-restricted="true"] .parking-plan__car-light-rear {
  fill: #7a8794;
}

.parking-plan__slot--other-partner .parking-plan__car-bumper,
.parking-plan__slot[data-parking-restricted="true"] .parking-plan__car-bumper {
  fill: #3a4652;
}

.parking-plan__slot--other-partner .shop-plan__car-body,
.parking-plan__slot[data-parking-restricted="true"] .shop-plan__car-body,
.shop-plan__slot--parking.parking-plan__slot--other-partner .shop-plan__car-body,
.shop-plan__slot--parking[data-parking-restricted="true"] .shop-plan__car-body {
  fill: #6c757d;
}

.parking-plan__slot--other-partner .shop-plan__car-roof,
.parking-plan__slot[data-parking-restricted="true"] .shop-plan__car-roof,
.shop-plan__slot--parking.parking-plan__slot--other-partner .shop-plan__car-roof,
.shop-plan__slot--parking[data-parking-restricted="true"] .shop-plan__car-roof {
  fill: #8a939c;
}

.parking-plan__slot--other-partner .shop-plan__car-wheel,
.parking-plan__slot[data-parking-restricted="true"] .shop-plan__car-wheel,
.shop-plan__slot--parking.parking-plan__slot--other-partner .shop-plan__car-wheel,
.shop-plan__slot--parking[data-parking-restricted="true"] .shop-plan__car-wheel {
  fill: #495057;
}

.parking-plan__slot--other-partner .parking-plan__slot-no,
.parking-plan__slot[data-parking-restricted="true"] .parking-plan__slot-no,
.shop-plan__slot--parking.parking-plan__slot--other-partner .shop-plan__slot-no,
.shop-plan__slot--parking[data-parking-restricted="true"] .shop-plan__slot-no {
  color: var(--bs-secondary-color);
}

.parking-plan__slot--other-partner.parking-plan__slot--clickable:hover,
.parking-plan__slot[data-parking-restricted="true"].parking-plan__slot--clickable:hover,
.shop-plan__slot--parking.parking-plan__slot--other-partner.shop-plan__slot--clickable:hover,
.shop-plan__slot--parking[data-parking-restricted="true"].shop-plan__slot--clickable:hover {
  transform: none;
}

.parking-plan__slot--clickable:hover {
  transform: scale(1.06);
}

.parking-plan__slot--selected {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
  z-index: 2;
}

.parking-plan__slot--clickable:hover .parking-plan__car-shell {
  fill: #1f6fbd;
}

.parking-plan__slot--linked .parking-plan__car-wheel {
  fill: #085041;
}

.parking-plan__slot--linked .parking-plan__car-shell {
  fill: #1d9e75;
}

.parking-plan__slot--linked .parking-plan__car-hood {
  fill: #17845f;
}

.parking-plan__slot--linked .parking-plan__car-glass-front {
  fill: #9fe1cb;
  opacity: 0.95;
}

.parking-plan__slot--linked .parking-plan__car-cabin {
  fill: #17845f;
}

.parking-plan__slot--linked .parking-plan__car-glass-rear {
  fill: #9fe1cb;
  opacity: 0.8;
}

.parking-plan__slot--linked .parking-plan__car-light-front {
  fill: #e1f5ee;
}

.parking-plan__slot--linked .parking-plan__car-light-rear {
  fill: #5dcaa5;
}

.parking-plan__slot--linked .parking-plan__car-bumper {
  fill: #085041;
}

.parking-plan__slot--clickable.parking-plan__slot--linked:hover .parking-plan__car-shell {
  fill: #22ad79;
}

.parking-plan__aisle {
  min-height: 2.75rem;
  margin: 0.15rem 0;
}

.parking-plan__ramps {
  min-height: 2.35rem;
  margin-top: 0.5rem;
}

.parking-plan__fixture {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  min-width: 2.1rem;
  min-height: 2.35rem;
  padding: 0.25rem 0.15rem;
  border-radius: 0.5rem;
  border: 1px solid transparent;
  box-sizing: border-box;
  user-select: none;
  pointer-events: auto;
  text-align: center;
  background: var(--bs-body-bg, #fff);
}

.parking-plan__fixture--draggable {
  cursor: grab;
}

.parking-plan__fixture--dragging {
  opacity: 0.72;
  cursor: grabbing;
}

.parking-plan__fixture--car-lift {
  border-color: #378add;
}

.parking-plan__fixture--car-lift .parking-plan__fixture-icon {
  color: #378add;
}

.parking-plan__fixture--car-lift .parking-plan__fixture-label {
  color: #185fa5;
}

.parking-plan__fixture--passenger-lift {
  border-color: #2dd4a0;
}

.parking-plan__fixture--passenger-lift .parking-plan__fixture-icon {
  color: #2dd4a0;
}

.parking-plan__fixture--passenger-lift .parking-plan__fixture-label {
  color: #0f6e56;
}

.parking-plan__fixture--gate {
  background: #fff3e0;
  border-color: #ffb74d;
  color: #e65100;
}

.parking-plan__fixture-label {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1;
  text-transform: none;
}

.parking-plan__fixture-sub {
  font-size: 0.625rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  color: var(--bs-secondary-color, #6c757d);
}

.parking-plan__fixture-icon {
  width: 1.375rem;
  height: 1.375rem;
  flex: 0 0 auto;
  display: block;
}

.parking-plan__sheet--grid .parking-plan__fixture {
  align-self: center;
  justify-self: center;
}

.parking-plan__sheet--grid .parking-plan__fixture--car-lift,
.parking-plan__sheet--grid .parking-plan__fixture--passenger-lift {
  width: 88%;
  height: 88%;
  min-width: 0;
  min-height: 0;
}

.parking-plan__sheet--grid .parking-plan__fixture--car-lift .parking-plan__fixture-label,
.parking-plan__sheet--grid .parking-plan__fixture--passenger-lift .parking-plan__fixture-label {
  font-size: 0.75rem;
}

.parking-plan__sheet--grid .parking-plan__fixture--car-lift .parking-plan__fixture-sub,
.parking-plan__sheet--grid .parking-plan__fixture--passenger-lift .parking-plan__fixture-sub {
  font-size: 0.625rem;
}

.parking-plan__sheet--grid .parking-plan__fixture--car-lift .parking-plan__fixture-icon,
.parking-plan__sheet--grid .parking-plan__fixture--passenger-lift .parking-plan__fixture-icon {
  width: 1.375rem;
  height: 1.375rem;
}

.parking-plan__grid--dragging .parking-plan__fixture:not(.parking-plan__fixture--dragging) {
  opacity: 0.55;
}

[data-bs-theme="dark"] .parking-plan__fixture--car-lift {
  background: #1e3a5f;
  border-color: #64b5f6;
  color: #90caf9;
}

[data-bs-theme="dark"] .parking-plan__fixture--passenger-lift {
  background: #1b3a34;
  border-color: #4db6ac;
  color: #80cbc4;
}

[data-bs-theme="dark"] .parking-plan__fixture--gate {
  background: #3e2723;
  border-color: #ffb74d;
  color: #ffcc80;
}

[data-bs-theme="dark"] .parking-plan__cell {
  border-color: rgba(173, 181, 189, 0.28);
}

[data-bs-theme="dark"] .parking-plan__cell--drag-over {
  background: rgba(96, 165, 250, 0.14);
  border-color: rgba(147, 197, 253, 0.55);
}

[data-bs-theme="dark"] .parking-plan__sheet {
  background: #2b3035;
  border-color: #adb5bd;
}

[data-bs-theme="dark"] .flat-parking-section--split.flat-parking-section--configured .parking-plan__sheet,
[data-bs-theme="dark"] .flat-parking-section--split.flat-parking-section--configured .parking-plan__sheet--grid {
  background: transparent;
  border: none;
}

[data-bs-theme="dark"] .parking-plan__slot:not(.parking-plan__slot--linked):not(.parking-plan__slot--other-partner):not([data-parking-restricted="true"]) .parking-plan__car-shell {
  fill: #2a6cb0;
}

[data-bs-theme="dark"] .parking-plan__slot:not(.parking-plan__slot--linked):not(.parking-plan__slot--other-partner):not([data-parking-restricted="true"]) .parking-plan__car-hood,
[data-bs-theme="dark"] .parking-plan__slot:not(.parking-plan__slot--linked):not(.parking-plan__slot--other-partner):not([data-parking-restricted="true"]) .parking-plan__car-cabin {
  fill: #0f3a66;
}

[data-bs-theme="dark"] .parking-plan__slot--clickable:not(.parking-plan__slot--linked):not(.parking-plan__slot--other-partner):not([data-parking-restricted="true"]):hover .parking-plan__car-shell {
  fill: #3580c9;
}

[data-bs-theme="dark"] .parking-plan__slot--other-partner .parking-plan__car-shell,
[data-bs-theme="dark"] .parking-plan__slot[data-parking-restricted="true"] .parking-plan__car-shell {
  fill: #4f5d6b;
}

[data-bs-theme="dark"] .parking-plan__slot--other-partner .parking-plan__car-hood,
[data-bs-theme="dark"] .parking-plan__slot--other-partner .parking-plan__car-cabin,
[data-bs-theme="dark"] .parking-plan__slot[data-parking-restricted="true"] .parking-plan__car-hood,
[data-bs-theme="dark"] .parking-plan__slot[data-parking-restricted="true"] .parking-plan__car-cabin {
  fill: #3d4854;
}

[data-bs-theme="dark"] .parking-plan__slot--other-partner .parking-plan__car-wheel,
[data-bs-theme="dark"] .parking-plan__slot[data-parking-restricted="true"] .parking-plan__car-wheel {
  fill: #2f3842;
}

[data-bs-theme="dark"] .parking-plan__slot--other-partner .parking-plan__car-glass-front,
[data-bs-theme="dark"] .parking-plan__slot--other-partner .parking-plan__car-glass-rear,
[data-bs-theme="dark"] .parking-plan__slot[data-parking-restricted="true"] .parking-plan__car-glass-front,
[data-bs-theme="dark"] .parking-plan__slot[data-parking-restricted="true"] .parking-plan__car-glass-rear {
  fill: #6b7784;
  opacity: 0.7;
}

[data-bs-theme="dark"] .parking-plan__slot--linked .parking-plan__car-shell {
  fill: #1d9e75;
}

[data-bs-theme="dark"] .parking-plan__slot--linked .parking-plan__car-hood,
[data-bs-theme="dark"] .parking-plan__slot--linked .parking-plan__car-cabin {
  fill: #17845f;
}

[data-bs-theme="dark"] .parking-plan__slot--clickable.parking-plan__slot--linked:hover .parking-plan__car-shell {
  fill: #22ad79;
}

[data-bs-theme="dark"] .parking-plan__slot-no--booked {
  color: #6ee7b7;
}

[data-bs-theme="dark"] .parking-plan__slot-no {
  color: #adb5bd;
}

[data-bs-theme="dark"] .parking-plan__slot {
  background: transparent;
}

.flat-grid-legend__dot--parking {
  background: #e2e3e5;
  border: 1px solid #6c757d;
}

[data-bs-theme="dark"] .flat-parking-section {
  background: #343a40;
  border-color: #adb5bd;
}

[data-bs-theme="dark"] .flat-parking-section__meta {
  color: #ced4da;
}

[data-bs-theme="dark"] .flat-grid-legend__dot--parking {
  background: #495057;
  border-color: #adb5bd;
}

.flat-building-snapshot-row .flat-floor-row__rail {
  min-height: 2rem;
}

.building-snapshot-modal-body {
  background: linear-gradient(180deg, #dbeafe 0%, #eff6ff 42%, #f8fafc 100%);
}

[data-bs-theme="dark"] .building-snapshot-modal-body {
  background: linear-gradient(180deg, #0f172a 0%, #1e293b 55%, #0f172a 100%);
}

.building-snapshot {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  padding: 0.5rem 0 1rem;
  overflow-x: auto;
  width: 100%;
  max-width: 100%;
}

.building-snapshot__stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  width: 100%;
  max-width: 100%;
}

.building-snapshot__scene-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  width: 100%;
  position: relative;
  z-index: 1;
}

.building-snapshot__above-surface,
.building-snapshot__below-surface {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: 0.35rem;
}

.building-snapshot__below-surface {
  padding-top: 0.15rem;
}

.building-snapshot__below-surface .pk-section-title {
  color: #64748b;
}

[data-bs-theme="dark"] .building-snapshot__below-surface .pk-section-title {
  color: #94a3b8;
}

.building-snapshot__below-surface .pk-floor-block {
  background: #f8fafc;
  border-style: dashed;
  border-color: #cbd5e1;
}

[data-bs-theme="dark"] .building-snapshot__below-surface .pk-floor-block {
  background: rgba(15, 23, 42, 0.55);
  border-color: rgba(148, 163, 184, 0.35);
}

.building-snapshot__ground-strip {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.12rem;
  margin-top: 0.05rem;
}

.building-snapshot__ground-row {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  max-width: calc(var(--bld-building-w) + 5.75rem);
  padding: 0 0.15rem;
  box-sizing: border-box;
}

.building-snapshot__ground-row .bld-scene__tree {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  top: auto;
  transform: none;
  flex: 0 0 2.1rem;
  width: 2.1rem;
  height: 2.6rem;
  align-self: flex-end;
  margin-bottom: 0.15rem;
}

.building-snapshot__ground-panel {
  flex: 1 1 var(--bld-building-w);
  max-width: var(--bld-building-w);
  min-width: 0;
}

.building-snapshot__ground-panel .pk-floor-block {
  width: 100%;
  margin: 0;
}

.building-snapshot__surface-line-wrap,
.building-snapshot__surface-divider {
  position: relative;
  width: min(100%, var(--bld-building-w));
  max-width: var(--bld-building-w);
  height: 0.35rem;
  margin: 0.05rem auto 0;
  flex-shrink: 0;
}

.building-snapshot__surface-divider {
  margin: 0.15rem auto 0.05rem;
}

.building-snapshot__surface-line-wrap .building-snapshot__surface-line,
.building-snapshot__surface-divider .building-snapshot__surface-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.building-snapshot__surface {
  position: relative;
  width: min(100%, var(--bld-building-w));
  max-width: var(--bld-building-w);
  margin: 0.1rem auto 0;
  padding: 0 2.5rem;
  box-sizing: border-box;
  min-height: 2.65rem;
  flex-shrink: 0;
}

.building-snapshot__surface-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 0.2rem;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(34, 197, 94, 0.15) 0%,
    rgba(34, 197, 94, 0.55) 12%,
    rgba(120, 113, 108, 0.85) 50%,
    rgba(34, 197, 94, 0.55) 88%,
    rgba(34, 197, 94, 0.15) 100%
  );
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 1px 2px rgba(0, 0, 0, 0.12);
  z-index: 1;
}

[data-bs-theme="dark"] .building-snapshot__surface-line {
  background: linear-gradient(
    90deg,
    rgba(34, 197, 94, 0.1) 0%,
    rgba(34, 197, 94, 0.45) 12%,
    rgba(168, 162, 158, 0.75) 50%,
    rgba(34, 197, 94, 0.45) 88%,
    rgba(34, 197, 94, 0.1) 100%
  );
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 1px 2px rgba(0, 0, 0, 0.35);
}

.bld-scene--snapshot {
  --bld-cols: 4;
  --bld-unit-w: 6.1rem;
  --bld-building-w: calc(var(--bld-cols) * var(--bld-unit-w) + (var(--bld-cols) - 1) * 3px + 0.5rem);
  align-items: stretch;
  min-width: min(100%, 22rem);
  padding: 0 0 0.15rem;
}

.bld-scene--snapshot:not(:has(.building-snapshot__surface)) .building-snapshot__scene-body::after {
  content: none;
}

.bld-scene--snapshot:not(:has(.building-snapshot__surface)) {
  padding: 0 2.5rem 0.15rem;
}

.building-snapshot__elevation {
  display: flex;
  justify-content: center;
  width: 100%;
}

#building-snapshot-modal .modal-content button.pk-slot--clickable,
#project-snapshot-modal .modal-content button.pk-slot--clickable,
.building-snapshot button.pk-slot--clickable {
  pointer-events: auto;
}

/* Snapshot parking floors — card layout */
.pk-floors-section {
  width: min(100%, var(--bld-building-w));
  max-width: var(--bld-building-w);
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
}

.pk-section-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 0.3rem;
}

.pk-floors {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
}

.pk-floor-block {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  padding: 0.22rem 0.55rem 0.26rem;
  box-sizing: border-box;
}

.pk-floor-block--selected {
  box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.45);
  border-color: #93c5fd;
}

.pk-floor-header {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.15rem;
}

.pk-floor-badge {
  font-size: 0.625rem;
  font-weight: 600;
  padding: 0.0625rem 0.45rem;
  border-radius: 999px;
  line-height: 1.25;
}

.pk-floor-badge--p3 {
  background: #e6f1fb;
  color: #0c447c;
}

.pk-floor-badge--p2 {
  background: #eaf3de;
  color: #3b6d11;
}

.pk-floor-badge--p1 {
  background: #faeeda;
  color: #854f0b;
}

.pk-floor-badge--ground {
  background: #ede9fe;
  color: #5b21b6;
}

.pk-floors-section--ground .pk-ground-shops {
  margin: 0.2rem 0.35rem 0.15rem;
}

.pk-floor-block--ground .pk-ground-shops .bld-gf-compact__row {
  margin: 0;
  padding: 0.25rem 0.35rem;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 0.3rem;
}

[data-bs-theme="dark"] .pk-floor-block--ground .pk-ground-shops .bld-gf-compact__row {
  background: rgba(30, 41, 59, 0.45);
  border-color: rgba(148, 163, 184, 0.18);
}

.pk-floors-section--ground {
  margin-bottom: 0.35rem;
}

.pk-floors-section--ground .bld-gf-compact__row {
  margin: 0;
  padding: 0.35rem 0.45rem;
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 0.35rem;
}

[data-bs-theme="dark"] .pk-floors-section--ground .bld-gf-compact__row {
  background: rgba(30, 41, 59, 0.55);
  border-color: rgba(148, 163, 184, 0.2);
}

.pk-floors-section--ground .pk-ground-parking .pk-floor-block {
  margin-top: 0;
}

.pk-floor-label {
  font-size: 0.6875rem;
  font-weight: 500;
  color: #64748b;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pk-lane {
  height: 0.14rem;
  background: repeating-linear-gradient(
    90deg,
    #94a3b8 0,
    #94a3b8 0.35rem,
    transparent 0.35rem,
    transparent 0.65rem
  );
  opacity: 0.18;
  border-radius: 0.125rem;
  margin: 0 0 0.12rem;
}

.pk-lane--bottom {
  margin: 0.12rem 0 0;
}

.pk-slots-grid {
  display: grid;
  grid-template-columns: repeat(var(--pk-cols, 6), minmax(0, 1fr));
  gap: 0.16rem;
  width: 100%;
}

.pk-slot {
  position: relative;
  min-height: 1.5rem;
  height: 100%;
  border-radius: 0.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  border: 1px solid transparent;
  box-sizing: border-box;
  padding: 0.03rem 0.04rem 0.04rem;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.pk-slot--clickable {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
}

.pk-slot--clickable:hover {
  transform: scale(1.04);
  z-index: 1;
}

.pk-slot--available {
  background: #eaf3de;
  border-color: #639922;
}

.pk-slot--booked {
  background: #faeeda;
  border-color: #ba7517;
}

.pk-slot--reserved {
  background: #e6f1fb;
  border-color: #185fa5;
}

.pk-slot--blocked,
.pk-slot--empty {
  background: #f1efe8;
  border-color: #888780;
}

.pk-slot--selected {
  box-shadow: 0 0 0 2px #0d6efd;
  border-color: #0d6efd;
  z-index: 2;
}

.pk-slot__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0.55rem;
  line-height: 1;
}

.pk-slot__icon svg {
  width: 15px;
  height: auto;
}

.pk-slot__icon--fixture {
  font-size: 0.5625rem;
  font-weight: 700;
  color: #64748b;
}

.pk-slot__id {
  font-size: 0.4375rem;
  font-weight: 500;
  color: #64748b;
  line-height: 1;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pk-slot--available .pk-slot__id { color: #3b6d11; }
.pk-slot--booked .pk-slot__id { color: #854f0b; }
.pk-slot--reserved .pk-slot__id { color: #0c447c; }
.pk-slot--blocked .pk-slot__id,
.pk-slot--empty .pk-slot__id { color: #888780; }

.pk-legend {
  display: flex;
  gap: 0.65rem;
  flex-wrap: wrap;
  margin-top: 0.35rem;
}

.pk-legend-item {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.6875rem;
  color: #64748b;
}

.pk-legend-dot {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 0.125rem;
  flex-shrink: 0;
}

.pk-legend-dot--available {
  background: #eaf3de;
  border: 1.5px solid #639922;
}

.pk-legend-dot--booked {
  background: #faeeda;
  border: 1.5px solid #ba7517;
}

.pk-legend-dot--reserved {
  background: #e6f1fb;
  border: 1.5px solid #185fa5;
}

.pk-legend-dot--blocked {
  background: #f1efe8;
  border: 1.5px solid #888780;
}

.project-snapshot__tower .pk-floors-section {
  width: min(100%, var(--bld-building-w));
  max-width: var(--bld-building-w);
}

.project-snapshot__tower .pk-slots-grid {
  grid-template-columns: repeat(var(--pk-cols, 4), minmax(0, 1fr));
  gap: 0.14rem;
}

.project-snapshot__tower .pk-slot {
  min-height: 1.35rem;
  padding: 0.02rem 0.03rem 0.03rem;
}

.project-snapshot__tower .pk-slot__icon svg {
  width: 13px;
  height: auto;
}

.project-snapshot__tower .pk-floor-block {
  padding: 0.18rem 0.45rem 0.22rem;
}

.project-snapshot__tower .pk-floor-header {
  margin-bottom: 0.12rem;
}

[data-bs-theme="dark"] .pk-section-title {
  color: #e2e8f0;
}

[data-bs-theme="dark"] .pk-floor-block {
  background: #1e293b;
  border-color: #334155;
}

[data-bs-theme="dark"] .pk-floor-label,
[data-bs-theme="dark"] .pk-legend-item {
  color: #94a3b8;
}

.bld-scene {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  min-width: min(100%, 22rem);
  padding: 0 2.5rem 0.25rem;
}

.bld-scene__tree {
  position: absolute;
  bottom: 0.35rem;
  width: 2.1rem;
  height: 2.6rem;
  pointer-events: none;
  z-index: 0;
}

.bld-scene__tree--left {
  left: 0;
}

.bld-scene__tree--right {
  right: 0;
}

.bld-scene__tree::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0.45rem;
  height: 0.9rem;
  transform: translateX(-50%);
  background: #92400e;
  border-radius: 1px;
}

.bld-scene__tree::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0.65rem;
  width: 2rem;
  height: 1.85rem;
  transform: translateX(-50%);
  background: radial-gradient(circle at 50% 62%, #15803d 0%, #22c55e 58%, #4ade80 100%);
  border-radius: 50% 50% 42% 42%;
  box-shadow: inset 0 -4px 0 rgba(21, 128, 61, 0.35);
}

.bld-building {
  --bld-cols: 4;
  --bld-unit-w: 6.1rem;
  --bld-unit-h: 2.35rem;
  --bld-wall: #f3ebe0;
  --bld-wall-edge: #d6c8b8;
  --bld-rail: #d97706;
  --bld-rail-dark: #b45309;
  position: relative;
  z-index: 1;
  width: min(100%, calc(var(--bld-cols) * var(--bld-unit-w) + (var(--bld-cols) - 1) * 3px + 0.5rem));
  max-width: calc(var(--bld-cols) * var(--bld-unit-w) + (var(--bld-cols) - 1) * 3px + 0.5rem);
  overflow: hidden;
  filter: drop-shadow(0 10px 18px rgba(15, 23, 42, 0.14));
}

.bld-building__parapet {
  height: 0.72rem;
  margin: 0 0.12rem;
  border: 2px solid #f8fafc;
  border-bottom: none;
  border-radius: 3px 3px 0 0;
  background:
    repeating-linear-gradient(90deg, #f8fafc 0 0.42rem, #cbd5e1 0.42rem 0.5rem) center / 100% 100%,
    linear-gradient(180deg, #f8fafc, #e2e8f0);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.bld-building__tower {
  display: flex;
  flex-direction: column;
  border-left: 3px solid var(--bld-wall-edge);
  border-right: 3px solid var(--bld-wall-edge);
  background: var(--bld-wall);
  overflow: hidden;
}

.bld-row {
  display: grid;
  grid-template-columns: repeat(var(--bld-cols), minmax(0, var(--bld-unit-w)));
  justify-content: center;
  gap: 3px;
  padding: 0 2px;
  background: linear-gradient(180deg, rgba(214, 200, 184, 0.35), transparent 28%);
  min-width: 0;
}

.bld-row + .bld-row {
  border-top: 1px solid rgba(180, 162, 142, 0.45);
}

.bld-cell {
  position: relative;
  width: 100%;
  max-width: var(--bld-unit-w);
  min-width: 0;
  min-height: var(--bld-unit-h);
  padding: 0.1rem 0.08rem 0.08rem;
  background: var(--bld-wall);
  box-sizing: border-box;
  cursor: default;
}

.bld-cell--residential .bld-cell__facade {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.08);
}

.bld-cell[data-flat-id] {
  cursor: pointer;
}

.bld-cell[data-flat-id]:hover {
  filter: brightness(1.03);
}

.bld-cell--selected {
  z-index: 2;
}

.bld-cell--selected .bld-cell__glass,
.bld-cell--selected .bld-cell__garage,
.bld-cell--selected .bld-cell__shop-door {
  box-shadow:
    inset 0 0 0 2px #0d6efd,
    0 0 0 1px rgba(13, 110, 253, 0.35);
}

.bld-row--selected {
  box-shadow: inset 0 0 0 2px rgba(13, 110, 253, 0.55);
  background: rgba(13, 110, 253, 0.06);
}

.bld-row--parking {
  background: linear-gradient(180deg, #9fb0c3 0%, #8fa3b8 100%);
  border-top: 2px solid #64748b;
}

.bld-row--parking + .bld-row--parking {
  border-top: 1px solid rgba(71, 85, 105, 0.55);
}

.bld-row--parking .bld-cell {
  background: transparent;
}

.bld-row--parking.bld-row--selected {
  background: linear-gradient(180deg, rgba(13, 110, 253, 0.22) 0%, #8fa3b8 100%);
}

.bld-cell--parking-col {
  min-height: var(--bld-unit-h);
  height: auto;
  padding: 0.1rem 0.08rem 0.08rem;
  background: linear-gradient(180deg, #b8c5d4 0%, #a3b3c6 100%);
  border: 1px solid rgba(71, 85, 105, 0.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 0.12rem;
  overflow: hidden;
}

.bld-cell--parking-col:first-child {
  position: relative;
}

.bld-parking-col__label {
  position: absolute;
  top: 0.1rem;
  left: 0.1rem;
  font-size: 0.52rem;
  font-weight: 700;
  color: #1e293b;
  line-height: 1;
}

.bld-cell--parking-seatmap {
  grid-column: 1 / -1;
  max-width: none;
  width: 100%;
  justify-content: center;
  align-items: center;
}

.bld-parking-seatmap {
  display: grid;
  grid-template-columns: repeat(var(--seat-cols, 6), minmax(0, 1fr));
  grid-template-rows: repeat(var(--seat-rows, 1), minmax(0, 1fr));
  gap: 2px;
  width: 100%;
  max-width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  padding: 0.45rem 0.15rem 0.08rem;
  box-sizing: border-box;
  place-items: center;
}

.bld-parking-seat {
  width: 100%;
  max-width: 0.78rem;
  aspect-ratio: 1;
  margin: 0 auto;
  padding: 0;
  border: 2px solid #0f172a;
  border-radius: 0.22rem;
  font-size: 0.38rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  transition: box-shadow 0.1s ease, transform 0.1s ease, border-color 0.1s ease;
  background-color: #22c55e;
  color: #fff;
}

.building-snapshot .bld-parking-seat,
#building-snapshot-modal .bld-parking-seat,
#project-snapshot-modal .bld-parking-seat {
  border: 2px solid #0f172a;
  background-color: #22c55e;
  color: #fff;
}

[data-bs-theme="dark"] .building-snapshot .bld-parking-seat,
[data-bs-theme="dark"] #building-snapshot-modal .bld-parking-seat,
[data-bs-theme="dark"] #project-snapshot-modal .bld-parking-seat {
  border-color: #0f172a;
  background-color: #22c55e;
  color: #fff;
}

.bld-parking-seat--available,
.building-snapshot .bld-parking-seat--available,
#building-snapshot-modal .bld-parking-seat--available,
#project-snapshot-modal .bld-parking-seat--available {
  background-color: #22c55e;
  color: #fff;
}

.bld-parking-seat--booked,
.building-snapshot .bld-parking-seat--booked,
#building-snapshot-modal .bld-parking-seat--booked,
#project-snapshot-modal .bld-parking-seat--booked,
[data-bs-theme="dark"] .building-snapshot .bld-parking-seat--booked,
[data-bs-theme="dark"] #building-snapshot-modal .bld-parking-seat--booked,
[data-bs-theme="dark"] #project-snapshot-modal .bld-parking-seat--booked {
  background-color: #2563eb;
  color: #fff;
}

.bld-parking-seat--hold,
.building-snapshot .bld-parking-seat--hold,
#building-snapshot-modal .bld-parking-seat--hold,
#project-snapshot-modal .bld-parking-seat--hold {
  background-color: #eab308;
  color: #fff;
}

.bld-parking-seat--deactivated,
.building-snapshot .bld-parking-seat--deactivated,
#building-snapshot-modal .bld-parking-seat--deactivated,
#project-snapshot-modal .bld-parking-seat--deactivated {
  background-color: #94a3b8;
  color: #fff;
}

.bld-parking-seat--car-lift,
.building-snapshot .bld-parking-seat--car-lift,
#building-snapshot-modal .bld-parking-seat--car-lift,
#project-snapshot-modal .bld-parking-seat--car-lift {
  background-color: #f59e0b;
  color: #fff;
  cursor: default;
  font-size: 0.32rem;
}

.bld-parking-seat--passenger-lift,
.building-snapshot .bld-parking-seat--passenger-lift,
#building-snapshot-modal .bld-parking-seat--passenger-lift,
#project-snapshot-modal .bld-parking-seat--passenger-lift {
  background-color: #a855f7;
  color: #fff;
  cursor: default;
  font-size: 0.32rem;
}

.bld-parking-seat--gate,
.building-snapshot .bld-parking-seat--gate,
#building-snapshot-modal .bld-parking-seat--gate,
#project-snapshot-modal .bld-parking-seat--gate {
  background-color: #64748b;
  color: #fff;
  cursor: default;
  font-size: 0.32rem;
}

.bld-parking-seat--empty,
.building-snapshot .bld-parking-seat--empty,
#building-snapshot-modal .bld-parking-seat--empty,
#project-snapshot-modal .bld-parking-seat--empty {
  background-color: rgba(255, 255, 255, 0.35);
  border: 2px solid #0f172a;
  cursor: default;
  pointer-events: none;
  z-index: 1;
}

.bld-parking-seat--clickable,
.building-snapshot .bld-parking-seat--clickable,
#building-snapshot-modal .bld-parking-seat--clickable,
#project-snapshot-modal .bld-parking-seat--clickable {
  cursor: pointer;
  border: 2px solid #0f172a;
  box-sizing: border-box;
  position: relative;
  z-index: 2;
}

.bld-parking-seat--fixture,
.building-snapshot .bld-parking-seat--fixture,
#building-snapshot-modal .bld-parking-seat--fixture,
#project-snapshot-modal .bld-parking-seat--fixture {
  border: 2px solid #0f172a;
  box-sizing: border-box;
  position: relative;
  z-index: 2;
}

.bld-parking-seat--clickable:hover {
  transform: scale(1.06);
  border-color: #020617;
  box-shadow: 0 0 0 1px rgba(13, 110, 253, 0.45);
  z-index: 3;
}

.bld-parking-seat--selected,
.building-snapshot .bld-parking-seat--selected,
#building-snapshot-modal .bld-parking-seat--selected,
#project-snapshot-modal .bld-parking-seat--selected {
  border-color: #0d6efd;
  box-shadow: 0 0 0 2px #0d6efd;
}

.bld-cell--ground-block {
  grid-column: 1 / -1;
  width: 100%;
  max-width: none;
  min-height: 0;
  height: auto;
  padding: 0.12rem 0.12rem;
  background: linear-gradient(180deg, #ede4d4, var(--bld-wall));
  box-sizing: border-box;
  overflow: hidden;
}

.bld-parking-strip__slot {
  flex: 0 0 auto;
  width: 0.58rem;
  height: 0.58rem;
  padding: 0;
  border: 2px solid #0f172a;
  border-radius: 0.22rem;
  cursor: pointer;
  transition: box-shadow 0.1s ease;
  font-size: 0.38rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
}

.bld-parking-strip__slot--open,
.bld-parking-strip__slot.bld-parking-seat--available {
  background: #22c55e;
  color: #fff;
}

.bld-parking-strip__slot--set,
.bld-parking-strip__slot.bld-parking-seat--booked {
  background: #2563eb;
  color: #fff;
}

.bld-parking-strip__slot.parking-plan__slot--clickable:hover,
.bld-parking-strip__slot.shop-plan__slot--clickable:hover {
  box-shadow: 0 0 0 1px rgba(13, 110, 253, 0.5);
  z-index: 1;
}

.bld-parking-strip__slot.shop-plan__slot--selected,
.bld-parking-strip__slot.parking-plan__slot--selected {
  box-shadow: 0 0 0 1px #0d6efd;
}

.bld-row--ground {
  background: linear-gradient(180deg, rgba(214, 200, 184, 0.35), transparent 28%);
}

.bld-gf-compact__row {
  display: grid;
  grid-template-columns: 1.1rem 1fr;
  align-items: center;
  gap: 2px;
}

.bld-gf-compact__row + .bld-gf-compact__row {
  margin-top: 0.08rem;
  padding-top: 0.08rem;
  border-top: 1px dashed rgba(71, 85, 105, 0.2);
}

.bld-gf-compact__row--parking .bld-gf-compact__chips {
  display: flex;
  flex-wrap: nowrap;
  gap: 1px;
  justify-content: center;
}

.bld-gf-compact__row-label {
  font-size: 0.52rem;
  font-weight: 700;
  text-align: right;
  color: #475569;
  line-height: 1.1;
}

.bld-gf-compact__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  justify-content: center;
}

.bld-gf-compact__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 0.15rem;
  border-radius: 2px;
  border: 1px solid;
  font-size: 0.52rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.bld-gf-compact__chip.shop-plan__slot--available {
  background: #d1e7dd;
  border-color: #198754;
  color: #0f5132;
}

.bld-gf-compact__chip.shop-plan__slot--booked {
  background: #cfe2ff;
  border-color: #0d6efd;
  color: #084298;
}

.bld-gf-compact__chip.shop-plan__slot--hold {
  background: #fff3cd;
  border-color: #ffc107;
  color: #664d03;
}

.bld-gf-compact__chip.shop-plan__slot--deactivated {
  background: #e2e3e5;
  border-color: #6c757d;
  color: #495057;
}

.bld-gf-compact__chip.shop-plan__slot--clickable:hover {
  transform: scale(1.06);
  box-shadow: 0 0 0 1px rgba(13, 110, 253, 0.35);
}

.bld-gf-compact__chip.shop-plan__slot--selected {
  box-shadow: 0 0 0 2px #0d6efd;
}

.bld-parking-floor__plan {
  width: 100%;
  max-width: 100%;
}

.bld-parking-floor .parking-plan__sheet--grid {
  --parking-cell-width: auto;
  --parking-cell-height: 2.35rem;
  width: 100%;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.bld-parking-floor .parking-plan__grid {
  width: 100%;
  max-width: 100%;
  grid-template-columns: repeat(var(--parking-grid-cols, 14), minmax(0, 1fr));
  grid-template-rows: repeat(var(--parking-grid-rows, 8), minmax(var(--parking-cell-height, 2.35rem), auto));
  gap: 2px;
}

.bld-parking-floor .parking-plan__cell {
  border-color: rgba(100, 116, 139, 0.4);
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: var(--parking-cell-height, 2.35rem);
}

.bld-parking-floor .parking-plan__sheet--grid .parking-plan__slot,
.bld-parking-floor .parking-plan__sheet--grid .parking-plan__fixture {
  width: 86%;
  height: 86%;
  max-width: none;
  min-width: 0;
  min-height: 0;
  align-self: center;
  justify-self: center;
}

.bld-parking-floor .parking-plan__sheet--grid .parking-plan__slot--vertical,
.bld-parking-floor .parking-plan__sheet--grid .parking-plan__slot--horizontal {
  width: 86%;
  height: 86%;
}

.bld-parking-floor .parking-plan__sheet--grid .parking-plan__bay {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: none;
}

.bld-parking-floor .parking-plan__sheet--grid .parking-plan__car-svg {
  width: auto;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
}

.bld-parking-floor .parking-plan__sheet--grid .parking-plan__slot-no {
  flex: 0 0 auto;
  font-size: 0.5rem;
  line-height: 1;
}

.bld-parking-floor .parking-plan__sheet--grid .parking-plan__fixture {
  padding: 0.06rem 0.04rem;
  gap: 0.04rem;
  border-radius: 0.28rem;
}

.bld-parking-floor .parking-plan__sheet--grid .parking-plan__fixture-icon {
  width: 0.82rem;
  height: 0.82rem;
}

.bld-parking-floor .parking-plan__sheet--grid .parking-plan__fixture-label {
  font-size: 0.46rem;
  font-weight: 600;
  line-height: 1;
}

.bld-parking-floor .parking-plan__sheet--grid .parking-plan__fixture-sub {
  display: none;
}

.bld-parking-floor .parking-plan__sheet--grid .parking-plan__fixture--car-lift,
.bld-parking-floor .parking-plan__sheet--grid .parking-plan__fixture--passenger-lift,
.bld-parking-floor .parking-plan__sheet--grid .parking-plan__fixture--gate {
  width: 86%;
  height: 86%;
  min-width: 0;
  min-height: 0;
}

.bld-parking-floor .parking-plan__sheet:not(.parking-plan__sheet--grid) {
  width: 100%;
  padding: 0.12rem 0.1rem;
  background: transparent;
  box-shadow: none;
}

.bld-parking-floor .parking-plan__row {
  width: 100%;
  min-height: 0;
  padding: 0.18rem 0.08rem;
  justify-content: stretch;
  gap: 3px;
}

.bld-parking-floor .parking-plan__slot {
  flex: 1 1 0;
  min-width: 0;
  max-width: none;
}

.bld-parking-floor .parking-plan__bay {
  max-width: none;
  height: 2.35rem;
}

.bld-parking-floor .parking-plan__sheet:not(.parking-plan__sheet--grid) .parking-plan__car-svg {
  height: 100%;
  max-height: 2.1rem;
}

.bld-parking-floor .parking-plan__aisle {
  width: 100%;
}

.bld-parking-floor .parking-plan__slot--clickable {
  cursor: pointer;
}

.bld-parking-floor .parking-plan__slot--clickable:hover {
  transform: scale(1.05);
}

.bld-parking-floor .parking-plan__slot--horizontal.parking-plan__slot--clickable:hover {
  transform: rotate(90deg) scale(1.05);
}

.bld-parking-floor .parking-plan__slot--selected {
  outline: 2px solid #0d6efd;
  outline-offset: 1px;
  border-radius: 0.25rem;
}

.bld-parking-floor .shop-plan__sheet--grid {
  --shop-cell-height: 2.35rem;
  width: 100%;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.bld-parking-floor .shop-plan__grid {
  width: 100%;
  max-width: 100%;
  grid-template-columns: repeat(var(--shop-grid-cols, 14), minmax(0, 1fr));
  grid-template-rows: repeat(var(--shop-grid-rows, 8), minmax(var(--shop-cell-height, 2.35rem), auto));
  gap: 2px;
}

.bld-parking-floor .shop-plan__cell {
  border-color: rgba(100, 116, 139, 0.4);
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: var(--shop-cell-height, 2.35rem);
}

.bld-parking-floor .shop-plan__slot,
.bld-parking-floor .shop-plan__fixture {
  width: 86%;
  height: 86%;
  max-width: none;
  min-width: 0;
  min-height: 0;
  align-self: center;
  justify-self: center;
}

.bld-parking-floor .shop-plan__bay {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  padding: 0.04rem;
}

.bld-parking-floor .shop-plan__slot--parking .shop-plan__bay--parking {
  display: flex;
  align-items: center;
  justify-content: center;
}

.bld-parking-floor .shop-plan__slot--parking .shop-plan__car-svg {
  width: auto;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
}

.bld-parking-floor .shop-plan__label {
  font-size: 0.46rem;
  line-height: 1;
}

.bld-parking-floor .shop-plan__slot-no,
.bld-parking-floor .shop-plan__unit-no {
  font-size: 0.46rem;
  line-height: 1;
}

.bld-parking-floor .shop-plan__unit-no {
  display: none;
}

.bld-parking-floor .shop-plan__linked-flat {
  font-size: 0.42rem;
}

.bld-parking-floor .shop-plan__fixture {
  padding: 0.06rem 0.04rem;
  gap: 0.04rem;
  border-radius: 0.28rem;
}

.bld-parking-floor .shop-plan__fixture-icon {
  width: 0.82rem;
  height: 0.82rem;
}

.bld-parking-floor .shop-plan__fixture-label {
  font-size: 0.46rem;
  font-weight: 600;
  line-height: 1;
}

.bld-parking-floor .shop-plan__fixture-sub {
  display: none;
}

.bld-parking-floor .shop-plan__slot--clickable {
  cursor: pointer;
}

.bld-parking-floor .shop-plan__slot--clickable:hover {
  transform: scale(1.05);
}

.bld-parking-floor .shop-plan__slot--selected {
  outline: 2px solid #0d6efd;
  outline-offset: 1px;
  border-radius: 0.25rem;
}

.bld-row--residential .bld-cell--void {
  opacity: 0;
  min-height: var(--bld-unit-h);
  padding: 0;
  pointer-events: none;
}

.bld-cell--void {
  opacity: 0.55;
}

.bld-cell--void .bld-cell__facade {
  visibility: hidden;
}

.bld-row--residential .bld-cell--void .bld-cell__facade {
  display: none;
}

.bld-cell__facade {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: calc(var(--bld-unit-h) - 0.15rem);
}

.bld-cell__glass {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  min-height: 1rem;
  margin: 0 0.08rem;
  border: 2px solid #c2410c;
  border-bottom: none;
  border-radius: 7px 7px 0 0;
  background: linear-gradient(180deg, rgba(186, 230, 253, 0.92) 0%, rgba(125, 211, 252, 0.78) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
}

.bld-cell__label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.05rem;
  max-width: 100%;
  padding: 0 0.08rem;
  text-align: center;
  line-height: 1.05;
  pointer-events: none;
  z-index: 1;
}

.bld-cell__number {
  font-size: 0.56rem;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.bld-cell__type {
  font-size: 0.46rem;
  font-weight: 700;
  color: #475569;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.bld-cell__garage,
.bld-cell__shop-door {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bld-cell__buyertip {
  left: 50%;
  bottom: calc(100% + 6px);
  transform: translate(-50%, 6px);
  z-index: 60;
  width: 11.5rem;
  min-width: 9.5rem;
  aspect-ratio: auto;
  max-width: min(11.5rem, 88vw);
}

.bld-cell__buyertip::after {
  bottom: -6px;
  border-width: 6px 7px 0 7px;
}

.bld-cell--has-buyer:hover .bld-cell__buyertip {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.bld-cell--has-buyer:hover {
  z-index: 5;
}

.bld-cell__balcony {
  flex: 0 0 auto;
  padding-top: 0.04rem;
  margin: 0 0.08rem;
}

.bld-cell__railing {
  height: 0.36rem;
  border: 1px solid var(--bld-rail-dark);
  border-radius: 0 0 7px 7px;
  background:
    radial-gradient(circle, #fef3c7 1px, transparent 1.5px) 0 50% / 5px 5px,
    repeating-linear-gradient(90deg, var(--bld-rail) 0 2px, #f59e0b 2px 4px, var(--bld-rail-dark) 4px 5px),
    linear-gradient(180deg, #fbbf24, var(--bld-rail));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.bld-cell--service .bld-cell__glass {
  min-height: 1.2rem;
  background: linear-gradient(180deg, #e2e8f0, #cbd5e1);
  border-color: #64748b;
}

.bld-cell--service .bld-cell__railing {
  height: 0.42rem;
  background: linear-gradient(180deg, #94a3b8, #64748b);
  border-color: #475569;
}

.bld-cell--ground {
  min-height: 2.65rem;
  padding-bottom: 0.18rem;
}

.bld-cell__shop-door {
  flex: 1 1 auto;
  min-height: 1.85rem;
  margin: 0.1rem 0.2rem 0;
  border: 2px solid #9a3412;
  border-radius: 2px 2px 0 0;
  background: linear-gradient(180deg, rgba(254, 243, 199, 0.95), rgba(253, 230, 138, 0.85));
  box-shadow: inset 0 -8px 0 rgba(180, 83, 9, 0.18);
}

.bld-cell__garage {
  flex: 1 1 auto;
  min-height: 1.55rem;
  margin: 0.15rem 0.12rem 0;
  border: 2px solid #64748b;
  border-radius: 2px;
  background: repeating-linear-gradient(180deg, #cbd5e1 0 3px, #94a3b8 3px 6px);
}

.bld-cell--available .bld-cell__glass {
  background: linear-gradient(180deg, rgba(187, 247, 208, 0.92), rgba(134, 239, 172, 0.78));
}

.bld-cell--hold .bld-cell__glass {
  background: linear-gradient(180deg, rgba(254, 240, 138, 0.95), rgba(253, 224, 71, 0.82));
}

.bld-cell--booked .bld-cell__glass {
  background: linear-gradient(180deg, rgba(191, 219, 254, 0.95), rgba(147, 197, 253, 0.82));
}

.bld-cell--deactivated .bld-cell__glass {
  background: linear-gradient(180deg, rgba(254, 202, 202, 0.95), rgba(252, 165, 165, 0.82));
}

.bld-cell--other-partner .bld-cell__glass {
  background: linear-gradient(180deg, rgba(226, 232, 240, 0.95), rgba(203, 213, 225, 0.85));
}

.bld-cell--duplex .bld-cell__glass {
  box-shadow: inset 0 0 0 2px #7e57c2;
}

.bld-cell--merge .bld-cell__glass {
  box-shadow: inset 0 0 0 2px #00897b;
}

.bld-building__gf {
  border-left: 3px solid var(--bld-wall-edge);
  border-right: 3px solid var(--bld-wall-edge);
  border-top: 2px solid #b45309;
  background: linear-gradient(180deg, #ede4d4, var(--bld-wall));
}

.bld-band {
  display: grid;
  grid-template-columns: 3.25rem 1fr;
  align-items: center;
  gap: 0.35rem;
  padding: 0.28rem 0.35rem;
  border-left: 3px solid #64748b;
  border-right: 3px solid #64748b;
  background: linear-gradient(180deg, #94a3b8, #64748b);
  color: #f8fafc;
}

.bld-band + .bld-band {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.bld-band__label {
  font-size: 0.62rem;
  font-weight: 700;
  text-align: right;
  letter-spacing: 0.02em;
}

.bld-band__slots {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}

.bld-band__slot {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0.72rem;
  height: 0.55rem;
  padding: 0 0.12rem;
  border-radius: 1px;
  border: 1px solid rgba(15, 23, 42, 0.35);
  background: repeating-linear-gradient(180deg, #475569 0 2px, #334155 2px 4px);
}

.bld-band__slot-no {
  font-size: 0.48rem;
  font-weight: 700;
  color: #f8fafc;
  line-height: 1;
  white-space: nowrap;
}

.bld-building__plinth {
  height: 0.55rem;
  margin: 0 0.12rem;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(180deg, #64748b, #475569);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.08);
}

.bld-building__vents {
  display: grid;
  grid-template-columns: repeat(var(--bld-cols), minmax(0, 1fr));
  gap: 4px;
  padding: 0.22rem 0.45rem 0.28rem;
  border-left: 3px solid #475569;
  border-right: 3px solid #475569;
  background: #64748b;
}

.bld-building__vent {
  height: 0.38rem;
  border-radius: 1px;
  background: repeating-linear-gradient(90deg, #334155 0 3px, #1e293b 3px 6px);
  border: 1px solid #1e293b;
}

[data-bs-theme="dark"] .bld-building {
  --bld-wall: #d8cbb9;
  --bld-wall-edge: #a8957f;
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.45));
}

.building-snapshot-legend {
  flex: 1 1 auto;
}

#project-snapshot-modal.modal {
  z-index: 1070;
  pointer-events: auto;
}

#project-snapshot-modal .modal-content,
#project-snapshot-modal .modal-content button,
#project-snapshot-modal .bld-cell[data-flat-id],
#project-snapshot-modal .parking-plan__slot,
#project-snapshot-modal .shop-plan__slot {
  pointer-events: auto;
}

.project-snapshot-modal-body {
  background: linear-gradient(180deg, #dbeafe 0%, #eff6ff 42%, #f8fafc 100%);
}

[data-bs-theme="dark"] .project-snapshot-modal-body {
  background: linear-gradient(180deg, #0f172a 0%, #1e293b 55%, #0f172a 100%);
}

.project-snapshot {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  gap: 1.25rem;
  overflow-x: auto;
  padding: 0.25rem 0.5rem 1rem;
}

.project-snapshot__item {
  flex: 0 0 auto;
  min-width: min(100%, 20rem);
}

.project-snapshot--compact .project-snapshot__item {
  min-width: 17rem;
}

.project-snapshot--compact .project-snapshot__tower .bld-building {
  --bld-unit-w: 5.2rem;
  --bld-unit-h: 2rem;
}

.project-snapshot__label {
  text-align: center;
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 0.45rem;
  color: var(--bs-body-color);
}

.project-snapshot__tower.building-snapshot {
  justify-content: flex-start;
  align-items: stretch;
  padding: 0;
}

.project-snapshot__tower .bld-scene--snapshot {
  min-width: 0;
  padding-left: 1.75rem;
  padding-right: 1.75rem;
}

.flat-amenity {
  background: #dde4ec;
  border-color: #5c7a99;
  cursor: default;
}

.flat-duplex-primary {
  --flat-roof-dark: #7e57c2;
  --flat-roof-light: #b39ddb;
}

.flat-duplex-primary.flat-booked {
  --flat-roof-dark: #3b82c4;
  --flat-roof-light: #7eb8ea;
  --flat-status-bg: #eff6ff;
  --flat-status-fg: #2563eb;
}

[data-bs-theme="dark"] .flat-duplex-primary {
  --flat-roof-dark: #6d28d9;
  --flat-roof-light: #a78bfa;
}

.flat-duplex {
  box-shadow: none;
}

.flat-merge-primary {
  --flat-roof-dark: #0f766e;
  --flat-roof-light: #5eead4;
}

.flat-merge-primary.flat-booked {
  --flat-roof-dark: #3b82c4;
  --flat-roof-light: #7eb8ea;
  --flat-status-bg: #eff6ff;
  --flat-status-fg: #2563eb;
}

[data-bs-theme="dark"] .flat-merge-primary {
  --flat-roof-dark: #115e59;
  --flat-roof-light: #2dd4bf;
}

.flat-merge {
  box-shadow: none;
}

.flat-merge-part {
  background: #e8f5f3;
  border-color: #4db6ac;
  color: #00695c;
}

.flat-merge-part .flat-type,
.flat-merge-part .flat-owner-detail {
  color: #00695c;
}

[data-bs-theme="dark"] .flat-merge-part {
  background: #1e3330;
  border-color: #4db6ac;
  color: #80cbc4;
}

.flat-duplex-part {
  background: #e8e0f0;
  border-color: #8e6bb8;
  border-style: dashed;
  cursor: default;
  opacity: 0.92;
}

[data-bs-theme="dark"] .flat-amenity {
  background: #2a3540;
  border-color: #5c7a99;
}

[data-bs-theme="dark"] .flat-duplex-part {
  background: #2d2438;
  border-color: #8e6bb8;
}

.flat-card--other-partner,
.flat-card[data-bookable="false"]:not(.flat-parking):not(.flat-amenity):not(.flat-duplex-part):not(.flat-merge-part) {
  cursor: default;
  opacity: 0.58;
  filter: grayscale(0.35);
}

.flat-card--other-partner,
.flat-card[data-bookable="false"]:not(.flat-parking):not(.flat-amenity):not(.flat-duplex-part):not(.flat-merge-part) {
  --flat-card-border: #90a4ae;
  border-style: dashed !important;
}

.flat-card--other-partner .flat-card-body,
.flat-card[data-bookable="false"]:not(.flat-parking):not(.flat-amenity):not(.flat-duplex-part):not(.flat-merge-part)
  .flat-card-body {
  background: #eceff1 !important;
}

.flat-card--other-partner:hover,
.flat-card[data-bookable="false"]:not(.flat-parking):not(.flat-amenity):not(.flat-duplex-part):hover {
  transform: none;
  filter: grayscale(0.35);
}

.flat-card--other-partner:hover .flat-card-body,
.flat-card[data-bookable="false"]:not(.flat-parking):not(.flat-amenity):not(.flat-duplex-part):hover .flat-card-body {
  box-shadow: none;
}

.flat-card--other-partner .flat-number,
.flat-card--other-partner .flat-type,
.flat-card--other-partner .flat-owner-name,
.flat-card--other-partner .flat-owner-detail,
.flat-card[data-bookable="false"]:not(.flat-parking) .flat-number,
.flat-card[data-bookable="false"]:not(.flat-parking) .flat-type,
.flat-card[data-bookable="false"]:not(.flat-parking) .flat-owner-name,
.flat-card[data-bookable="false"]:not(.flat-parking) .flat-owner-detail {
  color: #6c757d !important;
}

.flat-card--other-partner .flat-partner-tag,
.flat-card[data-bookable="false"]:not(.flat-parking) .flat-partner-tag {
  color: #495057;
  font-weight: 500;
}

[data-bs-theme="dark"] .flat-card:not(.flat-parking):not(.flat-amenity):not(.flat-duplex-part):not(.flat-merge-part) {
  --flat-card-border: #94a3b8;
}

[data-bs-theme="dark"] .flat-card-body {
  background: #1e293b;
  border-color: #334155;
}

[data-bs-theme="dark"]
  .flat-card:not(.flat-parking):not(.flat-amenity):not(.flat-duplex-part):not(.flat-merge-part)
  .flat-card-body {
  border: none;
}

[data-bs-theme="dark"] .flat-number,
[data-bs-theme="dark"] .flat-owner-name {
  color: #f1f5f9;
}

[data-bs-theme="dark"] .flat-type,
[data-bs-theme="dark"] .flat-owner-detail {
  color: #94a3b8;
}

[data-bs-theme="dark"] .flat-available {
  --flat-roof-dark: #15803d;
  --flat-roof-light: #4ade80;
  --flat-card-fill: rgba(25, 135, 84, 0.32);
  --flat-status-bg: var(--flat-card-fill);
  --flat-status-fg: #bbf7d0;
}

[data-bs-theme="dark"]
  .flat-card.flat-available:not(.flat-parking):not(.flat-amenity):not(.flat-duplex-part):not(.flat-merge-part) {
  background: var(--flat-card-fill);
  --flat-card-border: #4ade80;
}

[data-bs-theme="dark"]
  .flat-card.flat-available:not(.flat-parking):not(.flat-amenity):not(.flat-duplex-part):not(.flat-merge-part)
  .flat-card-body {
  background: transparent;
}

[data-bs-theme="dark"]
  .flat-card.flat-available:not(.flat-parking):not(.flat-amenity):not(.flat-duplex-part):not(.flat-merge-part)
  .flat-card-status {
  background: transparent;
  border-top-color: rgba(74, 222, 128, 0.28);
}

[data-bs-theme="dark"] .flat-card.flat-available.flat-card--other-partner .flat-card-body,
[data-bs-theme="dark"]
  .flat-card.flat-available[data-bookable="false"]:not(.flat-parking):not(.flat-amenity):not(.flat-duplex-part):not(
    .flat-merge-part
  )
  .flat-card-body {
  background: transparent !important;
}

[data-bs-theme="dark"] .flat-booked {
  --flat-roof-dark: #2563eb;
  --flat-roof-light: #60a5fa;
  --flat-status-bg: rgba(13, 110, 253, 0.2);
  --flat-status-fg: #93c5fd;
}

[data-bs-theme="dark"] .flat-booked .flat-owner-name {
  color: #f1f5f9;
}

[data-bs-theme="dark"] .flat-hold {
  --flat-roof-dark: #b45309;
  --flat-roof-light: #fbbf24;
  --flat-status-bg: rgba(255, 193, 7, 0.15);
  --flat-status-fg: #fcd34d;
}

[data-bs-theme="dark"] .flat-deactivated {
  --flat-roof-dark: #b91c1c;
  --flat-roof-light: #f87171;
  --flat-status-bg: rgba(220, 53, 69, 0.18);
  --flat-status-fg: #fca5a5;
}

[data-bs-theme="dark"] .flat-booked .flat-owner-detail {
  color: #94a3b8;
}

[data-bs-theme="dark"] .flat-card--other-partner,
[data-bs-theme="dark"]
  .flat-card[data-bookable="false"]:not(.flat-parking):not(.flat-amenity):not(.flat-duplex-part):not(.flat-merge-part) {
  opacity: 0.62;
  filter: grayscale(0.4);
}

[data-bs-theme="dark"] .flat-card--other-partner,
[data-bs-theme="dark"]
  .flat-card[data-bookable="false"]:not(.flat-parking):not(.flat-amenity):not(.flat-duplex-part):not(.flat-merge-part) {
  --flat-card-border: #adb5bd;
}

[data-bs-theme="dark"] .flat-card--other-partner .flat-card-body,
[data-bs-theme="dark"]
  .flat-card[data-bookable="false"]:not(.flat-parking):not(.flat-amenity):not(.flat-duplex-part):not(.flat-merge-part)
  .flat-card-body {
  background: rgba(108, 117, 125, 0.22) !important;
}

[data-bs-theme="dark"]
  .flat-card:not(.flat-parking):not(.flat-amenity):not(.flat-duplex-part):not(.flat-merge-part):hover {
  border-color: #cbd5e1;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

[data-bs-theme="dark"] .flat-card--other-partner:hover,
[data-bs-theme="dark"]
  .flat-card[data-bookable="false"]:not(.flat-parking):not(.flat-amenity):not(.flat-duplex-part):hover {
  transform: none;
}

[data-bs-theme="dark"] .flat-card--other-partner .flat-number,
[data-bs-theme="dark"] .flat-card--other-partner .flat-type,
[data-bs-theme="dark"] .flat-card--other-partner .flat-owner-name,
[data-bs-theme="dark"] .flat-card--other-partner .flat-owner-detail {
  color: #adb5bd !important;
}

[data-bs-theme="dark"] .flat-card--other-partner .flat-partner-tag {
  color: #ced4da;
}

[data-bs-theme="dark"] .flat-parking {
  background: rgba(108, 117, 125, 0.3);
  border-color: #6c757d;
}

[data-bs-theme="dark"] .flat-card.flat-card--booking-selected {
  background: transparent !important;
}

[data-bs-theme="dark"] .flat-card.flat-card--booking-selected {
  border-color: #fd7e14 !important;
  box-shadow: 0 0 0 2px rgba(253, 126, 20, 0.4);
}

[data-bs-theme="dark"] .flat-card.flat-card--booking-selected .flat-card-body {
  box-shadow: none;
}

[data-bs-theme="dark"] .flat-card.flat-card--booking-selected .flat-type,
[data-bs-theme="dark"] .flat-card.flat-card--booking-selected .flat-owner-detail {
  color: #94a3b8;
}

[data-bs-theme="dark"] .flat-card.flat-card--booking-selected .flat-owner-name {
  color: #f1f5f9;
}

[data-bs-theme="dark"] .flat-card-owner {
  border-top: none;
}

[data-bs-theme="dark"] .flat-owner-label {
  color: #fbbf24;
}

[data-bs-theme="dark"] .flat-card-buyertip__title {
  color: #fbbf24;
}

[data-bs-theme="dark"] .flat-card-buyertip__name {
  color: #fafaf9;
}

[data-bs-theme="dark"] .flat-card-buyertip__row {
  color: #d6d3d1;
}

[data-bs-theme="dark"] .flat-card-buyertip__row span:first-child {
  color: #fcd34d;
}

[data-bs-theme="dark"] .flat-card-buyertip {
  color: #fafaf9;
  background: linear-gradient(160deg, #44403c 0%, #292524 52%, #1c1917 100%);
  border-color: rgba(251, 191, 36, 0.45);
  border-left-color: #fbbf24;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.12) inset,
    0 0 0 2px rgba(0, 0, 0, 0.55),
    0 14px 40px -6px rgba(0, 0, 0, 0.65),
    0 0 24px rgba(251, 191, 36, 0.15);
}

[data-bs-theme="dark"] .flat-card-buyertip::after {
  border-top-color: #292524;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45));
}

.floor-label {
  flex-shrink: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748b;
  line-height: 1.25;
}

[data-bs-theme="dark"] .floor-label {
  color: #94a3b8;
}

[data-bs-theme="dark"] .flat-partner-label {
  color: #94a3b8;
}

[data-bs-theme="dark"] .flat-partner-tag {
  color: #a5b4fc;
}

/* Theme switch: sun (light) / moon (dark), one control */
.floor21-theme-toggle {
  width: 2.375rem;
  height: 2.375rem;
  padding: 0;
  line-height: 1;
}

.floor21-theme-toggle .floor21-theme-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.floor21-theme-toggle:focus-visible {
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.35);
}

/* Vault: deal amount breakdown panel */
.vault-deal-panel {
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 0.5rem;
  padding: 1.25rem 1.35rem 1.1rem;
}

.vault-deal-panel__title {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--bs-secondary-color);
  margin-bottom: 1.1rem;
}

.vault-deal-field__label-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
  margin-bottom: 0.35rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--bs-body-color);
}

.vault-deal-field__icon {
  width: 1rem;
  height: 1rem;
  opacity: 0.65;
}

.vault-deal-badge {
  font-size: 0.65rem;
  font-weight: 600;
  padding: 0.15rem 0.45rem;
  border-radius: 0.25rem;
}

.vault-deal-badge--cheque {
  background: #e8f4fc;
  color: #1565a8;
}

.vault-deal-badge--cash {
  background: #f5efe6;
  color: #7a5c3a;
}

[data-bs-theme="dark"] .vault-deal-badge--cheque {
  background: rgba(21, 101, 168, 0.25);
  color: #8ec5f0;
}

[data-bs-theme="dark"] .vault-deal-badge--cash {
  background: rgba(122, 92, 58, 0.35);
  color: #e8d4b8;
}

.vault-deal-field .form-control {
  font-size: 1rem;
  padding: 0.55rem 0.75rem;
}

.vault-deal-field .form-text {
  font-size: 0.75rem;
  margin-top: 0.35rem;
}

.vault-deal-calc {
  border-top: 1px solid var(--bs-border-color);
  margin-top: 1.25rem;
  padding-top: 1.1rem;
}

.vault-deal-calc__label {
  font-size: 0.8rem;
  color: var(--bs-secondary-color);
  margin-bottom: 0.15rem;
}

.vault-deal-calc__value {
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.2;
}

.vault-deal-calc__value--muted {
  color: var(--bs-secondary-color);
  font-weight: 600;
}

.vault-deal-stat {
  background: #faf8f5;
  border: 1px solid #ebe6df;
  border-radius: 0.35rem;
  padding: 0.65rem 0.75rem;
  text-align: center;
}

[data-bs-theme="dark"] .vault-deal-stat {
  background: var(--bs-tertiary-bg);
  border-color: var(--bs-border-color);
}

.vault-deal-stat__label {
  font-size: 0.7rem;
  color: var(--bs-secondary-color);
  margin-bottom: 0.2rem;
}

.vault-deal-stat__value {
  font-size: 0.95rem;
  font-weight: 700;
}

.vault-deal-stat__value--register {
  color: #1565a8;
}

.vault-deal-stat__value--extra {
  color: #7a5c3a;
}

.vault-deal-actions .btn {
  font-size: 0.875rem;
  padding: 0.55rem 1rem;
}

/* Milestone setup (Clients) */
.milestone-client-info-table th,
.milestone-client-info-table td {
  padding: 0.5rem 0.85rem;
  vertical-align: middle;
  border-color: var(--bs-border-color);
}

.milestone-client-info-table th {
  font-weight: 500;
  font-size: 0.8125rem;
}

.milestone-slab-header {
  background: #1565a8 !important;
  border-bottom: none;
}

[data-bs-theme="dark"] .milestone-slab-header {
  background: #1a4d7a !important;
}

.milestone-slab-row--editing td {
  background: rgba(var(--bs-primary-rgb), 0.06);
}

.milestone-slab-date {
  min-width: 9.5rem;
  max-width: 10.5rem;
  margin: 0 auto;
  cursor: pointer;
}

.milestone-interest-rate-input {
  width: 5.5rem;
  max-width: 100%;
}

/* Slabs — payment schedule page */
.slab-schedule-picker {
  border-radius: 0.5rem;
}

:not([data-bs-theme="dark"]) .slab-schedule-picker.card {
  background: #f3f6f9;
  border: 1px solid #b4b4b4;
  box-shadow: none;
}

[data-bs-theme="dark"] .slab-schedule-picker.card {
  background: var(--f21-content-surface, #152035);
  border: 1px solid var(--bs-border-color);
}

.slab-schedule-picker__field {
  display: flex;
  flex-direction: column;
}

.slab-schedule-picker__hint-slot {
  min-height: 1.25rem;
  margin-top: 0.35rem;
  margin-bottom: 0;
  line-height: 1.25;
}

.slab-schedule-picker__hint-slot:empty {
  visibility: hidden;
}

.slab-schedule-picker__action-label {
  visibility: hidden;
}

.slab-schedule-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 0.75rem;
}

.slab-schedule-summary__item {
  background: var(--bs-tertiary-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 0.4rem;
  padding: 0.65rem 0.85rem;
}

.slab-schedule-summary__label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--bs-secondary-color);
  margin-bottom: 0.2rem;
}

.slab-schedule-summary__value {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25;
}

.slab-schedule-summary__value--amount {
  font-size: 1.1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Payment schedule — booking summary card */
.booking-schedule-summary {
  overflow: hidden;
  border-radius: 0.75rem;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

:not([data-bs-theme="dark"]) .booking-schedule-summary.slab-schedule-card {
  background: #ffffff;
  border: 1px solid #d8dee8;
}

[data-bs-theme="dark"] .booking-schedule-summary.slab-schedule-card {
  background: var(--f21-content-surface, #152035);
  border-color: rgba(100, 130, 175, 0.28);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.booking-schedule-summary__hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  padding: 1.1rem 1.35rem;
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 55%, #1e40af 100%);
  color: #ffffff;
}

.booking-schedule-summary__hero-main {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  min-width: 0;
}

.booking-schedule-summary__hero-aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.45rem;
  flex-shrink: 0;
}

.booking-schedule-summary__hero-name {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.25;
  color: #ffffff;
}

.booking-schedule-summary__hero-meta {
  margin-top: 0.2rem;
  font-size: 0.8125rem;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.88);
}

.booking-schedule-summary__avatar {
  flex-shrink: 0;
  width: 3.1rem;
  height: 3.1rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.02em;
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  border: 2px solid rgba(255, 255, 255, 0.35);
}

.booking-schedule-summary__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
}

.booking-schedule-summary__badge--active {
  background: rgba(34, 197, 94, 0.22);
  color: #dcfce7;
  border: 1px solid rgba(134, 239, 172, 0.45);
}

.booking-schedule-summary__badge--active::before {
  content: "";
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.35);
}

.booking-schedule-summary__badge--cancelled {
  background: rgba(248, 113, 113, 0.2);
  color: #fee2e2;
  border: 1px solid rgba(252, 165, 165, 0.45);
}

.booking-schedule-summary__code {
  text-align: right;
}

.booking-schedule-summary__code-label {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.78);
  margin-right: 0.35rem;
}

.booking-schedule-summary__code-value {
  font-size: 0.95rem;
  font-weight: 700;
  color: #ffffff;
  font-variant-numeric: tabular-nums;
}

.booking-schedule-summary__body {
  padding: 1.15rem 1.35rem 1.35rem;
}

.booking-schedule-summary__section + .booking-schedule-summary__section {
  margin-top: 1.15rem;
  padding-top: 1.15rem;
  border-top: 1px solid var(--bs-border-color);
}

:not([data-bs-theme="dark"]) .booking-schedule-summary__section + .booking-schedule-summary__section {
  border-top-color: #e8ecf2;
}

[data-bs-theme="dark"] .booking-schedule-summary__section + .booking-schedule-summary__section {
  border-top-color: rgba(100, 130, 175, 0.22);
}

.booking-schedule-summary__section-title {
  margin: 0 0 0.75rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bs-secondary-color);
}

.booking-schedule-summary__item-label {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--bs-secondary-color);
  margin-bottom: 0.3rem;
}

.booking-schedule-summary__item-value {
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--bs-body-color);
}

.booking-schedule-summary__item-value--amount {
  font-size: 1.2rem;
  font-variant-numeric: tabular-nums;
}

.booking-schedule-summary__unit-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.7rem;
}

.booking-schedule-summary__unit-item {
  border-radius: 0.55rem;
  padding: 0.7rem 0.85rem;
  min-width: 0;
}

:not([data-bs-theme="dark"]) .booking-schedule-summary__unit-item {
  background: #f8fafc;
  border: 1px solid #d8dee8;
}

[data-bs-theme="dark"] .booking-schedule-summary__unit-item {
  background: var(--f21-content-surface-alt, #1a2840);
  border: 1px solid rgba(100, 130, 175, 0.24);
}

.booking-schedule-summary__fin-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.booking-schedule-summary__fin-item {
  position: relative;
  border-radius: 0.55rem;
  padding: 0.8rem 0.95rem 0.8rem 1.05rem;
  min-width: 0;
  overflow: hidden;
}

.booking-schedule-summary__fin-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  border-radius: 0.55rem 0 0 0.55rem;
}

:not([data-bs-theme="dark"]) .booking-schedule-summary__fin-item {
  background: #f8fafc;
  border: 1px solid #d8dee8;
}

[data-bs-theme="dark"] .booking-schedule-summary__fin-item {
  background: var(--f21-content-surface-alt, #1a2840);
  border: 1px solid rgba(100, 130, 175, 0.24);
}

.booking-schedule-summary__fin-item--consideration::before {
  background: #2563eb;
}

.booking-schedule-summary__fin-item--consideration .booking-schedule-summary__item-value {
  color: #1d4ed8;
}

.booking-schedule-summary__fin-item--carpet::before {
  background: #16a34a;
}

.booking-schedule-summary__fin-item--carpet .booking-schedule-summary__item-value {
  color: #15803d;
}

.booking-schedule-summary__fin-item--booked::before {
  background: #7c3aed;
}

.booking-schedule-summary__fin-item--booked .booking-schedule-summary__item-value {
  color: #6d28d9;
}

[data-bs-theme="dark"] .booking-schedule-summary__fin-item--consideration .booking-schedule-summary__item-value {
  color: #60a5fa;
}

[data-bs-theme="dark"] .booking-schedule-summary__fin-item--carpet .booking-schedule-summary__item-value {
  color: #4ade80;
}

[data-bs-theme="dark"] .booking-schedule-summary__fin-item--booked .booking-schedule-summary__item-value {
  color: #a78bfa;
}

.booking-schedule-summary__date {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.booking-schedule-summary__date-icon {
  flex-shrink: 0;
  opacity: 0.85;
}

.booking-schedule-summary__fin-item--booked .booking-schedule-summary__date-icon {
  color: currentColor;
}

.booking-schedule-summary__balances-table {
  margin-bottom: 0;
  font-size: 0.875rem;
}

:not([data-bs-theme="dark"]) .booking-schedule-summary__balances-table {
  --slab-schedule-grid: #d8dee8;
  border: 1px solid var(--slab-schedule-grid);
  border-radius: 0.55rem;
  overflow: hidden;
}

:not([data-bs-theme="dark"]) .booking-schedule-summary__balances-table th,
:not([data-bs-theme="dark"]) .booking-schedule-summary__balances-table td {
  border: 1px solid var(--slab-schedule-grid);
}

:not([data-bs-theme="dark"]) .booking-schedule-summary__balances-table thead th {
  background: #f1f5f9;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--bs-secondary-color);
}

[data-bs-theme="dark"] .booking-schedule-summary__balances-table {
  border: 1px solid rgba(100, 130, 175, 0.24);
  border-radius: 0.55rem;
  overflow: hidden;
}

[data-bs-theme="dark"] .booking-schedule-summary__balances-table th,
[data-bs-theme="dark"] .booking-schedule-summary__balances-table td {
  border-color: rgba(100, 130, 175, 0.22);
}

[data-bs-theme="dark"] .booking-schedule-summary__balances-table thead th {
  background: var(--f21-content-surface-alt, #1a2840);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--bs-secondary-color);
}

@media (max-width: 991.98px) {
  .booking-schedule-summary__unit-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .booking-schedule-summary__fin-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 575.98px) {
  .booking-schedule-summary__unit-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .booking-schedule-summary__hero-aside {
    align-items: flex-start;
    width: 100%;
  }

  .booking-schedule-summary__code {
    text-align: left;
  }
}

.slab-schedule-card {
  border: 1px solid var(--bs-border-color);
  border-radius: 0.5rem;
  overflow: hidden;
}

.slab-schedule-card .card-header {
  background: var(--bs-tertiary-bg);
  border-bottom: 1px solid var(--bs-border-color);
  padding: 0.75rem 1rem;
}

.slab-schedule-table thead th {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
  text-align: center;
  vertical-align: middle;
}

/* Light theme: Excel-style visible grid on slab / payment schedule tables */
:not([data-bs-theme="dark"]) .slab-schedule-table {
  --slab-schedule-grid: #b4b4b4;
  border-collapse: collapse;
  border: 1px solid var(--slab-schedule-grid);
}

:not([data-bs-theme="dark"]) .slab-schedule-table th,
:not([data-bs-theme="dark"]) .slab-schedule-table td {
  border: 1px solid var(--slab-schedule-grid);
}

:not([data-bs-theme="dark"]) .slab-schedule-table thead th {
  background: #f2f2f2;
  border-color: var(--slab-schedule-grid);
  color: #212529;
}

:not([data-bs-theme="dark"]) .slab-schedule-table tfoot td {
  background: #f8f9fa;
  border-color: var(--slab-schedule-grid);
}

/* Dark theme slab grid — full rules near end of file (after generic .table overrides) */

.slab-schedule-table--resizable {
  table-layout: fixed;
  width: 100%;
}

.slab-schedule-table--resizable thead th.slab-schedule-th--resizable {
  position: relative;
  overflow: hidden;
  text-overflow: ellipsis;
}

.slab-schedule-table--resizable tbody td,
.slab-schedule-table--resizable tfoot td {
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.slab-schedule-col-resize {
  position: absolute;
  top: 0;
  right: -3px;
  width: 7px;
  height: 100%;
  cursor: col-resize;
  user-select: none;
  touch-action: none;
  z-index: 3;
}

.slab-schedule-col-resize:hover,
body.slab-schedule-col-resizing .slab-schedule-col-resize {
  background: rgba(13, 110, 253, 0.28);
}

body.slab-schedule-col-resizing {
  cursor: col-resize !important;
  user-select: none;
}

.slab-schedule-table.f21-table-totals thead th.text-center {
  text-align: center !important;
}

.slab-schedule-ledger-table .slab-ledger-row--milestone td {
  font-weight: 600;
  background: rgba(21, 101, 168, 0.1);
  border-top: 2px solid rgba(21, 101, 168, 0.35);
}

.slab-schedule-ledger-table .slab-ledger-milestone-title {
  color: #1565a8;
  font-weight: 700;
  font-size: 0.9375rem;
}

.slab-schedule-ledger-table .slab-ledger-row--milestone .slab-amt--agreed {
  color: #1565a8;
  font-weight: 700;
}

.slab-schedule-ledger-table .slab-ledger-row--today td {
  border-top: 1px dashed var(--bs-border-color);
  color: var(--bs-body-color);
}

.slab-schedule-ledger-table .slab-ledger-row--today td.text-muted {
  color: var(--bs-secondary-color) !important;
}

.slab-schedule-ledger-table .slab-ledger-row--receipt td {
  font-size: 0.875rem;
}

.slab-schedule-ledger-table .slab-schedule-col--slab {
  min-width: 11rem;
  white-space: normal;
  word-break: break-word;
}

.slab-schedule-ledger-table .slab-schedule-col--info {
  min-width: 14rem;
  white-space: normal;
  word-break: break-word;
}

[data-bs-theme="dark"] .slab-schedule-ledger-table .slab-ledger-row--milestone td {
  background: rgba(110, 181, 247, 0.12);
  border-top: 2px solid rgba(110, 181, 247, 0.4) !important;
}

[data-bs-theme="dark"] .slab-schedule-ledger-table .slab-ledger-milestone-title,
[data-bs-theme="dark"] .slab-schedule-ledger-table .slab-ledger-row--milestone .slab-amt--agreed {
  color: #7ec8ff;
}

.slab-schedule-table tbody tr:hover {
  background: rgba(var(--bs-primary-rgb), 0.04);
}

.slab-schedule-table tfoot td {
  border-top: 2px solid var(--bs-border-color);
  font-size: 0.9rem;
}

.slab-schedule-table .form-control-sm.text-end {
  font-variant-numeric: tabular-nums;
}

.slab-amt--paid,
.slab-amt--paid span,
[id^="slabPaidDisplay_"],
.slab-tree-summary-paid,
#scheduleTotalPaid,
.slab-schedule-th--paid {
  color: #198754 !important;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.slab-payment-entry-table .slab-payment-entry-amt .form-control,
.slab-payment-entry-table .slab-payment-entry-amt .js-slab-pay-amount-display {
  color: #198754 !important;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

[data-bs-theme="dark"] .slab-amt--paid,
[data-bs-theme="dark"] .slab-amt--paid span,
[data-bs-theme="dark"] [id^="slabPaidDisplay_"],
[data-bs-theme="dark"] .slab-tree-summary-paid,
[data-bs-theme="dark"] #scheduleTotalPaid,
[data-bs-theme="dark"] .slab-schedule-th--paid,
[data-bs-theme="dark"] .slab-payment-entry-table .slab-payment-entry-amt .form-control,
[data-bs-theme="dark"] .slab-payment-entry-table .slab-payment-entry-amt .js-slab-pay-amount-display {
  color: #75b798 !important;
}

.slab-amt--balance {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.slab-schedule-table .col-sno {
  width: 3rem;
  color: var(--bs-secondary-color);
  font-weight: 600;
}

/* Slab amount colors (aligned with vault: agreed/register = blue, extra = tan) */
.slab-amt--base,
.slab-amt--agreed {
  color: #1565a8;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.slab-amt--extra {
  color: #7a5c3a;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.slab-amt--total {
  color: var(--bs-body-color);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

[data-bs-theme="dark"] .slab-amt--base,
[data-bs-theme="dark"] .slab-amt--agreed {
  color: #8ec5f0;
}

[data-bs-theme="dark"] .slab-amt--extra {
  color: #e8d4b8;
}

.slab-schedule-table thead th.slab-schedule-th--agreed {
  color: #1565a8;
}

.slab-schedule-table thead th.slab-schedule-th--extra {
  color: #7a5c3a;
}

[data-bs-theme="dark"] .slab-schedule-table thead th.slab-schedule-th--agreed {
  color: #8ec5f0;
}

[data-bs-theme="dark"] .slab-schedule-table thead th.slab-schedule-th--extra {
  color: #e8d4b8;
}

.slab-schedule-table .form-control.slab-amt-input--agreed {
  color: #1565a8;
  font-weight: 600;
  border-color: rgba(21, 101, 168, 0.35);
  background-color: rgba(21, 101, 168, 0.04);
}

.slab-schedule-table .form-control.slab-amt-input--extra {
  color: #7a5c3a;
  font-weight: 600;
  border-color: rgba(122, 92, 58, 0.35);
  background-color: rgba(122, 92, 58, 0.06);
}

[data-bs-theme="dark"] .slab-schedule-table .form-control.slab-amt-input--agreed {
  color: #8ec5f0;
  border-color: rgba(142, 197, 240, 0.35);
  background-color: rgba(21, 101, 168, 0.12);
}

[data-bs-theme="dark"] .slab-schedule-table .form-control.slab-amt-input--extra {
  color: #e8d4b8;
  border-color: rgba(232, 212, 184, 0.25);
  background-color: rgba(122, 92, 58, 0.15);
}

.slab-schedule-table tfoot .slab-amt--agreed,
.slab-schedule-table tfoot .slab-amt--extra {
  font-size: 1rem;
}

.slab-tree-toggle {
  color: var(--bs-secondary-color);
  text-decoration: none;
  line-height: 1;
  vertical-align: baseline;
}

.slab-tree-toggle:hover,
.slab-tree-toggle:focus {
  color: var(--bs-primary);
  text-decoration: none;
}

.slab-tree-chevron {
  display: inline-block;
  font-size: 0.85rem;
  width: 0.85rem;
  text-align: center;
}

.slab-payment-tree-row > td {
  border-top: none !important;
  padding: 0 !important;
}

.slab-payment-collapse:not(.show) {
  display: none;
}

.slab-payment-collapse.show {
  display: block;
}

.slab-schedule-data-row:has(+ .slab-payment-tree-row.show) td {
  border-bottom-color: transparent;
}

.slab-payment-tree-panel {
  margin: 0 0.5rem 0.5rem 2.25rem;
  padding: 0.5rem 0.75rem;
  border-left: 3px solid var(--bs-primary-border-subtle, rgba(13, 110, 253, 0.35));
  border-radius: 0 0.25rem 0.25rem 0;
  background: var(--bs-body-bg);
}

.slab-payment-tree-summary {
  padding-bottom: 0.35rem;
  margin-bottom: 0.35rem;
  border-bottom: 1px dashed var(--bs-border-color);
}

.slab-payment-entry-table thead th {
  font-weight: 500;
  border-bottom: 1px solid var(--bs-border-color);
}

.slab-payment-entry-table .slab-payment-entry-row td {
  vertical-align: middle;
}

.slab-tree-toggle--plus .slab-tree-chevron {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
}

.slab-save-payment-btn {
  min-width: 1.75rem;
  font-weight: 700;
}

.slab-save-payment-btn--saved {
  color: var(--bs-success) !important;
  border-color: var(--bs-success) !important;
}

.slab-save-payment-btn--error {
  color: var(--bs-danger) !important;
  border-color: var(--bs-danger) !important;
}

.slab-payment-entry-row--saved .slab-save-payment-btn {
  border-color: var(--bs-success);
}

.slab-payment-entry-actions .btn + .btn {
  margin-left: 0.15rem;
}

/* Footer totals align under amount columns (slab + vault tables) */
.f21-table-totals {
  table-layout: fixed;
  width: 100%;
}

.f21-table-totals col.f21-col-sno {
  width: 3rem;
}

.f21-table-totals col.f21-col-date {
  width: 11rem;
}

.f21-table-totals col.f21-col-label {
  width: auto;
}

.f21-table-totals col.f21-col-pct {
  width: 5.5rem;
}

.f21-table-totals col.f21-col-amount {
  width: 9rem;
}

.f21-table-totals col.f21-col-actions {
  width: 8.5rem;
}

.f21-table-totals tfoot td {
  border-top: 2px solid var(--bs-border-color);
  vertical-align: middle;
}

.f21-table-totals tfoot .text-end,
.f21-table-totals thead .text-end {
  text-align: right !important;
}

.f21-table-totals .f21-total-amount-cell {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Remaining balance under vault payment total (readable in light + dark) */
.f21-remaining-line {
  font-size: 0.8125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #7a5c3a;
  margin-top: 0.15rem;
}

[data-bs-theme="dark"] .f21-remaining-line {
  color: #f0d4a8;
}

/* ========== Dark theme: main content panel (tables, cards, light utilities) ========== */
[data-bs-theme="dark"] .floor21-panel .card {
  background-color: var(--f21-content-surface, #152035);
  color: var(--bs-body-color);
  border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .floor21-panel .card-header {
  background-color: var(--f21-content-surface-alt, #1a2840) !important;
  color: var(--f21-card-header-color) !important;
  border-bottom-color: var(--bs-border-color) !important;
}

[data-bs-theme="dark"] .floor21-panel .card-footer {
  background-color: var(--f21-content-surface-alt, #1a2840);
  color: var(--bs-body-color);
  border-top-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .floor21-panel .table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--bs-body-color);
  --bs-table-border-color: var(--bs-border-color);
  --bs-table-striped-bg: rgba(255, 255, 255, 0.04);
  --bs-table-active-bg: rgba(255, 255, 255, 0.06);
  --bs-table-hover-bg: rgba(255, 255, 255, 0.06);
}

[data-bs-theme="dark"] .floor21-panel .table-light,
[data-bs-theme="dark"] .floor21-panel thead.table-light,
[data-bs-theme="dark"] .floor21-panel tfoot.table-light,
[data-bs-theme="dark"] .floor21-panel tr.table-light,
[data-bs-theme="dark"] .floor21-panel .table-light > th,
[data-bs-theme="dark"] .floor21-panel .table-light > td {
  --bs-table-bg: var(--f21-content-surface-alt, #1a2840);
  --bs-table-color: var(--bs-body-color);
  --bs-table-border-color: var(--bs-border-color);
  background-color: var(--f21-content-surface-alt, #1a2840) !important;
  color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .floor21-panel .table > thead > tr > th,
[data-bs-theme="dark"] .floor21-panel .table > tfoot > tr > td,
[data-bs-theme="dark"] .floor21-panel .table > tfoot > tr > th {
  background-color: var(--f21-content-surface-alt, #1a2840);
  color: var(--bs-body-color);
  border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .floor21-panel .table thead th {
  background-color: var(--f21-content-surface-alt, #1a2840);
  color: var(--bs-body-color);
  border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .floor21-panel .table-hover > tbody > tr:hover > * {
  --bs-table-color-state: var(--bs-body-color);
  --bs-table-bg-state: rgba(255, 255, 255, 0.06);
}

[data-bs-theme="dark"] .floor21-panel .bg-light,
[data-bs-theme="dark"] .floor21-panel .bg-body-secondary {
  background-color: var(--bs-secondary-bg) !important;
  color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .floor21-panel .card-body.bg-body-tertiary,
[data-bs-theme="dark"] .floor21-panel .border-top.bg-body-tertiary {
  background-color: var(--bs-tertiary-bg) !important;
  color: var(--bs-body-color);
  border-color: var(--bs-border-color) !important;
}

[data-bs-theme="dark"] .floor21-panel .list-group-item {
  background-color: var(--f21-content-surface, #152035);
  color: var(--bs-body-color);
  border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .floor21-panel .list-group-item-action:hover,
[data-bs-theme="dark"] .floor21-panel .list-group-item-action:focus {
  background-color: var(--bs-tertiary-bg);
  color: var(--bs-body-color);
}

[data-bs-theme="dark"] .floor21-panel .form-control:disabled,
[data-bs-theme="dark"] .floor21-panel .form-control[readonly] {
  background-color: var(--bs-secondary-bg);
  color: var(--bs-body-color);
  border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] #receipt-form-modal .receipt-number-preview,
[data-bs-theme="dark"] #receipt-form-modal .form-control[readonly] {
  background-color: var(--bs-secondary-bg);
  color: var(--bs-body-color);
  border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] #receipt-form-modal .receipt-number-preview strong {
  color: var(--bs-emphasis-color);
}

.receipt-history-details-muted {
  color: var(--bs-secondary-color);
}

.receipt-history-actions .receipt-action-btn {
  color: var(--bs-body-color);
  border-color: var(--bs-border-color);
}

.receipt-history-actions .receipt-action-btn.btn-outline-primary {
  color: var(--bs-primary);
  border-color: var(--bs-primary);
}

.receipt-history-actions .receipt-action-btn.btn-outline-primary:hover,
.receipt-history-actions .receipt-action-btn.btn-outline-primary:focus {
  color: var(--bs-primary-text-emphasis, #fff);
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

.receipt-history-actions .receipt-action-btn.btn-outline-secondary:hover,
.receipt-history-actions .receipt-action-btn.btn-outline-secondary:focus {
  color: var(--bs-body-color);
  background-color: var(--bs-secondary-bg);
  border-color: var(--bs-border-color);
}

.receipt-back-link {
  color: var(--bs-link-color);
}

.receipt-back-link:hover,
.receipt-back-link:focus {
  color: var(--bs-link-hover-color);
}

[data-bs-theme="dark"] .receipt-history-table {
  --bs-table-color: var(--bs-body-color);
  --bs-table-bg: transparent;
}

[data-bs-theme="dark"] .receipt-history-actions .receipt-action-btn.btn-outline-secondary {
  color: var(--bs-body-color);
  border-color: rgba(255, 255, 255, 0.45);
}

[data-bs-theme="dark"] .receipt-history-actions .receipt-action-btn.btn-outline-primary {
  color: #7dd3fc;
  border-color: #38bdf8;
}

[data-bs-theme="dark"] .receipt-history-actions .receipt-action-btn.btn-outline-primary:hover,
[data-bs-theme="dark"] .receipt-history-actions .receipt-action-btn.btn-outline-primary:focus {
  color: #0f172a;
  background-color: #38bdf8;
  border-color: #38bdf8;
}

[data-bs-theme="dark"] .vault-deal-stat__value--register {
  color: #8ec5f0;
}

[data-bs-theme="dark"] .vault-deal-stat__value--extra {
  color: #e8d4b8;
}

[data-bs-theme="dark"] .f21-table-totals tfoot.table-light,
[data-bs-theme="dark"] .f21-table-totals thead.table-light {
  --bs-table-bg: var(--f21-content-surface-alt, #1a2840);
  --bs-table-color: var(--bs-body-color);
  --bs-table-border-color: var(--bs-border-color);
  background-color: var(--f21-content-surface-alt, #1a2840) !important;
  color: var(--bs-body-color) !important;
}

/* Slab schedule — dark theme full grid (Bootstrap inset box-shadow hides thead vertical lines) */
[data-bs-theme="dark"] .floor21-panel .slab-schedule-table {
  --slab-schedule-grid: rgba(100, 130, 175, 0.38);
  border: 1px solid var(--slab-schedule-grid);
  border-collapse: separate;
  border-spacing: 0;
}

[data-bs-theme="dark"] .floor21-panel .slab-schedule-table.table > :not(caption) > * > * {
  border-bottom: 1px solid var(--slab-schedule-grid) !important;
  border-right: 1px solid var(--slab-schedule-grid) !important;
  box-shadow: none !important;
}

[data-bs-theme="dark"] .floor21-panel .slab-schedule-table > thead.table-light > tr > th,
[data-bs-theme="dark"] .floor21-panel .slab-schedule-table > thead > tr > th {
  border-top: 1px solid var(--slab-schedule-grid) !important;
  background-color: var(--f21-content-surface-alt, #1a2840) !important;
  color: var(--bs-body-color);
}

[data-bs-theme="dark"] .floor21-panel .slab-schedule-table > tfoot.table-light > tr > td,
[data-bs-theme="dark"] .floor21-panel .slab-schedule-table > tfoot.table-light > tr > th,
[data-bs-theme="dark"] .floor21-panel .slab-schedule-table > tfoot > tr > td,
[data-bs-theme="dark"] .floor21-panel .slab-schedule-table > tfoot > tr > th {
  background-color: var(--f21-content-surface-alt, #1a2840);
}

[data-bs-theme="dark"] .floor21-panel .slab-schedule-table > :not(caption) > * > *:first-child {
  border-left: 1px solid var(--slab-schedule-grid) !important;
}

[data-bs-theme="dark"] .floor21-panel .slab-schedule-table > thead > tr > th:last-child,
[data-bs-theme="dark"] .floor21-panel .slab-schedule-table > tbody > tr > td:last-child,
[data-bs-theme="dark"] .floor21-panel .slab-schedule-table > tfoot > tr > td:last-child,
[data-bs-theme="dark"] .floor21-panel .slab-schedule-table > tfoot > tr > th:last-child {
  border-right: 0 !important;
}

[data-bs-theme="dark"] .floor21-panel .slab-schedule-table > tfoot > tr:last-child > td,
[data-bs-theme="dark"] .floor21-panel .slab-schedule-table > tfoot > tr:last-child > th {
  border-bottom: 0 !important;
}

[data-bs-theme="dark"] .floor21-panel .slab-schedule-table:not(:has(> tfoot)) > tbody > tr:last-child > td {
  border-bottom: 0 !important;
}

[data-bs-theme="dark"] .slab-schedule-ledger-table .slab-ledger-row--today td {
  border-top: 1px dashed var(--bs-border-color) !important;
}

.floor21-password-wrap .floor21-password-toggle {
  padding: 0.25rem 0.625rem;
  line-height: 1;
  z-index: 3;
  text-decoration: none;
  color: var(--bs-secondary-color);
}

.floor21-password-wrap .floor21-password-toggle:hover,
.floor21-password-wrap .floor21-password-toggle:focus {
  color: var(--bs-body-color);
  box-shadow: none;
}

.floor21-sort-th {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}

.floor21-sort-th:hover {
  color: var(--bs-primary);
  text-decoration: none;
}

.floor21-sort-th--active {
  font-weight: 600;
  color: var(--bs-primary);
}

.floor21-sort-th__icon {
  font-size: 0.7em;
  opacity: 0.85;
}

/* Admin list tables — visible cell borders (projects, etc.) */
.f21-list-table-wrap {
  padding: 0 1rem 1rem;
}

.f21-list-table {
  --f21-list-table-border: #cbd5e1;
  --bs-table-border-color: var(--f21-list-table-border);
  width: 100%;
  margin-bottom: 0;
  border: 1px solid var(--f21-list-table-border);
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 0.5rem;
  overflow: hidden;
}

.f21-list-table.table > :not(caption) > * > * {
  border-bottom: 1px solid var(--f21-list-table-border);
  border-right: 1px solid var(--f21-list-table-border);
  box-shadow: none;
}

.f21-list-table > thead > tr > th:last-child,
.f21-list-table > tbody > tr > td:last-child {
  border-right: 0;
}

.f21-list-table > tbody > tr:last-child > td {
  border-bottom: 0;
}

.f21-list-table > thead > tr > th {
  background: #f1f5f9;
  font-weight: 600;
  vertical-align: middle;
}

.f21-list-table > tbody > tr > td {
  vertical-align: middle;
}

[data-bs-theme="dark"] .f21-list-table {
  --f21-list-table-border: rgba(100, 130, 175, 0.32);
}

[data-bs-theme="dark"] .f21-list-table > thead > tr > th {
  background: var(--f21-content-surface-alt, #1a2840);
}

[data-bs-theme="dark"] .f21-list-table > tbody > tr > td {
  background: var(--f21-content-surface, #152035);
}

[data-bs-theme="dark"] .card .f21-list-table > tbody > tr:hover > td {
  background: color-mix(in srgb, var(--f21-content-surface-alt, #1a2840) 55%, var(--f21-content-surface, #152035) 45%);
}

/* Ground floor shop panel (mirrors parking section layout; separate from parking styles) */
.flat-ground-floor-section {
  margin-top: 0.25rem;
}

.flat-basement-section {
  margin-top: 0.25rem;
}

.flat-basement-section--pending {
  display: none;
}

.flat-ground-floor-section {
  margin-top: 0.35rem;
  padding-top: 0.65rem;
  border-top: 1px dashed rgba(var(--bs-body-color-rgb), 0.18);
}

.flat-ground-floor-section__panel {
  width: 100%;
  min-height: 5.5rem;
  border: 1px solid #6c757d;
  border-radius: 0.5rem;
  background: #e2e3e5;
}

.flat-ground-floor-section--pending {
  display: none;
}

.flat-ground-floor-section--split {
  width: fit-content;
  max-width: 100%;
}

.flat-ground-floor-section > .flat-ground-floor-section__panel.flat-ground-floor-section--split.flat-ground-floor-section--configured {
  align-self: flex-start;
}

.flat-ground-floor-section__layout {
  display: block;
  padding: 0.75rem 1rem;
}

.flat-ground-floor-section--split .flat-ground-floor-section__layout {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 0.75rem;
}

.flat-ground-floor-section__summary {
  min-width: 0;
}

.flat-ground-floor-section--split .flat-ground-floor-section__summary {
  flex: 0 0 11rem;
  max-width: 40%;
  overflow: visible;
}

.flat-ground-floor-section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.5rem;
}

.flat-ground-floor-section__title {
  font-weight: 700;
  font-size: 0.95rem;
}

.flat-ground-floor-section__meta {
  font-size: 0.8rem;
  color: var(--bs-secondary-color);
}

.flat-ground-floor-section__plan {
  display: none;
  min-width: 0;
}

.flat-ground-floor-section--split .flat-ground-floor-section__plan {
  display: block;
  flex: 0 0 auto;
  width: fit-content;
  max-width: calc(100% - 12rem);
  overflow-x: auto;
}

.flat-ground-floor-section__plan-root {
  width: fit-content;
}

.shop-plan__sheet--grid {
  --shop-cell-base-width: 3.6rem;
  --shop-cell-base-height: 4rem;
  --shop-cell-width: calc(var(--shop-cell-base-width) * var(--shop-car-scale, 1));
  --shop-cell-height: calc(var(--shop-cell-base-height) * var(--shop-car-scale, 1));
  width: fit-content;
  max-width: 100%;
  padding: 0.55rem;
  overflow: visible;
}

.shop-plan__grid {
  display: grid;
  width: fit-content;
  max-width: 100%;
  grid-template-columns: repeat(var(--shop-grid-cols, 14), var(--shop-cell-width));
  grid-template-rows: repeat(var(--shop-grid-rows, 8), var(--shop-cell-height));
  gap: calc(3px * var(--shop-car-scale, 1));
}

.shop-plan__cell {
  border: 1.5px dashed #ced4da;
  border-radius: 0.375rem;
  width: var(--shop-cell-width);
  height: var(--shop-cell-height);
  min-height: var(--shop-cell-height);
  z-index: 1;
  background: transparent;
}

.shop-plan__slot {
  z-index: 2;
  align-self: center;
  justify-self: center;
  width: var(--shop-cell-width);
  height: var(--shop-cell-height);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 0.0625rem;
  cursor: pointer;
}

.shop-plan__slot--clickable:hover {
  filter: brightness(1.05);
}

.shop-plan__slot--selected {
  outline: 3px solid var(--bs-primary);
  outline-offset: 2px;
  z-index: 2;
}

.shop-plan__bay {
  flex: 1 1 0;
  width: 100%;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.35rem;
  border: 2px solid rgba(0, 0, 0, 0.15);
  box-sizing: border-box;
}

.shop-plan__label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  flex-shrink: 0;
}

.shop-plan__bay--has-partner {
  flex-direction: column;
  gap: 0.08rem;
  padding: 0.12rem 0.1rem;
  justify-content: center;
}

.shop-plan__partner-in-bay {
  font-size: clamp(0.42rem, 7cqh, 0.58rem);
  font-weight: 600;
  line-height: 1.1;
  text-align: center;
  color: inherit;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
  flex-shrink: 0;
}

.shop-plan__slot-no {
  font-size: 0.65rem;
  font-weight: 600;
  line-height: 1;
  flex-shrink: 0;
}

.shop-plan__unit-no {
  font-size: 0.58rem;
  line-height: 1;
  color: var(--bs-secondary-color);
}

.shop-plan__partner-tag {
  display: block;
  font-size: 0.52rem;
  line-height: 1.1;
  color: var(--bs-secondary-color);
  margin-top: 0.1rem;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shop-plan__slot--shop[data-bookable="false"]:not(.shop-plan__slot--booked):not(.shop-plan__slot--hold) {
  opacity: 0.45;
  filter: grayscale(0.35);
}

.shop-plan__slot--available .shop-plan__bay {
  background: #d1e7dd;
  border-color: #198754;
  color: #0f5132;
}

.shop-plan__slot--booked .shop-plan__bay {
  background: #cfe2ff;
  border-color: #0d6efd;
  color: #084298;
}

.shop-plan__slot--hold .shop-plan__bay {
  background: #fff3cd;
  border-color: #ffc107;
  color: #664d03;
}

.shop-plan__slot--deactivated .shop-plan__bay {
  background: #e2e3e5;
  border-color: #6c757d;
  color: #495057;
}

.shop-plan__layout-toolbar {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 0.5rem;
}

.shop-plan__layout-hint {
  line-height: 1.35;
}

.shop-plan__grid-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.shop-plan__cell--drop.shop-plan__cell--drag-over {
  background: rgba(13, 110, 253, 0.12);
  border-color: #0d6efd;
}

/* Ground floor panel resize: fluid grid fills panel width and height (overrides fit-content rules above). */
.flat-ground-floor-section__panel.floor21-resizable-panel .flat-ground-floor-section__layout {
  align-items: stretch;
  height: 100%;
  min-height: 0;
}

.flat-ground-floor-section__panel.floor21-resizable-panel.flat-ground-floor-section--split .flat-ground-floor-section__plan {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  width: auto;
  max-width: none;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.flat-ground-floor-section__panel.floor21-resizable-panel .flat-ground-floor-section__plan-root {
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.flat-ground-floor-section__panel.floor21-resizable-panel .shop-plan__sheet--grid {
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  display: flex;
  flex-direction: column;
}

.flat-ground-floor-section__panel.floor21-resizable-panel .shop-plan__grid {
  width: 100%;
  height: 100%;
  flex: 1 1 0;
  min-height: 0;
  max-width: none;
  align-content: stretch;
  grid-template-columns: repeat(var(--shop-grid-cols, 14), minmax(0, 1fr));
  grid-template-rows: repeat(var(--shop-grid-rows, 8), minmax(2.25rem, 1fr));
}

.flat-ground-floor-section__panel.floor21-resizable-panel .shop-plan__cell,
.flat-ground-floor-section__panel.floor21-resizable-panel .shop-plan__slot,
.flat-ground-floor-section__panel.floor21-resizable-panel .shop-plan__fixture {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-width: none;
  align-self: stretch;
  justify-self: stretch;
}

.flat-ground-floor-section__panel.floor21-resizable-panel .shop-plan__slot {
  justify-content: flex-end;
  container-type: size;
}

.flat-ground-floor-section__panel.floor21-resizable-panel .shop-plan__bay {
  flex: 1 1 0;
  min-height: 0;
}

.flat-ground-floor-section__panel.floor21-resizable-panel .shop-plan__label,
.flat-ground-floor-section__panel.floor21-resizable-panel .shop-plan__partner-in-bay,
.flat-ground-floor-section__panel.floor21-resizable-panel .shop-plan__slot-no,
.flat-ground-floor-section__panel.floor21-resizable-panel .shop-plan__unit-no {
  font-size: clamp(0.5rem, 2.5cqh, 0.75rem);
}

.flat-ground-floor-section__panel.floor21-resizable-panel .shop-plan__slot--parking .shop-plan__car-svg {
  width: auto;
  height: 100%;
  max-height: 100%;
}

.shop-plan__grid--dragging .shop-plan__slot--draggable,
.shop-plan__grid--dragging .shop-plan__fixture--draggable {
  cursor: grabbing;
}

.shop-plan__slot--dragging,
.shop-plan__fixture--dragging {
  opacity: 0.55;
}

.shop-plan__slot--parking.shop-plan__slot--clickable {
  cursor: pointer;
}

.shop-plan__slot--parking.shop-plan__slot--linked .shop-plan__car-body {
  fill: #0d6efd;
}

.shop-plan__slot--parking.shop-plan__slot--linked .shop-plan__car-roof {
  fill: #6ea8fe;
}

.shop-plan__linked-flat {
  position: absolute;
  left: 50%;
  bottom: 0.1rem;
  transform: translateX(-50%);
  font-size: 0.55rem;
  font-weight: 700;
  line-height: 1;
  color: #084298;
  white-space: nowrap;
  max-width: 95%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shop-plan__slot-no--linked {
  color: #0d6efd;
  font-weight: 700;
}

.shop-plan__slot--parking .shop-plan__bay--parking {
  position: relative;
  background: #f8f9fa;
  border-color: #adb5bd;
  padding: 0.1rem;
}

.shop-plan__slot--parking .shop-plan__car-svg {
  width: calc(100% * var(--shop-parking-car-scale, 1));
  height: auto;
  max-height: 100%;
}

.shop-plan__car-body {
  fill: #6c757d;
}

.shop-plan__car-roof {
  fill: #adb5bd;
}

.shop-plan__car-wheel {
  fill: #343a40;
}

.shop-plan__fixture {
  z-index: 3;
  align-self: center;
  justify-self: center;
  width: var(--shop-cell-width);
  height: var(--shop-cell-height);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  border-radius: 0.35rem;
  border: 2px solid rgba(0, 0, 0, 0.12);
  background: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.1;
}

.shop-plan__fixture--gate {
  background: #fff3cd;
  border-color: #ffc107;
  color: #664d03;
}

.shop-plan__fixture--car-lift {
  background: #e7f1ff;
  border-color: #6ea8fe;
  color: #084298;
}

.shop-plan__fixture--passenger-lift {
  background: #e2e3e5;
  border-color: #6c757d;
  color: #343a40;
}

.shop-plan__fixture-icon {
  width: 1.25rem;
  height: 1.25rem;
}

.shop-plan__fixture-sub {
  font-size: 0.52rem;
  font-weight: 600;
  opacity: 0.85;
}

.shop-plan__fixture--draggable {
  cursor: grab;
}

[data-bs-theme="dark"] .flat-ground-floor-section__panel {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(173, 181, 189, 0.35);
}

[data-bs-theme="dark"] .shop-plan__cell {
  border-color: rgba(173, 181, 189, 0.35);
}

.project-search-select {
  position: relative;
  max-width: 36rem;
}

.project-search-select__input {
  padding-right: 2.25rem;
}

.project-search-select__toggle {
  position: absolute;
  top: 0.45rem;
  right: 0.5rem;
  transform: none;
  border: 0;
  background: transparent;
  color: var(--bs-secondary-color);
  line-height: 1;
  font-size: 0.9rem;
  padding: 0.1rem 0.25rem;
  z-index: 2;
}

.project-search-select__toggle:hover {
  color: var(--bs-emphasis-color);
}

.project-search-select__native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.project-search-select__menu {
  position: absolute;
  z-index: var(--bs-dropdown-zindex, 2000);
  top: calc(100% + 0.25rem);
  left: 0;
  right: 0;
  max-height: 16rem;
  overflow-y: auto;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  background: var(--bs-body-bg);
  box-shadow: var(--bs-box-shadow);
}

.project-search-select__option,
.project-search-select__empty {
  padding: 0.45rem 0.75rem;
  cursor: pointer;
}

.project-search-select__option:hover,
.project-search-select__option.is-active {
  background: var(--bs-tertiary-bg);
}

.project-search-select__empty {
  color: var(--bs-secondary-color);
  cursor: default;
}

.project-search-select__hint {
  margin-top: 0.35rem;
  margin-bottom: 0;
}

.client-multi-search-select {
  position: relative;
}

.client-multi-search-select__box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  min-height: calc(1.5em + 0.75rem + 2px);
  height: auto;
  padding: 0.35rem 0.5rem;
  cursor: text;
}

.client-multi-search-select__box.is-focused {
  border-color: #86b7fe;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.client-multi-search-select__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.client-multi-search-select__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  max-width: 100%;
  padding: 0.15rem 0.35rem 0.15rem 0.55rem;
  border: 1px solid #9ec5fe;
  border-radius: 999px;
  background: #e7f1ff;
  color: #084298;
  font-size: 0.875rem;
  line-height: 1.3;
}

.client-multi-search-select__chip-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.client-multi-search-select__chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  height: 1.1rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #084298;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.client-multi-search-select__chip-remove:hover {
  background: rgba(8, 66, 152, 0.12);
}

.client-multi-search-select__input {
  flex: 1 1 8rem;
  min-width: 8rem;
  border: 0;
  outline: 0;
  background: transparent;
  padding: 0.15rem 0.25rem;
  font-size: 1rem;
  line-height: 1.5;
}

.client-multi-search-select__input::placeholder {
  color: var(--bs-secondary-color);
}

.client-multi-search-select__native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.client-multi-search-select__menu {
  position: absolute;
  z-index: var(--bs-dropdown-zindex, 2000);
  top: calc(100% + 0.25rem);
  left: 0;
  right: 0;
  max-height: 16rem;
  overflow-y: auto;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  background: var(--bs-body-bg);
  box-shadow: var(--bs-box-shadow);
}

.client-multi-search-select__option,
.client-multi-search-select__empty {
  padding: 0.45rem 0.75rem;
  cursor: pointer;
}

.client-multi-search-select__option:hover,
.client-multi-search-select__option.is-active {
  background: var(--bs-tertiary-bg);
}

.client-multi-search-select__empty {
  color: var(--bs-secondary-color);
  cursor: default;
}

[data-bs-theme="dark"] .client-multi-search-select__chip {
  background: rgba(13, 110, 253, 0.2);
  border-color: rgba(13, 110, 253, 0.45);
  color: #9ec5fe;
}

[data-bs-theme="dark"] .client-multi-search-select__chip-remove {
  color: #9ec5fe;
}

.f21-date-field {
  position: relative;
}

.f21-date-field .f21-date-input__display {
  border-radius: 0.65rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.f21-date-field--focused .f21-date-input__display {
  border-color: var(--f21-area-accent, var(--bs-primary));
  box-shadow: 0 0 0 0.2rem var(--f21-area-glow, rgba(13, 110, 253, 0.15));
}

.f21-date-field .f21-date-input__native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.f21-date-input__display {
  padding-right: 2.35rem;
}

.f21-date-input__btn {
  position: absolute;
  top: 50%;
  right: 0.45rem;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  color: var(--bs-secondary-color);
  line-height: 1;
  padding: 0.28rem;
  z-index: 2;
  border-radius: 999px;
  transition: color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}

.f21-date-input__btn:hover {
  color: var(--f21-area-accent, var(--bs-primary));
  background: var(--f21-area-glow, rgba(13, 110, 253, 0.08));
  transform: translateY(-50%) scale(1.05);
}

/* Custom calendar popover */
.f21-date-picker {
  position: fixed;
  z-index: 1080;
  animation: f21-date-picker-in 0.2s cubic-bezier(0.22, 1, 0.36, 1);
  --f21-date-picker-accent: #2563eb;
  --f21-date-picker-accent-deep: #1d4ed8;
  --f21-date-picker-accent-glow: rgba(37, 99, 235, 0.32);
  --f21-date-picker-accent-soft: rgba(37, 99, 235, 0.12);
  --f21-date-weekend: #e05a4f;
  --f21-date-weekend-muted: #c9928c;
  --f21-date-weekend-bg-hover: rgba(224, 90, 79, 0.14);
}

[data-bs-theme="dark"] .f21-date-picker {
  --f21-date-picker-accent: var(--f21-area-accent, #2dd4bf);
  --f21-date-picker-accent-deep: color-mix(in srgb, var(--f21-area-accent, #2dd4bf) 78%, #000);
  --f21-date-picker-accent-glow: var(--f21-area-glow, rgba(45, 212, 191, 0.38));
  --f21-date-picker-accent-soft: var(--f21-area-glow, rgba(45, 212, 191, 0.14));
  --f21-date-weekend: #f0a89e;
  --f21-date-weekend-muted: #c98880;
  --f21-date-weekend-bg-hover: rgba(240, 168, 158, 0.2);
}

@keyframes f21-date-picker-in {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.f21-date-picker__panel {
  width: min(25.5rem, calc(100vw - 1rem));
  padding: 0.75rem 0.8rem 0.65rem;
  border-radius: 1rem;
  border: 1px solid color-mix(in srgb, var(--bs-border-color) 88%, var(--f21-date-picker-accent) 12%);
  background:
    linear-gradient(
      165deg,
      color-mix(in srgb, var(--bs-body-bg) 92%, var(--f21-date-picker-accent) 8%),
      var(--bs-body-bg)
    );
  box-shadow:
    0 1rem 2.25rem rgba(15, 23, 42, 0.16),
    0 0.25rem 0.75rem rgba(15, 23, 42, 0.08),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset;
  overflow: hidden;
}

[data-bs-theme="dark"] .f21-date-picker__panel {
  box-shadow:
    0 1.1rem 2.5rem rgba(0, 0, 0, 0.5),
    0 0.35rem 1rem rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(255, 255, 255, 0.07) inset;
}

.f21-date-picker__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.3rem;
  margin-bottom: 0.65rem;
  padding: 0.35rem 0.4rem;
  border-radius: 0.85rem;
  background: color-mix(in srgb, var(--bs-tertiary-bg) 82%, transparent);
}

.f21-date-picker__nav-group {
  display: flex;
  align-items: center;
  gap: 0.2rem;
}

.f21-date-picker__title {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-width: 12.5rem;
  padding: 0 0.1rem;
}

.f21-date-picker__select {
  min-width: 0;
  padding: 0.38rem 1.75rem 0.38rem 0.55rem;
  font-size: 0.8rem;
  font-weight: 600;
  border: 1px solid color-mix(in srgb, var(--bs-border-color) 90%, var(--f21-date-picker-accent) 10%);
  border-radius: 0.65rem;
  background-color: var(--bs-body-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  background-size: 0.75rem;
  color: var(--bs-emphasis-color);
  cursor: pointer;
  appearance: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.f21-date-picker__select:hover {
  border-color: color-mix(in srgb, var(--f21-date-picker-accent) 45%, var(--bs-border-color));
  background-color: color-mix(in srgb, var(--bs-body-bg) 88%, var(--f21-date-picker-accent-soft));
}

.f21-date-picker__select:focus {
  outline: none;
  border-color: var(--f21-date-picker-accent);
  box-shadow: 0 0 0 3px var(--f21-date-picker-accent-soft);
}

.f21-date-picker__month {
  flex: 0 0 7.25rem;
  width: 7.25rem;
  min-width: 7.25rem;
  padding-right: 1.85rem;
}

.f21-date-picker__year {
  flex: 0 0 5.5rem;
  width: 5.5rem;
  min-width: 5.5rem;
  padding-right: 1.85rem;
  text-align: center;
}

.f21-date-picker__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.95rem;
  height: 1.95rem;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--bs-border-color) 92%, transparent);
  border-radius: 999px;
  background: var(--bs-body-bg);
  color: var(--bs-emphasis-color);
  font-size: 0.95rem;
  line-height: 1;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.12s ease;
}

.f21-date-picker__nav:hover {
  background: var(--f21-date-picker-accent-soft);
  border-color: var(--f21-date-picker-accent);
  color: var(--f21-date-picker-accent);
  transform: scale(1.06);
}

.f21-date-picker__weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.2rem;
  margin-bottom: 0.35rem;
  padding: 0 0.1rem;
}

.f21-date-picker__weekday {
  text-align: center;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--bs-secondary-color);
  padding: 0.2rem 0;
}

.f21-date-picker__weekday--weekend {
  color: var(--f21-date-weekend);
}

.f21-date-picker__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.2rem;
  padding: 0 0.1rem;
}

.f21-date-picker__day {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1;
  min-height: 2.05rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--bs-body-color);
  font-size: 0.82rem;
  font-weight: 500;
  transition: background-color 0.14s ease, color 0.14s ease, box-shadow 0.14s ease, transform 0.12s ease;
}

.f21-date-picker__day:hover:not(:disabled):not(.f21-date-picker__day--selected):not(.f21-date-picker__day--weekend) {
  background: var(--f21-date-picker-accent-soft);
  color: var(--f21-date-picker-accent);
  transform: scale(1.06);
}

.f21-date-picker__day--muted {
  color: var(--bs-secondary-color);
  opacity: 0.55;
}

.f21-date-picker__day--weekend:not(.f21-date-picker__day--selected) {
  color: var(--f21-date-weekend);
}

.f21-date-picker__day--weekend.f21-date-picker__day--muted:not(.f21-date-picker__day--selected) {
  color: var(--f21-date-weekend-muted);
  opacity: 1;
}

.f21-date-picker__day--weekend.f21-date-picker__day--today:not(.f21-date-picker__day--selected) {
  box-shadow: inset 0 0 0 1.5px var(--f21-date-weekend);
  color: var(--f21-date-weekend);
}

.f21-date-picker__day--weekend:hover:not(:disabled):not(.f21-date-picker__day--selected) {
  background: var(--f21-date-weekend-bg-hover);
  color: var(--f21-date-weekend);
}

.f21-date-picker__day--today:not(.f21-date-picker__day--selected):not(.f21-date-picker__day--weekend) {
  box-shadow: inset 0 0 0 1.5px var(--f21-date-picker-accent);
  color: var(--f21-date-picker-accent);
}

.f21-date-picker__day--selected {
  background: linear-gradient(
    145deg,
    var(--f21-date-picker-accent),
    var(--f21-date-picker-accent-deep)
  );
  color: #fff;
  font-weight: 600;
  box-shadow: 0 0.2rem 0.55rem var(--f21-date-picker-accent-glow);
  transform: scale(1.02);
}

.f21-date-picker__day--selected:hover {
  color: #fff;
  filter: brightness(1.05);
}

.f21-date-picker__day--disabled,
.f21-date-picker__day:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.f21-date-picker__foot {
  display: flex;
  justify-content: space-between;
  gap: 0.55rem;
  margin-top: 0.65rem;
  padding-top: 0.55rem;
  border-top: 1px solid var(--bs-border-color-translucent, var(--bs-border-color));
}

.f21-date-picker__foot-btn {
  flex: 1;
  border: 0;
  border-radius: 999px;
  padding: 0.42rem 0.65rem;
  background: color-mix(in srgb, var(--bs-tertiary-bg) 88%, var(--f21-date-picker-accent-soft));
  color: var(--bs-emphasis-color);
  font-size: 0.78rem;
  font-weight: 600;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.12s ease;
}

.f21-date-picker__foot-btn:hover {
  background: var(--f21-date-picker-accent-soft);
  color: var(--f21-date-picker-accent);
  transform: translateY(-1px);
}

.f21-date-picker__foot-btn[data-action="clear"] {
  background: transparent;
  color: var(--bs-secondary-color);
}

.f21-date-picker__foot-btn[data-action="clear"]:hover {
  background: var(--bs-tertiary-bg);
  color: var(--bs-emphasis-color);
}

.f21-date-picker__foot-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Client detail page */
.client-card {
  --client-accent: #2dd4a0;
  --client-accent-heading: #0f6e56;
  background: var(--bs-body-bg);
  border: 0.5px solid var(--bs-border-color);
  border-radius: 12px;
  overflow: hidden;
}

[data-bs-theme="dark"] .client-card {
  --client-accent-heading: #5dcaa5;
}

.client-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  border-bottom: 0.5px solid var(--bs-border-color);
}

.client-header__identity {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.client-avatar {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(45, 212, 160, 0.15);
  color: var(--client-accent-heading);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.02em;
}

[data-bs-theme="dark"] .client-avatar {
  background: rgba(45, 212, 160, 0.2);
  color: #9fe1cb;
}

.client-name {
  font-weight: 500;
  font-size: 17px;
  margin: 0;
  color: var(--bs-body-color);
}

.client-subtitle {
  font-size: 13px;
  color: var(--bs-secondary-color);
  margin: 2px 0 0;
}

.client-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.client-actions__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  background: var(--bs-body-bg);
  border: 0.5px solid var(--bs-border-color);
  border-radius: 8px;
  padding: 6px 12px;
  cursor: pointer;
  color: var(--bs-body-color);
  text-decoration: none;
  line-height: 1.4;
}

.client-actions__btn:hover {
  background: var(--bs-tertiary-bg);
  color: var(--bs-body-color);
  border-color: var(--bs-border-color);
}

.client-section-grid {
  padding: 1.25rem 1.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0;
}

.client-section-grid--nested {
  padding: 0;
}

.client-section-col {
  padding-right: 2rem;
  min-width: 0;
}

.client-section-col + .client-section-col {
  padding-left: 2rem;
  border-left: 0.5px solid var(--bs-border-color);
}

.client-section-heading {
  font-size: 12px;
  font-weight: 500;
  color: var(--client-accent-heading);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--client-accent);
}

.client-field-row {
  padding: 10px 0;
  border-bottom: 0.5px solid var(--bs-border-color);
}

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

.client-field-row--icon {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.client-field-row-split {
  padding: 10px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
}

.client-field-label {
  font-size: 12px;
  color: var(--bs-secondary-color);
  margin: 0 0 2px;
}

.client-field-value {
  font-size: 14px;
  font-weight: 500;
  margin: 0;
  color: var(--bs-body-color);
  word-break: break-word;
}

.client-field-value--mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  letter-spacing: 0.02em;
}

.client-field-value--empty {
  font-weight: 400;
  color: var(--bs-tertiary-color);
}

.client-field-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: var(--bs-secondary-color);
}

.client-address-block,
.client-contact-block,
.client-notes-block {
  padding: 0 1.5rem 1.25rem;
}

.client-contact-block {
  padding-bottom: 1.5rem;
}

.client-address-text {
  font-size: 14px;
  font-weight: 500;
  margin: 4px 0 0;
  line-height: 1.6;
  color: var(--bs-body-color);
}

.client-detail-footer {
  margin-top: 1rem;
}

@media (max-width: 767.98px) {
  .client-section-col {
    padding-right: 0;
  }

  .client-section-col + .client-section-col {
    padding-left: 0;
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-left: none;
    border-top: 0.5px solid var(--bs-border-color);
  }

  .client-header {
    flex-wrap: wrap;
  }
}

/* Allottee ledger — document-style statement */
.allottee-ledger-doc {
  border: 1px solid var(--bs-border-color);
  border-radius: 0.65rem;
  overflow: visible;
  background: var(--bs-body-bg);
}

:not([data-bs-theme="dark"]) .allottee-ledger-doc {
  background: #ffffff;
  border-color: #e2e8f0;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

[data-bs-theme="dark"] .allottee-ledger-doc {
  border-color: #30363d;
}

.allottee-ledger-doc__toolbar {
  padding: 0.55rem 1rem;
  border-bottom: 1px solid var(--bs-border-color);
  background: transparent;
}

.allottee-ledger-doc__body {
  padding: 1.5rem 1.65rem 1.35rem;
  font-family: inherit;
  color: var(--bs-body-color);
}

.allottee-ledger-doc__title {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
  letter-spacing: -0.01em;
  color: var(--bs-body-color);
}

.allottee-ledger-doc__meta {
  font-size: 0.84rem;
  margin: 0 0 0.25rem;
  color: var(--bs-secondary-color);
  line-height: 1.45;
}

.allottee-ledger-doc__meta--period {
  margin-bottom: 0;
}

.allottee-ledger-doc__summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem 2rem;
  margin: 1.35rem 0 1.15rem;
  padding: 1rem 0 1.1rem;
  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
}

[data-bs-theme="dark"] .allottee-ledger-doc__summary {
  border-color: #30363d;
}

.allottee-ledger-doc__stat-label {
  font-size: 0.75rem;
  color: var(--bs-secondary-color);
  margin-bottom: 0.25rem;
}

.allottee-ledger-doc__stat-value {
  font-size: 1.125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--bs-body-color);
}

.allottee-ledger-doc__stat-value--received {
  color: #0d9488;
}

.allottee-ledger-doc__stat-value--balance {
  color: #b45309;
}

[data-bs-theme="dark"] .allottee-ledger-doc__stat-value--received {
  color: #2dd4bf;
}

[data-bs-theme="dark"] .allottee-ledger-doc__stat-value--balance {
  color: #fbbf24;
}

.allottee-ledger-doc__table-wrap {
  overflow-x: auto;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}

.allottee-ledger-doc__table {
  font-size: 0.875rem;
  width: 100%;
  max-width: 100%;
  table-layout: fixed;
}

.allottee-ledger-doc__table col.allottee-ledger-col--sno {
  width: 2%;
}

.allottee-ledger-doc__table col.allottee-ledger-col--date {
  width: 9%;
}

.allottee-ledger-doc__table col.allottee-ledger-col--receipt {
  width: 7%;
}

.allottee-ledger-doc__table col.allottee-ledger-col--narration {
  width: 50%;
}

.allottee-ledger-doc__table col.allottee-ledger-col--amount {
  width: 12%;
}

.allottee-ledger-doc__table col.allottee-ledger-col--side {
  width: 4%;
}

.allottee-ledger-doc__table .allottee-ledger-col--sno-cell {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  white-space: nowrap;
}

.allottee-ledger-doc__table .allottee-ledger-col--amount-cell {
  padding-left: 0.35rem;
  padding-right: 0.35rem;
  white-space: nowrap;
}

.allottee-ledger-doc__table .allottee-ledger-col--side-cell {
  padding-left: 0.3rem;
  padding-right: 0.3rem;
  white-space: nowrap;
}

.allottee-ledger-doc__table thead th {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
  white-space: nowrap;
}

.allottee-ledger-doc__table th,
.allottee-ledger-doc__table td {
  padding: 0.7rem 0.5rem;
  vertical-align: top;
  min-width: 0;
  overflow-wrap: anywhere;
}

.allottee-ledger-doc__narration {
  line-height: 1.4;
  font-weight: 500;
  white-space: normal;
  word-break: break-word;
}

.allottee-ledger-doc__narration-detail {
  font-size: 0.8rem;
  margin-top: 0.2rem;
  font-weight: 400;
}

.allottee-ledger-doc__receipt-badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  background: #e6f4f1;
  color: #0f766e;
  border: none;
}

[data-bs-theme="dark"] .allottee-ledger-doc__receipt-badge {
  background: rgba(45, 212, 191, 0.15);
  color: #5eead4;
}

.allottee-ledger-doc__debit {
  color: #b45309;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

[data-bs-theme="dark"] .allottee-ledger-doc__debit {
  color: #fbbf24;
}

.allottee-ledger-doc__credit {
  color: #0d9488;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

[data-bs-theme="dark"] .allottee-ledger-doc__credit {
  color: #2dd4bf;
}

.allottee-ledger-doc__balance-due {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.allottee-ledger-doc__side-dr {
  color: #b45309;
  font-weight: 700;
}

[data-bs-theme="dark"] .allottee-ledger-doc__side-dr {
  color: #fbbf24;
}

.allottee-ledger-doc__row--opening td,
.allottee-ledger-doc__row--closing td {
  background: transparent;
}

.allottee-ledger-doc__row--closing td {
  padding-top: 0.85rem;
}

.allottee-ledger-doc__footnotes {
  margin-top: 1rem;
  font-size: 0.76rem;
  color: var(--bs-secondary-color);
  line-height: 1.45;
}

/* Keep full grid on allottee ledger (dark theme slab rules drop outer edges) */
[data-bs-theme="dark"] .floor21-panel .allottee-ledger-doc__table.slab-schedule-table > thead > tr > th:last-child,
[data-bs-theme="dark"] .floor21-panel .allottee-ledger-doc__table.slab-schedule-table > tbody > tr > td:last-child {
  border-right: 1px solid var(--slab-schedule-grid) !important;
}

[data-bs-theme="dark"] .floor21-panel .allottee-ledger-doc__table.slab-schedule-table:not(:has(> tfoot)) > tbody > tr:last-child > td {
  border-bottom: 1px solid var(--slab-schedule-grid) !important;
}

@media (max-width: 991.98px) {
  .allottee-ledger-doc__summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575.98px) {
  .allottee-ledger-doc__summary {
    grid-template-columns: 1fr;
  }

  .allottee-ledger-doc__body {
    padding: 1rem;
  }
}