/* Tenstreet Migration's additions to keel.css. Colours are keel's --af-* tokens. */

/* The header's export picker and the DriverHub company beside it. */
.export-btn { display: inline-flex; align-items: center; gap: .4rem; max-width: 22rem; border: 1px solid var(--af-line); background: var(--af-card); }
.export-btn .export-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.export-menu { max-height: 70vh; overflow-y: auto; min-width: 18rem; }
.dh-company { display: inline-flex; align-items: center; gap: .3rem; font-size: .8125rem; color: var(--af-ink-soft); text-decoration: none; white-space: nowrap; }
.dh-company:hover { color: var(--af-ink); }
.dh-company.is-unset { color: var(--af-warning-ink); }
@media (max-width: 767.98px) {
  .dh-company { display: none; }
  .export-btn { max-width: 11rem; }
}

/* Persona notes render in a narrow column in DriverHub; preview them at that width. */
.persona-note { max-width: 22rem; font-size: .875rem; line-height: 1.4; }

.raw-xml {
  max-height: 70vh;
  overflow: auto;
  padding: 1rem 1.25rem;
  font-size: .78rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: var(--af-inset);
}

.map-target-col { width: 45%; }
.nav-tabs .nav-link .badge { font-weight: 500; }

/* ---------------------------------------------------------------- jobs */
/* The header's Jobs button: a count while jobs are going (live, /jobs/feed). */
.jobs-button { border: 1px solid var(--af-line); color: var(--af-ink-soft); white-space: nowrap; }
.jobs-button.is-busy { border-color: var(--af-info-edge); background: var(--af-info-wash); color: var(--af-info-ink); }
.jobs-button.is-busy i { animation: keel-pulse 1.2s ease-in-out infinite; }
.jobs-count { background: var(--af-info-mark); color: #fff; margin-left: .2rem; }
/* Outcomes read at a glance: done solid green, done with warnings solid amber, failed or
   lost solid red, cancelled yellow. */
.badge.job-status.is-ok { background: var(--af-success-solid) !important; color: #fff !important; }
.badge.job-status.is-warnings { background: var(--af-warning-mark) !important; color: var(--af-warning-on) !important; }
.badge.job-status.is-failed, .badge.job-status.is-lost { background: var(--af-danger-solid) !important; color: #fff !important; }
.job-status i { font-size: .8em; }
.job-status.is-running i { animation: keel-pulse 1.2s ease-in-out infinite; }
.job-view { display: flex; flex-direction: column; min-height: 0; gap: .5rem; }
.job-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; }
.job-title { font-weight: 650; color: var(--af-ink); text-decoration: none; }
.job-title:hover { text-decoration: underline; }
.job-facts { display: flex; flex-wrap: wrap; gap: .25rem .9rem; font-size: .85rem; color: var(--af-ink-soft); }
.job-facts i { color: var(--af-ink-faint); margin-right: .15rem; }
.job-actions { margin-left: auto; display: flex; gap: .4rem; }
.job-actions form[hidden], .job-actions a[hidden] { display: none !important; }
.job-outcome { display: flex; align-items: center; gap: .6rem; border-radius: var(--af-radius-sm); padding: .5rem .9rem; font-size: 1.05rem; font-weight: 700; border: 1px solid transparent; }
.job-outcome.is-ok { background: var(--af-success-solid); color: #fff; }
.job-outcome.is-warnings { background: var(--af-warning-mark); color: var(--af-warning-on); }
.job-outcome.is-failed, .job-outcome.is-lost { background: var(--af-danger-solid); color: #fff; }
.job-outcome.is-running { background: var(--af-info-wash); color: var(--af-info-ink); border-color: var(--af-info-edge); }
.job-outcome.is-running i { animation: keel-pulse 1.2s ease-in-out infinite; }
.job-outcome.is-queued, .job-outcome.is-waiting { background: var(--af-neutral-wash); color: var(--af-neutral-ink); border-color: var(--af-neutral-edge); }
.job-outcome.is-cancelled { background: var(--af-warning-wash); color: var(--af-warning-ink); border-color: var(--af-warning-edge); }
.job-progress[hidden] { display: none; }
.job-bar { height: .5rem; border-radius: 999px; background: var(--af-neutral-wash); overflow: hidden; }
.job-bar-fill { height: 100%; width: 0; background: var(--af-info-mark); transition: width .3s ease; }
.job-progress-cell { min-width: 8rem; }
.job-progress-cell .job-bar { height: .4rem; }
.log-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; }
.job-log {
  background: var(--af-log-bg); color: var(--af-log-ink);
  font-family: var(--af-mono); font-size: .8rem; line-height: 1.5;
  border-radius: 10px; padding: .75rem 1rem; margin: 0;
  min-height: 14rem; max-height: 70vh; overflow: auto; white-space: pre;
}
.job-view.is-full .job-log { max-height: calc(100vh - 22rem); min-height: 10rem; }
.job-log.wrap { white-space: pre-wrap; overflow-wrap: anywhere; }
.job-log .o-stderr { color: var(--af-log-err); }
.job-log .o-system { color: var(--af-log-sys); font-style: italic; }
.job-log:focus-visible { outline: 2px solid var(--af-accent); outline-offset: 2px; }
/* The window body is a flex column (keel): its blocks keep their height and the body
   scrolls, rather than squeezing a block with overflow hidden down to its header. */
.float-window-body > * { flex-shrink: 0; }
/* A job started from an icon next to a name (shared/_jobs.html job_icon) */
.job-icon .btn { padding: 0 .3rem; line-height: 1; vertical-align: baseline; color: var(--af-ink-soft); }
.job-icon .btn:hover, .job-icon .btn:focus-visible { color: var(--af-ink); }
.float-window-body > .job-view { flex: 1; }
.float-window-body > .job-view > .job-log { flex: 1; max-height: none; min-height: 6rem; }
.job-menu { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .75rem; }
.job-list { list-style: none; padding: 0; margin: 0; }
.job-list li { display: flex; align-items: center; gap: .6rem; padding: .35rem 0; border-bottom: 1px solid var(--af-line-soft); }
.job-list a { color: var(--af-ink); text-decoration: none; }
.job-list a:hover { text-decoration: underline; }
@media (max-width: 991.98px) {
  .job-actions { margin-left: 0; }
}

/* ---------------------------------------------------------------- users */
/* Everyone but admins: no access (keel's AdminOnly). Neutral, not red: it is the rule. */
.power-badge.is-none { color: var(--af-neutral-ink); background: var(--af-neutral-wash); border-color: var(--af-neutral-edge); }

/* ---------------------------------------------------------------- document viewer */
/* After /opt/samba-integration's license and application viewers. */
.lv-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.lv-nav { margin-left: auto; display: flex; align-items: center; gap: .5rem; }
.lv-stage { position: relative; }
.lv-item { margin: 0; }
.lv-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; margin-bottom: .35rem; }
.lv-sep { width: 1px; align-self: stretch; background: var(--af-line); margin: 0 .25rem; }
.lv-zoom, .lv-page { font-size: .8rem; min-width: 3.5rem; text-align: center; color: var(--af-ink-soft); }
.lv-hint { font-size: .75rem; color: var(--af-ink-faint); margin-left: auto; }
.lv-imgwrap { position: relative; height: 60vh; min-height: 16rem; overflow: hidden; background: var(--af-canvas-deep); border-radius: var(--af-radius-sm); touch-action: none; }
.float-window .lv-imgwrap { height: max(20rem, 55vh); }
.lv-img:not([src]) { visibility: hidden; }
.lv-imgwrap.zoomed { cursor: grab; }
.lv-imgwrap.dragging { cursor: grabbing; }
.lv-img { position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; object-fit: contain; transform: translate(-50%, -50%); transform-origin: center; user-select: none; }
.lv-loading { position: absolute; inset: 0; display: grid; place-items: center; color: var(--af-ink-soft); font-size: .875rem; }
.lv-loading[hidden] { display: none; }
.lv-file { display: grid; place-items: center; gap: .5rem; padding: 2rem; text-align: center; color: var(--af-ink-soft); background: var(--af-inset); border-radius: var(--af-radius-sm); }
.lv-file-icon { font-size: 2.5rem; }
.lv-caption { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .5rem; }
.lv-name { max-width: 28rem; }
.lv-ids { display: flex; flex-wrap: wrap; gap: .25rem 1rem; width: 100%; color: var(--af-ink-soft); }
.lv-thumbs { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; }
.lv-thumb { width: 4rem; height: 3rem; padding: 0; border: 2px solid var(--af-line); border-radius: var(--af-radius-xs); background: var(--af-inset); overflow: hidden; display: grid; place-items: center; font-size: .7rem; color: var(--af-ink-soft); }
.lv-thumb.active { border-color: var(--af-primary); }
.lv-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lv-thumb img.rot-90 { transform: rotate(90deg); }
.lv-thumb img.rot-180 { transform: rotate(180deg); }
.lv-thumb img.rot-270 { transform: rotate(270deg); }
.lv-footnote { font-size: .75rem; }
.float-window:has(.lv) { min-width: min(48rem, 96vw); min-height: 32rem; }
/* Tenstreet's HTML pages: a sandboxed frame, white like the page they were printed from. */
.lv-framewrap { height: max(20rem, 60vh); border-radius: var(--af-radius-sm); overflow: hidden; border: 1px solid var(--af-line); background: #fff; }
.lv-frame { width: 100%; height: 100%; border: 0; display: block; background: #fff; }