/* MarketSync Liquid Glass foundation.
 * Keep this file page-agnostic: new public pages, dashboard views, and builder
 * surfaces should inherit the same material without one-off repainting.
 */
:root {
  --ms-glass-blur: 24px;
  --ms-glass-saturation: 145%;
  --ms-glass-light: rgba(255, 255, 255, .66);
  --ms-glass-light-strong: rgba(255, 255, 255, .82);
  --ms-glass-dark: rgba(9, 20, 39, .46);
  --ms-glass-dark-strong: rgba(8, 18, 35, .64);
  --ms-glass-line: rgba(255, 255, 255, .46);
  --ms-glass-line-dark: rgba(148, 190, 230, .3);
  --ms-glass-shadow: 0 20px 60px rgba(15, 23, 42, .16), inset 0 1px 0 rgba(255, 255, 255, .58);
  --ms-glass-shadow-dark: 0 24px 70px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .13);
  --ms-glass-canvas: radial-gradient(circle at 10% 0%, rgba(76, 190, 255, .22), transparent 34%), radial-gradient(circle at 92% 12%, rgba(116, 89, 255, .2), transparent 36%), linear-gradient(135deg, #e8f7ff 0%, #f4f3ff 52%, #e8f9f5 100%);
}

/* Reusable material primitives for future templates and generated sections. */
.ms-glass-canvas { background: var(--ms-glass-canvas); background-attachment: fixed; }
.ms-glass-surface,
.ms-glass-panel {
  background: var(--ms-glass-light);
  border: 1px solid var(--ms-glass-line);
  box-shadow: var(--ms-glass-shadow);
  backdrop-filter: blur(var(--ms-glass-blur)) saturate(var(--ms-glass-saturation));
  -webkit-backdrop-filter: blur(var(--ms-glass-blur)) saturate(var(--ms-glass-saturation));
}
.ms-glass-surface-strong { background: var(--ms-glass-light-strong); }
.ms-glass-surface-dark {
  background: var(--ms-glass-dark);
  border-color: var(--ms-glass-line-dark);
  box-shadow: var(--ms-glass-shadow-dark);
}

/* The public site is one materialized canvas. Semantic containers are selected
 * instead of buttons so calls-to-action retain reliable contrast. */
body.ms-glass-site {
  background: var(--ms-glass-canvas) !important;
  background-attachment: fixed;
}
body.ms-glass-site #app { min-height: 100vh; background: transparent; }
body.ms-glass-site :is(div,section,article,aside,form,details,header,footer,nav).bg-white,
body.ms-glass-site :is(div,section,article,aside,form,details,header,footer,nav).dark\:bg-slate-900 {
  background: var(--ms-glass-light) !important;
  border-color: var(--ms-glass-line) !important;
  box-shadow: var(--ms-glass-shadow);
  backdrop-filter: blur(var(--ms-glass-blur)) saturate(var(--ms-glass-saturation));
  -webkit-backdrop-filter: blur(var(--ms-glass-blur)) saturate(var(--ms-glass-saturation));
}
body.ms-glass-site :is(div,section,article,aside,form,details,header,footer,nav).bg-slate-900 { background: var(--ms-glass-dark) !important; border-color: var(--ms-glass-line-dark) !important; color: #f8fafc; }
body.ms-glass-site :is(input,select,textarea) {
  background: rgba(255,255,255,.72);
  border-color: rgba(148,163,184,.48);
  box-shadow: inset 0 1px 2px rgba(15,23,42,.06), 0 1px 0 rgba(255,255,255,.55);
}

/* Dashboard-wide mode. This applies to current and future MarketSync views. */
html[data-ms-glass="global"] body {
  background: var(--ms-glass-canvas) !important;
  background-attachment: fixed;
}
html[data-ms-glass="global"] :is(#dashboard-nav,#dept-tabbar,.ms-app-shell,.ms-glass-target),
html[data-ms-glass="global"] :is(div,section,article,aside,form,details,header,footer,nav).rounded-xl.bg-white,
html[data-ms-glass="global"] :is(div,section,article,aside,form,details,header,footer,nav).rounded-2xl.bg-white,
html[data-ms-glass="global"] :is(div,section,article,aside,form,details,header,footer,nav).dark\:bg-slate-900 {
  background: var(--ms-glass-light) !important;
  border-color: var(--ms-glass-line) !important;
  box-shadow: var(--ms-glass-shadow);
  backdrop-filter: blur(var(--ms-glass-blur)) saturate(var(--ms-glass-saturation));
  -webkit-backdrop-filter: blur(var(--ms-glass-blur)) saturate(var(--ms-glass-saturation));
}
html[data-ms-glass="global"] :is(input,select,textarea) {
  background: rgba(255,255,255,.76) !important;
  border-color: rgba(148,163,184,.48) !important;
  color: #0f172a;
}
html[data-ms-glass="global"] :is(button,a).bg-white { background: rgba(255,255,255,.82) !important; }
html[data-ms-glass="global"].dark {
  --ms-glass-canvas: radial-gradient(circle at 8% 0%, rgba(22, 132, 190, .26), transparent 34%), radial-gradient(circle at 92% 8%, rgba(85, 64, 190, .24), transparent 36%), linear-gradient(135deg, #071426 0%, #0b1830 52%, #071d25 100%);
}
html[data-ms-glass="global"].dark :is(#dashboard-nav,#dept-tabbar,.ms-app-shell,.ms-glass-target),
html[data-ms-glass="global"].dark :is(div,section,article,aside,form,details,header,footer,nav).rounded-xl.bg-white,
html[data-ms-glass="global"].dark :is(div,section,article,aside,form,details,header,footer,nav).rounded-2xl.bg-white,
html[data-ms-glass="global"].dark :is(div,section,article,aside,form,details,header,footer,nav).dark\:bg-slate-900 {
  background: var(--ms-glass-dark) !important;
  border-color: var(--ms-glass-line-dark) !important;
  box-shadow: var(--ms-glass-shadow-dark);
}
html[data-ms-glass="global"].dark :is(input,select,textarea) { background: rgba(7,20,38,.78) !important; color: #f8fafc; border-color: rgba(148,190,230,.3) !important; }

/* MarketSync's dark dashboard has intentionally dark semantic surfaces even
 * when its markup still carries light utility classes. Keep the glass layer
 * translucent without repainting cards white and destroying text contrast. */
html[data-ms-glass="global"][data-dash-mode="marketsync"] body {
  background: radial-gradient(circle at 8% 0%, rgba(22,132,190,.26), transparent 34%), radial-gradient(circle at 92% 8%, rgba(85,64,190,.24), transparent 36%), linear-gradient(135deg, #071426 0%, #0b1830 52%, #071d25 100%) !important;
}
html[data-ms-glass="global"][data-dash-mode="marketsync"] :is(#dashboard-nav,#dept-tabbar,.ms-app-shell,.ms-glass-target),
html[data-ms-glass="global"][data-dash-mode="marketsync"] :is(div,section,article,aside,form,details,header,footer,nav).rounded-xl.bg-white,
html[data-ms-glass="global"][data-dash-mode="marketsync"] :is(div,section,article,aside,form,details,header,footer,nav).rounded-2xl.bg-white,
html[data-ms-glass="global"][data-dash-mode="marketsync"] :is(div,section,article,aside,form,details,header,footer,nav).dark\:bg-slate-900 {
  background: rgba(9,20,39,.58) !important;
  border-color: var(--ms-glass-line-dark) !important;
  box-shadow: var(--ms-glass-shadow-dark);
  backdrop-filter: blur(var(--ms-glass-blur)) saturate(var(--ms-glass-saturation));
  -webkit-backdrop-filter: blur(var(--ms-glass-blur)) saturate(var(--ms-glass-saturation));
}
html[data-ms-glass="global"][data-dash-mode="marketsync"] :is(input,select,textarea) {
  background: rgba(7,20,38,.78) !important;
  color: #f8fafc !important;
  border-color: rgba(148,190,230,.3) !important;
}

/* Builder-specific inheritance: all existing hard-coded panel utilities become
 * the same material, while accent buttons remain untouched. */
.ws-studio-container {
  --ws-bg: var(--ms-glass-canvas) !important;
  --ws-panel: var(--ms-glass-dark) !important;
  --ws-panel-sub: rgba(16, 36, 63, .54) !important;
  --ws-panel-raised: rgba(31, 61, 96, .58) !important;
  --ws-border: var(--ms-glass-line-dark) !important;
  --ws-input-bg: rgba(7, 20, 38, .72) !important;
  --ws-input-border: rgba(148, 190, 230, .3) !important;
  background: var(--ms-glass-canvas) !important;
  background-attachment: fixed;
}
.ws-studio-container[data-ws-theme="light"] {
  --ws-panel: var(--ms-glass-light) !important;
  --ws-panel-sub: rgba(255,255,255,.42) !important;
  --ws-panel-raised: rgba(255,255,255,.64) !important;
  --ws-border: var(--ms-glass-line) !important;
  --ws-input-bg: rgba(255,255,255,.72) !important;
  --ws-input-border: rgba(100,116,139,.32) !important;
}
.ws-studio-container :is(.ws-builder-header,.ws-top-action-bar,#ws-left-dock-wrapper nav,#ws-left-drawer-content,#ws-right-dock-wrapper,#ws-inspector-panel,#ws-inspector-content,#ws-palette,#ws-layers-tree,.ws-builder-chrome) {
  background: var(--ws-panel) !important;
  border-color: var(--ws-border) !important;
  box-shadow: var(--ms-glass-shadow-dark);
  backdrop-filter: blur(var(--ms-glass-blur)) saturate(var(--ms-glass-saturation));
  -webkit-backdrop-filter: blur(var(--ms-glass-blur)) saturate(var(--ms-glass-saturation));
}
.ws-studio-container[data-ws-theme="light"] :is(.ws-builder-header,.ws-top-action-bar,#ws-left-dock-wrapper nav,#ws-left-drawer-content,#ws-right-dock-wrapper,#ws-inspector-panel,#ws-inspector-content,#ws-palette,#ws-layers-tree,.ws-builder-chrome) { box-shadow: var(--ms-glass-shadow); }
.ws-studio-container :is(.bg-white,.bg-slate-950,.bg-slate-900,.dark\:bg-slate-900) {
  background: var(--ws-panel-raised) !important;
  border-color: var(--ws-border) !important;
}
.ws-studio-container :is(input,select,textarea) {
  background: var(--ws-input-bg) !important;
  border-color: var(--ws-input-border) !important;
  color: var(--ws-input-text, var(--ws-text)) !important;
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
}

/* Generated hero CTAs share this contract. It prevents long labels from
 * collapsing into narrow pills while keeping the button treatment readable
 * over photographs and translucent panels. */
body.ms-glass-site .pt-2.flex.flex-wrap > button,
body.ms-glass-site button.bg-gradient-to-r,
body.ms-glass-site button.brand-bg,
body.ms-glass-site button.bg-indigo-600,
body.ms-glass-site button.bg-emerald-600 {
  min-height: 48px;
  min-width: 148px;
  padding: .75rem 1.5rem !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  line-height: 1.2;
}
.ws-studio-container button {
  min-height: 32px;
  padding-inline: .75rem;
  white-space: nowrap;
}

/* Trade appraisal hierarchy: make the three decisions scan as a workflow and
 * keep optional/legal detail visually quiet until it is needed. */
.appraisal-page .appraisal-stepper {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .7rem 1rem;
  border: 1px solid rgba(148,190,230,.22);
  border-radius: 1rem;
  background: rgba(9,20,39,.38);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.appraisal-page .appraisal-step {
  display: flex;
  align-items: center;
  gap: .55rem;
  min-width: 0;
  color: #94a3b8;
}
.appraisal-page .appraisal-step span {
  display: grid;
  place-items: center;
  width: 1.55rem;
  height: 1.55rem;
  flex: 0 0 auto;
  border-radius: 999px;
  border: 1px solid rgba(148,190,230,.3);
  font-size: .7rem;
  font-weight: 900;
}
.appraisal-page .appraisal-step b,
.appraisal-page .appraisal-step small { display: block; line-height: 1.2; }
.appraisal-page .appraisal-step b { color: #e2e8f0; font-size: .75rem; }
.appraisal-page .appraisal-step small { margin-top: .12rem; font-size: .65rem; color: #64748b; }
.appraisal-page .appraisal-step-active span { background: #2563eb; border-color: #60a5fa; color: white; box-shadow: 0 0 0 3px rgba(37,99,235,.16); }
.appraisal-page .appraisal-stepper > i { height: 1px; flex: 1 1 2rem; min-width: 1rem; background: rgba(148,190,230,.2); }
.appraisal-page .appraisal-workflow > .space-y-5 > .rounded-2xl,
.appraisal-page .appraisal-workflow > .rounded-2xl { box-shadow: 0 14px 38px rgba(0,0,0,.13), inset 0 1px 0 rgba(255,255,255,.07); }
.appraisal-page aside > .rounded-2xl { box-shadow: 0 14px 38px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.07); }
.appraisal-page aside #appr-list { scrollbar-width: thin; }
.desk-section-summary { list-style: none; }
.desk-section-summary::-webkit-details-marker { display: none; }
.desk-section-chevron { display: inline-block; font-size: 1.25rem; line-height: 1; transform: rotate(0deg); transition: transform 150ms ease; }
.desk-section[open] > .desk-section-summary .desk-section-chevron { transform: rotate(90deg); }
.desk-workflow-steps { display: flex; align-items: center; gap: .65rem; margin: 0 0 1rem; padding: .65rem .85rem; border: 1px solid rgba(148,190,230,.22); border-radius: .9rem; background: rgba(9,20,39,.34); color: #94a3b8; }
.desk-workflow-step { display: inline-flex; align-items: center; gap: .4rem; font-size: .7rem; font-weight: 800; white-space: nowrap; }
.desk-workflow-step b { display: grid; place-items: center; width: 1.35rem; height: 1.35rem; border: 1px solid rgba(148,190,230,.3); border-radius: 999px; font-size: .65rem; }
.desk-workflow-step-active { color: #e2e8f0; }
.desk-workflow-step-active b { background: #2563eb; border-color: #60a5fa; color: #fff; }
.desk-workflow-steps > i { height: 1px; flex: 1 1 1rem; background: rgba(148,190,230,.2); }
.desk-three-column-grid {
  display: grid;
  grid-template-columns: minmax(17rem, .9fr) minmax(25rem, 1.35fr) minmax(20rem, 1fr);
  gap: 1rem;
  align-items: start;
}
.desk-column { min-width: 0; }
.desk-column > .desk-section { margin-bottom: 1rem; }
.desk-column > .desk-section:last-child { margin-bottom: 0; }
.desk-column--summary { position: relative; }
.desk-summary-panel { position: sticky; top: 1rem; }
.desk-summary-panel #desk-summary { box-shadow: 0 18px 48px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.06); }
.desk-column .desk-section-summary { min-width: 0; }
.desk-column .desk-section-summary > span { min-width: 0; }
.desk-column .desk-section-summary h3 { line-height: 1.25; }
@media (max-width: 1500px) {
  .desk-three-column-grid { grid-template-columns: minmax(16rem, .85fr) minmax(22rem, 1.2fr) minmax(18rem, .95fr); gap: .75rem; }
  .desk-three-column-grid .p-5 { padding: 1rem; }
}
@media (max-width: 1120px) {
  .desk-three-column-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .desk-column--summary { grid-column: 1 / -1; }
  .desk-summary-panel { position: static; }
}
@media (max-width: 700px) {
  .desk-three-column-grid { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
  .desk-column--summary { grid-column: auto; }
  .desk-column .desk-section-summary { align-items: flex-start; }
  .desk-column .desk-section-summary > p { display: none; }
}
@media (max-width: 640px) {
  .appraisal-page .appraisal-stepper { gap: .35rem; padding: .6rem; }
  .appraisal-page .appraisal-step { gap: .35rem; }
  .appraisal-page .appraisal-step small { display: none; }
  .appraisal-page .appraisal-stepper > i { min-width: .5rem; }
  .desk-workflow-steps { gap: .3rem; overflow-x: auto; }
  .desk-workflow-step { font-size: .65rem; }
  .desk-workflow-steps > i { min-width: .5rem; }
}

@supports not ((backdrop-filter: blur(1px))) {
  .ms-glass-surface,.ms-glass-panel,
  body.ms-glass-site :is(div,section,article,aside,form,details,header,footer,nav).bg-white,
  body.ms-glass-site :is(div,section,article,aside,form,details,header,footer,nav).bg-slate-900,
  html[data-ms-glass="global"] :is(div,section,article,aside,form,details,header,footer,nav).rounded-xl.bg-white,
  .ws-studio-container :is(.ws-builder-header,.ws-top-action-bar,#ws-left-dock-wrapper nav,#ws-left-drawer-content,#ws-right-dock-wrapper,#ws-inspector-panel,#ws-inspector-content,#ws-palette,#ws-layers-tree) { background: rgba(255,255,255,.94) !important; }
}
@media (prefers-reduced-motion: reduce) {
  .ms-glass-surface,.ms-glass-panel { transition: none !important; }
}
@media (forced-colors: active) {
  .ms-glass-surface,.ms-glass-panel,.ws-studio-container :is(.ws-builder-header,.ws-top-action-bar,#ws-left-drawer-content,#ws-inspector-panel) { background: Canvas !important; border: 1px solid CanvasText !important; box-shadow: none !important; backdrop-filter: none !important; }
}