/* =========================================================================
   MODAIS.CSS — modals (DESIGN_SYSTEM.md §5.8, §5.11)
   Linked only by pages that open a modal. Colour comes only from tokens.css.
   Buttons, badges, alerts and dropdowns inside modals are styled by main.css;
   form controls by forms.css. This file only shapes the modal itself and the
   few custom blocks rendered inside specific modals.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Base modal — configured through Bootstrap's own variables
   ------------------------------------------------------------------------- */
.modal {
  --bs-modal-bg: var(--rb-surface);
  --bs-modal-color: var(--rb-text);
  --bs-modal-border-color: var(--rb-border);
  --bs-modal-border-width: 1px;
  --bs-modal-border-radius: var(--rb-radius-lg);
  --bs-modal-inner-border-radius: calc(var(--rb-radius-lg) - 1px);
  --bs-modal-box-shadow: var(--rb-shadow-lg);
  --bs-modal-header-border-color: var(--rb-border);
  --bs-modal-header-border-width: 1px;
  --bs-modal-footer-border-color: var(--rb-border);
  --bs-modal-footer-border-width: 1px;
  --bs-modal-footer-bg: var(--rb-surface-2);
  --bs-modal-footer-gap: var(--rb-space-2);
  --bs-modal-header-padding: var(--rb-space-4) var(--rb-space-5);
  --bs-modal-padding: var(--rb-space-5);
  --bs-modal-title-line-height: var(--rb-lh-tight);
}

.modal-content {
  box-shadow: var(--bs-modal-box-shadow);
  overflow: hidden;
}

/* Plain header: surface background, thin bottom border */
.modal-header {
  background: var(--rb-surface);
}

.modal-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--rb-space-1);
  margin: 0;
  font-size: var(--rb-fs-md);
  font-weight: var(--rb-fw-semibold);
  color: var(--rb-text);
}
.modal-title > .bi { color: var(--rb-text-muted); }
.modal-title small {
  font-size: var(--rb-fs-sm);
  font-weight: var(--rb-fw-regular);
  color: var(--rb-text-muted);
}

/* Footer: buttons aligned right on --rb-surface-2 (layout only, no colours) */
.modal-footer {
  padding: var(--rb-space-3) var(--rb-space-5);
}

/* Backdrop: solid overlay, no blur */
.modal-backdrop {
  --bs-backdrop-bg: var(--rb-overlay);
  --bs-backdrop-opacity: 1;
}

/* Short, finite enter motion (small offset) */
.modal.fade .modal-dialog {
  transform: translateY(-8px);
  transition: transform .2s var(--rb-ease);
}
.modal.show .modal-dialog { transform: none; }

/* -------------------------------------------------------------------------
   2. Content commonly placed inside modals
   ------------------------------------------------------------------------- */

/* Tables inside modals (audit history): header like .table-soft, theme-safe
   replacement for Bootstrap's hard-coded .table-light */
.modal .table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--rb-text);
  --bs-table-border-color: var(--rb-border);
  --bs-table-hover-bg: var(--rb-surface-2);
  --bs-table-striped-bg: var(--rb-surface-2);
  margin-bottom: 0;
}
.modal .table > thead.table-light,
.modal .table > thead.table-light > tr > th {
  --bs-table-bg: var(--rb-surface-2);
  --bs-table-color: var(--rb-text-muted);
  --bs-table-border-color: var(--rb-border);
}
.modal .table > thead > tr > th {
  font-size: var(--rb-fs-xs);
  font-weight: var(--rb-fw-semibold);
  letter-spacing: .02em;
  color: var(--rb-text-muted);
  white-space: nowrap;
}

/* List groups inside modals (QC history) */
.modal .list-group {
  --bs-list-group-bg: transparent;
  --bs-list-group-color: var(--rb-text);
  --bs-list-group-border-color: var(--rb-border);
}

/* -------------------------------------------------------------------------
   3. Modal-specific blocks
   ------------------------------------------------------------------------- */

/* QR code menu (#qrMenuModal, cards built in coleta_form.html JS) */
.qr-card {
  height: 100%;
  padding: var(--rb-space-3);
  background: var(--rb-surface);
  border: 1px solid var(--rb-border);
  border-radius: var(--rb-radius-lg);
  cursor: pointer;
  transition: border-color var(--rb-dur) var(--rb-ease),
              background-color var(--rb-dur) var(--rb-ease);
}
.qr-card:hover {
  background: var(--rb-surface-2);
  border-color: var(--rb-border-strong);
}
.qr-card:focus-visible {
  outline: 0;
  border-color: var(--rb-primary);
  box-shadow: 0 0 0 3px var(--rb-focus-ring);
}
.qr-title {
  margin-bottom: var(--rb-space-1);
  overflow: hidden;
  font-size: var(--rb-fs-sm);
  font-weight: var(--rb-fw-semibold);
  color: var(--rb-text);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.qr-canvas-wrap {
  display: grid;
  place-items: center;
  min-height: 132px;
}
/* QR images keep their own light background so they stay scannable */
.qr-canvas-wrap img {
  max-width: 100%;
  height: auto;
  border: 1px solid var(--rb-border);
  border-radius: var(--rb-radius-sm);
}
.qr-command {
  margin-top: var(--rb-space-1);
  font-family: var(--rb-font-mono);
  font-size: var(--rb-fs-xs);
  font-variant-ligatures: none;
  color: var(--rb-text-muted);
  overflow-wrap: anywhere;
  user-select: all;
}

/* Analysis photo (#analiseImageModal) */
#analiseImageFull {
  background: var(--rb-surface-2);
  border: 1px solid var(--rb-border);
  border-radius: var(--rb-radius-lg) !important; /* beats the inline radius */
}

/* Harvest-list mode picker (#colheitaModoModal): option cards are .btn links;
   layout only here, colours come from .btn-outline-primary in main.css */
.modo-option {
  flex-direction: column;
  white-space: normal;
  text-align: center;
}

/* -------------------------------------------------------------------------
   3b. Busca global (static/js/busca-global.js) — Ctrl+K
   ------------------------------------------------------------------------- */
.busca-global-btn { display: inline-flex; align-items: center; gap: var(--rb-space-2); border: 0; background: transparent; }
.busca-global-btn kbd,
.busca-global-campo kbd,
.busca-global-rodape kbd {
  display: inline-flex;
  align-items: center;
  padding: 0 6px;
  min-height: 20px;
  font-family: var(--rb-font-sans);
  font-size: var(--rb-fs-xs);
  font-weight: var(--rb-fw-medium);
  color: var(--rb-text-muted);
  background: var(--rb-surface-2);
  border: 1px solid var(--rb-border);
  border-radius: var(--rb-radius-sm);
  box-shadow: none;
  white-space: nowrap;
}

.busca-global-dialog {
  max-width: 640px;
  margin-top: 10vh;
}
.busca-global-dialog .modal-content { overflow: hidden; }

.busca-global-campo {
  display: flex;
  align-items: center;
  gap: var(--rb-space-3);
  padding: var(--rb-space-3) var(--rb-space-4);
  border-bottom: 1px solid var(--rb-border);
}
.busca-global-campo > .bi { font-size: var(--rb-fs-lg); color: var(--rb-text-muted); }

.busca-global-input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 40px;
  padding: 0;
  font-size: var(--rb-fs-lg);
  color: var(--rb-text);
  background: transparent;
  border: 0;
  outline: 0;
}
.busca-global-input::placeholder { color: var(--rb-text-subtle); }
.busca-global-input::-webkit-search-cancel-button { display: none; }

.busca-global-resultados {
  max-height: min(60vh, 480px);
  overflow-y: auto;
  padding: var(--rb-space-2);
}

.busca-global-grupo {
  padding: var(--rb-space-3) var(--rb-space-2) var(--rb-space-1);
  font-size: var(--rb-fs-xs);
  font-weight: var(--rb-fw-semibold);
  color: var(--rb-text-muted);
}
.busca-global-grupo:first-child { padding-top: var(--rb-space-1); }

.busca-global-lista { margin: 0; padding: 0; list-style: none; }

.busca-global-item {
  display: flex;
  align-items: center;
  gap: var(--rb-space-3);
  min-height: 36px;
  padding: 6px var(--rb-space-3);
  border-radius: var(--rb-radius);
  color: var(--rb-text);
  cursor: pointer;
}
.busca-global-item > .bi { width: 16px; flex: none; text-align: center; color: var(--rb-text-muted); }
.busca-global-item strong { font-weight: var(--rb-fw-bold); }
.busca-global-item.is-selected { background: var(--rb-primary-subtle); color: var(--rb-primary-subtle-text); }
.busca-global-item.is-selected > .bi { color: var(--rb-primary-subtle-text); }

.busca-global-vazio {
  margin: 0;
  padding: var(--rb-space-6) var(--rb-space-4);
  text-align: center;
  color: var(--rb-text-muted);
  overflow-wrap: anywhere;
}

.busca-global-rodape {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rb-space-4);
  padding: var(--rb-space-2) var(--rb-space-4);
  font-size: var(--rb-fs-xs);
  color: var(--rb-text-muted);
  background: var(--rb-surface-2);
  border-top: 1px solid var(--rb-border);
}
.busca-global-rodape span { display: inline-flex; align-items: center; gap: 4px; }

@media (max-width: 575.98px) {
  .busca-global-dialog { margin: var(--rb-space-3); }
  .busca-global-rodape { display: none; }
}

/* -------------------------------------------------------------------------
   4. Responsive (§5.11) — side-by-side content stacks via the grid below
   768px/992px; here we only tighten spacing on phones.
   ------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
  .modal {
    --bs-modal-padding: var(--rb-space-4);
    --bs-modal-header-padding: var(--rb-space-3) var(--rb-space-4);
  }
  .modal-footer {
    flex-wrap: wrap;
    padding: var(--rb-space-3) var(--rb-space-4);
  }
  .modal-footer > * { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .modal.fade .modal-dialog,
  .qr-card { transition: none; }
}