/*
 * Tab "Factuurherkenning" en de popup "Template" in de CMS.
 *
 * Deze stylesheet staat expres los en gebruikt id-selectors, omdat zoboekhouden.css een aantal
 * globale regels heeft die Bootstrap-onderdelen verstoren:
 *   - ".modal:not(#FacturenDebiteuren)"  -> position:absolute, width:fit-content, max-height:55%, grijze achtergrond
 *   - "select, input, textarea"          -> display:block, width:90%, margin-left:5%, margin-bottom:10px
 *   - "button[type=button]:hover/:active" -> blauwe hover, roze active + inzoomen
 *   - ".form-check"                      -> extra marge onder
 * De popup hangt direct onder <body> (niet onder #cms), dus de "#cms .form-control"-opmaak uit cms.css
 * geldt daar niet; die wordt hier nagemaakt.
 */

/* ---------- De popup zelf ---------- */
#ltModal.modal {
  position: fixed !important;
  width: 100% !important;
  max-height: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
#ltModal .modal-dialog { margin: 1.75rem auto; }
#ltModal .modal-content {
  background: #fff;
  border: 0;
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(1, 41, 112, 0.25);
}
#ltModal .modal-header { padding: 14px 20px; border-bottom: 1px solid #e6ebf2; }
#ltModal .modal-title { margin: 0; font-size: 1.15rem; font-weight: 700; color: #012970; }
#ltModal .modal-body { padding: 18px 20px; font-size: 14px; color: #2c384e; }
#ltModal .modal-footer { padding: 12px 20px; border-top: 1px solid #e6ebf2; gap: 8px; }
#ltModal .modal-footer > * { margin: 0; }

/* Kopjes en toelichting in de popup */
#ltModal h6 { margin: 22px 0 4px; font-size: 1rem; font-weight: 700; color: #012970; }
#ltModal h6:first-of-type { margin-top: 0; }
#ltModal p { margin: 0 0 8px; }
#ltModal .form-label { display: block; margin: 0 0 4px; font-size: 13px; font-weight: 600; color: #2c384e; }

/* ---------- Invoervelden ---------- */
#ltModal input.form-control,
#ltModal select.form-select,
#ltModal textarea.form-control,
#ltModal input[type="file"].form-control {
  display: block;
  width: 100%;
  margin: 0;
  border: 1px solid #dce3f0;
  border-radius: 5px;
  color: #2c384e;
  box-shadow: none;
}
#ltModal input[type="file"].form-control { width: auto; max-width: 100%; }
#ltModal input.form-control:focus,
#ltModal select.form-select:focus {
  border-color: #9aa8ff;
  box-shadow: 0 0 0 0.2rem rgba(65, 84, 241, 0.12);
}

/* Aan/uit-schakelaar (Bootstrap form-switch), los van de globale input-/form-check-regels */
#ltModal .form-switch,
#DivLeverancierTemplatesCms .form-switch {
  display: block;
  min-height: 1.5rem;
  margin: 0;
  padding-left: 2.5em;
}
#ltModal .form-switch .form-check-input,
#DivLeverancierTemplatesCms .form-switch .form-check-input {
  display: inline-block;
  float: left;
  width: 2em;
  height: 1em;
  margin: 0.25em 0 0 -2.5em;
  cursor: pointer;
}
#ltModal .form-switch .form-check-label { cursor: pointer; }

/* ---------- Veldregels ---------- */
#ltModal #ltVelden { margin-bottom: 8px; }
#ltModal #ltVelden th {
  padding: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #627186;
  white-space: nowrap;
  border-bottom: 1px solid #dce3f0;
}
#ltModal #ltVelden td { padding: 4px 6px; vertical-align: middle; border-bottom: 0; }
#ltModal #ltVelden td:last-child { width: 1%; white-space: nowrap; }
#ltModal #ltVelden input.form-control,
#ltModal #ltVelden select.form-select { font-size: 13px; }

/* ---------- Testresultaat en correcties ---------- */
#ltModal #ltTestTabel,
#ltModal #ltCorrectiesTabel { margin-bottom: 0; font-size: 13px; }
#ltModal #ltTestTabel th,
#ltModal #ltCorrectiesTabel th { padding: 6px 8px; font-size: 12px; font-weight: 600; color: #627186; }
#ltModal #ltTestTabel td,
#ltModal #ltCorrectiesTabel td { padding: 6px 8px; }
#ltModal #ltTestMatch { font-weight: 600; }

/* ---------- Knoppen ----------
 * Globaal krijgt elke button[type=button] een blauwe hover en een roze, ingezoomde active. Hier worden
 * de Bootstrap-standaarden per variant teruggezet (id-selector wint ook van de !important in :active). */
#ltModal .btn,
#DivLeverancierTemplatesCms .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: auto;
  max-width: none;
  margin: 0;
  border-radius: 5px;
  font-weight: 600;
  text-transform: none;
  box-shadow: none;
}
#ltModal .btn:active,
#DivLeverancierTemplatesCms .btn:active { transform: none !important; }

#ltModal .btn-primary,
#DivLeverancierTemplatesCms .btn-primary { background-color: #0d6efd; border-color: #0d6efd; color: #fff; }
#ltModal .btn-primary:hover,
#DivLeverancierTemplatesCms .btn-primary:hover { background-color: #0b5ed7; border-color: #0a58ca; color: #fff; }
#ltModal .btn-primary:active,
#DivLeverancierTemplatesCms .btn-primary:active { background-color: #0a58ca !important; }

#ltModal .btn-secondary { background-color: #6c757d; border-color: #6c757d; color: #fff; }
#ltModal .btn-secondary:hover { background-color: #5c636a; border-color: #565e64; color: #fff; }
#ltModal .btn-secondary:active { background-color: #565e64 !important; }

#ltModal .btn-outline-primary,
#DivLeverancierTemplatesCms .btn-outline-primary { background-color: transparent; border-color: #0d6efd; color: #0d6efd; }
#ltModal .btn-outline-primary:hover,
#DivLeverancierTemplatesCms .btn-outline-primary:hover { background-color: #0d6efd; color: #fff; }
#ltModal .btn-outline-primary:active,
#DivLeverancierTemplatesCms .btn-outline-primary:active { background-color: #0b5ed7 !important; color: #fff; }

#ltModal .btn-outline-secondary { background-color: transparent; border-color: #6c757d; color: #6c757d; }
#ltModal .btn-outline-secondary:hover { background-color: #6c757d; color: #fff; }
#ltModal .btn-outline-secondary:active { background-color: #5c636a !important; color: #fff; }

#ltModal .btn-outline-danger { background-color: transparent; border-color: #dc3545; color: #dc3545; }
#ltModal .btn-outline-danger:hover { background-color: #dc3545; color: #fff; }
#ltModal .btn-outline-danger:active { background-color: #bb2d3b !important; color: #fff; }
#DivLeverancierTemplatesCms .btn-outline-danger { background-color: transparent; border-color: #dc3545; color: #dc3545; }
#DivLeverancierTemplatesCms .btn-outline-danger:hover { background-color: #dc3545; color: #fff; }
#DivLeverancierTemplatesCms .btn-outline-danger:active { background-color: #bb2d3b !important; color: #fff; }
/* Voet van de popup: "Verwijderen" links; een eventuele foutmelding staat vlak voor Sluiten/Opslaan */
#ltModal #ltVerwijderInPopup { margin-right: auto; }
#ltModal #ltOpslaanFout { margin: 0 12px 0 0 !important; }

#ltModal .btn:disabled { opacity: 0.65; }

/* Sluitkruis: geen blauwe/roze achtergrond bij hover of klik */
#ltModal .btn-close:hover,
#ltModal .btn-close:active,
#ltModal .btn-close:focus { background-color: transparent !important; transform: none !important; }

/* ---------- Overzicht in de tab ---------- */
/* Zoekbalk boven de tabel */
#DivLeverancierTemplatesCms .lt-zoekbalk {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}
#DivLeverancierTemplatesCms .lt-zoekbalk .cms-search-field { flex: 1 1 auto; max-width: 560px; }
#DivLeverancierTemplatesCms .lt-aantal { color: #798eb3; font-size: 0.88rem; white-space: nowrap; }

/* Scrollbare tabel met vaste kolomkop: de lijst scrolt, de pagina niet mee */
#DivLeverancierTemplatesCms .lt-scroll {
  max-height: calc(100vh - 330px);
  min-height: 220px;
  overflow: auto;
  border: 1px solid #ebeef4;
  border-radius: 6px;
}
#DivLeverancierTemplatesCms .lt-scroll #ltTabel { margin-bottom: 0; }
#DivLeverancierTemplatesCms .lt-scroll #ltTabel thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #f6f9ff;
  box-shadow: inset 0 -1px 0 #dce3f0;
  white-space: nowrap;
}

#DivLeverancierTemplatesCms .cms-card-header .btn { white-space: nowrap; }
/* cms.css kleurt elke span in een kaartkop grijsblauw en maakt hem display:block (voor de ondertitel).
   De tekst in de knoppen staat ook in een span: die moet de kleur van de knop zelf houden. */
#DivLeverancierTemplatesCms .cms-card-header .btn span {
  display: inline;
  margin: 0;
  color: inherit;
  font-size: inherit;
}
#DivLeverancierTemplatesCms #ltTabel td,
#DivLeverancierTemplatesCms #ltTabel th { vertical-align: middle; }
#DivLeverancierTemplatesCms #ltTabel .lt-bewerk { white-space: nowrap; }

/* Smalle schermen: popup bijna schermbreed, veldregels horizontaal scrollbaar (table-responsive) */
@media (max-width: 767.98px) {
  #ltModal .modal-dialog { margin: 0.5rem; }
  #ltModal .modal-body { padding: 14px; }
}