/* Presentation only. Loaded after the legacy UI and BI styles.
   Keep entity rendering, navigation, forms and API handlers in their existing modules. */
:root {
  --bg: #f3f4f6;
  --panel: #fff;
  --ink: #363940;
  --text: #363940;
  --muted: #858a93;
  --line: #e2e4e8;
  --border: var(--line);
  --surface: #fff;
  --surface-2: #f7f8fa;
  --accent: #4a90e2;
  --accent-2: #357acb;
  --soft: #edf5ff;
  --sidebar: #41414a;
  --radius: 4px;
  --shadow: 0 3px 14px rgb(36 40 50 / 9%);
  --crm-sidebar-width: 228px !important;
}

html, body {
  font-family: Arial, "Segoe UI", sans-serif;
  font-size: 13px;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

body { background-image: none; }
button, input, select, textarea { font-family: inherit; }
button:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
button:disabled { cursor: default; opacity: .5; }

/* Flat, compact navigation. Retain the existing expanded/mobile/rail modes. */
.shell { --crm-sidebar-width: 228px !important; background: var(--bg); }
.main { background: var(--bg); }
body .sidebar {
  position: fixed !important;
  inset: 0 auto 0 0;
  height: 100dvh !important;
  background: var(--sidebar) !important;
  border-right: 1px solid #393941 !important;
  box-shadow: none !important;
  padding: 0 0 10px !important;
}
.sidebar .brand {
  height: 60px !important;
  padding: 0 40px 0 16px !important;
  gap: 10px !important;
  border-bottom: 1px solid #50505a;
}
.brand-mark, .sidebar .brand-mark {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  border-radius: 4px !important;
  background: var(--accent) !important;
  box-shadow: none !important;
  font-size: 18px;
  font-weight: 600;
}
.sidebar .brand strong { font-size: 15px !important; font-weight: 500; }
.sidebar .brand span { color: #b6b6c0 !important; font-size: 10px; }
.sidebar #nav {
  padding: 8px 0 !important;
  gap: 1px !important;
  scrollbar-color: #686873 transparent;
}
.sidebar #nav::-webkit-scrollbar-thumb { background: #686873 !important; }
body:not(.sidebar-compact) .sidebar #nav button[data-page] {
  min-height: 36px !important;
  height: auto !important;
  padding: 8px 15px !important;
  gap: 11px !important;
  width: 100% !important;
}
.sidebar #nav button[data-page] {
  border-radius: 0 !important;
  color: #d8d8de !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  transform: none !important;
  transition: background .12s, color .12s !important;
}
.sidebar #nav button[data-page] .nav-icon {
  width: 19px !important;
  min-width: 19px !important;
  height: 19px !important;
  color: #b0b1bc !important;
  transform: none !important;
}
.sidebar #nav button[data-page] .nav-icon svg {
  width: 18px !important;
  height: 18px !important;
  stroke-width: 1.6 !important;
}
.sidebar #nav button[data-page] .nav-label {
  line-height: 1.35 !important;
  max-height: none !important;
  color: inherit !important;
  font-size: inherit !important;
  font-weight: inherit;
  width: auto;
  text-align: left !important;
}
.sidebar #nav button[data-page]:hover { background: #4d4d57 !important; color: #fff !important; }
.sidebar #nav button[data-page].active { background: #fff !important; color: #3c3d46 !important; }
body .sidebar #nav button[data-page].active, body.sidebar-compact .sidebar #nav button[data-page].active { color: #3c3d46 !important; }
.sidebar #nav button[data-page].active .nav-label { color: #3c3d46 !important; }
.sidebar #nav button[data-page].active .nav-icon { color: var(--accent) !important; }
.sidebar #nav button[data-page].active .nav-icon svg { color: var(--accent) !important; stroke: currentColor !important; }
.sidebar #nav button[data-page] .nav-icon svg * { color: inherit !important; stroke: currentColor !important; }
.sidebar #nav button[data-page].active::before { display: none !important; }
.sidebar .nav-sep {
  margin: 16px 16px 7px !important;
  font-size: 9px !important;
  font-weight: 400;
  letter-spacing: .06em !important;
  color: #a5a5b0 !important;
}
.sidebar .taskflow-nav-link {
  margin: 4px 0 !important;
  padding: 10px 15px !important;
  border-radius: 0 !important;
  background: #4b4b56 !important;
  color: #e4e4eb !important;
  font-size: 13px;
  font-weight: 400 !important;
}
.sidebar .taskflow-nav-link:hover { background: #575763 !important; }
.sidebar .taskflow-nav-link > span { display: inline-block; width: 25px; }
.sidebar .sidebar-foot { padding: 12px 16px 0 !important; margin: 0 12px; border-color: #55555e; }
.sidebar-foot strong { font-weight: 400; color: #d0d0d9; }
.sidebar-foot span { color: #aaaab5 !important; }
.status-dot { width: 6px; height: 6px; box-shadow: none !important; }
.sidebar .sidebar-collapse-btn.sidebar-rail-toggle {
  top: 17px !important;
  right: 11px !important;
  left: auto !important;
  width: 25px !important;
  height: 26px !important;
  border-radius: 3px !important;
  background: transparent !important;
  border-color: #666670 !important;
  color: #d8d8e0 !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Page chrome, search and actions. */
.topbar {
  height: 60px;
  padding: 0 20px;
  gap: 14px;
  background: #fff;
  border-bottom: 1px solid var(--line);
  box-shadow: none;
  backdrop-filter: none;
}
.global-search { height: 34px; border: 1px solid #e1e3e7; background: #fafafa; border-radius: 3px; max-width: 540px; }
.global-search input { font-size: 13px; }
.global-search kbd { border-radius: 2px; font-size: 10px; color: #92959e; }
.global-search-structured { border-radius: 3px !important; background: #fafbfc !important; box-shadow: none !important; }
.global-search-structured select, .global-search-structured input { border-radius: 3px !important; }
.structured-search-go { background: var(--accent) !important; border-radius: 3px !important; font-weight: 400 !important; }
.top-actions { gap: 8px; }
.avatar { border-radius: 3px; background: #edf4fc; color: var(--accent); font-weight: 500; }
.user-chip strong { font-size: 12px; font-weight: 400; }
.user-chip span { font-size: 10px; }
.content { max-width: none; padding: 22px 22px 36px; }
.page-head { align-items: center; margin-bottom: 18px; gap: 12px; }
.page-head h1 { font-size: 23px; font-weight: 400; letter-spacing: 0; margin-bottom: 5px; }
.page-head p { font-size: 12px; color: var(--muted); line-height: 1.5; }
.eyebrow { font-weight: 500; font-size: 9px; letter-spacing: .08em; color: #8d929c; }
.btn, .btn.small, .entity-action {
  border-radius: 3px;
  padding: 8px 12px;
  border-color: #d9dce1;
  color: #626873;
  font-size: 12px;
  font-weight: 400;
  box-shadow: none;
  min-height: 33px;
}
.btn:hover, .entity-action:hover { transform: none; box-shadow: none; border-color: #b7c1cf; background: #f8fafc; }
.btn.primary, .btn.quick-create, .entity-action.primary {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
  box-shadow: none !important;
}
.btn.primary:hover, .btn.quick-create:hover, .entity-action.primary:hover { background: var(--accent-2) !important; border-color: var(--accent-2) !important; }
.btn.soft { background: var(--soft); border-color: #d9e9fa; color: #4586d0; }
.btn.danger { background: #fff5f5; color: #cb6060; border-color: #efd4d4; }
.icon-btn, .close-btn, .mobile-menu-btn { width: 33px; height: 33px; border-radius: 3px; box-shadow: none; }

/* Lists keep their existing columns, sorting, filtering, resizing and pagination. */
.panel, .table-wrap, .filter-bar, .stat-card, .object-card, .enhanced-table,
.ar-property-card, .ar-program, .ar-doc, .integration-card,
.bi-report-card, .bi-preview-panel, .bi-design-section {
  background: #fff;
  border-color: var(--line);
  border-radius: 4px;
  box-shadow: none;
}
.estate-card.crm5-card, .estate-kpis > div, .estate-filter-shell, .bi-blank-dashboard { border-radius: 4px; box-shadow: none; }
.estate-kpis b { font-weight: 400; }
.panel-head { padding: 13px 16px; border-color: var(--line); background: #fff; }
.panel-head h3 { font-size: 14px; font-weight: 400; }
.panel-body { padding: 16px; }
.filter-bar, .filter-bar.advanced { padding: 10px; gap: 8px; border-radius: 4px; box-shadow: none; }
.filter-bar input, .filter-bar select, .search-input { border-radius: 3px; min-height: 33px; font-size: 12px; }
.filter-bar.advanced .search-box { border-radius: 3px; background: #fff; }
.record-count { font-size: 11px; font-weight: 400; }
table { font-size: 12px; border-collapse: collapse; }
th, .enhanced-table th { background: #f8f9fb; color: #858b96; font-weight: 400; padding: 11px 13px; border-bottom: 1px solid var(--line); }
td, .enhanced-table td { padding: 12px 13px; border-bottom-color: #eceef1; color: #565e6a; }
tbody tr:hover { background: #f4f8fd; }
tbody tr:hover .sticky-col { background: #f4f8fd; }
.primary-cell { font-weight: 400; color: #4387d4; }
.primary-cell .subtext { font-size: 10px; color: #a1a6af; margin-top: 4px; }
.crm-resizable-table .crm-sort-button { font-weight: 400; padding: 11px 17px 11px 13px; }
.crm-resizable-table th.sticky-col { background: #f8f9fb; }
.crm-resize-handle:hover { border-color: var(--accent); }
.pagination { flex-direction: row; flex: none; gap: 8px; padding: 14px 0 0; overflow: visible; }
.pagination .btn { font-size: 11px; }
.chip { border-radius: 3px; font-weight: 400; }
.chip.dark { color: #737d8b; background: #e9edf2; }
.bulk-bar { background: #555967; border-radius: 3px; box-shadow: none; }
.stats-grid, .stats-grid.enhanced { gap: 12px; }
.estate-dashboard-strip { border-radius: 4px; background: #fff; color: var(--ink); border: 1px solid var(--line); box-shadow: none; }
.estate-dashboard-strip > div { border-color: var(--line); }
.estate-dashboard-strip span { color: var(--muted); }
.estate-dashboard-strip b { font-weight: 400; color: var(--ink); }
.estate-dashboard-strip button { background: var(--accent); font-weight: 400; }
.stat-card { padding: 15px 17px; min-height: 102px; }
.stat-card strong { font-size: 27px; font-weight: 400; letter-spacing: 0; }
.stat-card .ico { border-radius: 3px; color: var(--accent); background: var(--soft); }
.dashboard-hero, .ar-hero, .bi-hero, .settings-hero {
  border: 1px solid var(--line); border-radius: 4px;
  background: #fff; color: var(--ink); box-shadow: none;
}
.dashboard-hero h2, .ar-hero h2, .bi-hero h2 { color: var(--ink); font-size: 22px; font-weight: 400; }
.dashboard-hero p, .ar-hero p, .bi-hero p, .settings-hero p { color: #7f8896; }
.dashboard-hero .eyebrow, .ar-hero .eyebrow, .bi-hero-label { color: var(--accent); }
.hero-badge, .ar-hero > div > span { color: var(--accent); }
.hero-actions button { border: 1px solid #d8dce3; background: #fff; color: var(--accent); border-radius: 3px; font-weight: 400; }
.hero-actions button:hover { background: var(--soft); }
.ar-hero-stats span { color: var(--muted); }
.hero-pill, .bi-hero-counter { border-color: var(--line); color: var(--ink); }
.bi-hero-counter span { color: var(--muted); }
.bi-tabs { border-radius: 3px; background: #fff; padding: 0; border: 0; border-bottom: 1px solid var(--line); width: 100%; gap: 0; }
.bi-tabs button { border-radius: 0; font-weight: 400; background: none; padding: 13px 18px; border-bottom: 2px solid transparent; }
.bi-tabs button.selected { border-bottom-color: var(--accent); color: var(--accent); box-shadow: none; }
.bi-report-header h3, .bi-design-title strong { font-weight: 400; }

/* Entity workspaces: light modules, clear dividers, underlined tabs. */
.drawer-backdrop, .modal-backdrop { background: rgb(35 39 48 / 34%); backdrop-filter: none; }
.drawer.entity-workspace-drawer, .drawer.property-drawer { background: var(--bg); box-shadow: -6px 0 24px rgb(30 36 48 / 12%); }
.entity-workspace-head, .property-topline {
  background: #fff !important; color: var(--ink) !important;
  border-bottom: 1px solid var(--line) !important; box-shadow: none !important;
}
.entity-ws-title h2, .property-title-line h1 { color: var(--ink); font-weight: 400; letter-spacing: 0; }
.entity-ws-actions .btn { border-radius: 3px !important; }
.entity-ws-title > span, .entity-ws-title p { color: var(--muted); }
.entity-ws-avatar { background: var(--soft); color: var(--accent); border-radius: 4px; box-shadow: none; }
.entity-ws-hero { background: #fff; border-bottom: 1px solid var(--line); }
.entity-ws-stats > div { background: #fafbfc; border-color: var(--line); border-radius: 3px; box-shadow: none; }
.entity-ws-stats strong { color: var(--ink); font-weight: 400; }
.entity-ws-tabs, #propertyTabs.property-tabs {
  display: flex !important; flex-direction: row !important; flex: none !important;
  gap: 0 !important; padding: 0 18px !important;
  min-height: 45px !important; background: #fff !important;
  border-bottom: 1px solid var(--line) !important; box-shadow: none !important;
}
.entity-ws-tabs button, #propertyTabs.property-tabs button {
  min-height: 45px !important; height: auto !important;
  padding: 11px 15px !important; border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important; background: none !important;
  box-shadow: none !important; color: #777e8a !important;
  font-weight: 400 !important; font-size: 12px !important;
  transform: none !important; white-space: nowrap;
}
.entity-ws-tabs button.active, #propertyTabs.property-tabs button.active {
  background: #fff !important; color: var(--accent) !important;
  border-bottom-color: var(--accent) !important;
}
#propertyTabs.property-tabs button.active::after { display: none !important; }
.entity-ws-body, .property-tab-body { background: var(--bg) !important; }
.entity-ws-card, .entity-quick-card, .property-section, .custom-section-card,
.entity-section-card, .entity-custom-section, .entity-quick-grid .entity-ws-field {
  border: 1px solid var(--line) !important; border-radius: 4px !important;
  background: #fff !important; box-shadow: none !important; transform: none !important;
}
.entity-ws-section-title h3, .property-section-head h3 { font-weight: 400; }
.entity-ws-field > strong, .entity-quick-grid .entity-ws-field > strong { font-size: 13px; font-weight: 400; color: var(--ink); }
.entity-ws-field > span, .entity-quick-grid .entity-ws-field > span { text-transform: none; letter-spacing: 0; font-size: 11px; font-weight: 400; }
.entity-action { background: #fff; }
.entity-action b { border-radius: 3px; background: var(--soft); color: var(--accent); }
.property-section { padding: 16px !important; }
.property-inline-field, .entity-custom-field { border-radius: 3px !important; box-shadow: none !important; }
.crm-section-tabs { background: #fafbfc; }
.crm-section-tab { font-size: 12px; font-weight: 400; }

/* Forms and popovers retain native focus, validation and visibility behavior. */
.modal {
  border-radius: 5px !important; border: 1px solid #d5d9df !important;
  box-shadow: 0 12px 48px rgb(29 36 46 / 20%) !important;
}
.modal-head { padding: 17px 20px !important; background: #fff !important; }
.modal-head h2 { font-size: 19px !important; font-weight: 400 !important; }
.modal-body { padding: 18px 20px !important; background: #f8f9fb !important; }
.modal-foot { background: #fff !important; box-shadow: none !important; }
.modal input:not([type=checkbox]):not([type=radio]), .modal select, .modal textarea,
.filter-popover input:not([type=checkbox]):not([type=radio]), .filter-popover select,
.field input:not([type=checkbox]):not([type=radio]), .field select, .field textarea,
.entity-inline-editor input, .entity-inline-editor select, .entity-inline-editor textarea,
.property-inline-editor input, .property-inline-editor select, .property-inline-editor textarea {
  border-radius: 3px !important; border-color: #d8dce3 !important;
  font-size: 13px !important; color: var(--ink) !important; box-shadow: none;
}
.field > label, .modal-body .field > label { font-size: 12px; font-weight: 400; color: #787f8b; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid #9bc1ef; outline-offset: 1px; }
input[type=checkbox], input[type=radio] { accent-color: var(--accent); }
.modal .close-btn { border-radius: 3px !important; }
.form-section { border-radius: 4px; background: #fff; }
.quick-menu, .global-results, .filter-popover, .column-popover, .relation-result, .crm14-relation-value {
  border-radius: 4px !important; box-shadow: var(--shadow); border-color: var(--line);
}
.crm14-relation-value:hover { transform: none; }
.rich-editor, .rich-note-view { border-radius: 3px !important; }
.rich-toolbar { background: #f8f9fb !important; }
.helper-dock-toggle { background: #4a90e2; border-radius: 5px; box-shadow: 0 3px 12px rgb(49 105 172 / 20%); }
.helper-dock-panel { border-radius: 5px; }
.helper-dock-head { background: #41414a; }
.helper-msg { border-radius: 4px; box-shadow: none; }

/* Sign-in uses the same quiet palette as the workspace. */
.login-screen { background: #f3f4f6; padding: 28px 0; }
.login-orb { display: none; }
.login-card {
  width: min(390px, calc(100% - 32px)); padding: 32px;
  border: 1px solid #e1e4e9; border-radius: 5px;
  background: #fff; box-shadow: 0 3px 15px rgb(40 45 55 / 5%);
}
.login-card .brand-mark.large { width: 42px !important; height: 42px !important; margin: 0 auto 17px; border-radius: 4px !important; font-size: 23px; }
.login-card > .eyebrow, .login-card h1, .login-card > p { text-align: center; }
.login-card h1 { font-size: 23px; font-weight: 400; margin: 8px 0; }
.login-card p { font-size: 12px; line-height: 1.6; color: #9298a3; margin-bottom: 26px; }
.login-card label { font-size: 12px; font-weight: 400; margin: 16px 0; color: #777f8a; }
.login-card input { min-height: 39px; font-size: 14px; border-radius: 3px; border-color: #d8dce3; }
.password-wrap { border-radius: 3px; border-color: #d8dce3; }
.password-wrap button { font-size: 11px; background: #fafbfc; }
.login-card .btn.wide { margin-top: 4px; min-height: 40px; font-size: 13px; }
.form-error { font-size: 12px; line-height: 1.5; }

@media (min-width: 761px) {
  .shell { grid-template-columns: var(--crm-sidebar-width) minmax(0, 1fr) !important; }
  body:not(.sidebar-compact) .sidebar { width: 228px !important; }
  body:not(.sidebar-compact) .sidebar #nav { padding-right: 0 !important; overflow-x: hidden !important; }
  .drawer.entity-workspace-drawer, .drawer.property-drawer { width: min(1220px, calc(100vw - 228px)) !important; }
  body.sidebar-compact .drawer.entity-workspace-drawer, body.sidebar-compact .drawer.property-drawer { width: min(1220px, calc(100vw - 64px)) !important; }
  body.sidebar-compact .shell { --crm-sidebar-width: 64px !important; }
  body.sidebar-compact .sidebar { width: 64px !important; }
  body.sidebar-compact .sidebar .brand { height: 60px !important; padding: 0 !important; }
  body.sidebar-compact .sidebar #nav { padding: 36px 0 6px !important; }
  body.sidebar-compact .sidebar #nav button[data-page] { width: 100% !important; height: 36px !important; min-height: 36px !important; border-radius: 0 !important; padding: 8px 0 !important; }
  body.sidebar-compact .sidebar .sidebar-collapse-btn.sidebar-rail-toggle { top: 67px !important; right: 19px !important; width: 25px !important; height: 25px !important; }
  body.sidebar-compact .sidebar .nav-sep { margin: 9px 14px !important; }
  body.sidebar-compact .sidebar .sidebar-foot { margin: 0 10px; padding: 12px 0 0 !important; }
  body.sidebar-compact .sidebar .taskflow-nav-link { font-size: 0; text-align: center; padding: 10px 0 !important; }
  body.sidebar-compact .sidebar .taskflow-nav-link > span { font-size: 17px; width: 20px; }
}
@media (max-width: 1000px) and (min-width: 761px) {
  .topbar { padding: 0 14px; gap: 10px; }
  .user-chip > div:last-child { display: none; }
  .content { padding: 18px 16px 28px; }
}
@media (max-width: 760px) {
  .shell { --crm-sidebar-width: 0px !important; grid-template-columns: minmax(0, 1fr) !important; }
  body .sidebar, body.sidebar-compact .sidebar { width: 252px !important; }
  body.sidebar-compact .sidebar { padding: 0 0 10px !important; }
  body.mobile-nav-open .sidebar { z-index: 120 !important; }
  body .sidebar #nav button[data-page], body.sidebar-compact .sidebar #nav button[data-page] { min-height: 36px !important; height: auto !important; padding: 8px 15px !important; justify-content: flex-start !important; width: 100% !important; gap: 11px !important; margin: 0 !important; }
  body .sidebar #nav button[data-page] .nav-label { display: block !important; flex: 1; font-size: 13px !important; }
  body .sidebar .nav-sep { display: block !important; opacity: 1 !important; }
  body .sidebar .brand > div:last-child, body .sidebar .sidebar-foot > div:last-child { display: block !important; }
  body .sidebar .brand, body.sidebar-compact .sidebar .brand { justify-content: flex-start !important; padding: 0 16px !important; }
  body.sidebar-compact .sidebar #nav button::after { display: none !important; }
  body.sidebar-compact .sidebar .sidebar-foot { justify-content: flex-start !important; }
  .topbar { height: auto; min-height: 104px; padding: 10px 12px; gap: 8px; flex-wrap: wrap; }
  .mobile-menu-btn { order: 0; }
  .mobile-brand { order: 1; flex: 1; font-weight: 400; }
  .top-actions { order: 2; margin-left: auto; }
  .global-search-structured { order: 3; flex: 1 1 100%; width: 100%; max-width: none; grid-template-columns: 105px minmax(0, 1fr) 58px; }
  .global-results-advanced { top: 102px; }
  .content { padding: 16px 12px 24px; }
  .page-head { align-items: flex-start; flex-wrap: wrap; }
  .page-head h1 { font-size: 21px; }
  .head-actions { gap: 6px; }
  .stats-grid, .stats-grid.enhanced { gap: 8px; }
  .stat-card { padding: 13px; }
  .entity-ws-tabs, #propertyTabs.property-tabs { padding: 0 8px !important; overflow-x: auto !important; }
  .entity-ws-tabs button, #propertyTabs.property-tabs button { padding: 11px 12px !important; }
  .modal { width: calc(100vw - 16px); max-height: 96dvh; }
  .modal-head, .modal-body { padding: 15px !important; }
  .pagination { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .sidebar, .shell, .btn, .entity-action { transition: none !important; }
}