/* ===========================================================================
   Dialog layer, toasts and the searchable select.
   These three replace window.confirm, window.alert and the native dropdown.
   =========================================================================== */

/* --------------------------------------------------------------- dialog */

.dlg-scrim {
  position: fixed; inset: 0; z-index: 90;
  background: var(--scrim);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  display: grid; place-items: center;
  padding: var(--s-4);
  opacity: 0;
  transition: opacity var(--fast) var(--ease);
}
.dlg-scrim.is-open { opacity: 1; }

.dlg {
  width: 100%;
  max-width: 430px;
  background: var(--panel-solid);
  border: 1px solid var(--panel-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-3);
  padding: var(--s-6);
  text-align: center;
  transform: translateY(8px) scale(0.985);
  transition: transform var(--normal) var(--ease);
}
.dlg-scrim.is-open .dlg { transform: none; }
.dlg--wide { max-width: 620px; text-align: left; }

.dlg__icon {
  width: 52px; height: 52px; margin: 0 auto var(--s-4);
  border-radius: var(--r-md);
  display: grid; place-items: center;
  background: var(--tint-info-bg); color: var(--tint-info);
}
.dlg--wide .dlg__icon { margin-left: 0; }
.dlg__icon--danger  { background: var(--tint-danger-bg);  color: var(--tint-danger); }
.dlg__icon--warning { background: var(--tint-warning-bg); color: var(--tint-warning); }
.dlg__icon--success { background: var(--tint-success-bg); color: var(--tint-success); }
.dlg__icon--brand   { background: var(--brand-soft);      color: var(--text-brand); }

.dlg__title { font-size: var(--fs-lg); font-weight: 700; color: var(--text-strong); }
/* A record's own name goes here, on its own line - never in the heading,
   where a long one wraps to three lines and stretches the card. */
.dlg__subject {
  margin-top: 6px;
  font-weight: 600;
  color: var(--text);
  overflow-wrap: anywhere;
}
.dlg__text { margin-top: var(--s-2); color: var(--text-muted); }
.dlg__body { margin-top: var(--s-4); text-align: left; }
.dlg__actions { display: flex; gap: var(--s-2); justify-content: center; margin-top: var(--s-5); flex-wrap: wrap; }
.dlg--wide .dlg__actions { justify-content: flex-end; }
.dlg__actions .btn { min-width: 108px; }

/* --------------------------------------------------------------- toasts */

.toasts {
  position: fixed; right: var(--s-4); bottom: var(--s-4); z-index: 95;
  display: flex; flex-direction: column; gap: var(--s-2);
  max-width: min(390px, calc(100vw - var(--s-6)));
}
.toast {
  display: flex; align-items: flex-start; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  background: var(--panel-solid);
  border: 1px solid var(--panel-border);
  box-shadow: var(--shadow-3);
  animation: toast-in var(--normal) var(--ease);
}
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } }
.toast.is-leaving { opacity: 0; transform: translateY(6px); transition: all var(--normal) var(--ease); }
.toast__icon { flex: none; margin-top: 1px; }
.toast--success .toast__icon { color: var(--tint-success); }
.toast--error   .toast__icon { color: var(--tint-danger); }
.toast--warning .toast__icon { color: var(--tint-warning); }
.toast--info    .toast__icon { color: var(--tint-info); }
.toast__text { flex: 1; min-width: 0; font-size: var(--fs-sm); overflow-wrap: anywhere; }
.toast__close {
  background: none; border: 0; cursor: pointer; color: var(--text-subtle);
  padding: 2px; border-radius: var(--r-xs); flex: none;
}
.toast__close:hover { color: var(--text); background: var(--row-hover); }

/* Server-rendered flash. The script lifts these into toasts; with scripting
   off they simply stay on the page as banners. */
.flash-bank { display: flex; flex-direction: column; gap: var(--s-2); margin-bottom: var(--s-4); }

/* ------------------------------------------------------------- combobox */

/* The native <select> stays in the DOM and is what the form submits - this
   is only a skin over it, so the page still works with scripting off. */
.combo { position: relative; }
.combo select.combo__native { position: absolute; opacity: 0; pointer-events: none; height: 0; width: 0; }
.combo.is-enhanced select.combo__native { clip: rect(0 0 0 0); }

.combo__button {
  width: 100%;
  height: var(--control-h);
  padding: 0 34px 0 12px;
  display: flex; align-items: center; gap: var(--s-2);
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--r-sm);
  font: inherit; color: var(--text);
  cursor: pointer; text-align: left;
  position: relative;
}
.combo__button:hover { border-color: var(--brand-ring); }
.combo__button[aria-expanded="true"] { border-color: var(--input-focus); box-shadow: var(--ring); }
.combo__value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.combo__value.is-placeholder { color: var(--text-subtle); }
.combo__caret { position: absolute; right: 11px; top: 50%; transform: translateY(-50%); color: var(--text-subtle); pointer-events: none; }

/* The panel is at least as wide as its trigger but free to grow to its widest
   option, capped so it never runs off the screen. Pinned to the trigger width
   it forced every company name to wrap onto three lines. */
.combo__panel {
  position: absolute; z-index: 60; left: 0; right: auto; top: calc(100% + 5px);
  min-width: 100%;
  width: max-content;
  max-width: min(420px, calc(100vw - 2 * var(--page-gutter)));
  background: var(--panel-solid);
  border: 1px solid var(--panel-border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-3);
  padding: var(--s-2);
  display: none;
  max-height: 320px;
  overflow: hidden;
  flex-direction: column;
}
.combo__panel.is-open { display: flex; }
.combo__panel--up { top: auto; bottom: calc(100% + 5px); }
/* Set when a max-content panel would run past the right edge. */
.combo__panel--right { left: auto; right: 0; }
.combo__filter { margin-bottom: var(--s-2); }
.combo__filter input { height: var(--control-h-sm); }
.combo__list { overflow-y: auto; margin: 0; padding: 0; list-style: none; }
.combo__option {
  display: flex; align-items: center; gap: var(--s-3);
  padding: 8px 10px; border-radius: var(--r-xs);
  cursor: pointer; font-size: var(--fs-base);
  color: var(--text);
  flex-wrap: nowrap;
  white-space: nowrap;
}
/* The name takes the slack and truncates; the reference stays whole, since a
   half-printed code is worse than no code. */
.combo__option > span:first-child {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis;
}
.combo__option:hover, .combo__option.is-active { background: var(--row-hover); }
.combo__option.is-selected { color: var(--text-brand); font-weight: 600; }
.combo__option .check { margin-left: auto; opacity: 0; color: var(--brand); }
.combo__option.is-selected .check { opacity: 1; }
.combo__option-sub {
  font-size: var(--fs-xs); color: var(--text-subtle);
  margin-left: auto; flex: none; white-space: nowrap;
}
.combo__list { scrollbar-width: thin; scrollbar-color: var(--ice-300) transparent; }
.combo__list::-webkit-scrollbar { width: 9px; }
.combo__list::-webkit-scrollbar-track { background: transparent; }
.combo__list::-webkit-scrollbar-thumb {
  background: var(--ice-300); border-radius: var(--r-pill);
  border: 2px solid var(--panel-solid);
}
.combo__empty { padding: var(--s-3); text-align: center; color: var(--text-subtle); font-size: var(--fs-sm); }

/* --------------------------------------------------------------- tooltip */

[data-tip] { position: relative; }
[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  background: var(--text); color: var(--panel-solid);
  padding: 4px 8px; border-radius: var(--r-xs);
  font-size: var(--fs-xs); white-space: nowrap; z-index: 70;
  pointer-events: none;
}

/* ---------------------------------------------------------------- flags */

/* National flags are the one place literal colour is correct - it is the
   artwork's own, not a design choice - so it lives in assets/img/flags.svg
   and never in a stylesheet. These rules only give it a gentle edge. */
.flag {
  border-radius: 2.5px;
  overflow: hidden;
  display: inline-block;
  vertical-align: -0.18em;
  box-shadow: 0 0 0 1px var(--glass-line);
  background: var(--panel-solid);
}