/* compose.css — P6-02: Card-modal compose panel styles.
 *
 * Loaded by the conductor when it adds <link rel="stylesheet" href="/css/compose.css">
 * to frontend/index.html. Namespaced under .compose-* to avoid collisions.
 */

/* -------------------------------------------------------------------------
 * Panel container
 * ------------------------------------------------------------------------- */

.compose-panel {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.75rem;
  background: var(--bg-secondary, #f8f9fa);
  border: 1px solid var(--border-color, #dee2e6);
  border-radius: 6px;
  font-size: 0.875rem;
}

.compose-header {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-primary, #212529);
  margin-bottom: 0.25rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--border-color, #dee2e6);
}

/* -------------------------------------------------------------------------
 * Form fields
 * ------------------------------------------------------------------------- */

.compose-field {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.compose-label {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-secondary, #6c757d);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.compose-input {
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--border-color, #ced4da);
  border-radius: 4px;
  background: var(--bg-primary, #fff);
  color: var(--text-primary, #212529);
  font-size: 0.875rem;
  transition: border-color 0.15s;
}

.compose-input:focus {
  outline: none;
  border-color: var(--accent-color, #0d6efd);
  box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.15);
}

.compose-body-field {
  flex: 1;
}

.compose-textarea {
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--border-color, #ced4da);
  border-radius: 4px;
  background: var(--bg-primary, #fff);
  color: var(--text-primary, #212529);
  font-size: 0.875rem;
  font-family: inherit;
  resize: vertical;
  min-height: 100px;
  transition: border-color 0.15s;
}

.compose-textarea:focus {
  outline: none;
  border-color: var(--accent-color, #0d6efd);
  box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.15);
}

/* -------------------------------------------------------------------------
 * Action bar
 * ------------------------------------------------------------------------- */

.compose-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 0.25rem;
}

.compose-insert-draft-btn {
  color: var(--text-secondary, #6c757d);
}

.compose-send-btn {
  margin-left: auto; /* push to right */
}

/* -------------------------------------------------------------------------
 * Status / feedback area
 * ------------------------------------------------------------------------- */

.compose-status {
  min-height: 1.5rem;
}

.compose-status-msg {
  padding: 0.35rem 0.6rem;
  border-radius: 4px;
  font-size: 0.82rem;
}

.compose-error {
  background: var(--danger-bg, #fff3f3);
  color: var(--danger-color, #dc3545);
  border: 1px solid var(--danger-border, #f5c6cb);
}

.compose-success {
  background: var(--success-bg, #f0fff4);
  color: var(--success-color, #198754);
  border: 1px solid var(--success-border, #c3e6cb);
}

/* -------------------------------------------------------------------------
 * Card-modal host slot
 * (The conductor adds id="composeMount" inside the card modal — this
 *  positions the panel below the existing modal content.)
 * ------------------------------------------------------------------------- */

#composeMount {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-color, #dee2e6);
}

/* Hide the Phase-6 note in the approvals view once compose lands */
.approval-phase6-note {
  display: none !important;
}