.document-create-section {
  margin-top: 12px;
  padding: 16px;
  background: var(--detail-bg-soft, #fbfdff);
  border: 1px solid var(--detail-border, #e2e9f0);
  border-radius: 16px;
}

.document-create-section-head {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--detail-text, #25384a);
}

.document-create-section-head strong {
  font-size: 13px;
}

.document-create-section-head span {
  color: var(--detail-muted, #738397);
  font-size: 11px;
  font-weight: 900;
}

.document-create-info-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.document-selected-template {
  width: 100%;
  min-height: 76px;
  padding: 14px 16px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 4px 12px;
  align-items: center;
  text-align: left;
  color: var(--detail-text, #25384a);
  background: var(--detail-bg, #fff);
  border: 1px solid var(--detail-border, #dbe6f2);
  border-radius: 14px;
  cursor: pointer;
}

.document-selected-template:hover {
  border-color: var(--detail-accent, #9dbdf6);
  background: var(--detail-info-bg, #f4f8ff);
}

.document-selected-template svg {
  grid-row: span 2;
  color: var(--detail-accent, #3977ed);
}

.document-selected-template strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}

.document-selected-template span {
  color: var(--detail-muted, #6f7f91);
  font-size: 11px;
  line-height: 1.4;
}

.document-template-picker-modal {
  width: min(980px, calc(100vw - 36px));
  max-height: min(82vh, 760px);
  overflow: hidden;
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
}

.document-template-picker-modal[data-regab-show-all-pending] .document-template-picker-grid {
  visibility: hidden;
}

.document-template-filters.regab-document-create-patched,
.document-template-filters.document-template-filters--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.document-template-filters label[hidden],
.document-form-grid label[hidden] {
  display: none !important;
}

.document-info-layer,
.regab-document-info-layer {
  position: fixed;
  inset: 0;
  z-index: 99999;
  padding: 24px;
  display: grid;
  place-items: center;
  background: rgba(3, 13, 22, 0.58);
  backdrop-filter: blur(4px);
}

.document-info-dialog {
  position: relative;
  width: min(860px, 100%);
  max-height: min(86vh, 780px);
  overflow: auto;
  padding: 24px;
  color: var(--detail-text, #edf6ff);
  background: var(--detail-bg, #10283d);
  border: 1px solid var(--detail-border-strong, #346a9e);
  border-radius: 16px;
  box-shadow: 0 28px 90px rgba(2, 8, 16, 0.38);
}

.document-info-dialog h3 {
  margin: 4px 0 6px;
  color: var(--detail-text, #edf6ff);
  font-size: 22px;
}

.document-info-dialog > p {
  margin: 0 52px 16px 0;
  color: var(--detail-muted, #a7b8cc);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
}

.document-info-dialog .modal-close {
  position: absolute;
  right: 16px;
  top: 16px;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid var(--detail-border, #244b70);
  background: var(--detail-bg-soft, #0a1c2b);
  color: var(--detail-text, #edf6ff);
  font-size: 22px;
  cursor: pointer;
}

.document-info-dialog .form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
  flex-wrap: wrap;
}

.document-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.document-info-grid > div {
  min-width: 0;
  padding: 11px 12px;
  display: grid;
  gap: 4px;
  background: var(--detail-bg-soft, #071a29);
  border: 1px solid var(--detail-border, #244b70);
  border-radius: 10px;
}

.document-info-grid span {
  color: var(--detail-muted, #a7b8cc);
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.document-info-grid strong {
  color: var(--detail-text, #edf6ff);
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.regab-document-info-layer {
  z-index: 99999 !important;
}

.regab-document-settings-link {
  margin-top: 8px;
}

@media (max-width: 900px) {
  .document-template-filters--two,
  .document-form-grid,
  .document-info-grid {
    grid-template-columns: 1fr;
  }

  .document-info-layer,
  .regab-document-info-layer {
    padding: 10px;
  }

  .document-info-dialog {
    padding: 18px;
  }
}

.document-template-picker-grid {
  min-height: 0;
  overflow: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}

.document-template-picker-grid button {
  position: relative;
  min-height: 126px;
  padding: 16px;
  display: grid;
  align-content: start;
  gap: 8px;
  text-align: left;
  color: var(--detail-text, #405469);
  background: var(--detail-bg, #fff);
  border: 1px solid var(--detail-border, #dfe8f2);
  border-radius: 16px;
  cursor: pointer;
}

.document-template-picker-grid button:hover {
  border-color: var(--detail-accent, #3977ed);
  background: var(--detail-info-bg, #eef5ff);
  box-shadow: inset 4px 0 var(--detail-accent, #3977ed);
}

.document-template-picker-grid button.is-active,
.document-template-picker-grid button.is-suggested {
  border-color: #16a34a !important;
  background: #f0fdf4 !important;
  box-shadow: inset 4px 0 #16a34a !important;
}

.document-template-suggested-badge {
  width: fit-content;
  padding: 4px 8px;
  color: #166534;
  background: #dcfce7;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
  font-style: normal;
}

.document-template-picker-grid strong {
  color: var(--detail-text, #25384a);
  font-size: 15px;
}

.document-template-picker-grid span {
  color: var(--detail-muted, #5f7083);
  font-size: 12px;
  line-height: 1.4;
}

.document-template-picker-grid small {
  width: fit-content;
  padding: 6px 9px;
  color: #3269c7;
  background: #edf4ff;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 950;
}

.document-template-fallback-notice {
  margin: 0;
  padding: 10px 12px;
  color: #8a4b00;
  background: #fff7ed;
  border: 1px solid #f0c27a;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}

.document-info-sections {
  display: grid;
  gap: 12px;
  margin-bottom: 16px;
}

.document-info-section {
  padding: 16px;
  background: var(--detail-bg-soft);
  border: 1px solid var(--detail-border);
  border-radius: 14px;
}

.document-info-section h4 {
  margin: 0 0 12px;
  color: var(--detail-accent);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.document-create-modal {
  position: relative;
  width: min(1720px, calc(100vw - 24px)) !important;
  max-width: none !important;
  max-height: calc(100vh - 24px) !important;
  overflow: auto;
}

/* Nested template picker is trapped by the outer modal (backdrop-filter).
   Expand the create modal and let the picker fill it edge-to-edge. */
.modal-backdrop:has(.document-template-picker-modal) {
  padding: 10px !important;
  align-items: stretch !important;
}

.modal-backdrop:has(.document-template-picker-modal) .document-create-modal {
  width: min(1760px, calc(100vw - 20px)) !important;
  max-width: none !important;
  height: calc(100vh - 20px) !important;
  max-height: calc(100vh - 20px) !important;
  overflow: hidden !important;
}

.document-create-modal .settings-mini-modal-backdrop {
  position: absolute !important;
  inset: 0 !important;
  z-index: 40;
  display: grid !important;
  place-items: stretch !important;
  padding: 0 !important;
  border-radius: inherit;
  background: rgba(3, 13, 22, 0.72) !important;
}

.document-create-modal .document-template-picker-modal,
.document-create-modal .document-template-picker-modal.regab-template-picker-ready {
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  max-height: none !important;
  border-radius: inherit;
}

@media (max-width: 900px) {
  .document-template-filters--two,
  .document-form-grid {
    grid-template-columns: 1fr;
  }
}