/*
 * Lacius Modern Modal Standard
 * Reference implementation: Auditorias.
 * Keep these tokens and structural classes shared across SGQ modules.
 */
:root {
  --modern-modal-bg: linear-gradient(145deg, #07101f 0%, #020617 58%, #06131a 100%);
  --modern-modal-border: rgba(51, 65, 85, .9);
  --modern-modal-surface: linear-gradient(145deg, rgba(15, 23, 42, .72), rgba(15, 23, 42, .38));
  --modern-modal-field: rgba(2, 6, 23, .72);
  --modern-modal-focus: #34d399;
  --modern-modal-muted: #94a3b8;
  --modern-modal-radius: 24px;
}

.modern-modal,
.audit-create-modal,
.audit-checklist-modal {
  border: 1px solid var(--modern-modal-border) !important;
  border-radius: var(--modern-modal-radius) !important;
  background: var(--modern-modal-bg) !important;
  color: #f8fafc !important;
  box-shadow: 0 36px 110px rgba(2, 6, 23, .82), 0 0 0 1px rgba(255, 255, 255, .03) inset !important;
  overflow: hidden;
}

.modern-modal::backdrop,
.audit-create-modal::backdrop,
.audit-checklist-modal::backdrop {
  background: rgba(2, 6, 23, .82);
  backdrop-filter: blur(10px);
}

.modern-modal-hero,
.audit-modal-hero {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px;
  margin: 0 !important;
  padding: 22px 24px !important;
  border-bottom: 1px solid rgba(51, 65, 85, .72) !important;
  background: radial-gradient(circle at 12% 0%, rgba(16, 185, 129, .16), transparent 36%), rgba(2, 6, 23, .68);
}

.modern-modal-heading,
.audit-modal-heading { display: flex; min-width: 0; align-items: center; gap: 14px; }

.modern-modal-icon,
.audit-modal-icon {
  display: grid;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  place-items: center;
  border: 1px solid rgba(52, 211, 153, .28);
  border-radius: 15px;
  background: linear-gradient(145deg, rgba(16, 185, 129, .22), rgba(6, 182, 212, .10));
  color: #6ee7b7;
  box-shadow: 0 12px 30px rgba(16, 185, 129, .10);
}

.modern-modal-icon svg,
.audit-modal-icon svg { width: 23px; height: 23px; }
.modern-modal-hero h2,
.audit-modal-hero h2 { margin: 2px 0 0 !important; color: #fff; font-size: 1.35rem; line-height: 1.2; }
.modern-modal-hero p,
.audit-modal-hero p { margin: 4px 0 0 !important; color: var(--modern-modal-muted); font-size: .82rem; }

.modern-modal-close,
.audit-modal-close {
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  place-items: center;
  border: 1px solid #334155 !important;
  border-radius: 12px !important;
  background: #0f172a !important;
  color: #94a3b8 !important;
  padding: 0 !important;
  font-size: 20px !important;
}

.modern-modal-close:hover,
.audit-modal-close:hover { border-color: #475569 !important; color: #fff !important; transform: rotate(3deg); }

.modern-modal-form,
.audit-modal-form { max-height: min(78vh, 760px); overflow-y: auto; padding: 22px 24px 0 !important; scrollbar-color: #334155 transparent; }
.modern-modal-steps,
.audit-modal-intro { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; overflow-x: auto; }

.modern-modal-step,
.audit-modal-step {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  border: 1px solid #1e293b;
  border-radius: 999px;
  background: rgba(15, 23, 42, .72);
  color: #94a3b8;
  padding: 7px 11px;
  font-size: 11px;
  font-weight: 850;
}

.modern-modal-step b,
.audit-modal-step b { display: grid; width: 20px; height: 20px; place-items: center; border-radius: 999px; background: rgba(16, 185, 129, .16); color: #6ee7b7; font-size: 10px; }

.modern-modal-card,
.audit-modal-card { border: 1px solid rgba(51, 65, 85, .72); border-radius: 18px; background: var(--modern-modal-surface); padding: 18px; box-shadow: 0 16px 34px rgba(2, 6, 23, .16); }

.modern-modal label,
.audit-create-modal label { gap: 7px !important; color: #cbd5e1 !important; font-size: 12px !important; font-weight: 800 !important; }
.modern-modal input:not([type=checkbox]), .modern-modal select, .modern-modal textarea,
.audit-create-modal input:not([type=checkbox]), .audit-create-modal select, .audit-create-modal textarea { width: 100%; min-height: 44px; border: 1px solid #273449 !important; border-radius: 12px !important; background: var(--modern-modal-field) !important; color: #f8fafc !important; padding: 10px 12px !important; outline: none; transition: border-color .16s, box-shadow .16s, background .16s; }
.modern-modal textarea,
.audit-create-modal textarea { min-height: 76px; resize: vertical; }
.modern-modal input:focus, .modern-modal select:focus, .modern-modal textarea:focus,
.audit-create-modal input:focus, .audit-create-modal select:focus, .audit-create-modal textarea:focus { border-color: var(--modern-modal-focus) !important; background: #07111f !important; box-shadow: 0 0 0 4px rgba(16, 185, 129, .10); }
.modern-modal input::placeholder, .modern-modal textarea::placeholder,
.audit-create-modal input::placeholder, .audit-create-modal textarea::placeholder { color: #526176; }

.modern-modal-optional,
.audit-modal-optional { overflow: hidden; border: 1px solid rgba(51, 65, 85, .70) !important; border-radius: 16px !important; background: rgba(15, 23, 42, .38) !important; }
.modern-modal-optional summary,
.audit-modal-optional summary { transition: background .16s; }
.modern-modal-optional summary:hover,
.audit-modal-optional summary:hover { background: rgba(30, 41, 59, .48); }

.modern-modal-actions,
.audit-modal-actions { position: sticky; bottom: 0; z-index: 3; margin: 22px -24px 0 !important; padding: 16px 24px !important; border-top: 1px solid rgba(51, 65, 85, .8) !important; background: rgba(2, 6, 23, .94); backdrop-filter: blur(14px); }
.modern-modal-actions > .primary-action,
.modern-modal-actions > .secondary-action,
.audit-modal-actions > .primary-action,
.audit-modal-actions > .secondary-action {
  display: inline-flex !important;
  grid-template-columns: none !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: auto !important;
  min-width: max-content;
  max-width: 100%;
  min-height: 44px !important;
  padding: 10px 16px !important;
  white-space: nowrap;
  line-height: 1.2;
  overflow: visible !important;
}
.modern-modal-notice,
.audit-independence { border-radius: 16px !important; background: linear-gradient(135deg, rgba(245, 158, 11, .10), rgba(15, 23, 42, .48)) !important; }

.modern-modal-scroll,
.audit-checklist-scroll { scrollbar-color: #334155 transparent; }
.audit-checklist-header { position: sticky; top: 0; z-index: 5; background: radial-gradient(circle at 8% 0%, rgba(6, 182, 212, .16), transparent 34%), rgba(2, 6, 23, .94) !important; backdrop-filter: blur(16px); }
.audit-checklist-title { display: flex; min-width: 0; align-items: center; gap: 14px; }
.audit-checklist-icon { display: grid; width: 48px; height: 48px; flex: 0 0 48px; place-items: center; border: 1px solid rgba(34, 211, 238, .26); border-radius: 15px; background: linear-gradient(145deg, rgba(6, 182, 212, .20), rgba(16, 185, 129, .10)); color: #67e8f9; }
.audit-checklist-icon svg { width: 23px; height: 23px; }
.modern-modal-metric,
.audit-checklist-metric { position: relative; overflow: hidden; border-color: rgba(51, 65, 85, .74) !important; background: linear-gradient(145deg, rgba(15, 23, 42, .84), rgba(15, 23, 42, .42)) !important; }
.modern-modal-metric::after,
.audit-checklist-metric::after { content: ""; position: absolute; width: 52px; height: 52px; right: -18px; bottom: -22px; border-radius: 999px; background: rgba(16, 185, 129, .08); }

.modern-modal-item,
.audit-check-item { overflow: hidden; transition: border-color .16s, background .16s, transform .16s; }
.modern-modal-item:hover,
.audit-check-item:hover { border-color: rgba(71, 85, 105, .9) !important; background: rgba(15, 23, 42, .68) !important; }
.modern-modal-item[open],
.audit-check-item[open] { border-color: rgba(16, 185, 129, .30) !important; background: linear-gradient(145deg, rgba(15, 23, 42, .86), rgba(6, 20, 28, .68)) !important; box-shadow: 0 16px 38px rgba(2, 6, 23, .22); }
.modern-modal-item summary, .audit-check-item summary { transition: background .16s; }
.modern-modal-item summary:hover, .audit-check-item summary:hover { background: rgba(30, 41, 59, .28); }
.modern-modal-item form, .audit-check-item form { background: rgba(2, 6, 23, .34); }
.modern-modal-item label, .audit-check-item label { gap: 7px !important; color: #cbd5e1; font-size: 12px; font-weight: 800; }
.modern-modal-item input:not([type=file]), .modern-modal-item select, .modern-modal-item textarea,
.audit-check-item input:not([type=file]), .audit-check-item select, .audit-check-item textarea { width: 100%; min-height: 43px; border: 1px solid #273449 !important; border-radius: 12px !important; background: rgba(2, 6, 23, .72) !important; color: #f8fafc !important; padding: 9px 12px !important; outline: none; }
.modern-modal-item textarea, .audit-check-item textarea { resize: vertical; }
.modern-modal-item input:focus, .modern-modal-item select:focus, .modern-modal-item textarea:focus,
.audit-check-item input:focus, .audit-check-item select:focus, .audit-check-item textarea:focus { border-color: #34d399 !important; box-shadow: 0 0 0 4px rgba(16, 185, 129, .10); }

.audit-checklist-open-action,
.audit-checklist-save-action,
.audit-checklist-item-actions .secondary-action,
[data-audit-panel] .primary-action,
[data-audit-panel] .secondary-action {
  display: inline-flex !important;
  grid-template-columns: none !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: fit-content !important;
  max-width: 100%;
  min-height: 44px !important;
  min-width: max-content;
  padding: 10px 16px !important;
  white-space: nowrap;
  line-height: 1.2;
  overflow: visible !important;
  text-overflow: clip !important;
}
.audit-checklist-item-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* Ações da página de detalhe: evita rótulos comprimidos em painéis responsivos. */
[data-audit-panel] .primary-action,
[data-audit-panel] .secondary-action {
  flex-shrink: 0;
}

.modern-modal-number,
.audit-check-number { display: grid; width: 44px; height: 36px; place-items: center; border: 1px solid rgba(52, 211, 153, .24); border-radius: 11px; background: rgba(16, 185, 129, .10); color: #6ee7b7; font-size: 12px; font-weight: 900; }

.modern-field-help { position: relative; display: inline-grid; width: 18px; height: 18px; flex: 0 0 18px; place-items: center; border: 1px solid rgba(34, 211, 238, .32); border-radius: 999px; background: rgba(6, 182, 212, .09); color: #67e8f9; font-size: 11px; font-weight: 900; line-height: 1; cursor: help; outline: none; }
.modern-field-help::after { content: attr(data-help); position: absolute; z-index: 10001; left: 50%; bottom: calc(100% + 10px); width: min(280px, 72vw); padding: 10px 12px; border: 1px solid #334155; border-radius: 10px; background: #0f172a; box-shadow: 0 14px 34px rgba(2, 6, 23, .6); color: #e2e8f0; font-size: 12px; font-weight: 650; line-height: 1.5; opacity: 0; pointer-events: none; transform: translate(-50%, 5px); transition: opacity .16s, transform .16s; }
.modern-field-help:hover,
.modern-field-help:focus { z-index: 10000; }
.modern-field-help:hover::after,
.modern-field-help:focus::after { opacity: 1; transform: translate(-50%, 0); }

.modern-empty-state { display: grid; min-height: 292px; place-items: center; align-content: center; border: 1px dashed rgba(71, 85, 105, .9); border-radius: 20px; background: radial-gradient(circle at 50% 0%, rgba(16, 185, 129, .12), transparent 40%), var(--modern-modal-surface); padding: 38px 24px; text-align: center; box-shadow: 0 16px 34px rgba(2, 6, 23, .16); }
.modern-empty-state-icon { display: grid; width: 56px; height: 56px; place-items: center; border: 1px solid rgba(52, 211, 153, .28); border-radius: 18px; background: linear-gradient(145deg, rgba(16, 185, 129, .22), rgba(6, 182, 212, .10)); color: #6ee7b7; box-shadow: 0 12px 30px rgba(16, 185, 129, .10); }
.modern-empty-state-icon svg { width: 26px; height: 26px; }
.modern-empty-state-eyebrow { margin: 16px 0 0; color: #6ee7b7; font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.modern-empty-state h3 { margin: 6px 0 0; color: #f8fafc; font-size: 1.05rem; font-weight: 900; }
.modern-empty-state-description { max-width: 460px; margin: 8px 0 20px; color: #94a3b8; font-size: .875rem; font-weight: 650; line-height: 1.55; }
.modern-empty-state .primary-action { display: inline-flex !important; grid-template-columns: none !important; align-items: center !important; justify-content: center !important; gap: 8px !important; width: auto !important; min-height: 44px !important; padding: 10px 16px !important; white-space: nowrap; }

@media (max-width: 640px) {
  .modern-modal-hero, .audit-modal-hero { padding: 18px !important; }
  .modern-modal-form, .audit-modal-form { padding: 18px 16px 0 !important; }
  .modern-modal-actions, .audit-modal-actions { margin: 20px -16px 0 !important; padding: 14px 16px !important; }
  .modern-modal-actions, .audit-modal-actions { flex-wrap: wrap; }
  .modern-modal-actions > .primary-action, .modern-modal-actions > .secondary-action,
  .audit-modal-actions > .primary-action, .audit-modal-actions > .secondary-action { flex: 1 1 auto; }
  .modern-modal-icon, .audit-modal-icon, .audit-checklist-icon { display: none; }
  .modern-modal, .audit-create-modal, .audit-checklist-modal { border-radius: 18px !important; }
  .modern-empty-state { min-height: 250px; padding: 30px 18px; }
  .audit-checklist-header { padding: 16px !important; }
  [data-audit-panel] .audit-checklist-open-action { width: 100% !important; }
  .audit-checklist-item-actions { width: 100%; }
  .audit-checklist-item-actions > * { flex: 1 1 auto; }
}