/* fsq-form.css - CRUD form header, section cards, action bar and demo notice (CMP-360 / 361). Adapted from the mERP UI library; provenance in the FSQ Brain (brain/ui/fsq_ui_registry.md). */

.fsq-form-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 1rem; }
.fsq-form-head h1 { margin-bottom: 4px; }
.fsq-form-head .fsq-form-sub { color: var(--fsq-text-muted); }
.fsq-form-actions { display: flex; flex-wrap: wrap; gap: 8px; }
/* Bootstrap outline-info text (#0dcaf0) is about 2:1 on white; same hue, readable. */
.fsq-form-actions .btn-outline-info { color: #087990; border-color: #087990; }
.fsq-form-actions .btn-outline-info:hover { color: #000; background: #0dcaf0; border-color: #0dcaf0; }
[data-merp-theme="dark"] .fsq-form-actions .btn-outline-info { color: #6edff6; border-color: #6edff6; }
[data-merp-theme="dark"] .fsq-form-actions .btn-outline-info:hover { color: #000; background: #6edff6; }

[data-merp-theme="dark"] .fsq-action-bar .btn-outline-danger { color: #f5a8a2; border-color: #f5a8a2; }
.fsq-req { color: #b42318; margin-left: 2px; }
[data-merp-theme="dark"] .fsq-req { color: #f5a8a2; }

/* Demo notice: an honest statement, never a fake "saved" toast. */
.fsq-demo-note {
  display: flex; align-items: flex-start; gap: 10px; margin-bottom: 1rem; padding: 10px 14px;
  background: var(--fsq-demo-bg); border: 1px solid var(--fsq-demo-border); border-radius: 8px;
  color: var(--fsq-demo-fg); font-size: .88rem; line-height: 1.45;
}
.fsq-demo-note i { margin-top: 2px; }
.fsq-demo-note[hidden] { display: none; }

/* Bottom action bar (CMP-361) */
.fsq-action-bar {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px;
  padding-top: 1rem; border-top: 1px solid var(--fsq-border);
}
.fsq-action-bar .fsq-action-group { display: flex; flex-wrap: wrap; gap: 8px; }

.fsq-form-switches { padding-top: 1.5rem; }
.fsq-help-item { margin-bottom: 1rem; }
.fsq-help-item .fsq-help-title { font-weight: 600; margin-bottom: 4px; }
.fsq-help-item .fsq-help-text { color: var(--fsq-text-muted); font-size: .875rem; }

@media (max-width: 575px) {
  .fsq-form-actions .btn, .fsq-action-bar .btn { min-height: 44px; }
  .fsq-action-bar .fsq-action-group { width: 100%; }
  .fsq-action-bar .fsq-action-group .btn { flex: 1 1 auto; }
}

/* The shell forces .form-text to #6b7280 with !important in dark (about 3.3:1); field help keeps a readable token colour. */
[data-merp-theme="dark"] .form-text.fsq-muted { color: var(--fsq-text-muted) !important; }