/* Global, consistent form styling across modules (inspired by Quality/QMS) */
/* Scope defaults to the whole site; tuned to work with base_standard and modern.css */

:root {
  /* Fallbacks if module variables are missing */
  --form-text: var(--module-text, var(--color-text, #1f2937));
  --form-text-muted: var(--module-text-light, var(--color-text-muted, #6b7280));
  --form-primary: var(--module-primary, var(--color-primary, #6bb442));
  --form-primary-rgb: var(--module-primary-rgb, 107, 180, 66);
  --form-border: var(--color-border-strong, #d1d5db);
  --form-bg: #ffffff;
  --form-radius: 8px;
  --form-shadow: 0 1px 3px rgba(0,0,0,0.08);
  --form-shadow-focus: 0 0 0 3px rgba(var(--form-primary-rgb), 0.2), 0 1px 3px rgba(0,0,0,0.1);
}

/* Surfaces used as form sections (“bubbles”) */
.surface,
.form-surface,
.form-bubble {
  background: var(--form-bg);
  border: 1px solid var(--color-border, var(--form-border));
  border-radius: var(--form-radius);
  box-shadow: var(--form-shadow);
}

.surface h2,
.form-surface h2,
.form-bubble h2 {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--form-text);
}

/* Labels */
form label,
.form-label {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--form-text);
  margin-bottom: 0.35rem;
}

/* Inputs, selects, textareas (generic so it works without widget classes) */
form input[type="text"],
form input[type="number"],
form input[type="email"],
form input[type="password"],
form input[type="url"],
form input[type="search"],
form input[type="tel"],
form input[type="date"],
form input[type="time"],
form input[type="datetime-local"],
form select,
form textarea,
/* common class-based fallbacks */
.form-control,
.form-select,
textarea.form-control {
  width: 100%;
  background: var(--form-bg) !important;
  color: var(--form-text) !important;
  border: 2px solid var(--form-border) !important;
  border-radius: var(--form-radius) !important;
  padding: 0.75rem 0.9rem !important;
  font-size: 0.9rem !important;
  min-height: 44px !important;
  box-sizing: border-box !important;
  box-shadow: var(--form-shadow) !important;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease !important;
}

/* Multi-selects: give them some height */
form select[multiple] {
  min-height: 140px !important;
}

/* Placeholder color */
form input::placeholder,
form textarea::placeholder {
  color: #9ca3af !important;
  opacity: 1 !important;
}

/* Hover/focus states */
form input:hover,
form select:hover,
form textarea:hover,
.form-control:hover,
.form-select:hover {
  border-color: #a3a9b3 !important;
}

form input:focus,
form select:focus,
form textarea:focus,
.form-control:focus,
.form-select:focus {
  outline: none !important;
  border-color: var(--form-primary) !important;
  box-shadow: var(--form-shadow-focus) !important;
}

/* Small muted helper text */
small.text-muted,
.form-text,
.helptext {
  display: block !important;
  margin-top: 0.25rem !important;
  color: var(--form-text-muted) !important;
  font-size: 0.75rem !important;
  line-height: 1.35 !important;
}

/* Error list from Django forms */
ul.errorlist {
  margin: 0.25rem 0 0.5rem 0;
  padding-left: 1rem;
  color: #b91c1c;
  font-size: 0.8rem;
}
ul.errorlist li { list-style: disc; }

/* Inline creation panels/toggles */
.inline-panel,
#new_comp_block,
#new_proc_block {
  background: var(--form-bg);
  border: 1px dashed rgba(var(--form-primary-rgb), 0.35);
  border-radius: var(--form-radius);
}

/* Action row */
.form-actions,
form .actions,
form .text-end {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: flex-end;
}

/* Family filter/select sizing */
#competence_family_filter {
  min-width: 220px;
}

/* Bubbles grid helper (optional) */
.bubbles-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .bubbles-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .bubbles-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Buttons: rely on base_standard buttons, but keep tiny normalization for inline btns */
.btn,
button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
  line-height: 1.1;
}

/* Centered form page helper */
.form-page {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}

/* Chips used for selected items */
.form-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.form-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  color: var(--form-text);
  border-radius: 999px;
  padding: .25rem .6rem;
  font-size: .8rem;
}
.form-chip button.remove {
  background: none;
  border: none;
  color: var(--form-text-muted);
  padding: 0 .15rem;
  line-height: 1;
  cursor: pointer;
}
.form-chip button.remove:hover {
  color: var(--form-primary);
}

/* Align with Quality 'create' card layout */
.form-section-card {
  border: 1px solid var(--color-border, var(--form-border));
  border-radius: var(--form-radius);
  background-color: var(--form-bg);
  box-shadow: var(--form-shadow);
  margin-bottom: 1rem;
}
.form-section-card .card-body {
  padding: 1rem;
}
.form-section-card .card-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--form-text-muted, #6b7280);
  margin-bottom: 0.5rem;
  padding-bottom: 0.25rem;
  border-bottom: 2px solid var(--color-border, #e5e7eb);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--color-border, #e5e7eb);
}
.section-header-content { flex: 1; }
.section-header-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--form-text-muted, #6b7280);
  margin: 0;
}
.section-header-description {
  font-size: 0.875rem;
  color: var(--form-text-muted, #6b7280);
  margin: 0;
}

/* Dynamic container helpers (visual parity) */
.dynamic-item-container {
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 6px;
  background-color: #f9fafb;
  padding: 0.75rem;
  margin-bottom: 0.5rem;
}
.dynamic-item-container.fixed {
  background-color: #f0fdf4; /* success light */
  border-color: #86efac;
}
.dynamic-item-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.dynamic-item-actions {
  flex: 0 0 auto;
  display: flex;
  gap: 0.5rem;
  margin-left: auto;
}
.control-select-sm { flex: 0 0 160px; min-width: 160px; }
.control-input-md { flex: 0 0 180px; min-width: 180px; }
.control-select-lg { flex: 1 1 200px; min-width: 200px; }

.action-btn {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  border-radius: 0.25rem;
  border-width: 1px;
  transition: all .15s ease-in-out;
}
.action-btn-primary {
  background-color: var(--form-primary);
  border-color: var(--form-primary);
  color: #ffffff;
}
.action-btn-primary:hover {
  filter: brightness(0.95);
}
.action-btn-secondary {
  background-color: transparent;
  border-color: var(--form-text-muted, #6b7280);
  color: var(--form-text-muted, #6b7280);
}
.action-btn-secondary:hover {
  background-color: var(--form-text-muted, #6b7280);
  color: #ffffff;
}
.action-btn-danger {
  background-color: transparent;
  border-color: #ef4444;
  color: #ef4444;
}
.action-btn-danger:hover {
  background-color: #ef4444;
  color: #ffffff;
}
.action-btn-toggle {
  background-color: transparent;
  border-color: #64748b;
  color: #64748b;
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  min-width: 32px;
}
.action-btn-toggle:hover {
  background-color: #64748b;
  color: #ffffff;
}

@media (max-width: 768px) {
  .dynamic-item-controls { flex-direction: column; align-items: stretch; }
  .control-select-sm, .control-input-md, .control-select-lg { flex: 1 1 auto; min-width: auto; }
  .dynamic-item-actions { margin-left: 0; justify-content: flex-end; }
}