:root {
  /* Chart roles (dataviz reference palette, validated against the white card surface). */
  --chart-surface: #ffffff;
  --chart-grid: #e1e0d9;
  --chart-axis: #c3c2b7;
  --chart-muted: #898781;
  --series-1: #2a78d6;
  --series-2: #eb6834;
  --series-3: #1baf7a;
  --series-4: #eda100;
  --series-5: #e87ba4;
  --series-6: #008300;
  --series-7: #6250d6;
  --series-8: #e34948;
  --status-good: #0ca30c;
  --status-warning: #fab219;
  --status-serious: #ec835a;
  --status-critical: #d03b3b;
  /* Ordinal construction-stage ramp (blue 250/400/550/700) plus neutral for "not started". */
  /* Stage and sales palettes from the Buildings & Units design (facade shade). Swatches always carry a hairline
     outline because the lightest stage step sits below 2:1 against the stage surface. */
  --stage-0: #F1EFEA;
  --stage-1: #C3D2EA;
  --stage-2: #7FA2DA;
  --stage-3: #3D64AE;
  --stage-4: #1B2B4C;
  --sales-available: #D9D5CA;
  --sales-reserved: #D9AE62;
  --sales-sold: #4F9C8B;
  --sales-handed: #1F4F47;
}

html, body { height: 100%; }
[v-cloak] { display: none; }

.tabular { font-variant-numeric: tabular-nums; }

.scroll-thin { scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
.scroll-thin::-webkit-scrollbar { width: 8px; height: 8px; }
.scroll-thin::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 8px; }
.scroll-dark { scrollbar-width: thin; scrollbar-color: #334155 transparent; }


.chart-tooltip {
  position: fixed; pointer-events: none; z-index: 60;
  background: #14213D; color: #F6F4EF; border-radius: 8px; padding: 8px 10px;
  font-size: 12px; line-height: 1.4; box-shadow: 0 8px 24px rgba(15,23,42,.25); min-width: 140px;
}
.chart-tooltip .key { display: inline-block; width: 12px; height: 2px; margin-inline-end: 6px; vertical-align: middle; border-radius: 1px; }

.fade-enter-active, .fade-leave-active { transition: opacity .15s ease; }
.fade-enter, .fade-leave-to { opacity: 0; }
.slide-enter-active, .slide-leave-active { transition: transform .2s ease; }
.slide-enter, .slide-leave-to { transform: translateX(100%); }

@media print {
  aside, header, .no-print { display: none !important; }
  main { overflow: visible !important; height: auto !important; }
  body { background: #fff; }
  .print-break { break-before: page; }
}

/* RTL: drawers slide in from the inline end; directional icons mirror. */
[dir="rtl"] .slide-enter, [dir="rtl"] .slide-leave-to { transform: translateX(-100%); }
[dir="rtl"] .flip-rtl { transform: scaleX(-1); }
[dir="rtl"] body { font-family: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, sans-serif; }
[dir="rtl"] .tracking-wide, [dir="rtl"] [class*="tracking-["] { letter-spacing: 0; }

.nav-active { background: #FFFFFF; box-shadow: 0 1px 2px rgba(21,32,58,.08), inset 2px 0 0 #C4532F; }
[dir="rtl"] .nav-active { box-shadow: 0 1px 2px rgba(21,32,58,.08), inset -2px 0 0 #C4532F; }

.blueprint-grid {
  background-color: #FBFAF7;
  background-image: linear-gradient(rgba(20,33,61,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(20,33,61,.045) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* Buildings & Units design primitives */
.label-mono { font: 500 10.5px "IBM Plex Mono", ui-monospace, monospace; color: #8A8D95; letter-spacing: .06em; text-transform: uppercase; }
[dir="rtl"] .label-mono { font-family: "IBM Plex Sans Arabic", "IBM Plex Mono", sans-serif; letter-spacing: 0; }
.dot-grid { background-image: radial-gradient(#E3DFD6 1px, transparent 1px); background-size: 18px 18px; }
[dir="rtl"] .eyebrow { font-family: "IBM Plex Sans Arabic", sans-serif; letter-spacing: 0; font-size: 12px; }