/**
 * @file mf-desktop-overrides.css
 * @description Desktop-specific overrides for MobileFormBuilder (.mf-*) styles
 *              when rendered inside Tesseract profile folders.
 * @prd PRD-48 Phase 2
 *
 * Base .mf-* styles live in mobile.css. This file adapts them for the
 * desktop folder context (narrower gaps, compact inputs, profile-row parity).
 *
 * Scoped to .profile-checklist .mf-form to avoid polluting mobile layout.
 */

/* =============================================================================
   FOLDER-MODE FORM WRAPPER
   ============================================================================= */

.profile-checklist .mf-form {
  padding: 6px 10px;
  gap: 6px;
}

.profile-checklist .mf-form.mf-form--folder {
  padding: 4px 8px;
  gap: 4px;
}

/* =============================================================================
   SECTIONS — Compact for desktop density
   ============================================================================= */

.profile-checklist .mf-section {
  padding: 8px 10px;
  border-radius: 6px;
}

.profile-checklist .mf-section-title {
  font-size: 11px;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
  padding-bottom: 4px;
}

.profile-checklist .mf-section-title--collapsible::before {
  font-size: 8px;
  margin-right: 6px;
}

/* =============================================================================
   ROWS — Match legacy .profile-row--dual density
   ============================================================================= */

.profile-checklist .mf-row {
  gap: 6px;
  margin-bottom: 6px;
}

.profile-checklist .mf-row:last-child {
  margin-bottom: 0;
}

/* =============================================================================
   FIELDS — Compact inputs for desktop
   ============================================================================= */

.profile-checklist .mf-field {
  gap: 2px;
}

.profile-checklist .mf-field label {
  font-size: 10px;
}

.profile-checklist .mf-field input,
.profile-checklist .mf-field select {
  padding: 5px 8px;
  font-size: 13px;
  border-radius: 4px;
}

/* Placeholder text — brighter than mobile for desktop readability */
.profile-checklist .mf-field input::placeholder {
  color: rgba(255, 255, 255, 0.5);
  font-style: italic;
}

/* Wind section — slightly less dramatic on desktop */
.profile-checklist .mf-section--wind .mf-field input {
  font-size: 14px;
  padding: 6px 8px;
}

.profile-checklist .mf-section--wind .mf-section-title {
  font-size: 12px;
}

/* =============================================================================
   HINTS — Smaller on desktop
   ============================================================================= */

.profile-checklist .mf-hint {
  font-size: 10px;
  line-height: 1.3;
}

.profile-checklist .mf-hint--small {
  font-size: 9px;
}

/* =============================================================================
   TOGGLES — Compact checkboxes
   ============================================================================= */

.profile-checklist .mf-field--toggle {
  gap: 6px;
}

.profile-checklist .mf-field--toggle input[type="checkbox"] {
  width: 14px;
  height: 14px;
}

/* =============================================================================
   LEAD TRI-CELL — Desktop compact
   ============================================================================= */

.profile-checklist .mf-row--lead-units {
  gap: 6px;
  margin-top: 6px;
}

.profile-checklist .mf-row--lead-units input[type="number"] {
  padding: 4px 6px;
  font-size: 12px;
}

/* =============================================================================
   INFLUENCE AUDIT — Desktop styling
   ============================================================================= */

.profile-checklist .mf-section--derived {
  background: rgba(147, 51, 234, 0.05);
  border-color: rgba(147, 51, 234, 0.15);
}

.profile-checklist .mf-influence-row {
  font-size: 11px;
  padding: 3px 6px;
}

.profile-checklist .mf-influence-group-title {
  font-size: 11px;
}

/* =============================================================================
   ACTION BUTTONS — Hidden in folder mode (desktop has its own BUILD/SAVE chrome)
   ============================================================================= */

.profile-checklist .mf-section--actions {
  display: none;
}

/* =============================================================================
   CURRENT DELTA — Hidden in folder mode by default
   ============================================================================= */

.profile-checklist .mf-section--current-delta {
  display: none;
}

/* =============================================================================
   PROGRESSIVE DISCLOSURE — MFB field illumination/dimming in desktop context
   Same visual language as mobile but works with .mf-field parents
   ============================================================================= */

.profile-checklist .profile-row--summoned,
.profile-checklist .mf-field--illuminated,
.profile-checklist .mf-row--summoned {
  position: relative;
}

.profile-checklist .profile-row--hidden,
.profile-checklist .mf-field--hidden,
.profile-checklist .mf-row--hidden {
  display: none !important;
}