/* Yappari house styles, after ClienteBlazor: Roboto 12px, the house blue palette, the 185px side bar and 45px
   header, compact editors, framed white sections on the light grey workspace and the yellow commit action.
   Shared tokens and cross-component classes live here; each component keeps its own layout in Name.razor.css.
   DevExpress adjustments are in devexpress-house.css; the Fluent primary ramp in house-accent.css. */

@font-face {
  font-family: Roboto;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/roboto-variable-latin.woff2') format('woff2');
}

:root {
  --house-blue: #35467a;
  --house-blue-light: #677ab3;
  --house-accent: #586ba4;
  --house-accent-strong: #405288;
  --house-band: #bbc4e0;
  --house-pale: #eef1f9;
  --house-tab: #8699d2;
  --house-tab-active: #405288;
  --house-on-blue: #dbe5ff;
  --house-on-blue-muted: #a2b6f0;
  --house-title-on-blue: #b7c9ff;
  --house-commit: #ffdd80;
  --house-commit-hover: #ffd35c;
  --house-commit-text: #4e4e4e;
  --house-feedback: #f6a04d;
  --house-feedback-hover: #f08a2a;
  --house-feedback-text: #3d2408;
  --house-page: #ececec;
  --house-surface: #ffffff;
  --house-surface-alt: #f6f7f9;
  --house-text: #35467a;
  --house-text-strong: #1f2a44;
  --house-body-text: #505457;
  --house-muted: #868686;
  --house-field-border: #cfcfcf;
  --house-readonly: #fff6db;
  --house-shadow: 0 1px 2px rgba(0, 0, 0, .27);
  --house-danger: #c0392b;
  --house-success: #2a7d2a;
  --canvas-bg: #f3f3f3;
  --dxbl-font-family: Roboto, Arial, sans-serif;
}

/* Dark mode (html.yap-dark, set by ThemeState): the shell keeps its blues, the surfaces go dark. */
@media screen {
  .yap-dark {
    --house-blue: #1f2a49;
    --house-blue-light: #34447a;
    --house-accent: #8699d2;
    --house-accent-strong: #a2b6f0;
    --house-band: #2f3a5c;
    --house-pale: #26304a;
    --house-tab: #8699d2;
    --house-tab-active: #cfd6ec;
    --house-page: #121418;
    --house-surface: #1b1e24;
    --house-surface-alt: #22262e;
    --house-text: #c9d3f0;
    --house-text-strong: #e6eaf4;
    --house-body-text: #c3c8d2;
    --house-muted: #8b93a3;
    --house-field-border: #3a3f49;
    --house-readonly: #2d2a1d;
    --house-shadow: 0 1px 2px rgba(0, 0, 0, .6);
    --canvas-bg: #16191f;
    color-scheme: dark;
  }
}

* {
  box-sizing: border-box;
}

html,
body,
#app {
  height: 100%;
  margin: 0;
  overflow: hidden;
}

body {
  font: 12px Roboto, Arial, sans-serif;
  color: var(--house-text);
  background: var(--house-page);
}

button,
input,
textarea,
select {
  font: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Boot splash (index.html before WebAssembly starts, MainLayout until the preferences are applied). */
.boot {
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  color: var(--house-text);
}

.boot img {
  width: 70px;
}

.boot p {
  margin: 0;
  font-size: 14px;
}

.boot progress {
  width: 160px;
  accent-color: var(--house-accent);
}

#blazor-error-ui {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px;
  background: #ffe7a6;
  color: #4e4e4e;
  z-index: 99999;
}

#blazor-error-ui a {
  text-decoration: underline;
  margin-left: 8px;
}

/* ---- Shared building blocks ---- */

/* Interface icons outside DevExpress components (Components/YapIcon): one Fluent outline per icon, as wide as the
   Font Awesome icons they replaced (1.25em) so layouts keep their spacing, in the text colour. */
.yap-icon {
  display: inline-block;
  width: 1.25em;
  height: 1em;
  line-height: 1;
  text-align: center;
  vertical-align: -0.125em;
}

.yap-icon > svg {
  width: 1.15em;
  height: 1.15em;
  margin: -0.075em 0;
  fill: currentColor;
  vertical-align: top;
}

.element-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
  flex: none;
}

/* A white framed section on the grey workspace (ClienteBlazor's .framed). */
.framed-section {
  background: var(--house-surface);
  border-radius: 2px;
  box-shadow: var(--house-shadow);
  padding: 6px 10px 10px;
}

.framed-section__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 2px 0 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--house-muted);
  text-transform: uppercase;
  letter-spacing: .02em;
}

.framed-section__subtitle {
  margin: 10px 0 6px;
  font-size: 11px;
  font-weight: 500;
  color: var(--house-muted);
  text-transform: uppercase;
}

.framed-section__count {
  margin-left: auto;
  padding: 1px 7px;
  border-radius: 8px;
  background: var(--house-pale);
  color: var(--house-accent);
  font-size: 10px;
  font-weight: 500;
  text-transform: none;
}

.framed-section__note {
  margin: 8px 0 0;
  color: var(--house-muted);
  font-size: 11px;
  line-height: 1.45;
}

.framed-section__buttons {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

.framed-section__actions {
  display: flex;
  justify-content: flex-end;
  padding: 2px 0 8px;
}

/* Editors laid out as house fields. */
.house-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.house-form--single {
  grid-template-columns: minmax(0, 1fr);
}

.house-form__wide {
  grid-column: 1 / -1;
}

/* Forms bound to a model (DevExpress form layout, needed by AI smart paste). */
.house-form-layout {
  width: 100%;
}

/* AI smart paste above a form: the source text and its button. */
.smart-paste {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 10px;
  padding: 8px;
  border: 1px dashed var(--house-band);
  border-radius: 6px;
  background: var(--house-pale);
}

.smart-paste__text {
  flex: 1;
}

/* Floating cards over the canvas (find, network analysis). */
.floating-panel {
  position: absolute;
  top: 10px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  width: 330px;
  max-height: calc(100% - 20px);
  overflow: hidden;
  border-radius: 8px;
  background: var(--house-surface);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .22);
}

.floating-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 6px 6px 12px;
  background: var(--house-blue);
  color: var(--house-title-on-blue);
  font-size: 13px;
}

.floating-panel__close {
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  cursor: pointer;
}

.floating-panel__close:hover {
  background: rgba(255, 255, 255, .14);
}

.floating-panel__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  overflow: auto;
}

/* The body scrolls; its blocks keep their height instead of being squeezed (a field with overflow:hidden would
   otherwise shrink to nothing and clip its editor). */
.floating-panel__body > * {
  flex-shrink: 0;
}

.floating-panel__section {
  margin: 6px 0 0;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--house-muted);
}

.floating-panel__note {
  margin: 0;
  font-size: 11px;
  color: var(--house-muted);
}

/* Grid views (flows, events). */
.grid-view {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  padding: 4px 8px 8px;
  background: var(--house-surface);
}

.grid-view__head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
}

.grid-view__head h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 auto 0 0;
  font-size: 20px;
  font-weight: 300;
  text-transform: uppercase;
  color: var(--house-text);
  white-space: nowrap;
}

.grid-view__count {
  padding: 1px 8px;
  border-radius: 10px;
  background: var(--house-pale);
  color: var(--house-accent);
  font-size: 12px;
  font-weight: 500;
}

.grid-view__grid {
  flex: 1 1 auto;
  min-height: 0;
}

.grid-view__actions {
  display: flex;
  gap: 2px;
}

/* SVG chart text (analysis visuals, histograms). */
.chart-svg {
  width: 100%;
  max-width: 560px;
  height: auto;
  background: var(--house-surface-alt);
  border: 1px solid var(--house-pale);
  border-radius: 4px;
}

.chart-svg--square {
  max-width: 360px;
}

.chart-svg--wide {
  max-width: none;
  min-width: 640px;
}

.chart-svg--compact {
  max-width: none;
}

.chart-label {
  font: 10px Roboto, Arial, sans-serif;
  fill: var(--house-body-text);
}

.chart-label--inverse {
  fill: #fff;
  font-weight: 600;
}

.chart-quadrant {
  font: 11px Roboto, Arial, sans-serif;
  fill: #c2477e;
  opacity: .8;
}

.chart-axis {
  font: 10px Roboto, Arial, sans-serif;
  fill: var(--house-muted);
  text-anchor: middle;
}

.chart-value {
  font: 600 11px Roboto, Arial, sans-serif;
  fill: var(--house-body-text);
}

.chart-empty {
  padding: 8px 4px;
  color: var(--house-muted);
}

/* Hidden pickers opened from the ribbon and the header. */
.file-inputs {
  display: none;
}

@media (max-width: 1000px) {
  .floating-panel {
    width: min(330px, calc(100% - 20px));
  }
}

/* Deferred viewers (PDF, rich text, pivot): shown while their assemblies download. */
.lazy-feature__loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 120px;
  color: var(--house-muted);
}

.lazy-feature__spinner {
  width: 18px;
  height: 18px;
  border: 2px solid var(--house-band);
  border-top-color: var(--house-accent);
  border-radius: 50%;
  animation: lazy-feature-spin .8s linear infinite;
}

@keyframes lazy-feature-spin {
  to {
    transform: rotate(360deg);
  }
}

.lazy-feature__message {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 16px;
  color: var(--house-danger);
}

.lazy-feature__message p {
  margin: 0;
}

/* Advanced search window (Features/Search): criteria on top, the results grid fills the rest. Global because the
   DxWindow root is not part of the component's scoped markup. The top row's editors need the «.search-window__top >»
   prefix: DevExpress's core.min.css loads later and its «.dxbl-text-edit { width: 100% }» wins a tie. */
.search-window .dxbl-window-body {
  padding: 8px 10px 10px;
}

.search-window__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
}

.search-window__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.search-window__top > .search-window__text {
  flex: 1 1 260px;
  min-width: 200px;
}

.search-window__top > .search-window__period {
  width: 150px;
}

.search-window__top > .search-window__days {
  width: 90px;
}

.search-window__top > .search-window__date {
  width: 130px;
}

.search-window__top > .search-window__scope {
  width: 160px;
}

.search-window__top > .search-window__saved {
  width: 190px;
}

.search-window__spacer {
  flex: 1 1 0;
}

.search-window__tabs .dxbl-tabs-content-panel {
  padding-top: 8px;
}

.search-window__conditions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 0;
}

.search-window__condition {
    display: grid;
    grid-template-columns: minmax(140px, 1fr) 140px minmax(120px, 1fr) auto;
    gap: 6px;
    align-items: center;
    max-width: 720px;
}

.search-window__form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  align-items: end;
}

.search-window__form--four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.search-window__form--network {
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
}

.search-window__wide {
  grid-column: 1 / -1;
}

.search-window__wide-3 {
  grid-column: 1 / 4;
}

.search-window__use-selection {
  align-self: center;
}

.search-window__checks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
  color: var(--house-muted);
}

.search-window__note {
  margin: 6px 0 0;
  color: var(--house-muted);
  font-size: 12px;
}

.search-window__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding-top: 2px;
  border-top: 1px solid var(--house-pale);
}

.search-window__count {
  color: var(--house-text);
  font-weight: 500;
}

.search-window__results {
  flex: 1 1 0;
  min-height: 160px;
}

.search-window__name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.search-window__name .element-icon {
  width: 18px;
  height: 18px;
}

@media (max-width: 760px) {
  .search-window__form--four,
  .search-window__form--network {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .search-window__wide-3 {
    grid-column: 1 / -1;
  }
}

/* Identity candidates window (Features/Identity): ranked pairs, groups, repeated records, reference list, settings.
   Global because the DxWindow root is not part of the component's scoped markup. */
.candidates-window .dxbl-window-body {
  padding: 8px 10px 10px;
}

.candidates-window__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
}

.candidates-window__top,
.candidates-window__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.candidates-window__row {
  margin: 6px 0;
}

.candidates-window__stats,
.candidates-window__note,
.candidates-window__empty {
  color: var(--house-muted);
  font-size: 12px;
}

.candidates-window__note,
.candidates-window__empty {
  margin: 4px 0 6px;
}

.candidates-window__tabs .dxbl-tabs-content-panel {
  padding-top: 8px;
}

.candidates-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.candidates-list__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding: 5px 8px;
  border: 1px solid var(--house-pale);
  border-left: 3px solid #8e44ad;
  border-radius: 4px;
}

.candidates-list__item--rejected {
  border-left-color: var(--house-danger);
  opacity: .8;
}

.candidates-list__item--done {
  border-left-style: dashed;
}

.candidates-list__score {
  flex: none;
  min-width: 52px;
  padding: 1px 6px;
  border: 1.5px solid #8e44ad;
  border-radius: 9px;
  color: #8e44ad;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

.candidates-list__body {
  display: flex;
  flex: 1 1 320px;
  flex-direction: column;
  min-width: 0;
}

.candidates-list__names {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  font-weight: 600;
}

.candidates-list__name {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.candidates-list__name:hover {
  text-decoration: underline;
}

.candidates-list__sep {
  color: #8e44ad;
}

.candidates-list__why {
  font-size: 12px;
}

.candidates-list__meta {
  color: var(--house-muted);
  font-size: 11px;
}

.candidates-list__actions {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  gap: 4px;
}

.match-settings {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.match-settings__block h4 {
  margin: 0 0 4px;
}

.match-settings__checks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
}

.match-settings__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px 12px;
  align-items: end;
}

.match-settings__grid--weights {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.match-settings__field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12px;
}

.match-settings__table {
  border-collapse: collapse;
}

.match-settings__table th,
.match-settings__table td {
  padding: 3px 8px;
  text-align: left;
}

.match-settings__table .dxbl-spin-edit {
  width: 90px;
}

@media (max-width: 640px) {
  .match-settings__grid,
  .match-settings__grid--weights {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Events and flows recorded more than once (identity, step 4d): the record a set presents and its repeats. */
.grid-same {
  margin-left: 6px;
  padding: 0 5px;
  border: 1px solid #8e44ad;
  border-radius: 8px;
  color: #8e44ad;
  font-size: 11px;
}

.candidates-window__filters {
  align-items: flex-end;
  margin-bottom: 6px;
}

.candidates-list__adjust {
  width: 56px;
  padding: 2px 4px;
  border: 1px solid var(--house-field-border);
  border-radius: 4px;
  background: var(--house-surface);
  color: var(--house-text);
}

.candidates-list__reassign {
  max-width: 100%;
  margin-top: 2px;
  font-size: 12px;
}

.match-learning__form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 6px 12px;
  align-items: end;
}

.match-learning__comparator {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  grid-column: 1 / -1;
}

.match-learning__message {
  margin: 4px 0;
  font-weight: 600;
}

.match-learning__profile {
  margin: 4px 0;
  padding: 4px 8px;
  border: 1px solid var(--house-pale);
  border-left: 3px solid #8e44ad;
  border-radius: 4px;
}

.match-learning__profile summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  cursor: pointer;
}

.match-learning__meta {
  color: var(--house-muted);
  font-size: 12px;
}

.match-learning__tree {
  margin: 6px 0;
  font-size: 12px;
  white-space: pre-wrap;
}

.match-learning__runs {
  margin: 0;
  padding-left: 18px;
  font-size: 12px;
}

@media (max-width: 640px) {
  .match-learning__form {
    grid-template-columns: minmax(0, 1fr);
  }
}

.cross-case h4 {
  margin: 10px 0 4px;
}

.cross-case__fields {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 12px;
  margin-top: 4px;
  font-size: 12px;
}

/* Geographic map: the active drawing tool (measure, area selection). */
.leaflet-bar a.geomap-measure--active {
    background: #f39c12;
    color: #fff;
}

/* Archivo menu groups (Layout/CaseRibbon): DxRibbonApplicationTabItem has no BeginGroup, so the first item of each group
   draws the line above it — on its list item, since the menu button's own border colour is DevExpress's (transparent). */
.dxbl-btn-dropdown-list-item:has(> .dxbl-btn-dropdown-item > .file-menu-group) {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid var(--house-band);
}

/* An Archivo item that does not apply right now (CaseRibbon.ShownIf): hidden in place, so it comes back where it was.
   !important: DevExpress's dropdown and adaptive-menu rules set the list item's display with longer selectors. */
.dxbl-btn-dropdown-list-item:has(> .dxbl-btn-dropdown-item > .file-menu-hidden) {
  display: none !important;
}