/* ───────────────────────────────────────────────────────────────────────────
   DMA habillage for the assist.dma.immo console (lejianwen rustdesk-api / Vue +
   Element Plus). Injected into the console HTML by nginx (sub_filter). Tokens
   mirror the DMA brand from dma-app (web.dmapp.ca):
     navy #003E7E · turquoise #00A1B0 · fonts Outfit (titles) + DM Sans (body)
   ─────────────────────────────────────────────────────────────────────────── */

:root {
  --el-color-primary: #003E7E;
  --el-color-primary-light-3: #0055A4;
  --el-color-primary-light-5: #4078a8;
  --el-color-primary-light-7: #8fa9c6;
  --el-color-primary-light-8: #bcccde;
  --el-color-primary-light-9: #E0EAFF;
  --el-color-primary-dark-2: #002E5C;
  --el-color-success: #2E6A47;
  --el-color-warning: #946F18;
  --el-color-danger:  #B6342B;
  --el-color-error:   #B6342B;
  --el-color-info:    #2D4D9B;
  --el-border-radius-base: 8px;
  --el-menu-active-color: #ffffff;
}

/* Typography */
html, body, #app, .el-button, .el-input, .el-table, .el-menu {
  font-family: 'DM Sans', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
h1, h2, h3, h4, .header-logo .title, .el-dialog__title, .el-page-header__title {
  font-family: 'Outfit', 'DM Sans', sans-serif;
  letter-spacing: .2px;
}

/* ── Top header: DMA navy→turquoise gradient + white wordmark ── */
.el-header.app-header, .app-header {
  background: linear-gradient(135deg, #003E7E 0%, #00A1B0 100%) !important;
  border-bottom: none !important;
  box-shadow: 0 1px 6px rgba(0, 32, 64, .25);
}
.app-header .header-logo .title { color: #fff !important; font-weight: 600; }
.app-header .header-logo img.logo {
  content: url('/dma/logo-white.svg');
  height: 30px !important;
  width: auto !important;
  max-width: 170px;
  margin-right: 6px;
}
.app-header .ex-icon, .app-header .el-icon, .app-header .setting * { color: #fff !important; }

/* ── Left sidebar: DMA navy ── */
.app-left, .el-menu.menus { background-color: #003E7E !important; }
.el-menu.menus { border-right: 0 !important; }
.el-menu.menus .el-menu-item,
.el-menu.menus .el-sub-menu__title {
  color: rgba(255, 255, 255, .82) !important;
}
.el-menu.menus .el-menu-item:hover,
.el-menu.menus .el-sub-menu__title:hover {
  background-color: rgba(255, 255, 255, .07) !important;
  color: #fff !important;
}
.el-menu.menus .el-menu-item.is-active {
  background-color: rgba(255, 255, 255, .16) !important;
  color: #fff !important;
  border-left: 3px solid #00C4D6;
}

/* ── Content surfaces ── */
.el-main, .app-container { background-color: #F7F9FC; }
.el-card, .el-table { border-radius: 10px; }
a, .el-link, .el-link.el-link--default { color: #003E7E; }

/* ── Primary buttons → navy, with turquoise hover ── */
.el-button--primary {
  --el-button-bg-color: #003E7E;
  --el-button-border-color: #003E7E;
  --el-button-hover-bg-color: #0055A4;
  --el-button-hover-border-color: #0055A4;
  --el-button-active-bg-color: #002E5C;
  --el-button-active-border-color: #002E5C;
}
.el-switch.is-checked .el-switch__core { background-color: #00A1B0 !important; border-color: #00A1B0 !important; }

/* ── Login page: DMA gradient backdrop + white wordmark ── */
.login-container {
  background: linear-gradient(135deg, #003E7E 0%, #00A1B0 100%) !important;
}
.login-card {
  background: rgba(0, 18, 41, 0.45) !important;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 14px !important;
  box-shadow: 0 16px 48px rgba(0, 18, 41, 0.50) !important;
}
.login-card img.login-logo {
  content: url('/dma/logo-white.svg');
  width: auto !important;
  height: 54px !important;
  max-width: 230px;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin-bottom: 10px;
}
.login-card .el-form-item__label { color: #ffffff !important; }
.login-card .el-input__wrapper { border-radius: 8px !important; }
.login-card .el-button--primary { width: 100%; font-weight: 600; letter-spacing: .3px; }