/*
 * Uimovel UI System
 * Shared visual foundation for the project hub and its operational modules.
 * Page-specific styles may control layout; this file owns visual language.
 */

:root {
  --ui-bg: #07101f;
  --ui-surface: #0d1728;
  --ui-surface-raised: #101e30;
  --ui-surface-hover: #162236;
  --ui-surface-strong: #1c2d45;
  --ui-text: rgba(255, 255, 255, .9);
  --ui-text-muted: rgba(255, 255, 255, .54);
  --ui-text-soft: rgba(255, 255, 255, .3);
  --ui-border: rgba(255, 255, 255, .08);
  --ui-border-strong: rgba(255, 255, 255, .14);
  --ui-primary: #2563eb;
  --ui-primary-hover: #3b82f6;
  --ui-accent: #06b6d4;
  --ui-success: #22c55e;
  --ui-warning: #fbbf24;
  --ui-danger: #ef4444;
  --ui-radius-sm: 6px;
  --ui-radius: 8px;
  --ui-radius-lg: 12px;
  --ui-header-height: 52px;
  --ui-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ui-shadow-panel: 0 18px 54px rgba(0, 0, 0, .32);
  --ui-focus: 0 0 0 3px rgba(59, 130, 246, .24);
}

body.ui-app {
  background: var(--ui-bg);
  color: var(--ui-text);
  font-family: var(--ui-font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.ui-app button,
body.ui-app input,
body.ui-app select,
body.ui-app textarea {
  font-family: var(--ui-font);
}

body.ui-app button:focus-visible,
body.ui-app input:focus-visible,
body.ui-app select:focus-visible,
body.ui-app textarea:focus-visible,
body.ui-app a:focus-visible {
  outline: none;
  box-shadow: var(--ui-focus);
}

/* Shared escape hatch from every operational module back to the project Hub. */
body.ui-app .ui-dashboard-return {
  box-sizing: border-box;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 11px;
  border: 1px solid var(--ui-border-strong);
  border-radius: var(--ui-radius-sm);
  background: var(--ui-surface-raised);
  color: var(--ui-text-muted);
  font-family: var(--ui-font);
  font-size: .72rem;
  font-weight: 750;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}

body.ui-app .ui-dashboard-return:hover {
  border-color: rgba(59, 130, 246, .46);
  background: var(--ui-surface-hover);
  color: var(--ui-text);
}

body.ui-app .ui-dashboard-return .ui-dashboard-return-icon {
  font-size: .95rem;
  line-height: 1;
}

/* Dashboard is the visual source of truth. */
body.ui-dashboard {
  --bg: var(--ui-bg);
  --surface: var(--ui-surface);
  --surface2: var(--ui-surface-raised);
  --surface3: var(--ui-surface-hover);
  --surface4: var(--ui-surface-strong);
  --text: var(--ui-text);
  --text2: var(--ui-text-muted);
  --text3: var(--ui-text-soft);
  --border: var(--ui-border);
  --border2: var(--ui-border-strong);
  --blue: var(--ui-primary);
  --blue2: var(--ui-primary-hover);
  --cyan: var(--ui-accent);
  --green: var(--ui-success);
  --amber: var(--ui-warning);
  --red: var(--ui-danger);
  --r: var(--ui-radius);
  --font: var(--ui-font);
  --tb-h: var(--ui-header-height);
}

body.ui-dashboard #topbar {
  background: rgba(13, 23, 40, .96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

body.ui-dashboard .mstat,
body.ui-dashboard .map-legend,
body.ui-dashboard .toggle-sidebar-btn {
  background: rgba(13, 23, 40, .9);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .22);
}

/* Authentication uses the same color and component scale as the Hub. */
body.ui-login {
  --bg: var(--ui-bg);
  --s1: var(--ui-surface);
  --s2: var(--ui-surface-raised);
  --s3: var(--ui-surface-hover);
  --blue: var(--ui-primary);
  --cyan: var(--ui-accent);
  --green: var(--ui-success);
  --white: #fff;
  --text: #c8d6e8;
  --muted: #718096;
  --border: var(--ui-border);
  --border2: rgba(59, 130, 246, .26);
  --r: var(--ui-radius-lg);
  --font: var(--ui-font);
}

body.ui-login .vignette {
  background: rgba(7, 16, 31, .76);
}

body.ui-login .brand-side,
body.ui-login .auth-card {
  border-color: var(--ui-border-strong);
  background: rgba(13, 23, 40, .86);
}

body.ui-login .auth-card {
  border-radius: var(--ui-radius-lg);
  box-shadow: var(--ui-shadow-panel);
}

body.ui-login .tabs,
body.ui-login .form-input {
  background: var(--ui-surface-raised);
}

body.ui-login .tab-btn,
body.ui-login .form-input,
body.ui-login .form-btn,
body.ui-login .alert,
body.ui-login .activation-panel {
  border-radius: var(--ui-radius);
}

/* Fundiario already follows the Hub closely; bind it to the shared tokens. */
body.ui-fundiario {
  --bg: var(--ui-bg);
  --surface: var(--ui-surface);
  --surface2: var(--ui-surface-raised);
  --surface3: var(--ui-surface-hover);
  --text: var(--ui-text);
  --muted: var(--ui-text-muted);
  --soft: var(--ui-text-soft);
  --line: var(--ui-border);
  --line2: var(--ui-border-strong);
  --blue: var(--ui-primary);
  --cyan: var(--ui-accent);
  --green: var(--ui-success);
  --amber: var(--ui-warning);
  --teal: var(--ui-primary);
  --r: var(--ui-radius);
  --font: var(--ui-font);
  --tb-h: var(--ui-header-height);
}

body.ui-fundiario .brand-mark {
  background: url('/uimovel-icon.png') center/cover no-repeat;
  color: transparent;
}

body.ui-fundiario .btn.primary {
  background: var(--ui-primary);
  border-color: var(--ui-primary);
}

body.ui-fundiario .btn.primary:hover:not(:disabled) {
  background: var(--ui-primary-hover);
  border-color: var(--ui-primary-hover);
}

/* Administrative surfaces keep their density but share the Hub palette. */
body.ui-crm {
  --bg: var(--ui-bg);
  --bg2: var(--ui-surface);
  --bg3: var(--ui-surface-raised);
  --bg4: var(--ui-surface-hover);
  --sand: var(--ui-text);
  --sand2: var(--ui-text-muted);
  --w: var(--ui-text);
  --muted: var(--ui-text-muted);
  --dim: var(--ui-text-soft);
  --border: var(--ui-border);
  --border2: var(--ui-border-strong);
  --border3: rgba(59, 130, 246, .4);
  --blue: var(--ui-primary-hover);
  --green: var(--ui-success);
  --amber: var(--ui-warning);
  --red: var(--ui-danger);
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --cond: var(--ui-font);
  --sans: var(--ui-font);
}

body.ui-crm #sidebar,
body.ui-crm #topbar {
  background: rgba(13, 23, 40, .97);
}

body.ui-crm nav a,
body.ui-crm .tb-btn,
body.ui-crm .stat,
body.ui-crm .card {
  border-radius: var(--ui-radius);
}

/* Termografia remains light by design, but inherits typography and focus. */
body.ui-analisador {
  --font: var(--ui-font);
  --navy: #0a1628;
  --blue: var(--ui-primary);
  --blue2: #1d4ed8;
}

/* WebGIS adopts the Hub shell without changing its map-specific layout. */
body.ui-webgis {
  --bg: var(--ui-bg);
  --bg2: var(--ui-surface);
  --bg3: var(--ui-surface-raised);
  --bg4: var(--ui-surface-hover);
  --white: var(--ui-text);
  --muted: var(--ui-text-muted);
  --text-3: var(--ui-text-soft);
  --sand: var(--ui-text);
  --sand-dim: var(--ui-text-muted);
  --border: var(--ui-border);
  --border-md: var(--ui-border-strong);
  --border-hi: rgba(59, 130, 246, .46);
  --hud: rgba(13, 23, 40, .92);
  --glass: rgba(13, 23, 40, .84);
  --r-card: var(--ui-radius-lg);
  --r-el: var(--ui-radius);
  --r-pill: var(--ui-radius);
  --sans: var(--ui-font);
  --cond: var(--ui-font);
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --blue: var(--ui-primary-hover);
  --green: var(--ui-success);
  --amber: var(--ui-warning);
  --warn: var(--ui-danger);
}

body.ui-webgis #app {
  grid-template-rows: var(--ui-header-height) 1fr;
}

body.ui-webgis #app > header {
  min-width: 0;
  padding: 0 14px;
  gap: 12px;
  background: rgba(13, 23, 40, .96);
  border-bottom: 1px solid var(--ui-border);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

body.ui-webgis .nav-left {
  gap: 10px;
}

body.ui-webgis .ui-product-mark {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: block;
  border-radius: 7px;
  object-fit: cover;
  box-shadow: 0 8px 22px rgba(37, 99, 235, .2);
}

body.ui-webgis .brand strong {
  color: var(--ui-text);
  font-family: var(--ui-font);
  font-size: .85rem;
  font-weight: 750;
  letter-spacing: 0;
  text-transform: none;
}

body.ui-webgis .brand span {
  color: var(--ui-text-muted);
  font-family: var(--ui-font);
  font-size: .64rem;
}

body.ui-webgis .brand::after {
  display: none;
}

body.ui-webgis button,
body.ui-webgis select,
body.ui-webgis .rangeTool {
  border-color: var(--ui-border-strong);
  border-radius: var(--ui-radius-sm);
  background: var(--ui-surface-raised);
  color: var(--ui-text-muted);
  font-family: var(--ui-font);
  box-shadow: none;
}

body.ui-webgis button:hover,
body.ui-webgis select:hover {
  border-color: rgba(59, 130, 246, .42);
  background: var(--ui-surface-hover);
  color: var(--ui-text);
}

body.ui-webgis button.active,
body.ui-webgis .toolbarMenu button.active {
  border-color: rgba(59, 130, 246, .5);
  background: rgba(37, 99, 235, .2);
  color: #bfdbfe;
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, .08);
}

body.ui-webgis .back-btn {
  height: 32px;
  padding: 0 10px;
  color: var(--ui-text-muted);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: 0;
}

body.ui-webgis .splitButtonGroup .splitMain {
  border-radius: var(--ui-radius-sm) 0 0 var(--ui-radius-sm);
}

body.ui-webgis .splitButtonGroup .splitArrow {
  border-radius: 0 var(--ui-radius-sm) var(--ui-radius-sm) 0;
}

body.ui-webgis .toolbarMenu {
  border: 1px solid var(--ui-border-strong) !important;
  border-radius: var(--ui-radius) !important;
  background: rgba(13, 23, 40, .98) !important;
  box-shadow: var(--ui-shadow-panel) !important;
}

body.ui-webgis main {
  grid-template-columns: minmax(0, 1fr) 340px;
}

body.ui-webgis main > aside {
  padding: 12px;
  gap: 10px;
  background: var(--ui-surface);
  border-left: 1px solid var(--ui-border);
}

body.ui-webgis main > aside > section {
  padding: 12px;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  background: var(--ui-surface-raised);
  box-shadow: none;
}

body.ui-webgis main > aside h2,
body.ui-webgis .telemetryBox h2 {
  color: var(--ui-text);
  font-family: var(--ui-font);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .75px;
  text-transform: uppercase;
}

body.ui-webgis .kv {
  font-family: var(--ui-font);
  font-size: .73rem;
}

body.ui-webgis .kv b {
  color: var(--ui-text-muted);
}

body.ui-webgis .status,
body.ui-webgis .measureReadout {
  border-color: var(--ui-border-strong);
  border-radius: var(--ui-radius);
  background: rgba(13, 23, 40, .92);
  color: var(--ui-text);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .24);
}

body.ui-webgis .compassRose {
  border-color: var(--ui-border-strong);
  background: rgba(13, 23, 40, .88);
}

body.ui-webgis .compassRose::after {
  border-bottom-color: var(--ui-primary-hover);
}

body.ui-webgis .item,
body.ui-webgis .layerControl {
  border-radius: var(--ui-radius) !important;
  background: var(--ui-surface-hover) !important;
}

/* Light mode remains available, using the same component geometry. */
body.ui-webgis.theme-light {
  --ui-bg: #f4f7fb;
  --ui-surface: #ffffff;
  --ui-surface-raised: #f6f8fb;
  --ui-surface-hover: #eaf0f8;
  --ui-surface-strong: #dce6f2;
  --ui-text: #152238;
  --ui-text-muted: #607089;
  --ui-text-soft: #8c99aa;
  --ui-border: rgba(21, 34, 56, .1);
  --ui-border-strong: rgba(21, 34, 56, .16);
}

body.ui-webgis.theme-light #app > header,
body.ui-webgis.theme-light main > aside,
body.ui-webgis.theme-light main > aside > section {
  background: var(--ui-surface);
  color: var(--ui-text);
}

body.ui-webgis.theme-light button,
body.ui-webgis.theme-light select,
body.ui-webgis.theme-light .rangeTool {
  background: var(--ui-surface-raised);
  color: var(--ui-text-muted);
  border-color: var(--ui-border-strong);
}

body.ui-webgis.theme-light button.active,
body.ui-webgis.theme-light .toolbarMenu button.active {
  background: rgba(37, 99, 235, .12);
  color: #1d4ed8;
}

@media (max-width: 1180px) {
  body.ui-webgis #app > header {
    align-items: center;
  }

  body.ui-webgis .toolbar {
    gap: 5px;
  }

  body.ui-webgis .toolbar > button,
  body.ui-webgis .splitButtonGroup {
    width: 76px;
    min-width: 76px;
    max-width: 76px;
  }
}

@media (max-width: 900px) {
  body.ui-webgis main {
    grid-template-columns: 1fr;
  }

  body.ui-webgis main > aside {
    border-left: 0;
    border-top: 1px solid var(--ui-border);
  }
}