/* Kemet POS — shared card-style section grouping for create/edit forms (contacts, users, products, purchases, sells, stock transfers, expenses). */

.form-section{
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 16px;
}
.form-section-title{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: #334155;
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px dashed #e5e7eb;
}
.form-section-title svg{ width: 16px; height: 16px; color: #004eeb; flex: 0 0 auto; }
.form-section-title-sub{
  font-weight: 400;
  font-size: 12px;
  color: #94a3b8;
}
.form-section > .row:last-child{ margin-bottom: -10px; }

/* modal bodies have their own padding — sections inside a modal need a touch less margin */
.modal-body .form-section:last-child{ margin-bottom: 4px; }

html[data-app-theme="dark"] .form-section{ background: #15161e; border-color: #262a38; }
html[data-app-theme="dark"] .form-section-title{ color: #cbd0e0; border-color: #262a38; }
html[data-app-theme="dark"] .form-section-title svg{ color: #5c8dff; }
html[data-app-theme="dark"] .form-section-title-sub{ color: #6d7285; }

/* scrollable checkbox/option list — long location/permission lists inside a form-section */
.form-section-scroll-list{
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 4px 10px;
  background: #f8fafc;
}
html[data-app-theme="dark"] .form-section-scroll-list{ background: #0f1017; border-color: #262a38; }